/* === Klaro overrides - Estilo Hackability === */
.klaro {
  --font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --font-size: 15px;

  /* Paleta Hackability */
  --dark1: #000000;   /* fondo absoluto */
  --dark2: #111111;   /* separadores */
  --dark3: #1f1f1f;   /* gris profundo */

  --light1: #FFFFFF;  /* texto principal */
  --light2: #D1D5DB;  /* texto secundario */
  --light3: #9CA3AF;  /* meta/ayuda */

  /* Acento Hackability */
  --red1: #ff1a1a;
  --red2: #cc0000; 

  --border-radius: 12px;
}

/* Banner y modal */
.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(239,68,68,0.35); /* borde rojo translúcido */
  border-radius: var(--border-radius);
  box-shadow: 0 12px 25px rgba(0,0,0,0.75);
}

/* Encabezados */
.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal h3 {
  font-weight: 700;
  color: var(--red1) !important;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* Texto */
.klaro .cookie-modal p,
.klaro .cookie-notice p {
  color: var(--light2) !important;
  font-size: 0.95rem;
  line-height: 1.5;
}

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

/* Botones */
.klaro .cm-btn {
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease-in-out;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

/* Botón aceptar (rojo principal) */
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept {
  background: var(--red1) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 0 12px rgba(239,68,68,0.5);
}
.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-accept:hover {
  background: var(--red2) !important;
}

/* Botón rechazar (oscuro con borde) */
.klaro .cm-btn.cm-btn-close,
.klaro .cm-btn.cm-btn-decline {
  background: transparent !important;
  color: var(--light1) !important;
  border: 1px solid var(--light3) !important;
}
.klaro .cm-btn.cm-btn-close:hover,
.klaro .cm-btn.cm-btn-decline:hover {
  background: rgba(239,68,68,0.1) !important;
}

/* Switches estilo “hacker” */
.klaro .cm-list-label .slider {
  background: #1a1a1a !important;
  border: 1px solid rgba(255,255,255,0.15);
}
.klaro .cm-list-input:checked + .cm-list-label .slider {
  background: var(--red1) !important;
}
.klaro .cm-list-label .slider::before {
  background: #fff !important;
}

/* Footer powered-by */
.klaro .cm-powered-by {
  color: var(--light3) !important;
  opacity: .6;
  font-size: 0.8rem;
}