/* ============================================================================
   IDENTIDADE VISUAL — alinhada ao HUB (interface/index.html / laudo.html).
   App de gestao: corpo em Inter (e ferramenta, nao leitura de texto longo),
   papel quente, header CLARO, cantos 2px, azul UNIGRAN + amarelo na marca.
   Classes antigas preservadas (validar/import herdam); paleta vem de tokens.
   ============================================================================ */
:root {
  /* paleta canonica do HUB */
  --paper: #FFFFFF;
  --paper-warm: #FBFAF7;
  --ink: #1A1A1A;
  --ink-strong: #0D1117;
  --ink-muted: #6B7280;
  --ink-faint: #9CA3AF;
  --line: #E5E2DC;
  --unigran-blue: #0046A8;
  --unigran-blue-dark: #00357D;
  --unigran-yellow: #FFC629;
  --aprovar: #15803D;
  --erro: #B42318;
  --radius: 2px;
  --topbar-h: 52px;

  /* aliases retrocompativeis: regras/classes antigas seguem funcionando */
  --azul: var(--unigran-blue);
  --azul-escuro: var(--unigran-blue-dark);
  --ok: var(--aprovar);
  --tinta: var(--ink);
  --cinza: var(--ink-muted);
  --borda: var(--line);
  --fundo: var(--paper-warm);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper-warm);
  -webkit-font-smoothing: antialiased;
}

/* ── topo + navegacao (estilo HUB: claro) ── */
.topo {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--line);
  min-height: var(--topbar-h);   /* G2: era height fixo -> menu que quebra (nav flex-wrap) vazava/cortava o topo */
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--unigran-blue);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.marca-dot { width: 8px; height: 8px; background: var(--unigran-yellow); display: inline-block; }
.marca-sep { color: var(--ink-faint); font-weight: 400; }
.marca-sub { color: var(--ink-muted); font-weight: 600; letter-spacing: 1px; }

/* ── menu colapsavel (padrao UNICO :8060/:5070; substitui a nav horizontal,
      que quebrava em 2+ linhas com 9-10 itens) ── */
.menu-botao {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px 12px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--unigran-blue);
}
.menu-botao:hover, .menu-botao[aria-expanded="true"] { border-color: var(--unigran-blue); background: var(--paper-warm); }
.menu-icone { font-size: 14px; line-height: 1; }

.menu-painel {
  position: absolute; top: var(--topbar-h); right: 16px; z-index: 50;
  min-width: 240px;
  max-height: calc(100vh - var(--topbar-h) - 16px); overflow-y: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: flex; flex-direction: column; padding: 6px 0;
}
/* estado inicial FECHADO por CSS puro: [hidden] (0,2,0) vence .menu-painel (0,1,0);
   sem isso, display:flex (autor) sobrepoe o [hidden]{display:none} da UA -> nasce ABERTO.
   JS so alterna o atributo hidden; nunca depende de JS pro estado inicial. */
.menu-painel[hidden] { display: none; }
.menu-painel a {
  color: var(--ink-muted); text-decoration: none;
  font-size: 12px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 9px 18px; border-left: 2px solid transparent;
}
.menu-painel a:hover { color: var(--ink); background: var(--paper-warm); }
.menu-painel a.ativo { color: var(--unigran-blue); border-left-color: var(--unigran-blue); background: var(--paper-warm); }
.menu-sep { border-top: 1px solid var(--line); margin: 6px 0; }
.menu-sessao { padding: 8px 18px; color: var(--ink-muted); font-size: 11px; }
.menu-sessao .papel { color: var(--ink-faint); }
.conteudo--estreito { max-width: 420px; }

/* ── conteudo ── */
.conteudo {
  max-width: 960px;
  margin: 1.75rem auto;
  padding: 0 1.5rem;
}

/* ── painel / dashboard (home) ── */
.painel-cards { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.25rem 0; }
.painel-card {
  flex: 1; min-width: 240px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.painel-card h3 { margin: 0 0 0.6rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-muted); font-weight: 600; }
.painel-num { font-size: 1.7rem; font-weight: 700; color: var(--ink-strong); line-height: 1.1; }
.painel-unit { font-size: 0.9rem; font-weight: 400; color: var(--ink-muted); }
.painel-card p { margin: 0.35rem 0 0; color: var(--ink-muted); font-size: 0.9rem; }
.painel-atalhos { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; }
.btn--grande { padding: 0.7rem 1.3rem; font-size: 1rem; font-weight: 600; }

.pagina-titulo { font-size: 1.25rem; margin: 0; color: var(--ink-strong); font-weight: 700; }
.pagina-titulo .total { color: var(--ink-muted); font-weight: 400; font-size: 0.95rem; }

.status { font-weight: 600; font-size: 1rem; }
.status--ok { color: var(--aprovar); }
.status--erro { color: var(--erro); }
.amostra { margin-top: 0.5rem; }
.amostra .cod { color: var(--ink-muted); font-size: 0.9rem; }
.dica { color: var(--ink-muted); margin-top: 2rem; font-size: 0.9rem; }

.erro {
  background: var(--paper);
  border: 1px solid var(--erro);
  border-radius: var(--radius);
  padding: 0.75rem;
  white-space: pre-wrap;
  font-size: 0.85rem;
  color: var(--erro);
}

.aviso {
  background: #EFF5FF;
  border: 1px solid var(--unigran-blue);
  color: var(--unigran-blue-dark);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* ── botoes ── */
.btn {
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { border-color: var(--ink-muted); }
.btn--primario { background: var(--unigran-blue); border-color: var(--unigran-blue); color: #fff; }
.btn--primario:hover { background: var(--unigran-blue-dark); border-color: var(--unigran-blue-dark); }
.btn--leve { background: transparent; border-color: transparent; color: var(--unigran-blue); padding-left: 0.3rem; padding-right: 0.3rem; }
.btn--leve:hover { text-decoration: underline; border-color: transparent; }

/* ── lista ── */
.cabecalho-lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.busca { display: flex; gap: 0.5rem; margin-bottom: 1rem; align-items: center; }
.busca input[type="search"], .busca input[type="text"] {
  flex: 1;
  max-width: 380px;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: inherit;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.9rem;
}
.tabela th, .tabela td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tabela th {
  background: var(--paper-warm);
  color: var(--ink-muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.tabela th a { color: var(--ink-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; }
.tabela th a:hover { color: var(--unigran-blue); }
.tabela th a.ativo { color: var(--unigran-blue); }
.th-seta { font-size: 0.7rem; }
.tabela tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: #FCFBF8; }
.tabela .acoes { text-align: right; white-space: nowrap; }
.tabela .acoes a { color: var(--unigran-blue); text-decoration: none; }
.tabela .acoes a:hover { text-decoration: underline; }
.vazio { color: var(--ink-muted); text-align: center; padding: 1.5rem; }

.paginacao { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.pag-info { color: var(--ink-muted); font-size: 0.85rem; }

/* ── formularios ── */
.form { max-width: 560px; display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.campo { display: flex; flex-direction: column; gap: 0.3rem; }
.campo-label { font-size: 0.85rem; color: var(--ink-muted); font-weight: 600; }
.campo input, .campo textarea, .campo select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: inherit;
}
.campo input:focus, .campo textarea:focus, .campo select:focus, .busca input:focus {
  outline: none;
  border-color: var(--unigran-blue);
}
.campo input:disabled { background: #F1F2F4; color: var(--ink-muted); }
.form-acoes { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.5rem; }
.inline { display: inline; }

/* ── import / conferencia ── */
.contadores { display: flex; gap: 0.5rem; margin: 0.5rem 0 1rem; flex-wrap: wrap; }
.chip {
  display: inline-block; padding: 0.25rem 0.7rem; border-radius: 999px;
  background: #EEF0F3; color: var(--ink); font-size: 0.85rem; font-weight: 600;
}
.chip--ok { background: #E3F4E9; color: var(--aprovar); }
.chip--alerta { background: #FDEEDE; color: #9A5B00; }
.grupo { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
.grupo--ok { color: var(--aprovar); }
.grupo--alerta { color: #9A5B00; }
.aula-input { width: 5rem; }
.form--larga { max-width: 100%; }

/* ── validacao: TELA UNICA de trabalho ── */
.val-topo { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.val-campo { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--ink-muted); font-weight: 600; }
.val-campo select { padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.95rem; min-width: 240px; font-family: inherit; }

.val-trabalho { display: flex; gap: 1rem; align-items: flex-start; }
.val-lista { width: 320px; flex: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); max-height: 72vh; overflow-y: auto; padding: 0.4rem; }
.val-aula-bloco { border-bottom: 1px solid var(--line); }
.val-aula-bloco:last-child { border-bottom: none; }
.val-aula { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  background: none; border: none; cursor: pointer; padding: 0.6rem 0.5rem; font-size: 0.92rem; font-weight: 600; color: var(--ink); text-align: left; font-family: inherit; }
.val-aula:hover { background: #F3F6FB; }
.val-xy { font-size: 0.8rem; color: var(--ink-muted); font-weight: 600; background: #EEF0F3; border-radius: 999px; padding: 0.1rem 0.5rem; }
.val-aula-videos { padding: 0.2rem 0 0.5rem 0.5rem; }
.val-vid { width: 100%; display: flex; align-items: center; gap: 0.5rem; background: none; border: none; cursor: pointer;
  padding: 0.4rem 0.5rem; border-radius: var(--radius); text-align: left; font-size: 0.88rem; color: var(--ink); font-family: inherit; }
.val-vid:hover { background: #F3F6FB; }
.val-vid.sel { background: #E9F0FB; outline: 1px solid var(--unigran-blue); }
.val-vid-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--ink-muted); }
.st-dot.st-ok { background: var(--aprovar); }
.st-dot.st-azul { background: var(--unigran-blue); }
.st-dot.st-erro { background: var(--erro); }
.st-dot.st-pendente { background: #C7CCD3; }

.val-painel { flex: 1; min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.val-painel-titulo { margin: 0 0 0.75rem; font-size: 1.05rem; }
.val-player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.val-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.val-estado { margin: 0.75rem 0; font-size: 0.88rem; color: var(--ink-muted); }
.val-estado .st-ok { color: var(--aprovar); } .val-estado .st-azul { color: var(--unigran-blue); } .val-estado .st-erro { color: var(--erro); }
.st-pendente-txt { color: var(--ink-muted); }
.val-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.btn--ok { background: var(--aprovar); border-color: var(--aprovar); color: #fff; }
.btn--ok:hover { filter: brightness(0.93); }
.btn--erro { background: var(--erro); border-color: var(--erro); color: #fff; }
.btn--erro:hover { filter: brightness(0.93); }
.val-erro-bloco { display: none; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--line); }
.val-erro-bloco.aberto { display: block; }
.val-obs { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.75rem; max-width: 480px; }
.val-obs input { padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.95rem; font-family: inherit; }

@media (max-width: 760px) {
  .topo { height: auto; padding: 0.6rem 1rem; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
  .sessao { margin-left: 0; }
  .val-trabalho { flex-direction: column; }
  .val-lista { width: 100%; max-height: 40vh; }
}

/* ── validacao por aula (cards antigos — telas removidas no redesign) ── */
.video-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.video-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 0.75rem; }
.thumb { width: 120px; height: 68px; object-fit: cover; border-radius: var(--radius); background: #EEF0F3; flex: none; }
.video-head .meta { color: var(--ink-muted); font-size: 0.85rem; margin-top: 0.2rem; }
.estado-atual { margin-top: 0.4rem; font-size: 0.85rem; color: var(--aprovar); }
.estado-atual--pendente { color: var(--ink-muted); }
.form-validacao { border-top: 1px dashed var(--line); padding-top: 0.75rem; }
.status-opcoes { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.radio { font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.linha-campos { display: flex; gap: 1rem; flex-wrap: wrap; }
.linha-campos .campo { flex: 1; min-width: 220px; }

/* ── conta / trocar senha (P1.1 §27.6 — aditivo; telas F2 não usam estas classes) ── */
.ajuda { color: var(--ink-muted); font-size: 0.9rem; margin: 0.25rem 0 1rem; }
.campo-dica { font-size: 0.8rem; color: var(--ink-faint); margin-top: 0.25rem; }
.conta-msg { font-size: 0.85rem; color: var(--ink-muted); }
.conta-msg.erro { color: var(--reprovar, #c0392b); }
.conta-msg.ok { color: var(--aprovar, #2e7d32); }

/* ── admin / reset de senha (P1.2 §24 — aditivo) ── */
.reset-resultados { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1rem; background: #FCFBF8; }
.reset-aviso { font-size: 0.85rem; font-weight: 600; color: var(--reprovar, #c0392b); margin-bottom: 0.4rem; }
.reset-resultados ul { margin: 0; padding-left: 1.1rem; }
.reset-resultados li { font-size: 0.9rem; margin: 0.15rem 0; }
.reset-email { color: var(--ink-muted); }
.reset-cred { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; background: #EEF0F3; padding: 0.05rem 0.35rem; border-radius: 4px; }