
.ns-auth-overlay{position:fixed;inset:0;z-index:200000;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 20% 10%,#1d4ed8 0,#0f172a 42%,#020617 100%);font-family:Arial,sans-serif}
.ns-auth-card{width:min(430px,100%);background:#fff;border-radius:24px;padding:30px;box-shadow:0 28px 80px rgba(0,0,0,.42)}
.ns-auth-brand{display:flex;align-items:center;gap:14px;margin-bottom:22px}.ns-auth-brand img{width: 120px;px;height:120px;object-fit:contain}.ns-auth-brand h1{margin:0;font-size:24px;color:#0f172a}.ns-auth-brand p{margin:4px 0 0;color:#64748b;font-size:13px}
.ns-auth-card h2{margin:0 0 6px;color:#0f172a}.ns-auth-help{margin:0 0 20px;color:#64748b;font-size:13px;line-height:1.5}.ns-auth-field{display:block;margin:14px 0}.ns-auth-field span{display:block;margin-bottom:7px;color:#334155;font-size:12px;font-weight:800}.ns-auth-field input{width:100%;height:46px;border:1px solid #cbd5e1;border-radius:12px;padding:0 13px;font-size:14px;box-sizing:border-box}.ns-auth-field input:focus{outline:3px solid rgba(37,99,235,.16);border-color:#2563eb}.ns-auth-submit{width:100%;height:48px;margin-top:10px;border:0;border-radius:12px;background:#2563eb;color:#fff;font-weight:900;cursor:pointer}.ns-auth-submit:disabled{opacity:.65;cursor:wait}.ns-auth-error{min-height:20px;margin-top:12px;color:#b91c1c;font-size:12px;font-weight:700}.ns-auth-hidden{display:none!important}
.ns-user-card{padding:12px;margin:0 8px 8px;border-radius:13px;background:rgba(255,255,255,.08)}.ns-user-card strong,.ns-user-card span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ns-user-card strong{color:#fff;font-size:12px}.ns-user-card span{color:#93c5fd;font-size:10px;margin-top:4px;text-transform:capitalize}.ns-logout{width:100%;margin-top:9px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff;border-radius:9px;padding:8px;cursor:pointer;font-weight:800}
@media(max-width:600px){.ns-auth-card{padding:22px;border-radius:18px}.ns-auth-overlay{padding:14px}}

.ns-user-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #e2e8f0;border-radius:11px;margin:7px 0;background:#fff}.ns-user-row>div{display:flex;align-items:center;gap:8px}.ns-user-row strong,.ns-user-row span{display:block}.ns-user-row>div:first-child{display:block}.ns-user-row>div:first-child span{font-size:11px;color:#64748b;margin-top:3px}.ns-user-row button{border:0;border-radius:8px;padding:7px 9px;cursor:pointer;font-weight:800}.ns-user-state{font-size:10px;font-weight:900;padding:4px 7px;border-radius:999px}.ns-user-state.on{background:#dcfce7;color:#166534}.ns-user-state.off{background:#fee2e2;color:#991b1b}@media(max-width:620px){.ns-user-row{align-items:flex-start;flex-direction:column}.ns-user-row>div:last-child{width:100%;justify-content:space-between}}

/* === Gestión profesional de usuarios === */
.ns-users-admin-card .card-body{display:flex;flex-direction:column;gap:18px}
.ns-users-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ns-user-create-panel{border:1px solid #dbe3ef;background:#f8fafc;border-radius:14px;padding:16px}
.ns-user-create-panel h3,.ns-users-list-head h3{margin:0 0 10px}
.ns-user-create-actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.ns-user-create-actions small{color:#64748b}
.ns-users-list-head{display:flex;justify-content:space-between;align-items:end}
.ns-users-list-head p{margin:3px 0 0;color:#64748b}
.ns-users-list{display:flex;flex-direction:column;gap:10px}
.ns-user-card{display:grid;grid-template-columns:46px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:13px 14px;border:1px solid #dbe3ef;border-radius:14px;background:#fff}
.ns-user-card.is-disabled{background:#f8fafc;opacity:.82}
.ns-user-avatar{width:42px;height:42px;border-radius:12px;background:#e8eefc;color:#1d4ed8;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.ns-user-main{min-width:0}.ns-user-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ns-user-title strong{font-size:15px}
.ns-user-meta{display:flex;gap:12px;flex-wrap:wrap;color:#64748b;font-size:11px;margin-top:4px}
.ns-role-badge,.ns-self-badge,.ns-user-state{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:800}
.role-administrador{background:#ede9fe;color:#6d28d9}.role-supervisor{background:#dbeafe;color:#1d4ed8}.role-cajero{background:#ecfccb;color:#3f6212}
.ns-self-badge{background:#f1f5f9;color:#334155}.ns-user-state.on{background:#dcfce7;color:#166534}.ns-user-state.off{background:#fee2e2;color:#991b1b}
.ns-user-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.ns-user-actions button{padding:7px 10px;font-size:11px}
.ns-user-modal-backdrop{position:fixed;inset:0;z-index:99999;background:rgba(15,23,42,.58);display:flex;align-items:center;justify-content:center;padding:18px}
.ns-user-modal{width:min(520px,100%);background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(15,23,42,.28);overflow:hidden}
.ns-user-modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid #e2e8f0}.ns-user-modal-head h3{margin:0}
.ns-user-modal-close{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:#64748b}
.ns-user-modal-body{padding:18px;display:flex;flex-direction:column;gap:8px}.ns-user-modal-body label{font-weight:700;font-size:12px}.ns-user-modal-body input,.ns-user-modal-body select{width:100%}
.ns-user-modal-help{margin:0 0 8px;color:#475569}.ns-user-check{display:flex!important;align-items:center;gap:8px;margin-top:6px}.ns-user-check input{width:auto!important}
.ns-user-modal-error{min-height:20px;padding:0 18px;color:#b91c1c;font-size:12px}
.ns-user-modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid #e2e8f0;background:#f8fafc}
@media(max-width:900px){.ns-user-card{grid-template-columns:42px 1fr}.ns-user-status,.ns-user-actions{grid-column:2}.ns-user-actions{justify-content:flex-start}.ns-users-header{align-items:flex-start}.ns-user-create-panel .grid-3{grid-template-columns:1fr!important}}
@media(max-width:560px){.ns-user-card{grid-template-columns:1fr}.ns-user-avatar{display:none}.ns-user-status,.ns-user-actions{grid-column:1}.ns-user-meta{flex-direction:column;gap:3px}.ns-users-header{flex-direction:column}.ns-user-create-panel .grid-2,.ns-user-create-panel .grid-3{grid-template-columns:1fr!important}}
