/* Cookies · mismo lenguaje visual que Conecta Lab (tokens + .btn) */

:root {
  /* Deja visible el pie al hacer scroll hasta el final (banner + botón flotante). */
  --cookies-despeje-pie: clamp(56px, 8vh, 84px);
}

.cookies-banner {
  position: fixed;
  bottom: var(--cookies-despeje-pie);
  left: 0;
  right: 0;
  z-index: calc(var(--z-modal, 80) + 2);
  padding: var(--e-4) 0;
  background: var(--fondo-velo-2);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -12px 40px rgba(16, 40, 64, 0.12);
  backdrop-filter: blur(14px);
  animation: cookiesSlideInUp var(--normal) var(--curva-suave);
}

.banner-container {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 clamp(var(--e-4), 3vw, var(--e-6));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
}

.banner-content-cookies p {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t-chico);
  line-height: 1.55;
  color: var(--texto-medio);
}

.banner-content-cookies .policy-link {
  color: var(--azul-claro);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 550;
}

.banner-content-cookies .policy-link:hover {
  color: var(--verde);
}

.banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e-2);
  flex-shrink: 0;
}

.cookies-modal {
  position: fixed;
  bottom: calc(var(--cookies-despeje-pie) + var(--e-4));
  right: clamp(16px, 3vw, 28px);
  left: auto;
  width: min(520px, calc(100vw - 32px));
  z-index: calc(var(--z-modal, 80) + 3);
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  padding: clamp(var(--e-5), 3vw, var(--e-6));
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--superficie-solida);
  border: 1px solid var(--borde);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-3);
}

.close-modal-btn {
  position: absolute;
  top: var(--e-4);
  right: var(--e-4);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--borde-suave);
  border-radius: var(--r-sm);
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--rapido) var(--curva), color var(--rapido) var(--curva),
    background var(--rapido) var(--curva);
}

.close-modal-btn:hover {
  color: var(--texto);
  border-color: var(--borde-fuerte);
  background: #fff;
}

.cookies-header h3 {
  margin: 0 0 var(--e-2);
  padding-right: var(--e-7);
  font-family: var(--fuente-titulo);
  font-size: var(--t-h3);
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--texto);
}

.cookies-header p,
.cookies-modal > .cookies-header p {
  margin: 0;
  font-size: var(--t-chico);
  line-height: 1.55;
  color: var(--texto-suave);
}

.cookies-categories {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.cookie-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
}

.cookie-category.locked {
  background: linear-gradient(180deg, rgba(0, 163, 104, 0.06), var(--superficie-solida));
  border-color: rgba(0, 163, 104, 0.22);
}

.category-info .category-name {
  display: block;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--texto);
}

.category-info .category-desc {
  margin: var(--e-1) 0 0 !important;
  font-size: var(--t-chico);
  color: var(--texto-suave);
}

.toggle-switch-locked {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 28px;
  padding: 0 var(--e-3);
  border-radius: var(--r-pastilla);
  background: var(--verde-bg);
  border: 1px solid rgba(0, 163, 104, 0.35);
}

.slider-locked {
  font-family: var(--fuente-mono);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--verde);
}

.cookies-footer-actions {
  display: flex;
  gap: var(--e-3);
  width: 100%;
}

.cookies-footer-actions .btn {
  flex: 1;
  min-height: 44px;
}

.footer-policy-link {
  display: block;
  margin-top: calc(var(--e-2) * -1);
  text-align: center;
  font-size: var(--t-chico);
  color: var(--azul-claro);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-policy-link:hover {
  color: var(--verde);
}

.cookies-toggle {
  position: fixed;
  bottom: var(--cookies-despeje-pie);
  right: clamp(16px, 3vw, 28px);
  left: auto;
  z-index: var(--z-aviso, 90);
}

.cookies-toggle__btn {
  --btn-fondo: var(--superficie-solida);
  --btn-borde: var(--borde);
  --btn-texto: var(--texto-medio);
  padding: 10px 18px;
  font-size: var(--t-chico);
  font-weight: 550;
  font-family: var(--fuente);
  box-shadow: var(--sombra-2);
  backdrop-filter: blur(10px);
}

.cookies-toggle__btn svg {
  width: 18px;
  height: 18px;
  color: var(--verde);
}

.cookies-toggle__btn:hover {
  --btn-fondo: #ffffff;
  --btn-texto: var(--texto);
  box-shadow: var(--sombra-3);
}

@keyframes cookiesSlideInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cookiesSlideOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(24px);
  }
}

@media (max-width: 767px) {
  :root {
    --cookies-despeje-pie: clamp(72px, 12vh, 112px);
  }

  .cookies-modal {
    right: 14px;
    left: 14px;
    width: auto;
    bottom: calc(var(--cookies-despeje-pie) + var(--e-3));
    max-height: min(70vh, 520px);
    overflow-y: auto;
  }

  .banner-container {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: var(--e-4);
  }

  .banner-actions {
    justify-content: center;
  }

  .cookies-footer-actions {
    flex-direction: column;
  }

  .cookies-toggle {
    right: 14px;
    max-width: calc(100vw - 28px);
  }

  .cookies-toggle__btn {
    white-space: normal;
    text-align: left;
    max-width: min(100%, 280px);
  }
}