/* =====================================================================
   TEMA DEL AVISO DE COOKIES — "Noche de Luna"
   Librería: orestbida/cookieconsent v3.1.0
   Se limita a redefinir las variables oficiales de la librería (todas
   viven bajo #cc-main), en lugar de pelearse con !important.
   La paleta es la misma que src/styles/global.css.
   ===================================================================== */
@import url('https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.1.0/dist/cookieconsent.css');

#cc-main {
  /* Tipografía: la misma que el resto de la web */
  --cc-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Fondos y textos (violeta noche) */
  --cc-bg: #1a1140; /* noche-900 */
  --cc-primary-color: #f9f0d9; /* luna-100 */
  --cc-secondary-color: rgba(249, 240, 217, 0.7);
  --cc-link-color: #e8cd84; /* luna-300 */

  /* Botón principal: dorado sobre violeta muy oscuro */
  --cc-btn-primary-bg: #d3a63b; /* luna-500 */
  --cc-btn-primary-color: #0c0a1e; /* noche-950 */
  --cc-btn-primary-border-color: #d3a63b;
  --cc-btn-primary-hover-bg: #ddb954; /* luna-400 */
  --cc-btn-primary-hover-color: #0c0a1e;
  --cc-btn-primary-hover-border-color: #ddb954;

  /* Botón secundario: contorno dorado, sin relleno */
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: #f1e0b0; /* luna-200 */
  --cc-btn-secondary-border-color: rgba(211, 166, 59, 0.4);
  --cc-btn-secondary-hover-bg: rgba(211, 166, 59, 0.12);
  --cc-btn-secondary-hover-color: #fdf9ef; /* luna-50 */
  --cc-btn-secondary-hover-border-color: rgba(211, 166, 59, 0.7);

  /* Interruptores */
  --cc-toggle-on-bg: #d3a63b;
  --cc-toggle-off-bg: #4d2f90; /* noche-600 */
  --cc-toggle-on-knob-bg: #0c0a1e;
  --cc-toggle-off-knob-bg: #f9f0d9;
  --cc-toggle-enabled-icon-color: #0c0a1e;
  --cc-toggle-disabled-icon-color: #f9f0d9;
  --cc-toggle-readonly-bg: #281a57; /* noche-800 */
  --cc-toggle-readonly-knob-bg: rgba(249, 240, 217, 0.6);
  --cc-toggle-readonly-knob-icon-color: #1a1140;

  /* Bloques de categoría del panel de preferencias */
  --cc-cookie-category-block-bg: rgba(255, 255, 255, 0.04);
  --cc-cookie-category-block-border: rgba(255, 255, 255, 0.08);
  --cc-cookie-category-block-hover-bg: rgba(255, 255, 255, 0.07);
  --cc-cookie-category-block-hover-border: rgba(211, 166, 59, 0.35);
  --cc-cookie-category-expanded-block-bg: rgba(12, 10, 30, 0.6);
  --cc-cookie-category-expanded-block-hover-bg: rgba(12, 10, 30, 0.75);

  /* Separadores, pie del modal y superposición */
  --cc-separator-border-color: rgba(255, 255, 255, 0.08);
  --cc-section-category-border: rgba(255, 255, 255, 0.08);
  --cc-footer-bg: #0c0a1e; /* noche-950 */
  --cc-footer-color: rgba(249, 240, 217, 0.6);
  --cc-footer-border-color: rgba(255, 255, 255, 0.08);
  --cc-overlay-bg: rgba(12, 10, 30, 0.85);

  /* Barra de desplazamiento del panel */
  --cc-webkit-scrollbar-bg: #281a57;
  --cc-webkit-scrollbar-hover-bg: #3a2472;

  /* Formas: redondeadas como el resto de tarjetas del sitio */
  --cc-modal-border-radius: 1.25rem;
  --cc-btn-border-radius: 9999px;
  --cc-pm-toggle-border-radius: 9999px;

  /* Por encima del header fijo (z-50) pero sin exagerar */
  --cc-z-index: 100;
}

/* Borde dorado tenue en la caja del aviso, como las tarjetas de la web */
#cc-main .cm--box {
  border: 1px solid rgba(211, 166, 59, 0.25);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

/* Los tres enlaces legales del pie del aviso, repartidos */
#cc-main .cm__link-group {
  justify-content: space-between;
  gap: 0.75rem;
}

/* Coherencia con el resto del sitio: sin animaciones si el usuario
   ha pedido reducir el movimiento (misma regla que global.css) */
@media (prefers-reduced-motion: reduce) {
  #cc-main {
    --cc-modal-transition-duration: 0s;
  }
}