:root{color-scheme:dark;--bg:#070a11;--panel:#111827;--line:#1d2a3c;--ink:#f3f7ff;--muted:#6f819f;--blue:#4f6fff;--green:#35efb3;--red:#ff4e5d;--amber:#ffbd35}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px;padding:9px max(22px,calc((100vw - 1800px)/2));border-bottom:1px solid var(--line);background:#0c111b}.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none}.brand img{width:46px;height:46px;border-radius:50%}.brand strong,.brand small{display:block}.brand small{margin-top:3px;color:var(--muted);font-size:11px}.top-actions{display:flex;gap:10px;align-items:center}.badge,.back{padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:#9eadd0;font-size:11px;text-decoration:none}main{max-width:1840px;margin:auto;padding:22px 28px 54px}.hero{display:flex;align-items:end;justify-content:space-between;gap:25px;padding:22px 24px;margin-bottom:14px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,#111a2c,#0b111d)}.eyebrow{margin:0 0 8px;color:var(--green);font-size:11px;font-weight:900;letter-spacing:.18em}.hero h1{margin:0;font:800 32px Arial,sans-serif}.hero p:not(.eyebrow){margin:8px 0 0;color:#8c9bb7}.hero label{display:grid;gap:6px;color:#7e8ca7;font-size:11px}.hero select,.controls input,.controls select{min-height:42px;border:1px solid var(--line);border-radius:9px;padding:0 14px;background:#101827;color:#fff;font:inherit}.status{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:#9aabc8}.status.error{border-color:#71323a;color:#ff9ca6}.tabs{position:sticky;top:0;z-index:5;display:flex;gap:26px;overflow:auto;margin:0 -28px 20px;padding:0 40px;background:#0c111b;border-block:1px solid var(--line)}.tabs button{padding:17px 0 14px;border:0;border-bottom:3px solid transparent;background:transparent;color:#62728f;font:800 13px inherit;letter-spacing:.06em;white-space:nowrap;text-transform:uppercase}.tabs button.active{border-color:var(--green);color:var(--green)}.panel{display:grid;gap:22px}.block{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.block>h2,.block-title{margin:0;padding:24px 26px 12px}.block h2,.block-title h2{margin:0;color:var(--green);font-size:15px;letter-spacing:.06em;text-transform:uppercase}.block-title{display:flex;justify-content:space-between;align-items:center}.hint{margin:0;padding:0 26px 14px;color:var(--muted);font-size:12px}.table-wrap{overflow:auto;max-height:650px}table{width:100%;border-collapse:collapse;white-space:nowrap}th{position:sticky;top:0;z-index:2;padding:14px 21px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#111827;color:#637496;text-align:right;font-size:11px;letter-spacing:.08em;text-transform:uppercase}th:first-child,td:first-child{text-align:left}td{padding:14px 21px;border-bottom:1px solid #1b2638;text-align:right;font-size:14px}tbody tr:hover{background:#151f30}tfoot{background:#12202c;font-weight:900}.pill{display:inline-block;padding:6px 12px;border-radius:999px;background:#1d2a55;color:#6682ff;font-size:12px;font-weight:900}.pill.other{background:#3d3428;color:#ffbf41}.positive{color:var(--green)!important}.negative{color:var(--red)!important}.muted{color:var(--muted)!important}.mini-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 24px 22px}.mini-kpis article{padding:24px;border:1px solid var(--line);border-radius:14px;background:#101725}.mini-kpis span,.mini-kpis strong{display:block}.mini-kpis span{color:#657595;font-size:11px}.mini-kpis strong{margin-top:12px;font-size:26px}.store-card{padding:22px 26px;border:1px solid #214c43;border-left:5px solid var(--green);border-radius:14px;background:#101c1d}.store-card span,.store-card strong,.store-card small{display:block}.store-card span{color:var(--green);font-weight:800}.store-card strong{margin:10px 0 6px;font-size:28px}.store-card small{color:#92a2bc}.controls{display:flex;gap:12px}.controls input{width:min(360px,100%)}.controls select{min-width:250px}.count{padding:5px 12px;border-radius:999px;background:#133033;color:#66899e;font-size:11px}.tags{display:flex;justify-content:flex-end;gap:4px;max-width:330px;flex-wrap:wrap}.tags span{padding:4px 7px;border-radius:4px;background:#1b2851;color:#7790ff;font-size:11px}.tags.green span{background:#113536;color:var(--green)}.combined-grid{display:grid;grid-template-columns:repeat(3,minmax(290px,1fr));gap:14px;padding:0 22px 22px}.compare-card{padding:18px;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:13px;background:#0d1421}.compare-card header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}.compare-card header span{color:#7182a0;font-size:11px}.compare-card>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}.compare-card p{display:grid;gap:5px;color:#667694;font-size:11px}.compare-card b{color:#fff;font-size:15px}.compare-card footer{padding-top:12px;border-top:1px solid var(--line);color:#7182a0;font-size:12px}.compare-card footer b{float:right;color:#fff}.empty{padding:34px!important;text-align:center!important;color:var(--muted)}footer#sourceNote{color:#697a98;font-size:11px;line-height:1.6}
@media(max-width:950px){main{padding:16px}.tabs{margin-inline:-16px;padding-inline:24px}.hero{align-items:stretch;flex-direction:column}.mini-kpis,.combined-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.topbar{padding:8px 12px}.badge{display:none}.brand img{width:40px;height:40px}.hero{padding:18px}.hero h1{font-size:27px}.tabs{gap:20px}.controls{display:grid}.controls input,.controls select{width:100%;min-width:0}.mini-kpis,.combined-grid{grid-template-columns:1fr}.block>h2,.block-title{padding-inline:18px}.hint{padding-inline:18px}td,th{padding:12px 15px}.table-wrap{max-height:68vh}}
.sio-section{display:grid;gap:18px}.sio-heading{padding:5px 2px}.sio-heading h2{margin:0;color:#f3f7ff;font-size:17px;letter-spacing:0;text-transform:none}.sio-heading p{margin:7px 0 0;color:var(--muted);font-size:12px}.sio-kpis{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:11px}.sio-kpis article{min-height:116px;padding:21px 20px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.sio-kpis span,.sio-kpis strong{display:block}.sio-kpis span{color:#657595;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.sio-kpis strong{margin-top:17px;font-size:25px}.sio-kpis article:nth-child(2) strong,.sio-kpis article:nth-child(5) strong{color:#4f6fff}.sio-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px}.sio-chart-card{min-width:0;padding:20px 18px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.sio-chart-card h3{min-height:32px;margin:0;color:#687996;font-size:12px;letter-spacing:.05em;text-transform:uppercase}.sio-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:13px;margin:1px 0 3px;color:#8190aa;font-size:10px}.sio-legend span{display:flex;align-items:center;gap:6px}.swatch{display:inline-block;width:10px;height:10px;border-radius:1px}.swatch.so-prev{background:#4f6fff}.swatch.so-current{background:#ff9d29}.line{display:inline-block;width:21px;border-top:3px solid}.line.si-current{border-color:#35efb3}.line.so-current{border-color:#ff9d29}.line.si-prev{border-color:#35efb3;border-top-style:dashed}.line.so-prev{border-color:#ff9d29;border-top-style:dashed}.so-monthly-bars,.sio-line-chart{display:block;width:100%;height:260px;overflow:visible}.grid-line{stroke:#243047;stroke-width:1}.axis-label{fill:#7888a5;font-size:11px}.so-bar.previous{fill:#4f6fff;opacity:.72}.so-bar.current{fill:#ff9d29;opacity:.78}.chart-line{fill:none;stroke-width:2.4;vector-effect:non-scaling-stroke}.chart-line.si{stroke:#35efb3}.chart-line.so{stroke:#ff9d29}.chart-line.prev{stroke-dasharray:7 6;opacity:.9}.chart-dot{fill:#111827;stroke-width:2.3;vector-effect:non-scaling-stroke}.chart-dot.si{stroke:#35efb3}.chart-dot.so{stroke:#ff9d29}.chart-dot.previous{stroke-dasharray:2 1}.sio-detail .table-wrap{max-height:none}.sio-detail td:nth-child(2),.sio-detail td:nth-child(5){color:#4f6fff}.sio-detail tfoot{border-top:1px solid #24404b}
@media(max-width:1200px){.sio-kpis{grid-template-columns:repeat(3,1fr)}.sio-charts{grid-template-columns:1fr}}
@media(max-width:620px){.sio-kpis{grid-template-columns:1fr 1fr}.sio-kpis article{min-height:100px;padding:17px 15px}.sio-kpis strong{font-size:20px}.sio-chart-card{padding:17px 9px}.so-monthly-bars,.sio-line-chart{height:230px}.sio-legend{gap:8px}}

/* MEJORA DE LEGIBILIDAD DASHBOARD KAM 2026-10-09 */
@media (min-width: 951px) {
  main {
    max-width: 1920px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .tabs {
    margin-left: -20px;
    margin-right: -20px;
  }

  .table-wrap td {
    font-size: 16px;
    padding: 17px 18px;
  }

  .table-wrap th {
    font-size: 12px;
    padding: 16px 18px;
  }

  .block h2,
  .block-title h2 {
    font-size: 16px;
  }

  .controls input,
  .controls select {
    min-height: 46px;
    font-size: 14px;
  }

  .pill {
    font-size: 13px;
  }

  .tabs button {
    font-size: 14px;
  }
}


/* INICIO DISEÑO KAM LIGHT 2026 */

:root {
  color-scheme: light;
  --bg: #f4f7fc;
  --panel: #ffffff;
  --line: #dce5f1;
  --ink: #10234a;
  --muted: #607595;
  --blue: #075be8;
  --green: #009e68;
  --red: #e21b35;
  --amber: #b77900;
}

html, body {
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.brand,
.brand strong {
  color: #10234a;
}

.brand small {
  color: #647898;
}

.badge, .back {
  background: #f7faff;
  border-color: #ccd9ec;
  color: #38557d;
}

main {
  max-width: 1920px;
  padding: 22px 22px 60px;
}

.hero {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 3px 15px rgba(22,49,91,.06);
}

.hero h1 {
  color: #10234a;
  font-size: 34px;
}

.hero p:not(.eyebrow) {
  color: #516b93;
  font-size: 15px;
}

.eyebrow {
  color: #075be8;
  font-size: 12px;
}

.hero label {
  color: #50698f;
}

.hero select,
.controls input,
.controls select {
  min-height: 46px;
  background: #ffffff;
  border: 1px solid #cbd9eb;
  color: #10234a;
  font-size: 15px;
}

.tabs {
  background: #ffffff;
  border-color: var(--line);
}

.tabs button {
  color: #50688f;
  font-size: 14px;
  font-weight: 800;
}

.tabs button.active {
  color: #075be8;
  border-bottom-color: #075be8;
  background: #edf4ff;
}

.block {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 3px 14px rgba(22,49,91,.055);
}

.block h2,
.block-title h2 {
  color: #10234a;
  font-size: 18px;
  letter-spacing: .025em;
}

.hint {
  color: #607595;
  font-size: 13px;
}

.table-wrap {
  max-height: 750px;
}

table {
  color: #10234a;
}

th {
  background: #f0f4fa;
  color: #38557d;
  border-color: #dce5f1;
  font-size: 13px;
  padding: 17px 19px;
  font-weight: 800;
}

td {
  color: #10234a;
  border-bottom: 1px solid #e2e9f3;
  font-size: 17px;
  font-weight: 700;
  padding: 18px 19px;
}

tbody tr:hover {
  background: #edf5ff;
}

tfoot {
  background: #eaf2ff;
  color: #10234a;
  font-weight: 900;
}

tfoot td {
  font-size: 19px;
}

.pill {
  background: #dfeaff;
  color: #075be8;
  font-size: 13px;
  font-weight: 900;
  padding: 7px 12px;
}

.pill.other {
  background: #fff0c9;
  color: #8c5900;
}

.positive {
  color: #009e68 !important;
}

.negative {
  color: #e21b35 !important;
}

.muted {
  color: #607595 !important;
}

.mini-kpis article,
.compare-card,
.sio-chart-card,
.sio-kpis article {
  background: #ffffff;
  border-color: #dce5f1;
}

.mini-kpis span,
.sio-kpis span {
  color: #50698f;
  font-size: 13px;
}

.mini-kpis strong,
.sio-kpis strong {
  color: #10234a;
  font-size: 31px;
  font-weight: 900;
}

.count {
  background: #eaf2ff;
  color: #075be8;
  font-size: 12px;
}

.store-card {
  background: #f0faf7;
}

.store-card strong {
  color: #10234a;
}

.tags span {
  background: #eaf2ff;
  color: #075be8;
}

.tags.green span {
  background: #e1f7ef;
  color: #00865c;
}

.compare-card header span,
.compare-card p,
.compare-card footer {
  color: #607595;
}

.compare-card b,
.compare-card footer b {
  color: #10234a;
}

.status {
  background: #ffffff;
  color: #38557d;
}

.status.error {
  background: #fff1f2;
  color: #b42335;
}

.empty {
  color: #607595;
}

footer#sourceNote {
  color: #607595;
  font-size: 12px;
}

/* Mejoras para gráficos */
.sio-heading h2 {
  color: #10234a;
}

.sio-chart-card h3,
.sio-legend,
.axis-label {
  color: #50698f;
  fill: #50698f;
}

.grid-line {
  stroke: #dce5f1;
}

.chart-dot {
  fill: #ffffff;
}

/* Adaptación para pantallas pequeñas */
@media (max-width: 950px) {
  main {
    padding: 16px;
  }

  .tabs {
    margin-inline: -16px;
  }

  td {
    font-size: 15px;
    padding: 14px;
  }

  th {
    font-size: 12px;
    padding: 13px;
  }

  .mini-kpis strong,
  .sio-kpis strong {
    font-size: 24px;
  }
}

@media (max-width: 620px) {
  .hero h1 {
    font-size: 27px;
  }

  .block h2,
  .block-title h2 {
    font-size: 15px;
  }

  td {
    font-size: 14px;
  }

  .table-wrap {
    max-height: 68vh;
  }
}

/* FIN DISEÑO KAM LIGHT 2026 */

/* KAM FINAL COLOR START */

/* Nombres sin cápsulas */
.table-wrap td:first-child .pill,
.table-wrap td:first-child .pill.other {
  background: transparent !important;
  color: #10234a !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-size: 18px !important;
}

/* Números más grandes */
.table-wrap td {
  font-size: 19px;
  font-weight: 800;
  padding: 18px 20px;
}

.table-wrap th {
  font-size: 14px;
  background: #edf4ff;
}

.table-wrap tfoot {
  background: #e6f0ff;
}

.table-wrap tfoot td {
  font-size: 21px;
}

.table-wrap tbody tr:nth-child(even) {
  background: #f8fbff;
}

/* Tarjetas con colores */
.mini-kpis article:nth-child(4n+1) {
  background: linear-gradient(135deg,#dcecff,#f7fbff);
  border-color: #c5dcff;
}

.mini-kpis article:nth-child(4n+2) {
  background: linear-gradient(135deg,#ece2ff,#faf7ff);
  border-color: #ddcaff;
}

.mini-kpis article:nth-child(4n+3) {
  background: linear-gradient(135deg,#ffe1e9,#fff7f9);
  border-color: #ffc9d6;
}

.mini-kpis article:nth-child(4n+4) {
  background: linear-gradient(135deg,#d7f8e9,#f5fff9);
  border-color: #b6edd3;
}

.mini-kpis strong {
  font-size: 34px;
  font-weight: 900;
}

.mini-kpis article:nth-child(4n+3) strong {
  color: #e21b35;
}

.mini-kpis article:nth-child(4n+4) strong {
  color: #009e68;
}

/* Otras pestañas */
.sio-kpis article:nth-child(3n+1) {
  background: #eaf3ff;
}

.sio-kpis article:nth-child(3n+2) {
  background: #f2eaff;
}

.sio-kpis article:nth-child(3n+3) {
  background: #e8f9f0;
}

.sio-kpis strong {
  font-size: 30px;
}

.compare-card {
  background: #f0f6ff;
  border-left: 4px solid #075bea;
}

/* Adaptación móvil */
@media(max-width:950px) {
  .table-wrap td {
    font-size: 15px;
    padding: 13px;
  }
  .table-wrap tfoot td {
    font-size: 17px;
  }
  .mini-kpis strong {
    font-size: 26px;
  }
}

/* KAM FINAL COLOR END */

/* KAM KPI GRID V2 */
@media (min-width: 1100px) {
  #otherKpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

#otherKpis article {
  min-width: 0;
  min-height: 145px;
  position: relative;
  padding: 24px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(30,70,130,.07);
}

#otherKpis article::before {
  position: absolute;
  right: 20px;
  top: 18px;
  font-size: 27px;
}

#otherKpis article:nth-child(1)::before {
  content: "▥";
  color: #1677f2;
}

#otherKpis article:nth-child(2)::before {
  content: "▥";
  color: #9955e8;
}

#otherKpis article:nth-child(3)::before {
  content: "↘";
  color: #ef3052;
}

#otherKpis article:nth-child(4)::before {
  content: "✓";
  color: #00a56a;
}

#otherKpis strong {
  font-family: Arial, sans-serif;
  font-size: clamp(26px, 2.1vw, 36px);
  letter-spacing: -.7px;
}

@media (max-width: 1099px) and (min-width: 621px) {
  #otherKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  #otherKpis {
    grid-template-columns: 1fr;
  }
}

/* Filtro de caídas y resumen por KAM (Rodrigo 20-10) */
.controls .check{display:flex;align-items:center;gap:8px;color:var(--ink,#f3f8ff);font-size:13px;font-weight:800;white-space:nowrap;cursor:pointer}
.controls .check input{width:18px;height:18px;accent-color:#ff5362}
.drops{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 14px}
.drops-title{color:#8ca2bd;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-right:4px}
.drop{display:grid;grid-template-columns:auto;gap:2px;padding:9px 13px;border:1px solid #3a2a34;border-radius:12px;background:#1d1520;color:#f3f8ff;text-align:left;cursor:pointer;font:inherit}
.drop b{font-size:12px}.drop span{color:#c9a7b0;font-size:11px}.drop strong{font-size:15px}
.drop.active{border-color:#ff5362;box-shadow:0 0 0 1px #ff5362 inset}
/* Sell In/Out: filtros por cliente y meses, 2025 Ene-Dic (Rodrigo 02-11) */
.sio-controls{flex-wrap:wrap;align-items:end}.sio-controls select{min-width:200px}.sio-field{display:grid;gap:5px;color:#7e8ca7;font-size:11px}.sio-field select{min-width:150px}.sio-note{margin:-6px 2px 0;color:var(--muted);font-size:12px}.sio-note b{color:#4f6fff}.so-bar.previous.full{opacity:.38}.sio-detail tr.sin-2026 td{color:var(--muted)}.sio-detail tr.sin-2026 td:nth-child(2),.sio-detail tr.sin-2026 td:nth-child(5){color:#6f84d9}
@media(max-width:620px){.sio-field select,.sio-controls select{min-width:0;width:100%}}