/* Equalize Recorrência — visual alinhado ao Equalize ERP */
:root{
  --verde:#2e7d32;          /* menu lateral */
  --verde-esc:#1b5e20;      /* item ativo, título das tabelas */
  --verde-logo:#276641;
  --verde-claro:#e8f3e9;
  --ciano:#17a2c4;
  --fundo:#eef0ef;
  --branco:#fff;
  --borda:#dcdfdd;
  --linha-par:#f4f5f4;
  --txt:#222;
  --mut:#6b7280;
  --ok:#1b7f4b;
  --erro:#c62828;
  --aviso:#8a5a00;
  --azul-link:#1a73e8;
  --campo:#eef3fb;
  --raio:8px;
  --lateral:220px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;font:14px/1.5 "Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--fundo);color:var(--txt)}
a{color:var(--verde)}
img{max-width:100%}

/* ---------- Estrutura (logado) ---------- */
.app{display:flex;min-height:100vh}
.lateral{width:var(--lateral);flex:0 0 var(--lateral);background:var(--verde);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.lateral .logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--branco);height:62px;padding:8px 18px;text-decoration:none;border-bottom:1px solid var(--borda)}
.lateral .logo img{height:26px;width:auto}
.lateral .logo span{font-size:10px;font-weight:700;letter-spacing:.18em;color:#8a8d90;text-transform:uppercase}
.lateral nav{padding:8px 0 50px}
.lateral nav a{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:600;font-size:13.5px;padding:9px 16px}
.lateral nav a i{width:22px;text-align:center;font-size:17px}
.lateral nav a:hover{background:rgba(0,0,0,.12)}
.lateral nav a.ativo{background:var(--verde-esc)}
.lateral .grupo{margin:14px 16px 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#c7e3c9}

.principal{flex:1;min-width:0;display:flex;flex-direction:column}
.topo{background:var(--branco);height:62px;display:flex;align-items:center;gap:16px;padding:0 20px;border-bottom:1px solid var(--borda);position:sticky;top:0;z-index:5}
.topo .menu-movel{display:none;background:none;border:1px solid var(--borda);border-radius:var(--raio);padding:6px 10px;cursor:pointer;color:var(--verde)}
.topo .espaco{flex:1}
.topo .empresa{border:1px solid var(--borda);border-radius:var(--raio);padding:5px 12px;line-height:1.25;min-width:0}
.topo .empresa strong{display:block;font-size:12.5px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topo .empresa small{font-size:10.5px;color:var(--mut)}
.topo .usuario{display:flex;align-items:center;gap:10px;font-weight:700;text-transform:uppercase;font-size:13px}
.topo .usuario .avatar{width:32px;height:32px;border-radius:50%;background:#5f6b7a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}
.topo .usuario form{margin:0}
.topo .usuario button{background:none;border:1px solid var(--borda);border-radius:var(--raio);padding:5px 10px;cursor:pointer;font:inherit;font-size:12px;color:var(--txt);text-transform:none;font-weight:600}
.topo .usuario button:hover{border-color:var(--erro);color:var(--erro)}

main{flex:1;padding:16px 20px 70px}
.pagina{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);padding:16px 20px}
.rodape{position:fixed;left:0;right:0;bottom:0;height:34px;background:#f1f2f1;border-top:1px solid var(--borda);display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:12px;color:#555;z-index:6}

/* ---------- Títulos ---------- */
.cabecalho{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--borda)}
h1{font-size:18px;font-weight:600;margin:0;display:flex;align-items:center;gap:10px}
h1 i{color:var(--verde)}
.cabecalho h1{margin:0}
h2{font-size:15px;font-weight:700;margin:22px 0 10px;color:var(--verde-esc)}
.cartao h2:first-child{margin-top:0}
.boas-vindas strong{display:block;font-size:14px}
.boas-vindas span{font-size:12.5px;color:var(--mut)}

/* ---------- Cartões e indicadores ---------- */
.cartao{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);padding:16px 18px;margin-bottom:14px}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:14px}
.indicador{border-radius:var(--raio);color:#fff;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;min-height:92px}
.indicador .icone{background:rgba(0,0,0,.18);border-radius:6px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 36px}
.indicador .rotulo{font-weight:700;font-size:14px}
.indicador .numero{font-size:24px;font-weight:700;line-height:1.2}
.indicador small{display:block;opacity:.9;font-size:12px}
.indicador.verde{background:#16a34a}
.indicador.ciano{background:var(--ciano)}
.indicador.cinza{background:#5f6b7a}
.mut{color:var(--mut);font-size:12.5px}

/* ---------- Tabelas (como as listas do ERP) ---------- */
.tabela{overflow-x:auto;border:1px solid var(--borda);border-radius:4px}
table{width:100%;border-collapse:collapse;background:var(--branco)}
th,td{padding:8px 12px;text-align:left;border-bottom:1px solid #e6e8e6;font-size:13px;vertical-align:middle}
th{background:var(--verde-esc);color:#fff;font-weight:700;white-space:nowrap}
tbody tr:nth-child(even) td,table tr:nth-child(even) td{background:var(--linha-par)}
tr:last-child td{border-bottom:0}
td.num{text-align:right}
.tabela td{white-space:nowrap}       /* uma linha por registro, como no ERP; a tabela rola para o lado */
.tabela td .alerta,.tabela td.quebra{white-space:normal}

/* ---------- Formulários ---------- */
label{display:block;font-weight:600;margin:12px 0 4px;font-size:13px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],select{width:100%;padding:8px 11px;border:1px solid var(--borda);border-radius:var(--raio);font:inherit;background:var(--branco);color:var(--txt)}
input:focus,select:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(46,125,50,.15)}
.linha{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 18px}
.check{display:flex;align-items:center;gap:8px;font-weight:500;margin:14px 0 4px}
.check input{width:auto;accent-color:var(--verde)}
input[type=checkbox]{accent-color:var(--verde);width:16px;height:16px}

/* busca no canto, como "Pesquise aqui..." do ERP */
.busca{display:flex;align-items:stretch}
.busca input{width:260px;border-radius:var(--raio) 0 0 var(--raio)}
.busca button{border:1px solid var(--borda);border-left:0;background:var(--branco);color:var(--verde);border-radius:0 var(--raio) var(--raio) 0;padding:0 12px;cursor:pointer}
.busca button:hover{background:var(--verde-claro)}

textarea{width:100%;padding:8px 11px;border:1px solid var(--borda);border-radius:var(--raio);font:inherit;min-height:70px;resize:vertical}
.obrig::after{content:" *";color:var(--erro)}
.ajuda{font-size:12px;color:var(--mut);margin-top:3px}

/* campo "digite para procurar" */
.autocompletar{position:relative}
.autocompletar .ac-lista{position:absolute;z-index:30;left:0;right:0;top:100%;margin:2px 0 0;padding:4px 0;list-style:none;background:#fff;border:1px solid var(--borda);border-radius:var(--raio);box-shadow:0 6px 20px rgba(0,0,0,.12);max-height:280px;overflow-y:auto}
.autocompletar .ac-lista li{padding:7px 12px;cursor:pointer;font-size:13px}
.autocompletar .ac-lista li:hover,.autocompletar .ac-lista li.marcado{background:var(--verde-claro)}
.autocompletar .ac-lista li.vazio{color:var(--mut);cursor:default}
.autocompletar.escolhido .ac-texto{border-color:var(--verde);background:#f6fbf6}

/* blocos do contrato */
.bloco{border:1px solid var(--borda);border-radius:var(--raio);padding:4px 16px 14px;margin-bottom:14px}
.bloco>h2{margin:12px 0 2px}
.resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:10px 0}
.resumo div{background:var(--linha-par);border-radius:var(--raio);padding:8px 12px}
.resumo small{display:block;color:var(--mut);font-size:11.5px}
.resumo strong{font-size:15px}
.negativo{color:var(--erro)!important}
.dados{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px 18px;margin:6px 0 10px}
.dados div{padding:5px 0;border-bottom:1px dashed #e3e5e3}
.dados small{display:block;color:var(--mut);font-size:11.5px}
.selo.aguardando{background:#fff5e0;color:var(--aviso)}
.selo.ativo{background:#e6f4ec;color:var(--ok)}
.selo.inativo{background:#eceff1;color:var(--mut)}
.selo.encerrado{background:#fdecea;color:var(--erro)}
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.filtros>div{min-width:170px}
.filtros label{margin-top:0}
.totais{display:flex;gap:18px;flex-wrap:wrap;margin:12px 0 0;font-size:13px}
.totais strong{font-size:14px}

/* ---------- Botões ---------- */
button.primario,.botao{background:var(--branco);color:var(--verde);border:1.5px solid var(--verde);border-radius:var(--raio);padding:7px 16px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
button.primario:hover,.botao:hover{background:var(--verde);color:#fff}
button.leve{background:var(--branco);border:1px solid #9aa1a9;border-radius:var(--raio);padding:4px 10px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;color:#333;display:inline-flex;align-items:center;gap:6px}
button.leve:hover{border-color:var(--verde);color:var(--verde)}
button.perigo:hover{border-color:var(--erro);color:var(--erro)}
.acoes{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
/* botão quadrado de "editar/abrir" das listas, como no ERP */
a.leve-link{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;border:1.5px solid #3b7ddd;color:#3b7ddd;border-radius:7px;text-decoration:none}
a.leve-link:hover{background:#3b7ddd;color:#fff}

/* ---------- Avisos e selos ---------- */
.alerta{padding:10px 14px;border-radius:var(--raio);margin-bottom:14px;font-size:13px}
.alerta.ok{background:#e6f4ec;color:var(--ok);border:1px solid #bfe0cc}
.alerta.erro{background:#fdecea;color:var(--erro);border:1px solid #f5c2bd}
.alerta.aviso{background:#fff5e0;color:var(--aviso);border:1px solid #f0d9a6}
.selo{display:inline-block;padding:1px 10px;border-radius:99px;font-size:11.5px;font-weight:700}
.selo.ok{background:#e6f4ec;color:var(--ok)}.selo.erro{background:#fdecea;color:var(--erro)}.selo.mut{background:#eceff1;color:var(--mut)}
.erro-campo{color:var(--erro);font-size:12.5px;margin-top:4px}

/* ---------- Paginação (Anterior 1 2 3 Próximo) ---------- */
.paginacao{margin-top:12px;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.paginacao a,.paginacao span{padding:4px 10px;border-radius:4px;text-decoration:none;font-size:12.5px;color:#444}
.paginacao a:hover{background:var(--linha-par)}
.paginacao .atual{background:#e9ebe9;border:1px solid #c9ccc9;font-weight:700}

/* ---------- Tela de entrada ---------- */
.entrada{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#f6f6f6 0%,#e9e9e9 45%,#f4f4f4 46%,#ececec 100%)}
.entrada .lados{flex:1;display:grid;grid-template-columns:1fr 1fr;padding:24px 0 50px}
.entrada .marca{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:30px}
.entrada .marca img{width:min(320px,80%)}
.entrada .marca p{margin:0;font-size:15px;font-weight:500}
.entrada .painel{background:var(--branco);border:1px solid var(--borda);border-right:0;border-radius:12px 0 0 12px;display:flex;flex-direction:column;justify-content:center;padding:40px 12%}
.entrada .painel h1{font-size:30px;font-weight:500;margin-bottom:4px}
.entrada .painel p{margin:0 0 18px;font-size:13px}
.entrada input[type=email],.entrada input[type=password]{background:var(--campo);border-color:#d6deea;padding:10px 12px}
.entrada button.primario{width:100%;justify-content:center;padding:10px;font-size:15px;margin-top:20px}
.entrada .aviso-erp{margin-top:18px;font-size:12px;color:var(--mut);text-align:center}

/* ---------- Celular e tablet ---------- */
@media (max-width:900px){
  .lateral{position:fixed;left:0;top:0;z-index:20;transform:translateX(-100%);transition:transform .2s}
  body.menu-aberto .lateral{transform:none;box-shadow:4px 0 20px rgba(0,0,0,.25)}
  .topo .menu-movel{display:block}
  .topo .empresa{display:none}
  .rodape span+span{display:none}
  main{padding:12px 12px 70px}
  .pagina{padding:14px}
  .busca input{width:100%}
  .busca{flex:1}
  .entrada .lados{grid-template-columns:1fr;padding:16px}
  .entrada .marca{padding:10px}
  .entrada .marca img{width:220px}
  .entrada .painel{border-radius:12px;border-right:1px solid var(--borda);padding:28px 22px}
}