/* app.css — visual do sistema do escritório */

:root{
  --tinta:#16213a;        /* azul-marinho do cabeçalho e da barra lateral */
  --tinta-2:#22314f;
  --acento:#2f6feb;
  --acento-fraco:#e8f0fe;
  --fundo:#f4f5f8;
  --papel:#ffffff;
  --borda:#e3e6ec;
  --texto:#1c2333;
  --texto-fraco:#6b7488;
  --verde:#0f8b53;
  --verde-fraco:#e6f5ee;
  --vermelho:#c0392b;
  --vermelho-fraco:#fdeceb;
  --ambar:#b7791f;
  --ambar-fraco:#fdf3e2;
  --raio:10px;
  --sombra:0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:14px/1.5 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--fundo); color:var(--texto);
}
a{color:var(--acento);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit}

/* ---------------------------------------------------------------- login -- */
.entrada{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#16213a,#2b3f66);padding:20px;
}
.entrada .caixa{
  background:var(--papel);border-radius:14px;padding:32px;width:100%;max-width:420px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.entrada h1{margin:0 0 4px;font-size:21px}
.entrada p.sub{margin:0 0 22px;color:var(--texto-fraco)}

/* ----------------------------------------------------------------- app --- */
.app{display:flex;min-height:100vh}
.lateral{
  width:216px;flex:0 0 216px;background:var(--tinta);color:#dfe5f0;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.lateral .marca{padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.09)}
.lateral .marca b{display:block;font-size:15px;color:#fff;line-height:1.3}
.lateral .marca span{font-size:11px;color:#93a2be;letter-spacing:.04em;text-transform:uppercase}
.lateral nav{padding:10px 8px;flex:1;overflow:auto}
.lateral nav button{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:0;color:#c6cfe0;padding:9px 11px;border-radius:8px;
  cursor:pointer;font-size:14px;margin-bottom:2px;
}
.lateral nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.lateral nav button.on{background:var(--acento);color:#fff;font-weight:500}
.lateral nav button .ico{width:18px;text-align:center;font-size:15px}
.lateral nav button .selo{
  margin-left:auto;background:var(--vermelho);color:#fff;border-radius:20px;
  padding:1px 7px;font-size:11px;font-weight:600;
}
.lateral .rodape{padding:12px 14px;border-top:1px solid rgba(255,255,255,.09);font-size:12px;color:#93a2be}
.lateral .rodape button{background:none;border:0;color:#93a2be;cursor:pointer;padding:0;font-size:12px}
.lateral .rodape button:hover{color:#fff;text-decoration:underline}

.conteudo{flex:1;min-width:0;display:flex;flex-direction:column}
.topo{
  background:var(--papel);border-bottom:1px solid var(--borda);padding:12px 22px;
  display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20;
}
.topo h2{margin:0;font-size:17px;font-weight:600;white-space:nowrap}
.busca{position:relative;flex:1;max-width:420px;margin-left:auto}
.busca input{width:100%}
.busca .achados{
  position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--papel);
  border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra);
  overflow:hidden;z-index:30;
}
.busca .achados div{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--borda)}
.busca .achados div:last-child{border-bottom:0}
.busca .achados div:hover{background:var(--acento-fraco)}
.busca .achados small{display:block;color:var(--texto-fraco)}
.tela{padding:22px;flex:1}

/* -------------------------------------------------------------- básicos -- */
.cartao{background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio);
  box-shadow:var(--sombra);margin-bottom:18px;overflow:hidden}
.cartao > h3{
  margin:0;padding:13px 16px;border-bottom:1px solid var(--borda);font-size:14px;
  display:flex;align-items:center;gap:10px;
}
.cartao > h3 .direita{margin-left:auto;display:flex;gap:8px;align-items:center}
.cartao .corpo{padding:16px}
.cartao .corpo.zerado{padding:0}

.btn{
  background:var(--acento);color:#fff;border:1px solid var(--acento);padding:7px 13px;
  border-radius:8px;cursor:pointer;font-size:13.5px;display:inline-flex;align-items:center;gap:6px;
}
.btn:hover{filter:brightness(1.07)}
.btn.claro{background:var(--papel);color:var(--texto);border-color:var(--borda)}
.btn.claro:hover{background:#f7f8fa}
.btn.perigo{background:var(--vermelho);border-color:var(--vermelho)}
.btn.mini{padding:4px 9px;font-size:12.5px;border-radius:7px}
.btn:disabled{opacity:.55;cursor:not-allowed}

input,select,textarea{
  width:100%;padding:8px 10px;border:1px solid var(--borda);border-radius:8px;
  background:#fff;color:var(--texto);font:inherit;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--acento);box-shadow:0 0 0 3px rgba(47,111,235,.13);
}
textarea{min-height:74px;resize:vertical}
label{display:block;font-size:12.5px;color:var(--texto-fraco);margin-bottom:4px;font-weight:500}
.campo{margin-bottom:13px}
.grade{display:grid;gap:13px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}
.linha{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.check{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--texto)}
.check input{width:auto}

table{width:100%;border-collapse:collapse}
th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--texto-fraco);padding:9px 14px;border-bottom:1px solid var(--borda);
  background:#fafbfc;white-space:nowrap;
}
td{padding:10px 14px;border-bottom:1px solid var(--borda);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafbfd}
tr.clique{cursor:pointer}
td.acoes{white-space:nowrap;text-align:right}
.tabela-rolagem{overflow-x:auto}

.rotulo{
  display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;
  font-weight:600;background:#eef0f4;color:#4a5468;white-space:nowrap;
}
.rotulo.verde{background:var(--verde-fraco);color:var(--verde)}
.rotulo.vermelho{background:var(--vermelho-fraco);color:var(--vermelho)}
.rotulo.ambar{background:var(--ambar-fraco);color:var(--ambar)}
.rotulo.azul{background:var(--acento-fraco);color:var(--acento)}

.vazio{padding:34px 18px;text-align:center;color:var(--texto-fraco)}
.vazio b{display:block;color:var(--texto);margin-bottom:4px;font-size:15px}
.fraco{color:var(--texto-fraco)}
.pequeno{font-size:12.5px}
.dinheiro{font-variant-numeric:tabular-nums;white-space:nowrap}
.negativo{color:var(--vermelho)}
.positivo{color:var(--verde)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}

/* ------------------------------------------------------------ indicadores */
.indicadores{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-bottom:18px}
.indicador{
  background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio);
  padding:14px 16px;box-shadow:var(--sombra);
}
.indicador .rot{font-size:12px;color:var(--texto-fraco);margin-bottom:5px}
.indicador .val{font-size:23px;font-weight:600;line-height:1.1}
.indicador .obs{font-size:12px;color:var(--texto-fraco);margin-top:3px}
.indicador.alerta{border-left:3px solid var(--vermelho)}
.indicador.ok{border-left:3px solid var(--verde)}

/* ------------------------------------------------------------------ modal */
.fundo-modal{
  position:fixed;inset:0;background:rgba(16,24,40,.5);display:flex;
  align-items:flex-start;justify-content:center;padding:34px 16px;z-index:100;overflow:auto;
}
.modal{
  background:var(--papel);border-radius:12px;width:100%;max-width:760px;
  box-shadow:0 24px 60px rgba(0,0,0,.3);overflow:hidden;
}
.modal.largo{max-width:1020px}
.modal h3{
  margin:0;padding:15px 20px;border-bottom:1px solid var(--borda);font-size:16px;
  display:flex;align-items:center;gap:10px;
}
.modal h3 .fechar{margin-left:auto;background:none;border:0;font-size:22px;cursor:pointer;color:var(--texto-fraco);line-height:1}
.modal .corpo{padding:20px;max-height:calc(100vh - 210px);overflow:auto}
.modal .pe{padding:13px 20px;border-top:1px solid var(--borda);display:flex;gap:9px;justify-content:flex-end;background:#fafbfc}
.modal .pe .esquerda{margin-right:auto}

/* --------------------------------------------------------------- abas ---- */
.abas{display:flex;gap:2px;border-bottom:1px solid var(--borda);padding:0 16px;background:#fafbfc}
.abas button{
  background:none;border:0;border-bottom:2px solid transparent;padding:11px 13px;
  cursor:pointer;color:var(--texto-fraco);font-size:13.5px;
}
.abas button.on{color:var(--acento);border-bottom-color:var(--acento);font-weight:600}
.abas button .selo{background:var(--vermelho);color:#fff;border-radius:20px;padding:0 6px;font-size:11px;margin-left:5px}

/* ------------------------------------------------------------ andamentos - */
.trilha{position:relative;padding-left:20px}
.trilha:before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--borda)}
.mov{position:relative;padding:0 0 15px 4px}
.mov:before{
  content:"";position:absolute;left:-19px;top:5px;width:10px;height:10px;border-radius:50%;
  background:var(--papel);border:2px solid var(--borda);
}
.mov.novo:before{background:var(--acento);border-color:var(--acento)}
.mov .quando{font-size:12px;color:var(--texto-fraco)}
.mov .oque{font-weight:500}
.mov .comp{font-size:12.5px;color:var(--texto-fraco)}

/* --------------------------------------------------------------- avisos -- */
.aviso{
  padding:11px 14px;border-radius:8px;background:var(--ambar-fraco);color:#7a5510;
  font-size:13px;margin-bottom:14px;border:1px solid #f0dfbe;
}
.aviso.erro{background:var(--vermelho-fraco);color:#8a2a20;border-color:#f3c8c3}
.aviso.ok{background:var(--verde-fraco);color:#0b6b41;border-color:#bfe5d3}
.aviso.info{background:var(--acento-fraco);color:#1a4bb5;border-color:#c8d9fb}

#recado{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:300;
  background:var(--tinta);color:#fff;padding:11px 18px;border-radius:9px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:13.5px;max-width:80vw;
}
#recado.erro{background:var(--vermelho)}
#recado.ok{background:var(--verde)}

.carregando{padding:40px;text-align:center;color:var(--texto-fraco)}

@media(max-width:760px){
  .lateral{position:fixed;left:-216px;z-index:200;transition:left .2s}
  .lateral.aberta{left:0}
  .tela{padding:14px}
  .topo{padding:11px 14px}
}
.menu-movel{display:none;background:none;border:0;font-size:20px;cursor:pointer}
@media(max-width:760px){.menu-movel{display:block}}

/* ------------------------------------------------- calendário do prazo --- */
.cal-meses{display:flex;flex-wrap:wrap;gap:18px}
.cal-mes{width:236px}
.cal-titulo{font-size:12.5px;font-weight:600;margin-bottom:6px;text-transform:capitalize}
.cal-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-cab{
  text-align:center;font-size:10.5px;color:var(--texto-fraco);font-weight:600;
  padding-bottom:2px;
}
.cal-vazio{height:30px}
.cal-dia{
  position:relative;height:30px;display:flex;align-items:center;justify-content:center;
  border-radius:6px;font-size:12px;background:#f4f5f8;color:var(--texto-fraco);cursor:default;
}
.cal-dia.fora{background:transparent;color:#c3c8d2}
.cal-dia.pula{background:#eceef3;color:#98a0b0;text-decoration:line-through}
.cal-dia.conta{background:var(--acento-fraco);color:var(--acento);font-weight:600}
.cal-dia.base{background:#fdf3e2;color:var(--ambar);font-weight:600;box-shadow:inset 0 0 0 1px #e8c98a}
.cal-dia.fatal{background:var(--verde);color:#fff;font-weight:700;box-shadow:0 0 0 2px #bfe5d3}
.cal-n{
  position:absolute;top:1px;right:3px;font-size:8.5px;font-weight:600;opacity:.65;
}
.cal-amostra{
  display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;
  margin-right:3px;background:#eceef3;
}
.cal-amostra.conta{background:var(--acento-fraco);box-shadow:inset 0 0 0 1px var(--acento)}
.cal-amostra.base{background:#fdf3e2;box-shadow:inset 0 0 0 1px #e8c98a}
.cal-amostra.fatal{background:var(--verde)}
.cal-amostra.pula{background:#eceef3;box-shadow:inset 0 0 0 1px #ccd1db}