/* ============================================================
   Reproductor tipo Reels / TikTok (pantalla completa, scroll vertical)
   Funciona en celular (deslizar) y escritorio (rueda del mouse).
   v3: en móvil el video queda LIMPIO a pantalla completa (solo la
   flecha de regresar arriba-izquierda); la barra inferior de
   navegación se oculta mientras se ven los reels. Botón regresar +
   compartir arriba, publicar video desde el FAB, Latinmojis en
   comentarios.
   ============================================================ */
.reels-viewer {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 999999;
    display: none;
}
.reels-viewer.open {
    display: block;
}

/* --- EN MÓVIL: ocultar la barra inferior de navegación ---
   Antes se dejaba visible a propósito (encimada sobre el visor); ahora
   se oculta por completo para que el video quede limpio, a pantalla
   completa, con solo el nombre del usuario y el título encima. */
@media (max-width: 1023px) {
    body:has(.reels-viewer.open) .mobile-nav {
        display: none;
    }
}

/* Botón REGRESAR (flecha, esquina superior izquierda) */
.reels-close {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 20;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reels-close:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Botón de 3 PUNTOS (esquina superior derecha) con menú de opciones */
.reels-menu-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 21;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reels-menu-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Botón de SONIDO (bocinita), al lado del de 3 puntos — refleja el
   video que está centrado en pantalla en cada momento (uno solo para
   todo el visor, no uno por video). */
.reels-mute-btn {
    position: absolute;
    top: 16px;
    right: 70px;
    z-index: 21;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reels-mute-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}
.reels-menu-dropdown {
    position: absolute;
    top: 68px;
    right: 16px;
    z-index: 22;
    min-width: 230px;
    background: var(--bg-card, #1A1F3A);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
    padding: 6px;
    display: none;
}
.reels-menu-dropdown.open {
    display: block;
    animation: menuIn 0.15s ease;
}
@keyframes menuIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.reels-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-primary, #fff);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
}
.reels-menu-item:hover {
    background: rgba(255, 60, 172, 0.14);
}
.reels-menu-item i {
    width: 20px;
    text-align: center;
    color: var(--primary, #FF3CAC);
}
.reels-menu-item.disabled {
    opacity: 0.45;
    cursor: default;
}
.reels-menu-item.disabled:hover {
    background: none;
}
.reels-menu-item small {
    display: block;
    font-weight: 400;
    font-size: 11px;
    color: var(--text-dim, #A0A0A0);
    margin-top: 2px;
}
/* "Eliminar video" dentro del menú de opciones — en rojo para que se
   note que es una acción destructiva, igual que antes tenía el botón
   suelto que ahora se movió aquí. */
.reels-menu-item.danger,
.reels-menu-item.danger i {
    color: #EF4444;
}
.reels-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.16);
}

/* Menú chiquito del botón "Compartir" (Compartir a apps / Repostear) —
   se ancla junto al botón (no en una esquina fija), por eso su
   posición la calcula JavaScript en vez de venir fija aquí. */
.reel-share-menu {
    z-index: 1000012;
    background: var(--bg-card, #1A1F3A);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
    padding: 6px;
    animation: menuIn 0.15s ease;
}

/* Contenedor con scroll-snap vertical */
.reels-scroll {
    height: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
}
.reels-scroll::-webkit-scrollbar {
    display: none;
}

/* Cada video ocupa toda la pantalla */
.reel-slide {
    position: relative;
    height: 100%;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Media (thumbnail o <video> real de un usuario) */
.reel-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
video.reel-media {
    object-fit: contain; /* los videos del usuario se ven completos */
    background: #000;
}
.reel-slide::after {
    /* Degradado abajo para que se lea el texto */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 45%);
    pointer-events: none;
}

/* Contenedor central para el tap play/pausa */
.reel-tap {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.reel-playpause {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.reel-slide.paused .reel-playpause {
    opacity: 1;
}

/* Columna de acciones a la derecha (like, comentar, compartir, seguir)
   Pegada abajo, casi tocando la barra inferior */
.reel-actions {
    position: absolute;
    right: 12px;
    bottom: 16px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.reel-action {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
}
.reel-action i {
    font-size: 30px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.4);
    transition: transform 0.15s, color 0.15s;
}
.reel-action:active i {
    transform: scale(1.25);
}
.reel-action.liked i {
    color: #ff3040;
}

/* Avatar con botón de seguir */
.reel-follow {
    position: relative;
    margin-bottom: 6px;
    cursor: pointer;
}
.reel-follow img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #fff;
    object-fit: cover;
}
/* Info abajo a la izquierda: autor + título/narración
   Al fondo, alineada con las acciones */
.reel-info {
    position: absolute;
    left: 16px;
    right: 84px;
    bottom: 16px;
    z-index: 10;
    color: #fff;
    max-width: 100%;
}
.reel-author-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    /* Sin esto, un flex item nunca se encoge más allá de su ancho de
       contenido — con un nombre de usuario largo eso empujaba el botón
       "Seguir" (y el texto) fuera del marco del video, sobre todo en
       escritorio donde el reel es más angosto (480px máx). */
    min-width: 0;
    max-width: 100%;
}
.reel-author {
    font-size: 16px;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Botón real de "Seguir" junto al nombre de usuario del reel — reemplaza
   al viejo "+" decorativo que iba pegado a la burbuja de la foto. */
.reel-follow-btn {
    flex-shrink: 0;
    border: none;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #FF6B35, #FF3CAC);
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    cursor: pointer;
    white-space: nowrap;
}
.reel-follow-btn[data-state="connected"],
.reel-follow-btn[data-state="pending_sent"] {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.65);
}
.reel-follow-btn[data-state="pending_received"] {
    background: #fff;
    color: #FF3CAC;
}
.reel-follow-btn:disabled {
    opacity: 0.6;
    pointer-events: none;
}
.reel-title {
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.95;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
    /* Narraciones largas (hasta 500 caracteres): recortar a 3 líneas
       y expandir al tocar */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
}
.reel-title.expanded {
    display: block;
    max-height: 40vh;
    overflow-y: auto;
}
.reel-duration {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    background: rgba(0,0,0,0.5);
    padding: 3px 8px;
    border-radius: 6px;
}
/* NOTA: el botón suelto ".reel-delete" que iba encima del título ya no
   se usa — "Eliminar video" ahora vive dentro del menú de los 3 puntos
   (ver ".reels-menu-item.danger" más arriba). Se deja de generar en el
   HTML; esta regla se quita para no dejar CSS muerto. */

/* Indicador de "sin video real" (solo en las tarjetas demo).
   Ahora va arriba al CENTRO porque la esquina derecha es del
   botón compartir. */
.reel-note {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    background: rgba(0,0,0,0.4);
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

/* En escritorio: centrar el "teléfono" con ancho máximo tipo Reels */
@media (min-width: 1024px) {
    .reel-slide {
        max-width: 480px;
        margin: 0 auto;
    }
    .reels-scroll {
        background: #000;
    }
}

/* ===== Animación de like (corazón que explota) ===== */
.reel-action.reel-like.liked i {
    color: #ff3040;
    animation: likePop 0.35s ease;
}
@keyframes likePop {
    0% { transform: scale(1); }
    45% { transform: scale(1.4); }
    100% { transform: scale(1); }
}
.reel-like-burst {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: #ff3040;
    font-size: 30px;
    pointer-events: none;
    animation: burstUp 0.7s ease forwards;
}
@keyframes burstUp {
    0% { opacity: 0.9; transform: translate(-50%, 0) scale(0.6); }
    50% { opacity: 1; transform: translate(-50%, -40px) scale(1.3); }
    100% { opacity: 0; transform: translate(-50%, -80px) scale(1); }
}

/* Animación del botón seguir */
.reel-follow-btn {
    transition: transform 0.15s, background 0.15s;
}
.reel-follow-btn:active {
    transform: scale(0.94);
}

/* ===== Panel de comentarios (bottom sheet) ===== */
.reel-comments {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: none;
}
.reel-comments.open {
    display: block;
}
.reel-comments-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}
.reel-comments-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 70%;
    background: var(--bg-card, #fff);
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    animation: sheetUp 0.25s ease;
}
@keyframes sheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
/* En escritorio, centrar el sheet como el reel */
@media (min-width: 1024px) {
    .reel-comments-sheet {
        max-width: 480px;
        margin: 0 auto;
    }
}
.reel-comments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color, #eee);
    font-weight: 700;
    color: var(--text-primary, #1A1F3A);
}
.reel-comments-head button {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-secondary, #888);
}
.reel-comments-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 18px;
}
.reel-comment {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.reel-comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-hover, #f1f1f5);
    color: var(--text-secondary, #999);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.reel-comment-user {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #1A1F3A);
}
.reel-comment-user span {
    font-weight: 400;
    font-size: 12px;
    color: var(--text-secondary, #999);
    margin-left: 6px;
}
.reel-comment-text {
    font-size: 14px;
    color: var(--text-primary, #333);
    margin-top: 2px;
}
.reel-comments-input {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color, #eee);
    align-items: center;
}
.reel-comments-input input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-primary, #e5e7eb);
    border-radius: 22px;
    padding: 10px 16px;
    font-size: 14px;
    outline: none;
    background: var(--bg-secondary, #f7f7f9);
    color: var(--text-primary, #1A1F3A);
}
.reel-comments-input input:focus {
    border-color: var(--primary-color, #FF3CAC);
}
.reel-comments-input button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #FF6B35, #FF3CAC);
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;
}
/* Botón de Latinmojis en los comentarios */
.reel-comments-input .latinmoji-trigger {
    background: none;
    font-size: 22px;
    width: 40px;
    height: 44px;
    padding: 0;
    line-height: 1;
}
/* El picker de Latinmojis debe verse POR ENCIMA del visor de reels */
body:has(.reels-viewer.open) .latinmoji-picker,
body:has(.reel-publish-sheet.open) .latinmoji-picker {
    z-index: 1000010 !important;
}

/* El diálogo de "Repostear" (definido en el CSS principal del sitio,
   pensado para abrirse desde el feed normal) no tenía por qué competir
   con nada que tape TODA la pantalla — pero el visor de Reels sí lo
   hace, con un z-index altísimo. Sin este ajuste, "Repostear" se abría
   "detrás" del video (invisible) en vez de encima, el mismo problema
   que tuvimos antes con "Visitar perfil". A diferencia de ese caso,
   aquí SÍ queremos quedarnos viendo el video mientras se repostea, así
   que en vez de cerrar el visor, simplemente subimos el diálogo por
   encima de él. */
body:has(.reels-viewer.open) .lb-repost-overlay {
    z-index: 1000012 !important;
}

/* ============================================================
   PUBLICAR VIDEO / REEL (desde el botón flotante "+")
   ============================================================ */
/* Icono de la nueva opción del FAB */
.fab-option-icon.video {
    background: linear-gradient(135deg, #784BA0, #FF3CAC);
}

.reel-publish-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000005;
    background: rgba(0, 0, 0, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.reel-publish-sheet.open {
    display: flex;
}
.reel-publish-card {
    width: min(480px, 94vw);
    max-height: 92vh;
    overflow-y: auto;
    background: var(--bg-card, #1A1F3A);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.reel-publish-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-primary, #fff);
    font-weight: 700;
    font-size: 17px;
}
.reel-publish-head button {
    background: none;
    border: none;
    color: var(--text-secondary, #999);
    font-size: 20px;
    cursor: pointer;
}
/* Zona para elegir el video */
.reel-publish-drop {
    border: 2px dashed rgba(255, 60, 172, 0.55);
    border-radius: 14px;
    padding: 26px 14px;
    text-align: center;
    color: var(--text-dim, #A0A0A0);
    cursor: pointer;
    font-size: 14px;
}
.reel-publish-drop i {
    font-size: 30px;
    color: var(--primary, #FF3CAC);
    display: block;
    margin-bottom: 8px;
}
.reel-publish-preview {
    width: 100%;
    max-height: 300px;
    border-radius: 12px;
    background: #000;
    display: none;
}
.reel-publish-preview.show {
    display: block;
}
/* Narración con contador de caracteres */
.reel-publish-desc-wrap {
    position: relative;
}
.reel-publish-desc {
    width: 100%;
    min-height: 96px;
    resize: vertical;
    border: 1px solid var(--border, rgba(255,255,255,0.15));
    border-radius: 12px;
    background: var(--bg-secondary, rgba(255,255,255,0.06));
    color: var(--text-primary, #fff);
    font-family: inherit;
    font-size: 14px;
    padding: 12px 44px 26px 14px;
    outline: none;
    box-sizing: border-box;
}
.reel-publish-desc:focus {
    border-color: var(--primary, #FF3CAC);
}
.reel-publish-counter {
    position: absolute;
    bottom: 8px;
    right: 14px;
    font-size: 11px;
    color: var(--text-dim, #A0A0A0);
}
.reel-publish-counter.limit {
    color: #EF4444;
    font-weight: 700;
}
/* Botón de mojis dentro del cuadro de narración */
.reel-publish-desc-wrap .latinmoji-trigger {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
}
.reel-publish-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.reel-publish-btn {
    border: none;
    border-radius: 24px;
    padding: 11px 24px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.reel-publish-btn.cancel {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary, #fff);
}
.reel-publish-btn.publish {
    background: var(--gradient, linear-gradient(135deg, #FF6B35, #FF3CAC, #784BA0));
    color: #fff;
}
.reel-publish-btn.publish:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Resumen del recorte elegido, debajo de la vista previa en "Publicar
   video" — con un botón para reabrir el editor y ajustarlo. */
.reel-publish-trim-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(255, 60, 172, 0.12);
    border: 1px solid rgba(255, 60, 172, 0.35);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-primary, #fff);
}
.reel-publish-trim-summary button {
    flex-shrink: 0;
    border: none;
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--gradient, linear-gradient(135deg, #FF6B35, #FF3CAC, #784BA0));
    cursor: pointer;
}

/* ============================================================
   EDITOR DE RECORTE ESTILO TIKTOK
   Se abre automáticamente al elegir un video en "Publicar video".
   No corta el archivo (el original completo es el que sube a R2) —
   guarda trimStart/trimEnd y el reproductor respeta ese rango al
   verlo, igual que ya hacía el recorte local viejo.
   ============================================================ */
.reel-trim-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000008;
    background: rgba(0, 0, 0, 0.94);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.reel-trim-sheet.open {
    display: flex;
}
.reel-trim-card {
    width: min(480px, 94vw);
    max-height: 92vh;
    overflow-y: auto;
    background: var(--bg-card, #1A1F3A);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.reel-trim-warning {
    display: none;
    align-items: center;
    gap: 8px;
    background: rgba(255, 107, 53, 0.15);
    border: 1px solid rgba(255, 107, 53, 0.5);
    color: #FFB088;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.4;
}
.reel-trim-preview-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    max-height: 320px;
    display: flex;
    justify-content: center;
}
.reel-trim-preview {
    width: 100%;
    max-height: 320px;
    display: block;
    object-fit: contain;
    background: #000;
}
.reel-trim-tap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 22px;
    background: rgba(0, 0, 0, 0.15);
}
.reel-trim-tap i {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Barra de recorte: carrete de miniaturas + manijas arrastrables */
.reel-trim-track {
    position: relative;
    height: 64px;
    border-radius: 10px;
    overflow: visible;
    touch-action: none;
}
.reel-trim-filmstrip {
    position: absolute;
    inset: 0;
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}
.reel-trim-frame {
    flex: 1 1 0;
    height: 100%;
    display: block;
}
.reel-trim-dim {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    pointer-events: none;
}
.reel-trim-dim.left {
    left: 0;
    border-radius: 10px 0 0 10px;
}
.reel-trim-dim.right {
    right: 0;
    border-radius: 0 10px 10px 0;
}
.reel-trim-selection {
    position: absolute;
    top: 0;
    bottom: 0;
    border-top: 3px solid #FF3CAC;
    border-bottom: 3px solid #FF3CAC;
    box-sizing: border-box;
    /* Antes esto era pointer-events:none, así que arrastrar el recuadro
       rosa no hacía nada — el gesto solo "agarraba" algo cuando caía
       justo en una de las dos manijas angostas, y por eso se sentía como
       que se movía "por partes". Ahora todo el recuadro se puede
       arrastrar para mover el recorte completo (sin cambiar su
       duración) — las manijas de los bordes siguen sirviendo para
       agrandar o achicar el recorte. */
    cursor: grab;
    touch-action: none;
}
.reel-trim-selection.dragging {
    cursor: grabbing;
}
.reel-trim-handle {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 18px;
    margin-left: -9px;
    background: #FF3CAC;
    border-radius: 6px;
    cursor: ew-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.reel-trim-handle span {
    width: 3px;
    height: 18px;
    background: rgba(255,255,255,0.85);
    border-radius: 2px;
}
.reel-trim-info {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    color: var(--text-dim, #A0A0A0);
}
#reelTrimSelected {
    color: var(--text-primary, #fff);
    font-weight: 700;
}

/* ============================================================
   EDITOR BÁSICO DE VIDEOS / REELS
   (narración + filtros + recorte por metadatos)
   ============================================================ */
.reel-editor-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000006;
    background: rgba(0, 0, 0, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.reel-editor-sheet.open {
    display: flex;
}
.reel-editor-card {
    width: min(500px, 94vw);
    max-height: 92vh;
    overflow-y: auto;
    background: var(--bg-card, #1A1F3A);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.reel-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-primary, #fff);
    font-weight: 700;
    font-size: 17px;
}
.reel-editor-head button {
    background: none;
    border: none;
    color: var(--text-secondary, #999);
    font-size: 20px;
    cursor: pointer;
}
.reel-editor-preview {
    width: 100%;
    max-height: 280px;
    border-radius: 12px;
    background: #000;
}
.reel-editor-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim, #A0A0A0);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
/* Fichas de filtros */
.reel-filter-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.reel-filter-row::-webkit-scrollbar { display: none; }
.reel-filter-chip {
    flex-shrink: 0;
    border: 1px solid var(--border, rgba(255,255,255,0.15));
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #fff);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 18px;
    cursor: pointer;
}
.reel-filter-chip.active {
    background: var(--gradient, linear-gradient(135deg, #FF6B35, #FF3CAC, #784BA0));
    border-color: transparent;
}
/* Recorte */
.reel-trim-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text-primary, #fff);
    font-size: 13px;
}
.reel-trim-row label {
    display: flex;
    align-items: center;
    gap: 10px;
}
.reel-trim-row label span {
    min-width: 86px;
    color: var(--text-dim, #A0A0A0);
}
.reel-trim-row input[type="range"] {
    flex: 1;
    accent-color: var(--primary, #FF3CAC);
}
.reel-trim-value {
    min-width: 52px;
    text-align: right;
    font-weight: 700;
}
.reel-editor-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ============================================================
   MENÚ DE 3 PUNTOS — separador entre grupos de opciones
   ============================================================ */
.reels-menu-sep {
    height: 1px;
    background: var(--border, rgba(255,255,255,0.12));
    margin: 6px 8px;
}

/* ============================================================
   EDITOR v3 — Ajustes manuales (brillo/contraste/saturación)
   ============================================================ */
.reel-adjust-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 6px;
}
.reel-adjust-row label {
    display: grid;
    grid-template-columns: 110px 1fr 48px;
    align-items: center;
    gap: 10px;
    color: var(--text-primary, #fff);
    font-size: 13px;
}
.reel-adjust-row label span {
    color: var(--text-dim, #A0A0A0);
    display: flex;
    align-items: center;
    gap: 7px;
}
.reel-adjust-row label span i {
    color: var(--primary, #FF3CAC);
    width: 14px;
    text-align: center;
}
.reel-adjust-row input[type="range"] {
    width: 100%;
    accent-color: var(--primary, #FF3CAC);
}
.reel-adjust-row label b {
    text-align: right;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-primary, #fff);
}
.reel-adjust-reset {
    align-self: flex-start;
    background: rgba(255,255,255,0.08);
    color: var(--text-primary, #fff);
    border: 1px solid var(--border, rgba(255,255,255,0.15));
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
}
.reel-adjust-reset:hover {
    background: rgba(255,255,255,0.14);
}
/* Nota honesta junto a "Recorte" */
.reel-editor-note {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-dim, #909090);
    text-transform: none;
    letter-spacing: 0;
}

/* ============================================================
   BOTÓN DE PANTALLA COMPLETA (solo en videos reales)
   ============================================================ */
.reel-fs-btn i {
    font-size: 26px;
}
.reel-fs-btn {
    margin-top: 2px;
}

/* NOTA: el botón de sonido ya NO va en la columna de acciones (junto al
   corazón/comentarios) — se movió arriba, al lado del botón de 3 puntos
   (ver ".reels-mute-btn" más arriba), porque es un control por video
   pero se ve mejor agrupado con el resto de la barra superior. */

/* El botón de pantalla completa pide fullscreen directo del <video> en
   todas las plataformas (no de todo el slide vertical) — el navegador ya
   lo escala solo, sin necesitar reglas ":fullscreen" propias aquí. Se
   probó fullscreenear el slide completo en móvil para evitar el aviso
   nativo de Android, pero eso mezclaba el audio de dos videos al girar
   la pantalla (ver el comentario en reelFullscreen, videos-reels.js). */