/* ===================================================================
   Hub de Soluções — Vermeer
   Paleta e estilo alinhados aos portais (Inventário, GED, Miner).
   =================================================================== */

:root{
  --amarelo:    #FFC425;   /* amarelo oficial Vermeer */
  --amarelo-2:  #ffca3d;
  --verde:      #00703C;   /* verde oficial Vermeer */
  --verde-esc:  #00532f;
  --preto:      #000000;
  --painel:     #161615;
  --painel-2:   #1e1e1c;
  --borda:      #3a3a35;
  --texto:      #ffffff;
  --texto-mut:  #b8b8b1;
  --texto-mut2: #a6a69f;
  --erro:       #ff8080;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(1100px 520px at 88% -10%, rgba(255,196,37,.05), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 1px, transparent 1px 24px),
    var(--preto);
  background-attachment:fixed;
  color:var(--texto);
  min-height:100%;
  -webkit-font-smoothing:antialiased;
}

/* ============================ LOGIN ============================ */
body.tela-login{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--preto); color:#fff;
}
.caixa-login{ width:340px; max-width:90vw; text-align:center; padding:20px; }
.logo-login{ display:block; margin:0 auto 14px; width:220px; max-width:100%; }
.caixa-login .tagline{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-mut); margin-bottom:28px;
}
.caixa-login h1{ font-size:20px; letter-spacing:.16em; text-transform:uppercase; margin:0 0 6px; }
.caixa-login .sub{ font-size:12.5px; color:var(--texto-mut2); margin-bottom:24px; }
.caixa-login .campo{ margin-bottom:16px; text-align:left; }
.caixa-login .campo label{
  display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--texto-mut); margin-bottom:6px; font-weight:600;
}
.caixa-login .campo input{
  width:100%; padding:11px 12px; background:var(--painel-2); border:1px solid var(--borda);
  border-radius:4px; color:#fff; font-size:14px; font-family:inherit;
}
.caixa-login .campo input:focus{ outline:none; border-color:var(--amarelo); }
.caixa-login button{
  width:100%; margin-top:8px; padding:13px; background:var(--amarelo); color:var(--preto);
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:13px; border:none;
  cursor:pointer; font-family:inherit;
  clip-path:polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
.caixa-login button:hover{ background:var(--amarelo-2); }
.flash{ text-align:left; font-size:12.5px; margin-bottom:14px; padding:9px 12px; border-radius:4px; }
.flash.erro{ background:rgba(255,80,80,.12); color:var(--erro); border:1px solid rgba(255,80,80,.3); }
.flash.ok{ background:rgba(0,112,60,.15); color:#7fd4a3; border:1px solid rgba(0,112,60,.4); }

/* ============================ TOPO ============================ */
.topo{
  background:var(--preto); display:flex; align-items:stretch;
  min-height:52px; flex-wrap:wrap; border-bottom:1px solid #202019;
}
.topo .marca{
  background:var(--amarelo); color:var(--preto); font-weight:700; text-decoration:none;
  display:flex; align-items:center; gap:10px; padding:0 32px 0 18px;
  clip-path:polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}
.logo-topo{ height:26px; display:block; }
.topo .marca span{ font-size:14px; letter-spacing:.05em; text-transform:uppercase; }
.topo-dir{
  margin-left:auto; align-self:center; margin-right:16px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.topo-dir .usuario{
  color:var(--texto); font-size:12.5px; font-weight:600; letter-spacing:.04em;
  padding-right:4px; border-right:1px solid var(--borda); padding-right:16px;
}
.topo-dir a{
  color:var(--texto-mut); text-decoration:none; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase;
}
.topo-dir a:hover{ color:var(--amarelo); }
.topo-dir .sair{ border:1px solid var(--borda); padding:7px 14px; }
.topo-dir .sair:hover{ border-color:var(--amarelo); color:var(--amarelo); }

/* ============================ HUB ============================ */
.conteudo{ max-width:1180px; margin:0 auto; padding:38px 26px 70px; }
.cabecalho{ position:relative; margin-bottom:40px; padding-left:22px; }
.cabecalho::before{
  content:''; position:absolute; left:0; top:2px; bottom:2px; width:9px; background:var(--amarelo);
  clip-path:polygon(0 0, 100% 0, 100% 80%, 45% 100%, 0 100%);
}
.saudacao{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--amarelo);
  font-weight:700; margin-bottom:9px;
}
.cabecalho h1{ font-size:31px; letter-spacing:.01em; margin:0; }
.cabecalho p{ color:var(--texto-mut2); font-size:14.5px; margin:9px 0 0; }

.titulo-secao{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--texto-mut);
  margin:0 0 16px; display:flex; align-items:center; gap:12px;
}
.titulo-secao::before{ content:''; width:22px; height:3px; background:var(--amarelo); }

.grade{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill, minmax(285px, 1fr)); }

.card{
  position:relative; display:block; text-decoration:none; color:inherit;
  background:var(--painel); border:1px solid #262523; padding:24px 22px 20px;
  overflow:hidden; transition:transform .16s ease, border-color .16s ease;
}
.card::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--amarelo);
  transition:width .16s ease;
}
.card:hover{ transform:translateY(-4px); border-color:var(--amarelo); }
.card:hover::before{ width:7px; }
.card .icone{ color:var(--amarelo); margin-bottom:16px; }
.card .icone svg{ width:34px; height:34px; display:block; }
.card h3{ font-size:19px; letter-spacing:.03em; text-transform:uppercase; margin:0; }
.card p{ color:var(--texto-mut2); font-size:13.5px; margin:8px 0 0; line-height:1.45; }
.card .abrir{
  margin-top:16px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amarelo); font-weight:700;
}
.card .abrir::after{ content:'→'; display:inline-block; margin-left:6px; transition:transform .16s ease; }
.card:hover .abrir::after{ transform:translateX(4px); }

.card.breve{ opacity:.5; cursor:default; }
.card.breve::before{ background:var(--verde); }
.card.breve .icone{ color:var(--texto-mut); }
.card.breve:hover{ transform:none; border-color:#262523; }
.card.breve:hover::before{ width:4px; }
.badge{
  position:absolute; top:0; right:0; background:var(--verde); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 14px 5px 18px;
  clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%);
}

footer{
  margin-top:46px; padding-top:20px; border-top:1px solid #202019; color:var(--texto-mut2);
  font-size:12px; letter-spacing:.04em; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
}

/* flash no conteúdo (fora da tela de login) */
.conteudo .flash{ max-width:720px; margin:0 0 18px; }

/* ============================ FORMULÁRIOS / ADMIN ============================ */
.conteudo.estreito{ max-width:560px; }

.form-hub{
  background:var(--painel); border:1px solid #262523; padding:22px; margin-bottom:8px;
}
.form-hub .linha-form{
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); margin-bottom:16px;
}
.form-hub .campo{ margin-bottom:16px; }
.form-hub .linha-form .campo{ margin-bottom:0; }
.form-hub label{
  display:block; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--texto-mut); margin-bottom:6px; font-weight:600;
}
.form-hub input, .form-hub select{
  width:100%; padding:10px 12px; background:var(--painel-2); border:1px solid var(--borda);
  border-radius:4px; color:#fff; font-size:14px; font-family:inherit;
}
.form-hub input:focus, .form-hub select:focus{ outline:none; border-color:var(--amarelo); }
.form-hub .dica{ font-size:11.5px; color:var(--texto-mut2); margin-top:5px; }

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

/* botões */
button, .btn{
  display:inline-block; background:var(--amarelo); color:var(--preto); border:none;
  padding:11px 22px; font-family:inherit; font-size:12.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer; text-decoration:none;
  clip-path:polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
button:hover, .btn:hover{ background:var(--amarelo-2); }
.btn.secundario, button.secundario{
  background:transparent; color:var(--texto-mut); border:1px solid var(--borda); clip-path:none;
}
.btn.secundario:hover, button.secundario:hover{ border-color:var(--amarelo); color:var(--amarelo); background:transparent; }
.btn.perigo, button.perigo{ background:transparent; color:#ff8080; border:1px solid rgba(255,80,80,.4); clip-path:none; }
.btn.perigo:hover, button.perigo:hover{ background:rgba(255,80,80,.12); color:#ff8080; }
.btn.pequeno, button.pequeno{ padding:7px 12px; font-size:11px; letter-spacing:.06em; }

/* tabelas */
.tabela-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; background:var(--painel); border:1px solid #262523; }
th{
  text-align:left; padding:11px 14px; background:#111110; color:var(--texto-mut);
  font-size:11px; text-transform:uppercase; letter-spacing:.08em; border-bottom:2px solid var(--amarelo);
  white-space:nowrap;
}
td{ padding:11px 14px; border-bottom:1px solid #262523; font-size:14px; vertical-align:middle; }
tr:last-child td{ border-bottom:none; }
td .inline{ display:flex; gap:8px; align-items:center; margin:0; }
td select, td input{
  padding:7px 10px; background:var(--painel-2); border:1px solid var(--borda);
  border-radius:4px; color:#fff; font-size:13px; font-family:inherit;
}
td input[type=password]{ width:140px; }
.vazio{ color:var(--texto-mut2); text-align:center; padding:22px; }

/* checkboxes de acesso aos apps */
.apps-check{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.app-chip{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--texto);
  background:var(--painel-2); border:1px solid var(--borda); padding:7px 12px; cursor:pointer; }
.app-chip input{ width:15px; height:15px; accent-color:var(--amarelo); margin:0; }
.apps-linha{ gap:4px; flex-wrap:nowrap; align-items:center; }
.apps-linha .app-chip{ padding:4px 7px; gap:4px; }
.apps-linha .app-chip span{ font-size:14px; }

.barra-massa{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:12px; padding:10px 14px; background:var(--painel); border:1px solid #262523;
  border-bottom:none; margin-bottom:0;
}
.barra-massa-info{ font-size:12px; color:var(--texto-mut2); }
.barra-massa-acoes{ display:flex; gap:8px; align-items:center; }

.sub-email{ font-size:12px; color:var(--texto-mut2); margin-top:2px; }
.acoes-linha{ display:flex; gap:8px; align-items:center; }
.acoes-linha form{ margin:0; }

/* ============================ DOCUMENTAÇÃO ============================ */
.badge.restrito{ background:var(--amarelo); color:var(--preto); }
.link-doc{ color:var(--texto); text-decoration:none; }
.link-doc:hover{ color:var(--amarelo); }
.form-hub input[type=file]{ padding:8px 10px; cursor:pointer; }

/* ============================ AVALIAÇÕES ============================ */
.form-hub textarea{
  width:100%; padding:10px 12px; background:var(--painel-2); border:1px solid var(--borda);
  border-radius:4px; color:#fff; font-size:14px; font-family:inherit; resize:vertical;
}
.form-hub textarea:focus{ outline:none; border-color:var(--amarelo); }

/* etiquetas de status */
.tag{
  display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 9px; border-radius:3px;
  background:var(--painel-2); color:var(--texto-mut); border:1px solid var(--borda);
}
.tag.publicada,.tag.feito{ background:rgba(0,112,60,.18); color:#7fd4a3; border-color:rgba(0,112,60,.45); }
.tag.andamento{ background:rgba(255,196,37,.14); color:var(--amarelo); border-color:rgba(255,196,37,.4); }
.tag.errou{ background:rgba(255,80,80,.12); color:var(--erro); border-color:rgba(255,80,80,.3); }

/* cards de prova (respondente) */
.card-prova{
  position:relative; background:var(--painel); border:1px solid #262523; padding:22px 20px;
  display:flex; flex-direction:column; gap:10px;
}
.card-prova::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--amarelo); }
.card-prova h3{ font-size:17px; letter-spacing:.02em; text-transform:uppercase; margin:0; }
.card-prova p{ color:var(--texto-mut2); font-size:13.5px; margin:0; line-height:1.45; }
.prova-meta{ display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--texto-mut); margin-top:2px; }
.prova-rodape{ display:flex; align-items:center; gap:12px; margin-top:8px; flex-wrap:wrap; }

/* cronômetro no topo */
.cronometro{
  font-variant-numeric:tabular-nums; font-weight:700; font-size:14px; letter-spacing:.05em;
  background:var(--painel-2); border:1px solid var(--borda); padding:6px 12px; color:var(--amarelo);
}
.cronometro.urgente{ color:#fff; background:rgba(255,80,80,.2); border-color:rgba(255,80,80,.5); }
.aviso-tempo{
  background:rgba(255,196,37,.1); border:1px solid rgba(255,196,37,.3); color:var(--amarelo);
  font-size:13px; padding:10px 14px; margin-bottom:18px;
}

/* questões no editor */
.questao-edit{ background:var(--painel); border:1px solid #262523; padding:16px 18px; margin-bottom:12px; }
.questao-edit-topo{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.questao-edit-topo form{ margin:0; }
.q-num{
  display:inline-block; min-width:24px; height:24px; line-height:24px; text-align:center;
  background:var(--amarelo); color:var(--preto); font-weight:700; font-size:12px; margin-right:8px;
}
.q-peso{ font-size:11px; color:var(--texto-mut2); margin-left:6px; }
.alt-lista{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.alt-lista li{ font-size:13.5px; color:var(--texto-mut); padding:7px 11px; background:var(--painel-2); border:1px solid var(--borda); }
.alt-lista li.correta{ color:#7fd4a3; border-color:rgba(0,112,60,.45); background:rgba(0,112,60,.12); }
.alt-lista li.marcada-errada{ color:var(--erro); border-color:rgba(255,80,80,.35); background:rgba(255,80,80,.1); }
.alt-lista li.em-branco{ color:var(--texto-mut2); font-style:italic; }
.marca-resp{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; margin-left:8px; opacity:.8; }

/* alternativas no formulário de nova questão */
.alt-nova{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.alt-nova input[type=radio]{ width:18px; height:18px; accent-color:var(--amarelo); flex:none; }
.alt-nova input[type=text]{
  flex:1; padding:9px 12px; background:var(--painel-2); border:1px solid var(--borda);
  border-radius:4px; color:#fff; font-size:14px; font-family:inherit;
}
.alt-nova input[type=text]:focus{ outline:none; border-color:var(--amarelo); }

/* questões ao responder */
.questao-prova{ background:var(--painel); border:1px solid #262523; padding:18px 20px; margin-bottom:14px; }
.q-enunciado{ font-size:15px; line-height:1.5; margin-bottom:14px; }
.q-alts{ display:flex; flex-direction:column; gap:8px; }
.alt-opcao{
  display:flex; align-items:center; gap:11px; padding:11px 14px; cursor:pointer;
  background:var(--painel-2); border:1px solid var(--borda); font-size:14px;
}
.alt-opcao:hover{ border-color:var(--amarelo); }
.alt-opcao input[type=radio]{ width:18px; height:18px; accent-color:var(--amarelo); flex:none; margin:0; }
.alt-opcao:has(input:checked){ border-color:var(--amarelo); background:rgba(255,196,37,.08); }

/* painel de resultado */
.resultado-painel{
  display:flex; flex-wrap:wrap; gap:28px; align-items:center;
  background:var(--painel); border:1px solid #262523; border-left:5px solid var(--amarelo); padding:24px 26px;
}
.resultado-painel.aprovado{ border-left-color:var(--verde); }
.resultado-painel.reprovado{ border-left-color:#ff8080; }
.resultado-nota{ display:flex; flex-direction:column; align-items:center; min-width:120px; }
.nota-grande{ font-size:42px; font-weight:700; line-height:1; }
.nota-status{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-top:8px; color:var(--texto-mut); }
.resultado-painel.aprovado .nota-status{ color:#7fd4a3; }
.resultado-painel.reprovado .nota-status{ color:var(--erro); }
.resultado-dados{ display:flex; flex-wrap:wrap; gap:22px; }
.resultado-dados > div{ display:flex; flex-direction:column; gap:3px; }
.resultado-dados span{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-mut2); }
.resultado-dados strong{ font-size:15px; }