/* ERP ENEPE — estilos compartilhados por todas as telas.
   Azul institucional como cor principal, cinzas neutros, verde da marca so em destaques. */

:root {
  --azul: #003366;
  --azul-escuro: #002244;
  --azul-medio: #1f4f82;
  --azul-claro: #e8eff7;
  --azul-texto-menu: #b9cde3;
  --verde: #00db00;
  --verde-escuro: #0a8a1f;
  --verde-claro: #e9f9ec;
  --vermelho: #b42318;
  --vermelho-claro: #fdecea;
  --amarelo: #a15c07;
  --amarelo-claro: #fef6e4;

  --fundo: #f4f6f9;
  --superficie: #ffffff;
  --borda: #dfe4ea;
  --borda-forte: #c5cdd8;
  --texto: #1b2533;
  --texto-suave: #5a6677;
  --texto-fraco: #8a95a5;

  --fonte-titulo: "Merriweather", Georgia, "Times New Roman", serif;
  --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --raio: 8px;
  --sombra: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --sombra-alta: 0 20px 40px -12px rgba(16, 24, 40, 0.3);
  --largura-menu: 264px;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: var(--fonte-texto);
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--fonte-titulo); color: var(--azul); margin: 0; font-weight: 700; }
a { color: var(--azul-medio); }
:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: 2px; }
[hidden] { display: none !important; }

.icone { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Layout ---------- */

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

.menu-lateral {
  width: var(--largura-menu);
  background: var(--azul);
  color: #fff;
  position: fixed;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  z-index: 50;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.12);
}

.marca {
  position: relative;
  height: 104px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  flex-shrink: 0;
}
.marca[data-alinhamento="esquerda"] { justify-content: flex-start; }
.marca[data-alinhamento="centro"] { justify-content: center; }
.marca[data-alinhamento="direita"] { justify-content: flex-end; }
.marca img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; }
.marca[data-alinhamento="esquerda"] img { transform-origin: left center; }
.marca[data-alinhamento="direita"] img { transform-origin: right center; }

.nav { list-style: none; margin: 0; padding: 12px 10px; overflow-y: auto; flex: 1; }
.nav-modulo { margin-bottom: 2px; }

.nav-botao {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #e8eef6;
  font: 500 14px var(--fonte-texto);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.nav-botao:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-botao .seta { margin-left: auto; width: 14px; height: 14px; transition: transform 0.15s; opacity: 0.7; }
.nav-modulo.aberto > .nav-botao .seta { transform: rotate(180deg); }
.nav-modulo.ativo > .nav-botao { background: rgba(255, 255, 255, 0.12); color: #fff; font-weight: 600; }

.nav-telas { list-style: none; margin: 2px 0 6px; padding: 0 0 0 30px; display: none; }
.nav-modulo.aberto > .nav-telas { display: block; }

.nav-tela {
  display: block;
  padding: 6px 12px;
  border-radius: 5px;
  color: var(--azul-texto-menu);
  font-size: 13px;
  text-decoration: none;
  position: relative;
}
.nav-tela:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.nav-tela.ativa { color: #fff; background: rgba(255, 255, 255, 0.14); font-weight: 600; }
.nav-tela.ativa::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--verde);
}

.rodape-menu {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--azul-medio);
  border: 2px solid rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.usuario-info { min-width: 0; flex: 1; }
.usuario-nome { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-perfil { font-size: 11px; color: var(--azul-texto-menu); text-transform: capitalize; }
.rodape-menu .btn-icone { color: var(--azul-texto-menu); }
.rodape-menu .btn-icone:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }

.principal { margin-left: var(--largura-menu); flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cabecalho {
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  padding: 18px 32px;
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.trilha { font-size: 12px; color: var(--texto-suave); margin-bottom: 2px; }
.titulo-pagina { font-size: 22px; }
.acoes-pagina { display: flex; gap: 8px; flex-wrap: wrap; }

.conteudo { padding: 28px 32px 48px; flex: 1; }

.btn-icone.botao-menu-movel { display: none; }

/* ---------- Componentes ---------- */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px 22px;
}
.cartao + .cartao { margin-top: 20px; }
.cartao-titulo { font-size: 16px; margin-bottom: 4px; }
.cartao-subtitulo { color: var(--texto-suave); font-size: 13px; margin: 0 0 16px; }

.grade { display: grid; gap: 16px; }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.indicador { padding: 18px 20px; }
.indicador-rotulo { font-size: 12px; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.indicador-valor { font-family: var(--fonte-titulo); font-size: 28px; color: var(--azul); margin-top: 6px; }
.indicador-nota { font-size: 12px; color: var(--texto-fraco); margin-top: 2px; }
/* Cartões de resumo lado a lado: títulos alinhados no topo e números na mesma linha, mesmo com título em 2 linhas */
.cartoes-resumo .indicador { display: flex; flex-direction: column; justify-content: flex-start; }
.cartoes-resumo .indicador-valor { margin-top: auto; padding-top: 6px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 6px;
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  color: var(--texto);
  font: 600 13px var(--fonte-texto);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.btn:hover { background: #f3f5f8; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-escuro); }
.btn-perigo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.btn-perigo:hover { background: #8f1c13; }
.btn-fantasma { border-color: transparent; background: transparent; }
.btn-fantasma:hover { background: var(--azul-claro); }
.btn-pequeno { padding: 5px 10px; font-size: 12px; }
.btn.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn-icone {
  border: 0;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  color: var(--texto-suave);
}
.btn-icone:hover { background: var(--azul-claro); color: var(--azul); }

.grupo-botoes { display: inline-flex; }
.grupo-botoes .btn { border-radius: 0; margin-left: -1px; }
.grupo-botoes .btn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.grupo-botoes .btn:last-child { border-radius: 0 6px 6px 0; }

/* Formularios */
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--texto); }
.campo .obrigatorio { color: var(--vermelho); }
.campo .ajuda { font-size: 12px; color: var(--texto-fraco); }
.entrada, .campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 9px 11px;
  font: 14px var(--fonte-texto);
  color: var(--texto);
  background: #fff;
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--azul-medio);
  box-shadow: 0 0 0 3px rgba(31, 79, 130, 0.15);
}
.campo.com-erro input, .campo.com-erro select, .campo.com-erro textarea, .entrada.com-erro { border-color: var(--vermelho); }
.erro-campo { font-size: 12px; color: var(--vermelho); }

.alerta {
  padding: 11px 14px;
  border-radius: 6px;
  font-size: 13px;
  border: 1px solid transparent;
  margin-bottom: 14px;
}
.alerta-erro { background: var(--vermelho-claro); color: var(--vermelho); border-color: #f5c2bd; }
.alerta-info { background: var(--azul-claro); color: var(--azul); border-color: #c9d9ea; }
.alerta-aviso { background: var(--amarelo-claro); color: var(--amarelo); border-color: #f4dfb0; }

/* Tabelas */
.tabela-caixa { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th {
  text-align: left;
  background: #f7f9fb;
  color: var(--texto-suave);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
.tabela td { padding: 11px 14px; border-bottom: 1px solid #eef1f4; vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: #fafbfd; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Selos de status */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: #eef1f4;
  color: var(--texto-suave);
}
.selo-azul { background: var(--azul-claro); color: var(--azul-medio); }
.selo-verde { background: var(--verde-claro); color: var(--verde-escuro); }
.selo-amarelo { background: var(--amarelo-claro); color: var(--amarelo); }
.selo-vermelho { background: var(--vermelho-claro); color: var(--vermelho); }
.selo-laranja { background: #fdeee2; color: #b4530a; }
.selo-marinho { background: #dfe7f1; color: var(--azul); }
.selo-petroleo { background: #e1f0f3; color: #0e5e6f; }

/* Estado vazio / em construcao */
.vazio { text-align: center; padding: 56px 24px; color: var(--texto-suave); }
.vazio .icone-grande { width: 56px; height: 56px; color: var(--azul-medio); opacity: 0.6; margin-bottom: 14px; }
.vazio h2 { font-size: 20px; margin-bottom: 8px; }
.vazio p { max-width: 560px; margin: 0 auto; }
.lista-prevista { text-align: left; max-width: 560px; margin: 18px auto 0; padding-left: 20px; color: var(--texto); }
.lista-prevista li { margin-bottom: 4px; }

.carregando { padding: 40px; text-align: center; color: var(--texto-suave); }

/* Modal (elemento <dialog>) */
dialog.modal {
  border: 0;
  padding: 0;
  border-radius: 10px;
  box-shadow: var(--sombra-alta);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  color: var(--texto);
}
dialog.modal.largo { width: min(860px, calc(100vw - 32px)); }
dialog.modal.extra-largo { width: min(1320px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgba(10, 22, 40, 0.55); backdrop-filter: blur(2px); }
.modal-cabecalho { background: var(--azul); color: #fff; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-cabecalho h2 { color: #fff; font-size: 17px; }
.modal-cabecalho .subtitulo { font-size: 12px; color: var(--azul-texto-menu); margin-top: 2px; }
.modal-cabecalho .btn-icone { color: #fff; }
.modal-cabecalho .btn-icone:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.modal-corpo { padding: 20px; overflow-y: auto; max-height: calc(100vh - 200px); }
.modal-rodape { padding: 14px 20px; border-top: 1px solid var(--borda); display: flex; justify-content: flex-end; gap: 8px; background: #fafbfc; }

/* Avisos rapidos */
.avisos { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.aviso {
  min-width: 260px;
  max-width: 420px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--azul-escuro);
  color: #fff;
  box-shadow: var(--sombra-alta);
  font-size: 13px;
  border-left: 4px solid var(--verde);
  animation: entrar 0.18s ease-out;
}
.aviso.erro { border-left-color: #ff6b5e; }
.aviso.atencao { border-left-color: #f0a33a; }
@keyframes entrar { from { transform: translateY(8px); opacity: 0; } }

/* Editor de logomarca */
.previa-marca { background: var(--azul); border-radius: 8px; height: 104px; padding: 14px 18px; display: flex; align-items: center; overflow: hidden; margin-bottom: 16px; }
.previa-marca[data-alinhamento="esquerda"] { justify-content: flex-start; }
.previa-marca[data-alinhamento="centro"] { justify-content: center; }
.previa-marca[data-alinhamento="direita"] { justify-content: flex-end; }
.previa-marca img { max-width: 100%; max-height: 100%; object-fit: contain; }
.linha-controles { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.linha-controles input[type="range"] { flex: 1; min-width: 160px; accent-color: var(--azul); }

/* Login */
.pagina-login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr); }
.login-lado {
  background: radial-gradient(circle at 20% 15%, var(--azul-medio) 0%, var(--azul) 45%, var(--azul-escuro) 100%);
  color: #fff;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.login-lado img { width: min(340px, 80%); }
.login-lado h1 { color: #fff; font-size: 30px; line-height: 1.3; max-width: 460px; }
.login-lado p { color: var(--azul-texto-menu); max-width: 440px; }
.login-lado .faixa { width: 64px; height: 4px; background: var(--verde); border-radius: 2px; margin: 18px 0; }
.login-form-area { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--superficie); }
.login-form { width: 100%; max-width: 360px; }
.login-form h2 { font-size: 24px; margin-bottom: 6px; }
.login-form .sub { color: var(--texto-suave); margin: 0 0 24px; }
.login-form .btn { width: 100%; padding: 11px; font-size: 14px; margin-top: 6px; }
.rodape-login { font-size: 12px; color: var(--azul-texto-menu); }


/* Barra de filtros */
.barra-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.barra-filtros .busca { flex: 1; min-width: 220px; max-width: 380px; }
.rotulo-filtro { font-size: 12px; font-weight: 600; color: var(--texto-suave); margin-right: 4px; }
.linha-clicavel { cursor: pointer; }
.link-forte { color: var(--azul); font-weight: 600; text-decoration: none; }
.link-forte:hover { text-decoration: underline; }
.texto-suave { color: var(--texto-suave); }
.texto-pequeno { font-size: 12px; }

/* Abas (modais) */
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--borda); margin: -20px -20px 20px; padding: 0 16px; background: #f7f9fb; overflow-x: auto; }
.aba { border: 0; background: transparent; padding: 12px 14px; font: 600 13px var(--fonte-texto); color: var(--texto-suave); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
.aba:hover { color: var(--azul); }
.aba.ativa { color: var(--azul); border-bottom-color: var(--azul); }
.aba:disabled { opacity: 0.4; cursor: not-allowed; }
.aba .contador { margin-left: 6px; font-size: 11px; background: var(--vermelho); color: #fff; border-radius: 999px; padding: 1px 6px; }

/* Formulário em grade */
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }
.campo-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 14px; }
.campo-check input { width: 16px; height: 16px; accent-color: var(--azul); }
.secao-titulo { font-family: var(--fonte-titulo); color: var(--azul); font-size: 15px; margin: 4px 0 4px; }
.secao-ajuda { color: var(--texto-suave); font-size: 13px; margin: 0 0 14px; }

/* Editor da estrutura da prova */
.editor-questoes { border: 1px solid var(--borda); border-radius: 8px; padding: 12px 14px; background: #fafbfd; }
.editor-questoes .topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.editor-questoes .topo input { width: 70px; }
.editor-questoes .total { margin-left: auto; font-weight: 700; font-size: 13px; }
.editor-questoes .total.ok { color: var(--verde-escuro); }
.editor-questoes .total.erro { color: var(--vermelho); }
.questoes-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 12px; }
.questoes-grade label { font-size: 11px; font-weight: 600; color: var(--texto-suave); display: block; margin-bottom: 2px; }
.questoes-grade input { padding: 6px 8px; }

/* Disciplinas */
.disciplina-item { border: 1px solid var(--borda); border-radius: 8px; padding: 14px; margin-bottom: 12px; background: #fff; }
.disciplina-cabecalho { display: flex; gap: 12px; align-items: flex-start; }
.disciplina-cabecalho .campo { margin-bottom: 10px; }
.disciplina-numero { width: 26px; height: 26px; border-radius: 50%; background: var(--azul-claro); color: var(--azul); font-weight: 700; font-size: 12px; display: grid; place-items: center; margin-top: 28px; flex-shrink: 0; }
.disciplina-acoes { display: flex; gap: 2px; margin-top: 26px; }

/* Material */
.material-grupo { border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 14px; overflow: hidden; }
.material-grupo h4 { margin: 0; padding: 10px 14px; background: #f7f9fb; border-bottom: 1px solid var(--borda); font-size: 13px; color: var(--azul); display: flex; align-items: center; gap: 8px; }
.material-item { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #eef1f4; }
.material-item:last-child { border-bottom: 0; }
.material-tipo { font-weight: 600; font-size: 13px; }
.material-arquivo a { font-weight: 600; color: var(--azul-medio); text-decoration: none; word-break: break-all; }
.material-arquivo a:hover { text-decoration: underline; }
.material-historico { grid-column: 2 / -1; font-size: 12px; }
.material-historico summary { cursor: pointer; color: var(--texto-suave); }
.material-historico ul { margin: 6px 0 0; padding-left: 18px; }
.entrada-arquivo { display: none; }
@media (max-width: 640px) { .material-item { grid-template-columns: 1fr; } .material-historico { grid-column: 1; } }

/* Rodapé de modal com botão à esquerda (ex.: Excluir) */
.modal-rodape .a-esquerda { margin-right: auto; }
.btn-perigo-suave { color: var(--vermelho); border-color: #f0c4bf; }
.btn-perigo-suave:hover { background: var(--vermelho-claro); }

/* Cartões-resumo clicáveis (filtram a lista) */
.cartoes-resumo { margin-bottom: 20px; }
.cartoes-resumo .cartao { margin: 0; }
.cartao-filtro { text-align: left; cursor: pointer; font: inherit; color: inherit; border: 1px solid var(--borda); transition: border-color 0.12s, box-shadow 0.12s; }
.cartao-filtro:hover { border-color: var(--borda-forte); }
.cartao-filtro.ativo { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
/* Cartões por tipo de curso: mesmas cores dos selos (Profissionalizante azul-claro, Técnico azul-petróleo) */
.cartao-profissionalizante { background: var(--azul-claro); border-color: #c9d9ea; }
.cartao-profissionalizante .indicador-rotulo, .cartao-profissionalizante .indicador-valor { color: var(--azul-medio); }
.cartao-profissionalizante:hover { border-color: var(--azul-medio); }
.cartao-profissionalizante.ativo { border-color: var(--azul-medio); box-shadow: 0 0 0 1px var(--azul-medio); }
.cartao-tecnico { background: #e1f0f3; border-color: #bcdce3; }
.cartao-tecnico .indicador-rotulo, .cartao-tecnico .indicador-valor { color: #0e5e6f; }
.cartao-tecnico:hover { border-color: #0e5e6f; }
.cartao-tecnico.ativo { border-color: #0e5e6f; box-shadow: 0 0 0 1px #0e5e6f; }

/* Alternador (toggle) */
.alternador { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; font-weight: 600; user-select: none; }
.alternador input { appearance: none; -webkit-appearance: none; margin: 0; width: 42px; height: 24px; border-radius: 999px; background: #b8c1cc; position: relative; cursor: pointer; transition: background 0.15s; flex-shrink: 0; }
.alternador input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.alternador input:checked { background: #1e9e3e; }
.alternador input:checked::after { transform: translateX(18px); }
.alternador input:disabled { opacity: 0.6; cursor: default; }

/* Campo com prefixo (R$) */
.com-prefixo { display: flex; align-items: stretch; }
.com-prefixo span { display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--borda-forte); border-right: 0; border-radius: 6px 0 0 6px; background: #f3f5f8; color: var(--texto-suave); font-size: 13px; }
.com-prefixo input { border-radius: 0 6px 6px 0 !important; text-align: right; }

/* Ficha (modo visualização) */
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; margin: 0; }
.ficha div { min-width: 0; }
.ficha dt { font-size: 11.5px; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
.ficha dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.ficha .largo { grid-column: 1 / -1; }
.cabecalho-aba { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 16px; }
.cabecalho-aba h3 { font-size: 15px; }
.pendente { font-size: 12px; color: var(--azul-medio); font-weight: 600; }

/* Abas da página (ex.: Cursos | Materiais) */
.abas-pagina { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin: -8px 0 22px; }
.abas-pagina .aba { font-size: 14px; padding: 10px 16px; }

/* Aba Materiais */
.tabela-materiais { table-layout: fixed; min-width: 900px; }
.tabela-materiais td { vertical-align: middle; }
.linha-curso-tecnico { cursor: pointer; }
.linha-curso-tecnico td { background: #f7f9fb; }
.linha-curso-tecnico:hover td { background: #eef3f8; }
.seta-expandir { width: 15px; height: 15px; transition: transform 0.15s; }
.linha-curso-tecnico.aberto .seta-expandir { transform: rotate(180deg); }
.linha-disciplina td:first-child { padding-left: 40px; }
.tipo-abaixo { display: flex; width: fit-content; align-items: center; gap: 4px; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--texto-fraco); letter-spacing: 0.02em; }
.celula-material { display: flex; align-items: center; gap: 2px; min-width: 0; }
.arquivo-link { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1; color: var(--azul-medio); font-weight: 600; text-decoration: none; font-size: 13px; }
.arquivo-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arquivo-link:hover span { text-decoration: underline; }
.arquivo-link .icone { width: 16px; height: 16px; }
.celula-material .btn-icone { width: 28px; height: 28px; flex-shrink: 0; }
.celula-material .btn-icone .icone { width: 15px; height: 15px; }
.celula-material .btn-remover:hover { background: var(--vermelho-claro); color: var(--vermelho); }
.material-arquivo a .icone { width: 15px; height: 15px; vertical-align: -2px; }

/* Tela Alunos */
.barra-filtros select.entrada { width: auto; min-width: 170px; max-width: 240px; padding-right: 28px; text-overflow: ellipsis; }
.celula-cortada { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td > .arquivo-link { max-width: 100%; }
/* Título de coluna ordenável: clique ordena; a seta mostra a coluna e a direção atuais */
.th-ordenavel button { all: unset; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.th-ordenavel button:hover { color: var(--texto); }
.th-ordenavel button:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: 2px; border-radius: 2px; }
.th-ordenavel .seta-ordem { width: 13px; height: 13px; opacity: 0; transform: rotate(180deg); transition: transform 0.15s; }
.th-ordenavel button:hover .seta-ordem { opacity: 0.4; }
.th-ordenavel.ativa { color: var(--azul); }
.th-ordenavel.ativa .seta-ordem { opacity: 1; }
.th-ordenavel.desc .seta-ordem { transform: none; }
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--texto-suave); font-size: 13px; }
.secao-ficha { margin-bottom: 22px; }
.secao-ficha:last-child { margin-bottom: 0; }
.subtitulo-secao { font-size: 12px; font-weight: 700; color: var(--azul); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--borda); }
.nota-ok { color: var(--verde-escuro); font-weight: 700; }
.nota-baixa { color: var(--vermelho); font-weight: 700; }
.disciplina-provas { margin-bottom: 14px; }
.disciplina-provas h5 { margin: 0 0 6px; font-size: 13px; color: var(--texto); }

/* ---------- Responsivo ---------- */

@media (max-width: 1100px) {
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .menu-lateral { transform: translateX(-100%); transition: transform 0.2s; }
  .app.menu-aberto .menu-lateral { transform: none; }
  .principal { margin-left: 0; }
  .btn-icone.botao-menu-movel { display: inline-grid; }
  .cabecalho { padding: 14px 16px; }
  .conteudo { padding: 20px 16px 40px; }
  .grade-2, .grade-3, .grade-4 { grid-template-columns: minmax(0, 1fr); }
  .pagina-login { grid-template-columns: 1fr; }
  .login-lado { padding: 32px 24px; gap: 24px; }
}

/* Tela Provas e Notas */
.cartao-laranja { background: #fdeee2; border-color: #f3cfb2; }
.cartao-laranja .indicador-rotulo, .cartao-laranja .indicador-valor { color: #b4530a; }
.cartao-laranja:hover, .cartao-laranja.ativo { border-color: #b4530a; }
.cartao-laranja.ativo { box-shadow: 0 0 0 1px #b4530a; }
.cartao-vermelho { background: var(--vermelho-claro); border-color: #f5c2bd; }
.cartao-vermelho .indicador-rotulo, .cartao-vermelho .indicador-valor { color: var(--vermelho); }
.cartao-vermelho:hover, .cartao-vermelho.ativo { border-color: var(--vermelho); }
.cartao-vermelho.ativo { box-shadow: 0 0 0 1px var(--vermelho); }
.contador-aba { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #fdeee2; color: #b4530a; font-size: 11.5px; font-weight: 700; text-align: center; }
.correcao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.correcao-painel { display: flex; flex-direction: column; min-width: 0; }
.correcao-painel h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--azul); text-transform: uppercase; letter-spacing: 0.06em; }
.visualizador { height: 58vh; min-height: 320px; border: 1px solid var(--borda); border-radius: var(--raio); background: #f2f4f7; overflow: auto; }
.visualizador iframe { width: 100%; height: 100%; border: 0; display: block; }
.visualizador img { display: block; max-width: 100%; margin: 0 auto; }
.visualizador .vazio { padding: 80px 24px; }
.paginas-prova { display: flex; gap: 4px; flex-wrap: wrap; }
.info-prova { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 14px; font-size: 13px; color: var(--texto-suave); }
.info-prova strong { color: var(--texto); font-weight: 600; }
.lancamento { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borda); }
.lancamento .campo { margin: 0; }
.lancamento .campo-nota input { width: 110px; font-size: 18px; font-weight: 700; text-align: center; }
.lancamento .campo-justificativa { flex: 1; min-width: 260px; }
.nota-grande { font-family: var(--fonte-titulo); font-size: 26px; line-height: 1; }
.resultados-aluno { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 260px; overflow-y: auto; }
.resultado-aluno { all: unset; box-sizing: border-box; display: block; padding: 8px 12px; border: 1px solid var(--borda); border-radius: var(--raio); cursor: pointer; }
.resultado-aluno:hover { border-color: var(--borda-forte); }
.resultado-aluno.ativo { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); background: var(--azul-claro); }
.resultado-aluno strong { display: block; font-size: 13.5px; color: var(--azul); }
.ranking { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--azul-claro); color: var(--azul); font-size: 12px; font-weight: 700; }
@media (max-width: 900px) { .correcao { grid-template-columns: minmax(0, 1fr); } }

/* Visualizador próprio (PDF.js): barra enxuta e páginas em sequência */
.visualizador-proprio { display: flex; flex-direction: column; height: 62vh; min-height: 340px; border: 1px solid var(--borda); border-radius: var(--raio); background: #eef1f5; overflow: hidden; }
.barra-visualizador { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 8px; background: #fff; border-bottom: 1px solid var(--borda); font-size: 12.5px; color: var(--texto-suave); }
.barra-visualizador .btn-icone { width: 30px; height: 30px; }
.barra-visualizador .btn-icone .icone { width: 16px; height: 16px; }
.barra-visualizador .zoom { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.barra-visualizador .paginas { min-width: 50px; text-align: center; font-variant-numeric: tabular-nums; }
.barra-visualizador .separador { width: 1px; height: 18px; background: var(--borda); margin: 0 6px; }
.paginas-visualizador { flex: 1; overflow: auto; padding: 12px; }
.pagina-visualizador { width: fit-content; margin: 0 auto 12px; box-shadow: 0 1px 4px rgba(16, 24, 40, 0.18); background: #fff; }
.pagina-visualizador canvas { display: block; }

/* Correção sugerida pela IA */
.painel-correcao { display: flex; flex-direction: column; height: 62vh; min-height: 340px; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: #fff; }
.painel-correcao .topo-correcao { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--borda); background: #f7f9fb; }
.painel-correcao .lista-questoes { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.painel-correcao .aviso-painel { padding: 24px; text-align: center; color: var(--texto-suave); }
.questao { border: 1px solid; border-left-width: 4px; border-radius: var(--raio); padding: 8px 12px; font-size: 13px; }
.questao.certa { border-color: #b7e4c3; border-left-color: var(--verde-escuro); background: #f1faf3; }
.questao.errada { border-color: #f5c2bd; border-left-color: var(--vermelho); background: #fdf3f2; }
.questao .cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; margin-bottom: 4px; }
.questao.certa .cabeca { color: var(--verde-escuro); }
.questao.errada .cabeca { color: var(--vermelho); }
.questao dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 0; }
.questao dt { color: var(--texto-suave); }
.questao dd { margin: 0; overflow-wrap: anywhere; }
.questao .erro-questao { margin-top: 4px; color: var(--vermelho); }
.questao textarea { width: 100%; margin-top: 6px; min-height: 52px; font: inherit; padding: 6px 8px; border: 1px solid var(--borda-forte); border-radius: 6px; }
.alternar-questao { display: inline-flex; gap: 4px; }
.alternar-questao button { font-size: 12px; padding: 2px 10px; }
.alternar-questao .ativo-certa { background: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; }
.alternar-questao .ativo-errada { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.nota-sugerida { display: flex; align-items: baseline; gap: 10px; }
.nota-sugerida .rotulo { font-size: 11.5px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.nota-sugerida input { width: 90px; font-size: 20px; font-weight: 700; text-align: center; padding: 4px; }
.aluno-escolhido { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--azul); border-radius: var(--raio); background: var(--azul-claro); }
.aluno-escolhido strong { display: block; color: var(--azul); }
.girando { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--borda-forte); border-top-color: var(--azul); border-radius: 50%; animation: girar 0.8s linear infinite; vertical-align: -4px; margin-right: 8px; }
@keyframes girar { to { transform: rotate(360deg); } }