/* =========================================================
   CSS VARIABLES (fuente única de verdad)
========================================================= */
:root {
  --klaro-bg: #ffffff;
  --klaro-text: #000000;
  --klaro-accent: #0400ff;
  --klaro-accent-inactive: #52525b;
  --klaro-btn-text: #ffffff;
  --klaro-border: #27272a;
}

/* =========================================================
   MAPEO de variables internas de Klaro (CLAVE)
========================================================= */
#klaro {
  --green1: var(--klaro-accent);
  --green2: var(--klaro-accent);
}

/* =========================================================
   OVERLAY
========================================================= */
#klaro .cookie-modal .cm-bg {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* =========================================================
   MODAL
========================================================= */
#klaro .cm-modal.cm-klaro {
  background: var(--klaro-bg) !important;
  color: var(--klaro-text) !important;
  border: 1px solid var(--klaro-border) !important;
  border-radius: 16px !important;
}

/* =========================================================
   TEXTO
========================================================= */
#klaro .cm-modal,
#klaro .cm-modal * {
  color: var(--klaro-text) !important;
}

/* =========================================================
   LINKS
========================================================= */
#klaro a {
  color: var(--klaro-accent) !important;
}

/* =========================================================
   BOTONES
========================================================= */
#klaro .cm-btn {
  border-radius: 999px !important;
  font-weight: 600;
  padding: 5px 10px;
}

#klaro .cm-btn-accept,
#klaro .cm-btn-accept-all {
  background: var(--klaro-accent) !important;
  color: var(--klaro-btn-text) !important;
}

#klaro .cm-btn-decline {
  background: transparent !important;
  border: 1px solid var(--klaro-border) !important;
  color: var(--klaro-text) !important;
}

/* =========================================================
   SWITCHES – LÓGICA REAL DE KLARO
========================================================= */

/* OFF (default) */
#klaro .cm-list-input + .cm-list-label .slider {
  background-color: var(--klaro-accent-inactive) !important;
}

/* ON (checked) */
#klaro .cm-list-input:checked + .cm-list-label .slider {
  background-color: var(--klaro-accent) !important;
}

/* HALF-CHECKED */
#klaro .cm-list-input.half-checked:checked + .cm-list-label .slider {
  background-color: var(--klaro-accent) !important;
  opacity: 0.6;
}

#klaro .cm-list-input.half-checked:checked + .cm-list-label .slider::before {
  transform: translateX(10px);
}

/* REQUIRED / ONLY-REQUIRED */
#klaro .cm-list-input.only-required + .cm-list-label .slider,
#klaro .cm-list-input.required:checked + .cm-list-label .slider {
  background-color: var(--klaro-accent) !important;
  opacity: 0.8;
  cursor: not-allowed;
}

/* =========================================================
   LIMPIEZA
========================================================= */
#klaro .cm-powered-by {
  display: none !important;
}