#painelUsuariosSistema { padding:0; overflow:hidden; border:1px solid #e1e7ef; background:linear-gradient(145deg,#fff,#f9fbfe); }
#painelUsuariosSistema .usuarios-cabecalho { margin:0; padding:24px; border-bottom:1px solid #e4eaf1; gap:20px; }
.usuarios-etiqueta { display:block; margin-bottom:7px; font-size:10px; letter-spacing:.12em; color:#687b90; }
#painelUsuariosSistema .usuarios-cabecalho h2 { margin:0 0 8px; color:#142334; font-size:25px; }
#painelUsuariosSistema .usuarios-cabecalho .texto-apoio { margin:0; line-height:1.5; }
#btnNovoUsuario,#btnSalvarUsuario { min-height:44px; background:#0876ef; border-radius:7px; white-space:normal; }
#mensagemUsuariosSistema { margin:14px 24px 0; font-size:12px; line-height:1.6; color:#687b90; }
.usuarios-indicadores { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; padding:18px 24px; }
.usuarios-indicador { display:flex; align-items:center; gap:13px; min-width:0; padding:18px; background:#fff; border:1px solid #e4eaf1; border-radius:10px; }
.usuarios-indicador-icone { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; border-radius:50%; background:#e7f1ff; color:#0876ef; }
.usuarios-indicador-icone svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.usuarios-indicador:nth-child(3) .usuarios-indicador-icone { background:#e6f8fd; color:#069cbf; }.usuarios-indicador:nth-child(4) .usuarios-indicador-icone { background:#fff4df; color:#c48713; }
.usuarios-indicador>div { min-width:0; }.usuarios-indicador span:not(.usuarios-indicador-icone) { font-size:12px; line-height:1.5; color:#354d65; }.usuarios-indicador strong { display:block; margin:4px 0; font-size:28px; color:#142334; }.usuarios-indicador small { color:#687b90; font-size:11px; line-height:1.5; }
.usuarios-filtros { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin:0 24px 18px; padding:16px; border:1px solid #e4eaf1; border-radius:10px; background:#fff; }
.usuarios-filtros label { display:grid; gap:7px; flex:1 1 130px; min-width:0; font-size:12px; color:#52677d; }.usuarios-filtros label:first-child { flex:2 1 220px; }
.usuarios-filtros input,.usuarios-filtros select { min-width:0; width:100%; min-height:44px; border:1px solid #d3dce7; border-radius:7px; padding:10px; background:#f9fbfd; font:inherit; }
.usuarios-tabela { margin:0 24px; overflow:auto; max-width:100%; border:1px solid #e4eaf1; border-radius:9px; }.usuarios-tabela table { width:100%; min-width:790px; border-collapse:collapse; background:#fff; font-size:13px; }.usuarios-tabela th,.usuarios-tabela td { padding:9px 12px; border-bottom:1px solid #e9eef4; text-align:left; vertical-align:middle; }.usuarios-tabela th { background:#edf1f6; color:#354d65; font-size:12px; }.usuarios-tabela tr:last-child td { border-bottom:0; }.usuarios-tabela tbody tr:hover { background:#f7faff; }
.usuarios-pessoa { display:flex; align-items:center; gap:12px; }.usuarios-pessoa strong { display:block; overflow-wrap:anywhere; }.usuarios-pessoa small { display:block; margin-top:4px; color:#687b90; }.usuarios-avatar { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border-radius:50%; background:linear-gradient(145deg,#283c50,#0c151e); color:#fff; font-size:13px; }
.usuarios-perfil,.usuarios-status { display:inline-block; padding:5px 8px; border-radius:7px; font-size:11px; white-space:nowrap; }.usuarios-perfil { background:#e8f1ff; color:#1c60b2; }.perfil-profissional { background:#f0e8ff; color:#6d39ac; }.perfil-recepcao { background:#fff2d9; color:#9b6209; }.perfil-caixa { background:#e2f8ec; color:#14734a; }.usuario-ativo { background:#e3f8ef; color:#14734a; }.usuario-inativo { background:#f1f2f4; color:#657080; }
.usuarios-acoes { display:flex; gap:7px; }.usuarios-acoes button { min-height:44px; padding:8px 11px; border:1px solid #b3d2f8; border-radius:7px; background:#f6faff; color:#0769d6; font-size:12px; }.usuarios-acoes button+button { background:#edf1f6; color:#354d65; border-color:#d9e1eb; }
.usuarios-paginacao { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:20px 24px; color:#687b90; font-size:12px; }.usuarios-paginacao>div { display:flex; align-items:center; gap:12px; }.usuarios-paginacao button { min-height:44px; border-radius:7px; }.usuarios-paginacao button:disabled { opacity:.4; cursor:not-allowed; }
#usuarioEditor { position:fixed; inset:0 0 0 auto; width:min(600px,100%); height:100dvh; max-height:100dvh; max-width:100%; margin:0 0 0 auto; padding:0; border:0; border-left:1px solid #dce5ee; background:#fff; color:#142334; box-shadow:-12px 0 35px #10203025; overflow:auto; }#usuarioEditor::backdrop { background:#10203066; }
#usuarioEditor #formUsuario { margin:0; padding:24px; border:0; border-radius:0; background:#fff; }#tituloFormUsuario { margin:0 42px 22px 0; font-size:21px; line-height:1.5; }#usuarioEditor .usuarios-fechar { position:absolute; right:14px; top:15px; width:44px; min-height:44px; margin:0; font-size:24px; background:#f2f5f9; border-radius:8px; color:#52677d; }
#usuarioEditor .form-grid { grid-template-columns:1fr; gap:18px; }#usuarioEditor input,#usuarioEditor select { min-height:44px; }#usuarioEditor .campo>label { font-size:13px; color:#354d65; }#usuarioEditor .texto-apoio { margin:14px 0; line-height:1.6; }#usuarioEditor .acoes-formulario { position:sticky; bottom:-24px; padding:16px 0; margin-top:20px; background:#fff; border-top:1px solid #e4eaf1; display:flex; flex-wrap:wrap; gap:10px; }#mensagemUsuario { flex:1 1 100%; margin:0; }#usuarioEditor .tabela-clientes.tabela-permissoes { min-width:420px; }
#painelUsuariosSistema button:focus-visible,#painelUsuariosSistema input:focus-visible,#painelUsuariosSistema select:focus-visible { outline:3px solid #74b7ff; outline-offset:2px; }
@media(max-width:1200px) { .usuarios-indicadores { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { #painelUsuariosSistema .usuarios-cabecalho { padding:18px; }.usuarios-indicadores { padding:16px; gap:10px; }.usuarios-indicador { padding:12px; gap:9px; }.usuarios-indicador-icone { flex-basis:34px; width:34px; height:34px; }.usuarios-indicador-icone svg { width:22px; height:22px; }.usuarios-indicador strong { font-size:25px; }.usuarios-filtros { margin:0 16px 16px; }.usuarios-tabela { margin:0 16px; }.usuarios-paginacao { padding:18px 16px; }#usuarioEditor #formUsuario { padding:20px 16px; }#usuarioEditor .acoes-formulario { bottom:-20px; } }
@media(max-width:360px) { .usuarios-indicadores { grid-template-columns:1fr; } }