/* =========================================================================
   NUBLAR DESIGN SYSTEM · PUENTE BOOTSTRAP
   v1.1 · 2026-10
   -------------------------------------------------------------------------
   Re-estiliza las clases nativas de Bootstrap (4.x y 5.x) con los tokens
   de Nublar. Sirve para que las vistas antiguas mejoren de golpe ANTES de
   migrarlas a componentes .nb-*.
   Se activa solo dentro de .nb-app para no afectar a otras páginas.
   Cargar DESPUÉS de bootstrap.css, nublar-tokens.css y nublar.css.
   ========================================================================= */

/* ---------- Variables de Bootstrap 5 mapeadas a tokens ---------- */
.nb-app {
  --bs-body-font-family: var(--nb-font-sans);
  --bs-body-font-size: var(--nb-text-base);
  --bs-body-color: var(--nb-text);
  --bs-body-bg: var(--nb-bg);
  --bs-secondary-color: var(--nb-text-2);
  --bs-tertiary-color: var(--nb-text-3);
  --bs-border-color: var(--nb-border);
  --bs-border-radius: var(--nb-radius-sm);
  --bs-border-radius-lg: var(--nb-radius-md);
  --bs-border-radius-sm: var(--nb-radius-xs);
  --bs-link-color: var(--nb-accent-strong);
  --bs-link-hover-color: var(--nb-accent-strong);
  --bs-link-color-rgb: 29, 138, 126;
  --bs-primary: var(--nb-accent);
  --bs-primary-rgb: 85, 198, 187;
  --bs-danger: var(--nb-danger-solid);
  --bs-danger-rgb: 255, 51, 102;
  --bs-success: var(--nb-success-solid);
  --bs-warning: var(--nb-warning-solid);
  --bs-info: var(--nb-info-solid);
  --bs-focus-ring-color: rgba(85, 198, 187, 0.45);
}

.nb-app body,
body.nb-app { background-color: transparent; }

/* ---------- Tipografía ---------- */
/* Solo encabezados sin clase .nb-*: los componentes (card, modal, overline…) definen su propio tamaño */
.nb-app :where(h1:not([class*="nb-"]), .h1) { font-size: var(--nb-text-xl);  font-weight: var(--nb-weight-bold); letter-spacing: var(--nb-tracking-tight); color: var(--nb-text); }
.nb-app :where(h2:not([class*="nb-"]), .h2) { font-size: var(--nb-text-lg);  font-weight: var(--nb-weight-bold); letter-spacing: var(--nb-tracking-tight); color: var(--nb-text); }
.nb-app :where(h3:not([class*="nb-"]), .h3) { font-size: var(--nb-text-md);  font-weight: var(--nb-weight-bold); color: var(--nb-text); }
.nb-app :where(h4:not([class*="nb-"]), .h4, h5:not([class*="nb-"]), .h5, h6:not([class*="nb-"]), .h6) { font-size: var(--nb-text-base); font-weight: var(--nb-weight-bold); color: var(--nb-text); }
.nb-app .text-muted { color: var(--nb-text-3) !important; }
/* :where() deja la especificidad en 0,1,0 para que los componentes .nb-* manden */
.nb-app :where(a:not([class])) { color: var(--nb-accent-strong); }
.nb-app :where(a:not([class])):hover { color: var(--nb-accent-strong); }

/* ---------- Card ---------- */
.nb-app .card {
  background: var(--nb-surface);
  border: 1px solid var(--nb-border-subtle);
  border-radius: var(--nb-radius-md);
  box-shadow: var(--nb-shadow-sm);
  color: var(--nb-text);
}
.nb-app .card-header,
.nb-app .card-footer { background: transparent; border-color: var(--nb-border-subtle); padding: var(--nb-space-4) var(--nb-space-5); }
.nb-app .card-body { padding: var(--nb-space-5); }
.nb-app .card-title { font-size: var(--nb-text-md); font-weight: var(--nb-weight-bold); }

/* ---------- Botones ---------- */
.nb-app .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--nb-space-2);
  height: var(--nb-control-h);
  padding: 0 var(--nb-space-4);
  border-radius: var(--nb-radius-sm);
  font-size: var(--nb-text-base);
  font-weight: var(--nb-weight-medium);
  line-height: 1;
  box-shadow: none;
  transition: background-color var(--nb-dur) var(--nb-ease), border-color var(--nb-dur) var(--nb-ease), color var(--nb-dur) var(--nb-ease);
}
.nb-app .btn:focus,
.nb-app .btn:focus-visible { box-shadow: var(--nb-focus-ring); }
.nb-app .btn-sm { height: var(--nb-control-h-sm); padding: 0 var(--nb-space-3); font-size: var(--nb-text-sm); }
.nb-app .btn-lg { height: var(--nb-control-h-lg); padding: 0 var(--nb-space-6); font-size: var(--nb-text-md); }

.nb-app .btn-primary,
.nb-app .btn-success,
.nb-app .btn-info {
  background: var(--nb-accent); border-color: transparent; color: var(--nb-text-on-accent); font-weight: var(--nb-weight-bold);
}
.nb-app .btn-primary:hover, .nb-app .btn-primary:active, .nb-app .btn-primary.active,
.nb-app .btn-success:hover, .nb-app .btn-success:active,
.nb-app .btn-info:hover, .nb-app .btn-info:active {
  background: var(--nb-accent-hover); border-color: transparent; color: var(--nb-text-on-accent);
}
.nb-app .btn-secondary,
.nb-app .btn-light,
.nb-app .btn-outline-secondary,
.nb-app .btn-outline-dark,
.nb-app .btn-default {
  background: var(--nb-surface); border: 1px solid var(--nb-border-strong); color: var(--nb-text);
}
.nb-app .btn-secondary:hover,
.nb-app .btn-light:hover,
.nb-app .btn-outline-secondary:hover,
.nb-app .btn-outline-dark:hover,
.nb-app .btn-default:hover { background: var(--nb-surface-3); border-color: var(--nb-border-strong); color: var(--nb-text); }

.nb-app .btn-outline-primary,
.nb-app .btn-outline-success,
.nb-app .btn-outline-info {
  background: var(--nb-accent-soft); border-color: transparent; color: var(--nb-accent-strong);
}
.nb-app .btn-outline-primary:hover,
.nb-app .btn-outline-success:hover,
.nb-app .btn-outline-info:hover { background: var(--nb-accent-soft-2); border-color: transparent; color: var(--nb-accent-strong); }

.nb-app .btn-danger { background: var(--nb-danger-solid); border-color: transparent; color: #fff; }
.nb-app .btn-danger:hover { background: #e62a5a; border-color: transparent; color: #fff; }
.nb-app .btn-outline-danger { background: transparent; border-color: transparent; color: var(--nb-danger-fg); }
.nb-app .btn-outline-danger:hover { background: var(--nb-danger-bg); color: var(--nb-danger-fg); }
.nb-app .btn-link { color: var(--nb-accent-strong); text-decoration: none; height: auto; padding: 0; }

.nb-app .btn-group > .btn:not(:first-child) { margin-left: -1px; }
.nb-app .btn-group > .btn-primary + .dropdown-toggle-split,
.nb-app .btn-group > .btn-primary + .btn-primary { border-left: 1px solid rgba(0, 40, 37, 0.15); }
.nb-app .dropdown-toggle-split { width: var(--nb-control-h); padding: 0; }

/* ---------- Formularios (BS4 y BS5) ---------- */
/* label con especificidad mínima (0,0,1): cualquier componente .nb-* que estilice sus label manda */
:where(.nb-app) label,
.nb-app .form-label,
.nb-app .col-form-label { font-size: var(--nb-text-sm); font-weight: var(--nb-weight-medium); color: var(--nb-text); margin-bottom: 6px; }

.nb-app .form-control,
.nb-app .form-select,
.nb-app .custom-select {
  height: var(--nb-control-h);
  padding: 0 var(--nb-space-3);
  border: 1px solid var(--nb-border-strong);
  border-radius: var(--nb-radius-sm);
  background-color: var(--nb-surface);
  color: var(--nb-text);
  font-size: var(--nb-text-base);
  box-shadow: none;
}
.nb-app textarea.form-control { height: auto; min-height: 96px; padding: var(--nb-space-3); }
.nb-app .form-control::placeholder { color: var(--nb-text-3); opacity: 1; }
.nb-app .form-control:focus,
.nb-app .form-select:focus,
.nb-app .custom-select:focus { border-color: var(--nb-accent); box-shadow: var(--nb-focus-ring); background-color: var(--nb-surface); color: var(--nb-text); }
.nb-app .form-control:disabled,
.nb-app .form-control[readonly] { background-color: var(--nb-surface-2); color: var(--nb-text-2); }
.nb-app .form-control.is-invalid { border-color: var(--nb-danger-solid); }
.nb-app .invalid-feedback { color: var(--nb-danger-fg); font-size: var(--nb-text-xs); }
.nb-app .form-text,
.nb-app small.form-text { color: var(--nb-text-3); font-size: var(--nb-text-xs); }
.nb-app .form-group { margin-bottom: var(--nb-space-4); }
.nb-app .input-group-text { background: var(--nb-surface-2); border-color: var(--nb-border-strong); color: var(--nb-text-2); font-size: var(--nb-text-sm); }

.nb-app .form-check-input,
.nb-app .custom-control-input ~ .custom-control-label::before { border-color: var(--nb-border-strong); }
.nb-app .form-check-input:checked { background-color: var(--nb-accent-strong); border-color: var(--nb-accent-strong); }
.nb-app .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--nb-accent-strong); border-color: var(--nb-accent-strong); }
.nb-app .form-check-input:focus,
.nb-app .custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--nb-focus-ring); }

/* ---------- Tablas ---------- */
.nb-app .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--nb-text);
  --bs-table-hover-bg: var(--nb-surface-2);
  --bs-table-striped-bg: var(--nb-surface-2);
  --bs-table-border-color: var(--nb-border-subtle);
  color: var(--nb-text);
  font-size: var(--nb-text-sm);
  margin-bottom: 0;
}
.nb-app .table thead th {
  background: var(--nb-surface-2);
  border-bottom: 1px solid var(--nb-border);
  border-top: 0;
  color: var(--nb-text-3);
  font-size: var(--nb-text-xs);
  font-weight: var(--nb-weight-medium);
  vertical-align: middle;
  padding: 0 var(--nb-space-3);
  height: 40px;
  white-space: nowrap;
}
.nb-app .table td {
  padding: 0 var(--nb-space-3);
  height: 52px;
  vertical-align: middle;
  border-top: 0;
  border-bottom: 1px solid var(--nb-border-subtle);
}
.nb-app .table-hover tbody tr:hover { background: var(--nb-surface-2); color: var(--nb-text); }
.nb-app .table-striped tbody tr:nth-of-type(odd) { background: transparent; }

/* DataTables (si se usa) */
.nb-app .dataTables_wrapper .dataTables_info { color: var(--nb-text-3); font-size: var(--nb-text-sm); }
.nb-app .dataTables_wrapper .dataTables_filter input { height: var(--nb-control-h-sm); border: 1px solid var(--nb-border-strong); border-radius: var(--nb-radius-sm); padding: 0 var(--nb-space-3); }
.nb-app .dataTables_wrapper .paginate_button { border-radius: 8px !important; border: 0 !important; }
.nb-app .dataTables_wrapper .paginate_button.current { background: var(--nb-text) !important; color: var(--nb-bg) !important; }

/* ---------- Badges (BS4 badge-*, BS5 bg-*) ---------- */
.nb-app .badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px;
  border-radius: var(--nb-radius-pill);
  font-size: var(--nb-text-xs);
  font-weight: var(--nb-weight-bold);
}
.nb-app .badge-primary, .nb-app .badge.bg-primary,
.nb-app .badge-info,    .nb-app .badge.bg-info    { background: var(--nb-accent-soft) !important; color: var(--nb-accent-strong) !important; }
.nb-app .badge-success, .nb-app .badge.bg-success { background: var(--nb-success-bg) !important; color: var(--nb-success-fg) !important; }
.nb-app .badge-warning, .nb-app .badge.bg-warning { background: var(--nb-warning-bg) !important; color: var(--nb-warning-fg) !important; }
.nb-app .badge-danger,  .nb-app .badge.bg-danger  { background: var(--nb-danger-bg) !important;  color: var(--nb-danger-fg) !important; }
.nb-app .badge-secondary, .nb-app .badge.bg-secondary,
.nb-app .badge-light,   .nb-app .badge.bg-light   { background: var(--nb-neutral-bg) !important; color: var(--nb-neutral-fg) !important; }

/* ---------- Dropdowns ---------- */
.nb-app .dropdown-menu {
  padding: var(--nb-space-1);
  border: 1px solid var(--nb-glass-border);
  border-radius: var(--nb-radius-sm);
  background: var(--nb-glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--nb-glass-blur)) saturate(var(--nb-glass-saturate));
  backdrop-filter: blur(var(--nb-glass-blur)) saturate(var(--nb-glass-saturate));
  box-shadow: var(--nb-glass-highlight), 0 0 0 1px var(--nb-glass-edge), var(--nb-shadow-lg);
  font-size: var(--nb-text-sm);
  color: var(--nb-text);
}
.nb-app .dropdown-item { border-radius: 7px; min-height: 34px; display: flex; align-items: center; gap: var(--nb-space-2); padding: 0 var(--nb-space-3); color: var(--nb-text); }
.nb-app .dropdown-item:hover,
.nb-app .dropdown-item:focus { background: var(--nb-surface-3); color: var(--nb-text); }
.nb-app .dropdown-item.active,
.nb-app .dropdown-item:active { background: var(--nb-accent-soft); color: var(--nb-text); }
.nb-app .dropdown-divider { border-color: var(--nb-border-subtle); margin: var(--nb-space-1) 0; }

/* ---------- Modal ---------- */
.nb-app .modal-backdrop.show { opacity: 1; background: rgba(0, 20, 18, 0.36); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.nb-app .modal-content {
  border: 1px solid var(--nb-glass-border);
  border-radius: var(--nb-radius-lg);
  background: var(--nb-glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--nb-glass-blur)) saturate(var(--nb-glass-saturate));
  backdrop-filter: blur(var(--nb-glass-blur)) saturate(var(--nb-glass-saturate));
  box-shadow: var(--nb-glass-highlight), var(--nb-shadow-lg);
  color: var(--nb-text);
}
.nb-app .modal-header,
.nb-app .modal-footer { border-color: var(--nb-border-subtle); padding: var(--nb-space-4) var(--nb-space-6); }
.nb-app .modal-body { padding: var(--nb-space-5) var(--nb-space-6); }
.nb-app .modal-title { font-size: var(--nb-text-lg); font-weight: var(--nb-weight-bold); }

/* ---------- Tabs (nav-tabs) ---------- */
.nb-app .nav-tabs { border-bottom: 1px solid var(--nb-border); gap: var(--nb-space-1); }
.nb-app .nav-tabs .nav-link {
  border: 0; border-radius: 0; background: transparent;
  height: 42px; display: inline-flex; align-items: center;
  padding: 0 var(--nb-space-3);
  color: var(--nb-text-3); font-weight: var(--nb-weight-medium);
  position: relative;
}
.nb-app .nav-tabs .nav-link:hover { color: var(--nb-text); }
.nb-app .nav-tabs .nav-link.active { color: var(--nb-text); background: transparent; }
.nb-app .nav-tabs .nav-link.active::after {
  content: ""; position: absolute; left: var(--nb-space-3); right: var(--nb-space-3); bottom: -1px;
  height: 2px; border-radius: 2px 2px 0 0; background: var(--nb-accent);
}

/* ---------- Paginación ---------- */
.nb-app .pagination { gap: 4px; }
.nb-app .page-link { border: 0; border-radius: 8px !important; min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--nb-text-2); background: transparent; font-size: var(--nb-text-sm); }
.nb-app .page-link:hover { background: var(--nb-surface-3); color: var(--nb-text); }
.nb-app .page-item.active .page-link { background: var(--nb-text); color: var(--nb-bg); }
.nb-app .page-item.disabled .page-link { background: transparent; opacity: 0.4; }

/* ---------- Alertas ---------- */
.nb-app .alert { border: 0; border-radius: var(--nb-radius-sm); font-size: var(--nb-text-sm); padding: var(--nb-space-3) var(--nb-space-4); }
.nb-app .alert-info,
.nb-app .alert-primary { background: var(--nb-info-bg); color: var(--nb-info-fg); }
.nb-app .alert-success { background: var(--nb-success-bg); color: var(--nb-success-fg); }
.nb-app .alert-warning { background: var(--nb-warning-bg); color: var(--nb-warning-fg); }
.nb-app .alert-danger  { background: var(--nb-danger-bg);  color: var(--nb-danger-fg); }

/* ---------- Breadcrumb ---------- */
.nb-app .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: var(--nb-text-sm); }
.nb-app .breadcrumb-item a { color: var(--nb-text-3); text-decoration: none; }
.nb-app .breadcrumb-item.active { color: var(--nb-text); font-weight: var(--nb-weight-medium); }

/* ---------- Utilidades de color de Bootstrap ---------- */
.nb-app .text-primary { color: var(--nb-accent-strong) !important; }
.nb-app .text-success { color: var(--nb-success-fg) !important; }
.nb-app .text-danger  { color: var(--nb-danger-fg) !important; }
.nb-app .text-warning { color: var(--nb-warning-fg) !important; }
.nb-app .bg-white,
.nb-app .bg-light { background-color: var(--nb-surface) !important; }
.nb-app .border { border-color: var(--nb-border) !important; }

/* ---------- jQuery UI datepicker (presente en el proyecto) ---------- */
.nb-app .ui-datepicker {
  padding: var(--nb-space-2);
  border: 1px solid var(--nb-glass-border) !important;
  border-radius: var(--nb-radius-md);
  background: var(--nb-glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(var(--nb-glass-blur));
  backdrop-filter: blur(var(--nb-glass-blur));
  box-shadow: var(--nb-shadow-lg);
  font-family: var(--nb-font-sans);
  font-size: var(--nb-text-sm);
  color: var(--nb-text);
  z-index: var(--nb-z-dropdown) !important;
}
.nb-app .ui-datepicker .ui-widget-header { background: transparent; border: 0; color: var(--nb-text); font-weight: var(--nb-weight-bold); }
.nb-app .ui-datepicker td a,
.nb-app .ui-datepicker td span { border: 0 !important; border-radius: 8px; background: transparent !important; text-align: center; color: var(--nb-text) !important; }
.nb-app .ui-datepicker td a:hover { background: var(--nb-surface-3) !important; }
.nb-app .ui-datepicker td .ui-state-active { background: var(--nb-accent) !important; color: var(--nb-text-on-accent) !important; font-weight: var(--nb-weight-bold); }
.nb-app .ui-datepicker td .ui-state-highlight { box-shadow: inset 0 0 0 1px var(--nb-accent); }