/* Klaro (consentimiento de cookies): variables del módulo mapeadas a tokens + refuerzos directos. */

.klaro {
  /* Vars de klaro.css (si la versión las expone). */
  --border-radius: var(--radius-sm);
  --button-text-color: var(--div-bg);
  --green1: var(--div-accent-strong);
  --green2: var(--div-accent-strong);
  --green3: var(--div-accent-strong);
  --blue1: var(--div-accent-strong);
  --blue2: var(--div-accent-strong);
  --blue3: var(--div-accent-strong);
  --dark1: var(--div-surface);
  --dark2: color-mix(in srgb, var(--div-surface) 85%, var(--div-ink));
  --dark3: var(--div-line);
  --light1: var(--div-ink);
  --light2: var(--div-ink-soft);
  --light3: var(--div-line-strong);
  font-family: var(--ff-text);
}

.klaro .cookie-notice,
.klaro .cookie-modal .cm-modal {
  background: var(--div-surface);
  color: var(--div-ink);
  border: 1px solid var(--div-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
}

.klaro .cookie-notice p,
.klaro .cookie-modal p,
.klaro .cookie-notice span,
.klaro .cookie-modal span {
  font-family: var(--ff-text);
  color: var(--div-ink);
}

.klaro .cookie-modal .cm-modal .cm-header h1,
.klaro .cookie-modal .cm-modal .cm-header h2 {
  font-family: var(--ff-display);
  font-weight: 500;
  color: var(--div-ink);
}

.klaro a {
  color: var(--div-accent-strong);
}

.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-footer {
  border-color: var(--div-line);
}

/* Botones con el trato de .c-button. */
.klaro .cm-btn {
  min-height: 44px;
  padding: .75rem 1.75rem;
  border: 1px solid var(--div-line-strong);
  border-radius: var(--radius-xs);
  background: transparent;
  font-family: var(--ff-display);
  font-size: var(--fs-button);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-caps-3);
  text-transform: uppercase;
  color: var(--div-ink);
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out);
}

.klaro .cm-btn:hover,
.klaro .cm-btn:focus-visible {
  border-color: var(--div-accent-strong);
  color: var(--div-accent-strong);
}

.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept,
.klaro .cm-btn.cm-btn-accept-all {
  border-color: var(--div-accent-strong);
  background: transparent;
  color: var(--div-accent-strong);
}

.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-accept:hover,
.klaro .cm-btn.cm-btn-accept-all:hover,
.klaro .cm-btn.cm-btn-success:focus-visible,
.klaro .cm-btn.cm-btn-accept:focus-visible,
.klaro .cm-btn.cm-btn-accept-all:focus-visible {
  background: var(--div-accent-strong);
  color: var(--div-bg);
}

/* Interruptores de servicio. */
.klaro .cm-list-input:checked + .cm-list-label .slider {
  background-color: var(--div-accent-strong);
}

.klaro .cm-list-label .slider {
  background-color: var(--div-line-strong);
  box-shadow: none;
}

.klaro .cm-list-input:focus-visible + .cm-list-label .slider {
  outline: 2px solid var(--div-focus);
  outline-offset: 2px;
}

.klaro .cm-list-title {
  font-family: var(--ff-display);
  font-weight: 500;
  color: var(--div-ink);
}

.klaro .cm-list-description {
  font-size: var(--fs-small);
  color: var(--div-ink-soft);
}