/* ============================================================
   Atalaya · Interfaz (temas oscuro y claro)
   ------------------------------------------------------------
   La hoja de la interfaz: la única desde que se retiró la clásica
   (2026-10-08). Se carga DESPUÉS de tokens.css, que trae los colores
   de los dos temas: el oscuro (por defecto) y el claro, el mismo
   diseño en tonos claros (<html data-tema="claro">). Acá no hay
   colores por tema, solo tokens; lo único que mira data-tema es el
   isotipo (capa 2), que es otro archivo en cada tema.
   Referencia visual y de markup: docs/prototipo/atalaya-prototipo.html
   (aprobado). Detalle de diseño: plan §6 y P3 §9.

   Capas (en este orden, de lo general a lo particular):
     1. Base ............. reset, tipografía, foco, íconos, cambio de tema
     2. Shell ............ sidebar, barra superior, desplegables (copia del prototipo), selector de tema
     3. Encabezado ....... contenido, page-head, eyebrow, alertas
     4. Componentes ...... los nuevos del prototipo (tarjeta con .card-h, KPI, badge por tono…)
     5. Clásicos ......... el vocabulario de la vieja style.css que usan las páginas, con los tokens
     6. Contenido rico ... editor Quill y "hoja" clara de documentos y lecciones
     7. Páginas sueltas .. login y acceso denegado
     8. Puente ........... variables viejas (--bg, --line, --muted…) redefinidas con los tokens,
                           <style> de páginas con colores fijos y estilos inline claros
     9. Utilidades
    10. Responsive
    11. Movimiento reducido
    12. Impresión (en claro, con cualquier tema)

   Reglas de la casa: teal y lima solo en la estructura (menú, rótulos, activo, primario);
   los estados van en ok / warn / bad / info / violet. Los colores salen de tokens.css: los
   velos van en rgba(var(--at-tinta-rgb),α) (blanco en oscuro, la tinta en claro) y los
   pocos literales (baldosa blanca de logos, hoja clara, botón de Google, texto sobre rojo)
   sirven en los dos temas y están comentados donde aparecen. Contrastes AA medidos en P3 §9.3
   (oscuro) y en la paleta del claro; bordes de campos ≥ 3:1 en los dos.
   ============================================================ */


/* ============================================================
   1. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{min-height:100%}
body{
  margin:0;color:var(--at-text);font:400 15px/1.55 var(--at-font);
  background-color:var(--at-bg);
  background-image:var(--at-halos);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em;color:var(--at-text)}
[hidden]{display:none!important}
::selection{background:rgba(143,155,255,.35);color:var(--at-text)}

/* Foco: contorno teal de 2 px, siempre visible (no se quita en :focus-visible) */
:focus-visible{outline:2px solid var(--at-focus);outline-offset:2px}

/* Cambio de tema (ui.js): un cuadro sin transiciones, así todo cambia junto (si no, lo que tiene
   transition llega en 120-180 ms y el resto de golpe) */
.tema-cambiando *,.tema-cambiando *::before,.tema-cambiando *::after{transition:none!important}

hr{border:0;border-top:1px solid var(--at-line-2);margin:18px 0}
code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em}
code{padding:.1em .4em;border-radius:6px;background:var(--at-surface-3);color:var(--at-text)}
pre{margin:0 0 12px;padding:12px 14px;border-radius:var(--at-r-sm);background:var(--at-surface-2);border:1px solid var(--at-line);white-space:pre-wrap;overflow:auto}
pre code{padding:0;background:none}
mark{padding:0 .2em;border-radius:4px;background:var(--at-warn-tint);color:var(--at-warn)}
details > summary{cursor:pointer}

/* Íconos de línea (geometría Lucide, trazo 1.75): <svg class="i"> */
.i{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.i-16{width:16px;height:16px}
.i-20{width:20px;height:20px}


/* ============================================================
   2. SHELL
   Markup: .app > aside.sidebar + .scrim + .main > header.topbar + main.content
   (idéntico al prototipo; el JS está en assets/ui.js)
   ============================================================ */
.app{--sbw:var(--at-sidebar-w);display:grid;grid-template-columns:var(--sbw) minmax(0,1fr);gap:16px;padding:16px;align-items:start}

/* Saltar al contenido (visible solo con el teclado) */
.skip-link{position:absolute;left:16px;top:-64px;z-index:100;padding:10px 14px;border-radius:var(--at-r-sm);background:var(--at-surface-2);border:1px solid var(--at-line-2);color:var(--at-text);font-weight:600}
.skip-link:focus{top:16px}

/* ── Sidebar ── */
.sidebar{
  position:sticky;top:calc(16px + env(safe-area-inset-top,0px));
  height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;padding:14px 12px 12px;
  background:var(--at-grad-card),var(--at-surface);border:1px solid var(--at-line);border-radius:var(--at-r-xl);
  box-shadow:var(--at-shadow-card);overflow:hidden;
}
.sb-head{display:flex;align-items:center;gap:10px;padding:2px 4px 14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--at-text)}
.iso{width:32px;height:32px;flex:0 0 auto}
/* Isotipo del tema (uiIsotipo(): sidebar, login y página suelta): están las dos variantes y se ve
   la del tema, sin JS y sin pedir nada al cambiar. El degradé claro es para el fondo oscuro; en
   claro va el original, el azul Caissa. */
:root:not([data-tema="claro"]) .iso-claro,[data-tema="claro"] .iso-oscuro{display:none}
.sb-collapse{margin-left:auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--at-muted);border:1px solid var(--at-line-2)}
.sb-collapse:hover{color:var(--at-text);background:var(--at-surface-3)}
/* X del cajón: solo por debajo de 1024 px (capa 10), donde el menú es un cajón modal */
.sb-close{display:none;margin-left:auto;width:40px;height:40px;border-radius:50%;place-items:center;color:var(--at-muted);border:1px solid var(--at-line-2)}
.sb-close:hover{color:var(--at-text);background:var(--at-surface-3)}
.sb-scroll{flex:1;overflow-y:auto;overflow-x:hidden;margin:0 -6px;padding:0 6px 8px;scrollbar-width:thin;scrollbar-color:rgba(var(--at-tinta-rgb),.14) transparent}

/* Ítems del menú */
.nav-link{
  position:relative;display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:var(--at-r-sm);
  color:var(--at-text-2);font-size:14px;font-weight:500;white-space:nowrap;
  transition:background var(--at-t-fast) var(--at-ease),color var(--at-t-fast) var(--at-ease),box-shadow var(--at-t) var(--at-ease);
}
.nav-link .i{color:var(--at-muted)}
.nav-link:hover{background:var(--at-surface-3);color:var(--at-text)}
.nav-link:hover .i{color:var(--at-text-2)}
.nav-link[aria-current="page"]{
  color:var(--at-text);
  background:linear-gradient(90deg,var(--at-zona-tint),rgba(var(--at-tinta-rgb),.02));
  box-shadow:inset 0 0 0 1px var(--at-zona-line),0 10px 26px -12px var(--at-zona-glow);
}
.nav-link[aria-current="page"] .i{color:var(--at-zona-300)}
/* Zona Configuración (Inicio, hub): el acento es neutro y el filete de la zona no se distingue (≈1,9:1).
   El activo lleva su propio filete, --at-line-activo (≥ 3:1 sobre las superficies, en los dos temas).
   Vale para todos los "activos" de la zona: menú, subpestañas, paginado, tabs y chips de filtro. */
[data-zona="config"] .nav-link[aria-current="page"]{box-shadow:inset 0 0 0 1px var(--at-line-activo),0 10px 26px -12px var(--at-zona-glow)}
.nav-link .lbl{overflow:hidden;text-overflow:ellipsis}
/* Contador: rojo solo si pide una acción (documentos por confirmar); el resto, neutro */
.nav-count{margin-left:auto;min-width:22px;height:20px;padding:0 7px;border-radius:var(--at-pill);display:inline-grid;place-items:center;font-size:12px;font-weight:700;background:var(--at-neutral-tint);color:var(--at-text-2)}
.nav-count.is-accion{background:var(--at-bad);color:#1f0505}

/* Zonas plegables: <details class="nav-zona"> nativo; el JS solo recuerda el estado */
.nav-zona{margin-top:14px}
.nav-zona > summary{
  list-style:none;display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:10px;cursor:pointer;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--at-zona);
}
.nav-zona > summary::-webkit-details-marker{display:none}
.nav-zona > summary:hover{background:rgba(var(--at-tinta-rgb),.03)}
.nav-zona > summary:focus-visible{outline-offset:-2px}
.zona-dot{width:8px;height:8px;border-radius:50%;background:var(--at-zona);box-shadow:0 0 10px var(--at-zona-glow);flex:0 0 auto}
.nav-zona > summary .zicon{color:var(--at-zona)}
.nav-zona > summary .zona-dot{display:none}
.nav-zona > summary .chev{margin-left:auto;color:var(--at-hint);transition:transform var(--at-t) var(--at-ease)}
.nav-zona:not([open]) > summary .chev{transform:rotate(-90deg)}
.nav-grupo{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--at-hint);padding:10px 10px 4px 36px}

/* Conector de árbol */
.nav-rama{list-style:none;margin:0 0 0 21px;padding:0 0 0 14px}
.nav-rama > li{position:relative}
.nav-rama > li::before{content:"";position:absolute;left:-14px;top:0;bottom:0;border-left:1.5px solid var(--at-tree)}
.nav-rama > li:last-child::before{bottom:auto;height:14px}
.nav-rama > li::after{content:"";position:absolute;left:-14px;top:8px;width:11px;height:12px;border-left:1.5px solid var(--at-tree);border-bottom:1.5px solid var(--at-tree);border-bottom-left-radius:9px}
.nav-solo{margin-top:6px}

/* Tarjeta contextual al pie del sidebar (reconversión del "Upgrade to Pro") */
.side-card{
  margin-top:10px;padding:14px;border-radius:20px;border:1px solid var(--at-zona-line);position:relative;
  background:linear-gradient(160deg,color-mix(in srgb,var(--at-zona-vivo) 26%,transparent),color-mix(in srgb,var(--at-zona-vivo) 5%,transparent)),var(--at-surface-2);
}
.side-card h3{font-size:14px;font-weight:700;padding-right:28px;display:flex;align-items:center;gap:8px}
.side-card p{font-size:13px;color:var(--at-text-2);margin:6px 0 12px}
.side-card .x{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--at-muted)}
.side-card .x:hover{background:var(--at-neutral-tint);color:var(--at-text)}
/* Pantallas bajas (notebooks de 768 px): la tarjeta queda en título + botón, así no se come el menú */
@media (max-height:760px){
  .side-card{padding:12px 14px}
  .side-card p{display:none}
  .side-card h3{margin-bottom:10px}
}

/* Sidebar colapsado (solo desktop; el estado lo guarda ui.js, que además saca los summary del Tab) */
@media (min-width:1024px){
  .app.is-collapsed{--sbw:var(--at-sidebar-w-min)}
  .app.is-collapsed .lbl,.app.is-collapsed .nav-grupo,.app.is-collapsed .side-card,.app.is-collapsed .brand-name,
  .app.is-collapsed .nav-zona > summary .chev,.app.is-collapsed .nav-zona > summary .zicon{display:none}
  /* El nombre de la zona se oculta solo a la vista: el summary conserva su nombre accesible */
  .app.is-collapsed .nav-zona > summary .zlabel{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .app.is-collapsed .nav-zona > summary .zona-dot{display:block}
  .app.is-collapsed .sb-head{flex-direction:column;gap:12px}
  .app.is-collapsed .sb-collapse{margin:0;transform:rotate(180deg)}
  .app.is-collapsed .nav-rama{margin:0;padding:0}
  .app.is-collapsed .nav-rama > li::before,.app.is-collapsed .nav-rama > li::after{display:none}
  .app.is-collapsed .nav-link{justify-content:center;padding:0}
  .app.is-collapsed .nav-zona > summary{justify-content:center;padding:0;pointer-events:none}
  .app.is-collapsed .nav-count{position:absolute;top:7px;right:12px;min-width:8px;width:8px;height:8px;padding:0;font-size:0}
}

/* ── Columna principal y barra superior ──
   El tope de ancho va en la columna entera (no solo en el contenido): así la barra y el
   encabezado de la página terminan siempre en el mismo borde derecho, también a 1920 px o más. */
.main{min-width:0;width:100%;max-width:var(--at-content-max);display:flex;flex-direction:column;gap:22px}
.topbar{
  position:sticky;top:calc(16px + env(safe-area-inset-top,0px));z-index:30;
  display:flex;align-items:center;gap:10px;min-height:var(--at-topbar-h);padding:10px 12px 10px 18px;border-radius:var(--at-r-lg);
  border:1px solid transparent;
}
/* El vidrio de la barra (fondo, blur, filete y sombra) va en una capa detrás de su contenido y no en la barra misma: un
   elemento con backdrop-filter es la "raíz del fondo" de lo que tiene adentro, y el blur de los desplegables (avatar,
   campana, buscador) solo alcanzaba a la barra; lo de la página se veía nítido a través de ellos. Con la capa, la barra se
   dibuja igual (inset:-1px cubre el filete) y el blur de los desplegables llega a la página. */
.topbar::after{
  content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;
  background:var(--at-glass);-webkit-backdrop-filter:var(--at-blur);backdrop-filter:var(--at-blur);
  border:1px solid var(--at-line);box-shadow:var(--at-shadow-pop);
}
/* Franja sobre la barra fija: tapa el contenido que pasa por el hueco de 16 px de arriba al hacer
   scroll. Mismo fondo que el body (fijo al viewport), así no se nota el corte. */
.topbar::before{
  content:"";position:absolute;left:-1px;right:-1px;bottom:calc(100% + 1px);height:calc(16px + env(safe-area-inset-top,0px));
  pointer-events:none;background-color:var(--at-bg);background-image:var(--at-halos);background-attachment:fixed;
}
.hamb{display:none;width:40px;height:40px;border-radius:50%;place-items:center;border:1px solid var(--at-line-2);background:var(--at-surface-2)}
/* Migas. Si no entran, ceden primero los tramos anteriores (se cortan con "…", sin bajar de 2.5em)
   y la página actual queda entera mientras se pueda. El encogimiento se reparte según factor ×
   ancho: con 100000 contra 1, lo que le toca a la página mientras los tramos pueden ceder es menor
   que la unidad mínima de layout (1/64 px) y no aparece el "…" (con 1000 contra 1 ya le sacaba
   0,04 px y se cortaba). Cuando los tramos llegan al mínimo, recién ahí cede la página.
   Los 4 px de padding (compensados con margen negativo) dejan lugar al contorno de foco de los
   links, que el overflow:hidden recortaría. */
.crumbs{display:flex;align-items:center;gap:8px;min-width:0;padding:4px;margin:-4px;font-size:14px;color:var(--at-muted);white-space:nowrap;overflow:hidden}
.crumbs a:hover{color:var(--at-text)}
.crumb{flex:0 100000 auto;min-width:2.5em;overflow:hidden;text-overflow:ellipsis}
.crumb .zona-dot{display:inline-block;margin-right:8px;vertical-align:middle}
.crumbs .sep{flex:0 0 auto;color:var(--at-hint)}
.crumbs strong{flex:0 1 auto;min-width:0;color:var(--at-text);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:8px}
/* Chip de la barra (semana). Fuera de la barra, .chip es el chip chico del vocabulario clásico (capa 5). */
.topbar .chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:var(--at-pill);background:var(--at-surface-2);border:1px solid var(--at-line-2);font-size:13px;font-weight:600;color:var(--at-text-2);white-space:nowrap}
.topbar .chip .i{color:var(--at-muted)}
.topbar .chip b{color:var(--at-text);font-weight:700}

/* Buscador (esqueleto en F1; atajo "/") */
.search{position:relative;display:flex;align-items:center;gap:8px;height:40px;width:clamp(200px,24vw,360px);padding:0 8px 0 14px;border-radius:var(--at-pill);background:var(--at-surface-2);border:1px solid var(--at-line-field);transition:border-color var(--at-t-fast)}
.search .i{color:var(--at-muted)}
.topbar .search input{flex:1;min-width:0;width:auto;min-height:0;height:auto;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--at-text);font:inherit;font-size:14px;outline:none}
.topbar .search input::placeholder{color:var(--at-hint)}
.topbar .search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search:focus-within{border-color:var(--at-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--at-focus) 18%,transparent)}
.kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:7px;border:1px solid var(--at-line-2);font-size:12px;color:var(--at-muted)}
.search-hint{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;padding:10px 12px;border-radius:14px;background:var(--at-surface-2);border:1px solid var(--at-line-2);box-shadow:var(--at-shadow-pop);font-size:12.5px;color:var(--at-text-2)}
.search:focus-within .search-hint{display:block}

/* Campana y avatar */
.tb-pop{position:relative}
.icon-btn{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--at-surface-2);border:1px solid var(--at-line-2);color:var(--at-text-2)}
.icon-btn:hover{color:var(--at-text);background:var(--at-surface-3)}
.bell-count{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:var(--at-pill);background:var(--at-bad);color:#1f0505;font-size:12px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px var(--at-bg)}
.bell-count.pulse{animation:at-pulse 2.2s var(--at-ease) infinite}
@keyframes at-pulse{0%,100%{box-shadow:0 0 0 2px var(--at-bg),0 0 0 2px transparent}50%{box-shadow:0 0 0 2px var(--at-bg),0 0 0 7px color-mix(in srgb,var(--at-bad) 22%,transparent)}}
.avatar-btn{width:40px;height:40px;border-radius:50%;padding:0;display:grid;place-items:center;border:1px solid var(--at-line-2)}
.av{
  --s:32px;width:var(--s);height:var(--s);border-radius:50%;display:inline-grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(160deg,var(--at-av-a),var(--at-av-b));color:var(--at-text-2);font-size:calc(var(--s) * .36);font-weight:700;letter-spacing:.02em;
}
.av-40{--s:40px}.av-28{--s:28px}.av-48{--s:48px}
.stack{display:flex;align-items:center}
.stack .av{box-shadow:0 0 0 2px var(--at-surface)}
.stack .av + .av{margin-left:-8px}

/* Desplegables (campana, avatar): vidrio, radio 22 (el blur llega a la página: ver .topbar::after) */
.pop{
  position:absolute;top:calc(100% + 10px);right:0;z-index:40;width:min(400px,calc(100vw - 32px));
  padding:14px;border-radius:var(--at-r-lg);background:color-mix(in srgb,var(--at-surface-pop) 90%,transparent);
  -webkit-backdrop-filter:var(--at-blur);backdrop-filter:var(--at-blur);border:1px solid var(--at-line-2);box-shadow:var(--at-shadow-pop);
}
.avatar-btn + .pop,.pop.is-sm{width:min(320px,calc(100vw - 32px))}
.pop-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pop-h h2{font-size:15px;font-weight:700}
.linkish{margin-left:auto;font-size:13px;font-weight:600;color:var(--at-text-2);padding:6px 8px;border-radius:8px}
.linkish:hover{color:var(--at-text);background:rgba(var(--at-tinta-rgb),.06)}
.nlist{display:flex;flex-direction:column;gap:4px;margin-top:10px;max-height:min(420px,60dvh);overflow:auto}
.ni{position:relative;display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:10px 10px 10px 14px;border-radius:14px}
.ni:hover{background:var(--at-surface-3)}
.ni.is-unread{background:var(--at-surface-2)}
.ni.is-unread::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--at-zona)}
.ni .ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--at-zona-tint);color:var(--at-zona-300);flex:0 0 auto}
.ni-b{min-width:0;flex:1}
.ni-t{display:block;font-size:14px;font-weight:600;color:var(--at-text)}
.ni-d{display:block;font-size:13px;color:var(--at-muted)}
.ni-h{font-size:12px;color:var(--at-hint);white-space:nowrap;padding-top:2px}
.ni:not(.is-unread) .ni-t{color:var(--at-text-2);font-weight:500}
.ni-urg{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--at-bad-text)}
.pop > .hint{margin:10px 4px 0}
.pop-foot{display:flex;justify-content:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--at-line);font-size:12.5px;color:var(--at-muted);text-align:center}
.menu-list{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 10px;border-radius:12px;font-size:14px;color:var(--at-text-2);text-align:left}
.menu-item:hover{background:var(--at-surface-3);color:var(--at-text)}
.menu-item .i{color:var(--at-muted)}
.menu-item[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.menu-sep{height:1px;margin:6px 4px;background:var(--at-line)}
.who{display:flex;gap:12px;align-items:center}
.who-n{font-weight:700}
.who-p{font-size:13px;color:var(--at-muted)}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
/* Selector de tema (menú del avatar, uiSelectorTema()): una fila como .menu-item pero sin hover propio (no es un link),
   con dos .tab en píldora que son radios nativos. El radio queda encima de su rótulo y transparente: recibe el clic, el
   foco y las flechas; el estado lo dibuja el rótulo (.tab:has(> input:checked), capa 4). Zona Configuración: el activo
   lleva --at-line-activo (≥ 3:1 en los dos temas). */
.tema-fila{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 4px 0 10px;font-size:14px;color:var(--at-text-2)}
.tema-fila > .i{color:var(--at-muted)}
.tema-fila > span{margin-right:auto}
.tema-sel .tab{position:relative;gap:6px;cursor:pointer}
.tema-sel .tab > input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tema-sel .tab:has(> input:focus-visible){outline:2px solid var(--at-focus);outline-offset:2px}
/* Alto contraste: el sistema borra fondos y sombras. El marcado va relleno con Highlight y el contorno queda para el foco
   (con radios, el foco cae siempre en el marcado: si los dos fueran contornos, no se vería entrar con Tab). */
@media (forced-colors:active){
  .tema-sel .tab:has(> input:checked){forced-color-adjust:none;background:Highlight;color:HighlightText}
  .tema-sel .tab:has(> input:focus-visible){outline-color:CanvasText}
}

/* Capa detrás del drawer */
.scrim{display:none}


/* ============================================================
   3. CONTENIDO Y ENCABEZADO DE PÁGINA
   main.content[data-zona] > alertas + .page-head + la página
   Las páginas viejas fluyen en bloque (márgenes propios): no es flex.
   ============================================================ */
.content{min-width:0;width:100%;padding-bottom:48px;overflow-wrap:break-word}
.content[tabindex="-1"]:focus{outline:none}
/* Links sueltos del contenido: con el acento de la zona. En tablas, como texto (se marcan al pasar).
   Dentro de texto corrido van además subrayados: el color solo no alcanza para distinguirlos del
   texto de alrededor (WCAG G183), y en la zona Configuración el acento es casi blanco. */
.content a:not([class]){color:var(--at-zona-300)}
.content a:not([class]):hover{text-decoration:underline}
.content :is(p,li,dd,small,label,.hint,.muted,.sub,.empty-state) a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.content td a:not([class]){color:var(--at-text)}
.content td a:not([class]):hover{color:var(--at-zona-300)}
.content img,.content video{max-width:100%}

.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 16px;margin-bottom:22px}
.page-head > div:first-child{min-width:0}
.page-head h1{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
.page-head .eyebrow + h1{margin-top:8px}
.page-head .sub{color:var(--at-muted);font-size:14px;margin-top:2px}
.page-head .toolbar,.page-head .actions{margin-left:auto}
/* La página misma de un ítem del menú (15/10): el nombre ya está en el menú y en la miga; el h1 queda para el lector de
   pantalla. Sin subtítulo ni botonera, el encabezado no deja hueco. */
.page-head h1.es-menu{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.page-head.solo-titulo{margin-bottom:0}
.toolbar,.topbar-actions,.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 10px;border-radius:var(--at-pill);background:var(--at-zona-tint);border:1px solid var(--at-zona-line);color:var(--at-zona-300);font-size:12px;font-weight:700}

/* Alertas y flash: tinte + borde + texto en el tono. Bloque (no flex): el mensaje trae texto,
   <strong> y links en línea. .alert-warn es alias de .alert-warning (aviso de solo lectura). */
.alert,.flash{display:block;padding:12px 16px;margin-bottom:16px;border-radius:var(--at-r-sm);border:1px solid var(--at-line-2);background:var(--at-surface-2);color:var(--at-text-2);font-size:14px;font-weight:500;line-height:1.5}
.alert strong,.alert b{font-weight:700}
.alert a,.content .alert a:not([class]){color:inherit;text-decoration:underline}
.alert > .i,.flash > .i,.flash > svg{width:18px;height:18px;margin-right:8px;vertical-align:-4px}
.alert-success,.flash-success{background:var(--at-ok-tint);border-color:var(--at-ok-line);color:var(--at-ok)}
.alert-danger,.alert-error,.flash-error{background:var(--at-bad-tint);border-color:var(--at-bad-line);color:var(--at-bad-text)}
.alert-warning,.alert-warn{background:var(--at-warn-tint);border-color:var(--at-warn-line);color:var(--at-warn)}
.alert-info{background:var(--at-info-tint);border-color:var(--at-info-line);color:var(--at-info)}
/* Sueltas en el fondo de la página (el flash de después de guardar, el aviso de solo lectura): el tinte de --at-aviso-*,
   que en claro ya viene compuesto sobre la tarjeta (sobre el lavanda, el amarillo quedaba caqui). En oscuro, el de arriba. */
.content > :is(.alert-success,.flash-success){background:var(--at-aviso-ok)}
.content > :is(.alert-danger,.alert-error,.flash-error){background:var(--at-aviso-bad)}
.content > :is(.alert-warning,.alert-warn){background:var(--at-aviso-warn)}
.content > .alert-info{background:var(--at-aviso-info)}


/* ============================================================
   4. COMPONENTES NUEVOS (del prototipo)
   Se usan en el shell, el hub de Configuración y lo que se escriba desde F1.
   Los del Inicio rediseñado (resumen por célula, filtros) llegaron con Pre-A, más abajo
   ("Cartera"): desde ahí el dashboard.php clásico ya no se dibuja en esta hoja.
   ============================================================ */

/* Tarjeta. .card sola = contenedor sin padding (vocabulario clásico: .card-header / .card-body).
   Con un encabezado .card-h directo, es la tarjeta del prototipo, con padding propio. */
.card{position:relative;min-width:0;border-radius:var(--at-r-lg);background:var(--at-grad-card),var(--at-surface);border:1px solid var(--at-line);box-shadow:var(--at-shadow-card);overflow:hidden;overflow:clip}
.card:has(> .card-h){padding:18px 20px}
.card-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:14px;min-height:32px}
.card-h h2{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.card-h h2 .i{color:var(--at-zona-300)}
.card-h .end{margin-left:auto;display:flex;align-items:center;gap:8px}
.more{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--at-muted);border:1px solid var(--at-line-2)}
.more:hover{color:var(--at-text);background:var(--at-surface-3)}

/* KPI: etiqueta 13/500 · cifra 36/300 tnum · delta arriba a la derecha (signo + flecha, nunca solo color) */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{position:relative;display:flex;flex-direction:column;gap:4px;min-height:128px;padding:16px 18px;border-radius:20px;background:var(--at-grad-card),var(--at-surface);border:1px solid var(--at-line);box-shadow:var(--at-shadow-card)}
.kpi-l{font-size:13px;font-weight:500;color:var(--at-muted)}
.kpi.has-corner .kpi-l{padding-right:64px}
.kpi-v{margin-top:auto;font-family:var(--at-font-num);font-size:36px;font-weight:300;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi-v small{font-size:17px;font-weight:500;color:var(--at-muted);letter-spacing:0}
.kpi-s{font-size:12.5px;color:var(--at-hint)}
.kpi .donut{position:absolute;right:14px;top:14px}
.delta{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;border-radius:var(--at-pill);border:1px solid var(--at-line-2);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.delta.is-bad{color:var(--at-bad-text);border-color:var(--at-bad-line)}
.delta.is-good{color:var(--at-ok);border-color:var(--at-ok-line)}

/* Badge: píldora 12/600. Por defecto, neutro. Los tonos también sirven para alertas y tags. */
.badge{
  display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 10px;border-radius:var(--at-pill);
  font-size:12px;font-weight:600;line-height:1.35;white-space:nowrap;vertical-align:middle;
  color:var(--at-text-2);background:var(--at-neutral-tint);border:1px solid var(--at-line-2);
}
/* Badge con rótulo arriba ("ÚLTIMA AUDITORÍA", "ONBOARDING TÉCNICO"): dos líneas, alineadas a la izquierda */
.badge:has(> .badge-lbl),.badge:has(> span[style*="display:block"]){flex-direction:column;align-items:flex-start;gap:0;padding:4px 10px;border-radius:var(--at-r-sm)}
.badge-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:var(--at-op-rotulo);line-height:1.3}
.tone-ok{color:var(--at-ok);background:var(--at-ok-tint);border-color:var(--at-ok-line)}
.tone-warn{color:var(--at-warn);background:var(--at-warn-tint);border-color:var(--at-warn-line)}
.tone-bad{color:var(--at-bad-text);background:var(--at-bad-tint);border-color:var(--at-bad-line)}
.tone-info{color:var(--at-info);background:var(--at-info-tint);border-color:var(--at-info-line)}
.tone-violet{color:var(--at-violet);background:var(--at-violet-tint);border-color:var(--at-violet-line)}
.tone-neutral{color:var(--at-text-2);background:var(--at-neutral-tint);border-color:var(--at-line-2)}
/* Color que viene de la BD (estados de cumplimiento y de auditoría): el hex nunca va tal cual como texto.
   <span class="badge badge-dyn" style="--c:#16a34a">. Contrastes medidos en I §2.4 (oscuro, todos ≥ 5,6:1) y con la
   mezcla del claro (--at-dyn-mezcla, ≥ 4,7:1 también con los colores más pálidos). El borde, con --at-dyn-borde: en
   oscuro transparent (el color al 36 %); en claro, la tinta, para que un amarillo pálido no pierda la píldora. */
.badge-dyn{
  --c:#667085;
  color:color-mix(in srgb,var(--c) var(--at-dyn-mezcla),rgb(var(--at-tinta-rgb)));
  background:color-mix(in srgb,var(--c) 16%,transparent);
  border-color:color-mix(in srgb,var(--c) 36%,var(--at-dyn-borde));
}
/* Chip de zona: un dato de una zona "de visita" en la otra conserva su color */
.chip-zona{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--at-pill);background:var(--at-zona-tint);border:1px solid var(--at-zona-line);color:var(--at-zona-300);font-size:12px;font-weight:600;white-space:nowrap}
.chip-zona .zona-dot{width:6px;height:6px}

/* Avisos accionables (chip + texto + ir) */
.avisos{display:flex;flex-direction:column;gap:8px}
.aviso{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 10px;border-radius:16px;background:var(--at-surface-2);border:1px solid var(--at-line)}
.aviso p{flex:1;min-width:0;margin:0;font-size:14px;color:var(--at-text-2)}
.aviso p strong{color:var(--at-text);font-weight:600}
.tag{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:var(--at-pill);font-size:12px;font-weight:600;background:rgba(var(--at-tinta-rgb),.06);border:1px solid var(--at-line-2);color:var(--at-text-2);white-space:nowrap}
.tag .i{width:14px;height:14px}
.tag.is-bad{color:var(--at-bad-text);border-color:var(--at-bad-line);background:var(--at-bad-tint)}
.tag.is-warn{color:var(--at-warn);border-color:var(--at-warn-line);background:var(--at-warn-tint)}
.tag.is-ok{color:var(--at-ok);border-color:var(--at-ok-line);background:var(--at-ok-tint)}
.go{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;color:var(--at-text-2);border:1px solid var(--at-line-2)}
.go:hover{color:var(--at-text);background:var(--at-surface-3)}

/* Chips de filtro (aria-pressed) y punto de color */
.fchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--at-pill);border:1px solid var(--at-line-2);font-size:13px;font-weight:600;color:var(--at-text-2)}
.fchip:hover{color:var(--at-text);border-color:rgba(var(--at-tinta-rgb),.24)}
.fchip .n{font-size:12px;color:var(--at-hint);font-variant-numeric:tabular-nums}
.fchip[aria-pressed="true"]{background:var(--at-zona-tint);border-color:var(--at-zona-line);color:var(--at-text)}
.fchip[aria-pressed="true"] .n{color:var(--at-zona-300)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:var(--at-anillo-dato);flex:0 0 auto}
.linkbtn{font-size:13px;font-weight:600;color:var(--at-zona-300);padding:4px 6px;border-radius:8px}
.linkbtn:hover{background:var(--at-zona-tint)}

/* Tabs en píldora (reemplazan a .subtabs y a los .ef-chip). Con JS: role="tablist" + aria-selected;
   si son links: aria-current="page" o .is-active; si son radios (el selector de tema): el rótulo del marcado. Ese va
   dentro de :is(), que tolera un selector que no entiende: un navegador sin :has() descartaría la lista entera y las tabs
   activas de toda la app perderían el estado. */
.tabs{display:inline-flex;gap:4px;padding:4px;border-radius:var(--at-pill);background:var(--at-surface-2);border:1px solid var(--at-line);max-width:100%;overflow-x:auto;scrollbar-width:none}
.tab{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--at-pill);font-size:12.5px;font-weight:600;color:var(--at-muted);white-space:nowrap}
.tab:hover{color:var(--at-text)}
.tab[aria-selected="true"],.tab[aria-current="page"],.tab.is-active,:is(.tab:has(> input:checked)){background:var(--at-zona-tint);color:var(--at-zona-300);box-shadow:inset 0 0 0 1px var(--at-zona-line)}

/* Tabla en contenedor interno (.table-shell); .table--compact baja la fila a 44 px */
.table-shell{overflow-x:auto;border-radius:var(--at-r-md);background:var(--at-surface-2);border:1px solid var(--at-line)}
.table-shell th{padding:12px 16px}
.table-shell td{height:52px;padding:0 16px}
.table--compact td{height:44px}

/* Filas de lista (pendientes, hub) */
.lrows{display:flex;flex-direction:column;gap:2px}
.lrow{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;margin:0 -10px;border-radius:12px;font-size:14px;color:var(--at-text-2)}
a.lrow:hover{background:var(--at-surface-3);color:var(--at-text)}
.lrow .i{color:var(--at-zona-300)}
.lrow .grow{flex:1;min-width:0}
.lrow .grow b{color:var(--at-text);font-weight:600}
.lrow .grow small{display:block;font-size:12.5px;color:var(--at-muted)}
.lrow .end{margin-left:auto;display:flex;align-items:center;gap:8px}

/* Cifras, barra segmentada y notas */
.dchip{display:inline-grid;place-items:center;min-width:64px;height:28px;padding:0 10px;border-radius:var(--at-pill);font-size:12.5px;font-weight:700;background:var(--at-surface-2);border:1px solid var(--at-line-2);color:var(--at-text-2);font-variant-numeric:tabular-nums}
.dchip.is-hoy{background:var(--at-zona-tint);border-color:var(--at-zona-line);color:var(--at-zona-300);box-shadow:0 0 18px -2px var(--at-zona-glow)}
.big{font-family:var(--at-font-num);font-size:44px;font-weight:300;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.big small{font-size:17px;font-weight:500;color:var(--at-muted);letter-spacing:0}
.segbar{display:flex;gap:4px;height:10px;margin:16px 0 12px}
.seg{border-radius:4px;background:var(--c);min-width:6px}
.leg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--at-text-2)}
.leg span{display:inline-flex;align-items:center;gap:6px}
.sq{width:10px;height:10px;border-radius:3px;background:var(--c)}
.note{margin-top:12px;padding-top:12px;border-top:1px solid var(--at-line);font-size:13px;color:var(--at-muted)}
.note b{color:var(--at-text-2);font-weight:600}
.bullets{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.bullets li{display:flex;gap:10px;font-size:14px;color:var(--at-text-2);line-height:1.5}
.bullets li::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--at-zona)}
.zona-rule{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--at-zona)}
.zona-rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--at-zona-line),transparent)}

/* Hub de Configuración: tarjetas por zona */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px;align-items:start}
.hub > .card + .card{margin-top:0}

/* ── Cartera (Pre-A): el Inicio, Clientes, la ficha del cliente y el buscador global ── */
/* Inicio sin "Hoy en Caissa": la Cartera a todo el ancho */
.inicio.solo{grid-template-columns:minmax(0,1fr)}
/* La dona del KPI de informes (carteraDona()) y la cifra en texto de un KPI (un estado, "Nunca") */
.donut-fondo{stroke:rgba(var(--at-tinta-rgb),.08)}
.donut-arco{stroke:var(--at-zona);filter:drop-shadow(0 0 5px var(--at-zona-glow))}
.kpi-txt{display:flex;align-items:flex-start;gap:9px;font-family:var(--at-font);font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.kpi-txt .dot{width:10px;height:10px;margin-top:7px}
/* Resumen por célula (del prototipo): filtros por etapa y estado, células y tarjetas de analista */
.filtros{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.fila{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fila-t{flex:0 0 58px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--at-hint)}
.f-res{margin:0;padding-left:64px;font-size:12.5px;color:var(--at-muted)}
.f-res:empty{display:none}
.celulas{display:flex;flex-direction:column;gap:12px}
.celula{padding:14px;border-radius:18px;border:1px solid var(--at-line);background:rgba(var(--at-tinta-rgb),.015)}
.celula.is-libres{border-style:dashed;background:transparent}
.cel-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:12px}
.cel-n{font-size:15px;font-weight:600}
.cel-meta{font-size:13px;color:var(--at-muted)}
.cel-meta .ref,.ra .ref{color:var(--at-warn)}
.cel-cifras{margin-left:auto;display:flex;gap:6px}
.ra-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(236px,100%),1fr));gap:10px;align-items:start}
.ra{padding:10px 12px 8px;border-radius:16px;background:var(--at-surface-2);border:1px solid var(--at-line)}
.ra.is-vacio{border-style:dashed;background:transparent}
.ra-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding-bottom:8px;margin-bottom:2px;border-bottom:1px solid var(--at-line)}
.ra-n{min-width:0;font-size:14px;font-weight:600}
.ra-c{margin-left:auto;font-size:12px;font-weight:700;color:var(--at-muted);font-variant-numeric:tabular-nums}
.ra-row{display:flex;align-items:center;gap:8px;min-height:32px;font-size:13.5px}
.ra-a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--at-text-2)}
.ra-a:hover{color:var(--at-text)}
.content .ra-row .badge{display:inline-block;max-width:55%;min-height:0;padding:0 8px;font-size:11.5px;line-height:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Clientes: pestañas con su número, barra de filtros y la tabla (en el teléfono, una tarjeta por cuenta; capa 10) */
.tab-n{margin-left:6px;font-size:11.5px;font-weight:700;color:var(--at-hint)}
.tab[aria-current="page"] .tab-n,.tab.is-active .tab-n{color:inherit;opacity:var(--at-op-numero)}
.cli-lista > .card-h{margin-bottom:12px}
.cli-filtros{margin-bottom:14px}
.cli-filtros select{width:auto;max-width:220px}
.cli-tabla th,.cli-tabla td{padding-left:12px;padding-right:12px}
.cli-tabla td{height:auto;padding-top:10px;padding-bottom:10px}
.cli-editar{width:32px;padding:0}
.cli-nombre{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-width:0}
.cli-a{font-weight:600;color:var(--at-text)}
.cli-a:hover{color:var(--at-zona-300)}
.cli-web{flex-basis:100%;font-size:12.5px;color:var(--at-muted)}
.cli-web:hover{color:var(--at-text-2);text-decoration:underline}
.cli-an{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.cli-etapa{width:auto;min-height:32px;padding:4px 10px;font-size:13px}
.cli-onb{margin-top:6px}
.cli-tabla .badge + .badge{margin-left:6px}
.cli-tabla .js-estado .badge{display:inline-block;max-width:170px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.cli-acciones{white-space:nowrap;text-align:right}
.cli-acciones .switch{margin-right:10px}
.cli-tabla td.is-ok{animation:at-guardado 1.2s var(--at-ease)}
@keyframes at-guardado{from{background:var(--at-ok-tint)}to{background:transparent}}
/* El diálogo de la baja (en lugar de prompt y confirm) */
.dlg-baja{width:min(480px,calc(100vw - 32px))}
.dlg-baja form{display:flex;flex-direction:column;gap:14px;padding:22px 24px}
.dlg-baja h2{font-size:18px}
.dlg-baja p{margin:0}
.dlg-tipo{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0}
.dlg-tipo legend{margin-bottom:8px;font-size:13px;font-weight:600;color:var(--at-text-2)}
.dlg-baja .field{margin-bottom:0}

/* Ficha del cliente: el logo en la cabecera, los badges, la barra de anclas fija y las dos columnas */
.page-head.has-lead{align-items:center}
.page-head.has-lead > div{min-width:0}
.ficha-badges{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.ficha-web{display:inline-flex;align-items:center;gap:6px;margin-left:4px;font-size:13px;color:var(--at-text-2)}
.ficha-web:hover{color:var(--at-text);text-decoration:underline}
.ficha-kpis{margin-bottom:16px}
.ficha-nav{position:sticky;top:calc(26px + var(--at-topbar-h) + env(safe-area-inset-top,0px));z-index:20;margin-bottom:16px;background:color-mix(in srgb,var(--at-surface-pop) 92%,transparent);-webkit-backdrop-filter:var(--at-blur);backdrop-filter:var(--at-blur);box-shadow:var(--at-shadow-pop)}
.ficha{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:22px;align-items:start}
.ficha-sec{scroll-margin-top:calc(90px + var(--at-topbar-h))}
.ficha .col > .def-good{margin:0}
.ficha-buscar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.ficha-alta{margin-bottom:14px}
.ficha-alta[open] > summary{margin-bottom:12px}
.ficha-alta-form{padding:16px 18px;border-radius:var(--at-r-md);background:var(--at-surface-2);border:1px solid var(--at-line)}
.ficha-alta-form .form-actions{margin-top:0}
.report-grow{flex:1 1 auto;min-width:0;color:var(--at-text-2)}
.report-body .tl-meta{margin-top:12px}
.report-actions form{display:inline}
.nota-contexto{margin-top:12px;padding:10px 13px;border-radius:10px;background:var(--at-info-tint);border-left:3px solid var(--at-info);font-size:13.5px}
.nota-contexto .field-label{color:var(--at-info)}
.pm-nota-body .field-label{color:var(--at-violet)}
.report-body .pm-nota{margin-top:10px}
.pm-nota-form{max-width:640px;margin-top:8px}
.pm-nota-form .js-rich{height:140px}
.ficha-dl{display:flex;flex-direction:column;gap:14px;margin:0}
.ficha-dl > div{display:flex;flex-direction:column;gap:4px}
.ficha-dl dt{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--at-muted)}
.ficha-dl dd{margin:0;font-size:14px;color:var(--at-text)}
.ficha-dl dd .badge{margin-top:4px}
.ficha-mail{display:block;margin-top:4px;font-size:13px}
.ficha-texto{color:var(--at-text-2)}
.def-good.is-vacia{background:var(--at-surface-2);border-color:var(--at-line);border-left-color:var(--at-line-2)}
.def-good.is-vacia .def-title{color:var(--at-muted)}
.def-good.is-vacia p{margin:0}
.deleg{padding:12px 0;border-top:1px solid var(--at-line)}
.deleg:first-child{padding-top:0;border-top:0}
.deleg p{margin:0 0 4px;font-size:14px;color:var(--at-text-2)}
.deleg-enlace{margin-top:8px}
.deleg-form{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.deleg-form input{flex:1 1 200px}
.ficha-riesgo{border-color:var(--at-bad-line)}
.ficha-riesgo p{margin:0 0 12px;font-size:13.5px}
.tline-ico .i{color:var(--at-muted)}

/* informe_form.php (08/10): el informe anterior al lado del formulario, campo contra campo y solo para leer. Cada celda
   (.inf-prev) va en el HTML justo antes del campo que compara: con dos columnas (desde 1280 px), la grilla "dense" la sube
   a la fila de su campo, a la derecha, y el filete de la izquierda queda continuo; con una sola, queda arriba del campo. */
.inf-form{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-flow:row dense}
.inf-prev{display:flex;flex-direction:column;min-width:0;margin-bottom:12px;padding-left:14px;box-shadow:inset 2px 0 0 var(--at-line-2)}
.inf-prev-label{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--at-muted)}
.inf-prev-titulo{color:var(--at-zona-300)}
.inf-prev-ro{display:inline-flex;align-items:center;gap:4px;margin-left:4px;font-weight:500;color:var(--at-muted)}
.inf-prev-ro .i{width:14px;height:14px}
.inf-prev-valor{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:40px;padding:8px 13px;border:1px solid var(--at-line);border-radius:var(--at-r-sm);background:rgba(var(--at-tinta-rgb),.02);font-size:14px;line-height:1.4;color:var(--at-text-2);overflow-wrap:anywhere}
.inf-prev-valor strong{color:var(--at-text)}
.inf-prev > small{display:block;margin-top:6px;color:var(--at-muted)}
.inf-prev > .inf-prev-pie{display:none}
.inf-prev-etapa{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--at-text-2)}
.inf-prev-texto{max-height:220px;overflow:auto;padding:12px 15px;border:1px solid var(--at-line);border-radius:var(--at-r-sm);background:rgba(var(--at-tinta-rgb),.02);font-size:14px;line-height:1.55;color:var(--at-text-2);overflow-wrap:anywhere;scrollbar-width:thin;scrollbar-color:rgba(var(--at-tinta-rgb),.2) transparent}
:is(.inf-prev-texto,.celinf-texto) :is(p,ul,ol,blockquote,h2,h3){margin:0}
:is(.inf-prev-texto,.celinf-texto) :is(ul,ol){padding-left:1.5em}
:is(.inf-prev-texto,.celinf-texto) li[data-list="bullet"]{list-style-type:disc}
:is(.inf-prev-texto,.celinf-texto) h2{font-size:16px}
:is(.inf-prev-texto,.celinf-texto) h3{font-size:15px}
:is(.inf-prev-texto,.celinf-texto) blockquote{padding-left:12px;border-left:3px solid var(--at-line-2);color:var(--at-muted)}
:is(.inf-prev-texto,.celinf-texto) a{color:var(--at-zona-300);text-decoration:underline}
@media (min-width:1280px){
  .inf-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .inf-form > :not(.inf-prev){grid-column:1;margin-right:28px}
  .inf-prev{grid-column:2;margin:0;padding:0 0 16px 28px;box-shadow:inset 1px 0 0 var(--at-line-2)}
  .inf-prev-de{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  /* Los textos ocupan el alto del campo de al lado (contain: no lo estiran) y scrollean si son más largos */
  .inf-prev--texto .inf-prev-texto{flex:1 1 auto;min-height:64px;max-height:none;contain:size}
  .inf-prev > .inf-prev-pie{display:block}
}

/* celula_informe.php (08/10): el informe de célula, que carga solo el referente. El formulario y los integrantes al lado
   (una columna por debajo de 1024 px); la base y la capacidad a 7 y 14 días, en tres cajas (la base en el tinte de la
   zona: no se edita); el historial, con los .report-block de la ficha. */
.celinf{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:22px;align-items:start;margin-bottom:22px}
.celinf > .card + .card{margin-top:0}
.celinf-form .form-group > small{color:var(--at-muted)}
.celinf-cap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0;margin:0 0 16px;padding:0;border:0}
.celinf-cap > legend{margin-bottom:6px;padding:0;font-size:13px;font-weight:600;color:var(--at-text-2)}
.celinf-cap-item{display:flex;flex-direction:column;gap:6px;min-width:0;padding:14px 16px;border-radius:var(--at-r-md);background:var(--at-surface-2);border:1px solid var(--at-line)}
.celinf-cap-item.is-base{background:var(--at-zona-tint);border-color:var(--at-zona-line)}
.celinf-cap-lbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--at-muted)}
.celinf-cap-lbl .hint{font-weight:500;letter-spacing:0;text-transform:none}
.celinf-cap-num{font-size:28px;font-weight:700;line-height:40px;color:var(--at-text)}
.celinf-cap-item > small{font-size:12.5px;color:var(--at-muted)}
.celinf-cap-total{min-height:1.55em}
.content .celinf-editor{height:180px}
.celinf-lista{margin:0;padding:0;list-style:none}
.celinf-lista li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--at-line);font-size:14px}
.celinf-lista li:first-child{padding-top:0;border-top:0}
.celinf-lista-c{font-size:13px;color:var(--at-muted);white-space:nowrap}
.celinf-ref{color:var(--at-warn)}
.celinf-texto{margin-top:2px;font-size:14px;line-height:1.55;color:var(--at-text-2);overflow-wrap:anywhere}
@media (max-width:1023px){
  .celinf{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .celinf-cap{grid-template-columns:minmax(0,1fr)}
}

/* Buscador global: el desplegable de la barra (ui.js) y la página buscar.php */
.search.is-abierto .search-hint{display:none}
.search-res{position:absolute;top:calc(100% + 8px);right:0;z-index:45;width:min(460px,calc(100vw - 32px));max-height:min(70dvh,560px);overflow:auto;padding:8px;border-radius:var(--at-r-lg);background:color-mix(in srgb,var(--at-surface-pop) 96%,transparent);-webkit-backdrop-filter:var(--at-blur);backdrop-filter:var(--at-blur);border:1px solid var(--at-line-2);box-shadow:var(--at-shadow-pop)}
/* Alto contraste: los desplegables, opacos (el sistema conserva el alfa del color-mix y lo de atrás se transparentaba).
   Va después de .ficha-nav y de .search-res: antes, le ganarían por orden. */
@media (forced-colors:active){.pop,.search-res,.ficha-nav{background:Canvas}}
.sres-t{display:flex;align-items:center;gap:8px;padding:8px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--at-zona)}
.sres-t .zona-dot{width:6px;height:6px}
.sres-t .sres-mas{margin-left:auto;font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--at-muted)}
.sres-op{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:12px;font-size:14px;color:var(--at-text-2)}
.sres-op:hover,.sres-op[aria-selected="true"]{background:var(--at-surface-3);color:var(--at-text)}
.sres-op .grow{flex:1;min-width:0}
.sres-op b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--at-text)}
.sres-op small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--at-muted)}
.sres-msg{margin:0;padding:8px 10px;font-size:13px;color:var(--at-muted)}
.sres-todos{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;padding:10px;border-top:1px solid var(--at-line);border-radius:0 0 12px 12px;font-size:13px;font-weight:600;color:var(--at-text-2)}
.sres-todos:hover,.sres-todos[aria-selected="true"]{background:var(--at-surface-3);color:var(--at-text)}
.search-movil{display:none}
.buscar-form{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:10px 10px 10px 18px}
.buscar-form > .i{color:var(--at-muted)}
.content .buscar-form input{flex:1;min-width:0;padding-left:0;border:0;background:transparent;box-shadow:none;font-size:16px}
.content .buscar-form input:focus{border:0;box-shadow:none}
.buscar-form:focus-within{border-color:var(--at-focus)}
.buscar-ayuda{margin:0 4px}
.buscar-grupos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:16px;align-items:start}
.buscar-grupos > .card + .card{margin-top:0}
.lrow .client-logo{width:32px;height:32px;flex:0 0 32px}

/* ── Personas (F2 · 4a): Inicio dividido, avatar con foto, directorio, ficha y Mi legajo ── */
/* Inicio: Cartera 8fr + "Hoy en Caissa" 4fr (una columna por debajo de 1024 px, en la capa 10). Sin Cartera, "Hoy en
   Caissa" a todo el ancho, en una grilla que se acomoda sola: no deja columnas vacías cuando hay pocas tarjetas. */
.inicio{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:22px;align-items:start}
.col > .card,.col > .alert{margin-top:0;margin-bottom:0}
.inicio > .col > [style*="margin-bottom"]{margin-bottom:0!important}   /* los style= de las tarjetas clásicas de la Cartera */
.hoy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:16px;align-items:start}
.hoy-grid > .card + .card{margin-top:0}
.card-h .end .stack{margin-right:4px}

/* Avatar con foto: la imagen llena el círculo; sin foto (o si no carga), las iniciales de siempre */
.av-96{--s:96px}
.av-foto{overflow:hidden;background:var(--at-surface-2)}
.av > img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}

/* Directorio: barra (búsqueda + filtro + cuenta) y grilla de tarjetas */
.dir-barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:16px}
.campo-buscar{position:relative;flex:1 1 280px;max-width:440px}
.campo-buscar > .i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--at-muted);pointer-events:none}
.campo-buscar > .form-control{padding-left:38px}
.tab[aria-pressed="true"]{background:var(--at-zona-tint);color:var(--at-zona-300);box-shadow:inset 0 0 0 1px var(--at-zona-line)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:16px;align-items:start}
.pgrid > .card + .card{margin-top:0}

/* Tarjeta de una persona (N0): directorio, ficha y "Así te ven" */
.pcard{padding:18px 20px}
.pcard-top{display:flex;align-items:center;gap:14px;min-width:0}
.pcard-id{min-width:0}
.pcard-n{font-size:16px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.content .pcard-n a{color:var(--at-text);text-decoration:none}
.content .pcard-n a:hover{color:var(--at-zona-300);text-decoration:underline}
.pcard-p{margin-top:2px;font-size:13.5px;color:var(--at-text-2)}
.pcard-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pcard-datos{display:grid;gap:7px;margin:14px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--at-text-2)}
.pcard-datos li{display:flex;align-items:center;gap:8px;min-width:0}
.pcard-datos .i{flex:0 0 auto;color:var(--at-zona-300)}
.pcard-datos a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard-bio{margin:12px 0 0;font-size:13.5px;line-height:1.55;color:var(--at-text-2);overflow-wrap:anywhere}
.pcard-bio.is-corta{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pcard-fort{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pcard--ficha{max-width:760px;padding:24px}
.pcard--ficha .pcard-n{font-size:23px}
.pcard--ficha .pcard-bio{font-size:14.5px}
.pcard--previa{padding:16px;border:1px solid var(--at-line);border-radius:var(--at-r-md);background:var(--at-surface-2)}

/* Mi legajo: pestañas (links con aria-current), grilla de tarjetas, cabecera con la foto y formularios */
.ml-tabs{margin-bottom:16px}
/* dos columnas fijas (tarjetas de distinto alto sin huecos); una sola por debajo de 1024 px, en la capa 10 */
.ml-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.ml-cab{padding:22px}
.ml-cab-top{display:flex;align-items:center;gap:18px;min-width:0}
.ml-cab-id{min-width:0}
.ml-cab-id h2{font-size:22px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.ml-cab-id .muted{margin-top:4px}
.ml-cab .badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ml-foto{margin-top:18px}
.ml-foto-form{display:grid;gap:8px;margin-top:14px;max-width:420px}
.ml-foto-form > label{font-size:13px;font-weight:600;color:var(--at-text-2)}
.ml-foto-previa{display:flex;align-items:center;gap:14px}
.ml-foto-previa canvas{width:96px;height:96px;border-radius:50%;border:1px solid var(--at-line-2)}
.ml-foto-quitar{margin-top:10px}
.ml-form{margin-top:4px}
.ml-form .span-2{grid-column:1 / -1}
.ml-form + .lrow,.lrows + .ml-form{margin-top:12px}
.ml-contacto .end{display:flex;align-items:center;gap:4px}
.ml-contacto form{display:inline}
.ml-pref{max-width:760px}
.ml-fort{margin:4px 0 18px}
.ml-fort .k,.ml-opciones legend{margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--at-muted)}
.ml-opciones{display:grid;gap:14px;margin:0 0 18px;padding:0;border:0}
.ml-opcion{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:4px 12px}
.ml-opcion > label:not(.switch){cursor:pointer}
.ml-opcion b{display:block;font-weight:600;color:var(--at-text)}
.ml-opcion .hint{display:block}
.ml-opcion .campo-error{grid-column:2}
.campo-error{margin:6px 0 0;font-size:13px;color:var(--at-bad-text)}
.ml-pref .form-group > .hint,.ml-foto-form > .hint,.ml-fort > .hint{margin:6px 0 0}
.dl dt,.dl dd{margin:0}

/* Dato enmascarado con "Mostrar": la máscara o el valor, y un botón chico con aria-pressed */
.enm{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.enm-mask{letter-spacing:.06em;color:var(--at-text-2)}
.enm-btn{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:var(--at-pill);border:1px solid var(--at-line-2);background:var(--at-surface-2);color:var(--at-text-2);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.enm-btn:hover{color:var(--at-text);background:var(--at-surface-3)}
.enm-btn[aria-pressed="true"]{background:var(--at-zona-tint);border-color:var(--at-zona-line);color:var(--at-zona-300)}

/* ── Legajos de RRHH (F2 · 4b): la lista, la ficha por niveles, la máscara por bloque y el registro ──
   El texto secundario de tablas y filas va en --at-muted, no en .hint (en una fila en hover, .hint baja de AA). */
.leg-barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:12px}
.leg-filtros{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.tab .n{margin-left:6px;font-size:12px;color:var(--at-muted);font-variant-numeric:tabular-nums}
.tab[aria-current="page"] .n{color:inherit}
.celda-persona{display:flex;align-items:center;gap:10px;min-width:0}
.celda-persona-id{display:flex;flex-direction:column;min-width:0}
.celda-persona-id a{font-weight:600}
.celda-persona-id small,.leg-sub{display:block;font-size:12.5px;color:var(--at-muted)}
.leg-tabla .badges{display:flex;flex-wrap:wrap;gap:6px}
.leg-tabla td{padding-top:8px;padding-bottom:8px}
.leg-doc{margin-top:16px;padding-top:12px;border-top:1px solid var(--at-line)}
.leg-doc > summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.leg-doc-form{display:grid;gap:6px;max-width:460px;margin-top:10px}
.leg-doc-form > label{font-size:13px;font-weight:600;color:var(--at-text-2)}
.leg-doc-fila{display:flex;gap:8px}
.leg-alta{max-width:960px}
.leg-desde{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.leg-desde label{font-size:13px;font-weight:600;color:var(--at-text-2)}
.leg-desde .form-control{width:auto;min-height:32px;padding:4px 10px}
/* Marca del nivel de una tarjeta: texto (nunca solo color), con el candado en lo sensible */
.nivel{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 10px;border-radius:var(--at-pill);font-size:12px;font-weight:600;color:var(--at-muted);background:rgba(var(--at-tinta-rgb),.04);border:1px solid var(--at-line-2);white-space:nowrap}
.nivel .i{color:var(--at-muted)}
.leg-niveles{display:grid;gap:16px}
.leg-nivel{display:grid;gap:10px}
.leg-nivel + .leg-nivel{padding-top:14px;border-top:1px solid var(--at-line)}
.leg-k{margin:16px 0 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--at-muted)}
.leg-bio{white-space:normal;overflow-wrap:anywhere}
.leg-motivo{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--at-text-2);overflow-wrap:anywhere}
.leg-egreso{align-items:flex-start}
.leg-h3{margin:16px 0 8px;font-size:14px;font-weight:600}
.leg-contacto-form + .leg-contacto-form{margin-top:16px;padding-top:16px;border-top:1px solid var(--at-line)}
.leg-contacto-form .inline{display:inline-block;margin-top:4px}
.leg-bloque .card-h .end form.inline{display:inline}
/* La marca del nivel y los botones «Mostrar»/«Editar» bajan de línea en vez de salirse de la tarjeta */
.leg-bloque .card-h .end{flex-wrap:wrap;justify-content:flex-end}
.leg-bloque .enm-real{overflow-wrap:anywhere}
/* El registro no parte fechas ni nombres: en angosto, la tabla se desplaza dentro de su marco */
.leg-registro td{padding-top:8px;padding-bottom:8px}
.leg-registro td:not(.leg-que){white-space:nowrap}
.leg-registro td.leg-que{min-width:260px}
.enm-fila .enm-mask{display:block;letter-spacing:.06em;color:var(--at-text-2)}
/* Lo que da permisos (paso 3): la tarjeta de la cuenta y sus botones, "Qué pasa" del egreso y de la vuelta, y la vuelta
   (el reingreso y anular) lado a lado; en angosto, una debajo de la otra */
#cuenta .card-h .end,#jefe .card-h .end{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
#cuenta .card-h .end form.inline{display:inline}
.leg-vinculo{margin-top:16px;padding-top:14px;border-top:1px solid var(--at-line)}
.leg-vinculo .avisos{margin:10px 0 14px}
.leg-quepasa{margin-bottom:6px}
.leg-quepasa .aviso p a{font-weight:600}
.leg-vuelta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px;margin-top:8px}
.leg-vuelta-form{display:grid;gap:12px;align-content:start}
.leg-vuelta-form + .leg-vuelta-form{padding-left:28px;border-left:1px solid var(--at-line)}
/* Fortalezas (Gallup): la lista numerada, la primera la más fuerte */
.fort-lista{margin:0;padding-left:22px;display:grid;gap:4px;font-size:14px;color:var(--at-text-2)}
.fort-lista li::marker{color:var(--at-muted);font-variant-numeric:tabular-nums}
/* Paso 4: las fortalezas y las opciones en la ficha (el rótulo con su "Editar" al lado, el renglón por tema y la lista de
   los 34 temas a mano), los catálogos (ABM: la lista y el formulario al lado; una sola columna por debajo de 1280 px) */
.leg-k-fila{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0 8px}
.leg-k-fila .leg-k{margin:0}
.leg-fort-form textarea{min-height:180px}
.leg-temas{margin:0 0 14px}
.leg-temas > summary{display:inline-flex;cursor:pointer}
.leg-temas .hint{margin:8px 0 0;line-height:1.6}
.leg-opciones{margin-top:12px}
.abm{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:16px;align-items:start}
.abm > .card + .card{margin-top:0}
.cat-form{display:grid;gap:14px}
.cat-form .card-h{margin-bottom:0}
.cat-tabla td{padding-top:8px;padding-bottom:8px}
.cat-nombre{display:block;font-weight:600;color:var(--at-text);overflow-wrap:anywhere}
.cat-desc{max-width:52ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat-uso,.cat-acciones{white-space:nowrap}
.cat-acciones{text-align:right}
.cat-acciones form.inline{display:inline}
.cat-tabla tr.is-editando > td{background:var(--at-zona-tint)}
.cat-tabla tr.is-editando .muted{color:var(--at-text-2)}   /* sobre el tinte, --at-muted no llega a AA (4,43:1) */


/* ============================================================
   5. COMPONENTES CLÁSICOS, CON LOS TOKENS
   El vocabulario de la vieja style.css que usan app/*.php, con los tokens. Mismos nombres
   y la misma estructura: las páginas no cambian ni una clase para verse en los dos temas.
   ============================================================ */

/* ── Tarjetas ── */
.card + .card{margin-top:16px}
.card-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;min-height:56px;padding:14px 24px;border-bottom:1px solid var(--at-line)}
.card-header h2{font-size:15px;font-weight:600}
.card-body{padding:22px 24px}
.subhead{font-size:15px;font-weight:600;margin-bottom:12px}
.divider{height:1px;background:var(--at-line-2);border:0;margin:18px 0}
.field-label,.section-label{margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--at-muted)}

/* Tarjeta plegable: <details class="card card-fold"><summary class="card-header">… <span class="fold-ic">▼</span> */
details.card-fold > summary{list-style:none;cursor:pointer}
details.card-fold > summary::-webkit-details-marker{display:none}
details.card-fold > summary:focus-visible{outline-offset:-2px}
details.card-fold > summary:hover h2{color:var(--at-zona-300)}
details.card-fold:not([open]) > summary.card-header{border-bottom-color:transparent}
.fold-ic{position:relative;display:inline-block;width:16px;height:16px;margin-left:6px;font-size:0;vertical-align:middle;color:var(--at-muted);transition:transform var(--at-t) var(--at-ease)}
.fold-ic::before{content:"";position:absolute;inset:0;margin:auto;width:7px;height:7px;border-right:1.75px solid currentColor;border-bottom:1.75px solid currentColor;transform:translateY(-2px) rotate(45deg)}
details.card-fold[open] .fold-ic{transform:rotate(180deg)}

/* ── Botones: 40 px (32 sm · 28 xs), radio 12. Primario = degradé de la zona. ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;
  border-radius:var(--at-r-sm);border:1px solid transparent;font:inherit;font-size:14px;font-weight:600;line-height:1.2;
  white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:box-shadow var(--at-t) var(--at-ease),background var(--at-t-fast),border-color var(--at-t-fast),color var(--at-t-fast);
}
.btn:hover{text-decoration:none}
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;box-shadow:none}
summary.btn{list-style:none}
summary.btn::-webkit-details-marker{display:none}
.btn-primary{background:linear-gradient(180deg,var(--at-zona-a),var(--at-zona-b));color:var(--at-on-zona)}
.btn-primary:hover{box-shadow:0 10px 26px -10px var(--at-zona-glow);color:var(--at-on-zona)}
.btn-secondary{background:var(--at-surface-3);border-color:var(--at-line-2);color:var(--at-text)}
.btn-secondary:hover{background:color-mix(in srgb,var(--at-surface-3) 92%,rgb(var(--at-tinta-rgb)));border-color:rgba(var(--at-tinta-rgb),.2)}
/* En el encabezado de la página, el secundario se apoya en el fondo: --at-sobre-fondo, un paso más claro que el fondo
   en los dos temas ("← Volver"; en claro, el surface-3 lo hundía) */
.page-head .btn-secondary{background:var(--at-sobre-fondo)}
.page-head .btn-secondary:hover{background:color-mix(in srgb,var(--at-sobre-fondo) 92%,rgb(var(--at-tinta-rgb)))}
.btn-ghost{background:var(--at-surface-2);border-color:var(--at-line-2);color:var(--at-text-2)}
.btn-ghost:hover{color:var(--at-text);background:var(--at-surface-3)}
.btn-zona{background:var(--at-zona-tint);color:var(--at-zona-300);border-color:var(--at-zona-line)}
.btn-zona:hover{background:var(--at-zona-tint-2)}
.btn-success{background:var(--at-ok-tint);color:var(--at-ok);border-color:var(--at-ok-line)}
.btn-success:hover{background:var(--at-ok-tint-2)}
.btn-danger{background:var(--at-bad-tint);color:var(--at-bad-text);border-color:var(--at-bad-line)}
.btn-danger:hover{background:var(--at-bad-tint-2)}
.btn-link{min-height:0;padding:0;border:0;background:none;color:var(--at-zona-300);font-weight:600}
.btn-link:hover{text-decoration:underline}
.btn-block{display:flex;width:100%}
.btn-sm{min-height:32px;padding:0 12px;font-size:13px;border-radius:10px}
.btn-xs{min-height:28px;padding:0 10px;font-size:12px;border-radius:var(--at-r-xs);gap:6px}
.btn-sm svg,.btn-xs svg{width:15px;height:15px}

/* ── Formularios: 40 px, radio 12, borde al 38 % (AA 1.4.11); foco = borde de la zona + anillo ── */
.field,.form-group{margin-bottom:16px}
.field > label,.form-group > label{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--at-text-2)}
.input,.form-control,
input:not([type]),input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],
input[type=tel],input[type=file],input[type=search],input[type=url],input[type=time],input[type=month],
input[type=week],input[type=datetime-local],select,textarea{
  width:100%;min-height:40px;padding:8px 13px;border:1px solid var(--at-line-field);border-radius:var(--at-r-sm);
  font:inherit;font-size:14px;line-height:1.4;color:var(--at-text);background:var(--at-surface-2);
  transition:border-color var(--at-t-fast) var(--at-ease),box-shadow var(--at-t-fast) var(--at-ease);
}
textarea,textarea.form-control{min-height:96px;resize:vertical;line-height:1.55}
select{cursor:pointer}
select[multiple],select[size]{min-height:0;padding:6px}
select option,select optgroup{background:var(--at-surface-2);color:var(--at-text)}
::placeholder{color:var(--at-hint);opacity:1}
.input:focus,.form-control:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--at-zona);box-shadow:0 0 0 3px color-mix(in srgb,var(--at-zona) 28%,transparent)}
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:var(--at-bad)}
input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
input[type=file]{padding:5px 8px;cursor:pointer}
input[type=file]::file-selector-button{margin-right:10px;min-height:28px;padding:0 12px;border-radius:var(--at-r-xs);border:1px solid var(--at-line-2);background:var(--at-surface-3);color:var(--at-text);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
input[type=file]::file-selector-button:hover{background:color-mix(in srgb,var(--at-surface-3) 92%,rgb(var(--at-tinta-rgb)))}
input[type=color]{width:52px;height:40px;padding:4px;border:1px solid var(--at-line-field);border-radius:10px;background:var(--at-surface-2);cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--at-zona)}
input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:none}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--at-focus);outline-offset:2px}
.form-grid,.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.check,.form-check{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--at-text-2);cursor:pointer}
.check input,.form-check input{width:auto;min-height:0}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px}

/* Diálogo nativo (<dialog>): vidrio, radio 22 */
dialog{max-width:min(640px,calc(100vw - 32px));padding:0;border:1px solid var(--at-line-2);border-radius:var(--at-r-lg);background:var(--at-surface-2);color:var(--at-text);box-shadow:var(--at-shadow-pop)}
dialog::backdrop{background:var(--at-overlay)}

/* ── Tablas: siempre dentro de .table-wrap (scroll horizontal propio, nunca el de la página) ── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Barras de scroll internas finas, con el pulgar en la tinta del tema, como las del menú (la nativa desentona) */
.table-wrap,.table-shell,.content pre,.content textarea{scrollbar-width:thin;scrollbar-color:rgba(var(--at-tinta-rgb),.2) transparent}
table,.table{width:100%;border-collapse:collapse;font-size:14px}
th{padding:12px 16px;text-align:left;font-size:12px;font-weight:600;color:var(--at-muted);white-space:nowrap}
thead th{border-bottom:1px solid var(--at-line)}
td{padding:12px 16px;border-top:1px solid var(--at-line);vertical-align:middle}
thead + tbody tr:first-child td{border-top:0}
tbody tr:hover{background:rgba(var(--at-tinta-rgb),.03)}
td.tnum,th.tnum{font-variant-numeric:tabular-nums}
.ta-right{text-align:right;white-space:nowrap}
.row-actions a,.row-actions .btn-link{margin-left:6px}
/* tablas dentro de una tarjeta, pegadas a los bordes */
.card > .table-wrap th:first-child,.card > .table-wrap td:first-child{padding-left:24px}
.card > .table-wrap th:last-child,.card > .table-wrap td:last-child{padding-right:24px}
tr.cli-inactivo > td:not(:last-child){opacity:var(--at-op-inactivo)}

/* ── Badges clásicos → tonos ── */
.badge-neutral,.badge-gray{color:var(--at-text-2);background:var(--at-neutral-tint);border-color:var(--at-line-2)}
.badge-success,.badge-green{color:var(--at-ok);background:var(--at-ok-tint);border-color:var(--at-ok-line)}
.badge-warn,.badge-orange{color:var(--at-warn);background:var(--at-warn-tint);border-color:var(--at-warn-line)}
.badge-danger,.badge-red{color:var(--at-bad-text);background:var(--at-bad-tint);border-color:var(--at-bad-line)}
.badge-info,.badge-brand,.badge-blue{color:var(--at-info);background:var(--at-info-tint-soft);border-color:var(--at-info-line)}
.badge-purple{color:var(--at-violet);background:var(--at-violet-tint);border-color:var(--at-violet-line)}
/* Chip chico del contenido (semana de un informe, fecha de auditoría) */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 11px;border-radius:var(--at-pill);background:var(--at-surface-2);border:1px solid var(--at-line-2);color:var(--at-text-2);font-size:13px;font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:6px}

/* ── KPIs clásicos (Resumen operativo): .stats-grid > .stat-card.{green,orange,red,blue} ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:16px;margin-bottom:22px}
.stat,.stat-card{display:block;position:relative;padding:18px 20px;border-radius:20px;background:var(--at-grad-card),var(--at-surface);border:1px solid var(--at-line);box-shadow:var(--at-shadow-card);color:inherit;transition:border-color var(--at-t) var(--at-ease),background-color var(--at-t) var(--at-ease)}
a.stat:hover,a.stat-card:hover{text-decoration:none;border-color:var(--at-line-2);background-color:var(--at-surface-2)}
.stat .ic,.stat-ic{width:40px;height:40px;margin-bottom:12px;border-radius:var(--at-r-sm);display:grid;place-items:center;background:var(--at-surface-3);color:var(--at-text-2)}
.stat .ic svg,.stat-ic svg{width:20px;height:20px;stroke-width:1.75}
.stat-value,.stat-card .value{margin-top:6px;font-family:var(--at-font-num);font-size:34px;font-weight:300;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--at-text)}
.stat-label,.stat-card .label{font-size:13px;font-weight:500;color:var(--at-muted)}
.stat-card .sub{margin-top:4px;font-size:12.5px;color:var(--at-hint)}
.stat-card.green .stat-ic{background:var(--at-ok-tint);color:var(--at-ok)}
.stat-card.orange .stat-ic{background:var(--at-warn-tint);color:var(--at-warn)}
.stat-card.red .stat-ic{background:var(--at-bad-tint);color:var(--at-bad-text)}
.stat-card.blue .stat-ic{background:var(--at-info-tint);color:var(--at-info)}
.trend{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:var(--at-pill);font-size:12.5px;font-weight:700;border:1px solid var(--at-line-2)}
.trend-up{color:var(--at-ok);background:var(--at-ok-tint);border-color:var(--at-ok-line)}
.trend-down{color:var(--at-bad-text);background:var(--at-bad-tint);border-color:var(--at-bad-line)}

/* ── Lista de definición (ficha) ── */
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px 24px}
.dl .k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--at-muted)}
.dl .v{margin-top:2px;font-size:15px;color:var(--at-text)}

/* ── Estado vacío: ícono en un círculo + texto muted (los emojis de .icon quedan dentro del círculo) ── */
.empty,.empty-state{padding:36px 16px;text-align:center;color:var(--at-muted);font-size:14px}
.empty:not(td){display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 16px}
.empty p{max-width:52ch;margin:0}
.empty :is(h1,h2){font-size:20px;font-weight:600}
.empty-state p{margin:0 auto;max-width:60ch}
.empty .ring,.empty-state .icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--at-surface-2);border:1px solid var(--at-line-2);color:var(--at-muted);font-size:24px;line-height:1}
.empty-state .icon{margin:0 auto 12px}
td.empty{padding:18px 16px;text-align:left}

/* ── Filtros y paginación ── */
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.filter-bar.card{padding:16px 18px;margin-bottom:16px}
.filter-bar .form-control{max-width:280px}
.filter-bar select.form-control{max-width:210px}
.pagination{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:18px}
.page-btn{display:inline-grid;place-items:center;min-width:36px;min-height:36px;padding:0 12px;border-radius:var(--at-pill);border:1px solid var(--at-line-2);background:var(--at-surface-2);color:var(--at-text-2);font-size:13px;font-weight:600;cursor:pointer;transition:background var(--at-t-fast),color var(--at-t-fast),border-color var(--at-t-fast)}
.page-btn:hover{background:var(--at-surface-3);color:var(--at-text);text-decoration:none}
.page-btn.active{background:var(--at-zona-tint);border-color:var(--at-zona-line);color:var(--at-zona-300)}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:16px}
.pager-info{font-size:13px;font-weight:600;color:var(--at-muted)}

/* ── Subpestañas (resumen, reuniones) → tabs en píldora ── */
.subtabs{display:flex;width:fit-content;max-width:100%;gap:4px;margin-bottom:20px;padding:4px;border-radius:var(--at-pill);background:var(--at-surface-2);border:1px solid var(--at-line);overflow-x:auto;scrollbar-width:none}
.subtab{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:var(--at-pill);font-size:13px;font-weight:600;color:var(--at-text-2);white-space:nowrap}
.subtab:hover{color:var(--at-text);background:rgba(var(--at-tinta-rgb),.04);text-decoration:none}
.subtab.active{background:var(--at-zona-tint);color:var(--at-text);box-shadow:inset 0 0 0 1px var(--at-zona-line)}
/* Sueltas en el fondo de la página (no en una tarjeta ni en un menú): --at-barra-fondo, un paso más claro que el fondo en
   los dos temas. La barra de anclas de la ficha (.ficha-nav) tiene su vidrio. */
.content > :is(.subtabs,.tabs):not(.ficha-nav){background:var(--at-barra-fondo)}
/* Activos de la zona Configuración: el filete --at-line-activo (ver .nav-link en la capa 2) */
/* Solo donde la zona más cercana es Configuración: un filtro o una pestaña de otra zona adentro (las columnas de Cartera y de
   Personas del Inicio) conserva su color */
[data-zona="config"] :is(.subtab.active,.tab[aria-selected="true"],.tab[aria-current="page"],.tab.is-active,.tab:has(> input:checked)):not([data-zona]:not([data-zona="config"]),[data-zona]:not([data-zona="config"]) *){box-shadow:inset 0 0 0 1px var(--at-line-activo)}
[data-zona="config"] :is(.page-btn.active,.fchip[aria-pressed="true"]):not([data-zona]:not([data-zona="config"]),[data-zona]:not([data-zona="config"]) *){border-color:var(--at-line-activo)}

/* ── Logos de clientes: siguen sobre baldosa blanca, con borde (en oscuro no se pierde; en claro la separa de la tarjeta) ── */
.client-logo{width:38px;height:38px;flex:0 0 38px;border-radius:10px;object-fit:contain;background:#fff;border:1px solid var(--at-line-2)}
.client-logo-lg{width:72px;height:72px;flex:0 0 72px;border-radius:14px;object-fit:contain;background:#fff;border:1px solid var(--at-line-2)}
.logo-fallback{display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--at-text-2);background:var(--at-surface-3);border:1px solid var(--at-line-2)}
/* Logos claros: baldosa oscura #2a2a35 con borde, en los dos temas (un #1f2430 se perdería contra la tarjeta oscura) */
.client-logo.logo-dark,.client-logo-lg.logo-dark{background:#2a2a35;border-color:var(--at-line-2)}
.client-cell{display:flex;align-items:center;gap:11px}
.client-head{display:flex;align-items:center;gap:16px}
.client-head > div{min-width:0}
.client-head .name{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--at-text);overflow-wrap:anywhere}

/* ── Línea de tiempo (bitácora) ── */
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--at-line-2)}
.tl-item{position:relative;padding:0 0 22px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-26px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--at-surface);border:3px solid var(--at-zona);box-shadow:0 0 0 3px var(--at-surface)}
.tl-item.t-riesgo::before{border-color:var(--at-bad)}
.tl-item.t-hito::before{border-color:var(--at-ok)}
.tl-item.t-cumplimiento::before{border-color:var(--at-warn)}
.tl-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.tl-fecha{font-size:12px;font-weight:600;color:var(--at-muted)}
.tl-titulo{margin:4px 0 2px;font-size:15px;font-weight:600}
.tl-desc{color:var(--at-text-2);white-space:pre-line}
.tl-meta{margin-top:5px;font-size:12px;color:var(--at-hint)}
.tl-actions{margin-top:8px;display:flex;gap:7px}
.tline-item{display:grid;grid-template-columns:82px 24px minmax(0,1fr);align-items:start;gap:8px;padding:8px 0;border-bottom:1px solid var(--at-line)}
.tline-item:last-child{border-bottom:0}
.tline-date{padding-top:2px;font-size:12px;font-weight:600;color:var(--at-muted);white-space:nowrap}
.tline-ico{font-size:15px;text-align:center;line-height:1.4}
.tline-txt{font-size:13.5px;line-height:1.5}

/* ── Informe semanal: bloques internos (= tarjeta "inset": surface-2, radio 16) ── */
.report-block{margin-bottom:14px;padding:16px 18px;border-radius:var(--at-r-md);background:var(--at-surface-2);border:1px solid var(--at-line)}
.report-block:last-child{margin-bottom:0}
.report-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.report-week{font-size:15px;font-weight:700}
.report-author{font-size:12.5px;color:var(--at-muted)}
.report-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 20px}
.report-text{margin-top:2px;font-size:14px;color:var(--at-text-2);white-space:pre-line}
details.report-block{padding:0;overflow:hidden;overflow:clip}
summary.report-head{padding:14px 18px;margin-bottom:0;cursor:pointer;list-style:none;user-select:none;border-radius:var(--at-r-md)}
summary.report-head::-webkit-details-marker{display:none}
summary.report-head::before{content:"";flex:0 0 auto;width:7px;height:7px;margin:0 4px 0 2px;border-right:1.75px solid var(--at-muted);border-bottom:1.75px solid var(--at-muted);transform:rotate(-45deg);transition:transform var(--at-t) var(--at-ease)}
details.report-block[open] > summary.report-head::before{transform:rotate(45deg)}
summary.report-head:hover{background:rgba(var(--at-tinta-rgb),.03)}
summary.report-head:focus-visible{outline-offset:-2px}
.report-body{padding:0 18px 16px}
.report-actions{display:flex;gap:7px;margin-top:12px;padding-top:12px;border-top:1px solid var(--at-line)}

/* Miniaturas de adjuntos de bitácora */
.bita-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.bita-thumb{display:block;width:120px;height:120px;overflow:hidden;border-radius:10px;border:1px solid var(--at-line-2);background:var(--at-surface-2)}
.bita-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--at-t) var(--at-ease)}
.bita-thumb:hover img{transform:scale(1.04)}
.bita-thumb-edit{display:inline-flex;flex-direction:column;align-items:center;gap:5px}
.bita-quitar{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--at-bad-text);cursor:pointer}

/* Resumen de reunión de Fathom (markdown renderizado) */
.reu-resumen .reu-h{margin:14px 0 4px;font-size:13.5px;font-weight:700;color:var(--at-text)}
.reu-resumen .reu-h:first-child{margin-top:0}
.reu-resumen ul.reu-ul{margin:4px 0 8px 1.1rem;padding:0}
.reu-resumen ul.reu-ul li{margin:3px 0}
.reu-resumen p{margin:6px 0}
.reu-resumen a{word-break:break-word}

/* Definición de "bueno para el negocio" (destacado, en el tono info) */
.def-good{margin-bottom:1.25rem;padding:18px 22px;border-radius:var(--at-r-lg);background:rgba(143,155,255,.08);border:1px solid var(--at-info-line);border-left:4px solid var(--at-info)}
.def-good .def-title{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--at-info)}
.def-content{font-size:15px;line-height:1.6;color:var(--at-text)}
.def-content p{margin:0 0 .6rem}
.def-content p:last-child{margin-bottom:0}
.def-content h2{margin:.7rem 0 .4rem;font-size:18px}
.def-content h3{margin:.7rem 0 .3rem;font-size:15px}
.def-content ul,.def-content ol{margin:.3rem 0 .7rem;padding-left:1.4rem}
.def-content li{margin:.15rem 0}
.def-content blockquote{margin:.5rem 0;padding:.2rem 0 .2rem .8rem;border-left:3px solid var(--at-info-line);color:var(--at-text-2)}
.def-content a,.content .def-content a:not([class]){color:var(--at-info);text-decoration:underline}

/* Nota del PM (violeta) */
.pm-nota > summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.pm-nota > summary::-webkit-details-marker{display:none}
.pm-nota[open] > summary{background:var(--at-violet-tint);border-color:var(--at-violet-line);color:var(--at-violet)}
.pm-nota-body{margin-top:8px;padding:11px 14px;border-radius:10px;background:rgba(167,139,250,.08);border-left:3px solid var(--at-violet);font-size:13.5px}
.pm-nota-body p{margin:.35em 0}

/* Barra de progreso (cursos) */
.progress{height:8px;min-width:120px;overflow:hidden;border-radius:var(--at-pill);background:rgba(var(--at-tinta-rgb),.08)}
.progress > span{display:block;height:100%;border-radius:var(--at-pill);background:var(--at-zona-vivo);box-shadow:inset 0 0 0 1px var(--at-canto-relleno);transition:width var(--at-t) var(--at-ease)}

/* Interruptor (activar/desactivar inline): de surface-3 al color de la zona */
.switch{position:relative;display:inline-block;width:38px;height:20px;vertical-align:middle}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .switch-sl{position:absolute;inset:0;border-radius:var(--at-pill);background:var(--at-surface-3);border:1px solid var(--at-line-field);cursor:pointer;transition:background var(--at-t) var(--at-ease),border-color var(--at-t) var(--at-ease)}
.switch .switch-sl::before{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--at-text-2);transition:transform var(--at-t) var(--at-ease),background var(--at-t) var(--at-ease)}
.switch input:checked + .switch-sl{background:var(--at-zona-vivo);border-color:var(--at-zona)}
.switch input:checked + .switch-sl::before{transform:translateX(18px);background:var(--at-on-zona)}
.switch input:focus-visible + .switch-sl{outline:2px solid var(--at-focus);outline-offset:2px}

/* Editor de contenido rico: barra de modo + código fuente (rich.js) */
.rich-mode-bar{display:flex;justify-content:flex-end;margin-bottom:6px}
.rich-html-toggle.active{background:var(--at-zona-tint);color:var(--at-zona-300);border-color:var(--at-zona-line)}
.rich-source{width:100%;min-height:320px;padding:12px 14px;border:1px solid var(--at-line-field);border-radius:10px;background:var(--at-bg);color:var(--at-text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;white-space:pre;resize:vertical}


/* ============================================================
   6. CONTENIDO RICO
   - Quill con los tokens (informes, bitácora, notas, ficha): barra en surface-2, trazos en text-2.
   - Documentos y lecciones en una "hoja" clara (#f7f7fa con #1b1d24, 15,7:1), tanto al leer
     (.rich-doc) como al editar (#doc_editor, #lec_editor): sanitizeHtmlRico() conserva los
     style del contenido y un texto negro pegado desde Docs sería invisible sobre el oscuro.
     La hoja es la misma en los dos temas.
   Quill carga su hoja después de esta (via $headExtra): los selectores llevan .content
   delante para ganarle en especificidad sin !important. La excepción es el fondo del
   contenedor, que las páginas fijan inline (background:#fff).
   ============================================================ */
.content .ql-toolbar.ql-snow{padding:6px 8px;border:1px solid var(--at-line-field);border-bottom-color:var(--at-line-2);border-radius:var(--at-r-sm) var(--at-r-sm) 0 0;background:var(--at-surface-2);font-family:var(--at-font)}
.content .ql-container.ql-snow{border-color:var(--at-line-field);border-radius:0 0 var(--at-r-sm) var(--at-r-sm);background:var(--at-surface-2)!important;color:var(--at-text);font-family:var(--at-font);font-size:14px}
.content .ql-container.ql-snow:focus-within{border-color:var(--at-zona);box-shadow:0 0 0 3px color-mix(in srgb,var(--at-zona) 28%,transparent)}
.content .ql-editor.ql-blank::before{color:var(--at-hint)}
.content .ql-snow .ql-editor a{color:var(--at-zona-300)}
.content .ql-snow .ql-editor code,.content .ql-snow .ql-editor .ql-code-block-container{background:var(--at-surface-3);color:var(--at-text)}
.content .ql-snow .ql-editor blockquote{border-left-color:var(--at-line-2);color:var(--at-text-2)}
.content .ql-snow :is(.ql-stroke,.ql-stroke-miter){stroke:var(--at-text-2)}
.content .ql-snow :is(.ql-fill,.ql-stroke.ql-fill){fill:var(--at-text-2)}
.content .ql-snow .ql-picker{color:var(--at-text-2)}
.content .ql-snow .ql-picker-options{background:var(--at-surface-2);box-shadow:var(--at-shadow-pop)}
.content .ql-toolbar.ql-snow .ql-picker.ql-expanded :is(.ql-picker-label,.ql-picker-options){border-color:var(--at-line-2)}
.content .ql-snow.ql-toolbar :is(button:hover,button:focus,button.ql-active,.ql-picker-label:hover,.ql-picker-label.ql-active,.ql-picker-item:hover,.ql-picker-item.ql-selected){color:var(--at-zona-300)}
.content .ql-snow.ql-toolbar :is(button:hover,button:focus,button.ql-active,.ql-picker-label:hover,.ql-picker-label.ql-active,.ql-picker-item:hover,.ql-picker-item.ql-selected) :is(.ql-stroke,.ql-stroke-miter){stroke:var(--at-zona-300)}
.content .ql-snow.ql-toolbar :is(button:hover,button:focus,button.ql-active,.ql-picker-label:hover,.ql-picker-label.ql-active,.ql-picker-item:hover,.ql-picker-item.ql-selected) :is(.ql-fill,.ql-stroke.ql-fill){fill:var(--at-zona-300)}
.content .ql-toolbar.ql-snow :is(button,.ql-picker-label):focus-visible{outline:2px solid var(--at-focus);outline-offset:1px;border-radius:6px}
.content .ql-snow .ql-tooltip{background:var(--at-surface-2);border:1px solid var(--at-line-2);border-radius:var(--at-r-sm);box-shadow:var(--at-shadow-pop);color:var(--at-text-2)}
.content .ql-snow .ql-tooltip input[type=text]{min-height:0;height:30px;padding:4px 8px;border-color:var(--at-line-field);border-radius:var(--at-r-xs)}
.content .ql-snow .ql-tooltip a{color:var(--at-zona-300)}

/* La hoja clara: redefine los tokens adentro, así tablas, links, bordes y los tonos de estado (que
   usa la capa 8.3 con los estilos inline) se ajustan solos. Los tonos son los de la vieja clásica, todos
   ≥ 4,9:1 sobre blanco. También la usa la vista previa de los correos (capa 8.4). */
.rich-doc,.rich-doc--paper,
.content #doc_editor.ql-container.ql-snow,.content #lec_editor.ql-container.ql-snow,
.content [style*="font-family:Arial,Helvetica,sans-serif" i]{
  color-scheme:light;
  --at-text:#1b1d24; --at-text-2:#344054; --at-muted:#5b6474; --at-hint:#667085;
  --at-line:#e3e5ec; --at-line-2:#d5d8e0; --at-surface-2:#eceef3; --at-surface-3:#e4e7ee;
  --at-brand-300:#2034e8; --at-zona-300:#2034e8;
  --at-info:#175cd3; --at-info-tint:#eef1fe; --at-info-line:#c9d2fb;
  --at-ok:#15803d; --at-ok-tint:#e8f6ee; --at-ok-line:#bfe5cd;
  --at-warn:#a16207; --at-warn-tint:#fdf6dd; --at-warn-line:#eede9d;
  --at-bad:#dc2626; --at-bad-text:#b91c1c; --at-bad-tint:#fdecec; --at-bad-line:#f5bcbc;
  --at-violet:#6d28d9; --at-violet-tint:#f3effe; --at-violet-line:#d9ccfb;
  /* foco: el teal del oscuro da 1,7:1 sobre la hoja; el de impresión (teal-700) da 5,2:1 */
  --at-focus:#0f766e;
  color:#1b1d24;
}
/* Con una hoja clara en la página, la barra de vidrio y los desplegables pasan casi a opacos, con la
   superficie del tema. En oscuro, al .72/.9 dejan ver el blanco de abajo y las migas (muted) bajan a
   ≈2,5:1; al .96 las migas dan 5,5:1 incluso sobre blanco puro, y el desplegable, opaco, queda igual
   que sobre el fondo (el blur no ayuda: el blanco borroso sigue siendo blanco). En claro casi no se nota. */
body:has(.rich-doc,.rich-doc--paper,#doc_editor,#lec_editor,.content [style*="font-family:Arial,Helvetica,sans-serif" i]) .topbar::after{background:color-mix(in srgb,var(--at-surface) 96%,transparent)}
body:has(.rich-doc,.rich-doc--paper,#doc_editor,#lec_editor,.content [style*="font-family:Arial,Helvetica,sans-serif" i]) .pop{background:var(--at-surface-pop)}
.content #doc_editor.ql-container.ql-snow,.content #lec_editor.ql-container.ql-snow{background:#f7f7fa!important}
.content :is(#doc_editor,#lec_editor) .ql-editor.ql-blank::before{color:#6b7280}
.content :is(#doc_editor,#lec_editor) .ql-editor a{color:#2034e8}
.rich-doc,.rich-doc--paper{max-width:900px;padding:28px 32px;border-radius:var(--at-r-md);background:#f7f7fa;box-shadow:var(--at-hoja-sombra);font-size:15px;line-height:1.65;overflow-x:auto}
.rich-doc a,.content .rich-doc a:not([class]){color:#2034e8;text-decoration:underline}
.rich-doc img{max-width:100%;height:auto;border-radius:8px}
.rich-doc iframe,.rich-doc .ql-video{width:100%;max-width:720px;aspect-ratio:16/9;border:0;border-radius:10px}
.rich-doc .ql-align-center{text-align:center}
.rich-doc .ql-align-right{text-align:right}
.rich-doc .ql-align-justify{text-align:justify}
.rich-doc h1{font-size:1.5em}
.rich-doc h2{font-size:1.3em}
.rich-doc h3{font-size:1.15em}
.rich-doc :is(h1,h2,h3,h4){margin:.9em 0 .4em;font-weight:700;color:#1b1d24}
.rich-doc > :first-child{margin-top:0}
.rich-doc blockquote{margin:.6em 0;padding:.2em .9em;border-left:3px solid var(--at-line-2);color:var(--at-text-2)}
.rich-doc table{width:100%;margin:.8em 0;border-collapse:collapse;font-size:13.5px}
.rich-doc th,.rich-doc td{height:auto;padding:7px 10px;border:1px solid var(--at-line-2);text-align:left;vertical-align:top;white-space:normal;color:inherit}
.rich-doc th{background:#eceef3;font-size:inherit;font-weight:700;color:#1b1d24}
.rich-doc thead th{background:#e4e8fb}
.rich-doc tbody tr:hover{background:transparent}
.rich-doc caption{caption-side:top;padding:0 0 .4em;text-align:left;font-weight:700;color:var(--at-text-2)}
.rich-doc td > :first-child,.rich-doc th > :first-child{margin-top:0}
.rich-doc hr{margin:1em 0;border:0;border-top:1px solid var(--at-line-2)}
.rich-doc code{background:#e4e7ee;color:#1b1d24}
.rich-doc pre{background:#eceef3;border-color:#d5d8e0;color:#1b1d24}


/* ============================================================
   7. PÁGINAS SUELTAS: login y acceso denegado (403)
   Autocontenidas (tokens.css + ui.css, sin shell). El 403 puede reusar
   .login-wrap > .login-card con un .empty adentro.
   ============================================================ */
.login-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.login-card{width:100%;max-width:400px;padding:34px 32px;border-radius:var(--at-r-xl);background:var(--at-grad-card),var(--at-surface);border:1px solid var(--at-line);box-shadow:var(--at-shadow-card)}
.login-card.is-wide{max-width:520px}
.login-logo{margin-bottom:24px;text-align:center}
.brand-logo{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--at-text)}
.brand-logo:hover{text-decoration:none}
.brand-ico{height:28px;width:auto;display:block;flex:0 0 auto}
.brand-tm{margin-left:1px;font-size:.5em;font-weight:700;vertical-align:super;opacity:var(--at-op-tm)}
.login-logo .brand-logo{font-size:26px}
.login-logo .brand-ico,.login-logo .iso{width:auto;height:40px}
.login-logo p{margin:14px 0 0;font-size:14px;color:var(--at-muted)}
/* Logo de partner (co-branding): sobre baldosa clara, como los logos de clientes */
.login-partner{display:flex;justify-content:center;margin:6px 0 18px;padding:14px;border-radius:var(--at-r-md);background:#fff;border:1px solid var(--at-line-2)}
.login-partner img{height:44px;max-width:82%}
.login-sep{display:flex;align-items:center;gap:10px;margin:14px 0 8px;font-size:12.5px;color:var(--at-muted)}
.login-sep::before,.login-sep::after{content:"";flex:1;height:1px;background:var(--at-line-2)}
.entrada-opciones{display:grid;gap:10px}
.entrada-opciones .btn{min-height:48px;font-size:15px}
.login-otro{margin:16px 0 0;text-align:center;font-size:13px;color:var(--at-muted)}
/* Botón de Google: conserva los colores de Google (guía de marca); el filete, del tema (--at-google-borde) */
.btn-google{gap:10px;background:#fff;color:#3c4043;border-color:var(--at-google-borde);font-weight:600}
.btn-google:hover{background:#f8f9fa;color:#3c4043}
.login-card .btn-primary.btn-block,.login-card .btn-google{min-height:44px;font-size:15px}
.login-card .empty{padding:8px 0 0}
.login-card .empty h1{font-size:22px;font-weight:600}


/* ============================================================
   8. PUENTE (temporal, hasta la tokenización P-A / el re-skin de F6)
   ============================================================ */

/* 8.1 · Variables de la vieja style.css (la hoja de la clásica) que usan las páginas (inline y en
   sus <style>), redefinidas con los tokens. Relevadas en app/*.php + style.css: --bad --bad-bg
   --bad-line --bg --brand --brand-50 --brand-100 --brand-700 --card --danger --ink --ink-2 --line
   --line-2 --muted --ok --pill --radius-sm --surface-2 --text (+ las que definía style.css aunque no
   se usaran afuera, y --ink-1, que solo se usaba con valor de respaldo). --c y --ra-st son locales
   de dashboard.php. Van en :root (el elemento del data-tema: así toman los tokens del tema) y en la
   hoja clara, para que adentro tomen los valores claros. */
:root,.rich-doc,.rich-doc--paper,.content #doc_editor.ql-container,.content #lec_editor.ql-container,
.content [style*="font-family:Arial,Helvetica,sans-serif" i]{
  --brand:var(--at-brand-300); --brand-600:var(--at-brand-300); --brand-700:var(--at-brand-300);
  --brand-50:var(--at-info-tint); --brand-100:var(--at-info-line);
  --ink:var(--at-text); --ink-1:var(--at-text); --ink-2:var(--at-text-2); --text:var(--at-text);
  --muted:var(--at-muted); --hint:var(--at-hint);
  --line:var(--at-line-2); --line-2:var(--at-line);
  --bg:var(--at-bg); --card:var(--at-surface); --surface-2:var(--at-surface-2);
  --radius:var(--at-r-lg); --radius-sm:var(--at-r-sm); --pill:var(--at-pill);
  --shadow-sm:var(--at-shadow-card); --shadow:var(--at-shadow-pop);
  --ok:var(--at-ok); --ok-bg:var(--at-ok-tint); --ok-line:var(--at-ok-line);
  --warn:var(--at-warn); --warn-bg:var(--at-warn-tint); --warn-line:var(--at-warn-line);
  --bad:var(--at-bad-text); --bad-bg:var(--at-bad-tint); --bad-line:var(--at-bad-line);
  --info:var(--at-info); --info-bg:var(--at-info-tint); --info-line:var(--at-info-line);
  --danger:var(--at-bad-text); --success:var(--at-ok);
}
/* Tramo 3 (06/10): los acentos de las páginas viejas (var(--brand): links, "Abrir →", filetes) toman el color de la zona,
   no el violeta de la marca; y --brand-50 (fondos de avisos y bloques) va en un tinte suave: el azul de --at-info-tint, al
   28 %, en una superficie grande se veía como un bloque azul marino. Por zona, porque una variable se resuelve donde se
   declara (en :root quedaría el color de la zona por defecto). */
[data-zona]{--brand:var(--at-zona-300); --brand-600:var(--at-zona-300); --brand-700:var(--at-zona-300); --brand-50:var(--at-info-tint-soft)}

/* 8.2 · <style> propios de páginas con colores claros fijos. Van con .content delante: esos
   bloques se imprimen después de esta hoja y, a igual especificidad, ganarían. */
/* (dashboard.php: desde Pre-A, el Inicio de esta hoja es el nuevo; sus .ef-*, .ra-card y .rc-* clásicos ya no se dibujan acá) */
/* celulas.php */
.content .cel-list .cel-mem,.content .cel-mem{background:var(--at-info-tint-soft);border-color:var(--at-info-line);color:var(--at-text)}
.content .cel-ref-star{color:var(--at-warn)}
/* objetivos_masivos.php · barra fija de guardado */
.content .card .obj-bar,.content .obj-bar{background:var(--at-surface);border-top-color:var(--at-line-2)}
/* resumen.php · selector de semanas de "Salud de cartera" */
.content .btn.js-salud-wk.active{background:var(--at-zona-tint);color:var(--at-zona-300);border-color:var(--at-zona-line)}

/* 8.3 · Red de seguridad para estilos inline con colores claros fijos (675 style= y ~170 hex en
   las páginas; se tokenizan en P-A). Sin esto, un fondo claro inline con texto heredado
   (claro) quedaría ilegible en oscuro. Mapea cada tinte claro al tinte del tema y los textos que
   no llegan a AA a su tono (los tokens hacen el resto en los dos temas). Solo dentro del contenido. */
.content :is([style*="background:#fdecec" i],[style*="background:#fef5f5" i]){background:var(--at-bad-tint)!important}
.content :is([style*="background:#e8f6ee" i],[style*="background:#f3faf6" i],[style*="background:#f4fbf6" i]){background:var(--at-ok-tint)!important}
.content [style*="background:#fdf6dd" i]{background:var(--at-warn-tint)!important}
.content :is([style*="background:#eef1fe" i],[style*="background:#f0f7fc" i]){background:var(--at-info-tint-soft)!important}
.content :is([style*="background:#f6f7f9" i],[style*="background:#f2f4f7" i],[style*="background:#f4f5f8" i],[style*="background:#fafbfc" i],[style*="background:#fafbff" i],[style*="background:#fbfaff" i],[style*="background:#eef0f4" i]){background:var(--at-surface-2)!important}
.content [style*="#f5bcbc" i]{border-color:var(--at-bad-line)!important}
.content [style*="#bfe5cd" i]{border-color:var(--at-ok-line)!important}
.content [style*="#eede9d" i]{border-color:var(--at-warn-line)!important}
.content [style*="#c9d2fb" i]{border-color:var(--at-info-line)!important}
.content :is([style*="#e4e7ec" i],[style*="#e2e5ea" i],[style*="#cbd2dc" i]){border-color:var(--at-line-2)!important}
.content [style*="border-left:4px solid #7c3aed" i]{border-left-color:var(--at-violet)!important}
.content [style*="border-left:3px solid #2b8fd6" i]{border-left-color:var(--at-info)!important}
.content :is([style*="color:#dc2626" i],[style*="color:#c00" i]){color:var(--at-bad-text)!important}
.content [style*="color:#a16207" i]{color:var(--at-warn)!important}
.content [style*="color:#16a34a" i]{color:var(--at-ok)!important}
.content :is([style*="color:#2b8fd6" i],[style*="color:#2034e8" i]){color:var(--at-info)!important}
.content :is([style*="color:#475467" i],[style*="color:#4b5563" i]){color:var(--at-text-2)!important}
.content .badge > span[style*="display:block" i]{font-size:11px!important}
/* Grillas inline fijas ("1fr 360px", "repeat(3,1fr)"…): en el teléfono, una sola columna */
@media (max-width:760px){
  .content [style*="grid-template-columns" i]{grid-template-columns:minmax(0,1fr)!important}
}
/* Tarjetas lado a lado en esas grillas (listado + formulario a la derecha): el .card + .card del
   vocabulario clásico bajaba 16 px la segunda. La grilla ya trae su gap (todas lo tienen). */
.content [style*="display:grid" i] > .card + .card{margin-top:0}
/* Tramo 3 (06/10): listado + formulario ("1fr 360px", "1fr 380px", "1fr 460px"): por debajo de 1600 px, al lado del menú, la
   tabla no entra (se cortaban el estado y las acciones de usuarios, analistas, estados…). Se apilan, con el formulario primero
   (editar una fila lo llena: queda a la vista) cuando la primera columna es un listado. */
@media (max-width:1599px){
  .content :is([style*="grid-template-columns:1fr 3" i],[style*="grid-template-columns:1fr 4" i]){grid-template-columns:minmax(0,1fr)!important}
  .content :is([style*="grid-template-columns:1fr 3" i],[style*="grid-template-columns:1fr 4" i]):has(> :first-child .table-wrap) > :last-child{order:-1}
}
/* Las tablas de 7 columnas o más (usuarios: nombre, email, rol, analista, estado, login y tres botones) piden un poco menos
   de aire entre columnas para entrar al lado del menú (en el teléfono no: el listado de Clientes son tarjetas). */
@media (min-width:761px) and (max-width:1599px){
  .content table:not(.cli-tabla):has(th:nth-child(7)) :is(th,td){padding-left:12px;padding-right:12px}
}
/* Y si igual no entran (estados: 9 columnas, nombres largos y tres botones), por encima del teléfono ceden primero los
   botones de la fila (pueden pasar a dos renglones; cada botón suma 2 px arriba y abajo) y los badges largos (de más de
   220 px, en dos renglones aunque entren). En el teléfono la fila entera scrollea, como siempre. Los estados del listado de
   Clientes se recortan con su título. */
@media (min-width:761px){
  .content td[style*="white-space:nowrap" i]:has(.btn){white-space:normal!important}
  .content td[style*="white-space:nowrap" i]:has(.btn) .btn{margin-block:2px}
  .content td .badge:not(.cli-tabla *){max-width:220px;white-space:normal}
}
/* Las ayudas (<small>) de un campo, debajo del campo y no pegadas a su costado */
.content :is(.form-group,.field) > small{display:block;margin-top:6px}
/* informe_form.php: "Etapa: …" junto al estado, con el tamaño de los rótulos */
.content .form-group > label + div[style^="margin-bottom:6px"]{font-size:13px;font-weight:600;color:var(--at-text-2)}
/* cliente_form.php: el motivo de la baja baja de línea antes de quedar en 100 px (el teléfono) */
.content input[name="motivo_baja"]{flex:1 1 180px!important}
/* leccion_ver.php: una lección sin texto no abre la hoja clara solo para decirlo */
.content .rich-doc:has(> span:only-child[style*="color:var(--muted)"]){max-width:none;margin-inline:0;padding:0;background:transparent;box-shadow:none;color:var(--at-muted)}
/* Los emojis de las páginas viejas (📚 🎬 📎 ✅ 🔄…), en su forma de texto: monocromos y del color del texto, como un ícono,
   donde la fuente la tiene. Los de los estados vacíos (.empty-state .icon) se cambian por un ícono de línea. */
.content{font-variant-emoji:text}
.content :is(.rich-doc,.ql-editor){font-variant-emoji:normal}
.content .empty-state .icon{font-size:0}
.content .empty-state .icon::before{
  content:"";width:24px;height:24px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (forced-colors:active){.content .empty-state .icon::before{background:CanvasText}}
/* La hoja clara de un documento o una lección, centrada en su tarjeta */
.content .card-body > .rich-doc{margin-inline:auto}
/* Las tablas de las páginas viejas: una sombra en el borde que tiene más tabla, para que se note que se desplazan (el fondo
   "local" tapa la sombra cuando se llega al borde). */
.content .table-wrap{
  background:
    linear-gradient(to right,var(--at-surface),transparent) left/24px 100% no-repeat local,
    linear-gradient(to left,var(--at-surface),transparent) right/24px 100% no-repeat local,
    linear-gradient(to right,rgba(var(--at-tinta-rgb),.10),transparent) left/12px 100% no-repeat scroll,
    linear-gradient(to left,rgba(var(--at-tinta-rgb),.10),transparent) right/12px 100% no-repeat scroll;
}
/* Las tapas de esas sombras son del color de la superficie: la tarjeta que tiene una tabla va sin el brillo de arriba
   (--at-grad-card), si no quedaban dos franjas más oscuras en sus bordes. */
.content .card:has(.table-wrap){background:var(--at-surface)}
/* configuracion.php: el hover de un ítem, visible también en la zona Configuración (ahí --brand es el color del texto) */
.content .cfg-item:hover .cfg-t{text-decoration:underline;text-underline-offset:3px}

/* 8.4 · Vista previa de los correos (notificaciones_admin.php): notifLayout() arma HTML de mail
   con estilos inline pensados para fondo blanco (#1f2430 sobre nada). Se muestra como lo vería un
   cliente de correo: la pieza sobre blanco, dentro de un marco del tema. Se engancha por la fuente
   del contenedor del mail, que no usa ninguna otra pieza de la app. */
.content div:has(> [style*="font-family:Arial,Helvetica,sans-serif" i]){padding:16px;background:var(--at-surface-2);overflow:auto!important}
.content [style*="font-family:Arial,Helvetica,sans-serif" i]{background:#fff;border-radius:12px;box-shadow:var(--at-hoja-sombra)}
.content [style*="font-family:Arial,Helvetica,sans-serif" i] :is(th,td){height:auto}
.content [style*="font-family:Arial,Helvetica,sans-serif" i] tbody tr:hover{background:transparent}


/* ============================================================
   9. UTILIDADES
   ============================================================ */
.sr,.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--at-muted);font-size:14px}
.hint{color:var(--at-hint);font-size:12.5px}
.nowrap{white-space:nowrap}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
.col > .card + .card{margin-top:0}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}


/* ============================================================
   10. RESPONSIVE
   Drawer por debajo de 1024 px; sin scroll horizontal a 360 px.
   ============================================================ */
/* Por debajo de 1600, con el chip de informes al lado del de la semana, las migas largas ("Cartera › Clientes › Editar
   entrada de bitácora") quedaban cortadas: el buscador cede un poco de ancho (sigue entrando su texto de ayuda). */
@media (max-width:1599px){
  .search{width:clamp(200px,20vw,360px)}
}
@media (max-width:1279px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Entre 1024 y 1279 la barra comparte el ancho con el menú: el buscador se achica y las migas
     dejan la zona (ya la dice el eyebrow del encabezado) para que la página actual entre entera. */
  .search{width:clamp(160px,18vw,360px)}
  .crumbs{gap:6px}
  .crumbs > span.crumb:first-child,.crumbs > span.crumb:first-child + .sep{display:none}
  .abm{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1023px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;left:12px;top:calc(12px + env(safe-area-inset-top,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));height:auto;width:min(300px,calc(100vw - 48px));z-index:60;transform:translateX(calc(-100% - 24px));visibility:hidden;transition:transform var(--at-t) var(--at-ease),visibility 0s linear var(--at-t)}
  .app.is-drawer .sidebar{transform:none;visibility:visible;transition:transform var(--at-t) var(--at-ease),visibility 0s}
  .app.is-drawer .scrim{display:block;position:fixed;inset:0;z-index:55;background:var(--at-overlay)}
  .sb-collapse{display:none}
  .sb-close{display:grid}
  .hamb{display:grid}
  .topbar .chip.is-semana{display:none}
  .inicio{grid-template-columns:minmax(0,1fr)}
  .ml-cols{grid-template-columns:minmax(0,1fr)}
  .ficha{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .search,.topbar .chip.is-informes{display:none}
  .grid3{grid-template-columns:minmax(0,1fr)}
  .topbar{padding-left:10px}
  .form-grid,.form-row,.report-fields{grid-template-columns:minmax(0,1fr)}
  .card-header{padding:12px 16px}
  .card-body{padding:16px}
  .card:has(> .card-h){padding:16px}
  .card > .table-wrap th:first-child,.card > .table-wrap td:first-child{padding-left:16px}
  .card > .table-wrap th:last-child,.card > .table-wrap td:last-child{padding-right:16px}
  th,td{padding-left:12px;padding-right:12px}
  /* Badges largos ("Última auditoría: … (hace N días)", "no es el analista asignado (…)"): en el
     teléfono parten línea en lugar de salirse de la tarjeta (que los recortaría). En tablas no:
     ahí la fila entera scrollea. */
  .content .badge{max-width:100%;white-space:normal}
  .content td .badge{white-space:nowrap}
  .rich-doc,.rich-doc--paper{padding:18px 16px}
  .def-good{padding:16px}
  .filter-bar .form-control,.filter-bar select.form-control{max-width:none}
  .ml-cab-top{align-items:flex-start}
  .ml-cab-top .av-96{--s:72px}
  .pcard,.ml-cab,.pcard--ficha{padding:16px}
  .campo-buscar{max-width:none}
  /* Legajos: las columnas opcionales se ocultan (la tabla conserva su semántica: no pasa a bloques) */
  .col-opt{display:none}
  .leg-desde{margin-left:0}
  .leg-bloque .card-h .end .nivel{white-space:normal}
  .leg-vuelta{grid-template-columns:minmax(0,1fr)}
  .leg-vuelta-form + .leg-vuelta-form{padding-left:0;padding-top:16px;border-left:0;border-top:1px solid var(--at-line)}
  /* Cartera (Pre-A): el buscador pasa a un botón (lleva a buscar.php); los filtros, en columna; Clientes, una tarjeta por
     cuenta (cada dato con su rótulo, que sale del data-l de la celda: la tabla conserva su semántica) */
  .search-movil{display:grid}
  .f-res{padding-left:0}
  .fila-t{flex-basis:100%}
  .cli-filtros select{flex:1 1 150px;max-width:none}
  .cli-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cli-tabla,.cli-tabla tbody,.cli-tabla tr{display:block;width:100%}
  .cli-tabla tr{padding:12px 14px;border-top:1px solid var(--at-line)}
  .cli-tabla tbody tr:first-child{border-top:0}
  .cli-tabla td{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:8px;height:auto;padding:4px 0;border:0}
  .cli-tabla td[data-l]::before{content:attr(data-l);font-size:12px;font-weight:600;color:var(--at-muted)}
  /* lo que sigue al primer valor (el plazo del setup bajo la etapa, "Sin cargar" junto a la fecha) va en la columna del
     valor, debajo, y no en la del rótulo */
  .cli-tabla td[data-l] > *{grid-column:2}
  .cli-tabla td.cli-c{display:block;padding-bottom:8px}
  .cli-tabla td.cli-acciones{display:flex;justify-content:flex-start;padding-top:8px;text-align:left}
  tr.cli-inactivo > td:not(:last-child){opacity:calc(var(--at-op-inactivo) + .1)}
  .ficha-nav{top:calc(22px + var(--at-topbar-h) + env(safe-area-inset-top,0px))}
}
@media (max-width:640px){
  .app{padding:12px 16px}
  /* En el teléfono, la barra sin vidrio y casi opaca, como siempre. (Hasta el 08/10 era obligatorio: con el blur en la
     barra misma, la hoja de abajo, .pop fija, quedaba anclada a la barra; desde que el vidrio vive en ::after, ya no.) */
  .topbar::after{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--at-surface) 97%,transparent)}
  .pop,.avatar-btn + .pop{position:fixed;left:16px;right:16px;top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:auto;max-height:78dvh;overflow:auto}
  /* Migas: solo la página actual (la zona ya está en el eyebrow del encabezado) */
  .crumbs .crumb,.crumbs .sep{display:none}
  .page-head h1{font-size:23px}
  .page-head .toolbar,.page-head .actions{margin-left:0}
  .kpis{grid-template-columns:minmax(0,1fr)}
  .kpi-v{font-size:30px}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat-card{padding:14px}
  .stat-value,.stat-card .value{font-size:26px}
  .login-card{padding:28px 20px}
  /* La ficha: los KPIs de la cuenta, de a dos (son cuatro datos cortos) */
  .ficha-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ficha-kpis .kpi{min-height:112px;padding:14px}
  .ficha-kpis .kpi-txt{font-size:17px}
  .page-head.has-lead .client-logo-lg{width:56px;height:56px;flex-basis:56px}
}


/* ============================================================
   11. MOVIMIENTO REDUCIDO: sin transiciones, pulsos ni brillos animados
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}


/* ============================================================
   12. IMPRESIÓN (en claro, con cualquier tema: los tokens cambian en tokens.css)
   ============================================================ */
@media print{
  body{background:#fff;background-image:none;color:var(--at-text)}
  .sidebar,.topbar,.scrim,.side-card,.skip-link,.pop,.search-hint,
  .page-head .toolbar,.page-head .actions,.pagination,.pager,.no-print{display:none!important}
  .app{display:block;padding:0}
  .main{display:block;max-width:none}
  .content{max-width:none;padding:0}
  .card,.kpi,.stat,.stat-card{box-shadow:none;break-inside:avoid}
  .table-wrap,.table-shell,.rich-doc{overflow:visible}
  .content a:not([class]),.content td a:not([class]){color:inherit;text-decoration:underline}
  .btn-primary{background:none;color:var(--at-text);border-color:var(--at-line-2)}
  .badge-dyn{color:color-mix(in srgb,var(--c) 75%,#000);background:color-mix(in srgb,var(--c) 10%,#fff);border-color:color-mix(in srgb,var(--c) 40%,#fff)}
  .rich-doc,.rich-doc--paper{max-width:none;padding:0;background:none}
  .client-logo.logo-dark,.client-logo-lg.logo-dark{background:#2a2a35}
  /* Personas: lo enmascarado se imprime enmascarado (aunque se haya tocado "Mostrar"); sin botones ni formularios */
  .enm-real{display:none!important}
  .enm-mask{display:inline!important}
  .enm-btn,.ml-tabs,.ml-foto,.ml-form,.ml-contacto .end,.card-h .end .btn,.dir-barra{display:none!important}
  /* Legajos (4b): lo revelado se imprime enmascarado (también la emergencia), sin botones, filtros ni formularios */
  .enm-fila{display:flex!important}
  .enm-fila-real,.card-h .end form,.leg-doc{display:none!important}
  .cat-form,.cat-acciones,.leg-k-fila .btn{display:none!important}
  /* Cartera (Pre-A): sin la barra de anclas, los filtros, los formularios ni las acciones */
  .ficha-nav,.ficha-buscar,.ficha-alta,.report-actions,.pm-nota,.deleg-enlace,.ficha-riesgo,.cli-filtros,.search-res,.filtros{display:none!important}
}


/* ── Tabla de métricas (2026-10): docs/metricas.md ── */
/* El kit de las páginas de métricas (la tabla del cliente, la carga de un período, la configuración, los objetivos, el
   catálogo y la importación) y de su tira en la ficha, el informe y el Inicio. Prefijo mt-; el comportamiento, en
   assets/metricas.js (por atributos data-).
   - Solo tokens: nada cambia por tema acá. Los velos, en rgba(var(--at-tinta-rgb),α) o color-mix.
   - La tabla es la receta de "tabla ancha con primera columna fija": el contenedor (.mt-wrap) scrollea en los dos ejes y
     tiene alto propio (así el encabezado queda fijo adentro); la primera columna y el encabezado son sticky con un fondo
     OPACO que coincide con el del contenedor (--mt-fondo: la tarjeta, o surface-2 dentro de .table-shell y de los
     bloques internos). Bordes separados (border-spacing 0): con collapse, el filete de una celda fija se despega al
     scrollear; el de la primera columna va como box-shadow. isolation: los z-index de adentro no compiten con la barra
     superior (z 30) ni con la barra de anclas de la ficha (z 20).
   - Semáforo con ok / warn / bad (tinte + texto), nunca solo color: ▲ ▼ ✓ (.mt-ic), el .sr y, en el ámbar y el rojo, la
     línea del desvío contra el objetivo (.mt-d: es lo que los distingue sin el color). Lo arma carteraMetricaCelda()
     (includes/cartera.php), la misma en todas las tablas. Teal solo en la estructura (la columna actual). */
.mt-wrap{
  --mt-fondo:var(--at-surface);           /* fondo de las celdas fijas: el del contenedor, opaco */
  --mt-col1:clamp(168px,20vw,248px);      /* ancho de la primera columna (el nombre de la métrica) */
  --mt-cab:4rem;                          /* lo que tapa el encabezado fijo (una fila de rótulos con sus badges: ~60 px) */
  position:relative;isolation:isolate;overflow:auto;max-height:min(72dvh,900px);overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(var(--at-tinta-rgb),.2) transparent;
  /* Al moverse con Tab (la grilla de objetivos, un link de un encabezado), el foco no queda debajo de la columna fija ni
     del encabezado fijo: el scroll lo deja a la vista contando lo que ellos tapan */
  scroll-padding:var(--mt-cab) 0 0 calc(var(--mt-col1) + 4px);
}
.mt-wrap:focus-visible{outline-offset:-2px}   /* role="region" + tabindex="0": el teclado también scrollea */
:is(.table-shell,.report-block,.mt-fuente,.mt-pegar,.ficha-alta-form) .mt-wrap,.mt-wrap.table-shell{--mt-fondo:var(--at-surface-2)}
/* La tarjeta que tiene la tabla va sin el brillo de arriba (--at-grad-card): si no, las celdas fijas (opacas, en el
   color de la superficie) se verían como un bloque más oscuro en el tercio de arriba. Como .card:has(.table-wrap). */
.content .card:has(.mt-wrap){background:var(--at-surface)}

.mt-tabla{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.mt-tabla :is(th,td){padding:8px 12px;white-space:nowrap;vertical-align:middle}
.mt-tabla td{height:auto}   /* .table-shell td trae 52 px */
.mt-tabla thead th{position:sticky;top:0;z-index:2;background:var(--mt-fondo);border-bottom:1px solid var(--at-line-2);vertical-align:bottom}
.mt-tabla :is(thead tr,tbody tr:not(.mt-unidad,.mt-grupo)) > :first-child{
  position:sticky;left:0;z-index:1;min-width:var(--mt-col1);max-width:var(--mt-col1);
  background:var(--mt-fondo);box-shadow:inset -1px 0 0 var(--at-line-2);white-space:normal;text-align:left;
}
.mt-tabla thead tr > :first-child{z-index:3}
/* El hover de la fila (rgba de la tinta al .03, capa 5) no se ve debajo de una celda opaca: la fija lo compone igual */
.mt-tabla tbody tr:not(.mt-unidad,.mt-grupo):hover > :first-child{background:color-mix(in srgb,var(--mt-fondo) 97%,rgb(var(--at-tinta-rgb)))}
.mt-tabla tbody tr:is(.mt-unidad,.mt-grupo):hover{background:transparent}
.mt-tabla tbody th{font-size:13.5px;font-weight:600;color:var(--at-text)}

/* Celda del nombre: el nombre y, debajo, la clave y la fuente, chicas y apagadas */
.mt-nombre{line-height:1.35}
.mt-tabla tbody .mt-nombre{font-weight:600;color:var(--at-text)}
.mt-clave{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--at-muted)}
.mt-fuente:not(fieldset){font-size:11.5px;font-weight:500;color:var(--at-muted)}
.mt-nombre :is(.mt-clave,.mt-fuente){display:block;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-nombre .badge{min-height:20px;margin-left:4px;padding:0 7px;font-size:11px}

/* Filas de unidad de negocio y de fuente: ocupan todas las columnas (<th colspan scope="rowgroup">); el rótulo
   (.mt-grupo-l) se queda a la vista al scrollear de costado: sticky dentro de la celda, que es tan ancha como la tabla */
.mt-tabla tr.mt-unidad > th{padding:20px 12px 6px;background:var(--mt-fondo);border-top:0;text-align:left;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--at-zona)}
.mt-tabla tr.mt-grupo > th{padding:7px 12px;background:color-mix(in srgb,var(--mt-fondo) 95%,rgb(var(--at-tinta-rgb)));border-top:1px solid var(--at-line-2);text-align:left;font-size:12.5px;font-weight:700;color:var(--at-text)}
.mt-tabla tr.mt-unidad + tr.mt-grupo > th{border-top-color:var(--at-zona-line)}
.mt-grupo-l{position:sticky;left:12px;display:inline-flex;align-items:center;gap:6px 10px;max-width:calc(100vw - 80px)}
.mt-grupo-l .i{color:var(--at-zona-300)}
.mt-grupo-l .mt-fuente:not(fieldset){font-weight:500;letter-spacing:0;text-transform:none}

/* Calculadas (itálica y la ƒ), archivadas (apagadas: los valores con opacidad; la celda fija, no, que es opaca y el
   contenido que pasa por debajo se vería) */
.mt-tabla tr.mt-calc > *{font-style:italic}
.mt-f{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border-radius:5px;vertical-align:middle;background:rgba(var(--at-tinta-rgb),.07);color:var(--at-text-2);font:italic 700 12px/1 Georgia,'Times New Roman',serif}
.mt-tabla tr.mt-archivada > td{opacity:var(--at-op-inactivo)}
.mt-tabla tr.mt-archivada > :first-child,.mt-tabla tr.mt-archivada .mt-nombre{color:var(--at-muted);font-weight:500}

/* Celda de valor: cifras tabulares a la derecha. Semáforo: tinte + texto en el tono (el rojo, --at-bad-text) */
.mt-v{text-align:right;font-variant-numeric:tabular-nums;color:var(--at-text)}
.mt-v.is-ok{background-color:var(--at-ok-tint);color:var(--at-ok)}
.mt-v.is-warn{background-color:var(--at-warn-tint);color:var(--at-warn)}
.mt-v.is-bad{background-color:var(--at-bad-tint);color:var(--at-bad-text)}
.mt-v.is-nd{color:var(--at-muted)}
.mt-ic{display:inline-block;width:1.1em;margin-left:3px;font-size:.78em;font-style:normal;text-align:center;vertical-align:.06em}
/* Línea chica de desvío debajo del valor (contra el objetivo, el período anterior o el año anterior) */
.mt-d{display:block;margin-top:1px;font-size:11.5px;font-weight:600;font-style:normal;color:var(--at-muted)}
.mt-v:is(.is-ok,.is-warn,.is-bad) .mt-d{color:var(--at-text-2)}   /* sobre el tinte, --at-muted no llega a AA */
.mt-d.is-ok{color:var(--at-ok)} .mt-d.is-warn{color:var(--at-warn)} .mt-d.is-bad{color:var(--at-bad-text)}
.mt-v:is(.is-ok,.is-warn,.is-bad) .mt-d:is(.is-ok,.is-warn,.is-bad){color:inherit}
/* No aplica (una métrica mensual en una semana, una fuente fuera de vigencia): rayado suave, centrado */
.mt-na{text-align:center;color:var(--at-muted);background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(var(--at-tinta-rgb),.05) 6px 7px)}
/* Estimado (sin cierre: la estimación desde las semanas): itálica y apagado */
.mt-est{font-style:italic;color:var(--at-muted)}
.mt-v.mt-est:is(.is-ok,.is-warn,.is-bad){color:var(--at-text-2)}

/* Encabezado de un período: el rótulo y, abajo, links (Cargar / Editar) y badges (firmado, cruza el mes) */
.mt-tabla th.mt-per{min-width:96px;text-align:right}
.mt-per-l{display:block;font-size:12px;font-weight:700;color:var(--at-text-2);font-variant-numeric:tabular-nums}
.mt-per-s{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px 6px;margin-top:4px;font-size:11.5px;font-weight:600;color:var(--at-muted)}
.mt-per-s a{color:var(--at-zona-300)}
.mt-per-s a:hover{text-decoration:underline}
.mt-per-s .badge{min-height:20px;padding:0 7px;font-size:11px}
/* El período actual (la semana en curso o la informada): el encabezado en el tinte de la zona y un filete arriba; las
   celdas, dos filetes a los costados (el semáforo queda como está) */
.mt-tabla th.mt-col-actual{background:color-mix(in srgb,var(--at-zona) 12%,var(--mt-fondo));box-shadow:inset 0 2px 0 var(--at-zona)}
.mt-tabla th.mt-col-actual .mt-per-l{color:var(--at-zona-300)}
.mt-tabla td.mt-col-actual{background-image:linear-gradient(color-mix(in srgb,var(--at-zona) 6%,transparent),color-mix(in srgb,var(--at-zona) 6%,transparent));box-shadow:inset 1px 0 0 color-mix(in srgb,var(--at-zona) 45%,transparent),inset -1px 0 0 color-mix(in srgb,var(--at-zona) 45%,transparent)}
/* El cierre del mes: separado de las semanas y con la cifra más marcada */
.mt-tabla .mt-col-cierre{box-shadow:inset 2px 0 0 var(--at-line-2)}
.mt-tabla td.mt-col-cierre{font-weight:700}
/* Objetivo y comparaciones (mes anterior, año anterior): más sutiles, separadas del bloque de los períodos */
.mt-tabla :is(td.mt-col-obj,td.mt-col-cmp){font-size:12.5px;color:var(--at-text-2)}
.mt-tabla :is(th.mt-col-obj,th.mt-col-cmp) .mt-per-l{color:var(--at-muted);font-weight:600}
.mt-tabla :not(.mt-col-obj,.mt-col-cmp) + :is(.mt-col-obj,.mt-col-cmp){box-shadow:inset 2px 0 0 var(--at-line-2)}
/* Una semana que cruza el mes (aparece en los dos): el rótulo en itálica; la página suma el badge "cruza el mes" */
.mt-tabla th.mt-cruza .mt-per-l{font-style:italic}
.mt-tabla td.mt-cruza{background-image:linear-gradient(to bottom,rgba(var(--at-tinta-rgb),.025),rgba(var(--at-tinta-rgb),.025))}

/* Barra de la tabla: las vistas (.tabs: Mes · Año · Especiales), la navegación ‹ período › (links) y las acciones */
.mt-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:14px}
.mt-toolbar > .tabs{flex:0 1 auto}
.mt-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.mt-nav-per{display:inline-flex;align-items:center;gap:2px;min-height:36px;padding:3px;border-radius:var(--at-pill);background:var(--at-surface-2);border:1px solid var(--at-line)}
.mt-nav-per > :is(a,span[aria-disabled]){display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:var(--at-text-2)}
.mt-nav-per > a:hover{background:var(--at-surface-3);color:var(--at-text)}
.mt-nav-per > span[aria-disabled="true"]{opacity:.4}
.mt-nav-l{min-width:8.5em;padding:0 6px;text-align:center;font-size:13.5px;font-weight:700;color:var(--at-text);white-space:nowrap}
.mt-nav-l small{display:block;font-size:11px;font-weight:600;color:var(--at-muted)}
/* Un rótulo largo y uno corto ("29/09 – 05/10" / "29/09"): <span class="mt-solo-ancho"> se va en el teléfono,
   <span class="mt-solo-angosto"> solo va ahí */
.mt-solo-angosto{display:none}

/* Leyenda del semáforo: chips con la misma marca que la celda (tinte + símbolo) */
.mt-leyenda{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:12px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--at-text-2)}
.mt-leyenda li{display:inline-flex;align-items:center;gap:6px}
.mt-sw{display:inline-grid;place-items:center;min-width:24px;height:20px;padding:0 5px;border-radius:6px;font-size:11px;font-weight:700;line-height:1;background:rgba(var(--at-tinta-rgb),.05);border:1px solid var(--at-line);color:var(--at-text-2)}
.mt-sw.is-ok{background:var(--at-ok-tint);border-color:var(--at-ok-line);color:var(--at-ok)}
.mt-sw.is-warn{background:var(--at-warn-tint);border-color:var(--at-warn-line);color:var(--at-warn)}
.mt-sw.is-bad{background:var(--at-bad-tint);border-color:var(--at-bad-line);color:var(--at-bad-text)}
.mt-sw.is-na{background-image:repeating-linear-gradient(135deg,transparent 0 4px,rgba(var(--at-tinta-rgb),.12) 4px 5px)}
.mt-sw.is-est{font-style:italic;color:var(--at-muted)}
.mt-sw:has(.mt-sw-d){grid-auto-flow:column;gap:4px}   /* el ámbar y el rojo: la marca y, al lado, un desvío de ejemplo (como la línea .mt-d) */
.mt-sw-d{font-variant-numeric:tabular-nums}

/* Compacta (la ficha, el informe, el Inicio): en el contenedor, <div class="mt-wrap mt-mini">. Sin alto propio: una
   tira corta no necesita scroll vertical (y en el teléfono sería scroll dentro de scroll). */
.mt-wrap.mt-mini{--mt-col1:clamp(132px,16vw,200px);max-height:none}
.mt-mini .mt-tabla{font-size:12.5px}
.mt-mini .mt-tabla :is(th,td){padding:5px 8px}
.mt-mini .mt-tabla tr.mt-grupo > th{padding:5px 8px;font-size:12px}
.mt-mini .mt-tabla tr.mt-unidad > th{padding:12px 8px 4px}
.mt-mini .mt-grupo-l{left:8px}
.mt-mini .mt-d{font-size:11px}
.mt-mini .mt-tabla th.mt-per{min-width:76px}
.mt-mini .mt-per-s{margin-top:2px}
/* La capa puente (8.3) pone 12 px a los costados de las celdas de las tablas de 7 columnas o más, entre 761 y 1599 px:
   la compacta y la grilla de objetivos recuperan los suyos (con más especificidad que aquella). */
@media (min-width:761px) and (max-width:1599px){
  .content .mt-mini table.mt-tabla:not(.cli-tabla):has(th:nth-child(7)) :is(th,td){padding-left:8px;padding-right:8px}
  .content table.mt-obj-grid:not(.cli-tabla):has(th:nth-child(7)) td{padding-left:4px;padding-right:4px}
  .content table.mt-obj-grid:not(.cli-tabla):has(th:nth-child(7)) td:last-child{padding-right:12px}
}

/* ── Carga de un período (metricas_periodo.php y el informe): grupos por fuente, una fila por métrica ──
   Columnas: métrica · valor · período anterior · estimación (las dos últimas, opcionales). En el teléfono, una sola
   columna: el rótulo, el campo y, debajo, el anterior y la estimación. */
.mt-form{--mt-in-w:8.75rem;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}   /* minmax: un hijo ancho no saca el formulario de la tarjeta en el teléfono */
fieldset.mt-fuente{min-width:0;margin:0;padding:12px 16px 6px;border:1px solid var(--at-line);border-radius:var(--at-r-md);background:var(--at-surface-2)}
/* legend flotante: así va adentro del recuadro como un título (y no cortando el borde) */
fieldset.mt-fuente > legend{float:left;width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 4px;padding:0;font-size:14px;font-weight:700;color:var(--at-text)}
fieldset.mt-fuente > legend .i{color:var(--at-zona-300)}
fieldset.mt-fuente > :not(legend){clear:both}   /* todos: si el primero está oculto (.mt-cab en el teléfono), el siguiente quedaría al lado */
fieldset.mt-fuente > legend .end{margin-left:auto;display:flex;align-items:center;gap:6px}
.mt-cab,.mt-fila{display:grid;grid-template-columns:minmax(0,1fr) var(--mt-in-w) minmax(0,9rem) minmax(0,11.5rem);align-items:center;gap:6px 16px}
.mt-cab{padding:2px 0 6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--at-muted)}
.mt-cab > :not(:first-child){text-align:right}
.mt-fila{min-height:52px;padding:6px 0;border-top:1px solid var(--at-line)}
.mt-cab + .mt-fila,legend + .mt-fila{border-top:0}
.mt-fila > .mt-nombre{min-width:0;font-size:14px;font-weight:600;color:var(--at-text);overflow-wrap:anywhere}
.mt-fila > label.mt-nombre{cursor:pointer}
.mt-fila > :nth-child(2){grid-column:2}
.mt-fila > .campo-error{grid-column:2 / -1;margin:0}
.mt-fila.is-calc > .mt-nombre{font-style:italic;font-weight:500;color:var(--at-text-2)}
.mt-fila.is-archivada > .mt-nombre{color:var(--at-muted);font-weight:500}
/* El campo: texto con inputmode decimal (type=number no acepta "1.234,56"), a la derecha y con cifras tabulares */
input.mt-in{width:100%;text-align:right;font-variant-numeric:tabular-nums}
input.mt-in[aria-invalid="true"]{border-color:var(--at-bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--at-bad) 20%,transparent)}
input.mt-in.is-estimado{font-style:italic;border-style:dashed;color:var(--at-text-2)}   /* copiado de la estimación, sin tocar */
input.mt-in.is-pegado{animation:mt-pegado 1.4s var(--at-ease)}
@keyframes mt-pegado{from{background-color:var(--at-zona-tint)}to{background-color:var(--at-surface-2)}}
/* La calculada, en vivo: un "campo" punteado que no se edita */
.mt-calc-out{display:block;min-height:40px;padding:9px 13px;border:1px dashed var(--at-line-2);border-radius:var(--at-r-sm);text-align:right;font-style:italic;font-size:14px;font-variant-numeric:tabular-nums;color:var(--at-text-2);line-height:1.4}
.mt-calc-out.is-vacio{color:var(--at-muted)}
/* El período anterior y la estimación: chicos, a la derecha. El rótulo (.mt-ref-l) solo se ve en el teléfono: en la
   computadora lo dice la cabecera (.mt-cab, aria-hidden); para el lector va siempre */
.mt-ref,.mt-estim{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:2px 6px;min-width:0;font-size:13px;color:var(--at-text-2);font-variant-numeric:tabular-nums;text-align:right}
.mt-ref{grid-column:3}
.mt-estim{grid-column:4;color:var(--at-muted);font-style:italic}
.mt-ref-l{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mt-usar{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:var(--at-pill);border:1px solid var(--at-zona-line);background:var(--at-zona-tint);color:var(--at-zona-300);font-size:12px;font-weight:700;font-style:normal;cursor:pointer}
.mt-usar:hover{background:var(--at-zona-tint-2)}
.mt-form-pie{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.mt-form-pie .hint{flex:1 1 220px}
/* Sin estimación (las semanas): tres columnas */
.mt-form.sin-estim :is(.mt-cab,.mt-fila){grid-template-columns:minmax(0,1fr) var(--mt-in-w) minmax(0,9rem)}

/* "Pegar una columna desde la planilla": la caja (un <details>), el textarea, desde qué fila, y la vista previa */
.mt-pegar{min-width:0;padding:12px 16px;border:1px dashed var(--at-line-2);border-radius:var(--at-r-md);background:rgba(var(--at-tinta-rgb),.015)}
.mt-pegar > summary{display:flex;align-items:center;gap:8px;min-height:28px;font-size:14px;font-weight:600;color:var(--at-text);list-style:none}
.mt-pegar > summary::-webkit-details-marker{display:none}
.mt-pegar > summary .i{color:var(--at-zona-300)}
.mt-pegar > summary .hint{margin-left:auto;font-weight:500}
.mt-pegar[open] > summary{margin-bottom:10px}
.mt-pegar textarea{min-height:110px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5}
.mt-pegar-ctl{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;margin-top:10px}
.mt-pegar-ctl > label{display:flex;flex-direction:column;gap:4px;flex:1 1 220px;max-width:440px;font-size:13px;font-weight:600;color:var(--at-text-2)}
.mt-pegar-msg{margin:10px 0 0;font-size:13px;color:var(--at-text-2)}
.mt-pegar-msg:empty{display:none}
.mt-pegar-msg.is-warn{color:var(--at-warn)}
.mt-pegar-previa{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:4px 12px;margin:8px 0 0;padding:0;list-style:none;font-size:13px}
.mt-pegar-previa:empty{display:none}
.mt-pegar-previa li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0;padding:5px 10px;border-radius:var(--at-r-xs);background:var(--at-surface-2);border:1px solid var(--at-line)}
.mt-pegar-previa .mt-pp-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--at-text-2)}
.mt-pegar-previa .mt-pp-v{flex:0 0 auto;font-weight:700;color:var(--at-text);font-variant-numeric:tabular-nums}
.mt-pegar-previa li.is-error{background:var(--at-bad-tint);border-color:var(--at-bad-line)}
.mt-pegar-previa li.is-error .mt-pp-v{color:var(--at-bad-text)}
.mt-pegar-previa li.is-vacio .mt-pp-v,.mt-pegar-previa li.is-sobra .mt-pp-v{font-weight:500;color:var(--at-muted)}
.mt-pegar-previa li.is-sobra{border-style:dashed;background:transparent}

/* Firma del cierre: el estado, quién y cuándo, y el botón */
.mt-firma{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 16px;border-radius:var(--at-r-md);border:1px solid var(--at-line-2);background:var(--at-surface-2);box-shadow:inset 3px 0 0 var(--at-line-2)}
.mt-firma.is-firmado{border-color:var(--at-ok-line);box-shadow:inset 3px 0 0 var(--at-ok)}
.mt-firma.is-corregido{border-color:var(--at-warn-line);box-shadow:inset 3px 0 0 var(--at-warn)}
.mt-firma-t{flex:1 1 240px;min-width:0;margin:0;font-size:13.5px;color:var(--at-text-2)}
.mt-firma-t b{color:var(--at-text);font-weight:600}
.mt-firma form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.mt-firma + *{margin-top:16px}

/* Historial (cambios y firmas): ícono · quién hizo qué (antes → después) y el motivo · cuándo */
.mt-hist{margin:0;padding:0;list-style:none}
.mt-hist-item{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:start;gap:2px 12px;padding:10px 0;border-top:1px solid var(--at-line)}
.mt-hist-item:first-child{padding-top:0;border-top:0}
.mt-hist-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(var(--at-tinta-rgb),.06);color:var(--at-muted)}
.mt-hist-ic .i{width:15px;height:15px}
.mt-hist-item.is-firma .mt-hist-ic{background:var(--at-ok-tint);color:var(--at-ok)}
.mt-hist-item.is-correccion .mt-hist-ic{background:var(--at-warn-tint);color:var(--at-warn)}
.mt-hist-item.is-import .mt-hist-ic{background:var(--at-info-tint-soft);color:var(--at-info)}
.mt-hist-b{min-width:0}
.mt-hist-q{margin:3px 0 0;font-size:13.5px;line-height:1.5;color:var(--at-text-2);overflow-wrap:anywhere}
.mt-hist-u,.mt-hist-q b{color:var(--at-text);font-weight:600}
.mt-hist-m{margin:6px 0 0;padding:6px 10px;border-radius:var(--at-r-xs);background:rgba(var(--at-tinta-rgb),.04);font-size:13px;line-height:1.5;color:var(--at-text-2);overflow-wrap:anywhere}
.mt-hist-ml{margin-right:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--at-muted)}
.mt-hist-h{padding-top:4px;font-size:12px;font-weight:600;color:var(--at-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.mt-antes{color:var(--at-muted);text-decoration:line-through;text-decoration-thickness:1px;font-variant-numeric:tabular-nums;white-space:nowrap}
.mt-despues{color:var(--at-text);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.mt-flecha{margin:0 4px;color:var(--at-muted)}

/* Diferencias de la importación (vista previa): por fila (lista: período · métrica · actual → nuevo) o por celda (la
   vista "como la tabla", con .mt-tabla). La marca: una barra a la izquierda de la fila o el tinte de la celda, más el
   badge con el estado en texto (nunca solo color). */
.mt-diff{--mt-diff-c:transparent}
.mt-diff .is-nuevo{--mt-diff-c:var(--at-ok)}
.mt-diff .is-cambia{--mt-diff-c:var(--at-warn)}
.mt-diff .is-firmado{--mt-diff-c:var(--at-bad)}
.mt-diff .is-igual{--mt-diff-c:var(--at-line-2)}
.mt-diff :is(th,td){padding:8px 12px}
.mt-diff tbody tr:is(.is-nuevo,.is-cambia,.is-igual,.is-firmado) > :first-child{background-image:linear-gradient(90deg,var(--mt-diff-c) 0 3px,transparent 3px)}
.mt-diff tbody tr.is-igual > td{color:var(--at-muted)}
.mt-diff td.is-nuevo{background-color:var(--at-ok-tint)}
.mt-diff td.is-cambia{background-color:var(--at-warn-tint)}
.mt-diff td.is-firmado{background-color:var(--at-bad-tint)}
.mt-diff td.is-igual{color:var(--at-muted)}
.mt-diff td:is(.is-nuevo,.is-cambia,.is-firmado) :is(.mt-antes,.mt-flecha){color:var(--at-text-2)}
.mt-diff .mt-flag{display:inline-block;margin-left:4px;color:var(--at-warn);font-weight:700}   /* plausibilidad: ⚠ con title */

/* Configuración: fuentes y métricas en lista, con ↑ ↓ (formularios POST), badges y acciones */
.mt-cfg{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.mt-cfg-fuente{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:16px 0 8px;border-top:1px solid var(--at-line-2)}
.mt-cfg-fuente:first-child{padding-top:0;border-top:0}
.mt-cfg-fuente h3{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.mt-cfg-fuente h3 .i{color:var(--at-zona-300)}
.mt-cfg-fuente .end{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mt-cfg-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:6px 12px;min-height:52px;padding:8px 0;border-top:1px solid var(--at-line)}
.mt-cfg-orden{display:flex;gap:2px}
.mt-cfg-orden form{display:inline;margin:0}
.mt-mover{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--at-r-xs);border:1px solid var(--at-line-2);background:var(--at-surface-2);color:var(--at-text-2)}
.mt-mover:hover{background:var(--at-surface-3);color:var(--at-text)}
.mt-mover:disabled{opacity:.35;cursor:default}
.mt-mover .i{width:15px;height:15px}
.mt-cfg-n{min-width:0}
.mt-cfg-n b{font-weight:600;color:var(--at-text)}
.mt-cfg-n .mt-clave{margin-left:6px}
.mt-cfg-formula{display:block;margin-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--at-muted);overflow-wrap:anywhere}
.mt-cfg-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.mt-cfg-badges .badge{min-height:22px;padding:0 8px;font-size:11.5px}
.mt-cfg-acc{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.mt-cfg-acc form{display:inline;margin:0}
.mt-cfg-item.is-archivada > :not(.mt-cfg-acc){opacity:var(--at-op-inactivo)}
.mt-cfg-item.is-calc .mt-cfg-n b{font-style:italic}
.mt-cfg-item.is-editando{margin:0 -10px;padding-inline:10px;border-radius:var(--at-r-sm);background:var(--at-zona-tint)}
.mt-cfg-item.is-editando .mt-clave,.mt-cfg-item.is-editando .mt-cfg-formula{color:var(--at-text-2)}
/* Validación de la fórmula en vivo ([data-mt-formula-msg]) */
.mt-formula-msg{margin:6px 0 0;font-size:13px;color:var(--at-muted)}
.mt-formula-msg.is-ok{color:var(--at-ok)}
.mt-formula-msg.is-error{color:var(--at-bad-text)}
textarea.mt-formula,input.mt-formula{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.mt-claves{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.mt-claves .mt-clave{padding:1px 6px;border-radius:6px;background:rgba(var(--at-tinta-rgb),.05);border:1px solid var(--at-line)}

/* Grilla de objetivos: <table class="mt-tabla mt-obj-grid">, una fila por métrica y un campo por mes. El valor heredado
   (la vigencia de un mes anterior) es el placeholder: apagado y en itálica; la celda con valor propio, con borde lleno */
.mt-obj-grid td{padding:4px 4px}
.mt-obj-grid td:last-child{padding-right:12px}
.mt-obj-grid input.mt-in{width:calc(10ch + 18px);min-height:34px;padding:5px 8px;font-size:13px}   /* con width:100% la columna tomaría el ancho por defecto de un input */
.mt-obj-grid input.mt-in:placeholder-shown{border-style:dashed;border-color:var(--at-line-2)}
.mt-obj-grid input.mt-in:placeholder-shown:focus{border-style:solid;border-color:var(--at-zona)}
.mt-obj-grid .is-heredado input.mt-in::placeholder,.mt-obj-grid input.mt-in.is-heredado::placeholder{color:var(--at-muted);font-style:italic}
.mt-obj-grid th.mt-per{min-width:0;text-align:center}
.mt-obj-grid th.mt-per .mt-per-s{justify-content:center}

/* Estado vacío con llamada a la acción (sin tabla armada, sin períodos, sin importaciones) */
.mt-vacio{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 16px;text-align:center}
.mt-vacio .ring{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--at-zona-tint);border:1px solid var(--at-zona-line);color:var(--at-zona-300)}
.mt-vacio h2,.mt-vacio h3{font-size:17px;font-weight:600}
.mt-vacio p{max-width:56ch;margin:0;font-size:14px;color:var(--at-muted)}
.mt-vacio-acc{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px}

/* Teléfono y tableta chica */
@media (max-width:760px){
  /* Sin alto propio: scroll dentro de scroll en el teléfono no (el encabezado deja de ser fijo; la primera columna sigue) */
  .mt-wrap{--mt-col1:clamp(124px,36vw,152px);max-height:none}
  .mt-tabla :is(th,td){padding:7px 10px}
  .mt-obj-grid td{padding:4px}
  .mt-tabla th.mt-per{min-width:84px}
  .mt-grupo-l{left:10px}
  /* Encabezado de período: los badges y links, uno debajo del otro (la columna queda del ancho del rótulo) */
  .mt-per-s{flex-direction:column;align-items:flex-end;gap:3px}
  .mt-obj-grid th.mt-per .mt-per-s{align-items:center}
  .mt-solo-ancho{display:none}
  .mt-solo-angosto{display:inline}
  /* La unidad y la fuente, en más de un renglón si no entran (una unidad larga desbordaba la tarjeta en Objetivos) */
  .mt-tabla tr:is(.mt-unidad,.mt-grupo) > th{white-space:normal}
  .mt-grupo-l{flex-wrap:wrap}
  .mt-cfg-item{grid-template-columns:auto minmax(0,1fr)}
  .mt-cfg-badges,.mt-cfg-acc{grid-column:2;justify-content:flex-start}
  .mt-hist-item{grid-template-columns:28px minmax(0,1fr)}
  .mt-hist-h{grid-column:2;grid-row:2;padding-top:0}
}
@media (max-width:640px){
  .mt-acciones{width:100%;margin-left:0}
  .mt-toolbar > .tabs{max-width:100%}
  /* El formulario, en una columna: rótulo, campo y, debajo, el anterior y la estimación */
  .mt-cab{display:none}
  .mt-fila,.mt-form.sin-estim .mt-fila{grid-template-columns:minmax(0,1fr);gap:6px;padding:10px 0}
  .mt-fila > :nth-child(2),.mt-ref,.mt-estim,.mt-fila > .campo-error{grid-column:1}
  .mt-ref,.mt-estim{justify-content:flex-start;text-align:left}
  .mt-ref-l{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;color:var(--at-muted)}
  .mt-ref-l::after{content:":"}
  .mt-ref,.mt-estim{order:2}   /* el error, pegado al campo */
  .mt-fila > .campo-error{order:1}
  .mt-pegar > summary{display:block}   /* el ícono y el título en línea; la ayuda, debajo */
  .mt-pegar > summary .i{margin-right:6px;vertical-align:-3px}
  .mt-pegar > summary .hint{display:block;margin:2px 0 0 22px}
  fieldset.mt-fuente{padding:12px 12px 4px}
}

/* Impresión: sin sticky ni alto propio (la tabla entera), los tintes del semáforo impresos, sin controles */
@media print{
  .mt-wrap{overflow:visible!important;max-height:none!important}
  .mt-tabla :is(th,td){position:static!important}
  .mt-tabla{font-size:11px}
  .mt-v,.mt-sw,.mt-diff td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mt-toolbar .tabs,.mt-nav-per > :is(a,span[aria-disabled]),.mt-acciones,.mt-per-s a,.mt-usar,.mt-pegar,.mt-cfg-orden,.mt-cfg-acc,.mt-vacio-acc,.mt-firma form{display:none!important}
}

/* Cada página suma lo suyo debajo de su comentario (solo tokens, como el resto del bloque). */
/* metricas.php */
/* La tabla del cliente: la tarjeta no lleva .card-h (la barra hace de encabezado), así que el padding va acá */
.card.mt-tabla-card{padding:18px 20px}
.mt-tabla-card > .alert{margin-bottom:14px}
/* El rótulo del mes anterior y del año anterior es un link a ese mes (en el color de los links de la zona) */
.mt-tabla .mt-per-l a{color:var(--at-zona-300)}
.mt-tabla .mt-per-l a:hover{text-decoration:underline}
.mt-leyenda li.mt-leyenda-nota{color:var(--at-muted)}
/* La esquina (el "Métrica" del encabezado) arriba de todo: la regla de la columna fija (con :is(…tbody tr:not(…)),
   especificidad 0,3,2) le pisa el z-index 3 del kit y, al correr la tabla de costado, los otros encabezados (z 2) le
   pasaban por encima. Esta tiene la misma especificidad y va después. */
.mt-wrap .mt-tabla thead tr > :first-child{z-index:3}
/* "No aplica" en la semana actual o en una que cruza el mes: el velo de la columna (un background-image, como el rayado)
   taparía el rayado; van los dos, el rayado arriba */
.mt-tabla td.mt-na.mt-cruza{background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(var(--at-tinta-rgb),.05) 6px 7px),linear-gradient(rgba(var(--at-tinta-rgb),.025),rgba(var(--at-tinta-rgb),.025))}
.mt-tabla td.mt-na.mt-col-actual{background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(var(--at-tinta-rgb),.05) 6px 7px),linear-gradient(color-mix(in srgb,var(--at-zona) 6%,transparent),color-mix(in srgb,var(--at-zona) 6%,transparent))}
/* Especiales: la última columna es la de "Nuevo período" (editor+): angosta, con un filete punteado */
.mt-tabla .mt-col-nuevo{min-width:0;border-left:1px dashed var(--at-line-2)}
.mt-tabla th.mt-col-nuevo{text-align:center;vertical-align:middle}
.mt-nuevo{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--at-pill);border:1px solid var(--at-zona-line);background:var(--at-zona-tint);color:var(--at-zona-300);font-size:12.5px;font-weight:700;white-space:nowrap}
.mt-nuevo:hover{background:var(--at-zona-tint-2)}
/* Resumen de la cartera: la tabla de Clientes (.cli-tabla: en el teléfono, una tarjeta por cuenta) con filas de célula
   y de analista; los estados, badges (y links, donde llevan a cargar o a firmar) */
.mt-res-kpis{margin-bottom:16px}
.mt-res thead th small{display:block;margin-top:2px;font-size:11px;font-weight:500;color:var(--at-muted)}
.mt-res tbody th{text-align:left;white-space:normal;font-size:13px;color:var(--at-text)}
.mt-res tr.mt-res-cel > th{padding:18px 12px 6px;border-top:0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--at-zona)}
.mt-res tr.mt-res-an > th{padding:8px 12px;font-weight:700;background:rgba(var(--at-tinta-rgb),.03);border-top:1px solid var(--at-line-2)}
.mt-res tbody tr:is(.mt-res-cel,.mt-res-an):hover{background:transparent}
.mt-res-an-l{display:flex;align-items:center;gap:8px;min-width:0}
.mt-res-an-l .ref{color:var(--at-warn)}
.mt-res-n{margin-left:auto;font-size:12px;font-weight:600;color:var(--at-muted);font-variant-numeric:tabular-nums}
.mt-res-a{display:inline-flex;border-radius:var(--at-pill)}
.mt-res-a:hover .badge{border-color:currentColor}
.mt-res td.mt-res-sin{font-size:13px;color:var(--at-muted)}
.mt-res td.mt-res-sin a{font-weight:600;color:var(--at-zona-300)}
@media (min-width:761px){
  /* Las ocho columnas entran a 1280 px con el menú abierto (con 15rem para el nombre y 12 px de aire, Importaciones quedaba
     afuera): el nombre de la cuenta, de 12rem (dos o tres líneas), y 10 px a los costados de cada celda */
  .mt-res td.cli-c{min-width:12rem}
  .mt-res :is(th,td){padding-left:10px;padding-right:10px}
  .mt-res td:not(.cli-c,.mt-res-sin){white-space:nowrap}
}
@media (max-width:760px){
  .card.mt-tabla-card{padding:16px}
  .mt-res tr:is(.mt-res-cel,.mt-res-an){padding:0}
  .mt-res tr:is(.mt-res-cel,.mt-res-an) > th{display:block}
  .mt-res tr.mt-res-cel > th{padding:16px 14px 4px}
  .mt-res tr.mt-res-an > th{padding:8px 14px}
  .mt-res td.mt-res-sin{display:block;padding-top:4px}
  .mt-res td[data-l] > *{justify-self:start}   /* el badge, de su ancho (no estirado a la columna del valor) */
}
@media (max-width:640px){
  /* Los cuatro KPIs, de a dos (como los de la ficha): son cifras cortas */
  .mt-res-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mt-res-kpis .kpi{min-height:112px;padding:14px}
}

/* metricas_periodo.php */
/* Una columna: la barra (‹ período › y el estado), el nombre y las fechas de un especial, la carga y el historial. La carga
   necesita el ancho (nombre · valor · anterior · estimación); el historial va debajo. */
.mper{display:grid;gap:16px;min-width:0}
.mper > .card + .card{margin-top:0}
/* Los botones del pie pueden partirse ("Guardar y seguir…" es largo; la columna acotada de .mt-form está en el kit). */
.mper .mt-form-pie .btn{white-space:normal;text-align:left}
.mper-barra{margin-bottom:0}
.mper-estado{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mper-estado .badge .i{width:14px;height:14px}
/* Período especial: el alta (una tarjeta) y la edición del nombre y las fechas (una tarjeta plegable) */
.mper-intro{max-width:72ch;margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--at-text-2)}
.mper-esp-campos{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:0 16px}
.mper-esp-form .form-actions{margin-top:0}
.mper-esp-form > .hint{margin:-6px 0 12px}
/* Un campo con error del servidor (aria-invalid): en rojo como el :user-invalid global, que no lo ve hasta que se toca */
.mper :is(input,textarea)[aria-invalid="true"]{border-color:var(--at-bad)}
details.mper-esp{padding:14px 20px}
details.mper-esp > summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-height:28px;list-style:none;cursor:pointer;font-size:14px;font-weight:600;color:var(--at-text)}
details.mper-esp > summary::-webkit-details-marker{display:none}
details.mper-esp > summary > .i{color:var(--at-zona-300)}
details.mper-esp > summary .hint{margin-left:auto;font-weight:500}
details.mper-esp[open] > summary{margin-bottom:14px}
details.mper-esp > summary .mper-fold-ic{color:var(--at-muted);transition:transform var(--at-t-fast) var(--at-ease)}
details.mper-esp[open] > summary .mper-fold-ic{transform:rotate(180deg)}
/* La unidad de negocio, encima de sus fuentes (como la fila .mt-unidad de la tabla) */
.mper-unidad{margin:4px 0 -8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--at-zona)}
.mper-unidad:first-of-type{margin-top:0}
/* El valor de solo lectura (viewer): en la columna del campo, como la cifra que sería */
.mper-val{display:block;padding:9px 0;text-align:right;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--at-text)}
.mper-val.is-vacio{font-weight:500;color:var(--at-muted)}
.mt-fila.is-calc .mper-val{font-style:italic;font-weight:500;color:var(--at-text-2)}
.mper-lectura .mt-fila{min-height:44px}
/* La estimación, más ancha que en el kit: "≈ $ 1.613.643 · parcial · usar" en un renglón (el nombre tiene lugar de sobra) */
@media (min-width:641px){
  .mper .mt-form:not(.sin-estim) :is(.mt-cab,.mt-fila){grid-template-columns:minmax(0,1fr) var(--mt-in-w) minmax(0,9rem) minmax(0,15rem)}
}
/* Un especial sin otro antes: sin la columna del anterior (nombre · valor) */
.mper .mt-form.mper-sin-ref :is(.mt-cab,.mt-fila){grid-template-columns:minmax(0,1fr) var(--mt-in-w)}
/* Marcas chicas: la estimación parcial (le faltan semanas) y la métrica mensual (en el cierre) */
.mper-parcial{display:inline-block;padding:0 6px;border-radius:var(--at-pill);border:1px dashed var(--at-line-2);font-size:11px;font-weight:600;font-style:normal;color:var(--at-muted)}
.mt-nombre .badge.mper-mensual{font-weight:600;color:var(--at-text-2)}
/* El 409: al lado del campo, lo que hay ahora (lo cargó otra persona mientras se escribía) */
.mt-fila > .mper-ahora{grid-column:2 / -1;margin:0;font-size:13px;color:var(--at-warn)}
.form-group > .mper-ahora{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--at-warn);overflow-wrap:anywhere}   /* el comentario, el nombre y las fechas de un especial */
.mper-ahora b{font-weight:700;font-variant-numeric:tabular-nums}
/* La caja de la firma: por qué no se puede firmar todavía */
.mper-porque{display:block;margin-top:2px;font-size:12.5px;color:var(--at-muted)}
/* El aviso del cierre firmado, el comentario y el motivo: dentro de la grilla del formulario (gap 16) */
.mt-form > .alert,.mt-form > .form-group,.mt-form > .mper-nota{margin:0}
.mper-coment-l{padding:10px 12px;border-radius:var(--at-r-sm);background:rgba(var(--at-tinta-rgb),.04);font-size:13.5px;line-height:1.55;color:var(--at-text-2);overflow-wrap:anywhere}
/* Historial: los cambios de un mismo guardado, uno por renglón (métrica: antes → después) */
.mper-hist-l{display:grid;gap:3px;margin:6px 0 0;padding:0;list-style:none;font-size:13px;line-height:1.5;color:var(--at-text-2)}
.mper-hist-l li{overflow-wrap:anywhere}
.mper-hist-l b{font-weight:600;color:var(--at-text)}
.mper-hist-l li.is-calc{font-style:italic}
.mper-hist-l .mt-f{width:16px;height:16px;margin-right:4px;font-size:11px}
.mper-hist-l .badge{min-height:18px;padding:0 7px;font-size:10.5px;font-style:normal;vertical-align:1px}
.mper-hist-f,.mper-hist-o{color:var(--at-muted)}
.mper-hist-o{font-size:12px}
.mt-hist-q .badge.mper-hist-origen{min-height:18px;margin-left:4px;padding:0 7px;font-size:10.5px;font-weight:600;color:var(--at-text-2);vertical-align:1px}
.mper-hist-mas{margin-top:4px}
.mper-hist-mas > summary{display:inline-block;font-size:12.5px;font-weight:600;color:var(--at-zona-300);cursor:pointer}
.mper-hist-mas > summary:hover{text-decoration:underline}
@media (max-width:760px){
  .mper-esp-campos{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .mt-fila > .mper-ahora{grid-column:1;order:1}
  .mper .mt-form.mper-sin-ref .mt-fila{grid-template-columns:minmax(0,1fr)}
  /* Solo lectura: el nombre y la cifra en un renglón; el anterior y la estimación, debajo */
  .mper .mt-form.mper-lectura .mt-fila{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}
  .mper-lectura .mt-fila > .mper-val{grid-column:2;grid-row:1;padding:0}
  .mper-lectura .mt-fila > :is(.mt-ref,.mt-estim){grid-column:1 / -1}
}
@media print{
  .mper-barra .mt-nav-per > :is(a,span[aria-disabled]),.mper-esp-edit,.mt-form-pie,.mper-motivo{display:none!important}
}

/* metricas_config.php · metricas_objetivos.php · metricas_catalogo.php */
/* La configuración y el catálogo (.mtc): secciones lista + formulario (.abm) una debajo de la otra, con la lista del kit
   (.mt-cfg). La fila, en dos renglones: arriba los ↑↓, el nombre (con la clave y la fórmula) y las acciones; abajo los
   badges, que son muchos (formato, periodicidad, sentido, objetivo…) y en una sola fila le comían el ancho al nombre. */
.mtc-bloque + .mtc-bloque{margin-top:16px}
.mtc .mt-cfg-item{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"orden nombre acciones" "orden badges badges";align-items:start;row-gap:6px}
.mtc .mt-cfg-orden{grid-area:orden}
.mtc .mt-cfg-n{grid-area:nombre;padding-top:4px;line-height:1.4}
.mtc .mt-cfg-n .mt-clave{display:inline-block;max-width:100%;overflow-wrap:anywhere}   /* si no entra, baja entera (no se corta) */
.mtc .mt-cfg-badges{grid-area:badges;justify-content:flex-start}
.mtc .mt-cfg-badges:empty{display:none}
.mtc .mt-cfg-badges .badge{gap:4px}
.mtc .mt-cfg-badges .badge .i{width:13px;height:13px}
.mtc .mt-cfg-acc{grid-area:acciones;flex-wrap:nowrap;align-items:center}
.mtc .mt-cfg-item.is-editando{margin:0 -12px;padding-inline:12px}
.mtc-ico{width:28px;padding:0;justify-content:center}   /* archivar, reactivar, borrar: solo el ícono (con aria-label y title) */
.mtc-ic{display:inline-grid;vertical-align:-2px;margin-right:6px;color:var(--at-zona-300)}
.mtc-sub{display:block;margin-top:2px;font-size:12.5px;color:var(--at-muted);overflow-wrap:anywhere}
.mtc-sub .mt-clave{color:var(--at-text-2)}
/* La unidad de negocio: el rótulo de un bloque de fuentes, como .mt-unidad de la tabla */
.mtc-unidad{padding:18px 0 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--at-zona)}
.mtc-unidad:first-child{padding-top:0}
.mtc-unidad + :is(.mt-cfg-item,.mt-cfg-fuente){border-top-color:var(--at-zona-line)}
.mtc-sin{padding:10px 0;border-top:1px solid var(--at-line);font-size:13.5px}
/* "Agregar del catálogo", al pie de cada fuente: un <details> con las que todavía no tiene */
.mtc-cat-li{padding:6px 0 10px}
.mtc-cat{padding:6px 12px;border:1px dashed var(--at-line-2);border-radius:var(--at-r-sm);background:rgba(var(--at-tinta-rgb),.015)}
.mtc-cat > summary{display:flex;align-items:center;gap:8px;min-height:30px;font-size:13.5px;font-weight:600;color:var(--at-zona-300);cursor:pointer;list-style:none}
.mtc-cat > summary::-webkit-details-marker{display:none}
.mtc-cat > summary .hint{margin-left:auto;font-weight:500}
.mtc-cat[open] > summary{margin-bottom:8px}
.mtc-cat fieldset{min-width:0;margin:0;padding:0;border:0}
.mtc-cat-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:8px 16px;margin:0 0 10px;padding:0;list-style:none}
.mtc-cat-lista .check{align-items:flex-start;font-size:13.5px;line-height:1.4}
.mtc-cat-lista .check input{margin-top:2px}
.mtc-cat-lista b{font-weight:600;color:var(--at-text)}
.mtc-cat-lista .mt-clave,.mtc-cat-lista .mt-cfg-formula{display:block;margin:1px 0 0}
.mtc-cat .form-actions .hint{flex:1 1 220px}
/* El formulario */
.mtc input.mtc-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}   /* gana a input:not([type]) */
.mtc .cat-form input[readonly]{border-style:dashed;background:transparent;color:var(--at-text-2);cursor:default}   /* la clave o el sufijo que ya no cambian */
.mtc .cat-form .mtc-ayuda-sola{margin:-6px 0 0}   /* la ayuda de una fila de dos campos (.form-grid), debajo de los dos */
.mtc .cat-form :is(.form-group,.form-grid){margin-bottom:0}   /* el aire lo pone el gap de .cat-form */
.mtc .cat-form .form-grid{row-gap:14px}
.mtc .cat-form .form-group > .hint{margin:6px 0 0}
.mtc .cat-form textarea.mt-formula{min-height:64px}
input.mt-in.mtc-in-izq{text-align:left}
.mtc-uso{margin:-4px 0 0}
/* Las claves de la cuenta, para insertar en la fórmula con un clic: agrupadas por fuente, en una caja con scroll propio */
.mtc-claves{display:flex;flex-direction:column;gap:8px;max-height:210px;margin-top:8px;padding:8px 10px;overflow:auto;border:1px solid var(--at-line);border-radius:var(--at-r-sm);background:rgba(var(--at-tinta-rgb),.02);scrollbar-width:thin;scrollbar-color:rgba(var(--at-tinta-rgb),.2) transparent}
.mtc-claves-g{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.mtc-claves-l{flex:0 0 100%;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--at-muted)}
button.mtc-chip{min-height:24px;padding:1px 7px;border-radius:6px;border:1px solid var(--at-line);background:rgba(var(--at-tinta-rgb),.05);color:var(--at-text-2);cursor:pointer;line-height:1.4}
button.mtc-chip:hover{border-color:var(--at-zona-line);background:var(--at-zona-tint);color:var(--at-text)}
button.mtc-chip.is-archivada{opacity:var(--at-op-inactivo)}
button.mtc-chip-fn{align-self:flex-start;font-style:italic}
/* El aviso de las sumas que no incluyen la fuente nueva */
.mtc-aviso{display:flex;align-items:flex-start;gap:2px}
.mtc-aviso > .i{flex:0 0 auto;margin-top:2px}
.mtc-aviso p{margin:0}
.mtc-aviso ul{margin:6px 0 0;padding-left:18px}
.mtc-aviso li + li{margin-top:2px}
/* El catálogo: sin ↑↓ (el orden es un campo del formulario); las casillas de los modelos */
.mtc .mt-cfg-item.sin-orden{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nombre acciones" "badges badges"}
.mtk-modelos{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;min-width:0;margin:0;padding:0;border:0}
.mtk-modelos > legend{float:left;width:100%;margin:0 0 4px;padding:0;font-size:13px;font-weight:600;color:var(--at-text-2)}
.mtk-modelos > :not(legend){clear:both}
.mtk-modelos > .check{clear:none}
.mtk-modelos > :is(.hint,.campo-error){flex:1 1 100%;margin:0}
.mtk-activo{align-self:end;min-height:40px;align-items:center}

/* La grilla de objetivos (.mtc-obj): la nota de la vigencia, "Copiar enero a todo el año" debajo del campo de enero (no en
   el <th> de la fila: sería parte de su nombre accesible), la celda en
   conflicto (otro la cambió) y las métricas sin semáforo, plegadas abajo. En el teléfono, una tarjeta por métrica con los
   12 meses en tres columnas (cada campo con su mes arriba): sin scroll de costado. */
.mtc-obj-nota{display:grid;gap:6px;margin:0 0 14px;padding:10px 14px;border:1px solid var(--at-line);border-radius:var(--at-r-sm);background:rgba(var(--at-tinta-rgb),.025);font-size:13px;line-height:1.55;color:var(--at-text-2)}
.mtc-obj-nota p{margin:0}
.mtc-obj-nota b{font-weight:600;color:var(--at-text)}
button.mtc-copiar{display:flex;align-items:center;gap:4px;margin-top:4px;padding:0;border:0;background:none;color:var(--at-zona-300);font:inherit;font-size:11.5px;font-style:normal;font-weight:600;cursor:pointer;white-space:nowrap}
button.mtc-copiar[hidden]{display:none}
button.mtc-copiar:hover{text-decoration:underline}
button.mtc-copiar .i{width:12px;height:12px}
.mtc-obj .mt-tabla :is(th.mt-nombre,td){vertical-align:top}   /* los campos, alineados arriba aunque enero lleve el botón debajo */
.mtc-obj td.is-conflicto input.mt-in{border-style:solid;border-color:var(--at-warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--at-warn) 25%,transparent)}
.mtc-obj-otras{margin-top:14px;padding:6px 12px;border:1px dashed var(--at-line-2);border-radius:var(--at-r-md)}
.mtc-obj-otras > summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:34px;font-size:14px;font-weight:600;color:var(--at-text);cursor:pointer;list-style:none}
.mtc-obj-otras > summary::-webkit-details-marker{display:none}
.mtc-obj-otras > summary .i{color:var(--at-zona-300);transform:rotate(-90deg);transition:transform var(--at-t-fast) var(--at-ease)}
.mtc-obj-otras[open] > summary .i{transform:none}
.mtc-obj-otras > summary .hint{font-weight:500}
.mtc-obj-otras[open] > summary{margin-bottom:8px}
.mtc-obj-otras .mt-wrap{--mt-fondo:var(--at-surface)}
.mtc-obj .mt-form-pie{margin-top:14px}
@media (max-width:760px){
  .mtc-obj .mt-wrap{overflow:visible;max-height:none}
  .mtc-obj .mt-tabla.mt-obj-grid{display:block;width:100%;min-width:0}
  .mtc-obj .mt-tabla.mt-obj-grid :is(thead,caption){display:none}
  .mtc-obj .mt-tabla.mt-obj-grid :is(tbody,tr.mt-unidad,tr.mt-grupo,tr.mt-unidad > th,tr.mt-grupo > th){display:block}
  .mtc-obj .mt-tabla.mt-obj-grid tr.mt-grupo > th{margin-top:6px;border-radius:var(--at-r-xs)}
  .mtc-obj .mt-tabla.mt-obj-grid .mt-grupo-l{position:static}
  .mtc-obj .mt-tabla.mt-obj-grid tr[data-mt-obj-fila]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px 0 14px;border-top:1px solid var(--at-line)}
  .mtc-obj .mt-tabla.mt-obj-grid tr[data-mt-obj-fila]:hover{background:none}
  .mtc-obj .mt-tabla.mt-obj-grid tr[data-mt-obj-fila] > th{grid-column:1 / -1;position:static;min-width:0;max-width:none;padding:0 0 2px;background:none;box-shadow:none}
  .mtc-obj .mt-tabla.mt-obj-grid tr[data-mt-obj-fila] > td{display:block;min-width:0;padding:0;border:0;background:none;box-shadow:none}
  .mtc-obj .mt-tabla.mt-obj-grid td::before{content:attr(data-l);display:block;margin-bottom:3px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--at-muted)}
  .mtc-obj .mt-tabla.mt-obj-grid td.mt-col-actual::before{color:var(--at-zona-300)}
  .mtc-obj .mt-tabla.mt-obj-grid input.mt-in{width:100%}
  .mtc .mt-cfg-item.sin-orden{grid-template-columns:minmax(0,1fr);grid-template-areas:"nombre" "badges" "acciones"}
}
@media (max-width:760px){
  .mtc .mt-cfg-item{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"orden nombre" "orden badges" "orden acciones"}
  .mtc .mt-cfg-acc{justify-content:flex-start}
  .mtc .mt-cfg-item.is-editando{margin:0 -8px;padding-inline:8px}
}

/* metricas_importar.php */
/* Importar la planilla: descargar · subir (dos tarjetas), las pendientes y la vista previa "como la tabla" (las celdas,
   con el .mt-diff del kit), lo que hay que revisar y el formulario para aplicar. */
.mt-imp{display:flex;flex-direction:column;gap:16px;min-width:0}
.mt-imp > .card + .card,.mt-imp-grid > .card + .card{margin-top:0}
.mt-imp-volver{margin:0}
.mt-imp-volver a{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--at-zona-300)}
.mt-imp-volver a:hover{text-decoration:underline}
.mt-imp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.mt-imp-txt{max-width:68ch;margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--at-text-2)}
fieldset.mt-imp-anios{display:flex;flex-wrap:wrap;gap:8px 18px;min-width:0;margin:0 0 16px;padding:0;border:0}
fieldset.mt-imp-anios > legend{width:100%;margin-bottom:6px;padding:0;font-size:13px;font-weight:600;color:var(--at-text-2)}
.mt-imp-form input[type="date"]{max-width:15rem}
.mt-imp-revisar{display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:600;color:var(--at-zona-300)}
/* La cabecera de la vista previa: el cliente bien a la vista, de dónde vino, si es la plantilla de esta cuenta, los conteos */
.mt-imp-cliente{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 4px;font-size:22px;line-height:1.25;color:var(--at-text)}
.mt-imp-cliente b{font-weight:700;overflow-wrap:anywhere}
.mt-imp-cliente-l{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--at-muted)}
.mt-imp-origen{margin:0;font-size:13.5px;line-height:1.5;color:var(--at-text-2);overflow-wrap:anywhere}
.mt-imp-origen b{font-weight:600;color:var(--at-text)}
.mt-imp-meta{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;padding:9px 12px;border:1px solid;border-radius:var(--at-r-sm);font-size:13.5px;line-height:1.45}
.mt-imp-meta .i{flex:0 0 auto;margin-top:1px}
.mt-imp-meta.is-ok{background:var(--at-ok-tint);border-color:var(--at-ok-line);color:var(--at-ok)}
.mt-imp-meta.is-warn{background:var(--at-warn-tint);border-color:var(--at-warn-line);color:var(--at-warn)}
.mt-imp-meta b{color:var(--at-text)}
.mt-imp-conteos{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:8px;margin:16px 0 0;padding:0;list-style:none}
.mt-imp-conteos li{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 12px;border-radius:var(--at-r-sm);background:var(--at-surface-2);border:1px solid var(--at-line);box-shadow:inset 3px 0 0 var(--mt-imp-c,var(--at-line-2))}
.mt-imp-conteos b{font-size:20px;font-weight:700;line-height:1.15;color:var(--at-text)}
.mt-imp-conteos span{font-size:12.5px;color:var(--at-muted)}
.mt-imp-conteos .is-nuevo,.mt-imp-conteos .is-ok{--mt-imp-c:var(--at-ok)}
.mt-imp-conteos .is-cambia{--mt-imp-c:var(--at-warn)}
.mt-imp-conteos .is-firmado{--mt-imp-c:var(--at-bad)}
.mt-imp-conteos .is-obj{--mt-imp-c:var(--at-info)}
.mt-imp-conteos .is-igual b{color:var(--at-text-2)}
/* Para revisar: las banderas de plausibilidad y los avisos de la lectura (con la hoja y la celda) */
.mt-imp-h3{margin:0 0 6px;font-size:13.5px;font-weight:700;color:var(--at-text)}
.mt-imp-h3 .hint{font-weight:500}
.mt-imp-lista{margin:0;padding:0;list-style:none;font-size:13px;line-height:1.5;color:var(--at-text-2)}
.mt-imp-lista li{padding:6px 0;border-top:1px solid var(--at-line);overflow-wrap:anywhere}
.mt-imp-lista li:first-child{border-top:0}
.mt-imp-lista b{font-weight:600;color:var(--at-text)}
.mt-imp-lista .mt-flag{margin-right:6px;color:var(--at-warn);font-weight:700}
.mt-imp-lista + .mt-imp-det{margin-top:14px}
.mt-imp-det > summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-height:30px;font-size:13.5px;font-weight:700;color:var(--at-text);cursor:pointer}
.mt-imp-det > summary .hint{font-weight:500}
.mt-imp-det[open] > summary{margin-bottom:6px}
/* La tabla: lo que la importación no trae (lo de hoy, de contexto) va apagado; bajo el nombre de un especial, su rango */
.mt-diff td.mt-imp-ctx{color:var(--at-muted)}
.mt-imp-rango{font-size:11px;font-weight:500;color:var(--at-muted)}
.mt-imp-nota{margin:10px 0 0}
.mt-imp-iguales{margin-left:4px;font-weight:600;color:var(--at-zona-300)}
.mt-imp-iguales:hover{text-decoration:underline}
.mt-imp-todo-igual{margin:0}
.mt-imp-leyenda{margin:-4px 0 0}
.mt-imp-leyenda s{text-decoration-thickness:1px}
/* Aplicar: la confirmación del cliente (si la planilla no trae su marca), el motivo, firmar; descartar, aparte */
.mt-imp-confirmar textarea{min-height:84px}
.mt-imp-confirmo{padding:10px 12px;border-radius:var(--at-r-sm);background:var(--at-warn-tint);border:1px solid var(--at-warn-line)}
.mt-imp-confirmo .check{color:var(--at-text)}
.mt-imp-oblig{font-weight:600;color:var(--at-bad-text)}
.mt-imp-confirmar .form-group > small.hint{display:block;margin:6px 0 0 26px}
.mt-imp-confirmar .form-actions .hint{flex:1 1 260px}
.mt-imp-descartar{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--at-line)}
@media (max-width:900px){
  .mt-imp-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .mt-imp-cliente{font-size:19px}
  .mt-imp-conteos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mt-imp-confirmar .form-group > small.hint{margin-left:0}
}

/* Traer de las plataformas (metricas_importar.php) y conexiones.php: docs/plan-conectores.md */
.mt-imp-fuentes{margin:0 0 16px}
.mt-imp-traer{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 16px}
.mt-imp-traer .form-group{flex:1 1 240px;min-width:0}
.mt-imp-traer .form-actions{flex:1 1 100%}
.cx{display:flex;flex-direction:column;gap:16px;min-width:0}
.cx > .card + .card{margin-top:0}
.cx-txt{max-width:72ch;margin:0;font-size:14px;line-height:1.55;color:var(--at-text-2)}
.cx-datos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.cx-datos li{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 12px;border-radius:var(--at-r-sm);background:var(--at-surface-2);border:1px solid var(--at-line)}
.cx-datos span{font-size:12.5px;color:var(--at-muted)}
.cx-datos b{font-size:16px;font-weight:700;color:var(--at-text);overflow-wrap:anywhere}
.cx-nota{margin:12px 0 0}
.cx-fila .grow .badge{margin-left:6px}
.cx-id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.cx-acc{flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end;font-size:13.5px}
.cx-acc form{margin:0}
.cx-asignar{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cx-asignar select{width:15rem;max-width:100%;min-height:32px}
.cx-sug{flex-basis:100%;text-align:right;font-size:12px;color:var(--at-hint)}
@media (max-width:640px){
  .cx-fila{flex-wrap:wrap}
  .cx-fila .grow{flex:1 1 calc(100% - 32px)}
  .cx-acc{flex:1 1 100%;margin-left:26px;justify-content:flex-start}
  .cx-asignar select{width:auto;flex:1 1 12rem}
  .cx-sug{text-align:left}
}

/* integración (ficha, informe, Inicio) */
/* El informe (informe_form.php): arriba del formulario y fuera de la grilla del informe anterior, la semana que analiza
   (la tabla compacta y la carga de sus números en un <details>, abierto mientras falte algo); un filete la separa de los
   campos del informe. Sin informe anterior, los campos conservan su ancho de lectura (.inf-solo). */
.inf-met{margin:0 0 22px;padding:0 0 22px;border-bottom:1px solid var(--at-line)}
.inf-met-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.inf-met-h h2{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.inf-met-h h2 .i{color:var(--at-zona-300)}
.inf-met-h .btn{margin-left:auto}
.inf-met-sub{margin:4px 0 12px;font-size:13.5px;color:var(--at-text-2)}
.inf-met-sub strong{color:var(--at-text);font-weight:600}
.inf-met-carga{margin-top:16px;border:1px solid var(--at-line);border-radius:var(--at-r-md)}
.inf-met-carga > summary{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:48px;padding:10px 44px 10px 14px;list-style:none;cursor:pointer;font-size:14px;font-weight:600;color:var(--at-text)}
.inf-met-carga > summary::-webkit-details-marker{display:none}
.inf-met-carga > summary:hover{background:rgba(var(--at-tinta-rgb),.03)}
.inf-met-carga-t{display:inline-flex;align-items:center;gap:8px}
.inf-met-carga-t .i{color:var(--at-zona-300)}
.inf-met-carga > summary .hint{font-weight:500}
.inf-met-chev{position:absolute;top:16px;right:14px;color:var(--at-muted);transition:transform .15s var(--at-ease)}
.inf-met-carga[open] > summary{border-bottom:1px solid var(--at-line)}
.inf-met-carga[open] .inf-met-chev{transform:rotate(180deg)}
.inf-met-carga > .mt-form{padding:14px}
.inf-met-carga .alert{margin:0}
/* Datos parciales (§0.16): el aviso con la casilla para confirmar la semana que analiza, y la ayuda de una semana en curso */
.inf-met-parcial{display:flex;flex-direction:column;gap:8px;margin:0 0 14px;padding:10px 12px;border-radius:var(--at-r-sm);background:var(--at-warn-tint);border:1px solid var(--at-warn-line);font-size:13.5px;line-height:1.5;color:var(--at-text-2)}
.inf-met-parcial p{margin:0}
.inf-met-parcial b{color:var(--at-warn)}
.inf-met-parcial .check{color:var(--at-text);font-weight:600}
.inf-met-parcial-ayuda{margin:0 0 14px}
.mper-parcial-ayuda{margin:14px 0 0}
.inf-met-sin{display:flex;align-items:flex-start;gap:8px;margin:0 0 20px;padding:12px 14px;border:1px dashed var(--at-line-2);border-radius:var(--at-r-md);font-size:13.5px;color:var(--at-text-2)}
.inf-met-sin .i{flex:0 0 auto;margin-top:2px;color:var(--at-zona-300)}
.inf-met-sin a{color:var(--at-zona-300);font-weight:600;text-decoration:underline}
.inf-solo{max-width:740px}
/* Después de un conflicto, debajo del campo: lo que tiene ahora la tabla (cuando no coincide con lo escrito) */
.mt-fila > .mt-ahora{grid-column:2 / -1;margin:0;font-size:13px;font-weight:600;color:var(--at-warn)}

/* La ficha (cliente_detalle.php): la sección #metricas (el estado de la semana anterior y del cierre, y la tabla
   compacta) y, en cada informe, la tira con los valores de la semana que analiza (con su semáforo, nunca solo color). */
#metricas .card-h .end{flex-wrap:wrap;justify-content:flex-end}
/* En la columna principal (8/12), las semanas con su lunes ("28/09"; el rango entero va en el .sr) y la primera columna
   más angosta: así el cierre del mes entra sin scroll desde 1280 px */
#metricas .mt-wrap{--mt-col1:clamp(124px,11vw,168px)}
#metricas .mt-solo-ancho{display:none}
.ficha-met-estado{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0 0 12px}
.ficha-met-estado .badge{gap:6px}
.ficha-met-estado .badge .i{width:14px;height:14px}
.inf-mt{margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--at-line)}
.inf-mt-tira{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.inf-mt-item{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:100%;padding:6px 10px;border-radius:var(--at-r-sm);border:1px solid var(--at-line);background:var(--at-surface)}
.inf-mt-n{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 5px;font-size:11.5px;font-weight:600;color:var(--at-text-2)}
.inf-mt-n .mt-f{width:15px;height:15px;margin-right:0;font-size:10.5px}
.inf-mt-f{font-weight:500;color:var(--at-muted)}
.inf-mt-v{font-size:14px;font-weight:700;color:var(--at-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.inf-mt-item.is-ok{background:var(--at-ok-tint);border-color:var(--at-ok-line)}
.inf-mt-item.is-warn{background:var(--at-warn-tint);border-color:var(--at-warn-line)}
.inf-mt-item.is-bad{background:var(--at-bad-tint);border-color:var(--at-bad-line)}
.inf-mt-d{margin-left:6px;font-size:11.5px;font-weight:600;color:var(--at-text-2)}   /* el desvío del ámbar y del rojo, como la línea .mt-d */
.inf-mt-item.is-ok .inf-mt-v{color:var(--at-ok)}
.inf-mt-item.is-warn .inf-mt-v{color:var(--at-warn)}
.inf-mt-item.is-bad .inf-mt-v{color:var(--at-bad-text)}
.inf-mt-item:is(.is-ok,.is-warn,.is-bad) :is(.inf-mt-n,.inf-mt-f){color:var(--at-text-2)}   /* sobre el tinte, --at-muted no llega a AA */
@media (max-width:640px){
  .mt-fila > .mt-ahora{grid-column:1;order:1}
  .inf-met-h .btn{margin-left:0}
  .inf-met-carga > .mt-form{padding:12px 10px}
}
@media print{
  .inf-met-carga,.inf-met-h .btn{display:none!important}
}

/* ── Auditorías por prioridad (16/10; auditorias.php, includes/auditorias.php) ─────────────────────────────────────── */
.aud-kpis{margin-bottom:1.25rem}
.aud-semana{margin-bottom:1.25rem}
.aud-lista{list-style:none;margin:0;padding:0}
.aud-item{display:flex;align-items:flex-start;gap:14px;padding:14px 24px;border-bottom:1px solid var(--at-line)}
.aud-item.is-hecha .aud-cuerpo{opacity:.62}
.aud-n{flex:0 0 28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-weight:700;font-size:13px;color:var(--at-text-2);background:var(--at-surface-3);border:1px solid var(--at-line-2)}
.aud-cuerpo{flex:1;min-width:0}
.aud-titulo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.aud-titulo a{font-weight:600;color:var(--at-text)}
.aud-motivos{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--at-text-2)}
.aud-motivos li{margin:2px 0}
.aud-accion{flex:0 0 auto;align-self:center}
.aud-buckets{display:flex;flex-wrap:wrap;gap:8px}
.aud-bucket{flex:1;min-width:64px;display:flex;flex-direction:column;align-items:center;padding:6px;border:1px solid var(--at-line);border-radius:var(--at-r-sm)}
.aud-bucket strong{font-size:16px;color:var(--at-text)}
.aud-bucket span{font-size:11px;color:var(--at-muted)}
.aud-bucket.is-actual{background:var(--at-zona-tint);border-color:var(--at-zona-line)}
.aud-porque{max-width:340px;font-size:13px;color:var(--at-text-2)}
.aud-reglas ul{margin:0;padding-left:18px;font-size:14px;color:var(--at-text-2)}
.aud-reglas li{margin:6px 0}
@media (max-width:640px){
  .aud-item{flex-wrap:wrap;padding:12px 16px}
  .aud-accion{flex-basis:100%;padding-left:42px}
  .aud-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aud-kpis .kpi{min-height:0;padding:12px 14px}
  .aud-kpis .kpi-v{margin-top:4px}
}
.aud-form-prio{margin-bottom:16px;padding:12px 14px;border:1px solid var(--at-line);border-radius:var(--at-r-sm);background:var(--at-surface-2)}

/* ============================================================
   calculadora.php — La calculadora de rentabilidad por cuenta (2026-10)
   ------------------------------------------------------------
   Dos columnas: los supuestos (formulario) y, al costado, el equilibrio, la meta
   y las palancas, que assets/calculadora.js recalcula mientras se tipea.
   Solo tokens --at-*: anda igual en los dos temas.
   ============================================================ */
.calc-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:22px;align-items:start}
.calc-col{display:flex;flex-direction:column;gap:22px;min-width:0}

/* Los escenarios de la cuenta: las pestañas y sus acciones */
.calc-escenarios{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px}
.calc-escenarios-acc{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:auto}
.calc-inline{display:flex;align-items:center;gap:6px}
.calc-input-sm{min-height:32px;padding:4px 10px;font-size:13px}

/* Sin calculadora todavía */
.calc-vacio{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 16px;text-align:center}
.calc-vacio .ring{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--at-zona-tint);border:1px solid var(--at-zona-line);color:var(--at-zona-300)}
.calc-vacio h2{font-size:17px;font-weight:600}
.calc-vacio p{max-width:60ch;margin:0;font-size:14px;color:var(--at-muted)}
.calc-vacio-acc{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px}

/* Grupos de opciones (modelo, medición, tipo de meta): radios con cuerpo de chip */
.calc-opciones{border:0;padding:0;margin:0 0 18px}
.calc-opciones legend{margin-bottom:8px;font-size:13px;font-weight:600;color:var(--at-text-2)}
.calc-opciones .calc-opcion,.calc-opcion{display:inline-flex;align-items:center;gap:7px;min-height:34px;margin:0 6px 6px 0;padding:4px 12px;border-radius:var(--at-pill);background:var(--at-surface-2);border:1px solid var(--at-line-2);font-size:13.5px;font-weight:600;color:var(--at-text-2);cursor:pointer}
.calc-opcion:hover{color:var(--at-text);background:var(--at-surface-3)}
.calc-opcion:has(input:checked){background:var(--at-zona-tint);border-color:var(--at-line-activo);color:var(--at-text)}
.calc-opcion:has(input:focus-visible){outline:2px solid var(--at-zona);outline-offset:2px}
.calc-opcion:has(input:disabled){opacity:.6;cursor:default}
.calc-opcion input{accent-color:var(--at-zona)}

/* Los costos variables: una fila por concepto */
.calc-costos{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.calc-costo{display:grid;grid-template-columns:minmax(0,1fr) 128px auto;align-items:center;gap:6px}
.calc-pct{position:relative;display:flex;align-items:center}
.calc-pct > .form-control{padding-right:30px;text-align:right;font-variant-numeric:tabular-nums}
.calc-sufijo{position:absolute;right:11px;font-size:13px;color:var(--at-muted);pointer-events:none}

/* El resumen del margen, abajo de los costos */
.calc-resumen{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:12px 14px;border-radius:var(--at-r-sm);background:var(--at-surface-2);border:1px solid var(--at-line)}
.calc-resumen > div{flex:1 1 150px;min-width:0}
.calc-resumen dt{font-size:12.5px;color:var(--at-muted)}
.calc-resumen dd{margin:2px 0 0;font-family:var(--at-font-num);font-size:19px;font-weight:500;font-variant-numeric:tabular-nums}

.calc-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:4px 18px}
.calc-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:4px}
.calc-acciones .hint{flex:1 1 220px}

/* El equilibrio y la meta */
.calc-frase{margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--at-text-2)}
.calc-frase:empty{display:none}
.calc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px}
.calc-kpis .kpi{min-height:104px;padding:14px 16px}
.calc-kpis .kpi-v{font-size:30px}
.calc-kpis-4 .kpi-v{font-size:25px}
.calc-meta-campos{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:14px}
.calc-meta-campos .calc-opciones{margin:0}
.calc-meta-valor{flex:1 1 200px;display:flex;align-items:center;gap:10px;min-width:0}
.calc-meta-valor > .form-control{width:100px;text-align:right;font-variant-numeric:tabular-nums}
.calc-meta-valor > input[type=range]{flex:1;min-width:90px;accent-color:var(--at-zona)}
.calc-veredicto{margin:12px 0 0;font-size:14px;color:var(--at-text-2)}
.calc-veredicto:empty{display:none}
/* El tono de la meta: arriba o abajo del equilibrio (con el texto del veredicto al lado, nunca solo color) */
.calc-kpis.tone-ok .kpi-v{color:var(--at-ok)}
.calc-kpis.tone-bad .kpi-v{color:var(--at-bad-text)}

/* Las palancas */
.calc-lista{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.calc-lista li{display:flex;align-items:baseline;gap:9px;font-size:14px;color:var(--at-text-2)}
.calc-lista strong{color:var(--at-text);font-weight:600;font-variant-numeric:tabular-nums}
.calc-flecha{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--at-zona-tint);border:1px solid var(--at-zona-line);color:var(--at-zona-300);font-size:12px}

.calc-fila-actual > *{background:var(--at-zona-tint)}

/* El historial */
.calc-hist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.calc-hist li{display:grid;grid-template-columns:132px minmax(0,1fr) auto;align-items:baseline;gap:10px;padding:7px 2px;border-bottom:1px solid var(--at-line);font-size:13.5px}
.calc-hist li:last-child{border-bottom:0}
.calc-hist-fecha{color:var(--at-muted);font-variant-numeric:tabular-nums}
.calc-hist-que{color:var(--at-text-2);overflow-wrap:anywhere}
.calc-hist-quien{color:var(--at-hint);white-space:nowrap}

@media (max-width:1100px){
  .calc-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .calc-escenarios-acc{margin-left:0}
  .calc-costo{grid-template-columns:minmax(0,1fr) 92px auto}
  .calc-kpis .kpi{min-height:0}
  .calc-hist li{grid-template-columns:minmax(0,1fr);gap:2px}
  .calc-hist-quien{white-space:normal}
}

/* Los gráficos de la calculadora (plan §8): SVG a mano, solo con tokens, en los dos temas y en la impresión.
   El PHP (includes/calculadora_svg.php) dibuja la estructura y assets/calculadora.js cambia clases y atributos. */
.calc-explorar{margin-top:22px}
.calc-grafico{margin-top:18px}
.calc-grafico h3{font-size:14px;font-weight:600;margin-bottom:4px}
.calc-grafico .hint{margin:0 0 10px}
.calc-graficos-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:18px}
.calc-g{display:block;width:100%;height:auto;overflow:visible;font-family:var(--at-font-num)}
.calc-g-fondo{fill:var(--at-surface-2);stroke:var(--at-line)}
.calc-g-eje{fill:var(--at-muted);font-size:10.5px;font-variant-numeric:tabular-nums}
.calc-g-titulo-eje{fill:var(--at-hint);font-size:11px;font-family:var(--at-font)}
.calc-g-celda{fill:var(--at-text-2);font-size:9.5px;font-variant-numeric:tabular-nums;pointer-events:none}
.calc-g-marca{fill:none;stroke:var(--at-text);stroke-width:2;stroke-dasharray:3 2}
.calc-g-cero{stroke:var(--at-line-2);stroke-width:1.5}
.calc-g-guia{stroke:var(--at-muted);stroke-width:1;stroke-dasharray:4 3}
.calc-g-guia-meta{stroke:var(--at-info)}
.calc-g-linea{stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.calc-g-linea-zona{stroke:var(--at-zona-300,var(--at-zona))}
.calc-g-linea-eq{stroke:var(--at-muted)}
.calc-g-linea-meta{stroke:var(--at-info)}
.calc-g-oculto{display:none}
/* El calor: cuatro pasos por signo. El número de cada celda va igual, así el color no es el único portador. */
.calc-cal{stroke:none}
.calc-cal-sin{fill:var(--at-surface-3)}
.calc-cal-p1{fill:color-mix(in srgb,var(--at-ok) 12%,transparent)}
.calc-cal-p2{fill:color-mix(in srgb,var(--at-ok) 26%,transparent)}
.calc-cal-p3{fill:color-mix(in srgb,var(--at-ok) 42%,transparent)}
.calc-cal-p4{fill:color-mix(in srgb,var(--at-ok) 60%,transparent)}
.calc-cal-n1{fill:color-mix(in srgb,var(--at-bad) 12%,transparent)}
.calc-cal-n2{fill:color-mix(in srgb,var(--at-bad) 26%,transparent)}
.calc-cal-n3{fill:color-mix(in srgb,var(--at-bad) 42%,transparent)}
.calc-cal-n4{fill:color-mix(in srgb,var(--at-bad) 60%,transparent)}
.calc-rangos{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;color:var(--at-muted)}
.calc-rangos label{display:inline-flex;align-items:center;gap:6px}
.calc-rangos .form-control{width:92px;text-align:right;font-variant-numeric:tabular-nums}
.calc-leyenda{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 0;font-size:12.5px;color:var(--at-muted)}
.calc-chip{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px}
.calc-chip-marca{border:2px dashed var(--at-text);background:transparent}
.calc-chip-eq{height:3px;border-radius:2px;background:var(--at-muted)}
.calc-chip-meta{height:3px;border-radius:2px;background:var(--at-info)}
@media (max-width:640px){
  .calc-g-celda{display:none}        /* en el teléfono no entra el número de cada celda: queda la tabla equivalente */
  .calc-rangos .form-control{width:76px}
}

/* La vista imprimible del análisis (includes/calculadora_hoja.php, plan §9): una hoja sin el shell.
   La impresión va siempre en claro (tokens.css, @media print) y no depende del JS. */
.calc-hoja-body{background:var(--at-bg)}
.calc-hoja{max-width:860px;margin:0 auto;padding:28px 24px 48px}
.calc-hoja-cab{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--at-line)}
.calc-hoja-marca{display:flex;align-items:center;gap:14px;min-width:0}
.calc-hoja h1{font-size:22px;font-weight:600;letter-spacing:-.01em}
.calc-hoja-sub{margin:2px 0 0;font-size:13.5px;color:var(--at-muted)}
.calc-hoja-fecha{margin-left:auto;font-size:12.5px;color:var(--at-hint);white-space:nowrap}
.calc-hoja-frase{margin:0 0 20px;font-size:16px;line-height:1.5;color:var(--at-text)}
.calc-hoja-sec{margin-bottom:26px}
.calc-hoja-sec > h2{margin-bottom:10px;font-size:15px;font-weight:600}
.calc-hoja-sec > p{font-size:14px;color:var(--at-text-2)}
.calc-hoja-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:10px 18px;margin:0 0 14px}
.calc-hoja-datos dt{font-size:12.5px;color:var(--at-muted)}
.calc-hoja-datos dd{margin:2px 0 0;font-family:var(--at-font-num);font-size:17px;font-variant-numeric:tabular-nums}
.calc-hoja-tabla{margin-top:10px}
.calc-hoja-tabla caption{text-align:left;font-size:12.5px;color:var(--at-muted);padding-bottom:6px}
.calc-hoja-notas{margin-top:12px;font-size:13.5px;color:var(--at-text-2)}
.calc-hoja-pie{margin-top:28px;padding-top:14px;border-top:1px solid var(--at-line);font-size:11.5px;color:var(--at-hint)}
.calc-hoja-pie p{margin:0 0 4px;max-width:70ch}
.calc-hoja-acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
@media print{
  .calc-hoja{max-width:none;padding:0}
  .calc-hoja-acc{display:none}                 /* los botones no se imprimen */
  .calc-hoja-sec{break-inside:avoid}
  .calc-hoja-quiebre{break-before:page}        /* los gráficos, en su propia hoja */
  .calc-grafico{break-inside:avoid}
  .calc-kpis .kpi{box-shadow:none}
}