/* ==========================================================================
   NEWSON OVERRIDE  ·  Puente entre el markup existente y el design system
   Cargar SIEMPRE al final. Reescribe las clases antiguas de todos los
   micro-sistemas para que hereden el tema futurista y sean responsive.
   ========================================================================== */

/* ============================================================ 0. BASE */
html,body{
  background:var(--ns-bg) !important;
  color:var(--ns-text) !important;
  font-family:var(--ns-font) !important;
  overflow-x:hidden;
}
body::before{ /* fondo aurora en páginas que no incluyen .ns-bg */
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 620px at 12% -8%,  rgba(var(--ns-brand-rgb),.15), transparent 62%),
    radial-gradient(1000px 560px at 92% 4%,   rgba(var(--ns-cyan-rgb),.12),  transparent 60%),
    radial-gradient(900px 700px  at 50% 110%, rgba(var(--ns-violet-rgb),.12),transparent 62%),
    var(--ns-bg);
}
h1,h2,h3,h4,h5{ font-family:var(--ns-font-display) !important; color:var(--ns-text) !important; letter-spacing:-.015em; }

/* imágenes de fondo decorativas fuera: ahora hay datos */
.imagen-fondo,.imagen-panel,.panel-fondo,.panel-rrhh-hero > img,
.main-panel > .imagen-panel{ display:none !important; }

/* ==================================================== 1. NAVBAR LEGADO */
nav.navbar{
  position:fixed !important; top:0; left:0; right:0; z-index:900;
  display:flex !important; align-items:center; gap:var(--ns-4);
  height:var(--ns-nav-h) !important; min-height:var(--ns-nav-h);
  padding:0 clamp(12px,2.6vw,26px) !important;
  background:rgba(8,13,26,.74) !important;
  border-bottom:1px solid var(--ns-border) !important;
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  box-shadow:none !important;
}
[data-theme="light"] nav.navbar{ background:rgba(255,255,255,.84) !important; }
nav.navbar::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--ns-grad-line); opacity:.6;
}
nav.navbar .navbar-logo{ display:flex; align-items:center; flex:0 0 auto; }
nav.navbar .navbar-logo img{
  height:34px !important; width:auto !important; object-fit:contain;
  filter:drop-shadow(0 3px 10px rgba(var(--ns-brand-rgb),.35));
}
nav.navbar .navbar-menu{
  display:flex; align-items:center; gap:4px;
  list-style:none; margin:0 0 0 auto !important; padding:0 !important;
  background:none !important;
}
nav.navbar .navbar-menu li{ list-style:none; }
nav.navbar .navbar-menu a{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px !important; border-radius:var(--ns-r-xs) !important;
  font-size:var(--ns-fs-md) !important; font-weight:600 !important;
  color:var(--ns-text-2) !important; white-space:nowrap;
  background:transparent !important; border:1px solid transparent !important;
  transition:all var(--ns-t); text-transform:none !important;
}
nav.navbar .navbar-menu a:hover{ color:var(--ns-text) !important; background:var(--ns-surface-2) !important; }
nav.navbar .navbar-menu a.active,
nav.navbar .navbar-menu a.activo{
  color:var(--ns-brand) !important;
  background:rgba(var(--ns-brand-rgb),.12) !important;
  border-color:rgba(var(--ns-brand-rgb),.26) !important;
}
nav.navbar .navbar-menu a.logout,
nav.navbar a.logout{
  color:var(--ns-danger) !important;
  border:1px solid rgba(var(--ns-danger-rgb),.26) !important;
  background:rgba(var(--ns-danger-rgb),.09) !important;
}
nav.navbar .navbar-menu a.logout:hover,
nav.navbar a.logout:hover{ background:rgba(var(--ns-danger-rgb),.18) !important; }

/* botón hamburguesa del header legado */
nav.navbar .navbar-toggle{
  display:none; width:44px; height:44px; flex:0 0 44px; margin-left:auto;
  border-radius:var(--ns-r-sm) !important; border:1px solid var(--ns-border) !important;
  background:var(--ns-surface-2) !important; color:var(--ns-text) !important;
  font-size:1.05rem; place-items:center; cursor:pointer;
}
@media (max-width:1023px){
  nav.navbar .navbar-toggle{ display:grid !important; }
  nav.navbar .navbar-menu{
    position:fixed; top:var(--ns-nav-h); right:0;
    width:min(340px,88vw); height:calc(100dvh - var(--ns-nav-h));
    flex-direction:column; align-items:stretch; gap:6px;
    padding:var(--ns-5) var(--ns-4) var(--ns-12) !important;
    margin:0 !important;
    background:var(--ns-elevated) !important;
    border-left:1px solid var(--ns-border-2);
    box-shadow:-24px 0 60px rgba(0,0,0,.5);
    transform:translateX(102%);
    transition:transform var(--ns-t-slow);
    overflow-y:auto; z-index:901;
  }
  nav.navbar .navbar-menu.show,
  nav.navbar.is-open .navbar-menu{ transform:none; }
  nav.navbar .navbar-menu a{
    padding:15px 16px !important; min-height:50px;
    font-size:var(--ns-fs-base) !important;
    border:1px solid var(--ns-border) !important;
    background:var(--ns-surface) !important;
    border-radius:var(--ns-r-sm) !important;
  }
}

/* deja aire bajo el navbar fijo */
body{ padding-top:var(--ns-nav-h); }
body.login-page,
body:has(> .login-box),
body:not(:has(nav.navbar)):not(:has(.ns-nav)){ padding-top:0; }

/* =============================================== 2. CONTENEDORES */
.container,.main,.main-panel,.main-usuarios,.main-historial,
.contenido-principal,.container-dashboard,.container-detalle,
.panel-contenido,.contenedor-bajas,.logi-page,.board,.page{
  max-width:min(1840px,96vw) !important;
  margin-inline:auto !important;
  padding:clamp(14px,2.6vw,26px) !important;
  width:100%;
  background:none !important;
  box-shadow:none !important;
}
.main-panel{ min-height:auto !important; }

/* ==================================================== 3. TARJETAS */
.card,.usuarios-card,.seccion-card,.req-card,.order-card,.document-card,
.file-box,.doc-item,.item-block,.info-wrap,.chart-wrap,.grafico,
.summary,.detalle-item,.table-wrap,.tabla-wrapper{
  background:var(--ns-surface) !important;
  border:1px solid var(--ns-border) !important;
  border-radius:var(--ns-r-lg) !important;
  box-shadow:var(--ns-shadow-sm), var(--ns-inset) !important;
  backdrop-filter:blur(var(--ns-blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--ns-blur)) saturate(150%);
  color:var(--ns-text) !important;
}
.card-head,.card__head,.usuarios-header,.seccion-header,.doc-head,
.section-head,.board-header,.detalle-head,.header-wrap,.modal-head{
  border-bottom:1px solid var(--ns-border) !important;
  color:var(--ns-text) !important;
  background:transparent !important;
}
.card-total,.kpi{
  background:var(--ns-surface) !important;
  border:1px solid var(--ns-border) !important;
  border-radius:var(--ns-r-md) !important;
  box-shadow:var(--ns-shadow-sm) !important;
  position:relative; overflow:hidden;
}
.kpi::after,.card-total::after{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--ns-grad-brand);
}
.kpi-label,.kpi-unit{ color:var(--ns-text-3) !important; text-transform:uppercase; letter-spacing:.1em; font-size:var(--ns-fs-xs) !important; font-weight:600; }
.kpi-value,.kpi-num{
  font-family:var(--ns-font-display) !important; font-weight:800 !important;
  color:var(--ns-text) !important; font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
}
.kpis,.counts,.summary-grid,.score-grid,.resumenes{
  display:grid !important; gap:var(--ns-3) !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)) !important;
}

/* =================================================== 4. TIPOGRAFÍA */
.muted,.subtle,.hint,.help,.field-help,.small,.xs,.doc-sub,.sum-sub,
.item-detail,.meta-empty,.subtitle{ color:var(--ns-text-2) !important; }
.titulo,.title,.page-title,.section-title,.titulo-evaluacion,.titulo-modal,
.titulo-grafico,.usuarios-title,.topbar-title,.item-title,.doc-title,
.detalle-title,.modal-title{
  color:var(--ns-text) !important; font-family:var(--ns-font-display) !important;
  font-weight:700 !important;
}
.pill,.code,.dni-chip,.req-id,.sum-id,.doc-code{
  font-family:var(--ns-font-mono) !important;
  background:var(--ns-surface-2) !important;
  border:1px solid var(--ns-border) !important;
  color:var(--ns-brand) !important;
  padding:2px 9px !important; border-radius:var(--ns-r-full) !important;
  font-size:var(--ns-fs-xs) !important;
}
a{ color:var(--ns-brand); }
a:hover{ color:var(--ns-brand-3); }

/* ===================================================== 5. BOTONES */
.btn,.btn-primary,.btn-secondary,.btn-success,.btn-danger,.btn-ghost,
.btn-nuevo,.btn-naranja,.btn-plomo,.btn-editar,.btn-eliminar,.btn-ver,
.btn-documento,.btn-gastos,.btn-mini,.btn-accion,.btn-guardar,.btn-cancelar,
.btn-export,.btn-excel,.btn-pdf,.btn-filtro,.btn-accesos,.btn-detalle,
.btn-baja,.btn-reactivar,.btn-back,.btn-salir,.btn-soft,.btn-icon,.icon-btn,
.btn-text,.btn-orange,.btn-mini-primary,.btn-mini-success,.btn-mini-danger,
.btn-nuevo-item,.btn-nuevos,.btn-eliminar-doc,.btn-eliminar-def,.btn-reset,
.btn-exportar-pdf,.btn-ver-documento,.btn-action-pro,.btn-mail-pro,.btn-wsp-pro,
.btn-percent,.btn-eye,.tab-btn,button.close,.modal-close,.cerrar-modal,
.btn-excelente,.btn-bueno,.btn-regular,.btn-malo,.btn-no-evaluado{
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
  font-family:var(--ns-font-display) !important;
  font-size:var(--ns-fs-md) !important; font-weight:600 !important;
  line-height:1 !important; white-space:nowrap; text-decoration:none !important;
  padding:11px 19px; min-height:44px;
  border-radius:var(--ns-r-sm) !important;
  border:1px solid var(--ns-border-2) !important;
  background:var(--ns-surface-2) !important;
  color:var(--ns-text) !important;
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform var(--ns-t-fast), box-shadow var(--ns-t), background var(--ns-t), border-color var(--ns-t);
  text-transform:none !important;
}
.btn:hover,[class*="btn-"]:hover{ transform:translateY(-2px); border-color:var(--ns-border-glow) !important; }
.btn:active,[class*="btn-"]:active{ transform:translateY(0) scale(.98); }
.btn:disabled,[class*="btn-"]:disabled{ opacity:.45; cursor:not-allowed; transform:none !important; }

/* variantes de color */
.btn-primary,.btn-nuevo,.btn-naranja,.btn-guardar,.btn-orange,
.btn-nuevo-item,.btn-mini-primary,.btn-action-pro{
  background:var(--ns-grad-brand) !important; color:#150A00 !important;
  border-color:transparent !important; font-weight:700 !important;
  box-shadow:0 6px 22px rgba(var(--ns-brand-rgb),.32) !important;
}
.btn-primary:hover,.btn-nuevo:hover,.btn-naranja:hover,.btn-guardar:hover{
  box-shadow:0 12px 32px rgba(var(--ns-brand-rgb),.46) !important;
}
.btn-success,.btn-mini-success,.btn-reactivar{
  background:var(--ns-grad-ok) !important; color:#032713 !important;
  border-color:transparent !important; font-weight:700 !important;
  box-shadow:0 6px 20px rgba(var(--ns-ok-rgb),.28) !important;
}
.btn-danger,.btn-eliminar,.btn-mini-danger,.btn-eliminar-doc,
.btn-eliminar-def,.btn-baja{
  background:var(--ns-grad-danger) !important; color:#fff !important;
  border-color:transparent !important; font-weight:700 !important;
  box-shadow:0 6px 20px rgba(var(--ns-danger-rgb),.28) !important;
}
.btn-secondary,.btn-plomo,.btn-ghost,.btn-cancelar,.btn-back,.btn-reset{
  background:transparent !important; color:var(--ns-text-2) !important;
  border-color:var(--ns-border) !important; box-shadow:none !important;
}
.btn-secondary:hover,.btn-plomo:hover,.btn-ghost:hover,.btn-cancelar:hover{
  background:var(--ns-surface-2) !important; color:var(--ns-text) !important;
}
.btn-excel,.excel{
  background:linear-gradient(135deg,#34D399,#10B981,#059669) !important;
  color:#03271B !important; border-color:transparent !important; font-weight:700 !important;
}
.btn-pdf,.btn-exportar-pdf,.pdf{
  background:linear-gradient(135deg,#FB7185,#EF4444,#DC2626) !important;
  color:#fff !important; border-color:transparent !important; font-weight:700 !important;
}
/* Semáforo de niveles: Excelente amarillo · Bueno verde · Regular naranja ·
   Malo rojo. Los cuatro salen de los tokens --ns-nv-* del sistema de diseño,
   los mismos que usan el gráfico, la leyenda y los PDF. La tinta («-ink») va
   aparte porque encima de un amarillo hay que escribir en oscuro y encima de
   un rojo en blanco. */
/* Doble clase a propósito: estos botones llevan también «.btn-filtro», que
   más abajo los pinta a todos de celeste. Con una sola clase perdían por ir
   antes en el archivo y los cuatro salían iguales. */
.btn-excelente,  .btn-filtro.btn-excelente  { background:var(--ns-nv-exc) !important; color:var(--ns-nv-exc-ink) !important; border-color:transparent !important; font-weight:700 !important; }
.btn-bueno,      .btn-filtro.btn-bueno      { background:var(--ns-nv-bue) !important; color:var(--ns-nv-bue-ink) !important; border-color:transparent !important; font-weight:700 !important; }
.btn-regular,    .btn-filtro.btn-regular    { background:var(--ns-nv-reg) !important; color:var(--ns-nv-reg-ink) !important; border-color:transparent !important; font-weight:700 !important; }
.btn-malo,       .btn-filtro.btn-malo       { background:var(--ns-nv-mal) !important; color:var(--ns-nv-mal-ink) !important; border-color:transparent !important; font-weight:700 !important; }
.btn-no-evaluado,.btn-filtro.btn-no-evaluado{ background:var(--ns-surface-3) !important; color:var(--ns-text-2) !important; border-color:var(--ns-border-2) !important; }
.btn-wsp-pro { background:linear-gradient(135deg,#4ADE80,#22C55E,#16A34A) !important; color:#032713 !important; border-color:transparent !important; }
.btn-mail-pro{ background:var(--ns-grad-cyan) !important; color:#04202A !important; border-color:transparent !important; }
/* El texto va con «--ns-cyan-text» y no con «--ns-cyan». El cian vivo sobre su
   propio fondo pálido daba 1,6:1 en tema claro: se leía a duras penas. El tono
   vivo es para el borde y el relleno; para escribir está la variante -text. */
.btn-accesos,.btn-detalle,.btn-ver,.btn-ver-documento,.btn-filtro{
  background:rgba(var(--ns-cyan-rgb),.13) !important; color:var(--ns-cyan-text) !important;
  border-color:rgba(var(--ns-cyan-rgb),.26) !important;
}
.btn-documento,.btn-gastos,.btn-editar{
  background:var(--ns-surface-2) !important; color:var(--ns-text) !important;
}
.btn-editar:hover{ background:rgba(var(--ns-brand-rgb),.16) !important; color:var(--ns-brand) !important; }

/* botones pequeños e iconos */
.btn-mini,.btn-mini-primary,.btn-mini-success,.btn-mini-danger,
.btn-editar,.btn-eliminar,.btn-documento,.btn-gastos,.btn-percent,.btn-eye,
.icon-btn,.btn-icon,.req-mini{
  padding:7px 12px !important; min-height:38px !important;
  font-size:var(--ns-fs-sm) !important; border-radius:var(--ns-r-xs) !important;
}
.btn-editar,.btn-eliminar,.btn-documento,.btn-gastos,.icon-btn,.btn-icon,.btn-eye{
  width:38px; padding:0 !important; flex:0 0 38px;
}
.close,.modal-close,.cerrar-modal,.modal__close,.modal-edicion-close,.feedback-close{
  width:38px !important; height:38px !important; flex:0 0 38px;
  padding:0 !important; min-height:38px !important;
  border-radius:var(--ns-r-xs) !important;
  background:var(--ns-surface-2) !important; color:var(--ns-text-2) !important;
  border:1px solid var(--ns-border) !important; font-size:1.05rem !important;
  line-height:1 !important; display:grid !important; place-items:center;
}
.close:hover,.modal-close:hover,.cerrar-modal:hover,.modal__close:hover{
  background:rgba(var(--ns-danger-rgb),.16) !important; color:var(--ns-danger) !important;
  transform:rotate(90deg);
}

/* barras de acciones bien repartidas */
.acciones,.actions-bar,.actions-main,.actions-export,.actions-new,.actions-admin,
.buttons,.botones-form,.botones-formulario,.form-buttons,.modal-buttons,
.modal-botones,.filtro-botones,.exportar-botones,.fila-botones,.detalle-actions,
.doc-actions,.file-actions,.req-actions,.row-actions,.footer-actions,.acciones-modal{
  display:flex !important; flex-wrap:wrap; gap:var(--ns-2) !important;
  align-items:center;
}
@media (max-width:640px){
  .acciones,.actions-bar,.actions-main,.buttons,.form-buttons,
  .modal-buttons,.modal-botones,.botones-form{ width:100%; }
  .acciones > *,.actions-bar > *,.buttons > *,.form-buttons > *,
  .modal-buttons > *,.modal-botones > *{ flex:1 1 140px; }
  .acciones form,.actions-bar form{ flex:1 1 140px; display:flex; }
  .acciones form > button{ width:100%; }
}

/* pestañas */
.tabs{ display:flex; gap:5px; padding:5px; background:var(--ns-surface-2) !important;
       border:1px solid var(--ns-border) !important; border-radius:var(--ns-r-sm) !important;
       overflow-x:auto; }
.tab-btn{ background:transparent !important; border:0 !important; box-shadow:none !important;
          color:var(--ns-text-2) !important; flex:1 1 auto; min-width:max-content; }
.tab-btn.active,.tab-btn.is-active{
  background:var(--ns-grad-brand) !important; color:#150A00 !important;
  box-shadow:0 4px 14px rgba(var(--ns-brand-rgb),.30) !important;
}

/* ================================================ 6. FORMULARIOS */
input[type="text"],input[type="password"],input[type="email"],input[type="number"],
input[type="date"],input[type="search"],input[type="tel"],input[type="url"],
input[type="datetime-local"],input:not([type]),select,textarea,
.form-control,.input,.input-mini,.buscador-editable{
  width:100%;
  padding:11px 14px !important; min-height:44px;
  font-size:16px !important;                 /* sin zoom en iOS */
  font-family:var(--ns-font) !important;
  background:var(--ns-surface-2) !important;
  border:1px solid var(--ns-border) !important;
  border-radius:var(--ns-r-sm) !important;
  color:var(--ns-text) !important;
  transition:border-color var(--ns-t), box-shadow var(--ns-t), background var(--ns-t);
  box-shadow:none !important;
}
@media (min-width:640px){
  input,select,textarea,.form-control{ font-size:var(--ns-fs-base) !important; }
}
textarea{ min-height:100px; resize:vertical; line-height:1.6; }
input::placeholder,textarea::placeholder{ color:var(--ns-text-3) !important; opacity:1; }
input:focus,select:focus,textarea:focus,.form-control:focus{
  border-color:var(--ns-brand) !important;
  box-shadow:0 0 0 4px rgba(var(--ns-brand-rgb),.16) !important;
  background:var(--ns-surface-3) !important; outline:none !important;
}
input:disabled,select:disabled,textarea:disabled{ opacity:.55; cursor:not-allowed; }
select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B8D4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 13px center !important;
  background-size:17px !important; padding-right:40px !important; cursor:pointer;
}
select option{ background:var(--ns-elevated); color:var(--ns-text); }
input[type="checkbox"],input[type="radio"]{
  width:20px !important; height:20px !important; min-height:0 !important;
  accent-color:var(--ns-brand); cursor:pointer; padding:0 !important;
  flex:0 0 auto;
}
input[type="file"]{ padding:9px 12px !important; cursor:pointer; }
input[type="file"]::file-selector-button{
  padding:8px 14px; margin-right:12px; border:0; border-radius:var(--ns-r-xs);
  background:var(--ns-grad-brand); color:#150A00; font-weight:700; cursor:pointer;
  font-family:var(--ns-font-display);
}
label,.label{ color:var(--ns-text-2) !important; font-size:var(--ns-fs-sm) !important; font-weight:600 !important; }

.form-group,.grupo-campo,.campo,.field-group,.form-row{
  display:flex; flex-direction:column; gap:6px; min-width:0;
}
/* rejillas de formulario: aprovechan todo el ancho */
.grid-2,.grid2,.dl-grid,.form-grid,.mail-grid,.fotocheck-grid{
  display:grid !important; gap:var(--ns-4) !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)) !important;
}
.grid3,.documentos-grid,.docs-wrap{
  display:grid !important; gap:var(--ns-4) !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)) !important;
}
.full,.span-2,.w-full{ grid-column:1 / -1 !important; }

/* el formulario largo del inventario se vuelve multicolumna */
.formulario,.modal-form{
  display:grid !important; gap:var(--ns-4) !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)) !important;
}
.formulario > h3,.formulario > .botones-form,.formulario > .form-buttons,
.modal-form > h3{ grid-column:1 / -1 !important; }
.formulario > div{ display:flex; flex-direction:column; gap:6px; min-width:0; }

/* buscadores */
.filtro-busqueda,.busqueda-historial,.buscador-container,.searchbox,
.search,.search-group,.filters,.filtros,.usuarios-toolbar,.page-tools,
.header-table,.search-export{
  display:flex !important; flex-wrap:wrap; gap:var(--ns-3) !important;
  align-items:center;
  padding:var(--ns-3) var(--ns-4) !important;
  background:var(--ns-surface) !important;
  border:1px solid var(--ns-border) !important;
  border-radius:var(--ns-r-md) !important;
  margin-bottom:var(--ns-4) !important;
  /* Sin backdrop-filter a propósito: crea un «bloque contenedor» y rompe el
     position:fixed de los modales que algunas vistas anidan aquí dentro. */
}
.filtro-busqueda input,.busqueda-historial input,.searchbox input,.search input{
  flex:1 1 240px; min-width:0;
}
.filtro-busqueda select,.filters select,.filtros select{ flex:0 1 210px; min-width:150px; }
@media (max-width:640px){
  .filtro-busqueda,.busqueda-historial,.searchbox,.search,.filters,.filtros{ padding:var(--ns-3) !important; }
  .filtro-busqueda > *,.filters > *,.filtros > *{ flex:1 1 100% !important; }
}

/* ================================================== 7. TABLAS */
.tabla,.tabla-equipos,.tabla-historial,.tabla-usuarios,.tabla-evaluacion,
.tabla-bajas,.table,.table-bordered,.table-compact,.info-table,.score-table,
.list-group,table{
  width:100% !important;
  border-collapse:separate !important; border-spacing:0 !important;
  font-size:var(--ns-fs-md) !important;
  background:transparent !important;
  color:var(--ns-text) !important;
}
table thead th{
  position:sticky; top:0; z-index:3;
  background:var(--ns-elevated) !important;
  padding:13px 15px !important; text-align:left; white-space:nowrap;
  font-family:var(--ns-font-display) !important;
  font-size:var(--ns-fs-xs) !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.09em;
  color:var(--ns-text-2) !important;
  border-bottom:1px solid var(--ns-border-2) !important;
  border-top:0 !important; border-left:0 !important; border-right:0 !important;
}
[data-theme="light"] table thead th{ background:#F1F5FC !important; }
table tbody td{
  padding:12px 15px !important;
  border-bottom:1px solid var(--ns-border) !important;
  border-top:0 !important; border-left:0 !important; border-right:0 !important;
  color:var(--ns-text) !important; vertical-align:middle;
  background:transparent !important;
}
table tbody tr{ transition:background var(--ns-t-fast); }
table tbody tr:hover{ background:rgba(var(--ns-brand-rgb),.055) !important; }
table tbody tr:last-child td{ border-bottom:0 !important; }
table tbody tr:nth-child(even){ background:rgba(255,255,255,.018); }
[data-theme="light"] table tbody tr:nth-child(even){ background:rgba(15,32,66,.022); }

/* envoltorio con scroll */
.tabla-wrapper-scroll,.table-wrap,.tabla-wrapper,.ns-table-scroll,.rubrica-scroll{
  overflow-x:auto !important; -webkit-overflow-scrolling:touch;
  border-radius:var(--ns-r-lg) !important;
  border:1px solid var(--ns-border) !important;
  background:var(--ns-surface) !important;
  box-shadow:var(--ns-shadow-sm) !important;
  backdrop-filter:blur(var(--ns-blur));
  -webkit-backdrop-filter:blur(var(--ns-blur));
  max-width:100%;
}
.tabla-wrapper-scroll table,.table-wrap table,.ns-table-scroll table{ border-radius:0 !important; }

th.ordenable,th.ns-sortable{ cursor:pointer; -webkit-user-select:none; user-select:none; }
th.ordenable:hover{ color:var(--ns-brand) !important; }
.flecha{ opacity:.5; margin-left:4px; }
.resaltado{ color:var(--ns-brand) !important; font-weight:700; }
.sin-registros,.empty,.meta-empty{ color:var(--ns-text-3) !important; text-align:center; padding:var(--ns-8) var(--ns-4) !important; }

/* celda de acciones agrupada */
.td-acciones,.ns-actions-cell{ white-space:nowrap; }
.td-acciones > *,.ns-actions-cell > *{ display:inline-flex; vertical-align:middle; }
.ns-actions-cell{ display:flex; gap:5px; align-items:center; flex-wrap:wrap; }

/* ================================================== 8. MODALES */
.modal,.modal-overlay,.modal-backdrop,.documento-modal,.modal-confirmacion,
.modal-edicion,.rubrica-modal-wrapper{
  position:fixed !important; inset:0 !important; z-index:1000 !important;
  align-items:center !important; justify-content:center !important;
  padding:clamp(10px,3vw,26px) !important;
  background:rgba(3,7,16,.72) !important;
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  overscroll-behavior:contain;
}
.modal-content,.modal-contenido,.modal-dialog,.modal__dialog,
.modal-edicion-content,.modal-body-wrap{
  width:100% !important; max-width:min(880px,96vw) !important;
  max-height:min(90dvh,940px) !important;
  display:flex !important; flex-direction:column;
  background:var(--ns-elevated) !important;
  border:1px solid var(--ns-border-2) !important;
  border-radius:var(--ns-r-xl) !important;
  box-shadow:var(--ns-shadow-lg), 0 0 0 1px rgba(var(--ns-brand-rgb),.10) !important;
  overflow:hidden !important;
  animation:ns-pop .34s cubic-bezier(.16,1,.3,1) both;
  padding:0 !important;
  color:var(--ns-text) !important;
}
.modal-sm .modal-content,.modal--confirm .modal-content{ max-width:480px !important; }
.modal-xl .modal-content,.modal-xl{ max-width:min(1240px,96vw) !important; }

/* cabecera / cuerpo / pie dentro del modal */
.modal-content > h3,.modal-contenido > h3,.modal-head,.modal-header,.modal__header,
.titulo-modal{
  padding:var(--ns-5) var(--ns-6) !important; margin:0 !important;
  border-bottom:1px solid var(--ns-border) !important;
  background:linear-gradient(180deg,rgba(var(--ns-brand-rgb),.07),transparent) !important;
  font-family:var(--ns-font-display) !important; font-size:var(--ns-fs-lg) !important;
  font-weight:700 !important; flex:0 0 auto;
  display:flex; align-items:center; gap:var(--ns-3);
}
.modal-body,.modal__body,.modal-content > form,.modal-contenido > form{
  padding:var(--ns-6) !important; overflow-y:auto; flex:1 1 auto;
  -webkit-overflow-scrolling:touch;
}
.modal-footer,.modal-actions,.modal-buttons,.modal-botones,.acciones-modal{
  padding:var(--ns-4) var(--ns-6) !important;
  border-top:1px solid var(--ns-border) !important;
  background:var(--ns-surface) !important;
  display:flex !important; gap:var(--ns-3) !important;
  justify-content:flex-end; flex-wrap:wrap; flex:0 0 auto; margin:0 !important;
}
/* el formulario del modal reparte el ancho en columnas */
.modal-content form.formulario{ padding:var(--ns-6) !important; }

@media (max-width:640px){
  .modal,.modal-overlay,.documento-modal,.modal-confirmacion,.modal-edicion{
    padding:0 !important; align-items:flex-end !important;
  }
  .modal-content,.modal-contenido,.modal-dialog,.modal-edicion-content{
    max-width:100% !important; max-height:94dvh !important;
    border-radius:var(--ns-r-xl) var(--ns-r-xl) 0 0 !important;
    animation:ns-sheet .34s cubic-bezier(.16,1,.3,1) both;
  }
  .modal-content > h3,.modal-head,.modal-header,.modal-body,.modal__body,
  .modal-footer,.modal-actions,.modal-buttons,.modal-content > form{
    padding-left:var(--ns-4) !important; padding-right:var(--ns-4) !important;
  }
  .modal-footer > *,.modal-actions > *,.modal-buttons > *{ flex:1 1 140px; }
}

/* ================================================ 9. ALERTAS */
.alerta,.alert,.doc-alert,.modal-alert,.feedback{
  display:flex !important; align-items:flex-start; gap:var(--ns-3);
  padding:var(--ns-4) var(--ns-5) !important;
  border-radius:var(--ns-r-md) !important;
  border:1px solid var(--ns-border) !important;
  background:var(--ns-surface-2) !important;
  color:var(--ns-text) !important;
  font-size:var(--ns-fs-md) !important;
  position:relative; overflow:hidden;
  box-shadow:var(--ns-shadow-sm) !important;
}
.alert.ok,.alerta.ok,.alert-success{
  background:rgba(var(--ns-ok-rgb),.11) !important;
  border-color:rgba(var(--ns-ok-rgb),.28) !important; color:#8FE9AE !important;
}
.alert.error,.alerta.error,.alerta-error,.alert-danger{
  background:rgba(var(--ns-danger-rgb),.11) !important;
  border-color:rgba(var(--ns-danger-rgb),.28) !important; color:#FFA3B4 !important;
}
[data-theme="light"] .alert.ok,[data-theme="light"] .alerta.ok{ color:#0B7A3E !important; }
[data-theme="light"] .alert.error,[data-theme="light"] .alerta-error{ color:#B32345 !important; }
.contenedor-alerta{
  position:fixed; top:calc(var(--ns-nav-h) + 12px); left:50%; transform:translateX(-50%);
  z-index:1100; width:min(430px,calc(100vw - 24px));
}

/* ================================================ 10. BADGES */
.badge,.chip,.status,.dot,.badge-rol,.badge-ok,.badge-warn,.badge-baja,
.calificacion,.score,.sum-badges > span{
  display:inline-flex !important; align-items:center; gap:6px;
  padding:4px 11px !important; border-radius:var(--ns-r-full) !important;
  font-size:var(--ns-fs-xs) !important; font-weight:700 !important;
  line-height:1.5 !important; letter-spacing:.03em; white-space:nowrap;
  background:var(--ns-surface-2) !important; color:var(--ns-text-2) !important;
  border:1px solid var(--ns-border) !important;
}
.badge-ok,.badge.si,.badge.is-done,.status.ok{
  background:rgba(var(--ns-ok-rgb),.14) !important; color:var(--ns-ok) !important;
  border-color:rgba(var(--ns-ok-rgb),.28) !important;
}
.badge-warn,.status.warn{
  background:rgba(var(--ns-warn-rgb),.15) !important; color:var(--ns-warn) !important;
  border-color:rgba(var(--ns-warn-rgb),.30) !important;
}
.badge-baja,.badge.no,.badge.doc-missing,.status.danger,.danger{
  background:rgba(var(--ns-danger-rgb),.14) !important; color:var(--ns-danger) !important;
  border-color:rgba(var(--ns-danger-rgb),.28) !important;
}
.badge-rol{
  background:rgba(var(--ns-violet-rgb),.16) !important; color:#A78BFA !important;
  border-color:rgba(var(--ns-violet-rgb),.30) !important;
}
.chips{ display:flex; flex-wrap:wrap; gap:6px; }

/* ============================ 11. LISTAS / TICKETS / SOLICITUDES */
.list-group-item,.item-row,.req-line,.doc-item,.file-row,.chk-row,
.acceso-group,.order-card,.item-block{
  background:var(--ns-surface) !important;
  border:1px solid var(--ns-border) !important;
  border-radius:var(--ns-r-md) !important;
  padding:var(--ns-3) var(--ns-4) !important;
  margin-bottom:var(--ns-2) !important;
  color:var(--ns-text) !important;
  transition:all var(--ns-t);
}
.list-group-item:hover,.item-row:hover,.req-line:hover,.doc-item:hover{
  border-color:var(--ns-border-glow) !important; transform:translateX(2px);
}
.req-card,.order-card,.sum-main{
  position:relative; overflow:hidden;
  padding:var(--ns-4) var(--ns-5) !important;
}
.req-card::before,.order-card::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--ns-grad-brand);
}
.items-list,.files-list,.lista-doc,.lista-documentos,.orders,.board-grid{
  display:grid !important; gap:var(--ns-3) !important;
}
@media (min-width:900px){
  .board-grid,.orders{ grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)) !important; }
}
.sum-avatar{
  width:44px; height:44px; flex:0 0 44px; border-radius:50%;
  background:var(--ns-grad-brand) !important; color:#150A00 !important;
  display:grid; place-items:center; font-weight:800;
  font-family:var(--ns-font-display);
}

/* separadores */
hr,.sep,.line{ border:0 !important; height:1px !important; background:var(--ns-border) !important; margin:var(--ns-5) 0 !important; }

/* ============================ 12. GRÁFICOS (dashboard) */
.charts,.graficos{
  display:grid !important; gap:var(--ns-4) !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)) !important;
}
/* El panel de proveedores reparte en 12 columnas y coloca cada tarjeta con
   `grid-column: span 6`. La rejilla automática de arriba se lo cargaba y
   los dos gráficos de la fila salían uno debajo de otro a lo ancho. */
.charts:has(.chart--half),
.charts--comparative{
  grid-template-columns:repeat(12,minmax(0,1fr)) !important;
}
@media (max-width:900px){
  .charts:has(.chart--half),
  .charts--comparative{ grid-template-columns:1fr !important; }
  .chart--half,.chart--comparative{ grid-column:1 / -1 !important; }
}
.chart--full,.grafico-principal{ grid-column:1 / -1 !important; }
.chart-wrap,.grafico,.chart{
  padding:var(--ns-5) !important; min-width:0;
}
/* `height:auto` en el lienzo hace que Chart.js crezca sin fin cuando el
   contenedor tampoco tiene alto: la tarjeta manda y el lienzo la rellena. */
.grafico canvas{ max-width:100% !important; height:auto !important; }
.chart canvas{ max-width:100% !important; }
.chart__title,.titulo-grafico{
  font-family:var(--ns-font-display) !important; font-weight:600 !important;
  font-size:var(--ns-fs-md) !important; color:var(--ns-text) !important;
  margin:0 0 var(--ns-4) !important; padding-bottom:var(--ns-3);
  border-bottom:1px solid var(--ns-border);
}
.legend,.legend__item{ color:var(--ns-text-2) !important; font-size:var(--ns-fs-sm) !important; }

/* ============================ 13. LOGIN LEGADO (respaldo) */
body.login-page{ padding-top:0 !important; }
.login-box{
  background:var(--ns-surface) !important;
  border:1px solid var(--ns-border-2) !important;
  border-radius:var(--ns-r-xl) !important;
  box-shadow:var(--ns-shadow-lg) !important;
  backdrop-filter:blur(26px) saturate(160%);
  -webkit-backdrop-filter:blur(26px) saturate(160%);
  color:var(--ns-text) !important;
}
.pass-wrap,.password-wrapper{ position:relative; display:flex; align-items:center; width:100%; }
.pass-toggle,.toggle-pass{
  position:absolute; right:6px; width:38px; height:38px; min-height:0 !important;
  display:grid !important; place-items:center; border:0 !important;
  background:transparent !important; color:var(--ns-text-3) !important;
  border-radius:var(--ns-r-xs) !important; padding:0 !important; cursor:pointer;
  box-shadow:none !important;
}
.pass-toggle:hover,.toggle-pass:hover{ color:var(--ns-brand) !important; background:var(--ns-surface-2) !important; }

/* ============================ 14. SELECCIÓN ÁREA / SISTEMA */
.bg .blob,.bg .grid{ opacity:.55; }
.choice,.sys-card{
  background:var(--ns-surface) !important;
  border:1px solid var(--ns-border) !important;
  border-radius:var(--ns-r-lg) !important;
  color:var(--ns-text) !important;
  transition:all var(--ns-t);
}
.choice:hover,.sys-card:hover{
  border-color:var(--ns-border-glow) !important;
  transform:translateY(-4px);
  box-shadow:var(--ns-shadow), var(--ns-glow) !important;
}
.choice__input:checked + .choice{
  border-color:var(--ns-brand) !important;
  background:rgba(var(--ns-brand-rgb),.10) !important;
  box-shadow:var(--ns-glow) !important;
}

/* ============================ 15. AJUSTES RESPONSIVE GENERALES */
@media (max-width:768px){
  h1{ font-size:1.55rem !important; }
  h2{ font-size:1.3rem !important; }
  h3{ font-size:1.1rem !important; }
  .container,.main,.main-panel,.main-usuarios,.main-historial,
  .contenido-principal,.container-dashboard,.page{ padding:var(--ns-3) !important; }
  /* nada se sale de la pantalla */
  *{ max-width:100%; }
  img{ height:auto; }
  .topbar,.header,.header-bajas,.usuarios-header,.board-header,.dash__header{
    flex-direction:column !important; align-items:stretch !important; gap:var(--ns-3) !important;
  }
  .topbar-right,.header-right{ width:100%; }
}
@media (max-width:420px){
  :root{ --ns-nav-h:60px; }
  .btn,[class*="btn-"]{ font-size:var(--ns-fs-sm) !important; padding:10px 14px; }
}

/* evita desbordes horizontales por tablas o textos largos */
td,th{ word-break:break-word; }
pre,code{ white-space:pre-wrap; word-break:break-word; font-family:var(--ns-font-mono); }

/* ============================ 16. IMPRESIÓN / PDF */
@media print{
  nav.navbar,.ns-nav,.acciones,.filtro-busqueda,.ns-toasts,
  .actions-bar,.btn,[class*="btn-"]{ display:none !important; }
  body::before{ display:none !important; }
  body{ background:#fff !important; color:#000 !important; padding-top:0 !important; }
  .card,.tabla-wrapper-scroll,table{ box-shadow:none !important; border-color:#ccc !important; background:#fff !important; }
  table thead th,table tbody td{ color:#000 !important; background:#fff !important; }
}

/* ==========================================================================
   17. MODO TARJETA EN MÓVIL · anula los anchos fijos del CSS antiguo
   Varias hojas heredadas fijan min-width (p. ej. .tabla-equipos: 1600px)
   para forzar el scroll horizontal. En móvil eso rompe el diseño de tarjeta,
   así que aquí se neutraliza por completo.
   ========================================================================== */
@media (max-width:820px){
  .ns-table--cards,
  .ns-table--cards thead,
  .ns-table--cards tbody,
  .ns-table--cards tr,
  .ns-table--cards td,
  .ns-table--cards th{
    min-width:0 !important;
    max-width:100% !important;
    width:100% !important;
    white-space:normal !important;
  }
  .ns-table--cards{ display:block !important; }
  .ns-table--cards thead{ display:none !important; }
  .ns-table--cards tbody,
  .ns-table--cards tr{ display:block !important; }
  .ns-table--cards td{ display:flex !important; }
  /* columnas que el sistema oculta a propósito (datos solo de exportación) */
  .ns-table--cards td.ns-td-oculta,
  .ns-table--cards th.ns-td-oculta{ display:none !important; }

  /* el contenedor deja de desplazarse: ya no hay nada que desplazar */
  .tabla-wrapper-scroll,.table-wrap,.ns-table-scroll{
    overflow-x:visible !important;
    border:0 !important; background:transparent !important;
    box-shadow:none !important; backdrop-filter:none !important;
  }
  /* celdas con botones: los repartimos a lo ancho */
  .ns-table--cards td .btn,
  .ns-table--cards td [class*="btn-"]{ flex:1 1 auto; min-width:44px; }
}

/* En escritorio el scroll horizontal sí es útil, pero limitado al contenedor */
@media (min-width:821px){
  .tabla-wrapper-scroll,.table-wrap{ max-width:100%; }
}

/* Ningún elemento puede ser más ancho que la pantalla en móvil */
@media (max-width:640px){
  .container,.main,.main-panel,.card,.modal-content,
  .ns-card,.ns-kpi,.ns-ticket,.tabla-wrapper-scroll{ max-width:100% !important; }
  h1,h2,h3,h4,p,span,td,th,div{ overflow-wrap:anywhere; }
}

/* ==========================================================================
   18. CORRECCIONES DE CONFLICTO CON EL CSS HEREDADO
   Detectadas en auditoría visual a 320/390/820/1600 px.
   ========================================================================== */

/* --- 18.1 Filas alternas: varias hojas antiguas usan blancos crema que
   dejan el texto ilegible sobre el tema oscuro. Se anulan sin excepción. --- */
table tbody tr,
table tbody tr:nth-child(even),
table tbody tr:nth-child(odd),
.tabla tbody tr:nth-child(even),
.tabla-usuarios tbody tr:nth-child(even),
.tabla-equipos tbody tr:nth-child(even),
.tabla-historial tbody tr:nth-child(even),
.tabla-evaluacion tbody tr:nth-child(even),
.tabla-bajas tbody tr:nth-child(even),
.table tbody tr:nth-child(even){
  background-color:transparent !important;
}
table tbody tr:nth-child(even){ background-color:rgba(255,255,255,.022) !important; }
[data-theme="light"] table tbody tr:nth-child(even){ background-color:rgba(15,32,66,.026) !important; }
table tbody tr:hover{ background-color:rgba(var(--ns-brand-rgb),.07) !important; }
table tbody tr td{ color:var(--ns-text) !important; }

/* --- 18.2 Barras de acciones: en columna, `flex-basis` se convierte en
   ALTURA y estiraba los botones a 140 px. Se fuerza fila con ajuste. --- */
.acciones,.actions-bar,.actions-main,.actions-export,.actions-new,
.actions-top,.buttons,.botones-form,.form-buttons,.exportar-botones,
.filtro-botones,.search-export,.detalle-actions{
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:center !important;
}
.acciones > *,.actions-bar > *,.actions-top > *,.buttons > *,
.botones-form > *,.form-buttons > *,.exportar-botones > *{
  flex:0 1 auto !important;
  align-self:center !important;
}
.acciones form,.actions-bar form,.actions-top form,.exportar-botones form{
  display:inline-flex !important; margin:0 !important; flex:0 1 auto !important;
}
.acciones .btn,.acciones [class*="btn-"],
.actions-bar .btn,.actions-bar [class*="btn-"]{
  height:auto !important; min-height:44px; max-height:52px;
}
@media (max-width:640px){
  /* en móvil los botones se reparten el ancho, nunca el alto */
  .acciones > *,.actions-bar > *,.actions-top > *,
  .buttons > *,.botones-form > *,.form-buttons > *{ flex:1 1 calc(50% - 8px) !important; }
  .acciones form,.actions-bar form,.actions-top form{ flex:1 1 calc(50% - 8px) !important; }
  .acciones form > .btn,.acciones form > [class*="btn-"],
  .actions-bar form > *{ width:100% !important; }
}
@media (max-width:400px){
  .acciones > *,.actions-bar > *,.actions-top > *,
  .acciones form,.actions-bar form{ flex:1 1 100% !important; }
}

/* --- 18.3 Campos ocultos: algunas hojas los vuelven visibles y ocupaban
   una celda entera en las rejillas de formulario. --- */
input[type="hidden"]{ display:none !important; position:absolute !important; }

/* --- 18.4 Fichas de solicitud (bandejas RRHH): las columnas flex se
   comprimían a 4 px y el texto salía en vertical, letra por letra. --- */
.sum-left,.sum-right,.sum-main,.item-left,.item-right,.req-top,
.topbar-left,.topbar-right,.header-left,.header-right{
  min-width:0 !important;
  flex-shrink:1;
}
.sum-left,.item-left,.header-left,.topbar-left{ flex:1 1 auto !important; }
.sum-right,.item-right,.header-right,.topbar-right{ flex:0 0 auto !important; }
.sum-avatar{ flex:0 0 44px !important; }
.dni-chip,.req-id,.sum-id,.pill,.code,.doc-code{
  flex:0 0 auto !important;
  white-space:nowrap !important;
  width:auto !important; min-width:max-content;
  writing-mode:horizontal-tb !important;
}
.sum-name,.item-title,.req-name{ min-width:0; overflow-wrap:anywhere; }

@media (max-width:768px){
  /* las fichas pasan a una sola columna: nada se comprime */
  .sum-main,.item-row,.req-top,.order-footer,.summary,
  .topbar,.header-wrap,.board-header{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:var(--ns-3) !important;
  }
  .sum-left,.sum-right,.item-left,.item-right{ width:100% !important; flex:1 1 auto !important; }
  .sum-badges,.chips{ justify-content:flex-start; }
}

/* --- 18.5 Modales antiguos: el formulario en rejilla necesita que los
   títulos y las botoneras ocupen la fila completa. --- */
.formulario > h3,.formulario > h2,.formulario > .botones-form,
.formulario > .form-buttons,.formulario > .modal-actions,
.formulario > .modal-buttons,.formulario > .campo-observaciones,
.modal-form > h3{
  grid-column:1 / -1 !important;
}

/* --- 18.6 Cabecera plegable de las bandejas RRHH (<summary class="order-sum">)
   Es un contenedor flex anidado: sin `flex-grow` la columna interna quedaba
   en 40 px y el nombre se leía en vertical, letra por letra. --- */
.order-sum,summary.order-sum{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:var(--ns-3) !important;
  width:100%; min-width:0;
  list-style:none;
}
.order-sum::-webkit-details-marker,.order-sum::marker{ display:none; content:''; }
.order-sum .sum-left{
  display:flex !important; align-items:center; gap:var(--ns-3);
  flex:1 1 240px !important; min-width:0 !important;
}
.order-sum .sum-main{ flex:1 1 auto !important; min-width:0 !important; }
.order-sum .sum-right{
  display:flex !important; align-items:center; gap:var(--ns-2);
  flex:0 1 auto !important; min-width:0 !important; flex-wrap:wrap;
}
.sum-name,.sum-sub{ overflow-wrap:anywhere; min-width:0; }

@media (max-width:768px){
  .order-sum,summary.order-sum{ align-items:flex-start !important; }
  .order-sum .sum-left,
  .order-sum .sum-right{ flex:1 1 100% !important; width:100% !important; }
  .order-sum .sum-right{ justify-content:flex-start; }
}

/* Regla general de seguridad: ningún contenedor flex puede aplastar a un hijo
   con texto hasta hacerlo ilegible. */
[class*="sum-"],[class*="item-"],[class*="req-"],[class*="order-"],
[class*="doc-"],[class*="file-"],[class*="topbar"],[class*="header-"]{
  min-width:0;
}

/* --- 18.7 Columnas fijas en tablas anchas (escritorio).
   La clase la aplica newson-ui.js solo cuando la tabla desborda. --- */
@media (min-width:821px){
  table.ns-table--stick-first td:first-child,
  table.ns-table--stick-first th:first-child{
    position:sticky !important; left:0; z-index:2;
    background:var(--ns-elevated) !important;
    box-shadow:10px 0 18px -12px rgba(0,0,0,.55);
  }
  table.ns-table--stick-first thead th:first-child{ z-index:4; }
  table.ns-table--stick-actions td:last-child,
  table.ns-table--stick-actions th:last-child{
    position:sticky !important; right:0; z-index:2;
    background:var(--ns-elevated) !important;
    box-shadow:-10px 0 18px -12px rgba(0,0,0,.55);
  }
  table.ns-table--stick-actions thead th:last-child{ z-index:4; }
  [data-theme="light"] table.ns-table--stick-first td:first-child,
  [data-theme="light"] table.ns-table--stick-actions td:last-child{ background:#FFF !important; }
  [data-theme="light"] table.ns-table--stick-first th:first-child,
  [data-theme="light"] table.ns-table--stick-actions th:last-child{ background:#F1F5FC !important; }
}

/* --- 18.8 Vista compacta: debe poder ganar a las reglas heredadas, por eso
   se repiten aquí con la misma fuerza. Reduce ~35 % la altura de fila. --- */
body.ns-dense table thead th{ padding:8px 11px !important; font-size:.66rem !important; }
body.ns-dense table tbody td{ padding:6px 11px !important; font-size:.82rem !important; line-height:1.4 !important; }
body.ns-dense .card,body.ns-dense .ns-card{ padding:var(--ns-4) !important; }
body.ns-dense .btn,body.ns-dense [class*="btn-"],body.ns-dense .ns-btn{
  min-height:34px !important; padding:6px 12px !important; font-size:var(--ns-fs-sm) !important;
}
body.ns-dense input,body.ns-dense select,body.ns-dense textarea,
body.ns-dense .ns-input,body.ns-dense .ns-select{
  min-height:36px !important; padding:7px 12px !important;
}
body.ns-dense .ns-kpi{ padding:var(--ns-3) var(--ns-4) !important; }
body.ns-dense .ns-kpi__value{ font-size:1.5rem !important; }
body.ns-dense .ns-shell{ padding-top:calc(var(--ns-nav-h) + 12px) !important; }
body.ns-dense .filtro-busqueda,body.ns-dense .ns-toolbar,
body.ns-dense .filters,body.ns-dense .filtros{ padding:8px 12px !important; }

/* ==========================================================================
   19. CORRECCIONES DE MAQUETACIÓN (revisión funcional del cliente)
   ========================================================================== */

/* --- 19.1 Las clases de rejilla con número en el nombre significan
   EXACTAMENTE ese número de columnas. La regla genérica anterior las
   convertía en 5 columnas y aplastaba el contenido hasta dejar el texto
   en vertical (visible en el detalle de proveedor). --- */
.grid-2,.grid2{ grid-template-columns:1fr !important; }
.grid3,.grid-3{ grid-template-columns:1fr !important; }
@media (min-width:760px){
  .grid-2,.grid2{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .grid3,.grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (min-width:1100px){
  .grid3,.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
.grid-2 > *,.grid2 > *,.grid3 > *,.grid-3 > *{ min-width:0; }

/* --- 19.2 Fichas de datos (dt/dd) del detalle: la etiqueta se ajusta al
   texto y el valor recibe todo el espacio restante. --- */
.dl-grid{ display:grid !important; grid-template-columns:1fr !important; gap:0 !important; }
.dl-row{
  display:grid !important;
  grid-template-columns:minmax(96px,38%) minmax(0,1fr) !important;
  gap:var(--ns-3) !important;
  align-items:baseline;
  padding:10px 14px !important;
  border-bottom:1px solid var(--ns-border) !important;
  border-radius:0 !important;
  background:transparent !important;
}
.dl-row:last-child{ border-bottom:0 !important; }
.dl-row dt,.dl-row > :first-child{
  min-width:0; font-size:var(--ns-fs-xs) !important;
  text-transform:uppercase; letter-spacing:.07em;
  color:var(--ns-text-3) !important; font-weight:700 !important;
  margin:0 !important; overflow-wrap:anywhere;
}
.dl-row dd,.dl-row > :last-child{
  min-width:0 !important; width:auto !important;
  margin:0 !important; text-align:left !important;
  font-size:var(--ns-fs-md) !important; font-weight:600 !important;
  color:var(--ns-text) !important;
  overflow-wrap:anywhere; word-break:normal !important;
  white-space:normal !important;
}
@media (max-width:560px){
  .dl-row{ grid-template-columns:1fr !important; gap:2px !important; }
}

/* --- 19.3 Campos con icono: el override reiniciaba el relleno izquierdo y
   el icono quedaba encima del texto (visible en el login). --- */
.ns-input-group{ position:relative; display:flex; align-items:center; width:100%; }
.ns-input-group > input,
.ns-input-group > .ns-input,
.ns-input-group > select,
.ns-input-group > textarea{ padding-left:44px !important; }
.ns-input-group__icon{
  position:absolute !important; left:15px; z-index:2;
  pointer-events:none; width:16px; text-align:center;
}
/* si además lleva botón a la derecha (ojo de contraseña) */
.ns-input-group:has(.ns-input-group__action) > input,
.ns-input-group:has(.ns-input-group__action) > .ns-input{ padding-right:48px !important; }
.pass-wrap > input,.password-wrapper > input{ padding-right:48px !important; }
.ns-input-group__action{ z-index:3; }

/* --- 19.4 Columna de acciones: siempre alcanzable, nunca cortada. --- */
td:last-child .btn,td:last-child [class*="btn-"],
.td-acciones .btn,.td-acciones [class*="btn-"]{ flex:0 0 auto; }
table tbody td:last-child{ white-space:nowrap; }
@media (max-width:820px){
  /* en tarjeta, las acciones se reparten el ancho y se ven completas */
  .ns-table--cards td:last-child{
    white-space:normal !important;
    flex-wrap:wrap; gap:6px; justify-content:flex-end;
  }
  .ns-table--cards td:last-child .btn,
  .ns-table--cards td:last-child [class*="btn-"]{ flex:1 1 auto; min-width:88px; }
}
/* contenedores de tabla que recortaban sin permitir desplazamiento */
.usuarios-card,.seccion-card,.card:has(> table),.table-wrap,.tabla-wrapper{
  overflow-x:auto !important;
}

/* --- 19.5 Modales: alto real y desplazamiento interno garantizado. --- */
.modal-content,.modal-contenido,.modal-dialog,.modal-edicion-content{
  max-height:min(92dvh,960px) !important;
  overflow:hidden !important;
  display:flex !important; flex-direction:column !important;
}
.modal-content > form,.modal-contenido > form,
.modal-body,.modal__body,.rubrica-scroll{
  overflow-y:auto !important; min-height:0 !important; flex:1 1 auto !important;
  -webkit-overflow-scrolling:touch;
}
/* el pie del modal nunca se va con el scroll */
.modal-footer,.modal-actions,.modal-buttons,.modal-botones{
  position:sticky; bottom:0; z-index:2;
  background:var(--ns-elevated) !important;
}
/* si el formulario ES el cuerpo, su botonera se queda abajo */
.modal-content > form > .modal-actions,
.modal-content > form > .botones-form,
.modal-content > form > .form-buttons{
  position:sticky; bottom:calc(var(--ns-6) * -1);
  margin-inline:calc(var(--ns-6) * -1);
  margin-bottom:calc(var(--ns-6) * -1);
  padding:var(--ns-4) var(--ns-6) !important;
  border-top:1px solid var(--ns-border);
  background:var(--ns-elevated) !important;
}

/* --- 19.6 Aviso cuando no carga la librería de gráficos --- */
.ns-chart-off{
  text-align:center; color:var(--ns-text-3); font-size:var(--ns-fs-sm);
  padding:var(--ns-8) var(--ns-4); margin:0;
}

/* ==========================================================================
   20. REMAPEO DE LAS VARIABLES DE COLOR HEREDADAS
   --------------------------------------------------------------------------
   Varias hojas antiguas declaran su propia paleta pensada para fondo CLARO
   (por ejemplo detalle_moderno.css define --ink:#121826). Sobre el tema
   oscuro ese texto queda casi invisible.
   Redefiniéndolas aquí, cada elemento que las use se corrige por sí solo,
   sin tener que perseguir clase por clase.
   ========================================================================== */
:root,
body,
.page,.main,.container,.card,.dash,.logi-page,.board,
.page-detalle-evaluacion,.container-detalle,.main-panel{
  --ink:        var(--ns-text);
  --text:       var(--ns-text);
  --muted:      var(--ns-text-2);
  --plomo:      var(--ns-text-2);
  --bg:         transparent;
  --bg2:        var(--ns-surface-2);
  --bg-2:       var(--ns-surface-2);
  --card:       var(--ns-surface);
  --surface:    var(--ns-surface);
  --white:      var(--ns-surface-solid);
  --line:       var(--ns-border);
  --border:     var(--ns-border);
  --brand:      var(--ns-brand);
  --brand-2:    var(--ns-brand-3);
  --brand-dark: var(--ns-brand-2);
  --accent:     var(--ns-brand);
  --accent-2:   var(--ns-cyan);
  --danger:     var(--ns-danger);
  --success:    var(--ns-ok);
  --ok:         var(--ns-ok);
  --warn:       var(--ns-warn);
  --warning:    var(--ns-warn);
  --gray-900:   var(--ns-text);
  --gray-700:   var(--ns-text-2);
  --gray-500:   var(--ns-text-3);
}

/* Cabeceras y textos del detalle que llevaban color fijo */
.strong,.topbar-title h1,.detalle-title,.titulo-evaluacion,
.card-head h2,.card-head h3,.seccion-header h2,.doc-title,.item-title{
  color:var(--ns-text) !important;
}
.hint,.muted,.subtle,.sum-sub,.doc-sub{ color:var(--ns-text-2) !important; }
.sep{ color:var(--ns-text-3) !important; }

/* Insignias de calificación: fondo propio y texto legible */
.badge-excelente,.badge.excelente{ background:rgba(var(--ns-ok-rgb),.16) !important;     color:var(--ns-ok) !important;     border-color:rgba(var(--ns-ok-rgb),.32) !important; }
.badge-bueno,.badge.bueno{         background:rgba(var(--ns-cyan-rgb),.16) !important;   color:var(--ns-cyan) !important;   border-color:rgba(var(--ns-cyan-rgb),.32) !important; }
.badge-regular,.badge.regular{     background:rgba(var(--ns-warn-rgb),.18) !important;   color:var(--ns-warn) !important;   border-color:rgba(var(--ns-warn-rgb),.34) !important; }
.badge-malo,.badge.malo{           background:rgba(var(--ns-danger-rgb),.16) !important; color:var(--ns-danger) !important; border-color:rgba(var(--ns-danger-rgb),.32) !important; }
.badge-no-evaluado,.badge.no-evaluado{ background:var(--ns-surface-3) !important;        color:var(--ns-text-2) !important; }

/* Cabecera del detalle: el título y los KPI deben destacar */
.topbar,.detalle-head,.header-wrap{ color:var(--ns-text) !important; }
.topbar-right .kpi,.detalle-head .kpi{ background:var(--ns-surface-2) !important; }
.kpi .score,.kpi-value,.score{ color:var(--ns-brand) !important; }

/* --- 19.7 Los modales antiguos se abren con `display:block` por JS en línea,
   y el estilo en línea gana a la hoja: quedaban pegados arriba y sobresalían
   por abajo. Con el selector de atributo recuperamos el centrado. --- */
.modal[style*="display:block"],
.modal[style*="display: block"],
.modal-overlay[style*="display:block"],
.modal-overlay[style*="display: block"]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
@media (max-width:640px){
  .modal[style*="display:block"],
  .modal[style*="display: block"]{ align-items:flex-end !important; }
}

/* --- 19.8 Un ancestro con backdrop-filter, filter, transform o perspective
   convierte a los `position:fixed` descendientes en relativos a él. Varias
   vistas anidan sus modales dentro de contenedores así, y el modal aparecía
   desplazado y desbordando la pantalla. Se neutraliza en los contenedores
   que pueden contener modales. --- */
.buscador-container,.filtro-busqueda,.filters,.filtros,.searchbox,
.search,.search-group,.usuarios-toolbar,.page-tools,.header-table,
.actions-bar,.acciones,.container,.main,.main-panel,.page,.card{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* las tarjetas conservan el vidrio salvo que alberguen un modal */
.ns-card:not(:has(.modal)):not(:has(.ns-modal)){
  backdrop-filter:blur(var(--ns-blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--ns-blur)) saturate(150%);
}

/* --- 19.9 Dashboards: los KPI ocupan toda la fila y la leyenda usa el
   color de cada rango en lugar de píldoras grises. --- */
.kpis{ grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)) !important; }
.legend{ display:flex !important; flex-wrap:wrap; gap:var(--ns-4) !important; align-items:center; }
.legend__item{ display:inline-flex !important; align-items:center; gap:8px; font-weight:600; }
.legend__item .dot,.legend__item span:first-child{
  width:12px !important; height:12px !important; flex:0 0 12px !important;
  border-radius:4px !important; padding:0 !important; border:0 !important;
}
/* El color del punto sale de SU CLASE, no del sitio que ocupa en la fila.
   Con «:nth-child» la leyenda pintaba el primer punto de verde pasara lo que
   pasara: al cambiar el semáforo del área los puntos se quedaron con el color
   viejo y contradecían a las barras de su propio gráfico. Además, si algún día
   se reordena la leyenda o se añade un nivel, los colores bailan solos. */
.legend__item .dot.ex,.counts .dot.ex{ background:var(--ns-nv-exc) !important; }
.legend__item .dot.bu,.counts .dot.bu{ background:var(--ns-nv-bue) !important; }
.legend__item .dot.re,.counts .dot.re{ background:var(--ns-nv-reg) !important; }
.legend__item .dot.ma,.counts .dot.ma{ background:var(--ns-nv-mal) !important; }
.legend__item .dot.ne,.counts .dot.ne{ background:var(--ns-nv-sin) !important; }

/* Los puntos de los contadores tienen el mismo tamaño que los de la leyenda:
   la regla general de «.dot» los trata como píldoras de texto y les mete
   relleno, y sin esto salían como óvalos blancos sin color. */
.counts .dot{
  width:12px !important; height:12px !important; flex:0 0 12px !important;
  border-radius:50% !important; padding:0 !important; border:0 !important;
}

/* el lienzo del gráfico necesita alto propio */
.chart canvas,.grafico canvas,.chart-wrap canvas{ min-height:220px; }

/* --- 19.10 Dashboard de proveedores: rejilla de 12 columnas heredada y
   fichas de conteo con degradado blanco fijo. --- */
.kpis{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)) !important;
}
.kpis > .kpi,.kpis > article{ grid-column:auto !important; }
.counts{
  background:var(--ns-surface) !important;
  border-color:var(--ns-border) !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)) !important;
}
.counts .item{
  background:var(--ns-surface-2) !important;
  border-color:var(--ns-border) !important;
  color:var(--ns-text) !important;
}
.counts .item .v,.counts .item b,.counts .item strong{
  color:var(--ns-brand) !important; font-weight:800;
}
.counts .item .k,.counts .item span:first-child{ color:var(--ns-text-2) !important; }

/* nombres largos del navbar: mejor recortar con puntos que con una barra */
.ns-nav__link span{ overflow:hidden; text-overflow:ellipsis; }
@media (min-width:1024px) and (max-width:1400px){
  .ns-nav__link{ padding-inline:10px; }
  .ns-nav__link span{ max-width:15ch; }
}

/* --- 19.11 Columna de acciones fija: debe ser lo bastante ancha para sus
   botones. Si no, el contenido se desborda y se superpone a la columna
   anterior (se veía "Detalle" pisando el estado). --- */
@media (min-width:821px){
  table.ns-table--stick-actions td:last-child,
  table.ns-table--stick-actions th:last-child{
    min-width:230px; width:230px;
    padding-left:14px !important; padding-right:14px !important;
  }
  table.ns-table--stick-actions td:last-child > .ns-actions,
  table.ns-table--stick-actions td:last-child > div{
    display:flex; gap:6px; justify-content:flex-end;
    flex-wrap:nowrap; width:100%;
  }
  table.ns-table--stick-actions td:last-child .ns-btn{
    flex:0 0 auto; padding-inline:10px;
  }
  /* la primera columna fija también necesita su hueco */
  table.ns-table--stick-first td:first-child,
  table.ns-table--stick-first th:first-child{ min-width:62px; }
}

/* En tablas anchas los botones de acción se muestran solo con icono para
   que la columna fija no se coma el espacio de los datos. */
@media (min-width:821px) and (max-width:1600px){
  table.ns-table--stick-actions td:last-child .ns-btn span:not(.ns-chip__count){
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap;
  }
  table.ns-table--stick-actions td:last-child .ns-btn{
    width:38px; padding:0; justify-content:center;
  }
  table.ns-table--stick-actions td:last-child,
  table.ns-table--stick-actions th:last-child{ min-width:150px; width:150px; }
}


/* ==========================================================================
   21. INVENTARIO · la tabla cabe en pantalla sin desplazar
   Al reducir el listado a lo esencial (9 columnas) ya no hace falta el
   min-width:1600px que forzaba la hoja antigua.
   ========================================================================== */
.tabla-equipos{ min-width:0 !important; width:100% !important; table-layout:auto !important; }
.tabla-equipos th,.tabla-equipos td{ min-width:0 !important; }
.tabla-equipos th:nth-child(1),.tabla-equipos td:nth-child(1){ min-width:52px !important; width:52px; text-align:center; }
.tabla-equipos th:nth-child(2),.tabla-equipos td:nth-child(2){ min-width:180px !important; }
.tabla-equipos th:nth-child(3),.tabla-equipos td:nth-child(3){ min-width:130px !important; }
.tabla-equipos th:last-child,.tabla-equipos td:last-child{ width:1%; white-space:nowrap; text-align:right; }
.tabla-equipos td{ vertical-align:middle; }
/* el envoltorio deja de comportarse como carril de scroll */
.inventario-page .tabla-wrapper-scroll{ overflow-x:auto; }

@media (max-width:1100px){
  /* en pantallas medianas se recorta el procesador antes que romper la fila */
  .tabla-equipos th:nth-child(6),.tabla-equipos td:nth-child(6){ max-width:150px; }
  .tabla-equipos td:nth-child(6){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ==========================================================================
   22. DASHBOARD DE INVENTARIO
   Los selectores de Área y Sede se renderizaban como listas enormes vacías,
   la leyenda del donut ocupaba media pantalla y el logo final era gigante.
   ========================================================================== */
.dash-inv__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--ns-4); flex-wrap:wrap; margin-bottom:var(--ns-5);
}
.dash-inv__head .titulo{
  margin:4px 0 4px !important; font-size:clamp(1.35rem,3.2vw,1.9rem) !important;
  border:0 !important; padding:0 !important;
}

/* --- filtros: alto normal, no listas desplegadas --- */
.container-dashboard .filtros{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)) !important;
  gap:var(--ns-3) !important;
  align-items:end !important;
  padding:var(--ns-4) !important;
}
.container-dashboard .filtros label{
  display:flex; flex-direction:column; gap:6px; min-width:0; margin:0 !important;
}
.container-dashboard .filtros select{
  height:44px !important; min-height:44px !important; max-height:44px !important;
  overflow:hidden !important;
}
/* un <select> con `size` se dibuja como lista abierta: lo forzamos a desplegable */
.container-dashboard .filtros select[size]{ height:44px !important; }
.container-dashboard .filtro-botones{
  display:flex !important; gap:var(--ns-2) !important; flex-wrap:wrap;
  grid-column:1 / -1;
}
@media (min-width:900px){
  .container-dashboard .filtro-botones{ grid-column:auto; justify-content:flex-start; }
}

/* --- tarjetas de resumen --- */
.container-dashboard .resumenes{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)) !important;
  gap:var(--ns-3) !important;
}
.container-dashboard .resumenes .card{
  display:flex !important; align-items:center; justify-content:space-between;
  gap:var(--ns-3); padding:var(--ns-4) var(--ns-5) !important;
}
.container-dashboard .resumenes .card > div{
  font-size:var(--ns-fs-sm) !important; color:var(--ns-text-2) !important;
  font-weight:600; text-transform:none;
}
.container-dashboard .resumenes .card span{
  font-family:var(--ns-font-display) !important; font-weight:800 !important;
  font-size:1.7rem !important; color:var(--ns-text) !important;
  font-variant-numeric:tabular-nums; line-height:1;
}
.container-dashboard .resumenes .card-total span{ color:var(--ns-brand) !important; }

/* --- gráficos: alto propio y el donut principal a dos tercios --- */
.container-dashboard .graficos{
  display:grid !important; gap:var(--ns-4) !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)) !important;
}
.container-dashboard .grafico{ padding:var(--ns-5) !important; min-width:0; }
.container-dashboard .grafico-principal{ grid-column:1 / -1 !important; }
.container-dashboard .grafico canvas{
  width:100% !important; height:260px !important; max-height:260px !important;
}
.container-dashboard .grafico-principal canvas{ height:340px !important; max-height:340px !important; }
.container-dashboard .titulo-grafico{
  font-family:var(--ns-font-display) !important; font-weight:600 !important;
  font-size:var(--ns-fs-md) !important; color:var(--ns-text) !important;
  text-align:left !important; margin:0 0 var(--ns-4) !important;
  padding-bottom:var(--ns-3); border-bottom:1px solid var(--ns-border);
}

/* --- pie: el logo era gigantesco --- */
.logo-final,.dash-inv__pie{
  display:flex !important; align-items:center; justify-content:center;
  gap:var(--ns-3); margin-top:var(--ns-8) !important;
  padding-top:var(--ns-5); border-top:1px solid var(--ns-border);
  opacity:.55;
}
.logo-final img,.dash-inv__pie img{
  width:auto !important; max-width:130px !important; height:34px !important;
  object-fit:contain; filter:grayscale(.2);
}
.dash-inv__pie span{ font-size:var(--ns-fs-xs); color:var(--ns-text-3); }
.logo-final img:hover,.dash-inv__pie img:hover{ transform:none !important; }

@media (max-width:640px){
  .container-dashboard .grafico canvas,
  .container-dashboard .grafico-principal canvas{ height:230px !important; max-height:230px !important; }
  .dash-inv__pie span{ display:none; }
}

/* ==========================================================================
   23. MODALES SIN ZONA DE DESPLAZAMIENTO PROPIA
   --------------------------------------------------------------------------
   La regla anterior ponía overflow:hidden en .modal-content dando por hecho
   que dentro habría un <form> o un .modal-body que se desplazara. Los modales
   que no lo tienen (por ejemplo «Accesos de plataformas») quedaban cortados
   y sin manera de moverse.
   Ahora el propio contenedor se desplaza salvo que tenga un hijo que ya lo haga.
   ========================================================================== */
.modal-content,.modal-contenido,.modal-dialog,.modal-edicion-content{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
}
/* Si sí hay una zona designada, el contenedor vuelve a fijarse y desplaza el hijo */
.modal-content:has(> form),
.modal-content:has(> .modal-body),
.modal-contenido:has(> form),
.modal-contenido:has(> .modal-body),
.modal-dialog:has(> .modal-body){
  overflow:hidden !important;
}
/* marcado por JavaScript cuando :has() no está disponible */
.modal-content.ns-scroll-propio,
.modal-contenido.ns-scroll-propio{ overflow-y:auto !important; }
.modal-content.ns-scroll-hijo,
.modal-contenido.ns-scroll-hijo{ overflow:hidden !important; }

/* el aspa de cerrar debe seguir visible aunque el contenido se desplace */
.modal-content > .close,.modal-contenido > .close,
.modal-content > .cerrar-modal{
  position:sticky !important; top:0; float:right; z-index:5; margin-left:auto;
}

/* ==========================================================================
   26. BARRA DE NAVEGACIÓN · nombres cortos en PC, completos en el cajón
   --------------------------------------------------------------------------
   Con 5 enlaces (Proveedores) el menú se desbordaba en horizontal y el
   último — Dashboard — quedaba fuera de la vista. En PC se muestra el
   nombre corto (con el completo en el tooltip) y en el menú lateral, donde
   sobra sitio, el nombre completo.
   ========================================================================== */
.ns-nav__link-largo{ display:none; }
.ns-nav__link-corto{ display:inline; }

@media (max-width:1023px){
  .ns-nav__link-largo{ display:inline; }
  .ns-nav__link-corto{ display:none; }
}

/* Si aun así no cupieran, se avisa con un degradado en el borde derecho. */
@media (min-width:1024px){
  .ns-nav__menu{ position:relative; scroll-snap-type:x proximity; }
  .ns-nav__menu > li{ scroll-snap-align:start; }
  .ns-nav__link span{ max-width:none; }
}

/* Estados que aplica el ajuste automático de la barra (newson-ui.js). */
@media (min-width:1024px){
  .ns-nav--apretado .ns-nav__user-info{ display:none !important; }
  .ns-nav--apretado .ns-nav__user{ padding:5px !important; max-width:none !important; }
  .ns-nav--apretado .ns-nav__brand-txt{ display:none !important; }
  .ns-nav--apretado .ns-nav__brand{ max-width:none !important; }

  .ns-nav--iconos .ns-nav__link-corto,
  .ns-nav--iconos .ns-nav__link-largo{ display:none !important; }
  .ns-nav--iconos .ns-nav__link{ padding-inline:12px !important; }
  .ns-nav--iconos .ns-nav__link i{ font-size:1.05rem; opacity:1; }
}

/* ==========================================================================
   27. BOTONES HEREDADOS QUE YA SON BOTONES DEL TEMA
   --------------------------------------------------------------------------
   Varias hojas antiguas pintan .btn-accion / .btn-editar / .btn-eliminar con
   colores planos y !important. Cuando el elemento YA lleva .ns-btn (los
   iconos de acción nuevos), esas reglas ganaban y el botón salía en rojo
   sólido, descolgado del resto. Aquí se devuelve el mando al tema.
   ========================================================================== */
.ns-btn.btn-accion,
.ns-btn.btn-editar,
.ns-btn.btn-eliminar,
.ns-btn.btn-eliminar-def,
.ns-btn.btn-baja{
  background:var(--btn-bg) !important;
  color:var(--btn-fg) !important;
  border:1px solid var(--btn-bd) !important;
  box-shadow:none !important;
  filter:none !important;
  font-size:var(--ns-fs-sm) !important;
  width:32px !important; min-width:32px !important; height:32px !important;
  min-height:32px !important; padding:0 !important;
  border-radius:var(--ns-r-xs) !important;
  display:inline-grid !important; place-items:center !important;
  text-decoration:none !important;
}
.ns-btn.btn-accion:hover,
.ns-btn.btn-editar:hover,
.ns-btn.btn-eliminar:hover,
.ns-btn.btn-eliminar-def:hover,
.ns-btn.btn-baja:hover{
  filter:brightness(1.12) !important;
  border-color:var(--btn-fg) !important;
}
.ns-btn.btn-accion i,
.ns-btn.btn-editar i,
.ns-btn.btn-eliminar i,
.ns-btn.btn-eliminar-def i,
.ns-btn.btn-baja i{ font-size:.86rem; line-height:1; }

/* La columna de acciones no se estira ni se recorta. El ancho mínimo evita
   que, al ser `width:1%`, los iconos se salgan hacia la columna anterior. */
th.col-acciones,td.col-acciones{
  width:1%; white-space:nowrap; text-align:right;
  min-width:calc(4 * 32px + 3 * 5px + 2 * var(--ns-4));
}
td.col-acciones .ns-actions--iconos{ justify-content:flex-end; }
td.col-acciones,th.col-acciones{ vertical-align:middle; }
@media (max-width:820px){
  th.col-acciones,td.col-acciones{ min-width:0; }
}

/* Exportaciones y filtros: mismo lenguaje que el resto del sistema */
.btn-export{
  border-radius:var(--ns-r-sm) !important;
  border:1px solid var(--ns-border) !important;
  box-shadow:none !important;
  font-weight:600 !important;
  min-height:40px;
}
.btn-export.btn-pdf{
  background:rgba(var(--ns-danger-rgb),.14) !important;
  color:var(--ns-danger) !important;
  border-color:rgba(var(--ns-danger-rgb),.30) !important;
}
.btn-export.btn-excel{
  background:rgba(var(--ns-ok-rgb),.14) !important;
  color:var(--ns-ok) !important;
  border-color:rgba(var(--ns-ok-rgb),.30) !important;
}
.btn-export:hover{ filter:brightness(1.12) !important; }

/* El contenedor de la lista es flex: sin esto la tabla se encoge al ancho
   de su contenido y deja medio panel vacío a la derecha. */
.ns-table-scroll,
.ns-table-wrap,
.tabla-container,
.tabla-scroll{
  width:100% !important;
  flex:1 1 100% !important;
  min-width:0 !important;
  align-self:stretch;
}

/* Botones de orden en la cabecera de la tabla */
.ns-sort{
  width:26px; height:26px; padding:0;
  display:inline-grid; place-items:center;
  border:1px solid var(--ns-border); border-radius:var(--ns-r-xs);
  background:var(--ns-surface-2); color:var(--ns-text-2);
  font-size:.72rem; cursor:pointer; vertical-align:middle;
  transition:all var(--ns-t);
}
.ns-sort:hover{ color:var(--ns-brand); border-color:var(--ns-border-glow); background:var(--ns-surface-3); }

/* ==========================================================================
   28. PESTAÑAS EN MÓVIL · todas a la vista, sin arrastrar de lado
   Con overflow-x las pestañas de la derecha quedaban fuera de la pantalla y
   había que descubrirlas deslizando. En móvil se reparten en dos columnas.
   ========================================================================== */
@media (max-width:760px){
  .ns-tabs,
  .tabs,
  .eq-tabs,
  .rrhh-tabs{
    flex-wrap:wrap !important;
    overflow-x:visible !important;
  }
  .ns-tabs > .ns-tab,
  .tabs > .tab-btn,
  .eq-tabs > .ns-tab{
    flex:1 1 calc(50% - 6px) !important;
    min-width:0 !important;
    justify-content:center;
    text-align:center;
    white-space:normal !important;
  }
}

/* ==========================================================================
   29. CONTRASTE · casos que el tema no alcanzaba
   --------------------------------------------------------------------------
   Detectados con una auditoría automática de contraste (mínimo 4,5:1 en texto
   normal y 3:1 en texto grande) sobre las 21 pantallas, en los dos temas.
   ========================================================================== */

/* El enlace activo de la barra: naranja sobre naranja pálido en tema claro. */
[data-theme="light"] .ns-nav__link.is-active,
:root:not([data-theme="dark"]) .ns-nav__link.is-active{
  color:var(--ns-brand-text) !important;
  background:rgba(var(--ns-brand-rgb),.10) !important;
}

/* Insignias de color: el texto necesita el tono fuerte, no el pastel. */
[data-theme="light"] .ns-badge--ok,
:root:not([data-theme="dark"]) .ns-badge--ok{ color:#0F7A3D !important; }
[data-theme="light"] .ns-badge--warn,
:root:not([data-theme="dark"]) .ns-badge--warn{ color:#8A5A00 !important; }
[data-theme="light"] .ns-badge--danger,
:root:not([data-theme="dark"]) .ns-badge--danger{ color:#B21D33 !important; }
[data-theme="light"] .ns-badge--brand,
:root:not([data-theme="dark"]) .ns-badge--brand{ color:#A8530A !important; }
[data-theme="light"] .ns-badge--info,
:root:not([data-theme="dark"]) .ns-badge--info{ color:#0B6E85 !important; }

[data-theme="dark"] .ns-badge--ok,
:root:not([data-theme="light"]) .ns-badge--ok{ color:#5FE39C !important; }
[data-theme="dark"] .ns-badge--danger,
:root:not([data-theme="light"]) .ns-badge--danger{ color:#FF97A8 !important; }

/* Filtros de calificación de proveedores: cian sobre cian pálido.
   Los cuatro de nivel quedan FUERA («:not»): tienen su propio color del
   semáforo y su tinta a juego. Sin esa exclusión, esta regla —que va casi al
   final del archivo y lleva el peso de un atributo— les reponía el cian y
   quedaban en 1,4:1 sobre su fondo de color. */
.btn-filtro{ font-weight:700 !important; }
[data-theme="light"] .btn-filtro:not(.btn-excelente):not(.btn-bueno):not(.btn-regular):not(.btn-malo),
:root:not([data-theme="dark"]) .btn-filtro:not(.btn-excelente):not(.btn-bueno):not(.btn-regular):not(.btn-malo){ color:#0B5E70 !important; }

/* Insignias heredadas con pastel propio */
.badge-rol{ color:var(--ns-text) !important; background:var(--ns-surface-2) !important;
            border:1px solid var(--ns-border) !important; }
.badge-baja{ color:var(--ns-danger) !important; background:rgba(var(--ns-danger-rgb),.14) !important;
             border:1px solid rgba(var(--ns-danger-rgb),.30) !important; }
/* ---- Estados de las solicitudes de herramientas -----------------------
   Cada estado con su color, para reconocerlo de un vistazo sin leer la
   palabra. Va aquí y no en rrhh.css porque la regla genérica de «.status»
   (sección 10) le imponía a las cuatro el mismo gris y ganaba por ir después.
   El color se usa en el texto y en un fondo tenue del mismo tono; nunca el
   tono vivo como color de letra. */
.status.nuevo,.status.proceso,.status.realizado,.status.cerrado,.status.cancelado{
  font-weight:800 !important;
  border:1px solid rgba(var(--st-rgb),.34) !important;
  background:rgba(var(--st-rgb),.14) !important;
  color:var(--st-text) !important;
}
.status.nuevo    { --st-rgb:var(--ns-st-nuevo-rgb);     --st-text:var(--ns-st-nuevo-text); }
.status.proceso  { --st-rgb:var(--ns-st-proceso-rgb);   --st-text:var(--ns-st-proceso-text); }
.status.realizado{ --st-rgb:var(--ns-st-realizado-rgb); --st-text:var(--ns-st-realizado-text); }
.status.cerrado  { --st-rgb:var(--ns-st-cerrado-rgb);   --st-text:var(--ns-st-cerrado-text); }
.status.cancelado{ --st-rgb:var(--ns-st-cancelado-rgb); --st-text:var(--ns-st-cancelado-text); }

/* La banda de color de la tarjeta sigue el mismo estado que su etiqueta, para
   que el tablero se lea de lejos sin tener que fijarse en la píldora. */
.req-card--nuevo    { --st-c:var(--ns-st-nuevo); }
.req-card--proceso  { --st-c:var(--ns-st-proceso); }
.req-card--realizado{ --st-c:var(--ns-st-realizado); }
.req-card--cerrado  { --st-c:var(--ns-st-cerrado); }
.req-card--cancelado{ --st-c:var(--ns-st-cancelado); }
/* La banda va como sombra interior y no sobre ::before: ese pseudo-elemento
   ya lo usa la tarjeta para su degradado de fondo, y pintarlo de color plano
   se lo cargaba. */
.req-card[class*="req-card--"]{
  box-shadow: inset 4px 0 0 var(--st-c) !important;
  border-left-color: var(--st-c) !important;
}

/* Una solicitud cancelada o cerrada se apaga: sigue leyéndose, pero no compite
   con las que siguen vivas. */
.req-card--cancelado,.req-card--cerrado{ opacity:.82; }

/* Texto secundario heredado que quedaba demasiado apagado */
.hint,.sin-registros,.meta-empty,.kpi-label,.kpi-unit,.req-mini,.sum-sub{
  color:var(--ns-text-2) !important;
}

/* Cabecera del detalle de proveedor: era un panel blanco con texto claro. */
.topbar,.header-sticky,.kpi{
  background:var(--ns-surface) !important;
  color:var(--ns-text) !important;
}
.topbar-title h1,.topbar .strong,.topbar-meta,.topbar-meta span{ color:var(--ns-text) !important; }
.topbar-meta .sep,.topbar-meta .dot{ color:var(--ns-text-3) !important; }

/* El naranja de marca, cuando hace de texto, usa el tono legible del tema. */
.ns-eyebrow,.ns-nav__brand-name,.ns-quick__title,.ns-chip__count,
.ns-ticket__id,.sum-id,.req-id,.dni-chip,.kpi-value,.pill.si,
.ns-nav__link.is-active,.ns-nav__link.is-active i{
  color:var(--ns-brand-text) !important;
}
.ns-nav__link.is-active .ns-nav__link-corto,
.ns-nav__link.is-active .ns-nav__link-largo{ color:inherit !important; }

/* Botones rojos: el degradado claro dejaba el texto blanco casi ilegible. */
.btn-pdf,.btn-exportar-pdf,.btn-export.pdf,.btn-danger,.btn-eliminar-def{
  background:linear-gradient(135deg,#E11D48,#BE123C) !important;
  color:#fff !important;
}
.btn-export.btn-excel,.btn-excel{
  background:linear-gradient(135deg,#0F8A4C,#0B7040) !important;
  color:#fff !important;
}

/* Últimos casos de la auditoría de contraste */
.pill.si{ color:var(--ns-ok) !important; background:rgba(var(--ns-ok-rgb),.14) !important; }
.pill.no{ color:var(--ns-warn) !important; background:rgba(var(--ns-warn-rgb),.16) !important; }
[data-theme="light"] .pill.si,
:root:not([data-theme="dark"]) .pill.si{ color:#0F7A3D !important; }
[data-theme="light"] .pill.no,
:root:not([data-theme="dark"]) .pill.no{ color:#8A5A00 !important; }

.badge-excelente,.badge-bueno,.badge-regular,.badge-malo,.badge-no-evaluado{ font-weight:700 !important; }
[data-theme="light"] .badge-excelente,
:root:not([data-theme="dark"]) .badge-excelente{ color:#0F7A3D !important; }
[data-theme="light"] .badge-bueno,
:root:not([data-theme="dark"]) .badge-bueno{ color:#0B5E70 !important; }
[data-theme="light"] .badge-regular,
:root:not([data-theme="dark"]) .badge-regular{ color:#8A5A00 !important; }
[data-theme="light"] .badge-malo,
:root:not([data-theme="dark"]) .badge-malo{ color:#B21D33 !important; }
[data-theme="dark"] .badge-baja,
:root:not([data-theme="light"]) .badge-baja{ color:#FF97A8 !important; }

/* Pestañas de estado del inventario y textos apagados heredados */
.inv-estados .ns-chip.is-active,.inv-estados .ns-chip[aria-selected="true"]{
  color:var(--ns-brand-text) !important;
}
.ns-dim,.header-bajas p,.baja-sub,.sub{ color:var(--ns-text-2) !important; }

/* ---------------------------------------------------------------------
   Cifras de la cabecera del panel.
   Estaban en el naranja de texto, que sobre papel se lee como marrón
   apagado. Van en el color de texto normal, que además contrasta mejor;
   el naranja se reserva para el acento de la izquierda.
   --------------------------------------------------------------------- */
.ns-page-head__stats b{ color:var(--ns-text) !important; }
.ns-page-head__stats span,.ns-page-head__stats b + span{ color:var(--ns-text-2) !important; }

/* Insignias e indicadores de color: texto con el tono legible del tema. */
.ns-badge--ok    { color:var(--ns-ok-text)     !important; }
.ns-badge--warn  { color:var(--ns-warn-text)   !important; }
.ns-badge--danger{ color:var(--ns-danger-text) !important; }
.ns-badge--cyan  { color:var(--ns-cyan-text)   !important; }
.ns-badge--brand { color:var(--ns-brand-text)  !important; }
.ns-badge--violet{ color:var(--ns-violet-text) !important; }
.ns-chip.is-active,.ns-chip[aria-selected="true"]{ color:var(--ns-brand-text) !important; }

/* Verde de exportación un punto más oscuro para llegar al mínimo. */
.btn-export.btn-excel,.btn-excel{
  background:linear-gradient(135deg,#0C7A43,#095C33) !important;
}
.btn-export .btn-text,.btn-export span{ color:#fff !important; }

/* Los últimos ocho casos, uno por uno */
.btn-export,.btn-export *,
.btn-excel,.btn-excel *,
.btn-pdf,.btn-pdf *,
.btn-export.btn-pdf,.btn-export.btn-pdf *,
.btn-export.btn-excel,.btn-export.btn-excel *{ color:#fff !important; }
/* Los hijos nunca pintan fondo propio: el color va en el botón. */
.btn-export *,.btn-excel *,.btn-pdf *{
  background:none !important; border:0 !important; box-shadow:none !important;
}
.btn-export.btn-pdf,.btn-export.pdf{
  background:linear-gradient(135deg,#E11D48,#BE123C) !important;
  border-color:transparent !important;
}
.btn-export.btn-excel,.btn-excel,.btn-export.excel{
  background:linear-gradient(135deg,#0A6A3A,#08512C) !important;
  border-color:transparent !important;
}

/* Cifras y rótulos de marca dentro de tarjetas claras.
   (Las cifras de la cabecera del panel NO van aquí: en naranja se leían
   como marrón apagado, así que usan el color de texto normal.) */
.card-total span,.card span,
.inv-estados .ns-chip{ color:var(--ns-brand-text) !important; }
.inv-estados .ns-chip:not(.is-active){ color:var(--ns-text-2) !important; }

.badge-baja{ color:var(--ns-danger-text) !important; }
.baja-nota,.proveedores-baja .sub,.proveedores-baja p{ color:var(--ns-text-2) !important; }
.btn-export.excel{ background:linear-gradient(135deg,#0C7A43,#0F8A4C) !important; }

/* Cifras grandes de los paneles: el naranja vivo no se lee sobre papel. */
.ns-kpi__value,.card-total > span,.card > span,
.kpi-num,.kpi-value,.total-num{ color:var(--ns-brand-text) !important; }

/* Pestañas de estado del inventario: la activa lleva relleno, no solo color. */
.inv-estados .ns-chip.is-active{
  background:rgba(var(--ns-brand-rgb),.16) !important;
  border-color:rgba(var(--ns-brand-rgb),.38) !important;
  color:var(--ns-brand-text) !important;
}

/* Cierre de la auditoría: los seis últimos, por selector concreto. */
/* El fondo lo lleva SOLO el botón. Al aplicarlo también a sus hijos, el
   icono y el texto salían como cajas con su propio fondo dentro del botón. */
#btn-export-excel,.btn-export.excel{
  background-image:linear-gradient(135deg,#0A6A3A,#08512C) !important;
  color:#fff !important;
}
#btn-export-excel > *,.btn-export.excel > *,
#btn-export-excel *,.btn-export.excel *,
.btn-export > *,.btn-export *{
  background:none !important;
  background-image:none !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:inherit !important;
}

/* Cifras naranjas sueltas dentro de tarjetas claras */
.ns-kpi b,.ns-kpi strong,.resumen b,.resumen span,
.card-total b,.card-total span,.total-equipos,#total-equipos{
  color:var(--ns-brand-text) !important;
}

/* Texto gris fijo de proveedores dados de baja */
.proveedores-baja *[style*="color"],
.seccion-baja .sub,.seccion-baja small,.tabla-bajas small{
  color:var(--ns-text-2) !important;
}

/* Pestaña activa del inventario: el texto necesita más peso sobre su relleno. */
.inv-estados .ns-chip.is-active span:not(.ns-chip__count){
  color:var(--ns-text) !important; font-weight:700;
}
.inv-estados .ns-chip.is-active .ns-chip__count{
  background:var(--ns-brand) !important; color:#150A00 !important;
}
/* Rótulos de sección en Proveedores de baja y pie de página */
.seccion-header span,.dash-inv__pie span,.dash-inv__pie small,
footer span,footer small{ color:var(--ns-text-2) !important; }

/* Los botones del cajón (tema y densidad) se comportan como enlaces. */
@media (max-width:1023px){
  button.ns-nav__link{
    font-family:inherit; cursor:pointer; width:100%;
    color:var(--ns-text-2);
  }
  button.ns-nav__link:hover{ color:var(--ns-text); }
}

/* Cifras grandes de los indicadores.
   Sobre papel el naranja de marca se lee como marrón apagado, así que ahí
   van en el color de texto normal; el color de cada tarjeta ya lo dan la
   barra superior y el icono. En tema oscuro el naranja sí brilla y se queda. */
[data-theme="light"] .ns-kpi__value,
[data-theme="light"] .kpi-num,
[data-theme="light"] .kpi-value,
[data-theme="light"] .card-total > span,
[data-theme="light"] .card > span,
:root:not([data-theme="dark"]) .ns-kpi__value,
:root:not([data-theme="dark"]) .kpi-num,
:root:not([data-theme="dark"]) .kpi-value,
:root:not([data-theme="dark"]) .card-total > span,
:root:not([data-theme="dark"]) .card > span{
  color:var(--ns-text) !important;
}

/* Enlaces dentro de tablas y del directorio: el naranja vivo no se lee
   sobre papel. */
.ns-link,a.ns-link{ color:var(--ns-brand-text) !important; text-decoration:none; }
.ns-link:hover,a.ns-link:hover{ text-decoration:underline; }

/* Botón suave verde: un punto más de contraste sobre su propio relleno. */
[data-theme="light"] .ns-btn--soft-ok,
:root:not([data-theme="dark"]) .ns-btn--soft-ok{ --btn-fg:#0A6136; }

/* ============================================================================
   30 · Información del Personal (micro-sistema Directorio)
   ========================================================================= */
.dir-panel{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--ns-5);
  margin-top:var(--ns-5);
}
.dir-panel__areas{ grid-column:span 6; }
.dir-panel__pend { grid-column:span 6; }
.dir-panel__bajas{ grid-column:span 12; }

@media (max-width:960px){
  .dir-panel__areas,
  .dir-panel__pend,
  .dir-panel__bajas{ grid-column:span 12; }
}

/* Barras de reparto por área */
.dir-barras{ list-style:none; margin:0; padding:0; display:grid; gap:var(--ns-3); }

.dir-barra{
  display:grid;
  grid-template-columns:minmax(120px,34%) 1fr auto;
  align-items:center;
  gap:var(--ns-3);
}
.dir-barra__nombre{
  font-size:var(--ns-fs-sm);
  font-weight:600;
  color:var(--ns-text);
  text-decoration:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dir-barra__nombre:hover{ color:var(--ns-brand-text); text-decoration:underline; }

.dir-barra__pista{
  display:block;
  height:9px;
  border-radius:999px;
  background:var(--ns-surface-3);
  overflow:hidden;
}
.dir-barra__relleno{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--ns-brand),var(--ns-brand-2,var(--ns-brand)));
}
.dir-barra__cifra{
  font-variant-numeric:tabular-nums;
  font-size:var(--ns-fs-sm);
  color:var(--ns-text);
  min-width:2.5ch;
  text-align:right;
}

/* Listas de pendientes y cesados */
.dir-pend{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }

.dir-pend__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ns-3);
  padding:var(--ns-2) 0;
  border-bottom:1px solid var(--ns-border-soft,var(--ns-border));
}
.dir-pend__item:last-child{ border-bottom:0; }

.dir-pend__nombre{
  font-size:var(--ns-fs-sm);
  color:var(--ns-text);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dir-pend__faltas{
  display:flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
}

/* La bajada de la cabecera no debe empujar al botón a otra línea */
.ns-page-head > div:first-child{ flex:1 1 420px; min-width:0; }
.ns-page-head__sub{ max-width:78ch; }

/* ============================================================================
   31 · Campos con icono: el icono deja de flotar sobre el texto
   ----------------------------------------------------------------------------
   Antes el icono iba en posición absoluta y el hueco lo hacía el relleno
   izquierdo del campo. Bastaba con que otra regla reiniciara ese relleno para
   que el icono acabara encima de la primera letra. Ahora el icono es una
   celda más de la fila: ocupa su propio espacio y el texto no puede quedar
   debajo, gane la regla de relleno que gane.
   ========================================================================= */
.ns-input-group{
  position:relative;
  display:flex;
  align-items:stretch;
  width:100%;
  background:var(--ns-surface-2);
  border:1px solid var(--ns-border);
  border-radius:var(--ns-r-sm);
  min-height:44px;
  overflow:hidden;
  transition:border-color var(--ns-t), box-shadow var(--ns-t);
}

.ns-input-group:hover{ border-color:var(--ns-border-2); }

.ns-input-group:focus-within{
  border-color:var(--ns-brand);
  box-shadow:0 0 0 4px rgba(var(--ns-brand-rgb),.14);
}

/* El icono, ahora en el flujo. El «order» lo coloca siempre a la izquierda
   aunque en el HTML venga escrito después del campo, como en el login. */
.ns-input-group > .ns-input-group__icon{
  position:static !important;
  order:0;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  padding:0;
  margin:0;
  color:var(--ns-text-3);
  font-size:.95rem;
  pointer-events:none;
  transition:color var(--ns-t);
}

.ns-input-group:focus-within > .ns-input-group__icon{ color:var(--ns-brand-text); }

/* El campo: sin fondo ni borde propios, que ya los pone el grupo */
.ns-input-group > input,
.ns-input-group > .ns-input,
.ns-input-group > select,
.ns-input-group > textarea{
  order:1;
  flex:1 1 auto;
  min-width:0;
  padding-left:2px !important;
  padding-right:12px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  min-height:42px;
}

/* Si no hay icono, el campo recupera su propio margen izquierdo */
.ns-input-group:not(:has(.ns-input-group__icon)) > input,
.ns-input-group:not(:has(.ns-input-group__icon)) > .ns-input{ padding-left:14px !important; }

/* Botón de la derecha (el ojo de la contraseña), también en el flujo */
.ns-input-group > .ns-input-group__action{
  position:static !important;
  order:2;
  flex:0 0 auto;
  width:42px;
  height:auto;
  margin:0;
  border:0;
  background:transparent;
  color:var(--ns-text-3);
  cursor:pointer;
  border-radius:0;
}
.ns-input-group > .ns-input-group__action:hover{
  color:var(--ns-brand-text);
  background:var(--ns-surface-3);
}

/* Ya no hace falta el relleno que dejaba sitio al botón */
.ns-input-group:has(.ns-input-group__action) > input,
.ns-input-group:has(.ns-input-group__action) > .ns-input{ padding-right:2px !important; }

/* El aspa de «limpiar» de los campos type=search se sale del recuadro */
.ns-input-group > input[type="search"]::-webkit-search-cancel-button{ margin-right:4px; }

/* ============================================================================
   32 · Ficha del directorio y selector de columnas al exportar
   ========================================================================= */

/* Bloques de la ficha: separan lo que viene de Claves de lo propio de RRHH */
.ns-ficha-bloque{
  border:1px solid var(--ns-border);
  border-radius:var(--ns-r-md);
  padding:var(--ns-4) var(--ns-4) var(--ns-3);
  margin:0 0 var(--ns-5);
  min-width:0;
}
.ns-ficha-bloque > legend{
  display:flex; align-items:center; gap:8px;
  padding:0 8px;
  font-size:var(--ns-fs-sm);
  font-weight:600;
  color:var(--ns-text-2);
}

/* Cuando el rol no puede tocarlos, se ve a simple vista */
.ns-ficha-bloque--bloqueado{
  background:var(--ns-surface-2);
  border-style:dashed;
}
.ns-ficha-bloque--bloqueado .ns-input{
  background:var(--ns-surface-3) !important;
  color:var(--ns-text-2) !important;
  cursor:default;
}
.ns-ficha-bloque--bloqueado .ns-input:focus{
  border-color:var(--ns-border) !important;
  box-shadow:none !important;
}

/* Selector de columnas */
.ns-export-campos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--ns-4);
  margin-bottom:var(--ns-4);
}
.ns-export-grupo{
  border:1px solid var(--ns-border);
  border-radius:var(--ns-r-md);
  padding:var(--ns-3) var(--ns-4) var(--ns-4);
  min-width:0;
}
.ns-export-grupo > legend{
  display:flex; align-items:center; gap:8px;
  padding:0 6px;
  font-size:var(--ns-fs-sm);
  font-weight:600;
  color:var(--ns-text-2);
}
.ns-export-lista{ display:grid; gap:10px; }
.ns-export-lista .ns-check{ font-size:var(--ns-fs-sm); }

.ns-export-atajos{
  display:flex; flex-wrap:wrap; gap:8px;
  padding-top:var(--ns-2);
  border-top:1px solid var(--ns-border-soft,var(--ns-border));
}

.ns-export-aviso{
  margin:var(--ns-3) 0 0;
  color:var(--ns-warn-text,var(--ns-warn));
  font-weight:600;
}

/* El pie del modal de exportación lleva tres botones: que respiren en móvil */
@media (max-width:560px){
  #modalExportar .ns-modal__foot{ flex-wrap:wrap; }
  #modalExportar .ns-modal__foot .ns-btn{ flex:1 1 100%; justify-content:center; }
}

/* ============================================================================
   33 · Inventario TI · sección de stock
   ========================================================================= */

/* Botón del stock. El violeta ya está en los tokens del sistema y calibrado
   para los dos temas; solo faltaba la variante «soft», como las demás. */
.ns-btn--soft-violet{
  --btn-bg:rgba(var(--ns-violet-rgb),.13);
  --btn-fg:var(--ns-violet-text);
  --btn-bd:rgba(var(--ns-violet-rgb),.26);
}

/* Repartos del almacén: por tipo, por ubicación y por motivo */
.stock-repartos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--ns-4);
  margin:var(--ns-5) 0;
}

.stock-lista{ list-style:none; margin:0; padding:0; display:grid; gap:var(--ns-3); }

.stock-lista__fila{
  display:grid;
  grid-template-columns:minmax(90px,40%) 1fr auto;
  align-items:center;
  gap:var(--ns-3);
}

.stock-lista__nombre{
  font-size:var(--ns-fs-sm);
  color:var(--ns-text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.stock-lista__pista{
  display:block;
  height:8px;
  border-radius:999px;
  background:var(--ns-surface-3);
  overflow:hidden;
}

.stock-lista__relleno{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--ns-brand),var(--ns-brand-2,var(--ns-brand)));
}

.stock-lista__cifra{
  font-variant-numeric:tabular-nums;
  font-size:var(--ns-fs-sm);
  color:var(--ns-text);
  min-width:2.5ch;
  text-align:right;
}

/* Cuánto lleva parado un equipo. A partir de tres meses, se avisa. */
.stock-tiempo{
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--ns-text);
}

.stock-tiempo--largo{
  color:var(--ns-warn-text,var(--ns-warn));
}

.stock-tiempo--largo::before{
  content:'\f071';                       /* triángulo de aviso */
  font-family:'Font Awesome 6 Free';
  font-weight:900;
  font-size:.8em;
  margin-right:5px;
}