/* ====================================================================
   vanilla-cookieconsent v3 — override Sistema Visual unente v2 · v5
   --------------------------------------------------------------------
   Cambios v5 (10 may 2026):
   - LAYOUT 2 COLUMNAS DESKTOP >1024px: grid 60/40 estilo prensa premium
     (El País, Reuters, NYT)
     · Columna izquierda 60%: título + texto + footer (Privacidad·Aviso)
     · Columna derecha   40%: 3 botones horizontales nowrap
     · align-items: center · gap clamp(48-64px)
     · padding banner clamp 24-40px vert · 32-64px horiz
   - Responsive: <1024px apilado vertical (tablet stacked, mobile column)
   --------------------------------------------------------------------
   Cambios v4: data-role selector estable ([data-role="all"] en lugar
   de la clase .cm__btn--primary que no existe en v3.1.0)
   --------------------------------------------------------------------
   Cambios v3: anti-colisión sticky #sticky / .sticky.on
   Cambios v2: layout bar bottom + body class
   ==================================================================== */

:root {
  --cc-font-family: 'Familjen Grotesk', system-ui, sans-serif;

  /* Banner — fondo oscuro */
  --cc-bg:                #2A2A2A;
  --cc-primary-color:     #F8F8F7;
  --cc-secondary-color:   rgba(248, 248, 247, 0.75);

  /* Toggles */
  --cc-toggle-bg-on:           #2EE59D;
  --cc-toggle-bg-off:          rgba(42, 42, 42, 0.25);
  --cc-toggle-bg-readonly:     rgba(46, 229, 157, 0.7);
  --cc-toggle-knob-bg:         #FFFFFF;
  --cc-toggle-knob-icon-color: #2A2A2A;

  /* Bloques de categoría en preferencias */
  --cc-cookie-category-block-bg:                #FFFFFF;
  --cc-cookie-category-block-border:            rgba(42, 42, 42, 0.08);
  --cc-cookie-category-block-hover-bg:          #FAFAFA;
  --cc-cookie-category-block-hover-border:      rgba(42, 42, 42, 0.12);
  --cc-cookie-category-expanded-block-bg:       #F8F8F7;
  --cc-cookie-category-expanded-block-hover-bg: #F1F1EC;

  --cc-separator-border-color: rgba(248, 248, 247, 0.15);
  --cc-overlay-bg: rgba(42, 42, 42, 0.5);

  --cc-footer-bg:           #2A2A2A;
  --cc-footer-color:        rgba(248, 248, 247, 0.75);
  --cc-footer-border-color: rgba(248, 248, 247, 0.15);
}

/* --------------------------------------------------------------------
   Modal preferencias: fondo claro
   -------------------------------------------------------------------- */
#cc-main .pm,
#cc-main .pm__header,
#cc-main .pm__body,
#cc-main .pm__footer {
  --cc-bg:              #F8F8F7;
  --cc-primary-color:   #2A2A2A;
  --cc-secondary-color: rgba(42, 42, 42, 0.7);
  background-color: #F8F8F7;
  color: #2A2A2A;
}

#cc-main .pm__title,
#cc-main .pm__section-title,
#cc-main .pm__section-desc,
#cc-main .pm__section p {
  color: #2A2A2A;
}

/* --------------------------------------------------------------------
   Banner full-width (no margins, no radius)
   -------------------------------------------------------------------- */
#cc-main .cm--bar,
#cc-main .cm-wrapper {
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* --------------------------------------------------------------------
   Botones: pill radius 100px + Familjen Grotesk
   -------------------------------------------------------------------- */
#cc-main .cm__btn,
#cc-main .pm__btn {
  border-radius:  100px !important;
  font-family:    'Familjen Grotesk', system-ui, sans-serif !important;
  font-weight:    600 !important;
  letter-spacing: -0.005em;
  padding:        0.85em 1.6em !important;
  border-width:   2px !important;
  border-style:   solid !important;
  white-space:    nowrap;
  transition:     transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                  background-color 0.2s ease,
                  color 0.2s ease,
                  border-color 0.2s ease;
}

#cc-main .cm__btn:hover,
#cc-main .pm__btn:hover {
  transform: translateX(4px);
}

/* ====================================================================
   BOTONES POR data-role (API ESTABLE v3.1.0) — sin cambio desde v4
   ==================================================================== */

/* "Aceptar todas |>" en el banner — verde sólido */
#cc-main .cm__btn[data-role="all"] {
  background-color: #2EE59D !important;
  color:            #2A2A2A !important;
  border-color:     #2EE59D !important;
}

#cc-main .cm__btn[data-role="all"]:hover {
  background-color: #25C785 !important;
  color:            #2A2A2A !important;
  border-color:     #25C785 !important;
}

/* Resto de botones del banner (Solo las necesarias, Configurar) — outline crema */
#cc-main .cm__btn:not([data-role="all"]) {
  background-color: transparent !important;
  color:            #F8F8F7 !important;
  border-color:     #F8F8F7 !important;
}

#cc-main .cm__btn:not([data-role="all"]):hover {
  background-color: #F8F8F7 !important;
  color:            #2A2A2A !important;
  border-color:     #F8F8F7 !important;
}

/* "Aceptar todas" y "Guardar mi elección" en modal preferencias — verde sólido */
#cc-main .pm__btn[data-role="all"],
#cc-main .pm__btn[data-role="save"] {
  background-color: #2EE59D !important;
  color:            #2A2A2A !important;
  border-color:     #2EE59D !important;
}

#cc-main .pm__btn[data-role="all"]:hover,
#cc-main .pm__btn[data-role="save"]:hover {
  background-color: #25C785 !important;
  border-color:     #25C785 !important;
}

/* "Solo las necesarias" en modal preferencias — outline negro (fondo claro) */
#cc-main .pm__btn[data-role="necessary"] {
  background-color: transparent !important;
  color:            #2A2A2A !important;
  border-color:     #2A2A2A !important;
}

#cc-main .pm__btn[data-role="necessary"]:hover {
  background-color: #2A2A2A !important;
  color:            #F8F8F7 !important;
  border-color:     #2A2A2A !important;
}

/* ====================================================================
   v5: LAYOUT 2 COLUMNAS DESKTOP >1024px
   --------------------------------------------------------------------
   Grid 60/40 con grid-template-areas explícitas:
   ┌──────────────────┬──────────┐
   │  texts           │          │
   │  (título+texto)  │   btns   │
   ├──────────────────┤  (×3 →)  │
   │  footer (links)  │          │
   └──────────────────┴──────────┘
   - display: contents en .cm__body para promover sus hijos al grid
   - align-items: center para evitar espacio muerto si hay 2 líneas
   ==================================================================== */

@media (min-width: 1024px) {

  #cc-main .cm--bar {
    display: grid !important;
    grid-template-columns: 60% 40%;
    grid-template-areas:
      "texts btns"
      "footer btns";
    column-gap: clamp(48px, 5vw, 64px);
    row-gap: 16px;
    align-items: center;
    padding: clamp(24px, 3vw, 40px) clamp(32px, 5vw, 64px) !important;
  }

  /* Promueve los hijos de cm__body al grid del padre */
  #cc-main .cm--bar > .cm__body {
    display: contents !important;
  }

  /* Columna izquierda — bloque informativo */
  #cc-main .cm--bar .cm__texts {
    grid-area: texts !important;
    margin: 0 !important;
  }

  #cc-main .cm--bar .cm__footer {
    grid-area: footer !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  /* Columna derecha — 3 botones horizontales nowrap, centrados vertical */
  #cc-main .cm--bar .cm__btns,
  #cc-main .cm--bar .cm__btn-group {
    grid-area: btns !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    margin: 0 !important;
  }
}

/* ====================================================================
   v5: TABLET 768-1023px — apilado vertical, botones horizontal
   ==================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

  #cc-main .cm--bar {
    padding: clamp(20px, 3vw, 32px) clamp(24px, 4vw, 40px) !important;
  }

  #cc-main .cm--bar .cm__body {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px;
  }

  #cc-main .cm--bar .cm__btns,
  #cc-main .cm--bar .cm__btn-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    margin: 0 !important;
  }
}

/* ====================================================================
   v5: MOBILE <768px — botones full-width column
   ==================================================================== */

@media (max-width: 767px) {

  #cc-main .cm--bar {
    padding: 20px 18px !important;
  }

  #cc-main .cm--bar .cm__btns,
  #cc-main .cm--bar .cm__btn-group {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 16px 0 0 !important;
  }

  #cc-main .cm--bar .cm__btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* --------------------------------------------------------------------
   Marker |>
   -------------------------------------------------------------------- */
.cc-mark {
  display:        inline-flex;
  align-items:    center;
  margin-left:    0.4em;
  font-family:    'JetBrains Mono', ui-monospace, monospace;
  font-weight:    700;
  font-size:      0.95em;
  color:          currentColor;
  letter-spacing: -0.05em;
}

/* --------------------------------------------------------------------
   Tipografía interior
   -------------------------------------------------------------------- */
#cc-main .cm__title,
#cc-main .pm__title,
#cc-main .pm__section-title {
  font-family:    'Familjen Grotesk', system-ui, sans-serif !important;
  font-weight:    600 !important;
  letter-spacing: -0.015em;
}

#cc-main .cm__desc,
#cc-main .pm__section-desc,
#cc-main .pm__section p {
  font-family: 'IBM Plex Sans', -apple-system, sans-serif !important;
  font-weight: 400;
}

/* --------------------------------------------------------------------
   Descripciones siempre visibles (EDPB-compliant)
   -------------------------------------------------------------------- */
#cc-main .pm__section .pm__section-desc,
#cc-main .pm__section--toggle .pm__section-desc {
  display:    block !important;
  max-height: none !important;
  height:     auto !important;
  overflow:   visible !important;
  opacity:    1 !important;
  visibility: visible !important;
  margin-top: 8px;
  padding:    8px 0 4px 0;
  font-size:  0.9em;
  line-height: 1.5;
}

/* --------------------------------------------------------------------
   Links — banner oscuro: crema con underline coral
   -------------------------------------------------------------------- */
#cc-main .cm a[href],
#cc-main .cm__footer a[href] {
  color:                     #F8F8F7;
  text-decoration:           underline;
  text-decoration-color:     #FF6B35;
  text-decoration-thickness: 2px;
  text-underline-offset:     3px;
  transition:                opacity 0.2s ease;
}

#cc-main .cm a[href]:hover,
#cc-main .cm__footer a[href]:hover {
  opacity: 0.8;
}

#cc-main .pm a[href] {
  color:                 #FF6B35;
  text-decoration:       underline;
  text-underline-offset: 3px;
}

#cc-main .pm a[href]:hover {
  color: #2A2A2A;
}

/* --------------------------------------------------------------------
   Footer del banner (texto pequeño con monoespaciada)
   -------------------------------------------------------------------- */
#cc-main .cm__footer {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size:   0.85em;
}

/* --------------------------------------------------------------------
   prefers-reduced-motion
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #cc-main *,
  #cc-main *::before,
  #cc-main *::after {
    animation-duration:  0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  #cc-main .cm__btn:hover,
  #cc-main .pm__btn:hover {
    transform: none !important;
  }
}

/* ====================================================================
   ANTI-COLISIÓN STICKY MODALS
   --------------------------------------------------------------------
   Class real confirmado: <aside class="sticky on" id="sticky">
   ==================================================================== */
body.cc-banner-active #sticky,
body.cc-banner-active .sticky.on,
body.cc-banner-active .single-letter-sticky,
body.cc-banner-active .sticky-modal,
body.cc-banner-active .single-letter-modal,
body.cc-banner-active [class*="sticky-newsletter"],
body.cc-banner-active [class*="newsletter-sticky"] {
  display: none !important;
}