/* =====================================================
   Boticard  ·  Farmacias de 24 horas en RD

   EL COLOR ES DE LA FAMILIA, NO DE LA APP (28 de agosto de 2026)
   Boticard es de la familia «Servicios para RD», y las cuatro de esa familia
   -Cocuyo, la Guagua, PapeleosRD y esta- van en el mismo verde `#35A96B`. Antes
   esta era menta, Cocuyo violeta, PapeleosRD azul y la Guagua olivo: cuatro
   apps hermanas que parecian de cuatro empresas distintas. La fuente del color
   es `daia/recursos/identidad/categorias.json` y hay un revisor que avisa si
   esta copia se separa de ella.

   OJO CON EL VERDE Y EL TEXTO BLANCO
   `#35A96B` con letras blancas encima da 2.98:1, y hace falta 4.5:1. Por eso la
   portada NO usa el verde de la lamina: usa el degradado de sus dos tonos
   oscuros, que llega a 4.76:1 en el punto mas claro. Al aclararlo, el resumen
   deja de leerse aunque siga viendose.

   Y AHORA HAY UN SOLO VERDE
   La menta de «esto si se puede hacer» era otro verde distinto al de marca.
   Dos verdes en la misma pantalla no se leen como dos significados, se leen
   como un error de color. El verde de la familia hace los dos papeles.

   POR QUÉ CLARO SI ESTO SE ABRE DE MADRUGADA
   Parece que un sitio para las tres de la mañana debería ser oscuro. Se decidió
   al revés: aquí lo que importa es que el número de teléfono se lea a la primera,
   con una mano, medio dormido y a veces con el brillo del teléfono al mínimo. Hay
   modo oscuro más abajo para quien tenga el sistema en oscuro, pero el claro es
   el que manda.

   PALETA: para cambiarla, edita solo las variables de :root
   ===================================================== */
:root {
  --papel:        #F4F5F7;
  --papel-hondo:  #ECEEF2;
  --papel-alto:   #FFFFFF;
  --papel-borde:  #E6E8EC;

  --tinta:        #16181D;
  --tinta-media:  #5A6070;
  /* Era #8A90A0: 3.19:1 sobre blanco, por debajo del minimo de 4.5:1. Se repite
     en 8 sitios y uno es `.fila__horario`, la frase que sostiene la honestidad
     del sitio en las 35 filas sin telefono. #616879 pasa 4.5:1 tanto sobre
     blanco como sobre --papel-hondo, que es el fondo real del pie. */
  --tinta-suave:  #616879;

  --marca:        #35A96B;
  --marca-vivo:   #3FBD79;
  --marca-hondo:  #298252;   /* el verde COMO TEXTO: pasa 4.5:1 sobre blanco */
  --marca-tenue:  rgba(53, 169, 107, 0.11);
  --degradado:    linear-gradient(135deg, #298252 0%, #1F6B44 100%);

  --verde:        #298252;
  --verde-tenue:  rgba(53, 169, 107, 0.12);
  --ambar:        #b06d05;
  --ambar-tenue:  rgba(176, 109, 5, 0.11);
  --coral:        #d93b53;
  --coral-tenue:  rgba(217, 59, 83, 0.09);

  --letra-titulo: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --letra-texto:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Radio a 26px (rediseño claymorphism, agosto de 2026): la medida que pide la
     fórmula de arcilla del skill `estilo-daia`. Misma cifra que Papeleo y Cocuyo. */
  --radio:       26px;
  --radio-chico: 16px;
  --ancho:       62rem;
  --ancho-texto: 44rem;

  /*
   * Claymorphism: tres capas por token. (1) Una sombra de CONTACTO de 1-2 px,
   * que es la que dibuja el canto — sin ella, una tarjeta blanca sobre este
   * fondo casi blanco se desdibuja. (2) Una ancha y desplazada, que la despega
   * del papel. (3) Una interna oscura abajo, que le da grosor a la pieza.
   *
   * NO lleva luz interna blanca: sobre tarjeta blanca no se ve, y lo único que
   * deja es un velo lechoso.
   *
   * `--sombra-hundida` es el estado AL presionar. `.alerta` NO usa estas
   * variables — se queda plana a propósito, para no competir con el color de
   * advertencia.
   */
  --sombra:       0 1px 2px rgba(22, 24, 29, 0.06), 0 12px 26px -14px rgba(22, 24, 29, 0.22), inset 0 -7px 14px rgba(22, 24, 29, 0.035);
  --sombra-alta:  0 2px 4px rgba(22, 24, 29, 0.08), 0 22px 44px -18px rgba(22, 24, 29, 0.30), inset 0 -9px 18px rgba(22, 24, 29, 0.05);
  --sombra-marca: 0 8px 22px -8px rgba(41, 130, 82, 0.5);
  --sombra-verde: 0 8px 22px -8px rgba(41, 130, 82, 0.5);
  --sombra-hundida: 0 8px 16px -10px rgba(22, 24, 29, 0.2), inset 4px 4px 10px rgba(22, 24, 29, 0.14), inset -2px -2px 6px rgba(255, 255, 255, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel:       #0E0F13;
    --papel-hondo: #08090C;
    --papel-alto:  #16181D;
    --papel-borde: #24262E;
    --tinta:       #F2F3F6;
    --tinta-media: #A3A9B8;
    /* Era #767C8C: 4.26:1 sobre #0E0F13, por debajo del minimo por poco. */
    --tinta-suave: #9CA2B3;
    --marca:       #35A96B;
    --marca-vivo:  #4FC286;
    --marca-hondo: #4FC286;   /* sobre fondo oscuro el verde de texto sube, no baja */
    --marca-tenue: rgba(53, 169, 107, 0.16);
    --verde:       #4FC286;
    --verde-tenue: rgba(53, 169, 107, 0.16);
    --ambar:       #fbbf24;
    --ambar-tenue: rgba(251, 191, 36, 0.14);
    --coral:       #ff8095;
    --coral-tenue: rgba(255, 128, 149, 0.13);
    --sombra:      0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 26px -14px rgba(0, 0, 0, 0.7), inset 0 -7px 14px rgba(0, 0, 0, 0.3), inset 0 7px 14px rgba(255, 255, 255, 0.035);
    --sombra-alta: 0 2px 4px rgba(0, 0, 0, 0.55), 0 22px 44px -18px rgba(0, 0, 0, 0.75), inset 0 -9px 18px rgba(0, 0, 0, 0.35), inset 0 9px 18px rgba(255, 255, 255, 0.045);
    --sombra-hundida: 0 8px 16px -10px rgba(0, 0, 0, 0.55), inset 4px 4px 10px rgba(0, 0, 0, 0.4), inset -2px -2px 6px rgba(255, 255, 255, 0.06);
  }
}

@font-face {
  font-family: "Outfit";
  src: url("/tipografias/outfit.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/tipografias/inter.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--letra-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--letra-titulo);
  font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
  margin: 0 0 0.5em; text-wrap: balance;
}
h1 { font-size: clamp(1.95rem, 5.5vw, 2.9rem); font-weight: 800; }
h2 { font-size: clamp(1.35rem, 3.4vw, 1.75rem); margin-top: 2.4em; }
h3 { font-size: 1.1rem; margin: 0 0 0.35em; }

p { margin: 0 0 1em; }
p, li { text-wrap: pretty; }
a { color: var(--marca-hondo); text-underline-offset: 2px; }
@media (prefers-color-scheme: dark) { a { color: var(--marca); } }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1.15rem; }
.columna-texto { max-width: var(--ancho-texto); }

.saltar {
  position: absolute; left: -9999px;
  background: var(--tinta); color: var(--papel);
  padding: 0.7rem 1.1rem; border-radius: var(--radio-chico); z-index: 100;
}
.saltar:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2.5px solid var(--marca); outline-offset: 2px; border-radius: 4px; }

/* ---------- Cabecera ---------- */
.cabecera {
  border-bottom: 1px solid var(--papel-borde);
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 40;
}
.cabecera__fila { display: flex; align-items: center; gap: 0.9rem; min-height: 68px; }
.marca {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--letra-titulo); font-size: 1.32rem; font-weight: 700;
  color: var(--tinta); letter-spacing: -0.03em;
}
/* La pastilla es la firma. Solo hay una en toda la página: si hubiera dos o tres,
   el ojo no sabría cuál mirar.

   El monito va apoyado en el borde de abajo (`align-items: flex-end`) y no centrado:
   así se le ve la cara entera dentro de un cuadrado pequeño. Centrado, el aire de
   encima de la cabeza se come la mitad del sitio y la cara queda diminuta. */
.marca__pastilla {
  display: flex; align-items: flex-end; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px; overflow: hidden;
  background: var(--verde-tenue);
  box-shadow: inset 0 -3px 8px rgba(22, 24, 29, 0.06);
  flex-shrink: 0;
}
.marca__pastilla img { width: 34px; height: auto; margin-bottom: -1px; }
.cabecera__nota { margin-left: auto; font-size: 0.85rem; color: var(--tinta-suave); }
@media (max-width: 30rem) { .cabecera__nota { display: none; } }

/* ---------- Portada ----------
   Es la única pieza de color pleno de la página. Va a sangre —se sale de la
   envoltura con márgenes negativos— para que se lea como una puerta y no como una
   tarjeta más. Todo lo que viene después es blanco, y por eso la lista respira. */
.portada {
  position: relative;
  margin: 0 -1.15rem 1.6rem;
  padding: 2.6rem 1.15rem 1.7rem;
  background: var(--degradado);
  border-radius: 0 0 var(--radio) var(--radio);
  color: #fff;
  overflow: hidden;
}
/* Un círculo enorme y casi transparente rompe el degradado plano. Sin esto la
   banda se ve como un bloque de color de plantilla. */
.portada::after {
  content: ""; position: absolute; right: -90px; top: -120px;
  width: 300px; height: 300px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.10); pointer-events: none;
}
.portada > * { position: relative; }

/* El monito de «Servicios para RD» (28 de agosto de 2026). Antes había aquí un
   icono 3D de botiquín; ahora va el personaje de la familia, el mismo que en
   Cocuyo, la Guagua y PapeleosRD.

   NO PUEDE IR DETRÁS DE LAS CIFRAS, Y ESTO SE VIO EN LA CAPTURA
   Las tres cifras son cristal: llevan `backdrop-filter: blur(6px)`, o sea que
   desenfocan lo que tengan detrás. Puesto en la esquina de abajo, el monito
   quedaba justo debajo de la tercera y aparecía con la cara borrosa, como una
   mancha gris. No daba ningún error: se vio mirando la foto.

   Por eso hay dos colocaciones y no una. En el teléfono va arriba y centrado,
   antes del titular, donde no hay nada encima. En pantalla ancha se va a la
   derecha y la portada le reserva esa columna con `padding-right`, para que
   ninguna cifra llegue hasta él.

   La sombra va con `drop-shadow` y no con `box-shadow`: el PNG es transparente,
   y un box-shadow le dibujaría un rectángulo alrededor del aire. */
.portada__ilustracion {
  display: block; width: 6.5rem; height: auto;
  margin: 0 auto 0.7rem; pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.22));
}
@media (min-width: 52rem) {
  .portada__ilustracion {
    position: absolute; right: 1rem; bottom: -1.2rem;
    width: 12.5rem; margin: 0;
  }
}

.portada h1 { color: #fff; }
/* Era rgba(255,255,255,.88): 4.08:1 sobre el 298252 del degradado, por debajo
   del minimo. A opacidad plena sube a 4.76:1. */
.portada__resumen {
  font-size: 1.1rem; line-height: 1.55; color: rgba(255, 255, 255, 0.98);
  max-width: var(--ancho-texto);
}
.portada__resumen strong { color: #fff; }

@media (min-width: 52rem) {
  /* El `padding-right` grande es la columna que se le reserva al monito. */
  .portada { margin-left: 0; margin-right: 0; border-radius: var(--radio); padding: 3rem 15rem 2rem 2.4rem; }
}

/* ---------- La alerta que no se puede cerrar ----------
   Va en ámbar y con borde grueso a la izquierda. No es decorativa: dice que el
   dato de fondo está sin verificar, y tiene que leerse antes que los nombres. */
/* AQUI NO VA MONITO, Y SE PROBO (28 de agosto de 2026)
   El aviso queda justo debajo de la portada, que ya lleva el suyo: con los dos a la vez
   en la misma pantalla el monito deja de ser una firma y pasa a ser un estampado. Ademas,
   metido en la caja del aviso se le encimaba el texto — y este es EL texto que tiene que
   leerse antes que ningun nombre de farmacia. Se quito. */

.alerta {
  background: var(--ambar-tenue);
  border: 1.5px solid color-mix(in srgb, var(--ambar) 35%, transparent);
  border-left-width: 5px;
  border-radius: var(--radio);
  padding: 1.15rem 1.3rem; margin: 0 0 1.6rem;
}
.alerta__titulo {
  font-family: var(--letra-titulo); font-size: 1.1rem; font-weight: 700;
  color: var(--ambar); margin: 0 0 0.4rem;
}
.alerta p { margin: 0; font-size: 0.98rem; color: var(--tinta-media); }
.alerta strong { color: var(--tinta); }

/* ---------- Cifras ----------
   Van dentro de la portada, sobre el degradado, en tarjetas de vidrio. Antes eran
   tres tarjetas blancas sueltas debajo del título y competían con las tarjetas de
   farmacia: tres filas de cajas blancas seguidas y ninguna mandaba. */
.cifras {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(3, 1fr);
  margin: 1.6rem 0 0;
}
.cifra {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--radio-chico); padding: 0.8rem 0.85rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cifra__numero {
  display: block; font-family: var(--letra-titulo); color: #fff;
  font-size: 1.9rem; font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
/* Sobre el verde de la portada, el coral de la paleta clara se apaga: este es su
   version viva, elegida contra este fondo y no contra el blanco.

   El «4 con telefono» iba en menta, que sobre verde son dos verdes distintos en
   la misma caja y se lee como un error de color. Va en blanco: es un dato bueno,
   no una alarma, y el blanco es el color de lo normal en esta portada. */
.cifra__numero--bien { color: #fff; }
/* El "0 verificadas" va en coral y no en gris: es el número más importante de la
   página y el que la gente tiene que ver, no el que hay que disimular.
   Era #ffb0b8: 2.76:1 en la punta clara del degradado, por debajo incluso del
   3:1 que pide un texto grande. #ffcdd1 pasa el 3:1 en las dos puntas
   (298252 y 1F6B44) sin perder el tinte de alarma que lo distingue del "4 con
   teléfono", que va en blanco pleno. */
.cifra__numero--ojo { color: #ffcdd1; }
/* Era rgba(255,255,255,.75): 2.77-3.41:1 dentro de la tarjeta de cristal, segun
   en que punto del degradado caiga. A opacidad plena sube a 3.68-4.71:1. */
.cifra__etiqueta {
  display: block; margin-top: 0.35rem; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.97); line-height: 1.3;
}

@media (max-width: 26rem) {
  /* En pantallas muy estrechas tres columnas dejan las etiquetas en cuatro
     líneas cada una. Mejor una fila por cifra, con el número al lado. */
  .cifras { grid-template-columns: 1fr; gap: 0.45rem; }
  .cifra { display: flex; align-items: baseline; gap: 0.7rem; }
  .cifra__numero { font-size: 1.6rem; }
  .cifra__etiqueta { margin-top: 0; }
}

/* ---------- Mapa de cobertura ----------
   Dibuja ZONAS, no farmacias. El país sin puntos es la mitad del mensaje, así que
   la silueta tiene que verse bien aunque esté vacía: por eso lleva relleno y
   contorno propios en vez de ser solo un fondo. */
.cobertura { margin-top: 2.5rem; }

.mapa-caja {
  background: var(--papel-alto);
  border-radius: var(--radio); padding: 0.6rem;
  box-shadow: var(--sombra); margin: 1.2rem 0 0.8rem;
}
.mapa { display: block; width: 100%; height: auto; }

.mapa__pais {
  fill: var(--papel-hondo);
  stroke: var(--papel-borde);
  stroke-width: 2;
  stroke-linejoin: round;
}

/* El halo hace que un círculo chico siga siendo visible sobre la silueta clara.
   Va debajo del punto y no encima, y no recibe toques. */
.mapa__halo { fill: var(--marca); opacity: 0.13; }
/*
  ANTES LA UNICA DIFERENCIA ERA EL COLOR, Y ERA CASI EL MISMO COLOR
  --marca (#35A96B) y --verde (#298252) dan 1.60:1 entre si: a simple vista son
  el mismo verde. La leyenda decia "con teléfono" / "sin teléfono" pero el mapa
  no lo mostraba. Ahora la diferencia es de FORMA: relleno solido para las que
  se pueden llamar, anillo hueco para las que no -funciona tambien para quien
  no distingue bien los colores.
*/
.mapa__punto { fill: none; stroke: var(--marca-hondo); stroke-width: 2.5px; }
.mapa__zona--llamable .mapa__punto { fill: var(--verde); stroke: none; }
.mapa__zona--llamable .mapa__halo { opacity: 0.16; }

.mapa__cifra {
  fill: var(--tinta); font-family: var(--letra-titulo); font-weight: 700;
  font-size: 19px; text-anchor: middle; pointer-events: none;
}
/* Dentro de un circulo LLENO la cifra necesita blanco para leerse; dentro del
   anillo hueco, el fondo es el mismo papel claro del mapa y hace falta tinta. */
.mapa__zona--llamable .mapa__cifra { fill: #fff; }

.mapa__nombre {
  fill: var(--tinta-media); font-family: var(--letra-texto); font-weight: 600;
  font-size: 15px; text-anchor: middle; pointer-events: none;
  /* Once nombres a la vez sobre un mapa de 390px de ancho se pisan entre si.
     Se esconden hasta que hay sitio real -ver el media query mas abajo-, y el
     `aria-label` del grupo ya dice el nombre para quien no pueda leerlo. */
  display: none;
}
@media (min-width: 40rem) { .mapa__nombre { display: block; } }

/* Todo el grupo es el área tocable: en un teléfono, apuntarle a un círculo de
   siete píxeles con el pulgar es imposible, y el halo lo agranda de verdad. */
.mapa__zona { cursor: pointer; }
.hay-js .mapa__zona:hover .mapa__halo,
.hay-js .mapa__zona:focus-visible .mapa__halo { opacity: 0.32; }
.mapa__zona:focus { outline: none; }
.hay-js .mapa__zona:focus-visible .mapa__punto { stroke: var(--tinta); stroke-width: 2.5; }

/* La zona elegida se queda marcada: sin esto, después de filtrar no hay forma de
   saber en qué zona estás mirando. */
.mapa__zona--activa .mapa__punto { stroke: var(--tinta); stroke-width: 3; }
.mapa__zona--activa .mapa__halo { opacity: 0.4; }

.mapa__leyenda {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem;
  font-size: 0.82rem; color: var(--tinta-suave); margin: 0 0 1rem; padding-left: 0.3rem;
}
.mapa__muestra {
  display: inline-block; width: 11px; height: 11px; border-radius: 999px;
  margin-right: 0.15rem; vertical-align: -1px;
}
.mapa__muestra--llamable { background: var(--verde); }
/* El anillo hueco de la leyenda tiene que verse EXACTAMENTE como el circulo del
   mapa, o la leyenda estaria explicando una forma que no aparece en ningun sitio. */
.mapa__muestra--anillo { background: transparent; border: 2px solid var(--marca-hondo); }

/* Sin JavaScript el mapa se ve igual pero no filtra nada, así que no debe
   parecer tocable. */
.mapa__zona { cursor: default; }
.hay-js .mapa__zona { cursor: pointer; }

/* ---------- Buscador y filtros ---------- */
.buscador { position: relative; margin: 1.2rem 0 0.9rem; }
.buscador input {
  width: 100%; font: inherit; font-size: 1.05rem;
  padding: 0.9rem 1rem 0.9rem 3rem; min-height: 56px;
  background: var(--papel-alto); color: var(--tinta);
  border: 1.5px solid var(--papel-borde); border-radius: 999px;
  box-shadow: var(--sombra);
}
.buscador input::placeholder { color: var(--tinta-suave); }
.buscador input:focus { border-color: var(--marca); outline: none;
                        box-shadow: 0 0 0 4px var(--marca-tenue); }
.buscador svg { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
                color: var(--marca); pointer-events: none; }
.buscador input { padding-right: 3rem; }
.buscador__limpiar {
  position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px; border: none;
  background: transparent; color: var(--tinta-suave); cursor: pointer;
}
.buscador__limpiar svg { position: static; color: inherit; }
.buscador__limpiar:hover { background: var(--papel-hondo); color: var(--tinta); }
.buscador__limpiar[hidden] { display: none; }

/*
  Volver arriba. La pagina mide mas de 12.000 px en un telefono y no habia
  ninguna forma de regresar al buscador sin deslizar todo ese camino de vuelta
  a mano. Es un enlace de ancla comun (`href="#arriba"`): funciona sin
  JavaScript, al contrario que un boton atado a un evento de scroll.
*/
.volver-arriba {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 999px;
  background: var(--papel-alto); color: var(--marca-hondo);
  box-shadow: var(--sombra-alta); text-decoration: none;
}
.volver-arriba svg { width: 20px; height: 20px; }
@media (prefers-color-scheme: dark) { .volver-arriba { color: var(--marca); } }
@media print { .volver-arriba { display: none; } }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1rem; }
.chip {
  font: inherit; font-size: 0.86rem; font-weight: 600;
  padding: 0.45rem 0.95rem; min-height: 40px;
  border: 1.5px solid var(--papel-borde); border-radius: 999px;
  background: var(--papel-alto); color: var(--tinta-media); cursor: pointer;
  transition: border-color 0.14s, color 0.14s, background 0.14s;
}
.chip:hover { border-color: var(--marca); color: var(--marca-hondo); }
.chip--activo {
  background: var(--degradado); color: #fff; border-color: transparent;
  box-shadow: var(--sombra-marca);
}
.chip--activo:hover { color: #fff; }

.conteo { font-size: 0.88rem; color: var(--tinta-suave); margin: 0 0 1rem; padding-left: 0.3rem; }
.vacio {
  background: var(--papel-alto); border: 1.5px dashed var(--papel-borde);
  border-radius: var(--radio); padding: 1.5rem; text-align: center;
  color: var(--tinta-media);
}
.vacio p { margin: 0; }
/* El monito con el plano en la mano, buscando. Apoyado en el texto y no flotando:
   el dibujo tiene aire sobre la cabeza y con margen abajo se separaba demasiado. */
.vacio__monito { width: 96px; height: auto; margin: 0 auto 0.4rem; display: block; }
.vacio[hidden] { display: none; }

/* ---------- Tarjeta de farmacia ---------- */
.farmacias {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.85rem;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}
/* Con 4 tarjetas, `auto-fill` en una pantalla ancha cabia 3 por fila y dejaba
   una sola, huerfana, en la segunda. Fijar 2 columnas reparte 2 y 2 siempre. */
@media (min-width: 44rem) {
  .farmacias { grid-template-columns: repeat(2, 1fr); }
}
.farmacia {
  background: var(--papel-alto);
  border-radius: var(--radio); padding: 1.25rem 1.3rem;
  box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 0.85rem;
  transition: transform 0.16s, box-shadow 0.16s;
}
.farmacia:active { transform: translateY(1px) scale(0.99); box-shadow: var(--sombra-hundida); }
.farmacia[hidden] { display: none; }
.farmacia__cabeza { display: flex; flex-direction: column; gap: 0.3rem; }
.farmacia__nombre {
  font-family: var(--letra-titulo); font-size: 1.2rem; font-weight: 700;
  letter-spacing: -0.02em; margin: 0;
}
/* "Debería estar abierta", nunca "abierta". La frase completa va aquí y no se
   acorta: la diferencia entre las dos es el proyecto entero. */
.farmacia__horario {
  display: flex; align-items: flex-start; gap: 0.4rem;
  font-size: 0.86rem; color: var(--tinta-media); margin: 0;
}
.farmacia__horario svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 0.15rem;
                         color: var(--tinta-suave); }

.farmacia__donde { font-size: 0.9rem; color: var(--tinta-media); margin: 0; }
.farmacia__zona { color: var(--tinta-suave); font-size: 0.84rem; }
.farmacia__mapa { font-weight: 600; }
.farmacia__marcas { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }

.marquita {
  font-size: 0.72rem; font-weight: 600; padding: 0.22rem 0.65rem;
  border-radius: 999px; background: var(--papel-hondo); color: var(--tinta-media);
}
.marquita--suelta { background: var(--marca-tenue); color: var(--marca-hondo); }
.marquita--doble  { background: var(--verde-tenue); color: var(--verde); }
@media (prefers-color-scheme: dark) { .marquita--suelta { color: var(--marca); } }

/* El sello de "sin verificar" va en TODAS las tarjetas y no se puede quitar
   mientras nadie haya llamado. Es la etiqueta que sostiene la honestidad del
   sitio entero: en cuanto una tarjeta pueda aparecer sin ella, el sitio empieza
   a afirmar cosas que no sabe. */
.sello {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.24rem 0.7rem; border-radius: 999px; border: 1.5px solid currentColor;
}
.sello--sin { color: var(--ambar); background: var(--ambar-tenue); }
.sello--verificada { color: var(--verde); background: var(--verde-tenue); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--letra-texto); font-weight: 700; font-size: 1rem;
  padding: 0.8rem 1.4rem; min-height: 52px;
  border-radius: 999px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform 0.14s, filter 0.14s;
}
.boton svg { width: 20px; height: 20px; flex-shrink: 0; }
.boton:hover { transform: translateY(-1px); filter: saturate(1.15); }
.boton:active { transform: translateY(2px) scale(0.98); box-shadow: var(--sombra-hundida); filter: none; }

/* Llamar es la acción principal de todo el sitio, así que es el único botón lleno
   y va en verde, no en el violeta de marca: verde significa "esto sí se puede
   hacer ahora mismo", y es lo único de la tarjeta que resuelve algo. */
.boton--llamar {
  background: var(--verde); color: #fff; width: 100%;
  box-shadow: var(--sombra-verde); font-variant-numeric: tabular-nums;
}
.boton--llamar:hover { color: #fff; }
@media (prefers-color-scheme: dark) { .boton--llamar { color: #06251f; } .boton--llamar:hover { color: #06251f; } }

.boton--linea {
  background: var(--papel-alto); color: var(--tinta);
  border-color: var(--papel-borde); box-shadow: var(--sombra);
}
.boton--linea:hover { color: var(--tinta); border-color: var(--marca); filter: none; }
.boton--chico { min-height: 44px; padding: 0.55rem 1.05rem; font-size: 0.9rem; font-weight: 600; }

/* ---------- Las que no tienen teléfono: una línea cada una ----------
   La explicación se da UNA vez, en la cabecera de la sección, en vez de repetirla
   35 veces dentro de 35 tarjetas iguales. Eso era lo que convertía la página en un
   muro de 19.000 píxeles de alto en un teléfono.

   Que se vean distintas de las de arriba dice además algo cierto: estas no se
   pueden llamar, y por eso valen menos a las tres de la mañana. */
/* Sin borde ni padding-top: a diferencia de "Las otras N, sin teléfono", esta
   no separa dos bloques, es la primera de la seccion. */
.listado__titulo { font-size: 1.15rem; margin: 0 0 0.7rem; }

.grupo-sin-telefono { margin-top: 2.2rem; }
.grupo-sin-telefono[hidden] { display: none; }
.grupo__titulo {
  font-size: 1.2rem; margin: 0 0 0.4rem;
  padding-top: 1.4rem; border-top: 1px solid var(--papel-borde);
}
.grupo__nota {
  font-size: 0.92rem; color: var(--tinta-media);
  max-width: var(--ancho-texto); margin-bottom: 1.1rem;
}

.filas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
/* En escritorio, 35 barras a lo ancho de --ancho (62rem) dejan el 80% del
   espacio vacio a los lados de cada nombre. `columns` reparte el mismo
   contenido en 2 o 3 columnas de revista sin tocar el marcado de cada fila. */
@media (min-width: 46rem) {
  .filas { display: block; columns: 2; column-gap: 0.7rem; }
  .fila { break-inside: avoid; margin-bottom: 0.4rem; }
}
@media (min-width: 68rem) {
  .filas { columns: 3; }
}
.fila {
  /*
    `flex-direction: row` va escrito aunque parezca el valor por defecto.
    Una fila lleva TAMBIEN la clase `.farmacia` —la necesita el filtro— y esa
    clase es `flex-direction: column`. Las dos reglas tienen la misma fuerza, asi
    que gana la ultima; sin esta linea, el boton del mapa se iba debajo del texto,
    cada fila crecia 60 px y la pagina engordaba mil pixeles largos. No daba
    ningun error: solo un boton en el sitio equivocado, 35 veces.
  */
  display: flex; flex-direction: row; align-items: flex-start; gap: 0.9rem;
  background: var(--papel-alto); box-shadow: var(--sombra);
  border-radius: var(--radio-chico); padding: 0.8rem 0.9rem;
}
.fila[hidden] { display: none; }
.fila__texto { flex: 1; min-width: 0; }
.fila__nombre {
  font-family: var(--letra-titulo); font-size: 1rem; font-weight: 700;
  letter-spacing: -0.01em; margin: 0;
}
.fila__donde { font-size: 0.84rem; color: var(--tinta-media); margin: 0.15rem 0 0; }
.fila__zona { color: var(--tinta-suave); }
/* El horario y el sello comparten línea y se envuelven si no caben. La fila NO se
   parte en dos pisos: con 35 filas, cada piso extra son 40 px que se multiplican
   por 35 y añaden mil cuatrocientos píxeles de página. */
.fila__pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.55rem;
  margin: 0.4rem 0 0;
}
.fila__horario {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.76rem; color: var(--tinta-suave);
}
.fila__horario svg { width: 13px; height: 13px; flex-shrink: 0; }
.fila__pie .sello { font-size: 0.62rem; padding: 0.18rem 0.5rem; border-width: 1px; }
.fila__pie .marquita { font-size: 0.66rem; padding: 0.14rem 0.5rem; }

/* 44 px de lado: esto se toca con el pulgar, medio dormido. Un icono de 20 px
   suelto sería imposible de acertar. */
.fila__mapa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0;
  background: var(--papel-hondo); color: var(--marca-hondo);
  border: 1px solid var(--papel-borde); text-decoration: none;
  transition: border-color 0.14s, background 0.14s;
}
.fila__mapa svg { width: 20px; height: 20px; }
.fila__mapa:hover { border-color: var(--marca); background: var(--marca-tenue); }
@media (prefers-color-scheme: dark) { .fila__mapa { color: var(--marca); } }

/* ---------- Las que cierran de noche ---------- */
.cierran { list-style: none; margin: 1.2rem 0 0; padding: 0;
           display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.cierra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 0.8rem;
  background: var(--coral-tenue); border: 1px solid color-mix(in srgb, var(--coral) 22%, transparent);
  border-radius: var(--radio-chico); padding: 0.7rem 0.95rem; font-size: 0.92rem;
  transition: opacity 0.2s, background 0.2s;
}
.cierra__texto { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.cierra__nombre { font-weight: 600; }
.cierra__hora { color: var(--coral); font-weight: 700; font-size: 0.84rem; white-space: nowrap;
                font-variant-numeric: tabular-nums; }
/* La que ya cerro pesa menos en la pantalla: el color de alarma es para la que
   todavia hace falta vigilar, no para una que lleva horas cerrada. */
.cierra--cerrada { background: var(--papel-hondo); border-color: var(--papel-borde); opacity: 0.75; }
.cierra--cerrada .cierra__hora { color: var(--tinta-suave); }
/* El telefono de las 12 (de las 13) que si lo tienen. Las Caobas no lo tiene y
   por eso el enlace no aparece: no hay boton "Llamar" apuntando a la nada. */
.cierra__telefono {
  display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0;
  padding: 0.4rem 0.75rem; border-radius: 999px; font-weight: 700; font-size: 0.82rem;
  background: var(--papel-alto); color: var(--marca-hondo);
  border: 1px solid var(--papel-borde); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.cierra__telefono svg { width: 15px; height: 15px; flex-shrink: 0; }
.cierra__telefono:hover { border-color: var(--marca); background: var(--marca-tenue); }
@media (prefers-color-scheme: dark) { .cierra__telefono { color: var(--marca); } }

/* ---------- Fuentes ---------- */
.fuentes { margin-bottom: 2rem; }
.fuente {
  background: var(--papel-alto);
  border-radius: var(--radio); padding: 1.2rem 1.3rem; margin-bottom: 0.8rem;
  box-shadow: var(--sombra);
}
.fuente p { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--tinta-media); }
.fuente p:last-child { margin-bottom: 0; }
.fuente code { background: var(--papel-hondo); padding: 0.1rem 0.35rem; border-radius: 5px;
               font-size: 0.85em; }
.fuente--ayuda { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.fuente__monito { width: 4.5rem; height: auto; flex-shrink: 0; filter: drop-shadow(0 6px 10px rgba(22, 24, 29, 0.15)); }
.fuente--ayuda > div { flex: 1; min-width: 12rem; }
.fuente--ayuda h3, .fuente--ayuda p:last-child { margin: 0; }
.fuente--ayuda h3 { margin-bottom: 0.35em; }

.aviso {
  border-left: 3px solid var(--marca); background: var(--marca-tenue);
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  padding: 0.9rem 1.15rem; margin: 0 0 1rem; font-size: 0.95rem;
}
.aviso--calmo { border-color: var(--papel-borde); background: var(--papel-hondo);
                color: var(--tinta-media); }

/* ---------- Pie ---------- */
.pie {
  margin-top: 3rem; padding: 2.4rem 0 3rem;
  border-top: 1px solid var(--papel-borde); background: var(--papel-hondo);
  font-size: 0.9rem; color: var(--tinta-media);
}
.pie__aviso {
  border: 1.5px solid var(--papel-borde); border-radius: var(--radio);
  background: var(--papel-alto); padding: 1.05rem 1.25rem; margin: 0 0 1.2rem;
  color: var(--tinta); font-weight: 500; box-shadow: var(--sombra);
}
.pie__aviso strong { color: var(--marca-hondo); }
@media (prefers-color-scheme: dark) { .pie__aviso strong { color: var(--marca); } }
.pie p:last-child { font-size: 0.85rem; color: var(--tinta-suave); margin: 0; }

/* ---------- Utilidades ---------- */
.solo-con-js { display: none; }
.hay-js .solo-con-js { display: revert; }
.hay-js .buscador { display: block; }
.hay-js .chips { display: flex; }
.hay-js .solo-sin-js { display: none; }

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

@media print {
  .cabecera, .buscador, .chips { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .farmacia { break-inside: avoid; }
  .boton--llamar { background: none !important; color: #000 !important; box-shadow: none;
                   border: 1.5px solid #000; }
}


/* El contacto del pie. Va un punto mas grande que la letra chica de al lado: es lo
   unico de ahi abajo que la gente busca para escribirnos de verdad. */
.pie__contacto {
  margin: 0 0 0.7rem;
  font-size: 0.94rem;
}
.pie__contacto a { font-weight: 600; }