/* =====================================================================
   Camada de design sobre o Bootswatch Litera
   =====================================================================

   Tese: legibilidade como estetica.

   Este sistema e lido de relance — no celular, a um braco de distancia,
   entre uma sessao e outra, com uma crianca puxando a manga. Por isso a
   fonte e a Atkinson Hyperlegible, desenhada pelo Braille Institute com
   letras desambiguadas (o 1, o l e o I nao se confundem; as aberturas sao
   largas). Nao e enfeite: e a mesma razao pela qual os alvos de toque tem
   44px e os numeros usam algarismos tabulares.

   A cor de marca e um petroleo calmo, escolhido para NAO competir com as
   cores que carregam significado clinico — o verde de "realizado", o
   vermelho de "falta", os quatro tons do kanban. Num prontuario, a cor
   informa antes de decorar.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* Fonte                                                               */
/*                                                                     */
/* Atkinson Hyperlegible — uma familia, dois arquivos por motivo.       */
/*                                                                     */
/* As LETRAS vem da versao "Next", variavel de 400 a 800. E o que da a  */
/* firmeza que faltava: com so 400 e 700, rotulo de tabela, item de     */
/* menu e botao nao tinham onde pousar e o conjunto lia mole. Agora 600 */
/* e o peso do cromo da interface e 800 o dos titulos.                  */
/*                                                                     */
/* Os DIGITOS vem da versao original, e isto e deliberado: o zero da    */
/* Next e cortado (Ø), sem recurso OpenType que desligue — testados     */
/* normal, "zero" 0 e ss01 a ss05. Todo valor do sistema viraria        */
/* R$ 3.11Ø,ØØ. E boa legibilidade, mas trocar a cara de todo numero    */
/* do sistema e decisao de marca, nao de acabamento.                    */
/*                                                                     */
/* A emenda nao aparece porque as duas compartilham metrica e desenho;  */
/* o que muda entre elas e a faixa de peso e o zero. Por isso os        */
/* digitos param em 700 — acima disso o navegador engrossaria na marra. */
/* ------------------------------------------------------------------ */

/* --- Digitos: versao original, zero sem corte --- */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/atkinson-400.woff2') format('woff2');
  unicode-range: U+0030-0039;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('../fonts/atkinson-700.woff2') format('woff2');
  unicode-range: U+0030-0039;
}

/* --- Todo o resto: Next variavel, 400 a 800 --- */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/atkinson-next.woff2') format('woff2');
  unicode-range: U+0000-002F, U+003A-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                 U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/atkinson-next-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */

:root {
  --tinta:      #1b2124;
  --tinta-2:    #5b6469;
  /* Era #8d9498, que da 2,84:1 sobre o papel — abaixo do piso de 4,5:1 e a
     razao de rotulo e legenda lerem apagados. Agora 4,46:1. */
  --tinta-3:    #6b7378;

  --papel:      #f6f6f4;
  --superficie: #ffffff;
  --borda:      #dcdcd7;
  --borda-forte:#c4c4bd;

  --petroleo:      #12656b;
  --petroleo-esc:  #0c4a4f;
  --petroleo-luz:  #e4f0f0;

  /*
   * Verde de dinheiro e de "realizado". O do tema (#02b875) dava 2,59:1 sobre
   * o branco: como TEXTO ele nao era um destaque, era um desbotamento — o
   * valor a receber sumia no cartao. Este da 4,97:1 e finalmente se impoe.
   * A versao clara continua servindo de fundo, onde contraste de texto nao
   * se aplica.
   */
  --sucesso:      #0a8054;
  --sucesso-esc:  #076341;
  --sucesso-luz:  #e8f5ef;

  /*
   * Peso do traco. A interface tinha so 400 e 700, e o que faltava era o
   * meio: rotulo de tabela, item de menu e botao ficavam leves demais.
   */
  --peso-cromo:  600;   /* menu, rotulo, cabecalho de tabela, botao */
  --peso-titulo: 700;
  --peso-numero: 700;   /* digitos param em 700: acima disso o navegador engrossa na marra */

  /* Alvo minimo de toque. Nao e sugestao: e o dedo dela com pressa. */
  --toque: 2.75rem;

  --barra-baixo: 3.5rem;
  --seguro-baixo: env(safe-area-inset-bottom, 0px);

  --menu-largura: 15rem;
  --menu-compacto: 4.25rem;
  --topo-altura: 3.5rem;

  /*
   * Largura de leitura. O container e fluido — a tela inteira serve para
   * tabela e grade —, mas texto corrido acima de ~75 caracteres cansa. Cada
   * painel decide se quer a tela toda ou a medida de leitura.
   */
  --leitura: 68ch;

  /* Bootstrap, alinhado ao tema */
  --bs-success: var(--sucesso);
  --bs-success-rgb: 10, 128, 84;
  --bs-primary: var(--petroleo);
  --bs-primary-rgb: 18, 101, 107;
  --bs-link-color: var(--petroleo);
  --bs-link-hover-color: var(--petroleo-esc);
  --bs-body-bg: var(--papel);
  --bs-body-color: var(--tinta);
  --bs-border-color: var(--borda);
  --bs-body-font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-font-sans-serif: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-border-radius: .5rem;
  --bs-border-radius-sm: .375rem;
  --bs-border-radius-lg: .75rem;
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--bs-body-font-family);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; letter-spacing: -.011em; }

/* Numero e dado: alinhamento em coluna importa mais que largura variavel */
.stat-num, .money, .num, td.text-end, .table td:last-child,
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

a { text-underline-offset: .15em; }

.btn { font-weight: 700; }
.btn-primary { --bs-btn-bg: var(--petroleo); --bs-btn-border-color: var(--petroleo);
               --bs-btn-hover-bg: var(--petroleo-esc); --bs-btn-hover-border-color: var(--petroleo-esc);
               --bs-btn-active-bg: var(--petroleo-esc); --bs-btn-active-border-color: var(--petroleo-esc); }
.btn-outline-primary { --bs-btn-color: var(--petroleo); --bs-btn-border-color: var(--petroleo);
                       --bs-btn-hover-bg: var(--petroleo); --bs-btn-hover-border-color: var(--petroleo);
                       --bs-btn-active-bg: var(--petroleo); }

.card {
  background: var(--superficie);
  border-color: var(--borda);
  box-shadow: 0 1px 2px rgba(27, 33, 36, .04);
}
.card-header { background: var(--superficie); border-bottom-color: var(--borda); font-weight: 700; }

.table > :not(caption) > * > * { border-bottom-color: var(--borda); }
.table-light > :not(caption) > * > * { background: #f1f1ee; color: var(--tinta-2);
                                       font-weight: 700; font-size: .8125rem; }

.form-label { font-weight: 700; font-size: .875rem; margin-bottom: .3rem; }
.form-control, .form-select { border-color: var(--borda-forte); }
.form-control:focus, .form-select:focus {
  border-color: var(--petroleo);
  box-shadow: 0 0 0 .2rem rgba(18, 101, 107, .18);
}

/* Foco visivel em tudo que recebe teclado */
:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 2px; }

.badge { font-weight: 700; letter-spacing: .01em; }

/* -------------------------------------------------------------------
   Alertas

   O Litera preenche o alerta inteiro com a cor. Num painel clinico, onde
   quase sempre ha tres ou quatro avisos ao mesmo tempo, isso vira um muro
   de vermelho — e o texto dentro dele fica pior de ler justamente quando
   mais importa. Aqui a cor fica numa faixa lateral e o texto volta a ser
   texto. A urgencia continua legivel; o aviso para de gritar.
   ------------------------------------------------------------------- */

.alert {
  border: 1px solid var(--borda);
  border-left-width: 4px;
  background: var(--superficie);
  color: var(--tinta);
}
.alert .alert-link, .alert a:not(.btn) { color: var(--petroleo); font-weight: 700; }

.alert-danger  { border-left-color: #d03b3b; background: #fdf3f3; }
.alert-warning { border-left-color: #d98b0a; background: #fdf8ee; }
.alert-success { border-left-color: #0ca30c; background: #f1faf1; }
.alert-info    { border-left-color: var(--petroleo); background: var(--petroleo-luz); }
.alert-secondary { border-left-color: var(--tinta-3); background: #f4f4f1; }

.alert-danger  .bi:first-child { color: #d03b3b; }
.alert-warning .bi:first-child { color: #b8770a; }
.alert-success .bi:first-child { color: #0ca30c; }
.alert-info    .bi:first-child { color: var(--petroleo); }

/* Botao dentro de alerta sobre fundo colorido: garante superficie propria,
   senao um outline da mesma cor do alerta desaparece */
.alert .btn-light { background: var(--superficie); color: var(--tinta); }

/* Valor em reais nunca deve quebrar no meio */
.stat-num { white-space: nowrap; }

/* -------------------------------------------------------------------
   Contencao de conteudo largo

   Coluna do Bootstrap e flex item, e flex item nasce com min-width:auto —
   ou seja, cresce ate caber o filho. Uma tabela de 1344px empurrava a
   pagina inteira e criava rolagem horizontal no documento, em vez de
   rolar so dentro do container. min-width:0 devolve o controle ao
   overflow-x do wrapper. Vale para toda tabela larga do sistema.
   ------------------------------------------------------------------- */
.app-principal, .app-principal > * { min-width: 0; }
.table-responsive, .grade-wrap { max-width: 100%; }

/* -------------------------------------------------------------------
   Mobile: o trilho lateral sai de cena e a gaveta assume
   ------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .app-lateral { display: none; }
  .app-principal { padding: 1rem .9rem; }
  .pagina-topo { padding-bottom: .75rem; margin-bottom: .9rem; }
  .pagina-topo .titulo { font-size: 1.25rem; }
  .pagina-topo .acoes { margin-left: 0; width: 100%; }
  .pagina-topo .acoes .btn { flex: 1; }
}

.stat-num { font-size: 1.625rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.stat-lab { font-size: .8125rem; color: var(--tinta-2); line-height: 1.35; }

/* ------------------------------------------------------------------ */
/* Estrutura                                                           */
/*                                                                     */
/* Shell fixo: topo e menu nao rolam. A area de conteudo e a unica que  */
/* rola, entao a acao principal da pagina fica sempre a um clique.      */
/* ------------------------------------------------------------------ */

.app-topo {
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  padding-top: env(safe-area-inset-top, 0px);
  position: sticky;
  top: 0;
  z-index: 1035;
}
.app-marca { font-weight: 700; color: var(--tinta); text-decoration: none; letter-spacing: -.015em; }
.app-marca .bi { color: var(--petroleo); }

.app-corpo { display: flex; align-items: flex-start; }

.app-lateral {
  flex: 0 0 var(--menu-largura);
  width: var(--menu-largura);
  position: sticky;
  top: var(--topo-altura);
  height: calc(100vh - var(--topo-altura));
  background: var(--superficie);
  border-right: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  transition: flex-basis .18s ease, width .18s ease;
}

.app-lateral .rolagem { overflow-y: auto; overflow-x: hidden; flex: 1; padding: .5rem; }
.app-lateral .rodape { border-top: 1px solid var(--borda); padding: .4rem .5rem; }

.app-principal { flex: 1; min-width: 0; padding: 1.25rem; }

/* ------------------------------------------------------------------ */
/* Navegacao                                                           */
/* ------------------------------------------------------------------ */

.app-nav .nav-link {
  color: var(--tinta);
  border-radius: .5rem;
  padding: .5rem .7rem;
  font-size: .9375rem;
  display: flex;
  align-items: center;
  min-height: var(--toque);
  position: relative;
  white-space: nowrap;
}
.app-nav .nav-link:hover { background: #eef1f0; }
.app-nav .nav-link.active { background: var(--petroleo-luz); color: var(--petroleo-esc); font-weight: 700; }

/* Marca de item ativo: barra na borda, nao bloco de cor. Num menu com
   contadores coloridos, preencher o item inteiro brigaria com eles. */
.app-nav .nav-link.active::before {
  content: '';
  position: absolute;
  left: -.5rem; top: .35rem; bottom: .35rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--petroleo);
}
.app-nav .nav-link .bi { width: 1.35rem; font-size: 1.05rem; flex-shrink: 0; }
.app-nav .rotulo { overflow: hidden; text-overflow: ellipsis; }

.app-secao {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tinta-3);
  padding: .9rem .7rem .3rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Menu compacto                                                       */
/*                                                                     */
/* Ao recolher, o contador NAO some: vira um ponto sobre o icone. Uma   */
/* barra que esconde o trabalho pendente troca espaco por esquecimento. */
/* ------------------------------------------------------------------ */

html[data-menu="compacto"] .app-lateral {
  flex-basis: var(--menu-compacto);
  width: var(--menu-compacto);
}
html[data-menu="compacto"] .app-lateral .rotulo,
html[data-menu="compacto"] .app-lateral .app-secao,
html[data-menu="compacto"] .app-lateral .nav-link .badge { display: none; }

html[data-menu="compacto"] .app-lateral .nav-link { justify-content: center; padding: .5rem 0; }
html[data-menu="compacto"] .app-lateral .nav-link .bi { margin: 0 !important; }

/* Separador entre secoes, ja que os titulos sumiram */
html[data-menu="compacto"] .app-lateral .app-secao + .nav {
  border-top: 1px solid var(--borda);
  padding-top: .4rem;
  margin-top: .4rem;
}

html[data-menu="compacto"] .app-lateral .nav-link[data-pino]::after {
  content: '';
  position: absolute;
  top: .45rem; right: .8rem;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--bs-danger);
  box-shadow: 0 0 0 2px var(--superficie);
}
html[data-menu="compacto"] .app-lateral .nav-link[data-pino="aviso"]::after { background: #d98b0a; }

/* A dica so existe no modo compacto. Sem esta regra ela aparece ao lado do
   rotulo normal e o menu sai escrito duas vezes. */
.app-lateral .nav-link .dica { display: none; }

/* Rotulo flutuante no modo compacto, para nao virar adivinhacao de icone */
html[data-menu="compacto"] .app-lateral .nav-link .dica {
  display: block;
  position: absolute;
  left: calc(100% + .5rem);
  top: 50%;
  transform: translateY(-50%);
  background: var(--tinta);
  color: #fff;
  padding: .3rem .6rem;
  border-radius: .375rem;
  font-size: .8125rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 1040;
}
html[data-menu="compacto"] .app-lateral .nav-link:hover .dica,
html[data-menu="compacto"] .app-lateral .nav-link:focus-visible .dica { opacity: 1; }

.app-recolher {
  border: 0;
  background: none;
  width: 100%;
  color: var(--tinta-2);
  border-radius: .5rem;
  padding: .5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  min-height: var(--toque);
}
.app-recolher:hover { background: #eef1f0; color: var(--tinta); }
html[data-menu="compacto"] .app-recolher { justify-content: center; }
html[data-menu="compacto"] .app-recolher .rotulo { display: none; }
html[data-menu="compacto"] .app-recolher .bi { transform: rotate(180deg); }

/* ------------------------------------------------------------------ */
/* Cabecalho de pagina                                                 */
/*                                                                     */
/* Um so componente para titulo, contexto e acoes. Antes cada tela      */
/* montava o proprio, e o resultado era um ritmo diferente por pagina.  */
/* ------------------------------------------------------------------ */

.pagina-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  padding-bottom: .9rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--borda);
}
.pagina-topo .titulo { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.2; }
.pagina-topo .contexto { color: var(--tinta-2); font-size: .875rem; margin: .15rem 0 0; }
.pagina-topo .acoes { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }

/* Texto corrido nao acompanha a largura da tela */
.medida-leitura { max-width: var(--leitura); }

/*
 * Campo de texto corrido que ela ESCREVE (nota de sessao, observacao).
 * Mais larga que --leitura, que serve para ler prosa pronta: aqui ela quer o
 * paragrafo inteiro no olho enquanto digita. Mas com limite — solto numa tela
 * de 1900px, o campo dava 180 caracteres por linha, e reler o que escreveu
 * virava exercicio de achar onde a linha comecava.
 */
.medida-escrita { max-width: 100ch; }

/* ------------------------------------------------------------------ */
/* Avatar de identidade                                                */
/* ------------------------------------------------------------------ */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  letter-spacing: .01em;
  flex-shrink: 0;
  line-height: 1;
  font-variant-numeric: normal;
}
.avatar-sm { width: 1.75rem; height: 1.75rem; font-size: .6875rem; }
.avatar-md { width: 2.25rem; height: 2.25rem; font-size: .8125rem; }
.avatar-lg { width: 3.25rem; height: 3.25rem; font-size: 1.125rem; }

/* ------------------------------------------------------------------ */
/* Chips de horario                                                    */
/*                                                                     */
/* Escolher entre 08:00 e 08:30 e uma decisao de um toque. Um <select> */
/* esconderia a resposta que ela veio buscar — quantas janelas sobram  */
/* — atras de um clique. Os chips mostram a oferta inteira de uma vez. */
/* ------------------------------------------------------------------ */

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Manha / Tarde separam a oferta em dois blocos. Sao estrutura, nao nota de
   rodape: em text-secondary sumiam contra o papel. */
.rotulo-periodo {
  font-size: .8125rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-2);
  margin: 1rem 0 .35rem;
}
.rotulo-periodo:first-of-type { margin-top: .5rem; }

.chip { margin: 0; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }

.chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--toque);
  min-width: 4.25rem;
  padding: 0 .75rem;
  border: 1px solid var(--borda-forte);
  border-radius: .5rem;
  background: var(--superficie);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}

.chip span:hover { background: var(--petroleo-luz); border-color: var(--petroleo); }

.chip input:focus-visible + span {
  outline: 2px solid var(--petroleo);
  outline-offset: 2px;
}

.chip input:checked + span {
  background: var(--petroleo);
  border-color: var(--petroleo);
  color: #fff;
}

/* ------------------------------------------------------------------ */
/* Barra inferior (mobile)                                             */
/*                                                                     */
/* O polegar alcanca a base da tela, nao o topo. Num app usado de pe,   */
/* entre atendimentos, isso vale mais que qualquer refinamento visual.  */
/* ------------------------------------------------------------------ */

.app-barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  padding-bottom: var(--seguro-baixo);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.app-barra a, .app-barra button {
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  min-height: var(--barra-baixo);
  padding: .35rem .2rem;
  color: var(--tinta-2);
  text-decoration: none;
  font-size: .6875rem;
  font-weight: 700;
  position: relative;
}
.app-barra .bi { font-size: 1.25rem; line-height: 1; }
.app-barra .ativo { color: var(--petroleo); }
.app-barra .ativo::before {
  content: '';
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1.75rem; height: 3px;
  background: var(--petroleo);
  border-radius: 0 0 3px 3px;
}
.app-barra .pino {
  position: absolute; top: .3rem; left: 50%; margin-left: .25rem;
  min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem;
  border-radius: 999px;
  background: var(--bs-danger); color: #fff;
  font-size: .625rem; line-height: 1.05rem; text-align: center;
}

/* Espaco para a barra nao cobrir o conteudo */
@media (max-width: 991.98px) {
  .app-conteudo { padding-bottom: calc(var(--barra-baixo) + var(--seguro-baixo) + 1rem); }
}
@media (min-width: 992px) {
  .app-barra { display: none; }
}

/* ------------------------------------------------------------------ */
/* Alvos de toque                                                      */
/* ------------------------------------------------------------------ */

@media (max-width: 991.98px) {
  .btn:not(.btn-sm) { min-height: var(--toque); }
  .btn-sm { min-height: 2.25rem; }
  .form-control, .form-select { min-height: var(--toque); font-size: 1rem; }
  /* 16px evita o zoom automatico do iOS ao focar um campo */
  .form-control-sm, .form-select-sm { min-height: 2.5rem; font-size: 1rem; }

  .table td, .table th { padding-top: .6rem; padding-bottom: .6rem; }
  .list-group-item { min-height: var(--toque); }
  .nav-tabs .nav-link { min-height: var(--toque); }
}

/* ------------------------------------------------------------------ */
/* Abas roláveis no mobile                                             */
/* ------------------------------------------------------------------ */

/* No celular as abas deslizam; na tela grande elas quebram linha, porque ali
   sobra largura e esconder aba atras de rolagem so custa cliques */
.nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link { white-space: nowrap; }

/*
 * Rola tambem no desktop. Com nove abas na ficha, deixar quebrar joga a
 * ultima sozinha numa segunda linha — parece defeito, e foi assim que a aba
 * de auditoria virou um icone solto embaixo da barra.
 *
 * A sombra na direita e o que avisa que ha mais aba fora da tela; sem ela a
 * barra rolavel parece uma barra completa.
 */
.nav-tabs-rolagem { position: relative; }
.nav-tabs-rolagem::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 1px;
  width: 2rem; pointer-events: none;
  background: linear-gradient(to right, rgba(246,246,244,0), var(--papel));
}

/* ------------------------------------------------------------------ */
/* Instalacao do app                                                   */
/* ------------------------------------------------------------------ */

.app-instalar { display: none; }
.app-instalar.visivel { display: inline-flex; }

.app-offline {
  display: none;
  background: var(--bs-warning);
  color: #3d2f00;
  text-align: center;
  font-size: .8125rem;
  font-weight: 700;
  padding: .35rem .75rem;
}
body.sem-rede .app-offline { display: block; }

/* ------------------------------------------------------------------ */
/* Menos movimento para quem pediu menos movimento                     */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ====================================================================
   Agenda do mes — grade de densidade

   Rampa sequencial de matiz unico (petroleo da marca), claro -> escuro,
   validada: lightness monotona, degraus visiveis, matiz unico. O passo mais
   claro pode encostar na superficie porque a leitura nunca depende so dele:
   toda celula tem borda e o numero de sessoes impresso.

   Os dois passos escuros invertem a tinta — #1b2124 sobre #2f7c84 fica em
   3,36:1, abaixo do piso; branco sobre o mesmo tom da 4,84:1.
   ==================================================================== */
.mes-resumo {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  padding: .875rem 1.125rem; margin-bottom: .75rem;
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--bs-border-radius);
}
.mes-numero { display: flex; align-items: baseline; gap: .4rem; }
.mes-numero strong { font-size: 1.375rem; line-height: 1; }
.mes-numero span   { font-size: .8125rem; color: var(--tinta-2); }

.mes-grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;                        /* o vao de superficie que separa as celulas */
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
}

.mes-cabecalho {
  background: var(--papel);
  padding: .5rem .25rem;
  text-align: center;
  font-size: .75rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--tinta-3);
}

.mes-dia {
  position: relative;
  display: flex; flex-direction: column; gap: .125rem;
  min-height: 5.5rem; padding: .5rem;
  background: var(--superficie);
  color: var(--tinta); text-decoration: none;
  transition: outline-color .12s ease;
  outline: 2px solid transparent; outline-offset: -2px;
}
.mes-dia:hover, .mes-dia:focus-visible { outline-color: var(--petroleo); z-index: 1; }

.mes-numero-dia { font-size: .8125rem; font-weight: 700; }
.mes-sessoes    {
  margin-top: auto; line-height: 1.15;
  font-size: .75rem; color: var(--tinta-2);
}
.mes-sessoes b  { font-size: 1.5rem; font-weight: 700; margin-right: .15rem; }
.mes-vaga       { font-size: .75rem; color: var(--tinta-2); }
.mes-marca      { margin-top: auto; color: var(--tinta-3); }

/* Sobra de mes vizinho: aparece porque a semana partida esconderia dias em
   que ela pode encaixar alguem, mas nao disputa a atencao com o mes atual */
.mes-dia.fora        { opacity: .55; }
.mes-dia.fechado     { background: var(--papel); }
.mes-dia.fechado .mes-numero-dia { color: var(--tinta-3); }

.mes-dia.hoje::after {
  content: ''; position: absolute; inset: 0;
  border: 2px solid var(--petroleo); pointer-events: none;
}

/* A rampa */
.mes-dia.nivel-1 { background: #e4f0f0; }
.mes-dia.nivel-2 { background: #c2dddf; }
.mes-dia.nivel-3 { background: #8fc2c5; }
.mes-dia.nivel-4 { background: #2f7c84; color: #fff; }
.mes-dia.nivel-5 { background: #0c4a4f; color: #fff; }
/* O texto pequeno acompanha o fundo, senao some no meio da rampa:
   --tinta-2 sobre o passo 3 da 3,08:1 e branco a 85% sobre o passo 4 da 3,43:1,
   os dois abaixo do piso de 4,5:1. Com a tinta cheia: 8,29:1 e 4,84:1. */
.mes-dia.nivel-2 .mes-vaga, .mes-dia.nivel-3 .mes-vaga,
.mes-dia.nivel-2 .mes-sessoes, .mes-dia.nivel-3 .mes-sessoes { color: var(--tinta); }
.mes-dia.nivel-4 .mes-vaga, .mes-dia.nivel-5 .mes-vaga,
.mes-dia.nivel-4 .mes-sessoes, .mes-dia.nivel-5 .mes-sessoes { color: #fff; }
.mes-dia.nivel-4:hover, .mes-dia.nivel-5:hover,
.mes-dia.nivel-4:focus-visible, .mes-dia.nivel-5:focus-visible { outline-color: #fff; }

.mes-legenda {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  margin-top: .75rem; font-size: .8125rem; color: var(--tinta-2);
}
.mes-legenda .rotulo   { font-weight: 700; color: var(--tinta); }
.mes-legenda .escala   { display: inline-flex; gap: 2px; }
.mes-legenda .escala i {
  width: 1.5rem; height: .875rem; display: block;
  border: 1px solid var(--borda);
}
.mes-legenda .escala .nivel-0 { background: var(--superficie); }
.mes-legenda .escala .nivel-1 { background: #e4f0f0; }
.mes-legenda .escala .nivel-2 { background: #c2dddf; }
.mes-legenda .escala .nivel-3 { background: #8fc2c5; }
.mes-legenda .escala .nivel-4 { background: #2f7c84; }
.mes-legenda .escala .nivel-5 { background: #0c4a4f; }
.mes-legenda .ponta    { color: var(--tinta-3); }
.mes-legenda .nota     { flex: 1 1 18rem; color: var(--tinta-3); }

/* No celular a celula perde o texto secundario, mas NUNCA o numero de
   sessoes: sem ele a densidade ficaria so na cor, e cor sozinha nao e dado */
@media (max-width: 575.98px) {
  /* O grupo de navegacao nao encolhe abaixo do conteudo, entao dividir a
     linha com o botao de trocar de vista estourava a largura do documento em
     8px — rolagem horizontal na pagina inteira por causa de um botao. Cada um
     na sua linha. */
  .pagina-topo .acoes .btn-group          { flex: 1 0 100%; }
  .pagina-topo .acoes .btn-group .btn     { flex: 1; }
  .pagina-topo .acoes .btn-group span.btn { min-width: 0 !important; }

  .mes-dia      { min-height: 3.75rem; padding: .3rem .25rem; align-items: center; }
  .mes-sessoes b { font-size: 1.125rem; margin: 0; }
  .mes-sessoes   { font-size: 0; }        /* some a palavra, fica o numero */
  .mes-vaga     { display: none; }
  .mes-resumo   { gap: .75rem 1.25rem; }
  .mes-numero strong { font-size: 1.125rem; }
}

/* ------------------------------------------------------------------ */
/* Espera                                                              */
/*                                                                     */
/* Nao existe tela de carregamento no sistema, e e de proposito: numa   */
/* navegacao normal o HTML so chega depois da espera, entao um aviso    */
/* embutido nele apareceria justamente quando nao serve mais. Quem      */
/* avisa ali e o proprio navegador. O que precisa de aviso e o que      */
/* acontece SEM trocar de pagina: enviar um formulario e recarregar a   */
/* grade da agenda por fetch.                                          */
/* ------------------------------------------------------------------ */

/* Botao enviando: bloqueado ao clique, mas NUNCA `disabled` — botao com
   name/value sai do formulario quando desabilitado */
.esta-enviando { pointer-events: none; opacity: .8; }

/* A grade em recarga. O atraso e o detalhe que faz funcionar: resposta de
   70ms nao chega a esmaecer, e um piscar rapido incomoda mais que a espera */
.recarregando {
  pointer-events: none;
  opacity: .55;
  transition: opacity .12s ease .2s;
}

@media (prefers-reduced-motion: reduce) {
  .recarregando { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Ajuda                                                               */
/*                                                                     */
/* Texto para ser LIDO, nao varrido: medida de leitura curta, entrelinha */
/* folgada e hierarquia clara. A mesma folha serve a pagina e o modal,   */
/* porque os dois mostram o mesmo conteudo.                             */
/* ------------------------------------------------------------------ */

.ajuda-layout { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }

.ajuda-indice {
  position: sticky; top: 0;
  font-size: .875rem;
  border-right: 1px solid var(--borda); padding-right: 1rem;
}
.ajuda-indice .secao {
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-3); margin: 1rem 0 .35rem;
}
.ajuda-indice .secao:first-child { margin-top: 0; }
.ajuda-indice ul { list-style: none; margin: 0; padding: 0; }
.ajuda-indice a {
  display: block; padding: .3rem .5rem; border-radius: var(--bs-border-radius-sm);
  color: var(--tinta-2); text-decoration: none;
}
.ajuda-indice a:hover { background: var(--petroleo-luz); color: var(--petroleo-esc); }

/*
 * A ajuda usa a largura toda — texto e lista de campos igualmente.
 *
 * A primeira versao segurava os paragrafos na medida de leitura e deixava so
 * a lista de campos crescer. Ficou pior que o problema: a explicacao de campo
 * chegava na borda e o paragrafo ao lado parava no meio da tela, o que le
 * como defeito, nao como decisao.
 *
 * Linha longa cansa, entao a compensacao vem da entrelinha — 1.7 em vez de
 * 1.55. Quem quiser a medida curta de volta troca `none` por `var(--leitura)`
 * aqui e nada mais.
 */
.ajuda-corpo { max-width: none; }
.ajuda-corpo p,
.ajuda-oque,
.ajuda-passos li,
.ajuda-campos dd { line-height: 1.7; }

.ajuda-secao {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--petroleo); margin: 2.5rem 0 .75rem; padding-bottom: .4rem;
  border-bottom: 2px solid var(--petroleo-luz);
}
.ajuda-corpo > .ajuda-secao:first-child { margin-top: 0; }

.ajuda-topico {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--bs-border-radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 1rem;
  /* o cabecalho fixo do app tampa a ancora se ela colar no topo */
  scroll-margin-top: 5rem;
}
.ajuda-topico > header {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem;
  margin-bottom: .5rem;
}
.ajuda-topico > header h3 { font-size: 1.125rem; font-weight: 700; margin: 0; }
.ajuda-topico > header .ir { margin-left: auto; font-size: .8125rem; text-decoration: none; white-space: nowrap; }

/* A frase que responde "para que serve esta tela". E a primeira coisa que a
   pessoa le no modal, entao carrega peso proprio */
.ajuda-oque {
  font-size: 1rem; line-height: 1.5; color: var(--tinta);
  border-left: 3px solid var(--petroleo); padding-left: .875rem; margin-bottom: 1rem;
}

.ajuda-sub {
  font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-3); margin: 1.5rem 0 .5rem;
}

.ajuda-passos { margin: 0 0 .5rem; padding-left: 1.25rem; }
.ajuda-passos li { margin-bottom: .5rem; line-height: 1.55; }

/* Campo e explicacao: o nome fica na coluna da esquerda no desktop, para o
   olho descer pela lista de nomes ate achar o campo que ele procura */
.ajuda-campos { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: .4rem 1.5rem; margin: 0; }

.ajuda-campos dt { font-weight: 700; font-size: .875rem; }
.ajuda-campos dd { margin: 0; line-height: 1.55; color: var(--tinta-2); }

.ajuda-atencao {
  display: flex; gap: .6rem; align-items: flex-start;
  background: #fdf6e3; border: 1px solid #f0e2bd; border-radius: var(--bs-border-radius);
  padding: .7rem .875rem; margin-bottom: .5rem; line-height: 1.5;
}
.ajuda-atencao i { color: #9a6a00; flex-shrink: 0; margin-top: .15rem; }

.ajuda-veja {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 1.25rem 0 0; padding-top: .75rem; border-top: 1px solid var(--borda);
  font-size: .8125rem;
}
.ajuda-veja .rotulo { color: var(--tinta-3); }
.ajuda-veja a {
  text-decoration: none; background: var(--petroleo-luz); color: var(--petroleo-esc);
  padding: .2rem .6rem; border-radius: 999px;
}

.ajuda-fim { margin-top: 2rem; color: var(--tinta-2); font-size: .875rem; }

/* No modal o conteudo ja tem o titulo no cabecalho, e nao ha para onde
   rolar dentro dele — o "veja tambem" leva para a pagina */
.ajuda-conteudo .ajuda-oque { margin-top: 0; }

@media (max-width: 991.98px) {
  .ajuda-layout  { grid-template-columns: 1fr; gap: 1rem; }
  .ajuda-indice  { position: static; border-right: 0; border-bottom: 1px solid var(--borda);
                   padding: 0 0 .75rem; }
  .ajuda-indice ul { display: flex; flex-wrap: wrap; gap: .25rem; }
  .ajuda-campos  { grid-template-columns: 1fr; gap: .1rem; }
  .ajuda-campos dd { margin-bottom: .6rem; }
  .ajuda-topico  { padding: 1rem; }
}

/* Impresso, o manual e um documento: sem menu, sem indice, sem botoes */
@media print {
  .app-lateral, .app-nav, .app-topo, .pagina-topo .acoes, .ajuda-indice,
  .ajuda-topico > header .ir { display: none !important; }
  .ajuda-layout { display: block; }
  .ajuda-corpo  { max-width: none; }
  .ajuda-topico { border: 0; padding: 0; margin-bottom: 1.5rem; break-inside: avoid; }
  .ajuda-secao  { break-before: page; }
}

/* ------------------------------------------------------------------ */
/* Botao de icone                                                      */
/*                                                                     */
/* Botao cujo rotulo some em tela pequena vira um quadrado: sem isto o  */
/* icone fica torto dentro de uma caixa larga demais, e tres botoes     */
/* vizinhos aparecem com tres larguras diferentes.                     */
/*                                                                     */
/* A margem do rotulo mora no PROPRIO rotulo (ms-1), nunca no icone —   */
/* margem no icone sobrevive ao rotulo escondido e desloca o desenho.   */
/* ------------------------------------------------------------------ */
.btn-icone {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; line-height: 1;
}
.btn-icone > .bi { font-size: 1rem; }

/* No celular a barra de cima e alvo de dedo, nao de mouse: 44px e o
   minimo confortavel, e e a mesma regra do resto do sistema */
@media (max-width: 767.98px) {
  .app-topo .btn-icone,
  .app-topo .btn-sm { min-height: 2.75rem; min-width: 2.75rem; }
  .app-topo .btn-sm.dropdown-toggle { min-width: 0; }
}

/* ------------------------------------------------------------------ */
/* Acabamento: peso, firmeza e verde                                   */
/*                                                                     */
/* Nada aqui muda o desenho — muda o quanto ele se impoe. A fonte       */
/* variavel deu os pesos intermediarios que faltavam; estas regras      */
/* dizem onde cada um pousa.                                           */
/* ------------------------------------------------------------------ */

/* O cromo da interface: o que a pessoa le sem estar lendo */
.app-nav .nav-link,
.pagina-topo .contexto strong,
.form-label,
.table > thead th,
.grade thead th,
.btn,
.nav-tabs .nav-link,
.badge { font-weight: var(--peso-cromo); }

/* Rotulo de secao do menu: era o texto mais fraco da tela */
.app-secao {
  font-weight: 700;
  color: var(--tinta-3);
  letter-spacing: .07em;
}

/* Titulos: peso cheio e tracking mais curto. Em corpo grande, a Atkinson
   abre demais entre letras e o titulo perde borda. */
h1, h2, h3, .pagina-topo .titulo, .modal-title, .card-header {
  font-weight: 800;
}
.pagina-topo .titulo { letter-spacing: -.025em; }
h1, .h1 { letter-spacing: -.02em; }

/* O numero que ela le de relance — indicador, total, contador. Aqui o 800
   nao e enfeite: e o que separa o dado do rotulo sem precisar de cor. */
.stat-num,
.mes-numero strong,
.mes-sessoes b,
.display-5, .display-6 {
  font-weight: var(--peso-numero);
  letter-spacing: -.02em;
}

/* Verde: o valor a receber e um dos dois numeros que ela abre o sistema
   para ver. Com o verde do tema ele lia mais claro que o preto ao lado. */
.text-success { color: var(--sucesso) !important; }
.stat-num.text-success { color: var(--sucesso) !important; }

/* Fundo verde continua claro — ali o contraste que importa e o do texto
   escuro por cima, nao o da propria cor */
.alert-success { border-left-color: var(--sucesso); background: var(--sucesso-luz); }
.alert-success .bi:first-child { color: var(--sucesso); }

/* Cartao: a borda de 1px quase branca fazia o cartao flutuar em vez de
   pousar. Um passo mais firme basta — nao vira caixa preta. */
.card { border-color: var(--borda); }
.card-header { border-bottom-color: var(--borda); background: var(--superficie); }

/* Numero tabular em tudo que e dado, nao so onde alguem lembrou */
.tabular, .stat-num, .table td, .table th { font-variant-numeric: tabular-nums; }

/*
 * A marca e a MESMA arte do favicon e do PWA, em `icon-192.png`: o icone da
 * aba e o do cabecalho sao um arquivo so.
 *
 * 🔴 Nao existe mais `color` aqui. Ela era SVG inline e se repintava com
 * `currentColor`; agora e arte de tres cores fixas, com a fenda do meio
 * vazada. Todas as superficies onde ela aparece sao claras. Sobre fundo
 * petroleo os crescentes somem no fundo — ali precisa de outro arquivo, nao
 * de outra cor.
 */
.marca-simbolo {
  display: inline-block;
  vertical-align: -.18em;
  flex-shrink: 0;
  object-fit: contain;
}

/*
 * A forma completa e larga (4,19:1): a altura manda e a largura acompanha.
 * O `max-width` e o que impede ela de empurrar a barra num celular estreito —
 * era o papel do `text-truncate` quando o nome era texto.
 */
.marca-completa {
  display: block;
  height: 1.75em;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ------------------------------------------------------------------ */
/* Paragrafo                                                           */
/*                                                                     */
/* 🔴 O Litera traz `p { font-family: Georgia, ... serif }` — e a regra */
/* de elemento vence a de `body`, entao TODO paragrafo do sistema saia  */
/* em serifa: observacao de paciente, texto de evolucao, ajuda, aviso.  */
/*                                                                     */
/* Isso derruba a tese da casa. A Atkinson foi escolhida por ter letras */
/* desambiguadas (1, l e I nao se confundem) — a Georgia nao tem nada   */
/* disso, e prontuario lido de relance no celular e exatamente onde     */
/* essa diferenca importa. Passou despercebido porque serifa em texto   */
/* corrido parece decisao de design, nao defeito.                       */
/*                                                                     */
/* A abertura do site publico continua em Georgia de proposito: la e    */
/* escolha editorial, declarada por classe, que vence esta regra.       */
/* ------------------------------------------------------------------ */
p { font-family: inherit; }