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

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

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

/* ===== Preview (receiver-box / group-box) ===== */
body.valk-theme .receiver-box,
body.valk-theme .group-box {
    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;
}

/* ========== 7) Formularios ========== */

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

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

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

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