/* A CASCA (story 2.1) e os componentes de replica/design/components.md.

   Regra deste arquivo: nenhum hex e nenhum pixel solto — tudo vem de
   tokens.css (gerado de replica/design/tokens.json). O unico numero em px e' o
   ponto de quebra do menu, nas linhas @media: consulta de midia nao aceita
   var(). O teste do AC4 varre isto.

   Sem JavaScript tudo funciona: o menu fica aberto, no fluxo. A gaveta do
   celular e o recolher so' existem sob a classe `js`, que o script de uma
   linha do base.html poe em <html> (decisao 4).

   Herdado do CSS embutido de f39e115, com o porque que la' estava:
   · campos por EXCLUSAO de tipo (`email`/`tel` ja' nasceram estreitos uma vez);
   · `.secundario` SOZINHO, nao `.botao.secundario` (o <button class="secundario">
     vinha com o peso da acao principal);
   · `.rolavel`: no celular quem rola e' a tabela, nao a pagina;
   · `.acoes`: botoes de lote em fileira, nao empilhados;
   · `.variacao` e a barra: CINZA/marinho, nunca verde-vermelho (§9.5). */

/* Apelidos do CSS embutido de f39e115 (gate 2.1, REG-001). Seis estilos
   inline de telas antigas (relatorio, analise, leitura por interseccao,
   registro) ainda usam as variaveis «dourado» e «linha»; sem estes nomes a regua
   a' esquerda sumia e o cartao perdia a borda, inclusive no PDF. O dourado e'
   so' DECORATIVO — borda, nunca texto nem fundo de texto — e por isso fica fora
   dos pares de contraste. O seletor inclui [data-tema] para o apelido ser
   recalculado onde o tema muda (as amostras do /admin/design). O teste
   test_ac24 reprova toda variavel usada sem definicao. */
:root,[data-tema]{--dourado:var(--detalhe-dourado);--linha:var(--border)}

*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-sans);font-size:var(--text-base);line-height:1.55}

/* ------------------------------------------------------------ tipografia */
h1,h2,h3{font-family:var(--font-heading);color:var(--text)}
h1{font-size:var(--text-xl);line-height:var(--leading-xl);font-weight:var(--weight-xl);
  margin:var(--space-5) 0 var(--space-2)}
h2{font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-lg);
  margin:var(--space-5) 0 var(--space-2)}
h3{font-size:var(--text-base);line-height:var(--leading-base);margin:var(--space-4) 0 var(--space-2)}
p{margin:var(--space-3) 0}
a{color:var(--accent)}
blockquote{font-family:var(--font-quote);margin:var(--space-4) 0;padding-left:var(--space-4);
  border-left:var(--line-thick) solid var(--border)}
code,kbd{font-family:var(--font-mono);font-size:var(--text-sm)}
.sub{color:var(--text-muted);font-size:var(--text-sm);margin-top:0}
.ajuda{font-size:var(--text-sm);color:var(--text-muted);margin:var(--space-2) 0 var(--space-4);
  line-height:1.5}
.ajuda strong{color:var(--text)}
.progresso{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);
  letter-spacing:.04em;text-transform:uppercase}
.num{text-align:right;font-variant-numeric:tabular-nums}
.variacao{color:var(--text-muted);font-variant-numeric:tabular-nums}
.rotulo{font-weight:700}
.rodape{margin-top:var(--space-6);padding-top:var(--space-3);
  border-top:var(--hairline) solid var(--border);font-size:var(--text-xs);color:var(--text-muted)}
.so-leitor{position:absolute;width:var(--hairline);height:var(--hairline);margin:0;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ----------------------------------------------------------- foco visivel */
:focus-visible{outline:var(--focus-ring) solid var(--focus);outline-offset:var(--focus-offset)}
main:focus{outline:none}

/* ------------------------------------------------------------------ casca */
.pular{position:absolute;left:var(--space-2);top:var(--space-2);z-index:30;
  transform:translateY(-200%);background:var(--accent);color:var(--on-accent);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);text-decoration:none;
  min-height:var(--touch-min);display:inline-flex;align-items:center}
.pular:focus{transform:none}

.folha{max-width:var(--content-max);margin:0 auto;padding:var(--space-5) var(--space-4) var(--space-8)}
.sem-menu .folha{max-width:var(--reading-max)}
/* O rodape do app (story 3.9): o link da politica, depois do <main>. Na grade
   do menu ele fica na coluna do conteudo, na segunda linha (o menu ocupa as
   duas). Nao e' o `.rodape` de legenda. */
.rodape-app{max-width:var(--content-max);margin:0 auto;padding:0 var(--space-4) var(--space-5);
  font-size:var(--text-xs);color:var(--text-muted)}
.sem-menu .rodape-app{max-width:var(--reading-max)}
.com-menu > .rodape-app{grid-column:2;width:100%}
.rodape-app a{color:inherit;display:inline-flex;align-items:center;min-height:var(--touch-min)}

.com-menu{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh}
.com-menu > main{grid-column:2;width:100%}
.com-menu > .topo{display:none}
/* A COLUNA do menu (story 2.5, BUG-R2-5a). O menu fica preso a' janela
   (sticky, altura da janela) — e quem pinta o marinho da coluna inteira e'
   este item da grade, que estica com a pagina. Sem ele, numa captura de pagina
   inteira (onde a janela continua medindo 900) a faixa terminava no fim da
   primeira janela e o resto da coluna ficava no fundo claro. */
.com-menu::before{content:"";grid-column:1;grid-row:1 / span 2;background:var(--sidebar)}

.menu-lateral{grid-column:1;grid-row:1 / span 2;background:var(--sidebar);color:var(--sidebar-text);
  display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4) var(--space-2);
  position:sticky;top:0;height:100vh;overflow-y:auto}
.menu-lateral :focus-visible{outline-color:var(--sidebar-detail)}
.menu-cabeca{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  padding:0 var(--space-2) var(--space-3);border-bottom:var(--hairline) solid var(--sidebar-active)}
.menu-area{font-family:var(--font-heading);font-size:var(--text-sm);line-height:var(--leading-sm);
  overflow-wrap:anywhere}
.menu-lateral ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}
/* Os itens rolam por dentro quando nao cabem, e o rodape (apelido, tema,
   sair) fica sempre a' vista (story 2.5). A margem negativa com o mesmo
   recuo devolve a folga do menu ao contorno de foco, que a rolagem cortaria. */
.menu-itens{flex:1;min-height:0;overflow-y:auto;margin:calc(-1 * var(--space-2));padding:var(--space-2)}

/* Item de menu: o icone fica fora do link e nao recebe clique; o link cobre a
   linha inteira, com folga a' esquerda para o icone. */
.item-menu{position:relative}
.item-icone{display:inline-flex;align-items:center;justify-content:center;
  width:var(--icon);height:var(--icon);flex:none}
.icone{width:var(--icon);height:var(--icon)}
.item-menu > .item-icone{position:absolute;left:var(--space-4);top:50%;
  transform:translateY(-50%);pointer-events:none;color:var(--sidebar-muted)}
.item-menu a{display:flex;align-items:center;min-height:var(--touch-min);
  padding:var(--space-2) var(--space-3) var(--space-2) var(--space-8);
  border-radius:var(--radius-sm);border-left:var(--line-thick) solid transparent;
  color:var(--sidebar-muted);text-decoration:none;font-size:var(--text-sm);overflow-wrap:anywhere}
.item-menu a:hover,.item-menu a.estado-hover{background:var(--sidebar-active);color:var(--sidebar-text)}
.item-menu a[aria-current="page"],.item-menu a.estado-atual{background:var(--sidebar-active);
  color:var(--sidebar-text);border-left-color:var(--sidebar-detail);font-weight:600}
.item-menu a.estado-foco{outline:var(--focus-ring) solid var(--sidebar-detail);outline-offset:var(--focus-offset)}
.item-menu:has(a:hover) > .item-icone,
.item-menu:has(a[aria-current="page"]) > .item-icone{color:var(--sidebar-text)}

/* O texto do rodape comeca na mesma coluna do texto dos itens: o link do item
   tem a borda de line-thick e o recuo space-8 antes do texto; o rodape tem a
   folga space-4, o icone e este vao (gate 2.1, UX-002). O botao do rodape tem
   borda de hairline, entao a folga dele desconta a borda — o icone fica na
   mesma coluna do icone dos itens. */
.menu-lateral{--gap-menu:calc(var(--space-8) + var(--line-thick) - var(--space-4) - var(--icon))}
.menu-rodape{display:flex;flex-direction:column;gap:var(--space-1);
  border-top:var(--hairline) solid var(--sidebar-active);padding-top:var(--space-3)}
.menu-apelido{display:flex;align-items:center;gap:var(--gap-menu);min-height:var(--touch-min);
  padding:0 var(--space-4);color:var(--sidebar-text);font-size:var(--text-sm);min-width:0}
.menu-apelido-texto{overflow-wrap:anywhere;min-width:0}
/* O apelido e' link para o perfil (story 2.7): mesma cor e altura de toque,
   sem sublinhado; o foco vem do `.menu-lateral :focus-visible`. */
a.menu-apelido{text-decoration:none;border-radius:var(--radius-sm)}
a.menu-apelido:hover{background:var(--sidebar-active);color:var(--sidebar-text)}
.menu-lateral button{display:inline-flex;align-items:center;justify-content:flex-start;gap:var(--gap-menu);margin:0;
  min-height:var(--touch-min);min-width:var(--touch-min);
  padding:var(--space-2) var(--space-4) var(--space-2) calc(var(--space-4) - var(--hairline));
  background:transparent;color:var(--sidebar-muted);border:var(--hairline) solid transparent;
  border-radius:var(--radius-sm);font:inherit;font-size:var(--text-sm);font-weight:400;cursor:pointer}
.menu-lateral button:hover{background:var(--sidebar-active);color:var(--sidebar-text)}
.botao-recolher{padding:var(--space-2)}
.menu-lateral [hidden]{display:none}
.icone-abrir,.icone-sol{display:none}
[data-tema="escuro"] .botao-tema .icone-lua{display:none}
[data-tema="escuro"] .botao-tema .icone-sol{display:inline-flex}
@media (prefers-color-scheme: dark){
  :root:not([data-tema]) .botao-tema .icone-lua{display:none}
  :root:not([data-tema]) .botao-tema .icone-sol{display:inline-flex}
}

/* Barra do topo do celular: so' existe com `js` e abaixo do ponto de quebra. */
.topo{background:var(--sidebar);color:var(--sidebar-text);display:none;align-items:center;
  gap:var(--space-3);padding:var(--space-1) var(--space-3)}
.topo-area{font-family:var(--font-heading);font-size:var(--text-sm);overflow-wrap:anywhere}
.botao-menu{display:inline-flex;align-items:center;justify-content:center;margin:0;
  min-height:var(--touch-min);min-width:var(--touch-min);padding:var(--space-2);
  background:transparent;color:var(--sidebar-text);border:var(--hairline) solid var(--sidebar-active);
  border-radius:var(--radius-sm);cursor:pointer}
.botao-menu:focus-visible{outline-color:var(--sidebar-detail)}

/* Recolhido (so' com js, so' na tela larga): fica o icone, o link vira um
   quadrado com `title`; o texto sai do fluxo visual mas continua no HTML. */
@media (min-width: 901px){
  .js[data-menu="recolhido"] .com-menu{grid-template-columns:var(--sidebar-collapsed) minmax(0,1fr)}
  .js[data-menu="recolhido"] .menu-lateral{padding-left:var(--space-1);padding-right:var(--space-1)}
  .js[data-menu="recolhido"] .menu-area,
  .js[data-menu="recolhido"] .menu-apelido-texto,
  .js[data-menu="recolhido"] .botao-tema-texto{position:absolute;width:var(--hairline);
    height:var(--hairline);overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .js[data-menu="recolhido"] .menu-cabeca{justify-content:center;padding-left:0;padding-right:0}
  .js[data-menu="recolhido"] .item-menu a{color:transparent;overflow:hidden;white-space:nowrap;
    padding-left:var(--space-6);padding-right:0}
  .js[data-menu="recolhido"] .item-menu a:hover,
  .js[data-menu="recolhido"] .item-menu a[aria-current="page"]{color:transparent}
  .js[data-menu="recolhido"] .item-menu > .item-icone{left:var(--space-3)}
  .js[data-menu="recolhido"] .menu-apelido,
  .js[data-menu="recolhido"] .menu-lateral button{justify-content:center;padding-left:0;padding-right:0}
  .js[data-menu="recolhido"] .icone-recolher{display:none}
  .js[data-menu="recolhido"] .icone-abrir{display:inline-flex}
  /* story 6.6: o grupo recolhido mostra so' o icone, como os itens */
  .js[data-menu="recolhido"] .menu-modulo > details > summary{color:transparent;font-size:0;
    justify-content:center;padding-left:0;padding-right:0}
  .js[data-menu="recolhido"] .menu-modulo > details > summary::after{display:none}
  .js[data-menu="recolhido"] .menu-modulo > details > summary > .item-icone{color:var(--sidebar-muted)}
  .js[data-menu="recolhido"] .menu-modulo > details > ul{padding-left:0}
}

/* Celular (< 900): sem js, o menu fica aberto e no fluxo, em cima do conteudo;
   com js, vira gaveta aberta pelo botao da barra do topo, e fecha com Esc. */
@media (max-width: 900px){
  .com-menu{display:block}
  .com-menu::before{display:none}
  .menu-lateral{position:static;height:auto}
  .js .com-menu > .topo{display:flex;position:sticky;top:0;z-index:10}
  .js .menu-lateral{position:fixed;top:0;bottom:0;left:0;z-index:20;width:var(--sidebar-w);
    max-width:100%;height:auto;transform:translateX(-100%);visibility:hidden;
    transition:transform var(--motion),visibility var(--motion);box-shadow:var(--shadow-pop)}
  /* Ao abrir, a visibilidade muda na hora; so' o deslize anima. */
  .js[data-gaveta="aberta"] .menu-lateral{transform:none;visibility:visible;
    transition:transform var(--motion)}
  .js .botao-recolher{display:none}
}
@media (prefers-reduced-motion: reduce){
  .js .menu-lateral{transition:none}
}

/* ------------------------------------------------------- formulario */
label{display:block;margin:var(--space-4) 0 var(--space-2);font-weight:600;font-size:var(--text-sm)}
input:not([type=checkbox]):not([type=radio]):not([type=submit]),textarea,select{
  width:100%;padding:var(--space-3);font:inherit;font-size:var(--text-base);
  border:var(--hairline) solid var(--border-input);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);min-height:var(--touch-min)}
textarea{min-height:calc(var(--touch-min) * 2)}
input:focus-visible,textarea:focus-visible,select:focus-visible,
.campo-demo.estado-foco{outline:var(--focus-ring) solid var(--focus);outline-offset:var(--focus-offset)}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{
  border-color:var(--danger);border-width:var(--focus-ring)}
input:disabled,textarea:disabled,select:disabled{background:var(--surface-muted);
  color:var(--text-muted);cursor:not-allowed}
.erro-campo{color:var(--danger);font-size:var(--text-sm);margin:var(--space-1) 0 0}
fieldset{border:0;margin:0 0 var(--space-5);padding:0 0 var(--space-4);
  border-bottom:var(--hairline) solid var(--border)}
fieldset:last-of-type{border-bottom:0}
legend{font-size:var(--text-base);padding:0;margin-bottom:var(--space-1)}

.escala{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-2)}
.escala label{margin:0;font-weight:500}
.escala input{position:absolute;opacity:0;width:0;height:0}
.escala span{display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--touch-min);min-height:var(--touch-min);border:var(--hairline) solid var(--border-input);
  border-radius:var(--radius-sm);background:var(--surface);font-size:var(--text-base)}
.escala input:checked + span{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.escala input:focus-visible + span{outline:var(--focus-ring) solid var(--focus);outline-offset:var(--focus-offset)}

/* ------------------------------------------------------------- botoes */
/* Primario = accent/on-accent (components.md). O dourado de antes reprova AA
   sobre fundo claro (2,65:1) e fica so' como detalhe do menu escuro (P4). */
button,.botao{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--control-md);padding:var(--space-3) var(--space-5);margin-top:var(--space-4);
  font:inherit;font-size:var(--text-base);font-weight:600;line-height:var(--leading-base);
  border-radius:var(--radius-sm);border:var(--hairline) solid var(--accent);cursor:pointer;
  background:var(--accent);color:var(--on-accent);text-decoration:none}
button:hover,.botao:hover,.botao.estado-hover{background:var(--accent-hover);border-color:var(--accent-hover)}
button:active,.botao:active,.botao.estado-ativo{transform:translateY(var(--hairline))}
.botao.estado-foco{outline:var(--focus-ring) solid var(--focus);outline-offset:var(--focus-offset)}
button:disabled,.botao:disabled,.botao[aria-disabled="true"]{background:var(--surface-muted);
  color:var(--text-muted);border-color:var(--border);cursor:not-allowed;transform:none}
.botao[aria-busy="true"]{cursor:progress}
.botao[aria-busy="true"]::after{content:"…"}
.secundario{background:transparent;color:var(--accent);border:var(--hairline) solid var(--border-input)}
.secundario:hover,.secundario.estado-hover{background:var(--accent-soft);color:var(--on-accent-soft);
  border-color:var(--border-input)}
.discreto{background:transparent;color:var(--accent);border-color:transparent;
  text-decoration:underline}
.discreto:hover,.discreto.estado-hover{background:var(--surface-muted);border-color:transparent}
.perigo{background:var(--danger);color:var(--on-accent);border-color:var(--danger)}
.perigo:hover,.perigo.estado-hover{background:var(--danger);border-color:var(--text)}
.secundario:disabled,.discreto:disabled,.perigo:disabled{background:var(--surface-muted);
  color:var(--text-muted);border-color:var(--border)}
.botao-sm{min-height:var(--control-sm);padding:var(--space-2) var(--space-3);font-size:var(--text-sm)}
.acoes{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center;margin-bottom:var(--space-3)}
.acoes button,.acoes .botao{margin-top:0;min-height:var(--control-sm);
  padding:var(--space-2) var(--space-3);font-size:var(--text-sm)}
.acoes .rotulo{min-width:var(--space-6)}

/* --------------------------------------------------- cartao e aviso */
.cartao{background:var(--surface);border:var(--hairline) solid var(--border);
  border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:var(--space-4);
  margin:var(--space-3) 0}
.aviso{border-left:var(--line-thick) solid var(--aviso-borda);background:var(--aviso-bg);
  color:var(--text);padding:var(--space-3) var(--space-4);margin:var(--space-4) 0;font-size:var(--text-sm)}
.erro{border-left-color:var(--danger);background:var(--erro-bg)}
.ok{border-left-color:var(--success);background:var(--ok-bg)}

/* ------------------------------------------------ tabela rolavel */
table{width:100%;border-collapse:collapse;font-size:var(--text-sm);margin:var(--space-3) 0}
th,td{text-align:left;padding:var(--space-2);border-bottom:var(--hairline) solid var(--border);
  vertical-align:top}
th{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-xs);
  text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.rolavel{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ------------------------------------------------------- progresso */
/* Cinza e marinho, nunca verde-vermelho: dar olhos, nunca um tribunal. */
.barra{height:var(--space-2);background:var(--surface-muted);border-radius:var(--radius-sm);
  overflow:hidden;margin-top:var(--space-1)}
.barra i{display:block;height:100%;background:var(--accent)}
.barra-linha{display:flex;align-items:center;gap:var(--space-3)}
.barra-linha .barra{flex:1;margin-top:0}

/* ------------------------------------------------- etiqueta, abas */
.etiqueta{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-pill);background:var(--surface-muted);color:var(--text);
  font-size:var(--text-xs);font-weight:var(--weight-xs);line-height:var(--leading-xs)}
.etiqueta-mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em}
.abas{display:flex;gap:var(--space-1);flex-wrap:wrap;border-bottom:var(--hairline) solid var(--border);
  margin:var(--space-4) 0}
.abas a{display:inline-flex;align-items:center;min-height:var(--touch-min);padding:0 var(--space-4);
  color:var(--text-muted);text-decoration:none;border-bottom:var(--line-thick) solid transparent}
.abas a:hover,.abas a.estado-hover{color:var(--text)}
.abas a[aria-current]{color:var(--text);border-bottom-color:var(--accent);font-weight:600}

/* ---------------------------------------------- lista de modulos */
.modulos{list-style:none;margin:0;padding:0;border:var(--hairline) solid var(--border);
  border-radius:var(--radius-md);background:var(--surface)}
.modulo-rotulo{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.04em;padding:var(--space-3) var(--space-4) 0}
.modulos li{display:flex;align-items:center;gap:var(--space-3);min-height:var(--touch-min);
  padding:var(--space-2) var(--space-4);border-top:var(--hairline) solid var(--border)}
.modulos li.atual{background:var(--accent-soft);color:var(--on-accent-soft);font-weight:600}
.modulos li.concluido .item-icone{color:var(--text-muted)}
.modulos li.bloqueado{color:var(--text-muted)}
.motivo{font-size:var(--text-xs);color:var(--text-muted)}

/* --------------------------------------------------- estado vazio */
.vazio{text-align:center;padding:var(--space-6) var(--space-4);border:var(--hairline) dashed var(--border);
  border-radius:var(--radius-md);color:var(--text-muted)}
.vazio p{margin:0 0 var(--space-3)}

/* --------------------------------- cartao do produto (gate 2.2, UX-003) */
/* O titulo encosta no topo do cartao (as telas antigas faziam isso com style=
   inline, proibido em componente novo), achado pelo atributo e nao por classe
   nova; e o cadeado fica na linha da frase, centrado na altura dela. */
.cartao[aria-labelledby^="produto-"] > h2:first-child,
.cartao[aria-labelledby^="produto-"] > h3:first-child{margin-top:0}
p.motivo{display:flex;align-items:center;gap:var(--space-2)}

/* ----------------------------------------- Inicio e Perfil (2.3) */
/* O titulo do cartao novo encosta no topo, como o do produto acima. */
.continuar > h2:first-child,.retrato > h2:first-child{margin-top:0}
/* Apelido longo (60 caracteres) quebra em vez de empurrar a pagina de lado. */
h1,.continuar,.entrega,.retrato{overflow-wrap:break-word}
.continuar-lista,.voltas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:var(--space-3)}
.continuar-lista li{display:flex;flex-direction:column;gap:var(--space-1)}
/* «Sua semana» agrupa os cartoes de antes: so' a moldura, sem fundo novo,
   para nao criar par de contraste que nao foi medido. */
.entrega{border:var(--hairline) solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-4);margin:var(--space-4) 0}
.entrega > h2{margin-top:0}
.entrega > .sub{margin-bottom:var(--space-2)}
.vitrine-inicio{margin-top:var(--space-6)}
.retrato h3{margin-top:var(--space-4)}
.voltas li{padding-top:var(--space-2);border-top:var(--hairline) solid var(--border)}
.voltas li:first-child{padding-top:0;border-top:0}

/* ------------------------------------------- /admin/design (2.1) */
/* Os dois temas lado a lado a partir de ~1440 (gate 2.1, UX-001): a folha
   desta pagina pode passar de --content-max, e a coluna minima e' --amostra-min. */
.folha:has(.amostra-temas){max-width:var(--design-max)}
.amostra-temas{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--amostra-min)),1fr))}
.amostra{background:var(--bg);color:var(--text);border:var(--hairline) solid var(--border);
  border-radius:var(--radius-lg);padding:var(--space-4)}
.amostra-titulo{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.04em;margin:0}
.estados{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:flex-start}
.estado{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.estado > .rotulo-estado{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}
.estado button,.estado .botao{margin-top:0}
.menu-amostra{background:var(--sidebar);border-radius:var(--radius-md);padding:var(--space-2);
  width:var(--sidebar-w);max-width:100%}
.menu-amostra.recolhido{width:var(--sidebar-collapsed)}
.menu-amostra.recolhido .item-menu a{color:transparent;overflow:hidden;white-space:nowrap;
  padding-left:var(--space-6);padding-right:0}
.menu-amostra.recolhido .item-menu > .item-icone{left:var(--space-3)}
.menu-amostra ul{list-style:none;margin:0;padding:0}
.modulos-caixa{display:flex;flex-direction:column;gap:var(--space-2)}
/* A barra de exemplo mostra 3 de 8; as telas reais da R3 calculam a largura. */
.barra-exemplo i{width:37.5%}

/* ------------------------------------------- /admin/cursos (3.1) */
/* A capa que o facilitador enviou: nunca mais larga que a coluna. */
.curso-capa{display:block;max-width:min(100%,var(--amostra-min));height:auto;
  border:var(--hairline) solid var(--border);border-radius:var(--radius-md);margin:var(--space-3) 0}
/* A previa do texto gravado (markdown_seguro): moldura e fundo ja' medidos. */
.previa{border:var(--hairline) solid var(--border);border-radius:var(--radius-md);
  background:var(--surface-muted);padding:var(--space-3) var(--space-4);overflow-wrap:break-word}
.previa > :first-child{margin-top:0}
.previa > :last-child{margin-bottom:0}
/* As caixas de produto: o rotulo na linha da caixa, sem o peso de titulo. */
.caixas label{font-weight:500;margin:var(--space-2) 0;display:flex;align-items:center;
  gap:var(--space-2);min-height:var(--touch-min)}
/* Os itens dentro do modulo, recuados um passo. */
.itens-do-modulo{margin:var(--space-3) 0 0 var(--space-4)}

/* ------------------------------------ o curso do aluno (3.3) */
/* A barra do progresso da PROPRIA pessoa: a largura sai do SVG (viewBox
   0..M, retangulo de largura N), sem style= nem porcentagem na tela. A cor e'
   o destaque — nunca verde nem vermelho (README, principio 4). */
.barra-svg{display:block;width:100%;height:100%}
.barra-svg rect{fill:var(--accent)}
.trilha > h2:first-child,.materiais-cartao > h2:first-child{margin-top:0}
.trilha .barra-linha{margin-bottom:var(--space-3)}
.modulo-bloco{margin-top:var(--space-3)}
.modulo-bloco .modulo-rotulo{margin:0;padding-left:0}
.modulos a{overflow-wrap:anywhere}
.modulos li .motivo{margin-left:auto;display:inline-flex;align-items:center;gap:var(--space-1)}
/* A capa na lista de cursos do produto: proporcao fixa por classe, para a
   pagina nao pular quando a imagem chega. */
.curso-capa-lista{display:block;width:100%;max-width:min(100%,var(--amostra-min));
  aspect-ratio:16/9;object-fit:cover;border:var(--hairline) solid var(--border);
  border-radius:var(--radius-md);margin:0 0 var(--space-3)}
.cursos-do-produto{margin-top:var(--space-6)}
.curso-cartao > h3{margin-top:0}
/* O conteudo do player: texto renderizado, o audio e o video sem cookies. */
.player{margin:var(--space-3) 0}
.player-texto{overflow-wrap:break-word}
.player-audio{display:block;width:100%;margin:var(--space-3) 0}
.player-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;
  border-radius:var(--radius-md);background:var(--surface-muted)}
.player-acoes{margin:var(--space-4) 0}
.materiais{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.materiais li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
  min-height:var(--touch-min);overflow-wrap:anywhere}

/* ------------------------------------ liberacao gradual (3.2) */
/* A tabela de regras: no celular quem rola e' a tabela (`.rolavel`); os campos
   nao encolhem abaixo do toque. O cadeado e a data sao texto e icone, nunca so'
   cor (README, principio 4). */
.tabela-regras td{position:relative}
.tabela-regras select,.tabela-regras .campo-regra{min-height:var(--touch-min);margin:0;
  min-width:calc(var(--space-8) * 2)}
.tabela-regras select{min-width:calc(var(--space-8) * 3)}
.tabela-regras th[scope="row"]{font-family:var(--font-sans);font-size:var(--text-sm);
  text-transform:none;letter-spacing:normal;color:var(--text);font-weight:500;
  overflow-wrap:anywhere;min-width:calc(var(--space-8) * 2)}
.tabela-regras th[scope="row"] .etiqueta{margin-top:var(--space-1)}
.linha-modulo th,.linha-modulo td{background:var(--surface-muted)}
.item-da-regra{padding-left:var(--space-6)}
.libera-em{font-size:var(--text-sm);color:var(--text)}
.modulos li .libera-em{margin-left:0;white-space:nowrap}
/* No celular o item fechado quebra a linha: o titulo fica inteiro em cima, o
   cadeado e a data embaixo (sem isso, o titulo virava uma coluna de letras). */
.modulos li.bloqueado{flex-wrap:wrap}
.modulos li.bloqueado > a{flex:1 1 calc(var(--space-8) * 3)}
.regra-previa{margin-top:0}

/* ------------------------------------ configuracoes e boas-vindas (3.5) */
/* O cartao de boas-vindas do Inicio: a borda de destaque a' esquerda diz «isto
   e' recado», sem cor de semaforo. O texto e' do facilitador: as quebras de
   linha que ele escreveu ficam (pre-line), e palavra comprida quebra. */
.boas-vindas{border-left:var(--line-thick) solid var(--accent)}
.boas-vindas-texto{white-space:pre-line;overflow-wrap:anywhere;margin:0 0 var(--space-4)}

/* ------------------------------------ vitrine publica (3.6) */
/* A pagina aberta: secoes com folga, cartoes com o titulo colado no topo, e os
   titulos do curso em lista discreta. Nome e titulo compridos quebram dentro
   da coluna. A aba do facilitador reaproveita `.caixas` e `.motivo`. O titulo
   do cartao sobe um degrau (`--text-lg`): no `--text-base` da fonte de titulo
   ele saia menor que o texto do cartao (cosmetico do gate 3.6). */
.vitrine-secao{margin-top:var(--space-6)}
.vitrine-cartao > h3{margin-top:0;font-size:var(--text-lg);line-height:var(--leading-lg);
  overflow-wrap:anywhere}
.vitrine-rotulo{margin:0 0 var(--space-2);font-weight:600}
.vitrine-modulos{list-style:none;margin:0 0 var(--space-4);padding:0}
.vitrine-modulos > li{margin-top:var(--space-3);overflow-wrap:anywhere}
.vitrine-modulo{font-weight:500}
.vitrine-titulos{margin:var(--space-1) 0 0;padding-left:var(--space-5);color:var(--text-muted)}
.vitrine-titulos li{overflow-wrap:anywhere}
.vitrine-entrar{margin-top:var(--space-6)}
.vitrine-escolha label{overflow-wrap:anywhere}
.vitrine-escolha .motivo{display:block;margin:0 0 var(--space-2) var(--space-6)}

/* -------------------------------------------------------- impressao */
@media print{
  header.topo,.menu-lateral,.com-menu::before,.botao-menu,.botao-tema,.botao-recolher,.pular,.naoimprime{display:none!important}
  body,.com-menu{display:block;background:var(--surface)}
  .folha{max-width:none;padding:0}
  .cartao{break-inside:avoid;border-color:var(--border);box-shadow:none}
}

/* ------------------------------------ graficos do facilitador (4.5) */
/* SVG gerado no servidor, sem atributo de estilo: a geometria e' do viewBox
   (largura 400) e a cor e' `currentColor`. Aqui so' o tamanho na tela: cabe
   no celular sem rolar de lado, e nao cresce alem de --amostra-min. */
.grafico{display:block;width:100%;max-width:var(--amostra-min);height:auto;margin:0 auto var(--space-4)}

/* ---------------------------------------- lista padrao (story 5.3) */
/* Busca, filtros, «Colunas» e «+ Novo» numa fileira que quebra no celular;
   a tabela rola dentro de `.rolavel`; a linha de editar abre embaixo da pessoa.
   So' token: nenhuma cor, tamanho ou fonte solta. */
.lista-barra{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-2);margin:var(--space-3) 0}
.lista-barra label{margin:0}
.lista-colunas{align-self:center}
.lista-colunas label{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-1) 0}
.lista td{overflow-wrap:anywhere}
.lista th a{color:var(--text)}
.linha-extra td{background:var(--surface-muted)}
.lista-paginas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:var(--space-3) 0}

/* ---------------------------------- menu por modulos (story 6.6) */
/* Grupo = `<details>` nativo: abre e fecha sem JavaScript, com teclado e leitor
   de tela. O `summary` tem a altura de toque; o icone fica na coluna do icone
   dos itens e o texto na coluna do texto deles (o recuo desconta a borda, e o
   vao e' o do rodape). O marcador nativo sai e entra uma seta de borda, sem
   imagem, empurrada para a direita. O item dentro do grupo ganha um recuo.
   So' token; o foco vem do `.menu-lateral :focus-visible`. */
.menu-modulo > details > summary{display:flex;align-items:center;gap:var(--gap-menu);
  min-height:var(--touch-min);
  padding:var(--space-2) var(--space-3) var(--space-2) calc(var(--space-4) - var(--line-thick));
  border-radius:var(--radius-sm);border-left:var(--line-thick) solid transparent;
  color:var(--sidebar-muted);font-size:var(--text-sm);cursor:pointer;list-style:none;
  overflow-wrap:anywhere}
.menu-modulo > details > summary::-webkit-details-marker{display:none}
.menu-modulo > details > summary::after{content:"";margin-left:auto;flex:none;
  width:var(--space-2);height:var(--space-2);border-right:var(--line-thick) solid currentColor;
  border-bottom:var(--line-thick) solid currentColor;transform:rotate(45deg)}
.menu-modulo > details[open] > summary::after{transform:rotate(-135deg)}
.menu-modulo > details > summary:hover{background:var(--sidebar-active);color:var(--sidebar-text)}
.menu-modulo.grupo-atual > details > summary{color:var(--sidebar-text);font-weight:600}
.menu-modulo > details > ul{margin-top:var(--space-1);padding-left:var(--space-3)}
/* story 7.2: o funil em colunas (sem JavaScript; no celular rola de lado) */
.funil-contadores{display:flex;gap:var(--space-3);list-style:none;padding:0}
.funil-colunas{display:flex;gap:var(--space-3);overflow-x:auto}
.funil-coluna{flex:0 0 var(--sidebar-w)}
.funil-cartao{border:var(--hairline) solid var(--border);border-radius:var(--radius-md);padding:var(--space-2);margin-bottom:var(--space-2)}
.funil-filtros{display:flex;gap:var(--space-2)}
.funil-cartao .mover,.funil-cartao .sugestao{margin-top:var(--space-2)}
.atrasado{color:var(--danger)}
/* story 7.4: o campo-isca do formulario publico some para todos (classe, nao `style`) */
.campo-isca{display:none}
/* story 7.6: a etiqueta «— ...» ao lado de um nome e' `<span class="rodape">`, e
   o `.rodape` e' legenda de BLOCO (margem, folga e filete em cima). Num trecho
   em linha a margem nao vale, mas a folga e o filete valem: o filete era
   desenhado por cima do texto e o nome parecia riscado. So' o `span` perde os
   tres; o `p` e o `div` de rodape continuam com o filete. */
span.rodape{margin:0;padding:0;border:0}
/* story 7.6: o menu de acoes da linha (`acoes_menu` em `_lista.html`). Um
   `<details>` nativo: abre e fecha com o teclado sem JavaScript. O painel abre
   EM FLUXO, dentro da celula (a `.rolavel` recortaria um painel flutuante). O
   botao e cada item tem a altura de toque; o foco e' o global da casca. Os
   itens sao os botoes e links de sempre, com a mesma classe; aqui eles perdem
   margem, borda e fundo e viram linhas do menu. O grupo do fim (o que nao se
   desfaz com um clique) leva a cor de perigo e um filete proprio. So' token.
   QA 7.6 UX-001: o `details` mede a largura do botao (`--touch-min`) e alinha
   pela direita; o painel tem a largura do proprio texto e cresce para a
   ESQUERDA, por cima das colunas vizinhas, sem alargar a tabela. Continua em
   fluxo (`relative` so' o poe acima das celulas ao lado). */
.lista-acoes{display:flex;flex-direction:column;align-items:flex-end;width:var(--touch-min)}
.lista-acoes-botao{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--touch-min);min-width:var(--touch-min);border-radius:var(--radius-sm);
  border:var(--hairline) solid var(--border-input);color:var(--accent);
  font-size:var(--text-lg);font-weight:700;cursor:pointer;list-style:none}
.lista-acoes-botao::-webkit-details-marker{display:none}
.lista-acoes-botao:hover,.lista-acoes[open] > .lista-acoes-botao{background:var(--accent-soft);
  color:var(--on-accent-soft)}
.lista-acoes-itens{list-style:none;margin:var(--space-1) 0 0;padding:var(--space-1);
  background:var(--surface);border:var(--hairline) solid var(--border);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-pop);position:relative;width:max-content}
.lista-acoes-itens li,.lista-acoes-itens form{display:flex;flex-direction:column;margin:0}
.lista-acoes-itens .botao,.lista-acoes-itens button{justify-content:flex-start;
  min-height:var(--touch-min);margin:0;padding:var(--space-2) var(--space-3);
  border:0;background:transparent;color:var(--accent);font-size:var(--text-sm);text-align:left;
  white-space:nowrap}
.lista-acoes-itens .botao:hover,.lista-acoes-itens button:hover{background:var(--accent-soft);
  color:var(--on-accent-soft)}
.lista-acoes-perigo{border-top:var(--line-thick) solid var(--danger)}
.lista-acoes-perigo button,.lista-acoes-perigo button:hover{color:var(--danger)}
.lista-acoes-perigo .botao,.lista-acoes-perigo .botao:hover{color:var(--danger)}
/* story 9.1: a faixa da Visao 360 no painel (os numeros e os codigos dos alertas) */
.visao-360-numeros{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);list-style:none;margin:0 0 var(--space-3);padding:0}
.visao-360-numeros .num{font-size:var(--text-lg);font-weight:var(--weight-lg)}
/* story L1.3: a LuzFlix, a biblioteca do facilitador (grade de cartoes, chips, ficha, modulos).
   So' token e unidade relativa; a grade se ajusta a largura sem numero fixo de colunas, e a
   largura minima do cartao sai de um token (nenhuma medida solta). Texto longo quebra a
   palavra; o titulo do cartao e' cortado em tres linhas. */
.luzflix-aviso{margin:var(--space-3) 0}
.luzflix-busca{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-2) var(--space-3);margin:var(--space-3) 0}
.luzflix-busca label{display:block;font-size:var(--text-sm);color:var(--text-muted)}
.luzflix-busca input[type="search"]{flex:1 1 auto;min-width:0}
.luzflix-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-2) 0}
.luzflix-chip{display:inline-flex;align-items:center;min-height:var(--touch-min);
  padding:var(--space-1) var(--space-3);border:var(--hairline) solid var(--border-input);
  border-radius:var(--radius-pill);background:var(--surface);color:var(--text);
  font-size:var(--text-sm);text-decoration:none}
.luzflix-chip:hover{border-color:var(--accent)}
.luzflix-chip[aria-current="true"]{background:var(--accent-soft);color:var(--on-accent-soft);
  border-color:var(--accent);font-weight:var(--weight-lg)}
.luzflix-limpar{color:var(--text-muted)}
.luzflix-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--control-md) * 4),1fr));
  gap:var(--space-4);list-style:none;margin:var(--space-4) 0;padding:0}
.luzflix-grade > li{display:flex}
.luzflix-cartao{display:flex;flex-direction:column;gap:var(--space-1);flex:1 1 auto;
  min-height:var(--touch-min);min-width:0;padding:var(--space-3);background:var(--surface);
  border:var(--hairline) solid var(--border);border-radius:var(--radius-md);
  color:var(--text);text-decoration:none;word-break:break-word}
.luzflix-cartao:hover{border-color:var(--accent);box-shadow:var(--shadow-card)}
.luzflix-capa{display:flex;align-items:center;justify-content:center;aspect-ratio:2 / 3;
  margin-bottom:var(--space-2);contain:paint;background:var(--surface-muted);
  border-radius:var(--radius-sm);color:var(--text-muted)}
.luzflix-capa img{flex:1 1 0;min-width:0;align-self:stretch;object-fit:cover}
.luzflix-capa .icone{width:calc(var(--icon) * 2);height:calc(var(--icon) * 2)}
.luzflix-titulo{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  line-clamp:3;contain:paint;font-weight:var(--weight-lg);line-height:var(--leading-lg)}
.luzflix-cartao .sub{font-size:var(--text-xs)}
.luzflix-dominios{color:var(--text-muted)}
.luzflix-dados{display:grid;grid-template-columns:max-content 1fr;gap:var(--space-1) var(--space-4);
  margin:var(--space-3) 0}
.luzflix-dados dt{color:var(--text-muted);font-size:var(--text-sm)}
.luzflix-dados dd{margin:0;word-break:break-word}
.luzflix-texto{max-width:var(--reading-max);word-break:break-word}
.luzflix-modulos{padding-left:var(--space-5)}
.luzflix-modulos li{margin:var(--space-2) 0}
.luzflix-tabela td,.luzflix-tabela th{vertical-align:top}

/* ------------------------------------------- LuzFlix L2.0: editor, tabela, quadro, impressao */
/* Story L2.0 (ARQUITETURA-L2 D29, D41, D45, D46, D48, D49; contrato D53). So' acrescentado no
   FIM, so' com variaveis de tokens.css que ja' existem (claro e escuro de graca); nenhum pixel fora das
   linhas @media, nenhum hexadecimal. Icone e cor do quadro vem SO' da classe que o
   `markdown_seguro` escreve de uma lista fechada, nunca de atributo vindo do texto. */
.luzflix-nota{margin:var(--space-3) 0}
.luzflix-nota-acoes{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin:var(--space-2) 0}
.luzflix-nota-acoes a{display:inline-flex;align-items:center;min-height:var(--touch-min)}
.luzflix-sigilo{margin:var(--space-2) 0;font-size:var(--text-sm)}
.luzflix-nota-texto{padding:var(--space-2) var(--space-3);border-left:var(--line-thick) solid var(--border)}
.luzflix-conflito,.luzflix-previa{margin:var(--space-4) 0}

/* a tabela do Markdown: rola na horizontal em tela estreita, nunca estoura a pagina */
.lz-tabela{overflow-x:auto;margin:var(--space-3) 0}
.lz-tabela table{border-collapse:collapse}
.lz-tabela th,.lz-tabela td{padding:var(--space-1) var(--space-2);border:var(--hairline) solid var(--border);
  text-align:left;vertical-align:top}
.lz-tabela th{background:var(--surface-muted);font-weight:var(--weight-lg)}
.lz-esq{text-align:left}
.lz-dir{text-align:right}
.lz-cen{text-align:center}

/* o quadro (callout do Obsidian): caixa com titulo; a cor sai da classe */
.lz-quadro{margin:var(--space-3) 0;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);
  border-left:var(--line-thick) solid var(--accent);background:var(--surface-muted)}
.lz-quadro-titulo{margin:0;font-weight:var(--weight-lg)}
.lz-quadro-titulo::first-letter{text-transform:uppercase}
summary.lz-quadro-titulo{cursor:pointer;min-height:var(--touch-min);display:list-item}
.lz-quadro-corpo > :first-child{margin-top:var(--space-1)}
.lz-quadro-corpo > :last-child{margin-bottom:0}
.lz-quadro--nota,.lz-quadro--resumo,.lz-quadro--citacao{border-left-color:var(--accent)}
.lz-quadro--dica,.lz-quadro--sucesso{border-left-color:var(--success);background:var(--ok-bg)}
.lz-quadro--pergunta,.lz-quadro--exemplo{border-left-color:var(--text-muted)}
.lz-quadro--aviso{border-left-color:var(--aviso-borda);background:var(--aviso-bg)}
.lz-quadro--falha,.lz-quadro--perigo,.lz-quadro--bug{border-left-color:var(--danger);background:var(--erro-bg)}
.lz-quadro--outro{border-left-color:var(--border)}

/* a tarefa: a caixa e' desenho do CSS (o texto nao leva o marcador) */
li.lz-tarefa{list-style:none;position:relative}
li.lz-tarefa::before{content:"\2610";position:absolute;left:calc(var(--space-5) * -1);color:var(--text-muted)}
li.lz-tarefa--feita::before{content:"\2611";color:var(--success)}
.luzflix-texto code,.lz-campo code{font-family:var(--font-mono);font-size:var(--text-sm);
  padding:0 var(--space-1);border-radius:var(--radius-sm);background:var(--surface-muted)}
.luzflix-texto hr{border:0;border-top:var(--hairline) solid var(--border);margin:var(--space-4) 0}
.luzflix-texto h6{font-size:var(--text-base);margin:var(--space-3) 0 var(--space-1)}

/* a barra do editor: alvo de toque de 44 (o token), quebra linha em tela estreita */
.lz-form{display:grid;gap:var(--space-1);margin:var(--space-3) 0}
.lz-barra{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);
  margin:var(--space-2) 0;padding:var(--space-1);border:var(--hairline) solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface)}
.lz-barra[hidden]{display:none}
.lz-grupo{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-1)}
.lz-barra .lz-botao{display:inline-flex;align-items:center;justify-content:center;margin:0;
  min-width:var(--touch-min);min-height:var(--touch-min);padding:var(--space-1);
  background:transparent;color:var(--text);border:var(--hairline) solid transparent;
  border-radius:var(--radius-sm);font-weight:var(--weight-base);text-decoration:none}
.lz-barra .lz-botao:hover{background:var(--surface-muted);border-color:var(--border)}
.lz-barra .lz-botao[aria-pressed="true"]{background:var(--accent-soft);color:var(--on-accent-soft);
  border-color:var(--accent)}
.lz-barra .lz-botao:disabled,.lz-barra .lz-botao[aria-disabled="true"]{color:var(--text-muted);
  background:transparent;border-color:transparent;cursor:not-allowed}
.lz-tipo-quadro{min-height:var(--touch-min);margin:0}
.lz-barra-tabela{background:var(--surface-muted)}
.lz-aviso-vivo{min-height:var(--leading-base);margin:var(--space-1) 0;color:var(--text-muted);font-size:var(--text-sm)}
.lz-rotulo{display:block;margin-top:var(--space-2);font-size:var(--text-sm);color:var(--text-muted)}
.lz-origem{display:block;min-height:calc(var(--control-md) * 8);font-family:var(--font-mono);
  font-size:var(--text-sm);line-height:var(--leading-base)}
.lz-origem[hidden],.lz-campo[hidden]{display:none}
.lz-campo{min-height:calc(var(--control-md) * 8);padding:var(--space-3);
  border:var(--hairline) solid var(--border-input);border-radius:var(--radius-sm);background:var(--surface)}
.lz-campo:focus-within{border-color:var(--accent)}
.lz-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.js .lz-sem-js{display:none}

/* o campo do editor (ProseMirror): o h1/h2/h3 do campo com a cara do h3/h4/h5 da pagina */
.ProseMirror{white-space:pre-wrap;word-wrap:break-word;outline:none}
.ProseMirror:focus-visible{outline:var(--focus-ring) solid var(--focus);outline-offset:var(--focus-offset)}
.ProseMirror h1{font-size:var(--text-xl);line-height:var(--leading-xl)}
.ProseMirror h2{font-size:var(--text-lg);line-height:var(--leading-lg)}
.ProseMirror h3{font-size:var(--text-base);line-height:var(--leading-base)}
.ProseMirror table{border-collapse:collapse}
.ProseMirror th,.ProseMirror td{border:var(--hairline) solid var(--border);padding:var(--space-1) var(--space-2);
  vertical-align:top}
.ProseMirror th{background:var(--surface-muted)}
.ProseMirror .selectedCell{background:var(--accent-soft)}
.ProseMirror .lz-literal,.ProseMirror .lz-cru{color:var(--text-muted);font-family:var(--font-mono);
  font-size:var(--text-sm)}
.ProseMirror .lz-cru{white-space:pre-wrap;padding:var(--space-2);background:var(--surface-muted)}
.ProseMirror ul[data-type="taskList"]{list-style:none;padding-left:var(--space-2)}
.ProseMirror ul[data-type="taskList"] li{display:flex;gap:var(--space-2)}

/* a pagina de impressao (D53): so' o texto; no papel some o link do topo */
.luzflix-folha-impressao{max-width:var(--reading-max);margin:0 auto;padding:var(--space-5)}
.luzflix-rodape-impresso{margin-top:var(--space-6)}
@media print{
  .luzflix-folha-impressao{padding:0}
  .lz-tabela{overflow:visible}
  .lz-quadro,.lz-tabela table{break-inside:avoid}
}
/* fim do trecho da LuzFlix L2.0 */

/* LuzFlix L2.1: a faixa e a marca das versoes novas da wiki, as duas versoes e o Apagar.
   As duas versoes sao uma grade que se ajusta sozinha (sem consulta de midia): em tela estreita
   empilham (a dele primeiro, pela ordem do HTML), da largura media em diante ficam lado a lado;
   os botoes ocupam a largura da coluna. */
.luzflix-marca{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);
  margin-left:var(--space-2);font-size:var(--text-sm);font-weight:var(--weight-base)}
.luzflix-faixa{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.luzflix-pendente{text-decoration:none}
.luzflix-versoes li{margin:var(--space-2) 0}
.luzflix-versoes a{display:inline-flex;align-items:center;min-height:var(--touch-min)}
.luzflix-duas-versoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--space-8) * 4),1fr));
  gap:var(--space-5);margin:var(--space-4) 0}
.luzflix-versao{display:grid;align-content:start;gap:var(--space-3);padding:var(--space-4);
  border:var(--hairline) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.luzflix-versao h2{margin:0}
.luzflix-valor{font-size:var(--text-base);line-height:var(--leading-base)}
.luzflix-origem summary{min-height:var(--touch-min);cursor:pointer}
.luzflix-origem pre{white-space:pre-wrap;word-wrap:break-word;margin:var(--space-2) 0 0;
  padding:var(--space-2);font-family:var(--font-mono);font-size:var(--text-sm);
  background:var(--surface-muted);border-radius:var(--radius-sm)}
.luzflix-decidir,.lz-apagar{display:grid;margin:var(--space-2) 0}
.luzflix-decidir .botao,.lz-apagar .botao{min-height:var(--touch-min)}
/* fim do trecho da LuzFlix L2.1 */

/* LuzFlix L2.2: os formularios dos campos que nao sao Markdown, a capa e os botoes. Coluna
   unica, alvo de toque do tamanho do dedo, sem consulta de midia. So' token. */
.luzflix-formulario{display:grid;gap:var(--space-4);margin:var(--space-4) 0;
  max-width:calc(var(--space-8) * 8)}
.luzflix-campo{display:grid;gap:var(--space-1)}
.luzflix-campo label{margin:0}
.luzflix-ajuda,.luzflix-salvo{margin:0;color:var(--text-muted);font-size:var(--text-sm)}
.luzflix-acoes{margin:var(--space-2) 0 0}
.luzflix-acoes button,.luzflix-botao-post button,.luzflix-botoes button{min-height:var(--touch-min)}
.luzflix-botoes{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-2) 0 0}
.luzflix-botoes button{margin-top:0}
.luzflix-botao-post{display:grid;margin:var(--space-2) 0;max-width:calc(var(--space-8) * 8)}
.luzflix-bloco{margin:var(--space-5) 0}
.luzflix-bloco h2{margin:0 0 var(--space-3)}
.luzflix-capa-atual{display:block;max-width:calc(var(--space-8) * 3);height:auto;
  margin:var(--space-3) 0;border-radius:var(--radius-sm)}
.luzflix-secoes{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin:var(--space-2) 0;
  padding:0;list-style:none}
.luzflix-secoes a{display:inline-flex;align-items:center;min-height:var(--touch-min)}
/* fim do trecho da LuzFlix L2.2 */