/* === Klaro overrides - Estilo SOCDefense === */

/* 1) Variables y tokens SOCDefense (aprovechando el sistema de custom props de Klaro) */
.klaro {
  --font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --font-size: 15px;

  /* Paleta oscura SOC */
  --dark1: #0A0F1C;   /* fondo tarjetas/modales */
  --dark2: #151C2B;   /* bordes/separadores */
  --dark3: #293244;   /* texto secundario, íconos */

  --light1: #F7FAFC;  /* texto principal en oscuro */
  --light2: #AAB6C7;  /* texto secundario */
  --light3: #7F8BA0;  /* meta/ayuda */

  /* Acentos SOC (azul -> verde) */
  --blue1: #0EA5E9;
  --blue2: #60A5FA;
  --green1: #22C55E;
  --green2: #10B981;
  --green3: #48DFB2;

  --border-radius: 16px;
  --border-width: 1px;
  --border-style: solid;

  /* Posición del banner en desktop */
  --notice-position: fixed;
  --notice-right: 24px;
  --notice-bottom: 24px;
  --notice-top: auto;
  --notice-left: auto;
  --notice-max-width: 440px;
}

/* 2) Banner y modal: fondos, bordes, sombras tipo “card” SOC */
.klaro .cookie-notice:not(.cookie-modal-notice),
.klaro .cookie-modal .cm-modal.cm-klaro,
.klaro .cookie-modal-notice {
  background: var(--dark1) !important;
  color: var(--light1) !important;
  border: 1px solid rgba(96, 165, 250, 0.18); /* azul suave */
  border-radius: var(--border-radius);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.55),
    0 0 0 1px rgba(34, 197, 94, 0.10);       /* sutil halo verde */
  backdrop-filter: saturate(120%) blur(6px);
}

/* 3) Encabezados y texto */
.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal h3,
.klaro .cookie-modal h4,
.klaro .cookie-modal h5,
.klaro .cookie-modal h6 {
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--light1) !important;
}

.klaro .cookie-modal p,
.klaro .cookie-notice p,
.klaro .context-notice p {
  color: var(--light2) !important;
}

.klaro .cookie-modal .cm-body ul.cm-services li.cm-service p.purposes {
  color: var(--light3) !important;
}

/* 4) Links */
.klaro a,
.klaro .cm-link {
  color: var(--blue1) !important;
  text-decoration: underline;
}

/* 5) Botones: primario gradiente, secundario contorno */
.klaro .cm-btn {
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
  border: none !important;
}

.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept {
  background: linear-gradient(90deg, var(--blue1), var(--green1)) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(14,165,233,.25);
}
.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-accept:hover {
  transform: translateY(-1px);
  opacity: .95;
}

.klaro .cm-btn.cm-btn-close,
.klaro .cm-btn.cm-btn-info,
.klaro .cm-btn.cm-btn-decline {
  background: transparent !important;
  color: var(--light1) !important;
  border: 1px solid rgba(148, 163, 184, 0.32) !important; /* gris azulado */
}
.klaro .cm-btn.cm-btn-decline:hover,
.klaro .cm-btn.cm-btn-close:hover,
.klaro .cm-btn.cm-btn-info:hover {
  background: rgba(96,165,250,0.10) !important;
}

/* 6) Switches (toggles) con gradiente SOC */
.klaro .cm-list-label .slider {
  background: #101827 !important;
  border: 1px solid rgba(148, 163, 184, 0.25);
}
.klaro .cm-list-input:checked + .cm-list-label .slider,
.klaro .cm-list-input.half-checked:checked + .cm-list-label .slider {
  background: linear-gradient(90deg, var(--blue1), var(--green1)) !important;
  border-color: transparent;
}
.klaro .cm-list-label .slider::before {
  background: #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}

/* 7) Separadores y cabeceras del modal */
.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-footer,
.klaro .cookie-modal .cm-switch-container {
  border-color: var(--dark2) !important;
}

/* 8) Lista de servicios/purpósitos: títulos más marcados */
.klaro .cm-list-title {
  font-weight: 700 !important;
  color: var(--light1) !important;
}
.klaro .cm-list-description {
  color: var(--light3) !important;
}

/* 9) Posición y layout del banner (desktop) */
@media (min-width: 1024px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    right: var(--notice-right);
    bottom: var(--notice-bottom);
    left: var(--notice-left);
    top: var(--notice-top);
    max-width: var(--notice-max-width);
  }
}

/* 10) “Powered by” más discreto */
.klaro .cm-powered-by,
.klaro .cm-powered-by a {
  color: var(--dark3) !important;
  opacity: .7;
}