/* Inova Lotes — roxo do ipê (marca), verde da serra (dinheiro recebido), névoa fria no fundo.
   Uma família só (Archivo): larga nos títulos, estreita nos cabeçalhos de tabela, algarismos tabulares. */
:root {
  --ipe: #6b3fa0; --ipe-escuro: #4e2b7a; --ipe-claro: #efe8f7;
  --serra: #1f6b4a; --serra-claro: #e3f1ea;
  --tinta: #1c1b22; --texto2: #5e5b6b; --nevoa: #f5f4f7; --papel: #fff; --linha: #dedce5;
  --alerta: #b3261e; --alerta-claro: #fbe9e7; --ambar: #8a5f00; --ambar-claro: #fbf1d9;
  --raio: 6px; --sombra: 0 8px 28px rgba(40, 24, 66, .16);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--nevoa); color: var(--tinta); font: 14px/1.45 "Archivo", "Segoe UI", system-ui, sans-serif;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-stretch: 112%; font-weight: 650; letter-spacing: -.01em; margin: 0; }
h1 { font-size: 24px; } h2 { font-size: 17px; } h3 { font-size: 14px; }
a { color: var(--ipe); text-decoration: none; } a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ipe); outline-offset: 2px; }
.mudo { color: var(--texto2); } .num { text-align: right; white-space: nowrap; } .nowrap { white-space: nowrap; }
.verde { color: var(--serra); } .vermelho { color: var(--alerta); } .forte { font-weight: 650; }
[hidden] { display: none !important; }

/* ---------- casca */
.casca { display: grid; grid-template: 56px 1fr / 212px 1fr; height: 100vh; }
.topo { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; padding: 0 20px; background: var(--papel); border-bottom: 1px solid var(--linha); }
.marca { display: flex; align-items: center; gap: 10px; font-stretch: 112%; font-weight: 700; font-size: 17px; color: var(--tinta); width: 172px; }
.marca:hover { text-decoration: none; } .marca svg { width: 26px; height: 26px; }
.busca { position: relative; flex: 1; max-width: 560px; }
.busca input { width: 100%; height: 38px; padding: 0 12px 0 38px; border: 1px solid var(--linha); border-radius: 19px; background: var(--nevoa); }
.busca input:focus { background: var(--papel); border-color: var(--ipe); outline: none; }
.busca > svg { position: absolute; left: 13px; top: 11px; width: 16px; height: 16px; color: var(--texto2); }
.busca kbd { position: absolute; right: 12px; top: 9px; font: 11px inherit; color: var(--texto2); border: 1px solid var(--linha); border-radius: 4px; padding: 1px 5px; background: var(--papel); }
.sugestoes { position: absolute; top: 44px; left: 0; right: 0; background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; box-shadow: var(--sombra); max-height: 440px; overflow: auto; z-index: 30; padding: 6px; }
.sugestoes a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 6px; color: var(--tinta); }
.sugestoes a:hover, .sugestoes a.ativo { background: var(--ipe-claro); text-decoration: none; }
.sugestoes .vazio { padding: 14px; color: var(--texto2); }
.topo .espaco { flex: 1; }
.usuario { position: relative; }
.usuario > button { border: 0; background: none; padding: 6px 8px; border-radius: 6px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.usuario > button:hover { background: var(--nevoa); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--ipe); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 650; }
.menu { position: absolute; right: 0; top: 42px; min-width: 190px; background: var(--papel); border: 1px solid var(--linha); border-radius: 8px; box-shadow: var(--sombra); padding: 5px; z-index: 40; }
.menu button, .menu a { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 5px; cursor: pointer; color: var(--tinta); }
.menu button:hover, .menu a:hover { background: var(--nevoa); text-decoration: none; }
.menu .perigo { color: var(--alerta); } .menu hr { border: 0; border-top: 1px solid var(--linha); margin: 4px 0; }

.lado { background: var(--nevoa); border-right: 1px solid var(--linha); padding: 14px 10px; overflow: auto; }
.lado a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; color: var(--tinta); border-left: 3px solid transparent; }
.lado a svg { width: 17px; height: 17px; color: var(--texto2); flex: none; }
.lado a:hover { background: #eae8f0; text-decoration: none; }
.lado a.ativo { background: var(--papel); border-left-color: var(--ipe); font-weight: 650; }
.lado a.ativo svg { color: var(--ipe); }
.lado .grupo { margin: 16px 10px 4px; font-size: 12px; color: var(--texto2); font-stretch: 88%; font-weight: 600; }
main { overflow: auto; padding: 24px 28px 60px; }
.pagina { max-width: 1280px; margin: 0 auto; }
.cab { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.cab .sub { color: var(--texto2); margin-top: 2px; } .cab .acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- peças */
.btn { height: 34px; padding: 0 14px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); cursor: pointer; font-weight: 550; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.btn:hover { border-color: #bdb9cb; background: #fbfaff; }
.btn.pri { background: var(--ipe); border-color: var(--ipe); color: #fff; } .btn.pri:hover { background: var(--ipe-escuro); }
.btn.rec { background: var(--serra); border-color: var(--serra); color: #fff; } .btn.rec:hover { background: #185a3d; }
.btn.perigo { color: var(--alerta); border-color: #e3b5b0; } .btn.perigo:hover { background: var(--alerta-claro); }
.btn.mini { height: 26px; padding: 0 9px; font-size: 13px; } .btn.liso { border-color: transparent; background: none; }
.btn:disabled { opacity: .5; cursor: default; } .btn svg { width: 15px; height: 15px; }
.painel { background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; }
.painel > .tit { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--linha); }
.painel > .tit .acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.painel > .corpo { padding: 16px; }
.colunas { display: grid; gap: 18px; } .c2 { grid-template-columns: 1fr 1fr; } .c3 { grid-template-columns: repeat(3, 1fr); } .c21 { grid-template-columns: 1.6fr 1fr; }
.placa { display: inline-flex; border: 1.5px solid var(--serra); color: var(--serra); border-radius: 4px; font-stretch: 86%; font-weight: 650; line-height: 1.25; background: var(--papel); white-space: nowrap; vertical-align: middle; }
.placa span { padding: 1px 6px; } .placa span + span { border-left: 1.5px solid var(--serra); }
.placa.grande { font-size: 20px; border-width: 2px; } .placa.grande span { padding: 2px 10px; } .placa.grande span + span { border-left-width: 2px; }
.placa.vaga { border-color: #a9a5b8; color: var(--texto2); } .placa.vaga span + span { border-left-color: #a9a5b8; }
.selo { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border-radius: 20px; font-size: 12.5px; font-weight: 600; background: var(--nevoa); color: var(--texto2); white-space: nowrap; }
.selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.selo.paga { background: var(--serra-claro); color: var(--serra); } .selo.vencida { background: var(--alerta-claro); color: var(--alerta); }
.selo.aberta { background: var(--ipe-claro); color: var(--ipe-escuro); } .selo.ambar { background: var(--ambar-claro); color: var(--ambar); }
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--linha); margin: 18px 0; }
.abas a { padding: 9px 14px; color: var(--texto2); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 550; }
.abas a:hover { color: var(--tinta); text-decoration: none; } .abas a.ativo { color: var(--ipe); border-bottom-color: var(--ipe); }
.filtros { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.chips { display: inline-flex; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: var(--papel); }
.chips button { border: 0; background: none; height: 32px; padding: 0 12px; cursor: pointer; color: var(--texto2); }
.chips button + button { border-left: 1px solid var(--linha); } .chips button.ativo { background: var(--ipe-claro); color: var(--ipe-escuro); font-weight: 650; }

/* ---------- formulários */
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo > span { font-size: 12.5px; color: var(--texto2); font-weight: 550; }
.campo input, .campo select, .campo textarea, .in { height: 34px; padding: 0 10px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); min-width: 0; width: 100%; }
.campo textarea { height: auto; padding: 8px 10px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .in:focus { border-color: var(--ipe); outline: none; box-shadow: 0 0 0 3px var(--ipe-claro); }
.campo input[readonly], .campo input:disabled, .campo select:disabled, .campo textarea[readonly] { background: var(--nevoa); color: var(--tinta); border-color: transparent; }
.grade { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px 14px; }
.g1 { grid-column: span 1; } .g2 { grid-column: span 2; } .g3 { grid-column: span 3; } .g4 { grid-column: span 4; } .g5 { grid-column: span 5; } .g6 { grid-column: span 6; } .g8 { grid-column: span 8; } .g9 { grid-column: span 9; } .g12 { grid-column: span 12; }
.secao { margin: 22px 0 10px; } .secao:first-child { margin-top: 0; }
input.num { text-align: right; } .check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }

/* ---------- tabelas */
.tab-wrap { overflow: auto; border: 1px solid var(--linha); border-radius: 10px; background: var(--papel); }
table.tab { border-collapse: collapse; width: 100%; }
.tab th { position: sticky; top: 0; background: #faf9fc; text-align: left; font-stretch: 88%; font-weight: 600; font-size: 12.5px; color: var(--texto2); padding: 8px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; z-index: 1; }
.tab td { padding: 6px 10px; border-bottom: 1px solid #efedf3; vertical-align: middle; }
.tab tbody tr:last-child td { border-bottom: 0; } .tab th.num { text-align: right; }
.tab tbody tr.clic { cursor: pointer; } .tab tbody tr:hover { background: #faf9fc; }
.tab tbody tr.marcada { background: var(--ipe-claro); }
.tab tfoot td { border-top: 1px solid var(--linha); font-weight: 650; background: #faf9fc; padding: 8px 10px; }
.tab input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--ipe); }
.tab .in { height: 28px; padding: 0 7px; } .vazio { padding: 28px; text-align: center; color: var(--texto2); }
.barra-sel { position: sticky; bottom: 12px; margin-top: 12px; display: flex; align-items: center; gap: 14px; background: var(--tinta); color: #fff; padding: 10px 12px 10px 18px; border-radius: 10px; box-shadow: var(--sombra); }
.barra-sel .espaco { flex: 1; }

/* ---------- régua de parcelas (a marca visual do lote) */
.regua { display: flex; gap: 1px; height: 26px; align-items: stretch; }
.regua i { flex: 1 1 0; min-width: 2px; max-width: 14px; border-radius: 1.5px; background: #d9d6e2; }
.regua i.paga { background: var(--serra); } .regua i.vencida { background: var(--alerta); } .regua i.aberta { background: var(--ipe); }
.regua i.futura { background: repeating-linear-gradient(135deg, #e4e1ec 0 2px, #f3f1f7 2px 4px); }
.legenda { display: flex; gap: 16px; margin-top: 8px; font-size: 12.5px; color: var(--texto2); flex-wrap: wrap; }
.legenda b { font-weight: 650; color: var(--tinta); } .legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.numeros { display: flex; gap: 34px; flex-wrap: wrap; } .numeros div span { display: block; font-size: 12.5px; color: var(--texto2); }
.numeros div b { font-size: 20px; font-stretch: 105%; font-weight: 650; }

/* ---------- planta */
.planta { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.planta a { border: 1.5px solid var(--linha); border-radius: 8px; padding: 8px 10px; background: var(--papel); color: var(--tinta); min-height: 62px; display: flex; flex-direction: column; justify-content: space-between; }
.planta a:hover { text-decoration: none; box-shadow: 0 2px 10px rgba(40, 24, 66, .12); }
.planta a b { font-size: 17px; font-stretch: 90%; } .planta a small { font-size: 11.5px; color: var(--texto2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planta a.vago { border-style: dashed; background: #fbfaff; } .planta a.vendido { border-color: var(--ipe); background: var(--ipe-claro); }
.planta a.quitado { border-color: var(--serra); background: var(--serra-claro); } .planta a.atraso { border-color: var(--alerta); background: var(--alerta-claro); }

/* ---------- modal, aviso, login */
.fundo { position: fixed; inset: 0; background: rgba(28, 27, 34, .45); display: grid; place-items: start center; padding: 6vh 16px 16px; z-index: 100; overflow: auto; }
.modal { background: var(--papel); border-radius: 12px; box-shadow: var(--sombra); width: min(680px, 100%); animation: sobe .14s ease-out; }
.modal.larga { width: min(1020px, 100%); } .modal.estreita { width: min(440px, 100%); }
.modal > header { display: flex; align-items: center; padding: 16px 20px 0; } .modal > header h2 { flex: 1; }
.modal > header button { border: 0; background: none; cursor: pointer; font-size: 22px; line-height: 1; color: var(--texto2); padding: 4px 8px; border-radius: 6px; }
.modal > header button:hover { background: var(--nevoa); }
.modal > .corpo { padding: 16px 20px; } .modal > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 18px; flex-wrap: wrap; }
.modal > footer .esq { margin-right: auto; }
@keyframes sobe { from { opacity: 0; transform: translateY(8px); } }
.avisos { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.aviso { background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 8px; box-shadow: var(--sombra); max-width: 420px; animation: sobe .14s ease-out; }
.aviso.erro { background: var(--alerta); } .aviso.ok { background: var(--serra); }
.nota { background: var(--ambar-claro); color: #5c4200; border-radius: 8px; padding: 10px 14px; }
.nota.perigo { background: var(--alerta-claro); color: #7a1a14; }
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login .lado-marca { background: var(--ipe-escuro); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login .lado-marca h1 { font-size: 44px; line-height: 1.05; max-width: 9em; } .login .lado-marca p { max-width: 30em; opacity: .85; font-size: 15.5px; }
.login .lado-marca .regua { height: 64px; opacity: .9; } .login .lado-marca .regua i { max-width: none; background: rgba(255, 255, 255, .16); }
.login .lado-marca .regua i.paga { background: #7fd1a8; } .login .lado-marca .regua i.aberta { background: #c9a9ee; }
.login form { align-self: center; justify-self: center; width: min(340px, 86vw); display: flex; flex-direction: column; gap: 14px; }
.login form .btn { height: 40px; justify-content: center; }
.carregando { padding: 40px; color: var(--texto2); }

/* ---------- roteiro de teste */
.item-roteiro { display: grid; grid-template-columns: 1.15fr auto 1fr; gap: 16px; align-items: start; padding: 13px 0; border-bottom: 1px solid #efedf3; }
.item-roteiro:last-child { border-bottom: 0; } .chips button.prob.ativo { background: var(--alerta-claro); color: var(--alerta); }
@media (max-width: 900px) { .item-roteiro { grid-template-columns: 1fr; } }

/* ---------- boleto */
.boleto { color: #000; font-size: 12.5px; max-width: 190mm; }
.boleto .bol-topo { display: flex; align-items: flex-end; gap: 0; border-bottom: 2px solid #000; }
.boleto .bol-topo b { font-size: 18px; padding: 2px 12px 2px 0; } .boleto .bol-topo b + b { border-left: 2px solid #000; border-right: 2px solid #000; padding: 2px 12px; }
.boleto .bol-topo span { flex: 1; text-align: right; font-weight: 650; font-size: 14.5px; padding-bottom: 3px; }
.boleto table { border-collapse: collapse; width: 100%; } .boleto td { border: 1px solid #000; border-top: 0; padding: 2px 6px 4px; vertical-align: top; }
.boleto td small { display: block; font-size: 9.5px; color: #333; } .boleto td.num div { text-align: right; font-weight: 650; }
.boleto .bol-barras { padding: 10px 0 2px; }

/* ---------- impressão */
#print { display: none; }
@media print {
  body > *:not(#print) { display: none !important; }
  #print { display: block; color: #000; font-size: 11.5px; }
  #print h1 { font-size: 16px; } #print table { border-collapse: collapse; width: 100%; margin-top: 8px; }
  #print th, #print td { border-bottom: 1px solid #bbb; padding: 3px 6px; text-align: left; } #print .num { text-align: right; }
  #print .boleto td { border: 1px solid #000; border-top: 0; }
  #print .cab-imp { display: flex; justify-content: space-between; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 8px; }
  #print .recibo { border: 1px solid #000; padding: 18px; margin-bottom: 20px; } #print .assin { margin-top: 46px; border-top: 1px solid #000; width: 60%; padding-top: 4px; }
}
@media (max-width: 900px) {
  .casca { grid-template: 56px auto 1fr / 1fr; } .lado { display: flex; gap: 4px; overflow-x: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--linha); }
  .lado .grupo { display: none; } .lado a { white-space: nowrap; border-left: 0; } main { padding: 16px; }
  .c2, .c3, .c21 { grid-template-columns: 1fr; } .marca span { display: none; } .marca { width: auto; } .busca kbd { display: none; }
  .login { grid-template-columns: 1fr; } .login .lado-marca { display: none; }
  .g1, .g2, .g3, .g4, .g5 { grid-column: span 6; } .g8, .g9 { grid-column: span 12; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }