/* base.css — tokens + componentes base feitos na mão.
   Usado por index.html (formulário) e admin.html (painel).
   Fonte: Inter, carregada no <head> de cada página. */

:root {
  /* cor */
  --verde: #1B4332;
  --verde-medio: #2D6A4F;
  --verde-escuro: #143527;
  --verde-claro: #EEF3EF;
  --branco: #FFFFFF;
  --papel: #FAFAF8;
  --borda: #E3E4DE;
  --borda-forte: #C9CBC2;
  --borda-hover: #A9AC9F;
  --texto: #21231F;
  --texto-suave: #6B6E65;
  --vermelho: #A5342A;
  --ring: rgba(27, 67, 50, 0.14);

  /* forma */
  --raio: 6px;
  --raio-sm: 5px;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- campo / label ---------- */

.campo { margin-bottom: 24px; }
.campo:last-child { margin-bottom: 0; }

.campo label.pergunta,
.campo .pergunta {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  margin-bottom: 6px;
}

.campo .dica {
  font-size: 12.5px;
  color: var(--texto-suave);
  line-height: 1.55;
  margin-bottom: 10px;
}

.obrigatorio { color: var(--texto-suave); font-weight: 400; margin-left: 3px; }

/* ---------- input / textarea / select ---------- */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input:not([type]),
textarea,
select {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--branco);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  padding: 10px 12px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}

input[type="text"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover { border-color: var(--borda-hover); }

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--ring);
}

input:disabled,
textarea:disabled,
select:disabled {
  background: var(--papel);
  color: var(--texto-suave);
  cursor: not-allowed;
}

input::placeholder,
textarea::placeholder { color: var(--texto-suave); opacity: 1; }

textarea {
  min-height: 92px;
  line-height: 1.6;
  resize: vertical;
}

[aria-invalid="true"],
.is-invalid {
  border-color: var(--vermelho) !important;
  box-shadow: 0 0 0 3px rgba(165, 52, 42, 0.12) !important;
}

/* seta do select desenhada na mão (SVG inline) */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B6E65' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
select:disabled { opacity: 1; }

/* ---------- radio / checkbox desenhados na mão ---------- */

.opcoes { display: flex; flex-direction: column; gap: 6px; }

.opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--branco);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.opcao:hover { border-color: var(--borda-hover); }
.opcao:has(input:checked) { border-color: var(--verde); background: var(--verde-claro); }
.opcao span { font-size: 14px; }

.opcao input[type="radio"],
.opcao input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  border: 1.5px solid var(--borda-forte);
  border-radius: 50%;
  background: var(--branco);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.opcao input[type="checkbox"] { border-radius: 5px; }

.opcao input[type="radio"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--branco);
  transform: scale(0);
  transition: transform .12s ease;
}
.opcao input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 18%, 84% 4%, 38% 68%);
  background: var(--branco);
  transform: scale(0);
  transition: transform .12s ease;
}
.opcao input:checked {
  border-color: var(--verde);
  background: var(--verde);
}
.opcao input:checked::before { transform: scale(1); }

.opcao input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

/* ---------- escala segmentada (notas 1–10 e matriz 1–5) ---------- */

.escala-num { display: flex; flex-wrap: wrap; gap: 6px; }
.escala-num label,
.comp-notas label {
  flex: 1;
  text-align: center;
  cursor: pointer;
  background: var(--branco);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  transition: border-color .12s, background .12s, color .12s;
}
.escala-num label {
  min-width: 42px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
}
.comp-notas { display: flex; gap: 6px; }
.comp-notas label { padding: 8px 0; font-size: 15px; }

.escala-num label:hover,
.comp-notas label:hover { border-color: var(--borda-hover); }

.escala-num input,
.comp-notas input { position: absolute; opacity: 0; pointer-events: none; }

.escala-num label:has(input:checked) {
  border-color: var(--verde);
  background: var(--verde);
  color: var(--branco);
}
.comp-notas label:has(input:checked) {
  border-color: var(--verde);
  background: var(--verde-claro);
}
.escala-num label:has(input:focus-visible),
.comp-notas label:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }

[hidden] { display: none !important; }

/* ---------- botão ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  padding: 14px 20px;
  border: 1px solid var(--verde);
  border-radius: var(--raio-sm);
  background: var(--verde);
  color: var(--branco);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .04s;
}
.btn:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

.btn--block { width: 100%; }
.btn--sm { padding: 9px 14px; font-size: 13px; }

.btn--ghost {
  background: transparent;
  color: var(--verde);
  border-color: var(--borda-forte);
}
.btn--ghost:hover { background: var(--verde-claro); border-color: var(--verde); color: var(--verde); }

/* ---------- mensagem de erro ---------- */

.erro-msg {
  color: var(--vermelho);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  margin-top: 12px;
}