/* Vademécum Brisa — identidad institucional Brisa / PAE (L2c).
   Estética del sitio del Departamento Médico: fondo blanco SIEMPRE (sin tema
   oscuro), tonos de verde, títulos grandes en gris muy oscuro, subtítulos en
   verde, tarjetas blancas con borde superior verde, esquinas 16 px y sombras
   suaves. Tipografía nativa del sistema (SF Pro en iPhone/Mac, Segoe UI en
   Windows, Roboto en Android — L18a); mono solo para códigos. Mobile-first,
   WCAG 2.1 AA. Tokens y ratios en docs/DISENO.md. */

:root {
  /* Sistema «claro» (L22a): superficies blancas, profundidad por luz y
     sombra suave, color solo como acento. Los tokens históricos se remapean
     a los nuevos para que toda la app herede. */
  --superficie: #FFFFFF;
  --superficie-2: #F7FBF4;
  --lavado-arriba: #F3F8EF;
  --hairline: rgb(46 99 32 / 0.12);
  --sombra-1: 0 1px 2px rgb(16 35 20 / 0.05), 0 6px 18px rgb(16 35 20 / 0.06);
  --sombra-2: 0 2px 4px rgb(16 35 20 / 0.06), 0 14px 32px rgb(16 35 20 / 0.10);
  --luz-interior: inset 0 1px 0 rgb(255 255 255 / 0.7);
  --tinta-secundaria: #4E5D53;   /* 6,4:1 sobre blanco */

  --blanco: var(--superficie);
  --superficie-suave: var(--superficie-2);
  --borde: var(--hairline);
  --borde-control: #6B7D71;   /* límites de inputs: 4,4:1 (WCAG 1.4.11) */
  --verde-brisa: #68B848;     /* marca: bordes, íconos, barras; NUNCA texto sobre blanco */
  --verde-texto: #3B7A2A;     /* enlaces, subtítulos, activos: 5,3:1 sobre blanco */
  --verde-oscuro: #2E6320;    /* hover, botones sólidos, anillo de foco */
  --verde-brisa-banda: #5AA33A; /* verde Brisa profundizado a 3,1:1 con blanco: bandas de sección (L16b) */

  /* Sistema de tarjeta semántica (L17a): cada tarjeta declara su color con
     --sem-rgb (insignia y tinte del hairline al 25 %) y --sem-texto (título,
     AA ≥ 4,5:1 sobre blanco). La sombra es doble (ambiente + contacto) con
     luz interior de 1 px en el canto superior. */
  --sem-rgb: 91 107 99;            /* neutro por defecto */
  --sem-texto: #5B6B63;
  --sombra-sem: 0 1px 2px rgb(16 35 20 / 0.05), 0 6px 18px rgb(16 35 20 / 0.06),
                inset 0 1px 0 rgb(255 255 255 / 0.7); /* sombra-1 + luz interior */
  --verde-tenue: #EAF5E6;     /* chips y recuadros, con texto --tinta */
  --tinta: #16241F;
  --titulo: #16241F;
  --tinta-suave: var(--tinta-secundaria);
  --ambar-texto: #8A5A00;
  --ambar-fondo: #FFF4D6;
  --ambar-borde: #D9A93F;
  --rojo-texto: #A8271E;
  --grisazul-texto: #44566B;   /* aviso de envase (L13b) */
  --grisazul-fondo: #EEF2F6;
  --rojo-fondo: #FDECEA;
  --resaltado: #FFF0B8;
  --sombra: var(--sombra-1);
  --sombra-media: var(--sombra-2);
  --transicion: 180ms ease;
  --transicion-presion: 120ms ease; /* L23d: presión de controles */

  --fuente-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --alto-cabecera: 56px;
  /* Con viewport-fit=cover la página corre bajo la isla/notch: todo offset
     usa la altura TOTAL (cabecera + inset superior del dispositivo). */
  --alto-cabecera-total: calc(var(--alto-cabecera) + env(safe-area-inset-top, 0px));
  --alto-nav-inferior: calc(4rem + env(safe-area-inset-bottom, 0px));
  --radio: 16px;
}

@media (min-width: 900px) {
  :root { --alto-cabecera: 64px; }
}

* { box-sizing: border-box; }

/* Doble toque: navegar, no hacer zoom. El pellizco sigue funcionando y no hay
   ningún user-scalable=no (WCAG 1.4.4). */
/* L18c: el campo enfocado nunca queda bajo la cabecera ni la barra
   pegajosa; el teclado de iOS lo trae a la vista con margen. */
input, select, textarea {
  scroll-margin-top: calc(var(--alto-cabecera-total) + 3.4rem);
  scroll-margin-bottom: 5rem;
}

html, body, a, button, input, select, textarea, summary, label {
  touch-action: manipulation;
}

html {
  height: 100%;
  font-size: 106.25%; /* 1rem = 17 px */
}

body {
  margin: 0;
  min-height: 100%;
  padding-top: var(--alto-cabecera-total);
  background: linear-gradient(180deg, var(--lavado-arriba) 0, var(--superficie) 480px) no-repeat var(--superficie); /* L22a */
  color: var(--tinta);
  font-family: var(--fuente-ui);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* Patrón decorativo de red molecular (nodos y líneas finas), fijo y al 5 %.
   Decorativo puro: aria-hidden en el HTML, apagado en impresión. */
.fondo-red {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  color: var(--verde-brisa);
  opacity: 0.05;
}
/* L21a: en el INICIO la retícula sube un escalón (nodos 0,14; trazos ~0,11)
   con atenuación radial hacia los bordes para no competir con los tiles.
   El resto de la app conserva el 0,05 sobrio. */
body.en-inicio .fondo-red {
  opacity: 0.14;
  -webkit-mask-image: radial-gradient(ellipse 75% 62% at 50% 40%, #000 0, rgb(0 0 0 / 0.5) 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 62% at 50% 40%, #000 0, rgb(0 0 0 / 0.5) 62%, transparent 100%);
}
body.en-inicio .fondo-red path { opacity: 0.79; } /* trazos: 0,14 × 0,79 ≈ 0,11 */

/* Ícono en círculo verde-tenue (sistema de iconografía L5). */
/* Sistema de íconos L7 (sprite Health Icons + Lucide + siluetas propias).
   Duotono: eco en verde-brisa al 25 % apenas corrido + tinta del contexto.
   Los de trazo (acciones de interfaz) quedan monocromos. */
.icono { width: 24px; height: 24px; flex: none; display: block; }
.icono-duo .uso-eco {
  fill: var(--verde-brisa);
  opacity: 0.25;
  transform: translate(4%, 4%);
  transform-box: view-box;
}
.icono-duo .uso-tinta { fill: currentColor; }
.icono-trazo {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icono-volteado { transform: scaleX(-1); }
/* Bicolor (cápsula): los colores viven en el símbolo como var(--token)
   porque las clases CSS no cruzan el shadow tree de <use>. */

.circulo-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--verde-tenue);
  color: var(--verde-oscuro);
}
.circulo-icono svg { width: 24px; height: 24px; }
.circulo-icono-chico { width: 30px; height: 30px; }
.circulo-icono-chico svg { width: 20px; height: 20px; }
.circulo-icono-grande { width: 84px; height: 84px; }
.circulo-icono-grande svg { width: 56px; height: 56px; }

/* Blob orgánico del lanzador (L13a: fila horizontal, ícono de 34 px). */
.circulo-icono-blob {
  width: 52px;
  height: 52px;
  border-radius: 46% 54% 55% 45% / 48% 43% 57% 52%;
  transition: border-radius var(--transicion), transform var(--transicion);
}
.circulo-icono-blob svg { width: 34px; height: 34px; }

/* Pila de íconos de presentación (uno por forma, con leve solape). */
.pila-iconos { display: inline-flex; }
.pila-iconos .circulo-icono + .circulo-icono {
  margin-left: -14px;
  -webkit-mask: radial-gradient(circle 22px at -6px 50%, transparent 21px, #000 22px);
  mask: radial-gradient(circle 22px at -6px 50%, transparent 21px, #000 22px);
}

/* ------------------------------------------------------------- utilidades */

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pre-linea { white-space: pre-line; }

/* Prosa justificada con separación silábica (L18a): solo párrafos corridos
   de ficha, guardia, equipos e infusiones. Títulos, bandas, chips, tablas y
   listas siguen a la izquierda. Escala de ritmo en docs/DISENO.md. */
.prosa-justificada,
.seccion-ficha .pre-linea,
.dosis-texto,
.equipo-texto,
.equipo-alarma-detalle,
.guardia-paso-texto,
.guardia-farmaco .pre-linea {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  text-wrap: pretty;
  line-height: 1.6;
}
/* Prosa larga en párrafos (L19c): separación 0,9 em, separador original
   oculto (conserva la identidad del texto) y tema clínico resaltado. */
.parrafo-prosa { margin: 0 0 0.9em; }
.prosa-seccion > .parrafo-prosa:last-child,
.guardia-paso-contenido > .parrafo-prosa:last-child { margin-bottom: 0; }
.separador-parrafo { display: none; }
.tema-clinico { font-weight: 600; color: var(--verde-oscuro); }

/* Excepción documentada (L18a): Acción farmacológica es un resumen
   telegráfico con sustantivos en mayúscula que Chrome no separa en sílabas;
   justificado deja ríos. Queda a la izquierda. */
#seccion-accion_farmacologica .pre-linea { text-align: left; }

.codigo {
  font-family: var(--fuente-mono);
  font-size: 0.88em;
  letter-spacing: 0.02em;
}

.calc-cifra, .calc-cifra-secundaria, .calc-campo input {
  font-variant-numeric: tabular-nums;
}

.cifra { font-weight: 600; font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 3px solid var(--verde-oscuro);
  outline-offset: 2px;
  border-radius: 3px;
}
:focus {
  scroll-margin-top: calc(var(--alto-cabecera-total) + 4.5rem);
  scroll-margin-bottom: calc(var(--alto-nav-inferior) + 1rem);
}

.saltar {
  position: fixed;
  left: 0.75rem;
  top: -3.5rem;
  z-index: 60;
  padding: 0.5rem 0.85rem;
  background: var(--blanco);
  color: var(--verde-texto);
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
  text-decoration: none;
  transition: top 120ms ease;
}
.saltar:focus { top: 0.75rem; }

.mensaje { color: var(--tinta-suave); }

h1, h2, h3 { color: var(--titulo); }

/* Título de sección: versalitas 13 px en verde. */
.titulo-seccion {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.8rem;
  padding: 0.5rem 0.8rem;
  font-size: max(1.118rem, 18.7px); /* 19 px; piso de texto grande aun en «Chico» (L17g) */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--blanco);
  background: var(--verde-brisa-banda);
  border-radius: 10px;
}

.titulo-vista {
  margin: 0.5rem 0 1rem;
  font-size: 2.353rem;  /* 40 px móvil */
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}
@media (min-width: 900px) {
  .titulo-vista { font-size: 2.824rem; } /* 48 px escritorio */
}
.titulo-vista:focus { outline: none; }

/* Encabezado de vista de listado (L19b): 34 px con bajada en tinta suave. */
.encabezado-vista { margin: 0.5rem 0 1.1rem; }
.encabezado-vista .titulo-vista { margin: 0 0 0.15rem; font-size: 2rem; /* 34 px */ }
.subtitulo-vista { margin: 0; color: var(--tinta-suave); font-size: 0.95rem; }

h2 { font-size: 1.529rem; }              /* 26 px móvil */
@media (min-width: 900px) { h2 { font-size: 1.882rem; } } /* 32 px */

a { color: var(--verde-texto); }
a:hover { color: var(--verde-oscuro); }

mark {
  background: none;
  color: var(--verde-oscuro);
  font-weight: 600;
  border-radius: 2px;
}

/* --------------------------------------------------------------- cabecera */

.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 45;
  height: var(--alto-cabecera-total);
  padding-top: env(safe-area-inset-top, 0px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  background: var(--blanco);
  border-bottom: 1px solid transparent;
  transition: background var(--transicion), border-color var(--transicion), backdrop-filter var(--transicion);
}
.cabecera.con-scroll {
  background: rgb(255 255 255 / 0.82);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border-bottom-color: var(--borde);
}

.marca { display: inline-flex; align-items: center; justify-self: start; }
/* Cabecera (L13a): una sola fila con los dos logos a la MISMA altura visual.
   Los .webp vienen recortados al ras —la tinta ocupa el 98,1 % del alto del
   archivo en Brisa y el 98,9 % en PAE (L10d)—, así que igualar la altura CSS
   iguala la tinta a la vista: 26 px en móvil, 36 px en escritorio. El pie y la
   impresión conservan su propio ajuste con más especificidad. */
/* L16g: iguales por altura de mayúsculas, no por alto de archivo.
   BRISA capitaliza 71/107 = 0,664 de su alto; ENERGY, 32/95 = 0,337:
   con el mismo alto CSS, ENERGY quedaba a la mitad. Cap objetivo 12,8 px
   en móvil → 12,8/0,664 y 12,8/0,337. */
.logo-brisa { height: 25.2px; width: auto; display: block; } /* área de tinta igualada (L20a) */
.logo-pae { height: 31.4px; width: auto; display: block; justify-self: end; } /* L20a */

/* Título institucional al centro de la cabecera (L13a). Decorativo: cada
   vista aporta su h1; en anchos muy chicos cede antes que los logos. */
.cabecera-titulo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 1.412rem;   /* 24 px (L20a) */
  font-weight: 700;
  color: var(--verde-brisa-banda);
  letter-spacing: -0.02em;
}

/* A 320 px se aprieta solo el marco; los logos no se tocan. */
@media (max-width: 359px) {
  .cabecera { padding: 0 0.5rem; gap: 0.5rem; }
}

@media (min-width: 900px) {
  .cabecera { padding: 0 1.5rem; }
  /* Cap objetivo 16 px en escritorio. */
  .logo-brisa { height: 31.5px; } /* área de tinta (L20a) */
  .logo-pae { height: 39.2px; }
  .cabecera-titulo { font-size: 1.529rem; } /* 26 px (L20a) */
}

/* ------------------------------------------------------------- splash (L20a) */

#splash {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background: var(--blanco);
  opacity: 1;
  transition: opacity 200ms ease;
}
#splash.splash-fuera { opacity: 0; pointer-events: none; }
#splash img { width: auto; height: 72px; }
.splash-titulo {
  margin: 0.3rem 0 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--verde-brisa-banda);
}
.splash-marca { margin: 0; font-size: 14px; color: var(--tinta-suave); }
@media (prefers-reduced-motion: reduce) { #splash { transition: none; } }

/* ---------------------------------------------------------- disposición */

.disposicion {
  max-width: 1100px;
  margin: 0 auto;
  /* L19c: lateral de 20 px en móvil (escala en DISENO.md). */
  padding: 1rem 20px calc(var(--alto-nav-inferior) + 2rem);
}

/* Rail de navegación: tarjetas blancas con ícono verde y rótulo. */
.rail { display: none; }

.rail-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
  color: var(--tinta);
  text-decoration: none;
  font-size: 0.765rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion), background var(--transicion);
}
.rail-item svg { width: 32px; height: 32px; flex: none; color: var(--verde-brisa); }
.rail-item:hover {
  border-color: var(--verde-brisa);
  color: var(--verde-texto);
  transform: translateY(-2px);
  box-shadow: var(--sombra-media);
}
.rail-item[aria-current="page"] {
  color: var(--verde-texto);
  background: var(--verde-tenue);
  border-color: var(--verde-brisa);
}
.rail-item[aria-disabled="true"] {
  color: var(--tinta-suave);
  cursor: not-allowed;
}
.rail-item[aria-disabled="true"] svg { color: var(--tinta-suave); }

/* 900–1199 px: navegación como fila bajo la cabecera. */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .rail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
  }
}

/* ≥1200 px: rail lateral izquierdo fijo + contenido. */
@media (min-width: 1200px) {
  .disposicion {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    padding-bottom: 3rem;
  }
  .rail {
    display: grid;
    gap: 0.6rem;
    position: sticky;
    top: calc(var(--alto-cabecera-total) + 1rem);
  }
  /* L22e: con rail e índice de secciones a la izquierda, la columna de
     lectura de la ficha quedaba en ~600 px; 1180 px le devuelve ~690. */
  .disposicion { max-width: 1180px; }
}

main { min-width: 0; }

@keyframes entrada-vista {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.anima-entrada { animation: entrada-vista 200ms ease both; }
main:focus { outline: none; }

@media (min-width: 900px) {
  .disposicion { padding-bottom: 3rem; }
}

/* ------------------------------------------------- navegación inferior móvil */

.nav-inferior {
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--blanco);
  border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* El botón de Inicio sobresale por encima del borde superior. */
  overflow: visible;
  transition: background var(--transicion), backdrop-filter var(--transicion);
}
.nav-inferior.con-scroll {
  background: rgb(255 255 255 / 0.86);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}
.nav-inferior a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem;
  padding: 0.5rem 0.25rem 0.45rem;
  min-height: 44px;
  color: var(--tinta-suave);
  font-size: 0.68rem;
  font-weight: 600;
  text-decoration: none;
}
/* L22c: cuatro accesos con ícono de 24 px y trazo 1,75; inactivo en tinta
   secundaria, activo en verde-oscuro. */
.nav-inferior svg { width: 24px; height: 24px; color: var(--tinta-secundaria); stroke-width: 1.75; }
.nav-inferior a[aria-current="page"] { color: var(--verde-oscuro); }
.nav-inferior a[aria-current="page"] svg { color: var(--verde-oscuro); }
.nav-inferior a[aria-current="page"] .nav-inicio-circulo svg { color: #FFFFFF; } /* la casa sigue blanca en Inicio */

/* Inicio: botón circular que sobresale sobre la barra. */
.nav-inicio { position: relative; }
.nav-inicio-circulo {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--verde-brisa);
  border: 3px solid var(--blanco);
  box-shadow: var(--sombra-1); /* L22c */
  transition: transform 120ms ease, background var(--transicion), border-color var(--transicion);
}
/* L22c: casa blanca de trazo fino (1,75) con sombra de trazo suave de 1 px
   (rgb(16 35 20 / .35)) en vez del contorno grueso; blanco sobre #68B848 da
   2,46:1 y la sombra separa el glifo — el rótulo «Inicio» acompaña. */
.nav-inicio-circulo svg { width: 28px; height: 28px; color: #FFFFFF; stroke-width: 1.75; filter: drop-shadow(0 1px 1px rgb(16 35 20 / 0.35)); }
.nav-inicio:active .nav-inicio-circulo { transform: translateX(-50%) scale(0.94); }
/* Activo (L20a): el círculo conserva el verde Brisa con ícono verde-oscuro;
   el anillo pasa de blanco a verde-tenue como marca de página actual. */
.nav-inicio[aria-current="page"] .nav-inicio-circulo { border-color: var(--verde-tenue); }

@media (min-width: 900px) {
  .nav-inferior { display: none; }
}

/* Ajustes en Acerca de (L13a): filas rótulo + control. */
.ajuste-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.4rem 0 0.9rem;
}
.ajuste-rotulo { font-weight: 600; color: var(--titulo); }
.acerca-ajustes .control-texto { gap: 0.5rem; }
.acerca-ajustes .texto-paso {
  min-width: 4.2em;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tinta-suave);
}

/* ------------------------------------------------------------------ inicio */

/* Lanzador minimalista: corazón, título y cuatro accesos. En #/ el inicio
   ES la navegación: el rail y la barra inferior se ocultan. */
body.en-inicio .rail { display: none; }
/* Sin rail no hay grilla de dos columnas: el lanzador se centra solo.
   El colchón inferior de la disposición tampoco hace falta: el alto del
   inicio ya descuenta la barra (L18b: el inicio entra sin desplazamiento). */
body.en-inicio .disposicion { display: block; padding-bottom: 0; }
/* El degradado de fondo acompaña la ventana completa (sin corte a 480 px). */
body.en-inicio {
  background: linear-gradient(180deg, var(--lavado-arriba) 0, var(--superficie) 100vh) no-repeat var(--superficie); /* L22a */
}

.inicio-minimo {
  min-height: calc(100dvh - var(--alto-cabecera-total) - var(--alto-nav-inferior) - 1.6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  padding: 0.9rem 0 0.6rem; /* L18b: compacto */
}

.inicio-corazon {
  display: block;
  position: relative;
}
/* Halo radial verde-tenue muy suave detrás del corazón (L19a). */
.inicio-corazon::before {
  content: "";
  position: absolute;
  inset: -14px; /* L23a: el halo queda detrás del corazón, nunca bajo el título */
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 0.95) 0, rgb(255 255 255 / 0.55) 55%, transparent 70%);
  pointer-events: none;
}
.inicio-corazon img { position: relative; }
.inicio-corazon img {
  display: block;
  width: auto;
  height: 56px; /* L23a: héroe compacto para que el panal 2-1-2-1 entre */
  animation: aparecer-corazon 500ms ease-out both;
}
@media (min-width: 900px) { .inicio-corazon img { height: 120px; } }
@keyframes aparecer-corazon {
  from { opacity: 0; }
  to { opacity: 1; }
}

.inicio-bajada { position: relative; margin: 0.2rem 0 0; font-size: 0.824rem; /* 14 px (L23a) */ color: var(--tinta-secundaria); }
.inicio-titulo {
  position: relative; /* L23a: por encima del halo (antes el halo lo velaba a dos tonos) */
  margin: 0.45rem 0 0;
  font-size: 1.412rem; /* 24 px (L23a) */
  line-height: 1.1;
  letter-spacing: -0.035em; /* L19a: tracking ajustado sobre SF */
  font-weight: 700;
}
@media (min-width: 900px) { .inicio-titulo { font-size: 2.353rem; } }
.inicio-titulo:focus { outline: none; }
/* L22e: móvil apaisado (844×390): el héroe se achica para que la primera
   fila del panal asome sobre la barra sin desplazar. */
@media (orientation: landscape) and (max-height: 520px) {
  .inicio-minimo { padding: 0.3rem 0 0.2rem; }
  .inicio-corazon img { height: 40px; }
  .inicio-corazon::before { inset: -10px; }
  .inicio-titulo { margin-top: 0.3rem; font-size: 1.25rem; }
  .inicio-bajada { font-size: 0.8rem; }
  .inicio-tiles { margin-top: 0.5rem; }
}

/* ------------------------------------ panal hexagonal claro (L22b) */
/* Seis hexágonos de vértice arriba en panal real: móvil en filas 2-2-2 (la
   fila del medio desplazada media celda), escritorio 3+3. El clip vive en
   los pseudo-elementos (el elemento queda rectangular: el anillo de foco no
   se recorta). Relleno claro #FFFFFF→#EEF6E8 a 160°, hairline y sombra-1;
   ícono en verde Brisa dentro de un círculo blanco. Guardia es el único
   hexágono focal. Grid de medias-celdas × cuartos de alto: cada hexágono
   ocupa 2 columnas y 4 filas; las filas se traban con solape del 25 %. */
/* L24a: siete accesos. Móvil 2-3-2 (Buscar · A–Z / Por sistema · Guardia ·
   Comunicaciones / Infusiones · Equipos): tres filas trabadas = 2,5 alturas
   de hexágono, tres hexágonos por fila. Cada tile se ubica por su clase de
   destino (el DOM puede reordenarse por punto de quiebre para que el
   tabulador siga la lectura). Ancho: tres por fila con 12 px de calle;
   alto: 2,5 h en lo que queda tras cabecera, barra, héroe compacto y pie. */
.inicio-tiles {
  --hex-w: clamp(96px, min(calc((100vw - 52px) / 3), calc((100dvh - 372px) / 2.8868)), 150px);
  --hex-h: calc(var(--hex-w) * 1.1547);
  --hex-grad: linear-gradient(160deg, #FFFFFF 0%, #EEF6E8 100%);
  margin: 0.6rem 0 0;
  display: grid;
  grid-template-columns: repeat(6, calc(var(--hex-w) / 2));
  grid-template-rows: repeat(10, calc(var(--hex-h) / 4));
  gap: 0;
  justify-content: center;
}
.inicio-tiles .hex-buscar { grid-area: 1 / 2 / 5 / 4; }
.inicio-tiles .hex-az { grid-area: 1 / 4 / 5 / 6; }
.inicio-tiles .hex-sistemas { grid-area: 4 / 1 / 8 / 3; }
.inicio-tiles .hex-guardia { grid-area: 4 / 3 / 8 / 5; }
.inicio-tiles .hex-comunicaciones { grid-area: 4 / 5 / 8 / 7; }
.inicio-tiles .hex-infusiones { grid-area: 7 / 2 / 11 / 4; }
.inicio-tiles .hex-equipos { grid-area: 7 / 4 / 11 / 6; }
.tile-acceso {
  position: relative;
  width: calc(var(--hex-w) - 6px);
  height: calc(var(--hex-h) - 6px);
  justify-self: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  color: var(--tinta);
  text-decoration: none;
  text-align: center;
  filter: drop-shadow(0 1px 2px rgb(16 35 20 / 0.05)) drop-shadow(0 6px 18px rgb(16 35 20 / 0.06));
  transition: transform 160ms ease, filter 160ms ease;
}
.tile-acceso::before,
.tile-acceso::after {
  content: "";
  position: absolute;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
/* L24a: relieve — el anillo de 1 px sigue el polígono: luz blanca al 85 %
   arriba-izquierda, hairline en el medio y sombra rgb(16 35 20 / .10)
   abajo-derecha; la sombra-1 exterior la da el drop-shadow del tile. */
.tile-acceso::before { inset: 0; background: linear-gradient(135deg, rgb(255 255 255 / 0.85) 0%, rgb(46 99 32 / 0.16) 40%, rgb(46 99 32 / 0.16) 60%, rgb(16 35 20 / 0.10) 100%); }
.tile-acceso::after { inset: 1px; background: var(--hex-grad); transition: filter 160ms ease; }
.tile-acceso:hover { transform: translateY(-3px); filter: drop-shadow(0 2px 4px rgb(16 35 20 / 0.06)) drop-shadow(0 14px 32px rgb(16 35 20 / 0.10)); }
.tile-acceso:active { transform: scale(0.98); }
.tile-acceso:focus-visible { outline: 3px solid var(--verde-oscuro); outline-offset: 4px; }
/* Ícono en verde Brisa dentro de un círculo blanco con sombra-1. */
.tile-icono {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  color: var(--verde-brisa);
}
.tile-icono .icono { width: 30px; height: 30px; }
.tile-texto { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; gap: 2px; padding: 0 12%; }
.tile-titulo { font-size: 0.941rem; /* 16 px (L24a) */ font-weight: 700; line-height: 1.2; color: var(--tinta); -webkit-hyphens: manual; hyphens: manual; }
.tile-sub { font-size: 0.647rem; /* 11 px */ color: var(--tinta-secundaria); line-height: 1.25; }
/* L24a: en móvil el tile es ícono + título (sin subtítulo ni círculo). */
@media (max-width: 767.98px) {
  .tile-sub { display: none; }
  .tile-icono { width: auto; height: auto; background: none; box-shadow: none; }
  .tile-icono .icono { width: 32px; height: 32px; }
  .tile-texto { padding: 0 6%; }
  .tile-acceso { gap: 4px; }
}
/* L24a: acceso deshabilitado («Comunicaciones», sin ruta todavía). */
.tile-acceso.hex-inactivo { opacity: 0.65; cursor: default; }
.tile-acceso.hex-inactivo .tile-icono { color: var(--tinta-secundaria); }
.tile-acceso.hex-inactivo:hover { transform: none; filter: drop-shadow(0 1px 2px rgb(16 35 20 / 0.05)) drop-shadow(0 6px 18px rgb(16 35 20 / 0.06)); }
.tile-chip { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 99px; font-size: 0.647rem; /* 11 px */ font-weight: 600; line-height: 1.3; white-space: nowrap; color: var(--verde-texto); background: var(--verde-tenue); }
.sin-corte { white-space: nowrap; } /* L23a/L23c: «Índice A–Z» y la URL de Compartir no se parten */
/* L24a: con tres por fila el hexágono ya no depende de la altura en 375×667;
   bajo 400 px el tile inactivo (ícono + título + chip) achica su ícono. */
@media (max-width: 399.98px) {
  .tile-acceso.hex-inactivo .tile-icono .icono { width: 28px; height: 28px; }
  .tile-chip { margin-top: 1px; }
}
/* Guardia, único hexágono focal: degradé verde y contenido en blanco. El
   degradé pasa por #5AA33A y sigue hasta #3E7E29 en la mitad inferior,
   donde vive el texto, para que blanco 15/700 y 11 px rindan ≥4,5:1. */
.tile-acceso.hex-guardia { --hex-grad: linear-gradient(160deg, #7CC65A 0%, #5AA33A 22%, #3E7E29 42%, #2E6320 100%); color: #FFFFFF; }
.tile-acceso.hex-guardia .tile-icono { background: rgb(255 255 255 / 0.22); box-shadow: none; color: #FFFFFF; }
.tile-acceso.hex-guardia .tile-titulo,
.tile-acceso.hex-guardia .tile-sub { color: #FFFFFF; }
/* L23a: desde 768 px, pirámide invertida 3-2-1 centrada (Buscar · A–Z ·
   Por sistema / Infusiones · Equipos / Guardia): 2,5 alturas de hexágono.
   El hexágono se dimensiona por alto de ventana (100dvh − cabecera, héroe y
   pie ≈ 412 px) entre 150 y 184 px: a 1280×900 da 169 px y el inicio entra
   sin desplazamiento; en iPad vertical llega al tope de 184. */
/* L24a: escritorio 3+4 (Por sistema · Guardia · Comunicaciones / Buscar ·
   A–Z · Infusiones · Equipos, la fila de cuatro corrida media celda):
   1,75 alturas. Hexágono un 6 % mayor que en L23a: tope 195 px (184 × 1,06),
   limitado por cuatro por fila en iPad (728 px) y por el alto de ventana. */
@media (min-width: 768px) {
  .inicio-tiles {
    --hex-w: clamp(160px, min(calc((100vw - 40px) / 4), calc((100dvh - 412px) / 2.0207)), 195px);
    width: calc(var(--hex-w) * 4);
    grid-template-columns: repeat(8, calc(var(--hex-w) / 2));
    grid-template-rows: repeat(7, calc(var(--hex-h) / 4));
  }
  .inicio-tiles .tile-acceso { gap: 7px; }
  .inicio-tiles .hex-sistemas { grid-area: 1 / 2 / 5 / 4; }
  .inicio-tiles .hex-guardia { grid-area: 1 / 4 / 5 / 6; }
  .inicio-tiles .hex-comunicaciones { grid-area: 1 / 6 / 5 / 8; }
  .inicio-tiles .hex-buscar { grid-area: 4 / 1 / 8 / 3; }
  .inicio-tiles .hex-az { grid-area: 4 / 3 / 8 / 5; }
  .inicio-tiles .hex-infusiones { grid-area: 4 / 5 / 8 / 7; }
  .inicio-tiles .hex-equipos { grid-area: 4 / 7 / 8 / 9; }
  .tile-icono { width: 52px; height: 52px; }
  .tile-icono .icono { width: 32px; height: 32px; }
  .tile-titulo { font-size: 1rem; /* 17 px */ }
  .tile-sub { font-size: 0.735rem; /* 12,5 px */ }
  .tile-texto { padding: 0 18px; }
}

/* Lanzador del inicio (L13a): lista vertical de tarjetas horizontales de
   72 px — ícono en blob verde-tenue, título con subtítulo y chevron sutil.
   Con cinco ítems (uno deshabilitado) la lista mantiene una sola columna de
   lectura y un gesto por destino; la variante en grilla de dos columnas
   (.lanzador--grilla, evaluada en docs/capturas/l13a/) dejaba un quinto ítem
   huérfano y rótulos más chicos. En escritorio la lista se ensancha a una
   columna de 30 rem centrada. */
.lanzador {
  margin: 1rem 0 0;
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  gap: 10px; /* L18b */
}
@media (min-width: 900px) { .lanzador { max-width: 30rem; } }
.lanzador-acceso {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 0.9rem;
  row-gap: 0; /* el blob abre una segunda fila fantasma: sin gap vertical */
  min-height: 64px; /* L18b */
  padding: 0.45rem 0.9rem 0.45rem 0.6rem;
  background: var(--blanco);
  border: 1px solid var(--hairline); /* hairline del sistema (L19a) */
  border-radius: 18px;
  box-shadow: var(--sombra-sem); /* elevada: doble sombra + luz interior */
  color: var(--titulo);
  text-decoration: none;
  text-align: left;
  transition: transform 120ms ease, box-shadow var(--transicion), border-color var(--transicion);
}
.lanzador-acceso .circulo-icono-blob { grid-row: span 2; align-self: center; width: 44px; height: 44px; }
/* Matiz distintivo por acceso (L19a): Guardia ámbar-verde, Infusiones
   verde-agua, Equipos neutro; el resto conserva el verde Brisa. */
.blob-guardia { background: linear-gradient(135deg, #FFF4D6 0, #EAF5E6 100%); }
.blob-guardia svg { color: #8A5A00; stroke: #8A5A00; }
.blob-agua { background: #E1F2EF; }
.blob-agua .icono { color: #1F6B5E; }
.blob-agua .icono-duo .uso-eco { fill: rgb(31 107 94 / 0.28); }
.blob-neutro { background: #EDF0EF; }
.blob-neutro .icono { color: #44564C; }
.blob-neutro .icono-duo .uso-eco { fill: rgb(68 86 76 / 0.26); }
.lanzador-acceso .circulo-icono-blob svg { width: 26px; height: 26px; }
.lanzador-texto { display: flex; flex-direction: column; min-width: 0; }
.lanzador-rotulo { font-weight: 600; line-height: 1.3; }
.lanzador-detalle { font-size: 0.8rem; color: var(--tinta-suave); }
.lanzador-chevron {
  color: var(--verde-texto);
  display: inline-flex;
}
.lanzador-chevron svg { width: 18px; height: 18px; }
.lanzador-acceso:hover {
  border-color: var(--verde-brisa);
  transform: translateY(-1px);
  box-shadow: var(--sombra-media);
}
.lanzador-acceso:hover .circulo-icono-blob {
  border-radius: 54% 46% 45% 55% / 52% 57% 43% 48%;
  transform: translate(2px, -2px);
}
.lanzador-acceso:active { transform: scale(0.98); box-shadow: var(--sombra); } /* L19a: 120 ms vía transition */

/* Quinto acceso, deshabilitado: presente para mostrar la estructura final,
   sin enlace y con etiqueta «En preparación». La opacidad baja solo la parte
   gráfica; el texto conserva AA por sí mismo. */
.lanzador-acceso[aria-disabled="true"] {
  cursor: default;
  box-shadow: none;
  border-style: dashed;
  color: var(--tinta-suave);
}
.lanzador-acceso[aria-disabled="true"] .circulo-icono-blob { opacity: 0.55; }
.lanzador-acceso[aria-disabled="true"]:hover {
  border-color: var(--borde);
  transform: none;
  box-shadow: none;
}
.lanzador-acceso[aria-disabled="true"]:hover .circulo-icono-blob {
  border-radius: 46% 54% 55% 45% / 48% 43% 57% 52%;
  transform: none;
}
.lanzador-preparacion {
  margin-top: 0.15rem;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--verde-texto);
  background: var(--verde-tenue);
  border-radius: 99px;
  padding: 0.05rem 0.55rem;
}

/* Variante grilla (composición B): dos columnas de tarjetas bajas. */
.lanzador--grilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  max-width: 23rem;
}
.lanzador--grilla .lanzador-acceso {
  grid-template-columns: auto 1fr;
  min-height: 64px;
  padding: 0.55rem 0.6rem;
  gap: 0.6rem;
}
.lanzador--grilla .lanzador-chevron { display: none; }
.lanzador--grilla .lanzador-detalle { display: none; }

.inicio-pie {
  margin: 0.9rem 0 0; /* L18b: pie compacto */
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
}
.inicio-pie a { color: var(--tinta-suave); }
.inicio-pie a:hover { color: var(--verde-texto); }

/* Tarjeta de infusión (L15b): nombre y chip en la primera fila, preparación
   a ancho completo debajo, modo en la tercera; sin columnas laterales
   angostas en ningún ancho. */
.tarjeta-infusion {
  border-color: rgb(90 163 58 / 0.25);
  box-shadow: var(--sombra-sem);
  /* minmax(0, auto): el chip puede encoger y elipsar en anchos mínimos (L17g) */
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  grid-template-areas:
    "nombre chip"
    "prep   prep"
    "modo   modo";
  align-items: center;
}
.tarjeta-infusion .tarjeta-enlace { grid-area: nombre; min-width: 0; }
.tarjeta-infusion .chip-grupo { grid-area: chip; justify-self: end; max-width: 100%; min-width: 0; position: relative; z-index: 1; }
@media (pointer: coarse) { .tarjeta-farmaco .chip-grupo::before { content: ""; position: absolute; inset: -0.45rem 0; } } /* L22f: 44 px tocables sin cambiar el aspecto */
.tarjeta-infusion .chip-grupo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta-infusion .tarjeta-prep { grid-area: prep; margin: 0.15rem 0 0; }
.tarjeta-infusion .tarjeta-modo { grid-area: modo; margin: 0; }

/* Chips de acceso rápido de #/infusiones */
/* L20d: los accesos rápidos en UNA fila desplazable; el degradado del borde
   derecho señala que hay más contenido. */
.chips-calculadora {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  margin: 0 0 1.4rem;
  padding: 0 0 0.35rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
}
.chip-calculadora { flex: none; white-space: nowrap; }
@media (min-width: 900px) {
  .chips-calculadora {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
    -webkit-mask-image: none;
    mask-image: none; /* L21e: a 1280+ hay lugar para las trece drogas */
  }
}
.chip-calculadora {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--verde-texto);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--sombra);
  transition: transform var(--transicion), border-color var(--transicion);
}
.chip-calculadora svg { width: 20px; height: 20px; color: var(--verde-brisa); }
.chip-calculadora:hover { border-color: var(--verde-brisa); transform: translateY(-1px); }

.instalar-iphone summary {
  cursor: pointer;
  color: var(--verde-texto);
  font-weight: 600;
}
.instalar-iphone ol { margin: 0.5rem 0 0; padding-left: 1.3rem; text-align: left; }
.instalar-iphone li { margin: 0.25rem 0; }

/* Pie con los dos logos. */
.pie-logos {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.pie-logos-fila {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.pie-logos img { display: block; width: auto; }
/* Pie: mismo cap de 16 px que el escritorio (L16g). */
.pie-logos .logo-brisa { height: 31.5px; } /* L20a */
.pie-logos .logo-pae { height: 39.2px; }
.pie-logos p { margin: 0; font-size: 0.85rem; color: var(--tinta-suave); }

/* ---------------------------------------------------------------- botones */

.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.15rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--verde-oscuro);
  border: 1.5px solid transparent;
  border-radius: 10px;
  transition: background var(--transicion), border-color var(--transicion), transform 120ms ease; /* L15d */
  text-decoration: none;
  cursor: pointer;
}
.boton:active, .tarjeta-farmaco:active, .guardia-tarjeta:active, .equipo-tarjeta:active, .lanzador-acceso:active { transform: translateY(0) scale(0.99); } /* L15d: presionado homogéneo */
.boton:hover { background: var(--verde-texto); color: #FFFFFF; }

.boton-secundario {
  color: var(--verde-texto);
  background: var(--blanco);
  border-color: var(--verde-texto);
}
.boton-secundario:hover { background: var(--verde-tenue); color: var(--verde-oscuro); }

/* --------------------------------------------------------------- buscador */

.buscador {
  position: relative;
  margin: 0.5rem 0 0.75rem;
}

/* Lupa dentro del campo (L7). */
.buscador-lupa {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--verde-texto);
  pointer-events: none;
}
.buscador-lupa svg { width: 20px; height: 20px; display: block; }

.buscador input[type="search"] {
  width: 100%;
  padding: 0.85rem 3rem 0.85rem 2.9rem;
  font: inherit;
  font-size: 1.02rem;
  color: var(--tinta);
  background: var(--blanco);
  box-shadow: var(--sombra-sem); /* tarjeta elevada (L20c) */
  /* --borde puro da 1,2:1: para cumplir WCAG 1.4.11 el límite del control
     usa --borde-control (4,4:1). */
  border: 2px solid var(--borde-control);
  border-radius: 12px;
  box-shadow: var(--sombra);
}
.buscador input[type="search"]:focus {
  outline: 3px solid var(--verde-oscuro);
  outline-offset: 1px;
  border-color: var(--verde-oscuro);
}
.buscador input[type="search"]::placeholder { color: var(--tinta-suave); opacity: 1; }

.boton-limpiar {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--tinta-suave);
  font-size: 1rem;
  cursor: pointer;
}
.boton-limpiar:hover { background: var(--verde-tenue); color: var(--verde-oscuro); }

/* El estado vacío de Buscar es el componente único .estado-vista (L24c, al
   final). Las reglas del estado vacío viejo y de las sugerencias en chip que
   vivían acá eran CSS muerto y se retiraron. */

/* --------------------------------------------------------------- tarjetas */

.lista-tarjetas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
@media (min-width: 700px) { .lista-tarjetas { grid-template-columns: 1fr 1fr; align-items: start; } } /* L22f: sin tarjetas estiradas */

.tarjeta-farmaco {
  position: relative;
  align-content: start; /* L21e: la tarjeta estirada no desparrama filas */
  /* Retícula única de listados (L13d): ícono | texto | chips a la derecha. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.15rem 0.8rem;
  align-items: start;
  padding: 0.7rem 0.95rem 0.75rem;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.tarjeta-farmaco { transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion); }
.tarjeta-farmaco:hover {
  border-color: var(--verde-brisa);
  transform: translateY(-2px);
  box-shadow: var(--sombra-media);
}

.tarjeta-enlace { color: inherit; text-decoration: none; }
.tarjeta-enlace::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.tarjeta-enlace:focus-visible::after {
  outline: 3px solid var(--verde-oscuro);
  outline-offset: 2px;
  border-radius: var(--radio);
}
.tarjeta-enlace:focus-visible { outline: none; }

/* La tarjeta agrupada es un botón (abre el selector), con el mismo aspecto. */
.tarjeta-enlace-grupo {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tarjeta-icono { grid-row: 1 / span 2; margin-top: -0.3rem; } /* L22f: el círculo centra con la primera línea */
.tarjeta-farmaco .circulo-icono { background: var(--superficie); color: var(--verde-brisa); box-shadow: var(--sombra-1); } /* L22f: círculo blanco */
/* Ícono de presentación de 24 px en las filas de listado. */
.tarjeta-farmaco .circulo-icono { width: 36px; height: 36px; }
.tarjeta-farmaco .circulo-icono svg { width: 24px; height: 24px; }
.tarjeta-texto { grid-column: 2; min-width: 0; }
.tarjeta-chips {
  grid-column: 3;
  justify-self: end;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}
/* A menos de 480 px los chips bajan bajo el texto: nada aprieta el nombre. */
/* L20g: chips a la derecha solo con tarjeta a ancho completo; en móvil
   angosto Y en la retícula de dos columnas aplastaban el nombre. */
@media (max-width: 479.98px), (min-width: 700px) {
  .tarjeta-farmaco { grid-template-columns: auto minmax(0, 1fr); }
  .tarjeta-chips { grid-column: 2; justify-self: start; justify-content: flex-start; margin-top: 0.25rem; }
}
.chips-grupo {
  display: flex;
  flex-wrap: wrap;
  justify-content: inherit;
  gap: 0.35rem;
  align-items: center;
}
.chip-grupo-mas { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.tarjeta-generico { display: block; font-size: 1.176rem; /* 20 px */ font-weight: 700; color: var(--titulo); line-height: 1.3; text-wrap: balance; } /* L22f: sin huérfanas */
.tarjeta-comercial { display: block; color: var(--tinta-suave); font-size: 1rem; /* 17 px */ font-weight: 600; line-height: 1.35; }
.tarjeta-presentacion { margin: 0; font-size: 0.84rem; color: var(--tinta-suave); }
.tarjeta-mas { font-size: 0.78rem; color: var(--tinta-suave); font-style: italic; }
.tarjeta-vias { margin: 0; font-size: 0.78rem; color: var(--tinta-suave); }

.chip-grupo {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
  padding: 0.18rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tinta);
  background: var(--verde-tenue);
  border: 1px solid var(--borde);
  border-radius: 999px;
  text-decoration: none;
}
.chip-grupo:hover { border-color: var(--verde-brisa); color: var(--verde-oscuro); }
.chip-grupo svg { width: 16px; height: 16px; color: var(--verde-brisa); flex: none; }

.prospecto-laboratorio {
  margin: 0.1rem 0 0.35rem;
  font-size: 0.82rem;
  color: var(--tinta-suave);
}

/* Chip de clase mecanística (D5): bajo el título de «Mecanismo de acción».
   Discreto y de bajo contraste para no competir con la dosis; el nombre de
   la clase es largo, así que el chip envuelve en vez de desbordar. */

.chip-mecanismo {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.35rem;
  max-width: 100%;
  margin: -0.15rem 0 0.55rem;
  padding: 0.22rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta-suave);
  background: var(--verde-tenue);
  border: 1px solid var(--borde);
  border-radius: 12px;
  text-decoration: none;
}
/* El nombre salta a dos líneas si hace falta y recién ahí trunca con
   elipsis; nunca se corta a mitad de palabra. El nombre completo viaja en
   aria-label y en el tooltip del chip (L13f). */
.chip-mecanismo-nombre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
}
.chip-mecanismo:hover,
.chip-mecanismo:focus-visible { border-color: var(--verde-brisa); color: var(--verde-oscuro); }
.chip-mecanismo-icono { display: inline-flex; flex: none; padding-top: 0.1rem; }
.chip-mecanismo svg { width: 15px; height: 15px; color: var(--verde-brisa); }
.chip-mecanismo-mas {
  flex: none;
  color: var(--verde-oscuro);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------- clase de mecanismo (lista) */

.vista-mecanismo .mecanismo-resumen {
  margin: 0.35rem 0 0.9rem;
  color: var(--tinta-suave);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------ índice A–Z */

.az-contenido { margin-top: 0.75rem; }

.barra-letras {
  position: sticky;
  top: var(--alto-cabecera-total);
  z-index: 10;
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  margin: 0 -20px; /* L22f: el lateral de .disposicion es de 20 px */
  padding: 0.5rem 20px;
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
  -webkit-overflow-scrolling: touch;
}
.barra-letras a,
.barra-letras .letra-vacia {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 2.6rem;
  min-height: 2.6rem;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid var(--hairline); /* L22f: luz en vez de borde verde (2,5:1) */
}
.barra-letras a {
  transition: background var(--transicion), border-color var(--transicion); /* L21e */
  color: var(--verde-texto);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  text-decoration: none;
}
.barra-letras a:hover { border-color: var(--verde-brisa); background: var(--verde-tenue); }
.barra-letras a[aria-current="page"] {
  background: var(--verde-oscuro);
  border-color: var(--verde-oscuro);
  color: #FFFFFF;
}
.barra-letras .letra-vacia {
  color: var(--tinta-suave);
  opacity: 0.6;
  background: transparent;
  box-shadow: none;
}

.grupo-letra { margin: 1.25rem 0 0; }
.letra-encabezado {
  position: sticky;
  top: calc(var(--alto-cabecera-total) + 3.6rem);
  z-index: 5;
  margin: 0 0 0.6rem; /* L19b: alineada a la retícula, sin sangrado */
  padding: 0.3rem 0.85rem;
  font-size: 1.294rem; /* 22 px */
  font-weight: 700;
  color: var(--verde-oscuro);
  background: var(--verde-tenue);
  border-radius: 10px;
  scroll-margin-top: calc(var(--alto-cabecera-total) + 3.6rem);
}
.letra-encabezado:focus { outline: none; }

@media (min-width: 1024px) {
  .az { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; }
  .az .titulo-vista, .az .encabezado-vista { grid-column: 1 / -1; } /* L19h: el header con bajada también abarca */
  /* L22f: 26 letras en dos columnas (A–M | N–Z) de cajas de 44 px: entran
     enteras en 900 px de alto; antes una columna con scroll oculto cortaba
     en la P. */
  .barra-letras {
    position: sticky;
    top: calc(var(--alto-cabecera-total) + 1rem);
    align-self: start;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(13, 2.6rem);
    grid-template-columns: repeat(2, 2.6rem);
    gap: 0.3rem;
    overflow: visible;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    max-height: none;
  }
  .az-contenido { margin-top: 0; }
  .az-contenido .grupo-letra:first-child { margin-top: 0; } /* L20g */
  .letra-encabezado { top: calc(var(--alto-cabecera-total) + 1rem); margin: 0 0 0.5rem; padding: 0.3rem 0 0.3rem 0.95rem; scroll-margin-top: calc(var(--alto-cabecera-total) + 1rem); } /* L22f: alineada con la columna */
}

/* --------------------------------------------------------------- sistemas */

.banner-aviso {
  margin: 0.5rem 0 1rem;
  padding: 0.65rem 0.95rem;
  font-size: 0.9rem;
  color: var(--ambar-texto);
  background: var(--blanco);
  border: 1px solid rgb(160 104 0 / 0.3);
  border-radius: 12px;
  box-shadow: var(--sombra-sem);
}

.miga { display: flex; align-items: center; min-height: 44px; margin: 0 0 0.5rem; font-size: 0.92rem; } /* L22f: vuelta tocable */
.miga .codigo { color: var(--tinta-secundaria); }
.volver {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* L22f */
  gap: 0.15rem;
  color: var(--verde-texto);
  text-decoration: none;
  font-weight: 600;
}
.volver:hover { text-decoration: underline; }
.volver svg { width: 18px; height: 18px; }

.nav-sistemas ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
/* L18d: retícula única de listados — blob de 44 px a la izquierda, nombre
   alineado a la izquierda en una o dos líneas con corte limpio, chevron a
   la derecha y alturas iguales. */
.nav-sistemas a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  min-height: 64px;
  padding: 0.45rem 0.8rem 0.45rem 0.6rem;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: var(--titulo);
  text-decoration: none;
  font-weight: 600;
  text-align: left;
}
.nav-sistemas .circulo-icono { width: 44px; height: 44px; background: var(--superficie); box-shadow: var(--sombra-1); color: var(--verde-brisa); } /* L22f: la insignia del inicio */
.nav-sistemas .circulo-icono svg { width: 24px; height: 24px; }
.nav-sistema-nombre {
  font-size: 1.176rem; /* 20 px (L19b) */
  font-weight: 700;
  color: var(--titulo);
  line-height: 1.3;
  -webkit-hyphens: auto;
  hyphens: auto; /* corte limpio con guión, no a mitad de palabra */
  -webkit-hyphenate-limit-after: 4;
  hyphenate-limit-chars: auto 3 4; /* L21e: sin huérfanos de dos letras */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.nav-sistema-chevron { display: inline-flex; color: var(--verde-texto); }
.nav-sistema-chevron svg { width: 18px; height: 18px; }
.nav-sistemas a { transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion); }
.nav-sistemas a:hover { border-color: var(--verde-brisa); transform: translateY(-2px); box-shadow: var(--sombra-media); } /* L21e */
.nav-sistemas a[aria-current="page"] {
  border-color: var(--verde-brisa);
  background: var(--verde-tenue);
  color: var(--verde-texto);
}
.detalle-sistema-icono { display: none; } /* L22f: el h1 ya nombra al sistema; el círculo suelto era un hueco de 55 px */
@media (min-width: 900px) { .sistemas-columnas .detalle-sistema-icono { display: none; } }
.grupo-terapeutico { margin: 0 0 1.5rem; }
.titulo-grupo { margin: 0 0 0.6rem; font-size: 1.294rem; /* 22 px, escala de .letra-encabezado (L20g) */ line-height: 1.25; text-wrap: balance; } /* L22f */
.titulo-grupo a { display: inline-block; padding: 0.25rem 0; margin: -0.25rem 0; text-decoration: none; }
.titulo-grupo a:hover { text-decoration: underline; }

.sistemas.con-detalle .nav-sistemas { display: none; }
.sistemas.sin-detalle .detalle-sistema { display: none; }
/* L22f: sistema y grupo (hijos) en la escala del listado (34 px); a 40 px
   «Musculoesquelético» invadía el margen a 390 y superaba al padre. */
.sistemas.con-detalle .titulo-vista, .vista-grupo .titulo-vista { font-size: 2rem; margin: 0.5rem 0 0.6rem; }
/* L22f: iPad vertical (700–899): el listado a dos columnas, como sus tarjetas. */
@media (min-width: 700px) and (max-width: 899.98px) {
  .sistemas.sin-detalle .nav-sistemas ul { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
}

@media (min-width: 900px) {
  .sistemas-columnas {
    display: grid;
    grid-template-columns: 19.5rem minmax(0, 1fr); /* L22f: 216 px de nombre a 18 px, sin «Musculoesquelé-tico» */
    gap: 1.5rem;
    align-items: start;
  }
  .sistemas-columnas .nav-sistema-nombre { font-size: 1.06rem; /* 18 px */ }
  .sistemas-columnas .nav-sistemas a { min-height: 56px; padding: 0.35rem 0.7rem 0.35rem 0.5rem; }
  .sistemas-columnas .nav-sistemas ul { gap: 0.4rem; }
  /* L22f: las tarjetas del detalle se acomodan por contenedor (562 px → dos
     de 19 rem no entran → una columna), no por viewport. */
  .sistemas-columnas .lista-tarjetas { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
  .sistemas.con-detalle .nav-sistemas { display: block; }
  .sistemas.sin-detalle .detalle-sistema { display: block; }
  .nav-sistemas a.preseleccionado {
    border-color: var(--hairline);
    background: var(--verde-tenue);
    color: var(--verde-texto);
  }
  .nav-sistemas a[aria-current="page"] { border-color: var(--hairline); }
  .nav-sistemas a[aria-current="page"]:hover, .nav-sistemas a.preseleccionado:hover { transform: none; box-shadow: var(--sombra-1); } /* L22f: el activo no es un botón */
  .nav-sistemas { position: sticky; top: calc(var(--alto-cabecera-total) + 1rem); max-height: calc(100dvh - var(--alto-cabecera-total) - 2rem); overflow-y: auto; padding: 4px; margin: -4px; } /* L22f: nunca tapado por el pie */
  .sistemas.con-detalle .miga { display: none; }
}

/* ------------------------------------------------------------------ ficha */

.farmaco-cuerpo { display: block; }

/* L22e: dos columnas desde 900 px con el índice de secciones a la
   izquierda (antes: desde 1024 y a la derecha). El índice va último en el
   DOM para el lector de pantalla; `order` lo lleva a la primera columna. */
@media (min-width: 900px) {
  .farmaco-cuerpo {
    display: grid;
    grid-template-columns: 11.5rem minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
  }
  .farmaco-cuerpo > .indice-lateral { order: -1; position: sticky; top: calc(var(--alto-cabecera-total) + 1rem); }
}

.indice-lateral { display: none; }
@media (min-width: 900px) { .indice-lateral { display: block; } }
.indice-lateral ul {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.25rem 0.9rem;
  border-left: 2px solid var(--borde); /* guía neutra del índice, no semántica */
  display: grid;
  gap: 0.15rem;
}
.indice-lateral a {
  display: block;
  transition: background var(--transicion), color var(--transicion); /* L21e */
  padding: 0.25rem 0.45rem;
  font-size: 0.85rem;
  color: var(--tinta-suave);
  text-decoration: none;
  border-radius: 7px;
}
.indice-lateral a:hover { color: var(--verde-oscuro); background: var(--verde-tenue); }
.indice-lateral a[aria-current="true"] {
  color: var(--verde-texto);
  background: var(--verde-tenue);
  font-weight: 600;
}

.farmaco-cabecera {
  padding: 1.1rem 1.2rem 1.15rem;
  background: linear-gradient(135deg, var(--verde-tenue) 0, var(--blanco) 55%);
  border: 1px solid rgb(90 163 58 / 0.25);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sem);
}
/* Título e ícono de presentación en la MISMA fila (L13b): el título manda y
   el ícono, en blob de 40 px, acompaña a la derecha sin empujarlo. */
.farmaco-fila-titulo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
}
.farmaco-icono-cabecera {
  width: 64px;  /* L17b */
  height: 64px;
  flex: none;
  margin-top: 0.15rem;
  background: var(--verde-tenue);
}
.farmaco-icono-cabecera svg { width: 36px; height: 36px; }
@media (max-width: 359px) {
  .farmaco-icono-cabecera { width: 56px; height: 56px; }
  .farmaco-icono-cabecera svg { width: 32px; height: 32px; }
}
.farmaco-presentacion {
  margin: 0.15rem 0 0;
  font-size: 0.88rem;
  color: var(--tinta-suave);
}

/* Barra de contexto pegajosa (L17b): 40 px bajo la cabecera con el ícono y
   el genérico cuando el título de la vista sale de pantalla. Decorativa
   (aria-hidden, sin puntero): nunca tapa una interacción ni un anclaje —
   el scroll-margin de las secciones ya la contempla. */
.barra-contexto {
  position: fixed;
  top: var(--alto-cabecera-total);
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0 1rem;
  background: rgb(255 255 255 / 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
  z-index: 43;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 150ms ease, opacity 150ms ease;
  pointer-events: none;
}
.barra-contexto.visible { transform: translateY(0); opacity: 1; }
.barra-contexto-icono { width: 22px; height: 22px; flex: none; } /* L18e */
img.barra-contexto-icono { border-radius: 5px; object-fit: cover; }
.barra-contexto-nombre {
  max-width: min(70vw, 30rem);
  font-size: max(1rem, 17px); /* L18e: 17 px aun en «Chico» */
  font-weight: 600;
  color: var(--titulo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce) { .barra-contexto { transition: none; } }
@media print { .barra-contexto { display: none !important; } }

.progreso-lectura {
  position: fixed;
  inset: var(--alto-cabecera-total) 0 auto 0;
  height: 3px;
  z-index: 44;
  background: transparent;
  pointer-events: none;
}
.progreso-lectura > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--verde-brisa), var(--verde-texto));
}
.farmaco-cabecera .titulo-vista { margin: 0; font-size: 1.882rem; } /* 32 px */
@media (min-width: 900px) { .farmaco-cabecera .titulo-vista { font-size: 2.353rem; } } /* 40 px (L16e) */
.farmaco-comercial { margin: 0.2rem 0 0; color: var(--tinta-suave); font-size: 0.941rem; } /* 16 px (L16e) */
.farmaco-insignias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.7rem 0 0;
}
/* En la cabecera todos los chips comparten compacidad: 12 px, 26 px de alto. */
.farmaco-insignias .chip-grupo, .farmaco-insignias .chip-mecanismo {
  height: 26px;
  font-size: 0.706rem;
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
}
.insignia-embarazo {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 0.6rem;
  font-size: 0.706rem; /* 12 px (L16e) */
  font-weight: 600;
  color: var(--tinta);
  background: var(--superficie-suave);
  border: 1px solid var(--borde-control);
  border-radius: 999px;
  text-decoration: none;
}
.insignia-embarazo:hover { border-color: var(--verde-oscuro); color: var(--verde-oscuro); }

.farmaco-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
}
.farmaco-acciones svg { width: 20px; height: 20px; }
/* Acciones solo-ícono (L13b): 44 px, con aria-label y tooltip nativo. */
.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;  /* L16e: nada compite con el nombre */
  height: 40px;
  padding: 0;
  background: var(--blanco);
  color: var(--verde-oscuro);
  border: 1px solid var(--borde-control);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transicion), border-color var(--transicion);
}
.boton-icono:hover { background: var(--verde-tenue); border-color: var(--verde-oscuro); }
.boton-icono[aria-pressed="true"] {
  background: var(--verde-tenue);
  border-color: var(--verde-oscuro);
}
.boton-icono[aria-pressed="true"] svg { fill: var(--verde-oscuro); }
.boton-calculadora { margin-left: 0.25rem; }
.boton-calculadora svg { width: 18px; height: 18px; }

/* ------------------- emergente de categorías de embarazo (L16f) */

.boton-info-embarazo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--verde-oscuro);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.boton-info-embarazo svg { width: 18px; height: 18px; }
.boton-info-embarazo:hover { background: var(--verde-tenue); }
.boton-info-embarazo:focus-visible { outline: 3px solid var(--verde-oscuro); outline-offset: 2px; }

.dialogo-embarazo {
  max-width: min(92vw, 26rem);
  padding: 1.1rem 1.2rem 1rem;
  background: var(--blanco);
  color: var(--tinta);
  border: 2px solid var(--verde-brisa);
  border-radius: var(--radio);
  box-shadow: var(--sombra-media);
}
.dialogo-embarazo::backdrop { background: rgb(22 36 31 / 0.45); }
.dialogo-embarazo-titulo { margin: 0 2.4rem 0.7rem 0; font-size: 1.06rem; }
.dialogo-cerrar { position: absolute; top: 0.7rem; right: 0.7rem; }
.dialogo-embarazo-lista { margin: 0; }
.dialogo-embarazo-lista dt { font-weight: 700; margin-top: 0.55rem; }
.dialogo-embarazo-lista dd { margin: 0.1rem 0 0; color: var(--tinta-suave); font-size: 0.95rem; }
.dialogo-embarazo-lista .cat-actual { color: var(--verde-oscuro); }
.dialogo-embarazo-lista dt.cat-actual {
  background: var(--verde-tenue);
  border-radius: 8px;
  padding: 0.15rem 0.45rem;
  margin-left: -0.45rem;
}
.cat-actual-marca { font-weight: 400; font-size: 0.85em; color: var(--verde-texto); }
.dialogo-embarazo-nota { margin: 0.8rem 0 0; font-size: 0.82rem; color: var(--tinta-suave); }

/* -------------------------------------------- secciones de la ficha (L9)
   Jerarquía clínica: primero qué es y para qué, después cuánto y cómo,
   después qué no hacer. Títulos fuertes con ícono y regleta hairline. */

.seccion-ficha { margin: 2rem 0 0; }
@media (min-width: 900px) { .seccion-ficha { margin-top: 2.5rem; } }
.seccion-ficha > p { margin: 0; }

.titulo-seccion-ficha {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.8rem;
  padding: 0.5rem 0.8rem;
  font-size: max(1.118rem, 18.7px); /* 19 px: texto grande WCAG, AA con 3:1; piso aun en «Chico» (L17g) */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--blanco);
  background: var(--verde-brisa-banda);
  border-radius: 10px;
}
.icono-titulo {
  display: inline-flex;
  flex: none;
  color: var(--verde-oscuro);
}
/* Dentro de la banda, el ícono acompaña en blanco. */
.titulo-seccion-ficha .icono-titulo { color: var(--blanco); }
.icono-titulo svg { width: 20px; height: 20px; }
.icono-titulo-grande svg { width: 24px; height: 24px; }

/* Listas de ítems (indicaciones, contraindicaciones, precauciones). */
.lista-seccion {
  margin: 0;
  padding-left: 1.15rem;
  list-style: none;
}
.lista-seccion li { position: relative; margin: 0.3rem 0; }
.lista-seccion li::before {
  content: "";
  position: absolute;
  left: -0.95rem;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verde-brisa);
}

/* Bloque de dosis: el protagonista. */
.bloque-dosis {
  padding: 1.1rem 1.25rem 1rem;
  background: var(--blanco);
  border: 1px solid rgb(90 163 58 / 0.25);
  border-radius: 16px;
  box-shadow: var(--sombra-sem);
}
.bloque-dosis .titulo-seccion-ficha {
  font-size: 1.18rem;
  border-bottom-color: rgb(104 184 72 / 0.35);
}
@media (min-width: 900px) { .bloque-dosis .titulo-seccion-ficha { font-size: 1.29rem; } }
.dosis-cuerpo { display: grid; gap: 0; }
.dosis-rotulo {
  margin: 0.9em 0 0.25em;
  font-weight: 600;
  color: var(--titulo);
}
.dosis-cuerpo > .dosis-rotulo:first-child { margin-top: 0; }
.dosis-texto { margin: 0; }
.dosis-texto + .dosis-texto { margin-top: 0.9em; }

.diagrama-ampliable { cursor: zoom-in; touch-action: manipulation; }

/* ---------------------------------- tarjeta semántica (L17a): base */

.sem-verde { --sem-rgb: 90 163 58; --sem-texto: #2E6320; }
.sem-rojo { --sem-rgb: 168 39 30; --sem-texto: var(--rojo-texto); }
.sem-ambar { --sem-rgb: 160 104 0; --sem-texto: var(--ambar-texto); }
.sem-ambar-suave { --sem-rgb: 176 126 26; --sem-texto: #7A5600; }
.sem-gris { --sem-rgb: 91 107 123; --sem-texto: var(--grisazul-texto); }
.sem-neutro { --sem-rgb: 91 107 99; --sem-texto: var(--tinta-suave); }

.tarjeta-sem {
  background: var(--blanco);
  border: 1px solid rgb(var(--sem-rgb) / 0.25);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sem);
}
.insignia-sem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgb(var(--sem-rgb));
  color: #FFFFFF;
}
.insignia-sem svg { width: 18px; height: 18px; }
.titulo-sem { color: var(--sem-texto); }

/* ------------------------------------------- gramática de avisos (L13b) */
/* Un componente, cuatro variantes. Misma anatomía siempre: ícono a la
   izquierda, título corto en negrita, texto. AA verificado en DISENO.md. */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.9rem 0 0;
  padding: 1.05rem 1.1rem; /* L19c */
  background: var(--blanco);
  border: 1px solid rgb(var(--sem-rgb) / 0.25);
  border-radius: 12px;
  box-shadow: var(--sombra-sem);
  font-size: 0.9rem;
  line-height: 1.45;
}
.aviso .insignia-sem { margin-top: 0.05rem; }
.aviso .aviso-titulo { color: var(--sem-texto); }
.aviso-icono {
  width: 19px;
  height: 19px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aviso-cuerpo { margin: 0; }
.aviso-titulo { font-weight: 700; }
.aviso-detalle {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  line-height: 1.35;
}
/* Variantes = clases semánticas (L17a): la advertencia crítica y la
   precaución van en ámbar; el envase en gris azulado; el prospecto neutro. */
.aviso--critica { --sem-rgb: 160 104 0; --sem-texto: var(--ambar-texto); }
.aviso--precaucion { --sem-rgb: 160 104 0; --sem-texto: var(--ambar-texto); }
.aviso--envase { --sem-rgb: 91 107 123; --sem-texto: var(--grisazul-texto); }
.aviso--prospecto { --sem-rgb: 91 107 99; --sem-texto: var(--tinta-suave); }
/* Dentro del bloque de posología el aviso antecede al texto. */
.bloque-dosis .aviso { margin: 0 0 0.9rem; }

/* --------------------------------------------- cuadros por contrato (L13b) */
.cuadro-rapido { margin: 0 0 1rem; }
.cuadro-rapido-titulo {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--titulo);
}
.cuadro-rapido-marco {
  overflow-x: auto;
  background: var(--blanco);
  border: 1px solid rgb(91 107 99 / 0.25);
  border-radius: 12px;
  box-shadow: var(--sombra-sem);
}
.cuadro-rapido-tabla {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanco);
  font-size: 0.88rem;
}
.cuadro-rapido-tabla th, .cuadro-rapido-tabla td {
  padding: 0.45rem 0.6rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--borde);
}
.cuadro-rapido-tabla thead th {
  background: var(--superficie-suave);
  color: var(--verde-texto);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.cuadro-rapido-tabla tbody th { font-weight: 600; white-space: nowrap; }
.cuadro-rapido-tabla tbody tr:last-child th,
.cuadro-rapido-tabla tbody tr:last-child td { border-bottom: 0; }

/* Apilado móvil de tablas anchas (L13f): con más de dos columnas, por
   debajo de 600 px cada fila es una tarjeta —la primera columna titula y las
   demás se listan como rótulo/valor—. Nada se corta ni se desplaza. */
@media (max-width: 599.98px) {
  .cuadro-rapido-apilable, .cuadro-rapido-apilable tbody,
  .cuadro-rapido-apilable tr, .cuadro-rapido-apilable th,
  .cuadro-rapido-apilable td { display: block; }
  .cuadro-rapido-apilable thead { display: none; }
  .cuadro-rapido-apilable { border: 0; background: none; overflow: visible; }
  .cuadro-rapido-apilable tr {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.6rem;
  }
  .cuadro-rapido-apilable tbody th {
    padding: 0 0 0.3rem;
    border-bottom: 1px solid var(--borde);
    margin-bottom: 0.3rem;
    white-space: normal;
    font-weight: 700;
    color: var(--verde-texto);
  }
  .cuadro-rapido-apilable td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.8rem;
    padding: 0.22rem 0;
    border-bottom: 0;
    text-align: right;
  }
  .cuadro-rapido-apilable td .cuadro-celda-valor { min-width: 0; }
  .cuadro-rapido-apilable td::before {
    content: attr(data-rotulo);
    flex: none;
    max-width: 55%;
    text-align: left;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--tinta-suave);
  }
}

/* Tarjetas por escenario (dosis con rótulos). */
.dosis-tarjetas { gap: 0.75rem; /* L17b: 12px entre tarjetas */ }
.tarjeta-escenario {
  background: var(--blanco);
  border: 1px solid rgb(90 163 58 / 0.25);
  border-radius: 12px;
  padding: 1.05rem 1.1rem; /* L19c: interno 18 px */
  box-shadow: var(--sombra-sem);
}
.tarjeta-escenario-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.3rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #2E6320;
}
.tarjeta-escenario .dosis-texto { margin: 0; }

/* Subsección Preparación dentro de Posología. */
.posologia-preparacion {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed rgb(104 184 72 / 0.45);
}
.subtitulo-posologia {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--titulo);
}
.posologia-preparacion .icono-titulo svg { width: 18px; height: 18px; }

/* ------------------------------------------------- acordeón móvil (L13b) */
.seccion-plegable { margin: 28px 0 0; } /* L19c: tarjeta→banda 28 px */
.seccion-plegable > .seccion-ficha,
.seccion-plegable > .fuentes { margin-top: 0.8rem; padding-top: 0; border-top: 0; }
.seccion-plegable-resumen {
  list-style: none;
  cursor: pointer;
  position: relative;
}
.seccion-plegable-resumen::-webkit-details-marker { display: none; }
.seccion-plegable-resumen .titulo-seccion-ficha,
.seccion-plegable-resumen .titulo-seccion {
  margin: 0;
  padding-right: 2.6rem;
}
/* Chevron blanco de 20 px (L17c): apunta abajo plegado y rota 180° al abrir.
   Es hijo del summary, así el área táctil es la banda completa. */
.plegable-marca {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  transition: transform 150ms ease;
  pointer-events: none;
}
.plegable-marca::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 3.5px;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--blanco);
  border-bottom: 2.5px solid var(--blanco);
  transform: rotate(45deg);
}
.seccion-plegable[open] .plegable-marca { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .plegable-marca { transition: none; } }
.seccion-plegable-resumen:focus-visible .titulo-seccion-ficha,
.seccion-plegable-resumen:focus-visible .titulo-seccion {
  outline: 2px solid var(--verde-oscuro);
  outline-offset: 2px;
}

/* Dosis máxima: límite de seguridad, informativo. */
.dosis-maxima {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  margin: 1rem 0 0;
  padding: 0.6rem 0.85rem;
  background: var(--blanco);
  border: 1px solid rgb(91 107 99 / 0.25);
  border-radius: 12px;
  font-size: 0.95rem;
}
.dosis-maxima .icono-titulo { align-self: center; }
.dosis-maxima .icono-titulo svg { width: 18px; height: 18px; }
.dosis-maxima-rotulo { font-weight: 600; color: var(--titulo); }
.dosis-maxima-texto { color: var(--tinta); }

/* Preparación: tarjeta receta. */
.seccion-receta {
  padding: 1rem 1.15rem;
  background: var(--superficie-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

/* Contraindicaciones: borde rojo sobrio, fondo blanco. */
.seccion-prohibicion {
  padding: 0.9rem 1.15rem;
  background: var(--blanco);
  border: 1px solid rgb(168 39 30 / 0.25);
  border-radius: 12px;
  box-shadow: var(--sombra-sem);
}
.seccion-prohibicion .icono-titulo { color: var(--rojo-texto); }

/* Precauciones y reacciones adversas: borde ámbar. */
.seccion-cuidado {
  padding: 0.9rem 1.15rem;
  background: var(--blanco);
  border: 1px solid rgb(160 104 0 / 0.25);
  border-radius: 12px;
  box-shadow: var(--sombra-sem);
}
.seccion-cuidado .icono-titulo { color: var(--ambar-texto); }

/* Prospecto oficial: documento externo. */
.tarjeta-prospecto {
  padding: 0.9rem 1.15rem;
  background: var(--superficie-suave);
  border: 1px solid var(--borde);
  border-radius: 12px;
}
.tarjeta-prospecto p { margin: 0; }
.prospecto-producto { font-weight: 600; color: var(--titulo); }
.prospecto-enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
  font-weight: 600;
}
.prospecto-enlace svg { width: 15px; height: 15px; }
.prospecto-pie { margin-top: 0.35rem; font-size: 0.82rem; color: var(--tinta-suave); }

/* Índice compacto de secciones (móvil). */
.indice-compacto {
  margin: 1.25rem 0 0;
  padding: 0.6rem 0.9rem;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 12px;
}
.indice-compacto summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--verde-texto);
}
.indice-compacto ul {
  margin: 0.6rem 0 0.2rem;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
  font-size: 0.92rem;
}
@media (min-width: 900px) { .indice-compacto { display: none; } } /* L22e: desde 900 manda el índice lateral */

.fuentes {
  margin: 2rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borde);
}
.fuentes ul {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}
@media (min-width: 700px) { .fuentes ul { grid-template-columns: 1fr 1fr; } }
.fuentes li {
  margin: 0;
  font-size: 0.88rem;
  color: var(--tinta-suave);
  padding: 0.6rem 0.8rem;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
}
.fuentes li a { display: block; text-decoration: none; font-weight: 600; }
.fuentes li a:hover { text-decoration: underline; }
.fuente-dominio {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.25rem;
  font-family: var(--fuente-mono);
  font-size: 0.72rem;
  color: var(--tinta-suave);
}
.fuente-dominio svg { width: 13px; height: 13px; color: var(--verde-texto); }
.fuente-sin-verificar { font-size: 0.78rem; font-weight: 700; color: var(--ambar-texto); }


.sugerir-correccion {
  margin: 1.25rem 0 0;
  text-align: right;
  font-size: 0.82rem;
}
.sugerir-correccion a { color: var(--tinta-suave); }
.sugerir-correccion a:hover { color: var(--verde-texto); }

/* Enlace del canal de observaciones (ficha y Acerca de). */
.enlace-observacion {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.enlace-observacion svg { width: 16px; height: 16px; flex: none; }
.acerca .enlace-observacion { font-weight: 600; }
.acerca .enlace-observacion svg { width: 18px; height: 18px; }


/* --------------------------------------------------------------- acerca de */

.acerca-presentacion { font-size: 1.05rem; }

.acerca-prologo {
  margin: 1.5rem 0;
  padding: 1.15rem 1.3rem;
  background: var(--blanco);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: var(--sombra-sem); /* tarjeta del sistema (L20g) */
}
.acerca-prologo .pre-linea { margin: 0; }
.acerca-nota { margin: 0.75rem 0 0; font-size: 0.82rem; color: var(--tinta-suave); }

.acerca-instalar { margin: 1rem 0 0; }

/* Datos técnicos: bloque discreto en tinta suave, el único con versiones. */
.datos-tecnicos {
  margin: 2rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--borde);
  color: var(--tinta-suave);
}
.datos-tecnicos .titulo-seccion {
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave); /* L20g: la banda verde lo dejaba a 1,8:1 */
}
.datos-tecnicos dl {
  margin: 0.75rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  font-size: 0.88rem;
}
@media (min-width: 700px) { .datos-tecnicos dl { grid-template-columns: 1fr 1fr; } }
.datos-tecnicos dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.datos-tecnicos dd { margin: 0.15rem 0 0; }

.acerca-compartir {
  margin: 1.5rem 0;
  padding: 1.15rem 1.3rem;
  background: var(--blanco);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: var(--sombra-sem);
  text-align: center; /* L20g */
}
.acerca-compartir p { margin: 0.5rem 0 0; }
.qr-app {
  display: block;
  margin: 0.75rem auto 0;
  width: 200px;
  height: 200px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: #FFFFFF;
}

/* ---------------------------------------------------------- vista de error */

.vista-error .titulo-vista { color: var(--rojo-texto); }
.detalle-error {
  padding: 0.65rem 0.95rem;
  color: var(--rojo-texto);
  background: var(--rojo-fondo);
  border-radius: 10px;
  font-size: 0.9rem;
}

/* --------------------------------------------------- aviso de actualización */

.aviso-actualizacion {
  position: fixed;
  inset: auto 1rem calc(var(--alto-nav-inferior) + 0.75rem);
  z-index: 50;
  max-width: 26rem;
  margin: 0 auto;
  padding: 0.95rem 1.15rem;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-media);
}
@media (min-width: 900px) {
  .aviso-actualizacion { inset: auto 1rem 1rem; }
}
.aviso-actualizacion p { margin: 0 0 0.6rem; }
.aviso-acciones { display: flex; gap: 0.5rem; }

/* -------------------------------------------------- tamaño de texto A− / A+ */

.control-texto {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.control-texto button {
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--verde-texto);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 9px;
  cursor: pointer;
}
.control-texto button:hover { background: var(--verde-tenue); }
.control-texto button[disabled] { color: var(--tinta-suave); opacity: 0.5; cursor: default; }
.rail .control-texto {
  justify-content: center;
  padding: 0.35rem;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
}
/* Botón discreto de instalar: solo aparece si el navegador lo ofrece. */
.boton-instalar-cabecera {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  color: var(--verde-texto);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 9px;
  cursor: pointer;
}
.boton-instalar-cabecera svg { width: 20px; height: 20px; }
.boton-instalar-cabecera:hover { background: var(--verde-tenue); }
.boton-instalar-cabecera[hidden] { display: none; }

/* ------------------------------------------------------- esqueletos de carga */

/* Novedades de Acerca de (L12c): qué cambió en las últimas versiones. */
.novedades {
  margin: 1.5rem 0;
  padding: 1.15rem 1.3rem;
  background: var(--blanco);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: var(--sombra-sem); /* L20g */
}
.novedades .lista-novedades { margin: 0; padding: 0; list-style: none; }
.novedad + .novedad { margin-top: 1.1rem; }
.novedad-fecha {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--verde-texto);
}
.novedad-puntos { margin: 0; padding-left: 1.1rem; color: var(--tinta); }
.novedad-puntos li + li { margin-top: 0.25rem; }

/* Nota de una línea en el aviso de actualización: qué trae la versión nueva. */
.aviso-novedad {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}

/* El sprite de íconos vive inline en el <body> y no tiene que verse. Desde
   L12b no lleva atributo style (lo prohíbe la CSP): se oculta desde acá. */
#sprite-iconos { display: none; }

/* Bloque de cabecera del esqueleto de carga: antes venía con un atributo
   style inline, que la CSP ya no permite. */
.esqueleto-cabecera { height: 5.5rem; margin-top: 1rem; }

.esqueleto {
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: linear-gradient(100deg, var(--superficie-suave) 40%, var(--blanco) 50%, var(--superficie-suave) 60%);
  background-size: 200% 100%;
  animation: brillo-esqueleto 1.4s linear infinite;
  min-height: 5.2rem;
}
@keyframes brillo-esqueleto {
  from { background-position: 130% 0; }
  to { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .esqueleto { animation: none; background: var(--superficie-suave); }
}
.lista-esqueleto {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
@media (min-width: 700px) { .lista-esqueleto { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------- estados vacíos */
/* Ver .estado-vista (L24c, al final): un solo componente para vacío, 404 y
   error. */

/* ------------------------------------------------------------ calculadora */


.calculadora {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  margin: 1.25rem 0;
}
@media (min-width: 700px) {
  .calculadora { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.calc-campo { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.calc-campo label, .calc-etiqueta {
  font-size: 0.765rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde-texto);
}
.calc-campo select,
.calc-campo input {
  width: 100%;
  max-width: 100%;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--tinta);
  background: var(--blanco);
  border: 2px solid var(--borde-control);
  border-radius: 10px;
  min-height: 44px;
}
.calc-campo select:focus,
.calc-campo input:focus {
  outline: 3px solid var(--verde-oscuro);
  outline-offset: 1px;
  border-color: var(--verde-oscuro);
}
.calc-obligatorio label::after { content: " *"; color: var(--rojo-texto); }

.calc-dosis-fila {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.campo-con-unidad {
  position: relative;
  flex: 1;
  min-width: 0;
}
.campo-con-unidad input { width: 100%; padding-right: 5.4rem; }
.calc-unidad {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: var(--tinta-suave);
  white-space: nowrap;
  pointer-events: none;
  max-width: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.boton-incremento {
  flex: none;
  width: 48px;
  height: 48px;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--verde-texto);
  background: var(--blanco);
  border: 1.5px solid var(--verde-texto);
  border-radius: 10px;
  cursor: pointer;
}
.boton-incremento:hover { background: var(--verde-tenue); }
@media (min-width: 900px) {
  .boton-incremento { width: 44px; height: 44px; }
}

/* Modo como control segmentado (hasta 3 modos) */
.segmentado {
  display: flex;
  border: 2px solid var(--borde-control);
  border-radius: 10px;
  overflow: hidden;
  background: var(--blanco);
}
.segmentado button {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0.45rem 0.5rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tinta-suave);
  background: var(--blanco);
  border: none;
  border-right: 1px solid var(--borde);
  cursor: pointer;
}
.segmentado button:last-child { border-right: none; }
.segmentado button[aria-pressed="true"] {
  background: var(--verde-oscuro);
  color: #FFFFFF;
}
.segmentado button:not([aria-pressed="true"]):hover { background: var(--verde-tenue); color: var(--verde-oscuro); }

.calc-resultado {
  margin: 1rem 0 0;
  padding: 1.25rem 1.4rem;
  background: linear-gradient(135deg, var(--verde-tenue) 0, var(--blanco) 70%);
  border: 1.5px solid var(--verde-brisa);
  border-radius: var(--radio);
  box-shadow: var(--sombra-media);
}
.calc-resultado:empty { display: none; }
.calc-cifra {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--titulo);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.calc-cifra-secundaria {
  margin: 0.2rem 0 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--verde-texto);
}
.calc-detalle { margin: 0.4rem 0 0; font-size: 0.92rem; color: var(--tinta-suave); }
.calc-nota-modo { margin: 0.6rem 0 0; font-size: 0.88rem; color: var(--tinta-suave); }
.calc-nota-modo:empty { display: none; }
.calc-avisos .banner-aviso { margin: 0.6rem 0 0; }
.calc-bloqueo .detalle-error { margin: 0.6rem 0 0; font-weight: 600; }
.calc-seguridad { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.calc-seguridad li { margin: 0.3rem 0; }


/* ------------------------------------------- selector de ficha por genérico */

.selector-farmaco {
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 0;
  background: var(--blanco);
  box-shadow: var(--sombra-media);
  color: var(--tinta);
  width: min(92vw, 34rem);
}
.selector-farmaco::backdrop { background: rgb(22 36 31 / 0.35); }

.selector-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem 0.5rem;
}
.selector-titulo { margin: 0; font-size: 1.18rem; }
.selector-cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 9px;
  color: var(--tinta-suave);
  cursor: pointer;
}
.selector-cerrar:hover { background: var(--verde-tenue); color: var(--verde-oscuro); }
.selector-cerrar svg { width: 20px; height: 20px; }

.selector-lista {
  display: grid;
  margin: 0;
  padding: 0.35rem 0.6rem 0.85rem;
  list-style: none;
}
.selector-ficha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 0.8rem;
  align-items: center;
  padding: 0.6rem 0.55rem;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
}
.selector-ficha:hover { background: var(--superficie-suave); }
.selector-ficha .circulo-icono { grid-row: 1 / span 3; }
.selector-textos { display: grid; gap: 0.1rem; min-width: 0; }
.selector-presentacion { font-weight: 600; color: var(--titulo); }
.selector-marca { font-size: 0.88rem; color: var(--tinta-suave); }
.selector-vias { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.15rem; }
.chip-via {
  display: inline-flex;
  padding: 0.1rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tinta);
  background: var(--verde-tenue);
  border-radius: 999px;
}
.farmaco-insignias .chip-via { padding: 0.18rem 0.65rem; font-size: 0.78rem; }

/* Nota de seguridad de la vía (diluir, no dar en bolo…). */
.nota-via {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ambar-texto);
  background: var(--ambar-fondo);
  border: 1px solid var(--ambar-borde);
  border-radius: 10px;
}
.nota-via svg { width: 18px; height: 18px; flex: none; margin-top: 0.1rem; }

/* Hoja inferior en móvil; el popover anclado lo posiciona selector.js. */
@media (max-width: 899px) {
  .selector-farmaco {
    margin: auto 0 0;
    width: 100vw;
    max-width: none;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: subir-hoja 200ms ease both;
  }
}
@keyframes subir-hoja {
  from { transform: translateY(24px); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}
@media (min-width: 900px) {
  .selector-anclado { position: fixed; margin: 0; }
}

@media print {
  .calculadora .boton-incremento { display: none; }
}

/* ---------------------------------------------------- equipos (L15c) */

.equipos-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
}
@media (min-width: 700px) { .equipos-lista { grid-template-columns: 1fr 1fr; } }
.equipo-tarjeta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 76px;
  padding: 0.6rem 0.9rem;
  background: var(--blanco);
  border: 1px solid rgb(90 163 58 / 0.25);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sem);
  color: var(--titulo);
  text-decoration: none;
  transition: border-color var(--transicion), box-shadow var(--transicion), transform 120ms ease;
}
.equipo-tarjeta:hover { border-color: var(--verde-oscuro); box-shadow: var(--sombra-media); transform: translateY(-2px); }
.equipo-miniatura { flex: none; width: 56px; height: 56px; }
.equipo-cabecera { justify-content: space-between; gap: 1rem; }
.equipo-cabecera .titulo-vista { min-width: 0; }
.equipo-retrato { flex: none; width: 120px; height: 120px; }
@media (max-width: 479px) { .equipo-retrato { width: 96px; height: 96px; } }
.equipo-tarjeta .circulo-icono { flex: none; width: 44px; height: 44px; }
.equipo-tarjeta .circulo-icono svg { width: 28px; height: 28px; }
.equipo-tarjeta-texto { display: flex; flex-direction: column; min-width: 0; }
.equipo-tarjeta-nombre { font-size: 1.176rem; font-weight: 700; line-height: 1.3; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; color: var(--titulo); /* marcas sin silabeo (L20g) */ }
.equipo-tarjeta-detalle { font-size: 0.82rem; color: var(--tinta-suave); }

.equipo-detalle .guardia-cabecera .circulo-icono { flex: none; width: 46px; height: 46px; }
.equipo-subtitulo { margin: -0.4rem 0 0.7rem; color: var(--tinta-suave); }
/* Accesos directos de la cabecera del equipo (L19e). */
.equipo-accesos { margin: 0 0 1.2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.equipo-acceso-video { display: inline-flex; align-items: center; gap: 0.4rem; }
.icono-play { display: inline-flex; }
.icono-play svg { width: 18px; height: 18px; }

/* Control «Ver imagen del equipo» (L17d): tarjeta neutra del sistema con
   chevron; abierta muestra la ilustración centrada a ancho completo. */
.equipo-imagen-control { margin: 0 0 1.2rem; }
.equipo-imagen-control > .seccion-plegable-resumen { padding: 0.65rem 0.85rem; }
.equipo-imagen-rotulo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-right: 2.2rem;
  font-weight: 600;
  color: var(--sem-texto);
}
.equipo-imagen-control .plegable-marca::before { border-color: var(--tinta-suave); }
.equipo-imagen-figura {
  margin: 0;
  padding: 0 0.85rem 0.85rem;
  text-align: center;
}
.equipo-imagen-figura img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
}
.equipo-imagen-figura figcaption {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--tinta-suave);
}
.equipo-texto { margin: 0.4rem 0 0.9rem; }
.equipo-cita { color: var(--tinta-suave); font-size: 0.85em; }
.equipo-pasos { margin-bottom: 1rem; }

.equipo-checklist { list-style: none; margin: 0.5rem 0 0.3rem; padding: 0; }
.equipo-checklist li { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.55rem 0; }
.equipo-checklist input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  flex: none;
  margin-top: 0.1rem;
  accent-color: var(--verde-oscuro);
}
.equipo-checklist label { line-height: 1.5; }
.equipo-checklist li { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.35rem 0; }
.equipo-checklist input[type="checkbox"] {
  width: 22px; height: 22px; margin-top: 0.1rem; flex: none;
  accent-color: var(--verde-oscuro);
}
.equipo-checklist label { cursor: pointer; }
.equipo-nota-local { margin: 0 0 1rem; font-size: 0.85rem; color: var(--tinta-suave); }

.equipo-alarmas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; margin: 0.5rem 0 1rem; }
@media (min-width: 700px) { .equipo-alarmas { grid-template-columns: 1fr 1fr; } }
.equipo-alarma {
  padding: 0.65rem 0.85rem;
  background: var(--blanco);
  border: 1px solid rgb(160 104 0 / 0.25);
  border-radius: 12px;
  box-shadow: var(--sombra-sem);
}
.equipo-alarma-nombre { margin: 0 0 0.25rem; font-weight: 700; color: var(--ambar-texto); }
.equipo-alarma-detalle { margin: 0.15rem 0; font-size: 0.95rem; }

.equipo-consumibles { margin: 0.4rem 0 1rem; padding-left: 1.2rem; }
/* L22d: lámina a ancho completo; el texto explicativo va debajo en móvil y
   en dos columnas desde 900 px. Nada de texto dentro del SVG. */
.equipo-figura { margin: 0.6rem 0 1.2rem; display: grid; gap: 0.5rem 1rem; align-items: start; }
.equipo-figura img { display: block; width: 100%; height: auto; border: 1px solid var(--borde); border-radius: 12px; background: var(--blanco); }
.equipo-figura figcaption { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--tinta-suave); }
.equipo-figura-titulo { font-weight: 700; color: var(--tinta); }
.equipo-figura-rotulo { display: inline-block; width: max-content; padding: 0.1rem 0.55rem; border: 1px solid var(--hairline); border-radius: 99px; font-size: 0.78rem; font-weight: 600; color: var(--verde-texto); }
.equipo-figura-texto { font-size: 0.95rem; line-height: 1.55; color: var(--tinta); }
@media (min-width: 900px) { .equipo-figura { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.equipo-enlaces { margin-bottom: 1rem; }

.equipo-video {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.6rem 0.9rem; margin: 0.5rem 0 1rem;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 14px;
  color: var(--titulo); text-decoration: none; box-shadow: var(--sombra);
}
.equipo-video:hover { border-color: var(--verde-oscuro); box-shadow: var(--sombra-media); }
.equipo-video .circulo-icono { flex: none; width: 40px; height: 40px; }
.equipo-video-titulo { flex: 1; min-width: 0; font-weight: 600; }
.equipo-fuente { color: var(--tinta-suave); font-size: 0.95rem; }

@media print {
  .equipo-video, .equipo-enlaces { display: none !important; }
  .equipo-checklist input[type="checkbox"] { accent-color: #111; }
}

/* ---------------------------------------------------- guardia (L11) */

.guardia-bajada { margin: -0.4rem 0 1.1rem; color: var(--tinta-suave); }
.guardia-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.6rem;
}
@media (min-width: 900px) { .guardia-lista { grid-template-columns: repeat(3, 1fr); } }
.guardia-tarjeta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 76px;
  padding: 0.6rem 0.7rem;
  background: var(--superficie);
  border: 1px solid var(--hairline); /* L22d: sistema claro */
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
  color: var(--titulo);
  text-decoration: none;
  transition: border-color var(--transicion), box-shadow var(--transicion), transform 120ms ease;
}
.guardia-tarjeta:hover { border-color: var(--verde-oscuro); box-shadow: var(--sombra-media); transform: translateY(-2px); }
.guardia-tarjeta:focus-visible, .equipo-tarjeta:focus-visible, .equipo-video:focus-visible { outline: 3px solid var(--verde-oscuro); outline-offset: 2px; } /* L15d */
.guardia-tarjeta .circulo-icono { flex: none; width: 40px; height: 40px; background: #FFFFFF; color: var(--verde-brisa); box-shadow: var(--sombra-1); } /* L22d: círculo blanco */
.guardia-tarjeta .circulo-icono svg { width: 24px; height: 24px; }
.guardia-tarjeta-texto { display: flex; flex-direction: column; min-width: 0; }
/* L22d: silabeo por palabra (sin «epilépti-co»); las palabras largas del
   listado (organofosforados, cetoacidosis) exigen el ancho completo de la
   tarjeta en móvil, así que bajo 600 px el ícono va arriba del nombre. */
.guardia-tarjeta-titulo { font-weight: 600; font-size: 0.9rem; line-height: 1.3; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal; color: #2E6320; }
@media (max-width: 599.98px) {
  .guardia-tarjeta { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.7rem 0.75rem 0.75rem; }
  .guardia-tarjeta-texto { width: 100%; }
}
@media (min-width: 900px) {
  .guardia-tarjeta-titulo { font-size: 0.941rem; /* 16 px (L22d: 18 pedía cortes) */ font-weight: 700; }
  .guardia-tarjeta-detalle { font-size: 0.8rem; }
}
.guardia-tarjeta-detalle { font-size: 0.74rem; color: var(--tinta-suave); }

.guardia-fuente-fecha { color: var(--tinta-suave); }
.guardia-farmaco-nota { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--tinta-suave); }

/* Modo de lectura de emergencia: tipografía mayor que la ficha. */
.guardia-detalle { font-size: 1.118rem; /* 19 px */ line-height: 1.55; }
.guardia-cabecera { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.guardia-cabecera .titulo-vista {
  margin: 0;
  font-size: 1.882rem;
  min-width: 0;
  hyphens: auto;
  overflow-wrap: break-word;
}
@media (min-width: 900px) { .guardia-cabecera .titulo-vista { font-size: 2.353rem; } } /* 40 px (L16e) */
.guardia-pasos {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.guardia-paso {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 0.75rem;
  padding: 0 0 0.9rem;
  break-inside: avoid;
}
/* La línea del riel conecta cada círculo con el siguiente. */
.guardia-paso::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: -2px;
  width: 2px;
  background: var(--verde-tenue);
}
.guardia-paso:last-child::before { display: none; }
.guardia-paso-numero {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 0.35rem;
  border-radius: 50%;
  background: var(--verde-oscuro);
  color: var(--blanco);
  font-weight: 700;
  font-size: 0.9rem;
  position: relative;
  z-index: 1;
}
.guardia-paso-contenido {
  min-width: 0;
  padding: 0.85rem 0.95rem;
  background: var(--blanco);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--sombra-sem);
}
.guardia-paso-texto { margin: 0; white-space: pre-line; font-size: 1.059rem; /* 18 px: lectura de emergencia (L20e) */ }
.guardia-farmaco {
  margin-top: 0.7rem;
  padding: 0.8rem 0.85rem; /* compacta (L20e) */
  background: var(--verde-tenue); /* L21e: el nivel anidado se lee por banda */
  border: 1px solid rgb(90 163 58 / 0.25);
  border-radius: 12px;
  font-size: 0.94rem;
}
.guardia-farmaco-nombre {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.3rem;
  font-weight: 700;
  color: var(--titulo);
}
.guardia-farmaco-icono { display: inline-flex; color: var(--verde-oscuro); }
.guardia-farmaco-icono svg { width: 18px; height: 18px; }
.guardia-farmaco-dosis .dosis-rotulo { margin: 0.2rem 0 0; }
.guardia-farmaco-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.55rem 0 0;
}
.boton-chico { padding: 0.35rem 0.8rem; font-size: 0.88rem; min-height: 40px; }
.guardia-cronometro {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0.2rem 0 0.4rem;
}
.guardia-crono-lectura {
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--titulo);
}
.guardia-fuentes { margin-top: 1.6rem; font-size: 0.94rem; }
.guardia-fuentes ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.guardia-descargo {
  margin: 1.6rem 0 0;
  font-size: 0.84rem;
  color: var(--tinta-suave);
  border-top: 1px solid var(--borde);
  padding-top: 0.7rem;
}
/* Guardia en el lanzador: primero y con el filete de urgencia. */
.lanzador-guardia { border-color: rgb(90 163 58 / 0.35); }

@media print {
  .guardia-cronometro, .guardia-farmaco-acciones { display: none !important; }
  .guardia-paso-contenido { box-shadow: none; border-color: #999999; }
  .guardia-paso-numero { background: none; color: #111; border: 1.5pt solid #111; }
}

/* ------------------------ bomba de infusión integrada (L16c, ex L13c) */

/* La bomba ES la calculadora: escena (identidad + suero) arriba y cuerpo de
   bomba a ancho completo debajo; en escritorio el suero acompaña a la
   derecha. Proporciones y materiales de bomba real: panel gris claro con
   borde oscuro, pantalla verde-tenue con marco, teclado físico. */
.bomba {
  margin: 0.4rem 0 1.4rem;
  /* L18c: en móvil el suero acompaña al panel, a la derecha del bloque
     superior de la pantalla; la identidad va a lo ancho arriba. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(88px, 24vw, 118px);
  gap: 0 0.7rem;
  align-items: start;
}
.bomba-escena { display: contents; }
.bomba-identidad { min-width: 0; padding-top: 0.1rem; grid-column: 1 / -1; order: 1; margin-bottom: 0.45rem; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.7rem; row-gap: 0.25rem; }
.bomba-identidad .titulo-vista { flex-basis: 100%; }
.bomba-titulo { margin: 0; font-size: 1.647rem; /* 28 px (L19d) */ }
@media (min-width: 900px) { .bomba-titulo { font-size: 2.353rem; } } /* 40 px (L16e) */
.bomba-presentacion { margin: 0; color: var(--tinta-suave); font-size: 0.9rem; }
.bomba-identidad-acciones { margin: 0; }
.bomba-suero { order: 2; grid-column: 2; grid-row: 2; width: 100%; padding-top: 0.2rem; }
.bomba-suero-svg { overflow: visible; } /* el tubo cruza hacia la bomba (L20d) */
.bomba-suero-svg { display: block; width: 100%; height: auto; }

.bomba-panel {
  order: 3;
  grid-column: 1;
  grid-row: 2;
  position: relative;
  z-index: 1; /* el tubo de entrada pasa por detrás (L20d) */
  background: linear-gradient(180deg, #EDEFF2 0, #DEE2E7 100%);
  border: 2px solid #3A4149;
  border-radius: 18px;
  padding: 0.7rem 0.75rem 0.8rem; /* L19d */
  box-shadow: var(--sombra-media), inset 0 1px 0 rgb(255 255 255 / 0.7);
}
.bomba-marco {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin: -0.2rem 0 0.5rem;
}
.bomba-marco-nombre {
  /* L22d: el nombre nunca se trunca — 15 px, hasta dos líneas y el ancho
     que deje libre el estado (antes: una línea al 60 % con elipsis). */
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-family: var(--fuente-mono);
  font-size: 0.882rem; /* 15 px */
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1F2933;
}
.bomba-pantalla {
  background: var(--verde-tenue);
  border: 3px solid #2E6320;
  border-radius: 12px;
  padding: 0.6rem 0.8rem 0.7rem; /* L19d: denso, entra en 440×956 */
  box-shadow: inset 0 2px 6px rgb(31 41 51 / 0.18);
  transition: background var(--transicion), border-color var(--transicion);
}
.bomba-bloqueada .bomba-pantalla { background: var(--rojo-fondo); border-color: var(--rojo-texto); }
.bomba-estado {
  flex: none;
  text-align: right;
  margin: 0;
  font-family: var(--fuente-mono);
  font-size: 0.706rem; /* 12 px (L22d) */
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--verde-texto, #2E6320);
}
.bomba-bloqueada .bomba-estado { color: var(--rojo-texto); }
.bomba-pide-peso .bomba-estado { font-weight: 700; }
.bomba-campos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.45rem 0.6rem; margin-bottom: 0.45rem; }
.bomba-campos .calc-campo { grid-column: span 2; }
.bomba-campos .calc-campo { margin: 0; min-width: 0; }
.bomba-campos .calc-campo:first-child { grid-column: 1 / -1; }
.bomba-campos .calc-campo:has(.segmentado) { grid-column: 1 / -1; }
.bomba-campos label, .bomba-campos .calc-etiqueta {
  display: block; margin-bottom: 0.15rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--tinta-suave);
}
.bomba-campos input, .bomba-campos select {
  width: 100%; padding: 0.4rem 0.5rem;
  font: inherit; font-size: max(0.95rem, 16px); /* L18c: iOS no re-escala bajo 16 px */
  text-overflow: ellipsis;
  color: var(--tinta); background: var(--blanco);
  border: 1px solid var(--borde); border-radius: 8px;
}
.bomba-campos input:focus-visible, .bomba-campos select:focus-visible {
  outline: 3px solid var(--verde-oscuro); outline-offset: 1px;
}
.bomba-campos .campo-con-unidad { position: static; display: block; }
.bomba-campos .campo-con-unidad input { padding-right: 0.5rem; }
.bomba-campos .calc-unidad {
  position: static;
  transform: none;
  display: block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  white-space: nowrap;
  color: var(--tinta-suave);
}
.bomba-campos .segmentado { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.bomba-velocidad { margin: 0.1rem 0 0; font-family: var(--fuente-mono); }
.bomba-cifra { font-size: 2.2rem; font-weight: 700; color: var(--titulo); letter-spacing: -0.01em; }
.bomba-unidad { font-size: 1rem; color: var(--tinta-suave); }
.bomba-secundaria { margin: 0.1rem 0 0.15rem; font-family: var(--fuente-mono); font-size: 0.78rem; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* L23b: la mano con venas es un <img> cacheable y, encima, un svg inline
   con la misma viewBox (tubo, catéter, apósito): comparten la caja. */
.bomba-brazo { grid-column: 1 / -1; order: 4; margin: -8px 0 0; position: relative; width: min(100%, 430px); }
.bomba-brazo-img { display: block; width: 100%; height: auto; }
.bomba-brazo-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.bomba-nota {
  grid-column: 1 / -1;
  order: 5; /* después del brazo (L20d) */
  margin-top: 0.8rem;
  padding: 1.05rem 1.1rem;
}
/* Dentro de la tarjeta de nota, el recuadro del motor no duplica marco. */
.bomba-nota .calc-resultado { border: 0; padding: 0; margin: 0; background: none; box-shadow: none; }
.bomba-nota .banner-aviso { padding: 0; border: 0; background: none; box-shadow: none; } /* L21e */
.bomba-nota:empty { display: none; }
.bomba-resultado .calc-cifra { margin: 0.3rem 0 0.1rem; font-size: 1.35rem; font-weight: 700; }
.bomba-resultado .calc-detalle { margin: 0.15rem 0; font-size: 0.9rem; }
.bomba-resultado .calc-nota-modo { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--tinta-suave); }
.bomba-resultado .banner-aviso { margin: 0.4rem 0 0; }
.bomba-aviso { margin: 0.4rem 0 0; font-weight: 700; color: var(--rojo-texto); }

/* Frente de la bomba (L20d): puerta del rotor a la izquierda de las teclas;
   en anchos angostos la rueda queda arriba y el teclado en su fila. */
.bomba-frente {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.6rem;
}
.bomba-rueda {
  flex: none;
  width: 60px;
  padding: 4px;
  background: linear-gradient(180deg, #E9EBEE 0, #D8DCE1 100%);
  border: 1.5px solid #9AA1A9;
  border-radius: 12px;
}
.bomba-rueda-svg { display: block; width: 100%; height: auto; }
@media (max-width: 419.98px) {
  .bomba-frente { flex-wrap: wrap; }
  .bomba-teclas { flex-basis: 100%; }
}
.bomba-rueda-rotor { transform-box: fill-box; transform-origin: center; }
.bomba-en-curso .bomba-rueda-rotor {
  animation: bomba-rueda var(--rueda-ms, 6000ms) linear infinite;
}
@keyframes bomba-rueda { to { transform: rotate(360deg); } }
.bomba-en-curso .bomba-rueda-led { fill: var(--verde-brisa); }
.bomba-tubo {
  fill: none;
  stroke: var(--verde-oscuro);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.bomba-flujo {
  fill: none;
  stroke: var(--verde-brisa);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 7 9;
  opacity: 0;
}
.bomba-en-curso .bomba-flujo {
  opacity: 1;
  animation: bomba-flujo var(--rueda-ms, 6000ms) linear infinite;
}
@keyframes bomba-flujo { to { stroke-dashoffset: -160; } }

.bomba-teclas {
  display: flex; flex-wrap: nowrap; gap: 0.5rem;
  margin-top: 0; justify-content: center; flex: 1; min-width: 0;
}
/* L19d: en anchos angostos la bomba se densifica para que identidad, suero,
   pantalla y teclas entren y el desplazamiento quede solo para la nota. */
@media (max-width: 419.98px) {
  .bomba { margin-top: 0.15rem; }
  .bomba-titulo { font-size: 1.529rem; } /* 26 px */
  .bomba-identidad { margin-bottom: 0.3rem; }
  .bomba-cifra { font-size: 1.88rem; }
  .bomba-secundaria { font-size: 0.78rem; }
  .bomba-marco { margin-bottom: 0.35rem; }
  .bomba-campos { gap: 0.35rem 0.6rem; }
  .bomba-campos input, .bomba-campos select { padding: 0.3rem 0.45rem; }
  .bomba-campos .segmentado button { padding: 0.3rem 0.55rem; }
  .bomba-tecla { min-height: 42px; padding: 0.35rem 0.8rem; }
  .bomba-teclas { margin-top: 0.5rem; }
  .infusion-detalle .miga { margin: 0 0 0.25rem; }
  .bomba-panel { padding-bottom: 0.65rem; }
}
.bomba-tecla {
  min-width: 46px; min-height: 46px;
  padding: 0.45rem 0.6rem;
  font: inherit; font-weight: 700; color: var(--tinta);
  background: linear-gradient(180deg, #FFFFFF 0, #E4E7EB 100%);
  border: 1.5px solid #9AA1A9;
  border-bottom-width: 3px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 90ms ease, background var(--transicion);
}
.bomba-tecla:active { transform: translateY(1px); border-bottom-width: 1.5px; }
.bomba-tecla:focus-visible { outline: 3px solid var(--verde-oscuro); outline-offset: 2px; }
.bomba-tecla:disabled { opacity: 0.45; cursor: not-allowed; }
.bomba-tecla-paso { font-size: 1.3rem; min-width: 44px; }
.bomba-tecla-iniciar {
  color: #FFFFFF;
  background: linear-gradient(180deg, #3B7A2A 0, var(--verde-oscuro) 100%);
  border-color: #1E4415;
}
.bomba-bloqueada .bomba-tecla-iniciar { background: linear-gradient(180deg, #C24E44 0, var(--rojo-texto) 100%); border-color: #7A1C15; }

/* L22e: la misma retícula rige en móvil apaisado (≥700 px de ancho): el
   suero entero al costado, desde la identidad, y la bomba a la izquierda. */
@media (min-width: 900px), (min-width: 700px) and (orientation: landscape) {
  .bomba {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 0 1.6rem;
    align-items: start;
  }
  .bomba-escena { display: contents; }
  .bomba-identidad { order: 1; grid-column: 1; }
  .bomba-suero { order: 2; grid-column: 2; grid-row: 1 / span 2; width: 160px; justify-self: center; padding-top: 0.6rem; }
  .bomba-panel { order: 3; grid-column: 1; }
  /* L23b: la mano va a la derecha del cuerpo de la bomba, al pie de la
     columna del suero. La caja (360 px) es más ancha que la columna y se
     alinea al final: desborda hacia la izquierda por detrás del panel
     (z-index 1), así el tubo y el antebrazo salen del canto derecho de la
     bomba sin cruzar textos. Queda por debajo del pie del suero. */
  .bomba-brazo { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; width: 360px; margin: 0 0 0.3rem; }
}

/* Animación del goteo (se conserva de L13c; reduced-motion la apaga). */
.bomba-gota { opacity: 0; }
.bomba-en-curso .bomba-gota {
  animation: bomba-gota var(--gota-ms, 1000ms) linear infinite;
}
@keyframes bomba-gota {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  78% { transform: translateY(26px); opacity: 1; }
  92% { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(30px); opacity: 0; }
}
.bomba-en-curso .bomba-charco {
  animation: bomba-charco var(--gota-ms, 1000ms) linear infinite;
  transform-origin: 80px 188px;
}
@keyframes bomba-charco {
  0%, 70% { transform: scaleY(1); }
  85% { transform: scaleY(1.18); }
  100% { transform: scaleY(1); }
}
.bomba-en-curso .bomba-estado { color: var(--verde-texto); }
.bomba-en-curso .bomba-tecla-iniciar { background: var(--rojo-texto); border-color: var(--rojo-texto); }

@media (prefers-reduced-motion: reduce) {
  .bomba-en-curso .bomba-gota, .bomba-en-curso .bomba-charco, .bomba-en-curso .bomba-liquido { animation: none; }
  .bomba-en-curso .bomba-gota { opacity: 1; }
  /* L18c/L19d: rueda y flujo estáticos; el tubo teñido, el LED verde y el
     estado «En curso» son el indicador. */
  .bomba-en-curso .bomba-rueda-rotor { animation: none; }
  .bomba-en-curso .bomba-flujo { animation: none; opacity: 1; }
}

@media print {
  .bomba-teclas { display: none !important; }
  .bomba-panel { background: none; box-shadow: none; }
}

/* ------------------------------------------------------------------ varios */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------- diagrama de mecanismo (L10a) */

/* El SVG se carga como <img>: trae sus colores adentro y escala con el ancho
   del contenido. A 375 px queda en ~340: el diagrama está dibujado para que
   sus rótulos sigan leyéndose, y el botón «Ampliar» lo abre a pantalla. */

.figura-diagrama {
  margin: 0.9rem 0 0.2rem;
  padding: 0;
}
.figura-diagrama img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--blanco);
}
.figura-diagrama-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  font-size: 0.84rem;
  color: var(--tinta-suave);
}
.boton-ampliar {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex: none;
  min-height: 2.2rem;
  padding: 0.25rem 0.8rem;
  font: inherit;
  font-weight: 600;
  color: var(--verde-texto);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 999px;
  cursor: pointer;
}
.boton-ampliar:hover { border-color: var(--verde-brisa); color: var(--verde-oscuro); }
.boton-ampliar svg { width: 16px; height: 16px; }

/* ------------------------------------------------ modal del diagrama */

body.con-modal { overflow: hidden; }

.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgb(22 36 31 / 0.55);
}
.modal-caja {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 1100px;
  max-height: 92vh;
  overflow: auto;
  padding: 1rem;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-media);
}
.modal-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.modal-titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--titulo);
}
.modal-cerrar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 999px;
  cursor: pointer;
}
.modal-cerrar:hover { border-color: var(--verde-brisa); color: var(--verde-oscuro); }
.modal-cerrar svg { width: 20px; height: 20px; }
.modal-imagen {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--borde);
  border-radius: 12px;
}

/* Los nombres de marca y modelo no se silabean (L20g). */
.equipo-detalle .guardia-cabecera .titulo-vista { -webkit-hyphens: manual; hyphens: manual; }

/* ------------------------------- recientes, favoritos y notas (L12f) */

/* Dos filas compactas bajo el lanzador. Envuelven en vez de scrollear: a
   320 px no esconden contenido ni compiten con el gesto de swipe. */
.inicio-personales { width: 100%; max-width: 30rem; margin: 0 auto; }
.fila-personal { margin-top: 1.25rem; text-align: left; }
/* Buscar V2 (L20c): ayuda discreta bajo el campo, filas de retícula para
   recientes/favoritos y tiles de grupos con conteo. */
.buscar-ayuda { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--tinta-suave); }
.buscar-ejemplo {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  color: var(--verde-texto);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.buscar-seccion { margin-top: 1.3rem; }
.buscar-seccion .lista-tarjetas { margin-top: 0.5rem; }
.buscar-grupos {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.buscar-grupo-tile {
  /* Vertical: insignia y conteo arriba, nombre a lo ancho (los nombres de
     grupo largos no se silabean en migajas). */
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "insignia . conteo" "nombre nombre nombre";
  align-items: center;
  gap: 0.45rem 0.5rem;
  min-height: 84px;
  padding: 0.6rem 0.7rem;
  background: var(--blanco);
  border: 1px solid var(--hairline);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sem);
  color: var(--titulo);
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color var(--transicion);
}
.buscar-grupo-tile:hover { border-color: var(--verde-brisa); transform: translateY(-2px); box-shadow: var(--sombra-media); } /* L21e */
.buscar-grupo-tile:active { transform: scale(0.98); }
.buscar-grupo-insignia {
  grid-area: insignia;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #FFFFFF;
  color: var(--verde-brisa); /* L22d: círculo blanco con el ícono en acento, como en el panal */
  box-shadow: var(--sombra-1);
}
.buscar-grupo-insignia .icono { width: 24px; height: 24px; color: var(--verde-brisa); }
.buscar-grupo-nombre { grid-area: nombre; min-width: 0; font-size: 0.88rem; font-weight: 600; line-height: 1.25; }
@media (min-width: 700px) {
  .buscar-grupos { gap: 0.7rem; }
  .buscar-grupo-tile { grid-template-areas: "insignia nombre conteo"; min-height: 0; padding: 0.75rem 0.95rem; }
  .buscar-grupo-nombre { font-size: 1rem; } /* L21e */
}
.buscar-grupo-conteo {
  grid-area: conteo;
  min-width: 24px;
  padding: 0.1rem 0.4rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--verde-texto);
  background: var(--verde-tenue);
  border-radius: 99px;
}

.buscar-inicial { margin-top: 0.4rem; }
.buscar-enlace-sistemas { margin: 1.1rem 0 0; }
.buscar-enlace-sistemas a { color: var(--verde-texto); font-weight: 600; }
.fila-personal-titulo {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.fila-personal-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip-personal {
  display: inline-block;
  max-width: 100%;
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--verde-oscuro);
  background: var(--verde-tenue);
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
}
.chip-personal:hover { border-color: var(--verde-brisa); }

/* Estrella de favorito en la ficha. */
/* Favorito activo (L13b): el corazón se rellena. */
.boton-icono.es-favorito svg { fill: var(--verde-oscuro); }

/* Nota personal al pie de la ficha. */
.nota-estado { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--verde-texto); min-height: 1.2em; }
/* Aviso permanente del bloque de notas: mismo tratamiento que las notas de
   prospecto, y arriba del área para que se lea antes de escribir. */
.datos-locales .boton[disabled] { opacity: 0.55; cursor: default; }

/* «¿Quisiste decir…?»: los resultados aproximados van rotulados aparte (L12e). */
.quisiste-decir {
  margin: 1.5rem 0 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tinta-suave);
}

/* --------------------------------------------- vademécum completo (L12d) */

.imprimir-portada { margin-bottom: 2rem; }
.imprimir-bajada { margin: 0 0 1rem; color: var(--tinta-suave); max-width: 46ch; }
.imprimir-acciones { margin: 0; }
.hoja-ficha + .hoja-ficha { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--borde); }
.titulo-ficha-impresa { margin-top: 0; }

/* -------------------------------------------------------------- impresión */

.impresion-cabecera { display: none; }

@media print {
  @page { size: A4; margin: 1.6cm; }
  html { font-size: 11pt; }
  body { background: #FFFFFF; padding-top: 0; }
  .fondo-red { display: none !important; }
  .tarjeta-escenario, .bloque-dosis, .aviso, .guardia-farmaco, .equipo-alarma, .farmaco-cabecera, .guardia-tarjeta, .equipo-tarjeta, .banner-aviso { box-shadow: none !important; }
  .cabecera, .rail, .nav-inferior, .saltar, .aviso-actualizacion,
  .farmaco-acciones, .indice-lateral, .barra-letras,
  .lanzador, .buscador, .miga, .banner-aviso,
  .inicio-pie, .acerca-instalar, .selector-farmaco, .panel-texto,
  .boton-ampliar, .modal-fondo { display: none !important; }
  /* El diagrama sí se imprime: es parte del mecanismo. */
  .figura-diagrama { break-inside: avoid; page-break-inside: avoid; }
  /* Vademécum completo: una ficha por página y sin la portada de pantalla. */
  .imprimir-portada { display: none !important; }
  .hoja-ficha { break-after: page; page-break-after: always; margin: 0; padding: 0; border: none; }
  .hoja-ficha:last-child { break-after: auto; page-break-after: auto; }
  .hoja-ficha .farmaco-cuerpo { display: block; }
  .figura-diagrama img { border-color: #999999; }
  .impresion-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1cm;
    padding-bottom: 0.4cm;
    margin-bottom: 0.6cm;
    border-bottom: 1pt solid #999999;
  }
  /* Impresión: cap de 13 px para ambos (L16g). */
  .impresion-cabecera .logo-brisa { height: 25.6px; width: auto; } /* L20a */
  .impresion-cabecera .logo-pae { height: 31.9px; width: auto; }
  .disposicion { display: block; max-width: none; padding: 0; }
  .titulo-seccion { color: #111111; background: none; border-radius: 0; padding: 0; }
  .farmaco-cabecera {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 0 0.4cm;
  }
  .seccion-destacada, .seccion-suave {
    background: none;
    border: 1pt solid #999999;
  }
  .chip-grupo, .insignia-embarazo {
    background: none;
    border: 1pt solid #999999;
    color: #000000;
  }
  .titulo-seccion, .letra-encabezado { color: #333333; }
  a, .volver { color: #000000; }
  .seccion-ficha { break-inside: avoid-page; }
  /* Los avisos se imprimen sí o sí: el navegador puede no imprimir fondos,
     así que en papel el recuadro lo sostiene el borde, no el color. */
  .aviso {
    background: none;
    color: #000000;
    border: 1.5pt solid #000000;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .aviso-icono { stroke: #000000; }
  .aviso-detalle { color: #333333; }
  /* En papel el acordeón no existe: beforeprint (app.js) abre los details y
     la banda del summary se imprime como cualquier título. */
  .plegable-marca { display: none; }
  .titulo-seccion-ficha {
    background: none;
    color: #111111;
    border: 1pt solid #999999;
  }
  .titulo-seccion-ficha .icono-titulo { color: #111111; }
  .cuadro-rapido-tabla, .cuadro-rapido-tabla th, .cuadro-rapido-tabla td { border-color: #999999; }
  a { color: inherit; text-decoration: none; }
  .fuentes a::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555555; }
  /* L20a: pareja por área de tinta también en el pie impreso. */
  .pie-logos .logo-brisa { height: 25.6px; }
  .pie-logos .logo-pae { height: 31.9px; }
}

/* ======================================================================
   L22f · Auditoría de tono (HIG): correcciones de Buscar, Acerca de y
   Equipos. Van al final para que ganen por orden a las reglas previas de
   igual especificidad; cada una lleva su porqué en docs/DISENO.md.
   ====================================================================== */

/* --- Buscar ----------------------------------------------------------- */
/* Campo: un solo marco de 1 px (borde-control, 4,4:1) y un solo anillo de
   foco; antes 2 px + outline separado = doble marco. */
.buscador input[type="search"] {
  border: 1px solid var(--borde-control);
  padding: calc(0.85rem + 1px) 3rem calc(0.85rem + 1px) 2.9rem;
  box-shadow: var(--sombra-1);
}
.buscador input[type="search"]:focus {
  border-color: var(--verde-oscuro);
  outline: 3px solid var(--verde-oscuro);
  outline-offset: -1px;
}
/* Ejemplos y enlace: 44 px tocables sin mover el ritmo. */
.buscar-ayuda { line-height: 2; }
.buscar-ejemplo { position: relative; display: inline-block; padding: 0 0.15rem; }
.buscar-ejemplo::before { content: ""; position: absolute; inset: -8px -6px; }
.buscar-enlace-sistemas a { display: inline-block; padding: 12px 0; margin: -12px 0; }
/* Resultados: 1 rem entre «Probá:» y la primera tarjeta (estaban pegados). */
.resultados > .lista-tarjetas:first-child { margin-top: 1rem; }
/* Tiles de grupo: filas parejas y la misma calle (12 px) que las tarjetas. */
.buscar-grupos { gap: 12px; }
.buscar-grupos > li { display: grid; }
/* Estado vacío: insignia del sistema y columna de lectura acotada (desde
   L24c vive en .estado-vista, al final). */
/* Coincidencia: subrayado en acento con el peso del contexto (antes solo
   color, y 600 dentro de un genérico 700 pesaba menos que el resto). */
mark {
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: var(--verde-brisa);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}

/* --- Acerca de -------------------------------------------------------- */
.acerca { max-width: 38rem; } /* ≈ 75 caracteres a 17 px */
.acerca-ajustes .control-texto button { min-width: 44px; min-height: 44px; border-radius: 10px; }
.acerca .enlace-observacion { min-height: 44px; padding: 0.5rem 0; }
.acerca-compartir a { display: inline-block; padding: 0.75rem 0; }
.acerca-prologo, .acerca-compartir, .novedades { border-radius: var(--radio); }
.qr-app { border-radius: 10px; }
.novedad-puntos { list-style: disc; }
.acerca-prologo p + p { margin-top: 0.75rem; }
/* Desplegable «Instalar en iPhone»: chevron de trazo 1,75, fila de 44 px. */
.instalar-iphone summary { list-style: none; display: flex; align-items: center; gap: 0.5rem; min-height: 44px; }
.instalar-iphone summary::-webkit-details-marker { display: none; }
.instalar-iphone summary::before {
  content: ""; width: 0.55em; height: 0.55em; flex: none;
  border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--transicion);
}
.instalar-iphone[open] summary::before { transform: rotate(45deg); }
/* «Imprimir vademécum completo» con forma de acción secundaria. */
.acerca-imprimir { margin: 1.5rem 0 0; }
.acerca-imprimir a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.15rem;
  font-weight: 600; text-decoration: none; color: var(--verde-texto);
  background: var(--superficie); border: 1px solid var(--verde-texto); border-radius: 10px;
}
.acerca-imprimir a:hover { background: var(--verde-tenue); color: var(--verde-oscuro); }

/* --- Equipos ---------------------------------------------------------- */
.equipo-tarjeta { background: var(--superficie); border: 1px solid var(--hairline); box-shadow: var(--sombra-1); }
.equipo-tarjeta:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }
.equipo-tarjeta-nombre, .equipo-cabecera .titulo-vista { text-wrap: balance; }
.equipo-imagen-rotulo .insignia-sem { width: 30px; height: 30px; border-radius: 50%; background: var(--superficie); color: var(--verde-brisa); box-shadow: var(--sombra-1); }
.equipo-imagen-rotulo .insignia-sem svg { width: 20px; height: 20px; }
.equipo-imagen-figura img { max-width: 560px; max-height: 320px; margin: 0 auto; }
/* Alarmas y fuente: sin justificado ni silabeo (columnas angostas hacían
   ríos y «pa-/las»). */
.equipo-alarma-detalle, .equipo-fuente { text-align: left; -webkit-hyphens: manual; hyphens: manual; }
.equipo-figura figcaption { font-size: 0.95rem; }
.equipo-figura-titulo { font-size: 1.059rem; line-height: 1.3; }
.equipo-checklist li { min-height: 44px; }
.equipo-checklist label { flex: 1 1 auto; }
@media (max-width: 899.98px) {
  .equipo-accesos .boton-chico, .equipo-enlaces .boton-chico { min-height: 44px; padding-block: 0.5rem; }
}
@media (min-width: 700px) {
  .equipo-detalle .equipo-texto, .equipo-detalle .equipo-consumibles,
  .equipo-detalle .equipo-checklist, .equipo-detalle .equipo-nota-local,
  .equipo-detalle .equipo-pasos { max-width: 70ch; }
}

/* --- Guardia ---------------------------------------------------------- */
/* Prosa a la izquierda bajo 600 px (31–37 caracteres por línea hacían
   ríos al justificar); la dosis anidada nunca alcanza 60 cpl. */
@media (max-width: 599.98px) { .guardia-paso-texto { text-align: left; } }
.guardia-farmaco .pre-linea { text-align: left; }
/* Bloque de fármaco: pozo claro con hairline en vez de panel tintado con
   borde (tarjeta dentro de tarjeta); dosis a 17 px, no por debajo de la prosa. */
.guardia-farmaco { background: var(--superficie-2); border: 1px solid var(--hairline); font-size: 1rem; }
.guardia-detalle { max-width: 44rem; } /* 75 cpl a 18 px */
/* Riel: número centrado con la primera línea y línea del riel visible. */
.guardia-paso-numero { margin-top: 0.875rem; }
.guardia-paso::before { top: 44px; background: rgb(46 99 32 / 0.24); }
.guardia-paso-contenido { border-radius: var(--radio); }
/* Cabecera del detalle: insignia del sistema, junto a la primera línea. */
.guardia-detalle .guardia-cabecera { align-items: flex-start; }
.guardia-detalle .guardia-cabecera .circulo-icono { background: var(--superficie); color: var(--verde-brisa); box-shadow: var(--sombra-1); }
@media (min-width: 900px) { .guardia-detalle .guardia-cabecera .circulo-icono { margin-top: 3px; } }
.guardia-farmaco-acciones .boton { min-height: 44px; }
.guardia-tarjeta-titulo, .guardia-cabecera .titulo-vista { text-wrap: balance; }
.guardia-tarjeta-titulo { color: var(--verde-oscuro); }
.guardia-tarjeta:hover { border-color: var(--hairline); } /* elevación sin borde de color */
.guardia-cronometro .boton { min-width: 11rem; justify-content: center; } /* sin salto al alternar Iniciar/Detener */

/* --- Infusiones ------------------------------------------------------- */
/* Pantalla a 390/440: Peso | Dosis a mitades, Modo y Velocidad a lo ancho;
   antes tres columnas de 54 px recortaban «VELOCIDAD (ML/H)», el valor y
   la unidad. */
@media (max-width: 479.98px) {
  .bomba-campos .calc-campo { grid-column: span 3; }
  .bomba-campos .calc-campo:has(#calc-modo),
  .bomba-campos .calc-campo:has(#calc-mlh) { grid-column: 1 / -1; }
  .bomba-campos label, .bomba-campos .calc-etiqueta { white-space: nowrap; }
}
.bomba-campos input, .bomba-campos select { text-overflow: clip; border: 1px solid var(--borde-control); } /* 3,9:1 sobre la pantalla */
.bomba-campos .calc-unidad { max-width: none; overflow: visible; text-overflow: clip; }
.bomba-secundaria { white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; } /* el tiempo estimado no se elipsa ni parte «10 / h» */
.bomba-tecla, .bomba-rueda { border-color: #6B7480; } /* 3,6:1 sobre el frente */
/* Teclas: nunca más angostas que su rótulo; bajo 420 px la rueda sube a su
   fila (la regla previa quedaba anulada por `.bomba-teclas { flex: 1 }`). */
.bomba-tecla { flex: none; }
@media (max-width: 419.98px) {
  .bomba-frente .bomba-teclas { flex: 1 1 100%; flex-wrap: wrap; }
}
/* L22g: el segmentado en columna rige hasta 479 px (a 440 dos botones de
   118 px partían «mantenimien/to»). */
@media (max-width: 479.98px) {
  .bomba-campos .segmentado { flex-direction: column; gap: 0; }
  .bomba-campos .segmentado button { flex: 1 1 auto; border-right: 0; border-bottom: 1px solid var(--borde); }
  .bomba-campos .segmentado button:last-child { border-bottom: 0; }
}
@media (min-width: 420px) and (max-width: 479.98px) { .bomba-teclas { flex-wrap: wrap; } }
.segmentado button { overflow-wrap: anywhere; }
@media (max-width: 899.98px) { .bomba-etiqueta-concentracion { display: none; } } /* 5,6 px: ilegible; queda el nombre */
/* Debajo de la bomba en escritorio: nota y brazo alineados con el cuerpo,
   resultado en tinta (no como metadato). */
@media (min-width: 900px) { .bomba-nota { grid-column: 1; } } /* L23b: la mano ya no va acá (columna 2, bloque de escritorio) */
.bomba-resultado .calc-detalle { color: var(--tinta); font-size: 1rem; }
/* Listado: el chip de grupo baja del nombre (como en A–Z) y no se trunca. */
@media (max-width: 479.98px), (min-width: 700px) {
  .tarjeta-infusion { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nombre" "chip" "prep" "modo"; }
  .tarjeta-infusion .chip-grupo { justify-self: start; margin: 0.15rem 0 0.1rem; }
}
.tarjeta-infusion .chip-grupo > span { white-space: normal; overflow: visible; text-overflow: clip; }
.tarjeta-infusion { border-color: var(--hairline); box-shadow: var(--sombra-1); }
/* Chips de acceso rápido: 38 px + zona táctil, y fila envuelta desde 700. */
.chip-calculadora { position: relative; min-height: 38px; }
@media (pointer: coarse) { .chip-calculadora::before { content: ""; position: absolute; inset: -4px 0; } }
@media (min-width: 700px) {
  .chips-calculadora { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; -webkit-mask-image: none; mask-image: none; }
}

/* --- Ficha de fármaco y vista de clase --------------------------------- */
/* Objetivos táctiles de 44 px sin engordar los chips. */
.boton-icono { width: 44px; height: 44px; border-color: var(--hairline); box-shadow: var(--sombra-1); }
.boton-icono:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }
.boton-info-embarazo { width: 44px; height: 44px; margin: -10px 0; }
.farmaco-insignias .chip-grupo, .insignia-embarazo { position: relative; }
.farmaco-insignias .chip-grupo::before, .insignia-embarazo::before { content: ""; position: absolute; inset: -9px 0; }
.indice-compacto summary { min-height: 44px; }
.boton-ampliar { min-height: 44px; }
.enlace-observacion { min-height: 44px; display: inline-flex; align-items: center; }
.seccion-plegable-resumen:focus-visible .titulo-seccion-ficha,
.seccion-plegable-resumen:focus-visible .titulo-seccion { outline-width: 3px; }
/* Posología: una sola elevación por bloque (antes tres marcos anidados). */
.bloque-dosis .tarjeta-escenario, .bloque-dosis .dosis-maxima { box-shadow: none; border-color: var(--hairline); }
/* Cabecera: superficie blanca, insignia del sistema, chips de una sola gramática. */
.farmaco-cabecera { background: var(--superficie); border: 1px solid var(--hairline); box-shadow: var(--sombra-1), var(--luz-interior); }
.farmaco-icono-cabecera { background: var(--superficie); color: var(--verde-brisa); box-shadow: var(--sombra-1); }
.insignia-embarazo { background: var(--verde-tenue); border-color: var(--hairline); }
.tarjeta-prospecto, .seccion-receta { background: var(--superficie); box-shadow: var(--sombra-1); }
.farmaco-cabecera .titulo-vista, .vista-mecanismo .titulo-vista { text-wrap: balance; }
.vista-mecanismo .banner-aviso, .vista-mecanismo .figura-diagrama, .vista-mecanismo .mecanismo-resumen { max-width: 42rem; }
@media (min-width: 700px) and (max-width: 899.98px) { .farmaco-cuerpo { max-width: 40rem; margin-inline: auto; } } /* ≈ 75 cpl en iPad vertical */

/* --- Prosa en columnas angostas ---------------------------------------- */
/* Bajo 600 px las columnas dan 31–42 caracteres por línea: justificar
   abre ríos y el silabeo automático parte «rit-mos». Queda a la izquierda,
   como la HIG; desde 600 px sigue la regla L18a. */
@media (max-width: 599.98px) {
  .prosa-justificada, .seccion-ficha .pre-linea, .dosis-texto, .equipo-texto,
  .equipo-alarma-detalle, .guardia-paso-texto, .guardia-farmaco .pre-linea {
    text-align: left; -webkit-hyphens: manual; hyphens: manual;
  }
}

/* --- Figuras de equipos: pie de figura completo -------------------------- */
.equipo-figura-sub { color: var(--tinta-secundaria); font-size: 0.9rem; }
.equipo-figura-credito { margin-top: 0.15rem; font-size: 0.78rem; color: var(--tinta-secundaria); }

/* ======================================================================
   L23d · Mejoras de criterio (agente diseñador, HIG). Al final para ganar
   por orden; porqués en docs/DISENO.md.
   ====================================================================== */
/* 1. Foco que sigue la silueta del hexágono: el ::before (hairline hexagonal)
   se pinta en verde-oscuro y el ::after se retrae 3 px → anillo de 3 px por
   los seis lados; en Guardia, en tinta. Antes: rectángulo con outline. */
.tile-acceso:focus-visible {
  outline: none;
  filter: drop-shadow(0 2px 4px rgb(16 35 20 / 0.06)) drop-shadow(0 14px 32px rgb(16 35 20 / 0.10));
}
.tile-acceso:focus-visible::before { background: var(--verde-oscuro); }
.tile-acceso:focus-visible::after { inset: 3px; }
.tile-acceso.hex-guardia:focus-visible::before { background: var(--tinta); }
/* 2. Una sola gramática de hover en tarjetas: elevación, hairline intacto. */
.tarjeta-farmaco:hover, .equipo-tarjeta:hover, .buscar-grupo-tile:hover,
.nav-sistemas a:hover, .rail-item:hover { border-color: var(--hairline); }
/* 5. El ítem activo del rail no se comporta como botón. */
.rail-item[aria-current="page"]:hover { transform: none; box-shadow: var(--sombra-1); }
/* 3. Controles chicos con la misma transición de estado; presión en la barra. */
.chip-grupo, .chip-personal, .chip-mecanismo, .insignia-embarazo, .boton-limpiar,
.segmentado button, .control-texto button, .boton-incremento, .acerca-imprimir a,
.nav-inferior a { transition: background var(--transicion), border-color var(--transicion), color var(--transicion); }
.nav-inferior svg { transition: transform var(--transicion-presion), color var(--transicion); }
.nav-inferior a:active svg { transform: scale(0.9); }
.nav-inferior a[aria-current="page"] .nav-inicio-circulo svg,
.nav-inicio:active svg { transform: none; }
/* 4. Escala de duraciones: 120 presión · 180 estado · 200 entrada (ease-out). */
.tile-acceso { transition: transform var(--transicion-presion), filter var(--transicion); }
.buscar-grupo-tile, .tarjeta-farmaco, .nav-sistemas a, .chip-calculadora {
  transition: transform var(--transicion-presion), box-shadow var(--transicion), border-color var(--transicion);
}
.bomba-tecla { transition: transform var(--transicion-presion), background var(--transicion); }
.anima-entrada { animation: entrada-vista 200ms cubic-bezier(0.2, 0, 0, 1) both; }
/* 6a. Cifras tabulares donde los números se comparan entre filas. */
.cuadro-rapido-tabla, .tarjeta-prep, .tarjeta-modo, .buscar-grupo-conteo { font-variant-numeric: tabular-nums; }
/* 7a. Estado vacío: la primera línea es el título del estado (desde L24c,
   .estado-vista-titulo). */
/* 8. Una sola cápsula para los chips informativos. */
.chip-mecanismo { border-radius: 999px; color: var(--tinta); }
.chip-personal { color: var(--tinta); }
.insignia-embarazo { border-color: var(--hairline); }
/* 9. Una sola calle de 12 px entre tarjetas. */
.lista-tarjetas, .guardia-lista, .equipos-lista, .buscar-grupos, .dosis-tarjetas, .rail { gap: 12px; }

/* ======================================================================
   L24c · Decisiones de L23: columnas numéricas de los cuadros, acción de
   salida en el vacío de Buscar y un solo componente de estado. Al final
   para ganar por orden; porqués en docs/DISENO.md.
   ====================================================================== */
/* 1. Columnas numéricas: a la derecha con cifras tabulares, cabecera
   incluida (data-alinear="num" lo pone el generador cuando TODAS las celdas
   de la columna son cifras; la primera columna, rótulo de fila, nunca). En
   el apilado móvil (< 600 px) el valor ya va a la derecha del rótulo y la
   regla no lo altera. */
.cuadro-rapido-tabla [data-alinear="num"] { text-align: right; font-variant-numeric: tabular-nums; }
/* 3. Estado de vista: insignia única (círculo blanco de 64 px, sombra-1,
   ícono en verde-brisa), título a 600 en tinta, texto en tinta-secundaria,
   detalle opcional y fila de acciones centrada. */
.estado-vista {
  max-width: 34rem;
  margin: 1.5rem auto;
  text-align: center;
}
.estado-vista .circulo-icono {
  width: 64px;
  height: 64px;
  margin: 0.5rem auto;
  background: var(--superficie);
  color: var(--verde-brisa);
  box-shadow: var(--sombra-1);
}
.estado-vista .circulo-icono svg { width: 38px; height: 38px; }
.estado-vista-titulo { margin: 0.6rem 0 0; color: var(--tinta); font-weight: 600; font-size: 1.06rem; text-wrap: balance; }
/* Cuando el estado es la vista entera (404, error) el título es el h1 que
   enfoca el router, en la escala del estado y no en la del listado. */
.estado-vista h1.estado-vista-titulo { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; }
.estado-vista-texto { margin: 0.35rem 0 0; color: var(--tinta-secundaria); }
.estado-vista .detalle-error { margin: 0.9rem 0 0; text-align: left; }
.estado-vista-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 1rem 0 0;
}
.estado-vista-acciones .boton { min-height: 44px; }
.estado-vista-acciones .boton svg { width: 20px; height: 20px; }
/* El buscador del 404 ocupa la fila entera; las acciones siguen debajo. */
.estado-vista-acciones .buscador { flex: 1 1 100%; margin: 0; text-align: left; }
/* Enlace secundario con zona táctil de 44 px sin cambiar el aspecto. */
.estado-vista-enlace { display: inline-block; padding: 12px 0.25rem; margin: -12px 0; font-weight: 600; }
/* Tono de alerta (error de carga): misma estructura, insignia y título en
   rojo-texto. */
.estado-vista--alerta .circulo-icono, .estado-vista--alerta .estado-vista-titulo { color: var(--rojo-texto); }

/* ======================================================================
   L24b · Bomba con teclas estables y acción farmacológica en infusiones.
   Al final para ganar por orden; porqués en docs/DISENO.md.
   ====================================================================== */

/* 1. Retícula explícita de la bomba: cabecera (1), ranura bajo la cabecera
   (2), cuerpo + suero (3), mano (4), nota (5). El bloque lateral (suero +
   mano) se disuelve en móvil: cada arte ocupa su celda de siempre. */
.bomba-escena, .bomba-lateral { display: contents; }
.bomba-identidad { grid-row: 1; grid-column: 1 / -1; }
.bomba-bajo-cabecera { grid-row: 2; grid-column: 1 / -1; margin: 0 0 0.8rem; }
.bomba-bajo-cabecera:empty { display: none; }
.bomba-suero { grid-row: 3; grid-column: 2; }
.bomba-panel { grid-row: 3; grid-column: 1; }
.bomba-brazo { grid-row: 4; grid-column: 1 / -1; }
.bomba-nota { grid-row: 5; grid-column: 1 / -1; }
@media (min-width: 900px), (min-width: 700px) and (orientation: landscape) {
  .bomba-identidad { grid-column: 1; }
  .bomba-bajo-cabecera { grid-column: 1; }
  .bomba-panel { grid-row: 3; grid-column: 1; }
  .bomba-nota { grid-row: 4; grid-column: 1; }
  /* Suero arriba y mano abajo en una columna anclada al PIE del cuerpo de
     la bomba: el tubo del suero entra por el canto del panel a altura fija
     (unos 150 px sobre su base) aunque la cabecera crezca con el
     desplegable abierto; la mano sigue al pie del cuerpo (L23b). */
  .bomba-lateral {
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    grid-column: 2; grid-row: 2 / span 2; align-self: stretch; min-width: 0;
  }
  .bomba-suero { flex: none; width: 160px; padding-top: 0; }
  .bomba-brazo { flex: none; align-self: flex-end; width: 360px; margin: 0 0 0.3rem; }
}

/* 2. Teclado en UNA fila desde 360 px. Bajo 420 la rueda sube a su fila y
   las teclas ya no envuelven (L22f las dejaba envolver); entre 420 y 479
   tampoco. La tecla principal apila sus dos rótulos en la misma celda de
   una retícula en línea y esconde uno con visibility: mide siempre lo que
   mide «Detener», con lo que ni las teclas ni el panel se mueven al
   alternar. Rótulos de texto a 15 px en móvil y 16 px en escritorio. */
.bomba-frente .bomba-teclas { flex: 1 1 auto; flex-wrap: nowrap; gap: 0.5rem; }
.bomba-tecla-iniciar, .bomba-tecla-bolo, .bomba-tecla-modo { font-size: 0.8824rem; /* 15 px */ padding-inline: 0.6rem; }
/* Bajo 600 px la rueda va en su propia fila y el teclado toma el ancho
   entero del cuerpo: la columna del suero se angosta (20 vw, 72–96 px), el
   cuerpo cede padding y las teclas de texto también. Las teclas crecen
   parejas (flex 1); solo si la fila no alcanza —las cinco teclas de las
   infusiones con Bolo y Modo, bajo 480 px— pasan a una segunda fila,
   también pareja y estable (medidas en docs/DISENO.md). */
@media (max-width: 599.98px) {
  .bomba { grid-template-columns: minmax(0, 1fr) clamp(72px, 20vw, 96px); gap: 0 0.4rem; }
  .bomba-panel { padding-inline: 0.5rem; }
  .bomba-frente { flex-wrap: wrap; }
  .bomba-frente .bomba-teclas { flex: 1 1 100%; flex-wrap: wrap; gap: 0.25rem; }
  .bomba-tecla { flex: 1 1 auto; }
  .bomba-tecla-iniciar, .bomba-tecla-bolo, .bomba-tecla-modo { padding-inline: 0.3rem; }
  .bomba-tecla-paso { min-width: 44px; padding-inline: 0; }
}
/* 360–379: la columna del suero baja a 64 px y la calle entre teclas a
   0,2 rem; es lo que hace entrar cuatro teclas en una fila a 360. */
@media (max-width: 379.98px) {
  .bomba { grid-template-columns: minmax(0, 1fr) clamp(64px, 18vw, 96px); }
  .bomba-frente .bomba-teclas { gap: 0.2rem; }
}
@media (min-width: 900px) {
  .bomba-tecla-iniciar, .bomba-tecla-bolo, .bomba-tecla-modo { font-size: 0.9412rem; /* 16 px */ }
}
.bomba-tecla-rotulos { display: inline-grid; }
.bomba-tecla-rotulos > .bomba-rotulo { grid-area: 1 / 1; white-space: nowrap; }
.bomba-rotulo-detener { visibility: hidden; }
.bomba-en-curso .bomba-rotulo-iniciar { visibility: hidden; }
.bomba-en-curso .bomba-rotulo-detener { visibility: visible; }

/* 3. «Acción farmacológica de {fármaco}»: tarjeta semántica desplegable
   bajo la cabecera de la infusión. Botón a lo ancho con insignia, rótulo y
   chevron (el mismo de las bandas, en el color del texto); cuerpo con la
   prosa del campo, el cuadro por contrato y el primer párrafo de reacciones
   adversas, en columna de lectura de 42 rem. */
.accion-farmacologica { margin: 0; }
.accion-farmacologica-titulo { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.accion-farmacologica-boton {
  position: relative;
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; min-height: 52px;
  padding: 0.55rem 2.6rem 0.55rem 0.8rem;
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.3;
  color: var(--sem-texto); text-align: left; text-wrap: balance;
  background: none; border: 0; border-radius: var(--radio);
  cursor: pointer;
  transition: background var(--transicion);
}
.accion-farmacologica-boton:hover { background: var(--superficie-suave); }
.accion-farmacologica-boton:focus-visible { outline: 3px solid var(--verde-oscuro); outline-offset: -3px; }
.accion-farmacologica-boton .plegable-marca::before { border-color: var(--sem-texto); }
.accion-farmacologica-boton[aria-expanded="true"] .plegable-marca { transform: rotate(180deg); }
.accion-farmacologica-cuerpo {
  margin: 0 0.8rem;
  padding: 0.85rem 0 1rem;
  border-top: 1px solid rgb(var(--sem-rgb) / 0.2);
}
.accion-farmacologica-prosa, .accion-farmacologica-reacciones { max-width: 42rem; }
.accion-farmacologica-cuerpo .parrafo-prosa {
  margin: 0 0 0.75rem; font-size: 1rem; line-height: 1.5;
  text-align: left; -webkit-hyphens: manual; hyphens: manual;
}
.accion-farmacologica-cuerpo .parrafo-prosa:last-child { margin-bottom: 0; }
.accion-farmacologica-cuerpo .cuadro-rapido { margin: 0.9rem 0 0; max-width: 52rem; }
.accion-farmacologica-subtitulo { margin: 1rem 0 0.35rem; font-size: 0.95rem; font-weight: 700; color: var(--titulo); }
.accion-farmacologica-pie { margin: 0.6rem 0 0; }
.accion-farmacologica-enlace { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--verde-texto); }
.accion-farmacologica-enlace:hover { color: var(--verde-oscuro); }
@media print {
  /* En papel el desplegable va abierto: el atributo hidden no rige. */
  .accion-farmacologica-cuerpo[hidden] { display: block !important; }
  .accion-farmacologica { box-shadow: none; border-color: #999999; break-inside: avoid; }
  .accion-farmacologica-boton { color: #111111; }
  .accion-farmacologica .plegable-marca { display: none; }
  .accion-farmacologica-pie { display: none; }
}