/* componentes.css — catálogo de componentes (C §5; D89 botão de limpar; D91 medidor de senha; carrossel da Revisão 2).
   Estado por atributo (aria-*, data-estado), nunca por classe utilitária. Só tokens (V06/V07). */

@layer components {
  /* =============================================================== BOTÕES (C §5.1) */
  .btn {
    --btn-h: var(--alvo-min);
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: var(--btn-h); padding: 0 var(--sp-5); border-radius: var(--r-md); border: 1px solid transparent;
    font-weight: 700; font-size: var(--fs-base); line-height: 1.1; text-decoration: none; white-space: nowrap; user-select: none;
    transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
      box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  .btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
  .btn .i { width: 1.15em; height: 1.15em; }
  .btn-pri { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 var(--brilho-branco), 0 6px 16px -6px color-mix(in oklab, var(--accent) 60%, transparent); }
  .btn-pri:hover { background: var(--accent-hover); color: var(--on-accent); }
  .btn-pri:active { background: var(--accent-press); }
  .btn-sec { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
  .btn-sec:hover { background: var(--surface-2); border-color: var(--text-3); }
  .btn-ghost { background: transparent; color: var(--text-2); }
  .btn-ghost:hover { background: var(--surface-2); color: var(--text); }
  .btn-perigo { background: var(--danger); color: var(--surface); }
  .btn-perigo:hover { background: var(--danger-strong); }
  .btn-link { background: none; color: var(--accent-text); padding: 0 var(--sp-1); min-height: auto; font-weight: 700; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em; }
  .btn-link:hover { text-decoration-color: currentColor; }
  /* Celular: o botão nunca passa da largura do contêiner; texto longo quebra em duas linhas (RD 23/09, checkout a 390 px). */
  @media (max-width: 599.98px) {
    .btn { max-width: 100%; white-space: normal; text-align: center; text-wrap: balance; padding-block: var(--sp-2); }
    .btn > svg { flex: none; }
  }
  @media (pointer: coarse), (max-width: 1023.98px) { .btn-link { min-height: var(--alvo-min); min-width: var(--alvo-min); } }
  .btn-suave { background: var(--accent-soft); color: var(--accent-text); }
  /* Hover sem escurecer o fundo: --accent-text sobre --accent-soft-2 fica abaixo de 4,5:1 (axe); o realce vem da borda. */
  .btn-suave:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-border); }
  .btn[data-tamanho="sm"] { --btn-h: 36px; padding: 0 var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-sm); }
  @media (pointer: coarse) { .btn[data-tamanho="sm"] { --btn-h: var(--alvo-min); } }
  .btn[data-tamanho="lg"] { --btn-h: 52px; padding: 0 var(--sp-6); font-size: var(--fs-md); border-radius: var(--r-lg); }
  .btn[data-largura="total"] { width: 100%; }
  .btn:disabled, .btn[aria-disabled="true"] { background: var(--surface-3); color: var(--text-3); border-color: transparent; box-shadow: none; cursor: not-allowed; }
  .btn[aria-busy="true"] { cursor: progress; }
  .btn[aria-busy="true"]::before {
    content: ""; width: 16px; height: 16px; border-radius: var(--r-full); border: 2px solid currentColor; border-right-color: transparent;
    animation: girar .8s linear infinite; flex: none;
  }
  .btn[aria-busy="true"] > .i:first-child { display: none; }
  .btn[data-sucesso]::after { content: "✓"; margin-left: var(--sp-1); }
  .btn kbd { margin-left: var(--sp-1); background: transparent; color: inherit; box-shadow: inset 0 0 0 1px color-mix(in oklab, currentColor 55%, transparent); }
  @media not ((hover: hover) and (pointer: fine)) { .btn kbd, .dica-atalho { display: none; } }
  @keyframes girar { to { transform: rotate(360deg); } }

  .btn-icone {
    display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-full);
    color: var(--text-2); background: transparent; border: 1px solid transparent; position: relative;
    transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
  }
  .btn-icone[data-borda] { border-color: var(--border); background: var(--surface); }
  .btn-icone:hover { background: var(--surface-2); color: var(--text); }
  .btn-icone[aria-pressed="true"] { color: var(--accent-text); background: var(--accent-soft); }
  .btn-icone .i { width: 20px; height: 20px; }
  /* Alvos de toque ≥ 44 px (C §15) também pela largura: emuladores e tablets nem sempre informam pointer: coarse. */
  @media (pointer: coarse), (max-width: 1023.98px) { .btn-icone, .alt .riscar { width: var(--alvo-min); height: var(--alvo-min); } }
  .cabecalho .btn-icone { width: var(--alvo-min); height: var(--alvo-min); }
  .btn-icone__ponto { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; padding: 0 var(--sp-1); border-radius: var(--r-full); background: var(--danger); color: var(--surface); font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }

  /* Segmentado (C §5.1 .seg) */
  .seg { display: inline-flex; padding: var(--sp-1); gap: var(--sp-1); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); }
  .seg > button, .seg > a {
    display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 36px; padding: 0 var(--sp-3); border-radius: var(--r-sm);
    font-weight: 600; font-size: var(--fs-sm); color: var(--text-2); text-decoration: none;
    transition: background var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }
  .seg > [aria-pressed="true"], .seg > [aria-checked="true"], .seg > [aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
  @media (pointer: coarse) { .seg > button, .seg > a { min-height: 40px; } }

  /* =============================================================== CAMPOS (C §5.2; D89 limpar; D91 senha) */
  .campo { display: grid; gap: var(--sp-2); min-width: 0; align-content: start; }
  .campo__rotulo { font-weight: 600; font-size: var(--fs-sm); color: var(--text); display: flex; justify-content: space-between; gap: var(--sp-2); align-items: baseline; }
  .campo__opcional { font-weight: 500; color: var(--text-3); }
  .campo__caixa { position: relative; display: flex; align-items: center; }
  .campo__icone { position: absolute; left: var(--sp-3); color: var(--text-3); pointer-events: none; display: grid; z-index: 1; }
  .campo__controle {
    width: 100%; min-height: var(--alvo-min); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md);
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: var(--fs-base);
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-1) var(--ease-out);
    appearance: none; -webkit-appearance: none;
  }
  .campo__controle::placeholder { color: var(--text-3); opacity: 1; }
  .campo__controle:hover { border-color: var(--text-3); }
  .campo__controle:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 35%, transparent); }
  .campo__controle:focus-visible { outline: none; }
  .campo__caixa[data-com-icone] .campo__controle { padding-left: calc(var(--sp-3) + var(--i-tam) + var(--sp-3)); }
  /* Espaço reservado à direita para os botões internos (limpar e revelar): nunca sobrepõem o texto (D89). */
  .campo__caixa[data-limpavel] .campo__controle { padding-right: calc(var(--alvo-min) + var(--sp-1)); }
  .campo__caixa[data-revelavel] .campo__controle { padding-right: calc(var(--alvo-min) + var(--sp-1)); }
  .campo__caixa[data-limpavel][data-revelavel] .campo__controle { padding-right: calc(var(--alvo-min) * 2); }
  .campo__botoes { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; padding-right: 0; }
  .campo__limpar, .campo__revelar {
    display: grid; place-items: center; width: var(--alvo-min); height: var(--alvo-min); flex: none; border-radius: var(--r-md);
    color: var(--text-3); transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out);
  }
  .campo__limpar:hover, .campo__revelar:hover { color: var(--text); }
  .campo__limpar .i { width: 18px; height: 18px; padding: 2px; border-radius: var(--r-full); background: var(--surface-3); color: var(--text-2); }
  .campo__limpar:hover .i { background: var(--border-strong); color: var(--surface); }
  .campo__limpar:focus-visible, .campo__revelar:focus-visible { outline-offset: -4px; }
  .campo__limpar[hidden] { display: none; }
  .campo__caixa[data-limpavel]:not([data-tem-valor]) .campo__limpar { display: none; }
  .campo__ajuda { font-size: var(--fs-sm); color: var(--text-3); }
  .campo__erro { font-size: var(--fs-sm); color: var(--danger); display: flex; gap: var(--sp-2); align-items: flex-start; font-weight: 600; }
  .campo[data-estado="erro"] .campo__controle, .campo__controle[aria-invalid="true"] { border-color: var(--danger); }
  .campo[data-estado="erro"] .campo__controle:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 30%, transparent); }
  .campo[data-estado="ok"] .campo__controle { border-color: var(--success); }
  .campo__controle:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; }
  textarea.campo__controle { min-height: 120px; line-height: var(--lh-ui); padding-block: var(--sp-3); }
  select.campo__controle { padding-right: calc(var(--alvo-min) + var(--sp-1)); cursor: pointer; }
  .campo__seta { position: absolute; right: var(--sp-3); pointer-events: none; color: var(--text-3); display: grid; }
  .campo__caixa[data-limpavel] .campo__seta { right: calc(var(--alvo-min) - var(--sp-1)); }
  .campo__caixa[data-limpavel][data-tem-valor] select.campo__controle { padding-right: calc(var(--alvo-min) * 2); }
  .campo__caixa[data-limpavel]:not([data-tem-valor]) .campo__seta { right: var(--sp-3); }
  /* Celular: nenhum campo abaixo de 16 px (o Safari do iPhone dá zoom na página ao focar), nem na densidade compacta. */
  @media (max-width: 767.98px) {
    .campo__controle, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(1rem, var(--fs-base)); }
  }

  /* Caixa de seleção, rádio e interruptor */
  .opcao { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--alvo-min); cursor: pointer; font-weight: 500; }
  .opcao input[type="checkbox"], .opcao input[type="radio"] { width: 20px; height: 20px; accent-color: var(--accent); flex: none; margin: 0; cursor: pointer; }
  .opcao--interruptor input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: var(--r-full); background: var(--border-strong); position: relative; transition: background var(--dur-2) var(--ease-out); flex: none; margin: 0; cursor: pointer; }
  .opcao--interruptor input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--r-full); background: var(--surface); box-shadow: var(--sh-1); transition: transform var(--dur-2) var(--ease-spring); }
  .opcao--interruptor input[type="checkbox"]:checked { background: var(--accent); }
  .opcao--interruptor input[type="checkbox"]:checked::after { transform: translateX(18px); }
  .opcao-bloco { display: grid; }
  .opcao-bloco .opcao__ajuda { display: block; margin-top: calc(var(--sp-2) * -1); padding-left: calc(var(--sp-5) + var(--sp-3)); }
  .opcao-bloco--interruptor .opcao__ajuda { padding-left: calc(var(--sp-10) + var(--sp-1) + var(--sp-3)); }
  .opcao--interruptor input:focus-visible { outline: var(--foco-largura) solid var(--ring); outline-offset: 2px; }

  /* Medidor de força de senha (D91) */
  .medidor-senha { display: grid; gap: var(--sp-2); }
  .medidor-senha__barras { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); }
  .medidor-senha__barras span { height: 6px; border-radius: var(--r-full); background: var(--surface-3); transition: background var(--dur-2) var(--ease-out); }
  .medidor-senha[data-nivel="1"] .medidor-senha__barras span:nth-child(-n+1) { background: var(--danger); }
  .medidor-senha[data-nivel="2"] .medidor-senha__barras span:nth-child(-n+2) { background: var(--warning); }
  .medidor-senha[data-nivel="3"] .medidor-senha__barras span:nth-child(-n+3) { background: var(--info); }
  .medidor-senha[data-nivel="4"] .medidor-senha__barras span { background: var(--success); }
  .medidor-senha__rotulo { font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); display: flex; justify-content: space-between; gap: var(--sp-2); }
  .medidor-senha[data-nivel="1"] .medidor-senha__nivel { color: var(--danger); }
  .medidor-senha[data-nivel="2"] .medidor-senha__nivel { color: var(--warning); }
  .medidor-senha[data-nivel="3"] .medidor-senha__nivel { color: var(--info); }
  .medidor-senha[data-nivel="4"] .medidor-senha__nivel { color: var(--success); }
  .medidor-senha__regras { display: grid; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--text-2); }
  .medidor-senha__regras li { display: flex; gap: var(--sp-2); align-items: center; }
  .medidor-senha__regras .i { width: 16px; height: 16px; color: var(--text-3); }
  .medidor-senha__regras li { align-items: flex-start; }
  .medidor-senha__regras .i-ok, .medidor-senha__regras .i-pendente { flex: none; display: inline-flex; margin-top: 2px; }
  .medidor-senha__regras li[data-ok="sim"] { color: var(--text); }
  .medidor-senha__regras li[data-ok="sim"] .i { color: var(--success); }
  .medidor-senha__regras li .i-ok, .medidor-senha__regras li[data-ok="sim"] .i-pendente { display: none; }
  .medidor-senha__regras li[data-ok="sim"] .i-ok { display: inline-flex; }

  /* Combobox pesquisável (C §5.2) */
  .combobox { position: relative; }
  .combobox__lista {
    position: absolute; left: 0; right: 0; top: calc(100% + var(--sp-1)); z-index: var(--z-dropdown); max-height: 320px; overflow-y: auto;
    padding: var(--sp-1); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-3);
  }
  .combobox__opcao { display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); cursor: pointer; color: var(--text); }
  .combobox__opcao[aria-selected="true"], .combobox__opcao[data-ativa] { background: var(--accent-soft); color: var(--accent-text); }
  .combobox__opcao mark { background: none; color: inherit; font-weight: 800; }
  .combobox__vazio { padding: var(--sp-3); color: var(--text-3); font-size: var(--fs-sm); }
  .combobox__escolhidos { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }

  /* Controle deslizante */
  input[type="range"].deslizante { width: 100%; accent-color: var(--accent); height: var(--alvo-min); cursor: pointer; }

  /* =============================================================== CHIPS, TAGS E SELOS (C §5.3–§5.4) */
  .chip {
    display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 32px; padding: 0 var(--sp-3); border-radius: var(--r-full);
    border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
    text-decoration: none; transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  }
  @media (pointer: coarse) { .chip { min-height: var(--alvo-min); } }
  button.chip:hover, a.chip:hover { border-color: var(--accent-border); color: var(--text); }
  .chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-border); }
  .chip .i { width: 16px; height: 16px; }
  .chip__remover { display: grid; place-items: center; width: 24px; height: 24px; margin-right: calc(var(--sp-2) * -1); border-radius: var(--r-full); color: var(--text-3); }
  .chip__remover:hover { background: var(--surface-3); color: var(--text); }
  .chip__contagem { font-variant-numeric: tabular-nums; color: var(--text-3); }
  .chip--metrica { background: var(--warning-soft); border-color: transparent; color: var(--warning-strong); font-weight: 800; }
  .chip--metrica .i { color: var(--warning); }
  .chip--status { background: var(--surface-2); border-color: transparent; }
  .tag { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 24px; padding: 0 var(--sp-2); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
  .tag.ac { background: var(--accent-soft); color: var(--accent-text); }
  .linha-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
  @media (max-width: 767.98px) {
    .linha-chips[data-rolar] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, transparent, var(--text) var(--sp-3), var(--text) calc(100% - var(--sp-6)), transparent); padding-inline: var(--sp-3); margin-inline: calc(var(--sp-3) * -1); }
    .linha-chips[data-rolar]::-webkit-scrollbar { display: none; }
  }

  .selo {
    display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 24px; padding: 0 var(--sp-2); border-radius: var(--r-full);
    font-size: var(--fs-xs); font-weight: 700; line-height: 1; white-space: nowrap; background: var(--surface-2); color: var(--text-2);
  }
  .selo .i { width: 14px; height: 14px; }
  .selo[data-tipo="verificado"] { background: var(--info-soft); color: var(--info-strong); }
  .selo[data-tipo="ia"] { background: var(--accent-soft); color: var(--accent-text); }
  .selo[data-tipo="especialista"] { background: var(--success-soft); color: var(--success-strong); }
  .selo[data-tipo="anulada"], .selo[data-tipo="desatualizada"] { background: var(--warning-soft); color: var(--warning-strong); }
  .selo[data-tipo="novo"] { background: var(--info-soft); color: var(--info-strong); }
  .selo[data-tipo="premium"] { background: var(--accent-soft); color: var(--accent-text); }
  .selo[data-tipo="aberto"] { background: var(--success-soft); color: var(--success-strong); }
  .selo[data-tipo="alerta"] { background: var(--danger-soft); color: var(--danger-strong); }
  .selo[data-tipo="contagem"] { min-width: 20px; min-height: 20px; justify-content: center; padding: 0 var(--sp-1); background: var(--accent); color: var(--on-accent); font-variant-numeric: tabular-nums; }

  /* Pílula do plano: sempre junto ao nome, cor fixa por plano (REQUISITOS 23/09; tokens --plano-*) */
  .pilula-plano {
    --pp-bg: var(--plano-gratis-bg); --pp-fg: var(--plano-gratis-fg); --pp-borda: var(--plano-gratis-borda); --pp-ponto: var(--plano-gratis-ponto);
    display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 22px; padding: 0 var(--sp-2); border-radius: var(--r-full);
    background: var(--pp-bg); color: var(--pp-fg); border: 1px solid var(--pp-borda); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .01em;
    white-space: nowrap; text-decoration: none; line-height: 1;
  }
  .pilula-plano::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--pp-ponto); flex: none; }
  .pilula-plano .i { width: 13px; height: 13px; margin-left: calc(var(--sp-1) * -1); }
  .pilula-plano:has(.i)::before { display: none; }
  .pilula-plano[data-plano="mensal"] { --pp-bg: var(--plano-mensal-bg); --pp-fg: var(--plano-mensal-fg); --pp-borda: var(--plano-mensal-borda); --pp-ponto: var(--plano-mensal-ponto); }
  .pilula-plano[data-plano="anual"] { --pp-bg: var(--plano-anual-bg); --pp-fg: var(--plano-anual-fg); --pp-borda: var(--plano-anual-borda); --pp-ponto: var(--plano-anual-ponto); }
  .pilula-plano[data-plano="vitalicio"] { --pp-bg: var(--plano-vitalicio-bg); --pp-fg: var(--plano-vitalicio-fg); --pp-borda: var(--plano-vitalicio-borda); --pp-ponto: var(--plano-vitalicio-ponto); }
  .pilula-plano[data-plano="equipe"] { --pp-bg: var(--plano-equipe-bg); --pp-fg: var(--plano-equipe-fg); --pp-borda: var(--plano-equipe-borda); --pp-ponto: var(--plano-equipe-ponto); }
  .pilula-plano[data-tamanho="lg"] { min-height: 30px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
  a.pilula-plano:hover { border-color: var(--pp-fg); }

  /* =============================================================== CARTÕES (C §5.5) */
  .cartao { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-1); padding: clamp(var(--sp-4), 3vw, var(--sp-6)); min-width: 0; }
  .cartao[data-tamanho="compacto"] { border-radius: var(--r-lg); padding: var(--sp-4); }
  .cartao[data-elevado] { box-shadow: var(--sh-2); }
  .cartao__cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
  .cartao__titulo { font-size: var(--fs-md); font-weight: 700; letter-spacing: 0; }
  .cartao__sub { font-size: var(--fs-sm); color: var(--text-3); }
  .cartao__rodape { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); flex-wrap: wrap; }
  .cartao-link { display: block; color: inherit; text-decoration: none; transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
  .cartao-link:hover { border-color: var(--accent-border); box-shadow: var(--sh-2); transform: translateY(-2px); }
  .cartao-acao {
    background: radial-gradient(140% 120% at 100% 0%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 55%), var(--accent-soft);
    border-color: var(--accent-border); display: grid; gap: var(--sp-4); grid-template-columns: auto 1fr; align-items: center;
  }
  .cartao-acao__icone { width: 56px; height: 56px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--surface); color: var(--accent-text); box-shadow: var(--sh-1); }
  .cartao-acao__icone .i { width: 28px; height: 28px; }
  .cartao-acao__titulo { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.005em; }
  .cartao-acao__texto { color: var(--text-2); margin-top: var(--sp-1); }
  .cartao-acao__acoes { grid-column: 1 / -1; display: flex; gap: var(--sp-3) var(--sp-5); align-items: center; flex-wrap: wrap; }
  @media (min-width: 768px) { .cartao-acao__acoes { grid-column: 2 / -1; } }

  /* Cartão de plano (P02 / "Escolha seu plano") */
  .cartao-plano { display: flex; flex-direction: column; gap: var(--sp-4); border-radius: var(--r-xl); padding: var(--sp-6); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-1); position: relative; transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
  .cartao-plano:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
  .cartao-plano[data-destaque] { border: 2px solid var(--accent); box-shadow: var(--sh-2); background: radial-gradient(120% 60% at 50% 0%, var(--accent-soft), transparent 70%), var(--surface); }
  .cartao-plano[data-atual] { border-color: var(--accent-border); }
  .cartao-plano__faixa { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: max-content; display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; box-shadow: var(--sh-2); }
  .cartao-plano__nome { display: flex; align-items: center; gap: var(--sp-2); font-weight: 800; font-size: var(--fs-md); }
  .cartao-plano__preco { font-size: var(--fs-num); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
  .cartao-plano__preco small { font-size: var(--fs-base); font-weight: 600; color: var(--text-2); letter-spacing: 0; }
  .cartao-plano__equivale { color: var(--text-2); font-size: var(--fs-sm); }
  .cartao-plano__lista { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
  .cartao-plano__lista li { display: flex; gap: var(--sp-2); align-items: flex-start; }
  .cartao-plano__lista .i { color: var(--success); width: 18px; height: 18px; flex: none; margin-top: 1px; }
  .cartao-plano__acao { margin-top: auto; }

  /* =============================================================== ABAS (C §5.6) */
  .abas { position: relative; display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
  .abas::-webkit-scrollbar { display: none; }
  .abas__aba {
    position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--alvo-min); padding: 0 var(--sp-4);
    color: var(--text-2); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; border-radius: var(--r-md) var(--r-md) 0 0;
  }
  .abas__aba:hover { color: var(--text); background: var(--surface-2); }
  .abas__aba[aria-selected="true"] { color: var(--accent-text); font-weight: 700; }
  .abas__indicador { position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background: var(--accent); border-radius: var(--r-full); transition: transform var(--dur-2) var(--ease-out), width var(--dur-2) var(--ease-out); }
  .abas:not([data-js]) .abas__aba[aria-selected="true"]::after { content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 0; height: 2px; background: var(--accent); border-radius: var(--r-full); }
  .abas__painel { padding-top: var(--sp-4); }
  .abas__painel:focus-visible { outline-offset: 4px; }

  /* =============================================================== DIÁLOGO, GAVETA, FOLHA INFERIOR, MENU (C §5.7–§5.8) */
  dialog.dialogo, dialog.gaveta, dialog.paleta { background: var(--surface); color: var(--text); box-shadow: var(--sh-3); }
  dialog.dialogo::backdrop, dialog.gaveta::backdrop, dialog.paleta::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  dialog.dialogo {
    width: min(100% - 2 * var(--gutter), var(--dlg-w, 560px)); max-height: min(88dvh, 900px); border-radius: var(--r-xl); border: 1px solid var(--border);
    display: flex; flex-direction: column; overflow: hidden;
  }
  dialog.dialogo:not([open]) { display: none; }
  dialog.dialogo[data-tamanho="sm"] { --dlg-w: 400px; }
  dialog.dialogo[data-tamanho="lg"] { --dlg-w: 800px; }
  dialog.dialogo[data-tamanho="xl"] { --dlg-w: 1100px; }
  .dialogo__cabeca { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6) var(--sp-3); }
  .dialogo__titulo { font-size: var(--fs-lg); font-weight: 800; flex: 1; }
  .dialogo__corpo { padding: var(--sp-2) var(--sp-6) var(--sp-6); overflow-y: auto; }
  .dialogo__rodape { display: flex; gap: var(--sp-3); justify-content: flex-end; padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
  .dialogo__alca { display: none; }
  dialog.dialogo[open] { animation: dialogo-entra var(--dur-2) var(--ease-out); }
  dialog.dialogo[open]::backdrop { animation: esmaecer-entra var(--dur-2) var(--ease-out); }
  @keyframes dialogo-entra { from { opacity: 0; transform: scale(.98) translateY(4px); } }
  @keyframes esmaecer-entra { from { opacity: 0; } }
  @media (max-width: 767.98px) {
    dialog.dialogo[data-forma="folha-inferior"], dialog.dialogo:not([data-forma="modal"]) {
      width: 100%; max-width: 100%; margin: auto 0 0; max-height: 92dvh; border-radius: var(--r-2xl) var(--r-2xl) 0 0; border-bottom: 0;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    dialog.dialogo:not([data-forma="modal"])[open] { animation: folha-entra var(--dur-3) var(--ease-out); }
    dialog.dialogo:not([data-forma="modal"]) .dialogo__alca { display: block; width: 36px; height: 4px; border-radius: var(--r-full); background: var(--border-strong); margin: var(--sp-2) auto 0; }
    .dialogo__cabeca { padding-inline: var(--sp-4); }
    .dialogo__corpo { padding-inline: var(--sp-4); }
    .dialogo__rodape { padding-inline: var(--sp-4); }
    .dialogo__rodape .btn { flex: 1 1 auto; }
  }
  @keyframes folha-entra { from { transform: translateY(100%); } }

  dialog.gaveta { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; max-width: 100%; width: min(100%, var(--gaveta-w, 400px)); border-left: 1px solid var(--border); display: flex; flex-direction: column; }
  dialog.gaveta:not([open]) { display: none; }
  dialog.gaveta[data-lado="esquerda"] { margin: 0 auto 0 0; border-left: 0; border-right: 1px solid var(--border); }
  dialog.gaveta[open] { animation: gaveta-entra var(--dur-3) var(--ease-out); }
  dialog.gaveta[data-lado="esquerda"][open] { animation-name: gaveta-entra-esq; }
  @keyframes gaveta-entra { from { transform: translateX(100%); } }
  @keyframes gaveta-entra-esq { from { transform: translateX(-100%); } }
  @media (max-width: 767.98px) {
    /* Folha inferior de verdade (M34, 23/09): o modal do navegador tem inset-block: 0 e max-width calc(100% - 2em - 6px). */
    dialog.gaveta { margin: auto 0 0; inset-block-start: auto; inset-inline: 0; width: 100%; max-width: 100%; height: auto; max-height: 92dvh;
      border-radius: var(--r-2xl) var(--r-2xl) 0 0; border: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
    dialog.gaveta[open] { animation-name: folha-entra; }
    dialog.gaveta .dialogo__alca { display: block; flex: none; width: 36px; height: 4px; border-radius: var(--r-full); background: var(--border-strong); margin: var(--sp-2) auto 0; }
  }

  .menu-suspenso {
    position: absolute; top: calc(100% + var(--sp-2)); right: 0; z-index: var(--z-dropdown); min-width: 260px; padding: var(--sp-2);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-3);
    transform-origin: top right; animation: menu-entra var(--dur-2) var(--ease-out);
  }
  .menu-suspenso[data-alinhar="esquerda"] { right: auto; left: 0; transform-origin: top left; }
  @keyframes menu-entra { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
  .menu-suspenso__item {
    display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--alvo-min); padding: 0 var(--sp-3);
    border-radius: var(--r-md); color: var(--text); text-decoration: none; font-weight: 600; font-size: var(--fs-base); text-align: left;
  }
  .menu-suspenso__item .i { color: var(--text-3); }
  .menu-suspenso__item:hover, .menu-suspenso__item:focus-visible { background: var(--surface-2); }
  .menu-suspenso__item[aria-current="page"] { color: var(--accent-text); }
  .menu-suspenso__sep { height: 1px; background: var(--border); margin: var(--sp-2) 0; }
  .menu-suspenso__cabeca { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3); margin-bottom: var(--sp-1); border-radius: var(--r-md); background: var(--surface-2); }
  .menu-suspenso__cabeca-textos { display: grid; gap: 2px; min-width: 0; }
  .menu-suspenso__nome { font-weight: 800; }
  .menu-suspenso__email { font-size: var(--fs-sm); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu-suspenso__plano { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--text-2); }

  /* =============================================================== TOASTS, TOOLTIP, BANNER, FLASH (C §5.9, §5.10, §5.27) */
  .toasts { position: fixed; left: 50%; bottom: calc(var(--bottomnav) + var(--sp-4)); transform: translateX(-50%); z-index: var(--z-toast); display: grid; gap: var(--sp-2); width: min(100% - 2 * var(--gutter), 480px); pointer-events: none; }
  @media (min-width: 768px) { .toasts { bottom: var(--sp-6); } }
  .toast {
    pointer-events: auto; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
    background: var(--text); color: var(--bg); box-shadow: var(--sh-3); font-weight: 600; font-size: var(--fs-sm);
    animation: toast-entra var(--dur-3) var(--ease-spring);
  }
  .toast[data-saindo] { animation: toast-sai var(--dur-2) var(--ease-in) forwards; }
  .toast .i { flex: none; }
  .toast[data-tipo="sucesso"] .i { color: var(--success-soft); }
  .toast[data-tipo="erro"] { background: var(--danger-strong); color: var(--surface); }
  .toast[data-tipo="conquista"] { border: 2px solid var(--accent); }
  .toast__acao { margin-left: auto; color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: .2em; }
  .toast__fechar { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-full); color: inherit; opacity: .8; }
  @keyframes toast-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
  @keyframes toast-sai { to { opacity: 0; transform: translateY(8px); } }

  .dica[role="tooltip"] { position: fixed; z-index: var(--z-tooltip); max-width: 260px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--text); color: var(--bg); font-size: var(--fs-xs); font-weight: 600; pointer-events: none; }

  .banner { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--gutter); font-size: var(--fs-sm); border-bottom: 1px solid var(--border); background: var(--info-soft); color: var(--text); }
  .banner .i { color: var(--info); flex: none; }
  .banner[data-tipo="atencao"] { background: var(--warning-soft); } .banner[data-tipo="atencao"] .i { color: var(--warning); }
  .banner[data-tipo="erro"] { background: var(--danger-soft); } .banner[data-tipo="erro"] .i { color: var(--danger); }
  .banner__acoes { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; }

  .aviso { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--info-soft); color: var(--text); border: 1px solid color-mix(in oklab, var(--info) 22%, transparent); font-size: var(--fs-sm); }
  .aviso > .i { color: var(--info); margin-top: 2px; }
  .aviso[data-tipo="sucesso"] { background: var(--success-soft); border-color: color-mix(in oklab, var(--success) 22%, transparent); } .aviso[data-tipo="sucesso"] > .i { color: var(--success); }
  .aviso[data-tipo="erro"] { background: var(--danger-soft); border-color: color-mix(in oklab, var(--danger) 22%, transparent); } .aviso[data-tipo="erro"] > .i { color: var(--danger); }
  .aviso[data-tipo="atencao"] { background: var(--warning-soft); border-color: color-mix(in oklab, var(--warning) 22%, transparent); } .aviso[data-tipo="atencao"] > .i { color: var(--warning); }

  /* =============================================================== ESQUELETO, VAZIO, ERRO (C §5.11, §5.12, §10) */
  .esqueleto { display: grid; gap: var(--sp-2); }
  .esqueleto__linha, .esqueleto__bloco { border-radius: var(--r-sm); background: var(--brilho-esqueleto); background-size: 300% 100%; animation: brilho 1.4s linear infinite; }
  .esqueleto__linha { height: 12px; }
  .esqueleto__linha:nth-child(3n+1) { width: 40%; } .esqueleto__linha:nth-child(3n+2) { width: 100%; } .esqueleto__linha:nth-child(3n) { width: 85%; }
  .esqueleto__bloco { height: 120px; border-radius: var(--r-lg); }
  @keyframes brilho { from { background-position: 100% 0; } to { background-position: 0 0; } }
  [aria-busy="true"]:not(.btn):not(.esqueleto) { opacity: .6; transition: opacity var(--dur-2) var(--ease-out); }

  .vazio { display: grid; justify-items: center; text-align: center; gap: var(--sp-3); max-width: 420px; margin: var(--sp-8) auto; }
  .vazio__ilustracao { width: 120px; height: 120px; color: var(--text-3); }
  @media (max-width: 767.98px) { .vazio__ilustracao { width: 80px; height: 80px; } }
  .vazio__titulo { font-size: var(--fs-lg); font-weight: 700; }
  .vazio__texto { color: var(--text-2); }
  .vazio__acoes { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-2); }
  .erro-bloco { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--danger-soft); color: var(--text); }
  .erro-bloco > .i { color: var(--danger); margin-top: 2px; }
  .erro-bloco__codigo { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-1); }
  .erro-bloco__acao { margin-top: var(--sp-2); }

  /* =============================================================== STAT, PROGRESSO, ANEL, COTA, AVATAR (C §5.13–§5.15, §5.21) */
  .stat { container-type: inline-size; display: grid; gap: var(--sp-1); }
  .stat__rotulo { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; display: flex; align-items: center; gap: var(--sp-2); }
  .stat__valor { font-size: var(--fs-num); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; display: flex; align-items: baseline; gap: var(--sp-2); }
  .stat__valor small { font-size: var(--fs-md); font-weight: 700; color: var(--text-2); letter-spacing: 0; }
  .stat__rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-3); flex-wrap: wrap; }
  .stat__delta-grupo { display: inline-flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
  .stat__delta { font-size: var(--fs-sm); font-weight: 700; display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--text-2); white-space: nowrap; }
  .stat__delta[data-tom="bom"] { color: var(--success); } .stat__delta[data-tom="ruim"] { color: var(--danger); }
  .stat__dica { font-size: var(--fs-xs); color: var(--text-3); }
  .stat__spark { color: var(--accent); }
  @container (max-width: 180px) { .stat__spark { display: none; } }

  .progresso { display: block; width: 100%; height: 6px; overflow: visible; }
  .progresso__trilha { fill: var(--surface-3); }
  .progresso__valor { fill: var(--accent); transition: width var(--dur-3) var(--ease-out); }
  .progresso[data-tom="success"] .progresso__valor { fill: var(--success); }
  .progresso[data-tom="warning"] .progresso__valor { fill: var(--warning); }
  .progresso[data-tom="danger"] .progresso__valor { fill: var(--danger); }
  .progresso-rotulado { display: grid; gap: var(--sp-2); }
  .progresso-rotulado__texto { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; }
  .segmentos { display: flex; gap: 2px; height: 6px; }
  .segmentos > span { flex: 1; border-radius: var(--r-full); background: var(--surface-3); }
  .segmentos > span[data-estado="acerto"] { background: var(--success); }
  .segmentos > span[data-estado="erro"] { background: var(--danger); }
  .segmentos > span[data-estado="pulada"] { background: repeating-linear-gradient(135deg, var(--border-strong) 0 3px, transparent 3px 6px); }
  .segmentos > span[data-estado="atual"] { background: var(--accent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ring); }

  .anel { display: block; }
  .anel__trilha { fill: none; stroke: var(--seq-0); }
  .anel__valor { fill: none; stroke: var(--accent); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset var(--dur-5) var(--ease-out); }
  .anel__centro { font-family: var(--font-ui); font-weight: 800; fill: var(--text); letter-spacing: -0.02em; }
  .anel__sub { font-family: var(--font-ui); font-weight: 600; fill: var(--text-2); }
  .anel[data-completo] .anel__valor { stroke: var(--success); }

  .cota { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border); }
  .cota__linha { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
  .cota__linha strong { color: var(--text); font-variant-numeric: tabular-nums; }
  .cota[data-nivel="alto"] .progresso__valor { fill: var(--warning); }
  .cota[data-nivel="esgotado"] .progresso__valor { fill: var(--danger); }
  .cota[data-nivel="esgotado"] .cota__linha strong { color: var(--danger); }

  .avatar {
    --av-bg: var(--av-1-bg); --av-fg: var(--av-1-fg); --av-t: 40px;
    display: inline-grid; place-items: center; width: var(--av-t); height: var(--av-t); flex: none; border-radius: var(--r-full);
    background: var(--av-bg); color: var(--av-fg); font-weight: 700; font-size: calc(var(--av-t) * .4); letter-spacing: -0.01em; overflow: hidden; user-select: none;
  }
  .avatar img { width: 100%; height: 100%; object-fit: cover; }
  .avatar[data-tamanho="24"] { --av-t: 24px; } .avatar[data-tamanho="32"] { --av-t: 32px; } .avatar[data-tamanho="36"] { --av-t: 36px; }
  .avatar[data-tamanho="56"] { --av-t: 56px; } .avatar[data-tamanho="96"] { --av-t: 96px; }
  .avatar[data-cor="2"] { --av-bg: var(--av-2-bg); --av-fg: var(--av-2-fg); } .avatar[data-cor="3"] { --av-bg: var(--av-3-bg); --av-fg: var(--av-3-fg); }
  .avatar[data-cor="4"] { --av-bg: var(--av-4-bg); --av-fg: var(--av-4-fg); } .avatar[data-cor="5"] { --av-bg: var(--av-5-bg); --av-fg: var(--av-5-fg); }
  .avatar[data-cor="6"] { --av-bg: var(--av-6-bg); --av-fg: var(--av-6-fg); } .avatar[data-cor="7"] { --av-bg: var(--av-7-bg); --av-fg: var(--av-7-fg); }
  .avatar[data-cor="8"] { --av-bg: var(--av-8-bg); --av-fg: var(--av-8-fg); }
  .avatar[data-voce] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

  /* Micrográficos SVG do servidor (C §5.19): cores por classe, servem a todos os temas. */
  .spark { display: block; overflow: visible; }
  .spark__linha { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .spark__area { fill: currentColor; opacity: .1; }
  .spark__ponto { fill: currentColor; stroke: var(--surface); stroke-width: 2; }
  .spark__media { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 3 4; }
  .mini-heatmap { display: block; max-width: 100%; }
  .mini-heatmap rect { rx: 2px; ry: 2px; }
  .q0 { fill: var(--seq-0); } .q1 { fill: var(--seq-1); } .q2 { fill: var(--seq-2); } .q3 { fill: var(--seq-3); } .q4 { fill: var(--seq-4); } .q5 { fill: var(--seq-5); }
  .barra-bala { display: block; width: 100%; height: 14px; }
  .barra-bala__trilha { fill: var(--surface-3); } .barra-bala__valor { fill: var(--accent); } .barra-bala__media { stroke: var(--text); stroke-width: 2; }
  .legenda-escala { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--text-3); }
  .legenda-escala i { width: 12px; height: 12px; border-radius: var(--r-xs); display: inline-block; }
  .legenda-escala i.q0 { background: var(--seq-0); } .legenda-escala i.q1 { background: var(--seq-1); } .legenda-escala i.q2 { background: var(--seq-2); }
  .legenda-escala i.q3 { background: var(--seq-3); } .legenda-escala i.q4 { background: var(--seq-4); } .legenda-escala i.q5 { background: var(--seq-5); }

  /* =============================================================== ALTERNATIVA (C §5.18) */
  /* li.alt = caixa visual (estado em data-*); div.alt__opcao = role="radio"; o botão de riscar fica ao lado (não aninhado). */
  .alts { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
  .alt {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-radius: var(--r-lg);
    border: 1px solid var(--border); background: var(--surface);
    transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  .alt__opcao { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); align-items: start; padding: var(--sp-3); border-radius: var(--r-lg); cursor: pointer; min-width: 0; outline: none; }
  .alt__opcao:focus-visible { outline: var(--foco-largura) solid var(--ring); outline-offset: 2px; }
  @supports selector(:has(*)) {
    .alt__opcao:focus-visible { outline: none; }
    .alt:has(> .alt__opcao:focus-visible) { outline: var(--foco-largura) solid var(--ring); outline-offset: 3px; }
  }
  @media (hover: hover) and (pointer: fine) { .alt:not([data-desabilitada]):hover { border-color: var(--accent-border); background: var(--surface-2); } }
  .alt .letra {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-full); border: 1.5px solid var(--border-strong);
    font-weight: 800; font-size: var(--fs-sm); color: var(--text-2); background: var(--surface); transition: all var(--dur-2) var(--ease-out);
  }
  .alt .txt { font-family: var(--font-read); font-size: var(--fs-read); line-height: 1.6; padding-top: var(--sp-px); min-width: 0; overflow-wrap: anywhere; text-align: justify; hyphens: auto; }
  .alt .riscar { opacity: 0; margin-right: var(--sp-2); }
  /* celular (M26, 23/09): o texto da alternativa ocupava ~60 % da caixa; menos respiro lateral e riscar colado à borda */
  @media (max-width: 559.98px) { .alt__opcao { gap: var(--sp-1) var(--sp-2); padding: var(--sp-3) var(--sp-1) var(--sp-3) var(--sp-3); } .alt .riscar { margin-right: 0; } }
  @media (hover: hover) and (pointer: fine) { .alt:hover .riscar, .alt:focus-within .riscar { opacity: 1; } }
  @media (pointer: coarse) { .alt .riscar { opacity: .7; } }
  .alt[data-desabilitada] .alt__opcao { cursor: default; }
  .alt[data-desabilitada] .riscar { display: none; }
  .alt[data-marcada="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
  .alt[data-marcada="true"] .letra { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: scale(1.06); }
  .alt[data-riscada="true"] .txt { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--text-3); }
  .alt[data-riscada="true"] .letra { opacity: .5; }
  .alt[data-riscada="true"] .riscar { opacity: 1; color: var(--accent-text); }
  .alt[data-estado="correta"] { border-color: var(--success); background: var(--success-soft); box-shadow: 0 0 0 1px var(--success) inset; }
  .alt[data-estado="correta"] .letra { background: var(--success); border-color: var(--success); color: var(--surface); }
  .alt[data-estado="errada"] { border-color: var(--danger); background: var(--danger-soft); box-shadow: 0 0 0 1px var(--danger) inset; }
  .alt[data-estado="errada"] .letra { background: var(--danger); border-color: var(--danger); color: var(--surface); }
  .alt[data-estado="gabarito"] { border-color: var(--success); background: var(--success-soft); }
  .alt[data-estado="gabarito"] .letra { border-color: var(--success); color: var(--success); }
  .alt .selo-alt { grid-column: 2; display: none; font-size: var(--fs-xs); font-weight: 800; }
  .alt[data-estado="correta"] .selo-alt, .alt[data-estado="errada"] .selo-alt, .alt[data-estado="gabarito"] .selo-alt { display: inline-flex; gap: var(--sp-1); align-items: center; }
  .alt[data-estado="correta"] .selo-alt, .alt[data-estado="gabarito"] .selo-alt { color: var(--success); }
  .alt[data-estado="errada"] .selo-alt { color: var(--danger); }
  .alt .pct { grid-column: 2; display: none; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
  .alts[data-respondida] .alt .pct { display: flex; }
  .alt .pct svg { flex: 1; height: 4px; max-width: 240px; }
  .alt .pct .pct__trilha { fill: var(--surface-3); } .alt .pct .pct__valor { fill: var(--text-3); }
  .alt[data-estado="correta"] .pct__valor, .alt[data-estado="gabarito"] .pct__valor { fill: var(--success); }
  .alts--ce { grid-template-columns: 1fr 1fr; }

  /* =============================================================== BLOQUEIO GENTIL (C §5.21) */
  .bloqueio { display: grid; gap: var(--sp-3); padding: var(--sp-6); border-radius: var(--r-xl); background: radial-gradient(120% 100% at 100% 0%, var(--accent-soft), transparent 60%), var(--surface); border: 1px solid var(--accent-border); }
  .bloqueio__icone { width: 48px; height: 48px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
  .bloqueio__titulo { font-size: var(--fs-lg); font-weight: 800; }
  .bloqueio__texto { color: var(--text-2); }
  .bloqueio__beneficios { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
  .bloqueio__beneficios li { display: flex; gap: var(--sp-2); }
  .bloqueio__beneficios .i { color: var(--success); width: 18px; height: 18px; flex: none; }
  .bloqueio__preco { font-size: var(--fs-sm); color: var(--text-3); }
  .bloqueio__acoes { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

  /* =============================================================== GRÁFICO, TABELA, STEPPER, PAGINAÇÃO (C §5.19, §5.28, §5.29) */
  .grafico { container-type: inline-size; display: grid; gap: var(--sp-3); margin: 0; }
  .grafico figcaption h3 { font-size: var(--fs-md); }
  .grafico figcaption p { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--sp-1); }
  .grafico__area { width: 100%; height: 240px; }
  @media (min-width: 768px) { .grafico__area { height: 300px; } }
  @media (min-width: 1600px) { .grafico__area { height: 340px; } }
  .grafico__tabela summary { font-size: var(--fs-sm); color: var(--accent-text); font-weight: 700; min-height: var(--alvo-min); display: inline-flex; align-items: center; }
  .tabela-envolve { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
  .tabela-envolve:focus-visible { outline: var(--foco-largura) solid var(--ring); outline-offset: 2px; }
  .tabela { width: 100%; font-size: var(--fs-sm); }
  .tabela th { position: sticky; top: 0; background: var(--surface); text-align: left; font-weight: 700; color: var(--text-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); white-space: nowrap; }
  .tabela td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); height: 44px; }
  .tabela tbody tr:nth-child(even) td { background: color-mix(in oklab, var(--surface-2) 60%, transparent); }
  .tabela tbody tr:hover td { background: var(--surface-2); }
  .tabela td.num, .tabela th.num { text-align: right; }
  .tabela th button { display: inline-flex; gap: var(--sp-1); align-items: center; font-weight: 700; color: inherit; }
  @media (max-width: 767.98px) {
    .tabela[data-cartoes] thead { display: none; }
    .tabela[data-cartoes] tr { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
    .tabela[data-cartoes] td { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 0; border: 0; height: auto; }
    .tabela[data-cartoes] td::before { content: attr(data-rotulo); color: var(--text-3); font-weight: 600; }
    .tabela[data-cartoes] tbody tr:nth-child(even) td { background: none; }
  }
  .stepper { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
  @media (max-width: 767.98px) { .stepper__passo:not([data-estado="atual"]) > span:last-child { display: none; } .stepper__passo:not(:last-child)::after { width: 12px; } }
  .stepper__passo { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-3); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }
  .stepper__passo:not(:last-child)::after { content: ""; width: 32px; height: 2px; background: var(--border-strong); border-radius: var(--r-full); margin-left: var(--sp-2); }
  .stepper__num { width: 28px; height: 28px; border-radius: var(--r-full); display: grid; place-items: center; border: 2px solid var(--border-strong); font-size: var(--fs-xs); font-weight: 800; }
  .stepper__passo[data-estado="atual"] { color: var(--text); }
  .stepper__passo[data-estado="atual"] .stepper__num { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
  .stepper__passo[data-estado="feito"] .stepper__num { border-color: var(--accent); color: var(--accent-text); }
  .stepper__passo[data-estado="feito"]::after { background: var(--accent); }
  .paginacao { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: var(--sp-4); }
  .paginacao__info { font-size: var(--fs-sm); color: var(--text-3); }

  /* =============================================================== CARROSSEL (Revisão 2 do M02) e CARTÃO COM CAPA */
  .carrossel { position: relative; display: grid; gap: var(--sp-3); }
  .carrossel__cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
  .carrossel__cabeca > .linha { flex-wrap: nowrap; flex: none; }
  .carrossel__titulo { min-width: 0; }
  .carrossel__titulo { font-size: var(--fs-md); font-weight: 800; display: flex; align-items: center; gap: var(--sp-2); }
  .carrossel__setas { display: none; gap: var(--sp-2); }
  @media (hover: hover) and (pointer: fine) { .carrossel__setas { display: flex; } }
  .carrossel__seta[disabled] { opacity: .35; }
  .carrossel__trilho {
    display: grid; grid-auto-flow: column; grid-auto-columns: var(--carrossel-item, 220px); gap: var(--sp-4);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    padding: var(--sp-2) var(--gutter) var(--sp-4); margin-inline: calc(var(--gutter) * -1);
    list-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .carrossel__trilho::-webkit-scrollbar { display: none; }
  .carrossel__trilho[data-arrastando] { scroll-snap-type: none; cursor: grabbing; user-select: none; }
  .carrossel__trilho[data-arrastando] * { pointer-events: none; }
  .carrossel__item { scroll-snap-align: start; min-width: 0; }
  .carrossel[data-bordas] .carrossel__trilho { mask-image: linear-gradient(90deg, transparent 0, var(--text) var(--gutter), var(--text) calc(100% - var(--sp-10)), transparent); }
  .carrossel__pontos { display: flex; justify-content: center; gap: var(--sp-2); }
  .carrossel__ponto { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--border-strong); opacity: .5; transition: width var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out); }
  .carrossel__ponto[aria-current="true"] { width: 22px; opacity: 1; background: var(--accent); }
  @media (min-width: 768px) { .carrossel { --carrossel-item: 236px; } }
  @media (min-width: 1280px) { .carrossel { --carrossel-item: 248px; } }
  /* RD 23/09: título numa linha só; abaixo de 600 px sem setas (há deslize por toque) e "Ver todos" curto, sem a seta. */
  .carrossel__titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .carrossel__titulo > svg { flex: none; }
  .carrossel__acao--curta { display: none; }
  @media (max-width: 599.98px) {
    .carrossel .carrossel__setas { display: none; }
    .carrossel__acao > svg { display: none; }
    .carrossel__acao--longa { display: none; }
    .carrossel__acao--curta { display: inline-flex; }
  }
  /* Tudo cabe (carrossel.js → data-sem-rolagem): sem setas nem pontos, cartões um pouco maiores e centralizados. */
  .carrossel[data-sem-rolagem] .carrossel__setas, .carrossel[data-sem-rolagem] .carrossel__pontos { display: none; }
  .carrossel[data-sem-rolagem] .carrossel__trilho {
    grid-auto-columns: minmax(var(--carrossel-item, 220px), calc(var(--carrossel-item, 220px) * 1.35));
    justify-content: center; scroll-snap-type: none; mask-image: none;
  }

  .cartao-capa {
    display: grid; grid-template-rows: auto 1fr; height: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--surface);
    border: 1px solid var(--border); box-shadow: var(--sh-1); color: var(--text); text-decoration: none;
    transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-2) var(--ease-out);
  }
  .cartao-capa:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--accent-border); }
  .cartao-capa:focus-visible { outline-offset: 3px; }
  .cartao-capa__capa { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-3); }
  .cartao-capa__capa > img, .cartao-capa__capa > svg { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out); }
  .cartao-capa:hover .cartao-capa__capa > img, .cartao-capa:hover .cartao-capa__capa > svg { transform: scale(1.04); }
  .cartao-capa__selo { margin-bottom: var(--sp-1); }
  .cartao-capa__corpo { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-3) var(--sp-3); align-content: start; }
  .cartao-capa__titulo { font-weight: 800; font-size: var(--fs-base); line-height: 1.25; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cartao-capa__meta { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }

  /* =============================================================== PALETA DE COMANDOS (C §5.26) */
  dialog.paleta { width: min(100% - 2 * var(--gutter), 640px); margin: 12vh auto auto; border-radius: var(--r-xl); border: 1px solid var(--border); overflow: hidden; }
  dialog.paleta:not([open]) { display: none; }
  dialog.paleta[open] { animation: dialogo-entra var(--dur-2) var(--ease-out); }
  .paleta__campo { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); border-bottom: 1px solid var(--border); }
  .paleta__campo input { flex: 1; min-height: 60px; border: 0; background: none; font-size: var(--fs-md); color: var(--text); outline: none; }
  .paleta__lista { max-height: min(60vh, 460px); overflow-y: auto; padding: var(--sp-2); }
  .paleta__grupo { padding: var(--sp-3) var(--sp-3) var(--sp-1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
  .paleta__item { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--alvo-min); padding: 0 var(--sp-3); border-radius: var(--r-md); cursor: pointer; color: var(--text); font-weight: 600; }
  .paleta__item .i { color: var(--text-3); }
  .paleta__item[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-text); }
  .paleta__item[aria-selected="true"] .i { color: var(--accent-text); }
  .paleta__rodape { display: flex; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-3); }
  @media (max-width: 767.98px) { dialog.paleta { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; } .paleta__lista { max-height: none; } }

  /* =============================================================== PÁGINAS DE ERRO E ILUSTRAÇÕES */
  .ilustracao { color: var(--text-3); }
  .ilustracao .destaque { fill: var(--accent-soft-2); stroke: var(--accent); }
  .pagina-erro { display: grid; place-items: center; min-height: 60vh; text-align: center; padding: var(--sp-12) var(--gutter); }
  .pagina-erro__caixa { display: grid; gap: var(--sp-4); justify-items: center; max-width: 520px; }
  .pagina-erro__codigo { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; color: var(--accent-text); text-transform: uppercase; }
  .pagina-erro__titulo { font-size: var(--fs-2xl); }
  .pagina-erro__texto { color: var(--text-2); }
  .pagina-erro__suporte { font-size: var(--fs-sm); color: var(--text-3); }
}

/* =============================================================== CELULAR COM CARA DE APP (24/09, iPhone do Roger)
   Alvos de 48 px vêm do token --alvo-min; aqui ficam forma, largura e encaixe dos componentes abaixo de 600/768 px. */
@layer components {
  /* Rótulos que não quebram nunca encolhem: em linha sem quebra (chips que rolam, faixa, cabeçalhos) o flex os espremia
     abaixo do texto e ele vazava da borda. */
  .chip, .tag, .selo, .pilula-plano, .faixa-plano__acao, .abas__aba, .btn-link { flex-shrink: 0; }
  /* Campo numérico sem as setinhas do navegador (no toque viram dois alvos minúsculos; o teclado numérico resolve). */
  input[type="number"].campo__controle { -moz-appearance: textfield; appearance: textfield; }
  input[type="number"].campo__controle::-webkit-inner-spin-button, input[type="number"].campo__controle::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  @media (max-width: 767.98px) {
    .btn { border-radius: var(--r-lg); }
    .btn[data-tamanho="sm"] { border-radius: var(--r-md); }
    .btn[data-tamanho="lg"] { --btn-h: 52px; font-size: var(--fs-md); }
    .seg > button, .seg > a { min-height: var(--alvo-min); min-width: var(--alvo-min); justify-content: center; }
    .chip { min-height: 44px; padding-inline: var(--sp-4); }
    .menu-suspenso__plano .btn-link { flex: none; white-space: nowrap; }
    /* Menu da conta: folha presa às bordas da tela (8 px), rolável entre o cabeçalho e a navegação inferior. */
    .cabecalho .conta .menu-suspenso {
      right: calc(var(--sp-2) - var(--gutter)); width: calc(100vw - 2 * var(--sp-2)); min-width: 0;
      max-height: calc(100dvh - var(--topbar) - var(--bottomnav) - var(--sp-6)); overflow-y: auto; overscroll-behavior: contain;
      border-radius: var(--r-xl);
    }
    .cartao { border-radius: var(--r-lg); }
    .abas__aba { padding-inline: var(--sp-3); }
  }
  @media (max-width: 599.98px) {
    /* Grupos de ações: os botões dividem a linha por igual e, sozinhos, ocupam a largura toda (padrão dos apps). */
    .linha > .btn:not(.btn-link), .vazio__acoes > .btn, .cartao-acao__acoes > .btn:not(.btn-link), .cartao__rodape > .btn:not(.btn-link),
    .bloqueio__acoes > .btn, .dialogo__rodape > .btn, .pagina-erro__caixa .linha > .btn,
    [class*="__rodape"] > .btn:not(.btn-link), [class*="__acoes"] > .btn:not(.btn-link) { flex: 1 1 auto; }
    .vazio__acoes, .bloqueio__acoes { width: 100%; }
    /* Segmentado ocupa a linha e as opções dividem o espaço (as que não cabem continuam rolando). */
    .seg { display: flex; width: 100%; }
    .seg > button, .seg > a { flex: 1 0 auto; justify-content: center; }
    .vazio__acoes { flex-direction: column; }
    .pagina-erro__caixa { width: 100%; }
    .pagina-erro__caixa > .linha, .pagina-erro__caixa > .vazio__acoes { width: 100%; flex-direction: column; }
    .pagina-erro__caixa .btn { width: 100%; }
    /* Cartão de ação (Próxima ação): ícone pequeno ao lado do título em vez de uma coluna inteira; botão na largura toda. */
    .cartao-acao { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); }
    .cartao-acao__icone { width: 44px; height: 44px; border-radius: var(--r-md); align-self: start; }
    .cartao-acao__icone .i { width: 22px; height: 22px; }
    .cartao-acao__acoes > .btn:not(.btn-link) { width: 100%; }
  }
  /* Alternativa no celular: o botão de riscar ia no meio da altura e comia uma coluna de 48 px; agora fica no canto
     superior, mais estreito (alvo de 36 × 48 px), e o texto ganha a largura. */
  @media (max-width: 559.98px) {
    .alt { grid-template-columns: minmax(0, 1fr) 36px; align-items: start; }
    .alt .riscar { width: 36px; height: var(--alvo-min); border-radius: var(--r-md); margin: var(--sp-1) 0 0; }
    .alt__opcao { gap: var(--sp-1) var(--sp-2); padding: var(--sp-3) 0 var(--sp-3) var(--sp-3); }
    .alt .letra { width: 30px; height: 30px; }
  }
}

@layer components {
  .menu-suspenso__item--so-compacto { display: none; }
  @media (max-width: 1279.98px) { .menu-suspenso__item--so-compacto { display: flex; } }
  .lista-atalhos { display: grid; gap: var(--sp-2); }
  .lista-atalhos dt { color: var(--text-2); }
  .lista-atalhos dd { margin: 0; display: inline-flex; gap: var(--sp-1); }
  .seg .i { width: 18px; height: 18px; }
}

/* Retorno imediato do toque (velocidade no celular, 24/09): barra fina de progresso no topo em toda navegação, envio de
   formulário e requisição htmx/fetch disparada pelo usuário (app.js, "retorno do toque"); sem atraso de toque duplo.
   Com menos movimento a barra aparece parada (as animações viram .001ms em modos.css). */
@layer components {
  html { touch-action: manipulation; }
  .barra-progresso {
    position: fixed; inset: 0 0 auto 0; height: 3px; z-index: calc(var(--z-tooltip) + 1); pointer-events: none;
    background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 60%, var(--bg)));
    box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 55%, transparent);
    transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
  }
  .barra-progresso[data-estado="ativa"] { opacity: 1; animation: barra-avanca 12s cubic-bezier(.08, .7, .2, 1) forwards; }
  .barra-progresso[data-estado="fim"] { opacity: 0; transform: scaleX(1); transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-2) var(--ease-out) var(--dur-1); }
  @keyframes barra-avanca { 0% { transform: scaleX(.08); } 8% { transform: scaleX(.35); } 30% { transform: scaleX(.6); } 100% { transform: scaleX(.92); } }
  @media (prefers-reduced-motion: reduce) { .barra-progresso[data-estado="ativa"] { animation: none; transform: scaleX(.6); } }
  :root[data-movimento="reduzido"] .barra-progresso[data-estado="ativa"] { animation: none; transform: scaleX(.6); }
  /* Link ou botão tocado que abriu uma navegação: esmaece de leve até a página nova chegar. */
  a[data-ocupado]:not(.btn) { opacity: .6; transition: opacity var(--dur-1) var(--ease-out); }
}