/* Inteligência TMP/TMPRO — um só sistema visual para todas as telas. */

:root{
  --fundo:#f7f8fa; --papel:#ffffff; --tinta:#101828; --tinta-2:#475467;
  --tinta-3:#667085; --grade:#e4e7ec; --borda:#d0d5dd;
  --azul:#2a78d6; --laranja:#eb6834; --verde:#1baf7a;
  --aviso-f:#fffaeb; --aviso-b:#f5c26b;
  --ok-f:#ecfdf3;    --ok-b:#9fdcbb;
  --erro-f:#fef3f2;  --erro-b:#f0a9a2; --erro-t:#b42318;
  --sombra:0 1px 2px rgba(16,24,40,.05);
}
:root:not([data-tema="claro"]){
  @media (prefers-color-scheme: dark){
    --fundo:#0e0e12; --papel:#17171c; --tinta:#f2f4f7; --tinta-2:#c3c8d0;
    --tinta-3:#98a2b3; --grade:#282830; --borda:#3a3a44;
    --azul:#3987e5; --laranja:#d95926; --verde:#199e70;
    --aviso-f:#2a2213; --aviso-b:#7a5c1f;
    --ok-f:#12261c;    --ok-b:#2c6146;
    --erro-f:#2b1513;  --erro-b:#7a2f28; --erro-t:#f0a9a2;
    --sombra:none;
  }
}
:root[data-tema="escuro"]{
  --fundo:#0e0e12; --papel:#17171c; --tinta:#f2f4f7; --tinta-2:#c3c8d0;
  --tinta-3:#98a2b3; --grade:#282830; --borda:#3a3a44;
  --azul:#3987e5; --laranja:#d95926; --verde:#199e70;
  --aviso-f:#2a2213; --aviso-b:#7a5c1f;
  --ok-f:#12261c;    --ok-b:#2c6146;
  --erro-f:#2b1513;  --erro-b:#7a2f28; --erro-t:#f0a9a2;
  --sombra:none;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--fundo); color:var(--tinta);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--azul)}

/* ---------------------------------------------------------- topo */
.topo{
  background:var(--papel); border-bottom:1px solid var(--grade);
  position:sticky; top:0; z-index:20;
}
.topo-in{
  max-width:1440px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.logo{font-weight:600; font-size:15px; letter-spacing:-.01em; white-space:nowrap}
.logo small{display:block; font-weight:400; font-size:11.5px; color:var(--tinta-3)}
nav.abas{display:flex; gap:2px; flex-wrap:wrap}
.aba{
  font-size:13.5px; padding:7px 13px; border-radius:8px; text-decoration:none;
  color:var(--tinta-2);
}
.aba:hover{background:var(--fundo)}
.aba.atual{background:var(--fundo); color:var(--tinta); font-weight:600}
.topo-dir{margin-left:auto; display:flex; align-items:center; gap:10px}
#quem{font-size:12.5px; color:var(--tinta-3); white-space:nowrap}

.btn{
  font:inherit; font-size:13px; padding:7px 13px; border-radius:8px;
  border:1px solid var(--borda); background:var(--papel); color:var(--tinta);
  cursor:pointer; white-space:nowrap;
}
.btn:hover:not(:disabled){border-color:var(--tinta-3)}
.btn:disabled{opacity:.45; cursor:default}
.btn.forte{background:var(--azul); border-color:var(--azul); color:#fff}
.btn.forte:hover:not(:disabled){filter:brightness(1.08)}
.btn.perigo{color:var(--erro-t); border-color:var(--erro-b)}

/* ---------------------------------------------------------- página */
.env{max-width:1440px; margin:0 auto; padding:22px 16px 64px}
h1{margin:0 0 4px; font-size:21px; letter-spacing:-.01em}
.sub{margin:0 0 18px; font-size:13px; color:var(--tinta-3)}

.faixa{
  display:flex; gap:11px; padding:12px 14px; border-radius:10px; margin-bottom:14px;
  background:var(--aviso-f); border:1px solid var(--aviso-b);
}
.faixa.ok{background:var(--ok-f); border-color:var(--ok-b)}
.faixa.erro{background:var(--erro-f); border-color:var(--erro-b)}
.faixa h2{margin:0 0 2px; font-size:13.5px}
.faixa p{margin:0; font-size:13px; color:var(--tinta-2)}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:12px; margin-bottom:18px}
.tile{background:var(--papel); border:1px solid var(--grade); border-radius:10px;
      padding:13px 15px; box-shadow:var(--sombra)}
.tile .rot{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--tinta-3)}
.tile .val{font-size:22px; font-weight:600; margin:5px 0 2px; font-variant-numeric:tabular-nums}
.tile .val.vazio{color:var(--tinta-3)}
.tile .pe{font-size:12px; color:var(--tinta-3)}

.filtros{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  background:var(--papel); border:1px solid var(--grade); border-radius:10px;
  padding:12px 14px; margin-bottom:16px;
}
.campo{display:flex; flex-direction:column; gap:4px}
.campo > span{font-size:11.5px; color:var(--tinta-3)}
select, input[type=text], input[type=search], input[type=email],
input[type=password], input[type=number], textarea{
  font:inherit; font-size:13.5px; padding:7px 10px; border-radius:8px;
  border:1px solid var(--borda); background:var(--papel); color:var(--tinta);
}
select:focus, input:focus, textarea:focus{outline:2px solid var(--azul); outline-offset:-1px}
input[type=search]{min-width:220px}
.contagem{margin-left:auto; font-size:13px; color:var(--tinta-3)}

.cartao{
  background:var(--papel); border:1px solid var(--grade); border-radius:12px;
  overflow:hidden; margin-bottom:16px; box-shadow:var(--sombra);
}
.cartao > h2{margin:0; padding:14px 16px 0; font-size:15px}
.cartao > .desc{margin:4px 16px 12px; font-size:12.5px; color:var(--tinta-3)}
.rolagem{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:13.5px}
th,td{padding:9px 11px; text-align:left; border-bottom:1px solid var(--grade); white-space:nowrap}
th{font-size:11px; color:var(--tinta-3); text-transform:uppercase;
   letter-spacing:.03em; font-weight:600; background:var(--papel); position:sticky; top:0}
td.n, th.n{text-align:right; font-variant-numeric:tabular-nums}
td.fraco{color:var(--tinta-3)}
tbody tr:hover{background:color-mix(in srgb, var(--azul) 5%, transparent)}
tr:last-child td{border-bottom:none}

.marca{display:inline-block; width:8px; height:8px; border-radius:2px;
       margin-right:7px; vertical-align:baseline}
.pill{display:inline-block; font-size:11px; padding:2px 8px; border-radius:20px;
      border:1px solid var(--borda); color:var(--tinta-2); background:var(--fundo)}
.pill.ok{background:var(--ok-f); border-color:var(--ok-b)}
.pill.espera{background:var(--aviso-f); border-color:var(--aviso-b)}
.neg{color:var(--laranja)}

.paginacao{display:flex; align-items:center; justify-content:center; gap:14px;
           padding:13px; border-top:1px solid var(--grade)}
.pag-info{font-size:13px; color:var(--tinta-3); font-variant-numeric:tabular-nums}

.vazio{padding:38px 20px; text-align:center; color:var(--tinta-3)}
.vazio strong{display:block; color:var(--tinta-2); font-size:15px; margin-bottom:5px}

footer{margin-top:18px; font-size:12px; color:var(--tinta-3); line-height:1.6}

/* ---------------------------------------------------------- login */
.login-tela{display:flex; align-items:center; justify-content:center; min-height:100%; padding:24px}
.login-caixa{
  width:100%; max-width:390px; background:var(--papel);
  border:1px solid var(--grade); border-radius:14px; padding:28px;
  box-shadow:0 4px 20px rgba(16,24,40,.07);
}
.login-caixa h1{font-size:19px; margin-bottom:2px}
.login-caixa .sub{margin-bottom:20px}
.login-caixa label{display:block; margin-bottom:14px}
.login-caixa label span{display:block; font-size:12.5px; color:var(--tinta-2); margin-bottom:5px}
.login-caixa input{width:100%; font-size:15px; padding:10px 12px}
.login-caixa .btn{width:100%; padding:11px; font-size:14.5px; margin-top:4px}
.recado{font-size:13px; padding:10px 12px; border-radius:8px; margin-bottom:16px}
.recado.erro{background:var(--erro-f); border:1px solid var(--erro-b); color:var(--erro-t)}
.recado.ok{background:var(--ok-f); border:1px solid var(--ok-b)}

/* ---------------------------------------------------------- diálogo */
dialog{
  border:1px solid var(--borda); border-radius:14px; padding:0;
  max-width:min(620px,94vw); background:var(--papel); color:var(--tinta);
}
dialog::backdrop{background:rgba(16,24,40,.55)}
.dlg-topo{display:flex; align-items:center; gap:12px; padding:15px 19px;
          border-bottom:1px solid var(--grade)}
.dlg-topo h3{margin:0; font-size:16px}
.dlg-topo .btn{margin-left:auto}
.dlg-corpo{padding:18px 19px 22px}
.dlg-pe{display:flex; gap:9px; justify-content:flex-end; padding:0 19px 19px}

.chave{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px; letter-spacing:.04em; word-break:break-all; line-height:1.7;
  background:var(--fundo); border:1px solid var(--grade); border-radius:8px;
  padding:11px 13px;
}
.chave.vazia{font-family:inherit; letter-spacing:0; font-size:13px; color:var(--tinta-3)}

.grade-form{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.grade-form .largo{grid-column:1 / -1}
.marcadores{display:flex; flex-direction:column; gap:9px}
.marcador{display:flex; gap:9px; align-items:flex-start; font-size:13.5px}
.marcador input{margin-top:3px}
.marcador small{display:block; color:var(--tinta-3); font-size:12px}

@media (max-width:680px){
  .env{padding:16px 12px 48px; overflow-x:hidden}
  .topo-in{padding:10px 12px}
  .contagem{margin-left:0; width:100%}
  .grade-form{grid-template-columns:1fr}
  table{min-width:640px}
}