/* ============ Jimmy Cruck — reel (feed vertical de clips) ============
   Carga DESPUÉS de style.css: hereda la paleta de :root y los toasts.
   Layout (grid, como TikTok — el raíl vive FUERA del vídeo, sobre el negro):
     móvil:       [ vídeo        ]      escritorio:   [ vídeo ] [raíl]
                  [ meta  | raíl ]                    [ meta  ] [    ]  */

                  .reel-page {
                    height: 100%;
                    overflow: hidden;
                    background: #000;
                }
                html:has(.reel-page) { height: 100%; overflow: hidden; }
                
                /* ---- Contenedor con scroll-snap: un clip por pantalla ---------------------- */
                .reel {
                    height: 100vh;
                    height: 100dvh; /* móvil: cuenta la barra del navegador */
                    overflow-y: auto;
                    scroll-snap-type: y mandatory;
                    overscroll-behavior: contain;
                    scrollbar-width: none;
                }
                .reel::-webkit-scrollbar { display: none; }
                
                .reel-item {
                    height: 100%;
                    scroll-snap-align: start;
                    scroll-snap-stop: always; /* un swipe = un clip, sin saltarse varios */
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                }
                
                /* ---- Marco: vídeo + meta + raíl --------------------------------------------- */
                .reel-frame {
                    display: grid;
                    width: 100%;
                    grid-template-columns: 1fr auto;
                    grid-template-areas:
                        "stage stage"
                        "meta  rail";
                    align-items: end;
                    column-gap: 10px;
                }
                
                .reel-stage {
                    grid-area: stage;
                    position: relative;
                    width: 100%;
                }
                .reel-video {
                    width: 100%;
                    aspect-ratio: 16 / 9;
                    background: #000;
                    display: block;
                }
                
                /* ---- Barra superior (volver + pestañas de orden) --------------------------- */
                .reel-topbar {
                    position: fixed;
                    top: 0; left: 0; right: 0;
                    z-index: 20;
                    display: flex;
                    align-items: center;
                    gap: 14px;
                    padding: calc(10px + env(safe-area-inset-top)) 14px 14px;
                    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
                    pointer-events: none; /* el degradado no roba taps... */
                }
                .reel-topbar a, .reel-topbar button { pointer-events: auto; } /* ...los controles sí */
                
                .reel-back {
                    font-family: var(--font-body);
                    font-weight: 500;
                    font-size: 0.9rem;
                    color: var(--text);
                    text-decoration: none;
                    border: 1px solid var(--border);
                    border-radius: 9px;
                    padding: 8px 14px;
                    background: rgba(10, 10, 12, 0.45);
                    backdrop-filter: blur(6px);
                    transition: border-color 0.18s ease, transform 0.12s ease;
                }
                .reel-back:hover { border-color: var(--teal); }
                .reel-back:active { transform: scale(0.96); }
                
                .reel-tabs { display: flex; gap: 6px; }
                .reel-tab {
                    font-family: var(--font-body);
                    font-weight: 500;
                    font-size: 0.85rem;
                    color: var(--muted);
                    background: rgba(10, 10, 12, 0.45);
                    backdrop-filter: blur(6px);
                    border: 1px solid var(--border);
                    border-radius: 999px;
                    padding: 7px 14px;
                    cursor: pointer;
                    transition: color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
                }
                .reel-tab:hover { color: var(--text); }
                .reel-tab:active { transform: scale(0.95); }
                .reel-tab.active { color: var(--teal); border-color: var(--teal); }
                
                /* pantallas estrechas: 4 pestañas + lupa caben apretando un poco */
                @media (max-width: 420px) {
                    .reel-topbar { gap: 8px; padding-left: 10px; padding-right: 10px; }
                    .reel-back { padding: 8px 10px; }
                    .reel-tabs { gap: 4px; }
                    .reel-tab { padding: 7px 9px; font-size: 0.78rem; }
                }
                
                /* ---- Meta del creador (bajo el vídeo, izquierda) ----------------------------- */
                .reel-meta {
                    grid-area: meta;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 6px;
                    min-width: 0;
                    padding: 12px 0 4px 12px;
                }
                .reel-meta-top {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    min-width: 0;
                    max-width: 100%;
                }
                
                /* caption del clip (texto del mensaje de Discord): 2 líneas, tap para desplegar */
                .reel-caption {
                    margin: 0;
                    font-family: var(--font-body);
                    font-size: 0.88rem;
                    line-height: 1.45;
                    color: var(--text);
                    white-space: pre-line;
                    overflow-wrap: anywhere;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    cursor: pointer;
                }
                .reel-caption.expanded {
                    display: block;
                    -webkit-line-clamp: unset;
                    max-height: 32dvh; /* captions kilométricos: despliega con scroll propio */
                    overflow-y: auto;
                }
                
                /* ---- Reacciones (chips estilo Discord bajo el caption) ------------------------ */
                .reel-reacts {
                    position: relative; /* ancla de la paleta desplegable */
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    gap: 6px;
                    max-width: 100%;
                }
                .reel-react-chip,
                .reel-react-add {
                    display: inline-flex;
                    align-items: center;
                    gap: 6px;
                    border: 1px solid var(--border);
                    background: var(--surface);
                    border-radius: 999px;
                    padding: 5px 10px;
                    color: var(--text);
                    line-height: 1;
                    cursor: pointer;
                    transition: transform 0.12s ease, border-color 0.18s ease, background 0.18s ease;
                }
                @media (hover: hover) {
                    .reel-react-chip:hover,
                    .reel-react-add:hover { border-color: var(--teal); }
                    .reel-react-add:hover { color: var(--text); }
                }
                .reel-react-chip:active,
                .reel-react-add:active { transform: scale(0.9); }
                .reel-react-chip .rr-emoji { font-size: 0.95rem; line-height: 1; }
                .reel-react-chip .rr-count { font-size: 0.72rem; }
                .reel-react-chip.mine {
                    border-color: var(--teal);
                    background: var(--teal-dim);
                }
                .reel-react-add {
                    font-family: var(--font-mono);
                    font-size: 0.9rem;
                    color: var(--muted);
                    padding: 5px 11px;
                }
                
                /* paleta desplegable: anclada a la IZQUIERDA de la fila, así nunca
                   se sale de pantalla por mucho que los chips empujen el "+" */
                .reel-react-picker {
                    position: absolute;
                    bottom: calc(100% + 8px);
                    left: 0;
                    z-index: 6;
                    display: flex;
                    gap: 2px;
                    padding: 4px;
                    background: var(--surface-2);
                    border: 1px solid var(--border);
                    border-radius: 999px;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
                    animation: reel-fade-in 0.15s ease;
                }
                .reel-react-picker[hidden] { display: none; } /* display:flex ganaría a [hidden] */
                .reel-react-picker button {
                    width: 38px;
                    height: 38px;
                    border-radius: 50%;
                    border: 1px solid transparent;
                    background: transparent;
                    font-size: 1.15rem;
                    line-height: 1;
                    cursor: pointer;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease;
                }
                @media (hover: hover) {
                    .reel-react-picker button:hover { background: var(--surface); transform: translateY(-2px); }
                }
                .reel-react-picker button:active { transform: scale(0.88); }
                .reel-react-picker button.mine {
                    border-color: var(--teal);
                    background: var(--teal-dim);
                }
                .reel-creator {
                    display: inline-flex;
                    align-items: center;
                    gap: 10px;
                    text-decoration: none;
                    min-width: 0;
                }
                .reel-avatar {
                    width: 38px; height: 38px;
                    border-radius: 50%;
                    background: var(--surface-2);
                    border: 1px solid var(--border);
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    font-family: var(--font-display);
                    font-weight: 700;
                    color: var(--teal);
                    flex: none;
                    overflow: hidden;
                    transition: border-color 0.18s ease;
                }
                .reel-creator:hover .reel-avatar { border-color: var(--teal); }
                .reel-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
                .reel-creator-name {
                    font-family: var(--font-display);
                    font-weight: 700;
                    font-size: 1.02rem;
                    color: var(--text);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .reel-creator:hover .reel-creator-name { text-decoration: underline; text-underline-offset: 3px; }
                .reel-channel {
                    font-family: var(--font-mono);
                    font-size: 0.72rem;
                    color: var(--muted);
                    background: var(--surface);
                    border: 1px solid var(--border);
                    border-radius: 999px;
                    padding: 3px 9px;
                    white-space: nowrap;
                    flex: none;
                }
                
                /* ---- Raíl de acciones (fuera del vídeo) --------------------------------------- */
                .reel-rail {
                    grid-area: rail;
                    display: flex;
                    flex-direction: row;        /* móvil: fila bajo el vídeo, a la derecha */
                    align-items: flex-end;
                    gap: 14px;
                    padding: 12px 12px 4px 0;
                }
                .reel-action {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 4px;
                }
                .reel-act {
                    width: 48px; height: 48px;
                    border-radius: 50%;
                    border: 1px solid var(--border);
                    background: var(--surface);
                    color: var(--text);
                    line-height: 0;
                    cursor: pointer;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    transition: transform 0.12s ease, border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
                }
                @media (hover: hover) {
                    .reel-act:hover { border-color: var(--teal); transform: translateY(-2px); }
                }
                .reel-act:active { transform: scale(0.88); }
                .reel-act.is-static { cursor: default; color: var(--muted); }
                .reel-act.is-static:hover { border-color: var(--border); transform: none; }
                
                .reel-like svg { transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); }
                .reel-like.liked {
                    color: var(--pink);
                    border-color: var(--pink);
                    background: rgba(247, 118, 142, 0.12);
                }
                .reel-like.liked svg { transform: scale(1.12); }
                
                .reel-count {
                    font-family: var(--font-mono);
                    font-size: 0.74rem;
                    color: var(--text);
                }
                .reel-count.pop { animation: reel-pop 0.35s ease; }
                @keyframes reel-pop {
                    30% { transform: scale(1.4); color: var(--pink); }
                }
                .reel-views .rv-num { color: var(--text); }
                
                /* ---- Sonido (arriba-derecha del vídeo): botón + slider de volumen -------------- */
                .reel-soundbox {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    z-index: 5;
                    display: flex;
                    align-items: center;
                    padding: 2px;
                    border-radius: 999px;
                    transition: background 0.18s ease;
                }
                /* al pasar el ratón o enfocar, la caja se vuelve pastilla y asoma el slider */
                .reel-soundbox:hover, .reel-soundbox:focus-within {
                    background: rgba(10, 10, 12, 0.62);
                    backdrop-filter: blur(6px);
                }
                .reel-sound {
                    width: 42px; height: 42px;
                    background: rgba(10, 10, 12, 0.55);
                    backdrop-filter: blur(6px);
                    opacity: 0.95;
                    flex: none;
                }
                .reel-sound.on { color: var(--teal); border-color: var(--teal); }
                
                .reel-volume {
                    width: 0;
                    opacity: 0;
                    pointer-events: none;
                    margin: 0 8px 0 6px;
                    accent-color: var(--teal);
                    cursor: pointer;
                    transition: width 0.2s ease, opacity 0.2s ease;
                }
                .reel-soundbox:hover .reel-volume,
                .reel-soundbox:focus-within .reel-volume {
                    width: 92px;
                    opacity: 1;
                    pointer-events: auto;
                }
                
                /* chip "Tap for sound": solo cuando el navegador bloqueó el autoplay con sonido */
                .reel-sound-hint {
                    position: absolute;
                    top: 16px;
                    right: 62px;
                    z-index: 5;
                    font-family: var(--font-body);
                    font-weight: 500;
                    font-size: 0.8rem;
                    color: var(--text);
                    background: rgba(10, 10, 12, 0.72);
                    border: 1px solid var(--teal);
                    border-radius: 999px;
                    padding: 7px 13px;
                    cursor: pointer;
                    backdrop-filter: blur(6px);
                    animation: reel-hint-pulse 2s ease infinite;
                }
                .reel-sound-hint[hidden] { display: none; }
                @keyframes reel-hint-pulse {
                    50% { transform: scale(1.05); box-shadow: 0 0 14px rgba(31, 211, 199, 0.35); }
                }
                
                /* ---- Barra de progreso al pie del vídeo ----------------------------------------- */
                .reel-progress {
                    position: absolute;
                    left: 0; right: 0; bottom: 0;
                    height: 3px;
                    background: rgba(255, 255, 255, 0.14);
                    z-index: 4;
                }
                .reel-progress-fill {
                    display: block;
                    height: 100%;
                    width: 0%;
                    background: var(--teal);
                    box-shadow: 0 0 8px rgba(31, 211, 199, 0.55);
                }
                
                /* ---- Buffering ---------------------------------------------------------------- */
                .reel-buffering {
                    position: absolute;
                    inset: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    pointer-events: none;
                    z-index: 4;
                }
                .reel-buffering[hidden] { display: none; }
                
                /* ---- Corazón del doble tap (estalla donde tocas) --------------------------------- */
                .reel-heart-burst {
                    position: absolute;
                    left: 50%; top: 50%;
                    transform: translate(-50%, -50%);
                    pointer-events: none;
                    z-index: 6;
                    font-size: 5.5rem;
                    line-height: 1;
                    color: var(--pink);
                    opacity: 0;
                    filter: drop-shadow(0 4px 18px rgba(247, 118, 142, 0.45));
                }
                .reel-heart-burst.go {
                    animation: reel-heart 0.7s cubic-bezier(0.22, 1, 0.36, 1);
                }
                @keyframes reel-heart {
                    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-14deg); }
                    25%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(4deg); }
                    55%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
                    100% { opacity: 0; transform: translate(-50%, -55%) scale(1.3) rotate(0deg); }
                }
                
                /* ---- Insignia de pausa / toca para reproducir ------------------------------------ */
                .reel-paused {
                    position: absolute;
                    inset: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    pointer-events: none;
                    z-index: 4;
                    font-size: 3.4rem;
                    color: rgba(244, 243, 241, 0.9);
                    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
                    animation: reel-fade-in 0.15s ease;
                }
                .reel-paused[hidden] { display: none; }
                @keyframes reel-fade-in { from { opacity: 0; } }
                
                /* ---- Entrada suave de meta y raíl al activarse un clip ----------------------------- */
                .reel-meta, .reel-rail {
                    opacity: 0.55;
                    transform: translateY(6px);
                    transition: opacity 0.28s ease, transform 0.28s ease;
                }
                .reel-item.is-active .reel-meta,
                .reel-item.is-active .reel-rail {
                    opacity: 1;
                    transform: none;
                }
                
                /* ---- Estados: cargando, vacío, fin --------------------------------------------------- */
                .reel-state {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 14px;
                    text-align: center;
                    padding: 24px;
                    color: var(--muted);
                    font-family: var(--font-body);
                }
                .reel-state h2 {
                    font-family: var(--font-display);
                    color: var(--text);
                    font-size: 1.4rem;
                    margin: 0;
                }
                .reel-state p { margin: 0; max-width: 42ch; }
                .reel-state .reel-state-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
                .reel-state button, .reel-state a {
                    font-family: var(--font-body);
                    font-weight: 500;
                    font-size: 0.9rem;
                    color: var(--text);
                    text-decoration: none;
                    background: transparent;
                    border: 1px solid var(--border);
                    border-radius: 9px;
                    padding: 9px 16px;
                    cursor: pointer;
                    transition: border-color 0.18s ease, transform 0.12s ease;
                }
                .reel-state button:hover, .reel-state a:hover { border-color: var(--teal); }
                .reel-state button:active, .reel-state a:active { transform: scale(0.96); }
                
                .reel-spinner {
                    width: 34px; height: 34px;
                    border-radius: 50%;
                    border: 3px solid var(--border);
                    border-top-color: var(--teal);
                    animation: reel-spin 0.8s linear infinite;
                }
                .reel-spinner--sm { width: 26px; height: 26px; display: block; }
                @keyframes reel-spin { to { transform: rotate(360deg); } }
                
                .reel-noscript {
                    position: fixed;
                    inset: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 24px;
                    color: var(--text);
                    font-family: var(--font-body);
                    text-align: center;
                }
                .reel-noscript a { color: var(--teal); }
                
                /* ---- Escritorio: raíl en columna a la DERECHA del vídeo, como TikTok ----------------- */
                @media (min-width: 900px) {
                    .reel-frame {
                        width: auto;
                        grid-template-columns: auto auto;
                        grid-template-areas:
                            "stage rail"
                            "meta  rail";
                        column-gap: 18px;
                    }
                    .reel-stage {
                        /* que el vídeo 16:9 nunca desborde el alto del viewport (con hueco
                           para la meta de abajo y la barra superior) */
                        width: min(1080px, calc((100dvh - 170px) * 16 / 9), calc(100vw - 120px));
                    }
                    .reel-video { border-radius: 12px; }
                    .reel-progress { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; overflow: hidden; }
                    .reel-meta { padding-left: 2px; }
                    .reel-rail {
                        flex-direction: column;
                        align-self: end;
                        padding: 0 0 4px;
                        gap: 16px;
                    }
                }
                
                /* ---- Barra de contexto: reel de UN creador ------------------------------------------------ */
                .reel-creator-bar {
                    position: fixed;
                    top: calc(58px + env(safe-area-inset-top));
                    left: 50%;
                    transform: translateX(-50%);
                    z-index: 21;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    max-width: min(92vw, 420px);
                    padding: 6px 8px 6px 6px;
                    background: rgba(10, 10, 12, 0.72);
                    border: 1px solid var(--border);
                    border-radius: 999px;
                    backdrop-filter: blur(8px);
                    animation: reel-search-in 0.18s ease;
                }
                .reel-creator-bar[hidden] { display: none; }
                .reel-creator-bar .reel-avatar { width: 30px; height: 30px; font-size: 0.8rem; }
                .rcb-name {
                    font-family: var(--font-display);
                    font-weight: 700;
                    font-size: 0.92rem;
                    color: var(--text);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    min-width: 0;
                }
                .rcb-profile {
                    font-family: var(--font-mono);
                    font-size: 0.72rem;
                    color: var(--teal);
                    text-decoration: none;
                    border: 1px solid var(--border);
                    border-radius: 999px;
                    padding: 5px 10px;
                    flex: none;
                    transition: border-color 0.18s ease;
                }
                .rcb-profile:hover { border-color: var(--teal); }
                .rcb-close {
                    width: 30px; height: 30px;
                    flex: none;
                    border-radius: 50%;
                    border: 1px solid var(--border);
                    background: transparent;
                    color: var(--muted);
                    font-size: 0.85rem;
                    line-height: 1;
                    cursor: pointer;
                    transition: color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
                }
                .rcb-close:hover { color: var(--text); border-color: var(--teal); }
                .rcb-close:active { transform: scale(0.9); }
                
                /* ---- Buscador de riders ------------------------------------------------------------------ */
                .reel-search-btn {
                    margin-left: auto; /* empujado a la derecha de la barra */
                    width: 38px; height: 38px;
                    border-radius: 50%;
                    border: 1px solid var(--border);
                    background: rgba(10, 10, 12, 0.45);
                    backdrop-filter: blur(6px);
                    color: var(--text);
                    line-height: 0;
                    cursor: pointer;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    transition: border-color 0.18s ease, transform 0.12s ease;
                }
                .reel-search-btn:hover { border-color: var(--teal); }
                .reel-search-btn:active { transform: scale(0.92); }
                
                .reel-search {
                    position: fixed;
                    inset: 0;
                    z-index: 30; /* por encima de la barra superior */
                    background: rgba(0, 0, 0, 0.62);
                    backdrop-filter: blur(4px);
                    display: flex;
                    justify-content: center;
                    align-items: flex-start;
                    padding: calc(64px + env(safe-area-inset-top)) 14px 24px;
                }
                .reel-search[hidden] { display: none; }
                
                .reel-search-panel {
                    width: 100%;
                    max-width: 540px;
                    background: var(--surface);
                    border: 1px solid var(--border);
                    border-radius: 14px;
                    overflow: hidden;
                    animation: reel-search-in 0.18s ease;
                }
                @keyframes reel-search-in {
                    from { opacity: 0; transform: translateY(-8px); }
                }
                
                .reel-search-bar {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    padding: 10px;
                    border-bottom: 1px solid var(--border);
                }
                .reel-search-input {
                    flex: 1;
                    min-width: 0;
                    font-family: var(--font-body);
                    font-size: 1rem;
                    color: var(--text);
                    background: var(--surface-2);
                    border: 1px solid var(--border);
                    border-radius: 9px;
                    padding: 10px 14px;
                    outline: none;
                    transition: border-color 0.18s ease;
                }
                .reel-search-input:focus { border-color: var(--teal); }
                .reel-search-input::placeholder { color: var(--muted); }
                .reel-search-close {
                    width: 40px; height: 40px;
                    flex: none;
                    border-radius: 9px;
                    border: 1px solid var(--border);
                    background: transparent;
                    color: var(--muted);
                    font-size: 0.95rem;
                    cursor: pointer;
                    transition: color 0.18s ease, border-color 0.18s ease;
                }
                .reel-search-close:hover { color: var(--text); border-color: var(--teal); }
                
                .reel-search-results {
                    max-height: min(52vh, 430px);
                    overflow-y: auto;
                    overscroll-behavior: contain;
                }
                .reel-search-row {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    padding: 10px 14px;
                    text-decoration: none;
                    transition: background 0.15s ease;
                }
                .reel-search-row:hover { background: var(--surface-2); }
                .reel-search-row .reel-avatar { width: 40px; height: 40px; }
                .reel-search-col {
                    display: flex;
                    flex-direction: column;
                    min-width: 0;
                    flex: 1;
                }
                .reel-search-name {
                    font-family: var(--font-display);
                    font-weight: 700;
                    font-size: 0.98rem;
                    color: var(--text);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .reel-search-handle {
                    font-family: var(--font-mono);
                    font-size: 0.72rem;
                    color: var(--muted);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .reel-search-clips {
                    font-family: var(--font-mono);
                    font-size: 0.74rem;
                    color: var(--muted);
                    flex: none;
                }
                .reel-search-msg {
                    padding: 18px 14px;
                    color: var(--muted);
                    font-family: var(--font-body);
                    font-size: 0.92rem;
                    text-align: center;
                }
                
                /* ---- Movimiento reducido ---------------------------------------------------------------- */
                @media (prefers-reduced-motion: reduce) {
                    .reel { scroll-behavior: auto; }
                    .reel-heart-burst.go { animation: none; opacity: 0; }
                    .reel-count.pop { animation: none; }
                    .reel-paused { animation: none; }
                    .reel-meta, .reel-rail { opacity: 1; transform: none; transition: none; }
                    .reel-react-chip, .reel-react-add, .reel-react-picker button { transition: none; }
                    .reel-react-picker { animation: none; }
                    .reel-search-panel { animation: none; }
                    .reel-sound-hint { animation: none; }
                    .reel-creator-bar { animation: none; }
                    .reel-volume { transition: none; }
                    .reel-spinner { animation-duration: 1.6s; }
                }