/* Estúdio do treino da Nikora. A base (cores, menu, cartões, tabelas, diálogos) é a do painel (/estudio/p/base.css, o mesmo
   arquivo de juno/admin_pagina/painel.css); aqui fica só o que é do estúdio. */

#sub-abas { margin-bottom: 14px; }
.entrada-rodape { color: #8ea3c4; text-align: center; }
#tem-convite { justify-self: start; margin-left: 0; }

/* as 3 travas */
.travas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.trava { background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra);
  display: grid; gap: 6px; align-content: start; position: relative; overflow: hidden; }
.trava::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--destaque); }
.trava h3 { font-size: 15px; }
.trava p { color: var(--fraco); font-size: 14px; }
.passos { margin: 6px 0 0 20px; padding: 0; display: grid; gap: 6px; font-size: 14px; }

/* o que pode mudar */
.legenda { display: flex; flex-wrap: wrap; gap: 8px; }
.pode { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 11px 3px 8px; font-size: 12.5px; font-weight: 650;
  white-space: nowrap; border: 1px solid transparent; }
.pode svg { width: 14px; height: 14px; }
.pode-trava { background: var(--vermelho-fundo); color: var(--vermelho); border-color: color-mix(in srgb, var(--vermelho) 30%, transparent); }
.pode-codigo { background: var(--amarelo-fundo); color: var(--amarelo); border-color: color-mix(in srgb, var(--amarelo) 30%, transparent); }
.pode-regra { background: var(--verde-fundo); color: var(--verde); border-color: color-mix(in srgb, var(--verde) 30%, transparent); }
.grupo-regras { display: grid; gap: 10px; }
.grupo-regras > .cabeca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.grupo-regras > .cabeca h2 { margin: 0; }
.itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.item { background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra);
  display: grid; gap: 7px; align-content: start; }
.item.trava-item { box-shadow: inset 4px 0 var(--vermelho), var(--sombra); }
.item.codigo-item { box-shadow: inset 4px 0 var(--amarelo), var(--sombra); }
.item.regra-item { box-shadow: inset 4px 0 var(--verde), var(--sombra); }
.item h3 { font-size: 15px; margin: 0; }
.item p { font-size: 14px; }
.item ul.valores { margin: 0; padding: 8px 10px 8px 26px; background: var(--sup2); border-radius: 10px; font-size: 13px; display: grid; gap: 2px; }
.item .onde { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11.5px; color: var(--fraco); }
.item .acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

/* métodos */
.pilulas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pilulas li { background: var(--sup2); border: 1px solid var(--borda); border-radius: 999px; padding: 3px 11px; font-size: 13px; color: var(--fraco); }
.metodo { padding: 0; }
.metodo > summary { cursor: pointer; padding: 12px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; list-style: none; }
.metodo > summary::-webkit-details-marker { display: none; }
.metodo > summary strong { font-size: 15px; }
.metodo > summary .meta { grid-column: 1; }
.metodo > summary .selo { grid-row: 1; grid-column: 2; align-self: start; }
.metodo[open] > summary { border-bottom: 1px solid var(--borda); }
.metodo .corpo { padding: 12px 16px 16px; display: grid; gap: 8px; font-size: 14px; }
.metodo .corpo ol { margin: 0 0 0 20px; padding: 0; display: grid; gap: 2px; }
.metodo .corpo .rotulo { color: var(--fraco); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.metodos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; align-items: start; }
.selo.nivel-iniciante { border-color: var(--verde); color: var(--verde); }
.selo.nivel-intermediario { border-color: var(--amarelo); color: var(--amarelo); }
.selo.nivel-avancado { border-color: var(--vermelho); color: var(--vermelho); }

/* base */
.texto-base { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; padding: 12px 18px 16px; max-height: 520px; overflow: auto; }

/* casos de teste e a ficha */
.lista li .linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lista li .nota-pilula { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--destaque); white-space: nowrap; }
.perfil-resumo { display: flex; flex-wrap: wrap; gap: 6px; }
.perfil-resumo span { background: var(--sup2); border-radius: 8px; padding: 2px 9px; font-size: 13px; }
.ficha-treino { display: grid; gap: 4px; }
.ficha-treino h3 { margin-top: 8px; }
.ficha-treino table td, .ficha-treino table th { padding: 7px 10px; font-size: 13px; }
.situacao { font-weight: 650; white-space: nowrap; }
#notas-tabela td:first-child { min-width: 260px; }
.situacao.entrou, .situacao.pronta { color: var(--verde); }
.situacao.barrada, .situacao.erro { color: var(--vermelho); }
.situacao.na_fila, .situacao.rodando, .situacao.esperando_limite { color: var(--amarelo); }
.situacao.para_o_felipe { color: var(--destaque); }
.motivo { background: var(--sup2); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.motivo.barrada { background: var(--vermelho-fundo); color: var(--vermelho); }
.motivo.entrou { background: var(--verde-fundo); color: var(--verde); }

/* editor da ficha */
.editor td { vertical-align: middle; }
.editor input { min-height: 32px; padding: 4px 8px; font-size: 13px; }
.editor input.n { width: 58px; } .editor input.r { width: 84px; } .editor input.d { width: 76px; }
.editor select { min-height: 32px; padding: 4px 6px; font-size: 13px; max-width: 170px; }
.editor .nome-ex { background: transparent; color: var(--texto); border: 1px dashed var(--borda-forte); font-weight: 550; justify-content: flex-start;
  white-space: normal; text-align: left; min-height: 32px; padding: 4px 10px; max-width: 320px; }
.editor .nome-ex:hover { border-color: var(--destaque); filter: none; }
.editor .mover { display: inline-flex; gap: 2px; }
.editor button.icone { width: 30px; min-height: 30px; color: var(--fraco); }
.editor button.icone svg { width: 16px; height: 16px; }
.editor tr.mudou td { background: var(--destaque-fundo); }
.editor .ficha-nome { font-weight: 650; font-size: 15px; width: min(420px, 100%); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--sup); color: var(--texto); border: 1px solid var(--borda-forte); border-radius: 999px; min-height: 32px; padding: 4px 12px;
  font-weight: 550; font-size: 13px; }
.chip.marcado { background: var(--destaque-fundo); border-color: var(--destaque); color: var(--destaque); }
.nota-detalhe { display: grid; gap: 6px; font-size: 13.5px; }
.criterios { display: flex; flex-wrap: wrap; gap: 6px; }
.criterio { border-radius: 8px; padding: 2px 9px; font-size: 12.5px; background: var(--sup2); }
.criterio.n2 { background: var(--verde-fundo); color: var(--verde); }
.criterio.n1 { background: var(--amarelo-fundo); color: var(--amarelo); }
.criterio.n0 { background: var(--vermelho-fundo); color: var(--vermelho); }

/* busca de exercício */
.largo-dlg { width: min(720px, calc(100vw - 32px)); }
.resultados { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 52vh; overflow-y: auto; }
.resultados li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; }
.resultados li:hover { background: var(--sup2); border-color: var(--borda); }
.resultados img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; background: var(--sup3); flex: none; }
.resultados .sem-img { width: 48px; height: 48px; border-radius: 8px; background: var(--sup3); flex: none; }
.resultados .texto { display: grid; }
.resultados li.nada { cursor: default; color: var(--fraco); }
.miniatura { width: 120px; height: 120px; object-fit: cover; border-radius: 12px; background: var(--sup3); }

/* perfis (formulário) */
.pergunta { display: grid; gap: 6px; }
.pergunta > span { color: var(--fraco); font-size: 13px; font-weight: 550; }
.opcoes { display: flex; flex-wrap: wrap; gap: 6px; }

/* lado a lado */
.lado-a-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.lado-a-lado > div { display: grid; gap: 6px; align-content: start; background: var(--sup2); border-radius: 12px; padding: 10px 12px; }
.lado-a-lado h4 { margin: 0; font-size: 13px; color: var(--fraco); text-transform: uppercase; letter-spacing: .05em; }
.lado-a-lado ul { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 1px; }
.lado-a-lado .treino-nome { font-weight: 650; font-size: 13px; margin-top: 4px; }
.cego-escolha { display: flex; gap: 8px; flex-wrap: wrap; }
.revelado { font-size: 16px; font-weight: 700; }

/* gráfico da evolução */
.grafico .linha { fill: none; stroke: var(--destaque); stroke-width: 2.5; }
.grafico .ponto { fill: var(--sup); stroke: var(--destaque); stroke-width: 2; cursor: pointer; }
.grafico .ponto.marcado { fill: var(--destaque); }

@media (max-width: 1100px) { .travas { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .lado-a-lado { grid-template-columns: 1fr; }
  .itens, .metodos-grade { grid-template-columns: 1fr; }
  .topo #abrir-manual span { display: none; }
}