/* Lenguaje visual Cuorum (Yáneken): tema claro crema, acento violeta,
   Plus Jakarta Sans + Archivo Black (wordmark). */
:root{
  --bg:#faf8f3; --panel:#ffffff; --panel2:#fbf7ee; --line:#e8e2d6;
  --txt:#2e2950; --muted:#655e82; --accent:#5b2dee; --accent-dk:#3e1fb3;
  --accent2:#127a52; --amber:#e6a23b;
  --pos:#127a52; --neg:#be3434; --warn:#8a5a0e;
  /* micro-tokens compartidos (mismos valores literales que ya se usaban) */
  --badge-violet-bg:#e7defc; --wordmark-ink:#111; --radius-control:5px; --focus-ring:rgba(91,45,238,.12);
  --row:#ffffff; --rowalt:#fbf9f4; --sub:#f3efff; --head:#f7f4ec;
  /* tintes de estado de fila/superficie (documentados en DESIGN.md §2) */
  --hover:#f0ebff; --total:#ece6fd; --drill:#f6f3ff;
  /* inputs (DESIGN.md §5) */
  --field-line:#e2ded1; --field-line-hover:#cfc8b6; --placeholder:#75708c;
  /* paleta data-viz del gráfico — excepción intencional a la regla de un acento */
  --chart-1:#4f9cf9; --chart-2:#36c6a0; --chart-3:#f5b54a; --chart-axis:#2a3a4d;
  --grad:linear-gradient(135deg,#3e1fb3,#5b2dee);
  --shadow:0 1px 2px rgba(46,41,80,.05), 0 4px 16px rgba(46,41,80,.06);
  /* curvas de movimiento (ease-out, sin rebote) — ver §4 / reference animate */
  --ease-out-quint:cubic-bezier(.22,1,.36,1); --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --font:"Plus Jakarta Sans",Inter,system-ui,-apple-system,sans-serif;
  --font-display:"Archivo Black","Helvetica Neue",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:13px/1.45 var(--font);background:var(--bg);color:var(--txt)}
/* safe-area: en teléfonos con notch/bordes redondeados el contenido respeta los
   insets (sobre todo izq/der en horizontal y abajo). env() es 0 sin notch, así que
   max() conserva el padding de escritorio intacto. Requiere viewport-fit=cover. */
.app{max-width:1800px;margin:0 auto;
  padding:14px max(12px,env(safe-area-inset-right)) max(60px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}

/* header (topbar estilo Cuorum) */
header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:12px 18px;margin-bottom:14px}
.brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wordmark{font-family:var(--font-display);font-size:20px;letter-spacing:-1px;color:var(--wordmark-ink)}
header.top h1{font-size:17px;margin:0;letter-spacing:-.2px;font-weight:800}
header.top h1 b{color:var(--accent)}
.sub{color:var(--muted);font-size:12px;margin-top:2px}

/* ===== Lockup de marca "Meridian" (header) ================================
   Copy-forward, conserva el sistema. Reusa tokens existentes; no agrega color,
   ni segunda fuente display, ni un nuevo nivel de elevación. */

/* Hairline cálida que separa el masthead YÁNEKEN del nombre de producto.
   Usa --line (warm border), NUNCA el acento violeta: es el gesto sancionado
   de "separar dos superficies con una hairline de 1px" de la sección Elevation,
   no el side-stripe violeta decorativo que el §6 prohíbe. */
.brand-sep{align-self:stretch;width:1px;min-height:30px;background:var(--line);flex:0 0 auto}

.brand-product{display:flex;flex-direction:column;justify-content:center}

/* Eyebrow estilo Label: le dice a un lector nuevo qué es Meridian.
   Plus Jakarta Sans 800, Muted Slate (pasa 4.5:1 sobre el header blanco). */
.brand-product .eyebrow{font-size:10px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;color:var(--muted);line-height:1;margin-bottom:3px}

/* Título de producto "Meridian". La regla base "header.top h1" ya fija Plus
   Jakarta Sans 800 / 17px / -.2px (estilo Title); esto solo RE-AFIRMA la cara
   de cuerpo de forma defensiva — garantiza la regla Heavy-Masthead aunque un
   futuro cambio de h1 toque el default. NO es Archivo Black, NO es violeta. */
header.top h1.product-title{font-family:var(--font);color:var(--txt)}

/* Móvil: el lockup se apila (wordmark sobre el producto, según el intent 760px
   existente), así que se oculta la hairline vertical para no dejar una barra
   colgando. */
@media (max-width:760px){
  .brand-sep{display:none}
  .brand-product .eyebrow{font-size:9px;letter-spacing:.6px}
}
/* Muy angosto: se quita el eyebrow para que el header (que también lleva
   src/version/userbox a la derecha) no se apriete; quedan Meridian + #subtitle. */
@media (max-width:520px){
  .brand-product .eyebrow{display:none}
}

/* ===== Auth hero (login.html / pendiente.html) ============================
   El hero apila en vertical y no necesita divisor (la junta queda implícita por
   el apilado). "Meridian" reusa el .auth-hero h1 existente (Plus Jakarta Sans
   800, 24px, blanco sobre --grad); .product-title solo re-afirma la cara cuerpo. */
.auth-hero h1.product-title{font-family:var(--font)}
.badge{display:inline-block;background:var(--panel2);border:1px solid var(--line);
  border-radius:999px;padding:3px 10px;color:var(--muted);font-size:11px;margin-left:6px}
.userbox{display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.user-name{font-weight:700;font-size:12.5px;line-height:1.2}
.user-rol{color:var(--muted);font-size:11px;text-transform:capitalize}
.linklike{background:none;border:0;color:var(--muted);cursor:pointer;font-size:12px;font-family:var(--font)}
.linklike:hover{color:var(--txt)}

/* tabs */
nav.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}
nav.tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
  padding:10px 18px;cursor:pointer;font-weight:700;font-size:14px;margin-bottom:-1px;font-family:var(--font)}
nav.tabs button:hover{color:var(--txt)}
nav.tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}
nav.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tabpanel.hidden{display:none}

/* pivot config */
.pivot-cfg{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;padding:12px 15px 4px}
.pivot-cfg .fld{display:flex;flex-direction:column;gap:3px}
.pivot-cfg label{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.5px}
.pivot-cfg select{background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:6px 9px;font-size:13px;font-family:var(--font)}
table.eerr tr.pv-l0 td{background:var(--sub);font-weight:700}
table.eerr tr.pv-l1 td.lab{padding-left:22px}
table.eerr tr.pv-l2 td.lab{padding-left:40px;color:var(--muted)}
table.eerr tr.pv-leaf td.lab{color:var(--muted)}
/* fila con movimientos movidos por una regla de reclasificación: barra + tinte de acento */
table.eerr tr.pv-reclas td{background:var(--hover)}
table.eerr tr.pv-reclas td:first-child{box-shadow:inset 4px 0 0 var(--accent)}
.pv-reclas-badge{display:inline-block;margin-left:7px;font-size:9px;font-weight:800;
  text-transform:uppercase;letter-spacing:.4px;color:var(--accent-dk);background:var(--badge-violet-bg);
  border:1px solid var(--accent);border-radius:6px;padding:0 5px;vertical-align:middle}
/* línea del EERR "en revisión" (estado pendiente): mismo patrón que la fila
   reclasificada (barra + tinte + badge) pero en ÁMBAR — el color "pendiente" del
   DESIGN.md §2, distinto del violeta de reclasificada. */
table.eerr tr.en-revision td{background:rgba(230,162,59,.10)}
table.eerr tr.en-revision td:first-child{box-shadow:inset 4px 0 0 var(--amber)}
.rev-badge{display:inline-block;margin-left:7px;font-size:9px;font-weight:800;
  text-transform:uppercase;letter-spacing:.4px;color:var(--warn);background:rgba(230,162,59,.15);
  border:1px solid var(--amber);border-radius:6px;padding:0 5px;vertical-align:middle}
/* banderita del editor (management/admin): tenue, se revela al pasar por la fila o
   con foco de teclado, y queda firme en ámbar cuando la línea está en revisión. */
table.eerr td.lab .rev-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;margin-left:6px;vertical-align:middle;line-height:0;border:0;
  background:none;cursor:pointer;color:var(--muted);padding:0;opacity:0;transition:opacity .12s ease}
table.eerr tr:hover td.lab .rev-toggle,table.eerr td.lab:focus-within .rev-toggle{opacity:.7}
table.eerr td.lab .rev-toggle:hover{color:var(--warn);opacity:1}
table.eerr td.lab .rev-toggle.on{opacity:1;color:var(--warn)}
table.eerr td.lab .rev-toggle:focus-visible{outline:2px solid var(--amber);outline-offset:2px;opacity:1}
@media (pointer:coarse){table.eerr td.lab .rev-toggle{opacity:.5}}   /* táctil: siempre visible */
.mini{cursor:pointer;color:var(--accent);font-weight:700;padding:0 4px;background:none;border:0;font-size:13px;font-family:var(--font)}
.mini:hover{filter:brightness(.8)}
.caret{display:inline-block;width:12px;color:var(--muted)}

/* banner pills */
.banners{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 14px}
.pill{background:var(--panel);border:1px solid var(--line);color:var(--muted);
  padding:6px 14px;border-radius:999px;cursor:pointer;font-weight:700;font-size:12.5px;
  transition:.12s;font-family:var(--font)}
.pill:hover{border-color:var(--accent);color:var(--accent)}
.pill.active{background:var(--accent);border-color:var(--accent);color:#fff}
.pill.cons{background:#2e2950;color:#efeaff;border-color:#2e2950}
.pill.cons.active{background:var(--grad);border-color:var(--accent-dk);color:#fff}
.pill.zero{opacity:.45}
/* pill de GRUPO (vista consolidada de un subconjunto de banners) */
.pill.grupo{border-style:dashed;border-color:var(--accent);color:var(--accent-dk);background:var(--drill)}
.pill.grupo.active{background:var(--accent);border-color:var(--accent);color:#fff;border-style:solid}

/* Bancos sin uso (#banners): la fila se despeja ocultando los banners sin movimiento
   (.zero) tras un toggle "ojo" al final. Agrupados al final y fila algo más amplia. */
#banners{gap:12px;align-items:center}
#banners .pill{padding:7px 16px}
#banners .pill.zero{order:9}                               /* sin uso: al final de la fila */
#banners.hide-unused .pill.zero:not(.active){display:none} /* ocultos por defecto (salvo el activo) */
.bn-toggle{order:8;margin-left:auto;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font:700 12px var(--font);color:var(--muted);background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:6px 12px;user-select:none;transition:.12s}
.bn-toggle:hover{color:var(--accent);border-color:var(--accent)}
.bn-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bn-eye{width:14px;height:14px;flex:none}
.bn-count{font-size:10px;font-weight:800;color:var(--accent-dk);background:var(--badge-violet-bg);border:1px solid var(--accent);border-radius:999px;padding:0 6px;margin-right:3px}

/* controls */
.controls{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-bottom:14px}
.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{background:none;border:0;color:var(--muted);padding:7px 14px;cursor:pointer;font-weight:700;font-size:12px;font-family:var(--font)}
.seg button.active{background:var(--accent);color:#fff}
.ctl-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.6px;margin-right:8px}
/* grupo de control en línea (etiqueta + control como unidad: no se separan al envolver) */
.ctl-grp{display:inline-flex;align-items:center;gap:7px}
.ctl-grp .ctl-label{margin-right:0;white-space:nowrap}
#tab-eerr .controls{gap:12px 16px}
/* toggles: en una sola fila propia, como chips al estilo de los pills/segmentos */
.chk-row{display:flex;flex-flow:row wrap;gap:8px;align-items:center;flex-basis:100%}
/* "Ajustes de cálculo": disclosure que repliega los controles poco usados
   (Base prorrateo + Sin IC/NC) para bajar la densidad de apertura; el chip del
   summary muestra la base resuelta aunque esté plegado. */
.calc-cfg{flex-basis:100%;margin-top:2px}
.calc-cfg>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:7px 13px;background:var(--panel)}
.calc-cfg>summary::-webkit-details-marker{display:none}
.calc-cfg>summary::before{content:"\25B8";font-size:9px;color:var(--accent);transition:transform .15s ease}
.calc-cfg[open]>summary::before{transform:rotate(90deg)}
.calc-cfg>summary:hover{border-color:var(--accent);color:var(--accent-dk)}
.calc-cfg>summary:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.calc-cfg>summary .tag{margin-left:4px;text-transform:none;letter-spacing:0}
/* el display SOLO cuando [open]: ponerlo en el hijo directo de un <details>
   cerrado anula el colapso nativo y lo deja visible (gotcha conocido). */
.calc-cfg[open]>.calc-cfg-body{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end;margin-top:10px;
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
@media(prefers-reduced-motion:reduce){.calc-cfg>summary::before{transition:none}}
label.chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
  font-size:12px;font-weight:700;color:var(--muted);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  transition:background .12s,border-color .12s,color .12s}
label.chk:hover{border-color:var(--accent);color:var(--accent)}
label.chk input{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;flex:0 0 auto;
  border:1.5px solid var(--line);border-radius:var(--radius-control);background:var(--panel);cursor:pointer;
  display:inline-grid;place-content:center;font-size:11px;line-height:1}
label.chk input:checked{background:var(--accent);border-color:var(--accent)}
label.chk input:checked::after{content:"✓";color:#fff;font-weight:900}
/* estado marcado del chip: clase .on aplicada por JS (no :has(), cuya
   invalidación dinámica no es fiable en todos los navegadores) */
label.chk.on{background:#f1ecff;border-color:var(--accent);color:var(--accent-dk)}
label.chk input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 16px;box-shadow:var(--shadow);position:relative}
.kpi .k-lab{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.kpi .k-val{font-size:23px;font-weight:800;margin-top:5px;letter-spacing:-.4px}
.kpi .k-sub{font-size:11.5px;margin-top:4px;color:var(--muted)}
.kpi .k-pct{font-size:11.5px;margin-top:2px}
/* origen del dato (tooltip ⓘ) */
.k-info{position:absolute;top:11px;right:12px;width:17px;height:17px;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);font-size:10.5px;line-height:15px;font-weight:700;
  font-style:italic;font-family:Georgia,serif;text-align:center;cursor:help;user-select:none}
.k-info:hover,.k-info:focus{color:var(--accent);border-color:var(--accent);outline:none}
/* anillo de foco real solo por teclado (WCAG 2.4.7); cubre también .exp-i, que comparte la base .k-info */
.k-info:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.k-tip{display:none;position:absolute;top:calc(100% + 8px);right:-7px;width:max-content;
  max-width:min(300px,80vw);background:var(--txt);color:#f3f1fa;text-align:left;cursor:default;
  font-style:normal;font-family:var(--font);font-weight:400;font-size:11.5px;line-height:1.5;
  letter-spacing:0;padding:11px 13px;border-radius:10px;box-shadow:0 10px 28px rgba(46,41,80,.28);z-index:40}
.k-tip::before{content:"";position:absolute;top:-5px;right:11px;width:9px;height:9px;
  background:var(--txt);transform:rotate(45deg)}
.k-tip span{display:block}
.k-tip span+span{margin-top:5px}
.k-tip b{color:var(--amber);font-weight:700;text-transform:uppercase;font-size:9.5px;
  letter-spacing:.6px;display:block;margin-bottom:1px}
.k-info:hover .k-tip,.k-info:focus .k-tip{display:block}
/* Toque: amplía el área tappable de la "i" de origen/explicación a >=24px
   (WCAG 2.5.8) SIN agrandar el glifo visible; con mouse (pointer:fine) no cambia. */
@media (pointer:coarse){
  .dot-chip .k-info,table.eerr td.lab .exp-i{position:relative}
  .k-info::after,table.eerr td.lab .exp-i::after{content:"";position:absolute;inset:-4px;border-radius:50%}
  /* misma técnica para los controles de acción glíficos: área tappable >=24px
     SIN agrandar el glifo (mini ~19px, del ~22px, caret 12px, cmt-foot mini ~17px) */
  .del,.mini,.caret,.cmt-foot .mini{position:relative}
  .del::after{content:"";position:absolute;inset:-2px}
  .mini::after{content:"";position:absolute;inset:-3px}
  .caret::after{content:"";position:absolute;inset:-6px}
  .cmt-foot .mini::after{content:"";position:absolute;inset:-4px}
  /* el dot de "comentar este número" (~19px, position:absolute) crece a ~25px sin agrandar el glifo */
  .cmt-dot::after{content:"";position:absolute;inset:-3px}
}
/* variante en chips de dotación: ícono inline, tooltip anclado bajo el chip */
.dot-chip{position:relative}
.dot-chip .k-info{position:static;flex:none;align-self:center;margin-left:2px}
.dot-chip .k-tip{top:calc(100% + 8px);left:-1px;right:auto}
.dot-chip .k-tip::before{right:auto;left:14px}

/* dotación strip */
.dotacion{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px;align-items:center}
/* dotación oculta por rol (Administración → Presentación). Solo presentación: el
   dato igual se renderiza en el DOM; aquí solo se esconde la tira. */
body.dot-oculta #dotacion{display:none}
.dot-chip{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:8px 14px;display:flex;gap:8px;align-items:baseline}
.dot-chip .dl{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.dot-chip .dv{font-size:16px;font-weight:800}
.dot-chip.head{background:none;border:0;color:var(--muted);font-size:11px;
  text-transform:uppercase;letter-spacing:.6px;padding-left:0}

/* layout */
.grid{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start}
/* fila bajo el EERR: desviaciones (más ancha: 5 columnas de tabla) + gráfico */
.grid-bajo{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start;margin-top:16px}
@media(max-width:1100px){.grid{grid-template-columns:1fr}.grid-bajo{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}}
/* ---- móvil ----------------------------------------------------------------
   En pantallas chicas la tabla EERR vuelve a scrollear DENTRO de su tarjeta:
   con overflow visible (sticky de escritorio) su ancho arrastraba el scroll
   horizontal de TODA la página en el teléfono.
   Además la columna de Línea queda CONGELADA al deslizar, para no perder de
   vista qué número se está leyendo. Aplica a las tablas EERR principales
   (.tablewrap.full .eerr = EERR por banner y por canal); las otras tablas
   (ajustes, reclas, detalle) tienen varias columnas .lab y no deben fijar. */
@media(max-width:1100px){
  /* Una sola columna (<=1100): la barra de pestañas scrollea en vez de
     desbordar/envolver (corrige la zona muerta ~641-899px) y la tabla EERR se
     contiene DENTRO de su tarjeta (corrige el overflow de página en 901-1100 con
     tablas anchas comparativo/traspuesto). */
  nav.tabs{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;-webkit-overflow-scrolling:touch}
  nav.tabs button{flex:0 0 auto}
  /* selector más específico (.card.flow .tablewrap.full) que el
     `.tablewrap.full{overflow:visible}` que aparece DESPUÉS en el archivo:
     si no, esa regla posterior gana y la tabla desborda la página entera
     (la pone a ~738px y el teléfono la muestra alejada / descuadrada). */
  .card.flow .tablewrap.full{overflow-x:auto;overflow-y:visible;max-width:100%;-webkit-overflow-scrolling:touch}
  .tablewrap.full .eerr th.lab,.tablewrap.full .eerr td.lab{position:sticky;left:0;z-index:2;
    white-space:normal;max-width:42vw;
    box-shadow:6px 0 6px -4px rgba(46,41,80,.18)}
  .tablewrap.full .eerr thead th.lab{z-index:3}
  /* fondo opaco que tape el contenido que pasa por debajo al scrollear,
     respetando el cebreado y los subtotales de cada fila */
  .tablewrap.full .eerr tbody tr td.lab{background:var(--row)}
  .tablewrap.full .eerr tbody tr:nth-child(even) td.lab{background:var(--rowalt)}
  .tablewrap.full .eerr tbody tr.sub td.lab{background:var(--sub)}
  .tablewrap.full .eerr tbody tr.big td.lab{background:var(--total)}
}
/* Banda de contención de escritorio: entre ~1101 y 1300px la tabla Mensual de
   13 columnas (.card.flow .tablewrap.full) scrollea DENTRO de su tarjeta en vez
   de arrastrar el scroll horizontal de la página. Sobre 1300px se mantiene el
   sticky de escritorio (overflow visible) intacto. Suma al bloque <=1100. */
@media(max-width:1300px){
  .card.flow .tablewrap.full{overflow-x:auto;overflow-y:visible;max-width:100%;-webkit-overflow-scrolling:touch}
}
@media(max-width:640px){
  .app{padding:10px max(10px,env(safe-area-inset-right)) 40px max(10px,env(safe-area-inset-left))}
  /* Header compacto: la marca arriba y, bajo una línea divisoria, una fila
     secundaria a ancho completo con la fuente del cierre + el sello de versión.
     Antes esa metadata caía suelta con un gran hueco (~180px de alto en 375px);
     así baja a ~120px sin perder la trazabilidad (DESIGN.md §2, "version stamp"). */
  header.top{flex-wrap:wrap;align-items:flex-start;gap:5px 12px;padding:11px 14px}
  .brand{gap:3px 10px}                 /* sello sobre el título, bien juntos */
  .wordmark{font-size:18px}            /* el sello, algo más chico en el teléfono */
  header.top h1{font-size:16px}
  /* metadata (fuente del cierre + sello de versión) a ancho completo bajo una
     línea divisoria. El sello se deja en su forma compacta de 2 líneas (~100px):
     así cabe JUNTO a "Fuente:" en una sola fila en vez de apilarse. header.top
     sube la especificidad sobre las reglas base de .ver-tag que aparecen DESPUÉS
     en el archivo (si no, ganan ellas — gotcha de orden, lessons L116). */
  header.top>div:last-child{flex-wrap:wrap;width:100%;margin-top:1px;
    padding-top:6px;border-top:1px solid var(--line)}
  #srcinfo{font-size:11px}
  header.top .ver-tag{font-size:10px;padding:2px 7px}
  .userbox{margin-left:auto}
  nav.tabs{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;-webkit-overflow-scrolling:touch}
  nav.tabs button{padding:10px 12px;font-size:13px;flex:0 0 auto}
  /* filtros: cada grupo (etiqueta + control) como bloque compacto apilado,
     ocupando menos alto y con la etiqueta encima de su control */
  .controls{gap:12px 16px;align-items:flex-start}
  .controls>div{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
  .controls>.chk-row{flex-direction:row;align-items:center;gap:8px}   /* los chips siguen en fila */
  .ctl-label{margin-right:0}
  .mes-sel{margin-left:0}
  .seg button{padding:8px 15px}
  /* segmentos largos (p.ej. Base prorrateo) scrollean en vez de desbordar */
  .controls .seg{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* tabla EERR: texto y filas más cómodos para leer/tocar en el teléfono */
  .tablewrap.full .eerr th,.tablewrap.full .eerr td{padding:9px 10px;font-size:13.5px}
  .tablewrap.full .eerr td .pct-sub{font-size:11px}
  /* KPIs: que el monto no se desborde en la grilla de 2 columnas */
  .kpi .k-val{font-size:20px}
  .browse-bar input[type=search],.browse-bar input{min-width:0;flex:1 1 100%}
  .msel-pop{max-width:86vw}
  .kpis{gap:8px}
  .pivot-cfg{gap:10px}
}
/* Ergonomía táctil — en punteros gruesos (dedo) los controles primarios crecen a
   un objetivo cómodo (~44px, sobre el mínimo WCAG 2.5.8 de 24px). Se condiciona a
   pointer:coarse, no al ancho: el ratón fino (escritorio) NO cambia y la densidad
   de la herramienta se conserva. Solo min-height — los controles nativos centran
   su contenido y los .chk/summary ya son flex centrados. */
@media (pointer:coarse){
  nav.tabs button,.adm-nav button{min-height:44px}
  .pill,.bn-toggle{min-height:42px}
  .seg button{min-height:42px}
  label.chk{min-height:42px}
  .mes-sel,.msel-btn{min-height:42px}
  .calc-cfg>summary{min-height:42px}
  .btn,.btn-google{min-height:42px}
}
/* ---- móvil: pestaña Explorar gastos (tablas densas + barras de filtros) ---- */
@media(max-width:640px){
  /* config de la dinámica: 2 desplegables por fila, a ancho completo */
  #tab-explorar .pivot-cfg .fld{flex:1 1 calc(50% - 10px);min-width:0}
  #tab-explorar .pivot-cfg select{width:100%}
  /* barra de filtros: multiselectores en pares, botones que llenan, contador aparte */
  #tab-explorar .browse-bar .msel{flex:1 1 45%;min-width:0}
  #tab-explorar .browse-bar .msel-btn{max-width:none;width:100%}
  #tab-explorar .browse-bar .xls{flex:1 1 auto;text-align:center}
  #tab-explorar .browse-bar .cnt{flex-basis:100%;margin-left:0;text-align:right}
  /* tablas: scroll táctil suave y celdas compactas pero legibles */
  #tab-explorar .tablewrap{-webkit-overflow-scrolling:touch}
  #tab-explorar table.eerr th,#tab-explorar table.eerr td{padding:8px 9px;font-size:12px}
  /* detalle (12 columnas): los textos largos envuelven para angostar la tabla */
  #det-base td.lab{white-space:normal;word-break:break-word}
  /* dinámica: 1a columna (Grupo) congelada al desplazar, con fondo opaco por
     variante de fila (mismo patrón que las tablas del EERR principal) */
  #pivot th.lab,#pivot td.lab{position:sticky;left:0;z-index:2;white-space:normal;
    max-width:56vw;box-shadow:6px 0 6px -4px rgba(46,41,80,.18)}
  #pivot thead th.lab{z-index:3;background:var(--head)}
  #pivot tbody tr td.lab{background:var(--row)}
  #pivot tbody tr:nth-child(even) td.lab{background:var(--rowalt)}
  #pivot tbody tr.pv-l0 td.lab{background:var(--sub)}
  #pivot tbody tr.pv-reclas td.lab{background:var(--hover)}
  #pivot tbody tr.total td.lab{background:var(--sub)}
}
/* ---- móvil: pestaña Remuneraciones ---- */
@media(max-width:640px){
  #tab-rem .controls{gap:12px 16px}
  #tab-rem .controls .seg{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #tab-rem .tablewrap{-webkit-overflow-scrolling:touch}
  #tab-rem table.eerr th,#tab-rem table.eerr td{padding:8px 9px;font-size:12px}
  #tab-rem table.eerr th.lab,#tab-rem table.eerr td.lab{position:sticky;left:0;z-index:2;
    background:var(--row);box-shadow:6px 0 6px -4px rgba(46,41,80,.18);max-width:48vw;white-space:normal}
  #tab-rem table.eerr thead th.lab{z-index:3;background:var(--head)}
  #tab-rem table.eerr tbody tr:nth-child(even) td.lab{background:var(--rowalt)}
  #tab-rem table.eerr tbody tr.total td.lab{background:var(--sub)}
}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
/* tarjetas colapsables (disclosure progresivo): prorrateo / reconciliación /
   ajustes arrancan plegadas para bajar la densidad de apertura. <details> nativo
   = teclado + a11y. El header es el <summary> (mismo estilo que .card h2). */
details.card>summary{font-size:12px;margin:0;padding:12px 16px;border-bottom:1px solid var(--line);
  color:var(--muted);text-transform:uppercase;letter-spacing:.8px;font-weight:800;
  display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary .tag{margin-left:auto}
details.card:not([open])>summary{border-bottom:0}
details.card>summary::before{content:"\25B8";flex:none;font-size:10px;color:var(--accent);
  display:inline-block;transition:transform .15s ease}
details.card[open]>summary::before{transform:rotate(90deg)}
details.card>summary:hover{color:var(--txt)}
details.card>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(prefers-reduced-motion:reduce){details.card>summary::before{transition:none}}
/* el <summary> ya da la jerarquía (mayúsculas, tracking, color, peso): un
   heading semántico interno (h2.sum-h) hereda esa tipografía sin reestilizar */
details.card>summary .sum-h,.calc-cfg>summary .sum-h{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;margin:0;display:inline}
.card h2{font-size:12px;margin:0;padding:12px 16px;border-bottom:1px solid var(--line);
  color:var(--muted);text-transform:uppercase;letter-spacing:.8px;font-weight:800;display:flex;justify-content:space-between}

/* table */
table.eerr{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.eerr th,table.eerr td{padding:5px 10px;text-align:right;white-space:nowrap}
table.eerr th{background:var(--head);color:var(--muted);font-size:11px;font-weight:800;
  position:sticky;top:0;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.4px}
table.eerr td.lab,table.eerr th.lab{text-align:left;font-weight:600}
table.eerr tr,table.eerr tbody tr:nth-child(even){background:var(--rowalt)}
table.eerr tbody tr:nth-child(odd){background:var(--row)}
table.eerr tr.sub{background:var(--sub) !important;font-weight:700}
table.eerr tr.sub td{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
table.eerr tr.hijo td.lab{padding-left:26px;color:var(--muted);font-weight:500}
table.eerr tr.big td{font-size:13.5px}
table.eerr tr.big{background:var(--total) !important}
/* Detalle por línea (#det-base): entra sin scroll horizontal — solo Texto y Glosa
   (clase .wrap) envuelven; las demás columnas quedan en una sola línea. */
#det-base th,#det-base td{vertical-align:top}
#det-base td.wrap,#det-base th.wrap{white-space:normal;word-break:break-word}
.neg{color:var(--neg)}
.pos{color:var(--pos)}
.dim{color:var(--muted)}
.tablewrap{max-height:70vh;overflow:auto}
/* tabla EERR principal: sin scroll interno, siempre completa (la página crece)
   y con encabezados pegados al borde superior de la ventana al bajar. Para que
   position:sticky funcione contra la PÁGINA, ni el wrap ni el card pueden
   recortar/scrollear (por eso .card.flow anula el overflow:hidden del card). */
.tablewrap.full{max-height:none;overflow:visible}
.card.flow{overflow:visible}
.var-pos{color:var(--pos)} .var-neg{color:var(--neg)}

/* chart */
.chartbox{padding:14px}
#chart svg{display:block;width:100%;height:auto}
.legend{display:flex;gap:14px;justify-content:center;color:var(--muted);font-size:11.5px;margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* reconciliation */
.recon{margin-top:16px}
.recon table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.recon th,.recon td{padding:5px 10px;border-bottom:1px solid var(--line);text-align:right}
.recon th:first-child,.recon td:first-child,.recon th:nth-child(2),.recon td:nth-child(2){text-align:left}
.note{color:var(--muted);font-size:12px;padding:10px 15px;line-height:1.6}
/* prorrateo + ajustes */
tr.total td{border-top:2px solid var(--accent);font-weight:700;background:var(--sub)}
.browse-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 15px}
.browse-bar input[type=search],.browse-bar input{background:var(--panel);border:1px solid var(--line);
  color:var(--txt);border-radius:8px;padding:7px 11px;font-size:13px;min-width:240px;font-family:var(--font)}
.browse-bar select{background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:7px 9px;font-size:13px;font-family:var(--font)}
.browse-bar .cnt{color:var(--muted);font-size:11.5px;margin-left:auto}
table.eerr tbody tr.click{cursor:pointer}
table.eerr tbody tr.click:hover td{background:var(--hover)}
td.ov,.ov{color:var(--warn)}
.adj-form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;padding:12px 15px}
.adj-form .fld{display:flex;flex-direction:column;gap:3px}
.adj-form label{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.5px}
.adj-form select,.adj-form input{background:var(--panel);border:1px solid var(--line);
  color:var(--txt);border-radius:8px;padding:6px 9px;font-size:13px;font-family:var(--font)}
.adj-form input.monto{width:120px;text-align:right}
.adj-form input.glosa{width:220px}
/* móvil: los formularios de edición (Ajustes manuales, Reclasificación, Motor) apilan sus
   campos a ancho completo y neutralizan los anchos en px (inline + .monto/.glosa) que en un
   teléfono desbordaban la página. Excluye el checkbox (Invertir) para no estirarlo. */
@media (max-width:640px){
  .adj-form .fld{flex:1 1 100%;min-width:0}
  .adj-form input:not([type=checkbox]):not([type=radio]),.adj-form select{width:100%!important;min-width:0}
}
.btn{background:var(--accent);border:0;color:#fff;font-weight:700;padding:8px 16px;
  border-radius:999px;cursor:pointer;font-size:13px;font-family:var(--font)}
.btn:hover{background:var(--accent-dk)}
.btn:disabled{opacity:.5;cursor:default}
.btn.btn-2{background:var(--panel);color:var(--txt);border:1px solid var(--line)}
.btn.btn-2:hover{background:var(--panel2)}
.btn.add{background:rgba(230,162,59,.18);color:#8a5a0e;border:1px solid rgba(230,162,59,.4)}
.btn.add:hover{background:rgba(230,162,59,.3)}
.adj-actions{display:flex;gap:10px;align-items:center;padding:12px 15px;border-top:1px solid var(--line)}
.del{color:var(--neg);cursor:pointer;font-weight:700;background:none;border:0;font-size:13px;padding:2px 6px;border-radius:6px}
.del:hover{background:rgba(214,69,69,.1)}
.del:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* ---- confirmación inline de acciones destructivas (harden) ----------------
   La barra de acciones (.adj-actions) se transforma in situ: se ocultan sus
   botones y aparece un resumen + Confirmar/Cancelar. Sin modal (lenguaje Cuorum,
   superficie violeta como .drill; variante danger en rojo para lo irreversible). */
.adj-actions.confirming{flex-wrap:wrap}
.adj-actions.confirming>:not(.confirm-bar){display:none}
.confirm-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:100%;
  background:var(--drill);border:1px solid var(--accent);border-radius:10px;padding:9px 12px;
  animation:cf-in .14s cubic-bezier(.22,1,.36,1)}
.confirm-bar .cf-msg{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.confirm-bar .cf-msg b{font-size:13px;color:var(--txt);font-weight:700}
.confirm-bar .cf-detail{font-size:11.5px;color:var(--muted);line-height:1.4}
.confirm-bar .cf-acts{display:flex;gap:8px;margin-left:auto;flex:0 0 auto}
.confirm-bar.danger{background:rgba(214,69,69,.07);border-color:var(--neg)}
.confirm-bar.danger .cf-ok{background:var(--neg)}
.confirm-bar.danger .cf-ok:hover{filter:brightness(.92)}
@keyframes cf-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.confirm-bar{animation:none}}
/* indicador "cambios sin guardar" en la barra de ajustes */
.dirty-flag{color:var(--warn);font-size:11.5px;font-weight:700;align-self:center;white-space:nowrap}
.seg button:focus-visible,.pill:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* entidades fuera del consolidado (se evalúan aparte, p.ej. YNL) */
.pill.aparte{border-style:dashed;border-color:var(--amber);color:var(--warn)}
.pill.aparte.active{background:var(--amber);color:#3a2a05;border-color:var(--amber)}

/* drill-down de auditoría (EERR -> Explorar) */
table.eerr td.drillable{cursor:pointer;text-decoration:underline dotted rgba(122,116,148,.55);text-underline-offset:3px}
table.eerr td.drillable:hover{background:var(--hover);text-decoration-color:var(--accent)}
table.eerr td.drillable:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.drill{margin:0 15px 12px;border:1px solid var(--accent);border-radius:12px;background:var(--drill);box-shadow:var(--shadow)}
.drill .d-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.drill .d-head b{font-size:13.5px}
.drill .d-head .x{margin-left:auto}
.drill table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.drill td{padding:5px 14px;border-bottom:1px solid var(--line);font-size:12.5px}
.drill td:last-child{text-align:right;font-weight:600}
.drill tr:last-child td{border-bottom:0;border-top:2px solid var(--accent);font-weight:700}
.drill .d-note{color:var(--muted);font-size:11.5px;padding:8px 14px;line-height:1.5}
/* fila "Directo" expandible -> cuentas del mayor que la componen */
.drill .dr-directo>td:first-child{padding:0}
.drill .lnk-cuentas{display:flex;align-items:center;gap:7px;width:100%;background:none;border:0;cursor:pointer;font:inherit;color:var(--txt);padding:5px 14px;text-align:left}
.drill .lnk-cuentas:hover{color:var(--accent)}
.drill .lnk-cuentas:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
/* fila Directo: botón (crece) + selector de la dimensión de columnas de la matriz */
.drill .dr-directo-head{display:flex;align-items:center;gap:10px}
.drill .dr-directo-head .lnk-cuentas{flex:1 1 auto;width:auto}
.drill .dr-col-pick{flex:none;display:flex;align-items:center;gap:6px;padding-right:14px;font-size:11px;color:var(--muted);white-space:nowrap}
.drill .dr-col-sel{background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:3px 7px;font-size:11px;font-family:var(--font);cursor:pointer}
.drill .dr-col-sel:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.drill .dr-caret{color:var(--muted);font-size:10px;width:9px;flex:none}
.drill .dr-cta>td{background:var(--panel);font-size:12px}
.drill .dr-cta>td:first-child{padding-left:34px;color:var(--muted)}
.drill .dr-cta td[colspan]{text-align:left;font-weight:400}
.drill .dr-cta-id{font-family:ui-monospace,Consolas,monospace;font-size:10.5px;color:var(--txt);letter-spacing:.3px;margin-right:7px}
.drill .dr-cta-sub>td{font-weight:700;border-top:1px solid var(--line)}
.drill .dr-cta-sub>td:first-child{color:var(--txt)}
/* matriz cuenta × sociedad: tabla anidada aislada dentro de una celda colspan=2 */
.drill .dr-cta-matrix>td{padding:0;text-align:left;background:var(--panel)}
.drill .dr-mtx-wrap{overflow-x:auto}
.drill table.dr-mtx{width:100%;min-width:max-content;border-collapse:collapse;font-variant-numeric:tabular-nums;box-shadow:none;background:var(--panel)}
.drill .dr-mtx thead th{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);background:var(--panel);padding:6px 12px;border-top:0;border-bottom:1px solid var(--line);white-space:nowrap;text-align:right}
.drill .dr-mtx tbody td,.drill .dr-mtx tbody th{padding:5px 12px;font-size:12px;font-weight:400;border-top:0;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;color:var(--txt)}
.drill .dr-mtx .mtx-cta{position:sticky;left:0;z-index:1;text-align:left;text-transform:none;letter-spacing:0;min-width:190px;background:var(--panel);box-shadow:1px 0 0 var(--line)}
.drill .dr-mtx thead th.mtx-cta{color:var(--muted)}
.drill .dr-mtx td.mtx-zero{color:var(--muted)}
.drill .dr-mtx td.neg{color:var(--neg)}
.drill .dr-mtx td.pos{color:var(--pos)}
.drill .dr-mtx .mtx-tot-col{font-weight:700;border-left:1px solid var(--line)}
.drill .dr-mtx thead th.mtx-tot-col{color:var(--muted)}
.drill .dr-mtx tfoot td,.drill .dr-mtx tfoot th{padding:5px 12px;font-size:12px;font-weight:700;color:var(--txt);border-top:1px solid var(--accent);border-bottom:0;background:var(--panel2);text-align:right;white-space:nowrap}
.drill .dr-mtx tfoot th.mtx-cta{text-align:left;background:var(--panel2)}
.drill .dr-mtx tbody tr:hover td,.drill .dr-mtx tbody tr:hover th.mtx-cta{background:var(--hover)}
/* fila contenedora del panel de composición in situ (drill bajo la fila del EERR) */
table.eerr tr.drill-row>td{padding:0;background:var(--panel)}
table.eerr tr.drill-row .drill{margin:6px 12px 12px}
.hidden{display:none}
.footer{color:var(--muted);font-size:11px;margin-top:24px;text-align:center}
/* aviso no bloqueante: la config guardada (/api/estado) no cargó. Solo se muestra
   con backend real; en modo local el snapshot de data.js ES la versión publicada. */
.load-warn{display:flex;align-items:center;gap:12px;background:rgba(230,162,59,.12);
  border:1px solid var(--amber);border-radius:10px;padding:8px 14px;margin-bottom:12px;
  font-size:12.5px;color:var(--warn)}
.load-warn span{flex:1 1 auto}
.load-warn .ew-x{color:var(--muted)}
.tag{font-size:10px;padding:1px 7px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);color:var(--muted)}

/* ---------- refinamiento de inputs (lenguaje Cuorum admin) ----------
   Cajas blancas redondeadas, borde cálido, foco violeta con halo suave,
   selects con chevron propio y numéricos sin spinners nativos. */
.browse-bar input,.browse-bar select,.adj-form input,.adj-form select,
.pivot-cfg select,table.eerr input,table.eerr select,.mes-sel{
  background:#fff;border:1px solid var(--field-line);color:var(--txt);
  border-radius:10px;padding:8px 12px;font-size:12.5px;font-family:var(--font);
  outline:none;transition:border-color .15s ease, box-shadow .15s ease}
table.eerr input,table.eerr select{padding:6px 10px;font-size:12px}
.browse-bar input:hover,.browse-bar select:hover,.adj-form input:hover,
.adj-form select:hover,.pivot-cfg select:hover,table.eerr input:hover,
table.eerr select:hover,.mes-sel:hover{border-color:var(--field-line-hover)}
.browse-bar input:focus,.browse-bar select:focus,.adj-form input:focus,
.adj-form select:focus,.pivot-cfg select:focus,table.eerr input:focus,
table.eerr select:focus,.mes-sel:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
.browse-bar input::placeholder,.adj-form input::placeholder,
table.eerr input::placeholder{color:var(--placeholder)}
/* numéricos: limpios, sin flechas del navegador */
.adj-form input[type=number],table.eerr input[type=number]{-moz-appearance:textfield;appearance:textfield}
.adj-form input[type=number]::-webkit-outer-spin-button,
.adj-form input[type=number]::-webkit-inner-spin-button,
table.eerr input[type=number]::-webkit-outer-spin-button,
table.eerr input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* selects: chevron propio estilo Cuorum */
.browse-bar select,.adj-form select,.pivot-cfg select,table.eerr select,.mes-sel{
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23655e82' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
/* selector de mes de análisis (junto al segmento Período) */
.mes-sel{margin-left:8px;padding-top:7px;padding-bottom:7px;font-size:12px;font-weight:600;cursor:pointer}
/* botón de exportación a Excel en las barras de filtros */
.browse-bar .xls{background:#fff;border:1px solid var(--field-line);border-radius:10px;padding:7px 12px;
  font-size:12px;font-weight:700;color:var(--accent);cursor:pointer;font-family:var(--font);
  transition:border-color .15s ease, background .15s ease}
.browse-bar .xls:hover{border-color:var(--accent);background:rgba(91,45,238,.05)}
.browse-bar .xls:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* % sobre la venta del período, bajo el valor de cada celda (vista Mensual) */
table.eerr td .pct-sub{font-size:11px;color:var(--muted);font-weight:400;line-height:1.15;margin-top:1px}
/* historial de visitas: encabezado de sección por día */
table.eerr tr.vis-dia td{background:var(--head);color:var(--txt);font-weight:800;font-size:11.5px;
  letter-spacing:.2px;padding-top:9px;padding-bottom:6px;border-top:1px solid #e7e2d4}
/* Administración → Vistas por rol: checkboxes centrados */
.vistas-tbl th:not(.lab),.vistas-tbl td:not(.lab){text-align:center;width:130px}
.vistas-tbl input{cursor:pointer;width:16px;height:16px}
/* ---- EERR por Tienda: vista TRASPUESTA (tabla ancha) ----------------------
   Scroll contenido dentro de la tarjeta (ancho = el de las demás tablas), con
   la columna Tienda y la fila de encabezados CONGELADAS, y los encabezados en
   DIAGONAL para mantener las columnas angostas y acortar el scroll horizontal.
   Mismo mecanismo que la versión móvil de las tablas EERR. */
#tab-tienda .tablewrap.tn-trasp{max-height:74vh;overflow:auto;max-width:100%;-webkit-overflow-scrolling:touch}
/* columna Tienda fija al desplazar en horizontal (fondo opaco por variante de fila) */
#tab-tienda .tn-trasp .eerr th.lab,#tab-tienda .tn-trasp .eerr td.lab{position:sticky;left:0;z-index:2;
  box-shadow:6px 0 6px -4px rgba(46,41,80,.18)}
#tab-tienda .tn-trasp .eerr thead th.lab{z-index:200;background:var(--head);vertical-align:bottom}
#tab-tienda .tn-trasp .eerr tbody tr td.lab{background:var(--row)}
#tab-tienda .tn-trasp .eerr tbody tr:nth-child(even) td.lab{background:var(--rowalt)}
#tab-tienda .tn-trasp .eerr tbody tr.sub td.lab,#tab-tienda .tn-trasp .eerr tbody tr.big td.lab{background:var(--total)}
/* encabezados diagonales: el ancho del <span> mantiene la columna angosta y el
   texto sobresale en diagonal hacia arriba */
/* th 100% OPACO (sin transparencia al desplazar, fix 2.2) y la etiqueta en un
   "chip" en position:absolute: NO define el ancho de la columna (lo fija el
   min-width de las celdas de datos) y su fondo cubre TODO el texto con
   width:max-content (sin recortar el primer carácter, fix 2.1). z-index inline
   decreciente: el header de la izquierda queda por encima del de su derecha. */
#tab-tienda .tn-trasp .eerr thead th.diag{height:154px;padding:0;vertical-align:bottom;
  position:sticky;top:0;overflow:visible;background:var(--head)}
#tab-tienda .tn-trasp .eerr thead th.diag>span{position:absolute;left:18px;bottom:6px;
  white-space:nowrap;width:max-content;transform:rotate(-45deg);transform-origin:left bottom;
  background:var(--head);padding:2px 7px;border-radius:4px;
  font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);
  line-height:1}
#tab-tienda .tn-trasp .eerr thead th.diag.sub>span{color:var(--txt)}
/* columnas de datos con un ancho mínimo cómodo en la traspuesta */
#tab-tienda .tn-trasp .eerr tbody td:not(.lab){min-width:66px}
/* espaciador final transparente: reserva ancho para que el texto diagonal del
   último header no se corte contra el borde del contenedor */
#tab-tienda .tn-trasp .eerr .diag-sp{min-width:96px;background:transparent !important;
  border:none;padding:0}
/* EERR por Tienda: ranking Top/Bottom 15 */
.tn-rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.tn-rank-grid{grid-template-columns:1fr;gap:12px}}
.tn-rank-h{font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.4px;
  padding:6px 10px;border-radius:8px;margin-bottom:8px}
.tn-rank-h.pos{color:var(--pos);background:rgba(18,122,82,.12)}
.tn-rank-h.neg{color:var(--neg);background:rgba(214,69,69,.10)}
.tn-rank-list{list-style:none;margin:0;padding:0}
.tn-rank-list li{display:flex;align-items:center;gap:10px;padding:5px 8px;
  border-bottom:1px solid #efeadd;font-size:12.5px}
.tn-rank-list li:last-child{border-bottom:none}
.tn-rank-list li.dim{padding:10px 8px}
.rk-pos{flex:0 0 22px;text-align:center;font-weight:700;color:var(--muted);font-size:11px}
.rk-name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-val{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums}
/* nombre de tienda clickeable en la traspuesta (drill a la vista Clásico) */
#tab-tienda .tn-trasp .eerr td.lab a.tn-drill{color:inherit;text-decoration:none;cursor:pointer;
  border-bottom:1px dotted var(--muted)}
#tab-tienda .tn-trasp .eerr td.lab a.tn-drill:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* mes atípico dentro de su línea (mediana + MAD): fondo ámbar suave */
table.eerr td.atipico{background:rgba(230,162,59,.16);box-shadow:inset 0 0 0 1px rgba(230,162,59,.45);border-radius:4px}
/* seg compacto (toggle del panel Top desviaciones) */
/* variante compacta: en vez de transform:scale (que escala el área tappable y
   la deja indeterminada) reducimos tipografía/padding directamente, manteniendo
   el botón como objetivo >=24px (WCAG 2.5.8). */
.seg-sm button{font-size:10.5px;padding:6px 12px}
/* llave única del movimiento (columna ID del detalle) */
table.eerr td.uid{font-family:ui-monospace,Consolas,monospace;font-size:10px;color:var(--muted);letter-spacing:.3px}
/* botón editar regla */
.mini.edit{font-size:12px}
/* formulario de reclasificación: bloques Origen / Destino separados */
.grp-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;
  color:var(--muted);padding:8px 15px 0}
.form-sep{border-top:1px dashed #d9d3c2;margin:12px 15px 2px}
/* respaldo de finiquitos: input ignorado (cubierto por PPTO 2026) + estado activo */
.mf-in.ign{opacity:.4}
.mf-respaldo-on{color:var(--warn);font-weight:600}
/* filas clickeables del panel Top desviaciones */
#desv tr.desv-row{cursor:pointer}
#desv tr.desv-row:hover td{background:rgba(91,45,238,.06)}
#desv tr.desv-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---------- login / pendiente (páginas standalone) ---------- */
.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--bg);margin:0}
.auth-card{width:min(440px,92vw);background:var(--panel);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow);overflow:hidden;text-align:center}
.auth-hero{background:var(--grad);color:#fff;padding:34px 28px 28px}
.auth-hero .wordmark{color:#fff;font-size:26px}
.auth-hero h1{font-size:24px;font-weight:800;margin:14px 0 6px;letter-spacing:-.4px}
.auth-hero p{margin:0;opacity:.85;font-size:13px}
.auth-inner{padding:26px 28px 30px}
.btn-google{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:11px 22px;font-weight:700;font-size:14px;color:var(--txt);
  cursor:pointer;text-decoration:none;box-shadow:var(--shadow);font-family:var(--font)}
.btn-google:hover{border-color:var(--accent)}
.auth-note{color:var(--muted);font-size:12px;margin-top:16px;line-height:1.6}
.auth-error{background:rgba(214,69,69,.08);border:1px solid rgba(214,69,69,.3);color:var(--neg);
  border-radius:10px;padding:10px 14px;font-size:12.5px;margin-bottom:16px}

/* ===========================================================================
   PANEL DE ADMINISTRACIÓN — espacio de trabajo seccionado (lenguaje Cuorum).
   Cabecera con resumen, tira de secciones (Accesos · Datos · Presentación ·
   Actividad), lista de personas, checklist de datos de origen, feed de
   actividad/auditoría, y estados completos (skeleton / vacío / error).
   Solo tokens Cuorum; sin nuevas fuentes ni colores.
   =========================================================================== */

/* cabecera de la pestaña: título + resumen */
.adm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin:2px 2px 16px}
.adm-title{font-size:19px;font-weight:800;letter-spacing:-.3px;margin:0;color:var(--txt)}
.adm-lede{margin:5px 0 0;color:var(--muted);font-size:12.5px;max-width:64ch;line-height:1.5}
.adm-stats{display:flex;gap:10px;margin:0;flex-wrap:wrap}
.adm-stat{display:flex;flex-direction:column-reverse;gap:1px;align-items:flex-start;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 14px;
  box-shadow:var(--shadow);min-width:78px}
.adm-stat-v{font-size:17px;font-weight:800;letter-spacing:-.3px;color:var(--txt);margin:0;line-height:1.05}
.adm-stat-l{margin:0;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.adm-stat.warn{border-color:rgba(230,162,59,.5);background:rgba(230,162,59,.08)}
.adm-stat.warn .adm-stat-v{color:var(--warn)}
.adm-stat.warn .adm-stat-l::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--amber);margin-right:5px;vertical-align:middle}
.adm-stat.bad .adm-stat-v{color:var(--neg)}

/* tira de secciones (nav secundaria dentro de Administración) */
.adm-nav{display:inline-flex;gap:4px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:4px;box-shadow:var(--shadow);margin-bottom:18px;max-width:100%}
.adm-nav button{background:none;border:0;border-radius:999px;padding:8px 18px;cursor:pointer;
  font-weight:700;font-size:13px;color:var(--muted);font-family:var(--font);white-space:nowrap;
  transition:color .15s ease,background .18s var(--ease-out-quart)}
.adm-nav button:hover{color:var(--txt)}
.adm-nav button.active{background:var(--accent);color:#fff}
.adm-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.adm-section.hidden{display:none}
.adm-section{animation:tab-in .22s var(--ease-out-quint)}   /* re-entra al mostrarse (display:none -> block) */

/* línea de feedback colapsable (mutaciones de usuario) */
.adm-msg{padding:8px 16px 0;font-size:12px;line-height:1.4}
.adm-msg:empty{display:none}

/* ----- estado del usuario (chip) ----- */
.chip-estado{font-size:11px;font-weight:700;padding:2px 10px;border-radius:999px;text-transform:capitalize;white-space:nowrap}
.chip-estado.aprobado{background:rgba(27,158,107,.12);color:var(--pos)}
.chip-estado.pendiente{background:rgba(230,162,59,.15);color:var(--warn)}
.chip-estado.rechazado{background:rgba(214,69,69,.1);color:var(--neg)}

/* avatar (iniciales sobre el degradado de marca) */
.adm-av{width:34px;height:34px;border-radius:50%;flex:none;display:inline-flex;align-items:center;
  justify-content:center;font-weight:800;font-size:13px;color:#fff;background:var(--grad);overflow:hidden}
.adm-av.sm{width:28px;height:28px;font-size:11px}
.adm-av img{width:100%;height:100%;object-fit:cover}

/* grupos de la lista de personas (Pendientes / Usuarios) */
.adm-group+.adm-group{border-top:1px solid var(--line)}
.adm-group-h{display:flex;align-items:center;gap:8px;padding:9px 16px;background:var(--head);
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);
  border-bottom:1px solid var(--line)}
.adm-group.pend .adm-group-h{color:var(--warn);background:rgba(230,162,59,.10)}
.adm-count{font-size:10px;font-weight:800;color:var(--muted);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:0 7px;line-height:16px}
.adm-group.pend .adm-count{color:var(--warn);border-color:rgba(230,162,59,.45);background:rgba(230,162,59,.12)}

/* fila de persona */
.adm-people .adm-person{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line)}
.adm-group .adm-person:last-child{border-bottom:0}
.adm-person-id{min-width:0;flex:1 1 auto}
.adm-person-name{font-weight:700;font-size:13px;color:var(--txt);display:flex;align-items:center;gap:7px}
.adm-person-mail{color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-you{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--accent-dk);
  background:var(--badge-violet-bg);border:1px solid var(--accent);border-radius:6px;padding:0 5px}
.adm-person-meta{display:flex;align-items:center;gap:10px;flex:none}
.adm-rol{min-width:120px}
.adm-person-acts{display:flex;align-items:center;gap:6px}
.adm-act{cursor:pointer;border:1px solid transparent;border-radius:999px;padding:5px 11px;font-size:12px;
  font-weight:700;font-family:var(--font);background:none;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s,transform .08s var(--ease-out-quart)}
.adm-act:active{transform:scale(.96)}
.adm-act.ok{color:var(--pos);background:rgba(27,158,107,.10);border-color:rgba(27,158,107,.25)}
.adm-act.ok:hover{background:rgba(27,158,107,.18)}
.adm-act.no{color:var(--neg);background:rgba(214,69,69,.08);border-color:rgba(214,69,69,.22)}
.adm-act.no:hover{background:rgba(214,69,69,.16)}
.adm-act.ghost{color:var(--muted);background:var(--panel);border-color:var(--line)}
.adm-act.ghost:hover{color:var(--txt);border-color:var(--field-line-hover)}
.adm-act:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.adm-confirm{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--txt);font-weight:600}

/* ----- historial de visitas + filas genéricas con encabezado por día ----- */
.adm-day{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 16px 6px;
  background:var(--head);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:11.5px;font-weight:800;color:var(--txt);letter-spacing:.2px}
.adm-day:first-child{border-top:0}
.adm-day-n{font-size:11px;font-weight:600;color:var(--muted)}
.adm-row{display:flex;align-items:center;gap:12px;padding:9px 16px;border-bottom:1px solid var(--line)}
.adm-row:last-child{border-bottom:0}
.adm-time{flex:none;width:42px;font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;color:var(--muted)}
.adm-rol-tag{flex:none;font-size:10.5px;font-weight:700;text-transform:capitalize;color:var(--muted);
  background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:2px 10px}

/* ----- datos de origen: zona de carga + checklist de archivos ----- */
.upload-zone{margin:14px 16px;border:1.5px dashed var(--field-line);border-radius:14px;padding:24px 20px;
  text-align:center;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;
  transition:border-color .15s ease,background .15s ease,color .15s ease}
.upload-zone:hover{border-color:var(--accent);color:var(--accent-dk)}
.upload-zone.drag{border-color:var(--accent);background:var(--drill);color:var(--accent-dk)}
.upload-zone:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.upload-zone.busy{opacity:.7;pointer-events:none}
.upload-ico{color:var(--accent)}
.upload-zone b{color:var(--txt);font-size:13.5px}
.upload-hint{font-size:11.5px;line-height:1.5;max-width:64ch}
.adm-files{padding:4px 16px}
.adm-file{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.adm-file:last-child{border-bottom:0}
.adm-file-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--pos);box-shadow:0 0 0 3px rgba(18,122,82,.12)}
.adm-file.missing .adm-file-dot{background:var(--field-line-hover);box-shadow:none}
.adm-file.missing.req .adm-file-dot{background:var(--neg);box-shadow:0 0 0 3px rgba(214,69,69,.12)}
.adm-file-id{flex:1 1 auto;min-width:0}
.adm-file-lab{font-size:12.5px;font-weight:700;color:var(--txt)}
.adm-req{color:var(--accent);font-weight:800}
.adm-file-name{font-size:11.5px;color:var(--txt);font-family:ui-monospace,Consolas,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-file-name.dim{color:var(--muted)}
.adm-file-state{flex:none;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--pos)}
.adm-file.missing .adm-file-state{color:var(--muted)}
.adm-file.missing.req .adm-file-state{color:var(--neg)}

/* ---- barra de progreso del recálculo (Datos de origen) ---------------------
   El recálculo recorre fases (Leer → Clasificar → Prorratear → Armar → Publicar).
   data-estado en .adj-actions.recalc controla la visibilidad: idle (oculto) /
   loading (visible; el JS marca .is-done/.is-active por <li> y avanza
   aria-valuenow) / done (todo completo). Curvas y tokens Cuorum; reduce-motion
   neutraliza el pulso de la fase activa. */
.adj-actions.recalc{flex-direction:column;gap:12px;align-items:stretch}
.recalc-head{display:flex;align-items:center;gap:12px}
.recalc-fases{display:flex;gap:7px;list-style:none;margin:0;padding:0}
.recalc-paso{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:5px}
.recalc-seg{position:relative;display:block;width:100%;height:5px;border-radius:999px;background:var(--line);overflow:hidden}
.recalc-lab{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recalc-paso.is-done .recalc-seg{background:var(--accent)}
.recalc-paso.is-active .recalc-seg{background:linear-gradient(90deg,var(--accent) 0 55%,var(--sub) 55% 100%)}
.recalc-paso.is-active .recalc-seg::after{content:"";position:absolute;inset:0 45% 0 0;background:var(--accent);animation:recalc-pulse 1.1s ease-in-out infinite}
.recalc-paso.is-active .recalc-lab{color:var(--accent-dk);font-weight:800}
.adj-actions.recalc[data-estado="idle"] .recalc-fases{display:none}
.adj-actions.recalc[data-estado="done"] .recalc-seg{background:var(--accent)}
.adj-actions.recalc[data-estado="done"] .recalc-seg::after{display:none}
@keyframes recalc-pulse{0%,100%{opacity:1}50%{opacity:.5}}
@media(prefers-reduced-motion:reduce){.recalc-paso.is-active .recalc-seg::after{animation:none}}

/* ----- actividad (pista de auditoría) ----- */
.adm-act-item{display:flex;align-items:flex-start;gap:11px;padding:9px 16px;border-bottom:1px solid var(--line)}
.adm-act-item:last-child{border-bottom:0}
.adm-act-item .adm-time{padding-top:1px}
.adm-cat{flex:none;width:9px;height:9px;border-radius:50%;margin-top:5px;background:var(--muted)}
.adm-cat.acceso{background:var(--accent)} .adm-cat.datos{background:var(--chart-1)}
.adm-cat.ajuste{background:var(--amber)} .adm-cat.reclas{background:var(--accent2)}
.adm-cat.motor{background:#8a7fb8} .adm-cat.present{background:var(--accent-dk)}
.adm-cat.export{background:var(--chart-2)} .adm-cat.coment{background:var(--chart-3)}
.adm-act-body{flex:1 1 auto;min-width:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.adm-act-actor{font-weight:700;color:var(--txt)}
.adm-act-target{font-weight:600;color:var(--txt)}
.adm-act-warn{color:var(--warn);font-size:11.5px;margin-top:2px}
.adm-act-quote{color:var(--txt);font-size:12px;line-height:1.45;margin-top:3px;padding-left:9px;border-left:2px solid var(--line);font-style:italic}

/* ----- estados: skeleton (carga) / vacío / error ----- */
.adm-skel{padding:6px 16px}
.adm-skel-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.adm-skel-row:last-child{border-bottom:0}
.adm-skel-av{width:34px;height:34px;border-radius:50%;flex:none}
.adm-skel-lines{flex:1 1 auto;display:flex;flex-direction:column;gap:6px}
.adm-skel-bar{height:10px;border-radius:6px}
.adm-skel-bar.w60{width:60%} .adm-skel-bar.w40{width:40%} .adm-skel-bar.w35{width:35%}
.adm-skel-av,.adm-skel-bar{background:linear-gradient(90deg,var(--panel2) 25%,#f3eee3 50%,var(--panel2) 75%);
  background-size:200% 100%;animation:adm-shimmer 1.3s linear infinite}
@keyframes adm-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.adm-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:34px 24px;color:var(--muted)}
.adm-empty svg{color:var(--field-line-hover);margin-bottom:2px}
.adm-empty-t{font-size:13.5px;font-weight:700;color:var(--txt)}
.adm-empty-h{font-size:12px;line-height:1.5;max-width:48ch}
.adm-empty.sm{padding:18px 16px}
.adm-empty.sm .adm-empty-t{font-weight:600;font-size:12.5px;color:var(--muted)}
.adm-error{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 16px;
  background:rgba(214,69,69,.06);border:1px solid rgba(214,69,69,.3);border-radius:12px;padding:12px 14px}
.adm-error-msg{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--neg);line-height:1.45}
.adm-error .adm-retry{flex:none}

/* ----- responsive (≤640px) ----- */
@media(max-width:640px){
  .adm-head{align-items:flex-start}
  .adm-stats{width:100%}
  .adm-stat{flex:1 1 auto}
  .adm-nav{display:flex;width:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .adm-nav button{flex:0 0 auto}
  .adm-people .adm-person{flex-wrap:wrap}
  .adm-person-meta{flex-wrap:wrap;gap:8px;width:100%;padding-left:46px}
  .adm-rol{min-width:0;flex:1 1 auto}
}
/* rol lector: sin edición (el servidor igual valida; esto es solo UI) */
body.rol-lector #card-ajustes{display:none}
body.rol-lector #prr-save,body.rol-lector #prr-reset{display:none}
/* lector no reclasifica: fuera los ⤴ de Explorar (pivot y detalle) y el
   acceso a las reglas del motor desde el panel de auditoría */
body.rol-lector #card-prorrateo,body.rol-lector #card-recon{display:none}
/* el lector ve el EERR por canal pero no edita su asignación (server igual valida) */
body.rol-lector #cn-card-asig{display:none}
body.rol-lector #pivot button[data-rec]{display:none}
body.rol-lector #det-base button[data-i]{display:none}
body.rol-lector #dr-motor{display:none}
/* vista acotada (roles director y gerencia): solo EERR por Banner en Comparativo
   + Top desviaciones. app.js fija el estado; aquí se ocultan los controles y las
   tarjetas que no eligen ni necesitan. El servidor igual valida. gerencia usa la
   misma vista pero comenta (los 💬 no se ocultan acá). */
body.vista-acotada #tab-eerr .controls{display:none}
body.vista-acotada #card-evol{display:none}
body.vista-acotada #card-prorrateo,
body.vista-acotada #card-recon,
body.vista-acotada #card-ajustes{display:none}
body.vista-acotada #desv-comp{display:none}
body.vista-acotada .grid-bajo{grid-template-columns:1fr}
/* filas de Top desviaciones no clicables en vista acotada (no van al detalle) */
body.vista-acotada #desv tr.desv-row{cursor:default}
body.vista-acotada #desv tr.desv-row:hover td{background:transparent}
/* aviso "sin datos" */
.empty-hero{background:var(--grad);color:#fff;border-radius:16px;padding:48px 30px;text-align:center;margin:18px 0}
.empty-hero h2{font-size:26px;font-weight:800;margin:0 0 8px;letter-spacing:-.4px}
.empty-hero p{margin:0 0 18px;opacity:.85}
.empty-hero .btn{background:#fff;color:var(--accent)}
/* selector múltiple de los filtros (multisel.js) */
.msel{position:relative;display:inline-block}
.msel-btn{background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:8px;
  padding:7px 24px 7px 9px;font-size:13px;font-family:var(--font);cursor:pointer;max-width:210px;
  text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23655e82'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center}
.msel-btn.on{border-color:var(--accent);color:var(--accent-dk);font-weight:600}
.msel-pop{position:absolute;z-index:60;top:calc(100% + 4px);left:0;min-width:200px;max-height:280px;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px}
.msel-it{display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:6px;cursor:pointer;font-size:12.5px;white-space:nowrap}
.msel-it:hover{background:var(--panel2)}
.msel-clear{margin:6px 6px 2px;display:block}
/* los checkboxes del popup NO heredan el estilo de input de la barra
   (.browse-bar input les daba min-width:240px y empujaba la etiqueta) */
.msel-pop input[type=checkbox]{min-width:0;width:15px;height:15px;padding:0;margin:0;
  border:none;background:none;flex:0 0 auto;accent-color:var(--accent)}

/* sello de versión de los datos (header) */
.ver-tag{font-family:ui-monospace,Consolas,monospace;font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:2px 8px;white-space:nowrap;cursor:help}
.ver-tag:empty{display:none}
/* sello de 2 líneas: versión arriba, rama de GitHub desplegada abajo */
.ver-tag.ver-2l{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.2;padding:3px 9px;white-space:normal}
.ver-tag .ver-br{display:inline-flex;align-items:center;gap:4px;max-width:180px;overflow:hidden;font-size:9.5px}
.ver-tag .ver-bn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ver-tag .ver-gi{flex:none;color:var(--muted)}
/* mostrar/ocultar líneas del EERR (Administración) */
.lin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:3px 16px;padding:10px 15px}
.lin-grid .chk{font-size:12.5px}
.lin-grid .chk.sub-l{color:var(--muted);font-style:italic}

/* comentarios sobre los números del EERR */
.cmt-host{position:relative}
.cmt-dot{position:absolute;top:1px;left:2px;border:0;background:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:2px;line-height:1;padding:3px 5px;
  opacity:0;color:var(--accent)}
.cmt-dot .cmt-n{font-size:10px;font-weight:800;color:var(--accent-dk)}
.cmt-host:hover .cmt-dot,.cmt-host:focus-within .cmt-dot{opacity:.75}   /* el foco de teclado revela el dot, no solo el hover */
.cmt-dot.on{opacity:1;font-weight:700}
.cmt-dot.on.res{opacity:.45}
/* en táctil no hay :hover — el dot de comentar se muestra atenuado para que la función no
   quede inaccesible (los números que YA tienen comentario usan .on, opacity 1). */
@media (pointer:coarse){.cmt-dot{opacity:.5}}
.cmt-panel{position:fixed;top:70px;right:14px;width:340px;max-height:70vh;overflow:auto;z-index:80;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:0;display:flex;flex-direction:column}
.cmt-panel.hidden{display:none}   /* gana al display:flex de arriba (igual que .tabpanel.hidden) */
.cmt-panel .d-head{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line)}
.cmt-panel .d-head b{font-size:14px;font-weight:800;letter-spacing:-.2px}
.cmt-panel .d-head .tag{font-size:11px}
.cmt-panel .d-head .x{margin-left:auto;width:26px;height:26px;border-radius:999px;display:inline-flex;
  align-items:center;justify-content:center;color:var(--muted);transition:.12s}
.cmt-panel .d-head .x:hover{background:var(--hover);color:var(--accent)}
.cmt-list{display:flex;flex-direction:column;gap:12px;margin:0;padding:14px 15px}
.cmt-item{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--panel);font-size:12.5px}
.cmt-item.cmt-resp{margin-left:20px;background:var(--panel2)}
.cmt-item.cmt-resuelto{opacity:.55}
.cmt-row{display:flex;gap:10px;align-items:flex-start}
.cmt-av{width:28px;height:28px;border-radius:50%;flex:none;display:inline-flex;align-items:center;
  justify-content:center;font-weight:800;font-size:10.5px;color:#fff;background:var(--grad)}
.cmt-av.alt{background:var(--muted)}
.cmt-body{flex:1;min-width:0}
.cmt-meta{color:var(--muted);font-size:11px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cmt-meta b{color:var(--txt);font-size:12px}
.cmt-txt{margin-top:3px;font-size:12.5px;line-height:1.5;white-space:pre-wrap}
.cmt-foot{display:flex;gap:4px;margin-top:7px;opacity:.5;transition:opacity .12s}
.cmt-item:hover .cmt-foot,.cmt-item:focus-within .cmt-foot{opacity:1}
.cmt-foot .mini{font-size:11px;font-weight:700}
.cmt-restag{color:var(--accent-dk);font-size:10.5px}
.cmt-form{padding:13px 15px;border-top:1px solid var(--line)}
.cmt-form textarea{width:100%;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:7px 9px;font:12.5px var(--font);color:var(--txt);resize:vertical;
  transition:border-color .12s,box-shadow .12s}
.cmt-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
.cmt-form .adj-actions{display:flex;align-items:center;gap:8px;margin-top:8px}
.cmt-form .btn{display:inline-flex;align-items:center;gap:6px}
@media(max-width:640px){.cmt-panel{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));width:auto}}
/* explicaciones por línea: icono "i" en la etiqueta (mismo badge que la dotación).
   El director LEE en hover/foco (tooltip oscuro como .k-tip, pero posición fija
   para no recortarse en la tabla); management/admin EDITA con clic (.exp-pop). */
table.eerr td.lab .exp-i{position:static;display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;margin-left:6px;vertical-align:middle;line-height:1;font-size:10px}
table.eerr td.lab .exp-i.has{color:var(--accent);border-color:var(--accent)}
table.eerr td.lab .exp-i.edit{cursor:pointer}
.exp-tip{position:fixed;z-index:90;max-width:min(320px,82vw);background:var(--txt);color:#f3f1fa;
  text-align:left;font-size:11.5px;line-height:1.5;padding:11px 13px;border-radius:10px;
  box-shadow:0 10px 28px rgba(46,41,80,.28);white-space:pre-wrap}
.exp-tip.hidden{display:none}
.exp-tip .exp-tip-txt{display:block}
.exp-tip .exp-tip-meta{display:block;margin-top:6px;color:#b9b2d6;font-size:10.5px}
.exp-pop{position:fixed;width:320px;max-width:calc(100vw - 16px);max-height:70vh;overflow:auto;z-index:90;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px}
.exp-pop.hidden{display:none}
.exp-head{display:flex;gap:6px;align-items:center}
.exp-head b{font-size:13px}
.exp-head .x{margin-left:auto}
.exp-area{width:100%;box-sizing:border-box;margin-top:8px;min-height:92px;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:13px var(--font);color:var(--txt);resize:vertical}
.exp-meta{color:var(--muted);font-size:11px;margin-top:6px}
.exp-status{margin-left:4px}
@media(max-width:640px){.exp-pop{width:auto}}

/* regla uid huérfana (el ID ya no existe en la base actual) */
.rc-huerfana{display:inline-block;margin-left:6px;padding:1px 7px;border:1px dashed #c98a00;border-radius:9px;color:var(--warn);background:#fff7e6;font-size:10.5px;white-space:nowrap;cursor:help}

/* ===========================================================================
   Movimiento / animaciones — DESIGN.md §4: "motion only as state feedback".
   El movimiento CONFIRMA un cambio de estado, nunca decora. Curvas ease-out
   (sin rebote), 80–260ms. Sin coreografía de carga (registro product). Todo se
   neutraliza bajo prefers-reduced-motion (bloque al final, suma a los guards
   puntuales ya presentes para los carets y la confirm-bar).
   =========================================================================== */

/* feedback táctil al presionar (micro-interacción): el control "cede" un poco */
.btn,.btn-google{transition:background .12s ease,border-color .12s ease,transform .08s var(--ease-out-quart)}
.seg button{transition:background .15s var(--ease-out-quart),color .15s ease,transform .08s var(--ease-out-quart)}
.mini{transition:transform .08s var(--ease-out-quart),filter .12s ease}
.btn:active,.btn-google:active,.pill:active,.seg button:active,.bn-toggle:active{transform:scale(.97)}
.mini:active{transform:scale(.94)}

/* pestañas: el color/subrayado activo entra suave; el panel recién mostrado hace
   un fade+rise breve. Solo al CAMBIAR de pestaña (tabs.js no marca el 1er render). */
nav.tabs button{transition:color .15s ease,border-color .15s ease}
.tabpanel.tab-in{animation:tab-in .22s var(--ease-out-quint)}
@keyframes tab-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* disclosure (tarjetas plegables + "Ajustes de cálculo"): el contenido se asienta
   al abrir; el caret ya rota. No se anima el alto, solo la entrada del contenido. */
details.card[open]>*:not(summary),.calc-cfg[open]>.calc-cfg-body{animation:disc-in .22s var(--ease-out-quint)}
@keyframes disc-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* popovers y tooltips: aparecen con un fade+rise breve al mostrarse */
.msel-pop:not(.hidden),.exp-pop:not(.hidden),.exp-tip:not(.hidden),
.k-info:hover .k-tip,.k-info:focus .k-tip{animation:pop-in .15s var(--ease-out-quart)}
@keyframes pop-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* drawer de comentarios: entra anclado a su número (origen arriba). Solo al pasar
   de oculto a visible — el re-render con el panel ya abierto no lo reinicia. */
.cmt-panel:not(.hidden){animation:drawer-in .2s var(--ease-out-quint)}
@keyframes drawer-in{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}

/* mensajes de estado (role=status): el texto aparece con un fade leve */
[role=status]:not(:empty){animation:status-in .2s var(--ease-out-quart)}
@keyframes status-in{from{opacity:0}to{opacity:1}}

/* SIGNATURE — el panel de composición/auditoría se DESPLIEGA bajo su número
   (unrolling de arriba hacia abajo, clip-path). Es "la respuesta donde se hizo la
   pregunta", el gesto central del instrumento. Cubre el drill in situ del EERR
   (tr.drill-row) y el panel contextual de Explorar (#det-drill, re-disparado por JS). */
tr.drill-row .drill,#det-drill.drill-in2{animation:drill-in .26s var(--ease-out-quint)}
@keyframes drill-in{
  from{opacity:0;transform:translateY(-4px);clip-path:inset(0 0 100% 0 round 12px)}
  to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 12px)}}
@keyframes drill-out{
  from{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 12px)}
  to{opacity:0;transform:translateY(-4px);clip-path:inset(0 0 100% 0 round 12px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .btn:active,.btn-google:active,.pill:active,.seg button:active,
  .bn-toggle:active,.mini:active{transform:none !important}
}