/* ==========================================================================
   ELEGANT ERP MAESTRO - COMPONENTES OPTIMIZADOS PARA ADMINLTE 3
   ========================================================================== */

/* --- 1. Fundaciones Globales, Fondo y Tipografía --- */
body {
    background-color: #f8fafc !important; /* Gris pizarra ultra-claro para suavizar el fondo general */
    color: #334155 !important; /* Texto principal más suave que el negro puro */
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    letter-spacing: -0.01em;
}

/* --- 2. COMPONENTES MANTENIDOS ORIGINALES --- */
/* Se han eliminado las reglas de:
   - .nav-tabs y .nav-pills (Pestañas y Navegación)
   - .table, .table-responsive (Tablas y comportamiento de celdas)
   - .card, .card-header, .card-body, .card-footer (Tarjetas de contenido)
   Todos estos elementos heredan el comportamiento nativo original de tu ERP. */

/* --- 3. Control de Formularios e Inputs (.form-control-sm) --- */
/* Ajuste optimizado para inputs pequeños: limpios pero muy compactos */
.form-control-sm {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important; 
    height: calc(1.85rem + 4px) !important; 
    padding: 0.35rem 0.7rem !important; 
    font-size: 0.85rem !important; 
    line-height: 1.5 !important;
    background-color: #ffffff !important;
    color: #334155 !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* SOLUCIÓN: Evita que los textareas colapsen en una sola línea */
textarea.form-control-sm {
    height: auto !important;
    min-height: calc(1.85rem + 4px) !important; /* Mantiene la consistencia si está vacío */
}

/* Foco premium con un halo azul sutil */
.form-control-sm:focus {
    border-color: #3b82f6 !important; 
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* Etiquetas (Labels) limpias y profesionales */
label:not(.custom-file-label):not(.custom-control-label) {
    font-size: 0.825rem !important;
    font-weight: 600 !important;
    color: #475569 !important; 
    margin-bottom: 0.35rem !important;
}

/* --- 4. Integración de Select2 con Densidad Pequeña (.form-control-sm) --- */
.select2-container--bootstrap4 .select2-selection {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.select2-container--bootstrap4 .select2-selection--single.form-control-sm,
.input-group-sm .select2-container--bootstrap4 .select2-selection--single {
    height: calc(1.85rem + 4px) !important;
    padding: 0.35rem 0.4rem !important;
    font-size: 0.85rem !important;
}

.select2-container--bootstrap4 .select2-selection--single.form-control-sm .select2-selection__rendered,
.input-group-sm .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 1.4 !important;
    padding-left: 4px !important;
}

/* --- 5. Sidebar (Menú Lateral Oscuro Estilizado) --- */
.main-sidebar {
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.01) !important;
}

.sidebar-dark-primary {
    background-color: #0f172a !important; /* Tono pizarra profundo elegante */
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: #3b82f6 !important; 
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
    color: #ffffff !important;
}

.nav-sidebar .nav-link {
    border-radius: 6px;
    margin-bottom: 0.25rem;
    padding: 0.6rem 0.9rem !important;
    color: #94a3b8 !important;
    font-size: 0.925rem;
}

.nav-sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: #ffffff !important;
}

/* --- 6. Navbar Superior y Dropdowns --- */
.main-header {
    border-bottom: 1px solid #e2e8f0 !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px); 
}

/* Menús desplegables limpios */
.dropdown-menu {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05) !important;
    padding: 0.4rem 0 !important;
}

.dropdown-item {
    padding: 0.55rem 1.1rem !important;
    color: #475569 !important;
    font-size: 0.875rem;
}

.dropdown-item:hover {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
}

/* --- 7. Botonera y Badges Modernos (Colores Planos sin Degradados) --- */
.btn {
    border-radius: 6px !important;
    padding: 0.45rem 1.1rem !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease;
}

.btn-sm {
    border-radius: 5px !important;
    padding: 0.3rem 0.75rem !important;
    font-size: 0.8rem !important;
}

.btn-primary { background-color: #3b82f6 !important; border-color: #3b82f6 !important; }
.btn-primary:hover { background-color: #2563eb !important; border-color: #2563eb !important; }

.btn-success { background-color: #10b981 !important; border-color: #10b981 !important; }
.btn-success:hover { background-color: #059669 !important; border-color: #059669 !important; }

.btn-danger { background-color: #ef4444 !important; border-color: #ef4444 !important; }
.btn-danger:hover { background-color: #dc2626 !important; border-color: #dc2626 !important; }

.badge {
    padding: 0.4em 0.75em !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
}

/* --- 8. Modales Premium (Popups) --- */
.modal-content {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08) !important;
}

.modal-header {
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 1.25rem 1.5rem !important;
}

.modal-footer {
    border-top: 1px solid #f1f5f9 !important;
    background-color: #f8fafc !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* --- 9. Alertas y Barras de Progreso --- */
.alert {
    border: none !important;
    border-radius: 8px !important;
    font-weight: 500;
}

.progress {
    border-radius: 9999px !important;
    height: 6px !important;
    background-color: #e2e8f0 !important;
}

.progress-bar {
    border-radius: 9999px !important;
}

/* --- 10. Estilización del Plugin PACE (Barra de Carga Superior) --- */
.pace .pace-progress {
    background: #3b82f6 !important;
    height: 3px !important;
}

/* --- 11. Suavizado para iCheck checkboxes --- */
.icheck > label {
    padding-left: 6px !important;
    cursor: pointer;
}


/* ==========================================================================
   MÓDULO DE LOGIN ULTRA-ELEGANTE (ESTRICTO 100VH - SIN SCROLL)
   ========================================================================== */

/* Control estricto del fondo para congelar la pantalla en 100vh */
body.login-page {
    background-color: #f1f5f9 !important; /* Tono grisáceo claro minimalista */
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important; /* Elimina por completo cualquier posibilidad de scroll derecho */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Contenedor de la caja central */
.login-box {
    width: 390px !important; /* Ancho optimizado para pantallas medianas y grandes */
    margin: 0 !important; /* Remueve el margen superior automático de AdminLTE */
}

/* La tarjeta del Login con alta sofisticación */
.login-box .card {
    border: none !important;
    border-radius: 16px !important; /* Esquinas curvas de alta gama */
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 
                0 10px 10px -5px rgba(15, 23, 42, 0.04) !important; /* Sombra orgánica difuminada */
    background-color: #ffffff !important;
    margin-bottom: 0 !important;
}

/* Cuerpo de la tarjeta: Padding generoso e inteligente */
.login-card-body {
    padding: 2.2rem 2rem 1.8rem 2rem !important; /* Mucho padding interno pero controlado */
    border-radius: 16px !important;
}

/* Texto: "Software de gestión de recursos empresariales" */
.login-card-body h6.text-center:first-of-type {
    font-size: 0.825rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.2rem !important;
}

/* Ajuste del logo para que no empuje el formulario hacia abajo */
.login-card-body .img-fluid {
    max-height: 52px !important; 
    margin-bottom: 0.5rem !important;
}

/* --- Inputs Modernos y Estilizados con Icono --- */
.login-box .input-group .form-control {
    border: 1px solid #cbd5e1 !important;
    border-right: none !important; /* Remueve la línea interna */
    border-radius: 8px 0 0 8px !important;
    height: calc(2.5rem + 2px) !important; /* Altura ideal, moderna y cómoda */
    padding: 0.6rem 1rem !important;
    font-size: 0.95rem !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
    box-shadow: none !important;
}

/* El bloque del icono derecho */
.login-box .input-group-append .input-group-text {
    border: 1px solid #cbd5e1 !important;
    border-left: none !important;
    border-radius: 0 8px 8px 0 !important;
    background-color: #ffffff !important;
    color: #94a3b8 !important;
    padding-right: 1.1rem !important;
}

/* Foco unificado cuando el usuario hace clic en el input */
.login-box .input-group:focus-within .form-control {
    border-color: #3b82f6 !important;
}
.login-box .input-group:focus-within .input-group-append .input-group-text {
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
}

/* --- Botón de Acceso Premium --- */
.login-box .btn-primary.btn-block {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    border-radius: 8px !important;
    height: calc(2.5rem + 2px) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
    transition: all 0.15s ease-in-out !important;
}

.login-box .btn-primary.btn-block:hover {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3) !important;
    transform: translateY(-1px);
}

.login-box .btn-primary.btn-block:active {
    transform: translateY(0);
}

/* Pie de página de créditos */
.login-box h6.text-center.text-info {
    color: #94a3b8 !important; /* Tono grisáceo sutil no invasivo */
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    margin-top: 1.2rem !important;
    margin-bottom: 0 !important;
}

/* --- Estilo para campos Readonly --- */
.form-control-sm[readonly] {
    background-color: #f1f5f9 !important; /* Fondo gris muy suave */
    border-color: #e2e8f0 !important;      /* Borde sutil */
    color: #64748b !important;            /* Texto un poco más gris para indicar no editable */
    cursor: default !important;           /* Cursor normal de selección */
    opacity: 1 !important;                /* Asegura que no se vea transparente */
}

/* Ajuste específico para el Select2 cuando es Readonly */
.select2-container--bootstrap4 .select2-selection--single[readonly] {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

.select2-container--bootstrap4 .select2-selection--single[readonly] .select2-selection__rendered {
    color: #64748b !important;
}