body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    /* font-family: 'Courier New', Courier, monospace; */
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    min-height: 100vh;
    margin: 20px auto;
    padding: 20px 10px;
    padding-top: 40px;
    /* font-family: Arial, sans-serif; */
    background-color: #f0f2f5;
    position: relative;
    background: linear-gradient(to bottom, #ff1e1f, #feb47b);
}

/* 1. Estilo General de la Tabla */
table {
    width: 120%; /* La tabla ocupa el 60% del ancho del contenedor */
    border-collapse: collapse; /* Colapsa los bordes de celda en uno solo */
    margin: 20px auto; /* Centra la tabla y le da un margen superior/inferior */
    font-family: Arial, sans-serif; /* Fuente legible */
}

/* 2. Estilo de Encabezados (Nombre y Vínculo) */
th {
    background-color: #4CAF50; /* Color de fondo verde oscuro */
    color: white; /* Texto en color blanco */
    padding: 10px; /* Relleno alrededor del texto */
    text-align: left; /* Alineación del texto a la izquierda */
    border-bottom: 2px solid #ddd; /* Línea separadora inferior */
}

/* 3. Estilo de Celdas de Datos */
td {
    padding: 8px; /* Relleno alrededor del texto */
    border: 1px solid #ddd; /* Borde sutil para las celdas */
}

td:nth-child(1) {
    text-align: center; /* Centra el contenido de la segunda columna */
}

th:nth-child(1) {
    text-align: center; /* Centra el contenido de la segunda columna */
}

td:nth-child(3) {
    text-align: center; /* Centra el contenido de la segunda columna */
}

th:nth-child(3) {
    text-align: center; /* Centra el contenido de la segunda columna */
}

td:nth-child(4) {
    text-align: center; /* Centra el contenido de la segunda columna */
}

th:nth-child(4) {
    text-align: center; /* Centra el contenido de la segunda columna */
}

td:nth-child(5) {
    text-align: center; /* Centra el contenido de la segunda columna */
}

th:nth-child(5) {
    text-align: center; /* Centra el contenido de la segunda columna */
}

/* 4. Efecto de Fila Alterna (Stripe) */
tr:nth-child(even) {
    background-color: #c2c2c2; /* Fondo gris claro para filas pares */
}

tr:nth-child(odd) {
    background-color: white; /* Asegura que las filas impares sean blancas */
}

/* 5. Efecto de Hover (Cuando el mouse pasa por encima) */
tr:hover {
    background-color: #faa; /* Fondo gris más oscuro al pasar el ratón */
}

/* 6. Estilo específico para los Vínculos */
td a {
    color: #007bff; /* Color azul para los enlaces */
    text-decoration: none; /* Quita el subrayado predeterminado */
}

td a:hover {
    text-decoration: underline; /* Muestra el subrayado al pasar el ratón */
}

.imagen-error {
    width: 300px;    /* Define el ancho deseado */
    height: auto;    /* Asegura que la altura se ajuste sola y no se deforme */
    display: block;  /* Opcional: ayuda a centrarla si usas márgenes */
    margin: 0 auto;  /* Opcional: centra la imagen horizontalmente */
    border-radius: 20px;
}

.login-container {    
    /* Dimensiones y Espaciado */
    padding: 40px; /* Reducido de 95px a 40px para que no se vea enorme */
    margin: 0 auto; /* Centrado */
    width: 100%; /* Se adapta a móviles */
    max-width: 400px; /* Ancho máximo controlado */
    
    /* Estética: Efecto Cristal (Glassmorphism) */
    background-color: rgba(255, 255, 255, 0.85); /* Blanco al 85% de opacidad */
    backdrop-filter: blur(10px); /* Difumina el video que pasa por detrás */
    border: 1px solid rgba(255, 255, 255, 0.5); /* Borde sutil */
    
    /* Bordes y Sombra */
    border-radius: 15px; /* Bordes más redondeados y modernos */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Sombra suave para dar profundidad */
    
    text-align: center;
}

h2 {
    margin-bottom: 1.5rem;
}
.input-group {
    margin-bottom: 1.25rem;
    text-align: left;
}
label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

/* Inputs más modernos */
input {
    width: 100%;
    padding: 12px 15px; /* Más espacio interno para escribir cómodo */
    border: 1px solid #ddd;
    border-radius: 8px; /* Bordes redondeados */
    box-sizing: border-box;
    background-color: #f8f9fa; /* Gris muy clarito, no blanco puro */
    transition: all 0.3s ease;
    outline: none;
}

input:focus {
    background-color: #fff;
    border-color: #007bff; /* Color azul al escribir */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); /* Resplandor suave */
}

/* Botón más estilizado */
button {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600; /* Letra un poco más gruesa */
    letter-spacing: 0.5px; /* Espaciado entre letras */
    transition: background-color 0.3s;
}

button:hover {
    background-color: #0056b3; /* Azul más oscuro al pasar el ratón */
}


#message {
    margin-top: 1rem;
    font-weight: bold;
}
.success { color: #28a745; }
.error { color: #dc3545; }

/* Estilos Base para el Contenedor Admin */
#admin-area {
    margin: 0px auto;
    padding: 20px;
    max-width: 1000px;
    width: 100%;
    margin-top: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    color: #333;
}

#admin-area h2 {
    margin-top: 20px;
    text-align: center;
}

/* ---------------------------------------------------- */
/* 1. Estilos de la Tabla Principal */
/* ---------------------------------------------------- */
#usuarios-tabla {
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 20px;
    
    /* --- AGREGA ESTO --- */
    margin-left: auto;
    margin-right: auto;
    /* ------------------- */
    
    font-size: 0.9em;
    min-width: 100px;
    max-width: 1000px;
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.15);
}

/* ---------------------------------------------------- */
/* 2. Estilos de la Cabecera (Thead) */
/* ---------------------------------------------------- */
#usuarios-tabla thead tr {
    background-color: #009879; /* Color de fondo del encabezado */
    color: #ffffff; /* Color del texto del encabezado */
    text-align: center;
    font-weight: bold;
}

/* Estilos para las celdas del encabezado */
#usuarios-tabla th {
    padding: 12px 15px;
    text-transform: uppercase;
}

/* ---------------------------------------------------- */
/* 3. Estilos del Cuerpo (Tbody) y las Filas */
/* ---------------------------------------------------- */

/* Estilos para las celdas del cuerpo */
#usuarios-tabla td {
    padding: 12px 15px;
    border-bottom: 1px solid #dddddd; /* Línea separadora */
}

/* Efecto "Striped" (filas alternas) para mejor lectura */
#usuarios-tabla tbody tr:nth-of-type(even) {
    background-color: #f3f3f3; /* Fondo más oscuro para filas pares */
}

/* Estilo para las filas impares (fondo más claro) */
#usuarios-tabla tbody tr:nth-of-type(odd) {
    background-color: #ffffff;
}

/* Estilo de hover (resaltar la fila al pasar el ratón) */
#usuarios-tabla tbody tr:hover {
    background-color: #e2f8f4; /* Un color suave al pasar el ratón */
    cursor: default;
}

/* Estilo para la última fila (eliminar el borde inferior) */
#usuarios-tabla tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}

#user-area {
    /* Ocupa todo el ancho disponible */
    width: 100%;
    /* Usa Flexbox para centrar su contenido */
    display: flex;
    /* Centra horizontalmente los ítems */
    justify-content: center;
    /* Opcional: Centra verticalmente si le das una altura */
    /* align-items: center; */ 
    /* Opcional: margen superior para separarlo un poco del contenido anterior */
    margin-top: 20px;
}

#imagen-bienvenida {
    /* Opcional: limita el tamaño máximo de la imagen */
    max-width: 300px;
    height: auto; /* Mantiene la proporción */
    /* Opcional: elimina cualquier espacio extra que algunos navegadores puedan añadir */
    display: block; 
}

/* ---------------------------------------------------- */
/* 1. Estilos del Contenedor Principal (Grilla) */
/* ---------------------------------------------------- */
#noticias-grilla {
    margin: 40px auto;
    padding: 20px;
    max-width: 1200px;
    
    /* Configuración de la Grilla (Grid) */
    display: grid;
    
    /* Responsive: Crea columnas automáticamente */
    /* Mínimo 300px por columna, se ajusta al tamaño disponible */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    
    /* Espacio entre las tarjetas */
    gap: 20px; 
    
    background-color: #f0f0f0; /* Fondo ligero para la sección */
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

#noticias-grilla h2 {
    /* El título ocupa toda la fila */
    grid-column: 1 / -1; 
    text-align: center;
    color: #333;
    margin-bottom: 10px;
}

/* ---------------------------------------------------- */
/* 2. Estilos para Cada Tarjeta de Noticia */
/* ---------------------------------------------------- */
.noticia-card {
    /*background-color: #ffffee;*/
    background-image: linear-gradient(to bottom, #ffbbbb, #ffffff);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    transition: transform 0.2s ease-in-out; /* Efecto suave al pasar el ratón */
    display: flex; /* Usamos flexbox para organizar el contenido interno */
    flex-direction: column; /* Apila Título, Resumen, Fecha */
    justify-content: space-between; /* Espacia el contenido verticalmente */
}

/* Efecto al pasar el ratón (hover) */
.noticia-card:hover {
    transform: translateY(-5px); /* Levanta ligeramente la tarjeta */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* Título de la Noticia */
.noticia-card h3 {
    font-size: 1.2em;
    color: #007bff; /* Color de enlace */
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.4;
}

/* Resumen/Descripción */
.noticia-card p {
    font-size: 0.95em;
    color: #000000;
    flex-grow: 1; /* Permite que el párrafo ocupe el espacio disponible */
}

/* Fuente y Fecha */
.noticia-card small {
    display: block; /* Asegura que la fecha esté en su propia línea */
    margin-top: 10px;
    color: #888;
    font-size: 0.8em;
}

/* NUEVO */

/* --- Barra Superior (Header) --- */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #2c3e50; /* Color oscuro profesional */
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    box-sizing: border-box; /* Para que el padding no rompa el ancho */
    z-index: 1000;
}

/* 1. Izquierda: Navegación */

.nav-links {
    flex: 1; /* CAMBIO CLAVE: El 1 hace que tome todo el espacio sobrante disponible */
    display: flex;
    gap: 10px;
    align-items: center; /* Alinea verticalmente los botones */
}

.nav-btn {
    background: none;
    border: none;
    color: #bfc9c0;
    cursor: pointer;
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 4px;
    transition: 0.3s;
}

.nav-btn:hover, .nav-btn.active {
    color: white;
    background-color: #34495e;
}

/* 2. Centro: Email del Usuario */
.user-display {
    flex: 0 0 auto; /* CAMBIO: "auto" significa que solo ocupe lo que mide el texto */
    margin: 0 20px; /* Un poco de separación lateral */
    white-space: nowrap; /* Evita que el email se parta en dos líneas */
}

/* 3. Derecha: Botón Logout */
.logout-container {
    flex: 0 0 auto; /* CAMBIO: Ocupa el tamaño mínimo ajustado al botón */
    text-align: right;
}

#logout-button {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

#logout-button:hover {
    background-color: #c0392b;
}

/* --- Estilos de las Secciones --- */
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Mejoras visuales para las noticias */
.noticias-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.noticia-card {
    background: white;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Links */
#links-tabla th {
    text-align: center;
    vertical-align: middle; /* Opcional: Centra también verticalmente */
}

#links-tabla tbody td:nth-child(2) {
    text-align: center;
}

#links-tabla tbody td:nth-child(3) {
    text-align: left;
}

#links-tabla tbody td:nth-child(4) {
    text-align: center;
}

#links-tabla tbody td:nth-child(5) {
    text-align: center;
}

#links-tabla {
    margin-left: auto;
    margin-right: auto;
    /* Opcional: define un ancho para que se vea uniforme */
    width: 100%; 
    max-width: 1000px;
    border-collapse: collapse;
}

#links-area h2 {
    text-align: center; /* Para que el título "Biblioteca Multimedia" también se centre */
}

/* --- Estilos para el Email Clickeable --- */
#user-email {
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.3s;
}

#user-email:hover {
    color: #feb47b; /* Un color naranja suave al pasar el mouse */
}

/* --- Estilos del Modal (Ventana Emergente) --- */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed; 
    z-index: 2000; /* Por encima de todo */
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.6); /* Fondo negro semitransparente */
    backdrop-filter: blur(5px); /* Efecto borroso de fondo */
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* 10% desde arriba y centrado */
    padding: 30px;
    border: 1px solid #888;
    width: 90%;
    max-width: 400px; /* Ancho máximo */
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    text-align: left;
}

.modal-content h2 {
    margin-top: 0;
    color: #2c3e50;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
    text-align: center;
}

.perfil-info p {
    font-size: 1.1em;
    margin: 15px 0;
    color: #333;
}

/* Botón de cerrar (X) */
.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 10px;
}

.close-btn:hover {
    color: #000;
}


@media (max-width: 768px) {
    /* --- Ajustes Generales --- */
    body {
        justify-content: flex-start;
        min-height: auto;
        font-size: 0.95em;
        /* IMPORTANTE: Añade padding arriba para que la barra fija no tape el contenido */
        padding-top: 40px;
        margin: 0; 
    }

    /* --- Optimización de la Barra Superior (Top Bar) --- */
    .top-bar {
        height: auto; /* Permite que crezca si es necesario, aunque intentaremos mantenerlo fijo */
        padding: 10px; /* Menos padding lateral */
    }

    /* 1. Ocultar el correo del usuario en móviles para ganar espacio */
    .user-display {
        display: none; 
    }

    /* 2. Ajustar el contenedor de navegación */
    .nav-links {
        flex: 1; /* Ahora ocupa todo el espacio disponible */
        justify-content: flex-start; /* Alinea a la izquierda */
        overflow-x: auto; /* Permite scroll horizontal si hay muchos botones */
        white-space: nowrap; /* Evita que los botones salten de línea */
        gap: 5px; /* Menos espacio entre botones */
    }

    /* 3. Botones de navegación más compactos */
    .nav-btn {
        font-size: 0.8rem; /* Texto más pequeño */
        padding: 6px 10px;
    }

    /* 4. Ajustar el contenedor de Logout */
    .logout-container {
        flex: 0; /* Ya no intenta ocupar 1/3 del espacio */
        margin-left: 10px;
    }

    /* 5. Botón de Salir compacto */
    #logout-button {
        font-size: 0.8rem;
        padding: 6px 10px;
        white-space: nowrap; /* Asegura que el texto no se parta */
    }

    /* --- Ajustes de Tablas y Títulos (Ya los tenías, los mantengo) --- */
    h2 { font-size: 1.5rem; margin-bottom: 1rem; }
    .noticia-card h3 { font-size: 1.1em; }
    #usuarios-tabla th, #usuarios-tabla td { padding: 10px 8px; font-size: 0.8em; }

    /* --- NUEVO: Ajustes para el Login en Móvil --- */
    .login-container {
        padding: 20px;
        width: 90%;
        max-width: 320px;
        margin: 30px auto;
    }

    /* 2. Reducir el tamaño del título "Iniciar Sesión" */
    .login-container h2 {
        font-size: 1.2rem; /* Más pequeño */
        margin-bottom: 1rem;
    }
 
   /* 3. Ajustar tamaño de letra de inputs y etiquetas */
    .login-container label {
        font-size: 0.7rem;
    }

    .login-container input {
        padding: 10px; /* Inputs un poco menos altos */
        font-size: 0.7rem; /* Texto interno más pequeño */
    }

    /* 4. Ajustar el botón */
    .login-container button {
        padding: 10px;
        font-size: 0.7rem;
    }
    
    /* Aseguramos que el fondo se vea bien si quitamos el video */
    body {
        background: linear-gradient(to bottom, #ff1e1f, #feb47b);
        min-height: 100vh; /* Asegura altura completa */
    }

    #admin-area {
        margin: 00px auto;
        padding: 00px;
        margin-top:20px;
        max-width: 1000px; 
        width: 100%;
    }

    /* Y para asegurar que el título también se centre: */
    #admin-area h2 {
        margin-top: 20px auto;
        text-align: center;
        font-size: 1.0rem;
    }

}