/* ============================================================================
   LEMMA · documentos legais · estilos compartilhados
   Paleta: tema light institucional (lemma-app theme.light + lemmasig.com)
   Fontes: sistema + DM Sans + Space Grotesk (Google Fonts opcional)
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --lemma:        94 130 40;     /* #5E8228 — verde institucional */
  --lemma-light:  124 163 59;    /* #7CA33B — primário lemmasig.com */
  --lemma-dark:   75 101 37;
  --bg:           250 250 247;   /* #FAFAF7 off-white warm */
  --surface:      255 255 255;
  --surface-2:    246 246 240;
  --border:       228 226 218;
  --text:         28 28 25;
  --text-muted:   110 110 100;
  --warn:         180 130 25;
  --danger:       220 53 53;
  --success:      30 130 75;
  --max-width:    760px;
  --radius:       10px;
  --radius-lg:    14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: rgb(var(--bg));
  color: rgb(var(--text));
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Topbar institucional ---------- */
.topbar {
  background: rgb(var(--surface));
  border-bottom: 1px solid rgb(var(--border));
  padding: 14px 0;
}
.topbar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.brand {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: rgb(var(--lemma));
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand::before {
  content: "L";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgb(var(--lemma));
  color: white;
  border-radius: 7px;
  font-weight: 700;
  font-size: 14px;
}
.topbar-nav {
  display: flex;
  gap: 18px;
  font-size: 13.5px;
}
.topbar-nav a {
  color: rgb(var(--text-muted));
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}
.topbar-nav a:hover, .topbar-nav a.ativo { color: rgb(var(--lemma)); }

/* ---------- Layout do documento ---------- */
main {
  max-width: var(--max-width);
  margin: 40px auto 80px;
  padding: 0 24px;
}

article header {
  margin-bottom: 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgb(var(--border));
}
article h1 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 30px;
  margin: 0 0 8px;
  color: rgb(var(--text));
  letter-spacing: -0.01em;
}
article header .meta {
  font-size: 13px;
  color: rgb(var(--text-muted));
}
article header .meta span + span::before { content: " · "; padding: 0 4px; }

article h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 21px;
  margin: 36px 0 12px;
  color: rgb(var(--text));
}
article h3 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 16px;
  margin: 24px 0 10px;
  color: rgb(var(--text));
}
article p { margin: 12px 0; }
article ul, article ol { padding-left: 24px; }
article li { margin: 6px 0; }
article a { color: rgb(var(--lemma)); text-decoration: underline; text-underline-offset: 2px; }
article a:hover { color: rgb(var(--lemma-dark)); }
article strong { color: rgb(var(--text)); font-weight: 600; }

/* ---------- Tabelas ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
}
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgb(var(--border));
  vertical-align: top;
}
th {
  background: rgb(var(--surface-2));
  font-weight: 600;
  color: rgb(var(--text));
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
tr:last-child td { border-bottom: none; }

/* ---------- Caixas de aviso ---------- */
.callout {
  background: rgb(var(--lemma) / 0.06);
  border-left: 3px solid rgb(var(--lemma));
  padding: 12px 16px;
  border-radius: var(--radius);
  margin: 18px 0;
  font-size: 14.5px;
}
.callout.warn {
  background: rgba(255, 200, 50, 0.1);
  border-left-color: rgb(var(--warn));
}
.callout.danger {
  background: rgb(var(--danger) / 0.06);
  border-left-color: rgb(var(--danger));
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid rgb(var(--border));
  padding: 28px 24px;
  text-align: center;
  font-size: 13px;
  color: rgb(var(--text-muted));
  background: rgb(var(--surface));
}
footer .links { margin-bottom: 8px; }
footer .links a { color: rgb(var(--text-muted)); text-decoration: none; margin: 0 10px; }
footer .links a:hover { color: rgb(var(--lemma)); }

/* ---------- Formulário LGPD ---------- */
.formulario {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg);
  padding: 28px;
  margin: 24px 0;
}
.formulario .grupo { margin-bottom: 18px; }
.formulario label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: rgb(var(--text));
  margin-bottom: 6px;
}
.formulario label .req { color: rgb(var(--danger)); }
.formulario input,
.formulario select,
.formulario textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius);
  font: inherit;
  background: rgb(var(--surface));
  color: rgb(var(--text));
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
  border-color: rgb(var(--lemma) / 0.6);
  box-shadow: 0 0 0 3px rgb(var(--lemma) / 0.12);
}
.formulario textarea { min-height: 100px; resize: vertical; font-family: inherit; }
.formulario .hint {
  font-size: 12px;
  color: rgb(var(--text-muted));
  margin-top: 4px;
}
.btn-primario {
  background: rgb(var(--lemma));
  color: white;
  border: none;
  border-radius: var(--radius);
  padding: 12px 24px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-primario:hover:not(:disabled) { background: rgb(var(--lemma-dark)); }
.btn-primario:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Status do protocolo ---------- */
.protocolo-card {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg);
  padding: 24px;
  margin: 18px 0;
}
.protocolo-card .codigo {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: rgb(var(--lemma));
  letter-spacing: 0.05em;
}
.status-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgb(var(--text-muted) / 0.12);
  color: rgb(var(--text-muted));
}
.status-recebida   { background: rgb(var(--lemma) / 0.15); color: rgb(var(--lemma)); }
.status-em_analise { background: rgba(255, 200, 50, 0.18); color: rgb(var(--warn)); }
.status-aprovada   { background: rgb(var(--success) / 0.15); color: rgb(var(--success)); }
.status-recusada   { background: rgb(var(--danger) / 0.12); color: rgb(var(--danger)); }
.status-concluida  { background: rgb(var(--success) / 0.18); color: rgb(var(--success)); }

.alerta-resp {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  display: none;
}
.alerta-resp.ok { background: rgb(var(--success) / 0.1); color: rgb(var(--success)); display: block; }
.alerta-resp.erro { background: rgb(var(--danger) / 0.1); color: rgb(var(--danger)); display: block; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .topbar-nav { gap: 12px; font-size: 12px; }
  article h1 { font-size: 24px; }
  article h2 { font-size: 18px; }
  table { font-size: 13px; }
  th, td { padding: 8px; }
  main { margin: 24px auto 60px; padding: 0 16px; }
}