/* ==========================================================================
   ESTILOS PERSONALIZADOS - LOOK MODERNO / DARKISH
   ========================================================================== */

/* Suavizar esquinas de tarjetas, botones y cajas de información */
.box,
.btn,
.info-box,
.main-header .navbar,
.main-sidebar,
.nav-tabs-custom {
    border-radius: 8px !important;
    border-top: none !important;
}

/* Sombras modernas (estilo Tailwind/Material) */
.box {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04) !important;
}

/* --- MODO OSCURO PARA MENÚ LATERAL Y TABLAS --- */
.main-sidebar {
    background-color: #1e1e2f !important;
    /* Fondo oscuro azulado */
}

.sidebar-menu>li>a {
    padding: 12px 15px 12px 15px !important;
    transition: background 0.3s ease;
}

/* Botones con aspecto más limpio */
.btn-primary {
    background-color: #4e73df !important;
    border-color: #4e73df !important;
}

.btn-primary:hover {
    background-color: #2e59d9 !important;
}

/* Redondear los inputs del sistema */
.form-control {
    border-radius: 6px !important;
    border: 1px solid #d1d3e2 !important;
}

.form-control:focus {
    border-color: #bac8f3 !important;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25) !important;
}