/* Vertex. Tema institucional misto: barra grafite, conteúdo em gelo, bronze no lugar do verde
   de marca do Verten. O verde fica reservado ao semáforo das metas. */

:root {
  --grafite:   #333f48;
  --grafite2:  #2a343c;
  --bg:        #eef2f5;
  --bg2:       #ffffff;
  --bg3:       #e4eaee;
  --border:    #d5dde2;
  --border2:   #bcc8d0;
  --accent:    #9a5a23;
  --accent2:   #7d4719;
  --accent-cl: #d89b5c;
  --text:      #333f48;
  --text2:     #6b7a85;
  --verde:     #1f7a49;
  --amarelo:   #8a6100;
  --vermelho:  #ab2f26;
  --radius:    10px;
  --topo-h:    56px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

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

.num { font-variant-numeric: tabular-nums; }
.rotulo { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); font-weight: 600; }
.secundario { color: var(--text2); font-size: 12px; }
.vazio { color: var(--text2); }

/* ── Barra do topo ── */
.topo {
  position: sticky;
  top: 0;
  z-index: 5;
  height: var(--topo-h);
  display: flex;
  align-items: center;
  gap: 22px;
  padding-inline: 20px;
  background: var(--grafite);
  border-bottom: 3px solid var(--accent);
}
.marca { font-weight: 700; font-size: 17px; letter-spacing: .06em; color: #fff; display: flex; align-items: center; gap: 8px; text-decoration: none; }
.marca .sinal { display: inline-flex; gap: 3px; }
.marca .sinal i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.marca .sinal i:nth-child(1) { background: #e2584c; }
.marca .sinal i:nth-child(2) { background: #e0a32f; }
.marca .sinal i:nth-child(3) { background: #3bab71; }

.menu { display: flex; gap: 2px; margin-right: auto; }
.menu a, .menu span {
  font-weight: 500;
  color: #b9c6ce;
  border-radius: var(--radius);
  padding: 7px 14px;
  text-decoration: none;
}
.menu a:hover { background: var(--grafite2); color: #fff; }
.menu a[aria-current="page"] { background: rgba(216,155,92,.18); color: var(--accent-cl); }
.menu span { color: #7b8892; cursor: default; }
.menu .em-breve small, .abas .em-breve small {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: .8;
}

/* ── Conteúdo ── */
.pagina { max-width: 1240px; margin: 0 auto; padding-inline: 20px; padding-block: 22px 60px; display: flex; flex-direction: column; gap: 18px; }

.cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.cabeca h1 { font-size: 22px; font-weight: 600; margin: 0; }
.cabeca .sub { color: var(--text2); font-size: 13px; margin: 3px 0 0; }
.cabeca .acoes { display: flex; gap: 8px; }

h2 { font-size: 16px; font-weight: 600; margin: 0; }

.abas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.abas a, .abas span { font-weight: 500; color: var(--text2); padding: 8px 12px; text-decoration: none; border-bottom: 2px solid transparent; }
.abas a:hover { color: var(--text); }
.abas .ativa { color: var(--text); border-bottom-color: var(--accent); }
.abas span { color: #a8b3bb; cursor: default; }

.cartao { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(51,63,72,.06); }
.cartao > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.cartao > .corpo { padding: 18px; display: flex; flex-direction: column; gap: 16px; }

.grade { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ── Tabelas ── */
.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 16px; text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; white-space: normal; }
thead th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); font-weight: 600; border-bottom: 1px solid var(--border); }
tbody tr + tr td { border-top: 1px solid var(--border); }
tbody tr:hover td { background: var(--bg3); }
td .secundario { display: block; }

/* ── Etiquetas ── */
.etiqueta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid; }
.etiqueta.verde { background: rgba(31,122,73,.12); border-color: rgba(31,122,73,.35); color: var(--verde); }
.etiqueta.amarelo { background: rgba(138,97,0,.12); border-color: rgba(138,97,0,.35); color: var(--amarelo); }
.etiqueta.vermelho { background: rgba(171,47,38,.1); border-color: rgba(171,47,38,.35); color: var(--vermelho); }
.etiqueta.neutra { background: rgba(107,122,133,.08); border-color: var(--border2); color: var(--text2); }
.etiqueta.bronze { background: rgba(154,90,35,.1); border-color: rgba(154,90,35,.35); color: var(--accent); }

/* ── Botões ── */
.botao {
  display: inline-block;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border2);
  background: var(--bg3);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.botao:hover { border-color: var(--accent); color: var(--accent); }
.botao.principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.botao.principal:hover { background: var(--accent2); border-color: var(--accent2); color: #fff; }
.botao.pequeno { padding: 4px 10px; font-size: 12px; }

/* ── Formulários ── */
.campos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label { font-size: 13px; color: var(--text2); }
.campo .ajuda { font-size: 12px; color: var(--text2); }
input[type="text"], input[type="password"], input[type="date"], input[type="number"],
input[type="email"], input[type="search"], select, textarea {
  font: inherit;
  width: 100%;
  color: var(--text);
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 8px 11px;
}
textarea { min-height: 90px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .botao:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.rodape-form { display: flex; gap: 10px; align-items: center; }

/* ── Diagnóstico ── */
.bloco-perguntas > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 18px; background: var(--bg3); border-bottom: 1px solid var(--border); }
.bloco-perguntas > header h2 { font-size: 15px; }
.pergunta {
  padding: 12px 18px;
  display: grid;
  grid-template-columns: minmax(0, 32rem) auto;
  justify-content: start;
  gap: 4px 16px;
  align-items: center;
}
.pergunta > input[type="text"] { max-width: 150px; }
.pergunta + .pergunta { border-top: 1px solid var(--border); }
.pergunta .texto { font-size: 14px; }
.pergunta .anotacao { grid-column: 1 / -1; }
.pergunta .anotacao summary {
  display: inline-block;
  list-style: none;
  font-size: 12px;
  color: var(--text2);
  cursor: pointer;
  padding: 2px 0;
}
.pergunta .anotacao summary::-webkit-details-marker { display: none; }
.pergunta .anotacao summary:hover { color: var(--accent); }
.pergunta .anotacao[open] summary { color: var(--accent); }
.pergunta .anotacao input { font-size: 13px; margin-top: 4px; max-width: 32rem; }

.notas { display: flex; gap: 6px; align-items: center; }
.notas input { position: absolute; opacity: 0; width: 0; height: 0; }
.notas label {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border2);
  border-radius: 50%;
  background: var(--bg2);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.notas label:hover { border-color: var(--accent); color: var(--accent); }
.notas input:checked + label { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.notas input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }

.legenda-escala { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--text2); }

.media { font-size: 13px; color: var(--text2); }
.media strong { color: var(--text); font-size: 15px; }

.aviso { padding: 12px 14px; border-radius: var(--radius); background: rgba(216,155,92,.12); border: 1px solid rgba(154,90,35,.3); }

.mensagem { padding: 11px 14px; border-radius: var(--radius); background: rgba(31,122,73,.1); border: 1px solid rgba(31,122,73,.3); color: var(--verde); }

@media (max-width: 720px) {
  .pergunta { grid-template-columns: 1fr; }
  .menu { overflow-x: auto; }
}

/* ── Tela de entrada ── */
.tela-entrar { min-height: 100vh; display: grid; place-items: center; background: var(--grafite); padding: 20px; }
.caixa-entrar { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 6px; }
.marca-entrar { color: #fff; font-size: 26px; font-weight: 700; letter-spacing: .08em; margin: 0; display: flex; align-items: center; gap: 10px; }
.marca-entrar .sinal { display: inline-flex; gap: 4px; }
.marca-entrar .sinal i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.marca-entrar .sinal i:nth-child(1) { background: #e2584c; }
.marca-entrar .sinal i:nth-child(2) { background: #e0a32f; }
.marca-entrar .sinal i:nth-child(3) { background: #3bab71; }
.sub-entrar { color: #b9c6ce; font-size: 13px; margin: 0 0 14px; }
.erro { margin: 0; padding: 10px 13px; border-radius: var(--radius); background: rgba(171,47,38,.1); border: 1px solid rgba(171,47,38,.35); color: var(--vermelho); }
.usuario-topo { display: flex; align-items: center; gap: 10px; color: #b9c6ce; font-size: 13px; }
.usuario-topo button { font: inherit; font-size: 13px; background: none; border: 0; color: #b9c6ce; cursor: pointer; text-decoration: underline; padding: 0; }
.usuario-topo button:hover { color: #fff; }