/*
===================================================================================
PRINCIPIO FUNDAMENTAL: DISEÑO RESPONSIVE (Mobile & Desktop)
Toda la estructura y el diseño deben ser 100% adaptables.
La adaptación se logrará usando Media Queries en este archivo.

Estrategia: Mobile-First. Diseñamos primero para pantallas pequeñas
y luego añadimos estilos para pantallas más grandes.
===================================================================================
*/

/* --- Estilos Generales (para Móvil y Escritorio) --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Estilos para el header antiguo (ahora es el título de la página) */
header {
    background: #005c97; /* Un azul lindo */
    color: #ffffff;
    padding: 1rem 0;
    text-align: center;
}
/* --- Fin de estilos header antiguo --- */

/* --- NUEVO HEADER VERTICAL --- */
.header-toggle {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1001; /* Por encima de todo */
    background: #005c97;
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: left 0.3s ease-in-out; /* Transición para mover el botón */
}

.main-header {
    position: fixed;
    top: 0;
    bottom: 0; /* ¡CLAVE! Ancla el menú a la parte inferior */
    left: 0; /* Lo mantiene a la izquierda */
    width: 250px;
    background: #004a7a; /* Un poco más oscuro */
    z-index: 1000;
    transform: translateX(-100%); /* Oculto por defecto */
    transition: transform 0.3s ease-in-out;
    padding-top: 80px; /* Espacio para el botón de toggle */
}

.main-header.open {
    transform: translateX(0); /* Visible */
}

/* Mueve el botón cuando la barra lateral pública está abierta */
body.public-sidebar-open .header-toggle {
    left: 265px; /* 250px de la barra + 15px de margen */
}

.main-nav a {
    display: block;
    padding: 15px 25px;
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    transition: background-color 0.2s;
}

.main-nav a:hover {
    background-color: #005c97;
}

.main-nav hr {
    border: 0;
    border-top: 1px solid #005c97;
    margin: 10px 25px;
}

/* --- Estilos para el Menú Acordeón Público --- */
.accordion-toggle {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px 25px;
    font-size: 1.1rem;
    text-align: left;
    font-family: inherit; /* Asegura que use la misma fuente */
}

.accordion-toggle:hover {
    background-color: #005c97;
}

.accordion-toggle span {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.accordion-toggle.active span {
    transform: rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-content a {
    background-color: #003f6b; /* Un azul más oscuro para diferenciar */
    padding-left: 40px; /* Indentación para sub-items */
}

/* --- Estilos para la nueva sección de usuario en el header público --- */
.user-actions {
    padding: 10px 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-greeting {
    color: #ffc107; /* Amarillo, como en el panel de admin */
    font-weight: bold;
    font-size: 1.1rem;
    padding: 5px 0;
}

.user-action-link {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    text-align: center;
    font-weight: 500;
}

.user-action-link.logout-link {
    background-color: rgba(255, 107, 107, 0.2); /* Fondo rojo traslúcido */
    color: #ff6b6b; /* Texto rojo */
    font-weight: bold;
}

/* --- FIN NUEVO HEADER --- */

header h1 {
    margin: 0;
}

main {
    /* Añadimos padding-top para dejar espacio al botón del menú en móviles */
    padding: 80px 0 20px 0;
}

/* --- NUEVO FOOTER MODERNO --- */
.main-footer {
    background-color: #212529;
    color: #adb5bd;
    padding: 50px 0 0 0;
    margin-top: 60px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 20px;
}

.footer-column h4 {
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.footer-column p {
    margin: 0;
    line-height: 1.7;
}

.footer-column a {
    display: block;
    color: #adb5bd;
    text-decoration: none;
    margin-bottom: 10px;
    transition: color 0.2s;
}

.footer-column a:hover {
    color: #ffffff;
}

.footer-bottom {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    border-top: 1px solid #343a40;
    font-size: 0.9rem;
}

.footer-bottom a.admin-footer-link {
    color: #adb5bd; /* Mismo color que el texto para que sea discreto */
    text-decoration: none;
}

.footer-bottom a.admin-footer-link:hover {
    color: #ffffff; /* Se resalta en blanco al pasar el mouse */
    text-decoration: underline;
}

/* --- ¡NUEVO! Estilos para el ícono en el footer --- */
.footer-title-with-icon {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre el ícono y el texto */
}

.footer-icon {
    width: 24px; /* Tamaño del ícono */
    height: 24px;
}


/* --- Estilos para Escritorio (Ejemplo de Media Query) --- */
/* Se aplicarán solo si la pantalla tiene 768px de ancho o más */
@media (min-width: 768px) {
    /* Aquí irían los estilos específicos para pantallas grandes */
    body {
        font-size: 18px;
    }
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr; /* 3 columnas en escritorio */
        gap: 50px;
    }
}

/* Estilo para el botón de volver atrás */
.back-button {
    display: inline-block;
    margin-bottom: 25px;
    padding: 10px 15px;
    background-color: #e9ecef;
    color: #333;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 500;
    transition: background-color 0.2s ease-in-out;
}
.back-button:hover {
    background-color: #dee2e6;
}

/* Estilos para el botón de "subir arriba" */
#scrollTopBtn {
    display: none; /* Oculto por defecto */
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #005c97; /* Mismo azul que el header */
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    font-size: 18px;
}

#scrollTopBtn:hover {
    background-color: #004a7a; /* Un azul un poco más oscuro */
}

/* --- Buscador Flotante --- */
.floating-search-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1002; /* Por encima de todo */
    display: flex;
    align-items: center;
}

.search-toggle-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #005c97;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: background-color 0.2s;
}

.search-toggle-btn:hover {
    background-color: #004a7a;
}

.floating-search-form {
    margin-left: 10px;
    /* Oculto por defecto */
    width: 0;
    opacity: 0;
    visibility: hidden;
    transition: width 0.4s ease, opacity 0.4s ease, visibility 0.4s;
}

.floating-search-form input[type="search"] {
    height: 50px;
    border: 2px solid #005c97;
    border-radius: 25px;
    padding: 0 20px;
    font-size: 1rem;
    width: 100%;
}

/* Estilos cuando el buscador está abierto */
.floating-search-container.open .floating-search-form {
    width: 250px;
    opacity: 1;
    visibility: visible;
}

/* --- Estilos Globales para Tarjetas de Artículo --- */
.articles-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 columna en móviles (Mobile-First) */
    gap: 25px; /* Espacio entre tarjetas */
}

.article-card {
    background: #ffffff;
    border: 1px solid #e9ecef; /* Borde sutil para definir el recuadro */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.article-card-image-container {
    width: 100%;
    padding-top: 56.25%; /* Proporción 16:9 */
    position: relative;
    background-color: #f0f0f0;
}

.article-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.article-card h3 {
    margin: 0 0 10px 0;
    font-size: 1.3rem;
    line-height: 1.3;
    color: #222;
}

.article-meta {
    color: #777;
    font-size: 0.85rem;
    margin-bottom: 15px;
}

.article-summary {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #555;
    flex-grow: 1;
}

/* --- ¡NUEVO! Estilos para el Banner de Cookies --- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #212529; /* Fondo oscuro consistente con el footer */
    color: #e9ecef;
    padding: 15px 20px;
    display: none; /* Oculto por defecto, se muestra con JS */
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    z-index: 1003; /* Por encima del buscador flotante */
    box-shadow: 0 -4px 15px rgba(0,0,0,0.2);
    flex-wrap: wrap; /* Para que se adapte en móviles */
}

.cookie-banner p {
    margin: 0;
    flex-grow: 1; /* Ocupa el espacio disponible */
    font-size: 0.9rem;
}

.cookie-banner a {
    color: #00c6ff; /* Un color que resalte */
    text-decoration: underline;
}

.cookie-accept-btn {
    background-color: #ffc107; /* Amarillo como los botones de admin */
    color: #212529;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

.cookie-accept-btn:hover {
    background-color: #ffca2c;
}
/* Estilos para la foto de perfil en el header */
.user-info-header {
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre la imagen y el texto */
}

.header-profile-pic {
    width: 30px; /* Tamaño de la foto en el header */
    height: 30px;
    border-radius: 50%; /* Para hacerla circular */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    border: 1px solid #ddd; /* Borde sutil */
}

/* Estilos para la foto de perfil en la página de perfil */
.profile-picture-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.current-profile-picture {
    width: 150px; /* Tamaño de la foto en el perfil */
    height: 150px;
    border-radius: 50%;
    overflow: hidden; /* Para que la imagen no se salga del círculo */
    border: 3px solid #007bff; /* Borde para destacar */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.profile-pic-display {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-picture-form {
    width: 100%;
    max-width: 300px; /* Limitar el ancho del formulario de subida */
    text-align: center;
}

.profile-picture-form .form-group {
    margin-bottom: 15px;
}

.profile-picture-form input[type="file"] {
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box; /* Incluir padding y borde en el ancho */
}

.profile-picture-form small {
    display: block;
    margin-top: 5px;
    color: #666;
    font-size: 0.9em;
}

.profile-picture-form .form-button {
    margin-top: 10px;
    width: auto; /* Ajustar el ancho del botón */
    padding: 10px 20px;
}

.profile-picture-form .delete-button {
    background-color: #dc3545; /* Color rojo para eliminar */
    border-color: #dc3545;
}

.profile-picture-form .delete-button:hover {
    background-color: #c82333;
    border-color: #bd2130;
}