/*
  app/static/css/kinon.css
  ----------------------------
  Design system da marca Kinon. Fonte unica de verdade para cores,
  tipografia, espacamento e componentes reutilizaveis (botao, input,
  card, badge, progress, sidebar). Todas as paginas estaticas devem
  importar este arquivo e usar estas classes em vez de estilos
  proprios -- ver app/static/PADRAO_FRONTEND_KINON.md para o guia de
  uso e o mapa de vocabulario (questao->desafio, nota->Indice Kinon etc).

  Origem da marca (ate 2026-07-27): Arte_logomarca.docx (grid 8px,
  Manrope SemiBold, raio de cantos ~10%, verde reservado para
  interface/nunca na marca).

  ATUALIZACAO DE PALETA (2026-07-27): nova paleta aprovada explicitamente
  pelo usuario (Especificacao de Design Kinon Landing Page.pdf +
  mockup do Painel Premium), aplicada a todas as paginas. Os NOMES das
  variaveis --k-* foram preservados (nenhuma pagina precisa trocar
  var(--k-...) em seu <style> proprio) -- so os VALORES e alguns papeis
  semanticos mudaram (ex.: botao primario passa de petroleo/escuro para
  verde, ver .k-btn-primario abaixo). Fonte trocada de Manrope para Inter.

  CORRECAO DE COR (2026-08-16): a paleta de 2026-07-27 (#0F172A/#00C27C)
  divergia do manual de marca oficial (Azul Petroleo #143A52, Verde
  #18B67A, Grafite #23272F, Cinza Claro #F7F8FA, Branco). Usuario
  confirmou o manual como padrao definitivo do projeto. --k-petroleo e
  --k-verde (e os tons derivados: --k-petroleo-escuro, --k-verde-escuro,
  --k-verde-bg, --k-verde-borda, sombras) foram corrigidos para os
  valores exatos do manual. NOMES das variaveis preservados -- nenhuma
  pagina precisa mudar var(--k-...). Fonte da UI geral permanece Inter
  (racional inalterado: estetica de produto de tecnologia premium, ver
  cabecalho deste arquivo); Manrope SemiBold foi adicionada SOMENTE para
  a wordmark "kinon" (.k-marca-texto aqui, .k-auth-marca span em
  auth.html), conforme o manual -- nao aplicar Manrope a mais nada.
  Detalhe completo: memoria do projeto, arquivo
  project_kinon_padronizacao_cor_manual_20260816.md.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600&display=swap');

:root {
  /* Cores da marca (valores do manual oficial, corrigido 2026-08-16) */
  --k-petroleo: #143A52;       /* azul petroleo do manual -- titulos, fundo da sidebar */
  --k-petroleo-escuro: #0F2C3F; /* hover sobre elementos escuros */
  --k-verde: #18B67A;          /* verde do manual -- CTAs de conversao */
  --k-verde-escuro: #139862;   /* hover do verde primario */
  --k-azul-eletrico: #0073E6;  /* azul de destaque/acento */
  --k-grafite: #475569;        /* texto de corpo/paragrafo */
  --k-branco: #FFFFFF;
  --k-cinza-claro: #F8FAFC;    /* fundo de pagina */
  --k-borda: #E2E8F0;
  --k-borda-forte: #CBD5E1;
  --k-texto-secundario: #64748B;
  --k-texto-muted: #94A3B8;
  --k-vermelho: #EF4444;
  --k-vermelho-bg: #FEF2F2;
  --k-vermelho-borda: #FCA5A5;
  --k-verde-bg: #E8F7F1;
  --k-verde-borda: #B6E8D3;
  --k-laranja: #F59E0B;
  --k-laranja-bg: #FEF3E0;
  --k-laranja-texto: #92400E;

  /* Tipografia */
  --k-fonte: 'Inter', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Espacamento (grid de 8px) */
  --k-sp-1: 8px;
  --k-sp-2: 16px;
  --k-sp-3: 24px;
  --k-sp-4: 32px;
  --k-sp-5: 40px;
  --k-sp-6: 48px;

  /* Raio */
  --k-radius: 16px;
  --k-radius-sm: 12px;
  --k-radius-lg: 24px; /* hero/banners principais */

  /* Sombra (extremamente suave) */
  --k-shadow-sm: 0 1px 2px rgba(20, 58, 82, 0.06);
  --k-shadow-md: 0 8px 24px rgba(20, 58, 82, 0.07);

  /* Largura da sidebar */
  --k-sidebar-w: 232px;
  --k-sidebar-w-recolhida: 72px;
}

* { box-sizing: border-box; }

body.k-body {
  font-family: var(--k-fonte);
  background: var(--k-cinza-claro);
  color: var(--k-grafite);
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Layout com sidebar ---------- */

.k-shell {
  display: flex;
  min-height: 100vh;
}

.k-sidebar {
  width: var(--k-sidebar-w);
  flex-shrink: 0;
  background: var(--k-petroleo);
  color: var(--k-branco);
  padding: var(--k-sp-3) var(--k-sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--k-sp-1);
  transition: width 0.2s ease;
  /* Pendencia #157: sem isso, a sidebar e so mais um item de .k-shell
     (display:flex) e rola junto com o conteudo de .k-main em paginas
     mais altas que a viewport (ex: resultado da Trilha com revisao de
     erros aberta). sticky+align-self a fixa no topo da viewport durante
     o scroll no desktop. No mobile (media query abaixo) ja existia
     position:fixed, que sobrepoe esta regra -- sem conflito. */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}

.k-sidebar.k-recolhida { width: var(--k-sidebar-w-recolhida); }
.k-sidebar.k-recolhida .k-sidebar-label { display: none; }
.k-sidebar.k-recolhida .k-marca-texto { display: none; }

.k-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--k-sp-1) var(--k-sp-3);
  margin-bottom: var(--k-sp-2);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.k-marca-icone {
  width: 28px; height: 28px;
  flex-shrink: 0;
}

.k-marca-texto {
  font-family: 'Manrope', var(--k-fonte); /* wordmark "kinon" -- fonte do manual, nao a fonte geral do site */
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

.k-sidebar-toggle {
  background: none; border: none; color: rgba(255,255,255,0.6);
  cursor: pointer; padding: 6px; border-radius: 8px; margin-left: auto;
}
.k-sidebar-toggle:hover { background: rgba(255,255,255,0.08); color: white; }

.k-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--k-radius-sm);
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}
.k-nav-item:hover { background: rgba(255,255,255,0.06); color: white; }
.k-nav-item.k-ativo { background: rgba(24, 182, 122, 0.18); color: white; }
.k-nav-icone { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.9; }

.k-sidebar-rodape {
  margin-top: auto;
  padding-top: var(--k-sp-2);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}
.k-sidebar-rodape a { color: rgba(255,255,255,0.85); text-decoration: none; font-weight: 600; }

.k-main {
  flex: 1;
  padding: var(--k-sp-4) var(--k-sp-4) var(--k-sp-6);
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
}

/* Variante mais larga -- opt-in por pagina (ex.: painel.html), nao afeta
   .k-main puro nas demais paginas (fluxo de pergunta/resposta ganha com
   coluna estreita, o painel com varios cards lado a lado precisa de mais
   espaco). */
.k-main.k-largo { max-width: 1240px; }

@media (max-width: 720px) {
  .k-sidebar { position: fixed; z-index: 20; height: 100vh; }
  .k-main { padding: var(--k-sp-2); }
}

/* ---------- Sidebar mobile como menu (tarefa #68, painel admin) ----------
   Abaixo de 720px a sidebar deixa de ficar sempre visivel sobre o
   conteudo (comportamento antigo, sem como fechar) e passa a nascer
   fora da tela (translateX(-100%)), abrindo por cima do conteudo
   (com fundo escurecido) so quando o botao hamburguer e tocado. O
   botao de "recolher" (modo icone, feito para desktop) fica oculto no
   mobile -- no menu tocavel nao faz sentido um rail de icones. */
.k-sidebar-abrir-mobile {
  display: none;
  position: fixed;
  top: var(--k-sp-2);
  left: var(--k-sp-2);
  z-index: 25;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--k-petroleo);
  color: var(--k-branco);
  border: none;
  border-radius: var(--k-radius-sm);
  cursor: pointer;
  box-shadow: var(--k-shadow-md);
}
.k-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 19;
}
@media (max-width: 720px) {
  .k-sidebar-abrir-mobile { display: flex; }
  .k-sidebar-toggle { display: none; }
  .k-sidebar {
    left: 0;
    top: 0;
    width: var(--k-sidebar-w) !important;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .k-sidebar.k-recolhida .k-sidebar-label,
  .k-sidebar.k-recolhida .k-marca-texto { display: inline; }
  .k-sidebar.k-aberta-mobile { transform: translateX(0); }
  .k-sidebar-backdrop.k-aberta-mobile { display: block; }
  .k-main { padding-top: calc(var(--k-sp-2) + 56px); }
}

/* ---------- Tipografia ---------- */

.k-h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 4px; color: var(--k-petroleo); }
.k-h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; color: var(--k-petroleo); }
.k-subtitulo { color: var(--k-texto-secundario); margin: 0 0 var(--k-sp-3); font-size: 0.95rem; }
.k-label { display: block; font-weight: 500; font-size: 0.85rem; margin-bottom: 6px; margin-top: var(--k-sp-2); color: var(--k-grafite); }
.k-label:first-child { margin-top: 0; }

/* ---------- Card ---------- */

.k-card {
  background: var(--k-branco);
  border: 1px solid var(--k-borda);
  border-radius: var(--k-radius);
  padding: var(--k-sp-3);
  margin-bottom: var(--k-sp-2);
  box-shadow: var(--k-shadow-sm);
}

.k-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--k-sp-2);
}

.k-metrica-label {
  font-size: 0.78rem;
  color: var(--k-texto-secundario);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.k-metrica-valor {
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--k-petroleo);
  letter-spacing: -0.01em;
}
.k-metrica-delta {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--k-verde);
  margin-top: 2px;
}

/* ---------- Botao ---------- */

.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 var(--k-sp-3);
  border-radius: var(--k-radius);
  font-family: var(--k-fonte);
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.k-btn:active:not(:disabled) { transform: scale(0.99); }

.k-btn-primario { background: var(--k-verde); color: var(--k-branco); }
.k-btn-primario:hover:not(:disabled) { background: var(--k-verde-escuro); }

.k-btn-acento { background: var(--k-azul-eletrico); color: var(--k-branco); }
.k-btn-acento:hover:not(:disabled) { background: #3a55e0; }

.k-btn-secundario { background: var(--k-branco); color: var(--k-petroleo); border-color: var(--k-borda-forte); }
.k-btn-secundario:hover:not(:disabled) { background: var(--k-cinza-claro); }

.k-btn:disabled { background: var(--k-borda); color: var(--k-texto-muted); cursor: not-allowed; }

.k-btn.k-loading { color: transparent; position: relative; }
.k-btn.k-loading::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  animation: k-spin 0.6s linear infinite;
}
@keyframes k-spin { to { transform: rotate(360deg); } }

/* ---------- Input / select ---------- */

.k-input, .k-select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--k-radius-sm);
  border: 1px solid var(--k-borda-forte);
  font-size: 0.95rem;
  font-family: var(--k-fonte);
  background: var(--k-branco);
  color: var(--k-grafite);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.k-input:focus, .k-select:focus {
  outline: none;
  border-color: var(--k-azul-eletrico);
  box-shadow: 0 0 0 3px rgba(79, 107, 255, 0.12);
}
.k-select:disabled, .k-input:disabled {
  background: var(--k-cinza-claro);
  color: var(--k-texto-muted);
}

/* ---------- Badge ---------- */

.k-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.k-badge-verde { background: var(--k-verde-bg); color: var(--k-verde-escuro); }
.k-badge-azul { background: rgba(79,107,255,0.1); color: var(--k-azul-eletrico); }
.k-badge-neutro { background: var(--k-cinza-claro); color: var(--k-texto-secundario); }
.k-badge-vermelho { background: var(--k-vermelho-bg); color: var(--k-vermelho); }

/* ---------- Progress ---------- */

.k-progress {
  height: 8px;
  background: var(--k-borda);
  border-radius: 999px;
  overflow: hidden;
}
.k-progress-barra {
  height: 100%;
  background: linear-gradient(90deg, var(--k-verde), var(--k-azul-eletrico));
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* ---------- Mensagens de estado ---------- */

.k-erro {
  background: var(--k-vermelho-bg);
  border: 1px solid var(--k-vermelho-borda);
  color: var(--k-vermelho);
  padding: 14px 16px;
  border-radius: var(--k-radius-sm);
  font-size: 0.9rem;
}
.k-sucesso {
  background: var(--k-verde-bg);
  border: 1px solid var(--k-verde-borda);
  color: var(--k-verde-escuro);
  padding: 14px 16px;
  border-radius: var(--k-radius-sm);
  font-size: 0.9rem;
}
.k-carregando { color: var(--k-texto-secundario); font-size: 0.9rem; }
.k-aviso-suave { font-size: 0.8rem; color: var(--k-texto-secundario); margin-top: var(--k-sp-2); }

/* ---------- Skeleton loading (tarefa #66, painel admin) ----------
   Substitui os textos "Carregando..." por placeholders no formato do
   conteudo real, enquanto o fetch esta em andamento. Uso: colocar
   .k-skel-* como conteudo inicial de um elemento que o JS ja
   controla via `hidden` (nao muda o id/logica de show/hide existente)
   OU como conteudo inicial de um container que o proprio JS sobrescreve
   por completo com `elemento.innerHTML = ...` ao chegar a resposta
   (nesse caso o skeleton some sozinho, sem precisar de JS novo). */
@keyframes k-skel-brilho {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.k-skel {
  display: block;
  border-radius: var(--k-radius-sm);
  background: linear-gradient(90deg, var(--k-borda) 8%, var(--k-cinza-claro) 24%, var(--k-borda) 40%);
  background-size: 800px 100%;
  animation: k-skel-brilho 1.3s linear infinite;
}
.k-skel-bloco { display: flex; flex-direction: column; gap: 10px; }
.k-skel-linha { height: 14px; }
.k-skel-linha-curta { width: 45%; }
.k-skel-titulo { height: 20px; width: 40%; }
.k-skel-card { height: 82px; border-radius: var(--k-radius); }
.k-skel-linha-tabela { height: 44px; }
.k-skel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--k-sp-2);
}

/* ---------- Toast (tarefa #67, confirmacao de acoes no admin) ---------- */
.k-toast-container {
  position: fixed;
  top: var(--k-sp-2);
  right: var(--k-sp-2);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 340px;
}
.k-toast {
  padding: 14px 16px;
  border-radius: var(--k-radius-sm);
  box-shadow: var(--k-shadow-md);
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid var(--k-verde-borda);
  background: var(--k-verde-bg);
  color: var(--k-verde-escuro);
  animation: k-toast-entrar 0.2s ease-out;
}
.k-toast.k-toast-saindo { animation: k-toast-sair 0.2s ease-in forwards; }
@keyframes k-toast-entrar { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes k-toast-sair { from { opacity: 1; } to { opacity: 0; } }

/* ---------- Utilitarios ---------- */

.k-link { color: var(--k-azul-eletrico); font-weight: 600; text-decoration: none; }
.k-link:hover { text-decoration: underline; }
.k-flex-entre { display: flex; justify-content: space-between; align-items: center; }
.k-oculto { display: none !important; }