/* ==========================================================================
   Estilos base — html, body, main, contenedor principal
   ========================================================================== */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'DM Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

main {
    flex: 1;
}

/* Márgenes para títulos */
.container-fluid > .row:first-child {
    margin-top: 0.5rem;
}

/* Responsive general — cards y navbar */
@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
    }

    .navbar-nav {
        text-align: center;
    }

    .navbar-nav .nav-item {
        margin: 0.25rem 0;
    }
}

/* Espaciado mejorado para botones en mobile en Index */
@media (max-width: 768px) {
    .container-fluid .lead {
        margin-bottom: 2rem !important;
    }

    .container-fluid .d-flex.flex-column.gap-3 > * {
        margin-bottom: 0.75rem;
    }

    .container-fluid .d-flex.flex-column.gap-3 > *:last-child {
        margin-bottom: 0;
    }

    /* Espacio adicional entre botones y cards en mobile */
    .container-fluid .row.align-items-center > .col-lg-6:first-child {
        margin-bottom: 3rem !important;
    }

    .container-fluid .row.align-items-center > .col-lg-6:last-child {
        margin-top: 2rem !important;
    }

    /* Espacio adicional después de los botones en mobile */
    .container-fluid .d-flex.flex-column.mb-5 {
        margin-bottom: 0 !important;
        padding-bottom: 1.5rem;
    }

    /* Asegurar espacio entre la columna de botones y la de cards */
    .container-fluid .row.align-items-center {
        margin-bottom: 2rem;
    }
}