/* Nexus Modern UI - Modernización global de la interfaz
   Se inyecta en todas las páginas de Nexus automáticamente.
   Colores corporativos GSF: azul #003366, rojo #c62828, blanco.
*/
:root{
  --nx-primary:#003366;
  --nx-primary-600:#004a8a;
  --nx-primary-soft:#eef4fa;
  --nx-primary-tint:#f5f8fc;
  --nx-accent:#c62828;
  --nx-bg:#f5f8fc;
  --nx-card:#ffffff;
  --nx-text:#0f172a;
  --nx-text-light:#64748b;
  --nx-border:#e2e8f0;
  --nx-shadow:0 1px 3px rgba(0,51,102,0.06),0 4px 16px rgba(0,51,102,0.06);
  --nx-shadow-lg:0 8px 30px rgba(0,51,102,0.12);
  --nx-radius:14px;
  --nx-radius-sm:10px;
  --nx-font:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ===== FONDO GLOBAL ===== */
body{
  background:var(--nx-bg) !important;
  font-family:var(--nx-font) !important;
  color:var(--nx-text) !important;
  -webkit-font-smoothing:antialiased !important;
  letter-spacing:0 !important;
}

/* ===== CARDS (modernas, redondeadas, sombra suave) ===== */
.card, .card-item, .info-card, .documento-card, .cliente-card, .kpi-card, .pedido-card, .tabla-card{
  background:var(--nx-card) !important;
  border-radius:var(--nx-radius) !important;
  border:1px solid var(--nx-border) !important;
  box-shadow:var(--nx-shadow) !important;
  transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .18s cubic-bezier(.23,1,.32,1) !important;
}
.card:hover, .card-item:hover, .cliente-card:hover, .kpi-card:hover{
  transform:translateY(-2px) !important;
  box-shadow:var(--nx-shadow-lg) !important;
  border-color:#d3e2f0 !important;
}

/* ===== BOTONES (modernos) ===== */
button, .btn, .btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-secondary{
  border-radius:var(--nx-radius-sm) !important;
  font-weight:600 !important;
  transition:all .18s cubic-bezier(.23,1,.32,1) !important;
}
.btn-primary, button[style*="background:#003366"]{
  background:var(--nx-primary) !important;
}
.btn-primary:hover{
  background:var(--nx-primary-600) !important;
  box-shadow:0 4px 12px rgba(0,51,102,.25) !important;
  transform:translateY(-1px) !important;
}

/* ===== INPUTS (modernos) ===== */
input, select, textarea{
  border-radius:var(--nx-radius-sm) !important;
  border-color:var(--nx-border) !important;
  transition:border-color .18s,box-shadow .18s !important;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--nx-primary) !important;
  box-shadow:0 0 0 3px rgba(0,51,102,.08) !important;
  outline:none !important;
}

/* ===== HEADERS (azul sólido) ===== */
.header, .app-header, .page-header, .desk-header{
  background:var(--nx-primary) !important;
  background-image:none !important;
  box-shadow:0 2px 12px rgba(0,51,102,.15) !important;
}

/* ===== TABLAS (modernas) ===== */
table{
  border-collapse:separate !important;
  border-spacing:0 !important;
}
th{
  background:var(--nx-primary-50) !important;
  color:var(--nx-primary) !important;
  font-weight:700 !important;
}
tr:hover{
  background:var(--nx-primary-tint) !important;
}

/* ===== PESTAÑAS / TABS ===== */
.tab, .tabs .tab{
  border-radius:var(--nx-radius-sm) !important;
  font-weight:600 !important;
}
.tab.active{
  background:var(--nx-primary-50) !important;
  color:var(--nx-primary) !important;
  border-bottom-color:var(--nx-primary) !important;
}

/* ===== SCROLLBAR MODERNO ===== */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--nx-bg)}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--nx-primary-600)}

/* ===== MOVIMIENTO SUAVE ===== */
*{scroll-behavior:smooth}

/* ===== RESPONSIVE ===== */
@media (max-width:768px){
  .card,.card-item,.cliente-card,.kpi-card{border-radius:12px !important}
}