/*******************************************************************************
 *                                                                             *
 *  PESTAÑAS ESTILO COOKIEBOT PARA COMPLIANZ · Hoja de estilos                 *
 *                                                                             *
 *  Valores calcados de Cookiebot:                                             *
 *    · azul principal .......... #1032CF                                      *
 *    · bordes / separadores .... #D6D6D6                                      *
 *    · tarjeta de cookie ....... #F4F4F4                                      *
 *    · texto ................... #141414                                      *
 *    · sombra card ............. 0 32px 68px rgba(0,0,0,.3)                    *
 *    · interruptor ............. 57 x 32 (knob 24)                            *
 *                                                                             *
 *  Los !important son intencionados: sirven para ganar al CSS propio de       *
 *  Complianz y del tema. No eliminar. Se encola desde inc/cookie-consent.php. *
 *                                                                             *
 *******************************************************************************/

/* ============================================================================
   1. CONTENEDOR · card estilo Cookiebot
   ========================================================================== */
.cmplz-cookiebanner {
  display: flex !important;
  flex-direction: column;
  max-height: 80vh !important;
  overflow: hidden !important;
  padding: 0 !important;
  font-family: sans-serif;
  color: #141414;
  line-height: 1.6em;
  letter-spacing: .1px;
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 32px 68px rgba(0, 0, 0, .3) !important;
}

/* Respetar el ocultado de Complianz: al guardar añade .cmplz-dismissed */
#cmplz-cookiebanner-container.cmplz-dismissed,
.cmplz-cookiebanner.cmplz-dismissed,
.cmplz-cookiebanner[style*="display: none"],
.cmplz-cookiebanner[style*="display:none"],
.cmplz-cookiebanner.cmplz-hidden,
.cmplz-cookiebanner[aria-hidden="true"] {
  display: none !important;
}

/* Margen exterior salvo en el body (que gestiona su propio layout) */
.cmplz-cookiebanner > *:not(.cmplz-body) {
  margin: 1em 1.5em 0;
}

.cmplz-cookiebanner .cmplz-body {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ============================================================================
   2. ESTRUCTURA · pestañas + zona de scroll única
   ========================================================================== */
.cx-tabs {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Único scroll, pegado al borde; el contenido lleva el padding interior */
.cx-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 1.5em;
}

.cx-scroll * {
  max-width: 100%;
  box-sizing: border-box;
}

.cx-scroll::-webkit-scrollbar {
  width: .5em;
  height: 0;
}

.cx-scroll::-webkit-scrollbar-track {
  background: #f2f2f2;
  border-radius: .313em;
}

.cx-scroll::-webkit-scrollbar-thumb {
  background: #141414;
  border-radius: .313em;
}

/* ============================================================================
   3. BOTONERA · fija, 3 botones en fila (estilo exacto de Cookiebot)
   ========================================================================== */
.cmplz-cookiebanner .cmplz-buttons {
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: .5em;
  width: auto !important;
  padding: 1em 1.5em !important;
  margin: 0 !important;
  border-top: 1px solid #d6d6d6;
}

.cmplz-cookiebanner .cmplz-buttons > * {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 1em !important;
  background: #1032cf !important;
  border: 2px solid #1032cf !important;
  border-radius: .25em !important;
  color: #fff !important;
  font-weight: 600 !important;
  text-align: center !important;
  cursor: pointer;
  transition: opacity .15s;
}

.cmplz-cookiebanner .cmplz-buttons > *:hover {
  opacity: .85;
}

/* Orden como Cookiebot: Solo necesarias → Permitir la selección → Permitir
   todas. Se ocultan "Detalles" (view-preferences) y el enlace TCF. */
.cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-buttons a.cmplz-manage-options {
  display: none !important;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-deny             { order: 1; }
.cmplz-cookiebanner .cmplz-buttons .cmplz-save-preferences { order: 2; }
.cmplz-cookiebanner .cmplz-buttons .cmplz-accept           { order: 3; }

/* Los 3 botones van rellenos de azul (el estilo base ya lo aplica arriba;
   el hover unificado :hover{opacity:.85} tambien viene del estilo base). */

/* Forzar visible "Permitir la selección" (save-preferences). Complianz lo
   oculta con su CSS hasta entrar en "modo preferencias", pero en nuestro banner
   las categorías se muestran siempre, así que el botón debe estar disponible.
   Se ancla con 3 clases + !important para ganar a la regla de Complianz. */
.cmplz-cookiebanner .cmplz-buttons .cmplz-save-preferences {
  display: block !important;
}

/* ============================================================================
   4. OCULTAR LO NATIVO YA REPLICADO
   Todo salvo lo que vive dentro de .cx-tabs. No se mueve del DOM:
   Complianz lo sigue leyendo para guardar el consentimiento.
   ========================================================================== */
.cmplz-cookiebanner.cx-ready .cmplz-title,
.cmplz-cookiebanner.cx-ready .cmplz-message,
.cmplz-cookiebanner.cx-ready .cmplz-categories,
.cmplz-cookiebanner.cx-ready .cmplz-divider,
.cmplz-cookiebanner .cmplz-links.cmplz-information,
.cmplz-cookiebanner .cmplz-links.cmplz-documents {
  display: none !important;
}

.cmplz-cookiebanner.cx-ready .cx-tabs .cmplz-title,
.cmplz-cookiebanner.cx-ready .cx-tabs .cmplz-message {
  display: block !important;
}

/* ============================================================================
   5. PESTAÑAS (barra de navegación)
   ========================================================================== */
/* Reset común de los botones propios */
.cx-tab,
.cx-cat-h,
.cx-prov-h {
  appearance: none;
  background: 0;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: #141414;
  line-height: 1.5em;
  cursor: pointer;
}

.cx-bar {
  display: flex;
  flex: 0 0 auto;
  border-bottom: 1px solid #d6d6d6;
}

.cx-tab {
  flex: 1;
  padding: 1em 6px;
  border-bottom: 3px solid transparent;
  font-weight: 600;
  text-align: center;
  transition: color .15s, border-color .15s;
}

.cx-tab:hover,
.cx-prov-h:hover {
  color: #1032cf !important;
}

.cx-tab.on {
  color: #1032cf !important;
  border-bottom-color: #1032cf;
}

/* ============================================================================
   6. PANELES
   ========================================================================== */
.cx-panel {
  padding: 1em 0 1.25em;
}

.cx-panel[hidden] {
  display: none !important;
}

/* Tipografía unificada, blindada contra el tema (mismo criterio que
   .cmplz-message p de Complianz). */
.cx-tabs,
.cx-tabs p,
.cx-tabs strong,
.cx-tabs b,
.cx-tabs span,
.cx-tabs button,
.cx-tabs a,
.cx-panel--consent .cmplz-title,
.cx-panel--consent .cmplz-message p {
  font-family: sans-serif !important;
  font-size: 1em !important;
  color: #141414 !important;
  line-height: 1.6em !important;
}

/* Igualar el <p> de Consentimiento al de Acerca. El de Consentimiento va
   envuelto en .cmplz-message (con caja y estilos propios de Complianz de la
   misma especificidad que los míos); por eso las reglas siguientes se anclan
   a .cmplz-cookiebanner para ganar especificidad y neutralizar el contenedor.
   La repetición de font-* aquí NO es redundante: es lo que vence a Complianz. */
.cmplz-cookiebanner .cx-panel--consent .cmplz-message {
  margin: 0 !important;
  padding: 0 !important;
  background: 0 !important;
  border: 0 !important;
  font: inherit !important;
}

.cmplz-cookiebanner .cx-panel--about p,
.cmplz-cookiebanner .cx-panel--consent .cmplz-message p {
  margin: 0 0 1em !important;
  padding: 0 !important;
  font-family: sans-serif !important;
  font-size: 1em !important;
  font-weight: 400 !important;
  color: #141414 !important;
  line-height: 1.6em !important;
  letter-spacing: normal !important;
}

.cmplz-cookiebanner .cx-panel--consent .cmplz-title {
  margin: 0 0 .5em !important;
  font-weight: 600 !important;
  letter-spacing: .25px !important;
}

/* ============================================================================
   7. SELECTOR DE CATEGORÍAS en Consentimiento (SelectPane de Cookiebot)
   ========================================================================== */
.cx-pane {
  display: flex;
  margin-top: 1.25em;
  border-top: 1px solid #d6d6d6;
}

.cx-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75em;
  padding: 1.5em 1em .5em;
}

.cx-opt:not(:last-child) {
  border-right: 1px solid #d6d6d6;
}

.cx-opt strong {
  font-weight: 700 !important;
}

/* ============================================================================
   8. CATEGORÍA (acordeón) en Detalles
   ========================================================================== */
.cx-cat {
  padding: 1.125em 0;
  border-bottom: 1px solid #d6d6d6;
}

.cx-cat:last-child {
  border-bottom: 0;
}

.cx-cat-h {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .5em;
}

.cx-cat-h .cx-sw {
  margin-left: auto;
}

.cx-tabs .cx-chev {
  font-size: .7em !important;
  opacity: .85;
  transition: transform .18s;
}

.cx-open > .cx-cat-h .cx-chev,
.cx-prov.cx-open > .cx-prov-h .cx-chev {
  transform: rotate(180deg);
}

.cx-tabs .cx-count {
  display: inline-block;
  min-width: 1.7em;
  margin-left: .5em;
  padding: .25em .5em;
  background: #d6d6d6;
  border-radius: 5em;
  font-size: .8em !important;
  font-weight: 700;
  line-height: 1.2em !important;
  text-align: center;
}

.cx-cat-intro {
  padding-top: 1em;
  letter-spacing: .3px;
}

.cx-cat-body,
.cx-prov-body {
  display: none;
}

.cx-open > .cx-cat-body {
  display: block;
  padding-top: 1em;
}

.cx-prov.cx-open > .cx-prov-body {
  display: block;
  margin-top: 1em;
}

/* ============================================================================
   9. INTERRUPTOR (57 x 32, knob 24 · idéntico a Cookiebot)
   ========================================================================== */
.cx-sw i {
  display: inline-block;
  width: 57px;
  height: 32px;
  position: relative;
  background: #141414;
  border-radius: 32px;
  vertical-align: middle;
  cursor: pointer;
  transition: background .4s;
}

.cx-sw i::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .4s;
}

.cx-sw:hover i {
  opacity: .85;
}

.cx-sw.on i {
  background: #1032cf;
}

.cx-sw.on i::after {
  transform: translateX(25px);
}

.cx-sw.lock,
.cx-sw.lock i {
  cursor: not-allowed;
}

.cx-sw.lock:hover i {
  opacity: 1;
}

/* ============================================================================
   10. PROVEEDOR (tarjeta con hover de Cookiebot)
   ========================================================================== */
.cx-prov {
  margin-bottom: .5em;
  padding: 1em;
  border: 1px solid #d6d6d6;
  border-radius: .5em;
  transition: background .15s;
}

.cx-prov:last-child {
  margin-bottom: 0;
}

.cx-prov:not(.cx-open):hover {
  background: rgba(0, 0, 0, .05);
}

.cx-prov-h {
  width: 100%;
  display: flex;
  align-items: center;
}

.cx-prov-h .cx-chev {
  margin-left: auto;
}

.cx-more {
  display: inline-block;
  padding-top: 1em;
  color: #2a4eef !important;
  font-weight: 600 !important;
  text-decoration: none;
}

.cx-more:hover {
  text-decoration: underline;
}

/* ============================================================================
   11. TARJETA DE COOKIE (gris #F4F4F4, radius 1em de Cookiebot)
   ========================================================================== */
.cx-ck {
  margin-bottom: .5em;
  padding: 1em;
  background: #f4f4f4;
  border: 1px solid #d6d6d6;
  border-radius: 1em;
}

.cx-ck:last-child {
  margin-bottom: 0;
}

.cx-ck b.n {
  display: block;
  margin-bottom: .5em;
  line-height: 1.6em;
}

.cx-ck p {
  margin: 0;
  padding-bottom: 1em;
  letter-spacing: .3px !important;
}

.cx-meta {
  padding-top: .5em;
  border-top: 1px solid #d6d6d6;
}

.cx-meta span {
  display: block;
  margin-top: .5em;
}

.cx-load {
  opacity: .6;
  font-style: italic;
}

/* ============================================================================
   12. RESPONSIVE
   ========================================================================== */
@media (max-width: 600px) {
  .cmplz-cookiebanner .cmplz-buttons {
    flex-wrap: wrap !important;
  }

  .cmplz-cookiebanner .cmplz-buttons > * {
    flex: 1 1 100% !important;
  }

  .cx-pane {
    flex-wrap: wrap;
  }

  .cx-opt {
    flex: 1 1 45%;
  }

  .cx-opt:nth-child(2) {
    border-right: 0;
  }
}