/* Central: recursos (cui2-rec, rodada 2, 2026-11-02). Carregado depois de styles.css: as regras daqui sobrepõem as de lá.
   Telas: Habilidades (#habilidades), Apps (#apps) e Novo DOT (#time/novo). */

/* ── estado vazio: um cartão centrado com ícone, frase e ação (Habilidades, Apps, Novo DOT) ── */
.est-vazio{max-width:520px;margin:24px auto 0;padding:28px;background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio-cartao);display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.est-vazio-icone{display:inline-flex;color:var(--destaque)}
.est-vazio-t{margin:6px 0 0;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:0;color:var(--texto)}
.est-vazio p{margin:0;color:var(--texto-2);font-size:14px;line-height:1.5}
.est-vazio .acts{justify-content:center;margin-top:8px}
/* Habilidades: o vazio alinha à esquerda com o título (até 560px), nunca centralizado sozinho no meio */
.hab-pagina .est-vazio{max-width:560px;margin:24px 0 0;align-items:flex-start;text-align:left}
.hab-pagina .est-vazio .acts{justify-content:flex-start}

/* ── Habilidades: título e ação principal na mesma linha; Ensinar em grade de cartões ── */
.hab-cabec{align-items:flex-end;margin-bottom:18px}
.hab-cabec .acts{flex:none}
/* a grade de skills são cartões de altura variável: colunas CSS (alvenaria), sem buraco e sem esticar cartão.
   O vazio ocupa as colunas todas. */
.hab-grade{display:block;columns:3 300px;column-gap:16px}
.hab-grade > *{break-inside:avoid;margin:0 0 16px;width:100%}
.hab-grade > .est-vazio{column-span:all;margin:24px 0 0}
/* o cartão da skill: o nome quebra em até duas linhas; o pill da origem não quebra no meio da palavra */
.hab-card{padding:16px;border-radius:var(--raio-cartao);gap:10px}
.hab-card .card-h{align-items:flex-start;gap:10px}
.hab-card .card-h h3{min-width:0;font-size:15.5px;line-height:1.3;overflow-wrap:anywhere}
.hab-card .card-h .pill{flex:none;white-space:nowrap;max-width:none;font-size:11.5px;line-height:1.4;padding:2px 10px}
.hab-rotulo{margin-top:4px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--apagado)}
.hab-card .chips{gap:6px}
/* o topo do cartão: o selo de origem e o ícone de excluir (40px, com nome acessível) à direita do nome */
.hab-topo{display:flex;align-items:center;gap:8px;flex:none}
.hab-lixo{width:40px;height:40px;min-width:40px;min-height:40px;padding:0;justify-content:center;border-radius:10px;color:var(--apagado)}
.hab-lixo:hover{color:var(--perigo);background:var(--hover)}
/* (cui7) com mouse, a lixeira apaga em repouso e acende no cartão e no foco (ela continua no lugar, com o mesmo alvo de 40px);
   no toque não há hover, então fica como está. O ✓ de "Quem usa" ligado é o .chip-marca (app.js: chip) */
@media (hover:hover) and (pointer:fine){
  .hab-lixo{opacity:.6;transition:opacity 150ms ease-out}
  .hab-card:hover .hab-lixo,.hab-lixo:focus-visible{opacity:1}
}
.hab-card .chip-marca{flex:none}
/* (cui9) "Quem usa": os rostos de quem está ligado, o resumo com os nomes e a contagem, e o botão que abre a lista de marcar.
   A lista (os chips) só aparece aberta; o marcado tem preenchimento forte, além da borda e do ✓. */
.hab-quem{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.hab-quem-resumo{margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--texto-2);font-size:14px;line-height:1.45;min-width:0}
.hab-quem-resumo > span{min-width:0;overflow-wrap:anywhere}
.hab-quem-rostos{display:inline-flex;flex:none}
.hab-quem-rostos > *{margin-left:-6px;box-shadow:0 0 0 2px var(--cartao);border-radius:50%}
.hab-quem-rostos > :first-child{margin-left:0}
.hab-quem-mudar{min-height:36px;padding:6px 14px;font-size:13.5px}
.hab-quem-lista{width:100%;gap:6px}
.hab-quem-lista .chip.on{background:#1f3a2c;border-color:var(--verde-escuro);color:var(--destaque)}
/* o cartão de criar: tracejado, no fim da grade (só para quem pode criar) */
.hab-novo{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:120px;padding:16px;background:none;border:1px dashed var(--borda-forte);border-radius:var(--raio-cartao);color:var(--destaque);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.hab-novo:hover{background:var(--realce);border-color:var(--borda-verde)}

/* ── Apps: cabeçalho, filtros numa linha, e a lista em grade de cartões ── */
.apps-cabec{margin-bottom:0}
.apps-pagina .art-filtros{margin:16px 0 20px}
/* auto-fit (e não auto-fill, regra de consistência da rodada 6): com poucos apps, os cartões dividem a linha, sem colunas vazias */
.app-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;align-items:stretch}
.app-lista > *{min-width:0}
.app-item{flex-direction:column;align-items:stretch;gap:14px;height:100%;padding:18px;border-radius:var(--raio-cartao)}
.app-item .app-tile{width:44px;height:44px}
.app-item-texto b{display:block;font-size:15.5px;line-height:1.3;overflow-wrap:anywhere}
.app-item-texto small{line-height:1.45}
.app-item-texto small + small{margin-top:4px}
.app-item-acoes{justify-content:space-between;align-items:center;margin-top:auto;padding-top:4px}

/* ── Novo DOT: cada etapa num cartão; a prévia ao lado (320px) no desktop; o botão fixo no fim ── */
@media (min-width:1101px){
  .nd-pagina .formpage{grid-template-columns:minmax(0,1fr) 320px}
}
.nd-cartao{display:flex;flex-direction:column;gap:18px;padding:20px 22px;border-radius:20px;min-width:0}
.nd-cartao-tit{margin:0;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--apagado);line-height:1.4}
/* dentro do cartão da etapa, os painéis viram blocos sem borda (nada de cartão dentro de cartão) */
.nd-cartao .panel{background:none;border:0;border-radius:0;padding:0}
.nd-cartao .nd-rotina{border-top:1px solid var(--borda);padding-top:18px}
.nd-cartao .nd-lia p{font-size:14px}
/* as sugestões do setor e as habilidades: cartões clicáveis em grade */
.nd-sugs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:10px;align-items:start}
.nd-sugs > small{grid-column:1/-1}
.nd-sug{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:start;width:100%;min-width:0;padding:12px 14px;background:#0b110d;border:1px solid var(--borda-forte);border-radius:14px;color:var(--texto-2);font:inherit;font-size:14px;line-height:1.4;text-align:left;cursor:pointer}
.nd-sug span{min-width:0;overflow-wrap:anywhere}
.nd-sug small{grid-column:1/-1;color:var(--apagado);font-size:12.5px;line-height:1.4;overflow-wrap:anywhere}
.nd-sug svg{flex:none;color:var(--destaque);margin-top:2px}
.nd-sug:hover{border-color:var(--borda-verde);background:var(--realce)}
.nd-sug.on{border-color:var(--verde-escuro);background:#14261d;color:var(--texto)}
.nd-sug:focus-visible{outline:2px solid var(--destaque);outline-offset:2px}
/* o botão de criar (ou avançar) fica no fim do formulário, numa faixa com fio acima: sempre o último bloco, sem cobrir o conteúdo */
.nd-pagina .nd-acoes{padding-top:18px;border-top:1px solid var(--borda)}
/* as 5 formas: 5 colunas quando o campo tem pelo menos 740px (consulta de contêiner); abaixo,
   2 colunas com a última (Hexágono) ocupando a linha toda, sem ficar sozinha numa fileira */
.nd-pagina .field:has(> .opts){container-type:inline-size}
.nd-pagina .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
.nd-pagina .opts > .nd-forma:nth-child(5):last-child{grid-column:1/-1}
@container (min-width:740px){
  .nd-pagina .opts{grid-template-columns:repeat(5,minmax(0,1fr))}
  .nd-pagina .opts > .nd-forma:nth-child(5):last-child{grid-column:auto}
}
/* (cui5) as formas viram uma lista vertical, uma por linha: a grade deixava o Hexágono sozinho na última fileira.
   Cada forma: o glifo à esquerda, o nome, o jeito, o resumo e o exemplo à direita. */
.nd-pagina .opts:has(> .nd-forma){grid-template-columns:minmax(0,1fr);gap:8px}
.nd-pagina .opts > .nd-forma{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:center;text-align:left;padding:14px 16px}
.nd-pagina .opts > .nd-forma > .dot{grid-column:1;grid-row:1 / span 4;justify-self:center}
.nd-pagina .opts > .nd-forma > :not(.dot){grid-column:2;min-width:0;overflow-wrap:anywhere}

/* ── celular: alvo de toque de pelo menos 40px (botão, chip, seg e cartão clicável) ── */
@media (prefers-reduced-motion: reduce){
  .hab-lixo{transition:none}
}
@media (max-width:700px){
  /* (cui5) no celular, os 4 setores são uma grade de 2 colunas (duas fileiras cheias, nenhum escondido numa
     rolagem); as etapas são uma linha só que rola, sem o empilhamento de pílulas */
  .nd-pagina .nd-setores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .nd-pagina .nd-setores > *{min-width:0;white-space:normal}
  .nd-pagina .passos{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;align-items:center;padding:4px 2px}
  .nd-pagina .passos > *{flex:none;white-space:nowrap}
  .hab-pagina .seg button,
  .hab-pagina .btn,
  .hab-pagina .chip,
  .apps-pagina .btn,
  .apps-pagina .chip,
  .nd-pagina .btn,
  .nd-pagina .chip,
  .nd-pagina .passo.ok,
  .nd-pagina .nd-sug,
  .nd-pagina .opt{min-height:40px}
  .hab-pagina .seg button{display:inline-flex;align-items:center}
  .est-vazio{padding:22px}
  .hab-cabec{align-items:flex-start}
  .hab-cabec .acts{width:100%}
  .hab-cabec .acts .btn{flex:1 1 auto;justify-content:center}
  /* (cui9) o segmentado de Habilidades ocupa a largura da coluna, com a borda direita batendo na busca e nos cartões */
  .hab-pagina .seg{display:flex;width:100%}
  .hab-pagina .seg button{flex:1 1 0;justify-content:center}
}

/* o foco visível (2px, verde da casa) em tudo que as três telas clicam */
.hab-pagina :focus-visible,.apps-pagina :focus-visible,.nd-pagina :focus-visible{outline:2px solid var(--destaque);outline-offset:2px}

/* (cui7) celular: os setores são chips pelo conteúdo (sem a grade de 2 colunas que deixava um sozinho); a faixa das etapas,
   onde não cabem as 4, desvanece a borda direita para mostrar que rola */
@media (max-width:700px){
  .nd-pagina .nd-setores{display:flex;flex-wrap:wrap;gap:8px}
  .nd-pagina .nd-setores > *{flex:0 1 auto;min-width:0}
  .nd-pagina .passos > *{scroll-snap-align:start}
  .nd-pagina .passos{scroll-snap-type:x proximity}
}
/* (rodada 8) as quatro etapas numa grade de 2 colunas, sem rolagem: a faixa que rolava escondia a 3ª e a 4ª etapa
   fora da tela, e no celular ninguém via quantos passos faltavam. Abaixo de 640px, duas linhas cheias. */
@media (max-width:640px){
  .nd-pagina .passos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;padding:0;scroll-snap-type:none}
  .nd-pagina .passos > *{min-width:0;min-height:40px;display:flex;align-items:center;justify-content:center;text-align:center}
}
/* (rodada 8) abaixo de 420px, os setores em grade de 2 colunas; com cinco setores o último sobra sozinho e ocupa a
   linha toda, em vez de deixar um vazio à direita (o mesmo critério das formas, o Hexágono) */
@media (max-width:420px){
  .nd-pagina .nd-setores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .nd-pagina .nd-setores > *{min-width:0;white-space:normal}
  .nd-pagina .nd-setores > :last-child:nth-child(odd){grid-column:1/-1}
}

/* o rótulo "da Loja" da sugestão não quebra no meio; o campo "O que ele faz" mostra as linhas no celular */
.nd-pagina .nd-tag{white-space:nowrap}
.nd-pagina .formcol textarea{min-height:132px}