.processos-barra { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; align-items: center; }
.processos-barra input, .processos-barra select { font: inherit; min-height: 44px; padding: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); max-width: 100%; }
.processos-barra input { flex: 1 1 280px; min-width: 0; }
.processos-estado { padding: 0 16px; overflow-wrap: anywhere; }
.processos-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.processo-card { padding: 20px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.processo-card h3 { margin: 8px 0; font-size: 18px; }
.processo-card p { margin: 8px 0; font-size: 16px; }
.processo-andamento { white-space: pre-wrap; border-left: 3px solid var(--accent); padding: 8px 12px; }
.processo-dialogo { padding: 24px; max-width: min(720px, 94vw); max-height: 90vh; overflow-y: auto; }
.processo-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.processo-campos .campo { min-width: 0; }
.processo-campos textarea, .processo-campos select, .processo-campos input { width: 100%; font: inherit; font-size: 16px; }
.processo-campos textarea { min-height: 100px; resize: vertical; }
.processo-ficha { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .processos-lista, .processo-campos { grid-template-columns: 1fr; }
  .processo-dialogo { padding: 16px; }
  .processos-barra > * { width: 100%; }
}

/* ---- Marcação do que ainda é demonstração ------------------------------
   A Dra. Laís buscou por um cliente que só existia como enfeite no HTML.
   Enquanto houver conteúdo fictício na tela, ele precisa se identificar —
   senão a validação dela é gasta reportando defeito onde não há sistema. */
.selo-exemplo { display: inline-block; margin-left: 8px; padding: 1px 7px; border: 1px solid var(--accent-texto); border-radius: 99px; color: var(--accent-texto); font-size: 14px; font-weight: 800; letter-spacing: .04em;  vertical-align: middle; }
.metric-card .selo-exemplo { margin-left: 6px; font-size: 14px; }
.aviso-demonstracao { margin: 0 0 14px; padding: 11px 14px; border: 1px dashed var(--accent-texto); border-radius: var(--raio); color: var(--ink); font-size: 14px; }
.aviso-demonstracao .selo-exemplo { margin-left: 0; }

/* ---- Clientes vindos do banco ---- */
.conta-secao { display: inline-block; min-width: 24px; margin-left: 8px; padding: 1px 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: 14px; font-weight: 800; vertical-align: middle; }
.lista-vazia { padding: 20px; color: var(--muted); font-size: 14px; }

/* ---- Seta de voltar no cadastro ---- */
.processo-cabecalho { display: flex; align-items: center; gap: 10px; }
.processo-cabecalho h2 { margin: 0; }
/* 40px de alvo, como o olho da senha: no celular, menor que isso o dedo erra. */
.dialogo-voltar { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: var(--raio); background: transparent; color: var(--muted); cursor: pointer; }
.dialogo-voltar:hover { color: var(--ink); border-color: var(--accent-texto); }

/* Resumo da busca do topo: diz quantos achou e onde, com atalho para chegar lá.
   No celular, saber que existe resultado não basta — a lista de clientes fica
   a uma página inteira de rolagem. */
.busca-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 10px 0 0; padding: 9px 13px; border: 1px solid var(--line); border-radius: var(--raio); background: color-mix(in srgb, var(--paper) 84%, white); font-size: 14px; }
.busca-resumo .text-action { padding: 4px 0; }
/* `display: flex` na regra acima vence o `hidden` do navegador, e a caixa
   aparecia vazia antes de qualquer busca. Some de verdade quando escondida. */
.busca-resumo[hidden], .cliente-opcoes[hidden] { display: none; }


/* ---- Botão de buscar visível ------------------------------------------
   Pedido da Dra. Laís em 08/09/2026: "não era para aparecer uma opção de
   apertar a busca?". A lista já filtra sozinha enquanto se digita, mas quem
   não sabe disso procura onde clicar, não acha, e conclui que não dá para
   buscar. O botão é a resposta visível a uma pergunta, não uma função nova.
   48px de alvo: no celular, menor que isso o dedo erra. */
.campo-com-botao { flex: 1 1 280px; min-width: 0; display: flex; align-items: stretch; }
.campo-com-botao input { flex: 1 1 auto; min-width: 0; border-right: 0; }
.botao-buscar { flex: 0 0 auto; width: 48px; min-height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; }
.botao-buscar svg { width: 20px; height: 20px; }
.botao-buscar:hover { background: color-mix(in srgb, var(--ink) 88%, white); }
.botao-buscar:focus-visible { outline: 2px solid var(--accent-texto); outline-offset: 2px; }
@media (max-width: 720px) {
  /* A regra geral da barra dá 100% a cada filho; aqui o botão deve continuar
     do tamanho do dedo, ao lado do campo, e não virar uma faixa própria. */
  .campo-com-botao > .botao-buscar { width: 48px; }
}

/* ---- Cliente escolhido por digitação ----------------------------------
   Pedido da Dra. Laís: escrever "maria" e ver "Maria Teste" aparecer. A lista
   suspensa serve para cinco opções; com duzentos clientes ela vira rolagem
   cega. As sugestões abrem por cima dos campos de baixo de propósito — no
   celular, empurrar o formulário move o que a pessoa está lendo. */
.campo-cliente { position: relative; }
.cliente-opcoes { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; margin: 3px 0 0; padding: 0; list-style: none; max-height: 264px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--raio); background: var(--paper); box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 18%, transparent); }
.cliente-opcao { width: 100%; min-height: 44px; display: grid; gap: 2px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.cliente-opcoes li:last-child .cliente-opcao { border-bottom: 0; }
.cliente-opcao strong { font-size: 16px; }
.cliente-opcao small { color: var(--muted); font-size: 14px; }
.cliente-opcao:hover, .cliente-opcao:focus-visible { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.cliente-opcoes .lista-vazia { padding: 12px; }

/* ---- Preencher pela foto da capa ---------------------------------------
   O caminho curto para quem não tem tempo de digitar. Fica ANTES dos campos,
   com respiro em volta, porque quem vai usar precisa tropeçar nele — e quem
   já sabe o número passa direto sem que o botão atrapalhe. */
.leitura-foto { display: grid; gap: 8px; margin: 0 0 18px; padding: 14px; border: 1px dashed var(--accent-texto); border-radius: var(--raio); }
.leitura-botao { justify-self: start; }
.leitura-botao:disabled { opacity: .6; cursor: progress; }
.leitura-estado { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.leitura-estado.bom { color: var(--ink); }
.leitura-estado.ruim { color: var(--atencao); font-weight: 700; }

/* Campo que veio da foto fica marcado até a pessoa encostar nele.
   A conferência é a parte que importa: sem marca, ela teria de reler tudo. */
.campo-lido input { border-color: var(--accent-texto); background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
.campo-lido > span::after { content: ' · lido da foto, confira'; font-weight: 400; color: var(--accent-texto); }

/* Botões de decisão da leitura: trocar um campo já preenchido, ou escolher
   entre as datas encontradas. Precisam parecer opção clicável — como link
   dourado eles liam como título do bloco. */
.leitura-escolhas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.leitura-opcao { min-height: 40px; padding: 8px 12px; border: 1px solid var(--accent-texto); border-radius: var(--raio); background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.leitura-opcao:hover { background: color-mix(in srgb, var(--accent) 16%, var(--paper)); }
.leitura-opcao:focus-visible { outline: 2px solid var(--accent-texto); outline-offset: 2px; }