/*!
 * Tres Puntos — CookieConsent v3 theme override
 * Dark + mint (coherente con design-system.css)
 */
#cc-main {
  /* Base — fondo oscuro con blur */
  --cc-bg: #0e0e0e;
  --cc-primary-color: #ffffff;
  --cc-secondary-color: rgba(255,255,255,.7);

  /* Botón primario = mint sólido */
  --cc-btn-primary-bg: #5dffbf;
  --cc-btn-primary-color: #0e0e0e;
  --cc-btn-primary-border-color: #5dffbf;
  --cc-btn-primary-hover-bg: #4fe6a8;
  --cc-btn-primary-hover-color: #0e0e0e;
  --cc-btn-primary-hover-border-color: #4fe6a8;

  /* Botón secundario = outline blanco suave */
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: #ffffff;
  --cc-btn-secondary-border-color: rgba(255,255,255,.2);
  --cc-btn-secondary-hover-bg: rgba(93,255,191,.08);
  --cc-btn-secondary-hover-color: #5dffbf;
  --cc-btn-secondary-hover-border-color: rgba(93,255,191,.4);

  /* Separadores */
  --cc-separator-border-color: rgba(255,255,255,.08);

  /* Toggles (preferencias) */
  --cc-toggle-bg-off: rgba(255,255,255,.15);
  --cc-toggle-bg-on: #5dffbf;
  --cc-toggle-bg-readonly: rgba(93,255,191,.3);
  --cc-toggle-knob-bg: #ffffff;
  --cc-toggle-knob-icon-color: #0e0e0e;

  /* Bloques de categorías */
  --cc-cookie-category-block-bg: rgba(255,255,255,.03);
  --cc-cookie-category-block-border: rgba(255,255,255,.08);
  --cc-cookie-category-block-hover-bg: rgba(93,255,191,.06);
  --cc-cookie-category-block-hover-border: rgba(93,255,191,.2);
  --cc-cookie-category-expanded-block-bg: rgba(255,255,255,.02);
  --cc-cookie-category-expanded-block-hover-bg: rgba(255,255,255,.05);

  /* Overlay (preferencias modal) */
  --cc-overlay-bg: rgba(0,0,0,.75);

  /* Scrollbar */
  --cc-webkit-scrollbar-bg: rgba(255,255,255,.1);
  --cc-webkit-scrollbar-bg-hover: rgba(93,255,191,.4);

  /* Footer preferences modal */
  --cc-footer-bg: #0a0a0a;
  --cc-footer-color: rgba(255,255,255,.7);
  --cc-footer-border-color: rgba(255,255,255,.08);

  /* Links */
  --cc-link-color: #5dffbf;

  /* Fuente */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Borde sutil mint en el modal + sombra */
#cc-main .cm,
#cc-main .pm {
  border: 1px solid rgba(93,255,191,.15) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(93,255,191,.05) !important;
}

/* Título con acento mint */
#cc-main .cm__title,
#cc-main .pm__title {
  color: #5dffbf !important;
  font-weight: 700 !important;
}

/* Links dentro del banner */
#cc-main a {
  color: #5dffbf !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#cc-main a:hover {
  color: #4fe6a8 !important;
}

/* Botones más redondeados y con transición */
#cc-main .cm__btn,
#cc-main .pm__btn {
  border-radius: 999px !important;
  font-weight: 600 !important;
  transition: all .25s ease !important;
  letter-spacing: .01em;
}

/* Botón primario con sutil glow mint */
#cc-main .cm__btn--primary,
#cc-main .pm__btn--primary {
  box-shadow: 0 0 0 0 rgba(93,255,191,.4);
}
#cc-main .cm__btn--primary:hover,
#cc-main .pm__btn--primary:hover {
  box-shadow: 0 0 20px rgba(93,255,191,.35);
  transform: translateY(-1px);
}

/* Modal preferences más pulido */
#cc-main .pm__section {
  border-radius: 12px !important;
}

/* Sección abierta */
#cc-main .pm__section--expandable .pm__section-arrow {
  background: rgba(93,255,191,.08) !important;
  border-color: rgba(93,255,191,.2) !important;
}

/* Diferenciar botones por data-role manteniendo equal-weight GDPR
   all = Aceptar todas (mint), necessary = Rechazar (outline), show = Preferencias (outline) */
#cc-main .cm__btn[data-role="necessary"],
#cc-main .cm__btn[data-role="show"] {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: none !important;
}
#cc-main .cm__btn[data-role="necessary"]:hover,
#cc-main .cm__btn[data-role="show"]:hover {
  background: rgba(93,255,191,.08) !important;
  border-color: rgba(93,255,191,.4) !important;
  color: #5dffbf !important;
  transform: translateY(-1px);
}

/* "Aceptar todas" con sutil glow al hover */
#cc-main .cm__btn[data-role="all"]:hover {
  background: #4fe6a8 !important;
  border-color: #4fe6a8 !important;
  box-shadow: 0 0 24px rgba(93,255,191,.4) !important;
  transform: translateY(-1px);
}