:root{
  /* Azuis (institucional) */
  --azul:        #213764;
  --azul-dk:     #16264a;
  --azul-lt:     #2d4a87;
  /* Verdes (acento) */
  --verde:       #9dd354;
  --verde-dk:    #7bb83a;
  --verde-lt:    #c5e88e;
  --verde-btn2:  #5a8e25;
  /* Neutros */
  --bg:          #f4f6fa;
  --bg-card:     #ffffff;
  --borda:       #e5eaf2;
  --texto:       #1a2540;
  --texto-claro: #8b95ab;
  /* Raios e sombra */
  --radius:      14px;
  --radius-sm:   10px;
  --radius-lg:   18px;
  --sombra:      0 1px 3px rgba(22,38,74,.06);
  --sombra-hover:0 8px 20px rgba(22,38,74,.10);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:"Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  background:var(--bg);
  color:var(--texto);
  -webkit-font-smoothing:antialiased;
  display:flex;
  min-height:100vh;
}

a{ color:var(--azul); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ============ SIDEBAR ============ */
#sidebar{
  width:240px; flex-shrink:0;
  background:linear-gradient(180deg, var(--azul-dk) 0%, var(--azul) 100%);
  color:#fff; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
#sidebar[hidden]{ display:none; }
.side-brand{ padding:20px 18px 14px; }
.side-brand svg{ width:96px; height:auto; display:block; }
.side-nav{ display:flex; flex-direction:column; gap:2px; padding:8px 10px; flex:1; }
.side-label{ font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color:rgba(255,255,255,.45); padding:14px 10px 6px; }
.side-nav a{
  display:flex; align-items:center; gap:10px;
  color:rgba(255,255,255,.82); text-decoration:none;
  padding:10px 12px; border-radius:var(--radius-sm); font-weight:600; font-size:14px;
  transition:background .12s,color .12s;
}
.side-nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.side-nav a.active{ background:var(--verde); color:var(--azul-dk); font-weight:700; }
.side-nav a svg{ width:18px; height:18px; }
.side-foot{ padding:14px; border-top:1px solid rgba(255,255,255,.10); font-size:13px; }
.side-foot .email{ color:rgba(255,255,255,.7); display:block; margin-bottom:8px; word-break:break-all; font-size:12px; }
.side-foot button{
  width:100%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:#fff; border-radius:var(--radius-sm); padding:8px; cursor:pointer; font-family:inherit; font-weight:600;
}
.side-foot button:hover{ background:rgba(255,255,255,.16); }

/* ============ MAIN ============ */
#main{ flex:1; min-width:0; overflow-x:hidden; }
.container, #app{ max-width:1180px; margin:0 auto; padding:28px 28px 40px; }
.loading{ color:var(--texto-claro); padding:48px 0; text-align:center; font-weight:600; }

/* ============ TIPOGRAFIA ============ */
h1{ font-size:30px; font-weight:800; letter-spacing:-.5px; color:var(--texto); margin:0; }
h2{ font-size:20px; font-weight:800; letter-spacing:-.3px; margin:0; }
.section-title{ font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:var(--texto-claro); margin:0 0 12px; }
.subtitle{ color:var(--texto-claro); font-size:14px; margin-top:4px; font-weight:500; }
.muted{ color:var(--texto-claro); }
.small{ font-size:12px; }
.back{ font-size:13px; font-weight:700; letter-spacing:.2px; }

/* ============ PAGE HEAD ============ */
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.meta{ display:flex; flex-wrap:wrap; gap:6px 22px; color:var(--texto-claro); font-size:13px; margin-top:8px; font-weight:500; }

/* ============ BOTÕES ============ */
.btn{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-family:inherit;
  border:1px solid transparent; border-radius:var(--radius-sm);
  padding:10px 16px; font-size:14px; font-weight:700; transition:transform .12s, box-shadow .12s, background .12s; }
.btn-primary{ background:linear-gradient(135deg, var(--verde-dk), var(--verde-btn2)); color:#fff;
  box-shadow:0 4px 12px rgba(123,184,58,.30); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(123,184,58,.38); }
.btn-primary:disabled{ opacity:.55; cursor:default; transform:none; box-shadow:none; }
.btn-ghost{ background:#fff; border-color:var(--borda); color:var(--azul); }
.btn-ghost:hover{ background:#f1f4fa; transform:translateY(-1px); }

/* ============ CARDS ============ */
.card{ background:var(--bg-card); border:1px solid var(--borda); border-radius:var(--radius);
  box-shadow:var(--sombra); padding:18px; }
.card.hoverable{ transition:transform .14s, box-shadow .14s; cursor:pointer; }
.card.hoverable:hover{ transform:translateY(-2px); box-shadow:var(--sombra-hover); }
.stack > * + *{ margin-top:20px; }
.grid-2{ display:grid; gap:20px; }
@media (min-width:768px){ .grid-2{ grid-template-columns:1fr 1fr; } }

/* KPI */
.kpi{ background:linear-gradient(135deg, var(--azul-dk), var(--azul)); color:#fff;
  border-radius:var(--radius); padding:18px; border:none; }
.kpi .kpi-num{ font-size:26px; font-weight:900; letter-spacing:-.5px; }
.kpi.alt{ background:#fff; border:1px solid var(--borda); color:var(--texto); }
.kpi.alt .kpi-num{ color:var(--azul); }

/* progress */
.progress{ height:7px; border-radius:999px; background:var(--borda); overflow:hidden; }
.progress > span{ display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--verde-dk), var(--verde)); }

/* ============ TABELAS ============ */
.table-wrap{ background:#fff; border:1px solid var(--borda); border-radius:var(--radius); overflow:hidden; box-shadow:var(--sombra); }
table{ width:100%; border-collapse:collapse; font-size:14px; }
thead{ background:#f7f9fc; }
th{ text-align:left; padding:12px 16px; font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.6px; color:var(--texto-claro); }
td{ padding:12px 16px; border-top:1px solid #eef2f8; }
tbody tr:hover{ background:#f7f9fc; }
.num{ text-align:right; font-variant-numeric:tabular-nums; }
.empty{ text-align:center; color:#aab2c5; padding:40px 0; }

/* ============ BADGES ============ */
.badge{ display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px;
  font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }
.badge-ativo{ background:rgba(92,184,92,.16); color:#3c8a3c; }
.badge-rascunho{ background:rgba(240,173,78,.16); color:#a86a12; }
.badge-suspenso{ background:rgba(240,173,78,.16); color:#a86a12; }
.badge-encerrado{ background:#eef1f7; color:#6c7689; }
.badge-rescindido{ background:rgba(217,83,79,.12); color:#b03b35; }
.badge-dev{ background:rgba(240,173,78,.18); color:#a86a12; font-size:9px; }

/* ============ LISTAS K/V ============ */
.kv{ list-style:none; margin:0; padding:0; font-size:14px; }
.kv li{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; }
.kv li + li{ border-top:1px solid #eef2f8; }

/* ============ FORM ============ */
.form{ max-width:640px; }
.row{ display:grid; gap:16px; }
@media (min-width:640px){ .row.cols-2{ grid-template-columns:1fr 1fr; } }
.field{ margin-bottom:16px; }
label{ display:block; font-size:13px; font-weight:700; color:var(--azul); margin-bottom:5px; }
input, select{ width:100%; padding:9px 12px; font-size:14px; font-family:inherit; color:var(--texto);
  border:1px solid var(--borda); border-radius:var(--radius-sm); background:#fafbfd; transition:border .12s, background .12s; }
input:focus, select:focus{ outline:none; border-color:var(--azul); background:#fff; box-shadow:0 0 0 3px rgba(33,55,100,.10); }
input[type=checkbox]{ width:auto; }
.actions{ display:flex; align-items:center; gap:12px; margin-top:8px; }

/* ============ ALERTS ============ */
.alert{ border-radius:var(--radius-sm); padding:10px 14px; font-size:14px; font-weight:600; }
.alert-error{ background:rgba(217,83,79,.10); color:#b03b35; }

/* ============ LOGIN (hero) ============ */
.login-wrap{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(135deg, var(--azul-dk) 0%, var(--azul) 60%, var(--azul-lt) 100%); }
.login-card{ width:100%; max-width:380px; border-radius:var(--radius-lg); box-shadow:0 20px 50px rgba(0,0,0,.30); }
.login-card .login-logo{ width:120px; margin:0 auto 14px; display:block; }

/* ============ MODAL ============ */
.modal-overlay{ position:fixed; inset:0; background:rgba(15,25,45,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:2000; padding:20px; }
.modal{ background:#fff; border-radius:var(--radius-lg); max-width:460px; width:100%; max-height:92vh; overflow:auto; padding:22px; }