/*
 * SUAIP System CSS — estilos base del layout del sistema.
 * Complementa Tailwind CDN. Sin Bootstrap.
 */

:root {
    --sw: 256px;          /* sidebar width — JS la sobreescribe */
    --th: 56px;           /* topbar height */
    --primary: #033a71;
    --primary-h: #022a52;
    --sidebar-bg: #1e2a3a;
    --bg-app: #f3f4f6;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; background: var(--bg-app); color: #1f2937; -webkit-font-smoothing: antialiased; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Sidebar labels ocultos al colapsar */
#suaip-sidebar.collapsed .sidebar-label { display: none !important; }

/* Responsive: móvil sin padding al sidebar */
@media (max-width: 1023px) {
    #suaip-wrapper { padding-left: 0 !important; }
}

/* Select2 overrides */
.select2-container--default .select2-results__option--highlighted { background: var(--primary) !important; }
.select2-dropdown { border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0,0,0,.1) !important; }
.select2-container--default .select2-selection--multiple { min-height: 42px !important; border: 1px solid #d1d5db !important; border-radius: 8px !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--primary) !important; color: #fff !important; border: none !important; border-radius: 4px !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: rgba(255,255,255,.7) !important; }

/* DataTables overrides */
table.dataTable thead th { background: #1e293b !important; color: #fff !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .06em; border: none !important; padding: 10px 14px !important; }
table.dataTable tbody tr:hover { background: rgba(3,58,113,.025) !important; }
table.dataTable tbody td { border-bottom: 1px solid #f1f5f9 !important; padding: 9px 14px !important; }
.dataTables_wrapper .dataTables_filter input { border: 1px solid #d1d5db; border-radius: 8px; padding: 6px 12px; font-size: 13px; margin-left: 8px; outline: none; }
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(3,58,113,.1); }

/* Print */
@media print {
    #suaip-sidebar, header, footer, .no-print, .uaip-btn, .uaip-btn-icon { display: none !important; }
    #suaip-wrapper { padding: 0 !important; }
    body { background: #fff !important; font-size: 12px; }
    @page { margin: 1.5cm; size: letter; }
}