/* ===========================================================================
   Hospital Ángeles · torre de control — hoja de estilo de la demo (hospital-diseno, 30 sep 2026).
   Parte del sistema de diseño del producto (conocimiento/03-tecnico/sistema-diseno.md: tokens angeles-*, ink-*,
   estados, Geist, «ejecutivo-contemporáneo»): la demo y la app de Railway se leen como un solo producto.
   Manual para quien construye pantallas: /kit/.

   LA REGLA DEL MATERIAL
   La torre es papel clínico sobre un lienzo frío: superficies blancas y opacas, canto de 1 px y sombra corta.
   1. La transparencia tiene oficio, no adorno: sólo la lleva lo que flota sobre contenido que se mueve (la cabeza
      del escritorio, la barra del teléfono y sus pestañas al deslizar, el velo detrás de una hoja). Ahí es vidrio
      esmerilado: blanco al 86 % con desenfoque quieto. Cuanto más cerca de ti flota algo, más opaco: las hojas y
      los menús van sólidos. Ninguna tarjeta es de vidrio.
   2. Sin reflejos, halos, neón, orbes ni degradados de color. Los únicos dos degradados son del producto: la franja
      de 3 px arriba de todo y el sello «A» de Ángeles.
   3. El color con matiz es un mensaje. Azul institucional = la marca y la acción principal (un botón primario por
      pantalla). El semáforo (verde · azul · amarillo · rojo · gris) sólo dice lo que decidió un SLA o una
      criticidad, y siempre lleva su punto y su palabra. Ciruela = «decide una persona», con su rombo y su palabra;
      nada más es ciruela. Los horizontes (demo · simulado · siguiente escalón · visión) van en tinta, nunca en color.
   4. Texto chico en color de estado usa la variante -ink (AA ≥ 4.5:1); el tono base queda para puntos, íconos y
      bordes. Toda cifra va en números tabulares, con su etiqueta y su denominador.
   5. Se anima sólo transform y opacity (WebKit); los filtros quedan quietos. Respeta prefers-reduced-motion.
   6. Teléfono = de prisa, junto al equipo: cuerpo de 16 px, controles de ≥ 44 px, una acción principal al alcance
      del pulgar. Escritorio = de un vistazo, de pie: cifras grandes, aire, una columna de lectura.
   =========================================================================== */

@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---- Tokens: los nombres son los del producto (globals.css); no se renombran ------------------------------ */
:root {
  /* Marca: azul institucional (aproximación; se ajusta con el brand kit oficial de Hospital Ángeles) */
  --angeles-900: #0A2A66; --angeles-800: #0B3B8C; --angeles-700: #1453B0; --angeles-500: #2D7FF9;
  --angeles-300: #7FB0FB; --angeles-200: #BBD3F7; --angeles-100: #DDE9FC; --angeles-50: #EEF4FE;
  /* Tinta y superficies. ink-500 es nuestro: etiquetas chicas que deben leerse (AA); ink-400 sólo íconos y ayudas. */
  --ink-900: #0A1B33; --ink-700: #2B3A50; --ink-600: #46556B; --ink-500: #5B6A80; --ink-400: #8595A8; --ink-300: #B4BFCC;
  --line: #E3E8EF; --line-2: #D3DBE5; --muted: #EEF2F7; --card: #FFFFFF; --canvas: #F6F8FB;
  /* Estados del producto (+ variante -ink para texto chico) */
  --success: #0E9F6E; --success-ink: #0B7048; --warning: #C77700; --warning-ink: #8F5600;
  --info: #1453B0; --info-ink: #1453B0; --danger: #D03544; --danger-ink: #B02A38; --neutral: #64748B; --neutral-ink: #46556B;
  /* El semáforo de la demo es el de estados: sólo SLA o criticidad, siempre con palabra */
  --verde: var(--success); --verde-ink: var(--success-ink); --azul: var(--info); --azul-ink: var(--info-ink);
  --amarillo: var(--warning); --amarillo-ink: var(--warning-ink); --rojo: var(--danger); --rojo-ink: var(--danger-ink);
  --gris: var(--neutral); --gris-ink: var(--neutral-ink);
  /* «Decide una persona»: ciruela. Fuera de los cinco matices del semáforo y del azul de marca; sin significado de
     alarma en un hospital (los monitores usan rojo, amarillo y cian, IEC 60601-1-8). Siempre con rombo y palabra. */
  --humano: #7B2F8E; --humano-ink: #6A2479; --humano-tinte: #F5EDF8; --humano-linea: #E2CDEA;
  /* Tipografía */
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Forma: la escala del producto (--radius 0.7rem) */
  --radius: 0.7rem;
  --r-sm: calc(var(--radius) * .6); --r-md: calc(var(--radius) * .8); --r-lg: var(--radius);
  --r-xl: calc(var(--radius) * 1.4); --r-2xl: calc(var(--radius) * 1.8); --r-full: 999px;
  /* Elevación (tokens del producto; nada de sombras sueltas) */
  --shadow-card: 0 1px 2px rgba(10,27,51,.06);
  --shadow-float: 0 4px 16px -4px rgba(10,27,51,.10);
  --shadow-overlay: 0 12px 40px -8px rgba(10,27,51,.18);
  /* Vidrio (regla 1): sólo lo que flota sobre contenido que se mueve */
  --vidrio: rgba(255,255,255,.94); --vidrio-desenfoque: saturate(1.6) blur(20px);
  --velo: rgba(10,27,51,.38);
  /* Foco: anillo de 3 px */
  --anillo: 0 0 0 3px rgba(45,127,249,.45);
  /* Movimiento */
  --suave: cubic-bezier(.2,.7,.2,1); --sale: cubic-bezier(.4,0,.9,.4); --d-1: .14s; --d-2: .24s; --d-3: .38s;
  /* Medidas */
  --lado: 256px; --alto-cabeza: 64px; --orilla: 16px; --ancho-lectura: 1180px;
  --alto-barra-movil: 56px; --alto-pestanas: 64px;
  --abajo: env(safe-area-inset-bottom, 0px); --arriba: env(safe-area-inset-top, 0px);
}

/* ---- Nombres heredados de Pórtico: las héroes de esta noche los usan (con respaldo). Mismos nombres, valores del
   hospital. Para pantallas nuevas, usa los nombres del producto de arriba; éstos se quedan sólo como puente. ---- */
:root {
  --marca: var(--angeles-800); --marca-luz: var(--angeles-300); --activo: var(--angeles-800); --indicador: var(--angeles-50);
  --tinta: var(--ink-900); --texto: var(--ink-600); --etiqueta: var(--ink-500); --tenue: var(--ink-500);
  --luz: var(--card); --base: var(--canvas); --tecali: var(--card); --tecali-2: var(--card); --tecali-hundido: var(--canvas);
  --linea: var(--line); --linea-2: var(--line-2); --canto: rgba(255,255,255,.8);
  --sombra: var(--shadow-card); --sombra-alta: var(--shadow-float);
  --primario-bg: var(--angeles-800); --primario-fg: #fff; --secundario-bg: var(--angeles-50);
  --persona: var(--humano); --persona-luz: var(--humano-linea); --acento: var(--humano); --halo-persona: 0 0 0 4px rgba(123,47,142,.16);
  --barra-mat: var(--vidrio); --hoja-mat: var(--card);
  --r-tarjeta: var(--r-xl); --r-fila: var(--r-lg); --r-boton: var(--r-lg); --resorte: cubic-bezier(.3,1.35,.5,1);
  --g0: #0A1B33; --g1: #0E1F38; --g2: #16263F; --g3: #22324A; --g4: #34445C; --g5: #46556B;
  --s0: #8595A8; --s1: #B4BFCC; --s2: #D3DBE5; --s3: #E3E8EF; --w: #F6F8FB;
}

/* ---- El cascarón: claro en las dos superficies (index.html arranca oscuro) -------------------------------- */
html[data-superficie] { color-scheme: light; }
html[data-superficie="escritorio"] body, html[data-superficie="escritorio"] #telefono,
html[data-superficie="telefono"] #telefono { background: var(--canvas); color: var(--ink-900); }
html[data-superficie] body { font-family: var(--sans); }
html[data-superficie="telefono"] body { background: #E9EEF5; }
@media (min-width: 600px) and (min-height: 640px) {
  html[data-superficie="telefono"] body {
    background: radial-gradient(120% 90% at 50% 0%, #F6F8FB 0%, #E3EAF3 60%, #D7E0EC 100%); }
  html[data-superficie="telefono"] #telefono {
    box-shadow: 0 0 0 10px #0E1A2B, 0 0 0 11px #2B3A50, 0 50px 110px -30px rgba(10,27,51,.55); }
}

/* ---- Base de la torre ----------------------------------------------------------------------------------- */
.t-caja { container: torre / inline-size; min-height: 100%; }
.torre { min-height: 100%; background: var(--canvas); color: var(--ink-900);
  font: 400 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01' 0; text-rendering: optimizeLegibility; }
.torre *, .torre *::before, .torre *::after { box-sizing: border-box; }
:where(.torre) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
:where(.torre) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
:where(.torre) :where(ul, ol) { list-style: none; }
.torre :focus-visible { outline: none; box-shadow: var(--anillo); border-radius: var(--r-md); }
.torre img, .torre svg { display: block; }
.torre .tnum, .torre .c-val, .torre .valor, .torre time { font-variant-numeric: tabular-nums; }
.torre .mono, .torre code, .torre kbd { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }
.torre .oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.torre .eyebrow, .torre .b-eyebrow { font: 500 11px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-500); }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.franja { position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 30; pointer-events: none;
  background: linear-gradient(90deg, var(--angeles-800), var(--angeles-500) 50%, var(--angeles-800)); }

/* ---- La leyenda global y el horizonte ------------------------------------------------------------------- */
.leyenda { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--r-full);
  background: var(--muted); color: var(--ink-600); font: 600 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.leyenda::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--ink-400); transform: rotate(45deg); }
.leyenda small { font: 500 10.5px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-500); }

/* El horizonte: cuatro rayas en tinta, tantas llenas como lejos de hoy (demo 1 · simulado 2 · escalón 3 · visión 4). */
.horizonte { display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 9px 0 8px; border: 1px solid var(--line-2);
  border-radius: var(--r-full); background: var(--card); color: var(--ink-600); font: 600 10px/1 var(--mono);
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.horizonte .h-rayas { display: inline-grid; grid-template-columns: repeat(4, 3px); gap: 2px; height: 9px; }
.horizonte .h-rayas i { border-radius: 1px; background: var(--line-2); }
.horizonte[data-h="demo"] .h-rayas i:nth-child(-n+1),
.horizonte[data-h="simulado"] .h-rayas i:nth-child(-n+2),
.horizonte[data-h="escalon"] .h-rayas i:nth-child(-n+3),
.horizonte[data-h="vision"] .h-rayas i:nth-child(-n+4) { background: var(--ink-600); }
.horizonte[data-h="vision"] { border-style: dashed; }

/* ---- Semáforo y persona: punto + palabra; rombo + palabra ----------------------------------------------- */
.sem { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--gris); }
.sem.verde { background: var(--verde); } .sem.azul { background: var(--azul); } .sem.amarillo { background: var(--amarillo); }
.sem.rojo { background: var(--rojo); } .sem.gris { background: var(--gris); }
.sem.humano, .rombo { width: 8px; height: 8px; border-radius: 1.5px; background: var(--humano); transform: rotate(45deg); }
.estado { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border-radius: var(--r-full);
  font: 500 12px/1 var(--sans); white-space: nowrap; background: rgba(100,116,139,.12); box-shadow: inset 0 0 0 1px rgba(100,116,139,.2); color: var(--gris-ink); }
.estado .sem { width: 6px; height: 6px; }
.estado[data-estado="verde"] { background: rgba(14,159,110,.12); box-shadow: inset 0 0 0 1px rgba(14,159,110,.22); color: var(--verde-ink); }
.estado[data-estado="azul"] { background: rgba(20,83,176,.10); box-shadow: inset 0 0 0 1px rgba(20,83,176,.2); color: var(--azul-ink); }
.estado[data-estado="amarillo"] { background: rgba(199,119,0,.12); box-shadow: inset 0 0 0 1px rgba(199,119,0,.24); color: var(--amarillo-ink); }
.estado[data-estado="rojo"] { background: rgba(208,53,68,.10); box-shadow: inset 0 0 0 1px rgba(208,53,68,.22); color: var(--rojo-ink); }
.estado[data-estado="humano"] { background: var(--humano-tinte); box-shadow: inset 0 0 0 1px var(--humano-linea); color: var(--humano-ink); }
.estado[data-estado="humano"] .sem { width: 6px; height: 6px; }

/* Ángeles AI: su firma (destello + nombre). La IA informa; nunca decide. */
.marca-ia { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px 0 5px; border-radius: var(--r-full);
  background: var(--angeles-50); box-shadow: inset 0 0 0 1px var(--angeles-200); color: var(--angeles-800);
  font: 600 11px/1 var(--sans); letter-spacing: .01em; vertical-align: middle; white-space: nowrap; }
.marca-ia .ico { width: 12px; height: 12px; stroke-width: 2; }
.etiqueta-ia { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-sm); background: var(--muted);
  color: var(--ink-700); font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* ---- Botones --------------------------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--card); color: var(--ink-900);
  font: 500 14px/1.2 var(--sans); white-space: nowrap; transition: background var(--d-1), border-color var(--d-1), box-shadow var(--d-1); }
.torre .btn { border: 1px solid var(--line-2); }
.btn:hover { background: var(--angeles-50); border-color: var(--angeles-200); }
.btn:active { transform: translateY(1px); }
.btn .ico { width: 17px; height: 17px; }
.btn.primario, .torre .btn.primario { background: var(--angeles-800); border-color: var(--angeles-800); color: #fff; box-shadow: var(--shadow-card); }
.btn.primario:hover { background: var(--angeles-700); border-color: var(--angeles-700); }
.btn.humano, .torre .btn.humano { background: var(--card); border-color: var(--humano-linea); color: var(--humano-ink); }
.btn.fantasma, .torre .btn.fantasma { border-color: transparent; background: transparent; color: var(--angeles-800); padding: 0 8px; }
.btn.fantasma:hover { background: var(--angeles-50); }
.btn.ancho { width: 100%; }
.enlace { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; color: var(--angeles-800); font: 500 13px/1.3 var(--sans); }
.enlace .ico { width: 15px; height: 15px; transition: transform var(--d-1) var(--suave); }
.enlace:hover .ico { transform: translateX(2px); }
.botonera { display: flex; flex-wrap: wrap; gap: 8px; }
.botonera.en-pila { flex-direction: column; align-items: stretch; }

/* ============================ ESCRITORIO: barra lateral + cabeza + contenido ancho ============================ */
.t-esc { position: relative; display: grid; grid-template-columns: var(--lado) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.t-lado { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 6px;
  background: var(--card); border-right: 1px solid var(--line); padding: 18px 14px 14px; overflow-y: auto; z-index: 5; }
.t-marca { display: flex; align-items: center; gap: 11px; padding: 4px 8px 12px; border-radius: var(--r-lg); }
.t-marca .sello { width: 38px; height: 38px; flex: none; }
.t-marca b { display: block; font: 600 17px/1.1 var(--sans); letter-spacing: -.01em; color: var(--angeles-900); }
.t-marca small { display: block; margin-top: 3px; font: 500 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.t-hosp { display: flex; align-items: center; gap: 8px; margin: 0 4px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--canvas); color: var(--ink-700); font: 500 13px/1.2 var(--sans); }
.t-hosp .ico { width: 16px; height: 16px; color: var(--angeles-800); }
.t-hosp span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-hosp em { font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: .06em; color: var(--success-ink); text-transform: uppercase; }
.t-cap { padding: 12px 10px 6px; font: 600 10px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.t-nav { display: flex; flex-direction: column; gap: 2px; }
.t-nav-item { position: relative; display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 10px;
  border-radius: var(--r-lg); color: var(--ink-600); font: 500 14px/1.2 var(--sans); transition: background var(--d-1), color var(--d-1); }
.t-nav-item:hover { background: rgba(238,244,254,.6); color: var(--ink-900); }
.t-nav-item[aria-current="page"] { background: var(--angeles-50); color: var(--angeles-800); }
.t-nav-item[aria-current="page"]::before { content: ''; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--angeles-800); }
.t-nav-item .ico { width: 18px; height: 18px; }
.t-nav-item span { flex: 1; min-width: 0; }
.t-lado-pie { margin-top: auto; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--canvas); }
.t-lado-pie > b { display: block; font: 600 12.5px/1.3 var(--sans); color: var(--angeles-900); }
.t-lado-pie > p { margin: 4px 0 10px; font: 400 12px/1.45 var(--sans); color: var(--ink-600); }
.t-lado-pie .t-demo { width: 100%; margin-bottom: 8px; }
.t-lado-pie .t-pie-enlaces { display: flex; flex-direction: column; gap: 2px; }
.t-lado-pie .t-pie-enlaces button { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 4px; border-radius: var(--r-sm);
  color: var(--angeles-800); font: 500 12.5px/1.2 var(--sans); }
.t-lado-pie .t-pie-enlaces button:hover { background: var(--angeles-50); }
.t-lado-pie .t-pie-enlaces .ico { width: 15px; height: 15px; }

.t-cuerpo { min-width: 0; display: flex; flex-direction: column; }
.t-cabeza { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; gap: 14px; height: var(--alto-cabeza);
  padding: 0 28px; background: var(--vidrio); -webkit-backdrop-filter: var(--vidrio-desenfoque); backdrop-filter: var(--vidrio-desenfoque);
  border-bottom: 1px solid var(--line); }
.t-volver { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--card); color: var(--ink-700); }
.t-volver:hover { background: var(--angeles-50); border-color: var(--angeles-200); }
.t-migas { flex: 1 1 120px; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; font: 500 13px/1.2 var(--sans); color: var(--ink-500); }
.t-migas button { color: var(--ink-600); border-radius: var(--r-sm); padding: 2px 4px; overflow: hidden; text-overflow: ellipsis; }
.t-migas button:hover { color: var(--angeles-800); background: var(--angeles-50); }
.t-migas b { color: var(--ink-900); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.t-migas .ico { width: 14px; height: 14px; color: var(--ink-300); }
.t-migas > span { flex: none; }
/* La miga de pan antes que el campo de Ángeles AI (Jorge, 12 oct: «Cam… › Indic…» en todo el sitio). Orden de sacrificio:
   el campo se encoge primero (flex-shrink 6) y pierde «Pregunte a» y la tecla /; luego se recorta la miga del padre; la
   pantalla actual conserva al menos 12 caracteres; en ventanas angostas el campo baja a su propia fila. */
@container torre (min-width: 900px) {
  .t-cabeza .t-migas { flex: 1 1 auto; }
  .t-migas > button { flex: 0 8 auto; min-width: 3ch; max-width: 24ch; white-space: nowrap; }
  .t-migas > b { flex: 0 1 auto; min-width: min(12ch, 100%); white-space: nowrap; }
  /* flex-shrink 1000: el campo absorbe casi todo el faltante hasta su mínimo; sólo entonces se recorta la miga. */
  .t-cabeza .t-pregunta { flex: 0 1000 440px; min-width: 250px; }
}
@container torre (min-width: 900px) and (max-width: 1599px) {
  .t-cabeza .t-pregunta kbd, .t-cabeza .t-pregunta label > b .largo { display: none; }
  .t-cabeza .t-pregunta { flex-basis: 360px; }
  /* El botón del rol se queda en su avatar: el nombre ya lo dice el lado («Dirección General») y su title. */
  .t-cabeza .t-rol span:not(.t-avatar) { display: none; }
}
/* Dos filas sólo fuera de una historia: dentro, el marco es angosto por el carril del reproductor y una cabeza más alta
   empujaría el foco de cada paso debajo del reproductor (revisa.cjs, recorrido «piso» paso 8). */
@container torre (min-width: 900px) and (max-width: 1319px) {
  html:not([data-historia]) .t-cabeza { flex-wrap: wrap; height: auto; row-gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  html:not([data-historia]) .t-cabeza .t-migas { flex: 1 1 0; }
  html:not([data-historia]) .t-cabeza .t-pregunta { order: 3; flex: 1 1 100%; min-width: 0; }
}

/* «Pregúntale a Ángeles AI»: el campo global. Lo maneja el cascarón ([data-pregunta]: foco abre, Enter pregunta). */
.t-pregunta { position: relative; flex: 0 1 440px; min-width: 240px; }
.t-pregunta label { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 8px 0 13px; border: 1px solid var(--line-2);
  border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-card); cursor: text; transition: border-color var(--d-1), box-shadow var(--d-1); }
.t-pregunta label:hover { border-color: var(--angeles-200); }
.t-pregunta.abierta label, .t-pregunta label:focus-within { border-color: var(--angeles-500); box-shadow: var(--anillo); }
.t-pregunta label > .ico { width: 18px; height: 18px; color: var(--angeles-700); }
.t-pregunta label > b { flex: none; font: 600 13px/1 var(--sans); color: var(--angeles-800); white-space: nowrap; }
.t-pregunta input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink-900); font: 400 14px/1 var(--sans); }
.t-pregunta input::placeholder { color: var(--ink-400); }
.t-pregunta input::-webkit-search-cancel-button { display: none; }
.t-pregunta kbd { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 6px;
  background: var(--canvas); color: var(--ink-500); font: 500 11px/1 var(--mono); }
.t-pregunta button[type="submit"] { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--angeles-800); color: #fff; }
.t-pregunta button[type="submit"] .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.t-sug { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; padding: 8px; border: 1px solid var(--line);
  border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-overlay);
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--d-2) var(--suave), transform var(--d-2) var(--suave); }
.t-pregunta.abierta .t-sug { opacity: 1; transform: none; pointer-events: auto; }
.t-sug > small { display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px; font: 500 11.5px/1.3 var(--sans); color: var(--ink-500); }
.t-sug > small .ico { width: 13px; height: 13px; color: var(--angeles-700); }
.t-sug button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 10px; border-radius: var(--r-md);
  font: 500 13.5px/1.25 var(--sans); color: var(--ink-900); }
.t-sug button:hover, .t-sug button:focus-visible { background: var(--angeles-50); color: var(--angeles-800); }
.t-sug button .ico { width: 15px; height: 15px; color: var(--angeles-700); }

.t-cabeza-der { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.t-rol { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 10px 0 6px; border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--card); transition: border-color var(--d-1), background var(--d-1); }
.t-rol:hover { border-color: var(--angeles-200); background: var(--angeles-50); }
.t-rol .t-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--angeles-800); color: #fff; font: 600 12px/1 var(--sans); letter-spacing: .02em; }
.t-rol span:not(.t-avatar) { display: flex; flex-direction: column; line-height: 1.15; max-width: 168px; }
.t-rol b { font: 600 13px/1.2 var(--sans); color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-rol small { font: 400 11.5px/1.2 var(--sans); color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-rol > .ico { width: 15px; height: 15px; color: var(--ink-400); }

.t-pagina { width: 100%; max-width: calc(var(--ancho-lectura) + 64px); padding: 30px 32px 96px; margin: 0 auto; }
.t-titulo { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.t-titulo .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.t-titulo h1 { font: 600 28px/1.15 var(--sans); letter-spacing: -.02em; color: var(--ink-900); text-wrap: balance; }
.t-titulo p.t-bajada { margin-top: 8px; max-width: 72ch; font: 400 15px/1.5 var(--sans); color: var(--ink-600); }
.t-titulo-der { display: flex; align-items: center; gap: 8px; flex: none; padding-bottom: 4px; }
.t-fuente { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); font: 400 12px/1.5 var(--sans); color: var(--ink-500); }
.t-fuente b { font-weight: 600; color: var(--ink-600); }

/* Los bloques fluyen: los anchos ocupan la fila; las tarjetas, visores y listas comparten fila si caben. */
.t-bloques { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.t-bloques > * { flex: 1 1 100%; min-width: 0; }
.t-bloques > .b-tarjeta, .t-bloques > .b-visor { flex: 1 1 300px; }
.t-bloques > .b-lista { flex: 1 1 480px; }
.t-bloques > .b-lista.ancha, .t-bloques > .heroe { flex-basis: 100%; }

/* El escritorio en una ventana angosta (o un teléfono): una columna, las pestañas del rol en una tira. */
@container torre (max-width: 899px) {
  .t-esc { grid-template-columns: minmax(0, 1fr); }
  .t-lado { position: relative; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 8px 12px 4px; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .t-lado .t-marca { padding: 0 4px; flex: 1; }
  .t-lado .t-marca .sello { width: 32px; height: 32px; }
  .t-lado .t-hosp, .t-lado .t-cap, .t-lado .t-lado-pie > p, .t-lado .t-lado-pie > b { display: none; }
  .t-lado .t-nav { order: 3; flex: 1 1 100%; flex-direction: row; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 4px -12px 0; padding: 0 12px; }
  .t-lado .t-nav::-webkit-scrollbar { display: none; }
  .t-lado .t-nav-item { flex: none; min-height: 38px; }
  .t-lado .t-nav-item[aria-current="page"]::before { left: 10px; right: 10px; top: auto; bottom: -1px; width: auto; height: 2px; }
  .t-lado .t-lado-pie { order: 2; margin: 0; padding: 0; border: 0; background: none; }
  .t-lado .t-lado-pie .t-demo { margin: 0; width: auto; min-height: 36px; padding: 0 12px; }
  .t-lado .t-pie-enlaces { display: none; }
  .t-cabeza { height: auto; flex-wrap: wrap; padding: 8px 16px; gap: 8px; }
  .t-migas { display: none; }
  .t-cabeza-der { flex: 1; justify-content: space-between; }
  .t-cabeza-der { order: 2; }
  .t-pregunta { order: 3; flex: 1 1 100%; min-width: 0; }
  .t-pregunta kbd, .t-pregunta label > b .largo { display: none; }
  .t-pregunta input { font-size: 16px; }
  .t-rol span:not(.t-avatar), .t-cabeza .leyenda small { display: none; }
  .t-pagina { padding: 20px 16px 96px; }
  .t-titulo { flex-direction: column; align-items: flex-start; gap: 10px; }
  .t-titulo h1 { font-size: 24px; }
}

/* ============================ TELÉFONO: barra arriba, contenido, pestañas al pulgar ============================ */
.t-mov { position: relative; min-height: 100%; padding-bottom: calc(var(--alto-pestanas) + var(--abajo) + 24px); font-size: 16px; }
.t-mov.sin-pestanas { padding-bottom: calc(var(--abajo) + 32px); }
.t-barra { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; gap: 8px; height: calc(var(--alto-barra-movil) + var(--arriba));
  padding: var(--arriba) 8px 0; background: var(--vidrio); -webkit-backdrop-filter: var(--vidrio-desenfoque); backdrop-filter: var(--vidrio-desenfoque);
  border-bottom: 1px solid var(--line); }
.t-barra .t-volver { width: 48px; height: 48px; border: 0; background: transparent; border-radius: 12px; }
.t-barra .t-volver .ico { width: 22px; height: 22px; }
.t-barra .t-marca-mov { display: grid; place-items: center; width: 48px; height: 48px; flex: none; }
.t-barra .t-marca-mov .sello { width: 32px; height: 32px; }
.t-barra-centro { flex: 1; min-width: 0; text-align: center; line-height: 1.15; }
.t-barra-centro b { display: block; font: 600 15px/1.2 var(--sans); color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-barra-centro small { display: block; margin-top: 2px; font: 600 9.5px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-500); }
.t-barra .t-rol-mov { display: grid; place-items: center; width: 48px; height: 48px; flex: none; }
.t-barra .t-rol-mov .t-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--angeles-800); color: #fff; font: 600 12px/1 var(--sans); }
.t-mov-cab { padding: 18px var(--orilla) 4px; }
.t-mov-cab .eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.t-mov-cab h1 { font: 600 25px/1.15 var(--sans); letter-spacing: -.02em; color: var(--ink-900); text-wrap: balance; }
.t-mov-cab p.t-bajada { margin-top: 6px; font: 400 15px/1.45 var(--sans); color: var(--ink-600); }
.t-mov .t-bloques { padding: 14px var(--orilla) 0; gap: 12px; }
.t-mov .t-bloques > * { flex-basis: 100%; }
.t-mov .t-fuente { margin: 24px var(--orilla) 0; }
.t-pestanas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  height: calc(var(--alto-pestanas) + var(--abajo)); padding: 6px 6px var(--abajo); background: var(--vidrio);
  -webkit-backdrop-filter: var(--vidrio-desenfoque); backdrop-filter: var(--vidrio-desenfoque); border-top: 1px solid var(--line); }
.t-pestana { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px; border-radius: 14px;
  color: var(--ink-500); font: 500 11.5px/1.1 var(--sans); }
.t-pestana .t-pill { display: grid; place-items: center; width: 52px; height: 28px; border-radius: var(--r-full); transition: background var(--d-2) var(--suave); }
.t-pestana .ico { width: 21px; height: 21px; }
.t-pestana[aria-current="page"] { color: var(--angeles-800); font-weight: 600; }
.t-pestana[aria-current="page"] .t-pill { background: var(--angeles-100); }

/* El campo de Ángeles AI en el teléfono: bajo el título, del ancho de la pantalla, 16 px para que no haga zoom */
.t-pregunta-mov { flex: none; min-width: 0; margin: 12px var(--orilla) 0; }
.t-pregunta-mov label { gap: 8px; }
.t-pregunta-mov label > b .largo { display: none; }
.t-pregunta-mov label > b { font-size: 13px; letter-spacing: -.01em; }
.t-pregunta-mov label { height: 48px; border-radius: 14px; padding: 0 6px 0 14px; }
.t-pregunta-mov input { font-size: 16px; }
.t-pregunta-mov button[type="submit"] { width: 36px; height: 36px; border-radius: 10px; }
.t-pregunta-mov .t-sug { top: calc(100% + 6px); }
.t-pregunta-mov .t-sug button { min-height: 48px; font-size: 14.5px; }

/* En pantallas anchas, la superficie teléfono se queda de teléfono */
@container torre (min-width: 600px) {
  .t-mov { max-width: 480px; margin: 0 auto; background: var(--canvas); }
}

/* ---- Hoja de roles: «Ver la torre como» (menú en escritorio, hoja en teléfono). Sólida: es lo más cercano. ---- */
.t-velo { position: fixed; inset: 0; z-index: 40; background: var(--velo); opacity: 0; pointer-events: none; transition: opacity var(--d-2) var(--suave); }
.t-roles { position: fixed; z-index: 41; display: flex; flex-direction: column; gap: 2px; padding: 10px; background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow-overlay); opacity: 0; pointer-events: none;
  transition: opacity var(--d-2) var(--suave), transform var(--d-2) var(--suave); }
.torre[data-hoja-abierta] .t-velo { opacity: 1; pointer-events: auto; }
.torre[data-hoja-abierta] .t-roles { opacity: 1; pointer-events: auto; transform: none; }
.t-escritorio .t-roles { top: 72px; right: 24px; width: 380px; max-height: calc(100vh - 96px); overflow-y: auto; border-radius: var(--r-2xl); transform: translateY(-6px); }
.t-escritorio .t-velo { background: rgba(10,27,51,.12); }
.t-telefono .t-roles { left: 0; right: 0; bottom: 0; max-height: 86%; overflow-y: auto; border-radius: 22px 22px 0 0; padding: 8px 12px calc(14px + var(--abajo)); transform: translateY(24px); }
@media (max-width: 600px) {
  .t-escritorio .t-roles { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 86%; border-radius: 22px 22px 0 0; padding: 8px 12px calc(14px + var(--abajo)); transform: translateY(24px); }
  .t-escritorio .t-velo { background: var(--velo); }
}
/* La hoja es una columna flex con alto máximo y scroll: sin esto cada fila se encogía hasta su min-height y una entrada
   de tres líneas se encimaba sobre la siguiente (Jorge, 12 oct: «se empalma»). Cada fila conserva su alto; la hoja hace scroll. */
.t-roles > * { flex-shrink: 0; }
.t-roles .asa { width: 40px; height: 5px; margin: 4px auto 8px; border-radius: 3px; background: var(--line-2); }
.t-roles h2 { padding: 6px 8px 2px; font: 600 15px/1.3 var(--sans); color: var(--ink-900); }
.t-roles .h-sub { padding: 0 8px 8px; font: 400 12.5px/1.4 var(--sans); color: var(--ink-500); }
.t-rol-op { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px; border-radius: var(--r-lg); text-align: left; }
.t-rol-op:hover { background: var(--angeles-50); }
.t-rol-op .r-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--angeles-50); color: var(--angeles-800); }
.t-rol-op .r-ico .ico { width: 18px; height: 18px; }
.t-rol-op > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.t-rol-op b { font: 600 14px/1.2 var(--sans); color: var(--ink-900); }
.t-rol-op small { font: 400 12px/1.35 var(--sans); color: var(--ink-500); }
.t-rol-op em { flex: none; font: 600 9.5px/1 var(--mono); font-style: normal; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-500);
  padding: 4px 6px; border-radius: 6px; background: var(--muted); }
.t-rol-op[aria-current="true"] { background: var(--angeles-50); }
.t-rol-op[aria-current="true"] .r-ico { background: var(--angeles-800); color: #fff; }
.t-roles hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.t-roles .t-rol-op.otra .r-ico { background: var(--muted); color: var(--ink-600); }

/* ================================================ LOS OCHO BLOQUES ================================================ */
.b { min-width: 0; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.b-tit { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.b-tit > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.b-tit .b-eyebrow + b, .b-tit > span > b { font: 600 17px/1.25 var(--sans); letter-spacing: -.01em; color: var(--ink-900); }
.b-tit .mas { flex: none; }
.b-tit.dentro { margin: 0; padding: 16px 18px 12px; }

/* decision · algo espera a una persona */
.b-decision .panel { position: relative; padding: 20px 22px 20px 24px; border-color: var(--humano-linea); box-shadow: inset 3px 0 0 var(--humano), var(--shadow-card); }
.b-decision .quien { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 600 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--humano-ink); }
.b-decision h2 { font: 600 21px/1.25 var(--sans); letter-spacing: -.015em; color: var(--ink-900); text-wrap: balance; }
.b-decision .det { margin-top: 6px; max-width: 70ch; font: 400 15px/1.5 var(--sans); color: var(--ink-600); }
.b-decision .espera { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 500 13px/1.3 var(--sans); color: var(--ink-600); }
.b-decision .espera .ico { width: 15px; height: 15px; color: var(--ink-400); }
.b-decision .botonera { margin-top: 16px; }
.b-decision .d-fila { display: flex; gap: 18px; align-items: flex-start; }
.b-decision .d-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--humano-tinte); color: var(--humano-ink); }
.b-decision .d-ico .ico { width: 22px; height: 22px; }
.b-decision .d-txt { flex: 1; min-width: 0; }

/* lista · filas tocables (la «tabla ejecutiva» del producto) */
.b-lista .panel { overflow: hidden; }
.filas > .fila + .fila { border-top: 1px solid var(--line); }
.fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 11px 16px;
  text-align: left; transition: background var(--d-1); }
.fila.sin-lead { grid-template-columns: minmax(0, 1fr) auto auto; }
button.fila:hover, a.fila:hover { background: var(--angeles-50); }
.fila .lead { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--muted); color: var(--ink-600); }
.fila .lead .ico { width: 17px; height: 17px; }
.fila .lead[data-estado="rojo"] { background: rgba(208,53,68,.10); color: var(--rojo); }
.fila .lead[data-estado="amarillo"] { background: rgba(199,119,0,.12); color: var(--amarillo); }
.fila .lead[data-estado="verde"] { background: rgba(14,159,110,.12); color: var(--verde); }
.fila .lead[data-estado="azul"] { background: var(--angeles-50); color: var(--azul); }
.fila .lead[data-estado="humano"] { background: var(--humano-tinte); color: var(--humano); }
.fila .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fila .txt b { font: 500 14px/1.35 var(--sans); color: var(--ink-900); }
.fila .txt small { font: 400 12.5px/1.4 var(--sans); color: var(--ink-500); }
.fila .der { display: flex; align-items: center; gap: 10px; justify-self: end; }
.fila .valor { font: 600 14px/1.2 var(--sans); color: var(--ink-900); text-align: right; white-space: nowrap; }
.fila .valor.txt-valor { font-weight: 500; color: var(--angeles-800); }
.fila > .ico.flecha { width: 16px; height: 16px; color: var(--ink-300); transition: transform var(--d-1) var(--suave), color var(--d-1); }
button.fila:hover > .ico.flecha { transform: translateX(2px); color: var(--angeles-700); }
.fila .horizonte { height: 20px; }

/* tarjeta */
.b-tarjeta { display: flex; flex-direction: column; }
.tarjeta { position: relative; display: flex; flex-direction: column; gap: 6px; flex: 1; width: 100%; padding: 18px 20px; text-align: left;
  transition: border-color var(--d-1), box-shadow var(--d-2) var(--suave); }
button.tarjeta:hover { border-color: var(--angeles-200); box-shadow: var(--shadow-float); }
.tarjeta .t-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.tarjeta .t-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--angeles-50); color: var(--angeles-800); }
.tarjeta .t-ico .ico { width: 18px; height: 18px; }
.tarjeta .t-eti { flex: 1; min-width: 0; font: 500 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.tarjeta .t-tit { font: 600 16px/1.3 var(--sans); letter-spacing: -.01em; color: var(--ink-900); padding-right: 18px; }
.tarjeta .t-txt { font: 400 14px/1.5 var(--sans); color: var(--ink-600); }
.tarjeta .t-pie { margin-top: auto; padding-top: 8px; font: 500 13px/1.3 var(--sans); color: var(--ink-600); }
.tarjeta .t-flecha { position: absolute; right: 16px; top: 20px; width: 16px; height: 16px; color: var(--ink-300); transition: transform var(--d-1) var(--suave), color var(--d-1); }
button.tarjeta:hover .t-flecha { transform: translateX(2px); color: var(--angeles-700); }
.tarjeta.pide { border-color: var(--humano-linea); box-shadow: inset 3px 0 0 var(--humano), var(--shadow-card); }
.tarjeta[data-estado="rojo"] { border-color: rgba(208,53,68,.35); }

/* cifras · los indicadores (KPI card del producto) */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.cifra { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 132px; padding: 18px 20px; border-radius: var(--r-2xl); text-align: left;
  transition: border-color var(--d-1), box-shadow var(--d-2) var(--suave); }
button.cifra:hover { border-color: var(--angeles-200); box-shadow: var(--shadow-float); }
.cifra .c-eti { font: 500 11px/1.35 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.cifra .c-val { font: 600 34px/1 var(--sans); letter-spacing: -.02em; color: var(--ink-900); }
.cifra .c-val small { margin-left: 4px; font: 500 15px/1 var(--sans); letter-spacing: 0; color: var(--ink-500); }
.cifra .c-txt { font: 400 13.5px/1.4 var(--sans); color: var(--ink-600); }
.cifra .c-det { font: 400 12.5px/1.4 var(--sans); color: var(--ink-500); }
.cifra .c-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cifra .c-pie .enlace { font-size: 12.5px; }
.cifra[data-estado="rojo"] { border-color: rgba(208,53,68,.32); }
.cifra .c-ico { position: absolute; right: 16px; top: 16px; width: 18px; height: 18px; color: var(--ink-400); }

/* formulario */
.form { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo .c-eti { font: 500 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.campo input, .campo textarea, .campo select { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--card); color: var(--ink-900); font: 400 15px/1.4 var(--sans); outline: 0; transition: border-color var(--d-1), box-shadow var(--d-1); }
.campo textarea { min-height: 92px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--angeles-500); box-shadow: var(--anillo); }
.campo .ayuda { font: 400 12.5px/1.4 var(--sans); color: var(--ink-500); }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-full); background: var(--card); font: 500 14px/1 var(--sans); color: var(--ink-700); }
.opcion[aria-pressed="true"] { background: var(--angeles-800); border-color: var(--angeles-800); color: #fff; }
.campo.interruptor { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.campo.interruptor span { font: 500 14px/1.35 var(--sans); color: var(--ink-900); }
.campo.interruptor input { appearance: none; -webkit-appearance: none; position: relative; width: 44px; min-height: 0; height: 26px; padding: 0; flex: none; border: 0;
  border-radius: var(--r-full); background: var(--line-2); transition: background var(--d-2); cursor: pointer; }
.campo.interruptor input::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(10,27,51,.2); transition: transform var(--d-2) var(--suave); }
.campo.interruptor input:checked { background: var(--angeles-800); }
.campo.interruptor input:checked::after { transform: translateX(18px); }
.b-formulario > .btn, .b-formulario > .botonera { margin-top: 12px; }

/* acciones */
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.atajo { display: flex; align-items: flex-start; gap: 12px; padding: 16px; text-align: left; transition: border-color var(--d-1), box-shadow var(--d-2) var(--suave); }
.atajo:hover { border-color: var(--angeles-200); box-shadow: var(--shadow-float); }
.atajo .a-ico { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--angeles-50); color: var(--angeles-800); }
.atajo .a-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; font: 600 14.5px/1.3 var(--sans); color: var(--ink-900); }
.atajo .a-det { font: 400 12.5px/1.4 var(--sans); color: var(--ink-500); }

/* visor · lo que se ve: gráfica, QR, foto, documento, video, firma, SAP, mapa */
.visor { overflow: hidden; }
.v-cuerpo { position: relative; display: grid; place-items: center; min-height: 180px; background: var(--canvas); border-bottom: 1px solid var(--line); }
.v-cuerpo > svg { width: 100%; height: auto; }
.v-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.v-pie b { display: block; font: 600 14px/1.3 var(--sans); color: var(--ink-900); }
.v-pie small { display: block; margin-top: 2px; font: 400 12.5px/1.4 var(--sans); color: var(--ink-500); }
.v-pie .ico { width: 16px; height: 16px; color: var(--ink-300); }
.v-rotulo { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-full);
  background: rgba(255,255,255,.92); border: 1px solid var(--line); font: 600 10px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-600); }
.v-video { background: #0E1A2B; aspect-ratio: 16 / 9; width: 100%; }
.v-video .play { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--angeles-800); }
.v-video .play svg { width: 24px; height: 24px; fill: currentColor; stroke: none; margin-left: 3px; }
.v-sap { display: grid; gap: 10px; width: 100%; padding: 18px; background: var(--card); }
.v-sap .s-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v-sap .s-tx { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--mono); color: var(--angeles-900); }
.v-sap .s-tx i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--angeles-50); color: var(--angeles-800); }
.v-sap dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 12px; border-radius: var(--r-md); background: var(--canvas); }
.v-sap dt { font: 500 10.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.v-sap dd { font: 500 13px/1.35 var(--mono); color: var(--ink-900); }
.v-sap .s-nota { font: 400 11.5px/1.45 var(--sans); color: var(--ink-500); }

/* estado · banda, aviso, vacío, «listo» */
.b-estado .aviso { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-card); }
.b-estado .a-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--muted); color: var(--ink-600); }
.b-estado .a-ico .ico { width: 20px; height: 20px; }
.b-estado .a-txt { flex: 1; min-width: 0; padding-top: 1px; }
.b-estado .a-txt b { display: block; font: 600 15.5px/1.35 var(--sans); color: var(--ink-900); }
.b-estado .a-txt p { margin-top: 3px; font: 400 14px/1.5 var(--sans); color: var(--ink-600); }
.b-estado .a-txt .estado { margin-bottom: 8px; }
.b-estado .a-txt .botonera { margin-top: 12px; }
.b-estado .aviso[data-estado="rojo"] { border-color: rgba(208,53,68,.3); background: #FFF8F8; }
.b-estado .aviso[data-estado="rojo"] .a-ico { background: var(--danger); color: #fff; }
.b-estado .aviso[data-estado="rojo"] .a-txt b { color: var(--rojo-ink); }
.b-estado .aviso[data-estado="amarillo"] { border-color: rgba(199,119,0,.3); background: #FFFBF3; }
.b-estado .aviso[data-estado="amarillo"] .a-ico { background: rgba(199,119,0,.14); color: var(--amarillo-ink); }
.b-estado .aviso[data-estado="verde"] .a-ico { background: rgba(14,159,110,.12); color: var(--verde-ink); }
.b-estado .aviso[data-estado="azul"] { background: var(--angeles-50); border-color: var(--angeles-200); }
.b-estado .aviso[data-estado="azul"] .a-ico { background: var(--card); color: var(--angeles-800); }
.b-estado .aviso[data-estado="humano"] { border-color: var(--humano-linea); box-shadow: inset 3px 0 0 var(--humano), var(--shadow-card); }
.b-estado .aviso[data-estado="humano"] .a-ico { background: var(--humano-tinte); color: var(--humano-ink); }
.b-estado .aviso.quieto { border-style: dashed; border-color: var(--line-2); background: transparent; box-shadow: none; }
.b-estado .aviso.quieto .a-ico { background: var(--card); border: 1px solid var(--line); color: var(--ink-500); }
.b-estado .listo { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 22px 26px; text-align: center;
  border: 1px solid rgba(14,159,110,.28); border-radius: var(--r-2xl); background: var(--card); box-shadow: var(--shadow-card); }
.b-estado .listo .l-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--success); color: var(--success); margin-bottom: 6px; }
.b-estado .listo .l-ico .ico { width: 26px; height: 26px; stroke-width: 2.5; }
.b-estado .listo b { font: 600 20px/1.25 var(--sans); letter-spacing: -.01em; color: var(--ink-900); }
.b-estado .listo p { max-width: 56ch; font: 400 14.5px/1.5 var(--sans); color: var(--ink-600); }
.b-estado .listo .folio { font: 600 26px/1.1 var(--mono); letter-spacing: .01em; color: var(--angeles-900); }
.b-estado .listo .botonera { justify-content: center; margin-top: 8px; }

/* ---- En el teléfono: más grande, más tocable --------------------------------------------------------------- */
.t-mov .btn { min-height: 48px; font-size: 15.5px; border-radius: 12px; }
.t-mov .fila { min-height: 60px; padding: 12px 14px; gap: 12px; }
.t-mov .fila .txt b { font-size: 15.5px; }
.t-mov .fila .txt small { font-size: 13.5px; }
.t-mov .fila .der .estado { display: none; }
.t-mov .fila .txt .estado { display: inline-flex; margin-top: 4px; align-self: flex-start; }
.t-mov .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.t-mov .cifra { min-height: 116px; padding: 14px; border-radius: var(--r-xl); }
.t-mov .cifra .c-val { font-size: 28px; }
.t-mov .campo input, .t-mov .campo textarea, .t-mov .campo select { font-size: 16px; min-height: 48px; }
.t-mov .opcion { min-height: 44px; font-size: 15px; }
.t-mov .b-decision .panel { padding: 18px 16px 16px 18px; }
.t-mov .b-decision .d-ico { display: none; }
.t-mov .b-decision h2 { font-size: 19px; }
.t-mov .b-decision .botonera { flex-direction: column; align-items: stretch; }
.t-mov .tarjeta .t-tit { font-size: 16.5px; }
.t-mov .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.t-mov .atajo { flex-direction: column; padding: 14px; }
.fila .txt .estado, .fila .txt .horizonte { display: none; }
.t-mov .fila .der .horizonte { display: none; }
.t-mov .fila .txt .horizonte { display: inline-flex; margin-top: 6px; align-self: flex-start; }

/* ---- Movimiento: entrar en cascada corta, sólo transform y opacity ------------------------------------------ */
@keyframes t-entra { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
.entra { animation: t-entra var(--d-3) var(--suave) both; animation-delay: calc(var(--k, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) {
  .entra { animation: none; }
  .torre *, .torre *::before, .torre *::after { transition-duration: .01ms !important; }
}

/* ================================================ LA PORTADA ================================================ */
.t-portada .po { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 40px 56px; }
.t-portada .franja { position: fixed; }
.po-barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 10px; }
.po-barra .t-marca { padding: 0; }
.po-barra-der { display: flex; align-items: center; gap: 10px; }
.po-heroe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; padding: 40px 0 44px; }
.po-txt .eyebrow { margin-bottom: 14px; }
.po-txt h1 { font: 600 50px/1.04 var(--sans); letter-spacing: -.035em; color: var(--angeles-900); text-wrap: balance; }
.po-sub { margin-top: 18px; max-width: 54ch; font: 400 18px/1.55 var(--sans); color: var(--ink-600); }
.po-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.po-cta .btn { min-height: 60px; padding: 0 22px 0 18px; border-radius: 14px; gap: 12px; text-align: left; }
.po-cta .btn .ico { width: 20px; height: 20px; }
.po-cta .btn span { display: flex; flex-direction: column; gap: 3px; font: 600 16px/1.15 var(--sans); }
.po-cta .btn small { font: 400 12.5px/1.25 var(--sans); white-space: normal; max-width: 34ch; }
.po-cta .btn.primario small { color: var(--angeles-100); }
.po-cta .btn:not(.primario) small { color: var(--ink-500); }
.po-qr { display: flex; align-items: center; gap: 14px; max-width: 480px; margin: 18px 0 0; padding: 10px 16px 10px 10px; border: 1px dashed var(--line-2); border-radius: var(--r-xl); background: var(--card); }
.po-qr img { flex: none; border-radius: 10px; background: #fff; }
.po-qr b { display: block; font: 600 14px/1.3 var(--sans); color: var(--ink-900); }
.po-qr small { display: block; margin-top: 3px; font: 400 12.5px/1.45 var(--sans); color: var(--ink-500); }
@container torre (max-width: 899px) { .po-qr { display: none; } }
.po-nota { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; max-width: 60ch; font: 400 13px/1.5 var(--sans); color: var(--ink-500); }
.po-nota .ico { width: 16px; height: 16px; margin-top: 1px; }

/* La vista: la misma torre en la laptop del director y en el teléfono del piso (dibujada, con las cifras de HECHOS) */
.po-vista { position: relative; margin: 0; padding: 0 0 70px; }
.pv-laptop { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); overflow: hidden; border-radius: 18px; background: var(--canvas);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-overlay); }
.pv-laptop .franja { position: absolute; }
.pv-lado { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 0; background: var(--card); border-right: 1px solid var(--line); }
.pv-lado .pv-sello { display: block; width: 28px; height: 28px; margin-bottom: 8px; }
.pv-lado .pv-sello svg { width: 28px; height: 28px; }
.pv-lado i { width: 26px; height: 8px; border-radius: 4px; background: var(--muted); }
.pv-lado i.on { background: var(--angeles-100); box-shadow: inset 2px 0 0 var(--angeles-800); }
.pv-main { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; min-width: 0; }
.pv-ey { font: 500 9px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.pv-h { font: 600 18px/1.15 var(--sans); letter-spacing: -.02em; color: var(--ink-900); }
.pv-ia { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 12px; border-radius: 12px; background: var(--angeles-50); border: 1px solid var(--angeles-200);
  font: 600 12.5px/1.2 var(--sans); color: var(--angeles-900); }
.pv-ia .ico { width: 15px; height: 15px; color: var(--angeles-800); }
.pv-ia em { margin-left: auto; padding: 6px 10px; border-radius: 8px; background: var(--angeles-800); color: #fff; font: 600 10.5px/1 var(--sans); font-style: normal; }
.pv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pv-kpis > span { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.pv-kpis > span.rojo { border-color: rgba(208,53,68,.3); }
.pv-kpis small { font: 500 8px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-kpis b { font: 600 20px/1 var(--sans); letter-spacing: -.02em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.pv-kpis .rojo b { color: var(--rojo-ink); }
.pv-kpis .estado { height: 16px; padding: 0 6px; font-size: 8.5px; gap: 4px; align-self: flex-start; max-width: 100%; overflow: hidden; font-style: normal; }
.pv-kpis .estado .sem { width: 4px; height: 4px; }
.pv-barra { position: relative; display: block; height: 5px; margin-top: 5px; border-radius: 3px; background: var(--muted); overflow: hidden; }
.pv-barra i { position: absolute; inset: 0 auto 0 0; width: 58%; background: var(--angeles-300); border-radius: 3px; }
.pv-alerta { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid rgba(208,53,68,.28); }
.pv-alerta > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pv-alerta b { font: 600 11.5px/1.2 var(--sans); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-alerta small { font: 400 10px/1.2 var(--sans); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-alerta em { font: 600 10.5px/1 var(--sans); font-style: normal; color: var(--angeles-800); }
.pv-tel { position: absolute; right: -22px; bottom: 0; width: 150px; padding: 7px; border-radius: 30px; background: #0E1A2B; box-shadow: 0 30px 60px -24px rgba(10,27,51,.55); transform: rotate(0deg); }
.pv-tel-pantalla { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px 16px; border-radius: 24px; background: var(--card); text-align: center; }
.pv-tel-cab { display: flex; align-items: center; gap: 6px; align-self: stretch; padding-bottom: 8px; border-bottom: 1px solid var(--line); font: 600 11px/1 var(--sans); color: var(--ink-900); }
.pv-tel-cab svg { width: 18px; height: 18px; }
.pv-ok { display: grid; place-items: center; width: 34px; height: 34px; margin-top: 6px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px var(--success); color: var(--success); }
.pv-ok .ico { width: 17px; height: 17px; stroke-width: 2.6; }
.pv-tel-pantalla small { font: 400 10px/1.2 var(--sans); color: var(--ink-600); }
.pv-tel-pantalla b.mono { font: 600 11px/1.2 var(--mono); color: var(--angeles-900); }
.pv-tel-pantalla .estado { height: 18px; font-size: 9.5px; padding: 0 7px; }

/* Historias, roles, cómo leer */
.po-sec { padding: 30px 0 6px; border-top: 1px solid var(--line); margin-top: 8px; }
.po-sec-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.po-sec-cab h2 { font: 600 22px/1.2 var(--sans); letter-spacing: -.015em; color: var(--ink-900); }
.po-sec-cab p { max-width: 64ch; font: 400 14px/1.5 var(--sans); color: var(--ink-500); text-align: right; }
.po-historias { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.po-historia { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 16px 18px; text-align: left; border-radius: var(--r-xl);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: border-color var(--d-1), box-shadow var(--d-2) var(--suave); }
.po-historia:hover { border-color: var(--angeles-200); box-shadow: var(--shadow-float); }
.po-historia.primera { border-color: var(--angeles-200); background: var(--angeles-50); }
.ph-n { font: 600 13px/1 var(--mono); color: var(--angeles-700); }
.ph-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ph-txt b { font: 600 15px/1.3 var(--sans); color: var(--ink-900); }
.ph-txt small { font: 400 12.5px/1.4 var(--sans); color: var(--ink-500); }
.ph-sup { display: flex; gap: 4px; color: var(--ink-400); }
.ph-sup .ico { width: 16px; height: 16px; }
.po-historia .ph-play { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--angeles-800); color: #fff; stroke-width: 2; }
.po-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.po-rol { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 150px; padding: 16px; text-align: left; border-radius: var(--r-xl);
  background: var(--card); border: 1px solid var(--line); transition: border-color var(--d-1), box-shadow var(--d-2) var(--suave); }
.po-rol:hover { border-color: var(--angeles-200); box-shadow: var(--shadow-float); }
.po-rol .r-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--angeles-50); color: var(--angeles-800); }
.po-rol .r-txt { display: flex; flex-direction: column; gap: 4px; }
.po-rol .r-txt b { font: 600 15px/1.25 var(--sans); color: var(--ink-900); }
.po-rol .r-txt small { font: 400 12.5px/1.4 var(--sans); color: var(--ink-500); }
.po-rol em { margin-top: auto; display: inline-flex; align-items: center; gap: 5px; font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-500); }
.po-rol em .ico { width: 13px; height: 13px; }
.po-leer-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.po-leer-col { padding: 16px 18px; border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); }
.po-leer-col h3 { margin-bottom: 10px; font: 600 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.po-lee { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.po-lee:first-of-type { border-top: 0; }
.po-lee > :first-child { justify-self: start; }
.po-lee b { display: block; font: 600 13px/1.3 var(--sans); color: var(--ink-900); }
.po-lee small { display: block; font: 400 12px/1.4 var(--sans); color: var(--ink-500); }
.po-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.po-pie p { flex: 1 1 100%; margin-top: 6px; font: 400 12px/1.5 var(--sans); color: var(--ink-500); }

@container torre (max-width: 1099px) {
  .po-heroe { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .po-vista { max-width: 680px; }
  .po-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .po-leer-rejilla { grid-template-columns: minmax(0, 1fr); }
}
@container torre (max-width: 640px) {
  .t-portada .po { padding: 0 16px 40px; }
  .po-barra .btn.fantasma { display: none; }
  .po-heroe { padding: 18px 0 24px; }
  .po-txt h1 { font-size: 34px; }
  .po-sub { font-size: 16px; }
  .po-cta { flex-direction: column; }
  .po-cta .btn { width: 100%; }
  .po-vista { padding-bottom: 92px; }
  .pv-laptop { grid-template-columns: 36px minmax(0, 1fr); }
  .pv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-tel { right: -6px; width: 118px; }
  .pv-alerta { display: none; }
  .po-sec-cab { flex-direction: column; align-items: flex-start; gap: 6px; }
  .po-sec-cab p { text-align: left; }
  .po-historias { grid-template-columns: minmax(0, 1fr); }
  .po-roles { grid-template-columns: minmax(0, 1fr); }
  .po-rol { min-height: 0; flex-direction: row; align-items: center; }
  .po-rol em { margin: 0 0 0 auto; }
  .po-lee { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ---- Las piezas del cascarón (hospital-demo las pone y las mueve; aquí sólo su letra y su color) ---------------- */
.pd-recorrido, .pd-llegada, .pd-aviso, .pd-respuesta, .pd-hoja, .pd-panel { font-family: var(--sans); }
.pd-recorrido small, .pd-rec-cabeza small, .pd-respuesta-cab small, .pd-respuesta-pie, .pd-respuesta-eti, .pd-hoja small, .pd-panel small {
  font-family: var(--sans) !important; font-weight: 600; letter-spacing: .06em; }
html[data-superficie] .pd-recorrido { background: rgba(10,42,102,.97); border-color: rgba(187,211,247,.22); }
html[data-superficie] #pd-recorrido .pd-rec-sigue { background: #fff; color: var(--angeles-900); }
.pd-respuesta { border-color: var(--angeles-200); border-radius: var(--r-2xl); box-shadow: var(--shadow-overlay); }
.pd-respuesta-cab small { color: var(--angeles-800); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.pd-respuesta-pie { color: var(--ink-500); font-weight: 400 !important; letter-spacing: 0 !important; }
.pd-respuesta-ver { background: var(--angeles-800); border-radius: var(--r-lg); min-height: 40px; }
.pd-respuesta-ver:hover { background: var(--angeles-700); }
.pd-respuesta-cerca button { border-color: var(--line); background: var(--canvas); }
.pd-respuesta-cerca button:hover { border-color: var(--angeles-200); background: var(--angeles-50); }
html[data-superficie] .pd-aviso { background: var(--ink-900); }
/* El panel junto al teléfono (pantallas anchas, superficie teléfono): sobre el lienzo claro, en tinta */
html[data-superficie="telefono"] .pd-panel { color: var(--ink-900); }
html[data-superficie="telefono"] .pd-panel-marca, html[data-superficie="telefono"] .pd-panel dt, html[data-superficie="telefono"] .pd-camino small,
html[data-superficie="telefono"] .pd-panel-recorrido small, html[data-superficie="telefono"] .pd-qr small, html[data-superficie="telefono"] .pd-panel-nota { color: var(--ink-500); font-family: var(--sans); }
html[data-superficie="telefono"] .pd-panel-rol, html[data-superficie="telefono"] .pd-panel-contiene, html[data-superficie="telefono"] .pd-panel dd { color: var(--ink-700); }
html[data-superficie="telefono"] .pd-panel h2 { color: var(--angeles-900); font-weight: 600; letter-spacing: -.02em; }
html[data-superficie="telefono"] .pd-camino button, html[data-superficie="telefono"] .pd-panel-enlaces button { color: var(--angeles-800); font-weight: 500; }
html[data-superficie="telefono"] .pd-panel-recorrido { background: var(--card); border: 1px solid var(--line); color: var(--ink-700); }
html[data-superficie="telefono"] .pd-qr img { background: #fff; border: 1px solid var(--line); }
html[data-superficie="telefono"] .pd-qr b { color: var(--ink-900); }

/* ---- Movimiento de los momentos que sorprenden (sólo transform y opacity; una vez; sin bucles) ---------------------- */
/* La respuesta de Ángeles AI se despliega bajo el campo, de arriba hacia abajo, y su contenido llega en cascada corta. */
@keyframes t-despliega { from { opacity: 0; transform: translateY(-6px) scaleY(.94); } to { opacity: 1; transform: none; } }
.pd-respuesta { transform-origin: 50% 0; animation: t-despliega .34s cubic-bezier(.2,.7,.2,1) !important; }
.pd-respuesta > * { animation: t-entra .3s cubic-bezier(.2,.7,.2,1) backwards; }
.pd-respuesta > :nth-child(2) { animation-delay: .07s; } .pd-respuesta > :nth-child(3) { animation-delay: .13s; }
.pd-respuesta > :nth-child(4) { animation-delay: .19s; } .pd-respuesta > :nth-child(n+5) { animation-delay: .24s; }
/* El aviso que llega solo: entra (lo mueve el cascarón) y su ícono late una sola vez, sin sonido. */
@keyframes t-pulso { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
.pd-llegada.pd-visible::after { content: ''; position: absolute; left: 14px; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 12px;
  box-shadow: 0 0 0 2px var(--rojo); opacity: 0; pointer-events: none; animation: t-pulso 1.1s .55s cubic-bezier(.2,.7,.2,1) 1; }
/* Un número que voltea (data-voltea) o que sube al cambiar de estado (.voltea-entra) */
@keyframes t-sube { from { opacity: 0; transform: translateY(45%); } to { opacity: 1; transform: none; } }
.voltea-entra { display: inline-block; animation: t-sube .32s cubic-bezier(.2,.7,.2,1) backwards; }

/* La portada: la torre en miniatura vive una vez. El piso reporta (1.4 s), el aviso llega a la laptop (3 s) y los críticos
   pasan de 3 a 4 (3.6 s). El estado de reposo es el final; la animación sólo pone el principio (fill backwards). */
.pv-voltea { position: relative; display: inline-block; }
.pv-voltea .a { display: inline-block; opacity: 0; }
.pv-voltea .b { position: absolute; left: 0; top: 0; display: inline-block; }
@keyframes pv-queda { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } }
@keyframes pv-sale { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-45%); } }
.pv-voltea .a { animation: pv-queda 3.6s linear backwards, pv-sale .2s 3.6s cubic-bezier(.4,0,.9,.4) backwards; }
.pv-voltea .b { animation: t-sube .32s 3.8s cubic-bezier(.2,.7,.2,1) backwards; }
.pv-llega { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; flex-direction: column; gap: 2px; width: 52%; padding: 9px 11px; border-radius: 12px;
  background: var(--card); border: 1px solid rgba(208,53,68,.3); box-shadow: inset 3px 0 0 var(--rojo), var(--shadow-overlay); }
.pv-llega small { font: 600 8.5px/1.2 var(--sans); color: var(--rojo-ink); }
.pv-llega b { font: 600 10.5px/1.25 var(--sans); color: var(--ink-900); }
.pv-llega span { font: 400 9px/1.25 var(--sans); color: var(--ink-500); }
@keyframes pv-baja { from { opacity: 0; transform: translateY(-130%); } to { opacity: 1; transform: none; } }
.pv-llega { animation: pv-baja .55s 3s cubic-bezier(.3,1.25,.5,1) backwards; }
@keyframes pv-tel { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.pv-tel { animation: pv-tel .6s 1.2s cubic-bezier(.2,.7,.2,1) backwards; }
.pv-ok { animation: t-sube .4s 1.7s cubic-bezier(.2,.7,.2,1) backwards; }

@media (prefers-reduced-motion: reduce) {
  .pd-respuesta, .pd-respuesta > *, .pd-llegada::after, .voltea-entra, .pv-voltea .a, .pv-voltea .b, .pv-llega, .pv-tel, .pv-ok { animation: none !important; }
}

/* =================================================== IMPRESIÓN ===================================================
   Ctrl+P en cualquier pantalla: sin marco (barra lateral, cabeza, campo de Ángeles AI, pestañas, reproductor, avisos),
   una columna, sin sombras ni movimiento, las tarjetas no se parten, y al pie de cada hoja «DEMO · datos simulados ·
   corte 01 Oct 2026 09:40» (Chromium; en los demás, al final del documento). */
@page { size: letter; margin: 14mm 13mm 16mm;
  @bottom-left { content: "DEMO · datos simulados · corte 01 Oct 2026 09:40"; font: 500 8.5pt 'Geist', sans-serif; color: #5B6A80; }
  @bottom-right { content: "Hospital Ángeles Puebla · hoja " counter(page) " de " counter(pages); font: 500 8.5pt 'Geist', sans-serif; color: #5B6A80; } }
@media print {
  html, body, html[data-superficie] body { height: auto !important; overflow: visible !important; background: #fff !important; display: block !important; }
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #telefono, html[data-superficie] #telefono { position: static !important; inset: auto !important; width: auto !important; height: auto !important; overflow: visible !important;
    transform: none !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; }
  #pantalla { position: static !important; inset: auto !important; height: auto !important; overflow: visible !important; }
  .torre, .t-mov, .t-caja { min-height: 0 !important; background: #fff !important; }
  /* Fuera: el marco y lo que flota o sólo sirve en pantalla */
  .franja, .t-lado, .t-cabeza, .t-barra, .t-pestanas, .t-pregunta, .t-roles, .t-velo, .pd-recorrido, .pd-llegada, .pd-aviso, .pd-panel, .pd-respuesta,
  .pd-rol-flotante, .pd-hoja-fondo, .pd-instala, #pd-recorrido, #pd-llegada, #pd-aviso, #pd-panel, #pd-respuesta, #pd-roles,
  [data-preguntar], .sigue, .btn, .enlace, .botonera, .t-sug, .po-cta, .po-qr, .po-pie, kbd { display: none !important; }
  /* Una columna, el ancho de la hoja */
  .t-esc { display: block !important; min-height: 0 !important; }
  .t-cuerpo { display: block !important; }
  .t-pagina { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .t-mov { max-width: none !important; padding: 0 !important; font-size: 13px; }
  .t-mov .t-bloques, .t-mov-cab, .t-mov .t-fuente { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  .t-pagina::before, .t-mov::before { content: "Ángeles · Torre de control · Hospital Ángeles Puebla"; display: block; margin: 0 0 10px; padding-bottom: 8px;
    border-bottom: 1.5px solid #0B3B8C; font: 600 9pt/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #0A2A66; }
  .t-pagina::after, .t-mov::after { content: "DEMO · datos simulados · corte 01 Oct 2026 09:40 · datos ilustrativos para fines de demostración"; display: block;
    margin-top: 14px; padding-top: 8px; border-top: 1px solid #D3DBE5; font: 400 8.5pt/1.4 var(--sans); color: #5B6A80; }
  /* Papel: sin sombras, sin movimiento, sin capas pegajosas; las tarjetas no se parten entre hojas */
  *, *::before, *::after { box-shadow: none !important; animation: none !important; transition: none !important; }
  .entra, .voltea-entra { opacity: 1 !important; transform: none !important; }
  [style*="sticky"], .lado, .t-lado, .t-cabeza { position: static !important; }
  .panel, .kpi, .tarjeta, .cifra, .alerta, .hallazgo, .tema, .caja, .puerta, .fila, .b-decision, .b-estado, .respuesta, .po-rol, .po-historia,
  section.b, figure, tr, .estado, .horizonte, aside, .x-card { break-inside: avoid; page-break-inside: avoid; }
  [data-heroe] .verbo, [data-heroe] .ir, [data-heroe] .k-pie .enlace { display: none !important; }
  h1, h2, h3, .b-tit, .h-sec, .eyebrow { break-after: avoid; page-break-after: avoid; }
  .panel, .kpi, .tarjeta, .cifra, .alerta, .hallazgo, .tema, .caja, .puerta, .b-decision .panel, .b-estado .aviso { border-color: #D3DBE5 !important; }
  a[href]::after { content: none !important; }
}

/* ============================ MODO AUDITOR (IDEAS A5) · ¿de dónde sale este número? ============================
   Prendido (html[data-auditor-activo]): la cifra con data-fuente lleva contorno; la que no, fondo gris. Todo quieto: sin filtros
   ni movimiento en el contorno (WebKit). El panel reusa el contenedor de la respuesta de Ángeles AI (.pd-respuesta). */
.t-auditor { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--card); color: var(--ink-700); font: 500 13px/1 var(--sans); white-space: nowrap; cursor: pointer; }
.t-auditor .ico { width: 15px; height: 15px; color: var(--angeles-700); }
.t-auditor:hover { border-color: var(--angeles-200); background: var(--angeles-50); }
.t-auditor[aria-pressed="true"] { border-color: var(--angeles-700); background: var(--angeles-800); color: #fff; }
.t-auditor[aria-pressed="true"] .ico { color: #fff; }
.t-barra .t-auditor-mov { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 14px; }
.t-barra .t-auditor-mov .ico { width: 19px; height: 19px; }
/* En la cabeza sólo el ícono (las migas ya van apretadas); el nombre lo dicen su aria-label y el chip al prenderlo. */
.t-cabeza .t-auditor { width: 48px; height: 48px; padding: 0; justify-content: center; flex: none; }
.t-cabeza .t-auditor span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

html[data-auditor-activo] #pantalla main .auditor-cifra { outline: 2px solid var(--angeles-500); outline-offset: 2px; border-radius: 4px; cursor: help; }
html[data-auditor-activo] #pantalla main .auditor-cifra .auditor-cifra { outline-style: dashed; }
html[data-auditor-activo] #pantalla main .auditor-elegida { outline-color: var(--angeles-800); outline-width: 3px; background-color: var(--angeles-50); }
html[data-auditor-activo] #pantalla main .auditor-sin-fuente { padding: 0 2px; border-radius: 3px; background: var(--muted); color: var(--ink-500) !important;
  box-shadow: inset 0 -1px 0 var(--ink-300); cursor: help; }
html[data-auditor-activo] #pantalla main .auditor-sin-fuente.auditor-elegida { box-shadow: inset 0 0 0 1px var(--ink-400); }

.auditor-panel { position: absolute; z-index: 72; top: 76px; right: 20px; width: min(380px, calc(100% - 24px)); max-height: calc(100% - 140px); border-color: var(--angeles-200); }
html[data-superficie="telefono"] .auditor-panel { top: auto; right: 12px; left: 12px; bottom: calc(var(--alto-pestanas, 64px) + 20px); width: auto; max-height: 64%; }
.auditor-panel .auditor-la-cifra { margin: 0; font: 600 17px/1.3 var(--sans); color: var(--ink-900); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.auditor-filas { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; margin: 0; font: 400 13.5px/1.4 var(--sans); }
.auditor-filas dt { padding-top: 1px; font: 600 11px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-500); }
.auditor-filas dd { margin: 0; color: var(--ink-900); overflow-wrap: anywhere; }
.auditor-filas dd b { font-family: var(--mono); font-weight: 600; color: var(--angeles-800); }
.auditor-vacio { color: var(--ink-500); font-style: italic; }
.auditor-ir { display: block; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--angeles-700); font: 600 13px/1.3 var(--sans); text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.auditor-no { margin: 0; font: 400 14px/1.45 var(--sans); color: var(--ink-700); }
.auditor-no b { color: var(--ink-900); }
.auditor-panel.sin { border-color: var(--line-2); }
.auditor-firmeza { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 400 13px/1.45 var(--sans); color: var(--ink-700); }
.auditor-firmeza span { flex: none; padding: 2px 8px; border-radius: var(--r-full); background: var(--muted); color: var(--ink-700); font: 600 11px/1.4 var(--sans); }
.auditor-firmeza span[data-f="supuesto"], .auditor-firmeza span[data-f="estimado"] { background: #FDF3E1; color: var(--warning-ink); }
.auditor-firmeza span[data-f="modelo"] { background: var(--angeles-50); color: var(--angeles-800); }
.auditor-chip .a-guia { font-weight: 600; color: var(--ink-900); }

.auditor-chip { position: absolute; z-index: 71; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px);
  padding: 8px 8px 8px 14px; border: 1px solid var(--angeles-200); border-radius: var(--r-full); background: var(--card); box-shadow: var(--shadow-overlay);
  font: 500 12.5px/1.2 var(--sans); color: var(--ink-700); white-space: nowrap; }
.auditor-chip b { font-weight: 600; color: var(--angeles-800); }
.auditor-chip span { display: inline-flex; align-items: center; gap: 6px; }
.auditor-chip i { width: 10px; height: 10px; border-radius: 3px; }
.auditor-chip .a-con { outline: 2px solid var(--angeles-500); outline-offset: -1px; }
.auditor-chip .a-sin { background: var(--muted); box-shadow: inset 0 0 0 1px var(--ink-300); }
.auditor-chip button { height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-full); background: var(--angeles-800); color: #fff; font: 600 12px/1 var(--sans); cursor: pointer; }
html[data-superficie="telefono"] .auditor-chip { bottom: calc(var(--alto-pestanas, 64px) + 16px); gap: 8px; font-size: 11.5px; }
html[data-superficie="telefono"] .auditor-chip b { display: none; }
html[data-historia] .auditor-chip { left: 24px; transform: none; }
@media print { #pd-auditor, #pd-auditor-chip { display: none !important; } }
/* El enlace al sticker del proyector (A1) se ve como los botones del pie de la portada. */
a.btn[data-sticker] { text-decoration: none; color: inherit; }

/* ============================ TABLETA (quirofanos-diseno, 11 oct 2026) ============================
   Enfermería en la sala y CEYE: la tableta de 820 × 1180 (marco en index.html, quirofanos-dueno). Es el escritorio sin
   barra lateral: arriba, una barra con el rol y sus pestañas; el resto, como en la laptop. Se lee de pie, sin guantes, a
   un brazo: pestañas y botones de ≥ 56 px, cuerpo de 15–16 px. Lo que flota (la cabeza) es vidrio; lo demás, papel. */
html[data-superficie="tableta"] #telefono { background: var(--canvas); color: var(--ink-900); }
html[data-superficie="tableta"] body { background: #E9EEF5; }
@media (min-width: 1000px) and (min-height: 640px) {
  html[data-superficie="tableta"] body { background: radial-gradient(120% 90% at 50% 0%, #F6F8FB 0%, #E3EAF3 60%, #D7E0EC 100%); }
  html[data-superficie="tableta"] #telefono { box-shadow: 0 0 0 16px #0E1A2B, 0 0 0 17px #2B3A50, 0 50px 110px -30px rgba(10,27,51,.55); }
}
html[data-superficie="tableta"] .pd-panel { color: var(--ink-900); }
html[data-superficie="tableta"] .pd-panel-marca, html[data-superficie="tableta"] .pd-panel dt, html[data-superficie="tableta"] .pd-camino small,
html[data-superficie="tableta"] .pd-panel-recorrido small, html[data-superficie="tableta"] .pd-qr small, html[data-superficie="tableta"] .pd-panel-nota { color: var(--ink-500); font-family: var(--sans); }
html[data-superficie="tableta"] .pd-panel-rol, html[data-superficie="tableta"] .pd-panel-contiene, html[data-superficie="tableta"] .pd-panel dd { color: var(--ink-700); }
html[data-superficie="tableta"] .pd-panel h2 { color: var(--angeles-900); font-weight: 600; letter-spacing: -.02em; }
html[data-superficie="tableta"] .pd-camino button, html[data-superficie="tableta"] .pd-panel-enlaces button { color: var(--angeles-800); font-weight: 500; }
html[data-superficie="tableta"] .pd-panel-recorrido { background: var(--card); border: 1px solid var(--line); color: var(--ink-700); }
html[data-superficie="tableta"] .pd-qr img { background: #fff; border: 1px solid var(--line); }
html[data-superficie="tableta"] .pd-qr b { color: var(--ink-900); }

.t-tab { position: relative; min-height: 100%; font-size: 15px; }
.t-tab-cabeza { position: sticky; top: 0; z-index: 8; background: var(--vidrio); -webkit-backdrop-filter: var(--vidrio-desenfoque); backdrop-filter: var(--vidrio-desenfoque);
  border-bottom: 1px solid var(--line); }
.t-tab-barra { display: flex; align-items: center; gap: 12px; height: 70px; padding: 3px 18px 0 14px; }
.t-tab-barra .t-marca-mov, .t-tab-barra .t-volver { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 14px; }
.t-tab-barra .t-volver { border: 1px solid var(--line-2); background: var(--card); }
.t-tab-barra .t-volver .ico { width: 24px; height: 24px; }
.t-tab-barra .t-marca-mov .sello { width: 38px; height: 38px; }
.t-tab-rol { flex: 1; min-width: 0; line-height: 1.15; }
.t-tab-rol b { display: block; font: 600 19px/1.2 var(--sans); letter-spacing: -.015em; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-tab-rol small { display: block; margin-top: 3px; font: 500 13px/1.25 var(--sans); color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-tab-barra .leyenda small { display: none; }
.t-tab-barra .t-auditor { width: 48px; height: 48px; padding: 0; justify-content: center; flex: none; border-radius: 14px; }
.t-tab-barra .t-auditor .ico { width: 20px; height: 20px; }
.t-tab-barra .t-auditor span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.t-tab-barra .t-rol-mov { display: grid; place-items: center; width: 52px; height: 52px; flex: none; }
.t-tab-barra .t-rol-mov .t-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--angeles-800); color: #fff; font: 600 13px/1 var(--sans); }
.t-tab-pestanas { display: flex; gap: 6px; padding: 2px 14px 10px; overflow-x: auto; scrollbar-width: none; }
.t-tab-pestanas::-webkit-scrollbar { display: none; }
.t-tab-pestana { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 56px; padding: 0 22px 0 16px; border: 1px solid transparent; border-radius: 16px;
  color: var(--ink-600); font: 600 16px/1.1 var(--sans); white-space: nowrap; transition: background var(--d-1), color var(--d-1), border-color var(--d-1); }
.t-tab-pestana .ico { width: 22px; height: 22px; }
.t-tab-pestana:hover { background: rgba(238,244,254,.7); color: var(--ink-900); }
.t-tab-pestana[aria-current="page"] { background: var(--angeles-50); border-color: var(--angeles-200); color: var(--angeles-800); }
.t-tab .t-pregunta-mov { margin: 14px 24px 0; }
.t-tab .t-pagina { max-width: none; padding: 20px 24px 72px; }
.t-tab .t-titulo { flex-direction: row; align-items: flex-end; }
.t-tab .t-titulo h1 { font-size: 26px; }
.t-tab .btn { min-height: 56px; padding: 0 20px; border-radius: 14px; font-size: 16px; }
.t-tab .btn .ico { width: 20px; height: 20px; }
.t-tab .fila { min-height: 64px; padding: 12px 18px; }
.t-tab .fila .txt b { font-size: 15.5px; }
.t-tab .fila .txt small { font-size: 13.5px; }
.t-tab .opcion { min-height: 52px; padding: 0 18px; font-size: 15.5px; }
.t-tab .campo input, .t-tab .campo textarea, .t-tab .campo select { min-height: 52px; font-size: 16px; }
.t-tab .atajo { min-height: 72px; }
.t-tableta .t-roles { top: 80px; right: 20px; width: 400px; max-height: calc(100% - 104px); overflow-y: auto; border-radius: var(--r-2xl); transform: translateY(-6px); }
.t-tableta .t-velo { background: rgba(10,27,51,.16); }
.t-tableta .t-rol-op { min-height: 60px; }
@media print { .t-tab-cabeza { display: none !important; } }

/* ============================ Ronda de diseño de todo el demo (ha-diseno-dueno, 11 oct 2026) ============================
   Una marca por pantalla: el chip de periodo de la héroe (Torre.ui.periodo, data-h-pantalla) o, en las de bloques, el del
   título; del marco sólo queda «DEMO · Datos simulados» en la barra de arriba. La fuente de la pantalla, sólo en modo auditor.
   «Buscar» y «Cambiar de rol» en el marco de toda pantalla; todo lo que se toca en teléfono y tableta, ≥ 48 px. */
html:not([data-auditor-activo]) [data-solo-auditor] { display: none !important; }
.t-lado-pie > .t-lado-linea { margin: 0 0 10px; font: 500 12px/1.35 var(--sans); color: var(--ink-500); }
.t-buscar { display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; padding: 0; border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--card); color: var(--ink-700); cursor: pointer; }
.t-buscar .ico { width: 18px; height: 18px; color: var(--angeles-700); }
.t-buscar:hover { border-color: var(--angeles-200); background: var(--angeles-50); }
.t-buscar span, .t-barra .t-auditor-mov span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.t-barra .t-buscar-mov { border: 0; background: transparent; border-radius: 14px; }
.t-barra .t-buscar-mov .ico { width: 21px; height: 21px; }
.t-barra .t-auditor-mov { border: 0; background: transparent; }
.t-barra .t-auditor-mov[aria-pressed="true"] { background: var(--angeles-800); }
.t-tab-barra .t-buscar { width: 52px; height: 52px; border-radius: 14px; }
.t-tab-barra .t-buscar .ico { width: 21px; height: 21px; }
.t-cabeza .t-auditor .ico { width: 18px; height: 18px; }
/* La barra de arriba aprieta en laptops de 1280: el botón del rol se queda en su avatar (su nombre lo dice el título). */
@container torre (max-width: 1279px) {
  .t-rol span:not(.t-avatar) { display: none; }
}
/* A 390 la barra de arriba es una fila: «DEMO · Datos simulados» · auditor · Buscar · el avatar del rol (sin su flecha). */
@container torre (max-width: 480px) {
  .t-rol { padding: 0 6px; gap: 0; }
  .t-rol > .ico { display: none; }
}

/* La portada en el vocabulario de la ronda (ha-diseno-dueno, 11 oct 2026): cada historia y cada rol, una tarjeta de una fila
   (≤ 8 palabras: ▶ · título · n pasos · dispositivos / ícono · rol · persona · dispositivo); «Cómo leer cada pantalla», plegado. */
.po-historias { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.po-historia { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; min-height: 64px; padding: 10px 14px 10px 12px; }
.po-historia .ph-txt { gap: 2px; }
.po-historia .ph-txt b { font-size: 14.5px; line-height: 1.25; }
.po-historia .ph-nw { white-space: nowrap; }
.po-roles { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.po-rol { flex-direction: row; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px 10px 12px; }
.po-rol .r-txt { flex: 1; min-width: 0; gap: 2px; }
.po-rol .r-txt b { font-size: 14.5px; }
.po-rol em { margin: 0 0 0 auto; }
.po-sec-cab p { font-size: 13.5px; }
details.po-leer > summary { list-style: none; cursor: pointer; }
details.po-leer > summary::-webkit-details-marker { display: none; }
details.po-leer > summary h2::after { content: ' ›'; color: var(--ink-400); }
details.po-leer[open] > summary h2::after { content: ' ⌄'; }
details.po-leer > summary:hover h2 { color: var(--angeles-800); }
/* «Iniciar demo» y «Sigue explorando» al pie de la barra lateral: dos botones de 48 px (el mapa y reiniciar quedan como enlaces). */
.t-lado-pie .t-demo, .t-lado-pie .t-sigue { width: 100%; min-height: 48px; margin-bottom: 8px; }
@container torre (max-width: 899px) { .t-lado .t-lado-pie .t-sigue { display: none; } }

/* «Presentar cada módulo» · el nivel visual (ha-presenta-diseno, 12 oct 2026; la estructura es de ha-presenta-portada). Para dos
   lectores de prisa (presentar-modulos §1 fila 8): el héroe es el azul institucional de la red (titular + la torre dibujada); la tira
   es una declaración (seis cifras públicas en una fila quieta, 2 × 3 en el teléfono); cada tarjeta lleva UNA cifra grande con su
   barra de meta (Torre.ui.meta, que rueda una vez al entrar a la vista) y el color sólo dice la excepción: rojo donde espera una
   acción suya, ámbar para atención; lo demás en tinta. Un ritmo: nombre → cifra → etiqueta → barra → lema → palanca → alcance →
   «Mueve» → los dos botones → «Entre como». Sin degradados, sin vidrio: el azul es plano y la torre dibujada, papel. */

/* El héroe: un panel azul institucional; encima, en blanco, sólo el titular, el botón principal, el QR y la torre dibujada. */
/* El panel sale de la columna de lectura (hasta 1360 px, nunca más ancho que la pantalla menos 32 px): la torre dibujada cabe completa. */
.t-portada .po-heroe { --ancho-heroe: min(calc(100cqi - 32px), 1360px); width: var(--ancho-heroe); margin: 6px 0 0 calc((100% - var(--ancho-heroe)) / 2);
  grid-template-columns: minmax(0, 1fr) clamp(540px, 50%, 620px); gap: 48px; padding: 64px 56px 60px 64px;
  border-radius: var(--r-2xl); background: var(--angeles-900); color: var(--card); }
.po-heroe .po-txt .eyebrow { color: var(--angeles-200); }
.po-heroe .po-txt h1 { font: 600 clamp(38px, 3.9cqi, 56px)/1.04 var(--sans); letter-spacing: -.04em; color: var(--card); text-wrap: balance; }
.po-heroe .po-sub { margin-top: 20px; font: 400 20px/1.45 var(--sans); color: var(--angeles-100); }
.po-heroe .po-cta { margin-top: 32px; }
.po-heroe .po-cta .btn.primario { background: var(--card); border-color: var(--card); color: var(--angeles-900); box-shadow: none; }
.po-heroe .po-cta .btn.primario:hover { background: var(--angeles-50); border-color: var(--angeles-50); }
.po-heroe .po-cta .btn.primario small { color: var(--ink-500); }
.po-heroe .po-cta .btn:not(.primario) { background: transparent; border-color: color-mix(in srgb, var(--card) 36%, transparent); color: var(--card); }
.po-heroe .po-cta .btn:not(.primario):hover { background: color-mix(in srgb, var(--card) 9%, transparent); }
.po-heroe .po-cta .btn:not(.primario) small { color: var(--angeles-200); }
.po-heroe :focus-visible { outline: 2px solid var(--card); outline-offset: 3px; }
.po-heroe .po-qr { margin-top: 22px; border: 0; background: var(--card); box-shadow: var(--shadow-overlay); }
.po-heroe .po-qr img { width: 112px; height: 112px; }
.po-heroe .po-nota { color: var(--angeles-200); }
.po-heroe .po-vista { padding-bottom: 64px; }
.po-heroe .pv-laptop { border-color: transparent; box-shadow: 0 40px 90px -36px color-mix(in srgb, var(--ink-900) 85%, transparent); }
/* El aviso que llega a la laptop se lee desde el otro lado de la mesa */
.po-heroe .pv-llega { top: 10px; right: 12px; width: 52%; padding: 8px 12px; }
/* El teléfono dibujado va entre el QR y la laptop, sobre la barra lateral (que no dice nada): no tapa ninguna cifra */
.po-heroe .pv-tel { left: -56px; right: auto; bottom: 22px; width: 120px; }
.po-heroe .pv-tel-pantalla b.mono { font-size: 10px; }
/* La torre dibujada angosta (1300–1350 px de pantalla): el saludo se achica y el aviso parte su título en dos líneas, nunca lo corta */
.po-heroe .po-vista { container: povista / inline-size; }
@container povista (min-width: 420px) and (max-width: 600px) {
  .po-heroe .pv-h { font-size: 16px; }
  .po-heroe .pv-llega { width: 50%; }
  .po-heroe .po-vista .pv-llega b { font-size: 11.5px; white-space: normal; }
}
.po-heroe .pv-llega small { font-size: 10px; }
.po-heroe .pv-llega b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-heroe .pv-llega span { font-size: 10.5px; }

/* Las secciones de la ronda: más aire que las de abajo; el título manda */
.po-red-sec, .po-mods-sec { margin-top: 0; padding-top: 52px; border-top: 0; }
.po-red-sec .po-sec-cab h2, .po-mods-sec .po-sec-cab h2 { font-size: 28px; letter-spacing: -.025em; }

/* La tira: una declaración. Seis columnas quietas separadas por una raya; la cifra (o el calificativo) primero, a la misma altura. */
.po-red { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.po-red-caja { display: flex; min-width: 0; border-left: 1px solid var(--line); }
.po-red-caja:first-child { border-left: 0; }
.po-red-ficha { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 24px 16px 18px; text-align: left;
  font: inherit; color: inherit; cursor: pointer; border: 0; border-radius: 0; background: transparent; transition: background-color var(--d-1) var(--suave); }
.po-red-ficha:hover, .po-red-ficha[aria-expanded="true"] { background: var(--card); }
.po-red-ficha:focus-visible { outline: none; box-shadow: inset var(--anillo); }
.po-red-dato { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 80px; margin-bottom: 10px; }
.po-red-num { font: 600 46px/1 var(--sans); letter-spacing: -.04em; color: var(--angeles-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.po-red-cual .po-red-num { font-size: 23px; line-height: 1.12; letter-spacing: -.02em; white-space: normal; text-wrap: balance; }
.po-red-resto { font: 500 15px/1.25 var(--sans); color: var(--angeles-900); }
.po-red-eti { font: 600 15px/1.3 var(--sans); color: var(--ink-900); text-wrap: balance; }
.po-red-ficha small { font: 400 12.5px/1.4 var(--sans); color: var(--ink-500); }
.po-red-mod { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px/1.3 var(--sans); color: var(--ink-600); }
.po-red-mod .ico { width: 13px; height: 13px; flex: none; color: var(--ink-400); }

/* Las tarjetas: una caja blanca, el pie («Entre como») en una banda del lienzo */
.po-mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.po-mods-periodo { display: block; margin-top: 4px; font: 500 11.5px/1.4 var(--mono); color: var(--ink-500); }
.po-mod { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-2xl); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  container: pomod / inline-size; }
.po-mod-cuerpo { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 26px 28px 22px; }
.po-mod-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.po-mod-cab h3 { font: 600 20px/1.2 var(--sans); letter-spacing: -.015em; color: var(--angeles-900); }
.po-mod-chip { flex: none; padding: 3px 9px; border-radius: var(--r-full); background: var(--muted); font: 500 11px/1.2 var(--mono); color: var(--ink-500); white-space: nowrap; }
/* LA cifra: Torre.ui.meta en grande y sin caja (la tarjeta ya es la caja); la etiqueta va antes de la barra */
.po-mod-cifra { display: flex; min-width: 0; margin: 0 -12px; }
.po-mod-cifra .tu-meta { gap: 8px; padding: 8px 12px 12px; border-color: transparent; background: transparent; box-shadow: none; }
.po-mod-cifra .tu-meta:hover, .po-mod-cifra .tu-meta[aria-expanded="true"] { background: var(--canvas); border-color: var(--line); box-shadow: none; }
.po-mod-cifra .tu-meta:focus-visible { box-shadow: var(--anillo); }
.po-mod-cifra .tu-meta-num { font-size: clamp(56px, 15cqi, 88px); line-height: 1; letter-spacing: -.05em; }
.po-mod-cifra .tu-meta-uni { font-size: clamp(20px, 4.6cqi, 30px); }
.po-mod-cifra .tu-meta-pie { order: 1; font: 500 15px/1.35 var(--sans); color: var(--ink-600); }
.po-mod-cifra .tu-meta-barra { order: 2; height: 10px; margin: 8px 0 2px; }
.po-mod-cifra .tu-meta-marca { top: -7px; bottom: -7px; }
.po-mod-lema { font: 600 18px/1.35 var(--sans); letter-spacing: -.01em; color: var(--ink-900); text-wrap: pretty; }
.po-mod-palanca { font: 400 15px/1.5 var(--sans); color: var(--ink-600); text-wrap: pretty; }
.po-mod-alcance { font: 400 13.5px/1.5 var(--sans); color: var(--ink-500); text-wrap: pretty; }
.po-mod-mueve { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.po-mod-mueve small, .po-mod-roles small { margin-right: 4px; font: 600 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.po-mod-mueve span { padding: 4px 10px; border-radius: var(--r-full); background: var(--muted); font: 500 12px/1.3 var(--sans); color: var(--ink-700); }
.po-mod-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; }
.po-mod-pie .btn { min-height: 48px; border-radius: 12px; }
.po-mod-ver { gap: 10px; padding: 0 16px 0 10px; text-align: left; }
.po-mod-ver .ph-play { width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: var(--angeles-800); color: #fff; stroke-width: 2; }
.po-mod-ver span { display: flex; flex-direction: column; gap: 2px; font: 600 14px/1.15 var(--sans); }
.po-mod-ver small { font: 400 11.5px/1.2 var(--sans); color: var(--ink-500); }
.po-mod-entrar .ico { width: 16px; height: 16px; }
.po-mod-otra { min-height: 40px; font-size: 13px; }
.po-mod-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 12px 20px 14px 28px; border-top: 1px solid var(--line); background: var(--canvas);
  border-radius: 0 0 calc(var(--r-2xl) - 1px) calc(var(--r-2xl) - 1px); }
.po-mod-rol { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 8px 0 6px; border-radius: var(--r-md); border: 0;
  background: transparent; font: 500 12.5px/1.2 var(--sans); color: var(--angeles-800); cursor: pointer; }
.po-mod-rol .ico { width: 14px; height: 14px; color: var(--ink-400); }
.po-mod-rol:hover { background: var(--card); color: var(--angeles-900); }

.po-puerta { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 18px; padding: 16px 20px; text-align: left; font: inherit; color: inherit;
  cursor: pointer; border-radius: var(--r-xl); border: 1px dashed var(--line-2); background: transparent; }
.po-puerta:hover { border-color: var(--angeles-200); background: var(--card); }
.po-puerta .r-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--muted); color: var(--ink-600); }
.po-puerta-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.po-puerta-txt b { font: 600 15px/1.25 var(--sans); color: var(--ink-900); }
.po-puerta-txt small { font: 400 13px/1.45 var(--sans); color: var(--ink-500); }
.po-puerta em { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex: none; font: 600 13.5px/1 var(--sans); font-style: normal; color: var(--angeles-800); }
.po-puerta em .ico { width: 16px; height: 16px; }

/* Dos columnas sólo desde 1300 px (la torre dibujada de 574–620 px cabe entera); si no, la torre baja debajo del texto. */
@container torre (max-width: 1299px) {
  .t-portada .po-heroe { width: auto; margin-left: 0; grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 52px 48px 48px; }
  .po-heroe .po-txt h1 { max-width: 20ch; }
  .po-heroe .po-vista { width: 100%; max-width: 640px; }
  .po-heroe .pv-tel { left: -26px; }
}
@container torre (max-width: 1099px) {
  .t-portada .po-heroe { padding: 48px 40px; }
  .po-red { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .po-red-caja:nth-child(3n+1) { border-left: 0; }
  .po-red-caja:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@container torre (max-width: 899px) {
  .po-mods { grid-template-columns: minmax(0, 1fr); }
}
@container torre (max-width: 640px) {
  .t-portada .po-heroe { gap: 24px; margin-top: 2px; padding: 28px 20px 22px; border-radius: var(--r-xl); }
  .po-heroe .po-txt h1 { font-size: 34px; }
  .po-heroe .po-sub { margin-top: 14px; font-size: 17px; }
  .po-heroe .po-cta { margin-top: 24px; }
  .po-red-sec, .po-mods-sec { padding-top: 36px; }
  .po-red-sec .po-sec-cab h2, .po-mods-sec .po-sec-cab h2 { font-size: 24px; }
  .po-red { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .po-red-caja:nth-child(n) { border-left: 1px solid var(--line); border-top: 0; }
  .po-red-caja:nth-child(2n+1) { border-left: 0; }
  .po-red-caja:nth-child(n+3) { border-top: 1px solid var(--line); }
  .po-red-ficha { padding: 18px 12px 14px; }
  .po-red-dato { min-height: 62px; margin-bottom: 6px; }
  .po-red-num { font-size: 36px; }
  .po-red-cual .po-red-num { font-size: 21px; }
  .po-red-eti { font-size: 14.5px; }
  .po-mods { gap: 14px; }
  .po-mod-cuerpo { gap: 12px; padding: 20px 18px 18px; }
  .po-mod-cab h3 { font-size: 19px; }
  .po-mod-lema { font-size: 17px; }
  .po-mod-pie .btn { flex: 1 1 auto; }
  .po-mod-roles { padding: 10px 12px 12px 18px; }
  .po-mod-rol { min-height: 40px; }
  .po-puerta { padding: 12px 14px; gap: 12px; }
  .po-puerta em { display: none; }
  /* La vista del héroe en el teléfono: el aviso baja al pie de la laptop (no tapa el saludo) y el teléfono dibujado se va (tapaba CAPEX). */
  .po-heroe .po-vista { padding-bottom: 0; }
  .po-heroe .pv-llega { position: static; grid-column: 1 / -1; width: auto; margin: 0 10px 10px; }
  .pv-tel { display: none; }
}

/* Ronda 3 · la tarjeta es la promesa (ha-presenta-diseno, 12 oct 2026, 20:0x; Jorge 19:4x: «compro este sistema, ¿cómo mejora mis
   números?»). El par hoy → con el sistema es el héroe; debajo su etiqueta, la barra con las dos (lo de hoy lleno, la meta como marca),
   el plazo con su base en la misma línea, «Cómo:» y «Gana:». Las cuatro con la misma forma: se leen como una fila de un tablero. */
.po-prom-caja { gap: 6px; }
.po-prom-par { display: flex; align-items: stretch; flex-wrap: wrap; gap: 4px 16px; min-width: 0; }
.po-prom-hoy { justify-content: space-between; }
.po-prom-hoy, .po-prom-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.po-prom-par small { font: 600 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.po-mod-cifra.po-prom .po-prom-meta small { color: var(--angeles-800); }
.po-mod-cifra.po-prom .po-prom-hoy .tu-meta-num { font-size: clamp(40px, 10.5cqi, 60px); }
.po-mod-cifra.po-prom .po-prom-hoy .tu-meta-uni { font-size: clamp(16px, 3.6cqi, 22px); }
.po-mod-cifra.po-prom .po-prom-meta .tu-meta-num { font-size: clamp(52px, 14cqi, 84px); }
.po-mod-cifra.po-prom .po-prom-meta .tu-meta-uni { font-size: clamp(20px, 4.4cqi, 28px); }
.po-mod-cifra.po-prom .po-prom-meta .tu-meta-cifra, .po-mod-cifra.po-prom .po-prom-meta .tu-meta-uni { color: var(--angeles-800); }
.po-prom-flecha { display: grid; place-items: center; align-self: flex-end; padding-bottom: clamp(8px, 2.4cqi, 16px); color: var(--ink-400); }
.po-prom-flecha .ico { width: clamp(22px, 5cqi, 30px); height: clamp(22px, 5cqi, 30px); stroke-width: 2; }
.po-mod-cifra.po-prom .po-prom-meta .tu-rd::before { transition-delay: calc(450ms + var(--k, 0) * 70ms); }
.po-prom-plazo { order: 3; font: 400 13.5px/1.45 var(--sans); color: var(--ink-500); text-wrap: pretty; }
.po-prom-plazo { font-weight: 600; color: var(--ink-900); }
.po-mods-nota { margin-top: 18px; font: 400 14px/1.5 var(--sans); color: var(--ink-500); }
.po-mods-nota + .po-puerta { margin-top: 8px; }
.po-prom-linea { font: 400 15px/1.5 var(--sans); color: var(--ink-700); text-wrap: pretty; }
.po-prom-linea b { font-weight: 600; color: var(--ink-900); }
.po-prom-gana { font-weight: 500; color: var(--ink-900); }
.po-mod[data-po-foco] { box-shadow: var(--anillo), var(--shadow-float); }
.po-mods-bajo { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font: 500 14.5px/1.5 var(--sans); color: var(--ink-700); text-wrap: pretty; }
.po-mods-bajo .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--angeles-800); }
/* «Las cuatro promesas»: la hoja para imprimir o reenviar, abre en otra pestaña (la portada sigue en la junta). */
.po-promesas { margin-top: 14px; min-height: 52px; padding: 8px 16px 8px 14px; gap: 12px; text-align: left; text-decoration: none; }
.po-promesas > span { display: flex; flex-direction: column; gap: 2px; }
.po-promesas b { font: 600 14.5px/1.2 var(--sans); color: var(--ink-900); }
.po-promesas small { font: 400 12.5px/1.25 var(--sans); color: var(--ink-500); }
.po-promesas .ico:first-child { color: var(--angeles-800); }
.po-promesas .ico:last-child { width: 15px; height: 15px; color: var(--ink-400); }

/* La tira con su liga: lo que dijo la red → «Le pide a Puebla: …» → el módulo que lo contesta (salta a su tarjeta) */
.po-red-caja.con-liga { flex-direction: column; transition: background-color var(--d-1) var(--suave); }
.po-red-caja.con-liga .po-red-ficha { flex: 0 0 auto; padding-bottom: 10px; }
.po-red-caja.con-liga:hover { background: var(--card); }
.po-red-caja.con-liga .po-red-ficha:hover, .po-red-caja.con-liga .po-red-ficha[aria-expanded="true"] { background: transparent; }
.po-red-pide { padding: 0 16px; font: 400 13px/1.45 var(--sans); color: var(--ink-700); text-wrap: pretty; }
.po-red-pide small { font: 600 13px/1.45 var(--sans); color: var(--ink-900); }
.po-red-liga { display: inline-flex; align-items: center; align-self: flex-start; gap: 4px; min-height: 32px; margin: auto 10px 12px; padding: 0 6px; border: 0; border-radius: var(--r-md);
  background: transparent; font: 600 13px/1.2 var(--sans); color: var(--angeles-800); cursor: pointer; }
.po-red-liga .ico { width: 15px; height: 15px; }
.po-red-liga:hover { background: var(--angeles-50); color: var(--angeles-900); }
.po-red-liga:focus-visible { outline: none; box-shadow: var(--anillo); }
@container pomod (max-width: 420px) {
  .po-prom-par { gap: 4px 10px; }
  .po-mod-cifra.po-prom .po-prom-hoy .tu-meta-num { font-size: 36px; }
  .po-mod-cifra.po-prom .po-prom-meta .tu-meta-num { font-size: 46px; }
}
@container torre (max-width: 640px) {
  .po-red-pide { padding: 0 12px; }
  .po-red-liga { min-height: 40px; margin: auto 6px 10px; }
  .po-prom-linea { font-size: 14.5px; }
}
.po-prom-va { display: flex; align-items: flex-end; gap: 4px 16px; min-width: 0; }
.po-mod-cifra.po-prom .po-prom-aprox { font: 500 clamp(24px, 6cqi, 40px)/1 var(--sans); white-space: pre; }
/* El par va siempre en una fila (Jorge 20:2x: las cuatro como Quirófanos): hoy → con el sistema lado a lado; cuando falta ancho, la
   unidad con su tiempo («días desde el primer mes») se parte en renglones junto a su propia cifra, alineada a la última línea. Sólo
   una frase («no falta ninguna») puede bajar el lado entero. */
.po-mod-cifra.po-prom .po-prom-par { flex-wrap: nowrap; }
.po-mod-cifra.po-prom .po-prom-par:has(.po-prom-txt) { flex-wrap: wrap; }
.po-mod-cifra.po-prom .po-prom-hoy { flex: none; }
.po-mod-cifra.po-prom .po-prom-va { flex: 1 1 auto; min-width: 0; }
.po-mod-cifra.po-prom .tu-meta-cifra { flex-wrap: nowrap; align-items: baseline; align-items: last baseline; min-width: 0; }
.po-mod-cifra.po-prom .tu-meta-num { flex: none; }
.po-mod-cifra.po-prom .tu-meta-uni { flex: 0 1 auto; min-width: 0; line-height: 1.15; text-wrap: balance; }
.po-prom-txt { flex: 1 1 auto; }
.po-prom-frase { font: 600 clamp(22px, 5.2cqi, 30px)/1.15 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
.po-prom-txt .tu-meta-cifra { padding-bottom: 2px; }