/* TASK-0106: canonical, standalone stylesheet for the shared cookie-consent
   banner/panel (app/Views/partials/cookie-consent-banner.php). Previously
   these rules lived inside public/assets/css/aurora-core.css, reached by
   authenticated/public_legal shells only transitively through aurora.css's
   own @import url('aurora-core.css?v=...') — a *statically* versioned
   import, never asset_url()'s filemtime/asset_version query. A browser that
   had aurora.css cached from before this component existed (or before any
   later visual change to it) could keep serving that stale copy forever,
   leaving the banner's markup entirely unstyled — a bare block of text and
   buttons at the end of the document instead of the floating panel below.
   Shell now loads this file directly (see app/Core/Shell.php
   buildContract(): 'css/cookie-consent.css' is only ever appended when
   show_cookie_banner is true) through the same asset_url() mechanism every
   other directly-loaded Shell resource already uses, so the browser always
   requests a URL with a real, current cache-busting version query.

   Every color below reuses an existing Aurora token declared in
   aurora-core.css's :root (--cyan, --purple, --bg-card, --bg-section,
   --bg-input, --border, --border-hover, --border-glow, --text,
   --text-secondary, --text-muted, --shell-max-width) — no new token, no new
   palette, no external font/asset. Every page that can ever show this
   banner already loads aurora-core.css too (directly, or transitively via
   aurora.css), so these custom properties are always in scope regardless of
   which file declares them; this file only ever *reads* them. */

.cookie-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  /* The wrapper spans the full viewport width so the floating card below
     can be centered within it, but it must never itself intercept clicks
     over whatever content happens to sit behind its empty edges — only the
     card (.cookie-consent-form) re-enables pointer events. */
  pointer-events: none;
  padding: 0 20px calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Hidden by default once a valid preference already exists. TASK-0102-FIX-02:
   the real reveal-and-open mechanism is server-rendered, not CSS — the
   footer's "Configurar cookies" link carries ?cookie_settings=1, which makes
   cookie-consent-banner.php itself render without the is-hidden class below
   and with <details ... open> (see CookieConsentService::isConfigureRequest()).
   The :target/:has() rules are kept only as harmless compatibility for an
   old bookmark or external link still pointing at a bare
   #cookie-consent-banner/#cookie-consent-panel fragment with no
   ?cookie_settings=1 — never required, never the mechanism this file's own
   logic or any test depends on. */
.cookie-consent-banner.is-hidden {
  display: none;
}
.cookie-consent-banner.is-hidden:target {
  display: flex;
}
.cookie-consent-banner.is-hidden:has(#cookie-consent-panel:target) {
  display: flex;
}

.cookie-consent-form {
  pointer-events: auto;
  position: relative;
  width: 100%;
  max-width: 620px;
  margin-bottom: 20px;
  box-sizing: border-box;
  padding: 22px 24px;
  border-radius: 20px;
  overflow: visible;
  background: linear-gradient(180deg, rgba(20, 26, 38, 0.94), rgba(13, 17, 23, 0.96));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border-glow);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 212, 255, 0.08),
    0 -6px 40px rgba(139, 92, 246, 0.16);
  animation: cookieConsentRise 0.45s ease-out;
}

/* A thin cyan-to-violet accent bar along the panel's top edge — the
   "borde/halo cyan-violeta" the task asks for, without a second palette. */
.cookie-consent-form::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  opacity: 0.85;
  pointer-events: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .cookie-consent-form {
    animation: none;
  }
}

.cookie-consent-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cookie-consent-text {
  margin: 0;
  flex: 1 1 320px;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.5;
}

.cookie-consent-link {
  color: var(--cyan);
  text-decoration: underline;
  white-space: nowrap;
}

.cookie-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto;
}

/* Both primary actions share the exact same size/padding/border-radius —
   only color differentiates them, never prominence (task requirement:
   "misma jerarquía visual"). min-height keeps every action a proper touch
   target (>= 44px) on every viewport, not only the mobile breakpoint. */
.cookie-consent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.cookie-consent-btn:hover {
  transform: translateY(-1px);
}
.cookie-consent-btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.cookie-consent-btn-primary {
  background: var(--cyan);
  color: #04121a;
}
.cookie-consent-btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-hover);
}
.cookie-consent-btn-ghost {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
  margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent-btn,
  .cookie-consent-btn:hover {
    transition: none;
    transform: none;
  }
}

/* The <details> disclosure expands *upward* from its own toggle line,
   floating over the page above the fixed panel, instead of pushing the
   panel's main row further down or off-screen — the panel body is
   positioned relative to the <details> element itself (never clipped by
   the card's rounded corners, since the card's overflow is left visible).
   A capped max-height plus its own overflow-y keeps a very long/zoomed
   viewport scrollable internally, never growing past the viewport. */
.cookie-consent-panel {
  position: relative;
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.cookie-consent-panel-toggle {
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  list-style: none;
}
.cookie-consent-panel-toggle::-webkit-details-marker {
  display: none;
}
.cookie-consent-panel-toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.cookie-consent-panel-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  z-index: 1;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(56vh, 460px);
  overflow-y: auto;
  padding: 16px;
  border-radius: 16px;
  background: rgba(13, 17, 23, 0.98);
  border: 1px solid var(--border-glow);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(139, 92, 246, 0.1);
}

.cookie-consent-category {
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}

.cookie-consent-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cookie-consent-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
}
.cookie-consent-toggle-locked {
  color: var(--text-muted);
}

.cookie-consent-category-badge {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
}

.cookie-consent-category-desc {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Tablet: the card keeps floating, centered and capped at its own
   max-width (never stretched edge-to-edge — that look is reserved for the
   mobile bottom sheet below) — just narrower outer margins. */
@media (max-width: 900px) {
  .cookie-consent-banner {
    padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .cookie-consent-form {
    margin-bottom: 14px;
  }
}

/* Mobile: a compact bottom sheet — edge to edge, rounded top corners only,
   stacked full-width actions at a proper touch-target height, safe-area
   respected at the very bottom of the device viewport. */
@media (max-width: 640px) {
  .cookie-consent-banner {
    padding: 0;
  }
  .cookie-consent-form {
    max-width: none;
    margin-bottom: 0;
    border-radius: 18px 18px 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .cookie-consent-form::before {
    left: 16px;
    right: 16px;
  }
  .cookie-consent-main {
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-consent-actions {
    flex-direction: column;
  }
  .cookie-consent-btn {
    width: 100%;
  }
  .cookie-consent-panel-body {
    max-height: min(50vh, 420px);
  }
}