:root {
    --bg: #0a0d12;
    --surface: #111620;
    --surface2: #171e2e;
    --surface3: #1e2740;
    --border: #232d45;
    --border2: #2d3a58;
    --accent: #4f9cf9;
    --accent2: #38d9a9;
    --accent3: #ffd43b;
    --text: #e8edf5;
    --text2: #8fa0bf;
    --text3: #5a6e8a;
    --red: #ff6b6b;
    --orange: #ff9f43;
    --green: #38d9a9;
    --green-bg: rgba(56,217,169,0.08);
    --orange-bg: rgba(255,159,67,0.08);
    --red-bg: rgba(255,107,107,0.08);
    --danger: #ff4757;
    --warning: #ffa502;
    --radius: 12px;
    --radius-lg: 18px;
    --header-bg: rgba(10,13,18,0.92);
    --nav-bg: rgba(10,13,18,0.85);
    --nav-bg-solid: rgba(10,13,18,0.97);
    --grid-line: rgba(79,156,249,0.03);
    --hover-tint: rgba(255,255,255,0.03);
    --alert-danger-text: #ff8a95;
    --alert-warning-text: #ffc048;
    /* Tiempos de tejido (lib/tejidos.js): gravedad de la barra y línea «Hoy» */
    --tej-minima: rgba(251,146,60,0.30);
    --tej-leve: rgba(251,146,60,0.60);
    --tej-moderada: rgba(232,89,52,0.75);
    --tej-grave: rgba(196,38,38,0.90);
    --tej-hoy: #4f9cf9;
    --lime: #b4dc50;
    /* Silueta de la fase 2 (data/siluetas.js) */
    --sil-contorno: #1a2236;
    --sil-parte: #2c3858;
    --sil-pelo: #222c45;
    --sil-borde: #43557f;
    --sil-zona: #7086ad;
    --sil-sin-region: #3e4864;
    --on-accent: #fff;
    --scrim: rgba(0,0,0,0.6);
    --scrim-blur: blur(6px);
    --modal-shadow: 0 20px 60px rgba(0,0,0,0.5);
    color-scheme: dark;
  }

  /* Light theme. `data-theme` is always the *resolved* theme ('light'|'dark'),
     set by the head script / applyTheme() in app.js from the stored choice
     ('system' follows prefers-color-scheme). Dark stays the :root default, so
     with no JS or no attribute nothing changes. Accents are darker than the
     dark theme's pastels so text keeps contrast on white. */
  :root[data-theme="light"] {
    --bg: #f3f5f9;
    --surface: #ffffff;
    --surface2: #eef2f8;
    --surface3: #e3e9f4;
    --border: #d6dded;
    --border2: #c2ccdf;
    --accent: #1d6fd8;
    --accent2: #0b8f6c;
    --accent3: #a87b00;
    --text: #131a29;
    --text2: #44547a;
    --text3: #667694;
    --red: #d12f3f;
    --orange: #c2620a;
    --green: #0b8f6c;
    --green-bg: rgba(11,143,108,0.09);
    --orange-bg: rgba(194,98,10,0.09);
    --red-bg: rgba(209,47,63,0.08);
    --danger: #d12f3f;
    --warning: #b36b00;
    --header-bg: rgba(255,255,255,0.92);
    --nav-bg: rgba(255,255,255,0.88);
    --nav-bg-solid: rgba(255,255,255,0.97);
    --grid-line: rgba(29,111,216,0.05);
    --hover-tint: rgba(19,26,41,0.04);
    --alert-danger-text: #b3202f;
    --alert-warning-text: #8a5300;
    --tej-minima: rgba(234,120,30,0.35);
    --tej-leve: rgba(234,120,30,0.50);
    --tej-moderada: rgba(214,72,36,0.70);
    --tej-grave: rgba(176,26,26,0.85);
    --tej-hoy: #1d6fd8;
    --lime: #5f7d0f;
    --sil-contorno: #c3cde0;
    --sil-parte: #dde4f0;
    --sil-pelo: #b9c4d8;
    --sil-borde: #97a6c2;
    --sil-zona: #4f6185;
    --sil-sin-region: #a3afc6;
    --scrim: rgba(19,26,41,0.38);
    --modal-shadow: 0 20px 60px rgba(19,26,41,0.22);
    color-scheme: light;   /* native controls (checkboxes, date inputs) in light style */
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    background: var(--bg);
    overflow-x: hidden;
  }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    min-height: 100vh;
  }

  /* Background grid */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
  }

  /* Header */
  .app-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: var(--header-bg);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 0 2rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }

  .logo-main {
    font-family: 'DM Serif Display', serif;
    font-size: 1.5rem;
    color: var(--text);
    letter-spacing: -0.5px;
  }
  .logo-q {
    background: linear-gradient(135deg, #4f9cf9, #38d9a9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  @keyframes hub-back-hint { 0%{transform:translateX(0)} 35%{transform:translateX(-5px)} 65%{transform:translateX(1px)} 100%{transform:translateX(0)} }
  .in-hub .logo-main { cursor: pointer; transition: opacity 0.15s; }
  .in-hub .logo-main::before { content: '‹'; display: inline-block; margin-right: 8px; opacity: 0.55; animation: hub-back-hint 0.7s ease-out 0.5s 1 both; }
  .in-hub .logo-main:hover { opacity: 0.75; }

  .logo-sub {
    font-family: 'DM Serif Display', serif;
    font-size: 1.5rem;
    color: var(--accent);
    letter-spacing: -0.5px;
  }

  .logo-sub-initial { display: none; }

  .header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .phase-indicator {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    color: var(--text3);
    letter-spacing: 1px;
  }

  /* Progress bar */
  .progress-bar-wrap {
    position: fixed;
    top: 64px; left: 0; right: 0;
    z-index: 99;
    height: 3px;
    background: var(--border);
  }
  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 0 12px var(--accent);
  }

  /* Phase steps nav */
  .phase-nav {
    position: fixed;
    top: 67px; left: 0; right: 0;
    z-index: 98;
    background: var(--nav-bg);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 0;
    height: 48px;
    overflow-x: auto;
  }

  .phase-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    height: 100%;
    font-size: 0.72rem;
    color: var(--text3);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    font-family: 'DM Mono', monospace;
    letter-spacing: 0.5px;
  }
  .phase-step.active { color: var(--accent); border-bottom-color: var(--accent); }
  .phase-step.completed {
    color: var(--accent2);
    cursor: pointer;
  }
  .phase-step.completed:hover {
    background: rgba(56,217,169,0.06);
    color: var(--accent2);
    border-bottom: 2px solid rgba(56,217,169,0.4);
  }
  .phase-step.invalidated {
    color: var(--orange);
    cursor: not-allowed;
    opacity: 0.7;
  }
  .phase-step.invalidated .phase-step-num {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--bg);
  }
  .phase-step.invalidated:hover {
    background: rgba(255,159,67,0.06);
    border-bottom: 2px solid rgba(255,159,67,0.3);
  }
  .phase-step-num {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1px solid currentColor;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem;
    flex-shrink: 0;
  }
  .phase-step.completed .phase-step-num {
    background: var(--accent2);
    border-color: var(--accent2);
    color: var(--bg);
  }

  /* Main content */
  .main {
    margin-top: 115px;
    min-height: calc(100vh - 115px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1rem 4rem;
    position: relative;
    z-index: 1;
    transition: margin-top 0.25s ease;
  }

  .phase-container {
    width: 100%;
    max-width: 780px;
    display: none;
    animation: fadeUp 0.4s ease;
  }
  .phase-container.active { display: block; }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes faseFundido {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Aviso inferior (showToast): se centra con translateX(-50%), así que su
     animación debe conservarlo; con fadeUp lo pisaba y el aviso aparecía
     desplazado a la derecha antes de saltar a su sitio. */
  @keyframes toastUp {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  /* Phase header */
  .phase-header {
    margin-bottom: 2rem;
  }
  .phase-tag {
    font-family: 'DM Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 3px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .phase-title {
    font-family: 'DM Serif Display', serif;
    font-size: 2rem;
    color: var(--text);
    line-height: 1.2;
  }
  .phase-subtitle {
    font-size: 0.85rem;
    color: var(--text2);
    margin-top: 6px;
    line-height: 1.5;
  }

  /* Cards */
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
  }
  /* The last child's own margin (form-group, option groups…) would add to the
     card's padding and make the bottom space differ from card to card. */
  .card > :last-child { margin-bottom: 0; }
  .card-title {
    font-size: 0.8rem;
    font-family: 'DM Mono', monospace;
    color: var(--text2);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1rem;
  }

  /* Form elements */
  .form-group {
    margin-bottom: 1.2rem;
  }
  .form-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text2);
    margin-bottom: 8px;
    font-weight: 400;
  }
  .form-label strong { color: var(--text); font-weight: 500; }

  .form-input {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
  }
  .form-input:focus { border-color: var(--accent); }
  .form-input::placeholder { color: var(--text3); }
  .form-input:-webkit-autofill,
  .form-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--surface2) inset;
    -webkit-text-fill-color: var(--text);
    transition: background-color 5000s ease-in-out 0s;
  }

  textarea.form-input { resize: vertical; min-height: 80px; }

  /* Signos vitales / antropometría: grouped into semantic rows (talla/peso/imc,
     tas/tad, fc/fr/spo2/edad) instead of one uniform grid, so each row's items
     share its width evenly regardless of how many other rows exist. */
  .vitals-row {
    display: flex;
    align-items: flex-start;
    gap: 12px 16px;
    margin-bottom: 12px;
  }
  .vitals-row:last-child { margin-bottom: 0; }
  .vitals-row .form-group { flex: 1; margin-bottom: 0; }
  #imcCalculado { color: var(--text2); }
  /* Shared by imcCalculado and the raw vitalFc/Fr/Spo2/Tas/Tad inputs — see
     VITAL_BANDS in app.js for the thresholds behind each color. */
  .form-input.vital-green { color: var(--green); border-color: rgba(56,217,169,0.4); background: rgba(56,217,169,0.06); }
  .form-input.vital-orange { color: var(--orange); border-color: rgba(255,159,67,0.4); background: rgba(255,159,67,0.06); }
  .form-input.vital-red { color: var(--red); border-color: rgba(255,107,107,0.4); background: rgba(255,107,107,0.06); }
  /* Category name (Taquicardia, Hipertensión, ...) under an out-of-range
     field. Empty (the normal case) collapses to zero height via :empty, so
     it costs no vertical space on mobile unless a value actually flags. */
  .vital-flag {
    font-size: 0.7rem;
    font-family: 'DM Mono', monospace;
    margin-top: 4px;
  }
  .vital-flag:empty { display: none; }
  .vital-flag.vital-orange { color: var(--orange); }
  .vital-flag.vital-red { color: var(--red); }

  /* Quick-input bar: phrase chips + voice dictation, under free-text fields */
  .quick-input-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
  }
  .chip-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    flex: 1;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip-btn {
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: 20px;
    padding: 6px 12px;
    color: var(--text2);
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .chip-btn:hover, .chip-btn:active { border-color: var(--accent); color: var(--text); }
  .chip-btn.used {
    opacity: 0.4;
    cursor: default;
    text-decoration: line-through;
  }
  .chip-btn.used:hover { border-color: var(--border2); color: var(--text2); }
  .mic-btn {
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
  }
  .mic-btn:hover { border-color: var(--accent); }
  .mic-btn.listening {
    background: rgba(255,71,87,0.12);
    border-color: var(--red);
    animation: recordPulse 1.2s ease-in-out infinite;
  }

  /* Label carrying the mic button next to the question, instead of a lone
     circular button below the field when it has no chips (injectQuickInputBar).
     `label.label-with-mic` (element+class) so it still wins over `.fp-q`'s
     `display: block` (single class) regardless of stylesheet order. */
  label.label-with-mic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .mic-btn:disabled { opacity: 0.4; cursor: default; }
  .mic-btn:disabled:hover { border-color: var(--border2); }
  .label-with-mic .mic-btn,
  .pregunta-cabecera .mic-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 0.8rem;
  }

  /* Patient field — compact identity row matching other satellites */
  .info-row { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 1.5rem; }
  .field { flex: 1; display: flex; flex-direction: column; gap: 5px; }
  .field-label { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; }
  .field-input { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 9px 12px; font-family: 'DM Mono', monospace; font-size: 12px; outline: none; transition: border-color 0.2s; width: 100%; }
  .field-input:focus { border-color: var(--accent); }
  .field-input:-webkit-autofill, .field-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px var(--surface) inset; -webkit-text-fill-color: var(--text); transition: background-color 5000s ease-in-out 0s; }

  /* Option buttons */
  .option-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  /* Lado afectado (fase 2, bajo la región): botones a partes iguales que
     pasan a dos filas en pantallas estrechas en vez de desbordar. */
  .lado-wrap { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
  .lado-wrap[hidden] { display: none; }
  .lado-opcional { text-transform: none; letter-spacing: 0; }
  /* Sexo (fase 1, junto a la edad): dos botones del mismo ancho */
  .sexo-wrap { margin-top: 4px; }
  .sexo-group .option-btn { flex: 1 1 calc(50% - 4px); min-height: 40px; text-align: center; padding: 8px 6px; }
  .lado-group .option-btn { flex: 1 1 calc(25% - 8px); min-width: 72px; min-height: 40px; text-align: center; padding: 8px 6px; }
  /* Con «Central» (columna) son cuatro: en pantalla estrecha, 2×2 en vez de 3 + 1 */
  @media (max-width: 420px) {
    .lado-group:has(.lado-central:not([hidden])) .option-btn { flex-basis: calc(50% - 4px); }
  }
  /* Tarjeta «Síntomas» de la fase 3 (sintomas.js): P1 y hasta 3 secundarios */
  #cardSintomas[hidden] { display: none; }
  .sint-contador { color: var(--text3); font-weight: 400; margin-left: 6px; }
  .sint-item { border: 1px solid var(--border); border-radius: 10px; padding: 1rem; margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
  .sint-item.sint-p1 { border-color: var(--accent); }
  .sint-cab { display: flex; align-items: center; gap: 8px; }
  .sint-num { font-family: 'DM Mono', monospace; font-weight: 600; color: var(--accent); }
  .sint-tipo { font-size: 0.8rem; color: var(--text2); flex: 1; }
  .sint-accion { background: none; border: 1px solid var(--border2); color: var(--text2); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 0.78rem; cursor: pointer; min-height: 36px; }
  .sint-quitar { width: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  .sint-campo { display: flex; flex-direction: column; gap: 6px; }
  .sint-zonas .option-btn { padding: 7px 12px; font-size: 0.82rem; }
  .sint-otra { border-style: dashed; }
  .sint-libre { margin-top: 2px; }
  .sint-hint { font-size: 0.78rem; color: var(--text3); }
  /* Recordatorio de la fase 2 de una zona (hoy el periné → l6, cauda equina): solo recuerda */
  .sint-recordatorio { font-size: 0.82rem; line-height: 1.45; color: var(--alert-warning-text); background: var(--orange-bg); border: 1px solid var(--orange); border-radius: 8px; padding: 10px 12px; margin-top: 4px; }
  .sint-recordatorio-ir { display: block; margin-top: 6px; background: none; border: none; padding: 6px 0; min-height: 36px; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
  .sint-tercios .option-btn, .sint-grupo:not(.lado-group):not(.sint-relacion) .option-btn { flex: 1 1 0; text-align: center; padding: 8px 6px; }
  .sint-grupo .option-btn { white-space: nowrap; }
  .sint-relacion .option-btn { flex: 1 1 calc(50% - 8px); text-align: center; padding: 8px 6px; }
  .sint-nrs { display: flex; gap: 4px; }
  .sint-nrs-btn { flex: 1 1 0; min-width: 0; min-height: 36px; padding: 0; background: var(--surface2); border: 1px solid var(--border2); border-radius: 6px; color: var(--text2); font-family: 'DM Mono', monospace; font-size: 0.8rem; cursor: pointer; }
  .sint-nrs-btn.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
  .sint-anadir { margin-top: 12px; width: 100%; }

  .option-btn {
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 8px 16px;
    color: var(--text2);
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
    line-height: 1.3;
  }
  /* :hover solo con ratón: en táctil se queda pegado en el último botón tocado
     y un botón recién deseleccionado parecía seguir marcado (borde de color).
     Igual en .nrs-btn, .test-result-btn, .fp-escala-btn y .region-card. */
  @media (hover: hover) { .option-btn:hover { border-color: var(--accent); color: var(--text); } }
  .option-btn.selected {
    background: rgba(79,156,249,0.12);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 500;
  }
  .option-btn.danger { }
  .option-btn.danger.selected {
    background: rgba(255,71,87,0.12);
    border-color: var(--danger);
    color: var(--danger);
  }

  /* Slider */
  .slider-wrap { display: flex; align-items: center; gap: 1rem; }
  .slider-val {
    font-family: 'DM Serif Display', serif;
    font-size: 2rem;
    color: var(--accent);
    min-width: 40px;
    text-align: center;
  }
  input[type=range] {
    flex: 1;
    -webkit-appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--border2);
    outline: none;
    touch-action: pan-x;
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 0 8px rgba(79,156,249,0.5);
  }

  /* Alert banners */
  .alert {
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.85rem;
    line-height: 1.5;
  }
  .alert-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
  .alert-danger { background: rgba(255,71,87,0.1); border: 1px solid rgba(255,71,87,0.3); color: var(--alert-danger-text); }
  .alert-warning { background: rgba(255,165,2,0.1); border: 1px solid rgba(255,165,2,0.3); color: var(--alert-warning-text); }
  .alert-info { background: rgba(79,156,249,0.08); border: 1px solid rgba(79,156,249,0.2); color: var(--text2); }
  .alert-success { background: var(--green-bg); border: 1px solid rgba(56,217,169,0.2); color: var(--accent2); }

  /* Navigation buttons */
  .nav-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    justify-content: flex-end;
  }
  .btn {
    padding: 12px 28px;
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    outline: none;
  }
  .btn-primary {
    background: linear-gradient(135deg, var(--accent), #3d7fd4);
    color: white;
    box-shadow: 0 4px 16px rgba(79,156,249,0.25);
  }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(79,156,249,0.35); }
  .btn-secondary {
    background: transparent;
    border: 1px solid var(--border2);
    color: var(--text2);
  }
  .btn-secondary:hover { border-color: var(--text2); color: var(--text); }

  /* Region selector grid */
  /* Lista de regiones (reserva de la silueta): botones compactos que se
     reparten en las filas que haga falta. */
  .region-lista { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
  .region-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .region-card {
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    min-height: 40px;
    padding: 0 14px;
    display: flex; align-items: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
  }
  @media (hover: hover) { .region-card:hover { border-color: var(--accent); } }
  .region-card.selected {
    background: rgba(79,156,249,0.1);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
  }
  .region-name { font-size: 0.9rem; font-weight: 500; color: var(--text); }
  .region-card.selected .region-name { color: var(--accent); }

  /* Silueta de la fase 2 (lib/silueta.js): un toque en una zona elige región
     y lado. Zonas de 44 px colocadas en % del dibujo. */
  .silueta-region { display: flex; flex-direction: column; gap: 10px; }
  .silueta-region:empty { display: none; }
  .sil-elegida { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .sil-elegida-texto { font-size: 1.1rem; font-weight: 600; color: var(--text2); }
  .silueta-region.con-region .sil-elegida-texto { color: var(--accent); }
  /* Línea siempre reservada (vacía con lado elegido): la figura no salta */
  .sil-elegida-sub { font-size: 0.78rem; line-height: 1.3; min-height: 1.3em; color: var(--text3); }
  /* Sexo (el de la fase 1) en una fila de altura fija: el texto «Sin indicar»
     aparece o no sin mover la figura. */
  .sil-sexo-fila { display: flex; align-items: center; gap: 10px; height: 44px; }
  .sil-sexo-etq { font-size: 0.78rem; font-weight: 500; color: var(--text2); }
  .sil-sexo { flex-wrap: nowrap; gap: 6px; }
  .sil-sexo .option-btn { min-height: 44px; padding: 0 14px; }
  .sil-nota { flex: 1; min-width: 0; font-size: 0.75rem; line-height: 1.3; color: var(--text3); }
  .sil-lienzo { position: relative; width: min(280px, 100%); margin: 0 auto; }
  .sil-lienzo svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .sil-contorno { fill: var(--sil-contorno); stroke: var(--sil-borde); stroke-width: 3; }
  .sil-parte { fill: var(--sil-parte); }
  .sil-pelo { fill: var(--sil-pelo); }
  /* Encima de la figura: IZQ · Vista desde detrás · DER (fuera del dibujo, que
     tiene la cabeza arriba en el centro) */
  .sil-vista { width: min(280px, 100%); margin: 0 auto -4px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .sil-lado { font-family: 'DM Mono', monospace; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; color: var(--text2); }
  .sil-vista-texto { font-size: 0.78rem; font-weight: 500; color: var(--text2); }
  .sil-zona, .sil-sin-region { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; }
  .sil-zona { width: 44px; height: 44px; padding: 0; background: transparent; border: 1.5px dashed var(--sil-zona); cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .sil-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--sil-zona); }
  /* Región elegida sin lado: borde continuo y «?» («¿qué lado?») en vez del
     punto. La discontinua queda solo para «no elegido». */
  .sil-zona.sil-zona-region { border: 2px solid var(--accent); background: var(--surface); }
  .sil-pregunta { display: none; font-size: 1.1rem; font-weight: 700; line-height: 1; color: var(--accent); }
  .sil-zona-region .sil-pregunta { display: block; }
  .sil-zona-region .sil-punto { display: none; }
  .sil-zona.sil-zona-on { border: 2px solid var(--accent); background: rgba(79,156,249,0.28); }
  .sil-zona-on .sil-punto { background: var(--accent); }
  .sil-zona-on .sil-punto { width: 12px; height: 12px; }
  .sil-zona:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (hover: hover) { .sil-zona:hover { border-color: var(--accent); } }
  .sil-sin-region { width: 34px; height: 34px; border: 1.5px dotted var(--sil-sin-region); pointer-events: none; }
  .sil-pie { font-size: 0.75rem; line-height: 1.4; color: var(--text3); text-align: center; }
  .sil-credito { display: block; font-size: 0.65rem; margin-top: 2px; }

  /* Decision tree questions */
  .tree-question {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
  }
  .tree-step-badge {
    font-family: 'DM Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 2px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .tree-question-text {
    font-size: 1rem;
    color: var(--text);
    margin-bottom: 1rem;
    line-height: 1.5;
    font-weight: 400;
  }

  /* Hypothesis cards */
  .hypothesis-card {
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    overflow: hidden;
    overflow: clip;   /* sin ser contenedor de scroll: deja funcionar el sticky de .razon */
    border: 1px solid var(--border);
    transition: all 0.3s;
  }
  .hypothesis-header {
    padding: 1.2rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
  }
  .hypothesis-card.open .hypothesis-header {
    border-bottom: 1px solid var(--border);
  }
  .hypothesis-header:hover { background: var(--hover-tint); }

  .hyp-color-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: center;
  }
  .hyp-name {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  /* Nombre y, debajo, «2 de 5 tests hechos» (usuario, 2026-11). Los hijos de un
     flex se vuelven bloque: la elipsis y el recorte a dos líneas de .hyp-name siguen */
  .hyp-titulo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .hyp-progreso {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    color: var(--text3);
  }
  .hyp-progreso-completo { color: var(--text2); }
  /* Bajo el nombre: en móvil, la etiqueta de puntuación con el progreso como una
     parte más (se parte tras cada «·»); en escritorio, solo el progreso (la
     etiqueta va a la derecha, .hyp-score) */
  .hyp-meta { display: block; min-width: 0; font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--text2); }
  .hyp-meta-movil { display: none; }
  .hyp-meta .hyp-etq-parte.hyp-progreso { color: var(--text3); }
  .hyp-meta .hyp-etq-parte.hyp-progreso-completo { color: var(--text2); }
  .hyp-progreso-completo::after { content: ' ✓'; }
  .hyp-replegar { margin-top: 0.75rem; }
  .hyp-score {
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
    color: var(--text3);
    margin-right: 8px;
    flex-shrink: 0;
  }
  .hyp-chevron {
    color: var(--text3);
    font-size: 0.8rem;
    transition: transform 0.3s;
    flex-shrink: 0;
  }
  .hypothesis-card.open .hyp-chevron { transform: rotate(180deg); }

  .hypothesis-body {
    display: none;
    padding: 0 1.5rem 1.5rem;
    background: var(--surface2);
  }
  .hypothesis-card.open .hypothesis-body { display: block; }

  /* ── SISTEMA CONTEXT BANNER (Fase 2 acordeón) ───────────── */
  .sis-context-banner {
    display: none;
    position: fixed;
    top: 115px;
    left: 0; right: 0;
    z-index: 200;
    background: var(--bg);
    padding: 8px 1rem;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 12px 4px var(--bg);
    animation: fadeUp 0.2s ease;
  }
  .sis-context-banner.visible { display: flex; }
  .sis-banner-icon { font-size: 1rem; flex-shrink: 0; }
  .sis-banner-name {
    flex: 1;
    font-size: 0.78rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--text2);
  }
  .fp-banner-cont { flex-shrink: 0; font-family: 'DM Mono', monospace; font-size: 0.65rem; color: var(--text3); white-space: nowrap; }
  /* Irritabilidad (fase 3): el nivel nunca se corta; lo que falta pasa a dos líneas si no cabe */
  .irr-context-banner .sis-banner-name { flex: 0 0 auto; color: var(--text); }
  .irr-context-banner .fp-banner-cont { flex: 1 1 auto; min-width: 0; white-space: normal; line-height: 1.3; }
  /* Back button styles unified in .context-banner-back below */

  /* ── SEMÁFORO DOTS — Tests Exploratorios title ──────────── */
  .semaforo-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    font-size: 0.65em;
    vertical-align: middle;
    margin-left: 6px;
    letter-spacing: 2px;
  }
  .semaforo-legend {
    display: inline;
    letter-spacing: 0.5px;
  }
  @media (max-width: 1024px) {
    .semaforo-legend {
      display: block;
      margin-top: 6px;
      letter-spacing: 1px;
    }
  }

  .hyp-context-banner {
    display: none;
    position: fixed;
    top: 115px;
    left: 0; right: 0;
    z-index: 200;
    background: var(--bg);
    padding: 8px 1rem;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 12px 4px var(--bg);
    animation: fadeUp 0.2s ease;
  }
  /* hyp-context-banner only activates on tablet/mobile — see @media ≤768px */
  .hyp-banner-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  /* Nombre y «↑ volver» en la primera fila; debajo, la etiqueta de puntuación
     (usuario, 2026-11) con todo el ancho bajo el nombre, para que a 320 px y letra
     grande cada parte quepa entera: se parte tras el «·», como .hyp-etq */
  .hyp-banner-score {
    font-family: 'DM Mono', monospace;
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--text2);
  }
  .hyp-banner-score:empty { display: none; }
  .hyp-banner-name {
    flex: 1;
    font-size: 0.8rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text2);
  }
  /* Las tres bandas son un <button> (como .mobile-phase-bar): toda la banda vuelve
     a la cabecera; «↑ volver» es un rótulo sin recuadro, como el «≡» de la barra */
  .context-banner {
    width: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
  }
  .context-banner:active { background: var(--surface2); }
  .context-banner:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  @media (hover: hover) {
    .context-banner:hover { background: var(--surface); }
    .context-banner:hover .context-banner-back { color: var(--text2); }
  }
  .context-banner-back {
    font-size: 0.7rem;
    font-family: 'DM Mono', monospace;
    color: var(--text3);
    flex-shrink: 0;
    padding: 4px 0;
    white-space: nowrap;
    transition: color 0.15s;
  }

  /* Color coding */
  .hyp-green { background: var(--surface); border-color: rgba(56,217,169,0.3); }
  .hyp-green .hypothesis-header { background: rgba(56,217,169,0.05); }
  .hyp-green .hyp-color-dot { background: var(--green); box-shadow: 0 0 8px rgba(56,217,169,0.5); }
  .hyp-green .hyp-name { color: var(--green); }

  .hyp-orange { background: var(--surface); border-color: rgba(255,159,67,0.3); }
  .hyp-orange .hypothesis-header { background: rgba(255,159,67,0.05); }
  .hyp-orange .hyp-color-dot { background: var(--orange); box-shadow: 0 0 8px rgba(255,159,67,0.4); }
  .hyp-orange .hyp-name { color: var(--orange); }

  .hyp-neutral { background: var(--surface); border-color: var(--border2); }
  .hyp-neutral .hyp-color-dot { background: var(--text3); }
  .hyp-neutral .hyp-name { color: var(--text2); }

  .hyp-red { background: var(--surface); border-color: rgba(255,107,107,0.3); }
  .hyp-red .hypothesis-header { background: rgba(255,107,107,0.05); }
  .hyp-red .hyp-color-dot { background: var(--red); box-shadow: 0 0 8px rgba(255,107,107,0.4); }
  .hyp-red .hyp-name { color: var(--red); }

  /* Test items */
  .test-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin-top: 1rem;
  }
  .test-name {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 6px;
  }
  .test-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
  }
  .stat-badge {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--surface3);
    color: var(--text2);
    border: 1px solid var(--border2);
  }
  .stat-badge.highlight { background: rgba(79,156,249,0.1); border-color: rgba(79,156,249,0.2); color: var(--accent); }
  .stat-badge.no-data { color: var(--text3); font-style: italic; }
  .stat-badge.lr-weak { color: var(--text3); border-style: dashed; }
  .test-peso { font-size: 0.76rem; color: var(--text2); line-height: 1.4; margin: -2px 0 8px; }
  .test-source { font-size: 0.68rem; color: var(--text3); font-family: 'DM Mono', monospace; margin: -6px 0 10px; }
  .cluster-box { border: 1px dashed var(--border2); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px; background: var(--surface2); }
  .cluster-title { font-size: 0.8rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
  .cluster-rule { font-size: 0.75rem; color: var(--text2); line-height: 1.5; }
  .cluster-box .test-source { margin: 4px 0 0; }
  .test-source .razon-ampliar { font-family: 'Outfit', sans-serif; white-space: nowrap; }
  /* Con el «¿Por qué?» del test abierto, «Ampliar →» solo en su pie (phase4b.js) */
  .test-item:has(> details.razon[open]) .ampliar-fuente { display: none; }
  /* «Anatomía» del test (docs/anatomia-kenhub.md): enlaces a Kenhub bajo la fuente */
  .test-anat { font-size: 0.72rem; color: var(--text3); line-height: 1.6; margin: -4px 0 10px; }
  .test-anat-etq {
    font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 1px;
    text-transform: uppercase; margin-right: 2px;
  }
  .anat-enlace { color: var(--accent); white-space: nowrap; text-decoration: none; }
  .anat-enlace:hover { text-decoration: underline; }
  .anat-idioma {
    font-family: 'DM Mono', monospace; font-size: 0.58rem; letter-spacing: 0.5px;
    border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; vertical-align: 1px; opacity: 0.8;
  }
  .razon-cuerpo .test-anat { margin: 0 0 6px; }
  .razon-anatomia ul { list-style: none; padding: 0; margin: 0; }
  .razon-anatomia li { padding: 2px 0; }
  .in-hub .test-anat, .in-hub .razon-anatomia { display: none; }
  /* En táctil, el área de toque crece con un ::after invisible que se sale 6 px por
     arriba y por abajo, no con padding: con inline-block + padding cada línea del
     ajuste medía 40 px y los enlaces quedaban muy separados (decisión del usuario,
     2026-10; mismo arreglo que las fuentes de los tiempos de tejido) */
  @media (pointer: coarse) {
    .test-anat .anat-enlace { position: relative; }
    .test-anat .anat-enlace::after { content: ''; position: absolute; inset: -6px 0; }
  }
  @media print { .test-anat { display: none; } }
  .test-criterion {
    font-size: 0.78rem;
    color: var(--text3);
    line-height: 1.4;
    margin-bottom: 10px;
  }
  .test-result-btns {
    display: flex;
    gap: 8px;
  }
  .test-result-btn {
    flex: 1;
    padding: 6px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    border: 1px solid var(--border2);
    background: transparent;
    color: var(--text3);
    transition: all 0.2s;
    font-weight: 500;
  }
  .test-result-btn.pos.selected { background: rgba(56,217,169,0.12); border-color: var(--green); color: var(--green); }
  .test-result-btn.neg.selected { background: rgba(255,107,107,0.12); border-color: var(--red); color: var(--red); }
  .test-result-btn.nd.selected { background: rgba(90,110,138,0.2); border-color: var(--text3); color: var(--text2); }
  @media (hover: hover) { .test-result-btn:hover { border-color: var(--text2); color: var(--text2); } }

  /* Small outlined action buttons (AI report card: «Descartar», «Adjuntar
     audio», «Reintentar»…); .btn-text-full/-short swap under 480px. */
  .phase5-copy-btn {
    background: none;
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.75rem;
    color: var(--text2);
    cursor: pointer;
    white-space: nowrap;
    font-family: 'DM Mono', monospace;
  }
  .phase5-copy-btn .btn-text-short,
  .confirm-box-btns .btn-text-short { display: none; }
  @media (max-width: 480px) {
    .phase5-copy-btn .btn-text-full,
    .confirm-box-btns .btn-text-full { display: none; }
    .phase5-copy-btn .btn-text-short,
    .confirm-box-btns .btn-text-short { display: inline; }
  }

  /* Summary / Results */
  .summary-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.2rem;
  }
  .summary-section-title {
    font-family: 'DM Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 3px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 1rem;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    font-size: 0.85rem;
    gap: 1rem;
  }
  .summary-row:last-child { border-bottom: none; }
  .summary-label { color: var(--text3); flex-shrink: 0; min-width: 160px; }
  .summary-value { color: var(--text); text-align: right; font-weight: 400; }

  .prom-badge {
    display: inline-block;
    background: rgba(56,217,169,0.1);
    border: 1px solid rgba(56,217,169,0.2);
    color: var(--accent2);
    border-radius: 6px;
    padding: 3px 10px;
    font-family: 'DM Mono', monospace;
    font-size: 0.72rem;
    margin-top: 4px;
  }

  .exercise-box {
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    padding: 1rem;
    margin-top: 8px;
    font-size: 0.83rem;
    color: var(--text2);
    line-height: 1.6;
  }
  .exercise-box strong { color: var(--text); }

  /* Cabecera de las tarjetas de hipótesis de la fase 5 (_cabeceraHipHTML) */
  .hyp5-card { background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius-lg); padding: 1.2rem; margin-bottom: 1rem; }
  .hyp5-cab { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 1rem; }
  .hyp5-punto { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 0.3rem; }
  .hyp5-titulos { flex: 1; min-width: 0; }
  .hyp5-nombre { font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
  .hyp5-etiqueta { margin-top: 4px; font-family: 'DM Mono', monospace; font-size: 0.7rem; line-height: 1.4; color: var(--text3); }
  /* Etiqueta de puntuación (4b y fase 5, etiquetaHipHTML): el emoji en su
     columna, el texto con sangría colgante y el salto tras el «·». */
  .hyp-etq { display: inline-flex; align-items: baseline; gap: 0.4em; max-width: 100%; }
  .hyp-etq-icono { flex-shrink: 0; }
  .hyp-etq-texto { min-width: 0; }
  .hyp-etq-parte { white-space: nowrap; }

  /* Fase 5: pauta, pronóstico y tests sin hacer, plegados (app.js,
     _pautaPlegableHTML). La pauta deja a la vista su primera frase. */
  .pauta-det > summary { list-style: none; cursor: pointer; }
  .pauta-det > summary::-webkit-details-marker { display: none; }
  .pauta-det[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; padding-bottom: 0.4rem; }
  .pauta-det:not([open]) .pauta-det-primera { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .pauta-det-mas { display: block; margin-top: 6px; color: var(--accent); font-size: 0.78rem; }
  .pauta-det-mas::after { content: ' ▾'; }
  .pauta-det[open] .pauta-det-mas { display: none; }
  .pauta-det-resto {
    background: var(--surface2); border: 1px solid var(--border2); border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 0 1rem 1rem; font-size: 0.83rem; color: var(--text2); line-height: 1.6;
  }
  .pauta-det-menos { background: none; border: none; padding: 6px 0 0; color: var(--accent); font-family: inherit; font-size: 0.78rem; cursor: pointer; }
  @media print { .pauta-det-menos { display: none; } }
  .pronostico-det > summary, .tests-sin-datos > summary { cursor: pointer; }
  .pronostico-det[open] > summary { margin-bottom: 6px; }
  .tests-sin-datos > summary { font-size: 0.75rem; color: var(--text3); padding: 6px 0; }
  /* Pauta partida por situación (_pautaConRamasHTML): título de la rama de este
     caso y las otras plegadas */
  .pauta-rama-tit { font-size: 0.75rem; font-weight: 600; color: var(--text2); margin-bottom: 4px; }
  .pauta-otras { margin-top: 8px; }
  .pauta-otras > summary { cursor: pointer; font-size: 0.75rem; color: var(--text3); padding: 6px 0; }
  .pauta-otra { font-size: 0.8rem; color: var(--text2); line-height: 1.55; padding: 6px 0 8px; border-top: 1px solid var(--border); }

  /* Print button */
  .btn-print {
    background: linear-gradient(135deg, var(--accent2), #2ab89a);
    color: var(--bg);
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(56,217,169,0.25);
  }
  .btn-print:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(56,217,169,0.35); }

  /* Derivation stop screen */
  .stop-screen {
    text-align: center;
    padding: 3rem 2rem;
  }
  .stop-icon { font-size: 4rem; margin-bottom: 1rem; }
  .stop-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.8rem;
    color: var(--danger);
    margin-bottom: 1rem;
  }
  .stop-text { color: var(--text2); line-height: 1.6; max-width: 500px; margin: 0 auto 2rem; }

  /* Psychosocial badge */
  .psico-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
  }
  .psico-low { background: rgba(56,217,169,0.1); border: 1px solid rgba(56,217,169,0.2); color: var(--green); }
  .psico-mid { background: rgba(255,159,67,0.1); border: 1px solid rgba(255,159,67,0.2); color: var(--orange); }
  .psico-high { background: rgba(255,71,87,0.1); border: 1px solid rgba(255,71,87,0.2); color: var(--danger); }

  /* Systemic check items */
  .systemic-q {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .systemic-q-text { flex: 1; font-size: 0.85rem; color: var(--text2); line-height: 1.5; }
  .sq-btns { display: flex; gap: 6px; flex-shrink: 0; }
  .sq-btn {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    border: 1px solid var(--border2);
    background: transparent;
    color: var(--text3);
    transition: all 0.2s;
    font-weight: 500;
    min-height: 36px;
    min-width: 44px;
  }
  .sq-btn.si.selected { background: rgba(255,71,87,0.12); border-color: var(--danger); color: var(--danger); }
  .sq-btn.no.selected { background: rgba(56,217,169,0.08); border-color: var(--green); color: var(--green); }

  /* ── FASE 2 ENRICHED SYSTEMIC SCREENING ─────────────────── */

  /* Sistema tabs */
  .sistema-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
  }
  .sistema-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border2);
    background: var(--surface2);
    color: var(--text3);
    transition: all 0.2s;
    white-space: nowrap;
  }
  .sistema-tab:hover { border-color: var(--text2); color: var(--text2); }
  .sistema-tab.active { background: rgba(79,156,249,0.1); border-color: var(--accent); color: var(--accent); }
  .sistema-tab.has-alert { border-color: var(--danger); color: var(--danger); background: rgba(255,71,87,0.08); }
  .sistema-tab .tab-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
  }

  /* Sistema panel */
  .sistema-panel { display: none; }
  .sistema-panel.active { display: block; animation: fadeUp 0.25s ease; }

  /* Sistema panel header */
  .sistema-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
  }
  .sistema-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
  }
  .sistema-label {
    font-family: 'DM Serif Display', serif;
    font-size: 1.1rem;
    color: var(--text);
  }

  /* Flags section */
  .flags-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 1.2rem;
  }
  @media (max-width: 600px) { .flags-grid { grid-template-columns: 1fr; } }
  /* Solo rojas o solo amarillas: la caja ocupa el ancho completo */
  .flags-grid > .flags-box:only-child { grid-column: 1 / -1; }

  .flags-col-title {
    font-family: 'DM Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .flags-col-title.red { color: var(--red); }
  .flags-col-title.yellow { color: var(--accent3); }

  .flag-item {
    font-size: 0.78rem;
    color: var(--text2);
    line-height: 1.4;
    padding: 5px 8px 5px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
    display: flex;
    align-items: flex-start;
    gap: 6px;
  }
  .flag-item:last-child { border-bottom: none; }
  .flag-dot-red { color: var(--red); flex-shrink: 0; font-size: 0.6rem; margin-top: 4px; }
  .flag-dot-yellow { color: var(--accent3); flex-shrink: 0; font-size: 0.6rem; margin-top: 4px; }
  /* «¿Por qué?» de una bandera (docs/razonamiento-banderas.md): el ⓘ despliega
     debajo «Por qué» y «Cuánto pesa»; «Ampliar →» abre el panel del razonamiento */
  .flag-cuerpo { min-width: 0; flex: 1; }
  .flag-texto { min-width: 0; }
  .razon-bandera { margin: 4px 0 2px; }
  .razon-bandera[hidden] { display: none; }
  .razon-bandera-q { color: var(--text); }
  .razon-bandera-q:not(:first-child) { margin-top: 8px; }
  .flag-fase1 { font-family: 'DM Mono', monospace; font-size: 0.66rem; color: var(--text3); white-space: nowrap; }
  .flag-porque {
    background: none; border: none; cursor: pointer; font: inherit; font-size: 0.85rem; line-height: 1;
    color: var(--accent); padding: 6px 8px; margin: -6px -8px -6px -2px; vertical-align: -1px;
  }
  .flag-porque[aria-expanded="true"] { color: var(--text); }
  @media (hover: hover) { .flag-porque:hover { color: var(--text); } }
  .flag-porque:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }

  .flags-box {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
  }
  .flags-box.red-box { border-color: rgba(255,107,107,0.2); background: rgba(255,107,107,0.04); }
  .flags-box.yellow-box { border-color: rgba(255,212,59,0.15); background: rgba(255,212,59,0.03); }

  /* Screening questions section */
  .screening-section-title {
    font-family: 'DM Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .screening-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }

  /* Screening question with alerta marker */
  .sq2 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: border-color 0.2s;
  }
  .sq2.alerta-high { border-left: 3px solid rgba(255,71,87,0.5); }
  .sq2.answered-si { border-color: rgba(255,71,87,0.4); background: rgba(255,71,87,0.04); }
  .sq2.answered-no { border-color: rgba(56,217,169,0.2); }

  .sq2-badge {
    flex-shrink: 0;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1px solid var(--border2);
    font-size: 0.55rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--text3);
    margin-top: 1px;
    font-family: 'DM Mono', monospace;
  }
  .sq2-badge.alerta { border-color: rgba(255,71,87,0.4); color: var(--red); }

  .sq2-text { flex: 1; font-size: 0.84rem; color: var(--text2); line-height: 1.5; }
  .sq2-btns { display: flex; gap: 5px; flex-shrink: 0; }

  /* Composite screening criterion (e.g. Goodman's 2-of-4 inflammatory-back-
     pain rule) — resulting alert (or missing-edad hint), rendered only for
     systems that declare a criterioCompuesto (see data.js, l_espondilo).
     Edad itself is collected in Fase 1 (#edadPaciente). */
  .criterio-compuesto-hint {
    color: var(--text3);
    font-size: 0.78rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 1rem;
    margin: 0.4rem 0 0.6rem;
  }
  .criterio-compuesto-alert:empty { display: none; }
  .criterio-compuesto-alert .alert { margin: 0 0 0.6rem; }

  /* Referred pain zones */
  .referred-zones {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    margin-top: 0.2rem;
  }
  .referred-zone-item {
    font-size: 0.8rem;
    color: var(--text2);
    line-height: 1.5;
    padding: 5px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
    display: flex;
    gap: 8px;
    align-items: flex-start;
  }
  .referred-zone-item:last-child { border-bottom: none; }
  .referred-zone-label {
    color: var(--accent2);
    font-weight: 500;
    flex-shrink: 0;
    min-width: 100px;
    font-size: 0.78rem;
  }

  /* Impact on rest/exercise collapsible */
  .impact-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 0;
    color: var(--text3);
    font-size: 0.75rem;
    font-family: 'DM Mono', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
    user-select: none;
    transition: color 0.2s;
    margin-top: 0.4rem;
  }
  .impact-toggle:hover { color: var(--text2); }
  .impact-chevron { transition: transform 0.25s; font-style: normal; font-size: 0.7rem; }
  .impact-toggle.open .impact-chevron { transform: rotate(90deg); }
  .impact-body {
    display: none;
    padding: 0.8rem 0 0.2rem;
    animation: fadeUp 0.2s ease;
  }
  .impact-body.open { display: block; }
  .impact-col-title {
    font-size: 0.65rem;
    font-family: 'DM Mono', monospace;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text3);
    margin-bottom: 6px;
    margin-top: 10px;
  }
  .impact-col-title:first-child { margin-top: 0; }
  .impact-item {
    font-size: 0.8rem;
    color: var(--text2);
    line-height: 1.5;
    padding: 4px 0 4px 10px;
    border-left: 2px solid var(--border2);
    margin-bottom: 5px;
  }

  /* Sistema nav pills — merged into main 768px block below */

  /* ── DISABLED BUTTON STATE ───────────────────────────────── */
  .btn:disabled, .btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Shake animation (kept for future use but not applied to disabled buttons) */
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
  }
  .btn-shake { animation: shake 0.35s ease; }

  /* ── OPTION GROUP FULL WIDTH (fila, flex:1 por botón) ─── */
  .option-group-full { display: flex; gap: 6px; }
  .option-group-full .option-btn { flex: 1; text-align: center; }
  /* Escritorio: todos los grupos de 1–3 opciones excluyentes (estados de las
     condiciones especiales, modo de consulta, psico_*, Mecanismo, Cronología…) con
     botones del mismo ancho —el del texto más largo del grupo, mínimo 12rem—,
     alineados a la izquierda; sin estirarse a toda la tarjeta, que con dos botones
     los dejaba demasiado anchos (en móvil mandan las reglas de ≤768 px) */
  @media (min-width: 769px) {
    .option-group-full, .option-group-col { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: fit-content; max-width: 100%; }
    .option-group-full .option-btn, .option-group-col .option-btn { min-width: 12rem; text-align: center; }
  }
  /* ── MOBILE PHASE INDICATOR BAR ─────────────────────────── */
  .mobile-phase-bar {
    display: none;
    position: fixed;
    top: 54px;
    left: 0; right: 0;
    z-index: 150;
    height: 40px;
    width: 100%;
    margin: 0;
    background: var(--surface);
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 0 1rem;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-phase-bar:active { background: var(--surface2); }
  .mobile-phase-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .mobile-phase-label {
    font-size: 0.72rem;
    font-family: 'DM Mono', monospace;
    color: var(--accent);
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }
  /* Pista de que la barra abre las fases: el «≡» sin caja */
  .mobile-phase-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    color: var(--text2);
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
  }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  /* ── BOTTOM SHEET ────────────────────────────────────────── */
  .phase-sheet-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 400;
    background: var(--scrim);
    backdrop-filter: var(--scrim-blur);
    -webkit-backdrop-filter: var(--scrim-blur);
  }
  .phase-sheet-overlay.open { display: block; }
  .phase-sheet {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 401;
    background: var(--surface);
    border-top: 1px solid var(--border2);
    border-radius: 16px 16px 0 0;
    padding: 12px 0 32px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .phase-sheet.open { transform: translateY(0); }
  .phase-sheet-handle {
    width: 36px; height: 4px;
    background: var(--border2);
    border-radius: 2px;
    margin: 0 auto 14px;
    touch-action: none;
  }
  .phase-sheet-title {
    font-family: 'DM Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text3);
    padding: 0 1.2rem 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
    touch-action: none;
  }
  .phase-sheet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 1.2rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
  }
  .phase-sheet-item:last-child { border-bottom: none; }
  .phase-sheet-item:active { background: var(--surface2); }
  .phase-sheet-item.psi-active { background: rgba(79,156,249,0.06); }
  .phase-sheet-item.psi-blocked { opacity: 0.4; cursor: default; }
  .phase-sheet-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem;
    font-family: 'DM Mono', monospace;
    flex-shrink: 0;
    border: 1px solid var(--border2);
    background: var(--surface2);
    color: var(--text3);
  }
  .phase-sheet-item.psi-completed .phase-sheet-icon {
    background: rgba(56,217,169,0.12);
    border-color: var(--green);
    color: var(--green);
  }
  .phase-sheet-item.psi-active .phase-sheet-icon {
    background: rgba(79,156,249,0.15);
    border-color: var(--accent);
    color: var(--accent);
  }
  .phase-sheet-info { flex: 1; }
  .phase-sheet-name {
    font-size: 0.88rem;
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    line-height: 1.3;
  }
  .phase-sheet-item.psi-active .phase-sheet-name { color: var(--accent); }
  .phase-sheet-status {
    font-size: 0.65rem;
    font-family: 'DM Mono', monospace;
    color: var(--text3);
    margin-top: 2px;
    letter-spacing: 0.3px;
  }
  .phase-sheet-item.psi-completed .phase-sheet-status { color: var(--green); }
  .phase-sheet-item.psi-active .phase-sheet-status { color: var(--accent); }

  /* ── ACORDEÓN MÓVIL — Sistema tabs ───────────────────────── */
  .sistema-accordion {
    display: none;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 1rem;
  }
  .sistema-accordion-row {
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    overflow: hidden;
    overflow: clip;   /* recorta igual sin ser contenedor de scroll: deja funcionar el sticky de .razon */
    transition: border-color 0.2s;
  }
  .sistema-accordion-row.has-alert { border-color: rgba(255,71,87,0.4); }
  .sistema-accordion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    font-size: 0.88rem;
    color: var(--text2);
    font-family: 'Outfit', sans-serif;
    transition: background 0.2s;
  }
  .sistema-accordion-header:active { background: var(--hover-tint); }
  .sistema-accordion-row.open .sistema-accordion-header { color: var(--accent); background: rgba(79,156,249,0.06); border-bottom: 1px solid var(--border); }
  .sistema-accordion-row.open.has-alert .sistema-accordion-header { color: var(--danger); background: rgba(255,71,87,0.06); }
  .sistema-accordion-icon { font-size: 1.1rem; flex-shrink: 0; }
  .sistema-accordion-name { flex: 1; font-weight: 500; }
  .sistema-accordion-alert {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--danger);
    flex-shrink: 0;
    display: none;
    box-shadow: 0 0 6px rgba(255,71,87,0.5);
  }
  .sistema-accordion-row.has-alert .sistema-accordion-alert { display: block; }
  .sistema-accordion-chevron {
    font-size: 0.65rem;
    color: var(--text3);
    transition: transform 0.25s;
    flex-shrink: 0;
  }
  .sistema-accordion-row.open .sistema-accordion-chevron { transform: rotate(90deg); }
  .sistema-accordion-body { display: none; }
  .sistema-accordion-row.open .sistema-accordion-body { display: block; }

  /* Irritability table */
  .irritab-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
  .irritab-table th {
    text-align: left;
    padding: 8px 12px;
    color: var(--text3);
    font-family: 'DM Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    font-weight: 400;
  }
  .irritab-table td {
    padding: 8px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    color: var(--text2);
    vertical-align: middle;
  }
  .irritab-table tr:last-child td { border-bottom: none; }
  .irritab-select {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .irritab-btn {
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 0.72rem;
    cursor: pointer;
    border: 1px solid var(--border2);
    background: transparent;
    color: var(--text3);
    transition: all 0.15s;
    font-family: 'Outfit', sans-serif;
    min-height: 32px;
  }
  .irritab-btn.selected { background: rgba(79,156,249,0.1); border-color: var(--accent); color: var(--accent); }
  /* Ayuda de una fila de la matriz (tiempo en calmarse) */
  .irritab-ayuda { font-size: 0.72rem; color: var(--text3); line-height: 1.35; margin-top: 4px; }
  /* Tabla: la columna de botones no se estrecha por la ayuda (una línea por fila) */
  .irritab-table td:last-child { width: 1%; }
  .irritab-table td:last-child .irritab-select { flex-wrap: nowrap; }
  .irritab-table .irritab-btn { white-space: nowrap; }
  .irritab-card .irritab-ayuda { margin: -2px 0 8px; }
  /* Impacto en las actividades, en la tarjeta de severidad (gravedad, decisión 100) */
  .irritab-impacto { margin-top: 14px; }
  .irritab-impacto .irritab-card-label { margin-bottom: 6px; }

  /* Irritabilidad — Cards móvil */
  .irritab-desktop { display: block; }
  .irritab-cards { display: flex; flex-direction: column; gap: 14px; }
  .irritab-mobile { display: none; }
  .irritab-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
  }
  .irritab-card-label {
    font-family: 'DM Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text3);
    margin-bottom: 8px;
  }
  .irritab-card-btns {
    display: flex;
    gap: 6px;
  }
  .irritab-card-btns .irritab-btn {
    flex: 1;
    text-align: center;
    font-size: 0.75rem;
    min-height: 38px;
    padding: 6px 4px;
    white-space: nowrap;
    line-height: 1.2;
  }

  /* ── NRS PAIN SCALE ──────────────────────────────────────── */
  .nrs-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
  .nrs-row { display: flex; gap: 6px; }
  .nrs-btn {
    flex: 1;
    min-height: 48px;
    border-radius: 8px;
    border: 1px solid var(--border2);
    background: var(--surface2);
    color: var(--text2);
    font-family: 'DM Mono', monospace;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @media (hover: hover) { .nrs-btn:hover { border-color: var(--text3); color: var(--text); } }
  /* Color gradient: 0-2 green, 3-4 yellow-green, 5-6 yellow, 7-8 orange, 9-10 red */
  .nrs-btn.nrs-0, .nrs-btn.nrs-1, .nrs-btn.nrs-2 {
    border-color: rgba(56,217,169,0.3);
  }
  .nrs-btn.nrs-3, .nrs-btn.nrs-4 {
    border-color: rgba(180,220,80,0.3);
  }
  .nrs-btn.nrs-5, .nrs-btn.nrs-6 {
    border-color: rgba(255,212,59,0.3);
  }
  .nrs-btn.nrs-7, .nrs-btn.nrs-8 {
    border-color: rgba(255,140,0,0.3);
  }
  .nrs-btn.nrs-9, .nrs-btn.nrs-10 {
    border-color: rgba(255,71,87,0.3);
  }
  /* Selected states */
  .nrs-btn.selected.nrs-0, .nrs-btn.selected.nrs-1, .nrs-btn.selected.nrs-2 {
    background: rgba(56,217,169,0.15); border-color: var(--green); color: var(--green);
  }
  .nrs-btn.selected.nrs-3, .nrs-btn.selected.nrs-4 {
    background: rgba(180,220,80,0.12); border-color: var(--lime); color: var(--lime);
  }
  .nrs-btn.selected.nrs-5, .nrs-btn.selected.nrs-6 {
    background: rgba(255,212,59,0.12); border-color: var(--accent3); color: var(--accent3);
  }
  .nrs-btn.selected.nrs-7, .nrs-btn.selected.nrs-8 {
    background: rgba(255,140,0,0.12); border-color: var(--orange); color: var(--orange);
  }
  .nrs-btn.selected.nrs-9, .nrs-btn.selected.nrs-10 {
    background: rgba(255,71,87,0.12); border-color: var(--danger); color: var(--danger);
  }
  .nrs-ext { display: flex; justify-content: space-between; gap: 12px; font-size: 0.7rem; color: var(--text3); margin: 2px 0 8px; }
  .nrs-ext span:last-child { text-align: right; }
  .nrs-label {
    font-size: 0.78rem;
    color: var(--text3);
    font-family: 'DM Mono', monospace;
    letter-spacing: 0.5px;
    text-align: center;
    min-height: 1.2em;
  }
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

  /* Confirm banner */
  .confirm-banner {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--scrim);
    backdrop-filter: var(--scrim-blur);
    -webkit-backdrop-filter: var(--scrim-blur);
    animation: fadeUp 0.2s ease;
  }
  /* Relevo de otro velo (_veloRelevo, app.js): el velo ya está, solo entra el recuadro */
  .confirm-banner.relevo { animation: none; }
  .confirm-banner.relevo .confirm-box { animation: fadeUp 0.2s ease; }
  .confirm-box {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: var(--radius-lg);
    padding: 1.8rem;
    max-width: 420px;
    width: 90%;
    box-shadow: var(--modal-shadow);
  }
  .confirm-box-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.2rem;
    color: var(--text);
    margin-bottom: 0.6rem;
  }
  .confirm-box-text {
    font-size: 0.83rem;
    color: var(--text2);
    line-height: 1.5;
    margin-bottom: 1.4rem;
  }
  .confirm-box-btns {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
  }
  .confirm-btn-cancel { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; background: transparent; border: 1px solid var(--border); color: var(--text3); border-radius: 8px; padding: 9px 16px; font-family: 'DM Mono', monospace; font-size: 12px; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
  .confirm-btn-cancel:hover { border-color: var(--text2); color: var(--text2); }
  .confirm-btn-ok { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; background: var(--accent); border: none; color: var(--on-accent); border-radius: 8px; padding: 9px 18px; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.2s; }
  .confirm-btn-ok:hover { background: #3d7fd4; }
  /* Botones siempre en una línea: en pantallas estrechas el recuadro gana
     ancho (margen de 16 px) y los botones pierden relleno y la ✕ de cancelar,
     para que quepa la etiqueta más larga («Cambiar región») a 320 px */
  @media (max-width: 480px) {
    .confirm-box { width: calc(100% - 32px); padding: 1.4rem 1.25rem; }
    .confirm-box-btns { gap: 0.5rem; }
    .confirm-btn-cancel { padding: 9px 12px; }
    .confirm-btn-cancel svg { display: none; }
    .confirm-btn-ok { padding: 9px 14px; }
  }

  /* Print styles */
  @media print {
    .app-header, .progress-bar-wrap, .phase-nav, .nav-buttons, .btn-print { display: none !important; }
    .main { margin-top: 0; }
    body { background: white; color: black; }
    .summary-section { border: 1px solid #ccc; }
    .phase-container.active { display: block; }
  }

  /* ── TABLET (≤768px) ─────────────────────────────────── */
  @media (max-width: 768px) {
    /* Aquí .nav-buttons es position: fixed dentro de la fase: un transform en
       la animación de entrada la colocaba respecto a la fase (al final de la
       página, tapando «Plan de tratamiento →» en la 5) hasta que acababa y
       saltaba al pie de la pantalla. Solo fundido, sin transform. */
    .phase-container { animation-name: faseFundido; }
    .app-header { padding: 0 1rem; height: 52px; }
    .logo-main { font-size: 1.2rem; }
    .logo-sub { font-size: 1.2rem; letter-spacing: -0.5px; }
    .phase-indicator { display: none; }
    .progress-bar-wrap { top: 0; z-index: 300; background: transparent; }
    .phase-nav {
      top: 55px; height: 40px; padding: 0 0.5rem;
      -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .phase-nav::-webkit-scrollbar { display: none; }
    .phase-step { padding: 0 10px; font-size: 0.62rem; gap: 5px; flex-shrink: 0; }
    .phase-step-num { width: 16px; height: 16px; font-size: 0.55rem; }
    .phase-nav { display: none; }
    .mobile-phase-bar { display: flex; }
    .main { margin-top: 94px; padding: 1rem 1rem 5rem; }
    .phase-title { font-size: 1.6rem; }
    .phase-subtitle { font-size: 0.82rem; }
    .phase-header { margin-bottom: 1.2rem; }
    .card { padding: 1.1rem; }
    .card-title { font-size: 0.72rem; }
    /* A fixed 50% basis would force every row to 2 columns, splitting the
       4-item (fc/fr/spo2/edad) row across two lines — a min-basis instead
       lets it keep as many items together as fit, only wrapping what
       genuinely doesn't on a narrow phone. */
    .vitals-row { flex-wrap: wrap; gap: 10px 14px; }
    .vitals-row .form-group { flex: 1 1 96px; }
    /* talla/peso/imc must never split across rows — IMC is computed from
       the other two, so seeing all three together is the whole point.
       nowrap + min-width:0 forces an even 3-way split at any viewport
       width instead of leaving it to fit-dependent wrapping (an <input>'s
       default min-width:auto would otherwise refuse to shrink below its
       intrinsic content size and force a wrap on narrow phones). */
    .vitals-row.vitals-row-3 { flex-wrap: nowrap; }
    .vitals-row.vitals-row-3 .form-group { flex: 1 1 0; min-width: 0; }
    .region-name { font-size: 0.82rem; }
    .tree-question { padding: 1.1rem; }
    .tree-question-text { font-size: 0.95rem; }
    .option-btn { font-size: 0.9rem; padding: 8px 12px; }
    .irritab-desktop { display: none; }
    .irritab-mobile { display: flex; flex-direction: column; gap: 14px; }
    .slider-val { font-size: 1.6rem; }
    .hypothesis-header { padding: 1rem 1.1rem; gap: 8px; }
    .hyp-name { font-size: 0.88rem; }
    .hyp-score { font-size: 0.68rem; }
    .hypothesis-body { padding: 0 1.1rem 1.1rem; }
    .test-result-btns { gap: 6px; }
    .test-result-btn { font-size: 0.72rem; padding: 7px 4px; }
    .test-name { font-size: 0.88rem; }
    .stat-badge { font-size: 0.65rem; }
    .summary-section { padding: 1.1rem; }
    .summary-row { flex-direction: column; gap: 2px; }
    .summary-label { min-width: unset; font-size: 0.72rem; }
    .summary-value { text-align: left; font-size: 0.82rem; }
    .alert { font-size: 0.85rem; padding: 0.85rem 1rem; }
    .alert-icon { font-size: 1rem; }
    /* Fase 1 banderas rojas — botones SÍ/NO ancho completo */
    .systemic-q { flex-direction: column; gap: 8px; }
    .sq-btns { align-self: stretch; display: flex; gap: 6px; }
    .sq-btn { flex: 1; min-height: 44px; font-size: 0.88rem; padding: 10px 6px; }
    /* Fase 2 screening — botones SÍ/NO ancho completo */
    .sq2 { flex-direction: column; gap: 8px; }
    .sq2-btns { align-self: stretch; display: flex; gap: 6px; }
    .sq2-btns .sq-btn { flex: 1; min-height: 44px; font-size: 0.88rem; padding: 10px 6px; }
    .sq2 .sq-btns { align-self: stretch; }
    /* Mecanismo, Cronología, Fase 3 — las tres en una fila si cada texto cabe en una
       línea; si no, dos por fila con la tercera a todo el ancho; si tampoco, una por
       fila (filas.js lo mide con data-filas="3,2,1" y pone data-cols) */
    .option-group-col { --filas: 1; display: grid; grid-template-columns: repeat(var(--filas-cols, 3), minmax(0, 1fr)); gap: 6px; }
    .option-group-col .option-btn { width: 100%; min-width: 0; text-align: center; padding: 8px 4px; min-height: 48px; font-size: 0.85rem; white-space: normal; line-height: 1.3; hyphens: manual; }
    .option-group-col[data-cols="2"] .option-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .option-group-col[data-cols="1"] .option-btn { text-align: left; padding: 10px 16px; }
    /* Fase 4b — contexto banner debajo de la barra de fase */
    .hyp-context-banner.visible {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      column-gap: 10px;
      row-gap: 2px;
    }
    .hyp-banner-score { grid-column: 2 / -1; }
    .hyp-context-banner { top: 94px; }
    .sis-context-banner { top: 94px; }
    /* Ocultar score numérico en header móvil — aparece en el banner */
    .hyp-score { display: none; }
    .hyp-meta-movil { display: block; }
    .hyp-meta-esc { display: none; }
    .option-group-full .option-btn { min-height: 44px; font-size: 0.9rem; }
    /* Zonas de dolor referido — una columna en móvil */
    .referred-zone-item { flex-direction: column; gap: 2px; padding: 8px 0; }
    .referred-zone-label { min-width: unset; font-size: 0.78rem; font-weight: 600; color: var(--accent2); }
    /* Flags grid single column */
    .flags-grid { grid-template-columns: 1fr; }
    .referred-zone-label { min-width: 80px; font-size: 0.74rem; }
    /* Fase 2 — acordeón en lugar de tabs */
    .sistema-tabs { display: none; }
    .sistema-accordion { display: flex; }
    /* Ocultar panels sueltos — el acordeón los gestiona */
    #sistemaPanels > .sistema-panel { display: none !important; }
    .prom-badge { font-size: 0.68rem; }
    .sq2-text { font-size: 0.9rem; }
    .flag-item { font-size: 0.85rem; }
    .impact-item { font-size: 0.85rem; }
    .exercise-box, .pauta-det-resto { font-size: 0.85rem; }
    .form-input { font-size: 0.85rem; }
    .form-label { font-size: 0.85rem; }
    /* Nav buttons fijos en la parte inferior */
    .nav-buttons {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 200;
      background: var(--nav-bg-solid);
      backdrop-filter: blur(12px);
      border-top: 1px solid var(--border);
      padding: 0.75rem 1rem;
      margin: 0;
      display: flex;
      gap: 0.75rem;
      justify-content: stretch;
    }
    .nav-buttons .btn { flex: 1; text-align: center; padding: 12px 8px; font-size: 0.85rem; }
    .nav-buttons .btn-secondary { flex: 0 0 110px; white-space: nowrap; }
  }

  /* ── MÓVIL (≤480px) ──────────────────────────────────── */
  @media (max-width: 480px) {
    .app-header { height: 48px; }
    .logo-main { font-size: 1.1rem; }
    .logo-sub { font-size: 1.1rem; }
    .progress-bar-wrap { top: 0; z-index: 300; background: transparent; }
    .phase-nav { top: 51px; height: 36px; }
    .phase-step { padding: 0 8px; font-size: 0.58rem; }
    .mobile-phase-bar { top: 48px; }
    .main { margin-top: 88px; padding: 1rem 1rem 5rem; }
    .phase-title { font-size: 1.35rem; }
    .phase-tag { font-size: 0.58rem; letter-spacing: 2px; }
    .region-name { font-size: 0.82rem; }
    .tree-question { padding: 1rem; }
    .tree-question-text { font-size: 1rem; }
    .option-btn { font-size: 0.95rem; padding: 9px 10px; white-space: normal; line-height: 1.3; }
    .hypothesis-header { gap: 8px; padding: 0.9rem 1rem; }
    .hyp-name { font-size: 0.92rem; }
    .hyp-color-dot { width: 10px; height: 10px; flex-shrink: 0; }
    .hyp-score { font-size: 0.65rem; }
    .test-name { font-size: 0.9rem; }
    .test-result-btn { font-size: 0.68rem; padding: 8px 2px; }
    .summary-section { padding: 0.9rem; }
    .summary-section-title { font-size: 0.58rem; }
    .nav-buttons { padding: 0.6rem 0.75rem; gap: 0.5rem; }
    .nav-buttons .btn { font-size: 0.8rem; padding: 11px 6px; }
    .nav-buttons .btn-secondary { flex: 0 0 100px; font-size: 0.75rem; white-space: nowrap; }
    .card { padding: 0.9rem; border-radius: 12px; }
    .slider-wrap { gap: 0.6rem; }
    .slider-val { font-size: 1.4rem; min-width: 32px; }
    /* Botones SÍ/NO en móvil pequeño */
    .sq-btn { min-height: 46px; font-size: 0.9rem; }
    .sq2-btns .sq-btn { min-height: 46px; font-size: 0.9rem; }
    .sq2-text { font-size: 0.95rem; }
    /* Sticky header ajuste para pantalla pequeña */
    /* Móvil: una sola regla en todas las fases. Primer nivel (cards,
       sistemas del cribado, preguntas del árbol, hipótesis de la 4b,
       secciones de la fase 5) → bandas de borde a borde, sin borde lateral
       ni esquinas. Segundo nivel (preguntas de cribado, tests, caja de
       hipótesis y pauta) → tarjeta con marco y relleno de 12 px. Las alertas
       y los pendientes de modo breve siguen como recuadros. El margen
       negativo es el relleno lateral de .main (1rem). */
    .main .card, .sistema-accordion-row, .tree-question, .hypothesis-card, .summary-section {
      margin-left: -1rem; margin-right: -1rem;
      border-left: none; border-right: none; border-radius: 0;
    }
    .sistema-accordion-body .card { margin: 0; }
    .sq2, .test-item, .hyp5-card, .exercise-box, .plan-escalon, .plan-bloque, .sint-item { padding: 0.75rem; }
    .pauta-det-resto { padding: 0 0.75rem 0.75rem; }
    .hypothesis-body { padding: 0 0.9rem 0.9rem; }
    /* Nombre de la hipótesis en la 4b: hasta dos líneas en vez de cortarlo */
    .hyp-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
    .hyp-context-banner { top: 88px; }
    .sis-context-banner { top: 88px; }
    /* irritab tabla oculta en móvil — usa cards */
  }

  /* ── LANDSCAPE MÓVIL (altura reducida) ───────────────── */
  @media (max-height: 500px) and (max-width: 900px) {
    .app-header { height: 44px; }
    .progress-bar-wrap { top: 44px; }
    .phase-nav { top: 47px; height: 34px; }
    .main { margin-top: 81px; padding-top: 1rem; }
    .phase-title { font-size: 1.2rem; }
    .nav-buttons { padding: 0.5rem 1rem; }
  }

  .divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.2rem 0;
  }

  /* Plan notes fields */
  .plan-note-row {
    padding: 0.9rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  }
  .plan-note-row:last-of-type { border-bottom: none; }
  .plan-note-label {
    font-size: 0.72rem;
    font-family: 'DM Mono', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
  }
  .plan-note-hint {
    font-size: 0.75rem;
    color: var(--text3);
    margin-bottom: 8px;
    line-height: 1.4;
  }
  .plan-note-input {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    outline: none;
    resize: vertical;
    min-height: 60px;
    transition: border-color 0.2s;
    line-height: 1.5;
  }
  .plan-note-input:focus { border-color: var(--accent); }
  .plan-note-input::placeholder { color: var(--text3); font-style: italic; }

  @media print {
    .plan-note-input {
      border: 1px solid #ccc;
      background: white;
      color: black;
      resize: none;
    }
  }

  .tool-suggestion {
    background: rgba(79,156,249,0.06);
    border: 1px solid rgba(79,156,249,0.15);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    font-size: 0.83rem;
    color: var(--text2);
    line-height: 1.5;
    margin-top: 8px;
  }
  .tool-suggestion strong { color: var(--accent); }

  /* ── TRANSLATE BUTTON & TOOLTIP ─────────────────────────── */
  .btn-translate {
    position: relative;
    background: transparent;
    border: none;
    color: var(--text3);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.2s;
    line-height: 1;
  }
  .btn-translate:hover { color: var(--text2); }
  .translate-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--text2);
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    line-height: 1.6;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 200;
  }
  .btn-translate:hover .translate-tooltip { opacity: 1; }

  /* Record button */
  .btn-record {
    background: transparent;
    border: 1px solid var(--border2);
    color: var(--text2);
    padding: 6px 12px;
    border-radius: 6px;
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .btn-record:hover { border-color: var(--red); color: var(--red); }
  .btn-record.recording { border-color: var(--red); color: var(--red); }
  .btn-record.recorded { border-color: var(--accent2); color: var(--accent2); }
  .btn-record.paused { border-color: var(--orange); color: var(--orange); }
  .btn-record.paused .btn-record-dot { animation: none; }
  .btn-pause {
    background: transparent;
    border: 1px solid var(--border2);
    color: var(--text2);
    padding: 6px 9px;
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
  }
  .btn-pause:hover, .btn-pause.paused { border-color: var(--orange); color: var(--orange); }
  .btn-discard {
    background: transparent;
    border: none;
    color: var(--text3);
    padding: 6px 6px;
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s;
  }
  .btn-discard:hover { color: var(--red); }
  .btn-record-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
  }
  .btn-record.recording .btn-record-dot { animation: recordPulse 1s ease-in-out infinite; }
  @keyframes recordPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.7); }
  }
  .translate-banner {
    position: fixed;
    top: 94px;
    left: 0; right: 0;
    z-index: 50;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    padding: 9px 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text2);
    font-family: 'Outfit', sans-serif;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .translate-banner.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .translate-banner-close {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text3);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 4px;
    line-height: 1;
  }
  @media (min-width: 769px) {
    .translate-banner { display: none; }
  }
  @media (max-width: 768px) {
    .translate-tooltip { display: none; }
    body:has(.translate-banner.visible) .main { margin-top: calc(94px + 38px); }
    .btn-record-text { display: none; }
    .btn-record { padding: 6px 8px; }
    .header-right { gap: 0.5rem; }
    .header-right.recording-active .btn-translate { display: none; }
  }
  @media (max-width: 480px) {
    .translate-banner { top: 88px; }
    body:has(.translate-banner.visible) .main { margin-top: calc(88px + 38px); }
  }
  @media (max-width: 480px) {
    .logo { white-space: nowrap; gap: 4px; flex-shrink: 0; }
    .app-header .header-right { min-width: 0; gap: 0.35rem; }
  }
  @media (max-width: 400px) {
    .app-header .modo-badge-text { display: none; }
  }
  @media (max-width: 360px) {
    .logo-sub-word { display: none; }
    .logo-sub-initial { display: inline; }
    .header-right.recording-active .btn-record { padding: 4px 6px; }
  }
  .session-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--text3);padding:6px;flex-shrink:0;transition:color 0.2s;}
  .session-btn.active{color:var(--accent);}
  .session-panel-overlay{display:none;position:fixed;inset:0;z-index:999;align-items:center;justify-content:center;background:var(--scrim);backdrop-filter:var(--scrim-blur);-webkit-backdrop-filter:var(--scrim-blur);}
  .session-panel-overlay.open{display:flex;animation:fadeUp 0.2s ease;}
  /* Relevo del diálogo de confirmación (al cancelar): el velo no se funde, solo entra el panel.
     En móvil el panel ya entra deslizándose y el velo no se anima. */
  @media (min-width: 769px) {
    .session-panel-overlay.open.relevo{animation:none;}
    .session-panel-overlay.open.relevo .session-panel{animation:fadeUp 0.2s ease;}
  }
  .session-panel{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:1.8rem;max-width:420px;width:90%;}
  .session-panel-title{font-family:'DM Mono',monospace;font-size:0.68rem;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;touch-action:none;}
  .session-panel.has-session .session-panel-title{color:var(--accent);}
  .session-panel .field{display:flex;flex-direction:column;gap:4px;}
  /* Exportar / importar: dos botones a partes iguales, sin desbordar a 320 px */
  /* «Reiniciar valoración» (antes en la cabecera): borra los datos clínicos, conserva el nombre */
  .session-reset-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:40px;margin-top:14px;background:none;border:1px solid var(--border2);border-radius:8px;padding:8px;color:var(--text2);font-family:inherit;font-size:0.82rem;cursor:pointer;white-space:nowrap;transition:border-color 0.2s,color 0.2s;}
  .session-reset-btn:hover:not(:disabled){border-color:var(--red);color:var(--red);}
  .session-reset-btn:disabled{opacity:0.45;cursor:default;}
  .session-reset-btn svg{flex-shrink:0;}
  /* «Borrar sesión»: misma forma que «Reiniciar», en rojo (borra también el nombre) */
  .session-borrar-btn{border-color:var(--red);color:var(--red);}
  @media (hover: hover) { .session-borrar-btn:hover:not(:disabled){opacity:0.75;} }
  .session-io{display:flex;gap:8px;margin-top:14px;}
  .session-io-btn{flex:1 1 0;min-width:0;min-height:40px;background:none;border:1px solid var(--border2);border-radius:8px;padding:8px;color:var(--text2);font-family:inherit;font-size:0.82rem;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color 0.2s,color 0.2s;}
  .session-io-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
  .session-io-btn:disabled{opacity:0.45;cursor:default;}
  .session-hojas{display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;}
  .session-hojas svg{flex:none;}
  .session-io-nota{margin-top:8px;font-size:0.72rem;line-height:1.4;color:var(--text3);}
  /* «¿Reiniciar o borrar?»: plegado bajo la nota de «Reiniciar valoración» */
  .session-ayuda{margin-top:6px;font-size:0.72rem;line-height:1.45;color:var(--text3);}
  .session-ayuda summary{cursor:pointer;color:var(--accent);min-height:32px;display:flex;align-items:center;list-style:none;}
  .session-ayuda summary::-webkit-details-marker{display:none;}
  .session-ayuda summary::after{content:'▾';margin-left:6px;}
  .session-ayuda[open] summary::after{content:'▴';}
  .session-ayuda p{margin:0 0 6px;}
  .session-ayuda strong{color:var(--text2);font-weight:600;}
  .session-version{margin-top:14px;padding-top:10px;border-top:1px solid var(--border);font-family:'DM Mono',monospace;font-size:0.68rem;color:var(--text3);display:flex;align-items:center;justify-content:space-between;gap:4px;}
  .session-version-txt{flex:1;min-width:0;line-height:1.5;}
  .session-version-txt .nw{white-space:nowrap;}
  .session-version-btn{flex-shrink:0;margin-left:auto;background:none;border:1px solid var(--accent);border-radius:6px;padding:2px 5px;color:var(--accent);font-family:inherit;font-size:inherit;cursor:pointer;}
  /* Con versión nueva: relleno, como el «Actualizar» del aviso flotante (acción principal) */
  .session-version-btn-nueva{background:var(--accent);border-color:var(--accent);color:var(--bg);}
  @media (max-width:360px){ .session-version{font-size:0.64rem;} }
  .in-hub .theme-btn{display:none;}
  body:not(.in-hub) .btn-translate{display:none;}
  /* Tamaño de letra (alternarLetra, app.js): casi todo está en rem, así que agrandar
     la raíz agranda la app entera; el icono va en px para no cambiar con ella */
  html[data-letra="grande"]{font-size:112.5%;}
  /* Las dos «A» van juntas por la línea base (.letra-aa) y el grupo, centrado en el botón como los
     demás iconos de la cabecera: con align-items:baseline en el botón quedaban arriba del todo */
  .letra-btn{display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-weight:600;line-height:1;}
  .letra-aa{display:inline-flex;align-items:baseline;gap:1px;}
  .letra-a-peq{font-size:11px;}
  .letra-a-gr{font-size:16px;}
  .letra-btn[aria-pressed="true"]{color:var(--accent);}
  @media print { .letra-btn { display: none !important; } }
  .session-panel-handle{display:none;width:36px;height:4px;background:var(--border2);border-radius:2px;margin:0 auto 14px;touch-action:none;}
  @media (max-width: 768px) {
    @keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
    .session-panel-overlay{align-items:flex-end;}
    .session-panel-overlay.open{animation:none;}
    .session-panel-overlay.open .session-panel{animation:slideUp 0.3s cubic-bezier(0.32,0.72,0,1);}
    .session-panel{max-width:100%;width:100%;border-radius:16px 16px 0 0;border:none;border-top:1px solid var(--border2);padding:12px 1.4rem 32px;touch-action:none;}
    /* Con «¿Reiniciar o borrar?» abierto el panel de sesión puede no caber en una
       pantalla baja: se desplaza dentro. El arrastre para cerrar solo escucha los
       72 px de arriba (_setupSessionPanelDrag), así que el resto puede desplazarse */
    #sessionPanel{max-height:90vh;max-height:90dvh;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;}
    #sessionPanel .session-panel-handle{touch-action:none;}
    .session-panel-handle{display:block;}
  }


/* ─── Formulario previo (formulario.js) ─────────────────────── */
.fp-card-text { font-size: 0.82rem; color: var(--text2); line-height: 1.5; margin-bottom: 12px; }
.fp-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fp-details > summary::-webkit-details-marker { display: none; }
.fp-details > summary::after { content: '›'; color: var(--text3); font-size: 1.3rem; line-height: 1; transition: transform 0.2s; order: 3; }
.fp-details[open] > summary::after { transform: rotate(90deg); }
.fp-summary-titulo { flex: 1 1 auto; min-width: 0; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-contador { white-space: nowrap; }
@media (max-width: 480px) { .fp-details > summary .fp-contador { order: 3; flex-basis: 100%; } .fp-details > summary::after { order: 2; } }
.fp-details[open] > summary { margin-bottom: 12px; }
.fp-inline { margin-top: 4px; }
.fp-contador { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--text3); }

.fp-seccion { margin-top: 18px; }
.fp-seccion-titulo { font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 10px; }
.fp-item { margin-bottom: 14px; }
.fp-q { display: block; font-size: 0.86rem; color: var(--text); line-height: 1.45; margin-bottom: 6px; }
.fp-hint { font-size: 0.76rem; color: var(--text3); font-style: italic; line-height: 1.45; margin-bottom: 6px; }
.fp-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-opts .option-btn, .fp-escala .option-btn, .fp-fila-opts .option-btn { width: auto; flex: 0 0 auto; padding: 8px 12px; font-size: 0.8rem; min-height: 40px; }
.fp-opts .option-btn { max-width: 100%; white-space: normal; text-align: left; line-height: 1.35; }
.fp-escala { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.fp-escala .option-btn { padding: 8px 0; justify-content: center; min-width: 0; }
.fp-escala-ext { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text3); margin: 4px 0 6px; }
.fp-escala-ext-top { gap: 12px; margin: 2px 0 8px; }
.fp-escala-ext-top span:last-child { text-align: right; }
/* Escalas de severidad (estiloSeveridad: true) — mismo lenguaje visual que
   la escala NRS de fase 3 (.nrs-btn), en clases propias para no acoplar el
   formulario previo a esa escala fija de fase 3: la banda de color (sev-b0
   verde … sev-b4 rojo) la calcula renderEscalaSeveridad() a partir de
   min/max del ítem, no de una tabla de 11 valores. */
.fp-escala-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.fp-escala-row { display: flex; gap: 6px; }
.fp-escala-btn {
  flex: 1;
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text2);
  font-family: 'DM Mono', monospace;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) { .fp-escala-btn:hover { border-color: var(--text3); color: var(--text); } }
.fp-escala-btn.sev-b0 { border-color: rgba(56,217,169,0.3); }
.fp-escala-btn.sev-b1 { border-color: rgba(180,220,80,0.3); }
.fp-escala-btn.sev-b2 { border-color: rgba(255,212,59,0.3); }
.fp-escala-btn.sev-b3 { border-color: rgba(255,140,0,0.3); }
.fp-escala-btn.sev-b4 { border-color: rgba(255,71,87,0.3); }
.fp-escala-btn.selected.sev-b0 { background: rgba(56,217,169,0.15); border-color: var(--green); color: var(--green); }
.fp-escala-btn.selected.sev-b1 { background: rgba(180,220,80,0.12); border-color: var(--lime); color: var(--lime); }
.fp-escala-btn.selected.sev-b2 { background: rgba(255,212,59,0.12); border-color: var(--accent3); color: var(--accent3); }
.fp-escala-btn.selected.sev-b3 { background: rgba(255,140,0,0.12); border-color: var(--orange); color: var(--orange); }
.fp-escala-btn.selected.sev-b4 { background: rgba(255,71,87,0.12); border-color: var(--danger); color: var(--danger); }
.fp-matriz { display: flex; flex-direction: column; gap: 6px; }
.fp-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--border); }
.fp-fila-txt { flex: 1 1 220px; font-size: 0.82rem; color: var(--text2); }
.fp-fila-opts { display: flex; gap: 4px; }
.fp-text { width: 100%; resize: vertical; min-height: 44px; }
.fp-pistas { background: var(--surface2); border: 1px dashed var(--border2); border-radius: var(--radius); padding: 8px 12px; margin: 0 0 12px; }
.fp-pistas-title { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); margin-bottom: 4px; }
.fp-pista { font-size: 0.78rem; line-height: 1.5; color: var(--text2); }
.fp-pista-a { color: var(--text); font-weight: 500; }
.fp-pista-cita { font-style: italic; font-weight: 400; }
/* Instrucción para el fisio, no texto del papel: en azul para que no se confunda
   con los .fp-hint grises en cursiva (texto para el paciente). */
.fp-literal-nota { font-size: 0.74rem; line-height: 1.4; color: var(--accent); margin: 8px 0 4px; }
@media (max-width: 768px) {
  .fp-escala .option-btn { font-size: 0.75rem; }
}
/* Pantalla estrecha: cada fila de opciones se estira hasta el borde, así un botón
   descolgado en la última fila ocupa todo el ancho y no quedan huecos (mismo
   criterio que las opciones de los cuestionarios) */
@media (max-width: 520px) {
  .fp-opts .option-btn, .sint-zonas .option-btn { flex: 1 1 auto; text-align: center; justify-content: center; }
}

/* ─── Urgencias de la región (fase 2) ───────────────────────── */
.urgencia-box { border: 2px solid var(--red); border-radius: var(--radius); background: rgba(255,71,87,0.08); padding: 10px 14px; margin-bottom: 1rem; }
.urgencia-box summary { cursor: pointer; font-weight: 600; color: var(--red); font-size: 0.88rem; line-height: 1.4; }
.urgencia-box p { font-size: 0.8rem; color: var(--text2); line-height: 1.55; margin: 8px 0 0; }
.urgencia-alert { margin-bottom: 0.6rem; }
.sq2-urg-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 0.62rem; font-family: 'DM Mono', monospace; color: var(--red); border: 1px solid var(--red); vertical-align: middle; }
.sq2-urg-msg { display: none; margin-top: 6px; font-size: 0.78rem; font-weight: 600; color: var(--red); }
.answered-si .sq2-urg-msg { display: block; }
.sq2-deriv-msg { display: none; margin-top: 6px; font-size: 0.78rem; font-weight: 600; color: var(--orange); }
.answered-si .sq2-deriv-msg { display: block; }

/* ─── Modo breve (consulta de aseguradora, 10 min) ──────────── */
/* body.modo-breve la pone selectModo() (app.js). Pliega lo opcional; nunca
   oculta banderas rojas, urgencias ni el árbol. Ver docs/modo-breve.md. */
.modo-badge, .breve-only, .breve-only-inline, .embudo { display: none; }
.modo-breve .modo-badge { display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; font-family: 'DM Mono', monospace; font-size: 0.65rem; line-height: 16px; letter-spacing: 1px; color: var(--orange); border: 1px solid var(--orange); border-radius: 6px; padding: 6px 14px; }
@media (max-width: 768px) { .modo-breve .modo-badge { padding: 5px 10px; } }
/* Móvil: el chip «Breve» va al principio de la barra de fase, no en la cabecera */
.modo-breve .modo-badge.modo-badge-fase { flex-shrink: 0; padding: 2px 8px; font-size: 0.6rem; line-height: 14px; letter-spacing: 0.8px; }
@media (max-width: 768px) { .modo-breve .app-header .modo-badge { display: none; } }
.modo-breve .breve-only { display: block; }
.modo-breve .breve-only-inline { display: inline-block; }
.modo-breve:not(.breve-ver-todo) .breve-opcional { display: none !important; }
.modo-breve .card-title .breve-opcional + .breve-only-inline { display: none; }
.modo-breve:not(.breve-ver-todo) .card-title .breve-only-inline { display: inline; }
.breve-toggle { background: transparent; border: 1px dashed var(--border2); color: var(--text3); border-radius: var(--radius); padding: 8px 12px; font-family: 'Outfit', sans-serif; font-size: 0.78rem; cursor: pointer; width: 100%; margin: 4px 0 1rem; }
.breve-toggle-menos, .breve-ver-todo .breve-toggle-mas { display: none; }
.breve-ver-todo .breve-toggle-menos { display: inline; }
#irritabDirecta { margin-bottom: 8px; }
#irritabDirecta .option-btn { white-space: nowrap; padding-left: 4px; padding-right: 4px; }
/* Una nota justo debajo de un grupo de botones no se pega a ellos («Con
   «Grabadora» grabas…»; antes solo #modoConsulta, que ya no la tiene debajo) */
.option-group + .plan-note-hint { margin-top: 10px; }

/* Fase 4: «Resultados sin confirmar» solo cuando el árbol está completo */
#btnGoConfirm:disabled ~ #btnSinConfirmar { opacity: 0.4; pointer-events: none; }
.btn-sc-short, .btn-hip-short { display: none; }
@media (max-width: 768px) {
  .modo-breve .nav-buttons #btnSinConfirmar { flex: 1; }
  .btn-sc-full { display: none; }
  .btn-sc-short { display: inline; }
  /* Con tres botones (solo en breve), «Continuar → Hipótesis» ocupaba dos
     líneas: se acorta como «Sin tests →», con la flecha al final. */
  .modo-breve .btn-hip-full { display: none; }
  .modo-breve .btn-hip-short { display: inline; }
}

/* Fase 2: embudo por sistema */
.modo-breve .embudo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 1px solid var(--orange); border-radius: var(--radius); background: rgba(255,159,67,0.06); padding: 0.8rem 1rem; margin: 0.8rem 0; }
.embudo-q { font-size: 0.85rem; color: var(--text); font-weight: 500; flex: 1 1 220px; }
/* Móvil: botones SÍ/NO a todo el ancho, como las preguntas (.sq2 .sq-btns) */
@media (max-width: 768px) { .modo-breve .embudo .sq-btns { flex: 1 1 100%; } }
.embudo-nota { font-size: 0.72rem; color: var(--text3); display: block; font-weight: 400; margin-top: 2px; }
/* «Mostrar campos opcionales» (breve-ver-todo) enseña también las preguntas
   plegadas: así se completan los pendientes sin salir del modo breve. */
.modo-breve:not(.breve-ver-todo) .sis-body:not(.embudo-si) .sq2:not(.sq2-urg),
.modo-breve:not(.breve-ver-todo) .sis-body:not(.embudo-si) .sis-extra,
.modo-breve:not(.breve-ver-todo) .sis-body:not(.embudo-si):not(.tiene-urg) .screening-section-title { display: none; }
.embudo-estado { display: none; }
.modo-breve .sistema-tab.embudo-no .embudo-estado,
.modo-breve .sistema-accordion-row.embudo-no .embudo-estado { display: inline; color: var(--accent2); margin-left: 4px; }

/* Fase 4b: en breve, los tests sin LR aplicable van plegados */
.breve-hallazgos { margin-top: 0.6rem; border-top: 1px dashed var(--border2); padding-top: 0.6rem; }
.breve-hallazgos summary { cursor: pointer; font-size: 0.78rem; color: var(--text3); }

/* Fase 1 y 5: pendientes de la valoración breve */
.breve-pendientes { border: 1px solid var(--orange); border-radius: var(--radius); background: rgba(255,159,67,0.06); padding: 0.9rem 1.1rem; margin-bottom: 1rem; font-size: 0.82rem; color: var(--text2); line-height: 1.55; }
.breve-pendientes-title { color: var(--orange); font-weight: 600; margin-bottom: 4px; }
.breve-pendientes ul { margin: 4px 0 0 1.1rem; padding: 0; }
.breve-pendientes .btn { margin-top: 10px; font-size: 0.8rem; padding: 8px 14px; }
.estadio-cronologia { display: flex; flex-direction: column; gap: 4px; }
.estadio-valor { font-size: 0.92rem; color: var(--text); }
.estadio-editar { align-self: flex-start; margin-top: 6px; background: none; border: none; padding: 0; color: var(--accent); font: inherit; font-size: 0.82rem; cursor: pointer; text-decoration: underline; }
#cardCronologia { scroll-margin-top: 110px; }
.flash-destacar { animation: flashDestacar 1.6s ease; }
@keyframes flashDestacar { 0%, 60% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: 0 0 0 2px transparent; } }
.estadio-fuente { font-family: 'DM Mono', monospace; font-size: 0.68rem; color: var(--text3); letter-spacing: 0.5px; }

/* ─── Razonamiento del cribado (fase 2) ──────────────────────
   Por qué se hace cada pregunta y cuánto pesa un SÍ (docs/razonamiento-cribado.md).
   Nivel 1: <details class="razon"> bajo la pregunta. Barra fina en --accent y
   texto en --text2; nunca el borde discontinuo (reservado al «📝 Refiere el paciente»).
   Nivel 2: #razonPanel — panel lateral sin velo en escritorio (se sigue
   contestando SÍ/NO con él abierto), bottom sheet con --scrim en móvil. */
.razon { margin-top: 6px; }
.razon > summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-size: 0.72rem; color: var(--accent); user-select: none;
  padding: 2px 0;
}
.razon > summary::-webkit-details-marker { display: none; }
.razon > summary:hover { text-decoration: underline; }
.razon-cuerpo {
  margin-top: 4px; padding: 4px 0 4px 10px;
  border-left: 2px solid var(--accent);
  font-size: 0.78rem; line-height: 1.5; color: var(--text2);
}
.razon-cuerpo p { margin: 0 0 4px; }
.razon-etq {
  font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text3); margin-right: 4px;
}
.razon-pie { font-size: 0.7rem; color: var(--text3); }
/* Desplegado (usuario, 2026-11; razon-plegable.js): la línea se queda fija bajo las
   barras de arriba (--razon-top, medido) hasta que acaba el <details>, con el fondo
   de su contenedor (--razon-fondo) y franjas laterales del mismo color, para que
   replegar esté siempre a mano; al final, «Replegar ▴». */
.razon[open] > summary {
  display: block; position: sticky; top: var(--razon-top, 0px); z-index: 4;
  background: var(--razon-fondo, var(--surface));
  box-shadow: -12px 0 0 var(--razon-fondo, var(--surface)), 12px 0 0 var(--razon-fondo, var(--surface));
  padding: 6px 0; min-height: 32px; box-sizing: border-box;
}
.razon[open] > summary::after { content: '▴'; margin-left: 4px; }
/* Pegada bajo las barras (.pegada, razon-plegable.js): una tapa por arriba, bajo las
   barras, para que no se vea el texto de detrás por la rendija de 1–3 px que dejan los
   redondeos al hacer scroll en móvil (usuario, 2026-11). Solo pegada: suelta, taparía
   el final de la pregunta de encima */
.razon[open].pegada > summary::before {
  content: ''; position: absolute; left: -12px; right: -12px; bottom: 100%; height: 24px;
  background: var(--razon-fondo, var(--surface)); pointer-events: none;
}
.razon-replegar {
  display: block; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 0.72rem; color: var(--accent);
  padding: 6px 0; min-height: 32px; margin: 2px 0 0;
}
@media (hover: hover) { .razon-replegar:hover { text-decoration: underline; } }
@media (pointer: coarse) { .razon[open] > summary, .razon-replegar { min-height: 44px; display: flex; align-items: center; } }
@media print {
  .razon-replegar { display: none; }
  .razon[open] > summary { position: static; box-shadow: none; }
  .razon[open].pegada > summary::before { display: none; }
}
/* Fase 4: el «¿Por qué esta pregunta?» va pegado a la pregunta del paso y
   se lleva el margen que la pregunta dejaba antes de las opciones. */
.tree-question-text:has(+ .razon) { margin-bottom: 0; }
.tree-question > .razon { margin: 4px 0 1rem; }
.razon-ampliar {
  background: none; border: none; padding: 0 0 0 6px; cursor: pointer;
  font: inherit; font-size: 0.72rem; color: var(--accent);
}
.razon-ampliar:hover { text-decoration: underline; }

.razon-scrim { display: none; }
/* Ancho en escritorio: 380 px como mínimo y, en pantallas anchas, todo el hueco
   que deja la columna de las fases (780 px + márgenes), hasta 560 px — más
   ancho alarga las líneas (~75 caracteres) y se lee peor. */
:root { --razon-ancho: clamp(380px, calc(100vw - 780px - 4rem), 560px); }
.razon-panel {
  position: fixed; z-index: 250;
  top: 64px; right: 0; bottom: 0; width: var(--razon-ancho); max-width: 100vw;
  background: var(--surface); border-left: 1px solid var(--border2);
  box-shadow: var(--modal-shadow);
  display: flex; flex-direction: column;
  transform: translateX(105%); visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.32,0.72,0,1), visibility 0s linear 0.3s;
}
.razon-panel.open {
  transform: translateX(0); visibility: visible;
  transition: transform 0.3s cubic-bezier(0.32,0.72,0,1), visibility 0s;
}
.razon-panel:focus { outline: none; }
.razon-handle { display: none; }
.razon-head {
  position: relative; padding: 1rem 2.6rem 0.8rem 1.2rem;
  border-bottom: 1px solid var(--border);
}
.razon-kicker {
  font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text3); margin-bottom: 6px;
}
.razon-pregunta { font-size: 0.86rem; line-height: 1.45; color: var(--text); }
/* Sin borde, como las demás «×» (aviso de versión, banner de traducción). */
.razon-cerrar {
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; top: 0.7rem; right: 0.8rem;
  width: 32px; height: 32px;
  background: none; border: none; color: var(--text3);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.razon-cerrar:hover { color: var(--accent); }
.razon-contenido {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 0.9rem 1.2rem 2rem; font-size: 0.84rem; line-height: 1.55; color: var(--text2);
}
.razon-seccion { border-left: 2px solid var(--accent); padding-left: 10px; margin-bottom: 1rem; }
.razon-seccion p { margin: 4px 0 8px; }
.razon-fuentes { border-left-color: var(--border2); }
.razon-fuentes ul { margin: 4px 0 0; padding-left: 1.1rem; font-size: 0.76rem; }
.razon-fuentes li { margin-bottom: 4px; }

/* Escritorio: el contenido se aparta para que la pregunta no quede debajo. */
@media (min-width: 769px) {
  body.razon-abierto .main { padding-right: calc(var(--razon-ancho) + 1rem); }
}

/* Móvil: bottom sheet (~85 % de alto) con velo. */
@media (max-width: 768px) {
  .razon-scrim {
    position: fixed; inset: 0; z-index: 400;
    background: var(--scrim);
    backdrop-filter: var(--scrim-blur); -webkit-backdrop-filter: var(--scrim-blur);
  }
  .razon-scrim.open { display: block; }
  .razon-panel {
    z-index: 401; top: auto; left: 0; right: 0; width: auto; height: 85vh;
    border-left: none; border-top: 1px solid var(--border2);
    border-radius: 16px 16px 0 0;
    transform: translateY(105%);
  }
  .razon-panel.open { transform: translateY(0); }
  .razon-handle {
    display: block; width: 36px; height: 4px; flex-shrink: 0;
    background: var(--border2); border-radius: 2px; margin: 10px auto 0;
  }
  /* Sin ✕ en móvil, como los demás sheets: se cierra con el asa (deslizar),
     el velo, Atrás o Escape. En escritorio no hay velo ni asa y la ✕ se queda. */
  .razon-head { padding: 0.6rem 1.2rem 0.8rem; }
  .razon-cerrar { display: none; }
  .razon > summary { font-size: 0.8rem; padding: 6px 0; }
  .razon-cuerpo { font-size: 0.85rem; }
  /* Área de toque con ::after, no con padding vertical, que agrandaba la línea de
     la fuente (mismo arreglo que las citas) */
  .razon-ampliar { font-size: 0.8rem; position: relative; }
  .razon-ampliar::after { content: ''; position: absolute; inset: -6px 0; }
}
@media print { .razon, .razon-panel, .razon-scrim { display: none !important; } }
/* Fisiología paso a paso (nivel 2): cadena numerada con conectores; la metáfora
   va aparte, marcada con 💡, para que nadie la tome por el mecanismo. */
.razon-pasos { list-style: none; counter-reset: paso; margin: 6px 0 4px; padding: 0; }
.razon-pasos li {
  counter-increment: paso; position: relative;
  padding: 0 0 12px 30px; margin: 0;
}
.razon-pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: 0;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--accent); color: var(--accent);
  font-family: 'DM Mono', monospace; font-size: 0.65rem;
  display: flex; align-items: center; justify-content: center;
}
.razon-pasos li:not(:last-child)::after {
  content: ''; position: absolute; left: 10px; top: 22px; bottom: 2px;
  border-left: 1px solid var(--border2);
}
.razon-fisio-nota { font-size: 0.76rem; color: var(--text3); font-style: italic; }
.razon-metafora {
  margin: 4px 0 0; padding: 8px 10px; border-radius: 8px;
  background: var(--surface2); color: var(--text2); font-size: 0.8rem;
}
.razon-enlace { color: var(--accent); white-space: nowrap; text-decoration: none; }
.razon-enlace:hover { text-decoration: underline; }

/* Ampliar con IA (ampliar-ia.js): «✨ IA ↗ ▾» al final de cada párrafo del
   razonamiento y barra flotante bajo el texto seleccionado; la ▾ abre el menú
   para elegir Perplexity o Google (modo IA), con la ventaja de cada uno.
   Fuera del hub solamente. */
.ia-parrafo { white-space: nowrap; font-size: 0.7rem; }
.ia-parrafo-ir { color: var(--accent); text-decoration: none; padding-left: 2px; }
.ia-parrafo-ir:hover { text-decoration: underline; }
.ia-elegir {
  background: none; border: none; cursor: pointer; font: inherit;
  color: var(--text3); padding: 0 4px; line-height: 1;
}
.ia-elegir:hover { color: var(--accent); }
.razon-ia-pie { margin-top: 2px; }
.ia-barra {
  position: fixed; z-index: 600; display: flex; align-items: stretch;
  background: var(--surface2); border: 1px solid var(--accent); border-radius: 999px;
  box-shadow: var(--modal-shadow); user-select: none; -webkit-user-select: none;
  font-size: 0.8rem; overflow: hidden;
}
.ia-barra[hidden], .ia-menu[hidden] { display: none; }
.ia-barra-ir { color: var(--accent); text-decoration: none; padding: 8px 6px 8px 14px; white-space: nowrap; }
.ia-barra .ia-elegir { padding: 0 12px 0 8px; border-left: 1px solid var(--border2); font-size: 0.8rem; }
.ia-menu {
  position: fixed; z-index: 601; width: min(320px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border2); border-radius: 12px;
  box-shadow: var(--modal-shadow); padding: 8px;
}
.ia-menu-tit {
  font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text3); padding: 4px 8px 6px;
}
.ia-menu-op {
  display: block; padding: 8px; border-radius: 8px; text-decoration: none;
  border: 1px solid transparent; color: var(--text2);
}
.ia-menu-op:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ia-menu-op.actual { border-color: var(--accent); background: var(--hover-tint); }
.ia-menu-nombre { display: flex; justify-content: space-between; font-size: 0.86rem; color: var(--text); font-weight: 500; }
.ia-menu-check { color: var(--accent); visibility: hidden; }
.ia-menu-op.actual .ia-menu-check { visibility: visible; }
.ia-menu-desc { display: block; font-size: 0.76rem; line-height: 1.4; margin-top: 2px; }
.ia-menu-nota { font-size: 0.7rem; line-height: 1.4; color: var(--text3); padding: 6px 8px 2px; }
@media (hover: hover) { .ia-menu-op:hover { border-color: var(--border2); } }
@media (max-width: 768px) {
  .ia-parrafo { font-size: 0.8rem; }
  /* Área de toque con ::after: el padding vertical del botón ▾ agrandaba la última
     línea del párrafo */
  .ia-parrafo-ir, .ia-elegir { position: relative; }
  .ia-parrafo-ir::after, .ia-elegir::after { content: ''; position: absolute; inset: -4px 0; }
}
.in-hub .ia-parrafo, .in-hub .razon-ia-pie { display: none; }
@media print { .ia-parrafo, .razon-ia-pie, .ia-barra, .ia-menu { display: none !important; } }

/* ── Informe narrativo con IA (informe-ia.js) ──────────────────────────────
   Solo standalone: en el hub el módulo ni se carga; la regla de abajo es la
   red de seguridad por si el contenedor llegara a tener algo. */
.in-hub #informeIA { display: none; }
#informeIA { margin-top: 1.5rem; }
.ia-titulo { display: flex; align-items: center; gap: 8px; }
.ia-intro { font-size: 0.85rem; color: var(--text2); line-height: 1.5; margin-bottom: 1rem; }
.ia-estado { font-size: 0.85rem; color: var(--text2); display: flex; align-items: center; gap: 10px; margin-bottom: 0.8rem; }
.ia-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; margin-bottom: 0.8rem; }
.ia-acciones:last-child { margin-bottom: 0; }
.ia-btn-descartar { color: var(--text3); }
.ia-clave { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ia-clave .form-input { flex: 1 1 200px; min-width: 0; padding: 7px 12px; font-size: 0.85rem; }
.ia-clave-msg { margin-top: 6px; font-size: 0.8rem; color: var(--red); }

.ia-generador { margin-top: 0.5rem; }
.ia-generador > summary { display: none; }
.ia-generador.con-resultado {
  border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem;
}
.ia-generador.con-resultado > summary {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none;
  font-size: 0.85rem; color: var(--text2);
}
.ia-generador.con-resultado > summary::-webkit-details-marker { display: none; }
.ia-generador.con-resultado > summary::after { content: '›'; color: var(--text3); font-size: 1.2rem; transition: transform 0.2s; }
.ia-generador.con-resultado[open] > summary { margin-bottom: 1rem; }
.ia-generador.con-resultado[open] > summary::after { transform: rotate(90deg); }

.ia-audio-vacio, .ia-audio-info { font-size: 0.85rem; color: var(--text); }
.ia-opcional, .ia-recuperado { color: var(--text3); }
.ia-reproductor { width: 100%; max-width: 420px; margin-top: 8px; display: block; }
.ia-grabando { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--red); }
.ia-grabando.pausado { color: var(--text2); }
.ia-punto { width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: recordPulse 1.2s ease-in-out infinite; }
.ia-grabando.pausado .ia-punto { animation: none; }
.ia-crono { font-family: 'DM Mono', monospace; color: var(--text); }
.ia-consent {
  display: flex; gap: 10px; align-items: flex-start; margin: 0.8rem 0;
  font-size: 0.85rem; color: var(--text); line-height: 1.45; cursor: pointer;
}
.ia-consent input { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.ia-privacidad { margin-top: 0.8rem; font-size: 0.8rem; }
.ia-turnstile:not(:empty) { margin-bottom: 0.8rem; }
.ia-btn-generar:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.ia-meta { font-size: 0.75rem; color: var(--text3); font-family: 'DM Mono', monospace; margin-bottom: 0.8rem; }
.ia-informe {
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.2rem; font-size: 0.88rem; line-height: 1.6; color: var(--text);
  overflow-wrap: anywhere;
}
.ia-informe h3 { font-family: 'DM Mono', monospace; font-size: 0.78rem; letter-spacing: 1px; color: var(--accent); margin: 1.2rem 0 0.5rem; font-weight: 500; }
.ia-informe h3:first-child { margin-top: 0; }
.ia-informe h4 { font-size: 0.9rem; color: var(--text); margin: 0.9rem 0 0.35rem; font-weight: 600; }
.ia-informe h5, .ia-informe h6 { font-size: 0.85rem; color: var(--text2); margin: 0.7rem 0 0.3rem; font-weight: 600; }
.ia-informe p { margin: 0 0 0.6rem; }
/* «✨ Detallar con IA» de la fase 6 (plan-ia.js): lo que propone la IA sin
   fuente va aparte, con borde y etiqueta (decisión 8 de docs/plan-tratamiento.md) */
#planIA { margin-top: 1rem; }
.pia-que { font-size: 0.85rem; color: var(--text2); line-height: 1.5; margin-bottom: 0.6rem; }
.pia-que-linea + .pia-que-linea { margin-top: 4px; }
.pia-aviso-t { color: var(--alert-warning-text); }
.pia-plan ul { margin: 0 0 0.6rem; padding-left: 1.1rem; }
.pia-plan li { margin: 0 0 0.3rem; }
.pia-sug { background: var(--orange-bg); border-left: 3px solid var(--orange); border-radius: 4px; padding: 2px 6px; }
.pia-plan li.pia-sug { margin-left: -6px; list-style-position: inside; }
.pia-sug-et { display: inline-block; font-family: 'DM Mono', monospace; font-size: 0.66rem; letter-spacing: 0.3px; color: var(--alert-warning-text); border: 1px solid var(--orange); border-radius: 4px; padding: 0 4px; white-space: nowrap; vertical-align: 1px; }
.pia-leyenda { font-size: 0.78rem; color: var(--text2); padding: 0.6rem 1.2rem 0; line-height: 1.5; }
.pia-compartir-nota { margin-top: 0.4rem; }
.ia-tabla { overflow-x: auto; margin: 0.4rem 0 0.8rem; }
.ia-tabla table { border-collapse: collapse; font-size: 0.8rem; min-width: 100%; }
.ia-tabla th, .ia-tabla td { border: 1px solid var(--border2); padding: 5px 8px; text-align: left; }
.ia-tabla th { color: var(--text2); font-weight: 500; }
.ia-vivo { margin-top: 0.6rem; font-size: 0.82rem; color: var(--text2); }
.ia-vivo > summary { cursor: pointer; }
.ia-vivo[open] > summary { margin-bottom: 0.6rem; }
.ia-progreso { font-variant-numeric: tabular-nums; }
.ia-nota-pantalla { font-size: 0.75rem; line-height: 1.4; color: var(--text3); margin-top: 0.6rem; }
/* Revisión automática del informe (lib/revision-informe.js) */
.ia-revision { border: 1px solid var(--border); border-left: 3px solid var(--orange); border-radius: var(--radius); padding: 0.6rem 0.9rem; margin-bottom: 0.8rem; font-size: 0.82rem; color: var(--text2); background: var(--surface2); }
.ia-revision-alta { border-left-color: var(--red); }
.ia-comprobar { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 0.6rem 0.9rem; margin-bottom: 0.8rem; font-size: 0.82rem; color: var(--text2); background: var(--surface2); }
.ia-comprobar-titulo { font-weight: 600; color: var(--text); }
.ia-comprobar ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.ia-comprobar li { margin-bottom: 0.35rem; line-height: 1.4; }
.ia-revision-ok { border-left-color: var(--green); color: var(--text3); }
.ia-revision > summary { cursor: pointer; font-weight: 600; color: var(--text); }
.ia-revision ul { margin: 0.5rem 0 0.3rem; padding-left: 1.1rem; }
.ia-revision li { margin-bottom: 0.45rem; line-height: 1.4; }
.ia-revision li.ia-rev-alto { color: var(--red); }
.ia-rev-cita { display: block; color: var(--text3); font-style: italic; margin-top: 0.15rem; overflow-wrap: anywhere; }
.ia-rev-nota { font-size: 0.72rem; color: var(--text3); }
/* Marcas «Revisado» (iaMarcarRevisado, informe-ia.js): la casilla a la
   izquierda; un punto marcado se atenúa con ✓, nunca se oculta. Las cajas
   pasan a verde cuando todo está marcado. */
.ia-revision ul, .ia-comprobar ul { list-style: none; padding-left: 0; }
.ia-rev-item { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.ia-rev-check { flex-shrink: 0; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--green); cursor: pointer; }
.ia-rev-hecho > .ia-rev-item > span { opacity: 0.55; }
.ia-revision li.ia-rev-alto.ia-rev-hecho { color: var(--text2); }
.ia-revision-hecha { border-left-color: var(--green); }
.ia-comprobar-cuenta { font-weight: 400; color: var(--text3); font-family: 'DM Mono', monospace; font-size: 0.72rem; white-space: nowrap; }
.ia-comprobar-hecha { border-left-color: var(--green); }
.ia-comprobar-hecha .ia-comprobar-cuenta { color: var(--green); }

/* Tipo de informe (narrativo / ficha breve) */
.ia-plantilla { margin-bottom: 1rem; }
.ia-plantilla-label { font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); margin-bottom: 6px; }
.ia-plantilla-palabras { font-size: 0.72rem; color: var(--text3); margin-left: 4px; }
.ia-plantilla .option-btn.selected .ia-plantilla-palabras { color: inherit; opacity: 0.75; }
.ia-op-corto { display: none; }
/* Selectores «Tipo de informe» y «Qué hay en el audio» en pantalla estrecha:
   dos columnas iguales, como un selector de dos opciones, con la etiqueta en
   dos líneas (nombre + detalle), para que quepan en una fila a 320 px. */
@media (max-width: 480px) {
  .ia-plantilla-opciones { display: grid; grid-template-columns: 1fr 1fr; }
  .ia-plantilla-opciones .option-btn {
    width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; line-height: 1.25; padding: 8px 6px; white-space: normal;
  }
  .ia-plantilla-opciones .ia-op-full { display: none; }
  .ia-plantilla-opciones .ia-op-corto { display: contents; }
  .ia-plantilla-opciones .ia-op-sub { display: block; margin: 2px 0 0; font-size: 0.72rem; color: var(--text3); font-weight: 400; }
  .ia-plantilla-opciones .option-btn.selected .ia-op-sub { color: inherit; opacity: 0.75; }
}

/* Informe generado: plegado, con título y metadatos en la cabecera */
.ia-resultado-det {
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 0.2rem;
}
.ia-resultado-det > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 0.8rem 2rem 0.8rem 1rem; cursor: pointer; list-style: none; position: relative;
}
.ia-resultado-det > summary::-webkit-details-marker { display: none; }
.ia-resultado-det > summary::after {
  content: '›'; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--text3); font-size: 1.2rem; transition: transform 0.2s;
}
.ia-resultado-det[open] > summary::after { transform: translateY(-50%) rotate(90deg); }
.ia-resultado-det > summary .ia-meta { margin-bottom: 0; }
.ia-resultado-titulo { font-size: 0.92rem; font-weight: 600; color: var(--text); }
.ia-resultado-det > .ia-informe { border: none; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }
.ia-resultado-det > .ia-transcripcion { padding: 0 1.2rem 1rem; }
.ia-transcripcion { margin-top: 0.8rem; font-size: 0.82rem; color: var(--text2); }
.ia-transcripcion > summary { cursor: pointer; }
.ia-transcripcion-texto { margin-top: 8px; white-space: pre-wrap; line-height: 1.5; color: var(--text2); }
.ia-spinner {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border2); border-top-color: var(--accent);
  animation: iaGira 0.8s linear infinite;
}
@keyframes iaGira { to { transform: rotate(360deg); } }

/* ── Grabación de la sesión en la cabecera (grabadora.js) ──────────────────
   Reutiliza .btn-record (estados recording/paused/recorded). Visible solo
   fuera del hub y con licencia, o mientras haya una grabación en marcha.
   Toque = pausa/reanudar; pulsación larga = descartar (grab-manteniendo
   rellena la píldora mientras se mantiene); con ratón, la papelera. */
.grab-wrap { position: relative; display: none; align-items: center; gap: 4px; }
body.ia-licencia:not(.in-hub) .grab-wrap,
body.grab-activa:not(.in-hub) .grab-wrap { display: flex; }
.grab-btn {
  padding: 5px 8px; position: relative; overflow: hidden; color: var(--text3);
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.grab-btn::after {
  content: ''; position: absolute; inset: 0; background: var(--red); opacity: 0.22;
  transform: scaleX(0); transform-origin: left; pointer-events: none;
}
.grab-btn.grab-manteniendo::after { transform: scaleX(1); transition: transform 0.6s linear; }
/* La pausa tiene que verse: una pausa sin querer que pase desapercibida deja
   parte de la consulta sin grabar. */
.grab-btn.grab-pildora.paused { background: color-mix(in srgb, var(--orange) 14%, transparent); }
.grab-btn.paused .grab-pausa { animation: grabParpadeo 1.4s ease-in-out infinite; }
@keyframes grabParpadeo { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .grab-btn.paused .grab-pausa { animation: none; }
  .grab-btn.grab-manteniendo::after { transition: none; }
}
.grab-desc { display: none; padding: 5px 7px; color: var(--text3); }
@media (hover: hover) and (pointer: fine) {
  body.grab-activa .grab-desc { display: flex; }
}
.grab-btn.grab-pildora { font-variant-numeric: tabular-nums; }
.grab-btn.grab-aviso { border-color: var(--orange); color: var(--orange); }
.grab-crono { font-family: 'DM Mono', monospace; }
.grab-punto {
  position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent2);
}
.grab-btn.grab-aviso .grab-punto { background: var(--orange); }
.grab-menu {
  /* top/right los pone grabadora.js bajo el botón */
  position: fixed; z-index: 400;
  width: max-content; max-width: min(300px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius);
  box-shadow: var(--modal-shadow); padding: 12px 14px;
  font-size: 0.82rem; color: var(--text); text-align: left;
}
.grab-menu[hidden] { display: none; }
@media (max-width: 480px) {
  .grab-menu { left: 16px !important; right: 16px !important; width: auto; max-width: none; }
}
.grab-menu-titulo { font-weight: 500; }
.grab-menu-titulo.aviso { color: var(--orange); }
.grab-menu-dato { font-family: 'DM Mono', monospace; font-size: 0.75rem; color: var(--text3); margin-top: 2px; }
.grab-menu-nota { font-size: 0.78rem; color: var(--text2); margin-top: 8px; line-height: 1.4; }
.grab-menu-aviso { font-size: 0.78rem; color: var(--alert-warning-text); margin-top: 8px; line-height: 1.4; }
.grab-menu-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* «📤 Compartir» de la fase 5 (abrirMenuCompartir, app.js): hoja inferior en
   móvil y diálogo centrado en ancho, con la caja y el velo del panel de sesión
   (.session-panel-overlay / .session-panel); aquí solo las opciones. */
.compartir-opciones { display: flex; flex-direction: column; gap: 8px; }
.compartir-op {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  padding: 12px 14px; min-height: 52px; text-align: left; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius);
  color: var(--text); font-family: inherit; font-size: 0.9rem;
}
.compartir-op-nombre { font-weight: 500; }
.compartir-op-sub { font-size: 0.78rem; color: var(--text3); }
.compartir-op-aviso { color: var(--alert-warning-text); }
.compartir-op-aviso.alto { color: var(--red); }
.compartir-panel:focus { outline: none; }
@media (hover: hover) { .compartir-op:hover { border-color: var(--accent); } }
/* «✨ Preguntar a la IA» (cabecera, abrirPreguntaIA en app.js): misma caja y
   velo que el panel de sesión. Solo standalone. */
.in-hub .pregunta-ia-btn { display: none; }
.pregunta-panel:focus { outline: none; }
.pregunta-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; touch-action: none; }
.pregunta-cabecera .session-panel-title { margin-bottom: 0; min-width: 0; }
.pregunta-tipos { margin-bottom: 10px; flex-wrap: nowrap; }
.pregunta-tipos .option-btn { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 8px 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pregunta-tipos .btn-text-short { display: none; }
@media (max-width: 480px) {
  .pregunta-tipos .btn-text-full { display: none; }
  .pregunta-tipos .btn-text-short { display: inline; }
}
.pregunta-guion { margin-top: 8px; font-size: 0.76rem; line-height: 1.4; color: var(--text2); }
.pregunta-texto { width: 100%; resize: vertical; min-height: 84px; line-height: 1.45; touch-action: pan-y; }
.pregunta-aviso { margin-top: 8px; font-size: 0.76rem; line-height: 1.4; color: var(--alert-warning-text); }
.pregunta-destinos { margin-top: 14px; flex-wrap: nowrap; }
.pregunta-destinos .option-btn { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 8px 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pregunta-ventaja { margin-top: 8px; font-size: 0.78rem; line-height: 1.4; color: var(--text2); min-height: 3.3em; }
.pregunta-ir { display: flex; align-items: center; justify-content: center; margin-top: 14px; min-height: 44px; text-decoration: none; text-align: center; }
.pregunta-ir[aria-disabled="true"] { opacity: 0.45; box-shadow: none; transform: none; cursor: default; }
.pregunta-nota { margin-top: 10px; font-size: 0.7rem; line-height: 1.4; color: var(--text3); }
@media print { .pregunta-ia-btn { display: none !important; } }
.ia-audio-pista { font-size: 0.8rem; color: var(--text3); margin-top: 4px; line-height: 1.45; }
.ia-licencia-motivo { margin-top: 4px; font-size: 0.8rem; opacity: 0.9; }
/* Con una grabación en marcha la cabecera lleva un elemento más (la píldora
   «● 12:34»): en móvil no cabía junto al chip del modo breve, el logo
   completo y los iconos. Mientras se graba, el logo se abrevia como en
   pantallas muy estrechas, el chip breve se queda en su icono y la píldora
   se compacta. */
@media (max-width: 520px) {
  body.grab-activa .logo-sub-word { display: none; }
  body.grab-activa .logo-sub-initial { display: inline; }
  body.grab-activa .app-header .modo-badge-text { display: none; }
  body.grab-activa.modo-breve .app-header .modo-badge { padding: 5px 8px; }
  .grab-btn.grab-pildora { padding: 4px 7px; gap: 4px; font-size: 0.7rem; }
}
.grab-pausa { width: 7px; height: 9px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; box-sizing: border-box; flex-shrink: 0; }
.ia-error { margin-top: 0.8rem; }
.ia-error-salida { margin-top: 6px; }
.ia-error-original { margin-top: 6px; font-family: 'DM Mono', monospace; font-size: 0.7rem; opacity: 0.75; overflow-wrap: anywhere; }

/* ── Paciente posquirúrgico (docs/posquirurgico.md) ───────────
   Todo lo que solo existe con mecanismo Post-quirúrgico cuelga de
   body.posquirurgico (_pintarCirugiaUI en app.js), como .modo-breve. */
.solo-posq { display: none; }
body.posquirurgico .solo-posq { display: block; }
.solo-ds { display: none; }
body.disautonomia .solo-ds { display: block; }
/* Lupus (Fase P, docs/lupus.md): notas de las fases 3 y 4b, que activa
   body.lupus (_pintarLESUI en app.js). La tarjeta reutiliza .hm-subtipo y
   el bloque de los rasgos, .ds-bloque. */
.solo-les { display: none; }
body.lupus .solo-les { display: block; }
/* Casillas de lupus y desencadenantes de mastocitos: chips de selección
   múltiple (.hm-subtipos), como las complicaciones de la cirugía */
#maOtro { margin-top: 8px; }
.ma-fase5 .ma-que-hacer { font-weight: 600; }
.cir-semanas:not(:empty) { font-family: 'DM Mono', monospace; font-size: 0.78rem; color: var(--accent); margin: -4px 0 12px; }
.cir-complicaciones { flex-wrap: wrap; }
.cir-complicaciones .option-btn { width: auto; flex: 0 0 auto; padding: 8px 12px; font-size: 0.8rem; min-height: 40px; }
.cir-comp-otra { margin-top: 8px; }
.nota-posq { margin: 6px 0 2px; font-size: 0.78rem; line-height: 1.45; color: var(--text2); border-left: 2px solid var(--accent); padding-left: 8px; }
.dx-tratada { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 1rem; padding: 10px 12px; font-size: 0.85rem; color: var(--text); line-height: 1.45; cursor: pointer; background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius); }
.dx-tratada input { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.dx-tratada-ayuda { display: block; font-size: 0.75rem; color: var(--text3); margin-top: 2px; }
.dx-tratada-tests > summary { cursor: pointer; font-size: 0.8rem; color: var(--text3); margin-bottom: 8px; }

/* ── Hipermovilidad / Ehlers-Danlos (Fase P, docs/hipermovilidad.md) ──
   Tarjeta de la fase 1, bloque del sistema de la fase 2 (cuestionario y
   escala de Beighton), aviso de los tests de laxitud (4b) y recuadro de la
   fase 5. Lo activa body.hipermovilidad (_pintarHMUI en app.js). */
.hm-subtipo { margin-top: 12px; margin-bottom: 0; }
/* Embarazo o posparto: las semanas van justo bajo los botones del estado */
#emEmbWrap, #emPpWrap { margin-top: 12px; }
/* Osteoporosis: la casilla «Alguna en los 2 últimos años…» sigue a la fila de
   fracturas vertebrales con el mismo hueco que entre filas de un grupo */
#opRecienteWrap { margin-top: 8px; }
/* Fase 6: la primera fila de datos del plan del mes, bajo la frecuencia */
.option-group + .summary-row { margin-top: 6px; }
.hm-subtipos { flex-wrap: wrap; }
.hm-subtipos .option-btn { width: auto; flex: 0 0 auto; padding: 8px 12px; font-size: 0.8rem; min-height: 40px; }
/* Pantalla estrecha: las filas se estiran hasta el borde, sin botón descolgado
   (mismo criterio que .fp-opts y .sint-zonas): condiciones especiales,
   complicaciones de la cirugía, «Calcular …» y las opciones de la fase 6 */
@media (max-width: 520px) {
  .hm-subtipos .option-btn, .cir-complicaciones .option-btn, #phase6 .option-group > .option-btn,
  .cuest-calc .cuest-calc-btn { flex: 1 1 auto; justify-content: center; text-align: center; }
}
.hm-bloque:empty { display: none; }
.hm-bloque { margin-bottom: 1rem; }
.hm-btn { min-height: 44px; }
.hm-maniobra { padding: 10px 12px; margin-bottom: 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); }
.hm-maniobra-txt { font-size: 0.85rem; line-height: 1.45; color: var(--text); margin-bottom: 6px; }
/* Beighton: Derecho / Izquierdo a partes iguales (o «Positivo» a todo el ancho), alto de los SÍ/NO */
.hm-lados { display: flex; gap: 8px; flex-wrap: nowrap; }
.hm-lados .option-btn { flex: 1 1 0; justify-content: center; text-align: center; min-height: 44px; padding: 8px 6px; }
.hm-casilla { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 0.85rem; color: var(--text2); cursor: pointer; }
.hm-casilla input { width: 18px; height: 18px; accent-color: var(--accent); }
.hm-resultado { font-family: 'DM Mono', monospace; font-size: 0.8rem; color: var(--accent); margin: 8px 0; }
.hm-nota { font-size: 0.8rem; color: var(--text2); margin: 6px 0; }
.hm-fuente { font-size: 0.75rem; color: var(--text3); line-height: 1.45; margin-top: 6px; }
.hm-quitar { background: none; border: none; padding: 8px 0; min-height: 40px; font: inherit; font-size: 0.8rem; color: var(--text3); text-decoration: underline; cursor: pointer; }
.hm-aviso-test { margin: 6px 0; font-size: 0.8rem; line-height: 1.45; color: var(--text2); border-left: 2px solid var(--orange); padding-left: 8px; }
/* Osteoporosis (docs/osteoporosis.md): el porqué de la línea de los tests que cargan el hueso */
.op-razon { margin-top: 4px; }
.op-razon summary { cursor: pointer; color: var(--accent); font-size: 0.78rem; min-height: 32px; display: inline-flex; align-items: center; }
.hm-fase5 > div > div { margin-top: 4px; }

/* Aviso inferior (showToast, app.js). En escritorio, píldora centrada abajo;
   width: max-content porque con left: 50% el navegador solo le dejaba medio
   viewport y un mensaje corto se partía en tres líneas. En móvil (≤768 px),
   banda a todo el ancho (16 px de margen) justo encima de los botones de
   navegación fijos (--nav-alto), como el aviso de versión nueva: antes
   quedaba a 24 px del borde, encima del botón de avance. */
.app-toast {
  --toast-color: var(--accent2);
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(480px, calc(100vw - 32px)); box-sizing: border-box;
  background: var(--surface3); border: 1px solid var(--toast-color); color: var(--toast-color);
  font-family: 'Outfit', sans-serif; font-size: 0.85rem; line-height: 1.4; text-align: center;
  padding: 10px 20px; border-radius: 10px; z-index: 9999;
  box-shadow: var(--modal-shadow); pointer-events: none;
  animation: toastUp 0.25s ease;
}
.app-toast-warning { --toast-color: var(--orange); }
@media (max-width: 768px) {
  .app-toast {
    left: 16px; right: 16px; transform: none; width: auto; max-width: none;
    bottom: calc(var(--nav-alto, 0px) + var(--toast-sobre, 0px) + 10px);
    font-size: 0.9rem; padding: 12px 16px; border-radius: 12px;
    animation-name: toastUpMovil;
  }
}
@keyframes toastUpMovil {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Aviso «Hay una versión nueva» (comprobarVersion, app.js). En escritorio,
   arriba, bajo la cabecera fija. En móvil (≤768 px), snackbar a todo el ancho
   justo encima de los botones de navegación fijos (--nav-alto, medido por
   _colocarAvisoVersion): al alcance del pulgar, sin tapar el título de la fase
   ni pelearse con las barras de contexto de arriba (fases 2 y 4b). */
.version-aviso {
  position: fixed; top: 125px; left: 50%; transform: translateX(-50%);
  z-index: 150; display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box;
  background: var(--surface3); border: 1px solid var(--accent); border-radius: 10px;
  padding: 6px 6px 6px 14px; box-shadow: var(--modal-shadow);
  font-size: 0.8rem; color: var(--text); animation: versionAvisoIn 0.25s ease;
}
@keyframes versionAvisoIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.version-aviso-texto { min-width: 0; line-height: 1.3; }
.version-aviso-btn {
  background: var(--accent); color: var(--bg); border: none; border-radius: 7px;
  padding: 6px 12px; font-family: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.version-aviso-cerrar {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text3); font-size: 1.1rem; line-height: 1;
  padding: 4px 6px; cursor: pointer; flex-shrink: 0;
}
@media (max-width: 768px) {
  .version-aviso {
    top: auto; bottom: calc(var(--nav-alto, 0px) + 10px); left: 16px; right: 16px;
    transform: none; width: auto; max-width: none; z-index: 190;
    gap: 8px; padding: 6px 4px 6px 16px; border-radius: 12px; font-size: 0.9rem;
    animation-name: versionAvisoInAbajo;
  }
  .version-aviso-texto { flex: 1; }
  .version-aviso-btn { min-height: 44px; padding: 0 16px; font-size: 0.9rem; border-radius: 9px; }
  .version-aviso-cerrar { min-width: 44px; min-height: 44px; font-size: 1.4rem; }
  .version-aviso-cerrar .icono-x { width: 20px; height: 20px; }
  /* Con el teclado abierto la barra de abajo deja de estar donde se espera y el
     aviso taparía lo que se escribe: se oculta mientras se edita un campo. */
  body:has(:is(textarea, input:not([type=checkbox], [type=radio], [type=file])):focus) .version-aviso { display: none; }
}
@media (min-width: 769px) and (max-height: 500px) and (max-width: 900px) { .version-aviso { top: 91px; } }
/* Texto corto en móviles estrechos: «Hay una versión nueva» no cabe en una
   línea junto al botón y la «×» de 44 px por debajo de ~380 px */
.version-aviso-corto { display: none; }
@media (max-width: 379px) {
  .version-aviso-largo { display: none; }
  .version-aviso-corto { display: inline; }
}
/* Estado «Actualizando…»: sin botones, con un indicador que gira */
.version-aviso.version-aviso-actualizando { padding-top: 10px; padding-bottom: 10px; padding-right: 16px; }
@media (max-width: 768px) {
  .version-aviso.version-aviso-actualizando { min-height: 56px; }
}
.version-aviso-giro {
  width: 16px; height: 16px; flex-shrink: 0; box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--border2); border-top-color: var(--accent);
  animation: versionAvisoGiro 0.8s linear infinite;
}
@keyframes versionAvisoGiro { to { transform: rotate(360deg); } }
@keyframes versionAvisoInAbajo {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Punto en el icono de sesión: hay versión nueva y el aviso se cerró */
.session-btn { position: relative; }
.session-btn.version-nueva::after {
  content: ''; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg);
}
.ia-consejos-dictado { margin: 8px 0 0; padding-left: 1.2rem; font-size: 0.8rem; color: var(--text2); line-height: 1.45; }
.ia-consejos-dictado li + li { margin-top: 3px; }
#iaModoAudio { margin-top: 1rem; }
#iaModoAudio:empty { margin: 0; }
.ia-acciones:has(+ .ia-rev-paquete) { margin-bottom: 0; }
.ia-rev-paquete { margin-top: 4px; }
.ia-rev-paquete-btn {
  background: none; border: none; padding: 0; min-height: 40px; cursor: pointer;
  font-family: inherit; font-size: 0.8rem; color: var(--text3);
  text-decoration: underline; text-underline-offset: 3px;
}
.ia-rev-paquete-btn:hover { color: var(--text2); }

/* ─── Tiempos de recuperación de tejidos (⏱ cabecera, lib/tejidos.js) ───
   Caja y velo del panel de sesión, más ancha en escritorio. Una sola
   estructura: nombre a la izquierda en ancho, encima de la barra en móvil. */
.tejidos-panel { max-width: 760px; width: 94%; max-height: 88vh; display: flex; flex-direction: column; }
.tejidos-panel:focus { outline: none; }
.tejidos-panel > * { flex-shrink: 0; }
.tejidos-panel > .tejidos-cuerpo { flex: 1 1 auto; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; min-height: 0; }
@media (max-width: 768px) {
  .tejidos-panel { max-width: 100%; width: 100%; max-height: 90vh; padding-bottom: 20px; }
}
.tej-diagrama { --tej-nombre: 200px; display: flex; flex-direction: column; gap: 6px; }
.tej-fila { display: grid; grid-template-columns: var(--tej-nombre) 1fr; align-items: center; column-gap: 12px; }
.tej-nombre { font-size: 0.8rem; color: var(--text); line-height: 1.3; min-width: 0; }
.tej-nota { display: block; margin-top: 2px; font-size: 0.7rem; color: var(--text3); line-height: 1.35; }
.tej-grupo-nota { margin: 4px 0 8px; font-size: 0.75rem; color: var(--text2); line-height: 1.4; }
/* Filtro «Este paciente» (Fase J): de qué hipótesis salen las filas */
.tej-paciente { margin: -4px 0 12px; font-size: 0.75rem; color: var(--text2); line-height: 1.4; }
.tej-pista {
  position: relative; display: grid; grid-template-columns: repeat(var(--tej-n), 1fr); min-height: 18px;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--tej-n) - 1px), var(--border) calc(100% / var(--tej-n) - 1px), var(--border) calc(100% / var(--tej-n)));
  border-left: 1px solid var(--border);
}
.tej-barra { grid-row: 1; height: 14px; align-self: center; border-radius: 4px; margin: 0 1px; padding: 0; border: 0; font: inherit; cursor: pointer; position: relative; }
/* Zona de toque más alta que la barra (34 px), sin pisar la fila de al lado */
.tej-barra::after { content: ''; position: absolute; inset: -10px 0; }
.tej-barra:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tej-barra[aria-expanded="true"] { outline: 2px solid var(--text); outline-offset: 2px; }
.tej-minima { background: var(--tej-minima); color: var(--tej-minima); }
.tej-leve { background: var(--tej-leve); color: var(--tej-leve); }
.tej-moderada { background: var(--tej-moderada); color: var(--tej-moderada); }
.tej-grave { background: var(--tej-grave); color: var(--tej-grave); }
/* Qué mide la barra (`mide`, data/tejidos.js): rayado = protección, contorno = programa.
   El color sigue siendo la gravedad (`color` = el de la gravedad, para el contorno). */
.tej-relleno-rayado { background-image: repeating-linear-gradient(135deg, transparent 0 4px, var(--surface) 4px 6px); }
.tej-relleno-contorno { background: none; box-shadow: inset 0 0 0 2px currentColor; }
/* punteado = biología de la reparación */
.tej-relleno-punteado { background-image: radial-gradient(var(--surface) 1.3px, transparent 1.6px); background-size: 6px 6px; background-position: 1px 1px; }
/* degradado = evolución natural (se va apagando hacia la derecha) */
.tej-relleno-degradado { background-image: linear-gradient(90deg, transparent 0%, transparent 35%, var(--surface) 100%); }
.tej-ley-mide { background-color: var(--text2); color: var(--text2); }
.tej-ley-mide.tej-relleno-contorno { background: none; }
.tej-leyenda-mide { margin-top: 8px; }
.tej-ley-titulo { color: var(--text3); }
.tej-marca { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 6px; font-size: 0.62rem; line-height: 1.5; color: var(--text3); border: 1px dashed var(--text3); white-space: nowrap; vertical-align: 1px; }
.tej-grupo { display: block; width: 100%; margin-top: 8px; padding: 0 0 3px; background: none; border: none; border-bottom: 1px solid var(--border); text-align: left; cursor: pointer; font-family: 'DM Mono', monospace; font-size: 0.66rem; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.tej-bloque { display: flex; flex-direction: column; gap: 6px; }
/* Filtro por tejido (encima del diagrama) */
.tej-filtro { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.tej-filtro::-webkit-scrollbar { display: none; }
.tej-filtro-btn { flex: 0 0 auto; }
/* Degradado en el borde por el que quedan pastillas fuera (clases que pone app.js) */
.tej-filtro.mas-dcha, .chip-row.mas-dcha { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.tej-filtro.mas-izda, .chip-row.mas-izda { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
.tej-filtro.mas-izda.mas-dcha, .chip-row.mas-izda.mas-dcha { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.tej-filtro-btn { min-height: 32px; padding: 4px 12px; border-radius: 16px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text2); font-family: inherit; font-size: 0.78rem; cursor: pointer; }
.tej-filtro-btn.activo { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
@media (hover: hover) { .tej-filtro-btn:hover { border-color: var(--accent); } }
@media (max-width: 480px) { .tej-filtro-btn { padding: 4px 10px; font-size: 0.74rem; } }
.tej-filtro-btn { white-space: nowrap; }
/* Subtipos de una fila, plegados bajo ella (estructura lista; se llenan en la Fase J) */
.tej-subtipos > summary { cursor: pointer; font-size: 0.72rem; color: var(--text3); padding: 2px 0; }
.tej-subtipos[open] > summary { margin-bottom: 4px; }
.tej-sin-barra .tej-pista { min-height: 0; }
.tej-subfila .tej-nombre { padding-left: 12px; color: var(--text2); }
/* El eje de tiempo queda fijo arriba al hacer scroll dentro del panel (.tejidos-cuerpo) */
.tej-eje { position: sticky; top: 0; z-index: 3; background: var(--surface); padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.tej-eje .tej-pista { background: none; border-left: none; min-height: 26px; padding-top: 12px; }
.tej-col { font-family: 'DM Mono', monospace; font-size: 0.62rem; color: var(--text3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: end; }
/* Leyenda de fases: muestra de color + nombre entero + rango; se ajusta en líneas */
.tej-fases { margin: 2px 0 2px; }
.tej-fases-titulo { font-size: 0.8rem; color: var(--text); margin-bottom: 6px; }
.tej-fases-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tej-fase-ley { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; white-space: nowrap; }
.tej-fase-muestra { width: 16px; height: 4px; border-radius: 2px; background: currentColor; }
.tej-fase-nombre { color: currentColor; }
.tej-fase-rango { color: var(--text3); font-family: 'DM Mono', monospace; font-size: 0.68rem; }
/* Fase que solo vale para un tejido (remodelación del tendón más allá del año): más clara */
.tej-fase-ley.tej-fase-parcial .tej-fase-muestra { opacity: 0.45; }
/* El borde de cada fase toma su color, como la tira del eje (.tej-eje-fase) */
.tej-eje-fase { position: absolute; bottom: 0; height: 3px; border-radius: 2px; background: currentColor; opacity: 0.85; }
.tej-eje-fase.tej-fase-parcial { opacity: 0.4; }
.tej-eje .tej-pista { padding-bottom: 6px; }
.tej-fase-inflamatoria { color: var(--alert-warning-text); }
.tej-fase-proliferativa { color: var(--accent2); }
.tej-fase-remodelacion { color: var(--accent); }
.tej-fase-remodelacion_tendon { color: var(--accent); }
.tej-pendiente { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 6px; font-size: 0.62rem; line-height: 1.5; color: var(--alert-warning-text); border: 1px solid var(--alert-warning-text); white-space: nowrap; vertical-align: 1px; }
.tej-hoy { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px solid var(--tej-hoy); transform: translateX(-1px); pointer-events: none; z-index: 1; }
.tej-hoy-etq { position: absolute; top: 0; transform: translateX(-50%); font-family: 'DM Mono', monospace; font-size: 0.6rem; line-height: 12px; color: var(--tej-hoy); font-weight: 600; }
.tej-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: 0.74rem; color: var(--text2); }
.tej-ley { display: inline-flex; align-items: center; gap: 6px; }
.tej-ley-muestra { width: 18px; height: 10px; border-radius: 3px; }
.tej-fases-texto { margin-top: 8px; font-size: 0.72rem; line-height: 1.4; color: var(--text3); }
.tej-hoy-texto, .tej-ayuda { margin-top: 10px; font-size: 0.76rem; line-height: 1.4; color: var(--text2); }
.tej-hoy-texto { color: var(--text); }
.tej-hoy-muestra { display: inline-block; width: 0; height: 12px; border-left: 2px solid var(--tej-hoy); margin-right: 8px; vertical-align: -1px; }
.tej-notas { margin: 10px 0 0 1.1em; padding: 0; font-size: 0.74rem; line-height: 1.45; color: var(--text2); }
.tej-notas li + li { margin-top: 3px; }
.tej-fuente { margin-top: 10px; font-size: 0.7rem; line-height: 1.4; color: var(--text3); }
/* Móvil: el nombre encima de su barra, el eje a todo el ancho */
@media (max-width: 600px) {
  .tej-fila { grid-template-columns: 1fr; row-gap: 3px; }
  .tej-eje .tej-nombre { display: none; }
  .tej-diagrama { gap: 8px; }
  .tej-col { font-size: 0.58rem; }
}
/* Tarjeta de una barra (app.js, _alternarInfoBarra): la ficha flotante común (.ficha-flotante) */
.tej-info-madre { font-size: 0.7rem; color: var(--text3); margin-bottom: 1px; }
.tej-info-nombre { font-weight: 600; margin-bottom: 6px; }
.tej-info-datos { margin: 0; display: grid; gap: 4px; }
.tej-info-datos > div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: center; }
.tej-info-datos dt { font-family: 'DM Mono', monospace; font-size: 0.62rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text3); }
.tej-info-datos dd { margin: 0; display: flex; align-items: center; gap: 6px; }
.tej-info-datos .tej-ley-muestra { flex: 0 0 auto; }
.tej-info-datos .tej-info-fuentes { align-items: start; }
.tej-info-datos .tej-info-fuentes dt { padding-top: 3px; }
.tej-info-datos .tej-info-fuentes dd { display: block; }
/* Fuentes en línea, separadas por « · », que pasan a la línea siguiente si no caben
   (como la línea «ANATOMÍA» de la fase 4b). Cada <li> lleva su « · » delante y la lista
   se corre a la izquierda el ancho del separador dentro de un contenedor que recorta:
   así el « · » del principio de cada línea queda fuera de la vista y nunca abre línea. */
.tej-info-fuentes dd, .tej-grupo-fuentes { overflow: hidden; }
.tej-fuentes-lista { --tej-sep: 18px; list-style: none; margin: 0 0 0 calc(-1 * var(--tej-sep)); padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.tej-fuentes-lista li { display: inline-flex; align-items: center; white-space: nowrap; }
.tej-fuentes-lista li::before { content: '·'; display: inline-block; width: var(--tej-sep); text-align: center; color: var(--text3); }
.tej-fuente-enlace { color: var(--accent); text-decoration: none; }
@media (hover: hover) { .tej-fuente-enlace:hover { text-decoration: underline; } }
.tej-fuente-enlace:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }
/* En táctil cada línea de enlaces mide 24 px (como las filas de arriba), pero cada enlace
   responde en 32 px de alto (WCAG 2.2 pide 24): un ::after invisible sobresale 4 px por
   arriba y por abajo. Entre dos líneas solo se solapan en el hueco entre textos, y el de
   abajo queda encima, así que tocar sobre un texto abre siempre ese enlace. La caja de
   las fuentes se sale esos 4 px para que el recorte no se coma el área de la primera y
   la última línea. El separador es más ancho, para no tocar el enlace de al lado
   (decisión del usuario, 2026-10: con líneas de 32 o 40 px sobraba hueco) */
@media (pointer: coarse) {
  .tej-fuentes-lista { --tej-sep: 24px; }
  .tej-fuente-enlace { position: relative; display: inline-flex; align-items: center; min-height: 24px; }
  .tej-fuente-enlace::after { content: ''; position: absolute; inset: -4px 0; }
  .tej-info-datos .tej-info-fuentes dd { margin: -4px 0; padding: 4px 0; }
}
.tej-grupo-fuentes { margin: -4px 0 8px; font-size: 0.72rem; color: var(--text3); }
.tej-grupo-fuentes summary { cursor: pointer; width: max-content; color: var(--accent); }
.tej-grupo-fuentes .tej-fuentes-lista { margin-top: 4px; }
@media print { .tejidos-btn { display: none !important; } .tej-info { display: none !important; } }

/* ─── Condiciones especiales (cabecera, lib/condiciones.js) ───
   Caja y velo del panel de sesión, como la calculadora. Una fila por
   condición: nombre y estado, qué es, pistas, qué añade, fuentes y el botón
   que lleva a marcarla. «No consta» en gris: no marcar es lo normal. */
.cond-panel { max-width: 560px; width: 94%; max-height: 88vh; display: flex; flex-direction: column; }
.cond-panel:focus { outline: none; }
.cond-panel > * { flex-shrink: 0; }
.cond-panel > .cond-cuerpo { flex: 1 1 auto; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; min-height: 0; }
@media (max-width: 768px) {
  .cond-panel { max-width: 100%; width: 100%; max-height: 90vh; padding-bottom: 20px; }
}
.cond-intro { margin: 0 0 6px; font-size: 0.85rem; color: var(--text2); line-height: 1.45; }
.cond-intro-diag { margin-bottom: 14px; color: var(--text); font-weight: 500; }
.cond-fila { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--surface2); }
.cond-fila + .cond-fila { margin-top: 10px; }
.cond-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cond-nombre { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--text); line-height: 1.3; min-width: 0; }
.cond-estado { flex-shrink: 0; font-family: 'DM Mono', monospace; font-size: 0.68rem; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border2); color: var(--text3); white-space: nowrap; }
.cond-estado-on { border-color: var(--accent); color: var(--accent); }
.cond-que { margin: 6px 0 8px; font-size: 0.85rem; color: var(--text2); line-height: 1.45; }
.cond-piensa { font-size: 0.8rem; color: var(--text); font-weight: 500; }
.cond-pistas { margin: 4px 0 8px; padding-left: 1.1rem; font-size: 0.82rem; color: var(--text); line-height: 1.45; }
.cond-pistas li + li { margin-top: 2px; }
.cond-anade { margin: 0 0 6px; font-size: 0.78rem; color: var(--text2); line-height: 1.45; }
.cond-anade-et { color: var(--text3); font-family: 'DM Mono', monospace; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.5px; }
.cond-fuentes { font-size: 0.72rem; color: var(--text3); margin-bottom: 6px; }
.cond-acciones { display: flex; justify-content: flex-end; }
.cond-ir { min-height: 40px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--accent); background: transparent;
  color: var(--accent); font: inherit; font-size: 0.82rem; cursor: pointer; }
.cond-ir:disabled { border-color: var(--border2); color: var(--text3); cursor: default; }
@media (hover: hover) { .cond-ir:not(:disabled):hover { background: var(--hover-tint); } }
.cond-grupo { margin: 18px 0 8px; font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); font-weight: 500; }
.cond-pie { margin: 14px 0 0; font-size: 0.75rem; color: var(--text3); }
@media print { .cond-btn { display: none !important; } }

/* Guía de fármacos (lib/farmacos.js): el mismo diálogo que «Condiciones
   especiales» (.cond-panel); una familia por <details>, cinco apartados */
.farm-familia { border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); }
.farm-familia + .farm-familia { margin-top: 10px; }
.farm-familia > summary { list-style: none; cursor: pointer; padding: 12px; display: flex; flex-direction: column; gap: 2px; min-height: 44px; }
.farm-familia > summary::-webkit-details-marker { display: none; }
.farm-familia > summary::after { content: '▾'; position: absolute; right: 12px; top: 12px; color: var(--text3); }
.farm-familia > summary { position: relative; padding-right: 32px; }
.farm-familia[open] > summary::after { content: '▴'; }
.farm-nombre { font-size: 0.95rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.farm-ejemplos { font-size: 0.78rem; color: var(--text2); line-height: 1.4; }
.farm-cuerpo { padding: 0 12px; }
/* «Ficha técnica (CIMA)»: mismos enlaces que Kenhub (.test-anat), pero también en
   el hub (enlace público, sin cuenta ni IA; docs/farmacologia.md) */
.farm-cima { margin: 0 12px 10px; }
.in-hub .farm-cima { display: block; }
.farm-apartado + .farm-apartado { margin-top: 12px; }
.farm-apartado-titulo { margin: 0 0 4px; font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text3); font-weight: 500; }
.farm-apartado p { margin: 0 0 6px; font-size: 0.85rem; line-height: 1.5; color: var(--text); }
.farm-mas { margin: 2px 0 6px; }
.farm-mas > summary { cursor: pointer; font-size: 0.78rem; color: var(--accent); min-height: 32px; display: flex; align-items: center; }
.farm-mas p { color: var(--text2); }
.farm-fuentes { padding: 10px 12px 12px; font-size: 0.72rem; color: var(--text3); }
.farm-fuentes-et { font-family: 'DM Mono', monospace; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 4px; }
.farm-grupo { margin: 18px 0 6px; font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); font-weight: 500; }
.farm-pendientes-lista { margin: 0 0 6px; font-size: 0.82rem; color: var(--text2); line-height: 1.5; }
.farm-pendientes-nota { margin: 0 0 8px; font-size: 0.78rem; color: var(--text3); line-height: 1.45; }
.in-hub .farm-preguntar, .in-hub .farm-pendientes-nota { display: none; }
/* Dentro de un diálogo (guía de fármacos) la barra y el menú de «✨ IA»
   (600/601) quedaban bajo el velo (999): por encima solo mientras hay uno abierto */
body:has(.session-panel-overlay.open) .ia-barra { z-index: 1001; }
body:has(.session-panel-overlay.open) .ia-menu { z-index: 1002; }
@media print { .farm-btn { display: none !important; } }

/* ─── Calculadora de cuestionarios (cabecera, lib/cuestionarios.js) ───
   Caja y velo del panel de sesión, como «Tiempos de recuperación». Dentro,
   lista de cuestionarios o el formulario de uno, con el resultado fijo arriba
   mientras se toca cada ítem. */
.cuest-panel { max-width: 560px; width: 94%; max-height: 88vh; display: flex; flex-direction: column; }
.cuest-panel:focus { outline: none; }
.cuest-panel > * { flex-shrink: 0; }
.cuest-panel > .cuest-cuerpo { flex: 1 1 auto; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; min-height: 0; }
@media (max-width: 768px) {
  .cuest-panel { max-width: 100%; width: 100%; max-height: 90vh; padding-bottom: 20px; }
}
.cuest-grupo + .cuest-grupo { margin-top: 14px; }
.cuest-grupo-titulo { font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); font-weight: 500; margin: 0 0 6px; }
/* Nombre y descripción en un solo párrafo: si la descripción no cabe, sigue
   debajo del nombre en vez de en una columna aparte que dejaba un hueco a la
   izquierda; el estado va siempre en su propia línea */
.cuest-tarjeta {
  display: block;
  width: 100%; text-align: left; margin-bottom: 6px; padding: 10px 12px; min-height: 48px;
  background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px;
  color: var(--text); font-family: inherit; cursor: pointer;
}
@media (hover: hover) { .cuest-tarjeta:hover { border-color: var(--accent); } }
.cuest-tarjeta-nombre { font-weight: 600; font-size: 0.9rem; margin-right: 8px; }
.cuest-tarjeta-titulo { font-size: 0.78rem; color: var(--text2); line-height: 1.4; }
.cuest-tarjeta-estado { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--text3); }
.cuest-nivel-ok { color: var(--green); }
.cuest-nivel-medio { color: var(--orange); }
.cuest-nivel-alto { color: var(--red); }
.cuest-pie { margin: 12px 0 0; font-size: 0.72rem; color: var(--text3); line-height: 1.45; }
.cuest-volver { background: none; border: none; padding: 0; min-height: 40px; color: var(--accent); font-family: inherit; font-size: 0.85rem; cursor: pointer; }
.cuest-cab-nombre { font-size: 1.05rem; font-weight: 600; color: var(--text); }
.cuest-cab-titulo { font-size: 0.8rem; color: var(--text2); }
.cuest-instr, .cuest-leyenda { margin: 6px 0 0; font-size: 0.78rem; color: var(--text2); line-height: 1.45; }
.cuest-leyenda { color: var(--text3); }
.cuest-resultado {
  position: sticky; top: 0; z-index: 1; margin: 10px 0 6px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border2); border-radius: 8px;
  box-shadow: 0 6px 10px -8px var(--scrim);
}
/* En la hoja de la calculadora el resultado es una banda de borde a borde (como las
   bandas de contexto de la app): con el mismo ancho, borde y esquinas que los botones
   se leía como un botón más al hacer scroll (usuario, 2026-11). El área que hace
   scroll se extiende hasta el borde de la hoja para que la banda no se recorte. */
.cuest-panel { --cuest-pad: 1.8rem; }
@media (max-width: 768px) { .cuest-panel { --cuest-pad: 1.4rem; } }
.cuest-panel > .cuest-cuerpo { margin-inline: calc(-1 * var(--cuest-pad)); padding-inline: var(--cuest-pad); }
.cuest-panel .cuest-resultado {
  margin-inline: calc(-1 * var(--cuest-pad)); padding-inline: var(--cuest-pad);
  border-width: 1px 0; border-radius: 0;
}
.cuest-res-linea { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; }
.cuest-res-total { font-family: 'DM Mono', monospace; font-size: 1.05rem; font-weight: 500; color: var(--text); }
.cuest-res-interp { font-size: 0.85rem; font-weight: 600; color: var(--text2); }
.cuest-res-falta { font-size: 0.78rem; color: var(--text3); }
.cuest-res-subs { margin: 4px 0 0; padding-left: 1.1rem; font-size: 0.78rem; color: var(--text2); }
.cuest-alerta { margin-top: 6px; font-size: 0.8rem; font-weight: 600; color: var(--alert-danger-text); line-height: 1.4; }
.cuest-seccion { margin: 14px 0 4px; font-size: 0.78rem; font-weight: 600; color: var(--text2); }
.cuest-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.cuest-item-txt { font-size: 0.85rem; color: var(--text); line-height: 1.4; margin-bottom: 6px; }
.cuest-item-n { display: inline-block; min-width: 1.6em; font-family: 'DM Mono', monospace; color: var(--text3); }
.cuest-item-nota { font-size: 0.72rem; color: var(--text3); }
.cuest-ops { display: grid; gap: 6px; }
/* Escala: una fila si cabe; 0–10 en dos filas que llenan el ancho en móvil,
   repartidas como la EVA de la fase 3 (0–4 / 5–10; botones de 40 px como mínimo) */
.cuest-ops-escala { grid-template-columns: repeat(var(--cuest-n), minmax(0, 1fr)); }
.cuest-salto { display: none; }
@media (max-width: 520px) {
  .cuest-ops-escala.cuest-ops-largo { display: flex; flex-wrap: wrap; row-gap: 0; }
  .cuest-ops-largo .cuest-op { flex: 1 1 0; min-width: 0; }
  .cuest-ops-largo .cuest-salto { display: block; flex-basis: 100%; height: 6px; }
}
.cuest-ops-numero { display: flex; align-items: center; gap: 10px; }
.cuest-num { width: 6.5em; min-height: 44px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text); font-family: 'DM Mono', monospace; font-size: 1rem; }
.cuest-num:focus { outline: none; border-color: var(--accent); }
.cuest-num-rango { font-size: 0.75rem; color: var(--text3); }
.cuest-ops-numero .cuest-op { min-width: 64px; }
.cuest-ops-sino { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cuest-ops-texto { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
/* Opciones de texto en móvil (una respuesta o varias): dos columnas; con un número
   impar, la última ocupa la fila entera (sin hueco). Si alguna opción es larga
   (.cuest-ops-largas, LARGO_OPCION_COLUMNA), una por fila alineada a la izquierda.
   De 3 a 4 opciones cortas (.cuest-ops-fila): una sola fila si cada texto cabe en una
   línea y, si no, dos por fila (filas.js lo mide y pone data-cols) */
@media (max-width: 520px) {
  .cuest-ops-texto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cuest-ops-texto .cuest-op { min-height: 40px; padding: 8px 10px; }
  .cuest-ops-texto .cuest-op:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cuest-ops-texto.cuest-ops-fila { --filas: 1; grid-template-columns: repeat(var(--filas-cols, 2), minmax(0, 1fr)); }
  .cuest-ops-fila:not([data-cols="2"]) .cuest-op:last-child:nth-child(odd) { grid-column: auto; }
  .cuest-ops-texto.cuest-ops-largas { grid-template-columns: minmax(0, 1fr); }
  .cuest-ops-largas .cuest-op { padding: 8px 12px; text-align: left; }
}
.cuest-op {
  min-height: 44px; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--border2); background: var(--surface2); color: var(--text2);
  font-family: inherit; font-size: 0.85rem; line-height: 1.25; cursor: pointer; overflow-wrap: anywhere;
}
.cuest-ops-escala .cuest-op { font-family: 'DM Mono', monospace; font-size: 0.95rem; padding: 6px 0; }
@media (hover: hover) { .cuest-op:hover { border-color: var(--accent); color: var(--text); } }
.filas-midiendo > * { font-weight: 600 !important; }
.cuest-op.selected { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.cuest-anclas { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; font-size: 0.7rem; color: var(--text3); }
.cuest-anclas span:last-child { text-align: right; }
.cuest-fuente { margin-top: 12px; font-size: 0.74rem; color: var(--text3); line-height: 1.45; }
.cuest-fuente p { margin: 0 0 6px; }
.cuest-fuente-et { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 1px; text-transform: uppercase; }
.cuest-borrar { margin-top: 6px; background: none; border: none; padding: 0; min-height: 40px; color: var(--text3); font-family: inherit; font-size: 0.8rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cuest-borrar:disabled { opacity: 0.4; cursor: default; }
/* Fase 5 */
.summary-section[hidden] { display: none; }
.cuest-f5 { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; color: var(--text2); line-height: 1.5; }
.cuest-f5 strong { color: var(--text); }
.cuest-f5-abrir { margin-top: 8px; background: none; border: none; padding: 0; min-height: 40px; color: var(--accent); font-family: inherit; font-size: 0.8rem; cursor: pointer; }
/* Enlaces «Calcular <cuestionario>» junto a la recomendación de la fase 1 y
   al badge del PROM (4b y 5): abren la calculadora en ese cuestionario */
.cuest-calc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cuest-calc-btn {
  min-height: 40px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border2); background: var(--surface2); color: var(--accent);
  font-family: inherit; font-size: 0.8rem; font-weight: 500; line-height: 1.25; cursor: pointer; text-align: left;
}
.cuest-calc-btn.cuest-calc-hecho { color: var(--green); }
@media (hover: hover) { .cuest-calc-btn:hover { border-color: var(--accent); } }
.psico-herr + .psico-herr { margin-top: 8px; }
.psico-herr:first-of-type { margin-top: 6px; }
@media print { .cuest-btn, .cuest-f5-abrir, .cuest-calc { display: none !important; } }

  /* ─── Fase 6 «Plan de tratamiento» (opcional; plan.js) ─────────── */
  .phase-step-opcional .phase-step-num { border-style: dashed; }
  .plan-entrada { display: flex; justify-content: center; margin: 1rem 0 0; }
  .plan-entrada .btn-text-short { display: none; }
  @media (max-width: 480px) {
    .plan-entrada .btn-text-full { display: none; }
    .plan-entrada .btn-text-short { display: inline; }
    .plan-entrada .btn { width: 100%; }
  }
  .plan-aviso {
    font-size: 0.8rem; color: var(--text2); line-height: 1.55;
    border-left: 3px solid var(--accent); padding: 4px 0 4px 10px; margin: 0 0 0.75rem;
  }
  .plan-ayuda { font-size: 0.78rem; color: var(--text3); line-height: 1.5; margin: 0 0 0.6rem; }
  .plan-hips { display: flex; flex-direction: column; gap: 6px; }
  .plan-hip .option-btn { width: 100%; text-align: left; }
  .plan-hip-no .option-btn { opacity: 0.55; cursor: not-allowed; }
  .plan-hip-motivo { font-size: 0.72rem; color: var(--orange); margin: 2px 0 0 4px; }
  .plan-hip-orden { color: var(--accent2); font-size: 0.75rem; }
  .plan-campo { margin: 0.75rem 0 0; }
  .plan-campo-et {
    display: block; font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--accent); margin: 0.9rem 0 6px;
  }
  .plan-calc { text-transform: none; letter-spacing: 0; color: var(--text3); font-family: 'Outfit', sans-serif; font-size: 0.75rem; }
  .plan-dosifica { font-size: 0.82rem; color: var(--text2); background: var(--surface2); border-radius: var(--radius); padding: 6px 10px; margin: 0 0 0.6rem; }
  .plan-niveles { margin: 0.25rem 0 0.5rem; }
  .plan-niveles .option-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .plan-escalon, .plan-bloque {
    background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius);
    padding: 1rem; margin: 0.75rem 0; font-size: 0.85rem; color: var(--text2); line-height: 1.6;
  }
  .plan-escalon-tit { color: var(--text); font-weight: 600; margin-bottom: 4px; }
  .plan-bloques { display: flex; flex-direction: column; }
  .plan-bloque { margin: 0 0 0.6rem; }
  .plan-bloque-cab { color: var(--text); font-weight: 600; margin-bottom: 4px; }
  .plan-bloque-min {
    font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--accent2);
    border: 1px solid var(--border2); border-radius: 6px; padding: 1px 6px; margin-right: 6px; font-weight: 400;
  }
  .plan-bloque-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
  .plan-duracion {
    margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
    font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--text3); font-weight: 400;
  }
  .plan-duracion input {
    width: 3.2rem; padding: 4px 6px; font: inherit; font-size: 0.8rem; color: var(--text);
    background: var(--surface); border: 1px solid var(--border2); border-radius: 6px; text-align: right;
  }
  .plan-chip {
    font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 1px; text-transform: uppercase;
    color: var(--orange); border: 1px solid var(--orange); border-radius: 6px; padding: 1px 6px; margin-left: 6px;
    white-space: nowrap; vertical-align: middle;
  }
  .plan-ayuda-aviso { color: var(--orange); }
  .plan-enlace {
    background: none; border: none; padding: 0; font: inherit; color: var(--accent);
    cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
  }
  .plan-int-hip { color: var(--text); font-size: 0.8rem; margin: 6px 0 4px; }
  .plan-lista { margin: 4px 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--text2); line-height: 1.6; }
  .plan-sub {
    font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--accent2); margin: 1rem 0 4px;
  }
  .plan-registro { margin: 1rem 0 0; font-size: 0.85rem; color: var(--text2); }
  .plan-registro summary { cursor: pointer; color: var(--accent); }
  #phase6 .summary-row .summary-value { text-align: right; }


/* «Herramientas» (cabecera): en ≤768 px agrupa tiempos de tejido,
   cuestionarios y «Preguntar a la IA» (decisión del usuario, 2026-10) */
.herramientas-btn { display: none; }
@media (max-width: 768px) {
  .app-header .herramientas-btn { display: flex; }
  .app-header .cond-btn, .app-header .farm-btn, .app-header .ejercicio-btn, .app-header .tejidos-btn, .app-header .cuest-btn, .app-header .pregunta-ia-btn { display: none; }
}
.in-hub .herr-op-ia { display: none; }
@media print { .herramientas-btn { display: none !important; } }
/* «‹ Herramientas»: solo en la hoja abierta desde ese menú (body.herr-volver,
   app.js), para volver a él sin el atrás del sistema (iOS instalada no lo tiene) */
.herr-volver-btn { display: none; }
body.herr-volver .herr-volver-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: -6px 0 4px -6px; padding: 0 8px;
  background: none; border: none; border-radius: 8px; color: var(--accent); font: inherit; font-size: 0.85rem; cursor: pointer;
}
body.herr-volver .herr-volver-btn span { font-size: 1.2rem; line-height: 1; }
@media (hover: hover) { body.herr-volver .herr-volver-btn:hover { background: var(--hover-tint); } }
@media print { .herr-volver-btn { display: none !important; } }

/* Una sola X en toda la app (decisión del usuario, 2026-10): el mismo icono SVG
   (.icono-x). Sin borde cuando cierra algo flotante (aviso de versión, panel del
   razonamiento, banner de traducción); con borde cuando quita algo del contenido
   y va junto a otros botones con borde («Quitar P2», junto a «Hacer principal») */
.icono-x { display: block; flex-shrink: 0; }

/* ─── Ficha flotante (ficha.js) y citas (lib/citas.js) ───
   Una sola ficha para toda la app: la de las citas y la de las barras de Tiempos de
   tejido. Fija, sobre paneles y diálogos, con 16 px de margen. */
.ficha-flotante { position: fixed; z-index: 1000; width: max-content; max-width: min(380px, calc(100vw - 32px)); padding: 10px 12px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border2); box-shadow: var(--modal-shadow); color: var(--text); font-size: 0.78rem; line-height: 1.35; }
.ficha-flotante[hidden] { display: none; }
@media print { .ficha-flotante { display: none !important; } }

/* Cita en el texto: solo autor y año, tocable; la cita entera va en la ficha */
.cita { display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--text3); text-underline-offset: 3px; border-radius: 3px; }
.cita[aria-expanded="true"] { color: var(--accent); text-decoration-color: var(--accent); }
.cita:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: hover) { .cita:hover { color: var(--accent); text-decoration-color: var(--accent); } }
/* En táctil, el área de toque de cada cita crece con un ::after invisible que se sale
   4 px por arriba y por abajo, no con más interlineado ni padding: con line-height 2.1
   las líneas de fuentes que envuelven quedaban muy separadas (decisión del usuario,
   2026-10; mismo arreglo que las fuentes de los tiempos de tejido y la «Anatomía») */
@media (pointer: coarse) {
  .cita { position: relative; }
  .cita::after { content: ''; position: absolute; inset: -4px 0; }
}
.cita-ficha .cita-ficha-texto { overflow-wrap: anywhere; }
.cita-ficha .cita-ficha-titulo { margin-top: 6px; color: var(--text2); font-style: italic; overflow-wrap: anywhere; }
.cita-ficha .cita-ficha-pub { margin-top: 2px; color: var(--text3); font-size: 0.72rem; overflow-wrap: anywhere; }
.cita-ficha .cita-ficha-enlace { display: inline-flex; align-items: center; min-height: 32px; margin-top: 6px; color: var(--accent); font-weight: 600; text-decoration: none; }
@media (pointer: coarse) { .cita-ficha .cita-ficha-enlace { min-height: 40px; } }
.cita-ficha .cita-ficha-sin { margin-top: 6px; color: var(--text3); font-size: 0.72rem; }
.cita-resto { display: none; }
.cita-pegada { white-space: nowrap; }
/* Al imprimir, la cita entera: la forma corta y su resto, o data-cita si la forma
   corta está abreviada con «…» */
@media print {
  .cita { text-decoration: none; }
  .cita-resto { display: inline; }
  .cita-abreviada .cita-corta { display: none; }
  .cita-abreviada::before { content: attr(data-cita); }
}

/* ── Disautonomía / POTS (Fase P, docs/pots.md) ──
   Tarjeta de la fase 1 (reutiliza .hm-subtipo), bloque del sistema de la
   fase 2 (patrón de sospecha y prueba de bipedestación activa), notas de las
   fases 3, 4 y 4b y recuadro de la fase 5. Lo activa body.disautonomia
   (_pintarDsUI en app.js). */
.ds-bloque:empty { display: none; }
.ds-bloque { margin-top: 1rem; }
.ds-nota { margin: 8px 0; font-size: 0.8rem; line-height: 1.45; color: var(--text2); border-left: 2px solid var(--orange); padding-left: 8px; }
.ds-prep { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.ds-tabla { display: grid; grid-template-columns: minmax(52px, auto) repeat(3, minmax(0, 1fr)) 44px; gap: 6px 6px; align-items: center; margin: 8px 0; }
.ds-tabla-cab { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--text3); text-align: center; }
.ds-tabla-cab:first-child { text-align: left; }
.ds-fila-et { font-size: 0.8rem; color: var(--text2); }
.ds-tabla input[type="number"] { width: 100%; min-width: 0; min-height: 40px; padding: 6px 4px; text-align: center; font-size: 0.9rem; }
.ds-tabla .ds-sint { display: flex; justify-content: center; align-items: center; min-height: 40px; }
.ds-tabla .ds-sint input { width: 20px; height: 20px; accent-color: var(--orange); }
.ds-fase5 > div > div { margin-top: 4px; }
.ds-reloj { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--border2); border-radius: 10px; background: var(--surface2); }
.ds-reloj-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ds-reloj-fase { font-family: 'DM Mono', monospace; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); }
.ds-reloj-tiempo { font-family: 'DM Mono', monospace; font-size: 1.6rem; font-variant-numeric: tabular-nums; color: var(--text); }
.ds-reloj-toca { margin-top: 4px; font-weight: 600; color: var(--accent); }
.ds-reloj-sig { margin-top: 4px; font-size: 0.85rem; color: var(--text2); }
.ds-reloj-toca:empty, .ds-reloj-sig:empty { display: none; }
.ds-reloj-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ds-reloj-botones:first-child { margin-top: 0; }
.ds-reloj-btn { flex: 1 1 auto; min-height: 44px; padding: 10px 16px; }
.ds-fila-et.ds-fila-toca { color: var(--accent); font-weight: 600; }
.ds-tabla input.ds-fila-toca { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ds-toma { display: block; font-size: 0.68rem; font-weight: 400; color: var(--orange); }
@media print { .ds-reloj { display: none; } }

/* Fármacos que toma (paso 3 de la farmacología, docs/farmacos-paciente.md):
   chips como los de las condiciones especiales (.hm-subtipos); el origen
   («· tarjeta Lupus») cuando el dato vive en otra tarjeta */
#cardFarmacos .fm-origen { font-weight: 400; color: var(--text3); }
#cardFarmacos .hm-nota[hidden] { display: none; }
.farm-filtro { margin-bottom: 8px; }
.farm-paciente { margin-top: 0; }

/* Efectos del ejercicio (lib/ejercicio.js): el mismo diálogo que «Condiciones
   especiales» (.cond-panel); un bloque por <details>, apartados y chips de nivel */
.ej-bloque { border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); }
.ej-bloque + .ej-bloque { margin-top: 10px; }
.ej-bloque > summary { list-style: none; cursor: pointer; padding: 12px 32px 12px 12px; position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 44px; }
.ej-bloque > summary::-webkit-details-marker { display: none; }
.ej-bloque > summary::after { content: '▾'; position: absolute; right: 12px; top: 12px; color: var(--text3); }
.ej-bloque[open] > summary::after { content: '▴'; }
.ej-nombre { font-size: 0.95rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.ej-resumen { font-size: 0.78rem; color: var(--text2); line-height: 1.4; }
.ej-cuerpo { padding: 0 12px; }
.ej-apartado + .ej-apartado { margin-top: 12px; }
.ej-apartado-titulo { margin: 0 0 4px; font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text3); font-weight: 500; }
.ej-apartado p { margin: 0 0 6px; font-size: 0.85rem; line-height: 1.5; color: var(--text); }
.ej-mas { margin: 8px 0 6px; }
.ej-mas > summary { cursor: pointer; font-size: 0.78rem; color: var(--accent); min-height: 32px; display: flex; align-items: center; }
.ej-mas p { margin: 0 0 6px; font-size: 0.85rem; line-height: 1.5; color: var(--text2); }
.ej-fuentes { padding: 10px 12px 12px; font-size: 0.72rem; color: var(--text3); }
.ej-fuentes-et { font-family: 'DM Mono', monospace; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 4px; }
.ej-grupo { margin: 18px 0 6px; font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); font-weight: 500; }
.ej-pendientes-lista { margin: 0 0 6px; padding-left: 18px; font-size: 0.82rem; color: var(--text2); line-height: 1.5; }
.ej-pendientes-nota { margin: 0 0 8px; font-size: 0.78rem; color: var(--text3); line-height: 1.45; }
.ej-niveles { margin: 0 0 12px; font-size: 0.8rem; color: var(--text2); }
.ej-niveles > summary { cursor: pointer; color: var(--accent); min-height: 32px; display: flex; align-items: center; }
.ej-niveles ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; line-height: 1.4; }
.ej-nivel { display: inline-block; font-family: 'DM Mono', monospace; font-size: 0.64rem; letter-spacing: 0.4px; text-transform: uppercase; line-height: 1; padding: 3px 6px; border-radius: 999px; border: 1px solid var(--border2); background: transparent; color: var(--text2); vertical-align: 1px; }
button.ej-nivel { cursor: pointer; position: relative; font-family: 'DM Mono', monospace; }
button.ej-nivel::after { content: ''; position: absolute; inset: -10px -4px; }
.ej-nivel-clinico { border-color: var(--green); color: var(--green); }
.ej-nivel-mecanismo { border-color: var(--orange); color: var(--orange); }
.ej-nivel-discutido { border-color: var(--red); color: var(--red); }
.ej-ficha-flotante { max-width: 320px; }
.ej-ficha p { margin: 4px 0 0; font-size: 0.82rem; line-height: 1.45; }
@media print { .ejercicio-btn { display: none !important; } }

/* ── Modo guía con grabadora externa (docs/modo-guia.md) ─────────────────── */
.solo-guia { display: none; }
.modo-guia .solo-guia { display: block; }
.guia-oculto { display: none !important; }
.in-hub .registro-bloque { display: none; }
.registro-bloque { margin-top: 14px; }
.registro-bloque .form-label { margin-bottom: 6px; }
/* La frase para decir en voz alta: sin borde discontinuo, que es de «Refiere el paciente» */
.verbal { background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; padding: 12px; margin-bottom: 1rem; }
.verbal-frase { font-size: 0.95rem; line-height: 1.45; color: var(--text); }
.verbal-ancla { margin-top: 6px; font-size: 0.8rem; line-height: 1.4; color: var(--text2); }
.verbal-check { margin-top: 10px; min-height: 44px; }
.fp-item .verbal { margin-bottom: 0; }
.test-ancla { margin-top: 8px; font-size: 0.78rem; line-height: 1.4; color: var(--text2); }
/* Teclado numérico */
.teclado-panel:focus { outline: none; }
.teclado-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.teclado-cabecera .session-panel-title { margin-bottom: 0; min-width: 0; }
.teclado-valor { font-family: 'DM Mono', monospace; font-size: 1.8rem; color: var(--accent); min-width: 3ch; text-align: right; }
.teclado-teclas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.teclado-tecla { min-height: 56px; font-size: 1.4rem; font-family: inherit; background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.teclado-tecla:active { background: var(--surface3); }
.teclado-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.teclado-acciones .btn { min-height: 48px; }
@media print { .registro-bloque, .verbal, .test-ancla, .teclado-panel, #tecladoOverlay { display: none !important; } }
/* Un botón solo no deja hueco al lado en pantalla estrecha: ocupa todo el ancho */
@media (max-width: 520px) { .verbal-check { width: 100%; } }

/* Enlace «Para explicárselo al paciente →» del bloque «Educación» de la fase 6 (lib/ejercicio.js) */
.plan-ejercicio { margin-top: 6px; }
.plan-ejercicio .plan-ayuda { display: block; margin: 2px 0 0; }
.plan-ejercicio .plan-enlace-otro { display: block; margin: 6px 0 0; font-size: 0.78rem; text-align: left; }
.plan-ejercicio .plan-ayuda-otro { font-size: 0.74rem; }
/* El mismo enlace en los recuadros de lupus y osteoporosis de la fase 5 */
.cond-ejercicio .sint-recordatorio-ir { margin-top: 4px; padding-bottom: 0; }
.cond-ejercicio-ayuda { display: block; font-size: 0.78rem; color: var(--text3); }
@media print { .plan-ejercicio, .cond-ejercicio { display: none !important; } }