/*!
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  Securitas Direct — Landing Page  ·  cookies.css            ║
 * ║  Desarrollado por Alejandro Pérez Fernández (BeCall)        ║
 * ║  © 2025 BeCall · Distribuidor Autorizado Securitas Direct    ║
 * ╚══════════════════════════════════════════════════════════════╝
 */
/* ═══════════════════════════════════════════════════════════════════════════
   cookies.css — Banner de cookies + Panel de preferencias
   Paleta: idéntica a styles.css (--sd-red, --sd-dark, Inter)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables locales (heredan de :root cuando se usa junto a styles.css) ── */
.sd-ck-btn,
#sd-ck-banner,
#sd-ck-panel {
  --ck-red:         #e50914;
  --ck-red-hover:   #c4070f;
  --ck-dark:        #0b0b0c;
  --ck-gray:        #6b7280;
  --ck-light:       #f8f9fa;
  --ck-border:      #e5e7eb;
  --ck-radius:      12px;
  --ck-radius-sm:   8px;
  --ck-shadow:      0 8px 40px rgba(0,0,0,.18);
  --ck-font:        'Inter', 'Segoe UI', system-ui, sans-serif;
  --ck-transition:  .28s cubic-bezier(.4,0,.2,1);
}

/* ── Utilidad global ────────────────────────────────────────────────────── */
.sd-ck-noscroll { overflow: hidden !important; }

/* ── Botón inline tipo texto ────────────────────────────────────────────── */
.sd-ck-text-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--ck-red);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sd-ck-text-btn:hover { color: var(--ck-red-hover); }

/* ══════════════════════════════════════════════════════════════════════════
   BOTONES COMPARTIDOS
   ══════════════════════════════════════════════════════════════════════════ */
.sd-ck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--ck-radius-sm);
  font-family: var(--ck-font);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  padding: 9px 18px;
  transition: background var(--ck-transition), transform var(--ck-transition),
              box-shadow var(--ck-transition), color var(--ck-transition);
}
.sd-ck-btn:focus-visible {
  outline: 2px solid var(--ck-red);
  outline-offset: 2px;
}

/* Primario — rojo sólido */
.sd-ck-btn--primary {
  background: linear-gradient(135deg, var(--ck-red) 0%, var(--ck-red-hover) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(229,9,20,.30);
}
.sd-ck-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(229,9,20,.40);
}
.sd-ck-btn--primary:active { transform: none; box-shadow: none; }

/* Outline — borde rojo, fondo transparente */
.sd-ck-btn--outline {
  background: transparent;
  color: var(--ck-red);
  border: 1.5px solid var(--ck-red);
}
.sd-ck-btn--outline:hover {
  background: rgba(229,9,20,.06);
  transform: translateY(-1px);
}

/* Ghost — texto oscuro, fondo suave */
.sd-ck-btn--ghost {
  background: var(--ck-light);
  color: #374151;
  border: 1.5px solid var(--ck-border);
}
.sd-ck-btn--ghost:hover { background: #eef0f3; }

/* Dark — botón sólido oscuro (rechazar, mismo peso visual que primary) */
.sd-ck-btn--dark {
  background: #1f2937;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.20);
}
.sd-ck-btn--dark:hover {
  background: #111827;
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(0,0,0,.28);
}
.sd-ck-btn--dark:active { transform: none; box-shadow: none; }

/* ══════════════════════════════════════════════════════════════════════════
   BANNER
   ══════════════════════════════════════════════════════════════════════════ */
#sd-ck-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  background: var(--ck-dark);
  color: #fff;
  padding: 18px 24px;
  box-shadow: 0 -4px 24px rgba(0,0,0,.25);

  /* entrada por abajo */
  transform: translateY(100%);
  transition: transform var(--ck-transition);
}
#sd-ck-banner.sd-ck-banner--in {
  transform: translateY(0);
}

.sd-ck-banner__wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.sd-ck-banner__left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 340px;
}

.sd-ck-banner__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: rgba(229,9,20,.18);
  border-radius: 50%;
  font-size: 1.25rem;
  color: var(--ck-red);
}

.sd-ck-banner__title {
  font-family: var(--ck-font);
  font-weight: 700;
  font-size: .96rem;
  margin: 0 0 2px;
  line-height: 1.3;
}

.sd-ck-banner__desc {
  font-family: var(--ck-font);
  font-size: .80rem;
  color: rgba(255,255,255,.72);
  margin: 0;
  line-height: 1.5;
}

.sd-ck-banner__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Enlace "Personalizar" dentro del banner (fondo oscuro) */
.sd-ck-manage-link {
  color: rgba(255,255,255,.65) !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 4px 2px;
  order: -1;   /* siempre primero */
}
.sd-ck-manage-link:hover { color: #fff !important; }

/* Móvil */
@media (max-width: 600px) {
  #sd-ck-banner { padding: 16px; }
  .sd-ck-banner__wrap { gap: 14px; }
  .sd-ck-banner__actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  /* "Personalizar" ocupa toda la fila, centrado y pequeño */
  .sd-ck-manage-link {
    grid-column: 1 / -1;
    text-align: center;
    order: 0;
  }
  /* Rechazar y Aceptar — misma columna, mismo tamaño */
  #sd-ck-reject { order: 1; }
  #sd-ck-accept { order: 2; }
  .sd-ck-banner__actions .sd-ck-btn { font-size: .82rem; padding: 10px 8px; }
  .sd-ck-banner__icon { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PANEL DE PREFERENCIAS
   ══════════════════════════════════════════════════════════════════════════ */
#sd-ck-panel {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Fondo oscuro */
.sd-ck-panel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--ck-transition);
}
#sd-ck-panel.sd-ck-panel--in .sd-ck-panel__backdrop { opacity: 1; }

/* Caja del panel */
.sd-ck-panel__box {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  background: #fff;
  border-radius: var(--ck-radius);
  box-shadow: var(--ck-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  transform: translateY(24px) scale(.97);
  opacity: 0;
  transition: transform var(--ck-transition), opacity var(--ck-transition);
}
#sd-ck-panel.sd-ck-panel--in .sd-ck-panel__box {
  transform: none;
  opacity: 1;
}

/* Cabecera */
.sd-ck-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 18px;
  border-bottom: 1px solid var(--ck-border);
  background: linear-gradient(135deg, var(--ck-red) 0%, var(--ck-red-hover) 100%);
  color: #fff;
  flex-shrink: 0;
}

.sd-ck-panel__header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sd-ck-panel__header-icon {
  font-size: 1.3rem;
  opacity: .9;
}

.sd-ck-panel__title {
  font-family: var(--ck-font);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -.01em;
}

.sd-ck-panel__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.35);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--ck-transition);
  flex-shrink: 0;
}
.sd-ck-panel__close:hover { background: rgba(255,255,255,.28); }
.sd-ck-panel__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Cuerpo con scroll */
.sd-ck-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
  overscroll-behavior: contain;
}

.sd-ck-panel__intro {
  font-family: var(--ck-font);
  font-size: .84rem;
  color: #4b5563;
  line-height: 1.6;
  margin: 0 0 20px;
}

/* Filas de categorías */
.sd-ck-pref-rows { display: flex; flex-direction: column; gap: 0; }

.sd-ck-pref-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ck-border);
}
.sd-ck-pref-row:last-child { border-bottom: none; }

.sd-ck-pref-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(229,9,20,.08);
  color: var(--ck-red);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.sd-ck-pref-info {
  flex: 1;
  min-width: 0;
}

.sd-ck-pref-label {
  font-family: var(--ck-font);
  font-weight: 700;
  font-size: .88rem;
  color: #111827;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sd-ck-always-badge {
  font-size: .70rem;
  font-weight: 600;
  color: #059669;
  background: rgba(5,150,105,.10);
  border: 1px solid rgba(5,150,105,.25);
  border-radius: 99px;
  padding: 1px 8px;
}

.sd-ck-pref-desc {
  font-family: var(--ck-font);
  font-size: .78rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.55;
}

/* ── Toggle switch ──────────────────────────────────────────────────────── */
.sd-ck-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 4px;
}
.sd-ck-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

.sd-ck-toggle__track {
  position: relative;
  width: 44px;
  height: 24px;
  background: #d1d5db;
  border-radius: 99px;
  transition: background var(--ck-transition);
  flex-shrink: 0;
}
.sd-ck-toggle input:checked + .sd-ck-toggle__track {
  background: var(--ck-red);
}
.sd-ck-toggle input:disabled + .sd-ck-toggle__track {
  background: #059669;   /* verde = siempre activa */
  opacity: .7;
  cursor: not-allowed;
}
.sd-ck-toggle:has(input:disabled) { cursor: not-allowed; }

.sd-ck-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform var(--ck-transition);
}
.sd-ck-toggle input:checked ~ .sd-ck-toggle__track .sd-ck-toggle__thumb,
.sd-ck-toggle input:disabled ~ .sd-ck-toggle__track .sd-ck-toggle__thumb {
  transform: translateX(20px);
}
.sd-ck-toggle:focus-within .sd-ck-toggle__track {
  outline: 2px solid var(--ck-red);
  outline-offset: 2px;
}

/* Pie del panel */
.sd-ck-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--ck-border);
  background: #f9fafb;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Rechazar + Aceptar — siempre juntos a la derecha, mismo tamaño */
.sd-ck-panel__footer-main {
  display: flex;
  gap: 10px;
  align-items: center;
}
.sd-ck-panel__footer-main .sd-ck-btn {
  min-width: 130px;
  justify-content: center;
}

/* Móvil */
@media (max-width: 520px) {
  .sd-ck-panel__footer {
    flex-direction: column;
    align-items: stretch;
  }
  .sd-ck-panel__footer-main { flex-direction: row; }
  .sd-ck-panel__footer-main .sd-ck-btn { flex: 1; min-width: 0; }
  .sd-ck-panel__footer > .sd-ck-btn { width: 100%; justify-content: center; }
  .sd-ck-pref-row { gap: 10px; }
  .sd-ck-pref-icon { width: 32px; height: 32px; font-size: .9rem; }
}