/* === Variables de color para mantener consistencia === */
:root {
    --color-principal: #0d6efd;
    --color-secundario: #198754;
    /* --color-fondo: #f8f9fa; */
    --color-fondo: #e7e7e7;
    --color-card: #273474;
    --color-borde: #dee2e6;
    --color-texto: #212529;
    --color-navbar: #0b132b;
    --color-navbar-texto: #ffffff;
}
body.dark-mode {
    --color-fondo: #333;
}

/* === NAVBAR === */
header nav.navbar {
    /* background-color: var(--color-navbar);
    border-bottom: 2px solid var(--color-principal); */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

header nav h4 {
    font-weight: 600;
    color: var(--color-navbar-texto);
}

header .navbar-nav .nav-link {
    color: var(--color-navbar-texto) !important;
    font-weight: 500;
}

header .navbar-nav .dropdown-menu {
    background-color:
        /* #1b263b; */
        var(--main_blue);
    border: solid 1px black;
    border-radius: 0.5rem;

}

header .dropdown-item {
    color: var(--color-navbar-texto) !important;
}

header .dropdown-item:hover {
    background-color: var(--light_blue);
}

/* === BODY / MAIN === */
body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* === BOTONES === */
.btn-primary {
    background-color: var(--main_blue);
    border-color: var(--main_blue);
    font-weight: 500;
}

.btn-primary:hover {
    background-color: var(--light_blue);
    border-color: var(--light_blue);
}

.btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* === INPUTS === */
.form-control[disabled] {
    background-color: #f1f3f5;
    color: #6c757d;
}

/* === FOOTER === */
footer {
    background-color: var(--color-navbar);
    color: var(--color-navbar-texto);
    /* border-top: 2px solid var(--color-principal); */
}

/* === RESPONSIVE === */
@media (max-width: 576px) {
    .card-header h4 {
        font-size: 1.1rem;
    }

    .btn {
        font-size: 0.9rem;
        padding: 0.35rem 0.65rem;
    }
}