/* ===== Portal do Cliente DinizSoft — CSS próprio, leve (sem frameworks) ===== */
:root{
  --azul:#0b5cab; --azul-esc:#08406e; --azul-claro:#e8f1fb;
  --verde:#16a34a; --vermelho:#dc2626; --amarelo:#d97706;
  --tinta:#1f2937; --cinza:#6b7280; --linha:#e5e7eb;
  --fundo:#f4f6fa; --branco:#fff; --raio:14px;
  --sombra:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.06);
  --sidebar:260px; --topo:64px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--tinta);background:var(--fundo);font-size:15px;line-height:1.55;
}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
svg{width:20px;height:20px;display:block}

/* ---------- Topbar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--topo);z-index:30;
  display:flex;align-items:center;gap:16px;padding:0 20px;
  background:var(--branco);border-bottom:1px solid var(--linha);box-shadow:var(--sombra);
}
.brand img{height:38px;display:block}
.topbar-user{margin-left:auto;text-align:right;line-height:1.2}
.tu-nome{font-weight:600}
.tu-cnpj{font-size:12px;color:var(--cinza)}
.burger{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:6px}
.burger span{width:22px;height:2px;background:var(--tinta);border-radius:2px}

/* ---------- Sidebar ---------- */
.sidebar{
  position:fixed;top:var(--topo);left:0;bottom:0;width:var(--sidebar);z-index:20;
  background:var(--branco);border-right:1px solid var(--linha);
  display:flex;flex-direction:column;overflow-y:auto;
}
.sidebar nav ul{list-style:none;margin:0;padding:12px}
.sidebar nav li.sep{height:1px;background:var(--linha);margin:10px 6px}
.sidebar nav a{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;
  color:var(--tinta);font-weight:500;margin-bottom:2px;
}
.sidebar nav a:hover{background:var(--azul-claro);text-decoration:none}
.sidebar nav a.ativo{background:var(--azul);color:#fff}
.sidebar nav a.ativo .ic{color:#fff}
.sidebar nav a .ic{color:var(--azul);display:flex}
.sidebar nav a.sair{color:var(--vermelho)}
.sidebar nav a.sair .ic{color:var(--vermelho)}
.sidebar-acesso{margin-top:auto;padding:12px 16px;border-top:1px solid var(--linha);
  font-size:11.5px;color:var(--cinza);line-height:1.6}
.sidebar-acesso .sa-titulo{font-weight:700;color:var(--azul);margin-bottom:2px}
.sidebar-acesso .sa-ip strong{color:var(--tinta)}
.sidebar-acesso .sa-momento{font-family:Consolas,Menlo,monospace}
/* grupos colapsáveis */
.sidebar nav li.grupo{margin-bottom:2px}
.sidebar nav details summary{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;
  color:var(--tinta);font-weight:600;cursor:pointer;list-style:none;user-select:none}
.sidebar nav details summary::-webkit-details-marker{display:none}
.sidebar nav details summary:hover{background:var(--azul-claro)}
.sidebar nav details summary .ic{color:var(--azul)}
.sidebar nav details summary .seta{margin-left:auto;transition:transform .2s;color:var(--cinza)}
.sidebar nav details[open] summary .seta{transform:rotate(90deg)}
.sidebar nav ul.sub{list-style:none;margin:2px 0 6px;padding:0 0 0 14px}
.sidebar nav ul.sub a{padding:9px 14px;font-weight:500;font-size:14px}
.sidebar nav ul.sub a .ic svg{width:17px;height:17px}
.side-contato{margin-top:auto;padding:16px;font-size:13px;border-top:1px solid var(--linha);color:var(--cinza)}
.side-contato strong{display:block;color:var(--tinta);margin-bottom:8px}
.side-contato a{display:flex;align-items:center;gap:8px;color:var(--cinza);margin:6px 0}
.backdrop{display:none}

/* ---------- Conteúdo ---------- */
.conteudo{margin-left:var(--sidebar);padding:calc(var(--topo) + 28px) 32px 40px}
.pagina-titulo{font-size:24px;font-weight:700;margin:0 0 22px}
.rodape{margin-left:var(--sidebar);padding:18px 32px;color:var(--cinza);font-size:13px;border-top:1px solid var(--linha)}

/* ---------- Cards ---------- */
.card{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);padding:22px;margin-bottom:22px}
.card h2,.card h3{margin-top:0}
.cli-id{display:flex;flex-direction:column;gap:2px;background:var(--azul-claro);border-radius:10px;padding:12px 16px;margin-bottom:18px;font-size:14px}
.cli-id strong{color:var(--azul-esc);font-size:15px}
.cli-id span{color:var(--cinza)}

/* ---------- Grade do painel (ações grandes) ---------- */
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.acao{
  display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--raio);
  background:var(--branco);border:1px solid var(--linha);box-shadow:var(--sombra);
  color:var(--tinta);transition:.15s;min-height:130px;
}
.acao:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(11,92,171,.15);text-decoration:none;border-color:var(--azul)}
.acao .ic{width:46px;height:46px;border-radius:12px;background:var(--azul-claro);color:var(--azul);display:flex;align-items:center;justify-content:center}
.acao .ic svg{width:24px;height:24px}
.acao b{font-size:16px}
.acao small{color:var(--cinza)}

/* ---------- Cards de resumo ---------- */
.resumo{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;margin-bottom:24px}
.metrica{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);padding:18px 20px}
.metrica .rotulo{font-size:13px;color:var(--cinza)}
.metrica .valor{font-size:26px;font-weight:700;margin-top:4px}
.metrica.alerta .valor{color:var(--vermelho)}
.metrica.ok .valor{color:var(--verde)}

/* ---------- Tabela / parcelas ---------- */
.tabela-wrap{overflow-x:auto}
table.parcelas{width:100%;border-collapse:collapse;font-size:14px}
table.parcelas th,table.parcelas td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--linha)}
table.parcelas th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--cinza)}
table.parcelas tr:hover td{background:#fafbfc}
.tag{display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}
.tag.venc{background:#fde8e8;color:var(--vermelho)}
.tag.hoje{background:#fef3c7;color:var(--amarelo)}
.tag.aberto{background:#e6f4ea;color:var(--verde)}
.valor-celula{font-weight:600;white-space:nowrap}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;border:0;
  font-weight:600;font-size:14px;cursor:pointer;background:var(--azul);color:#fff;transition:.15s}
.btn:hover{background:var(--azul-esc);text-decoration:none}
.btn.lg{padding:14px 26px;font-size:15px}
.btn.sm{padding:8px 16px;font-size:13px}
.btn.verde{background:var(--verde)}.btn.verde:hover{background:#0f7a37}
.btn.outline{background:transparent;border:1.5px solid var(--azul);color:var(--azul)}
.btn.outline:hover{background:var(--azul-claro)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- Alertas ---------- */
.alerta-box{padding:14px 18px;border-radius:10px;margin-bottom:18px;font-size:14px}
.alerta-box.sucesso{background:#e6f4ea;color:#0f7a37;border:1px solid #b7e4c7}
.alerta-box.erro{background:#fde8e8;color:#b42318;border:1px solid #f5c2c2}
.alerta-box.info{background:var(--azul-claro);color:var(--azul-esc);border:1px solid #cfe2f6}

/* ---------- Formulários ---------- */
.campo{margin-bottom:16px}
.campo label{display:block;font-weight:600;margin-bottom:6px;font-size:14px}
.campo input,.campo select,.campo textarea{
  width:100%;padding:11px 13px;border:1px solid var(--linha);border-radius:10px;font-size:15px;background:#fff}
.campo input:focus,.campo select:focus{outline:0;border-color:var(--azul);box-shadow:0 0 0 3px rgba(11,92,171,.15)}
.check{display:flex;align-items:flex-start;gap:10px;margin:14px 0}
.check input{margin-top:3px}

/* ---------- PDF embed ---------- */
.pdf-frame{width:100%;height:78vh;border:1px solid var(--linha);border-radius:10px}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(135deg,var(--azul) 0%,var(--azul-esc) 100%)}
.login-card{background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.25);
  width:100%;max-width:410px;padding:36px 32px}
.login-card .logo{text-align:center;margin-bottom:8px}
.login-card .logo img{height:54px}
.login-card h1{font-size:20px;text-align:center;margin:6px 0 4px}
.login-card .sub{text-align:center;color:var(--cinza);font-size:14px;margin-bottom:22px}
.login-card .rodape-login{text-align:center;font-size:12px;color:var(--cinza);margin-top:18px}
.login-card .rodape-ssl{margin-top:6px;font-size:11px;color:#2e7d32;font-weight:600;letter-spacing:.3px}
.login-card .aviso-acesso{display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;
  background:#e3f0fc;border:1px solid var(--linha);border-radius:10px;padding:9px 10px;margin-bottom:18px;
  text-align:center;font-size:12px;color:var(--azul)}
.login-card .aviso-acesso strong{color:var(--azul)}
.login-card .aviso-seguranca{display:flex;flex-direction:column;gap:4px;text-align:center;margin-top:16px;
  background:#fdecea;border:1px solid #f5c2bd;border-radius:10px;padding:12px 14px;
  font-size:12px;color:#a4292c;line-height:1.45}
.login-card .aviso-seguranca strong{font-size:12.5px;color:#a4292c}
.login-card .rodape-dados{margin-top:4px;font-size:12px;font-weight:700;color:var(--tinta)}

/* ---------- Captcha DinizSoft ---------- */
.ds-captcha{display:flex;align-items:center;gap:10px;margin-bottom:8px}
#ds-captcha-canvas{border:1px solid var(--linha);border-radius:10px;background:#eef4fb;user-select:none}
.ds-captcha-refresh{width:42px;height:42px;border:1px solid var(--linha);border-radius:10px;background:#fff;
  color:var(--azul);font-size:20px;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center}
.ds-captcha-refresh:hover{background:var(--azul-claro)}
.ds-captcha-status{display:inline-block;font-size:13px;font-weight:600;margin-top:4px;min-height:18px}
.ds-captcha-status.ok{color:var(--verde)}
.ds-captcha-status.erro{color:var(--vermelho)}
#ds-captcha-input{text-transform:uppercase;letter-spacing:.18em;font-weight:600}

/* ---------- Banner de cookies (1x por dia) ---------- */
.cookie-banner{position:fixed;z-index:60;left:50%;transform:translateX(-50%);bottom:18px;
  width:min(680px,calc(100% - 36px));display:flex;align-items:center;gap:14px;
  background:var(--branco);border:1px solid var(--linha);border-radius:14px;
  box-shadow:0 8px 30px rgba(16,24,40,.18);padding:14px 16px}
.cookie-banner[hidden]{display:none}
.cookie-banner .cookie-texto{flex:1;font-size:13px;color:var(--tinta);line-height:1.45}
.cookie-banner .btn{flex:none;white-space:nowrap}

/* ---------- Responsivo ---------- */
@media (max-width:860px){
  .burger{display:flex}
  .sidebar{transform:translateX(-100%);transition:transform .22s ease}
  #menu-toggle:checked ~ .sidebar{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.25)}
  #menu-toggle:checked ~ .backdrop{display:block;position:fixed;inset:var(--topo) 0 0 0;background:rgba(0,0,0,.35);z-index:15}
  .conteudo,.rodape{margin-left:0}
  .conteudo{padding:calc(var(--topo) + 20px) 18px 32px}
  .topbar-user{display:none}
  .cookie-banner{left:12px;right:12px;bottom:12px;width:auto;transform:none;
    flex-direction:column;align-items:stretch;text-align:center}
}