/* RecetApp · estilos escritos primero para celular.
   Un solo punto de quiebre (40rem) para tablet y escritorio. */

/* Tema oscuro morado, fijo: no depende del tema del sistema. */
:root {
  color-scheme: dark;

  --tinta: #f0ecfa;
  --tinta-suave: #a99fc6;
  --fondo: #08060f;
  --tarjeta: #181228;
  --borde: #2f2649;
  --acento: #c3a0ff;
  --acento-fuerte: #7b4dff;
  --acento-fondo: #211738;
  --aviso-fondo: #3a2a66;
  --aviso-tinta: #f3e9ff;
  --error: #ff9fb0;
  --error-fondo: #3a1526;
  --radio: 12px;
  --toque: 44px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* 16px como mínimo: con menos, iOS hace zoom al enfocar el buscador. */
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
  overflow-wrap: break-word;
}

.contenedor {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ---------- encabezado y buscador ---------- */

.encabezado {
  background: var(--tarjeta);
  border-bottom: 1px solid var(--borde);
  padding: 1rem 0 1.25rem;
}

.marca {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.marca__inicio { color: var(--acento); }
.marca__fin { color: var(--tinta); }

.lema {
  margin: 0.25rem 0 1rem;
  color: var(--tinta-suave);
  font-size: 0.95rem;
}

.buscador__etiqueta {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinta-suave);
}

.buscador__campo {
  width: 100%;
  min-height: var(--toque);
  padding: 0.625rem 0.875rem;
  font: inherit;
  color: var(--tinta);
  background: var(--fondo);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
}

.buscador__campo:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}

/* ---------- aviso siempre visible ---------- */

.aviso {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  color: var(--aviso-tinta);
  background: var(--aviso-fondo);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* ---------- estados ---------- */

main { padding-bottom: 2rem; }

.fecha-datos {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

.estado {
  margin: 1.5rem 0;
  color: var(--tinta-suave);
}

.estado--error {
  padding: 1rem;
  color: var(--error);
  background: var(--error-fondo);
  border: 1px solid currentColor;
  border-radius: var(--radio);
}

.estado--error code {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  font-size: 0.9em;
}

/* ---------- chips de principios activos ---------- */

.sugerencias {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borde);
}

.sugerencias__titulo {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-suave);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  min-height: var(--toque);
  padding: 0.5rem 0.875rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--tinta);
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 999px;
  cursor: pointer;
}

.chip:hover { border-color: var(--acento); }

.chip:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 1px;
}

/* ---------- grupos ---------- */

.grupo { margin-top: 2rem; }

.grupo__titulo {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.3;
}

.grupo__resumen {
  margin: 0.25rem 0 0.875rem;
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

.grupo--sin-datos .grupo__titulo { color: var(--tinta-suave); }

.tarjetas {
  display: grid;
  gap: 0.75rem;
}

/* ---------- tarjeta de precio ---------- */

.tarjeta {
  position: relative;
  padding: 0.875rem;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.tarjeta--barata {
  border: 2px solid var(--acento);
  background: var(--acento-fondo);
}

.tarjeta__insignia {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: var(--acento-fuerte);
  border-radius: 999px;
}

.tarjeta__farmacia {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
}

.tarjeta__fecha {
  margin: 0.125rem 0 0.625rem;
  font-size: 0.8125rem;
  color: var(--tinta-suave);
}

.tarjeta__producto {
  margin: 0 0 0.125rem;
  font-size: 0.9375rem;
}

.tarjeta__marca {
  margin: 0;
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

.tarjeta__unidades {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
}

/* La presentación cruda de algunas farmacias es larguísima y repetida:
   se recorta a dos líneas y queda completa en el title. */
.tarjeta__presentacion {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--tinta-suave);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.precios {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--borde);
}

.precios__bloque { display: flex; flex-direction: column; }

.precios__rotulo {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-suave);
}

.precios__valor {
  font-size: 1.0625rem;
  font-weight: 600;
}

.precios__valor--unidad {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--acento);
}

.precios__faltante {
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

.tarjeta__enlace {
  display: inline-block;
  min-height: var(--toque);
  margin-top: 0.5rem;
  padding: 0.625rem 0;
  font-size: 0.875rem;
  color: var(--acento);
}

.tarjeta__nota {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--tinta-suave);
  font-style: italic;
}

/* ---------- pie ---------- */

.pie {
  padding: 1.5rem 0 2.5rem;
  font-size: 0.8125rem;
  color: var(--tinta-suave);
  background: var(--tarjeta);
  border-top: 1px solid var(--borde);
}

.pie p { margin: 0 0 0.5rem; }
.pie__fuente { font-weight: 600; }

/* ---------- tablet y escritorio ---------- */

@media (min-width: 40rem) {
  .marca { font-size: 1.75rem; }
  .lema { font-size: 1rem; }
  .buscador__campo { font-size: 1.0625rem; }
  .aviso { font-size: 0.9375rem; }
  .grupo__titulo { font-size: 1.25rem; }
  .tarjetas {
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  }
}

/* ---------- «Misma sustancia, más barato» ---------- */

.tarjeta { cursor: pointer; }

.tarjeta--abierta {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.tarjeta__comparar {
  display: block;
  width: 100%;
  min-height: var(--toque);
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  color: var(--acento);
  background: transparent;
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
}

.tarjeta__comparar:hover { border-color: var(--acento); }

.tarjeta__comparar:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 1px;
}

.tarjeta__comparar::after {
  content: " ▾";
}

.tarjeta__comparar[aria-expanded="true"]::after {
  content: " ▴";
}

.comparacion {
  margin-top: 0.625rem;
  padding: 0.75rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.comparacion__titulo {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-suave);
}

.comparacion__ahorro {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--acento);
}

.comparacion__detalle {
  margin: 0.125rem 0 0.75rem;
  font-size: 0.875rem;
}

.comparacion__nota {
  margin: 0;
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

.comparacion__opcion {
  padding-top: 0.625rem;
  border-top: 1px solid var(--borde);
}

.comparacion__producto {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.comparacion__marca,
.comparacion__fecha {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--tinta-suave);
}

.comparacion__precio {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.comparacion__enlace {
  display: inline-block;
  min-height: var(--toque);
  margin-top: 0.375rem;
  padding: 0.625rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--acento);
}

/* ---------- portada: mayores ahorros ---------- */

.destacados { margin-top: 1.5rem; }

.destacados__titulo {
  margin: 0;
  font-size: 1.25rem;
}

.destacados__bajada {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  color: var(--tinta-suave);
}

.destacado__veces {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
  color: #ffffff;
  background: var(--acento-fuerte);
  border-radius: 999px;
}

.destacado__mas {
  display: block;
  width: 100%;
  min-height: var(--toque);
  margin-top: 0.75rem;
  padding: 0.625rem 0.875rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  color: var(--acento);
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
}

.destacado__mas:hover { border-color: var(--acento); }

.destacado__mas:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 1px;
}