/* ============ BASE (cores, tipografia, botões, formulários) ============ */
:root {
  --papel: #ececec;       /* fundo cinza claro da proposta */
  --papel-2: #e2e2e2;
  --branco: #fafafa;
  --tinta: #2b2b2b;       /* texto e faixas escuras */
  --tinta-2: #3d3d3d;
  --cinza: #6b6b6b;
  --cinza-2: #9b9b9b;
  --linha: #cfcfcf;
  --escuro: #2e2e2e;
  --destaque: #2f5d8a;    /* azul discreto do cartão de visita */

  --azul: #2f5d8a;   --azul-bg: #e1e9f2;
  --verde: #2f7a4f;  --verde-bg: #e0efe5;
  --amarelo: #8a6a12; --amarelo-bg: #f4ecd2;
  --laranja: #a8541c; --laranja-bg: #f6e3d6;
  --vermelho: #a83232; --vermelho-bg: #f5dcdc;
  --roxo: #5d4a8a;   --roxo-bg: #e8e3f2;
  --cinza-st: #5f5f5f; --cinza-st-bg: #e3e3e3;

  --titulo: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --texto: 'Saira', 'Segoe UI', Arial, sans-serif;
  --raio: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--texto); font-weight: 400; color: var(--tinta); background: var(--papel); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--titulo); font-weight: 700; line-height: 1.05; margin: 0 0 .5em; letter-spacing: .005em; }
p { margin: 0 0 1em; }

.logo-simbolo { width: 34px; height: auto; flex-shrink: 0; }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: 500 .95rem var(--texto); padding: .7em 1.3em; border-radius: var(--raio); border: 1.5px solid var(--tinta); background: var(--tinta); color: #fff; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, transform .1s; white-space: nowrap; }
.btn:hover { background: #000; }
.btn:active { transform: translateY(1px); }
.btn-contorno { background: transparent; color: var(--tinta); }
.btn-contorno:hover { background: var(--tinta); color: #fff; }
.btn-claro { background: #fff; color: var(--tinta); border-color: #fff; }
.btn-claro:hover { background: var(--papel); }
.btn-peq { padding: .4em .8em; font-size: .85rem; }
.btn-perigo { background: transparent; color: var(--vermelho); border-color: var(--vermelho); }
.btn-perigo:hover { background: var(--vermelho); color: #fff; }
.btn-link { background: none; border: 0; color: var(--cinza); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }

/* Formulários */
label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .3em; color: var(--tinta-2); }
input, select, textarea { width: 100%; font: 400 .95rem var(--texto); color: var(--tinta); padding: .65em .8em; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(43,43,43,.12); }
textarea { resize: vertical; min-height: 110px; }
input[type=checkbox] { width: auto; }
.campo { margin-bottom: 1rem; }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
.ajuda { font-size: .8rem; color: var(--cinza); margin-top: .3em; }

/* Mensagens de aviso */
.flash { padding: .85em 1.1em; border-radius: var(--raio); margin-bottom: 1.2rem; font-size: .95rem; border-left: 4px solid; }
.flash-sucesso { background: var(--verde-bg); color: var(--verde); border-color: var(--verde); }
.flash-erro { background: var(--vermelho-bg); color: var(--vermelho); border-color: var(--vermelho); }
.flash-info { background: var(--azul-bg); color: var(--azul); border-color: var(--azul); }

/* Etiquetas (status / prioridade) */
.tag { display: inline-flex; align-items: center; gap: .35em; font-size: .75rem; font-weight: 600; padding: .2em .65em; border-radius: 99px; white-space: nowrap; letter-spacing: .01em; }
.tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag-azul { color: var(--azul); background: var(--azul-bg); }
.tag-verde { color: var(--verde); background: var(--verde-bg); }
.tag-amarelo { color: var(--amarelo); background: var(--amarelo-bg); }
.tag-laranja { color: var(--laranja); background: var(--laranja-bg); }
.tag-vermelho { color: var(--vermelho); background: var(--vermelho-bg); }
.tag-roxo { color: var(--roxo); background: var(--roxo-bg); }
.tag-cinza { color: var(--cinza-st); background: var(--cinza-st-bg); }
.tag-simples::before { display: none; }

.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }