/* NEIX Tableros — tablero.css — estilos del tablero Gerencial (portado del diseño, CSP-estricta:
   cero inline; los colores dinámicos se setean por CSSOM desde js/tablero.js). Reusa los tokens
   --tbl-* de base.css y agrega los propios del tablero (--b-*, --grid, --heat-*, --primary, etc.).
   Las clases del tablero NO llevan prefijo tbl- (viven solo dentro de #tbl-view, la app usa .tbl-*). */

:root{
  --grid:#EDEFF2; --heat-pos:22,122,71; --heat-neg:161,38,49; --primary:#334155;
  --b-mesa:#2563EB; --b-mo:#0D9488; --b-cn:#C2410C; --b-corp:#7C3AED; --b-priv:#15803D;
  /* paleta categórica de áreas/series = alias de los tokens --tbl-cat-* (css/base.css, claro/oscuro). Antes
     c1 era el bordó (≈ rojo de peligro) y c3 el verde de "ok": en OKR/Clientes se leían como malo/bueno. */
  --okr-c1:var(--tbl-cat-1); --okr-c2:var(--tbl-cat-2); --okr-c3:var(--tbl-cat-3); --okr-c4:var(--tbl-cat-4); --okr-c5:var(--tbl-cat-5);
  --okr-c6:var(--tbl-cat-6); --okr-c7:var(--tbl-cat-7); --okr-c8:var(--tbl-cat-8); --okr-c9:var(--tbl-cat-9); --okr-c10:var(--tbl-cat-10);
  --gap:clamp(10px,.85vw,16px); --stack:clamp(12px,1vw,18px);
  --mo-fast:120ms; --mo-base:180ms; --mo-slow:220ms; --ease:cubic-bezier(.2,.7,.3,1);
  /* escala de CUMPLIMIENTO (barras de cada área en la vista general; anillo, objetivos y KR del panel — js/okr.js krScale): 0–24 rojo · 25–49 naranja · 50–74 ocre · 75–99 verde claro · ≥100 verde. El donut de la vista general sigue con el color de cada área. */
  --okr-s1:#B42318; --okr-s2:#D9661F; --okr-s3:#D4A017; --okr-s4:#7CB342; --okr-s5:#1A7A47;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --grid:#242A32; --heat-pos:95,203,144; --heat-neg:230,115,126; --primary:#AEB8C8;
  --b-mesa:#3B82F6; --b-mo:#0EA5A4; --b-cn:#D97706; --b-corp:#8B5CF6; --b-priv:#16A34A;
  --okr-s1:#E5675E; --okr-s2:#F0904E; --okr-s3:#E8C14A; --okr-s4:#9CCC65; --okr-s5:#5FCB90;
}}
:root[data-theme="dark"]{
  --grid:#242A32; --heat-pos:95,203,144; --heat-neg:230,115,126; --primary:#AEB8C8;
  --b-mesa:#3B82F6; --b-mo:#0EA5A4; --b-cn:#D97706; --b-corp:#8B5CF6; --b-priv:#16A34A;
  --okr-s1:#E5675E; --okr-s2:#F0904E; --okr-s3:#E8C14A; --okr-s4:#9CCC65; --okr-s5:#5FCB90;
}

/* encabezado: el <h1> va con .tbl-vh (visualmente oculto, el nombre ya está en la nav; el lector de pantalla
   lo sigue anunciando). Sólo reserva el espacio que separa de la nav; la frescura ("Datos al …") va en el pie. */
.dashhead{margin-bottom:clamp(6px,.8vh,10px);min-height:12px}
/* icono "i" minimalista (definiciones) */
.info-i{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;margin-left:5px;border:1px solid var(--tbl-border-2);border-radius:50%;color:var(--tbl-muted);font-size:9px;font-style:italic;font-weight:700;line-height:1;cursor:help;vertical-align:middle;font-family:Georgia,serif}
.info-i:hover,.info-i:focus{color:var(--tbl-accent);border-color:var(--tbl-accent);outline:none}
.flat .car--none,.rowx .car--none{visibility:hidden}
table.mx tr.flat{cursor:default}
.dashhead .tbl-adot{width:9px;height:9px;border-radius:50%}
/* pie de página minimalista (frescura + moneda + powered by) */
.pagefoot{margin-top:var(--stack);padding:12px 4px 2px;border-top:1px solid var(--tbl-line);font-size:11px;color:var(--tbl-muted);text-align:center;letter-spacing:.02em}

.gv{--faint:var(--tbl-muted)}
.gv .num,.gv [class]{font-variant-numeric:tabular-nums}
.gv .neg{color:var(--tbl-danger)} .gv .pos{color:var(--tbl-ok)}
.gv .ar{text-align:right}

/* toprow: tabs + filtros */
.toprow{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin-bottom:var(--stack)}
/* RESP-01: las pestañas conservan su ancho natural (flex-shrink 0) → si no entran junto a los filtros, es #filt
   el que baja a la línea siguiente. Antes .tabs podía encogerse hasta 0: a 1024px quedaban 137px visibles (2–4
   pestañas ocultas) y a 900px, 20px. Sólo cuando no entran ni a ancho completo (MO en celular) scrollean, con la
   pista de borde (.is-more-*). */
.tabs{display:flex;flex:1 0 auto;max-width:100%;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{background:none;border:0;cursor:pointer;padding:9px 15px 11px;font-size:14px;font-weight:500;color:var(--tbl-muted);border-bottom:2px solid transparent;white-space:nowrap;transition:color var(--mo-base)}
.tabs .tab:first-child{padding-left:0} /* alinea la 1ª pestaña con el título de arriba */
.tab:hover{color:var(--tbl-ink-soft)}
.tab[aria-selected="true"]{color:var(--tbl-ink);font-weight:600;border-bottom-color:var(--tbl-accent)}
.filt{display:flex;align-items:center;gap:8px;position:relative}
/* RESP-04: cada etiqueta va pegada a su control (al envolver en celular no queda "VER POR" sola en una línea) */
.fgrp{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%}
/* barra de cohorte de altas de la pestaña Clientes: en la toprow, a la altura de las pestañas
   (mismo patrón que el filtro de Facturación #filt) */
.cli-filthost{display:flex;align-items:center;min-width:0}
.clifilt__lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tbl-muted);margin-right:2px}
/* bloque de cohorte de altas (Clientes): resumen del recorte, separado de los KPIs del padrón */
.cli-coh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-bottom:var(--stack);padding:9px 14px;border:1px solid var(--tbl-accent);border-left-width:3px;border-radius:var(--tbl-r);background:var(--tbl-accent-soft)}
.cli-coh__k{font-weight:700;color:var(--tbl-accent);text-transform:uppercase;letter-spacing:.04em;font-size:11px}
.cli-coh__v{font-size:16px;font-weight:800;color:var(--tbl-ink)}
.cli-coh__d{font-size:12.5px;color:var(--tbl-ink-soft)}
.cli-coh__note{margin-left:auto;color:var(--tbl-muted);font-size:11px;font-style:italic}
@media(max-width:720px){.cli-coh__note{margin-left:0;width:100%}}
@media(max-width:720px){.cli-filthost{width:100%}}
.seg{display:inline-flex;border:1px solid var(--tbl-border-2);border-radius:var(--tbl-r);overflow:hidden;background:var(--tbl-surface)}
.seg button{border:0;background:none;color:var(--tbl-ink-soft);font-size:12.5px;font-weight:600;padding:7px 12px;cursor:pointer;border-right:1px solid var(--tbl-border-2);transition:background var(--mo-fast),color var(--mo-fast)}
.seg button:last-child{border-right:0}
/* foco visible: el .seg tiene overflow:hidden (recorta el anillo exterior) → anillo INTERIOR; sobre el botón
   activo (fondo bordó) el anillo va en el color de superficie para que se vea */
.seg button:focus-visible{outline:2px solid var(--tbl-focus);outline-offset:-3px}
.seg button[aria-pressed="true"]:focus-visible{outline-color:var(--tbl-surface);outline-offset:-4px}
.seg button[aria-pressed="true"]{background:var(--tbl-accent-fill);color:#fff}
.seg button:disabled{opacity:.45;cursor:not-allowed}
/* toggle chico (switch de vista de un gráfico, p.ej. Evolución: Valores / Desvío) */
.seg--sm button{padding:4px 9px;font-size:11px}
.filt-div{width:1px;height:22px;background:var(--tbl-border-2);margin:0 3px}
/* eje Año: navegación ‹ 2026 › */
.yrnav{display:inline-flex;align-items:center;gap:2px;height:33px;padding:0 2px;border:1px solid var(--tbl-border-2);border-radius:var(--tbl-r);background:var(--tbl-surface)}
.yrnav__b{border:0;background:none;color:var(--tbl-ink-soft);cursor:pointer;font-size:15px;line-height:1;padding:0 7px;height:27px;border-radius:var(--tbl-r-xs,4px)}
.yrnav__b:hover:not(:disabled){background:var(--tbl-surface-2)}
.yrnav__b:disabled{opacity:.35;cursor:not-allowed}
.yrnav__v{min-width:36px;text-align:center;font-size:12.5px;font-weight:700;color:var(--tbl-ink);font-variant-numeric:tabular-nums}
.yrnav--loading{opacity:.6}
/* aviso transitorio (año sin datos / error): flota bajo la barra → no empuja los controles */
.yrmsg{position:absolute;top:calc(100% + 4px);left:0;z-index:5;font-size:11px;font-weight:600;color:var(--tbl-danger);background:var(--tbl-surface);border:1px solid var(--tbl-border);border-radius:var(--tbl-r-xs,4px);padding:3px 8px;box-shadow:var(--tbl-shadow-sm,0 1px 3px rgba(0,0,0,.12))}
.gbtn{cursor:pointer;font-size:12.5px;font-weight:600;border-radius:var(--tbl-r);height:33px;padding:0 12px;border:1px solid var(--tbl-border-2);background:var(--tbl-surface);color:var(--tbl-ink);display:inline-flex;align-items:center;gap:6px}
.gbtn:hover{background:var(--tbl-surface-2)}
.gbtn--pri{background:var(--tbl-accent-fill);border-color:var(--tbl-accent-fill);color:#fff}
.gbtn--pri:disabled{opacity:.45;cursor:not-allowed}
.gbtn .car{color:var(--tbl-muted);font-size:9px}
.gbtn .calico{color:var(--tbl-muted);margin-right:2px;flex:none}
/* botón de calendario solo-ícono: cuadrado, sin margen del ícono ni texto */
.gbtn--ico{padding:0 9px}
.gbtn--ico .calico{margin-right:0}
.rchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--tbl-accent);background:var(--tbl-accent-soft);padding:5px 6px 5px 11px;border-radius:999px}
.rchip button{border:0;background:none;color:var(--tbl-accent);cursor:pointer;font-size:13px;line-height:1;padding:0 2px;border-radius:50%}
.pop{position:absolute;top:calc(100% + 6px);right:0;z-index:50;width:280px;max-width:calc(100vw - 24px);background:var(--tbl-surface);border:1px solid var(--tbl-border);border-radius:var(--tbl-r-lg);box-shadow:var(--tbl-shadow-lg);padding:14px;transition:opacity var(--mo-fast),transform var(--mo-fast)}
.pop[hidden]{display:none}
.pop.anim{opacity:0;transform:translateY(-6px)}
.cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;font-weight:600;font-size:12.5px}
.cal-h button{border:0;background:none;color:var(--tbl-muted);cursor:pointer;font-size:14px;width:26px;height:26px;border-radius:6px}
.cal-h button:hover{background:var(--tbl-surface-2);color:var(--tbl-ink)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal .wd{font-size:9px;color:var(--tbl-muted);text-align:center;padding-bottom:2px}
.cal button{border:0;background:none;color:var(--tbl-ink);font-size:11.5px;height:27px;border-radius:6px;cursor:pointer}
.cal button:hover{background:var(--tbl-surface-2)}
.cal button.mut{color:var(--tbl-muted);opacity:.4}
.cal button.in{background:var(--tbl-accent-soft);border-radius:0}
.cal button.edge{background:var(--tbl-accent-fill);color:#fff}
.popfoot{display:flex;gap:8px;margin-top:12px}
.popfoot .gbtn{flex:1;justify-content:center}
.gv .hidden{display:none!important}

/* grids */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-bottom:var(--stack)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-bottom:var(--stack);align-items:stretch}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-bottom:var(--stack);align-items:stretch}
.fullw{margin-bottom:var(--stack)}
@media(max-width:1280px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1080px){.kpis{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}}
@media(max-width:720px){
  .kpis,.grid3{grid-template-columns:1fr}
  /* filtros: la fila ocupa todo el ancho; el segmentado scrollea horizontal (patrón mobile) */
  .toprow{gap:10px 12px}
  .filt{width:100%;flex-wrap:wrap;gap:8px}
  .filt-div{display:none}
  /* RESP-03: la columna fija de nombres de la matriz no se come la pantalla (antes 68% del ancho a 390px):
     se acota y el nombre completo queda en el title de la celda */
  table.mx:not(.mx--com) td.k,table.mx:not(.mx--com) thead th.k{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .seg{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .seg::-webkit-scrollbar{display:none}
  /* targets táctiles más cómodos en mobile (≈40px de alto) sin agrandar el desktop */
  .seg button{white-space:nowrap;padding:10px 13px;min-height:40px}
  .seg--sm button{min-height:36px}
  .gbtn{flex:0 0 auto;height:40px}
  .yrnav{height:40px}.yrnav__b{height:34px;padding:0 10px}
  .cal-h button{width:34px;height:34px}
  .cal button{height:34px}
  .pop{right:auto;left:0}
  /* header de tarjeta: el toggle (Monto/Ppto/…) baja a una fila propia y scrollea */
  .ch{flex-wrap:wrap;gap:6px 10px}
  .ch .rt{margin-left:0;width:100%;justify-content:flex-start}
  .dmetrics{grid-template-columns:repeat(2,1fr)}
  /* el drill vive dentro de la matriz (scroll horizontal): lo fijamos al ancho de pantalla
     para leerlo sin arrastrar, y su tabla de oficiales scrollea por su cuenta */
  table.mx tr.detail>td{position:sticky;left:0}
  .dcard{width:calc(100vw - 40px);box-sizing:border-box;margin:2px 8px 12px}
  /* columna fija: un filo a la derecha separa los nombres de las cifras que pasan por debajo al scrollear */
  table.mx td.k,table.mx thead th:first-child{box-shadow:inset -1px 0 0 var(--tbl-border)}
  /* toggle de vistas de la matriz (Monto/Ppto/%/Var/% del total): en vez de scrollear escondido, ENVUELVE en
   filas. Los márgenes −1px + overflow:hidden del .seg colapsan los bordes dobles entre botones/filas. */
  #mtgl{display:flex;flex:1 1 auto;flex-wrap:wrap;overflow:hidden}
  #mtgl button{flex:1 1 auto;margin:0 -1px -1px 0;border-bottom:1px solid var(--tbl-border-2)}
  .rk--drill{min-width:340px}
}
.rkw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rkw::-webkit-scrollbar{height:6px}
/* tabla ancha (Clientes → top de cartera): fuente normal, no la chica del drill */
table.rk--wide{width:100%;min-width:640px;border-collapse:collapse}
.rk--wide thead th{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--tbl-muted);font-weight:700;text-align:left;padding:8px 12px;border-bottom:1px solid var(--tbl-border);white-space:nowrap}
.rk--wide thead th.n,.rk--wide thead th.i{text-align:right}
.rk--wide td{font-size:12.5px;padding:8px 12px;border-bottom:1px solid var(--tbl-line);white-space:nowrap}
.rk--wide td.i{color:var(--tbl-muted);text-align:right;width:26px}
.rk--wide td.n{text-align:right;font-variant-numeric:tabular-nums}
.rk--wide tbody tr:hover td{background:var(--tbl-surface-2)}
/* El nombre del cliente puede ser largo: que ENVUELVA dentro de un ancho acotado en vez de estirar la tabla
   (y disparar scroll horizontal). El resto de las celdas siguen en una línea (nowrap). */
.rk--wide td.cli-name{white-space:normal;min-width:200px;max-width:380px}
/* cartera completa: puede tener miles de comitentes → contenedor con scroll y cabecera fija */
/* La barra vertical DEBE reservarse ANTES del layout, si no en Windows (barras clásicas de ~17px) roba ancho
   DESPUÉS de dibujar la tabla width:100% → aparece una barra HORIZONTAL espuria (thumb de ancho completo) sin
   nada real que scrollear. `overflow-y:scroll` reserva la barra de entrada en TODOS los navegadores (más robusto
   que scrollbar-gutter, que algunos no honran); la tabla se dibuja en el ancho ya reducido y no desborda.
   `scrollbar-gutter:stable` queda como respaldo para overlay/otros. La cartera casi siempre tiene muchas filas,
   así que la barra vertical está igual. El scroll horizontal GENUINO de pantallas angostas (min-width 640px) se
   mantiene por `.tw`. */
/* La cartera puede traer cientos de comitentes → se acota con scroll VERTICAL interno (si no, la página queda
   eterna). El header queda fijo (sticky) mientras se scrollea. `scrollbar-gutter:stable` reserva la barra para
   que NO aparezca una horizontal espuria en Windows. El scroll horizontal genuino (matriz ancha) lo da `.tw`. */
.cli-topw{max-height:600px;overflow-y:auto;scrollbar-gutter:stable}
.cli-topw table thead th{position:sticky;top:0;z-index:1;background:var(--tbl-surface)}
/* barras horizontales (Clientes → Personería) */
/* barras horizontales: ocupan TODO el alto de su card, repartidas cómodamente */
.hbars{display:flex;flex-direction:column;gap:10px;padding:6px 2px;width:100%;flex:1;justify-content:space-around}
.hbar__t{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;margin-bottom:7px}
.hbar__t span{color:var(--tbl-ink-soft)}
.hbar__t b{color:var(--tbl-ink);font-weight:700;white-space:nowrap}
.hbar__track{height:10px;border-radius:6px;background:var(--tbl-surface-2);overflow:hidden}
.hbar__fill{display:block;height:100%;border-radius:5px;min-width:2px}

.gcard{background:var(--tbl-surface);border:1px solid var(--tbl-border);border-radius:var(--tbl-r-lg);box-shadow:var(--tbl-shadow-sm);overflow:hidden;display:flex;flex-direction:column}
/* Tarjeta de tabla en una fila de gráficos (padrón "Detalle por oficial/manager/segmento"): la tabla ocupa todo el
   alto de la tarjeta —las filas se reparten el espacio— en vez de dejar un hueco en blanco abajo. Con muchas filas
   no cambia nada (la tabla ya es más alta que la tarjeta vecina). */
.gcard--fill>.tw{flex:1 1 auto;display:flex;flex-direction:column}
.gcard--fill>.tw>table{flex:1 1 auto;height:100%}
.gcard--fill>.tw>table thead tr,.gcard--fill>.tw>table tfoot tr{height:1px}
.ch{display:flex;align-items:center;gap:10px;padding:clamp(11px,.9vw,14px) clamp(13px,1.1vw,17px);border-bottom:1px solid var(--tbl-line)}
.ch h3{font-size:13px;font-weight:700;margin:0}
.ch .sub{font-size:11px;color:var(--tbl-muted);font-weight:500}
.ch .rt{margin-left:auto;display:flex;gap:8px 14px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
/* Cabeceras con switch en tarjetas angostas (grid3): permiten que el segmentado baje a una 2ª línea
   en lugar de apretar el título/subtítulo. El .rt conserva margin-left:auto → queda alineado a la derecha. */
.ch--wrap{flex-wrap:wrap;gap:4px 10px}
.cb{padding:clamp(12px,1vw,16px);flex:1;display:flex;flex-direction:column;min-height:0}
.chost{flex:1;min-height:0;display:flex;margin-top:4px}
/* Aviso al pie de un gráfico (p. ej. la salvedad de "altas vigentes" de Clientes): prolijo y discreto. */
.chnote{font-size:10.5px;color:var(--tbl-muted);text-align:center;line-height:1.3;padding:6px 6px 0}
.cb .chart{width:100%;height:100%}
.reading{font-size:11.5px;color:var(--tbl-ink-soft);padding:9px clamp(13px,1.1vw,17px);border-top:1px solid var(--tbl-line);background:var(--tbl-surface-2)}
.reading b{color:var(--tbl-ink);font-weight:600}
.reading:empty{display:none} /* sin frase de lectura (p.ej. Composición) → no dejar una barra vacía */
/* "Limpiar filtros" dentro de la lectura: link-button (CSP-limpio, sin inline). Aparece sólo con filtros
   activos → da salida en un click y explica el estado vacío. Área táctil holgada para el dedo en mobile. */
.flt-clr{margin-left:8px;background:none;border:0;padding:2px 2px;color:var(--tbl-accent);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.flt-clr:hover{color:var(--tbl-accent-dark)}
.flt-clr:focus-visible{outline:2px solid var(--tbl-focus);outline-offset:2px;border-radius:3px}

/* KPI */
.kpi{padding:clamp(13px,1vw,16px)}
.kpi .l{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tbl-muted)}
.kpi .l small{display:block;font-size:10px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--tbl-muted);margin-top:2px}
.kpi .v{font-size:clamp(23px,1.7vw,29px);font-weight:800;letter-spacing:-.025em;margin-top:8px;line-height:1.05}
.kpi .v small{font-size:.5em;color:var(--tbl-muted);font-weight:600}
.kpi .r{display:flex;align-items:center;gap:8px;margin-top:9px;min-height:22px;flex-wrap:nowrap;min-width:0}
/* la nota va en UNA línea (con "…" si no entra; el texto completo en el title) → las 4 cards quedan parejas */
.kpi .r .note{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .r .pill{flex:none}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px}
.pill--ok{color:var(--tbl-ok);background:var(--tbl-ok-bg)} .pill--danger{color:var(--tbl-danger);background:var(--tbl-danger-bg)} .pill--warn{color:var(--tbl-warn);background:var(--tbl-warn-bg)}
/* % de activación (matriz de altas): número de color LIMPIO, sin la pill/burbuja (más prolijo) */
.act-pc{font-weight:700;font-variant-numeric:tabular-nums}
.act-pc--ok{color:var(--tbl-ok)} .act-pc--warn{color:var(--tbl-warn)} .act-pc--danger{color:var(--tbl-danger)}
.kpi .note{font-size:11px;color:var(--tbl-muted)}
.kpi .viz{margin-top:8px}
.kpi .viz>svg,.bbrow .bl>svg{width:100%;display:block}

/* tabla matriz */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Pista de contenido oculto (mismo fundido que la nav en celular, css/components.css): js/ui.js marca
   .is-more-r / .is-more-l cuando un contenedor con scroll horizontal (.tabs/.tw/.rkw) tiene contenido fuera
   de vista a la derecha / izquierda. Sólo aparece si REALMENTE hay overflow (en desktop la matriz entra y no
   se funde nada). Las tablas con scroll VERTICAL propio (.tw--vscroll, .cli-topw) quedan fuera: el fundido
   taparía su barra de scroll. En .tw sólo el borde derecho (a la izquierda está la columna fija de nombres). */
.tabs.is-more-r,.tw.is-more-r:not(.tw--vscroll):not(.cli-topw),.rkw.is-more-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.tabs.is-more-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent)}
.tabs.is-more-l.is-more-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
/* Región de tabla desplazable enfocable por teclado (role=region + tabindex=0 en el markup): las celdas
   del cuerpo no siempre son focusables, así que sin esto un usuario de teclado no puede desplazar la tabla
   ancha (WCAG 2.1.1). El foco debe verse → outline inset (la card recorta el outset). */
.tw[tabindex]:focus-visible{outline:2px solid var(--tbl-focus);outline-offset:-2px}
/* matriz de área por manager (Middle Office): muchos responsables → scroll vertical acotado, con el header
   y la fila Total pegados, para recorrer la lista en orden sin empujar el resto de la página. */
.tw--vscroll{max-height:min(50vh,400px);overflow-y:auto} /* caja más baja (~8 managers visibles); el resto por scroll */
/* border-collapse:collapse ROMPE el fondo de las celdas sticky en Chrome: la fila que scrollea se ve a
   través del thead/tfoot pegados (el Total "se pisa"). Con border-collapse:separate + spacing 0 las celdas
   sticky pintan su fondo opaco y tapan lo que pasa por debajo. Sólo en la matriz con scroll (Middle Office). */
.tw--vscroll table.mx{border-collapse:separate;border-spacing:0}
.tw--vscroll table.mx thead th{position:sticky;top:0;z-index:3;background:var(--tbl-surface)}
.tw--vscroll table.mx thead th.k{z-index:4} /* esquina: pega arriba y a la izquierda */
/* el pie sticky DEBE pintar fondo opaco (igual que el thead): si no, la fila de manager que scrollea por
   debajo se ve a través del Total y "se pisa". Espeja los fondos del pie no-sticky (td / .k / .tot). */
.tw--vscroll table.mx tfoot td{position:sticky;bottom:0;z-index:3;background:var(--tbl-surface-2)}
.tw--vscroll table.mx tfoot td.k{z-index:4;background:var(--tbl-surface-2)}
.tw--vscroll table.mx tfoot .tot{background:var(--tbl-surface-3,var(--tbl-surface-2))}
/* Con un drill abierto, el Total pegado abajo TAPA el pie del panel expandido: el último manager no tiene
   espacio para scrollear por encima del pie sticky. Mientras haya un drill abierto (clase en el wrapper),
   el Total deja de pegarse abajo y fluye DESPUÉS del panel; el header sigue pegado arriba y la columna de
   nombres pinada a la izquierda. Al cerrar el drill vuelve a pegarse. */
.tw--vscroll.tw--drillopen table.mx tfoot td{position:static}
/* bottom:auto: la regla del pie pegado deja `bottom:0`; sin anularlo el rótulo "Total" seguía pegado ABAJO (sólo él)
   y quedaba flotando encima del panel abierto. */
.tw--vscroll.tw--drillopen table.mx tfoot td.k{position:sticky;left:0;bottom:auto;z-index:2}
/* con un manager abierto la caja crece para que el panel se lea entero (a 400 px quedaba casi todo escondido);
   al cerrar vuelve a la caja baja. El shell la scrollea para dejar el manager abierto arriba (toggleRow). */
.tw--vscroll.tw--drillopen{max-height:min(85vh,820px)}
table.mx{width:100%;min-width:720px;border-collapse:collapse;font-size:12.5px}
/* tablas por oficial/manager (Clientes · área): pocas columnas → sin el min-width de la matriz de Facturación,
   así entran en la card sin scroll horizontal. El nombre puede envolver en vez de desbordar. */
table.mx.mx--fit{min-width:0}
table.mx.mx--fit td.k,table.mx.mx--fit th.k{white-space:normal}
/* "Activación de altas" (hojas por grupo): sub-cabecera "Por manager" separada del total del grupo. */
.cli-act-mh{margin-top:20px;padding-top:16px;border-top:1px solid var(--tbl-border)}
.cli-act-mh h3{font-size:13px}
/* switch de DIMENSIÓN (Oficial/Manager) — se distingue del switch de métrica (acento) usando el tinte tinta. */
.seg--dim button[aria-pressed="true"]{background:var(--tbl-ink);color:var(--tbl-surface)}
/* celdas de conteo clickeables de la tabla de aperturas (Privada/Corp): abren el panel "cuáles cuentas". */
td.cli-hit{cursor:pointer}
td.cli-hit:hover,td.cli-hit:focus-visible{background:var(--tbl-accent-soft);outline:none;box-shadow:inset 0 0 0 1px var(--tbl-border-2)}
table.mx thead th{text-align:right;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tbl-muted);padding:8px 11px;border-bottom:1px solid var(--tbl-border);white-space:nowrap}
table.mx thead th.k{text-align:left}
/* Cuadro "Facturación por comitente": encabezados de columna ORDENABLES (click/teclado). Sólo los th marcados
   .sortable reciben la afordancia → el resto de las matrices .mx no se ven afectadas. */
table.mx thead th.sortable{cursor:pointer;user-select:none}
table.mx thead th.sortable:hover{background:var(--tbl-surface-2)}
table.mx thead th.sortable:focus-visible{outline:2px solid var(--tbl-accent);outline-offset:-2px}
/* el control de orden es un <button> dentro del th (a11y: el th mantiene su rol y aria-sort): hereda todo del th */
.mx-sortbtn{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;text-align:inherit}
.mx-sortbtn:focus-visible{outline:2px solid var(--tbl-accent);outline-offset:2px;border-radius:2px}
table.mx thead th.sorted{color:var(--tbl-accent)}
table.mx thead th .sort-ind{font-size:9px;margin-left:1px}
/* descubribilidad: al pasar por una columna ordenable que NO es la activa, un ↕ tenue avisa que se puede ordenar */
table.mx thead th.sortable:not(.sorted):hover::after{content:"\2195";font-size:9px;margin-left:3px;opacity:.5}
table.mx td{padding:8px 11px;text-align:right;border-bottom:1px solid var(--tbl-line);white-space:nowrap}
table.mx td.k{text-align:left;position:sticky;left:0;background:var(--tbl-surface);z-index:1}
/* 1ª columna FIJA también en el header (la matriz scrollea en horizontal en pantallas angostas): el rótulo
   de la columna de nombres acompaña a las celdas pinadas, con fondo opaco (claro/oscuro por token). */
table.mx thead th:first-child{position:sticky;left:0;z-index:2;background:var(--tbl-surface)}
table.mx td.k b{font-weight:600}
table.mx td.k .sw{display:inline-block;width:8px;height:8px;border-radius:var(--tbl-r-xs,2px);margin-right:8px;vertical-align:middle}
table.mx td.k .car{display:inline-block;width:11px;color:var(--tbl-muted);font-size:9px;transition:transform var(--mo-base);margin-right:3px}
table.mx tr.rowx{cursor:pointer}
table.mx tr.rowx:hover td{background:var(--tbl-surface-2)}
table.mx tr.rowx:hover td.k{background:var(--tbl-surface-2)}
table.mx tr.rowx.open td.k .car{transform:rotate(90deg)}
/* sub-filas del drill del manager (Clientes · modo área): oficiales indentados, en tono suave */
table.mx tr.mgrsub td{background:var(--tbl-surface-2);color:var(--tbl-ink-soft);font-size:12px}
table.mx tr.mgrsub td.k{padding-left:30px}
table.mx tr.mgrsub td.k b{font-weight:400}
/* fila "ver más / ver menos" de la tabla de managers (Clientes · modo área): corta la lista larga */
table.mx tr.mgrmore td{padding:0;background:var(--tbl-surface-2);border-top:1px solid var(--tbl-border-2)}
.mgrmore__btn{width:100%;padding:7px 10px;background:transparent;border:0;color:var(--tbl-accent);font:inherit;font-size:12px;font-weight:600;cursor:pointer;text-align:center}
.mgrmore__btn:hover{background:var(--tbl-accent-soft)}
.mgrmore__btn:focus-visible{outline:2px solid var(--tbl-accent);outline-offset:-2px}
table.mx .tot{border-left:2px solid var(--tbl-border-2);font-weight:700;background:var(--tbl-surface-2)}
table.mx tr.rowx:hover td.tot{background:var(--tbl-surface-3,var(--tbl-surface-2))}
table.mx tfoot td{font-weight:800;border-top:2px solid var(--tbl-border-2);border-bottom:0;background:var(--tbl-surface-2);color:var(--tbl-ink)}
table.mx tfoot td.k{background:var(--tbl-surface-2)}
table.mx tfoot .tot{background:var(--tbl-surface-3,var(--tbl-surface-2))}
/* rediseño 2 ejes (PR-C): con muchas columnas semana/día, fijar la 1ª columna también en header y pie */
table.mx thead th.k{position:sticky;left:0;background:var(--tbl-surface);z-index:2}
table.mx tfoot td.k{position:sticky;left:0;z-index:2}
/* resolución Semana/Día → ancho por celda holgado (≈6-8 columnas visibles, el resto scrollea) y el header
   del rango en UNA sola línea (sin apilar). La 1ª col (Banca) no se acota. */
table.mx.mx--sem th,table.mx.mx--sem td{min-width:150px}
table.mx.mx--dia th,table.mx.mx--dia td{min-width:112px}
table.mx.mx--sem th.k,table.mx.mx--sem td.k,table.mx.mx--dia th.k,table.mx.mx--dia td.k{min-width:0}
/* marca de la columna del período ACTUAL (bucket que contiene el último día con dato) */
table.mx th.cur{color:var(--tbl-accent)}
table.mx td.cur{background:var(--tbl-accent-soft)}
/* aclaración de moneda al pie de la matriz */
.mx-cur{font-size:11px;color:var(--tbl-muted);padding:7px clamp(13px,1.1vw,17px) 0;display:flex;align-items:center;gap:6px}
.mx-cur b{color:var(--tbl-ink-soft);font-weight:700;letter-spacing:.02em}
.st{display:inline-block;width:14px;text-align:center;font-size:10px;margin-right:2px}

/* drill-down */
.detail td{padding:0!important;background:var(--tbl-surface-2)}
.dwrap{overflow:hidden;transition:max-height var(--mo-slow) var(--ease)}
.dcard{margin:2px 8px 12px;background:var(--tbl-surface);border:1px solid var(--tbl-border);border-radius:10px;position:relative;padding:14px 16px 14px 20px;box-shadow:var(--tbl-shadow-sm);text-align:left}
.dcard .rail{position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:10px 0 0 10px}
.dmini{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--tbl-muted);font-weight:700;margin-bottom:8px}
.dsub{font-size:11px;color:var(--tbl-muted);margin-top:2px}
.kv{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;border-bottom:1px solid var(--tbl-line)}
.kv:last-child{border:0} .kv b{font-weight:700}
.emptyd{font-size:11.5px;color:var(--tbl-muted);padding:10px 0}
.dmetrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--tbl-line);border:1px solid var(--tbl-line);border-radius:9px;overflow:hidden;margin-bottom:14px}
.dmetrics>div{background:var(--tbl-surface);padding:10px 14px}
.dm-v{font-size:17px;font-weight:800;letter-spacing:-.01em;margin-top:4px}
.dmetrics--3{grid-template-columns:repeat(3,1fr)}
.dgrid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.dcol{min-width:0}
/* composición por Es_Directo (drill del oficial): bloque bajo el detalle, mismo estilo kv */
.dcomp{margin-top:14px;padding-top:12px;border-top:1px solid var(--tbl-line)}
@media(max-width:800px){.dmetrics{grid-template-columns:repeat(2,1fr)}.dmetrics--3{grid-template-columns:repeat(3,1fr)}.dgrid2{grid-template-columns:1fr}}
/* ==== Bloque "Ritmo del período" (drill del oficial): facturación vs tiempo, con toggle de semestre/año.
   Dos barras finas alineadas; si la de facturación pasa a la de tiempo, va adelantado. Ancho por data-w. */
.ritmo{margin-top:14px;padding-top:14px;border-top:1px solid var(--tbl-line)}
.ritmo--flush{margin-top:0;padding-top:0;border-top:0}
.ritmo__hd{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.ritmo__hd .dmini{margin-bottom:0}
.ritmo__hd .seg{margin-left:auto}
.rbar{display:grid;grid-template-columns:78px 1fr 46px;align-items:center;gap:13px;margin-bottom:10px}
.rbar__l{font-size:12px;color:var(--tbl-ink-soft)}
.rbar__track{height:7px;border-radius:999px;background:var(--tbl-surface-2);border:1px solid var(--tbl-line);overflow:hidden}
.rbar__fill{display:block;height:100%;border-radius:999px;min-width:3px}
.rbar__fill.f-ok{background:var(--tbl-ok)} .rbar__fill.f-neg{background:var(--tbl-danger)} .rbar__fill.f-time{background:var(--tbl-border-2)}
.rbar__v{font-size:13px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.rbar__v.time{color:var(--tbl-muted);font-weight:600}
.ritmo__ft{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:13px}
.verdict{font-size:12.5px;font-weight:700}
.verdict.pos{color:var(--tbl-ok)} .verdict.neg{color:var(--tbl-danger)} .verdict.even{color:var(--tbl-ink-soft)}
.verdict small{font-weight:500;color:var(--tbl-muted);margin-left:6px}
.ritmo__det{font-size:10.5px;color:var(--tbl-muted);text-align:right;line-height:1.5}
.ritmo__none{font-size:11.5px;color:var(--tbl-muted);padding:4px 0 2px}
@media(max-width:800px){.rbar{grid-template-columns:60px 1fr 42px;gap:9px}.ritmo__ft{flex-direction:column;gap:4px}.ritmo__det{text-align:left}}
/* tabla del drill: compacta (nombre + números juntos), NO estirada a lo ancho de la tarjeta → sin hueco */
.rk--drill{margin-top:2px;width:auto;max-width:100%}
/* drill de Aperturas (segmento × mes): tabla ancha (12 meses + total/activas) → padding compacto y scroll */
.rk--ap{min-width:640px}
.rk--ap td,.rk--ap th{padding-left:7px;padding-right:7px}
.rk--ap td.n,.rk--ap th.n{min-width:26px}
.rk--ap .dh1{margin-top:14px}
.rk--drill thead th{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tbl-muted);text-align:left;padding:6px 12px;border-bottom:1px solid var(--tbl-line)}
.rk--drill thead th.n{text-align:right}
/* el % inline (parte del total) va junto al monto pero más liviano → el monto manda, el % acompaña */
.rk--drill td.n .gmut{font-weight:400}
/* la tabla de oficiales va anidada dentro de table.mx → hay que ganarle a la alineación de table.mx */
.dcard .rk td{text-align:left}
.dcard .rk td.n{text-align:right}
.dcard .rk th{text-align:left}
.dcard .rk th.n{text-align:right}

/* charts */
.chart{display:block}
/* etiquetas de ejes: el tamaño lo fija js (axFs, en unidades del viewBox para que rinda ~10,5px reales) */
.chart .ax{font-family:var(--tbl-sans);font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:5px 12px;align-items:center}
.legend .it{font-size:11px;color:var(--tbl-ink-soft);font-weight:500;display:flex;align-items:center;gap:5px}
.legend .it .sw{width:9px;height:9px;border-radius:var(--tbl-r-xs,2px)}
.legend .it .ln{width:12px;height:2px;border-radius:2px}
.legend .it.mut{color:var(--tbl-muted)}
/* Composición como donut (top 5 + "Otros"): sector por stroke-dasharray + leyenda con % y monto. */
.pie{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%}
.pie-svg{width:150px;height:150px;flex:none}
.pie-lg{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:5px}
.pie-lg li{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--tbl-ink-soft);line-height:1.2}
.pie-lg .sw{width:9px;height:9px;border-radius:var(--tbl-r-xs,2px);flex:none}
.pie-lg .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pie-lg .pc{font-weight:700;color:var(--tbl-ink);font-variant-numeric:tabular-nums}
.pie-lg .vl{color:var(--tbl-muted);font-variant-numeric:tabular-nums;min-width:62px;text-align:right}
/* Composición: bancas/responsables con neto negativo (reversas) → sin sector en el anillo, pero visibles en la leyenda, marcadas "· resta" con su % en rojo. */
.pie-lg .pie-neg .nm{color:var(--tbl-muted)}
.pie-lg .pie-neg .pc{color:var(--tbl-danger)}
.heatleg{display:flex;gap:10px;font-size:10px;color:var(--tbl-muted);align-items:center}
.heatleg span{display:inline-flex;align-items:center;gap:4px}
.heatleg i{width:9px;height:9px;border-radius:var(--tbl-r-xs,2px);display:inline-block}
.tt{position:fixed;z-index:90;pointer-events:none;background:var(--tbl-ink);color:var(--tbl-surface);border-radius:8px;padding:7px 10px;font-size:11.5px;box-shadow:var(--tbl-shadow-md);opacity:0;transition:opacity var(--mo-fast);max-width:230px}
.tt.on{opacity:1}
.tt .h{font-weight:700;margin-bottom:4px}
.tt .r{display:flex;justify-content:space-between;gap:12px;margin-top:2px}
.tt .r .l{display:flex;align-items:center;gap:5px;opacity:.85}
.tt .r .sw{width:7px;height:7px;border-radius:var(--tbl-r-xs,2px)}
.tt .r .v{font-weight:700}
.tt .r.sep{margin-top:5px;padding-top:5px;border-top:1px solid rgba(255,255,255,.18)}
.tt .r.sep .l{opacity:.7}

/* rankings */
.rk{width:100%;border-collapse:collapse;font-size:12.5px}
.rk thead th{text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tbl-muted);padding:8px 12px;border-bottom:1px solid var(--tbl-border);white-space:nowrap}
.rk thead th.n{text-align:right}
.rk td{padding:7px 12px;border-bottom:1px solid var(--tbl-line)}
.rk tr:last-child td{border-bottom:0}
.rk td.n{text-align:right;font-weight:600}
.rk .i{color:var(--tbl-muted);font-weight:700;width:20px}
.rk .m{color:var(--tbl-muted);font-size:11px}

/* presupuesto */
.bbrow{display:flex;align-items:center;gap:14px;padding:9px 0}
.bbrow .nm{width:130px;flex:none;font-weight:600;font-size:12.5px;display:flex;align-items:center;gap:8px}
.bbrow .nm .sw{width:8px;height:8px;border-radius:var(--tbl-r-xs,2px)}
.bbrow .bl{flex:1;min-width:0}
.bbrow .vv{width:150px;text-align:right;font-size:12px;color:var(--tbl-ink-soft)}
.bbrow .vv b{color:var(--tbl-ink);font-weight:700}
.mbar{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}
.mbar .tk{width:56px;height:6px;border-radius:999px;background:var(--tbl-surface-2);border:1px solid var(--tbl-border);overflow:hidden;position:relative}
.mbar .tk .fl{height:100%;border-radius:999px}
.mbar .tk .mk{position:absolute;top:-2px;bottom:-2px;width:1.5px;background:var(--tbl-ink)}
.mbar b{min-width:42px;text-align:right}

/* comitentes */
.comnote{font-size:12px;color:var(--tbl-ink-soft);line-height:1.55}
.comnote b{color:var(--tbl-ink);font-weight:600}
.pv-tog{margin-left:auto;display:inline-flex;border:1px solid var(--tbl-border-2);border-radius:var(--tbl-r);overflow:hidden}
.pv-tog button{border:0;background:var(--tbl-surface);color:var(--tbl-ink-soft);font-size:12px;font-weight:600;padding:6px 11px;cursor:pointer;border-right:1px solid var(--tbl-border-2)}
.pv-tog button:last-child{border-right:0}
.pv-tog button[aria-pressed="true"]{background:var(--tbl-accent-soft);color:var(--tbl-accent)}
.filtbar{display:flex;gap:8px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--tbl-line)}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}
.badge--on{color:var(--tbl-ok);background:var(--tbl-ok-bg)} .badge--off{color:var(--tbl-muted);background:var(--tbl-surface-2);border:1px solid var(--tbl-border)}
.badge--new{color:var(--tbl-accent);background:var(--tbl-accent-soft);font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;padding:1px 6px;margin-left:4px;vertical-align:1px}

/* barra de actividad clickeable (herramienta comercial: abre el listado del bucket) */
.hbar--click{cursor:pointer;border-radius:8px;padding:5px 7px;margin:-5px -7px;transition:background var(--mo-fast)}
.hbar--click:hover{background:var(--tbl-surface-2)}
.hbar--click:focus-visible{outline:none;background:var(--tbl-surface-2);box-shadow:0 0 0 2px var(--tbl-focus)}

/* ===== Modal / panel (aperturas · activación · operaciones) — usado en TODAS las hojas ===== */
.cli-actov{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:clamp(12px,3vw,32px);background:var(--tbl-overlay);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:cli-fade .16s ease-out}
.cli-actcard{background:var(--tbl-surface);border:1px solid var(--tbl-border);border-radius:16px;box-shadow:0 24px 60px -14px rgba(2,6,23,.38),0 6px 18px -8px rgba(2,6,23,.22);width:min(760px,100%);max-height:84vh;display:flex;flex-direction:column;overflow:hidden;animation:cli-pop .18s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){.cli-actov,.cli-actcard{animation:none}}
/* header en DOS líneas: título fuerte + meta sutil (más prolijo que todo en una línea con puntos) */
.cli-acth{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;border-bottom:1px solid var(--tbl-line)}
.cli-acth__t{display:flex;flex-direction:column;gap:3px;min-width:0}
.cli-acth__ttl{font-size:15px;font-weight:800;color:var(--tbl-ink);letter-spacing:-.01em;line-height:1.25}
.cli-acth__sub{font-size:12px;color:var(--tbl-muted);line-height:1.2}
.cli-actx{margin-left:auto;border:1px solid transparent;background:none;color:var(--tbl-muted);font-size:19px;line-height:1;cursor:pointer;width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;transition:background .12s,color .12s}
.cli-actx:hover{background:var(--tbl-surface-2);color:var(--tbl-ink)}
.cli-actx:focus-visible{outline:none;border-color:var(--tbl-border-2)}
/* cuerpo scrolleable; la lista entra en el ancho del card (los textos largos van a 2 líneas) */
.cli-actw{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0}
.com-opsbody{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.cli-actw .rk--wide{min-width:0;width:100%}
.cli-actw .rk--wide thead th{position:sticky;top:0;background:var(--tbl-surface);z-index:1;box-shadow:inset 0 -1px 0 var(--tbl-border)}
.cli-actw .rk--wide td,.cli-actw .rk--wide th{white-space:normal;word-break:break-word;padding-top:10px;padding-bottom:10px}
.cli-actw .rk--wide thead th{white-space:nowrap;padding-top:9px;padding-bottom:9px} /* headers en una línea (no partir "Segmento") */
.cli-actw .rk--wide td.i,.cli-actw .rk--wide td.n,.cli-actw .rk--wide th.i,.cli-actw .rk--wide th.n{white-space:nowrap;word-break:normal}
.cli-actw .rk--wide tbody tr:last-child td{border-bottom:0}
/* pie Total del modal de operaciones: fijo abajo, resaltado */
.cli-actw .rk--wide tfoot td{position:sticky;bottom:0;background:var(--tbl-surface-2);border-top:1px solid var(--tbl-border);font-weight:800}
.cli-actfoot{font-size:11.5px;color:var(--tbl-muted);padding:11px 20px;border-top:1px solid var(--tbl-line);background:var(--tbl-surface-2)}
@keyframes cli-fade{from{opacity:0}to{opacity:1}}
@keyframes cli-pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

/* fila del segmento resaltada cuando está abierta (drill) */
table.mx tr.rowx.open>td,table.mx tr.rowx.open:hover>td{background:var(--tbl-accent-soft)}
table.mx tr.rowx.open>td.k{box-shadow:inset 3px 0 0 0 var(--tbl-accent);font-weight:700}

/* encabezado compacto del drill de segmento (sin duplicar la fila): activos de los nuevos */
.dhead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.dhead__k{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tbl-muted)}
.dhead>b{color:var(--tbl-ink);font-weight:800;font-size:17px;letter-spacing:-.01em}
.dhead__x{color:var(--tbl-muted);font-size:12px} .dhead__x b{color:var(--tbl-ink);font-weight:700}

/* aviso: la tabla por persona no sigue el filtro (dato pre-agregado en el snapshot) */
.drill-fixed{font-size:11px;color:var(--tbl-muted);margin:-2px 0 9px;display:flex;align-items:center;gap:6px}
.drill-fixed::before{content:"ⓘ";color:var(--tbl-warn);font-style:normal}
.fsel{appearance:none;height:31px;padding:0 26px 0 11px;border:1px solid var(--tbl-border-2);border-radius:var(--tbl-r);background:var(--tbl-surface);color:var(--tbl-ink-soft);font-size:12px;font-weight:500;cursor:pointer}
/* filtros de la tabla de cartera: buscador + desplegables (Manager / Oficial) */
.cli-topq{height:31px;padding:0 11px;border:1px solid var(--tbl-border-2);border-radius:var(--tbl-r);background:var(--tbl-surface);color:var(--tbl-ink);font-size:12px;min-width:160px;max-width:220px}
.cli-topq::placeholder{color:var(--tbl-muted)}
.cli-topq:focus-visible,.fsel:focus-visible{outline:none;border-color:var(--tbl-accent);box-shadow:0 0 0 2px var(--tbl-accent-soft)}
.cli-topsel{position:relative;display:inline-flex}
.cli-topsel::after{content:"▾";position:absolute;right:9px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--tbl-muted);font-size:9px}
.cli-topsel .fsel{max-width:190px;text-overflow:ellipsis}
/* #5: en celular, los controles de la cartera de Clientes suben a 40px (touch cómodo) y el buscador a 16px
   (evita el zoom automático de iOS al enfocar un input <16px). */
@media(max-width:720px){.cli-topq{min-width:0;flex:1 1 140px;height:40px;font-size:16px}.cli-topsel{flex:1 1 auto}.fsel{height:40px}.cli-topsel .fsel{width:100%}.pv-tog button{min-height:40px}}
.filtn{font-size:11.5px;color:var(--tbl-muted);align-self:center;margin-left:auto}
.segsw{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:6px}

/* OKR — vista general (js/okr.js): avance global (+ semestre transcurrido), donut + 4 KPI, detalle por área */
.okrh{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px);padding:clamp(13px,1.1vw,18px) clamp(14px,1.4vw,22px);flex-wrap:wrap}
.okrh .pct{font-size:clamp(30px,2.8vw,44px);font-weight:800;letter-spacing:-.03em;line-height:.9;color:var(--tbl-ink)}
.okrh .pctl{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tbl-muted);margin-bottom:6px}
.okrh .prog{flex:1;min-width:240px}
.segbar{display:flex;height:16px;border-radius:999px;overflow:hidden;border:1px solid var(--tbl-border);background:var(--tbl-surface-2)}
.segbar span{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;min-width:0}
/* barra de tiempo: SÓLO en la cabecera de la vista general (fina y neutra, debajo del avance) */
.okr-time{display:flex;align-items:center;gap:12px;margin-top:10px}
.okr-time__l{font-size:11.5px;font-weight:600;color:var(--tbl-ink-soft);white-space:nowrap;width:150px;flex:none}
.okr-time__bar{flex:1;height:6px;border-radius:999px;background:var(--tbl-surface-2);border:1px solid var(--tbl-border);overflow:hidden;min-width:60px}
.okr-time__bar span{display:block;height:100%;border-radius:999px}
.okr-time__v{font-size:11.5px;color:var(--tbl-ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:640px){.okr-time{flex-wrap:wrap}.okr-time__l{width:auto}}
/* Cabecera "Opción 1": donut a la izquierda + los 4 KPI en grilla 2×2 a la derecha. */
.okr-top2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--gap);margin-bottom:var(--stack);align-items:stretch}
.okr-kpis2{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:var(--gap)}
@media(max-width:1080px){.okr-top2{grid-template-columns:1fr}}
@media(max-width:520px){.okr-kpis2{grid-template-columns:1fr}}
.okr-dwrap{flex-direction:row;align-items:center;justify-content:center;gap:clamp(16px,2.6vw,40px);flex-wrap:wrap}
.okr-donut{display:flex;justify-content:center;align-items:center;padding:4px 0;color:var(--tbl-ink);flex:none}
.okr-donut svg{width:170px;height:170px}
.okr-leg{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:9px 30px;align-content:center;flex-wrap:nowrap}
.okr-leg .it{font-size:12.5px}
.okr-leg .it b{font-weight:600;color:var(--tbl-ink-soft);margin-left:2px;font-variant-numeric:tabular-nums}
@media(max-width:640px){.okr-leg{grid-template-columns:1fr}}
.okr-kpi{display:flex;flex-direction:column;gap:6px}
.okr-kpi .l{display:flex;align-items:center;gap:7px}
.okr-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.okr-kpi__ft{margin-top:auto;display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--tbl-muted);white-space:nowrap}
.okr-kpi__bar{flex:1;height:6px;border-radius:999px;background:var(--tbl-surface-2);border:1px solid var(--tbl-border);overflow:hidden}
.okr-kpi__bar span{display:block;height:100%;border-radius:999px}
/* detalle por área: una fila-botón por área → abre su panel */
.okr-alist{display:flex;flex-direction:column}
.okr-arow{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;border-bottom:1px solid var(--tbl-line);text-align:left;color:inherit;font:inherit;padding:12px 16px;cursor:pointer}
.okr-arow:last-child{border-bottom:0}
.okr-arow:hover{background:var(--tbl-surface-2)}
.okr-arow:focus-visible{outline:2px solid var(--tbl-focus);outline-offset:-2px}
.okr-arow .an{font-weight:700;font-size:13.5px;width:210px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.okr-arow .an .an-c{color:var(--tbl-muted);font-weight:600;font-size:12px}
.okr-arow .tk{flex:1;height:12px;border-radius:999px;background:var(--tbl-surface-2);border:1px solid var(--tbl-border);overflow:hidden;min-width:80px;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.okr-arow .tk .fl{display:block;height:100%;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);transition:width var(--mo-slow) var(--ease)}
.okr-arow .pv{font-weight:800;font-size:14px;width:52px;text-align:right;flex:none;font-variant-numeric:tabular-nums}
.okr-arow .go{color:var(--tbl-muted);display:inline-flex;flex:none}
@media(max-width:640px){.okr-arow .an{width:120px}}

/* OKR — panel de área: cabecera (volver · nombre · comentarios · lápiz) + resumen a la izquierda + objetivos */
.okr-panel{display:flex;flex-direction:column;gap:var(--stack)}
.okr-ph{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.okr-back{width:38px;padding:0;justify-content:center}
/* panel de área abierto → sin las pestañas del tablero (se vuelve con la flechita .okr-back) */
.gv.okr-focus > .toprow{display:none}
.okr-ph__t{flex:1;min-width:0}
.okr-ph__k{font-size:12px;color:var(--tbl-muted)}
.okr-ph__t h2{margin:2px 0 0;font-size:22px;font-weight:800;letter-spacing:-.02em}
.okr-ph__acts{display:flex;align-items:center;gap:8px}
/* (sql/86) botón de comentarios con comentarios adentro: borde rojo finito (marca) para que se note que hay algo */
.okr-ob-com.has-com{border-color:var(--tbl-accent);color:var(--tbl-accent)}
.okr-ob-com{height:30px;min-width:30px;padding:0 7px;gap:4px;justify-content:center;font-size:11.5px;font-weight:700}
.okr-ob-com__n{line-height:1}
.okr-pen{width:38px;padding:0;justify-content:center}
.okr-dirty{font-size:12.5px;color:var(--tbl-ink-soft)}
.okr-ehint{margin:-4px 0 0;font-size:12.5px;color:var(--tbl-ink-soft)}
.okr-pgrid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:var(--gap);align-items:start}
@media(max-width:900px){.okr-pgrid{grid-template-columns:1fr}}
.okr-pside{padding:20px;gap:18px}
.okr-ring{position:relative;width:150px;height:150px;margin:0 auto}
.okr-ring svg{display:block}
.okr-ring__track{stroke:var(--tbl-surface-3)}
.okr-ring__c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.okr-ring__c b{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1}
.okr-ring__c span{margin-top:2px;font-size:11.5px;color:var(--tbl-muted)}
.okr-cnt,.okr-pmeta{margin:0;display:grid;grid-template-columns:1fr auto;row-gap:9px;column-gap:12px;padding-top:16px;border-top:1px solid var(--tbl-line);font-size:12.5px}
.okr-cnt dt{display:flex;align-items:center;gap:8px;color:var(--tbl-ink-soft)}
.okr-cnt dd{margin:0;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.okr-pmeta dt{color:var(--tbl-muted)}
.okr-pmeta dd{margin:0;text-align:right}
.okr-objs{display:flex;flex-direction:column;gap:10px;min-width:0}
.okr-ob__h{display:grid;grid-template-columns:minmax(0,1fr) 210px auto;gap:20px;align-items:center;padding:12px 18px}
.okr-ob__t h3{margin:0;font-size:14px;font-weight:700;line-height:1.3}
.okr-ob__num{color:var(--tbl-muted);font-weight:600;margin-right:8px}
.okr-ob__sub{margin-top:2px;font-size:12px;color:var(--tbl-muted)}
.okr-ob__p{display:flex;align-items:center;gap:10px}
.okr-ob__bar,.okr-kr__bar{flex:1;height:8px;border-radius:999px;background:var(--tbl-surface-2);border:1px solid var(--tbl-border);overflow:hidden}
.okr-kr__bar{height:6px}
.okr-ob__bar span,.okr-kr__bar span{display:block;height:100%;border-radius:999px}
.okr-ob__pct{width:44px;text-align:right;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
/* KR: UNA línea (nombre · nota · valor/meta · barra) → el panel entra sin scroll */
.okr-kr{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) 150px 150px;gap:16px;align-items:center;padding:9px 18px;border-top:1px solid var(--tbl-line);min-height:22px}
.okr-kr__n{font-size:13px;line-height:1.35}
.okr-kr__nota{font-size:12px;color:var(--tbl-ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.okr-kr__v{text-align:right;font-size:12.5px;color:var(--tbl-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.okr-kr__v b{color:var(--tbl-ink);font-weight:700}
.okr-kr__p{display:flex;align-items:center;gap:10px}
.okr-kr__pct{width:42px;text-align:right;font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
.okr-kr__vin{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.okr-kr__vin .okr-vin{width:88px;height:32px;text-align:right;font-weight:700;font-size:13px;padding:0 8px}
.okr-kr .okr-nin{height:32px;min-width:0;font-size:13px}
@media(max-width:900px){.okr-kr{grid-template-columns:1fr 120px;row-gap:6px}.okr-kr__nota,.okr-kr .okr-nin{grid-column:1/-1;order:3}.okr-ob__h{grid-template-columns:1fr}}
.okr-auto{font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--tbl-muted);border:1px solid var(--tbl-border-2);border-radius:999px;padding:0 6px;margin-left:8px;vertical-align:middle}
/* (compartidas con Ajustes → OKRs, js/ajustes.js) */
.okr-bar{display:inline-block;width:64px;height:6px;border-radius:999px;background:var(--tbl-surface-2);border:1px solid var(--tbl-border);overflow:hidden;flex:none}
.okr-bar__fl{display:block;height:100%;border-radius:999px}
.opc.okr-op--ok{color:var(--tbl-ok)}          /* hecho */
.opc.okr-op--prog{color:var(--tbl-accent)}    /* en curso */
.opc.okr-op--na{color:var(--tbl-muted)}       /* sin arrancar */
/* comentarios del área (drawer lateral, .tbl-drawer) */
.okr-cdrawer__t{margin:4px 0 0;font-size:17px;font-weight:800}
.okr-cadd{align-items:flex-end}
.okr-cadd .okr-ctext{flex:1;height:auto;min-height:46px;padding:8px 12px;resize:vertical;font:inherit;font-size:13.5px}
.ocom{padding:11px 0;border-bottom:1px solid var(--tbl-line)}
.ocom:last-child{border-bottom:0}
.ocom__h{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;margin-bottom:3px}
.ocom__h b{font-weight:700;color:var(--tbl-ink)}
.ocom__h span{color:var(--tbl-muted);white-space:nowrap}
.ocom__t{font-size:13px;color:var(--tbl-ink-soft);line-height:1.5;white-space:pre-wrap}
.ocom__acc{display:flex;gap:12px;margin-top:5px}
.ocom__btn{background:none;border:0;padding:0;font:inherit;font-size:11.5px;font-weight:600;color:var(--tbl-ink-soft);cursor:pointer}
.ocom__btn:hover{color:var(--tbl-accent);text-decoration:underline}
.ocom__btn--del:hover{color:var(--tbl-danger)}
.ocom__btn:focus-visible{outline:2px solid var(--tbl-focus);outline-offset:2px;border-radius:3px}
.ocom__ed{width:100%;resize:vertical}
.ocom-empty{font-size:12.5px;color:var(--tbl-muted);padding:12px 0}

/* drill: nota bajo cada métrica + swatch de línea punteada + selector de mes */
.gv .dnote{font-size:9.5px;color:var(--tbl-muted);margin-top:3px;line-height:1.3}
.gv .dnote.neg{color:var(--tbl-danger)} .gv .dnote.pos{color:var(--tbl-ok)}
.legend .it .ln.lndash{height:0;background:none;border-top:2px dashed var(--tbl-ink-soft);border-radius:0}
.legend .it .ln.lndot{height:0;background:none;border-top:2px dotted var(--tbl-muted);border-radius:0}
/* mes parcial en los gráficos: mismo punto hueco que el SVG (Evolución) */
.legend .it .pt-hueco{width:8px;height:8px;border-radius:50%;border:1.8px solid var(--primary);background:var(--tbl-surface);flex:none}
.poph{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tbl-muted);padding:2px 6px 8px}
.mlist{display:flex;flex-direction:column;max-height:280px;overflow:auto}
.mlist button{border:0;background:none;text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--tbl-ink)}
.mlist button:hover{background:var(--tbl-surface-2)}

/* utilidades del tablero (reemplazan estilos que en el mock iban inline) */
.gv .gmut{color:var(--tbl-muted)}
.gv .dwrap{max-height:0}
.gv .spk{height:auto;min-height:60px;margin-top:6px}
.gv .dh1{margin:14px 0 6px}
.gv .mt8{margin-top:8px}
.chempty{width:100%;display:grid;place-items:center;color:var(--tbl-muted);font-size:12px;min-height:120px}

/* placeholder de tab en construcción */
.gsoon{padding:48px 24px;text-align:center;color:var(--tbl-muted)}
.gsoon h3{font-size:16px;color:var(--tbl-ink);font-weight:700;margin:0 0 6px}
.gsoon p{font-size:13px;margin:0 auto;max-width:440px}

/* loader de carga de página: doble anillo en órbita (bordó) + mensaje, centrado */
.tbl-load{min-height:58vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px}
.tbl-load__msg{margin:0;color:var(--tbl-muted);font-size:13px}
.tbl-orbit{position:relative;width:40px;height:40px}
.tbl-orbit span{position:absolute;border-radius:50%;border:3px solid transparent}
.tbl-orbit .o1{inset:0;border-top-color:var(--tbl-accent);border-right-color:var(--tbl-accent);animation:tbl-spin 1s linear infinite}
.tbl-orbit .o2{inset:8px;border-bottom-color:var(--tbl-accent);opacity:.55;animation:tbl-spin 1.5s linear infinite reverse}
@keyframes tbl-spin{to{transform:rotate(360deg)}}

/* ===== Pestaña Presupuesto (Middle Office) — js/presupuesto.js. Un solo lenguaje: bordó=real, gris=ppto,
   verde/rojo=sobre/bajo ppto. CSP: anchos/fondos dinámicos por data-w/data-bg (paint validado). ===== */
.pu{display:flex;flex-direction:column;gap:12px}
.pu-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.pu-sem{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pu-rchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--tbl-accent);background:var(--tbl-accent-soft);padding:5px 6px 5px 11px;border-radius:999px}
.pu-rchip[hidden]{display:none}
.pu-rchip button{border:0;background:none;color:var(--tbl-accent);cursor:pointer;font-size:13px;line-height:1;padding:0 2px;border-radius:50%}
.pu-lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tbl-muted)}
.pu-seg{display:inline-flex;background:var(--tbl-surface-3);border:1px solid var(--tbl-border-2);border-radius:var(--tbl-r);padding:4px}
.pu-seg button{border:0;background:transparent;color:var(--tbl-ink-soft);font-weight:600;font-size:13px;padding:6px 15px;border-radius:var(--tbl-r-sm);cursor:pointer;transition:background .12s,color .12s}
.pu-seg--sm button{font-size:12px;padding:5px 11px}
.pu-seg button:hover{color:var(--tbl-ink)}
.pu-seg button[aria-pressed="true"]{background:var(--tbl-surface);color:var(--tbl-accent);box-shadow:var(--tbl-shadow-sm)}
.pu-seg button:focus-visible{outline:2px solid var(--tbl-focus);outline-offset:2px}
.pu-scope{font-size:12.5px;color:var(--tbl-ink-soft)}
.pu-scope b{color:var(--tbl-accent);font-weight:700}

.pu-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.pu-kpi{background:var(--tbl-surface);border:1px solid var(--tbl-border);border-radius:var(--tbl-r-lg);padding:13px 15px;box-shadow:var(--tbl-shadow-sm)}
.pu-kpi .k-l{font-size:11.5px;color:var(--tbl-muted);font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.pu-kpi .k-v{font-size:clamp(19px,1.3vw+13px,25px);font-weight:700;letter-spacing:-.02em;margin-top:7px;font-variant-numeric:tabular-nums}
.pu-kpi .k-s{font-size:12px;color:var(--tbl-ink-soft);margin-top:5px}
.pu-kpi--hero{background:linear-gradient(180deg,var(--tbl-accent-soft),transparent),var(--tbl-surface);border-color:color-mix(in srgb,var(--tbl-accent) 22%,var(--tbl-border))}
.pu-meter{margin-top:10px;position:relative;height:8px;background:var(--tbl-surface-3);border-radius:999px;overflow:hidden}
.pu-meter__f{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--tbl-accent)}
.pu-meter__t{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--tbl-ink-soft);opacity:.55}

.pu-legend{display:flex;gap:14px;align-items:center;font-size:12px;color:var(--tbl-ink-soft);flex-wrap:wrap}
.pu-legend span{display:inline-flex;align-items:center;gap:6px}
.pu-sw{width:11px;height:11px;border-radius:3px}
.pu-sw--real{background:var(--tbl-accent)} .pu-sw--ppto{background:var(--tbl-ppto)}
.pu-hint{color:var(--tbl-muted)}

.pu-ofhead,.pu-ofrow,.pu-offoot{display:grid;grid-template-columns:180px 1fr 92px;gap:16px;align-items:center}
.pu-ofhead{padding:0 2px 6px;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--tbl-muted);border-bottom:1px solid var(--tbl-border-2);margin-bottom:2px}
.pu-ofhead .r{text-align:right}
.pu-ofitem{border-bottom:1px solid var(--tbl-line)}
.pu-ofrow{padding:7px 2px;cursor:pointer}
.pu-ofrow:hover{background:var(--tbl-surface-2)}
.pu-ofrow:focus-visible{outline:2px solid var(--tbl-focus);outline-offset:-2px;border-radius:var(--tbl-r-sm)}
.pu-ofitem.open .pu-ofrow{background:var(--tbl-surface-2)}
.pu-ofname{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:7px}
.pu-ofrow .pu-ofname::before{content:"▸";color:var(--tbl-muted);font-size:10px;transition:transform .12s;flex:none}
.pu-ofitem.open .pu-ofname::before{transform:rotate(90deg)}
.pu-ofbars{display:flex;flex-direction:column;gap:4px}
.pu-ofline{display:flex;align-items:center;gap:10px}
.pu-track{position:relative;flex:1;height:11px;background:var(--tbl-surface-2);border-radius:var(--tbl-r-xs,3px)}
.pu-fill{position:absolute;left:0;top:0;bottom:0;border-radius:var(--tbl-r-xs,3px);min-width:2px}
.pu-fill--real{background:var(--tbl-accent)} .pu-fill--ppto{background:var(--tbl-ppto)}
.pu-ofval{width:82px;text-align:right;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.pu-ofcumpl{text-align:right}
.pu-ofcumpl .big{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.pu-ofcumpl .sm{font-size:11px;color:var(--tbl-muted);font-variant-numeric:tabular-nums}
.pu-offoot{padding:8px 2px 2px;font-weight:700;border-top:2px solid var(--tbl-border-2);margin-top:2px}

.pu-drill{padding:4px 4px 14px 28px;background:var(--tbl-surface-2)}
.pu-dh{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--tbl-muted);margin:8px 0 6px}
.pu-mgr{display:grid;grid-template-columns:1fr 92px 46px;gap:12px;align-items:center;padding:7px 0 5px;border-top:1px solid var(--tbl-line)}
.pu-mgr .mn{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pu-mgr .mv{text-align:right;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.pu-mgr .mp{text-align:right;font-size:12px;color:var(--tbl-muted);font-variant-numeric:tabular-nums}
.pu-mgr.otros .mn{color:var(--tbl-muted);font-style:italic}
.pu-mgrbar{grid-column:1 / -1;height:4px;background:var(--tbl-surface-3);border-radius:999px;overflow:hidden}
.pu-mgrbar i{display:block;height:100%;background:var(--tbl-accent);border-radius:999px}

.pu-mx{width:100%;border-collapse:collapse}
.pu-mx thead th{text-align:center;min-width:58px;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--tbl-muted);padding:8px 6px;border-bottom:1px solid var(--tbl-border-2)}
.pu-mx thead th.l{text-align:left;position:sticky;left:0;background:var(--tbl-surface);z-index:1}
.pu-mx tbody td{text-align:center;padding:0}
.pu-mx tbody td .cell{padding:9px 6px;margin:2px;border-radius:var(--tbl-r-sm);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.pu-mx tbody td.l{text-align:left;font-weight:600;position:sticky;left:0;background:var(--tbl-surface);z-index:1;padding:9px 10px;font-size:13px}
.pu-mx tbody tr:hover td.l{background:var(--tbl-surface-2)}
.pu-mx tfoot td{text-align:center;font-weight:700;padding:9px 6px;border-top:2px solid var(--tbl-border-2);font-variant-numeric:tabular-nums}
.pu-mx tfoot td.l{text-align:left}
.pu-mx .fut{color:var(--tbl-muted);opacity:.5}
.pu-heatleg{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--tbl-muted);margin-top:12px;flex-wrap:wrap}
.pu-heatbar{width:140px;height:8px;border-radius:999px;background:linear-gradient(90deg,rgba(var(--heat-neg),.34),var(--tbl-surface-3) 50%,rgba(var(--heat-pos),.34))}

.pu-t-ok{color:var(--tbl-ok)} .pu-t-warn{color:var(--tbl-warn)} .pu-t-bad{color:var(--tbl-danger)} .pu-t-muted{color:var(--tbl-muted)}

@media(max-width:820px){
  .pu-kpis{grid-template-columns:repeat(2,1fr)}
  .pu-ofhead,.pu-ofrow,.pu-offoot{grid-template-columns:110px 1fr 74px;gap:10px}
  .pu-ofval{width:62px}
}

/* ===== Filtros GLOBALES de Middle Office (manager / oficial con buscador; js/tablero.js + UI.combo, sql/73) =====
   Mismo lenguaje que la fila Año · Ver por · Período: rótulo chico en mayúscula al lado de cada control, alto 33px,
   sin tarjeta propia — una franja fina separada de las pestañas por una línea, alineada a la DERECHA (la salvedad
   de la pestaña, si hay, ocupa el espacio de la izquierda). */
.gv-mof{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px 18px;margin:0 0 6px}
.gv-mof.is-off{display:none}   /* pestaña Gestión: los filtros de manager/oficial no aplican */
/* El botón de filtros va EN LA FILA DE LAS PESTAÑAS (a la derecha, después de los filtros propios de la pestaña):
   antes ocupaba una fila entera arriba sólo para un botón → franja en blanco de ~40px en Facturación, Clientes,
   Presupuesto y Prospectos. Abierto, los buscadores se despliegan a su izquierda; si no entran, la fila envuelve. */
.toprow > .gv-mof{margin:0;flex:0 1 auto;min-width:0}
.toprow > .gv-mof.is-row{flex:1 1 100%;order:-1}     /* abierta: fila propia, arriba de las pestañas */
.filt > .gv-mof{margin:0;flex:none;gap:0}             /* cerrada en Facturación: al final de Año · Ver por · Período */
.filt > .gv-mof .gv-mof__st:empty,.toprow > .gv-mof:not(.is-row) .gv-mof__st:empty{display:none}   /* sin hueco de 18px */
/* panel desplegable: los buscadores se abren al costado (a la izquierda) del botón del embudo */
.gv-mof__p{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px 18px;animation:gvMofIn var(--mo-base) var(--ease)}
.gv-mof__p[hidden]{display:none}
@keyframes gvMofIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gv-mof__p{animation:none}}
.gv-mof__tg{position:relative;height:33px;color:var(--tbl-ink-soft)}
.gv-mof__tg[aria-expanded="true"]{border-color:var(--tbl-accent);color:var(--tbl-accent)}
.gv-mof__tg.is-on::after{content:"";position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--tbl-accent);border:2px solid var(--tbl-bg,var(--tbl-surface))}
.gv-mof[hidden]{display:none}
.gv-mof__c{display:inline-flex}
.gv-mof__st{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--tbl-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gv-mof__st:empty{flex:1 1 0}
.gv-mof__clr{border:0;background:none;padding:4px 2px;font-size:12.5px;font-weight:600;color:var(--tbl-accent);cursor:pointer;white-space:nowrap}
.gv-mof__clr:hover{text-decoration:underline}
.gv-mof__clr:focus-visible{outline:2px solid var(--tbl-focus);outline-offset:2px;border-radius:3px}
.gv-mof__clr[hidden]{display:none}
.gv-mof__warn{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--tbl-warn)}
/* combo en línea (rótulo a la izquierda) */
.tbl-combo--inline{flex-direction:row;align-items:center;gap:8px}
.tbl-combo--inline .tbl-combo__l{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--tbl-muted);white-space:nowrap}
.tbl-combo--inline .tbl-combo__box{width:230px}
.tbl-combo--inline .tbl-combo__in{height:33px;font-size:12.5px;font-weight:600;padding-left:11px}
.tbl-combo--inline .tbl-combo__in::placeholder{color:var(--tbl-ink-soft);font-weight:600}
.tbl-combo--inline.is-on .tbl-combo__in{color:var(--tbl-accent)}
.tbl-combo--inline .tbl-combo__lst{min-width:260px}
@media (max-width:720px){
  .gv-mof{gap:10px}
  .gv-mof__p{flex:1 1 100%}
  .gv-mof__c{flex:1 1 100%}
  .tbl-combo--inline{width:100%}
  .tbl-combo--inline .tbl-combo__l{width:62px}
  .tbl-combo--inline .tbl-combo__box{flex:1;width:auto}
  .tbl-combo--inline .tbl-combo__in{height:40px;font-size:16px}
  .gv-mof__st{white-space:normal;flex:1 1 100%;order:9}
  .gv-mof__st:empty{display:none}
}
.pu-note{margin:0 0 12px;padding:10px 14px;border:1px solid var(--tbl-border);border-left:3px solid var(--tbl-warn);border-radius:var(--tbl-r);background:var(--tbl-surface);font-size:12.5px;color:var(--tbl-ink-soft);line-height:1.45}
@media (max-width:720px){
  .gv-mof{padding:12px}
  .gv-mof__p{flex:1 1 100%}
  .gv-mof__c{flex:1 1 100%;min-width:0}
}

/* ===== Cuadro "Facturación por comitente" (todas las hojas de área) =====
   Todas las cuentas en una caja con scroll VERTICAL propio (.cli-topw: alto máximo, encabezado fijo) y la fila
   Total pegada abajo, siempre visible. Por mes, las columnas entran en el ancho: sin "US$"
   por celda (la moneda va en el subtítulo), celdas más angostas y el nombre del comitente recortado con "…"
   (el completo en el title). Por semana/día hay demasiadas columnas: ahí queda el desplazamiento lateral. */
table.mx.mx--com{min-width:0;font-size:12.5px}
table.mx.mx--com td,table.mx.mx--com thead th{padding:8px 8px}
table.mx.mx--com td.k,table.mx.mx--com thead th.k{padding-left:14px}
table.mx.mx--com td.cli-name{max-width:280px;overflow:hidden;text-overflow:ellipsis}
table.mx.mx--com .tot{padding-right:14px}
table.mx.mx--com.mx--sem,table.mx.mx--com.mx--dia{min-width:720px}
.com-w table.mx.mx--com{border-collapse:separate;border-spacing:0} /* fondos opacos en las celdas sticky (ver .tw--vscroll) */
.com-w table.mx.mx--com tr.com-empty td{text-align:left;padding:22px 14px;color:var(--tbl-muted);font-weight:500;white-space:normal}
.com-w table.mx.mx--com tfoot td{position:sticky;bottom:0;z-index:1;background:var(--tbl-surface-2)}
@media (max-width:1100px){table.mx.mx--com td.cli-name{max-width:200px}}
@media (max-width:720px){table.mx.mx--com{min-width:640px}table.mx.mx--com td.cli-name{max-width:150px}}
.pu-conc{margin:0 0 12px;padding:8px 12px;border-radius:var(--tbl-r);background:var(--tbl-surface-2);font-size:12px;color:var(--tbl-ink-soft);line-height:1.45}
.pu-conc[hidden]{display:none}