/* Gabarita · componentes.css — origem: referencia-visual/componentes.css (COMPONENTES), sem a questão (questao.css).
   No fim: componentes da casca do site (topo, menus, faixas, logo, página de erro…). */
@layer componentes {

  /* ---------------------------------------------------------------------------
     BOTÃO  .botao  --primario | --secundario | --fantasma | --perigo | --acerto | --erro
            --sm | --lg | --bloco | --icone     .is-carregando   :disabled
     O primário é o "botão carimbo": marca-texto, contorno de tinta e sombra
     dura que some quando o dedo aperta. UM por tela.
     --------------------------------------------------------------------------- */
  .botao {
    --botao-fundo: var(--superficie);
    --botao-fundo-hover: var(--papel);
    --botao-texto: var(--texto);
    --botao-borda: var(--linha-forte);
    --botao-sombra: var(--linha-forte);
    --botao-prof: 3px;
    --botao-altura: var(--alvo-confortavel);

    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
    min-height: var(--botao-altura);
    min-width: var(--botao-altura);
    padding: 0 var(--esp-5);
    border: var(--borda-grossa) solid var(--botao-borda);
    border-radius: var(--raio-md);
    background: var(--botao-fundo);
    color: var(--botao-texto);
    box-shadow: 0 var(--botao-prof) 0 0 var(--botao-sombra);
    font-family: var(--fonte-ui);
    font-size: var(--texto-md);
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    translate: 0 0;
    transition:
      translate var(--dur-instante) var(--ease-padrao),
      box-shadow var(--dur-instante) var(--ease-padrao),
      background-color var(--dur-rapida) var(--ease-padrao),
      border-color var(--dur-rapida) var(--ease-padrao),
      color var(--dur-rapida) var(--ease-padrao);
  }
  .botao .icone { width: 1.25rem; height: 1.25rem; stroke-width: 2.4; }

  @media (hover: hover) {
    .botao:hover { background: var(--botao-fundo-hover); translate: 0 -1px; box-shadow: 0 calc(var(--botao-prof) + 1px) 0 0 var(--botao-sombra); }
  }
  .botao:active { translate: 0 var(--botao-prof); box-shadow: 0 0 0 0 var(--botao-sombra); transition-duration: 40ms; }
  .botao:focus-visible { outline-offset: 4px; }

  .botao--primario {
    --botao-fundo: var(--marca-500);
    --botao-fundo-hover: var(--marca-600);
    --botao-texto: var(--tinta-900);
    --botao-borda: var(--tinta-900);
    --botao-sombra: var(--tinta-900);
    --botao-prof: 4px;
    border-width: var(--borda-carimbo);
    font-weight: 800;
    letter-spacing: 0.005em;
  }
  .botao--secundario {
    --botao-borda: var(--tinta-900);
    --botao-sombra: var(--tinta-900);
    --botao-prof: 3px;
  }
  .botao--fantasma {
    --botao-fundo: transparent;
    --botao-fundo-hover: var(--papel-fundo);
    --botao-texto: var(--tinta-700);
    --botao-borda: transparent;
    --botao-sombra: transparent;
    --botao-prof: 0px;
  }
  .botao--fantasma:active { scale: 0.96; }
  .botao--perigo {
    --botao-fundo: var(--erro-700);
    --botao-fundo-hover: #961A23;
    --botao-texto: #fff;
    --botao-borda: var(--tinta-900);
    --botao-sombra: var(--tinta-900);
    --botao-prof: 3px;
  }
  .botao--acerto {
    --botao-fundo: var(--acerto-500);
    --botao-fundo-hover: #1A9A51;
    --botao-texto: var(--tinta-900);
    --botao-borda: var(--tinta-900);
    --botao-sombra: var(--tinta-900);
    --botao-prof: 4px;
    border-width: var(--borda-carimbo);
    font-weight: 800;
  }
  .botao--erro {
    --botao-fundo: var(--erro-700);
    --botao-fundo-hover: #961A23;
    --botao-texto: #fff;
    --botao-borda: var(--tinta-900);
    --botao-sombra: var(--tinta-900);
    --botao-prof: 4px;
    border-width: var(--borda-carimbo);
    font-weight: 800;
  }

  .botao--sm { --botao-altura: 36px; --botao-prof: 2px; padding-inline: var(--esp-3); font-size: var(--texto-sm); border-radius: var(--raio-sm); gap: var(--esp-1-5); }
  .botao--sm .icone { width: 1rem; height: 1rem; }
  .botao--sm::after { content: ""; position: absolute; inset: -5px; } /* alvo de toque ≥ 44px */
  .botao--lg { --botao-altura: 60px; padding-inline: var(--esp-8); font-size: var(--texto-lg); border-radius: var(--raio-lg); }
  .botao--bloco { display: flex; width: 100%; }
  .botao--icone { padding: 0; width: var(--botao-altura); }

  .botao:disabled, .botao[aria-disabled="true"] {
    --botao-fundo: var(--papel-fundo);
    --botao-fundo-hover: var(--papel-fundo);
    --botao-texto: var(--tinta-400);
    --botao-borda: var(--linha-forte);
    --botao-sombra: var(--linha-forte);
    cursor: not-allowed;
    translate: 0 0;
  }

  .botao.is-carregando { color: transparent; pointer-events: none; }
  .botao.is-carregando::before {
    content: "";
    position: absolute; inset: 0; margin: auto;
    width: 1.25rem; height: 1.25rem;
    border-radius: 50%;
    border: 2.5px solid var(--botao-texto);
    border-right-color: transparent;
    animation: girar 700ms linear infinite;
  }


  /* ---------------------------------------------------------------------------
     CAMPO  .campo > .campo__rotulo + .controle + .campo__ajuda | .campo__erro
     --------------------------------------------------------------------------- */
  .campo { display: grid; gap: var(--esp-1-5); min-width: 0; }
  .campo__rotulo { font-size: var(--texto-sm); font-weight: 700; color: var(--texto); }
  .campo__opcional { font-weight: 500; color: var(--texto-suave); }
  .campo__ajuda { font-size: var(--texto-sm); color: var(--texto-suave); }
  .campo__erro {
    display: flex; align-items: center; gap: var(--esp-1-5);
    font-size: var(--texto-sm); font-weight: 700; color: var(--erro-700);
  }
  .campo__erro .icone { width: 1rem; height: 1rem; stroke-width: 2.4; }

  .controle {
    width: 100%;
    min-height: var(--alvo-confortavel);
    padding: 0 var(--esp-4);
    border: var(--borda-grossa) solid var(--borda-campo);
    border-radius: var(--raio-md);
    background: var(--superficie-alta);
    color: var(--texto);
    font-size: max(16px, var(--texto-md)); /* 16px evita zoom automático no iOS */
    transition: border-color var(--dur-rapida) var(--ease-padrao), box-shadow var(--dur-media) var(--ease-saida), background-color var(--dur-rapida);
  }
  .controle::placeholder { color: var(--texto-fraco); opacity: 1; }
  @media (hover: hover) { .controle:hover { border-color: var(--tinta-700); } }
  .controle:focus-visible, .controle:focus {
    outline: none;
    border-color: var(--tinta-900);
    box-shadow: 0 0 0 4px var(--marca-300);
  }
  .controle[aria-invalid="true"] { border-color: var(--erro-500); background: var(--erro-50); }
  .controle[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--erro-100); }
  .controle:disabled { background: var(--papel-fundo); border-color: var(--linha-forte); color: var(--texto-suave); cursor: not-allowed; }

  textarea.controle { min-height: 7.5rem; padding: var(--esp-3) var(--esp-4); line-height: var(--altura-ui); resize: vertical; }
  select.controle {
    appearance: none;
    padding-right: var(--esp-10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1A3D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    cursor: pointer;
  }

  .campo-icone { position: relative; }
  .campo-icone > .icone { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--texto-suave); pointer-events: none; width: 1.25rem; height: 1.25rem; }
  .campo-icone > .controle { padding-left: 46px; }
  .campo-icone > .botao--icone { position: absolute; right: 4px; top: 50%; translate: 0 -50%; --botao-altura: 44px; }

  /* código de turma: 6 caracteres grandes e espaçados */
  .controle--codigo {
    font-family: var(--fonte-mono);
    font-size: var(--texto-xl);
    font-weight: 700;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    text-align: center;
  }

  /* caixa de seleção */
  .marcador {
    appearance: none;
    flex: none;
    display: inline-grid; place-items: center;
    width: 24px; height: 24px; margin: 0;
    border: var(--borda-grossa) solid var(--borda-campo);
    border-radius: 7px;
    background: var(--superficie-alta);
    cursor: pointer;
    transition: background-color var(--dur-rapida), border-color var(--dur-rapida);
  }
  .marcador::after {
    content: "";
    width: 14px; height: 14px;
    background: var(--marca-300);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    scale: 0;
    transition: scale var(--dur-media) var(--mola-quique);
  }
  .marcador:checked { background: var(--tinta-900); border-color: var(--tinta-900); }
  .marcador:checked::after { scale: 1; }
  .opcao { display: flex; align-items: center; gap: var(--esp-3); min-height: var(--alvo-toque); cursor: pointer; font-weight: 500; }

  /* interruptor (som, reduzir movimento, atalhos) */
  .interruptor {
    appearance: none;
    flex: none;
    position: relative;
    width: 52px; height: 32px; margin: 0;
    border-radius: var(--raio-pilula);
    background: var(--tinta-300);
    cursor: pointer;
    transition: background-color var(--dur-media) var(--ease-padrao);
  }
  .interruptor::after {
    content: "";
    position: absolute; top: 4px; left: 4px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 4px rgb(29 26 61 / 0.25);
    transition: translate var(--dur-mola) var(--mola-quique), background-color var(--dur-rapida);
  }
  .interruptor:checked { background: var(--tinta-900); }
  .interruptor:checked::after { translate: 20px 0; background: var(--marca-500); }
  .ajuste { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); min-height: 56px; }
  .ajuste__texto { display: grid; }
  .ajuste__titulo { font-weight: 700; }
  .ajuste__descricao { font-size: var(--texto-sm); color: var(--texto-suave); }


  /* ---------------------------------------------------------------------------
     CHIP  .chip [aria-pressed] (filtro liga/desliga)  [role=radio][aria-checked]  a.chip[aria-current] (link)  .chip[data-cor]
     .chips  .chips--rolagem (uma linha que rola no celular)
     --------------------------------------------------------------------------- */
  .chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
  .chips--rolagem {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-block: 6px;
    margin-inline: calc(var(--esp-pagina) * -1);
    padding-inline: var(--esp-pagina);
    mask-image: linear-gradient(90deg, transparent, #000 var(--esp-pagina), #000 calc(100% - var(--esp-8)), transparent);
  }
  .chips--rolagem::-webkit-scrollbar { display: none; }
  .chips--rolagem > * { scroll-snap-align: start; }

  .chip:not([data-cor]) { --c-500: var(--tinta-900); --c-100: var(--tinta-900); --c-700: #FFFDF9; }
  .chip {
    position: relative;
    display: inline-flex; align-items: center; gap: var(--esp-1-5);
    min-height: 40px;
    padding: 0 var(--esp-4);
    border: var(--borda-grossa) solid var(--linha-forte);
    border-radius: var(--raio-pilula);
    background: var(--superficie);
    color: var(--tinta-700);
    font-size: var(--texto-sm);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-rapida), border-color var(--dur-rapida), color var(--dur-rapida), scale var(--dur-media) var(--mola-quique);
  }
  .chip::after { content: ""; position: absolute; inset: -3px 0; } /* alvo ≥ 44px */
  .chip .icone { width: 1.125rem; height: 1.125rem; }
  .chip__check { width: 0 !important; opacity: 0; margin-right: -6px; transition: width var(--dur-media) var(--mola-suave), opacity var(--dur-rapida), margin var(--dur-media) var(--mola-suave); }
  @media (hover: hover) { .chip:hover { border-color: var(--tinta-400); } }
  .chip:active { scale: 0.95; }
  .chip[aria-pressed="true"], .chip[role="radio"][aria-checked="true"], a.chip[aria-current="true"], .chip:has(input:checked) {
    background: var(--c-100);
    border-color: var(--c-500);
    color: var(--c-700);
  }
  .chip[aria-pressed="true"] .chip__check, a.chip[aria-current="true"] .chip__check, .chip:has(input:checked) .chip__check { width: 1.125rem !important; opacity: 1; margin-right: 0; }
  .chip__contagem { font-weight: 600; opacity: 0.75; font-variant-numeric: tabular-nums; }
  /* chip colorido: c-700 sobre c-100 com 0.75 ficava em 3,54:1 (D-57) */
  .chip[data-cor] .chip__contagem { opacity: 1; }
  .chip input { position: absolute; opacity: 0; pointer-events: none; }
  .chip:has(input:focus-visible) { outline: 3px solid var(--foco-anel); outline-offset: 3px; }


  /* ---------------------------------------------------------------------------
     ETIQUETA (rótulo passivo, não clicável)  .etiqueta [data-cor]  --neutra  --contorno
     CONTADOR (bolinha numérica do sino)       .contador
     --------------------------------------------------------------------------- */
  .etiqueta {
    display: inline-flex; align-items: center; gap: 5px;
    min-height: 24px;
    padding: 0 var(--esp-2);
    border-radius: var(--raio-xs);
    background: var(--c-100);
    color: var(--c-700);
    font-size: var(--texto-xs);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
  }
  .etiqueta .icone { width: 0.875rem; height: 0.875rem; stroke-width: 2.6; }
  .etiqueta--neutra { background: var(--papel-fundo); color: var(--tinta-700); }
  .etiqueta--contorno { background: transparent; box-shadow: inset 0 0 0 1.5px var(--linha-forte); color: var(--tinta-700); }
  .etiqueta--acerto { background: var(--acerto-100); color: var(--acerto-700); }
  .etiqueta--erro { background: var(--erro-100); color: var(--erro-700); }
  .etiqueta--atencao { background: var(--atencao-100); color: var(--atencao-700); }
  .etiqueta--info { background: var(--info-100); color: var(--info-700); }

  .procedencia { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--texto-xs); color: var(--texto-suave); font-weight: 600; }
  .procedencia__sigla { color: var(--texto); font-weight: 800; letter-spacing: 0.02em; }
  .procedencia__sep { color: var(--tinta-300); }

  .contador {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    border-radius: var(--raio-pilula);
    /* erro-700, não erro-500: branco sobre erro-500 dá 3,91:1; sobre erro-700, 6,7:1 (D-57) */
    background: var(--erro-700);
    color: #fff;
    box-shadow: 0 0 0 2px var(--superficie);
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }


  /* ---------------------------------------------------------------------------
     CARTÃO  .cartao  --interativo  --plano   (+ .cartao__titulo, __meta, __acoes)
     --------------------------------------------------------------------------- */
  .cartao {
    position: relative;
    display: block;
    padding: var(--esp-5);
    border: var(--borda) solid var(--linha);
    border-radius: var(--raio-lg);
    background: var(--superficie);
    box-shadow: var(--sombra-1);
    color: inherit;
    text-decoration: none;
  }
  .cartao--plano { box-shadow: none; background: var(--papel); }
  .cartao--interativo {
    cursor: pointer;
    transition: translate var(--dur-media) var(--mola-suave), box-shadow var(--dur-media) var(--ease-saida), border-color var(--dur-rapida);
  }
  @media (hover: hover) {
    .cartao--interativo:hover { translate: 0 -3px; box-shadow: var(--sombra-2), var(--sombra-cor); border-color: var(--c-100); }
  }
  .cartao--interativo:active { translate: 0 0; scale: 0.985; transition-duration: var(--dur-instante); }
  .cartao__titulo { font-family: var(--fonte-display); font-size: var(--texto-lg); font-weight: 700; line-height: var(--altura-titulo); letter-spacing: -0.015em; }
  .cartao__meta { font-size: var(--texto-sm); color: var(--texto-suave); }
  .cartao__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-4); }

  /* item de lista clicável (atividades, notificações, simulados recentes) */
  .item-lista {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--esp-3);
    min-height: 64px;
    padding: var(--esp-3);
    border-radius: var(--raio-lg);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--dur-rapida);
  }
  @media (hover: hover) { .item-lista:hover { background: var(--papel); } }
  .item-lista__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--raio-md); background: var(--c-100); color: var(--c-700); }
  .item-lista__titulo { font-weight: 700; line-height: 1.25; }
  .item-lista__meta { font-size: var(--texto-sm); color: var(--texto-suave); }
  .item-lista > .icone:last-child { color: var(--tinta-400); }

  /* ---------------------------------------------------------------------------
     CARTÃO DE MATÉRIA  .cartao-materia[data-cor]
     --------------------------------------------------------------------------- */
  .cartao-materia {
    container-type: inline-size;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: var(--esp-3);
    padding: var(--esp-4);
    border: var(--borda-grossa) solid var(--c-100);
    border-radius: var(--raio-xl);
    background: var(--c-50);
    color: var(--texto);
    text-decoration: none;
    transition: translate var(--dur-media) var(--mola-suave), box-shadow var(--dur-media) var(--ease-saida), border-color var(--dur-rapida);
  }
  .cartao-materia::after {
    content: "";
    position: absolute; z-index: -1;
    right: -28px; bottom: -36px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: var(--c-100);
    transition: scale var(--dur-lenta) var(--mola-suave);
  }
  .cartao-materia__icone {
    display: grid; place-items: center;
    width: 52px; height: 52px;
    border-radius: 18px;
    background: var(--c-500);
    color: #fff;
    rotate: -6deg;
    box-shadow: 0 6px 14px -6px var(--c-500);
    transition: rotate var(--dur-mola) var(--mola-quique), scale var(--dur-mola) var(--mola-quique);
    --icone-tom: rgb(255 255 255 / 0.28);
  }
  .cartao-materia__icone .icone { width: 28px; height: 28px; stroke-width: 2.2; }
  .cartao-materia__nome { font-family: var(--fonte-display); font-weight: 800; font-size: var(--texto-lg); line-height: 1.15; letter-spacing: -0.02em; }
  .cartao-materia__meta { font-size: var(--texto-sm); font-weight: 700; color: var(--c-700); }
  .cartao-materia .progresso { background: #fff; }
  @media (hover: hover) {
    .cartao-materia:hover { translate: 0 -3px; border-color: var(--c-500); box-shadow: var(--sombra-cor); }
    .cartao-materia:hover .cartao-materia__icone { rotate: 6deg; scale: 1.06; }
    .cartao-materia:hover::after { scale: 1.25; }
  }
  .cartao-materia:active { translate: 0 0; scale: 0.98; }
  @container (min-width: 20rem) {
    .cartao-materia__corpo { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--esp-3); }
  }

  /* ---------------------------------------------------------------------------
     CARTÃO "CONTINUAR"  .cartao-continuar[data-cor]  — o destaque da tela inicial
     --------------------------------------------------------------------------- */
  .cartao-continuar {
    container-type: inline-size;
    position: relative;
    display: grid;
    gap: var(--esp-4);
    padding: var(--esp-5);
    padding-top: var(--esp-6);
    border: var(--borda-carimbo) solid var(--tinta-900);
    border-radius: var(--raio-xl);
    background:
      radial-gradient(circle at 100% 0, var(--c-100) 0 90px, transparent 91px),
      var(--superficie);
    box-shadow: 0 6px 0 0 var(--tinta-900);
  }
  .cartao-continuar__adesivo {
    position: absolute; top: -14px; left: var(--esp-5);
    padding: 4px 12px;
    border: 2px solid var(--tinta-900);
    border-radius: var(--raio-pilula);
    background: var(--marca-500);
    font-size: var(--texto-xs);
    font-weight: 800;
    letter-spacing: 0.02em;
    rotate: -3deg;
  }
  .cartao-continuar__topo { display: grid; grid-template-columns: auto 1fr; gap: var(--esp-3); align-items: center; }
  .cartao-continuar__titulo { font-family: var(--fonte-display); font-weight: 800; font-size: var(--texto-xl); line-height: 1.1; letter-spacing: -0.02em; }
  .cartao-continuar__meta { font-size: var(--texto-sm); color: var(--texto-suave); font-weight: 600; }
  .cartao-continuar__progresso { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--esp-3); font-size: var(--texto-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
  @container (min-width: 36rem) {
    .cartao-continuar { grid-template-columns: 1fr auto; align-items: center; column-gap: var(--esp-8); }
    .cartao-continuar__progresso { grid-column: 1; }
    .cartao-continuar > .botao { grid-column: 2; grid-row: 1 / span 2; }
  }

  /* ---------------------------------------------------------------------------
     ABAS  .abas[role=tablist] > .aba[role=tab][aria-selected]
     Pílula que desliza: o JS troca aria-selected dentro de
     document.startViewTransition() e a aba ativa tem view-transition-name.
     --abas--sublinhado para professor/admin.
     --------------------------------------------------------------------------- */
  .abas {
    display: inline-flex;
    gap: 2px;
    max-width: 100%;
    padding: 4px;
    border-radius: var(--raio-pilula);
    background: var(--papel-fundo);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .aba {
    position: relative;
    flex: none;
    min-height: 40px;
    padding: 0 var(--esp-4);
    border: 0;
    border-radius: var(--raio-pilula);
    background: transparent;
    color: var(--texto-suave);
    font-size: var(--texto-sm);
    font-weight: 700;
    transition: color var(--dur-rapida);
  }
  .aba::after { content: ""; position: absolute; inset: -2px 0; }
  @media (hover: hover) { .aba:hover { color: var(--texto); } }
  .aba[aria-selected="true"] {
    background: var(--superficie);
    color: var(--texto);
    box-shadow: var(--sombra-2);
    view-transition-name: var(--aba-vt, aba-ativa);
  }
  .abas--bloco { display: flex; }
  .abas--bloco .aba { flex: 1; }

  .abas--sublinhado { background: transparent; border-radius: 0; padding: 0; gap: var(--esp-5); border-bottom: var(--borda) solid var(--linha); }
  .abas--sublinhado .aba { border-radius: 0; padding: 0 2px; min-height: 44px; }
  .abas--sublinhado .aba[aria-selected="true"] { background: transparent; box-shadow: inset 0 -3px 0 var(--tinta-900); }

  /* Mesmo visual sem aria-selected (que só vale em role=tab/option, axe): abas-link por
     aria-current, grupo de escolha única por role=radio + aria-checked, liga/desliga por
     aria-pressed. Sem view-transition-name (pode haver vários grupos na página). */
  .aba--link[aria-current="page"], .aba[role="radio"][aria-checked="true"], .aba[aria-pressed="true"] {
    background: var(--superficie);
    color: var(--texto);
    box-shadow: var(--sombra-2);
  }
  .abas--sublinhado :is(.aba--link[aria-current="page"], .aba[role="radio"][aria-checked="true"], .aba[aria-pressed="true"]) {
    background: transparent; box-shadow: inset 0 -3px 0 var(--tinta-900);
  }
  .aba--link { display: inline-flex; align-items: center; gap: var(--esp-1); text-decoration: none; }
  /* contagem sem a opacidade do chip: dentro da aba-link ficava em 3,34:1 */
  .aba--link .chip__contagem { opacity: 1; }

  /* ---------------------------------------------------------------------------
     MODAL / FOLHA INFERIOR  <dialog class="modal">
     Celular (< 48rem): folha que sobe do rodapé, com alça. Desktop: modal central.
     Entrada/saída com @starting-style + transition-behavior: allow-discrete.
     --------------------------------------------------------------------------- */
  .modal {
    width: min(100% - 2rem, 32rem);
    max-height: min(88dvh, 46rem);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--raio-xl);
    background: var(--superficie-alta);
    color: var(--texto);
    box-shadow: var(--sombra-3);
    overflow: auto;
    overscroll-behavior: contain;
    opacity: 0;
    scale: calc(1 - 0.05 * var(--movimento));
    transition:
      opacity var(--dur-media) var(--ease-padrao),
      scale var(--dur-lenta) var(--mola-suave),
      translate var(--dur-lenta) var(--mola-suave),
      overlay var(--dur-media) allow-discrete,
      display var(--dur-media) allow-discrete;
  }
  .modal[open] {
    opacity: 1; scale: 1;
    @starting-style { opacity: 0; scale: calc(1 - 0.05 * var(--movimento)); }
  }
  .modal::backdrop {
    background: rgb(29 26 61 / 0);
    backdrop-filter: blur(0);
    transition: background-color var(--dur-media), backdrop-filter var(--dur-media), overlay var(--dur-media) allow-discrete, display var(--dur-media) allow-discrete;
  }
  .modal[open]::backdrop {
    background: rgb(29 26 61 / 0.45);
    backdrop-filter: blur(3px);
    @starting-style { background: rgb(29 26 61 / 0); backdrop-filter: blur(0); }
  }
  .modal__alca { display: none; width: 44px; height: 5px; margin: 10px auto 0; border-radius: var(--raio-pilula); background: var(--tinta-200); }
  .modal__cabecalho { display: flex; align-items: flex-start; gap: var(--esp-3); padding: var(--esp-5) var(--esp-5) 0; }
  .modal__titulo { flex: 1; font-size: var(--texto-xl); font-weight: 800; }
  .modal__corpo { padding: var(--esp-3) var(--esp-5); color: var(--tinta-700); }
  .modal__acoes { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-4) var(--esp-5) var(--esp-5); }

  @media (max-width: 47.99em) {
    .modal {
      width: 100%; max-width: 100%;
      margin: auto 0 0;
      border-radius: var(--raio-2xl) var(--raio-2xl) 0 0;
      padding-bottom: env(safe-area-inset-bottom, 0px);
      scale: 1;
      translate: 0 calc(100% * var(--movimento));
    }
    .modal[open] {
      translate: 0 0;
      @starting-style { translate: 0 calc(100% * var(--movimento)); }
    }
    .modal__alca { display: block; }
  }
  @media (min-width: 48em) {
    .modal__acoes { flex-direction: row; justify-content: flex-end; }

    /* Variante FOLHA LATERAL (07 §4.1: folha no computador = painel lateral direito 400–480 px).
       No celular continua a folha inferior; o modal central segue para decisões bloqueantes.
       abrirFolha({ lateral: true }) ou <dialog class="modal modal--lateral">. */
    .modal--lateral {
      width: clamp(25rem, 34vw, 30rem);
      max-width: calc(100vw - var(--esp-6));
      height: 100dvh;
      max-height: 100dvh;
      margin: 0 0 0 auto;
      border-radius: var(--raio-xl) 0 0 var(--raio-xl);
      scale: 1;
      translate: calc(100% * var(--movimento)) 0;
    }
    .modal--lateral[open] {
      display: flex;
      flex-direction: column;
      translate: 0 0;
      scale: 1;
      @starting-style { translate: calc(100% * var(--movimento)) 0; scale: 1; }
    }
    .modal--lateral .modal__corpo { flex: 1 0 auto; }
    .modal--lateral .modal__acoes { position: sticky; bottom: 0; background: var(--superficie-alta); border-top: var(--borda) solid var(--linha); }
  }

  /* ---------------------------------------------------------------------------
     TOAST  <div class="toasts" popover="manual" aria-live="polite"> > .toast
     Fica na top layer (popover), acima de tudo, sem position: fixed na casca.
     --------------------------------------------------------------------------- */
  .toasts {
    inset: auto 0 0 0;
    width: 100%;
    margin: 0;
    padding: 0 var(--esp-4) calc(var(--barra-inferior-altura) + var(--esp-3) + env(safe-area-inset-bottom, 0px));
    border: 0;
    background: transparent;
    overflow: visible;
    display: grid;
    justify-items: center;
    gap: var(--esp-2);
    pointer-events: none;
  }
  .toasts:not(:popover-open) { display: none; }
  @media (min-width: 64em) {
    .toasts { justify-items: end; padding: var(--esp-6); }
  }
  .toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: var(--esp-3);
    width: min(100%, 26rem);
    min-height: 56px;
    padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-3);
    border-radius: var(--raio-lg);
    background: var(--tinta-900);
    color: #FFFDF9;
    box-shadow: var(--sombra-3);
    font-weight: 600;
    line-height: 1.3;
  }
  .toast__icone {
    display: grid; place-items: center; flex: none;
    width: 34px; height: 34px;
    border-radius: 12px;
    background: var(--marca-500);
    color: var(--tinta-900);
  }
  .toast__icone .icone { width: 1.25rem; height: 1.25rem; stroke-width: 2.6; }
  .toast__texto { flex: 1; min-width: 0; }
  .toast__acao { --botao-texto: var(--marca-300); --botao-fundo-hover: rgb(255 255 255 / 0.08); }
  .toast--acerto .toast__icone { background: var(--acerto-500); }
  .toast--erro .toast__icone { background: var(--erro-500); color: #fff; }
  .toast--info .toast__icone { background: var(--info-500); color: #fff; }

  /* ---------------------------------------------------------------------------
     BARRA DE PROGRESSO  .progresso[role=progressbar][style="--valor: 40"] > .progresso__barra
     --------------------------------------------------------------------------- */
  .progresso {
    --valor: 0;
    position: relative;
    height: 12px;
    border-radius: var(--raio-pilula);
    background: var(--papel-fundo);
    overflow: hidden;
  }
  .progresso__barra {
    position: relative;
    height: 100%;
    width: calc(var(--valor) * 1%);
    border-radius: inherit;
    background: var(--c-500);
    transition: width var(--dur-mola) var(--mola-suave);
  }
  .progresso__barra::after {
    content: "";
    position: absolute;
    top: 3px; left: 6px; right: 6px;
    height: 3px;
    border-radius: var(--raio-pilula);
    background: rgb(255 255 255 / 0.42);
  }
  .progresso--fino { height: 6px; }
  .progresso--fino .progresso__barra::after { display: none; }
  .progresso--grosso { height: 18px; }
  .progresso--grosso .progresso__barra::after { top: 4px; height: 4px; left: 8px; right: 8px; }
  .progresso--marca { --c-500: var(--marca-500); }
  .progresso--tinta { --c-500: var(--tinta-900); }

  /* ---------------------------------------------------------------------------
     ANEL DE META DIÁRIA  .anel[style="--valor: 60"]
     <div class="anel"><svg viewBox="0 0 120 120"><circle class="anel__trilho" …/>
       <circle class="anel__valor" pathLength="100" …/></svg><div class="anel__centro">…</div></div>
     --------------------------------------------------------------------------- */
  .anel {
    --valor: 0;
    --tamanho: 112px;
    position: relative;
    display: grid; place-items: center;
    width: var(--tamanho); height: var(--tamanho);
    flex: none;
  }
  .anel > svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
  .anel__trilho { fill: none; stroke: var(--papel-fundo); stroke-width: 12; }
  .anel__valor {
    fill: none;
    stroke: var(--c-500);
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--valor));
    transition: stroke-dashoffset var(--dur-festa) var(--mola-suave), stroke var(--dur-media);
  }
  .anel__centro { position: relative; display: grid; justify-items: center; line-height: 1; }
  .anel__numero { font-family: var(--fonte-display); font-weight: 800; font-size: calc(var(--tamanho) * 0.26); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .anel__rotulo { margin-top: 3px; font-size: var(--texto-2xs); font-weight: 700; color: var(--texto-suave); }
  .anel.is-completo .anel__valor { stroke: var(--acerto-500); }
  .anel--marca { --c-500: var(--marca-500); }
  .anel--sm { --tamanho: 48px; }
  .anel--sm .anel__trilho, .anel--sm .anel__valor { stroke-width: 16; }

  /* ---------------------------------------------------------------------------
     SELO DE NÍVEL  .nivel  (losango arredondado com o número)
     --------------------------------------------------------------------------- */
  .nivel {
    --tamanho: 48px;
    position: relative;
    isolation: isolate;
    display: inline-grid; place-items: center;
    width: var(--tamanho); height: var(--tamanho);
    flex: none;
    color: var(--tinta-900);
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: calc(var(--tamanho) * 0.42);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .nivel::before {
    content: "";
    position: absolute; inset: 12%;
    z-index: -1;
    border: var(--borda-carimbo) solid var(--tinta-900);
    border-radius: 30%;
    background: var(--marca-500);
    rotate: 45deg;
  }
  .nivel--lg { --tamanho: 88px; }
  .nivel--lg::before { border-width: 3.5px; }
  .nivel-bloco { display: flex; align-items: center; gap: var(--esp-3); }
  .nivel-bloco__texto { flex: 1; display: grid; gap: 6px; }
  .nivel-bloco__linha { display: flex; justify-content: space-between; font-size: var(--texto-sm); font-weight: 700; }
  .nivel-bloco__xp { color: var(--texto-suave); font-variant-numeric: tabular-nums; }

  /* ---------------------------------------------------------------------------
     CONTADOR DE SEQUÊNCIA  .sequencia  --pendente (hoje ainda não)  --protegida
     --------------------------------------------------------------------------- */
  .sequencia {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 40px;
    padding: 0 var(--esp-3) 0 var(--esp-2);
    border: var(--borda-grossa) solid var(--cor-laranja-100);
    border-radius: var(--raio-pilula);
    background: var(--cor-laranja-50);
    color: var(--cor-laranja-700);
    font-family: var(--fonte-display);
    font-size: var(--texto-lg);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
  }
  .sequencia .icone { width: 1.5rem; height: 1.5rem; color: var(--cor-laranja-500); --icone-tom: var(--marca-500); transform-origin: 50% 90%; }
  .sequencia--pendente { border-color: var(--linha-forte); background: var(--superficie); color: var(--tinta-500); }
  .sequencia--pendente .icone { color: var(--tinta-400); --icone-tom: none; }
  .sequencia__escudo { display: none; }
  .sequencia--protegida .sequencia__escudo { display: block; color: var(--info-700); --icone-tom: var(--info-100); width: 1.125rem; height: 1.125rem; }

  /* ---------------------------------------------------------------------------
     AVATAR  .avatar[data-cor] --xs --sm --lg --xl   .avatar--anel[style="--valor:60"]
     <span class="avatar" data-cor="violeta"><svg><use href="#avatar-coruja"/></svg></span>
     --------------------------------------------------------------------------- */
  .avatar {
    --tamanho: 40px;
    position: relative;
    display: inline-block;
    flex: none;
    width: var(--tamanho); height: var(--tamanho);
    border-radius: 50%;
    color: var(--c-100);
  }
  .avatar > svg, .avatar > img { width: 100%; height: 100%; border-radius: 50%; }
  .avatar--xs { --tamanho: 28px; }
  .avatar--sm { --tamanho: 32px; }
  .avatar--lg { --tamanho: 64px; }
  .avatar--xl { --tamanho: 96px; }
  .avatar--2xl { --tamanho: 128px; }
  .avatar--anel {
    --valor: 0;
    padding: 4px;
    background:
      radial-gradient(closest-side, var(--superficie) calc(100% - 4px), transparent calc(100% - 3px)),
      conic-gradient(var(--c-500) calc(var(--valor) * 1%), var(--papel-fundo) 0);
  }
  .avatar__nivel { position: absolute; right: -6px; bottom: -6px; --tamanho: 30px; }
  .avatar-grupo { display: flex; }
  .avatar-grupo > .avatar + .avatar { margin-left: -10px; box-shadow: 0 0 0 2.5px var(--superficie); }
  button.avatar { padding: 0; border: 0; background: none; cursor: pointer; }

  /* ---------------------------------------------------------------------------
     CRONÔMETRO  .cronometro[role=timer]  --alerta (≤ 5 min) | --critico (≤ 1 min)  .is-pausado
     --------------------------------------------------------------------------- */
  .cronometro {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px;
    padding: 0 var(--esp-3) 0 var(--esp-2);
    border-radius: var(--raio-pilula);
    background: var(--papel-fundo);
    color: var(--tinta-700);
    font-size: var(--texto-sm);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: background-color var(--dur-media), color var(--dur-media);
  }
  .cronometro .icone { width: 1.125rem; height: 1.125rem; stroke-width: 2.4; }
  .cronometro--alerta { background: var(--atencao-50); color: var(--atencao-700); box-shadow: inset 0 0 0 2px var(--atencao-100); }
  .cronometro--critico { background: var(--erro-50); color: var(--erro-700); box-shadow: inset 0 0 0 2px var(--erro-100); }
  .cronometro.is-pausado { color: var(--texto-suave); }
  /* sem opacidade no número: com 0.6 o pausado ficava em 2,44:1; o ícone de pausa já diz o estado */

  /* ---------------------------------------------------------------------------
     ADESIVO DE CONQUISTA  .adesivo[data-cor]  .is-bloqueada
     --------------------------------------------------------------------------- */
  .adesivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--esp-5) var(--esp-3); }
  .adesivo { display: grid; justify-items: center; align-content: start; gap: var(--esp-2); text-align: center; }
  .adesivo__arte {
    position: relative;
    overflow: hidden;
    display: grid; place-items: center;
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--c-500);
    color: #fff;
    box-shadow: 0 0 0 5px #fff, 0 0 0 6.5px var(--linha-forte), 0 10px 18px -8px color-mix(in oklab, var(--c-500) 70%, transparent);
    rotate: var(--giro, -6deg);
    --icone-tom: rgb(255 255 255 / 0.3);
  }
  .adesivo:nth-child(even) .adesivo__arte { --giro: 5deg; }
  .adesivo:nth-child(3n) .adesivo__arte { --giro: -2deg; }
  .adesivo__arte .icone { width: 42px; height: 42px; stroke-width: 2.1; }
  .adesivo__arte::after {
    content: "";
    position: absolute; inset: -20%;
    background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / 0.55) 50%, transparent 60%);
    translate: -100% 0;
  }
  .adesivo__nome { font-size: var(--texto-sm); font-weight: 800; line-height: 1.2; }
  .adesivo__data { font-size: var(--texto-xs); color: var(--texto-suave); font-weight: 600; }
  .adesivo.is-bloqueada .adesivo__arte { background: var(--papel-fundo); color: var(--tinta-400); box-shadow: 0 0 0 5px var(--superficie), 0 0 0 6.5px var(--linha); rotate: 0deg; --icone-tom: none; }
  .adesivo.is-bloqueada .adesivo__nome { color: var(--texto-suave); }

  /* ---------------------------------------------------------------------------
     TABELA (professor, admin)  .tabela-rolagem > table.tabela
     --------------------------------------------------------------------------- */
  .tabela-rolagem {
    overflow-x: auto;
    border: var(--borda) solid var(--linha);
    border-radius: var(--raio-lg);
    background: var(--superficie);
  }
  .tabela {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--texto-sm);
    font-variant-numeric: tabular-nums;
  }
  .tabela caption { padding: var(--esp-3) var(--esp-4); text-align: left; font-weight: 700; }
  .tabela th {
    position: sticky; top: 0; z-index: 1;
    padding: var(--esp-2) var(--esp-4);
    border-bottom: var(--borda) solid var(--linha-forte);
    background: var(--papel);
    color: var(--texto-suave);
    font-size: var(--texto-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .tabela th button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
  .tabela th[aria-sort] { color: var(--texto); }
  .tabela th[aria-sort="descending"] .icone { rotate: 180deg; }
  .tabela td { padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--linha); vertical-align: middle; }
  .tabela tbody tr:last-child td { border-bottom: 0; }
  .tabela tbody tr { transition: background-color var(--dur-rapida); }
  @media (hover: hover) { .tabela tbody tr:hover { background: var(--marca-50); } }
  .tabela tbody tr:has(.marcador:checked) { background: var(--marca-100); }
  .tabela .num { text-align: right; }
  .tabela__pessoa { display: flex; align-items: center; gap: var(--esp-2); font-weight: 700; white-space: nowrap; }
  .tabela--compacta td { padding-block: var(--esp-2); }
  .mini-barra { display: inline-grid; grid-template-columns: 64px auto; align-items: center; gap: var(--esp-2); font-weight: 700; }
  .mini-barra .progresso { height: 6px; }
  .mini-barra .progresso__barra::after { display: none; }

  /* ---------------------------------------------------------------------------
     ESTADO VAZIO  .vazio > .vazio__ilustracao + .vazio__titulo + .vazio__texto + .botao
     --------------------------------------------------------------------------- */
  .vazio {
    display: grid; justify-items: center; gap: var(--esp-3);
    max-width: 24rem;
    margin-inline: auto;
    padding: var(--esp-8) var(--esp-4);
    text-align: center;
  }
  .vazio__ilustracao { position: relative; display: grid; place-items: center; width: 148px; height: 148px; margin-bottom: var(--esp-2); }
  .vazio__ilustracao::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2.5px dashed var(--linha-forte);
  }
  .vazio__ilustracao .avatar { --tamanho: 104px; }
  .vazio__enfeite { position: absolute; color: var(--marca-500); --icone-tom: var(--marca-300); }
  .vazio__titulo { font-size: var(--texto-xl); font-weight: 800; }
  .vazio__texto { color: var(--texto-suave); text-wrap: balance; }
  .vazio .botao { margin-top: var(--esp-3); }

  /* ---------------------------------------------------------------------------
     SKELETON  .skeleton --texto | --titulo | --circulo | --cartao   (aria-hidden)
     O contêiner que carrega recebe aria-busy="true".
     --------------------------------------------------------------------------- */
  .skeleton {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: var(--raio-sm);
    background: var(--papel-fundo);
  }
  .skeleton::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.6) 50%, transparent 70%);
    translate: -100% 0;
  }
  .skeleton--texto { height: 0.9em; width: var(--largura, 100%); margin-block: 0.35em; border-radius: var(--raio-pilula); }
  .skeleton--titulo { height: 1.5em; width: var(--largura, 55%); border-radius: var(--raio-pilula); }
  .skeleton--circulo { width: var(--tamanho, 48px); height: var(--tamanho, 48px); border-radius: 50%; }
  .skeleton--cartao { height: var(--altura, 132px); border-radius: var(--raio-xl); }

  /* ---------------------------------------------------------------------------
     DICA (tooltip)  .dica > [aria-describedby] + .dica__balao[role=tooltip]
     Complementa, nunca carrega informação essencial (não há hover no toque).
     --------------------------------------------------------------------------- */
  .dica { position: relative; display: inline-flex; }
  .dica__balao {
    position: absolute; bottom: calc(100% + 10px); left: 50%;
    z-index: var(--z-tooltip);
    padding: 6px 10px;
    border-radius: var(--raio-sm);
    background: var(--tinta-900);
    color: #FFFDF9;
    font-size: var(--texto-xs);
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    translate: -50% 4px;
    transition: opacity var(--dur-rapida) var(--ease-padrao), translate var(--dur-media) var(--mola-suave);
  }
  .dica__balao::after {
    content: "";
    position: absolute; top: 100%; left: 50%;
    translate: -50% 0;
    border: 6px solid transparent;
    border-top-color: var(--tinta-900);
  }
  .dica:hover .dica__balao, .dica:focus-within .dica__balao { opacity: 1; translate: -50% 0; transition-delay: 300ms; }

  /* ---------------------------------------------------------------------------
     GRÁFICO (SVG gerado por nucleo/grafico.js)  .grafico[data-cor]
     --------------------------------------------------------------------------- */
  .grafico { position: relative; width: 100%; }
  .grafico svg { width: 100%; height: auto; overflow: visible; font-family: var(--fonte-ui); }
  .grafico__grade { stroke: var(--linha); stroke-width: 1; stroke-dasharray: 2 5; }
  .grafico__base { stroke: var(--linha-forte); stroke-width: 1.5; }
  .grafico__rotulo { fill: var(--texto-suave); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .grafico__valor { fill: var(--texto); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .grafico__barra { fill: var(--c-500); transform-box: fill-box; transform-origin: 50% 100%; }
  .grafico__barra--fundo { fill: var(--c-100); }
  .grafico__barra--hoje { fill: var(--marca-500); stroke: var(--tinta-900); stroke-width: 2; }
  .grafico__linha { fill: none; stroke: var(--c-500); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .grafico__area { fill: color-mix(in oklab, var(--c-500) 14%, transparent); }
  .grafico__ponto { fill: var(--superficie); stroke: var(--c-500); stroke-width: 2.5; }
  .grafico__meta { stroke: var(--tinta-900); stroke-width: 1.5; stroke-dasharray: 5 5; }
  .grafico__meta-rotulo { fill: var(--tinta-900); font-size: 11px; font-weight: 800; }

  /* barras de acerto por matéria em HTML (mais acessível que SVG para leitor de tela) */
  .barras-materia { display: grid; gap: var(--esp-3); margin: 0; padding: 0; list-style: none; }
  .barra-materia { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 3rem; align-items: center; gap: var(--esp-3); font-size: var(--texto-sm); font-weight: 700; }
  .barra-materia__nome { display: flex; align-items: center; gap: var(--esp-2); min-width: 0; }
  .barra-materia__nome .icone { color: var(--c-700); width: 1.125rem; height: 1.125rem; }
  .barra-materia__valor { text-align: right; font-variant-numeric: tabular-nums; }

  /* calendário de estudo (sequência): 5 níveis de marca-texto */
  .calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; max-width: 20rem; }
  .calendario__dia { aspect-ratio: 1; border-radius: 7px; background: var(--papel-fundo); position: relative; }
  .calendario__dia[data-nivel="1"] { background: var(--marca-100); }
  .calendario__dia[data-nivel="2"] { background: var(--marca-300); }
  .calendario__dia[data-nivel="3"] { background: var(--marca-500); }
  .calendario__dia[data-nivel="4"] { background: var(--cor-laranja-500); }
  .calendario__dia.is-hoje { box-shadow: 0 0 0 2px var(--tinta-900); }
  .calendario__dia.is-protegido { background: var(--info-100); box-shadow: inset 0 0 0 2px var(--info-500); }
  .calendario-legenda { display: flex; align-items: center; gap: 4px; margin-top: var(--esp-2); font-size: var(--texto-xs); color: var(--texto-suave); font-weight: 600; }
  .calendario-legenda .calendario__dia { width: 14px; }

  /* ---------------------------------------------------------------------------
     LOGOTIPO  .logo  (check grifado + "aluno" pequeno sobre "gabarita"; APP_NOME)
     --------------------------------------------------------------------------- */
  .logo { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-900); text-decoration: none; font-family: var(--fonte-display); font-weight: 800; font-size: 1.45rem; letter-spacing: -0.04em; line-height: 1; }
  .logo__marca {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border: 2.5px solid var(--tinta-900);
    border-radius: 11px;
    background: var(--marca-500);
    box-shadow: 0 3px 0 var(--tinta-900);
    rotate: -6deg;
  }
  .logo__marca .icone { width: 20px; height: 20px; stroke-width: 3.2; }
}

/* =============================================================================
   COMPONENTES DA CASCA DO SITE (Fundação-UI) — mesma gramática da referência
   ============================================================================= */
@layer componentes {

  /* Logotipo: quadradinho marca-texto com ✓ + "aluno" (menor, leve) sobre "gabarita" (destaque).
     Em duas linhas curtas: não alarga o topo em 390 px. */
  .logo__palavra { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; white-space: nowrap; }
  .logo__prefixo {
    font-family: var(--fonte-ui); font-size: 0.5em; font-weight: 700; letter-spacing: 0.08em;
    color: var(--tinta-700); line-height: 1; white-space: pre;
  }
  .logo__nome { line-height: 0.95; }
  .logo:focus-visible { border-radius: var(--raio-sm); }
  .logo__area {
    align-self: center;
    margin-left: 2px; padding: 2px 6px;
    border-radius: var(--raio-xs);
    background: var(--papel-fundo); color: var(--tinta-700);
    font-family: var(--fonte-ui); font-size: var(--texto-2xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  }

  /* Botão de ícone do topo (sino, avatar) — alvo 44px, contador no canto */
  .botao-topo {
    position: relative;
    display: inline-grid; place-items: center;
    width: var(--alvo-toque); height: var(--alvo-toque);
    padding: 0;
    border: 0;
    border-radius: var(--raio-pilula);
    background: transparent;
    color: var(--tinta-700);
    text-decoration: none;
    transition: background-color var(--dur-rapida), scale var(--dur-media) var(--mola-quique);
  }
  @media (hover: hover) { .botao-topo:hover { background: var(--papel-fundo); color: var(--texto); } }
  .botao-topo:active { scale: 0.92; }
  .botao-topo[aria-expanded="true"] { background: var(--marca-100); color: var(--texto); --icone-tom: var(--marca-500); }
  .botao-topo .icone { transform-origin: 50% 12%; }
  .botao-topo__contador { position: absolute; top: 1px; right: -1px; }
  .botao-topo--avatar { width: auto; min-width: var(--alvo-toque); gap: 2px; grid-auto-flow: column; padding: 0 4px 0 2px; }
  .botao-topo--avatar .avatar { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 3.5px var(--linha-forte); transition: box-shadow var(--dur-rapida); }
  .botao-topo--avatar[aria-expanded="true"] { background: transparent; }
  .botao-topo--avatar[aria-expanded="true"] .avatar { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4.5px var(--tinta-900); }
  .botao-topo--avatar > .icone { width: 1rem; height: 1rem; stroke-width: 2.6; color: var(--texto-suave); }

  /* Menus e painéis que saem do topo: popover na top layer.
     Celular: folha que sobe do rodapé. Desktop: cartão suspenso sob o topo, à direita. */
  .suspenso {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    max-height: min(85dvh, 40rem);
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    border: 0;
    border-radius: var(--raio-2xl) var(--raio-2xl) 0 0;
    background: var(--superficie-alta);
    color: var(--texto);
    box-shadow: var(--sombra-3);
    overflow: auto;
    overscroll-behavior: contain;
    opacity: 0;
    translate: 0 calc(100% * var(--movimento));
    transition:
      opacity var(--dur-media) var(--ease-padrao),
      translate var(--dur-lenta) var(--mola-suave),
      scale var(--dur-lenta) var(--mola-suave),
      overlay var(--dur-media) allow-discrete,
      display var(--dur-media) allow-discrete;
  }
  .suspenso::backdrop {
    background: rgb(29 26 61 / 0);
    transition: background-color var(--dur-media), overlay var(--dur-media) allow-discrete, display var(--dur-media) allow-discrete;
  }
  .suspenso:popover-open {
    opacity: 1; translate: 0 0;
    @starting-style { opacity: 0; translate: 0 calc(100% * var(--movimento)); }
  }
  .suspenso:popover-open::backdrop {
    background: rgb(29 26 61 / 0.4);
    @starting-style { background: rgb(29 26 61 / 0); }
  }
  .suspenso__alca { display: block; width: 44px; height: 5px; margin: 10px auto 0; border-radius: var(--raio-pilula); background: var(--tinta-200); }
  @media (min-width: 48em) {
    .suspenso {
      inset: calc(var(--topo-altura) + var(--esp-2)) var(--esp-6) auto auto;
      width: min(24rem, calc(100vw - 2rem));
      max-height: calc(100dvh - var(--topo-altura) - var(--esp-8));
      padding: 0;
      border-radius: var(--raio-xl);
      border: var(--borda) solid var(--linha);
      translate: 0 0;
      scale: calc(1 - 0.04 * var(--movimento));
      transform-origin: 90% 0;
    }
    .suspenso:popover-open { scale: 1; @starting-style { opacity: 0; scale: calc(1 - 0.04 * var(--movimento)); } }
    .suspenso:popover-open::backdrop { background: rgb(29 26 61 / 0); }
    .suspenso__alca { display: none; }
  }
  .suspenso__cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-4) var(--esp-5) var(--esp-2); }
  .suspenso__titulo { font-size: var(--texto-lg); font-weight: 800; }
  .suspenso__rodape { display: flex; justify-content: center; padding: var(--esp-1) var(--esp-5) var(--esp-3); border-top: 1px solid var(--linha); }

  /* menu do avatar */
  .menu-conta__pessoa { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-4) var(--esp-5); }
  .menu-conta__nome { font-weight: 800; line-height: 1.2; }
  .menu-conta__meta { font-size: var(--texto-sm); color: var(--texto-suave); overflow-wrap: anywhere; }
  .menu { display: grid; gap: 2px; margin: 0; padding: var(--esp-2); list-style: none; border-top: 1px solid var(--linha); }
  .menu__item {
    display: flex; align-items: center; gap: var(--esp-3);
    width: 100%; min-height: 48px;
    padding: 0 var(--esp-3);
    border: 0; border-radius: var(--raio-md);
    background: none; color: var(--texto);
    font: inherit; font-weight: 600; text-align: left; text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-rapida);
  }
  .menu__item .icone { color: var(--tinta-500); }
  @media (hover: hover) { .menu__item:hover { background: var(--papel); } .menu__item:hover .icone { color: var(--texto); } }
  .menu__item:focus-visible { outline-offset: -3px; }
  .menu__item[aria-current="page"] { background: var(--marca-50); font-weight: 800; --icone-tom: var(--marca-300); }
  .menu__item--perigo, .menu__item--perigo .icone { color: var(--erro-700); }
  .menu__form { margin: 0; }

  /* painel de notificações (C1) */
  .notificacoes { display: grid; gap: 2px; margin: 0; padding: var(--esp-1) var(--esp-2) var(--esp-2); list-style: none; }
  .notificacao {
    position: relative;
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-3); align-items: start;
    padding: var(--esp-3);
    border-radius: var(--raio-md);
    color: inherit; text-decoration: none;
    transition: background-color var(--dur-rapida);
  }
  @media (hover: hover) { a.notificacao:hover { background: var(--papel); } }
  .notificacao.is-nao-lida { background: var(--marca-50); }
  .notificacao__icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--raio-md); background: var(--c-100); color: var(--c-700); }
  .notificacao__icone .icone { width: 1.25rem; height: 1.25rem; }
  .notificacao__texto { display: grid; gap: 2px; min-width: 0; }
  .notificacao__titulo { font-weight: 700; line-height: 1.3; }
  .notificacao__corpo { font-size: var(--texto-sm); color: var(--tinta-700); }
  .notificacao__quando { font-size: var(--texto-xs); color: var(--texto-suave); font-weight: 600; }
  .notificacao.is-nao-lida .notificacao__titulo::before {
    content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 2px;
    border-radius: 50%; background: var(--erro-500);
  }

  /* botão que parece link (ações terciárias em texto) */
  .botao-texto {
    display: inline-flex; align-items: center; gap: var(--esp-1);
    min-height: var(--alvo-toque);
    padding: 0; border: 0; background: none;
    color: var(--link); font: inherit; font-weight: 700; font-size: var(--texto-sm);
    text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em;
    cursor: pointer;
  }
  .botao-texto:disabled { color: var(--texto-fraco); cursor: default; text-decoration: none; }

  /* FAIXA de sessão (ver como, aviso global, pedido de professor) — 07 § 4.8 */
  .faixa {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-3);
    padding: var(--esp-2) var(--esp-pagina);
    background: var(--info-100);
    color: var(--info-700);
    font-size: var(--texto-sm);
    font-weight: 600;
    line-height: 1.35;
  }
  .faixa > .icone { width: 1.25rem; height: 1.25rem; flex: none; }
  .faixa__texto { flex: 1 1 12rem; min-width: 0; }
  .faixa__texto strong { font-weight: 800; }
  .faixa__acoes { display: flex; align-items: center; gap: var(--esp-2); margin: 0; }
  .faixa--atencao { background: var(--atencao-100); color: var(--atencao-700); }
  .faixa--ver-como { background: var(--atencao-100); color: var(--atencao-700); box-shadow: inset 0 -2px 0 var(--atencao-500); }
  .faixa .botao { --botao-altura: 36px; }
  .faixa__fechar { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--raio-sm); background: transparent; color: inherit; }
  .faixa__fechar:hover { background: rgb(255 255 255 / 0.5); }

  /* O QUE O PROFESSOR VÊ (parcial o-que-o-professor-ve, 09 §1.4): convite, turma do aluno, aluno visto pelo professor */
  .professor-ve { display: grid; gap: var(--esp-4); font-size: var(--texto-sm); }
  .professor-ve__grupo { display: grid; gap: var(--esp-2); }
  .professor-ve__titulo { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--texto-sm); font-weight: 800; }
  .professor-ve__titulo .icone { width: 1.1rem; height: 1.1rem; }
  .professor-ve__grupo--ve .professor-ve__titulo .icone { color: var(--info-700); }
  .professor-ve__grupo--nao .professor-ve__titulo .icone { color: var(--tinta-500); }
  .professor-ve ul { display: grid; gap: 4px; margin: 0; padding-left: 1.25rem; color: var(--tinta-700); }
  .professor-ve__nota { color: var(--texto-suave); }

  /* AVISO (bloco dentro do conteúdo: info, atenção, erro, acerto) */
  .aviso {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-3); align-items: start;
    padding: var(--esp-3) var(--esp-4);
    border-radius: var(--raio-md);
    background: var(--info-50);
    color: var(--tinta-700);
    box-shadow: inset 0 0 0 1.5px var(--info-100);
    font-size: var(--texto-sm);
  }
  .aviso > .icone { width: 1.25rem; height: 1.25rem; margin-top: 1px; color: var(--info-700); --icone-tom: var(--info-100); }
  .aviso strong { color: var(--texto); }
  .aviso--atencao { background: var(--atencao-50); box-shadow: inset 0 0 0 1.5px var(--atencao-100); }
  .aviso--atencao > .icone { color: var(--atencao-700); --icone-tom: var(--atencao-100); }
  .aviso--erro { background: var(--erro-50); box-shadow: inset 0 0 0 1.5px var(--erro-100); }
  .aviso--erro > .icone { color: var(--erro-700); --icone-tom: var(--erro-100); }
  .aviso--acerto { background: var(--acerto-50); box-shadow: inset 0 0 0 1.5px var(--acerto-100); }
  .aviso--acerto > .icone { color: var(--acerto-700); --icone-tom: var(--acerto-100); }
  .aviso--rascunho { background: var(--atencao-50); box-shadow: inset 0 0 0 2px var(--atencao-100); }
  .aviso--rascunho > .icone { color: var(--atencao-700); }

  /* CABEÇALHO DE PÁGINA  .cabecalho-pagina > __sobre + h1.__titulo + __texto + __acoes */
  .cabecalho-pagina {
    display: grid; gap: var(--esp-2);
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--esp-4) var(--esp-6);
  }
  .cabecalho-pagina__voltar { justify-self: start; margin-left: calc(var(--esp-3) * -1); }
  .cabecalho-pagina__sobre {
    display: flex; align-items: center; gap: var(--esp-2);
    font-size: var(--texto-2xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave);
  }
  .cabecalho-pagina__sobre .icone { width: 1rem; height: 1rem; }
  .cabecalho-pagina__titulo { font-size: var(--texto-3xl); line-height: 1.05; }
  .cabecalho-pagina__texto { max-width: var(--largura-texto); color: var(--tinta-700); font-size: var(--texto-lg); }
  .cabecalho-pagina__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-2); }
  @container app (min-width: 48rem) {
    .cabecalho-pagina:has(> .cabecalho-pagina__acoes) { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--esp-6); }
    .cabecalho-pagina:has(> .cabecalho-pagina__acoes) > :not(.cabecalho-pagina__acoes) { grid-column: 1; }
    .cabecalho-pagina > .cabecalho-pagina__acoes { grid-column: 2; grid-row: 1 / span 4; align-self: end; margin: 0; }
  }
  :is([data-area="prof"], [data-area="admin"]) .cabecalho-pagina { padding-block: var(--esp-2) var(--esp-5); }
  :is([data-area="prof"], [data-area="admin"]) .cabecalho-pagina__titulo { font-size: var(--texto-2xl); }
  :is([data-area="prof"], [data-area="admin"]) .cabecalho-pagina__texto { font-size: var(--texto-md); }

  /* FORMULÁRIO (nucleo/formulario.js) */
  .formulario { display: grid; gap: var(--esp-5); }
  .formulario__erro {
    display: flex; align-items: center; gap: var(--esp-2);
    padding: var(--esp-3) var(--esp-4);
    border-radius: var(--raio-md);
    background: var(--erro-50);
    box-shadow: inset 0 0 0 1.5px var(--erro-100);
    color: var(--erro-700);
    font-size: var(--texto-sm); font-weight: 700;
  }
  .formulario__erro:focus { outline: 3px solid var(--foco-anel); outline-offset: 3px; }
  .campo__dica { font-size: var(--texto-sm); color: var(--texto-suave); }
  .campo__cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3); }
  .campo__cabecalho a { font-size: var(--texto-sm); font-weight: 700; }
  .campo-senha { position: relative; }
  .campo-senha > .controle { padding-right: 56px; }
  .campo-senha__olho {
    position: absolute; right: 4px; top: 50%; translate: 0 -50%;
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border: 0; border-radius: var(--raio-sm);
    background: transparent; color: var(--tinta-500);
  }
  @media (hover: hover) { .campo-senha__olho:hover { background: var(--papel-fundo); color: var(--texto); } }
  .campo-senha__olho:focus-visible { outline-offset: -2px; }
  .forca { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; }
  .forca__traco { height: 5px; border-radius: var(--raio-pilula); background: var(--papel-fundo); transition: background-color var(--dur-media); }
  .forca[data-nivel="1"] .forca__traco:nth-child(1) { background: var(--erro-500); }
  .forca[data-nivel="2"] .forca__traco:nth-child(-n+2) { background: var(--atencao-500); }
  .forca[data-nivel="3"] .forca__traco:nth-child(-n+3) { background: var(--acerto-500); }
  .forca[data-nivel="4"] .forca__traco { background: var(--acerto-500); }
  .opcao--bloco { align-items: flex-start; padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-md); border: var(--borda-grossa) solid var(--linha-forte); background: var(--superficie-alta); transition: border-color var(--dur-rapida), background-color var(--dur-rapida); }
  .opcao--bloco .marcador { margin-top: 1px; }
  .opcao--bloco:has(.marcador:checked) { border-color: var(--tinta-900); background: var(--marca-50); }
  .opcao--bloco:has(.marcador:focus-visible) { outline: 3px solid var(--foco-anel); outline-offset: 3px; }
  .opcao__texto { display: grid; gap: 2px; }
  .opcao__descricao { font-size: var(--texto-sm); color: var(--texto-suave); font-weight: 500; }

  /* ESTADO VAZIO — variações */
  .vazio--compacto { padding-block: var(--esp-5); }
  .vazio--compacto .vazio__ilustracao { width: 112px; height: 112px; }
  .vazio--compacto .vazio__ilustracao .avatar { --tamanho: 78px; }
  .vazio--largo { max-width: 32rem; }
  .vazio__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-2); margin-top: var(--esp-3); }
  .vazio__acoes .botao { margin: 0; }

  /* NÚMERO de destaque (cartões de número do professor/admin, landing) */
  .numero-destaque { display: grid; gap: 2px; }
  .numero-destaque__valor { font-family: var(--fonte-display); font-size: var(--texto-2xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
  .numero-destaque__rotulo { font-size: var(--texto-xs); color: var(--texto-suave); font-weight: 700; }

  /* Avatar embutido (SVG inline herda --c-100 pelo currentColor) */
  .avatar > svg { display: block; }

  /* Skeleton de linha de lista */
  .skeleton-lista { display: grid; gap: var(--esp-4); }
  .skeleton-lista__item { display: grid; grid-template-columns: auto 1fr; gap: var(--esp-3); align-items: center; }

  /* atalhos de teclado (folha "?") */
  .atalhos { display: grid; margin: 0; }
  .atalhos__linha { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-4); min-height: 44px; border-bottom: 1px dashed var(--linha); }
  .atalhos__linha:last-child { border-bottom: 0; }
  .tecla {
    display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px;
    border: var(--borda-grossa) solid var(--linha-forte); border-bottom-width: 4px; border-radius: 8px;
    background: var(--superficie-alta); font-family: var(--fonte-mono); font-size: var(--texto-sm); font-weight: 700;
  }

  /* modal/folha: extras do nucleo */
  .modal__fechar { flex: none; margin: calc(var(--esp-2) * -1) calc(var(--esp-2) * -1) 0 0; --botao-altura: 44px; }
  .modal__corpo > p + p { margin-top: var(--esp-3); }
  .modal__alca { touch-action: none; cursor: grab; }
  .modal__acoes--linha { flex-direction: row; justify-content: flex-end; }

  /* toast: fechar com ícone */
  .toast__fechar { --botao-texto: rgb(255 253 249 / 0.7); --botao-fundo-hover: rgb(255 255 255 / 0.08); --botao-altura: 40px; }

  /* gráficos (nucleo/grafico.js) */
  .grafico__detalhes { margin-top: var(--esp-3); font-size: var(--texto-sm); }
  .grafico__detalhes summary { cursor: pointer; font-weight: 700; color: var(--texto-suave); min-height: var(--alvo-toque); display: flex; align-items: center; }
  .grafico__detalhes .tabela-rolagem { margin-top: var(--esp-2); }
  .grafico__rotulo--forte { fill: var(--texto); font-weight: 800; }
  .grafico__ponto--ultimo { fill: var(--c-500); stroke: var(--superficie); stroke-width: 3; }
  .grafico__barra-h { fill: var(--c-500); transform-box: fill-box; transform-origin: 0 50%; }
  .grafico__trilho { fill: var(--papel-fundo); }
  .grafico__legenda { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-4); margin-top: var(--esp-2); font-size: var(--texto-xs); color: var(--texto-suave); font-weight: 600; }
}

@layer telas {
  :is([data-area="prof"], [data-area="admin"]) .botao-topo .icone { stroke-width: 1.85; }
}


/* =============================================================================
   ÁREAS DO PROFESSOR E DO ADMIN — mesma família, mais densa e sóbria
   ============================================================================= */
@layer telas {
  :is([data-area="prof"], [data-area="professor"], [data-area="admin"]) {
    & .botao--primario { --botao-prof: 2px; border-width: var(--borda-grossa); }
    & .botao { --botao-prof: 2px; font-weight: 700; }
    & .cartao { padding: var(--esp-4); }
    & .icone { stroke-width: 1.85; }
    & .chip { min-height: 34px; padding-inline: var(--esp-3); }
    & .fundo-pontilhado { background-image: none; }
    & .cartao-materia__icone, & .questao__numero, & .adesivo__arte { rotate: 0deg; }
  }
}

/* ---- parciais do site (visoes/parciais) ---- */
@layer componentes {
  .cartao__topo { display: flex; align-items: center; gap: var(--esp-3); }
  .cartao__cabeca { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .cartao__topo > .item-lista__icone { flex: none; }
  .cartao__seta { color: var(--tinta-400); flex: none; transition: translate var(--dur-media) var(--mola-quique); }
  @media (hover: hover) { .cartao--interativo:hover .cartao__seta { translate: 3px 0; color: var(--texto); } }
  .cartao__corpo { margin-top: var(--esp-3); }
  .cartao__topo + .cartao__corpo:empty { display: none; }

  .vazio__enfeite { top: 6px; right: 8px; }
  .vazio__enfeite--2 { top: auto; right: auto; bottom: 18px; left: 0; --atraso: .6s; }
  .anel__check { color: var(--acerto-700); stroke-width: 3; }
  .skeleton-bloco { display: block; }

  /* cartão de troca de área no pé da barra lateral (07 § 3.3) */
  .troca-area {
    display: flex; align-items: center; gap: var(--esp-3);
    min-height: 52px; margin-top: var(--esp-2);
    padding: 0 var(--esp-3);
    border: var(--borda-grossa) solid var(--linha-forte);
    border-radius: var(--raio-md);
    background: var(--papel);
    color: var(--texto); font-weight: 700; font-size: var(--texto-sm); text-decoration: none;
    transition: border-color var(--dur-rapida), translate var(--dur-media) var(--mola-suave);
  }
  .troca-area > span { flex: 1; }
  .troca-area .icone { color: var(--tinta-500); }
  @media (hover: hover) { .troca-area:hover { border-color: var(--tinta-900); translate: 0 -1px; } }

  .painel-notificacoes__vazio .vazio { padding-block: var(--esp-4) var(--esp-6); }
  .painel-notificacoes .suspenso__cabecalho { padding-bottom: 0; }
}

@layer componentes {
  .progresso__barra { display: block; }
}

@layer componentes {
  .logo__marca { flex: none; }
}