/* componentes.css — componentes canônicos do site da Cestinha (vitrine, páginas, entrada e admin).
 * Só var(--...): os valores visuais vêm do theme.css (gerado do design system v3) e do base.css (gerado).
 * Este arquivo USA .cl-sobretitulo .cl-titulo .cl-nome .cl-numero .cl-apoio .cl-rodape .cl-fio .cl-miuda .cl-preco
 * .cl-vitrine do base.css e não as redefine.
 * Ordem de carga: Bootstrap → theme.css → base.css → componentes.css → (admin) proposta_admin.css, admin.css → CSS da área.
 * Dono: desenvolvedor-frontend. Componente novo nasce aqui; o CSS de uma área nunca redefine componente.
 */

/* ==========================================================================================================
 * PROPOSTA — demanda 3, não aprovada pelo afiliados
 * Números que o design system v3 ainda não tem como token. Só --prop-*, sem cor. Origem de cada um:
 *  (M) medido no mockup aceito (Admin Aprovacao.dc.html / Admin Gestao.dc.html / Vitrine 1c v3.dc.html);
 *  (DS) valor escrito dentro de um componente do DS v3 (components/**), que ainda não virou token.
 * Quando o afiliados aprovar, cada --prop-* vira token do DS e sai daqui. Conferir antes de usar: CONTRATO_VISUAL.md §1.
 * ========================================================================================================== */
:root{
  /* campo e botão compacto do admin e das telas de entrada — (M) mínimo de toque no celular, 36 no desktop (≥ 1000px) */
  --prop-alto-compacto:36px;
  --prop-alto-compacto-celular:44px;
  --prop-alvo-menor:32px;
  --prop-alvo-menor-celular:40px;
  --prop-fonte-campo:14px;
  --prop-fonte-campo-celular:16px;      /* (M) abaixo de 16 o iOS dá zoom ao focar */
  --prop-fonte-rotulo:13px;
  --prop-fonte-botao:14px;
  --prop-fonte-media:15px;              /* (M) subtítulo de tela, título de folha, linha de folha */
  --prop-recuo-campo:10px;
  --prop-recuo-botao:14px;
  --prop-caixa-marcar:20px;
  --prop-mostrar-reserva:88px;          /* (M) espaço do "Mostrar" dentro do campo de senha */
  /* título de tela e telas de entrada/erro (M) */
  --prop-fonte-titulo-tela:22px;
  --prop-entrelinha-titulo-tela:1.2;
  --prop-entrada-coluna:400px;
  --prop-entrada-logo:200px;
  --prop-coluna-erro:520px;
  /* cartão do achado (M: Vitrine 1c v3.dc.html:285-325) */
  --prop-cartao-lado:360px;
  --prop-cartao-corpo:300px;
  --prop-foto-max:560px;
  --prop-icone:22px;
  --prop-selo-escala:1.3;
  /* cabeçalho e rodapé públicos (DS: Cabecalho.jsx, Rodape.jsx) */
  --prop-logo-cab:36px;
  --prop-logo-cab-desktop:44px;
  --prop-simbolo-cab:32px;
  --prop-logo-rodape:240px;
  --prop-coluna-titulo-erro:30rem;      /* (M) Site Restante.dc.html:136, h1 do erro do site */
  --prop-galeria-mini:56px;             /* (M) miniatura da galeria da /N, 56 por 70, Vitrine 1c v3.dc.html:185-193 */
  /* folha, bloco, indicador e foto apagada */
  --prop-folha-largura:22rem;           /* (DS) painel de compartilhar no desktop, FolhaCompartilhar.jsx */
  --prop-folha-alto-max:90vh;           /* (M) folha de baixo do admin ('Mais'), Admin Gestao.dc.html:233-240 */
  --prop-entrelinha-bloco:1.3;          /* (M) título do bloco do admin, Admin Gestao.dc.html:141 */
  --prop-giro:900ms;                    /* indicador de carregamento (movimento próprio, sem token no DS) */
  --prop-opacidade-apagada:.6;          /* (DS) foto de achado que saiu da vitrine, Miniatura.jsx */
  /* traço da Lana sob a palavra do título — (DS) components/site/traco/Sublinhado.jsx (_ds_bundle.js:371-401); um nome só (era --prop-sublinhado-* na s7 e --prop-traco-* na s9) */
  --prop-traco-esquerda:-2%;
  --prop-traco-abaixo:-0.28em;
  --prop-traco-largura:104%;
  --prop-traco-altura:0.4em;
  /* largura do quadro do modelo "como fica no site" (a mesa da prévia): (M) Admin Aprovacao.dc.html:1139; era --prop-aprov-quadro (s8) e --prop-achados-quadro (s10) */
  --prop-modelo-quadro:390px;
  /* medida do texto de topo (vitrine e cabeçalho de tela do admin): (M) Vitrine 1c v3.dc.html:71; subida do vitrine.css pela s12 */
  --prop-texto-topo:46rem;
}

/* ==========================================================================================================
 * Base por cima do reboot do Bootstrap (laudo s0, itens 2-5): margem de parágrafo, hr, foco, texto só de leitor
 * ========================================================================================================== */
p.cl-apoio,p.cl-numero,p.cl-sobretitulo,p.cl-rodape{margin:0}
hr.cl-fio{opacity:1}
:where([class^="cl-"],[class*=" cl-"]):focus-visible{outline:var(--foco-largura) solid var(--foco-cor);outline-offset:var(--foco-recuo);box-shadow:none}
.cl-rod :focus-visible,.cl-toast :focus-visible,.cl-mensagem--erro :focus-visible,.cl-alerta--critico :focus-visible{outline-color:var(--foco-cor-sobre-oliva)}
.cl-so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Dica (tooltip) do Bootstrap vestida com a marca: sem seta, sem preto de fábrica */
.tooltip{--bs-tooltip-zindex:60;--bs-tooltip-max-width:var(--largura-texto);--bs-tooltip-padding-x:var(--esp-3);--bs-tooltip-padding-y:var(--esp-2);
  --bs-tooltip-font-size:var(--tam-miuda);--bs-tooltip-color:var(--papel);--bs-tooltip-bg:var(--carvao);--bs-tooltip-border-radius:var(--raio-pequeno);
  --bs-tooltip-opacity:1;--bs-tooltip-arrow-width:0;--bs-tooltip-arrow-height:0;font-family:var(--fonte)}
.tooltip-arrow{display:none}
.tooltip-inner{text-align:left;font-weight:var(--peso-medio);line-height:var(--entrelinha-miuda)}

/* ==========================================================================================================
 * Botão  (DS Botao.jsx) — "Ver o anúncio" é .cl-botao.cl-botao--largo (48 px, raio 12). A densidade do admin é
 * o MODIFICADOR --compacto; nunca por ancestral.
 * ========================================================================================================== */
.cl-botao{display:inline-flex;align-items:center;justify-content:center;gap:var(--esp-2);box-sizing:border-box;min-height:var(--alvo-minimo);
  padding:var(--esp-3) var(--esp-6);border:var(--fio) solid var(--botao-fundo);border-radius:var(--raio-botao);background:var(--botao-fundo);color:var(--botao-texto);
  font-family:var(--fonte);font-size:var(--tam-corpo);font-weight:var(--peso-forte);line-height:1;text-align:center;text-decoration:none;cursor:pointer;
  box-shadow:var(--sombra);transition:background var(--transicao),border-color var(--transicao),color var(--transicao)}
.cl-botao:hover{background:var(--botao-fundo-hover);border-color:var(--botao-fundo-hover);color:var(--botao-texto);text-decoration:none}
.cl-seta{flex:none;width:1.1em;height:1.1em}
/* a seta (SVG de traço oliva) fica papel sobre o botão cheio; no secundário e no desligado o texto é oliva e a seta também */
.cl-botao:not(.cl-botao--secundario):not(.cl-botao--desligado):not(.cl-botao--texto) .cl-seta{filter:brightness(0) invert(1)}
.cl-botao--largo{display:flex;width:100%}
.cl-botao--compacto{min-height:var(--prop-alto-compacto-celular);padding:0 var(--prop-recuo-botao);border-radius:var(--raio-botao);font-size:var(--prop-fonte-botao);white-space:nowrap}
.cl-botao--secundario{background:var(--papel);border-color:var(--oliva);color:var(--oliva)}
.cl-botao--secundario:hover{background:var(--areia);border-color:var(--oliva);color:var(--oliva)}
.cl-botao--texto{min-height:var(--prop-alvo-menor-celular);padding:0;border:0;background:none;color:var(--oliva);font-size:var(--prop-fonte-botao);
  text-decoration:underline;text-decoration-thickness:var(--fio);text-underline-offset:.18em}
.cl-botao--texto:hover{background:none;color:var(--carvao);text-decoration:underline;text-decoration-color:var(--pedra)}
/* destrutivo (V11): variante própria PROPOSTA ao afiliados; a paleta não tem outra cor, então a diferença é o carvão cheio */
.cl-botao--destrutivo{background:var(--carvao);border-color:var(--carvao);color:var(--papel)}
.cl-botao--destrutivo:hover{background:var(--oliva);border-color:var(--oliva)}
.cl-botao--desligado,.cl-botao:disabled,.cl-botao[aria-disabled="true"]{background:var(--botao-fundo-desativado);border-color:var(--botao-fundo-desativado);color:var(--botao-texto-desativado);cursor:not-allowed}
.cl-botao--desligado:hover,.cl-botao:disabled:hover,.cl-botao[aria-disabled="true"]:hover{background:var(--botao-fundo-desativado);border-color:var(--botao-fundo-desativado);color:var(--botao-texto-desativado)}

/* Botão de ícone (lupa, fechar, compartilhar): ícone de 22 px numa área de toque de 44 px */
.cl-botao-icone{display:grid;place-items:center;flex:none;width:var(--alvo-icone);height:var(--alvo-icone);padding:0;border:0;border-radius:var(--raio-pilula);background:transparent;cursor:pointer}
.cl-botao-icone img{width:var(--prop-icone);height:var(--prop-icone);display:block}
.cl-botao-icone:hover{background:var(--areia)}
.cl-botao-icone--sobre-oliva img{filter:brightness(0) invert(1)}
.cl-botao-icone--sobre-oliva:hover{background:var(--carvao)}

/* ==========================================================================================================
 * Aviso, selo do Nº, chip
 * ========================================================================================================== */
.cl-aviso{margin:0}
.cl-aviso--sobre-oliva{color:var(--texto-sobre-oliva)}

.cl-selo{display:inline-flex;align-items:center;gap:var(--esp-2);width:fit-content;padding:var(--esp-1) var(--esp-4) var(--esp-1) var(--esp-1);background:var(--fundo-selo);border-radius:var(--raio-pilula);line-height:1}
.cl-selo img{flex:none;width:calc(var(--esp-6) + var(--esp-2));height:calc(var(--esp-6) + var(--esp-2))}
.cl-selo-n{display:inline-flex;align-items:baseline;gap:var(--esp-1);color:var(--oliva);font-weight:var(--peso-extra);font-size:calc(var(--tam-selo) * var(--prop-selo-escala));letter-spacing:var(--espaco-selo);white-space:nowrap}
.cl-selo-no{font-size:var(--tam-numero);letter-spacing:var(--espaco-numero)}
.cl-selo--pequeno{padding:var(--esp-1) var(--esp-3) var(--esp-1) var(--esp-2)}
.cl-selo--pequeno img{width:var(--esp-5);height:var(--esp-5)}
.cl-selo--pequeno .cl-selo-n{font-size:var(--tam-numero)}
.cl-selo--flutuante{position:absolute;left:var(--esp-3);top:var(--esp-3);z-index:1}

.cl-chips{display:flex;gap:var(--esp-2);overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--margem-cartao));padding:var(--esp-1) var(--margem-cartao)}
.cl-chips::-webkit-scrollbar{display:none}
.cl-chip{display:inline-flex;align-items:center;gap:var(--esp-2);flex:none;min-height:var(--alvo-icone);padding:0 var(--esp-4);border:0;border-radius:var(--raio-pilula);
  background:var(--fundo-chip);color:var(--oliva);font-family:var(--fonte);font-size:var(--tam-apoio);font-weight:var(--peso-forte);line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer}
.cl-chip img{width:var(--esp-5);height:var(--esp-5)}
.cl-chip:hover{background:var(--pedra);color:var(--oliva);text-decoration:none}
.cl-chip-contagem{font-weight:var(--peso-medio)}
.cl-chip--ativo{background:var(--fundo-chip-ativo);color:var(--texto-sobre-oliva)}
.cl-chip--ativo img{filter:brightness(0) invert(1)}
.cl-chip--ativo:hover{background:var(--carvao);color:var(--texto-sobre-oliva)}

/* ==========================================================================================================
 * Pílula (filtro, etapa, aba de opção) e escolha em pílulas — PROPOSTA da demanda 3, subida das três cópias (s8, s10, s11) pela s12.
 * Filtro = <a class="cl-pilula" aria-current="true">; etapa/aba = <button class="cl-pilula">; escolha = <label class="cl-pilula"><input type="radio"
 * class="cl-so-leitor">…</label> dentro de fieldset.cl-escolha. O PHP (ComponentesAdmin::pilula/pilulas) emite aria-current E cl-pilula--ativo.
 * A caixa de marcar das grades de permissão e de escopo (gestão) tem a MESMA cara de pílula, por contexto: entra na mesma lista de seletores.
 * Foco: o anel é POR FORA (padrão). O contêiner que ROLA na horizontal (.cl-pilulas) o desenha por dentro, porque cortaria um anel de fora;
 * os contêineres da lista de achados e das etapas dão o respiro com padding e ficam por fora. Hover do ativo em carvão (como .cl-chip--ativo).
 * ========================================================================================================== */
.cl-pilulas{display:flex;gap:var(--esp-2);overflow-x:auto;scrollbar-width:none;scroll-padding-inline:var(--esp-3);padding:var(--esp-1) 0}
.cl-pilulas::-webkit-scrollbar{display:none}
.cl-pilulas + .cl-pilulas{margin-top:var(--esp-1)}
.cl-pilulas :focus-visible{outline-offset:calc(-1 * var(--foco-largura))}
.cl-pilula,:is(.cl-grade-permissoes, .cl-grade-escopos) .cl-marcar{display:inline-flex;flex:none;align-items:center;gap:var(--esp-2);box-sizing:border-box;min-height:var(--prop-alvo-menor-celular);
  padding:0 var(--esp-3);border:var(--fio) solid var(--oliva);border-radius:var(--raio-pilula);background:var(--papel);color:var(--oliva);
  font-size:var(--prop-fonte-rotulo);font-weight:var(--peso-forte);line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer}
.cl-pilula:hover,:is(.cl-grade-permissoes, .cl-grade-escopos) .cl-marcar:hover{background:var(--areia);color:var(--carvao);text-decoration:none}
.cl-pilula--ativo,.cl-pilula:has(input:checked),:is(.cl-grade-permissoes, .cl-grade-escopos) .cl-marcar:has(input:checked){background:var(--oliva);color:var(--texto-sobre-oliva)}
.cl-pilula--ativo:hover,.cl-pilula:has(input:checked):hover,:is(.cl-grade-permissoes, .cl-grade-escopos) .cl-marcar:has(input:checked):hover{background:var(--carvao);color:var(--texto-sobre-oliva)}
.cl-pilulas .cl-pilula--ativo:focus-visible{outline-color:var(--foco-cor-sobre-oliva)}
.cl-pilula{font-family:var(--fonte)}
.cl-pilula:has(input:focus-visible){outline:var(--foco-largura) solid var(--foco-cor);outline-offset:var(--foco-recuo)}
/* desligada: o mesmo par de tokens do botão desligado, também na borda */
.cl-pilula:disabled,.cl-pilula[aria-disabled="true"]{background:var(--botao-fundo-desativado);border-color:var(--botao-fundo-desativado);color:var(--botao-texto-desativado);cursor:not-allowed}
.cl-pilula:disabled:hover,.cl-pilula[aria-disabled="true"]:hover{background:var(--botao-fundo-desativado);border-color:var(--botao-fundo-desativado);color:var(--botao-texto-desativado)}
@media (min-width:1000px){
  .cl-pilula,:is(.cl-grade-permissoes, .cl-grade-escopos) .cl-marcar{min-height:var(--prop-alvo-menor)}
}

.cl-escolha{display:flex;flex-wrap:wrap;gap:var(--esp-2);min-width:0;margin:0;padding:0;border:0}
.cl-escolha legend{float:none;width:100%;margin:0 0 var(--esp-1);padding:0;color:var(--oliva);font-size:var(--prop-fonte-rotulo);font-weight:var(--peso-forte);line-height:var(--prop-entrelinha-bloco)}
.cl-escolha > .cl-campo-ajuda,.cl-escolha > .cl-campo-erro{flex:1 0 100%;margin:0}

/* ==========================================================================================================
 * Foto, cartão do achado, galeria, miniatura, linha, indisponível  (Vitrine 1c v3.dc.html:285-325)
 * O cartão declara a PRÓPRIA tipografia: dentro do admin ele não herda os 14 px do body.cl-admin (prévia = /N).
 * ========================================================================================================== */
.cl-cartao{display:flex;flex-wrap:wrap;overflow:hidden;background:var(--fundo-cartao);border-radius:var(--raio-cartao);
  color:var(--texto-corpo);font-family:var(--fonte);font-size:var(--tam-corpo);font-weight:var(--peso-medio);line-height:var(--entrelinha-corpo)}
.cl-cartao--previa{border:var(--fio) solid var(--pedra)}
.cl-cartao-lado{flex:7 1 var(--prop-cartao-lado);min-width:0}
.cl-cartao-foto{position:relative}
.cl-cartao-foto > a{display:block;color:inherit;line-height:0}
.cl-cartao-foto > img,.cl-cartao-foto > a > img{display:block;width:100%;height:auto;aspect-ratio:4/5;max-height:var(--prop-foto-max);object-fit:cover;background:var(--pedra)}
.cl-cartao-compartilhar{position:absolute;top:var(--esp-3);right:var(--esp-3);z-index:1;padding:var(--fio);background:var(--fundo-selo);border-radius:var(--raio-pilula)}
.cl-cartao-ia{padding:var(--esp-2) var(--margem-cartao) 0}
.cl-cartao-corpo{flex:5 1 var(--prop-cartao-corpo);min-width:0;display:grid;align-content:center;gap:var(--esp-2);padding:var(--esp-2) var(--margem-cartao) var(--esp-4)}
.cl-cartao-topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--esp-3)}
.cl-cartao-categoria{display:inline-flex;align-items:center;gap:var(--esp-2);width:fit-content;min-height:var(--alvo-icone);padding:0;border:0;background:none;
  color:var(--oliva);font-family:var(--fonte);font-size:var(--tam-apoio);font-weight:var(--peso-forte);text-align:left;text-decoration:none;cursor:pointer}
.cl-cartao-abrir{display:inline-flex;align-items:center;min-height:var(--alvo-icone);font-size:var(--tam-apoio);font-weight:var(--peso-forte);white-space:nowrap}
.cl-cartao .cl-nome{text-wrap:balance;overflow-wrap:anywhere}
.cl-cartao .cl-nome a{color:var(--oliva);text-decoration:none}
.cl-cartao .cl-apoio{margin:0}
.cl-cartao-lembrete{font-weight:var(--peso-forte);color:var(--oliva)}
.cl-cartao-nota{display:grid;gap:var(--esp-1);margin-top:var(--esp-1);padding:var(--esp-2) 0 var(--esp-3);border-block:var(--fio) solid var(--fio-cor)}
.cl-cartao-nota p{margin:0;text-wrap:pretty}
.cl-cartao-preco{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--esp-1) var(--esp-4);padding-top:var(--esp-1)}
.cl-cartao-preco-valor{display:grid;gap:var(--esp-1)}
.cl-cartao-preco-valor .cl-apoio{margin:0}
.cl-preco-lido{display:block}
.cl-preco-frete{display:block}
.cl-vendidos{margin:0}
.cl-preco-variacao{font-size:var(--tam-miuda);font-weight:var(--peso-medio);line-height:var(--entrelinha-miuda)}
.cl-chip-icone{width:var(--prop-icone);height:var(--prop-icone);flex:none}
.cl-cartao-acoes{display:grid;gap:var(--esp-2);padding-top:var(--esp-2)}
.cl-cartao-acoes .cl-botao--texto{justify-self:start}
@media (min-width:760px){.cl-cartao-corpo{padding-inline:var(--margem-cartao-desktop)}.cl-cartao-ia{padding-inline:var(--margem-cartao)}}

.cl-galeria{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2);padding:var(--esp-2) var(--margem-cartao) 0}
.cl-galeria-mini{box-sizing:content-box;display:block;flex:none;width:var(--prop-galeria-mini);margin:0;overflow:hidden;border:var(--fio) solid var(--pedra);border-radius:var(--raio-pequeno)}
.cl-galeria-mini[aria-current="true"],.cl-galeria-mini[aria-pressed="true"]{border-color:var(--oliva)}
.cl-galeria-mini img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--pedra)}
.cl-galeria-minis{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2)}
.cl-galeria-contador{margin:0 0 0 var(--esp-2)}

.cl-mini{display:grid;gap:var(--esp-2);align-content:start;min-width:0;color:var(--carvao);text-decoration:none}
.cl-mini:hover{color:var(--carvao);text-decoration:none}
.cl-mini-foto{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--raio-pequeno);background:var(--pedra)}
.cl-mini-ia{display:block;min-height:calc(2 * var(--tam-miuda) * var(--entrelinha-miuda));margin-top:calc(var(--esp-1) - var(--esp-2))}
/* v3: Nº em pílula sálvia (.cl-pilula-numero do base.css) dentro de grade: tamanho do texto, não esticada */
.cl-mini .cl-pilula-numero,.cl-linha-achado-texto .cl-pilula-numero{justify-self:start}
.cl-mini-nome{font-size:var(--tam-apoio);font-weight:var(--peso-forte);line-height:var(--entrelinha-apoio);color:var(--oliva)}
.cl-grade-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-5) var(--esp-4)}
@media (min-width:760px){.cl-grade-mini{grid-template-columns:repeat(4,minmax(0,1fr))}}

.cl-linha-achado{display:grid;grid-template-columns:var(--esp-8) minmax(0,1fr);gap:var(--esp-4);align-items:start;padding:var(--esp-3) 0;
  border-top:var(--fio) solid var(--fio-cor);color:var(--carvao);text-decoration:none}
.cl-linha-achado:hover{color:var(--carvao);text-decoration:none}
.cl-linha-achado-foto{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--raio-pequeno);background:var(--pedra)}
.cl-linha-achado-texto{display:grid;gap:var(--esp-1);min-width:0}
.cl-linha-achado-texto .cl-nome{font-size:var(--tam-apoio);line-height:var(--entrelinha-apoio)}
.cl-linha-achado-texto .cl-apoio{margin:0}
.cl-linha-achado--busca{align-items:center;padding:var(--esp-2) 0}
.cl-linha-achado--anterior .cl-linha-achado-foto{opacity:var(--prop-opacidade-apagada)}

.cl-indisponivel{display:grid;gap:var(--esp-3);padding:var(--esp-4) var(--margem-cartao);background:var(--fundo-cartao);border-radius:var(--raio-cartao)}
.cl-indisponivel-foto{position:relative}
.cl-indisponivel-foto > img{display:block;width:100%;height:auto;aspect-ratio:4/5;max-height:var(--prop-foto-max);object-fit:cover;border-radius:var(--raio-pequeno);background:var(--pedra);opacity:var(--prop-opacidade-apagada)}
.cl-indisponivel-corpo{display:grid;gap:var(--esp-2)}
.cl-indisponivel-corpo .cl-apoio{margin:0}
.cl-indisponivel-alternativa{max-width:var(--prop-cartao-corpo)}

/* Foto que falhou. VEM DEPOIS de todas as regras de foto acima de propósito (D-10 da s7): a regra de ESTADO tem a mesma especificidade da
 * regra do componente (`.cl-cartao-foto > a > img`, `.cl-galeria-mini img`, `.cl-indisponivel-foto > img`) e só vence se vier por último;
 * antes ela vinha na frente e a imagem quebrada do navegador aparecia junto do texto "A foto não carregou.".
 * O site.js liga cl-foto--falhou na moldura (cartão, miniatura, linha, galeria) e mostra o texto que o PHP já pôs. */
.cl-foto-falhou-texto{display:none;place-items:center;aspect-ratio:4/5;padding:var(--esp-3);background:var(--areia);color:var(--oliva);
  font-size:var(--tam-miuda);font-weight:var(--peso-forte);line-height:var(--entrelinha-miuda);text-align:center}
.cl-foto--falhou > img,.cl-foto--falhou > a > img{display:none}
.cl-foto--falhou .cl-foto-falhou-texto{display:grid}
.cl-foto--falhou.cl-linha-achado-foto,.cl-foto--falhou.cl-mini-foto{display:block;aspect-ratio:4/5;border-radius:var(--raio-pequeno);background:var(--areia)}

/* ==========================================================================================================
 * Cabeçalho e rodapé públicos  (DS Cabecalho.jsx, Rodape.jsx)
 * ========================================================================================================== */
.cl-cab{position:sticky;top:0;z-index:20;background:var(--papel);border-bottom:var(--fio) solid transparent;transition:border-color var(--transicao)}
.cl-pular{position:absolute;top:var(--esp-2);left:var(--esp-4);z-index:80;padding:var(--esp-2) var(--esp-4);border-radius:var(--raio-pequeno);background:var(--papel);color:var(--oliva);transform:translateY(-300%)}
.cl-pular:focus{transform:none}
.cl-cab-inicio{display:block;line-height:0}
.cl-cab-in{box-sizing:content-box;display:flex;align-items:center;justify-content:space-between;gap:var(--esp-4);max-width:var(--largura-pagina);height:var(--cab-alto);margin:0 auto;padding:0 var(--margem-cartao);transition:height var(--transicao)}
.cl-cab-logo{display:block;height:var(--prop-logo-cab);width:auto}
.cl-cab-sim{display:none;height:var(--prop-simbolo-cab);width:var(--prop-simbolo-cab)}
.cl-cab--fino{border-bottom-color:var(--fio-cor)}
.cl-cab--fino .cl-cab-in{height:var(--cab-compacto)}
.cl-cab--fino .cl-cab-logo{display:none}
.cl-cab--fino .cl-cab-sim{display:block}
@media (min-width:760px){.cl-cab-in{padding:0 var(--margem-pagina)}.cl-cab-logo{height:var(--prop-logo-cab-desktop)}}

.cl-rod{background:var(--fundo-rodape);border-radius:var(--raio-cartao) var(--raio-cartao) 0 0;color:var(--texto-sobre-oliva)}
.cl-rod-in{box-sizing:content-box;display:grid;gap:var(--esp-6);justify-items:start;max-width:var(--largura-pagina);margin:0 auto;padding:var(--esp-7) var(--margem-cartao-desktop);text-align:left}
.cl-rod-logo{display:block;width:min(62vw,var(--prop-logo-rodape));height:auto}
.cl-rod-corpo{display:grid;gap:var(--esp-5);min-width:0}
.cl-rod-avisos{display:grid;gap:var(--esp-3);max-width:var(--largura-texto);margin:0;padding:0;list-style:none}
.cl-rod .cl-miuda{color:var(--texto-sobre-oliva)}
.cl-rod a{color:var(--texto-sobre-oliva)}
.cl-rod a:hover{color:var(--texto-sobre-oliva);text-decoration-color:var(--areia)}
.cl-rod-links{display:flex;flex-wrap:wrap;gap:0 var(--esp-6);font-size:var(--tam-apoio)}
.cl-rod-links a,.cl-rod-links button{display:inline-flex;align-items:center;min-height:var(--alvo-icone)}
.cl-rod-links button{padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:var(--peso-forte);text-decoration:underline;text-decoration-thickness:var(--fio);text-underline-offset:.18em;cursor:pointer}
.cl-rod-email{overflow-wrap:anywhere}
.cl-rod-fim{display:flex;flex-wrap:wrap;gap:var(--esp-1) var(--esp-4)}
@media (min-width:760px){.cl-rod-in{grid-template-columns:auto minmax(0,1fr);gap:var(--esp-8);padding:var(--esp-8) var(--margem-pagina)}}

/* ==========================================================================================================
 * Título de tela, página de erro, moldura das telas de entrada
 * ========================================================================================================== */
.cl-titulo-tela,.cl-entrada-titulo{margin:0;color:var(--oliva);font-size:var(--prop-fonte-titulo-tela);font-weight:var(--peso-forte);line-height:var(--prop-entrelinha-titulo-tela);letter-spacing:var(--espaco-titulo);text-wrap:balance}

/* cabeçalho de tela do admin: título, apoio e a ação à direita (a partir de 600 px). Subido do gestao.css (s11) e do achados.css (.cl-achados-cab, s10) pela s12. */
.cl-tela-cab{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-1) var(--esp-3);align-items:end}
.cl-tela-cab > p{margin:0;max-width:var(--prop-texto-topo);text-wrap:pretty}
.cl-tela-cab > :is(div, form, a, button):not(:first-child){justify-self:start;margin-top:var(--esp-2)}
.cl-tela-cab-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2)}
@media (min-width:600px){
  .cl-tela-cab{grid-template-columns:minmax(0,1fr) auto}
  .cl-tela-cab > h1,.cl-tela-cab > p,.cl-tela-cab > :first-child{grid-column:1}
  .cl-tela-cab > :is(div, form, a, button):not(:first-child){grid-column:2;grid-row:1 / span 2;align-self:end;justify-self:end;margin-top:0}
}

/* o traço da Lana (DS Sublinhado.jsx): SVG inline (ComponentesPublicos::sublinhado), 3 px constantes, sob UMA palavra do título, um por página */
.cl-sublinhado{position:relative;display:inline-block;white-space:nowrap}
.cl-sublinhado svg{position:absolute;left:var(--prop-traco-esquerda);bottom:var(--prop-traco-abaixo);width:var(--prop-traco-largura);height:var(--prop-traco-altura);overflow:visible;color:var(--traco-cor);pointer-events:none}
.cl-sublinhado path{fill:none;stroke:currentColor;stroke-width:var(--traco);stroke-linecap:round;vector-effect:non-scaling-stroke}

.cl-erro-pagina{display:grid;gap:var(--esp-3);justify-items:start;max-width:var(--prop-coluna-erro);margin:var(--esp-7) auto;padding-inline:var(--margem-cartao)}
.cl-erro-pagina .cl-apoio{margin:0;font-size:var(--prop-fonte-media)}
.cl-erro-pagina--site{gap:var(--esp-5);max-width:none;margin:0 0 var(--esp-6);padding:var(--esp-6) var(--margem-cartao);background:var(--fundo-cartao);border-radius:0 0 var(--raio-cartao) var(--raio-cartao)}
.cl-link{display:inline-flex;align-items:center;min-height:var(--alvo-icone);font-size:var(--tam-apoio);font-weight:var(--peso-forte)}
.cl-erro-pagina--site .cl-nome{max-width:var(--prop-coluna-titulo-erro)}
@media (min-width:760px){.cl-erro-pagina--site{margin:var(--esp-5) max(var(--margem-pagina), calc((100% - var(--largura-pagina)) / 2)) var(--esp-6);padding:var(--esp-6) var(--margem-cartao-desktop);border-radius:var(--raio-cartao)}}
/* o rodapé fica no pé mesmo com a página curta (erro, vitrine vazia) */
body.cl-vitrine{display:flex;flex-direction:column;min-height:100vh}
.cl-vitrine .cl-rod{margin-top:auto}

.cl-entrada{display:grid;place-items:center;min-height:100vh;padding:var(--esp-6) var(--esp-4);box-sizing:border-box}
.cl-entrada-form{display:grid;gap:calc(var(--esp-3) + var(--fio));width:100%;max-width:var(--prop-entrada-coluna)}
.cl-entrada-logo{display:block;width:var(--prop-entrada-logo);height:auto}
.cl-entrada-cab{display:grid;gap:var(--esp-2)}
.cl-entrada-cab .cl-apoio,.cl-entrada-origem,.cl-entrada-ajuda{margin:0;font-size:var(--prop-fonte-botao)}
.cl-entrada .cl-erro-pagina{padding-inline:0}

/* ==========================================================================================================
 * Campo de formulário  (V1, V4, U5) — um campo, uma altura (36 no desktop, 44 no celular)
 * ========================================================================================================== */
.cl-campo{display:block;min-width:0}
.cl-campo-rotulo{display:block;margin-bottom:var(--esp-2);color:var(--oliva);font-size:var(--prop-fonte-rotulo);font-weight:var(--peso-forte)}
.cl-campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),.cl-campo textarea,.cl-campo select{
  display:block;box-sizing:border-box;width:100%;min-height:var(--prop-alto-compacto-celular);padding:0 var(--prop-recuo-campo);
  border:var(--fio) solid var(--campo-borda);border-radius:var(--raio-pequeno);background:var(--campo-fundo);color:var(--carvao);
  font-family:var(--fonte);font-size:var(--prop-fonte-campo-celular);font-weight:var(--peso-medio);line-height:var(--entrelinha-corpo);box-shadow:none}
.cl-campo textarea{padding-block:var(--esp-2);resize:vertical}
.cl-campo input:disabled,.cl-campo textarea:disabled,.cl-campo select:disabled{background:var(--botao-fundo-desativado);cursor:not-allowed}
.cl-campo-ajuda{margin:var(--esp-2) 0 0;font-size:var(--tam-miuda);font-weight:var(--peso-medio);line-height:var(--entrelinha-miuda)}
.cl-campo-erro{margin:var(--esp-2) 0 0;color:var(--oliva);font-size:var(--prop-fonte-rotulo);font-weight:var(--peso-forte)}
/* contador "n/limite" do campo: `<span class="cl-contador" data-cl-contador="#id-do-campo" data-cl-max="N">` (ComponentesPublicos::campo, opção `contador`);
 * o site.js (siteContar) escreve nele a cada digitação. Subido das quatro cópias (s8, s10, s11) pela s12. */
.cl-contador{display:block;margin-top:var(--esp-1);font-size:var(--tam-miuda);font-weight:var(--peso-forte);line-height:var(--entrelinha-miuda);text-align:right}
/* erro sem cor nova: a borda engrossa (--regua) e a frase vem embaixo */
.cl-campo.cl-campo--erro input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),.cl-campo.cl-campo--erro textarea,.cl-campo.cl-campo--erro select{border-width:var(--regua)}
.cl-campo-senha{position:relative}
.cl-campo .cl-campo-senha input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]){padding-right:var(--prop-mostrar-reserva)}
.cl-campo-mostrar{position:absolute;top:0;right:var(--esp-1);bottom:0;display:inline-flex;align-items:center;padding:0 var(--esp-3);border:0;background:none;
  color:var(--oliva);font-family:var(--fonte);font-size:var(--prop-fonte-botao);font-weight:var(--peso-forte);cursor:pointer}
.cl-campo-mostrar:hover{color:var(--carvao);text-decoration:underline;text-decoration-thickness:var(--fio)}
.cl-marcar{display:flex;align-items:center;gap:var(--esp-3);min-height:var(--prop-alvo-menor-celular);color:var(--oliva);font-size:var(--prop-fonte-botao);font-weight:var(--peso-forte);cursor:pointer}
.cl-marcar input{flex:none;width:var(--prop-caixa-marcar);height:var(--prop-caixa-marcar);margin:0;accent-color:var(--oliva)}
.cl-campo-ajuda--recuada{padding-left:calc(var(--prop-caixa-marcar) + var(--esp-3))}
.cl-mensagem-ir{display:inline-flex;align-items:center;min-height:var(--prop-alvo-menor-celular);margin-left:var(--esp-2)}
@media (min-width:1000px){.cl-mensagem-ir{min-height:var(--prop-alvo-menor)}}

/* campo de arquivo (V1): a área inteira é o <label for>; o <input type=file> fica só para leitor de tela */
.cl-arquivo{display:grid;gap:var(--esp-2);min-width:0}
.cl-arquivo-alvo{display:grid;justify-items:center;gap:var(--esp-3);padding:var(--esp-4);border:var(--fio) dashed var(--oliva);border-radius:var(--raio-pequeno);background:var(--papel);color:var(--oliva);text-align:center;cursor:pointer}
.cl-arquivo-alvo:hover{background:var(--areia)}
.cl-arquivo:has(input:focus-visible) .cl-arquivo-alvo{outline:var(--foco-largura) solid var(--foco-cor);outline-offset:var(--foco-recuo)}
.cl-arquivo-previa{display:block;max-width:100%;max-height:var(--prop-cartao-corpo);border-radius:var(--raio-pequeno);object-fit:contain}
.cl-arquivo-previa[hidden]{display:none}
.cl-arquivo.cl-campo--erro .cl-arquivo-alvo{border-width:var(--regua)}

/* ==========================================================================================================
 * Mensagem (V6), selo de situação (V7), alerta, bloco, tabela — as três famílias têm caras diferentes
 * ========================================================================================================== */
.cl-mensagem{display:block;margin:0;padding:var(--esp-3) var(--esp-4);border-radius:var(--raio-pequeno);font-size:var(--prop-fonte-botao);font-weight:var(--peso-forte);line-height:var(--entrelinha-apoio)}
.cl-mensagem a{color:inherit}
.cl-mensagem p,.cl-alerta p{margin:0}
.cl-mensagem--sucesso{background:var(--papel);border:var(--fio) solid var(--oliva);color:var(--oliva)}
.cl-mensagem--erro{background:var(--oliva);color:var(--texto-sobre-oliva)}
.cl-mensagem--alerta{background:var(--areia);border-left:var(--regua) solid var(--oliva);color:var(--carvao)}

.cl-situacao{display:inline-flex;align-items:center;min-height:calc(var(--esp-5) + var(--esp-1));padding:0 var(--esp-3);border-radius:var(--raio-pilula);
  font-size:var(--tam-miuda);font-weight:var(--peso-forte);line-height:1;white-space:nowrap}
.cl-situacao--ok{background:var(--oliva);color:var(--texto-sobre-oliva)}
.cl-situacao--espera{background:var(--areia);color:var(--carvao)}
.cl-situacao--alerta{background:var(--carvao);color:var(--texto-sobre-oliva)}
.cl-situacao--neutro{background:var(--pedra);color:var(--oliva)}

.cl-alerta{display:grid;gap:var(--esp-2);padding:var(--esp-3) var(--esp-4);border-radius:var(--raio-pequeno);border:var(--fio) solid var(--pedra);background:var(--papel);color:var(--carvao);font-size:var(--prop-fonte-botao);line-height:var(--entrelinha-apoio)}
.cl-alerta--critico{background:var(--carvao);border-color:var(--carvao);color:var(--texto-sobre-oliva)}
.cl-alerta--critico .cl-numero{color:var(--texto-sobre-oliva)}
.cl-alerta--critico .cl-botao:not(.cl-botao--secundario),.cl-alerta--critico .cl-botao:not(.cl-botao--secundario):hover{background:var(--carvao);border-color:var(--papel)}
.cl-alerta--atencao{background:var(--areia);border-color:var(--carvao)}
.cl-alerta--informativo{background:var(--papel);border-color:var(--pedra)}
.cl-alerta-texto{margin:0}
.cl-alerta-acoes{display:flex;flex-wrap:wrap;gap:var(--esp-2)}

.cl-conta{display:grid;gap:var(--esp-4);min-width:0;align-items:start}
@media (min-width:1000px){.cl-conta{grid-template-columns:repeat(2,minmax(0,1fr))}.cl-conta > .cl-bloco--largo,.cl-conta > .cl-mensagem{grid-column:1 / -1}}
.cl-bloco{min-width:0;padding:0 var(--esp-3);border:var(--fio) solid var(--pedra);border-radius:var(--raio-cartao);background:var(--papel);color:var(--carvao)}
.cl-bloco-titulo{display:flex;justify-content:space-between;gap:var(--esp-2);margin:0;padding:var(--esp-4) 0 var(--esp-3);color:var(--oliva);
  font-size:var(--prop-fonte-media);font-weight:var(--peso-forte);line-height:var(--prop-entrelinha-bloco);list-style:none}
.cl-bloco-titulo::-webkit-details-marker{display:none}
summary.cl-bloco-titulo{cursor:pointer}
.cl-bloco-form{display:grid;justify-items:start;gap:var(--esp-4);padding-bottom:var(--esp-4)}
.cl-bloco-form > .cl-campo{justify-self:stretch}
.cl-bloco > .cl-apoio,.cl-bloco-form > .cl-apoio{margin:0 0 var(--esp-4);font-size:var(--prop-fonte-botao);font-weight:var(--peso-medio)}
.cl-bloco-acoes{display:flex;flex-wrap:wrap;gap:var(--esp-2);padding-bottom:var(--esp-4)}
.cl-bloco-acao{margin:0}
.cl-bloco > .cl-campo,.cl-bloco > .cl-arquivo{margin-bottom:var(--esp-4)}
.cl-bloco > .cl-miuda{margin-top:var(--esp-2);padding:var(--esp-3) 0 var(--esp-4);border-top:var(--fio) solid var(--pedra)}
/* bloco forte: a borda em oliva (o que pede a decisão da pessoa: item para aprovar, texto editável, avisos de gestão) */
.cl-bloco--forte{border-color:var(--oliva)}
/* ritmo interno do bloco do admin (mockup Admin Gestao.dc.html:143: conteúdo com vão de 12 e respiro de 16 embaixo). Vale em toda tela dentro do
 * .cl-admin-conteudo, menos na Minha conta (.cl-conta), que tem as próprias margens nos filhos do bloco (medido: ela mudaria). Subido das cópias da
 * s8 e da s11 pela s12; `:where` mantém a especificidade que as cópias tinham, para as regras de cada área seguirem ganhando como antes. */
.cl-admin-conteudo .cl-bloco:where(:not(.cl-conta > .cl-bloco)) > * + *{margin-top:var(--esp-3)}
.cl-admin-conteudo .cl-bloco:where(:not(.cl-conta > .cl-bloco)) > :is(.cl-bloco-resumo, .cl-bloco-cab) + *{margin-top:0}
.cl-admin-conteudo .cl-bloco:where(:not(.cl-conta > .cl-bloco)) > :last-child{margin-bottom:var(--esp-4)}
.cl-admin-conteudo .cl-bloco:where(:not(.cl-conta > .cl-bloco)) > :is(.cl-bloco-form, .cl-bloco-acoes):last-child{margin-bottom:0}
.cl-dados{display:grid;margin:0;padding-bottom:var(--esp-2)}
.cl-dados-linha{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--fio) var(--esp-3);padding:var(--esp-2) 0;border-top:var(--fio) solid var(--pedra)}
.cl-dados-linha dt{font-size:var(--tam-miuda);font-weight:var(--peso-forte)}
.cl-dados-linha dd{margin:0;overflow-wrap:anywhere}
@media (min-width:1000px){.cl-dados-linha{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}

/* tabela do admin: <table> real; vira pilha rotulada (data-rotulo em cada célula) abaixo de 1000 px */
.cl-tabela{display:block;width:100%;border-collapse:collapse}
.cl-tabela tbody,.cl-tabela td{display:block}
.cl-tabela thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cl-tabela-linha{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-2) var(--esp-4);padding:var(--esp-3) 0;border-top:var(--fio) solid var(--pedra)}
.cl-tabela-linha > :first-child,.cl-tabela-linha > .cl-tabela-acao{grid-column:1 / -1}
.cl-tabela td{min-width:0;overflow-wrap:anywhere;line-height:var(--entrelinha-apoio)}
/* 1ª célula (o nome do aparelho): apoio/800 oliva, como no mockup (Admin Gestao.dc.html:353, cels[0]) */
.cl-tabela td:first-child{color:var(--oliva);font-size:var(--tam-apoio);font-weight:var(--peso-forte)}
.cl-tabela td[data-rotulo]::before{content:attr(data-rotulo);display:block;color:var(--carvao);font-size:var(--tam-miuda);font-weight:var(--peso-forte)}
.cl-tabela-acao:empty{display:none}
/* ≥ 1000 px: colunas EXPLÍCITAS. O PHP emite cl-tabela--colunas-N (N = colunas de DADOS, 2 a 8) e o cabeçalho tem N th;
 * a linha tem N células + a ação (.cl-tabela-acao), que cai numa linha própria SOB as células, encostada à esquerda.
 * Uma variante (ex.: --aparelhos) redefine só o --tabela-colunas. Fluxo sempre por linha (nunca column). */
.cl-tabela--colunas-2{--tabela-colunas:repeat(2,minmax(0,1fr))}
.cl-tabela--colunas-3{--tabela-colunas:repeat(3,minmax(0,1fr))}
.cl-tabela--colunas-4{--tabela-colunas:repeat(4,minmax(0,1fr))}
.cl-tabela--colunas-5{--tabela-colunas:repeat(5,minmax(0,1fr))}
.cl-tabela--colunas-6{--tabela-colunas:repeat(6,minmax(0,1fr))}
.cl-tabela--colunas-7{--tabela-colunas:repeat(7,minmax(0,1fr))}
.cl-tabela--colunas-8{--tabela-colunas:repeat(8,minmax(0,1fr))}
/* Variante da tabela de aparelhos (Minha conta): as 4 colunas medidas no mockup (36:21) */
.cl-tabela--colunas-4.cl-tabela--aparelhos{--tabela-colunas:minmax(0,36fr) repeat(3,minmax(0,21fr))}
@media (min-width:1000px){
  .cl-tabela thead{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;display:block}
  .cl-tabela thead tr,.cl-tabela-linha{display:grid;grid-template-columns:var(--tabela-colunas,repeat(2,minmax(0,1fr)));grid-auto-flow:row;gap:var(--esp-2) var(--esp-3);align-items:start}
  .cl-tabela thead tr{padding:var(--esp-1) 0 var(--esp-2)}
  .cl-tabela-linha{padding:var(--esp-3) 0}
  .cl-tabela th{padding:0;font-size:var(--tam-miuda);font-weight:var(--peso-forte);text-align:left}
  .cl-tabela th.cl-tabela-th--oculto{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cl-tabela-linha > :first-child{grid-column:auto}
  .cl-tabela-linha > .cl-tabela-acao{grid-column:1 / -1;justify-self:start}
  .cl-tabela td[data-rotulo]::before{display:none}
}

/* ==========================================================================================================
 * Simulação "como fica no site": faixa, achado e mesa areia (a prévia do item para aprovar e a prévia do formulário de achado).
 * Subido das cópias da s8 e da s10 pela s12. A moldura é desenhada pela faixa (em cima) e pela mesa (embaixo): os dois são filhos de .cl-modelo-achado.
 * Variantes que ficam na área: .cl-modelo-mesa--computador (aprovacao.css). Respiro lateral da mesa: .cl-modelo-mesa--respiro (o formulário de achado).
 * ========================================================================================================== */
.cl-modelo-faixa{padding:var(--esp-2) var(--esp-3);background:var(--carvao);color:var(--papel);font-size:var(--tam-miuda);font-weight:var(--peso-forte);line-height:var(--entrelinha-apoio)}
.cl-modelo-achado{display:grid;min-width:0}
.cl-modelo-achado > .cl-modelo-faixa{border:var(--fio) solid var(--carvao);border-radius:var(--raio-cartao) var(--raio-cartao) 0 0}
.cl-modelo-mesa{display:grid;overflow:hidden;padding:var(--esp-4) 0;border:var(--fio) solid var(--pedra);border-top:0;border-radius:0 0 var(--raio-cartao) var(--raio-cartao);background:var(--areia)}
.cl-modelo-mesa--respiro{padding-inline:var(--esp-3)}
.cl-modelo-mesa-escala{justify-self:center;width:100%;max-width:var(--prop-modelo-quadro)}

/* ==========================================================================================================
 * Diálogo único, folha, indicador de carregamento, toast  (site.js: appAlert/appConfirm, siteFolha, appCarregando, siteToast)
 * ========================================================================================================== */
.cl-dialogo{box-sizing:border-box;width:calc(100% - 2 * var(--margem-cartao));max-width:var(--largura-texto);padding:var(--esp-5);border:0;border-radius:var(--raio-cartao);background:var(--fundo-folha);color:var(--carvao)}
.cl-dialogo::backdrop{background:var(--veu)}
.cl-dialogo-form{display:grid;gap:var(--esp-4)}
.cl-dialogo-titulo{margin:0;color:var(--oliva);font-size:var(--prop-fonte-media);font-weight:var(--peso-forte);line-height:var(--prop-entrelinha-bloco);text-wrap:balance}
.cl-dialogo-texto{margin:0;font-size:var(--prop-fonte-media);line-height:var(--entrelinha-corpo);white-space:pre-line}
/* confirmar primeiro, "Cancelar" em texto logo depois, à esquerda (mockup: a22-reprovar-sem-motivo, dialogo-*) */
.cl-dialogo-acoes{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--esp-2) var(--esp-4)}
/* abaixo de 1000 px o diálogo é a FOLHA presa ao pé (mesma forma da .cl-folha) */
@media (max-width:999.98px){
  .cl-dialogo{position:fixed;inset:auto 0 0 0;width:100%;max-width:none;max-height:var(--prop-folha-alto-max);margin:0;overflow:auto;
    padding:var(--esp-5) var(--margem-cartao);border-radius:var(--raio-cartao) var(--raio-cartao) 0 0}
}
@media (max-width:999.98px) and (prefers-reduced-motion:no-preference){.cl-dialogo[open]{animation:cl-sobe var(--transicao-folha)}}

.cl-folha{position:fixed;inset:auto 0 0 0;box-sizing:border-box;width:100%;max-width:none;max-height:var(--prop-folha-alto-max);margin:0;padding:var(--esp-3) var(--margem-cartao) var(--esp-5);
  overflow:auto;border:0;border-radius:var(--raio-cartao) var(--raio-cartao) 0 0;background:var(--fundo-folha);color:var(--carvao)}
.cl-folha:not([open]){display:none}
.cl-folha[open]{display:block}
.cl-folha-painel{display:grid;gap:var(--esp-1)}
/* o véu é o ELEMENTO irmão .cl-folha-veu (o ::backdrop não herda variáveis no Safari até 17.3); o ::backdrop fica transparente */
.cl-folha::backdrop{background:transparent}
.cl-folha-veu{position:fixed;inset:0;z-index:35;background:var(--veu)}
.cl-folha-veu[hidden]{display:none}
.cl-folha-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2);color:var(--oliva);font-size:var(--prop-fonte-media);font-weight:var(--peso-forte)}
.cl-folha-linha{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2);min-height:var(--prop-alto-compacto-celular);border-top:var(--fio) solid var(--pedra);
  color:var(--carvao);font-size:var(--prop-fonte-media);font-weight:var(--peso-medio);text-decoration:none}
a.cl-folha-linha:hover{color:var(--oliva);text-decoration:none}
.cl-folha-quem{min-height:var(--prop-alvo-menor-celular)}
.cl-folha-conta{display:grid;color:var(--carvao);text-decoration:none;overflow-wrap:anywhere}
.cl-folha-conta:hover{color:var(--carvao);text-decoration:none}
.cl-folha-conta b{color:var(--oliva);font-weight:var(--peso-forte)}
@media (prefers-reduced-motion:no-preference){.cl-folha[open]{animation:cl-sobe var(--transicao-folha)}}
@keyframes cl-sobe{from{transform:translateY(var(--esp-5));opacity:0}to{transform:none;opacity:1}}
/* painel no canto só nas páginas públicas (DS FolhaCompartilhar); a "Mais" do admin é folha de baixo até 1000 px */
@media (min-width:760px){.cl-vitrine .cl-folha{inset:auto var(--margem-pagina) var(--margem-pagina) auto;width:var(--prop-folha-largura);border-radius:var(--raio-cartao)}}

.cl-carregando{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:var(--veu)}
.cl-carregando[hidden]{display:none}
.cl-carregando-caixa{display:flex;align-items:center;gap:var(--esp-3);padding:var(--esp-4) var(--esp-5);border-radius:var(--raio-botao);background:var(--papel);color:var(--oliva);font-weight:var(--peso-forte)}
.cl-carregando-giro{width:var(--esp-5);height:var(--esp-5);border:var(--regua) solid var(--pedra);border-top-color:var(--oliva);border-radius:var(--raio-pilula);animation:cl-giro var(--prop-giro) linear infinite}
@keyframes cl-giro{to{transform:rotate(360deg)}}
[aria-busy="true"]{cursor:progress}

.cl-toast{position:fixed;right:var(--esp-4);bottom:var(--esp-4);left:var(--esp-4);z-index:65;display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);
  max-width:var(--largura-texto);margin-inline:auto;padding:var(--esp-3) var(--esp-4);border-radius:var(--raio-botao);background:var(--oliva);color:var(--texto-sobre-oliva);
  font-size:var(--prop-fonte-botao);font-weight:var(--peso-forte);line-height:var(--entrelinha-apoio)}
.cl-toast[hidden]{display:none}
.cl-toast-desfazer{flex:none;min-height:var(--prop-alvo-menor-celular);padding:0 var(--esp-2);border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-decoration-thickness:var(--fio);text-underline-offset:.18em;cursor:pointer}
.cl-toast-desfazer:hover{text-decoration-color:var(--areia)}

/* ==========================================================================================================
 * Desktop do admin (≥ 1000 px, o mesmo ponto em que o menu lateral troca a barra inferior): campo e botão compactos de 36 px
 * ========================================================================================================== */
@media (min-width:1000px){
  .cl-botao--compacto{min-height:var(--prop-alto-compacto)}
  .cl-botao--texto{min-height:var(--prop-alvo-menor)}
  .cl-campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),.cl-campo select{min-height:var(--prop-alto-compacto);font-size:var(--prop-fonte-campo)}
  .cl-campo textarea{font-size:var(--prop-fonte-campo)}
  .cl-marcar{min-height:var(--prop-alvo-menor)}
  .cl-toast-desfazer{min-height:var(--prop-alvo-menor)}
}

/* respeita quem pede menos movimento (o base.css já zera animation e transition; aqui o giro vira indicador parado) */
@media (prefers-reduced-motion:reduce){.cl-carregando-giro{border-top-color:var(--pedra);border-right-color:var(--oliva)}}