/* Repasses 360 — leiaute de TELA (moldura, menu, cartões, peças, formulários, tabelas).
   O extrato (.folha, papel A4) vive em acuris.css e não usa nada daqui; os nomes de
   classe deste arquivo foram escolhidos para não colidir com os do extrato
   (.etiqueta e não .selo, .faixa e não .aviso, .valor e não .num, .aba-painel e não .painel).

   Régua (skill refactoring-ui, contexto tela):
     tipo px:   11 (só mono em caixa alta) · 15 · 17 · 21 · 25 · 31 · 38
     espaço px: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64
     raios px:  9 campo e etiqueta · 10 botão · 16 cartão · 18 bloco escuro
   Cores, fontes, sombras e gradiente: só var(--ac-*), declaradas em acuris.css.
   Âmbar puro (--ac-ambar) em UM elemento por tela: .botao-primario. O centro do símbolo
   não conta. "Atenção" usa --ac-atencao-fundo com texto --ac-sobre-ambar, sem limite.
   Piso de texto 15 px; 11 px só em rótulo mono caixa alta. Toque mínimo 44 px. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--ac-sans); font-size: 17px; line-height: 1.6;
  color: var(--ac-tinta); background: var(--ac-fundo); -webkit-font-smoothing: antialiased;
}
a { color: var(--ac-azul); }
a:hover { color: var(--ac-marinho); }
h1, h2, h3, h4 { margin: 0; color: var(--ac-marinho); font-weight: 600; text-wrap: pretty; }
h1 { font-size: 31px; line-height: 1.2; font-stretch: 110%; letter-spacing: -.014em; }
h2 { font-size: 25px; line-height: 1.3; font-stretch: 110%; letter-spacing: -.014em; }
h3 { font-size: 21px; line-height: 1.45; }
h4 { font-size: 17px; line-height: 1.6; }
p { margin: 0; max-width: 62ch; text-wrap: pretty; }
p + p, .cartao > p + p { margin-top: 8px; }
:focus-visible { outline: 2px solid var(--ac-azul); outline-offset: 2px; }

/* ---- texto ---- */
.mono { font-family: var(--ac-mono); font-variant-numeric: tabular-nums; }
.rotulo { font-family: var(--ac-mono); font-size: 11px; line-height: 1.4; letter-spacing: .22em; text-transform: uppercase; color: var(--ac-rotulo); margin: 0; }
.apoio { font-size: 15px; line-height: 1.55; color: var(--ac-rotulo); }
.texto-suave { color: var(--ac-texto); }
.destaque { color: var(--ac-erro); font-weight: 600; }
.valor { font-family: var(--ac-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--ac-marinho); }
.valor-grande { font-family: var(--ac-mono); font-variant-numeric: tabular-nums; font-size: 31px; line-height: 1.2; color: var(--ac-marinho); margin: 8px 0; }
.selecionavel { user-select: all; }
.rotulo-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.marcada { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.marcada li { display: flex; gap: 12px; max-width: 62ch; }
.marcada li::before { content: "·"; color: var(--ac-azul); font-weight: 600; flex: none; }

/* ---- faixa do ambiente paralelo (12/11/2026, repasses/ambiente.py) ----
   Presa no topo de toda tela, acima da moldura, inclusive na entrada. Cores de atenção do kit. */
.faixa-paralelo {
  position: sticky; top: 0; z-index: 1000; margin: 0; padding: 8px 16px; text-align: center;
  font-family: var(--ac-sans); font-size: 14px; font-weight: 600; line-height: 1.4;
  background: var(--ac-atencao-fundo); color: var(--ac-sobre-ambar); border-bottom: 2px solid var(--ac-ambar-texto);
}

/* ---- moldura: topo ---- */
.topo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  min-height: 56px; padding: 8px 24px; background: var(--ac-marinho); color: var(--ac-branco);
}
.topo-marca { display: inline-flex; align-items: center; gap: 8px; color: var(--ac-branco); text-decoration: none; }
.topo-marca:hover { color: var(--ac-branco); }
.wordmark { font-weight: 500; font-stretch: 118%; letter-spacing: .2em; padding-left: .2em; font-size: 15px; line-height: 1.55; }
.topo-sep { width: 1px; height: 24px; background: var(--ac-nevoa); opacity: .5; }
.topo-produto { font-size: 15px; line-height: 1.55; font-weight: 600; white-space: nowrap; }
.topo-empresa { font-weight: 400; color: var(--ac-nevoa); }
.topo-usuario { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topo-nome { color: var(--ac-nevoa); }
.topo-link {
  display: inline-flex; align-items: center; min-height: var(--ac-toque); padding: 0 12px; border-radius: 9px;
  color: var(--ac-branco); font: inherit; font-size: 15px; text-decoration: none; background: transparent; border: 0; cursor: pointer;
}
.topo-link:hover { background: var(--ac-sobre-escuro-hover); color: var(--ac-branco); }
form.inline { display: inline; margin: 0; }
form.avisos-grupo { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; margin: 0; }
form.avisos-grupo label { display: inline-flex; gap: .3rem; align-items: center; white-space: nowrap; }

/* ---- moldura: menu enxuto (11/11/2026, decisão D3) ----
   Seis itens, sem grupos, em texto comum: o peso do cabeçalho é do campo "Consultar".
   O lugar do item "Sua vez" (com contador) fica antes dos seis; ver _moldura.html. */
.menu { display: flex; flex-direction: column; padding: 12px 0; }
.menu a {
  display: flex; align-items: center; gap: 8px; min-height: var(--ac-toque); padding: 8px 16px 8px 12px;
  border-left: 4px solid transparent; color: var(--ac-texto); text-decoration: none; font-size: 15px; line-height: 1.55;
}
.menu a:hover { color: var(--ac-marinho); background: var(--ac-superficie); }
.menu a.ativo { color: var(--ac-marinho); font-weight: 600; border-left-color: var(--ac-azul); background: var(--ac-superficie); }
.menu-contador { margin-left: auto; min-width: 24px; padding: 0 8px; border-radius: 12px; background: var(--ac-fundo);
  color: var(--ac-marinho); font-family: var(--ac-mono); font-size: 13px; line-height: 24px; text-align: center; }
.menu-lateral { display: none; background: var(--ac-branco); border-right: 1px solid var(--ac-borda); }
.menu-movel { background: var(--ac-branco); border-bottom: 1px solid var(--ac-borda); }
.menu-movel > summary {
  list-style: none; cursor: pointer; min-height: var(--ac-toque); display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; font-size: 15px; font-weight: 600; color: var(--ac-marinho);
}
.menu-movel > summary::-webkit-details-marker { display: none; }
.menu-movel > summary::before { content: "+"; font-family: var(--ac-mono); width: 16px; color: var(--ac-azul); }
.menu-movel[open] > summary::before { content: "−"; }
.menu-movel .menu { border-top: 1px solid var(--ac-fundo); padding: 4px 0; }

/* O nome de quem entrou não espreme o "Consultar": nome longo corta com reticências. */
.topo-nome { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A engrenagem "Ajustes", no alto. No celular, só o desenho. */
.topo-engrenagem { gap: 6px; }
.topo-link.ativo { background: var(--ac-sobre-escuro-hover); }

/* ---- moldura: o campo "Consultar" (11/11/2026, decisão A3) ----
   O elemento de maior peso do cabeçalho: caixa branca de 48 px sobre o marinho, larga no
   computador e numa linha só dela no celular. Sem âmbar: o âmbar da tela é do botão. */
.topo-consultar { flex: 1 1 320px; max-width: 640px; min-width: 0; margin: 0 auto; }
.consultar { position: relative; margin: 0; }
.consultar-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.consultar-caixa {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px 0 14px; border-radius: 12px;
  background: var(--ac-branco); color: var(--ac-marinho); box-shadow: var(--ac-elev-2);
}
.consultar-caixa:focus-within { box-shadow: 0 0 0 3px var(--ac-nevoa), var(--ac-elev-2); }
.consultar-lupa { flex: none; color: var(--ac-azul); }
.consultar-campo {
  flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 17px; color: var(--ac-tinta); -webkit-appearance: none; appearance: none;
}
.consultar-campo::placeholder { color: var(--ac-rotulo); opacity: 1; }
.consultar-campo:focus-visible { outline: none; }
.consultar-atalho {
  flex: none; padding: 0 7px; border: 1px solid var(--ac-borda); border-radius: 6px; background: var(--ac-superficie);
  color: var(--ac-rotulo); font-family: var(--ac-mono); font-size: 13px; line-height: 22px;
}
.consultar-caixa:focus-within .consultar-atalho { display: none; }
.consultar-lista {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; max-height: min(70vh, 560px); overflow-y: auto;
  overscroll-behavior: contain; padding: 4px 0 8px; background: var(--ac-branco); border: 1px solid var(--ac-borda);
  border-radius: 12px; box-shadow: var(--ac-elev-3); color: var(--ac-tinta);
}
.consultar-lista[hidden] { display: none; }
.consultar-bloco + .consultar-bloco { border-top: 1px solid var(--ac-fundo); }
.consultar-bloco-titulo {
  display: flex; justify-content: space-between; gap: 8px; max-width: none; margin: 0; padding: 10px 16px 4px;
  font-family: var(--ac-mono); font-size: 11px; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: var(--ac-rotulo);
}
.consultar-opcao { display: flex; flex-direction: column; justify-content: center; min-height: var(--ac-toque); padding: 6px 16px; text-decoration: none; color: inherit; }
.consultar-opcao:hover, .consultar-opcao[aria-selected="true"] { background: var(--ac-superficie); color: inherit; }
.consultar-opcao[aria-selected="true"] { box-shadow: inset 4px 0 0 var(--ac-azul); }
.consultar-item-titulo { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--ac-marinho); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.consultar-item-detalhe { font-size: 13px; line-height: 1.4; color: var(--ac-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.consultar-mais, .consultar-tudo { font-size: 15px; font-weight: 600; color: var(--ac-azul); }
.consultar-tudo { border-top: 1px solid var(--ac-fundo); margin-top: 4px; }
.consultar-vazio { max-width: none; margin: 0; padding: 12px 16px; color: var(--ac-texto); font-size: 15px; }
.consultar-total { font-family: var(--ac-mono); font-size: 13px; font-weight: 400; color: var(--ac-rotulo); letter-spacing: 0; }

/* A página /consultar: um cartão por tipo, duas colunas no computador. */
.consultar-grupos { display: grid; gap: 16px; align-items: start; }
.consultar-grupo h2 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 19px; }
.consultar-itens { list-style: none; margin: 0; padding: 0; }
.consultar-itens a { display: flex; flex-direction: column; gap: 2px; min-height: var(--ac-toque); padding: 8px 0; border-top: 1px solid var(--ac-fundo); text-decoration: none; color: inherit; }
.consultar-itens li:first-child a { border-top: 0; }
.consultar-itens a:hover .consultar-item-titulo { color: var(--ac-azul); }
.consultar-itens .consultar-item-titulo, .consultar-itens .consultar-item-detalhe { white-space: normal; }
.consultar-ver-todos { margin: 8px 0 0; font-weight: 600; }
.consultar-exemplos { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 4px; }
.consultar-exemplos .apoio { margin-left: 8px; }

/* ---- moldura: a barra de abas da tela (Atendimentos · Agenda · Glosas...) ---- */
.abas-tela {
  display: flex; gap: 4px; margin: 0 0 24px; border-bottom: 1px solid var(--ac-borda);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.abas-tela::-webkit-scrollbar { display: none; }
.abas-tela a {
  flex: none; display: inline-flex; align-items: center; min-height: var(--ac-toque); padding: 8px 14px; margin-bottom: -1px;
  border-bottom: 3px solid transparent; color: var(--ac-texto); text-decoration: none; font-size: 15px; white-space: nowrap;
}
.abas-tela a:hover { color: var(--ac-marinho); }
.abas-tela a.ativo { color: var(--ac-marinho); font-weight: 600; border-bottom-color: var(--ac-azul); }

@media (min-width: 900px) { .consultar-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) {
  .topo-consultar { order: 10; flex: 1 1 100%; max-width: none; }
  .consultar-atalho, .topo-engrenagem-texto { display: none; }
  .abas-tela { margin: -4px -16px 16px; padding: 0 12px; }
}
@media (max-width: 479px) {
  /* No celular estreito o alto cabe em duas linhas: marca e botões; depois o "Consultar". */
  .topo { gap: 8px 12px; }
  .topo-empresa, .topo-marca .wordmark { display: none; }
  .topo-usuario { gap: 0; }
  .topo-usuario .topo-link { padding: 0 8px; }
}
@media (hover: none) { .consultar-atalho { display: none; } }
@media print { .abas-tela, .topo-consultar { display: none !important; } }

/* ---- moldura: corpo e rodapé ---- */
/* minmax(0,1fr) e min-width:0: sem isso uma tabela larga alarga a página inteira no
   celular em vez de rolar dentro de .rolagem. */
.corpo-site { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); }
.conteudo { width: 100%; min-width: 0; max-width: 1200px; margin: 0 auto; padding: 16px; }
.rodape-site { display: flex; justify-content: space-between; gap: 16px; padding: 16px 24px; color: var(--ac-texto); font-size: 15px; }

/* ---- cabeçalho de tela ---- */
.cabecalho-pagina { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
.cabecalho-pagina:has(.cabecalho-acao) { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.cabecalho-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cabecalho-acao { display: flex; flex-wrap: wrap; gap: 8px; }
/* "Como funciona" (30/10/2026): a frase do topo fica curta; o detalhe abre ao clicar. */
.como-funciona > summary { cursor: pointer; width: fit-content; padding: 8px 0; color: var(--ac-azul); font-size: 15px; font-weight: 600; }
.como-funciona > summary:hover { color: var(--ac-marinho); }
.como-funciona .marcada { margin: 4px 0 8px; font-size: 15px; line-height: 1.55; color: var(--ac-texto); }
/* Bloco "Leitura" da conferência, só do desenvolvedor (11/11/2026). */
.leitura-do-desenvolvedor { margin: 0 0 12px; }
.leitura-lista { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 4px 0 8px; font-size: 14px; }
.leitura-lista dt { color: var(--ac-rotulo); }
.leitura-lista dd { margin: 0; overflow-wrap: anywhere; }
.leitura-motivos { margin: 0; padding-left: 18px; }
@media screen and (max-width: 560px) {
  .leitura-lista { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .leitura-lista dd { margin-bottom: 8px; }
}
.cabecalho-pagina .rotulo { margin-bottom: 4px; color: var(--ac-texto); }
.voltar { font-size: 15px; margin-bottom: 4px; }
.voltar a { text-decoration: none; }
.titulo-secao { margin: 32px 0 12px; }

/* ---- cartão ---- */
.cartao { display: block; background: var(--ac-branco); border: 1px solid var(--ac-borda); border-radius: 16px; padding: 16px; margin-bottom: 16px; }
.cartao > h2, .cartao > h3 { margin-bottom: 12px; }
.cartao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cartao-login { max-width: 440px; margin: 32px auto; }
.cartao-repasse { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.cartao-repasse:hover { border-color: var(--ac-nevoa); box-shadow: var(--ac-elev-2); color: inherit; }
.lista-cartoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

/* ---- fila de conferência em cartões ---- */
.cartoes-fila { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cartao-fila { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--ac-borda); border-radius: 12px; padding: 16px; background: var(--ac-branco); }
.cartao-fila.atencao { border-color: var(--ac-ambar-texto); }
.cartao-fila-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cartao-fila-topo .rotulo { margin: 0; }
.cartao-fila-titulo { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 17px; color: var(--ac-marinho); }
.cartao-fila-texto { margin: 0; font-size: 15px; line-height: 1.45; }
.cartao-fila-dados { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.cartao-fila-dados dt { color: var(--ac-rotulo); }
.cartao-fila-dados dd { margin: 0; overflow-wrap: anywhere; }
.texto-com-quebras { white-space: pre-wrap; }
.cartao-fila .botao { align-self: flex-start; margin-top: auto; }

/* ---- número grande (mesa do dia, conta) ---- */
.mesa { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
.numero { display: block; background: var(--ac-branco); border: 1px solid var(--ac-borda); border-radius: 16px; padding: 16px; text-decoration: none; color: inherit; }
a.numero:hover { border-color: var(--ac-nevoa); box-shadow: var(--ac-elev-2); color: inherit; }
.numero .v { font-family: var(--ac-mono); font-variant-numeric: tabular-nums; font-size: 38px; line-height: 1.12; color: var(--ac-marinho); margin: 8px 0 0; }
.numero .c { font-size: 15px; line-height: 1.55; color: var(--ac-texto); margin: 4px 0 0; }
.numero.atencao .v { color: var(--ac-ambar-texto); }
.numero.erro .v { color: var(--ac-erro); }
/* Valor em reais (30/10/2026): a fonte acompanha a largura do quadro, de 16px a 24px, e
   o valor longo quebra depois do "R$" em vez de vazar. 20px fica para navegador antigo. */
.numero:has(> .v-dinheiro) { container-type: inline-size; }
.numero .v.v-dinheiro { font-size: 20px; font-size: clamp(16px, 11cqi, 24px); white-space: normal; overflow-wrap: anywhere; }
.acoes-celula { display: flex; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
.sem-quebra { white-space: nowrap; }
.coluna-larga { min-width: 240px; }

/* ---- etiqueta de estado: cinco tons, sempre com a palavra ---- */
.etiqueta {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 4px 8px; border-radius: 9px;
  font-family: var(--ac-mono); font-size: 11px; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap; background: var(--ac-fundo); color: var(--ac-texto); text-decoration: none; font-weight: 500;
}
.etiqueta-ok { background: var(--ac-ok-fundo); color: var(--ac-ok); }
.etiqueta-atencao { background: var(--ac-atencao-fundo); color: var(--ac-sobre-ambar); }
.etiqueta-erro { background: var(--ac-erro-fundo); color: var(--ac-erro); }
.etiqueta-info { background: var(--ac-info-fundo); color: var(--ac-azul); }
a.etiqueta:hover { box-shadow: var(--ac-elev-1); }
.contagem { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---- faixa de aviso: começa pelo fato ---- */
.faixa { border-left: 4px solid var(--ac-nevoa); background: var(--ac-superficie); border-radius: 0 10px 10px 0; padding: 12px 16px; margin-bottom: 16px; }
.faixa p { max-width: none; }
.faixa-atencao { border-left-color: var(--ac-ambar-texto); background: var(--ac-atencao-fundo); }
.faixa-erro { border-left-color: var(--ac-erro); background: var(--ac-erro-fundo); }
.faixa-ok { border-left-color: var(--ac-ok); background: var(--ac-ok-fundo); }
.faixa-info { border-left-color: var(--ac-azul); background: var(--ac-info-fundo); }
.faixa-atencao .apoio { color: var(--ac-sobre-ambar); }
.cartao.faixa-atencao, .cartao.faixa-erro, .cartao.faixa-ok, .cartao.faixa-info { border-left-width: 4px; border-radius: 16px; }
.cartao.faixa-atencao { border-left-color: var(--ac-ambar-texto); }
.cartao.faixa-erro { border-left-color: var(--ac-erro); }
.cartao.faixa-ok { border-left-color: var(--ac-ok); }
.cartao.faixa-info { border-left-color: var(--ac-nevoa); }
.nota-atencao { display: inline-block; font-size: 15px; line-height: 1.55; padding: 4px 8px; border-radius: 9px; background: var(--ac-atencao-fundo); color: var(--ac-sobre-ambar); }

/* ---- avisos (flash) ---- */
.avisos { margin-bottom: 16px; display: grid; gap: 8px; }
.aviso-flash { margin: 0; padding: 12px 16px; border-radius: 10px; border-left: 4px solid var(--ac-nevoa); background: var(--ac-superficie); color: var(--ac-tinta); max-width: none; }
.aviso-sucesso { border-left-color: var(--ac-ok); background: var(--ac-ok-fundo); color: var(--ac-ok); }
.aviso-erro { border-left-color: var(--ac-erro); background: var(--ac-erro-fundo); color: var(--ac-erro); }
.aviso-aviso { border-left-color: var(--ac-ambar-texto); background: var(--ac-atencao-fundo); color: var(--ac-sobre-ambar); }

/* ---- estado vazio: a frase e o próximo passo ---- */
.vazio { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; color: var(--ac-texto); padding: 32px 16px; }
.vazio p { max-width: 44ch; }

/* ---- botões: âmbar na ação principal, um por tela ---- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ac-toque);
  padding: 8px 24px; border-radius: 10px; border: 1px solid var(--ac-borda); background: var(--ac-branco); color: var(--ac-marinho);
  font: inherit; font-size: 17px; line-height: 1.6; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.botao:hover { border-color: var(--ac-azul); color: var(--ac-azul); }
.botao-primario { background: var(--ac-ambar); border-color: var(--ac-ambar); color: var(--ac-sobre-ambar); }
.botao-primario:hover { background: var(--ac-ambar-claro); border-color: var(--ac-ambar-claro); color: var(--ac-sobre-ambar); }
.botao-secundario { background: var(--ac-marinho); border-color: var(--ac-marinho); color: var(--ac-branco); }
.botao-secundario:hover { background: var(--ac-azul); border-color: var(--ac-azul); color: var(--ac-branco); }
.botao-perigo { color: var(--ac-erro); }
.botao-perigo:hover { border-color: var(--ac-erro); color: var(--ac-erro); }
.botao-mini { min-height: 36px; padding: 4px 12px; font-size: 15px; }
.botao:disabled { opacity: .5; cursor: default; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--ac-azul); cursor: pointer; text-decoration: underline; }
.acoes-linha, .acoes-finais { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.acoes-linha form, .acoes-finais form { margin: 0; }
.acoes-celula { white-space: nowrap; }
.acoes-celula form { display: inline-block; margin-right: 4px; }
/* ---- documentos recebidos: um cartão por documento ---- */
.lista-documentos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.cartao-documento { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; border: 1px solid var(--ac-borda); border-radius: 16px; background: var(--ac-branco); }
.cartao-documento p { margin: 0; max-width: none; overflow-wrap: anywhere; }
.cartao-documento-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cartao-documento-topo h3 { margin: 0; font-size: 18px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.cartao-documento-obs { font-size: 15px; background: var(--ac-superficie); border-radius: 10px; padding: 8px 12px; }
.cartao-documento-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--ac-borda); }
.cartao-documento-acoes form { margin: 0; }
.paginacao { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }

/* ---- filtros: faixa de botões com contagem ---- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filtro {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px; border-radius: 9px;
  border: 1px solid var(--ac-borda); background: var(--ac-branco); color: var(--ac-texto); font-size: 15px; line-height: 1.55; text-decoration: none;
}
.filtro b { font-family: var(--ac-mono); font-weight: 500; color: var(--ac-marinho); }
.filtro:hover { border-color: var(--ac-azul); color: var(--ac-azul); }
.filtro-ativo, .filtro-ativo:hover { background: var(--ac-marinho); border-color: var(--ac-marinho); color: var(--ac-branco); }
.filtro-ativo b { color: var(--ac-nevoa); }

/* ---- formulários ---- */
.formulario { display: grid; gap: 8px; }
.formulario label { font-family: var(--ac-mono); font-size: 11px; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: var(--ac-rotulo); margin-top: 12px; }
.formulario > label:first-child, .campos-linha > label { margin-top: 0; }
.formulario input, .formulario textarea, .formulario select {
  font-family: var(--ac-sans); font-size: 17px; line-height: 1.6; letter-spacing: 0; text-transform: none;
  width: 100%; min-height: 50px; padding: 8px 16px; border: 1px solid var(--ac-borda); border-radius: 9px;
  background: var(--ac-superficie); color: var(--ac-tinta);
}
.formulario input[type="file"] { padding: 12px 16px; }
.formulario textarea { min-height: 96px; resize: vertical; }
.formulario input:focus, .formulario textarea:focus, .formulario select:focus, .campo-inline:focus {
  outline: none; border-color: var(--ac-azul); background: var(--ac-branco); box-shadow: var(--ac-anel-foco);
}
.formulario button { margin-top: 16px; justify-self: start; }
.formulario .ajuda { margin-top: -4px; }
.ajuda { font-size: 15px; line-height: 1.55; color: var(--ac-rotulo); max-width: 62ch; }
.campos-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 16px; align-items: end; }
.campos-linha > label { display: flex; flex-direction: column; gap: 8px; }
.campos-linha > button, .campos-linha > .botao { margin-top: 0; }
.campos-linha select { min-width: 220px; }

fieldset { border: 1px solid var(--ac-borda); border-radius: 10px; padding: 16px; margin: 0 0 16px; }
legend { font-weight: 600; color: var(--ac-marinho); padding: 0 4px; }
.campo-inline {
  font-family: var(--ac-sans); font-size: 15px; min-height: 36px; max-width: 100%; padding: 4px 12px;
  border: 1px solid var(--ac-borda); border-radius: 9px; background: var(--ac-branco); color: var(--ac-tinta);
}

/* ---- tabelas: normal e compacta; no celular rola de lado com a primeira coluna presa ---- */
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.tabela th {
  font-family: var(--ac-mono); font-size: 11px; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ac-rotulo); font-weight: 500; text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--ac-borda);
  vertical-align: bottom; white-space: nowrap;
}
.tabela td { padding: 12px; border-bottom: 1px solid var(--ac-fundo); vertical-align: top; color: var(--ac-texto); }
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela-compacta td { padding: 8px 12px; }
.tabela th.valor { text-align: right; }
.tabela tr.inativo td { color: var(--ac-rotulo); }
.tabela tr.atencao td { background: var(--ac-atencao-fundo); }
.tabela tr.erro td { background: var(--ac-erro-fundo); }
/* Cartões (30/10/2026): a parcela recebida no período do filtro. */
.tabela tr.do-periodo td { background: var(--ac-info-fundo); }
.tabela .rod-total td { font-weight: 600; color: var(--ac-marinho); }
.tabela-extraido th { width: 40%; text-transform: none; letter-spacing: 0; font-family: var(--ac-sans); font-size: 15px; white-space: normal; vertical-align: top; }
.tabela-extraido td { word-break: break-word; }
/* Fila de equipe: formulário dentro da célula pede largura fixa (ver equipe.html). */
.tabela-equipe { table-layout: fixed; min-width: 56rem; }
.tabela-equipe th { letter-spacing: .18em; }
.tabela-equipe td { overflow-wrap: break-word; }
.tabela-equipe .etiqueta { white-space: normal; max-width: 100%; }
.tabela-equipe .col-atendimento { width: 12%; }
.tabela-equipe .col-funcao { width: 15%; }
.tabela-equipe .col-nome { width: 16%; }
.tabela-equipe .col-registro { width: 12%; }
.tabela-equipe .col-situacao { width: 15%; }
.tabela-equipe .col-decisao { width: 30%; }
.nota-confianca { display: block; margin-top: 4px; font-size: 15px; color: var(--ac-rotulo); }
.lista-eventos { list-style: none; padding: 0; margin: 0; font-size: 15px; display: grid; gap: 4px; }

/* ---- peças de telas específicas ---- */
/* envio */
.area-solta { border: 2px dashed var(--ac-claro); border-radius: 16px; padding: 24px 16px; text-align: center; background: var(--ac-superficie); transition: border-color .15s, background .15s; }
.area-solta.arrastando { border-color: var(--ac-azul); background: var(--ac-info-fundo); }
.area-solta input[type="file"] { margin-top: 12px; width: 100%; }
.area-solta p { margin: 0 0 4px; max-width: none; }
#contagem-arquivos:not(:empty) { margin-top: 8px; color: var(--ac-azul); font-weight: 600; }
.log { font-family: var(--ac-mono); font-size: 15px; background: var(--ac-tinta); color: var(--ac-papel); padding: 12px 16px; border-radius: 10px; overflow-x: auto; white-space: pre-wrap; }
.senha-gerada { border-left: 4px solid var(--ac-ambar-texto); background: var(--ac-atencao-fundo); }
.erro-pagina { text-align: center; padding: 32px 16px; }

/* agenda de produção: a nota do valor cru desce para baixo do número. Sem isto o
   nowrap de .valor põe a frase inteira numa linha só e estica a coluna. A etiqueta de
   estado quebra em duas linhas ("Recebido pela empresa" numa linha só empurra a coluna
   do valor para fora da tela). */
.valor .apoio { display: block; white-space: normal; max-width: 22ch; margin-left: auto; font-family: var(--ac-sans); text-align: right; }
.tabela-agenda .etiqueta { white-space: normal; }

/* caixa de marcar dentro de um .formulario (conta-corrente): sem isto ela herda a
   largura e a altura do campo de texto e a frase sai em caixa alta, embaixo. */
.formulario .campo-marca { display: flex; align-items: center; gap: 8px; margin-top: 12px;
  font-family: var(--ac-sans); font-size: 17px; line-height: 1.6; letter-spacing: 0;
  text-transform: none; color: var(--ac-tinta); }
.formulario .campo-marca input { width: auto; min-height: 24px; }

/* trocar senha: o primeiro rótulo do formulário não pode encostar no título. */
.cartao-senha h1 { margin-bottom: 16px; }
.link-por-email { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ac-borda); }

/* conferência dividida (24/10/2026): o papel em cima, com 40% da altura, e os campos
   embaixo, com 60%; cada faixa rola sozinha e a página de fora não rola. A proporção mora
   em --parte-papel (25 a 70), que a alça muda pelo app.js; as duas faixas a repartem como
   fator de crescimento, então a alça não entra na conta.
   Corpo, moldura e miolo viram colunas flexíveis presas à altura da janela. ``min-height: 0``
   em cada nível é o que deixa a faixa rolar por dentro em vez de esticar a página. dvh, e
   não vh, porque no celular a barra de endereço some e volta e o vh não acompanha. */
body.tela-dividida { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.tela-dividida .corpo-site { min-height: 0; grid-template-rows: minmax(0, 1fr); }
.tela-dividida .menu-lateral { overflow-y: auto; overscroll-behavior: contain; }
.tela-dividida .menu-movel[open] .menu { max-height: 60vh; overflow-y: auto; }
.tela-dividida .conteudo { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding-bottom: 16px; }
.tela-dividida .conteudo > * { flex: none; }
.tela-dividida .conteudo > .conferencia-dividida { flex: 1 1 0; }
.tela-dividida .rodape-site { display: none; }
.tela-dividida .cabecalho-pagina { margin-bottom: 16px; }
.conferencia-dividida { --parte-papel: 40; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.faixa-papel { flex: var(--parte-papel) 1 0; min-height: 0; display: flex; flex-direction: column; position: relative;
  background: var(--ac-papel); border: 1px solid var(--ac-borda); border-radius: 16px; overflow: hidden; }
.faixa-campos { flex: calc(100 - var(--parte-papel)) 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; }
.faixa-campos > :last-child { margin-bottom: 0; }

/* a barra do papel: tamanho, "Abrir o PDF inteiro" e o recado do trecho aceso */
.papel-ferramentas { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--ac-branco); border-bottom: 1px solid var(--ac-borda); }
.papel-ferramentas .botao { min-height: var(--ac-toque); }
.papel-ferramentas [data-zoom="menos"], .papel-ferramentas [data-zoom="mais"] { width: var(--ac-toque); padding: 0; font-family: var(--ac-mono); font-size: 21px; }
.papel-ferramentas [data-zoom="largura"][aria-pressed="true"] { border-color: var(--ac-azul); color: var(--ac-azul); }
/* ``.botao`` declara display e venceria o ``hidden``: sem JS os botões de tamanho não aparecem. */
.papel-ferramentas [hidden] { display: none; }
.papel-zoom { min-width: 48px; text-align: center; font-size: 15px; color: var(--ac-texto); }
.papel-aviso { flex: 1 1 12ch; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.papel-aviso:empty { display: none; }
.papel-rolagem { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 12px; }
@media (pointer: fine) { .papel-rolagem { cursor: grab; } }
.papel-rolagem.arrastando { cursor: grabbing; user-select: none; }
.papel-pagina { margin: 0 0 16px; }
.papel-pagina:last-child { margin-bottom: 0; }
.papel-pagina figcaption { margin: 0 0 4px; }
/* A folha recebe a largura do tamanho escolhido; sem tamanho, ocupa a largura da faixa.
   ``aspect-ratio: auto 210 / 297`` guarda o lugar de uma folha A4 enquanto a imagem não
   chega, para a página do lançamento ficar onde a rolagem a pôs. */
.papel-folha { position: relative; width: 100%; margin: 0 auto; }
.papel-folha .documento-imagem { display: block; width: 100%; height: auto; aspect-ratio: auto 210 / 297;
  background: var(--ac-branco); border: 1px solid var(--ac-borda); border-radius: 10px; box-shadow: var(--ac-elev-1); }
/* O trecho aceso: azul, e não âmbar, porque o âmbar puro é só do botão Confirmar. A caixa
   sai um pouco maior que a palavra para não cobrir a primeira e a última letra. */
.trecho-aceso { position: absolute; margin: -3px; padding: 3px; box-sizing: content-box; border-radius: 4px;
  background: var(--ac-foco); box-shadow: 0 0 0 2px var(--ac-azul); pointer-events: none; }
.observacao-envio { font-size: 15px; max-width: none; }

/* a alça entre as faixas: 24 px de desenho e 44 px de toque, pelo ::before */
.alca { flex: none; position: relative; height: 24px; display: flex; align-items: center; justify-content: center;
  cursor: row-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.alca[hidden] { display: none; }
.alca::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.alca-pega { width: 48px; height: 4px; border-radius: 4px; background: var(--ac-claro); transition: background .15s; }
.alca:hover .alca-pega, .alca:focus-visible .alca-pega, .alca-arrastando .alca-pega { background: var(--ac-azul); }
.alca:focus-visible { outline-offset: -2px; }
/* Enquanto arrasta, nada seleciona texto nem rola por baixo do dedo. */
.conferencia-dividida.arrastando-alca { user-select: none; -webkit-user-select: none; cursor: row-resize; }
.evidencia summary { cursor: pointer; min-height: var(--ac-toque); display: flex; align-items: center; color: var(--ac-azul); font-weight: 600; font-size: 15px; }
.evidencia pre { white-space: pre-wrap; word-break: break-word; font-family: var(--ac-mono); font-size: 15px; background: var(--ac-superficie); padding: 12px 16px; border-radius: 10px; }
.descartar-form summary { list-style: none; display: inline-flex; align-items: center; }
.descartar-form summary::-webkit-details-marker { display: none; }
.descartar-form[open] summary { margin-bottom: 8px; }

/* conferência: o bloco que se edita (24/10/2026). Cada dado aparece uma vez, num campo.
   Equipe e procedimentos viram fichas que empilham no celular, no lugar da tabela de
   quatro colunas que, em 375 px, espremia o nome em uma letra por linha.
   ``min-width: 0`` nos fieldset é o que segura a largura: por padrão eles crescem até o
   conteúdo mais largo e empurram a página para o lado. */
.bloco-campos { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; }
.bloco-campos[disabled] input, .bloco-campos[disabled] select {
  color: var(--ac-tinta); -webkit-text-fill-color: var(--ac-tinta); opacity: 1; background: var(--ac-branco);
}
.grupo-conferencia { margin: 16px 0 0; display: grid; gap: 12px; min-width: 0; }
.ficha-linha { display: grid; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--ac-borda); border-radius: 10px; background: var(--ac-branco); }
.bloco-conferencia .campos-linha { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: start; }
.bloco-conferencia .campos-linha > label { margin-top: 0; min-width: 0; }
.bloco-conferencia .campos-linha select { min-width: 0; }
.bloco-conferencia .campo-largo { grid-column: 1 / -1; }
.bloco-conferencia .campo-marca { margin-top: 0; font-size: 15px; }
.ficha-quem { margin: 0; max-width: none; }
.ficha-quem .rotulo { display: block; }
.incluir-linha { display: grid; gap: 8px; }
.incluir-linha summary { list-style: none; justify-self: start; }
.incluir-linha summary::-webkit-details-marker { display: none; }
.incluir-linha [data-clonar-linha] { margin-top: 0; }
/* ``.botao`` declara display e venceria o ``hidden``: sem JS o botão de clonar não aparece. */
.incluir-linha [data-clonar-linha][hidden] { display: none; }
.rotulo-campo { font-family: var(--ac-mono); font-size: 11px; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: var(--ac-rotulo); margin: 12px 0 0; }
.decisao-conferencia { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ac-borda); }

/* extrato do médico: a barra de tela acima do papel (rótulo da semana à esquerda,
   situação à direita). Some na impressão junto com o resto do .so-tela. */
.barra-extrato { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-bottom: 16px; }

/* alertas */
.lista-alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-alertas > li { padding: 12px 16px; border: 1px solid var(--ac-borda); border-left-width: 4px; border-radius: 10px; }
.lista-alertas > li.alerta-grave { border-left-color: var(--ac-erro); }
.lista-alertas > li.alerta-atencao { border-left-color: var(--ac-ambar-texto); }
.lista-alertas > li.alerta-aviso { border-left-color: var(--ac-nevoa); }
.lista-alertas p { max-width: none; }
.alerta-cabeca { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.alerta-cabeca input[type=checkbox], .marcar-todos input { width: 18px; height: 18px; margin: 0; }
.barra-em-massa { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 16px; }
@media (min-width: 768px) { .barra-em-massa { position: sticky; top: 0; z-index: 2; } }
.barra-em-massa .apoio { flex-basis: 100%; margin: 0; }
.marcar-todos { display: flex; gap: 8px; align-items: center; margin-right: auto; cursor: pointer; }

/* críticas na tela do admin (no extrato vale .critica do acuris.css) */
.lista-criticas { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 12px; }
.ficha-critica { border-left: 4px solid var(--ac-claro); padding: 4px 16px; display: grid; gap: 4px; }
.ficha-critica.aberta { border-left-color: var(--ac-erro); }
.ficha-critica.respondida { border-left-color: var(--ac-ok); }
.ficha-critica .meta { font-size: 15px; color: var(--ac-rotulo); max-width: none; }
.ficha-critica .texto { white-space: pre-wrap; }
.ficha-critica .resposta { background: var(--ac-superficie); border-radius: 10px; padding: 12px 16px; margin-top: 8px; }
details.critica-form { margin-top: 8px; }
details.critica-form summary { list-style: none; width: 100%; }
details.critica-form summary::-webkit-details-marker { display: none; }
details.critica-form[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
details.critica-form form { border: 1px solid var(--ac-borda); border-top: 0; border-radius: 0 0 10px 10px; padding: 12px 16px; background: var(--ac-superficie); }

/* fila de equipe: três decisões numa coluna, em duas linhas (ver equipe.html) */
.acoes-equipe { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.acoes-equipe form { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 0; }
.acoes-equipe .acao-marcar { flex: 1 0 100%; }
.acoes-equipe .acao-marcar .campo-inline { flex: 1 1 6rem; min-width: 0; }
.acoes-equipe > details { flex: 0 1 auto; min-width: 0; }
.acoes-equipe > details[open] { flex: 1 0 100%; }
.excecao-equipe > summary { max-width: 100%; }
.excecao-equipe .formulario { margin-top: 8px; padding: 12px 16px; background: var(--ac-superficie); border: 1px solid var(--ac-borda); border-radius: 10px; }
.excecao-equipe .formulario label:first-of-type { margin-top: 0; }

/* ---- login: fundo escuro do kit ---- */
body.pagina-login { background: var(--ac-gradiente); background-attachment: fixed; }
body.pagina-login::before { content: ""; position: fixed; inset: 0; background-image: var(--ac-malha); background-size: 60px 60px; pointer-events: none; }
.pagina-login .corpo-site, .pagina-login .rodape-site { position: relative; }
.login-caixa { max-width: 440px; margin: 48px auto 0; }
.login-marca { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--ac-branco); margin-bottom: 8px; }
.login-marca .wordmark { font-size: 21px; line-height: 1.45; }
.login-produto { text-align: center; color: var(--ac-nevoa); font-size: 15px; margin: 0 auto 24px; }
.pagina-login .rodape-site { color: var(--ac-nevoa); }

/* ---- telas maiores ---- */
@media (min-width: 720px) {
  .conteudo { padding: 24px; }
  .cartao { padding: 24px; }
  .lista-cartoes { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .menu-movel { display: none; }
  .com-menu .menu-lateral { display: block; }
  .corpo-site.com-menu { grid-template-columns: 232px minmax(0, 1fr); }
  .conteudo { padding: 32px; }
}
@media (max-width: 719px) {
  .topo { padding: 8px 16px; }
  .topo-nome, .topo-sep { display: none; }
  .rolagem .tabela th:first-child, .rolagem .tabela td:first-child { position: sticky; left: 0; background: var(--ac-branco); box-shadow: var(--ac-borda-presa); }
  .rolagem .tabela tr.atencao td:first-child { background: var(--ac-atencao-fundo); }
  .rolagem .tabela tr.erro td:first-child { background: var(--ac-erro-fundo); }
  /* Tabela que vira um bloco por linha (Vendas da Cielo, "Ligar a um procedimento"): sem
     cabeçalho, cada célula numa linha, e o botão embaixo. */
  .tabela-empilha thead { display: none; }
  .tabela-empilha, .tabela-empilha tbody, .tabela-empilha tr, .tabela-empilha td { display: block; width: 100%; }
  .tabela-empilha tr { padding: 8px 0; border-bottom: 1px solid var(--ac-borda); }
  .tabela-empilha td { border: 0; padding: 2px 0; }
  .tabela-empilha td.acoes-celula { padding-top: 8px; }
  /* No celular cada pixel de altura vai para as faixas: título menor e moldura mais fina. */
  .tela-dividida .conteudo { padding: 8px 8px 8px; }
  .tela-dividida .cabecalho-pagina { margin-bottom: 8px; }
  .tela-dividida .cabecalho-pagina h1 { font-size: 21px; line-height: 1.45; }
  .tela-dividida .cabecalho-pagina .rotulo { display: none; }
  /* A barra do papel cabe numa linha só: sem o número do tamanho, com botões mais estreitos,
     e o recado do trecho aceso desce para cima do papel, em vez de abrir uma segunda linha. */
  .papel-ferramentas { flex-wrap: nowrap; padding: 4px 8px; gap: 4px; }
  .papel-ferramentas .botao-mini { padding: 4px 8px; }
  .papel-zoom { display: none; }
  .papel-aviso { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1; padding: 4px 8px;
    background: var(--ac-branco); border-radius: 9px; box-shadow: var(--ac-elev-2); pointer-events: none; }
  .papel-rolagem { padding: 8px; }
  .faixa-campos .cartao { padding: 12px; }
}

/* ---- impressão: só o miolo (o extrato tem regras próprias em acuris.css) ---- */
@media print {
  body { background: var(--ac-branco); display: block; }
  .topo, .menu-movel, .menu-lateral, .rodape-site, .avisos, .so-tela, details.critica-form, .acoes-finais, .voltar, script { display: none !important; }
  .corpo-site { display: block; }
  .conteudo { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  /* A tela dividida prende a altura à janela; no papel impresso tudo volta a correr. */
  body.tela-dividida, .tela-dividida .conteudo, .faixa-papel, .faixa-campos, .papel-rolagem { height: auto; overflow: visible; display: block; }
  .alca, .papel-ferramentas { display: none !important; }
}

/* ---- etapa 5b da Conciliação: a tela do médico (detalhe da semana) ---- */
.medico-proc { margin-bottom: 16px; }
.medico-proc .cabeca { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.medico-proc .linha-papel { border-top: 1px solid var(--ac-fundo); padding-top: 12px; margin-top: 12px; }
.medico-proc .pares { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 16px; margin: 8px 0; }
.medico-proc .pares .k { display: block; font-size: 13px; color: var(--ac-rotulo); }
.medico-proc .pares .v { display: block; font-family: var(--ac-mono); font-variant-numeric: tabular-nums; }
.medico-proc .pares .v.sem-valor { font-family: var(--ac-sans); color: var(--ac-ambar-texto); }
.medico-conta .linha { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--ac-fundo); }
.medico-conta .linha:last-child { border-bottom: 0; }
.medico-conta .linha .v { font-family: var(--ac-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.medico-conta .linha.total { font-weight: 600; color: var(--ac-marinho); }
.medico-conta .linha .sub { display: block; font-size: 13px; color: var(--ac-rotulo); }
details.de-onde-veio { margin-top: 8px; font-size: 15px; }
details.de-onde-veio summary { cursor: pointer; color: var(--ac-azul); }

/* ---- tela de Usuários (26/10/2026): um cartão por pessoa e a ficha da pessoa ---- */
/* O roxo marca o perfil global (Acuris e Conferemed), como na maquete aprovada; o azul, o
   perfil do cliente. Os dois são só a cor da etiqueta: a palavra vem sempre escrita. */
/* ``hidden`` vence o display dos cartões e das seções, que o app.js esconde e mostra. */
.cartao-pessoa[hidden], .grupo-pessoas[hidden], .busca-usuarios[hidden], .ficha-secoes [data-so-cliente][hidden] { display: none; }
.busca-usuarios { display: grid; gap: 12px; margin-bottom: 8px; }
.campo-busca { width: 100%; min-height: var(--ac-toque); padding: 8px 16px; border: 1px solid var(--ac-borda); border-radius: 10px; background: var(--ac-branco); font: inherit; font-size: 17px; color: var(--ac-tinta); }
.campo-busca:focus { outline: none; border-color: var(--ac-azul); box-shadow: var(--ac-anel-foco); }
.busca-usuarios .filtros { margin-bottom: 0; }
button.filtro { font: inherit; font-size: 15px; cursor: pointer; }
.grupo-pessoas { margin-top: 28px; }
.grupo-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.grupo-cab h2 { margin: 0; }
.grade-pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.cartao-pessoa { display: flex; flex-direction: column; min-width: 0; background: var(--ac-branco); border: 1px solid var(--ac-borda); border-radius: 14px; box-shadow: var(--ac-elev-2); }
.cartao-pessoa.inativo { opacity: .62; }
.pessoa-cab { display: flex; gap: 14px; padding: 18px 18px 0; min-width: 0; }
.avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 16px; color: var(--ac-branco); background: var(--ac-marinho); }
.avatar-global { background: #5b3fa8; }
.pessoa-nome { min-width: 0; }
.pessoa-titulo { margin: 0; font-weight: 600; font-size: 18px; line-height: 1.25; color: var(--ac-marinho); }
.pessoa-email { margin: 2px 0 0; font-size: 14px; color: var(--ac-texto); overflow-wrap: anywhere; }
.pessoa-email.falta { color: var(--ac-erro); }
.pessoa-corpo { padding: 14px 18px 16px; display: grid; gap: 10px; }
.pessoa-corpo form { margin: 0; }
.pessoa-linha { display: flex; flex-wrap: wrap; gap: 6px; }
.pessoa-meta { margin: 0; font-size: 13px; color: var(--ac-rotulo); }
.pessoa-pe { margin-top: auto; border-top: 1px solid var(--ac-borda); padding: 12px 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; justify-content: space-between; }
.pessoa-pe form { margin: 0; }
.chip { display: inline-flex; align-items: center; font-size: 13px; line-height: 1.3; padding: 6px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.chip-global { background: #ece7f8; color: #5b3fa8; }
.chip-cliente { background: var(--ac-info-fundo); color: var(--ac-azul); }
.chip-neutro { background: var(--ac-superficie); color: var(--ac-marinho); border-color: var(--ac-borda); }
.chip-longo { white-space: normal; }
.chip-ok { background: var(--ac-ok-fundo); color: var(--ac-ok); }
.chip-espera { background: var(--ac-atencao-fundo); color: var(--ac-ambar-texto); }
.chip-off { background: #eceef2; color: var(--ac-rotulo); }
.mais-acoes { position: relative; }
.mais-acoes > summary { list-style: none; font-size: 20px; line-height: 1; }
.mais-acoes > summary::-webkit-details-marker { display: none; }
.mais-acoes-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 2; display: grid; gap: 8px; width: max-content; max-width: min(280px, 80vw); padding: 12px; background: var(--ac-branco); border: 1px solid var(--ac-borda); border-radius: 12px; box-shadow: var(--ac-elev-2); }
.mais-acoes-lista .botao { width: 100%; white-space: normal; }
.sem-acesso { list-style: none; margin: 0; padding: 8px 18px; background: var(--ac-branco); border: 1px dashed var(--ac-borda); border-radius: 12px; }
.sem-acesso li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--ac-fundo); }
.sem-acesso li:last-child { border-bottom: 0; }
.quebra-tudo { overflow-wrap: anywhere; }
.ficha-pessoa { display: grid; grid-template-columns: 1fr; background: var(--ac-branco); border: 1px solid var(--ac-borda); border-radius: 14px; overflow: hidden; }
.ficha-indice { display: flex; overflow-x: auto; background: var(--ac-superficie); border-bottom: 1px solid var(--ac-borda); }
.ficha-indice a { display: block; padding: 9px 18px; color: var(--ac-marinho); text-decoration: none; font-size: 15px; white-space: nowrap; }
.ficha-indice a:hover { background: var(--ac-info-fundo); color: var(--ac-azul); }
.ficha-secoes { min-width: 0; }
.ficha-secoes > .formulario { gap: 0; }
.ficha-secao { padding: 22px 24px; border-bottom: 1px solid var(--ac-borda); }
.ficha-secoes > section:last-child { border-bottom: 0; }
.ficha-secoes .acoes-finais { padding: 16px 24px; margin: 0; border-bottom: 1px solid var(--ac-borda); }
.ficha-secoes .acoes-finais .botao { margin-top: 0; }
.campos-ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px 18px; margin-top: 12px; }
.campo-ficha { display: grid; gap: 4px; align-content: start; min-width: 0; }
.campo-ficha label { margin-top: 0; }
.campo-ficha .ajuda { margin: 0; font-size: 13px; color: var(--ac-rotulo); }
.obrigatorio { color: var(--ac-erro); }
.opcoes-perfil { border: 0; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.opcoes-perfil legend { font-weight: 600; color: var(--ac-marinho); margin-bottom: 4px; }
.formulario .opcao-perfil { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 14px; border: 1px solid var(--ac-borda); border-radius: 10px; cursor: pointer;
  font-family: var(--ac-sans); font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--ac-texto); }
.formulario .opcao-perfil input { width: auto; min-height: 0; margin-top: 6px; }
.opcao-perfil:has(input:checked) { border-color: var(--ac-azul); background: #f3f7ff; }
.opcao-perfil b { color: var(--ac-marinho); }
.opcao-perfil .apoio { display: block; font-size: 14px; }
.lista-chaves { list-style: none; margin: 8px 0; padding: 0; }
details.reserva { margin-top: 8px; }
details.reserva > summary { cursor: pointer; display: inline; }
@media (min-width: 760px) {
  .ficha-pessoa { grid-template-columns: 220px minmax(0, 1fr); }
  .ficha-indice { display: block; border-bottom: 0; border-right: 1px solid var(--ac-borda); padding: 18px 0; }
}

/* ---- campos de data: calendário abaixo do campo (app.js) ---- */
.campo-data { position: relative; display: block; }
.campo-data > input { width: 100%; padding-right: 56px; }
.campo-data .abrir-calendario {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 42px; height: 42px; margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 7px;
  background: transparent; color: var(--ac-marinho); cursor: pointer; min-height: 0;
}
.campo-data .abrir-calendario:hover { background: var(--ac-fundo); color: var(--ac-azul); }
.campo-data .abrir-calendario:focus-visible { outline: none; box-shadow: var(--ac-anel-foco); }
.campo-data .abrir-calendario[hidden] { display: none; }
.aviso-data { display: block; margin: 4px 0 0; color: var(--ac-erro); font-size: 0.9em; line-height: 1.4; text-transform: none; letter-spacing: 0; }
.aviso-data[hidden] { display: none; }
.campo-data > input[aria-invalid="true"] { border-color: var(--ac-erro); }
.calendario {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; width: 304px; max-width: calc(100vw - 32px);
  padding: 12px; background: var(--ac-branco); border: 1px solid var(--ac-borda); border-radius: 12px;
  box-shadow: var(--ac-elev-2); color: var(--ac-tinta); font-family: var(--ac-sans); text-transform: none; letter-spacing: 0;
}
.calendario.acima { top: auto; bottom: calc(100% + 6px); }
.calendario button { margin: 0; font: inherit; cursor: pointer; justify-self: stretch; }
.calendario-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.calendario-titulo { font-size: 16px; font-weight: 600; color: var(--ac-marinho); }
.calendario-seta {
  width: 36px; height: 36px; padding: 0; border: 1px solid var(--ac-borda); border-radius: 9px;
  background: var(--ac-branco); color: var(--ac-marinho); font-size: 22px; line-height: 1;
}
.calendario-seta:hover { border-color: var(--ac-azul); color: var(--ac-azul); }
.calendario-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendario-dia-semana {
  text-align: center; padding: 4px 0; font-family: var(--ac-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ac-texto);
}
.calendario-dia {
  width: 100%; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent;
  color: var(--ac-tinta); font-size: 15px; font-variant-numeric: tabular-nums;
}
.calendario-dia:hover { background: var(--ac-fundo); color: var(--ac-azul); }
.calendario-dia.fora { color: var(--ac-texto); opacity: .55; }
.calendario-dia.hoje { border-color: var(--ac-azul); }
.calendario-dia[aria-pressed="true"] { background: var(--ac-marinho); border-color: var(--ac-marinho); color: var(--ac-branco); opacity: 1; }
.calendario-dia:focus-visible, .calendario-seta:focus-visible, .calendario-acao:focus-visible { outline: none; box-shadow: var(--ac-anel-foco); }
.calendario-rodape { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ac-borda); }
.calendario-acao {
  min-height: 36px; padding: 4px 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ac-azul); font-size: 15px; font-weight: 600;
}
.calendario-acao:hover { background: var(--ac-fundo); }

/* Ficha do documento: uma linha por ação, botão à esquerda e explicação ao lado. */
.lista-acoes { list-style: none; margin: 16px 0 0; padding: 0; }
.lista-acoes > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 24px; align-items: center; padding: 16px 0; border-top: 1px solid var(--ac-borda); }
.lista-acoes > li:first-child { border-top: 0; }
.lista-acoes > li > form, .lista-acoes > li > .botao { margin: 0; justify-self: start; }
.lista-acoes > li > .apoio { margin: 0; }
@media (max-width: 720px) { .lista-acoes > li { grid-template-columns: 1fr; } }
/* ---- ficha do conserto (07/11/2026): antes e depois em destaque ---- */
.antes-depois { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.antes-depois-quadro { border: 1px solid var(--ac-borda); border-radius: 16px; padding: 16px; min-width: 0; }
.antes-depois-quadro p { margin: 0 0 8px; max-width: none; }
.antes-depois-totais { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 0 12px; margin: 0 0 8px; }
.antes-depois-totais dt { color: var(--ac-rotulo); font-size: 15px; }
.antes-depois-totais dd { margin: 0; overflow-wrap: anywhere; }
.lista-do-conserto { grid-template-columns: 1fr; gap: 12px; }
.lista-do-conserto .cartao-documento { gap: 0; padding: 0; }
.lista-do-conserto .cartao-documento-linha { grid-template-columns: minmax(0, 1fr) auto; }

/* Lista de documentos (30/10/2026): largura toda, uma coluna de cartões e gaveta de filtros. */
.tela-larga .conteudo { max-width: none; }
.barra-documentos, .barra-filtros { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.barra-documentos .filtros, .barra-filtros .filtros { flex: 1; margin-bottom: 0; }
/* Botão "Ler agora" (07/11/2026), à direita da barra. */
.barra-documentos .ler-agora { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin: 0; }
.barra-documentos .ler-agora .apoio { margin: 0; text-align: right; }
/* 10/11/2026: a busca pelo número do documento, na barra da lista */
.barra-documentos .busca-numero { flex: 0 1 260px; margin: 0; }
.barra-documentos .busca-numero .campo-busca { font-size: 15px; padding: 6px 12px; }
.numero-documento { font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra-filtros .filtro { justify-content: center; }
.filtro-gaveta, .filtro-gaveta:hover { background: var(--ac-ambar); border-color: var(--ac-ambar); color: var(--ac-sobre-ambar); font-weight: 600; cursor: pointer; font-family: inherit; }
.filtro-gaveta:hover { background: var(--ac-ambar-claro); border-color: var(--ac-ambar-claro); }
.filtro-gaveta b { color: var(--ac-sobre-ambar); }
.filtros-ativos { max-width: none; margin-bottom: 16px; }
/* Barra de período (31/10/2026): ao lado do botão Filtros, igual em todas as telas que
   listam coisas com data. Cabe numa linha no computador; no celular, quebra sem rolar de lado. */
.barra-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.barra-periodo-modos { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; min-width: 0; }
.barra-periodo-setas { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; min-width: 0; }
.filtro.barra-periodo-seta { min-width: 36px; padding: 4px 8px; justify-content: center; font-size: 18px; line-height: 1; }
.barra-periodo-mostrador { min-width: 0; padding: 0 8px; font-weight: 600; color: var(--ac-marinho); text-align: center; white-space: nowrap; }
/* No painel de filtros: De e Até, mês ou semana e as setas, antes dos filtros da tela. */
.periodo-gaveta { display: grid; gap: 12px; min-width: 0; margin: 0 0 8px; padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--ac-borda); border-radius: 0; }
.periodo-gaveta > legend { float: left; width: 100%; margin: 0 0 4px; padding: 0; }
.periodo-gaveta-modos { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.gaveta-campos .periodo-gaveta-modos input[type=radio] { width: auto; margin: 0; }
.periodo-gaveta-setas { display: flex; align-items: center; gap: 4px; }
.periodo-gaveta-setas[hidden] { display: none; }
.periodo-gaveta-setas .barra-periodo-mostrador { flex: 1; white-space: normal; }
/* A tela por trás do painel enquanto chega o período novo. */
.conteudo-carregando { opacity: .55; transition: opacity .15s; }
.formulario .filtro.barra-periodo-seta { margin: 0; }
@media (max-width: 719px) {
  .barra-periodo, .barra-periodo-setas { width: 100%; }
  .barra-periodo-mostrador { flex: 1; white-space: normal; }
}
.documentos-principal .lista-documentos, .lista-do-banco { grid-template-columns: 1fr; gap: 12px; }
.documentos-principal .cartao-documento, .lista-do-banco .cartao-documento { gap: 0; padding: 0; }
.cartao-documento-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 24px; align-items: center; padding: 16px; }
.cartao-documento-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cartao-documento-texto h3 { margin: 0; font-size: 18px; line-height: 1.35; overflow-wrap: anywhere; }
.cartao-documento-linha > .cartao-documento-acoes { margin: 0; padding: 0; border: 0; flex-wrap: nowrap; }
.cartao-documento-mais { border-top: 1px solid var(--ac-borda); padding: 0 16px; }
.cartao-documento-mais > summary { cursor: pointer; padding: 8px 0; font-size: 15px; color: var(--ac-rotulo); }
.cartao-documento-mais[open] { padding-bottom: 16px; }
.cartao-documento-mais[open] > * + * { margin-top: 8px; }
.cartao-documento-mais .cartao-documento-acoes { margin-top: 12px; padding-top: 0; border: 0; }
/* Entradas e Saídas no banco (31/10/2026): um cartão por linha do extrato, com as classes
   dos cartões de Documentos. Os botões quebram linha em vez de passar da borda. */
.lista-do-banco .cartao-documento-linha { grid-template-columns: minmax(0, 1fr) auto; }
.lista-do-banco .cartao-documento-linha > .cartao-documento-acoes { flex-wrap: wrap; }
.cartao-do-banco-situacao { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
/* A faixa de baixo do cartão: a explicação com o botão Explicar, ou o formulário da
   pendência. O formulário abre aqui mesmo, sem rolar de lado. */
.cartao-do-banco-faixa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 0 16px 12px; }
.cartao-do-banco-faixa .explicacao-texto { min-width: 0; overflow-wrap: anywhere; }
.cartao-do-banco-faixa details[open] { flex-basis: 100%; }
.cartao-do-banco-faixa summary { list-style: none; }
.cartao-do-banco-faixa summary::-webkit-details-marker { display: none; }
.cartao-do-banco-faixa .formulario { flex: 1 1 100%; max-width: 560px; margin-top: 8px; }
.cartao-do-banco-faixa .contagem button { margin-top: 0; }
@media (max-width: 719px) {
  .barra-documentos, .barra-filtros { flex-direction: column; }
  .barra-documentos .ler-agora { align-items: stretch; width: 100%; }
  .barra-documentos .busca-numero { flex: none; width: 100%; }
  .barra-documentos .ler-agora .apoio { text-align: left; }
  .cartao-documento-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .cartao-documento-linha > .cartao-documento-acoes { grid-column: 1 / -1; }
}

/* Gaveta que entra pela direita (<dialog>), no modelo do Amigo. */
.gaveta { margin: 0 0 0 auto; height: 100vh; max-height: none; width: min(440px, 100vw); padding: 0; border: 0; background: var(--ac-branco); color: var(--ac-texto); box-shadow: -8px 0 32px rgba(0, 0, 0, .18); }
.gaveta::backdrop { background: rgba(20, 30, 50, .45); }
.gaveta-corpo { display: flex; flex-direction: column; height: 100%; }
.gaveta-topo { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 8px; }
.gaveta-topo h2 { margin: 0; font-size: 22px; }
.gaveta-fechar { border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--ac-rotulo); min-width: 44px; min-height: 44px; }
.gaveta-campos { flex: 1; overflow-y: auto; align-content: start; justify-content: flex-start; padding: 8px 24px 24px; }
.gaveta-campos input, .gaveta-campos select { width: 100%; }
.gaveta-campos input[type=checkbox] { width: auto; margin: 0; }
.gaveta-campos .caixa-marcar { display: flex; align-items: center; gap: 8px; font-family: inherit; font-weight: 400; text-transform: none; letter-spacing: normal; font-size: 16px; color: var(--ac-texto); }
.campos-lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campos-lado-a-lado label { display: flex; flex-direction: column; gap: 8px; margin-top: 0; }
.gaveta-rodape { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--ac-borda); }
.gaveta-rodape > a { margin-right: auto; }
.gaveta-rodape .botao { margin: 0; }

/* Lista de documentos sem caixa por fora (estudo 2, escolhido pelo Rogério em 31/10/2026):
   os botões de status numa faixa branca e os cartões soltos sobre o fundo da página, com
   sombra, para não se confundirem com o fundo da seção. */
.documentos-principal { background: none; border: 0; padding: 0; }
.documentos-principal .barra-documentos { background: var(--ac-branco); border: 1px solid var(--ac-borda); border-radius: 16px; padding: 12px; }
.documentos-principal .cartao-documento { background: var(--ac-branco); border-color: transparent; box-shadow: 0 1px 3px rgba(22, 42, 78, .10), 0 4px 12px rgba(22, 42, 78, .06); }
.documentos-principal .cartao-documento:hover { box-shadow: 0 2px 6px rgba(22, 42, 78, .14), 0 8px 20px rgba(22, 42, 78, .08); }
/* 01/11/2026, tela do Atendimento: a caixa de busca e o botão Buscar na mesma linha */
.busca-linha { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
.busca-linha .campo-busca { flex: 1 1 auto; min-width: 0; }
.busca-linha .botao { flex: none; margin-top: 0; }
/* 01/11/2026, ficha do atendimento: cada seção é um cartão que abre e fecha. Fechado, o
   título e uma linha que resume o que há dentro. */
.secao-ficha > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.secao-ficha > summary::-webkit-details-marker { display: none; }
.secao-ficha > summary::before { content: "▸"; color: var(--ac-azul); font-size: 15px; }
.secao-ficha[open] > summary::before { content: "▾"; }
.secao-ficha > summary h2 { margin: 0; }
.secao-ficha[open] > summary { margin-bottom: 12px; }

/* Campo "Ligar a" do cartão de cada linha do banco (31/10/2026). A lista abre embaixo do
   campo, por cima do resto do cartão, como a célula de uma planilha. */
.ligar-a { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 320px; min-width: 0; margin: 0; }
.ligar-a-rotulo { font-size: 14px; color: var(--ac-rotulo); }
.ligar-a-campo, .ligar-a-escolha { flex: 1 1 240px; min-width: 0; }
.ligar-a-frase { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 100%; }
.ligar-a-frase[hidden], .ligar-a-gravar[hidden], .ligar-a-escolha[hidden], .ligar-a-lista[hidden] { display: none; }
.ligar-a-frase input { flex: 1 1 240px; min-width: 0; }
.ligar-a-lista { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; max-height: 320px; overflow-y: auto; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--ac-branco); border: 1px solid var(--ac-borda); border-radius: 10px; box-shadow: var(--ac-elev-2); }
.ligar-a-lista li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.ligar-a-lista li span { font-size: 14px; color: var(--ac-rotulo); }
.ligar-a-lista li[aria-selected="true"], .ligar-a-lista li:hover { background: var(--ac-superficie); }
.ligar-a-lista .ligar-a-vazio { cursor: default; color: var(--ac-rotulo); }
.cartao-do-banco-resumo { margin: 0; overflow-wrap: anywhere; }
.cartao-do-banco-valor { margin: 0; font-size: 18px; white-space: nowrap; }
/* "Dar entrada" do pagamento particular, dentro de "Mais detalhes" (31/10/2026). */
.cartao-do-banco-entrada > summary { cursor: pointer; padding: 8px 0; color: var(--ac-azul); }

/* ---- alerta que acende o trecho no papel (conferir) ---- */
.alerta-no-papel { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.alerta-no-papel:hover, .alerta-no-papel:focus-visible { box-shadow: var(--ac-elev-2); outline: 2px solid var(--ac-azul); outline-offset: 2px; }
.alerta-no-papel .alerta-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- Mesa do dia a partir do extrato (02/11/2026) ----
   Faixa de semanas, resumo escuro com três números, barra empilhada das situações do
   dinheiro e as listas de papel que falta e saída sem explicação. Situação "dono" em azul,
   "dividir" em névoa e "sem papel" oca, com borda tracejada: as três diferem em claridade,
   não só em cor. O âmbar fica só no botão principal. */
.faixa-semanas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.semana-chip { display: inline-flex; flex-direction: column; gap: 2px; min-height: var(--ac-toque); padding: 8px 16px; border-radius: 12px; border: 1px solid var(--ac-borda); background: var(--ac-branco); color: var(--ac-marinho); text-decoration: none; font-size: 15px; line-height: 1.4; }
.semana-chip:hover { border-color: var(--ac-azul); color: var(--ac-marinho); }
.semana-chip-nome { font-weight: 600; }
.semana-chip-sub { color: var(--ac-texto); }
.semana-chip.atual { background: var(--ac-marinho); border-color: var(--ac-marinho); color: var(--ac-branco); }
.semana-chip.atual .semana-chip-sub { color: var(--ac-claro); }

.mesa-resumo { background: var(--ac-marinho); border-radius: 18px; padding: 24px; margin-bottom: 24px; display: grid; gap: 24px; }
.mesa-resumo .rotulo { color: var(--ac-nevoa); }
.mesa-resumo-linha { color: var(--ac-claro); font-size: 15px; max-width: none; }
.mesa-resumo-linha b { color: var(--ac-branco); font-weight: 500; }
.mesa-resumo-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px 32px; }
.mesa-resumo-numeros > div { display: grid; gap: 8px; align-content: start; min-width: 0; }
.mesa-resumo-v { color: var(--ac-branco); font-size: 31px; line-height: 1.2; overflow-wrap: anywhere; }
.mesa-resumo-c { color: var(--ac-claro); font-size: 15px; line-height: 1.55; }

.mesa-dupla { display: grid; gap: 16px; margin-bottom: 16px; }
/* No computador, o resumo de cada cartão fica à esquerda e a tabela ou a lista à direita. */
@media (min-width: 1100px) { .mesa-cartao-corpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px 32px; align-items: start; } }
.mesa-cartao-corpo { display: grid; gap: 16px; }
.mesa-dupla > .cartao { margin-bottom: 0; }
.mesa-cartao { display: grid; gap: 16px; }
.mesa-cartao .cartao-topo { margin-bottom: 0; }
.mesa-total { font-size: 21px; line-height: 1.45; color: var(--ac-marinho); white-space: nowrap; }
.barra-empilhada { display: flex; gap: 2px; height: 16px; }
.barra-empilhada .parte:first-child { border-radius: 9px 0 0 9px; }
.barra-empilhada .parte:last-child { border-radius: 0 9px 9px 0; }
.barra-empilhada .parte:only-child { border-radius: 9px; }
.parte-dono, .parte-profissional { background: var(--ac-azul); }
.parte-dividir, .parte-explicada { background: var(--ac-nevoa); }
.parte-sem_papel, .parte-sem_explicacao { background: var(--ac-atencao-fundo); border: 1px dashed var(--ac-ambar-texto); }
.parte-fora { background: var(--ac-serie-neutra); }
.mesa-situacoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.mesa-situacoes li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.mesa-situacoes .amostra { width: 16px; height: 16px; border-radius: 4px; margin-top: 5px; }
.mesa-situacao-nome { font-weight: 600; color: var(--ac-marinho); }
.mesa-situacao-v { display: grid; justify-items: end; text-align: right; color: var(--ac-marinho); white-space: nowrap; }
.mesa-cartao caption { text-align: left; padding: 8px 0; }
.mesa-lista { list-style: none; margin: 0; padding: 0; }
.mesa-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--ac-fundo); }
.mesa-lista-texto { flex: 1 1 260px; min-width: 0; display: grid; gap: 4px; }
.mesa-lista-valor { color: var(--ac-marinho); white-space: nowrap; }
.mesa-papeis .mesa-lista-valor { flex: 0 0 140px; }
.mesa-papeis > h2 { margin-bottom: 4px; }
.mesa-tabela .cartao-topo .apoio { max-width: 70ch; }
.mesa-tabela tfoot td { border-top: 1px solid var(--ac-borda); color: var(--ac-marinho); font-weight: 600; }
.mesa-resto { margin: 24px 0 12px; color: var(--ac-texto); }

/* ---- Mesa do dia do profissional (03/11/2026) ----
   Mesmas peças da Mesa da clínica. A chamada para enviar documento fica dentro do cartão do
   dinheiro sem dono, com botão comum: o âmbar é só o "Enviar documento" do topo. */
.mesa-chamada { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px; border-radius: 12px; background: var(--ac-fundo); }
.mesa-chamada p { flex: 1 1 260px; }
.mesa-seu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 24px; }
.mesa-seu .mesa-total { margin-right: auto; }

/* Revisão do código na ficha do conserto (10/11/2026, R2 da auditoria de injeção): a
   diferença em fonte monoespaçada, linha acrescentada em verde e tirada em vermelho. */
.diferenca-codigo { font-family: var(--ac-mono); font-size: 13px; line-height: 1.45; white-space: pre; overflow: auto; max-height: 70vh; background: var(--ac-superficie); border: 1px solid var(--ac-borda); border-radius: 10px; padding: 8px 0; margin: 8px 0 0; }
.diferenca-codigo span { display: block; min-height: 1.45em; padding: 0 12px; }
.diferenca-codigo .dif-mais { background: var(--ac-ok-fundo); color: var(--ac-ok); }
.diferenca-codigo .dif-menos { background: var(--ac-erro-fundo); color: var(--ac-erro); }
.diferenca-codigo .dif-arquivo { font-weight: 600; color: var(--ac-marinho); }
.diferenca-codigo .dif-trecho { color: var(--ac-rotulo); }
.trechos-da-revisao { white-space: pre-wrap; word-break: break-word; }