/* 1. Definición de variables de color para los temas */
:root {
    --fuente-principal: 'Roboto', sans-serif;

    /* THEME: LIGHT (por defecto) */
    --color-fondo: #f8f9fa;
    /* Un blanco un poco más suave */
    --color-texto: #212529;
    /* Negro estándar de Bootstrap */
    --color-borde: #dee2e6;
    --color-fondo-secundario: #ffffff;
    /* Blanco puro para las tarjetas */
    --color-enlace: #0d6efd;
    --color-sombra: rgba(0, 0, 0, 0.1);

    /* Transiciones suaves */
    --transicion-rapida: all 0.3s ease-in-out;
}

[data-theme="dark"] {
    /* THEME: DARK */
    --color-fondo: #0E2433;
    --color-texto: #e9ecef;
    /* Un blanco menos estridente */
    --color-borde: #495057;
    --color-fondo-secundario: #1c3d52;
    /* Un azul oscuro para las tarjetas */
    --color-enlace: #4dabf7;
    --color-sombra: rgba(0, 0, 0, 0.4);
}

/* 2. Estilos generales del cuerpo */
body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--fuente-principal);
    transition: var(--transicion-rapida);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Clave para el sticky footer */
}

/* 3. Estilos de la Barra de Navegación (Header) */
header .navbar {
    background-color: var(--color-fondo-secundario) !important;
    border-bottom: 1px solid var(--color-borde);
    box-shadow: 0 2px 5px var(--color-sombra);
    transition: var(--transicion-rapida);
}

.navbar .navbar-brand strong,
.navbar .nav-link,
.navbar .navbar-toggler i {
    color: var(--color-texto) !important;
}

.navbar .nav-link:hover {
    color: var(--color-enlace) !important;
}

/* Botón de búsqueda */
.navbar .btn-outline-light {
    border-color: var(--color-borde);
    color: var(--color-texto);
}

.navbar .btn-outline-light:hover {
    background-color: var(--color-enlace);
    color: white;
    border-color: var(--color-enlace);
}


/* 4. Estilos de las Tarjetas de Contenido (Cards) */
.card {
    background-color: var(--color-fondo-secundario);
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    /* Bordes más suaves */
    box-shadow: 0 4px 8px var(--color-sombra);
    transition: var(--transicion-rapida);
    margin-bottom: 2rem;
    /* Espacio entre tarjetas */
}

.card:hover {
    transform: translateY(-5px);
    /* Efecto sutil al pasar el mouse */
    box-shadow: 0 8px 16px var(--color-sombra);
}

.card-title {
    font-weight: 700;
    /* Título más prominente */
    color: var(--color-texto);
}

.card-text.text-muted {
    font-size: 0.9em;
    color: var(--color-texto) !important;
    opacity: 0.7;
}

.card .btn-primary {
    background-color: var(--color-enlace);
    border-color: var(--color-enlace);
    font-weight: bold;
}

/* ================================================= */
/* === INICIO DE ESTILOS AÑADIDOS PARA LA LISTA === */
/* ================================================= */

/* Estilos para los items de la lista de posts, para que se vean como tarjetas */
.list-group-item {
    background-color: var(--color-fondo-secundario);
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
    border-radius: 8px !important;
    /* !important para sobreescribir el radio 0 que pone Bootstrap */
    box-shadow: 0 4px 8px var(--color-sombra);
    transition: var(--transicion-rapida);
    /* Bootstrap une los bordes de los items por defecto, los separamos para que cada uno sea individual */
    border-top-width: 1px !important;
}

.list-group-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px var(--color-sombra);
}

/* Corrección de color para el pie de la cita (Me gustas, fecha) */
.blockquote-footer {
    color: var(--color-texto);
    opacity: 0.75;
}

/* Nos aseguramos que el contenedor <ul> no tenga un fondo propio que interfiera */
.list-group {
    background-color: transparent;
}

/* ======================================= */
/* === FIN DE ESTILOS AÑADIDOS === */
/* ======================================= */


/* 5. Footer */
/* 5. Footer Moderno */
footer.site-footer {
    background-color: var(--color-fondo-secundario);
    border-top: 1px solid var(--color-borde);
    color: var(--color-texto);
    font-size: 0.95rem;
    position: relative;
    z-index: 10;
    margin-top: auto;
    /* Sticky footer */
    transition: var(--transicion-rapida);
}

/* Títulos de sección en footer */
footer.site-footer h5 {
    color: var(--color-texto);
    letter-spacing: 0.5px;
    margin-bottom: 1.25rem;
    position: relative;
    display: inline-block;
}

/* Decoración debajo de los títulos */
footer.site-footer h5::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--color-enlace);
    margin-top: 8px;
    border-radius: 2px;
}

/* Enlaces del footer */
.footer-links li a {
    color: var(--color-texto);
    opacity: 0.8;
    transition: var(--transicion-rapida);
    display: flex;
    align-items: center;
}

.footer-links li a:hover {
    color: var(--color-enlace);
    opacity: 1;
    transform: translateX(5px);
    /* Pequeño desplazamiento a la derecha */
}

.footer-links li a i {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

/* Botones de redes sociales */
.social-links .btn-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-borde);
    color: var(--color-texto);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Efecto rebote suave */
    background-color: transparent;
}

.social-links .btn-icon:hover {
    background-color: var(--color-enlace);
    border-color: var(--color-enlace);
    color: #fff !important;
    /* Icono blanco al hover */
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Barra de copyright */
.copyright-bar {
    background-color: rgba(0, 0, 0, 0.03);
    /* Fondo muy sutil */
    border-top: 1px solid var(--color-borde);
}

[data-theme="dark"] .copyright-bar {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Texto muted en el footer */
/* Texto muted en el footer */
footer.site-footer .text-muted {
    color: var(--color-texto) !important;
    opacity: 0.8;
}

/* Fix específico para modo oscuro para asegurar visibilidad */
[data-theme="dark"] footer.site-footer .text-muted {
    color: #e9ecef !important;
    opacity: 0.9;
}

/* Iconos de contacto */
footer.site-footer .bi-geo-alt-fill,
footer.site-footer .bi-envelope-fill,
footer.site-footer .bi-telephone-fill {
    color: var(--color-enlace) !important;
}

@media (max-width: 790px) {

    /* Hacemos que la barra de búsqueda se integre en el menú vertical */
    .navbar-collapse form.d-flex {
        width: 100%;
        /* Ocupa todo el ancho disponible */
        margin-top: 1rem;
        /* Espacio superior para separarlo de los links */
        margin-bottom: 1rem;
        /* Espacio inferior */
    }

    /* Ajustamos la lista de la derecha (interruptor y perfil) */
    .navbar-collapse .navbar-nav.ms-auto {
        width: 100%;
        /* Ocupa todo el ancho */
        padding-top: 0.5rem;
        /* Pequeño espacio superior */
    }

    /* Aseguramos que el interruptor de tema y el dropdown de perfil se alineen a la izquierda */
    .navbar-collapse .navbar-nav.ms-auto .nav-item {
        margin-bottom: 0.5rem;
        /* Espacio entre el interruptor y el perfil */
    }

    /* Estilos para el menú desplegable del usuario dentro del menú móvil */
    .navbar-collapse .dropdown-menu {
        background-color: transparent !important;
        /* Fondo transparente para que se mezcle */
        border: none !important;
        /* Sin bordes */
        box-shadow: none !important;
        /* Sin sombras */
        padding-left: 1rem;
        /* Indentación para mostrar que es un submenú */
    }

    /* Estilos para los items dentro del dropdown del usuario */
    .navbar-collapse .dropdown-item {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        color: var(--color-texto) !important;
        /* Hereda el color del texto del tema */
    }

    .navbar-collapse .dropdown-item:hover {
        background-color: rgba(128, 128, 128, 0.1);
        /* Un fondo sutil al pasar el mouse */
        color: var(--color-enlace) !important;
        /* Hereda el color de enlace del tema */
        border-radius: 4px;
    }
}