/* components/usuarios/usuarios.css */
/* Estilos exclusivos de usuarios.js y sesiones.js — prefijo usr-/ses-
   para no mezclarse con crud.css (que es del motor genérico). */

.usr-pill { font-size: 0.6875rem; font-weight: 500; padding: 0.125rem 0.5rem; border-radius: 1.25rem; }
.usr-pill-ok { background: var(--success-bg); color: var(--success); }
.usr-pill-off { background: var(--bg); color: var(--muted); }

.usr-empresa-chip {
  display: inline-block; font-size: 0.6562rem; font-weight: 500;
  padding: 0.125rem 0.4375rem; border-radius: 0.625rem; margin: 0.0625rem 0.125rem 0.0625rem 0;
  background: var(--accent-bg); color: var(--accent);
}
.usr-empresas-loading { font-size: 0.6875rem; color: var(--muted); }

.usr-info-box {
  background: var(--bg); border-radius: 0.5rem; padding: 0.625rem 0.875rem;
  font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem;
}

.usr-empresas-section { margin-top: 1rem; border-top: 0.5px solid var(--border); padding-top: 0.875rem; }
.usr-empresas-title { display: block; font-size: 0.75rem; font-weight: 500; color: var(--text); margin-bottom: 0.5rem; }
.usr-empresas-empty { font-size: 0.75rem; color: var(--muted); padding: 0.5rem 0; }

.usr-empresas-list { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.625rem; }
.usr-empresa-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4375rem 0.625rem; border: 0.5px solid var(--border); border-radius: 0.4375rem;
}
.usr-empresa-nombre { font-size: 0.75rem; font-weight: 500; color: var(--text); flex: 1; }
.usr-empresa-rol { font-size: 0.6875rem; color: var(--muted); background: var(--bg); padding: 0.125rem 0.5rem; border-radius: 0.625rem; }

.usr-asignar-row { display: flex; gap: 0.375rem; align-items: center; margin-top: 0.625rem; }
.usr-asignar-row select { font-size: 0.75rem; }
.usr-asignar-row button { font-size: 0.75rem; white-space: nowrap; }

/* Editor de permisos por empresa (matriz de secciones + presets) */
.usr-empresa-perm {
  border: 0.5px solid var(--border); border-radius: 0.5rem;
  padding: 0.625rem 0.75rem; margin-bottom: 0.625rem;
  background: var(--bg);
}
.usr-empresa-perm-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.usr-empresa-perm-head .usr-empresa-nombre { flex: 1; }

.usr-preset-row { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.625rem; }
.usr-preset-btn {
  font-size: 0.6875rem; padding: 0.25rem 0.625rem; border-radius: 999px;
  border: 0.5px solid var(--border-md); background: var(--surface);
  color: var(--muted); cursor: pointer;
  transition: background-color .1s, color .1s, border-color .1s;
}
.usr-preset-btn:hover { color: var(--text); }
.usr-preset-btn.active {
  background: var(--accent-bg); color: var(--accent); border-color: var(--accent);
  font-weight: 500;
}

.usr-perm-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0.375rem 0.75rem; margin-bottom: 0.625rem;
}
.usr-perm-cell {
  display: flex; align-items: center; gap: 0.4375rem;
  font-size: 0.75rem; color: var(--text); cursor: pointer;
}
.usr-perm-cell input { cursor: pointer; }
.usr-perm-cell input:disabled { cursor: default; }

.usr-perm-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.usr-perm-note { font-size: 0.6875rem; color: var(--muted); }
.usr-perm-save { font-size: 0.6875rem; white-space: nowrap; }

.usr-perm-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }

/* Sesiones */
.ses-live-badge {
  font-size: 0.6875rem; color: var(--muted);
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.ses-live-badge i { font-size: 0.8125rem; animation: ses-spin 3s linear infinite; }
@keyframes ses-spin { to { transform: rotate(360deg); } }

.ses-usuario-nombre { font-size: 0.75rem; font-weight: 500; color: var(--text); }
.ses-usuario-correo { font-size: 0.6875rem; color: var(--muted); }
.ses-user-agent { font-size: 0.75rem; color: var(--muted); max-width: 6.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ses-btn-disconnect { font-size: 0.6875rem; padding: 0.3125rem 0.625rem; color: var(--danger); border-color: var(--danger); }
.ses-btn-disconnect:hover { background: var(--danger-bg); }