/*
 * css/klaro-unow.css — override visual del CMP Klaro (0.7.22) para unow.es
 *
 * Reglas (02-UI-SPEC.md):
 * - Colores SOLO vía tokens :root de css/unow-9ac241.webflow.css
 *   (--dark #090b19, --primary #794dfd, --gray-neutral #f4f6fc,
 *   --body-display #6e7488) más blanco (#fff) y #f8f8f8.
 * - Cada var() lleva de fallback el MISMO valor del token (no son colores nuevos):
 *   la home React (index.html) y cualquier página futura sin el :root del sitio
 *   no definen las custom properties, y sin fallback el banner quedaba con
 *   background transparente y botones con texto blanco sobre blanco.
 * - «Aceptar todas» y «Rechazar todas» IDÉNTICOS (regla AEPD): mismo relleno blanco,
 *   texto --dark, mismo tamaño, lado a lado — espejo de .submit-button.white.
 * - --primary reservado al estado "on" de los toggles y a los focus outlines.
 * - Tipografía heredada del body (Eudoxus Sans) — sin @font-face ni familias nuevas.
 * - Se permite !important puntual: klaro.js inyecta sus estilos base en runtime
 *   después de este <link>.
 */

/* ===== Base ===== */

.klaro {
  font-family: inherit;
}

.klaro a {
  color: #f8f8f8;
  text-decoration: underline;
}

/* ===== Banner (cookie notice) ===== */

.klaro .cookie-notice:not(.cookie-modal-notice) {
  background: var(--dark, #090b19) !important;
  color: #f8f8f8 !important;
  border: 1px solid var(--body-display, #6e7488);
  border-radius: 12px;
  box-shadow: none !important;
  max-width: 440px;
  bottom: 24px;
  right: 24px;
}

.klaro .cookie-notice .cn-body {
  padding: 24px !important;
}

.klaro .cookie-notice .cn-body p {
  color: #f8f8f8;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 16px;
}

/* «Configurar cookies»: enlace subrayado de menor prominencia */
.klaro .cookie-notice .cm-link.cn-learn-more {
  color: #f8f8f8;
  font-size: 14px;
  line-height: 1.5;
  text-decoration: underline;
}

.klaro .cookie-notice .cn-ok {
  margin-top: 16px;
  align-items: center;
}

.klaro .cookie-notice .cn-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ===== Botones (banner y modal) — todos idénticos: blanco + texto --dark ===== */

.klaro .cm-btn,
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-danger,
.klaro .cm-btn.cm-btn-accept-all,
.klaro .cm-btn.cm-btn-decline,
.klaro .cm-btn.cm-btn-info {
  background: #fff !important;
  color: var(--dark, #090b19) !important;
  border: none;
  border-radius: 100px;
  padding: 12px 24px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  margin: 0;
}

/* ===== Modal (configuración de cookies) ===== */

.klaro .cookie-modal .cm-modal.cm-klaro {
  background: var(--dark, #090b19) !important;
  color: #f8f8f8 !important;
  border-radius: 12px;
  max-height: 88vh;
}

.klaro .cookie-modal .cm-modal .cm-header {
  padding: 24px;
  border-bottom: 1px solid var(--body-display, #6e7488);
}

.klaro .cookie-modal .cm-modal .cm-header h1.title {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.klaro .cookie-modal .cm-modal .cm-header p {
  color: #f8f8f8;
  font-size: 16px;
  line-height: 1.6;
}

.klaro .cookie-modal .cm-modal .cm-body {
  padding: 24px;
  overflow-y: auto;
}

.klaro .cookie-modal .cm-modal .cm-footer {
  padding: 24px;
  border-top: 1px solid var(--body-display, #6e7488);
}

.klaro .cookie-modal .cm-modal .cm-footer .cm-footer-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.klaro .cookie-modal .cm-modal .hide svg {
  stroke: #f8f8f8;
}

/* Servicios y finalidades */

.klaro .cookie-modal .cm-modal span,
.klaro .cookie-modal .cm-modal p {
  color: #f8f8f8;
}

.klaro .cookie-modal .cm-list-title {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.klaro .cookie-modal .cm-list-description {
  color: var(--gray-neutral, #f4f6fc);
  font-size: 14px;
  line-height: 1.5;
}

.klaro .cookie-modal .cm-purpose {
  margin-bottom: 32px;
}

.klaro .cookie-modal .cm-purpose:last-child {
  margin-bottom: 0;
}

/* ===== Neutralización de colisiones con el CSS global del sitio ===== */

/*
 * El sitio define .slider (componente slider de Webflow, unow-9ac241.webflow.css:4699)
 * con width:100% y min-height:350px (540px en móvil). El track del toggle de Klaro
 * también es span.slider y Klaro no declara min-height, así que la regla global
 * ganaba y estiraba cada toggle verticalmente. Reafirmamos la caja del toggle.
 */
.klaro .cm-list-label .cm-switch {
  width: 50px !important;
  height: 30px !important;
  min-height: 0 !important;
}

.klaro .cm-list-label .slider {
  width: 50px !important;
  height: 30px !important;
  min-height: 0 !important;
  border-radius: 30px !important;
}

/*
 * El sitio define .hide { display:none } (unow-9ac241.webflow.css:9271) y el botón
 * de cierre del modal de Klaro usa esa misma clase → quedaba invisible.
 */
.klaro .cookie-modal .cm-modal .hide {
  display: inline-block !important;
}

/* ===== Toggles: --primary SOLO en estado "on" ===== */

.klaro .cm-list-input + .cm-list-label .slider {
  background-color: var(--body-display, #6e7488) !important;
}

.klaro .cm-list-input:checked + .cm-list-label .slider {
  background-color: var(--primary, #794dfd) !important;
}

/* Turnstile (required): sin toggle — solo la nota descriptiva */
.klaro .cm-list-input.required + .cm-list-label .cm-switch {
  display: none;
}

.klaro .cm-list-input.required:checked + .cm-list-label .slider {
  background-color: var(--body-display, #6e7488) !important;
}

/* ===== Focus: outline --primary ===== */

.klaro .cm-btn:focus-visible,
.klaro a:focus-visible {
  outline: 2px solid var(--primary, #794dfd);
  outline-offset: 2px;
}

.klaro .cm-list-input:focus-visible + .cm-list-label .slider {
  outline: 2px solid var(--primary, #794dfd);
  outline-offset: 2px;
}

/* ===== Móvil (≤479px) ===== */

@media screen and (max-width: 479px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    border-radius: 12px 12px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    bottom: 0;
    right: 0;
    left: 0;
    max-width: none;
  }

  .klaro .cookie-notice .cn-body {
    padding: 16px !important;
  }

  .klaro .cookie-modal .cm-modal .cm-header,
  .klaro .cookie-modal .cm-modal .cm-body,
  .klaro .cookie-modal .cm-modal .cm-footer {
    padding: 16px;
  }

  .klaro .cm-btn {
    min-height: 44px;
    flex: 1 1 100%;
  }

  .klaro .cookie-notice .cn-body p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 8px;
  }

  .klaro .cookie-notice .cn-ok {
    margin-top: 8px;
  }
}