html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}


/*********** ESTILOS del LAYOUT ***********/

/* Altura total para sidebar y contenido */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
}
/* Sidebar fijo */
#sidebar {
    width: 220px;
    background-color: #343a40;
    color: white;
    flex-shrink: 0;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 56px; /* para dejar espacio a navbar */
}

    #sidebar .nav-link {
        color: #ddd;
    }

        #sidebar .nav-link.active, #sidebar .nav-link:hover {
            color: white;
            background-color: #495057;
        }
/* Contenido principal */
#content {
    margin-left: 220px;
    padding: 20px;
    width: 100%;
}
/* Barra superior */
#topbar {
    height: 47px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    /* background-color: #343a40; */
    background: linear-gradient(to bottom, #343a40, #212529);
    color: white;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    z-index: 1030;
    justify-content: center;
}
/* Responsive: menú lateral colapsable */
@media (max-width: 768px) {
    #sidebar {
        position: fixed;
        left: -220px;
        transition: left 0.3s ease;
        z-index: 1050;
    }

        #sidebar.show {
            left: 0;
        }

    #content {
        margin-left: 0;
        position: relative;
        z-index: 1;
    }

    .input-group {
        z-index: 0 !important;
    }
}

@media (max-width: 768px) {
    .contenedor-buscador {
        position: relative;
        z-index: 0;
    }
}

#sidebarToggle {
    position: fixed;
    left: 1rem;
    z-index: 1065; /* mayor que el sidebar */
}

#spinnerOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* negro con opacidad */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* mayor que el modal */
    pointer-events: all;
}