/* ==========================================================================
   Casa Ley · Cronograma Visión360 (AGO)
   Paleta tomada del tema del .pbix original:
     rojo header   #CC1F1F        beige tarjeta  #EDE9D0
     crema texto   #FEFEFA        rojo alerta    #FFCCCC
     series: azul #165DFF · rojo #F53F3F · naranja #FF7D00 · amarillo #FADC19 · verde #00B42A
   ========================================================================== */
:root{
  --red:#CC1F1F;
  --red-dark:#A81A1A;
  --beige:#EDE9D0;
  --beige-line:#DAD4B5;
  --cream:#FEFEFA;
  --ink:#252423;
  --muted:#6b6a67;
  --blue:#165DFF;
  --alert:#FFCCCC;
  --panel-border:#e4e2da;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#f3f2ee;color:var(--ink);
  font-family:"Segoe UI",-apple-system,Roboto,Helvetica,Arial,sans-serif;}

/* Lienzo de proporción fija, se centra como una página de Power BI */
.canvas{width:1440px;max-width:100%;margin:0 auto;background:#f6f5f1;
  min-height:100vh;box-shadow:0 0 24px rgba(0,0,0,.12);}

/* ---------- header rojo ---------- */
.topbar{display:flex;align-items:stretch;background:var(--red);color:var(--cream);
  height:96px;}
.title-block{display:flex;align-items:center;gap:14px;padding:0 22px;min-width:300px;}
.title-text{font-size:24px;font-weight:700;line-height:1.05;letter-spacing:.3px;}
.title-text .ago{font-weight:400;opacity:.9}
.logo-arrows{height:34px;width:auto;}
.page-tabs{display:flex;align-items:flex-end;gap:6px;padding:0 20px 8px;margin-left:auto;}
.tab{background:rgba(255,255,255,.14);color:var(--cream);border:0;
  padding:8px 26px;font-size:14px;font-weight:600;letter-spacing:.5px;cursor:pointer;
  border-radius:6px 6px 0 0;transition:background .15s;}
.tab:hover{background:rgba(255,255,255,.26)}
.tab.active{background:var(--cream);color:var(--red);}

/* ---------- páginas ---------- */
.page{display:none;padding:14px 16px 4px;}
.page.active{display:block;}

/* ---------- KPI cards ---------- */
.kpi-row{display:flex;gap:10px;margin-bottom:12px;}
.kpi-card{flex:1;background:var(--beige);border:1px solid var(--beige-line);
  border-radius:6px;padding:10px 12px;min-height:92px;display:flex;flex-direction:column;
  justify-content:center;box-shadow:0 1px 2px rgba(0,0,0,.05);}
.kpi-label{font-size:12px;font-weight:600;color:var(--red-dark);
  text-transform:none;margin-bottom:6px;line-height:1.15;}
.kpi-value{font-size:30px;font-weight:800;color:var(--ink);line-height:1;}
.kpi-value.pct::after{content:"%";}      /* se rellena numérico y muestra % */

/* tarjeta compuesta de Apego Real */
.kpi-card.apego{background:var(--red);color:var(--cream);flex:1.25;}
.apego-title{font-size:14px;font-weight:700;margin-bottom:4px;}
.apego-split{display:flex;gap:16px;}
.apego-split>div{display:flex;flex-direction:column;}
.apego-cap{font-size:10px;letter-spacing:1px;opacity:.85;}
.apego-num{font-size:26px;font-weight:800;line-height:1;}
.apego-sub{display:flex;gap:14px;margin-top:6px;font-size:10.5px;opacity:.92;}
.apego-sub b{font-weight:700;}

/* ---------- slicers ---------- */
.slicer-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.slicer{background:#fff;border:1px solid var(--panel-border);border-radius:6px;
  padding:6px 8px;min-width:150px;flex:1;}
.slicer label{display:block;font-size:10.5px;font-weight:700;color:var(--red-dark);
  margin-bottom:3px;text-transform:uppercase;letter-spacing:.4px;}
.slicer select{width:100%;border:1px solid var(--panel-border);border-radius:4px;
  padding:5px 6px;font-size:12.5px;background:#fbfbf9;color:var(--ink);}

/* ---------- paneles ---------- */
.panel{background:#fff;border:1px solid var(--panel-border);border-radius:6px;
  padding:10px 12px 12px;box-shadow:0 1px 2px rgba(0,0,0,.04);}
.panel-title{font-size:12.5px;font-weight:700;color:var(--red-dark);
  margin-bottom:8px;padding-bottom:6px;border-bottom:2px solid var(--beige);}
.chart-row{display:flex;gap:12px;margin-bottom:12px;}
.chart-wrap{height:300px;position:relative;}

/* ---------- pivot tables (apiladas a lo ancho: 12 columnas c/u) ---------- */
.pivot-row{display:flex;flex-direction:column;gap:12px;margin-bottom:14px;}
.pivot-row .panel{min-width:0;}
.pivot-wrap{max-height:320px;overflow:auto;}
table.pivot{width:100%;border-collapse:collapse;font-size:11.5px;}
table.pivot th{background:var(--red);color:var(--cream);font-weight:600;
  padding:6px 6px;position:sticky;top:0;text-align:right;white-space:nowrap;}
table.pivot th:first-child{text-align:left;}
table.pivot td{padding:5px 6px;border-bottom:1px solid #eee;text-align:right;
  white-space:nowrap;}
table.pivot td:first-child{text-align:left;font-weight:600;color:var(--ink);}
table.pivot tr:nth-child(even){background:#faf9f4;}
/* filas clicables (filtrado cruzado) */
table.pivot tbody tr.prow{cursor:pointer;}
table.pivot tbody tr.prow:hover{background:#fdeeee;}
table.pivot tbody tr.prow.sel{background:#f7d7d7;box-shadow:inset 3px 0 0 var(--red);}
table.pivot tbody tr.prow.sel td:first-child{color:var(--red);}

/* barra de selección cruzada */
/* aviso de error de conexión */
.err-banner[hidden]{display:none !important;}
.err-banner{background:#fdecec;border:1px solid #f3b4b4;border-left:5px solid var(--red);
  border-radius:6px;padding:12px 44px 12px 14px;margin:0 16px 12px;position:relative;
  color:#7a1a1a;font-size:13px;}
.err-banner .err-detail{margin-top:5px;font-family:Consolas,monospace;font-size:12px;
  color:#333;word-break:break-word;white-space:pre-wrap;}
.err-banner .err-hint{margin-top:6px;font-style:italic;color:#7a1a1a;}
.err-banner .err-x{position:absolute;top:8px;right:8px;background:var(--red);color:#fff;
  border:0;border-radius:5px;padding:4px 10px;font-size:12px;cursor:pointer;}

/* ---------- pantalla de login ---------- */
.login-screen[hidden]{display:none !important;}
.login-screen{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(135deg,#7a1414,#CC1F1F);}
.login-card{background:#fff;border-radius:12px;padding:28px 26px;width:340px;max-width:100%;
  box-shadow:0 14px 44px rgba(0,0,0,.35);display:flex;flex-direction:column;}
.login-brand{font-size:24px;font-weight:800;color:var(--red);line-height:1.05;text-align:center;}
.login-brand span{font-weight:400;color:#777;}
.login-sub{text-align:center;color:#666;font-size:13px;margin:6px 0 16px;}
.login-card label{font-size:12px;font-weight:700;color:var(--red-dark);margin:8px 0 3px;}
.login-card input{border:1px solid var(--panel-border);border-radius:6px;padding:10px 12px;font-size:14px;}
.login-card input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 2px rgba(204,31,31,.15);}
.login-err[hidden]{display:none !important;}
.login-err{background:#fdecec;border:1px solid #f3b4b4;color:#7a1a1a;border-radius:6px;
  padding:8px 10px;font-size:12.5px;margin-top:12px;}
.login-btn{margin-top:16px;background:var(--red);color:#fff;border:0;border-radius:6px;
  padding:12px;font-size:15px;font-weight:700;cursor:pointer;}
.login-btn:hover{background:var(--red-dark);}
.login-btn:disabled{opacity:.6;cursor:default;}
.login-foot{color:#fff;opacity:.85;font-size:12px;margin-top:16px;}

/* ---------- banner de alcance por rol ---------- */
.scope-banner[hidden]{display:none !important;}
.scope-banner{background:#fff4d6;border:1px solid #e6cf87;border-left:4px solid #D9B300;
  border-radius:6px;padding:8px 12px;margin:0 16px 12px;font-size:12.5px;font-weight:600;color:#6a5300;}

/* ---------- barra de sesión ---------- */
.session-box[hidden]{display:none !important;}
.session-box{display:flex;align-items:center;gap:8px;}
.session-box #sessionUser{color:var(--red-dark);font-weight:700;}
.session-box #logoutBtn{background:var(--beige);border:1px solid var(--beige-line);border-radius:5px;
  padding:3px 10px;font-size:11px;cursor:pointer;color:var(--red-dark);font-weight:600;}
.session-box #logoutBtn:hover{background:#e6dfc0;}
.statusbar{flex-wrap:wrap;gap:6px;}

.cross-bar[hidden]{display:none !important;}
.cross-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--panel-border);border-left:4px solid var(--red);
  border-radius:6px;padding:8px 12px;margin-bottom:10px;font-size:12.5px;}
.cross-bar .cross-lbl{font-weight:700;color:var(--red-dark);}
.cross-bar .chip{background:var(--beige);border:1px solid var(--beige-line);
  border-radius:14px;padding:3px 10px;cursor:pointer;user-select:none;}
.cross-bar .chip:hover{background:#e6dfc0;}
.cross-bar .chip .x{color:var(--red);font-weight:700;margin-left:2px;}
.cross-bar .cross-clear{margin-left:auto;background:var(--red);color:#fff;border:0;
  border-radius:6px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;}
.cross-bar .cross-clear:hover{background:var(--red-dark);}

/* ---------- agenda big table ---------- */
.agenda-panel{margin-bottom:14px;}
.table-wrap{max-height:560px;overflow:auto;}
table.datatable{width:100%;border-collapse:collapse;font-size:12px;}
table.datatable th{background:var(--red);color:var(--cream);font-weight:600;
  padding:8px 8px;position:sticky;top:0;text-align:left;white-space:nowrap;}
table.datatable td{padding:6px 8px;border-bottom:1px solid #eee;white-space:nowrap;}
table.datatable tr:nth-child(even){background:#faf9f4;}
table.datatable th.num, table.datatable td.num{text-align:right;}
table.datatable td.num.neg{color:#CC1F1F;font-weight:600;}


/* ---------- página RESUMEN (hoja "resumen" del Excel) ---------- */
.resumen-panel{margin-bottom:14px;}
.resumen-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  border-bottom:2px solid var(--beige);margin-bottom:8px;}
.resumen-head .panel-title{border-bottom:0;margin-bottom:2px;padding-bottom:0;}
.resumen-meta{font-size:11.5px;color:var(--muted);padding-bottom:7px;}
.resumen-meta b{color:var(--ink);}
.resumen-actions{padding-top:2px;}
.btn-ghost{background:#fff;border:1px solid var(--beige-line);color:var(--red-dark);
  border-radius:6px;padding:5px 11px;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap;}
.btn-ghost:hover{background:var(--beige);}
.resumen-note[hidden]{display:none !important;}
.resumen-note{background:#fff4d6;border:1px solid #e6cf87;border-left:4px solid #D9B300;
  border-radius:6px;padding:7px 10px;margin-bottom:8px;font-size:12px;color:#6a5300;}

/* slicer de rango de fechas */
.slicer-range{min-width:270px;flex:1.4;}
.range-row{display:flex;align-items:center;gap:6px;}
.range-row input[type=date]{flex:1;min-width:0;border:1px solid var(--panel-border);border-radius:4px;
  padding:4px 6px;font-size:12px;background:#fbfbf9;color:var(--ink);font-family:inherit;}
.range-sep{font-size:11px;color:var(--muted);}
.range-clear{background:transparent;border:1px solid var(--panel-border);border-radius:4px;
  color:var(--red);font-weight:700;cursor:pointer;padding:3px 7px;font-size:11px;}
.range-clear:hover{background:#fdeeee;}

/* tabla */
.resumen-wrap{max-height:640px;overflow:auto;border:1px solid var(--panel-border);border-radius:6px;}
table.resumen{width:100%;border-collapse:separate;border-spacing:0;font-size:11.5px;min-width:1560px;}
table.resumen thead th{position:sticky;background:var(--red);color:var(--cream);font-weight:600;
  white-space:nowrap;padding:6px 8px;border-right:1px solid rgba(255,255,255,.14);}
table.resumen thead tr.h1 th{top:0;z-index:3;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;
  text-align:center;background:var(--red-dark);border-bottom:1px solid rgba(255,255,255,.25);}
table.resumen thead tr.h2 th{top:27px;z-index:2;text-align:right;}
table.resumen thead tr.h2 th.txt{text-align:left;}
table.resumen thead th.sortable{cursor:pointer;user-select:none;}
table.resumen thead th.sortable:hover{background:#b81c1c;}
table.resumen thead tr.h2 th.active{background:#8e1515;box-shadow:inset 0 -3px 0 var(--beige);}
/* tono sutil por grupo en la fila de grupos */
table.resumen th.g-tienda{background:#7a1414;}
table.resumen th.g-prog{background:#8e1a1a;}
table.resumen th.g-pln{background:#a11e1e;}
table.resumen th.g-falt{background:#8e1a1a;}
table.resumen th.g-inv{background:#a11e1e;}
table.resumen th.g-prec{background:#8e1a1a;}

table.resumen tbody td{padding:5px 8px;border-bottom:1px solid #efede6;white-space:nowrap;
  border-right:1px solid #f3f1ea;}
table.resumen tbody tr:nth-child(even) td{background:#faf9f4;}
table.resumen tbody tr:hover td{background:#fdf3e8;}
table.resumen td.txt{text-align:left;color:var(--ink);}
table.resumen td.col-tienda, table.resumen th.col-tienda{font-weight:700;
  position:sticky;left:0;z-index:1;box-shadow:2px 0 0 #e9e6dc;}
table.resumen tbody td.col-tienda{background:#fff;}
table.resumen tbody tr:nth-child(even) td.col-tienda{background:#faf9f4;}
table.resumen tbody tr:hover td.col-tienda{background:#fdf3e8;}
table.resumen thead tr.h2 th.col-tienda{z-index:5;left:0;}
table.resumen td.num{text-align:right;font-variant-numeric:tabular-nums;}
table.resumen td.na{color:#b7b4ab;text-align:center;}
table.resumen td.warn{color:var(--red);font-weight:700;}
table.resumen td.empty{padding:26px;text-align:center;color:var(--muted);font-size:13px;}

/* barras dentro de la celda (porcentajes) */
table.resumen td.pct{position:relative;min-width:88px;}
table.resumen td.pct::before{content:"";position:absolute;left:4px;bottom:3px;height:3px;
  width:var(--w);max-width:calc(100% - 8px);border-radius:2px;background:#d8d3bd;opacity:.9;}
table.resumen td.pct.good::before{background:#8AA31E;}
table.resumen td.pct.bad::before{background:#E0322F;}
table.resumen td.pct span{position:relative;}
table.resumen td.pct.good.lo span{color:#9c2a00;font-weight:700;}
table.resumen td.pct.bad.hi span{color:var(--red);font-weight:700;}
/* invasión: barra proporcional al máximo del periodo */
table.resumen td.num.bad[style]{position:relative;}
table.resumen td.num.bad[style]::before{content:"";position:absolute;left:4px;bottom:3px;height:3px;
  width:var(--w);max-width:calc(100% - 8px);border-radius:2px;background:#E0322F;opacity:.8;}

/* totales */
table.resumen tfoot td{position:sticky;bottom:0;z-index:2;background:var(--beige);color:var(--ink);
  font-weight:700;padding:7px 8px;border-top:2px solid var(--beige-line);white-space:nowrap;
  font-variant-numeric:tabular-nums;text-align:right;}
table.resumen tfoot td.txt{text-align:left;}
table.resumen tfoot td.col-tienda{left:0;z-index:3;background:var(--beige);}
table.resumen tfoot td.na{color:#9a9686;text-align:center;}

/* leyenda */
.resumen-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px;font-size:10.5px;color:var(--muted);}
.resumen-legend .sw{display:inline-block;width:18px;height:4px;border-radius:2px;vertical-align:middle;margin-right:5px;}
.resumen-legend .sw-good{background:#8AA31E;}
.resumen-legend .sw-bad{background:#E0322F;}

/* ---------- status ---------- */
.statusbar{display:flex;justify-content:space-between;align-items:center;
  padding:8px 16px;font-size:11px;color:var(--muted);}
#mode-badge{background:var(--beige);color:var(--red-dark);font-weight:700;
  padding:3px 10px;border-radius:10px;}
.brand{font-weight:600;}

/* =========================================================================
   RESPONSIVO — tablet y celular
   ========================================================================= */

/* Tablet / pantallas medianas */
@media (max-width:1100px){
  .canvas{width:100%;}
  .chart-row{flex-direction:column;}
  .chart-row .panel{flex:1 1 auto !important;}
  .chart-wrap{height:280px;}
}

/* Celular */
@media (max-width:820px){
  html,body{font-size:15px;}
  .canvas{box-shadow:none;}

  /* Encabezado: título arriba, pestañas fijas abajo */
  .topbar{flex-direction:column;align-items:stretch;height:auto;}
  .title-block{padding:12px 16px;min-width:0;justify-content:space-between;}
  .title-text{font-size:19px;}
  .logo-arrows{height:26px;}

  .page-tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;margin:0;padding:0;
    background:var(--red);gap:0;box-shadow:0 -2px 10px rgba(0,0,0,.25);}
  .page-tabs .tab{flex:1;border-radius:0;padding:12px 0;font-size:13px;text-align:center;}
  .page-tabs .tab.active{background:var(--cream);color:var(--red);}
  .canvas{padding-bottom:60px;}      /* espacio para la barra inferior */

  .page{padding:10px 10px 4px;}

  /* KPIs en cuadrícula de 2 columnas */
  .kpi-row{flex-wrap:wrap;gap:8px;}
  .kpi-card{flex:1 1 46%;min-width:0;min-height:78px;padding:8px 10px;}
  .kpi-card .kpi-value{font-size:24px;}
  .kpi-card.apego{flex:1 1 100%;}
  .apego-num{font-size:22px;}

  /* Filtros en 2 columnas compactas */
  .slicer-row{gap:6px;}
  .slicer{flex:1 1 46%;min-width:0;padding:5px 7px;}
  .slicer label{font-size:9.5px;}
  .slicer select{font-size:12px;}

  /* Gráficas apiladas */
  .chart-wrap{height:250px;}

  /* Tablas: desplazamiento horizontal cómodo */
  .pivot-wrap{max-height:none;-webkit-overflow-scrolling:touch;}
  table.pivot{font-size:11px;}
  table.pivot th,table.pivot td{padding:6px 8px;}
  .cross-bar .cross-clear{margin-left:0;}

  .table-wrap{max-height:none;}
  .resumen-wrap{max-height:70vh;}
  .resumen-head{flex-direction:column;}
  .slicer-range{flex:1 1 100%;}
}

/* Celular chico */
@media (max-width:360px){
  .title-text{font-size:17px;}
  .kpi-card{flex:1 1 100%;}
  .slicer{flex:1 1 100%;}
  .page-tabs .tab{font-size:12px;padding:11px 0;}
}