/* cookie-consent.css — Banner de cookies, panel de preferencias y la capa
   <dialog> compartida (.wh-capa) que también usa legal-modal.css.
   Tokens de variables.css; cada var() lleva respaldo oscuro para las páginas
   que no cargan variables.css (invitacion.php, acceso-denegado.php). */

/* ── Capa <dialog> compartida ─────────────────────────────────── */
dialog.wh-capa {
  /* El reset global `* { margin: 0 }` de las páginas quita el margin:auto
     del navegador y la capa quedaba pegada arriba a la izquierda. */
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-main, #e0e0e0);
  max-width: none;
  max-height: none;
  overflow: visible;
  font-family: var(--font-body, 'Inter', 'Segoe UI', sans-serif);
}
dialog.wh-capa::backdrop {
  background: rgba(12, 10, 8, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: wh-capa-fondo 0.2s var(--ease-out, ease-out);
}
dialog.wh-capa[open] > * { animation: wh-capa-entra 0.28s var(--ease-out, cubic-bezier(.22,1,.36,1)); }
dialog.wh-capa.wh-capa--saliendo > * { animation: wh-capa-sale 0.17s ease-in forwards; }
dialog.wh-capa.wh-capa--saliendo::backdrop { opacity: 0; transition: opacity 0.17s ease-in; }
html.wh-capa-abierta { overflow: hidden; }

@keyframes wh-capa-fondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes wh-capa-entra { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes wh-capa-sale  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px); } }

/* ── Banner (barra inferior, no bloquea) ──────────────────────── */
.wh-cc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--wh-cc-nav, 0px) + 16px + env(safe-area-inset-bottom, 0px));
  z-index: 10010;               /* sobre la barra móvil (9999) y botones flotantes */
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 28px;
  padding: 18px 22px;
  background: var(--color-bg-panel, #2d2d2d);
  color: var(--color-text-main, #e0e0e0);
  border: 1px solid var(--color-border-light, #4a4a4a);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), 0 2px 6px rgba(0, 0, 0, 0.25);
  font-family: var(--font-body, 'Inter', 'Segoe UI', sans-serif);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.22s var(--ease-out, ease-out), transform 0.32s var(--ease-out, cubic-bezier(.22,1,.36,1));
}
[data-theme="light"] .wh-cc { box-shadow: 0 16px 40px rgba(43, 38, 32, 0.16), 0 2px 6px rgba(43, 38, 32, 0.08); }
.wh-cc[hidden] { display: none; }
.wh-cc.wh-cc--visible { opacity: 1; transform: none; }

.wh-cc-titulo {
  margin: 0 0 4px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-main, #e0e0e0);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wh-cc-titulo svg { width: 18px; height: 18px; stroke-width: 1.75; color: var(--color-accent, #c9a96e); flex-shrink: 0; }
.wh-cc-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted, #a0a0a0);
  max-width: 68ch;
}
.wh-cc-enlaces { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* Enlaces de texto (Configurar / Aviso) y el del pie de página */
.wh-cc-link,
.wh-cc-pie-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-accent, #c9a96e);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 24px;
}
.wh-cc-link:hover,
.wh-cc-pie-link:hover { color: var(--color-text-main, #e0e0e0); text-decoration-thickness: 2px; }
.wh-cc-pie-link { font-size: inherit; color: inherit; }
.wh-cc-pie-link:hover { color: var(--color-accent, #c9a96e); }

.wh-cc-acciones { display: flex; gap: 10px; }

/* Aceptar y Rechazar: MISMO estilo, tamaño y color (ninguno escondido). */
.wh-cc-btn {
  appearance: none;
  min-height: 44px;
  min-width: 128px;
  padding: 0 22px;
  border-radius: 10px;
  border: 1px solid var(--color-primary-dark, #6e5c42);
  background: var(--color-primary-dark, #6e5c42);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: filter 0.15s var(--ease-out, ease-out), transform 0.15s var(--ease-out, ease-out), box-shadow 0.15s;
}
.wh-cc-btn:hover { filter: brightness(1.12); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); }
.wh-cc-btn:active { transform: scale(0.97); }
.wh-cc-btn--sec {
  background: transparent;
  color: var(--color-text-main, #e0e0e0);
  border-color: var(--color-border-light, #4a4a4a);
}
.wh-cc-btn--sec:hover { filter: none; background: var(--color-primary-light, rgba(139,115,85,.15)); }
.wh-cc-btn:focus-visible,
.wh-cc-link:focus-visible,
.wh-cc-pie-link:focus-visible,
.wh-cc-cerrar:focus-visible,
.wh-cc-switch:focus-visible {
  outline: 2px solid var(--color-accent, #c9a96e) !important;
  outline-offset: 2px;
}

.wh-cc-sr {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Panel de preferencias ────────────────────────────────────── */
.wh-cc-hoja {
  width: min(580px, calc(100vw - 32px));
  max-height: min(86dvh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--color-bg-panel, #2d2d2d);
  border: 1px solid var(--color-border-light, #4a4a4a);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
[data-theme="light"] .wh-cc-hoja { box-shadow: 0 24px 64px rgba(43, 38, 32, 0.22); }
.wh-cc-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px 24px;
  border-bottom: 1px solid var(--color-border, #3d3d3d);
}
.wh-cc-panel-titulo {
  margin: 0;
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-main, #e0e0e0);
}
.wh-cc-cerrar,
.wh-legal-cerrar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted, #a0a0a0);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.wh-cc-cerrar:hover,
.wh-legal-cerrar:hover { background: var(--color-primary-light, rgba(139,115,85,.15)); color: var(--color-text-main, #e0e0e0); }
.wh-cc-cerrar svg,
.wh-legal-cerrar svg { width: 20px; height: 20px; stroke-width: 2; }

.wh-cc-cuerpo {
  padding: 16px 24px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.wh-cc-intro { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--color-text-muted, #a0a0a0); }
.wh-cc-cats { list-style: none; margin: 0; padding: 0; }
.wh-cc-cat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border, #3d3d3d);
}
.wh-cc-cat:last-child { border-bottom: 0; }
.wh-cc-cat-nombre { display: block; font-size: 15px; font-weight: 600; color: var(--color-text-main, #e0e0e0); margin-bottom: 4px; cursor: pointer; }
.wh-cc-cat-desc { margin: 0; font-size: 13px; line-height: 1.55; color: var(--color-text-muted, #a0a0a0); }
.wh-cc-cat-desc code {
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--color-bg-input, #3d3d3d);
  color: var(--color-text-main, #e0e0e0);
}
.wh-cc-cat-ctrl { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 2px; }
.wh-cc-siempre { font-size: 12px; font-weight: 500; color: var(--color-success, #5fb374); white-space: nowrap; }

/* Interruptor (checkbox con role="switch") */
.wh-cc-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 26px;
  margin: 0;
  border-radius: 999px;
  background: var(--color-bg-input, #3d3d3d);
  border: 1px solid var(--color-border-light, #4a4a4a);
  cursor: pointer;
  transition: background 0.2s var(--ease-out, ease-out), border-color 0.2s;
}
.wh-cc-switch::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-text-muted, #a0a0a0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.22s var(--ease-out, cubic-bezier(.22,1,.36,1)), background 0.2s;
}
.wh-cc-switch:checked { background: var(--color-primary, #8b7355); border-color: var(--color-primary, #8b7355); }
.wh-cc-switch:checked::before { transform: translateX(20px); background: #fff; }
.wh-cc-switch:disabled { cursor: not-allowed; opacity: 0.6; }
[data-theme="light"] .wh-cc-switch:not(:checked)::before { background: #fff; }

.wh-cc-nota { margin: 4px 0 12px; font-size: 13px; line-height: 1.5; color: var(--color-text-muted, #a0a0a0); }
.wh-cc-nota a { color: var(--color-accent, #c9a96e); text-underline-offset: 3px; }
.wh-cc-pie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 24px 20px;
  border-top: 1px solid var(--color-border, #3d3d3d);
}
.wh-cc-pie .wh-cc-btn { min-width: 0; width: 100%; }
.wh-cc-pie .wh-cc-btn--sec { grid-column: 1 / -1; }

/* Pie mínimo para páginas sin footer propio */
.wh-legal-minipie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  padding: 22px 16px 26px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  color: var(--color-text-muted, #a0a0a0);
  border-top: 1px solid var(--color-border, #3d3d3d);
}
.wh-legal-minipie a { color: var(--color-accent, #c9a96e); text-decoration: none; }
.wh-legal-minipie a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wh-legal-minipie .wh-cc-pie-link { color: var(--color-accent, #c9a96e); text-decoration: none; font-size: 13px; }
.wh-legal-minipie .wh-cc-pie-link:hover { text-decoration: underline; }

/* ── Celular ──────────────────────────────────────────────────── */
@media (max-width: 992px) {
  body:has(.mobile-bottom-nav) .wh-legal-minipie { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 720px) {
  .wh-cc {
    grid-template-columns: 1fr;
    gap: 14px;
    width: calc(100% - 24px);
    bottom: calc(max(var(--wh-cc-nav, 0px), env(safe-area-inset-bottom, 0px)) + 12px);
    padding: 16px;
  }
  .wh-cc-acciones { display: grid; grid-template-columns: 1fr 1fr; }
  .wh-cc-btn { min-width: 0; width: 100%; }
  .wh-cc-desc { font-size: 13.5px; }

  /* Panel como hoja inferior */
  dialog.wh-cc-panel { margin: auto 0 0; width: 100%; }
  .wh-cc-hoja {
    width: 100%;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .wh-cc-cab { padding: 14px 12px 12px 18px; }
  .wh-cc-panel-titulo { font-size: 20px; }
  .wh-cc-cuerpo { padding: 12px 18px 4px; }
  .wh-cc-pie { padding: 12px 18px 16px; }
  dialog.wh-cc-panel[open] > * { animation-name: wh-hoja-sube; }
  dialog.wh-cc-panel.wh-capa--saliendo > * { animation-name: wh-hoja-baja; }
}
@keyframes wh-hoja-sube { from { transform: translateY(100%); } to { transform: none; } }
@keyframes wh-hoja-baja { from { transform: none; } to { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
  .wh-cc { transition: none; transform: none; }
  dialog.wh-capa[open] > *,
  dialog.wh-capa.wh-capa--saliendo > *,
  dialog.wh-capa::backdrop { animation: none !important; }
  .wh-cc-switch, .wh-cc-switch::before { transition: none; }
}

/* El mismo botón dentro de un texto (Aviso de Privacidad, sección 6) */
.section .wh-cc-pie-link,
.highlight-box .wh-cc-pie-link {
  color: var(--color-accent, #c9a96e);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}