/* ============================================================
   COMPONENTES · Tuca Chefe
   Só usa tokens de tokens.css. Cada componente tem os tipos
   definidos aqui; coisa nova entra como variante aprovada.
   Estados forçados (.is-hover, .is-foco) existem para a página
   do design system mostrar hover e foco parados.
   ============================================================ */

/* ícone como máscara: o mesmo desenho dos SVG, para ::before/::after (o sinal do FAQ,
   abrir e fechar módulo). Uso: content:""; .ds-mascara ou as 4 linhas abaixo com a var. */
:root{ --ic-mais:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); --ic-menos:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); --ic-seta-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }
.ds-mascara{ display:inline-block; flex:none; width:var(--icone-m); height:var(--icone-m); background:currentColor; -webkit-mask:var(--ic, var(--ic-mais)) center / contain no-repeat; mask:var(--ic, var(--ic-mais)) center / contain no-repeat; }

/* ícone dentro de qualquer componente: SVG de traço, centrado */
.ds-icone{ flex:none; width:var(--icone-m); height:var(--icone-m); stroke:currentColor; fill:none; stroke-width:var(--icone-traco); stroke-linecap:round; stroke-linejoin:round; }
.ds-icone--p{ width:var(--icone-p); height:var(--icone-p); }   /* no meio do texto: migalha, "Ver aulas" */

/* ---------- BOTÃO ----------
   Tipos: primário (a ação da tela), secundário (alternativa),
   vidro (sobre foto ou painel escuro), texto (ação discreta).
   Tamanhos: P 32, M 40 (padrão), G 48. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--esp-2);
  height:var(--alt-m); padding:0 var(--esp-5);
  border:1px solid transparent; border-radius:var(--raio-capsula);
  font:var(--tipo-controle); letter-spacing:0; text-transform:none; text-decoration:none; white-space:nowrap;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color var(--dur-rapida) var(--curva-padrao), border-color var(--dur-rapida) var(--curva-padrao), color var(--dur-rapida) var(--curva-padrao), transform var(--dur-instantanea) var(--curva-padrao);
}
.btn .ds-icone{ width:var(--icone-m); height:var(--icone-m); }
.btn--p{ height:var(--alt-p); padding:0 var(--esp-4); font:var(--tipo-controle-p); }
.btn--p .ds-icone{ width:var(--icone-p); height:var(--icone-p); }
.btn--g{ height:var(--alt-g); padding:0 var(--esp-8); }
.btn--larga{ width:100%; }
.btn:focus-visible, .btn.is-foco{ outline:none; box-shadow:var(--anel-foco); }
.btn:active{ transform:scale(.98); }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; pointer-events:none; }

.btn--primario{ background:var(--cor-acao); border-color:var(--cor-acao); color:var(--cor-texto-sobre-acao); }
.btn--primario:hover, .btn--primario.is-hover{ background:var(--cor-acao-hover); border-color:var(--cor-acao-hover); }
.btn--primario:active{ background:var(--cor-acao-pressionada); border-color:var(--cor-acao-pressionada); color:var(--branco); }

.btn--secundario{ background:transparent; border-color:var(--cor-borda-forte); color:var(--cor-texto-titulo); }
.btn--secundario:hover, .btn--secundario.is-hover{ background:var(--cor-superficie-3); border-color:var(--cor-texto-corpo); }

.btn--vidro{ background:var(--cor-vidro); border-color:var(--cor-borda-vidro); color:var(--cor-texto-titulo); -webkit-backdrop-filter:var(--desfoque-vidro); backdrop-filter:var(--desfoque-vidro); }
.btn--vidro:hover, .btn--vidro.is-hover{ background:var(--cor-acao-suave); border-color:var(--cor-acao); }

.btn--texto{ background:transparent; color:var(--cor-texto-titulo); }
.btn--texto:hover, .btn--texto.is-hover{ background:var(--cor-vidro); }

/* ---------- BOTÃO DE ÍCONE ----------
   Sempre redondo e sempre SVG (nunca caractere de texto).
   Tipos: superfície (sobre o fundo da página), vidro (sobre foto).
   Tamanhos: P 32, M 40, G 48. */
.btn-icone{
  display:inline-grid; place-items:center; flex:none;
  width:var(--alt-m); height:var(--alt-m); padding:0;
  border:1px solid var(--cor-borda-media); border-radius:var(--raio-capsula);
  background:var(--cor-superficie-2); color:var(--cor-texto-titulo);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color var(--dur-rapida) var(--curva-padrao), border-color var(--dur-rapida) var(--curva-padrao), transform var(--dur-instantanea) var(--curva-padrao);
}
.btn-icone .ds-icone{ width:var(--icone-m); height:var(--icone-m); }
.btn-icone--p{ width:var(--alt-p); height:var(--alt-p); }
.btn-icone--p .ds-icone{ width:var(--icone-p); height:var(--icone-p); }
.btn-icone--g{ width:var(--alt-g); height:var(--alt-g); }
.btn-icone--g .ds-icone{ width:var(--icone-g); height:var(--icone-g); }
.btn-icone:hover, .btn-icone.is-hover{ background:var(--cor-superficie-3); border-color:var(--cor-borda-forte); }
.btn-icone:focus-visible, .btn-icone.is-foco{ outline:none; box-shadow:var(--anel-foco); }
.btn-icone:active{ transform:scale(.94); }
.btn-icone[disabled]{ opacity:.3; cursor:default; pointer-events:none; }
.btn-icone--vidro{ background:var(--cor-sobre-foto); border-color:var(--cor-borda-vidro); -webkit-backdrop-filter:var(--desfoque-vidro); backdrop-filter:var(--desfoque-vidro); }

/* ---------- ABA ----------
   Item selecionável numa fileira: filtro, aba, escolha de ferramenta.
   Ativa com aria-pressed, aria-selected, aria-current ou .is-ativa.
   Tamanhos: P 32 (padrão), M 40. Aceita ícone ou logo à esquerda. */
.aba{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--esp-2);
  height:var(--alt-p); padding:0 var(--esp-4);
  border:1px solid var(--cor-borda-media); border-radius:var(--raio-capsula);
  background:transparent; color:var(--cor-texto-corpo);
  font:var(--tipo-controle-p); white-space:nowrap; text-decoration:none; cursor:pointer;
  transition:background-color var(--dur-rapida) var(--curva-padrao), border-color var(--dur-rapida) var(--curva-padrao), color var(--dur-rapida) var(--curva-padrao);
}
.aba--m{ height:var(--alt-m); padding:0 var(--esp-5); font:var(--tipo-controle); }
.aba:hover, .aba.is-hover{ border-color:var(--cor-borda-forte); color:var(--cor-texto-titulo); }
.aba:focus-visible, .aba.is-foco{ outline:none; box-shadow:var(--anel-foco); }
.aba[aria-pressed="true"], .aba[aria-selected="true"], .aba[aria-current], .aba.is-ativa{
  background:var(--cor-acao-suave); border-color:var(--cor-acao-borda); color:var(--cor-acao-texto);
}
.aba__img{ width:18px; height:18px; margin-left:calc(-1 * var(--esp-2)); border-radius:var(--raio-pp); object-fit:contain; flex:none; }

/* ---------- ITEM DE MENU ----------
   Navegação principal. Lateral (plataforma) ou cápsula (topo das landings). */
.menu-item{
  display:flex; align-items:center; gap:var(--esp-3);
  height:var(--alt-m); padding:0 var(--esp-3);
  border-radius:var(--raio-menu);
  color:var(--cor-texto-corpo); font:500 var(--tam-14)/1 var(--familia-texto); text-decoration:none; white-space:nowrap;
  transition:background-color var(--dur-rapida) var(--curva-padrao), color var(--dur-rapida) var(--curva-padrao);
}
.menu-item .ds-icone{ width:var(--icone-g); height:var(--icone-g); stroke-width:1.5; }
.menu-item:hover, .menu-item.is-hover{ background:var(--cor-vidro); color:var(--cor-texto-titulo); }
.menu-item:focus-visible, .menu-item.is-foco{ outline:none; box-shadow:var(--anel-foco); }
.menu-item[aria-current="page"], .menu-item.is-ativa{ background:var(--cor-acao-suave); color:var(--cor-acao-texto); }
.menu-item--capsula{ display:inline-flex; height:var(--alt-menu-topo); border-radius:var(--raio-capsula); padding:0 var(--esp-4); }

/* ---------- SELO ----------
   Marcador que não é clicável. Sempre cápsula, Onest 12, sem caixa alta.
   Tipos: neutro, marca (laranja translúcido), ação (laranja cheio),
   claro (branco, para destaque máximo) e foto (sobre imagem ou vídeo). */
.selo{
  display:inline-flex; align-items:center; gap:6px;
  height:var(--alt-selo); padding:0 10px;
  border:1px solid var(--cor-borda-sutil); border-radius:var(--raio-capsula);
  background:var(--cor-superficie-2); color:var(--cor-texto-corpo);
  font:var(--tipo-selo); letter-spacing:0; text-transform:none; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.selo .ds-icone{ width:12px; height:12px; }
/* selo com rótulo: "Aula" leve e translúcido, o valor ("6.1") forte */
.selo__rot{ font-weight:400; opacity:.72; }
.selo__img{ width:16px; height:16px; margin-left:-5px; border-radius:var(--raio-pp); object-fit:contain; flex:none; }
.selo--marca{ background:var(--cor-acao-suave); border-color:var(--cor-acao-borda); color:var(--cor-acao-texto); }
.selo--acao{ background:var(--cor-acao); border-color:var(--cor-acao); color:var(--cor-texto-sobre-acao); }
.selo--claro{ background:var(--branco); border-color:var(--branco); color:var(--ink-0); }
.selo--aberta{ background:var(--cor-aberta-suave); border-color:var(--cor-aberta-borda); color:var(--cor-aberta); }   /* aula aberta (azul suave) */
.selo--foto{ background:var(--cor-sobre-foto); border-color:transparent; color:var(--branco); -webkit-backdrop-filter:var(--desfoque-vidro); backdrop-filter:var(--desfoque-vidro); }

/* selo grande (05/11): a marca no tamanho de app (24 px), para listar canais */
.selo--g{ height:var(--alt-selo-g, 40px); padding:0 14px 0 8px; gap:10px; font-size:var(--tam-14); font-weight:500; color:var(--cor-texto-titulo); background:var(--cor-superficie-2); }
.selo--g .selo__img{ width:24px; height:24px; margin-left:0; border-radius:var(--raio-p); }
.selo__ic{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:var(--raio-p); background:var(--cor-acao-suave); color:var(--cor-acao-texto); flex:none; }
.selo__ic .ds-icone{ width:14px; height:14px; }

/* ---------- ANÚNCIO (05/11) ----------
   Banner de divulgação num card: a marca sozinha no topo, a mídia (vídeo ou foto)
   na parte de cima, um véu preto por baixo do texto, título (em = segunda linha
   apagada), uma frase e o botão outline (.pill). Um ou vários: com
   .anuncios--passador os anúncios se revezam e o pé (.anuncio__pe) traz pontos e
   setas. Tudo regulado por tokens; por anúncio: --anuncio-escala e --anuncio-foco. */
.anuncios{
  --anuncio-pad:clamp(22px, 2.2vw, 28px); --anuncio-alt:440px; --anuncio-midia-alt:62%;
  --anuncio-marca-alt:24px; --anuncio-veu-alt:46%; --anuncio-pe-alt:44px;
  position:relative; isolation:isolate; overflow:hidden; min-height:var(--anuncio-alt);
  border:1px solid var(--cor-borda-sutil); border-radius:var(--raio-painel);
  background:var(--ink-1, var(--ink-1)); color:var(--cor-texto-titulo);
}
.anuncio__marca{ position:absolute; z-index:3; top:var(--anuncio-pad); left:var(--anuncio-pad); display:block; width:auto; height:var(--anuncio-marca-alt); pointer-events:none; }
.anuncio{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--anuncio-pad); opacity:0; visibility:hidden;
  transition:opacity .6s var(--curva-saida), visibility 0s linear .6s;
}
.anuncio.is-on, .anuncios > .anuncio:only-of-type{ opacity:1; visibility:visible; transition:opacity .6s var(--curva-saida), visibility 0s; }
.anuncios--passador .anuncio{ padding-bottom:calc(var(--anuncio-pad) + var(--anuncio-pe-alt)); }
.anuncio__midia{ position:absolute; z-index:-1; inset:0 0 auto 0; height:var(--anuncio-midia-alt); }
.anuncio__midia > video, .anuncio__midia > img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:var(--anuncio-foco, 50% 30%);
  transform:scale(var(--anuncio-escala, 1)); transform-origin:50% 30%;
  -webkit-mask-image:linear-gradient(180deg, var(--ink-0) 70%, transparent 100%); mask-image:linear-gradient(180deg, var(--ink-0) 70%, transparent 100%);
}
.anuncio__midia::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, var(--veu) 0%, transparent 24%); }
.anuncio::before{ content:""; position:absolute; inset:auto 0 0 0; height:var(--anuncio-veu-alt); z-index:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--ink-0) 55%, transparent) 30%, color-mix(in srgb, var(--ink-0) 88%, transparent) 62%, var(--ink-0) 100%); }
.anuncio__txt{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.anuncio__t{ margin:0; max-width:13ch; font-family:var(--familia-display, var(--familia-display)); font-size:clamp(var(--tam-24), 2.1vw, var(--tam-32)); font-weight:800; line-height:.96; letter-spacing:-.035em; color:var(--cor-texto-titulo); text-wrap:balance; }
.anuncio__t em{ font-style:normal; color:var(--sunset-400, var(--sunset-400)); }   /* destaque em laranja, como em todos os banners */
.anuncio__d{ margin:0; max-width:22em; font-size:var(--tam-14); line-height:1.5; color:var(--cor-texto-corpo); text-wrap:balance; }
.anuncio__cta{ margin-top:6px; }
.anuncio__pe{ position:absolute; z-index:2; left:var(--anuncio-pad); right:var(--anuncio-pad); bottom:clamp(20px, 2vw, 26px); display:flex; align-items:center; justify-content:space-between; gap:12px; }
@media (prefers-reduced-motion: reduce){ .anuncio{ transition:none; } }

/* contador: número de notificação */
.contador{
  display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px;
  border-radius:var(--raio-capsula); background:var(--cor-acao); color:var(--cor-texto-sobre-acao);
  font:700 var(--tam-11)/1 var(--familia-texto); font-variant-numeric:tabular-nums;
}

/* ---------- DURAÇÃO ----------
   O tempo de uma aula. Um componente, três usos:
   card (cápsula sobre a capa), lista (texto suave na linha)
   e player (cápsula de vidro sobre o vídeo). */
.duracao{
  display:inline-flex; align-items:center; gap:var(--esp-1);
  font:var(--tipo-meta-p); letter-spacing:0; text-transform:none; white-space:nowrap;
  font-variant-numeric:tabular-nums; color:var(--cor-texto-suave);
}
.duracao .ds-icone{ width:12px; height:12px; stroke-width:1.8; }
.duracao--card{
  height:var(--alt-selo); padding:0 var(--esp-2) 0 6px; border-radius:var(--raio-capsula);
  background:var(--cor-sobre-foto); color:var(--branco);
  -webkit-backdrop-filter:var(--desfoque-vidro); backdrop-filter:var(--desfoque-vidro);
}
.duracao--lista{ color:var(--cor-texto-suave); }
.duracao--player{
  height:var(--alt-p); padding:0 var(--esp-3) 0 10px; border-radius:var(--raio-capsula);
  background:var(--cor-sobre-foto); color:var(--branco); font:var(--tipo-meta);
  -webkit-backdrop-filter:var(--desfoque-vidro); backdrop-filter:var(--desfoque-vidro);
}
.duracao--player .ds-icone{ width:14px; height:14px; }

/* ---------- META ----------
   Contagem e soma: "5 aulas · 39 min". Sempre caixa baixa. */
.meta{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:0 var(--esp-2);
  font:var(--tipo-meta); color:var(--cor-texto-suave); font-variant-numeric:tabular-nums;
}
.meta__sep{ color:var(--ink-6); }

@media (prefers-reduced-motion: reduce){
  .btn, .btn-icone, .aba, .menu-item{ transition:none; }
  .btn:active, .btn-icone:active{ transform:none; }
}

/* ---------- Peça: o que vem num pacote, no estilo de empty state (04/11; home e plataforma) ----------
   Um quadrado por peça: ícone grande num círculo suave, o nome e só os
   números das aulas. A peça inteira leva à primeira aula; a descrição fica
   no title. 4 colunas no desktop, 2 no celular. */
.pecas{ display:grid; gap:var(--fb-vao); grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px){ .pecas{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.peca{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--esp-3); text-align:center;
  min-height:var(--peca-alt); padding:var(--esp-6) var(--esp-4); border:1px dashed var(--cor-borda-media, var(--cor-borda-media)); border-radius:var(--raio-painel);
  background:var(--ink-1, var(--ink-1)); transition:border-color var(--dur-rapida) var(--curva-padrao), background var(--dur-rapida) var(--curva-padrao); }
.peca:hover{ border-color:var(--cor-borda-media, var(--cor-borda-media)); background:var(--ink-2, var(--ink-2)); }
.peca__link{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
.peca__link:focus-visible{ outline:none; box-shadow:var(--anel-foco); }
.peca__ic{ display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:color-mix(in srgb, var(--agua) 6%, transparent); color:var(--cor-texto-corpo, var(--agua)); transition:background var(--dur-rapida), color var(--dur-rapida); }
.peca--fluxo .peca__ic{ background:var(--cor-acao-suave); color:var(--sunset-400, var(--sunset-400)); }
.peca__ic svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.peca__t{ margin:0; font-family:var(--familia-texto); font-weight:600; font-size:var(--tam-15); line-height:1.25; letter-spacing:-.01em; color:var(--cor-texto-titulo); text-wrap:balance; }
.peca__aulas{ position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin:0; }
.peca__aulas a{ padding:3px 9px; border-radius:var(--raio-capsula, var(--raio-capsula)); background:var(--cor-borda-sutil); font-size:var(--tam-12); font-weight:500; color:var(--cor-texto-suave, var(--ink-7)); text-decoration:none; transition:color var(--dur-rapida), background var(--dur-rapida); }
/* tipo da peça, no lugar das aulas (o Hot Pack é à parte do curso) */
.peca__tipo{ margin:0; font-size:var(--tam-13); color:var(--cor-texto-suave, var(--ink-7)); }
.peca__aulas a:hover{ color:var(--cor-texto-titulo); background:color-mix(in srgb, var(--agua) 16%, transparent); }

/* ============================================================
   COMPONENTES DE INTERFACE (06/11) · referência de nomes: Nuxt UI
   Cada bloco diz o nome no Nuxt UI e a classe nossa.
   Só tokens. Estados forçados (.is-hover, .is-foco, .is-erro)
   existem para a biblioteca mostrar os estados parados.
   ============================================================ */

/* ---------- FormField · .form-campo ----------
   rótulo + controle + ajuda/erro. Envolve Input, Textarea, Select etc. */
.form-campo{ display:grid; gap:var(--esp-2); min-width:0; }
.form-campo__rot{ display:flex; justify-content:space-between; gap:var(--esp-2); font:var(--rotulo); color:var(--cor-texto-titulo); }
.form-campo__rot small{ font:var(--ajuda); color:var(--cor-texto-suave); }
.form-campo__obrig{ color:var(--cor-acao-texto); margin-left:2px; }
.form-campo__ajuda{ margin:0; font:var(--ajuda); color:var(--cor-texto-suave); }
.form-campo__erro{ margin:0; font:var(--ajuda); color:var(--cor-erro); display:flex; gap:6px; align-items:center; }

/* ---------- Input · .entrada ----------
   Tamanhos P 32, M 40 (padrão), G 48. Ícone à esquerda/direita com .entrada__ic. */
.entrada{ position:relative; display:flex; align-items:center; gap:var(--esp-2); height:var(--alt-m); padding:0 var(--campo-pad);
  background:var(--campo-fundo); border:1px solid var(--campo-borda); border-radius:var(--campo-raio); color:var(--cor-texto-titulo);
  transition:border-color var(--dur-rapida) var(--curva-padrao), background-color var(--dur-rapida) var(--curva-padrao), box-shadow var(--dur-rapida) var(--curva-padrao); }
.entrada > input, .entrada > select{ flex:1; min-width:0; height:100%; padding:0; border:0; outline:0; background:transparent; color:inherit; font:var(--campo-texto); }
.entrada > input::placeholder, .area::placeholder{ color:var(--campo-placeholder); }
.entrada:hover, .entrada.is-hover{ border-color:var(--campo-borda-hover); background:var(--campo-fundo-hover); }
.entrada:focus-within, .entrada.is-foco{ border-color:var(--campo-borda-foco); background:var(--campo-fundo); }
.entrada.is-erro, .area.is-erro{ border-color:var(--cor-erro-borda); }
.entrada.is-erro:focus-within{ box-shadow:0 0 0 3px var(--cor-erro-suave); border-color:var(--cor-erro); }
.entrada.is-desab, .entrada:has(> input:disabled){ opacity:.45; pointer-events:none; }
.entrada--p{ height:var(--alt-p); padding:0 var(--esp-3); border-radius:var(--raio-menu); }
.entrada--p > input{ font-size:var(--tam-13); }
.entrada--g{ height:var(--alt-g); }
.entrada__ic{ flex:none; width:var(--icone-m); height:var(--icone-m); color:var(--cor-texto-suave); stroke:currentColor; fill:none; stroke-width:var(--icone-traco); stroke-linecap:round; stroke-linejoin:round; }
.entrada__fim{ flex:none; font:var(--tipo-meta-p); color:var(--cor-texto-suave); }
.entrada__botao{ flex:none; display:grid; place-items:center; width:28px; height:28px; margin-right:-8px; padding:0; border:0; border-radius:var(--raio-p); background:transparent; color:var(--cor-texto-suave); cursor:pointer; }
.entrada__botao:hover{ background:var(--cor-vidro-forte); color:var(--cor-texto-titulo); }
.entrada__botao .ds-icone{ width:var(--icone-p); height:var(--icone-p); }

/* Select (nativo) · .entrada.entrada--selecao */
.entrada--selecao > select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:24px; }
.entrada--selecao > select option{ background:var(--sobre-fundo); color:var(--cor-texto-titulo); }
.entrada--selecao::after{ content:""; position:absolute; right:var(--campo-pad); top:50%; width:8px; height:8px; margin-top:-6px; border:solid var(--cor-texto-suave); border-width:0 1.6px 1.6px 0; transform:rotate(45deg); pointer-events:none; }

/* InputDate / InputTime (nativos) */
.entrada > input[type="date"], .entrada > input[type="time"]{ color-scheme:dark; }
.entrada > input::-webkit-calendar-picker-indicator{ opacity:.55; cursor:pointer; filter:invert(1); }

/* ---------- Textarea · .area ---------- */
.area{ display:block; width:100%; min-height:104px; padding:var(--esp-3) var(--campo-pad); resize:vertical;
  background:var(--campo-fundo); border:1px solid var(--campo-borda); border-radius:var(--campo-raio);
  color:var(--cor-texto-titulo); font:var(--campo-texto); line-height:1.5; outline:0;
  transition:border-color var(--dur-rapida) var(--curva-padrao), box-shadow var(--dur-rapida) var(--curva-padrao); }
.area:hover, .area.is-hover{ border-color:var(--campo-borda-hover); }
.area:focus, .area.is-foco{ border-color:var(--campo-borda-foco); }
.area[data-cresce]{ resize:none; overflow:hidden; }

/* ---------- Checkbox · .marcar  /  RadioGroup · .marcar--radio ----------
   input nativo escondido no visual; a caixa é desenhada. Indeterminado com .is-meio. */
.marcar{ display:inline-flex; align-items:flex-start; gap:var(--esp-3); cursor:pointer; font:var(--tipo-corpo); font-size:var(--tam-14); color:var(--cor-texto-titulo); -webkit-tap-highlight-color:transparent; }
.marcar > input{ appearance:none; -webkit-appearance:none; flex:none; display:grid; place-items:center; width:var(--marca-tam); height:var(--marca-tam); margin:1px 0 0;
  border:1.5px solid var(--cor-borda-forte); border-radius:var(--marca-raio); background:var(--campo-fundo); cursor:pointer;
  transition:background-color var(--dur-rapida) var(--curva-padrao), border-color var(--dur-rapida) var(--curva-padrao); }
.marcar > input::after{ content:""; width:5px; height:9px; margin-top:-2px; border:solid var(--cor-texto-sobre-acao); border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); transition:transform var(--dur-rapida) var(--curva-saida); }
.marcar:hover > input{ border-color:var(--cor-texto-corpo); }
.marcar > input:checked, .marcar > input:indeterminate, .marcar.is-meio > input{ background:var(--cor-acao); border-color:var(--cor-acao); }
.marcar > input:checked::after{ transform:rotate(45deg) scale(1); }
.marcar > input:indeterminate::after, .marcar.is-meio > input::after{ width:9px; height:0; margin:0; border-width:0 0 2px 0; transform:none; }
.marcar > input:focus-visible, .marcar.is-foco > input{ outline:none; box-shadow:var(--anel-foco); }
.marcar > input:disabled{ opacity:.4; cursor:not-allowed; }
.marcar:has(> input:disabled){ opacity:.55; cursor:not-allowed; }
.marcar__txt{ display:grid; gap:2px; }
.marcar__txt small{ font:var(--ajuda); color:var(--cor-texto-suave); }
.marcar--radio > input{ border-radius:50%; }
.marcar--radio > input::after{ width:8px; height:8px; margin:0; border:0; border-radius:50%; background:var(--cor-texto-sobre-acao); transform:scale(0); }
.marcar--radio > input:checked::after{ transform:scale(1); }
/* CheckboxGroup / RadioGroup · .grupo-marcar (lista) e .grupo-marcar--cards (cartões) */
.grupo-marcar{ display:grid; gap:var(--esp-3); margin:0; padding:0; border:0; }
.grupo-marcar > legend{ margin-bottom:var(--esp-3); padding:0; font:var(--rotulo); color:var(--cor-texto-titulo); }
.grupo-marcar--linha{ display:flex; flex-wrap:wrap; gap:var(--esp-6); }
.grupo-marcar--cards{ gap:var(--esp-2); }
.grupo-marcar--cards .marcar{ padding:var(--esp-4); border:1px solid var(--cor-borda-media); border-radius:var(--campo-raio); background:var(--cor-superficie-1); transition:border-color var(--dur-rapida) var(--curva-padrao), background-color var(--dur-rapida) var(--curva-padrao); }
.grupo-marcar--cards .marcar:hover{ border-color:var(--cor-borda-forte); }
.grupo-marcar--cards .marcar:has(> input:checked){ border-color:var(--cor-acao-borda); background:var(--cor-acao-suave); }

/* ---------- Switch · .chave ---------- */
.chave{ display:inline-flex; align-items:center; gap:var(--esp-3); cursor:pointer; font:var(--tipo-corpo); font-size:var(--tam-14); color:var(--cor-texto-titulo); }
.chave > input{ appearance:none; -webkit-appearance:none; position:relative; flex:none; width:var(--chave-larg); height:var(--chave-alt); margin:0;
  border-radius:var(--raio-capsula); background:var(--ink-5); cursor:pointer; transition:background-color var(--dur-media) var(--curva-padrao); }
.chave > input::after{ content:""; position:absolute; top:3px; left:3px; width:calc(var(--chave-alt) - 6px); height:calc(var(--chave-alt) - 6px); border-radius:50%; background:var(--branco);
  transition:transform var(--dur-media) var(--curva-saida); }
.chave > input:checked{ background:var(--cor-acao); }
.chave > input:checked::after{ transform:translateX(calc(var(--chave-larg) - var(--chave-alt))); }
.chave > input:focus-visible, .chave.is-foco > input{ outline:none; box-shadow:var(--anel-foco); }
.chave:has(> input:disabled){ opacity:.45; cursor:not-allowed; }
.chave--p{ --chave-larg:32px; --chave-alt:18px; font-size:var(--tam-13); }
.chave--g{ --chave-larg:48px; --chave-alt:28px; }

/* ---------- Slider · .faixa ----------
   input range nativo; o preenchimento usa --faixa-v (0–100%), que o componentes.js atualiza. */
.faixa{ --faixa-v:50%; display:block; width:100%; height:var(--faixa-pino); margin:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; }
.faixa::-webkit-slider-runnable-track{ height:var(--faixa-alt); border-radius:var(--raio-capsula); background:linear-gradient(90deg, var(--cor-acao) var(--faixa-v), var(--ink-5) var(--faixa-v)); }
.faixa::-moz-range-track{ height:var(--faixa-alt); border-radius:var(--raio-capsula); background:var(--ink-5); }
.faixa::-moz-range-progress{ height:var(--faixa-alt); border-radius:var(--raio-capsula); background:var(--cor-acao); }
.faixa::-webkit-slider-thumb{ -webkit-appearance:none; width:var(--faixa-pino); height:var(--faixa-pino); margin-top:calc((var(--faixa-alt) - var(--faixa-pino)) / 2); border:3px solid var(--cor-acao); border-radius:50%; background:var(--branco); transition:transform var(--dur-rapida) var(--curva-padrao); }
.faixa::-moz-range-thumb{ width:12px; height:12px; border:3px solid var(--cor-acao); border-radius:50%; background:var(--branco); }
.faixa:hover::-webkit-slider-thumb{ transform:scale(1.12); }
.faixa:focus-visible{ outline:none; }
.faixa:focus-visible::-webkit-slider-thumb{ box-shadow:var(--anel-foco); }
.faixa:disabled{ opacity:.4; cursor:not-allowed; }
.faixa-campo{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--esp-4); align-items:center; }
.faixa-campo output{ min-width:44px; font:var(--tipo-meta); color:var(--cor-texto-titulo); text-align:right; font-variant-numeric:tabular-nums; }
.faixa-marcas{ display:flex; justify-content:space-between; margin-top:var(--esp-2); font:var(--tipo-meta-p); color:var(--cor-texto-suave); }

/* ---------- InputNumber · .numero ---------- */
.numero{ display:inline-flex; align-items:center; height:var(--alt-m); border:1px solid var(--campo-borda); border-radius:var(--campo-raio); background:var(--campo-fundo); overflow:hidden; }
.numero:focus-within{ border-color:var(--campo-borda-foco); }
.numero > input{ width:64px; height:100%; padding:0; border:0; outline:0; background:transparent; color:var(--cor-texto-titulo); font:var(--campo-texto); text-align:center; font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.numero > input::-webkit-inner-spin-button, .numero > input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.numero > button{ display:grid; place-items:center; width:var(--alt-m); height:100%; padding:0; border:0; background:transparent; color:var(--cor-texto-corpo); cursor:pointer; transition:background-color var(--dur-rapida) var(--curva-padrao); }
.numero > button:hover{ background:var(--cor-vidro-forte); color:var(--cor-texto-titulo); }
.numero > button .ds-icone{ width:var(--icone-p); height:var(--icone-p); }

/* ---------- PinInput · .pin ---------- 6 caixas; o componentes.js avança, volta e aceita colar. */
.pin{ display:inline-flex; gap:var(--esp-2); max-width:100%; }
.pin > input{ flex:0 1 var(--alt-g); min-width:0; width:var(--alt-g); height:56px; padding:0; border:1px solid var(--campo-borda); border-radius:var(--campo-raio); background:var(--campo-fundo); outline:0;
  color:var(--cor-texto-titulo); font:600 var(--tam-20)/1 var(--familia-texto); text-align:center; font-variant-numeric:tabular-nums; caret-color:var(--cor-acao);
  transition:border-color var(--dur-rapida) var(--curva-padrao), box-shadow var(--dur-rapida) var(--curva-padrao); }
.pin > input:hover{ border-color:var(--campo-borda-hover); }
.pin > input:focus{ border-color:var(--campo-borda-foco); }
.pin > input:not(:placeholder-shown){ border-color:var(--cor-borda-forte); }
.pin__vao{ flex:none; align-self:center; width:10px; height:2px; border-radius:var(--raio-fio); background:var(--cor-borda-forte); }
.pin.is-erro > input{ border-color:var(--cor-erro-borda); }
.pin.is-ok > input{ border-color:var(--cor-sucesso-borda); }
.pin--p > input{ width:var(--alt-m); height:var(--alt-g); font-size:var(--tam-17); }

/* ---------- InputTags · .etiquetas ---------- */
.etiquetas{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:var(--alt-m); padding:5px var(--esp-2); border:1px solid var(--campo-borda); border-radius:var(--campo-raio); background:var(--campo-fundo); cursor:text; }
.etiquetas:focus-within{ border-color:var(--campo-borda-foco); }
.etiquetas > input{ flex:1; min-width:96px; height:28px; padding:0 6px; border:0; outline:0; background:transparent; color:var(--cor-texto-titulo); font:var(--campo-texto); }
.etiqueta{ display:inline-flex; align-items:center; gap:4px; height:28px; padding:0 4px 0 10px; border-radius:var(--raio-p); background:var(--cor-vidro-forte); color:var(--cor-texto-titulo); font:var(--tipo-selo); }
.etiqueta > button{ display:grid; place-items:center; width:20px; height:20px; padding:0; border:0; border-radius:var(--raio-p); background:transparent; color:var(--cor-texto-suave); cursor:pointer; }
.etiqueta > button:hover{ background:var(--cor-vidro-forte); color:var(--cor-texto-titulo); }
.etiqueta > button .ds-icone{ width:12px; height:12px; stroke-width:2; }

/* ---------- InputRating · .avaliacao ---------- chamas da marca no lugar de estrelas */
.avaliacao{ display:inline-flex; gap:2px; }
.avaliacao > button{ display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; background:transparent; color:var(--ink-5); cursor:pointer; transition:color var(--dur-rapida) var(--curva-padrao), transform var(--dur-instantanea) var(--curva-padrao); }
/* a chama oficial (o arquivo do logotipo) como máscara, pintada pela cor do botão */
.avaliacao__chama{ display:block; width:22px; height:26px; background:currentColor; -webkit-mask:url(/themes/hot/assets/logo/oficial/icone-chama.svg) center/contain no-repeat; mask:url(/themes/hot/assets/logo/oficial/icone-chama.svg) center/contain no-repeat; }
.avaliacao > button.is-on{ color:var(--cor-acao); }
.avaliacao > button:active{ transform:scale(.9); }

/* ---------- SelectMenu / InputMenu · .escolha ----------
   botão + lista com busca. A lista é .menu (o mesmo do DropdownMenu). */
.escolha{ position:relative; }
.escolha > .entrada{ width:100%; cursor:pointer; text-align:left; font:var(--campo-texto); color:var(--cor-texto-titulo); }
.escolha > .entrada > span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:var(--campo-texto); }
.escolha > .entrada > span:empty::before{ content:attr(data-vazio); color:var(--campo-placeholder); }
.escolha > .menu{ top:calc(100% + 6px); left:0; right:0; width:auto; }

/* ---------- Listbox · .lista-escolha ---------- */
.lista-escolha{ margin:0; padding:var(--esp-1); list-style:none; border:1px solid var(--campo-borda); border-radius:var(--campo-raio); background:var(--campo-fundo); max-height:220px; overflow:auto; }

/* ---------- ColorPicker · .cor-picker ---------- */
.cor-picker{ display:grid; gap:var(--esp-3); width:252px; padding:var(--esp-3); border:1px solid var(--sobre-borda); border-radius:var(--sobre-raio); background:var(--sobre-fundo); }
.cor-picker__sv{ position:relative; height:150px; border-radius:var(--raio-menu); background:linear-gradient(0deg,var(--ink-0),transparent), linear-gradient(90deg,var(--branco),hsl(var(--cp-h,8) 100% 50%)); cursor:crosshair; touch-action:none; }
.cor-picker__h{ position:relative; height:12px; border-radius:var(--raio-capsula); background:linear-gradient(90deg,red,yellow,lime,cyan,blue,magenta,red); cursor:pointer; touch-action:none; }
.cor-picker__pino{ position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px; border:2px solid var(--branco); border-radius:50%; box-shadow:0 0 0 1px color-mix(in srgb, var(--ink-0) 40%, transparent); pointer-events:none; }
.cor-picker__h .cor-picker__pino{ top:50%; }
.cor-picker__linha{ display:flex; gap:var(--esp-2); align-items:center; }
.cor-picker__amostra{ flex:none; width:var(--alt-p); height:var(--alt-p); border-radius:var(--raio-p); border:1px solid var(--cor-borda-media); }
.cor-picker__tokens{ display:flex; flex-wrap:wrap; gap:6px; }
.cor-picker__tokens button{ width:22px; height:22px; padding:0; border:1px solid var(--cor-borda-media); border-radius:var(--raio-p); cursor:pointer; }
.cor-picker__tokens button:hover{ transform:scale(1.1); }

/* ---------- FileUpload · .envio ---------- */
.envio{ display:grid; place-items:center; gap:var(--esp-2); padding:var(--esp-8) var(--esp-6); border:1.5px dashed var(--cor-borda-forte); border-radius:var(--raio-card); background:var(--cor-superficie-1); text-align:center; cursor:pointer;
  transition:border-color var(--dur-rapida) var(--curva-padrao), background-color var(--dur-rapida) var(--curva-padrao); }
.envio:hover, .envio.is-sobre{ border-color:var(--cor-acao); background:var(--cor-acao-suave); }
.envio > input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.envio__ic{ display:grid; place-items:center; width:var(--alt-g); height:var(--alt-g); border-radius:50%; background:var(--cor-vidro-forte); color:var(--cor-texto-titulo); }
.envio__t{ margin:0; font:var(--tipo-controle); color:var(--cor-texto-titulo); }
.envio__d{ margin:0; font:var(--ajuda); color:var(--cor-texto-suave); }
.envio-lista{ display:grid; gap:var(--esp-2); margin:var(--esp-3) 0 0; padding:0; list-style:none; }
.envio-lista li{ display:flex; align-items:center; gap:var(--esp-3); padding:var(--esp-2) var(--esp-3); border:1px solid var(--cor-borda-sutil); border-radius:var(--raio-menu); background:var(--cor-superficie-2); font-size:var(--tam-13); color:var(--cor-texto-titulo); }
.envio-lista li span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.envio-lista li small{ color:var(--cor-texto-suave); }

/* ---------- FieldGroup · .juntos ---------- botões ou campo+botão colados */
.juntos{ display:inline-flex; }
.juntos > *{ border-radius:0 !important; }
.juntos > * + *{ margin-left:-1px; }
.juntos > :first-child{ border-top-left-radius:var(--raio-capsula) !important; border-bottom-left-radius:var(--raio-capsula) !important; }
.juntos > :last-child{ border-top-right-radius:var(--raio-capsula) !important; border-bottom-right-radius:var(--raio-capsula) !important; }
.juntos > .entrada:first-child{ border-top-left-radius:var(--campo-raio) !important; border-bottom-left-radius:var(--campo-raio) !important; }
.juntos > .btn:last-child{ border-top-right-radius:var(--campo-raio) !important; border-bottom-right-radius:var(--campo-raio) !important; }
.juntos > :focus-visible{ position:relative; z-index:1; }

/* ---------- Alert · .aviso ---------- tons: info, sucesso, aviso (âmbar), erro, marca */
.aviso{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--esp-3); align-items:start; padding:var(--esp-4); border:1px solid var(--cor-info-borda); border-radius:var(--raio-card); background:var(--cor-info-suave); color:var(--cor-texto-corpo); font-size:var(--tam-14); }
.aviso > .ds-icone{ width:var(--icone-g); height:var(--icone-g); color:var(--cor-info); }
.aviso__t{ margin:0 0 2px; font:var(--tipo-controle); color:var(--cor-texto-titulo); }
.aviso p{ margin:0; }
.aviso__acoes{ display:flex; gap:var(--esp-2); margin-top:var(--esp-3); }
.aviso--sucesso{ border-color:var(--cor-sucesso-borda); background:var(--cor-sucesso-suave); }
.aviso--sucesso > .ds-icone{ color:var(--cor-sucesso); }
.aviso--atencao{ border-color:var(--cor-aviso-borda); background:var(--cor-aviso-suave); }
.aviso--atencao > .ds-icone{ color:var(--cor-aviso); }
.aviso--erro{ border-color:var(--cor-erro-borda); background:var(--cor-erro-suave); }
.aviso--erro > .ds-icone{ color:var(--cor-erro); }
.aviso--marca{ border-color:var(--cor-acao-borda); background:var(--cor-acao-suave); }
.aviso--marca > .ds-icone{ color:var(--cor-acao-texto); }

/* ---------- Banner · .faixa-aviso ---------- tira no topo da página */
.faixa-aviso{ display:flex; align-items:center; justify-content:center; gap:var(--esp-3); min-height:var(--alt-m); padding:var(--esp-2) var(--esp-12); position:relative; background:var(--cor-acao); color:var(--cor-texto-sobre-acao); font:var(--tipo-controle-p); text-align:center; }
.faixa-aviso a{ color:inherit; font-weight:700; }
.faixa-aviso > button{ position:absolute; right:var(--esp-3); top:50%; transform:translateY(-50%); display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:var(--raio-p); background:transparent; color:inherit; cursor:pointer; }
.faixa-aviso > button:hover{ background:color-mix(in srgb, var(--ink-0) 12%, transparent); }
.faixa-aviso--neutra{ background:var(--cor-superficie-2); color:var(--cor-texto-titulo); border-bottom:1px solid var(--cor-borda-sutil); }

/* ---------- Avatar · .avatar  /  AvatarGroup · .avatares ---------- */
.avatar{ position:relative; display:inline-grid; place-items:center; flex:none; width:var(--alt-m); height:var(--alt-m); aspect-ratio:1; border-radius:50%; background:var(--ink-4); color:var(--cor-texto-titulo); font:600 var(--tam-14)/1 var(--familia-texto); overflow:visible; }
.avatar > img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; border-radius:50%; object-fit:cover; object-position:var(--avatar-foco, 50% 22%); }   /* a foto fica presa ao círculo, qualquer que seja a proporção dela */
.avatar--p{ width:var(--alt-p); height:var(--alt-p); font-size:var(--tam-12); }
.avatar--g{ width:var(--alt-g); height:var(--alt-g); font-size:var(--tam-17); }
.avatar--xg{ width:64px; height:64px; font-size:var(--tam-20); }
.avatares{ display:inline-flex; }
.avatares > .avatar{ box-shadow:0 0 0 2px var(--cor-fundo); }
.avatares > .avatar + .avatar{ margin-left:-10px; }
/* Chip · .indicador: ponto de estado no canto do avatar ou ícone (não é bolinha decorativa) */
.indicador{ position:absolute; right:0; bottom:0; width:10px; height:10px; border-radius:50%; background:var(--cor-sucesso); box-shadow:0 0 0 2px var(--cor-fundo); }
.indicador--acao{ background:var(--cor-acao); }
.indicador--topo{ top:0; bottom:auto; }

/* ---------- Kbd · .tecla ---------- */
.tecla{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border:1px solid var(--cor-borda-media); border-bottom-width:2px; border-radius:var(--raio-p); background:var(--cor-superficie-2); color:var(--cor-texto-corpo); font:500 var(--tam-12)/1 var(--familia-texto); }

/* ---------- Progress · .progresso ---------- */
.progresso{ position:relative; height:6px; border-radius:var(--raio-capsula); background:var(--ink-4); overflow:hidden; }
.progresso > i{ display:block; height:100%; width:var(--v,40%); border-radius:inherit; background:var(--cor-acao); transition:width var(--dur-media) var(--curva-padrao); }
.progresso--p{ height:4px; }
.progresso--indef > i{ width:36%; animation:progresso-vai 1.3s var(--curva-padrao) infinite; }
@keyframes progresso-vai{ from{ transform:translateX(-100%); } to{ transform:translateX(280%); } }
.progresso-rot{ display:flex; justify-content:space-between; margin-bottom:var(--esp-2); font:var(--tipo-meta); color:var(--cor-texto-corpo); }
.progresso-rot b{ color:var(--cor-texto-titulo); font-weight:600; font-variant-numeric:tabular-nums; }
.progresso-passos{ display:grid; grid-auto-flow:column; gap:4px; }
.progresso-passos > i{ height:6px; border-radius:var(--raio-capsula); background:var(--ink-4); }
.progresso-passos > i.is-on{ background:var(--cor-acao); }
/* círculo (ProgressGroup/anel) */
.anel{ --v:40; width:var(--alt-g); height:var(--alt-g); border-radius:50%; background:conic-gradient(var(--cor-acao) calc(var(--v) * 1%), var(--ink-4) 0); -webkit-mask:radial-gradient(circle, transparent 58%, var(--ink-0) 60%); mask:radial-gradient(circle, transparent 58%, var(--ink-0) 60%); }

/* ---------- Separator · .separa ---------- */
.separa{ display:flex; align-items:center; gap:var(--esp-3); margin:var(--esp-4) 0; font:var(--tipo-meta-p); color:var(--cor-texto-suave); }
.separa::before, .separa::after{ content:""; flex:1; height:1px; background:var(--cor-borda-sutil); }
.separa:empty{ gap:0; }
.separa--v{ display:inline-block; width:1px; height:20px; margin:0 var(--esp-2); background:var(--cor-borda-media); vertical-align:middle; }
.separa--v::before, .separa--v::after{ display:none; }

/* ---------- Skeleton · .esqueleto ---------- */
.esqueleto{ display:block; border-radius:var(--raio-p); background:linear-gradient(90deg, var(--ink-3) 0%, var(--ink-4) 40%, var(--ink-3) 80%); background-size:240% 100%; animation:esqueleto-brilha 1.4s linear infinite; }
@keyframes esqueleto-brilha{ from{ background-position:100% 0; } to{ background-position:-140% 0; } }

/* ---------- Card · .quadro ---------- */
.quadro{ border:1px solid var(--cor-borda-sutil); border-radius:var(--raio-card); background:var(--cor-superficie-1); overflow:hidden; }
.quadro__cab, .quadro__corpo, .quadro__pe{ padding:var(--esp-5) var(--esp-6); }
.quadro__cab{ border-bottom:1px solid var(--cor-borda-sutil); }
.quadro__pe{ display:flex; justify-content:flex-end; gap:var(--esp-2); border-top:1px solid var(--cor-borda-sutil); }
.quadro__t{ margin:0; font:var(--tipo-titulo-card); font-size:var(--tam-17); color:var(--cor-texto-titulo); }
.quadro__d{ margin:4px 0 0; font-size:var(--tam-14); color:var(--cor-texto-suave); }
.quadro--vidro{ background:var(--cor-vidro); border-color:var(--cor-borda-vidro); -webkit-backdrop-filter:var(--desfoque-vidro); backdrop-filter:var(--desfoque-vidro); }

/* ---------- Accordion · .sanfona  /  Collapsible · .recolhe ----------
   <details>; a seta gira aberta. */
.sanfona{ border-top:1px solid var(--cor-borda-sutil); }
.sanfona > details{ border-bottom:1px solid var(--cor-borda-sutil); }
.sanfona summary, .recolhe > summary{ display:flex; justify-content:space-between; align-items:center; gap:var(--esp-4); padding:var(--esp-4) 0; list-style:none; cursor:pointer; font:var(--tipo-controle); font-size:var(--tam-15); color:var(--cor-texto-titulo); }
.sanfona summary::-webkit-details-marker, .recolhe > summary::-webkit-details-marker{ display:none; }
.sanfona summary::after, .recolhe > summary::after{ content:""; flex:none; width:8px; height:8px; margin-right:4px; border:solid var(--cor-texto-suave); border-width:0 1.6px 1.6px 0; transform:rotate(45deg); transition:transform var(--dur-media) var(--curva-padrao); }
.sanfona details[open] > summary::after, .recolhe[open] > summary::after{ transform:rotate(-135deg); }
.sanfona summary:hover, .recolhe > summary:hover{ color:var(--cor-acao-texto); }
.sanfona details > div, .recolhe > div{ padding:0 0 var(--esp-4); font-size:var(--tam-14); color:var(--cor-texto-corpo); max-width:var(--medida-leitura); }
.recolhe{ border:1px solid var(--cor-borda-sutil); border-radius:var(--campo-raio); padding:0 var(--esp-4); background:var(--cor-superficie-1); }

/* ---------- Empty · .estado-vazio ---------- */
.estado-vazio{ display:grid; place-items:center; gap:var(--esp-3); padding:var(--esp-10) var(--esp-6); border:1px dashed var(--cor-borda-media); border-radius:var(--raio-card); text-align:center; }
.estado-vazio__ic{ display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--cor-vidro-forte); color:var(--cor-texto-suave); }
.estado-vazio__ic .ds-icone{ width:24px; height:24px; }
.estado-vazio__t{ margin:0; font:var(--tipo-titulo-card); font-size:var(--tam-17); color:var(--cor-texto-titulo); }
.estado-vazio__d{ margin:0; max-width:36ch; font-size:var(--tam-14); color:var(--cor-texto-suave); }

/* ---------- Marquee · .letreiro ---------- */
.letreiro{ overflow:hidden; -webkit-mask:linear-gradient(90deg, transparent, var(--ink-0) 10%, var(--ink-0) 90%, transparent); mask:linear-gradient(90deg, transparent, var(--ink-0) 10%, var(--ink-0) 90%, transparent); }
.letreiro__trilho{ display:flex; align-items:center; width:max-content; animation:letreiro-anda var(--letreiro-dur, 28s) linear infinite; }
/* o vão vai à direita de cada peça (não gap): as duas metades ficam idênticas e a volta não pula */
.letreiro__trilho > *{ flex:none; margin-right:var(--letreiro-vao, var(--esp-8)); }
.letreiro:hover .letreiro__trilho{ animation-play-state:paused; }
@keyframes letreiro-anda{ to{ transform:translateX(-50%); } }

/* ---------- ScrollArea · .rolagem ---------- */
.rolagem{ overflow:auto; scrollbar-width:thin; scrollbar-color:var(--ink-5) transparent; }
.rolagem::-webkit-scrollbar{ width:8px; height:8px; }
.rolagem::-webkit-scrollbar-thumb{ border-radius:var(--raio-p); background:var(--ink-5); }

/* ---------- Table · .dados ---------- */
.dados-caixa{ border:1px solid var(--cor-borda-sutil); border-radius:var(--raio-card); overflow:auto; background:var(--cor-superficie-1); }
.dados{ width:100%; border-collapse:collapse; font-size:var(--tam-14); }
.dados th{ padding:var(--esp-3) var(--esp-4); text-align:left; font:var(--tipo-selo); color:var(--cor-texto-suave); border-bottom:1px solid var(--cor-borda-sutil); white-space:nowrap; }
.dados td{ padding:var(--esp-3) var(--esp-4); border-bottom:1px solid var(--cor-borda-sutil); color:var(--cor-texto-corpo); }
.dados tr:last-child td{ border-bottom:0; }
.dados tbody tr:hover td{ background:var(--cor-superficie-2); }
.dados tr.is-sel td{ background:var(--cor-acao-suave); }
.dados .num{ text-align:right; font-variant-numeric:tabular-nums; color:var(--cor-texto-titulo); }

/* ---------- Timeline · .linha-tempo ---------- */
.linha-tempo{ margin:0; padding:0; list-style:none; }
.linha-tempo > li{ position:relative; display:grid; grid-template-columns:24px minmax(0,1fr); gap:var(--esp-3); padding-bottom:var(--esp-6); }
.linha-tempo > li::before{ content:""; position:absolute; left:11px; top:24px; bottom:0; width:2px; background:var(--cor-borda-sutil); }
.linha-tempo > li:last-child::before{ display:none; }
.linha-tempo__marca{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; border:2px solid var(--cor-borda-forte); background:var(--cor-fundo); }
.linha-tempo > li.is-feito .linha-tempo__marca{ border-color:var(--cor-acao); background:var(--cor-acao); color:var(--cor-texto-sobre-acao); }
.linha-tempo > li.is-atual .linha-tempo__marca{ border-color:var(--cor-acao); }
.linha-tempo > li.is-feito::before{ background:var(--cor-acao-borda); }
.linha-tempo__marca .ds-icone{ width:12px; height:12px; stroke-width:2.4; }
.linha-tempo__t{ margin:2px 0 2px; font:var(--tipo-controle); color:var(--cor-texto-titulo); }
.linha-tempo__d{ margin:0; font-size:var(--tam-13); color:var(--cor-texto-suave); }

/* ---------- Tree · .arvore ---------- */
.arvore, .arvore ul{ margin:0; padding:0; list-style:none; }
.arvore ul{ margin-left:11px; padding-left:var(--esp-3); border-left:1px solid var(--cor-borda-sutil); }
.arvore summary, .arvore__item{ display:flex; align-items:center; gap:var(--esp-2); height:32px; padding:0 var(--esp-2); border-radius:var(--raio-p); list-style:none; cursor:pointer; font-size:var(--tam-14); color:var(--cor-texto-corpo); }
.arvore summary::-webkit-details-marker{ display:none; }
.arvore summary::before{ content:""; width:6px; height:6px; border:solid var(--cor-texto-suave); border-width:0 1.5px 1.5px 0; transform:rotate(-45deg); transition:transform var(--dur-rapida) var(--curva-padrao); }
.arvore details[open] > summary::before{ transform:rotate(45deg); }
.arvore summary:hover, .arvore__item:hover{ background:var(--cor-superficie-3); color:var(--cor-texto-titulo); }
.arvore__item.is-ativa{ background:var(--cor-acao-suave); color:var(--cor-acao-texto); }

/* ---------- User · .pessoa ---------- */
.pessoa{ display:inline-flex; align-items:center; gap:var(--esp-3); min-width:0; }
.pessoa__t{ display:grid; gap:2px; min-width:0; }
.pessoa__nome{ font:var(--tipo-controle); color:var(--cor-texto-titulo); }
.pessoa__d{ font:var(--tipo-meta-p); color:var(--cor-texto-suave); }

/* ---------- Breadcrumb · .trilha ---------- */
.trilha{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--esp-2); margin:0; padding:0; list-style:none; font:var(--tipo-meta); }
.trilha a{ color:var(--cor-texto-suave); text-decoration:none; }
.trilha a:hover{ color:var(--cor-texto-titulo); }
.trilha li + li::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:var(--esp-2); border:solid var(--cor-borda-forte); border-width:1.5px 1.5px 0 0; transform:rotate(45deg); vertical-align:middle; }
.trilha [aria-current]{ color:var(--cor-texto-titulo); }

/* ---------- Link · .elo ---------- */
.elo{ color:var(--cor-acao-texto); text-decoration:underline; text-decoration-color:var(--cor-acao-borda); text-underline-offset:3px; transition:text-decoration-color var(--dur-rapida) var(--curva-padrao); }
.elo:hover{ text-decoration-color:currentColor; }
.elo--neutro{ color:var(--cor-texto-titulo); text-decoration-color:var(--cor-borda-forte); }

/* ---------- Pagination · .paginas ---------- */
.paginas{ display:flex; align-items:center; gap:4px; }
.paginas > a, .paginas > button, .paginas > span{ display:grid; place-items:center; min-width:var(--alt-m); height:var(--alt-m); padding:0 var(--esp-2); border:1px solid transparent; border-radius:var(--raio-capsula); background:transparent; color:var(--cor-texto-corpo); font:var(--tipo-controle); text-decoration:none; cursor:pointer; font-variant-numeric:tabular-nums; }
.paginas > span{ cursor:default; color:var(--cor-texto-suave); }
.paginas > a:hover, .paginas > button:hover{ background:var(--cor-superficie-3); color:var(--cor-texto-titulo); }
.paginas > [aria-current]{ background:var(--cor-acao-suave); border-color:var(--cor-acao-borda); color:var(--cor-acao-texto); }
.paginas .ds-icone{ width:var(--icone-p); height:var(--icone-p); }

/* ---------- Stepper · .progressao ---------- */
.progressao{ display:grid; grid-auto-columns:minmax(0,1fr); grid-auto-flow:column; gap:var(--esp-2); margin:0; padding:0; list-style:none; counter-reset:etapa; }
.progressao > li{ position:relative; display:grid; justify-items:center; gap:var(--esp-2); text-align:center; counter-increment:etapa; }
.progressao > li::after{ content:""; position:absolute; top:15px; left:calc(50% + 22px); right:calc(-50% + 22px); height:2px; border-radius:var(--raio-fio); background:var(--cor-borda-media); }
.progressao > li:last-child::after{ display:none; }
.progressao > li.is-feito::after{ background:var(--cor-acao); }
.progressao__n{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; border:1.5px solid var(--cor-borda-forte); color:var(--cor-texto-suave); font:600 var(--tam-13)/1 var(--familia-texto); }
.progressao__n::before{ content:counter(etapa); }
.progressao > li.is-feito .progressao__n{ border-color:var(--cor-acao); background:var(--cor-acao); color:var(--cor-texto-sobre-acao); }
.progressao > li.is-atual .progressao__n{ border-color:var(--cor-acao); color:var(--cor-acao-texto); box-shadow:0 0 0 4px var(--cor-acao-suave); }
.progressao__t{ font:var(--tipo-controle-p); color:var(--cor-texto-titulo); }
.progressao__d{ font:var(--tipo-meta-p); color:var(--cor-texto-suave); }
/* pequeno (09/11): no modal de cursos e no checkout */
.progressao--p > li{ gap:var(--esp-1); }
.progressao--p > li::after{ top:11px; left:calc(50% + 18px); right:calc(-50% + 18px); }
.progressao--p .progressao__n{ width:24px; height:24px; font-size:var(--tam-12); }
.progressao--p > li.is-atual .progressao__n{ box-shadow:0 0 0 3px var(--cor-acao-suave); }
.progressao--p .progressao__t{ font:var(--tipo-meta-p); }

/* ---------- Tabs · .grupo-abas ---------- contêiner das .aba (segmentado) e versão sublinhada */
.grupo-abas{ display:inline-flex; gap:4px; padding:4px; border:1px solid var(--cor-borda-sutil); border-radius:var(--raio-capsula); background:var(--cor-superficie-1); }
.grupo-abas > .aba{ border-color:transparent; }
.grupo-abas--linha{ display:flex; gap:var(--esp-6); padding:0; border:0; border-bottom:1px solid var(--cor-borda-sutil); border-radius:0; background:none; }
.grupo-abas--linha > button, .grupo-abas--linha > a{ display:inline-flex; align-items:center; text-decoration:none;  position:relative; height:var(--alt-m); padding:0; border:0; background:none; color:var(--cor-texto-suave); font:var(--tipo-controle); cursor:pointer; }
.grupo-abas--linha > a:hover, .grupo-abas--linha > button:hover{ color:var(--cor-texto-titulo); }
.grupo-abas--linha > a:focus-visible, .grupo-abas--linha > button:focus-visible{ outline:none; box-shadow:var(--anel-foco); border-radius:var(--raio-pp); }
.grupo-abas--linha > a[aria-current], .grupo-abas--linha > button[aria-selected="true"]{ color:var(--cor-texto-titulo); }
.grupo-abas--linha > a[aria-current]::after, .grupo-abas--linha > button[aria-selected="true"]::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:var(--raio-fio); background:var(--cor-acao); }

/* ---------- DropdownMenu / ContextMenu / Popover · .menu e .balao ---------- */
.menu{ position:absolute; z-index:var(--camada-menu); width:var(--menu-larg); padding:var(--esp-1); border:1px solid var(--sobre-borda); border-radius:var(--campo-raio); background:var(--sobre-fundo);
  opacity:0; visibility:hidden; transform:translateY(-4px) scale(.98); transform-origin:top left; transition:opacity var(--dur-rapida) var(--curva-padrao), transform var(--dur-rapida) var(--curva-padrao), visibility 0s linear var(--dur-rapida); }
.menu.is-aberto, .menu--fixo{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.menu--fixo{ position:relative; }
.menu__item{ display:flex; align-items:center; gap:var(--esp-3); width:100%; min-height:34px; padding:0 var(--esp-3); border:0; border-radius:var(--raio-p); background:transparent; color:var(--cor-texto-corpo); font:400 var(--tam-14)/1.2 var(--familia-texto); text-align:left; text-decoration:none; cursor:pointer; }
.menu__item:hover, .menu__item:focus-visible, .menu__item.is-foco{ outline:none; background:var(--cor-superficie-3); color:var(--cor-texto-titulo); }
.menu__item[aria-selected="true"]{ color:var(--cor-acao-texto); }
.menu__item[aria-selected="true"]::after{ content:""; margin-left:auto; width:5px; height:9px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg) translateY(-2px); }
.menu__item .ds-icone{ width:var(--icone-m); height:var(--icone-m); color:var(--cor-texto-suave); }
.menu__item .tecla{ margin-left:auto; }
.menu__item--perigo{ color:var(--cor-erro); }
.menu__item--perigo .ds-icone{ color:var(--cor-erro); }
.menu__grupo{ padding:var(--esp-2) var(--esp-3) 4px; font:var(--tipo-meta-p); color:var(--cor-texto-suave); }
.menu__sep{ height:1px; margin:4px 0; background:var(--cor-borda-sutil); }
.menu__busca{ display:flex; align-items:center; gap:var(--esp-2); height:36px; margin-bottom:4px; padding:0 var(--esp-3); border-bottom:1px solid var(--cor-borda-sutil); }
.menu__busca input{ flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--cor-texto-titulo); font:var(--campo-texto); font-size:var(--tam-14); }
.menu__nada{ padding:var(--esp-3); font-size:var(--tam-13); color:var(--cor-texto-suave); text-align:center; }
.balao{ position:absolute; z-index:var(--camada-menu); width:280px; padding:var(--esp-4); border:1px solid var(--sobre-borda); border-radius:var(--sobre-raio); background:var(--sobre-fundo); font-size:var(--tam-14); color:var(--cor-texto-corpo);
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity var(--dur-rapida) var(--curva-padrao), transform var(--dur-rapida) var(--curva-padrao), visibility 0s linear var(--dur-rapida); }
.balao.is-aberto, .balao--fixo{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.balao--fixo{ position:relative; }
.ancora{ position:relative; display:inline-block; }

/* ---------- Tooltip · [data-dica] ---------- */
[data-dica]{ position:relative; }
[data-dica]::after{ content:attr(data-dica); position:absolute; left:50%; bottom:calc(100% + 8px); z-index:var(--camada-dica); padding:6px 10px; border-radius:var(--raio-p); background:var(--branco); color:var(--ink-0); font:500 var(--tam-12)/1.2 var(--familia-texto); white-space:nowrap; pointer-events:none;
  opacity:0; transform:translate(-50%, 4px); transition:opacity var(--dur-rapida) var(--curva-padrao), transform var(--dur-rapida) var(--curva-padrao); }
[data-dica]:hover::after, [data-dica]:focus-visible::after, [data-dica].is-dica::after{ opacity:1; transform:translate(-50%, 0); transition-delay:.3s; }
[data-dica].is-dica::after{ transition-delay:0s; }
[data-dica-lado="baixo"]::after{ bottom:auto; top:calc(100% + 8px); }

/* ---------- Modal · .modal  /  Slideover · .painel-lateral  /  Drawer · .gaveta ----------
   todos são <dialog>; abre com showModal(). */
.modal, .painel-lateral, .gaveta{ padding:0; border:1px solid var(--sobre-borda); background:var(--sobre-fundo); color:var(--cor-texto-corpo); }
.modal::backdrop, .painel-lateral::backdrop, .gaveta::backdrop{ background:var(--veu); -webkit-backdrop-filter:blur(var(--veu-desfoque)); backdrop-filter:blur(var(--veu-desfoque)); }
/* modal de foco (Entrar): véu mais escuro e desfoque forte, a página some atrás */
.modal--foco::backdrop{ background:var(--veu-forte); -webkit-backdrop-filter:blur(var(--veu-desfoque-forte)) saturate(120%); backdrop-filter:blur(var(--veu-desfoque-forte)) saturate(120%); }
.modal{ width:var(--modal-larg); max-height:calc(100dvh - 48px); border-radius:var(--raio-painel); }
.modal[open]{ animation:modal-entra var(--dur-media) var(--curva-saida); }
@keyframes modal-entra{ from{ opacity:0; transform:translateY(8px) scale(.98); } }
.modal__cab{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--esp-4); padding:var(--esp-6) var(--esp-6) 0; }
.modal__t{ margin:0; font:var(--tipo-titulo-card); color:var(--cor-texto-titulo); }
.modal__d{ margin:6px 0 0; font-size:var(--tam-14); color:var(--cor-texto-suave); }
.modal__corpo{ padding:var(--esp-5) var(--esp-6); }
.modal__pe{ display:flex; justify-content:flex-end; gap:var(--esp-2); padding:0 var(--esp-6) var(--esp-6); }
.painel-lateral{ position:fixed; inset:0 0 0 auto; width:var(--lateral-larg); height:100dvh; max-height:none; margin:0; border-width:0 0 0 1px; border-radius:var(--raio-painel) 0 0 var(--raio-painel); }
.painel-lateral[open]{ animation:lateral-entra var(--dur-media) var(--ease-gaveta); }
@keyframes lateral-entra{ from{ transform:translateX(100%); } }
.gaveta{ position:fixed; inset:auto 0 0 0; width:100%; max-width:640px; max-height:85dvh; margin:0 auto; border-width:1px 1px 0; border-radius:var(--raio-painel) var(--raio-painel) 0 0; }
.gaveta[open]{ animation:gaveta-entra var(--dur-media) var(--ease-gaveta); }
@keyframes gaveta-entra{ from{ transform:translateY(100%); } }
.gaveta__alca{ display:block; width:40px; height:4px; margin:10px auto 0; border-radius:var(--raio-pp); background:var(--cor-borda-forte); }

/* ---------- CommandPalette · .paleta ---------- */
.paleta{ width:min(600px, calc(100vw - 32px)); margin-top:12vh; padding:0; border:1px solid var(--sobre-borda); border-radius:var(--raio-card); background:var(--sobre-fundo); color:var(--cor-texto-corpo); }
.paleta::backdrop{ background:var(--veu); -webkit-backdrop-filter:blur(var(--veu-desfoque)); backdrop-filter:blur(var(--veu-desfoque)); }
.paleta--fixa{ position:relative; display:block; width:100%; margin:0; }
.paleta__busca{ display:flex; align-items:center; gap:var(--esp-3); height:56px; padding:0 var(--esp-5); border-bottom:1px solid var(--cor-borda-sutil); }
.paleta__busca input{ flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--cor-texto-titulo); font:400 var(--tam-17)/1 var(--familia-texto); }
.paleta__lista{ max-height:340px; overflow:auto; padding:var(--esp-2); }
.paleta__pe{ display:flex; gap:var(--esp-4); padding:var(--esp-3) var(--esp-5); border-top:1px solid var(--cor-borda-sutil); font:var(--tipo-meta-p); color:var(--cor-texto-suave); }
.paleta__pe span{ display:inline-flex; gap:6px; align-items:center; }

/* ---------- Toast · .avisos-pilha / .toast ---------- window.tcToast({titulo, texto, tom}) */
.avisos-pilha{ position:fixed; right:var(--esp-4); bottom:var(--esp-4); z-index:var(--camada-toast); display:grid; gap:var(--esp-2); width:var(--toast-larg); pointer-events:none; }
.toast{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--esp-3); align-items:start; padding:var(--esp-4); border:1px solid var(--sobre-borda); border-radius:var(--campo-raio); background:var(--sobre-fundo); overflow:hidden; pointer-events:auto;
  animation:toast-entra var(--dur-media) var(--curva-saida); }
.toast.is-saindo{ animation:toast-sai var(--dur-rapida) var(--curva-padrao) forwards; }
@keyframes toast-entra{ from{ opacity:0; transform:translateY(12px) scale(.98); } }
@keyframes toast-sai{ to{ opacity:0; transform:translateX(16px); } }
.toast > .ds-icone{ width:var(--icone-g); height:var(--icone-g); color:var(--cor-info); }
.toast--sucesso > .ds-icone{ color:var(--cor-sucesso); }
.toast--atencao > .ds-icone{ color:var(--cor-aviso); }
.toast--erro > .ds-icone{ color:var(--cor-erro); }
.toast--marca > .ds-icone{ color:var(--cor-acao-texto); }
.toast__t{ margin:0; font:var(--tipo-controle); color:var(--cor-texto-titulo); }
.toast__d{ margin:2px 0 0; font-size:var(--tam-13); color:var(--cor-texto-suave); }
.toast__acao{ margin-top:var(--esp-2); }
.toast > button{ display:grid; place-items:center; width:24px; height:24px; padding:0; border:0; border-radius:var(--raio-p); background:transparent; color:var(--cor-texto-suave); cursor:pointer; }
.toast > button:hover{ background:var(--cor-vidro-forte); color:var(--cor-texto-titulo); }
.toast > button .ds-icone{ width:var(--icone-p); height:var(--icone-p); }
.toast__tempo{ position:absolute; left:0; bottom:0; height:2px; width:100%; background:currentColor; color:var(--cor-info); transform-origin:left; animation:toast-tempo var(--toast-tempo) linear forwards; }
.toast--sucesso .toast__tempo{ color:var(--cor-sucesso); } .toast--atencao .toast__tempo{ color:var(--cor-aviso); } .toast--erro .toast__tempo{ color:var(--cor-erro); } .toast--marca .toast__tempo{ color:var(--cor-acao); }
.toast:hover .toast__tempo{ animation-play-state:paused; }
@keyframes toast-tempo{ to{ transform:scaleX(0); } }

/* ---------- Calendar · .calendario ---------- */
.calendario{ width:280px; padding:var(--esp-3); border:1px solid var(--sobre-borda); border-radius:var(--sobre-raio); background:var(--sobre-fundo); }
.calendario__cab{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--esp-2); font:var(--tipo-controle); color:var(--cor-texto-titulo); text-transform:capitalize; }
.calendario__cab button{ display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:var(--raio-p); background:transparent; color:var(--cor-texto-corpo); cursor:pointer; }
.calendario__cab button:hover{ background:var(--cor-superficie-3); }
.calendario__cab .ds-icone{ width:var(--icone-p); height:var(--icone-p); }
.calendario__grade{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; }
.calendario__grade > span{ padding:6px 0; font:var(--tipo-meta-p); color:var(--cor-texto-suave); }
.calendario__grade > button{ aspect-ratio:1; padding:0; border:0; border-radius:50%; background:transparent; color:var(--cor-texto-corpo); font:500 var(--tam-13)/1 var(--familia-texto); cursor:pointer; font-variant-numeric:tabular-nums; }
.calendario__grade > button:hover{ background:var(--cor-superficie-3); color:var(--cor-texto-titulo); }
.calendario__grade > button.is-fora{ color:var(--ink-5); }
.calendario__grade > button.is-hoje{ box-shadow:inset 0 0 0 1px var(--cor-acao-borda); color:var(--cor-acao-texto); }
.calendario__grade > button[aria-selected="true"]{ background:var(--cor-acao); color:var(--cor-texto-sobre-acao); font-weight:600; }

@media (prefers-reduced-motion: reduce){
  .modal[open], .painel-lateral[open], .gaveta[open], .toast, .toast.is-saindo, .letreiro__trilho, .esqueleto, .progresso--indef > i{ animation:none; }
}

/* selo de atenção (âmbar): estado que pede decisão; cor de estado, não de ação */
.selo--atencao{ background:var(--cor-aviso-suave); border-color:var(--cor-aviso-borda); color:var(--cor-aviso); }