/*! CannHub · ch-mobile.css
 *  1) Contraste WCAG (todas as larguras)
 *  2) Responsividade mobile (< 900px): sidebar off-canvas, grids 1 coluna,
 *     imagens fluidas, alvos de toque >= 44px, sem overflow horizontal.
 *
 *  Os estilos do site são inline, por isso usamos seletores de atributo
 *  ([style*="..."]) + !important para vencer a especificidade do inline.
 *  Carregue este arquivo no <head> da página:
 *    <link rel="stylesheet" href="assets/ch-mobile.css">      (raiz)
 *    <link rel="stylesheet" href="../assets/ch-mobile.css">   (plataforma/)
 */

/* =========================================================================
   1 · CONTRASTE — WCAG AA  (reescrito: ver bloco D-1 no fim do arquivo)

   Este bloco existia e NÃO FUNCIONAVA. O motivo está explicado em D-1:
   os componentes reserializam o atributo `style`, e o hexadecimal escrito
   no HTML chega ao navegador como `rgb(...)` — nenhum seletor daqui casava.
   As regras que valem agora estão em D-1, com as duas grafias.
   ========================================================================= */

/* =========================================================================
   2 · CONTROLES DO MENU MOBILE (ocultos por padrão / desktop)
   Injetados por assets/ch-mobile.js
   ========================================================================= */
#ch-nav-toggle,
#ch-nav-overlay { display: none; }

/* =========================================================================
   3 · MOBILE — abaixo de 900px (sidebar de 248px não cabe mais)
   ========================================================================= */
@media (max-width: 899.98px) {

  /* --- 3.1 · Sem rolagem horizontal ------------------------------------ */
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden !important; }

  /* --- 3.2 · Sidebar off-canvas ----------------------------------------
     O <aside> de navegação tem width: 248px inline. O <aside> de conteúdo
     (ex.: plataforma/comunidade.html) não tem — por isso o seletor é
     ancorado em "248px" e não em `aside` puro.                            */
  aside[style*="248px"],
  aside.ch-nav-drawer {
    position: fixed !important;
    left: -260px;
    top: 0 !important;
    bottom: auto !important;
    width: 248px !important;
    max-width: 86vw;
    height: 100vh !important;
    min-height: 100vh !important;
    z-index: 1000 !important;
    transition: left .25s ease;
    overflow-y: auto !important;
    box-shadow: 0 0 0 rgba(47, 54, 38, 0);
    box-sizing: border-box !important;
  }

  aside[style*="248px"].ch-nav-open,
  aside.ch-nav-drawer.ch-nav-open {
    left: 0 !important;
    box-shadow: 0 24px 60px -12px rgba(47, 54, 38, .38);
  }

  /* O wrapper de componente (.sc-host do <dc-import>) não pode continuar
     ocupando 248px na linha do flex. A classe é aplicada pelo JS; as duas
     regras abaixo são fallback caso o JS não rode.                        */
  .ch-nav-host,
  .sc-host[data-sc-name="PlataformaNav"] { display: contents !important; }

  /* --- 3.3 · Botão hambúrguer ------------------------------------------ */
  #ch-nav-toggle {
    display: inline-flex !important;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1002;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    background: #FFFFFF;
    border: 1px solid #E8E3D8;
    border-radius: 12px;
    box-shadow: 0 6px 18px -8px rgba(47, 54, 38, .45);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  #ch-nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #2F3626;
    transition: transform .2s ease, opacity .2s ease;
  }
  #ch-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  #ch-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  #ch-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  #ch-nav-toggle:focus-visible { outline: 2px solid #717B61; outline-offset: 2px; }

  /* --- 3.4 · Overlay ---------------------------------------------------- */
  #ch-nav-overlay {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(35, 41, 29, .48);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    -webkit-tap-highlight-color: transparent;
  }
  #ch-nav-overlay.ch-nav-open { opacity: 1; visibility: visible; }

  body.ch-nav-locked { overflow: hidden !important; }

  /* --- 3.5 · <main> sem margem lateral, padding menor ------------------- */
  main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  /* Espaço para o botão hambúrguer apenas onde existe sidebar. */
  body.ch-has-nav main { padding-top: 64px !important; }
  body.ch-has-nav main > *:first-child { margin-top: 0 !important; }

  /* --- 3.6 · Grids viram 1 coluna --------------------------------------- */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-auto-flow: column"],
  [style*="grid-auto-flow:column"] {
    grid-auto-flow: row !important;
  }

  /* --- 3.7 · Flex que estoura vira quebra de linha ----------------------
     Restrito a contêineres (div/section/header/footer) dentro de <main>,
     nunca em <a>/<button>, para não quebrar rótulos de botão.             */
  main div[style*="display: flex"]:not([style*="flex-direction: column"]),
  main section[style*="display: flex"]:not([style*="flex-direction: column"]),
  main header[style*="display: flex"]:not([style*="flex-direction: column"]) {
    flex-wrap: wrap !important;
  }
  main [style*="min-width:"] { min-width: 0 !important; }

  /* --- 3.8 · Mídia fluida ----------------------------------------------- */
  img, video, canvas, svg, iframe, picture {
    max-width: 100% !important;
    height: auto;
  }
  /* Avatares/ícones com altura fixa mantêm a proporção. */
  img[style*="border-radius: 50%"],
  img[width][height] { height: auto; }
  video[style*="object-fit"] { height: 100% !important; }

  /* --- 3.9 · Campos de formulário e tabelas ----------------------------- */
  input, select, textarea, button {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  input, select, textarea { font-size: 16px !important; } /* evita zoom no iOS */
  table {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  pre, code { white-space: pre-wrap !important; word-break: break-word; }

  /* --- 3.10 · Tipografia e alvos de toque ------------------------------- */
  h1 { font-size: clamp(24px, 7vw, 34px) !important; }
  h2 { font-size: clamp(20px, 5.6vw, 28px) !important; }
  a, button, [role="button"] { -webkit-tap-highlight-color: rgba(113, 123, 97, .18); }

  /* Alvos de toque >= 44px (Apple HIG / WCAG 2.5.5).
     Checkbox/radio ficam de fora para não deformar; ranges idem. */
  button,
  [role="button"],
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select {
    min-height: 44px;
  }
  /* Links-pílula (botões do site são <a> com border-radius:999px) */
  main a[style*="border-radius: 999"],
  main a[style*="border-radius:999"] {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  /* Links da sidebar com área confortável */
  aside.ch-nav-drawer nav a { min-height: 44px; box-sizing: border-box; }

  /* --- 3.11 · Chip "Minha Conta" (position:fixed top right) --------------
     Vive dentro do <aside> mas é fixed, então permanece visível com o
     drawer fechado. Limitamos a largura para nunca alcançar o hambúrguer
     (44px + folga) e o dropdown para caber em 360px. */
  aside.ch-nav-drawer button[style*="position: fixed"][style*="right: 18px"],
  button[style*="position: fixed"][style*="top: 14px"][style*="right: 18px"] {
    top: 12px !important;
    right: 12px !important;
    max-width: calc(100vw - 80px);
    min-height: 44px;
    overflow: hidden;
    z-index: 998 !important; /* abaixo do overlay (999): fechado junto com o drawer */
  }
  aside.ch-nav-drawer button[style*="position: fixed"][style*="right: 18px"] > span:last-child,
  button[style*="position: fixed"][style*="top: 14px"][style*="right: 18px"] > span:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  /* Dropdown do "Minha Conta": nunca mais largo que a tela (340px inline) */
  div[style*="position: fixed"][style*="width: 340px"][style*="right: 18px"] {
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: 12px !important;
    top: 64px !important;
  }
}

/* Telas muito estreitas */
@media (max-width: 400px) {
  main { padding-left: 12px !important; padding-right: 12px !important; }
}

/* Respeita "reduzir movimento" */
@media (prefers-reduced-motion: reduce) {
  aside[style*="248px"], #ch-nav-overlay, #ch-nav-toggle span { transition: none !important; }
}

/* =====================================================================
 * B-10 · Correções mobile das páginas PÚBLICAS (auditoria 04/08/2026).
 *
 * Por que este bloco existe: as regras da seção 3.5 acima estão presas a
 * <main>, e as páginas públicas da raiz (index, entrar, criar-conta e as
 * 9 páginas "Para quem") não usam <main> — logo, nunca eram aplicadas.
 * Aqui repetimos só o essencial, ancorado no cabeçalho/rodapé e em
 * contêineres flex de topo, sem depender de <main>.
 * ===================================================================== */
@media (max-width: 899.98px) {

  /* Alvos de toque ≥ 44px (WCAG 2.5.5) nos links do cabeçalho e do rodapé.
     Antes: "Entrar" 35px, "Criar conta" 39px, links do menu 15px. */
  header a,
  header button,
  footer a[style*="font-size"],
  nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Contêineres flex fora de <main> não podem estourar a largura:
     quebram em várias linhas em vez de gerar rolagem horizontal. */
  body > div [style*="display: flex"]:not([style*="flex-direction: column"]):not([style*="position: fixed"]):not([style*="position: absolute"]),
  header [style*="display: flex"]:not([style*="flex-direction: column"]),
  footer [style*="display: flex"]:not([style*="flex-direction: column"]) {
    flex-wrap: wrap;
  }

  /* Nenhum filho de flex/grid pode impor largura mínima maior que a tela. */
  body [style*="min-width:"]:not([style*="position: fixed"]) { min-width: 0 !important; }
}

/* Telas muito estreitas: dá respiro lateral também sem <main>. */
@media (max-width: 400px) {
  body > div > section,
  body > div > div { padding-left: 12px !important; padding-right: 12px !important; }
}

/* =====================================================================
 * C-1 · CELULAR (≤ 640px) — fim das "torres de palavras".
 *
 * O DEFEITO
 * As linhas do app são montadas assim (exemplo real, plataforma/saude.html):
 *
 *   <li style="display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;">
 *     <div style="flex:1;min-width:200px;">…nome e detalhes da consulta…</div>
 *     <span …>Agendada</span>
 *     <button …>Entrar</button>
 *     <button …>Cancelar</button>
 *   </li>
 *
 * O `min-width:200px` é justamente o que obrigava a linha a quebrar no
 * celular. A regra 3.7 acima zera todo `min-width` dentro de <main> (para
 * matar rolagem horizontal) e, com o `flex-basis:0` que vem do `flex:1`
 * inline, o bloco de texto passa a poder encolher até a largura da MAIOR
 * PALAVRA. Resultado: uma coluna de ~60px com uma palavra por linha, com o
 * selo e os botões ocupando o resto da largura.
 *
 * A CORREÇÃO (de classe, não caso a caso)
 * No celular, o bloco de texto de uma linha flex recebe `flex-basis:100%`:
 * ele toma a linha inteira e os selos/botões descem para a linha de baixo.
 * É o mesmo padrão que resolve, de uma vez, a lista de consultas, os
 * títulos de cartão com selo ao lado, os blocos de 3 colunas e o preço da
 * loja — todos são a mesma estrutura.
 *
 * SOBRE OS SELETORES
 * O CSS do projeto é inline nos elementos, então não há classe para mirar:
 * os seletores são estruturais (combinador filho + atributo [style*=…]).
 * O projeto usa as DUAS grafias, "display:flex" e "display: flex" (245 e
 * 191 ocorrências), e os componentes <dc-import> ainda reserializam o
 * atributo como "flex: 1 1 0%" — por isso cada regra aparece em pares.
 *
 * Escopo: tudo abaixo está preso a <main>, que só existe nas páginas de
 * /plataforma. As páginas públicas da raiz não usam <main> e continuam
 * exatamente como estavam.
 * ===================================================================== */
@media (max-width: 640px) {

  /* --- C-1.1 · Toda linha flex pode quebrar ----------------------------
     A regra 3.7 só alcançava div/section/header com a grafia "display: flex"
     (com espaço). Aqui a cobertura vale para qualquer contêiner — inclusive
     <li>, <ul>, <article>, <form>, <label> — nas duas grafias.
     <a> e <button> ficam de fora para não picotar rótulo de botão.
     Sem !important: nenhum elemento do projeto declara flex-wrap:nowrap
     inline (conferido: zero ocorrências), então não há inline a vencer. */
  main [style*="display:flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]):not(a):not(button),
  main [style*="display: flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]):not(a):not(button) {
    flex-wrap: wrap;
  }

  /* --- C-1.2 · O bloco de texto pede uma largura legível ---------------
     Esta é a regra que desfaz a torre de palavras.
     Alvo: filho DIRETO de uma linha flex (nunca de uma coluna) que declare
     `flex:1` / `flex: 1 1 0%`.

     Por que 220px e não 100%: 100% funciona, mas empurra para a linha de
     baixo até um irmão de 32px (o ícone ✦ de plataforma/cultivo.html),
     desperdiçando uma linha. Com `flex-basis:220px` o bloco de texto passa
     a PEDIR 220px — a largura mínima em que um nome próprio longo ainda
     lê bem a 390px. Se os selos e botões ao lado couberem na sobra, a
     linha continua inteira; se não couberem, o flex-wrap os manda para
     baixo e o `flex-grow:1` (que continua valindo) devolve toda a largura
     ao texto. É o mesmo efeito que o `min-width:200px` do HTML pretendia,
     só que sem travar a caixa e sem gerar rolagem horizontal.

     Os três !important abaixo são inevitáveis e cada um tem um motivo:
     · flex-basis — `flex` é atalho, e o `flex:1` inline já fixa
       flex-basis:0. Sem !important o inline vence e a torre volta.
     · min-width  — o inline traz min-width:200px/180px; precisamos poder
       encolher abaixo disso se a tela for ainda menor que a caixa.
     · max-width  — idem, o inline pode trazer largura mínima maior que a
       viewport; sem !important sobra rolagem horizontal.
     box-sizing entra junto para que a base de 220px conte a caixa COM
     padding e borda (os cartões têm padding:14px 16px + borda de 1px). */
  main [style*="display:flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]) > [style*="flex:1"],
  main [style*="display: flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]) > [style*="flex:1"],
  main [style*="display:flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]) > [style*="flex: 1"],
  main [style*="display: flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]) > [style*="flex: 1"] {
    flex-basis: 220px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* --- C-1.3 · Exceção: barra fina não é bloco de texto ----------------
     `flex:1;height:4px` é barra de progresso; `height:1px` é divisor.
     Elas devem continuar dividindo a linha com o rótulo ao lado, e não
     empurrá-lo para baixo.
     !important porque esta regra existe só para desfazer o !important
     de C-1.2 — sem ele, C-1.2 (mesma especificidade, escrita antes)
     não seria superada. */
  main [style*="flex:1"][style*="height:1px"],
  main [style*="flex:1"][style*="height:4px"],
  main [style*="flex:1"][style*="height:6px"],
  main [style*="flex: 1"][style*="height: 1px"],
  main [style*="flex: 1"][style*="height: 4px"],
  main [style*="flex: 1"][style*="height: 6px"] {
    flex-basis: 0% !important;
  }

  /* --- C-1.4 · Preço e data não se partem no meio ----------------------
     "R$ 249,00" virava "R$" / "249,00"; a data virava "20/08" / "2026".
     São os dois filhos flex com min-width pequeno do projeto: 80px (preço,
     plataforma/loja.html) e 104px (data). Os demais min-width pequenos
     (110px, 120px) são descrição e cartão de estatística — texto longo,
     que PRECISA quebrar — e por isso ficam de fora.
     !important em flex-basis/flex-grow para desfazer C-1.2: um rótulo de
     4 palavras não deve consumir uma linha inteira. */
  main [style*="min-width:80px"],  main [style*="min-width: 80px"],
  main [style*="min-width:104px"], main [style*="min-width: 104px"] {
    flex-basis: auto !important;
    flex-grow: 0 !important;
    white-space: nowrap;
  }

  /* --- C-1.5 · Selo de status inteiro ----------------------------------
     Pílulas curtas de estado ("AGENDADA", "cofre privado", "dados reais").
     Restrito a <span>: <a> e <button> em formato de pílula podem ter
     rótulo longo ("PUBLICAR O PRIMEIRO CURSO") e precisam poder quebrar. */
  main span[style*="border-radius:999px"],
  main span[style*="border-radius: 999px"] {
    white-space: nowrap;
  }

  /* --- C-1.6 · Grades de 2 a 4 colunas viram 1 coluna ------------------
     A regra 3.6 já força `grid-template-columns:1fr` em qualquer elemento
     com grade inline, inclusive nos `repeat(auto-fit, minmax(…))` dos
     formulários. Aqui só garantimos que a célula não estoure a coluna:
     um <input> ou uma palavra longa não podem alargar a faixa. */
  main [style*="grid-template-columns"] > * {
    min-width: 0;
    max-width: 100%;
  }

  /* --- C-1.7 · Título de cartão não é título de página ------------------
     A regra 3.10 aplica clamp(20px, 5.6vw, 28px) em TODO <h2>. A 390px
     isso infla um título de cartão de 16px para ~22px — sozinho, já joga
     "Lotes e COA · dados reais" para quatro linhas de uma palavra.
     Devolvemos o tamanho que o HTML pediu. Só para os tamanhos pequenos
     (15–19px), que são inequivocamente título de cartão; o h2 de seção
     (20px ou mais) continua ganhando a escala da 3.10.
     !important porque a 3.10 usa !important. */
  main h2[style*="font-size:15px"],   main h2[style*="font-size: 15px"]   { font-size: 15px !important; }
  main h2[style*="font-size:15.5px"], main h2[style*="font-size: 15.5px"] { font-size: 15.5px !important; }
  main h2[style*="font-size:16px"],   main h2[style*="font-size: 16px"]   { font-size: 16px !important; }
  main h2[style*="font-size:17px"],   main h2[style*="font-size: 17px"]   { font-size: 17px !important; }
  main h2[style*="font-size:18px"],   main h2[style*="font-size: 18px"]   { font-size: 18px !important; }
  main h2[style*="font-size:19px"],   main h2[style*="font-size: 19px"]   { font-size: 19px !important; }

  /* --- C-1.8 · Palavra longa nunca vaza do cartão -----------------------
     Rede de segurança: e-mail, URL ou nome composto sem espaço passam a
     quebrar dentro da caixa em vez de furar a borda. `break-word` (e não
     `anywhere`) só age quando a palavra realmente não cabe. */
  main h1, main h2, main h3, main h4,
  main p, main strong, main em, main span, main li, main td, main a, main label {
    overflow-wrap: break-word;
  }

  /* --- C-1.9 · Alvo de toque ≥ 44px (WCAG 2.5.5) -----------------------
     A 3.10 já cobre <button>, <input>, <select> e o link-pílula
     (border-radius:999px). Faltavam os links que parecem botão com outro
     raio (10/12/14px). O par "tem raio E tem padding" é o que separa botão
     de link de texto corrido — um link dentro de parágrafo não tem os
     dois, então não é atingido e o texto não é desalinhado. */
  main a[style*="border-radius"][style*="padding"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  main button,
  main [role="button"] {
    min-height: 44px;
    box-sizing: border-box;
  }
}

/* =====================================================================
 * D-1 · CONTRASTE DO TEXTO DE APOIO — o conserto que nunca chegou a agir
 *
 * O DEFEITO
 * O cinza de apoio #8A9188 é o parágrafo explicativo de praticamente toda
 * página ("O que os membros escreveram, do mais recente para o mais
 * antigo.", "Só profissionais com vínculo ativo podem anunciar."…). Medido
 * no navegador, com o fundo real atrás de cada parágrafo:
 *
 *   #8A9188 sobre #FAF8F4 (creme da página) ........ 3,05:1
 *   #8A9188 sobre #FFFFFF (cartão branco) .......... 3,24:1
 *   #8A9188 sobre #F0F2EA (cartão verde-claro) ..... 2,87:1   ← o pior
 *   #B3AC9D sobre #E8E3D8 (faixa bege) ............. 1,76:1
 *
 * O mínimo do WCAG 2.1 AA para texto normal é 4,5:1. Reprovava em tudo.
 *
 * POR QUE A REGRA ANTIGA NÃO PEGAVA (a parte que faltava descobrir)
 * A seção 1 deste arquivo já mirava `[style*="#8A9188"]` desde sempre. Só
 * que as páginas passam por <dc-import>/<x-dc>, que reserializam o atributo
 * `style` antes de o navegador aplicar o CSS. O que está escrito no HTML
 * como `color: #8A9188` chega ao DOM como `color: rgb(138, 145, 136)`.
 * Conferido em execução: `document.querySelectorAll('[style*="8A9188"]')`
 * devolve ZERO elementos em plataforma/comunidade.html, enquanto 158
 * parágrafos computam `color: rgb(138, 145, 136)`. Ou seja: o seletor
 * antigo era sintaticamente correto e semanticamente inútil.
 * Por isso as regras abaixo trazem as DUAS grafias — a hexadecimal (páginas
 * que não passam pelo componente) e a rgb() (as que passam), inclusive a
 * forma sem vírgulas que outros navegadores podem serializar.
 *
 * A COR NOVA
 * #5A6357 é o MESMO tom da família, só mais escuro: matiz 105° contra 107°
 * do original, mesma dessaturação verde-acinzentada. Medições:
 *
 *   #5A6357 sobre #FFFFFF .......... 6,26:1
 *   #5A6357 sobre #FAF8F4 .......... 5,90:1
 *   #5A6357 sobre #FBF6E8 .......... 5,79:1
 *   #5A6357 sobre #FAF3E4 .......... 5,66:1
 *   #5A6357 sobre #FBF0F0 .......... 5,61:1
 *   #5A6357 sobre #F0F2EA .......... 5,54:1
 *   #5A6357 sobre #E8E3D8 .......... 4,89:1   ← o pior caso, ainda aprova
 *
 * (O #6B7368 que este arquivo propunha antes só dava 4,19:1 sobre #F0EDE4 e
 * 4,35:1 sobre #F0F2EA: teria reprovado justamente nos cartões.)
 *
 * E O TEXTO EM FUNDO ESCURO?
 * Escurecer um cinza é perigoso se ele também for usado sobre preto. Foi
 * medido antes de mexer: varredura de 21 páginas em 390px e 1280px listando
 * o fundo efetivo (subindo a árvore até achar um fundo opaco) de todo
 * elemento que computa esse cinza. Os únicos fundos encontrados foram
 * rgb(250,248,244), rgb(255,255,255), rgb(251,246,232), rgb(240,242,234),
 * rgb(250,243,228), rgb(251,240,240) e rgb(232,227,216) — todos claros.
 * Nenhuma ocorrência sobre fundo escuro. Mesmo assim, a regra logo abaixo
 * é uma rede de segurança para conteúdo novo: dentro de um painel escuro o
 * cinza vai para o lado CLARO em vez do escuro.
 *
 * SOBRE OS !important
 * Cada declaração aqui vence um `style` inline (é assim que o projeto pinta
 * tudo). Sem !important, o inline ganha e nada muda — é o único jeito de
 * uma folha de estilo alcançar um atributo `style`.
 * Risco conhecido e aceito: 3 cartões usam #B3AC9D em `border-left` sem
 * declarar `color`; eles passam a herdar este cinza. São cartões cujo texto
 * já declara a própria cor, então nada muda na tela — e o comportamento é o
 * mesmo que a regra antiga já tinha.
 * ===================================================================== */
[style*="#8A9188"],
[style*="#8a9188" i],
[style*="rgb(138, 145, 136)"],
[style*="rgb(138,145,136)"],
[style*="rgb(138 145 136)"],
[style*="#B3AC9D"],
[style*="#b3ac9d" i],
[style*="rgb(179, 172, 157)"],
[style*="rgb(179,172,157)"],
[style*="rgb(179 172 157)"] {
  color: #5A6357 !important; /* vence o `color` inline do próprio elemento */
}

/* Rede de segurança para conteúdo NOVO: dentro de painel escuro o apoio
   clareia em vez de escurecer. #C3CBBD sobre #2F3626 = 7,12:1.

   O seletor casa a palavra "background" JUNTO da cor, e não a cor solta.
   Isso não é preciosismo: a primeira versão desta regra usava
   `[style*="#2F3626"] …` e o #2F3626 é a cor de TEXTO padrão do projeto —
   o resultado, medido, foram 17 elementos de plataforma/pessoas.html com
   texto #C3CBBD sobre fundo BRANCO, algo em torno de 1,9:1. Uma rede de
   segurança que cria um defeito pior que o defeito que evita não é rede.
   As duas grafias aparecem porque só as páginas que passam pelo componente
   têm o `style` reserializado para rgb().

   !important porque a regra acima também usa !important e vem antes: sem
   ele as duas empatariam em especificidade e a de cima venceria. */
[style*="background:#2F3626"] [style*="#8A9188"],
[style*="background: #2F3626"] [style*="#8A9188"],
[style*="background-color:#2F3626"] [style*="#8A9188"],
[style*="background: rgb(47, 54, 38)"] [style*="rgb(138, 145, 136)"],
[style*="background-color: rgb(47, 54, 38)"] [style*="rgb(138, 145, 136)"],
[style*="background:#23291D"] [style*="#8A9188"],
[style*="background: #23291D"] [style*="#8A9188"],
[style*="background: rgb(35, 41, 29)"] [style*="rgb(138, 145, 136)"],
[style*="background-color: rgb(35, 41, 29)"] [style*="rgb(138, 145, 136)"] {
  color: #C3CBBD !important;
}

/* =====================================================================
 * D-2 · O BOTÃO "?" DO TOUR DEIXA DE POUSAR EM CIMA DO CONTEÚDO
 *
 * O DEFEITO (o mais repetido de toda a auditoria)
 * O botão flutuante "?" cobria a borda direita dos cartões em saude,
 * perfil, loja, pessoas e juridico; encostava em "Prescrições" no
 * painel-medico; e em comunidade cobria a última palavra de uma frase —
 * "…do mais recente para o ▓". Medido a 1366px: o botão ocupava
 * 1314–1352 e a coluna de conteúdo ia até 1334. Vinte pixels de texto
 * debaixo de um disco branco opaco.
 *
 * A ESCOLHA
 * Um botão fixo num canto está, por definição, em cima de alguma coisa.
 * Das saídas possíveis:
 *   · semitransparente em repouso — muda a aparência, não o fato: o texto
 *     embaixo continua esmaecido, e mexer no contraste do botão contraria
 *     justamente o defeito 2 (um disco branco a 0,7 de opacidade sobre o
 *     creme #FAF8F4 quase desaparece: o "?" cairia para ~2,2:1);
 *   · recolher enquanto rola — não ajuda quem está PARADO lendo, que é
 *     exatamente quando a palavra coberta incomoda;
 *   · reservar espaço à direita do conteúdo — é o único que resolve em
 *     qualquer posição de rolagem, porque o conteúdo simplesmente não
 *     chega mais até onde o botão mora. Foi o escolhido.
 * Junto vem o encolhimento: em ch-tour.js o botão virou uma caixa de toque
 * TRANSPARENTE de 44x44 (alvo mínimo de WCAG 2.5.5, preservado) com um
 * disco pintado menor no centro. Só o disco pinta pixel, então a faixa a
 * reservar encolhe — e o transparente não esconde nada do que está atrás.
 * O botão continua opaco e legível: "?" #1F7268 sobre disco branco = 6,7:1.
 *
 * AS CONTAS (é um par com margemDaBorda() de ch-tour.js — mexer num só
 * traz a sobreposição de volta)
 *   celular  · botão right:2 → caixa 344–388, disco de 30px em 351–381;
 *              <main> termina em 390−42 = 348 → folga de 3px.
 *   desktop  · botão right:14 → caixa 1308–1352, disco de 34px em
 *              1313–1347; <main> termina em 1366−60 = 1306 → folga de 7px.
 *
 * A faixa é presa a `body.ch-com-ajuda`, classe que ch-tour.js só põe nas
 * páginas que realmente criam o botão: quem não tem tour não perde largura.
 * ===================================================================== */
@media (min-width: 900px) {
  /* !important: o padding de <main> é inline nas páginas de /plataforma
     (padding: 28px 32px …). Sem ele o inline vence e a faixa não existe. */
  /* Antes reservávamos faixa à direita e a coluna de conteúdo ficava
     visivelmente torta. A faixa agora é embaixo: o botão "?" mora no
     rodapé, o conteúdo termina acima dele e as margens laterais
     continuam iguais dos dois lados. */
  body.ch-com-ajuda main { padding-bottom: 96px !important; }

  /* !important: o tamanho do disco é inline (ch-tour.js define o valor de
     celular como padrão, para o botão nascer certo mesmo se este arquivo
     demorar a carregar); aqui só o aumentamos onde sobra espaço. */
  body.ch-com-ajuda #ch-tour-help-disco {
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 899.98px) {
  /* !important pelo mesmo motivo, e ainda para vencer as regras 3.5 e a de
     ≤400px deste arquivo, que já fixam padding-right com !important. */
  body.ch-com-ajuda main { padding-bottom: 88px !important; }
}

/* Estados do botão (sem media query: valem em qualquer largura).
   O disco cresce e ganha sombra no foco/hover — reforço visual sem tocar em
   opacidade, para não repetir o erro de contraste do defeito 2. */
#ch-tour-help:hover #ch-tour-help-disco,
#ch-tour-help:focus-visible #ch-tour-help-disco {
  transform: scale(1.14);
  box-shadow: 0 10px 26px rgba(47, 54, 38, .32);
}
#ch-tour-help:active #ch-tour-help-disco { transform: scale(.96); }
/* O anel de foco vai no disco, não na caixa transparente: no botão inteiro
   ele desenharia um retângulo de 44px flutuando sozinho na margem. */
#ch-tour-help:focus { outline: none; }
#ch-tour-help:focus-visible #ch-tour-help-disco {
  outline: 3px solid #1F7268;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  #ch-tour-help-disco { transition: none !important; } /* desfaz o transition inline */
}

/* =====================================================================
 * D-3 · A LINHA DE BUSCA DEIXA DE VIRAR UMA LETRA SÓ
 *
 * O DEFEITO
 * Em mobile-pessoas e mobile-juridico a linha "campo de texto + select +
 * botão" não quebrava, e o campo de texto ficava com 47px — mostrando uma
 * única letra cortada ("E" de "Buscar por nome…"). Medido: largura útil de
 * 21px para um placeholder que pede 381px.
 *
 * POR QUE C-1.2 NÃO ALCANÇAVA
 * A linha vem de assets/ch-conectar.js:
 *
 *   <form style="display:flex;gap:10px;flex-wrap:wrap;">
 *     <input  type="search" style="…flex:2;min-width:200px;width:auto;">
 *     <select              style="…flex:1;min-width:140px;width:auto;">
 *     <button>Buscar</button>
 *   </form>
 *
 * C-1.2 conserta filhos com `flex:1` — e aqui o campo de texto tem `flex:2`.
 * Quem ganhou a base de 220px foi o SELECT; o input ficou com flex-basis:0
 * (do atalho `flex`) e min-width zerado pela regra 3.7, ou seja, livre para
 * encolher até sumir. O select levou a linha e sobraram 21px para o texto.
 *
 * A CORREÇÃO
 * Num celular, campo de digitação não divide linha com mais nada: ele pede
 * a linha inteira (flex-basis:100%) e o select e o botão descem. Vale para
 * qualquer `flex:N`, e não só para `flex:1`, porque a regra mira o TIPO do
 * filho (campo de texto) em vez do valor do atalho.
 * Caixas de marcar e afins ficam de fora — elas devem mesmo continuar ao
 * lado do rótulo.
 * ===================================================================== */
@media (max-width: 640px) {
  main [style*="display:flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]):not(a):not(button) > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  main [style*="display: flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]):not(a):not(button) > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  main [style*="display:flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]):not(a):not(button) > textarea,
  main [style*="display: flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]):not(a):not(button) > textarea,
  main [style*="display:flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]):not(a):not(button) > label > input[type="search"],
  main [style*="display: flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]):not(a):not(button) > label > input[type="search"] {
    /* flex-basis — o inline traz `flex:2` (= flex-basis:0); sem !important
       o campo continua podendo encolher até a largura de uma letra. */
    flex-basis: 100% !important;
    /* min-width — o inline traz min-width:200px; precisamos poder encolher
       abaixo disso em telas menores sem gerar rolagem horizontal. */
    min-width: 0 !important;
    /* width — o inline traz `width:auto`, que numa linha flex já basta,
       mas outros campos do projeto trazem largura fixa em px. */
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* =====================================================================
 * D-4 · PLACEHOLDER CORTADO NO MEIO DA PALAVRA
 *
 * O DEFEITO
 * "ex.: CRM-SP 148", "O que você quer contar para a c", "ex.: enviamos de
 * segunda a s". O texto de exemplo é maior que o campo e o navegador corta
 * onde der, no meio de uma palavra ou de um número.
 *
 * O QUE DÁ PARA FAZER SÓ COM CSS — e é o que está aqui
 *   1. O campo mais largo no celular: quem resolve isso é o bloco D-3
 *      acima, que dá a linha inteira ao campo de busca (o pior caso do
 *      relatório: de 47px para a largura do cartão).
 *   2. Placeholder um pouco menor. `::placeholder` aceita font-size; 0,87em
 *      devolve ~13% de texto sem mexer no tamanho do que a pessoa digita
 *      (o valor digitado continua em 16px, o que evita o zoom automático do
 *      iOS — regra 3.9). Com isso passam a caber, por exemplo,
 *      "Ex.: vegetativo, floração, secagem" (precisava de 294px num campo
 *      de 268px → 256px) e "ex.: ~15 mg CBD/ml (estimativa)" (295 → 257).
 *   3. Quando ainda não couber, cortar com reticências em vez de no meio da
 *      palavra: "ex.: CRM-SP 14…" em vez de "ex.: CRM-SP 148". Verificado
 *      que o Chrome aplica `text-overflow` também ao placeholder.
 *
 * O QUE NÃO SE RESOLVE POR CSS — dito com todas as letras
 * Frase que precisa de 594px num campo de 224px (a bio de pessoas.html) ou
 * de 358px num campo de 258px ("O que você quer contar para a comunidade?")
 * não cabe por encolhimento nenhum que ainda seja legível — seria preciso
 * ~40% menos, e aí o texto de exemplo fica menor que a letra miúda de um
 * contrato. Esses só melhoram encurtando a frase no HTML (por exemplo
 * "O que você quer contar?"), que é arquivo de outro agente.
 * ===================================================================== */
input::placeholder,
textarea::placeholder {
  font-size: .87em;
  opacity: 1; /* Firefox aplica opacity:.54 por padrão e derruba o contraste */
}
/* <input type="file"> fica de fora: ali o texto não é placeholder, é o
   controle nativo do navegador, e o Chrome já corta o nome do arquivo pelo
   MEIO. Com `text-overflow` ligado, "No file chosen" virava "No fil...hosen"
   na tela — pior do que estava. Verificado em plataforma/cultivo.html. */
input:not([type="file"]) {
  text-overflow: ellipsis;
}

/* =====================================================================
 * D-5 · CAMPOS DE ARQUIVO — o que dá e o que NÃO dá para fazer só com CSS
 *
 * O DEFEITO
 * Em plataforma/cultivo.html os campos de foto e de áudio mostram
 * "Choose File / No file chosen" no meio de uma interface toda em
 * português. É o controle nativo do <input type="file">: o Chrome escreve
 * esse texto no idioma da INTERFACE do navegador, não no `lang` da página,
 * e não existe atributo que o traduza.
 *
 * O QUE FOI TESTADO (não é opinião — está em /tmp/qa/meu/file-teste.png)
 *   A. Só estilizar `::file-selector-button`: funciona, mas o texto continua
 *      "Choose File" e "No file chosen". Não resolve nada.
 *   B. Trocar o rótulo por uma imagem: `color:transparent` no botão mais um
 *      SVG de fundo escrito "Escolher arquivo". Funciona visualmente — e
 *      deixa "No file chosen" em inglês do lado, ou seja, entrega um campo
 *      METADE em português e metade em inglês. Pior que o defeito. E o nome
 *      acessível do botão continua sendo "Choose File", o que quebra o
 *      critério 2.5.3 (Label in Name) para quem usa leitor de tela.
 *   C. `color:transparent` no <input> para apagar o "No file chosen":
 *      apaga junto o NOME DO ARQUIVO depois de escolhido. A pessoa anexa a
 *      foto e o campo fica visualmente vazio. Isso é quebrar a função.
 *
 * CONCLUSÃO HONESTA: não dá para resolver de forma confiável só com CSS.
 * A saída certa é a padrão, e é HTML: esconder o <input type="file"> com a
 * técnica de "visualmente oculto" (não com display:none, que o tira do
 * teclado) e pôr um <label for="ch-ac-foto"> estilizado por cima, mais um
 * <span> que o JS preenche com o nome do arquivo escolhido. São ~6 linhas
 * em assets/ch-alma-cultivo.js e assets/ch-verificacao.js — arquivos de
 * outro agente. Fica registrado aqui como pendência, sem gambiarra.
 *
 * O QUE DÁ, e está abaixo: fazer o controle nativo CABER. A regra 3.9 força
 * 16px em todo input (para evitar o zoom automático do iOS ao focar), e num
 * campo de 232px o par "Choose File | No file chosen" a 16px não cabe — o
 * navegador então corta pelo meio e escreve "No fil...hosen", que parece
 * defeito de renderização. Campo de arquivo não recebe digitação, então o
 * motivo do zoom não se aplica a ele e podemos devolver um corpo menor.
 * ===================================================================== */
@media (max-width: 899.98px) {
  /* !important para desfazer o `font-size: 16px !important` da regra 3.9 —
     é !important contra !important, não há outro jeito. */
  input[type="file"] { font-size: 13px !important; }
  /* O botão nativo ganha o desenho do projeto. Não traduz nada: é só para
     ele parar de parecer um controle de sistema perdido no formulário. */
  input[type="file"]::file-selector-button {
    font: 800 12px/1 Archivo, Inter, sans-serif;
    color: #FFFFFF;
    background: #717B61;
    border: none;
    border-radius: 999px;
    padding: 9px 14px;
    margin-right: 10px;
    cursor: pointer;
  }
}
