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

:root {
  --bg: #FAFAFA;
  --bg-gradiente: linear-gradient(135deg, #FAFAFA, #F0F0F0);
  --surface: #FFFFFF;
  --surface-raised: #F7F9F8;
  --surface-vidro: rgba(255, 255, 255, 0.7);
  --ink: #262626;
  --ink-soft: #4A4A4A;
  --ink-faint: #8A8A8A;
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);
  --accent: #28BD41;
  --accent-ink: #1C7A30;
  --accent-soft: #E3F7E7;
  --danger: #8C3B34;
  --danger-soft: #F3E1DE;
  --nav-bg: #16301F;
  --nav-bg-raised: #1E4029;
  --nav-ink: #F5F7F5;
  --nav-ink-soft: #9FC4A8;
  --laranja: #E8890C;
  --laranja-escuro: #C67209;
  --laranja-suave: #FDF1DF;
  --gradiente-primario: linear-gradient(135deg, #28BD41, #768798);
  --sombra-vidro: 0 8px 32px rgba(0, 0, 0, 0.08);
  --raio-cartao: 24px;
  --raio-campo: 14px;
  --raio-elemento: 12px;
  --font-display: "Inter", -apple-system, "system-ui", BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", -apple-system, "system-ui", BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  background: var(--bg-gradiente) fixed;
  color: var(--ink);
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
}

.pagina {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

/* Barra de navegação */
header.barra-nav {
  background: var(--nav-bg);
  padding: 0 20px;
}
.barra-nav-interior {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 60px;
  flex-wrap: nowrap;
}
.marca {
  color: var(--nav-ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.marca span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--nav-ink-soft);
  letter-spacing: 0.03em;
}
nav.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--nav-ink-soft) transparent;
}
nav.nav-links::-webkit-scrollbar { height: 4px; }
nav.nav-links::-webkit-scrollbar-track { background: transparent; }
nav.nav-links::-webkit-scrollbar-thumb { background: var(--nav-ink-soft); border-radius: 999px; }
nav.nav-links a {
  color: var(--nav-ink-soft);
  text-decoration: none;
  font-size: 0.87rem;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
nav.nav-links a:hover { color: var(--nav-ink); background: var(--nav-bg-raised); }
nav.nav-links a.ativo { color: #fff; background: var(--laranja); }
.nav-acoes {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--nav-ink-soft);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-acoes a { color: var(--nav-ink-soft); text-decoration: none; font-weight: 600; }
.nav-acoes a:hover { color: var(--nav-ink); }

/* Em telas estreitas, marca + nome/sair (nenhum dos dois encolhe,
   `flex-shrink: 0`) sozinhos já podem ocupar quase toda a largura —
   sobrava praticamente 0px pro menu (`nav.nav-links` tem `flex: 1` +
   `overflow-x: auto`, e um item flex com overflow não-visível vira
   `min-width: 0` por padrão, então ele encolhia até sumir por completo
   em vez de simplesmente rolar). Quebra pra 2 linhas: marca+ações em
   cima, menu embaixo ocupando a largura toda pra rolar de verdade. */
@media (max-width: 720px) {
  .barra-nav-interior {
    flex-wrap: wrap;
    min-height: 0;
    padding: 10px 0;
  }
  nav.nav-links {
    flex-basis: 100%;
    order: 3;
  }
}

.voltar {
  display: inline-block;
  color: var(--accent-ink);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 14px;
}
.voltar:hover { text-decoration: underline; }

header.topo {
  margin-bottom: 28px;
}

header.topo h1 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  margin: 0 0 4px;
}

header.topo .subtitulo {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0;
}

a { color: var(--accent-ink); }

.callout {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--laranja-suave);
  border-left: 3px solid var(--laranja);
  color: var(--laranja-escuro);
  border-radius: var(--raio-elemento);
  padding: 12px 14px;
  font-size: 0.88rem;
  margin: 10px 0 16px;
}

/* Cartão em "vidro fosco" (glassmorphism) — translúcido + blur, mesmo
   padrão visual do ENADE VR (vri9.i9edu.com.br), pra unificar a
   identidade visual entre os sistemas da Cotemig. */
.cartao {
  background: var(--surface-vidro);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-vidro);
  padding: 24px 26px;
  margin-bottom: 20px;
}

/* Título/descrição padrão de cartão — extraído porque se repetia como
   `style="..."` inline em praticamente toda página do admin (cada relatório
   novo copiava o padrão da tela anterior). Manter aqui em vez de inline
   evita a mesma duplicação na próxima tela nova. */
.cartao-titulo {
  font-family: var(--font-display);
  font-weight: 600;
  margin-top: 0;
}

.cartao-titulo-lg {
  font-family: var(--font-display);
  font-weight: 600;
  margin-top: 0;
  font-size: 1.2rem;
}

.cartao-descricao {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.texto-suave {
  color: var(--ink-soft);
}

.dica-campo {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin: 4px 0 0;
}

.rotulo-secao-editor {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin: 18px 0 6px;
}

.campo {
  margin-bottom: 16px;
}

/* Linha de formulário com campos lado a lado (filtro de período + botão,
   nos relatórios e telas de geração) — mesmo motivo do bloco acima. */
.form-linha {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.campo label {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo textarea {
  width: 100%;
  padding: 14px 19px;
  border: 2px solid var(--border);
  border-radius: var(--raio-campo);
  font-size: 1rem;
  font-family: var(--font-body);
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
}
.campo textarea {
  resize: vertical;
  font-family: ui-monospace, monospace;
  font-size: 0.9rem;
}

.campo input:focus, .campo-editavel:focus, button:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
}

.botao-primario {
  background: var(--gradiente-primario);
  color: #fff;
  border: none;
  border-radius: var(--raio-campo);
  padding: 11px 22px;
  font-size: 0.95rem;
  font-weight: 600;
}
.botao-primario:hover { filter: brightness(1.06); }

.botao-secundario {
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  border: 2px solid var(--border);
  border-radius: var(--raio-campo);
  padding: 8px 16px;
  font-size: 0.85rem;
}

.botao-perigo {
  color: var(--danger);
  border-color: var(--danger-soft);
}

/* Botão só com ícone (sem texto) — pra ações repetidas em cada item de uma
   lista/grid (ex.: cards de disciplina no painel), onde escrever o rótulo
   por extenso em cada botão consome espaço demais. Sempre leva `title` +
   `aria-label` no HTML pra não perder a informação de texto. */
.botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  flex: 0 0 auto;
}
.botao-icone svg {
  width: 18px;
  height: 18px;
}

.acoes {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

.mensagem-status {
  display: none;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--raio-elemento);
  font-size: 0.9rem;
}
.mensagem-status.sucesso { background: var(--accent-soft); color: var(--accent-ink); display: block; }
.mensagem-status.erro { background: var(--danger-soft); color: var(--danger); display: block; }

.erro-login {
  background: var(--danger-soft);
  color: var(--danger);
  padding: 10px 14px;
  border-radius: var(--raio-elemento);
  margin-bottom: 16px;
  font-size: 0.9rem;
}

/* Dashboard */
.lista-disciplinas {
  display: grid;
  gap: 12px;
}
.item-disciplina {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--raio-elemento);
  background: var(--surface-raised);
  text-decoration: none;
  color: var(--ink);
}
.item-disciplina:hover { border-color: var(--accent); }
.item-disciplina .codigo { font-weight: 700; font-family: ui-monospace, monospace; color: var(--accent-ink); }
.item-disciplina .meta { font-size: 0.85rem; color: var(--ink-faint); }

.nova-disciplina {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.nova-disciplina input { flex: 1; }

/* Editor */
.cartao-questao {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  background: var(--surface-raised);
}
.cartao-questao-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.rotulo-campo {
  font-size: 0.8rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 12px 0 4px;
}
.barra-ferramentas {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.botao-ferramenta {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.botao-ferramenta:hover { border-color: var(--accent); color: var(--accent-ink); }

.campo-editavel {
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--surface);
  font-size: 0.95rem;
  line-height: 1.4;
}
.campo-editavel img { max-width: 100%; display: block; margin: 4px 0; }

.grade-alternativas { margin-top: 14px; display: grid; gap: 10px; }
.linha-alternativa { display: flex; gap: 10px; align-items: flex-start; }
.rotulo-alternativa {
  font-weight: 700;
  color: var(--accent-ink);
  min-width: 1.2em;
  padding-top: 8px;
}
.coluna-alternativa { flex: 1; }

.campo-gabarito {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.9rem;
}
.campo-gabarito select {
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  font-size: 0.95rem;
}

.checagem-discursiva {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 10px;
}

#iframe-preview {
  width: 100%;
  height: 420px;
  border: 1px solid var(--border);
  border-radius: var(--raio-campo);
  background: #fff;
}

/* Catálogo de disciplinas */
.tabela-wrap { overflow-x: auto; }
table.tabela-crud {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
table.tabela-crud th, table.tabela-crud td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.tabela-crud th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  font-weight: 600;
}
table.tabela-crud td.col-codigo {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  color: var(--accent-ink);
  white-space: nowrap;
}
table.tabela-crud td.col-acoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
table.tabela-crud input[type="text"] {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-size: 0.9rem;
  font-family: var(--font-body);
  background: var(--surface-raised);
  color: var(--ink);
}

/* Geração de provas em lote */
.barra-progresso {
  margin-top: 12px;
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.barra-progresso-preenchida {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* Equações importadas do Word — mesmo visual do PDF (_questao_estilos.html). */
.formula {
  font-style: normal;
}
.formula sup,
.formula sub {
  line-height: 0;
}
.fracao {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: 0.9em;
  margin: 0 0.1em;
  white-space: nowrap;
}
.fracao-num,
.fracao-den {
  display: block;
  padding: 0 0.15em;
  line-height: 1.2;
}
.fracao-num {
  border-bottom: 0.08em solid currentColor;
}
.indices {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.7em;
  line-height: 1.1;
  text-align: left;
  margin-left: 0.05em;
}
.indices > sup,
.indices > sub {
  display: block;
  font-size: 1em;
  line-height: 1.1;
  vertical-align: baseline;
}
.operador {
  font-size: 1.4em;
  vertical-align: middle;
  line-height: 1;
}
/* Trecho de código/SQL — mesmo visual do PDF (_questao_estilos.html). */
pre.codigo {
  font-family: "DejaVu Sans Mono", Menlo, Consolas, "Courier New", monospace;
  font-size: 0.85em;
  font-style: normal;
  font-weight: normal;
  line-height: 1.35;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  tab-size: 4;
  color: #1a1a1a;
  background: #f4f4f4;
  border-left: 3px solid #999;
  padding: 6px 10px;
  margin: 6px 0;
}
.radicando {
  border-top: 0.08em solid currentColor;
  padding-top: 0.05em;
}