/* ============================================================
 * cookies.css — Banner de consentimiento (self-hosted).
 * Barra inferior NO bloqueante. Usa las variables de landing.css
 * (--coral, --text, --white, --radius-sm, --shadow-lg) con fallbacks.
 * Aceptar y Rechazar tienen el MISMO peso visual (requisito AEPD).
 * ============================================================ */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  pointer-events: none; /* la barra transparente no captura clics; sí la caja */
}
.cookie-banner[hidden] { display: none; }

.cookie-box {
  pointer-events: auto;
  width: 100%;
  max-width: 720px;
  background: var(--dark-2, #16161f);
  color: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-sm, 12px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
  padding: 16px 18px;
}
.cookie-box:focus { outline: none; }

.cookie-title { margin: 0 0 .4rem; font-size: 1.05rem; color: #fff; }
.cookie-desc { margin: 0 0 .8rem; font-size: .9rem; line-height: 1.45; }
.cookie-desc a { color: var(--coral-light, #ff6b87); }

.cookie-config { margin: 0 0 .8rem; display: flex; flex-direction: column; gap: .55rem; }
.cookie-config[hidden] { display: none; }
.cookie-cat { display: flex; gap: .55rem; align-items: flex-start; font-size: .85rem; line-height: 1.4; }
.cookie-cat input { margin-top: .2rem; flex: 0 0 auto; }

.cookie-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.cookie-btn {
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  padding: .55rem 1.05rem;
  border-radius: 10px;
  border: 1px solid transparent;
  line-height: 1.1;
}
/* Aceptar y Rechazar: idénticos (mismo tamaño, color y prominencia). */
.cookie-accept, .cookie-reject {
  background: var(--coral, #F04464);
  color: #fff;
  border-color: var(--coral, #F04464);
}
/* Configurar / Guardar: secundarios (outline), pero perfectamente visibles. */
.cookie-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}
.cookie-btn:hover { opacity: .92; }
.cookie-btn:focus-visible { outline: 2px solid var(--coral, #F04464); outline-offset: 2px; }

/* Enlace-botón "Preferencias de cookies". Hereda el color del contenedor. */
.cookie-prefs-link {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-decoration: underline; cursor: pointer;
}
/* En el PIE imita a .footer-link: sin subrayado y con su misma opacidad. (El
   subrayado se conserva cuando el botón va embebido en la prosa de la política,
   ver .legal-prose en legal.html, donde sí ayuda a leerlo como enlace.) */
footer .cookie-prefs-link { text-decoration: none; opacity: .85; }
footer .cookie-prefs-link:hover { opacity: 1; }

@media (max-width: 520px) {
  .cookie-actions { justify-content: stretch; }
  .cookie-btn { flex: 1 1 auto; }
}