/* --- 1. VARIABLES Y BASE --- */
:root { 
    --bg: #1a1a1a; 
    --card: #252525; 
    --accent: #007aff; 
    --text: #e0e0e0; 
    --song: #3498db; 
    --pres: #2ecc71; 
    --bible: #f1c40f; 
    --media: #e67e22; 
    --web: #9b59b6; 
    --section: #e74c3c; 
    --border: #333; 
}

body { 
    font-family: -apple-system, sans-serif; 
    background: var(--bg); 
    color: var(--text); 
    margin: 0; 
    display: flex; 
    height: 100vh; 
    overflow: hidden; 
}

/* --- 2. LAYOUT PRINCIPAL --- */
.sidebar { width: 350px; background: var(--card); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.main { flex: 1; padding: 25px; display: flex; flex-direction: column; background: #121212; overflow: hidden; } /* Overflow hidden para que el scroll lo tengan los hijos */
.right-sidebar { width: 350px; background: var(--card); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden;}

/* --- 3. LOGIN --- */
#login-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: #121212; z-index: 10000; display: flex; justify-content: center; align-items: center; 
}
.login-box { background: var(--card); padding: 40px; border-radius: 12px; border: 1px solid #333; text-align: center; width: 300px; }
.login-box input { margin-bottom: 20px; text-align: center; font-size: 1.2rem; width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #444; background: #1a1a1a; color: white; }

/* --- 4. TABS Y PESTAÑAS --- */
.tabs { display: flex; background: #222; border-bottom: 1px solid var(--border); }
.tab-btn { flex: 1; padding: 15px 5px; background: none; border: none; color: #888; cursor: pointer; font-size: 1.2rem; border-bottom: 3px solid transparent; }
.tab-btn.active { color: var(--accent); border-bottom: 3px solid var(--accent); }

/* Contenedor base de cada pestaña */
.tab-content { 
    display: none; /* Oculto por defecto */
    flex: 1; 
    flex-direction: column; 
    overflow: hidden; /* Importante para el scroll interno */
    height: 100%;
}
.tab-content.active { display: flex; } /* Al activarse se vuelve Flex */

/* --- 5. COMPONENTES COMUNES --- */
.search-box { padding: 15px; background: #2d2d2d; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.search-box input { width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #444; background: #1a1a1a; color: white; box-sizing: border-box; }

.list { flex: 1; overflow-y: auto; padding: 10px; }
.item { background: #333; padding: 12px; margin-bottom: 6px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; border-left: 4px solid transparent; }
.item.song { border-left-color: var(--song); }
.item.bible { border-left-color: var(--bible); }
.item.media { border-left-color: var(--media); }

/* --- 6. PROGRAMA (CENTRO) --- */
.program-header input { background: transparent; border: none; color: white; font-size: 2rem; font-weight: bold; outline: none; width: 100%; text-align: center; margin-bottom: 10px; margin-left: 0px; }
.drop-zone { flex: 1; background: var(--card); border: 2px dashed #444; border-radius: 15px; padding: 10px; overflow: hidden; display: flex; flex-direction: column; }
#program-items { flex: 1; overflow-y: auto; padding: 15px; } /* Scroll aquí */

.prog-item { background: #2a2a2a; padding: 10px 15px; margin-bottom: 8px; border-radius: 8px; display: flex; align-items: center; border: 1px solid #444; transition: background 0.2s; }
.prog-item:hover { background: #333; border-color: #555; }
/* --- EN SECCIÓN 6 --- */

.prog-item .content { 
    flex: 1; 
    padding: 0 15px; 
    display: flex; 
    align-items: center;
    /* CAMBIOS PARA ELIPSIS (...) */
    justify-content: flex-start; /* Quitamos space-between */
    gap: 10px;                   /* Espacio entre título y tiempo */
    min-width: 0;                /* TRUCO VITAL: Permite que el flex hijo se encoja */
}

/* NUEVA: Para el texto del título que se cortará */
.prog-title-text {
    flex: 1;                     /* Ocupa todo el espacio disponible */
    white-space: nowrap;         /* No permitas saltos de línea */
    overflow: hidden;            /* Oculta lo que sobre */
    text-overflow: ellipsis;     /* Pon los tres puntos (...) */
    text-align: left;
}

/* NUEVA: Para el tiempo (asegura que nunca se oculte) */
.prog-duration-text {
    flex-shrink: 0;              /* Prohibido encogerse */
    text-align: right;
    font-variant-numeric: tabular-nums; /* Alinea bien los números */
}

.prog-item .handle { cursor: grab; color: #666; padding: 5px; }
.prog-item .handle:hover { color: #aaa; }
.prog-item .btn-delete { background: transparent; border: none; color: #666; cursor: pointer; transition: color 0.2s; font-size: 1.1em; }
.prog-item .btn-delete:hover { color: #e74c3c; }
.prog-item.type-section { background: #3a2a2a !important; border-left: 4px solid var(--section) !important; }
.prog-item.type-section input { background: transparent; border: none; color: white; font-weight: bold; width: 100%; outline: none; }

/* --- 7. BOTONES --- */
.btn { margin: 12px; padding: 12px; border-radius: 8px; border: none; cursor: pointer; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 8px; color: white; width: 100%; }
.btn-primary { background: var(--accent);}
.btn-success { background: #28a745; }
.btn-danger { background: #e74c3c; }
.btn-section { background: transparent; border: 1px dashed var(--section); color: var(--section); margin-top: 10px; }

/* --- 8. MÓVIL Y RESPONSIVE --- */

#overlay-screen { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.7); z-index: 1500; display: none; 
}

/* REGLA GENERAL (PC): Ocultar todo lo móvil agresivamente */
.mobile-only, 
#mobile-controls, 
#close-sidebar, 
#close-right-sidebar { 
    display: none !important; 
}

/* REGLA MÓVIL (Pantallas menores a 768px): Mostrar */
@media (max-width: 768px) {
    /* Reactivar botones generales */
    .mobile-only { 
        display: flex !important; 
    }
    
    /* Reactivar controles inferiores específicamente */
    #mobile-controls {
        display: flex !important;
    }
    
    /* Reactivar botones de cerrar */
    #close-sidebar, #close-right-sidebar {
        display: block !important;
    }

    .sidebar, .right-sidebar { 
        position: fixed; top: 0; height: 100%; z-index: 2000; width: 85% !important; transition: transform 0.3s ease; 
    }
    .sidebar { left: 0; transform: translateX(-101%); }
    .right-sidebar { right: 0; transform: translateX(101%); }
    .sidebar.active, .right-sidebar.active { transform: translateX(0); }
    #overlay-screen.active { display: block; }
    .main { padding-bottom: 100px; }
}

/* --- 9. NUBE Y UPLOADS --- */
.cloud-item { display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #2a2a2a; border-bottom: 1px solid #444; cursor: pointer; transition: background 0.2s; }
.cloud-item:hover { background: #333; }
.btn-delete-icon { background: transparent; border: none; color: #666; cursor: pointer; padding: 5px 10px; font-size: 0.9rem; transition: color 0.2s; }
.btn-delete-icon:hover { color: #e74c3c; }

/* Scroll para lista de programas en nube */
#cloud-programs { flex: 1; overflow-y: auto; padding: 10px; }

/* --- 10. MODAL PREVIEW --- */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 3000; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.modal-content { background: #252525; padding: 20px; border-radius: 8px; position: relative; max-width: 90%; max-height: 90%; text-align: center; box-shadow: 0 0 20px rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center; }
.modal-close { position: absolute; top: -15px; right: -15px; background: #e74c3c; color: white; border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
#previewContainer img, #previewContainer video { max-width: 100%; max-height: 70vh; border-radius: 4px; }
#previewContainer audio { width: 300px; margin-top: 10px; }
.btn-preview-media { background: transparent; border: none; color: #888; cursor: pointer; padding: 5px 8px; transition: color 0.3s; }
.btn-preview-media:hover { color: #3498db; }
.btn-delete-media { background: transparent; border: none; color: #888; cursor: pointer; padding: 5px 8px; margin-left: 5px; transition: color 0.3s; font-size: 0.9rem; }
.btn-delete-media:hover { color: #e74c3c; }

/* --- 11. BARRA PROGRESO --- */
.progress-bg { width: 100%; height: 8px; background-color: #333; border-radius: 4px; overflow: hidden; }
.progress-fill { width: 0%; height: 100%; background-color: #2ecc71; transition: width 0.2s ease; }

/* --- 12. SCROLLBARS --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #666; }

/* =========================================
   FIX FINAL PARA PESTAÑA MEDIA (DIVIDIDA)
   ========================================= */

/* 1. El contenedor principal de la pestaña */
/* IMPORTANTE: Quitamos 'display: none' porque la clase .tab-content ya lo maneja */
#tab-media {
    gap: 10px; /* Espacio entre los grupos */
}

/* 2. Los grupos (Mitad Colecciones / Mitad Uploads) */
.media-group {
    flex: 1;               /* Cada grupo ocupa el 50% del espacio disponible */
    display: flex;         /* Convertimos el grupo en Flex también */
    flex-direction: column;
    min-height: 0;         /* CRUCIAL: Permite al hijo hacer scroll */
    overflow: hidden;      /* Contiene el scroll adentro */
    border: 1px solid #333;
    border-radius: 6px;
    background: rgba(0,0,0,0.2);
}

/* 3. Títulos de las secciones */
.section-subtitle {
    flex-shrink: 0;        /* Evita que el título se aplaste */
    background: #252525;
    padding: 8px;
    font-weight: bold;
    border-bottom: 1px solid #444;
    color: #4CAF50;
    text-transform: uppercase;
    font-size: 11px;
    display: flex; 
    align-items: center; 
    gap: 8px;
}

/* 4. Las listas SCROLLABLES (Adentro de los grupos) */
#collectionsList, 
#uploadedList {
    flex: 1;               /* Ocupa todo el espacio restante dentro del grupo */
    overflow-y: auto;      /* AQUÍ va el scroll */
    padding: 5px;
    /* Quitamos cualquier max-height antiguo para que use flex */
    max-height: none !important; 
}