/* Casca do modelo 3 no app (o que o catálogo não tem): o menu inteiro como gaveta ao lado do trilho, a marca e o
   fechar do menu, os contadores do trilho e a faixa de homologação. Só tokens. Carregado depois do ds.css e da ponte.css. */

.ui-corpo { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--font-sans); }

/* Casca como no canvas: o trilho à esquerda (o ds.css o põe embaixo no celular) e o menu inteiro como gaveta. */
.ui-menu-lateral__marca { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-1) var(--esp-2) var(--esp-2); font-size: 16px; font-weight: 700; }
.ui-menu-lateral__marca > .ui-trilho__logo { width: 36px; height: 36px; border-radius: var(--raio-m); font-size: 18px; }
.ui-menu-lateral__fechar { margin-left: auto; }
.ui-menu-lateral__item[hidden], .ui-menu-lateral__grupo[hidden] { display: none; }
/* O menu inteiro: gaveta à direita do trilho, aberta pelo "Mais" (data-aberto, casca.js). */
.ui-casca > .ui-menu-lateral { display: none; position: fixed; top: 0; bottom: 0; left: 92px; z-index: 30; width: 300px; max-width: calc(100vw - 92px); height: 100vh; overflow-y: auto; box-shadow: var(--sombra-gaveta); }
.ui-casca > .ui-menu-lateral[data-aberto] { display: flex; }
.ui-trilho__n:empty { display: none; }
.ui-trilho__n.hot { background: var(--atencao); color: var(--superficie); }

@media (max-width: 720px) {
  /* No celular a barra de baixo fica com os 4 primeiros e o "Mais"; o menu abre na tela toda, acima da barra. */
  .ui-casca .ui-trilho__item--so-largo { display: none; }
  .ui-casca > .ui-menu-lateral { left: 0; width: 100%; max-width: none; bottom: 76px; height: auto; }
  .ui-casca__principal { padding-bottom: calc(96px + var(--esp-4)); }
}

/* Faixa de homologação: no alto de toda tela, para ninguém confundir com a produção. */
.ui-faixa-homologacao {
  display: flex; align-items: center; justify-content: center; gap: var(--esp-2); padding: var(--esp-1) var(--esp-4);
  background: var(--atencao-fundo); color: var(--tinta); border-bottom: 1px solid var(--atencao-linha); font-size: 14px; font-weight: 700;
}
.ui-faixa-homologacao > .ui-icone { color: var(--atencao); }

/* Peças antigas que seguem vivas dentro da casca nova (paleta, gaveta de avisos, barra de status): por cima de tudo. */
[data-visual="3"] .palette { z-index: 40; }
[data-visual="3"] #drawer { z-index: 35; }

/* O seletor de empresa do topo (formulário antigo, com as classes novas). */
.ui-topo .ui-empresa-form { display: inline-flex; }
.ui-topo .ui-empresa-form .ui-entrada { min-height: 44px; border-radius: var(--raio-pilula); font-weight: 700; }

/* Menu da pessoa (details). */
.ui-usuario-menu { position: relative; }
.ui-usuario-menu > summary { list-style: none; cursor: pointer; }
.ui-usuario-menu > summary::-webkit-details-marker { display: none; }
.ui-usuario-menu > .ui-menu { position: absolute; right: 0; top: calc(100% + var(--esp-1)); z-index: 30; display: flex; flex-direction: column; min-width: 14rem; }

/* Contador ao vivo do menu (o bancada.js escreve o número; vazio some; "hot" = pede atenção). */
.ui-menu-lateral__n:empty { display: none; }
.ui-menu-lateral__n.hot { background: var(--atencao-fundo); color: var(--atencao); box-shadow: inset 0 0 0 1px var(--atencao-linha); }

/* O bancada.css põe color-scheme: dark no :root; no modelo 3 os controles nativos seguem o tema da casca. */
html[data-visual="3"] { color-scheme: light; }
html[data-visual="3"][data-theme="escuro"] { color-scheme: dark; }

/* Matriz de permissões: a legenda diz "negrito = regra deste provedor"; o herdado fica sem negrito (e tracejado). */
.ui-matriz__celula--herdado { font-weight: 400; }

/* Texto enviado/recebido mostrado em pre: quebra a linha em vez de vazar na horizontal (celular). */
pre.ui-mono { white-space: pre-wrap; overflow-wrap: anywhere; }

/* O atributo hidden sempre esconde (o ds.css dá display a .ui-lote, .ui-aviso, .ui-menu-lateral__vazio…). */
[hidden] { display: none !important; }

/* Linha que abre o item com um toque (o casca.js segue o data-href). */
tr[data-href] { cursor: pointer; }

/* Coluna do lado que gruda (consulta, odonto): rola sozinha e cabe inteira na tela, como o .cs-lado de 15/10
   (com dois scrolls, o envio de fotos sumia atrás do cartão das ações). */
@media (min-width: 1100px) {
  .ui-colunas__lado--fixo { align-self: start; max-height: calc(100vh - 2 * var(--esp-4)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}

/* A busca do topo é um botão (abre a paleta, Ctrl K): o ícone no fluxo, o texto depois dele, a tecla no fim. */
.ui-topo > .ui-busca--topo {
  gap: var(--esp-2); min-height: 52px; padding: 0 var(--esp-2) 0 var(--esp-4); border: 1px solid var(--linha);
  border-radius: var(--raio-pilula); background: var(--superficie); box-shadow: var(--sombra); color: var(--tinta-2);
  font: inherit; text-align: left; cursor: pointer;
}
.ui-topo > .ui-busca--topo > .ui-icone { position: static; flex: none; }
.ui-topo > .ui-busca--topo > .ui-apoio { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-topo > .ui-busca--topo > .ui-tecla { flex: none; }
/* O número do sino fica no canto do sino, não no canto da página. */
.ui-topo > #bell { position: relative; }
.ui-topo > #bell > .ui-trilho__n { top: 0; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; font-size: 12px; line-height: 20px; }
/* Num topo de até ~1600 px não cabe tudo numa linha: a empresa encurta e a pessoa fica só no avatar (o nome
   continua no title e no menu). */
.ui-topo > .ui-empresa-form .ui-entrada { max-width: 22rem; text-overflow: ellipsis; }
@media (max-width: 1600px) {
  .ui-topo > .ui-usuario-menu .ui-usuario > span:last-child { display: none; }
  .ui-topo > .ui-usuario-menu .ui-usuario { padding: 0; gap: 0; }
}
/* O turno do ponto: só aparece quando a pessoa bate ponto (o /ponto/chip devolve vazio para quem não bate). */
.ui-topo > #ponto-chip:empty { display: none; }
.ui-topo > #ponto-chip { padding: 0; border: 0; background: none; min-height: 0; }
/* O tom do chip diz o estado (cores só dos tokens): turno ok, pausa e liberado em atenção, falta de batida em perigo. */
.ponto-chip--ok { border: 1px solid var(--ok-linha); background: var(--ok-fundo); color: var(--ok); }
.ponto-chip--atencao { border: 1px solid var(--atencao-linha); background: var(--atencao-fundo); color: var(--atencao); }
.ponto-chip--perigo { border: 1px solid var(--perigo-linha); background: var(--perigo-fundo); color: var(--perigo); }
.ponto-chip--neutro { border: 1px solid var(--linha); background: var(--superficie-suave); color: var(--tinta-2); }

@media (max-width: 720px) {
  /* Topo do celular em duas linhas, sem rolar de lado: busca, Íris, sino e pessoa em cima; empresa e
     disponibilidade embaixo, cada uma na largura toda. */
  .ui-casca .ui-topo { flex-wrap: wrap; row-gap: var(--esp-2); }
  .ui-casca .ui-topo > .ui-busca--topo { flex: 1 1 0; min-width: 0; min-height: var(--alvo); }
  .ui-topo > .ui-busca--topo > .ui-tecla { display: none; }
  .ui-topo > .ui-usuario-menu .ui-usuario > span:last-child { display: none; }
  .ui-topo > .ui-usuario-menu .ui-usuario { padding: 0; gap: 0; }
  .ui-topo > .ui-empresa-form { order: 5; flex: 1 1 100%; min-width: 0; }
  .ui-topo > .ui-empresa-form .ui-selecao, .ui-topo > .ui-empresa-form .ui-entrada { width: 100%; min-width: 0; max-width: none; }
  .ui-topo > .avail { order: 6; flex: 1 1 auto; min-width: 0; }
  .ui-topo > .avail > .ui-segmentos__item { flex: 1 1 0; min-width: 0; padding-inline: var(--esp-2); }
  .ui-topo > #modo-chip, .ui-topo > #ponto-chip { order: 7; }
  /* A barra de status (atalhos de teclado) é do computador; no celular ela cobria a barra de navegação. */
  html[data-visual="3"] .app-status { display: none; }
}

/* Abas que não cabem rolam de lado; a barra fina mostra que há mais abas à direita (o ds.css a escondia). */
.ui-abas { scrollbar-width: thin; }

/* Matriz de permissões: cada select com largura para a palavra ("herda: não vê"); a matriz rola de lado. */
.ui-matriz select.ui-matriz__celula { min-width: 8.5rem; }

/* Cabeçalho do paciente (paciente.rs, no atendimento, no pet e no banho): quebra a linha em vez de vazar; no
   celular, o tutor e o WhatsApp descem para uma linha própria. */
.ui-cabecalho-pessoa .pac-cab { flex-wrap: wrap; min-width: 0; }
.ui-cabecalho-pessoa .pac-cab > .ui-cabecalho-pessoa__id { flex: 1 1 16rem; min-width: 0; }
@media (max-width: 720px) {
  .ui-cabecalho-pessoa .pac-cab > .ui-cabecalho-pessoa__contato { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
  /* A barra de ações da consulta fica em cima da navegação de baixo, não por cima dela. */
  html[data-visual="3"] .cs-barra { bottom: 76px; }
  html[data-visual="3"] .ui-casca__principal:has(.cs-barra) { padding-bottom: calc(96px + 72px + var(--esp-4)); }
}

@media (max-width: 720px) {
  /* A barra de baixo divide a largura entre os itens (no ds.css eles não encolhiam: na clínica, "Tutores e pets"
     empurrava o "Mais" para fora da tela e a página rolava de lado). O "Ajustes" fica no menu da pessoa. */
  html[data-visual="3"] .ui-casca > .ui-trilho { overflow-x: hidden; }
  html[data-visual="3"] .ui-casca > .ui-trilho .ui-trilho__item { flex: 1 1 0; min-width: 0; padding-inline: 2px; font-size: 12px; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
  html[data-visual="3"] .ui-casca > .ui-trilho .ui-trilho__fim { display: none; }
}

/* Documentos da consulta: o nome do documento ("Prontuário — consulta nº … · nº …") quebra dentro do botão;
   com o nowrap do .ui-botao ele passava da tela no celular. */
.doc-lista .doc-abrir { white-space: normal; min-width: 0; max-width: 100%; height: auto; text-align: left; overflow-wrap: anywhere; }

/* Bancada, "Hoje": a frase de vazio só aparece enquanto a fita do dia não tem nenhum ponto. */
.tape:not(:empty) + .tape-vazia { display: none; }

/* Select dentro de tabela (equipe: papel, nível, tratamento): largura para a palavra, em vez de só a seta. */
.ui-tabela td select.ui-entrada { min-width: 8rem; }

@media (max-width: 720px) {
  /* No celular, botão e etiqueta com texto longo quebram a linha em vez de passar da tela (o ds.css os põe em
     nowrap): "Gerar a planilha do mês para o contador", "Assinado por … em …". */
  .ui-botao { white-space: normal; max-width: 100%; height: auto; }
  .ui-etiqueta { white-space: normal; max-width: 100%; }
  /* Tabela em cartões: a célula é flex; vários chips ou links nela quebram a linha. */
  .ui-tabela--cartoes tbody td { flex-wrap: wrap; }
  .ui-tabela--cartoes tbody td > * { min-width: 0; max-width: 100%; }
}

/* A faixa de abas rola por dentro, mas a largura mínima dela (todas as abas numa linha) ainda empurrava o
   contêiner em volta (o campo ficava com 484 px num celular de 390). Com contain, ela não impõe largura. */
.ui-abas { contain: inline-size; max-width: 100%; }
@media (max-width: 720px) {
  /* Passos (fechamento do RH): nome, etiqueta e botão quebram a linha. */
  .ui-passos__linha { flex-wrap: wrap; }
}
/* AY-3 (D12a): no celular as abas voltam a rolar de lado, numa linha só (quebrar em 3 linhas escondia a aba atual).
   O desvanecido à direita (mask-image) avisa que há mais; o padding final deixa a última aba fora dele. */
.ui-abas { flex-wrap: nowrap; overflow-x: auto; }
@media (max-width: 720px) {
  .ui-abas { scroll-snap-type: x proximity; scroll-padding-inline: var(--esp-4); -webkit-overflow-scrolling: touch; padding-inline-end: var(--esp-6);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent); mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent); }
  .ui-abas > .ui-aba, .ui-abas > :is(a, button) { scroll-snap-align: start; }
}

/* Texto que não quebra (o número do documento "2026-0109"). */
.ui-nowrap { white-space: nowrap; }
/* Formulário dentro de célula em cartão (salário do fechamento): ocupa a linha, sem cortar o botão. */
.ui-tabela--cartoes tbody td > form { flex: 1 1 100%; }

/* KPIs do dono: o select "maior é melhor / menor é melhor" com largura para a frase. */
.kpi-sentido { min-width: 11.5rem; flex: none; }
/* Painel dos supervisores: o botão "Ver" na base dos campos de filtro. */
.painel-filtros { align-items: flex-end; }
/* Tabela em cartões: a célula quebra entre palavras (nunca no meio da palavra). */
@media (max-width: 720px) { .ui-tabela--cartoes tbody td { overflow-wrap: break-word; } }

@media (max-width: 720px) {
  /* Aba de texto longo: não quebra (AY-3); a faixa rola de lado. */
  .ui-aba { white-space: nowrap; }
  /* O valor da linha de lista encolhe e quebra (conferência do RH: "M R Silva Santos (Definitiva Internet)"). */
  .ui-lista__valor { flex-shrink: 1; min-width: 0; overflow-wrap: anywhere; }
}

/* Código e JSON dentro de célula ("ver dados" do registro de segurança): quebra em qualquer ponto, sem alargar
   a tabela. */
.ui-tabela td pre, .ui-tabela td code { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 720px) { .ui-tabela--cartoes tbody td details { min-width: 0; max-width: 100%; } }
/* Texto com valores longos sem espaço (ids, chaves): quebra em qualquer ponto. */
.ui-quebra { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  /* Orçamento/venda: o select do profissional na célula em cartão ocupa a linha. */
  .ui-tabela--cartoes tbody td[data-rotulo="profissional"] > select { flex: 1 1 100%; min-width: 0; }
}
/* Chip que é link (filtro por URL): sem o sublinhado do navegador. Vale para toda tela (agenda, banho, cobrança). */
a.ui-chip { text-decoration: none; }
/* "Mostrar mais N" (a Paginacao do celular, sem JS): o resto da lista abre embaixo, e o botão some. */
.rcb-mais > summary { list-style: none; margin-top: var(--esp-3); }
.rcb-mais > summary::-webkit-details-marker { display: none; }
.rcb-mais[open] > summary { display: none; }

/* Telas largas (notebook de 15–16" e monitor): no modelo 3 o conteúdo usa a largura toda da área ao lado do
   trilho. Os contêineres antigos de tela tinham teto (1280 px no .agenda, que muitas telas usam, 980 px na
   comanda, 1320 px no pet e na consulta…) e, sem centralizar, deixavam centenas de px vazios à direita. As
   colunas do design system (ui-colunas, ui-grade) dividem o espaço. */
html[data-visual="3"] :is(.rh, .metas, .agenda, .agentes, .filas, .wfs, .comanda, .pet-pagina, .cs, .fx-pagina, .banho, .ponto-admin, #dono) { max-width: none; }

/* Telas grandes (notebook de 15–16" e monitor), revisão de 17/10:
   - os contêineres antigos de tela (main.agenda e irmãos) empilhavam os blocos sem espaço (cartão a 1–5 px do
     outro, números colados nas abas): no modelo 3 eles são uma coluna com o espaço do design system;
   - a área de conteúdo para em 1680 px e fica no meio: num monitor de 1920 px sobram ~50 px de cada lado, em vez
     de tabelas de 1900 px com o nome a 1000 px do número;
   - campo e select não passam de uma largura legível (36rem; texto longo 60rem), em vez de esticar a 1700 px;
   - parágrafo com no máximo 80 caracteres por linha. */
html[data-visual="3"] :is(main.agenda, .metas, .agentes) { display: flex; flex-direction: column; gap: var(--esp-4); }
html[data-visual="3"] .ui-casca__conteudo { width: 100%; max-width: 1680px; margin-inline: auto; }
html[data-visual="3"] .ui-casca__conteudo :is(input.ui-entrada, select.ui-entrada) { max-width: 36rem; }
html[data-visual="3"] .ui-casca__conteudo textarea.ui-entrada { max-width: 60rem; }
html[data-visual="3"] .ui-casca__conteudo p { max-width: 100ch; }

/* Matriz de permissões: a coluna "Operação" com largura para o nome e a descrição (em 6 linhas ficava ilegível);
   os selects com largura para "herda: não vê"; a matriz rola de lado dentro do cartão. */
.ui-matriz .ui-matriz__primeira { min-width: 16rem; }
.ui-matriz select.ui-matriz__celula { min-width: 10rem; }

/* Onda 6: classes de apoio para tela grande (pedidas pelos escritores; o ds.css não tem equivalente). */
/* Tabela de poucas colunas curtas: largura natural, sem espalhar 4 colunas por 1700 px. No celular, igual à .ui-tabela. */
/* (Desfeito na revisão 3: a tabela estreita deixava metade do cartão vazio. A classe fica, sem efeito, para marcar
   tabelas curtas; o espaço se resolve pondo os cartões lado a lado.) */
/* Texto corrido (avisos, cláusulas, descrições): largura de leitura. */
/* A6 (6a): a largura de leitura é 70ch. */
.ui-leitura { max-width: 70ch; }
/* Campo curto (UF, DDD, nº): não ocupa a coluna inteira da grade. */
.ui-campo--curto { max-width: 7rem; }
.ui-campo--curto :is(input, select) { width: 100%; }
/* Gráficos: no computador acompanham o cartão (o ds trava em 480 px); a altura não passa de 22rem. */
html[data-visual="3"] .ui-casca__conteudo .ui-grafico { max-width: 100%; max-height: 22rem; }
html[data-visual="3"] .ui-casca__conteudo .ui-pequeno .ui-grafico { max-width: 160px; }
/* Metas: os gráficos da semana com mínimo de 240 px, como no #dono. */
html[data-visual="3"] .metas .semana { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Quadro: colunas com mínimo legível; o quadro rola de lado se não couber; quebra só entre palavras. */
html[data-visual="3"] .quadro .raias { grid-template-columns: repeat(7, minmax(14rem, 1fr)); overflow-x: auto; }
html[data-visual="3"] :is(.raia, .filas) :is(h2, h3, strong, .ui-cartao__titulo) { overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* Cartões de integração em grade: o botão fica no pé, na mesma altura em todos os cartões. */
.ui-grade > .ui-integracao { display: flex; flex-direction: column; }
.ui-grade > .ui-integracao > .ui-acoes:last-child { margin-top: auto; }
/* Tabela em cartões no celular: o "não quebra" (ui-nowrap) vale só na tabela de verdade; no cartão, texto longo quebra
   (a data e o nome do cliente das quedas, os códigos do /fiscal/pronto empurravam a página para 436–619 px). */
@media (max-width: 720px) {
  .ui-tabela--cartoes tbody :is(td.ui-nowrap, td .ui-nowrap) { white-space: normal; overflow-wrap: anywhere; }
}
/* Grades no computador: auto-fit em vez de auto-fill. Com 2 ou 3 cartões numa linha de 4–5 trilhas, os cartões
   esticam e dividem a largura (antes ficavam no canto esquerdo com o resto da linha vazio). */
/* :where() mantém a especificidade do ds (0,1,0): regras próprias de tela, como .ui-grade.ag-grade, continuam valendo. */
:where(html[data-visual="3"] .ui-casca__conteudo) .ui-grade { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
:where(html[data-visual="3"] .ui-casca__conteudo) .ui-grade--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }

/* Revisão 3 das telas grandes.
   A área de conteúdo da casca é coluna flex: um contêiner antigo com margin:0 auto (.campo, .ponto-bater…) encolhia
   até o conteúdo (o campo ficava com 616 px num monitor de 1920). Com width:100% ele vai até o próprio teto.
   :where() deixa a especificidade em zero: a regra de largura de cada tela continua valendo. */
:where(html[data-visual="3"] .ui-casca__conteudo) > * { width: 100%; box-sizing: border-box; }
/* O select vem dentro de .ui-selecao, que desenha a seta: o teto vale para o conjunto, senão a seta fica longe da caixa. */
:where(html[data-visual="3"] .ui-casca__conteudo) .ui-selecao { max-width: 36rem; }
/* Formulário de uma linha dentro de célula (select + nota + botão, como no Pacote do contador): no computador não
   quebra; o botão ficava sozinho na 2ª linha. */
@media (min-width: 900px) {
  td > form.ui-linha-campos { flex-wrap: nowrap; }
  td > form.ui-linha-campos :is(select, .ui-selecao) { min-width: 12rem; }
}
/* Busca de uma linha (campo + botão): o campo não leva o teto de 36rem (o botão ficava longe dele); a linha inteira é que
   tem teto. */
html[data-visual="3"] .ui-casca__conteudo .ui-busca-linha { max-width: 48rem; }
html[data-visual="3"] .ui-casca__conteudo .ui-busca-linha :is(input.ui-entrada, select.ui-entrada) { max-width: none; }
/* Título do acordeão no celular: o resumo (span.ui-apoio) desce de linha em vez de empurrar a página (conferência). */
@media (max-width: 720px) { .ui-acordeao__titulo { flex-wrap: wrap; } }
/* Select sem ui-entrada (filtros antigos, "Como falamos de você"): mesmo teto dos outros campos. */
:where(html[data-visual="3"] .ui-casca__conteudo) select:not(.ui-matriz__celula) { max-width: 36rem; }
/* Revisão 4 das telas grandes. */
/* Login: cartão centrado, com a largura de um formulário (esticava na tela toda). */
body.login { display: grid; place-items: center; min-height: 100vh; margin: 0; padding: var(--esp-4); box-sizing: border-box; background: var(--fundo); }
body.login > form.ui-cartao { width: min(26rem, 100%); display: flex; flex-direction: column; gap: var(--esp-4); }
/* Novo agendamento: o .novo-agenda antigo (bancada.css) fazia do cartão uma grade e jogava o formulário para a direita. */
.ui-cartao.novo-agenda { display: flex; flex-direction: column; gap: var(--esp-4); }
/* Coluna lateral vazia: o principal ocupa a linha (Hoje da clínica sem "Agora"). */
.ui-colunas:has(> .ui-colunas__lado:empty) { display: block; }
.ui-colunas > .ui-colunas__lado:empty { display: none; }
/* Cartão em grade/flex não estica além do pai: a tabela larga rola por dentro (Equipe, queda de PON). Texto longo
   (endereço do contrato) quebra dentro do cartão. */
:where(html[data-visual="3"] .ui-casca__conteudo) .ui-cartao { min-width: 0; overflow-wrap: break-word; }
/* Campo de arquivo no celular: a linha empilha (o botão "Escolher arquivo" estourava a caixa e cortava o select ao lado). */
@media (max-width: 720px) {
  .ui-linha-campos:has(input[type="file"]) > * { flex: 1 1 100%; }
}
:where(html[data-visual="3"] .ui-casca__conteudo) input[type="file"] { max-width: 100%; }
.ui-captura-foto__miniatura { object-fit: cover; }
/* Painel do cliente (O1-027/028/047): histórico por tipo e detalhe do chamado. */
.pn-hist, .pn-chamado { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.pn-chamado__texto { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100ch; }
/* O1-087: <progress> nativo com a classe do ds (sem style= para o valor). */
progress.ui-progresso { display: block; width: 100%; max-width: 36rem; height: 8px; border: 0; border-radius: var(--raio-pilula); background: var(--fundo-barra); accent-color: var(--marca); overflow: hidden; }
progress.ui-progresso::-webkit-progress-bar { background: var(--fundo-barra); border-radius: var(--raio-pilula); }
progress.ui-progresso::-webkit-progress-value { background: var(--marca); border-radius: var(--raio-pilula); }
progress.ui-progresso::-moz-progress-bar { background: var(--marca); border-radius: var(--raio-pilula); }
/* O1-029: barra de saídas no gráfico de entradas e saídas do /dono. */
.ui-grafico__barra--perigo { fill: var(--perigo); }
/* O1-086: a barra indeterminada só aparece enquanto o botão do form data-ocupado está em aria-busy. */
form[data-ocupado] progress.ui-progresso { display: none; }
form[data-ocupado]:has(button[aria-busy="true"]) progress.ui-progresso { display: block; }

/* Barras fixas (2.7 da proposta de UX): no modelo 3 não há barra de status, e o ponto "ao vivo" vai para o topo.
   A barra fixa da tela (comanda, salvar, resolver) fica acima do trilho no celular; o campo com foco não cai embaixo dela. */
html[data-visual="3"] .app-status { display: none; }
@media (max-width: 720px) { html[data-visual="3"] .ui-barra-fixa { bottom: 76px; } }
html[data-visual="3"] { scroll-padding-bottom: var(--esp-6); }
@media (max-width: 720px) { html[data-visual="3"] { scroll-padding-bottom: 112px; } }
/* Captura honesta (P13): a página inteira esconde só os fixos; a foto --dobra não usa isto. */
html[data-captura] :is(.ui-casca > .ui-trilho, .app-status, .ui-toasts) { display: none !important; }
/* C2 da 5b: na foto inteira, as barras presas ficam no fluxo (no pé da página), e não por cima dos campos da primeira tela. */
html[data-captura] :is(.ui-form__rodape--fixo, .ui-barra-fixa, .cs-barra) { position: static; }
/* O ponto "ao vivo" no topo: a mesma linha do sino e da pessoa, sem a largura da barra de status. */
.ui-ao-vivo-topo { display: inline-flex; align-items: center; gap: var(--esp-2); min-width: 0; font-size: 14px; color: var(--tinta-2); }

/* ── Onda 5a · AY5: o polimento de largura, celular e formulário (só tokens) ─────────────────────────────────── */

/* O obrigatório visível (Y8): a legenda no alto do formulário que tem pelo menos um campo obrigatório. O asterisco
   de cada campo (aria-hidden) já existe; o required continua dando a semântica. */
form:has(.ui-campo__obrigatorio)::before, form[method=post]:has(:required)::before { content: "* obrigatório; o resto é opcional"; display: block; font-size: 14px; line-height: 1.45; font-weight: 700; color: var(--tinta-2); }
/* A2 (6a): o asterisco vem do :required, para o formulário escrito à mão que não usa .ui-campo__obrigatorio. Quem já tem o
   asterisco no rótulo não ganha outro. */
.ui-campo:has(:required) > :is(label, .ui-campo__rotulo):not(:has(.ui-campo__obrigatorio))::after { content: " *"; color: var(--perigo); font-weight: 700; }
.ui-campo__obrigatorio { font-weight: 700; }

/* Radio e caixa: o desenho com no mínimo 20 px e a área de toque de 44 px (o ::before invisível alarga o alvo). */
.ui-caixa, .ui-radio { min-width: 20px; min-height: 20px; }
.ui-caixa::before, .ui-radio::before { content: ""; position: absolute; inset: -13px; }
html[data-visual="3"] input[type="checkbox"]:not(.ui-caixa), html[data-visual="3"] input[type="radio"]:not(.ui-radio) { width: 20px; height: 20px; accent-color: var(--marca); }

/* Largura (P14): a linha de leitura vale 70 caracteres, e o botão "largo" é de largura toda só no celular. */
html[data-visual="3"] .ui-casca__conteudo :is(.ui-prosa, .ui-cabecalho__apoio) { max-width: 70ch; }
.ui-prosa, .ui-cabecalho__apoio { max-width: 70ch; }
.ui-botao--largo { max-width: 22rem; }
.ui-barra-fixa .ui-botao--largo, .ui-visita__acoes .ui-botao--largo { max-width: none; }
@media (max-width: 720px) { .ui-botao--largo { max-width: none; } }
/* Select: nunca passa do pai; no celular tem a largura do campo. */
select.ui-entrada { max-width: 100%; }
@media (max-width: 720px) {
  .ui-selecao { width: 100%; }
  .ui-selecao > select.ui-entrada { width: 100%; }
}

/* O cabeçalho no celular: o título vem primeiro, as ações descem para a linha de baixo e quebram, sem cortar. */
@media (max-width: 720px) {
  .ui-cabecalho__linha { flex-direction: column; align-items: stretch; gap: var(--esp-3); }
  .ui-cabecalho__linha > * { min-width: 0; max-width: 100%; }
  .ui-cabecalho__linha > .ui-acoes { flex-wrap: wrap; justify-content: flex-start; }
  .ui-acoes { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .ui-acoes > * { min-width: 0; max-width: 100%; }
}

/* Resumo e KPIs: duas colunas até 480 px (estende o AY-5, que dava 1 coluna em 320 px). */
@media (max-width: 480px) {
  .ui-kpis .ui-kpis__fila, .ui-resumo .ui-kpis__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Página pública: o conteúdo nunca encosta na borda da janela. */
.ui-pub__conteudo { padding-inline: var(--esp-4); box-sizing: border-box; }

/* Valores longos sem espaço (ids, e-mails, chaves) quebram em vez de alargar a página. */
.ui-pares dd { overflow-wrap: anywhere; min-width: 0; }
.ui-tabela td a { overflow-wrap: anywhere; }

/* Linha do tempo: respiro antes dela quando vem depois de outro bloco. */
.ui-tempo:not(:first-child) { margin-top: var(--esp-4); }

/* ── Onda 6a · AY6: o valor que não quebra, o cartão do celular, a casca compacta e a largura de leitura (só tokens) ── */

/* A6: o formulário de uma coluna (um só .ui-campo por linha) fica em até 720 px; o aside vazio some. */
html[data-visual="3"] .ui-casca__conteudo form.ui-form--coluna { max-width: 720px; }
.ui-casca__conteudo aside:empty { display: none; }

/* A5: a casca compacta no celular. A faixa de homologação é uma linha de 28 px com reticências; as ações frequentes
   são uma linha que rola, e "Todas as ações" fica só com o ícone; o topo fica em 48 px na primeira linha. */
@media (max-width: 720px) {
  .ui-faixa-homologacao { display: block; height: 28px; padding: 0 var(--esp-3); font-size: 12px; line-height: 28px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ui-faixa-homologacao > .ui-icone { display: inline-block; width: 14px; height: 14px; margin-right: var(--esp-1); vertical-align: -2px; }
  .ui-casca .ui-topo { min-height: 48px; padding-block: var(--esp-1); gap: var(--esp-2); }
  .ui-casca .ui-topo > .ui-empresa-form { flex: 1 1 8rem; order: 5; }
  .ui-casca .ui-topo > .ui-empresa-form .ui-entrada { min-height: 36px; }
  .ui-frequentes { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .ui-frequentes__todas { font-size: 0; gap: 0; padding: 0 var(--esp-3); margin-left: 0; }
  .ui-frequentes__todas > .ui-tecla { display: none; }
  .ui-frequentes__todas > .ui-icone { font-size: 15px; }
}

/* A8: no celular o campo ocupa a linha (antes eram três por vez); o rodapé fixo com "Salvar" não cobre o último campo. */
@media (max-width: 720px) {
  .ui-linha-campos > .ui-campo { flex: 1 1 100%; min-width: 0; }
  form:has(.ui-form__rodape--fixo) { padding-bottom: var(--esp-10); }
  .ui-form__rodape--fixo > .ui-botao--primario { flex: 1 1 100%; }
}

/* Resumo antes do envio (casca.js, J1): a janela com o que vai ser enviado, a frase do efeito e Voltar / Confirmar. */
.ui-janela.ui-resumo { width: min(36rem, calc(100vw - 32px)); max-height: calc(100vh - 2 * var(--esp-4)); overflow-y: auto; }
.ui-janela.ui-resumo > .ui-janela__titulo { margin: 0; }
.ui-resumo__campos { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: var(--esp-2) var(--esp-4); margin: 0; padding: var(--esp-3) 0; border-block: 1px solid var(--linha); }
.ui-resumo__campos > dt { font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.ui-resumo__campos > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ui-janela__acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--esp-3); }
@media (max-width: 720px) { .ui-janela__acoes > * { flex: 1 1 100%; } .ui-resumo__campos { grid-template-columns: minmax(0, 1fr); } }

/* ── Onda 6c · CEL6: o topo do celular numa linha de 48 px, as frequentes só nas telas de início e o main mais perto do topo ── */
.ui-topo > .avail-menu { display: none; }
@media (max-width: 720px) {
  /* O topo: busca (só o ícone), empresa (ocupa o que sobra), Íris, sino, ponto "ao vivo" e a pessoa, tudo numa linha. */
  .ui-casca .ui-topo { flex-wrap: nowrap; min-height: 48px; padding-block: var(--esp-1); gap: var(--esp-2); }
  .ui-casca .ui-topo > .ui-busca--topo { flex: none; width: var(--alvo); padding: 0; justify-content: center; }
  .ui-casca .ui-topo > .ui-busca--topo > .ui-apoio { display: none; }
  .ui-casca .ui-topo > .ui-empresa-form, .ui-casca .ui-topo > .ui-empresa { order: 0; flex: 1 1 0; min-width: 0; overflow: hidden; }
  .ui-casca .ui-topo > .ui-empresa > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* A disponibilidade sai do topo; a segunda cópia mora no menu da pessoa, e o avatar leva o anel do estado. */
  .ui-topo > .avail-topo { display: none; }
  .ui-usuario-menu > .ui-menu > .avail-menu { display: flex; margin: var(--esp-2); }
  .ui-usuario-menu > .ui-menu > .avail-menu > .ui-segmentos__item { flex: 1 1 0; min-width: 0; padding-inline: var(--esp-2); }
  /* O SANDBOX é só um ícone (o texto vem do bancada.js); o nome fica no aria-label. */
  .ui-topo > #modo-chip { order: 0; flex: none; font-size: 0; padding: var(--esp-1) var(--esp-2); }
  .ui-topo > #modo-chip::before { content: "\2697"; font-size: 16px; line-height: 1; }
  /* O "ao vivo" é só o ponto; o aviso do provedor e a frase saem (o title do .live segue valendo). */
  .ui-ao-vivo-topo .live-t, .ui-ao-vivo-topo #status-prov { display: none; }
  .ui-ao-vivo-topo .live { gap: 0; }
  .ui-ao-vivo-topo .live #live-retry:not([hidden]) { display: inline-flex; }
  /* O turno do ponto: o ícone e o estado em texto ("Em pausa · 03:28") SEMPRE que couber, com ou sem seletor de empresa.
     A pílula cresce com flex; o texto encolhe com reticências; só some numa tela realmente estreita (< 340 px). */
  .ui-topo > #ponto-chip { order: 0; flex: 1 1 auto; min-width: var(--alvo); }
  .ui-topo > #ponto-chip .ponto-chip { padding: var(--esp-1) var(--esp-3); min-height: var(--alvo); justify-content: center; gap: var(--esp-2); font-size: 13px; font-weight: 700; }
  .ui-topo > #ponto-chip .ponto-chip { min-width: 0; max-width: 100%; }
  .ui-topo > #ponto-chip .pc-s { display: inline-flex; align-items: center; gap: var(--esp-2); min-width: 0; overflow: hidden; }
  .ui-topo > #ponto-chip .pc-i { font-size: 18px; line-height: 1; }
  .ui-topo > #ponto-chip .pc-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .ui-casca .ui-topo > .ui-empresa { min-width: 40px; }
  /* Telas realmente estreitas (< 340 px): só o ícone. */
  @media (max-width: 339px) { .ui-topo > #ponto-chip .pc-t { display: none; } .ui-topo > #ponto-chip .ponto-chip { padding-inline: var(--esp-2); } }
  /* O círculo da pessoa: uma letra só no celular (a segunda das iniciais é do notebook). */
  .ui-usuario .ui-avatar__b { display: none; }
  /* As ações frequentes só nas telas de início (/hoje e /bancada, marcadas com data-inicio); no resto, a busca. */
  .ui-casca .ui-frequentes { display: none; }
  body:has([data-inicio]) .ui-casca .ui-frequentes { display: flex; }
  /* O main mais perto do topo; as migalhas só com o pai ("‹ Tutores e pets"), numa linha. */
  /* O título perto do topo (meta: até ~120 px do alto da tela): sem o respiro duplo entre o topo e o conteúdo
     (padding do main + gap da coluna + padding do conteúdo somavam ~36 px antes do título). */
  .ui-casca__principal { padding-top: var(--esp-1); gap: var(--esp-2); }
  .ui-casca__conteudo { padding-top: 0; }
  .ui-migalhas li { display: none; }
  .ui-migalhas li:nth-last-child(2) { display: inline-flex; }
  .ui-migalhas li:nth-last-child(2)::before { content: "\2039"; margin-right: var(--esp-1); }
  .ui-migalhas ol { flex-wrap: nowrap; overflow: hidden; }
}