:root{
  --ink:#16242b; --ink-2:#48606b; --ink-3:#7d919b;
  --primary:#1f6f78; --primary-dark:#175860; --primary-soft:#e0efef;
  --bg:#f6f7f6; --surface:#fff; --border:#e2e5e3; --border-strong:#cbd1ce;
  --ok:#1f6f78; --ok-bg:#e0efef; --warn:#8a6420; --warn-bg:#f7ecd6;
  --bad:#9a3b3b; --bad-bg:#f6dcdc; --neutral:#5d6b72; --neutral-bg:#eceeed;
  --shadow:0 1px 2px rgba(22,36,43,.05), 0 4px 18px rgba(22,36,43,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;
     background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--primary-dark)}
button,input,select,textarea{font-family:inherit;font-size:inherit}
button{cursor:pointer}

.faixa-teste{background:#8a6420;color:#fff;font-size:12px;padding:6px 16px;text-align:center;letter-spacing:.02em}

/* ---- login ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.card-login{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);
            width:100%;max-width:400px;padding:36px 34px 28px}
/* AS DUAS MARCAS FICAM LADO A LADO, SEMPRE.
   O flex-wrap estava aqui e foi tirado: numa barra de 244px o logo caía
   para a linha de baixo, e um logo embaixo do nome deixa de ser "a
   clínica onde o VIVIT está sendo usado" e vira um segundo título. Sem
   quebra, os dois disputam a mesma linha — e quem cede é o logo, que
   encolhe até caber. */
.brand{display:flex;align-items:center;gap:9px;margin-bottom:24px;flex-wrap:nowrap;min-width:0}
.brand .brand-t{flex:0 0 auto;min-width:0}
.mark{width:40px;height:40px;border-radius:11px;background:var(--primary);color:#fff;display:flex;
      align-items:center;justify-content:center;font-weight:700;font-size:13px;letter-spacing:.06em;flex:0 0 auto}
/* O nome do sistema — a única coisa da tela desenhada para ser lida como
   nome, e não como rótulo. Serifa clássica e letras espaçadas: VIVIT vem
   de uma inscrição latina, e é assim que uma inscrição se comporta. A
   fonte é a do próprio computador — nada é baixado de fora, então ela
   aparece na hora e não deixa o nome piscar enquanto carrega. */
.brand-t b{display:block;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,
      "Times New Roman",serif;font-size:26px;font-weight:400;letter-spacing:.22em;
      line-height:1.15;color:var(--ink);text-indent:.22em}
/* Na barra o VIVIT respira um pouco menos: são 244px, e o espaçamento de
   inscrição latina come largura que o logo ao lado precisa. Ele continua
   sendo o maior elemento da barra — que é o ponto. */
aside .brand-t b{font-size:24px;font-weight:400;line-height:1.15;letter-spacing:.15em;
      text-transform:none;color:var(--ink);white-space:nowrap;text-indent:.15em}
.brand-t span{font-size:11.5px;color:var(--ink-3)}
h1{font-size:19px;margin:0 0 4px;font-weight:600;letter-spacing:-.01em}
.sub{color:var(--ink-3);font-size:13px;margin:0 0 20px}
.foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);font-size:12px;color:var(--ink-3)}

/* ---- formulários ---- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:9px 11px;border:1px solid var(--border-strong);
     border-radius:8px;background:#fff;color:var(--ink)}
.field input[type=checkbox],.field input[type=radio]{width:auto;margin:0 7px 0 0}
.field textarea{min-height:74px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--primary-soft);border-color:var(--primary)}

/* O EXEMPLO EM CINZA NÃO PODE PARECER PREENCHIDO.
   Relatado por quem cadastra: olhou o campo, viu texto, e concluiu que já
   tinha preenchido. O cinza padrão do navegador é escuro demais e tem a
   mesma forma de letra do que se digita.
   Duas mudanças, e a segunda é a que resolve: o tom fica mais claro, e a
   letra fica ITÁLICA. Dado digitado nunca sai em itálico neste sistema —
   então itálico passa a querer dizer, sem precisar de legenda, "isto é
   exemplo, não é o seu dado". */
.field input::placeholder,.field textarea::placeholder,
.inp::placeholder,input::placeholder,textarea::placeholder{
     color:#a9b6bd;font-style:italic;opacity:1}
.hint{font-size:12px;color:var(--ink-3);margin:5px 0 0}

/* ============ A FICHA COMPACTA ============

   "E acho que os campos estão muito grandes, e isso faz parecer mais
   bagunça."

   Ela tem razão, e o efeito é de acumulação: cada campo com 9px de
   respiro em cima e embaixo, mais 14px entre um e outro, mais a linha de
   ajuda — numa tela com trinta campos isso vira meia tela de ar. Um
   formulário curto ganha em respirar; um formulário longo perde, porque o
   que estava perto some da vista e a pessoa passa a rolar para comparar
   dois campos que deviam caber juntos.

   O APERTO É SÓ DESTA TELA. As outras seguem como estão: a régua boa para
   um formulário de seis campos não é a mesma de um de trinta, e mudar a
   régua do sistema inteiro por causa de uma tela seria trocar um problema
   por outros dez. */
.ficha-compacta .field{margin-bottom:9px}
.ficha-compacta .field label{font-size:12px;margin-bottom:3px}
.ficha-compacta .field input,.ficha-compacta .field select,.ficha-compacta .field textarea{
     padding:6px 9px;font-size:13px}
.ficha-compacta .field textarea{min-height:58px}
.ficha-compacta .hint{font-size:11.5px;margin:3px 0 0;line-height:1.35}
.ficha-compacta .card-b{padding-top:12px;padding-bottom:12px}
.ficha-compacta .card-h{padding-top:12px;padding-bottom:10px}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.r4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

.btn{border:1px solid transparent;border-radius:8px;padding:9px 15px;font-weight:600;background:var(--primary);
     color:#fff;text-decoration:none;display:inline-block}
.btn:hover{background:var(--primary-dark)}
.btn-block{width:100%;padding:11px;text-align:center}
.btn-ghost{background:#fff;color:var(--ink-2);border-color:var(--border-strong);font-weight:500}
.btn-ghost:hover{background:#f2f4f2}
.btn-sm{padding:6px 11px;font-size:13px}
.btn-bad{background:var(--bad)}
.btn-bad:hover{background:#7f2f2f}

/* ---- shell ---- */
.shell{display:flex;min-height:100vh}
aside{width:244px;flex:0 0 244px;background:#fff;border-right:1px solid var(--border);padding:18px 12px 14px;
      display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
/* A barra acompanha a rolagem da página, e rola sozinha só quando o menu
   for mais alto que a tela. Sem isso, quem abre uma lista de 170 linhas
   perde o menu de vista e volta ao topo só para trocar de tela. */
aside::-webkit-scrollbar{width:8px}
aside::-webkit-scrollbar-thumb{background:#e6e9e7;border-radius:8px}
/* ---- barra lateral: mais apertada, para caber sem rolar ----
   Pedido da coordenação: ver os blocos todos sem descer a barra. O que
   encolheu foi só o ESPAÇO — o corpo da letra e a área de clique de cada
   item continuam grandes o bastante para acertar sem mirar. */
aside .brand{margin-bottom:11px;padding:0 8px 0}
nav{display:flex;flex-direction:column;gap:0}
.nav-item{display:flex;align-items:center;gap:9px;padding:4px 10px;border-radius:7px;color:var(--ink-2);
     font-size:13px;line-height:1.35;text-decoration:none;position:relative;
     transition:background .12s,color .12s}
.nav-item:hover{background:#f2f4f2;color:var(--ink)}
.nav-item .ic{width:16px;height:16px;flex:0 0 16px;opacity:.7}
.nav-item.on .ic{opacity:1}
.nav-item:hover .ic{opacity:.9}
/* O título do bloco ganhou o mesmo fundo sombreado do item aberto — foi o
   que a coordenação pediu, e ele é o que faz o bloco parecer um bloco, e
   não uma lista com uma palavra em cima. */
.nav-sep{font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:700;
     margin:8px 0 2px;padding:3px 10px;border-radius:6px;
     color:var(--sec, var(--ink-3));background:var(--sec-soft, transparent)}
.nav-bloco:first-child .nav-sep{margin-top:0}

/* ---- a cor de cada bloco ----
   PEDIDO DA COORDENAÇÃO: separar os blocos por cor, para achar a tela sem
   ler o menu inteiro.
   Cada bloco define duas variáveis — a cor forte, do título e da marca de
   onde a pessoa está, e a suave, do fundo do item aberto. Tudo o mais lê
   dessas duas, então mudar um bloco de cor é mudar uma linha.
   AS CORES SÃO AS DO PRÓPRIO SISTEMA, puxadas para o mesmo tom apagado:
   oito cores berrantes numa barra que se olha o dia inteiro cansam mais
   do que ajudam. */
.nav-bloco{position:relative;padding-left:8px;margin-left:2px}
/* O filete lateral é o que agrupa. Ele importa mais do que o título:
   quando a janela estreita, o título some e o filete fica. */
.nav-bloco::before{content:"";position:absolute;left:0;top:12px;bottom:3px;width:2px;
     border-radius:2px;background:var(--sec, var(--border));opacity:.35}
/* Bloco sem título — hoje só o do Meu painel: o filete começa no alto do
   item, já que não há rótulo acima dele para acompanhar. */
.nav-bloco.sem-titulo::before{top:2px}
.nav-bloco:first-child::before{top:1px}
/* EVIDÊNCIA FIXA — hoje só o Meu painel.
   Ele é a tela para onde se volta entre uma coisa e outra, e destacá-lo
   apenas quando já se está nele destacaria na hora em que não faz falta.
   Fica sempre com o fundo suave do bloco; o hover não o apaga.
   Vem ANTES da regra de "aberto" de propósito: as duas têm a mesma
   força, e a de baixo é que vale — aberto tem de continuar ganhando. */
.nav-item.destaque{background:var(--sec-soft, var(--primary-soft));
     color:var(--sec, var(--primary-dark));font-weight:650}
.nav-item.destaque:hover{background:var(--sec-soft, var(--primary-soft));
     color:var(--sec, var(--primary-dark))}
.nav-item.destaque .ic{opacity:1}

/* EVIDÊNCIA VERMELHA — só as Solicitações.
   A evidência suave acima usa o tom da própria seção e diz "volte aqui".
   Esta diz "há alguém esperando", que é outra coisa: do outro lado de
   cada linha das Solicitações há uma pessoa parada contando os dias.
   O vermelho não é nenhuma das oito cores dos blocos, de propósito —
   um sinal que se parece com um agrupamento deixa de ser sinal.
   Vem ANTES de "aberto" pelo mesmo motivo que a outra: aberto é cor
   cheia com letra branca, e tem de continuar ganhando.
   O par foi conferido: 6,07:1 de contraste, e 6,5:1 no hover — acima do
   mínimo de 4,5:1 que se usa para texto. Vermelho claro demais viraria
   rosa decorativo, e escuro demais competiria com o item aberto. */
.nav-item.destaque-alerta{background:#fbe3e0;color:#8f3a36;font-weight:650}
.nav-item.destaque-alerta:hover{background:#f7d5d1;color:#7d322e}
.nav-item.destaque-alerta .ic{opacity:1}

/* ONDE A PESSOA ESTÁ, agora em cor CHEIA e letra branca.
   Ele era pálido como os títulos passaram a ser, e dois pálidos da mesma
   cor no mesmo bloco se confundem: o título viraria um item, e o item
   aberto viraria um título. Cheio, não há como trocar um pelo outro —
   é o único lugar da barra com fundo forte.
   As oito cores foram conferidas contra o branco: a de menor contraste
   dá 5,35:1, acima do mínimo de 4,5:1 que se usa para texto. */
.nav-item.on{background:var(--sec, var(--primary));color:#fff;font-weight:650;
     box-shadow:0 1px 2px rgba(22,36,43,.12)}
.nav-item.on:hover{background:var(--sec, var(--primary));color:#fff}
.nav-item.on .ic{opacity:1;color:#fff}
/* Uma barrinha na borda esquerda marca onde a pessoa está — ela cobre o
   filete do bloco, na cor cheia, e emenda o item ao seu bloco. */
.nav-item.on::before{content:"";position:absolute;left:-8px;top:3px;bottom:3px;width:2px;
     border-radius:2px;background:var(--sec, var(--primary))}

.sec-inicio   {--sec:#1f6f78; --sec-soft:#e0efef}
.sec-dia      {--sec:#2a5f8f; --sec-soft:#e4ecf5}
.sec-agenda   {--sec:#6a4a86; --sec-soft:#ede7f4}
.sec-vagas    {--sec:#a0563a; --sec-soft:#f6e7de}
.sec-pagamento{--sec:#4a6b3c; --sec-soft:#e8efe3}
/* Os Relatórios ficam entre o Fechamento (verde) e o RH (vinho), e a cor
   tinha de se distinguir dos dois: um azul-petróleo, frio, onde os
   vizinhos são quentes. É a seção dos ARQUIVOS que saem do sistema — o
   único bloco cujo clique produz um download em vez de uma tela. */
.sec-relatorios{--sec:#2f6b73; --sec-soft:#e3eff0}
.sec-rh       {--sec:#8a4a68; --sec-soft:#f4e5ec}
.sec-cadastro {--sec:#42606d; --sec-soft:#e5ecef}
/* O bloco mais escuro da barra, e é de propósito: são as telas que mexem
   no sistema — quem entra, o que ele calcula, o que acontece com o banco.
   Grafite em vez de vermelho porque não há nada de errado ali; há algo
   que se abre com cuidado, que é outra coisa.
   O grafite é QUENTE, e não frio: ele fica logo abaixo do Cadastro, que é
   um cinza AZULADO, e dois cinzas do mesmo lado do espectro, colados um
   no outro, não se distinguem de relance — que é justamente o que a cor
   está aqui para fazer. */
.sec-restrito {--sec:#4c4239; --sec-soft:#eeeae5}
.sec-ajuda    {--sec:#8a6420; --sec-soft:#f7ecd6}
/* Seção nova que ninguém pintou: cinza, e o cinza diz "sem cor definida"
   sem quebrar o desenho. */
.sec-outra    {--sec:#5d6b72; --sec-soft:#eceeed}
.who{margin-top:auto;padding:9px 10px 0;border-top:1px solid var(--border);font-size:12.5px}
.who b{display:block}
.who span{color:var(--ink-3);font-size:11.5px}
.who a{color:var(--ink-3);font-size:11.5px;display:inline-block;margin-top:6px;text-decoration:none}
.who a:hover{text-decoration:underline}
main{flex:1;min-width:0;padding:22px 26px 40px}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.page-head h2{margin:0;font-size:21px;font-weight:600;letter-spacing:-.015em}
.page-head p{margin:3px 0 0;color:var(--ink-3);font-size:13px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inp{padding:7px 10px;border:1px solid var(--border-strong);border-radius:8px;background:#fff;color:var(--ink)}
.card{background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);margin-bottom:16px}
.card-h{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;
        align-items:center;gap:12px;flex-wrap:wrap}
.card-h h3{margin:0;font-size:14.5px;font-weight:700}
.card-h p{margin:2px 0 0;font-size:12.5px;color:var(--ink-3)}
.card-b{padding:16px}

.flash{padding:11px 14px;border-radius:9px;font-size:13px;margin-bottom:14px;border:1px solid}
.flash.ok{background:var(--ok-bg);color:var(--ok);border-color:#bcd8d8}
.flash.erro{background:var(--bad-bg);color:var(--bad);border-color:#e6bcbc}
.flash.aviso{background:var(--warn-bg);color:var(--warn);border-color:#e6d3ab}

.banner{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:9px;font-size:12.5px;margin-bottom:14px}
.banner.ro{background:var(--neutral-bg);color:var(--ink-2);border:1px solid var(--border-strong)}
.banner.wr{background:var(--warn-bg);color:var(--warn);border:1px solid #e6d3ab}
.banner.er{background:var(--bad-bg);color:var(--bad);border:1px solid #e6bcbc}
.banner a{color:inherit;font-weight:600}

table.t{width:100%;border-collapse:collapse}
table.t th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);
     font-weight:700;padding:9px 12px;border-bottom:1px solid var(--border-strong);white-space:nowrap;background:#fff}
table.t td{padding:9px 12px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:top}
table.t tbody tr:hover{background:#fafbfa}
/* ---- A LINHA QUE ABRE COM DOIS CLIQUES ----
   O cursor de mão é o único aviso de que a linha faz alguma coisa; sem
   ele, ninguém descobre o duplo clique. O realce um pouco mais forte no
   passar do mouse diz qual linha vai abrir — a lista é densa e as linhas
   têm duas e três alturas de texto. */
table.t tbody tr.linha-abre{cursor:pointer}
table.t tbody tr.linha-abre:hover{background:#f2f6fb}
table.t td.n,table.t th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.t td.c,table.t th.c{text-align:center}
/* ---- GRADE, PARA TABELA DE MUITAS COLUNAS ----
   Pedido do Resumo do mês: "precisa colocar linhas de grade para separar,
   está muito confuso olhar". São treze colunas, quase todas de números,
   e sem linha vertical o olho troca de coluna no meio da linha — ali,
   trocar de coluna é ler o desconto de alguém como o valor a pagar.

   A linha é fina e clara: separa sem desenhar por cima do conteúdo. A
   última coluna não leva borda, senão vira moldura.

   E A TROCA DE PESSOA GANHA LINHA FORTE: quem tem duas atuações aparece
   em duas linhas seguidas, e elas precisam se ler como um bloco só.
   Sem isso, cinco linhas iguais na tela não dizem onde uma pessoa
   termina e a outra começa. */
table.t-grade td,
table.t-grade th{border-right:1px solid var(--border)}
table.t-grade td:last-child,
table.t-grade th:last-child{border-right:0}
table.t-grade tbody tr.troca-pessoa > td{border-top:1px solid var(--border-strong)}
.scroll{overflow-x:auto}
/* ---- TABELA LARGA ----
   Pedido da coordenação, olhando Consultar horários: "está cortando a
   carga semanal; talvez diminuir os espaços entre as colunas".

   Cinco dias da semana mais quatro colunas de identificação não cabem
   numa tela de notebook com o respiro que uma tabela de seis colunas
   pede. O respiro é bom quando sobra espaço e é atrapalho quando falta:
   quem lê uma grade quer ver a semana inteira de uma vez, e uma coluna
   cortada é justamente a que a pessoa foi procurar.

   O QUE ENCOLHE É O ESPAÇO, E NÃO A LETRA — quase. O texto cai meio
   ponto; o que cede de verdade são as margens laterais de cada célula,
   que é o que sobra em tabela de muitas colunas. */
table.t-compacta th,
table.t-compacta td{padding:7px 7px}
table.t-compacta td{font-size:12.5px}
table.t-compacta .hh{font-size:12px}
table.t-compacta th{font-size:10.5px;letter-spacing:.03em}
/* A coluna que encolhe até o conteúdo. Sem isto o navegador reparte a
   largura em partes iguais, e "Unidade 2" ganha o mesmo espaço que um
   nome de três palavras — o que sobra some do outro lado da tela. */
table.t-compacta td.enc,
table.t-compacta th.enc{width:1%;white-space:nowrap}
/* A etiqueta do vínculo é o texto mais largo das colunas estreitas
   ("PJ atendimento"), e etiqueta não quebra em lugar nenhum do sistema.
   Numa tabela de dez colunas ela decide sozinha uma largura que faz a
   última coluna sair da tela — então, e só aqui, ela pode quebrar. */
table.t-compacta td.enc .tag{white-space:normal}
.hh{font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap}
.muted{color:var(--ink-3)}
/* ---- INSTRUÇÃO ----
   Pedido da coordenação, olhando o rodapé das Atas: "todos os lugares
   onde tem esse tipo de instrução, quero que tenha o indicativo de
   Instrução, e fique menor e com o fundo em amarelo claro (para não
   parecer algo da tela, e sim um campo de instrução separado)".

   Estava certa: eram cards brancos do mesmo tamanho dos cards de
   trabalho, com o mesmo texto preto, e por isso o olho os lia como
   conteúdo — mais uma coisa para conferir. Explicação não é conteúdo:
   é a voz de quem escreveu o sistema falando com quem o usa, e ela
   precisa parecer o que é. Amarelo claro, letra menor, e a palavra
   INSTRUÇÃO em cima, para que se possa pular sem culpa depois da
   primeira leitura. */
.instrucao{background:#fdf8ec;border:1px solid #f0e2c6;border-radius:10px;padding:11px 14px;
           font-size:12px;line-height:1.6;color:#5d4a1c;margin-bottom:16px}
.instrucao-t{display:block;font-size:9.5px;font-weight:800;letter-spacing:.1em;
             text-transform:uppercase;color:#8a6420;margin-bottom:6px}
.instrucao p{margin:0 0 8px}
.instrucao p:last-child{margin:0}
.instrucao b{color:#4a3a15}
.instrucao code{background:#f6ecd6;padding:1px 5px;border-radius:5px}

.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;background:var(--neutral-bg);
     color:var(--neutral);white-space:nowrap;font-weight:600}
.tag.ok{background:var(--ok-bg);color:var(--ok)}
.tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.bad{background:var(--bad-bg);color:var(--bad)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--border);border-radius:10px;padding:13px 15px;box-shadow:var(--shadow)}
.kpi span{display:block;font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.kpi b{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums}
.kpi small{color:var(--ink-3);font-size:11.5px}

.calc{background:var(--primary-soft);border:1px solid #bcd8d8;border-radius:9px;padding:12px 14px;margin-top:12px}
.calc b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--primary-dark);margin-bottom:4px}
.calc .v{font-size:19px;font-weight:700;color:var(--primary-dark);font-variant-numeric:tabular-nums}
.calc p{margin:5px 0 0;font-size:12px;color:var(--ink-2)}
.nota{background:#fdf8ec;border:1px solid #ecdcb4;border-radius:8px;padding:10px 13px;font-size:12.5px;color:#6b5520;margin-top:12px}

/* O PICK CABE NO QUE TIVER. Eram três colunas fixas, e o dia em que o
   Período das ocorrências ganhou a quarta opção — "vários dias
   alternados" — ela desceu sozinha para uma segunda linha, com três
   quartos da largura vazios ao lado. O mesmo já acontecia na importação
   de sessões, que lista as quatro unidades.
   O auto-fit resolve as duas de uma vez e continua quebrando sozinho em
   tela estreita, que é o que a regra do fim deste arquivo garantia à mão. */
.pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:7px}
.pick label{border:1px solid var(--border-strong);background:#fff;border-radius:8px;padding:8px 9px;font-size:12.5px;
     color:var(--ink-2);line-height:1.3;display:block;cursor:pointer}
.pick label small{display:block;font-size:10.5px;color:var(--ink-3)}
.pick input{display:none}
.pick input:checked + span{font-weight:700;color:var(--primary-dark)}
.pick label:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}

/* documento */
.paper{background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:0 2px 12px rgba(22,36,43,.1);
       padding:38px 42px;max-width:720px}
.paper-h{border-bottom:2px solid var(--ink);padding-bottom:13px;margin-bottom:20px;display:flex;
         justify-content:space-between;gap:20px;align-items:flex-start}
.paper-h h4{margin:0 0 2px;font-size:16px;font-weight:800;letter-spacing:.02em}
.paper-h .m{font-size:11.5px;color:var(--ink-2);line-height:1.6}
.paper-h .d{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);text-align:right}
.paper h5{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin:22px 0 8px;font-weight:700}
.paper h5:first-of-type{margin-top:0}
table.doc{width:100%;border-collapse:collapse;font-size:12.5px}
table.doc th{text-align:left;padding:6px 8px;border-bottom:1px solid var(--ink);font-size:10.5px;
     text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}
table.doc td{padding:6px 8px;border-bottom:1px solid #eef0ee}
table.doc td.n,table.doc th.n{text-align:right;font-variant-numeric:tabular-nums}
table.doc tr.tot td{border-top:1.5px solid var(--ink);border-bottom:none;font-weight:800;padding-top:8px}
.paper-f{margin-top:26px;padding-top:11px;border-top:1px solid #eef0ee;font-size:10.5px;color:var(--ink-3);
         display:flex;justify-content:space-between;gap:16px}

@media (max-width:920px){
  aside{width:62px;flex:0 0 62px;padding:14px 7px}
  aside .brand-t,.nav-item span,.who,.nav-sep{display:none}
  .nav-item{justify-content:center;padding:8px 0}
  /* Estreita, o título do bloco some e o filete passa a ser a única
     pista de agrupamento — então ele fica mais visível, não menos. */
  .nav-bloco{padding-left:7px;margin-left:0}
  .nav-bloco::before{top:3px;opacity:.5}
  .nav-item.on::before{left:-7px}
  /* Sem os rótulos, o que separa um grupo do outro é o espaço. */
  .nav-bloco + .nav-bloco{margin-top:9px}
  main{padding:16px 12px 30px}
  .r2,.r3,.r4,.pick{grid-template-columns:1fr}
  .paper{padding:22px 18px}
}

/* ===== NEGRITO E VERMELHO NO TEXTO ESCRITO À MÃO =====
   O vermelho é o de "olhe aqui", e não o de erro do sistema: um tom só,
   escuro o bastante para ser lido por quem enxerga pouco e por quem
   imprime a tela em preto e branco — onde ele continua sendo o trecho
   mais escuro da frase. */
.marca-vermelha{color:#a8322c;font-weight:600}
.barra-marcas{display:flex;gap:6px;align-items:center;margin:0 0 5px;flex-wrap:wrap}
.barra-marcas button{font:inherit;font-size:11.5px;line-height:1;padding:5px 9px;cursor:pointer;
  background:#fff;border:1px solid var(--border-strong);border-radius:6px;color:var(--ink-2)}
.barra-marcas button:hover{background:#f2f4f2}
.barra-marcas .bm-n{font-weight:800}
.barra-marcas .bm-v{color:#a8322c;font-weight:700}
.barra-marcas .bm-dica{font-size:11px;color:var(--ink-3)}

/* O LOGO DA CLÍNICA, ao lado da marca do sistema.
   Altura fixa e largura livre: logo é imagem de proporção própria, e
   forçar uma caixa quadrada em cima dela é como se estica um logo sem
   querer. O max-width evita que um arquivo muito largo empurre a barra. */
/* O LOGO DA CLÍNICA, ao lado do nome do sistema — e MENOR que ele.
   VIVIT é o produto e fica em evidência; o logo diz onde o produto está
   sendo usado. O filete à esquerda separa as duas marcas: sem ele, um
   logo colorido colado no nome parece parte do nome.
   Altura fixa e largura livre, porque logo tem proporção própria e
   forçá-lo numa caixa quadrada o estica. */
.brand-logo{height:22px;width:auto;max-width:72px;object-fit:contain;display:block;
      opacity:.92;padding-left:9px;border-left:1px solid var(--border);align-self:center;
      flex:0 1 auto;min-width:0}

/* A MARCA NA TELA DE ENTRADA: nome e logo numa linha, a descrição da
   clínica embaixo dos dois. Com a descrição dentro do mesmo bloco do
   nome, ela empurrava o logo para longe e os dois deixavam de parecer
   um par — que é justamente o que eles são. */
.brand-entrada{display:block}
.brand-linha{display:flex;align-items:center;gap:11px;flex-wrap:nowrap}
.brand-sub{font-size:12px;color:var(--ink-3);margin-top:5px}

/* ============ OS DIAS DE UMA AUSÊNCIA, LADO A LADO ============
   "Isso ficou feio. Se for vários dias, aparecer Primeiro dia e não Data
   da ocorrência, e ao lado o espaço para o horário e um tique para dia
   inteiro, e ao lado 'E também no dia' e o mesmo espaço para horário e um
   botão + outro dia."
   Cada dia é um bloco que se estreita quando é o dia inteiro — que é o
   caso comum — e só cresce em quem tem hora marcada. É por isso que os
   campos têm largura própria em vez dos 100% do formulário: com 100%,
   dois dias nunca caberiam na mesma linha. */
.dia-bloco{flex:0 1 auto}
/* Os dias acrescentados entram NA linha das datas, e não numa caixa
   dentro dela. A regra mora aqui e não num style inline porque a tela
   apaga o style inline ao trocar de período — e sem ela cada dia novo
   empilhava debaixo do anterior. */
#diasExtra{display:contents}
.dia-linha{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.dia-linha input[type=date]{width:auto;min-width:148px}
.dia-hora{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap}
.dia-hora .so-das{display:inline-flex;gap:5px}
.dia-hora input[type=time]{width:auto;padding:5px 7px;font-size:11.5px}
/* O tique é uma etiqueta clicável inteira: alvo pequeno em campo de
   dinheiro e de hora é onde nasce o clique errado. */
.tic{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-2);
     white-space:nowrap;cursor:pointer;user-select:none}
.tic input[type=checkbox]{width:auto;margin:0;accent-color:var(--primary)}