/* 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 */
footer#page-footer {
    margin-top: auto; /* Clave para el sticky footer */
    background-color: var(--color-fondo-secundario);
    color: var(--color-texto);
    border-top: 1px solid var(--color-borde);
    padding: 2rem 0;
    transition: var(--transicion-rapida);
}

@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;
    }
}