/* app.css - Modulo Coparentalidade, identidade Guard Angel (azul-marinho + turquesa) */
:root{
  --bg:#F3F7FA; --surface:#FFFFFF; --fg:#0B2440; --muted:#4A6177; --line:#D6E2EB;
  --brand:#0E4677; --brand-fg:#FFFFFF; --aqua:#1F9EA6; --aqua-soft:#4FC3C7; --aqua-tint:#E3F5F5;
  --ok:#2E7D5B; --ok-bg:#E3F3EA; --erro:#B3412F; --erro-bg:#FBE9E5; --aviso:#8A5A00; --aviso-bg:#FFF3DA;
  --f-display:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-body:"Figtree","Segoe UI",system-ui,sans-serif;
  --r:16px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#05162A; --surface:#0B2340; --fg:#E4EEF5; --muted:#9BB2C5; --line:#1B3B5C;
    --brand:#8CC0EE; --brand-fg:#05162A; --aqua:#5CD0D4; --aqua-tint:#0E3346;
    --ok:#7FD3A6; --ok-bg:#12352A; --erro:#F2A08F; --erro-bg:#3A1A15; --aviso:#F3C66B; --aviso-bg:#3A2C0C;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#05162A; --surface:#0B2340; --fg:#E4EEF5; --muted:#9BB2C5; --line:#1B3B5C;
  --brand:#8CC0EE; --brand-fg:#05162A; --aqua:#5CD0D4; --aqua-tint:#0E3346;
  --ok:#7FD3A6; --ok-bg:#12352A; --erro:#F2A08F; --erro-bg:#3A1A15; --aviso:#F3C66B; --aviso-bg:#3A2C0C;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.55;
  padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
body.sem-menu{padding-bottom:24px}
a{color:var(--brand)}
h1,h2,h3{font-family:var(--f-display);line-height:1.15;margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--aqua-soft);outline-offset:2px;border-radius:6px}

.faixa-dev{background:#E8B04B;color:#2A1A00;font:600 12px var(--f-body);text-align:center;padding:4px 12px}
.barra-topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;background:#0B2F52;color:#EAF4F8}
.marca{display:flex;align-items:center;gap:8px;color:#EAF4F8;text-decoration:none;font:600 18px var(--f-display)}
.marca b{color:var(--aqua-soft);font-weight:600}
.espaco-nome{font-size:13px;color:#A9C3D6;max-width:50%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.conteudo{max-width:640px;margin:0 auto;padding:20px 16px;display:flex;flex-direction:column;gap:16px}
.titulo{display:flex;flex-direction:column;gap:4px}
.titulo h1{font-size:26px;font-weight:600}
.titulo p{color:var(--muted)}
.rotulo{font:600 11.5px var(--f-body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

.cartao{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.cartao h2{font-size:18px;font-weight:600}
.cartao.destaque{border-color:var(--aqua-soft);background:linear-gradient(180deg,var(--aqua-tint),var(--surface))}
.linha{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mudo{color:var(--muted);font-size:14.5px}
.pilula{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--f-body);padding:4px 10px;border-radius:999px;background:var(--aqua-tint);color:var(--brand);white-space:nowrap}
.pilula.ok{background:var(--ok-bg);color:var(--ok)}
.pilula.espera{background:var(--aviso-bg);color:var(--aviso)}
.pilula.neutra{background:var(--bg);color:var(--muted);border:1px solid var(--line)}

.lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lista li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.lista li:last-child{border-bottom:0}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--brand);color:var(--brand-fg);font:600 15px var(--f-display)}
.pessoa{display:flex;align-items:center;gap:10px;min-width:0}
.pessoa div{min-width:0}
.pessoa b{display:block;font-weight:600}
.pessoa small{color:var(--muted);font-size:13px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;
  font:600 16px var(--f-display);padding:13px 20px;border-radius:999px;background:var(--brand);color:var(--brand-fg);width:100%}
.btn:active{transform:scale(.99)}
.btn.sec{background:transparent;color:var(--brand);border:1.5px solid var(--brand)}
.btn.aqua{background:var(--aqua-soft);color:#04213A}
.btn.peq{width:auto;padding:8px 14px;font-size:14px}
.btn-link{background:none;border:0;color:var(--brand);font:600 14.5px var(--f-body);cursor:pointer;padding:6px 0;text-decoration:underline}

.form{display:flex;flex-direction:column;gap:14px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo span{font-size:14px;color:var(--muted);font-weight:500}
.campo input,.campo select,.campo textarea{font:inherit;font-size:16px;color:var(--fg);background:var(--surface);
  border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;width:100%}
.campo input:focus,.campo select:focus{border-color:var(--aqua);outline:none}
.grade2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.filho-linha{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.opcoes-papel{display:flex;gap:8px;flex-wrap:wrap}
.opcoes-papel label{flex:1;min-width:90px}
.opcoes-papel input{position:absolute;opacity:0;pointer-events:none}
.opcoes-papel span{display:block;text-align:center;padding:10px;border:1.5px solid var(--line);border-radius:12px;font-weight:600;cursor:pointer;background:var(--surface)}
.opcoes-papel input:checked + span{border-color:var(--brand);background:var(--aqua-tint);color:var(--brand)}
.opcoes-papel input:focus-visible + span{outline:3px solid var(--aqua-soft)}

.aviso{border-radius:12px;padding:12px 14px;font-size:14.5px}
.aviso-ok{background:var(--ok-bg);color:var(--ok)}
.aviso-erro{background:var(--erro-bg);color:var(--erro)}
.aviso-info{background:var(--aqua-tint);color:var(--brand)}

.copiar{display:flex;gap:8px;align-items:stretch}
.copiar input{flex:1;min-width:0;font:500 14px ui-monospace,Consolas,monospace;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);color:var(--fg)}
.codigo-input{font:600 20px ui-monospace,Consolas,monospace !important;letter-spacing:.12em;text-transform:uppercase;text-align:center}

.modulos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modulo{border:1px dashed var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:13.5px}
.modulo b{color:var(--fg);font:600 15px var(--f-display)}

.menu{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:space-around;
  background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
.menu a,.menu .breve{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;text-decoration:none;
  color:var(--muted);font:500 11.5px var(--f-body);border-radius:10px}
.menu svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu a.ativo{color:var(--brand)}
.menu a.ativo svg{stroke-width:2.2}
.menu .breve{opacity:.42}

/* telas sem login (entrar, convite) */
.tela-cheia{min-height:70vh;display:flex;flex-direction:column;justify-content:center;gap:18px}
.selo-cortesia{display:flex;gap:12px;align-items:center}
.selo-cortesia .sel{width:46px;height:46px;border-radius:14px;background:var(--brand);color:#EAF4F8;display:grid;place-items:center;flex:none}

/* painel F&S */
.painel{max-width:1000px}
.tabela-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font:600 12px var(--f-body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;background:var(--bg)}
tr:last-child td{border-bottom:0}
.mono{font-family:ui-monospace,Consolas,monospace}
.numeros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.numero{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.numero b{display:block;font:600 28px var(--f-display);font-variant-numeric:tabular-nums}
.numero span{color:var(--muted);font-size:13px}
.filtros{display:flex;flex-wrap:wrap;gap:6px}
.filtros a{font-size:13px;text-decoration:none;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 11px;background:var(--surface)}
.filtros a.ativo{border-color:var(--brand);color:var(--brand);font-weight:600}
@media (max-width:640px){ .numeros{grid-template-columns:1fr 1fr} .grade2{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ===== Fase 2 ===== */
.menu a{position:relative}
.badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#D9534F;color:#fff;
  font:700 11px/18px var(--f-body);text-align:center}
:root{--casa-a:#4FC3C7;--casa-a-fg:#04213A;--casa-b:#2F6FB0;--casa-b-fg:#FFFFFF}
.casa-a{background:var(--casa-a);color:var(--casa-a-fg)}
.casa-b{background:var(--casa-b);color:var(--casa-b-fg)}
.sem-casa{background:var(--bg);color:var(--muted);border:1px dashed var(--line)}
.ponto{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:middle;margin-right:6px}

/* calendario */
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cal-nav h2{font-size:20px;text-transform:capitalize}
.cal-nav a{text-decoration:none;font:600 22px var(--f-display);padding:4px 12px;border-radius:10px;color:var(--brand)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;font-variant-numeric:tabular-nums}
.cal .sem{text-align:center;font:600 11px var(--f-body);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding-bottom:2px}
.cal a.dia{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1/1.05;border-radius:10px;
  text-decoration:none;font:600 15px var(--f-display)}
.cal a.dia.fora{opacity:.35}
.cal a.dia.hoje{outline:2.5px solid var(--fg);outline-offset:1px}
.cal .marcas{position:absolute;bottom:4px;display:flex;gap:3px}
.cal .marcas i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.85}
.cal .marcas i.fer{background:#E8B04B;opacity:1}
.cal .marcas i.trc{background:#D9534F;opacity:1}
.legenda{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted)}

/* conversa */
.topicos{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.topicos a{flex:none;font-size:13.5px;text-decoration:none;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 12px;background:var(--surface)}
.topicos a.ativo{border-color:var(--brand);color:var(--brand);font-weight:600}
.integridade{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ok)}
.integridade.ruim{color:var(--erro)}
.msgs{display:flex;flex-direction:column;gap:10px}
.msg{max-width:86%;align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:10px 12px;
  display:flex;flex-direction:column;gap:4px;min-width:0}
.msg.minha{align-self:flex-end;background:var(--aqua-tint);border-color:color-mix(in srgb,var(--aqua-soft) 50%,var(--line));border-radius:16px 16px 4px 16px}
.msg .meta{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--muted)}
.msg .txt{white-space:pre-wrap;overflow-wrap:anywhere}
.msg .lida{font-size:11.5px;color:var(--muted);text-align:right}
.msg.sistema{align-self:center;max-width:94%;background:var(--bg);border-style:dashed;border-radius:12px;font-size:14px}
.msg .anx{display:flex;flex-wrap:wrap;gap:6px}
.msg .anx a{font-size:13px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:4px 8px;text-decoration:none;color:var(--brand)}
.msg .anx img{max-width:180px;max-height:180px;border-radius:10px;display:block}
.compor{position:sticky;bottom:calc(70px + env(safe-area-inset-bottom,0px));background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:10px;
  display:flex;flex-direction:column;gap:8px;box-shadow:0 -8px 24px -18px rgba(11,36,64,.35)}
.compor textarea{font:inherit;font-size:16px;border:0;resize:none;background:transparent;color:var(--fg);min-height:44px;max-height:160px;outline:none}
.compor .barra{display:flex;align-items:center;gap:8px}
.compor select{font:inherit;font-size:13.5px;border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:var(--bg);color:var(--fg)}
.compor label.anexar{font-size:13.5px;color:var(--brand);cursor:pointer;font-weight:600}
.compor input[type=file]{position:absolute;opacity:0;width:1px;height:1px}
.compor .enviar{margin-left:auto}
.aviso-imutavel{font-size:12px;color:var(--muted);text-align:center}

/* ===== Fase 3 ===== */
.pilula.atraso{background:var(--erro-bg);color:var(--erro)}
.valor{font:600 30px var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.valor.peq{font-size:20px}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.alerta-atraso{border-color:var(--erro);background:linear-gradient(180deg,var(--erro-bg),var(--surface))}
.parcela{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-bottom:1px solid var(--line)}
.parcela:last-child{border-bottom:0}
.parcela .topo-p{display:flex;justify-content:space-between;align-items:center;gap:10px}
.parcela .pags{font-size:13.5px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.comp a{font-size:13px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:3px 8px;text-decoration:none;color:var(--brand)}
.resumo-ano td:last-child,.resumo-ano th:last-child{text-align:right}

/* ===== Fase 4 ===== */
.hub{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hub a{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-decoration:none;color:var(--fg);position:relative;min-width:0}
.hub a:hover{border-color:var(--aqua-soft)}
.hub a b{font:600 16px var(--f-display)}
.hub a span{color:var(--muted);font-size:13.5px}
.hub a .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--aqua-tint);color:var(--brand)}
.hub a .ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hub a .badge{left:auto;right:10px;top:10px}
.abas{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.abas a{flex:none;font-size:13.5px;text-decoration:none;color:var(--muted);border-bottom:2.5px solid transparent;padding:8px 10px}
.abas a.ativo{color:var(--brand);border-color:var(--brand);font-weight:600}
.campo-val{white-space:pre-wrap;overflow-wrap:anywhere}
.vazio{color:var(--muted);font-style:italic}
.dl{display:flex;flex-direction:column;gap:12px}
.dl div{display:flex;flex-direction:column;gap:2px}
.dl dt{font-size:12.5px;color:var(--muted);font-weight:600}
.dl dd{margin:0}
.privado{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--f-body);color:var(--aqua);background:var(--aqua-tint);border-radius:999px;padding:4px 10px}
.combinado-txt{white-space:pre-wrap;font-size:15.5px}
.campo textarea{min-height:84px;resize:vertical}

/* ===== Fase 6: avisos ===== */
.sino{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#EAF4F8;flex:none}
.sino svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sino .badge{top:0;left:auto;right:-4px}