/* Outfit — a fonte da marca Moveat (secao 13 do Brand Book).
   Arquivo unico variavel (100–900), subconjunto latino, 29 KB, servido do
   proprio site: a CSP fechou em script-src 'self' na v119 e a marca pede
   fonte hospedada junto, sem CDN. Licenca SIL OFL, em fontes/OFL.txt.
   So TITULO usa Outfit; o texto de interface continua na fonte do sistema. */
@font-face{
  font-family:'Outfit';
  src:url('fontes/Outfit-latino.woff2') format('woff2-variations'),
      url('fontes/Outfit-latino.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* =====================================================================
   Moveat — design system
   Verde Impulso #12B76A · Lima #C8F04A · Grafite #0C1618
   ===================================================================== */
:root{
  --ink:#0C1618; --ink-2:#3D4F52; --ink-3:#5E7073;
  /* v159 (23/09): --line-2 era #F0F4F3, uma sexta variacao de cinza-esverdeado a 0,8%
     de luminancia da Nevoa. Passou a ser a Nevoa (secao 12); a diferenca nao
     e visivel e some uma cor de fora da paleta. --green-b e a borda das areas
     em Verde Nevoa, que estava escrita a mao em sete lugares (#C9EFDD) e num
     oitavo com outro valor (#C9E7DA). */
  --line:#E3EAE8; --line-2:#EFF3F2; --green-b:#C9EFDD;
  --surface:#FFFFFF; --bg:#EFF3F2;
  --green:#12B76A; --green-d:#0B7A4B; --green-l:#E7F8F0;
  --lima:#C8F04A; --coral:#FF6B4A; --coral-l:#FFEFEA; --amber:#F5A524; --blue:#2E5BFF;
  /* Estados. O Coral acima e cor de MARCA (comida, comunidade) e nunca
     significa erro — regra da secao 12 do Brand Book. Erro e o vermelho.

     Sao DOIS vermelhos, e a diferenca nao e de gosto, e de contraste. A
     secao 12 exige 4,5:1 e prende texto pequeno a Grafite, Grafite 2, Cinza,
     Verde Profundo ou branco sobre Grafite:

       --erro    #E5484D  o vermelho do Brand Book. Sobre branco da 3,91:1, e
                          branco sobre ele da os mesmos 3,91:1 — REPROVA em
                          texto pequeno e reprova com texto branco em cima.
                          Serve para preenchimento sem texto, borda, icone e
                          numero de 24px para cima, onde 3:1 basta.
       --erro-d  #C4262B  o mesmo vermelho escurecido, para TEXTO pequeno e
                          para preenchimento que leva texto branco: 5,74:1
                          sobre branco, 5,13:1 sobre a Nevoa, 5,74:1 do branco
                          sobre ele. Passa nos tres casos.

     `--red` e o nome antigo, e continua valendo apontando para o ESCURO: todo
     uso dele que existia no app e no painel era texto pequeno (contador da
     triagem, `.tiny` em vermelho, `.pa-erro`, `table.pa .alerta`) ou
     preenchimento com texto branco (balao do sino, botao de bloquear,
     `.pa-idade.tarde`) — casos que pediam o escuro. Assim as vinte ocorrencias
     ganharam contraste sem uma linha de mudanca em cada tela. Codigo novo
     escreve --erro ou --erro-d, nunca --red.

     --coral-l e o Coral-nevoa da secao 12, fundo suave de nutricao e
     comunidade; faltava na folha. */
  --erro:#E5484D; --erro-d:#C4262B; --red:var(--erro-d);
  /* Tres tokens que o app inventava tela por tela, cada um com um valor
     diferente para o mesmo papel. Nomeados aqui, com o contraste medido:

       --nevoa-2     texto secundario SOBRE o Grafite. Havia dez valores
                     diferentes fazendo isso (#9FB4B2 em 33 lugares, #B9CBC9,
                     #A9C0BD, #7E9694, #D8E8E5, #A9BDBA, #DDE7E5, #EEDCDC,
                     #5E7472). Sobre Grafite da 8,43:1; o #5E7472 que ele
                     substitui dava 3,69:1 e reprovava.
       --sobre-verde texto e icone SOBRE o Verde Impulso, 6,29:1. O app ja
                     usava este valor; o Brand Book nao registrava a decisao,
                     e branco sobre Verde Impulso daria 2,62:1.
       --erro-l      fundo suave de erro, como --green-l e --coral-l. Com
                     --erro-d em cima da 5,06:1. Existe para o selo e o cartao
                     de erro nao caírem no Coral, que nunca significa erro.

     Sao evolucao da secao 12, nao gosto: resolvem papel documentado que a
     paleta nao cobria. Entram no Brand Book como alteracao datada. */
  --nevoa-2:#9FB4B2; --sobre-verde:#04241A; --erro-l:#FFEDE8;
  /* Ambar: o mesmo buraco que o vermelho tinha. A paleta trazia so --amber
     (#F5A524), que sobre branco da 2,04:1 — serve de borda, icone e luz, nunca
     de texto. Sem token para texto nem para fundo, o app inventou oito valores:
     #8A5A00, #8A6100 e #7A5200 para texto; #FFF4E0, #FFF8E8, #FFF9EC, #FFF3D6
     e #FFF7E6 para fundo. Ficaram os dois mais usados, com contraste medido:

       --amber-d  #8A5A00  texto ambar. 5,93:1 sobre branco, 5,44:1 sobre
                           --amber-l, 5,30:1 sobre a Nevoa.
       --amber-l  #FFF4E0  fundo de atencao, como --green-l, --coral-l e
                           --erro-l. Grafite sobre ele da 16,85:1.

     A regra e a mesma das outras familias: a cor base (--amber) e borda,
     icone e preenchimento sem texto; -d e texto; -l e fundo. --amber-d sobre
     --amber da 2,90:1 e reprova — por isso o contador de "Precisa de voce",
     que e preenchido de --amber, leva Grafite. */
  --amber-d:#8A5A00; --amber-l:#FFF4E0;
  --r:16px; --r-s:10px;
  --font-titulo:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{height:100%;overscroll-behavior-y:none}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:15px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
/* v149 (MOB-005 2b): era `height:100dvh`. No iPhone o teclado NAO encolhe o
   layout — o 100dvh continua valendo a tela inteira, e o compositor do chat e
   a .fab-bar, que vivem no fim do .app, ficam ATRAS do teclado. A folha ja
   estava consertada desde a v120 (usa --tela-util); o contêiner do app nao.
   `--tela-util` e o visualViewport.height, mantido pelo ui.js — e o unico
   numero que diz quanto da tela a pessoa REALMENTE ve com o teclado aberto.
   O 100dvh fica de reserva para antes de o ui.js rodar. */
.app{height:var(--tela-util, 100dvh);display:flex;flex-direction:column;max-width:520px;margin:0 auto;background:var(--bg);position:relative;overflow:hidden}
@media(min-width:521px){.app{box-shadow:0 0 0 1px var(--line)}}
.view{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-top:var(--safe-t);min-height:0}
.view>div:only-child{min-height:100%}
.view::-webkit-scrollbar{width:0}

/* ---------- tipografia ---------- */
.h1{font-family:var(--font-titulo);font-size:25px;font-weight:800;letter-spacing:-.7px;line-height:1.2}
.h2{font-family:var(--font-titulo);font-size:16.5px;font-weight:750;letter-spacing:-.3px}
.h3{font-family:var(--font-titulo);font-size:13.5px;font-weight:700}
.sub{font-size:13px;color:var(--ink-3);line-height:1.5}
.tiny{font-size:11.5px;color:var(--ink-3);line-height:1.45}
.mono{font-variant-numeric:tabular-nums}
.mut{color:var(--ink-3)}
.cap1{text-transform:none}
.cap1::first-letter{text-transform:uppercase}
.ok{color:var(--green-d)}

/* ---------- layout ---------- */
.pad{padding:0 18px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 18px 12px}
.sec{margin-top:20px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.sec-h a,.link{font-size:12px;color:var(--green-d);font-weight:700;text-decoration:none;cursor:pointer}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.row::-webkit-scrollbar{display:none}
.spacer{height:22px}
.flex{display:flex;align-items:center;gap:10px}
.f1{flex:1;min-width:0}

/* ---------- componentes ---------- */
.card{background:var(--surface);border-radius:var(--r);border:1px solid var(--line);padding:14px}
.card.tap{cursor:pointer;transition:transform .08s}
.card.tap:active{transform:scale(.99)}
.card.sel{border-color:var(--green);background:var(--green-l)}
/* Grafite liso. Ate a v149 era degrade do Grafite para #1B3A34, cor fora da
   paleta da secao 12; o fundo escuro da marca e o Grafite, sem segunda cor. */
.card.dark{background:var(--ink);border:none;color:#fff}
.card.dark .tiny,.card.dark .sub{color:var(--nevoa-2)}
.divider{height:1px;background:var(--line);margin:13px 0}
.card.dark .divider{background:rgba(255,255,255,.13)}
.icobtn{width:36px;height:36px;border-radius:11px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:15px;cursor:pointer;flex:none}
.btn{display:block;width:100%;text-align:center;background:var(--ink);color:#fff;border:none;border-radius:13px;padding:15px;font-size:14.5px;font-weight:700;cursor:pointer;letter-spacing:-.2px}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.45;cursor:default}
.btn.g{background:var(--green);color:var(--sobre-verde)}
.btn.o{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.sm{padding:11px;font-size:13px;border-radius:11px}
.btn.dk{color:#fff;border-color:rgba(255,255,255,.22)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:99px;background:var(--surface);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap;user-select:none}
/* v153: chip ativo em Verde Nevoa (Brand Book, secao 12: "Verde Nevoa — card
   selecionado, faixa de sucesso, chip ativo"). Era Grafite cheio. */
.chip.on{background:var(--green-l);color:var(--sobre-verde);border-color:var(--green-d)}
/* filtro ja aplicado, que se tira com um toque: neutro, com o X em Cinza */
.chip.tira{background:transparent;border:1.5px solid var(--line);color:var(--ink-2)}
.chip.tira svg{color:var(--ink-3)}
/* o ANEL (secao 16): moldura de avatar, borda Verde Impulso de 2 px */
.anel{display:inline-grid;place-items:center;flex:none;padding:2px;border:2px solid var(--green);border-radius:50%;align-self:flex-start}
.chip.gh{background:var(--green-l);color:var(--green-d);border-color:var(--green-b)}
.chip.sm{padding:4px 9px;font-size:10.5px}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:99px;background:var(--green-l);color:var(--green-d)}
.badge.a{background:var(--amber-l);color:var(--amber-d)}
.badge.c{background:var(--erro-l);color:var(--erro-d)}
/* v157: Lima nunca e texto (Brand Book, secao 12). A etiqueta dos cartoes
   escuros ("PROXIMA SESSAO", "HOJE", "ATIVO") escrevia em Lima; agora e branca
   sobre um vidro claro. O Lima do cartao escuro fica so na barra de progresso
   — um detalhe por tela. O nome da classe ficou para nao mexer em sete telas. */
.badge.lima{background:rgba(255,255,255,.12);color:#fff}
/* v159 (23/09): a cor das iniciais vem junto do fundo (ui.js), medida uma a uma */
.av{border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;letter-spacing:-.5px}
/* v157: estrela de nota em Grafite. Ambar e a cor de atencao/pendencia. */
.stars{color:var(--ink);font-size:12px;letter-spacing:-1px}
.bar{height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--green);border-radius:99px;transition:width .3s}
.card.dark .bar{background:rgba(255,255,255,.14)}
.card.dark .bar>i{background:var(--lima)}
.warn{background:var(--amber-l);border-color:var(--amber)}
.warn .h3,.warn .tiny{color:var(--amber-d)}

/* ---------- formulário ---------- */
.fld{width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:13px;padding:14px;font-size:15px;outline:none;-webkit-appearance:none}
.fld::placeholder{color:var(--ink-3);opacity:1}
.fld:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-l)}
.lbl{font-size:11.5px;font-weight:800;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px;display:block}
.fgroup{margin-bottom:13px}
.num{width:100%;background:var(--line-2);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:9px 4px;text-align:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;outline:none}
.num::placeholder{color:var(--ink-3);opacity:1}
.num:focus{border-color:var(--green);background:var(--surface)}
.seg{display:flex;gap:3px;background:var(--line-2);border:1px solid var(--line);border-radius:11px;padding:3px}
.seg>div{flex:1;text-align:center;padding:8px 4px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;color:var(--ink-3)}
.seg>div.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(12,22,24,.1)}
/* v156: resposta de sim ou nao — dois botoes de 44 px, o escolhido em Verde
   Nevoa com borda Verde Profundo (o mesmo "ativo" dos chips). Continua sendo
   .seg > div, entao a logica e as provas que ja existem nao mudam. */
.seg.resp{background:none;border:none;padding:0;gap:10px}
.seg.resp>div{min-height:44px;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--ink);font-size:15px;font-weight:500}
.seg.resp>div.on{background:var(--green-l);border-color:var(--green-d);color:var(--sobre-verde);font-weight:650;box-shadow:none}
.sw{width:44px;height:26px;border-radius:99px;background:var(--line);position:relative;cursor:pointer;flex:none;transition:.18s}
.sw.on{background:var(--green)}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw.on::after{left:21px}

/* ---------- barra inferior ---------- */
.tabbar{flex:none;background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding:9px 4px calc(9px + var(--safe-b))}
/* v152: icone de traco de 22 px no lugar do emoji; rotulo de 9,5 para 11 px
   em Grafite 2 (Cinza abaixo de 12 px nao passa na marca, secao 12). A aba
   ativa fica em Verde Profundo, icone e rotulo (secao 14). */
.tabbar button{all:unset;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--ink-2);cursor:pointer;padding:2px 0}
.tabbar button.on{color:var(--green-d);font-weight:700}
.tabbar .ic{line-height:0}

/* ---------- toast e sheet ---------- */
.toast{position:fixed;left:50%;bottom:calc(84px + var(--safe-b));transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:12px;font-size:13.5px;font-weight:600;z-index:200;max-width:88%;text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,.28);animation:up .2s ease-out}
.toast.err{background:var(--erro-d)}
/* v157: o aviso de erro leva o icone de erro, como no desenho */
.toast svg{vertical-align:-3px;margin-right:6px}
/* campo recusado: borda Vermelho de erro (secao 12) */
.fld[aria-invalid="true"]{border-color:var(--erro);box-shadow:0 0 0 3px var(--erro-l)}
@keyframes up{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
/* v120: a folha se apoia no fim do que a pessoa VE, nao no fim da tela.
   Sem esta linha, com o teclado aberto a folha continuava ancorada
   embaixo dele - encolher a altura nao adiantava, porque o fim dela
   ficava fora de vista. */
.sheet-wrap{position:fixed;left:0;right:0;top:0;height:var(--tela-util, 100dvh);z-index:180;display:flex;align-items:flex-end;justify-content:center}
.sheet-bg{position:absolute;inset:0;background:rgba(12,22,24,.45);animation:fade .18s}
.sheet{position:relative;width:100%;max-width:520px;background:var(--bg);border-radius:22px 22px 0 0;padding:8px 18px calc(22px + var(--safe-b));
  /* v120: a altura vem do que a pessoa REALMENTE ve. Com o teclado aberto
     a folha encolhe e rola, em vez de esconder o botao embaixo dele.
     `--tela-util` e mantida pelo ui.js a partir do visualViewport; o 86dvh
     fica como reserva para navegador que nao tem visualViewport. */
  max-height:calc(var(--tela-util, 86dvh) * .86);overflow-y:auto;animation:slide .22s cubic-bezier(.2,.8,.3,1)}
.sheet::before{content:'';display:block;width:38px;height:4px;border-radius:99px;background:var(--line);margin:6px auto 14px}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slide{from{transform:translateY(100%)}to{transform:translateY(0)}}


/* =====================================================================
   v120 (item 17 da fiscalizacao) — CELULAR: zoom sozinho e alvo de toque
   =====================================================================

   1. FONTE DOS CAMPOS. O iPhone da ZOOM sozinho em qualquer campo com
      fonte menor que 16px, e a tela inteira salta no momento em que a
      pessoa toca para digitar. Medi antes de mexer: os 17 campos do
      aplicativo estavam entre 14px e 15px - ou seja, TODOS.
      16px nao e escolha de estilo: e o limite que o Safari usa.

   2. ALVO DE TOQUE. 44x44 e o minimo que a Apple e a WCAG pedem para um
      controle. Medi: 134 de 176 alvos estavam abaixo.
      Onde aumentar o controle mudaria o desenho do aplicativo (os chips,
      os botoes redondos, a barra de abas), a area de toque cresce por
      FORA, com uma camada invisivel. O que voce ve continua igual; o que
      o dedo acerta e que fica maior.
      Link dentro de frase ("como ordenamos") NAO entra: a propria regra
      isenta link em linha de texto, e engorda-lo quebraria o paragrafo.
   ===================================================================== */
input, select, textarea, .fld, .num { font-size: 16px; }

/* altura minima de dedo nos controles que ja ocupam largura suficiente */
.btn, .card.tap, .card[data-go], .fld, .num, .grid2 > .card { min-height: 44px; }

/* a caixinha de carga/repeticao do treino: mesma largura de antes, com a
   fonte que o iPhone aceita sem dar zoom */
.num { padding: 7px 2px; letter-spacing: -.4px; }

/* area de toque por fora, sem mexer no desenho */
.chip, .icobtn, .btn.sm, .seg > div, .tabbar button { position: relative; }
.chip::after, .icobtn::after, .btn.sm::after, .seg > div::after, .tabbar button::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  min-width: 44px; min-height: 44px;
}
/* o segmento e a aba ocupam a largura toda: so a altura precisa crescer */
.seg > div::after, .tabbar button::after { min-width: 0; }

/* ===== v162 — OS SEIS QUE A REGRA ACIMA NAO ALCANCAVA ====================

   A regra de cima nasceu na v150 e resolve os controles COM NOME: chip,
   icobtn, btn.sm, segmento, aba, link, cabecalho de secao. Em 24/09 a
   prova `teste-MARCA-401` mediu a area sensivel de verdade (a caixa do
   pseudo-elemento, conferida com `elementFromPoint`) e sobraram 14
   controles em seis familias — todos os que nao tem classe propria e por
   isso nunca entraram na lista:

     · `.tap` que nao e cartao: as sete linhas do menu de Conta do
       profissional, 41 a 42 px — faltavam 2 px;
     · a estrela da avaliacao (span sem classe, 27x30);
     · o `✕` de remover em Conta do profissional, 13x18 — o menor
       controle do aplicativo inteiro;
     · o `○` de marcar refeicao, 26x26;
     · a linha "Ver substituicoes" (`.tiny` SEM data-go, 291x17);
     · a caixa de marcar nativa da triagem e da seguranca (20x20 e 13x13).

   As cinco primeiras entram aqui, pelo gancho que o proprio aplicativo
   usa para dizer "isto e clicavel": `data-act` e `data-go`. Mesma tecnica
   de sempre — area por fora, desenho intacto.

   A SEXTA NAO ENTRA, e e de proposito. `input` e elemento substituido: o
   navegador nao desenha `::after` nele de forma confiavel, e crescer a
   propria caixa mudaria o desenho da caixa de marcar. O conserto certo e
   no HTML — a etiqueta ao lado vira o alvo —, e isso e trabalho do
   desenvolvedor, nao uma linha de folha de estilo. Fica registrado como
   item proprio para nao se perder. */
.tap { min-height: 44px; }
[role="button"], [data-act], [data-go] { position: relative; }
[role="button"]::after, [data-act]::after, [data-go]::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%; min-width: 44px; min-height: 44px;
}

/* ===== v176 — O FUNDO DAS FOLHAS (A2 da auditoria de UX v175) ==========

   A regra de cima pega TODO `[data-act]` — e o fundo escurecido da folha
   tambem tem um: `<div class="sheet-bg" data-act="fechar-sheet">`, e e
   por ele que o toque fora fecha a folha. `[data-act]` e `.sheet-bg`
   pesam igual, a regra que vem depois vence, e a daqui vem depois da da
   linha 238. O `position: absolute; inset: 0` do fundo virou
   `position: relative` com `inset: 0`, sem conteudo: um retangulo de
   0 x 0. Desde a v162, em todas as folhas do aplicativo, a tela de tras
   nao escurecia e o toque fora nao fechava nada.

   Por que uma linha aqui embaixo, e nao um `:not(.sheet-bg)` na regra de
   cima: o `:not()` sobe o peso daquela regra para o de duas classes, e ela
   passaria a vencer tambem as regras de UMA classe que vem depois dela —
   hoje nenhuma colide, mas qualquer elemento posicionado que ganhasse um
   `data-act` amanha cairia na mesma armadilha. Esta linha so mexe no
   fundo. Os dois nomes juntos pesam mais que `[data-act]` sozinho, e nao
   dependem mais da ordem do arquivo.

   O `::after` sai porque a area de toque de 44 px e para controle pequeno;
   o fundo ja e a tela inteira.

   Trancado pelo `teste-UX-405`: o fundo cobre a tela, e o toque fora fecha. */
.sheet-wrap > .sheet-bg { position: absolute; }
.sheet-wrap > .sheet-bg::after { content: none; }

/* As cinco estrelas da avaliacao ficam LADO A LADO, a 27 px uma da outra.
   Crescer a area de cada uma para 44 px de largura faria a estrela 2 cobrir
   a metade direita da estrela 1 — e dar nota 1 viraria sorte. Aqui a area
   cresce so na altura, e a largura vem de espaco de verdade entre elas:
   9 px de cada lado levam cada estrela a 45 px sem encostar na vizinha.
   As cinco somam 225 px e cabem folgadas nos 390 px do celular. */
[data-nota] { padding: 0 9px; }

/* acao de cabecalho de secao ("Ver todas (5)") e linha inteira tocavel
   ("Ver agenda completa ›"): sao controles, nao link dentro de frase */
/* `.link` tambem entra: mesmo quando aparece no meio de uma frase, a camada
   invisivel so cresce sobre texto que nao e tocavel - nao rouba toque de
   ninguem. O unico caso em que atrapalharia seria dois links em linhas
   coladas, que o aplicativo nao tem. */
.sec-h a, .tiny[data-go], .link { position: relative; }
.sec-h a::after, .tiny[data-go]::after, .link::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%; min-width: 44px; min-height: 44px;
}

/* ---------- estados ---------- */
.empty{text-align:center;padding:38px 24px}
.empty .e{font-size:36px}
.empty .h2{margin-top:12px}
.empty .sub{margin-top:6px}
.skel{background:linear-gradient(90deg,var(--line-2) 25%,var(--line) 37%,var(--line-2) 63%);background-size:400% 100%;animation:sh 1.3s infinite;border-radius:10px}
@keyframes sh{from{background-position:100% 0}to{background-position:0 0}}
.banner{padding:9px 18px;font-size:11.5px;font-weight:700;text-align:center;background:var(--amber-l);color:var(--amber-d)}
.fab-bar{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:12px 18px calc(12px + var(--safe-b));margin:18px -18px 0;display:flex;gap:9px}

/* o preenchimento automático do navegador não pode apagar o texto */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--surface) inset;
  caret-color:var(--ink)}

/* A sessao que veio de um lembrete (atualizacao 60). O anel some sozinho
   depois de alguns segundos: ele serve para os olhos acharem a linha, e
   deixar aceso para sempre vira ruido na proxima vez que a tela abrir. */
.card.destacada{
  border-color:var(--green);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--green) 35%, transparent);
  animation:apagaDestaque 6s ease-out forwards;
}
@keyframes apagaDestaque{
  0%,55%{box-shadow:0 0 0 2px color-mix(in srgb, var(--green) 35%, transparent)}
  100%{box-shadow:0 0 0 0 transparent}
}
@media (prefers-reduced-motion:reduce){
  .card.destacada{animation:none}
}

/* ====================== v141 — explicação fechada ======================
   Decisão 6 de 20/09: todo bloco que é SÓ explicação nasce fechado, atrás
   de um ícone de informação. Quem quer entender, toca; quem já sabe, não
   tropeça.

   A exceção não é negociável e está escrita em DECISOES-20-09-2026.md:
   consentimento, aviso de risco, regra de dinheiro e texto de lei ficam
   abertos. Exigir um toque para ver a regra que se está aceitando
   enfraquece o consentimento, e o parecer jurídico é explícito em dizer
   que tela, termo e prática precisam coincidir.

   É <details> puro, sem JavaScript: abre e fecha mesmo se algum script da
   página falhar, e o teclado e o leitor de tela já sabem operar. */
details.expl { margin-top: 8px }
details.expl > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; line-height: 1.4; color: var(--ink-3); padding: 3px 0;
}
details.expl > summary::-webkit-details-marker { display: none }
details.expl > summary::before {
  content: 'i'; flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--line); display: inline-flex; align-items: center;
  justify-content: center; font-size: 10px; font-weight: 700; font-style: italic;
}
details.expl[open] > summary { color: var(--ink-2, var(--ink-3)) }
/* v144: a variante `sep` fecha o rodape de um cartao — uma linha fina
   separando o conteudo do cartao do bloco que abre. Usada no cartao da
   sessao, onde o historico virou rodape em vez de um segundo cartao. */
details.expl.sep { border-top: 1px solid var(--line-2); margin-top: 11px; padding-top: 9px }

details.expl > .corpo {
  font-size: 11.5px; line-height: 1.55; color: var(--ink-3);
  margin-top: 7px; padding-left: 21px;
}

/* o cartão de pacotes agrupados (decisão 5) usa o mesmo mecanismo */
details.grupo-pacotes > summary::-webkit-details-marker { display: none }
details.grupo-pacotes[open] .seta-det { transform: rotate(90deg) }
.seta-det { display: inline-block; transition: transform .15s }

/* ============ v145 — "Suas sessões" por profissional, em calendário ======
   Achado do Delson em 20/09, depois da v144: "ainda está poluído".

   A v144 já tinha juntado os dois cartões num só. O que sobrava era a LISTA:
   uma fila reta de cartões, um por sessão, misturando o que vai acontecer
   com o que já passou e com o que foi desmarcado — um defeito que só piora
   com o tempo, porque a fila só cresce.

   Agora a tela é uma lista de PESSOAS dentro de três seções (Próximas,
   Concluídas, Canceladas). Cada pessoa abre o próprio calendário: só os dias
   que têm sessão. Em repouso, a tela tem cinco ou seis linhas.

   É <details> puro, como a decisão 6: abre e fecha sem JavaScript, e o
   teclado e o leitor de tela já sabem operar. */
.sech{display:flex;align-items:center;gap:7px;margin-bottom:10px}
/* nome proprio: o painel administrativo ja tem um `.cnt` (`.pa-sec > h2 .cnt`)
   e admin.html carrega os dois arquivos. Reaproveitar o nome mudaria o visual
   de uma tela que nao esta em questao. */
.cnt-sec{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
     border-radius:99px;background:var(--line);color:var(--ink-2);font-size:10.5px;font-weight:800}

.grupo-sessoes{background:var(--surface);border-radius:var(--r);border:1px solid var(--line);
               overflow:hidden;margin-bottom:9px}
.grupo-sessoes > summary{list-style:none;cursor:pointer}
.grupo-sessoes > summary::-webkit-details-marker{display:none}
.grupo-sessoes[open] .seta-det{transform:rotate(90deg)}
.prof-linha{display:flex;gap:11px;align-items:center;padding:11px 13px}

/* o calendário de dentro */
.mes-cal{font-family:var(--font-titulo);font-size:10.5px;font-weight:800;letter-spacing:.6px;
         color:var(--ink-3);padding:9px 13px 4px;border-top:1px solid var(--line-2);
         text-transform:uppercase}
.dia-cal{display:flex;gap:11px;padding:9px 13px;border-top:1px solid var(--line-2)}
/* v220 (print do dono, 08/10/2026): com "o que aconteceu" aberto a linha cresce e o selo da direita
   (AGUARDANDO, CONFIRME, FEITA...) esticava junto, virando uma pilula da altura da linha. */
.dia-cal > .badge, .dia-cal > .tiny{align-self:flex-start}
.datac{flex:none;width:38px;text-align:center}
.datac .d{font-family:var(--font-titulo);font-size:17px;font-weight:800;line-height:1}
.datac .s{font-size:9.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.ocor{display:grid;gap:3px;min-width:0}
.oc-h{font-size:12.5px;font-weight:700}
.acoes{display:flex;gap:10px;margin-top:3px}

/* o mesmo destaque do lembrete (#/sessoes/<id>), agora na linha do dia */
.dia-cal.destacada{
  border-radius:10px;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--green) 35%, transparent);
  animation:apagaDestaque 6s ease-out forwards;
}
@media (prefers-reduced-motion:reduce){ .dia-cal.destacada{animation:none} }

/* "Precisa de você": fica ABERTO, fora das duas dobras. Sessão esperando
   confirmação tem prazo — se ninguém responde, o repasse é liberado sozinho
   em 3 dias. Pela decisão 6, regra de dinheiro não se esconde atrás de
   ícone; e esconder atrás de DOIS toques seria pior ainda. */
.card.alerta-acao{background:var(--amber-l);border-color:var(--amber)}
/* o rodapé do grupo, quando o passado não cabe todo dentro dele. O contador
   do cabeçalho continua dizendo o total de verdade; esta linha diz quantas
   ficaram de fora e leva ao histórico, que é a tela feita para isso. */
.mais-antigas{display:flex;align-items:center;justify-content:space-between;gap:10px;
              padding:9px 13px;border-top:1px solid var(--line-2)}

/* ===== v181 — GRUPOS QUE DOBRAM (M11 da auditoria de UX v175) ==========
   `#/proconta` em tres grupos. <details> e nativo: abre e fecha com toque,
   com Enter e com espaco, e o leitor de tela anuncia "recolhido/expandido"
   sem uma linha de JavaScript. O triangulo do navegador sai; no lugar, a
   seta do app. */
.grupo { border-top: 1px solid var(--line); margin-top: 16px; }
.grupo > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; min-height: 48px; padding: 12px 0; }
.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary::after { content: '›'; font-size: 20px; color: var(--ink-3); transform: rotate(90deg);
  transition: transform .15s; flex: none; }
.grupo[open] > summary::after { transform: rotate(-90deg); }
/* v193 (auditoria de UX da v191, B9 / UX-015): com a frase "faltam a
   descricao, as especialidades e a formacao" dividindo a linha, o titulo
   virava "O que / o / aluno / ve" numa coluna estreita. Agora o titulo e a
   seta ficam na primeira linha e o que falta desce para a linha de baixo. */
.grupo > summary { flex-wrap: wrap; row-gap: 2px; }
.grupo > summary .h2 { flex: 1; order: 1; }
.grupo > summary::after { order: 2; }
.grupo-st { color: var(--ink-3); order: 3; flex-basis: 100%; text-align: left; }
.grupo-st.falta { color: var(--amber-d); font-weight: 700; }
.grupo > .sec:first-of-type { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .grupo > summary::after { transition: none; } }

/* v183 (B1): o "Desfazer" dentro do aviso. Branco, sublinhado e em negrito
   sobre o Grafite do aviso — Lima seria mais chamativo, mas Lima nunca e
   texto (Brand Book 12). */
.toast .toast-desfazer { margin-left: 10px; background: none; border: 0; color: #fff;
  font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; padding: 10px 4px; min-height: 44px; }

/* ===== v184 — ACESSIBILIDADE ESTRUTURAL (M9 da auditoria de UX v175) =====
   Rotulo visivel sobre o campo, no fundo Grafite da entrada (Nevoa-2 sobre
   Grafite: 8,4:1). O erro fica colado no campo: Vermelho de erro sobre o
   Grafite da 4,69:1; sobre fundo claro vai o vermelho escurecido (--erro-d,
   5,06:1 sobre --erro-l, mais ainda sobre branco). */
.campo-escuro > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--nevoa-2); margin: 0 0 5px; }
.erro-campo { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; line-height: 1.45; color: var(--erro-d); }
.campo-escuro .erro-campo { color: var(--erro); }
/* a folha recebe o foco ao abrir (para o leitor anunciar a janela); o
   contorno de foco ficaria em volta da folha inteira */
.sheet:focus { outline: none; }
/* texto de apoio e opcao nao escolhida, no Grafite da entrada: eram o cinza
   de fundo claro (--ink-3) sobre o escuro, quase invisiveis */
.campo-escuro .tiny, #fLogin .seg > div:not(.on) { color: var(--nevoa-2); }

/* v187 (B5): o ponto sob o dia que tem horario livre. Verde Profundo sobre
   branco: 5,4:1 (acima dos 3:1 de elemento grafico). */
.ponto-livre { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green-d); margin-top: 4px; }

/* ===== v188 — CONFIRMAR E AVALIAR NO MESMO GESTO =========================
   A trilha (a curva do check) se desenha uma vez ao confirmar a sessao
   (Brand Book 17: 150–400 ms, sem confete). Com "reduzir movimento", ela
   aparece pronta. As estrelas sao botoes de 44 px: a vazia em Cinza (5,20:1),
   a cheia em Verde Profundo (5,40:1) — as mesmas da v172 no perfil. */
.trilha-conclusao path { stroke: var(--green); stroke-dasharray: 200; stroke-dashoffset: 200;
  animation: trilha-desenha 400ms ease-out 120ms forwards; }
@keyframes trilha-desenha { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .trilha-conclusao path { animation: none; stroke-dashoffset: 0; } }
.estrela { min-width: 44px; min-height: 44px; background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 34px; line-height: 1; color: var(--ink-3); }
.estrela.cheia { color: var(--green-d); }

/* ===== v193 (FLUX, profissional novo) — OS QUATRO PASSOS NUMA TELA SO ======
   O numero do passo num circulo de 20 px, contorno em Grafite: numero e
   ordem, nao check da marca (Brand Book 14 — o check nunca e caixa de
   marcar). O passo feito vira um visto de texto, no cinza de apoio. */
.passo-n { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px;
  margin-right: 7px; border-radius: 50%; border: 1.5px solid var(--ink-2); font-size: 11px;
  font-weight: 700; line-height: 1; color: var(--ink); vertical-align: -3px; font-variant-numeric: tabular-nums; }
.passo-n.feito { border-color: var(--ink-3); color: var(--ink-3); }
.passos-conf .passo-n { margin-right: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }