/* =============================================================
   ESCUCHA360 — Panel de cliente (dashboard.css)
   -------------------------------------------------------------
   Static HTML/CSS/JS served by FastAPI at /app. This stylesheet
   belongs ONLY to the client dashboard (index.html). The staff
   admin panel (admin.html) keeps its own app.css untouched.

   Every color/font/radius below references the design tokens in
   docs/e360-handoff/DESIGN_TOKENS.css — the single source of
   truth. No hex/font is invented here; the :root block is copied
   verbatim from that file. Surfaces are runtime-swappable by the
   "Ambiente" engine (see index.html); brand/ink/status tokens
   never change.
   ============================================================= */

:root {
  /* ---- Brand: sage-teal ramp ---- */
  --e360-deep:    #0F6E56;
  --e360-mid:     #1D9E75;
  --e360-tint:    #E1F5EE;
  --e360-tint-2:  #F0FAF6;

  /* ---- Ink (text) ---- */
  --e360-ink:     #1D3A31;
  --e360-ink-2:   #3A4A44;
  --e360-ink-3:   #6E7A74;
  --e360-ink-4:   #9AA39E;

  /* ---- Surfaces (RUNTIME-SWAPPABLE via Ambiente) ---- */
  --e360-sand:    #F1EFE8;
  --e360-paper:   #FBFAF6;
  --e360-paper-2: #FFFFFF;
  --e360-card-border: #E4E1D7;

  /* ---- Rules / borders ---- */
  --e360-rule:    #E4E1D7;
  --e360-rule-2:  #EDEBE3;

  /* ---- Semantic status ---- */
  --e360-crit:    #A32D2D;  --e360-crit-bg: #FCEBEB;
  --e360-warn:    #854F0B;  --e360-warn-bg: #FAEEDA;
  --e360-good:    #3B6D11;  --e360-good-bg: #EAF3DE;

  /* ---- Categorical (C5, donut de temas) — slots FIJOS por rango, sage primero.
     Validados por modo (banda de luminosidad OKLCH, piso de croma, separación CVD
     Machado ≥12 en pares adyacentes, contraste ≥3:1 vs tarjeta). "Otros" es el
     neutro y no cuenta como slot. Nunca generar tonos extra: la cola va a Otros. ---- */
  --e360-cat-1: #0A7F5B;
  --e360-cat-2: #2A78D6;
  --e360-cat-3: #B07C10;
  --e360-cat-4: #7A5BC9;
  --e360-cat-5: #C05572;
  --e360-cat-other: #9AA39E;

  /* ---- Typography ---- */
  --e360-font: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* ---- Layout scale ---- */
  --e360-radius:      10px;
  --e360-radius-card: 12px;
  --e360-radius-pill: 20px;

  --e360-nav-w:            236px;
  --e360-nav-w-collapsed:  64px;
  --e360-right-w:          320px;
  --e360-topbar-h:         60px;

  --e360-gap:    16px;
  --e360-pad:    22px;

  /* ---- Motion ---- */
  --e360-ease:   cubic-bezier(.4, 0, .2, 1);
  --e360-dur:    .26s;
  --e360-dur-fast: .14s;

  /* ---- Text ON accent surfaces (deep-bg buttons/avatars). Blanco en claro; tinta
     oscura en modo oscuro, donde el accent sube de luminosidad para dar contraste. ---- */
  --e360-on-accent: #FFFFFF;

  /* ---- Scrollbar (par claro; el oscuro lo redefine) ---- */
  --e360-scroll: #d8d4c8;
  --e360-scroll-hover: #c4c0b2;
}

/* =============================================================
   MODO OSCURO (C7) — [data-theme="dark"] en <html>, conmutado por
   el motor de Aspecto (index.html) y persistido en e360_theme.
   Invierte superficies, tinta, reglas y fondos de estado, no solo
   las 4 superficies del "Ambiente" claro. La identidad sage se
   mantiene: el accent sube de luminosidad (#4CC29A) únicamente
   para conservar contraste AA sobre fondos oscuros; el logotipo y
   la marca no cambian. Pares verificados ≥4.5:1: tinta/tarjetas,
   chips de severidad (texto/fondo), accent sobre tint, texto
   on-accent sobre botones deep.
   ============================================================= */
:root[data-theme="dark"] {
  --e360-deep:    #4CC29A;
  --e360-mid:     #35A87F;
  --e360-tint:    #1D3A30;
  --e360-tint-2:  #182E27;

  --e360-ink:     #E9F0EB;
  --e360-ink-2:   #C3D2CA;
  --e360-ink-3:   #92A59B;
  --e360-ink-4:   #66786F;

  --e360-sand:    #131D18;
  --e360-paper:   #1A2620;
  --e360-paper-2: #202E27;
  --e360-card-border: #31423A;

  --e360-rule:    #31423A;
  --e360-rule-2:  #283830;

  --e360-crit:    #E89090;  --e360-crit-bg: #3E2323;
  --e360-warn:    #DCAB61;  --e360-warn-bg: #3B2E18;
  --e360-good:    #A5C878;  --e360-good-bg: #27351A;

  /* Categórico oscuro: selección PROPIA validada contra la tarjeta #202E27 —
     no un flip automático del claro. */
  --e360-cat-1: #3BAA82;
  --e360-cat-2: #5B93DD;
  --e360-cat-3: #B8862F;
  --e360-cat-4: #9377D6;
  --e360-cat-5: #C97389;
  --e360-cat-other: #66786F;

  --e360-on-accent: #0E2019;

  --e360-scroll: #3A4C43;
  --e360-scroll-hover: #4A5F55;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow-x: hidden; }
body {
  font-family: var(--e360-font);
  background: var(--e360-sand); color: var(--e360-ink);
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.center, .nav, .right, .card, .topbar, .nav-top, .right-head {
  transition: background .5s ease, border-color .5s ease;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .rise { opacity: 1 !important; transform: none !important; }
}
.tnum { font-variant-numeric: tabular-nums; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: var(--e360-deep); }
.hidden { display: none !important; }
::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-thumb { background: var(--e360-scroll); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--e360-scroll-hover); }

/* Visible focus ring for keyboard users (a11y floor) */
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--e360-tint); border-radius: 6px; }

/* ============ LOGIN / RESET ============ */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--e360-sand);
}
.login-card {
  width: 100%; max-width: 380px; background: var(--e360-paper);
  border: 0.5px solid var(--e360-rule); border-radius: 16px;
  padding: 32px 30px; box-shadow: 0 20px 60px rgba(29, 58, 49, .10);
  display: flex; flex-direction: column;
}
.login-brand { display: flex; justify-content: center; margin-bottom: 18px; }
.login-brand img { height: 40px; width: auto; }
.login-card h2 { font-size: 19px; font-weight: 600; color: var(--e360-ink); text-align: center; }
.login-card > p { font-size: 13px; color: var(--e360-ink-3); text-align: center; margin: 6px 0 22px; }
.login-card label { font-size: 12px; font-weight: 600; color: var(--e360-ink-2); margin: 12px 0 5px; }
.login-card input, .login-card select {
  width: 100%; padding: 11px 13px; font-family: inherit; font-size: 14px;
  border: 0.5px solid var(--e360-rule); border-radius: var(--e360-radius);
  background: var(--e360-paper-2); color: var(--e360-ink);
}
.login-card select { cursor: pointer; }
.login-card input:focus, .login-card select:focus { outline: none; border-color: var(--e360-mid); box-shadow: 0 0 0 3px var(--e360-tint); }
.login-card button[type="submit"] {
  margin-top: 22px; padding: 12px; border-radius: var(--e360-radius);
  background: var(--e360-deep); color: var(--e360-on-accent); font-size: 14px; font-weight: 600;
  transition: filter var(--e360-dur-fast);
}
.login-card button[type="submit"]:hover { filter: brightness(1.07); }
.err { color: var(--e360-crit); font-size: 12.5px; margin-top: 12px; min-height: 16px; line-height: 1.4; }
.err.ok { color: var(--e360-good); }

/* Google Sign-In (GATE 2, reubicado en 7d): DENTRO de la tarjeta, bajo "Entrar", con el divisor
   "— o —" (las líneas laterales las pintan los ::before/::after). Oculto (hidden) hasta que
   /api/auth/config confirme que hay client id configurado. */
.login-alt { display: flex; flex-direction: column; align-items: center; margin-top: 16px; }
.login-alt[hidden] { display: none; }
.login-divider { display: flex; align-items: center; width: 100%; margin: 0 0 14px;
  color: var(--e360-ink-3); font-size: 12px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 0.5px; background: var(--e360-rule); }
.login-divider span { padding: 0 12px; }
/* El iframe/botón que pinta GIS se centra en el ancho completo de la tarjeta (el `width` numérico
   exacto se pasa en renderButton — GIS no acepta 100%). */
#google-btn { width: 100%; display: flex; justify-content: center; }

/* Turnstile (GATE 2b/6b): contenedor ÚNICO a nivel de body — sirve al login Y al chooser pending
   (el widget debe existir en toda ruta que pida token, no solo cuando esta carga pasó por el
   login). Invisible casi siempre (interaction-only); si Cloudflare exige un reto interactivo,
   aparece como overlay inferior centrado, por encima de modales y toast (70 > 50/60). */
#turnstile-box { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 70; }
#turnstile-box:empty { display: none; }

/* Estado PENDING (D-A): sesión válida sin tenant — bienvenida, NO error. GATE 4c pone aquí el chooser. */
.state-pending { max-width: 520px; margin: 48px auto; text-align: center; padding: 0 20px; }
.state-pending h2 { font-size: 20px; font-weight: 600; color: var(--e360-ink); margin-bottom: 10px; }
.state-pending p { font-size: 14px; color: var(--e360-ink-2); line-height: 1.5; margin: 6px 0; }
.state-pending p.muted { font-size: 13px; color: var(--e360-ink-3); }

/* GATE 7c — ONBOARDING STANDALONE: la superficie completa de una sesión pending, con el layout
   del login (login-wrap/login-card) — jamás el shell. La tarjeta es más ancha que la del login
   (las tarjetas de caso de uso/plan necesitan aire) pero conserva fondo, borde y sombra. */
.onboarding-card { max-width: 480px; }
.ob-sub { font-size: 13px; color: var(--e360-ink-3); text-align: center; margin: 6px 0 0; line-height: 1.5; }
.ob-center { display: flex; justify-content: center; }
.ob-back { margin: 16px auto 0; display: block; background: none; border: none;
  color: var(--e360-ink-3); font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.ob-back:hover { color: var(--e360-ink-2); }
/* Pedido directo del usuario: los pasos del wizard cambiaban de golpe — "cortes abruptos".
   El contenido viejo ya se fue en el mismo tick del innerHTML (nada que animar de salida);
   el nuevo entra deslizándose desde un lado, como un carrusel — hacia la derecha avanzando,
   hacia la izquierda al ir "Atrás" (obStepIn, index.html). Sin base opacity/transform fuera
   del keyframe a propósito: así, si `prefers-reduced-motion` cancela la animación (regla
   global de arriba, `* { animation: none !important }`), el contenido simplemente aparece
   fijo en vez de quedarse invisible — no hace falta una excepción aparte como la de `.rise`.
   2026-08-25 (segunda vuelta, reporte directo: "no veo nada"): la v1 (solo translateX + la
   curva plana --e360-ease, sin rebote) resultó demasiado sutil para notarse a simple vista —
   mismo problema que ya se había encontrado antes con el pop-in de los tours (comentario de
   e360TourPopIn, más abajo en este archivo). Ahora usa la MISMA curva con rebote
   (cubic-bezier(.34,1.56,.64,1)) y un leve overshoot de escala — se ve y se siente como el
   mismo sistema de animación que los tours, no como dos cosas distintas. */
.ob-step-fwd { animation: obStepInFwd .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.ob-step-back { animation: obStepInBack .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes obStepInFwd {
  0%   { opacity: 0; transform: translateX(36px) scale(.96); }
  55%  { opacity: 1; transform: translateX(-6px) scale(1.015); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes obStepInBack {
  0%   { opacity: 0; transform: translateX(-36px) scale(.96); }
  55%  { opacity: 1; transform: translateX(6px) scale(1.015); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.chooser-card-seats { font-size: 12.5px; font-weight: 600; color: var(--e360-ink-2); }

/* 140 (pedido directo del usuario, 2026-09-05) — fade-in de UNA vez para el swap #shell↔
   #onboarding cuando lo dispara "Ver la bienvenida completa otra vez" (Ayuda), disparado desde
   una sesión YA activa (a diferencia del boot normal, donde el toggle instantáneo de siempre
   basta: no hay nada previo que "saltar"). index.html::showOnboarding()/showDash() ponen esta
   clase solo cuando replayFullOnboarding() armó la bandera — un login normal nunca la ve. */
.surface-fade-in { animation: surfaceFadeIn .4s var(--e360-ease) both; }
@keyframes surfaceFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* GATE 6f/7c — tarjetas del chooser (paso 1: caso de uso SIN precio; paso 2: plan con precio y
   asientos), cada una con CTA propio. Mismo sistema visual del dashboard (tokens --e360-*:
   Hanken Grotesk + sage). */
.chooser-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; text-align: left; }
.chooser-card {
  display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 16px 18px;
  border: 1px solid var(--e360-rule); border-radius: var(--e360-radius); background: var(--e360-surface);
  transition: border-color var(--e360-dur-fast), box-shadow var(--e360-dur-fast);
}
.chooser-card:hover { border-color: var(--e360-mid); box-shadow: 0 0 0 3px var(--e360-tint); }
.chooser-card-title { font-size: 15px; font-weight: 600; color: var(--e360-ink); }
.chooser-card-desc { font-size: 13px; color: var(--e360-ink-3); line-height: 1.45; }
.chooser-card-price { font-size: 14px; font-weight: 600; color: var(--e360-deep); margin-top: 4px; }
.chooser-card .chooser-card-cta { margin-top: 10px; align-self: flex-start; }
.chooser-note:empty { display: none; }
.btn-primary {
  margin-top: 14px; padding: 10px 18px; border-radius: var(--e360-radius);
  background: var(--e360-deep); color: var(--e360-on-accent); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: filter var(--e360-dur-fast);
}
.btn-primary:hover { filter: brightness(1.07); }
/* GATE 8f — botón SECUNDARIO de la pantalla de suspensión: acción alterna ("Crear una cuenta
   nueva"), nunca el CTA principal — delineado, sin relleno de acento. */
.btn-secondary {
  margin-top: 14px; padding: 10px 18px; border-radius: var(--e360-radius);
  background: var(--e360-surface); color: var(--e360-ink-2); border: 1px solid var(--e360-rule);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color var(--e360-dur-fast), color var(--e360-dur-fast);
}
.btn-secondary:hover { border-color: var(--e360-mid); color: var(--e360-ink); }

/* ============ AUTH CARD — login/registro (mockup-onboarding-segmentacion) ============
   #authCard reemplaza a #login como pantalla de entrada (showLogin(), index.html). #login queda
   intacto y sin usar — código legacy, revertir es repuntar showLogin() otra vez. */
.auth-pane[hidden] { display: none; }
/* Bug reportado (login/registro con texto y botón pegados a la izquierda): `.login-card > p`
   y el stretch de `.login-card` (flex-column) solo alcanzan a un HIJO DIRECTO — el subtítulo
   ("Escucha 360 · Otrera Consultores") y el botón "Entrar"/"Crear cuenta" viven un nivel más
   adentro, dentro de `.auth-pane` (el <form>), que no era flex y por eso ni centraba su
   párrafo ni estiraba su botón al ancho completo (el texto del botón queda centrado por
   default del navegador una vez que el botón SÍ ocupa todo el ancho). */
.auth-pane { display: flex; flex-direction: column; }
.auth-pane > p { font-size: 13px; color: var(--e360-ink-3); text-align: center; margin: 6px 0 22px; }
/* SPEC-UX-DENISE (pregunta abierta, fallback): la línea de expectativa del alta va pegada al subtítulo. */
.auth-pane > p + p.auth-expectativa { margin-top: -14px; font-weight: 600; color: var(--e360-deep); }
.auth-label-hint { font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--e360-ink-3); }
/* Bug 2026-08-25: el -10px de arriba pretendía acercar el mensaje al input de encima, pero se
   comía el propio borde/glow de foco del input (`.login-card input:focus` agrega un halo de 3px) —
   el "✓ Disponible" quedaba pintado ENCIMA del campo en vez de debajo. Espacio positivo en su
   lugar; el min-height ya evita el salto de layout cuando está vacío. */
.auth-avail { min-height: 15px; font-size: 12px; margin: 5px 0 2px; }
.auth-avail.ok { color: var(--e360-good); }
.auth-avail.err { color: var(--e360-crit); }
/* Ojito de mostrar/ocultar contraseña — el input reserva espacio a la derecha (padding-right) para
   que el texto largo no quede debajo del botón. */
.pw-field { position: relative; }
.pw-field input { padding-right: 40px; }
.pw-toggle {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; background: none; border: none; border-radius: 6px;
  color: var(--e360-ink-3); cursor: pointer; transition: color var(--e360-dur-fast);
}
.pw-toggle:hover { color: var(--e360-ink-2); }
.auth-switch { text-align: center; font-size: 12.5px; color: var(--e360-ink-3); margin-top: 16px; }
.auth-link {
  background: none; border: none; padding: 0; margin: 0; font: inherit;
  color: var(--e360-deep); font-size: 12.5px; font-weight: 600; text-decoration: underline; cursor: pointer;
}
.auth-link:hover { color: var(--e360-mid); }

/* Segmentación (paso 1 nuevo, antes de renderChooser): "¿qué quieres hacer primero?" —
   multi-select entre los destinos self-serve (SEGMENTOS, index.html) + el addon de feedback
   interno, todos renderizados con la MISMA tarjeta (makeSegOpt) para verse homogéneos. */
.seg-options { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 4px; text-align: left; }
.seg-opt {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--e360-rule); border-radius: var(--e360-radius); background: var(--e360-paper-2);
  transition: border-color var(--e360-dur-fast), background var(--e360-dur-fast);
}
.seg-opt:hover { border-color: var(--e360-mid); }
.seg-opt.selected { border-color: var(--e360-deep); background: var(--e360-tint); }
.seg-opt-icon { color: var(--e360-deep); flex-shrink: 0; margin-top: 1px; }
.seg-opt-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.seg-opt-title { font-size: 14.5px; font-weight: 600; color: var(--e360-ink); }
.seg-opt-desc { font-size: 12.5px; color: var(--e360-ink-3); line-height: 1.4; }
.seg-opt-check { color: var(--e360-deep); opacity: 0; flex-shrink: 0; margin-top: 2px; transition: opacity var(--e360-dur-fast); }
.seg-opt.selected .seg-opt-check { opacity: 1; }
.seg-continue { width: 100%; }
.seg-continue:disabled { background: var(--e360-rule); color: var(--e360-ink-4); cursor: not-allowed; }

/* Paquete recomendado (paso 2 nuevo): la MISMA .chooser-card reutilizada, con un modificador
   destacado — nunca se duplicó el CSS de tarjeta, solo se le agregó variante. */
.chooser-card-recommended { border: 2px solid var(--e360-deep); background: var(--e360-tint-2); }
.chooser-card-badge {
  display: inline-block; align-self: flex-start; background: var(--e360-deep); color: var(--e360-on-accent);
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: var(--e360-radius-pill); margin-bottom: 4px;
}

/* WS-C: aqui estaban los estilos del interstitial de bienvenida; salio del flujo en G1 de
   fix/primer-ingreso-ajustes (la cuenta nueva entra a primer ingreso). */

/* ============ SHELL GRID ============ */
.shell {
  display: grid;
  grid-template-columns: var(--e360-nav-w) 1fr var(--e360-right-w);
  height: 100vh; overflow: hidden;
  transition: grid-template-columns var(--e360-dur) var(--e360-ease);
}
.shell.nav-collapsed { grid-template-columns: var(--e360-nav-w-collapsed) 1fr var(--e360-right-w); }
.shell.right-collapsed { grid-template-columns: var(--e360-nav-w) 1fr 0px; }
.shell.nav-collapsed.right-collapsed { grid-template-columns: var(--e360-nav-w-collapsed) 1fr 0px; }

/* ============ LEFT NAV ============ */
.nav {
  background: var(--e360-paper); border-right: 0.5px solid var(--e360-rule);
  display: flex; flex-direction: column; overflow: hidden; position: relative;
}
.nav-top {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 14px; height: 60px; flex: 0 0 60px;
  border-bottom: 0.5px solid var(--e360-rule-2);
}
.nav-mark { flex: 0 0 32px; width: 32px; height: 32px; }
/* SPEC-UX-DENISE D-DEN-5: «Escucha360» junto; los dos colores separan las dos mitades. */
.nav-word { display: flex; align-items: baseline; gap: 0; white-space: nowrap; overflow: hidden; transition: opacity .18s; }
.nav-word .a { font-size: 19px; font-weight: 600; letter-spacing: -.5px; color: var(--e360-ink); }
.nav-word .b { font-size: 19px; font-weight: 400; letter-spacing: -.5px; color: var(--e360-mid); }
.collapsed .nav-word { opacity: 0; pointer-events: none; }

.nav-toggle {
  position: absolute; top: 14px; right: 12px;
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--e360-ink-3); background: var(--e360-paper-2); border: 0.5px solid var(--e360-rule);
  transition: background .15s, border-color .15s, color .15s;
}
.nav-toggle svg { width: 17px; height: 17px; }
.nav-toggle:hover { background: var(--e360-sand); color: var(--e360-ink); border-color: var(--e360-mid); }
.collapsed .nav-toggle { right: 0; left: 0; margin: auto; top: 64px; }

/* ============ C1 — SELECTOR DE PROYECTO (aside, arriba del nav de vistas) ============ */
.proj-wrap { padding: 12px 10px 2px; position: relative; }
.proj-card {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 10px; text-align: left;
  background: var(--e360-paper-2); border: 0.5px solid var(--e360-card-border);
  transition: border-color var(--e360-dur-fast), background var(--e360-dur-fast);
}
button.proj-card:hover { border-color: var(--e360-mid); }
.proj-ava {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px;
  background: var(--e360-tint); color: var(--e360-deep); font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; text-transform: uppercase;
}
/* Mismo bug que .foot-meta (chip de salir, 2026-08-25): flex-column ya apilaba nombre y
   rol, pero sin gap las dos líneas quedaban pegadas — poco legibles. */
.proj-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; transition: opacity .18s; }
.proj-name { font-size: 13.5px; font-weight: 600; color: var(--e360-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Bug 2026-08-25: a diferencia de .proj-name, esta línea ("Administrador · <org_id>") no tenía
   overflow/text-overflow — un org_id largo (el slug se deriva del nombre del org, con sufijo de
   desambiguación si hace falta) simplemente se salía del ancho fijo del aside y quedaba cortado a
   la mitad por el overflow:hidden de un ancestro, en vez de truncarse con "…" como su vecina. */
.proj-role { font-size: 11.5px; color: var(--e360-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-code { font-family: ui-monospace, Menlo, Consolas, monospace; }
.proj-caret { margin-left: auto; font-size: 10px; color: var(--e360-ink-4); transition: opacity .18s; }
/* Colapsado: el nav-toggle se recentra a top:64px (arriba) — el selector baja para no
   quedar debajo, y muestra solo el avatar del proyecto. */
.collapsed .proj-wrap { margin-top: 46px; }
.collapsed .proj-card { padding: 6px; justify-content: center; }
.collapsed .proj-meta, .collapsed .proj-caret { display: none; }
/* El menú reutiliza .org-menu, reposicionado bajo la tarjeta y al ancho del aside.
   (Selector compuesto: .org-menu se declara después y empataría en especificidad.) */
.proj-wrap .org-menu.proj-menu {
  position: absolute; top: calc(100% - 2px); left: 10px; right: 10px; min-width: 0;
}

/* ============ C2 — SELECTOR DE SERVICIO (bajo el de proyecto) ============ */
.svc-wrap { padding-top: 8px; }
.svc-card { padding: 7px 10px; }
.svc-ic { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--e360-deep); }
.svc-kicker { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--e360-ink-4); font-weight: 600; }
.svc-card .proj-name { font-size: 13px; }
.collapsed .svc-card { padding: 6px; justify-content: center; }
/* Columnas FIJAS (no auto): nombre | acción/estado. Cada fila (<button> o <div>, ver
   .svc-opt-blocked abajo) es su propio contenedor de grid — con columnas "auto" cada una
   arma su ancho según su propio contenido y nada garantiza que las de "Feedback" alineen
   con las de "Seguimiento organizacional"; con px fijos alinean siempre. Dos columnas nada
   más (sin badge de estado aparte, ver .svc-status-inline abajo) para dejarle todo el ancho
   posible al nombre — "Feedback organizacional" era lo que más se recortaba. */
.org-menu .svc-opt {
  display: grid; grid-template-columns: minmax(64px, 1fr) 88px; align-items: center;
  gap: 8px; width: 100%; padding: 8px 10px; border-radius: 7px; text-align: left; min-width: 0;
  position: relative;
}
.svc-opt .om-org { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.svc-opt .svc-nombre { overflow: hidden; text-overflow: ellipsis; }
.svc-opt .svc-ic { color: var(--e360-ink-3); }
.svc-opt.active .svc-ic { color: var(--e360-deep); }
/* S20 ítem 9 (380934d7) — el seleccionado se marca UNA vez y sin ambigüedad: filo de acento a
   la izquierda, fondo de acento tenue, palomita y «Actual» en la columna de la derecha (la que
   antes decía «(Activo)» en los cuatro y hacía parecer que estaban todos seleccionados). Los
   demás usan esa columna para sus voces nuevas desde la última visita. Un solo acento (el de la
   casa); todos los pares de texto ≥ 4.5:1 en claro, oscuro y los cuatro temas del riel
   (tests/e2e/s20/test_s20_selector_e2e.py los mide). */
.svc-menu-tit { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--e360-ink-3); padding: 4px 10px 6px; }
.org-menu .svc-opt.active::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px;
  width: 3px; border-radius: 2px; background: var(--e360-deep); }
.svc-actual, .svc-nuevas { justify-self: end; white-space: nowrap; font-size: 11px; font-weight: 700; }
.svc-actual { display: inline-flex; align-items: center; gap: 3px; color: var(--e360-deep); }
.svc-nuevas { border-radius: var(--e360-radius-pill); padding: 2px 8px; background: var(--e360-deep);
  color: var(--e360-on-accent); }
.svc-nuevas[hidden], .svc-card-nuevas[hidden] { display: none; }
.svc-card-nuevas { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-left: auto;
  background: var(--e360-deep); }
.svc-card-nuevas:not([hidden]) + .proj-caret { margin-left: 6px; }
/* 099/104 — servicio bloqueado: NO es un <button disabled> (evita anidar botones) — un <div>
   que reusa el mismo grid de .svc-opt de arriba (misma regla, misma clase), con el botón real
   en la 2ª columna. */
.svc-opt-blocked .om-org { color: var(--e360-ink-3); font-weight: 500; }
.svc-buy { font-size: 11px; font-weight: 600; text-align: center; color: var(--e360-on-accent); background: var(--e360-deep); border-radius: 8px; padding: 5px 6px; white-space: nowrap; transition: filter var(--e360-dur-fast); }
.svc-buy:hover:not(:disabled) { filter: brightness(1.07); }
.svc-buy:disabled { opacity: .6; cursor: default; }
/* El nav mide 236px (--e360-nav-w) — de sobra para la tarjeta, no para su menú con dos
   columnas fijas por fila. En vez de embutirlo a ese ancho (.proj-wrap .org-menu.proj-menu de
   arriba), se despliega flotante: position:fixed con coordenadas que calcula
   positionSvcMenu() al abrirlo, así puede invadir el contenido de al lado. Ancho FIJO (no
   max-content) — con filas de grid propio por fila, max-content no arrastra el ancho de sus
   columnas internas de forma confiable. */
#svcMenu.org-menu {
  position: fixed; left: auto; right: auto; top: auto;
  width: 320px; max-width: calc(100vw - 24px);
  max-height: min(420px, calc(100vh - 24px)); overflow-y: auto;
  z-index: 35;
}
/* Bug reportado (celular): el menú de servicios (contratado/por contratar) quedaba cortado al
   ancho del aside en móvil, aunque en escritorio se desborda libremente (comentario de arriba).
   Causa: en <=768px `.nav` gana un `transform` para su animación de apertura (ver @media
   max-width:768px más abajo) — eso lo vuelve el "containing block" de CUALQUIER hijo
   position:fixed (regla del spec CSS), así que su overflow:hidden pasa a recortar #svcMenu
   como si fuera absolute, cosa que en escritorio (sin transform) nunca ocurre. Se libera SOLO
   mientras el menú está abierto. */
.nav:has(#svcMenu.open) { overflow: visible; }
.crumb-svc { color: var(--e360-ink-3); }
/* F-NAV-SCOPE: refuerzo textual de que Escucha/Análisis son datos DEL servicio elegido aquí
   (el color de fondo/filo lo refuerza visualmente, ver .nav[data-nav-theme] .svc-wrap abajo). */
.svc-scope { font-size: 10.5px; line-height: 1.35; color: var(--e360-ink-3); padding: 6px 10px 2px; }
.collapsed .svc-scope { display: none; }

.nav-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 10px; }
.nav-section {
  font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--e360-ink-4); font-weight: 600; padding: 14px 10px 6px; white-space: nowrap;
  transition: opacity .18s;
}
.collapsed .nav-section { opacity: 0; height: 14px; padding: 6px 10px 2px; }

.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 11px; border-radius: 8px; margin-bottom: 2px;
  color: var(--e360-ink-2); font-size: 14px; font-weight: 500;
  transition: background var(--e360-dur-fast), color var(--e360-dur-fast); position: relative;
  width: 100%; text-align: left;
}
.nav-item .ic { flex: 0 0 20px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--e360-ink-3); transition: color var(--e360-dur-fast); }
.nav-item .ic svg { width: 18px; height: 18px; }
/* Etiquetas largas ("Administración del servicio", "Bitácora organizacional") envuelven en
   vez de cortarse a la mitad — white-space: normal se lo pide explícito, ya que .nav-item ya
   no fija nowrap para toda la fila (el ícono/contador no tienen texto que envolver de todos
   modos). line-height propio: por defecto heredaba el de una sola línea, muy apretado en dos. */
.nav-item .lbl { overflow: hidden; white-space: normal; line-height: 1.3; transition: opacity .18s; }
.collapsed .nav-item .lbl { opacity: 0; }
.nav-item .count {
  margin-left: auto; font-size: 11px; font-weight: 600; color: var(--e360-ink-3);
  background: var(--e360-sand); padding: 1px 7px; border-radius: 20px; transition: opacity .18s;
  font-variant-numeric: tabular-nums;
}
.collapsed .nav-item .count { opacity: 0; }
.nav-item:hover { background: var(--e360-tint-2); }
.nav-item:hover .ic { color: var(--e360-deep); }
.nav-item.active { background: var(--e360-tint); color: var(--e360-deep); font-weight: 600; }
.nav-item.active .ic { color: var(--e360-deep); }
.nav-item.active::before {
  content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px;
  background: var(--e360-deep); border-radius: 0 3px 3px 0;
}
.nav-item .crit-dot {
  position: absolute; left: 26px; top: 7px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--e360-crit); border: 1.5px solid var(--e360-paper); opacity: 0;
}
.collapsed .nav-item.has-crit .crit-dot { opacity: 1; }
/* "Mi bitácora"/"Mi seguimiento" sin número vinculado: visible a propósito (2026-08-26 — antes
   desaparecía del todo y nadie se enteraba de que existía), atenuado + candado en vez de
   escondido. Sigue siendo un link normal: clicarlo navega y explica cómo desbloquearlo. */
.nav-item.locked { color: var(--e360-ink-4); opacity: .68; }
.nav-item.locked .ic { color: var(--e360-ink-4); }
.nav-item.locked:hover { opacity: 1; background: var(--e360-tint-2); }
.nav-item .lock-ic {
  margin-left: auto; flex: 0 0 auto; display: flex; color: var(--e360-ink-4);
}
.nav-item .lock-ic svg { width: 13px; height: 13px; }
.collapsed .nav-item .lock-ic { opacity: 0; }

/* D8 (spec registro visible 2026-09-09) — grupos COLAPSABLES: el menú entero debe verse sin
   scroll a 1366×768 y 1280×720; el grupo de la vista activa se fuerza abierto y un grupo
   cerrado muestra la suma de sus contadores (un pendiente nunca queda invisible). Aplica a
   ambos skins (riel clásico y temas WS-B: sus .nav-section ya son flex). */
.nav-section { display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.nav-section:hover { color: var(--e360-ink-2); }
.nav-section .count {
  margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--e360-ink-3);
  background: var(--e360-sand); padding: 0 6px; border-radius: 20px; letter-spacing: 0;
  font-variant-numeric: tabular-nums; text-transform: none;
}
.nav-caret { margin-left: auto; display: flex; color: var(--e360-ink-4);
  transition: transform var(--e360-dur-fast); transform: rotate(90deg); }
.nav-section .count + .nav-caret { margin-left: 6px; }
.nav-caret svg { width: 13px; height: 13px; }
.nav-group.nav-collapsed .nav-caret { transform: rotate(0deg); }
.nav-group.nav-collapsed .nav-item { display: none; }
.nav[data-nav-theme] .nav-section .count { background: rgba(255,255,255,.12); color: var(--g-item); }
.nav[data-nav-theme] .nav-caret { color: var(--g-label); }
.collapsed .nav-caret, .collapsed .nav-section .count { opacity: 0; }

/* Bug reportado: en celulares cuya barra de direcciones/búsqueda vive ABAJO (Chrome Android,
   Safari con la barra flotante inferior), esa barra se superpone al borde inferior real de la
   pantalla — el botón de cerrar sesión (pie del nav, ver .foot-user más abajo) quedaba debajo
   de ella, imposible de tocar. `env(safe-area-inset-bottom)` es 0 salvo que el viewport declare
   `viewport-fit=cover` (ver <meta name="viewport"> en index.html) — con ambas piezas puestas,
   el pie del nav respeta esa franja igual que lo haría una app nativa. */
.nav-foot { border-top: 0.5px solid var(--e360-rule-2); padding: 10px 10px max(10px, env(safe-area-inset-bottom)); }
.foot-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 11px; border-radius: 8px; color: var(--e360-ink-2); font-size: 14px; font-weight: 500;
  white-space: nowrap; transition: background var(--e360-dur-fast); text-align: left;
}
.foot-btn .ic { flex: 0 0 20px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--e360-ink-3); }
.foot-btn .ic svg { width: 18px; height: 18px; }
.foot-btn:hover { background: var(--e360-sand); }
.foot-btn .lbl { overflow: hidden; transition: opacity .18s; }
.collapsed .foot-btn .lbl { opacity: 0; }
.foot-user {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8px 9px; border-radius: 8px; margin-top: 4px; transition: background var(--e360-dur-fast); text-align: left;
}
.foot-user:hover { background: var(--e360-sand); }
.foot-ava {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--e360-deep); color: var(--e360-on-accent); font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; text-transform: uppercase;
}
/* Pedido directo del usuario: nombre y correo salían pegados en una sola línea — .n/.e son
   spans (inline) sin regla que los apile; el fix es de layout, no de fuente/color. */
.foot-meta { display: flex; flex-direction: column; gap: 2px; overflow: hidden; transition: opacity .18s; min-width: 0; }
.collapsed .foot-meta { opacity: 0; }
.foot-meta .n { font-size: 13px; font-weight: 600; color: var(--e360-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-meta .e { font-size: 11.5px; color: var(--e360-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-logout { flex: 0 0 18px; width: 18px; height: 18px; margin-left: auto; color: var(--e360-ink-3); display: flex; align-items: center; justify-content: center; }
.foot-logout svg { width: 16px; height: 16px; }
.foot-user:hover .foot-logout { color: var(--e360-crit); }
.collapsed .foot-logout { display: none; }

/* ============ CENTER ============ */
.center { display: flex; flex-direction: column; overflow: hidden; background: var(--e360-sand); position: relative; }
.topbar {
  height: 60px; flex: 0 0 60px; display: flex; align-items: center; gap: 16px;
  padding: 0 24px; background: var(--e360-paper); border-bottom: 0.5px solid var(--e360-rule);
}
.crumb { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--e360-ink-3); position: relative; min-width: 0; }
.crumb b { color: var(--e360-ink); font-weight: 600; }
.crumb .sep { color: var(--e360-ink-4); }
.crumb-project { display: inline-flex; align-items: center; gap: 5px; }
.crumb-project.switchable { cursor: pointer; padding: 3px 7px; border-radius: 6px; transition: background var(--e360-dur-fast); }
.crumb-project.switchable:hover { background: var(--e360-sand); }
.crumb-project .caret { font-size: 10px; color: var(--e360-ink-4); }
.org-menu {
  position: absolute; top: 30px; left: 0; z-index: 30; min-width: 200px;
  background: var(--e360-paper); border: 0.5px solid var(--e360-rule); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(29, 58, 49, .14); padding: 6px; display: none;
}
.org-menu.open { display: block; }
.org-menu button {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 7px; transition: background var(--e360-dur-fast);
  min-width: 0;   /* mismo bug de .proj-role — sin esto un nombre/slug largo no trunca, se corta */
}
.org-menu .om-org, .org-menu .om-role, .org-menu .om-code {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.org-menu button:hover { background: var(--e360-sand); }
.org-menu button.active { background: var(--e360-tint); }
.org-menu .om-org { font-size: 13px; font-weight: 600; color: var(--e360-ink); }
.org-menu .om-role { font-size: 11px; color: var(--e360-ink-3); }
.topbar-sp { flex: 1; }
.live-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 20px;
  background: var(--e360-tint-2); border: 0.5px solid var(--e360-tint); font-size: 12px; color: var(--e360-deep); font-weight: 500;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--e360-mid); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.icon-btn {
  width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: var(--e360-ink-3); transition: background var(--e360-dur-fast), color var(--e360-dur-fast); position: relative;
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { background: var(--e360-sand); color: var(--e360-ink); }
.icon-btn.on { background: var(--e360-tint); color: var(--e360-deep); }
.icon-btn.spin svg { animation: view-refresh-spin .7s linear infinite; }
.icon-btn:disabled { cursor: default; opacity: .7; }
/* 097/104 — aviso en el bell cuando hay tickets completados o mensajes de soporte sin ver.
   104: pasó de un punto liso a un número (attr(data-notif-count)) — un punto solo decía "algo
   pasó", no "cuántos" — pedido explícito de que sea "bien bien visual". */
.icon-btn.has-notice::after {
  content: attr(data-notif-count); position: absolute; top: 1px; right: 1px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--e360-crit, #C24A3B); border: 1.5px solid var(--e360-paper); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1; display: flex; align-items: center;
  justify-content: center; font-variant-numeric: tabular-nums;
}

.notif-wrap { position: relative; }
.notif-menu {
  position: absolute; top: 44px; right: 0; z-index: 30; width: 320px; max-width: calc(100vw - 32px);
  max-height: 70vh; overflow-y: auto;
  background: var(--e360-paper); border: 0.5px solid var(--e360-rule); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(29, 58, 49, .14); padding: 6px 14px; display: none;
}
.notif-menu.open { display: block; }
.notif-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--e360-ink-4); padding: 10px 0 2px; }
.notif-ticket {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 8px; margin: 2px 0 4px; border-radius: 8px; border: 0.5px solid var(--e360-tint);
  background: var(--e360-tint-2); color: var(--e360-deep); font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.notif-ticket:hover { background: var(--e360-tint); }
.notif-ticket-check { color: var(--e360-deep); font-weight: 700; }
.notif-ticket-ack { margin-left: auto; font-size: 11px; color: var(--e360-ink-4); font-weight: 400; }
.notif-footer-link {
  display: block; width: 100%; text-align: center; padding: 9px 0; margin-top: 4px;
  border-top: 0.5px solid var(--e360-rule-2); background: none; font-size: 12.5px;
  font-weight: 600; color: var(--e360-deep); cursor: pointer;
}
.notif-footer-link:hover { color: var(--e360-ink); }

/* 098 — "Mis reportes" (modal): historial de tickets propios */
.mytk-list { display: flex; flex-direction: column; gap: 12px; }
.mytk-row { border: 0.5px solid var(--e360-rule); border-radius: 10px; padding: 12px 14px; }
.mytk-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mytk-when { margin-left: auto; font-size: 12px; color: var(--e360-ink-4); }
.mytk-type { font-size: 12.5px; font-weight: 600; color: var(--e360-ink-3); margin-bottom: 4px; }
.mytk-body { font-size: 13.5px; color: var(--e360-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.mytk-reopen-toggle { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--e360-deep); }
.mytk-reopen-toggle:hover { color: var(--e360-ink); }
.mytk-reopen-form { margin-top: 10px; }

/* S26 (A-S26-4): 96 px al final para que el botón flotante «Ayuda y sugerencias» (18 px + ~44 px)
   no tape lo último de la vista (el «Crear sede» de la auditoría Alma Spa). */
.content { flex: 1; overflow-y: auto; padding: 26px 28px 96px; }
.page-head { margin-bottom: 22px; }
.greeting { font-size: 14px; color: var(--e360-ink-3); font-weight: 500; margin-bottom: 10px; }
.greeting b { color: var(--e360-ink); font-weight: 600; }
.page-kicker {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
  color: var(--e360-deep); background: var(--e360-tint); border: 0.5px solid #9FE1CB;
  border-radius: 20px; padding: 5px 13px; margin-bottom: 14px;
}
.page-title { font-size: 27px; font-weight: 600; letter-spacing: -.5px; line-height: 1.2; color: var(--e360-ink); }
.page-sub { font-size: 14px; color: var(--e360-ink-3); margin-top: 7px; }
.page-sub b { color: var(--e360-ink-2); font-weight: 600; }
.accent-rule { height: 2px; background: var(--e360-rule); margin: 18px 0 4px; position: relative; }
.accent-rule::before { content: ''; position: absolute; left: 0; top: 0; width: 56px; height: 2px; background: var(--e360-deep); }
.metrics { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 16px; font-size: 14px; color: var(--e360-ink-3); }
.metrics b { color: var(--e360-ink); font-weight: 600; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; }
.card { background: var(--e360-paper-2); border: 0.5px solid var(--e360-card-border); border-radius: 12px; padding: 20px 22px; }
.rise { opacity: 0; transform: translateY(8px); animation: rise .5s var(--e360-ease) forwards; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
.card.span2 { grid-column: span 2; }
.card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-h .d { width: 8px; height: 8px; border-radius: 50%; background: var(--e360-mid); flex: 0 0 8px; }
.card-h .d.crit { background: var(--e360-crit); }
.card-h h3 { font-size: 15px; font-weight: 600; color: var(--e360-ink); }
.card-h .more { margin-left: auto; font-size: 12px; color: var(--e360-ink-3); font-weight: 500; transition: color var(--e360-dur-fast); white-space: nowrap; }
.card-h a.more:hover { color: var(--e360-deep); }
.empty { font-size: 14px; color: var(--e360-ink-4); padding: 8px 0; }

/* ── SPEC-S20 mejoras staff: Resumen con IA (D-S20-4 ocultar/mostrar, D-S20-5/6 enfoque) ──────
   La cabecera lleva la fecha de generación y el botón; oculta, es lo único que queda. Sin
   animación propia: la tarjeta se repinta en su sitio. Un solo acento (--e360-deep). */
.ri-head { flex-wrap: wrap; row-gap: 6px; }
.ri-fecha { margin-left: auto; font-size: 12px; color: var(--e360-ink-3); }
.ri-toggle { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 12.5px;
             font-weight: 600; color: var(--e360-deep); cursor: pointer; }
.ri-toggle:hover { text-decoration: underline; }
.ri-toggle:focus-visible { outline: 2px solid var(--e360-deep); outline-offset: 2px; border-radius: 4px; }
.ri-oculto .card-h { margin-bottom: 0; }
.ri-enfoque { margin: -4px 0 0; font-size: 13px; color: var(--e360-ink-2); line-height: 1.45;
              overflow-wrap: anywhere; }
.ri-generar { margin-top: 14px; padding-top: 12px; border-top: 0.5px solid var(--e360-rule); }
.ri-generar .bit-label { display: block; margin-bottom: 6px; }
.ri-instruccion { display: block; width: 100%; min-height: 56px; resize: vertical; font: inherit;
                  font-size: 13.5px; line-height: 1.45; box-sizing: border-box; }
.ri-generar-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                  flex-wrap: wrap; margin-top: 8px; }
.ri-cuenta { margin: 0; }

.kpi-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--e360-ink-3); font-weight: 600; }
.kpi-val { font-size: 38px; font-weight: 600; letter-spacing: -1px; line-height: 1; margin-top: 10px; color: var(--e360-ink); }
.kpi-val.crit { color: var(--e360-crit); }
.kpi-val .u { font-size: 16px; color: var(--e360-ink-3); font-weight: 500; margin-left: 3px; }
.kpi-delta { margin-top: 9px; font-size: 12.5px; font-weight: 500; color: var(--e360-ink-3); }
.kpi-delta.up { color: var(--e360-good); }
.kpi-delta.down { color: var(--e360-crit); }

/* ============ C5 — RESUMEN VISUAL (stat tile de tendencia · donut · severidad) ============ */
/* Tile de tendencia: héroe con cifras proporcionales (nada de tabular-nums en display),
   delta firmado coloreado por dirección (subir el pulso es bueno), y la serie declarada
   pendiente — degradación honesta hasta que exista el endpoint de series. */
.kpi-val.hero { font-variant-numeric: normal; }
.stat-row { margin-top: 10px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.stat-delta { font-size: 13px; font-weight: 600; }
.stat-delta.up { color: var(--e360-good); }
.stat-delta.down { color: var(--e360-crit); }
.stat-delta.flat { color: var(--e360-ink-3); }
.stat-vs { font-size: 12px; color: var(--e360-ink-3); }
.trend-pending { margin-top: 12px; padding-top: 10px; border-top: 0.5px dashed var(--e360-rule-2); font-size: 11.5px; color: var(--e360-ink-4); line-height: 1.45; }

/* Donut: texto en tokens de tinta (el color solo vive en la marca y el dot de leyenda). */
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut { flex: 1 1 108px; width: 100%; max-width: 148px; height: auto; min-width: 108px; }
.donut-num { font-size: 24px; font-weight: 600; fill: var(--e360-ink); font-family: var(--e360-font); }
.donut-cap { font-size: 9.5px; font-weight: 600; fill: var(--e360-ink-3); letter-spacing: .09em; text-transform: uppercase; font-family: var(--e360-font); }
.dlegend { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 7px; }
.dl-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.dl-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; }
.dl-label { color: var(--e360-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-val { margin-left: auto; color: var(--e360-ink-3); font-weight: 600; white-space: nowrap; }

/* Severidad: barras de STATUS (significan estado, no identidad de serie). */
.sev-svg { display: block; }
.sev-svg text { font-family: var(--e360-font); font-size: 12.5px; }
.sevbar-label { fill: var(--e360-ink-2); }
.sevbar-val { fill: var(--e360-ink-2); font-weight: 600; }
.sevbar-track { fill: var(--e360-sand); }
:root[data-theme="dark"] .sevbar-track { fill: #0D1411; }

/* theme bars */
.theme-row { display: grid; grid-template-columns: 160px 1fr 48px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 0.5px dashed var(--e360-rule-2); font-size: 13px; }
.theme-row:last-child { border-bottom: none; }
.theme-row .tname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--e360-ink-2); }
.theme-track { height: 7px; background: var(--e360-sand); border-radius: 4px; overflow: hidden; }
.theme-fill { height: 100%; border-radius: 4px; background: var(--e360-mid); }
.theme-fill.c { background: var(--e360-crit); }
.theme-fill.w { background: var(--e360-warn); }
.theme-fill.g { background: var(--e360-good); }
.theme-fill.n { background: var(--e360-cat-other); }   /* D-SEG-12: "Otro" sin alertas; en Seguimiento, todo rubro sin alertas */
.theme-row.expandable { cursor: pointer; border-radius: 8px; padding-left: 8px; padding-right: 8px; margin: 0 -8px; transition: background var(--e360-dur-fast); }
.theme-row.expandable:hover { background: var(--e360-tint-2); }
.theme-row.expandable:focus-visible { outline: 2px solid var(--e360-mid); outline-offset: -1px; }
.theme-row.expanded { background: var(--e360-tint-2); border-bottom-color: transparent; }
.theme-voices { padding: 2px 8px 16px; border-bottom: 0.5px dashed var(--e360-rule-2); }
.theme-voices .voice-card { margin-bottom: 8px; }
.theme-voices .voice-card:last-child { margin-bottom: 0; }

.theme-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.tleg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--e360-ink-3); }
.tleg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--e360-mid); flex: 0 0 8px; }
.tleg-dot.c { background: var(--e360-crit); }
.tleg-dot.w { background: var(--e360-warn); }
.tleg-dot.g { background: var(--e360-good); }
.tleg-dot.n { background: var(--e360-cat-other); }
.theme-num { text-align: right; font-weight: 600; color: var(--e360-ink-2); }

/* alert list */
.alert { display: grid; grid-template-columns: 4px 1fr auto; gap: 13px; padding: 13px 0; border-bottom: 0.5px solid var(--e360-rule-2); align-items: center; width: 100%; text-align: left; }
.alert:last-child { border-bottom: none; }
.alert:hover .ex { color: var(--e360-ink); }
/* S26 A-S26-2: una visita de Feedback por QR en una tarjeta; lo demás de la visita, debajo. */
.alert-visita { border-bottom: 0.5px solid var(--e360-rule-2); }
.alert-visita:last-child { border-bottom: none; }
.alert-visita > .alert { border-bottom: none; }
.alert-visita-mas { margin: 0 0 10px 17px; padding-left: 12px; border-left: 2px solid var(--e360-rule-2); }
.alert-visita-mas .alert { padding: 8px 0; }
.alert-visita-titulo { font-size: 11px; font-weight: 600; color: var(--e360-ink-3); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
/* S26 A-S26-8: sumar (o apartar) los resultados de una convocatoria a su servicio. */
.conv-sumar { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: 13px; cursor: pointer; }
.conv-sumar input { margin-top: 3px; }
.conv-sumar .bit-hint { display: block; margin-top: 2px; }
.cv-kpis { flex-wrap: wrap; }
.sev { width: 4px; height: 38px; border-radius: 2px; }
.sev.c { background: var(--e360-crit); }
.sev.w { background: var(--e360-warn); }
.sev.g { background: var(--e360-mid); }
.alert .who { font-size: 13px; font-weight: 600; color: var(--e360-ink); }
.alert .ex { font-size: 13px; color: var(--e360-ink-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.alert .t { font-size: 11px; color: var(--e360-ink-4); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 5px; font-size: 11px; font-weight: 600; }
.tag.c { background: var(--e360-crit-bg); color: var(--e360-crit); }
.tag.w { background: var(--e360-warn-bg); color: var(--e360-warn); }
.tag.g { background: var(--e360-good-bg); color: var(--e360-good); }

/* voces list (full view) */
.voice-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.voice-card {
  background: var(--e360-paper-2); border: 0.5px solid var(--e360-card-border); border-radius: 12px;
  padding: 15px 18px; text-align: left; width: 100%; transition: border-color var(--e360-dur-fast), box-shadow var(--e360-dur-fast);
}
.voice-card:hover { border-color: var(--e360-mid); }
.voice-card.selected { border-color: var(--e360-deep); box-shadow: 0 0 0 2px var(--e360-tint); }
.voice-quote { font-size: 14px; color: var(--e360-ink); line-height: 1.5; }
/* F-VOZ (112): las N respuestas de una visita de Feedback QR, cada una su propia línea
   etiquetada, en vez de un párrafo único (grupo de 1 = .voice-quote de siempre). */
.voice-quote-grouped { display: flex; flex-direction: column; gap: 6px; }
.voice-subline { font-size: 14px; color: var(--e360-ink); line-height: 1.4; }
.voice-sublabel { font-size: 11px; font-weight: 700; color: var(--e360-ink-3); text-transform: uppercase;
  letter-spacing: .03em; margin-right: 6px; }
/* D13 (spec addendum 2026-09-09) — "Ver texto original" por claim en seguimiento (y en Mi
   Seguimiento). El toggle es un <span role="button"> porque la tarjeta entera ya es un
   <button> (HTML no admite botones anidados) — de ahí el cursor/rol explícitos. */
.voice-verbatim-btn {
  display: inline-flex; align-items: center; margin-top: 9px; padding: 2px 9px;
  border: 0.5px solid var(--e360-card-border); border-radius: 6px; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--e360-ink-3); background: var(--e360-paper);
}
.voice-verbatim-btn:hover { border-color: var(--e360-mid); color: var(--e360-deep); }
.voice-verbatim {
  margin-top: 9px; padding: 10px 12px; border-radius: 9px;
  background: var(--e360-sand); border: 0.5px solid var(--e360-card-border);
}
.voice-verbatim-text { font-size: 13px; line-height: 1.55; color: var(--e360-ink-2); white-space: pre-wrap; }
.voice-verbatim .empty { margin: 0; }
/* ── G3 — el toggle de las tres vistas de Voces, y la vista de entrega ──────────────────── */
/* Segmentado, no pestañas: las tres son la MISMA lista con el mismo filtro, y unas pestañas
   sugerirían que se cambia de contenido y no de forma de leerlo. */
.voces-toggle {
  display: inline-flex; padding: 2px; gap: 2px; border-radius: 8px;
  background: var(--e360-sand); border: 0.5px solid var(--e360-card-border);
}
.voces-toggle-btn {
  padding: 4px 12px; border: 0; border-radius: 6px; cursor: pointer; background: transparent;
  font-size: 12px; font-weight: 600; color: var(--e360-ink-3); font-family: inherit;
}
.voces-toggle-btn:hover { color: var(--e360-deep); }
.voces-toggle-btn.on { background: var(--e360-paper); color: var(--e360-deep); }
/* El foco visible no se hereda del reset del shell: son botones de navegación de teclado. */
.voces-toggle-btn:focus-visible { outline: 2px solid var(--e360-mid); outline-offset: 1px; }

.voz-entrega {
  margin-bottom: 12px; padding: 12px 14px; border-radius: 11px;
  background: var(--e360-paper); border: 0.5px solid var(--e360-card-border);
}
/* Los claims van ENCIMA del texto (decisión de Daniel): lo que el análisis sacó primero, y
   debajo lo que la persona dijo. */
.voz-entrega-claims { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.voz-claim { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.voz-claim-texto { font-size: 12.5px; color: var(--e360-ink-2); }
.voz-entrega-texto {
  font-size: 13px; line-height: 1.6; color: var(--e360-ink-1); white-space: pre-wrap;
  padding-top: 9px; border-top: 0.5px solid var(--e360-card-border);
}
/* El resaltado NO es el único portador: el fragmento va además subrayado, para que se
   distinga sin depender del color (mismo criterio que las píldoras de estado del registro). */
.voz-span {
  background: var(--e360-tint); color: inherit; border-radius: 3px; padding: 0 2px;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 2px; text-decoration-color: var(--e360-mid);
}
.voz-aviso { margin-bottom: 8px; }

.voice-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 11px; }
.badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 5px; font-size: 11px; font-weight: 600; }
.badge-theme { background: var(--e360-tint); color: var(--e360-deep); }
.badge-sev { background: var(--e360-sand); color: var(--e360-ink-2); }
.badge-sev.sev-critica { background: var(--e360-crit-bg); color: var(--e360-crit); }
.badge-sev.sev-alta { background: var(--e360-warn-bg); color: var(--e360-warn); }
/* SPEC-UX-DENISE D-DEN-11: «Bajo» es neutro (no es una buena noticia) y «Positivo» es el verde. */
.badge-sev.sev-baja { background: var(--e360-sand); color: var(--e360-ink-2); }
.badge-sev.sev-positivo { background: var(--e360-good-bg); color: var(--e360-good); }
.badge-risk { background: var(--e360-crit-bg); color: var(--e360-crit); }
.badge-estado { background: var(--e360-tint-2); color: var(--e360-ink-2); }
/* D-D3.4 — ciclo de vida de operación: abierto=atención, en curso=neutro, resuelto=bien */
.badge-estado.est-abierto { background: var(--e360-warn-bg); color: var(--e360-warn); }
.badge-estado.est-resuelto { background: var(--e360-good-bg); color: var(--e360-good); }
.voice-date { margin-left: auto; font-size: 11px; color: var(--e360-ink-4); font-variant-numeric: tabular-nums; }
/* SPEC-FIN-DE-SEMANA D-FS-23 — «Eliminar» detrás del menú «···» de la tarjeta. */
.voice-mas { position: relative; display: inline-flex; }
.voice-mas-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 28px;
                 padding: 0 6px; border-radius: 8px; font-weight: 700; letter-spacing: .08em; color: var(--e360-ink-3); cursor: pointer; }
.voice-mas-btn:hover, .voice-mas-btn:focus-visible, .voice-mas-btn[aria-expanded="true"] { background: var(--e360-tint-2); color: var(--e360-ink); outline: none; }
.voice-mas-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 160px; padding: 4px;
                  background: var(--e360-paper-2); border: 0.5px solid var(--e360-card-border); border-radius: 10px;
                  box-shadow: 0 6px 20px rgba(0,0,0,.12); display: flex; flex-direction: column; }
.voice-mas-menu[hidden] { display: none; }
.voice-mas-item { padding: 8px 10px; border-radius: 6px; font-size: 13.5px; color: var(--e360-crit); cursor: pointer; text-align: left; white-space: nowrap; }
.voice-mas-item:hover, .voice-mas-item:focus-visible { background: var(--e360-tint-2); outline: none; }
.voice-subline .badge { margin-left: 4px; vertical-align: middle; }
/* SPEC-FIN-DE-SEMANA (fase 6) — Resumen: con tres columnas, la tendencia ocupa una (no dos), así
   las tres cifras van en un renglón y las tres gráficas en el siguiente, sin una tarjeta de cifra
   estirada a la altura de una gráfica. Columnas = (ancho + 16) / 256: tres entre 752 y 1007px. */
.resumen-grid { container-type: inline-size; align-items: start; }   /* sin tarjetas estiradas y vacías */
@container (min-width: 752px) and (max-width: 1007px) {
  .resumen-grid > .card.span2 { grid-column: span 1; }
}
/* SPEC-FIN-DE-SEMANA (fase 6) — en móvil, las tablas de las vistas tocadas (Compromisos y Por
   máquina del Tablero, Entidades de Contexto) se apilan: una fila es un bloque y cada dato lleva
   su encabezado (data-col), en vez de esconder columnas detrás de un scroll horizontal.
   SPEC-UX-DENISE-2 (AV-5): desde 768 px (era 640): a 700 px, el viewport de Denise, la tabla del
   Tablero (mín. 720 px) se salía de su caja y obligaba a desplazarla de lado. */
@media (max-width: 768px) {
  table.tabla-apilable { min-width: 0; }
  table.tabla-apilable thead { display: none; }
  table.tabla-apilable, table.tabla-apilable tbody, table.tabla-apilable tr { display: block; width: 100%; }
  table.tabla-apilable tr { padding: 10px 14px; border-bottom: 0.5px solid var(--e360-rule-2); }
  table.tabla-apilable tbody tr:last-child { border-bottom: 0; }
  table.tabla-apilable td, table.tabla-apilable th[scope="row"] { display: block; padding: 3px 0; border-bottom: 0; }
  table.tabla-apilable td:empty { display: none; }
  table.tabla-apilable td[data-col]::before { content: attr(data-col); display: block; margin-bottom: 1px;
    font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--e360-ink-3); }
  table.tab-tabla-maquinas.tabla-apilable tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  table.tab-tabla-maquinas.tabla-apilable th[scope="row"] { grid-column: 1 / -1; }
  .ctx-tabla.tabla-apilable tr { padding: 10px 0; }
}
/* SPEC-FIN-DE-SEMANA (fase 6) — formularios de alta plegados debajo de su lista. */
.alta-plegada { margin-top: 12px; }
.alta-plegada-sum { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
                    border: 0.5px solid var(--e360-card-border); border-radius: 999px; background: var(--e360-paper-2);
                    font-weight: 600; font-size: 14px; color: var(--e360-ink); cursor: pointer; list-style: none; }
.alta-plegada-sum::-webkit-details-marker { display: none; }
.alta-plegada-sum::before { content: "+"; font-weight: 700; color: var(--e360-deep); }
.alta-plegada[open] > .alta-plegada-sum::before { content: "−"; }
.alta-plegada-sum:hover, .alta-plegada-sum:focus-visible { background: var(--e360-tint-2); outline: none; }
.alta-plegada-cuerpo { margin-top: 10px; max-width: 640px; }
/* SPEC-FIN-DE-SEMANA D-FS-29 — pocos datos y el Resumen sin voces. */
.kpi-val.kpi-sin-datos { font-size: 24px; line-height: 1.2; color: var(--e360-ink-2); }
.resumen-vacio { padding: 22px 24px; margin-top: 8px; }
.resumen-vacio-txt { margin: 0 0 12px; font-size: 16px; color: var(--e360-ink); }
/* SPEC-FIN-DE-SEMANA D-FS-28 — la columna «Respuestas» de Gestionar convocatorias. */
.conv-respuestas { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.conv-respuestas .rlabel { margin: 0; }
.cv-respuestas-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
                     border: 0.5px solid var(--e360-card-border); border-radius: 999px; background: var(--e360-paper-2);
                     font: inherit; font-size: 13.5px; color: var(--e360-ink); cursor: pointer; }
.cv-respuestas-btn:hover, .cv-respuestas-btn:focus-visible { background: var(--e360-tint-2); outline: none; }

/* pager */
.pager { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.pager button {
  padding: 7px 14px; border-radius: 8px; border: 0.5px solid var(--e360-rule); background: var(--e360-paper-2);
  font-size: 13px; font-weight: 500; color: var(--e360-ink-2); transition: border-color var(--e360-dur-fast);
}
.pager button:hover:not(:disabled) { border-color: var(--e360-mid); color: var(--e360-deep); }
.pager button:disabled { opacity: .45; cursor: default; }
.pager-info { font-size: 12.5px; color: var(--e360-ink-3); font-variant-numeric: tabular-nums; }
.pager-nums { flex-wrap: wrap; }
.pager-nums button { padding: 6px 11px; min-width: 34px; }
.pager-num.on { background: var(--e360-deep); border-color: var(--e360-deep); color: var(--e360-paper); cursor: default; }
.pager-dots { padding: 0 2px; color: var(--e360-ink-4); }

/* full-page section headers inside views */
.view-head { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.view-title { font-size: 22px; font-weight: 600; letter-spacing: -.4px; color: var(--e360-ink); }
.view-note { font-size: 13px; color: var(--e360-ink-3); margin-top: 6px; max-width: 62ch; }
/* 140 — pasos numerados como <ol> real (antes "(1) … ; (2) …" corrido dentro de un <p>, no se
   veía bien). Vive dentro de un .view-note (a veces con max-width:none — ver los bloques de
   Organización que la usan), así que hereda tamaño/color; solo aporta el espaciado de lista. */
.org-explain-list { margin: 6px 0 0; padding-left: 20px; }
.org-explain-list li { margin-bottom: 4px; }
.org-explain-list li:last-child { margin-bottom: 0; }
/* botón de refrescar en vistas donde llegan entradas nuevas (Voces, Mi bitácora) sin recargar
   la página. Gira mientras la recarga está en curso (.spin, disparado por JS). */
.view-refresh {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; color: var(--e360-ink-3);
  border: 1px solid var(--e360-line, #e6e6ea); background: transparent; cursor: pointer;
  transition: background var(--e360-dur-fast), color var(--e360-dur-fast);
}
.view-refresh:hover { background: var(--e360-sand); color: var(--e360-ink); }
.view-refresh svg { width: 17px; height: 17px; }
.view-refresh.spin svg { animation: view-refresh-spin .7s linear infinite; }
.view-refresh:disabled { cursor: default; opacity: .7; }
@keyframes view-refresh-spin { to { transform: rotate(360deg); } }

/* honest empty / pending states */
.pending {
  margin-top: 26px; background: var(--e360-paper-2); border: 0.5px dashed var(--e360-card-border);
  border-radius: 14px; padding: 44px 32px; text-align: center;
}
.pending .p-ic { font-size: 26px; color: var(--e360-ink-4); margin-bottom: 12px; display: flex; justify-content: center; }
.pending .p-ic svg { width: 30px; height: 30px; }
.pending h3 { font-size: 16px; font-weight: 600; color: var(--e360-ink-2); }
.pending p { font-size: 13.5px; color: var(--e360-ink-3); margin-top: 8px; max-width: 46ch; margin-left: auto; margin-right: auto; }
.state-empty {
  margin-top: 22px; padding: 40px 24px; text-align: center; color: var(--e360-ink-4);
  font-size: 14px; background: var(--e360-paper-2); border: 0.5px solid var(--e360-card-border); border-radius: 14px;
}

/* Mi bitácora / Mi seguimiento: sin vínculo o sin entradas — icono + nombre de feature
   propios para que las dos pantallas no se confundan a simple vista entre sí (reporte
   2026-08-26: "me enseña exactamente lo mismo"). */
.state-feature-empty { text-align: center; padding: 36px 24px; }
.state-feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--e360-accent-soft, var(--e360-paper-2)); color: var(--e360-accent, var(--e360-ink-2));
  margin-bottom: 10px;
}
.state-feature-title { font-size: 15px; font-weight: 600; color: var(--e360-ink-2); margin-bottom: 6px; }
.state-feature-empty .empty { color: var(--e360-ink-4); font-size: 13.5px; max-width: 46ch; margin: 0 auto; }

/* inline banner for transient load errors (does NOT log the user out) */
.load-banner {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
  background: var(--e360-warn-bg); border: 0.5px solid var(--e360-warn); border-radius: 10px;
  padding: 11px 15px; font-size: 13px; color: var(--e360-warn);
}
.load-banner button {
  margin-left: auto; padding: 5px 12px; border-radius: 7px; border: 0.5px solid var(--e360-warn);
  color: var(--e360-warn); font-weight: 600; font-size: 12.5px; background: transparent;
}
.load-banner.info { background: var(--e360-tint-2); border-color: var(--e360-tint); color: var(--e360-ink-2); }
.load-banner.info button {
  margin-left: auto; width: 26px; height: 26px; padding: 0; border: none; border-radius: 6px;
  color: var(--e360-ink-3); background: transparent; display: flex; align-items: center; justify-content: center;
}
.load-banner.info button svg { width: 15px; height: 15px; }
.load-banner.info button:hover { background: var(--e360-sand); color: var(--e360-ink); }

/* ============ BITÁCORA (org-admin log: decisiones + reflexiones) ============ */
/* Internal tabs, a form + list per sub-section, and a privacy asymmetry made visible:
   decisiones carry an org/privada badge; reflexiones are always privada, banner + badge. */
.bit-tabs { display: inline-flex; flex-wrap: wrap; row-gap: 4px; gap: 4px; padding: 4px; background: var(--e360-paper-2); border: 0.5px solid var(--e360-card-border); border-radius: 10px; margin-bottom: 18px; }
.bit-tab { padding: 8px 16px; border-radius: 7px; font-size: 13.5px; font-weight: 600; color: var(--e360-ink-3); transition: background var(--e360-dur-fast), color var(--e360-dur-fast); }
.bit-tab:hover { color: var(--e360-ink); }
.bit-tab.active { background: var(--e360-tint); color: var(--e360-deep); }

.bit-cols { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 18px; align-items: start; }
.bit-form { padding: 18px 20px; }
.bit-form-title { font-size: 15px; font-weight: 600; color: var(--e360-ink); margin-bottom: 14px; }
.bit-field { margin-bottom: 13px; }
.bit-field-narrow { max-width: 180px; }
.bit-label { display: block; font-size: 12px; font-weight: 600; color: var(--e360-ink-2); margin-bottom: 5px; }
.bit-req { color: var(--e360-crit); }
.bit-input { width: 100%; padding: 9px 11px; font-family: inherit; font-size: 13.5px; color: var(--e360-ink); background: var(--e360-paper); border: 0.5px solid var(--e360-rule); border-radius: var(--e360-radius); transition: border-color var(--e360-dur-fast), box-shadow var(--e360-dur-fast); }
.bit-input:focus { outline: none; border-color: var(--e360-mid); box-shadow: 0 0 0 3px var(--e360-tint); }
.bit-textarea { resize: vertical; min-height: 62px; line-height: 1.5; }
select.bit-input { cursor: pointer; }
.bit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bit-hint { font-size: 11.5px; color: var(--e360-ink-3); margin-top: 6px; line-height: 1.45; }
.bit-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
/* SPEC-FIN-DE-SEMANA fase 6: si los botones no caben en un renglón, pasan al siguiente enteros
   (antes cada uno se partía en dos renglones: «Descargar PDF de / códigos»). */
.bit-actions { flex-wrap: wrap; row-gap: 8px; }
.bit-actions > .bit-retry { white-space: nowrap; }
.bit-submit { padding: 10px 18px; border-radius: var(--e360-radius); background: var(--e360-deep); color: var(--e360-on-accent); font-size: 13.5px; font-weight: 600; transition: filter var(--e360-dur-fast); }
.bit-submit:hover:not(:disabled) { filter: brightness(1.07); }
.bit-submit:disabled { opacity: .55; cursor: default; }
.bit-actions-note { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--e360-ink-3); }
.bit-actions-note svg { width: 12px; height: 12px; }
.bit-form-err { margin-top: 12px; font-size: 12.5px; font-weight: 500; color: var(--e360-crit); background: var(--e360-crit-bg); border-radius: 8px; padding: 8px 11px; }

.bit-privacy { display: flex; gap: 12px; align-items: flex-start; background: var(--e360-tint-2); border: 0.5px solid var(--e360-tint); border-left: 3px solid var(--e360-deep); border-radius: 10px; padding: 13px 16px; margin-bottom: 16px; font-size: 13px; color: var(--e360-ink-2); line-height: 1.5; max-width: 72ch; }
.bit-privacy b { color: var(--e360-ink); font-weight: 600; }
.bit-privacy-ic { flex: 0 0 auto; color: var(--e360-deep); display: flex; }
.bit-privacy-ic svg { width: 18px; height: 18px; }

.bit-list { display: flex; flex-direction: column; gap: 10px; }
.bit-item { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; background: var(--e360-paper-2); border: 0.5px solid var(--e360-card-border); border-radius: 12px; padding: 14px 16px; }
/* SPEC-FIN-DE-SEMANA fase 6: la parte principal pide 200px antes de dejar que lo de al lado la
   aplaste; si no caben juntos, lo de al lado baja a su renglón (un nombre no se parte en dos). */
.bit-item-main { flex: 1 1 200px; min-width: 0; }
.bit-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.bit-item-title { font-size: 14.5px; font-weight: 600; color: var(--e360-ink); line-height: 1.4; word-break: break-word; }
.bit-item-desc { font-size: 13px; color: var(--e360-ink-2); margin-top: 5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.bit-item-text { font-size: 13.5px; color: var(--e360-ink); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.bit-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 5px; font-size: 11px; font-weight: 600; }
.bit-badge svg { width: 12px; height: 12px; }
.bit-badge.type { background: var(--e360-tint); color: var(--e360-deep); }
.bit-badge.shared { background: var(--e360-good-bg); color: var(--e360-good); }
.bit-badge.priv { background: var(--e360-sand); color: var(--e360-ink-3); }
.bit-badge.warn { background: var(--e360-warn-bg); color: var(--e360-warn); }
.bit-badge.tema { background: var(--e360-tint); color: var(--e360-deep); }
/* 061: "Filtrar por" de Mi Bitácora — dos <select> (categoría server-side, severidad
   client-side) en vez del chip-row anterior (un botón por macrotema no escalaba a 8 temas). */
.bit-filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 16px; }
.bit-filterbar-label { font-size: 13px; font-weight: 600; color: var(--e360-ink-2); }
.bit-filter-sel { width: auto; min-width: 150px; }
.detail-tema { display: flex; gap: 8px; margin-bottom: 12px; }
/* Teléfono sin registro (huérfano del endpoint viejo): se marca como problema, no se oculta. */
.bit-item-warn { box-shadow: inset 3px 0 0 var(--e360-warn); }
.org-phone-problem { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px;
  background: var(--e360-warn-bg); border-radius: 8px; padding: 8px 11px; }
.org-phone-problem-txt { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--e360-warn); line-height: 1.45; }
.org-phone-problem .bit-retry { margin-left: auto; white-space: nowrap; color: var(--e360-warn); }
.org-phone-actions { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.org-phone-actions .bit-retry { font-size: 12px; }
/* La pregunta de confirmación de "Dar de baja" es más larga que el "¿Borrar?" genérico de
   decisiones/reflexiones (de donde .bit-confirm viene) — sin esto se salía del ancho del card. */
.org-phone-actions .bit-confirm { flex-wrap: wrap; }
.org-phone-actions .bit-confirm-q { white-space: normal; flex: 1 1 100%; }
/* §2 — "Mi número" (vínculo user↔teléfono). */
.org-mynum { padding: 14px 16px; margin-top: 4px; }
.org-mynum-linked { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.org-mynum-linked > span { font-size: 14px; color: var(--e360-ink-2); }
.org-mynum-linked .bit-retry { margin-left: auto; white-space: nowrap; }
.org-mynum-form .bit-actions { margin-top: 10px; }
.bit-date { margin-left: auto; font-size: 11px; color: var(--e360-ink-4); font-variant-numeric: tabular-nums; }
.bit-item-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.bit-del, .bit-item-del { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--e360-ink-4); transition: background var(--e360-dur-fast), color var(--e360-dur-fast); }
.bit-del svg, .bit-item-del svg { width: 15px; height: 15px; }
.bit-del:hover, .bit-item-del:hover { background: var(--e360-crit-bg); color: var(--e360-crit); }
.bit-confirm { display: flex; align-items: center; gap: 7px; }
/* D12 — el confirm de "asignar servicio" gana un campo (nombre para seguimiento), así que su
   variante en columna: select arriba, campo en medio, botones abajo. El .bit-confirm de una
   sola línea (bajas, decisiones) queda igual. */
.bit-confirm-col { flex-direction: column; align-items: stretch; gap: 9px; width: 100%; }
.bit-confirm-col .bit-field { margin: 0; }
.bit-confirm-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.org-ph-seg .bit-hint { margin: 4px 0 0; }
.bit-confirm-q { font-size: 12px; color: var(--e360-ink-3); white-space: nowrap; }
.bit-confirm-yes { padding: 5px 10px; border-radius: 7px; background: var(--e360-crit); color: var(--e360-on-accent); font-size: 12px; font-weight: 600; white-space: nowrap; }
.bit-confirm-no { padding: 5px 10px; border-radius: 7px; border: 0.5px solid var(--e360-rule); color: var(--e360-ink-2); font-size: 12px; font-weight: 500; background: var(--e360-paper-2); }
.bit-retry { color: var(--e360-deep); font-weight: 600; text-decoration: underline; }
.bit-retry:disabled { color: var(--e360-ink-4); text-decoration: none; cursor: default; }

/* 091 — módulos funcionales de Mi Bitácora (Frecuencia/Agenda/Planificación/Trabajo/Emoción). */
.bit-tabs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 4px; }
.bit-tabs-row .bit-tabs { margin-bottom: 0; }
.bit-prefs-toggle { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--e360-ink-4); border: 0.5px solid var(--e360-card-border); background: var(--e360-paper-2); transition: background var(--e360-dur-fast), color var(--e360-dur-fast); }
.bit-prefs-toggle:hover { background: var(--e360-tint); color: var(--e360-deep); }
.bit-prefs-panel { margin: 12px 0 18px; }
.bit-prefs-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 13.5px; color: var(--e360-ink-2); cursor: pointer; }
.bit-sub-h { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--e360-ink-3); margin: 18px 0 8px; }
.bit-sub-h:first-child { margin-top: 0; }
.bit-agenda-group { margin-bottom: 6px; }
.bit-agenda-date { font-size: 11px; font-weight: 600; color: var(--e360-ink-3); font-variant-numeric: tabular-nums; margin: 10px 0 6px; }
.bit-item-done .bit-item-text { color: var(--e360-ink-4); text-decoration: line-through; }
.bit-check { display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 1; min-width: 0; }
.bit-check input { flex: 0 0 auto; width: 17px; height: 17px; }
.bit-seguimiento-btn { margin-top: 8px; padding: 6px 12px; border-radius: 7px; border: 0.5px solid var(--e360-rule); background: var(--e360-paper-2); color: var(--e360-ink-2); font-size: 12px; font-weight: 600; }
.bit-seguimiento-btn:hover { border-color: var(--e360-mid); color: var(--e360-deep); }
.bit-seguimiento-btn.on { background: var(--e360-good-bg); color: var(--e360-good); border-color: transparent; }
.bit-mod-card { margin-top: 4px; }

/* Diario — agrupado por día + acento de color por tema + entrada escalonada (.rise ya
   existe, se reusa tal cual). */
.bit-diario-group { margin-bottom: 22px; }
.bit-diario-group:last-child { margin-bottom: 0; }
.bit-diario-date { font-size: 12.5px; font-weight: 700; color: var(--e360-ink-2); margin: 0 0 10px; }
.bit-item-diario { box-shadow: inset 3px 0 0 var(--bit-accent, var(--e360-cat-other)); cursor: pointer; transition: transform var(--e360-dur-fast), box-shadow var(--e360-dur-fast); }
.bit-item-diario:hover { transform: translateX(2px); }

/* Frecuencia — selector de ventana + donut animado al entrar. */
.bit-days-sel { display: inline-flex; gap: 4px; padding: 3px; margin-bottom: 14px; background: var(--e360-paper-2); border: 0.5px solid var(--e360-card-border); border-radius: 9px; }
.bit-days-btn { padding: 6px 13px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--e360-ink-3); transition: background var(--e360-dur-fast), color var(--e360-dur-fast); }
.bit-days-btn:hover { color: var(--e360-ink); }
.bit-days-btn.active { background: var(--e360-tint); color: var(--e360-deep); }
.donut-animate .donut circle { animation: donutGrow .6s var(--e360-ease) both; transform-origin: center; transform-box: fill-box; }
.donut-animate .donut circle:nth-child(2) { animation-delay: .05s; }
.donut-animate .donut circle:nth-child(3) { animation-delay: .1s; }
.donut-animate .donut circle:nth-child(4) { animation-delay: .15s; }
.donut-animate .donut circle:nth-child(5) { animation-delay: .2s; }
.donut-animate .donut circle:nth-child(6) { animation-delay: .25s; }
@keyframes donutGrow { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }

/* 093 — botón "+ Añadir" (Agenda/Planificación), formulario de entrada manual (reusa
   .bit-form/.bit-input/.bit-actions ya definidas arriba para el bitácora de org-admin). */
.bit-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; margin-bottom: 14px; border-radius: var(--e360-radius); border: 0.5px dashed var(--e360-mid); color: var(--e360-deep); font-size: 13px; font-weight: 600; background: var(--e360-tint-2); transition: background var(--e360-dur-fast); }
.bit-add-btn:hover { background: var(--e360-tint); }
.bit-add-btn svg { width: 15px; height: 15px; }
.bit-manual-form { margin-bottom: 16px; }

/* Agenda — calendario mensual. max-width: no lo deja estirarse a todo el ancho de la
   columna en pantallas anchas (se vería absurdamente grande) pero sigue encogiendo al
   100% en angostas — misma idea que .bit-cols en vez de un ancho fijo. */
.bit-cal { max-width: 440px; padding: 16px 18px; margin-bottom: 16px; background: var(--e360-paper-2); border: 0.5px solid var(--e360-card-border); border-radius: 14px; }
.bit-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bit-cal-month { font-size: 14.5px; font-weight: 700; color: var(--e360-ink); text-transform: capitalize; }
.bit-cal-nav { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--e360-ink-3); border: 0.5px solid var(--e360-card-border); background: var(--e360-paper); transition: background var(--e360-dur-fast), color var(--e360-dur-fast); }
.bit-cal-nav:hover { background: var(--e360-tint); color: var(--e360-deep); }
.bit-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--e360-ink-4); margin-bottom: 6px; }
.bit-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.bit-cal-cell {
  position: relative; aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; border-radius: 10px;
  font-size: 13px; color: var(--e360-ink-2);
  transition: background var(--e360-dur-fast), color var(--e360-dur-fast), transform var(--e360-dur-fast);
}
.bit-cal-cell.empty { visibility: hidden; }
.bit-cal-cell:not(.empty):hover { background: var(--e360-sand); transform: scale(1.06); }
.bit-cal-cell.today { box-shadow: inset 0 0 0 1.5px var(--e360-mid); }
.bit-cal-cell.today .bit-cal-daynum { font-weight: 700; color: var(--e360-deep); }
.bit-cal-cell.has-items:not(.selected) { background: var(--e360-tint-2); }
.bit-cal-cell.has-items .bit-cal-daynum { font-weight: 700; }
.bit-cal-cell.selected { background: var(--e360-deep); transform: scale(1.06); }
.bit-cal-cell.selected .bit-cal-daynum { color: var(--e360-on-accent); }
.bit-cal-daynum { font-variant-numeric: tabular-nums; }
.bit-cal-count {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--e360-deep); color: var(--e360-on-accent);
  font-size: 9.5px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.bit-cal-cell.selected .bit-cal-count { background: var(--e360-on-accent); color: var(--e360-deep); }
.bit-cal-day-detail { margin-bottom: 16px; max-width: 520px; }

/* 101 — sincronización de Agenda con calendario externo (.ics de solo lectura). */
.bit-ics-sync { margin-bottom: 18px; max-width: 620px; }
.bit-ics-linkrow { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.bit-ics-linkrow .bit-input { flex: 1 1 auto; min-width: 0; }
.bit-ics-linkrow .bit-retry { flex: 0 0 auto; white-space: nowrap; }
.bit-ics-copy-msg { display: block; margin-top: 6px; font-size: 12px; color: var(--e360-deep); font-weight: 600; }
.bit-howto { margin-top: 12px; border: 0.5px solid var(--e360-rule); border-radius: 10px; padding: 10px 13px; }
.bit-howto summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--e360-ink); }
.bit-howto ol { margin: 10px 0 0; padding-left: 20px; font-size: 12.5px; color: var(--e360-ink-2); line-height: 1.6; }
.bit-howto .bit-hint { margin-top: 8px; }
.bit-inline-link { color: var(--e360-deep); font-weight: 600; text-decoration: underline; }
.bit-inline-link:hover { color: var(--e360-ink); }

/* Detalle de un día — línea de tiempo por hora. */
.bit-tl-allday { margin-bottom: 14px; }
.bit-tl-allday-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--e360-ink-3); margin-bottom: 8px; }
.bit-tl-allday-cards { display: flex; flex-direction: column; gap: 8px; }
.bit-timeline { position: relative; padding-left: 66px; }
.bit-timeline::before { content: ''; position: absolute; left: 54px; top: 6px; bottom: 6px; width: 2px; background: var(--e360-rule); }
.bit-tl-row { position: relative; margin-bottom: 12px; }
.bit-tl-row:last-child { margin-bottom: 0; }
.bit-tl-time { position: absolute; left: -66px; top: 10px; width: 48px; text-align: right; font-size: 11.5px; font-weight: 700; color: var(--e360-ink-3); }
.bit-tl-dot { position: absolute; left: -16px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--e360-deep); box-shadow: 0 0 0 3px var(--e360-paper-2); }
.bit-tl-card { background: var(--e360-paper-2); border: 0.5px solid var(--e360-card-border); border-radius: 10px; padding: 10px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bit-tl-text { flex: 1; min-width: 0; font-size: 13.5px; color: var(--e360-ink); line-height: 1.5; word-break: break-word; }

/* Mini gráfica de barras compacta (Frecuencia · tendencia diaria, Emoción y bienestar) —
   altura FIJA, nunca se ve enorme sin importar cuántas barras. */
.mbar-chart { display: flex; align-items: flex-end; gap: 4px; }
.mbar { flex: 1 1 0; min-width: 3px; max-width: 18px; height: 100%; display: flex; align-items: flex-end; }
.mbar-fill { width: 100%; min-height: 2px; border-radius: 3px 3px 1px 1px; transition: height .5s var(--e360-ease); }
.mbar-range { display: flex; justify-content: space-between; margin-top: 7px; font-size: 10.5px; font-weight: 600; color: var(--e360-ink-4); }

/* Planificación — tablero kanban por categoría, arrastrable. */
.bit-kanban { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
/* D6 (spec registro visible 2026-09-09, ticket 7de22717 "ventana angosta"): las columnas ya
   NO son de 250px fijos — reparten el ancho COMPLETO de la columna principal (flex-grow),
   con 250px de mínimo; con muchas categorías el overflow-x del tablero sigue funcionando. */
.bit-kanban-col {
  flex: 1 1 280px; min-width: 250px; display: flex; flex-direction: column; gap: 10px;
  background: var(--e360-paper-2); border: 0.5px solid var(--e360-card-border);
  border-radius: 14px; padding: 12px; max-height: 68vh;
}
.bit-kanban-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 3px 8px; border-bottom: 0.5px solid var(--e360-rule-2); }
.bit-kanban-col-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--e360-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bit-kanban-col-count { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: var(--e360-ink-4); background: var(--e360-sand); border-radius: 8px; padding: 1px 7px; }
.bit-kanban-col-body { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 46px; border-radius: 9px; padding: 3px; transition: background var(--e360-dur-fast), box-shadow var(--e360-dur-fast); }
.bit-kanban-col-body.drag-over { background: var(--e360-tint-2); box-shadow: inset 0 0 0 2px var(--e360-mid); }
.bit-kanban-empty { margin: 0; font-size: 11.5px; color: var(--e360-ink-4); text-align: center; padding: 16px 4px; }
.bit-kanban-card {
  background: var(--e360-paper); border: 0.5px solid var(--e360-card-border); border-radius: 10px;
  padding: 10px 10px 10px 12px; cursor: grab; display: flex; align-items: flex-start; gap: 6px;
  transition: box-shadow var(--e360-dur-fast), opacity var(--e360-dur-fast);
}
.bit-kanban-card:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.bit-kanban-card:active { cursor: grabbing; }
.bit-kanban-card.dragging { opacity: .35; }
.bit-kanban-card.done .bit-item-text { color: var(--e360-ink-4); text-decoration: line-through; }
.bit-kanban-card .bit-check { flex: 1; min-width: 0; }
.bit-kanban-card .bit-item-del { width: 26px; height: 26px; }
.bit-kanban-card .bit-item-del svg { width: 13px; height: 13px; }
/* D6 — resumen de una línea (el claim) + texto original expandible dentro de la tarjeta. */
.bit-kanban-card { flex-wrap: wrap; }
.bit-tarea-full { width: 100%; margin-top: 2px; }
.bit-tarea-full summary {
  cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--e360-ink-3);
  list-style-position: inside;
}
.bit-tarea-full[open] summary { margin-bottom: 4px; }
.bit-tarea-full .bit-item-text { font-size: 12.5px; color: var(--e360-ink-2); }
/* D5 — Trabajo, vista "texto original": la lista de claims que salieron del segmento. */
.bit-claims-sub { margin: 8px 0 0; padding-left: 20px; }
.bit-claims-sub li { font-size: 12.5px; color: var(--e360-ink-2); line-height: 1.5; margin-bottom: 3px; }

/* Emoción y bienestar — mood ribbon + tarjeta de consejo de IA. */
.bit-mood-ribbon { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.bit-mood-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 6px; border-radius: 10px; background: color-mix(in srgb, var(--bit-mood-color) 14%, var(--e360-paper-2)); min-width: 42px; }
.bit-mood-face { font-size: 18px; line-height: 1; }
.bit-mood-date { font-size: 9.5px; color: var(--e360-ink-3); }
.bit-consejo-card { display: flex; flex-direction: column; gap: 8px; }
.bit-consejo-head { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--e360-deep); }
.bit-consejo-text { font-size: 13.5px; line-height: 1.6; color: var(--e360-ink); font-style: italic; }
.bit-consejo-loading { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--e360-ink-3); }
.bit-consejo-err { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 500; color: var(--e360-crit); }

/* 1200px es donde .shell empuja el panel derecho a overlay (ver §RESPONSIVE más abajo) —
   pero .bit-cols/.bit-tabs seguían asumiendo columna de contenido ancha hasta 900px,
   dejando una franja (~900-1200px) apretada: el panel ya no ocupa espacio real, pero
   nada de Mi Bitácora se había achicado todavía. */
@media (max-width: 1024px) {
  .bit-cols { grid-template-columns: 1fr; }
}

/* ============ RIGHT PANEL ============ */
.right { background: var(--e360-paper); border-left: 0.5px solid var(--e360-rule); display: flex; flex-direction: column; overflow: hidden; }
.right-collapsed .right { border-left: none; }
.right-head { height: 60px; flex: 0 0 60px; display: flex; align-items: center; gap: 4px; padding: 0 10px 0 16px; border-bottom: 0.5px solid var(--e360-rule); }
.right-tabs { display: flex; gap: 2px; flex: 1; }
.rtab { padding: 7px 11px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--e360-ink-3); transition: background var(--e360-dur-fast), color var(--e360-dur-fast); }
.rtab:hover { background: var(--e360-sand); color: var(--e360-ink); }
.rtab.active { background: var(--e360-tint); color: var(--e360-deep); }
.right-body { flex: 1; overflow-y: auto; padding: 18px 16px; }
.rpane { display: none; }
.rpane.active { display: block; }

.rlabel { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--e360-ink-4); font-weight: 600; margin: 4px 0 10px; }
.detail-q { font-size: 15px; line-height: 1.55; color: var(--e360-ink); font-style: italic; padding: 14px 16px; background: var(--e360-tint-2); border-radius: 10px; border-left: 3px solid var(--e360-mid); }
.detail-meta { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; }
.dm-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.dm-row .k { color: var(--e360-ink-3); }
.dm-row .v { color: var(--e360-ink); font-weight: 600; text-align: right; }
.dm-row .v.crit { color: var(--e360-crit); }
/* F-VOZ (112): otras respuestas de la misma visita de Feedback QR, en el panel Detalle —
   mismo lenguaje visual que .detail-q pero más chico/sin cursiva, de solo lectura. */
.detail-siblings { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.detail-sibling { background: var(--e360-tint-2); border-radius: 10px; padding: 11px 14px; }
.detail-sibling-q { font-size: 13.5px; line-height: 1.5; color: var(--e360-ink); }

.filter-group { margin-bottom: 22px; }
.filter-custom-toggle { display: block; margin-top: 8px; font-size: 12px; }
.filter-custom { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.seg { display: flex; gap: 0; border: 0.5px solid var(--e360-rule); border-radius: 8px; overflow: hidden; }
.seg button { flex: 1; padding: 8px 4px; font-size: 12.5px; font-weight: 500; color: var(--e360-ink-3); background: var(--e360-paper-2); transition: .14s; }
.seg button.active { background: var(--e360-deep); color: var(--e360-on-accent); }
/* D-D3.4 — transición de estado en el detalle (reusa .seg; el vigente queda marcado) */
.estado-block { margin-top: 16px; }
.estado-seg { margin-top: 6px; }
.estado-seg button[disabled]:not(.active) { opacity: .5; }
.fchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 20px; border: 0.5px solid var(--e360-rule); background: var(--e360-paper-2); font-size: 12.5px; font-weight: 500; color: var(--e360-ink-2); margin: 0 6px 6px 0; transition: .14s; }
.fchip:hover { border-color: var(--e360-mid); }
.fchip.on { background: var(--e360-tint); border-color: var(--e360-mid); color: var(--e360-deep); }

.reopen {
  position: absolute; top: 14px; right: 14px; z-index: 10;
  width: 36px; height: 36px; border-radius: 8px; background: var(--e360-paper); border: 0.5px solid var(--e360-rule);
  display: none; align-items: center; justify-content: center; color: var(--e360-ink-3);
}
.reopen svg { width: 19px; height: 19px; }
.right-collapsed .reopen { display: flex; }
.reopen:hover { color: var(--e360-deep); border-color: var(--e360-mid); }

/* ============ C7 — MODAL MI CUENTA (Perfil + Aspecto) ============ */
.acct-tabs { display: flex; gap: 2px; padding: 10px 20px 0; border-bottom: 0.5px solid var(--e360-rule-2); }
.acct-tab { padding: 8px 14px; border-radius: 8px 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--e360-ink-3); position: relative; }
.acct-tab:hover { color: var(--e360-ink); }
.acct-tab.active { color: var(--e360-deep); }
.acct-tab.active::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -0.5px; height: 2px; background: var(--e360-deep); border-radius: 2px 2px 0 0; }
.apane { display: none; }
.apane.active { display: block; }

.acct-id { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.acct-ava { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--e360-deep); color: var(--e360-on-accent); font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
.acct-ava-img { object-fit: cover; }
.acct-name { font-size: 15px; font-weight: 600; color: var(--e360-ink); }
.acct-mail { font-size: 12.5px; color: var(--e360-ink-3); }
.acct-rows { border-top: 0.5px solid var(--e360-rule-2); }
.acct-row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 2px; border-bottom: 0.5px solid var(--e360-rule-2); font-size: 13px; }
.acct-row .k { color: var(--e360-ink-3); }
.acct-row .v { color: var(--e360-ink); font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.acct-pw { margin-top: 18px; }
.acct-pw-btn { padding: 9px 16px; border-radius: var(--e360-radius); border: 0.5px solid var(--e360-rule); background: var(--e360-paper-2); color: var(--e360-ink-2); font-size: 13px; font-weight: 600; transition: border-color var(--e360-dur-fast), color var(--e360-dur-fast); }
.acct-pw-btn:hover:not(:disabled) { border-color: var(--e360-mid); color: var(--e360-deep); }
.acct-pw-btn:disabled { opacity: .55; cursor: default; }
.acct-pw-msg { font-size: 12.5px; margin-top: 10px; line-height: 1.45; }
.acct-pw-msg.ok { color: var(--e360-good); }
.acct-pw-msg.err { color: var(--e360-crit); }

/* 104 — Soporte (conversación cliente↔staff): lista de tickets + hilo. Reusa .card/.bit-*/
   .acct-pw-* para todo lo genérico; estas son las únicas piezas nuevas (fila clicable, pills
   de estado, burbujas de mensaje). */
.sup-row { width: 100%; text-align: left; cursor: pointer; display: block; }
.sup-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sup-row-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--e360-ink-3); }
.sup-estado-recibido { background: var(--e360-crit-bg); color: var(--e360-crit); }
.sup-estado-en_curso { background: var(--e360-warn-bg); color: var(--e360-warn); }
.sup-estado-resuelto { background: var(--e360-good-bg); color: var(--e360-good); }
.sup-thread { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; max-height: 46vh; overflow-y: auto; }
.sup-msg { max-width: 82%; padding: 8px 12px; border-radius: 12px; background: var(--e360-paper-2); border: 0.5px solid var(--e360-rule-2); }
.sup-msg-staff { align-self: flex-start; }
.sup-msg-client { align-self: flex-end; background: var(--e360-tint); border-color: transparent; }
.sup-msg-meta { font-size: 11px; color: var(--e360-ink-4); margin-bottom: 3px; }
.sup-msg-body { font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.sup-msg-img { display: block; max-width: 100%; margin-top: 6px; border-radius: 8px; }

/* Aspecto — segmento de modo (claro/oscuro) */
.mode-seg { display: flex; gap: 8px; margin-bottom: 4px; }
.mode-opt { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 10px; border: 0.5px solid var(--e360-rule); background: var(--e360-paper-2); font-size: 13px; font-weight: 600; color: var(--e360-ink-2); transition: border-color .14s, box-shadow .14s; }
.mode-opt .ic { display: flex; color: var(--e360-ink-3); }
.mode-opt:hover { border-color: var(--e360-mid); }
.mode-opt.on { border-color: var(--e360-deep); box-shadow: 0 0 0 3px var(--e360-tint); color: var(--e360-deep); }
.mode-opt.on .ic { color: var(--e360-deep); }
/* En modo oscuro los ambientes claros no aplican: se atenúan (siguen clicables — elegir
   uno regresa a modo claro con ese ambiente). */
.pal-grid.dim { opacity: .55; }

/* Ajustes puntuales de modo oscuro sobre colores no tokenizados */
:root[data-theme="dark"] .page-kicker { border-color: #2E5B4B; }
/* El carril del track (sand sobre card) pierde relieve en oscuro: se hunde como groove. */
:root[data-theme="dark"] .theme-track { background: #0D1411; }

/* settings modal */
.modal-scrim { position: fixed; inset: 0; background: rgba(29, 58, 49, .28); display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal-scrim.open { display: flex; }
.modal { background: var(--e360-paper); border: 0.5px solid var(--e360-rule); border-radius: 16px; width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow: hidden; box-shadow: 0 20px 60px rgba(29, 58, 49, .18); display: flex; flex-direction: column; }
/* Ayuda: guía + FAQ es más contenido del que 440px lee bien — variante más ancha, mismo sistema. */
.modal.modal-wide { max-width: 640px; }
.modal-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 0.5px solid var(--e360-rule-2); }
.modal-head h3 { font-size: 16px; font-weight: 600; color: var(--e360-ink); }
.modal-body { padding: 20px; flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.modal-foot { flex: 0 0 auto; display: flex; gap: 10px; justify-content: flex-end; padding: 16px 20px; border-top: 0.5px solid var(--e360-rule-2); }

/* Portal de Ayuda (guía + FAQ) */
.help-section { margin-top: 22px; }
.help-section:first-child { margin-top: 4px; }
/* 140 (pedido directo del usuario, 2026-09-05/06) — "¿Necesitas repetir alguna explicación?":
   dos botones (recorrido del panel vs. bienvenida completa), cada uno con su propia descripción
   chica debajo, apilados y centrados. Bug reportado (captura adjunta): `.help-replay-item` sin
   `align-items: center` heredaba el `align-items: stretch` default de flexbox en un contenedor
   column — el botón se estiraba al ancho completo del panel en vez de quedarse a su tamaño
   natural, y el texto de abajo no quedaba centrado bajo él. */
.help-replay-list { display: flex; flex-direction: column; gap: 16px; margin-top: 10px; }
.help-replay-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.help-replay-item .help-item-desc { max-width: 46ch; margin-top: 0; }
.help-list { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.help-item { border: 0.5px solid var(--e360-rule); border-radius: 10px; padding: 10px 13px; }
.help-item-title { font-size: 13.5px; font-weight: 600; color: var(--e360-ink); }
.help-item-desc { font-size: 12.5px; color: var(--e360-ink-3); margin-top: 3px; line-height: 1.45; }
.help-tag { font-size: 10px; font-weight: 600; letter-spacing: .02em; color: var(--e360-ink-3); background: var(--e360-sand); border: 0.5px solid var(--e360-rule); border-radius: 20px; padding: 1px 8px; vertical-align: middle; }
.help-faq-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.help-faq-item { border: 0.5px solid var(--e360-rule); border-radius: 10px; overflow: hidden; }
.help-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 13px; text-align: left; font-size: 13px; font-weight: 600; color: var(--e360-ink); transition: background var(--e360-dur-fast); }
.help-faq-q:hover { background: var(--e360-sand); }
.help-faq-caret { flex: 0 0 auto; color: var(--e360-ink-4); transition: transform var(--e360-dur-fast); }
.help-faq-q.open .help-faq-caret { transform: rotate(180deg); }
.help-faq-a { padding: 0 13px 13px; font-size: 12.5px; color: var(--e360-ink-3); line-height: 1.5; }
.set-label { font-size: 13px; font-weight: 600; color: var(--e360-ink); margin-bottom: 4px; }
.set-hint { font-size: 12.5px; color: var(--e360-ink-3); margin-bottom: 16px; line-height: 1.45; }
.pal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pal-opt { border: 0.5px solid var(--e360-rule); border-radius: 11px; padding: 12px; cursor: pointer; text-align: left; transition: border-color .14s, box-shadow .14s; background: var(--e360-paper-2); }
.pal-opt:hover { border-color: var(--e360-mid); }
.pal-opt.on { border-color: var(--e360-deep); box-shadow: 0 0 0 3px var(--e360-tint); }
.pal-sw { height: 34px; border-radius: 7px; margin-bottom: 9px; border: 0.5px solid rgba(0, 0, 0, .05); display: flex; overflow: hidden; }
.pal-sw span { flex: 1; }
.pal-name { font-size: 13px; font-weight: 600; color: var(--e360-ink); }
.pal-desc { font-size: 11.5px; color: var(--e360-ink-3); margin-top: 1px; }
.set-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 0.5px solid var(--e360-rule-2); }
.switch { width: 44px; height: 26px; border-radius: 20px; background: var(--e360-rule); position: relative; flex: 0 0 44px; transition: background .18s; cursor: pointer; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.switch[aria-checked="true"] { background: var(--e360-deep); }
.switch[aria-checked="true"] .knob { transform: translateX(18px); }

/* ============ C6 — FAB DE FEEDBACK + TOAST ============ */
.fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 24px;
  background: var(--e360-deep); color: var(--e360-on-accent);
  font-size: 13.5px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(29, 58, 49, .22);
  transition: filter var(--e360-dur-fast), transform var(--e360-dur-fast);
}
.fab:hover { filter: brightness(1.07); transform: translateY(-1px); }
.fab .ic { display: inline-flex; }
.fab .fab-lbl { display: inline; }

/* ============ SPEC-S20 mejoras staff (D-S20-1): «SIGUIENTES PASOS», barra plegable ============
   Antes (140) era un botón FLOTANTE fijo abajo a la izquierda, con dos animaciones infinitas, que
   caía justo encima del chip de usuario del pie del menú («Salir»). Ahora es una barra en el flujo
   del contenido, arriba de la vista (#siguientesPasos, index.html): no tapa nada y se pliega a una
   línea (título, cuenta y chevron). Sin animación ni color cálido: el acento de siempre. */
.sp-bar { margin: 0 0 16px; background: var(--e360-paper-2); border: 0.5px solid var(--e360-card-border);
          border-left: 3px solid var(--e360-deep); border-radius: 12px; }
.sp-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 16px;
           background: none; border: 0; font: inherit; color: var(--e360-ink); text-align: left;
           cursor: pointer; border-radius: 12px; }
.sp-head:hover { background: var(--e360-tint-2); }
.sp-head:focus-visible { outline: 2px solid var(--e360-deep); outline-offset: -2px; }
.sp-ic { display: inline-flex; color: var(--e360-deep); flex: 0 0 auto; }
.sp-titulo { font-size: 14px; font-weight: 600; }
.sp-cuenta { font-size: 12.5px; color: var(--e360-ink-3); white-space: nowrap; }
.sp-chev { margin-left: auto; display: inline-flex; color: var(--e360-ink-3); flex: 0 0 auto;
           transform: rotate(90deg); transition: transform var(--e360-dur-fast); }
.sp-bar.plegada .sp-chev { transform: none; }
.sp-cuerpo { padding: 0 16px 14px; }
.sp-sub { font-size: 12.5px; color: var(--e360-ink-3); line-height: 1.4; margin: 0 0 10px; }
.sp-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.sp-paso { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
           border: 0.5px solid var(--e360-rule); border-radius: 10px; background: var(--e360-paper); }
.sp-check {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  border: 1.5px solid var(--e360-rule); display: flex; align-items: center; justify-content: center;
  color: var(--e360-on-accent);
}
.sp-paso.hecho .sp-check { background: var(--e360-deep); border-color: var(--e360-deep); }
.sp-paso-cuerpo { flex: 1; min-width: 0; }
.sp-paso-titulo { font-size: 13px; color: var(--e360-ink); font-weight: 500; }
.sp-paso.hecho .sp-paso-titulo { color: var(--e360-ink-3); text-decoration: line-through; }
.sp-paso-pista { font-size: 12px; color: var(--e360-ink-3); margin-top: 2px; line-height: 1.4; }
.sp-ir { margin-top: 8px; }
/* S26 (A-S26-2): «Ir» también en los pasos que no son el siguiente, más discreto. */
.sp-ir.sp-ir-secundario { opacity: .75; }
/* Pulso junto al ítem del nav hacia el que apunta el paso siguiente del checklist — la
   "flechita"/puntero pedido por el usuario, sin depender del panel expandido. */
.nav-item.checklist-next { position: relative; }
.nav-item.checklist-next::after {
  content: ""; position: absolute; right: 10px; top: 50%;
  width: 7px; height: 7px; border-radius: 50%; background: var(--e360-deep);
  animation: e360ChecklistPulse 1.6s ease-in-out infinite;
}
@keyframes e360ChecklistPulse {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 1; }
  50% { transform: translateY(-50%) scale(1.7); opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-item.checklist-next::after { animation: none; }
}
/* 140 — al darle "Ir →": refuerzo GARANTIZADO sobre el elemento apuntado (independiente de
   driver.js, que reportó verse como "solo una notificación") — un halo fuerte y visible unos
   segundos. Genérica a propósito (no solo .nav-item): también se usa sobre bloques de
   contenido, ej. "Mi número" dentro de Organización (ver _checklistGo, index.html). */
.checklist-point {
  animation: e360ChecklistPointGlow 1s ease-in-out 4;
  border-radius: 8px;
}
@keyframes e360ChecklistPointGlow {
  0%, 100% { background: transparent; }
  50% { background: var(--e360-tint); }
}
@media (prefers-reduced-motion: reduce) {
  .checklist-point { animation: none; background: var(--e360-tint); }
}
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
  z-index: 60; max-width: min(90vw, 480px);
  background: var(--e360-ink); color: var(--e360-paper-2);
  font-size: 13px; font-weight: 500; padding: 11px 18px; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
#ticketForm { margin-top: 14px; }

/* ── WS-A2 · modal "Reportar mejora" ── */
.mejora-intro { font-size: 13.5px; color: var(--e360-ink-2); line-height: 1.5; margin: 0 0 12px; }
.mejora-page {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  background: var(--e360-paper-2); border: 0.5px solid var(--e360-rule); border-radius: 8px;
  padding: 8px 12px; margin-bottom: 12px; font-size: 12.5px;
}
.mejora-page-k { color: var(--e360-ink-3); font-weight: 600; letter-spacing: .02em; }
.mejora-page-v { color: var(--e360-deep); font-weight: 600; word-break: break-all; }
.mejora-counter { text-align: right; font-size: 11.5px; color: var(--e360-ink-3); margin-top: 5px; }

/* (RETIRADO 2026-07-27 — aquí vivía el bloque WS-A3 de la vista "Mejoras" del admin del
   cliente. El bloque WS-A2 del modal del FAB, arriba, queda intacto.) */

/* ============ C4 — ORGANIZACIÓN ============ */
.org-block-title { font-size: 16px; font-weight: 600; color: var(--e360-ink); margin: 26px 0 4px; }
.org-block-note { margin-bottom: 14px; }
.org-ava { margin-top: 2px; }

/* 140 (pedido directo del usuario, 2026-09-05) — botón (i) junto a cada título de sección: abre
   el recorrido guiado justo en ese paso (tourInfoBtn/data-tour-jump, views.js). Pequeño pero
   visible, como se pidió: círculo con "i", nunca un botón grande. */
.tour-info-btn {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 18px; height: 18px; border-radius: 50%; flex: none; margin-left: 7px;
  border: 1px solid var(--e360-ink-4); color: var(--e360-ink-3); background: transparent;
  font-size: 11px; font-weight: 700; font-style: italic; font-family: Georgia, 'Times New Roman', serif;
  line-height: 1; padding: 0; cursor: pointer;
  transition: border-color var(--e360-dur-fast), color var(--e360-dur-fast);
}
.tour-info-btn:hover { border-color: var(--e360-deep); color: var(--e360-deep); }
/* Dentro de .mi-label (11px, mayúsculas) el botón de 18px se ve grande — un pelín más chico. */
.mi-label .tour-info-btn { width: 15px; height: 15px; font-size: 9.5px; margin-left: 5px; }

/* Viñetas para avisos independientes (org-bullet-list, views.js::bulletList) — mismo tono que
   .bit-hint (de donde vienen), ahora como lista real en vez de <p> sueltos uno tras otro. */
.org-bullet-list { margin: 6px 0 0; padding-left: 18px; font-size: 11.5px; color: var(--e360-ink-3); }
.org-bullet-list li { margin-bottom: 4px; line-height: 1.45; }
.org-bullet-list li:last-child { margin-bottom: 0; }

/* floating quick switcher (sube para no chocar con el FAB de feedback) */
.quick { position: fixed; right: 18px; bottom: 74px; z-index: 40; display: none; align-items: center; gap: 8px; background: var(--e360-paper); border: 0.5px solid var(--e360-rule); border-radius: 22px; padding: 7px 10px; box-shadow: 0 6px 20px rgba(29, 58, 49, .12); }
.quick.show { display: flex; }
.quick .q-label { font-size: 11px; font-weight: 600; color: var(--e360-ink-3); letter-spacing: .04em; text-transform: uppercase; margin-right: 2px; }
.q-dot { width: 24px; height: 24px; border-radius: 50%; border: 0.5px solid rgba(0, 0, 0, .08); cursor: pointer; position: relative; transition: transform .12s; }
.q-dot:hover { transform: scale(1.12); }
.q-dot.on { box-shadow: 0 0 0 2px var(--e360-paper), 0 0 0 4px var(--e360-deep); }
.q-dot.q-dark { background: #131D18; border-color: rgba(255, 255, 255, .18); }

/* ============ RESPONSIVE (a11y/responsive floor, SHELL_SPEC §7) ============ */
.scrim { position: fixed; inset: 0; background: rgba(29, 58, 49, .28); z-index: 25; display: none; }
.scrim.open { display: block; }

@media (max-width: 1200px) {
  .shell { grid-template-columns: var(--e360-nav-w) 1fr 0px; }
  .shell.nav-collapsed { grid-template-columns: var(--e360-nav-w-collapsed) 1fr 0px; }
  /* right panel becomes an overlay drawer, not a column */
  .right {
    position: fixed; top: 0; right: 0; height: 100vh; width: var(--e360-right-w); max-width: 88vw;
    z-index: 30; transform: translateX(100%); transition: transform var(--e360-dur) var(--e360-ease);
    border-left: 0.5px solid var(--e360-rule);
  }
  .shell:not(.right-collapsed) .right { transform: translateX(0); box-shadow: -12px 0 40px rgba(29, 58, 49, .12); }
  .reopen { display: flex; }
  .shell:not(.right-collapsed) .reopen { display: none; }
}

@media (max-width: 768px) {
  /* Especificidad, no cascada: `.shell.right-collapsed` (línea ~285, SIN media query, 2
     clases) le ganaba a este `.shell` suelto (1 clase) aunque este bloque venga después en el
     archivo — a este ancho nav Y el panel derecho ya son overlays `position:fixed` (abajo), así
     que la 2da/3a columna del grid no deberían reservar espacio para NADA; listamos las
     combinaciones para igualar o superar esa especificidad y que #content por fin use el ancho
     completo (antes se quedaba angosto — reservaba la columna del nav aunque estuviera fuera de
     flujo). */
  .shell, .shell.nav-collapsed, .shell.right-collapsed, .shell.nav-collapsed.right-collapsed {
    grid-template-columns: 1fr;
  }
  .nav {
    position: fixed; top: 0; left: 0; width: var(--e360-nav-w); z-index: 30;
    /* Bug reportado: con la barra de direcciones/búsqueda del navegador (Chrome/Safari en
       celular, se muestra/oculta al hacer scroll) visible, 100vh mide el viewport MÁXIMO
       (como si esa barra ya estuviera oculta) — el pie del nav (cerrar sesión) quedaba
       renderizado por debajo de lo que en verdad se ve, inalcanzable. 100svh (viewport
       PEQUEÑO, garantiza la barra visible) es el fallback seguro; los navegadores que no lo
       entienden ignoran la línea entera y se quedan con el 100vh de arriba. */
    height: 100vh; height: 100svh;
    transform: translateX(-100%); transition: transform var(--e360-dur) var(--e360-ease);
  }
  .shell.nav-open .nav { transform: translateX(0); box-shadow: 12px 0 40px rgba(29, 58, 49, .12); }
  .content { padding: 20px 16px 60px; }
  .card.span2 { grid-column: span 1; }
  .hamburger { display: flex !important; }
  /* WS-A2 — en viewport angosto el FAB colapsa a icono circular (no tapa contenido en móvil). */
  .fab { padding: 0; width: 48px; height: 48px; justify-content: center; border-radius: 50%; }
  .fab .fab-lbl { display: none; }

  /* Bug reportado: en celular la barra superior (hamburger + título + ayuda + conmutador
     Vista sencilla/completa + "en vivo" + notif + botón del panel derecho) no cabía en el
     ancho — el conmutador y el botón del panel se salían de la pantalla o quedaban
     encimados con lo de al lado. .topbar nunca tuvo un tratamiento propio de mobile — solo
     heredaba el mismo padding/gap de escritorio. Se angosta la barra y se quita/encoge lo
     no esencial (el badge "en vivo" es puramente decorativo) hasta que todo cabe. */
  /* Bug reportado: partir el topbar en dos filas (intento anterior) empujaba todo el contenido
     hacia abajo y no se sentía como la misma barra — se descarta. Vuelve a una sola fila; lo
     que de verdad le faltaba espacio al nombre de la sección era el conmutador Vista
     sencilla/completa con SU TEXTO completo (~140px en dos píldoras). Con el conmutador
     reducido a solo ícono en este ancho (ver .vt-lbl/.vt-ic más abajo, renderViewToggle en
     views.js), `.crumb` (ya con flex:1 1 auto) recupera de sobra el espacio que necesitaba sin
     tener que envolver nada. En escritorio esas mismas reglas nunca aplican (solo viven dentro
     de este @media) — el conmutador se ve exactamente igual que siempre. */
  .topbar { padding: 0 10px; gap: 6px; }
  .crumb { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .topbar-sp { flex: 0; }
  .live-pill { display: none; }
  /* SPEC-UX-DENISE D-DEN-23: angosto ya no es solo ícono: la etiqueta corta («Sencilla» /
     «Completa»), sin ícono. */
  .topbar .view-toggle button { padding: 6px 10px; font-size: 12px; }
  .topbar .view-toggle .vt-lbl { display: none; }
  .topbar .view-toggle .vt-corta { display: inline; }
  .topbar .icon-btn { width: 32px; height: 32px; flex: none; }
  .topbar .icon-btn svg { width: 17px; height: 17px; }

  /* Pedido directo del usuario: el botón "Copiar…" de .mi-row, al envolver (ver flex-wrap más
     abajo en §Mi información), quedaba como una píldora chica pegada arriba a la derecha —
     "todo cortado en el cambio de línea". En vez de solo envolver, en celular se planta como
     su propia fila de ancho completo con más aire arriba, en vez de flotar encimado. */
  .mi-row > .copy-btn { flex: 1 1 100%; margin: 12px 0 0; justify-content: center; padding: 9px 12px; }
  .mi-row > .org-code-msg { flex: 1 1 100%; margin: 6px 0 0; text-align: center; }
}

@media (max-width: 420px) {
  /* Últimos px: en el celular más angosto (SE, mini) el conmutador de vista + los 3 íconos
     restantes (ayuda, notif, panel derecho) todavía no caben junto al título. El botón de
     ayuda POR PANTALLA es el único prescindible sin perder función real — Ayuda general
     (pie del nav) sigue cubriendo lo mismo, solo sin el atajo directo. */
  #viewHelpBtn { display: none; }
}
.hamburger { display: none; }

/* ── Convocatorias (U6) ─────────────────────────────────────────────────────── */
/* Bug reportado 2026-09-01 (con screenshot): --e360-card/--e360-border/--e360-muted/
   --e360-accent NUNCA se definieron en ningún :root — cada uso caía siempre a su fallback
   fijo (colores claros sin variante oscura), y .cv-item no fijaba `color` en absoluto para el
   título, que heredaba el ink de la PÁGINA (claro en modo oscuro) sobre un fondo que se quedó
   claro por el fallback — texto claro sobre fondo claro. Reemplazadas por los tokens reales
   (mismos que .card/.bit-item ya usan), que sí cambian con el tema. */
.cv-wrap { max-width: 860px; }
.cv-title { margin: 0 0 10px; }
.cv-back { background: none; border: 0; color: var(--e360-deep); cursor: pointer;
           padding: 0; margin-bottom: 10px; font-size: 13px; }
.cv-item { display: block; width: 100%; text-align: left; background: var(--e360-paper-2);
           color: var(--e360-ink); border: 1px solid var(--e360-card-border); border-radius: 10px;
           padding: 12px 14px; margin: 8px 0; cursor: pointer; font: inherit; }
.cv-item:hover { border-color: var(--e360-deep); }
.cv-item-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cv-item-meta { display: block; font-size: 12.5px; color: var(--e360-ink-3); margin-top: 4px; }
/* SPEC-S20 mejoras staff (D-S20-2): la fila de «Respuestas de convocatorias» se ve clicable. El
   borde solo no bastaba como hover: ahora el fondo toma el tinte del acento y la flecha avanza. */
.cv-wrap .cv-item { display: flex; align-items: center; gap: 12px;
                    transition: background var(--e360-dur-fast), border-color var(--e360-dur-fast); }
.cv-wrap .cv-item:hover, .cv-wrap .cv-item:focus-visible { background: var(--e360-tint-2); }
.cv-item-main { flex: 1; min-width: 0; display: block; }
.cv-item-arrow { flex: 0 0 auto; font-size: 22px; line-height: 1; color: var(--e360-ink-3);
                 transition: transform var(--e360-dur-fast), color var(--e360-dur-fast); }
.cv-wrap .cv-item:hover .cv-item-arrow, .cv-wrap .cv-item:focus-visible .cv-item-arrow {
  color: var(--e360-deep); transform: translateX(3px); }
.cv-kpis { display: flex; gap: 8px; margin: 10px 0; }
.cv-sub { margin: 18px 0 6px; font-size: 15px; }
.cv-note { font-size: 12.5px; color: var(--e360-ink-3); margin: 0 0 8px; }
.cv-theme { display: flex; gap: 10px; align-items: baseline; padding: 6px 0;
            border-bottom: 1px dashed var(--e360-card-border); }
.cv-theme-n { font-size: 12px; color: var(--e360-ink-3); }
.cv-matrix-scroll { overflow-x: auto; }
.cv-matrix { border-collapse: collapse; font-size: 13px; min-width: 420px; }
.cv-matrix th, .cv-matrix td { border: 1px solid var(--e360-card-border);
                               padding: 6px 10px; text-align: center; }
.cv-matrix th:first-child, .cv-tema { text-align: left; }
.cv-cell { font-size: 15px; }
.cv-pos { color: #2e7d32; } .cv-neg { color: #c0392b; } .cv-mix { color: #b4740e; }
.cv-neu { color: #6f6a62; } .cv-abs { color: #c9c2b6; }
/* .pill base + variantes de uso compartido (bug reportado: convAdminRow/convocatorias en el
   panel de CLIENTE usa .pill/.pill.on/.pill.off/.pill.crit, pero esas reglas solo vivían en
   admin.css — que index.html nunca carga, así que salían sin forma ni color, texto plano. Las
   variantes staff-only (.pill.warn con tokens --adm-*, .pill.review) se quedan en admin.css. */
.pill { font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 3px 9px; border-radius: 20px; text-transform: uppercase; }
.pill.on { background: var(--e360-tint); color: var(--e360-deep); }
.pill.off { background: var(--e360-sand); color: var(--e360-ink-4); }
.pill.crit { background: var(--e360-crit-bg); color: var(--e360-crit); }
.pill.warn2 { background: #fbefd8; color: #8a5a0b; }

/* ── U3 · Procedencia: claim → fragmento → transcripción de la entrega ────────────────── */
.proc-block { margin-top: 14px; border-top: 1px solid var(--e360-line, #e6e6ea); padding-top: 12px; }
.btn-proc {
  border: 1px solid var(--e360-line, #e6e6ea); background: transparent; cursor: pointer;
  border-radius: 8px; padding: 6px 10px; font-size: 12.5px; color: var(--e360-ink-3, #555);
}
.btn-proc:hover { background: var(--e360-surface-2, #f6f6f8); }
.proc-h { font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
          color: var(--e360-ink-4, #888); margin: 10px 0 4px; }
/* La limitación va ANTES del texto y visualmente atada a él: quien lo lea sabe qué está
   leyendo antes de leerlo. No es letra chica — es parte del dato. */
.proc-disc { font-size: 12px; line-height: 1.45; color: var(--e360-ink-4, #888);
             background: var(--e360-surface-2, #f6f6f8); border-radius: 6px;
             padding: 7px 9px; margin: 0 0 6px; }
.proc-verbatim { white-space: pre-wrap; max-height: 320px; overflow-y: auto; }
.proc-meta { font-size: 11.5px; color: var(--e360-ink-4, #888); margin-top: 5px; }
.proc-nota { font-size: 11.5px; color: var(--e360-ink-4, #888); margin: 10px 0 0;
             font-style: italic; }
/* fix/detalle-spans — cada fragmento literal por separado, con su posición encima. */
.proc-frag { margin: 0 0 10px; }
.proc-pos { font-size: 11.5px; color: var(--e360-ink-4, #888); margin: 0 0 3px; }
.proc-span { margin: 0; }
details.proc-vb { margin-top: 12px; }
.proc-liga { cursor: pointer; font-size: 12.5px; color: var(--e360-deep, #0F6E56);
             text-decoration: underline; text-underline-offset: 2px; margin-bottom: 6px; }

/* =====================================================================================
   WS-B · TEMAS DE COLOR DEL MENÚ LATERAL — docs/mockups/menu-themes-spec.md
   Solo el riel (§6): ninguna variable --nav- ni --g- la lee el área de contenido. Los hex se
   transcriben EXACTOS de las tablas §3 (cero interpretación). El tema se aplica siempre (default
   herbario), así que estas reglas gobiernan el riel en modo claro y oscuro del contenido por igual.
   ===================================================================================== */

/* ── §3.1 solido — un solo campo verde; bandas transparentes (la agrupación la da el espacio) ── */
[data-nav-theme="solido"] { --nav-rail:#0E3A30; --nav-header:#0B2F27; --nav-accent:#6FD3B0; --nav-hairline:rgba(255,255,255,.07); }
[data-nav-theme="solido"] [data-group] {
  --g-band:transparent; --g-edge:transparent; --g-label:#86B4A5; --g-item:#C4DBD3;
  --g-active-bg:rgba(111,211,176,.16); --g-hover-bg:rgba(255,255,255,.06); --g-active-edge:#6FD3B0;
}

/* ── §3.2 tinta — bandas casi neutras; color en filo/punto/etiqueta (label = edge) ── */
[data-nav-theme="tinta"] { --nav-rail:#0B1210; --nav-header:#060B0A; --nav-accent:#6FD3B0; --nav-hairline:rgba(255,255,255,.08); }
[data-nav-theme="tinta"] [data-group="escucha"]  { --g-band:#1B2723; --g-edge:#6FD3B0; --g-label:#6FD3B0; --g-item:#DAE3DF; --g-active-bg:rgba(111,211,176,.20); --g-hover-bg:rgba(111,211,176,.08); }
[data-nav-theme="tinta"] [data-group="analisis"] { --g-band:#18242A; --g-edge:#7FC8E8; --g-label:#7FC8E8; --g-item:#D9E2E6; --g-active-bg:rgba(127,200,232,.20); --g-hover-bg:rgba(127,200,232,.08); }
[data-nav-theme="tinta"] [data-group="registro"] { --g-band:#1E2233; --g-edge:#A9A6F0; --g-label:#A9A6F0; --g-item:#DEDEEA; --g-active-bg:rgba(169,166,240,.20); --g-hover-bg:rgba(169,166,240,.08); }
[data-nav-theme="tinta"] [data-group="eventos"]  { --g-band:#24231C; --g-edge:#D9C46A; --g-label:#D9C46A; --g-item:#E3E2D6; --g-active-bg:rgba(217,196,106,.20); --g-hover-bg:rgba(217,196,106,.08); }
[data-nav-theme="tinta"] [data-group="admin"]    { --g-band:#241E1C; --g-edge:#DFA07F; --g-label:#DFA07F; --g-item:#E6DCD7; --g-active-bg:rgba(223,160,127,.20); --g-hover-bg:rgba(223,160,127,.08); }
/* Bug encontrado 2026-09-14 (reporte directo del usuario): "Contáctanos"/"Soporte" casi
   invisibles — su data-group="contacto" no tenía bloque en tinta/herbario/espectro (la Regla 5
   de abajo, §1827, ya avisaba de este defecto EN DEV con el outline rojo; nadie lo había visto
   porque nav-dev no está activo por default). `solido` no tenía el bug: su selector genérico
   [data-group] cubre cualquier grupo, estos tres enumeran uno por uno y "contacto" faltaba.
   Gris-azulado neutro, distinto de los cinco matices ya usados en este tema.*/
[data-nav-theme="tinta"] [data-group="contacto"] { --g-band:#1E252B; --g-edge:#9FB0C0; --g-label:#9FB0C0; --g-item:#DEE3E7; --g-active-bg:rgba(159,176,192,.20); --g-hover-bg:rgba(159,176,192,.08); }

/* ── §3.3 herbario (recomendado por defecto) — cinco matices terrosos desaturados ── */
[data-nav-theme="herbario"] { --nav-rail:#0E1C17; --nav-header:#0A1613; --nav-accent:#6FD3B0; --nav-hairline:rgba(255,255,255,.08); }
[data-nav-theme="herbario"] [data-group="escucha"]  { --g-band:#245043; --g-edge:#86D9BB; --g-label:#9EE4CA; --g-item:#E7F4EE; --g-active-bg:rgba(134,217,187,.22); --g-hover-bg:rgba(134,217,187,.08); }
[data-nav-theme="herbario"] [data-group="analisis"] { --g-band:#1F4A52; --g-edge:#7FCBD6; --g-label:#9BDAE3; --g-item:#E4F2F4; --g-active-bg:rgba(127,203,214,.22); --g-hover-bg:rgba(127,203,214,.08); }
[data-nav-theme="herbario"] [data-group="registro"] { --g-band:#3A4A2C; --g-edge:#B7CE84; --g-label:#C7DA9B; --g-item:#EDF2E4; --g-active-bg:rgba(183,206,132,.22); --g-hover-bg:rgba(183,206,132,.08); }
[data-nav-theme="herbario"] [data-group="eventos"]  { --g-band:#59402C; --g-edge:#D8AE85; --g-label:#E4C1A0; --g-item:#F5EBE1; --g-active-bg:rgba(216,174,133,.22); --g-hover-bg:rgba(216,174,133,.08); }
[data-nav-theme="herbario"] [data-group="admin"]    { --g-band:#4A3340; --g-edge:#C79BB5; --g-label:#D7B2C7; --g-item:#F3E7EE; --g-active-bg:rgba(199,155,181,.22); --g-hover-bg:rgba(199,155,181,.08); }
/* Bug 2026-09-14 (ver nota en tinta arriba): "contacto" faltaba en este tema (el default,
   herbario) — sexto matiz terroso desaturado, gris-pizarra, distinto de los otros cinco. */
[data-nav-theme="herbario"] [data-group="contacto"] { --g-band:#33404A; --g-edge:#8FA9BD; --g-label:#A9C0D1; --g-item:#E7EEF2; --g-active-bg:rgba(143,169,189,.22); --g-hover-bg:rgba(143,169,189,.08); }

/* ── §3.4 espectro — gradiente verde→violeta, más saturado ── */
[data-nav-theme="espectro"] { --nav-rail:#05140F; --nav-header:#030D0A; --nav-accent:#6FD3B0; --nav-hairline:rgba(255,255,255,.09); }
[data-nav-theme="espectro"] [data-group="escucha"]  { --g-band:#0E624B; --g-edge:#6FE7BE; --g-label:#92F0CE; --g-item:#F2FDF8; --g-active-bg:rgba(111,231,190,.24); --g-hover-bg:rgba(111,231,190,.08); }
[data-nav-theme="espectro"] [data-group="analisis"] { --g-band:#105F66; --g-edge:#6FDCE0; --g-label:#92E6E9; --g-item:#F1FCFD; --g-active-bg:rgba(111,220,224,.24); --g-hover-bg:rgba(111,220,224,.08); }
[data-nav-theme="espectro"] [data-group="registro"] { --g-band:#12507F; --g-edge:#7FC0FF; --g-label:#A0D1FF; --g-item:#E6F2FD; --g-active-bg:rgba(127,192,255,.24); --g-hover-bg:rgba(127,192,255,.08); }
[data-nav-theme="espectro"] [data-group="eventos"]  { --g-band:#2A3E93; --g-edge:#9FB0FF; --g-label:#B6C3FF; --g-item:#ECEFFE; --g-active-bg:rgba(159,176,255,.24); --g-hover-bg:rgba(159,176,255,.08); }
[data-nav-theme="espectro"] [data-group="admin"]    { --g-band:#4A3496; --g-edge:#C0A8FF; --g-label:#CFBDFF; --g-item:#F0EBFE; --g-active-bg:rgba(192,168,255,.24); --g-hover-bg:rgba(192,168,255,.08); }
/* Bug 2026-09-14 (ver nota en tinta arriba): "contacto" faltaba en este tema — continúa el
   degradado verde→violeta un paso más, a magenta. */
[data-nav-theme="espectro"] [data-group="contacto"] { --g-band:#5C2A66; --g-edge:#FF9FE0; --g-label:#FFC2EC; --g-item:#FDEAF7; --g-active-bg:rgba(255,159,224,.24); --g-hover-bg:rgba(255,159,224,.08); }

/* ── Consumo de variables + geometría §2 (la del spec manda para los cuatro temas) ── */
.nav[data-nav-theme] {
  background: var(--nav-rail); border-right: 1px solid var(--nav-hairline);
  /* Neutrales de LEGIBILIDAD del bloque header/footer sobre riel oscuro. NO son del palette
     normativo (que gobierna riel/header/accent/hairline y las bandas/etiquetas/ítems de grupo):
     son texto claro theme-agnóstico, iguales en los cuatro temas — no interpretan ninguna paleta. */
  --nav-ink:#EAF2EE; --nav-ink-dim:rgba(234,242,238,.66); --nav-ink-faint:rgba(234,242,238,.40);
}
/* Header §1: logo + selectores + pie sobre --nav-header; marca en --nav-accent (constante). */
.nav[data-nav-theme] .nav-top { background: var(--nav-header); border-bottom: 1px solid var(--nav-hairline); }
.nav[data-nav-theme] .nav-word .a { color: var(--nav-ink); }
.nav[data-nav-theme] .nav-word .b { color: var(--nav-accent); }
.nav[data-nav-theme] .nav-mark { color: var(--nav-accent); }
.nav[data-nav-theme] .nav-toggle { background: var(--nav-header); border-color: var(--nav-hairline); color: var(--nav-ink-dim); }
.nav[data-nav-theme] .nav-toggle:hover { background: var(--nav-header); color: var(--nav-ink); border-color: var(--nav-accent); }
/* Tarjetas de proyecto/servicio: flotan sobre el riel, translúcidas, texto claro. */
.nav[data-nav-theme] .proj-card, .nav[data-nav-theme] .svc-card { background: rgba(255,255,255,.05); border-color: var(--nav-hairline); }
.nav[data-nav-theme] button.proj-card:hover, .nav[data-nav-theme] button.svc-card:hover { border-color: var(--nav-accent); }
.nav[data-nav-theme] .proj-ava, .nav[data-nav-theme] .foot-ava { background: rgba(111,211,176,.16); color: var(--nav-accent); }
.nav[data-nav-theme] .proj-name { color: var(--nav-ink); }
.nav[data-nav-theme] .proj-role, .nav[data-nav-theme] .svc-kicker, .nav[data-nav-theme] .proj-caret { color: var(--nav-ink-dim); }
.nav[data-nav-theme] .proj-code { color: var(--nav-ink-faint); }
.nav[data-nav-theme] .svc-ic { color: var(--nav-accent); }
/* Menús desplegables (proyecto/servicio) sobre el riel. */
.nav[data-nav-theme] .org-menu { background: var(--nav-header); border-color: var(--nav-hairline); }
.nav[data-nav-theme] .org-menu button { color: var(--nav-ink); }
.nav[data-nav-theme] .org-menu button:hover { background: rgba(255,255,255,.06); }
.nav[data-nav-theme] .om-code, .nav[data-nav-theme] .om-role { color: var(--nav-ink-dim); }
/* S20 ítem 9 — el menú vive sobre --nav-header (oscuro en los cuatro temas) aunque el panel esté
   en claro: su texto tiene que ser el del riel, no la tinta del modo. Antes `.org-menu .om-org`
   pintaba var(--e360-ink) (#1D3A31 en claro) sobre el riel: ~1.2:1. Vale también para el menú
   de proyecto, que comparte la regla. */
.nav[data-nav-theme] .org-menu .om-org { color: var(--nav-ink); }
.nav[data-nav-theme] .org-menu button.active { background: rgba(111,211,176,.16); }
.nav[data-nav-theme] .svc-menu-tit { color: var(--nav-ink-dim); }
/* #svcMenu: el menú está dentro de .svc-wrap[data-group], cuya regla de íconos (--g-item, la
   de la tarjeta) es más específica que una de clase. */
.nav[data-nav-theme] #svcMenu .svc-opt .svc-ic { color: var(--nav-ink-dim); }
.nav[data-nav-theme] #svcMenu .svc-opt.active .svc-ic,
.nav[data-nav-theme] .svc-actual { color: var(--nav-accent); }
.nav[data-nav-theme] .org-menu .svc-opt.active::before { background: var(--nav-accent); }
.nav[data-nav-theme] .svc-nuevas { background: var(--nav-accent); color: var(--nav-header); }
.nav[data-nav-theme] .svc-card-nuevas { background: var(--nav-accent); }
.nav[data-nav-theme] .svc-opt-blocked .om-org { color: var(--nav-ink-dim); }
/* «Contratar»: `.nav[data-nav-theme] .org-menu button` le ganaba al color propio del botón y en
   modo oscuro quedaba texto claro sobre el acento claro (1.94:1). Mismo par que el indicador. */
.nav[data-nav-theme] .org-menu .svc-buy { color: var(--nav-header); background: var(--nav-accent); }

/* Riel de navegación §2: padding 12px 10px 14px, gap 6px entre bandas. */
.nav[data-nav-theme] .nav-scroll { display: flex; flex-direction: column; gap: 6px; padding: 12px 10px 14px; }
/* Banda de grupo §2. */
.nav[data-nav-theme] .nav-group {
  display: flex; flex-direction: column; gap: 2px; padding: 4px 5px 5px;
  border-radius: 4px 12px 12px 4px; border-left: 4px solid var(--g-edge); background: var(--g-band);
}
/* F-NAV-SCOPE: el selector de servicio hereda --g-band/--g-edge de "escucha" (data-group en
   index.html) — misma banda de color que el grupo Escucha/Análisis de abajo, para que se lea
   como "esto gobierna esas dos secciones" sin tener que fusionar contenedores DOM distintos. */
.nav[data-nav-theme] .svc-wrap[data-group] {
  margin: 0 0 6px; padding: 8px 5px 6px;
  border-radius: 12px 12px 4px 4px; border-left: 4px solid var(--g-edge); background: var(--g-band);
}
.nav[data-nav-theme] .svc-wrap[data-group] .svc-kicker { color: var(--g-label); }
.nav[data-nav-theme] .svc-wrap[data-group] .proj-name,
.nav[data-nav-theme] .svc-wrap[data-group] .svc-ic { color: var(--g-item); }
.nav[data-nav-theme] .svc-wrap[data-group] .svc-card { background: transparent; border-color: transparent; }
/* S20 ítem 9: sin la opacidad .85 que tenía (4.39:1 en «sólido», bajo AA); la leyenda queda en
   --g-label pleno, como la etiqueta «Servicio» de arriba. El ▾ de la tarjeta, ídem (3.76:1 con
   --nav-ink-dim sobre la banda de «espectro»). */
.nav[data-nav-theme] .svc-wrap[data-group] .svc-scope { color: var(--g-label); }
.nav[data-nav-theme] .svc-wrap[data-group] .proj-caret { color: var(--g-label); }
.nav[data-nav-theme].collapsed .svc-wrap[data-group] { border-radius: 12px; padding: 4px; }
/* Etiqueta de grupo §2: 9.5/700, .12em, mayúsculas, punto de 5px en --g-edge. */
.nav[data-nav-theme] .nav-section {
  display: flex; align-items: center; gap: 7px; padding: 5px 8px 4px; height: auto; opacity: 1;
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g-label);
}
.nav[data-nav-theme] .nav-dot { display: inline-block; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 999px; background: var(--g-edge); }
/* Ítem §2: 13.5/500, padding 9x10, radius 9, icono gap 11; activo = blanco + filo 3px en --g-edge. */
.nav[data-nav-theme] .nav-item {
  gap: 11px; padding: 9px 10px; border-radius: 9px; margin-bottom: 0;
  font-size: 13.5px; font-weight: 500; color: var(--g-item);
  border-left: 3px solid transparent; background: transparent;
}
.nav[data-nav-theme] .nav-item .ic { color: var(--g-item); }
.nav[data-nav-theme] .nav-item:hover { background: var(--g-hover-bg); }
.nav[data-nav-theme] .nav-item:hover .ic { color: var(--g-item); }
.nav[data-nav-theme] .nav-item.active { background: var(--g-active-bg); color: #FFFFFF; font-weight: 600; border-left-color: var(--g-active-edge, var(--g-edge)); }
.nav[data-nav-theme] .nav-item.active .ic { color: #FFFFFF; }
.nav[data-nav-theme] .nav-item.active::before { display: none; }   /* el spec usa border-left, no el ::before del riel viejo */
.nav[data-nav-theme] .nav-item:focus-visible { outline: 2px solid var(--g-edge); outline-offset: 2px; }
.nav[data-nav-theme] .nav-item .count { background: rgba(255,255,255,.12); color: var(--g-item); }
.nav[data-nav-theme] .nav-item .crit-dot { border-color: var(--nav-header); }

/* Footer §1: pie de usuario sobre --nav-header; divisor --nav-hairline; avatar en accent. */
.nav[data-nav-theme] .nav-foot { border-top: 1px solid var(--nav-hairline); }
.nav[data-nav-theme] .foot-btn, .nav[data-nav-theme] .foot-user { color: var(--nav-ink); }
.nav[data-nav-theme] .foot-btn .ic, .nav[data-nav-theme] .foot-btn .lbl { color: var(--nav-ink-dim); }
.nav[data-nav-theme] .foot-btn:hover, .nav[data-nav-theme] .foot-user:hover { background: rgba(255,255,255,.06); }
.nav[data-nav-theme] .foot-meta .n { color: var(--nav-ink); }
.nav[data-nav-theme] .foot-meta .e { color: var(--nav-ink-dim); }
.nav[data-nav-theme] .foot-logout { color: var(--nav-ink-dim); }

/* Regla 6 — menú colapsado: la banda se reduce a una píldora, la etiqueta se oculta; --g-band y
   --g-edge siguen siendo la única pista de agrupación (no se eliminan). */
.nav[data-nav-theme].collapsed .nav-scroll { padding: 12px 6px 14px; }
.nav[data-nav-theme].collapsed .nav-group { padding: 4px; }
.nav[data-nav-theme].collapsed .nav-section { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; }

/* Regla 5 — fallback visible en desarrollo: un grupo cuyo slug no tiene bloque de tema definido
   no hereda --g-band (queda sin banda). Con el flag html[data-nav-dev] se delata en vez de fallar
   en silencio. (Activar en consola: document.documentElement.dataset.navDev = "1".) */
html[data-nav-dev] .nav[data-nav-theme] .nav-group:not([data-group="escucha"]):not([data-group="analisis"]):not([data-group="registro"]):not([data-group="eventos"]):not([data-group="admin"]) {
  outline: 1px dashed red;
}

/* Muestra del selector de tema (paneAspecto): reutiliza las variables del tema — cero hex en JS. */
.navtheme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.navtheme-opt { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 10px;
  border: 1px solid var(--e360-rule); background: var(--e360-paper-2); cursor: pointer; text-align: left; }
.navtheme-opt:hover { border-color: var(--e360-mid); }
.navtheme-opt.on { border-color: var(--e360-deep); box-shadow: 0 0 0 2px var(--e360-tint); }
.navtheme-prev { flex: 0 0 auto; display: inline-flex; gap: 2px; align-items: center;
  padding: 6px 7px; border-radius: 7px; background: var(--nav-rail); }
.navtheme-prev [data-group] { width: 5px; height: 16px; border-radius: 3px; background: var(--g-edge); }
/* solido: --g-edge es transparente → la muestra usa el accent para que el chip no salga vacío. */
.navtheme-prev[data-nav-theme="solido"] [data-group] { background: var(--nav-accent); }
.navtheme-name { font-size: 12.5px; font-weight: 600; color: var(--e360-ink); }

/* ============ VISTA SENCILLA — superficie standalone del modo por defecto ============ */
/* (SPEC VISTA_SENCILLA, cierre F-PANEL-1 — reemplaza a la CAPA ESENCIAL.) Handoff
   design_handoff_vista_sencilla/ §5, traducido a los tokens reales --e360-* (D-VS0).
   Cero hex nuevos: los tres derivados del §8 son color-mix sobre las vars, para que se
   recalculen solos con el Ambiente y el modo oscuro. */
:root {
  --e360-vs-tabstrip: color-mix(in srgb, var(--e360-sand) 50%, var(--e360-paper));
  --e360-vs-crit-border: color-mix(in srgb, var(--e360-crit) 25%, var(--e360-paper-2));
  --e360-vs-kicker-border: color-mix(in srgb, var(--e360-mid) 35%, var(--e360-tint));
}
.vs-wrap {
  display: grid; grid-template-columns: 212px 1fr; height: 100vh; overflow: hidden;
  background: var(--e360-sand); color: var(--e360-ink);
}
.vs-wrap.hidden { display: none; }
/* — nav sencillo (§5.1) — */
.vs-nav { background: var(--e360-paper); border-right: 1px solid var(--e360-rule); display: flex; flex-direction: column; min-height: 0; }
.vs-nav-top { display: flex; align-items: center; gap: 10px; padding: 16px 14px; height: 60px; flex: 0 0 60px; border-bottom: 1px solid var(--e360-rule-2); }
.vs-nav-top .nav-mark { width: 30px; height: 30px; flex: none; }
.vs-nav-top .nav-word { display: flex; align-items: baseline; gap: 0; }
.vs-nav-top .nav-word .a { font-size: 18px; font-weight: 600; letter-spacing: -.5px; color: var(--e360-ink); }
.vs-nav-top .nav-word .b { font-size: 18px; font-weight: 400; letter-spacing: -.5px; color: var(--e360-mid); }
.vs-nav-scroll { flex: 1; padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.vs-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px;
  color: var(--e360-ink-2); font-size: 14px; font-weight: 500; position: relative;
  text-decoration: none; cursor: pointer;
}
.vs-item .ic { width: 20px; display: flex; justify-content: center; color: var(--e360-ink-3); }
.vs-item:hover { background: var(--e360-tint-2); }
.vs-item.active { background: var(--e360-tint); color: var(--e360-deep); font-weight: 600; }
.vs-item.active .ic { color: var(--e360-deep); }
.vs-item.active::before { content: ''; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; background: var(--e360-deep); border-radius: 0 3px 3px 0; }
.vs-item .count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--e360-ink-3); background: var(--e360-sand); padding: 1px 7px; border-radius: var(--e360-radius-pill); }
.vs-item .count.crit { color: var(--e360-crit); background: var(--e360-crit-bg); }
.vs-hint {
  margin-top: 14px; padding: 12px; border-radius: 10px; background: var(--e360-tint-2);
  border: 1px dashed var(--e360-vs-kicker-border); font-size: 12px; line-height: 1.5; color: var(--e360-ink-2);
}
.vs-hint b { color: var(--e360-deep); }
.vs-nav-foot { border-top: 1px solid var(--e360-rule-2); padding: 10px; }
.vs-nav-foot .foot-user { max-width: 100%; }
/* — centro: topbar (§5.2) + pestañas (§5.3) + contenido (§5.4) — */
.vs-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.vs-topbar { height: 60px; flex: 0 0 60px; display: flex; align-items: center; gap: 14px; padding: 0 24px; background: var(--e360-paper); border-bottom: 1px solid var(--e360-rule); }
.vs-crumb { font-size: 13px; color: var(--e360-ink-3); display: flex; gap: 9px; align-items: center; min-width: 0; }
.vs-crumb b { color: var(--e360-ink); font-weight: 600; }
.vs-crumb .sep { color: var(--e360-ink-4); }
/* ViewToggle — vive IDÉNTICO en ambas barras (D-VS3): aquí y en la .topbar del shell. */
.view-toggle { display: flex; border: 1px solid var(--e360-rule); border-radius: var(--e360-radius-pill); overflow: hidden; background: var(--e360-paper-2); flex: none; }
.view-toggle button { display: flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 12.5px; font-weight: 500; color: var(--e360-ink-3); }
.view-toggle button:hover { color: var(--e360-ink); }
.view-toggle button.on { background: var(--e360-deep); color: var(--e360-on-accent); font-weight: 600; }
/* El ícono (vt-ic) viaja en el DOM (renderViewToggle, views.js) pero ya no se muestra: hasta S23
   el topbar angosto era solo ícono y no se entendía (D-DEN-23); ahora ahí va la etiqueta corta. */
.view-toggle .vt-ic { display: none; flex: none; }
.view-toggle .vt-corta { display: none; }   /* D-DEN-23: solo en angosto, ver @media */
/* Vista Sencilla deshabilitada temporalmente (renderViewToggle, views.js) — pedido directo del
   usuario: "que no se pueda cambiar a simple, no borres nada del contenido, solo desactívalo".
   El botón se queda en el DOM, solo se ve inerte. */
.view-toggle button:disabled { opacity: .45; cursor: not-allowed; }
.view-toggle button:disabled:hover { color: var(--e360-ink-3); }
.vs-tabs { flex: none; display: flex; gap: 8px; padding: 14px 34px 0; border-bottom: 1px solid var(--e360-rule); background: var(--e360-vs-tabstrip); }
.vs-tabs:empty { display: none; }   /* §5.3: con UN solo servicio la fila se oculta completa */
.vs-tab {
  display: flex; align-items: center; gap: 9px; padding: 10px 18px 12px;
  border: 1px solid transparent; border-radius: 10px 10px 0 0;
  font-size: 13.5px; font-weight: 500; color: var(--e360-ink-2);
}
.vs-tab:hover { background: var(--e360-tint-2); }
.vs-tab.active {
  background: var(--e360-sand); border-color: var(--e360-rule); border-bottom-color: var(--e360-sand);
  margin-bottom: -1px; font-weight: 600; color: var(--e360-deep);
}
.vs-tab.active:hover { background: var(--e360-sand); }
.vs-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vs-count { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: var(--e360-radius-pill); color: var(--e360-ink-3); background: var(--e360-rule-2); }
.vs-count.crit { color: var(--e360-crit); background: var(--e360-crit-bg); }
.vs-tabs-note { align-self: center; font-size: 11.5px; color: var(--e360-ink-4); padding-bottom: 6px; margin-left: auto; }
.vs-content { flex: 1; overflow-y: auto; padding: 26px 34px; display: flex; flex-direction: column; gap: 20px; }
.vs-headline { font-size: 23px; font-weight: 600; letter-spacing: -.4px; line-height: 1.25; color: var(--e360-ink); max-width: 640px; text-wrap: pretty; }
.vs-headline .risk { color: var(--e360-crit); }
.vs-sub { font-size: 13.5px; color: var(--e360-ink-3); margin-top: 6px; }
.vs-body-text { font-size: 13.5px; color: var(--e360-ink-2); max-width: 640px; margin-top: 8px; white-space: pre-wrap; line-height: 1.55; }
.vs-hitos { margin-top: 8px; max-width: 640px; }
.vs-hitos summary { cursor: pointer; font-size: 12.5px; color: var(--e360-ink-3); }
.vs-hitos ul { margin: 8px 0 0 18px; font-size: 12.5px; color: var(--e360-ink-2); }
.vs-kpis, .vs-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e360-gap); }
.vs-kpi { background: var(--e360-paper-2); border: 1px solid var(--e360-rule); border-radius: var(--e360-radius-card); padding: 20px; display: flex; align-items: center; gap: 16px; }
.vs-kpi.crit { border-color: var(--e360-vs-crit-border); }
.vs-donut { width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.vs-donut .in { width: 50px; height: 50px; border-radius: 50%; background: var(--e360-paper-2); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; color: var(--e360-ink); }
.vs-badge-num { width: 66px; height: 66px; border-radius: 50%; background: var(--e360-crit-bg); display: flex; align-items: center; justify-content: center; flex: none; font-size: 24px; font-weight: 600; color: var(--e360-crit); }
.vs-badge-num.neutral { background: var(--e360-tint); color: var(--e360-deep); }
.vs-kpi-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--e360-ink-3); font-weight: 600; }
.vs-kpi-delta { font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.vs-kpi-delta.good { color: var(--e360-good); }
.vs-kpi-delta.crit { color: var(--e360-crit); }
.vs-kpi-plain { font-size: 12.5px; color: var(--e360-ink-3); margin-top: 3px; }
.vs-sect-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--e360-ink-3); font-weight: 600; margin-bottom: 12px; }
.vs-tile {
  background: var(--e360-paper); border: 1px solid var(--e360-rule); border-radius: var(--e360-radius-card);
  padding: 16px 20px; display: flex; align-items: center; gap: 14px; cursor: pointer;
  text-decoration: none; color: inherit;
  transition: border-color var(--e360-dur-fast), background var(--e360-dur-fast);
}
.vs-tile:hover { border-color: var(--e360-mid); background: var(--e360-tint-2); }
.vs-tile.crit:hover { border-color: var(--e360-crit); background: var(--e360-crit-bg); }
.vs-tile-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--e360-tint); color: var(--e360-deep); display: flex; align-items: center; justify-content: center; flex: none; position: relative; }
.vs-tile.crit .vs-tile-ic { background: var(--e360-crit-bg); color: var(--e360-crit); }
.vs-tile-ic .dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--e360-crit); }
.vs-tile .t { font-size: 14px; font-weight: 600; color: var(--e360-ink); }
.vs-tile .d { font-size: 12.5px; color: var(--e360-ink-3); }
.vs-tile .chev { margin-left: auto; color: var(--e360-ink-4); font-size: 16px; }
.vs-footnote { margin-top: auto; font-size: 12.5px; color: var(--e360-ink-3); background: var(--e360-paper); border: 1px solid var(--e360-rule); border-radius: 10px; padding: 12px 18px; line-height: 1.5; }
.vs-footnote b { color: var(--e360-ink); }
@media (max-width: 900px) {
  /* D-UX-5 (UX-04): a 380 px la vista sencilla medía 699 px y arrastraba toda la app fuera de
     la pantalla. El bloque responsive ya existía y aun así el síntoma seguía vivo, porque
     `1fr` es `minmax(auto, 1fr)`: el mínimo AUTOMÁTICO de la pista es el ancho de contenido de
     su ítem (.vs-nav, un flex en fila de ~699 px), así que la pista quedaba anclada a ese
     mínimo. `minmax(0, 1fr)` deja que la pista baje del ancho de su contenido, y el
     `min-width: 0` de los contenedores flex es lo que habilita de verdad el `overflow-x: auto`
     que .vs-nav-scroll ya declaraba. Con `html, body { overflow-x: hidden }` el desbordamiento
     ni siquiera se veía como scroll: había que adivinar que se podía arrastrar. */
  /* align-content: start — con min-height:100vh y filas automáticas, la rejilla REPARTÍA el
     alto sobrante entre sus filas y el menú crecía hasta 350 px en una pantalla de 380: casi
     un cuarto de la pantalla de aire alrededor de la marca. Las filas miden lo que miden y el
     sobrante se queda abajo. */
  .vs-wrap { grid-template-columns: minmax(0, 1fr); align-content: start; overflow: auto; height: auto; min-height: 100vh; }
  .vs-nav { flex-direction: row; align-items: center; border-right: none; border-bottom: 1px solid var(--e360-rule); min-width: 0; }
  .vs-nav-top { border-bottom: none; }
  .vs-nav-scroll { flex-direction: row; overflow-x: auto; padding: 8px 10px; min-width: 0; }
  .vs-center, .vs-content, .vs-tabs { min-width: 0; }
  .vs-hint, .vs-nav-foot { display: none; }
  .vs-kpis, .vs-tiles { grid-template-columns: 1fr; }
  .vs-tabs { padding: 14px 14px 0; overflow-x: auto; }
  .vs-tabs-note { display: none; }
  /* D-UX-5: en móvil scrollea el contenedor entero (.vs-wrap ya es height:auto +
     overflow:auto), no una caja anidada. Con el scroller interno, el menú y las pestañas se
     quedaban clavados ocupando un tercio de una pantalla de 380 px y solo se movía la franja
     de abajo; así se van con el scroll y el contenido recupera la pantalla. */
  .vs-content { padding: 20px 14px; overflow-y: visible; }

  /* Mismo bug/tratamiento que .topbar del shell (ver §RESPONSIVE arriba) — .vs-topbar
     comparte el conmutador Vista sencilla/completa y también se salía de la pantalla. */
  .vs-topbar { padding: 0 10px; gap: 6px; }
  .vs-crumb { flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .vs-topbar .view-toggle button { padding: 6px 9px; font-size: 11.5px; }
  .vs-topbar .view-toggle .vt-lbl { display: none; }       /* D-DEN-23: la corta, como el shell */
  .vs-topbar .view-toggle .vt-corta { display: inline; }
  .vs-topbar .icon-btn { width: 32px; height: 32px; flex: none; }
  .vs-topbar .icon-btn svg { width: 17px; height: 17px; }
}
/* D-UX-5 (UX-04), segunda mitad: que la pista quepa no basta si el menú y las pestañas siguen
   siendo tiras que se arrastran de lado. Ese arrastre lateral DENTRO de un contenedor es
   justamente el gesto que el hallazgo describe como indescubrible: la parte de la interfaz que
   se sale queda inalcanzable hasta que el usuario lo adivina. Por debajo de 560 px las dos
   tiras pasan a ENVOLVER: cuatro entradas de menú y cuatro pestañas caben en dos renglones, se
   ven todas a la vez y no hay nada que descubrir. Por encima de 560 px el scroll horizontal
   sigue siendo el tratamiento correcto (ahí sí caben en una tira). */
@media (max-width: 560px) {
  .vs-nav { flex-wrap: wrap; }
  .vs-nav-scroll { flex-wrap: wrap; overflow-x: visible; row-gap: 4px; flex-basis: 100%; }
  .vs-tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 8px; padding-bottom: 10px; }
  .vs-item { flex: 0 1 auto; min-width: 0; }
  .vs-tab { flex: 0 1 auto; min-width: 0; }
}
@media (max-width: 420px) {
  #vsHelpBtn { display: none; }
}
.ess-code-wrap { margin-top: 16px; }
.ess-code {
  margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px; letter-spacing: 0.08em; color: var(--e360-deep); font-weight: 700;
}
/* Organización — misma pastilla .ess-code, ahora en fila con el botón "Copiar". */
.org-code-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.org-code-row .ess-code { margin-top: 0; }
.org-code-msg { font-size: 13px; color: var(--e360-good); font-weight: 600; }
/* "Mi organización" — link + WhatsApp a la izquierda, QR a la derecha (apila en angosto). */
.org-portal-card { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.org-portal-info { flex: 1 1 320px; display: flex; flex-direction: column; gap: 12px; }
.org-portal-info .org-code-row .ess-code { font-size: 16px; }
.org-portal-link { text-decoration: none; }
.org-portal-link:hover, .org-portal-link:focus-visible { text-decoration: underline; }
.org-portal-qr { flex: 0 0 auto; width: 160px; height: 160px; border-radius: 8px; background: #fff; padding: 8px; }

/* ============ "Mi información" (140, mockup 2026-09-04) ============ */
/* Nombre + número de WhatsApp + código de acceso, una sola tarjeta de referencia rápida — antes
   tres bloques sueltos. Grid 2 columnas (nombre ocupa las dos); colapsa a 1 en angosto junto con
   .bit-cols (mismo breakpoint, 1024px, ver @media más abajo). */
.mi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mi-row {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px;
  background: var(--e360-sand); border: 0.5px solid var(--e360-rule); border-radius: 12px; padding: 14px 16px;
}
/* Bug reportado: en celular el botón "Copiar…" (ancho fijo, no encoge — nombre/número/código
   pueden ser largos) se salía del borde de la tarjeta hacia la derecha en vez de acomodarse.
   flex-wrap deja que baje a su propia línea cuando no cabe junto al valor — en desktop, donde
   siempre cabe, esto no cambia nada visualmente. */
.mi-row > .copy-btn, .mi-row > .org-code-msg { margin-left: auto; }
.mi-row-wide { grid-column: 1 / -1; align-items: center; }
.mi-ic {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--e360-tint); color: var(--e360-deep);
}
.mi-body { min-width: 0; flex: 1; }
.mi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--e360-ink-4); font-weight: 600; }
.mi-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 600;
  color: var(--e360-ink); margin-top: 3px; letter-spacing: .02em; word-break: break-word;
}
.mi-hint { font-size: 12px; color: var(--e360-ink-3); margin-top: 5px; line-height: 1.5; }
.mi-name-field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.mi-name-field input {
  flex: 1; min-width: 0; border: 0.5px solid var(--e360-rule); border-radius: 8px; padding: 8px 11px;
  font-size: 14.5px; font-weight: 600; color: var(--e360-ink); background: var(--e360-paper-2); font-family: inherit;
}
.mi-name-field input:focus { outline: none; border-color: var(--e360-mid); box-shadow: 0 0 0 3px var(--e360-tint); }
.mi-save-btn {
  flex: none; border: none; background: var(--e360-deep); color: var(--e360-on-accent); border-radius: 8px;
  padding: 9px 15px; font-size: 13px; font-weight: 600; cursor: pointer; transition: filter var(--e360-dur-fast);
}
.mi-save-btn:hover { filter: brightness(1.07); }
.copy-btn {
  flex: none; border: 0.5px solid var(--e360-rule); background: var(--e360-paper-2); border-radius: 8px;
  padding: 6px 10px; font-size: 12px; color: var(--e360-ink-3); display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; transition: border-color var(--e360-dur-fast), color var(--e360-dur-fast);
}
.copy-btn:hover { border-color: var(--e360-mid); color: var(--e360-ink); }
.mi-cta-row { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.mi-btn {
  display: inline-flex; align-items: center; gap: 9px; border-radius: 11px; padding: 11px 18px;
  font-size: 14px; font-weight: 600; cursor: pointer; border: 0.5px solid transparent; text-decoration: none;
}
.mi-btn-wa { background: #1f9e5c; color: #fff; }
.mi-btn-wa:hover { background: #188249; }
.mi-btn-portal { background: var(--e360-paper-2); color: var(--e360-deep); border-color: var(--e360-rule); }
.mi-btn-portal:hover { background: var(--e360-tint-2); }

/* ============ "¿Cómo ingresar al bot?" — tiles + acordeón (140, mockup 2026-09-04) ============ */
/* Antes: las dos tarjetas (WhatsApp / portal) siempre expandidas una debajo de otra. Ahora: dos
   tiles clicables, UN panel abierto a la vez (estado en vm.reachTab, host lo maneja). */
.reach-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.reach-tile {
  border: 1.5px solid var(--e360-rule); border-radius: 14px; padding: 16px 18px; text-align: left;
  background: var(--e360-paper-2); cursor: pointer; display: flex; align-items: center; gap: 13px;
  transition: border-color var(--e360-dur-fast), background var(--e360-dur-fast);
}
.reach-tile:hover { border-color: var(--e360-mid); }
.reach-tile.active { border-color: var(--e360-mid); background: var(--e360-tint-2); }
.reach-tile-ic {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--e360-tint-2); color: var(--e360-deep);
}
.reach-tile-t { font-weight: 700; font-size: 14.5px; color: var(--e360-ink); }
.reach-tile-d { font-size: 12px; color: var(--e360-ink-4); margin-top: 2px; }
.reach-tile .reach-chev-svg { margin-left: auto; color: var(--e360-ink-4); flex: none; transition: transform var(--e360-dur-fast); }
.reach-tile.active .reach-chev-svg { transform: rotate(180deg); color: var(--e360-mid); }
.reach-panel {
  margin-top: 0; border: 0.5px solid var(--e360-rule); border-radius: 14px; overflow: hidden;
  max-height: 0; opacity: 0; transition: max-height .25s ease, opacity .2s ease, margin-top .25s ease;
}
.reach-panel.open { max-height: 900px; opacity: 1; margin-top: 14px; }
.reach-panel-inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; }
.reach-panel-steps { padding: 20px 22px; }
.reach-panel-qr {
  background: var(--e360-sand); border-left: 0.5px solid var(--e360-rule); padding: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.reach-panel-link { margin-top: 12px; }
.reach-panel-cta { margin-top: 14px; }
@media (max-width: 1024px) {
  .mi-grid, .reach-tiles { grid-template-columns: 1fr; }
  .reach-panel-inner { grid-template-columns: 1fr; }
  .reach-panel-qr { border-left: none; border-top: 0.5px solid var(--e360-rule); }
}

/* Sub-tabs dentro de una vista (p. ej. Organización → General/Roster) — mismo estilo que
   .subtabs/.subtab de admin.css (duplicado aquí a propósito: index.html no carga admin.css). */
.subtabs { display: flex; gap: 4px; background: var(--e360-sand); border: 0.5px solid var(--e360-rule); border-radius: 12px; padding: 4px; margin: 16px 0 20px; flex-wrap: wrap; }
.subtab { border: none; background: none; color: var(--e360-ink-3); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 9px; display: inline-flex; align-items: center; gap: 7px; transition: background .15s, color .15s; cursor: pointer; }
.subtab.on { background: var(--e360-paper-2); color: var(--e360-ink); box-shadow: 0 1px 2px rgba(20,32,26,.08); }

/* ── Apapacho (SPEC Modo Apapacho §6): panel persistente colapsable, transversal ─────────────
   Vive en #apapacho (entre #loadBanner y #outlet). Acento ámbar SOLO en el badge (--e360-warn);
   el resto habla el idioma del sistema (sage-teal, Hanken Grotesk, radios de tarjeta). */
#apapacho { margin: 0 0 14px; }
#apapacho:empty { margin: 0; }

.ap-bar {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  background: var(--e360-tint); color: var(--e360-deep);
  border: 0.5px solid var(--e360-rule); font-size: 12.5px; font-weight: 600;
}
.ap-bar:hover { background: var(--e360-tint-2); }
.ap-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--e360-warn-bg); color: var(--e360-warn);
  font-size: 11px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center;
}
.ap-panel {
  background: var(--e360-paper); border: 0.5px solid var(--e360-card-border);
  border-radius: var(--e360-radius-card); padding: 12px 14px;
}
.ap-head { display: flex; align-items: center; gap: 8px; }
.ap-head .ap-ic, .ap-bar .ap-ic { color: var(--e360-deep); display: inline-flex; }
.ap-title { font-size: 13px; font-weight: 700; color: var(--e360-ink); }
.ap-spacer { flex: 1; }
.ap-collapse { font-weight: 700; }
.ap-card {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--e360-radius);
  background: var(--e360-paper-2); border: 0.5px solid var(--e360-rule-2);
}
.ap-msg { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: var(--e360-ink-2); }
.ap-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-btn {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  border-radius: 8px; padding: 5px 10px; border: 0.5px solid var(--e360-rule);
  background: var(--e360-paper); color: var(--e360-ink-2);
}
.ap-btn-main { background: var(--e360-deep); border-color: var(--e360-deep); color: #fff; }
.ap-btn-main:hover { background: var(--e360-mid); border-color: var(--e360-mid); }
.ap-btn[disabled] { opacity: 0.6; cursor: default; }
.ap-quiet { background: transparent; border-color: transparent; color: var(--e360-ink-3); }
.ap-quiet:hover { color: var(--e360-deep); background: var(--e360-tint-2); }
.ap-empty { margin: 10px 0 2px; font-size: 12.5px; color: var(--e360-ink-3); }

/* Modal de ticket + "Mis solicitudes" (reusa .modal-scrim/.modal del sistema) */
.ap-modal-ctx {
  margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px;
  background: var(--e360-tint-2); color: var(--e360-ink-2);
  border: 0.5px solid var(--e360-rule-2);
}
.ap-field { display: block; margin-bottom: 10px; }
.ap-field span { display: block; font-size: 12px; font-weight: 600; color: var(--e360-ink-2); margin-bottom: 4px; }
.ap-field input, .ap-field textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
  color: var(--e360-ink); background: var(--e360-paper-2);
  border: 0.5px solid var(--e360-rule); border-radius: 8px; padding: 8px 10px; resize: vertical;
}
.ap-field input:focus, .ap-field textarea:focus { outline: 2px solid var(--e360-mid); outline-offset: 0; }
.ap-lfpdppp {
  margin: 4px 0 0; font-size: 11px; line-height: 1.45; color: var(--e360-ink-3);
  border-top: 0.5px dashed var(--e360-rule); padding-top: 8px;
}
.ap-ticket-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 2px;
  border-bottom: 0.5px solid var(--e360-rule-2);
}
.ap-ticket-row:last-child { border-bottom: 0; }
.ap-ticket-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-ticket-asunto { font-size: 13px; font-weight: 600; color: var(--e360-ink); }
.ap-ticket-fecha { font-size: 11.5px; color: var(--e360-ink-4); }
.ap-estado {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.ap-estado-recibido { background: var(--e360-warn-bg); color: var(--e360-warn); }
.ap-estado-en_curso { background: var(--e360-tint); color: var(--e360-deep); }
.ap-estado-resuelto { background: var(--e360-good-bg); color: var(--e360-good); }

/* ============ RECORRIDO GUIADO (tours.js, driver.js vendorizado en vendor/) ============
   driver.js trae su propio look (tarjeta blanca, texto negro, botones genéricos, un fade plano) —
   este bloque lo retemea sobre los tokens e360 (mismo :root de arriba) y le agrega una entrada
   más viva (rebote suave + halo pulsante sobre lo señalado) en vez del fade de la librería.
   `<link>` de driver.css va ANTES que dashboard.css en el <head> (index.html) — la regla de
   animación de la librería (`.driver-fade .driver-popover`) empata en especificidad con la de
   abajo, así que quien cargue AL FINAL gana el empate. */
.driver-popover.e360-tour-popover {
  background-color: var(--e360-paper-2);
  color: var(--e360-ink);
  font-family: var(--e360-font);
  border: 0.5px solid var(--e360-card-border);
  border-radius: var(--e360-radius-card);
  box-shadow: 0 16px 40px rgba(15, 40, 32, .22);
  padding: 20px 22px;
  min-width: 280px;
  max-width: 340px;
}
/* Entrada propia: rebote con un poco de "overshoot" (pasa de 1 y regresa) en vez del fade plano
   de driver.css. `!important`: driver.js arma la tarjeta de CERO en cada paso (crea un nodo
   nuevo — ver S()/ee() en el bundle), así que esto SIEMPRE debe re-disparar; iba con !important
   desde el principio porque un empate de especificidad es demasiado frágil para depender del
   orden de <link> si algo más lo vuelve a tocar. Fuerte a propósito (18px, casi 500ms, overshoot
   perceptible): la primera versión (6px/.96/320ms) resultó demasiado sutil — feedback directo. */
.driver-popover.e360-tour-popover {
  animation: e360TourPopIn .46s cubic-bezier(.34, 1.56, .64, 1) both !important;
}
@keyframes e360TourPopIn {
  0%   { opacity: 0; transform: translateY(18px) scale(.9); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.015); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Pedido directo del usuario: que el tour "dirija la mirada de un lado a otro" en vez de solo
   aparecer. tours.js (onHighlightStarted) compara la posición X del elemento señalado contra la
   del anterior y marca <body class="tour-dir-right|tour-dir-left"> ANTES de que este popover se
   cree — driver.js arma un nodo nuevo por paso, así que la clase ya está puesta a tiempo. Sin
   clase (primer paso del tour, o un paso sin ancla — centrado, sin posición real que comparar) →
   cae al pop-in vertical de siempre, arriba. Misma especificidad de selector en las tres reglas
   (body.tour-dir-* + .driver-popover.e360-tour-popover) a propósito: así el orden en el archivo,
   no un empate de especificidad, decide — y la excepción de prefers-reduced-motion (más abajo)
   siempre queda última y gana. */
body.tour-dir-right .driver-popover.e360-tour-popover {
  animation: e360TourPopInRight .46s cubic-bezier(.34, 1.56, .64, 1) both !important;
}
body.tour-dir-left .driver-popover.e360-tour-popover {
  animation: e360TourPopInLeft .46s cubic-bezier(.34, 1.56, .64, 1) both !important;
}
@keyframes e360TourPopInRight {
  0%   { opacity: 0; transform: translate(26px, 18px) scale(.9); }
  60%  { opacity: 1; transform: translate(-4px, -3px) scale(1.015); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes e360TourPopInLeft {
  0%   { opacity: 0; transform: translate(-26px, 18px) scale(.9); }
  60%  { opacity: 1; transform: translate(4px, -3px) scale(1.015); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
/* Halo pulsante sobre el elemento señalado — la vista "adivina" hacia dónde mirar sin que el
   usuario tenga que buscar el recuadro entre el resto de la pantalla oscurecida. Más grande y
   más notorio que la v1 (8px de spread en vez de 6, más contraste). */
.driver-active-element {
  animation: e360TourGlow 1.6s ease-in-out infinite !important;
  border-radius: 8px;
}
@keyframes e360TourGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 158, 117, .45); }
  50%      { box-shadow: 0 0 0 8px rgba(29, 158, 117, 0); }
}
/* La flechita que conecta la tarjeta con lo señalado — un latido chico, discreto, para que el
   ojo la note incluso de reojo. */
.e360-tour-popover .driver-popover-arrow {
  animation: e360TourArrowPulse 1.6s ease-in-out infinite !important;
}
@keyframes e360TourArrowPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
.driver-popover.e360-tour-popover .driver-popover-title {
  font-size: 16px; font-weight: 600; color: var(--e360-ink); letter-spacing: -.2px;
  display: flex; align-items: center; gap: 8px;
}
.tour-step-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--e360-tint); color: var(--e360-deep);
}
.tour-step-icon svg { width: 16px; height: 16px; }
.driver-popover.e360-tour-popover .driver-popover-description {
  margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--e360-ink-2);
}
/* 140 (pedido directo del usuario, 2026-09-06, PDF de recomendaciones) — explicaciones que
   describen varios pasos/casos DENTRO de un solo panel del recorrido (p. ej. "Cómo llegar al
   bot": WhatsApp vs. portal, cada uno su propia secuencia) se leían como un párrafo corrido.
   driver.js pinta `description` con innerHTML (confirmado en el vendor), así que estos pasos
   ahora mandan HTML con <ul>/<li> en vez de texto plano — mismas reglas aquí, aplican dentro
   de CUALQUIER popover del recorrido sin tocar cada TourDef aparte. */
.driver-popover.e360-tour-popover .driver-popover-description ul {
  margin: 6px 0 0; padding-left: 18px;
}
.driver-popover.e360-tour-popover .driver-popover-description li { margin-bottom: 4px; }
.driver-popover.e360-tour-popover .driver-popover-description li:last-child { margin-bottom: 0; }
.driver-popover.e360-tour-popover .driver-popover-description .tour-desc-group { margin-top: 10px; }
.driver-popover.e360-tour-popover .driver-popover-description .tour-desc-group:first-child { margin-top: 0; }
.driver-popover.e360-tour-popover .driver-popover-description .tour-desc-label {
  font-weight: 600; color: var(--e360-ink);
}
.driver-popover.e360-tour-popover .driver-popover-close-btn {
  color: var(--e360-ink-4); font-size: 16px;
}
.driver-popover.e360-tour-popover .driver-popover-close-btn:hover,
.driver-popover.e360-tour-popover .driver-popover-close-btn:focus { color: var(--e360-ink); }
.driver-popover.e360-tour-popover .driver-popover-footer { margin-top: 18px; }
.driver-popover.e360-tour-popover .driver-popover-progress-text {
  color: var(--e360-ink-4); font-size: 12px; font-weight: 500;
}
.driver-popover.e360-tour-popover .driver-popover-footer-btn {
  border-radius: 7px; padding: 7px 14px; font-size: 12.5px; font-weight: 600;
  border: 0.5px solid var(--e360-rule); background-color: var(--e360-paper); color: var(--e360-ink-2);
  transition: background-color var(--e360-dur-fast) var(--e360-ease),
              color var(--e360-dur-fast) var(--e360-ease),
              border-color var(--e360-dur-fast) var(--e360-ease),
              transform var(--e360-dur-fast) var(--e360-ease);
}
.driver-popover.e360-tour-popover .driver-popover-footer-btn:hover,
.driver-popover.e360-tour-popover .driver-popover-footer-btn:focus {
  background-color: var(--e360-tint-2); color: var(--e360-deep);
}
.driver-popover.e360-tour-popover .driver-popover-footer-btn:active { transform: scale(.96); }
.driver-popover.e360-tour-popover .driver-popover-next-btn,
.driver-popover.e360-tour-popover .driver-popover-done-btn {
  background-color: var(--e360-deep); border-color: var(--e360-deep); color: var(--e360-paper-2);
}
.driver-popover.e360-tour-popover .driver-popover-next-btn:hover,
.driver-popover.e360-tour-popover .driver-popover-done-btn:hover {
  background-color: var(--e360-mid); border-color: var(--e360-mid); color: var(--e360-paper-2);
}
.driver-popover.e360-tour-popover .driver-popover-btn-disabled { opacity: .4; }
/* Pedido directo del usuario: en celular, driver.js seguía calculando side/align como si
   hubiera espacio de escritorio a los lados del elemento señalado — la tarjeta terminaba
   saliéndose de la pantalla o encimada con el elemento mismo (el caso reportado: los pasos
   que explican el menú izquierdo/derecho, justo pegados al borde de una pantalla angosta).
   En vez de perseguir side/align caso por caso, se fija la tarjeta abajo, ancho completo —
   "la nube de texto... fija mientras se marcan las secciones para navegar" — y solo el
   recorte/halo (driver-active-element) se mueve entre pasos. `!important`: driver.js escribe
   top/left inline en cada paso (mismo motivo que la animación de arriba); un !important en
   la hoja de estilos SÍ le gana a eso. */
@media (max-width: 768px) {
  .driver-popover.e360-tour-popover {
    position: fixed !important;
    top: auto !important; left: 10px !important; right: 10px !important; bottom: 12px !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    max-height: 44vh; overflow-y: auto;
    transition: top var(--e360-dur) var(--e360-ease), bottom var(--e360-dur) var(--e360-ease);
  }
  /* La flechita apunta hacia el elemento señalado según side/align — con la tarjeta fija abajo
     ya no apunta a nada correcto, se ve rota/desalineada. */
  .e360-tour-popover .driver-popover-arrow { display: none !important; }
  /* Pedido directo del usuario: pasos cuyo elemento NO vive dentro de nada con scroll (p. ej.
     #helpBtn, fijo al pie del nav por flex — tours.js::_keepAboveFixedPopover no tiene qué
     mover ahí) no se pueden "subir" a sí mismos por encima de la tarjeta — así que es la
     tarjeta la que se va arriba en vez de abajo, dejando libre lo señalado. */
  body.tour-popover-top .driver-popover.e360-tour-popover {
    top: 12px !important; bottom: auto !important;
  }
  /* Pedido directo del usuario ("la pestaña se ve muy grande, no es obvio que hay que hacerle
     scroll", paso "¿Cómo ingresar al bot?"): con la tarjeta capada a 44vh + overflow-y:auto, un
     paso con descripción larga desborda sin ninguna señal — se ve como si ya mostrara todo el
     contenido. tours.js::_wireScrollHint agrega/quita la clase "show" según el scroll real de
     ESTA tarjeta (creada de cero en cada paso). `position:absolute` dentro de la propia tarjeta
     (que ya es el contenedor con scroll): queda anclado visualmente al borde inferior VISIBLE,
     sin desplazarse con el contenido que se scrollea por debajo (mismo truco que un "fade" de
     scroll de cualquier panel — el elemento posicionado no sigue el scrollTop de su propio
     contenedor). `pointer-events:none`: es solo una señal visual, nunca debe robar el click de lo
     que hay debajo (botones "Siguiente"/"Atrás" del footer, si el desborde llega hasta ahí). */
  .driver-popover.e360-tour-popover .tour-scroll-hint {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 22px 22px 10px;
    display: flex; align-items: flex-end; justify-content: center; gap: 4px;
    font-size: 11px; font-weight: 600; color: var(--e360-ink-3);
    background: linear-gradient(to bottom, transparent, var(--e360-paper-2) 60%);
    opacity: 0; pointer-events: none;
    transition: opacity var(--e360-dur-fast) var(--e360-ease);
  }
  .driver-popover.e360-tour-popover .tour-scroll-hint.show { opacity: 1; }
  .driver-popover.e360-tour-popover .tour-scroll-hint::before {
    content: "⌄"; font-size: 13px; line-height: 1;
    animation: e360ScrollHintBounce 1.3s ease-in-out infinite;
  }
  @keyframes e360ScrollHintBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .driver-fade .driver-overlay, .driver-popover.e360-tour-popover,
  .driver-active-element, .e360-tour-popover .driver-popover-arrow,
  body.tour-dir-right .driver-popover.e360-tour-popover,
  body.tour-dir-left .driver-popover.e360-tour-popover,
  .tour-scroll-hint::before { animation: none !important; }
  .driver-popover.e360-tour-popover { transition: none !important; }
}

/* ── Tarjeta de bienvenida al tour (tours.js) — aparece ANTES de arrancar driver.js, para que
   quede explícito que viene un recorrido y que se puede saltar. Reusa .modal-scrim/.modal
   (mismo look que el resto de los diálogos del panel) con una entrada más juguetona. ── */
.tour-intro-card { max-width: 380px; text-align: center; padding: 32px 28px 26px; align-items: center; }
.tour-intro-scrim.open .tour-intro-card { animation: e360TourIntroIn .38s var(--e360-ease) both; }
@keyframes e360TourIntroIn {
  0%   { opacity: 0; transform: translateY(10px) scale(.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.tour-intro-emoji {
  font-size: 34px; line-height: 1; margin-bottom: 12px;
  animation: e360TourWave 1.6s ease-in-out .3s 2;
  transform-origin: 70% 70%;
}
@keyframes e360TourWave {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-12deg); }
  50%      { transform: rotate(10deg); }
  75%      { transform: rotate(-6deg); }
}
.tour-intro-card h3 { font-size: 18px; font-weight: 600; color: var(--e360-ink); margin: 0 0 8px; }
.tour-intro-card p { font-size: 13.5px; line-height: 1.55; color: var(--e360-ink-2); margin: 0; }
.tour-intro-actions { display: flex; gap: 10px; margin-top: 22px; width: 100%; }
.tour-intro-actions button { flex: 1; margin-top: 0; }
/* 3+ opciones (el chooser con vista/servicio/paneles): en columna, no apretadas en una fila. */
.tour-intro-actions.stack { flex-direction: column; }
/* 140 — puntos del explicador "cómo funciona esto" (maybeShowHowItWorks, tours.js): mismo
   lenguaje visual que un carrusel de slides, "pasando pestañas" pedido por el usuario. */
.tour-intro-dots { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.tour-intro-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--e360-rule); transition: background var(--e360-dur-fast), width var(--e360-dur-fast); }
.tour-intro-dot.on { background: var(--e360-deep); width: 16px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  .tour-intro-scrim.open .tour-intro-card, .tour-intro-emoji { animation: none !important; }
}

/* ============ D8 (spec registro visible 2026-09-09) — DENSIDAD EN PANTALLAS BAJAS ============
   El menú izquierdo debe verse completo sin scroll a 1366×768 y 1280×720 (ticket 185894c9).
   Los grupos colapsables (index.html::navScrollHtml) hacen el grueso; esto compacta el riel
   SOLO en viewports bajos (max-height, no ancho): tarjetas de proyecto/servicio, ítems,
   encabezados y pie. VIVE AL FINAL DEL ARCHIVO a propósito: los skins WS-B
   (.nav[data-nav-theme], arriba) comparten especificidad y aquí gana el orden. */
@media (max-height: 800px) {
  .nav-top { height: 50px; flex: 0 0 50px; padding: 10px 14px; }
  .nav-toggle { top: 8px; width: 32px; height: 32px; }
  .proj-wrap { padding: 8px 10px 2px; }
  .proj-card { padding: 6px 9px; }
  .svc-card { padding: 5px 9px; }
  .nav-scroll { padding: 6px 10px 8px; }
  .nav-section { padding: 7px 10px 3px; }
  .nav-item { padding: 5px 11px; font-size: 13px; }
  .nav[data-nav-theme] .nav-scroll { gap: 3px; padding: 6px 10px 8px; }
  .nav[data-nav-theme] .nav-group { padding: 2px 5px 3px; }
  .nav[data-nav-theme] .nav-section { padding: 4px 8px 3px; }
  .nav[data-nav-theme] .nav-item { padding: 5px 10px; font-size: 13px; }
  .nav[data-nav-theme] .svc-wrap[data-group] { margin: 0 0 4px; padding: 5px 5px 4px; }
  .nav-foot { padding: 6px 10px max(6px, env(safe-area-inset-bottom)); }
  .foot-btn { padding: 5px 11px; font-size: 13px; }
  .foot-user { padding: 5px 11px; }
}

/* =============================================================================
   F-REG-9 — pestaña "Registro" de Organización (migraciones 154-157).
   Todo sale de los tokens de :root, así que el tema oscuro de más arriba aplica
   solo. Sin hex sueltos.
   ============================================================================= */

/* Utilidad que faltaba: texto solo para lectores de pantalla (el <caption> de la
   tabla de personas). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Puertas de entrada: una PROTAGONISTA por linea viva, y el resto del catalogo
   como lista. Con una sola linea activa (el estado del MVP), una rejilla 2x2 con
   tres tarjetas apagadas hacia que la vista pareciera rota; asi se ve intencional.
   `auto-fit` deja que crezca sola el dia que haya mas de una linea. */
.reg-heroes {
  display: grid; gap: 16px; margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}
.reg-hero { display: flex; gap: 20px; align-items: flex-start; }
.reg-hero-main { flex: 1; min-width: 0; }
.reg-puerta-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.reg-puerta-head h3 { font-size: 16px; font-weight: 600; color: var(--e360-ink); }

/* El QR grande es el control principal: se ve y se amplia de un clic. */
.reg-hero-qr {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 160px; height: 160px; padding: 6px; cursor: pointer;
  background: var(--e360-paper-2); border: 0.5px solid var(--e360-card-border);
  border-radius: var(--e360-radius); transition: border-color var(--e360-dur-fast);
}
.reg-hero-qr:hover { border-color: var(--e360-mid); }
.reg-hero-qr:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--e360-tint); }
.reg-qr-img { display: block; width: 100%; height: 100%; }
.reg-qr-ph { font-size: 11px; color: var(--e360-ink-4); text-align: center; }

.reg-hero-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
/* El <a download> tiene que verse igual que los botones que lo rodean: `.copy-btn` ya es el
   secundario de la casa (borde + radio), pero un <a> se subraya por defecto. */
a.copy-btn { text-decoration: none; }

/* Primario pequeno, para una fila de tabla. `.bit-submit` (padding 10/18) es de formulario y
   ahi se ve enorme; `.bit-retry` habria dejado "Rechazar" como enlace subrayado al lado. */
.reg-btn-primario {
  border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 600;
  background: var(--e360-deep); color: var(--e360-on-accent); cursor: pointer;
  transition: filter var(--e360-dur-fast);
}
.reg-btn-primario:hover:not(:disabled) { filter: brightness(1.07); }
.reg-btn-primario:disabled { opacity: .55; cursor: default; }

/* Los servicios sin linea: se listan, no compiten por la atencion. */
.reg-otros { margin-top: 20px; }
.reg-otros .bit-list { margin-top: 8px; }
.reg-otros > .bit-hint { margin-top: 8px; }
.reg-inactiva { opacity: .78; }
.reg-inactiva .bit-item-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reg-inactiva-nota { flex: none; white-space: nowrap; }

/* Estado vacio que hay que LEER: un error de carga, un permiso denegado, o una
   instruccion de que hacer. Distinto de "aqui no hay nada todavia".

   `.state-empty` pinta con --e360-ink-4, la tinta mas tenue del panel: 2.6:1 sobre
   papel, por debajo del 4.5:1 de WCAG AA. Para "Sin voces para este periodo" eso
   comunica bien (el gris dice "vacio" sin que haga falta leerlo). Para "No se pudo
   cargar los marcos" o "Esta seccion es solo para administradores", no: son textos
   que el usuario necesita leer para saber que hacer, y son justo donde el contraste
   importa mas.

   Modificador, no cambio de la clase base: de los 79 usos del panel, los ~46 de
   carga y de vacio se quedan como estan. */
.state-empty.state-empty-legible {
  color: var(--e360-ink-2); line-height: 1.5;
  max-width: 64ch; margin-left: auto; margin-right: auto;
}

.reg-metrica { margin-top: 12px; font-size: 13px; color: var(--e360-ink-2); }
.reg-metrica b { font-weight: 600; }
.reg-crit { color: var(--e360-crit); }

.reg-codigo-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
/* G3 (fix/primer-ingreso-ajustes): el token COMPLETO, el mismo del QR, para escribirlo a mano. */
.reg-token { text-transform: none; letter-spacing: .04em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
/* G4: el token se muestra agrupado (K7R4M HXQ9T-SG-3F9A 1C02); sus espacios no parten la línea. */
.reg-qr-token { white-space: nowrap; }

.reg-qr-big { display: block; width: 280px; max-width: 100%; margin: 0 auto 12px; }
.reg-qr-token {
  text-align: center; font-size: 15px; font-weight: 600;
  color: var(--e360-ink); letter-spacing: .06em; margin-bottom: 10px;
}

.reg-filtros { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 13px 0; }
.reg-buscar { max-width: 220px; }
.reg-filtro-servicio { max-width: 200px; }

.reg-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.reg-tabla th {
  text-align: left; padding: 0 8px 8px 0; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; color: var(--e360-ink-4);
}
.reg-tabla td { padding: 11px 8px 11px 0; border-top: 0.5px solid var(--e360-rule-2); vertical-align: middle; }
.reg-td-right { text-align: right; }
.reg-acciones { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Fase 3 (2026-09-16) — checkboxes de servicio (mapeo manual, solicitud sin servicio fijo). */
.reg-check-group { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 4px; }
.reg-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--e360-ink-2); cursor: pointer; }

/* Fase 3 — "Personas registradas" agrupada por persona: una tarjeta por teléfono, una sub-fila
   por servicio (167: un teléfono puede tener varios a la vez). */
.reg-persona-servicios { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.reg-servicio-fila {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 0; border-top: 0.5px solid var(--e360-rule-2);
}
.reg-servicio-fila:first-child { border-top: 0; padding-top: 0; }
.reg-servicio-nombre { font-size: 13.5px; font-weight: 600; color: var(--e360-ink); min-width: 140px; }
.reg-servicio-fila .reg-acciones { margin-left: auto; }

/* La tabla es lo único que puede desbordar en pantalla angosta. */
@media (max-width: 720px) {
  .reg-tabla { display: block; overflow-x: auto; white-space: nowrap; }
  .reg-heroes { grid-template-columns: minmax(0, 1fr); }
  .reg-hero { flex-direction: column; }
  .reg-hero-qr { align-self: flex-start; }
  .reg-inactiva-nota { white-space: normal; }
  .reg-servicio-fila { flex-direction: column; align-items: flex-start; }
  .reg-servicio-fila .reg-acciones { margin-left: 0; }
}

/* G1/G2 — el ORIGEN de una alerta (tema grave del piso / regla propia de la organización) y la
   fila del piso en "Reglas de alerta". Reusa .tag.c / .tag.w; solo añade el espaciado. */
.alert .origenes, .origenes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   PRIMER INGRESO (feat/primer-ingreso, G2) — handoff design_handoff_primer_ingreso, opción 4a.
   Alta fidelidad: colores, tipo y medidas del README. Superficie standalone (sin shell), igual
   que #sencilla / #onboarding. Lo añadido sobre 4a (la pregunta, el 2º campo, el checkbox) usa
   las mismas medidas del input de la tarjeta 1.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.pi-wrap {
  --pi-sage800: #0F6E56; --pi-sage600: #1D9E75; --pi-sage50: #E1F5EE;
  --pi-ink: #1D3A31; --pi-body: #3A4A44; --pi-muted: #6E7A74; --pi-faint: #9AA39E;
  --pi-paper: #FBFAF6; --pi-sand: #F1EFE8; --pi-line: #E4E1D7; --pi-ok: #3B6D11;
  --pi-ease: cubic-bezier(.4, 0, .2, 1);
  /* Su propio contenedor de scroll, como .vs-wrap: html/body son height:100% (el shell), así
     que el documento no crece; con la pregunta añadida la columna izquierda puede pasar de la
     altura de la ventana y se desplaza aquí dentro. */
  height: 100vh; overflow-y: auto; overflow-x: hidden;
  background: var(--pi-sage800); color: #FFFFFF;
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
}
.pi-wrap.hidden { display: none; }
/* feat/lineas-waba (D-LIN-5) — la tarjeta "Mi bitácora" también vive en Ayuda, fuera de .pi-wrap:
   ahí toma los mismos tokens de color que en el primer ingreso. */
.pi-vars {
  --pi-sage800: #0F6E56; --pi-sage600: #1D9E75; --pi-sage50: #E1F5EE;
  --pi-ink: #1D3A31; --pi-body: #3A4A44; --pi-muted: #6E7A74; --pi-faint: #9AA39E;
  --pi-paper: #FBFAF6; --pi-sand: #F1EFE8; --pi-line: #E4E1D7; --pi-ok: #3B6D11;
  --pi-ease: cubic-bezier(.4, 0, .2, 1);
}
.pi-vars .mb-card { box-shadow: inset 0 0 0 1px var(--pi-line); }
.mb-badge svg { display: block; }
.mb-numero { color: var(--pi-body); }
.pi-frame {
  max-width: 1240px; margin: 0 auto; min-height: 100%; box-sizing: border-box;
  padding: 36px 44px 44px; display: flex; flex-direction: column;
}
/* fix/onboarding-salida-explicita (D-ONB-2) — la cabecera se queda fija arriba dentro de la
   superficie (que tiene su propio scroll): "Ya terminé, llévame al panel" siempre está a la vista. */
.pi-top { display: flex; align-items: center; justify-content: space-between; min-height: 30px;
          gap: 8px 16px; position: sticky; top: 0; z-index: 2; background: var(--pi-sage800);
          margin: -36px -44px 0; padding: 18px 44px 14px; }
.pi-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pi-marca { flex: 0 0 auto; display: block; }
.pi-org { font-size: 13px; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* fix/residuales-2026-10-02 (D-ELE-1) — la salida es el elemento MÁS visible de la pantalla:
   fondo blanco y texto grande desde el principio (antes, contorno de 13.5 px mientras faltaba
   algo). Con todos los pasos hechos (D-ONB-1) suma un halo blanco. Mismos colores y tipografía
   de la superficie. En escritorio el host la pinta en la figura; a 980 px o menos, en la cabecera. */
.pi-salir {
  flex: 0 0 auto; border: 0; border-radius: 12px; background: #FFFFFF; color: var(--pi-sage800);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18); padding: 12px 20px; cursor: pointer;
  font: inherit; font-size: 18px; font-weight: 600; line-height: 1.2;
  transition: background-color 140ms var(--pi-ease), color 140ms var(--pi-ease);
}
.pi-salir:hover:not(:disabled) { background: var(--pi-sage50); }
.pi-salir:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.pi-salir:disabled { opacity: .6; cursor: default; }
.pi-salir-listo { box-shadow: 0 0 0 5px rgba(255, 255, 255, .35), 0 6px 18px rgba(0, 0, 0, .18); }
.pi-salir-listo:hover:not(:disabled) { background: var(--pi-sage50); }
/* Dentro del cuerpo del elefante (viewBox 10 42 180 124: el hueco entre el lomo, la pata
   trasera y la oreja está en x 33..100, y 60..138). El tamaño sigue al ancho de la figura. */
.pi-elefante-wrap { container-type: inline-size; }
.pi-salir-figura {
  position: absolute; left: 33%; top: 47%; transform: translate(-50%, -50%); z-index: 1;
  width: max-content; max-width: 40%; white-space: normal; text-wrap: balance; text-align: center;
  font-size: clamp(18px, 3.4cqw, 24px); padding: .6em .9em;
}
.pi-num-hecho { background: var(--pi-ok); }
.pi-num-hecho svg { display: block; }

/* D-ONB-3 — la confirmación al salir con pasos pendientes: breve, no bloquea (Esc o "Seguir aquí"). */
.pi-confirm-scrim {
  position: fixed; inset: 0; z-index: 20; background: rgba(13, 32, 26, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.pi-confirm {
  background: #FFFFFF; color: var(--pi-ink); border-radius: 12px; padding: 20px 22px;
  width: 100%; max-width: 440px; box-sizing: border-box; box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
}
.pi-confirm-lista { margin: 12px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5;
                    color: var(--pi-body); }
.pi-confirm-lista li + li { margin-top: 6px; }
.pi-confirm-lista b { color: var(--pi-ink); font-weight: 600; }
.pi-confirm-acciones { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }

/* D-BIT-4 — la tarjeta Mi bitácora en Organización → Registro, bajo las cuatro puertas. */
.reg-mb { margin-top: 14px; max-width: 520px; }
.reg-mb:empty { display: none; }

.pi-body {
  flex: 1; margin-top: 32px;   /* 98px desde el borde superior del marco, como el artboard */
  display: grid; grid-template-columns: 470px 1fr; gap: 34px; align-items: start;
}
.pi-left { min-width: 0; }
.pi-eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }
.pi-h {
  margin: 8px 0 0; font-size: 40px; font-weight: 600; line-height: 1.08; letter-spacing: -1.2px;
  color: #FFFFFF; text-wrap: pretty;
}
.pi-intro { margin: 12px 0 0; font-size: 15px; line-height: 1.6; max-width: 430px; text-wrap: pretty; }
.pi-cards { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }

.pi-card { background: #FFFFFF; border-radius: 12px; padding: 18px 20px; color: var(--pi-ink); }
.pi-card-h { display: flex; align-items: center; gap: 11px; }
.pi-num-badge {
  display: flex; height: 24px; width: 24px; flex: 0 0 auto; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--pi-sage800); color: #FFFFFF; font-size: 12px; font-weight: 600;
}
.pi-card-title { font-size: 16px; font-weight: 600; color: var(--pi-ink); }
.pi-card-body { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--pi-body); }

.pi-btn {
  border: 0; border-radius: 9px; background: var(--pi-sage800); color: #FFFFFF; padding: 10px 18px;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background-color 140ms var(--pi-ease);
}
.pi-btn:hover:not(:disabled), .pi-btn:focus-visible { background: var(--pi-sage600); }
.pi-btn:focus-visible { outline: 2px solid var(--pi-ink); outline-offset: 2px; }
.pi-btn:disabled { opacity: .6; cursor: default; }
.pi-btn-left { text-align: left; padding: 10px 16px; }
/* D-PAN-3 (fix/paneles-primer-ingreso): la salida al panel, botón SECUNDARIO visible junto al
   paso 2 (antes una liga de 12 px que solo salía tras elegir opción). */
.pi-btn-sec { background: transparent; color: var(--pi-sage800); box-shadow: inset 0 0 0 1.5px var(--pi-sage800); }
.pi-btn-sec:hover:not(:disabled), .pi-btn-sec:focus-visible { background: var(--pi-sage50); }
.pi-salida { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
/* G2 (fix/primer-ingreso-ajustes): el código personal del admin. "Abrir en WhatsApp" es un enlace
   con forma de botón; el token va COMPLETO (se escribe a mano), sin el recorte de .pi-chip. */
.pi-btn-wa { display: inline-block; text-decoration: none; align-self: flex-start; }
.pi-btn-wa[aria-disabled="true"] { opacity: .6; }
.pi-token { overflow: visible; text-overflow: clip; letter-spacing: .02em; flex: 0 0 auto; }
.pi-codigo { flex-wrap: wrap; }
.pi-copiar {
  border: 0.5px solid var(--pi-line); border-radius: 6px; background: #FFFFFF; color: var(--pi-sage800);
  padding: 2px 8px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.pi-copiar:focus-visible { outline: 2px solid var(--pi-ink); outline-offset: 2px; }
.pi-espera { color: var(--pi-body); }

.pi-bitacora {
  margin-top: 10px; display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px;
  line-height: 1.45; color: var(--pi-body); cursor: pointer;
}
.pi-bitacora input { margin: 1px 0 0; accent-color: var(--pi-sage800); flex: 0 0 auto; }
.pi-note { margin: 9px 0 0; font-size: 12px; line-height: 1.45; color: var(--pi-muted); }
.pi-err, .pi-warn { color: #9B2C2C; }
.pi-done { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--pi-ink); }
.pi-check { flex: 0 0 auto; }
.pi-tabnum { font-variant-numeric: tabular-nums; font-weight: 600; }

.pi-opciones { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.pi-opcion {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  border-radius: 9px; border: 0.5px solid var(--pi-line); background: var(--pi-paper);
  padding: 9px 13px; font: inherit; font-size: 13.5px; color: var(--pi-ink);
  transition: box-shadow 140ms var(--pi-ease), background-color 140ms var(--pi-ease);
}
.pi-opcion:hover { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--pi-line); }
.pi-opcion:focus-visible { outline: 2px solid var(--pi-sage600); outline-offset: 1px; }
.pi-opcion.on { background: #FFFFFF; border-color: var(--pi-sage800); box-shadow: inset 0 0 0 1px var(--pi-sage800); font-weight: 600; }
.pi-radio {
  flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid var(--pi-faint); background: #FFFFFF;
}
.pi-opcion.on .pi-radio { border: 4px solid var(--pi-sage800); }

.pi-qr-row { margin-top: 12px; display: flex; gap: 14px; align-items: stretch; }
.pi-qr {
  flex: 0 0 auto; display: block; width: 92px; height: 92px; box-sizing: border-box;
  border-radius: 9px; border: 0.5px solid var(--pi-line); background: #FFFFFF; object-fit: contain;
}
.pi-qr-vacio { background: repeating-linear-gradient(135deg, var(--pi-sand) 0 6px, var(--pi-paper) 6px 12px); }
.pi-qr-side { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.pi-codigo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--pi-body); min-width: 0; }
.pi-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; border-radius: 6px;
  background: var(--pi-sand); padding: 3px 8px; color: var(--pi-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.pi-otro { font-size: 12px; color: var(--pi-muted); }
.pi-otro a { color: var(--pi-sage800); font-weight: 600; text-decoration: underline; }

.pi-right { min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
/* D-ELE-1 — en escritorio la figura (con la salida dentro) se queda a la vista mientras los pasos
   se desplazan: arriba a la derecha, fija bajo la cabecera. */
@media (min-width: 981px) {
  .pi-right { position: sticky; top: 80px; align-self: start; justify-content: flex-start; }
}
.pi-elefante-wrap { position: relative; }
.pi-elefante { display: block; width: 100%; height: auto; }
.pi-dormido { opacity: .2; }
.pi-activo { stroke: #FFFFFF; stroke-width: 10; opacity: 1; }
.pi-pill {
  position: absolute; left: 92.2%; top: 87.1%; transform: translate(-100%, 42px);
  display: inline-flex; align-items: center; white-space: nowrap; border-radius: 20px;
  background: #FFFFFF; color: var(--pi-sage800); padding: 7px 14px; font-size: 13px; font-weight: 600;
  box-shadow: 0 10px 24px rgba(29, 58, 49, .22);
}
.pi-caption {
  margin: 34px 0 0; font-size: 13.5px; line-height: 1.6; text-align: center; max-width: 520px;
  align-self: center; text-wrap: pretty;
}

/* Teléfono/tablet: una columna, gutter de 16px, el elefante debajo y sin scroll horizontal. */
@media (max-width: 980px) {
  .pi-frame { padding: 24px 16px 32px; }
  .pi-top { margin: -24px -16px 0; padding: 14px 16px 12px; }
  .pi-body { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 28px; }
  .pi-h { font-size: 32px; letter-spacing: -.8px; }
  .pi-right { align-self: auto; }
  .pi-pill { transform: translate(-100%, 24px); }
  /* D-ELE-1 — sin columna propia, la figura queda debajo de los pasos: la salida va en la
     cabecera fija, en su propia fila y a todo lo ancho. */
  .pi-top { flex-wrap: wrap; }
  .pi-brand { flex: 1 1 100%; }
  .pi-salir-cabecera { flex: 1 1 100%; white-space: normal; }
}
@media (max-width: 420px) {
  .pi-qr-row { flex-direction: column; }
  /* D-RES-10 (F-PAN-7, B1-1) — a 380 px el nombre del org se pegaba a "Entrar al panel completo
     →": la marca con el nombre ocupa su fila y la salida baja a la siguiente, alineada a la
     derecha. Sin desbordes ni scroll horizontal. */
  .pi-top { flex-wrap: wrap; }
  .pi-brand { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pi-btn, .pi-opcion, .pi-salir { transition: none; }
}

/* ── D-PER-1..6 (221) · trazabilidad por persona en servicios identificados ── */
.badge-persona { cursor: pointer; white-space: normal; }
.badge-persona:hover, .badge-persona:focus-visible { border-color: var(--e360-mid); color: var(--e360-deep); }
.persona-filtro { margin: 10px 0 2px; }
.persona-filtro .fchip { margin: 0; flex-wrap: wrap; }
.persona-filtro-x { border: 0; background: transparent; color: inherit; font-size: 16px; line-height: 1;
  cursor: pointer; padding: 0 2px; margin-left: 2px; }
.voces-export { display: flex; gap: 6px; margin-left: auto; }
.detail-persona-nombre { font-weight: 600; color: var(--e360-ink); margin-top: 6px; }
.detail-persona-tel { color: var(--e360-ink-2); margin-top: 2px; }
.detail-persona-liga { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--e360-deep); }
.persona-declarado { color: var(--e360-ink-3); font-weight: 400; font-size: 12.5px; }
.persona-lista { padding: 0; margin-top: 14px; }
.persona-row { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(0, 1fr)) auto;
  gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 0.5px solid var(--e360-rule); cursor: pointer; }
.persona-row:last-child { border-bottom: 0; }
.persona-row:hover { background: var(--e360-paper-2); }
.persona-row.persona-revocada .persona-nombre { color: var(--e360-ink-3); }
.persona-row-edit { display: block; cursor: default; }
.persona-row-edit:hover { background: transparent; }
.persona-main { min-width: 0; }
.persona-nombre { font-weight: 600; color: var(--e360-ink); text-decoration: none; overflow-wrap: anywhere; }
.persona-nombre:hover { text-decoration: underline; }
.persona-sub { color: var(--e360-ink-3); font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; }
.persona-dato { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.persona-dato .k { font-size: 11px; color: var(--e360-ink-3); text-transform: uppercase; letter-spacing: .04em; }
.persona-dato .v { font-size: 14px; color: var(--e360-ink); }
.persona-dato .v.crit { color: var(--e360-crit); font-weight: 600; }
.persona-estado { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.persona-edit { display: grid; gap: 6px; max-width: 420px; }
.persona-edit-acciones { display: flex; gap: 8px; margin-top: 4px; }
@media (max-width: 720px) {
  .persona-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
  /* Fase 6: si un encabezado ocupa dos renglones («Alertas abiertas»), las cifras siguen alineadas. */
  .persona-dato { align-self: stretch; justify-content: space-between; }
  .persona-main { grid-column: 1 / -1; }
  .persona-estado { grid-column: 1 / -1; justify-content: flex-start; }
  .voces-export { margin-left: 0; }
}
.voces-head { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 720px) {
  .voces-head .voces-export { order: 3; width: 100%; }
}
/* D-SEG-3/4 (fix/residuales-2026-10-02) — el título del servicio y, debajo, la línea fija de la
   pestaña activa. D-SEG-2 — el selector de persona propio de Voces, junto a la etiqueta. */
.voces-titulo { min-width: 0; flex: 1 1 260px; }
.voces-que-es { font-size: 13px; color: var(--e360-ink-3); margin: 4px 0 0; max-width: 62ch; }
.voces-persona { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -6px 0 12px; }
.voces-persona-label { margin: 0; }
.voces-persona .persona-filtro { margin: 0; }
@media (max-width: 720px) {
  .voces-persona .bit-filter-sel { flex: 1 1 100%; min-width: 0; }
}
.alert-persona { margin-top: 6px; }

/* D-RS2-1 — "Personas en seguimiento" del Resumen: tres cifras, cada una abre Personas filtrada. */
.personas-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 4px 16px 8px; }
.persona-cifra { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px;
  border: 0.5px solid var(--e360-rule); text-decoration: none; color: var(--e360-ink); background: var(--e360-paper); }
.persona-cifra:hover { background: var(--e360-paper-2); }
.persona-cifra .n { font-size: 26px; font-weight: 700; line-height: 1.1; }
.persona-cifra .k { font-size: 12.5px; color: var(--e360-ink-3); }
.persona-cifra.atencion .n { color: var(--e360-crit); }
.personas-cifras-nota { color: var(--e360-ink-3); font-size: 12px; margin: 0 16px 12px; }
@media (max-width: 720px) {
  .personas-cifras { grid-template-columns: 1fr; }
}

/* ===================================================================================== */
/* Tablero de Seguimiento (257, D-SEG-1..14) — tablero.js                                 */
/* Plano y sobrio: tokens de DESIGN_TOKENS.css, un solo acento (--e360-deep) para lo que   */
/* falta (sin responsable, sin fecha) y la antigüedad; el rojo es solo de estado (vencido).*/
/* A ancho de teléfono las tarjetas se apilan y la tabla hace scroll DENTRO de su caja.    */
/* ===================================================================================== */
.tab { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.tab-head { border-bottom: 0.5px solid var(--e360-rule); padding-bottom: 0; }
.tab-head-fila { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: space-between; }
.tab-title { margin: 2px 0 0; }
.tab-head-meta { font-size: 13px; color: var(--e360-ink-3); }
.tab-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.tab-tab { min-height: 44px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent;
           font: inherit; font-size: 14.5px; color: var(--e360-ink-3); cursor: pointer; }
.tab-tab.on { color: var(--e360-ink); font-weight: 600; border-bottom-color: var(--e360-deep); cursor: default; }
.tab-tab:not(.on):hover { color: var(--e360-ink); }
.tab-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.tab-sec { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tab-sec-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; }
.tab-sec-head h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--e360-ink); }
.tab-sec-nota, .tab-sub, .tab-sub-inline { font-size: 13px; color: var(--e360-ink-3); }
.tab-kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--e360-ink-3); }
.tab-sintesis { margin: 0; font-size: 17px; line-height: 1.55; color: var(--e360-ink); max-width: 860px; }
.tab-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tab-cifra { background: var(--e360-paper-2); border: 0.5px solid var(--e360-card-border); border-radius: var(--e360-radius-card); padding: 14px 16px; }
.tab-cifra-n { font-size: 28px; font-weight: 600; color: var(--e360-ink); line-height: 1.2; }
.tab-cifra-l { font-size: 13.5px; color: var(--e360-ink-3); }
.tab-acento { color: var(--e360-deep); font-weight: 600; }
.tab-fuerte { font-weight: 600; color: var(--e360-ink); }
.tab-card { background: var(--e360-paper-2); border: 0.5px solid var(--e360-card-border); border-radius: var(--e360-radius-card); padding: 16px 18px; min-width: 0; }
.tab-bloqueo { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-start; }
.tab-antig { flex: 0 0 104px; }
.tab-antig-n { font-size: 22px; font-weight: 600; color: var(--e360-deep); }
.tab-antig-l { font-size: 13px; color: var(--e360-ink-3); }
.tab-bloqueo-cuerpo { flex: 999 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tab-texto { font-size: 16px; font-weight: 500; color: var(--e360-ink); overflow-wrap: anywhere; }
.tab-meta { font-size: 13.5px; color: var(--e360-ink-3); }
.tab-meta strong { color: var(--e360-ink); font-weight: 600; }
.tab-vinculo { background: var(--e360-sand); border-radius: var(--e360-radius); padding: 10px 12px; font-size: 14px;
               display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; color: var(--e360-ink-2); }
.tab-vinculo > span:first-child { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.tab-acciones { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.tab-acciones-sueltas { display: flex; gap: 8px; }
.tab-btn { min-height: 40px; padding: 0 14px; border: 0.5px solid var(--e360-ink-4); border-radius: var(--e360-radius); background: var(--e360-paper-2);
           color: var(--e360-ink); font: inherit; font-size: 14px; cursor: pointer; }
.tab-btn:hover { border-color: var(--e360-ink-3); }
.tab-btn-primario { background: var(--e360-deep); border-color: var(--e360-deep); color: var(--e360-on-accent); }
.tab-btn-primario:hover { background: var(--e360-mid); border-color: var(--e360-mid); }
.tab-btn:disabled { opacity: .55; cursor: default; }
.tab-link { align-self: flex-start; text-align: left; background: none; border: 0; padding: 0; font: inherit; font-size: 13.5px; color: var(--e360-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; min-height: 28px; }
.tab-original { margin: 0; padding: 10px 12px; border-left: 2px solid var(--e360-rule); background: var(--e360-paper); font-size: 14px; color: var(--e360-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.tab-tabla-caja { background: var(--e360-paper-2); border: 0.5px solid var(--e360-card-border); border-radius: var(--e360-radius-card); overflow-x: auto; max-width: 100%; }
.tab-tabla { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14.5px; }
.tab-tabla th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--e360-ink-3);
                padding: 12px 16px; border-bottom: 0.5px solid var(--e360-rule); }
.tab-tabla td { padding: 13px 16px; border-bottom: 0.5px solid var(--e360-rule-2); vertical-align: top; color: var(--e360-ink); }
.tab-tabla tbody tr:last-child td { border-bottom: 0; }
.tab-estado { white-space: nowrap; }
.tab-tabla .tab-link { font-size: 12.5px; color: var(--e360-ink-3); }
.tab-estado-vencido { color: var(--e360-crit); font-weight: 600; }
.tab-estado-cumplido { color: var(--e360-ink-3); }
.tab-pie { margin: 0; font-size: 13px; color: var(--e360-ink-3); }
.tab-edit { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.tab-edit-l { font-size: 12px; color: var(--e360-ink-3); }
.tab-error { margin: 0; font-size: 12.5px; color: var(--e360-crit); }
.tab-dos-col { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.tab-col-ancha { flex: 999 1 440px; }
.tab-col-angosta { flex: 1 1 300px; }
/* SPEC-FIN-DE-SEMANA D-FS-21 — Falla / Bloqueo / categoría de lo hecho, y «Por máquina». */
.tab-tipo { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
            background: var(--e360-paper); color: var(--e360-ink-2); border: 0.5px solid var(--e360-card-border); }
.tab-tipo-falla { background: var(--e360-tint); color: var(--e360-deep); border-color: transparent; }
.tab-tabla-maquinas { min-width: 560px; }
.tab-tabla-maquinas tbody tr { cursor: pointer; }
.tab-tabla-maquinas tbody tr:hover, .tab-tabla-maquinas tbody tr:focus-visible { background: var(--e360-tint-2); outline: none; }
.tab-tabla-maquinas th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 14.5px; color: var(--e360-ink); }
.tab-avances-sin-proyecto { margin-top: 10px; }
/* D-FS-20 (A-FS-21) — las dos entradas de Operación en Administración del servicio. */
.admin-entradas { margin: 0 0 18px; }
.admin-entradas .muted { margin: 6px 0 0; font-size: 13px; color: var(--e360-ink-3); }
/* D-RS2-1 en el Tablero: las tres cifras de personas, una debajo de otra en la columna angosta. */
.tab-col-angosta .personas-cifras { grid-template-columns: 1fr; }
.tab-grupo { display: flex; flex-direction: column; gap: 10px; }
.tab-grupo-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.tab-avances { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--e360-ink); }
.tab-check { display: flex; gap: 8px; align-items: flex-start; }
.tab-asignar { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tab-personas { padding: 4px 18px; }
.tab-persona { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 0.5px solid var(--e360-rule-2); }
.tab-persona:last-child { border-bottom: 0; }
.tab-persona-der { text-align: right; font-size: 14px; color: var(--e360-ink); white-space: nowrap; }
.tab-rubro { border-style: dashed; border-color: var(--e360-ink-4); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.tab-rubro-txt { flex: 999 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tab-preview-h { margin: 6px 0 0; font-size: 16px; font-weight: 600; color: var(--e360-ink); }
.tab-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.tab-mini { padding: 12px 14px; font-size: 14px; overflow-wrap: anywhere; }
.tab-cajon { background: var(--e360-sand); border: 0.5px solid var(--e360-card-border); border-radius: var(--e360-radius-card); padding: 4px 18px; }
.tab-cajon summary { min-height: 44px; display: flex; align-items: center; font-weight: 500; color: var(--e360-ink); cursor: pointer; }
.tab-cajon-lista { margin: 0 0 8px; padding-left: 18px; font-size: 14px; color: var(--e360-ink-2); }
.tab-cajon .tab-sub { margin: 0 0 12px; }
.tab-cajon-voces { margin-top: 16px; }
.tab-vacio { margin: 0; font-size: 14px; color: var(--e360-ink-3); }
.tab-aviso { margin: 0; padding: 10px 12px; border-radius: var(--e360-radius); background: var(--e360-tint-2); color: var(--e360-ink); font-size: 14px; }
/* S18 (D-S18-9): el handle del proyecto. Chip corto y monoespaciado, clic = filtrar. */
.tab-handle { display: inline-flex; align-items: center; min-height: 24px; padding: 1px 8px; border: 0.5px solid var(--e360-card-border); border-radius: 999px; background: var(--e360-tint); color: var(--e360-deep); font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; vertical-align: middle; }
.tab-handle:hover, .tab-handle:focus-visible { background: var(--e360-tint-2); outline: none; box-shadow: 0 0 0 2px var(--e360-tint-2); }
.tab-filtro-activo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; color: var(--e360-ink-2); }
.tab-proyectos { list-style: none; margin: 0; padding: 4px 18px; display: flex; flex-direction: column; }
.tab-proyecto { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 0; border-bottom: 0.5px solid var(--e360-card-border); min-width: 0; overflow-wrap: anywhere; }
.tab-proyecto:last-child { border-bottom: 0; }
.tab-handle-input { display: inline-flex; align-items: center; gap: 4px; font: 600 14px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--e360-deep); }
.tab-handle-input .bit-input { max-width: 16em; font-family: inherit; }
.voces-proyecto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; font-size: 13.5px; color: var(--e360-ink-2); }
.badge-proyecto { background: var(--e360-tint); color: var(--e360-deep); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 560px) {
  .tab-tab { padding: 0 9px; font-size: 14px; }
  .tab-antig { flex-basis: 100%; display: flex; gap: 8px; align-items: baseline; }
  .tab-cifra-n { font-size: 24px; }
  .tab-sintesis { font-size: 16px; }
  .tab-personas { padding: 4px 14px; }
}

/* S18 (D-S18-6) — Organización → Reportes */
.rep-programa { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 8px; }
.rep-programa label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.rep-programa select { min-width: 120px; }
/* S20 ítem 11 — la programación por destinatario */
.rep-dest { margin: 12px 0 10px; }
.rep-dest select { min-width: 0; max-width: 100%; }
.rep-dest .link-btn { font-size: 12px; margin-left: 6px; }
.rep-general-tit { margin-top: 14px; }
.card [data-rep-canal] { margin-bottom: 12px; }
@media (max-width: 640px) {
  .rep-dest, .rep-dest tbody, .rep-dest tr, .rep-dest td { display: block; width: 100%; }
  .rep-dest thead { display: none; }
  .rep-dest tr { padding: 8px 0; border-bottom: 1px solid var(--e360-rule); }
  .rep-tabla.rep-dest td { border: 0; padding: 3px 0; }
}
.rep-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rep-tabla th, .rep-tabla td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--e360-line, #DDDCD4); }
.rep-tabla th { font-weight: 600; }
.rep-solicitudes { margin: 10px 0 0; padding-left: 18px; font-size: 12.5px; }

/* S18 (D-S18-8) — casilla "Mantener la sesión iniciada" del login */
.login-card .auth-keep { display: flex; align-items: center; gap: 8px; font-weight: 400;
                         font-size: 13px; margin: 12px 0 0; cursor: pointer; }
.login-card .auth-keep input[type="checkbox"] { width: auto; height: auto; margin: 0; padding: 0; }
/* S20 (D-S20-6) — el selector de duración que abre la casilla */

/* ── S19 · Categorías (D-S19-2..6, 18) ───────────────────────────────────────────────────── */
/* Botón con aspecto de enlace: la acción que acompaña a "escríbenos" y similares (D-S19-7). */
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--e360-deep);
  font-weight: 600; text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: var(--e360-ink); }
.cat-asesoria { margin: 18px 0 4px; font-size: 13px; color: var(--e360-ink-3); }
.cat-aviso { margin: 10px 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--e360-tint-2); }
.cat-aviso p { margin: 0 0 8px; font-size: 13px; color: var(--e360-ink-2); }
.cat-lista, .cat-historial { margin-top: 12px; border: 0.5px solid var(--e360-rule); border-radius: 10px;
  padding: 10px 13px; }
.cat-lista summary, .cat-historial summary { cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--e360-ink); }
.cat-lista .bit-list, .cat-historial .bit-list { margin-top: 8px; }
.cat-ejemplos { margin-top: 4px; font-style: italic; }
.cat-editor { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.cat-edit { border: 0.5px solid var(--e360-rule); border-radius: 10px; padding: 10px 12px; }
.cat-edit-nueva { border-color: var(--e360-deep); }
.cat-edit-fija { opacity: .8; }
.cat-asistente { border: 0.5px dashed var(--e360-rule); border-radius: 10px; padding: 10px 12px; }
.cat-propuesta { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--e360-tint-2); }
.cat-asistente-pausa { margin-top: 8px; }
.cat-razones { margin: 6px 0 0; padding-left: 18px; }
.cat-editor-pie { position: sticky; bottom: 0; background: var(--e360-paper); padding: 8px 0; }
/* ── SPEC-CONTEXTO §7.1 · Categorías como filas ──────────────────────────────────────────────
   Plano y sobrio, tokens de DESIGN_TOKENS.css (copiados arriba) y UN acento (--e360-deep) para lo
   que pide acción. Las fijas van al final en gris; las sugeridas arriba, con borde punteado. */
.cat-card { margin-bottom: 18px; }
.cat-filas { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 14px; }
.cat-fila { border: 0.5px solid var(--e360-rule); border-radius: var(--e360-radius); padding: 12px 14px;
  background: var(--e360-paper-2); }
.cat-fila-edit { border-color: var(--e360-deep); }
.cat-fila-inactiva { opacity: .65; }
.cat-fila-acciones { margin-top: 8px; align-items: center; }
.cat-fijas { margin: 0 0 18px; border: 0.5px solid var(--e360-rule); border-radius: var(--e360-radius);
  padding: 10px 13px; background: var(--e360-sand); color: var(--e360-ink-3); }
.cat-fijas summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--e360-ink-2); }
.cat-fijas .cat-fila { background: transparent; }
/* SPEC-S20 ítem 3: volver a las categorías de plantilla y su historial */
.cat-plantilla { margin: 0 0 18px; }
.cat-vueltas { list-style: none; margin: 6px 0 0; padding: 0; }
.cat-vuelta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 6px 0;
  border-top: 0.5px solid var(--e360-rule); font-size: 13px; color: var(--e360-ink-2); }
.cat-fijas .bit-item-title, .cat-fijas .bit-item-desc { color: var(--e360-ink-3); }
.cat-sugeridas { margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.cat-sugerida { border: 1px dashed var(--e360-deep); border-radius: var(--e360-radius); padding: 12px 14px;
  background: var(--e360-tint-2); }
/* SPEC-FIN-DE-SEMANA D-FS-12 — la sugerida que parece la misma que una activa. */
.cat-sug-parece { margin: 6px 0 0; font-weight: 600; color: var(--e360-deep); }
.cat-traslape { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; font-size: 13px;
  background: var(--e360-warn-bg); color: var(--e360-warn); }
.cat-form { display: flex; flex-direction: column; gap: 10px; }
.cat-ejemplos-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.cat-ejemplo { display: flex; gap: 8px; align-items: center; }
.cat-ejemplo .bit-input { flex: 1 1 auto; min-width: 0; }
.cat-switch { display: flex; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 600;
  color: var(--e360-ink); cursor: pointer; }
.cat-switch input { width: 16px; height: 16px; accent-color: var(--e360-deep); }
.cat-campos-scroll { overflow-x: auto; }
.cat-campos { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 6px; }
.cat-campos th { text-align: left; font-weight: 600; color: var(--e360-ink-3); padding: 4px 6px; }
.cat-campos td { padding: 4px 6px; vertical-align: middle; }
.cat-campos .bit-input { min-width: 90px; }
.cat-campos input[type="checkbox"] { accent-color: var(--e360-deep); }
.cat-historial .sub-h { margin-top: 10px; }
/* ── SPEC-CONTEXTO §7.2 · Contexto: Entidades y Situación ────────────────────────────────────
   Pestañas planas con el acento para la activa; tabla de entidades con scroll en su caja (nunca
   de página a 390 px); línea de tiempo vertical, vencidos con el fondo de aviso de la casa. */
.ctx-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--e360-rule); margin: 6px 0 16px; }
.ctx-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--e360-ink-3); cursor: pointer; }
.ctx-tab.on { color: var(--e360-deep); border-bottom-color: var(--e360-deep); }
.ctx-pane { display: flex; flex-direction: column; gap: 14px; }
.ctx-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ctx-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px;
  border-radius: var(--e360-radius-pill); background: var(--e360-tint); color: var(--e360-ink-2);
  font-size: 12.5px; }
.ctx-chip-x { background: none; border: 0; padding: 0 2px; font: inherit; color: var(--e360-ink-3);
  cursor: pointer; line-height: 1; }
.ctx-chip-input { flex: 1 1 160px; min-width: 0; }
.ctx-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ctx-tabla-head { display: flex; justify-content: flex-end; }
.ctx-tabla-scroll { overflow-x: auto; }
.ctx-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.ctx-tabla th { text-align: left; font-weight: 600; color: var(--e360-ink-3); padding: 6px 8px;
  border-bottom: 1px solid var(--e360-rule); }
.ctx-tabla td { padding: 8px; border-bottom: 1px solid var(--e360-rule-2); vertical-align: top; }
.ctx-fila-inactiva td { color: var(--e360-ink-4); }
.ctx-acciones { white-space: nowrap; }
.ctx-acciones .link-btn + .link-btn { margin-left: 10px; }
.ctx-sug-acciones { flex-wrap: wrap; align-items: flex-end; }
.ctx-fusion { display: flex; flex-direction: column; gap: 4px; }
.ctx-propuestas { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ctx-propuesta, .ctx-check { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }
.ctx-propuesta input, .ctx-check input { accent-color: var(--e360-deep); }
.ctx-frase { display: flex; gap: 8px; flex-wrap: wrap; }
.ctx-frase .bit-input { flex: 1 1 260px; min-width: 0; }
.ctx-alta .cat-propuesta { margin-top: 12px; }
.ctx-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--e360-rule);
  display: flex; flex-direction: column; gap: 10px; }
.ctx-evento { position: relative; border: 0.5px solid var(--e360-rule); border-radius: var(--e360-radius);
  padding: 10px 12px; background: var(--e360-paper-2); }
.ctx-evento::before { content: ""; position: absolute; left: -21px; top: 14px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--e360-deep); }
.ctx-evento-vencido { background: var(--e360-warn-bg); border-color: var(--e360-warn); }
.ctx-evento-vencido::before { background: var(--e360-warn); }
.ctx-evento-edit { border-color: var(--e360-deep); }
.ctx-evento-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.ctx-evento-fechas { font-size: 12.5px; color: var(--e360-ink-3); }
.ctx-vencido-txt { margin: 8px 0 0; font-size: 13px; color: var(--e360-warn); font-weight: 600; }
.ctx-ev-acciones .link-btn + .link-btn { margin-left: 10px; }
.ctx-cerrados .ctx-timeline { margin-top: 10px; }
/* D-S19-14: el punto del paso siguiente del checklist, centrado y fuera del contador. */
.nav-item.checklist-next::after { transform: translateY(-50%); }
.nav-item.checklist-next .count { margin-right: 14px; }

/* SPEC-S20 ítem 5: contexto de la voz, ficha de entidad */
.detail-contexto .ctx-chips { margin: 4px 0 8px; }
.ctx-chip-btn { cursor: pointer; font: inherit; border: 0.5px solid var(--e360-rule); background: var(--e360-tint);
  color: var(--e360-deep); }
.ctx-chip-btn:hover, .ctx-chip-btn:focus-visible { border-color: var(--e360-deep); }
.ctx-ent-nombre { padding: 0; text-align: left; }
.ctx-menciones { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ctx-mencion { border: 0.5px solid var(--e360-rule); border-radius: 10px; padding: 8px 10px; background: var(--e360-paper-2); }
.ctx-mencion-txt { font-weight: 600; color: var(--e360-ink); }
.ctx-mencion-acciones { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; margin-left: 8px; }
.ctx-mencion-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ficha-body { overflow-y: auto; }
.ficha-cab { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-bottom: 12px; }
.ficha-conteos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 6px 0 14px; }
.ficha-conteo { border: 0.5px solid var(--e360-rule); border-radius: 10px; padding: 10px 12px; background: var(--e360-paper-2); }
.ficha-conteo-n { font-size: 22px; font-weight: 700; color: var(--e360-deep); }
.ficha-conteo-cat { font-size: 13px; color: var(--e360-ink-2); }
.ficha-conteo-tipos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ficha-linea { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ficha-afirmacion { border-left: 2px solid var(--e360-rule); padding: 2px 0 2px 10px; }
.ficha-texto { font-size: 14px; color: var(--e360-ink); margin-top: 2px; }
/* SPEC-FIN-DE-SEMANA D-FS-7: «Parece resuelta por…» (sugerencia de cierre, en la ficha y el detalle) */
.cierre-sugerido { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px;
  padding: 8px 10px; border-radius: 8px; background: var(--e360-warn-bg); color: var(--e360-ink);
  font-size: 13px; overflow-wrap: anywhere; }
.cierre-sugerido-txt { flex: 1 1 220px; min-width: 0; }
.cierre-sugerido-acciones { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* SPEC-S20 ítem 6: dictado en los campos largos */
.dictado-campo { position: relative; display: flex; align-items: flex-start; gap: 6px; }
.dictado-campo > textarea, .dictado-campo > input { flex: 1 1 auto; min-width: 0; }
.dictado-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; border: 0.5px solid var(--e360-rule);
  background: var(--e360-paper); color: var(--e360-deep); cursor: pointer; padding: 0; }
.dictado-btn:hover, .dictado-btn:focus-visible { border-color: var(--e360-deep); }
.dictado-btn.grabando { background: var(--e360-deep); color: var(--e360-paper); border-color: var(--e360-deep);
  animation: dictado-pulso 1.2s ease-in-out infinite; }
@keyframes dictado-pulso { 50% { box-shadow: 0 0 0 6px rgba(15, 110, 86, .18); } }
@media (prefers-reduced-motion: reduce) { .dictado-btn.grabando { animation: none; } }
.cat-ejemplo .dictado-btn { width: 30px; height: 30px; }
.dictado-estado { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 80;
  max-width: calc(100vw - 32px); padding: 8px 14px; border-radius: 999px; font-size: 13px;
  background: var(--e360-ink); color: var(--e360-paper); display: none; }
.dictado-estado.visible { display: block; }
.dictado-estado[data-tipo="error"] { background: var(--e360-warn-bg); color: var(--e360-warn);
  border: 0.5px solid var(--e360-warn); }

/* S20 ítem 13 (D-S20-4) — Roster: «Importar» (secundario) junto al título; la carga por Excel
   solo aparece al abrirlo. */
.roster-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.roster-cabeza .org-block-title { margin-right: auto; }
.roster-importar { margin: 0 0 12px; }

/* SPEC-S21 ítem 3 (D-S21-3) — ícono y subtipo de una entidad en Contexto: rejilla de íconos de
   línea (el elegido con el acento, como las pestañas) y el ícono junto al nombre en la tabla. */
.ctx-field-iconos { grid-column: 1 / -1; }
.ctx-iconos { display: flex; flex-wrap: wrap; gap: 6px; }
.ctx-icono { display: inline-flex; align-items: center; justify-content: center; min-width: 36px;
  height: 36px; padding: 0 8px; border-radius: var(--e360-radius); border: 0.5px solid var(--e360-rule);
  background: var(--e360-paper-2); color: var(--e360-ink-2); font: inherit; font-size: 12.5px;
  cursor: pointer; }
.ctx-icono:hover, .ctx-icono:focus-visible { border-color: var(--e360-deep); color: var(--e360-ink); }
.ctx-icono.on { border-color: var(--e360-deep); background: var(--e360-tint); color: var(--e360-deep);
  box-shadow: inset 0 0 0 1px var(--e360-deep); }
.ctx-ent-nombre-celda { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ctx-ent-icono { display: inline-flex; color: var(--e360-deep); vertical-align: middle; }
.ctx-ent-subtipo { font-size: 12px; color: var(--e360-ink-3); }
.ficha-icono { align-self: center; }

/* SPEC-S21 ítem 4 (D-S21-4, D-S21-5) — Planta: zonas por área con su título y una rejilla de
   tarjetas planas (borde de regla, el acento al pasar, al enfocar y en la elegida). Los cuatro
   colores de estado SOLO en el punto de cada tarjeta y en la leyenda; el texto siempre en tinta.
   A 380 px, dos columnas y las zonas apiladas. Arrastrar: la tarjeta en vuelo se levanta. */
.planta { display: flex; flex-direction: column; gap: 14px; }
.planta-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: 13px; color: var(--e360-ink-2); }
.planta-leyenda li { display: inline-flex; align-items: center; gap: 7px; }
.planta-punto { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.planta-punto-rojo { background: var(--e360-crit); }
.planta-punto-ambar { background: var(--e360-warn); }
.planta-punto-verde { background: var(--e360-good); }
.planta-punto-gris { background: var(--e360-ink-4); }
.planta-zona { display: flex; flex-direction: column; gap: 8px; }
.planta-zona-titulo { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--e360-ink-2); }
/* Caso de uso Casa Solís: junto al título de un área, un botón con su punto y su resumen. */
.planta-zona-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.planta-zona-head .planta-zona-titulo { margin: 0; }
.planta-area { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 6px 12px;
  border-radius: var(--e360-radius); border: 0.5px solid var(--e360-card-border); background: var(--e360-paper-2);
  font: inherit; color: var(--e360-ink); cursor: pointer; text-align: left; min-height: 40px; }
.planta-area:hover, .planta-area.on { border-color: var(--e360-deep); }
.planta-area:focus-visible { outline: 2px solid var(--e360-deep); outline-offset: 2px; }
.planta-area.on { box-shadow: inset 0 0 0 1px var(--e360-deep); }
.planta-area-sub { font-size: 12.5px; font-weight: 500; color: var(--e360-ink-2); }
.planta-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.planta-celda { min-width: 0; }
.planta-tarjeta { position: relative; width: 100%; min-height: 76px; display: flex; align-items: center;
  gap: 10px; padding: 12px 26px 12px 12px; text-align: left; font: inherit; cursor: pointer;
  border-radius: var(--e360-radius-card); border: 0.5px solid var(--e360-card-border);
  background: var(--e360-paper-2); color: var(--e360-ink); touch-action: manipulation;
  -webkit-user-select: none; user-select: none; }
.planta-tarjeta:hover, .planta-tarjeta:focus-visible { border-color: var(--e360-deep); }
.planta-tarjeta:focus-visible { outline: 2px solid var(--e360-deep); outline-offset: 2px; }
.planta-tarjeta.on { border-color: var(--e360-deep); box-shadow: inset 0 0 0 1px var(--e360-deep); }
.planta-tarjeta.arrastrando { opacity: .85; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); cursor: grabbing;
  border-color: var(--e360-deep); }
.planta-tarjeta-ico { flex: 0 0 auto; display: inline-flex; color: var(--e360-deep); }
.planta-tarjeta-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.planta-tarjeta-nombre { font-size: 14.5px; font-weight: 700; color: var(--e360-ink);
  overflow-wrap: anywhere; }
.planta-tarjeta-sub { font-size: 12.5px; color: var(--e360-ink-2); overflow-wrap: anywhere; }
.planta-tarjeta .planta-punto { position: absolute; top: 12px; right: 12px; }
.planta-hint { margin: 0; }
/* En Planta todo texto ≥ 4.5:1 (AV-S21-4): la nota y la pista de la casa van en tinta 2 (en tinta 3
   sobre la arena quedaban a 3.9:1). */
.planta .view-note, .planta .bit-hint { color: var(--e360-ink-2); }
.ficha-panel-nombre { margin: 2px 0 10px; font-size: 18px; color: var(--e360-ink); }
@media (max-width: 480px) {
  .planta-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .planta-tarjeta { flex-direction: column; align-items: flex-start; min-height: 96px; padding: 10px 22px 10px 10px; }
}

/* SPEC-S21 ítem 5 (D-S21-6) — Planta como vista sencilla de Operación y Seguimiento: el bloque
   «Resumen» (tres números enlazados) arriba y la ficha de la tarjeta tocada debajo de la rejilla
   (la sencilla no tiene panel derecho). Mismo estilo plano; texto en tinta. */
.vs-resumen { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.vs-resumen-titular { font-size: 16px; color: var(--e360-ink); }
.vs-resumen-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.vs-resumen-num { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; text-decoration: none;
  border-radius: var(--e360-radius-card); border: 0.5px solid var(--e360-card-border);
  background: var(--e360-paper-2); color: var(--e360-ink); }
.vs-resumen-num:hover, .vs-resumen-num:focus-visible { border-color: var(--e360-deep); }
.vs-resumen-num .n { font-size: 26px; font-weight: 700; color: var(--e360-ink); line-height: 1.1; }
.vs-resumen-num .l { font-size: 14px; font-weight: 600; color: var(--e360-ink); }
.vs-resumen-num .d { font-size: 12.5px; color: var(--e360-ink-2); }
.planta-sect { margin: 4px 0 8px; }
/* Todo texto de la sencilla de Planta ≥ 4.5:1 (AV-S21-5): sus etiquetas de sección en tinta 2. */
.vs-resumen .vs-sect-label, .vs-sect-label.planta-sect { color: var(--e360-ink-2); }
.planta-detalle { margin-top: 18px; padding: 14px 16px; border-radius: var(--e360-radius-card);
  border: 0.5px solid var(--e360-card-border); background: var(--e360-paper-2); }
/* SPEC-FIN-DE-SEMANA D-FS-24 — la ficha de la máquina en el centro, a lo ancho, debajo de las tarjetas. */
.planta-detalle-centro { width: 100%; box-sizing: border-box; }
.ficha-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ficha-panel-cerrar { min-width: 36px; min-height: 36px; border: 0; border-radius: 8px; background: transparent;
                      font-size: 20px; line-height: 1; color: var(--e360-ink-3); cursor: pointer; }
.ficha-panel-cerrar:hover, .ficha-panel-cerrar:focus-visible { background: var(--e360-tint-2); color: var(--e360-ink); outline: none; }
.ficha-afirmacion-clic { cursor: pointer; border-radius: 0 6px 6px 0; }
.ficha-afirmacion-clic:hover, .ficha-afirmacion-clic:focus-visible { background: var(--e360-tint-2); outline: none; }
.ficha-afirmacion-clic.on { border-left-color: var(--e360-deep); background: var(--e360-tint-2); }
@media (max-width: 480px) {
  .vs-resumen-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .vs-resumen-num { padding: 10px; }
  .vs-resumen-num .n { font-size: 22px; }
}

/* SPEC-S21 ítem 6 (D-S21-7) — «Revisar»: plegada al final de Entidades, una fila por candidata
   con su motivo. */
.ctx-revisar summary { cursor: pointer; }
.ctx-revisar-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ctx-revisar-fila { display: flex; align-items: center; gap: 10px; padding: 8px 10px; flex-wrap: wrap;
  border: 0.5px solid var(--e360-rule); border-radius: var(--e360-radius); background: var(--e360-paper-2); }
.ctx-revisar-txt { flex: 1 1 200px; min-width: 0; font-size: 13.5px; color: var(--e360-ink); }
.ctx-revisar-motivo { display: block; font-size: 12.5px; color: var(--e360-ink-2); }

/* SPEC-S22 ítem 2 — «Nueva convocatoria»: el formulario de los cinco campos del portal y, al lado,
   la vista previa del portal a 360 px (portal-vista-previa.html). En pantallas angostas, apilados. */
.modal.modal-conv { max-width: 940px; }
.conv-nueva-card { max-width: 520px; }
/* «Proponer con el asistente» y «Llenar a mano» lado a lado (tarjeta y pie del modal): el
   margin-top de .btn-secondary (pensado para la pantalla de suspensión) dejaba el segundo más
   abajo. Mismo cuerpo de letra que .bit-submit para que midan igual. */
.conv-nueva-card .bit-actions .btn-secondary,
#convWizardFoot .btn-secondary { margin-top: 0; font-size: 13.5px; }
#convWizardFoot { align-items: center; }
.conv-editar-nota { margin: 0 0 12px; font-weight: 600; }
.conv-nueva { display: grid; grid-template-columns: minmax(0, 1fr) 362px; gap: 22px; align-items: start; }
.conv-nueva-campos { min-width: 0; }
.conv-nueva-campos .bit-field { margin-bottom: 12px; }
.conv-pistas { border: 0; padding: 0; margin: 0 0 12px; min-width: 0;
               display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.conv-pistas legend { padding: 0; margin-bottom: 6px; }
.conv-pistas .bit-hint { grid-column: 1 / -1; margin: 0; }
.conv-cuenta { text-align: right; margin: 3px 0 0; }
.conv-check { display: flex; gap: 8px; align-items: flex-start; }
.conv-check input { margin-top: 3px; }
.conv-nueva-previa .bit-label { margin-bottom: 6px; }
.conv-previa-marco { display: block; width: 362px; max-width: 100%; height: 720px;
                     border: 1px solid var(--e360-rule); border-radius: 16px; background: var(--e360-sand); }
@media (max-width: 880px) {
  .conv-nueva { grid-template-columns: minmax(0, 1fr); }
  .conv-previa-marco { margin: 0 auto; height: 600px; }
}

/* SPEC-S22 ítem 5 — el enlace del portal de una convocatoria y su QR (lista y «Mi organización»). */
.conv-enlace { margin-top: 8px; min-width: 0; }
.conv-enlace-url { display: block; font-size: 13px; color: var(--e360-deep); overflow-wrap: anywhere; }
.conv-enlace-acciones { margin-top: 6px; align-items: center; flex-wrap: wrap; }
.conv-enlace-nota { margin: 6px 0 0; }
.conv-enlace + .conv-enlace { margin-top: 12px; }
.conv-enlace-etiqueta { margin: 0 0 2px; font-weight: 600; }
.conv-enlace-org { padding: 10px 0; border-top: 0.5px solid var(--e360-rule-2); }
.conv-enlace-org:first-of-type { border-top: 0; }

/* SPEC-UX-DENISE D-DEN-12 — la tarjeta de alerta: una sola etiqueta (la severidad), el origen en
   texto y «Marcar como resuelta». */
.alert .origenes { display: flex; flex-wrap: wrap; gap: 2px 0; margin-top: 4px; font-size: 12px; color: var(--e360-ink-2); }
.alert .origen-sep { color: var(--e360-ink-3); white-space: pre; }
.alert .alerta-resolver { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600;
  color: var(--e360-deep); text-decoration: underline; cursor: pointer; }
.alert .alerta-resolver:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.alert .alerta-resuelta-cuando { margin-top: 4px; font-size: 12px; color: var(--e360-ink-2); }
.alertas-pie { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
/* SPEC-UX-DENISE D-DEN-10 — el aviso de resumen desactualizado, a la vista plegado o no. */
.ri-aviso { margin-top: 10px; padding: 8px 12px; border-radius: var(--e360-radius); background: var(--e360-warn-bg);
  color: var(--e360-warn); font-size: 13px; }
.ri-aviso .link-btn { color: inherit; font-weight: 600; }
.ri-card .ri-toggle { margin-top: 8px; }
/* SPEC-UX-DENISE D-DEN-19 — la sigla ARCO con su explicación al pasar el mouse o enfocar. */
abbr.arco { text-decoration: underline dotted; cursor: help; }
/* SPEC-UX-DENISE D-DEN-2 — el QR del servicio en el Resumen sin voces. */
.resumen-vacio-qr { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 12px; }
.resumen-vacio-qr .reg-qr-img { width: 132px; height: 132px; border-radius: var(--e360-radius); background: #fff; padding: 6px; }
/* SPEC-UX-DENISE D-DEN-6 — «Importar desde Excel», destacado arriba del formulario manual. */
.roster-importar-destacado { border-left: 3px solid var(--e360-deep); }
.roster-importar-titulo { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--e360-ink); }
.roster-manual-nota { margin-top: 14px; }

/* ============ SPEC-UX-DENISE D-DEN-7 (S23): «Retomar el recorrido» ============
   Cerrar un recorrido a medias (clic fuera, la X o Esc) deja este botón fijo encima del de
   «Reportar mejora» (.fab): abajo a la izquierda caería sobre el chip de usuario del pie del menú
   (la lección de S20, .sp-bar). Su × lo descarta. */
.tour-retomar {
  position: fixed; right: 18px; bottom: 72px; z-index: 41;
  display: inline-flex; align-items: center; gap: 2px;
  max-width: calc(100vw - 36px);
  background: var(--e360-paper); color: var(--e360-ink);
  border: 1px solid var(--e360-deep); border-radius: 24px;
  box-shadow: 0 8px 24px rgba(29, 58, 49, .18);
}
.tour-retomar-btn {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  padding: 9px 6px 9px 14px; background: none; border: 0; border-radius: 24px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--e360-deep); cursor: pointer;
}
.tour-retomar-btn span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-retomar-btn .tour-step-icon svg { width: 14px; height: 14px; }
.tour-retomar-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-right: 4px; flex: none;
  background: none; border: 0; border-radius: 50%; color: var(--e360-ink-3, var(--e360-ink)); cursor: pointer;
}
.tour-retomar-btn:hover, .tour-retomar-x:hover { background: var(--e360-tint-2); }

/* SPEC-UX-DENISE D-DEN-14 (S23): Facturación, la tarjeta del plan. */
.fact-plan { flex-direction: column; align-items: stretch; gap: 4px; }
.fact-plan-nombre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 16px; }

/* ── SPEC-UX-DENISE-2 (S24) · Cubo A ─────────────────────────────────────────────────────── */
/* D-DEN2-6: la frase original arriba, la paráfrasis debajo, más chica. */
.voice-original { font-style: normal; }
.voice-parafrasis { font-size: 12.5px; color: var(--e360-ink-3); line-height: 1.45; margin-top: 4px; }
.badge-corregida { background: var(--e360-surface-2, #f1f3f2); color: var(--e360-ink-2);
  border: 1px dashed var(--e360-rule); }
.voces-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 12px; }
.voces-barra .voces-buscar { flex: 1 1 220px; min-width: 0; }
.voces-barra .bit-filter-sel { flex: 0 1 auto; max-width: 100%; }
.voces-ver-ocultas { display: inline-flex; gap: 6px; align-items: center; font-size: 13px;
  color: var(--e360-ink-2); white-space: nowrap; }
.voces-a-temas { font-size: 13px; color: var(--e360-deep); font-weight: 600; white-space: nowrap; }
.chip-filtro { border: 1px solid var(--e360-rule); background: var(--e360-surface); border-radius: 999px;
  padding: 3px 10px; font-size: 12.5px; cursor: pointer; color: var(--e360-ink-2); }
.view-filtros { font-size: 12.5px; color: var(--e360-ink-3); margin: -4px 0 8px; }
.detail-original { font-style: normal; }
.detail-parafrasis { font-size: 13px; color: var(--e360-ink-2); line-height: 1.45; margin: 6px 0 2px; }
.detail-parafrasis-k { font-weight: 600; color: var(--e360-ink-3); margin-right: 4px; }
.detail-procedencia { font-size: 12.5px; color: var(--e360-ink-3); margin: 6px 0 10px; }
/* D-DEN2-1 / D-DEN2-4: corregir y dar seguimiento desde el detalle. */
.detail-correccion { margin: 12px 0; border: 1px solid var(--e360-rule); border-radius: 8px;
  padding: 8px 10px; background: var(--e360-surface); }
.detail-correccion > summary { cursor: pointer; font-weight: 600; color: var(--e360-deep); }
.detail-correccion[open] > summary { margin-bottom: 8px; }
.alerta-seg textarea { width: 100%; min-height: 64px; resize: vertical; }
.alerta-asignacion { font-size: 12.5px; color: var(--e360-ink-2); margin-top: 4px; }
.alerta-nota { color: var(--e360-ink-3); }
.origen-k { font-weight: 600; color: var(--e360-ink-3); margin-right: 2px; }
.alertas-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
/* D-DEN2-5: la campana con «Pendiente», «Novedades» y dos enlaces al pie. */
.notif-footer { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between; }
.notif-critica .notif-ticket-check { color: var(--e360-crit); font-weight: 700; }
/* D-DEN2-7: selección múltiple y páginas de «Por aprobar»; «Revocar» como acción secundaria. */
.reg-lote { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 10px; }
.reg-sel, .reg-sel-todas { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.reg-paginas { display: flex; gap: 10px; align-items: center; justify-content: center; }
.link-btn-peligro { color: var(--e360-crit); font-weight: 500; font-size: 12.5px; }
/* D-DEN2-3 / D-DEN2-30: tarjetas que llevan a sus voces, y el periodo que calculan. */
a.kpi-link { display: block; color: inherit; text-decoration: none; }
a.kpi-link:hover, a.kpi-link:focus-visible { border-color: var(--e360-deep); }
.kpi-periodo { font-size: 11.5px; color: var(--e360-ink-3); margin-top: 6px; }
a.dl-link { color: inherit; text-decoration: none; border-radius: 6px; }
a.dl-link:hover .dl-label, a.dl-link:focus-visible .dl-label { text-decoration: underline; }
.donut a, .sev-svg a { cursor: pointer; }
.voces-semana { margin-top: 12px; }
.voces-semana-svg { display: block; max-width: 100%; color: var(--e360-deep); }
.tema-marcado { outline: 2px solid var(--e360-deep); outline-offset: 2px; border-radius: 8px; }

/* ── SPEC-UX-DENISE-2 (S24) · Cubo B ─────────────────────────────────────────────────────── */
/* D-DEN2-9 / 10 / 11: Categorías por giro, volumen y reclasificación. */
.giro-card, .reclas-card { margin-bottom: 14px; }
.giro-card > summary { cursor: pointer; list-style: revert; }
.giro-prop { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0;
  border-bottom: 1px solid var(--e360-rule); }
.giro-prop span { display: flex; flex-direction: column; gap: 2px; }
.reclas-destacado { border-color: var(--e360-deep); }
.cat-voces { background: var(--e360-surface-2, #f1f3f2); color: var(--e360-ink-2); }
.cat-otro-aviso { border-left: 3px solid var(--e360-warn, #b7791f); padding: 6px 10px; margin: 8px 0 12px;
  font-size: 13px; color: var(--e360-ink-2); background: var(--e360-surface); }
.cat-fijas-lista { margin: 10px 0 4px; }
/* D-DEN2-13: temas de riesgo de Feedback organizacional. */
.temas-riesgo { list-style: none; margin: 0; padding: 0; }
.temas-riesgo li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--e360-rule); font-size: 13.5px; }
/* D-DEN2-14: Operación coherente. */
.tab-repetido { font-size: 12px; color: var(--e360-ink-2); background: var(--e360-surface-2, #f1f3f2);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.tab-nota-menu { font-size: 12.5px; color: var(--e360-ink-3); margin: 4px 0 0; }

/* ── SPEC-UX-DENISE-2 (S24) · Cubo C ─────────────────────────────────────────────────────── */
/* D-DEN2-18: el embudo de la sede. */
.sede-embudo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.sede-embudo-paso { display: flex; flex-direction: column; align-items: center; min-width: 64px;
  padding: 6px 10px; border: 1px solid var(--e360-rule); border-radius: 8px; background: var(--e360-surface); }
.sede-embudo-n { font-size: 20px; font-weight: 700; color: var(--e360-ink); }
.sede-embudo-flecha { color: var(--e360-ink-3); font-size: 18px; }
/* D-DEN2-19: la acción destructiva se ve como tal. */
.btn-peligro { background: none; border: 1px solid var(--e360-crit); color: var(--e360-crit);
  border-radius: 8px; padding: 7px 12px; font: inherit; font-weight: 600; cursor: pointer; }
.btn-peligro:hover { background: var(--e360-crit-bg, #fcebeb); }
.sede-guardar { align-items: center; flex-wrap: wrap; }

/* ============ SPEC-UX-DENISE-2 Cubo D ============ */
/* D-DEN2-25: el selector de archivo propio (V.archivoCampo). El input real queda oculto pero vivo:
   lo abre su <label> y el foco del teclado se ve en el botón. */
.archivo-campo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.archivo-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.archivo-btn { cursor: pointer; }
.archivo-input:focus-visible + .archivo-btn { outline: 2px solid var(--e360-deep); outline-offset: 2px; }
.archivo-input:disabled + .archivo-btn { opacity: .5; cursor: not-allowed; }
.archivo-nombre { font-size: 13px; color: var(--e360-mute); overflow-wrap: anywhere; min-width: 0; }
.soporte-vias { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--e360-rule); }
.soporte-correo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 13.5px; }
.soporte-correo a[data-soporte-correo] { font-weight: 600; color: var(--e360-deep); overflow-wrap: anywhere; }
/* El botón flotante lleva su rótulo también en pantallas angostas (antes quedaba un círculo sin
   texto): ícono de comentario + «Ayuda y sugerencias», más compacto. */
@media (max-width: 768px) {
  .fab { width: auto; height: auto; padding: 9px 14px; border-radius: 22px; font-size: 12.5px; }
  .fab .fab-lbl { display: inline; }
}
.help-buscar { margin: 12px 0 4px; }
/* D-DEN2-24: Temas. La barra se apila por severidad; junto al % van las afirmaciones y la
   variación contra el periodo anterior. */
.theme-row { grid-template-columns: 160px 1fr auto; }
.theme-track.apilada { display: flex; }
.theme-seg { height: 100%; flex: 0 0 auto; }
.theme-seg.c { background: var(--e360-crit); }
.theme-seg.w { background: var(--e360-warn); }
.theme-seg.b { background: var(--e360-cat-other); }   /* baja: neutro, no «positivo» */
.tleg-dot.b { background: var(--e360-cat-other); }
.theme-num { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 6px; min-width: 48px; white-space: nowrap; }
.theme-cnt { font-weight: 500; color: var(--e360-mute); font-size: 12px; }
.theme-cnt::before { content: "("; }
.theme-cnt::after { content: ")"; }
.theme-delta { font-size: 11.5px; font-weight: 600; color: var(--e360-ink-2); }
.theme-delta.igual { color: var(--e360-mute); }
.temas-orden { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--e360-ink-2); margin: 6px 0 2px; }
.temas-orden select { width: auto; min-width: 0; }
@media (max-width: 768px) {
  .theme-row { grid-template-columns: minmax(0, 1fr) auto; }
  .theme-row .theme-track { grid-column: 1 / -1; grid-row: 2; }
}
/* D-DEN2-26: el aviso del correo detenido y el nombre que pide el primer ingreso. */
.acct-pw-msg.warn { color: var(--e360-ink-2); background: var(--e360-tint-2); border-left: 3px solid var(--e360-warn); padding: 8px 10px; border-radius: 6px; }
.pedir-nombre { background: var(--e360-paper); border: 1px solid var(--e360-rule); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.pedir-nombre-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pedir-nombre-fila .bit-input { flex: 1 1 200px; min-width: 0; margin: 0; }
.pedir-nombre .bit-hint { margin: 2px 0 8px; }
.pedir-nombre-pi { margin-top: 14px; }
/* D-DEN2-27: la muestra de color de cada modo, y el interruptor de vista señalado desde Aspecto. */
.mode-sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--e360-rule); flex: 0 0 14px; }
.view-toggle.senalado { box-shadow: 0 0 0 3px var(--e360-warn); border-radius: 12px; transition: box-shadow .2s; }
/* D-DEN2-28/29: qué puede cada rol al invitar, por qué una fila no tiene «Quitar». */
.org-roles-hint { margin: 0 0 10px; padding-left: 18px; font-size: 12.5px; color: var(--e360-ink-2); line-height: 1.45; }
.org-roles-hint li { margin-bottom: 3px; }
.org-sin-quitar { margin-top: 4px; font-size: 12px; }
.org-invite-link .bit-submit { flex: 0 0 auto; }
/* D-DEN2-25: con el rótulo, el botón flotante es más ancho; el contenido deja espacio al final para
   que lo último de una lista (o su menú «···») se pueda llevar por encima de él. */
@media (max-width: 768px) {
  .content { padding-bottom: 104px; }
}

/* Daniel, 2026-11-05 (Salinas #6): los filtros de Planta, en una fila que se acomoda en celular. */
.planta-filtros { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 12px 0 4px; }
.planta-filtro { display: flex; flex-direction: column; gap: 2px; min-width: 130px; flex: 1 1 150px; max-width: 240px; }
.planta-filtro-l { font-size: 12px; color: var(--e360-ink-2); }
.planta-filtro .bit-input { margin: 0; }
@media (max-width: 560px) { .planta-filtro { max-width: none; flex-basis: calc(50% - 6px); } }