/**
 * KLARO-THEME (Fase 1) — viste el CMP Klaro con la identidad de Uroborox.
 *
 * Se sirve como recurso estático desde /static (mismo origen, cubierto por
 * 'self' en styleSrc) y se carga DESPUÉS de klaro.min.css (ver
 * src/util/includeScripts.js) para ganar en la cascada.
 *
 * SOLO usa tokens reales del proyecto (definidos en :root de
 * src/styles/marketplaceDefaults.css). NO hay hex nuevos hardcodeados.
 * Se usa !important para vencer a las reglas compiladas de Klaro (que no
 * usan !important) sea cual sea el orden de inyección.
 *
 * Klaro v0.7.11 expone pocas variables CSS; el resto se tematiza por clase.
 */

/* ── Variables que Klaro sí expone ─────────────────────────────────────── */
.klaro {
  --green1: var(--uroboroxGreen400); /* verde de marca (Aceptar) */
  --green2: var(--uroboroxGreen500);
  --green3: var(--uroboroxGreen500);
  --blue1: var(--uroboroxGray300);   /* mata el azul por defecto de enlaces/info */
  --font-color-dark: var(--uroboroxWhite);
}

/* ── Contenedores: fondo oscuro de marca + borde sutil verde + texto claro ─ */
.klaro .cookie-notice,
.klaro .cookie-modal .cm-modal {
  background-color: var(--uroboroxEmerald950) !important;
  color: var(--uroboroxWhite) !important;
  border: 1px solid var(--uroboroxEmerald800) !important;
  border-radius: var(--borderRadiusMedium) !important;
}

/* ── Textos: todo claro (arregla el "oscuro sobre oscuro") ──────────────── */
.klaro .cookie-notice,
.klaro .cookie-notice p,
.klaro .cookie-notice strong,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-modal .cm-modal,
.klaro .cookie-modal .cm-modal p,
.klaro .cookie-modal .cm-modal h1,
.klaro .cookie-modal .cm-modal h2,
.klaro .cookie-modal .cm-modal strong,
.klaro .cookie-modal .cm-modal label,
.klaro .cookie-modal .cm-modal .cm-list-title {
  color: var(--uroboroxWhite) !important;
}

/* Texto secundario / descripciones: gris claro legible sobre fondo oscuro. */
.klaro .cookie-notice .cn-body p,
.klaro .cookie-modal .cm-modal .cm-list-description,
.klaro .cookie-modal .cm-modal .cm-caption,
.klaro .cookie-modal .cm-modal .cm-services .purposes {
  color: var(--uroboroxGray300) !important;
}

/* ── Enlaces (política): gris discreto subrayado, NO verde/azul ─────────── */
.klaro .cookie-notice a,
.klaro .cookie-modal .cm-modal a {
  color: var(--uroboroxGray300) !important;
  text-decoration: underline !important;
}

/* ── Botones: base SECUNDARIA (transparente + borde claro sutil + texto claro).
      Mismo peso y tamaño para Denegar y Confirmar selección. "Ajustes"
      (a.cn-learn-more del banner) se incluye aquí para quedar VISUALMENTE
      IDÉNTICO a Denegar; conserva flex:0 0 auto abajo para no estirarse. Con
      el texto corto "Ajustes" los tres botones caben en la fila (~370px). ── */
.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-modal .cm-btn,
.klaro .cookie-notice .cm-link.cn-learn-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Igualar altura/alineación entre el <a> "Ajustes..." y los <button>
     Denegar/Aceptar: por defecto <a> y <button> difieren en box-sizing y en
     line-height (el <a> hereda el ~1.5 del contenedor; el <button> usa
     `normal` de su UA). Forzando los mismos valores en los tres, las cajas
     miden idéntico y se alinean en la misma fila del flex .cn-ok. */
  box-sizing: border-box !important;
  line-height: normal !important;
  vertical-align: middle !important;
  padding: 7px 16px !important;
  background-color: transparent !important;
  color: var(--uroboroxWhite) !important;
  border: 1px solid var(--uroboroxGray500) !important;
  border-radius: var(--borderRadiusMedium) !important;
  /* Misma fuente/tamaño/peso en el <a> y los <button>: por defecto el <button>
     usa la fuente del sistema (UA) y el <a> hereda la del contenedor, con
     métricas distintas → cajas de distinta altura aun con el mismo line-height.
     Con font-family:inherit + font-size:14px (el base del banner) los tres
     renderizan con idéntica métrica y miden igual. (El font-weight:600 de
     "Aceptar todo" lo mantiene su regla propia; el peso no altera la altura.) */
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: normal !important;
  text-decoration: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
  cursor: pointer;
}
.klaro .cookie-notice .cm-btn:hover,
.klaro .cookie-modal .cm-modal .cm-btn:hover,
.klaro .cookie-notice .cm-link.cn-learn-more:hover {
  background-color: transparent !important;
  border-color: var(--uroboroxGray300) !important;
  color: var(--uroboroxWhite) !important;
}

/* "Ajustes" (banner): mismo botón secundario que Denegar, pero SIN estirarse
   en la fila flex de .cn-ok — se queda al lado de Denegar sin ocupar el ancho.
   Nota: Klaro añade un "..." fijo tras el label (S("...") en klaro.js); se deja
   tal cual ("Ajustes...") — es un patrón correcto para un botón que abre un
   panel y evita hacks frágiles/inaccesibles para ocultarlo. */
.klaro .cookie-notice .cm-link.cn-learn-more {
  flex: 0 0 auto !important;
}

/* Neutraliza el azul de "Confirmar selección" (lleva cm-btn-info). */
.klaro .cookie-modal .cm-modal .cm-btn.cm-btn-info {
  background-color: transparent !important;
  color: var(--uroboroxWhite) !important;
  border: 1px solid var(--uroboroxGray500) !important;
}

/* ── CTA "Aceptar todo": verde sólido de marca + texto oscuro. SOLO Aceptar
      todo — banner: cm-btn-success (único success ahí); modal: cm-btn-accept-all
      (NO cm-btn-accept, que es "Confirmar selección"). ── */
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-modal .cm-btn.cm-btn-accept-all {
  background-color: var(--uroboroxGreen400) !important;
  color: var(--uroboroxEmerald950) !important;
  border: 1px solid var(--uroboroxGreen400) !important;
  font-weight: 600 !important;
}
.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-modal .cm-btn.cm-btn-accept-all:hover {
  background-color: var(--uroboroxGreen500) !important;
  border-color: var(--uroboroxGreen500) !important;
  color: var(--uroboroxEmerald950) !important;
}

/* "Confirmar selección" (cm-btn-accept SIN -all) queda SECUNDARIO, aunque
   comparta cm-btn-success con "Aceptar todo". */
.klaro .cookie-modal .cm-modal .cm-btn.cm-btn-accept:not(.cm-btn-accept-all) {
  background-color: transparent !important;
  color: var(--uroboroxWhite) !important;
  border: 1px solid var(--uroboroxGray500) !important;
  font-weight: normal !important;
}

/* ── Espaciado/distribución: gap uniforme, botones agrupados a la derecha,
      "Aceptar todo" el último (resaltado). ── */
/* Banner: .cn-ok agrupa [Personalizar | .cn-buttons]; .cn-buttons los 2 botones.
   Mismo gap en ambos → separación uniforme entre los tres. */
.klaro .cookie-notice .cn-ok {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap;   /* cabe en una fila en desktop; en pantallas muy estrechas puede envolver con gracia */
}
.klaro .cookie-notice .cn-buttons {
  display: flex !important;
  gap: 10px !important;
}
/* Alineación vertical de "Ajustes..." (<a>, hijo directo de .cn-ok) con
   "Denegar"/"Aceptar" (<button>, dentro de .cn-buttons). MEDIDO en :3000: las
   tres cajas miden 33px iguales, pero el <a> quedaba 3.5px más arriba. Causa:
   Klaro da margin-top:7px a los .cm-btn, lo que infla la margin-box de
   .cn-buttons a 47px frente a los 40px del <a>; align-items:center de .cn-ok
   centra cada una por separado → 3.5px de desfase. Al quitar ese margin-top,
   ambas margin-box quedan en 40px y los tres se alinean (mismo top, alto 33). */
.klaro .cookie-notice .cn-buttons .cm-btn {
  margin-top: 0 !important;
}
/* Modal: por defecto es flex con space-between (estirado). Lo agrupamos a la
   derecha con el mismo gap. */
.klaro .cookie-modal .cm-modal .cm-footer-buttons {
  justify-content: flex-end !important;
  gap: 10px !important;
}

/* ── Interruptor de Analíticas: verde de marca cuando está activo ───────── */
.klaro .cookie-modal .cm-modal .cm-switch input:checked + .slider,
.klaro .cookie-modal .cm-modal .cm-list-input:checked + .cm-list-label .slider {
  background-color: var(--uroboroxGreen400) !important;
}

/* ── X de cierre: visible sobre fondo oscuro ────────────────────────────── */
.klaro .cookie-modal .cm-modal .cm-btn-close {
  color: var(--uroboroxWhite) !important;
  opacity: 0.85;
}