/**
 * @file
 * Aviso y panel de consentimiento (Klaro) con la piel del tema.
 *
 * Fuera del camino critico: la libreria alliance/klaro sirve esta hoja con
 * media="print" y la pasa a "all" en onload, asi que no bloquea el primer
 * paint ni compite con el LCP. Las dos hojas de Klaro entran por @import (el
 * tema las quita de sus librerias en alliance.info.yml) para que todo aplique
 * a la vez: el evento load del <link> espera a sus @import. Hasta entonces
 * base.css oculta #klaro, de modo que nunca se ve el aviso sin estilo.
 *
 * Klaro ya es oscuro de serie; aqui solo se mapean sus variables a la tinta
 * del pie (M-09) y se quitan radios y sombras (G-04).
 */

@import url('../../../../libraries/klaro/dist/klaro.min.css');
@import url('../../../../modules/contrib/klaro/css/klaro-extend.css');

#klaro {
  display: block;
}

.klaro {
  --font-family: var(--sans);
  --title-font-family: var(--serif);
  --font-size: 13px;
  --border-radius: 0;
  --dark1: var(--ink);
  --dark2: var(--rule-dark);
  --dark3: var(--dim);
  --light1: var(--bone);
  --light2: var(--rule-dark);
  --light3: var(--dim);
  --white2: var(--rule-dark);
  --white3: var(--dim);
  --green1: var(--brass);
  --green2: var(--brass-deep);
  --green3: var(--brass);
  --blue1: transparent;
  --button-text-color: var(--bone);
  --notice-right: 24px;
  --notice-bottom: 24px;
  --notice-max-width: 380px;
  line-height: 1.6;
}

/* Aviso: tarjeta de tinta con filete, como las bandas oscuras.
   Entra con un fundido que arranca en opacity:0 a proposito: Chrome no toma
   como candidato a LCP lo que se pinta invisible, y en paginas de titular
   corto (/members, fichas como "80Days") el parrafo del aviso era mas grande
   que el H1 en movil y se quedaba con el LCP, pintado tarde por el JS
   diferido. El transform no cuenta para el CLS. */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  border: 1px solid var(--rule-dark);
  box-shadow: none;
  animation: klaro-in .6s var(--ease) both;
}

@keyframes klaro-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Con reduced-motion no se mueve (G-11), pero sigue fundiendo: el fundido
   no es movimiento y es lo que lo saca del LCP. */
@media (prefers-reduced-motion: reduce) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    animation-name: klaro-fade;
  }

  @keyframes klaro-fade {
    from {
      opacity: 0;
    }
  }
}

/* Klaro enfoca el dialogo al abrirlo (autofocus) para que el teclado y el
   lector de pantalla lo encuentren; el anillo de G-12 queda para los botones
   y no enmarca la tarjeta entera en cada carga. */
.klaro .cookie-notice:focus-visible {
  outline: none;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  padding: 20px 22px 18px;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
  margin: 0 0 6px;
}

@media (max-width: 1023px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    border-width: 1px 0 0;
  }
}

/* Botones y enlaces con la voz de las etiquetas del pie. Aceptar y rechazar
   pesan lo mismo a proposito: rechazar no puede costar mas que aceptar. */
.klaro .cm-btn,
.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-btn,
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-info {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone);
  background: transparent;
  border: 1px solid var(--dim-soft);
  border-radius: 0;
  padding: 10px 14px;
  transition: color .25s, border-color .25s;
}

.klaro .cm-btn:hover,
.klaro .cookie-notice .cm-btn:hover,
.klaro .cookie-modal .cm-btn:hover {
  color: var(--brass);
  border-color: var(--brass);
}

.klaro .cookie-notice .cn-learn-more,
.klaro .cookie-modal a {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
}

.klaro .cookie-modal p a {
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
  border-bottom-color: currentColor;
}

.klaro .cookie-notice .cn-learn-more:hover,
.klaro .cookie-modal a:hover {
  color: var(--brass);
  border-bottom-color: var(--brass);
}

/* Panel. */
.klaro .cookie-modal .cm-bg {
  background: color-mix(in srgb, var(--ink) 60%, transparent);
}

.klaro .cookie-modal .cm-modal.cm-klaro {
  border: 1px solid var(--rule-dark);
  box-shadow: none;
}

@media (min-width: 660px) {
  .klaro .cookie-modal .cm-modal.cm-klaro {
    max-width: 560px;
  }
}

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

.klaro .cookie-modal .cm-modal .cm-header h1 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 10px;
}

/* Jost va de 300 a 500: el 600 de Klaro saldria en negrita sintetica. */
.klaro .cookie-modal .cm-list-title,
.klaro .cookie-modal .cm-services .cm-caret,
.klaro .cookie-modal strong {
  font-weight: 500;
}

/* "(always required)": Klaro lo tine con --dark2, que aqui es el filete y
   sobre tinta no se lee. Misma especificidad que su regla para ganarle. */
.klaro .cookie-modal .cm-list-description,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-opt-out,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-opt-out {
  color: var(--dim);
}

/* Interruptores rectos, sin sombra: el mismo filete que el resto (G-04). */
.klaro .cookie-modal .slider,
.klaro .cookie-modal .cm-list-input:focus + .cm-list-label .slider {
  box-shadow: none;
}

.klaro .cookie-modal .cm-list-label .slider.round,
.klaro .cookie-modal .cm-list-label .slider.round::before {
  border-radius: 0;
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before {
  background-color: var(--bone);
}

/* El foco del interruptor, con el anillo de G-12 y no el outline:auto de
   Klaro (blanco y redondeado). */
.klaro .cookie-modal .cm-list-input:focus + .cm-list-label .slider {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}