/* App nova (app/) — o que o sna.css não traz porque nasceu num canvas de 390×844.
   O sna.css fica tal e qual o pacote de design (sernaaldeia-design/sna.css no vault);
   tudo o que é preciso para correr num telemóvel a sério vem para aqui. */

:root{
  --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom);
  --sal:env(safe-area-inset-left); --sar:env(safe-area-inset-right);
}
html,body{margin:0; height:100%}
body.sna{background:#FFF4DF; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent}
body.sna.escuro{background:#16140F}
body.sna a{color:inherit}
/* A barra dos pais tem cores próprias (o 'inherit' acima não pode ganhar-lhes). */
body.sna .tabbar .tab{color:#FFF4DF; text-decoration:none}
body.sna .tabbar .tab.on{color:#1E1B16}
body.sna.escuro .tabbar .tab{color:#1E1B16}

/* O ecrã ocupa a janela inteira (no canvas era uma moldura fixa). Num ecrã largo
   fica uma coluna de telemóvel ao centro — o desenho é mobile. */
.screen{width:100%; max-width:560px; height:100vh; height:100dvh; margin:0 auto;
  padding-left:var(--sal,0px); padding-right:var(--sar,0px)}
button{font:inherit; cursor:pointer}
.btn{cursor:pointer}

/* Os blocos dentro de .body nunca encolhem: quem rola é o .body (um flex com altura fixa). */
.screen > .body > *{flex-shrink:0}
/* Pinta escura num chip escolhido (escuro) fica com aro claro para se ver. */
.chip.on .dot{border-color:var(--paper)}

/* Conteúdo que não está dentro de .body (ex.: o menu) também tem de rolar. */
.rola{flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:none}
.rola::-webkit-scrollbar{display:none}

/* Avatar com foto: a imagem tapa as iniciais; se não carregar, sai e ficam as iniciais. */
.av{overflow:hidden; position:relative}
.av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}

/* Ligações com aspeto de chip ou botão não levam sublinhado. */
a.chip, a.btn, a.card{text-decoration:none}
/* Um botão-etiqueta dentro de .field não herda o estilo das etiquetas de campo. */
.field label.btn{text-transform:none; letter-spacing:0; font-size:15px; color:#1E1B16}
.field label.btn.ghost{color:var(--ink)}

/* Avisos curtos dentro de uma página (gravado, erro). */
.nota{border:2.5px solid #1E1B16; border-radius:16px; padding:10px 14px; font-weight:700; font-size:14px; color:#1E1B16; background:var(--horta)}
.nota.erro{background:var(--late)}

/* Ficheiro escondido atrás de um botão (Tirar foto / Escolher). */
.ficheiro{position:relative; overflow:hidden}
.ficheiro input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer}

/* Pega do "ver como" (dev) — DevVer.dc.html. Fixa à esquerda, a meio do ecrã. */
.peg{position:fixed; left:0; top:calc(50% + 10px); width:14px; height:52px; border-radius:0 10px 10px 0;
  background:rgba(30,27,22,.28); border:0; padding:0; z-index:50}
.peg[aria-expanded=true]{background:#1E1B16}
.pop{position:fixed; left:22px; top:calc(50% - 120px); width:248px; background:#1E1B16; color:#FFF4DF;
  border-radius:18px; padding:10px; display:flex; flex-direction:column; gap:4px; z-index:51;
  box-shadow:4px 4px 0 rgba(30,27,22,.3)}
.pop[hidden]{display:none}
.pop form{margin:0}
.pop button{all:unset; box-sizing:border-box; width:100%; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding:7px 8px; border-radius:12px; font-size:13.5px; font-weight:700}
.pop button.on{background:#FFC83D; color:#1E1B16}
.pop .av{width:26px; height:26px; font-size:11px; border-width:2px; border-color:#FFF4DF}
.pop button.on .av{border-color:#1E1B16}
.pop small{font-size:11px; opacity:.65; padding:2px 8px 4px}
.pop a{font-size:12px; font-weight:800; padding:6px 8px 2px; opacity:.8; text-decoration:none}

/* Menu da equipa — EMenu.dc.html. */
.mi{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:16px; text-decoration:none;
  font-family:var(--display); font-weight:800; font-size:21px; border:2.5px solid transparent}
.mi.on{background:var(--sol); border-color:#1E1B16; color:#1E1B16}
.mi .sw{width:18px; height:18px; border-radius:6px; border:2px solid #1E1B16; flex:none}
.sub{display:flex; flex-wrap:wrap; gap:6px; padding:0 0 6px 42px}
.sub .chip{text-decoration:none}

/* Paleta de cores do perfil — EPerfil.dc.html. */
.cores{display:grid; grid-template-columns:repeat(7,40px); justify-content:space-between; row-gap:12px}
.cores label{display:block}
.cores input{position:absolute; opacity:0; pointer-events:none}
.cores .sw{display:block; width:40px; height:40px; border-radius:50%; border:3px solid #1E1B16; cursor:pointer}
.cores input:checked + .sw{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--ink)}
.cores input:focus-visible + .sw{outline:3px solid var(--historias); outline-offset:4px}

/* ── Fase 2 · cartões de atividade (Planificacao/ELugares.dc.html) ───────────
   Cor do cartão = cor do lugar. Grande: lugar, pessoas, hora, tema (3 linhas),
   atividade (2). Pequeno (≤ 30 min): uma linha com reticências. */
.lc{border:2.5px solid #1E1B16; border-radius:20px; box-shadow:4px 4px 0 var(--shadow); color:#1E1B16; padding:11px 13px; display:flex; flex-direction:column; gap:7px; min-width:0; text-decoration:none}
.lc.past{opacity:.5}
.lc-top{display:flex; align-items:center; gap:10px; min-width:0}
.lc-pl{font-size:12px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.lc-time{margin-left:auto; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; flex:none}
.lc-th{font-family:var(--display); font-weight:800; font-size:19px; line-height:1.05; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.lc-ac{font-weight:700; font-size:13.5px; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.lc.sm{flex-direction:row; align-items:center; gap:10px; padding:7px 12px; border-radius:14px}
.lc-one{flex:1; min-width:0; font-weight:800; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pp{display:flex; flex:none}
.pp span{width:26px; height:26px; border-radius:50%; border:2px solid #1E1B16; display:grid; place-items:center; font-size:11px; font-weight:800; margin-left:-7px; color:#1E1B16; overflow:hidden; position:relative}
.pp span:first-child{margin-left:0}
.pp span img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.lc.sm .pp span{width:22px; height:22px; font-size:10px; margin-left:-6px}
.lc.sm .pp span:first-child{margin-left:0}
.lb{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}

/* Lista de lugares + escolha de ícone e cor (ELugares). */
.lrow{display:flex; align-items:center; gap:12px; padding:9px 4px; border:0; border-top:2px dashed color-mix(in srgb,var(--ink) 14%,transparent); background:none; font:inherit; color:inherit; width:100%; text-align:left; text-decoration:none}
.lrow:first-child{border-top:0}
.tile{width:46px; height:46px; border:2.5px solid #1E1B16; border-radius:14px; display:grid; place-items:center; flex:none; box-shadow:2px 2px 0 var(--shadow); color:#1E1B16}
.igrid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px}
.igrid label, .pal label{display:block; position:relative}
.igrid input, .pal input{position:absolute; opacity:0; pointer-events:none}
.igrid span{aspect-ratio:1; border:2px solid var(--ink); border-radius:12px; background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer}
.igrid input:checked + span{border-color:#1E1B16; color:#1E1B16; box-shadow:2px 2px 0 #1E1B16; background:var(--escolhida,#FFC83D)}
.pal{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px}
.pal span{display:block; height:34px; border:2.5px solid #1E1B16; border-radius:12px; cursor:pointer}
.pal input:checked + span{box-shadow:0 0 0 3px var(--paper),0 0 0 5.5px var(--ink)}
.igrid input:focus-visible + span, .pal input:focus-visible + span{outline:3px solid var(--historias); outline-offset:2px}

/* Folha que sobe — <dialog> nativo + showModal(); fecha no fundo escuro (HANDOFF). */
dialog.folha{position:fixed; inset:auto 0 0 0; margin:0 auto; width:100%; max-width:560px; max-height:calc(100dvh - 64px - var(--sat,0px));
  height:calc(100dvh - 64px - var(--sat,0px)); padding:0; border:0; border-top:3px solid #1E1B16; border-radius:28px 28px 0 0;
  background:var(--surface); color:var(--ink); overflow:hidden; box-shadow:0 -6px 0 rgba(30,27,22,.12)}
dialog.folha[open]{display:flex; flex-direction:column}
dialog.folha::backdrop{background:rgba(22,18,10,.5)}
body.escuro dialog.folha{--surface:#24211A; --ink:#F7EEDB; --muted:#BFB39C; --line:#F7EEDB; --paper:#16140F; --soft:#2E2919}
dialog.folha .shh{padding:8px 18px 14px; border-bottom:3px solid #1E1B16; color:#1E1B16; display:flex; flex-direction:column; gap:6px; flex:none}
dialog.folha .shb{padding:14px 18px calc(22px + var(--sab,0px)); display:flex; flex-direction:column; gap:16px; overflow:auto; flex:1}
dialog.folha .grab{background:#1E1B16}
.fl{display:flex; flex-direction:column; gap:8px}

/* ── Fase 2 · planificação do dia e folha de edição (Planificacao.dc.html) ── */
.tl2{display:flex; flex-direction:column; gap:9px}
a.cardbtn{display:block; text-decoration:none; color:inherit}
fieldset.fl{border:0; padding:0; margin:0; min-width:0}
fieldset.fl > legend.lb{padding:0; margin-bottom:8px}
/* Escolhas feitas com <input> dentro de <label> — o input fica escondido e o estado vem de :has(). */
label.chip, label.ib, label.dy, .pv label, label.ck{position:relative; cursor:pointer}
label.chip > input, label.ib > input, label.dy > input, .pv label > input, label.ck > input{position:absolute; opacity:0; pointer-events:none}
label.chip:has(input:checked){background:var(--ink); color:var(--paper)}
label:has(input:focus-visible){outline:3px solid var(--historias); outline-offset:2px}
.chip.sm2{padding:4px 10px; font-size:12.5px}
button.chip.on{background:var(--ink); color:var(--paper)}
.ib{height:36px; padding:0 10px; border:2px solid var(--ink); border-radius:12px; display:inline-flex; align-items:center; gap:6px; background:var(--surface); color:var(--ink); font:inherit; font-weight:800; font-size:12.5px}
label.ib:has(input:checked){border-color:#1E1B16; color:#1E1B16; box-shadow:2px 2px 0 #1E1B16; background:var(--escolhido,#FFC83D)}
.stp{display:flex; align-items:center; border:2.5px solid var(--ink); border-radius:14px; overflow:hidden}
.stp button{width:34px; height:38px; border:0; background:var(--soft); color:var(--ink); font:inherit; font-weight:800; font-size:18px; padding:0}
.stp b{min-width:56px; text-align:center; font-variant-numeric:tabular-nums; font-size:16px}
.dy{width:40px; height:36px; border:2.5px solid var(--ink); border-radius:12px; background:var(--surface); color:var(--ink); font-weight:800; font-size:13px; display:grid; place-items:center}
label.dy:has(input:checked){background:var(--ink); color:var(--paper)}
.pv{display:flex; gap:6px; flex-wrap:wrap}
.pv label{width:38px; height:38px; border-radius:50%; border:2.5px solid #1E1B16; font-weight:800; font-size:14px; color:#1E1B16; display:grid; place-items:center; opacity:.28}
.pv label:has(input:checked){opacity:1}
.ck{display:flex; align-items:flex-start; gap:10px; padding:4px 0}
.ck .bx{width:22px; height:22px; border:2.5px solid var(--ink); border-radius:7px; flex:none; display:grid; place-items:center; margin-top:1px}
.ck:has(input:checked) .bx{background:#2FBF71; border-color:#1E1B16}
.ck:has(input:checked) .bx::after{content:""; width:10px; height:6px; border:solid #1E1B16; border-width:0 0 3px 3px; transform:translateY(-1px) rotate(-45deg)}
.tbox{border:2.5px solid var(--ink); border-radius:18px; padding:12px; display:flex; flex-direction:column; gap:12px}
.tbox[hidden]{display:none}

/* ── Fase 2 · semana deitada (ESemana.dc.html) — o único ecrã horizontal ── */
.screen:has(> .deitada){max-width:none; padding:0}
.deitada{display:grid; grid-template-columns:calc(124px + var(--sal,0px)) minmax(0,1fr); height:100%; min-height:0}
.deitada-lado{background:var(--sol); color:#1E1B16; border-right:3px solid #1E1B16; padding:12px 10px calc(12px + var(--sab,0px)) calc(10px + var(--sal,0px)); display:flex; flex-direction:column; gap:8px; overflow:auto}
.deitada-lado a{text-decoration:none}
.gbtn{justify-content:flex-start; padding:5px 10px; font-size:12.5px; border-color:#1E1B16; gap:6px}
.legenda{display:flex; flex-direction:column; gap:3px; margin-top:4px; padding-top:8px; border-top:2px dashed rgba(30,27,22,.35)}
.legenda div{display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; line-height:1.1}
.deitada-grelha{padding:6px calc(8px + var(--sar,0px)) calc(8px + var(--sab,0px)) 4px; display:flex; flex-direction:column; gap:4px; min-width:0; min-height:0}
.dias{display:grid; grid-template-columns:42px repeat(5,minmax(0,1fr)); column-gap:6px}
.dias a{text-align:center; font-weight:800; font-size:12.5px; text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0}
.dias a.hoje{text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:4px}
.inteiro{font-size:9.5px; font-weight:800; border:1.5px solid #1E1B16; border-radius:6px; padding:0 4px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#1E1B16}
.grelha{flex:1; min-height:0; display:grid; grid-template-columns:42px repeat(5,minmax(0,1fr)); row-gap:3px; column-gap:6px}
.tlabel{grid-column:1; align-self:start; justify-self:end; padding:2px 2px 0 0; font-size:10.5px; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums}
.rowline{grid-column:2 / -1; align-self:start; height:0; border-top:1.5px dashed color-mix(in srgb,var(--ink) 14%,transparent)}
.blk{position:relative; z-index:1; justify-self:start; width:calc(100% / var(--faixas,1)); margin-left:calc(100% * var(--faixa,0) / var(--faixas,1));
  min-height:0; border:2px solid #1E1B16; border-radius:10px; color:#1E1B16; box-shadow:2px 2px 0 var(--shadow);
  display:flex; align-items:center; gap:6px; padding:0 5px; overflow:hidden; text-decoration:none}
.blk.thin{border-radius:7px; box-shadow:none}
.blk.tall{align-items:flex-start; flex-direction:column; justify-content:flex-start; padding:5px 6px; gap:4px}
.blk.sel{outline:3px solid var(--ink); outline-offset:1px}
.blk .lic{display:grid; place-items:center; flex:none}
.blk .topo{display:flex; align-items:center; gap:8px; width:100%}
.blk .tx{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; line-height:1.1}
.blk .th{font-size:11px; font-weight:800}
.blk .ac{font-size:10px; font-weight:600; opacity:.85}
.blk.tall .th{font-size:12.5px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.blk.tall .ac{font-size:11px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.blk:not(.tall) .th{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.blk .pp span{width:18px; height:18px; font-size:8.5px; margin-left:-5px; border-width:1.5px}
.blk .pp span:first-child{margin-left:0}
.roda{display:none}
@media (orientation:portrait){
  .deitada{display:none}
  .roda{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; height:100%; padding:24px; text-align:center; font-weight:700}
  .roda strong{font-family:var(--display); font-size:28px}
}
/* Painel lateral da semana: a mesma folha, encostada à direita. */
dialog.folha.lateral{inset:0 0 0 auto; margin:0; width:min(376px, 62vw); max-width:none; height:100dvh; max-height:100dvh;
  border-top:0; border-left:3px solid #1E1B16; border-radius:0; padding-right:var(--sar,0px)}
dialog.folha.lateral .shh{padding:10px 14px; gap:3px}
dialog.folha.lateral .shb{padding:10px 14px calc(12px + var(--sab,0px))}
.ibs{display:flex; gap:5px; flex-wrap:wrap}
.ib.so-icone{width:31px; height:31px; padding:0; justify-content:center; border-radius:10px}
.chip.qc{padding:3px 9px; font-size:12px}
.pv.pequeno label{width:30px; height:30px; font-size:12px; border-width:2px}

/* ── Fase 2 · calendário do mês (ECalendario.dc.html) ── */
.mc{min-height:52px; display:flex; flex-direction:column; align-items:center; gap:4px; padding:5px 0; border-radius:14px; text-decoration:none; color:inherit}
.mc .n{font-weight:800; font-size:14px; font-variant-numeric:tabular-nums}
.mc.out .n{opacity:.3}
.mc.hoje .n{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px}
.mc.sel{background:var(--ink); color:var(--paper)}
.dots{display:flex; gap:2px}
.dots i{width:7px; height:7px; border-radius:50%; border:1.5px solid #1E1B16; display:block}
.mc.sel .dots i{border-color:var(--paper)}
.month a{text-decoration:none}
.ev-linha{display:flex; align-items:center; gap:10px; border:2.5px solid #1E1B16; border-radius:14px; padding:8px 12px; background:#1E1B16; color:#FFF4DF; font-weight:800; font-size:13px; text-decoration:none}
.ev-linha.bd{background:#FFFFFF; color:#1E1B16; box-shadow:4px 4px 0 var(--shadow)}
.ev-linha .lc-time{color:inherit}
.ev-linha .av{width:28px; height:28px; font-size:11px; border-width:2px}

/* Calendário dos pais: avatar do aniversário dentro da célula (sna.css .bd). */
.cell .bd .av{width:26px; height:26px; font-size:11px}

/* ── Fase 4 · inscrição (Inscricao.dc.html) — tudo dentro de .ins ── */
.screen > .ins{flex:1; min-height:0; height:auto}
.ins{position:relative; height:100%; overflow:hidden; display:flex; flex-direction:column; background:var(--c,#FFC83D); color:#1E1B16}
.ins .deco{position:absolute; border:3px solid #1E1B16; pointer-events:none}
.ins .d1{right:-40px; top:70px; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.45)}
.ins .d2{left:-80px; right:-80px; bottom:-150px; height:300px; border-radius:50% 50% 0 0; background:rgba(255,255,255,.35)}
.ins .d3{left:150px; right:-120px; bottom:-190px; height:300px; border-radius:50% 50% 0 0; background:#FFF4DF}
/* Escuro (InscricaoEscuro*): fundo da app, a cor do passo só no círculo. */
.screen.dark .ins{background:#16140F; color:#F7EEDB}
.screen.dark .ins .d1{background:var(--c); opacity:.85}
.screen.dark .ins .d2{background:#24211A}
.screen.dark .ins .d3{background:#2B271E}
.screen.dark .ins .prog i{border-color:#F7EEDB; background:transparent}
.screen.dark .ins .prog i.on{background:#F7EEDB}
.ins .tb{position:relative; z-index:1; display:flex; align-items:center; gap:10px; padding:calc(16px + var(--sat,0px)) 20px 8px}
.ins .prog{flex:1; display:grid; grid-template-columns:repeat(5,1fr); gap:5px}
.ins .prog i{height:9px; border-radius:99px; border:2px solid #1E1B16; background:rgba(255,255,255,.5); display:block}
.ins .prog i.on{background:#1E1B16}
.ins .sc{position:relative; z-index:1; flex:1; overflow:auto; padding:6px 20px 16px; display:flex; flex-direction:column; gap:14px; margin:0}
.ins .sc > *{flex-shrink:0}
.ins .who{display:flex; align-items:center; gap:10px}
.ins .who .av{width:50px; height:50px; font-size:20px; border-width:3px}
.ins .bub{background:var(--surface); color:var(--ink); border:3px solid #1E1B16; border-radius:6px 26px 26px 26px; box-shadow:5px 5px 0 #1E1B16; padding:16px 16px 14px; display:flex; flex-direction:column; gap:9px}
.ins .bub h1{margin:0; font-family:var(--display); font-weight:800; font-size:30px; line-height:1}
.ins .bub p{margin:0; font-size:15px; line-height:1.38; font-weight:500}
.ins .ft{position:relative; z-index:1; padding:10px 20px calc(24px + var(--sab,0px)); display:flex; flex-direction:column; gap:8px}
.ins .tiles{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ins .tile{width:auto; height:auto; border:2.5px solid #1E1B16; border-radius:18px; padding:12px; display:flex; flex-direction:column; gap:8px; color:#1E1B16; font-weight:800; font-size:14px; line-height:1.15; box-shadow:3px 3px 0 #1E1B16; place-items:initial}
.ins .opt{position:relative; border:3px solid #1E1B16; border-radius:20px; background:var(--surface); color:var(--ink); padding:14px; display:flex; gap:12px; align-items:center; cursor:pointer}
.ins .opt input{position:absolute; opacity:0; pointer-events:none}
.ins .opt:has(input:checked){background:#1E1B16; color:#FFF4DF; box-shadow:4px 4px 0 rgba(30,27,22,.35)}
.ins .rd{width:24px; height:24px; border-radius:50%; border:3px solid currentColor; flex:none; display:grid; place-items:center}
.ins .opt:has(input:checked) .rd::after{content:""; width:10px; height:10px; border-radius:50%; background:currentColor}
.ins .fine{font-size:12.5px; font-weight:700; line-height:1.35}
.ins .grpH{font-family:var(--display); font-weight:800; font-size:17px; margin-top:2px}
.ins .fr{display:flex; align-items:center; gap:10px; background:var(--surface); color:var(--ink); border:2.5px solid #1E1B16; border-radius:16px; padding:9px 10px 9px 12px; min-width:0}
.ins .fr .k{display:block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:0}
.ins .fr .v{font-weight:700; font-size:14.5px}
.ins .rg{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:6px}
.ins .rg label{position:relative; border:2.5px solid var(--ink); border-radius:12px; font-weight:800; font-size:13px; padding:7px 4px; display:flex; flex-direction:column; align-items:center; line-height:1.1; cursor:pointer; text-align:center}
.ins .rg label input{position:absolute; opacity:0; pointer-events:none}
.ins .rg label small{font-size:10.5px; font-weight:600; opacity:.75; margin-top:2px}
.ins .rg label:has(input:checked){background:#1E1B16; color:#FFF4DF; border-color:#1E1B16}
.ins .mini{position:relative; width:36px; height:36px; border-radius:12px; border:2.5px solid #1E1B16; background:var(--surface); color:var(--ink); display:grid; place-items:center; padding:0; flex:none; font-weight:800; cursor:pointer}
.ins .mini input{position:absolute; opacity:0; pointer-events:none}
.ins .mini:has(input:checked){background:#2FBF71; color:#1E1B16}
.ins .mini.ed:has(input:checked){background:#FFC83D}
/* Passo 3: o valor; o lápis troca-o pela caixa (conf[campo]=ed). */
.ins .fr .input{display:none}
.ins .fr:has(.ed input:checked) .input{display:block}
.ins .fr:has(.ed input:checked) .v{display:none}
/* Só de leitura (regime, papel): cinzento-mate tracejado com cadeado discreto. */
.ins .fr.info{background:#ECE7DD; border:2.5px dashed rgba(30,27,22,.35); color:#5E574B}
.ins .fr.info .mini{background:transparent; border-color:transparent; color:#8A8274; cursor:default}
.screen.dark .ins .fr.info{background:#2E2B24; border-color:rgba(247,238,219,.25); color:#BDB4A3}
.screen.dark .ins .fr.info .mini{color:#8F877A}
/* Passo 6: mini-tutorial animado (iPhone | Android). */
.ins .seg2{display:flex; gap:4px; background:rgba(30,27,22,.12); border-radius:999px; padding:3px; align-self:flex-start}
.ins .seg2 button{border:0; border-radius:999px; background:transparent; font:inherit; font-weight:800; font-size:12.5px; padding:5px 12px; color:#1E1B16; cursor:pointer}
.ins .seg2 button.on{background:#1E1B16; color:#FFF4DF}
.ins .tut{display:flex; gap:12px; align-items:center}
.ins .tut[hidden]{display:none}
.tph{position:relative; width:104px; height:170px; flex:none; border:3px solid #1E1B16; border-radius:20px; background:#FFF4DF; overflow:hidden; box-shadow:3px 3px 0 #1E1B16}
.tph .f{position:absolute; inset:0; opacity:0; animation:tutf 9s infinite}
.tph .f2{animation-delay:3s}.tph .f3{animation-delay:6s}
@keyframes tutf{0%{opacity:0}4%{opacity:1}30%{opacity:1}34%{opacity:0}100%{opacity:0}}
.tph .bar{margin:8px 6px 0; background:#fff; border:1.5px solid #1E1B16; border-radius:8px; font-size:6.5px; font-weight:800; padding:3px 4px; text-align:center}
.tph .pg{margin:8px; height:84px; border-radius:8px; background:repeating-linear-gradient(#F1E6CF 0 8px,transparent 8px 14px)}
.tph .tb2{position:absolute; left:0; right:0; bottom:0; height:34px; border-top:1.5px solid #1E1B16; display:grid; place-items:center; background:#fff}
.tph .shr{display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:#FFC83D}
.tph .sheet{position:absolute; left:4px; right:4px; bottom:4px; background:#fff; border:2px solid #1E1B16; border-radius:12px; padding:4px; display:flex; flex-direction:column; gap:3px; font-size:7px; font-weight:700}
.tph .sheet span{padding:4px; border-radius:6px}
.tph .sheet .hl{background:#2FBF71; font-weight:800}
.tph .home{position:absolute; inset:0; padding:14px 10px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-content:start; background:#8FD3F4}
.tph .home i{display:block; aspect-ratio:1; border-radius:8px; background:rgba(255,255,255,.6)}
.tph .home b{display:flex; flex-direction:column; align-items:center; gap:2px; font-size:5.5px; font-weight:800; animation:tutpop 9s infinite; animation-delay:6s}
.tph .home b span{display:block; width:100%; aspect-ratio:1; border-radius:8px; border:1.5px solid #1E1B16; overflow:hidden}
.tph .home b img{width:100%; height:100%; display:block}
@keyframes tutpop{0%{transform:scale(.4)}6%{transform:scale(1.15)}10%{transform:scale(1)}100%{transform:scale(1)}}
.tph .tap{position:absolute; width:22px; height:22px; margin-left:-11px; border-radius:50%; background:rgba(30,27,22,.35); animation:tuttap 1.5s infinite}
@keyframes tuttap{0%{transform:scale(.4); opacity:.9}100%{transform:scale(1.6); opacity:0}}
.ins .steps{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:13px; line-height:1.3}
.ins .steps li{opacity:.45; animation:tuts 9s infinite}
.ins .steps .s2{animation-delay:3s}.ins .steps .s3{animation-delay:6s}
@keyframes tuts{0%{opacity:.45}4%{opacity:1; font-weight:700}30%{opacity:1}34%{opacity:.45}100%{opacity:.45}}
@media (prefers-reduced-motion: reduce){
  .tph .f, .tph .tap, .tph .home b, .ins .steps li{animation:none}
  .tph .f3{opacity:1}
  .ins .steps li{opacity:1}
}
.ins .vs{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ins .vc{border:2.5px solid #1E1B16; border-radius:18px; padding:12px; display:flex; flex-direction:column; gap:6px; color:#1E1B16}
.ins .kid{background:var(--surface); color:var(--ink); border:2.5px solid #1E1B16; border-radius:18px; padding:12px; display:flex; flex-direction:column; gap:8px}
.ins .ch3{display:flex; flex-direction:column; gap:6px}
.ins .ch3 label{position:relative; border:2.5px solid var(--ink); border-radius:12px; font-weight:700; font-size:13.5px; padding:8px 10px; cursor:pointer}
.ins .ch3 label input{position:absolute; opacity:0; pointer-events:none}
.ins .ch3 label:has(input:checked){background:#1E1B16; color:#FFF4DF; border-color:#1E1B16}
.ins .pi{display:flex; gap:12px; align-items:flex-start}
.ins .pi .ic{width:42px; height:42px; border-radius:14px; border:2.5px solid #1E1B16; flex:none}
.ins .pi strong{display:block; font-size:15px}
.ins .pi span{font-size:13px; line-height:1.35; font-weight:500}
.ins .ckb{position:relative; display:flex; gap:10px; align-items:flex-start; cursor:pointer}
.ins .ckb input{position:absolute; opacity:0; pointer-events:none}
.ins .ckb .bx{width:26px; height:26px; border:3px solid currentColor; border-radius:8px; flex:none; display:grid; place-items:center}
.ins .ckb:has(input:checked) .bx{background:#2FBF71; border-color:#1E1B16}
.ins .ckb:has(input:checked) .bx::after{content:""; width:11px; height:6px; border:solid #1E1B16; border-width:0 0 3px 3px; transform:translateY(-2px) rotate(-45deg)}
.ins label:has(input:focus-visible){outline:3px solid #1E1B16; outline-offset:2px}
.tlin{display:flex; flex-direction:column; gap:10px}
.tlin div{display:flex; gap:10px; align-items:center; font-weight:700}
.tlin b{width:30px; height:30px; border-radius:50%; border:2.5px solid #1E1B16; display:grid; place-items:center; flex:none; font-size:13px; color:#1E1B16; background:#FFFFFF}
.tlin .d b{background:#2FBF71}
.tlin .n b{background:#FFC83D}
.estado-ill{width:130px; height:130px; border-radius:50%; border:3px solid #1E1B16; display:grid; place-items:center; align-self:center; box-shadow:4px 4px 0 var(--shadow)}
/* Avisos (NotificacoesEquipa / Notificacoes). */
.nt{display:flex; gap:12px; align-items:flex-start; padding:12px 2px; border-top:2px dashed color-mix(in srgb,var(--ink) 14%,transparent); position:relative}
.nt:first-child{border-top:0}
.nt .ic{width:42px; height:42px; border-radius:14px; border:2.5px solid #1E1B16; display:grid; place-items:center; flex:none; color:#1E1B16}
.nt form{display:inline}

/* ── Fase 5 · fotos (EFotos / PGaleria) ── */
.g3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.ph{position:relative; aspect-ratio:1; border:2.5px solid #1E1B16; border-radius:16px; overflow:hidden; display:block; cursor:pointer; background:var(--soft)}
.ph img{width:100%; height:100%; object-fit:cover; display:block}
.ph input{position:absolute; opacity:0; pointer-events:none}
label.ph:not(.sel) img{opacity:.35}
.ph .ck{position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%; border:2px solid #1E1B16; background:#FFFFFF}
.ph.sel .ck{background:#2FBF71}
.ph.sel .ck::after{content:""; position:absolute; left:6px; top:3px; width:5px; height:9px; border:solid #1E1B16; border-width:0 3px 3px 0; transform:rotate(45deg)}
.grande{border:3px solid #1E1B16; border-radius:22px; overflow:hidden; box-shadow:4px 4px 0 var(--shadow); background:var(--soft)}
.grande img{width:100%; max-height:46dvh; object-fit:contain; display:block}
.kids{display:flex; flex-wrap:wrap; gap:6px}
.kids label{position:relative; display:inline-flex; align-items:center; gap:6px; border:2.5px solid var(--line); border-radius:999px; padding:4px 10px 4px 4px; font-weight:700; font-size:13px; background:var(--surface); cursor:pointer; opacity:.45}
.kids label input{position:absolute; opacity:0; pointer-events:none}
.kids label:has(input:checked){opacity:1; background:var(--ink); color:var(--paper)}
.kids .av{width:26px; height:26px; font-size:11px; border-width:2px}
.warn{border:2.5px solid #1E1B16; border-radius:16px; padding:10px 12px; background:var(--late); color:#1E1B16; font-weight:700; font-size:13.5px}
.warn[hidden]{display:none}
.alb{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; border:2.5px solid var(--line); border-radius:20px; background:var(--surface); padding:8px; box-shadow:4px 4px 0 var(--shadow)}
.alb .cv{width:64px; height:64px; border-radius:14px; border:2.5px solid #1E1B16; overflow:hidden; flex:none; background:var(--soft)}
.alb .cv img{width:100%; height:100%; object-fit:cover}
dialog.ver-foto{border:0; padding:16px 16px calc(16px + var(--sab,0px)); width:100%; max-width:560px; max-height:100dvh; background:var(--paper); color:var(--ink)}
dialog.ver-foto[open]{display:flex; flex-direction:column; gap:12px}
dialog.ver-foto::backdrop{background:rgba(22,18,10,.75)}
dialog.ver-foto img{width:100%; max-height:70dvh; object-fit:contain; border-radius:18px; border:3px solid #1E1B16; background:#000}

/* ── Fase 6 · avisos e garrafão ── */
.nt.read{opacity:.55}
.nt .dt{position:absolute; right:4px; top:16px; width:10px; height:10px; border-radius:50%; background:#FF6B8B; border:2px solid #1E1B16}
.gw{display:grid; grid-template-columns:58px 34px minmax(0,1fr); align-items:center; gap:10px}
.gw .gl{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.gw .gs{font-size:12.5px; font-weight:600; color:var(--muted)}
.gw .agua{width:34px; height:34px; font-size:13px}
.yn{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.yn button{border:2.5px solid #1E1B16; border-radius:999px; padding:9px; font-weight:800; font-size:14px; background:#FFFFFF; color:#1E1B16}
.yn button.ok{background:#2FBF71}
.yn button.no{background:var(--late)}

/* ── Fase 6b · atendimentos ── */
.slots{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.slot{position:relative; border:2.5px solid var(--line); border-radius:16px; padding:12px; text-align:center; font-family:var(--display); font-weight:800; font-size:18px; background:var(--surface); cursor:pointer; box-shadow:3px 3px 0 var(--shadow)}
.slot input{position:absolute; opacity:0; pointer-events:none}
.slot:has(input:checked){background:var(--ink); color:var(--paper)}
.slot.ocup{opacity:.4; cursor:not-allowed; box-shadow:none; font-size:14px}

/* ── Fase 7a · mensalidades, financeiro e recibo (Pagamentos, EFinanceiro, EFinRecibo) ── */
.nosb{scrollbar-width:none}
.nosb::-webkit-scrollbar{display:none}
.rec{border:2.5px dashed var(--ink); border-radius:18px; padding:14px; display:flex; flex-direction:column; gap:6px; background:var(--paper)}
.rec .r{display:flex; justify-content:space-between; font-size:14px; gap:10px}
.rec .r.tot{border-top:2px dashed var(--line); padding-top:8px; margin-top:4px}
@media print{
  .hero, .btn, .tabbar, .peg, .pop{display:none !important}
  .screen{min-height:0 !important}
}

/* ── Fase 7b · fim do ano (EFimAno.dc.html) ── */
.kr{display:flex; flex-direction:column; gap:8px; padding:12px 2px; border-top:2px dashed color-mix(in srgb,var(--ink) 14%,transparent); margin:0}
.kr:first-child{border-top:0}
.seg{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.seg button{border:2.5px solid var(--ink); border-radius:12px; background:transparent; color:var(--ink); font:inherit; font-weight:800; font-size:13.5px; padding:7px 0}
.seg button.c{background:#2FBF71; color:#1E1B16; border-color:#1E1B16}
.seg button.s{background:#FF6B8B; color:#1E1B16; border-color:#1E1B16}
.kr button:disabled{opacity:.5}
.barra{position:absolute; left:0; right:0; bottom:0; padding:12px 20px calc(24px + var(--sab,0px)); background:var(--paper); border-top:3px solid var(--line); border-radius:26px 26px 0 0; display:flex; flex-direction:column; gap:8px; z-index:3}
.btn.off{opacity:.45; box-shadow:none}

/* ── Fase 8 · sem rede (faixa que o service worker põe no topo do dia guardado) ── */
.band{background:#1E1B16; color:#FFF4DF; padding:9px 20px; font-weight:800; font-size:13px; display:flex; align-items:center; gap:8px; flex:none}

/* ── Famílias e fichas (EFamilias, EGuardiao, EAdulto) ── */
.kidc{display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; position:relative; text-align:center; min-width:0}
.kidc .av.xl{border-width:4px; box-shadow:3px 3px 0 var(--shadow)}
.kidc .docw{position:absolute; top:0; right:12px; width:22px; height:22px; border-radius:50%; background:#FF6B6B; border:2px solid #1E1B16; font-weight:800; font-size:12px; display:grid; place-items:center; color:#1E1B16}
.kidc strong{font-size:14px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kidc .sub{font-size:11.5px; margin-top:-3px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kidc[hidden], [data-busca-info][hidden], [data-busca-nada][hidden], [data-busca-filtros][hidden]{display:none}
.kidc .sub.porque{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.25; font-weight:700}
.kidc.sel .av.xl{outline:3px solid var(--ink); outline-offset:3px}
.kpanel{grid-column:1/-1; position:relative; background:var(--surface); border:3px solid var(--line); border-radius:24px; box-shadow:4px 4px 0 var(--shadow); padding:14px; display:flex; flex-direction:column; gap:12px; margin-top:4px; min-width:0}
.kpanel .pt{position:absolute; top:-12px; left:calc(50% - 10px); width:20px; height:20px; background:var(--surface); border-left:3px solid var(--line); border-top:3px solid var(--line); transform:rotate(45deg)}
.tlb{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.nickb{font-family:var(--display); font-weight:800; font-size:34px; line-height:1; overflow-wrap:anywhere}
.mtree-rola{overflow-x:auto; display:flex; justify-content:center}
.mtree{position:relative; flex:none; color:var(--ink)}
.mtree svg{position:absolute; left:0; top:0; opacity:.5}
.mnode{position:absolute; width:80px; display:flex; flex-direction:column; align-items:center; gap:1px}
.mnode .av{width:46px; height:46px; font-size:17px; box-shadow:2px 2px 0 var(--shadow)}
.mnode.me .av{width:56px; height:56px; font-size:21px; box-shadow:0 0 0 4px var(--surface),0 0 0 7px #FFC83D}
.mnode strong{font-size:12.5px; margin-top:3px; white-space:nowrap; max-width:80px; overflow:hidden; text-overflow:ellipsis}
.mnode small{font-size:10.5px; font-weight:700; color:var(--muted); white-space:nowrap}
.fab{position:absolute; right:20px; bottom:calc(24px + var(--sab,0px)); width:64px; height:64px; padding:0; border-radius:50%; font-size:30px; line-height:1}
textarea.input{min-height:90px; resize:vertical; font:inherit}

/* ── Pacotes de sábado (EPacotes.dc.html) ── */
.fita{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:4px}
.mk{aspect-ratio:1; border-radius:50%; border:2.5px solid var(--line); background:var(--surface); padding:0; max-width:100%; display:block}
.mk.f{background:var(--ink)}
.mk.h{background:linear-gradient(90deg,var(--ink) 50%,var(--surface) 50%)}
.mk.sel{box-shadow:0 0 0 3px var(--sol)}
.opt{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px}
.opt button{border:2.5px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); font:inherit; font-weight:800; font-size:12.5px; padding:8px 2px; line-height:1.15}
.opt button.go{background:#2FBF71; color:#1E1B16; border-color:#1E1B16}
.opt button.half{background:#FFC83D; color:#1E1B16; border-color:#1E1B16}

/* Saúde (ESaude.dc.html) */
.chg{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-top:2px dashed var(--line)}
.chg:first-of-type{border-top:0}
.diff{font-size:13px;font-weight:600;line-height:1.35}
.diff s{opacity:.55}
.grp{display:flex;flex-direction:column;gap:8px}
.kids .kid{display:flex;align-items:center;gap:6px;border:2px solid var(--line);border-radius:999px;padding:3px 10px 3px 3px;font-size:13px;font-weight:700;text-decoration:none;background:var(--surface);color:var(--ink)}
.kids .kid .av{width:24px;height:24px;font-size:10px;border-width:2px}

/* Financeiro, folha «Novo movimento»: entrada/saída (EFinanceiro.dc.html) */
.folha .seg2{display:flex; gap:4px; background:rgba(30,27,22,.12); border-radius:999px; padding:3px; align-self:flex-start}
.folha .seg2 button{border:0; border-radius:999px; background:transparent; font:inherit; font-weight:800; font-size:14px; padding:7px 16px; color:#1E1B16; cursor:pointer}
.folha .seg2 button.in{background:#2FBF71}
.folha .seg2 button.out{background:#FF8A5B}
.chips [hidden]{display:none}

/* Árvore da família (Filho.dc.html) */
.arv{display:flex;flex-direction:column;gap:6px;position:relative}
.arv-l{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 4px;position:relative}
.arv-l + .arv-l{padding-top:10px;border-top:2px dashed var(--line)}
.arv-l.amigos{justify-content:flex-start}
.node,.fnode{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:72px;padding:4px 2px;border:0;background:none;font:inherit;color:var(--ink);cursor:pointer;text-align:center}
.node:disabled,.fnode:disabled{cursor:default;opacity:1}
.node .av,.fnode .av{width:46px;height:46px;border-radius:50%;border:2.5px solid #1E1B16;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:18px;color:#1E1B16}
.node.me .av{width:62px;height:62px;font-size:24px;box-shadow:0 0 0 3px var(--paper),0 0 0 5.5px #1E1B16}
.node.add .av,.fnode.add .av{background:transparent;border-style:dashed;color:var(--muted)}
.node strong,.fnode strong{font-size:12.5px;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node small,.fnode small{font-size:11px;font-weight:700;color:var(--muted);line-height:1.1}
.bd.sos{position:absolute;top:0;right:10px;width:18px;height:18px;border-radius:50%;background:#FF6B6B;border:2px solid #1E1B16;color:#1E1B16;font-style:normal;font-weight:800;font-size:11px;display:inline-grid;place-items:center}

/* Site (ESite.dc.html) */
details.sec{display:flex;flex-direction:column;gap:10px}
details.sec[open]{gap:10px}
details.sec > summary{list-style:none;cursor:pointer}
details.sec > summary::-webkit-details-marker{display:none}
details.sec > summary::after{content:'+';font-weight:800;font-size:18px}
details.sec[open] > summary::after{content:'−'}
details.sec > :not(summary){margin-top:10px}
.sh{display:flex;align-items:center;gap:10px}
.num{width:30px;height:30px;border-radius:50%;border:2.5px solid #1E1B16;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none;color:#1E1B16}
.price{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:8px;align-items:center;font-weight:700;font-size:13.5px}

/* «Ver como pessoa» (dev): faixa no topo de todas as páginas */
.vp-faixa{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:calc(6px + var(--sat,0px)) 14px 6px;background:#1E1B16;color:#FFF4DF;font-size:13px;font-weight:600}
.vp-faixa button{border:2px solid #FFF4DF;border-radius:999px;background:#FFC83D;color:#1E1B16;font:inherit;font-weight:800;padding:4px 12px;white-space:nowrap;cursor:pointer}