/* bitiobill: colores del logo (azul marino #2B3990, cian #00AEEF) sobre el tema Spike.
   El primario de Spike ya viene reemplazado en spike/css/styles.css. */

:root {
    --bb-navy: #2B3990;
    --bb-navy-dark: #232F78;
    --bb-cyan: #00AEEF;
}

/* Logo: icono + palabra con los dos tonos del logo original */
.bb-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.bb-logo img { display: block; }
.bb-logo .bb-word { font-weight: 700; letter-spacing: -0.5px; line-height: 1; }
.bb-logo .bb-word .c1 { color: var(--bb-cyan); }
.bb-logo .bb-word .c2 { color: var(--bb-navy); }

/* Sidebar: icono solo cuando se encoge */
.logo-mini { display: none; }
body[data-sidebartype="mini-sidebar"] .left-sidebar .logo-full { display: none; }
body[data-sidebartype="mini-sidebar"] .left-sidebar .logo-mini { display: inline-flex; }
body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .logo-full { display: inline-flex; }
body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .logo-mini { display: none; }
.left-sidebar .scroll-sidebar { height: calc(100% - 84px); }
#sidebarnav { padding-bottom: 24px; }

/* Compatibilidad con el JS existente, que usa la clase "hidden" de Bootstrap 3 */
.hidden { display: none !important; }

.form-control::placeholder { color: var(--bs-secondary-color); }

/* Login */
.bb-login-bg {
    background: linear-gradient(135deg, rgba(43, 57, 144, 0.08), rgba(0, 174, 239, 0.10));
}
.bb-login .widget-box { display: none; }
.bb-login .widget-box.visible { display: block; }

/* Indicador de timbres en la barra superior */
.bb-timbres .progress { height: 6px; }

/* ---- validacionesFmw.js con select2 3.x ----
   El select original queda oculto despues del contenedor de select2: se pinta el contenedor. */
.select2-container:has(+ select.is-invalid) .select2-choice { border-color: var(--bs-danger); }
.select2-container:has(+ select.is-valid) .select2-choice { border-color: var(--bs-success); }
select.select2 ~ .invalid-feedback { margin-top: 0.25rem; }

/* select2 3.x con la altura y bordes de los inputs de Bootstrap 5 */
.select2-container { max-width: 100%; }
.select2-container .select2-choice {
    height: 38px; line-height: 36px; border-radius: var(--bs-border-radius);
    border: var(--bs-border-width) solid var(--bs-border-color); background: var(--bs-body-bg);
    background-image: none; box-shadow: none;
}
.select2-container .select2-choice .select2-arrow { background: transparent; border-left: 0; }
.select2-container .select2-choice .select2-arrow b { background-position: 0 6px; }
.select2-container-active .select2-choice { border-color: var(--bb-navy); box-shadow: 0 0 0 0.2rem rgba(43, 57, 144, 0.15); }

/* Tablas: DataTables 1.13 + Bootstrap 5, letra chica como en xentrix y sin scroll horizontal */
.dataTables_wrapper > .row { --bs-gutter-x: 0; margin-left: 0; margin-right: 0; row-gap: .5rem; }
.dataTables_wrapper > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
.dataTables_wrapper .dataTables_filter input { width: 180px; display: inline-block; }
table.dataTable { width: 100% !important; margin-top: .5rem !important; }
table.dataTable th, table.dataTable td, .bb-tabla th, .bb-tabla td { font-size: 12px; vertical-align: middle; }
table.dataTable thead th, .bb-tabla thead th { white-space: nowrap; font-weight: 600; }
.table-responsive { overflow-x: auto; }
.table-responsive > .dataTables_wrapper { min-width: 0; }
td.bb-wrap, .bb-wrap { white-space: normal; word-break: break-word; }
/* Menu de acciones por renglon (patron de xentrix) */
.bb-row-menu > a { color: var(--bs-secondary-color); }
.bb-row-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; font-size: 13px; }
.bb-row-menu .dropdown-item i { font-size: 1.05rem; }

/* Etiquetas de estatus que vienen de la base de datos con nombres del tema anterior (label-*, infobox-*) */
.label { display: inline-block; padding: 0.3em 0.6em; font-size: 0.75em; font-weight: 600; line-height: 1; color: #fff; border-radius: var(--bs-border-radius-pill); background: var(--bs-secondary-color); white-space: nowrap; }
.label-success, .infobox-green, .infobox-green2 { --bb-st: var(--bs-success); }
.label-warning, .infobox-orange, .infobox-orange2, .label-yellow, .infobox-wood { --bb-st: var(--bs-warning); }
.label-danger, .label-important, .infobox-red, .infobox-pink, .label-pink { --bb-st: var(--bs-danger); }
.label-info, .infobox-blue, .infobox-blue2, .infobox-blue3 { --bb-st: var(--bb-cyan); }
.label-primary, .infobox-purple, .label-purple { --bb-st: var(--bb-navy); }
.label-inverse, .label-grey, .label-default, .infobox-grey, .infobox-black, .infobox-brown { --bb-st: #6c757d; }
.label[class*="label-"] { background: var(--bb-st); }
.bb-stat { border-left: 4px solid var(--bb-st, var(--bb-navy)); }

/* Asistente por pasos (alta de empresa) */
.bb-wizard .nav-link { color: var(--bs-secondary-color); cursor: default; }
.bb-wizard .nav-link.active { background: var(--bb-navy); color: #fff; }
.bb-wizard .nav-link.bb-step-done { color: var(--bb-navy); }
.bb-step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; font-size: 12px; margin-right: 4px; }

/* select2 3.x multiple con el estilo de Bootstrap 5 */
.select2-container-multi .select2-choices { min-height: 38px; border-radius: var(--bs-border-radius); border: var(--bs-border-width) solid var(--bs-border-color); background-image: none; }
.select2-container-multi .select2-choices .select2-search-choice { background: rgba(43, 57, 144, 0.1); border-color: rgba(43, 57, 144, 0.3); color: var(--bb-navy); background-image: none; box-shadow: none; }
.select2-container-multi:has(+ select.is-invalid) .select2-choices { border-color: var(--bs-danger); }
.select2-container-multi:has(+ select.is-valid) .select2-choices { border-color: var(--bs-success); }

/* ---- Compatibilidad del marcado anterior (Ace / Bootstrap 3) ----
   Solo aplica dentro de .bb-legacy (pantallas de comprobantes convertidas con legacyShim.js). */
.bb-legacy .widget-box { background: var(--bs-body-bg); border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); margin-bottom: 1.5rem; box-shadow: var(--bs-box-shadow-sm); }
.bb-legacy .widget-box.transparent { border: 0; background: transparent; box-shadow: none; margin-bottom: .5rem; }
.bb-legacy .widget-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
.bb-legacy .widget-box.transparent .widget-header { border: 0; padding: 0; }
.bb-legacy .widget-header h3, .bb-legacy .widget-header h4, .bb-legacy .widget-header h5 { margin: 0; font-weight: 600; font-size: 1.05rem; float: none; }
.bb-legacy .widget-toolbar { display: none; }
.bb-legacy .widget-main { padding: 1rem; }
.bb-legacy .page-header h1 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; }
.bb-legacy .table-header { background: var(--bb-navy); color: #fff; padding: .5rem .75rem; border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0; font-weight: 600; }
.bb-legacy .table-responsive { background: var(--bs-body-bg); }
.bb-legacy .form-group { display: flex; flex-wrap: wrap; margin-bottom: .75rem; }
.bb-legacy .form-group > [class*="col-"] { padding-left: .5rem; padding-right: .5rem; }
.bb-legacy .control-label { padding-top: calc(.375rem + 1px); font-weight: 500; }
@media (min-width: 576px) { .bb-legacy .control-label { text-align: end; } }
.bb-legacy input[type=text], .bb-legacy input[type=email], .bb-legacy input[type=number], .bb-legacy input[type=password], .bb-legacy textarea, .bb-legacy select:not(.select2):not([multiple]) {
    display: block; width: 100%; padding: .375rem .75rem; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--bs-body-bg); color: var(--bs-body-color);
}
.bb-legacy .input-group > input { width: 1% !important; flex: 1 1 auto; }
.bb-legacy .center { text-align: center; }
.bb-legacy .well { background: var(--bs-light); padding: 1rem; border-radius: var(--bs-border-radius); }
.bb-legacy .space-2 { height: .25rem; } .bb-legacy .space-4, .bb-legacy .space-6 { height: .5rem; }
.bb-legacy .space, .bb-legacy .space-8, .bb-legacy .space-10 { height: .75rem; }
.bb-legacy [class^="space-1"], .bb-legacy [class^="space-2"], .bb-legacy [class^="space-3"] { min-height: .25rem; }
.bb-legacy .hr { border-top: var(--bs-border-width) solid var(--bs-border-color); margin: .75rem 0; height: 0; }
.bb-legacy .hr-dotted { border-top-style: dotted; }
.bb-legacy .action-buttons a { margin: 0 .2rem; text-decoration: none; font-size: 1.05rem; }
.bb-legacy .infobox { display: inline-flex; align-items: center; gap: .75rem; min-width: 210px; padding: .75rem 1rem; margin: 0 .5rem .5rem 0; border-radius: var(--bs-border-radius-lg); border-left: 4px solid var(--bb-st, var(--bb-navy)); background: var(--bs-body-bg); box-shadow: var(--bs-box-shadow-sm); }
.bb-legacy .infobox-icon i { font-size: 1.5rem; color: var(--bb-st, var(--bb-navy)); }
.bb-legacy .infobox-content:first-child { color: var(--bs-secondary-color); font-size: .85rem; }
.bb-legacy .infobox-content + .infobox-content { font-weight: 600; font-size: 1.1rem; }
.bb-legacy .green { color: var(--bs-success); } .bb-legacy .blue { color: var(--bb-navy); } .bb-legacy .red { color: var(--bs-danger); }
.bb-legacy .orange { color: #fd7e14; } .bb-legacy .grey { color: #6c757d; } .bb-legacy .purple { color: #6f42c1; }
.bb-legacy .black { color: var(--bs-body-color); } .bb-legacy .light-blue { color: var(--bb-cyan); } .bb-legacy .white { color: #fff; }
.bb-legacy .bigger-110 { font-size: 110%; } .bb-legacy .bigger-120 { font-size: 120%; } .bb-legacy .bigger-125 { font-size: 125%; }
.bb-legacy .bigger-130 { font-size: 130%; } .bb-legacy .bigger-140 { font-size: 140%; } .bb-legacy .bigger-150 { font-size: 150%; } .bb-legacy .bigger-160 { font-size: 160%; }
.bb-legacy .lighter { font-weight: 400; } .bb-legacy .bolder { font-weight: 600; }
.hide { display: none !important; }
/* Visibilidad responsiva de Bootstrap 3 */
.bb-legacy .visible-xs, .bb-legacy .visible-sm, .bb-legacy .visible-md, .bb-legacy .visible-lg { display: none !important; }
@media (max-width: 767.98px) { .bb-legacy .visible-xs { display: block !important; } .bb-legacy .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .bb-legacy .visible-sm { display: block !important; } .bb-legacy .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .bb-legacy .visible-md { display: block !important; } .bb-legacy .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .bb-legacy .visible-lg { display: block !important; } .bb-legacy .hidden-lg { display: none !important; } }
/* Formularios de los dialogos anteriores (tablas EditTable dentro del modal) */
.bb-legacy-dialog .EditTable { width: 100%; }
.bb-legacy-dialog .EditTable td { padding: .35rem .25rem; vertical-align: middle; }
.bb-legacy-dialog .CaptionTD { width: 35%; font-weight: 500; }
.bb-legacy-dialog .FormElement, .bb-legacy-dialog input[type=text], .bb-legacy-dialog input[type=email], .bb-legacy-dialog select:not(.select2), .bb-legacy-dialog textarea {
    width: 100%; padding: .375rem .75rem; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius);
}
/* Dentro de un input-group el ancho lo reparte flex (igual que .bb-legacy arriba) */
.bb-legacy-dialog .input-group > input, .bb-legacy-dialog .input-group > select, .bb-legacy-dialog .input-group > textarea { width: 1% !important; flex: 1 1 auto; }
.bb-legacy-dialog .input-group > :not(:first-child):not(.dropdown-menu) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.bb-legacy-dialog .input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Acciones de tabla */
.bb-actions a { font-size: 1.15rem; margin-right: 0.5rem; text-decoration: none; }

/* Iconos de validacion que agregan los scripts legacy dentro de .input-icon */
.bb-legacy .input-icon { position: relative; display: block; }
.bb-legacy .input-icon > i { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.bb-legacy .input-icon > i.icon-ok-sign { color: #13deb9; }
.bb-legacy .input-icon > i.icon-remove-sign { color: #fa896b; }
.bb-legacy .has-error .form-control { border-color: #fa896b; }
.bb-comprobante .bb-totales .form-control[readonly] { background: var(--bs-light, #f6f9fc); }

/* Dialogo de pedimentos del alta de comprobante */
.bb-aduanas #tAduanas td { font-size: .875rem; vertical-align: middle; }
.bb-aduanas #tAduanas .action-buttons { display: flex !important; justify-content: center; gap: .5rem; }
.bb-aduanas #tAduanas .action-buttons a { font-size: 1.15rem; margin: 0; }

/* Cargando con el logo ondeando (comun/Scripts/bbLoading.js) */
.bb-loading-host:not(.offcanvas) { position: relative; }
.bb-loading { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
    background: rgba(255,255,255,.88); border-radius: inherit; backdrop-filter: blur(2px); }
.bb-loading-page { position: fixed; z-index: 2000; border-radius: 0; }
.bb-loading-flag { position: relative; width: 130px; animation: bbPulso 1.8s ease-in-out infinite; }
.bb-loading-flag img, .bb-loading-shine { display: block; width: 130px; height: auto; aspect-ratio: 341 / 235;
    transform-origin: 0% 50%; animation: bbOnda 1.6s ease-in-out infinite; backface-visibility: hidden; }
.bb-loading-shine { position: absolute; inset: 0; pointer-events: none;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.65) 48%, transparent 66%) no-repeat;
    background-size: 250% 100%; animation: bbOnda 1.6s ease-in-out infinite, bbBrillo 1.6s linear infinite; }
.bb-loading-text { color: var(--bb-navy); font-weight: 600; letter-spacing: .2px; }
@keyframes bbPulso { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes bbOnda { 0%,100% { transform: skewY(0deg) scaleX(1); } 25% { transform: skewY(-4deg) scaleX(.96); } 50% { transform: skewY(0deg) scaleX(1); } 75% { transform: skewY(4deg) scaleX(.97); } }
@keyframes bbBrillo { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .bb-loading-flag, .bb-loading-flag img, .bb-loading-shine { animation: none; } }
/* Spike trae reglas ".table-responsive .dataTables_wrapper ..." para el estilo clasico de DataTables;
   con la integracion Bootstrap 5 (page-item/page-link, form-select) dibujan doble caja y encimaban la flecha */
.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.page-item { padding: 0; border: 0; margin: 0 2px; background: none; }
.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.page-item .page-link { border-radius: var(--bs-border-radius); }
.table-responsive .dataTables_wrapper .dataTables_length select.form-select { padding-right: 2rem; min-width: 4.5rem; margin: 0 .35rem; background-position: right .5rem center; }

/* Complemento masivo: facturas marcadas y abono por factura */
#tComprobantes tbody tr.bb-fila-sel > td{box-shadow:inset 0 0 0 9999px rgba(0,174,239,.08)}
#tComprobantes .bb-abono{min-width:7.5rem}

/* Modal de cierre: saldo pendiente siempre visible */
.bb-saldo-info{padding:.75rem 1rem;border-radius:var(--bs-border-radius-lg,.5rem);background:rgba(43,57,144,.08);border:1px solid rgba(43,57,144,.18);color:#2B3990}
.bb-saldo-info .bb-saldo-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;opacity:.8}
.bb-saldo-info .bb-saldo-monto{font-size:1.6rem;font-weight:700;line-height:1.2}