/* =========================================================
   Componentes
   Cada bloco é independente. Medidas e cores sempre por token.
   ========================================================= */

/* ---------- Botão ---------- */
.btn {
  --btn-fundo: var(--superficie);
  --btn-texto: var(--texto);
  --btn-borda: var(--borda);
  --btn-hover: var(--superficie-2);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  height: var(--altura-controle); padding: 0 var(--e-5);
  border: 1px solid var(--btn-borda); border-radius: var(--raio-pilula);
  background: var(--btn-fundo); color: var(--btn-texto);
  font-size: var(--texto-md); font-weight: var(--peso-medio); line-height: 1; white-space: nowrap; letter-spacing: -0.005em;
  text-decoration: none;
  transition: background var(--dur-rapida) var(--curva), border-color var(--dur-rapida), transform var(--dur-rapida);
}
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--foco); border-radius: var(--raio-pilula); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn--primario { --btn-fundo: var(--marca); --btn-texto: var(--sobre-marca); --btn-borda: transparent; --btn-hover: var(--marca-hover); font-weight: var(--peso-semi); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--marca) 70%, transparent); }
.btn--primario:active { background: var(--marca-pressionada); }
.btn--tinta { --btn-fundo: var(--nav-ativa-fundo); --btn-texto: var(--nav-ativa-texto); --btn-borda: transparent; --btn-hover: var(--neutro-800); font-weight: var(--peso-semi); }
:root[data-tema="escuro"] .btn--tinta { --btn-hover: #DADCE1; }
.btn--secundario { --btn-fundo: var(--superficie); }
.btn--fantasma { --btn-fundo: transparent; --btn-borda: transparent; --btn-hover: var(--nav-hover); }
.btn--perigo { --btn-fundo: var(--superficie); --btn-texto: var(--perigo-texto); --btn-borda: var(--borda); --btn-hover: var(--perigo-suave); }
.btn--perigo-cheio { --btn-fundo: var(--perigo); --btn-texto: #fff; --btn-borda: transparent; --btn-hover: var(--laranja-700); }
.btn--sm { height: var(--altura-controle-sm); padding: 0 var(--e-4); font-size: var(--texto-sm); }
.btn--lg { height: var(--altura-controle-lg); padding: 0 var(--e-6); font-size: var(--texto-lg); }
.btn--pilula { border-radius: var(--raio-pilula); }
.btn--bloco { width: 100%; }
.btn-icone { width: var(--altura-controle); padding: 0; }
.btn-icone.btn--sm { width: var(--altura-controle-sm); }
.btn-redondo { border-radius: 50%; }
.btn.carregando { color: transparent; position: relative; pointer-events: none; }
.btn.carregando::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--btn-texto); border-right-color: transparent; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.grupo-botoes { display: inline-flex; gap: var(--e-2); flex-wrap: wrap; }
/* Botão em pílula com círculo: a ação mais importante de um bloco escuro ou de uma tela */
.btn--seta { padding-right: 5px; gap: var(--e-3); }
.btn--seta .btn-circulo { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--marca); color: var(--sobre-marca); margin-left: var(--e-1); transition: transform var(--dur-media) var(--curva); }
.btn--seta.btn--lg .btn-circulo { width: 44px; height: 44px; }
/* Botão pequeno: o círculo deixa a mesma folga da borda que o grande (5px), em vez de encostar nela. */
.btn--seta.btn--sm { padding-right: 5px; }
.btn--seta.btn--sm .btn-circulo { width: calc(var(--altura-controle-sm) - 10px); height: calc(var(--altura-controle-sm) - 10px); }
.btn--seta.btn--sm .btn-circulo .ic { width: 15px; height: 15px; }
.btn--seta:hover .btn-circulo { transform: rotate(-45deg); }
.btn--seta .btn-circulo .ic { width: 18px; height: 18px; }
/* Ação circular (↗) no canto de cartões: "abrir" o bloco inteiro */
.acao-circular { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); text-decoration: none; transition: background var(--dur-rapida), color var(--dur-rapida), border-color var(--dur-rapida); }
.acao-circular:hover, a:hover > .acao-circular { background: var(--nav-ativa-fundo); border-color: var(--nav-ativa-fundo); color: var(--nav-ativa-texto); }
.acao-circular .ic { width: 18px; height: 18px; }
.acao-circular--marca { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }

/* ---------- Campo ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label, .campo .campo-rotulo { font-size: var(--texto-sm); font-weight: var(--peso-medio); color: var(--texto); }
.campo .opcional { color: var(--texto-3); font-weight: var(--peso-regular); }
.campo-ajuda { font-size: var(--texto-sm); color: var(--texto-3); }
.campo-erro { font-size: var(--texto-sm); color: var(--perigo-texto); display: flex; gap: 6px; align-items: flex-start; }
.campo-ok { font-size: var(--texto-sm); color: var(--sucesso-texto); display: flex; gap: 6px; align-items: center; }
.entrada, .area-texto {
  width: 100%; min-height: var(--altura-controle); padding: 0 var(--e-5);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-pilula);
  background: var(--superficie); color: var(--texto);
  transition: border-color var(--dur-rapida), box-shadow var(--dur-rapida);
}
.area-texto, textarea.entrada { border-radius: var(--raio-md); }
.area-texto { padding: var(--e-3) var(--e-4); min-height: 112px; resize: vertical; line-height: var(--entrelinha-texto); }
.entrada::placeholder, .area-texto::placeholder { color: var(--texto-3); }
.entrada:hover, .area-texto:hover { border-color: var(--neutro-400); }
.entrada:focus-visible, .area-texto:focus-visible { border-color: var(--azul-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul-500) 22%, transparent); }
.entrada[aria-invalid="true"], .area-texto[aria-invalid="true"] { border-color: var(--perigo); }
.entrada[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px var(--perigo-suave); }
.entrada:disabled { background: var(--superficie-2); color: var(--texto-desabilitado); }
.entrada--sm { min-height: var(--altura-controle-sm); font-size: var(--texto-sm); padding: 0 var(--e-4); }
.entrada-grupo { position: relative; display: flex; align-items: center; }
.entrada-grupo > .ic { position: absolute; left: 18px; color: var(--texto-3); pointer-events: none; }
.entrada-grupo > .entrada { padding-left: 48px; }
.entrada-grupo > .entrada-acao { position: absolute; right: 5px; }
.entrada-grupo .atalho { position: absolute; right: 12px; font-size: var(--texto-xs); color: var(--texto-2); background: var(--superficie-2); border-radius: var(--raio-pilula); padding: 3px 9px; }
.entrada-prefixo { display: flex; align-items: stretch; }
.entrada-prefixo > span { display: grid; place-items: center; padding: 0 var(--e-3) 0 var(--e-4); border: 1px solid var(--borda-forte); border-right: 0; border-radius: var(--raio-pilula) 0 0 var(--raio-pilula); background: var(--superficie-2); color: var(--texto-2); font-size: var(--texto-sm); }
.entrada-prefixo > .entrada { border-radius: 0 var(--raio-pilula) var(--raio-pilula) 0; padding-left: var(--e-3); }

/* Checkbox e rádio */
.escolha { display: inline-flex; align-items: flex-start; gap: var(--e-3); cursor: pointer; font-size: var(--texto-md); }
.escolha input { appearance: none; -webkit-appearance: none; margin: 2px 0 0; width: 20px; height: 20px; flex: none; border: 1.5px solid var(--borda-forte); background: var(--superficie); display: grid; place-items: center; transition: background var(--dur-rapida), border-color var(--dur-rapida); }
.escolha input[type="checkbox"] { border-radius: 6px; }
.escolha input[type="radio"] { border-radius: 50%; }
.escolha input:checked { background: var(--nav-ativa-fundo); border-color: var(--nav-ativa-fundo); }
.escolha input[type="checkbox"] { border-radius: 7px; }
.escolha input[type="checkbox"]:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--nav-ativa-texto); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.escolha input[type="checkbox"]:indeterminate { background: var(--nav-ativa-fundo); border-color: var(--nav-ativa-fundo); }
.escolha input[type="checkbox"]:indeterminate::after { content: ""; width: 10px; height: 2px; background: var(--nav-ativa-texto); border-radius: 2px; }
.escolha input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nav-ativa-texto); }
.escolha input:focus-visible { box-shadow: var(--foco); }
.escolha input:disabled { opacity: .45; }
.escolha small { display: block; color: var(--texto-3); font-size: var(--texto-sm); }

/* Interruptor */
.interruptor { display: inline-flex; align-items: center; gap: var(--e-3); cursor: pointer; }
.pilha > .interruptor, .pilha-sm > .interruptor, .pilha > .escolha, .pilha-sm > .escolha { display: flex; }
.interruptor input { appearance: none; -webkit-appearance: none; margin: 0; width: 44px; height: 26px; border-radius: var(--raio-pilula); background: var(--neutro-300); position: relative; flex: none; transition: background var(--dur-media) var(--curva); }
:root[data-tema="escuro"] .interruptor input { background: #444852; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--sombra-1); transition: transform var(--dur-media) var(--curva); }
.interruptor input:checked { background: var(--nav-ativa-fundo); }
.interruptor input:checked::after { transform: translateX(18px); background: var(--marca-viva); }
:root[data-tema="escuro"] .interruptor input:checked::after { background: var(--marca); }
.interruptor input:focus-visible { box-shadow: var(--foco); }

/* ---------- Seletor próprio e listas suspensas ---------- */
.seletor {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
  width: 100%; height: var(--altura-controle); padding: 0 var(--e-4) 0 var(--e-5);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-pilula); background: var(--superficie);
  text-align: left; color: var(--texto);
}
.seletor.seletor--sm { height: var(--altura-controle-sm); font-size: var(--texto-sm); padding: 0 var(--e-3) 0 var(--e-4); }
.seletor:hover { border-color: var(--neutro-400); }
.seletor[aria-expanded="true"] { border-color: var(--azul-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul-500) 22%, transparent); }
.seletor .seletor-valor { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seletor .valor-vazio { color: var(--texto-3); }
.seletor .ic { color: var(--texto-3); transition: transform var(--dur-media); }
.seletor[aria-expanded="true"] .ic:last-child { transform: rotate(180deg); }

.camada-suspensa {
  position: fixed; z-index: var(--z-popover);
  min-width: 200px; max-width: min(420px, calc(100vw - 32px));
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 24px;
  box-shadow: var(--sombra-3); padding: 8px;
  display: flex; flex-direction: column;
  animation: surgir var(--dur-media) var(--curva);
}
.camada-suspensa[hidden] { display: none; }
@keyframes surgir { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.camada-suspensa .busca-interna { padding: 4px 4px 8px; border-bottom: 1px solid var(--divisor); margin-bottom: 4px; }
.camada-suspensa .rolagem { overflow-y: auto; max-height: 280px; overscroll-behavior: contain; }
.opcao, .menu-item {
  display: flex; align-items: center; gap: var(--e-3); width: 100%;
  min-height: 44px; padding: 8px 12px; border: 0; border-radius: 16px;
  background: none; text-align: left; font-size: var(--texto-md); color: var(--texto); text-decoration: none;
}
.opcao:hover, .opcao.ativa, .menu-item:hover, .menu-item:focus-visible { background: var(--nav-hover); box-shadow: none; }
.opcao[aria-selected="true"] { font-weight: var(--peso-medio); }
.opcao .marca-selecao { margin-left: auto; color: var(--texto); visibility: hidden; }
.opcao[aria-selected="true"] .marca-selecao { visibility: visible; }
.opcao small, .menu-item small { display: block; color: var(--texto-3); font-size: var(--texto-xs); }
.menu-item .ic { color: var(--texto-2); }
.menu-item--perigo { color: var(--perigo-texto); }
.menu-item--perigo .ic { color: var(--perigo-texto); }
.menu-separador { height: 1px; background: var(--divisor); margin: 6px 4px; }
.menu-titulo { padding: 8px 10px 4px; font-size: var(--texto-xs); color: var(--texto-3); font-weight: var(--peso-medio); }
.lista-vazia { padding: var(--e-4); color: var(--texto-3); font-size: var(--texto-sm); text-align: center; }

/* Multisseleção: fichas dentro do campo */
.fichas { display: flex; flex-wrap: wrap; gap: 6px; }
.ficha { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 6px 0 10px; border-radius: var(--raio-pilula); background: var(--superficie-2); font-size: var(--texto-sm); }
.ficha button { border: 0; background: none; padding: 2px; border-radius: 50%; display: grid; color: var(--texto-2); }
.ficha button:hover { background: var(--borda); }

/* ---------- Abas ---------- */
.abas { display: flex; width: fit-content; max-width: 100%; gap: 2px; padding: 5px; border-radius: var(--raio-pilula); background: var(--superficie); box-shadow: var(--sombra-cartao); overflow-x: auto; scrollbar-width: none; }
.aba {
  position: relative; padding: 0 var(--e-4); height: 40px; border: 0; border-radius: var(--raio-pilula); background: none; flex: none;
  color: var(--texto-2); font-size: var(--texto-sm); font-weight: var(--peso-medio); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--dur-rapida), color var(--dur-rapida);
}
.aba:hover { color: var(--texto); background: var(--nav-hover); }
.aba[aria-selected="true"], .aba[aria-current="page"] { color: var(--nav-ativa-texto); background: var(--nav-ativa-fundo); }
.aba .contador { font-size: var(--texto-xs); min-width: 20px; padding: 0 6px; border-radius: var(--raio-pilula); background: var(--superficie-2); color: var(--texto-2); text-align: center; }
.aba[aria-selected="true"] .contador, .aba[aria-current="page"] .contador { background: var(--marca-viva); color: #0D0E11; }

.segmentado { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--raio-pilula); background: var(--superficie-2); }
.segmentado button { height: 34px; padding: 0 var(--e-4); border: 0; border-radius: var(--raio-pilula); background: none; color: var(--texto-2); font-size: var(--texto-sm); font-weight: var(--peso-medio); }
.segmentado button[aria-pressed="true"], .segmentado button[aria-selected="true"] { background: var(--nav-ativa-fundo); color: var(--nav-ativa-texto); box-shadow: var(--sombra-1); }

/* ---------- Chips de filtro ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--e-4);
  border: 1px solid var(--borda); border-radius: var(--raio-pilula); background: var(--superficie);
  font-size: var(--texto-sm); font-weight: var(--peso-medio); color: var(--texto-2);
}
.chip { text-decoration: none; }
.chip:hover { border-color: var(--borda-forte); color: var(--texto); }
.chip[aria-pressed="true"] { background: var(--nav-ativa-fundo); border-color: var(--nav-ativa-fundo); color: var(--nav-ativa-texto); }
.chip .remover { display: grid; margin-right: -4px; padding: 2px; border: 0; border-radius: 50%; background: none; color: var(--texto-2); }
.chip .remover:hover { background: var(--borda); color: var(--texto); }
.chip--filtro-ativo { background: var(--superficie-2); color: var(--texto); border-color: transparent; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px;
  border-radius: var(--raio-pilula); font-size: var(--texto-xs); font-weight: var(--peso-semi); white-space: nowrap;
  background: var(--superficie-2); color: var(--texto-2);
}
.badge .ic { width: 14px; height: 14px; }
.badge--marca { background: var(--marca-suave); color: var(--marca-texto); }
.badge--marca-cheio { background: var(--marca); color: var(--sobre-marca); }
.badge--sucesso { background: var(--sucesso-suave); color: var(--sucesso-texto); }
.badge--aviso { background: var(--aviso-suave); color: var(--aviso-texto); }
.badge--perigo { background: var(--perigo-suave); color: var(--perigo-texto); }
.badge--info { background: var(--info-suave); color: var(--info-texto); }
.badge--estudo { background: var(--destaque-estudo-suave); color: var(--destaque-estudo); }
.badge--tinta { background: var(--nav-ativa-fundo); color: var(--nav-ativa-texto); }
.badge--contorno { background: transparent; border: 1px solid var(--borda); }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--texto-sm); color: var(--texto); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); }
.status--sucesso::before { background: var(--sucesso); }
.status--aviso::before { background: var(--aviso); }
.status--perigo::before { background: var(--perigo); }
.status--info::before { background: var(--info); }

/* ---------- Trilha de navegação, paginação ---------- */
.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--texto-sm); color: var(--texto-3); }
.trilha a { color: var(--texto-2); text-decoration: none; }
.trilha a:hover { color: var(--texto); text-decoration: underline; }
.trilha .ic { width: 14px; height: 14px; }
.trilha [aria-current="page"] { color: var(--texto); }

.paginacao { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; font-size: var(--texto-sm); color: var(--texto-2); }
.paginacao .paginas { display: flex; gap: 4px; }
.paginacao .paginas button, .paginacao .paginas span { min-width: 38px; height: 38px; padding: 0 8px; border: 0; border-radius: var(--raio-pilula); background: none; color: var(--texto-2); display: grid; place-items: center; }
.paginacao .paginas button:hover { background: var(--nav-hover); color: var(--texto); }
.paginacao .paginas [aria-current="page"] { background: var(--nav-ativa-fundo); color: var(--nav-ativa-texto); }

/* ---------- Dica (tooltip) ---------- */
[data-dica] { position: relative; }
[data-dica]::after {
  content: attr(data-dica); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  padding: 7px 12px; border-radius: var(--raio-pilula); background: var(--neutro-950); color: #fff;
  font-size: var(--texto-xs); font-weight: var(--peso-medio); white-space: nowrap; pointer-events: none;
  z-index: var(--z-popover); display: none;
}
:root[data-tema="escuro"] [data-dica]::after { background: #F4F5F7; color: #131417; }
[data-dica]:hover::after, [data-dica]:focus-visible::after { display: block; animation: surgir var(--dur-rapida) var(--curva); }
.acoes-topo > [data-dica]:last-child::after, [data-dica-lado="esquerda"]::after { left: auto; right: 0; transform: none; }

/* ---------- Avatar ---------- */
.avatar {
  --tam: 36px; width: var(--tam); height: var(--tam); border-radius: 50%; flex: none;
  display: grid; place-items: center; overflow: hidden;
  background: var(--superficie-2); color: var(--texto-2); font-size: calc(var(--tam) * .38); font-weight: var(--peso-semi);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { --tam: 30px; }
.avatar--lg { --tam: 56px; }
.avatar--xl { --tam: 88px; }
.avatar-grupo { display: flex; }
.avatar-grupo .avatar { box-shadow: 0 0 0 2px var(--superficie); }
.avatar-grupo .avatar + .avatar { margin-left: -8px; }

/* ---------- Progresso ---------- */
.progresso { height: 8px; border-radius: var(--raio-pilula); background: var(--superficie-2); overflow: hidden; }
.progresso > span { display: block; height: 100%; width: var(--valor, 0%); border-radius: inherit; background: var(--texto); transition: width var(--dur-lenta) var(--curva); }
.progresso--sucesso > span { background: var(--sucesso); }
.progresso--marca > span { background: var(--marca); }
.progresso--fino { height: 4px; }
.anel {
  --tam: 56px; --espessura: 6px; --cor: var(--texto);
  width: var(--tam); height: var(--tam); border-radius: 50%; flex: none;
  background: conic-gradient(var(--cor) calc(var(--valor, 0) * 1%), var(--superficie-2) 0);
  display: grid; place-items: center; position: relative;
}
.anel::before { content: ""; position: absolute; inset: var(--espessura); border-radius: 50%; background: var(--superficie); }
.anel > span { position: relative; font-size: var(--texto-sm); font-weight: var(--peso-semi); }

/* ---------- Passos (stepper) ---------- */
.passos { display: flex; gap: var(--e-2); list-style: none; padding: 0; margin: 0; counter-reset: passo; }
.passos li { flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: var(--texto-sm); color: var(--texto-3); counter-increment: passo; }
.passos li::before { content: ""; height: 4px; border-radius: 4px; background: var(--superficie-2); }
.passos li[data-estado="feito"]::before { background: var(--texto); }
.passos li[data-estado="atual"]::before { background: var(--marca); }
.passos li[data-estado="atual"] { color: var(--texto); font-weight: var(--peso-medio); }
.passos li[data-estado="feito"] { color: var(--texto-2); }

/* ---------- Superfícies ---------- */
.cartao { background: var(--superficie); border: 1px solid transparent; border-radius: var(--raio-lg); padding: var(--esp-cartao); min-width: 0; box-shadow: var(--sombra-cartao); }
.cartao--contorno { border-color: var(--borda); box-shadow: none; }
.cartao--sem-borda { border-color: transparent; }
.cartao--compacto { padding: var(--esp-cartao-compacto); }
.cartao--plano { background: var(--superficie-2); border-color: transparent; box-shadow: none; }
.cartao--interativo { text-decoration: none; color: inherit; display: block; transition: transform var(--dur-media) var(--curva), box-shadow var(--dur-media); }
.cartao--interativo:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }
.cartao-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-4); margin-bottom: var(--e-5); }
.cartao-cabecalho h2, .cartao-cabecalho h3 { letter-spacing: -0.02em; }
.cartao-cabecalho p { color: var(--texto-2); font-size: var(--texto-sm); margin-top: 2px; }
.painel { background: var(--superficie); border: 0; border-radius: var(--raio-xl); padding: var(--esp-cartao-grande); box-shadow: var(--sombra-cartao); }
.bloco-tinta { background: var(--superficie-tinta); color: var(--texto-sobre-tinta); border-radius: var(--raio-xl); padding: var(--esp-cartao-grande); }
.bloco-tinta .t-2, .bloco-tinta .t-3 { color: var(--texto-sobre-tinta-2); }
.bloco-tinta .t-marca { color: var(--marca-viva); }

/* Tons por tipo de conteúdo: identificam aula, questões, flashcards, caderno, mapa e material */
.tom-aula { --tom: var(--tom-aula); --tom-texto: var(--tom-aula-texto); }
.tom-questoes { --tom: var(--tom-questoes); --tom-texto: var(--tom-questoes-texto); }
.tom-flashcards { --tom: var(--tom-flashcards); --tom-texto: var(--tom-flashcards-texto); }
.tom-caderno { --tom: var(--tom-caderno); --tom-texto: var(--tom-caderno-texto); }
.tom-mapa { --tom: var(--tom-mapa); --tom-texto: var(--tom-mapa-texto); }
.tom-material { --tom: var(--tom-material); --tom-texto: var(--tom-material-texto); }
.cartao[class*="tom-"], .bloco-tom { background: var(--tom); box-shadow: none; }
.icone-tom { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--tom, var(--superficie-2)); color: var(--tom-texto, var(--texto-2)); }
.icone-tom--sm { width: 36px; height: 36px; border-radius: 12px; }
.icone-tom--lg { width: 56px; height: 56px; border-radius: 18px; }
.cartao[class*="tom-"] .icone-tom { background: var(--superficie); }
.badge-tom { background: var(--tom); color: var(--tom-texto); }

/* Rótulo com ponto: abre seções e marca a categoria de um bloco */
.rotulo-ponto { display: inline-flex; align-items: center; gap: 8px; font-size: var(--texto-xs); font-weight: var(--peso-semi); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.rotulo-ponto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--marca); flex: none; }
.bloco-tinta .rotulo-ponto { color: var(--texto-sobre-tinta-2); }
.bloco-tinta .rotulo-ponto::before { background: var(--marca-viva); }

/* Número protagonista: o dado principal de um bloco */
.numero { font-size: var(--numero-xl); font-weight: var(--peso-semi); line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.numero small { font-size: .45em; letter-spacing: -0.01em; margin-left: 2px; color: var(--texto-3); font-weight: var(--peso-medio); }
.bloco-tinta .numero small { color: var(--texto-sobre-tinta-2); }

/* Assinatura da Carranza: o recorte.
   Um canto do cartão é "mordido" para abrigar a ação principal. */
.recorte {
  /* --r-recorte (raio do furo menos o respiro) e --folga (respiro) vêm do envoltório */
  position: relative;
  -webkit-mask: radial-gradient(circle calc(var(--r-recorte, 34px) + var(--folga, 6px)) at calc(100% - var(--r-recorte, 34px)) var(--r-recorte, 34px), #0000 98%, #000 100%);
          mask: radial-gradient(circle calc(var(--r-recorte, 34px) + var(--folga, 6px)) at calc(100% - var(--r-recorte, 34px)) var(--r-recorte, 34px), #0000 98%, #000 100%);
}
/* O botão é menor que o furo e fica no centro dele: sobra um anel vazio em volta,
   que mostra o fundo e deixa o recorte visível. */
.recorte-acao {
  position: absolute; top: var(--folga, 6px); right: var(--folga, 6px);
  width: calc((var(--r-recorte, 34px) - var(--folga, 6px)) * 2); height: calc((var(--r-recorte, 34px) - var(--folga, 6px)) * 2);
  border-radius: 50%; display: grid; place-items: center; border: 0; text-decoration: none;
}
.recorte-envoltorio { position: relative; }

/* ---------- Camadas: modal e gaveta (dialog nativo) ---------- */
dialog {
  font-family: var(--fonte); font-size: var(--texto-md); font-weight: var(--peso-regular);
  line-height: var(--entrelinha-texto); letter-spacing: normal; color: var(--texto);
}
/* Definições explícitas impedem que estilos padrão do navegador centralizem
   e comprimam o formulário ou troquem a família tipográfica na camada modal. */
dialog.modal, dialog.gaveta { font-family: var(--fonte); font-size: var(--texto-md); font-weight: var(--peso-regular); line-height: var(--entrelinha-texto); letter-spacing: normal; align-items: stretch; justify-content: flex-start; text-align: left; }
.modal > form, .gaveta > form, .gaveta > .gaveta-form { width: 100%; align-self: stretch; }
.modal :is(button, input, textarea, select), .gaveta :is(button, input, textarea, select) { font-family: var(--fonte); }
dialog::backdrop { background: var(--veu); backdrop-filter: none; }
.modal {
  width: min(var(--janela-largura), calc(100vw - 32px)); height: max-content; max-height: min(86vh, 760px);
  padding: 0; border: 0; border-radius: var(--raio-lg); background: var(--superficie); box-shadow: var(--sombra-3);
  display: none; flex-direction: column; overflow: hidden;
}
.modal[open] { display: flex; animation: modal-entrar var(--dur-media) var(--curva); }
/* Altura explícita por conteúdo evita dialog com altura zero em alguns Chromium.
   O formulário respeita o limite da janela e deixa o corpo rolar sem cortar as ações. */
.modal > form { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
.modal .modal-cabecalho, .modal .modal-rodape { flex-shrink: 0; }
.modal .modal-corpo { min-height: 0; }
.modal--lg { width: min(var(--janela-largura-lg), calc(100vw - 32px)); }
@keyframes modal-entrar { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-4); padding: var(--janela-padding) var(--janela-padding) var(--e-5); }
.modal-cabecalho h2 { font-family: var(--fonte); font-size: var(--janela-titulo); font-weight: var(--peso-semi); line-height: 1.25; letter-spacing: -0.025em; }
.modal-cabecalho p { color: var(--texto-2); font-size: var(--texto-sm); line-height: 1.55; margin-top: 6px; }
.modal-cabecalho > div { min-width: 0; flex: 1; }
.modal-cabecalho > [data-fechar] { flex: none; border-radius: var(--raio-pilula); }
.modal-corpo { padding: 0 var(--janela-padding) var(--janela-padding); overflow-y: auto; overscroll-behavior: contain; }
.modal-rodape { display: flex; justify-content: flex-end; gap: var(--e-2); padding: var(--e-4) var(--janela-padding); border-top: 1px solid var(--divisor); background: var(--superficie); flex-wrap: wrap; }
.gaveta {
  position: fixed; inset: var(--moldura-espaco) var(--moldura-espaco) var(--moldura-espaco) auto; height: calc(100% - var(--moldura-espaco) * 2); max-height: none;
  width: min(480px, calc(100vw - var(--moldura-espaco) * 2)); max-width: none; margin: 0;
  padding: 0; border: 0; border-radius: var(--raio-lg); background: var(--superficie); overflow: hidden;
  display: none; flex-direction: column; box-shadow: var(--sombra-3);
}
.gaveta[open] { display: flex; animation: gaveta-entrar var(--dur-lenta) var(--curva); }
@keyframes gaveta-entrar { from { transform: translateX(32px); opacity: 0; } }
.gaveta .modal-corpo { flex: 1; padding-top: var(--e-2); }

/* ---------- Aviso (toast) e faixa (banner) ---------- */
.avisos { position: fixed; z-index: var(--z-toast); bottom: var(--e-6); right: var(--e-6); display: flex; flex-direction: column; gap: var(--e-2); width: min(380px, calc(100vw - 32px)); }
.aviso {
  display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-4);
  border-radius: 22px; background: var(--neutro-950); color: #F4F5F7; box-shadow: var(--sombra-3);
  font-size: var(--texto-sm); animation: modal-entrar var(--dur-media) var(--curva);
}
:root[data-tema="escuro"] .aviso { background: #F4F5F7; color: #131417; }
.aviso .ic { margin-top: 1px; }
.aviso--sucesso .ic { color: #6FD9A0; }
:root[data-tema="escuro"] .aviso--sucesso .ic { color: var(--verde-600); }
.aviso button { margin-left: auto; border: 0; background: none; color: inherit; opacity: .7; font-weight: var(--peso-medio); }

.faixa { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-4) var(--e-5); border-radius: 22px; font-size: var(--texto-sm); border: 1px solid transparent; }
.faixa strong { font-weight: var(--peso-semi); color: var(--texto); }
.faixa > span > strong:first-child { display: block; }
.faixa--info { background: var(--info-suave); color: var(--texto); }
.faixa--info > .ic { color: var(--info); }
.faixa--aviso { background: var(--aviso-suave); }
.faixa--aviso > .ic { color: var(--aviso-texto); }
.faixa--perigo { background: var(--perigo-suave); }
.faixa--perigo > .ic { color: var(--perigo-texto); }
.faixa--sucesso { background: var(--sucesso-suave); }
.faixa--sucesso > .ic { color: var(--sucesso-texto); }
.faixa--neutra { background: var(--superficie-2); }
.faixa .acoes { margin-left: auto; display: flex; gap: var(--e-2); }

/* ---------- Esqueleto, vazio, sem permissão ---------- */
.esqueleto { position: relative; overflow: hidden; background: var(--superficie-2); border-radius: var(--raio-sm); }
.esqueleto::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--superficie) 60%, transparent), transparent); animation: brilho 1.4s infinite; }
@keyframes brilho { to { transform: translateX(100%); } }
.esqueleto-linha { height: 12px; margin-bottom: 10px; width: var(--valor, 100%); }
.vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e-3); padding: var(--e-12) var(--e-6); }
.vazio .vazio-icone { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: var(--superficie-2); color: var(--texto-2); }
.vazio p { color: var(--texto-2); max-width: 44ch; }

/* ---------- Tabela ---------- */
.tabela-quadro { background: var(--superficie); border: 0; border-radius: var(--raio-lg); overflow: hidden; box-shadow: var(--sombra-cartao); }
.tabela-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); padding: var(--e-5) var(--e-6); border-bottom: 1px solid var(--divisor); }
.tabela-barra .entrada-grupo { flex: 1 1 260px; max-width: 360px; }
.tabela-lote { display: flex; align-items: center; gap: var(--e-3); padding: 10px var(--e-4); background: var(--nav-ativa-fundo); color: var(--nav-ativa-texto); font-size: var(--texto-sm); }
.tabela-lote[hidden] { display: none; }
.tabela-lote .btn { --btn-fundo: transparent; --btn-texto: var(--nav-ativa-texto); --btn-borda: color-mix(in srgb, var(--nav-ativa-texto) 30%, transparent); --btn-hover: color-mix(in srgb, var(--nav-ativa-texto) 12%, transparent); }
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; font-size: var(--texto-sm); }
.tabela th { position: sticky; top: 0; background: var(--superficie); text-align: left; font-size: var(--texto-xs); font-weight: var(--peso-medio); letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); padding: 0 var(--e-4); height: 46px; border-bottom: 1px solid var(--divisor); white-space: nowrap; }
.tabela th:first-child, .tabela td:first-child { padding-left: var(--e-6); }
.tabela th:last-child, .tabela td:last-child { padding-right: var(--e-6); }
.tabela td { padding: 14px var(--e-4); border-bottom: 1px solid var(--divisor); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--superficie-3); }
.tabela tbody tr[aria-selected="true"] { background: color-mix(in srgb, var(--info-suave) 70%, transparent); }
.tabela .col-check { width: 44px; padding-right: 0; }
.tabela .col-acoes { width: 56px; text-align: right; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .ordenar { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; color: inherit; font-weight: inherit; }
.tabela .ordenar .ic { width: 14px; height: 14px; opacity: .5; }
.tabela th[aria-sort] .ordenar { color: var(--texto); }
.tabela th[aria-sort] .ordenar .ic { opacity: 1; }
.celula-principal { display: flex; align-items: center; gap: var(--e-3); min-width: 280px; }
.celula-principal strong { font-weight: var(--peso-medio); color: var(--texto); display: block; }
.celula-principal small { color: var(--texto-3); font-size: var(--texto-xs); }
.miniatura { width: 56px; height: 40px; border-radius: 12px; background: var(--superficie-2); object-fit: cover; flex: none; display: grid; place-items: center; color: var(--texto-3); overflow: hidden; }
.tabela-rodape { padding: var(--e-4) var(--e-6); border-top: 1px solid var(--divisor); }

/* ---------- Envio de arquivo ---------- */
.envio { border: 1.5px dashed var(--borda-forte); border-radius: 24px; padding: var(--e-8) var(--e-6); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e-2); background: var(--superficie-3); transition: border-color var(--dur-rapida), background var(--dur-rapida); }
.envio:hover, .envio.arrastando { border-color: var(--texto-2); background: var(--superficie-2); }
.envio .vazio-icone { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie); color: var(--texto-2); border: 1px solid var(--borda); }
.arquivo { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border: 1px solid var(--borda); border-radius: 18px; background: var(--superficie); }
.arquivo .tipo { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--superficie-2); font-size: var(--texto-xs); font-weight: var(--peso-semi); color: var(--texto-2); flex: none; }
.arquivo--erro { border-color: var(--perigo); background: var(--perigo-suave); }
.arquivo--ok .tipo { background: var(--sucesso-suave); color: var(--sucesso-texto); }

/* ---------- Indicadores (KPI) ---------- */
.kpi { display: flex; flex-direction: column; gap: var(--e-2); position: relative; }
.kpi .kpi-valor { font-size: 2.5rem; font-weight: var(--peso-semi); line-height: 1.05; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; margin-top: auto; padding-top: var(--e-3); }
.kpi .kpi-rotulo { font-size: var(--texto-sm); font-weight: var(--peso-medio); color: var(--texto-2); padding-right: 44px; }
.kpi .acao-circular { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; }
.kpi.bloco-tinta, .kpi.cartao--tinta { background: var(--superficie-tinta); color: var(--texto-sobre-tinta); box-shadow: none; }
.kpi.cartao--tinta .kpi-rotulo, .kpi.cartao--tinta .t-3 { color: var(--texto-sobre-tinta-2); }
.kpi.cartao--tinta .kpi-valor { color: #fff; }
.cartao--tinta .t-marca { color: var(--marca-viva); }
.kpi.cartao--tinta .acao-circular { background: var(--marca); border-color: var(--marca); color: #fff; }
.kpi[class*="tom-"] .kpi-rotulo { color: var(--tom-texto); }
.kpi .kpi-variacao { font-size: var(--texto-xs); font-weight: var(--peso-semi); }
.kpi-variacao.sobe { color: var(--sucesso-texto); }
.kpi-variacao.desce { color: var(--perigo-texto); }
.dado-exemplo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--texto-xs); color: var(--texto-3); }
.dado-exemplo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; }

/* =========================================================
   Componentes do domínio
   ========================================================= */

/* Cartão de produto (curso, combo, assinatura, mentoria) */
.produto { display: flex; flex-direction: column; background: var(--superficie); border: 0; border-radius: var(--raio-lg); padding: 8px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--sombra-cartao); transition: transform var(--dur-media) var(--curva), box-shadow var(--dur-media); }
.produto:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }
.produto-capa { aspect-ratio: 16 / 9; position: relative; display: flex; align-items: flex-end; padding: var(--e-5); border-radius: 22px; background: var(--superficie-tinta); color: var(--texto-sobre-tinta); overflow: hidden; }
.produto-capa .capa-sigla { font-size: var(--titulo-lg); font-weight: var(--peso-bold); letter-spacing: -0.04em; line-height: 1; }
.produto-capa .capa-cargo { font-size: var(--texto-sm); color: var(--texto-sobre-tinta-2); margin-top: 4px; }
.produto-capa::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; border: 22px solid color-mix(in srgb, var(--marca-400) 70%, transparent); }
.produto-capa[data-tom="vinho"] { background: var(--marca-800); }
.produto-capa[data-tom="vinho"]::after { border-color: rgba(255,255,255,.12); }
.produto-capa[data-tom="claro"] { background: var(--superficie-2); color: var(--texto); }
.produto-capa[data-tom="claro"] .capa-cargo { color: var(--texto-2); }
.produto-capa[data-tom="claro"]::after { border-color: var(--borda-forte); }
.produto-corpo { padding: var(--e-4) var(--e-3) var(--e-3); display: flex; flex-direction: column; gap: var(--e-2); flex: 1; }
.produto-corpo h3 { font-size: var(--texto-lg); letter-spacing: -0.015em; }
.produto-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.produto-rodape { margin-top: auto; padding-top: var(--e-3); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-3); }
.acesso { font-size: var(--texto-xs); color: var(--texto-2); display: inline-flex; align-items: center; gap: 6px; }
.acesso .ic { width: 14px; height: 14px; }

/* Preço */
.preco { display: flex; flex-direction: column; }
.preco .de { font-size: var(--texto-xs); color: var(--texto-3); text-decoration: line-through; }
.preco .parcela { font-size: var(--texto-xs); color: var(--texto-2); }
.preco .valor { font-size: var(--titulo-sm); font-weight: var(--peso-semi); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.preco .avista { font-size: var(--texto-xs); color: var(--texto-2); }
.preco--grande .valor { font-size: var(--titulo-lg); }

/* Linha de módulo e aula no editor */
.modulo { border: 1px solid var(--borda); border-radius: 22px; background: var(--superficie); }
.modulo + .modulo { margin-top: var(--e-3); }
.modulo-cabecalho { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); }
.modulo-cabecalho .alca { color: var(--texto-3); cursor: grab; }
.modulo-titulo { flex: 1; min-width: 0; }
.modulo-titulo strong { display: block; font-weight: var(--peso-medio); }
.modulo-titulo small { color: var(--texto-3); font-size: var(--texto-xs); }
.modulo-itens { border-top: 1px solid var(--divisor); padding: 6px; }
.item-aula { display: flex; align-items: center; gap: var(--e-3); padding: var(--esp-linha-compacta); border-radius: var(--raio-linha-compacta); font-size: var(--texto-sm); }
.item-aula:hover { background: var(--superficie-3); }
.item-aula .ic { color: var(--texto-3); }
.item-aula .duracao { margin-left: auto; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.selo-origem { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--raio-pilula); font-size: var(--texto-xs); font-weight: var(--peso-semi); }
.selo-origem .ic { width: 14px; height: 14px; }
.selo-origem--vinculado { background: var(--info-suave); color: var(--info-texto); }
.selo-origem--copia { background: var(--superficie-2); color: var(--texto-2); }
.selo-origem--proprio { background: transparent; color: var(--texto-3); border: 1px dashed var(--borda-forte); }

/* Questão */
.questao { display: flex; flex-direction: column; gap: var(--e-5); }
.questao-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.questao-enunciado { font-size: var(--texto-lg); line-height: 1.65; max-width: var(--largura-leitura); }
.texto-associado { padding: var(--e-4) var(--e-5); border-left: 0; background: var(--superficie-2); border-radius: 20px; color: var(--texto-2); line-height: 1.7; max-width: var(--largura-leitura); }
.alternativas { display: flex; flex-direction: column; gap: var(--e-2); list-style: none; padding: 0; margin: 0; max-width: var(--largura-leitura); }
.alternativa {
  display: flex; align-items: flex-start; gap: var(--e-3); width: 100%; padding: var(--e-3) var(--e-4);
  border: 1.5px solid var(--borda); border-radius: 20px; background: var(--superficie); text-align: left; line-height: 1.5;
  transition: border-color var(--dur-rapida), background var(--dur-rapida);
}
.alternativa:hover { border-color: var(--borda-forte); }
.alternativa .letra { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: var(--texto-sm); font-weight: var(--peso-semi); border: 1.5px solid var(--borda-forte); color: var(--texto-2); }
.alternativa .resultado { margin-left: auto; display: none; align-items: center; gap: 4px; font-size: var(--texto-xs); font-weight: var(--peso-semi); white-space: nowrap; padding-left: var(--e-2); }
.alternativa[aria-checked="true"], .alternativa.escolhida { border-color: var(--texto); }
.alternativa[aria-checked="true"] .letra, .alternativa.escolhida .letra { background: var(--texto); border-color: var(--texto); color: var(--superficie); }
.alternativa.correta { border-color: var(--resposta-correta); background: var(--sucesso-suave); }
.alternativa.correta .letra { background: var(--resposta-correta); border-color: var(--resposta-correta); color: #fff; }
.alternativa.correta .resultado { display: inline-flex; color: var(--sucesso-texto); }
.alternativa.incorreta { border-color: var(--resposta-incorreta); background: var(--perigo-suave); border-style: dashed; }
.alternativa.incorreta .letra { background: transparent; border-color: var(--resposta-incorreta); color: var(--perigo-texto); text-decoration: line-through; }
.alternativa.incorreta .resultado { display: inline-flex; color: var(--perigo-texto); }
.alternativa.eliminada { opacity: .5; }
.alternativa.eliminada .texto-alt { text-decoration: line-through; }
.questao.anulada .alternativas { opacity: .6; }
.comentario { padding: var(--e-6); border-radius: 24px; background: var(--superficie-2); max-width: var(--largura-leitura); }
.comentario-autor { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-3); font-size: var(--texto-sm); }

/* Navegação de questões no simulado */
.mapa-questoes { display: grid; grid-template-columns: repeat(auto-fill, 38px); gap: 6px; }
.mapa-questoes button { height: 38px; border-radius: 50%; border: 1px solid var(--borda); background: var(--superficie); font-size: var(--texto-sm); font-weight: var(--peso-medio); color: var(--texto-2); position: relative; }
.mapa-questoes button.respondida { background: var(--superficie-2); color: var(--texto); border-color: transparent; }
.mapa-questoes button.revisar::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--aviso); }
.mapa-questoes button[aria-current="true"] { background: var(--marca); color: var(--sobre-marca); border-color: transparent; }

/* Flashcard */
.flashcard { perspective: 1400px; width: 100%; max-width: 560px; aspect-ratio: 8 / 5; margin: 0 auto; }
.flashcard-interno { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 520ms var(--curva); cursor: pointer; }
.flashcard.virado .flashcard-interno { transform: rotateY(180deg); }
.flashcard-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--raio-xl); padding: var(--e-10); display: flex; flex-direction: column; justify-content: center; gap: var(--e-3); background: var(--superficie); border: 0; box-shadow: var(--sombra-2); }
.flashcard-face p { font-size: var(--titulo-sm); line-height: 1.45; }
.flashcard-verso { transform: rotateY(180deg); background: var(--superficie-tinta); color: var(--texto-sobre-tinta); border-color: transparent; }
.flashcard-verso .t-3 { color: var(--texto-sobre-tinta-2); }
@media (prefers-reduced-motion: reduce) { .flashcard-interno { transition: none; } }

/* Mapa mental */
.mapa-mental { display: flex; align-items: center; gap: var(--e-8); overflow-x: auto; padding: var(--e-6); }
.no { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--raio-md); background: var(--superficie); border: 1px solid var(--borda); font-size: var(--texto-sm); white-space: nowrap; }
.no--raiz { background: var(--superficie-tinta); color: var(--texto-sobre-tinta); border: 0; font-weight: var(--peso-semi); font-size: var(--texto-md); padding: 14px 18px; border-radius: var(--raio-lg); }
.no--ramo { font-weight: var(--peso-medio); border-left: 3px solid var(--marca); }
.ramos { display: flex; flex-direction: column; gap: var(--e-3); position: relative; padding-left: var(--e-6); }
.ramos::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; border-left: 1.5px solid var(--borda-forte); }
.ramo { display: flex; align-items: center; gap: var(--e-6); position: relative; }
.ramo::before { content: ""; position: absolute; left: calc(var(--e-6) * -1); width: var(--e-6); border-top: 1.5px solid var(--borda-forte); top: 50%; }
.folhas { display: flex; flex-direction: column; gap: 6px; position: relative; padding-left: var(--e-5); }
.folhas::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; border-left: 1.5px solid var(--borda); }
.folhas .no { position: relative; }
.folhas .no::before { content: ""; position: absolute; left: calc(var(--e-5) * -1); width: var(--e-5); border-top: 1.5px solid var(--borda); top: 50%; }

/* Caderno: leitura e marcações */
.leitor { max-width: 72ch; margin: 0 auto; font-size: var(--tam-leitura, 1.0625rem); line-height: 1.8; }
.leitor h2 { margin: var(--e-8) 0 var(--e-3); }
.leitor p + p { margin-top: var(--e-4); }
.marca-cor { border-radius: 3px; padding: 1px 2px; cursor: pointer; }
.marca-cor--1 { background: #FFE58A; color: #2A2C32; }
.marca-cor--2 { background: #BFE6CF; color: #2A2C32; }
.marca-cor--3 { background: #C9DBFB; color: #2A2C32; }
.marca-cor--4 { background: #F6C9CF; color: #2A2C32; }
.marca-cor--5 { background: #DCCFF7; color: #2A2C32; }
.ponto-cor { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; }
.nota-lateral { padding: var(--e-4); border-radius: var(--raio-md); background: var(--superficie); border: 1px solid var(--borda); font-size: var(--texto-sm); }

/* Jornada: sequência e troféu */
.sequencia { display: flex; gap: 6px; }
.sequencia .dia { flex: 1; min-width: 32px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--texto-xs); color: var(--texto-3); }
.sequencia .dia span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie-2); color: var(--texto-3); }
.sequencia .dia.feito span { background: var(--texto); color: var(--superficie); }
.sequencia .dia.hoje span { background: var(--marca); color: var(--sobre-marca); }
.sequencia .dia.hoje:not(.feito) span { background: var(--marca-suave); color: var(--marca-texto); box-shadow: inset 0 0 0 2px var(--marca); }
.trofeu { flex: none; width: 72px; height: 72px; border-radius: 24px; display: grid; place-items: center; background: var(--superficie-2); color: var(--texto-3); position: relative; }
.trofeu .ic { width: 32px; height: 32px; }
.trofeu.conquistado { background: var(--superficie-tinta); color: var(--marca-viva); }
.trofeu.conquistado[data-nivel="2"] { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--marca-viva) 45%, transparent); }
.trofeu.conquistado[data-nivel="3"] { background: var(--marca); color: #fff; }
:root[data-tema="escuro"] .trofeu.conquistado:not([data-nivel="3"]) { background: #2A2C33; }
.trofeu.proximo { outline: 0; box-shadow: inset 0 0 0 2px var(--borda-forte); }

/* Calendário de mês */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; font-size: var(--texto-sm); }
.calendario .dsem { color: var(--texto-3); font-size: var(--texto-xs); padding-bottom: 4px; }
.calendario .d { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: var(--texto-2); }
.calendario .d.estudou { background: var(--texto); color: var(--superficie); font-weight: var(--peso-semi); }
.calendario .d.hoje { box-shadow: inset 0 0 0 2px var(--marca); color: var(--texto); }
.calendario .d.estudou.hoje { background: var(--marca); color: var(--sobre-marca); box-shadow: none; }
.calendario .d.fora { opacity: .3; }

/* Agenda de dias (plano) */
.dias-semana { display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; }
.dia-pilula { flex: none; width: 64px; padding: var(--e-3) 0; border-radius: var(--raio-pilula); border: 1px solid var(--borda); background: var(--superficie); display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--texto-2); font-size: var(--texto-xs); }
.dia-pilula strong { font-size: var(--titulo-sm); color: var(--texto); font-weight: var(--peso-medio); }
.dia-pilula[aria-pressed="true"] { background: var(--nav-ativa-fundo); color: var(--nav-ativa-texto); border-color: transparent; }
.dia-pilula[aria-pressed="true"] strong { color: var(--nav-ativa-texto); }
.atividade { display: flex; align-items: center; gap: var(--e-3); padding: var(--esp-linha); border-radius: var(--raio-linha); border: 1px solid var(--borda); background: var(--superficie); }
.atividade .tipo { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--superficie-2); color: var(--texto-2); }
.atividade.feita { opacity: .6; }
.atividade.feita .atividade-titulo { text-decoration: line-through; }

/* Comunidade */
.post { background: var(--superficie); border: 0; border-radius: var(--raio-lg); padding: var(--esp-cartao-compacto); box-shadow: var(--sombra-cartao); }
.post-cabecalho { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-3); }
.post-cabecalho small { color: var(--texto-3); }
.post-acoes { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--divisor); }
.enquete-opcao { position: relative; display: flex; justify-content: space-between; padding: 12px var(--e-5); border: 1px solid var(--borda); border-radius: var(--raio-pilula); overflow: hidden; font-size: var(--texto-sm); }
.enquete-opcao::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--valor, 0%); background: var(--superficie-2); z-index: 0; }
.enquete-opcao > * { position: relative; }

/* Checkout */
.resumo-pedido { position: sticky; top: var(--e-6); }
.forma-pagamento { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--e-2); }
.forma-pagamento label { display: flex; flex-direction: column; gap: 4px; padding: var(--e-3) var(--e-4); border: 1.5px solid var(--borda); border-radius: 18px; cursor: pointer; font-size: var(--texto-sm); }
.forma-pagamento label small { color: var(--texto-3); font-size: var(--texto-xs); }
.forma-pagamento input { position: absolute; opacity: 0; pointer-events: none; }
.forma-pagamento label:has(input:checked) { border-color: var(--texto); background: var(--superficie-3); }
.forma-pagamento label:has(input:focus-visible) { box-shadow: var(--foco); }

/* =========================================================
   Onde cada coisa abre
   Gaveta de detalhe · página de detalhe · modo fila
   ========================================================= */

/* Linha clicável: a linha inteira aciona o item principal */
.tabela tbody tr.linha-clicavel { cursor: pointer; }
.tabela tbody tr.linha-aberta { background: var(--superficie-2); box-shadow: inset 3px 0 0 var(--marca); }
.tabela tbody tr.linha-salva { animation: linha-salva 1.6s var(--curva); }
@keyframes linha-salva { 0%, 40% { background: var(--sucesso-suave); } }
.item-novo { animation: modal-entrar var(--dur-media) var(--curva); }

/* Gaveta de detalhe: ver e ajustar sem sair da lista */
.gaveta--detalhe { width: min(680px, 100vw); }
.gaveta--larga { width: min(880px, 100vw); }
.detalhe-topo { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-4) var(--e-6) 0; }
.detalhe-topo .posicao { font-size: var(--texto-xs); color: var(--texto-3); font-variant-numeric: tabular-nums; min-width: 52px; text-align: center; }
.detalhe-topo .cresce { flex: 1; }
.gaveta--detalhe .modal-cabecalho { padding-top: var(--e-3); }
.gaveta--detalhe .modal-cabecalho h2 { font-size: var(--titulo-sm); }
.gaveta-secao { padding-block: var(--e-5); border-top: 1px solid var(--divisor); }
.gaveta-secao:first-child { border-top: 0; padding-top: var(--e-2); }
.gaveta-secao > h3 { font-size: var(--texto-md); font-weight: var(--peso-semi); margin-bottom: var(--e-3); }
.dados-lista { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: var(--e-2) var(--e-4); font-size: var(--texto-sm); }
.dados-lista dt { color: var(--texto-2); }
.dados-lista dd { margin: 0; color: var(--texto); }
dialog:not([data-modo="novo"]) .dialog-modo-novo, dialog[data-modo="novo"] .so-edicao { display: none; }

/* Alterações não salvas */
.confirmar-descarte { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; padding: var(--e-3) var(--e-6); background: var(--aviso-suave); border-top: 1px solid var(--divisor); font-size: var(--texto-sm); }
.confirmar-descarte[hidden] { display: none; }
.confirmar-descarte > .ic { color: var(--aviso-texto); }
.confirmar-descarte span { flex: 1; min-width: 160px; font-weight: var(--peso-medio); }

/* Aviso com desfazer */
.aviso .aviso-desfazer { margin-left: auto; opacity: 1; text-decoration: underline; text-underline-offset: 3px; padding: 0 4px; }
.aviso .aviso-desfazer + .aviso-fechar { margin-left: 0; }

/* Página de detalhe: volta para a lista e passa ao anterior ou próximo */
.detalhe-navegacao { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; padding-top: var(--e-4); }
.voltar-lista { display: inline-flex; align-items: center; gap: 6px; font-size: var(--texto-sm); font-weight: var(--peso-medio); color: var(--texto-2); text-decoration: none; border-radius: var(--raio-pilula); padding: 6px 14px 6px 8px; margin-left: -4px; background: var(--superficie); box-shadow: var(--sombra-cartao); }
.voltar-lista:hover { color: var(--texto); background: var(--nav-hover); }
.voltar-lista .ic { width: 16px; height: 16px; }
.paginador-item { display: inline-flex; align-items: center; gap: 4px; font-size: var(--texto-xs); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.paginador-item > span { padding: 0 6px; }
.detalhe-navegacao + .cabecalho-pagina { padding-top: var(--e-2); }

/* Modo fila: um item atrás do outro */
.fila { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); border: 0; border-radius: var(--raio-lg); background: var(--superficie); overflow: hidden; min-height: 560px; box-shadow: var(--sombra-cartao); }
.fila-lista { border-right: 1px solid var(--divisor); display: flex; flex-direction: column; min-height: 0; }
.fila-lista-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); padding: var(--e-4); border-bottom: 1px solid var(--divisor); font-size: var(--texto-sm); }
.fila-lista-topo strong { font-weight: var(--peso-semi); }
.fila-itens { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; max-height: 720px; }
.fila-item { width: 100%; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: var(--e-3) var(--e-4); border: 0; border-radius: 18px; background: none; color: var(--texto); font-size: var(--texto-sm); }
.fila-item:hover { background: var(--nav-hover); }
.fila-item[aria-current="true"] { background: var(--nav-ativa-fundo); color: var(--nav-ativa-texto); }
.fila-item[aria-current="true"] small, .fila-item[aria-current="true"] .fila-estado { color: inherit; opacity: .75; }
.fila-item strong { font-weight: var(--peso-medio); display: block; }
.fila-item small { color: var(--texto-3); font-size: var(--texto-xs); }
.fila-item .fila-estado { font-size: var(--texto-xs); color: var(--texto-2); }
.fila-item.resolvido { opacity: .55; }
.fila-item.resolvido strong { text-decoration: line-through; }
.fila-item.resolvido .fila-estado { color: var(--sucesso-texto); font-weight: var(--peso-medio); }
.fila-detalhe { display: flex; flex-direction: column; min-width: 0; overflow-y: auto; max-height: 780px; }
.fila-detalhe-conteudo { display: flex; flex-direction: column; flex: 1; }
.fila-detalhe-conteudo[hidden] { display: none; }
.fila-detalhe-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-4); padding: var(--e-5) var(--e-6) var(--e-3); flex-wrap: wrap; }
.fila-detalhe-cabecalho h2 { font-size: var(--titulo-sm); }
.fila-detalhe-corpo { padding: 0 var(--e-6) var(--e-6); display: flex; flex-direction: column; gap: var(--e-5); flex: 1; }
.fila-acoes { position: sticky; bottom: 0; display: flex; gap: var(--e-2); justify-content: flex-end; flex-wrap: wrap; padding: var(--e-4) var(--e-6); border-top: 1px solid var(--divisor); background: var(--superficie); }
.fila-acoes .cresce { flex: 1; }
.fila [data-fila-voltar] { display: none; }
@media (max-width: 900px) {
  .fila { grid-template-columns: 1fr; }
  .fila-lista { border-right: 0; }
  .fila .fila-detalhe { display: none; }
  .fila.fila--detalhe-aberto .fila-lista { display: none; }
  .fila.fila--detalhe-aberto .fila-detalhe { display: flex; max-height: none; }
  .fila [data-fila-voltar] { display: inline-flex; }
}

/* Carregar mais (feeds e listas do aluno) */
.carregar-mais { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); padding: var(--e-5) 0 var(--e-2); font-size: var(--texto-sm); color: var(--texto-3); }
.carregar-mais [hidden] { display: none; }

/* Campo de data em português */
.campo-data { display: block; }
.data-hora { display: flex; align-items: center; gap: var(--e-2); }
.data-hora .cresce { flex: 1; min-width: 0; }
.data-hora .seletor { width: 100%; }
.data-hora-hora { flex: 0 0 116px; }
.data-hora-sep { font-size: var(--texto-sm); }
.camada-calendario { padding: 8px; }
.calendario-cabecalho { display: flex; align-items: center; justify-content: space-between; padding: 0 0 8px; font-weight: var(--peso-semi); font-size: var(--texto-sm); }
.calendario-seletor { display: grid; grid-template-columns: repeat(7, 36px); gap: 2px; }
.calendario-seletor .dsem { font-size: var(--texto-xs); color: var(--texto-3); text-align: center; padding: 4px 0; }
.calendario-seletor .opcao { width: 36px; min-height: 36px; padding: 0; border-radius: 50%; justify-content: center; font-size: var(--texto-sm); font-variant-numeric: tabular-nums; }
.calendario-seletor .opcao[aria-selected="true"] { background: var(--nav-ativa-fundo); color: var(--nav-ativa-texto); }
.calendario-seletor .fora { opacity: .35; }

/* Indicador de etapas */
.indicador-etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--e-2); font-size: var(--texto-xs); color: var(--texto-3); }
.indicador-etapas li { display: flex; flex-direction: column; gap: 6px; }
.indicador-etapas li::before { content: ""; height: 4px; border-radius: 4px; background: var(--superficie-2); }
.indicador-etapas li.feito::before { background: var(--nav-ativa-fundo); }
.indicador-etapas li[aria-current="step"]::before { background: var(--marca); }
.indicador-etapas li[aria-current="step"] { color: var(--texto); font-weight: var(--peso-medio); }
.indicador-etapas li.feito { color: var(--texto-2); }

@media (max-width: 768px) {
  .gaveta { inset: 0 0 0 auto; height: 100%; width: min(480px, 100vw); border-radius: 28px 0 0 28px; }
  .gaveta--detalhe, .gaveta--larga { width: 100vw; border-radius: 0; }
  .dados-lista { grid-template-columns: 1fr; gap: 2px var(--e-4); }
  .dados-lista dd { margin-bottom: var(--e-2); }
}

/* Botão com aparência de link (nome do item numa linha que abre gaveta) */
.botao-link { border: 0; background: none; padding: 0; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-align: left; font: inherit; color: inherit; }

@media (max-width: 480px) {
  .detalhe-topo { padding-inline: var(--e-4); gap: 4px; }
  .detalhe-topo .btn:not(.btn-icone) { font-size: 0; gap: 0; width: 36px; padding: 0; justify-content: center; }
  .detalhe-topo .btn:not(.btn-icone) .ic { width: 18px; height: 18px; }
}

/* Paginação com links (servidor) e estados de formulário */
.paginacao .paginas a { min-width: 38px; height: 38px; padding: 0 8px; border-radius: var(--raio-pilula); display: grid; place-items: center; color: var(--texto-2); text-decoration: none; }
.paginacao .paginas a:hover { background: var(--nav-hover); color: var(--texto); }
.paginacao .paginas .desligado { opacity: .35; }
.paginacao-por { display: inline-flex; }
.seletor.invalido, .entrada.invalido { border-color: var(--perigo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--perigo) 18%, transparent); }
.btn.carregando { opacity: .7; pointer-events: none; }
.erro-campo { color: var(--perigo-texto); font-size: var(--texto-xs); margin-top: 6px; }
.abas a.aba { text-decoration: none; }

/* Cartões empilhados numa pilha seguem o mesmo vão das grades */
.pilha > :is(.cartao, .tabela-quadro, .painel, .bloco-tinta, .post) + :is(.cartao, .tabela-quadro, .painel, .bloco-tinta, .post) { margin-top: var(--gap-cartoes); }

/* Segmentado com rádio (escolha única dentro de formulário, ex.: modo de carreira) */
.segmentado-opcao { position: relative; display: inline-flex; }
.segmentado-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado-opcao span { display: inline-flex; align-items: center; height: 34px; padding: 0 var(--e-4); border-radius: var(--raio-pilula); color: var(--texto-2); font-size: var(--texto-sm); font-weight: var(--peso-medio); cursor: pointer; }
.segmentado-opcao input:checked + span { background: var(--nav-ativa-fundo); color: var(--nav-ativa-texto); }
.segmentado-opcao input:focus-visible + span { box-shadow: var(--foco); }
.campo-carreira { display: flex; flex-direction: column; gap: var(--e-2); }
.campo-carreira .segmentado { align-self: flex-start; flex-wrap: wrap; }

/* Paginação extensa também cabe em telas pequenas, sem cortar opções. */
.paginacao > .linha { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.paginacao .paginas { flex-wrap: wrap; max-width: 100%; }

/* Resumo compartilhado pelos acervos. */
.resumo-acervo { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--gap-cartoes); }
.kpi-linha { display: flex; align-items: center; gap: var(--e-4); min-width: 220px; padding: 14px 24px 14px 14px; border-radius: var(--raio-pilula); text-decoration: none; color: inherit; transition: transform var(--dur-media) var(--curva); }
.kpi-linha:hover { transform: translateY(-2px); }
.kpi-linha .icone-tom { width: 52px; height: 52px; border-radius: 50%; }
.kpi-linha .kpi-valor { display: block; font-size: 1.75rem; font-weight: var(--peso-semi); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.kpi-linha .kpi-rotulo { display: block; margin-top: 4px; font-size: var(--texto-sm); color: var(--texto-2); }
.kpi-linha[class*="tom-"] .kpi-rotulo { color: var(--tom-texto); }

/* Tipografia e ritmo compartilhados entre todos os formulários em camadas. */
:is(.modal, .gaveta) .campo > label, :is(.modal, .gaveta) .campo-rotulo { font-size: var(--texto-sm); font-weight: var(--peso-medio); line-height: 1.4; }
:is(.modal, .gaveta) .entrada, :is(.modal, .gaveta) .seletor { font-size: var(--texto-md); }
.modal-corpo > .form-grade { gap: var(--e-4); }
@media (max-width: 640px) {
  dialog { --janela-padding: 20px; --janela-titulo: 1.25rem; }
  .modal { max-height: calc(100dvh - 24px); width: calc(100vw - 24px); border-radius: 28px; }
  .modal-rodape { gap: var(--e-2); }
  .modal-rodape .btn { min-height: 44px; }
}