/* 1. Importar la fuente Poppins desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

/* === VARIABLES === */
:root {
    --fondo: #0d0b16;            /* Fondo principal muy oscuro */
    --fondo-secundario: #1a172b; /* Fondo de contenedores/cards */
    --violeta: #7b2cbf;          /* Violeta principal (botones, bordes) */
    --violeta-claro: #a663cc;    /* Violeta para enlaces/hover */
    --acento: #c77dff;           /* Color de acento/brillo */
    --texto: #f0f0f0;            /* Texto principal (más brillante) */
    --texto-suave: #b8b8b8;      /* Texto secundario/footer */

    /* Colores de estado */
    --exito: #4CAF50;
    --error: #d9534f;
}

/* === BASE === */
body {
    background: var(--fondo);
    color: var(--texto);
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh; /* Asegura que el cuerpo ocupe toda la altura */
    display: flex;
    flex-direction: column; /* Para empujar el footer hacia abajo */
}

/* === TIPOGRAFÍA === */
h1, h2, h3 {
    color: var(--acento);
    letter-spacing: 1px;
    font-weight: 600; /* Ligeramente más grueso */
    margin-top: 0;
}
h1 { font-size: 2.5em; }
h2 { font-size: 1.8em; }

/* === ENLACES Y NAVEGACIÓN === */
a {
    color: var(--violeta-claro);
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

a:hover {
    color: var(--acento);
    text-decoration: underline;
}

header {
    background: var(--fondo-secundario);
    padding: 20px 40px;
    display: flex; /* Uso de Flexbox para alinear elementos */
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 3px 15px rgba(199, 125, 255, 0.2);
}

header h1 {
    margin: 0;
    font-size: 1.8em;
}

nav a {
    margin-left: 20px;
    font-weight: 400;
    padding: 5px 10px;
    border-radius: 5px;
}

nav a:hover {
    background: rgba(166, 99, 204, 0.1);
}

/* === CONTENEDOR PRINCIPAL Y SECCIONES === */
main {
    flex-grow: 1; /* Permite que el contenido principal crezca */
    padding: 20px;
}

section {
    background: var(--fondo-secundario);
    margin: 20px auto;
    padding: 30px; /* Más padding */
    max-width: 900px; /* Limitar ancho para legibilidad */
    border-radius: 15px;
    box-shadow: 0 0 25px rgba(123, 44, 191, 0.3); /* Sombra más fuerte */
}

/* Estilos específicos para contenedores pequeños (Login/Crear Playlist) */
.login-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 30px;
    background: var(--fondo-secundario);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    text-align: center;
}

/* === FORMULARIOS Y BOTONES === */
label {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--texto-suave);
    text-align: left;
}

input, textarea {
    background: var(--fondo);
    border: 2px solid var(--violeta);
    padding: 12px;
    width: 100%;
    box-sizing: border-box; /* Incluye padding y borde en el ancho total */
    border-radius: 8px;
    color: var(--texto);
    margin-bottom: 15px;
    transition: 0.3s;
}

input:focus, textarea:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 10px rgba(199, 125, 255, 0.6);
    background: #110e1f; /* Ligero cambio de fondo al enfocar */
}

/* Estilo para los botones generales (usado para la clase .button) */
button, .button {
    background: var(--violeta);
    border: none;
    padding: 12px 25px;
    color: white;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block; /* Necesario para que .button funcione con <a> */
    text-align: center;
}

button:hover, .button:hover {
    background: var(--violeta-claro);
    box-shadow: 0 0 15px rgba(199, 125, 255, 0.6);
    transform: translateY(-2px); /* Pequeño efecto de elevación */
}

/* Botones de acción (Eliminar/Editar) */
.delete-btn {
    color: var(--error);
    font-weight: 600;
}
.delete-btn:hover {
    color: #ff8c8c;
}

/* === TABLAS DE DATOS (Canciones) === */
.data-table {
    width: 100%;
    border-collapse: collapse; /* Elimina el espacio entre celdas */
    margin-top: 20px;
    font-size: 0.95em;
}

.data-table th {
    background: var(--violeta);
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: var(--texto);
    border-bottom: 2px solid var(--acento);
}

.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Línea divisoria suave */
}

.data-table tbody tr:hover {
    background: rgba(166, 99, 204, 0.05); /* Efecto de hover en filas */
}







/* === MENSAJES DE ESTADO === */
.error-message, .success-message {
    padding: 15px;
    margin: 10px auto;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
}

.error-message {
    background: rgba(217, 83, 79, 0.2);
    border: 1px solid var(--error);
    color: var(--error);
}

.success-message {
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid var(--exito);
    color: var(--exito);
}

/* === FOOTER === */
footer {
    text-align: center;
    padding: 20px;
    color: var(--texto-suave);
    margin-top: auto; /* Empuja el footer hacia abajo */
    border-top: 1px solid rgba(123, 44, 191, 0.1);
}

/* === ESTILOS NUEVOS PARA EL HUB DE CARGA (create_content_hub.html) === */
.action-buttons-container {
    display: flex; /* Habilita Flexbox */
    justify-content: center; /* Centra los botones horizontalmente */
    gap: 15px; /* Espacio entre los botones */
    margin-top: 20px;
    padding: 0 10px; /* Pequeño padding interno para evitar que se peguen a los bordes del contenedor */
    flex-wrap: wrap; /* Permite que los botones salten a una nueva línea en pantallas pequeñas */
}

.action-button {
    /* Define cómo deben crecer y qué tamaño mínimo y máximo deben tener */
    flex: 1; /* Permite que los botones se repartan el espacio de manera uniforme */
    min-width: 150px; /* Ancho mínimo */
    max-width: 250px; /* Ancho máximo para evitar que se extiendan demasiado */
    
    /* Ajustes visuales */
    padding: 20px 15px; 
    font-size: 1.1em; 
    height: auto; 
    
    /* Centrado interno del texto (por si ocupa más de una línea) */
    display: flex; 
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    text-align: center;
}

/* Regla para que en pantallas pequeñas ocupen todo el ancho si no caben */
@media (max-width: 450px) {
    .action-button {
        flex-basis: 100%; /* Ocupa todo el ancho disponible */
        max-width: none;
    }
}

/* --- FIN ESTILOS NUEVOS --- */