/* =========================================================================
   admin-modern.css — capa de refresco estético del backend.
   Aditiva y reversible: solo color, tipografía, bordes, sombras y espaciado.
   NO cambia el layout (sidebar 250px, navbar fija) ni el HTML.
   Se carga la última, después de admin.less y side-menu.css.
   ========================================================================= */

:root {
    --m-primary: #2563eb;
    --m-primary-dark: #1d4ed8;
    --m-bg: #f4f6fb;
    --m-card: #ffffff;
    --m-border: #e6e8ee;
    --m-text: #1f2937;
    --m-muted: #6b7280;
    --m-radius: 8px;
    --m-shadow:
        0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    --m-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
}

/* ---- Base ---- */
body {
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, sans-serif !important;
    color: var(--m-text);
    -webkit-font-smoothing: antialiased;
}

#page-wrapper {
    background-color: var(--m-bg) !important;
    border-left-color: var(--m-border) !important;
}

/* Limitar el ancho del contenido en pantallas grandes (no estirar de más). */
@media (min-width: 768px) {
    #page-wrapper {
        max-width: 1250px;
    }
}

a {
    color: var(--m-primary);
}

a:hover,
a:focus {
    color: var(--m-primary-dark);
}

/* ---- Navbar superior ---- */
.navbar-main.navbar-default {
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid var(--m-border) !important;
    box-shadow: none;
}

.navbar-default .navbar-brand {
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--m-primary) !important;
}

/* En escritorio, el brand ocupa el mismo ancho que el sidebar (250px) para que
   el borde vertical a 250px quede alineado con el del contenido. */
@media (min-width: 768px) {
    .navbar-main .navbar-brand {
        width: 250px;
        box-sizing: border-box;
        border-right: 1px solid var(--m-border);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.navbar-top-links>li>a {
    color: var(--m-text);
}

/* Selector de centro compacto: el label iba en bloque encima del select y hacía
   el navbar más alto que su offset (51px), solapando el contenido. Lo ponemos
   en línea para que quepa en la barra. */
#center-selector {
    margin: 0 !important;
    padding-top: 9px;
    white-space: nowrap;
}

#center-selector label {
    display: inline-block !important;
    margin: 0 8px 0 0 !important;
    font-size: 13px;
    font-weight: 600;
    vertical-align: middle;
}

#center-selector select.form-control,
#center-selector .chosen-container {
    display: inline-block !important;
    width: auto !important;
    min-width: 150px;
    max-width: 220px;
    vertical-align: middle;
}

/* ---- Chosen dentro de formularios ----
   Chosen fija un ancho en píxeles al inicializar; si el layout se estrecha,
   el desplegable se sale y se solapa con el campo contiguo. Lo limitamos al
   ancho de su contenedor (sin afectar al selector de centro del navbar). */
.filterForm .chosen-container { width: 100% !important; max-width: 100% !important; }
.tab-content .chosen-container { max-width: 100% !important; }

/* ---- Sidebar ---- */
.navbar-static-side {
    background: #fff !important;
}

.navbar-static-side .nav>li {
    border-bottom: 1px solid #f0f1f5 !important;
}

.navbar-static-side .nav>li>a {
    color: #4b5563 !important;
    padding: 12px 18px;
    transition:
        background 0.15s ease,
        color 0.15s ease;
    border-left: 3px solid transparent;
}

.navbar-static-side .nav>li>a:hover,
.navbar-static-side .nav>li>a:focus {
    background: #f5f7ff !important;
    color: var(--m-primary) !important;
    border-left-color: var(--m-primary);
}

.navbar-static-side .nav>li.active>a,
.navbar-static-side .nav .active>a {
    background: #eef2ff !important;
    color: var(--m-primary) !important;
    border-left-color: var(--m-primary);
    font-weight: 600;
}

/* ---- Encabezado de página ---- */
.page-header {
    border-bottom: 1px solid var(--m-border);
    padding-bottom: 14px;
    margin: 22px 0 20px;
    font-weight: 600;
}

/* ---- Paneles como tarjetas ---- */
.panel {
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    overflow: hidden;
}

.panel-heading {
    background: #fbfcfe !important;
    border-bottom: 1px solid var(--m-border);
    font-weight: 600;
    padding: 12px 16px;
}

.panel-default>.panel-heading {
    color: var(--m-text);
}

/* ---- Botones ---- */
.btn {
    border-radius: 6px;
    font-weight: 500;
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.btn-default {
    background: #fff;
    border-color: var(--m-border);
    color: #374151;
}

.btn-default:hover,
.btn-default:focus {
    background: #f8fafc;
    border-color: #d1d5db;
}

.btn-primary {
    background: var(--m-primary);
    border-color: var(--m-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--m-primary-dark) !important;
    border-color: var(--m-primary-dark) !important;
}

.btn-sm {
    border-radius: 5px;
}

/* ---- Formularios ---- */
.form-control {
    border-radius: 6px;
    border-color: var(--m-border);
    box-shadow: none;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.form-control:focus {
    border-color: var(--m-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

label {
    font-weight: 600;
    color: #374151;
}

/* ---- Formulario de filtros (buscadores) ----
   El tema flotaba los campos con altura fija (26px) y se descuadraban.
   Los reordenamos en una rejilla flex uniforme (label arriba, input debajo). */
.filterForm {
    background: #fff;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    padding: 16px 18px;
    margin-bottom: 24px;
}
.filterForm fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-end;
}
.filterForm legend {
    flex: 0 0 100%;
    width: 100%;
    border: 0;
    margin: 0 0 6px;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--m-text);
}
.filterForm div.input {
    float: none !important;
    height: auto !important;
    margin: 0 !important;
    width: 190px;
    display: block;
}
.filterForm div.input label {
    display: block;
    float: none;
    padding: 0 0 4px !important;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--m-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.filterForm div.input input[type=text],
.filterForm div.input select {
    height: 34px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    border-radius: 6px;
}
.filterForm input[type=submit] {
    display: inline-block;
    margin-top: 14px;
    background: var(--m-primary);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 8px 20px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease;
}
.filterForm input[type=submit]:hover { background: var(--m-primary-dark); }
/* El tema ocultaba un campo del filtro por posición (nth-child); al añadir el
   filtro de teléfono se descuadró y acababa ocultando "nacionalidad" y dejando
   ver el campo dummy. Reactivamos nacionalidad y ocultamos el dummy por su clase
   (robusto ante cambios de posición). */
#EmployeeFilter fieldset > div:nth-child(9) { display: block !important; }
.filterForm div.input:has(.hidden_to_work) { display: none !important; }

/* ---- Pestañas ---- */
.nav-tabs {
    border-bottom: 1px solid var(--m-border);
}

.nav-tabs>li>a {
    border-radius: 6px 6px 0 0;
    color: var(--m-muted);
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus,
.nav-tabs>li>a.active {
    color: var(--m-primary);
    background-color: #fff !important;
    border-color: var(--m-border) var(--m-border) transparent;
    font-weight: 600;
}

/* El área de contenido de las pestañas mostraba el fondo (gris azulado) del
   page-wrapper. La convertimos en una tarjeta blanca. */
.tab-content {
    background: #fff;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    padding: 18px 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ---- Tablas ---- */
.table {
    background: var(--m-card);
}

.table>thead>tr>th {
    border-bottom: 2px solid var(--m-border);
    color: var(--m-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.4px;
    font-weight: 700;
}

.table>tbody>tr>td {
    border-top: 1px solid #f0f1f5;
    vertical-align: middle;
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background: #fafbfd;
}

.table-hover>tbody>tr:hover {
    background: #f5f7ff;
}

.table-responsive {
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    overflow: hidden;
}

/* ---- Etiquetas / badges ---- */
.label,
.badge {
    border-radius: 5px;
    font-weight: 600;
}

.label-primary,
.badge {
    background-color: var(--m-primary);
}

/* ---- Alerts / flash ---- */
.alert {
    border: 0;
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
}

.alert-success {
    background: #ecfdf5;
    color: #065f46;
}

.alert-danger {
    background: #fef2f2;
    color: #991b1b;
}

.alert-info {
    background: #eff6ff;
    color: #1e40af;
}

.alert-warning {
    background: #fffbeb;
    color: #92400e;
}

/* ---- Dropdowns ---- */
.dropdown-menu {
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow-md);
    padding: 6px;
}

.dropdown-menu>li>a {
    border-radius: 6px;
    padding: 7px 12px;
}

.dropdown-menu>li>a:hover {
    background: #f5f7ff;
    color: var(--m-primary);
}

/* ---- Bloques de estadística (coherencia con la paleta) ---- */
.stat-block {
    border-color: var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
}

.stat-block-title {
    background: #fbfcfe;
}

.stat-block-total,
.stat-bar {
    background: var(--m-primary);
}

.label-scope {
    padding: 3px 11px;
    color: white;
    font-size: 13px;
}

.action-btns .btn {
    margin-right: 5px;
}

.filterForm {
    background-color: white;
    padding: 15px;
    margin-top: 10px;
    border: 1px solid var(--m-border);
    border-radius: 7px;
}

.filterForm div.input input[type="text"], .filterForm div.input select{
    border: 1px solid var(--m-muted);
}

.navbar-main .navbar-brand{
    font-size: 14px;
}