/* =========================================================================
   Datos Iquique · hoja de estilos pública
   Estilo de pos.aisystem.cl (Aisystem POS, del mismo dueño; 2026-10-26): Inter, índigo de marca,
   cabecera y pie claros, esquinas redondeadas de 12 px, insignias y chips en píldora, fichas blancas
   con borde fino y titulares en negrita.

   Orden del archivo (cada decisión se define en un solo lugar):
     1 Fuentes · 2 Tokens · 3 Base · 4 Utilidades · 5 Cabecera · 6 Hero y secciones
     7 Controles · 8 Botones · 9 Etiquetas y avisos · 10 Tablas · 11 Informativas · 12 Pie
     13 Hover (solo con puntero) · 14 Páginas (portada, combustibles, medicamentos
     y supermercados, copagos) · 15 Responsive · 15b Ajustes responsive por paquete
     · 16 Accesibilidad · 17 Impresión.
   Componentes compartidos para las páginas (2026-10-30): .sin-js y .aviso-sin-js (4), .btn.accent y .chip-link (8),
   .estado y .diff (9), .tabla-scroll, .carrusel, .ficha-enlace y .barra-fija (10); la barra de navegación inferior del
   teléfono es .site-nav en la sección 15 (≤ 640 px). Cada uno se documenta al comienzo de su sección (el de la 4, en su regla).
   Paquetes de página: en las secciones 13 (hover), 14 (páginas) y 15b (ajustes responsive) cada paquete (PORTADA,
   COMBUSTIBLES, BUSQUEDA, LISTAS y COPAGOS) tiene un bloque entre una línea de apertura y otra de cierre que llevan
   su nombre, y solo edita lo que está entre ellas. En la 15 las reglas propias de una página llevan antes una
   etiqueta con el nombre del paquete dueño.
   El panel de administración vive en admin.css (se carga después de este archivo).
   Las clases e ids que usa el JavaScript (public/*.js) se conservan.
   ========================================================================= */

/* ---- 1 · Tipografía autoalojada (Inter variable, subconjunto latino, licencia OFL) ----
   Un solo archivo con todos los pesos (el mismo que sirve pos.aisystem.cl). Se usan 400 para el texto,
   500 para el menú y las preguntas, 600 para rótulos, nombres, botones, insignias y precios de tabla, y
   700 (--fw-heading) para titulares y cifras grandes. El código usa la monoespaciada del sistema. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}

/* ---- 2 · Tokens ----
   Regla de color: índigo (--accent, --brand, --action) = identidad, enlaces, botones y lo elegido;
   verde (--best) solo «más barato»; rojo (--worst) solo «más caro»; naranjo (--warn) avisos y precios
   antiguos; morado (--manual) precios manuales; rojo (--danger) errores. Fondo blanco; fichas y paneles
   blancos con borde fino; el gris azulado claro es estado de interacción (--surface-2, --row-hover), la
   cabecera de las tablas y el pie (--canvas). Esquinas redondeadas (--radius-*) y sin sombras, salvo lo
   que flota: --shadow-overlay (ventanas del mapa, sugerencias) y --shadow-pin (marcadores).
   Ningún color va fuera de este bloque, salvo la hoja de impresión. */
:root {
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  --fw-heading: 700; /* titulares y cifras grandes */
  /* Escala de precio: una sola para las cuatro categorías (combustibles, medicamentos, supermercados y copagos).
     Todo texto de precio verde o rojo menor de 24 px usa --best-strong y --worst-strong; --best y --worst quedan para
     las cifras de 24 px o más y para los rellenos. Las cifras llevan siempre tabular-nums y --ls-figure. */
  --price-hero: 2.5rem; /* 40 · resumen de portada, precio más bajo de una comuna y total de la receta o la lista */
  --price-card: 1.5rem; /* 24 · ficha y resultado principal */
  --price-row: 1.25rem; /* 20 · fila de tabla y de lista */
  --price-aux: 1rem; /* 16 · precio secundario (en la farmacia, el envase), con peso 500 */
  --fw-price: 700;
  --fw-price-aux: 500;
  --ls-heading: -0.025em; /* letra apretada en titulares, como en el POS */
  --ls-figure: -0.02em; /* cifras grandes */

  /* Tamaños de letra (rem; 1 rem = 16 px). Solo estos valores: nada de 0.88 o 0.95 rem. */
  --fs-xs: 0.75rem; /* 12 · rótulos, insignias, leyendas */
  --fs-sm: 0.875rem; /* 14 · interfaz y texto secundario */
  --fs-md: 1rem; /* 16 · cuerpo */
  --fs-lg: 1.125rem; /* 18 · entradillas de sección, preguntas */
  --fs-xl: 1.25rem; /* 20 · subtítulos, precio en tablas */
  --fs-2xl: 1.5rem; /* 24 · títulos de tarjeta */
  --fs-3xl: 1.75rem; /* 28 · importes medianos */
  --fs-4xl: 2rem; /* 32 · números de paso */
  --fs-5xl: 2.5rem; /* 40 · cifras destacadas */
  --fs-h1: clamp(2.25rem, 1.9rem + 0.7vw, 2.5rem); /* 36 → 40 */
  --fs-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem); /* 24 → 32 */
  --fs-lead: clamp(1.0625rem, 0.99rem + 0.3vw, 1.25rem); /* 17 → 20 */
  --fs-strip: clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem); /* 24 → 28 */
  --lh-tight: 1.2; /* titulares y cifras */
  --lh-heading: 1.25; /* títulos de sección */
  --lh-snug: 1.4; /* texto compacto */
  --lh-body: 1.5; /* cuerpo */

  /* Espaciado (base 4/8). Tres niveles entre fichas: 8 filas de lista, 16 fichas de una franja,
     32 columnas de tarjetas grandes. Entre bloques de una página 48; entre secciones 64. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --gutter: 32px; /* margen lateral; 16 px en el teléfono */
  --block-gap: 48px; /* entre bloques dentro de una sección de datos */
  --section-gap: 64px; /* entre secciones de datos; 48 px en el teléfono */

  /* Alturas de control, anchos de lectura, filetes, movimiento y capas. */
  --control-lg: 48px; /* campos, botones, menú */
  --control-md: 40px; /* chips, selector de comuna, botones pequeños; 44 px con dedo (ver al final de los tokens) */
  --icon-box: 40px; /* cuadrito de los íconos de tarjeta y círculo de los números de paso */
  --control-sm: 32px; /* botones pequeños */
  --tag-h: 24px; /* insignias */
  --measure: 60ch; /* texto corrido de 16 a 20 px: unos 72 caracteres por línea */
  --measure-sm: 72ch; /* texto de 14 px: unos 600 px, casi lo mismo que 60ch a 16 px */
  --measure-narrow: 40ch;
  --rule: 3px; /* filete de color (celdas, avisos, página actual) */
  --radius: 12px; /* fichas, paneles, tablas, campos, botones y ventanas del mapa */
  --radius-sm: 8px; /* botones pequeños, avisos, controles del mapa */
  --radius-xs: 6px; /* código, marcadores del mapa */
  --radius-pill: 999px; /* insignias, chips, selector de comuna */
  --header-h: 64px; /* barra superior */
  --tabbar-h: 60px; /* barra de navegación inferior del teléfono (hasta 640 px) */
  --dur-fast: 110ms;
  --ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  --z-raised: 1;
  --z-sticky: 2;
  --z-toast: 10;
  --z-tabbar: 50; /* barra de navegación inferior (y, justo debajo, .barra-fija) */
  --z-overlay: 60; /* lo que debe cubrir la barra: mapa a pantalla completa, ventanas; las sugerencias (30) quedan por debajo */
  --z-skip: 100;
  --wrap: max(1232px, 77rem); /* 1232 px; más ancho si el visitante agranda la letra */

  /* Superficies y texto (los de pos.aisystem.cl: azul marino, grises azulados). Fondo de página gris azulado muy claro
     (--bg) con fichas, paneles, tablas, campos y menús blancos (--surface): da jerarquía sin tocar el verde y el rojo. */
  --bg: #f7f8fb; /* fondo de la página y de la cabecera de cada sección */
  --surface: #ffffff; /* fichas, paneles, tablas, campos y menús */
  --canvas: #f1f3f9; /* fichas internas y cabecera de tablas */
  --surface-2: #eef0f5; /* hover de controles, fondo del selector de comuna */
  --surface-3: #e2e5ee; /* insignia neutra, botón fantasma apretado */
  --row-hover: #f7f8fb; /* hover de fila de tabla */
  --field: #ffffff;
  --text: #141a2e;
  --text-strong: #141a2e;
  --muted: #565d73; /* 6,5:1 sobre blanco, 6,2:1 sobre el fondo de página y 5,7:1 sobre el pie */
  /* Los valores de antes del 2026-10-30 (fondo blanco, superficies grises azuladas y gris de texto): el panel de administración
     (admin.css) los fija en su <body>, para que no cambie con el fondo gris azulado del sitio público. */
  --admin-bg: #ffffff;
  --admin-canvas: #f7f8fb;
  --admin-muted: #5c6378;
  --helper: #646b82;
  --border: #e2e5ee;
  --tile-border: var(--border);
  --border-strong: #858ba1; /* 3,4:1: bordes que deben verse (total de la canasta, número de orden) */
  --input-border: #858ba1; /* ≥ 3:1: bordes de campos y chips */

  /* Índigo: marca, enlaces, botones, lo elegido y foco (#4b56b9, 6,3:1 sobre blanco) */
  --brand: #4b56b9;
  --accent: #4b56b9;
  --accent-strong: #363f8c;
  --accent-soft: #eef0fb;
  --accent-border: #c5cbee; /* borde de la ficha destacada y del botón con borde al pasar el cursor */
  --focus: #4b56b9;
  --route: var(--accent);
  --origin: var(--accent);

  /* Botones (pedido del dueño, 2026-10-26: como el POS): primario relleno índigo, secundario blanco con borde */
  --action: #4b56b9;
  --action-hover: #424ca7;
  --action-active: #363f8c;
  --action-contrast: #ffffff;
  --tertiary: var(--text); /* texto del botón con borde */
  --tertiary-border: #cfd3e1;
  --tertiary-hover: var(--accent-soft);
  --tertiary-active: #dfe3f7; /* apretado: un punto más oscuro que el hover (7,3:1 con --accent-strong) */
  --tertiary-hover-text: var(--accent-strong);
  --inverse: var(--action); /* lo elegido (chips, comuna) va relleno en índigo */
  --inverse-text: var(--action-contrast);
  --pin: var(--text); /* marcador neutro del mapa */

  /* Cabecera, pie y cabecera de tabla: claros, como el POS */
  --header-bg: #ffffff;
  --header-text: var(--text);
  --header-muted: var(--muted);
  --header-hover: var(--surface-2);
  --header-border: var(--border);
  --header-current: var(--accent);
  --on-dark: #ffffff; /* borde blanco del marcador de origen del mapa, sobre el índigo */
  --footer-bg: #eceff7;
  --footer-text: var(--muted);
  --footer-strong: var(--text);
  --table-head-bg: var(--canvas);
  --table-head-text: var(--text);
  --table-head-muted: var(--muted);

  /* Estados: más barato, más caro, aviso, error, manual */
  --best: #198038;
  --best-strong: #0e6027;
  --best-soft: #defbe6;
  --on-best: #ffffff; /* texto sobre --best (marcador del mapa) */
  --worst: #da1e28;
  --worst-strong: #a2191f;
  --worst-soft: #fff1f1;
  --on-worst: #ffffff;
  --danger: var(--worst);
  --danger-soft: var(--worst-soft);
  --danger-solid: #da1e28; /* aviso de error: rojo sólido con texto blanco */
  --on-danger: #ffffff;
  --warn: #8a3800;
  --warn-soft: #fff2e8;
  --warn-border: #f1c21b;
  --manual: #6929c4;
  --manual-soft: #e8daff;
  /* «Enviar por WhatsApp»: el único botón de color (pedido del dueño), con el verde de WhatsApp y texto oscuro (9:1). */
  --whatsapp: #25d366;
  --whatsapp-hover: #1ebe5b;
  --whatsapp-active: #19a34e;
  --on-whatsapp: #0b141a;

  /* Sombras de tinte frío, como las del POS (la negra pura se ve sucia sobre grises azulados). */
  --shadow-overlay: 0 2px 4px rgb(31 41 72 / 6%), 0 12px 28px -8px rgb(31 41 72 / 22%);
  --shadow-pin: 0 1px 4px rgb(31 41 72 / 30%);
  color-scheme: light;
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --section-gap: 48px;
  }
}

/* Con dedo (o en un teléfono): chips, opciones de comuna y botones pequeños miden 44 px, el objetivo mínimo táctil. */
@media (pointer: coarse), (max-width: 640px) {
  :root {
    --control-md: 44px;
  }
}

/* ---- 3 · Base ---- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Con la barra de navegación inferior (teléfono), el foco y los saltos a un ancla no quedan debajo de ella. */
  scroll-padding-bottom: 0;
}

[id] {
  scroll-margin-top: var(--space-4);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-md) / var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--text-strong);
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}

h1,
h2 {
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--surface-2);
  border-radius: var(--radius-xs);
  padding: 1px 5px;
}

/* ---- 4 · Utilidades ---- */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.muted {
  color: var(--muted);
}

.small {
  font-size: var(--fs-sm);
}

/* Un paréntesis corto («(Alto Hospicio)») que no se parte entre dos renglones (lo genera public/inicio.js, `sinCorte`). */
.sin-corte {
  white-space: nowrap;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sin JavaScript: .sin-js solo se ve cuando common.js no pone la clase «js» en <html>, y el aviso de <noscript> es el
   aviso ámbar de los demás avisos, a todo el ancho y sobre la cabecera. */
html.js .sin-js {
  display: none;
}

.aviso-sin-js {
  margin: 0;
  padding: var(--space-3) var(--gutter);
  background: var(--warn-soft);
  border-bottom: var(--rule) solid var(--warn-border);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* Visible solo con el teclado: azul marino sobre la barra blanca. */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--header-text);
  color: var(--header-bg);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-2);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Números siempre alineados, en precios y tablas. */
.result-price,
.top-table,
.home-list,
.precio-valor,
.envase-precio,
.por-unidad,
.opcion-precio,
.recomendacion-precio {
  font-variant-numeric: tabular-nums;
}

/* Foco de teclado: anillo de 2 px de --focus (índigo) en todo el sitio,
   salvo el marcador del mapa (--text).
   Los componentes sueltos (enlaces, botones, chips, opciones de comuna, mapa) lo llevan por fuera; los
   que tocan a sus vecinos (campos, resumen de acordeón, menú) lo llevan por dentro. */
a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---- 5 · Cabecera y navegación ---- */

/* Barra blanca de 64 px con borde inferior fino, como la del POS. */
.site-header {
  background: var(--header-bg);
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 0 var(--space-5);
  min-height: var(--header-h);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  color: var(--header-text);
  text-decoration: none;
  min-width: 0;
}

.brand-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--brand);
}

.brand-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
  line-height: var(--lh-heading);
}

.brand-name {
  font-weight: var(--fw-heading);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-heading);
}

.brand-tagline {
  font-size: var(--fs-sm);
  color: var(--header-muted);
}

.site-nav {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}

.site-nav::-webkit-scrollbar {
  display: none;
}

/* Menú gris de 14 px como el del POS; al pasar el cursor, azul marino. */
.site-nav a {
  display: flex;
  align-items: center;
  min-height: var(--header-h);
  padding: 0 var(--space-4);
  color: var(--header-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

/* Página actual: azul marino, seminegrita y barra índigo de 3 px abajo (borde, para que se vea en alto contraste). */
.site-nav a[aria-current='page'] {
  color: var(--header-text);
  font-weight: 600;
  padding-top: var(--rule);
  border-bottom: var(--rule) solid var(--header-current);
}

.site-nav a:focus-visible,
.site-brand:focus-visible,
.site-header .btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  box-shadow: none;
}

/* Cada enlace del menú lleva un ícono (.nav-icon, 24 px, trazo de 1,8) y su nombre (.nav-texto). Supermercados y Copagos de
   salud traen dos: .nav-largo (el nombre completo, con el que se lee el enlace) y .nav-corto («Súper», «Copagos», aria-hidden).
   En el menú de escritorio y de tableta solo se ve el texto largo; en el teléfono (≤ 640 px, sección 15) el menú es una barra
   fija abajo con ícono y nombre corto, y el nombre largo queda solo para los lectores de pantalla. */
.nav-icon {
  width: 24px;
  height: 24px;
  flex: none;
}

.site-nav .nav-icon,
.nav-corto {
  display: none;
}

/* ---- 6 · Hero y secciones ---- */

/* Portada de cada página: titular grande en negrita sobre fondo blanco; el borde de arriba es la línea bajo la barra. */
.hero {
  background: var(--bg);
  border-top: 1px solid var(--header-border);
  border-bottom: 1px solid var(--border);
}

.hero-inner {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

/* Antetítulo en píldora índigo clara, como las del POS («Con IA», «Más popular»). */
.eyebrow {
  display: table;
  margin: 0 0 var(--space-4);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
  font-size: var(--fs-xs);
  line-height: 1.35;
}

/* El antetítulo del hero repite el nombre que ya dice el menú: no se muestra (los de las secciones internas sí). */
.hero .eyebrow {
  display: none;
}

.hero h1 {
  font-size: var(--fs-h1);
  line-height: 1.1;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--muted);
  max-width: var(--measure);
  margin: var(--space-3) 0 0;
}

.hero-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-5);
}

.hero .updated {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  max-width: var(--measure-sm);
}

/* En el teléfono la bajada ocupa dos líneas como máximo (ver «15»), pero a 320-384 px sus frases de tres líneas («Compare Líder,
   Jumbo, Unimarc, Santa Isabel y aCuenta en un solo…») quedaban cortadas a mitad: ahí se muestra entera. */
@media (max-width: 24em) {
  .hero .hero-inner:not(.compact) .lead {
    display: block;
    overflow: visible;
  }
}

/* Hero de las páginas internas en el computador (desde 64 em): el mismo alto en las seis páginas y el selector de comuna siempre
   arriba, a la altura del título. Medicamentos y Supermercados lo tenían de 124 px (la fecha en dos líneas), Combustibles, Mi
   receta y Mi lista de 114 y Copagos (sin fecha) de 114 con el selector centrado: al navegar el contenido saltaba 10 px y el
   selector 5 o 20. El mínimo cubre el caso más alto (selector 40 + aire 8 + fecha de dos líneas 42 + relleno 2 × 16). */
@media (min-width: 64em) {
  .hero:not(.hero-inicio) .hero-inner {
    min-height: 7.625rem;
    align-content: start;
  }

  .hero:not(.hero-inicio) .hero-tools {
    align-self: start;
  }
}

main.wrap {
  padding-bottom: var(--space-11);
}

/* Bajo una cabecera compacta, el primer panel no necesita tanto aire arriba. */
.site-header + main > .controls:first-child {
  margin-top: var(--space-6);
}

/* Una página que parte con una sección de datos (Mi receta, Mi lista): el mismo aire bajo la cabecera que el buscador. */
main.wrap > .top-section:first-child {
  margin-top: var(--space-7);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

/* El título ocupa el espacio libre: el «Actualizado hace…» o el botón quedan a la derecha. */
.section-head > div:first-child {
  flex: 1 1 28rem;
  min-width: 0;
}

.section-head .eyebrow {
  margin-bottom: var(--space-2);
}

.section-head.stacked {
  display: block;
  margin-bottom: var(--space-6);
}

.section-head .lead {
  margin-top: var(--space-4);
  font-size: var(--fs-lg);
}

.section-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  margin: 0;
}

.help {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0 0 var(--space-4);
  max-width: var(--measure-sm);
}

.note {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: var(--space-4) 0 0;
  max-width: var(--measure-sm);
}

/* ---- 7 · Controles y formularios ---- */

.controls {
  background: var(--surface);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin: var(--space-7) 0 var(--space-6);
  display: grid;
  gap: var(--space-4);
}

.search-title {
  display: block;
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--text-strong);
}

/* Lista de ejemplos con enlaces: no es prosa, así que usa todo el ancho del panel. */
.search-help {
  margin: 0;
  font-size: var(--fs-sm);
  max-width: none;
}

.search-help a {
  font-weight: 600;
}

.field {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: var(--space-2);
  padding: 0;
}

.controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  justify-content: space-between;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  position: relative;
}

.chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

/* Filtros en píldora con borde; el elegido, relleno índigo como el selector de planes del POS. */
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-md);
  padding: 0 var(--space-4);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--text);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.chip input:checked + span {
  background: var(--inverse);
  border-color: var(--inverse);
  color: var(--inverse-text);
}

.chip input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

select,
textarea,
input[type='text'],
input[type='url'],
input[type='search'],
input[type='password'],
input[type='number'],
input[type='time'],
input[type='date'],
input[type='email'],
input[type='tel'] {
  font: inherit;
  font-weight: 400;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  min-height: var(--control-lg);
  max-width: 100%;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

/* El texto del <select> arranca en la misma columna que el del campo de búsqueda. */
select {
  padding-left: var(--space-3);
}

/* Un marcador de posición largo se corta con puntos suspensivos en pantallas angostas. */
input[type='search'],
input[type='text'] {
  text-overflow: ellipsis;
}

input::placeholder,
textarea::placeholder {
  color: var(--helper);
  opacity: 1;
}

select:focus-visible,
textarea:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* Campo inválido tras enviar: contorno rojo (el foco, declarado después, gana mientras se edita). */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  outline: 2px solid var(--danger);
  outline-offset: -2px;
}

input:user-invalid:focus-visible,
select:user-invalid:focus-visible,
textarea:user-invalid:focus-visible {
  outline-color: var(--focus);
}

.search-form {
  display: flex;
  gap: var(--space-2);
}

.search-form input {
  flex: 1;
  min-width: 0;
  width: 100%;
}

/* Teléfono angosto (hasta 384 px): el botón «Buscar» baja bajo el campo, como en las tarjetas de acceso de la portada. En una fila el
   campo quedaba de 133 a 188 px y no mostraba ni «paracetamol 500 mg» (la portada, con botón de solo lupa, no lo necesita). En em,
   para que valga también con la letra del navegador agrandada. */
@media (max-width: 24em) {
  .search-panel:not(.buscador-inicio) .search-form {
    flex-wrap: wrap;
  }

  .search-panel:not(.buscador-inicio) .search-form input,
  .search-panel:not(.buscador-inicio) .search-form .btn {
    flex: 1 1 100%;
  }
}

/* Selector de comuna como el de planes del POS: una píldora gris azulada con las opciones dentro y la
   elegida rellena en índigo. */
.comuna-field {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.comuna-label {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.comuna-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  max-width: 100%;
}

.comuna-option {
  position: relative;
}

.comuna-option input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

/* 32 px + 2 × 3 de relleno + 2 de borde = 40 px (44 con dedo): la altura de los chips. */
.comuna-option span {
  display: flex;
  align-items: center;
  min-height: calc(var(--control-md) - 8px);
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.comuna-option input:checked + span {
  background: var(--inverse);
  color: var(--inverse-text);
  font-weight: 600;
}

.comuna-option input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---- 8 · Botones ----
   Como los del POS: 48 px, esquinas de 12 px y texto de 14 px seminegrita centrado. El de siempre es
   blanco con borde fino (terciario); el primario, relleno índigo; el fantasma, solo texto. El peligro
   (.btn.danger) es del panel y está en admin.css.
   Componentes compartidos de esta sección (para las páginas):
     .btn.accent  botón secundario con color (índigo claro con borde y texto índigo, 8,2:1): «Cómo llegar».
     .chip-link   enlace en píldora de 40 px (44 con dedo), borde --input-border y 14 px/500: los «Pruebe con». */
.btn {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--control-lg);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius);
  border: 1px solid var(--tertiary-border);
  background: var(--surface);
  color: var(--tertiary);
  cursor: pointer;
  text-decoration: none;
  /* Un texto largo («Ver dónde conviene comprar su receta») parte en dos líneas en vez de salirse de su caja. */
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.btn.primary {
  background: var(--action);
  border-color: var(--action);
  color: var(--action-contrast);
}

/* Los enlaces con forma de botón terminan en una flecha, como «Crear mi cuenta gratis →» del POS. */
a.btn::after {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-right: 3px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text);
}

.btn.small {
  min-height: var(--control-sm);
  padding: var(--space-1) var(--space-3);
  gap: var(--space-2);
  border-radius: var(--radius-sm);
}

.btn.accent {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-strong);
}

/* Enlace en píldora, como un chip pero que lleva a otra parte. */
.chip-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-md);
  padding: 0 var(--space-4);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-snug);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

/* Anillo por fuera, a 2 px del borde, para no confundirse con el borde del botón. */
.btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Deshabilitado: gris azulado con texto gris (5,2:1), también el primario; con opacidad, el índigo quedaba a 2,7:1. */
.btn:disabled {
  background: var(--surface-2);
  border-color: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
}

/* ---- 9 · Etiquetas, estado vacío y avisos ----
   Componentes compartidos de esta sección (para las páginas):
     .estado      plantilla de error o de «sin resultados»: .estado-titulo (una frase), una línea de texto (.muted) y
                  .estado-accion con el botón (Comun.errorConReintento la dibuja con role="alert").
     .diff        diferencia con el más barato («+$3»), gris, 14 px/600; .diff.worst la pinta en rojo fuerte.
     .aviso-lento «La conexión está lenta, seguimos intentando…» (Comun.avisoLento). */

/* Insignias en píldora, como las del POS. */
.badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--tag-h);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text);
  white-space: nowrap;
  vertical-align: middle;
}

.badge.best {
  background: var(--best-soft);
  color: var(--best-strong);
}

.badge.worst {
  background: var(--worst-soft);
  color: var(--worst-strong);
}

.badge.manual {
  background: var(--manual-soft);
  color: var(--manual);
}

.badge.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.badge.official {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* Error o vacío con una acción: el título, una línea y el botón, en una caja como la de .empty; con role="alert" lleva el filete rojo. */
.estado {
  display: grid;
  /* Una sola columna que puede encogerse: un texto largo sin espacios («paracetamolparacetamol…» pegado desde un enlace) se parte
     en vez de ensanchar la página (664 px en un teléfono de 390). */
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
  color: var(--muted);
}

.estado[role='alert'] {
  box-shadow: inset var(--rule) 0 0 var(--danger);
}

.estado > * {
  margin: 0;
  max-width: var(--measure);
  min-width: 0;
  overflow-wrap: anywhere;
}

.estado-titulo {
  color: var(--text-strong);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-heading);
}

.estado-accion {
  margin-top: var(--space-2);
}

.aviso-lento {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
}

/* Diferencia con el precio más bajo: «+$3», en gris y sin competir con el precio. */
.diff {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.diff.worst {
  color: var(--worst-strong);
}

.empty {
  background: var(--surface);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  color: var(--muted);
  margin: 0;
  overflow-wrap: anywhere;
}

/* Avisos: fondo suave, esquinas de 8 px, filete de color a la izquierda y texto de 14 px (el aviso del
   panel, .notice, comparte esta anatomía en admin.css; .form-error pinta además el texto en rojo). */
.map-hint,
.form-error {
  border-radius: var(--radius-sm);
}

.map-hint,
.form-error {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text);
}

.map-hint {
  margin-top: var(--space-2);
  background: var(--warn-soft);
  border-left: var(--rule) solid var(--warn-border);
}

.form-error {
  color: var(--danger);
  background: var(--danger-soft);
  border-left: var(--rule) solid var(--danger);
}

/* ---- 10 · Tablas de precios ----
   Modelo: /copagos. Caja redondeada con cabecera gris azulada clara (como las tablas del POS), filas
   separadas por filetes, y la celda más barata (verde) o más cara (roja) con fondo suave, filete de 3 px
   a la izquierda e insignia. En pantallas de menos de 64 em (1024 px con letra de 16 px) cada fila pasa
   a ser una ficha (ver «Responsive»).
   Escala de precio (tokens --price-*): 40 px el resumen, 24 px la ficha, 20 px la fila, 16 px el precio secundario.
   Componentes compartidos de esta sección (para las páginas):
     .tabla-scroll  contenedor de una tabla ancha: se desplaza en horizontal, con tabindex="0" y foco visible.
     .carrusel      lista de fichas en una sola fila con imán (scroll-snap), columnas del 78 % que dejan ver la siguiente; solo
                    en el teléfono (≤ 640 px), la <ul> lleva tabindex="0"; desde 641 px es una lista común.
     .ficha-enlace  ficha cuyo enlace (el del nombre) se extiende a toda ella con ::after; borde índigo claro al enfocar o pasar
                    el cursor.
     .barra-fija    barra pegada abajo (en el teléfono, justo sobre la barra de navegación): la de Mi receta y Mi lista
                    (`.barra-lista`, la dibuja mi-lista.js). `Comun.indicadorDeListas` se eliminó el 2026-10-30. */
.top-section + .top-section {
  margin-top: var(--section-gap);
}

.tabla-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.tabla-scroll:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.ficha-enlace {
  position: relative;
}

.ficha-enlace a {
  color: inherit;
  text-decoration: none;
}

/* El enlace del nombre cubre toda la ficha; su anillo de foco la rodea. */
.ficha-enlace a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.ficha-enlace a:focus-visible {
  outline: none;
}

.ficha-enlace a:focus-visible::after {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.ficha-enlace:has(a:focus-visible) {
  border-color: var(--accent-border);
}

/* Barra pegada abajo (sobre el contenido, bajo la barra de navegación en el teléfono). */
.barra-fija {
  position: sticky;
  bottom: 0;
  z-index: calc(var(--z-tabbar) - 1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--gutter);
  background: var(--surface);
  border-top: 1px solid var(--header-border);
}

@media (max-width: 640px) {
  .carrusel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: var(--space-3);
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .carrusel::-webkit-scrollbar {
    display: none;
  }

  .carrusel > * {
    min-width: 0;
    scroll-snap-align: start;
  }

  /* El anillo va por dentro: la lista ocupa todo el ancho de la pantalla. */
  .carrusel:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
  }

  .barra-fija {
    position: fixed;
    inset: auto 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom)) 0;
  }

  html.teclado-abierto .barra-fija {
    bottom: 0;
  }

  /* El pie reserva también el alto de la barra fija, para que no tape el final de la página. */
  body:has(> .barra-fija) .site-footer {
    padding-bottom: calc(var(--tabbar-h) + var(--space-9) + env(safe-area-inset-bottom));
  }
}

.top-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  overflow: clip;
  /* Todas las columnas de tiendas con el mismo ancho, para que precios y totales queden alineados. */
  table-layout: fixed;
}

.top-table thead th:first-child {
  width: 16rem;
}

.top-table th,
.top-table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.top-table tbody tr:last-child > * {
  border-bottom: 0;
}

/* Cabecera gris azulada clara con texto azul marino; el cuerpo, en blanco. */
.top-table thead th {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--table-head-text);
  background: var(--table-head-bg);
}

/* Número de orden: un círculo neutro; el índigo queda para los enlaces. */
.top-rank {
  float: left;
  margin-right: var(--space-3);
  width: var(--tag-h);
  height: var(--tag-h);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.top-name {
  display: block;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-weight: 600;
  text-wrap: pretty;
}

/* Un nombre largo (de estación, de farmacia, de producto) parte en vez de salirse de su ficha o de su celda. */
.forma-farmacia,
.home-list-nombre,
.mi-lista-nombre,
.brand {
  overflow-wrap: anywhere;
}

.top-name small,
.top-table td small {
  display: block;
  overflow-wrap: anywhere;
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--muted);
  text-wrap: pretty;
}

/* Precio de una fila de tabla: 20 px en negrita (--price-row). */
.top-price {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  align-items: center;
  font-weight: var(--fw-price);
  font-size: var(--price-row);
  letter-spacing: var(--ls-figure);
  line-height: var(--lh-tight);
}

/* El precio es un enlace: subrayado tenue (≥3:1 en todas las celdas) que se engrosa al pasar el cursor. */
.top-price a {
  color: var(--text-strong);
  text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
  text-underline-offset: 4px;
}

/* La más barata (verde) y la más cara (roja): fondo suave, filete a la izquierda y cifra en el tono
   fuerte, que da 7:1 de contraste (el tono vivo solo pasa AA por 0,05 sobre el fondo suave). */
.top-table td.is-best {
  background: var(--best-soft);
  box-shadow: inset var(--rule) 0 0 var(--best);
}

.top-table td.is-worst {
  background: var(--worst-soft);
  box-shadow: inset var(--rule) 0 0 var(--worst);
}

.top-table td.is-best .top-price,
.top-table td.is-best .top-price a,
.price-channel.is-best .top-price,
.price-channel.is-best .top-price a {
  color: var(--best-strong);
}

.top-table td.is-worst .top-price,
.top-table td.is-worst .top-price a,
.price-channel.is-worst .top-price,
.price-channel.is-worst .top-price a {
  color: var(--worst-strong);
}

/* La insignia «Más barato / Más caro» es solo texto: sin píldora, a ras de «Internet» y del importe. */
.top-table td.is-best .badge.best,
.top-table td.is-worst .badge.worst,
.top-table td > .badge.best,
.top-table td > .badge.worst {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

/* Hija directa de la celda (medicamentos): una línea propia, y si hay dos se apilan. */
.top-table td > .badge.best,
.top-table td > .badge.worst {
  display: flex;
}

/* Con la letra de 14 px, «Más barato en farmacia» y «Otra presentación» ya no caben en una celda angosta: bajan de línea. */
.top-table .badge {
  white-space: normal;
}

/* Precio por internet y en el local (medicamentos): rótulo y precio en dos columnas, con las
   cifras alineadas a la derecha para que unidades y miles queden en la misma columna. */
.price-channels {
  margin: 0;
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 3px var(--space-3);
  font-variant-numeric: tabular-nums;
}

.price-channel {
  display: contents;
}

.price-channel dt {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.price-channel dd {
  margin: 0;
}

.top-table .price-channels {
  justify-content: start;
  margin-bottom: 2px;
}

.top-table .price-channel .top-price {
  justify-content: flex-end;
}

/* Total de la canasta: primera fila de la tabla, bajo la columna de cada tienda. */
.top-table tr.total-row > * {
  border-bottom: 2px solid var(--border-strong);
}

.top-table tr.total-row > td:not(.is-best, .is-worst) {
  background: var(--surface);
}

.store-notes {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.store-notes li + li {
  margin-top: var(--space-1);
}

/* ---- 11 · Secciones informativas ---- */

.info-section {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
}

.info-section p {
  max-width: var(--measure);
}

/* Número de paso en un círculo índigo relleno, como los «1 2 3» del POS. */
.step-num {
  display: grid;
  place-items: center;
  width: var(--icon-box);
  height: var(--icon-box);
  border-radius: 50%;
  background: var(--accent);
  color: var(--action-contrast);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1;
  margin-bottom: var(--space-5);
}

/* Acordeón como las preguntas del POS (preguntas frecuentes y «Otros resultados»): una caja redondeada
   con filetes entre ítems, 56 px de alto y chevrón a la derecha. */
.faq {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  overflow: clip;
}

.faq-item + .faq-item {
  border-top: 1px solid var(--border);
}

.faq-item > summary,
.result-related > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-3) var(--space-5);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--text-strong);
  transition: background-color var(--dur-fast) var(--ease);
}

.faq-item > summary::-webkit-details-marker,
.result-related > summary::-webkit-details-marker {
  display: none;
}

.faq-item > summary::after,
.result-related > summary::after {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin: 0 4px 4px 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}

.faq-item[open] > summary::after,
.result-related[open] > summary::after {
  margin: 4px 4px 0 0;
  transform: rotate(-135deg);
}

.faq-item > p {
  margin: 0 0 var(--space-5);
  padding: 0 var(--space-9) 0 var(--space-5);
  font-size: var(--fs-md);
  color: var(--muted);
  max-width: calc(var(--measure) + var(--space-9) + var(--space-5));
}

/* «Acerca del sitio»: sin fondo ni sangría, alineado con la rejilla de las demás secciones. */
.about {
  margin-top: var(--space-8);
  padding-top: 0;
  border-top: 0;
}

.about-inner .section-title {
  margin-bottom: var(--space-3);
}

/* ---- 12 · Pie de página ---- */

/* Pie claro, como el del POS: fondo gris azulado muy suave, borde arriba, títulos en azul marino y
   enlaces grises con subrayado tenue. */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  font-size: var(--fs-sm);
  border-top: 1px solid var(--header-border);
}

.site-footer a {
  color: var(--footer-text);
  text-decoration-color: color-mix(in srgb, var(--footer-text) 40%, transparent);
}

.site-footer a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--space-6);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.footer-title {
  margin: 0 0 var(--space-4);
  color: var(--footer-strong);
  font-weight: 600;
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

/* Interlínea ajustada: título y párrafo quedan en la misma línea base que las otras columnas. */
.footer-brand .footer-title {
  font-weight: var(--fw-heading);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-heading);
  line-height: 1.05;
}

.footer-brand p {
  max-width: var(--measure-narrow);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

/* Un enlace del pie nunca pasa de su columna: con la letra al 200 % («Preguntas frecuentes» a 28 px) y dos columnas en el teléfono, el
   de la segunda salía 30 px por la derecha y la página se ensanchaba. */
.footer-col li {
  min-width: 0;
}

.footer-col li a {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Con dedo el espacio entre ítems es 0 (los enlaces ya miden 44 px): las fuentes sin enlace («Sitios de Líder, Jumbo…») quedaban
   pegadas y se leían como un solo párrafo. */
@media (pointer: coarse) {
  .footer-col li:not(:has(a)) {
    padding-block: var(--space-1);
  }
}

/* El filete se dibuja en la caja de contenido para alinearse con las columnas. */
.footer-note {
  background: linear-gradient(var(--header-border), var(--header-border)) top / 100% 1px no-repeat content-box;
  padding-bottom: var(--space-6);
  font-size: var(--fs-sm);
}

.footer-note p {
  margin: 0;
  padding-top: var(--space-5);
  max-width: var(--measure-sm);
}

/* ---- 13 · Hover: solo con puntero real ----
   En pantallas táctiles el hover queda «pegado» tras tocar; por eso los estados de este tipo
   viven aquí, bajo (hover: hover). El estado pulsado de los botones está en «Botones». */
@media (hover: hover) {
  a:hover {
    color: var(--accent-strong);
  }

  .site-brand:hover {
    color: var(--header-text);
  }

  .site-nav a:hover {
    color: var(--header-text);
  }

  .chip-link:hover {
    background: var(--surface-2);
    border-color: var(--text);
  }

  .btn.accent:not(:disabled):hover {
    background: var(--tertiary-active);
    border-color: var(--accent);
    color: var(--accent-strong);
  }

  .ficha-enlace:hover {
    border-color: var(--accent-border);
  }

  .ficha-enlace a:hover {
    color: inherit;
    text-decoration: underline;
  }

  .btn:not(:disabled):hover {
    background: var(--tertiary-hover);
    border-color: var(--accent-border);
    color: var(--tertiary-hover-text);
  }

  .btn.primary:not(:disabled):hover {
    background: var(--action-hover);
    border-color: var(--action-hover);
    color: var(--action-contrast);
  }

  .btn.ghost:not(:disabled):hover {
    background: var(--surface-2);
    border-color: transparent;
    color: var(--text-strong);
  }

  .chip:hover span {
    background: var(--surface-2);
  }

  .comuna-option:hover span {
    background: var(--surface);
    color: var(--text);
  }

  .faq-item > summary:hover,
  .result-related > summary:hover {
    background: var(--surface-2);
  }

  /* La opción activa (elegida con las flechas) conserva su índigo claro bajo el cursor. */
  .sugerencias li:not([aria-selected='true']):hover {
    background: var(--surface-2);
  }

  .btn.whatsapp:not(:disabled):hover {
    background: var(--whatsapp-hover);
    border-color: var(--whatsapp-hover);
    color: var(--on-whatsapp);
  }

  .btn-texto:hover,
  .opciones > summary:hover {
    color: var(--accent-strong);
    text-decoration-thickness: 2px;
  }

  .top-price a:hover {
    color: var(--text-strong);
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
  }

  .site-footer a:hover {
    color: var(--footer-strong);
    text-decoration-color: var(--footer-strong);
  }

  .map .leaflet-bar a:hover,
  .map .leaflet-bar a:focus-visible {
    background: var(--surface-2);
    color: var(--text-strong);
  }

  .map a.leaflet-popup-close-button:hover {
    color: var(--text-strong);
    background: transparent;
  }
}

/* Barra de navegación inferior (teléfono): solo con puntero real se tiñe la pestaña bajo el cursor. */
@media (hover: hover) and (max-width: 640px) {
  .site-nav a:not([aria-current='page']):hover {
    background: var(--surface-2);
  }
}

/* Pulsado (también en pantallas táctiles, donde no hay hover). Va después del hover: con el ratón
   el botón apretado se ve más oscuro que el botón con el cursor encima. */
.btn:not(:disabled):active {
  background: var(--tertiary-active);
  border-color: var(--accent);
  color: var(--tertiary-hover-text);
}

.btn.primary:not(:disabled):active {
  background: var(--action-active);
  border-color: var(--action-active);
  color: var(--action-contrast);
}

.btn.whatsapp:not(:disabled):active {
  background: var(--whatsapp-active);
  border-color: var(--whatsapp-active);
  color: var(--on-whatsapp);
}

.btn.ghost:not(:disabled):active {
  background: var(--surface-3);
  border-color: transparent;
  color: var(--text-strong);
}

/* La fila bajo el cursor se tiñe de gris suave (solo escritorio; la más barata y la más cara
   conservan su color y el total de la canasta no reacciona). */
@media (hover: hover) and (min-width: 64em) {
  .top-table tbody tr:not(.total-row):hover > :not(.is-best, .is-worst) {
    background: var(--row-hover);
  }
}

/* Las farmacias de una presentación: la fila bajo el cursor se tiñe (la ganadora conserva su verde). */
@media (hover: hover) {
  .forma-precios tbody tr:hover > :not(.mejor) {
    background: var(--row-hover);
  }
}

/* Hover por paquete: cada uno agrega aquí los :hover de sus reglas nuevas, dentro de @media (hover: hover) { ... }
   (en pantallas táctiles el hover queda «pegado» tras tocar). Los :hover de más arriba siguen donde están. */

/* >>> PAQUETE PORTADA */
/* Ya existe arriba: .sugerencias li:not([aria-selected]):hover (lista de sugerencias del buscador), .chip-link:hover y
   .ficha-enlace:hover (fichas del resumen). */
@media (hover: hover) {
  /* Las estaciones del resumen: al pasar el cursor, el borde índigo claro de las demás fichas; la marca, azul marino. */
  .estacion:hover {
    border-color: var(--accent-border);
  }

  .estacion-nombre a:hover {
    color: var(--tertiary-hover-text);
  }
}
/* <<< PAQUETE PORTADA */

/* >>> PAQUETE COMBUSTIBLES */
/* Ya existen arriba los controles de zoom de Leaflet (.map .leaflet-bar a). */
/* Combustibles: los :hover de lo nuevo (marcas, filas, leyenda, interruptor y marcadores) solo con puntero real. */
@media (hover: hover) {
  .marca-chip:not(.puesta):hover {
    background: var(--surface-2);
  }

  .marca-chip.puesta:hover {
    background: var(--action-hover);
    border-color: var(--action-hover);
  }

  .fila-est:not(.is-selected):hover {
    border-color: var(--accent-border);
  }

  .mapa-leyenda-boton:hover {
    background: var(--surface-2);
  }

  .comb-auto:hover .comb-auto-interruptor {
    border-color: var(--accent);
  }

  .map-pin:not(.sel):hover,
  .map-dot:not(.sel):hover,
  .map-grupo:hover {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}
/* <<< PAQUETE COMBUSTIBLES */

/* >>> PAQUETE BUSQUEDA */
/* Ya existen arriba: .forma-precios tbody tr:hover, .top-price a:hover y .result-related > summary:hover. */
/* <<< PAQUETE BUSQUEDA */

/* >>> PAQUETE COPAGOS */
/* Hover de Copagos: solo con puntero que puede pasar por encima (en pantallas táctiles queda «pegado» tras tocar). */
@media (hover: hover) {
  .cp-resultado-fila:hover {
    background: var(--row-hover);
  }

  .cp-sedes > summary:hover,
  .cp-mas > summary:hover,
  .cp-como > summary:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .cp-detalle > summary:hover {
    background: var(--row-hover);
  }

  .cp-resultados-panel > .cp-mas > summary:hover {
    background: var(--tertiary-hover);
    color: var(--tertiary-hover-text);
  }
}
/* <<< PAQUETE COPAGOS */

/* >>> PAQUETE LISTAS */
/* Ya existen arriba: .btn.whatsapp:hover, .btn-texto:hover y .opciones > summary:hover. */
@media (hover: hover) {
  /* Lo básico: el chip se tiñe de índigo claro, como los demás chips; el elegido ya va relleno. */
  .chip-boton:hover:not([aria-pressed='true']) {
    background: var(--tertiary-hover);
    border-color: var(--accent-border);
    color: var(--tertiary-hover-text);
  }

  .chip-boton[aria-pressed='true']:hover {
    background: var(--action-hover);
    border-color: var(--action-hover);
  }

  .consejos > summary:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}
/* <<< PAQUETE LISTAS */

/* ---- 14 · Páginas ----
   Un bloque por paquete de página, cada uno entre sus marcadores, en este orden: PORTADA, COMBUSTIBLES, BUSQUEDA,
   COPAGOS y LISTAS. El orden importa donde dos reglas de igual especificidad se pisan: la tabla de «Mi receta»
   (.top-table.copagos-table con .forma-elegir) toma el ancho de su primera columna de LISTAS, que va después de COPAGOS;
   y .mis-examenes-form (de Mis exámenes) queda dentro de LISTAS, justo tras .mi-lista-form, que sobrescribe. Las clases
   compartidas de «Mi receta» / «Mi lista» (.recomendaciones, .mi-lista-item, traslado y WhatsApp) son de LISTAS. */

/* >>> PAQUETE PORTADA */
/* Portada. De arriba abajo: el buscador (compacto: pregunta, campo, una línea de confianza y dos filas que se desplazan), las
   cuatro tarjetas de acceso (una por fila en el teléfono, dos desde 641 px y las cuatro desde 1168 px; ver «Responsive»),
   cada una con su buscador; el «Resumen de hoy» en fichas (carrusel en el teléfono) y lo informativo en un solo bloque.
   Sin selector de comuna: busca en las dos (2026-10-25). */

/* ---- Buscador ---- */
.buscador-inicio {
  gap: var(--space-3);
  padding: var(--space-4);
  margin: var(--space-5) 0 var(--space-5);
}

main > .buscador-inicio.controls:first-child {
  margin-top: var(--space-5);
}

/* Una línea de confianza bajo el campo: de dónde salen los precios y que no hay registro ni publicidad. */
.hero-confianza {
  margin: 0;
  max-width: none;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

/* «Buscar en» y «Pruebe con»: el rótulo y, a su lado, las cinco opciones o los cinco ejemplos; si no caben en una fila pasan a otra (no se
   esconde ninguno: con el ratón no hay cómo llegar a lo que queda fuera). Solo en el teléfono (≤ 640 px, bloque «Responsive») el rótulo va
   encima y la fila se desliza. */
.buscar-en,
.ejemplos {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}

.buscar-en-rotulo,
.ejemplos-rotulo {
  flex: none;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.buscar-en .chips,
.ejemplos-lista {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.buscar-en .chips .chip,
.ejemplos-lista .chip-link {
  flex: none;
}

/* ---- Tarjetas de acceso ---- */
.accesos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin: 0 0 var(--space-7);
}

/* Cada tarjeta es un «contenedor»: su formulario pasa a una sola fila según el ancho de la tarjeta, no el de la pantalla. */
.acceso {
  container-type: inline-size;
  background: var(--surface);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.acceso > * {
  margin: 0;
}

.acceso-titulo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.acceso .card-icon {
  width: 32px;
  height: 32px;
  padding: 7px;
}

.acceso .help {
  line-height: var(--lh-snug);
}

/* En la tarjeta el formulario no lleva caja propia. */
.acceso .controls {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}

/* Receta y lista del súper, angostas (el teléfono): el campo arriba, a todo el ancho, y debajo «Cajas [1]» con el botón (que pasa a
   otra fila si con letra grande no caben). El rótulo del producto queda para lectores de pantalla (el título de la tarjeta y el
   ejemplo del campo ya lo dicen). */
.acceso .mi-lista-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.acceso .mi-lista-producto {
  flex: 1 1 100%;
  order: 0;
}

.acceso .mi-lista-producto .label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.acceso .mi-lista-unidades {
  flex: none;
  order: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.acceso .mi-lista-unidades .label {
  margin: 0;
}

.acceso .mi-lista-unidades input {
  width: 4.5rem;
}

/* El botón no parte su texto: si no cabe junto a «Cajas», pasa entero a la fila de abajo. */
.acceso .mi-lista-form .btn {
  flex: 1 1 auto;
  order: 3;
  white-space: nowrap;
}

.acceso .search-form {
  flex-wrap: wrap;
}

.acceso .search-form input,
.acceso .search-form .btn {
  flex: 1 1 100%;
}

/* La lista de sugerencias va en el flujo, después del botón: ni lo tapa ni lo aleja del campo (2026-10-30). */
.acceso .sugerencias {
  position: static;
  order: 4;
  flex: 1 1 100%;
  max-height: none;
  margin: 0;
}

.acceso .search-form input {
  order: 0;
}

.acceso .search-form .btn {
  order: 2;
}

/* Ancha (desde unos 450 px de tarjeta): campo, cantidad y botón en una fila. */
@container (min-width: 449px) {
  .acceso .mi-lista-producto {
    flex: 1 1 12rem;
  }

  .acceso .mi-lista-form .btn {
    flex: none;
  }

  .acceso .sugerencias {
    order: 4;
  }

  .acceso .search-form input {
    flex: 1 1 0;
  }

  .acceso .search-form .btn {
    flex: none;
  }
}

/* «Escriba el primer medicamento…» repite lo que dice la tarjeta; el resumen de «Su receta» sí se muestra. */
.acceso .empty {
  display: none;
}

/* ---- Resumen de hoy ---- */
.home {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--space-6);
}

.home-card {
  background: var(--surface);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}

.home-card > * {
  margin: 0;
  width: 100%;
}

/* Los botones de «Resumen de hoy» miden lo mismo (320 × 48 px); en pantallas muy angostas
   el texto largo pasa a dos líneas dentro de la ficha. */
.home-card > .btn {
  width: auto;
  min-width: min(100%, 20rem);
  max-width: 100%;
  margin-top: auto;
}

/* Franja destacada a lo ancho: lleva las cifras del día en fichas (ver «Cifras de la portada», más abajo). */
.home-card-wide {
  grid-column: 1 / -1;
}

.home-card-wide .help {
  max-width: none;
}

/* El JS rellena "Actualizado hace…"; mientras está vacío no ocupa lugar. */
[id$='-actualizado']:empty {
  display: none;
}

.home-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  justify-content: space-between;
}

.home-card-title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Íconos en un cuadrito índigo claro de 40 px, como los de las tarjetas del POS. */
.card-icon {
  width: var(--icon-box);
  height: var(--icon-box);
  flex-shrink: 0;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
}

.home-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.home-list li:last-child {
  border-bottom: 0;
}

.home-list small {
  display: block;
  font-size: var(--fs-sm);
}

.home-list-price {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.home-list-price strong {
  color: var(--text-strong);
  font-size: var(--price-row);
  font-weight: var(--fw-price);
  letter-spacing: var(--ls-figure);
}

/* Cifras de la portada («Resumen de hoy» y resultados del buscador). Cada una lleva, en este orden: el nombre, el precio, dónde
   está y los otros precios con su rótulo. En una tarjeta angosta es una fila (el nombre a la izquierda y el precio a la derecha;
   el resto, debajo). */
.home-list-nombre {
  min-width: 0;
  flex: 1 1 14rem;
}

.home-list-price .unit {
  display: inline-block;
  margin-left: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

/* El precio por kilo, litro o unidad bajo el precio del envase (resultados de supermercados); verde el más barato por esa unidad. */
.home-list-price .home-list-sub {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.home-list-price .home-list-sub.best {
  color: var(--best-strong);
}

.home-list-donde,
.home-list-otros {
  flex: 1 0 100%;
  margin: 0;
}

.home-list-donde strong {
  font-weight: 600;
  color: var(--text);
}

/* Los otros precios (en farmacia, el más caro, el nivel 3): el rótulo a la izquierda y la cifra a la derecha. Verde el más barato y
   rojo el más caro, en el tono fuerte porque van chicos sobre el fondo gris azulado de la ficha. */
.home-list-otros > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.home-list-otros dt {
  min-width: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

/* La tienda no se parte: si no cabe junto al rótulo, pasa entera a la línea de abajo. */
.home-list-otros dt span {
  display: inline-block;
  color: var(--text);
}

.home-list-otros dd {
  flex-shrink: 0;
  margin: 0;
  font-size: var(--price-aux);
  font-weight: var(--fw-price-aux);
  font-variant-numeric: tabular-nums;
}

.home-list-otros .best {
  color: var(--best-strong);
}

.home-list-otros .worst {
  color: var(--worst-strong);
}

/* «Resumen de hoy»: cada cifra es una ficha con el nombre, el precio en grande (40 px, en negrita), dónde está y, bajo un filete, los
   otros precios. Dos fichas por fila y cuatro desde 1168 px; en el teléfono, un carrusel (ver «Responsive»). */
.home-card-wide .home-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.home-card-wide .home-list li {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: var(--space-4);
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.home-card-wide .home-list-nombre {
  flex: 0 0 auto;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--text-strong);
}

.home-card-wide .home-list-nombre small {
  font-weight: 400;
}

.home-card-wide .home-list-price {
  margin-top: var(--space-2);
  font-size: var(--price-hero);
  line-height: var(--lh-tight);
}

.home-card-wide .home-list-price strong {
  font-size: inherit;
  font-weight: var(--fw-price);
  letter-spacing: var(--ls-figure);
}

/* A 24 px o más, el verde y el rojo pueden ser los vivos. */
.home-card-wide .home-list-price strong.best {
  color: var(--best);
}

.home-card-wide .home-list-price strong.worst {
  color: var(--worst);
}

.home-card-wide .home-list-donde {
  flex: 0 0 auto;
  margin: var(--space-1) 0 var(--space-4);
  color: var(--muted);
  line-height: var(--lh-snug);
}

.home-card-wide .home-list-otros {
  flex: 0 0 auto;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

/* El nombre de la ficha es su enlace (.ficha-enlace, de «Tablas de precios»): el subrayado solo aparece al enfocar. */
.home-card-wide .home-list-nombre a {
  font-weight: 600;
}

/* Las fichas de una misma fila se alinean entre sí: cada una reparte sus cuatro partes (nombre, precio, dónde y otros precios) en
   las filas de la rejilla, así los precios y los filetes quedan a la misma altura aunque un nombre ocupe dos líneas. */
@supports (grid-template-rows: subgrid) {
  .home-card-wide .home-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: span 4;
    row-gap: 0;
  }

  .home-card-wide .home-list-nombre {
    grid-row: 1;
  }

  .home-card-wide .home-list-price {
    grid-row: 2;
  }

  .home-card-wide .home-list-donde {
    grid-row: 3;
  }

  .home-card-wide .home-list-otros {
    grid-row: 4;
    margin-top: 0;
  }
}

/* ---- Combustibles del resumen: las estaciones más baratas, de menor a mayor ---- */
/* Cuatro chips que se reparten el ancho; con letra muy grande pasan a otra fila en vez de salirse. */
.chips-combustible .chip {
  flex: 1 1 auto;
}

.chips-combustible .chip span {
  justify-content: center;
  width: 100%;
}

.estaciones-caja {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.estaciones-resumen {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

/* Cada estación: el puesto, la marca y la dirección, y a la derecha el precio y «Cómo llegar». La marca es el enlace de toda la
   fila (hacia Combustibles); el botón queda por encima de él. */
.estacion {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  grid-template-areas:
    'puesto nombre precio'
    'puesto dir boton';
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

.estacion-puesto {
  grid-area: puesto;
  align-self: start;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-strong);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.estacion-nombre {
  grid-area: nombre;
  min-width: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-snug);
}

.estacion-nombre a {
  color: var(--text-strong);
  text-decoration: none;
}

.estacion-nombre a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.estacion-nombre a:focus-visible {
  outline: none;
}

.estacion-nombre a:focus-visible::after {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.estacion-precio {
  grid-area: precio;
  justify-self: end;
  color: var(--text-strong);
  font-size: var(--price-card);
  font-weight: var(--fw-price);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-figure);
  line-height: var(--lh-tight);
}

/* Solo la más barata va en verde, y solo su cifra: las otras dos no son «la más barata». */
.estacion:first-child .estacion-precio {
  color: var(--best-strong);
}

.estacion-direccion {
  grid-area: dir;
  min-width: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.estacion .btn {
  grid-area: boton;
  position: relative;
  z-index: var(--z-raised);
  justify-self: end;
  white-space: nowrap;
}

/* «Dato de hace 3 días»: bajo la dirección, en el aviso naranjo de Combustibles. */
.estacion-atraso {
  display: block;
  margin-top: 2px;
}

/* Lo único en rojo de la tarjeta: la estación más cara. */
.estacion-mas-cara {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.estacion-mas-cara strong {
  color: var(--worst-strong);
  font-weight: 600;
}

/* ---- Resultados del buscador y «sin resultados» ---- */
.resultados-vacias {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-sm);
}

.estado-busqueda .estado-ejemplos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}

.estado-busqueda .ejemplos-lista {
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  overflow: visible;
}

.estado-busqueda .estado-secciones {
  max-width: none;
  font-size: var(--fs-sm);
}

/* ---- Lo informativo, en un solo bloque ---- */
.pasos {
  list-style: none;
  margin: 0 0 var(--space-7);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.paso {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.paso .step-num {
  flex: none;
  margin: 0;
}

.paso h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-lg);
  font-weight: 600;
}

.paso p {
  margin: 0;
  color: var(--muted);
}

.fuentes-titulo {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-lg);
  font-weight: 600;
}

/* La tabla de fuentes: una caja redondeada con la cabecera gris azulada, como las tablas de precios. En el teléfono cada fila es
   una ficha con el nombre de la sección y, debajo, su fuente y cada cuánto se actualiza. */
.fuentes-caja {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  overflow: clip;
}

.fuentes-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
  text-align: left;
}

.fuentes-tabla thead th {
  padding: var(--space-3) var(--space-5);
  background: var(--table-head-bg);
  color: var(--table-head-text);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.fuentes-tabla tbody th,
.fuentes-tabla tbody td {
  padding: var(--space-3) var(--space-5);
  vertical-align: top;
  border-top: 1px solid var(--border);
}

.fuentes-tabla tbody th {
  color: var(--text-strong);
  font-weight: 600;
  white-space: nowrap;
}

.fuentes-tabla tbody td {
  color: var(--muted);
}

.fuentes-tabla tbody td:last-child {
  white-space: nowrap;
}

/* Sugerencias mientras se escribe (sugerencias.js): una lista bajo el campo, sobre el resto de la página. El
   formulario es la referencia de la posición; el JS pone la lista justo bajo el campo (y, desde 641 px, de su ancho). */
form.con-sugerencias {
  position: relative;
}

.sugerencias {
  position: absolute;
  z-index: 30;
  margin: var(--space-1) 0 0;
  padding: var(--space-1) 0;
  list-style: none;
  max-height: 22rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
}

.sugerencias[hidden] {
  display: none;
}

.sugerencias li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--control-md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--text);
  cursor: pointer;
}

.sugerencias li + li {
  border-top: 1px solid var(--border);
}

.sugerencias li[aria-selected='true'] {
  background: var(--accent-soft);
  box-shadow: inset var(--rule) 0 0 var(--focus);
}

/* El texto sigue hasta dos líneas (un nombre largo del arancel) y solo entonces se corta; nunca antes de lo que cabe. */
.sugerencia-texto {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.sugerencia-texto strong {
  font-weight: 600;
  color: var(--text-strong);
}

.sugerencia-seccion {
  flex: none;
  font-size: var(--fs-sm);
  color: var(--muted);
  white-space: nowrap;
}

/* El texto que cambia según el aparato: «Actualizado hace 3 minutos» / «hace 3 minutos». */
.solo-movil {
  display: none;
}

/* «Lo básico» (los chips que mi-lista.js dibuja bajo el formulario del súper) no va en la portada: cada tarjeta debe medir lo mismo
   y esa fila sumaba 70 px al teléfono. El aviso «¿Qué tamaño?» sí, sin margen. */
.acceso .basico {
  display: none;
}

.acceso p.aviso-tamano {
  margin: var(--space-2) 0 0;
}

/* «Buscar»: en el teléfono es solo la lupa (48 px), para que el campo muestre su ejemplo completo; desde 481 px, la palabra. */
.buscar-icono {
  display: none;
  width: 20px;
  height: 20px;
  flex: none;
}
/* <<< PAQUETE PORTADA */

/* >>> PAQUETE COMBUSTIBLES */
/* ---- Combustibles (2026-10-30) ----
   Orden de la página: chips de combustible con su «desde» → veredicto → lista de estaciones (de menor a mayor precio, con
   «+$N») y mapa. Desde 64 em el mapa va fijo al lado de la lista; bajo 64 em no se dibuja en línea: se abre a pantalla completa
   (#seccion-mapa.abierto) con la ficha de la estación pegada abajo. Verde: la más barata; rojo: la más cara; nada más lleva
   color de precio. Los tamaños de 13 y 15 px de los marcadores del mapa son los de la etiqueta de precio (28 y 32 px de alto). */

/* Combustible: una fila de chips con el precio «desde» de cada uno (se desplaza en el teléfono) y el interruptor de autoservicio. */
.comb-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin: var(--space-5) 0 var(--space-4);
}

.comb-fieldset {
  flex: 1 1 auto;
  min-width: 0;
}

/* Los combustibles se acomodan en renglones (en el teléfono, dos): ninguno queda fuera de la pantalla detrás de un deslizador, y el
   elegido siempre se ve. El alto reservado evita que la página salte cuando llegan los precios (dos renglones en el teléfono). */
.comb-chips {
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  min-height: 92px;
}

.comb-chips .chip {
  flex: 1 1 auto;
}

.comb-chips .chip > span {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  line-height: var(--lh-snug);
}

/* Los dos renglones del chip (el nombre y «desde $1.623») no heredan el aspecto de píldora de `.chip span`. */
.comb-chips .chip > span > span {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  white-space: nowrap;
}

.comb-chips .chip > span > .comb-chip-nombre {
  font-weight: 600;
}

.comb-chips .chip > span > .comb-chip-desde {
  font-weight: 400;
  color: var(--muted);
}

.comb-chips .chip input:checked + span > .comb-chip-desde {
  color: inherit;
}

/* Interruptor «Autoservicio»: solo existe si ese combustible lo tiene. */
.comb-auto {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-md);
  cursor: pointer;
}

.comb-auto input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.comb-auto-interruptor {
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.comb-auto-interruptor::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--input-border);
  transition: transform var(--dur-fast) var(--ease);
}

.comb-auto input:checked + .comb-auto-interruptor {
  background: var(--inverse);
  border-color: var(--inverse);
}

.comb-auto input:checked + .comb-auto-interruptor::after {
  transform: translateX(20px);
  border-color: transparent;
}

.comb-auto input:focus-visible + .comb-auto-interruptor {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.comb-auto-texto {
  display: grid;
  line-height: var(--lh-snug);
}

.comb-auto-rotulo {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.comb-auto-ayuda {
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Veredicto: la respuesta en una pantalla. En el computador, tres columnas: la más barata, lo que cuestan las demás y los botones. */
.veredicto-estaciones {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  min-height: 290px; /* el alto de la respuesta en el teléfono (276-334 px según el ancho): al llegar los precios la página no salta */
  background: var(--surface);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
}

/* Un error, «sin precios» o «sin estaciones» no necesita el alto de la respuesta completa. */
.veredicto-estaciones.sin-reserva {
  min-height: 0;
}

.veredicto-estaciones > div {
  display: grid;
  gap: var(--space-3);
}

.veredicto-estaciones p {
  margin: 0;
}

.ve-principal {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.ve-rotulo {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
}

.ve-precio {
  line-height: var(--lh-tight);
}

.ve-precio strong {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-price);
  letter-spacing: var(--ls-figure);
  font-variant-numeric: tabular-nums;
  color: var(--best);
}

.ve-precio .unit {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.ve-donde {
  font-size: var(--fs-md);
  overflow-wrap: anywhere;
}

.ve-donde strong {
  font-weight: 600;
}

.ve-empate {
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Dato atrasado (más de un día detrás de las demás): se avisa, la estación sigue en su lugar. Naranjo de aviso con un punto. */
.aviso-atraso {
  color: var(--warn);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.aviso-atraso::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
}

.ve-texto {
  font-size: var(--fs-md);
  max-width: var(--measure);
}

.ve-acciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--space-2);
}

.ve-acciones .btn {
  min-height: var(--control-md);
}

/* «Enviar por WhatsApp»: el verde del botón del sitio, pero del tamaño de los demás botones del veredicto. */
.ve-acciones .btn.whatsapp {
  min-height: var(--control-md);
  padding-inline: var(--space-3);
  gap: var(--space-2);
  font-size: var(--fs-sm);
}

.ve-acciones .btn.whatsapp svg {
  width: 20px;
  height: 20px;
}

.ve-extra {
  display: grid;
  gap: var(--space-2);
}

.ve-otra,
.ve-filtro {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.ve-comunas {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.ve-comunas li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
}

.ve-comuna-precio {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ve-comuna-donde {
  color: var(--muted);
}

/* Un mensaje con salida dentro del veredicto («Ninguna estación de Iquique informa kerosene»). */
.veredicto-estaciones .estado {
  padding: 0;
  border: 0;
  background: none;
}

/* Estaciones y mapa. Mientras llegan los precios el bloque reserva una pantalla de alto: lo que sigue («Cómo leer esta página», el pie)
   queda fuera de la vista y no salta cuando aparece la lista. */
.estaciones-bloque {
  margin-bottom: var(--block-gap);
}

.estaciones-bloque.cargando {
  min-height: 100svh;
}

.map-section {
  margin: 0;
}

.cabecera-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}

.titulo-estaciones {
  flex: 1 1 14rem;
  min-width: 0;
}

.titulo-estaciones .section-title {
  font-size: var(--fs-xl);
}

.sub-estaciones {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.mapa-abrir {
  flex: none;
  min-height: var(--control-md);
}

.herramientas-lista {
  margin-bottom: var(--space-3);
}

/* Orden y marcas en una sola fila (en el teléfono se desplaza: «Menor precio ▾», «Copec 6», «Aramco 5»…). */
.filtros-fila {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 calc(-1 * var(--gutter)) var(--space-4);
  padding: 2px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}

.filtros-fila::-webkit-scrollbar {
  display: none;
}

.filtros-fila .select-field {
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--space-2);
}

/* En el teléfono el orden se lee por su valor («Menor precio»): el rótulo queda solo para el lector de pantalla. */
.filtros-fila .select-field .label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.filtros-fila select {
  min-height: var(--control-md);
  padding-top: 0;
  padding-bottom: 0;
}

/* Marcas con su cuenta (Copec 6 · Shell 5): atajos del buscador. En el teléfono sus chips son parte de la fila que se desplaza. */
.marcas {
  display: contents;
}

.marca-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-md);
  padding: 0 var(--space-4);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.marcas-rotulo {
  flex: none;
  margin-left: var(--space-2);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.marca-chip:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.marca-chip.puesta {
  background: var(--inverse);
  border-color: var(--inverse);
  color: var(--inverse-text);
}

.marca-cuenta {
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.marca-chip.puesta .marca-cuenta {
  color: inherit;
}

/* «N estaciones coinciden con …» bajo el buscador de combustibles. */
.filtro-activo {
  margin: 0 0 var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

#ubicacion-aviso,
#mapa-no-disponible {
  margin: 0 0 var(--space-3);
}

#mapa-no-disponible .btn {
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* Al llevarlo a la vista no queda bajo la barra de navegación del teléfono. */
#ubicacion-aviso {
  scroll-margin-bottom: calc(var(--tabbar-h) + var(--space-4));
}

/* La lista: una fila por estación, de menor a mayor precio. Número en círculo (verde el primero y rojo el último), marca,
   dirección, cuándo informó, precio y los dos botones. En el teléfono la fila es una ficha de cuatro renglones. */
.filas {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fila-est {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-areas:
    'puesto nombre precio'
    'puesto dir etiqueta'
    'meta meta meta'
    'acc acc acc';
  column-gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.fila-puesto {
  grid-area: puesto;
  align-self: start;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.fila-est.is-best .fila-puesto {
  background: var(--best);
  border-color: var(--best);
  color: var(--on-best);
}

.fila-est.is-worst .fila-puesto {
  background: var(--worst);
  border-color: var(--worst);
  color: var(--on-worst);
}

.fila-puesto.sin-puesto {
  border-style: dashed;
  color: var(--muted);
}

.fila-nombre {
  grid-area: nombre;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
}

.fila-marca {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

/* La comuna (solo con «Ambos») va junto a la marca, en gris. */
.fila-comuna {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.fila-etiqueta {
  grid-area: etiqueta;
  justify-self: end;
  align-self: start;
  max-width: 100%;
  margin-top: var(--space-1);
  text-align: right;
  overflow-wrap: anywhere;
}

.fila-etiqueta:empty {
  display: none;
}

.fila-direccion {
  grid-area: dir;
  align-self: start;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

.fila-meta {
  grid-area: meta;
  margin: var(--space-1) 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--muted);
}

.fila-meta .aviso-atraso {
  font-weight: 500;
}

.fila-precio {
  grid-area: precio;
  margin: 0;
  text-align: right;
  white-space: nowrap;
  font-size: var(--price-row);
  font-weight: var(--fw-price);
  letter-spacing: var(--ls-figure);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
}

.fila-est.is-best .fila-precio {
  color: var(--best-strong);
}

.fila-est.is-worst .fila-precio {
  color: var(--worst-strong);
}

.fila-est.is-stale .fila-precio {
  color: var(--muted);
}

.fila-acciones {
  grid-area: acc;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.fila-acciones .btn {
  min-height: var(--control-md);
}

/* Dos botones del mismo ancho: el texto y la flecha caben sin partirse. */
.ve-acciones .btn,
.fila-acciones .btn,
.ficha-acciones .btn {
  gap: var(--space-2);
  padding-inline: var(--space-3);
}

/* La más barata y la más cara llevan un filete de color a la izquierda; la elegida, fondo índigo claro. */
.fila-est.is-best {
  box-shadow: inset var(--rule) 0 0 var(--best);
}

.fila-est.is-worst {
  box-shadow: inset var(--rule) 0 0 var(--worst);
}

.fila-est.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  box-shadow: inset var(--rule) 0 0 var(--accent);
}

.fila-est.is-hover {
  border-color: var(--accent);
}

/* Las que llevan más de una semana sin informar: aparte, sin número ni color. */
.sin-actualizar {
  margin-top: var(--space-6);
}

.sin-actualizar h3 {
  font-size: var(--fs-lg);
}

.sin-actualizar > p {
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--fs-sm);
  max-width: var(--measure-sm);
}

/* ---- Mapa ---- */
.mapa-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.mapa-titulo {
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-heading);
}

.mapa-volver {
  display: none;
}

.mapa-caja {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}

.map {
  position: absolute;
  inset: 0;
  z-index: 0;
  font-family: var(--font-sans);
  background: var(--bg);
}

/* Mientras llega Leaflet (en el teléfono, con el mapa ya abierto) la caja no queda en blanco. */
.mapa-cargando {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  margin: 0;
  background: var(--bg);
  color: var(--muted);
  font-size: var(--fs-md);
  font-weight: 500;
}

/* El mapa ya no es una parada del teclado (la lista es el camino); el cursor cambia al elegir el punto de partida. */
.map.picking,
.map.picking .leaflet-grab,
.map.picking .leaflet-interactive {
  cursor: crosshair;
}

/* Lo que va sobre el mapa: el combustible que muestra y la leyenda arriba a la izquierda, el aviso y la ficha abajo. */
.mapa-chip {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pin);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.mapa-leyenda {
  position: absolute;
  top: 52px;
  left: var(--space-3);
  z-index: 2;
}

.mapa-leyenda-boton {
  min-height: var(--control-md);
  padding: 0 var(--space-3) 0 var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pin);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}

.mapa-leyenda-boton::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 3px 3px var(--space-2);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.mapa-leyenda-boton[aria-expanded='true']::after {
  margin-bottom: -2px;
  transform: rotate(-135deg);
}

.mapa-leyenda-boton:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.mapa-leyenda-lista {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pin);
  font-size: var(--fs-sm);
  line-height: 1.2;
}

.mapa-leyenda.cerrada .mapa-leyenda-lista {
  display: none;
}

.mapa-leyenda-lista li {
  display: grid;
  grid-template-columns: 46px auto;
  align-items: center;
  gap: var(--space-2);
}

/* Las muestras de la leyenda son los mismos marcadores, en el flujo normal. */
.mapa-leyenda .muestra {
  position: static;
  transform: none;
  justify-self: center;
  pointer-events: none;
}

.mapa-leyenda .muestra.map-pin {
  min-width: 0;
  width: 36px;
  height: 20px;
  padding: 0;
  font-size: 11px;
  box-shadow: none;
}

.mapa-leyenda .muestra.map-pin::before,
.mapa-leyenda .muestra.map-pin::after {
  display: none;
}

.mapa-leyenda .muestra.map-dot {
  width: 22px;
  height: 22px;
  font-size: 11px;
  box-shadow: none;
}

.mapa-leyenda .muestra.map-dot::before {
  display: none;
}

.mapa-leyenda .muestra.map-origin {
  width: 14px;
  height: 14px;
  border-width: 2px;
  box-shadow: none;
}

.mapa-aviso {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: calc(var(--ficha-alto, 0px) + 24px);
  z-index: 3;
  margin: 0;
  background: var(--warn-soft);
  box-shadow: var(--shadow-pin);
}

/* Ficha de la estación elegida: abajo a la izquierda del mapa en el computador, pegada abajo y a lo ancho en el teléfono. */
.mapa-ficha {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 3;
  width: min(360px, calc(100% - 2 * var(--space-3)));
  max-height: calc(100% - 96px);
  overflow-y: auto;
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
}

.ficha-cabecera {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    'puesto marca atras adelante cerrar'
    'puesto dir dir dir dir';
  align-items: center;
  gap: 0 var(--space-1);
}

.ficha-cabecera .fila-puesto {
  grid-area: puesto;
  align-self: start;
  margin-right: var(--space-2);
}

.ficha-marca {
  grid-area: marca;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.ficha-direccion {
  grid-area: dir;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--muted);
}

.ficha-paso:nth-of-type(1) {
  grid-area: atras;
}

.ficha-paso:nth-of-type(2) {
  grid-area: adelante;
}

.ficha-cerrar {
  grid-area: cerrar;
}

.ficha-paso,
.ficha-cerrar {
  min-width: var(--control-md);
  min-height: var(--control-md);
  margin-block: -6px;
  padding: 0;
  font-size: var(--fs-xl);
  line-height: 1;
}

.ficha-paso:disabled {
  opacity: 0.4;
  background: transparent;
  cursor: default;
}

.ficha-cuenta {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ficha-precio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-2) 0 0;
}

.ficha-precio strong {
  font-size: var(--price-card);
  font-weight: var(--fw-price);
  letter-spacing: var(--ls-figure);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
}

.ficha-precio strong.best {
  color: var(--best);
}

.ficha-precio strong.worst {
  color: var(--worst);
}

.ficha-precio .unit,
.ficha-combustible {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.ficha-precio .fila-etiqueta {
  grid-area: auto;
  margin: 0 0 0 var(--space-1);
}

.ficha-meta,
.ficha-aviso {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.ficha-meta {
  color: var(--muted);
}

.ficha-otros {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
}

.ficha-otros summary {
  cursor: pointer;
  color: var(--accent-strong);
  font-weight: 500;
}

.ficha-otros dl {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
}

.ficha-otros dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.ficha-otros dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ficha-acciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.ficha-acciones .btn {
  min-height: var(--control-md);
}

/* Con la ruta calculada, la ficha deja solo el precio y la ruta. */
.mapa-ficha.con-ruta .ficha-meta,
.mapa-ficha.con-ruta .ficha-aviso,
.mapa-ficha.con-ruta .ficha-otros,
.mapa-ficha.con-ruta .ficha-acciones {
  display: none;
}

/* ---- Marcadores ----
   Tres formas (ver public/mapa.js): etiqueta de precio con cola, punto numerado y grupo. Neutros en azul marino; verde la más
   barata, rojo la más cara, morado el precio manual, discontinuo lo que no se actualiza, azul marino relleno la elegida.
   Cada marcador tiene un área táctil de al menos 44 px (::before, invisible). */
.map-pin {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 7px;
  transform: translate(-50%, calc(-100% - 8px));
  transform-origin: 50% 100%;
  border: 2px solid var(--pin);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text);
  font: 700 13px / 1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: var(--shadow-pin);
  cursor: pointer;
}

.map-pin::before {
  content: '';
  position: absolute;
  inset: -8px -2px;
}

.map-pin::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--pin);
  border-bottom: 0;
}

.map-pin.best {
  height: 32px;
  padding: 0 8px;
  background: var(--best);
  border-color: var(--best);
  color: var(--on-best);
  font-size: 15px;
}

.map-pin.best::after {
  border-top-color: var(--best);
}

.map-pin.worst {
  background: var(--worst);
  border-color: var(--worst);
  color: var(--on-worst);
}

.map-pin.worst::after {
  border-top-color: var(--worst);
}

.map-pin.manual {
  border-color: var(--manual);
}

.map-pin.manual::after {
  border-top-color: var(--manual);
}

.map-pin.stale {
  border-style: dashed;
  border-color: var(--border-strong);
  color: var(--muted);
}

.map-pin.stale::after {
  border-top-color: var(--border-strong);
}

.map-pin.mant {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--muted);
}

.map-pin.mant::after {
  border-top-color: var(--border-strong);
}

.map-pin.sel {
  background: var(--pin);
  border-color: var(--pin);
  color: var(--on-dark);
  transform: translate(-50%, calc(-100% - 8px)) scale(1.12);
}

.map-pin.sel::after {
  border-top-color: var(--pin);
}

.map-pin.hover {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.map-dot {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--pin);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font: 700 13px / 1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-pin);
  cursor: pointer;
}

.map-dot::before {
  content: '';
  position: absolute;
  inset: -9px;
}

.map-dot.best {
  background: var(--best);
  border-color: var(--best);
  color: var(--on-best);
}

.map-dot.worst {
  background: var(--worst);
  border-color: var(--worst);
  color: var(--on-worst);
}

.map-dot.manual {
  border-color: var(--manual);
}

.map-dot.stale {
  border-style: dashed;
  border-color: var(--border-strong);
  color: var(--muted);
}

.map-dot.mant {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--muted);
}

.map-dot.sel {
  background: var(--pin);
  border-color: var(--pin);
  color: var(--on-dark);
  transform: translate(-50%, -50%) scale(1.12);
}

.map-dot.hover {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Grupo con poco zoom: «desde $1.626 · 7 estaciones»; el borde verde dice que incluye a la más barata. */
.map-grupo {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  display: grid;
  align-content: center;
  justify-items: center;
  width: 104px;
  height: 40px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--pin);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: 500 12px / 1.25 var(--font-sans);
  text-align: center;
  white-space: nowrap;
  box-shadow: var(--shadow-pin);
  cursor: pointer;
}

.map-grupo b {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.map-grupo span {
  color: var(--muted);
}

.map-grupo.best {
  border-color: var(--best);
}

.map-grupo.best b {
  color: var(--best-strong);
}

.map-grupo.worst {
  border-color: var(--worst);
}

.map-origin {
  position: absolute;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--origin);
  border: 3px solid var(--on-dark);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--origin) 35%, transparent);
  cursor: grab;
}

.map .route-line {
  stroke: var(--route);
}

/* Leaflet integrado al sistema: Inter, esquinas redondeadas, bordes de 1 px y colores de los tokens. */
.map .leaflet-bar {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-clip: border-box;
}

.map .leaflet-bar a,
.map .leaflet-bar a:first-child,
.map .leaflet-bar a:last-child {
  border-radius: 0;
}

.map .leaflet-bar a {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  font: 600 20px / 30px var(--font-sans);
}

.map .leaflet-control-attribution {
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  color: var(--muted);
}

.map .leaflet-control-attribution a {
  color: var(--accent);
}

/* El anillo de foco no se sale del mapa (overflow: hidden). */
.map .leaflet-control-attribution a:focus-visible {
  outline-offset: -1px;
}

/* Ruta en auto (OSRM), dentro de la ficha. */
.route-panel {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.route-panel p {
  margin: var(--space-2) 0 0;
}

.route-head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}

.route-head p {
  margin: 0;
  min-width: 0;
}

/* «Cerrar» no se parte en dos líneas: no se encoge ni se corta. */
.route-head .btn {
  flex: none;
  white-space: nowrap;
}

.route-summary {
  font-size: var(--fs-xl);
}

.route-summary strong {
  color: var(--route);
}

.route-pasos {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
}

.route-pasos summary {
  cursor: pointer;
  color: var(--accent-strong);
  font-weight: 500;
}

.route-steps {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
  max-height: min(200px, 24svh);
  overflow-y: auto;
  font-size: var(--fs-sm);
}

.route-steps li {
  padding-left: var(--space-1);
}

.route-steps li .muted {
  margin-left: var(--space-2);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.route-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.route-actions .btn {
  min-height: var(--control-md);
  padding-inline: var(--space-3);
}

.route-note {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-top: var(--space-2);
}

.brand {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-strong);
}

/* Verde: el precio más bajo; rojo: el más alto (resultados de búsqueda y portada). Texto menor de 24 px: tono fuerte. */
.result-price.best,
.home-list-price strong.best {
  color: var(--best-strong);
}

.result-price.worst,
.home-list-price strong.worst {
  color: var(--worst-strong);
}
/* <<< PAQUETE COMBUSTIBLES */

/* >>> PAQUETE BUSQUEDA */
/* Medicamentos y supermercados: fichas de resumen por tienda y lista de resultados. */
.results {
  margin-bottom: var(--block-gap);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.results > * {
  margin: 0;
}

.results > .btn {
  justify-self: start;
}

/* Resultados: un solo marco con filetes entre filas, como las tablas. */
.result-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
  overflow: hidden;
  overflow: clip;
}

.result-item {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--space-4) var(--space-5);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
}

.result-item:first-child {
  border-top: 0;
}

/* El producto que recibe el foco tras «Mostrar los N productos»: el anillo va por dentro, porque toca a sus vecinos. */
.result-item:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.result-item-info {
  display: grid;
  gap: 3px;
  justify-items: start;
  min-width: 0;
}

.result-item-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Bajo el nombre: la tienda, la marca y la dosis, y «Sin stock». */
.result-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

/* Lo que no tiene stock sigue en su lugar por precio (regla del dueño), pero apagado: no se confunde con una oferta. */
.result-item.sin-stock .result-item-name {
  font-weight: 400;
  color: var(--muted);
}

.result-item.sin-stock .result-price {
  color: var(--muted);
}

/* La tienda o el rótulo de la fila es una etiqueta neutra con filete, no un relleno azul. */
.result-item .badge.official {
  background: transparent;
  color: var(--text-strong);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.result-item-price {
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
  flex-shrink: 0;
  font-size: var(--fs-sm);
}

.result-item-price .price-channels {
  justify-items: end;
}

.result-item-price .btn {
  margin-top: var(--space-2);
}

/* Precio por kilo o litro bajo el precio del envase (supermercados): en el color del texto, no apagado, porque es para comparar. */
.por-unidad {
  color: var(--text);
  font-size: var(--price-aux);
  font-weight: var(--fw-price-aux);
}

/* Bajo «Ver en aCuenta / Santa Isabel»: qué local elegir allá (la columna de precio no se encoge, así que tiene tope). */

.result-item-price .price-channels .result-price {
  font-size: var(--price-row);
  font-weight: var(--fw-price);
}

/* «Precio normal» (Cruz Verde no publica precio de local): apagado, no es un precio para comparar. */
.result-item-price .price-channels .result-price.normal {
  font-size: var(--price-aux);
  font-weight: var(--fw-price-aux);
  color: var(--muted);
}

.result-price {
  font-size: var(--price-card);
  font-weight: var(--fw-price);
  letter-spacing: var(--ls-figure);
  color: var(--text-strong);
}

.result-related {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  overflow: clip;
}

/* Dentro de la caja, la lista de «Otros resultados» lleva solo los filetes entre filas y uno arriba. */
.result-related .result-list {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}

/* Medicamentos: filtros con su rótulo (farmacia y presentación) y resultados agrupados por presentación.
   Cada presentación es un bloque: su título («Cápsulas · 5 productos · desde $2.800 en Dr. Simi»), la tabla con sus farmacias
   de menor a mayor precio, y plegada la lista de sus productos. Arriba, una frase con quién es más barato y los filtros. */
.veredicto {
  padding: var(--space-4) var(--space-5);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-strong);
  text-wrap: pretty;
}

.filtros-barra {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.filtro-rotulo {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--space-2);
}

.forma-grupo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

/* Entre presentaciones, más aire que entre las partes de los resultados. */
.results > .forma-grupo {
  margin-top: var(--space-4);
}

.forma-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.forma-resumen {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--muted);
}

/* «desde $1.800 en Dr. Simi»: la parte que responde a «¿dónde?», en el verde del más barato. */
.forma-desde {
  color: var(--best-strong);
  font-weight: 600;
}

/* Las farmacias de una presentación, de menor a mayor precio por internet. No pasa a fichas en el teléfono: son tres
   columnas (farmacia y precio por internet y en la farmacia) que caben desde 320 px. La ganadora lleva fondo verde suave
   y filete; la más cara, solo su cifra y su palabra en rojo (sin relleno: lo que se mira primero es lo más barato). */
.forma-precios {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  overflow: clip;
  font-variant-numeric: tabular-nums;
}

.forma-precios th,
.forma-precios td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.forma-precios tbody tr:last-child > * {
  border-bottom: 0;
}

.forma-precios thead th {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--table-head-text);
  background: var(--table-head-bg);
}

.forma-precios thead th:not(:first-child),
.forma-precios .precio-celda {
  text-align: right;
  white-space: nowrap;
}

/* Con sitio de sobra, las cifras no se alejan del nombre de su farmacia. */
@media (min-width: 48em) {
  .forma-precios thead th:not(:first-child) {
    width: 11rem;
  }
}

.forma-precios tbody th {
  font-weight: 400;
}

.forma-farmacia {
  display: block;
  font-weight: 600;
  color: var(--text-strong);
}

/* El producto que fija el precio: apagado, pero completo (el tamaño y la dosis dicen qué se está comparando). */
.forma-producto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Sin recortar el nombre: en el teléfono el tamaño del envase o la dosis suelen estar al final. */
.forma-producto a {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.forma-mas {
  white-space: nowrap;
}

.precio-valor {
  display: block;
  font-size: var(--price-row);
  font-weight: var(--fw-price);
  letter-spacing: var(--ls-figure);
  line-height: var(--lh-tight);
  color: var(--text-strong);
}

.precio-valor.best {
  color: var(--best-strong);
}

.precio-valor.worst {
  color: var(--worst-strong);
}

/* La palabra que acompaña al color: «Más barato» / «Más caro». */
.marca {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.marca.best {
  color: var(--best-strong);
}

.marca.worst {
  color: var(--worst-strong);
  font-weight: 500;
}

/* Sin precio de local (Cruz Verde): su precio normal, apagado, que no se compara; el texto puede partirse. */
.forma-precios .sin-precio {
  white-space: normal;
}

.forma-precios .sin-precio .precio-normal {
  display: block;
  font-size: var(--price-aux);
  font-weight: var(--fw-price-aux);
  color: var(--muted);
}

/* Solo se tiñe lo que gana: el nombre de la farmacia más barata por internet y las cifras que son las más bajas de su columna. */
.forma-precios .mejor {
  background: var(--best-soft);
}

.forma-precios th.mejor {
  box-shadow: inset var(--rule) 0 0 var(--best);
}

/* Supermercados: junto al precio por kilo, litro o unidad, el precio del envase que lo fija, con su tamaño. */
.forma-precios .envase {
  color: var(--muted);
}

.envase-precio {
  display: block;
  font-size: var(--price-aux);
  font-weight: var(--fw-price-aux);
  color: var(--text);
}

/* El tamaño del envase puede partirse (a 360 px la tabla se salía 4 px de su caja). */
.envase-tamano {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Qué incluye la presentación («Kilos: 1 kg o más…»), pegada a su título. */
.forma-nota {
  margin: calc(-1 * var(--space-2)) 0 0;
}

/* La rebaja para socios (Club Unimarc) que el sitio de la cadena destaca: aparte del precio comparado. */
.forma-socios {
  display: block;
  margin-top: 2px;
}

.forma-faltan {
  margin: 0;
}

/* La lista de productos de una presentación va plegada (la tabla ya responde): se abre al elegir esa presentación. */
.forma-productos > summary {
  min-height: var(--control-lg);
}

.result-related-nota {
  margin: 0;
  padding: var(--space-3) var(--space-5);
}

/* «Mostrar los N productos» dentro de la caja: con aire alrededor, para que su anillo de foco no se recorte. */
.result-related > .btn {
  margin: var(--space-3) var(--space-5) var(--space-5);
}

/* «¿Tiene más de un medicamento?»: al final de los resultados, antes de «Mi receta». */
.agregar-lista {
  margin: 0;
}

.agregar-lista .btn {
  margin-top: var(--space-1);
}

/* Historial de precio de un producto (historial.js): el botón y, al abrirlo, el gráfico en escalones y el resumen. */
.historial-caja {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  text-align: left;
}

.historial {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius-sm);
  color: var(--text);
}

.historial > * {
  margin: 0;
}

.historial > * + * {
  margin-top: var(--space-2);
}

.historial-titulo {
  font-weight: 600;
}

.historial-grafico {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  color: var(--accent);
}

.historial-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--space-2) var(--space-4);
}

.historial-resumen dt {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.historial-resumen dd {
  margin: 0;
  font-size: var(--price-aux);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- Resultados de la búsqueda (2026-10-30): un título con «Cambiar», una línea de fecha, el veredicto con el ahorro en cifras, los
   filtros en dos filas y un bloque por tipo con sus cadenas de menor a menor precio. Los bloques de más (con tres o más tipos) van
   plegados en una línea. ---- */
.resultados-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
}

.resultados-cabeza > h2 {
  margin: 0;
}

.cambiar-busqueda {
  flex: none;
}

.nota-resultados {
  margin: 0;
}

/* «Cómo comparamos»: una caja de una línea (el texto largo va dentro, plegado). */
.como-comparamos > summary {
  min-height: var(--control-lg);
  padding-block: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.plegable-texto {
  margin: 0;
  padding: 0 var(--space-5) var(--space-4);
  max-width: var(--measure-sm);
}

/* El veredicto: una frase que empieza por cuánto se ahorra. */
.veredicto {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}

/* Filtros: las dosis (si hay), el tipo en un carril de chips y la farmacia en un select. */
.filtros-barra {
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.filtro {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.filtro-rotulo {
  margin: 0;
}

.filtro-tienda {
  grid-template-columns: auto minmax(0, 22rem);
  justify-content: start;
  align-items: center;
  gap: var(--space-3);
}

/* El rótulo («Tipo», «¿Qué dosis?») va dentro de la fila de chips, antes del primero. */
.filtro-tipo .filtro-rotulo,
.filtro-dosis .filtro-rotulo,
.filtro-canal .filtro-rotulo {
  align-self: center;
  margin-right: var(--space-1);
  white-space: nowrap;
}

.filtro-tienda select {
  min-height: var(--control-md);
  width: 100%;
}

/* Chips que llevan a otra búsqueda («¿Qué dosis?», «¿Quiso decir…?»). */
.chips-enlace {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.estado .chips-enlace {
  margin-top: var(--space-1);
}

/* Historial de precio: las fechas de los extremos del gráfico y la frase sobre el precio de hoy. */
.historial-fechas {
  display: flex;
  justify-content: space-between;
  max-width: 360px;
}

.historial-nota {
  font-weight: 600;
}

.estado-texto {
  color: var(--text);
  font-size: var(--fs-md);
}

/* Ejemplos bajo el buscador («Pruebe con: arroz 1 kg …»): enlaces tocables de 40 px. */
.search-ejemplos {
  margin-top: var(--space-3);
}

.search-ejemplos .chip-link {
  min-height: var(--control-md);
  font-weight: 500;
}

/* El título de cada bloque. */
.forma-grupo > * {
  margin: 0;
}

/* Lo que fija el precio, en cada fila. */
.precio-linea {
  display: block;
}

.precio-unidad {
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.precio-nota {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 var(--space-2);
  font-size: var(--fs-sm);
}

.precio-nota:empty {
  display: none;
}

.precio-nota .marca {
  display: inline;
}

/* «Precio por confirmar»: cuesta mucho menos que en las demás cadenas; no se pinta ni se cuenta. */
.marca.aviso {
  color: var(--warn);
  font-weight: 600;
  white-space: normal;
}

.forma-comunas {
  display: block;
}

/* Solo en el teléfono (ver 15b): la caja, el precio en el local y la nota en una línea bajo el producto. */
.fila-pie {
  display: none;
}

/* Lo que cuesta cada comprimido, mL, kilo o litro, bajo el nombre del producto. */
.forma-unidad {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}

.forma-insignia {
  min-height: 0;
  padding: 0 var(--space-2);
  font-size: var(--fs-sm);
}

/* «Internet: $480» bajo el precio de la farmacia cuando se compara en el local. */
.precio-otro {
  display: block;
  font-size: var(--fs-sm);
}

.sin-informar {
  white-space: nowrap;
}

/* Un tipo plegado: una línea con su nombre y su «desde». */
.forma-plegada {
  margin-top: 0;
}

.forma-plegable > summary {
  min-height: var(--control-lg);
  padding-block: var(--space-2);
  font-size: var(--fs-md);
}

.forma-plegado-texto {
  min-width: 0;
}

.forma-titulo-plegado {
  font-weight: 600;
}

.forma-plegable .forma-resumen {
  display: inline;
  font-size: var(--fs-sm);
}

.plegable-cuerpo {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.forma-plegable > .plegable-cuerpo {
  padding: 0 var(--space-4) var(--space-4);
}

.plegable-lista > .btn {
  margin: var(--space-3) var(--space-5) var(--space-5);
}

/* Con tres o más tipos, el título de cada uno plegado y el de los abiertos no se pegan a lo anterior. */
.results > .forma-grupo {
  margin-top: var(--space-2);
}

/* La tabla no pasa de 56 rem (896 px): con sitio de sobra, el nombre de la farmacia y su precio quedaban a 500 px uno del otro. */
@media (min-width: 64em) {
  .forma-grupo > .tabla-scroll {
    max-width: 56rem;
  }
}

/* «¿Tiene más de un medicamento?»: una caja baja, con el botón a la vista. */
.agregar-lista {
  padding: var(--space-3) var(--space-4);
}

.agregar-lista > * + * {
  margin-top: var(--space-2);
}

/* ---- La lista de referencia (los más vendidos y la canasta básica): matriz con una columna por cadena en el computador, una
   ficha por producto en el teléfono. La hoja muestra la que corresponde (el corte es el mismo que pasa las tablas a fichas). ---- */
.vista-fichas {
  display: none;
}

@media (max-width: 63.99em) {
  .vista-tabla {
    display: none;
  }

  .vista-fichas {
    display: block;
  }
}

.vendidos,
.canasta-fichas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.vendido {
  display: grid;
  min-width: 0;
  padding: calc(var(--space-1) + 2px) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
}

.vendido-cabeza,
.canasta-nombre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
}

/* Una ficha de la canasta en tres líneas: el nombre, el más barato y, en la misma línea que el más caro, «Ver las N tiendas». */
.canasta-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-3);
  min-width: 0;
  padding: calc(var(--space-1) + 2px) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
}

.canasta-nombre,
.canasta-aviso,
.canasta-item.con-peor > .canasta-linea:first-of-type {
  flex: 1 1 100%;
}

.canasta-linea {
  flex: 1 1 auto;
}

.canasta-detalle {
  flex: 0 0 auto;
  margin-left: auto;
}

.canasta-detalle[open] {
  flex-basis: 100%;
}

.vendido-nombre,
.canasta-titulo {
  font-weight: 600;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.vendido-nombre {
  padding-block: 11px;
  margin-block: -11px;
  text-decoration-color: var(--accent-border);
  text-underline-offset: 3px;
}

/* Las alturas de línea van como proporción de la letra (22 / 14, 20 / 14…): con una cifra en px, la letra grande del teléfono (150 a 200 %)
   montaba las líneas unas sobre otras. A tamaño normal miden lo mismo que antes. */
.vendido-mejor,
.canasta-linea {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: calc(22 / 14);
}

.canasta-linea {
  line-height: calc(20 / 14);
}

.canasta-nombre {
  line-height: calc(22 / 16);
}

.vendidos-leyenda {
  margin: 0 0 var(--space-3);
}

/* Lo que cuesta cada comprimido, mL o dosis del más barato: en su propia línea, bajo el precio. */
.vendido-unidad {
  display: block;
  font-size: var(--fs-sm);
  line-height: calc(20 / 14);
}

.vendido-precio,
.canasta-precio {
  font-weight: 700;
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

.vendido-precio.best,
.canasta-precio.best {
  color: var(--best-strong);
}

.vendido-precio.worst,
.canasta-precio.worst {
  color: var(--worst-strong);
}

/* Las otras farmacias, de menor a mayor precio (el orden lo da --orden, fijado desde el JS). */
.vendido-otras {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 2px 0 0;
  padding: 2px 0 0;
  border-top: 1px solid var(--border);
}

.vendido-fila {
  order: var(--orden, 0);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  min-height: 20px;
  font-size: var(--fs-sm);
  line-height: calc(20 / 14);
}

.vendido-tienda {
  flex: 0 0 4.9rem;
  white-space: nowrap;
  color: var(--text);
}

.vendido-fila .vendido-precio {
  flex: 0 0 3.4rem;
  font-size: var(--fs-sm);
}

/* «+$109,1 por comprimido» no cabe en una línea con la letra al 200 % en 320-360 px: parte el texto en vez de ensanchar la página. */
.vendido-fila .diff {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.vendido-mejor .vendido-precio {
  font-size: var(--fs-md);
}

.vendido-local {
  margin-left: auto;
  font-size: var(--fs-sm);
}

.ver-mas-lista {
  margin-top: var(--space-4);
}

/* Las notas de cada local, plegadas: dentro de la caja llevan el mismo relleno que el resumen. */
.notas-locales {
  margin-top: var(--space-4);
}

.notas-locales > summary {
  min-height: var(--control-lg);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.notas-locales .store-notes {
  margin: 0;
  padding: 0 var(--space-5) var(--space-4);
}

/* La canasta: el total con lo del mismo tamaño en todas las cadenas, y una ficha por producto. */
.canasta-total {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
}

.canasta-total-titulo {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-md);
  font-weight: 600;
}

.canasta-total-lista {
  list-style: none;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
}

/* La fila se parte sola cuando no cabe: primero baja la nota, y si ni así cabe, la cifra. Con una grilla de columnas «auto» y la nota sin partir
   (como estaba), la letra grande del teléfono (150 a 200 %) montaba el precio sobre el nombre y empujaba la nota fuera de la pantalla (hallazgo
   ACC-01, 2026-10-30): un media query en em no ve ese tipo de aumento, así que el diseño no puede depender de él. */
.canasta-total-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

.canasta-total-tienda {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.canasta-total-precio {
  flex: 0 0 auto;
}

.canasta-total-nota {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  min-width: 0;
}

/* Con «Ambos» hay siete cadenas, con nombres largos («Santa Isabel Alto Hospicio»): la nota baja bajo la cifra. */
.canasta-total-lista:has(> li:nth-child(5)) .canasta-total-nota {
  flex-basis: 100%;
}

.canasta-total-nota:empty {
  display: none;
}

/* La advertencia de precios atrasados, junto a la fecha de actualización. */
.nota-resultados .atraso {
  color: var(--text);
  font-weight: 600;
}

/* Los productos de la canasta con tamaños distintos, juntos en un plegable bajo las fichas con precio. */
.canasta-sin-comparar {
  margin-top: var(--space-4);
}

/* Mientras llegan los resultados de una búsqueda, el panel ocupa la pantalla (ver comparador.js, «buscando»). */
.results.buscando {
  min-height: 100vh;
  min-height: 100svh;
}

.canasta-total-fila.is-best {
  background: var(--best-soft);
  box-shadow: inset var(--rule) 0 0 var(--best);
}

.canasta-total-tienda {
  font-weight: 600;
  color: var(--text-strong);
}

.canasta-total-precio {
  font-size: var(--price-row);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

.canasta-total-precio.best {
  color: var(--best-strong);
}

.canasta-total-precio.worst {
  color: var(--worst-strong);
}

.canasta-ahorro {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.canasta-total .muted {
  margin: var(--space-1) 0 0;
}

.canasta-aviso {
  margin: 0;
  color: var(--text);
  font-weight: 500;
}

/* La ficha mide lo mismo cerrada (22 px de texto), pero el área que se toca es de 44 px: el margen negativo la devuelve al flujo. */
.canasta-detalle > summary {
  min-height: 44px;
  margin-block: -11px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent);
}

.canasta-detalle[open] > summary {
  margin-bottom: 0;
}

.canasta-tiendas {
  list-style: none;
  display: grid;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  padding: var(--space-2) 0 0;
  border-top: 1px solid var(--border);
}

.canasta-tiendas > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-3);
  font-size: var(--fs-sm);
}

.canasta-tienda {
  font-weight: 600;
}

.canasta-detalle-precio {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.canasta-producto {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
}
/* <<< PAQUETE BUSQUEDA */

/* >>> PAQUETE COPAGOS */
/* Copagos (2026-10-30): centros agrupados por precio, resultados en filas, aranceles plegados y «Mis exámenes» con la respuesta
   a la vista. Clases nuevas con prefijo cp-. Lo responsive va en la 15b. El verde y el rojo solo marcan un extremo que
   comparte una minoría de las filas (public/copagos.js, `marcas`). */
.table-title {
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: var(--space-6) 0 var(--space-3);
}

.table-title:first-child {
  margin-top: 0;
}

/* Aranceles por nivel: primera columna más ancha para que los nombres no se partan. */
.copagos-table:not(.centros-table, .estaciones-table) thead th:first-child {
  width: 20rem;
}

.nivel {
  display: inline-block;
  padding: 2px var(--space-3);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.codigo {
  white-space: nowrap;
}

.copagos-controls {
  margin: 0 0 var(--space-4);
}

.copagos-controls select {
  width: min(100%, 32rem);
}

.copagos-controls .controls-row {
  justify-content: flex-start;
}

/* Ejemplos del buscador: «Pruebe con» y cuatro enlaces en píldora de 44 px. */
#copagos-ejemplos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Tres pasos y un ejemplo leído del arancel: qué es el valor, lo que paga Fonasa y el nivel. */
.cp-pasos {
  margin: 0 0 var(--section-gap);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
}

.cp-pasos-titulo {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.cp-pasos-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.cp-pasos-lista li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.cp-paso-num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--action-contrast);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
}

.cp-ejemplo {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.cp-ejemplo:empty {
  display: none;
}

/* Resultados de la búsqueda: el panel al que baja la página al buscar. */
.cp-resultados-panel {
  margin: 0 0 var(--section-gap);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  scroll-margin-top: var(--space-4);
}

.cp-resultados-panel > * {
  margin: 0;
}

.cp-resultados-panel > h2:focus {
  outline: none;
}

.cp-resultados-panel > .table-title {
  margin-top: var(--space-3);
}

.cp-filtro {
  margin: 0;
}

/* Con la letra agrandada, «Consultas médicas (39)» baja de línea en vez de salirse del ancho (el chip común no parte el texto). */
.cp-filtro .chip {
  min-width: 0;
  max-width: 100%;
}

.cp-filtro .chip span {
  white-space: normal;
  text-align: center;
}

/* Una línea con lo que vale para toda la comuna (en Alto Hospicio, todos los centros son de nivel 3). */
.cp-franja {
  padding: var(--space-3) var(--space-4);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  box-shadow: inset var(--rule) 0 0 var(--accent);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.cp-resultados {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
  overflow: hidden;
  overflow: clip;
}

.cp-resultado + .cp-resultado {
  border-top: 1px solid var(--border);
}

/* El resultado es un solo botón que abre su detalle: nombre y código a la izquierda, el precio de la comuna a la derecha. */
.cp-resultado-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  width: 100%;
  min-height: 68px;
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

.cp-resultado-fila:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.cp-resultado-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cp-resultado-nombre {
  font-weight: 600;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.cp-resultado-info small {
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.cp-resultado-precio {
  display: grid;
  justify-items: end;
  gap: 1px;
  text-align: right;
}

.cp-resultado-precio strong {
  font-size: var(--price-row);
  font-weight: var(--fw-price);
  letter-spacing: var(--ls-figure);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
  color: var(--text-strong);
  white-space: nowrap;
}

.cp-resultado-precio strong.cp-sin-centros {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--muted);
}

/* «Ver dónde» con su chevrón: el chevrón gira cuando el detalle está abierto. */
.cp-ver {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.cp-ver::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-bottom: 3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}

.cp-resultado-fila[aria-expanded='true'] .cp-ver::after {
  margin-bottom: 0;
  margin-top: 4px;
  transform: rotate(-135deg);
}

.cp-resultado-detalle {
  padding: var(--space-4);
  border-top: 1px solid var(--border);
}

.cp-resultado-detalle > .btn {
  margin-top: var(--space-4);
}

/* Lo que paga el visitante, en una frase; debajo, el arancel de Fonasa por nivel en gris. */
.cp-resumen {
  margin: 0 0 var(--space-1);
  font-weight: 600;
  line-height: var(--lh-snug);
  max-width: var(--measure);
}

.cp-arancel-linea {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  max-width: var(--measure-sm);
}

.cp-igual {
  margin: 0 0 var(--space-3);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.cp-aviso {
  margin-bottom: var(--space-4);
}

/* Grupo de precio: el precio (24 px), el nivel y cuántos centros lo cobran; debajo, las filas. El verde o el rojo, solo si es minoría. */
.cp-grupo {
  margin: var(--space-3) 0 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  overflow: clip;
}

/* El filete de color recorre todo el grupo (el encabezado también), como la celda más barata o más cara de las tablas. */
.cp-grupo.is-best {
  border-left: var(--rule) solid var(--best);
}

.cp-grupo.is-worst {
  border-left: var(--rule) solid var(--worst);
}

.cp-grupo-cab {
  padding: var(--space-3) var(--space-4);
  background: var(--table-head-bg);
  border-bottom: 1px solid var(--border);
}

.cp-grupo-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-tight);
}

.cp-grupo-precio {
  font-size: var(--price-card);
  font-weight: var(--fw-price);
  letter-spacing: var(--ls-figure);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

.cp-grupo-meta {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
}

.cp-grupo.is-best .cp-grupo-precio {
  color: var(--best-strong);
}

.cp-grupo.is-worst .cp-grupo-precio {
  color: var(--worst-strong);
}

.cp-grupo-titulo .badge {
  align-self: center;
}

.cp-grupo-desglose {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Profesionales: una consulta (título) con uno o varios grupos de precio debajo. */
.cp-consulta {
  margin: var(--space-4) 0 0;
}

.cp-consulta-titulo {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.cp-grupo-nota {
  margin: 0;
  padding: var(--space-3) var(--space-4) 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
}

.cp-fila-nombre .nivel {
  margin-left: var(--space-2);
  vertical-align: 1px;
  font-weight: 600;
}

.cp-filas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cp-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.cp-fila + .cp-fila {
  border-top: 1px solid var(--border);
}

/* Lugares que empatan al menor copago y solo salen en el papel (en pantalla están en «Todos los centros», plegado). */
.cp-fila.cp-fila-impresion {
  display: none;
}

@media print {
  .cp-fila.cp-fila-impresion {
    display: flex;
  }

  /* «y N más… están más abajo» y «Ver dónde» remiten a lo que el papel no trae. */
  .cp-solo-pantalla {
    display: none !important;
  }
}

.cp-fila-info {
  display: grid;
  gap: 2px;
  flex: 1 1 14rem;
  min-width: 0;
}

.cp-fila-nombre {
  font-weight: 600;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.cp-fila-info small {
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.cp-fila .btn {
  flex-shrink: 0;
}

.cp-fila-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Una marca con varias sedes: «5 sedes» y las direcciones plegadas, cada una con su «Cómo llegar». */
.cp-sedes {
  flex: 1 0 100%;
}

.cp-sedes > summary,
.cp-mas > summary,
.cp-como > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  cursor: pointer;
  list-style: none;
  color: var(--accent-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.cp-sedes > summary::-webkit-details-marker,
.cp-mas > summary::-webkit-details-marker,
.cp-como > summary::-webkit-details-marker,
.cp-detalle > summary::-webkit-details-marker {
  display: none;
}

.cp-sedes > summary::after,
.cp-mas > summary::after,
.cp-como > summary::after,
.cp-detalle > summary::after {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-bottom: 3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}

.cp-sedes[open] > summary::after,
.cp-mas[open] > summary::after,
.cp-como[open] > summary::after,
.cp-detalle[open] > summary::after {
  margin-bottom: 0;
  margin-top: 4px;
  transform: rotate(-135deg);
}

.cp-sedes > summary:focus-visible,
.cp-mas > summary:focus-visible,
.cp-como > summary:focus-visible,
.cp-detalle > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.cp-sedes ul {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.cp-sedes li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}

.cp-sedes li > span {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cp-sedes li small {
  display: block;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* «Ver los 23 restantes» dentro de un grupo: una franja con filete; fuera de los grupos, un botón de borde fino a todo el ancho. */
.cp-grupo > .cp-mas > summary {
  padding: 0 var(--space-4);
  border-top: 1px solid var(--border);
  min-height: var(--control-md);
}

.cp-resultados-panel > .cp-mas > summary {
  justify-content: center;
  min-height: var(--control-md);
  background: var(--surface);
  border: 1px solid var(--tertiary-border);
  border-radius: var(--radius);
}

.cp-mas > .cp-resultados,
.cp-mas > .cp-filas {
  margin-top: 0;
}

.cp-resultados-panel > .cp-mas[open] > .cp-resultados {
  margin-top: var(--space-3);
}

.cp-como {
  margin: 0 0 var(--space-4);
}

.cp-como p {
  margin: var(--space-2) 0 0;
  max-width: var(--measure-sm);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Aranceles: un grupo plegado por tipo de prestación (usa el acordeón .faq); su título lleva debajo cuántas y desde cuánto. */
.cp-arancel-grupo > summary {
  align-items: center;
}

.cp-arancel-texto {
  display: grid;
  gap: 2px;
}

.cp-arancel-titulo {
  font-weight: 600;
}

.cp-arancel-meta {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--muted);
}

.cp-arancel-cuerpo {
  padding: 0 var(--space-4) var(--space-4);
}

.cp-arancel-cuerpo .top-table {
  border-radius: var(--radius-sm);
}

/* Valores de un arancel único: una sola celda para los tres niveles. */
.cp-unico {
  text-align: left;
}

/* Mis exámenes: la ayuda de una línea, el resumen sobre la lista y los exámenes en filas compactas. */
.cp-ayuda {
  margin: 0 0 var(--space-4);
}

.cp-ayuda .help {
  margin-bottom: var(--space-1);
}

.cp-resumen-lista {
  margin: 0 0 var(--space-3);
  font-weight: 600;
}

#mis-examenes .mi-lista-items {
  margin-bottom: var(--space-4);
}

#mis-examenes .mi-lista-item {
  flex-wrap: nowrap;
  gap: var(--space-3);
}

#mis-examenes .mi-lista-nombre {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

#mis-examenes .mi-lista-acciones {
  margin-bottom: var(--space-4);
}

#mis-examenes .mi-lista-traslado .help {
  margin: var(--space-1) 0 0;
  max-width: 30rem;
}

/* La respuesta: «Agregado: …» arriba, la recomendación debajo; la página baja hasta aquí con 16 px de aire. */
#mis-examenes-resultado .recomendaciones {
  scroll-margin-top: var(--space-4);
}

.cp-agregado {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  box-shadow: inset var(--rule) 0 0 var(--accent);
  font-weight: 600;
  line-height: var(--lh-snug);
}

/* Los lugares de la recomendación: hasta tres, con su dirección y «Cómo llegar». */
.cp-lugares {
  margin: var(--space-3) 0 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  overflow: clip;
}

.cp-lugares .cp-fila {
  padding: var(--space-3);
}

/* Lo que se puede abrir bajo la recomendación: todos los centros y el copago por nivel. */
.cp-detalle {
  margin: var(--space-4) 0 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  overflow: clip;
}

.cp-detalle > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text-strong);
}

.cp-detalle-cuerpo {
  padding: 0 var(--space-4) var(--space-4);
}

.cp-detalle-cuerpo > :first-child {
  margin-top: 0;
}

/* Consulta de especialista: los profesionales en convenio primero (sin el aire de más arriba del primer bloque). */
#cp-especialistas-lista > .cp-consulta:first-child {
  margin-top: 0;
}
/* <<< PAQUETE COPAGOS */

/* >>> PAQUETE LISTAS */
/* «Mi receta» / «Mi lista» y «Mis exámenes»: formulario para agregar, la lista y las recomendaciones (fichas
   blancas con borde; la recomendada con filete verde, como la celda más barata de las tablas). */
.mi-lista-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem auto;
  align-items: end;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.mi-lista-form input {
  width: 100%;
}

/* «Mis exámenes» (de COPAGOS; va aquí porque sobrescribe a .mi-lista-form, que debe ir antes): un solo campo (códigos o nombre) y el botón. */
.mis-examenes-form {
  grid-template-columns: minmax(0, 1fr) auto;
}

.mi-lista-items {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  border-top: 1px solid var(--border);
}

.mi-lista-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

.mi-lista-nombre {
  flex: 1 1 14rem;
  font-weight: 600;
}

.mi-lista-nombre small {
  display: block;
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.mi-lista-cantidad {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.mi-lista-cantidad input {
  width: 5rem;
  min-height: var(--control-md);
}

.recomendaciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
}

.recomendacion {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
}

.recomendacion > * {
  margin: 0;
}

.recomendacion > * + * {
  margin-top: var(--space-2);
}

.recomendacion.is-best {
  box-shadow: inset 3px 0 0 var(--best);
}

.recomendacion.apagada {
  color: var(--muted);
}

.recomendacion-rotulo {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
}

.recomendacion-precio {
  font-size: var(--price-hero);
  font-weight: var(--fw-price);
  letter-spacing: var(--ls-figure);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.recomendacion.is-best .recomendacion-precio {
  color: var(--best);
}

.reparto {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  font-size: var(--fs-sm);
}

.reparto li + li {
  margin-top: var(--space-1);
}

/* Bajo la lista: lo que cuesta ir a otra tienda y compartir / WhatsApp / imprimir. */
.mi-lista-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
}

.mi-lista-traslado select {
  min-width: 11rem;
}

/* Mi receta: la presentación en que se compara cada medicamento, bajo su nombre (para elegir otra si hay varias). */
.forma-elegir {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--muted);
}

/* 16 px: con menos, el iPhone acerca la página al tocarlo. */
.forma-elegir select {
  width: 100%;
  min-height: var(--control-md);
  padding-block: 0;
  font-size: var(--fs-md);
}

/* Con el selector, la primera columna es más ancha: «Óvulos y cremas vaginales» cabe sin cortarse. */
.top-table:has(.forma-elegir) thead th:first-child {
  width: 18rem;
}

.mi-lista-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

/* Sugerencias (bioequivalentes, lista compartida, preparación de exámenes): ficha índigo clara, informativa. */
.sugerencia {
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-5);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
}

.sugerencia > * {
  margin: 0;
}

.sugerencia > * + * {
  margin-top: var(--space-2);
}

.sugerencia ul {
  padding-left: var(--space-5);
}

.sugerencia li + li {
  margin-top: var(--space-2);
}

/* El total cambió desde la última consulta en este navegador: bajó (verde) o subió (ámbar). */
.cambio-precio {
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  background: var(--surface);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius-sm);
}

.cambio-precio.bajo {
  box-shadow: inset var(--rule) 0 0 var(--best);
}

.cambio-precio.subio {
  box-shadow: inset var(--rule) 0 0 var(--warn-border);
}

/* Botón con aspecto de enlace («Elegir», «volver al más barato»). */
.btn-texto {
  min-height: 24px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.btn-texto:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.top-table td small.elegido {
  display: block;
  margin-top: var(--space-1);
}

/* Otras opciones de una tienda para un producto de la lista. */
.opciones {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
}

.opciones > summary {
  cursor: pointer;
  min-height: 24px;
  color: var(--accent);
}

.opciones ul {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

/* El nombre ocupa el espacio libre; en una celda angosta el precio y «Elegir» bajan a la línea de abajo en vez de salirse. */
.opciones li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}

.opciones li > :first-child {
  flex: 1 1 8rem;
  min-width: 0;
}

.opcion-precio {
  font-size: var(--price-aux);
  font-weight: var(--fw-price-aux);
  white-space: nowrap;
}

/* Solo en el papel: de dónde salió la lista impresa y cuándo. */
.solo-impresion {
  display: none;
}

/* «Enviar por WhatsApp», bajo la recomendación: grande, verde y con ícono; a todo el ancho en el teléfono. */
.compartir-whatsapp {
  margin: 0 0 var(--space-6);
}

.btn.whatsapp {
  justify-content: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: 0 var(--space-6);
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: var(--on-whatsapp);
  font-size: var(--fs-lg);
  font-weight: 600;
}

.btn.whatsapp::after {
  content: none;
}

.btn.whatsapp svg {
  width: 24px;
  height: 24px;
  flex: none;
  fill: currentColor;
}

/* Formulario corto de «Mi receta» (portada y Medicamentos): lo que ya tiene y el enlace a su página. */
.lista-resumen .btn {
  margin-top: var(--space-2);
}

/* ---- Página propia de «Mi receta» y «Mi lista» (2026-10-30): la respuesta siempre a la vista ----
   En el teléfono, una sola columna: formulario, lista, respuesta y, abajo, el detalle por producto. Desde 64 em, a un lado se
   arma la lista y al otro queda la respuesta, pegada mientras se baja; el detalle ocupa todo el ancho. Lo que comparte clase
   con «Mis exámenes» (.mi-lista-item, .mi-lista-form, .mi-lista-acciones) se cambia solo dentro de .mi-lista-pagina. */
main.wrap > .mi-lista-pagina:first-child {
  margin-top: var(--space-5);
}

.mi-lista-ayuda {
  margin: 0 0 var(--space-2);
}

/* «Consejos»: lo que no hace falta para empezar (descartar una palabra, cuánto dura la lista). */
.consejos {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.consejos > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  cursor: pointer;
  list-style: none;
  color: var(--accent-strong);
  font-weight: 600;
}

.consejos > summary::-webkit-details-marker {
  display: none;
}

.consejos > summary::after {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-bottom: 3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}

.consejos[open] > summary::after {
  margin-bottom: 0;
  margin-top: 4px;
  transform: rotate(-135deg);
}

.consejos > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.consejos ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

.consejos li + li {
  margin-top: var(--space-1);
}

.mi-lista-pagina .mi-lista-form {
  margin: 0 0 var(--space-3);
  padding: var(--space-4);
  gap: var(--space-3);
}

/* «¿Qué tamaño?»: sin medida, cada tienda puede mostrar un producto distinto. Es un aviso, no bloquea. */
p.aviso-tamano,
p.aviso-comuna {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--warn-soft);
  border-radius: var(--radius-sm);
  box-shadow: inset var(--rule) 0 0 var(--warn-border);
  color: var(--warn);
  font-size: var(--fs-sm);
}

small.aviso-tamano {
  display: block;
  margin-top: var(--space-1);
  color: var(--warn);
  font-weight: 500;
}

.calculando {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Lo básico: productos con su tamaño, un toque para agregarlos (o quitarlos). Con la lista armada, en una fila. */
.basico {
  margin: 0 0 var(--space-4);
}

.basico-rotulo {
  margin: 0 0 var(--space-2);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.basico-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip-boton {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-md);
  padding: 0 var(--space-4);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-snug);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.chip-boton[aria-pressed='true'] {
  background: var(--inverse);
  border-color: var(--inverse);
  color: var(--inverse-text);
}

.chip-boton:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* La lista armada: su título («Su receta: 3 medicamentos») y «Vaciar», con su confirmación en el mismo lugar. */
.mi-lista-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 var(--space-2);
}

.mi-lista-resumen {
  margin: 0;
  font-weight: 600;
}

.mi-lista-confirmar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.mi-lista-pagina .mi-lista-items {
  margin: 0 0 var(--space-4);
}

.mi-lista-pagina .mi-lista-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-2) var(--space-3);
}

.mi-lista-pagina .mi-lista-items:empty {
  display: none;
}

.mi-lista-vacio {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
}

/* La respuesta: las tarjetas del mejor total y de repartir, WhatsApp y compartir. */
.mi-lista-respuesta {
  scroll-margin-top: var(--space-4);
}

.mi-lista-respuesta:focus-visible {
  outline: none;
}

.mi-lista-respuesta .recomendaciones {
  align-items: start;
  margin-bottom: var(--space-4);
}

/* Repartir, cuando no conviene: la cifra a tamaño de ficha, para que la tarjeta ganadora sea lo primero que se lee. */
.mi-lista-respuesta .recomendacion.apagada .recomendacion-precio {
  font-size: var(--price-card);
}

.mi-lista-respuesta .compartir-whatsapp {
  margin-bottom: var(--space-3);
}

.mi-lista-respuesta .mi-lista-acciones {
  margin: 0 0 var(--space-5);
  justify-content: flex-start;
}

.respuesta-vacia {
  display: none;
}

/* La tarjeta de «todo en una tienda» y lo que la acompaña (productos no encontrados y WhatsApp) van en una columna; la de repartir,
   al lado: así WhatsApp queda bajo la principal y no debajo de la más alta. Dentro de la tarjeta, el aviso va sin margen propio. */
.recomendaciones-principal {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  min-width: 0;
}

.recomendaciones-principal > * {
  margin: 0;
}

.recomendacion > p.aviso-tamano,
.recomendacion > p.aviso-comuna {
  margin: var(--space-2) 0 0;
}

/* WhatsApp ocupa el ancho de la columna (en el teléfono ya lo hacía) y su texto cabe en una línea. */
.mi-lista-respuesta .recomendaciones-principal .btn.whatsapp {
  width: 100%;
  padding-inline: var(--space-4);
}

/* Con una sola tarjeta la columna es ancha: el botón no se estira más allá de lo que un botón necesita. */
@media (min-width: 641px) {
  .mi-lista-respuesta .recomendaciones-principal .btn.whatsapp {
    max-width: 26rem;
  }
}

/* «Quitado: arroz 1 kg. [Deshacer]»: unos segundos tras quitar un producto; vacío no ocupa lugar. */
.quitado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

.quitado:empty {
  display: none;
}

/* Cada producto de la tabla, plegado en el teléfono: solo su tienda más barata y «Ver las otras N tiendas» (ver el bloque de fichas). */
.plegador {
  display: none;
}

.recomendacion-ahorro {
  color: var(--text);
}

.recomendacion-ahorro strong {
  color: var(--best-strong);
}

/* «Si ir a otra tienda le cuesta [$1.000]», dentro de la tarjeta de repartir. */
.traslado-campo {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.traslado-campo label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.traslado-campo select {
  min-width: 8rem;
}

.traslado-campo small {
  max-width: var(--measure-sm);
}

/* Un producto que ninguna tienda tiene: una sola tarjeta con la salida, en vez de una fila vacía por tienda. */
.no-encontrado {
  margin: 0 0 var(--space-4);
}

.no-encontrado .estado-accion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Las tiendas que no tienen todo van al final de la tabla y apagadas. */
.copagos-table th.incompleta,
.copagos-table td.incompleta {
  background: var(--canvas);
  color: var(--muted);
}

.copagos-table td.incompleta .top-price {
  color: var(--muted);
}

/* La barra fija de abajo (teléfono): cuántos productos y la mejor opción, con «Ver». Solo hasta 640 px (ver 15b). */
.barra-lista {
  display: none;
}

.barra-lista-texto {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.barra-lista-texto > :first-child {
  color: var(--muted);
}

.barra-lista-sep {
  display: none;
}

@media (min-width: 64em) {
  .mi-lista-pagina {
    display: grid;
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    column-gap: var(--space-7);
    align-items: start;
  }

  .mi-lista-armar {
    grid-column: 1;
    grid-row: 1;
  }

  /* La columna ocupa todo el alto de la fila y lo de adentro queda pegado mientras se baja: así no pasa sobre el detalle. */
  .mi-lista-respuesta {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
  }

  .mi-lista-fija {
    position: sticky;
    top: var(--space-4);
  }

  /* El formulario cabe en la columna angosta: el campo arriba y, debajo, las unidades y «Agregar». */
  .mi-lista-pagina .mi-lista-form {
    grid-template-columns: minmax(0, 1fr) 7rem;
  }

  .mi-lista-pagina .mi-lista-form .btn {
    grid-column: 1 / -1;
  }

  .mi-lista-pagina > [id$='-resultado'] {
    grid-column: 1 / -1;
    margin-top: var(--space-5);
  }

  .respuesta-vacia {
    display: block;
    padding: var(--space-5);
    border: 1px dashed var(--input-border);
    border-radius: var(--radius);
    color: var(--muted);
  }

  .respuesta-vacia p {
    margin: 0;
    max-width: var(--measure-narrow);
  }
}

/* Computador ancho (desde 75 em = 1200 px: la columna de la respuesta mide 664 px o más y caben las dos tarjetas lado a lado): la
   principal, WhatsApp y los botones de compartir van en la columna izquierda y la de repartir, al lado, en toda su altura; así
   WhatsApp queda bajo la tarjeta principal y no abajo de la más alta. Sin :has() queda la columna apilada de siempre. */
@media (min-width: 75em) {
  .mi-lista-fija:has(.recomendaciones > .recomendacion) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--space-4);
    align-items: start;
  }

  .mi-lista-fija:has(.recomendaciones > .recomendacion) > [id$='-tarjetas'],
  .mi-lista-fija:has(.recomendaciones > .recomendacion) .recomendaciones {
    display: contents;
  }

  .mi-lista-fija:has(.recomendaciones > .recomendacion) .recomendaciones-principal {
    grid-column: 1;
    grid-row: 1;
  }

  .mi-lista-fija:has(.recomendaciones > .recomendacion) .recomendaciones > .recomendacion {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .mi-lista-fija:has(.recomendaciones > .recomendacion) .mi-lista-acciones {
    grid-column: 1;
    grid-row: 2;
    margin: var(--space-4) 0 var(--space-5);
  }
}

/* Impresión de «Mi receta» / «Mi lista»: la respuesta y la tabla, sin formulario, chips, consejos ni botones. */
@media print {
  .mi-lista-pagina {
    display: block;
  }

  .mi-lista-armar > :not(.mi-lista-cabeza),
  .mi-lista-cabeza button,
  .mi-lista-confirmar,
  .mi-lista-respuesta .respuesta-vacia,
  .no-encontrado .estado-accion,
  .traslado-campo,
  .barra-lista,
  .calculando {
    display: none !important;
  }

  .mi-lista-fija {
    position: static;
  }
}

/* Un aviso de error o de reintento bajo las tarjetas de la respuesta no queda pegado a los botones de compartir. */
.mi-lista-respuesta .estado {
  margin-bottom: var(--space-4);
}

/* Tabla de «Mi receta» / «Mi lista» en fichas (menos de 64 em): cada producto parte plegado, con su tienda más barata a la vista.
   Solo en pantalla: al imprimir se ven todas las tiendas. */
@media screen and (max-width: 63.9375em) {
  .top-table tr.plegada > td:not(.td-resumen) {
    display: none;
  }

  .top-table tr.plegada > td.td-resumen {
    border-bottom: 0;
  }

  .top-table .plegador {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: var(--space-1);
    font-size: var(--fs-sm);
    font-weight: 500;
  }
}
/* <<< PAQUETE LISTAS */

/* ---- 15 · Responsive ----
   Puntos de corte por contenido, no por dispositivo (no admiten var(); cada uno sale de una
   medida real y hay que volver a medir si cambia el menú o el texto de la marca):
     75,9 em  (1215 px con letra de 16 px) marca + lema + menú ya no caben en una fila → se oculta el lema (el menú de cinco
              enlaces mide 615 px y la marca con su lema 479: con los márgenes de 32 px y la barra de desplazamiento caben desde
              1200 px; sin lema la barra mide 64 px desde 1024 px)
     1168 px  las cuatro cifras del resumen caben en una fila
     64 em    (1024 px con letra de 16 px) las tablas de precios pasan de tabla a fichas; en em para que
              una letra más grande también pase a fichas en vez de apretar las columnas
     940 px   marca + menú ya no caben → el menú baja a una segunda fila; el pie, a 2 columnas (con Inter
              miden 845 px con los márgenes, 2026-10-26)
     900 px   tres columnas en pasos, franja de transparencia y fuentes
     640 px   teléfono: el menú es la barra de navegación inferior fija (ícono y nombre corto), la cabecera queda con la
              marca sola y el hero se compacta (más (pointer: coarse) para los objetivos táctiles)

   Etiquetas: la regla propia de una página lleva antes un comentario con el nombre de su paquete (portada,
   combustibles, busqueda, listas o copagos; si la usan dos páginas, los dos nombres). Para cambiarla, entre su paquete en
   «15b · Ajustes responsive por paquete». Las reglas sin etiqueta son del sistema: cabecera, menú, hero, tablas
   generales, controles y pie. */

/* Portada: las tarjetas de acceso, dos por fila desde que deja de ser teléfono. */
@media (min-width: 641px) {
  /* [portada] */
  .accesos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}



@media (min-width: 64em) {
  /* La cabecera de la tabla acompaña al desplazarse por las filas. */
  .top-table thead th {
    position: sticky;
    top: 0;
    z-index: var(--z-raised);
  }

  /* El texto de la primera columna arranca alineado con el del buscador de arriba. */
  .top-table th:first-child {
    padding-left: var(--space-5);
  }

  /* Al saltar con Shift+Tab el foco no queda tapado por la cabecera pegajosa. */
  .top-table a,
  .top-table .btn {
    scroll-margin-top: 6rem;
  }


}

/* Tablas muy anchas justo tras el punto de corte: con «Ambos» medicamentos tiene 5 farmacias (hasta
   73,9375 em = 1183 px con letra de 16 px) y supermercados 7 tiendas (hasta 68,6875 em = 1099 px).
   Se estrechan la primera columna y el relleno lateral para que los precios no se corten ni pisen
   la celda vecina. Los topes van en em para que sigan valiendo con la letra agrandada. */
@media (min-width: 64em) and (max-width: 73.9375em) {
  /* [busqueda] */
  .top-table:has(.price-channels):has(thead th:nth-child(6)) thead th:first-child {
    width: 12rem;
  }

  /* [busqueda] */
  .top-table:has(.price-channels) :is(th, td):not(:first-child) {
    padding-inline: var(--space-3);
  }

  /* [busqueda] */
  .top-table:has(.price-channels) .price-channels {
    column-gap: var(--space-2);
  }

  /* [busqueda] Con cinco farmacias («Ambos») cada celda mide unos 130 px: el rótulo («Internet», «En farmacia») va sobre la
     cifra de 20 px, no a su lado. */
  .top-table:has(.price-channels):has(thead th:nth-child(6)) .price-channels {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  /* [busqueda] */
  .top-table:has(.price-channels):has(thead th:nth-child(6)) .price-channel dd {
    margin-bottom: var(--space-1);
  }
}

@media (min-width: 64em) and (max-width: 68.6875em) {
  /* [busqueda] */
  .top-table:has(thead th:nth-child(8)) thead th:first-child {
    width: 12rem;
  }

  /* [busqueda] */
  .top-table:has(thead th:nth-child(8)) :is(th, td):not(:first-child) {
    padding-inline: var(--space-3);
  }
}

@media (min-width: 1168px) {
  /* [portada] */
  .home-card-wide .home-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Escritorio (desde 1024 px con letra de 16 px): el hero en dos columnas. A la izquierda el título y la bajada, en una línea
   cada uno si caben; a la derecha el selector de comuna y la fecha de los datos. La portada (.hero-inicio) es solo el título. */
@media (min-width: 64em) {
  .hero-inner {
    padding-top: calc(var(--space-5) + var(--space-1));
    padding-bottom: var(--space-5);
  }

  .hero:not(.hero-inicio) .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-7);
    align-items: center;
  }

  .hero:not(.hero-inicio) .hero-inner > * {
    grid-column: 1;
  }

  .hero .lead {
    font-size: var(--fs-md);
    max-width: 70ch;
  }

  .hero:not(.hero-inicio) .hero-tools {
    grid-column: 2;
    grid-row: 1 / span 3;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
  }

  .hero:not(.hero-inicio) .hero-tools .comuna-field {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .hero:not(.hero-inicio) .hero-tools .updated {
    font-size: var(--fs-sm);
    max-width: 40ch;
  }

  /* Hero bajo en las páginas internas (borde inferior a 190 px o menos con una pantalla de 1366 px): menos aire arriba y abajo y
     sin el rótulo «Ver precios de» a la vista (el selector se explica solo, como en el teléfono; el rótulo lo siguen leyendo
     los lectores de pantalla). */
  .hero:not(.hero-inicio) .hero-inner {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .hero:not(.hero-inicio) .comuna-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* El lema de la marca se oculta cuando no cabe con el menú (en em, para que valga también con la letra agrandada). */
@media (max-width: 75.9375em) {
  .brand-tagline {
    display: none;
  }
}

@media not all and (min-width: 64em) {
  /* En pantallas angostas cada producto es una tarjeta, como las de resultados y estaciones: el
     nombre arriba y una fila por tienda, con el nombre a la izquierda y el precio a la derecha. */
  .top-table,
  .top-table tbody,
  .top-table tr {
    display: block;
  }

  .top-table {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .top-table thead {
    display: none;
  }

  .top-table tbody tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    overflow: clip;
    margin-bottom: var(--space-3);
  }

  /* El nombre del producto va en la franja gris azulada, como la cabecera de la tabla en escritorio. */
  .top-table tbody th {
    display: block;
    padding: var(--space-4);
    color: var(--table-head-text);
    background: var(--table-head-bg);
    border-bottom: 1px solid var(--border);
  }

  .top-table tbody th .top-name small,
  .top-table tbody th .forma-elegir {
    color: var(--table-head-muted);
  }

  .top-table tbody th .top-rank {
    color: var(--table-head-muted);
    box-shadow: inset 0 0 0 1px var(--border-strong);
  }

  .top-table td {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
  }

  /* La última ficha también separa sus tiendas: la regla de escritorio quita el filete de la última fila. */
  .top-table tbody tr:last-child > td {
    border-bottom: 1px solid var(--border);
  }

  .top-table tbody tr > td:last-child {
    border-bottom: 0;
  }

  /* Nombre de la farmacia o cadena a la izquierda; precios, insignias y detalle a la derecha. */
  .top-table td[data-label]::before {
    content: attr(data-label);
    grid-column: 1;
    grid-row: 1 / span 4;
    font-weight: 600;
    color: var(--text-strong);
  }

  .top-table td > * {
    grid-column: 2;
    justify-self: end;
    text-align: right;
  }

  .top-table .top-price {
    justify-content: flex-end;
  }



  /* El detalle bajo el precio ocupa todo el ancho de la ficha, como en copagos. */
  .top-table td > small {
    grid-column: 1 / -1;
  }

  /* [busqueda] [copagos] */
  /* Internet y en farmacia: rótulo y precio en la misma línea, alineados a la derecha. */
  .top-table .price-channels {
    grid-template-columns: auto auto;
    justify-content: end;
    justify-items: end;
    gap: 2px var(--space-3);
  }

  /* [busqueda] [listas] [copagos] */
  /* El total de la canasta se distingue de los productos con un borde más marcado. */
  .top-table tr.total-row {
    border-color: var(--border-strong);
  }

  /* [busqueda] [listas] [copagos] */
  .top-table tr.total-row > td {
    border-bottom: 1px solid var(--border);
  }

  /* [busqueda] [listas] [copagos] */
  .top-table tr.total-row > th,
  .top-table tr.total-row > td:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 940px) {
  /* El menú baja a una segunda fila alineada con la rejilla (−12 px + 12 px de relleno). */
  .site-nav {
    width: calc(100% + 24px);
    max-width: none;
    flex-wrap: wrap;
    overflow: visible;
    margin-left: -12px;
    border-top: 1px solid var(--header-border);
  }

  .site-nav a {
    min-height: 44px;
    padding: 0 var(--space-3);
  }

  /* La fila de la marca conserva los 64 px de la barra; el menú va debajo. */
  .site-brand {
    min-height: var(--header-h);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 641px) and (max-width: 940px) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Teléfonos (hasta 640 px). El menú es una barra de navegación fija abajo, como las de las aplicaciones: cinco destinos con
   ícono de 24 px y nombre corto de 12 px, la página actual en índigo con una barra de 3 px arriba. Se oculta mientras un campo
   de texto tiene el foco (common.js pone <html class="teclado-abierto"> con el teclado abierto) y no se imprime. El pie
   reserva su alto (--tabbar-h más el área segura del teléfono) y el foco no queda debajo de ella (scroll-padding).
   El nombre de las etiquetas tiene tope en vw: con letra del navegador agrandada, o en 320 px, los cinco siguen cabiendo. */
@media (max-width: 640px) {
  html {
    scroll-padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  }

  .site-footer {
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  }

  /* La cabecera queda solo con la marca (56 px, sin lema). */
  .topbar {
    min-height: 56px;
  }

  .site-brand {
    min-height: 56px;
    padding: 0;
  }

  .site-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-tabbar);
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    overflow: visible;
    background: var(--surface);
    border-top: 1px solid var(--header-border);
  }

  html.teclado-abierto .site-nav {
    display: none;
  }

  .site-nav a {
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 48px;
    min-height: var(--tabbar-h);
    padding: 0 2px;
    border-top: var(--rule) solid transparent;
    font-size: min(var(--fs-xs), 3.4vw);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
  }

  .site-nav a[aria-current='page'] {
    padding-top: 0;
    border-top-color: var(--header-current);
    border-bottom: 0;
    background: var(--accent-soft);
    color: var(--accent);
  }

  .site-nav a:active {
    background: var(--surface-2);
  }

  .site-nav a[aria-current='page']:active {
    background: var(--tertiary-active);
  }

  .site-nav .nav-icon {
    display: block;
  }

  .site-nav .nav-corto {
    display: inline;
  }

  /* El nombre completo sigue siendo el nombre accesible del enlace (no display: none). */
  .site-nav .nav-largo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* [listas] */
  .mi-lista-form {
    grid-template-columns: minmax(0, 1fr) 6rem;
  }

  /* [listas] */
  .mi-lista-form .btn {
    grid-column: 1 / -1;
  }

  /* Con la letra al 150-200 % el campo del medicamento quedaba en 74 px (solo se veía la «E» del ejemplo) y el rótulo «Medicamento»
     pisaba a «Cajas». En una fila que parte (flex) y en rem: el campo pide 8 rem y, si con la letra grande no caben junto a «Cajas»
     (6 rem), «Cajas» baja a su propia fila. A tamaño normal queda como antes (campo, cajas, y el botón debajo). */
  .mi-lista:not(.acceso) .mi-lista-form:not(.mis-examenes-form) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .mi-lista:not(.acceso) .mi-lista-form:not(.mis-examenes-form) .mi-lista-producto {
    flex: 1 1 8rem;
    min-width: 0;
  }

  .mi-lista:not(.acceso) .mi-lista-form:not(.mis-examenes-form) .mi-lista-unidades {
    flex: 0 0 6rem;
  }

  .mi-lista:not(.acceso) .mi-lista-form:not(.mis-examenes-form) .btn {
    flex: 1 1 100%;
  }

  /* [copagos] */
  .mis-examenes-form {
    grid-template-columns: minmax(0, 1fr);
  }

  /* [listas] */
  .mi-lista-acciones {
    flex-direction: column;
    align-items: stretch;
  }

  /* [listas] */
  .btn.whatsapp {
    width: 100%;
  }

  /* [listas] */
  /* El enlace a la página de la receta, a todo el ancho de su caja (el texto parte en dos líneas si hace falta). */
  .lista-resumen .btn {
    display: flex;
  }

  /* [listas] */
  .mi-lista-traslado select {
    width: 100%;
  }

  /* [listas] [copagos] */
  /* El nombre en su propia línea; debajo, la cantidad o el tipo de examen y «Quitar». */
  .mi-lista-nombre {
    flex-basis: 100%;
  }

  /* Hero compacto: sin antetítulo (ya está oculto en todas), título de 28 px, bajada de 16 px y el selector de comuna en
     una sola fila de 44 px, con su rótulo solo para lectores de pantalla. */
  .hero-inner {
    padding-top: var(--space-4);
    padding-bottom: var(--space-3);
  }

  .hero-inner:not(.compact) h1 {
    font-size: var(--fs-3xl);
    line-height: 1.15;
  }

  .hero .lead {
    font-size: var(--fs-md);
    margin-top: var(--space-2);
  }

  .hero-tools {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }

  /* La bajada y la fecha ocupan dos líneas como máximo: en el teléfono lo que importa es el buscador. */
  .hero-inner:not(.compact) .lead,
  .hero-inner:not(.compact) .updated {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  .hero .updated {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
  }

  .comuna-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* El selector de comuna ocupa el ancho de la pantalla, como un control segmentado; con letra grande las opciones bajan de fila. */
  .comuna-field,
  .comuna-switch {
    display: flex;
    width: 100%;
  }

  .comuna-switch {
    flex-wrap: wrap;
  }

  .comuna-option {
    flex: 1 1 auto;
  }

  .comuna-option span {
    justify-content: center;
    padding: 0 var(--space-3);
    white-space: normal;
    text-align: center;
  }

  /* Cada fila de chips llena el ancho. */
  .chips .chip {
    flex: 1 1 auto;
  }

  .chip span {
    display: flex;
    justify-content: center;
  }

  /* [busqueda] */
  /* Las presentaciones tienen nombres largos («Jarabes y suspensiones (4)»): con la letra agrandada, bajan de línea en vez
     de salirse del ancho. */
  .filtro .chip span {
    white-space: normal;
    text-align: center;
  }



  /* [busqueda] [copagos] */
  .result-item {
    flex-direction: column;
    align-items: stretch;
  }

  /* [busqueda] [copagos] */
  .result-item-price {
    justify-items: start;
    text-align: left;
  }

  /* [busqueda] [copagos] */
  .result-item-price .price-channel dt {
    justify-self: start;
  }

  /* [busqueda] [copagos] */
  /* Internet y en la farmacia lado a lado, con el rótulo sobre la cifra: la fila baja unos 35 px. */
  .result-item-price .price-channels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
  }

  /* [busqueda] [copagos] */
  .result-item-price .price-channel {
    display: grid;
    justify-items: start;
  }

  /* [busqueda] */
  .forma-precios th,
  .forma-precios td {
    padding-inline: var(--space-3);
  }

  /* [busqueda] */
  /* Los rótulos de las columnas parten en dos líneas: el nombre del producto gana ancho. */
  .forma-precios thead th:not(:first-child) {
    white-space: normal;
  }

  /* [copagos] [portada] */
  /* Un botón largo («Ver centros en Iquique y Alto Hospicio») baja a dos líneas en vez de ensanchar la lista. */
  .result-item .btn,
  .home-body > .btn {
    max-width: 100%;
    white-space: normal;
    text-align: left;
  }

  /* [busqueda] */

  /* [busqueda] */



  /* [combustibles] [copagos] */
  .controls-row,
  .search-panel + .controls .controls-row {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
  }

  /* [combustibles] [copagos] */
  .select-field select {
    width: 100%;
  }

  /* [portada] */
  .faq-item > p {
    padding-right: var(--space-4);
    max-width: none;
  }

  .info-section {
    margin-top: var(--space-9);
    padding-top: var(--space-7);
  }

  /* [portada] */
  .about {
    margin-top: var(--space-8);
    padding-top: 0;
  }

  /* [portada] */
  .home {
    gap: var(--space-4);
  }

  /* [portada] Las fichas del resumen en el teléfono van en un carrusel: sus reglas están en «15b · PAQUETE PORTADA». */

  /* [portada] */
  /* El texto del botón puede pasar a dos líneas dentro de la ficha. */
  .home-card > .btn {
    white-space: normal;
    gap: var(--space-4);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  /* [portada] */
  .home-card-title {
    font-size: var(--fs-xl);
  }

  /* El pie del teléfono medía 1.040-1.190 px (más de una pantalla) y repetía el menú que ya está en la barra inferior: sin la
     columna «Secciones», y «Fuentes» y «Más información» lado a lado bajo la marca. Dos columnas, o una cuando la letra grande
     no deja ancho: cada columna pide como mínimo 7 rem (crece con la letra) o, si es más, la mitad menos medio hueco (así nunca
     caben tres). No depende de una media query en em: la letra agrandada desde el sistema (Android) no la mueve, y con la letra
     al 200 % en 320 px «información» (28 px) pasaba 14 px por la derecha y la página se ensanchaba. */
  .footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(max(7rem, calc(50% - var(--space-5) / 2 - 0.5px)), 1fr));
    gap: var(--space-5);
    padding-top: var(--space-6);
  }

  .site-footer nav[aria-label='Secciones del sitio'] {
    display: none;
  }
}

/* Objetivos táctiles de 44 px cuando hay dedo (--control-md vale 44 px aquí, ver los tokens): chips, opciones de comuna y
   botones pequeños salen de él. Los botones con aspecto de enlace, los resúmenes y los enlaces de producto de tablas y listas
   suben a 44 px con relleno vertical y el mismo margen negativo, para no mover el diseño. */
@media (max-width: 640px), (pointer: coarse) {
  .btn.small {
    min-height: var(--control-md);
    padding: 0 var(--space-4);
  }

  .btn-texto,
  .historial-boton {
    min-height: 44px;
    margin-block: -10px;
  }

  .opciones > summary {
    padding-block: 10px;
    margin-block: -10px;
  }

  /* El área de cada opción de comuna cubre el relleno y el borde del selector: 44 px de alto. */
  .comuna-option {
    padding-block: 4px;
    margin-block: -4px;
  }

  .comuna-option input {
    inset: 0;
  }

  .forma-producto a,
  .result-item-name a,
  .result-item-price > a,
  .top-name a,
  .top-table td small a {
    padding-block: 13px;
    margin-block: -13px;
  }

  .top-price a {
    padding-block: 10px;
    margin-block: -10px;
  }

  /* [combustibles] */
  /* Los botones de zoom del mapa miden 44 × 44 px y los enlaces de su atribución, 25 px de alto. */
  .map .leaflet-bar a {
    width: 44px;
    height: 44px;
    line-height: 44px;
  }

  .map .leaflet-control-attribution a {
    padding-block: 5px;
  }
}

@media (pointer: coarse) {
  .search-help {
    line-height: 2.25;
  }

  .footer-col ul {
    gap: 0;
  }

  .footer-col li a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: var(--control-md);
  }

}

/* Pantallas muy angostas (320 px) o letra muy grande: la tabla de cada presentación aprieta el relleno y deja partir
   «Más barato» en dos líneas, para caber sin desplazamiento horizontal. En em, para que valga con la letra agrandada. */
@media (max-width: 22em) {
  /* [busqueda] */
  .forma-precios th,
  .forma-precios td {
    padding-inline: var(--space-2);
  }

  /* [busqueda] */
  .forma-precios .precio-celda {
    white-space: normal;
  }

  /* Insignias y chips largos («93 autoservicio», «Precio desactualizado») bajan de línea en vez de ensanchar la página. */
  .badge,
  .chip span,
  .chip-link {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* Letra del navegador muy agrandada en un teléfono (16 em = 384 px con letra de 24 px, 512 px con la de 32 px; con letra de 16 px
   no ocurre nunca): las cifras de las tablas pasan al tamaño del precio secundario y la tabla de cada presentación se
   desplaza dentro de su caja si aun así no cabe. */
@media (max-width: 16em) {
  /* [busqueda] */
  .forma-precios .precio-valor,
  .forma-precios .envase-precio {
    font-size: var(--price-aux);
  }

  /* [busqueda] Con letra tan grande ni la cabecera cabe: la tabla se desplaza dentro de su caja, no la página. */
  .forma-precios {
    display: block;
    overflow-x: auto;
  }
}

/* ---- 15b · Ajustes responsive por paquete ----
   Cada paquete de página agrega aquí sus reglas responsive nuevas, cada una dentro de su @media, entre los marcadores
   de su bloque. Va después de la 15 (a igual especificidad gana lo de aquí) y antes de la 16 (accesibilidad) y la 17
   (impresión). Las reglas responsive que ya existían de cada página siguen en la 15, con su etiqueta. */

/* >>> PAQUETE PORTADA */
/* Portada: ajustes por ancho. Los cortes salen del contenido: 449 px de tarjeta (el formulario pasa a una fila, en b14),
   641 px (deja de ser teléfono), 900 px (tres pasos en fila) y 1168 px (las cuatro tarjetas de acceso y las cuatro fichas). */

/* Desde que deja de ser teléfono: más aire en el buscador y las tarjetas, y las estaciones del resumen como tres fichas. */
@media (min-width: 641px) {
  .buscador-inicio {
    padding: var(--space-5);
    margin-bottom: var(--space-6);
  }

  .accesos {
    gap: var(--space-4);
    margin-bottom: var(--space-8);
  }

  .acceso {
    gap: var(--space-3);
    padding: var(--space-5);
  }

  .home {
    gap: var(--space-5);
  }

  .chips-combustible .chip {
    flex: none;
  }

  .fuentes-tabla tbody th {
    width: 16%;
  }

  /* El bloque informativo, más junto: de la línea de arriba al título, 40 px. */
  #como-funciona,
  #preguntas {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
  }

  #como-funciona .section-head.stacked,
  #preguntas .section-head.stacked {
    margin-bottom: var(--space-5);
  }

  .pasos {
    margin-bottom: var(--space-6);
  }

  #acerca {
    margin-top: var(--space-7);
  }
}

@media (min-width: 900px) {
  /* Las tres estaciones como fichas, una al lado de la otra (en rem: con letra grande pasan a una columna). */
  .estaciones-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-4);
    border-top: 0;
  }

  .estacion {
    align-content: start;
    padding: var(--space-4);
    background: var(--canvas);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .pasos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }

  /* «Acerca del sitio»: el título a la izquierda y las dos frases a la derecha. */
  #acerca .about-inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      'etiqueta texto'
      'titulo texto';
    align-content: start;
    gap: 0 var(--space-8);
  }

  #acerca .eyebrow {
    grid-area: etiqueta;
  }

  #acerca .section-title {
    grid-area: titulo;
    margin: 0;
  }

  #acerca .about-inner > p:last-child {
    grid-area: texto;
    align-self: center;
    max-width: none;
  }
}

/* Entre 641 y 899 px la tabla de fuentes mide 593 px y su caja, de 575 a 589: sin tocar el contenido, 8 px menos de relleno a cada lado de
   la celda (de 900 px en adelante sobra sitio). */
@media (min-width: 641px) and (max-width: 899px) {
  .fuentes-tabla thead th,
  .fuentes-tabla tbody th,
  .fuentes-tabla tbody td {
    padding-inline: var(--space-4);
  }
}

/* Las cuatro tarjetas de acceso en una sola fila (cada formulario queda apilado: la tarjeta mide unos 280 px). */
@media (min-width: 1168px) {
  .accesos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .acceso {
    padding: var(--space-4);
  }

  .acceso-titulo {
    font-size: var(--fs-md);
  }

  /* El margen de abajo iguala el hueco que las otras dos tarjetas dejan entre su botón y el resultado (vacío) de su lista. */
  .acceso > .search-form {
    margin-top: auto;
    margin-bottom: var(--space-3);
  }

  /* Las sugerencias se abren sobre lo que sigue, bajo el formulario, en vez de agrandar la tarjeta: en el flujo estirarían toda la fila y
     el formulario de las tarjetas vecinas, que va al pie, se correría hacia abajo mientras se escribe. */
  .acceso .sugerencias {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex: none;
    max-height: 22rem;
    margin: var(--space-1) 0 0;
  }
}

/* Teléfono: tarjetas compactas, fichas del resumen en carrusel, tabla de fuentes en fichas. */
@media (max-width: 640px) {
  .buscador-inicio {
    gap: var(--space-2);
    margin: var(--space-4) 0;
  }

  /* «Buscar en» y «Pruebe con»: el rótulo encima y, debajo, la fila a todo el ancho; lo que no cabe se desliza (el siguiente asoma). El
     relleno y el margen negativo dejan sitio al anillo de foco, que el desplazamiento recortaría. */
  .buscar-en,
  .ejemplos {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }

  .buscar-en .chips,
  .ejemplos-lista {
    flex-wrap: nowrap;
    padding: 4px;
    margin: -4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .buscar-en .chips::-webkit-scrollbar,
  .ejemplos-lista::-webkit-scrollbar {
    display: none;
  }

  /* A 320 px, con menos relleno: así asoma la tercera opción y se nota que la fila se desliza (con el relleno de siempre, las dos primeras
     llenan el ancho justo). */
  @media (max-width: 339px) {
    .buscar-en .chip span,
    .ejemplos-lista .chip-link {
      padding: 0 var(--space-3);
    }
  }

  /* Con ratón (una ventana angosta de escritorio) no hay cómo deslizar una fila sin barra: ahí las opciones pasan a otra fila. */
  @media (hover: hover) and (pointer: fine) {
    .buscar-en .chips,
    .ejemplos-lista {
      flex-wrap: wrap;
      padding: 0;
      margin: 0;
      overflow: visible;
    }
  }

  main > .buscador-inicio.controls:first-child {
    margin-top: var(--space-4);
  }

  .accesos {
    margin-bottom: var(--space-6);
  }

  .home {
    gap: var(--space-2);
  }

  .home-card {
    padding: var(--space-4);
    gap: var(--space-3);
  }

  /* El «hace 14 horas» queda en la misma fila que el título (ícono de 32 px). */
  .home-card-head > .muted {
    font-size: var(--fs-xs);
  }

  .home-card-title .card-icon {
    width: 32px;
    height: 32px;
    padding: 7px;
  }

  .solo-pc,
  .home-card .help.ayuda-pc {
    display: none;
  }

  .solo-movil {
    display: inline;
  }

  .home-card .help {
    line-height: var(--lh-snug);
  }

  .home-card #copagos-centros {
    display: none;
  }

  /* Hasta 640 px las fichas van en una fila que se desliza (.carrusel, de «Tablas de precios»); la siguiente asoma. Cada ficha
     conserva sus cuatro partes alineadas con la subrejilla. El margen negativo iguala el relleno de la tarjeta: la fila llega a
     sus bordes. */
  .home-card-wide .home-list.carrusel {
    align-self: stretch;
    width: auto;
    margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-4));
    padding: var(--space-1) var(--space-4);
    grid-template-columns: none;
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 0 var(--space-3);
    scroll-padding-inline: var(--space-4);
  }

  .home-card-wide .home-list-price {
    font-size: var(--price-hero);
  }

  .estacion {
    padding: 6px 0;
  }

  /* Lo informativo, más junto. */
  #como-funciona,
  #preguntas {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
  }

  #acerca {
    margin-top: var(--space-6);
  }

  #como-funciona .section-head.stacked,
  #preguntas .section-head.stacked {
    margin-bottom: var(--space-4);
  }

  .pasos {
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }

  .paso p {
    font-size: var(--fs-sm);
  }

  .fuentes-titulo {
    margin-bottom: var(--space-3);
  }

  .fuentes-tabla thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .fuentes-tabla,
  .fuentes-tabla tbody,
  .fuentes-tabla tbody th,
  .fuentes-tabla tbody td {
    display: block;
  }

  /* Cada fuente es una ficha: la sección y, a su derecha, cada cuánto se actualiza; debajo, de dónde sale. */
  .fuentes-tabla tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) fit-content(10rem);
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
  }

  .fuentes-tabla tbody tr:first-child {
    border-top: 0;
  }

  /* El nombre de la sección ya no va en una sola línea: «Copagos de salud» se pisaba con «Una vez al año, en marzo» a 320 px. */
  .fuentes-tabla tbody th,
  .fuentes-tabla tbody td {
    padding: 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .fuentes-tabla tbody td {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
  }

  .fuentes-tabla tbody td:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .fuentes-tabla tbody td:last-child {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    white-space: normal;
  }

  #preguntas .faq-item > summary {
    min-height: 48px;
    padding: var(--space-2) var(--space-4);
  }

  #preguntas .faq-item > p {
    margin-bottom: var(--space-4);
    padding-left: var(--space-4);
    font-size: var(--fs-sm);
  }

  #acerca p:not(.eyebrow) {
    font-size: var(--fs-sm);
  }
}

/* Sugerencias en el teléfono: la lista ocupa el ancho del formulario (el JS no le pone medidas), el texto en hasta dos líneas y el
   rótulo de la sección en su propia línea. */
@media (max-width: 640px) {
  .sugerencias {
    left: 0;
    right: 0;
    width: auto;
  }

  .sugerencias li {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
  }
}

/* «Acerca del sitio» (desde 900 px): la etiqueta mide lo que su texto, no la columna. */
@media (min-width: 900px) {
  #acerca .eyebrow {
    justify-self: start;
  }
}

@media (max-width: 480px) {
  .buscador-inicio .search-form .btn {
    flex: none;
    width: var(--control-lg);
    padding: 0;
  }

  .buscar-icono {
    display: block;
  }

  .buscar-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* En un teléfono de 360 px el ejemplo del buscador general, a 14 px, se lee completo. */
@media (max-width: 400px) {
  #buscar-todo::placeholder {
    font-size: var(--fs-sm);
  }
}
/* <<< PAQUETE PORTADA */

/* >>> PAQUETE COMBUSTIBLES */
/* Computador: la lista a la izquierda y el mapa fijo a la derecha, los dos a la vista. */
@media (min-width: 64em) {
  .estaciones-bloque {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: 'lista mapa';
    gap: var(--space-5);
    align-items: start;
  }

  .estaciones-lista {
    grid-area: lista;
    min-width: 0;
  }

  /* Si Leaflet no cargó el mapa se oculta: la lista ocupa todo el ancho en vez de quedar en media columna. */
  .estaciones-bloque:has(> #seccion-mapa[hidden]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'lista';
  }

  #seccion-mapa {
    grid-area: mapa;
    position: sticky;
    top: var(--space-4);
    display: flex;
    flex-direction: column;
    height: calc(100svh - 2 * var(--space-4));
    min-height: 480px;
    max-height: 820px;
  }

  .mapa-abrir {
    display: none;
  }

  /* El mapa ocupa todo el alto de su columna (Iquique es una franja alta): «Usar mi ubicación» va sobre el mapa, en la columna de
     controles de la izquierda (bajo el combustible y sobre la leyenda), que las estaciones casi nunca alcanzan. */
  .mapa-cabecera {
    position: absolute;
    top: 52px;
    left: var(--space-3);
    z-index: 5;
    margin: 0;
  }

  .mapa-leyenda {
    top: 92px;
  }

  .mapa-cabecera .btn.small {
    box-shadow: var(--shadow-pin);
  }

  .mapa-titulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Los marcadores del mapa no se repiten en la lista: la fila ya dice «Ver en el mapa». */
  .titulo-estaciones .section-title {
    font-size: var(--fs-2xl);
  }

  /* El título y el «21 estaciones, de menor a mayor precio» comparten renglón si caben. */
  .titulo-estaciones {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-3);
  }

  .sub-estaciones {
    margin: 0;
  }

  .comb-selector {
    margin-top: var(--space-4);
  }

  .veredicto-estaciones {
    margin-bottom: var(--space-5);
    padding: var(--space-4) var(--space-5);
    min-height: 168px; /* computador: la respuesta mide 170-181 px */
  }

  /* Veredicto: tres columnas. */
  .veredicto-estaciones > div {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) auto;
    grid-template-areas:
      'principal texto acciones'
      'principal extra acciones';
    grid-template-rows: auto 1fr;
    column-gap: var(--space-6);
    row-gap: var(--space-2);
    align-items: start;
  }

  .ve-principal {
    grid-area: principal;
  }

  .ve-precio strong {
    font-size: var(--price-hero);
  }

  .ve-texto {
    grid-area: texto;
  }

  .ve-acciones {
    grid-area: acciones;
    grid-template-columns: 1fr;
    min-width: 11rem;
  }

  .ve-extra {
    grid-area: extra;
  }
}

/* Teléfono y tableta: el mapa se abre a pantalla completa, con la barra de arriba («‹ Lista») y la ficha pegada abajo. */
@media (max-width: 63.9375em) {
  #seccion-mapa {
    display: none;
  }

  #seccion-mapa.abierto {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    overscroll-behavior: contain;
  }

  .mapa-cabecera {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    padding-top: calc(var(--space-2) + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }

  .mapa-volver {
    display: inline-flex;
    min-height: var(--control-md);
    padding: 0 var(--space-4);
  }

  .mapa-titulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .mapa-cabecera .btn.small {
    min-height: var(--control-md);
  }

  .mapa-caja {
    border: 0;
    border-radius: 0;
  }

  .mapa-ficha {
    left: var(--space-3);
    right: var(--space-3);
    width: auto;
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }

  .mapa-caja .leaflet-bottom {
    margin-bottom: calc(var(--ficha-alto, 0px) + env(safe-area-inset-bottom, 0px));
  }

  /* El cursor del menú de comuna y la lista no necesitan el espacio de la barra inferior debajo del mapa. */
  html.mapa-abierto body {
    overflow: hidden;
  }

  .ve-acciones {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  }
}

/* Tableta con el mapa a pantalla completa: la ficha mide lo de un teléfono grande, anclada a la izquierda. */
@media (min-width: 641px) and (max-width: 63.9375em) {
  .mapa-ficha {
    right: auto;
    width: min(28rem, calc(100% - 2 * var(--space-3)));
  }

  .veredicto-estaciones {
    min-height: 320px; /* tableta: la respuesta mide 318 px (340 con «Ambos») */
  }

  /* Los chips (62 px) y, debajo, el interruptor de «Autoservicio» (44 px y 12 de hueco) que llega con el primer combustible: sin esta
     reserva todo lo de abajo bajaba 56 px al llegar los precios (CLS 0,04-0,07 en 641-1023 px). */
  .comb-selector.cargando {
    min-height: 118px;
    align-content: flex-start;
  }
}

/* Hasta 719 px los combustibles no caben en un renglón (dos de 62 px: 122) y el selector mide 178 px. */
@media (min-width: 641px) and (max-width: 44.9375em) {
  .comb-selector.cargando {
    min-height: 178px;
  }
}

/* Teléfono en horizontal: la ficha va a un costado (320 px) y no cubre casi todo el alto del mapa. */
@media (max-width: 63.9375em) and (max-height: 500px) {
  .mapa-ficha {
    right: auto;
    width: min(24rem, calc(50% - var(--space-3)));
    max-height: calc(100% - 2 * var(--space-3));
  }

  /* Con la ruta calculada deja a la vista lo que se usa: el resumen, los pasos (en una lista corta) y los dos botones. */
  .mapa-ficha.con-ruta .ficha-direccion,
  .mapa-ficha.con-ruta .route-note {
    display: none;
  }

  .route-steps {
    max-height: 64px;
  }

  /* Si aun así la ficha se desplaza, los dos botones de la ruta quedan fijos abajo (no se pierden bajo los pasos). */
  .mapa-ficha .route-actions {
    position: sticky;
    bottom: calc(-1 * var(--space-4));
    margin-bottom: calc(-1 * var(--space-4));
    padding-block: var(--space-2) var(--space-4);
    background: var(--surface);
  }
}

/* Con el mapa a la vista de la lista (641 px o más) cada fila pasa a dos renglones y los botones van apilados a la derecha. */
@media (min-width: 641px) {
  .comb-chips {
    min-height: 62px;
  }


  .comb-chips .chip {
    flex: none;
  }

  .comb-chips .chip > span {
    width: auto;
  }

  .filtros-fila {
    flex-wrap: wrap;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .filtros-fila .select-field .label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    color: var(--muted);
    font-size: var(--fs-sm);
  }

  .fila-est {
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
    grid-template-areas:
      'puesto nombre precio acc'
      'puesto dir etiqueta acc'
      'puesto meta meta acc';
    padding: var(--space-3) var(--space-4);
  }

  .fila-etiqueta {
    justify-self: end;
    margin-left: 0;
  }

  .fila-acciones {
    display: flex;
    flex-direction: column;
    align-self: center;
    width: 9.5rem;
    margin: 0 0 0 var(--space-2);
    gap: var(--space-1);
  }

  .fila-acciones .btn {
    white-space: nowrap;
  }

  .fila-acciones .btn {
    min-height: var(--control-sm);
  }

  /* Una tableta (dedo, más de 640 px): los botones de cada estación miden 44 px como en el teléfono (a 768 px medían 32). */
  @media (pointer: coarse) {
    .fila-acciones .btn {
      min-height: var(--control-md);
    }
  }
}

/* Teléfono: la respuesta y la primera estación caben en la primera pantalla y media (veredicto compacto, un solo renglón de
   encabezado de la lista). */
@media (max-width: 640px) {
  .comb-selector {
    margin: var(--space-3) 0;
    gap: var(--space-2) var(--space-5);
  }

  /* Mientras llegan los precios se reserva también la fila del interruptor «Autoservicio» (aparece con el primer combustible): 92 + 8 + 44 px. */
  .comb-selector.cargando {
    min-height: 144px;
    align-content: flex-start;
  }

  /* Dos renglones de combustibles en un teléfono de 320 px: letra de 14 y 12 px, sin relleno de sobra, 4 px entre chips y el texto
     centrado en cada chip (tres chips de 92 px y dos huecos suman 284 de los 288 px que hay a 320 px). */
  .comb-chips {
    gap: var(--space-1);
  }

  .comb-chips .chip > span {
    align-items: center;
    min-height: 44px;
    padding: var(--space-1) calc(var(--space-2) - 1px);
    line-height: var(--lh-tight);
    text-align: center;
  }

  .comb-chips .chip > span > .comb-chip-nombre {
    font-size: var(--fs-sm);
  }

  .comb-chips .chip > span > .comb-chip-desde {
    font-size: var(--fs-xs);
  }

  /* Con la ruta calculada la ficha deja el precio y la ruta: sin la insignia, con el resumen más chico y las notas en letra chica. */
  .mapa-ficha.con-ruta .ficha-precio .fila-etiqueta {
    display: none;
  }

  .mapa-ficha .route-summary {
    font-size: var(--fs-lg);
  }

  .mapa-ficha .route-actions .btn {
    padding-inline: var(--space-2);
    font-size: var(--fs-sm);
  }

  .mapa-ficha .route-note {
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
  }

  .veredicto-estaciones {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
  }

  /* Con una búsqueda en la dirección (?q=copec) la respuesta suma la línea «De «copec»: la más barata es…». */
  .veredicto-estaciones.con-busqueda:not(.sin-reserva) {
    min-height: 340px;
  }

  .veredicto-estaciones > div {
    gap: var(--space-2);
  }

  .ve-texto {
    font-size: var(--fs-sm);
  }

  .ve-acciones .btn {
    min-height: var(--control-md);
  }

  /* En el teléfono «Enviar por WhatsApp» es solo el ícono, en la misma fila que los otros dos botones (su nombre lo lee el lector de pantalla). */
  .ve-acciones .btn.whatsapp {
    width: var(--control-md);
    padding: 0;
  }

  .ve-wa-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ve-extra {
    gap: var(--space-1);
  }

  .aviso-atraso::before {
    display: none;
  }

  /* El «16 estaciones, de menor a mayor precio» se lee por lector de pantalla; a la vista solo cuando dice algo más (la distancia, «15 en el mapa»). */
  .sub-estaciones:not([data-extra]) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .cabecera-lista {
    margin-bottom: var(--space-2);
  }

  .herramientas-lista {
    margin-bottom: var(--space-2);
  }

  .herramientas-lista input {
    min-height: var(--control-md);
  }

  .herramientas-lista .btn {
    min-height: var(--control-md);
  }

  .filtros-fila {
    margin-bottom: var(--space-3);
  }
}

/* Tableta (641-1023 px): el selector de comuna y la fecha comparten un renglón que se parte cuando la fecha ya no cabe: «Cargando
   precios…» (130 px) cabía junto al selector y «Precios revisados en Bencina en Línea hace 5 horas» (353 px) bajaba, y todo lo de
   abajo saltaba 33 px (CLS 0,33 a 768 px). La fecha va siempre en su propio renglón, con su texto de partida o con el definitivo. */
@media (min-width: 641px) and (max-width: 63.9375em) {
  .hero:not(.hero-inicio) .hero-tools .updated {
    flex: 1 1 100%;
  }
}

/* La línea «Precios revisados en Bencina en Línea hace N horas» ocupa dos renglones en un teléfono angosto: se reservan desde el inicio. */
@media (max-width: 380px) {
  #actualizado {
    min-height: 2lh;
  }
}

/* Con el dedo: los resúmenes plegables de la ficha miden 44 px de alto. */
@media (pointer: coarse) {
  .ficha-otros summary,
  .route-pasos summary {
    padding-block: 12px;
  }
}

/* Fila de estación con la letra agrandada: la columna del precio y su etiqueta («Más barata», «Dato de hace 4 días») es «auto» y se come
   el ancho antes que el nombre, que quedaba en 35-75 px y partido letra por letra (la última fila medía 1.378 px a 360 px con la letra al
   200 %). Cuando la fila mide pocas letras de ancho (`em` del contenedor: crece con la letra, a diferencia de una media query), el precio
   y su etiqueta bajan bajo la dirección y los botones se apilan a lo ancho: menos de 17 letras en el teléfono (a 100 % solo pasa en
   pantallas de 280 px) y menos de 26 con los botones al costado (tableta o computador con la letra al 200 %). */
#lista {
  container-type: inline-size;
}

@container (max-width: 17em) {
  .fila-est {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-areas:
      'puesto nombre'
      'puesto dir'
      'puesto precio'
      'puesto etiqueta'
      'meta meta'
      'acc acc';
  }

  .fila-precio {
    text-align: left;
  }

  .fila-etiqueta {
    justify-self: start;
    text-align: left;
  }

  .fila-acciones {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-self: stretch;
    width: auto;
    margin: var(--space-3) 0 0;
  }

  .fila-acciones .btn {
    min-height: var(--control-md);
    white-space: normal;
  }
}

@media (min-width: 641px) {
  @container (max-width: 26em) {
    .fila-est {
      grid-template-columns: 28px minmax(0, 1fr);
      grid-template-areas:
        'puesto nombre'
        'puesto dir'
        'puesto precio'
        'puesto etiqueta'
        'meta meta'
        'acc acc';
    }

    .fila-precio {
      text-align: left;
    }

    .fila-etiqueta {
      justify-self: start;
      text-align: left;
    }

    .fila-acciones {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-self: stretch;
      width: auto;
      margin: var(--space-3) 0 0;
    }

    .fila-acciones .btn {
      min-height: var(--control-md);
      white-space: normal;
    }
  }
}

/* Impresión: la lista con su precio y su diferencia, sin controles ni mapa (el mapa ya se oculta en la hoja de impresión). */
@media print {
  .comb-selector,
  .herramientas-lista,
  .filtros-fila,
  .mapa-abrir,
  .ve-acciones,
  .ve-otra,
  #ubicacion-aviso,
  #mapa-no-disponible {
    display: none !important;
  }

  .veredicto-estaciones,
  .fila-est {
    break-inside: avoid;
    box-shadow: none;
  }

  .fila-est .fila-puesto {
    background: none;
    color: inherit;
    border-color: currentColor;
  }

  .fila-est.is-best .fila-precio,
  .fila-est.is-worst .fila-precio {
    color: inherit;
  }
}
/* <<< PAQUETE COMBUSTIBLES */

/* >>> PAQUETE BUSQUEDA */
/* Resultados de la búsqueda en el teléfono (2026-10-30): el primer precio queda a la vista sin bajar. */
@media (max-width: 640px) {
  /* Los chips del tipo y las dosis, en un carril que se desliza (la lista de al lado asoma); no ocupan cuatro filas. */
  .chips-carril,
  .search-ejemplos,
  .filtro-dosis .chips-enlace {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--space-4));
    padding: 3px var(--space-4);
  }

  .chips-carril::-webkit-scrollbar,
  .search-ejemplos::-webkit-scrollbar,
  .filtro-dosis .chips-enlace::-webkit-scrollbar {
    display: none;
  }

  .chips-carril .chip,
  .search-ejemplos > *,
  .filtro-dosis .chip-link {
    flex: none;
  }

  /* Dentro del panel de búsqueda el carril llega hasta el borde de la caja (su relleno es de 16 px). */
  .search-panel .search-ejemplos {
    margin-inline: calc(-1 * var(--space-4));
    padding-inline: var(--space-4);
  }

  /* El nombre del tipo (con su cantidad) no se parte: el carril se desliza. */
  .chips-carril .chip span {
    white-space: nowrap;
  }

  /* Los filtros: sin caja (ocupaba 24 px de relleno), con chips de 40 px. */
  .filtros-barra {
    padding: 0;
    background: transparent;
    border: 0;
    gap: var(--space-2);
  }

  .chips-carril .chip span,
  .filtro-dosis .chip-link {
    min-height: var(--control-md);
  }

  .filtro {
    gap: 0;
  }

  .filtro-tienda {
    gap: var(--space-3);
  }

  .filtros-barra .chips-carril,
  .filtros-barra .filtro-dosis .chips-enlace {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }

  .filtro-tienda {
    grid-template-columns: auto minmax(0, 1fr);
  }

  /* Cada cadena en dos niveles: arriba la farmacia y su precio; abajo, a todo el ancho, el producto con lo que cuesta cada
     comprimido o kilo. La cabecera se esconde (queda para los lectores de pantalla) y el precio de la caja o del local va bajo la cifra. */
  .forma-precios {
    display: block;
  }

  .forma-precios thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .forma-precios tbody {
    display: block;
  }

  /* Con una fila flexible (y no una grilla de dos columnas, la segunda «auto»), si la letra del teléfono crece al 150 o 200 % el precio baja
     bajo el nombre de la farmacia en vez de dejarle una columna de una letra de ancho (hallazgo ACC, revisión del 2026-10-30). */
  .forma-precios tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
  }

  .forma-precios tbody tr:last-child {
    border-bottom: 0;
  }

  .forma-precios tbody tr.fila-mejor {
    background: var(--best-soft);
    box-shadow: inset var(--rule) 0 0 var(--best);
  }

  /* El nombre de la farmacia y su producto se reparten la fila: la celda de encabezado no se dibuja y sus partes pasan a la rejilla. */
  .forma-precios tbody th {
    display: contents;
  }

  .forma-precios tbody th.mejor {
    box-shadow: none;
  }

  .forma-precios .forma-quien {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .forma-precios .forma-detalle {
    order: 3;
    flex: 0 0 100%;
    min-width: 0;
    margin-top: var(--space-1);
  }

  .forma-precios .forma-producto {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
  }

  .forma-precios tbody td {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: right;
  }

  .forma-precios .mejor {
    background: transparent;
  }

  /* La celda del precio no se dibuja: su cifra va arriba a la derecha; su nota y las columnas de al lado pasan a la línea de abajo. */
  .forma-precios tbody td.celda-precio {
    display: contents;
  }

  .forma-precios .celda-precio .precio-nota,
  .forma-precios tbody td.envase,
  .forma-precios tbody td.celda-local {
    display: none;
  }

  .fila-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 var(--space-3);
    margin-top: var(--space-1);
    font-size: var(--fs-sm);
  }

  .fila-pie .pie-caja {
    white-space: nowrap;
    color: var(--muted);
  }

  .fila-pie .pie-caja strong {
    font-size: var(--fs-md);
    color: var(--text);
  }

  .fila-pie .pie-nota {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0 var(--space-2);
    margin-left: auto;
    text-align: right;
  }

  .fila-pie .pie-nota:empty {
    display: none;
  }

  .fila-pie .marca {
    display: inline;
  }

  .forma-precios .precio-linea {
    order: 2;
    flex: 0 1 auto;
    margin-left: auto;
    text-align: right;
  }

  .forma-precios .celda-precio .precio-valor,
  .forma-precios .celda-precio .precio-unidad {
    display: inline;
  }

  .forma-precios .celda-precio .precio-unidad {
    margin-left: var(--space-1);
  }

  /* Ordenado por…: las columnas ya dicen «por comprimido»; en el teléfono ocupa una línea de más. */
  .nota-orden {
    display: none;
  }

  .results {
    gap: var(--space-3);
  }

  .forma-precios .precio-valor {
    font-size: var(--price-row);
  }

  .plegable-lista > .btn {
    margin-inline: var(--space-4);
  }

  /* La lista de productos de un tipo: el nombre a la izquierda y el precio a la derecha (apilados medían unos 300 px cada uno). */
  .result-related .result-item {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  .result-related .result-item-price {
    flex: 0 0 auto;
    justify-items: end;
    text-align: right;
    max-width: 45%;
  }

  .result-related .result-item-price .btn,
  .result-related .result-item-price a {
    margin-top: 0;
  }

  /* El título con su botón «Cambiar» en una línea. */
  .resultados-cabeza {
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  .resultados-cabeza > h2 {
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
  }

  /* «Cómo comparamos»: una línea de texto, sin caja. */
  .como-comparamos {
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .como-comparamos > summary {
    min-height: 44px;
    padding: 0;
    justify-content: flex-start;
    color: var(--accent);
  }

  .plegable-texto {
    padding: var(--space-1) 0 var(--space-2);
  }

  .veredicto {
    padding: var(--space-3);
    line-height: var(--lh-snug);
  }
}
/* <<< PAQUETE BUSQUEDA */

/* >>> PAQUETE COPAGOS */
/* Copagos: ajustes responsive de la sección 14. */
/* Una fila de resultado («Consulta de traumatología · Desde $11.670 · Ver dónde»): con la letra agrandada el precio no cabe junto al
   nombre y se salía de la pantalla. Cuando la fila mide menos de 16 letras de ancho (`em` del contenedor: crece con la letra), el
   precio baja bajo el nombre. */
.cp-resultado {
  container-type: inline-size;
}

@container (max-width: 16em) {
  .cp-resultado-fila {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp-resultado-precio {
    justify-items: start;
    text-align: left;
  }

  .cp-resultado-precio strong {
    white-space: normal;
  }
}

/* Escritorio (desde 1024 px con letra de 16 px): los tres pasos en una fila. */
@media (min-width: 64em) {
  .cp-pasos-lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

/* Con dedo (teléfono o pantalla táctil): los resúmenes de lo plegable miden 44 px. */
@media (max-width: 640px), (pointer: coarse) {
  .cp-sedes > summary,
  .cp-mas > summary,
  .cp-como > summary {
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .cp-pasos {
    padding: var(--space-4);
  }

  .cp-resultado-fila {
    padding: var(--space-3);
  }

  .cp-resultado-detalle {
    padding: var(--space-3);
  }

  .cp-fila {
    padding: var(--space-3);
  }

  .cp-grupo-cab {
    padding: var(--space-3);
  }

  .cp-arancel-cuerpo,
  .cp-detalle-cuerpo {
    padding: 0 var(--space-3) var(--space-3);
  }

  /* Una fila de centro: el nombre y la dirección a la izquierda y «Cómo llegar» a la derecha; si no caben, el botón baja. */
  .cp-fila-info {
    flex-basis: 9rem;
  }

  /* «Cómo leer esta página»: respuestas de 14 px, filas de 48 px y menos aire arriba, para que la sección no pase de 800 px. */
  #sobre-datos {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
  }

  #sobre-datos .section-head.stacked {
    margin-bottom: var(--space-4);
  }

  #sobre-datos .faq-item > summary {
    min-height: 48px;
    padding-block: var(--space-2);
  }

  #sobre-datos .faq-item > p {
    margin-bottom: var(--space-4);
    padding-right: var(--space-5);
    font-size: var(--fs-sm);
  }
}

/* El copago por nivel en pantallas angostas: los rótulos de nivel una sola vez arriba y, por prestación, su nombre y los tres
   precios en una fila (un nivel por columna), en vez de una ficha de tres filas por prestación. */
@media not all and (min-width: 64em) {
  /* El cuerpo de cada tabla mide el ancho disponible: abajo, `@container` lo mira para saber si caben tres columnas de precios. */
  .cp-arancel-cuerpo,
  .cp-detalle-cuerpo {
    container-type: inline-size;
  }

  .cp-niveles thead {
    display: block;
    margin-bottom: var(--space-2);
  }

  .cp-niveles thead tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .cp-niveles thead th:first-child {
    display: none;
  }

  .cp-niveles thead th {
    width: auto;
    padding: var(--space-2) var(--space-3);
    background: var(--table-head-bg);
    border-radius: var(--radius-xs);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    text-align: left;
  }

  .cp-niveles tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cp-niveles tbody th {
    grid-column: 1 / -1;
    padding: var(--space-3);
  }

  .cp-niveles tbody td {
    display: block;
    padding: var(--space-3);
    border-bottom: 0;
  }

  .cp-niveles tbody tr > td + td {
    border-left: 1px solid var(--border);
  }

  .cp-niveles td[data-label]::before {
    display: none;
  }

  .cp-niveles td > * {
    justify-self: start;
    text-align: left;
  }

  .cp-niveles .top-price {
    justify-content: flex-start;
  }

  .cp-niveles td small {
    display: none;
  }

  /* El arancel único ocupa la fila entera y dice que vale lo mismo en los tres niveles. */
  .cp-niveles td.cp-unico {
    grid-column: 1 / -1;
  }

  .cp-niveles td.cp-unico small {
    display: block;
    margin-top: 2px;
  }

  .cp-niveles tr.total-row > td:not(.is-best, .is-worst) {
    background: var(--surface);
  }

  /* Tres columnas de precios necesitan unas 19 letras de ancho (`em` del contenedor: crece con la letra). Con la letra agrandada o en
     una pantalla de 320 px los precios se pisaban («$4.83$5.68$7.8»): las filas pasan a una columna, con el nivel junto a cada precio,
     y la cabecera de niveles —que ya no alinea nada— se oculta. */
  @container (max-width: 19em) {
    .cp-niveles thead {
      display: none;
    }

    .cp-niveles tbody tr {
      grid-template-columns: minmax(0, 1fr);
    }

    .cp-niveles tbody td:not(.cp-unico) {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: var(--space-1) var(--space-3);
    }

    .cp-niveles tbody tr > td + td {
      border-top: 1px solid var(--border);
      border-left: 0;
    }

    .cp-niveles td[data-label]:not(.cp-unico)::before {
      display: block;
      font-size: var(--fs-sm);
      line-height: var(--lh-snug);
      font-weight: 600;
      color: var(--text-strong);
    }

    .cp-niveles td:not(.cp-unico) > * {
      justify-self: end;
      text-align: right;
    }

    .cp-niveles td:not(.cp-unico) .top-price {
      justify-content: flex-end;
    }
  }
}
/* <<< PAQUETE COPAGOS */

/* >>> PAQUETE LISTAS */
/* Mi receta / Mi lista, en el teléfono y con dedo (2026-10-30). */
@media (max-width: 640px) {
  /* Lo básico con la lista armada: una sola fila que se desliza, para no empujar la lista hacia abajo. */
  .basico.compacto .basico-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .basico.compacto .basico-chips::-webkit-scrollbar {
    display: none;
  }

  /* La lista: nombre, cantidad y «Quitar» en una fila; sin la palabra «unidades» (ya lo dice el campo de arriba). */
  .mi-lista-pagina .mi-lista-cantidad > span[aria-hidden] {
    display: none;
  }

  .mi-lista-pagina .mi-lista-cantidad input {
    width: 4.5rem;
  }

  /* La barra fija de abajo, sobre la barra de navegación; se esconde con el teclado abierto. */
  .barra-lista:not([hidden]) {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
  }

  html.teclado-abierto .barra-lista {
    display: none;
  }

  .mi-lista-respuesta .btn.whatsapp {
    width: 100%;
  }

  /* Tarjetas de la respuesta más justas: la ganadora y la de repartir caben mejor en una pantalla. */
  .mi-lista-respuesta .recomendacion {
    padding: var(--space-4);
  }

  .barra-lista:not([hidden]) {
    align-items: center;
    flex-wrap: nowrap;
  }

  /* El texto cede ancho y parte en renglones: con «aCuenta (Alto Hospicio)» el botón «Ver» bajaba a otra fila y la barra medía 112 px. */
  .barra-lista-texto {
    flex: 1 1 0;
  }

  /* La tarjeta de la respuesta está a la vista (la mitad o más): la barra repetiría lo mismo y le quitaría pantalla. */
  .barra-lista.respuesta-a-la-vista {
    display: none;
  }
}

/* Con dedo (o en un teléfono): el enlace de cada opción mide 44 px, como los de la tabla (ver los objetivos táctiles de arriba). */
@media (max-width: 640px), (pointer: coarse) {
  .opciones li a,
  .opciones li .btn-texto {
    display: inline-block;
    padding-block: 12px;
    margin-block: -12px;
  }

  .consejos > summary {
    min-height: 44px;
  }

  /* 14 px de letra: con 14 px de relleno arriba y abajo, 45 px de alto (los de arriba, 41). */
  .top-table.copagos-table td small a,
  .opciones > summary {
    padding-block: 14px;
    margin-block: -14px;
  }
}

/* Pantallas muy angostas (320 px) o letra muy grande: los chips de «Lo básico» pueden partir su texto en vez de salirse. */
@media (max-width: 22em) {
  .chip-boton {
    max-width: 100%;
    white-space: normal;
    text-align: left;
  }
}

/* Mi receta con «Ambos» entre 1024 y 1183 px: cinco farmacias (exactamente seis columnas; con siete u ocho, de Supermercados, no alcanza ni así) y cada celda medía ~134 px, con «Historial de
   precio» y «Otras opciones» partidos en dos renglones y filas de ~260 px. Primera columna y relleno más angostos, y esos dos
   controles en una línea. Los topes van en em, como los de las demás tablas anchas. */
@media (min-width: 64em) and (max-width: 73.9375em) {
  .top-table.copagos-table:has(thead th:nth-child(6)):not(:has(thead th:nth-child(7))) thead th:first-child {
    width: 12rem;
  }

  .top-table.copagos-table:has(thead th:nth-child(6)):not(:has(thead th:nth-child(7))) :is(th, td):not(:first-child) {
    padding-inline: var(--space-3);
  }

  .top-table.copagos-table:has(thead th:nth-child(6)):not(:has(thead th:nth-child(7))) :is(.historial-boton, .opciones > summary) {
    white-space: nowrap;
  }
}
/* <<< PAQUETE LISTAS */

/* ---- 16 · Accesibilidad ---- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Colores forzados (alto contraste de Windows): el estado seleccionado debe seguir viéndose, y
   «más barato» (contorno continuo) se distingue de «más caro» (contorno discontinuo). */
@media (forced-colors: active) {
  .comuna-option input:checked + span,
  .chip input:checked + span {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }

  .site-nav a[aria-current='page'] {
    border-bottom-color: Highlight;
  }

  /* Barra de navegación inferior del teléfono: la página actual con contorno continuo y la barra con su filete. */
  @media (max-width: 640px) {
    .site-nav {
      border-top-color: CanvasText;
    }

    .site-nav a[aria-current='page'] {
      border-top-color: Highlight;
      outline: 2px solid Highlight;
      outline-offset: -2px;
    }
  }

  .top-table td.is-best,
  .forma-precios .mejor {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  .top-table td.is-worst {
    outline: 2px dashed CanvasText;
    outline-offset: -2px;
  }

  /* La comuna elegida y la recomendación destacada (en pantalla, borde índigo y filete verde). */
  .recomendacion.is-best {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  /* La sugerencia activa mientras se elige con las flechas. */
  .sugerencias li[aria-selected='true'] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .sugerencias li[aria-selected='true'] :is(.sugerencia-texto strong, .sugerencia-seccion) {
    color: HighlightText;
  }
}

/* ---- 17 · Impresión: solo el contenido ----
   Va al final del archivo. Los fondos no se imprimen por defecto, así que todo texto que en pantalla
   va sobre un fondo de color (número de paso, cabecera de tabla, nombre de la ficha) pasa a negro sobre blanco. */
@media print {
  /* «Imprimir» de una lista del visitante: solo esa sección, sin controles. */
  body.imprimir-seccion main > :not(.se-imprime),
  body.imprimir-seccion .hero,
  .mi-lista-items,
  .mi-lista-acciones,
  [id$='-compartida'],
  #mis-examenes-aviso,
  .opciones,
  .compartir-whatsapp,
  .historial-caja,
  .elegido .btn-texto,
  .forma-elegir select {
    display: none !important;
  }

  .solo-impresion {
    display: block;
    margin: 0 0 8pt;
  }

  .site-nav,
  .skip-link,
  .barra-fija,
  .aviso-sin-js,
  .comuna-field,
  .search-form,
  .chips,
  .filtros-barra,
  .filtro,
  .controls,
  .map-section,
  .btn,
  .results > .btn,
  .site-footer nav,
  .footer-grid,
  .faq-item > summary::after {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .site-header,
  .hero {
    background: none;
    border: 0;
  }

  .site-brand,
  .brand-tagline {
    color: #000;
  }

  .hero .updated,
  .muted,
  .help,
  .note {
    color: #000;
  }

  .home-card-wide .home-list li,
  .result-item,
  .forma-precios tr,
  .faq-item,
  .route-panel {
    break-inside: avoid;
  }

  /* Las fichas del resumen de la portada no llevan fondo al imprimir: se delimitan con su borde. */
  .home-card-wide .home-list li {
    border-color: #000;
  }

  /* Un título no queda solo al final de una hoja. */
  .eyebrow,
  .forma-titulo,
  .section-head,
  .home-card-head,
  .table-title {
    break-after: avoid;
  }

  .top-table tr {
    break-inside: avoid;
  }

  .info-item {
    break-inside: auto;
  }

  .top-table thead {
    display: table-header-group;
  }

  .top-table thead th {
    position: static;
  }

  .top-table thead th,
  .top-table tbody th {
    color: #000;
    background: none;
  }

  .top-table thead th {
    border-bottom: 1px solid #000;
  }

  .top-table tbody th .top-name small {
    color: #262626;
  }

  .top-table tbody th .top-rank {
    color: #000;
    box-shadow: inset 0 0 0 1px #000;
  }

  /* El número de paso es blanco sobre un círculo índigo: en papel, negro con contorno. */
  .step-num {
    color: #000;
    background: none;
    box-shadow: inset 0 0 0 1px #000;
  }

  .site-footer {
    background: none;
    color: #000;
    margin-top: var(--space-4);
    padding-bottom: 0;
  }

  .site-footer a,
  .footer-title {
    color: inherit;
  }

  .footer-note {
    background: none;
    border-top: 1px solid #000;
    padding: 10px 0 0;
    color: #000;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

/* En una hoja A4 vertical las tablas son fichas: no se repite una cabecera que no existe, y el
   nombre de cada ficha lleva su filete. */
@media print and (max-width: 63.9375em) {
  .top-table thead {
    display: none;
  }

  .top-table tbody th {
    border-bottom: 1px solid #000;
  }
}