/* O painel do login único. As cores vêm dos tokens do tema da moldura (:root --iagu-*, em /_moldura.css), com o valor
   de antes como reserva; 23/10 (dono: "um toque mais profissional"): tipografia, espaçamento e cartões num padrão só. */
:root { --fundo:var(--iagu-fundo, #f5f7fa); --cartao:var(--iagu-superficie, #fff); --texto:var(--iagu-texto, #111827); --suave:var(--iagu-suave, #5b6474);
        --borda:var(--iagu-linha, #e6eaf0); --borda-forte:var(--iagu-borda, #d6dce5); --realce:var(--iagu-realce, #eef2f7);
        --marca:var(--iagu-primaria, #0e3151); --marca-texto:#ffffff; --destaque:var(--iagu-destaque, #1d5fbf); --acento:var(--iagu-acento, #0e3151);
        --ok:var(--iagu-ok, #15803d); --ok-fundo:var(--iagu-ok-fundo, #e8f5ec); --erro:var(--iagu-erro, #b91c1c); --erro-fundo:var(--iagu-erro-fundo, #fdeceb);
        --sombra:var(--iagu-sombra, 0 1px 2px rgba(16,24,40,.05)); --sombra-alta:var(--iagu-sombra-alta, 0 8px 24px rgba(16,24,40,.08)); }
/* o claro e o escuro (e a cor) vêm dos tokens da moldura, que seguem o tema da pessoa (data-theme, data-cor) */
* { box-sizing:border-box; }
body { margin:0; font-family:var(--iagu-fonte, "Segoe UI", system-ui, sans-serif); font-size:14px; line-height:1.5; background:var(--fundo); color:var(--texto);
       -webkit-font-smoothing:antialiased; }
header { background:var(--marca); color:var(--marca-texto); padding:12px 20px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
header img { height:30px; } header b { font-size:1.05rem; }
header nav { margin-left:auto; display:flex; gap:14px; align-items:center; }
header a, header button.link { color:var(--marca-texto); text-decoration:none; opacity:.92; background:none; border:0; font:inherit; cursor:pointer; padding:0; margin:0; }
main { max-width:1120px; margin:0 auto; padding:28px 20px 64px; }
main.estreito { max-width:440px; padding-top:48px; }
h1 { font-size:1.375rem; font-weight:600; letter-spacing:-.01em; margin:4px 0 16px; }
h2 { font-size:1rem; font-weight:600; margin:4px 0 10px; }
.titulo { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:28px 0 14px; }
.titulo h1 { margin:0; }
main > .titulo:first-child { margin-top:4px; }
.caixa { background:var(--cartao); border:1px solid var(--borda); border-radius:10px; padding:20px; margin-bottom:16px; box-shadow:var(--sombra); }
.aviso { background:var(--ok-fundo); color:var(--ok); padding:10px 14px; border-radius:8px; margin-bottom:14px; }
.erro { background:var(--erro-fundo); color:var(--erro); padding:10px 14px; border-radius:8px; margin-bottom:14px; }
label { display:block; font-weight:600; font-size:.875rem; margin:16px 0 6px; }
input { width:100%; height:40px; padding:0 12px; border:1px solid var(--borda-forte); border-radius:8px; font:inherit; background:var(--cartao); color:var(--texto);
        transition:border-color .12s, box-shadow .12s; }
input:focus, select:focus { outline:0; border-color:var(--marca); box-shadow:0 0 0 3px var(--realce); }
input[type=checkbox], input[type=radio], input[type=file] { height:auto; padding:0; }
input.codigo { height:auto; padding:10px 11px; font-size:1.4rem; letter-spacing:.3em; text-align:center; max-width:220px; }
.dica { color:var(--suave); font-size:.84rem; margin-top:6px; }
button { border:0; border-radius:8px; height:38px; padding:0 18px; font:inherit; font-weight:600; cursor:pointer; background:var(--marca); color:var(--marca-texto); margin-top:18px;
         transition:filter .12s; }
button:hover { filter:brightness(1.12); }
button:focus-visible, a:focus-visible { outline:2px solid var(--destaque); outline-offset:2px; }
button.largo { width:100%; margin-top:22px; }
kbd { font:600 11px/1 var(--iagu-fonte, sans-serif); padding:3px 6px; border:1px solid var(--borda-forte); border-bottom-width:2px; border-radius:5px; background:var(--cartao); color:var(--suave); }
.oculto { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* os módulos em cartões: ícone, nome, uma linha do que faz, o nível, as pendências do dia e o atalho do mês. O cartão
   inteiro abre o módulo (o link do nome cobre o cartão); as pendências e o mês são links próprios por cima. */
.cartoes { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
article.cartao { position:relative; display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:start; color:var(--texto); background:var(--cartao);
                 border:1px solid var(--borda); border-radius:10px; padding:16px; box-shadow:var(--sombra); transition:border-color .12s, box-shadow .12s, transform .12s; }
article.cartao:hover { border-color:var(--borda-forte); box-shadow:var(--sombra-alta); transform:translateY(-1px); }
article.cartao.com-atraso { border-left:3px solid var(--erro); padding-left:14px; }
.cartao-ico { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:var(--realce); color:var(--acento); }
.cartao-txt { min-width:0; display:flex; flex-direction:column; min-height:100%; }
main a.cartao-abrir { color:var(--texto); font-size:.95rem; font-weight:600; margin:1px 0 3px; text-decoration:none; }
a.cartao-abrir::after { content:""; position:absolute; inset:0; border-radius:10px; }
a.cartao-abrir:focus-visible { outline:0; }
a.cartao-abrir:focus-visible::after { outline:2px solid var(--destaque); outline-offset:2px; }
.cartao-desc { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--suave); font-size:.84rem; line-height:1.4; }
.cartao-pe { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:auto; padding-top:10px; font-size:.8rem; }
.cartao-pe a { position:relative; z-index:1; text-decoration:none; font-weight:600; }
.cartao-pe a:hover { text-decoration:underline; }
.cartao-pe .pend { padding:2px 8px; border-radius:20px; background:var(--iagu-atencao-fundo, #fdf3e1); color:var(--iagu-atencao, #b45309); }
.cartao-pe .pend.ruim { background:var(--erro-fundo); color:var(--erro); }
.cartao-pe .mes { margin-left:auto; color:var(--destaque); }
.nivel { display:inline-block; font-size:.72rem; font-weight:600; padding:2px 8px; border-radius:20px; background:var(--fundo); color:var(--suave); border:1px solid var(--borda); font-style:normal; }
.legenda { margin-top:14px; }
.qr { width:220px; height:220px; background:#fff; padding:6px; border-radius:8px; }
code { font-size:.95rem; word-break:break-all; }
table { width:100%; border-collapse:collapse; font-size:.875rem; } th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--borda); vertical-align:top; }
th { color:var(--suave); font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; }
tbody tr:hover td { background:var(--fundo); }
td form { display:inline; } td button { margin:0 6px 0 0; height:30px; padding:0 10px; font-size:.8rem; }
.rolar { overflow-x:auto; }
header form { display:inline; margin:0; }
.duas { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; }
select { height:40px; padding:0 10px; border:1px solid var(--borda-forte); border-radius:8px; font:inherit; background:var(--cartao); color:var(--texto); }
label.marca { display:flex; gap:8px; align-items:center; font-weight:400; }
label.marca input { width:auto; }
button.perigo { background:var(--erro); }
main a { color:var(--destaque); text-decoration:none; }
main a:hover { text-decoration:underline; }
.blocos { display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:16px; align-items:start; }
.blocos .caixa { margin-bottom:0; }
td.n { text-align:right; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.blocos td:first-child { width:46%; }
tr.ruim td { color:var(--erro); font-weight:600; }
ul.alertas, ol.passos { margin:8px 0 0; padding-left:20px; }
ol.passos li { margin-bottom:6px; color:var(--texto); }
.caixa + .blocos, .blocos + .caixa { margin-top:16px; }
/* o quadro de avisos compacto (dono, 22/10: "tres quadrados um ao lado do outro, para que os modulos consiga aparecer abaixo") */
.quadro { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-bottom:8px; }
@media (max-width:760px) { .quadro { grid-template-columns:minmax(0, 1fr); } main { padding:20px 14px 48px; } .cartoes { grid-template-columns:minmax(0, 1fr); } .titulo .dica { display:none; } }
.quadro .mini { padding:14px 16px; margin-bottom:0; max-height:176px; overflow:hidden; }
.quadro .mini h2 { font-size:.75rem; margin:0 0 8px; display:flex; justify-content:space-between; align-items:center; color:var(--suave); text-transform:uppercase; letter-spacing:.05em; }
.quadro .num { font-size:1.25rem; font-weight:700; color:var(--texto); letter-spacing:0; font-variant-numeric:tabular-nums; }
.quadro .num.ruim, .quadro li.ruim a { color:var(--erro); }
.quadro ul { list-style:none; margin:0; padding:0; font-size:.875rem; }
.quadro li { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:3px 0; }
.quadro li a { color:var(--texto); font-weight:500; }
.quadro li.ruim a::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--erro); margin:0 7px 2px 0; }
.quadro .vazio { max-height:none; }
.quadro .vazio p { margin:0; color:var(--suave); font-size:.85rem; }
.quadro + .dica, .quadro ~ .erro + .dica { margin:10px 0 0; }
.previa-marca { max-height:40px; background:#fff; border:1px solid #e3e8ef; padding:6px 10px; border-radius:6px; }
/* a busca sem script (/buscar) */
form.busca { display:flex; gap:8px; margin-bottom:16px; }
form.busca input { flex:1; height:44px; font-size:1rem; }
form.busca button { margin:0; height:44px; }
ul.achados { list-style:none; margin:0; padding:6px; background:var(--cartao); border:1px solid var(--borda); border-radius:10px; box-shadow:var(--sombra); }
ul.achados a { display:flex; gap:12px; align-items:center; padding:10px 12px; border-radius:8px; color:var(--texto); text-decoration:none; }
ul.achados a:hover { background:var(--realce); }
ul.achados b { display:block; font-weight:600; }
ul.achados small { color:var(--suave); font-size:.82rem; }
.achado-ico { width:34px; height:34px; border-radius:8px; display:grid; place-items:center; background:var(--realce); color:var(--acento); flex:none; }
.vazia { color:var(--suave); }
/* a porta de entrada (entrar, criar a senha, código; dono 24/10: "a primeira impressão do cliente"): sem as barras, a
   marca do endereço no alto, o cartão no meio e um fundo com o tom do tema */
body.acesso { min-height:100vh; display:flex; flex-direction:column; align-items:center;
              background:linear-gradient(180deg, var(--realce) 0, var(--fundo) 360px); }
.acesso-marca { display:flex; align-items:center; justify-content:center; gap:14px; padding:56px 16px 4px; }
.acesso-marca img { height:34px; width:auto; max-width:220px; display:block; }
.acesso-sep { width:1px; height:30px; background:var(--borda-forte); }
body.acesso main.estreito { width:100%; padding-top:24px; padding-bottom:24px; }
.acesso-rodape { margin:auto 0 0; padding:24px 16px 28px; color:var(--suave); font-size:.8rem; text-align:center; }
.entrar { padding:30px 30px 26px; box-shadow:var(--sombra-alta); }
.entrar h1 { margin:0 0 4px; font-size:1.5rem; }
.entrar .sub { margin:0 0 8px; color:var(--suave); }
.entrar label.lembrar { margin:16px 0 0; font-size:.9rem; cursor:pointer; }
.entrar .lembrar-dica { margin:2px 0 0 26px; }
.entrar .lembrar-dica + .largo { margin-top:16px; }
.aparelho-este { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; background:var(--ok-fundo); color:var(--ok); font-size:.75rem; font-weight:600; }
.entrar .esqueceu { margin:18px 0 0; padding-top:16px; border-top:1px solid var(--borda); color:var(--suave); font-size:.84rem; text-align:center; }
main.estreito > .dica { padding:0 6px; line-height:1.5; text-align:center; }
@media (max-width:520px) { .acesso-marca { padding-top:36px; } .entrar { padding:24px 20px 20px; } }
/* as pessoas em lista densa */
.caixa.lista { padding:0; overflow:hidden; }
.caixa.lista .tabela-fixa { max-height:none; }
.filtro-lista { display:flex; gap:12px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--borda); }
.filtro-lista > div:first-child { flex:1; min-width:200px; }
.filtro-lista input { height:36px; }
table.densa th, table.densa td { padding:9px 12px; vertical-align:middle; }
table.densa th { background:var(--cartao); }
table.densa tr:last-child td { border-bottom:0; }
.pessoa { display:flex; align-items:center; gap:10px; min-width:220px; }
.pessoa > span:last-child { display:flex; flex-direction:column; min-width:0; }
.pessoa small { color:var(--suave); font-size:.8rem; overflow:hidden; text-overflow:ellipsis; }
.pessoa a { font-weight:600; color:var(--texto); }
.avatar { flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:.78rem; font-weight:700;
          background:var(--realce); color:var(--acento); border:1px solid var(--borda); }
td.mods { max-width:420px; }
.mod { display:inline-block; margin:2px 4px 2px 0; padding:1px 7px; border-radius:5px; font-size:.75rem; font-weight:600; white-space:nowrap;
       border:1px solid var(--borda); background:var(--cartao); color:var(--suave); }
.mod.n-operar { background:var(--realce); color:var(--texto); }
.mod.n-enviar { background:var(--marca); border-color:var(--marca); color:var(--marca-texto); }
.suave { color:var(--suave); }
.acao-col { text-align:right; white-space:nowrap; width:1%; }
button.pequeno { margin:0; height:30px; padding:0 10px; font-size:.8rem; font-weight:600; background:var(--cartao); color:var(--texto); border:1px solid var(--borda-forte); }
button.pequeno:hover { background:var(--realce); filter:none; }
/* no celular, cada pessoa vira um cartão (sem rolar de lado) */
@media (max-width:760px) {
  table.densa thead { display:none; }
  table.densa, table.densa tbody, table.densa tr, table.densa td { display:block; width:auto; }
  table.densa tr { padding:12px 14px; border-bottom:1px solid var(--borda); }
  table.densa td { border:0; padding:3px 0; background:none !important; text-align:left; }
  table.densa td[data-r] { display:inline-block; margin-right:14px; color:var(--suave); font-size:.82rem; }
  table.densa td[data-r]::before { content:attr(data-r) ": "; }
  table.densa td.acao-col { margin-top:6px; }
  .pessoa { min-width:0; }
}
/* as ações lado a lado (Testar conexão, Apagar) */
.acoes { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .acoes form { margin:0; } .acoes button { margin-top:0; }
/* a Ajuda: os manuais (nucleo/ajuda), com o índice ao lado e as imagens */
.trilha { margin:0 0 10px; font-size:.84rem; color:var(--suave); }
.secao-titulo, .titulo h2 { margin:0; }
ul.achados .trecho { display:block; margin-top:3px; color:var(--suave); font-size:.82rem; line-height:1.45; }
main.manual-pagina { max-width:1180px; }
.manual { display:grid; grid-template-columns:250px minmax(0, 1fr); gap:28px; align-items:start; }
.manual-indice { position:sticky; top:68px; max-height:calc(100vh - 90px); overflow:auto; font-size:.84rem; padding-right:6px; }
.manual-indice input { height:36px; margin-bottom:14px; }
.manual-indice-tit { margin:0 0 6px; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--suave); }
.manual-indice nav a, .manual-indice-celular nav a { display:block; padding:4px 8px; border-left:2px solid var(--borda); color:var(--suave); text-decoration:none; line-height:1.35; }
.manual-indice nav a:hover, .manual-indice-celular nav a:hover { color:var(--texto); border-left-color:var(--marca); text-decoration:none; }
.manual-indice nav a.n3, .manual-indice-celular nav a.n3 { padding-left:20px; font-size:.8rem; }
.manual-indice-celular { display:none; }
.manual-corpo { background:var(--cartao); border:1px solid var(--borda); border-radius:10px; padding:28px 34px; box-shadow:var(--sombra); line-height:1.65; min-width:0; }
.manual-corpo h1 { font-size:1.6rem; margin:0 0 12px; }
.manual-corpo h2 { font-size:1.2rem; margin:30px 0 10px; padding-top:14px; border-top:1px solid var(--borda); }
.manual-corpo h3 { font-size:1.02rem; margin:22px 0 8px; }
.manual-corpo h4 { font-size:.92rem; margin:16px 0 6px; }
.manual-corpo h2, .manual-corpo h3, .manual-corpo h4 { scroll-margin-top:68px; }
.manual-corpo h2:target, .manual-corpo h3:target { color:var(--acento); }
.manual-corpo hr { border:0; border-top:1px solid var(--borda); margin:22px 0; }
.manual-corpo ul, .manual-corpo ol { padding-left:22px; }
.manual-corpo li { margin:4px 0; }
.manual-corpo figure { margin:14px 0; }
.manual-corpo img { max-width:100%; height:auto; border:1px solid var(--borda); border-radius:8px; display:block; }
.manual-corpo figcaption { font-size:.8rem; color:var(--suave); margin-top:6px; }
.manual-corpo blockquote { margin:14px 0; padding:10px 14px; border-left:3px solid var(--marca); background:var(--realce); border-radius:0 8px 8px 0; }
.manual-corpo blockquote p { margin:0; }
.manual-corpo code { font-size:.85em; padding:1px 5px; border-radius:4px; background:var(--realce); }
.manual-corpo pre { padding:12px; border-radius:8px; background:var(--realce); overflow:auto; }
.manual-corpo pre code { padding:0; background:none; }
.manual-corpo .tabela { overflow-x:auto; margin:12px 0; }
.manual-corpo table { font-size:.86rem; }
@media (max-width:860px) {
  .manual { display:block; }
  .manual-indice { display:none; }
  .manual-indice-celular { display:block; margin-bottom:12px; background:var(--cartao); border:1px solid var(--borda); border-radius:10px; padding:10px 12px; }
  .manual-indice-celular summary { font-weight:600; cursor:pointer; }
  .manual-indice-celular nav { margin-top:8px; }
  .manual-corpo { padding:18px 16px; }
}
.manual-corpo hr + h2 { border-top:0; padding-top:0; margin-top:6px; }
/* os produtos (porta única, etapa 4): "Seus produtos" depois de entrar, cartões grandes; o cartão inteiro abre o produto
   (com um módulo só, o próprio módulo). As cores são as do tema da pessoa, como os cartões dos módulos. */
.produtos { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
article.produto { position:relative; display:flex; flex-direction:column; gap:6px; min-height:168px; padding:20px; color:var(--texto); background:var(--cartao);
                  border:1px solid var(--borda); border-radius:14px; box-shadow:var(--sombra); transition:border-color .12s, box-shadow .12s, transform .12s; }
article.produto:hover { border-color:var(--borda-forte); box-shadow:var(--sombra-alta); transform:translateY(-1px); }
article.produto.com-atraso { border-left:3px solid var(--erro); padding-left:18px; }
.produto-ico { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--realce); color:var(--acento); flex:none; }
main a.produto-abrir { margin-top:6px; color:var(--texto); font-size:1.08rem; font-weight:650; text-decoration:none; }
a.produto-abrir::after { content:""; position:absolute; inset:0; border-radius:14px; }
a.produto-abrir:focus-visible { outline:0; }
a.produto-abrir:focus-visible::after { outline:2px solid var(--destaque); outline-offset:2px; }
.produto-mods { color:var(--suave); font-size:.86rem; }
article.produto .cartao-pe { margin-top:auto; }
.produto-ir { margin-left:auto; color:var(--destaque); font-weight:600; }
.produto-volta { margin:0 0 -16px; font-size:.86rem; }
.produto-volta a { text-decoration:none; }
/* a tela de entrar com o catálogo (opção B): o login à esquerda, todos os produtos à direita; no celular, o catálogo
   vem embaixo do login */
body.acesso.com-catalogo { display:grid; grid-template-columns:minmax(360px, 520px) 1fr; grid-template-rows:auto 1fr auto; align-items:start;
                           background:var(--cartao); }
body.com-catalogo > .acesso-marca { grid-column:1; grid-row:1; }
body.com-catalogo > main.estreito { grid-column:1; grid-row:2; max-width:440px; margin:0 auto; }
body.com-catalogo > .acesso-rodape { grid-column:1; grid-row:3; }
body.com-catalogo .entrar { box-shadow:none; border-color:transparent; padding-left:8px; padding-right:8px; }
.catalogo { grid-column:2; grid-row:1 / 4; align-self:stretch; min-height:100vh; padding:72px clamp(24px, 5vw, 72px) 48px;
            background:linear-gradient(160deg, var(--realce), var(--fundo)); border-left:1px solid var(--borda); }
.catalogo-sobre { margin:0 0 6px; color:var(--suave); font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.catalogo h2 { max-width:560px; margin:0 0 28px; font-size:1.65rem; font-weight:650; line-height:1.25; letter-spacing:-.01em; }
.catalogo ul { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; max-width:820px; margin:0; padding:0; list-style:none; }
.catalogo li { display:flex; gap:14px; align-items:center; padding:14px 16px; background:var(--cartao); border:1px solid var(--borda); border-radius:14px; }
.catalogo li b { display:block; font-size:.98rem; }
.catalogo li small { display:block; color:var(--suave); font-size:.84rem; line-height:1.35; }
.catalogo-pe { margin:28px 0 0; color:var(--suave); font-size:.86rem; }
@media (max-width:900px) {
  body.acesso.com-catalogo { display:flex; align-items:center; background:linear-gradient(180deg, var(--realce) 0, var(--fundo) 360px); }
  body.com-catalogo .entrar { box-shadow:var(--sombra-alta); border-color:var(--borda); padding:24px 20px 20px; }
  .catalogo { min-height:0; width:100%; padding:24px 16px 8px; background:none; border:0; }
  .catalogo h2 { font-size:1.2rem; margin-bottom:16px; }
  .catalogo ul { grid-template-columns:1fr; }
  body.com-catalogo > .acesso-rodape { order:3; }
}
.catalogo-pe a { color:var(--destaque); font-weight:600; }
@media (max-width:520px) { article.produto { min-height:0; padding:16px; } .produtos { gap:12px; } }