/* =========================================================================
   NUBLAR DESIGN SYSTEM · PUENTE LEGACY (style.css actual de Nublar)
   v1.1 · 2026-10
   -------------------------------------------------------------------------
   Re-estiliza las clases propias del CSS actual (style.css) para que las
   vistas que aún no se han migrado a .nb-* hereden el nuevo lenguaje.
   Es TEMPORAL: cada bloque indica a qué componente .nb-* migrar.
   Cuando una vista esté migrada, sus clases legacy desaparecen y este
   archivo se puede ir recortando hasta eliminarlo.
   Cargar el ÚLTIMO, después de style.css y de los demás archivos nb.
   Solo actúa dentro de .nb-app.
   ========================================================================= */

/* ---------- Base: corrige problemas detectados en style.css ----------
   · body { font-size: 80% } deja el texto a 12,8px: se sube a 14px.
   · placeholders a #ddd no pasan contraste (1,4:1): se suben a --nb-text-3.
   · focus { outline: none } sin alternativa: se añade anillo de foco.     */
.nb-app body,
body.nb-app { font-size: var(--nb-text-base); color: var(--nb-text); background: transparent; }

.nb-app input::placeholder,
.nb-app textarea::placeholder { color: var(--nb-text-3) !important; }

/* :where() + :not([class*="nb-"]) → solo afecta a controles legacy, nunca a .nb-input */
.nb-app :where(
  input[type="text"], input[type="email"], input[type="number"], input[type="password"],
  input[type="phone"], input[type="tel"], input[type="date"], textarea, select
):not([class*="nb-"]) {
  border: 1px solid var(--nb-border-strong);
  border-radius: var(--nb-radius-sm);
  background-color: var(--nb-surface);
  color: var(--nb-text);
  font-family: var(--nb-font-sans);
  font-size: var(--nb-text-base);
  min-height: var(--nb-control-h);
  padding: 0 var(--nb-space-3);
  transition: border-color var(--nb-dur) var(--nb-ease), box-shadow var(--nb-dur) var(--nb-ease);
}
.nb-app :where(textarea):not([class*="nb-"]) { padding: var(--nb-space-3); }
.nb-app :where(select):not([class*="nb-"]) { padding-right: 36px; background-position: right 12px center; }

.nb-app :where(
  input[type="text"], input[type="email"], input[type="number"], input[type="password"],
  input[type="phone"], input[type="tel"], input[type="date"], textarea, select
):not([class*="nb-"]):focus { border-color: var(--nb-accent); box-shadow: var(--nb-focus-ring); }

.nb-app input.error,
.nb-app textarea.error,
.nb-app select.error { border-color: var(--nb-danger-solid); box-shadow: 0 0 0 3px var(--nb-danger-bg); }

.nb-app input[disabled],
.nb-app input[disabled="disabled"] { background: var(--nb-surface-2); color: var(--nb-text-disabled); }

.nb-app button:focus-visible,
.nb-app a:focus-visible { box-shadow: var(--nb-focus-ring); }

/* ---------- .header-section → .nb-page-header ---------- */
.nb-app .header-section h2 { font-size: var(--nb-text-xl); font-weight: var(--nb-weight-bold); letter-spacing: var(--nb-tracking-tight); }
.nb-app .header-section button.crear,
.nb-app .header-section button.configuracion {
  height: var(--nb-control-h);
  padding: 0 var(--nb-space-4);
  border: 0;
  border-radius: var(--nb-radius-sm);
  background: var(--nb-accent);
  color: var(--nb-text-on-accent);
  font-weight: var(--nb-weight-bold);
}
.nb-app .header-section button.crear:hover,
.nb-app .header-section button.configuracion:hover { background: var(--nb-accent-hover); }

/* ---------- .table-holder → .nb-card.nb-table-card ---------- */
.nb-app .table-holder {
  padding: 0;
  border: 1px solid var(--nb-border-subtle);
  border-radius: var(--nb-radius-md);
  background: var(--nb-surface);
  box-shadow: var(--nb-shadow-sm);
  overflow: hidden;
}

/* ---------- .boton / .boton-secundario → .nb-btn ---------- */
.nb-app .boton,
.nb-app .boton-secundario,
.nb-app .boton-pro {
  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-family: var(--nb-font-sans);
  font-size: var(--nb-text-base);
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--nb-dur) var(--nb-ease), border-color var(--nb-dur) var(--nb-ease);
}
.nb-app .boton { border: 1px solid transparent; background: var(--nb-accent); color: var(--nb-text-on-accent); font-weight: var(--nb-weight-bold); }
.nb-app .boton:hover { background: var(--nb-accent-hover); color: var(--nb-text-on-accent); }
.nb-app .boton-secundario { border: 1px solid var(--nb-border-strong); background: var(--nb-surface); color: var(--nb-text); font-weight: var(--nb-weight-medium); }
.nb-app .boton-secundario:hover { background: var(--nb-surface-3); color: var(--nb-text); }
.nb-app .boton-pro { border: 1px solid transparent; background: var(--nb-warning-bg); color: var(--nb-warning-fg); font-weight: var(--nb-weight-bold); }

/* ---------- .tabs / .tab → .nb-tabs / .nb-tab ---------- */
.nb-app .tabs { border-bottom: 1px solid var(--nb-border); gap: var(--nb-space-1); margin-bottom: var(--nb-space-5); }
.nb-app .tabs .tab {
  position: relative;
  padding: 0 var(--nb-space-3);
  height: 42px;
  display: inline-flex; align-items: center;
  border: 0;
  background: transparent;
  color: var(--nb-text-3);
  font-weight: var(--nb-weight-medium);
}
.nb-app .tabs .tab:hover { color: var(--nb-text); }
.nb-app .tabs .tab.active { color: var(--nb-text); background: transparent; }
.nb-app .tabs .tab.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);
}

/* ---------- .lineaDocumento → .nb-table.nb-lines ---------- */
.nb-app .cabeceraRegistros {
  background: var(--nb-surface-2);
  color: var(--nb-text-3);
  font-size: var(--nb-text-xs);
  font-weight: var(--nb-weight-medium);
  border-bottom: 1px solid var(--nb-border);
}
.nb-app .lineaDocumento:nth-child(even),
.nb-app .lineaDocumento:nth-child(odd) { background: var(--nb-surface); }
.nb-app .lineaDocumento { border-bottom: 1px solid var(--nb-border-subtle); }
.nb-app .lineaDocumento:hover { background: var(--nb-surface-2); }

/* ---------- Ayudas y errores con tooltip (.help-user, .formError, .formInfo) ---------- */
.nb-app .help-user i + div,
.nb-app .formInfo i + div {
  background: var(--nb-surface-inverse);
  color: var(--nb-text-on-inverse);
  border-radius: var(--nb-radius-sm);
  box-shadow: var(--nb-shadow-md);
  font-size: var(--nb-text-xs);
  z-index: var(--nb-z-dropdown);
}
.nb-app .formError i + div { background: var(--nb-danger-solid); border-radius: var(--nb-radius-sm); z-index: var(--nb-z-dropdown); }

/* ---------- Select2 → aspecto .nb-select ---------- */
.nb-app .select2-container--default .select2-selection--single,
.nb-app .select2-container--default .select2-selection--multiple {
  min-height: var(--nb-control-h);
  border: 1px solid var(--nb-border-strong);
  border-radius: var(--nb-radius-sm);
  background: var(--nb-surface);
  display: flex; align-items: center;
}
.nb-app .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--nb-text); padding-left: var(--nb-space-3); line-height: normal; }
.nb-app .select2-container--default.select2-container--focus .select2-selection--multiple,
.nb-app .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--nb-accent); box-shadow: var(--nb-focus-ring); }
.nb-app .select2-container--default .select2-selection--multiple .select2-selection__choice {
  border: 0; border-radius: var(--nb-radius-pill);
  background: var(--nb-accent-soft); color: var(--nb-text);
  padding: 2px 10px; font-size: var(--nb-text-sm);
}
.nb-app .select2-dropdown {
  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));
  backdrop-filter: blur(var(--nb-glass-blur));
  box-shadow: var(--nb-shadow-lg);
  overflow: hidden;
  z-index: var(--nb-z-dropdown);
}
.nb-app .select2-results__option { padding: 8px var(--nb-space-3); font-size: var(--nb-text-sm); color: var(--nb-text); }
.nb-app .select2-container--default .select2-results__option--highlighted[aria-selected],
.nb-app .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--nb-accent-soft); color: var(--nb-text); }
.nb-app .select2-container--default .select2-results__option[aria-selected="true"],
.nb-app .select2-container--default .select2-results__option--selected { background: var(--nb-surface-3); color: var(--nb-text); }
.nb-app .select2-search--dropdown .select2-search__field { border-radius: var(--nb-radius-xs); border-color: var(--nb-border-strong); }

/* ---------- DataTables (.dataTable, .dataTables_wrapper, .dt-buttons) → .nb-table ---------- */
.nb-app table.dataTable { border-collapse: separate !important; border-spacing: 0; font-size: var(--nb-text-sm); color: var(--nb-text); }
.nb-app table.dataTable thead th,
.nb-app table.dataTable thead td {
  background: var(--nb-surface-2);
  border-bottom: 1px solid var(--nb-border) !important;
  color: var(--nb-text-3);
  font-size: var(--nb-text-xs);
  font-weight: var(--nb-weight-medium);
  height: 40px;
  padding: 0 var(--nb-space-3);
  white-space: nowrap;
}
.nb-app table.dataTable tbody td { height: 52px; padding: 0 var(--nb-space-3); border-top: 0; border-bottom: 1px solid var(--nb-border-subtle); vertical-align: middle; }
.nb-app table.dataTable.stripe tbody tr.odd,
.nb-app table.dataTable.display tbody tr.odd,
.nb-app table.dataTable tbody tr.even,
.nb-app table.dataTable tbody tr.odd { background: transparent; }
.nb-app table.dataTable.display tbody tr:hover,
.nb-app table.dataTable tbody tr:hover { background: var(--nb-surface-2); }
.nb-app table.dataTable tbody td.sorting_1,
.nb-app table.dataTable.display tbody tr > .sorting_1,
.nb-app table.dataTable.order-column tbody tr > .sorting_1 { background: transparent !important; }
.nb-app table.dataTable tfoot td,
.nb-app table.dataTable tfoot th { background: var(--nb-surface-2); border-top: 1px solid var(--nb-border); font-weight: var(--nb-weight-bold); height: 48px; padding: 0 var(--nb-space-3); }
.nb-app .dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 32px; height: 32px; padding: 0 8px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border: 0 !important; border-radius: 8px !important;
  background: transparent !important; color: var(--nb-text-2) !important;
}
.nb-app .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--nb-surface-3) !important; color: var(--nb-text) !important; }
.nb-app .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--nb-text) !important; color: var(--nb-bg) !important; font-weight: var(--nb-weight-bold); }
.nb-app .dt-buttons .dt-button {
  height: 32px; padding: 0 var(--nb-space-3);
  border: 1px solid var(--nb-border) !important;
  border-radius: var(--nb-radius-sm) !important;
  background: var(--nb-surface) !important;
  color: var(--nb-text-2);
  font-size: var(--nb-text-sm);
}
.nb-app .dt-button-collection { border-radius: var(--nb-radius-sm); background: var(--nb-glass-bg-strong); box-shadow: var(--nb-shadow-lg); }

/* ---------- .drop-zone → .nb-dropzone ---------- */
.nb-app .drop-zone {
  border: 1.5px dashed var(--nb-border-strong);
  border-radius: var(--nb-radius-sm);
  background: var(--nb-surface-2);
  color: var(--nb-text-2);
}
.nb-app .drop-zone:hover,
.nb-app .drop-zone--over { border-color: var(--nb-accent); background: var(--nb-accent-soft); }

/* ---------- #notifications-holder → .nb-drawer ---------- */
.nb-app #notifications-holder {
  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));
  border-left: 1px solid var(--nb-glass-border);
  box-shadow: var(--nb-shadow-lg);
  z-index: var(--nb-z-modal);
}

/* ---------- #preloader ---------- */
.nb-app #preloader {
  background: rgba(0, 20, 18, 0.32);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: var(--nb-z-toast);
}

/* ---------- Menús desplegables de fila (td div.more ul, td div.icono ul) → .nb-menu ---------- */
.nb-app td div.more ul,
.nb-app td div.icono ul {
  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));
  backdrop-filter: blur(var(--nb-glass-blur));
  box-shadow: var(--nb-shadow-lg);
  z-index: var(--nb-z-dropdown);
}
.nb-app td div.more ul li a,
.nb-app td div.icono ul li a { display: flex; align-items: center; gap: var(--nb-space-2); min-height: 34px; padding: 0 var(--nb-space-3); border-radius: 7px; color: var(--nb-text); font-size: var(--nb-text-sm); }
.nb-app td div.more ul li a:hover,
.nb-app td div.icono ul li a:hover { background: var(--nb-surface-3); }

/* ---------- Line Awesome: tamaño coherente dentro de componentes nb ---------- */
.nb-app .nb-btn .las,
.nb-app .nb-btn .lab { font-size: 18px; }
.nb-app .nb-nav-link .las,
.nb-app .nb-nav-link .lab { font-size: 20px; color: var(--nb-text-3); }
.nb-app .nb-nav-link.is-active .las,
.nb-app .nb-nav-link[aria-current="page"] .las { color: var(--nb-accent-strong); }