/* ==========================================================================
   Reproductor de un short (views/shorts/watch.php): barra de navegación,
   reproductor 9:16, acciones, comentarios y cola de recomendados.
   Antes eran estilos en línea. Se carga después de theme-nova.css y todo va
   bajo .sw-page para mantener la prioridad que tenían los estilos en línea.
   ========================================================================== */

.sw-page { margin-top: 85px; min-height: 85vh; padding-bottom: 4rem; }
.sw-page .sw-ico-primary { color: var(--primary); }
.sw-page .sw-ico-secondary { color: var(--secondary); }
.sw-page .sw-ico-blue { color: #60a5fa; }
.sw-page .sw-ico-rose { color: #f43f5e; }

/* --- Columna del reproductor --- */
.sw-page .sw-col { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
.sw-page .sw-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-glass);
    border-radius: var(--border-radius-sm);
    padding: 0.6rem 1rem;
}
.sw-page .sw-back {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.sw-page .sw-back:hover { color: var(--text-white); }
.sw-page .sw-nav { display: flex; align-items: center; gap: 0.4rem; }
.sw-page .sw-prev { padding: 0.25rem 0.6rem; font-size: 0.8rem; border-radius: 4px; }
.sw-page .sw-next { padding: 0.25rem 0.75rem; font-size: 0.8rem; border-radius: 4px; display: inline-flex; align-items: center; gap: 0.25rem; }

.sw-page .sw-player {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    border: 1.5px solid rgba(244, 63, 94, 0.4);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}
.sw-page .sw-player iframe { width: 100%; height: 100%; border: none; }
.sw-page .sw-player-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    padding: 2rem;
    text-align: center;
}
.sw-page .sw-player-empty i { font-size: 2.5rem; color: #f59e0b; margin-bottom: 0.8rem; }
.sw-page .sw-player-empty p { font-size: 0.9rem; margin: 0; }

.sw-page .sw-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-glass);
    border-radius: var(--border-radius-sm);
    padding: 0.8rem 1.2rem;
}
.sw-page .sw-actions-group { display: flex; align-items: center; gap: 0.6rem; }
.sw-page .sw-act { font-size: 0.85rem; padding: 0.35rem 0.75rem; border-radius: 6px; }
.sw-page .sw-act-inline { display: inline-flex; align-items: center; gap: 0.35rem; }
.sw-page .sw-vote-down.voted-down { color: #ef4444; }
.sw-page .sw-share { font-size: 0.82rem; display: inline-flex; align-items: center; gap: 0.3rem; }

.sw-page .sw-info {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-glass);
    border-radius: var(--border-radius-sm);
    padding: 1.2rem;
}
.sw-page .sw-title { font-size: 1.15rem; font-weight: 800; color: var(--text-white); margin: 0 0 0.5rem 0; line-height: 1.4; }
.sw-page .sw-meta { display: flex; align-items: center; gap: 1rem; font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }

/* --- Columna lateral: comentarios y cola --- */
.sw-page .sw-side { display: flex; flex-direction: column; gap: 1.8rem; }
.sw-page .sw-panel {
    background: rgba(21, 24, 36, 0.6);
    border: 1px solid var(--border-glass);
    border-radius: var(--border-radius-md);
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}
.sw-page .sw-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--border-glass);
    padding-bottom: 0.8rem;
}
.sw-page .sw-panel-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.sw-page .sw-panel-title.sw-panel-title-sm { font-size: 1rem; margin: 0 0 1rem 0; }

.sw-page .sw-form {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-glass);
    padding: 1.2rem;
    border-radius: var(--border-radius-sm);
    margin-bottom: 1.5rem;
}
.sw-page .sw-replying {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-radius: 6px;
    padding: 0.45rem 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
    color: #93c5fd;
    align-items: center;
    justify-content: space-between;
}
.sw-page .sw-replying-who { display: flex; align-items: center; gap: 0.4rem; }
.sw-page .sw-replying-who i { color: #60a5fa; }
.sw-page .sw-replying-who strong { color: #fff; }
.sw-page .sw-replying-cancel { background: transparent; border: none; color: #f87171; cursor: pointer; font-size: 0.8rem; font-weight: 700; }
.sw-page .sw-textarea {
    width: 100%;
    min-height: 75px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-glass);
    border-radius: 6px;
    padding: 0.75rem;
    color: var(--text-white);
    font-family: inherit;
    font-size: 0.88rem;
    resize: vertical;
    margin-bottom: 0.5rem;
    outline: none;
    transition: border-color 0.2s;
}
.sw-page .sw-textarea:focus { border-color: var(--primary); }
.sw-page .sw-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.sw-page .sw-toolbar-left { display: flex; align-items: center; gap: 0.3rem; position: relative; }
.sw-page .sw-emoji-quick {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    font-size: 1.05rem;
    padding: 0.15rem 0.4rem;
    cursor: pointer;
    line-height: 1.2;
}
.sw-page .sw-emoji-more { font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 4px; color: #f472b6; border-color: rgba(236, 72, 153, 0.35); }

/* Panel de emojis y frases */
.sw-page .sw-drawer {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 100;
    width: 300px;
    max-width: 90vw;
    background: #161822;
    border: 1.5px solid rgba(236, 72, 153, 0.35);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    padding: 0.7rem;
    animation: fadeInScale 0.15s ease-out;
}
.sw-page .sw-drawer-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border-glass);
    padding-bottom: 0.4rem;
    margin-bottom: 0.5rem;
}
.sw-page .sw-drawer-tab {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}
.sw-page .sw-drawer-tab[data-tab="xxx"].active-tab { background: rgba(236, 72, 153, 0.2); color: #f472b6; }
.sw-page .sw-drawer-tab[data-tab="reactions"].active-tab { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.sw-page .sw-drawer-tab[data-tab="phrases"].active-tab { background: rgba(16, 185, 129, 0.2); color: var(--primary); }
.sw-page .sw-drawer-close { background: transparent; border: none; color: var(--text-muted); margin-left: auto; cursor: pointer; padding: 0 0.2rem; }
.sw-page .sw-drawer-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.2rem; max-height: 140px; overflow-y: auto; }
.sw-page .sw-drawer-list { display: flex; flex-direction: column; gap: 0.3rem; max-height: 140px; overflow-y: auto; }
.sw-page .sw-emoji {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 1.1rem;
    padding: 0.2rem 0;
    cursor: pointer;
}
.sw-page .sw-phrase {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-glass);
    border-radius: 4px;
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
    color: #e2e8f0;
    text-align: left;
    cursor: pointer;
}

.sw-page .sw-submit-row { display: flex; align-items: center; gap: 0.6rem; }
.sw-page .sw-count { font-size: 0.72rem; color: var(--text-muted); }
.sw-page .sw-submit {
    font-size: 0.8rem;
    padding: 0.35rem 1.1rem;
    font-weight: 700;
    border-radius: var(--border-radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.sw-page .sw-submit i.bi-send-fill { font-size: 0.75rem; }
.sw-page .sw-form-guest { text-align: center; padding: 0.8rem 0; }
.sw-page .sw-form-guest p { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 0.8rem; }
.sw-page .sw-form-guest .btn { font-size: 0.82rem; padding: 0.4rem 1.2rem; font-weight: 700; }

/* Comentarios */
.sw-page .sw-comment-list { display: flex; flex-direction: column; gap: 1rem; max-height: 400px; overflow-y: auto; padding-right: 0.3rem; }
.sw-page .sw-comment {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--border-glass);
    padding: 0.9rem;
    border-radius: var(--border-radius-sm);
}
.sw-page .sw-avatar { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--border-glass); flex-shrink: 0; }
.sw-page img.sw-avatar { object-fit: cover; }
.sw-page .sw-avatar-initial {
    background: #3b82f6;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}
.sw-page .sw-avatar-initial.sw-avatar-new { background: #10b981; }
.sw-page .sw-comment-main { flex: 1; min-width: 0; }
.sw-page .sw-comment-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
.sw-page .sw-comment-user { color: var(--primary); font-weight: 700; font-size: 0.85rem; text-decoration: none; }
.sw-page .sw-comment-user.is-vip { color: #fbbf24; }
.sw-page .sw-comment-date { font-size: 0.72rem; color: var(--text-muted); }
.sw-page .sw-comment-body { color: #e2e8f0; font-size: 0.85rem; line-height: 1.45; word-break: break-word; margin-bottom: 0.4rem; }
.sw-page .sw-comment-actions { display: flex; align-items: center; gap: 0.6rem; font-size: 0.75rem; color: var(--text-muted); flex-wrap: wrap; }
.sw-page .sw-cvote-sep { width: 1px; height: 10px; background: rgba(255, 255, 255, 0.12); }
.sw-page .sw-comment-act { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 0; }
.sw-page .sw-comment-act.sw-act-delete { color: #ef4444; margin-left: auto; }
.sw-page .sw-no-comments { text-align: center; padding: 2rem 1rem; color: var(--text-muted); font-size: 0.85rem; }
.sw-page .sw-no-comments i { font-size: 1.8rem; display: block; margin-bottom: 0.4rem; opacity: 0.5; }

/* Cola de shorts recomendados */
.sw-page .sw-queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.8rem; }
@media (max-width: 760px) {
    /* Igual que el listado: un recomendado por fila en móvil */
    .sw-page .sw-queue { grid-template-columns: 1fr; }
}
.sw-page .sw-queue-item {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: 8px;
    overflow: hidden;
    background: #161822;
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.2s;
}
.sw-page .sw-queue-item:hover { transform: scale(1.04); }
.sw-page .sw-queue-ph {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1f2438 0%, #0d0f17 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.sw-page .sw-queue-ph i { font-size: 1.5rem; color: rgba(244, 63, 94, 0.35); }
.sw-page .sw-queue-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
/* Previsualización (listing.js): el minivídeo tapa el póster cuando ya se reproduce; el título queda encima */
.sw-page .sw-queue-item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.sw-page .sw-queue-item.is-previewing video { opacity: 1; }
.sw-page .sw-queue-caption {
    position: relative;
    z-index: 2;
    padding: 0.6rem 0.5rem 0.4rem 0.5rem;
    background: linear-gradient(0deg, rgba(10, 12, 18, 0.95) 0%, transparent 100%);
}
.sw-page .sw-queue-caption h4 {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
}

/* --- Animaciones y utilidades (antes en un <style> al final de la vista) --- */
@keyframes fadeInScale {
    from { opacity: 0; transform: translateY(6px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes highlightPulse {
    0% { outline: 2px solid var(--primary); box-shadow: 0 0 20px rgba(16, 185, 129, 0.6); }
    50% { outline: 2px solid #3b82f6; box-shadow: 0 0 25px rgba(59, 130, 246, 0.7); }
    100% { outline: 2px solid transparent; box-shadow: none; }
}
.comment-highlighted {
    animation: highlightPulse 2.5s ease-out;
}
.spin {
    display: inline-block;
    animation: spinIcon 1s linear infinite;
}
@keyframes spinIcon {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}