/* ============================================================
   LEGAL.CSS — Páginas legales, banner de cookies y formularios
   CuponPass — Directorio de Empresas

   Un texto legal que no se puede leer no informa a nadie, y el deber de
   información exige que la persona pueda ENTENDER lo que acepta. Por eso
   aquí se cuidan tres cosas concretas: ancho de línea corto, contraste
   suficiente y tablas que no se salen en el teléfono.
   ============================================================ */

.legal-pagina {
  padding: var(--space-6, 48px) 0 var(--space-8, 80px);
  background: var(--color-bg, #fff);
}

.legal-pagina .container {
  max-width: 820px;
}

/* ── Navegación entre documentos ───────────────────────────── */

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-5, 32px);
  padding-bottom: var(--space-3, 16px);
  border-bottom: 1px solid var(--color-border-2, #e5e7eb);
}

.legal-nav a {
  font-size: 0.82rem;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-bg-2, #f9fafb);
  color: var(--color-text-2, #4b5563);
  text-decoration: none;
  border: 1px solid var(--color-border-2, #e5e7eb);
  transition: background .15s, color .15s;
}

.legal-nav a:hover { background: var(--color-border-2, #e5e7eb); }

.legal-nav a.activo {
  background: var(--color-indigo-2, #2563eb);
  border-color: var(--color-indigo-text, #2563eb);
  color: #fff;
  font-weight: 600;
}

/* ── Cuerpo del documento ──────────────────────────────────── */

.legal-contenido {
  /* ~70 caracteres por línea: por debajo de eso el ojo salta de línea
     y por encima cuesta encontrar el principio de la siguiente. */
  max-width: 68ch;
  color: var(--color-text-1, #111827);
  line-height: 1.7;
  font-size: 0.95rem;
}

.legal-contenido h1 {
  font-size: 1.75rem;
  font-weight: 800;
  margin: 0 0 8px;
  line-height: 1.25;
}

.legal-contenido h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: var(--space-5, 32px) 0 var(--space-2, 12px);
  padding-top: var(--space-3, 16px);
  border-top: 1px solid var(--color-border-2, #e5e7eb);
}

.legal-contenido h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: var(--space-4, 24px) 0 8px;
  color: var(--color-text-1, #111827);
}

.legal-contenido p { margin: 0 0 var(--space-3, 16px); }

.legal-contenido ul,
.legal-contenido ol {
  margin: 0 0 var(--space-3, 16px);
  padding-left: var(--space-4, 24px);
}

.legal-contenido li { margin-bottom: 8px; }

.legal-contenido a {
  color: var(--color-indigo-text, #2563eb);
  text-decoration: underline;
}

.legal-contenido hr {
  border: none;
  border-top: 1px solid var(--color-border-2, #e5e7eb);
  margin: var(--space-5, 32px) 0 var(--space-3, 16px);
}

.legal-meta {
  font-size: 0.8rem;
  color: var(--color-text-3, #6b7280);
  margin-bottom: var(--space-4, 24px);
}

.legal-nota {
  font-size: 0.85rem;
  color: var(--color-text-2, #4b5563);
  background: var(--color-bg-2, #f9fafb);
  border-left: 3px solid var(--color-indigo-2, #2563eb);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
}

/* ── Resumen destacado ─────────────────────────────────────── */

.legal-resumen {
  background: var(--color-bg-2, #f9fafb);
  border: 1px solid var(--color-border-2, #e5e7eb);
  border-radius: 14px;
  padding: var(--space-4, 24px);
  margin-bottom: var(--space-5, 32px);
}

.legal-resumen h2 {
  margin: 0 0 12px;
  border: none;
  padding: 0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-3, #6b7280);
}

.legal-resumen ul { margin-bottom: 12px; }

/* Compromiso concreto que el cliente puede exigir. Se destaca a propósito:
   una garantía escondida en un párrafo no tranquiliza a nadie, y si está
   escrita hay que cumplirla igual. */
.legal-destacado {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-left: 4px solid #16a34a;
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 0 0 var(--space-4, 24px);
}

.legal-destacado > strong {
  display: block;
  color: #14532d;
  font-size: .95rem;
  margin-bottom: 6px;
}

.legal-destacado p { margin: 0 !important; font-size: .88rem; color: #14532d; }

/* ── Separación por público ────────────────────────────────────
   Dos colores distintos y constantes en todo el sitio: azul para el
   paciente, ámbar para la clínica. Así, de un vistazo y sin leer, se
   sabe si el bloque te habla a ti o al otro. */

.legal-audiencia {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: var(--space-4, 24px);
  font-size: 0.85rem;
  line-height: 1.55;
  border-left: 4px solid;
}

.legal-audiencia.para-paciente { background: #eff6ff; border-color: #2563eb; color: #1e3a8a; }
.legal-audiencia.para-empresa  { background: #fffbeb; border-color: #d97706; color: #78350f; }
.legal-audiencia strong { font-size: 0.9rem; }
.legal-audiencia a { color: inherit; font-weight: 600; }

.legal-selector-audiencia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 0 0 var(--space-4, 24px);
}

/* Son <button> y no <a> a propósito: un href="#seccion" reescribiría la ruta
   del SPA y mostraría un 404. Se les quita la apariencia de botón para que
   sigan leyéndose como tarjetas. */
.legal-selector-audiencia button {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid;
  text-align: left;
  width: 100%;
  font-family: inherit;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}

.legal-selector-audiencia button:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.legal-selector-audiencia button:focus-visible {
  outline: 2px solid var(--color-indigo-2, #2563eb);
  outline-offset: 2px;
}
.legal-selector-audiencia .para-paciente { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.legal-selector-audiencia .para-empresa  { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.legal-selector-audiencia strong { font-size: 0.92rem; }
.legal-selector-audiencia span { font-size: 0.78rem; opacity: .85; line-height: 1.4; }

/* La sección recibe el foco al saltar a ella (ver LegalView.irASeccion). Un
   contorno grueso alrededor de medio documento distrae, así que se marca con
   un realce suave del borde lateral que ya tiene. */
.legal-bloque-audiencia:focus { outline: none; }
.legal-bloque-audiencia:focus-visible { outline: none; border-left-width: 7px; }

.legal-bloque-audiencia {
  border-left: 4px solid;
  padding: 4px 0 4px 18px;
  margin: 0 0 var(--space-5, 32px);
  /* El desplazamiento con ancla deja el título pegado al borde superior;
     este margen lo separa para que se lea desde la primera línea. */
  scroll-margin-top: 80px;
}

.legal-bloque-audiencia.para-paciente { border-color: #2563eb; }
.legal-bloque-audiencia.para-empresa  { border-color: #d97706; }

.legal-bloque-etiqueta {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 12px !important;
}

.legal-bloque-audiencia.para-paciente .legal-bloque-etiqueta { color: #2563eb; }
.legal-bloque-audiencia.para-empresa  .legal-bloque-etiqueta { color: #b45309; }

.legal-nav-otro {
  margin-left: auto;
  font-style: italic;
  opacity: .8;
}

/* ── Aviso de borrador ─────────────────────────────────────── */

.legal-borrador {
  background: #fef2f2;
  border: 2px solid #dc2626;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: var(--space-5, 32px);
  color: #7f1d1d;
}

.legal-borrador strong { display: block; margin-bottom: 6px; font-size: 0.95rem; }
.legal-borrador p { margin: 0; font-size: 0.85rem; line-height: 1.55; }
.legal-borrador code {
  background: rgba(127, 29, 29, .1);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.85em;
}

/* ── Tablas ────────────────────────────────────────────────── */

.legal-tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-4, 24px);
  font-size: 0.85rem;
  /* En el teléfono la tabla se desplaza sola en vez de romper la página. */
  display: block;
  overflow-x: auto;
  white-space: normal;
}

.legal-tabla th,
.legal-tabla td {
  border: 1px solid var(--color-border-2, #e5e7eb);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  min-width: 120px;
}

.legal-tabla th {
  background: var(--color-bg-2, #f9fafb);
  font-weight: 700;
  color: var(--color-text-1, #111827);
}

/* ── Formulario de derechos ────────────────────────────────── */

.legal-form fieldset {
  border: 1px solid var(--color-border-2, #e5e7eb);
  border-radius: 12px;
  padding: var(--space-3, 16px) var(--space-4, 24px) var(--space-4, 24px);
  margin: 0 0 var(--space-4, 24px);
}

.legal-form legend {
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0 8px;
}

.legal-form label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin: var(--space-3, 16px) 0 6px;
}

.legal-form .form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border-2, #d1d5db);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.92rem;
}

.legal-form .opcional { font-weight: 400; color: var(--color-text-3, #6b7280); }

.legal-ayuda {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-3, #6b7280);
  margin-top: 6px;
  line-height: 1.5;
}

.legal-opcion {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0 !important;
  padding: 10px 12px;
  border: 1px solid var(--color-border-2, #e5e7eb);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 400 !important;
  transition: border-color .15s, background .15s;
}

.legal-opcion:hover { border-color: var(--color-indigo-text, #2563eb); background: var(--color-bg-2, #f9fafb); }

.legal-opcion input { margin-top: 3px; flex-shrink: 0; }

.legal-opcion span { font-size: 0.88rem; line-height: 1.5; }

.legal-opcion small {
  display: block;
  color: var(--color-text-3, #6b7280);
  font-size: 0.8rem;
  margin-top: 2px;
}

/* Foco visible para quien navega con teclado: sin esto, quien no usa
   ratón no sabe dónde está parado dentro del formulario. */
.legal-opcion:focus-within {
  outline: 2px solid var(--color-indigo-2, #2563eb);
  outline-offset: 2px;
}

.legal-exito {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 12px;
  padding: var(--space-4, 24px);
  color: #14532d;
}

.legal-exito h2 { margin: 0 0 10px; border: none; padding: 0; font-size: 1.1rem; }

.legal-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 12px 16px;
  color: #991b1b;
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ── Consentimientos dentro de los formularios de compra ───── */

.consent-bloque {
  border: 1px solid var(--color-border-2, #e5e7eb);
  border-radius: 12px;
  padding: var(--space-3, 16px);
  margin-bottom: var(--space-4, 24px);
  background: var(--color-bg-2, #f9fafb);
}

.consent-bloque > h4 {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-3, #6b7280);
  margin: 0 0 10px;
}

.consent-casilla {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  margin-bottom: 8px;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border-2, #e5e7eb);
  border-radius: 10px;
  cursor: pointer;
}

.consent-casilla:last-child { margin-bottom: 0; }

.consent-casilla:focus-within {
  outline: 2px solid var(--color-indigo-2, #2563eb);
  outline-offset: 1px;
}

.consent-casilla input { margin-top: 3px; flex-shrink: 0; }

.consent-casilla span {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text-1, #111827);
}

.consent-casilla a { color: var(--color-indigo-text, #2563eb); text-decoration: underline; }

/* El selector lleva delante .consent-casilla a propósito: la regla
   `.consent-casilla span` de arriba pesa más que `.consent-requerido` a secas
   y le imponía el color del texto normal. En modo noche eso dejaba la palabra
   "Obligatorio" en blanco sobre el rosa de la etiqueta, o sea invisible justo
   en la casilla que hay que marcar para poder registrarse. */
.consent-casilla .consent-requerido,
.consent-requerido {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--chip-bad-text, #b91c1c);
  background: var(--chip-bad-bg, #fef2f2);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}

.consent-casilla .consent-opcional,
.consent-opcional {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-3, #6b7280);
  background: var(--color-border-2, #e5e7eb);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ── Banner de cookies ─────────────────────────────────────── */

#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--color-bg, #fff);
  border-top: 1px solid var(--color-border-2, #e5e7eb);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .12);
  padding: var(--space-4, 20px);
}

.cookie-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4, 20px);
  flex-wrap: wrap;
}

.cookie-banner-texto {
  flex: 1 1 380px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text-2, #4b5563);
  margin: 0;
}

.cookie-banner-texto a { color: var(--color-indigo-text, #2563eb); text-decoration: underline; }

.cookie-banner-botones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  /* Los tres botones tienen el mismo peso visual A PROPÓSITO: si
     "Aceptar" fuera grande y de color y "Rechazar" un link gris, el
     consentimiento dejaría de ser libre y no valdría.

     OJO: esto no se controla desde aquí, sino desde la CLASE que lleva
     cada botón en index.html. Durante un tiempo "Aceptar todas" llevó
     btn-primary (azul, texto blanco) mientras "Solo las necesarias"
     llevaba btn-secondary (gris): este comentario decía una cosa y el
     HTML hacía la contraria. Si tocas el banner, los tres van con la
     MISMA clase. */
}

.cookie-banner-botones .btn { white-space: nowrap; }

/* ── El banner no puede tapar lo que hay debajo ──────────────
   En un móvil de 375×812 el modal de bienvenida mide 731px de alto y el
   banner ocupa los 184px de abajo. El resultado era que "Acceder como
   empresa" —el botón por el que entran las clínicas— quedaba debajo del
   banner, y el clic se lo llevaba el banner (z-index 9999 contra 200).

   El banner NO baja de z-index: el consentimiento tiene que poder pulsarse
   siempre, esa es justamente la exigencia legal. Quien cede espacio es el
   modal. Se ancla arriba y se le reserva por abajo la altura real del
   banner, que la mide el propio navegador (--alto-banner-cookies) porque
   depende de cuánto ocupe el texto al plegarse.

   La clase la pone y la quita quien muestra u oculta el banner:
   index.html al arrancar, y LegalView.guardarPreferencias al decidir.

   El min(..., 40vh) es un tope de seguridad, no un adorno. La medida la pone
   JavaScript, y una medida tomada en el instante equivocado del pintado puede
   salir absurda: la primera versión de esto se quedó con 680px cuando el
   banner medía 75, y el modal se aplastó a 238px en un escritorio donde antes
   se veía entero. Un banner de consentimiento no ocupa ni de lejos el 40% de
   la pantalla, así que por encima de ahí la cifra está mal y se ignora. */
body.con-banner-cookies #modal-overlay {
  align-items: flex-start;
  padding-top: var(--space-4, 20px);
  padding-bottom: calc(min(var(--alto-banner-cookies, 200px), 40vh) + var(--space-4, 20px));
}

/* Reservar el hueco no bastaba: el modal de bienvenida mide 731px y en un
   teléfono quedan 596px libres, así que seguía asomando por debajo. Con solo
   desplazamiento en el fondo oscuro, el botón de abajo existe pero nadie
   adivina que hay que arrastrar para verlo.

   Así el modal se ajusta al hueco real y desplaza POR DENTRO: se ve la tarjeta
   entera con su borde inferior, que es la señal de que hay más contenido. */
body.con-banner-cookies #modal-box {
  max-height: 100%;
  overflow-y: auto;
}

/* ── Modal de preferencias ─────────────────────────────────── */

.legal-cookies-modal h2 { font-size: 1.2rem; font-weight: 800; margin: 0 0 8px; }
.legal-cookies-modal > p { font-size: 0.85rem; color: var(--color-text-2, #4b5563); margin-bottom: var(--space-3, 16px); }

.cookie-categoria {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-2, #e5e7eb);
  border-radius: 10px;
  margin-bottom: 10px;
}

.cookie-categoria strong { display: block; font-size: 0.9rem; }
.cookie-categoria small { display: block; font-size: 0.78rem; color: var(--color-text-3, #6b7280); line-height: 1.45; margin-top: 3px; }
.cookie-elegible { cursor: pointer; }
.cookie-elegible:focus-within { outline: 2px solid var(--color-indigo-2, #2563eb); outline-offset: 1px; }

.cookie-siempre {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #15803d;
  background: #f0fdf4;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
}

.cookie-acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: var(--space-4, 20px);
}

.cookie-acciones .btn { flex: 1 1 auto; }

@media (max-width: 640px) {
  .cookie-banner-botones { width: 100%; }
  .cookie-banner-botones .btn { flex: 1 1 auto; }
  .legal-contenido h1 { font-size: 1.4rem; }
}

/* ══════════════════════════════════════════════════════════════
   TEMAS OSCUROS

   Los avisos de esta página (verde de garantía, azul de paciente,
   ámbar de clínica, rojo de error) llevan fondo Y texto en colores
   fijos. Se leían de noche, pero eran cuatro rectángulos claros
   dentro de una página oscura, y el resplandor a pantalla completa
   es justo lo que se busca evitar en modo noche. Aquí se rehacen
   los mismos avisos con el color en versión oscura: mismo código
   visual (verde = garantía, ámbar = clínica), fondo tenue y letra
   clara. El contraste queda por encima de 7:1 en todos.
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .legal-destacado,
[data-theme="cyber"] .legal-destacado,
[data-theme="dark"] .legal-exito,
[data-theme="cyber"] .legal-exito {
  background: rgba(22,163,74,0.12);
  border-color: rgba(74,222,128,0.45);
  color: #bbf7d0;
}
[data-theme="dark"] .legal-destacado,
[data-theme="cyber"] .legal-destacado {
  border-left-color: #4ade80;
}
[data-theme="dark"] .legal-destacado > strong,
[data-theme="cyber"] .legal-destacado > strong,
[data-theme="dark"] .legal-destacado p,
[data-theme="cyber"] .legal-destacado p {
  color: #bbf7d0;
}

[data-theme="dark"] .legal-audiencia.para-paciente,
[data-theme="cyber"] .legal-audiencia.para-paciente,
[data-theme="dark"] .legal-selector-audiencia .para-paciente,
[data-theme="cyber"] .legal-selector-audiencia .para-paciente {
  background: rgba(59,130,246,0.14);
  border-color: #60a5fa;
  color: #dbeafe;
}
[data-theme="dark"] .legal-audiencia.para-empresa,
[data-theme="cyber"] .legal-audiencia.para-empresa,
[data-theme="dark"] .legal-selector-audiencia .para-empresa,
[data-theme="cyber"] .legal-selector-audiencia .para-empresa {
  background: rgba(217,119,6,0.16);
  border-color: #fbbf24;
  color: #fef3c7;
}
[data-theme="dark"] .legal-bloque-audiencia.para-paciente .legal-bloque-etiqueta,
[data-theme="cyber"] .legal-bloque-audiencia.para-paciente .legal-bloque-etiqueta {
  color: #93c5fd;
}
[data-theme="dark"] .legal-bloque-audiencia.para-empresa .legal-bloque-etiqueta,
[data-theme="cyber"] .legal-bloque-audiencia.para-empresa .legal-bloque-etiqueta {
  color: #fbbf24;
}
[data-theme="dark"] .legal-bloque-audiencia.para-paciente,
[data-theme="cyber"] .legal-bloque-audiencia.para-paciente { border-color: #60a5fa; }
[data-theme="dark"] .legal-bloque-audiencia.para-empresa,
[data-theme="cyber"] .legal-bloque-audiencia.para-empresa { border-color: #fbbf24; }

[data-theme="dark"] .legal-borrador,
[data-theme="cyber"] .legal-borrador,
[data-theme="dark"] .legal-error,
[data-theme="cyber"] .legal-error {
  background: rgba(220,38,38,0.14);
  border-color: #f87171;
  color: #fecaca;
}
[data-theme="dark"] .legal-borrador code,
[data-theme="cyber"] .legal-borrador code {
  background: rgba(254,202,202,0.14);
}

[data-theme="dark"] .cookie-siempre,
[data-theme="cyber"] .cookie-siempre {
  background: rgba(22,163,74,0.18);
  color: #86efac;
}