/* ============================================================
   USUARIOS.CSS — re-piel Atlas del CUERPO de Usuarios.
   Espejo de matriculas.css / transferencias.css. TODO scopeado
   bajo #page-usuarios. Tokens: atlas-tokens.css (:root).
   Cargar DESPUÉS de transferencias.css.
   ALCANCE: page-header + card + tabla + badges + botones.
   El modal #usModal (inline) NO se estila aquí (sesión aparte).
   ============================================================ */

/* ---- tarjeta + cabecera de tabla ---- */
#page-usuarios .dtable-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; }
#page-usuarios .dtable-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--border); flex-wrap:wrap; }
#page-usuarios .dtable-head h2 { font-size:15px; font-weight:700; color:var(--text); }
#page-usuarios .dtable-head__meta { font-size:11.5px; color:var(--text-3); font-family:var(--font-num); }

/* ---- tabla paginada (.dtable) ---- */
#page-usuarios .dwrap { overflow-x:auto; }
#page-usuarios .dtable { width:100%; border-collapse:collapse; font-size:12.5px; }
#page-usuarios .dtable thead th { background:var(--thead-bg); color:var(--text-3); font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; text-align:left; padding:10px var(--s-3); white-space:nowrap; border-bottom:1px solid var(--border-strong); }
#page-usuarios .dtable thead th.num { text-align:right; }
#page-usuarios .dtable tbody td { padding:11px var(--s-3); border-bottom:1px solid var(--row-border); color:var(--text-2); vertical-align:middle; }
#page-usuarios .dtable tbody td.num { text-align:right; font-family:var(--font-num); font-variant-numeric:tabular-nums; color:var(--text); white-space:nowrap; }
#page-usuarios .dtable tbody tr:hover { background:var(--row-hover); }
#page-usuarios .dtable tbody tr:last-child td { border-bottom:0; }
#page-usuarios .dtable .empty { color:var(--text-3); text-align:center; padding:var(--s-6); font-size:13px; }

/* ---- badges de rol / estado / módulos ---- */
#page-usuarios .badge { display:inline-flex; align-items:center; font-size:10.5px; font-weight:700; letter-spacing:.02em; padding:3px 9px; border-radius:var(--radius-pill); line-height:1.5; }
#page-usuarios .badge--info { color:var(--accent-strong); background:var(--accent-weak); }
#page-usuarios .badge--pos  { color:var(--pos); background:var(--pos-bg); }
#page-usuarios .badge--neg  { color:var(--neg); background:var(--neg-bg); }
#page-usuarios .badge--neu  { color:var(--text-2); background:var(--surface-2); font-weight:600; margin:1px; }

/* ---- botones Atlas (cuerpo; el modal conserva sus inline) ---- */
#page-usuarios .btn { font-family:var(--font-sans); cursor:pointer; transition:all .13s; border-radius:var(--radius-sm); }
#page-usuarios .btn-primary { border:0; background:var(--accent); color:#fff; font-size:13px; font-weight:600; padding:9px 16px; }
#page-usuarios .btn-primary:hover { background:var(--accent-strong); }
#page-usuarios .btn-outline { border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-weight:600; }
#page-usuarios .btn-outline:hover { background:var(--hover); color:var(--text); border-color:var(--border-strong); }
#page-usuarios .btn-danger { border:1px solid var(--neg-bg); background:var(--neg-bg); color:var(--neg); font-weight:600; }
#page-usuarios .btn-danger:hover { background:var(--neg); color:#fff; border-color:var(--neg); }

/* ============================================================
   MODAL #usModal — interior re-pielado (inline → clases).
   El root #usModal conserva su show/hide inline (style.display);
   #usModulosWrap y #usActivoWrap conservan su display inline
   (lo conmuta el JS) — aquí solo su margen/layout estático.
   Los checkboxes inyectados por usRenderModulos siguen inline
   (fast-follow); aquí solo se estila el contenedor #usModulosGrid.
   ============================================================ */
#page-usuarios .usm-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s-5) var(--s-5); width:460px; max-width:95vw; box-shadow:var(--shadow-pop); }
#page-usuarios .usm-title { font-size:16px; font-weight:700; color:var(--text); margin-bottom:var(--s-5); }
#page-usuarios .usm-field { margin-bottom:var(--s-4); }
#page-usuarios .usm-label { display:block; font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:6px; }
#page-usuarios .usm-input, #page-usuarios .usm-select { width:100%; font-family:var(--font-sans); font-size:13px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 11px; transition:border-color .13s, box-shadow .13s; }
#page-usuarios .usm-input--mono { font-family:var(--font-num); }
#page-usuarios .usm-input:focus, #page-usuarios .usm-select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak); }
#page-usuarios .usm-select { background:var(--surface) var(--select-arrow) no-repeat right 11px center; padding-right:30px; -webkit-appearance:none; appearance:none; cursor:pointer; }
#page-usuarios .usm-note { font-weight:400; font-size:11px; color:var(--text-3); text-transform:none; letter-spacing:0; }
#page-usuarios .usm-modgrid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2); }
#page-usuarios .usm-switch { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; color:var(--text-2); }
#page-usuarios .usm-foot { display:flex; gap:8px; justify-content:flex-end; border-top:1px solid var(--border); padding-top:var(--s-4); margin-top:var(--s-5); }

/* ── Listado unificado (USUARIOS v2 · 2D-3, mockup) — reemplaza a las pestañas Sistema/
   Comerciales/Test (filtro fb-bar + KPIs kc-card, ambos canónicos, ya estilados por
   components.css). Solo lo específico de esta tabla: celda Usuario (avatar+nombre+@handle)
   y texto mono compartido para Rol técnico/Empresas/Último acceso. ── */
#page-usuarios .us-user { display:flex; align-items:center; gap:10px; }
#page-usuarios .us-ava { width:34px; height:34px; border-radius:10px; flex-shrink:0; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-weight:700; font-size:12px; }
#page-usuarios .us-ava.is-inactive { background:var(--text-3); }
#page-usuarios .us-user__name { font-weight:600; font-size:13px; color:var(--text); }
#page-usuarios .us-user__handle { font-family:var(--font-num); font-size:10.5px; color:var(--text-3); margin-top:1px; }
#page-usuarios .us-mono { font-family:var(--font-num); font-size:11.5px; color:var(--text-2); }