/* Raíz */
.usuarios-root { font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif; color:#1f2937; }

/* Toolbar */
.u-toolbar{ display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.u-toolbar .u-left{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.u-toolbar .u-right{ display:flex; gap:10px; align-items:center; }

/* Inputs/selects */
.u-toolbar input[type="text"],
.u-toolbar select{
  padding:10px 12px;
  border:1px solid #d0d7e2;
  border-radius:10px;
  background:#fff;
  outline:none;
  transition: box-shadow .2s, border-color .2s;
}
.u-toolbar input[type="text"]:focus,
.u-toolbar select:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
}

/* Botones PRO */
.btn{
  --bg:#edf2ff; --fg:#1f2937; --bd:#d0d7e2;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; font-weight:600; border:1px solid var(--bd); border-radius:10px;
  background:var(--bg); color:var(--fg); cursor:pointer; transition:transform .02s, box-shadow .2s, background .2s, border-color .2s, color .2s;
  user-select:none;
}
.btn:active{ transform:translateY(1px); }

/* variantes */
.btn-primary { --bg:linear-gradient(180deg,#3b82f6,#2563eb); --fg:#fff; --bd:#1d4ed8; }
.btn-primary:hover{ filter:brightness(1.03); box-shadow:0 6px 16px rgba(37,99,235,.25); }
.btn-success { --bg:linear-gradient(180deg,#22c55e,#16a34a); --fg:#fff; --bd:#15803d; }
.btn-success:hover{ filter:brightness(1.03); box-shadow:0 6px 16px rgba(34,197,94,.25); }
.btn-ghost   { --bg:#fff; --fg:#374151; --bd:#d1d5db; }
.btn-ghost:hover{ background:#f9fafb; }
.btn-outline { --bg:#fff; --fg:#1f2937; --bd:#9ca3af; }
.btn-outline:hover{ border-color:#6b7280; }

/* tamaños */
.btn-slim{ padding:8px 12px; font-size:13px; }
.btn-xs{ padding:6px 10px; font-size:12px; border-radius:8px; }

/* Grupo de botones */
.btn-group{ display:inline-flex; gap:8px; align-items:center; }

/* Chips */
.chip{
  display:inline-flex; align-items:center; padding:6px 10px;
  font-size:12px; border-radius:999px; border:1px solid transparent;
  background:#eef2ff; color:#374151;
}
.chip-ok{ background:#e7f8ef; color:#166534; border-color:#bbf7d0; }
.chip-off{ background:#fff1f2; color:#9f1239; border-color:#fecdd3; }

/* Tabla */
.table-wrap{ overflow:auto; border:1px solid #e5e7eb; border-radius:12px; background:#fff; }
.table{ width:100%; border-collapse:collapse; }
.table thead th{
  background:linear-gradient(180deg,#f8fafc,#f1f5f9);
  color:#374151; position:sticky; top:0; z-index:1; font-size:13px; text-align:left;
  padding:10px 12px; border-bottom:1px solid #e5e7eb;
}
.table td{ padding:10px 12px; border-bottom:1px solid #f3f4f6; font-size:14px; }
.table tr:hover td{ background:#fafafa; }
.col-acciones{ width:1%; white-space:nowrap; }

/* Panel lateral */
.side-panel{ position:fixed; top:0; right:0; width: 440px; max-width:90vw; height:100%; background:#fff; box-shadow:-10px 0 30px rgba(0,0,0,.12); z-index:1100; display:block; transform:translateX(0); }
.side-panel.oculto{ display:none; }
.side-header{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid #e5e7eb; background:linear-gradient(180deg,#f8fafc,#fff); }
.side-header h3{ margin:0; font-size:18px; font-weight:700; color:#111827; }
.side-close{ background:transparent; border:none; font-size:22px; cursor:pointer; line-height:1; padding:4px 8px; }

.side-body{ padding:14px 16px; }
.side-body label{ margin-top:10px; display:block; font-weight:600; color:#1f2937; }
.side-body input, .side-body select{
  width:100%; padding:10px 12px; border:1px solid #d0d7e2; border-radius:10px; outline:none; background:#fff;
}
.side-body input:focus, .side-body select:focus{
  border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.u-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.form-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }

/* Responsive */
@media (max-width: 720px){
  .u-grid-2{ grid-template-columns:1fr; }
}
/* Pills en permisos interactivas */
.perm-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.perm-list li { display:inline-flex; align-items:center; gap:8px; }

.pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; font-size:13px;
  border:1px solid #d0d7e2; background:#fff; color:#1f2937;
  cursor:pointer; transition:transform .02s, box-shadow .2s, border-color .2s, background .2s;
}
.pill:hover { box-shadow:0 4px 12px rgba(0,0,0,.06); border-color:#b6c4d9; }
.pill-on  { background:#e7f8ef; border-color:#bfead1; color:#166534; }
.pill-off { background:#fff7ed; border-color:#ffd7aa; color:#9a3412; }

.pill .tag {
  font-size:11px; padding:2px 6px; border-radius:999px;
  background:rgba(0,0,0,.06);
}