/* texto-e-estados.css (03/11/2026): texto que nao estoura, estados, movimento reduzido, tabela, icones. Carregar DEPOIS de tokens.css. Nao mexe em botao. */
/* ===== TEXTO QUE NÃO ESTOURA ===== */
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; }
p, li, dd { text-wrap: pretty; overflow-wrap: break-word; }          /* pretty: só Safari 26+/Chrome; nos outros é ignorado, sem dano */
img, svg, video { max-width: 100%; }
:where(img) { height: auto; }
.grade > *, .acoes > *, .card, .linha > * { min-width: 0; }          /* filho de grid/flex pode encolher */
.card h3, .card p { overflow-wrap: anywhere; }                       /* e-mail, URL, nome sem espaço */
.quebra { overflow-wrap: anywhere; word-break: normal; }             /* NUNCA word-break:break-all em texto corrido */
.num { font-variant-numeric: tabular-nums; }                          /* valores, datas, contagens alinham */
input, select, textarea { min-width: 0; font-size: max(16px, 1rem); }/* 16 px evita zoom do iPhone */

/* chips: quebram em linhas; texto longo vira reticências COM title="texto inteiro" */
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 4px 12px;
  border: 1px solid var(--aro); border-radius: var(--r-pilula); background: var(--card);
  font-size: var(--t-sm); line-height: var(--lh-ui); color: var(--texto); }
.chip > .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.ok { border-color: color-mix(in srgb, var(--ok) 55%, var(--aro)); }
.chip.aviso { border-color: color-mix(in srgb, var(--aviso) 55%, var(--aro)); }
.chip.erro { border-color: color-mix(in srgb, var(--erro) 55%, var(--aro)); }
/* status nunca só por cor: o chip leva ícone ou palavra ("Pago", "Atrasado") dentro dele */

/* só para texto NÃO essencial (descrição de card em listagem). Nunca em título, botão, erro ou aviso de segurança */
.trunca-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trunca-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== LINKS, CARDS E CAMPOS: ESTADOS ===== */
a { color: var(--marca-texto); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, .card.clicavel:focus-visible { outline: 2px solid var(--marca-texto); outline-offset: 3px; border-radius: var(--r-sm); }
.card.clicavel { cursor: pointer; }
.card.clicavel:active { transform: translateY(0) scale(.992); box-shadow: var(--elev-1); transition-duration: var(--dur-1); }
.card[aria-disabled="true"], .card.is-desativado { opacity: .55; filter: saturate(.7); pointer-events: none; }
.card[aria-busy="true"] { position: relative; overflow: hidden; }                           /* carregando: mantém a força, sobe um brilho */
.card[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--texto) 10%, transparent) 50%, transparent 70%);
  transform: translateX(-100%); animation: varre 1.4s var(--ease-sai) infinite; }
@keyframes varre { to { transform: translateX(100%); } }
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--erro); }
.erro-campo { color: var(--erro); font-size: var(--t-sm); margin-top: var(--e-1); }       /* texto de erro + ícone/palavra, nunca só vermelho */
@media (hover: none) { .card:hover { transform: none; } }                                   /* toque não tem hover: nada depende dele */

/* ===== MOVIMENTO E TRANSPARÊNCIA REDUZIDOS ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .card:hover { transform: none; }
}
/* decisao 03/11/2026: so alto contraste tira o vidro; "transparencia reduzida" do Windows nao (o vidro e a identidade do padrao e esse ajuste vem desligado em muitos notebooks) */
@media (prefers-contrast: more) {
  .topo, .card { backdrop-filter: none; -webkit-backdrop-filter: none;
    background: color-mix(in srgb, var(--fundo-2) 94%, var(--texto)); }
  .card { border-color: color-mix(in srgb, var(--texto) 40%, transparent); }
}
@supports not (backdrop-filter: blur(1px)) { .topo, .card { background: color-mix(in srgb, var(--fundo-2) 94%, var(--texto)); } }

/* ===== VIDRO COM DISCIPLINA: card dentro de card não é vidro ===== */
.card .card, .card .sub-card { background: color-mix(in srgb, var(--texto) 5%, transparent); backdrop-filter: none; box-shadow: none; }

/* ===== TABELA / PAINEL DENSO ===== */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--aro); border-radius: var(--r-lg); background: var(--card); }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-sm); }
.tabela th { position: sticky; top: 0; z-index: 1; text-align: left; font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--suave); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--aro);
  background: color-mix(in srgb, var(--fundo-2) 92%, transparent); }
.tabela td { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--aro); vertical-align: middle; overflow-wrap: anywhere; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela tbody tr:hover { background: color-mix(in srgb, var(--marca) 8%, transparent); }
@media (pointer: fine) { .tabela.compacta td, .tabela.compacta th { padding: var(--e-2) var(--e-3); } }  /* compacta só com mouse; no toque a linha mantém 44 px */
@media (max-width: 640px) {
  .tabela.vira-cartao thead { position: absolute; left: -9999px; }                  /* mantém para leitor de tela */
  .tabela.vira-cartao tr { display: block; padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--aro); }
  .tabela.vira-cartao td { display: flex; justify-content: space-between; gap: var(--e-3); border: 0; padding: var(--e-1) 0; }
  .tabela.vira-cartao td::before { content: attr(data-rotulo); color: var(--suave); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; }
}

/* ===== ÍCONES (SVG inline ou sprite <use>) ===== */
.ic { width: var(--ic-md); height: var(--ic-md); flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic.sm { width: var(--ic-sm); height: var(--ic-sm); } .ic.lg { width: var(--ic-lg); height: var(--ic-lg); }

/* ===== ALVO DE TOQUE (03/11/2026): em celular e toque todo controle tem >= 44 px; no mouse os botoes pequenos continuam compactos. Prefixo html para vencer botoes-*.css (carregam depois) ===== */
@media (max-width: 640px), (pointer: coarse) {
  html .btn-vidro, html .btn-vidro--sm, html .btn-vidro--lg, html .btn-vidro--icone, html .btn-ic, html .pilula-esfera, html .pilula-esfera.sm, html .tema-btn, html .apar-b, html button.chip, html .chip.clicavel, html .pilula-seg > *, html .link-seta { min-height: var(--alvo, 44px) !important; }
  html .btn-vidro--icone, html .btn-ic, html .tema-btn, html .apar-b { min-width: var(--alvo, 44px) !important; }
}