/* Kicks — feed vertical de vídeos (scroll-snap inmersivo sobre el bottom nav).
   Un vídeo = una pantalla; el nav fijo queda visible debajo (su z-index 200
   gana). Mobile-first; en pantallas anchas la columna se centra a ancho de
   móvil, como el resto de la app. */
@layer components {
    /* La página entera es negra: el vídeo manda. */
    .kicks-page {
        background: #000;
    }

    .kicks {
        /* Hueco inferior = la altura REAL del bottom nav (token compartido —
           los 64px mágicos de antes dejaban ~10px de vídeo bajo el nav). */
        --kicks-nav-clear: var(--bottom-nav-clearance);

        /* Despeje extra de meta + rail: el FAB central de Fichajes asoma por
           encima del nav y pisaría los textos/iconos pegados al borde. */
        --kicks-overlay-clear: calc(var(--space-12) + var(--space-2));

        position: fixed;
        inset: 0 0 var(--kicks-nav-clear) 0;
        background: #000;
    }

    /* Sin bottom nav (flags desacoplados: feed on + nav off) no se reserva
       la franja — solo la safe area. */
    .kicks--bare {
        --kicks-nav-clear: env(safe-area-inset-bottom);
    }

    .kicks__viewport {
        block-size: 100%;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        overscroll-behavior-y: contain;
        scrollbar-width: none;
    }

    .kicks__viewport::-webkit-scrollbar {
        display: none;
    }

    .kicks__skeleton {
        block-size: 100%;
        scroll-snap-align: start;
        display: grid;
        place-items: center;
    }

    .kicks__skeleton-pulse {
        inline-size: 56px;
        block-size: 56px;
        border-radius: var(--radius-full);
        /* Theme-invariant: el lienzo es negro forzado — un token de tema
           light aquí dejaba el pulse casi blanco puro. */
        background: rgb(255 255 255 / 15%);
        animation: kicks-pulse 1.2s ease-in-out infinite;
    }

    @keyframes kicks-pulse {
        50% {
            opacity: 0.35;
            transform: scale(0.85);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .kicks__skeleton-pulse {
            animation: none;
        }
    }

    /* ── HUD de página (estilo juego): sonido izq + CTA app dcha ─────────── */
    .kicks__hud {
        position: absolute;
        inset-block-start: calc(var(--space-3) + env(safe-area-inset-top));
        inset-inline: var(--space-3);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        pointer-events: none;
        z-index: 1;
    }

    .kicks__hud-sound,
    .kicks__hud-app {
        pointer-events: auto;
        display: grid;
        place-items: center;
        min-block-size: var(--touch-target);
        border: 0;
        border-radius: var(--radius-full);
        background: rgb(0 0 0 / 40%);
        backdrop-filter: blur(4px);
        color: #fff;
        cursor: pointer;
    }

    .kicks__hud-sound {
        inline-size: var(--touch-target);
    }

    .kicks__hud-sound svg {
        inline-size: 22px;
        block-size: 22px;
    }

    /* Dos iconos, uno visible: tachado en silencio (la opacidad sola era
       ambigua sobre vídeo claro), acento cuando suena. */
    .kicks__hud-sound[aria-pressed="false"] {
        color: rgb(255 255 255 / 75%);
    }

    .kicks__hud-sound[aria-pressed="true"] {
        color: var(--color-accent);
    }

    .kicks__hud-sound svg[data-on],
    .kicks__hud-sound[aria-pressed="true"] svg[data-off] {
        display: none;
    }

    .kicks__hud-sound[aria-pressed="true"] svg[data-on] {
        display: block;
    }

    /* Chip "Enlace copiado" — status del share por portapapeles. */
    .kicks__copied {
        pointer-events: none;
        padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-full);
        background: rgb(0 0 0 / 70%);
        color: #fff;
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
    }

    .kicks__hud-app {
        padding-inline: var(--space-4);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        text-decoration: none;
    }

    .kicks__hud-sound:focus-visible,
    .kicks__hud-app:focus-visible {
        outline: var(--border-2) solid var(--color-focus-ring);
        outline-offset: 2px;
    }

    .kicks__notice {
        position: absolute;
        inset-inline: var(--space-6);
        inset-block-start: 50%;
        transform: translateY(-50%);
        text-align: center;
        /* Theme-invariant sobre negro: --color-text-secondary en tema claro
           daba 2,2:1 (fallo AA) en el ÚNICO feedback de error de la página. */
        color: rgb(255 255 255 / 88%);
        font-size: var(--text-base);
    }

    /* ── Card ──────────────────────────────────────────────────────────── */
    .kicks-card {
        position: relative;
        block-size: 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        display: grid;
        place-items: center;
        overflow: hidden;
    }

    .kicks-card__video {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        /* Mata el double-tap-zoom y el delay ~350ms de iOS (obligatorio para
           que el doble-tap-seek responda). Fondo negro = sin franjas antes del
           1er frame en --wide. */
        touch-action: manipulation;
        background: #000;
    }

    /* Contenido 16:9 en lienzo 9:16: cover enseñaría ~28% del frame — el JS
       marca los anchos en loadedmetadata y pasan a letterbox. */
    .kicks-card__video--wide {
        object-fit: contain;
    }

    /* ── Overlays del reproductor ──────────────────────────────────────────
       Todos absolute y SIN z-index positivo: por orden DOM quedan bajo
       scrim/meta/rail. [hidden] necesita override explícito porque declaran
       display (misma especificidad, capa posterior gana — GOTCHA de la casa). */
    .kicks-card__playglyph,
    .kicks-card__spinner,
    .kicks-card__seek {
        position: absolute;
        pointer-events: none;
    }

    .kicks-card__playglyph[hidden],
    .kicks-card__spinner[hidden],
    .kicks-card__seek[hidden] {
        display: none;
    }

    /* Glyph de play — se muestra al pausar (centrado, semitransparente). */
    .kicks-card__playglyph {
        inset: 50% auto auto 50%;
        translate: -50% -50%;
        display: grid;
        place-items: center;
        inline-size: 72px;
        block-size: 72px;
        border-radius: var(--radius-full);
        background: rgb(0 0 0 / 45%);
        color: #fff;
    }

    .kicks-card__playglyph svg {
        inline-size: 36px;
        block-size: 36px;
        filter: drop-shadow(0 1px 3px rgb(0 0 0 / 50%));
    }

    /* Spinner de buffering — ring que gira (centrado). */
    .kicks-card__spinner {
        inset: 50% auto auto 50%;
        translate: -50% -50%;
        inline-size: 40px;
        block-size: 40px;
        border-radius: var(--radius-full);
        border: 3px solid rgb(255 255 255 / 25%);
        border-block-start-color: #fff;
        animation: kicks-spin 0.7s linear infinite;
    }

    @keyframes kicks-spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* Indicador de seek estilo YouTube: pastilla con «« / »» según la zona. */
    .kicks-card__seek {
        inset: 50% auto auto 50%;
        translate: -50% -50%;
        display: grid;
        place-items: center;
        gap: 2px;
        min-inline-size: 96px;
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-lg);
        background: rgb(0 0 0 / 55%);
        color: #fff;
        font-weight: var(--weight-bold);
        font-size: var(--text-sm);
    }

    /* Se ancla al lado de la zona seekeada. */
    .kicks-card__seek--back {
        inset-inline: var(--space-8) auto;
        translate: 0 -50%;
    }

    .kicks-card__seek--fwd {
        inset-inline: auto var(--space-8);
        translate: 0 -50%;
    }

    .kicks-card__seek::before {
        font-size: var(--text-lg);
        line-height: 1;
    }

    .kicks-card__seek--back::before {
        content: "«";
    }

    .kicks-card__seek--fwd::before {
        content: "»";
    }

    /* Barra de progreso / scrubber — abajo del todo, fina, arrastrable. La
       zona táctil es más alta que la barra visible (padding transparente).
       touch-action:pan-y conserva el scroll-snap vertical; el JS detecta la
       intención horizontal para capturar. */
    .kicks-card__progress {
        position: absolute;
        inset: auto 0 0 0;
        block-size: var(--space-1);
        padding-block-start: var(--space-3);
        background-clip: content-box;
        background-color: rgb(255 255 255 / 22%);
        touch-action: pan-y;
        cursor: pointer;
    }

    .kicks-card__progress-fill {
        block-size: 100%;
        inline-size: 100%;
        background: var(--color-accent);
        transform: scaleX(0);
        transform-origin: left;
    }

    /* Durante el arrastre la barra engorda un poco (feedback). */
    .kicks-card__progress.is-scrubbing {
        block-size: var(--space-2);
    }

    @media (prefers-reduced-motion: reduce) {
        /* Sin giro: ring estático (comunica "cargando" sin motion, como el
           skeleton-pulse). */
        .kicks-card__spinner {
            animation: none;
        }
    }

    /* Legibilidad del texto sobre vídeo sin tapar el centro (78% en la base:
       el 65% quedaba justo en AA sobre vídeo claro). */
    .kicks-card__scrim {
        position: absolute;
        inset: auto 0 0 0;
        block-size: 35%;
        background: linear-gradient(transparent, rgb(0 0 0 / 78%));
        pointer-events: none;
    }

    .kicks-card__meta {
        position: absolute;
        inset-inline-start: var(--space-4);
        inset-block-end: var(--kicks-overlay-clear);
        /* Deja sitio al rail de acciones de la derecha. */
        inset-inline-end: calc(var(--space-4) * 2 + 44px);
        color: #fff;
    }

    .kicks-card__nick {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        font-weight: var(--weight-bold);
        font-size: var(--text-base);
    }

    /* Avatar real del autor ({cdn}/{uuid}.jpg) — el JS lo muestra solo si hay
       CDN configurado y el usuario tiene imagen (403 → vuelve a hidden). */
    .kicks-card__avatar {
        inline-size: 28px;
        block-size: 28px;
        border-radius: var(--radius-full);
        object-fit: cover;
        border: 1.5px solid rgb(255 255 255 / 85%);
        margin-inline-end: var(--space-1);
    }

    .kicks-card__verified {
        inline-size: 16px;
        block-size: 16px;
        color: var(--color-accent);
    }

    /* Tiempo de publicación (tipo TikTok) — tras el nick/tick, separado por un
       middot, más tenue y ligero. Se pinta solo cuando el JS lo rellena.
       Centrado con el resto del nick (align-items: center del contenedor). */
    .kicks-card__time {
        font-weight: var(--weight-regular);
        font-size: var(--text-xs);
        color: rgb(255 255 255 / 72%);
    }

    .kicks-card__time::before {
        content: "·";
        margin-inline: var(--space-1);
        color: rgb(255 255 255 / 55%);
    }

    /* La descripción es un botón real: colapsada a 2 líneas; el tap la
       despliega entera sobre una sombra negra (patrón del formato) y otro
       tap la pliega. Hereda tipografía de texto, no de botón. */
    .kicks-card__desc {
        margin-block-start: var(--space-1);
        padding: 0;
        border: 0;
        background: none;
        text-align: start;
        font-size: var(--text-sm);
        color: rgb(255 255 255 / 88%);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: anywhere;
        cursor: pointer;
    }

    .kicks-card__desc.is-open {
        display: block;
        -webkit-line-clamp: none;
        background: rgb(0 0 0 / 60%);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        max-block-size: 45dvh;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .kicks-card__desc:focus-visible {
        outline: var(--border-2) solid var(--color-focus-ring);
        outline-offset: 2px;
        border-radius: var(--radius-md);
    }

    /* ── Rail de acciones (derecha) ────────────────────────────────────── */
    .kicks-card__rail {
        position: absolute;
        inset-inline-end: var(--space-2);
        inset-block-end: var(--kicks-overlay-clear);
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .kicks-card__action {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        min-inline-size: var(--touch-target);
        min-block-size: var(--touch-target);
        border: 0;
        background: none;
        color: #fff;
        cursor: pointer;
    }

    .kicks-card__action svg {
        inline-size: 28px;
        block-size: 28px;
        filter: drop-shadow(0 1px 2px rgb(0 0 0 / 60%));
    }

    .kicks-card__action:focus-visible {
        outline: var(--border-2) solid var(--color-focus-ring);
        outline-offset: 2px;
        border-radius: var(--radius-md);
    }

    /* Estado "me gusta" — corazón relleno acento. */
    .kicks-card__action[data-role="like"].is-on {
        color: var(--color-accent);
    }

    .kicks-card__action[data-role="like"].is-on svg {
        fill: currentcolor;
    }

    .kicks-card__count {
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        text-shadow: 0 1px 2px rgb(0 0 0 / 60%);
    }

    .kicks-card__count:empty {
        display: none;
    }

    /* ── Menú del kebab (Reportar…) ────────────────────────────────────── */
    .kicks-card__menu {
        position: absolute;
        inset-inline-end: calc(var(--space-2) + var(--touch-target) + var(--space-2));
        inset-block-end: var(--kicks-overlay-clear);
        background: var(--color-surface);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        overflow: hidden;
    }

    .kicks-card__menu-item {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        inline-size: 100%;
        min-block-size: var(--touch-target);
        padding-inline: var(--space-4);
        border: 0;
        background: none;
        color: var(--color-text);
        font-size: var(--text-sm);
        text-align: start;
        cursor: pointer;
    }

    .kicks-card__menu-icon {
        flex: none;
        inline-size: 16px;
        block-size: 16px;
    }

    .kicks-card__menu-item:disabled {
        color: var(--color-text-secondary);
        cursor: default;
    }

    /* Columna centrada a ancho móvil en desktop — el vídeo vertical no
       escala a panorámico. */
    @media (min-width: 768px) {
        .kicks {
            inset-inline: 50%;
            inline-size: min(48dvh, 430px);
            transform: translateX(-50%);
        }
    }
}