/* Google Font: Coming Soon - Aplicada a toda la app */
@import url('https://fonts.googleapis.com/css2?family=Coming+Soon&display=swap');

/* Aplicar Coming Soon como fuente base */
body, 
.btn, 
.navbar, 
.modal-title, 
.card-title, 
.badge,
.toast,
.pagination,
h1, h2, h3, h4, h5, h6 {
    font-family: "Coming Soon", cursive !important;
    font-weight: 400;
    font-style: normal;
}

/* Mantener fuentes del sistema para elementos técnicos y de entrada */
input, 
textarea, 
select, 
.form-control, 
.form-select,
code,
pre,
.table td,
.table th,
#uploadLog {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Excepción: Títulos de video y textos principales pueden usar Coming Soon */
.table th,
.modal-header .modal-title,
.card-header h5,
.nav-link,
.dropdown-item {
    font-family: "Coming Soon", cursive !important;
}

/* Mejorar legibilidad de números en badges */
.badge {
    font-family: "Coming Soon", cursive !important;
    font-size: 0.85em;
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* Texto de botones más legible */
.btn {
    font-family: "Coming Soon", cursive !important;
    letter-spacing: 0.3px;
}

/* Navegación con estilo */
.navbar-brand {
    font-family: "Coming Soon", cursive !important;
    font-size: 1.5rem !important;
    letter-spacing: 1px;
}

/* Títulos de modales más divertidos */
.modal-title {
    font-family: "Coming Soon", cursive !important;
    font-size: 1.3rem;
    letter-spacing: 0.5px;
}

/* Toast messages más amigables */
.toast-body {
    font-family: "Coming Soon", cursive !important;
    font-size: 0.95rem;
}

/* Labels y textos de formulario */
.form-label,
.form-text,
.form-check-label {
    font-family: "Coming Soon", cursive !important;
}

/* Paginación divertida */
.pagination .page-link {
    font-family: "Coming Soon", cursive !important;
    letter-spacing: 0.3px;
}

/* Dropdowns */
.dropdown-menu {
    font-family: "Coming Soon", cursive !important;
}

/* Alertas */
.alert {
    font-family: "Coming Soon", cursive !important;
}

/* Placeholder text mantiene el estilo */
::placeholder {
    font-family: "Coming Soon", cursive !important;
    opacity: 0.6;
}

/* Títulos de video en tabla - Coming Soon pero más legible */
.table tbody tr td:nth-child(3) strong {
    font-family: "Coming Soon", cursive !important;
    font-size: 1.05em;
    letter-spacing: 0.3px;
}

/* Texto de categorías y status más divertido */
.table .badge {
    font-family: "Coming Soon", cursive !important;
    letter-spacing: 0.2px;
}

/* Texto en el reproductor */
#modalVideoPlayer .text-light,
#modalVideoPlayer h6,
#modalVideoPlayer p {
    font-family: "Coming Soon", cursive !important;
}

/* Asegurar que los datos técnicos sigan siendo legibles */
#playerVideoInfo .badge,
.table td:nth-child(1), /* Fecha */
.table td:nth-child(4), /* Duración */
.table td:nth-child(5)  /* Counter */ {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.9em;
}

/* Estilos para el sistema de búsqueda y filtros */
.card-body.border-bottom {
    background-color: #f8f9fa;
}

/* Mejorar apariencia de la búsqueda */
#search:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Resaltado de términos de búsqueda */
mark {
    background-color: #fff3cd;
    padding: 0.1em 0.2em;
    border-radius: 0.25rem;
    font-weight: bold;
}

/* Mejorar paginación */
.pagination .page-link {
    border-radius: 0.375rem;
    margin: 0 0.125rem;
}

.pagination .page-item.active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Indicadores de estado en filtros */
.form-select:focus,
.form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Mejorar botones de filtros */
.btn-group-sm > .btn {
    border-radius: 0.25rem;
    margin-right: 0.125rem;
}

/* Estados de carga */
.btn .fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Estilos para modal de upload durante procesamiento */
.modal-header .fa-spinner {
    animation: spin 1s linear infinite;
    color: #0d6efd;
}

/* Botones deshabilitados en modal de upload */
#uploadModalCloseFooter:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#reloadAppBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Mejorar apariencia del log de upload */
#uploadLog {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background-color: #f8f9fa;
    line-height: 1.4;
}

/* Alerta de advertencia en upload */
#uploadWarning {
    margin-bottom: 1rem;
    border-left: 4px solid #0dcaf0;
    background-color: #cff4fc;
    border-color: #b8daff;
}

/* Animación suave para elementos que aparecen/desaparecen */
#uploadWarning {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Lazy-load image styles --- */
/* Images marked with .lazy will start blurred and slightly shifted; when loaded they get .loaded */
img.lazy {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(6px);
    transition: opacity 400ms ease, transform 400ms ease, filter 400ms ease;
    will-change: opacity, transform;
}

img.lazy.loaded {
    opacity: 1;
    transform: none;
    filter: none;
}

/* --- Card fade-up helper classes for test button animation --- */
.video-item {
    /* Ensure baseline is visible (no flicker) */
    opacity: 1;
    transform: none;
}

.video-item.ll-hidden {
    opacity: 0;
    transform: translateY(16px);
}

.video-item.ll-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 420ms cubic-bezier(.2,.9,.2,1), transform 420ms cubic-bezier(.2,.9,.2,1);
}

/* Estilos para badges de categorías en tabla */
.table td .badge {
    font-size: 0.75em;
    font-weight: 500;
    white-space: nowrap;
}

.table td .badge.bg-secondary {
    background-color: #6c757d !important;
}

.table td .badge.bg-primary {
    background-color: #0d6efd !important;
    animation: pulse 1s ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Mejorar espacio en celda de categorías */
.table td:nth-child(6) {
    max-width: 150px;
    line-height: 1.2;
}

/* Indicadores de filtros activos */
.active-filters {
    padding: 0.5rem 1rem;
    background-color: #e7f3ff;
    border: 1px solid #b8daff;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.active-filters .fa-filter {
    color: #0d6efd;
    margin-right: 0.25rem;
}

/* Animaciones para cambios en filas de la tabla - CORREGIDO */
.table tbody tr {
    transition: background-color 0.3s ease;
    /* Eliminado transform transition que causaba scroll horizontal */
}

/* Animación para fila editada exitosamente */
.table tbody tr.table-success {
    background-color: #d1e7dd !important;
    border-left: 4px solid #198754;
    /* Eliminado transform scale que causaba overflow */
}

/* Animación para cambio de status */
.table tbody tr.table-info {
    background-color: #cff4fc !important;
    border-left: 4px solid #0dcaf0;
    /* Eliminado transform scale que causaba overflow */
}

/* Animación para fila a eliminar */
.table tbody tr.table-danger {
    background-color: #f8d7da !important;
    border-left: 4px solid #dc3545;
    opacity: 0.7;
    /* Eliminado transform scale que causaba overflow */
}

/* Efecto hover mejorado para filas - CORREGIDO */
.table tbody tr:hover {
    background-color: #f5f5f5;
    /* Eliminado transform translateX que causaba scroll horizontal */
    /* Eliminado box-shadow que podía extenderse fuera del contenedor */
}

/* Prevenir hover durante animaciones */
.table tbody tr.table-success:hover,
.table tbody tr.table-info:hover,
.table tbody tr.table-danger:hover {
    /* Eliminado transform que causaba problemas de ancho */
    background-color: inherit; /* Mantener color de la animación */
}

/* Animación suave para cambios de contenido */
.table td {
    transition: background-color 0.3s ease;
    /* Eliminado 'all' transition que afectaba dimensiones */
}

/* Efecto para thumbnails actualizados */
.table td img[src*="?t="] {
    animation: imageUpdate 0.5s ease-in-out;
}

@keyframes imageUpdate {
    0% { opacity: 0.5; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* Contenedor de tabla con scroll controlado */
.table-responsive {
    overflow-x: auto;
    /* Asegurar que el contenedor maneje correctamente el overflow */
}

/* Fijar ancho mínimo de la tabla para evitar cambios dinámicos */
.table {
    min-width: 860px; /* Reducido por la columna más compacta */
    table-layout: auto; /* Permitir que las columnas se ajusten */
}

/* Controlar anchos específicos de columnas */
.table th:nth-child(1), .table td:nth-child(1) { width: 120px; min-width: 120px; }
.table th:nth-child(2), .table td:nth-child(2) { width: 60px; min-width: 60px; }
.table th:nth-child(4), .table td:nth-child(4) { width: 100px; min-width: 100px; }
.table th:nth-child(5), .table td:nth-child(5) { width: 60px; min-width: 60px; text-align: center; }
.table th:nth-child(6), .table td:nth-child(6) { width: 150px; min-width: 150px; }
.table th:nth-child(7), .table td:nth-child(7) { width: 100px; min-width: 100px; }
.table th:nth-child(9), .table td:nth-child(9) { width: 200px; min-width: 200px; }

/* Mejorar responsive de la tabla con categorías */
@media (max-width: 992px) {
    .table td:nth-child(6) {
        max-width: 120px;
    }
    
    .table td .badge {
        font-size: 0.7em;
        margin-bottom: 0.125rem;
        display: inline-block;
    }
    
    /* Reducir animaciones en móviles para mejor performance */
    .table tbody tr {
        transition: background-color 0.2s ease;
    }
    
    .table tbody tr:hover {
        /* Sin efectos hover en móviles */
        background-color: inherit;
    }
    
    /* Tabla más estrecha en móviles */
    .table {
        min-width: 600px;
    }
}

/* Responsive improvements */
@media (max-width: 768px) {
    .card-body.border-bottom .row {
        gap: 1rem;
    }
    
    .card-body.border-bottom .col-md-3,
    .card-body.border-bottom .col-md-2 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .pagination {
        font-size: 0.875rem;
    }
    
    /* Modal de upload en móviles */
    #uploadVideos .modal-dialog {
        margin: 0.5rem;
    }
    
    #uploadVideos .col-md-4,
    #uploadVideos .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }
    
    /* Tabla responsive con categorías */
    .table td:nth-child(6) {
        max-width: 100px;
    }
    
    .table td .badge {
        font-size: 0.65em;
        padding: 0.2em 0.4em;
    }
    
    /* Tabla aún más estrecha en móviles pequeños */
    .table {
        min-width: 500px;
    }
}

/* Estilos para el reproductor de video fullscreen */
#modalVideoPlayer .modal-content {
    border: none;
    border-radius: 0;
    height: 100vh;
}

#modalVideoPlayer .modal-header {
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

#modalVideoPlayer .modal-footer {
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

#modalVideoPlayer .modal-body {
    flex: 1;
    min-height: 0;
}

/* Contenedor del reproductor */
.player-container {
    background-color: #000;
    position: relative;
}

#mainVideoPlayer {
    background-color: #000;
    max-width: 100%;
    max-height: 100%;
}

#mainVideoPlayer:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Estilos para el poster del video */
#mainVideoPlayer[poster] {
    object-fit: contain;
    background-color: #000;
}

/* Asegurar que el poster mantenga proporciones */
#mainVideoPlayer {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Efecto hover en el poster */
#mainVideoPlayer[poster]:hover {
    cursor: pointer;
}

/* Centrar el poster en el contenedor */
.player-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, #000 0%, #111 50%, #000 100%);
}

/* Panel de información lateral */
#modalVideoPlayer .col-4 {
    background-color: rgba(33, 37, 41, 0.95);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Área de descripción scrolleable */
#playerVideoNotes {
    max-height: 200px;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 0.5rem;
    border-left: 4px solid #0d6efd;
    line-height: 1.6;
}

/* Badges de categorías en el reproductor */
#playerVideoCategories .badge {
    font-size: 0.875em;
    padding: 0.375rem 0.75rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    display: inline-block;
}

/* Badge de favorito */
#playerVideoFavorite .badge {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

/* Controles de visualización en el footer */
#modalVideoPlayer .modal-footer .form-check {
    margin-bottom: 0;
}

#modalVideoPlayer .modal-footer .form-check-input:checked {
    background-color: #198754;
    border-color: #198754;
}

#modalVideoPlayer .modal-footer .form-check-label {
    font-size: 0.875rem;
    cursor: pointer;
}

/* Checkbox de favorito especial */
#modalVideoPlayer .form-check #playerFavorito:checked {
    background-color: #ffc107;
    border-color: #ffc107;
}

/* Responsive para tablet y móviles */
@media (max-width: 992px) {
    #modalVideoPlayer .modal-body .row {
        flex-direction: column;
    }
    
    #modalVideoPlayer .col-8,
    #modalVideoPlayer .col-4 {
        flex: 0 0 auto;
        width: 100%;
    }
    
    #modalVideoPlayer .col-8 {
        height: 60vh;
    }
    
    #modalVideoPlayer .col-4 {
        height: calc(40vh - 120px); /* Restar altura de header y footer aproximada */
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    #modalVideoPlayer .modal-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    #modalVideoPlayer .modal-footer .d-flex {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    #playerVideoNotes {
        max-height: 120px;
        font-size: 0.875rem;
    }
}

/* Responsive para móviles pequeños */
@media (max-width: 768px) {
    #modalVideoPlayer .col-8 {
        height: 50vh;
    }
    
    #modalVideoPlayer .col-4 {
        height: calc(50vh - 120px);
        padding: 1rem !important;
    }
    
    #modalVideoPlayer .modal-footer .form-check-label {
        font-size: 0.75rem;
    }
    
    #playerVideoNotes {
        max-height: 100px;
        padding: 0.75rem;
    }
}

/* Animaciones suaves */
#modalVideoPlayer .modal-content {
    transition: opacity 0.3s ease;
}

#modalVideoPlayer.show .modal-content {
    opacity: 1;
}

/* Efecto de transición al cargar video */
#mainVideoPlayer {
    transition: opacity 0.3s ease-in-out;
}

#mainVideoPlayer:not([poster]) {
    opacity: 0.8;
}

/* Efecto hover en el poster para indicar que es clickeable */
#mainVideoPlayer[poster]:hover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#mainVideoPlayer[poster]:hover::before {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: #000;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Posicionar el reproductor relativamente para los pseudo-elementos */
.player-container {
    position: relative;
}

#mainVideoPlayer {
    position: relative;
    z-index: 0;
}

/* Badge de modo admin con mejor visibilidad */
.badge.bg-warning.text-danger-emphasis {
    border: 1px solid #dc3545;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* Animación sutil para el badge de admin */
.badge.bg-warning.text-danger-emphasis {
    animation: adminBadgePulse 2s ease-in-out infinite;
}

@keyframes adminBadgePulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.8; 
        transform: scale(1.02);
    }
}

/* Estilos específicos para modo USUARIO (sin admin) - TV 55" friendly */
body:not(.admin-mode) {
    font-size: 1.2rem; /* Aumentar tamaño base para TV */
}

/* Headers más grandes en modo usuario */
body:not(.admin-mode) h1 { font-size: 3rem; }
body:not(.admin-mode) h2 { font-size: 2.5rem; }
body:not(.admin-mode) h3 { font-size: 2rem; }
body:not(.admin-mode) h4 { font-size: 1.75rem; }
body:not(.admin-mode) h5 { font-size: 1.5rem; }
body:not(.admin-mode) h6 { font-size: 1.25rem; }

/* Navegación más grande para TV */
body:not(.admin-mode) .navbar-brand {
    font-size: 2rem !important;
}

body:not(.admin-mode) .nav-link {
    font-size: 1.3rem;
    padding: 0.75rem 1rem;
}

/* Botones más grandes y legibles */
body:not(.admin-mode) .btn {
    font-size: 1.1rem;
    padding: 0.75rem 1.5rem;
    letter-spacing: 0.5px;
}

body:not(.admin-mode) .btn-sm {
    font-size: 1rem;
    padding: 0.5rem 1rem;
}

/* Cards del grid más legibles para TV */
body:not(.admin-mode) .video-title {
    font-size: 1.3rem !important;
    line-height: 1.4;
    min-height: 3.5rem;
}

body:not(.admin-mode) .video-meta-item {
    font-size: 1rem;
}

body:not(.admin-mode) .video-meta-item i {
    font-size: 1.1rem;
    margin-right: 0.5rem;
}

/* Header del grid más prominente */
body:not(.admin-mode) .container-fluid h2 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
}

body:not(.admin-mode) .container-fluid p.text-muted {
    font-size: 1.2rem;
}

/* Filtros más grandes para fácil navegación */
body:not(.admin-mode) .form-select {
    font-size: 1.1rem;
    padding: 0.75rem 1rem;
}

/* Botón de play más grande en hover */
body:not(.admin-mode) .video-play-btn {
    width: 80px;
    height: 80px;
    font-size: 28px;
}

/* Modal del reproductor con texto más grande */
body:not(.admin-mode) #modalVideoPlayer .modal-title {
    font-size: 1.8rem;
}

body:not(.admin-mode) #modalVideoPlayer h6 {
    font-size: 1.3rem;
}

body:not(.admin-mode) #modalVideoPlayer p,
body:not(.admin-mode) #playerVideoNotes {
    font-size: 1.1rem;
    line-height: 1.6;
}

body:not(.admin-mode) #modalVideoPlayer .badge {
    font-size: 1rem;
    padding: 0.5rem 1rem;
}

body:not(.admin-mode) #modalVideoPlayer .form-check-label {
    font-size: 1.1rem;
}

/* Ajustes responsive para TV grande */
@media (min-width: 1400px) {
    body:not(.admin-mode) {
        font-size: 1.4rem;
    }
    
    body:not(.admin-mode) .video-title {
        font-size: 1.5rem !important;
    }
    
    body:not(.admin-mode) .video-meta-item {
        font-size: 1.2rem;
    }
    
    body:not(.admin-mode) .container-fluid h2 {
        font-size: 3.2rem;
    }
    
    body:not(.admin-mode) .video-play-btn {
        width: 100px;
        height: 100px;
        font-size: 36px;
    }
    
    body:not(.admin-mode) .btn {
        font-size: 1.3rem;
        padding: 1rem 2rem;
    }
}

/* Mantener tamaños normales para admin (modo tabla) */
body.admin-mode {
    font-size: 1rem; /* Tamaño estándar para tabla admin */
}

body.admin-mode .table {
    font-size: 0.9rem; /* Tabla compacta para admin */
}

/* Categorías más legibles en modo usuario */
body:not(.admin-mode) .card-body {
    font-size: 1.1rem;
}

body:not(.admin-mode) .card-body .btn {
    font-size: 1rem;
}

.hide-card-on-filtered-cat {
    /*
    display: none !important;
    */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    width: 1px !important;
    height: 1px !important;
}

/* Estilos para filtros simplificados - SUPER SIMPLE SIN ANIMACIONES */

/* Clase simple para ocultar elementos filtrados */
.video-item.filtered-hidden {
    display: none !important;
}

/* Ya está. Sin más complicaciones. */

/* ===================================================================== */
/* SISTEMA DE FADE-IN CON RETRASO PARA CARDS/CONTENEDORES */
/* ===================================================================== */

/* Estado normal de las cards */
.video-item {
    opacity: 1;
    transform: none;
}

/* Estado inicial oculto para animación */
.video-item.fade-animate {
    opacity: 0 !important;
    transform: translateY(20px) !important;
}

/* Estado de animación con delay dinámico */
.video-item.fade-show {
    animation: videoCardFadeIn 0.6s ease forwards !important;
    animation-delay: var(--card-delay, 0.1s) !important;
}

/* Keyframe para la animación fade-in */
@keyframes videoCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================================================== */
/* SISTEMA GENÉRICO PARA CUALQUIER CONTENEDOR */
/* ===================================================================== */

/* Para usar en cualquier contenedor, cambiar .video-item por tu selector */
.fade-container {
    opacity: 1;
    transform: none;
}

.fade-container.fade-animate {
    opacity: 0 !important;
    transform: translateY(20px) !important;
}

.fade-container.fade-show {
    animation: containerFadeIn 0.6s ease forwards !important;
    animation-delay: var(--fade-delay, 0.1s) !important;
}

@keyframes containerFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}