/* Tema claro. El azul y el rojo de Grupo LINC son acentos (bordes, botones,
   barras de gráficas); el verde se reserva como color de estado para
   "Ganado" (nunca se reusa como color de serie). Paleta validada con el
   validador de contraste/CVD del skill de dataviz. */
:root{
  --ink:#101828;
  --ink-dim:#475467;
  --ink-faint:#8A94A6;
  --hull:#EEF3F9;
  --deck:#FFFFFF;
  --deck-line:#E1E8F2;
  --brand-blue:#2C7BE5;
  --brand-blue-dim:#1957AD;
  --brand-blue-tint:#EAF2FE;
  --brand-red:#E23B49;
  --brand-red-dim:#B4222E;
  --brand-red-tint:#FCEAEC;
  --teal:#0E9F6E;
  --teal-tint:#E6F8F1;
  --alert:#E23B49;
  --alert-dim:#B4222E;
  --warn:#B45309;
  --warn-tint:#FDF1E3;
  --neutral:#8A94A6;
  --shadow:0 2px 4px rgba(16,24,40,0.06), 0 10px 24px rgba(16,24,40,0.12);
  --shadow-hover:0 4px 8px rgba(16,24,40,0.08), 0 16px 32px rgba(16,24,40,0.16);
  --sidebar-bg:#0E2647;
  --sidebar-bg-2:#1B4B84;
  --sidebar-ink:#CFE0F5;
  --sidebar-ink-dim:#82A2C9;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0; height:100%;}
body{
  background:linear-gradient(180deg, #F3F7FC 0%, var(--hull) 320px);
  color:var(--ink);
  font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Login ---------- */
.login-body{
  display:flex; align-items:center; justify-content:center; height:100vh;
  background:
    linear-gradient(180deg, rgba(10,25,48,0.55) 0%, rgba(10,25,48,0.75) 100%),
    url('../bg-login.jpg') center center / cover no-repeat;
}
.login-card{
  width:340px; padding:32px; background:var(--deck); border:1px solid rgba(255,255,255,0.5);
  border-radius:14px; text-align:center;
  /* Relieve marcado sobre el fondo con foto (a pedido explícito del
     usuario): sombra amplia para despegarla del fondo + resalte interior
     arriba para efecto de tarjeta elevada/embutida. */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 -1px 0 rgba(16,24,40,0.06) inset,
    0 12px 20px rgba(8,15,30,0.28),
    0 32px 56px rgba(8,15,30,0.38);
}
.login-logo{height:56px; margin-bottom:14px;}
.login-brand{font-size:22px; font-weight:700; letter-spacing:-0.01em; color:var(--ink);}
.login-sub{font-size:12.5px; color:var(--ink-dim); margin-bottom:20px;}
.login-card form{text-align:left;}
.login-card label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); display:block; margin-bottom:4px;}
.login-card input{
  width:100%; background:var(--deck); border:1px solid var(--deck-line); color:var(--ink);
  border-radius:6px; padding:9px 10px; font-size:13px; margin-bottom:12px;
}
.login-card button[type="submit"]{
  width:100%; background:var(--brand-blue); color:#fff; border:none; border-radius:6px;
  padding:10px; font-size:13px; font-weight:600; cursor:pointer; margin-top:6px;
}
.login-card button[type="submit"]:hover{background:var(--brand-blue-dim);}
.login-error{color:var(--brand-red); font-size:12.5px; margin-top:8px; min-height:16px;}
.forgot-password-link{display:block; text-align:center; font-size:12px; color:var(--brand-blue); margin-top:14px; text-decoration:none;}
.forgot-password-link:hover{text-decoration:underline;}
.forgot-password-msg{font-size:12px; color:var(--ink-dim); text-align:center; margin-top:8px; background:var(--brand-blue-tint); border-radius:6px; padding:8px 10px;}
.login-footer{
  position:fixed; bottom:18px; left:0; right:0; text-align:center;
  font-size:11.5px; color:rgba(255,255,255,0.65); letter-spacing:.02em;
}

/* ---------- App shell: sidebar oscuro de altura completa + área clara ---------- */
.app-shell{display:flex; min-height:100vh;}

.sidebar-nav{
  width:230px; flex-shrink:0;
  background:linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar-logo{padding:22px 20px; display:flex; justify-content:center;}
.sidebar-logo-chip{background:#fff; border-radius:10px; padding:14px 18px; display:inline-block; box-shadow:var(--shadow);}
.sidebar-logo-chip img{height:58px; display:block;}
.sidebar-flags{
  display:flex; justify-content:center; gap:5px;
  padding:0 16px 12px;
}
.sidebar-flags svg{width:20px; height:14px; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,0.18);}
.sidebar-email{
  text-align:center; font-size:11.5px; color:var(--sidebar-ink-dim);
  padding:0 16px 14px; word-break:break-all;
}
.sidebar-nav-links{display:flex; flex-direction:column; gap:2px; padding:8px 12px; margin-top:6px;}
.sidebar-nav-links button{
  background:transparent; border:none; color:var(--sidebar-ink); font-size:14px; font-weight:600;
  text-align:left; padding:12px 14px; cursor:pointer;
  border-left:3px solid transparent; border-radius:8px;
  display:flex; align-items:center; gap:10px;
}
.sidebar-nav-links button .nav-icon{flex-shrink:0;}
.sec-icon{flex-shrink:0; vertical-align:-3px; margin-right:6px; color:var(--brand-blue);}
.sidebar-nav-links button:hover{background:rgba(255,255,255,0.06); color:#fff;}
.sidebar-nav-links button.active{color:#fff; border-left-color:var(--brand-blue); background:rgba(29,111,174,0.28); font-weight:700;}

.sidebar-footer{
  margin-top:auto; padding:14px 20px 20px; border-top:1px solid rgba(255,255,255,0.08);
}
.sidebar-footer #logoutBtn{
  width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  color:var(--sidebar-ink); border-radius:6px; padding:9px 12px; font-size:12.5px;
  font-weight:600; cursor:pointer; margin-top:0;
}
.sidebar-footer #logoutBtn:hover{background:var(--brand-red); border-color:var(--brand-red); color:#fff;}

/* Área principal: topbar claro + contenido */
.main-area{flex:1; min-width:0; display:flex; flex-direction:column; background:var(--hull);}
.topbar{
  display:flex; justify-content:space-between; align-items:flex-end;
  border-bottom:1px solid var(--deck-line);
  padding:20px 32px; box-shadow:var(--shadow);
  background:
    linear-gradient(90deg, var(--deck) 0%, var(--deck) 25%, rgba(255,255,255,0.55) 45%, rgba(255,255,255,0.22) 100%),
    url('../topbar-bg.svg') center right / cover no-repeat;
  background-color:var(--deck);
}
.topbar h1{font-size:24px; margin:0 0 2px; letter-spacing:-0.01em; color:var(--ink);}
.topbar .sub{font-size:13px; color:var(--ink-dim);}
.topbar-right{text-align:right; font-family:'Consolas',monospace; font-size:11.5px; color:var(--ink-dim);}
.download-presentacion-btn{
  background:var(--brand-blue); border:none; color:#fff; border-radius:6px;
  padding:7px 14px; font-size:12px; font-weight:600; cursor:pointer;
  font-family:'Segoe UI',Arial,sans-serif; box-shadow:var(--shadow);
}
.download-presentacion-btn:hover{background:var(--brand-blue-dim);}

.main-content{flex:1; padding:28px 32px 56px; width:100%;}

@media (max-width:860px){
  .app-shell{flex-direction:column;}
  .sidebar-nav{width:100%; height:auto; position:static; flex-direction:row; align-items:center;}
  .sidebar-logo{padding:14px 16px;}
  .sidebar-nav-links{flex-direction:row; flex-wrap:wrap; margin-top:0;}
  .sidebar-nav-links button{border-left:none; border-bottom:3px solid transparent; border-radius:6px;}
  .sidebar-nav-links button.active{border-left:none; border-bottom-color:var(--brand-blue);}
  .topbar{padding:16px 20px; flex-wrap:wrap; gap:10px;}
  .main-content{padding:20px;}
}

.view{display:none;}
.view.active{display:block;}

/* ---------- Filtros ----------
   Mismos componentes (.controls/.field/.segmented/.multiselect/
   .apply-filter-btn) en TODOS los módulos — un solo lugar para pulir el
   look, sin tocar ninguna funcionalidad (a pedido explícito del usuario,
   "cambialo a la mejor opción visual, sin quitar nada solo es visual").
   El filtro global (main-content > .controls, fuera de cualquier .panel)
   se ve como tarjeta propia; los .controls anidados DENTRO de un .panel no
   repiten ese marco (evita panel-dentro-de-panel), pero heredan el mismo
   pulido en cada control individual. */
.controls{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; margin-bottom:20px;}
.main-content > .controls{
  background:var(--deck); border:1px solid var(--deck-line); border-radius:12px;
  padding:16px 20px; box-shadow:var(--shadow);
}
.field{display:flex; flex-direction:column; gap:5px;}
.field label{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint);}
.field select, .field input{
  background:var(--deck); border:1.5px solid var(--deck-line); color:var(--ink);
  border-radius:8px; padding:8px 12px; font-size:13px; min-height:34px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field select:hover, .field input:hover{border-color:var(--brand-blue);}
.field select:focus, .field input:focus{outline:none; border-color:var(--brand-blue); box-shadow:0 0 0 3px var(--brand-blue-tint);}
/* Selector de checkboxes múltiple (Empresa/Unidad en varios módulos) —
   visualmente parecido a un <select> normal, pero abre un panel flotante
   con checkboxes en vez de un dropdown nativo de una sola opción. */
.multiselect{position:relative;}
.multiselect-btn{
  background:var(--deck); border:1.5px solid var(--deck-line); color:var(--ink);
  border-radius:8px; padding:8px 12px; font-size:13px; cursor:pointer; text-align:left;
  min-width:140px; min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:8px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.multiselect-btn:hover{border-color:var(--brand-blue);}
.multiselect-btn:after{content:"▾"; color:var(--ink-faint); font-size:10px;}
.multiselect-panel{
  display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:50; min-width:220px; max-height:260px; overflow-y:auto;
  background:var(--deck); border:1px solid var(--deck-line); border-radius:10px; box-shadow:var(--shadow-hover); padding:8px;
}
.multiselect-panel.open{display:block;}
.multiselect-panel label{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); text-transform:none;
  letter-spacing:normal; padding:6px 8px; border-radius:6px; cursor:pointer; transition:background .1s ease;
}
.multiselect-panel label:hover{background:var(--brand-blue-tint);}
.multiselect-panel .ms-actions{display:flex; gap:10px; padding:4px 6px 8px; border-bottom:1px solid var(--deck-line); margin-bottom:6px;}
.multiselect-panel .ms-actions button{background:none; border:none; color:var(--brand-blue); font-size:11.5px; font-weight:600; cursor:pointer; padding:0;}

.segmented{display:flex; gap:2px; border:1.5px solid var(--deck-line); border-radius:9px; overflow:hidden; background:var(--hull); padding:2px;}
.segmented button{
  background:transparent; border:none; color:var(--ink-dim); font-size:12px; font-weight:700; letter-spacing:.02em;
  padding:7px 15px; cursor:pointer; border-radius:7px; transition:background .15s ease, color .15s ease;
}
.segmented button:hover:not(.active){background:var(--brand-blue-tint); color:var(--brand-blue-dim);}
.segmented button.active{background:var(--brand-blue); color:#fff; box-shadow:0 1px 3px rgba(29,111,174,.35);}

.apply-filter-btn{
  background:var(--teal); border:none; color:#fff; border-radius:8px;
  padding:10px 20px; font-size:12.5px; font-weight:700; letter-spacing:.01em; cursor:pointer;
  align-self:flex-end; box-shadow:var(--shadow); transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.apply-filter-btn:hover{background:#096e09; transform:translateY(-1px); box-shadow:var(--shadow-hover);}
.apply-filter-btn:active{transform:translateY(0);}

/* ---------- Hero (Indicadores — estilo one-pager) ---------- */
.hero{
  display:grid; grid-template-columns:1.1fr 1.4fr; gap:28px;
  padding:24px 26px; background:var(--deck); border:1px solid var(--deck-line);
  border-radius:10px; margin-bottom:20px; box-shadow:var(--shadow);
}
.hero-label{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-blue); margin-bottom:6px; font-weight:700;}
.hero-number{font-weight:700; font-size:48px; line-height:1; color:var(--brand-blue);}
.hero-target{margin-top:10px; font-size:13px; color:var(--ink-dim);}
.hero-target b{color:var(--ink);}
.hero-stamp{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:5px 12px;
  border:1.5px solid var(--teal); border-radius:6px; color:var(--teal);
  font-family:'Consolas',monospace; font-weight:700; font-size:11.5px; letter-spacing:.08em;
  background:var(--teal-tint);
}
.hero-breakdown{border-left:1px solid var(--deck-line); padding-left:24px; display:flex; flex-direction:column; justify-content:center; gap:10px;}
.hb-row{display:flex; justify-content:space-between; font-size:13px; gap:10px;}
.hb-row .lbl{color:var(--ink-dim);}
.hb-row .val{font-family:'Consolas',monospace; font-weight:600; white-space:nowrap; color:var(--ink);}
.hb-bar{height:7px; border-radius:3px; background:var(--hull); overflow:hidden; margin-top:3px;}
.hb-fill{height:100%;}

/* ---------- KPIs ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:20px;}
.kpi-card{
  background:var(--deck); border:1px solid var(--deck-line); border-top:3px solid var(--brand-blue);
  border-radius:10px; padding:16px 18px; box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.kpi-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover);}
.kpi-card:nth-child(4n+2){border-top-color:var(--teal);}
.kpi-card:nth-child(4n+3){border-top-color:#eb6834;}
.kpi-card:nth-child(4n+4){border-top-color:#4a3aa7;}
.kpi-card .label{font-size:12px; color:var(--ink-dim); margin-bottom:6px;}
.kpi-card .value{font-family:'Consolas',monospace; font-weight:700; font-size:26px; color:var(--ink);}
.kpi-card .foot{font-size:11.5px; color:var(--ink-faint); margin-top:4px;}

/* Entregas (LinkGo): 9 indicadores — más angostos para que quepan en una
   sola línea (a pedido explícito del usuario, "trata que todos los
   indicadores queden en una sola línea, hazlo más pequeño"). */
#lgKpis.kpis{grid-template-columns:repeat(9, 1fr); gap:8px;}
#lgKpis .kpi-card{padding:10px 8px;}
#lgKpis .kpi-card .label{font-size:10.5px; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#lgKpis .kpi-card .value{font-size:19px;}
@media (max-width: 1100px){
  #lgKpis.kpis{grid-template-columns:repeat(auto-fit, minmax(100px,1fr));}
}

.badge{display:inline-block; font-family:'Consolas',monospace; font-size:10.5px; font-weight:700; letter-spacing:.05em; padding:3px 9px; border-radius:4px; border:1.5px solid;}
.badge.ok{color:var(--teal); border-color:var(--teal); background:var(--teal-tint);}
.badge.gap{color:var(--brand-red); border-color:var(--brand-red); background:var(--brand-red-tint);}
.badge.part{color:var(--warn); border-color:var(--warn); background:var(--warn-tint);}

/* ---------- Panel de Indicadores (resumen ejecutivo, estilo "performance
   overview" de referencia dada por el usuario) ---------- */
.pg-card{
  background:var(--deck); border:1px solid var(--deck-line); border-radius:12px;
  padding:14px 16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px;
  min-height:118px;
}
.pg-label{font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em;}
.pg-title{font-size:12.5px; color:var(--ink-dim); font-weight:600;}
.pg-value{font-family:'Consolas',monospace; font-weight:700; font-size:22px; color:var(--ink); line-height:1.1;}
.pg-row{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:auto;}
.pg-sparkline{flex:1; min-width:0; height:32px;}
.pg-delta{
  display:inline-flex; align-items:center; gap:2px; font-size:11px; font-weight:700;
  padding:2px 7px; border-radius:10px; white-space:nowrap; font-family:'Consolas',monospace;
}
.pg-delta.up{color:var(--teal); background:var(--teal-tint);}
.pg-delta.down{color:var(--brand-red); background:var(--brand-red-tint);}
.pg-delta.flat{color:var(--ink-faint); background:var(--hull);}
.pg-bar-track{flex:1; height:8px; border-radius:4px; background:var(--hull); overflow:hidden; position:relative;}
.pg-bar-fill{height:100%; border-radius:4px; background:var(--brand-blue);}
.pg-bar-fill.ok{background:var(--teal);}
.pg-bar-fill.warn{background:var(--warn);}
.pg-bar-fill.gap{background:var(--brand-red);}
.pg-list{display:flex; flex-direction:column; gap:0;}
.pg-list-row{display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--deck-line); font-size:12.5px;}
.pg-list-row:last-child{border-bottom:none;}
.pg-list-rank{width:18px; flex-shrink:0; color:var(--ink-faint); font-family:'Consolas',monospace; font-size:11px;}
.pg-list-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink);}
.pg-list-value{flex-shrink:0; font-family:'Consolas',monospace; font-weight:700; color:var(--ink-dim);}
.pg-mini-bar{width:60px; height:5px; border-radius:3px; background:var(--hull); overflow:hidden; flex-shrink:0;}
.pg-mini-bar-fill{height:100%; background:var(--brand-blue);}

/* Medidor de cumplimiento de presupuesto — barra horizontal, no es semáforo
   verde/rojo de variación (100% es la meta, no "positivo" por defecto). */
.gauge{position:relative; width:100%; min-width:90px; height:16px; background:var(--hull); border:1px solid var(--deck-line); border-radius:8px; overflow:hidden;}
.gauge-fill{position:absolute; top:0; left:0; height:100%; border-radius:8px 0 0 8px; transition:width .2s ease;}
.gauge-fill.ok{background:var(--teal);}
.gauge-fill.part{background:var(--warn);}
.gauge-fill.cump-part{background:var(--teal);}
.gauge-fill.gap{background:var(--brand-red);}
.gauge-label{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; font-family:'Consolas',monospace; color:var(--ink);}
.gauge.gauge-lg{height:30px; border-radius:15px; margin-top:6px;}
.gauge.gauge-lg .gauge-fill{border-radius:15px 0 0 15px;}
.gauge.gauge-lg .gauge-label{font-size:15px;}

/* ---------- Panels / tablas ---------- */
.panel{background:var(--deck); border:1px solid var(--deck-line); border-radius:10px; padding:20px 22px; margin-bottom:20px; box-shadow:var(--shadow); transition:box-shadow .15s ease;}
.panel:hover{box-shadow:var(--shadow-hover);}
.panel h2{font-size:16px; margin:0 0 4px; color:var(--ink);}
.panel .sub{font-size:12.5px; color:var(--ink-faint); margin-bottom:14px;}
table.data{width:100%; border-collapse:collapse; font-size:13px;}
table.data th{
  text-align:left; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); font-weight:700; padding:6px 8px; border-bottom:1.5px solid var(--deck-line);
}
table.data th.num{text-align:right;}
thead[data-ordenable] th{cursor:pointer; user-select:none;}
thead[data-ordenable] th:hover{color:var(--brand-blue);}
table.data tr.sub-header th:hover{color:var(--brand-blue);}
table.data td{padding:9px 8px; border-bottom:1px solid var(--deck-line); vertical-align:top;}
table.data tr.total-row td{font-weight:700; border-top:1.5px solid var(--brand-blue); background:var(--brand-blue-tint);}

/* border-collapse:collapse (heredado de table.data) ignora border-radius en
   celdas — hace falta "separate" para que el look de tarjeta de abajo se
   vea de verdad redondeado, no solo en el computed style. */
table:has(> tbody#ppfBody), table:has(> tbody#pgBody){border-collapse:separate; border-spacing:0;}

/* Pedidos y Negocios x Facturar: la fila "por empresa" es un encabezado
   expandible (clickeable), no un total — se le da look de tarjeta en vez
   del estilo genérico de fila de total que comparte con otras tablas, a
   pedido explícito del usuario ("búscale una forma visual más bonita"). */
#ppfBody tr.total-row td, #pgBody tr.total-row td{
  background:var(--deck); border:1.5px solid var(--deck-line); border-radius:10px;
  padding:12px 16px; font-size:14px; box-shadow:var(--shadow);
  transition:box-shadow .15s ease, border-color .15s ease;
}
#ppfBody tr.total-row:hover td, #pgBody tr.total-row:hover td{
  box-shadow:var(--shadow-hover); border-color:var(--brand-blue);
}
#ppfBody tr.total-row + tr.total-row td, #pgBody tr.total-row + tr.total-row td,
#ppfBody tr:not(.total-row) + tr.total-row td, #pgBody tr:not(.total-row) + tr.total-row td{
  border-top:10px solid transparent; background-clip:padding-box;
}
table.data tr:hover td{background:#FAFBFD;}
table.data tr.total-row:hover td{background:var(--brand-blue-tint);}

/* Sombreado alterno por GRUPO (no por fila) en tablas agrupadas — cada
   grupo completo bajo un "total-row" comparte un mismo tono, alternando
   entre grupos consecutivos, para que se note dónde termina uno y empieza
   el otro incluso desplazándose lejos del encabezado. Se aplica solo via
   JS (ver sombrearTablasAgrupadas en utils.js) — a pedido explícito del
   usuario 2026-08-16: "usar sombreados para saber las divisiones". */
table.data tr.band-b td{background:var(--hull);}
table.data tr.band-b:hover td{background:#E4EAF2;}
.num{font-family:'Consolas',monospace; text-align:right; white-space:nowrap; color:var(--ink);}
.pct-up{color:var(--teal); font-weight:700;}
.pct-down{color:var(--brand-red); font-weight:700;}
.detail-row td{background:var(--hull); padding:0; border-bottom:1px solid var(--deck-line);}
.detail-wrap{padding:14px 18px; animation:expandIn .15s ease-out;}
@keyframes expandIn{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);}}

/* Botón "+" explícito para desplegar el detalle de una fila/celda, en el
   mismo lugar (fila inline debajo), no en un panel aparte. Rota a "×" abierto. */
.expand-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; margin-left:8px;
  background:var(--deck); border:1.5px solid var(--brand-blue); color:var(--brand-blue);
  border-radius:6px; font-size:14px; font-weight:700; line-height:1; cursor:pointer; padding:0;
  transition:transform .12s ease;
}
.expand-btn:hover{background:var(--brand-blue-tint);}
.expand-btn.open{background:var(--brand-blue); color:#fff; transform:rotate(45deg);}
.expand-col{width:40px; text-align:center;}

/* Reportes Operativos: la tabla ahora suele ser más ancha que el panel (los
   nombres reales de Operativo/Cliente ya no dejan casi todo en "–"), y el
   botón "Detalle" quedaba fuera de vista a la derecha sin que se notara que
   había que hacer scroll (a pedido explícito del usuario, "ya no veo para
   llenar el detalle"). Se fija esa columna al borde derecho del contenedor
   con scroll, sin tocar el resto de tablas de la app. */
#repopTable th.expand-col, #repopTable td.expand-col{
  position:sticky; right:0; background:var(--deck);
  box-shadow:-6px 0 6px -6px rgba(16,24,40,0.25);
}
#repopTable tr:hover td.expand-col{background:#FAFBFD;}

/* Botones "Ver tabla" / "Ver detalle" — llamativos, tipo call-to-action de
   análisis, no un simple outline discreto (a pedido explícito del usuario). */
.expand-btn.section-cta-btn{
  background:linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dim));
  color:#fff; border:none; border-radius:20px; font-size:12.5px; font-weight:700;
  box-shadow:var(--shadow); letter-spacing:.01em;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.expand-btn.section-cta-btn::after{content:" \2192"; font-weight:700;}
.expand-btn.section-cta-btn:hover{
  transform:translateY(-1px) scale(1.02); box-shadow:var(--shadow-hover);
}

/* ---------- Gráficas (barras horizontales, inline SVG) ---------- */
.chart-panel .chart-legend{display:flex; gap:16px; margin-bottom:10px; font-size:12px; color:var(--ink-dim);}
.chart-legend-item{display:flex; align-items:center; gap:6px;}
.chart-legend-swatch{width:10px; height:10px; border-radius:2px; display:inline-block;}
.chart-row{display:flex; align-items:center; gap:10px; padding:5px 0;}
.chart-row-label{width:170px; flex-shrink:0; font-size:12.5px; color:var(--ink-dim); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.chart-row-track{flex:1; position:relative; height:20px;}
.chart-bar{
  position:absolute; top:2px; height:16px; border-radius:0 4px 4px 0; min-width:2px;
  transition:width .3s ease;
}
.chart-row-value{width:110px; flex-shrink:0; font-family:'Consolas',monospace; font-size:12px; color:var(--ink); text-align:left;}
.chart-bar-wrap{position:relative;}
.chart-tooltip{
  position:absolute; background:var(--ink); color:#fff; font-size:11.5px; padding:8px 12px;
  border-radius:6px; pointer-events:none; white-space:nowrap; z-index:10; opacity:0;
  transition:opacity .1s; transform:translate(-50%,-100%); margin-top:-8px;
  line-height:1.6; max-height:260px; overflow-y:auto; text-align:left;
}
.chart-tooltip.show{opacity:1;}

.trend-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:20px; align-items:start;}
.trend-grid .panel{margin-bottom:0;}

.hint{font-size:12px; color:var(--ink-dim); background:var(--brand-blue-tint); border-left:3px solid var(--brand-blue); padding:10px 14px; border-radius:6px; margin-bottom:16px;}

/* ---------- Panel dividido en dos mitades iguales (ej. par de pies en Reuniones) ---------- */
.split-panel{display:grid; grid-template-columns:1fr 1fr; gap:0;}
.split-half{padding:0 24px; display:flex; flex-direction:column; align-items:center;}
.split-half:first-child{padding-left:0; border-right:1px solid var(--deck-line);}
.split-half:last-child{padding-right:0;}
@media (max-width:700px){
  .split-panel{grid-template-columns:1fr;}
  .split-half:first-child{border-right:none; border-bottom:1px solid var(--deck-line); padding-bottom:20px; margin-bottom:20px;}
  .split-half{padding-left:0; padding-right:0;}
}