/* PressF8 — estilos de la aplicación (extraídos de index.html el 2026-09-06, Fase D2; sin build). */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #0f1117;
      --surface: #1a1d27;
      --border: #2a2d3e;
      --primary: #ff6a3d;
      --primary-dim: #d9502a;
      --text: #e2e8f0;
      --text-dim: #718096;
      --error: #fc8181;
      --warning: #f6ad55;
      --escala: #8fb3e0;   /* recuadro de las clasificaciones (escalas-destacadas) */
      --spelling: #63b3ed;
      --laterality: #f6ad55;
      --consistency: #fc8181;
      --coherence: #f687b3;
      --format: #68d391;
      --other: #b794f4;
      --preference: #4fd1c5;
      --clinical-value: #81e6d9;
      /* Paleta rojiza de las inconsistencias (2026-09-27, spec
         inconsistencias-dos-frases-color): las 4 son tonos de la familia
         del rojo (rojo / carmín / magenta / granate), separados entre sí y
         del ámbar (--warning, tono naranja) para que no se confundan. Texto
         del color sobre el fondo resultante (color-mix 28% sobre --surface
         #1a1d27), medido con la fórmula WCAG — los 4 pasan 4.5:1:
           wc-1 rojo    #ff9a9a -> 4.57:1
           wc-2 magenta #ff90e4 -> 4.58:1
           wc-3 coral   #ffa07a -> 4.64:1
           wc-4 fucsia  #e0a6ff -> 4.72:1
         (2026-09-27, 2.ª versión: matices separados a pedido de Álvaro; el
         magenta va segundo porque casi nunca hay más de dos inconsistencias) */
      --wc-1: #ff9a9a;
      --wc-2: #ff90e4;
      --wc-3: #ffa07a;
      --wc-4: #e0a6ff;
      /* Acento de marca (Fase D2): navegación activa y foco. No es un color
         semántico y no reemplaza al verde del tema oscuro. */
      --accent: #ff6a3d;
      --accent-text: #ff8a66;
      --key-face: #fffdf9;
      --key-edge: #cfc5b5;
      --key-border: #d9d0c2;
      --key-text: #14110f;
      --radius: 12px;
      --radius-s: 8px;
      --space-1: 6px; --space-2: 10px; --space-3: 16px; --space-4: 24px; --space-5: 32px;
    }
    /* Tema claro para SALA DE LECTURA OSCURA (2026-09-23, pedido de Álvaro: «en
       modo claro hay mucho brillo; se usa en una pieza oscura»). El marfil
       anterior (luminancia 0,93) con superficies #fff (1,00) emitía ~100 veces la
       luz del tema oscuro y el texto quedaba a 18,8:1, negro sobre blanco en su
       grado más duro. Ahora papel gris cálido (0,71 / 0,79) y texto a 12,5:1.
       Cada semántico se oscureció en su mismo tono hasta ≥4,6:1 sobre fondo,
       superficie y su propio tinte (medido con la fórmula WCAG; revisión de
       ux-visual). La marca pasa de coral a ladrillo: es lo que exige 4,5:1 sobre
       un fondo menos brillante; la tecla F8 conserva su coral fijo. */
    html[data-theme="light"] {
      --bg: #e0dbd1;
      --surface: #eae6de;
      --border: #b4a893;
      --border-strong: #8a7d68;   /* bordes de campos: 3,24:1 (WCAG 1.4.11) */
      --primary: #9a3a1c;
      --primary-dim: #86311a;
      --text: #1f1a16;
      --text-dim: #574e45;
      --error: #962d22;
      --warning: #6f4909;
      --escala: #2f5684;
      --spelling: #215286;
      --laterality: #6f4909;
      --consistency: #962d22;
      --coherence: #8c2661;
      --format: #1e5b3a;
      --other: #5b39aa;
      --preference: #1d5863;
      --clinical-value: #0b5a51;
      /* Misma paleta rojiza, versión oscura para fondo claro (mismo criterio
         que el resto del tema: cada tinte se oscurece hasta ≥4.5:1). Contra
         un fondo color-mix(28%) de este mismo valor sobre --surface #eae6de:
           wc-1 rojo    #a51c1c -> 5.15:1
           wc-2 magenta #9c1275 -> 5.18:1
           wc-3 coral   #a3380f -> 4.71:1
           wc-4 fucsia  #8a1f9c -> 5.31:1
         El fondo real que pinta la UI en este tema no es este color-mix, sino
         el tinte vivo del tema oscuro (ver rgba() más abajo) — con ese fondo
         el contraste medido es aún mejor, 6.57–6.66:1 (ver ese comentario). */
      --wc-1: #a51c1c;
      --wc-2: #9c1275;
      --wc-3: #a3380f;
      --wc-4: #8a1f9c;
      --accent: #9a3a1c;
      --accent-text: #9a3a1c;
      --key-face: #f3efe8;
      color-scheme: light;
    }
    /* Ajustes del tema claro fuera de las variables (colores fijos pensados para
       el oscuro que en claro no se leían). El tema oscuro no cambia. */
    html[data-theme="light"] .btn-primary { color: #ffffff; }   /* 3,75 → 7,01 */
    html[data-theme="light"] .conf-medium {
      background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--warning);
    }                                                                /* 1,45 → 5,57 */
    html[data-theme="light"] .conf-low {
      background: color-mix(in srgb, var(--error) 10%, transparent); color: var(--error);
    }                                                                /* 1,57 → 5,32 */
    /* Subrayado más oscuro en claro: #f6ad55 sobre el fondo claro no se ve. */
    html[data-theme="light"] .highlight-correction { text-decoration-color: #c26f0a; }
    html[data-theme="light"] .highlight-correction-puntuacion { border-bottom-color: #c26f0a; }
    /* Tintes vivos (los del oscuro) detrás del texto del token: el tinte del
       mismo color oscuro ensuciaba el fondo y bajaba el contraste a 3,2-3,9.
       Con la paleta rojiza de 2026-09-27 (wc-1..4 del :root de este tema)
       como texto sobre ESTE fondo, medido con la fórmula WCAG:
         wc-1 rojo    -> 5,16:1   wc-3 coral  -> 4,62:1
         wc-2 magenta -> 5,19:1   wc-4 fucsia -> 5,34:1  (tinte al 32 %) */
    html[data-theme="light"] .highlight-warning,
    html[data-theme="light"] .highlight-warning.wc-1,
    html[data-theme="light"] .highlight-hueco { background: rgba(255, 154, 154, 0.32); }
    html[data-theme="light"] .highlight-warning.wc-2 { background: rgba(255, 144, 228, 0.32); }
    html[data-theme="light"] .highlight-warning.wc-3 { background: rgba(255, 160, 122, 0.32); }
    html[data-theme="light"] .highlight-warning.wc-4 { background: rgba(224, 166, 255, 0.32); }
    html[data-theme="light"] textarea,
    html[data-theme="light"] .modal-input,
    html[data-theme="light"] .modal-select,
    html[data-theme="light"] .fb-note-input,
    html[data-theme="light"] .paciente-bar input,
    html[data-theme="light"] .paciente-bar select { border-color: var(--border-strong); }
    /* Verdes que sobraron de cuando el primario era verde: con la marca ladrillo
       quedaban fondos verdes detrás de texto de otro color. */
    html[data-theme="light"] .fb-btn.voted-up,
    html[data-theme="light"] .status-active,
    html[data-theme="light"] .tpl-badge,
    html[data-theme="light"] .cmd-change { background: color-mix(in srgb, var(--primary) 12%, transparent); }
    html[data-theme="light"] .fb-msg-user {
      background: color-mix(in srgb, var(--primary) 12%, transparent);
      border-color: color-mix(in srgb, var(--primary) 25%, transparent);
    }
    html[data-theme="light"] .queue-tag { color: var(--text); }          /* 3,08 → 7,36 */
    html[data-theme="light"] .fb-btn { opacity: .7; }
    html[data-theme="light"] .fb-btn:disabled { opacity: .45; }
    html[data-theme="light"] .tpl-suggest,
    html[data-theme="light"] #bridgeToast,
    html[data-theme="light"] .bridge-link-fallback { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }

    /* Login/bienvenida: SIEMPRE marfil + coral de la portada, sin importar el
       tema oscuro/claro elegido para trabajar (pedido de Álvaro, 2026-09-06 —
       "esta página debe seguir la misma estética que la página de bienvenida").
       Va después de html[data-theme="light"] a propósito, para ganarle incluso
       si el radiólogo tiene tema oscuro elegido. */
    @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500 700; font-display: swap;
      src: url("/static/fonts/Fraunces-latin.woff2") format("woff2"); }
    body.login-active {
      --bg: #faf7f2;
      --surface: #ffffff;
      --border: #e6ded2;
      --primary: #ff6a3d;
      --primary-dim: #d9502a;
      --text: #14110f;
      --text-dim: #6b6259;
      color-scheme: light;
    }
    body.login-active #loginScreen h2 {
      font-family: "Fraunces", Georgia, "Times New Roman", serif;
      font-weight: 600;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      font-size: 15px;
      line-height: 1.6;
      min-height: 100vh;
    }

    header {
      padding: 10px 32px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 12px;
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--bg);
    }

    .tagline { color: var(--text-dim); font-size: 13px; }

    #headerActions {
      margin-left: auto;
      display: none;
      align-items: center;
      gap: 10px;
    }

    #headerUsername {
      color: var(--text-dim);
      font-size: 13px;
    }
    .settings-trigger { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

    /* Cambio de tema (2026-09-07): dos círculos siempre visibles, no un toggle
       escondido en un menú — se ve de un vistazo cuál está activo. */
    .theme-switch { display: flex; align-items: center; gap: 6px; }
    .theme-circle {
      width: 22px; height: 22px; padding: 0; border-radius: 50%;
      border: 2px solid var(--border); box-shadow: none; cursor: pointer;
      transition: border-color 0.15s, transform 0.15s;
    }
    .theme-circle--light { background: #e0dbd1; }   /* vista previa del tema claro */
    .theme-circle--dark { background: #14171f; }
    .theme-circle:hover { border-color: var(--text-dim); }
    .theme-circle.active { border-color: var(--accent); transform: scale(1.1); }
    .theme-circle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

    /* 1400px y centrado (antes: 960px fijo con margen solo a la izquierda) —
       con la columna de plantillas de al lado sobraba espacio muerto a la
       derecha en pantallas anchas. Sigue angosto en la ventana real del
       shell gracias al @media de más abajo. */
    main { max-width: 1400px; margin: 0 auto; padding: 32px 24px; }

    #inputPanel { transition: opacity 0.35s ease; }
    #results    { transition: opacity 0.35s ease; }

    .panel {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 24px; margin-bottom: 20px;
    }

    label {
      display: block; font-size: 12px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.8px; color: var(--text-dim); margin-bottom: 10px;
    }

    textarea {
      width: 100%; min-height: 220px; background: var(--bg); border: 1px solid var(--border);
      border-radius: 8px; color: var(--text); font-family: inherit; font-size: 14px;
      line-height: 1.7; padding: 14px 16px; resize: vertical; transition: border-color 0.15s;
    }
    textarea:focus { outline: none; border-color: var(--primary); }
    textarea::placeholder { color: var(--text-dim); }

    .actions { display: flex; gap: 10px; margin-top: 14px; align-items: center; }

    button, a.btn-primary, a.btn-secondary {
      padding: 10px 22px; border-radius: 8px; border: none; font-size: 14px;
      font-weight: 600; cursor: pointer; transition: opacity 0.15s, background 0.15s;
    }
    button:disabled { opacity: 0.5; cursor: not-allowed; }
    /* button{} sí aplica display/cursor por herencia del navegador; un <a> no
       trae nada de eso — sin esto, "Descargar e instalar" y compañía se veían
       como un enlace subrayado con un color de fondo pegado encima, no como
       un botón (Álvaro, 2026-09-08). */
    a.btn-primary, a.btn-secondary {
      display: inline-block; text-decoration: none; text-align: center;
    }

    .btn-primary { background: var(--primary); color: #0f1117; }
    .btn-primary:hover:not(:disabled) { background: var(--primary-dim); }

    .btn-secondary { background: var(--border); color: var(--text); }
    .btn-secondary:hover:not(:disabled) { opacity: 0.8; }

    .btn-sm { padding: 5px 12px; font-size: 12px; }

    .char-count { margin-left: auto; font-size: 12px; color: var(--text-dim); }
    .char-count.warn { color: var(--warning); }

    .spinner {
      display: none; width: 18px; height: 18px; border: 2px solid var(--border);
      border-top-color: var(--primary); border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    #results { display: none; }

    .section-title {
      font-size: 12px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.8px; color: var(--text-dim); margin-bottom: 14px;
    }

    .corrected-text {
      background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
      padding: 14px 16px; font-size: 14px; line-height: 1.7;
      white-space: pre-wrap; word-break: break-word;
    }

    /* Corrección = SUBRAYADO ámbar, nunca fondo (Álvaro, 2026-09-27): el fondo
       queda reservado para las alertas rojizas, y una palabra corregida dentro
       de una frase roja ya no corta la franja. Mismo lenguaje en todas partes. */
    .highlight-correction {
      background: none; color: var(--warning); font-weight: 600;
      text-decoration: underline; text-decoration-color: #f6ad55;
      text-decoration-thickness: 3px; text-underline-offset: 3px;
      text-decoration-skip-ink: none;
    }
    /* Puntuación y espaciado modificados (2026-08-07, 2026-09-22): se marca
       SOLO el signo o el espacio modificado, nunca la letra adyacente. Un punto,
       coma o espacio a solas son invisibles o casi inapreciables, así que el
       <mark> se ensancha y se le sube el contraste: el ámbar se ve sin tener
       que abarcar un carácter que en realidad no cambió. */
    .highlight-correction-puntuacion {
      display: inline-block;
      min-width: 0.62em;
      text-align: center;
      padding: 0 3px;
      text-decoration: none;
      border-bottom: 3px solid #f6ad55;
      /* inline-block toma el alto de la línea completa (28,5 px con
         line-height 1.9) y el ámbar quedaba como una barra. Con esto la marca
         mide 17,3 px —una fichita a la altura del texto— y el alto del párrafo
         no cambia: medido en ambos casos, 147,6 px. */
      line-height: 1.15;
      vertical-align: baseline;
    }
    /* Una alerta cuya frase el radiólogo ya editó: deja de gritar, pero el
       <mark> se conserva en el DOM. Quitar el nodo mientras se escribe adentro
       se lleva el cursor; cambiarle la clase no toca la estructura. */
    .highlight-resuelto {
      background: none; color: inherit; padding: 0; font-weight: inherit;
    }
    /* Clasificaciones destacadas (docs/specs/escalas-destacadas-2026-10-12.md):
       recuadro suave sobre «escala + valor», solo visual. Es un elemento propio
       (<pf-escala>) que envuelve o queda dentro de los <mark>, sin tocarlos: el
       ámbar de una corrección y el rojo de una alerta siguen siendo los de siempre. */
    .escala {
      border: 1px solid color-mix(in srgb, var(--escala) 80%, transparent);  /* ≥3:1 en ambos temas (WCAG 1.4.11) */
      background: color-mix(in srgb, var(--escala) 8%, transparent);
      border-radius: 4px; padding: 0 4px;
      /* `pre`, no `nowrap`: nowrap colapsa tabs y espacios dobles en innerText y mete
         &nbsp; al teclear un espacio adentro, y eso llegaría al RIS. */
      white-space: pre;
    }
    /* Fuera de escala: el rojo lo pone la marca de alerta; el DOM no distingue
       el tipo de alerta, así que el recuadro no cambia de borde. */
    .highlight-warning {
      background: color-mix(in srgb, var(--error) 25%, transparent); color: var(--error);
      border-radius: 3px; padding: 0 2px; font-weight: 600;
    }
    /* Hueco de plantilla sin llenar (docs/specs/huecos-propios-2026-09-28.md):
       mismo lenguaje visual que .highlight-warning (fondo rojizo + texto rojo),
       clase aparte porque no participa de la reja de lateralidad/consistencia
       ni de los colores por conflicto (wc-1..4). */
    .highlight-hueco {
      background: color-mix(in srgb, var(--error) 25%, transparent); color: var(--error);
      border-radius: 3px; padding: 0 2px; font-weight: 600;
    }
    /* Un color por conflicto (2026-08-06): las DOS frases que chocan comparten
       color, y un segundo conflicto del mismo informe usa el siguiente. La
       clase base `highlight-warning` se conserva SIEMPRE — la reja clínica
       selecciona por ella. El fondo se deriva del mismo token que el texto
       (color-mix) para que el tema claro no deje un rosado fijo del oscuro. */
    .highlight-warning.wc-1 { background: color-mix(in srgb, var(--wc-1) 28%, transparent); color: var(--wc-1); }
    .highlight-warning.wc-2 { background: color-mix(in srgb, var(--wc-2) 28%, transparent); color: var(--wc-2); }
    .highlight-warning.wc-3 { background: color-mix(in srgb, var(--wc-3) 28%, transparent); color: var(--wc-3); }
    .highlight-warning.wc-4 { background: color-mix(in srgb, var(--wc-4) 28%, transparent); color: var(--wc-4); }
    .conflict-dot {
      display: inline-block; width: 9px; height: 9px; border-radius: 50%;
      margin-right: 6px; vertical-align: middle; flex: 0 0 auto;
    }
    .conflict-dot.wc-1 { background: var(--wc-1); }
    .conflict-dot.wc-2 { background: var(--wc-2); }
    .conflict-dot.wc-3 { background: var(--wc-3); }
    .conflict-dot.wc-4 { background: var(--wc-4); }
    #correctedText[contenteditable="true"] {
      outline: 1px dashed var(--border); border-radius: 4px;
      cursor: text;
    }
    #correctedText[contenteditable="true"]:focus { outline: 1px solid var(--primary-dim); }
    /* Botón F8 contextual con estética de tecla */
    /* Tecla F8 (2026-09-07): la MISMA tecla navy+coral del ícono de marca
       (logo.svg?v=20260928a/logo-light.svg?v=20260928a — autocontenida, no depende del tema de la
       página), no la tecla marfil que tenía antes. El estado se dice con el
       color del borde inferior y la etiqueta, no del cuerpo. */
    .btn-f8 {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 52px;
      height: 52px;
      padding: 0;
      border-radius: 11px;
      font-size: 1.25rem;
      font-weight: 800;
      cursor: pointer;
      color: #ff6a3d;
      border: 1.5px solid #ff6a3d;
      background: linear-gradient(135deg, #2d3148, #1e2235);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 5px 0 var(--key-edge), 0 8px 16px rgba(0,0,0,0.28);
      transition: transform 0.12s, box-shadow 0.12s, opacity 0.15s;
      letter-spacing: 0;
    }
    .btn-f8--paste { --key-edge: var(--primary-dim); }
    .btn-f8--copy { --key-edge: var(--primary-dim); }
    /* "Nuevo" (2026-09-07): misma tecla física que F8 — mismo cuadrado 52x52,
       mismo bisel/relieve — pero en tono neutro marfil, para que combine con
       F8 sin poder confundirse con su acción. */
    .btn-f8--new {
      --key-edge: var(--key-border);
      color: var(--key-text);
      border-color: var(--key-border);
      background: var(--key-face);
      box-shadow: inset 0 1px 0 #fff, 0 5px 0 var(--key-edge), 0 8px 16px rgba(0,0,0,0.14);
    }
    .btn-f8--new:hover:not(:disabled) { color: var(--key-text); }
    .btn-f8:hover:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 0 var(--key-edge), 0 6px 12px rgba(0,0,0,0.28); }
    .btn-f8:disabled { opacity: 0.4; cursor: not-allowed; }
    .f8-icon { display: none; }
    .f8-label { font-size: 0; }
    .f8-label::before { content: 'F8'; font-size: 19px; }
    .f8-label::after {
      content: attr(data-tooltip);
      position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%) translateY(-3px);
      width: max-content; max-width: 220px; white-space: nowrap; pointer-events: none;
      background: var(--surface); border: 1px solid var(--border); color: var(--text);
      border-radius: 6px; padding: 6px 8px; font-size: 12px; font-weight: 600;
      opacity: 0; transition: opacity 0.15s 0.4s, transform 0.15s 0.4s; z-index: 50;
    }
    .btn-f8:hover .f8-label::after { opacity: 1; transform: translateX(-50%) translateY(0); }
    .new-label { font-size: 0; }
    .new-label::before { content: '⌫'; font-size: 22px; font-weight: 400; color: var(--key-text); }
    .new-label::after {
      content: attr(data-tooltip);
      position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%) translateY(-3px);
      width: max-content; max-width: 220px; white-space: nowrap; pointer-events: none;
      background: var(--surface); border: 1px solid var(--border); color: var(--text);
      border-radius: 6px; padding: 6px 8px; font-size: 12px; font-weight: 600;
      opacity: 0; transition: opacity 0.15s 0.4s, transform 0.15s 0.4s; z-index: 50;
      text-transform: none;
      letter-spacing: normal;
    }
    .btn-f8:hover .new-label::after { opacity: 1; transform: translateX(-50%) translateY(0); }
    .link-dim {
      font-size: 12px; color: var(--text-dim); text-decoration: none;
      border-bottom: 1px dotted var(--text-dim); cursor: pointer;
    }
    .link-dim:hover { color: var(--text); }
    #copyBlockedMsg {
      font-size: 12px; color: var(--error); margin-top: 6px; display: none;
    }
    .paste-fail {
      margin: 0 0 12px; padding: 10px 14px; border-radius: 8px;
      border: 1px solid var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent);
    }
    .paste-fail-msg { font-size: 13px; font-weight: 600; color: var(--warning); margin-bottom: 8px; }
    .paste-fail-actions { display: flex; gap: 8px; flex-wrap: wrap; }

    .correction-item {
      display: flex; gap: 12px; padding: 10px 14px; border-radius: 8px;
      background: var(--bg); border: 1px solid var(--border); margin-bottom: 8px;
      align-items: flex-start;
    }

    .cat-badge {
      flex-shrink: 0; font-size: 10px; font-weight: 700; text-transform: uppercase;
      padding: 3px 8px; border-radius: 4px; margin-top: 2px;
    }
    .cat-spelling  { background: rgba(99,179,237,0.15);  color: var(--spelling); }
    .cat-laterality{ background: rgba(246,173,85,0.15);   color: var(--laterality); }
    .cat-consistency{background: rgba(252,129,129,0.15);  color: var(--consistency); }
    .cat-coherence { background: rgba(246,135,179,0.15);  color: var(--coherence); }
    .cat-format    { background: rgba(104,211,145,0.15);  color: var(--format); }
    .cat-other     { background: rgba(183,148,244,0.15);  color: var(--other); }
    .cat-preference{ background: rgba(79,209,197,0.15);   color: var(--preference); }

    .conf-badge {
      font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
      padding: 1px 5px; border-radius: 3px; margin-top: 3px; display: inline-block;
    }
    .conf-medium { background: rgba(246,173,85,0.1); color: rgba(246,173,85,0.7); }
    .conf-low    { background: rgba(252,129,129,0.1); color: rgba(252,129,129,0.6); }

    .correction-badge-col { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex-shrink: 0; }

    .feedback-btns {
      display: flex; flex-direction: column; gap: 3px; margin-left: auto; flex-shrink: 0;
    }
    .fb-btn {
      background: none; border: 1px solid var(--border); border-radius: 5px;
      font-size: 12px; padding: 2px 6px; cursor: pointer; opacity: 0.5;
      transition: opacity 0.15s, background 0.15s; color: var(--text);
      font-weight: normal;
    }
    .fb-btn:hover:not(:disabled) { opacity: 1; background: var(--surface); }
    .fb-btn:disabled { cursor: default; opacity: 0.3; }
    .fb-btn.voted-up   { opacity: 1; background: rgba(62,207,142,0.15); border-color: var(--primary); }
    .fb-btn.voted-down { opacity: 1; background: rgba(252,129,129,0.15); border-color: var(--error); }

    .fb-note-input {
      flex: 1; padding: 6px 8px; background: var(--bg); border: 1px solid var(--border);
      border-radius: 6px; color: var(--text); font-size: 12px; font-family: inherit;
    }
    /* Chat de feedback tras un 👎 */
    .fb-chat { display: none; margin-top: 8px; }
    .fb-chat-thread { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
    .fb-msg {
      max-width: 85%; padding: 6px 10px; border-radius: 10px; font-size: 12.5px;
      line-height: 1.5; white-space: pre-wrap; word-break: break-word;
    }
    .fb-msg-user { align-self: flex-end; background: rgba(62,207,142,0.12); border: 1px solid rgba(62,207,142,0.25); }
    .fb-msg-bot  { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); }
    .fb-msg-bot.fb-msg-error { border-color: rgba(252,129,129,0.4); color: var(--error); }
    .fb-chat-input-row { display: flex; gap: 6px; }
    /* --- Sidebar de sugerencias clínicas --- */
    #results { position: relative; }
    #clinicalSidebar {
      position: absolute; left: calc(100% + 16px); top: 0; width: 380px;
      max-height: calc(100vh - 120px); overflow-y: auto;
      background: var(--surface); border: 1px solid var(--border);
      border-left: 2px solid rgba(129,230,217,0.4);
      border-radius: 10px; padding: 16px;
    }
    .clinical-group-header { display:flex; justify-content:space-between; align-items:center; cursor:pointer; padding:6px 0; border-bottom:1px solid var(--border); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-dim); user-select:none; }
    .clinical-group-header:hover { color:var(--text); }
    .clinical-group-chevron { font-size:9px; transition:transform 0.2s; }
    .clinical-group-chevron.collapsed { transform:rotate(-90deg); }
    .clinical-group-body { padding-top:8px; }
    .clinical-group-body.collapsed { display:none; }
    /* Guías oficiales en «Herramientas» (spec guias-oficiales-2026-10-06) */
    .guias-chips { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 14px; font-size:12.5px; color:var(--text-dim); }
    .guia-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; text-decoration:none;
                 color:var(--clinical-value); background:color-mix(in srgb, var(--clinical-value) 10%, transparent);
                 border:1px solid color-mix(in srgb, var(--clinical-value) 35%, transparent); }
    .guia-chip:hover { background:color-mix(in srgb, var(--clinical-value) 18%, transparent); }
    .guias-chips[hidden] { display:none; }
    .clinical-card { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:8px 10px; margin-bottom:6px; }
    .clinical-value { font-size:20px; font-weight:700; color:var(--clinical-value); line-height:1.2; }
    .clinical-unit { font-size:13px; color:var(--text-dim); }
    .clinical-formula { font-size:11px; color:var(--text-dim); margin-top:4px; margin-bottom:8px; }
    .clinical-source { font-size:12px; color:var(--text-dim); margin-bottom:6px; }
    .clinical-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:8px 0 10px; }
    .clinical-detail-section { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:7px 8px; }
    .clinical-detail-title { color:var(--primary); font-size:11px; font-weight:700; text-transform:uppercase; margin-bottom:3px; }
    .clinical-detail-item { font-size:11px; line-height:1.4; }
    .clinical-detail-item strong { color:var(--warning); }
    .clinical-management-table { width:100%; font-size:11px; border-collapse:collapse; margin-top:8px; }
    .clinical-management-table th, .clinical-management-table td { padding:4px; text-align:left; vertical-align:top; border-bottom:1px solid var(--border); }
    .clinical-management-table th { color:var(--text-dim); font-size:10px; text-transform:uppercase; }
    .clinical-missing-warning { background:rgba(246,173,85,0.12); border:1px solid rgba(246,173,85,0.45); border-radius:6px; color:var(--warning); padding:8px 10px; margin:8px 0; font-size:11px; line-height:1.45; }
    .clinical-missing-warning strong { display:block; margin-bottom:2px; }
    @media (max-width:1450px) {
      #clinicalSidebar { position:static; width:100%; max-height:none; margin-top:8px; }
    }
    @media (orientation: portrait) {
      #clinicalSidebar { position:static; width:100%; max-height:none; margin-top:8px; }
    }

    .correction-detail { flex: 1; min-width: 0; }
    .correction-change { font-size: 13px; margin-bottom: 4px; line-height: 1.45; word-break: break-word; }
    .correction-change .signal-quote { font-style: italic; color: var(--text); }
    .correction-orig-line { color: var(--text); }
    .correction-orig-line strong { font-weight: 700; color: var(--error); }
    .correction-arrow { font-size: 11px; color: var(--text-dim); line-height: 1.1; margin: 1px 0; }
    .correction-corr-line { color: var(--text); }
    .correction-corr-line strong { font-weight: 700; color: var(--primary); }
    .btn-toggle-more {
      background: none; border: none; padding: 2px 0; font-size: 11px; font-weight: 600;
      color: var(--primary); cursor: pointer; display: block; text-align: right;
      margin-top: 2px; width: 100%; text-decoration: underline;
    }
    .btn-toggle-more:hover { color: var(--primary-hover, var(--primary)); opacity: 0.85; }
    .original-text { color: var(--error); text-decoration: line-through; margin-right: 6px; }
    .corrected-word { color: var(--primary); }
    .correction-explanation { font-size: 12px; color: var(--text-dim); }

    .no-corrections { text-align: center; padding: 24px; color: var(--primary); font-weight: 600; }
    .minor-corrections { text-align: left; padding: 8px 0; font-size: 13px; color: var(--text); }
    .minor-corrections ul { margin: 6px 0 0 18px; line-height: 1.7; }
    .minor-corrections .minor-orig { opacity: .75; }
    .corrections-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
    .corrections-title-row .section-title { margin-bottom:0; }
    /* Datos personales protegidos antes de llamar al motor (2026-10-06) */
    .corrections-title-izq { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .phi-insignia { display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:20px; font:inherit; font-size:11.5px;
                    font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
                    background:rgba(72,187,120,.13); color:#68d391; border:1px solid rgba(72,187,120,.28); }
    .phi-insignia:hover, .phi-insignia[aria-expanded="true"] { background:rgba(72,187,120,.22); }
    [data-theme="light"] .phi-insignia { color:#25794a; background:rgba(37,121,74,.08); border-color:rgba(37,121,74,.3); }
    .phi-detalle { margin:-4px 0 14px; padding:10px 12px; border-radius:8px; font-size:13px; line-height:1.6; color:var(--text-dim);
                   background:rgba(72,187,120,.06); border:1px solid rgba(72,187,120,.2); }
    .phi-detalle b { color:var(--text); font-weight:600; }
    .collapse-btn { width:24px; height:24px; padding:0; border-radius:6px; display:flex; align-items:center; justify-content:center; background:var(--border); color:var(--text-dim); }
    .collapse-btn.collapsed { transform: rotate(-90deg); }
    .history-panel summary { cursor:pointer; color:var(--text-dim); font-size:13px; font-weight:700; }
    .history-entry { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px; margin-top:10px; }
    .history-text { margin-top: 8px; }
    .history-text-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
    .history-text-label { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-dim); }
    .history-text-body {
      white-space: pre-wrap; word-break: break-word; background: var(--surface); border: 1px solid var(--border);
      border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 13px; line-height: 1.5; color: var(--text);
    }

    .metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    @media (max-width: 600px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); } }

    .metric-card {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 8px; padding: 12px; text-align: center;
    }
    .metric-value { font-size: 20px; font-weight: 700; color: var(--primary); }
    .metric-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

    .error-banner {
      background: rgba(252,129,129,0.1); border: 1px solid rgba(252,129,129,0.3);
      border-radius: 8px; padding: 14px 18px; color: var(--error);
      display: none; margin-top: 16px;
    }

    /* Admin panel */
    #adminScreen { display: none; }
    .admin-wrap { max-width: 960px; margin: 0 auto; padding: 32px 24px; }

    .admin-tabs {
      display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; gap: 0;
    }
    .admin-tab {
      background: none; border: none; color: var(--text-dim); font-size: 14px;
      font-weight: 600; padding: 10px 20px; cursor: pointer; border-bottom: 2px solid transparent;
      margin-bottom: -1px; border-radius: 0;
    }
    .admin-tab:hover { color: var(--text); }
    .admin-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

    .data-table {
      width: 100%; border-collapse: collapse;
      background: var(--surface); border-radius: 12px; overflow: hidden;
      border: 1px solid var(--border);
    }
    .data-table th {
      padding: 12px 16px; text-align: left; font-size: 11px; color: var(--text-dim);
      font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
      border-bottom: 1px solid var(--border); background: var(--surface);
    }
    .data-table th.right, .data-table td.right { text-align: right; }
    .data-table td {
      padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--border);
    }
    .data-table tr:last-child td { border-bottom: none; }

    .status-badge {
      font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px;
    }
    .status-active   { background: rgba(62,207,142,0.15); color: var(--primary); }
    .status-inactive { background: rgba(252,129,129,0.15); color: var(--error); }

    /* Admin → Usuarios: filas compactas, una sola columna de acciones («Acciones ▾») */
    .tabla-scroll { overflow-x: auto; border-radius: 12px; }
    .usuarios-tabla td, .usuarios-tabla th { padding: 10px 12px; }
    .usuarios-tabla td.col-acciones { white-space: nowrap; }
    .usuarios-tabla .u-nombre { font-weight: 600; overflow-wrap: anywhere; }
    @media (max-width: 860px) {
      .usuarios-tabla .col-creado { display: none; }
    }
    @media (max-width: 680px) {
      .usuarios-tabla .col-rol { display: none; }
    }
    .acciones-menu {
      position: fixed; z-index: 1500; min-width: 210px; padding: 6px;
      background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
      box-shadow: 0 8px 28px rgba(0,0,0,.4); display: none; flex-direction: column;
    }
    .acciones-menu.open { display: flex; }
    .acciones-menu button {
      background: none; border: none; color: var(--text); text-align: left; font-size: 13px;
      padding: 8px 10px; border-radius: 6px; cursor: pointer; width: 100%;
    }
    .acciones-menu button:hover, .acciones-menu button:focus-visible { background: var(--bg); }

    /* Admin → Funciones (spec funciones-por-usuario-2026-10-09, variante A) */
    .fn-nota { font-size: 13px; color: var(--text-dim); margin: 0 0 16px; line-height: 1.5; }
    .fn-nota b { color: var(--text); }
    .sw { position: relative; display: inline-block; width: 34px; height: 20px; padding: 0; border-radius: 999px;
          background: var(--border); border: 1px solid var(--border); cursor: pointer; vertical-align: middle; }
    .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
                 background: var(--text-dim); transition: left .12s, background .12s; }
    .sw.on { background: color-mix(in srgb, var(--primary) 55%, var(--surface)); border-color: var(--primary); }
    .sw.on::after { left: 16px; background: #fff; }
    .sw.exc { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--warning); }
    .sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    .sw.lock { cursor: not-allowed; opacity: .45; }
    .lock-ico { font-size: 12px; margin-left: 4px; color: var(--text-dim); }
    .mx-tools { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
    .mx-tools input[type=search] { padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; min-width: 200px; }
    .mx-leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); margin-left: auto; align-items: center; }
    .mx-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
    .mx-scroll { overflow-x: auto; border-radius: 12px; }
    .mx th.fn { text-align: center; padding: 10px 6px; font-size: 10.5px; line-height: 1.3; vertical-align: bottom; min-width: 60px; max-width: 76px; }
    .mx td.fn { text-align: center; padding: 10px 4px; }
    .mx td:first-child, .mx th:first-child { padding-left: 14px; }
    .mx td:nth-child(2), .mx th:nth-child(2) { padding: 10px 6px; }
    .mx td.user, .mx th.user { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 150px; }
    .mx td.user small { display: block; color: var(--text-dim); font-size: 12px; }
    .mx select { padding: 6px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; }
    .mx .reset, .mx .prueba-nueva { background: none; border: none; color: var(--accent-text); font-size: 12px; padding: 2px 4px; cursor: pointer; text-decoration: underline; }
    .mx input[type=date] { padding: 3px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 12px; margin-top: 3px; }
    .vence { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-top: 3px; white-space: nowrap;
             background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); border: none; cursor: pointer; }
    .vence.pronto { background: color-mix(in srgb, var(--error) 18%, transparent); color: var(--error); }
    .fn-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1500;
                background: var(--surface); border: 1px solid var(--primary); color: var(--text); border-radius: 10px;
                padding: 10px 16px; font-size: 14px; display: none; gap: 12px; align-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.3); max-width: calc(100vw - 32px); }
    .fn-toast.open { display: flex; }
    .fn-toast button { padding: 4px 10px; font-size: 13px; }
    @media (max-width: 720px) { .mx-leyenda { margin-left: 0; } }

    /* Aviso discreto de fin de prueba */
    #pruebaBanner {
      margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--warning); border-radius: 8px;
      background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--text-dim); font-size: 13px;
    }

    #pruebaBanner.bienvenida {
      display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; font-size: 14px;
      border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius);
      background: var(--surface); color: var(--text);
    }
    #pruebaBanner.bienvenida .fecha { text-align: center; min-width: 84px; border: 1px solid var(--border); border-radius: var(--radius-s); padding: 6px 8px; }
    #pruebaBanner.bienvenida .fecha small { display: block; color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
    #pruebaBanner.bienvenida .fecha strong { display: block; font-size: 24px; line-height: 1.1; color: var(--primary-dim); }
    #pruebaBanner.bienvenida h3 { margin: 0 0 4px; font-size: 15px; }
    #pruebaBanner.bienvenida p { margin: 0 0 10px; color: var(--text-dim); }
    #pruebaBanner .empezar-prueba {
      background: var(--primary-dim); color: #fff; border: 0; border-radius: var(--radius-s);
      padding: 7px 14px; cursor: pointer; font: inherit; font-weight: 600;
    }
    @media (max-width: 520px) { #pruebaBanner.bienvenida { flex-direction: column; } }

    /* Cola de revisión */
    .queue-badge {
      background: var(--error); color: #0f1117; font-size: 10px; font-weight: 700;
      border-radius: 10px; padding: 1px 7px; margin-left: 4px;
    }
    /* --error se oscurece en tema claro (línea ~49): el texto negro fijo
       pensado para el rojo claro del tema oscuro cae a 3.66:1. */
    html[data-theme="light"] .queue-badge { color: #ffffff; }
    .queue-filters select { min-width: 160px; }
    .queue-item {
      background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
      padding: 14px 16px; margin-bottom: 10px;
    }
    .queue-tag {
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
      padding: 3px 8px; border-radius: 4px; background: var(--border); color: var(--text-dim);
    }
    .queue-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
    .queue-correct-form { display: none; flex-direction: column; gap: 8px; margin-top: 10px; }

    /* Modals */
    .modal-overlay {
      display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75);
      z-index: 1000; align-items: center; justify-content: center;
    }
    .modal-overlay.open { display: flex; }
    .modal-box {
      background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
      padding: 32px; width: 100%; max-width: 420px; margin: 16px;
      max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
    }
    /* Pantalla completa (Álvaro, 2026-10-11: con 620 px fijos
       perdía más de la mitad de la pantalla en el Escritorio, ventana alta).
       Altura fija (no auto) para que no salte al cambiar de pestaña. */
    .preferences-modal-box {
      max-width: none;
      width: calc(100vw - 16px);
      height: calc(100dvh - 16px);
      margin: 8px;
    }
    #modalAjustes .panel { margin-bottom: 14px; }
    .modal-title { color: var(--primary); font-size: 18px; font-weight: 700; margin-bottom: 20px; }
    .modal-input {
      width: 100%; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border);
      border-radius: 8px; color: var(--text); font-size: 15px; margin-bottom: 16px;
      font-family: inherit;
    }
    .modal-select {
      width: 100%; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border);
      border-radius: 8px; color: var(--text); font-size: 15px; margin-bottom: 20px;
    }
    .modal-error { display: none; color: var(--error); font-size: 13px; margin-bottom: 14px; }
    .modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

    /* Puente F8 */
    #bridgeToast {
      position: fixed; bottom: 24px; right: 24px; z-index: 200;
      padding: 12px 18px; border-radius: 10px; font-size: 14px; font-weight: 600;
      background: var(--surface); border: 1px solid var(--primary); color: var(--text);
      box-shadow: 0 4px 16px rgba(0,0,0,0.35);
      opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s;
      pointer-events: none;
    }
    #bridgeToast.show { opacity: 1; transform: translateY(0); }
    /* Recién pegado: el original no se ve mientras llega la revisión. */
    #reportInput.texto-oculto { color: transparent; caret-color: transparent; }
    #reportInput.texto-oculto::selection { background: transparent; }
    /* Saludo del día (2026-09-30): corto, con la tipografía de la portada. */
    .saludo {
      font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 600;
      color: var(--text); margin: 0 0 12px 2px; overflow-wrap: anywhere; text-wrap: balance;
    }
    @media (max-width: 480px) { .saludo { font-size: 18px; } }
    #bridgeToast.con-accion { pointer-events: auto; display: flex; align-items: center; gap: 12px; }
    #bridgeToast .toast-accion {
      background: none; border: 1px solid var(--primary); border-radius: 6px; color: var(--accent-text);
      font: inherit; font-size: 13px; padding: 3px 10px; cursor: pointer;
    }
    /* Revisando una plantilla con F8 */
    .tpl-rev-banner {
      display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 12px;
      padding: 10px 14px; border-radius: 10px;
      background: color-mix(in srgb, var(--primary) 12%, var(--surface));
      border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
    }
    .tpl-rev-banner[hidden] { display: none; }
    .tpl-rev-titulo { font-weight: 600; font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
    .tpl-rev-btns { margin-left: auto; display: flex; gap: 8px; }
    .tpl-rev-desc { flex-basis: 100%; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
    #bridgeToast.error { border-color: var(--error); }
    /* Respaldo visible cuando el salto automático a pressf8:// no se nota o el
       navegador lo bloquea (ver mostrarEnlaceVinculacion en app.js). */
    .bridge-link-fallback {
      position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 300;
      background: var(--surface); border: 1px solid var(--primary); border-radius: 12px;
      padding: 20px 24px; max-width: 360px; text-align: center;
      box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    }
    .bridge-link-fallback p { margin: 0 0 12px; color: var(--text); font-size: 14px; }
    .bridge-link-fallback p.muted { color: var(--text-dim); font-size: 13px; }
    .bridge-link-fallback .btn-primary { display: block; margin-bottom: 10px; }
    .bridge-code {
      font-size: 42px; font-weight: 700; letter-spacing: 10px; color: var(--primary);
      font-variant-numeric: tabular-nums; text-align: center; padding: 18px 0 6px;
    }
    /* Los títulos de sección de Ajustes no van en MAYÚSCULAS: gritaban en frases
       largas ("INSTALAR PRESSF8 EN SU PROPIA VENTANA (OPCIONAL)") — Álvaro,
       2026-09-08. Acotado a Ajustes; el resto de la app no cambia. */
    #modalAjustes .section-title { text-transform: none; font-size: 14px; letter-spacing: normal; }

    /* Capturas reales de SmartScreen, marcadas con un círculo (ver comentario
       en index.html) — ya no es una réplica en CSS. */
    .ss-demo { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
    .ss-step { width: 240px; }
    .ss-arrow { color: var(--text-dim); font-size: 20px; padding-top: 50px; flex: 0 0 auto; }
    .ss-shot { width: 240px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.25); display: block; }
    .ss-caption { color: var(--text-dim); font-size: 12px; margin: 8px 0 0; text-align: center; }
    .bridge-status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
    .bridge-online { background: var(--primary); }
    .bridge-offline { background: var(--text-dim); }
    .bridge-table { width:100%; border-collapse: collapse; font-size: 13px; }
    .bridge-table th { text-align:left; color:var(--text-dim); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--border); }
    .bridge-table td { padding:10px; border-bottom:1px solid var(--border); }
    .bridge-toggle {
      display:flex; align-items:center; gap:10px; margin-bottom:14px; cursor:pointer; font-size:14px;
      text-transform:none; letter-spacing:normal; /* label{} las pone en mayúsculas por defecto */
    }
    .bridge-toggle input { width:16px; height:16px; accent-color: var(--primary); cursor:pointer; }
    /* Ajustes ⚙ (spec config-simplificada-2026-10-11): vista previa del formato */
    .format-option { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; margin: 6px 0; }
    .format-option input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
    .format-note { color: var(--text-dim); font-size: 12px; line-height: 1.4; margin-top: 8px; }
    #formatPreviewBox {
      background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
      padding: 14px; white-space: pre-wrap; font-size: 13px; line-height: 1.5;
      min-height: 220px; max-height: 360px; overflow-y: auto;
    }

    /* Ajustes ⚙: un solo modal con tres pestañas. Pantalla completa (ver
       .preferences-modal-box); cabecera y pie fijos, solo el cuerpo se desplaza. */
    :root { --ok: #68d391; }
    html[data-theme="light"] { --ok: #1e5b3a; }
    .ajustes-box { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
    .ajustes-box label { text-transform: none; letter-spacing: normal; }
    .ajustes-cabeza { display: flex; align-items: center; gap: 12px; padding: 24px 32px 0; }
    .ajustes-cabeza .modal-title { margin-bottom: 0; }
    .ajustes-x { margin-left: auto; background: none; color: var(--text-dim); font-size: 20px; padding: 2px 10px; }
    .ajustes-x:hover { color: var(--text); }
    .ajustes-tabs { margin: 12px 32px 0; }
    .ajustes-tabs .admin-tab { white-space: nowrap; }
    .aj-corto { display: none; }
    .ajustes-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px 32px 24px; }
    .ajustes-panel { max-width: 1100px; }
    .ajustes-panel[hidden] { display: none; }
    .ajustes-pie { border-top: 1px solid var(--border); padding: 12px 32px; display: flex; align-items: center; gap: 12px; }
    .aj-nota { color: var(--text-dim); font-size: 13px; }
    .ajustes-pie .btn-secondary { margin-left: auto; }

    .aj-bloque { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; }
    .aj-bloque[hidden] { display: none; }
    .aj-bloque h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .aj-aviso { color: var(--warning); font-size: 12.5px; line-height: 1.45; margin-top: 6px; }
    .aj-aviso[hidden] { display: none; }
    .aj-pista { color: var(--text-dim); font-size: 13px; line-height: 1.5; }
    .aj-campo { display: block; font-size: 13px; font-weight: 600; color: var(--text-dim); margin: 10px 0 6px; }
    .aj-bloque .modal-select, .aj-bloque .modal-input { margin-bottom: 6px; background: var(--surface); }
    .aj-bloque textarea { background: var(--surface); margin-top: 10px; }
    .aj-dos { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 8px; }
    .aj-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
    .aj-mini { margin-top: 14px; font-size: 13px; color: var(--text-dim); }
    .aj-mini summary { cursor: pointer; }
    .aj-mini > div { margin-top: 8px; }

    .aj-avanzado { margin: 18px 0 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
    .aj-avanzado > summary { cursor: pointer; padding: 12px 18px; font-weight: 700; font-size: 14px; color: var(--text-dim); }
    .aj-avanzado[open] > summary { color: var(--text); border-bottom: 1px solid var(--border); }
    .aj-dentro { padding: 6px 18px 14px; }
    .aj-dentro h4 { font-size: 14px; margin: 14px 0 4px; }

    /* Filas con interruptor */
    .aj-fila { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border); }
    .aj-fila:first-of-type, .section-title + .aj-fila { border-top: none; }
    .aj-txt { flex: 1; min-width: 0; }
    .aj-txt b { display: block; font-size: 14.5px; font-weight: 600; }
    .aj-txt span { color: var(--text-dim); font-size: 13px; }
    .aj-switch { position: relative; width: 42px; height: 24px; flex: 0 0 auto; margin: 0; }
    .aj-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
    .aj-riel { position: absolute; inset: 0; border-radius: 12px; background: var(--border-strong, var(--border)); transition: background .15s; }
    .aj-riel::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); transition: transform .15s; }
    .aj-switch input:checked + .aj-riel { background: var(--primary); }
    .aj-switch input:checked + .aj-riel::after { transform: translateX(18px); background: #fff; }
    .aj-switch input:focus-visible + .aj-riel { outline: 2px solid var(--accent); outline-offset: 2px; }

    /* «Guardado ✓» discreto; el error se queda a la vista */
    .aj-guardado { font-size: 12px; font-weight: 600; color: var(--ok); opacity: 0; transition: opacity .2s; white-space: nowrap; }
    .aj-guardado.ver { opacity: 1; }
    .aj-guardado.error { color: var(--error); }
    .aj-enlace { background: none; padding: 0; border: none; color: var(--accent-text); font-weight: 600; font-size: inherit; text-decoration: underline; cursor: pointer; }

    @media (max-width: 800px) {
      .ajustes-box { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; border: none; }
      .ajustes-cabeza { padding: 16px 16px 0; }
      .ajustes-tabs { margin: 10px 16px 0; }
      .ajustes-tabs .admin-tab { flex: 1; padding: 10px 6px; text-align: center; }
      .aj-largo { display: none; }
      .aj-corto { display: inline; }
      .ajustes-cuerpo { padding: 16px; }
      .ajustes-pie { padding: 10px 16px; }
      .aj-nota { font-size: 12px; }
      .aj-dos, .aj-rejilla { grid-template-columns: 1fr; }
      .aj-bloque { padding: 14px; }
      .aj-fila { gap: 12px; }
      .aj-fila .aj-guardado:not(.ver) { display: none; }
    }

    /* Plantillas — expansor de texto (spec expansor-plantillas-2026-09-05) */
    .tpl-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:20px; }
    .tpl-toolbar .modal-input { margin-bottom:0; max-width:320px; font-size:14px; }
    /* Tarjetas compactas (2026-09-23): con decenas de plantillas, cada línea cuenta. */
    .tpl-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:8px; }
    /* Pestaña en dos columnas, Plantillas | Frases (Álvaro, 2026-09-29) */
    .tpl-cols { display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:start; }
    @media (max-width: 760px) { .tpl-cols { grid-template-columns: 1fr; } }
    .tpl-col {
      background: var(--surface); border:1px solid var(--border); border-radius:10px;
      padding:12px; display:flex; flex-direction:column; gap:6px; min-width:0;
    }
    .tpl-col-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .tpl-col-title { margin:0; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color: var(--text); }
    .tpl-col-n { font-size:12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
    .tpl-col-head .btn-sm { margin-left:auto; }
    .tpl-col-desc { margin:0 0 6px; color: var(--text-dim); font-size:13px; line-height:1.55; }
    .tpl-col-desc strong { color: var(--text); }
    .tpl-ojo {
      display:inline-block; margin-top:4px; padding:2px 8px; border-radius:6px; font-weight:600;
      background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning);
    }
    .tpl-col-empty { border:1px dashed var(--border); border-radius:8px; padding:10px 12px; color: var(--text-dim); font-size:13px; line-height:1.55; }
    .tpl-row {
      position:relative; display:flex; align-items:center; gap:8px; min-width:0; padding:5px 8px; border-radius:6px;
      background: var(--bg); border:1px solid transparent;
    }
    .tpl-row:hover, .tpl-row:focus-within { border-color: var(--border); }
    .tpl-row-tag {
      flex:0 0 auto; font-family: ui-monospace, Consolas, monospace; font-size:9.5px; font-weight:700;
      color: var(--text-dim); border:1px solid var(--border); border-radius:4px; padding:1px 4px;
      min-width:26px; max-width:84px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .tpl-row-name { flex:1 1 auto; min-width:0; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .tpl-row .tpl-badge { margin-left:0; flex-shrink:0; font-size:10px; padding:1px 6px; }
    .tpl-row .tpl-shortcut {
      flex:0 1 auto; max-width:40%; margin-left:auto; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
      color: var(--primary); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    /* Editar/Duplicar/Borrar al pasar el mouse o con el foco; en pantallas táctiles, siempre. */
    .tpl-row-acts {
      position:absolute; right:6px; top:50%; transform:translateY(-50%); display:flex; gap:2px;
      padding-left:10px; background: var(--bg); opacity:0; pointer-events:none;
    }
    .tpl-row:hover .tpl-row-acts, .tpl-row:focus-within .tpl-row-acts { opacity:1; pointer-events:auto; }
    @media (hover: none) {
      .tpl-row-acts { position:static; transform:none; padding-left:0; opacity:1; pointer-events:auto; }
    }
    .tpl-toolbar .tpl-tab-sort { width:auto; font-size:13px; padding:7px 8px; }
    .tpl-kind-hint { margin-top:-4px; }
    .tpl-variant-frase-fila {
      margin-top:4px; font-size:12.5px; cursor:pointer; text-transform:none; letter-spacing:normal;
      font-weight:normal; color: var(--text);
    }
    .tpl-card {
      background: var(--surface); border:1px solid var(--border); border-radius:8px;
      padding:8px 10px; display:flex; flex-direction:column; gap:4px;
    }
    .tpl-card-head { display:flex; align-items:center; gap:6px; min-width:0; }
    .tpl-card .tpl-name {
      font-weight:600; font-size:13px; line-height:1.3; min-width:0;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .tpl-card-foot { display:flex; align-items:center; justify-content:space-between; gap:6px; }
    .tpl-card .tpl-shortcut {
      font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--primary); font-size:12px;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
    }
    .tpl-card .tpl-actions { display:flex; gap:2px; flex-shrink:0; }
    .tpl-mini {
      background:none; border:1px solid transparent; border-radius:5px; color: var(--text-dim);
      font: inherit; font-size:11px; padding:2px 5px; cursor:pointer;
    }
    .tpl-mini:hover { color: var(--text); border-color: var(--border); }
    .tpl-badge {
      display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px;
      background: rgba(62,207,142,0.12); color: var(--primary); margin-left:8px; vertical-align:middle;
    }
    .tpl-empty { color: var(--text-dim); font-size:14px; line-height:1.7; padding:24px 0; }
    .tpl-modal-box { max-width: 760px; }
    .tpl-body-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
    .tpl-body-head label { margin: 0; }
    .tpl-hueco-menu { padding: 4px 6px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 12px; }
    .tpl-modal-box textarea { min-height: 260px; margin-bottom: 16px; }
    .tpl-hint { color: var(--text-dim); font-size:12px; line-height:1.5; margin:-8px 0 16px; }
    .tpl-format-options { display:flex; gap:18px; margin-bottom:16px; font-size:14px; }

    /* Importar desde Word — vista previa del lote (spec importar-plantillas-word-2026-09-07) */
    /* Solo esta pantalla (Admin y Puente F8 comparten .admin-wrap y no necesitan
       más ancho): con la vista previa de dos columnas sobraba espacio a la
       derecha del recuadro de texto (Álvaro, 2026-09-07). */
    #templatesScreen .admin-wrap { max-width: 1400px; }
    #templatesScreen.tpl-dropping .admin-wrap { outline:2px dashed var(--accent); outline-offset:-6px; border-radius:12px; }
    .tpl-import-panel {
      background: var(--surface); border:1px solid var(--border); border-radius:12px;
      padding:14px 16px; margin-bottom:20px;
    }
    .tpl-import-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .tpl-import-summary { color: var(--text-dim); font-size:12px; margin-left:10px; }
    .tpl-import-actions { display:flex; gap:8px; flex-wrap:wrap; }
    /* Tabla a la izquierda + texto completo (editable) a la derecha, donde antes
       quedaba espacio vacío (Álvaro, 2026-09-07). */
    .tpl-import-body { display:flex; gap:16px; align-items:stretch; }
    .tpl-import-scroll { overflow-x:auto; flex:1 1 auto; min-width:0; }
    .tpl-import-detail {
      flex:1 1 560px; max-width:800px; border:1px solid var(--border); border-radius:10px;
      background: var(--bg); padding:12px 14px; align-self:stretch; display:flex; flex-direction:column;
    }
    .tpl-import-detail h4 { margin:0 0 8px; font-size:13px; color: var(--text); }
    .tpl-import-editor { position:relative; flex:1 1 auto; min-height:420px; }
    .tpl-import-highlight, .tpl-import-fulltext {
      position:absolute; inset:0; margin:0; padding:10px 12px; border-radius:8px;
      font-size:14px; line-height:1.6; font-family:inherit; white-space:pre-wrap; word-wrap:break-word;
      box-sizing:border-box; overflow:auto;
    }
    .tpl-import-highlight {
      color:transparent; pointer-events:none; border:1px solid transparent; overflow:hidden;
    }
    .tpl-import-highlight mark.tpl-dbl { background:rgba(74,144,217,0.35); color:transparent; border-radius:2px; }
    .tpl-import-highlight mark.tpl-dots { background:rgba(74,144,217,0.35); color:transparent; border-radius:2px; text-decoration:underline wavy #4a90d9; }
    .tpl-import-fulltext { background:transparent; resize:none; }
    .tpl-import-highlight.tpl-mono, .tpl-import-fulltext.tpl-mono { font-family: Consolas, 'Courier New', monospace; }
    .tpl-import-table { width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed; }
    .tpl-import-table th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
      color: var(--text-dim); padding:6px 8px; border-bottom:1px solid var(--border); }
    .tpl-import-table td { padding:6px 8px; border-bottom:1px solid var(--border); vertical-align:top; }
    .admin-tpl-texto summary { cursor:pointer; color:var(--text-dim); font-size:12px; margin-top:4px; }
    .admin-tpl-texto pre { white-space:pre-wrap; font-size:12px; max-height:220px; overflow:auto; margin:6px 0 0; }
    .tpl-import-table tr:last-child td { border-bottom:none; }
    .tpl-import-table tr[onclick] { cursor:pointer; }
    .tpl-import-table tr.is-selected td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
    .tpl-import-table .modal-input.tpl-import-input { margin-bottom:0; padding:6px 8px; font-size:13px; width:100%; }
    .tpl-import-table .tpl-import-input.tpl-shortcut { width:80px; min-width:0; }
    .tpl-import-table th:nth-child(2) { width:90px; }
    .tpl-import-table th:nth-child(3) { width:auto; }
    .tpl-import-file { color: var(--text-dim); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .tpl-import-preview { color: var(--text-dim); font-size:12px; }
    .tpl-link-btn {
      background:none; border:none; padding:0; color: var(--accent-text); font-size:12px;
      text-decoration:underline; cursor:pointer; display:block; margin-bottom:4px;
    }
    .tpl-import-status { font-size:12px; line-height:1.45; width:130px; }
    .tpl-import-muted { color: var(--text-dim); }
    .tpl-import-warn { color: var(--warning); }
    .tpl-import-bad { color: var(--error); }
    .tpl-import-ok { color: var(--primary); }
    .tpl-import-table tr.is-blocked .tpl-import-input.tpl-shortcut { border-color: var(--error); }
    .tpl-import-table tr.is-warn .tpl-import-input.tpl-shortcut { border-color: var(--warning); }
    .tpl-import-table tr.is-error td { opacity:.75; }
    @media (max-width: 900px) {
      .tpl-import-body { flex-direction:column; }
      .tpl-import-detail { flex-basis:auto; max-width:none; width:100%; }
    }
    .tpl-premium {
      display:inline-block; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
      padding:1px 6px; border-radius:999px; margin-left:4px; vertical-align:middle;
      background: rgba(255,106,61,0.14); color: var(--accent-text);
    }
    .tpl-format-options label {
      display:flex; align-items:center; gap:6px; text-transform:none; letter-spacing:0; font-size:14px;
      color: var(--text); font-weight:500; margin:0; cursor:pointer;
    }
    /* Barra Datos del paciente (spec spec_edad_osea_frontend.md) */
    .paciente-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 8px 0 4px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; font-size: 13px; color: var(--text); }
    .paciente-bar[hidden] { display: none; }
    .paciente-bar-label { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-dim); }
    .paciente-bar label { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--text); margin: 0; }
    .paciente-bar input[type="number"] { width: 4.5em; padding: 4px 6px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 13px; }
    .paciente-bar select { padding: 4px 6px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 13px; }
    .paciente-bar-hint { flex-basis: 100%; font-size: 12px; color: var(--text-dim); }
    .lecturas-ris-link { background: none; border: 0; padding: 2px 0; margin: 2px 0; font: inherit; font-size: 12px; color: var(--text-dim); cursor: pointer; }
    .lecturas-ris-link:hover { color: var(--text); text-decoration: underline; }
    .lectura-ris-intro { margin: 0; padding: 10px 14px 0; font-size: 12px; color: var(--text-dim); }
    .lectura-ris { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
    .lectura-ris-hora { font-weight: 600; margin-bottom: 4px; }
    .lectura-ris-rot, .lectura-ris-nada, .lectura-ris-vacio { color: var(--text-dim); }
    .paciente-bar-leido { flex-basis: 100%; font-size: 12px; color: var(--accent-text); }

    .tpl-suggest {
      display:none; margin-top:8px; background: var(--surface); border:1px solid var(--border);
      border-radius:8px; padding:6px; max-height:220px; overflow-y:auto;
      box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    }
    .tpl-suggest.open { display:block; }
    /* Encabezados «Plantillas» / «Frases»: no elegibles (spec frases-desde-subplantillas-2026-09-29) */
    .tpl-suggest .tpl-suggest-head { font-size:11px; color: var(--text-dim); padding:6px 12px 2px; text-transform:uppercase; letter-spacing:.04em; cursor:default; }
    .tpl-variant-frase { margin-top:8px; }
    .tpl-variant-frase-check { display:flex; align-items:center; gap:6px; font-weight:normal; }
    .menu-campo-bar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; padding:6px 8px;
      background: var(--surface); border:1px solid var(--border); border-radius:8px; font-size:13px; }
    .menu-campo-bar button { background:transparent; color:var(--text); border:1px solid var(--border);
      border-radius:6px; padding:4px 10px; font-size:13px; cursor:pointer; }
    .menu-campo-bar button:hover { background: var(--border); }
    .menu-campo-label { color: var(--text-dim); }
    .menu-campo-hint { color: var(--text-dim); font-size:12px; margin-left:auto; }
    .tpl-suggest button {
      width:100%; text-align:left; background:transparent; color:var(--text);
      padding:8px 12px; border-radius:6px; font-size:13px; display:flex; gap:12px; align-items:baseline;
    }
    .tpl-suggest button .tpl-shortcut { min-width:120px; }
    .tpl-suggest button.active, .tpl-suggest button:hover { background: var(--border); }
    /* Comando de plantilla: qué cambió, qué no se pudo y la Impresión sugerida */
    #commandPanel { display:none; margin-bottom:16px; }
    #commandPanel.open { display:block; }
    .cmd-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
    .cmd-head .section-title { margin-bottom:0; }
    .cmd-close { background:transparent; color:var(--text-dim); font-size:18px; line-height:1; padding:2px 8px; }
    .cmd-close:hover { color: var(--text); }
    .cmd-list { list-style:none; padding:0; margin:0 0 12px; display:flex; flex-direction:column; gap:8px; }
    .cmd-change { font-size:13px; line-height:1.55; padding:8px 12px; border-left:3px solid var(--primary-dim);
      background: rgba(62,207,142,0.06); border-radius:0 6px 6px 0; }
    .cmd-change .cmd-before { color:var(--text-dim); text-decoration: line-through; }
    .cmd-change .cmd-after { color:var(--text); }
    .cmd-change .cmd-arrow { color:var(--primary); margin:0 6px; }
    .cmd-na { font-size:13px; padding:8px 12px; border-left:3px solid var(--warning);
      background: rgba(246,173,85,0.08); border-radius:0 6px 6px 0; display:flex; gap:12px; align-items:center; justify-content:space-between; }
    .cmd-warn { font-size:13px; color:var(--warning); margin:0 0 12px; }
    .cmd-imp { border:1px solid var(--border); border-radius:8px; padding:12px 14px; }
    .cmd-imp .cmd-imp-label { font-size:11px; letter-spacing:0.6px; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
    .cmd-imp .cmd-imp-text { font-size:14px; line-height:1.55; margin-bottom:10px; white-space:pre-wrap; }
    .cmd-imp .cmd-imp-hint { font-size:12px; color:var(--text-dim); margin-left:10px; }
  

    /* ---------- Fase D2: navegación, tema, «Este mes», onboarding ---------- */
    #appNav {
      display: flex; gap: 4px; padding: 4px 32px; border-bottom: 1px solid var(--border);
      background: var(--bg); position: sticky; top: 59px; z-index: 90; overflow-x: auto;
    }
    /* El shell corre en ventana angosta junto al RIS: si los botones no caben,
       este desvanecido avisa que hay más nav más allá del borde (el scrollbar
       fino de WebView2 casi no se ve). Solo cuando de verdad hay overflow
       (clase puesta por JS) — si no, taparía el último botón sin motivo. */
    #appNav.nav-scrollable {
      mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
      -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
    }
    #appNav button {
      background: transparent; color: var(--text-dim); border: 0; border-radius: 8px;
      padding: 5px 12px; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
      border-bottom: 2px solid transparent;
    }
    #appNav button:hover { color: var(--text); background: var(--surface); }
    #appNav button.active { color: var(--accent-text); border-bottom-color: var(--accent); }
    #appNav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    @media (max-width: 720px) { #appNav { padding: 6px 12px; } }

    /* Columna de plantillas en Revisar (pedido de Álvaro, 2026-09-07): acceso
       directo sin salir de la pantalla ni tipear el atajo de memoria. Ancho
       fijo, no es el workspace de varias columnas de un competidor — es un
       atajo visual a algo que ya existe (la pantalla Plantillas). */
    .app-layout {
      display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start;
      transition: grid-template-columns 0.18s ease;
    }
    @media (prefers-reduced-motion: reduce) { .app-layout { transition: none; } }
    .app-content-col { min-width: 0; }
    #tplSidebar {
      position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto;
      scrollbar-width: none; -ms-overflow-style: none;
    }
    #tplSidebar::-webkit-scrollbar { display: none; }
    #tplSidebar .tpl-side-head {
      display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px;
    }
    #tplSidebar .label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); margin-bottom: 0; }
    .tpl-collapse-btn {
      flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border-radius: 6px; display: flex;
      align-items: center; justify-content: center; background: var(--border); color: var(--text-dim);
      border: none; cursor: pointer; font-size: 13px; line-height: 1;
    }
    .tpl-collapse-btn:hover { color: var(--accent-text); }
    .tpl-collapse-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    #tplSidebarControls { margin-bottom: 10px; }
    .tpl-filter-input {
      width: 100%; padding: 6px 8px; background: var(--bg); border: 1px solid var(--border);
      border-radius: 6px; color: var(--text); font-size: 12.5px; font-family: inherit; margin-bottom: 6px;
    }
    .tpl-filter-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    .tpl-sort-select {
      width: 100%; padding: 5px 6px; background: var(--bg); border: 1px solid var(--border);
      border-radius: 6px; color: var(--text); font-size: 12px; font-family: inherit;
    }
    .tpl-sort-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    /* Colapsado hacia la izquierda (pedido de Álvaro, 2026-09-28): el panel
       se reduce a una franja angosta con solo el botón «›» y el cuadro de
       INFORME RADIOLÓGICO gana el espacio liberado, gracias al grid de
       .app-layout. El botón sigue siempre visible y con foco alcanzable. */
    .app-layout.tpl-collapsed { grid-template-columns: 44px 1fr; }
    .app-layout.tpl-collapsed #tplSidebar .tpl-side-head { justify-content: center; }
    .app-layout.tpl-collapsed #tplSidebar .label,
    .app-layout.tpl-collapsed #tplSidebarControls,
    .app-layout.tpl-collapsed #tplSidebarList { display: none; }
    #tplSidebar .item {
      display: flex; align-items: baseline; gap: 8px; padding: 6px 6px 6px 4px; border-radius: 7px;
      margin-bottom: 1px; cursor: pointer; font-size: 12.5px; color: var(--text); border: none; background: none;
      width: 100%; text-align: left; font-family: inherit;
    }
    #tplSidebar .item:hover { background: var(--surface); color: var(--accent-text); }
    #tplSidebar .item .tag {
      flex: 0 0 auto; font-family: ui-monospace, Consolas, monospace; font-size: 9.5px; font-weight: 700;
      letter-spacing: 0.3px; color: var(--text-dim); background: var(--bg); border: 1px solid var(--border);
      border-radius: 4px; padding: 1px 4px; min-width: 26px; text-align: center;
    }
    /* El nombre se ve entero: hasta dos líneas antes de cortar (Álvaro, 2026-09-21). */
    #tplSidebar .item .name {
      min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow-wrap: anywhere; line-height: 1.35;
    }
    #tplSidebar .empty { font-size: 12px; color: var(--text-dim); padding: 4px 4px; }
    /* Grupos «Plantillas» / «Frases» (Álvaro, 2026-09-29) */
    #tplSidebar .tpl-side-group {
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim);
      padding: 10px 4px 4px; margin-top: 6px; border-top: 1px solid var(--border); cursor: default;
    }
    #tplSidebar .tpl-side-group:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
    #tplSidebar .tpl-side-crear {
      border: none; background: none; padding: 4px; font: inherit; font-size: 12px; color: var(--text-dim);
      cursor: pointer; text-align: left;
    }
    #tplSidebar .tpl-side-crear u { color: var(--accent-text); text-decoration: none; }
    #tplSidebar .tpl-side-crear:hover u { text-decoration: underline; }
    @media (max-width: 820px) {
      .app-layout, .app-layout.tpl-collapsed { grid-template-columns: 1fr; }
      #tplSidebar { position: static; max-height: none; }
      /* Angosto (shell junto al RIS): ya se apila a ancho completo, así que
         el colapso pierde sentido — se ignora en vez de dejar el panel
         atrapado sin botón para reabrirlo. */
      #tplCollapseBtn { display: none; }
      .app-layout.tpl-collapsed #tplSidebar .tpl-side-head { justify-content: space-between; }
      .app-layout.tpl-collapsed #tplSidebar .label { display: block; }
      .app-layout.tpl-collapsed #tplSidebarControls { display: block; }
      .app-layout.tpl-collapsed #tplSidebarList { display: block; }
    }

    /* Estado vacío antes de la primera revisión (idea rescatada de una
       exploración de diseño, con la tipografía que ya usa la portada). */
    .howto-panel .head { text-align: center; margin-bottom: 22px; }
    .howto-panel h2 { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 600; margin: 0 0 6px; }
    .howto-panel .sub { color: var(--text-dim); font-size: 13.5px; }
    .howto-panel .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0; }
    .howto-panel .steps li { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
    .howto-panel .steps li .num { font-family: "Fraunces", Georgia, serif; font-size: 26px; font-weight: 700; color: var(--accent-text); margin-bottom: 6px; }
    .howto-panel .steps li b { display: block; color: var(--text); margin-bottom: 3px; font-size: 13.5px; }
    .howto-panel .steps li span { color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }
    @media (max-width: 720px) { .howto-panel .steps { grid-template-columns: 1fr; } }

    /* Pantallas de poca altura: dos intentos con @media (max-height) fallaron
       (940px seguía pidiendo scroll en la pantalla chica de Álvaro; 1050px
       lo arregló ahí pero compactaba de más el monitor de 27", que tenía
       espacio de sobra). Un punto de quiebre fijo no puede acertar para
       ambos porque no hay forma de saber desde CSS si el viewport es
       "chico" en términos reales — depende del zoom del navegador tanto
       como del tamaño físico. Se reemplaza por medición real: JS mide si
       el estado vacío entra en pantalla (checkVerticalFit(), ver app.js) y
       pone esta clase en <html> solo cuando de verdad no entra. */
    html.compact-vscroll main { padding-top: 20px; padding-bottom: 20px; }
    html.compact-vscroll .panel { padding: 18px; margin-bottom: 14px; }
    html.compact-vscroll textarea { min-height: 140px; }
    html.compact-vscroll .howto-panel .head { margin-bottom: 14px; }
    html.compact-vscroll .howto-panel .steps li { padding: 12px; }

    /* Después de la primera revisión de la sesión el panel de pasos ya no se
       muestra y el cuadro del informe crece hasta lo que quepa en la ventana
       (Álvaro, 2026-09-21: opción "agrandar el cuadro", F8 y contador debajo). */
    #inputPanel textarea { transition: min-height .15s ease; }
    #inputPanel.roomy textarea { min-height: clamp(220px, calc(100vh - 360px), 560px); }

    .modal-box.onboarding { max-width: 560px; }
    .modal-box.onboarding h3 { font-size: 20px; margin-bottom: 14px; }
    .onboarding-steps { list-style: none; counter-reset: ob; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
    .onboarding-steps li { counter-increment: ob; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--text); }
    .onboarding-steps li b { color: var(--text); }
    .onboarding-steps li::before {
      content: counter(ob); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
      background: var(--key-face); color: var(--key-text); border: 1px solid var(--key-border); box-shadow: 0 3px 0 var(--key-edge);
      font-weight: 800; font-size: 14px;
    }
    .onboarding-steps code { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
    /* .onboarding-steps li es un selector descendiente: sin este bloque, cada
       <li> de esta sub-lista heredaría el grid de 2 columnas, el contador y
       la insignia numerada circular del paso padre (la misma trampa de
       "contenido mixto en un display:grid" ya documentada arriba, un nivel
       más adentro). */
    .onboarding-substeps { list-style: disc; margin: 6px 0 6px 18px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
    .onboarding-substeps li {
      display: list-item; counter-increment: none; font-size: 13px; color: var(--text-dim);
    }
    .onboarding-substeps li::before { content: none; }
    .onboarding-note { font-size: 13px; color: var(--text-dim); margin-bottom: 16px; }

    /* Subplantillas: variantes de línea en el editor de plantillas (2026-09-22) */
    .tpl-variants { margin-bottom: 8px; }
    .tpl-variant-item { display:flex; gap:10px; align-items:flex-start; justify-content:space-between; padding:8px 10px; margin-bottom:6px; border:1px solid var(--border); border-radius:8px; font-size:13px; line-height:1.45; }
    .tpl-variant-item.orphan { border-color: var(--warning, #d9a441); }
    .tpl-variant-main { flex:1; min-width:0; overflow-wrap:anywhere; }
    .tpl-variant-imp { color: var(--text-dim); margin-top:2px; }
    .tpl-variant-warn { color: var(--warning, #d9a441); margin-top:4px; }
    .tpl-variant-btns { display:flex; gap:4px; flex-shrink:0; }
    .tpl-variant-form { border:1px dashed var(--border); border-radius:8px; padding:10px; margin-bottom:10px; }
    .tpl-variant-form label { display:block; margin:8px 0 4px; font-size:13px; }
    .tpl-variant-form textarea { margin-bottom: 4px; }
    .tpl-variant-line { font-size:13px; color: var(--text-dim); overflow-wrap:anywhere; }
    .tpl-variant-line span { color: var(--text); }
    .tpl-variant-actions { display:flex; gap:6px; justify-content:flex-end; margin-top:8px; }
    .tpl-card-head .tpl-badge { margin-left:0; flex-shrink:0; font-size:10px; padding:1px 6px; }

    /* Modo sin internet (spec modo-sin-internet-2026-09-29): el servidor local
       avisa `modo: "local"` y app.js pone body.sin-internet. Lo que usa IA,
       Google o el feedback del motor no se muestra en el PC. */
    .solo-sin-internet { display: none; }
    body.sin-internet .solo-sin-internet { display: block; }
    body.sin-internet .requiere-internet,
    body.sin-internet #googleLoginWrap,
    body.sin-internet #googleLinkBtn,
    body.sin-internet #reportCommentBox,
    body.sin-internet .feedback-btns,
    body.sin-internet .fb-chat,
    body.sin-internet #notaBtn,
    body.sin-internet #notaPanel,
    body.sin-internet #impCard,
    body.sin-internet #impBtn,
    body.sin-internet #cmdImpression { display: none !important; }
    .sin-internet-badge {
      display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
      border: 1px solid var(--warning); color: var(--warning); font-size: 12px; font-weight: 600;
      background: color-mix(in srgb, var(--warning) 10%, transparent); white-space: nowrap;
    }

    /* Atlas de Greulich y Pyle (spec atlas-greulich-pyle-2026-10-05; mockup
       docs/mockups/atlas-gp-2026-10-05.html). Cerrado no toca el layout: todo
       cuelga de .atlas-abierto. --sexo lo fija atlasPintar(): niña #ff8ad8,
       niño #3fa2ff. */
    #atlasBtn[hidden] { display: none; }
    #atlasBtn.on { outline: 2px solid var(--primary); outline-offset: 1px; }
    .atlas { display: flex; flex-direction: column; min-height: 0; padding: 12px 14px; margin: 0; --sexo: #ff8ad8; }
    .atlas[hidden] { display: none; }
    .app-layout.atlas-abierto { grid-template-columns: 220px minmax(320px, 440px) minmax(0, 1fr); }
    .app-layout.atlas-abierto.tpl-collapsed { grid-template-columns: 44px minmax(320px, 440px) minmax(0, 1fr); }
    .app-layout.atlas-abierto .atlas { position: sticky; top: 16px; height: calc(100vh - 32px); }
    .app-layout.atlas-abierto #reportInput { min-height: 0; height: auto; field-sizing: content; resize: vertical; }
    .atlas-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
    .atlas-cara { width: 44px; height: 58px; object-fit: cover; border-radius: 6px; border: 2px solid var(--sexo); }
    .atlas-title { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
    .atlas-sexo { font-size: 15px; font-weight: 700; color: var(--sexo); }
    .atlas-edad-box { margin-left: auto; text-align: right; font-size: 13px; color: var(--text-dim); line-height: 1.4; }
    .atlas-edad-box b { color: var(--text); font-size: 15px; }
    .atlas-edad-box a { color: var(--text-dim); font-size: 12px; }
    .atlas-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
    .atlas-bar .btn-secondary { padding: 6px 12px; }
    .atlas-bar .btn-secondary.on { border-color: var(--sexo); color: var(--sexo); }
    .atlas-sep { margin-left: auto; }
    .atlas-hint { font-size: 11px; color: var(--text-dim); }
    .atlas-panes { flex: 1; min-height: 0; display: grid; gap: 8px; grid-template-columns: 1fr; }
    .atlas-panes.dos { grid-template-columns: 1fr 1fr; }
    .atlas-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
    .atlas-pane.activa { border-color: var(--sexo); }
    .atlas-pane-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: rgba(255, 255, 255, .03); }
    .atlas-pane-edad { font-size: 22px; font-weight: 800; color: var(--sexo); flex: 1; text-align: center; letter-spacing: .01em; }
    .atlas-pane-de { font-size: 12px; color: var(--text-dim); }
    .atlas-pane-head button { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 6px; width: 30px; height: 28px; padding: 0; cursor: pointer; }
    .atlas-pane-head button:disabled { opacity: .3; cursor: default; }
    .atlas-visor { flex: 1; position: relative; overflow: hidden; background: #000; cursor: grab; color: var(--text-dim); font-size: 12px; }
    .atlas-visor.drag { cursor: grabbing; }
    .atlas-panes.dos .atlas-visor, .atlas-visor.zoom { cursor: ns-resize; }
    .atlas-panes.dos .atlas-visor.drag { cursor: grabbing; }
    .atlas-lienzo { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
    .atlas-lienzo img { display: block; user-select: none; -webkit-user-drag: none; }
    .atlas-tabla-recorte { overflow: hidden; position: relative; }
    .atlas-tabla-wrap { position: relative; display: inline-block; }
    .atlas-tabla-wrap a { position: absolute; border-radius: 3px; }
    .atlas-tabla-wrap a:hover { background: rgba(255, 106, 61, .25); outline: 1px solid #ff6a3d; }
    .atlas-tabla-wrap a.actual { outline: 2px solid #ff6a3d; background: rgba(255, 106, 61, .18); }
    .app-layout.atlas-abierto .atlas.max { position: fixed; inset: 0; z-index: 50; border-radius: 0; height: auto; }
    .atlas:fullscreen { background: var(--bg, #0f1117); padding: 12px 14px; height: 100vh; }
    /* Vertical (o angosto): informe arriba, atlas abajo con todo el alto restante. */
    @media (orientation: portrait), (max-width: 820px) {
      .app-layout.atlas-abierto, .app-layout.atlas-abierto.tpl-collapsed { grid-template-columns: 1fr; gap: 12px; }
      .app-layout.atlas-abierto #tplSidebar { display: none; }
      .app-layout.atlas-abierto .atlas { position: static; height: 85vh; }
    }

    /* ---------- Material: biblioteca personal (spec material-2026-10-05) ---------- */
    #materialScreen { display: none; }
    .mat-wrap { max-width: 1280px; }
    .mat-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
    @media (max-width: 900px) { .mat-grid { grid-template-columns: 1fr; } }
    .mat-cuota { margin-bottom: 14px; }
    .mat-cuota-fila { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-dim); }
    .mat-cuota-fila b { color: var(--text); }
    .mat-cuota-bar { height: 8px; border-radius: 6px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; margin-top: 6px; }
    .mat-cuota-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff)); }
    .mat-cuota-bar.llena span { background: var(--error); }
    .mat-titulo { margin: 26px 0 4px; font-size: 15px; color: var(--text); }
    .mat-sub { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }
    .mat-vacio { padding: 18px; text-align: center; color: var(--text-dim); font-size: 13px; }
    .mat-item { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; background: var(--surface); }
    .mat-item.cuarentena { border-color: color-mix(in srgb, var(--warning) 55%, transparent); }
    .mat-portada { width: 46px; height: 60px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: #fff; flex: none; overflow: hidden; }
    .mat-item h4 { margin: 0 0 3px; font-size: 15px; color: var(--text); overflow-wrap: anywhere; }
    .mat-meta { font-size: 12px; color: var(--text-dim); }
    .mat-info { min-width: 0; flex: 1; }
    .mat-acc { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
    .mat-acc.col { flex-direction: column; align-items: stretch; }
    .mat-pill { font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 600; white-space: nowrap; }
    .mat-pill.ok { background: color-mix(in srgb, #48bb78 18%, transparent); color: #2f855a; }
    .mat-pill.proc { background: color-mix(in srgb, #63b3ed 18%, transparent); color: #2b6cb0; }
    .mat-pill.cuar { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
    .mat-pill.err { background: color-mix(in srgb, var(--error) 18%, transparent); color: var(--error); }
    .mat-vig { text-decoration: none; }
    .mat-pill.priv { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-dim); }
    :root:not([data-theme="light"]) .mat-pill.ok { color: #68d391; }
    :root:not([data-theme="light"]) .mat-pill.proc { color: #90cdf4; }
    .mat-ahorro { color: #2f855a; font-weight: 600; }
    :root:not([data-theme="light"]) .mat-ahorro { color: #68d391; }
    .mat-prog { height: 5px; border-radius: 4px; background: color-mix(in srgb, var(--text) 10%, transparent); margin-top: 6px; max-width: 260px; overflow: hidden; }
    .mat-prog span { display: block; height: 100%; width: 60%; background: #63b3ed; animation: mat-av 2.5s ease-in-out infinite alternate; }
    .mat-prog.det span { animation: none; transition: width .2s; }
    @keyframes mat-av { from { width: 40%; } to { width: 75%; } }
    .mat-hallazgo { font-size: 13px; padding: 8px 10px; border-left: 3px solid var(--warning); background: color-mix(in srgb, var(--warning) 9%, transparent); border-radius: 4px; margin: 6px 0; color: var(--text); overflow-wrap: anywhere; }
    .mat-hallazgo code { color: var(--warning); }
    .mat-subir { border: 2px dashed var(--border); border-radius: 12px; padding: 22px; text-align: center; color: var(--text-dim); font-size: 13px; line-height: 1.6; cursor: pointer; }
    .mat-subir:hover, .mat-subir:focus-visible, .mat-subir.arrastrando { border-color: var(--accent); outline: none; }
    .mat-subir b { color: var(--text); font-size: 15px; }
    .mat-subir-ico { font-size: 30px; }
    .mat-subir-nota { font-size: 12px; }
    .mat-subiendo { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 12px; color: var(--text-dim); }
    .mat-subiendo b { color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
    .mat-subiendo .mat-prog { max-width: none; }
    .mat-subiendo-err { color: var(--error); margin-top: 6px; }
    .mat-reglas { margin-top: 14px; font-size: 12px; color: var(--text-dim); line-height: 1.6; padding: 16px; }
    .mat-reglas b { color: var(--text); }
    /* Biblioteca: barra, estrella, selección, listado y miniaturas */
    .mat-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
    .mat-busca { flex: 1 1 160px; min-width: 120px; margin-bottom: 0; }
    .mat-orden { width: auto; margin-bottom: 0; }
    .mat-opcion { font-size: 12px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
    .mat-toggle { font-size: 12px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer; }
    .mat-toggle:hover { border-color: var(--accent); color: var(--text); }
    .mat-toggle.activo { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 16%, transparent); }
    .mat-vistas { display: inline-flex; gap: 4px; }
    .mat-tam { display: flex; align-items: center; gap: 6px; color: var(--text-dim); }
    .mat-tam input[type="range"] { width: 130px; margin: 0; cursor: pointer; accent-color: var(--accent); background: transparent; }
    .mat-selbarra { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 10px; border: 1px solid var(--accent); border-radius: 10px; font-size: 13px; color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); }
    .mat-estrella { background: none; border: none; box-shadow: none; padding: 0 4px; font-size: 20px; line-height: 1; cursor: pointer; color: var(--text-dim); }
    .mat-estrella:hover, .mat-estrella:focus-visible { background: none; color: #f5b301; outline: none; transform: none; }
    .mat-estrella.on { color: #f5b301; }
    .mat-check { display: inline-flex; align-items: center; flex: none; cursor: pointer; }
    .mat-check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; margin: 0; }
    .mat-portada { position: relative; }
    .mat-portada img, .mat-mini-fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
    .mat-grilla { display: grid; grid-template-columns: repeat(auto-fill, var(--mat-tam, 200px)); justify-content: start; gap: 18px 16px; margin-bottom: 10px; }
    .mat-mini { width: var(--mat-tam, 200px); min-width: 0; }
    .mat-mini.abrible { cursor: pointer; }
    .mat-mini-portada { position: relative; width: 100%; aspect-ratio: 1 / 1.414; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 1px 4px color-mix(in srgb, #000 22%, transparent); transition: transform .12s ease, box-shadow .12s ease; }
    .mat-mini.abrible:hover .mat-mini-portada { transform: translateY(-2px); box-shadow: 0 6px 14px color-mix(in srgb, #000 30%, transparent); }
    .mat-mini.sel .mat-mini-portada { outline: 3px solid var(--accent); outline-offset: 1px; }
    .mat-mini-fondo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: calc(var(--mat-tam, 200px) * .16); }
    .mat-mini-velo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; background: color-mix(in srgb, #000 55%, transparent); }
    .mat-mini-velo .mat-prog { width: 70%; }
    .mat-check.mini { position: absolute; top: 6px; left: 6px; padding: 3px; border-radius: 6px; background: color-mix(in srgb, #000 45%, transparent); opacity: 0; transition: opacity .12s; }
    .mat-mini:hover .mat-check.mini, .mat-mini.sel .mat-check.mini, .mat-grilla:focus-within .mat-check.mini { opacity: 1; }
    .mat-mini-estrella { position: absolute; top: 4px; right: 4px; border-radius: 6px; background: color-mix(in srgb, #000 45%, transparent); }
    .mat-mini-estrella .mat-estrella { color: #fff; font-size: 18px; }
    .mat-mini-estrella .mat-estrella.on { color: #f5b301; }
    .mat-mini-tit { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .mat-mini-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; }
    .mat-mini-acc { margin-left: auto; display: inline-flex; gap: 6px; }
    .mat-mini-btn { background: none; border: none; box-shadow: none; padding: 0; font-size: 11px; color: var(--text-dim); text-decoration: underline; cursor: pointer; }
    .mat-mini-btn:hover { background: none; color: var(--text); transform: none; }
    .mat-mini-siglas { position: relative; z-index: 0; }
    .mat-item .mat-check { margin-right: -4px; }
    .mat-visor-barra { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; color: var(--text); }
    .mat-visor-cont { height: calc(100vh - 170px); min-height: 420px; }
    /* Pregúntale al libro (Material): panel lateral derecho */
    .lado-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 92vw; z-index: 1150; display: none; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -4px 0 18px rgba(0,0,0,.25); }
    .lado-panel.open { display: flex; }
    body.preg-abierto, body.cap-abierto { padding-right: 360px; }
    .lado-cab { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
    .lado-cab .mat-meta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lado-cab b { flex: none; }
    .lado-cab b:first-child + .lado-x { margin-left: auto; }
    .lado-x { background: none; border: 0; color: var(--text-dim); font-size: 16px; cursor: pointer; padding: 2px 6px; }
    .lado-x:hover { color: var(--text); }
    .lado-cuerpo { flex: 1; overflow-y: auto; padding: 12px 14px; }
    .preg-q { font-size: 13px; font-weight: 600; color: var(--text); margin: 10px 0 4px; overflow-wrap: anywhere; }
    .preg-resp { font-size: 13px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
    .preg-pensando { font-size: 13px; color: var(--text-dim); font-style: italic; }
    .preg-error { font-size: 13px; color: var(--error); }
    .preg-cita { font-size: 12px; color: var(--text-dim); margin-top: 6px; padding-left: 8px; border-left: 2px solid var(--border); overflow-wrap: anywhere; }
    .preg-pag { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--accent-text); cursor: pointer; }
    .preg-pag:hover { text-decoration: underline; }
    .preg-entrada { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px; border-top: 1px solid var(--border); }
    .preg-entrada textarea { flex: 1; resize: none; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border-strong, var(--border)); border-radius: 6px; background: var(--bg); color: var(--text); }
    #adminVisorOverlay { position: fixed; inset: 0; z-index: 1100; background: var(--bg); display: flex; flex-direction: column; padding: 12px 20px; }
    #adminVisorOverlay .mat-visor-cont { flex: 1; height: auto; }
    /* Apelaciones (Admin) */
    .apel-card { margin-bottom: 14px; }
    .apel-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
    .apel-motivo { font-size: 14px; color: var(--text); padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; overflow-wrap: anywhere; }
    .apel-acc { display: flex; gap: 10px; margin-top: 16px; align-items: center; flex-wrap: wrap; }
    .apel-acc .sep { margin-left: auto; }
    .apel-nota { font-size: 11px; color: var(--text-dim); margin-top: 6px; }

/* Material: portada y título abren el documento (2026-10-05). */
.mat-abre { cursor: pointer; }
h4.mat-abre:hover { text-decoration: underline; }
/* Atlas abierto desde Material: sin el cuadro del informe (2026-10-05). */
.app-layout.atlas-solo .app-content-col { display: none; }
.app-layout.atlas-solo, .app-layout.atlas-solo.tpl-collapsed { grid-template-columns: 44px minmax(0, 1fr); }
@media (orientation: portrait), (max-width: 820px) {
  /* En vertical el panel de plantillas se oculta: el atlas solo ocupa todo. */
  .app-layout.atlas-solo, .app-layout.atlas-solo.tpl-collapsed { grid-template-columns: 1fr; }
  .app-layout.atlas-solo .atlas { height: calc(100vh - 90px); }
}
.lecturas-ris-fila { display: flex; justify-content: flex-end; margin: -6px 0 6px; }

/* Material: abrir desde Google Drive */
.mat-drive { margin-top: 10px; text-align: center; }
.mat-drive .btn-secondary { width: 100%; margin-bottom: 6px; }
    .cap-item { padding: 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; }
    .cap-tit { font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
    .cap-num { color: var(--text-dim); }
    .cap-acc { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
    .cap-resumen { margin-top: 8px; font-size: 13px; color: var(--text); }
    .cap-sec { margin-top: 8px; }
    .cap-sec ul { margin: 4px 0 0; padding-left: 18px; }
    .cap-sec li { overflow-wrap: anywhere; }
    .cap-audio { width: 100%; margin-top: 8px; }
    .cap-largo { margin-left: auto; font-size: 12px; color: var(--text-dim); }
    .cap-largo select { font: inherit; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; }
    .lado-cab .cap-largo + .lado-x { margin-left: 8px; }

/* Voz: vista previa en vivo del dictado (no toca el informe) */
.dictado-vivo { position: fixed; z-index: 60; max-width: 420px; padding: 6px 12px; border-radius: 8px; background: var(--surface); color: var(--text); border: 1px solid var(--primary); box-shadow: 0 4px 14px rgba(0,0,0,.25); font-size: 14px; font-style: italic; pointer-events: none; }
.dictado-vivo[hidden] { display: none; }
.dictado-sugerencia { display: flex; align-items: center; gap: 10px; font-style: normal; pointer-events: auto; }
.dictado-sugerencia[hidden] { display: none; }

/* Modo generativo v0 (spec generativa-v0-2026-10-08): propuesta de informe
   completo, mockup A. Reglas copiadas tal cual del mockup elegido por Álvaro. */
.gen-panel[hidden] { display: none; }
.gen-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.gen-badge { font-size:11px; letter-spacing:.6px; text-transform:uppercase; color: var(--warning);
  border:1px solid rgba(246,173,85,.45); background: rgba(246,173,85,.08); border-radius:999px; padding:2px 10px; }
.gen-exam { font-size:13px; color: var(--text-dim); }
.gen-exam b { color: var(--text); font-weight:600; }
.gen-exam a { color: var(--accent-text); margin-left:8px; font-size:12px; cursor:pointer; text-decoration:underline; }
.gen-text { font-size:15px; line-height:1.75; white-space:normal; }
.gen-text .ln { display:block; padding:1px 8px; border-left:3px solid transparent; border-radius:3px; }
.gen-text .ln.tit { font-weight:700; letter-spacing:.3px; }
.gen-text .ln.normal { color: var(--text-dim); opacity:.78; }
.gen-text .ln.normal::before { content:'·'; display:inline-block; width:14px; color: var(--text-dim); }
.gen-text .ln.tuya { border-left-color: var(--primary); background: rgba(255,106,61,.06); }
.gen-text .ln.tuya::before { content:'▶'; display:inline-block; width:14px; font-size:10px; color: var(--primary); vertical-align:1px; }
.gen-text mark.dict { background: rgba(255,106,61,.20); color: var(--text); border-radius:3px; padding:0 2px; }
.gen-text .imp { margin-top:12px; padding:8px 10px; border:1px dashed var(--border); border-radius:8px; }
.gen-text .imp .lbl { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color: var(--text-dim); display:block; margin-bottom:2px; }
.gen-note { margin-top:10px; font-size:12.5px; color: var(--text-dim); line-height:1.5; }
.gen-note b { color: var(--text); }
.gen-warn { margin-top:12px; padding:9px 12px; border:1px solid rgba(246,173,85,.45); background: rgba(246,173,85,.08);
  border-radius:8px; font-size:13.5px; color: var(--text); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.gen-warn .t { flex:1 1 280px; } .gen-warn .t b { color: var(--warning); }
.gen-btns { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:center; }
.gen-keys { font-size:12px; color: var(--text-dim); margin-left:4px; }
.gen-keys kbd { border:1px solid var(--border); border-bottom-width:2px; border-radius:4px; padding:0 5px; font-size:11px; color: var(--text); }
/* Agregados a la v0 (no estaban en el mockup): quitar una línea gris, rótulos y líneas en blanco. */
.gen-text .ln.normal { cursor:pointer; }
.gen-text .ln.normal:hover, .gen-text .ln.normal:focus-visible { opacity:1; outline:1px dashed var(--border); }
.gen-text .ln.quitada { text-decoration: line-through; opacity:.5; cursor:pointer; }
.gen-text .ln.vacia { height:.6em; }
.gen-tag { font-size:11px; color: var(--warning); margin-left:6px; white-space:nowrap; }
.gen-btns select { max-width: 100%; }

/* ---------- Interconsultas (spec interconsultas-2026-10-10, mockup aprobado aparte) ---------- */
.ic-wrap { max-width: 1100px; }
.ic-aviso {
  margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--warning); border-radius: 8px;
  background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--text); font-size: 13px;
}
.ic-aviso b { color: var(--warning); }
.ic-rejilla { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px; }
@media (max-width: 760px) { .ic-rejilla { grid-template-columns: minmax(0, 1fr); } }
.ic-col { min-width: 0; padding: 16px; margin-bottom: 0; }
.ic-col-cabeza { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ic-titulo { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-dim); }
.ic-col-cabeza .ic-titulo { margin: 0; }
.ic-lista { display: flex; flex-direction: column; gap: 8px; }
.ic-item {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font-weight: 400; font-size: 14px;
}
.ic-item:hover { border-color: var(--text-dim); }
.ic-item.sel { border-color: var(--primary); }
.ic-l1 { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.ic-l2 { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.ic-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 2px 7px; border-radius: 4px; background: var(--border); color: var(--text);
}
.ic-burbuja {
  display: inline-block; min-width: 18px; margin-left: 5px; padding: 0 6px; border-radius: 10px;
  background: var(--primary); color: #0f1117; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px;
}
html[data-theme="light"] .ic-burbuja { color: #ffffff; }
.ic-burbuja[hidden] { display: none; }
.ic-vacio { padding: 18px; text-align: center; color: var(--text-dim); font-size: 13px; }
.ic-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 520px) { .ic-dos { grid-template-columns: minmax(0, 1fr); } }
.ic-texto { min-height: 140px; }
.ic-texto-resp { min-height: 90px; }
.ic-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.ic-pista { font-size: 12px; color: var(--text-dim); }
.ic-cabeza {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 12px;
}
.ic-quien { font-weight: 700; overflow-wrap: anywhere; }
.ic-hilo { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; margin-bottom: 14px; }
.ic-msj {
  max-width: 88%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px;
}
.ic-msj.mio {
  align-self: flex-end; background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}
.ic-de { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 2px; white-space: normal; }
.ic-filtro {
  margin-top: 14px; border: 1px solid var(--clinical-value); border-radius: 10px; padding: 12px 14px;
  background: color-mix(in srgb, var(--clinical-value) 8%, transparent);
}
.ic-filtro p { margin: 0 0 8px; font-size: 13px; }
.ic-filtro-texto {
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
}
.ic-tapado {
  padding: 0 4px; border-radius: 4px; font-weight: 700; font-size: 12.5px; color: var(--warning);
  background: color-mix(in srgb, var(--warning) 16%, transparent);
}
.ic-error { margin-top: 12px; color: var(--error); font-size: 13px; }
.ic-contactos { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 20px; padding: 16px; }
@media (max-width: 760px) { .ic-contactos { grid-template-columns: minmax(0, 1fr); } }
.ic-codigo {
  font-family: Consolas, 'Courier New', monospace; padding: 1px 8px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
}
.ic-invitar .modal-input { margin-bottom: 10px; }
.ic-invitar-msg { margin-top: 8px; min-height: 1em; }
.ic-personas .ic-titulo { margin-top: 14px; }
.ic-personas .ic-titulo:first-child { margin-top: 0; }
.ic-persona {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
  padding: 8px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere;
}
.ic-persona-acciones { display: flex; gap: 6px; flex-wrap: wrap; }

    /* «Corregir y recordar» (spec voz-corregir-y-recordar-2026-10-12) */
    .voz-corregir-btn {
      position: fixed; z-index: 150; display: inline-flex; gap: 6px; align-items: center;
      background: var(--primary); color: #0f1117; font-weight: 700; font-size: 12.5px;
      border: 0; border-radius: 999px; padding: 5px 11px; cursor: pointer;
      box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    }
    .voz-corregir-btn[hidden], .voz-corregir-caja[hidden] { display: none; }
    html[data-theme="light"] .voz-corregir-btn { color: #ffffff; }
    .voz-corregir-caja {
      position: fixed; z-index: 160; width: min(320px, calc(100vw - 16px)); display: grid; gap: 8px;
      background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4); font-size: 13px;
    }
    .voz-corregir-caja label { color: var(--text-dim); font-size: 12px; display: block; }
    .voz-corregir-caja .voz-oido, .voz-dic-tabla .voz-oido { font-family: ui-monospace, monospace; color: var(--warning); overflow-wrap: anywhere; }
    .voz-corregir-caja input {
      width: 100%; box-sizing: border-box; padding: 7px 9px; border-radius: 7px;
      border: 1px solid var(--primary); background: var(--surface); color: var(--text); font-size: 14px; font-family: inherit;
    }
    .voz-corregir-fila { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
    .voz-corregir-fila button { padding: 6px 12px; font-size: 13px; }
    .voz-dic-tabla { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
    .voz-dic-tabla th { text-align: left; color: var(--text-dim); font-size: 12px; font-weight: 600; padding: 4px 6px; }
    .voz-dic-tabla td { padding: 8px 6px; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
    .voz-dic-borrar { padding: 4px 10px; font-size: 12px; }

    /* Admin › Voz (spec voz-corregir-y-recordar-2026-10-12, agregado) */
    .voz-admin-titulo { font-size: 15px; font-weight: 700; margin: 18px 0 8px; }
    .voz-admin-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
    .voz-admin-tabla th { text-align: left; color: var(--text-dim); font-size: 12px; font-weight: 600; padding: 4px 8px; }
    .voz-admin-tabla td { padding: 8px; border-top: 1px solid var(--border); overflow-wrap: anywhere; vertical-align: middle; }
    .voz-admin-tabla .voz-oido { font-family: ui-monospace, monospace; color: var(--warning); }
    .voz-admin-tabla .voz-acciones { white-space: nowrap; text-align: right; }
    .voz-admin-tabla .voz-acciones button { padding: 4px 10px; font-size: 12px; margin-left: 6px; }
    .voz-admin-vacio { color: var(--text-dim); font-size: 13px; padding: 8px 0; }
    .voz-admin-agregar { display: flex; gap: 8px; margin-top: 10px; max-width: 420px; }
    .voz-admin-agregar input { flex: 1; min-width: 0; padding: 7px 9px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; font-family: inherit; }