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

:root {
    --color-primary: #0e3049;
    --color-primary-light: #1b5279;
    --color-bg-light: #e7eef3;
    --color-bg-lighter: #f8fafb;
    --color-border: #d0d9df;
    --color-border-focus: #c2d1db;
    --color-white: #ffffff;
    --color-text-muted: #6c757d;
    --font-family-base: 'Poppins', 'Inter', Arial, Helvetica, sans-serif;
    --transition-base: 0.25s ease;
    --input-height: 40px;
    --border-radius: 4px;
    --dt-offset: 340px; /* Espacio para Navbar + Header + Toolbar */
}

body.zen-mode {
    --dt-offset: 160px; /* Menos espacio en modo pantalla completa */
}

/* Forzada de altura dinámica para DataTables */
.dataTables_scrollBody {
    height: calc(100vh - var(--dt-offset)) !important;
    max-height: calc(100vh - var(--dt-offset)) !important;
    transition: height 0.3s ease;
}

/* FORM CONTROLS */

.form-control {
    height: var(--input-height) !important;
    padding: 0 12px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius) !important;
    background: var(--color-white) !important;
    color: var(--color-primary) !important;
    font-size: 15px !important;
    box-shadow: none !important;
    transition: border-color 0.2s;
}

.form-control:focus {
    border-color: var(--color-primary-light) !important;
    background: var(--color-bg-lighter) !important;
    outline: none !important;
}

/* SELECT2 COMPONENT */

.select2-container {
    width: 100% !important;
}

.select2-container .select2-selection--single {
    display: flex !important;
    align-items: center !important;
    height: var(--input-height) !important;
    min-height: var(--input-height) !important;
    padding: 0 !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius) !important;
    background: var(--color-white) !important;
    font-size: 15px !important;
    box-shadow: none !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 8px !important;
    padding-right: 25px !important;
    color: var(--color-primary) !important;
    line-height: var(--input-height) !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    height: var(--input-height) !important;
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--color-primary-light) !important;
    background: var(--color-bg-lighter) !important;
}

/* FILTER COMPONENTS */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.5rem;
}

.filter-item {
    display: flex;
    flex-direction: column;
}

.filter-item--date {
    flex: 1 1 160px;
    min-width: 160px;
}

.filter-item--select {
    flex: 1 1 180px;
    min-width: 180px;
}

.filter-item--button {
    flex: 0 1 90px;
    min-width: 90px;
}

#filterForm label,
#filterForm strong {
    margin-bottom: 0.25rem;
    font-weight: 600 !important;
    font-family: var(--font-family-base) !important;
    color: var(--color-primary) !important;
}

/* TABLE TOOLBAR (Header con título, búsqueda y acciones) */
.table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 0.5rem;
}

.table-toolbar__header {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.table-toolbar__title {
    margin-bottom: 0;
    font-weight: 800;
    font-size: 1.25rem;
}

.table-toolbar__subtitle {
    color: var(--color-text-muted);
    font-size: 1rem;
}

.table-toolbar__search {
    flex-grow: 1;
    min-width: 180px;
}

.table-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* BUTTONS */

.btn-soft-primary,
.btn-soft-light,
.btn-soft-bar-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border: none !important;
    background-color: var(--color-bg-light) !important;
    color: var(--color-primary) !important;
    font-weight: 600;
    box-shadow: none !important;
    transition: all var(--transition-base);
}

.btn-soft-primary {
    height: var(--input-height) !important;
}

.btn-soft-light {
    height: 28px !important;
    padding: 7px;
}

.btn-soft-bar-light {
    height: 35px !important;
}

.btn-soft-primary:hover,
.btn-soft-primary:active,
.btn-soft-primary:active:focus,
.btn-soft-light:hover,
.btn-soft-light:active,
.btn-soft-light:active:focus,
.btn-soft-bar-light:hover,
.btn-soft-bar-light:active,
.btn-soft-bar-light:active:focus {
    background-color: var(--color-primary-light) !important;
    color: var(--color-white) !important;
}

.btn-soft-primary:focus,
.btn-soft-light:focus,
.btn-soft-bar-light:focus {
    background-color: var(--color-border-focus) !important;
    color: var(--color-primary-light) !important;
}

.btn-soft-primary i,
.btn-soft-primary svg,
.btn-soft-light i,
.btn-soft-light svg,
.btn-soft-bar-light i,
.btn-soft-bar-light svg {
    color: var(--color-primary-light) !important;
    transition: color var(--transition-base);
}

.btn-soft-primary:hover i,
.btn-soft-primary:hover svg,
.btn-soft-primary:active i,
.btn-soft-primary:active svg,
.btn-soft-primary:active:focus i,
.btn-soft-primary:active:focus svg,
.btn-soft-light:hover i,
.btn-soft-light:hover svg,
.btn-soft-light:active i,
.btn-soft-light:active svg,
.btn-soft-light:active:focus i,
.btn-soft-light:active:focus svg,
.btn-soft-bar-light:hover i,
.btn-soft-bar-light:hover svg,
.btn-soft-bar-light:active i,
.btn-soft-bar-light:active svg,
.btn-soft-bar-light:active:focus i,
.btn-soft-bar-light:active:focus svg {
    color: var(--color-white) !important;
}

.btn-soft-primary:focus i,
.btn-soft-primary:focus svg,
.btn-soft-light:focus i,
.btn-soft-light:focus svg,
.btn-soft-bar-light:focus i,
.btn-soft-bar-light:focus svg {
    color: var(--color-primary-light) !important;
}

/* TYPOGRAPHY */

body {
    font-family: var(--font-family-base);
    font-size: 15px;
    color: var(--color-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-base);
    font-weight: 700;
    color: var(--color-primary);
}

.text-muted,
.page__heading,
.font-weight-800 {
    font-family: var(--font-family-base);
    color: var(--color-primary);
    height: 10px;
}

/* Navigation links */
.nav-link-menu span {
    display: inline-block;
    white-space: normal;
    line-height: 1.1;
}

.table-header {
    /* background-color: #1b5279 !important;
    color: #ffffff !important;
    font-weight: bold !important; */
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

.table-data {
    /* background-color: #073664ff !important; */
    /* color: #ffffffff !important; */
    /* font-weight: bold !important; */
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

body.zen-mode .main-sidebar,
body.zen-mode .navbar,
body.zen-mode .main-footer,
body.zen-mode .section-header {
    display: none !important;
}

body.zen-mode .main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 20px !important;
    margin-left: 0 !important;
    width: 100vw !important;
    min-height: 100vh !important;
    transition: padding-left 0.3s ease;
}

/* Colapso solo de header */
body.headers-collapsed .section .section-header {
    display: none !important;
}