/* =========================================================================
   ESTILOS MODERNOS - FACTURA LATAM
   Paleta: 
   - Oscuro (Fondo Sidebar): #111827
   - Azul Corporativo: #1E3A8A
   - Rojo Acento: #E63946
   - Gris Claro (Fondo Body): #F8FAFC
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* --- Tipografía y Fondo General --- */
body, html {
    font-family: 'Inter', sans-serif !important;
    background-color: #F8FAFC !important;
    color: #334155;
    -webkit-font-smoothing: antialiased;
}

/* --- Barra Lateral (Sidebar) --- */
html.sidebar-light .sidebar-left,
html.sidebar-light .sidebar-left .nano-content,
html.fixed .sidebar-left,
html.fixed .sidebar-left .nano-content,
.sidebar-left,
.sidebar-left .nano-content {
    background-color: #111827 !important;
    box-shadow: 2px 0 15px rgba(0,0,0,0.1) !important;
    border: none !important;
}

html.sidebar-light .sidebar-header,
.sidebar-header {
    background-color: #0F172A !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

html.sidebar-light .sidebar-title,
.sidebar-title,
html.sidebar-light .sidebar-left .sidebar-title {
    background-color: transparent !important;
    background: none !important;
    margin: 10px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease;
}

.sidebar-title:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.sidebar-title-text {
    color: #F8FAFC !important;
    font-weight: 600;
}
.sidebar-title-text-second {
    color: #94A3B8 !important;
}

ul.nav-main > li > a {
    color: #CBD5E1 !important;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 4px 12px;
}
ul.nav-main > li > a:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

/* Estado Activo en Sidebar usando Rojo/Azul Factura Latam */
html.sidebar-light:not(.dark) ul.nav-main > li.nav-active > a,
ul.nav-main > li.nav-active > a {
    background-color: #1E3A8A !important; /* Azul corporativo */
    color: #FFFFFF !important;
    box-shadow: none !important;
    position: relative;
    border-left: 4px solid #E63946 !important; /* Rojo Acento */
    border-radius: 6px;
}

/* Íconos del Sidebar */
ul.nav-main > li > a > i, 
ul.nav-main > li > a > svg {
    color: #94A3B8 !important;
}
ul.nav-main > li.nav-active > a > i,
ul.nav-main > li.nav-active > a > svg,
ul.nav-main > li > a:hover > i,
ul.nav-main > li > a:hover > svg {
    color: #FFFFFF !important;
}

/* --- Header / Topbar --- */
.header {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
    border-bottom: none !important;
}

/* --- Tarjetas (Cards / Panels) --- */
.panel, .card {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    background-color: #ffffff !important;
    margin-bottom: 24px;
    overflow: hidden;
}

.panel-heading, .card-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #F1F5F9 !important;
    padding: 16px 20px;
}
.panel-title, .card-title {
    font-weight: 600;
    color: #1E293B;
    font-size: 1.1rem;
}

/* --- Botones --- */
.btn {
    border-radius: 8px !important;
    font-weight: 500 !important;
    padding: 8px 16px;
    transition: all 0.2s ease-in-out;
    text-transform: none;
    letter-spacing: 0.3px;
}
.btn-primary {
    background-color: #1E3A8A !important; /* Azul corporativo */
    border-color: #1E3A8A !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #172B6B !important;
    border-color: #172B6B !important;
    box-shadow: 0 4px 6px rgba(30, 58, 138, 0.2) !important;
    transform: translateY(-1px);
}
.btn-danger {
    background-color: #E63946 !important; /* Rojo Acento */
    border-color: #E63946 !important;
}
.btn-danger:hover {
    background-color: #D62828 !important;
    box-shadow: 0 4px 6px rgba(230, 57, 70, 0.2) !important;
}

/* --- Formularios --- */
.form-control {
    border-radius: 8px !important;
    border: 1px solid #CBD5E1 !important;
    padding: 10px 14px;
    font-size: 0.95rem;
    height: auto !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
select.form-control {
    padding: 0 14px !important;
    height: 42px !important;
    line-height: 42px !important;
    -webkit-appearance: auto;
}
.form-control:focus {
    border-color: #1E3A8A !important;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.15) !important;
}

/* --- Tablas --- */
table.dataTable, .table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
table.dataTable thead th, .table thead th {
    background-color: #F8FAFC !important;
    color: #475569 !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #E2E8F0 !important;
    padding: 12px 16px;
}
table.dataTable tbody td, .table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #F1F5F9 !important;
    vertical-align: middle;
}
table.dataTable tbody tr:hover {
    background-color: #F1F5F9 !important;
}

/* SweetAlert y Modales */
.swal2-popup {
    border-radius: 12px !important;
}
.modal-content {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Guest layout overrides */
.content-body-auth {
    background-color: #111827 !important;
    background-image: linear-gradient(135deg, #111827 0%, #1E3A8A 100%) !important;
}
.content-body-auth .panel {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
}