/* ==========================================================================
   ProspectoYa — estilos
   Estética tipo asistente: tipografía limpia, mucho aire, un único color de
   marca, superficies redondeadas y modo claro/oscuro.
   Sin dependencias: todo con CSS nativo (custom properties + :has, etc.).
   ========================================================================== */

/* --- Tokens: tema claro (por defecto) --- */
:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg-soft: #f5f6f8;
  --bg-blur: rgba(255, 255, 255, 0.82);
  --surface: #ffffff;
  --surface-2: #f1f2f5;
  --border: #e6e7ec;
  --border-strong: #d8dae1;

  --text: #0f1014;
  --text-soft: #545863;
  --text-muted: #8a8f9a;

  --brand: #4d6bfe;
  --brand-strong: #3b57e8;
  --brand-soft: #eef1ff;
  --brand-ring: rgba(77, 107, 254, 0.16);
  --brand-contrast: #ffffff;
  --glow: rgba(77, 107, 254, 0.10);

  --warning-bg: #fff6e6;
  --warning-text: #9a5b00;
  --warning-border: #ffe3b8;
  --danger: #d92d20;

  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 16, 20, 0.05);
  --shadow: 0 6px 20px rgba(15, 16, 20, 0.07), 0 1px 2px rgba(15, 16, 20, 0.04);
  --shadow-lg: 0 20px 48px rgba(15, 16, 20, 0.14);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --medida: 780px;
  /* El renglón cómodo del prospecto y, a partir de él, la ventana del detalle:
     exactamente el renglón más el relleno de la tarjeta, para que el texto la
     llene de lado a lado y no quede hueco (con la columna más ancha el bloque
     parecía descentrado). */
  --medida-texto: 44rem;
  --medida-detalle: calc(var(--medida-texto) + 2.4rem);
  /* Velo del fondo cuando el detalle está abierto */
  --velo: rgba(15, 16, 20, 0.5);
}

/* --- Tokens: tema oscuro --- */
:root[data-tema="oscuro"] {
  color-scheme: dark;

  --bg: #16171b;
  --bg-soft: #1c1d22;
  --bg-blur: rgba(22, 23, 27, 0.82);
  --surface: #1f2026;
  --surface-2: #2a2c33;
  --border: #2e3037;
  --border-strong: #3c3f47;

  --text: #ececf1;
  --text-soft: #b3b7c0;
  --text-muted: #878b96;

  --brand: #8296ff;
  --brand-strong: #6d84ff;
  --brand-soft: #232848;
  --brand-ring: rgba(130, 150, 255, 0.22);
  --brand-contrast: #10121c;
  --glow: rgba(130, 150, 255, 0.10);

  --warning-bg: #2c2418;
  --warning-text: #f0b46b;
  --warning-border: #45351f;
  --danger: #ff7b7b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.38), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 22px 55px rgba(0, 0, 0, 0.55);

  --velo: rgba(0, 0, 0, 0.62);
}

/* --- Base --- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Halo suave de marca en la parte superior, como en las landings de asistentes */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(760px 380px at 50% -8%, var(--glow), transparent 72%);
}

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

svg { width: 100%; height: 100%; }

a { color: var(--brand-strong); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Barra superior --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: var(--medida);
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  background: var(--bg-blur);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Aviso de "sin conexión": lo enseña pwa.js cuando el navegador detecta que no
   hay red. Como es un estado poco frecuente, va como banda discreta sobre el
   fondo del aviso (los mismos colores que el aviso sanitario de la ayuda). */
.aviso-conexion {
  max-width: var(--medida);
  margin: 0 auto;
  padding: 0.55rem 1.25rem;
  font-size: 0.85rem;
  text-align: center;
  color: var(--warning-text);
  background: var(--warning-bg);
  border-bottom: 1px solid var(--warning-border);
}
.aviso-conexion[hidden] { display: none; }

/* Aviso de "hay versión nueva": pwa.js lo enseña cuando el service worker ha
   entrado con un sw.js más reciente. Va fijo abajo, como los avisos de las
   apps, y no recarga solo: el usuario decide cuándo (puede estar leyendo). */
.aviso-version {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: 0.55rem 0.6rem 0.55rem 1rem;
  font-size: 0.9rem;
  color: var(--brand-contrast);
  background: var(--brand);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
}
.aviso-version[hidden] { display: none; }

.aviso-version-boton {
  flex: none;
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-contrast);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

/* Botón de "volver arriba": fijo abajo a la derecha. Lo enseña arriba.js cuando
   se baja por la página y, si el sistema pide menos movimiento, sube de golpe
   en vez de con animación. Es redondo, 38px (más pequeño que el mínimo táctil
   de 44px a propósito: es una acción secundaria y de baja frecuencia). */
.btn-subir {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 25;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 9px;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.btn-subir:hover {
  color: var(--brand-strong);
  border-color: var(--brand);
}
.btn-subir[hidden] { display: none; }

/* Con el aviso de versión abajo (que va centrado y a lo ancho), el botón se
   aparta hacia arriba para que no se tapen */
body:has(.aviso-version:not([hidden])) .btn-subir { bottom: 5rem; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: 10px;
  background: var(--brand);
  color: var(--brand-contrast);
  box-shadow: var(--shadow-sm);
}

.brand-name {
  font-weight: 650;
  letter-spacing: -0.01em;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 9px;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.icon-button:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border-strong);
}

/* El icono que se muestra depende del tema activo */
.icon-sun { display: none; }
.icon-moon { display: block; }
:root[data-tema="oscuro"] .icon-sun { display: block; }
:root[data-tema="oscuro"] .icon-moon { display: none; }

/* Enlaces de la barra superior (Buscador / Ayuda) */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.topbar-link {
  padding: 0.45rem 0.8rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: color 0.15s ease, background 0.15s ease;
}
.topbar-link:hover {
  color: var(--text);
  background: var(--surface-2);
}

/* --- Contenedor principal --- */
.app {
  width: 100%;
  max-width: var(--medida);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

/* --- Hero --- */
.hero {
  padding: 2.5rem 0 1.75rem;
  text-align: center;
  animation: aparecer 0.4s ease both;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* Con el relleno simétrico, lo que se ve dentro del badge (el icono y el
     texto) queda centrado: medido, 13.8px de aire a cada lado. Con 0.65rem a la
     izquierda se iba 1.2px hacia la izquierda (11.4 vs 13.8). */
  padding: 0.35rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-soft);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.hero-badge svg { width: 14px; height: 14px; color: var(--brand); }

.hero h1 {
  margin: 1.1rem 0 0;
  font-size: clamp(1.7rem, 4.4vw, 2.5rem);
  line-height: 1.18;
  font-weight: 680;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.hero-text {
  max-width: 34rem;
  margin: 0.9rem auto 0;
  color: var(--text-soft);
  font-size: 1rem;
  text-wrap: pretty;
}

/* --- Buscador (composer) --- */
.search-section {
  /* La animación de entrada crea un stacking context en esta sección, así que
     el z-index del desplegable (#search-suggestions) queda encerrado dentro.
     Con un z-index propio, toda la sección (y su desplegable) se pinta por
     encima de las secciones siguientes —resultados y ficha, que también
     animan— y por debajo de la barra superior (z-index 20). */
  position: relative;
  z-index: 3;
  animation: aparecer 0.45s ease 0.05s both;
}

.composer-wrap { position: relative; }

.composer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.45rem 0.45rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
  /* Sin el zoom por doble toque al pulsar el buscador o sus chips (no afecta al
     pellizco, que sigue funcionando para ampliar) */
  touch-action: manipulation;
}
.composer:hover { border-color: var(--brand); }
.composer:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-ring), var(--shadow);
}

.composer-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}
.composer:focus-within .composer-icon { color: var(--brand); }

#search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.7rem 0;
  font: inherit;
  /* Los navegadores móviles (Safari en iOS, entre otros) amplían la página al
     enfocar un campo si su tamaño de letra es menor de 16px, y eso al escribir
     resulta muy molesto. Se fija en px —y no heredado— para que no dependa de
     ningún contenedor: max(16px, 1rem) mantiene la proporción si algún día se
     sube el tamaño base, pero nunca baja del mínimo. En móvil se deja un poco
     por encima (ver media query). */
  font-size: max(16px, 1rem);
  color: inherit;
  background: transparent;
  border: 0;
}
#search-input:focus { outline: none; }

.composer-submit {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 10px;
  color: var(--brand-contrast);
  background: var(--brand);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.16s ease, transform 0.12s ease;
}
.composer-submit:hover { background: var(--brand-strong); }
.composer-submit:active { transform: scale(0.95); }

/* Sin texto no hay nada que buscar: el botón de la flecha se apaga
   (mismo patrón que ChatGPT o DeepSeek). */
.composer-submit:disabled {
  color: var(--text-muted);
  background: var(--surface-2);
  cursor: not-allowed;
}
.composer-submit:disabled:hover { background: var(--surface-2); }
.composer-submit:disabled:active { transform: none; }

/* --- Chips de ejemplo --- */
.search-examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-size: 0.92rem;
}
.search-examples-label { color: var(--text-muted); }

.chip {
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 0.92rem;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.chip:hover {
  color: var(--brand-strong);
  border-color: var(--brand);
  background: var(--brand-soft);
}
.chip:active { transform: scale(0.97); }

/* --- Mi botiquín (medicamentos guardados, ver app.js) --- */
/* Mismo patrón que "Filtros": un botón que despliega un panel debajo, para
   no ocupar sitio en pantalla cuando no hace falta (decidido el 23/09/2026,
   tras verlo siempre visible con la lista inline). */
.botiquin-section { margin-top: 0.9rem; }

.botiquin-boton {
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.botiquin-boton:hover { color: var(--text); border-color: var(--brand); }
.botiquin-boton[aria-expanded="true"] {
  color: var(--brand-strong);
  border-color: var(--brand);
  background: var(--brand-soft);
}

.botiquin-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
  animation: aparecer 0.2s ease both;
}
/* Igual que .filtros-panel: con su propio display, el atributo hidden no
   basta por sí solo (ver AGENTS.md). */
.botiquin-lista[hidden] { display: none; }

.botiquin-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.3rem 0.3rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.botiquin-item-abrir {
  padding: 0;
  font: inherit;
  font-size: 0.92rem;
  color: var(--text-soft);
  background: none;
  border: 0;
  cursor: pointer;
}
.botiquin-item-abrir:hover { color: var(--brand-strong); }

.botiquin-item-quitar {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.botiquin-item-quitar:hover { color: var(--warning-text); background: var(--warning-bg); }

/* --- Autocompletado --- */
.suggestions-list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 0.45rem);
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  max-height: 21rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  animation: aparecer 0.16s ease both;
}
.suggestions-list li {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.suggestions-list li:hover { background: var(--surface-2); }
/* Opción recorrida con ↑ / ↓: mismo realce que al pasar el ratón */
.suggestions-list li.is-active { background: var(--surface-2); }

.suggestion-name {
  font-size: 0.94rem;
  font-weight: 550;
  line-height: 1.35;
}
.suggestion-lab {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* --- Filtros combinables --- */
.filters-section { margin-top: 0.9rem; }

.filtros-boton {
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.filtros-boton:hover { color: var(--text); border-color: var(--brand); }
/* Abierto, o con algún filtro puesto (.activo lo pone actualizarBotonFiltros():
   un <select> no refleja su valor elegido como atributo, así que no hay forma
   de saberlo solo con CSS). */
.filtros-boton[aria-expanded="true"],
.filtros-boton.activo {
  color: var(--brand-strong);
  border-color: var(--brand);
  background: var(--brand-soft);
}

.filtros-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.85rem;
  margin-top: 0.7rem;
  padding: 0.9rem 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  animation: aparecer 0.2s ease both;
}
/* Sin esta regla el panel salía SIEMPRE abierto: display:flex de arriba le
   gana al atributo hidden (misma trampa que ya pasó con el badge de
   suministro, ver AGENTS.md). Detectado con una captura real. */
.filtros-panel[hidden] { display: none; }

.filtros-campo {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.filtros-campo select,
.filtros-campo input {
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.filtros-campo select:focus,
.filtros-campo input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.filtros-campo input { width: 11rem; }

.filtros-limpiar {
  padding: 0.45rem 0;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}
.filtros-limpiar:hover { color: var(--brand-strong); }

/* --- Resultados --- */
.results-section { padding-top: 1.75rem; }

.results-status {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.results-status.error { color: var(--danger); }

.results-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.results-list:empty { display: none; }

.results-list li {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  animation: aparecer 0.25s ease both;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.results-list li:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.results-list li.active {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: inset 3px 0 0 var(--brand);
}

.result-name {
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.result-lab {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Código nacional del envase (llega de /presentaciones, a veces en diferido) */
.result-cn {
  margin-top: 0.2rem;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.result-cn[hidden] { display: none; }
.result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.result-tag {
  padding: 0.12rem 0.55rem;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-soft);
  background: var(--surface-2);
  border-radius: var(--radius-pill);
}
.result-tag-receta { color: var(--brand-strong); background: var(--brand-soft); }
.result-tag-efg { color: var(--brand-strong); background: var(--brand-soft); }
.result-tag-nocomerc {
  color: var(--warning-text);
  background: var(--warning-bg);
}

/* --- Detalle del medicamento --- */
/* --- Ventana del detalle (prospecto / ficha técnica) --- */
/* Es un <dialog> nativo abierto con showModal(): el fondo se oscurece, lo de
   detrás no se puede pulsar, el foco se queda dentro y Esc cierra. El ancho es
   justo el del renglón cómodo (--medida-detalle), así que el texto del
   prospecto llega a los dos lados de su tarjeta. */
.dialogo-detalle {
  width: min(100% - 2rem, var(--medida-detalle));
  max-height: min(92dvh, 62rem);
  margin: auto; /* centrada en la pantalla */
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  overflow: visible; /* que la sombra del panel no se recorte */
  animation: aparecer 0.28s ease both;
}
.dialogo-detalle::backdrop { background: var(--velo); }
/* abrirDetalle() lo enfoca a él (no a la ✕) para que showModal() no encienda
   el anillo de foco nada más abrirse; como destino programático no necesita
   su propio anillo (el velo y el panel ya avisan de que hay algo modal). */
.dialogo-detalle:focus-visible { outline: none; }

.dialogo-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: inherit;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden; /* las esquinas redondeadas recortan lo que va dentro */
}

/* Lo que se desplaza es sólo el contenido: la ✕ y las esquinas se quedan fijas */
.dialogo-cuerpo {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem 1.35rem 1.6rem;
}

.dialogo-cerrar {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 7px;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.dialogo-cerrar:hover {
  color: var(--brand-strong);
  border-color: var(--brand);
}

/* El relleno de la derecha deja sitio a la ✕, que va encima del título */
.detail-header { margin-bottom: 1.25rem; padding-right: 3rem; }

.detail-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.detail-titulo-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.detail-titulo-row h2 { flex: 1 1 auto; }

.detail-header h2 {
  margin: 0 0 0.15rem;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.botiquin-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 6px;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.botiquin-toggle:hover { color: var(--brand-strong); background: var(--brand-soft); }
/* Guardado: la estrella se rellena y se queda del color de marca */
.botiquin-toggle[aria-pressed="true"] { color: var(--brand); }
.botiquin-toggle[aria-pressed="true"] svg { fill: currentColor; }

#detail-lab {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-soft);
}

/* Códigos nacionales (uno por envase) del medicamento abierto */
.detail-cn {
  margin: 0.35rem 0 0;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}
.detail-cn[hidden] { display: none; }

/* --- Badges --- */
.badge {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.22rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
}
.badge-warning {
  color: var(--warning-text);
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
}
.badge-info {
  color: var(--brand-strong);
  background: var(--brand-soft);
  border: 1px solid var(--brand-ring);
}
/* Los dos badges llevan `hidden` en el HTML por defecto (solo salen si el
   medicamento tiene psum o triangulo): sin esta regla, el `display` de arriba
   se impone al atributo y saldrían SIEMPRE, tuviera o no el medicamento el
   problema en cuestión. */
.badge[hidden] { display: none; }

/* --- Resumen rápido --- */
.quick-summary {
  margin: 0 0 1.75rem;
  padding: 1.1rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  animation: aparecer 0.3s ease both;
}

.quick-summary-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.quick-summary-title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

.quick-summary-loading,
.cargando {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* El resumen lleva 5 apartados como mucho, así que en cuanto caben dos en una
   fila siempre sobra una: se reparten en filas (2+2+1, 3+2…) y las incompletas
   van centradas. Con `grid` la última fila se quedaba pegada a la izquierda y
   el bloque entero parecía descentrado. */
.quick-summary-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}

.quick-summary-card {
  position: relative;
  /* Se reparten el ancho que hay (y en el móvil ocupan la fila entera), pero
     con tope: así una fila de una sola tarjeta no se estira de lado a lado. */
  flex: 1 1 15rem;
  max-width: 21rem;
  padding: 0.85rem 0.95rem 0.8rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.quick-summary-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--brand);
}
.quick-summary-card-embarazo::before { background: #d773b4; }
.quick-summary-card-conduccion::before { background: #8b7bf0; }
.quick-summary-card-contraindicaciones::before { background: var(--danger); }

.quick-summary-card-title {
  margin: 0 0 0.3rem;
  font-size: 0.93rem;
  font-weight: 620;
  letter-spacing: -0.005em;
}
.quick-summary-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-soft);
}
.quick-summary-card .quick-summary-source {
  margin: 0.55rem 0 0;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.quick-summary-note {
  margin: 0.85rem 0 0;
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* --- Medicamentos equivalentes (mismo principio activo, dosis y forma) --- */
.equivalentes { margin: 0 0 1.75rem; }

.equivalentes-title {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Mismo tono de aviso que el badge de seguimiento adicional: informa, no alarma */
.equivalentes-nota {
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.82rem;
  color: var(--brand-strong);
  background: var(--brand-soft);
  border-radius: var(--radius-sm);
}

.equivalentes-lista {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.equivalentes-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  text-align: left;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.equivalentes-item:hover { border-color: var(--brand); background: var(--brand-soft); }

.equivalentes-item-nombre { font-size: 0.9rem; font-weight: 600; letter-spacing: -0.005em; }
.equivalentes-item-lab { font-size: 0.8rem; color: var(--text-muted); }

/* --- Pestañas (segmented control) + enlace al documento oficial --- */
.doc-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin-bottom: 1rem;
}

.doc-tabs {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.25rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

/* Enlace al PDF/HTML oficial de la pestaña activa (campo docs[] del
   medicamento); actualizarEnlaceDocumentoOficial() lo mueve al abrir el
   detalle y al cambiar de pestaña, y lo oculta si ese documento no existe. */
.detail-doc-oficial {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  white-space: nowrap;
}
.detail-doc-oficial:hover { color: var(--brand-strong); text-decoration: underline; }

.doc-tab {
  padding: 0.42rem 1.05rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--text-soft);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.doc-tab:hover { color: var(--text); }
.doc-tab.active {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* --- Acordeón --- */
.accordion {
  display: grid;
  gap: 0.5rem;
}

.accordion-item {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.accordion-item:hover { border-color: var(--border-strong); }
.accordion-item:has(.accordion-body.open) {
  border-color: var(--brand);
  box-shadow: var(--shadow-sm);
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  font-size: 0.96rem;
  font-weight: 550;
  cursor: pointer;
  transition: background 0.15s ease;
}
.accordion-header:hover { background: var(--surface-2); }
.accordion-header:focus-visible { outline-offset: -2px; }

.accordion-chevron {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: transform 0.22s ease, color 0.15s ease;
}
.accordion-item:has(.accordion-body.open) .accordion-header { background: var(--surface-2); }
.accordion-item:has(.accordion-body.open) .accordion-chevron {
  transform: rotate(180deg);
  color: var(--brand);
}

.accordion-body {
  display: none;
  padding: 0.35rem 1.1rem 1.15rem;
  border-top: 1px solid var(--border);
  overflow-x: auto;
  overflow-wrap: anywhere;
}
.accordion-body.open { display: block; }

/* El contenido procede de CIMA: se le quitan los estilos inline desde app.js
   y aquí se le da la tipografía del sitio. */
.accordion-body p {
  margin: 0.6rem 0;
  font-size: 0.94rem;
  color: var(--text-soft);
}
.accordion-body strong,
.accordion-body b { color: var(--text); font-weight: 600; }
.accordion-body u { text-decoration-color: var(--brand); }

.accordion-body h1,
.accordion-body h2,
.accordion-body h3,
.accordion-body h4 {
  margin: 1.15rem 0 0.45rem;
  font-size: 1rem;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.accordion-body ul,
.accordion-body ol { margin: 0.6rem 0; padding-left: 1.25rem; }
.accordion-body li {
  margin: 0.25rem 0;
  font-size: 0.94rem;
  color: var(--text-soft);
}
.accordion-body a { color: var(--brand-strong); }

.accordion-body table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0.85rem 0;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.accordion-body th,
.accordion-body td {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  text-align: left;
}
.accordion-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

/* --- Spinner de carga --- */
.cargando::before,
.quick-summary-loading::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: girar 0.75s linear infinite;
}

/* --- Botón secundario --- */
.btn-secondary {
  margin-top: 1.25rem;
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--brand-strong);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-secondary:hover { background: var(--brand-soft); border-color: var(--brand); }

/* --- Pie --- */
.site-footer {
  max-width: var(--medida);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.site-footer p { margin: 0; }

/* --- Página de ayuda (ayuda.html) --- */
.ayuda {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.25rem 0 2rem;
  animation: aparecer 0.4s ease both;
}

.ayuda h1 {
  margin: 0 0 1.1rem;
  font-size: clamp(1.65rem, 4.2vw, 2.25rem);
  line-height: 1.2;
  font-weight: 680;
  letter-spacing: -0.025em;
}

.ayuda h2 {
  margin: 2.4rem 0 0.75rem;
  padding-top: 1.4rem;
  font-size: 1.22rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  border-top: 1px solid var(--border);
}
.ayuda h2:first-of-type { margin-top: 1.6rem; border-top: 0; padding-top: 0; }

.ayuda h3 {
  margin: 1.5rem 0 0.4rem;
  font-size: 1.02rem;
  font-weight: 620;
}

.ayuda p { margin: 0 0 0.9rem; color: var(--text-soft); }
.ayuda-entrada { font-size: 1.02rem; }
.ayuda ul { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--text-soft); }
.ayuda li { margin-bottom: 0.45rem; }
.ayuda li::marker { color: var(--text-muted); }
.ayuda strong { color: var(--text); font-weight: 620; }
.ayuda a { color: var(--brand-strong); }

.ayuda code {
  padding: 0.1rem 0.35rem;
  font-size: 0.86em;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  border-radius: 6px;
}

/* Teclas (↑, Enter, Ctrl+F5…) */
.ayuda .kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.1rem 0.4rem;
  font-family: inherit;
  font-size: 0.82em;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
}

/* Aviso destacado (sin cambiar de color el texto de dentro) */
.ayuda .nota {
  padding: 0.75rem 0.95rem;
  font-size: 0.92rem;
  background: var(--brand-soft);
  border-radius: var(--radius-sm);
}
.ayuda .aviso {
  margin-top: 1.75rem;
  padding: 0.95rem 1.1rem;
  color: var(--warning-text);
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-sm);
}
.ayuda .aviso strong { color: inherit; }

.ayuda-tabla {
  width: 100%;
  margin: 0 0 1.5rem;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.ayuda-tabla caption {
  margin-bottom: 0.6rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
}
.ayuda-tabla th,
.ayuda-tabla td {
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.ayuda-tabla th { color: var(--text); font-weight: 620; }
.ayuda-tabla td { color: var(--text-soft); }
.ayuda-tabla th:first-child,
.ayuda-tabla td:first-child { padding-left: 0; }

.ayuda-repo { margin-top: 0.75rem; font-size: 1.02rem; }
.ayuda-repo a { font-weight: 600; }

/* Enlace de vuelta (va arriba del todo, en la ayuda) */
.ayuda-volver { margin: 0 0 1.25rem; font-size: 0.92rem; }
.ayuda-volver a { font-weight: 500; text-decoration: none; }
.ayuda-volver a:hover { text-decoration: underline; }

/* --- Animaciones --- */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* --- Scrollbar discreta --- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--radius-pill);
}

/* --- Pantallas grandes: se aprovecha el ancho ----------------------------- */
/* Hasta 1179px la columna de --medida (780px) va sobrada. A partir de ahí se
   ensancha el contenedor y los resultados pasan a una rejilla de varias
   columnas: la pantalla ancha se usa para ver más resultados de una vez.
   El detalle no entra aquí: se abre en su ventana (--medida-detalle), así que
   el renglón del prospecto mide siempre lo mismo. */
@media (min-width: 1180px) {
  :root { --medida: 1060px; }

  /* Los resultados, en varias columnas */
  .results-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

/* Y si la pantalla es enorme, más ancho */
@media (min-width: 1500px) {
  :root { --medida: 1260px; }
  .ayuda { max-width: 52rem; }
}

@media (min-width: 1900px) {
  :root { --medida: 1400px; }
}

/* --- Móvil --- */
@media (max-width: 640px) {
  /* --- El bloque de arriba, centrado en la pantalla ---
     En un móvil la página se quedaba pegada al techo: el hero y el buscador
     ocupaban el tercio de arriba y debajo sobraba media pantalla vacía. El body
     pasa a ser una columna con el alto de la pantalla y #app se queda con el
     hueco libre. */
  body {
    display: flex;
    flex-direction: column;
    /* dvh y no vh: en el móvil la barra del navegador cuenta en vh y el bloque
       saldría por debajo del centro que se ve. dvh se ajusta al alto visible. */
    min-height: 100dvh;
  }
  .app {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1rem 3rem;
  }
  /* El hueco de arriba estaba topado por el margen automático (se repartía a
     partes iguales con el de abajo) y, aun equilibrado, 200px y pico de blanco
     antes de llegar al buscador seguía pareciendo mucho (medido con Chrome a
     390x844: 213px arriba, 235px abajo). Ahora, en el estado de partida (sin
     lista y sin aviso), el margen de arriba es un valor fijo y pequeño —ya no
     crece con el alto de la pantalla— y solo el de abajo sigue siendo
     automático: se lleva TODO el hueco sobrante, no la mitad (medido: 100px
     arriba a cualquier alto, frente a 369,7px abajo a 844px). En cuanto hay
     lista o aviso el margen fijo desaparece (vuelve a 0, el valor por
     defecto) y el margen automático de abajo vale 0 en cuanto el contenido no
     cabe, así que con resultados no hay nada que desplazar: la página se ve
     como siempre y nada queda fuera de la vista (con justify-content: center
     el principio del contenido se iría por encima del borde y no se podría
     leer). */
  .app > .results-section { margin-bottom: auto; }
  /* Estado de partida (sin lista y sin aviso): la sección de resultados no
     enseña nada, así que se queda sin su aire de arriba y el bloque de arriba
     acaba justo bajo el buscador, sin un hueco de más antes del margen
     automático. Y el hero, en ese mismo estado, lleva el margen de arriba
     fijo (ver arriba); con lista o aviso no hay regla que lo toque, así que
     se queda en su valor por defecto (0) y el bloque vuelve pegado al topbar. */
  .results-section:not(:has(.results-list li)):not(:has(.results-status:not([hidden]))) {
    padding-top: 0;
  }
  .app:not(:has(.results-list li)):not(:has(.results-status:not([hidden]))) > .hero {
    margin-top: 4rem;
  }
  /* El halo de marca (body::before) va fijo al viewport: en el escritorio
     queda bien porque el hero está pegado arriba, pero aquí el bloque de
     arriba se centra con margin-top:auto y el halo se queda huérfano en el
     hueco vacío de encima, sin tocar ni el badge ni el titular (se ve al
     comparar una captura con y sin este cambio). Se apaga el halo fijo y se
     pone uno propio en el hero: al ser parte de su caja, viaja con él se
     centre donde se centre, sin tener que adivinar cuánto hueco sobra (eso
     depende del alto del móvil y de si los chips ocupan una fila o dos). Se
     deja bleed hacia arriba para suavizar también el aire que queda encima
     del badge, aunque el hueco grande de abajo se quede vacío: llenarlo del
     todo significaría tocar el reparto por partes iguales de los márgenes
     automáticos, que es la geometría ya fijada del centrado. */
  body::before { content: none; }
  .hero::before {
    content: "";
    position: absolute;
    top: -3rem;
    left: 0;
    right: 0;
    height: 14rem;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(220px 150px at 50% 35%, var(--glow), transparent 72%);
  }
  .topbar { padding: 0.7rem 1rem; }
  .hero { position: relative; padding: 1.75rem 0 1.25rem; }
  .hero h1 { font-size: 1.65rem; }
  /* El buscador, más bajo: el relleno del campo y el del propio compositor
     bajan, así que el alto lo marca el botón (38px) y el rectángulo se queda
     en 56px (medido; antes 66px). El campo sigue pasando de los 40px de alto
     que exige test-movil.js, para no quedar apretado al escribir. */
  .composer { padding: 0.3rem 0.3rem 0.3rem 0.85rem; border-radius: var(--radius-lg); }
  /* Un poco por encima de 16px: evita el zoom al enfocar el campo en los
     navegadores móviles que aplican el límite de forma estricta */
  #search-input { padding: 0.55rem 0; font-size: max(17px, 1rem); }
  .composer-submit { width: 38px; height: 38px; padding: 9px; }
  /* El resumen ya se pone solo a una tarjeta por fila (15rem de base): aquí
     sólo hace falta que ocupen el ancho entero. */
  .quick-summary-card { max-width: none; }
  .doc-tabs { width: 100%; }
  .doc-tab { flex: 1; }
  /* El detalle, a pantalla completa: en el móvil una ventana centrada deja
     franjas de fondo y desperdicia altura. */
  .dialogo-detalle {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
  }
  .dialogo-panel {
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .dialogo-cuerpo { padding: 1.1rem 1rem 1.5rem; }
  .dialogo-cerrar { top: 0.5rem; right: 0.5rem; }
  .detail-header { padding-right: 2.6rem; }
}

/* --- Accesibilidad: menos movimiento --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}