/**
 * css/wiclee-cookie-consent.css — Banner, modal y FAB de consentimiento de cookies.
 *
 * Lo carga templates/home/paginaHome.twig. Tokens de css/tokens.css.
 * Botones: .wiclee-btn de wiclee-components.css (DESIGN.md §6.2).
 * Scroll del cuerpo: .wiclee-scroll-native (DESIGN.md §6.12).
 * Sin hex ni estilos en línea. Animaciones con prefers-reduced-motion.
 */

/* ---------- Banner inferior (superficie clara de marca) ---------- */

.wiclee-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: var(--wiclee-space-md) var(--wiclee-space-md) calc(var(--wiclee-space-md) + env(safe-area-inset-bottom, 0));
  border-top: 0.25rem solid var(--wiclee-primary);
  background: var(--wiclee-bg-card);
  color: var(--wiclee-text);
  box-shadow: var(--wiclee-shadow-lg);
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.4s ease-out,
    opacity 0.35s ease-out,
    visibility 0.35s;
}

.wiclee-cookie-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wiclee-cookie-banner__inner {
  display: flex;
  flex-direction: column;
  gap: var(--wiclee-space-md);
  width: min(72rem, 100%);
  margin: 0 auto;
}

.wiclee-cookie-banner__copy {
  display: flex;
  align-items: flex-start;
  gap: var(--wiclee-space-md);
  min-width: 0;
}

.wiclee-cookie-banner__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--wiclee-radius-full);
  background: var(--wiclee-primary-100);
  color: var(--wiclee-primary-900);
}

.wiclee-cookie-banner__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.wiclee-cookie-banner__title {
  margin: 0 0 var(--wiclee-space-xs);
  color: var(--wiclee-text);
  font-size: var(--wiclee-font-size-md);
  font-weight: var(--wiclee-font-weight-bold);
  line-height: 1.3;
}

.wiclee-cookie-banner__text {
  margin: 0;
  color: var(--wiclee-text-secondary);
  font-size: var(--wiclee-font-size-sm);
  line-height: 1.5;
}

.wiclee-cookie-banner__text a {
  color: var(--wiclee-primary-800);
  font-weight: var(--wiclee-font-weight-bold);
  text-underline-offset: 0.15em;
}

.wiclee-cookie-banner__text a:hover {
  color: var(--wiclee-primary-900);
}

.wiclee-cookie-banner__text a:focus-visible {
  outline: 0.125rem solid var(--wiclee-primary);
  outline-offset: 0.125rem;
  border-radius: var(--wiclee-radius-sm);
}

.wiclee-cookie-banner__actions {
  display: flex;
  flex-direction: column;
  gap: var(--wiclee-space-sm);
  flex-shrink: 0;
}

/* ---------- Modal ---------- */

.wiclee-cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: color-mix(in srgb, var(--wiclee-text) 40%, transparent);
  -webkit-backdrop-filter: blur(0.25rem);
  backdrop-filter: blur(0.25rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.wiclee-cookie-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wiclee-cookie-modal__dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: min(92vh, 40rem);
  overflow: hidden;
  border-radius: var(--wiclee-radius-2xl) var(--wiclee-radius-2xl) 0 0;
  background: var(--wiclee-bg-card);
  box-shadow: var(--wiclee-shadow-lg);
  transform: translateY(1.5rem) scale(0.98);
  opacity: 0;
  transition:
    transform 0.3s ease-out,
    opacity 0.3s ease-out;
}

.wiclee-cookie-modal.is-open .wiclee-cookie-modal__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.wiclee-cookie-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wiclee-space-md);
  padding: var(--wiclee-space-lg);
  border-bottom: 0;
  background: var(--wiclee-primary-600);
  color: var(--wiclee-text-inverse);
}

.wiclee-cookie-modal__title {
  margin: 0;
  color: var(--wiclee-text-inverse);
  font-size: var(--wiclee-font-size-lg);
  font-weight: var(--wiclee-font-weight-bold);
  line-height: 1.25;
}

.wiclee-cookie-modal__header .wiclee-cookie-modal__close.wiclee-btn--ghost {
  flex-shrink: 0;
  min-width: 2.75rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--wiclee-text-inverse);
}

.wiclee-cookie-modal__header .wiclee-cookie-modal__close.wiclee-btn--ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--wiclee-text-inverse) 16%, transparent);
  color: var(--wiclee-text-inverse);
}

.wiclee-cookie-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--wiclee-space-lg);
  color: var(--wiclee-text);
}

.wiclee-cookie-modal__intro {
  margin: 0 0 var(--wiclee-space-lg);
  color: var(--wiclee-text-secondary);
  font-size: var(--wiclee-font-size-sm);
  line-height: 1.55;
}

.wiclee-cookie-category {
  margin-bottom: var(--wiclee-space-md);
  border: 0.0625rem solid var(--wiclee-border);
  border-radius: var(--wiclee-radius-lg);
  overflow: hidden;
  background: var(--wiclee-bg-card);
}

.wiclee-cookie-category__head {
  padding: var(--wiclee-space-md);
  border-bottom: 0.0625rem solid var(--wiclee-border);
  background: var(--wiclee-bg-muted);
}

.wiclee-cookie-category__title {
  margin: 0 0 var(--wiclee-space-xs);
  color: var(--wiclee-text);
  font-size: var(--wiclee-font-size-md);
  font-weight: var(--wiclee-font-weight-bold);
  line-height: 1.3;
}

.wiclee-cookie-category__desc {
  margin: 0;
  color: var(--wiclee-text-muted);
  font-size: var(--wiclee-font-size-xs);
  line-height: 1.45;
}

.wiclee-cookie-category__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wiclee-space-md);
  padding: var(--wiclee-space-md);
}

.wiclee-cookie-category__label {
  margin: 0;
  color: var(--wiclee-text);
  font-size: var(--wiclee-font-size-sm);
  line-height: 1.45;
}

.wiclee-cookie-category__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 var(--wiclee-space-sm);
  border-radius: var(--wiclee-radius-full);
  background: var(--wiclee-primary-100);
  color: var(--wiclee-primary-900);
  font-size: var(--wiclee-font-size-xs);
  font-weight: var(--wiclee-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wiclee-cookie-switch {
  position: relative;
  flex-shrink: 0;
  width: 3rem;
  height: 1.75rem;
}

.wiclee-cookie-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.wiclee-cookie-switch__track {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--wiclee-radius-full);
  background: var(--wiclee-border-strong);
  transition: background-color 0.2s ease;
}

.wiclee-cookie-switch__track::after {
  content: '';
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--wiclee-radius-full);
  background: var(--wiclee-bg-card);
  box-shadow: var(--wiclee-shadow-sm);
  transition: transform 0.2s ease;
}

.wiclee-cookie-switch input:checked + .wiclee-cookie-switch__track {
  background: var(--wiclee-primary);
}

.wiclee-cookie-switch input:checked + .wiclee-cookie-switch__track::after {
  transform: translateX(1.25rem);
}

.wiclee-cookie-switch input:focus-visible + .wiclee-cookie-switch__track {
  outline: 0.125rem solid var(--wiclee-primary);
  outline-offset: 0.125rem;
}

.wiclee-cookie-modal__links {
  margin-top: var(--wiclee-space-md);
  padding: var(--wiclee-space-md);
  border-radius: var(--wiclee-radius-lg);
  background: var(--wiclee-bg-muted);
}

.wiclee-cookie-modal__links-title {
  margin: 0 0 var(--wiclee-space-sm);
  color: var(--wiclee-text);
  font-size: var(--wiclee-font-size-sm);
  font-weight: var(--wiclee-font-weight-bold);
}

.wiclee-cookie-modal__links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wiclee-cookie-modal__links li + li {
  margin-top: var(--wiclee-space-xs);
}

.wiclee-cookie-modal__links a {
  color: var(--wiclee-primary-800);
  font-size: var(--wiclee-font-size-sm);
  font-weight: var(--wiclee-font-weight-bold);
  text-underline-offset: 0.15em;
}

.wiclee-cookie-modal__links a:hover {
  color: var(--wiclee-primary-900);
}

.wiclee-cookie-modal__footer {
  display: flex;
  flex-direction: column;
  gap: var(--wiclee-space-sm);
  padding: var(--wiclee-space-md) var(--wiclee-space-lg) calc(var(--wiclee-space-lg) + env(safe-area-inset-bottom, 0));
  border-top: 0.0625rem solid var(--wiclee-border);
  background: var(--wiclee-bg-muted);
}

/* ---------- FAB configurar cookies ---------- */

.wiclee-cookie-fab {
  position: fixed;
  left: var(--wiclee-space-md);
  bottom: calc(var(--wiclee-space-md) + env(safe-area-inset-bottom, 0));
  z-index: 45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wiclee-space-sm);
  min-width: 3.5rem;
  min-height: 3.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--wiclee-radius-lg);
  background: var(--wiclee-primary);
  color: var(--wiclee-text-inverse);
  box-shadow: var(--wiclee-shadow-lg);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.5rem);
  transition:
    background-color 0.2s ease,
    transform 0.25s ease,
    opacity 0.25s ease,
    visibility 0.25s;
}

.wiclee-cookie-fab.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.wiclee-cookie-fab:hover {
  background: var(--wiclee-primary-600);
  transform: translateY(-0.125rem);
}

.wiclee-cookie-fab:focus-visible {
  outline: 0.125rem solid var(--wiclee-accent);
  outline-offset: 0.1875rem;
}

.wiclee-cookie-fab svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.wiclee-cookie-fab__label {
  display: none;
  padding-right: var(--wiclee-space-md);
  font-size: var(--wiclee-font-size-sm);
  font-weight: var(--wiclee-font-weight-medium);
  white-space: nowrap;
}

/* Banner abierto: subir FAB PWA para no taparlo */
body.wiclee-cookie-banner-open .wiclee-pwa-fab {
  bottom: calc(11.5rem + env(safe-area-inset-bottom, 0));
}

/* ---------- Breakpoints ---------- */

@media (min-width: 640px) {
  .wiclee-cookie-banner__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .wiclee-cookie-modal__footer {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (min-width: 768px) {
  .wiclee-cookie-banner {
    padding: var(--wiclee-space-lg) var(--wiclee-space-xl) calc(var(--wiclee-space-lg) + env(safe-area-inset-bottom, 0));
  }

  .wiclee-cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .wiclee-cookie-banner__copy {
    align-items: center;
    flex: 1 1 auto;
  }

  .wiclee-cookie-modal {
    align-items: center;
    padding: var(--wiclee-space-lg);
  }

  .wiclee-cookie-modal__dialog {
    width: min(32rem, 100%);
    max-height: min(85vh, 40rem);
    border-radius: var(--wiclee-radius-2xl);
  }

  .wiclee-cookie-fab {
    left: var(--wiclee-space-xl);
    bottom: var(--wiclee-space-xl);
    min-width: auto;
    min-height: 2.5rem;
    padding: 0 0 0 var(--wiclee-space-md);
    border-radius: var(--wiclee-radius-lg);
  }

  .wiclee-cookie-fab__label {
    display: inline;
  }

  body.wiclee-cookie-banner-open .wiclee-pwa-fab {
    bottom: calc(8.5rem + env(safe-area-inset-bottom, 0));
  }
}

@media (prefers-reduced-motion: reduce) {
  .wiclee-cookie-banner,
  .wiclee-cookie-modal,
  .wiclee-cookie-modal__dialog,
  .wiclee-cookie-fab,
  .wiclee-cookie-switch__track,
  .wiclee-cookie-switch__track::after {
    transition: none;
  }
}