/* =====================================================
   Estructura:
   1) Tokens / raíz
   2) Reset + Base tipográfica y layout
   3) Utilitarios globales
   4) Navegación (navbar/offcanvas, nav-pills)
   5) Tablas / Grids (genérico + themed + sticky + table-fit)
   6) Plugins/Componentes (Handsontable, bootstrap-select)
   7) Formularios (controles, estados, inputs numéricos/checked)
   8) Componentes UI (cards, group-box, botones, previews)
   9) Overlays/Modales (loading, OCR, modal, z-index helpers)
  10) Vistas específicas (Conciliación, Multi-Factura)
  11) Helpers (hidden)
  12) Media queries
   ===================================================== */

/* ========== 1) Tokens / raíz ========== */
:root {
    /* El tema real viene de /theme.css. Aquí solo fallbacks implícitos via var(). */
}

/* ========== 2) Reset + Base tipográfica y layout ========== */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    background-color: var(--surface-bg, #f7f7f7);
    color: var(--surface-fg, #111827);
}

body {
    margin-bottom: 60px;
    background-color: var(--surface-bg, #f7f7f7);
    color: var(--surface-fg, #111827);
    font-family: var(
        --font-family,
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        "Noto Sans",
        "Liberation Sans",
        sans-serif
    );
}

/*h4 {
    margin-top: 120px;
}*/

/* Tamaños base de tablas compactas/auxiliares */
.table-sm {
    width: 80%;
    margin: auto;
}

.smalltext {
    height: 10%;
}

.margr {
    margin-right: 2px;
}

/* ========== 3) Utilitarios globales ========== */
.full-height {
    height: 100vh;
    padding: 20px;
}

.full-container {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
}

.center {
    margin: auto;
    width: 50%;
    padding: 10px;
}

.pad20 {
    margin-top: 8%;
    padding-left: 10%;
    padding-right: 10%;
}

.pad30 {
    margin-top: 14%;
    padding-left: 10%;
    padding-right: 10%;
}

.pad40 {
    margin-top: 18%;
    padding-left: 10%;
    padding-right: 10%;
}

.bg-custom {
    background-color: var(--surface-muted, #e9f4f6);
    color: var(--color-primary, #4972b1);
}

.bg-custom-danger {
    background-color: var(--danger, #f06767);
    color: var(--on-danger, #5b0000);
}

.txt-danger {
    color: var(--on-danger, #5b0000);
}

.bg-darker {
    color: var(--on-primary, #e9f4f6);
    background-color: var(--color-primary, #4972b1);
}

.text-muted {
    color: color-mix(in srgb, var(--surface-fg, #222) 85%, white) !important;
    font-weight: 600;
}

/* Links contextuales (por ej. login) */
.loginlink,
.loginlink:visited {
    color: var(--surface-fg, #000000);
}

.loginlink:hover {
    color: var(--color-primary, #4972b1);
}

/* ========== 4) Navegación ========== */
/* Header temable */
.navbar.theme-nav {
    background: var(--header-bg, var(--surface-bg, #212529));
    color: var(--header-fg, var(--surface-fg, #fff));
}

.navbar.theme-nav .navbar-brand,
.navbar.theme-nav .nav-link,
.navbar.theme-nav .navbar-text {
    color: var(--header-fg, #fff) !important;
}

/* Toggler */
.navbar.theme-nav .navbar-toggler {
    border: 0;
    box-shadow: none;
}

.navbar.theme-nav .navbar-toggler-icon {
    background-image: none !important;
    position: relative;
    width: 1.5rem;
    height: 2px;
    background: var(--header-fg, #fff);
    box-shadow:
        0 -6px 0 0 var(--header-fg, #fff),
        0 6px 0 0 var(--header-fg, #fff);
}

/* Offcanvas del header */
.offcanvas.theme-nav {
    background: var(--header-bg, #212529);
    color: var(--header-fg, #fff);
}

.offcanvas.theme-nav .nav-link {
    color: var(--header-fg, #fff) !important;
}

.offcanvas.theme-nav .btn-close {
    filter: invert(1);
}

/* Pills (activa = primario) */
.nav-pills > .nav-item > .nav-link {
    color: var(--color-primary, #4972b1);
}

.nav-pills > .nav-item > .active {
    background-color: var(--color-primary, #4972b1);
    color: var(--on-primary, #e9f4f6);
}

/* ========== 5) Tablas / Grids ========== */
/* Fit helpers */
.table td.fit,
.table th.fit {
    white-space: nowrap;
    width: 1%;
}

table.table-fit {
    width: auto;
    table-layout: auto;
}

table.table-fit thead th,
table.table-fit tfoot th,
table.table-fit tbody td,
table.table-fit tfoot td {
    width: auto;
}

/* Cabecera sticky en contenedores con scroll */
.valk-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-elevated-bg, #fff);
    color: var(--surface-fg, #111827);
}

/* Tabla con tokens del tema */
.table.valk-themed-table,
.table.valk-themed-table.table-striped,
.table.valk-themed-table.table-hover {
    --bs-table-color: var(--surface-fg) !important;
    --bs-table-bg: var(--surface-elevated-bg, var(--surface-bg)) !important;
    --bs-table-border-color: var(
        --surface-border,
        rgba(0, 0, 0, 0.15)
    ) !important;
    --bs-table-striped-bg: color-mix(
        in srgb,
        var(--surface-fg) 4%,
        var(--bs-table-bg)
    ) !important;
    --bs-table-striped-color: var(--surface-fg) !important;
    --bs-table-hover-bg: color-mix(
        in srgb,
        var(--surface-fg) 7%,
        var(--bs-table-bg)
    ) !important;
    --bs-table-hover-color: var(--surface-fg) !important;
    color: var(--surface-fg) !important;
    background: var(--bs-table-bg) !important;
    border-color: var(--bs-table-border-color) !important;
}

.table.valk-themed-table thead th {
    color: var(--surface-fg) !important;
    background: var(--bs-table-bg) !important;
    border-color: var(--bs-table-border-color) !important;
}

.table.valk-themed-table tbody td,
.table.valk-themed-table tbody th {
    color: var(--surface-fg) !important;
}

/* Contenedores de grillas/labels */
#productGrid,
#labelsContainer {
    display: flex;
    justify-content: center;
    margin: auto;
    width: 90%;
    min-height: 70px;
    overflow-y: auto;
}

#productsTable {
    height: 410px;
    max-height: 410px;
    overflow-y: scroll;
    display: none;
}

#hot {
    display: flex;
    justify-content: center;
    margin: auto;
    width: 90%;
    min-height: 70px;
    height: 70px;
    overflow-y: auto;
}
/* Contenedor para la tabla de administración de usuarios */
.user-table-container {
    max-height: 500px; /* Puedes ajustar este tamaño si quieres */
    overflow-y: auto;
    border: 1px solid var(--bs-table-border-color, #dee2e6);
    border-radius: 8px;
}

/* ========== 6) Plugins / Componentes externos ========== */
/* === Handsontable === */
.full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.parentDiv {
    overflow-x: visible;
}

.handsontable .htCore {
    white-space: nowrap;
}

#productGrid {
    width: 90%;
    min-width: 1400px;
}

:root {
    --hot-bg: #f5f7fa;
    --hot-fg: #111111;
    --hot-border: #d0d4da;
    --hot-header-bg: #2f6bb0;
    --hot-header-fg: #ffffff;
}

/* Fondo y texto generales */
.handsontable,
.handsontable .wtHolder,
.handsontable .ht_master,
.handsontable .ht_clone_top,
.handsontable .ht_clone_left,
.handsontable .ht_clone_top_left_corner {
    background: var(--hot-bg) !important;
    color: var(--hot-fg) !important;
}

/* Encabezados */
.handsontable th,
.handsontable .myColumnHeader {
    background: var(--hot-header-bg) !important;
    color: var(--hot-header-fg) !important;
    font-weight: 600;
    text-align: center;
}

/* Celdas normales */
.handsontable td {
    background: var(--hot-bg) !important;
    color: var(--hot-fg) !important;
    border-color: var(--hot-border) !important;
}

/* Inputs o textareas dentro de celdas */
.handsontable input,
.handsontable textarea {
    background: #ffffff !important;
    color: var(--hot-fg) !important;
    border-color: var(--hot-border) !important;
    -webkit-text-fill-color: var(--hot-fg); /* Safari */
}

/* Borde de selección */
.handsontable .current,
.handsontable .area,
.handsontable .ht__highlight {
    border-color: #2f6bb0 !important;
}

/* Errores en HOT */
.handsontable td.htInvalid,
.handsontable td.htInvalidRFC {
    background-color: #fde2e1 !important;
    color: #b42318 !important;
    border-color: #e4b1ac !important;
}
.handsontable td:not(.htInvalid):not(.htInvalidRFC) {
    background: var(--hot-bg) !important;
    color: var(--hot-fg) !important;
    border-color: var(--hot-border) !important;
}

/* ===== Preview (receiver-box / group-box) ===== */
body.valk-theme .receiver-box,
body.valk-theme .group-box {
    background: var(--surface-elevated-bg, var(--surface-bg, #fff)) !important;
    color: var(--surface-fg, #111827) !important;
    border: 1px solid var(--surface-border, rgba(0, 0, 0, 0.15)) !important;
}

body.valk-theme .group-box .alert-danger {
    background: color-mix(
        in srgb,
        var(--danger, #dc3545) 15%,
        var(--surface-elevated-bg, #fff)
    );
    color: var(--surface-fg, #111827);
    border-color: color-mix(in srgb, var(--danger, #dc3545) 45%, transparent);
}

/* Menú contextual */
body.valk-theme .htContextMenu .htCore {
    background: var(--hot-cell-bg) !important;
    color: var(--hot-cell-fg) !important;
}

/* bootstrap-select */
.bootstrap-select > .dropdown-toggle {
    background: var(--surface-elevated-bg, var(--surface-bg, #fff));
    color: var(--surface-fg, #212529);
    border: 1px solid var(--surface-border, rgba(0, 0, 0, 0.15));
    border-radius: var(--radius-md, 0.375rem);
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    box-shadow: none;
}

.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle {
    outline: 0;
    border-color: rgba(13, 110, 253, 0.5);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.bootstrap-select .filter-option {
    color: inherit;
}

.bootstrap-select .dropdown-toggle .caret,
.bootstrap-select .dropdown-toggle::after {
    border-top-color: var(--surface-fg, #212529);
}

.bootstrap-select .dropdown-menu {
    background: var(--surface-elevated-bg, var(--surface-bg, #fff));
    color: var(--surface-fg, #212529);
    border: 1px solid var(--surface-border, rgba(0, 0, 0, 0.15));
}

.bootstrap-select .dropdown-menu .dropdown-item {
    color: var(--surface-fg, #212529);
}

.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item:active {
    background: var(--color-primary, #0d6efd);
    color: var(--on-primary, #fff);
}

.bootstrap-select .bs-placeholder .filter-option-inner-inner {
    color: color-mix(in srgb, var(--surface-fg, #212529) 60%, transparent);
}

/* ========== 7) Formularios ========== */
/* Campos base  */
body.valk-theme .form-control,
body.valk-theme .form-select {
    background: var(--input-bg);
    color: var(--input-fg);
    border-color: var(--input-border);
}

/* Focus accesible */
body.valk-theme .form-control:focus,
body.valk-theme .form-select:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 0.25rem var(--input-focus-ring);
}

/* Placeholder consistente */
body.valk-theme .form-control::placeholder,
body.valk-theme textarea::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
}

/* Readonly / disabled */
body.valk-theme .form-control:disabled,
body.valk-theme .form-select:disabled,
body.valk-theme .form-control[readonly],
body.valk-theme textarea[readonly] {
    background: var(--input-readonly-bg) !important;
    color: var(--input-fg) !important;
    border-color: var(--input-border) !important;
    opacity: 1;
    -webkit-text-fill-color: var(--input-fg);
}

/* Forzar color/fondo/borde para TODAS las celdas usando el selector de Bootstrap */
.table.valk-themed-table > :not(caption) > * > * {
    color: var(--surface-fg) !important;
    background-color: var(--bs-table-bg) !important;
    border-color: var(--bs-table-border-color) !important;
}

/* Striping respetando variables del tema */
.table.valk-themed-table.table-striped > tbody > tr:nth-of-type(odd) > * {
    color: var(--bs-table-striped-color) !important;
    background-color: var(--bs-table-striped-bg) !important;
}

/* Hover respetando variables del tema */
.table.valk-themed-table.table-hover > tbody > tr:hover > * {
    color: var(--bs-table-hover-color) !important;
    background-color: var(--bs-table-hover-bg) !important;
}

/* Inputs numéricos y checked */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

body.valk-theme .form-check-input:checked,
body.valk-theme input:checked {
    background-color: var(--color-primary, #0d6efd);
    border-color: var(--color-primary, #0d6efd);
    color: var(--on-primary, #fff);
}

/* Botones de tono secundario (con tokens + especificidad) */
body.valk-theme .btn-outline-secondary {
    color: var(--surface-fg, #111827);
    border-color: var(--surface-border, rgba(0, 0, 0, 0.15));
}

body.valk-theme .btn-outline-secondary:hover,
body.valk-theme .btn-outline-secondary:focus {
    background: color-mix(in srgb, var(--surface-fg, #111827) 8%, transparent);
    color: var(--surface-fg, #111827);
    border-color: var(--surface-border, rgba(0, 0, 0, 0.25));
}

/*Select o dropdown*/
body.valk-theme select.form-select,
body.valk-theme select.form-control,
body.valk-theme select {
    background: var(--surface-elevated-bg, var(--surface-bg, #fff)) !important;
    color: var(--surface-fg, #212529) !important;
    border: 1px solid var(--surface-fg, rgba(0, 0, 0, 0.25)) !important;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md, 0.375rem);
}

/*Focus en select*/
body.valk-theme select.form-select:focus,
body.valk-theme select.form-control:focus,
body.valk-theme select:focus {
    background: var(--surface-elevated-bg, var(--surface-bg, #fff)) !important;
    color: var(--surface-fg, #212529) !important;
    border-color: var(--color-primary, #0d6efd) !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem
        color-mix(in srgb, var(--color-primary, #0d6efd) 25%, transparent);
}

/*Options del select*/
body.valk-theme select option {
    background: var(--surface-elevated-bg, var(--surface-bg, #fff)) !important;
    color: var(--surface-fg, #212529) !important;
}

/*Hover en options*/
body.valk-theme select option:hover,
body.valk-theme select option:checked {
    background: color-mix(
        in srgb,
        var(--surface-fg) 15%,
        var(--surface-elevated-bg, var(--surface-bg, #fff))
    ) !important;
    color: var(--surface-fg, #212529) !important;
}

/*File input*/
body.valk-theme input[type="file"].form-control {
    background: var(--surface-elevated-bg, var(--surface-bg, #fff)) !important;
    color: var(--surface-fg, #212529) !important;
    border-color: var(--surface-fg, rgba(0, 0, 0, 0.25)) !important;
}

/*Botón del file input*/
body.valk-theme input[type="file"].form-control::file-selector-button {
    background: var(--color-primary, #0d6efd) !important;
    color: var(--on-primary, #fff) !important;
    border: 1px solid var(--color-primary, #0d6efd) !important;
    padding: 0.375rem 0.75rem;
    margin-right: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

body.valk-theme input[type="file"].form-control::file-selector-button:hover {
    background: color-mix(
        in srgb,
        var(--color-primary, #0d6efd) 70%,
        var(--surface-fg)
    ) !important;
    color: var(--on-primary, #fff) !important;
}

/* ========== 8) Componentes UI ========== */
/*Botones primarios*/
body.valk-theme .btn-primary {
    background-color: var(--color-primary, #0d6efd) !important;
    border-color: var(--color-primary, #0d6efd) !important;
    color: var(--on-primary, #fff) !important;
}

body.valk-theme .btn-primary:hover,
body.valk-theme .btn-primary:focus {
    background-color: color-mix(
        in srgb,
        var(--color-primary, #0d6efd) 85%,
        black
    ) !important;
    border-color: color-mix(
        in srgb,
        var(--color-primary, #0d6efd) 85%,
        black
    ) !important;
    color: var(--on-primary, #fff) !important;
}

body.valk-theme .btn-primary:active {
    background-color: color-mix(
        in srgb,
        var(--color-primary, #0d6efd) 75%,
        black
    ) !important;
    border-color: color-mix(
        in srgb,
        var(--color-primary, #0d6efd) 75%,
        black
    ) !important;
    color: var(--on-primary, #fff) !important;
}
.group-box {
    background-color: var(--surface-card, #f9f9f9);
    border: 1px solid var(--surface-border, #ddd);
    padding: 15px;
    margin-bottom: 20px;
    border-radius: var(--radius-md, 5px);
}

.short-dropdown {
    max-width: 150px;
}

.datepicker-short {
    max-width: 120px;
}

/* Botón eliminar circular */
.btn-delete {
    background-color: var(--surface-bg, #fff);
    border: 1px solid var(--danger, red);
    color: var(--danger, red);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.btn-delete:hover {
    background-color: var(--danger, red);
    color: var(--on-danger-contrast, #fff);
}

/* Previews */
.preview-canvas {
    background: var(--surface-bg, #f7f7f7);
    color: var(--surface-fg, #111827);
    border: 1px solid var(--surface-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-md, 8px);
    padding: 1rem;
    min-height: 140px;
}

.preview-btn {
    background: var(--color-primary, #0d6efd);
    color: var(--on-primary, #fff);
    border-radius: var(--radius-md, 8px);
}

/* ========== 9) Overlays / Modales / Z-index helpers ========== */
/* Loading overlay */
#fondoLoading {
    position: fixed;
    inset: 0;
    background-color: rgba(187, 189, 191, 0.88);
    z-index: 2;
    cursor: pointer;
}

#loadingOverlay {
    position: fixed;
    width: 450px;
    height: 400px;
    top: 30%;
    left: 40%;
    right: 70%;
    bottom: 0;
    z-index: 2;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

#loadingMessage {
    position: absolute;
    color: var(--surface-fg, #000);
    padding: 10px;
    top: 60%;
    border-radius: var(--radius-sm, 5px);
    z-index: 3;
    text-align: center;
}

/* OCR overlay/spinner */
.ocr-loader {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.ocr-loader__box {
    background: var(--surface-elevated-bg, #fff);
    color: var(--surface-fg, #111827);
    border-radius: 0.6rem;
    padding: 1.25rem 1.5rem;
    max-width: 680px;
    width: min(92vw, 680px);
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.ocr-loader__spinner {
    width: 3rem;
    height: 3rem;
    border: 0.35rem solid #e9ecef;
    border-top-color: var(--color-primary, #0d6efd);
    border-radius: 50%;
    animation: ocrspin 1s linear infinite;
    margin: 0 auto 0.75rem;
}

@keyframes ocrspin {
    to {
        transform: rotate(360deg);
    }
}

/* Modales (con tokens + especificidad) */
.modal-backdrop {
    z-index: 1040;
}

.modal {
    z-index: 1050;
}

.modal:not(.show) {
    display: none;
}

body.valk-theme .modal-content {
    background: var(--surface-elevated-bg, var(--surface-bg, #ffffff));
    color: var(--surface-fg, #111827);
    border-color: var(--surface-border, rgba(0, 0, 0, 0.15));
}

.modal-backdrop.show {
    background-color: color-mix(
        in srgb,
        var(--surface-fg, #000000) 80%,
        transparent
    );
    opacity: 0.55;
}

body.valk-theme .modal-header,
body.valk-theme .modal-footer {
    border-color: var(--surface-border);
}

body.valk-theme .modal-header.bg-warning-subtle {
    background: color-mix(
        in srgb,
        var(--color-primary, #0d6efd) 12%,
        var(--surface-elevated-bg)
    );
    color: var(--surface-fg);
}

.modal .btn-close {
    filter: brightness(0) invert(var(--btn-close-invert, 0));
}

/* Datepicker / Autocomplete nivel z */
.ui-datepicker {
    z-index: 2000 !important;
}

.ui-autocomplete {
    z-index: 1000 !important;
}

/* ========== 10) Vistas específicas ========== */
#titleFact {
    margin-bottom: 70px;
}

#facturas-list,
#depositos-list {
    max-height: 60vh;
    overflow-y: auto;
}

#multi-fact-content #mf-force {
    transform: scale(1.4);
    margin-right: 0.35rem;
}

#multi-fact-content label[for="mf-force"] {
    font-weight: 700;
    cursor: pointer;
}

/* ========== 11) Helpers ========== */
.hidden {
    display: none !important;
}

/* ========== 12) Media queries ========== */
@media screen and (max-width: 768px) {
    html {
        font-size: 16px;
    }

    .form-label {
        font-size: 14px;
    }

    .form-control {
        font-size: 14px;
    }
}
.htInvalidRFC {
    background-color: #fde2e1 !important;
    color: #b42318 !important;
}

.field-glow {
    border-color: #ffc107 !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
    transition:
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

/* ===== Ajustes específicos: Modales de Inventarios (Agregar/Editar) ===== */
body.valk-theme #addModal .modal-content,
body.valk-theme #editModal .modal-content {
    border-radius: var(--radius-md, 0.75rem);
    border: 1px solid var(--color-primary, #0d6efd);
    background: var(--surface-elevated-bg, #ffffff);
    color: var(--surface-fg, #111827);
    overflow: hidden;
}

body.valk-theme #addModal .modal-header,
body.valk-theme #editModal .modal-header {
    background: var(--color-primary, #0d6efd);
    color: var(--on-primary, #fff);
    border-bottom: 1px solid
        color-mix(in srgb, var(--color-primary, #0d6efd) 75%, black);
    padding-block: 0.6rem;
}

body.valk-theme #addModal .modal-header,
body.valk-theme #editModal .modal-header {
    border-top-left-radius: var(--radius-md, 0.75rem);
    border-top-right-radius: var(--radius-md, 0.75rem);
}

body.valk-theme #addModal .btn-close,
body.valk-theme #editModal .btn-close {
    filter: invert(1);
    opacity: 0.9;
}

.btn-purple {
    background-color: #6c25be;
    border-color: #6c25be;
    color: #ffffff;
}

.btn-purple:hover {
    background-color: #5a1d9e;
    border-color: #5a1d9e;
    color: #ffffff;
}

.btn-purple:disabled {
    background-color: #7752a1;
    border-color: #7752a1;
    color: #ffffff;
}

.btn-orange {
    background-color: #e6991e;
    border-color: #e6991e;
    color: #ffffff;
}

.btn-orange:hover {
    background-color: #b87a18;
    border-color: #b87a18;
    color: #ffffff;
}

.btn-orange:disabled {
    background-color: #ba893c;
    border-color: #ba893c;
    color: #ffffff;
}

.ok {
    color: green;
    font-weight: bold;
}

.oknt {
    color: red;
    font-weight: bold;
}

#facturasModal .modal-body {
    max-height: 80vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#depositos-list {
    max-height: none !important;
    overflow-y: visible !important;
}

#invoice-search-section {
    min-height: 300px !important;
}

.modal-calendar-zone {
    min-height: 320px;
}

.modal-scroll-results {
    max-height: 400px;
    overflow-y: auto !important;
}

.sticky-closing-bar {
    position: sticky !important;
    bottom: -16px !important;
    background-color: #f8f9fa !important;
    z-index: 1050 !important;
    padding-bottom: 8px !important;
    box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.15) !important;
}

.action-card-fixed {
    height: 48px;
}
.btn-action-fixed {
    height: 48px;
    font-size: 0.85rem;
}

.dashboard-label-xs {
    font-size: 0.65rem;
}

.alert-soft-red {
    background-color: #fff5f5;
    border-left: 4px solid #ffc9c9;
}
.text-soft-red-dark {
    color: #c92a2a;
}

.bg-soft-yellow {
    background-color: #fff9db;
}
.text-soft-yellow-dark {
    color: #856404;
}
.text-remaining-amber {
    color: #d97706 !important;
}

.deposit-info-hdr {
    font-size: 0.85rem;
}
.deposit-info-label {
    font-size: 0.75rem;
}
/* Paginación emisores */
#pagination .page-link {
    padding: 0.5rem 0.85rem;
    font-size: 0.9rem; 
}

#pagination .pagination {
    justify-content: center;
}
#clear-filters {
    background: none;
    border: none;
    box-shadow: none;
}
#clear-filters:hover i {
    color: #dc3545; /* rojo al pasar el mouse */
}


/* ===== SELECT DE ESTRUCTURA ===== */
#select-structures {
    border-radius: 8px !important;
    border: 1.5px solid #93c5fd !important;
    padding: 10px 14px !important;
    background-color: #dbeafe !important;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease !important;
    min-width: 140px;
}

#select-structures:hover {
    background-color: #bfdbfe !important;
    border-color: #60a5fa !important;
}

#select-structures:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    outline: none !important;
}

/* ===== SELECT DE FILTRO (BUSCAR POR) ===== */
#search-type {
    border-radius: 8px !important;
    border: 1.5px solid #93c5fd !important;
    padding: 10px 14px !important;
    background-color: #dbeafe !important;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease !important;
    min-width: 140px;
}

#search-type:hover {
    background-color: #bfdbfe !important;
    border-color: #60a5fa !important;
}

#search-type:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    outline: none !important;
}

/* ===== INPUT DE BÚSQUEDA ===== */
#search-emitter {
    border-radius: 8px !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 10px 14px !important;
    font-size: 0.9rem;
    flex-grow: 1;
    max-width: 200px;
}

#search-emitter:hover {
    border-color: #cbd5e0 !important;
}

#search-emitter:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
}

/* ===== BOTÓN LIMPIAR FILTROS (X) ===== */
#clear-filters {
    border-radius: 8px !important;
    border: 1.5px solid #fecaca !important;
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
    padding: 10px 16px !important;
    transition: all 0.2s;
}

#clear-filters:hover {
    background-color: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #b91c1c !important;
}