/* ============================================================
   PAINEL DA MUNDO — o móvel
   ------------------------------------------------------------
   O que só o painel tem: a barra do alto, a lista de clientes, o
   cabeçalho da ficha com a trilha, a fita de abas e os campos.

   Depende de marca/tokens.css e marca/sistema.css, nesta ordem.
   Cor, fonte e medida vêm de lá. Aqui não se escreve número de
   cor nenhum.
   ============================================================ */


/* ============================================================
   A FAIXA DA DEMONSTRAÇÃO
   ------------------------------------------------------------
   Terracota chapada, no alto de tudo. Quem abre um painel na
   internet acha que está vendo o painel, então esta faixa diz o
   contrário antes de qualquer outra coisa.
   ============================================================ */
.faixa-demo{background:var(--terra);color:#FFF6EE;position:relative;z-index:21}
.faixa-demo div{max-width:var(--container);margin:0 auto;padding:11px var(--gutter)}
.faixa-demo p{font-size:.9rem;line-height:1.45;max-width:76ch}
.faixa-demo b{font-weight:700}

/* ============================================================
   A PORTA
   ------------------------------------------------------------
   A primeira tela de quem ainda não entrou. Quem já autorizou uma
   vez quase nunca vê ela.
   ============================================================ */
.porta{padding:clamp(2.5rem,8vw,6rem) 0}
.porta-folha{max-width:52ch;margin:0 auto}
.porta-folha h1{
  margin-top:clamp(.8rem,2vw,1.2rem);
  font-size:clamp(1.5rem,calc(1.24rem + 1.4vw),2.15rem);
}
.porta-folha h1 em{font-style:normal;color:var(--verde-vivo)}
.porta-diz{margin:clamp(.9rem,2vw,1.2rem) 0 clamp(1.2rem,2.6vw,1.7rem);
  font-size:1rem;line-height:1.5;color:var(--tinta-70)}
.porta-recusa{
  margin-top:16px;padding:11px 13px;
  font-size:.92rem;line-height:1.45;color:var(--terra);
  background:var(--folha);border:1px solid var(--terra);
  border-left-width:3px;border-radius:2px;
}
@media(max-width:560px){.porta-folha h1 br{display:none}}

/* ============================================================
   A BARRA
   ============================================================ */
.barra{
  position:sticky;top:0;z-index:20;
  background:var(--verde);color:#F7F2E6;
  border-bottom:1.5px solid var(--fio-forte);
}
.barra-dentro{
  max-width:var(--container);margin:0 auto;padding:0 var(--gutter);
  min-height:52px;display:flex;align-items:center;gap:14px;
}
.barra-marca{color:#F7F2E6;opacity:.9}
.barra-volta{
  display:inline-flex;align-items:center;gap:8px;
  min-height:var(--alvo);margin-left:-8px;padding:0 10px;
  font-family:var(--fm);font-size:.585rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#F7F2E6;border-radius:2px;
}
/* Terracota viva sobre o verde da barra dá 3,73:1 e reprova. O
   hover então sublinha, que marca o mesmo e não mexe na cor. */
.barra-volta:hover{text-decoration:underline;text-underline-offset:3px}
.barra-volta svg{width:15px;height:15px;flex:none}
.barra .barra-volta:focus-visible{outline-color:var(--terra-viva)}

/* O recado de "salvo" e de erro. Fica na barra porque a barra
   está sempre visível, inclusive no fim de uma ficha comprida. */
.barra-recado{margin-left:auto;text-align:right;color:#F7F2E6;min-height:1em}
.barra-sair{
  flex:none;min-height:var(--alvo);padding:0 10px;margin-right:-10px;
  color:#F7F2E6;opacity:.75;border-radius:2px;
}
.barra-sair:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.barra .barra-sair:focus-visible{outline-color:var(--terra-viva)}
.barra-recado[data-tipo="erro"]{color:#FFC9A8}
@media(max-width:620px){
  .barra-marca{display:none}
  .barra-recado{margin-left:auto}
}

/* ============================================================
   A ABERTURA
   ============================================================ */
.abertura{padding:clamp(1.8rem,4vw,3rem) 0 clamp(1.1rem,2.2vw,1.6rem)}
.abertura h1{
  margin-top:clamp(.7rem,1.6vw,1rem);
  font-size:clamp(1.62rem,calc(1.3rem + 1.7vw),2.5rem);
}
.abertura h1 em{font-style:normal;color:var(--verde-vivo)}
.abertura-sub{margin-top:clamp(.7rem,1.6vw,1rem);font-size:1.02rem;line-height:1.5;color:var(--tinta-70);max-width:52ch}
.abertura--ficha h1{font-size:clamp(1.5rem,calc(1.24rem + 1.4vw),2.15rem)}
@media(max-width:560px){.abertura h1 br{display:none}}

/* ============================================================
   TELA 01 · A LISTA
   ============================================================ */
.lista-cab{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1.5px solid var(--fio-forte);
}
.lista-cab .mono-s{color:var(--tinta-70)}
.lista-cab .btn{margin-left:auto}
@media(max-width:520px){
  .lista-cab .btn{margin-left:0;width:100%}
}

.lista{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,14px)}

/* Cada médico é uma folha deitada. Clicar em qualquer lugar dela
   abre a ficha, então ela é um botão inteiro, e não um bloco com
   um link escondido dentro. */
.cliente{
  position:relative;display:block;width:100%;
  background:var(--folha);border:1px solid var(--fio-medio);border-radius:2px;
  box-shadow:var(--papel-3);
  padding:15px 44px 15px clamp(16px,2.4vw,22px);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.cliente::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--fio-terra)}
.cliente:hover{transform:translateY(-2px);box-shadow:var(--papel-1);border-color:var(--fio-forte)}
.cliente-seta{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--tinta-45);
}
.cliente:hover .cliente-seta{color:var(--terra)}

.cliente-topo{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cliente-nome{font-family:var(--fd);font-weight:700;font-size:1.08rem;letter-spacing:-.026em;line-height:1.2}
.cliente-esp{font-size:.9rem;color:var(--tinta-70)}
/* Quantas das cinco etapas estão marcadas. Fica na ponta da
   linha, sempre no mesmo lugar, para dar para varrer a coluna
   inteira de cima a baixo sem ler nome nenhum. */
.cliente-etapa{margin-left:auto;flex:none;color:var(--tinta-70);white-space:nowrap}
.cliente-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px}

/* A frase de onde travou. É a linha que decide em quem mexer
   hoje, então ela é a segunda coisa mais forte do cartão. */
.cliente-trava{
  margin-top:10px;font-size:.925rem;line-height:1.42;color:var(--tinta-70);
  display:flex;gap:8px;align-items:flex-start;
}
.cliente-trava b{color:var(--terra);font-weight:600}
.cliente-trava--ok b{color:var(--verde-vivo)}

/* As três etiquetas de estado. Sempre na mesma ordem e sempre no
   mesmo canto: é assim que se lê de relance, sem ler. */
.selos{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px;padding-top:11px;border-top:1px dashed var(--fio)}
.selo{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--fm);font-size:.495rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;line-height:1;
  border:1px solid var(--fio);border-radius:2px;padding:6px 9px;color:var(--tinta-70);
}
.selo i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--tinta-45)}
/* Cor E palavra, sempre as duas. Cor sozinha exclui quem não
   distingue verde de terracota, e some no sol do carro. */
.selo[data-e="pe"]{border-color:var(--terra-fio);color:var(--terra);background:var(--folha)}
.selo[data-e="pe"] i{background:var(--terra)}
.selo[data-e="pronto"]{border-color:var(--verde-fio);color:var(--verde-vivo);background:var(--verde-fraco)}

/* Serviço que o médico não comprou. Fica apagado de propósito: é
   a única etiqueta da tela que não está cobrando nada, e não pode
   competir com as que estão. */
.selo--fora{border-style:dashed;color:var(--tinta-70)}
.selo--fora i{background:transparent;border:1px solid var(--tinta-45)}
.selo[data-e="pronto"] i{background:var(--verde-vivo)}

/* ── O vazio ── */
.vazio h2{font-size:clamp(1.2rem,calc(1.1rem + .6vw),1.5rem);margin:9px 0 8px}
.vazio p{color:var(--tinta-70);max-width:56ch}
.vazio-botoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* ============================================================
   A JANELA DE CADASTRAR MÉDICO
   ------------------------------------------------------------
   Uma folha em cima da mesa, com o resto escurecido atrás. É o
   <dialog> do navegador, que já cuida do Esc, do clique no escuro
   e de prender o foco dentro dela.
   ============================================================ */
.janela{
  /* O margin:auto é o que centraliza a janela na tela. Ele já vem
     de graça no navegador, mas o reset do sistema.css zera a
     margem de tudo e leva esse junto. Sem ele a janela cola no
     canto de cima, à esquerda. */
  margin:auto;
  width:min(640px,calc(100vw - 2 * var(--gutter)));
  max-height:min(88vh,900px);
  padding:0;border:1px solid var(--fio-medio);border-radius:2px;
  background:var(--folha);color:var(--tinta);
  box-shadow:var(--papel-2);
}
.janela::backdrop{background:rgba(19,36,27,.55)}
.janela-forma{display:flex;flex-direction:column;max-height:inherit}

.janela-cab{padding:clamp(20px,3vw,28px) clamp(18px,3vw,28px) 0}
.janela-cab h2{margin-top:10px;font-size:clamp(1.25rem,calc(1.1rem + .8vw),1.6rem)}
.janela-diz{margin-top:8px;font-size:.95rem;line-height:1.45;color:var(--tinta-70)}

.janela-campos{
  padding:clamp(16px,2.6vw,22px) clamp(18px,3vw,28px);
  overflow-y:auto;
}

.janela-erro{
  margin:0 clamp(18px,3vw,28px);padding:10px 12px;
  font-size:.92rem;line-height:1.45;color:var(--terra);
  background:var(--folha);border:1px solid var(--terra);
  border-left-width:3px;border-radius:2px;
}

.janela-pe{
  display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;
  padding:clamp(14px,2.2vw,18px) clamp(18px,3vw,28px);
  border-top:1.5px solid var(--fio-forte);background:var(--folha-2);
}
@media(max-width:520px){
  .janela-pe .btn{flex:1 1 100%}
  .janela-pe{flex-direction:column-reverse}
}

/* ============================================================
   ESCOLHE QUANTAS QUISER
   ------------------------------------------------------------
   A caixinha de verdade fica escondida, e quem se veste é a
   etiqueta em volta. O clique e o teclado continuam sendo os do
   navegador: o <label> envolve o <input>, então tocar em qualquer
   lugar da etiqueta marca.
   ============================================================ */
.caixas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:8px}
.caixa{
  position:relative;
  display:flex;flex-direction:column;gap:3px;
  min-height:var(--alvo);padding:11px 13px;cursor:pointer;
  border:1px solid var(--fio-medio);border-radius:2px;background:var(--folha-2);
  transition:border-color .18s var(--ease),background .18s var(--ease);
}

/* A caixinha de marcar fica invisível e esticada por cima do
   cartão inteiro. Quem recebe o toque passa a ser o cartão, com o
   tamanho todo dele, em vez do quadradinho de doze pixels que o
   navegador desenha sozinho.

   Duas coisas aqui não são capricho:

     position:relative no cartão. Prende a caixinha dentro dele.
     Sem isso ela se pendura no primeiro pai posicionado, que pode
     estar em qualquer lugar da página.

     [type="checkbox"] no seletor. Ganha do .campo input, que fica
     mais abaixo neste arquivo e estica todo campo para a largura
     toda. Com a mesma força, quem vem depois ganha, e a caixinha
     esticava 286 pixels: era ela que empurrava a ficha para o
     lado no celular. */
.caixa input[type="checkbox"]{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;min-height:0;
  margin:0;padding:0;border:0;background:none;
  opacity:0;appearance:none;-webkit-appearance:none;cursor:pointer;
}
.caixa-tit{
  font-family:var(--fm);font-size:.535rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-70);
}
.caixa-diz{font-size:.85rem;line-height:1.4;color:var(--tinta-70)}
.caixa:hover{border-color:var(--fio-forte)}
.caixa--sim{background:var(--verde-fraco);border-color:var(--verde-vivo)}
.caixa--sim .caixa-tit{color:var(--verde-vivo)}
.caixa:has(input:focus-visible){outline:2.5px solid var(--terra);outline-offset:3px}

/* ============================================================
   TELA 02 · O CABEÇALHO DA FICHA
   ------------------------------------------------------------
   Uma folha só, no alto, com tudo que se lê sem editar: quem é,
   em que etapa está, o estado dos três serviços e a trava.

   Ele existe porque a primeira versão da ficha empilhava nove
   grupos de campos e o estado ficava perdido no meio deles. Ler
   de relance é o trabalho desta tela.
   ============================================================ */
.cabeco{margin-bottom:clamp(14px,2vw,20px)}

.cabeco-topo{display:flex;align-items:flex-start;gap:clamp(14px,3vw,28px)}
.cabeco-quem{min-width:0}
.cabeco-quem h1{
  margin-top:10px;
  font-size:clamp(1.5rem,calc(1.24rem + 1.4vw),2.15rem);
}
.cabeco-linha{margin-top:8px;font-size:1rem;line-height:1.45;color:var(--tinta-70)}

/* O contador de etapas, alinhado com o nome. É a resposta curta
   para "em que ponto está", e fica onde o olho já está: em cima,
   junto de quem é a pessoa. O numeral vai em Georgia, que é a
   fonte dos números de destaque da marca. */
.cabeco-contador{
  margin-left:auto;flex:none;text-align:right;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  padding-left:clamp(10px,2vw,18px);
}
.cabeco-contador b{
  font-family:var(--fs);font-weight:400;font-size:clamp(2rem,calc(1.6rem + 1.8vw),2.9rem);
  line-height:.9;color:var(--verde-vivo);
}
.cabeco-contador .mono-s{color:var(--tinta-70);white-space:nowrap}
@media(max-width:520px){
  .cabeco-topo{flex-direction:column;gap:12px}
  .cabeco-contador{margin-left:0;flex-direction:row;align-items:baseline;gap:8px;padding-left:0;text-align:left}
  .cabeco-contador b{font-size:2rem}
}

/* ── A trilha ───────────────────────────────────────────────
   Cinco marcos ligados por uma linha. A linha é o que faz o olho
   ler percurso em vez de cinco cartões soltos, e era o que
   faltava na primeira versão.

   A linha é desenhada nos passos, não num elemento à parte: cada
   passo pinta a metade que sai dele. Assim ela acompanha
   qualquer largura sem conta nenhuma.
   ─────────────────────────────────────────────────────────── */
.trilha{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  margin:clamp(18px,3vw,26px) 0 clamp(14px,2.4vw,20px);
}
.trilha-passo{position:relative;display:flex;justify-content:center}

/* Os dois pedaços de linha que ligam um marco ao vizinho. */
.trilha-passo::before,.trilha-passo::after{
  content:'';position:absolute;top:15px;height:1.5px;background:var(--fio-medio);
}
.trilha-passo::before{left:0;right:50%}
.trilha-passo::after{left:50%;right:0}
.trilha-passo:first-child::before,.trilha-passo:last-child::after{display:none}

/* Trecho já andado fica verde: a linha vira barra de progresso
   sem precisar de barra de progresso. */
.trilha-passo:has(.marco[aria-pressed="true"])::before{background:var(--verde-vivo)}
.trilha-passo:has(.marco[aria-pressed="true"]) + .trilha-passo:has(.marco[aria-pressed="true"])::before{background:var(--verde-vivo)}
.trilha-passo:has(.marco[aria-pressed="true"])::after{background:var(--verde-fio)}

.marco{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  min-height:var(--alvo);padding:0 4px;width:100%;
  background:none;
}
.marco-bola{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;flex:none;border-radius:50%;
  border:1.5px solid var(--fio-medio);background:var(--folha);
  font-family:var(--fm);font-size:.535rem;font-weight:700;letter-spacing:.06em;
  color:var(--tinta-70);
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.marco-bola svg{width:14px;height:14px}
.marco-nome{
  font-family:var(--fm);font-size:.495rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-70);text-align:center;line-height:1.3;
}
.marco:hover .marco-bola{border-color:var(--fio-forte)}
.marco[aria-pressed="true"] .marco-bola{
  background:var(--verde-vivo);border-color:var(--verde-vivo);color:#F7F2E6;
}
.marco[aria-pressed="true"] .marco-nome{color:var(--verde-vivo)}
.marco[disabled]{opacity:.5;cursor:default}

@media(max-width:600px){
  .trilha-passo::before,.trilha-passo::after{top:13px}
  .marco-bola{width:26px;height:26px}
  .marco-bola svg{width:12px;height:12px}
  .marco-nome{font-size:.45rem;letter-spacing:.06em}
}

/* ── O pé do cabeçalho: estado e trava ── */
.cabeco-pe{padding-top:clamp(13px,2vw,17px);border-top:1px dashed var(--fio-medio)}
.cabeco-selos{display:flex;gap:7px;flex-wrap:wrap}

/* A etiqueta que gira entre os três estados. Mesma cara da que
   aparece na Tela 01, de propósito: duas telas que falam do mesmo
   estado precisam desenhar ele igual. */
.selo--vivo{
  min-height:34px;padding:0 11px;cursor:pointer;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.selo--vivo:hover{border-color:var(--fio-forte);color:var(--tinta)}
.selo--vivo[disabled]{opacity:.5;cursor:default}

.cabeco-trava{margin-top:12px;font-size:.95rem;line-height:1.45;color:var(--tinta-70)}
.cabeco-trava b{color:var(--terra);font-weight:600}
.cabeco-trava--ok b{color:var(--verde-vivo)}

/* A nota da trava: uma linha discreta que só ganha moldura quando
   recebe o cursor. Ela precisa estar à mão sem competir com o
   nome do médico. */
.nota{
  width:100%;margin-top:9px;padding:9px 11px;min-height:var(--alvo);
  font-family:var(--fc);font-size:.95rem;line-height:1.45;color:var(--tinta);
  background:transparent;border:1px dashed var(--fio-medio);border-radius:2px;
  resize:vertical;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.nota::placeholder{color:var(--tinta-70)}
.nota:hover{border-color:var(--fio-forte)}
.nota:focus{background:var(--folha-2);border-style:solid;border-color:var(--terra)}

/* Quando existe trava escrita à mão, ela é A informação do pé do
   cabeçalho, e não uma nota lateral. Ganha a marca de margem em
   terracota, o mesmo sinal que a lista usa para dizer "travado". */
.nota--cheia{
  margin-top:13px;border-style:solid;border-color:var(--fio);
  border-left:3px solid var(--terra);background:var(--folha-2);
}

/* ============================================================
   TELA 02 · A FITA DE ABAS
   ------------------------------------------------------------
   Nove grupos empilhados davam quase três metros de rolagem no
   celular. Agora é um grupo por vez, e a fita diz onde estão os
   campos em branco antes de abrir.
   ============================================================ */
.abas{
  display:flex;gap:6px;overflow-x:auto;
  padding-bottom:2px;margin-bottom:clamp(12px,1.8vw,16px);
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
.abas::-webkit-scrollbar{display:none}

.aba{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  min-height:var(--alvo);padding:0 15px;scroll-snap-align:start;
  font-family:var(--fm);font-size:.55rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--fio-medio);border-radius:2px;
  background:var(--folha-2);color:var(--tinta-70);
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.aba:hover{border-color:var(--fio-forte);color:var(--tinta)}
.aba[aria-selected="true"]{
  background:var(--verde);border-color:var(--verde);color:#F7F2E6;
  box-shadow:var(--papel-3);
}

/* Quantos campos obrigatórios estão em branco lá dentro. */
.aba-falta{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  font-size:.58rem;letter-spacing:0;line-height:1;
  background:var(--terra);color:#FFF6EE;
}
.aba[aria-selected="true"] .aba-falta{background:var(--terra-viva);color:#2A1408}

/* ============================================================
   TELA 02 · OS CAMPOS
   ============================================================ */
.grupo{margin-bottom:clamp(14px,2vw,20px)}
.grade-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.8vw,18px)}
@media(max-width:700px){.grade-campos{grid-template-columns:1fr}}
/* Campo de texto longo ocupa a linha inteira: escrever horário de
   atendimento numa coluna estreita é castigo. */
.campo--longo{grid-column:1/-1}

.campo{display:flex;flex-direction:column;gap:6px}
.campo-rot{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--fm);font-size:.535rem;font-weight:600;letter-spacing:.145em;text-transform:uppercase;
  color:var(--tinta-70);
}
/* A palavra "falta", em terracota. É o que trava a entrega, e é
   a única coisa desta tela que grita. */
.falta{
  display:inline-flex;align-items:center;
  font-family:var(--fm);font-size:.475rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--terra);background:var(--folha);
  border:1px solid var(--terra);border-radius:2px;padding:3px 6px;line-height:1;
}
.campo-ajuda{font-size:.85rem;line-height:1.42;color:var(--tinta-70)}

.campo input,.campo textarea,.campo select{
  width:100%;font-family:var(--fc);font-size:1rem;line-height:1.45;color:var(--tinta);
  background:var(--folha-2);border:1px solid var(--fio-medio);border-radius:2px;
  min-height:var(--alvo);padding:11px 12px;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.campo textarea{min-height:96px;resize:vertical}
.campo select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--tinta-45) 50%),linear-gradient(135deg,var(--tinta-45) 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 2px),calc(100% - 12px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:34px;
}
.campo input:hover,.campo textarea:hover,.campo select:hover{border-color:var(--fio-forte)}
.campo input:focus,.campo textarea:focus,.campo select:focus{background:var(--folha);border-color:var(--terra)}
.campo[data-falta="sim"] input,
.campo[data-falta="sim"] textarea,
.campo[data-falta="sim"] select{border-color:var(--terra-fio);background:var(--terra-fraca)}

/* Campo com R$ colado na frente */
.campo-unidade{display:flex;align-items:stretch}
.campo-unidade span{
  display:inline-flex;align-items:center;padding:0 12px;
  font-family:var(--fm);font-size:.585rem;font-weight:700;letter-spacing:.1em;
  color:var(--tinta-70);background:var(--folha-2);
  border:1px solid var(--fio-medio);border-right:0;border-radius:2px 0 0 2px;
}
.campo-unidade input{border-radius:0 2px 2px 0}

/* ── A barra de salvar ──
   Cola no pé da tela. Numa ficha comprida, o botão de salvar no
   fim da página seria um botão que ninguém acha. */
.salvar-barra{
  position:sticky;bottom:0;z-index:15;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:clamp(14px,2vw,20px);
  padding:12px var(--gutter);
  margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);
  background:var(--folha);border-top:1.5px solid var(--fio-forte);
  box-shadow:0 -8px 20px -16px rgba(19,36,27,.5);
}
.salvar-barra .mono-s{color:var(--tinta-70)}
.salvar-barra .btn{margin-left:auto}
@media(max-width:520px){
  .salvar-barra .btn{margin-left:0;width:100%;order:-1}
}

/* ============================================================
   O RODAPÉ
   ============================================================ */
.rodape{
  margin-top:auto;padding:clamp(1.4rem,3vw,2rem) 0;
  border-top:1.5px solid var(--fio-forte);
}
.rodape .mono-s{color:var(--tinta-70)}