/**
 * StarPlast — Tema global (token principal + WCAG 2.1 AA)
 * ---------------------------------------------------------------------------
 * Se carga en views/modulos/arriba.php DESPUÉS de AdminLTE / DataTables / Select2
 * para que todo "primary" del sistema use el token principal #0D1B2A.
 *
 * Contraste (WCAG 2.1):
 *   texto normal ≥ 4.5:1 · texto grande / bordes / foco ≥ 3:1
 *   #0D1B2A vs #FFF ............ 17.1:1   (botón / fondo primario)
 *   #415A77 vs #FFF ............  7.1:1   (primario suave / hover claro)
 *   #1E7E34 / #117A8B vs #FFF ..  5.1:1 / 5.0:1   (success / info)
 *   #856404 vs #FFF ............  5.9:1   (texto warning)
 *   #9EC5FE vs #343A40 .........  6.5:1   (primario en modo oscuro)
 * ---------------------------------------------------------------------------
 */

:root {
  --sp-color-primary: #0d1b2a;
  --sp-color-primary-hover: #152a45;
  --sp-color-primary-active: #1b263b;
  --sp-color-primary-soft: #415a77;
  --sp-color-primary-tint: rgba(13, 27, 42, 0.08);
  --sp-color-on-primary: #ffffff;
  --sp-color-accent: #fca311;

  --sp-color-success: #1e7e34;
  --sp-color-success-hover: #19692c;
  --sp-color-info: #117a8b;
  --sp-color-info-hover: #0e6674;
  --sp-color-warning-text: #856404;
  --sp-color-danger: #c82333;
  --sp-color-danger-hover: #a71d2a;
  --sp-color-muted: #5a6570;

  /* Foco visible: anillo doble (blanco + primario) ≥ 3:1 sobre cualquier fondo */
  --sp-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--sp-color-primary-soft);

  /* Bootstrap 4 lee estas variables en algunos componentes */
  --primary: var(--sp-color-primary);
  --blue: var(--sp-color-primary);
  --success: var(--sp-color-success);
  --info: var(--sp-color-info);
  --danger: var(--sp-color-danger);
}

body.dark-mode {
  --sp-color-primary: #415a77;
  --sp-color-primary-hover: #4d6a8c;
  --sp-color-primary-active: #56779c;
  --sp-color-primary-soft: #9ec5fe;
  --sp-color-primary-tint: rgba(158, 197, 254, 0.12);
  --sp-color-success: #8fd19e;
  --sp-color-info: #7fd3e0;
  --sp-color-warning-text: #ffd966;
  --sp-color-danger: #f1959b;
  --sp-color-muted: #b4bcc4;
  --sp-focus-ring: 0 0 0 2px #343a40, 0 0 0 4px #9ec5fe;
}

/* ========== 1. Foco visible (2.4.7) ========== */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible,
[tabindex]:focus-visible {
  outline: none !important;
  box-shadow: var(--sp-focus-ring) !important;
}

.form-control:focus,
.custom-select:focus,
.custom-control-input:focus ~ .custom-control-label::before,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--sp-color-primary-soft) !important;
  box-shadow: 0 0 0 0.2rem rgba(65, 90, 119, 0.35) !important;
}

/* ========== 2. Enlaces ========== */
body:not(.dark-mode) .content-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.badge):not([class*="text-"]) {
  color: var(--sp-color-primary-soft);
}

body:not(.dark-mode) .content-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.badge):not([class*="text-"]):hover {
  color: var(--sp-color-primary);
}

/* ========== 3. Botón primario ========== */
.btn-primary {
  color: var(--sp-color-on-primary) !important;
  background-color: var(--sp-color-primary) !important;
  border-color: var(--sp-color-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
  background-color: var(--sp-color-primary-hover) !important;
  border-color: var(--sp-color-primary-hover) !important;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--sp-color-primary-active) !important;
  border-color: var(--sp-color-primary-active) !important;
}

.btn-outline-primary {
  color: var(--sp-color-primary) !important;
  border-color: var(--sp-color-primary) !important;
  background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  color: var(--sp-color-on-primary) !important;
  background-color: var(--sp-color-primary) !important;
  border-color: var(--sp-color-primary) !important;
}

body.dark-mode .btn-outline-primary {
  color: var(--sp-color-primary-soft) !important;
  border-color: var(--sp-color-primary-soft) !important;
}

/* ========== 4. Utilidades primary ========== */
.bg-primary,
.badge-primary,
.label-primary {
  background-color: var(--sp-color-primary) !important;
  color: var(--sp-color-on-primary) !important;
}

a.bg-primary:hover,
a.badge-primary:hover,
a.badge-primary:focus {
  background-color: var(--sp-color-primary-hover) !important;
}

.text-primary {
  color: var(--sp-color-primary) !important;
}

body.dark-mode .text-primary {
  color: var(--sp-color-primary-soft) !important;
}

.border-primary {
  border-color: var(--sp-color-primary) !important;
}

/* Clases propias del sistema (arriba.php) llevadas al token */
.text-blue,
.text-blue-dark,
.text-blue-navy {
  color: var(--sp-color-primary) !important;
}

body.dark-mode .text-blue,
body.dark-mode .text-blue-dark,
body.dark-mode .text-blue-navy {
  color: var(--sp-color-primary-soft) !important;
}

.bg-blue-dark {
  background-color: var(--sp-color-primary) !important;
  color: var(--sp-color-on-primary) !important;
}

/* ========== 5. Cards / modales ========== */
.card-primary:not(.card-outline) > .card-header {
  background-color: var(--sp-color-primary) !important;
  color: var(--sp-color-on-primary) !important;
}

.card-primary:not(.card-outline) > .card-header a,
.card-primary:not(.card-outline) > .card-header .btn-tool {
  color: var(--sp-color-on-primary) !important;
}

.card-primary.card-outline {
  border-top: 3px solid var(--sp-color-primary) !important;
}

body.dark-mode .card-primary.card-outline {
  border-top-color: var(--sp-color-primary-soft) !important;
}

.modal-header.bg-primary .close,
.modal-header.bg-dark .close,
.modal-header.sp-modal-header-corp .close {
  color: #ffffff !important;
  text-shadow: none;
  opacity: 0.9;
}

.modal-header.sp-modal-header-corp,
body.dark-mode .starplast-modulo-ui .modal-header.sp-modal-header-corp {
  background-color: var(--sp-color-primary) !important;
  color: var(--sp-color-on-primary) !important;
}

/* ========== 6. Sidebar / navbar ========== */
[class*="sidebar-light-"] .nav-sidebar > .nav-item > .nav-link.active,
[class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--sp-color-primary) !important;
  color: var(--sp-color-on-primary) !important;
  box-shadow: none;
}

body:not(.dark-mode) .nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
  background-color: var(--sp-color-primary-tint) !important;
  color: var(--sp-color-primary) !important;
  font-weight: 600;
}

body.dark-mode .nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
  background-color: var(--sp-color-primary-tint) !important;
  color: #ffffff !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--sp-color-primary) !important;
  color: var(--sp-color-on-primary) !important;
}

body:not(.dark-mode) .nav-tabs .nav-link.active {
  color: var(--sp-color-primary);
  border-top: 2px solid var(--sp-color-primary);
  font-weight: 600;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--sp-color-primary) !important;
  color: var(--sp-color-on-primary) !important;
}

.dropdown-item.active .text-success,
.dropdown-item:active .text-success {
  color: #ffffff !important;
}

/* ========== 7. Formularios ========== */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--sp-color-primary) !important;
  border-color: var(--sp-color-primary) !important;
}

body.dark-mode .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--sp-color-primary-soft) !important;
  border-color: var(--sp-color-primary-soft) !important;
}

/* Placeholder con contraste AA (el de Bootstrap #6c757d queda justo) */
.form-control::placeholder {
  color: var(--sp-color-muted);
  opacity: 1;
}

/* ========== 8. Tablas, paginación, Select2 ========== */
.page-item.active .page-link {
  background-color: var(--sp-color-primary) !important;
  border-color: var(--sp-color-primary) !important;
  color: var(--sp-color-on-primary) !important;
}

body:not(.dark-mode) .page-link {
  color: var(--sp-color-primary-soft);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--sp-color-primary) !important;
  color: var(--sp-color-on-primary) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--sp-color-primary) !important;
  border-color: var(--sp-color-primary) !important;
  color: var(--sp-color-on-primary) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: rgba(255, 255, 255, 0.85) !important;
}

.progress-bar:not([class*="bg-"]) {
  background-color: var(--sp-color-primary);
}

/* ========== 9. Colores semánticos con contraste AA (modo claro) ========== */
body:not(.dark-mode) .text-success { color: var(--sp-color-success) !important; }
body:not(.dark-mode) .text-info    { color: var(--sp-color-info) !important; }
body:not(.dark-mode) .text-warning { color: var(--sp-color-warning-text) !important; }
body:not(.dark-mode) .text-danger  { color: var(--sp-color-danger) !important; }
body:not(.dark-mode) .text-muted   { color: var(--sp-color-muted) !important; }

body.dark-mode .text-success { color: var(--sp-color-success) !important; }
body.dark-mode .text-info    { color: var(--sp-color-info) !important; }
body.dark-mode .text-warning { color: var(--sp-color-warning-text) !important; }
body.dark-mode .text-danger  { color: var(--sp-color-danger) !important; }
body.dark-mode .text-muted   { color: var(--sp-color-muted) !important; }

/* Fondos con texto blanco: se oscurecen hasta ≥ 4.5:1 */
.btn-success,
.bg-success,
.badge-success {
  background-color: var(--sp-color-success) !important;
  border-color: var(--sp-color-success) !important;
  color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus {
  background-color: var(--sp-color-success-hover) !important;
  border-color: var(--sp-color-success-hover) !important;
}

.btn-info,
.bg-info,
.badge-info {
  background-color: var(--sp-color-info) !important;
  border-color: var(--sp-color-info) !important;
  color: #ffffff !important;
}

.btn-info:hover,
.btn-info:focus {
  background-color: var(--sp-color-info-hover) !important;
  border-color: var(--sp-color-info-hover) !important;
}

.btn-danger,
.bg-danger,
.badge-danger {
  background-color: var(--sp-color-danger) !important;
  border-color: var(--sp-color-danger) !important;
  color: #ffffff !important;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--sp-color-danger-hover) !important;
  border-color: var(--sp-color-danger-hover) !important;
}

/* En modo oscuro los fondos semánticos mantienen el tono AA con texto blanco */
body.dark-mode .btn-success,
body.dark-mode .bg-success,
body.dark-mode .badge-success { background-color: #1e7e34 !important; border-color: #1e7e34 !important; }
body.dark-mode .btn-info,
body.dark-mode .bg-info,
body.dark-mode .badge-info { background-color: #117a8b !important; border-color: #117a8b !important; }
body.dark-mode .btn-danger,
body.dark-mode .bg-danger,
body.dark-mode .badge-danger { background-color: #c82333 !important; border-color: #c82333 !important; }

/* Warning: texto oscuro sobre amarillo (≥ 10:1) */
.btn-warning,
.bg-warning,
.badge-warning {
  color: #1f2d3d !important;
}

/* ========== 10. Movimiento reducido (2.3.3) ========== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
 * Tipografía estándar del sistema (una sola familia y pesos realmente cargados:
 * Source Sans Pro 400 / 600 / 700). No usar 500 ni fuentes monoespaciadas en formularios.
 * ------------------------------------------------------------------------- */
:root {
  --sp-font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sp-fw-regular: 400;
  --sp-fw-semibold: 600;
  --sp-fw-bold: 700;
}
body,
input, select, textarea, button, optgroup,
.form-control, .custom-select, .btn,
.select2-container, .select2-dropdown, .select2-search__field,
.dataTables_wrapper, .modal, .swal2-popup {
  font-family: var(--sp-font-family);
}
/* Etiquetas de formulario: siempre negrita real */
.modal-body label:not(.custom-control-label):not(.custom-file-label):not(.form-check-label),
.form-group > label {
  font-family: var(--sp-font-family);
  font-weight: var(--sp-fw-bold);
}
/* Valores de campos: peso regular */
.form-control, .custom-select, .select2-selection__rendered { font-weight: var(--sp-fw-regular); }
.btn { font-weight: var(--sp-fw-semibold); }


/* ===========================================================================
 * ESTILO PRINCIPAL DE FORMULARIOS Y MODALES (estándar del sistema)
 * Origen: Maestro de artículos. Solo apariencia: no cambia estructura ni lógica.
 * Alcance: .starplast-modulo-ui, .content-wrapper y .modal (algunos modales/páginas no usan el wrapper).
 * ========================================================================= */
:root {
  --sp-field-border: #d5dce4;
  --sp-field-border-hover: #aebdd0;
  --sp-field-bg: #f8fafc;
  --sp-field-bg-ro: #eef1f5;
  --sp-field-text: #1f2d3d;
  --sp-label: #5a6570;
  --sp-icon: #0b3e79;
  --sp-field-h: calc(2rem + 2px);
  --sp-radius: .35rem;
  --sp-modal-header: #0d1b2a;
}

/* ---- Etiquetas ---- */
:is(.starplast-modulo-ui, .content-wrapper, .modal) .modal-body .form-group > label:not(.custom-control-label):not(.custom-file-label):not(.form-check-label),
:is(.starplast-modulo-ui, .content-wrapper, .modal) .modal-body label.text-sm:not(.custom-control-label):not(.custom-file-label):not(.form-check-label),
:is(.starplast-modulo-ui, .content-wrapper, .modal) .card-body .form-group > label:not(.custom-control-label):not(.custom-file-label):not(.form-check-label):not(.mae-lbl) {
  display: flex; align-items: center; gap: .3rem; margin-bottom: .25rem !important;
  font-size: .72rem !important; font-weight: var(--sp-fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--sp-label);
}
:is(.starplast-modulo-ui, .content-wrapper, .modal) .modal-body label [class*="fa"],
:is(.starplast-modulo-ui, .content-wrapper, .modal) .card-body .form-group > label [class*="fa"] { width: 1rem; text-align: center; font-size: .8rem; color: var(--sp-icon); }

/* ---- Campos ---- */
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .form-control:not(textarea):not(.form-control-lg):not(.select2-hidden-accessible),
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .custom-select:not(.custom-select-lg) { height: var(--sp-field-h); }
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .form-control,
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .custom-select {
  border: 1px solid var(--sp-field-border); border-radius: var(--sp-radius);
  background-color: var(--sp-field-bg); color: var(--sp-field-text); font-weight: var(--sp-fw-regular);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) textarea.form-control { height: auto; min-height: var(--sp-field-h); }
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .form-control:hover:not(:disabled):not([readonly]),
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .custom-select:hover:not(:disabled) { border-color: var(--sp-field-border-hover); }
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .form-control:focus,
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .custom-select:focus {
  background-color: #fff; border-color: var(--sp-icon); box-shadow: 0 0 0 .18rem rgba(11, 62, 121, .15);
}
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .form-control:disabled,
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .form-control[readonly] {
  background-color: var(--sp-field-bg-ro); color: var(--sp-field-text); font-weight: var(--sp-fw-bold); letter-spacing: .02em;
}
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .input-group-text {
  background: var(--sp-field-bg-ro); border-color: var(--sp-field-border); color: var(--sp-label); font-size: .78rem;
}
/* Dentro de tablas y controles de DataTables se conserva el tamaño compacto */
:is(.starplast-modulo-ui, .content-wrapper, .modal) table .form-control:not(textarea),
:is(.starplast-modulo-ui, .content-wrapper, .modal) table .custom-select,
:is(.starplast-modulo-ui, .content-wrapper, .modal) .dataTables_wrapper .form-control,
:is(.starplast-modulo-ui, .content-wrapper, .modal) .dataTables_wrapper .custom-select { height: calc(1.8125rem + 2px); }
:is(.starplast-modulo-ui, .content-wrapper, .modal) .dataTables_wrapper .form-control,
:is(.starplast-modulo-ui, .content-wrapper, .modal) .dataTables_wrapper .custom-select { border-radius: var(--sp-radius); }

/* ---- Select2 ---- */
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .select2-container--default .select2-selection--single {
  display: flex; align-items: center; position: relative; padding: 0;
  height: var(--sp-field-h); border: 1px solid var(--sp-field-border); border-radius: var(--sp-radius);
  background-color: var(--sp-field-bg); font-size: .875rem; color: var(--sp-field-text);
}
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .select2-container--default .select2-selection--single .select2-selection__rendered {
  flex: 1 1 auto; min-width: 0; display: block; line-height: 1.2 !important; padding: 0 3.4rem 0 .75rem !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--sp-fw-regular); font-size: .875rem; color: var(--sp-field-text);
}
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .select2-container--default .select2-selection--single .select2-selection__arrow {
  position: absolute; top: 0; right: .25rem; height: 100%; width: 1.5rem; display: flex; align-items: center; justify-content: center;
}
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .select2-container--default .select2-selection--single .select2-selection__arrow b { position: static; margin: 0; }
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .select2-container--default .select2-selection--single .select2-selection__clear {
  position: absolute; top: 50%; right: 1.75rem; transform: translateY(-50%); float: none; margin: 0;
  width: 1.25rem; height: 1.25rem; padding: 0; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: #e3e8ee; color: #495057; font-size: .95rem; font-weight: 700; line-height: 1; cursor: pointer;
}
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .select2-container--default .select2-selection--single .select2-selection__clear:hover { background: #dc3545; color: #fff; }
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .select2-container--default.select2-container--focus .select2-selection--single,
:is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--sp-icon); box-shadow: 0 0 0 .18rem rgba(11, 62, 121, .15);
}
.select2-dropdown { border: 1px solid var(--sp-field-border); border-radius: var(--sp-radius); box-shadow: 0 6px 18px rgba(15, 35, 60, .15); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--sp-icon); }
.select2-search--dropdown .select2-search__field { border: 1px solid var(--sp-field-border); border-radius: .3rem; }

/* ---- Botones ---- */
:is(.starplast-modulo-ui, .content-wrapper, .modal) .btn { border-radius: var(--sp-radius); font-weight: var(--sp-fw-semibold); transition: background-color .15s, border-color .15s, box-shadow .15s, transform .05s; }
:is(.starplast-modulo-ui, .content-wrapper, .modal) .btn:focus { box-shadow: 0 0 0 .18rem rgba(11, 62, 121, .2); }
:is(.starplast-modulo-ui, .content-wrapper, .modal) .btn:active { transform: translateY(1px); }

/* ---- Modales ---- */
:is(.starplast-modulo-ui, .content-wrapper, .modal) .modal-content { border: 0; border-radius: .5rem; overflow: hidden; }
:is(.starplast-modulo-ui, .content-wrapper, .modal) .modal-header.bg-dark,
:is(.starplast-modulo-ui, .content-wrapper, .modal) .modal-header.sp-modal-header-corp { background-color: var(--sp-modal-header) !important; color: #fff; }
:is(.starplast-modulo-ui, .content-wrapper, .modal) .modal-header .modal-title { font-weight: 500; }
:is(.starplast-modulo-ui, .content-wrapper, .modal) .modal-header .close { text-shadow: none; opacity: .9; color: #fff !important; }
:is(.starplast-modulo-ui, .content-wrapper, .modal) .modal-header .close:hover { opacity: 1; }
:is(.starplast-modulo-ui, .content-wrapper, .modal) .modal-footer { background: var(--sp-field-bg); border-top: 1px solid #e1e6ec; }

/* ---- Modo oscuro ---- */
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) .modal-body .form-group > label,
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) .modal-body label.text-sm,
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) .card-body .form-group > label { color: #adb5bd; }
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) .modal-body label [class*="fa"],
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) .card-body .form-group > label [class*="fa"] { color: #8ec5ff; }
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .form-control,
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .custom-select,
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .select2-container--default .select2-selection--single {
  background-color: #343a40 !important; border-color: #495057; color: #e9ecef;
}
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .select2-selection__rendered { color: #e9ecef; }
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .form-control:focus { background-color: #3a4047 !important; border-color: #8ec5ff; box-shadow: 0 0 0 .18rem rgba(142, 197, 255, .2); }
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .form-control:disabled,
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .form-control[readonly] { background-color: #2b3035 !important; color: #8ec5ff; }
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) :is(.modal-body, .card-body) .input-group-text { background: #3a4047; border-color: #495057; color: #ced4da; }
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) .modal-header.bg-dark,
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) .modal-header.sp-modal-header-corp { background-color: #0e2447 !important; border-bottom: 1px solid rgba(0, 0, 0, .35); }
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) .modal-footer { background: #2b3035; border-color: #454d55; }
body.dark-mode .select2-dropdown { border-color: #495057; }
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) .select2-selection__clear { background: #495057 !important; color: #e9ecef !important; }

/* ---- Filtros de rango en cabeceras de tarjeta: sin barra de scroll interna ----
 * Con campos de 34px y botones semibold la fila superaba el ancho disponible y el contenedor
 * (overflow-x:auto) mostraba un scroll que tapaba los controles. Ahora la fila pasa a otra línea si no cabe. */
:is(.starplast-modulo-ui, .content-wrapper, .modal) .ic-header-rango,
:is(.starplast-modulo-ui, .content-wrapper, .modal) .card-header .nav.nav-pills > .nav-item.d-flex {
  flex-wrap: wrap !important; overflow: visible !important; gap: .35rem .5rem; row-gap: .35rem;
}
:is(.starplast-modulo-ui, .content-wrapper, .modal) .ic-header-rango > * { margin-top: 0; margin-bottom: 0; }
:is(.starplast-modulo-ui, .content-wrapper, .modal) .ic-header-rango input[type="date"] { min-width: 9.25rem; width: auto; flex: 0 0 auto; }
:is(.starplast-modulo-ui, .content-wrapper, .modal) .card-header .form-control,
:is(.starplast-modulo-ui, .content-wrapper, .modal) .card-header .custom-select { height: var(--sp-field-h); border: 1px solid var(--sp-field-border); border-radius: var(--sp-radius); background-color: var(--sp-field-bg); }
:is(.starplast-modulo-ui, .content-wrapper, .modal) .card-header .form-control-sm:not(.ic-x) { font-size: .875rem; }

/* ---- Fondo estándar de campos aunque la vista use .bg-light (Bootstrap #f8f9fa) ---- */
:is(.starplast-modulo-ui, .content-wrapper, .modal) .form-control.bg-light:not([readonly]):not(:disabled):not(.pop-mini-val):not(.pop-neto-val),
:is(.starplast-modulo-ui, .content-wrapper, .modal) select.custom-select.bg-light,
:is(.starplast-modulo-ui, .content-wrapper, .modal) select.form-control.bg-light { background-color: var(--sp-field-bg) !important; }
:is(.starplast-modulo-ui, .content-wrapper, .modal) .form-control.bg-light:focus { background-color: #fff !important; }
:is(.starplast-modulo-ui, .content-wrapper, .modal) .form-control.bg-light[readonly]:not(.pop-mini-val):not(.pop-neto-val),
:is(.starplast-modulo-ui, .content-wrapper, .modal) .form-control.bg-light:disabled { background-color: var(--sp-field-bg-ro) !important; }
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) .form-control.bg-light:not([readonly]):not(:disabled):not(.pop-mini-val):not(.pop-neto-val),
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) select.bg-light { background-color: #343a40 !important; }
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) .form-control.bg-light[readonly]:not(.pop-mini-val):not(.pop-neto-val),
body.dark-mode :is(.starplast-modulo-ui, .content-wrapper, .modal) .form-control.bg-light:disabled { background-color: #2b3035 !important; }
/* Campos con borde de color semántico (precio, etc.) conservan su color; el resto toma el borde estándar */
:is(.starplast-modulo-ui, .content-wrapper, .modal) .proc-op-input:not(.txt-cons-calc):not(.pop-mini-val):not(.pop-neto-val) { border-color: var(--sp-field-border); }
:is(.starplast-modulo-ui, .content-wrapper, .modal) .input-group-sm > .form-control:not(textarea),
:is(.starplast-modulo-ui, .content-wrapper, .modal) .input-group-sm > .custom-select { height: var(--sp-field-h); border-color: var(--sp-field-border); }
:is(.starplast-modulo-ui, .content-wrapper, .modal) .modal-footer .form-control:not(textarea):not(.form-control-lg) { height: var(--sp-field-h); border: 1px solid var(--sp-field-border); border-radius: var(--sp-radius); }
:is(.starplast-modulo-ui, .content-wrapper, .modal) .proc-op-input:not(.txt-cons-calc):not(.pop-mini-val):not(.pop-neto-val) { border-color: var(--sp-field-border) !important; }

/* ---- Scroll de modales ----
 * html tiene overflow-x:hidden (arriba.php), lo que impide que 'body.modal-open{overflow:hidden}'
 * se propague al viewport: la página de atrás seguía haciendo scroll y el modal lo perdía. */
html:has(body.modal-open) { overflow: hidden; }
body.modal-open { overflow: hidden; }
.modal { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal-dialog-scrollable .modal-body { overscroll-behavior: contain; }

/* ===========================================================================
 * PESTAÑAS (nav-tabs) — estándar del sistema (origen: Datos de la sociedad)
 * Pestaña activa con borde superior oscuro, fondo blanco y peso 600; inactivas en azul.
 * Se impone sobre variantes locales de cada vista. Excluye los chips de Programación (.prog-tabs).
 * ========================================================================= */
:root {
  --sp-tab-active: #0d1b2a;
  --sp-tab-link: #0b63ce;       /* 5.6:1 sobre blanco (AA) */
  --sp-tab-link-hover: #084a9c;
  --sp-tab-line: #dee2e6;
}
.nav.nav-tabs:not(.prog-tabs) { border-bottom: 1px solid var(--sp-tab-line); }
.nav.nav-tabs:not(.prog-tabs) .nav-link {
  display: inline-block;
  padding: .5rem 1rem !important;
  font-size: .875rem !important;
  font-weight: var(--sp-fw-regular, 400);
  letter-spacing: normal;
  color: var(--sp-tab-link);
  background-color: transparent;
  border: 1px solid transparent !important;
  border-radius: .25rem .25rem 0 0 !important;
  margin-bottom: -1px !important;
  transition: color .15s, background-color .15s, border-color .15s;
}
.nav.nav-tabs:not(.prog-tabs) .nav-link:hover:not(.active) {
  color: var(--sp-tab-link-hover);
  border-color: #e9ecef #e9ecef var(--sp-tab-line) !important;
}
.nav.nav-tabs:not(.prog-tabs) .nav-link.active,
.nav.nav-tabs:not(.prog-tabs) .nav-item.show .nav-link {
  color: var(--sp-tab-active) !important;
  font-weight: var(--sp-fw-semibold, 600) !important;
  background-color: #fff !important;
  border-color: var(--sp-tab-line) var(--sp-tab-line) #fff !important;
  border-top: 2px solid var(--sp-tab-active) !important;
}
.nav.nav-tabs:not(.prog-tabs) .nav-link > i,
.nav.nav-tabs:not(.prog-tabs) .nav-link > svg { color: inherit !important; margin-right: .25rem; }
.nav.nav-tabs:not(.prog-tabs) .nav-link.disabled,
.nav.nav-tabs:not(.prog-tabs) .nav-link.proceso-tab-deshabilitado { color: #6c757d; opacity: .65; }
.nav.nav-tabs:not(.prog-tabs) .nav-link:focus-visible { outline: 2px solid var(--sp-tab-active); outline-offset: -2px; }

body.dark-mode .nav.nav-tabs:not(.prog-tabs) { border-bottom-color: #495057; }
body.dark-mode .nav.nav-tabs:not(.prog-tabs) .nav-link { color: #8ec5ff !important; }
body.dark-mode .nav.nav-tabs:not(.prog-tabs) .nav-link:hover:not(.active) { color: #cfe6ff !important; border-color: #3a4047 #3a4047 #495057 !important; }
body.dark-mode .nav.nav-tabs:not(.prog-tabs) .nav-link.active,
body.dark-mode .nav.nav-tabs:not(.prog-tabs) .nav-item.show .nav-link {
  color: #fff !important; background-color: #2b3035 !important;
  border-color: #495057 #495057 #2b3035 !important; border-top: 2px solid #8ec5ff !important;
}
@media (prefers-reduced-motion: reduce) { .nav.nav-tabs .nav-link { transition: none; } }