/* Plataforma de Aprendizado: estilos da aplicação.
   Camadas: ds/tokens (marca) -> ds/components.css (componentes eg-*) -> tokens-app.css -> este arquivo.
   Cantos retos, sem sombra, sem gradiente; estados só por cor (readme do DS). */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--surface-page);color:var(--text-primary)}
img,svg,video,iframe{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
a{color:var(--app-link);border-bottom:0;text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--app-link-hover)}
:focus-visible{outline:var(--eg-focus-ring);outline-offset:2px}
[hidden]{display:none !important}
.vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}}

/* ---------- Botões (sobre .eg-btn) ---------- */
.eg-btn{min-height:var(--eg-target-min)}
.eg-btn--primary{background:var(--app-primario-bg);border-color:var(--app-primario-bg);color:var(--app-primario-fg)}
.eg-btn--primary:hover{background:var(--app-primario-hover-bg);border-color:var(--app-primario-hover-bg);color:var(--app-primario-hover-fg)}
.eg-btn--primary:active{background:var(--state-accent-press);border-color:var(--state-accent-press);color:var(--eg-white)}
.eg-btn--perigo{background:var(--status-danger);border-color:var(--status-danger);color:var(--eg-white)}
.eg-btn--perigo:hover{background:var(--state-accent-press);border-color:var(--state-accent-press)}
.eg-btn--link{background:transparent;border:0;padding:var(--space-2) 0;min-height:var(--eg-target-min);color:var(--app-link);text-decoration:underline;text-underline-offset:2px;font-weight:var(--fw-semibold)}
.eg-btn--link:hover{color:var(--app-link-hover)}
.eg-btn--sm{min-height:var(--eg-target-min)}
.tabela .eg-btn--sm,.tabela td .eg-btn{min-height:var(--app-alvo-compacto)}
.eg-btn[data-estado="carregando"]{cursor:progress}
.eg-btn[data-estado="carregando"]::before{content:"";width:14px;height:14px;border:var(--border-rule) solid currentColor;border-right-color:transparent;border-radius:var(--radius-full);animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.acoes{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.acoes--fim{justify-content:flex-end}
.acoes--entre{justify-content:space-between}

/* ---------- Ícones (máscara Lucide, ver ui/icone.js) ---------- */
.icone{display:inline-block;width:18px;height:18px;flex:none;background-color:currentColor;-webkit-mask:var(--icone) center/contain no-repeat;mask:var(--icone) center/contain no-repeat}
.icone--sm{width:16px;height:16px}
.icone--lg{width:24px;height:24px}

/* ---------- Casca: trilho, cabeçalho, conteúdo ---------- */
.pular{position:absolute;left:-9999px;top:var(--space-2);z-index:200;background:var(--app-primario-bg);color:var(--app-primario-fg);padding:var(--space-3) var(--space-4);font-weight:var(--fw-semibold);text-decoration:none}
.pular:focus{left:var(--space-2)}

.casca{display:flex;min-height:100vh}
.trilho{width:var(--app-rail-w);background:var(--surface-ink);color:var(--text-on-dark);position:fixed;inset:0 auto 0 0;z-index:20;display:flex;flex-direction:column}
.trilho__marca{padding:28px var(--space-5) var(--space-5);display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit}
.trilho__marca img{height:var(--app-marca-h);width:auto;align-self:flex-start}
.trilho__produto{font-size:var(--app-fs-nav);font-weight:var(--fw-medium);line-height:1.3;color:var(--text-on-dark-muted)}
.trilho__nav{flex:1;overflow:auto;padding:var(--space-2) 0 var(--space-5);display:flex;flex-direction:column;gap:var(--space-5)}
.trilho__grupo{display:flex;flex-direction:column;gap:2px}
.trilho__grupo-rotulo{padding:0 var(--space-5) var(--space-2);font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--eg-calendula)}
.trilho__item{display:flex;align-items:center;gap:var(--space-3);min-height:var(--eg-target-min);padding:0 var(--space-5);color:var(--text-on-dark);text-decoration:none;font-size:var(--app-fs-nav);font-weight:var(--fw-semibold);letter-spacing:var(--ls-label);text-transform:uppercase;transition:var(--transition-color)}
.trilho__item:hover{color:var(--text-on-dark);box-shadow:inset var(--border-block) 0 0 var(--eg-capuchinha)}
.trilho__item[aria-current="page"]{background:var(--eg-capuchinha);color:var(--eg-eclipse)}
.trilho__item:focus-visible{outline-offset:-3px;outline-color:var(--eg-white)}
.trilho__pessoa{background:var(--surface-ink-raised);padding:var(--space-4) var(--space-5);display:flex;gap:var(--space-3);align-items:center;color:inherit;text-decoration:none}
.trilho__pessoa:hover{background:var(--surface-ink-card);color:inherit}
.avatar{width:var(--app-avatar);height:var(--app-avatar);flex:none;border-radius:var(--radius-full);background:var(--eg-white);color:var(--eg-eclipse);display:grid;place-items:center;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold)}
.trilho__pessoa-texto{display:flex;flex-direction:column;gap:2px;min-width:0}
.trilho__pessoa-nome{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);line-height:1.2}
.trilho__pessoa-papel{font-size:var(--fs-caption);line-height:1.35;color:var(--text-on-dark-muted)}
.trilho__conta{background:var(--conta-primaria);color:var(--conta-primaria-fg);padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-1)}
.trilho__conta-rotulo{font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:var(--ls-label);text-transform:uppercase}
.trilho__conta-nome{font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:1.3;display:flex;gap:var(--space-2);align-items:center}
.trilho__conta-nome img{height:24px;width:auto;background:var(--eg-white)}
.trilho__conta .eg-btn--link{color:inherit;align-self:flex-start;min-height:var(--eg-target-min);padding:0;font-weight:var(--fw-medium)}

.principal{flex:1;min-width:0;margin-left:var(--app-rail-w);display:flex;flex-direction:column}
.cabecalho{min-height:var(--app-header-h);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);padding:var(--space-3) var(--app-pad-x);box-shadow:inset 0 -1px 0 var(--border-subtle);background:var(--surface-page);position:sticky;top:0;z-index:10}
.cabecalho__marca-movel{display:none}
.cabecalho__programa{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-body-sm);font-weight:var(--fw-medium)}
.cabecalho__programa select{min-height:var(--eg-target-min);padding:0 var(--space-6) 0 var(--space-3)}
.cabecalho__programa-nome{font-weight:var(--fw-semibold)}
.cabecalho__fim{margin-left:auto;display:flex;align-items:center;gap:var(--space-3)}
.sino{position:relative}
.sino__contador{position:absolute;top:2px;right:2px;min-width:var(--app-contador);height:var(--app-contador);padding:0 var(--space-1);background:var(--eg-capuchinha);color:var(--eg-eclipse);font-size:var(--app-fs-minimo);font-weight:var(--fw-bold);display:grid;place-items:center;line-height:1}
.conteudo{padding:var(--app-pad-y) var(--app-pad-x) var(--space-9);width:100%;max-width:calc(var(--app-conteudo-max) + 2 * var(--app-pad-x))}
.conteudo:focus{outline:0}

.barra-abas{display:none}

/* ---------- Faixas globais ---------- */
.faixa{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;padding:var(--space-3) var(--app-pad-x);font-size:var(--fs-body-sm)}
.faixa--escura{background:var(--surface-ink);color:var(--text-on-dark)}
.faixa--creme{background:var(--surface-cream)}
.faixa--alerta{background:var(--eg-calendula);color:var(--eg-eclipse)}
.faixa .eg-btn{min-height:var(--eg-target-min)}

/* ---------- Cabeçalho da tela ---------- */
.tela{display:flex;flex-direction:column;gap:var(--space-7)}
.tela__corpo{display:flex;flex-direction:column;gap:var(--space-7)}
.tela__topo{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-4)}
.tela__titulos{display:flex;flex-direction:column;gap:var(--space-2);max-width:var(--measure-body)}
.sobretitulo{font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--app-texto-acento)}
.tela h1{font-size:var(--fs-heading-2);font-weight:var(--fw-semibold);line-height:var(--lh-heading);letter-spacing:var(--ls-heading)}
.tela h1:focus{outline:0}
.tela__descricao{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-secondary)}
.voltar{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);min-height:var(--eg-target-min);align-self:flex-start}
h2.secao{font-size:var(--fs-heading-4);font-weight:var(--fw-semibold);line-height:var(--lh-tight);letter-spacing:var(--ls-heading)}
h3.subsecao{font-size:var(--fs-title);font-weight:var(--fw-semibold);line-height:var(--lh-title)}
.bloco{display:flex;flex-direction:column;gap:var(--space-4)}
.bloco--tight{gap:var(--space-2)}
.texto-sec{color:var(--text-secondary);font-size:var(--fs-body-sm);line-height:var(--lh-body)}
.texto-p{font-size:var(--fs-body-sm);line-height:var(--lh-body)}
.medida{max-width:var(--measure-body)}
.colunas{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-7);align-items:start}
.colunas--2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.colunas--lista{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.grade{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.grade--kpi{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.grade--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grade--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- Destaque: próximo passo ---------- */
.destaque{position:relative;background:var(--surface-ink);color:var(--text-on-dark);padding:var(--space-6) var(--space-6) var(--space-6);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-5);align-items:end}
.destaque__canto{position:absolute;top:var(--space-4);right:var(--space-4);width:var(--app-marca-h);height:var(--app-marca-h)}
.destaque__texto{display:flex;flex-direction:column;gap:var(--space-3);max-width:60ch}
.destaque h2{font-size:var(--fs-heading-3);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);font-weight:var(--fw-semibold)}
.destaque p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-on-dark-muted)}
.destaque .eg-badge{align-self:flex-start}

/* ---------- Cartões e listas ---------- */
.cartao{background:var(--surface-card);box-shadow:inset 0 0 0 var(--border-hairline) var(--border-subtle);padding:var(--space-5)}
.cartao--creme{background:var(--surface-cream);box-shadow:none}
.cartao--escuro{background:var(--surface-ink);color:var(--text-on-dark);box-shadow:none}
.cartao--ativo{box-shadow:inset 0 0 0 var(--border-rule) var(--border-strong)}
.cartao--alerta{box-shadow:inset var(--border-block) 0 0 var(--eg-capuchinha),inset 0 0 0 var(--border-hairline) var(--border-subtle)}
.cartao h3{font-size:var(--fs-title);font-weight:var(--fw-semibold);line-height:var(--lh-title)}
.lista-cartoes{display:flex;flex-direction:column;gap:var(--space-3)}
.linha-item{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4);align-items:center;justify-content:space-between}
.linha-item__texto{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;flex:1 1 280px}
.linha-item__titulo{font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);line-height:var(--lh-title)}
.meta{font-size:var(--fs-body-sm);color:var(--text-secondary);line-height:var(--lh-body)}
.lista-simples{display:flex;flex-direction:column}
.lista-simples>li{padding:var(--space-3) 0;box-shadow:inset 0 -1px 0 var(--border-subtle);display:flex;flex-direction:column;gap:2px}
.lista-ponto{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}
.lista-ponto>li{display:flex;gap:var(--space-2)}
.lista-ponto>li::before{content:"·";font-weight:var(--fw-bold)}
.lista-num{padding-left:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}
.dl-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));box-shadow:inset 0 0 0 var(--border-hairline) var(--border-subtle)}
.dl-grade>div{padding:var(--space-3) var(--space-4);box-shadow:inset -1px -1px 0 var(--border-subtle);display:flex;flex-direction:column;gap:var(--space-1)}
.dl-grade dt,.rotulo{font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:var(--ls-label);text-transform:uppercase}
.dl-grade dd{font-size:var(--fs-body-sm);line-height:var(--lh-body)}

/* ---------- Níveis da trilha ---------- */
.nivel{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:var(--space-4);align-items:center}
.nivel__num{width:56px;height:56px;display:grid;place-items:center;font-size:var(--fs-heading-4);font-weight:var(--fw-semibold);background:var(--surface-cream)}
.nivel__num--ativo{background:var(--eg-capuchinha);color:var(--eg-eclipse)}
.nivel__num--bloq{background:var(--surface-page);box-shadow:inset 0 0 0 var(--border-hairline) var(--border-strong)}
.requisitos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--space-5)}
.requisitos>div{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1)}
.requisitos>div:nth-child(odd){box-shadow:inset -1px 0 0 var(--border-subtle)}
.requisitos>div:nth-child(n+3){box-shadow:inset 0 1px 0 var(--border-subtle)}
.requisitos>div:nth-child(3){box-shadow:inset 0 1px 0 var(--border-subtle),inset -1px 0 0 var(--border-subtle)}
.requisitos strong{font-size:var(--fs-body);font-weight:var(--fw-semibold)}
.lista-aulas{display:flex;flex-direction:column;margin-top:var(--space-3)}
.lista-aulas a{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:var(--space-3);align-items:center;min-height:var(--eg-target-min);padding:var(--space-2) 0;color:var(--text-primary);text-decoration:none;box-shadow:inset 0 -1px 0 var(--border-subtle)}
.lista-aulas a:hover .lista-aulas__titulo{text-decoration:underline}
.estado-aula--ok{color:var(--status-success)}

/* ---------- Badges extras ---------- */
.eg-badge--accent{background:var(--eg-capuchinha);color:var(--eg-eclipse)}
.eg-badge--alerta{background:var(--eg-calendula);color:var(--eg-eclipse)}
.eg-badge--neutro{background:var(--surface-page);color:var(--text-primary);box-shadow:inset 0 0 0 var(--border-hairline) var(--border-strong)}
.eg-badge--texto{background:transparent;color:var(--text-primary);padding-left:0;padding-right:0}

/* ---------- Formulários ---------- */
.form{display:flex;flex-direction:column;gap:var(--space-5);max-width:var(--measure-body)}
.form--largo{max-width:none}
.campo-linha{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.eg-field__label .opcional,.eg-field__label .obrigatorio{font-weight:var(--fw-regular);color:var(--text-secondary)}
.eg-field__hint{font-size:var(--fs-body-sm);line-height:var(--lh-body)}
.eg-field__error{font-size:var(--fs-body-sm);display:flex;gap:var(--space-2);align-items:flex-start}
.eg-control{min-height:var(--eg-target-min)}
.eg-control[aria-invalid="true"]{border-color:var(--status-danger);border-width:var(--border-rule)}
.eg-select{position:relative}
.eg-select select{appearance:none;-webkit-appearance:none;padding-right:var(--space-7)}
.eg-select .icone{position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);pointer-events:none}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);margin-bottom:var(--space-2)}
.opcoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.opcoes--1{grid-template-columns:1fr}
.opcoes--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opcao{display:flex;gap:var(--space-3);align-items:center;min-height:var(--eg-target-min);padding:var(--space-3) var(--space-4);box-shadow:inset 0 0 0 var(--border-hairline) var(--border-strong);cursor:pointer;font-size:var(--fs-body)}
.opcao:hover{background:var(--surface-cream)}
.opcao:has(input:checked){box-shadow:inset 0 0 0 var(--border-rule) var(--eg-capuchinha);background:var(--surface-cream)}
.opcao:has(input:focus-visible){outline:var(--eg-focus-ring);outline-offset:2px}
.opcao input{width:20px;height:20px;accent-color:var(--eg-crisantemo);margin:0;flex:none}
.opcao--certa{box-shadow:inset 0 0 0 var(--border-rule) var(--status-success)}
.opcao--errada{box-shadow:inset 0 0 0 var(--border-rule) var(--status-danger)}
.opcao[aria-disabled="true"]{cursor:default}
.checar{display:flex;gap:var(--space-3);align-items:flex-start;min-height:var(--eg-target-min);cursor:pointer;padding:var(--space-2) 0}
.checar input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--eg-crisantemo);flex:none}
.resumo-erros{padding:var(--space-4);background:var(--surface-cream);box-shadow:inset var(--border-block) 0 0 var(--status-danger)}
.resumo-erros:focus{outline:var(--eg-focus-ring)}
.resumo-erros ul{margin-top:var(--space-2);padding-left:var(--space-5)}
.rodape-form{font-size:var(--fs-body-sm);color:var(--text-secondary)}

/* ---------- Avisos inline ---------- */
.aviso{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4);font-size:var(--fs-body-sm);line-height:var(--lh-body)}
.aviso .icone{margin-top:2px}
.aviso--info{background:var(--surface-cream)}
.aviso--ok{background:var(--status-success);color:var(--eg-white)}
.aviso--cuidado{background:var(--eg-calendula);color:var(--eg-eclipse)}
.aviso--erro{background:var(--surface-cream);color:var(--text-primary);box-shadow:inset var(--border-block) 0 0 var(--status-danger)}
.aviso--escuro{background:var(--surface-ink);color:var(--text-on-dark)}
.aviso strong{font-weight:var(--fw-semibold)}
.texto-erro{color:var(--status-danger);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm)}

/* ---------- Tabelas ---------- */
.tabela-envolve{width:100%;overflow-x:auto;position:relative}
table.tabela{width:100%;border-collapse:collapse;font-size:var(--fs-body-sm)}
.tabela caption{text-align:left;font-size:var(--fs-body-sm);color:var(--text-secondary);padding-bottom:var(--space-3);caption-side:top}
.tabela th{text-align:left;font-weight:var(--fw-semibold);padding:var(--space-3) var(--space-3) var(--space-3) 0;box-shadow:inset 0 -2px 0 var(--border-strong);white-space:nowrap}
.tabela tbody th{font-weight:var(--fw-semibold);white-space:normal;box-shadow:inset 0 -1px 0 var(--border-subtle)}
.tabela td{padding:var(--space-3) var(--space-3) var(--space-3) 0;box-shadow:inset 0 -1px 0 var(--border-subtle);vertical-align:middle}
.tabela .num{text-align:right;font-variant-numeric:tabular-nums}
.tabela tr[aria-selected="true"] td{background:var(--surface-cream)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-body-sm)}

/* ---------- Abas ---------- */
.abas{display:flex;gap:var(--space-6);box-shadow:inset 0 -1px 0 var(--border-subtle);overflow-x:auto}
.abas a,.abas button{appearance:none;background:transparent;border:0;border-bottom:var(--border-block) solid transparent;padding:var(--space-2) 0 var(--space-3);font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--text-secondary);text-decoration:none;white-space:nowrap;min-height:var(--eg-target-min);cursor:pointer}
.abas a:hover,.abas button:hover{color:var(--text-primary)}
.abas [aria-current="page"],.abas [aria-selected="true"]{color:var(--text-primary);border-bottom-color:var(--eg-capuchinha)}
.segmentado{display:inline-flex;flex-wrap:wrap;max-width:100%;box-shadow:inset 0 0 0 var(--border-hairline) var(--border-strong)}
.segmentado button{appearance:none;border:0;background:transparent;padding:0 var(--space-4);min-height:var(--eg-target-min);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);cursor:pointer}
.segmentado button[aria-pressed="true"]{background:var(--surface-ink);color:var(--text-on-dark)}

/* ---------- Etapas (UX-10.1) ---------- */
.etapas{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));list-style:none;padding:0}
.etapas li{padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:2px;font-size:var(--fs-caption)}
.etapas li strong{font-size:var(--fs-body);font-weight:var(--fw-semibold)}
.etapas li[aria-current="step"]{background:var(--surface-ink);color:var(--text-on-dark)}
.etapas li[data-feita="true"]{background:var(--surface-cream)}

/* ---------- Indicadores ---------- */
.kpi{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);box-shadow:inset 0 3px 0 var(--border-strong),inset 0 0 0 var(--border-hairline) var(--border-subtle);min-height:180px}
.kpi--alerta{box-shadow:inset 0 3px 0 var(--eg-capuchinha),inset 0 0 0 var(--border-hairline) var(--border-subtle)}
.kpi__topo{display:flex;justify-content:space-between;gap:var(--space-2);align-items:flex-start}
.kpi__valor{font-size:var(--fs-heading-2);font-weight:var(--fw-semibold);line-height:1;letter-spacing:var(--ls-heading);font-variant-numeric:tabular-nums}
.kpi__oculto{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--text-secondary)}
.kpi__rodape{display:flex;justify-content:space-between;gap:var(--space-2);font-size:var(--fs-caption);margin-top:auto}
.barra-meta{position:relative;height:6px;background:var(--app-barra-trilho)}
.barra-meta__valor{position:absolute;inset:0 auto 0 0;background:var(--app-barra-valor)}
.barra-meta__meta{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--app-barra-meta)}
.sequencia{display:flex;gap:var(--space-1)}
.sequencia span{flex:1;height:14px;box-shadow:inset 0 0 0 var(--border-hairline) var(--border-on-dark)}
.sequencia span[data-feita="true"]{background:var(--eg-capuchinha);box-shadow:none}
.numero-grande{font-size:var(--fs-display-3);font-weight:var(--fw-semibold);line-height:1}

/* ---------- Semáforo ---------- */
.celula{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px var(--space-2);font-size:var(--fs-caption);font-weight:var(--fw-semibold);white-space:nowrap}
.celula--sim{background:var(--app-sem-sim-bg);color:var(--app-sem-sim-fg)}
.celula--cuidado{background:var(--app-sem-cuidado-bg);color:var(--app-sem-cuidado-fg)}
.celula--nao{background:var(--app-sem-nao-bg);color:var(--app-sem-nao-fg)}
.veredito{padding:var(--space-4) var(--space-5);display:flex;gap:var(--space-3);align-items:flex-start}
.veredito--sim{background:var(--app-sem-sim-bg);color:var(--app-sem-sim-fg)}
.veredito--cuidado{background:var(--app-sem-cuidado-bg);color:var(--app-sem-cuidado-fg)}
.veredito--nao{background:var(--app-sem-nao-bg);color:var(--app-sem-nao-fg)}
.veredito strong{display:block;font-size:var(--fs-body);font-weight:var(--fw-semibold)}
.veredito span{font-size:var(--fs-body-sm)}
.classes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.classes>div{box-shadow:inset 0 2px 0 var(--border-strong);padding-top:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}

/* ---------- Player ---------- */
.player{position:relative;width:100%;aspect-ratio:16/9;background:var(--surface-ink)}
.player iframe,.player video{position:absolute;inset:0;width:100%;height:100%;border:0}
.progresso-aula{display:flex;flex-direction:column;gap:var(--space-2)}
.progresso-aula__barra{height:8px;background:var(--app-barra-trilho);position:relative}
.progresso-aula__barra span{position:absolute;inset:0 auto 0 0;background:var(--eg-eclipse)}

/* ---------- Estados (UX-6.4) ---------- */
.estado{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start;padding:var(--space-7) var(--space-6);background:var(--surface-cream);max-width:var(--measure-body)}
.estado h2{font-size:var(--fs-heading-4);font-weight:var(--fw-semibold)}
.estado p{color:var(--text-secondary)}
.estado--erro{box-shadow:inset var(--border-block) 0 0 var(--status-danger)}
.esqueleto{display:flex;flex-direction:column;gap:var(--space-4)}
.esqueleto span{display:block;height:20px;background:var(--app-esqueleto);animation:pulsar 1.4s var(--ease-standard) infinite}
.esqueleto span.alto{height:160px}
.esqueleto span.titulo{height:44px;width:50%}
.esqueleto span.curto{width:30%}
@keyframes pulsar{0%,100%{opacity:1}50%{opacity:.55}}

/* ---------- Diálogos e gavetas ---------- */
dialog{padding:0;border:0;max-width:calc(100vw - 2 * var(--space-4));color:var(--text-primary);background:var(--surface-page)}
dialog::backdrop{background:var(--surface-overlay)}
dialog.dialogo{width:520px;border-top:var(--border-frame) solid var(--eg-capuchinha)}
dialog.dialogo--largo{width:720px}
.dialogo__corpo{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.dialogo__topo{display:flex;justify-content:space-between;gap:var(--space-4);align-items:flex-start}
.dialogo__titulo{font-size:var(--fs-heading-4);font-weight:var(--fw-semibold);line-height:var(--lh-tight)}
dialog.gaveta{margin:0 0 0 auto;height:100vh;max-height:100vh;width:var(--app-gaveta-w);max-width:100vw;border-left:var(--border-block) solid var(--eg-capuchinha)}
.gaveta__corpo{height:100%;display:flex;flex-direction:column}
.gaveta__topo{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);box-shadow:inset 0 -1px 0 var(--border-subtle)}
.gaveta__titulo{font-size:var(--fs-title);font-weight:var(--fw-semibold)}
.gaveta__rolagem{flex:1;overflow:auto;padding:var(--space-5)}
.gaveta__pe{padding:var(--space-4) var(--space-5);box-shadow:inset 0 1px 0 var(--border-subtle)}
.notif{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3) 0 var(--space-3) var(--space-3);box-shadow:inset 0 -1px 0 var(--border-subtle);text-decoration:none;color:var(--text-primary)}
.notif[data-lida="false"]{box-shadow:inset 3px 0 0 var(--eg-capuchinha),inset 0 -1px 0 var(--border-subtle)}
.notif:hover{background:var(--surface-cream);color:var(--text-primary)}
.notif strong{font-weight:var(--fw-semibold)}

/* ---------- Assistente ---------- */
.conversa{display:flex;flex-direction:column;gap:var(--space-4)}
.turno-p{align-self:flex-end;background:var(--surface-ink);color:var(--text-on-dark);padding:var(--space-3) var(--space-4);max-width:90%}
.turno-r{background:var(--surface-cream);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);white-space:pre-wrap}
.turno-r .fontes{font-size:var(--fs-caption);color:var(--text-secondary);white-space:normal}
.passos-ia{font-size:var(--fs-body-sm);color:var(--text-secondary)}

/* ---------- Toast ---------- */
.toasts{position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:300;display:flex;flex-direction:column;gap:var(--space-2);max-width:min(420px,calc(100vw - 2 * var(--space-4)))}
.eg-toast .eg-btn{min-height:var(--eg-target-min);padding:0 var(--space-3)}
.eg-toast .eg-btn--inverse{color:var(--eg-eclipse)}
.eg-toast__close{min-width:var(--eg-target-min);min-height:var(--eg-target-min)}

/* ---------- Entrada (tela pública, tema Escadaria) ---------- */
.entrada{min-height:100vh;background:var(--surface-cream);display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--space-7);padding:var(--space-8) var(--space-8) 0;position:relative;overflow:hidden}
.entrada__marca{display:flex;flex-direction:column;gap:var(--space-4);position:relative;z-index:1}
.entrada__marca .eg-badge{align-self:flex-start;background:var(--eg-crisantemo);color:var(--eg-white)}
.entrada__titulo{font-size:var(--fs-display-3);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--fw-semibold);color:var(--eg-crisantemo);max-width:12ch}
.entrada__lema{color:var(--eg-crisantemo);font-size:var(--fs-body-lg)}
.entrada__logo-conta{height:56px;width:auto;align-self:flex-start;background:var(--eg-white);padding:var(--space-2)}
.entrada__cartao{position:relative;z-index:1;background:var(--surface-page);padding:var(--space-5);align-self:start;margin-top:var(--space-7);display:flex;flex-direction:column;gap:var(--space-4)}
.entrada__cartao::before{content:"";width:24px;height:3px;background:var(--eg-crisantemo)}
.entrada__cartao h2{font-size:var(--fs-heading-4);font-weight:var(--fw-semibold)}
.entrada__cartao .eg-btn--primary{background:var(--eg-crisantemo);border-color:var(--eg-crisantemo);color:var(--eg-white)}
.entrada__cartao .eg-btn--primary:hover{background:var(--state-accent-press);border-color:var(--state-accent-press)}
.escadaria{position:absolute;inset:auto 0 0 0;height:56vh;display:flex;align-items:flex-end;pointer-events:none}
.escadaria span{flex:1;background:var(--eg-calendula);box-shadow:inset 0 0 0 var(--border-hairline) var(--eg-crisantemo)}
.escadaria span:nth-child(odd){background:var(--eg-capuchinha)}
.escadaria span:last-child{background:var(--eg-crisantemo)}

/* ---------- Verificação pública ---------- */
.publico{max-width:720px;margin:0 auto;padding:var(--space-8) var(--space-4);display:flex;flex-direction:column;gap:var(--space-6)}
.publico__marca img{height:var(--app-marca-h);width:auto}

/* ---------- Responsivo: celular (thumb zone) ---------- */
@media (max-width:900px){
  /* O foco nunca fica embaixo do cabeçalho fixo nem da barra de abas (WCAG 2.4.11, A-02). */
  html{scroll-padding-top:calc(var(--app-header-h) + var(--space-4));scroll-padding-bottom:calc(var(--app-tabbar-h) + var(--space-4))}
  .trilho{display:none}
  .principal{margin-left:0;padding-bottom:var(--app-tabbar-h)}
  .cabecalho{padding:var(--space-2) var(--app-pad-x-movel);min-height:56px}
  .cabecalho__marca-movel{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-primary);text-decoration:none}
  .cabecalho__marca-movel img{width:28px;height:28px}
  .cabecalho__programa{order:3;flex-basis:100%}
  .cabecalho__programa select{flex:1;max-width:none}
  .cabecalho__assistente-rotulo{display:none}
  .faixa{padding:var(--space-3) var(--app-pad-x-movel)}
  .conteudo{padding:var(--space-5) var(--app-pad-x-movel) var(--space-8)}
  .tela{gap:var(--space-6)}
  .tela h1{font-size:var(--fs-heading-3)}
  .colunas,.colunas--2-1,.colunas--lista,.grade--2,.grade--4,.campo-linha,.classes{grid-template-columns:minmax(0,1fr)}
  .destaque{grid-template-columns:minmax(0,1fr);padding:var(--space-5)}
  .destaque h2{font-size:var(--fs-heading-4)}
  .destaque .eg-btn{width:100%}
  .requisitos,.dl-grade{grid-template-columns:minmax(0,1fr)}
  .requisitos>div,.requisitos>div:nth-child(n){box-shadow:inset 0 1px 0 var(--border-subtle)}
  .nivel{grid-template-columns:44px minmax(0,1fr)}
  .nivel__num{width:44px;height:44px;font-size:var(--fs-title)}
  .nivel>.nivel__estado{grid-column:2}
  .etapas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opcoes,.opcoes--3{grid-template-columns:minmax(0,1fr)}
  .barra-abas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;inset:auto 0 0 0;height:var(--app-tabbar-h);background:var(--surface-ink);z-index:30}
  .barra-abas a,.barra-abas button{appearance:none;border:0;background:transparent;color:var(--text-on-dark);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:var(--app-fs-minimo);font-weight:var(--fw-semibold);text-decoration:none;min-height:var(--eg-target-min);position:relative;cursor:pointer}
  .barra-abas [aria-current="page"]{color:var(--eg-calendula);box-shadow:inset 0 3px 0 var(--eg-capuchinha)}
  .barra-abas .sino__contador{top:6px;right:calc(50% - 20px)}
  .form-acao-fixa .eg-btn{width:100%}
  /* No celular, todo alvo com 44 px (UX-7.1); a exceção de 36 px vale só no desktop (docs/excecoes.md). */
  .tabela .eg-btn--sm,.tabela td .eg-btn{min-height:var(--eg-target-min)}
  dialog.gaveta{width:100vw;border-left:0;border-top:var(--border-block) solid var(--eg-capuchinha)}
  .entrada{grid-template-columns:minmax(0,1fr);padding:var(--space-6) var(--space-4) 0;gap:var(--space-5)}
  .entrada__titulo{font-size:var(--fs-heading-2)}
  .entrada__cartao{margin-top:0;margin-bottom:var(--space-6)}
  .escadaria{position:relative;height:72px;margin:0 calc(-1 * var(--space-4))}
  .toasts{left:var(--space-4);right:var(--space-4);bottom:calc(var(--app-tabbar-h) + var(--space-3))}
}
@media (max-width:420px){
  .eg-btn{white-space:normal;text-align:center;max-width:100%}
  .tabela-envolve--cartoes table,.tabela-envolve--cartoes tbody,.tabela-envolve--cartoes tr,.tabela-envolve--cartoes td{display:block;width:100%}
  .tabela-envolve--cartoes thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabela-envolve--cartoes tr{padding:var(--space-3) 0;box-shadow:inset 0 -1px 0 var(--border-subtle)}
  .tabela-envolve--cartoes td{box-shadow:none;padding:2px 0}
  .tabela-envolve--cartoes td[data-rotulo]::before{content:attr(data-rotulo) ": ";font-weight:var(--fw-semibold)}
}
@media print{.trilho,.cabecalho,.barra-abas,.toasts{display:none}.principal{margin:0}}

/* ---------- Menu de ações por linha (UX-3.1: ações raras no overflow; ui/menu.js) ---------- */
.menu-acoes__lista{position:fixed;z-index:150;min-width:220px;margin:0;list-style:none;background:var(--surface-page);box-shadow:inset 0 0 0 var(--border-hairline) var(--border-strong);padding:var(--space-2) var(--space-3)}
.menu-acoes__lista .eg-btn--link{width:100%;justify-content:flex-start;text-align:left}
details>summary{list-style-position:inside}
.lista-simples>li.linha-item{flex-direction:row;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start}
.lista-simples>li.linha-item .linha-item__texto{flex:1 1 auto}
.tabela .bloco,.tabela .acoes{align-items:flex-start}