/*
 * Aiden UI · cookie-consent
 * CSS module de Arc (registry/components/cookie-consent/cookie-consent.module.css) traducido a clases
 * .aui-cookie-consent-<parte>, con las MISMAS variables de kit/foundation.css. El movimiento (muelle real en
 * Motion) se aproxima con transiciones/animaciones CSS, como el resto del kit desde el 4-oct (coste): las
 * curvas y duraciones «muelle» ya están en foundation.css (--duration-morph/--ease-morph para crecer,
 * --duration-smooth/--ease-smooth para encoger, --duration-spring/--ease-spring para la entrada de la
 * superficie), traducción `linear()` de motion-tokens.ts — se usan tal cual, nada que inventar aquí.
 *
 * Una superficie (.surface) hace de muelle entre barra, panel y botón de 44px: su `transform` (posición
 * horizontal, calculada en JS según el ancho de la capa) y su `translate`/`scale` (el «pop» de entrada/salida,
 * por CSS) son propiedades independientes a propósito — así no se pisan aunque las mueva cada una por su
 * lado. Las caras (barra/panel/chip) se funden entre sí con `translate` (vertical) + `filter: blur()`.
 *
 * Correspondencia: .layer → -layer · .surface → -surface · .face → -face · .bar/.barInner → -bar/-bar-inner ·
 * .message/.barActions → -message/-bar-actions · .policy → -policy · .panel/.panelHead → -panel/-panel-head ·
 * .title/.iconButton → -title/-icon-button · .description/.list/.row → -description/-list/-row ·
 * .rowText/.rowLabel/.rowHint/.always → -row-text/-row-label/-row-hint/-always ·
 * .panelActions/.save → -panel-actions/-save · .chipFace/.chip → -chip-face/-chip · .srOnly → -sr
 */

.aui-cookie-consent-layer { position: fixed; z-index: 60; right: 16px; bottom: 16px; left: 16px; height: 0; pointer-events: none; font-family: var(--font-body); letter-spacing: var(--tracking-body); }
.aui-cookie-consent-absolute { position: absolute; z-index: 5; }

.aui-cookie-consent-surface {
    position: absolute; bottom: 0; left: 0; overflow: hidden;
    background: var(--surface-raised); box-shadow: 0 0 0 1px var(--border), var(--shadow-floating); color: var(--foreground);
    pointer-events: auto; transform-origin: bottom center; opacity: 1; translate: 0 0; scale: 1;
    will-change: transform, width, height, border-radius, translate, scale, opacity;
    transition: transform var(--duration-morph) var(--ease-morph), width var(--duration-morph) var(--ease-morph),
        height var(--duration-morph) var(--ease-morph), border-radius var(--duration-morph) var(--ease-morph);
}
.aui-cookie-consent-surface[data-encoger] {
    transition: transform var(--duration-smooth) var(--ease-smooth), width var(--duration-smooth) var(--ease-smooth),
        height var(--duration-smooth) var(--ease-smooth), border-radius var(--duration-smooth) var(--ease-smooth);
}
.aui-cookie-consent-surface[data-instant] { transition: none !important; }
.aui-cookie-consent-surface * , .aui-cookie-consent-surface *::before, .aui-cookie-consent-surface *::after { box-sizing: border-box; }

/* Entrada: animación con nombre (no transición), igual que toast-stack — una transición no anima la primera
   vez que se pinta un nodo nuevo. Se quita por JS en cuanto acaba y el reposo lo deja la regla base de arriba. */
.aui-cookie-consent-surface[data-entering] {
    opacity: 0; translate: 0 24px; scale: .98;
    animation: aui-cookie-consent-surface-in var(--duration-spring) var(--ease-spring) forwards,
        aui-cookie-consent-surface-fade var(--duration-standard) var(--ease-enter) forwards;
}
@keyframes aui-cookie-consent-surface-in { from { translate: 0 24px; scale: .98; } to { translate: 0 0; scale: 1; } }
@keyframes aui-cookie-consent-surface-fade { from { opacity: 0; } to { opacity: 1; } }
.aui-cookie-consent-surface[data-leaving] {
    transition: opacity var(--duration-exit) var(--ease-standard), translate var(--duration-exit) var(--ease-standard), scale var(--duration-exit) var(--ease-standard);
    opacity: 0; translate: 0 12px; scale: .96; pointer-events: none;
}

/* Caras: la barra, el panel o el botón de reabrir, una a la vez, fundiéndose entre sí sobre la superficie que
   las envuelve. Ancladas al lado que toque (lo fija el JS con data-side) para que una barra o panel centrados
   no entren deslizándose desde la izquierda de la superficie. */
.aui-cookie-consent-face {
    position: absolute; bottom: 0; left: 0; box-sizing: border-box; opacity: 1; translate: 0 0; filter: blur(0px);
    transition: opacity var(--duration-instant) var(--ease-standard), translate var(--duration-instant) var(--ease-standard), filter var(--duration-instant) var(--ease-standard);
}
.aui-cookie-consent-face[data-side="center"] { left: 50%; transform: translateX(-50%); }
.aui-cookie-consent-face[data-side="right"] { right: 0; left: auto; }
.aui-cookie-consent-face[inert] { pointer-events: none; }
.aui-cookie-consent-face[data-entering] {
    opacity: 0; translate: 0 10px; filter: blur(4px);
    animation: aui-cookie-consent-face-y var(--duration-morph) var(--ease-morph) both,
        aui-cookie-consent-face-fade 220ms var(--ease-enter) 40ms both,
        aui-cookie-consent-face-blur var(--duration-snappy) var(--ease-enter) 40ms both;
}
@keyframes aui-cookie-consent-face-y { from { translate: 0 10px; } to { translate: 0 0; } }
@keyframes aui-cookie-consent-face-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aui-cookie-consent-face-blur { from { filter: blur(4px); } to { filter: blur(0px); } }
.aui-cookie-consent-face[data-leaving] { opacity: 0; translate: 0 4px; filter: blur(4px); pointer-events: none; }

.aui-cookie-consent-bar { container-type: inline-size; padding: 10px 10px 10px 18px; }
.aui-cookie-consent-bar-inner { display: flex; align-items: center; gap: var(--space-4); }
.aui-cookie-consent-bar-inner[data-stack] { flex-direction: column; align-items: stretch; gap: var(--space-3); padding: 6px 8px 0 0; }
.aui-cookie-consent-message { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); text-wrap: pretty; }
.aui-cookie-consent-bar-actions { display: flex; flex: none; align-items: center; gap: 6px; }
.aui-cookie-consent-bar-inner[data-stack] .aui-cookie-consent-bar-actions { display: grid; grid-template-columns: auto 1fr 1fr; }

.aui-cookie-consent-policy { padding: 0; border: 0; background: none; color: var(--foreground); cursor: pointer; font: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; transition: text-decoration-color var(--duration-fast) var(--ease-standard); }

.aui-cookie-consent-panel { container-type: inline-size; display: grid; gap: var(--space-3); padding: 18px; }
.aui-cookie-consent-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block: -4px -6px; }
.aui-cookie-consent-title { margin: 0; font-size: var(--text-base); font-weight: 500; line-height: var(--leading-body); }
.aui-cookie-consent-description { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); text-wrap: pretty; }
.aui-cookie-consent-icon-button { display: inline-grid !important; width: 32px !important; height: 32px !important; min-width: 0 !important; min-height: 0 !important; flex: none; place-items: center; margin-right: -8px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.aui-cookie-consent-icon-button:active { background: var(--surface-muted) !important; color: var(--foreground); }

.aui-cookie-consent-list { display: grid; max-height: var(--cookie-consent-list-max, min(46vh, 300px)); margin: 0 -6px; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain; scrollbar-width: thin; }
.aui-cookie-consent-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 10px 6px; border-top: 1px solid var(--border-subtle); }
.aui-cookie-consent-row:first-child { border-top: 0; }
.aui-cookie-consent-row-text { display: grid; min-width: 0; gap: 2px; }
.aui-cookie-consent-row-label { color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
.aui-cookie-consent-row-hint { margin: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
.aui-cookie-consent-always { flex: none; color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; }

.aui-cookie-consent-panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.aui-cookie-consent-save { grid-column: 1 / -1; }

.aui-cookie-consent-chip-face { height: 44px; }
.aui-cookie-consent-chip { display: grid !important; width: 44px !important; height: 44px !important; min-width: 0 !important; min-height: 0 !important; place-items: center; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--foreground); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard); }
.aui-cookie-consent-chip:active { background: var(--surface-muted) !important; }

.aui-cookie-consent-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
    .aui-cookie-consent-policy:hover { text-decoration-color: currentColor; }
    .aui-cookie-consent-icon-button:hover { background: var(--surface-muted) !important; color: var(--foreground); }
    .aui-cookie-consent-chip:hover { background: var(--surface-muted) !important; }
}

/* Por debajo de 360px los tres botones de la barra ya no entran en una fila: rechazar y aceptar la comparten,
   y personalizar baja a su propia fila. Arc corta en 300px, medido con sus textos en inglés; con los nuestros
   («Personalizar · Rechazar todas · Aceptar todas») a 390 px de ventana «Aceptar todas» se salía 12 px de la
   barra (14-oct-2026, medido sobre aidenstartup.com) y en portugués quedaba a 2 px. Única desviación del corte. */
@container (max-width: 360px) {
    .aui-cookie-consent-bar-inner[data-stack] .aui-cookie-consent-bar-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aui-cookie-consent-bar-inner[data-stack] .aui-cookie-consent-bar-actions > :first-child { grid-column: 1 / -1; order: 1; }
}
@container (min-width: 340px) {
    .aui-cookie-consent-panel-actions { grid-template-columns: auto auto 1fr; }
    .aui-cookie-consent-save { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .aui-cookie-consent-surface, .aui-cookie-consent-surface[data-encoger] { transition: opacity var(--duration-fast) linear !important; translate: 0 0 !important; scale: 1 !important; }
    .aui-cookie-consent-surface[data-entering] { opacity: 0; animation: aui-cookie-consent-surface-fade var(--duration-fast) linear forwards !important; }
    .aui-cookie-consent-surface[data-leaving] { transition: opacity var(--duration-instant) linear !important; translate: 0 0 !important; scale: 1 !important; }
    .aui-cookie-consent-face { transition: opacity var(--duration-fast) linear !important; translate: 0 0 !important; filter: blur(0px) !important; }
    .aui-cookie-consent-face[data-entering] { opacity: 0; animation: aui-cookie-consent-face-fade var(--duration-fast) linear forwards !important; }
    .aui-cookie-consent-face[data-leaving] { translate: 0 0 !important; filter: blur(0px) !important; }
    .aui-cookie-consent-policy, .aui-cookie-consent-icon-button, .aui-cookie-consent-chip { transition: none; }
}