/* Tema neutro. A cor do cliente entra por --cor (definida em app.js a partir do tenant). */
:root{
  --cor:#1f3a5f;
  --cor-clara:color-mix(in srgb,var(--cor) 10%,white);
  --cor-borda:color-mix(in srgb,var(--cor) 22%,white);
  --cor-suave:color-mix(in srgb,var(--cor) 70%,white);
  --fundo:#f4f6f9;--cartao:#fff;--texto:#1e293b;--mudo:#5a6478;
  --ok:#1a7a4a;--ok-bg:#e6f4ed;--erro:#b91c1c;--erro-bg:#fef2f2;--atencao:#92400e;--atencao-bg:#fffbeb;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--fundo);color:var(--texto);min-height:100vh;line-height:1.4}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.header{background:var(--cor);color:#fff;padding:0 1.25rem;display:flex;align-items:center;justify-content:space-between;min-height:60px;position:sticky;top:0;z-index:10;gap:1rem}
.marca{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.5px;min-width:0}
.marca img{max-height:36px;max-width:160px;object-fit:contain;display:block}
.marca-nome{font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-dir{display:flex;align-items:center;gap:.75rem;min-width:0}
.usuario{font-size:.8rem;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32vw}

.tela{display:none}.tela.ativa{display:block}

.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem}
.login-card{background:#fff;border:1px solid var(--cor-borda);border-radius:16px;padding:2.25rem 1.75rem;width:100%;max-width:400px;text-align:center}
.marca-login{justify-content:center;color:var(--cor);margin-bottom:1.25rem;font-size:1.6rem}
.marca-login img{max-height:56px;max-width:220px}
.login-titulo{color:var(--mudo);font-size:.9rem;margin-bottom:1.25rem}
.login-rodape{margin-top:1rem;font-size:.75rem;color:var(--mudo)}

.campo,.campo-select{width:100%;padding:.7rem .85rem;border:1px solid var(--cor-borda);border-radius:8px;font:inherit;font-size:.9rem;background:#fff;color:var(--texto)}
.login-card .campo{margin-bottom:.7rem}
.campo:focus,.campo-select:focus{outline:2px solid var(--cor-suave);outline-offset:1px}
.campo-select{width:auto;min-width:0;max-width:100%}
.cheio-select{width:100%}
.area{resize:vertical;font-family:ui-monospace,Menlo,monospace;font-size:.8rem}

.btn-primario,.btn-secundario,.btn-borda,.btn-link,.btn-perigo{font:inherit;cursor:pointer;border-radius:8px;font-size:.85rem;font-weight:600}
.btn-primario{background:var(--cor);color:#fff;border:1px solid var(--cor);padding:.7rem 1.1rem}
.login-card .btn-primario{width:100%}
.btn-primario:hover{filter:brightness(1.1)}
.btn-secundario{background:#fff;color:var(--cor);border:1px solid var(--cor);padding:.6rem 1rem}
.btn-borda{background:none;color:inherit;border:1px solid currentColor;padding:.4rem .8rem;opacity:.9}
.header .btn-borda{color:#fff;border-color:rgba(255,255,255,.4)}
.btn-link{background:none;border:none;color:var(--cor);text-decoration:underline;padding:.2rem .3rem}
.btn-perigo{background:none;border:none;color:var(--erro);text-decoration:underline;padding:.2rem .3rem}
button:disabled{opacity:.55;cursor:not-allowed}
button:focus-visible{outline:2px solid var(--cor-suave);outline-offset:2px}

.msg-ok{background:var(--ok-bg);color:var(--ok);border-radius:8px;padding:.6rem .8rem;font-size:.82rem;margin-bottom:.7rem;text-align:left}
.login-card .btn-link{display:block;margin:.7rem auto 0;font-size:.8rem}
.msg-erro{background:var(--erro-bg);color:var(--erro);border-radius:8px;padding:.6rem .8rem;font-size:.82rem;margin-bottom:.7rem;text-align:left}

.container{max-width:1180px;margin:0 auto;padding:1.5rem 1rem 3rem}
.titulo{font-size:1.4rem;color:var(--cor)}
.subtitulo{color:var(--mudo);font-size:.9rem;margin:.25rem 0 1.25rem}

.aviso{display:flex;gap:.75rem;align-items:flex-start;border-radius:10px;padding:.85rem 1rem;margin-bottom:1rem;background:var(--erro-bg);color:var(--erro);border:1px solid color-mix(in srgb,var(--erro) 25%,white)}
.aviso.atencao{background:var(--atencao-bg);color:var(--atencao);border-color:color-mix(in srgb,var(--atencao) 25%,white)}
.aviso.ok{background:var(--ok-bg);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,white)}
.aviso-titulo{font-weight:700;font-size:.9rem}.aviso-detalhe{font-size:.82rem;margin-top:.15rem;overflow-wrap:anywhere}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin-bottom:1.25rem}
.stat{background:var(--cartao);border:1px solid var(--cor-borda);border-radius:12px;padding:1rem}
.stat-rotulo{font-size:.75rem;color:var(--mudo);text-transform:uppercase;letter-spacing:.4px}
.stat-valor{font-size:1.7rem;font-weight:800;color:var(--cor);margin-top:.15rem}
.stat-valor.ok{color:var(--ok)}.stat-valor.atencao{color:var(--atencao)}.stat-valor.erro{color:var(--erro)}

.abas{display:flex;gap:.25rem;border-bottom:1px solid var(--cor-borda);margin-bottom:1rem;overflow-x:auto}
.aba{background:none;border:none;border-bottom:3px solid transparent;padding:.7rem 1rem;font:inherit;font-size:.88rem;font-weight:600;color:var(--mudo);cursor:pointer;white-space:nowrap}
.aba.ativa{color:var(--cor);border-bottom-color:var(--cor)}

.cartao{background:var(--cartao);border:1px solid var(--cor-borda);border-radius:12px;padding:1.1rem;margin-bottom:1rem}
.cartao-titulo{font-size:1rem;color:var(--cor);margin-bottom:.75rem}
.dica{color:var(--mudo);font-size:.83rem;margin-bottom:.9rem}
.barra{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:.9rem}
.acoes{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.rodape-lista{display:flex;justify-content:space-between;align-items:center;margin-top:.75rem;font-size:.82rem;color:var(--mudo)}

.tabela-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:var(--mudo);padding:.55rem .6rem;border-bottom:1px solid var(--cor-borda);white-space:nowrap}
td{padding:.6rem;border-bottom:1px solid #eef1f6;vertical-align:top}
.vazio{text-align:center;color:var(--mudo);padding:1.5rem!important}
.sub{font-size:.72rem;color:var(--mudo)}
.num{white-space:nowrap;font-variant-numeric:tabular-nums}
.barra-valor{height:8px;border-radius:4px;background:var(--cor-suave);min-width:2px}
.barra-valor.saida{background:#8aa3c0}

.pill{display:inline-block;border-radius:999px;padding:.15rem .6rem;font-size:.72rem;font-weight:700;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.atencao{background:var(--atencao-bg);color:var(--atencao)}.pill.erro{background:var(--erro-bg);color:var(--erro)}

.upload{border:2px dashed var(--cor-borda);border-radius:12px;padding:1.5rem;text-align:center;cursor:pointer;margin-bottom:1rem;background:var(--cor-clara)}
.upload:hover,.upload:focus-visible{border-color:var(--cor)}
.upload-icone{font-size:1.8rem}.upload-texto{font-weight:700;color:var(--cor);margin-top:.2rem}.upload-dica{font-size:.75rem;color:var(--mudo)}
.form-grade{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.fg label{display:block;font-size:.78rem;font-weight:600;color:var(--mudo);margin-bottom:.25rem}
.fg.cheio{grid-column:1/-1}
.dica-fg{font-size:.72rem;color:var(--mudo);margin-top:.2rem}

.resultado{margin-top:1rem;font-size:.85rem;border:1px solid var(--cor-borda);border-radius:10px;padding:.9rem;background:var(--cor-clara)}
.resultado ul{margin:.4rem 0 0 1.1rem;font-family:ui-monospace,Menlo,monospace;font-size:.75rem;overflow-wrap:anywhere}

@media (max-width:640px){
  .form-grade{grid-template-columns:1fr}
  .container{padding:1rem .75rem 2rem}
  .usuario{display:none}
  .stat-valor{font-size:1.4rem}
}

/* MFA */
.qr{display:flex;justify-content:center;margin:.25rem 0 .5rem}
.qr img{border:1px solid var(--cor-borda);border-radius:8px;background:#fff;padding:6px}
.segredo{display:block;font-family:ui-monospace,Menlo,monospace;font-size:.85rem;letter-spacing:.08em;background:var(--cor-clara);border:1px solid var(--cor-borda);border-radius:8px;padding:.5rem .6rem;margin:.25rem 0 .6rem;overflow-wrap:anywhere;user-select:all}
.campo-codigo{text-align:center;font-size:1.4rem;letter-spacing:.35em;font-family:ui-monospace,Menlo,monospace}