/* ==========================================================================
   COOKIE CONSENT — DIGART Studio
   Componente: Cookie Consent

   Componente global reutilizable (Foundations → Components → Patterns);
   consume exclusivamente los Design Tokens (tokens.css) y el Content
   Container oficial (.l-container, layout.css). No declara un sistema de
   espaciados, color, tipografía ni breakpoints propio.

   Banner inferior fijo, sobrio y coherente con el resto del sitio: mismo
   fondo oscuro editorial (--color-background-inverse) y acento rojo
   institucional (--color-error) ya usados en Hero y Call To Action de la
   Home. No es un modal: sin scrim, sin overlay, sin trampa de foco;
   permanece por encima del contenido mientras está visible mediante el
   Token --z-toast (notificación persistente, mismo criterio semántico que
   el resto de niveles de Z-Index ya definidos), sin competir con
   --z-header (fijo en la parte superior, nunca se superponen). El botón
   "Aceptar" y "Rechazar no esenciales" resuelven su apariencia y estados
   íntegros en el Componente oficial Button v1.0 (button.css); este
   archivo solo resuelve el layout que los aloja.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   -------------------------------------------------------------------- */
.cookie-consent {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-toast);
  background-color: var(--color-background-inverse);
  border-block-start: var(--border-width-default) var(--border-style-solid) var(--color-border-strong);
}

/* Excepción: el atributo nativo [hidden] requiere esta regla para
   conservar su efecto frente a la especificidad igual de .cookie-consent
   (mismo criterio ya documentado en hero.css y loading-screen.css). */
.cookie-consent[hidden] {
  display: none;
}

/* --------------------------------------------------------------------
   2. Container
   -------------------------------------------------------------------- */
.cookie-consent__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-5);
}

/* --------------------------------------------------------------------
   3. Elements
   -------------------------------------------------------------------- */
.cookie-consent__text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-inverse);
}

/* Enlace real hacia la política (no un botón): mismo tratamiento
   cromático ya usado en el resto de enlaces discretos del sitio
   (idea-origin__link, success-stories__link) — color-error por defecto,
   subrayado añadido en Hover/Focus. */
.cookie-consent__link {
  color: var(--color-error);
  text-decoration: none;
  white-space: nowrap;
}

.cookie-consent__link:hover,
.cookie-consent__link:focus-visible {
  text-decoration: underline;
}

.cookie-consent__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------
   4. Variants
   Sección reservada: este Componente no define variantes.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   5. States
   Estado base (Default/oculto) representado por [hidden] (1, Root);
   estado visible representado por la ausencia de ese atributo
   (cookie-consent.js). Los estados de interacción (Hover, Focus, Active)
   de "Aceptar" y "Rechazar no esenciales" los resuelve el Componente
   oficial Button v1.0 (button.css), ya integrado en este Componente.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   6. Motion Hooks
   Sección reservada: la revelación/ocultamiento del banner no depende de
   un evento narrativo documentado (P-03); cookie-consent.js alterna
   [hidden] directamente, sin transición propia.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   7. Responsive
   Sistema Responsive (Cap. 11), breakpoint oficial de tokens.css
   reproducido en valor literal, mismo criterio que layout.css. Contenido
   y acciones se apilan a ancho completo, conservando el ancho legible del
   texto y sin desbordamiento horizontal (17 Sistema de Accesibilidad,
   Robustez).
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px */
@media (max-width: 768px) {
  .cookie-consent__container {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .cookie-consent__actions {
    flex-direction: column;
    align-items: stretch;
  }
}