/*
    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;
}

/*
 * Botones de accion del toolbar (Ganancia/PDF/Excel y variantes por
 * modulo, ej. Nuevo/Importar en Marca-Categorias-Series): fullgrid los
 * agrupa en un .btn-group de Bootstrap 3, pensado para botones de
 * esquinas cuadradas pegados unos a otros sin espacio. Como este sistema
 * redondea TODOS los .btn (border-radius:10px!important, ver
 * modern-ui.css), esa union sin espacio hacia que las esquinas
 * redondeadas de cada boton chocaran con las del siguiente -- se veian
 * amontonados/deformes en vez de una fila prolija. Se reemplaza el
 * float+solapamiento de Bootstrap por una fila flex con espacio real
 * entre botones.
 */
.fullgrid-dt-toolbar .btn-group,
.fullgrid-dt-toolbar-footer .btn-group {
    display: inline-flex !important;
    gap: 8px;
}

.fullgrid-dt-toolbar .btn-group > .btn,
.fullgrid-dt-toolbar-footer .btn-group > .btn {
    float: none !important;
    margin: 0 !important;
}

/*
 * Boton "Actualizar" (refrescar grilla) al pie: fullgrid lo inserta con
 * "margin-left:18px" inline junto al selector de cantidad de filas, sin
 * relacion con el .btn-group de arriba -- se le da la misma separacion
 * consistente.
 */
[id^="btnRefresh_"] {
    margin-left: 12px !important;
}

/* ===================================================================
   PESTAÑAS (.nav-tabs de Bootstrap 3) — moderniza TODAS las pestañas
   del sistema (Precios y Stock, Kardex, Liquidacion Diaria, etc.)
   -------------------------------------------------------------------
   Diseño: solo texto, sin capsula ni fondo. La fila lleva una linea
   divisoria inferior y la pestaña activa se marca unicamente con un
   subrayado dorado de 2px. Los colores salen de tokens (--t-tab-*), asi
   que el modo oscuro se resuelve solo sin duplicar este bloque.

   Se usa !important porque el tema base pinta las pestañas como cajas
   (bootstrap.min.css: borde+radio+fondo blanco en la activa; y
   smartadmin ".nav-tabs.bordered" agrega un recuadro completo).
   =================================================================== */
.nav-tabs,
.nav-tabs.bordered {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--t-tab-border, #DCE4EA) !important;
    box-shadow: none !important;
    padding-left: 0 !important;
}

/* El panel de contenido deja de ser una "caja" pegada a las pestañas:
   solo contenido, separado de la fila por 18px. */
.nav-tabs + .tab-content,
.nav-tabs.bordered + .tab-content {
    background: transparent !important;
    border: none !important;
    margin-top: 18px;
}

.nav-tabs > li {
    float: left;
    margin-bottom: -1px;
}

/* Ojo: NO incluir aca ".nav-tabs.bordered > :first-child a" -- esa
   combinacion tiene mas especificidad (3 clases) que la regla de pestaña
   activa de mas abajo (2 clases), y como la activa suele ser la primera,
   se terminaba pisando a si misma. El "border:none" de aca ya deja sin
   efecto el "border-left-width:0" que smartadmin le pone a ese primer
   item, asi que no hace falta apuntarlo. */
.nav-tabs > li > a,
.nav-tabs.bordered > li > a {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 4px 0 0 !important;
    padding: 10px 16px !important;
    font-family: var(--t-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    color: var(--t-tab-text, #5B6B78) !important;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

/* Hover en inactiva: solo fondo gris claro -- ni subrayado ni cambio de
   color de texto. */
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    background: var(--t-tab-hover-bg, #EEF2F5) !important;
    color: var(--t-tab-text, #5B6B78) !important;
    border-bottom-color: transparent !important;
}

/* Activa: texto en color de acento + subrayado dorado, unico indicador.
   El subrayado se mantiene en hover/focus (no desaparece). */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus {
    background: transparent !important;
    color: var(--t-tab-text-active, #1E3A6E) !important;
    border-bottom: 2px solid var(--t-tab-underline, #B98A2E) !important;
    cursor: pointer !important;
}

.nav-tabs > li.active > a:hover {
    background: var(--t-tab-hover-bg, #EEF2F5) !important;
    color: var(--t-tab-text-active, #1E3A6E) !important;
    border-bottom: 2px solid var(--t-tab-underline, #B98A2E) !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;
}