:root {
  --meta: #0064E0;
  --meta-hover: #0143B5;
  --canvas: #FFFFFF;
  --soft: #F1F4F7;
  --flat: #F7F8FA;
  --baby: #E8F3FF;
  --ink: #1C2B33;
  --ink-2: #5D6C7B;
  --ink-3: #65676B;
  --div: #CED0D4;
  --div-soft: #DEE3E9;
  --ok: #31A24C;
  --erro: #E41E3F;
  --warn: #F7B928;
  --pill: 100px;
  --card: 20px;
  --feature: 24px;
  --sh1: 0 2px 4px 0 rgba(0,0,0,.1);
  --sh2: 0 12px 28px 0 rgba(0,0,0,.12), 0 2px 4px 0 rgba(0,0,0,.1);
  --ease: cubic-bezier(.4,0,.2,1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'DM Sans', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--soft);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.5;
}
.tabular { font-variant-numeric: tabular-nums; }

[hidden] { display: none !important; }

/* ---------- login ---------- */
.login-wrap {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; padding: 24px;
  background:
    radial-gradient(60% 60% at 15% 10%, rgba(0,100,224,.10), transparent 60%),
    radial-gradient(50% 50% at 90% 90%, rgba(42,48,113,.10), transparent 60%),
    var(--soft);
}
.login-card {
  width: 100%; max-width: 400px;
  background: var(--canvas);
  border: 1px solid var(--div-soft);
  border-radius: var(--feature);
  box-shadow: var(--sh2);
  padding: 36px 32px 30px;
  display: flex; flex-direction: column;
}
.login-logo { width: 150px; height: auto; align-self: center; margin-bottom: 22px; }
.login-card h1 { font-size: 24px; font-weight: 700; margin: 0; text-align: center; letter-spacing: -.3px; }
.login-sub { margin: 6px 0 24px; text-align: center; color: var(--ink-3); font-size: 14px; }
.login-card label { font-size: 13px; font-weight: 600; color: #4B4C4F; margin-bottom: 6px; }
.login-card input {
  font: inherit; font-size: 16px; padding: 12px 14px; margin-bottom: 16px;
  border: 1px solid var(--div); border-radius: 12px; background: var(--canvas); color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.login-card input:focus { outline: none; border-color: var(--meta); box-shadow: 0 0 0 3px rgba(0,100,224,.18); }
.login-rodape { color: var(--ink-3); font-size: 12px; text-align: center; }

.btn-primary {
  font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
  background: var(--meta); color: #fff; border: 0; border-radius: var(--pill);
  padding: 12px 22px; margin-top: 6px;
  transition: background .2s var(--ease), transform .1s var(--ease);
}
.btn-primary:hover { background: var(--meta-hover); }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { background: #8595A4; cursor: default; }
.btn-ghost {
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  background: transparent; color: var(--ink-2); border: 1px solid var(--div-soft);
  border-radius: var(--pill); padding: 7px 14px;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-ghost:hover { background: var(--baby); color: var(--meta); border-color: var(--baby); }
.erro { color: var(--erro); font-size: 14px; min-height: 20px; margin: 12px 0 0; text-align: center; }

/* ---------- topo ---------- */
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 24px;
  background: var(--canvas);
  border-bottom: 1px solid var(--div-soft);
}
.topo-esq { display: flex; align-items: center; gap: 22px; min-width: 0; }
.topo-dir { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topo-logo { width: 190px; height: auto; flex-shrink: 0; }
.quem { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
/* As logos tem proporcoes diferentes, entao a altura manda e a largura acompanha. */
.logo-candidato {
  height: 62px; width: auto; max-width: 210px; object-fit: contain; flex-shrink: 0;
  padding-right: 18px; margin-right: 4px; border-right: 1px solid var(--div-soft);
}

.candidatos { display: flex; gap: 8px; flex-wrap: wrap; }
.cand {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--div-soft); background: var(--flat); color: var(--ink-2);
  border-radius: var(--pill); padding: 8px 18px;
  display: flex; align-items: center; gap: 8px;
  transition: all .2s var(--ease);
}
.cand:hover { border-color: var(--cor, var(--meta)); color: var(--cor, var(--meta)); }
.cand[aria-selected="true"] {
  background: var(--cor, var(--meta)); border-color: var(--cor, var(--meta)); color: #fff;
  box-shadow: var(--sh1);
}
.cand .num { font-size: 12px; opacity: .75; font-variant-numeric: tabular-nums; }
.cand-unico {
  font-size: 15px; font-weight: 700; color: var(--cor, var(--meta));
  display: flex; align-items: center; gap: 8px;
}
.cand-unico .num { font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
.tab-scroll { overflow-x: auto; }
.quais-cand {
  border: 1px solid var(--div-soft); border-radius: 12px; padding: 12px 14px; margin: 0;
  display: flex; gap: 18px; flex-wrap: wrap;
}
.quais-cand legend { font-size: 12px; color: var(--ink-3); padding: 0 6px; }
.quais-cand label { display: flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.quais-cand input { width: 17px; height: 17px; accent-color: var(--meta); cursor: pointer; }

/* Topo e abas grudam juntos: com top fixo em px as abas cobriam o texto
   quando a barra crescia ou o navegador estava com zoom. */
.cabecalho { position: sticky; top: 0; z-index: 30; background: var(--canvas); }
.abas {
  display: flex; gap: 4px; padding: 0 24px;
  background: var(--canvas); border-bottom: 1px solid var(--div-soft); overflow-x: auto;
}
.aba {
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--ink-2);
  padding: 12px 16px; transition: color .2s var(--ease), border-color .2s var(--ease);
}
.aba:hover { color: var(--cor, var(--meta)); }
.aba[aria-selected="true"] { color: var(--cor, var(--meta)); border-bottom-color: var(--cor, var(--meta)); font-weight: 600; }

/* ---------- conteudo ---------- */
/* Folga generosa no fim: sem ela a ultima linha do documento encosta na borda e some. */
.conteudo { padding: 28px 24px 120px; max-width: 1120px; margin: 0 auto; }
.conteudo:focus { outline: none; }
.carregando { color: var(--ink-3); padding: 40px 0; text-align: center; }
.carregando::after { content: '.'; animation: pontos 1.2s steps(4, end) infinite; }
@keyframes pontos { 0% { content: '.'; } 33% { content: '..'; } 66% { content: '...'; } }

/* documento (plano e calendario) */
.doc {
  background: var(--canvas); border: 1px solid var(--div-soft); border-radius: var(--card);
  padding: 44px 52px 56px; box-shadow: var(--sh1); overflow-wrap: break-word;
}
.doc > *:last-child { margin-bottom: 0; }
.doc h1 {
  font-size: 34px; font-weight: 700; line-height: 1.2; letter-spacing: -.5px;
  margin: 0 0 28px; padding-bottom: 18px; border-bottom: 3px solid var(--cor, var(--meta));
}
.doc h2 {
  font-size: 23px; font-weight: 700; line-height: 1.25; margin: 44px 0 16px;
  color: var(--cor, var(--meta)); letter-spacing: -.2px;
}
.doc h3 { font-size: 18px; font-weight: 700; margin: 30px 0 10px; }
.doc h4 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; color: var(--ink-2); }
.doc p { margin: 0 0 14px; line-height: 1.65; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin-bottom: 7px; line-height: 1.6; }
.doc strong { font-weight: 700; }
.doc em { color: var(--ink-2); }
.doc blockquote {
  margin: 18px 0; padding: 14px 20px;
  background: var(--flat); border-left: 4px solid var(--cor, var(--meta)); border-radius: 0 12px 12px 0;
  color: var(--ink-2); font-style: italic;
}
.doc blockquote p { margin: 0; }
.doc hr { border: 0; border-top: 1px solid var(--div-soft); margin: 34px 0; }
.doc-tabela { overflow-x: auto; margin: 0 0 18px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.doc th {
  text-align: left; font-weight: 700; color: #4B4C4F; padding: 11px 12px;
  border-bottom: 2px solid var(--div); background: var(--flat); font-size: 13px;
}
.doc td { padding: 11px 12px; border-bottom: 1px solid var(--div-soft); vertical-align: top; }
.doc tbody tr:hover { background: var(--flat); }

/* conteudo em blocos */
.barra-filtros {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--canvas); border: 1px solid var(--div-soft); border-radius: var(--card);
  padding: 14px 18px; margin-bottom: 20px; box-shadow: var(--sh1);
}
.barra-filtros input[type="search"] {
  font: inherit; font-size: 15px; padding: 9px 14px; min-width: 220px; flex: 1 1 220px;
  border: 1px solid var(--div); border-radius: var(--pill); background: var(--canvas); color: var(--ink);
}
.barra-filtros input[type="search"]:focus { outline: none; border-color: var(--cor, var(--meta)); }
.chip {
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--div-soft); background: var(--flat); color: var(--ink-2);
  border-radius: var(--pill); padding: 7px 14px; transition: all .2s var(--ease);
}
.chip:hover { border-color: var(--cor, var(--meta)); color: var(--cor, var(--meta)); }
.chip[aria-pressed="true"] { background: var(--cor, var(--meta)); border-color: var(--cor, var(--meta)); color: #fff; }
.contador { font-size: 13px; color: var(--ink-3); margin-left: auto; font-variant-numeric: tabular-nums; }

.bloco {
  background: var(--canvas); border: 1px solid var(--div-soft); border-radius: var(--card);
  padding: 22px 24px; margin-bottom: 14px; box-shadow: var(--sh1);
  transition: box-shadow .3s var(--ease), border-color .2s var(--ease);
}
.bloco:hover { box-shadow: var(--sh2); }
.bloco.aprovado { border-left: 4px solid var(--ok); }
.bloco-topo { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bloco-num {
  flex-shrink: 0; font-weight: 700; font-size: 13px; color: #fff;
  background: var(--cor, var(--meta)); border-radius: var(--pill); padding: 4px 12px;
  font-variant-numeric: tabular-nums;
}
.bloco-data { flex-shrink: 0; font-size: 13px; color: var(--ink-3); padding-top: 5px; font-variant-numeric: tabular-nums; }
.bloco-titulo { font-size: 17px; font-weight: 700; line-height: 1.35; flex: 1 1 240px; min-width: 0; margin: 0; padding-top: 2px; }
.bloco-fase { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.bloco-corpo { font-size: 15px; line-height: 1.62; white-space: pre-wrap; color: var(--ink); }
.bloco-corpo strong { font-weight: 700; }
.bloco textarea {
  font: inherit; font-size: 15px; line-height: 1.6; width: 100%; min-height: 220px;
  padding: 14px; border: 1px solid var(--div); border-radius: 12px; resize: vertical;
  background: var(--flat); color: var(--ink);
}
.bloco textarea:focus { outline: none; border-color: var(--cor, var(--meta)); background: var(--canvas); }

.acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--div-soft); }
.btn-aprovar {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--div-soft); background: var(--flat); color: var(--ink-2);
  border-radius: var(--pill); padding: 7px 16px; transition: all .2s var(--ease);
}
.btn-aprovar:hover { border-color: var(--ok); color: var(--ok); }
.btn-aprovar[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: #fff; }
.designers { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.designers .rot { font-size: 12px; color: var(--ink-3); margin-right: 2px; }
.btn-designer {
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--div-soft); background: var(--canvas); color: var(--ink-2);
  border-radius: var(--pill); padding: 5px 12px; transition: all .2s var(--ease);
}
.btn-designer:hover { border-color: var(--cor, var(--meta)); color: var(--cor, var(--meta)); }
.btn-designer[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.selo { font-size: 12px; color: var(--ok); font-weight: 600; margin-left: auto; }
.selo-editado { font-size: 11px; font-weight: 600; color: var(--warn); background: #FFF6E0; border-radius: var(--pill); padding: 3px 10px; }
.vazio { text-align: center; color: var(--ink-3); padding: 48px 0; }

/* dialogo usuarios */
.dlg {
  border: 0; border-radius: var(--feature); padding: 30px 32px; max-width: 640px; width: calc(100% - 32px);
  box-shadow: var(--sh2); color: var(--ink); background: var(--canvas);
}
.dlg::backdrop { background: rgba(0,0,0,.45); }
.dlg h2 { margin: 0 0 18px; font-size: 22px; }
.dlg h3 { margin: 26px 0 12px; font-size: 16px; }
.dlg-fechar { display: flex; justify-content: flex-end; margin-bottom: -8px; }
.tab-users { width: 100%; border-collapse: collapse; font-size: 14px; }
.tab-users th { text-align: left; font-size: 12px; color: #4B4C4F; padding: 8px 8px; border-bottom: 2px solid var(--div); }
.tab-users td { padding: 9px 8px; border-bottom: 1px solid var(--div-soft); }
.form-user { display: grid; gap: 10px; }
.form-user input, .form-user select {
  font: inherit; font-size: 15px; padding: 10px 13px; border: 1px solid var(--div); border-radius: 12px;
  background: var(--canvas); color: var(--ink);
}
.form-user input:focus, .form-user select:focus { outline: none; border-color: var(--meta); }
.form-user input:disabled { background: var(--flat); color: var(--ink-3); }
.form-acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.acoes-user { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-mini {
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap;
  background: var(--canvas); color: var(--ink-2); border: 1px solid var(--div-soft);
  border-radius: var(--pill); padding: 4px 11px; transition: all .2s var(--ease);
}
.btn-mini:hover { border-color: var(--meta); color: var(--meta); background: var(--baby); }
.btn-mini.perigo:hover { border-color: var(--erro); color: var(--erro); background: #FFF0F2; }
.linha-off td { opacity: .5; }
.marca-eu {
  font-size: 10px; font-weight: 600; color: var(--meta); background: var(--baby);
  border-radius: var(--pill); padding: 2px 7px; margin-left: 4px;
}
.aviso-user { color: var(--ok); font-size: 14px; min-height: 20px; margin: 6px 0 0; text-align: center; }
.aviso-janela {
  display: flex; align-items: center; gap: 10px;
  background: #FFF6E0; border: 1px solid #F5DFA8; border-radius: var(--card);
  padding: 12px 18px; margin-bottom: 16px; font-size: 14px; color: #6B5312;
}
.aviso-janela strong { font-weight: 700; }

@media (max-width: 860px) {
  /* Em tela pequena o cabecalho fixo comeria metade da altura util. */
  .cabecalho { position: static; }
  .topo { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .topo-esq { width: 100%; gap: 14px; }
  .topo-logo { width: 122px; }
  .topo-dir { width: 100%; justify-content: flex-end; }
  .abas { padding: 0 16px; }
  /* No celular a logo do candidato roubaria o espaco do nome e do botao Sair.
     O nome do candidato ja aparece na barra logo acima. */
  .logo-candidato { display: none; }
  .conteudo { padding: 20px 16px 90px; }
  .doc { padding: 26px 20px; border-radius: 16px; }
  .doc h1 { font-size: 26px; }
  .doc h2 { font-size: 20px; }
  .bloco { padding: 18px 16px; }
  .contador { width: 100%; margin-left: 0; }
}
@media print {
  .topo, .abas, .barra-filtros, .acoes, .btn-ghost { display: none !important; }
  .doc, .bloco { box-shadow: none; border: 0; }
  body { background: #fff; }
}