/*
    modern-components.css
    Capa global nueva de componentes que hoy no tienen rediseno propio:
    botones (estados disabled/loading), tablas (fullgrid), formularios
    (inputs/select/chosen/checkbox/radio/switch/fecha), modales, badges
    y scrollbar. Usa unicamente clases ya compartidas por TODO el sistema
    (Bootstrap 3 + fullgrid.jquery.js + smart-form), por lo que no hace
    falta tocar cada modulo por separado. No se modifica ningun id/name
    ni la logica de fullgrid.jquery.js / jquery.validate / chosen.
    Se carga despues de modern-ui.css y modern-shell.css.
*/

/* ===================================================================
   BOTONES: estados disabled / loading que faltaban en modern-ui.css
   =================================================================== */
.btn[disabled],
.btn.disabled {
    opacity: .55 !important;
    filter: none !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.btn i,
.btn .fa,
.btn .fa-solid {
    margin-right: 5px;
}

.btn i:only-child,
.btn .fa:only-child {
    margin-right: 0;
}

/* Estado "cargando": agregar la clase .btn-loading via JS existente
   (Tools.js) sobre cualquier boton para mostrar un spinner en vez del
   icono, sin cambiar el texto ni el tamano del boton. */
.btn.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.btn-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    animation: mc-spin .6s linear infinite;
}

.btn.btn-default.btn-loading::after,
.btn.btn-loading[class*="btn-outline"]::after {
    border-color: rgba(31, 41, 55, 0.25);
    border-top-color: var(--t-primary, #0B5ED7);
}

@keyframes mc-spin {
    to { transform: rotate(360deg); }
}

/* ===================================================================
   TABLAS (fullgrid.jquery.js) — moderniza TODAS las tablas del sistema
   =================================================================== */
.fullgrid-dt-toolbar,
.fullgrid-dt-toolbar-footer {
    background: var(--t-card, #fff) !important;
    border-color: var(--t-border, #e5e9f1) !important;
    box-shadow: none !important;
}

.fullgrid-dt-toolbar {
    border-radius: var(--t-radius, 12px) var(--t-radius, 12px) 0 0;
    padding: 12px 14px 8px !important;
}

.fullgrid-dt-toolbar-footer {
    border-radius: 0 0 var(--t-radius, 12px) var(--t-radius, 12px);
}

table.fullgrid {
    border-collapse: separate !important;
    border-spacing: 0;
}

table.fullgrid thead th {
    background: var(--t-bg, #f8fafc) !important;
    color: var(--t-text-muted, #64748b) !important;
    font-size: var(--t-fs-xs, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--t-border, #e5e9f1) !important;
    padding: 10px 12px !important;
    white-space: nowrap;
}

table.fullgrid tbody td {
    padding: 10px 12px !important;
    font-size: var(--t-fs-base, 13.5px);
    color: var(--t-text, #1f2937);
    border-bottom: 1px solid var(--t-border, #e5e9f1) !important;
    vertical-align: middle !important;
}

table.fullgrid tbody tr {
    transition: background var(--t-transition, .15s ease);
}

table.fullgrid tbody tr:nth-child(even) {
    background: rgba(15, 23, 42, 0.015);
}

table.fullgrid tbody tr:hover {
    background: var(--t-primary-soft, rgba(11, 94, 215, 0.08)) !important;
}

table.fullgrid tbody tr:last-child td {
    border-bottom: none !important;
}

.fullgrid_info {
    color: var(--t-text-muted, #64748b) !important;
    font-weight: 500 !important;
    font-style: normal !important;
    font-size: var(--t-fs-sm, 12.5px) !important;
}

.fullgrid_paginate .paginate_button,
.fullgrid_paginate a {
    border-radius: var(--t-radius-sm, 8px) !important;
    margin: 0 2px !important;
    border-color: var(--t-border, #e5e9f1) !important;
    color: var(--t-text, #1f2937) !important;
    transition: background var(--t-transition, .15s ease);
}

.fullgrid_paginate .paginate_button.current,
.fullgrid_paginate a.activerd {
    background: var(--t-primary, #0B5ED7) !important;
    border-color: var(--t-primary, #0B5ED7) !important;
    color: #fff !important;
}

/* Badges/labels usados dentro de las tablas (Bootstrap 3 .label) */
.label {
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    letter-spacing: .02em;
}

.label-success { background: var(--t-success, #10B981) !important; }
.label-warning { background: var(--t-warning, #F59E0B) !important; }
.label-danger  { background: var(--t-danger, #EF4444) !important; }
.label-info    { background: var(--t-info, #06B6D4) !important; }
.label-default { background: var(--t-text-muted, #94A3B8) !important; }
.label-primary { background: var(--t-primary, #0B5ED7) !important; }

/* ===================================================================
   FORMULARIOS: inputs, select, textarea, checkbox, radio, switch
   =================================================================== */
.smart-form .form-control,
.smart-form input[type="text"]:not(.modern-search-input),
.smart-form input[type="number"],
.smart-form input[type="email"],
.smart-form input[type="password"],
.smart-form input[type="date"],
.smart-form select,
.smart-form textarea,
.form-control:not(.modern-search-input) {
    border: 1px solid var(--t-border, #e5e9f1) !important;
    border-radius: var(--t-radius-sm, 8px) !important;
    box-shadow: none !important;
    font-size: var(--t-fs-base, 13.5px);
    color: var(--t-text, #1f2937);
    background: var(--t-card, #fff) !important;
    transition: border-color var(--t-transition, .15s ease), box-shadow var(--t-transition, .15s ease);
    padding: 8px 12px !important;
    height: auto !important;
}

.smart-form .form-control:focus,
.smart-form input:focus,
.smart-form select:focus,
.smart-form textarea:focus,
.form-control:focus {
    border-color: var(--t-primary, #0B5ED7) !important;
    box-shadow: 0 0 0 3px var(--t-primary-soft, rgba(11, 94, 215, 0.15)) !important;
    outline: none !important;
}

.smart-form label,
.control-label {
    font-weight: 600;
    font-size: var(--t-fs-sm, 12.5px);
    color: var(--t-text, #1f2937);
}

/* Chosen (select estilizado) alineado al mismo look de los inputs */
.chosen-container-single .chosen-single {
    border: 1px solid var(--t-border, #e5e9f1) !important;
    border-radius: var(--t-radius-sm, 8px) !important;
    box-shadow: none !important;
    background: var(--t-card, #fff) !important;
    height: 36px !important;
    padding: 7px 12px !important;
    color: var(--t-text, #1f2937) !important;
}

.chosen-container-active .chosen-single,
.chosen-container-active.chosen-with-drop .chosen-single {
    border-color: var(--t-primary, #0B5ED7) !important;
    box-shadow: 0 0 0 3px var(--t-primary-soft, rgba(11, 94, 215, 0.15)) !important;
}

.chosen-container .chosen-drop {
    border-color: var(--t-border, #e5e9f1) !important;
    border-radius: 0 0 var(--t-radius-sm, 8px) var(--t-radius-sm, 8px) !important;
    box-shadow: var(--t-shadow-lg, 0 8px 28px rgba(15,23,42,.12)) !important;
}

.chosen-container .chosen-results li.highlighted {
    background: var(--t-primary, #0B5ED7) !important;
}

/* Checkbox / radio (estilo "style-0" usado en todo el sistema) */
.checkbox input[type="checkbox"] + i,
.radio input[type="radio"] + i {
    border-radius: 4px;
    transition: background var(--t-transition, .15s ease), border-color var(--t-transition, .15s ease);
}

.radio input[type="radio"] + i {
    border-radius: 50%;
}

/* Switch de encendido/apagado, cuando se use en vez de checkbox clasico */
.mc-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

.mc-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mc-switch .mc-switch-track {
    position: absolute;
    inset: 0;
    background: var(--t-border, #e5e9f1);
    border-radius: 999px;
    transition: background var(--t-transition, .15s ease);
    cursor: pointer;
}

.mc-switch .mc-switch-track::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--t-shadow-sm, 0 1px 2px rgba(0,0,0,.15));
    transition: transform var(--t-transition, .15s ease);
}

.mc-switch input:checked + .mc-switch-track {
    background: var(--t-primary, #0B5ED7);
}

.mc-switch input:checked + .mc-switch-track::before {
    transform: translateX(18px);
}

/* Datepicker / clockpicker: alinear el popover al radio/sombra nuevos */
.datepicker.dropdown-menu,
.clockpicker-popover {
    border: 1px solid var(--t-border, #e5e9f1) !important;
    border-radius: var(--t-radius, 12px) !important;
    box-shadow: var(--t-shadow-lg, 0 8px 28px rgba(15,23,42,.12)) !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover {
    background: var(--t-primary, #0B5ED7) !important;
    background-image: none !important;
}

/* ===================================================================
   MODALES (Bootstrap 3: .modal-content / .modal-header / .modal-footer)
   =================================================================== */
.modal-content {
    border: none !important;
    border-radius: var(--t-radius-lg, 16px) !important;
    box-shadow: var(--t-shadow-lg, 0 8px 28px rgba(15,23,42,.12)) !important;
    overflow: hidden;
}

.modal-header {
    background: var(--t-card, #fff);
    border-bottom: 1px solid var(--t-border, #e5e9f1) !important;
    padding: 16px 22px !important;
}

.modal-title {
    font-weight: 700 !important;
    font-size: var(--t-fs-md, 15px) !important;
    color: var(--t-text, #1f2937) !important;
}

.modal-body {
    padding: 20px 22px !important;
}

.modal-footer {
    border-top: 1px solid var(--t-border, #e5e9f1) !important;
    padding: 14px 22px !important;
    background: var(--t-bg, #f8fafc);
}

.modal-header .close {
    opacity: 1 !important;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--t-bg, #f8fafc);
    color: var(--t-text-muted, #64748b) !important;
    text-shadow: none !important;
    transition: background var(--t-transition, .15s ease), color var(--t-transition, .15s ease);
}

.modal-header .close:hover {
    background: var(--t-danger-bg, #fef2f2);
    color: var(--t-danger, #ef4444) !important;
}

.modal.fade .modal-dialog {
    transition: transform .2s ease-out, opacity .2s ease-out;
    transform: translateY(-12px);
    opacity: 0;
}

.modal.fade.in .modal-dialog {
    transform: translateY(0);
    opacity: 1;
}

/* ===================================================================
   SCROLLBAR MODERNO (global, no reemplaza el custom-scroll de SmartAdmin)
   =================================================================== */
::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.55);
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.4);
}

/* ===================================================================
   MODO OSCURO: ajustes puntuales para los componentes de este archivo
   =================================================================== */
html.dark-mode table.fullgrid tbody tr:nth-child(even) {
    background: rgba(148, 163, 184, 0.04);
}

html.dark-mode .smart-form .form-control,
html.dark-mode .form-control,
html.dark-mode .chosen-container-single .chosen-single {
    background: var(--t-card, #1e293b) !important;
    color: var(--t-text, #f1f5f9) !important;
}

html.dark-mode .modal-header .close {
    background: rgba(148, 163, 184, 0.12);
}

/* El total (.modern-total-highlight, ej. VENT__txt_total) quedaba
   invisible en modo claro: ".smart-form input[type=text]:not(.modern-search-input)"
   (mas arriba en este mismo archivo) tiene mayor especificidad CSS
   (0,3,1) que un simple ".modern-total-highlight input" (0,2,1), asi
   que ganaba y pintaba el input de fondo blanco con texto blanco.
   Se agregan ancestros/atributo extra para superar esa especificidad. */
.modern-totals-card .modern-total-highlight input.form-control[type="text"],
.modern-total-highlight input.form-control[type="text"],
.modern-total-highlight input,
html.dark-mode .modern-totals-card .modern-total-highlight input.form-control[type="text"],
html.dark-mode .modern-total-highlight input.form-control[type="text"],
html.dark-mode .modern-total-highlight input {
    background: transparent !important;
    color: #fff !important;
}