/* =====================================================================
   STARTUP-XTRA · Folha de estilos
   Layout simples, fluído e responsivo (mobile-first)
   ===================================================================== */

:root{
  --navy:#132a5e;          /* azul institucional escuro */
  --navy-2:#0f2350;
  --blue:#1f5fb0;          /* azul cartões */
  --blue-2:#2a6fc9;
  --purple:#5c2a63;        /* roxo cartões */
  --purple-2:#6e2f74;
  --gold:#f4c21b;          /* dourado / destaque */
  --gold-2:#e0a800;
  --green:#2ea44f;
  --green-soft:#d5f2de;
  --amber:#f4c21b;
  --amber-soft:#fdf1c9;
  --red:#d64545;
  --red-soft:#f8dcdc;
  --ink:#1f2430;
  --muted:#6b7280;
  --line:#e6e8ee;
  --bg:#f4f6fb;
  --card:#ffffff;
  --radius:16px;
  --shadow:0 6px 20px rgba(19,42,94,.08);
  --shadow-sm:0 2px 8px rgba(19,42,94,.06);
  --sidebar-w:60px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0 0 .5rem;line-height:1.25}

/* ---------- Cabeçalho ---------- */
.topbar{
  background:linear-gradient(90deg,var(--navy),var(--navy-2));
  color:#fff;
  position:sticky;top:0;z-index:50;
}
.topbar-inner{
  display:flex;align-items:center;gap:1rem;
  padding:.6rem 1rem;max-width:1400px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:.75rem;min-width:0}
.brand .logo{
  font-weight:800;font-size:1.15rem;letter-spacing:.3px;white-space:nowrap;
}
.brand .logo .x{color:var(--gold)}
.brand .sub{font-size:.66rem;opacity:.8;font-weight:400;display:block;margin-top:-2px}
.brand .med{
  border-left:1px solid rgba(255,255,255,.25);padding-left:.75rem;margin-left:.25rem;
  font-size:.7rem;opacity:.85;white-space:nowrap
}
.brand .med b{color:var(--gold);font-size:1rem}
.topnav{display:none;gap:1.1rem;margin-left:auto;font-size:.82rem;font-weight:600}
.topnav a{color:#dfe6f5}
.topnav a.ativo,.topnav a:hover{color:var(--gold);text-decoration:none}
.topbar-right{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.chip-user{
  display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.12);
  padding:.4rem .8rem;border-radius:999px;font-size:.8rem;color:#fff;
}
.chip-user .av{width:22px;height:22px;border-radius:50%;background:#fff2;display:grid;place-items:center}
.lang{font-size:.72rem;opacity:.8}
.lang a{color:#cdd7ec}

.burger{background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer;display:inline-flex}
@media(min-width:1024px){ .burger{display:none} .topnav{display:flex} }

/* ---------- Layout base ---------- */
.layout{display:flex;max-width:1400px;margin:0 auto;position:relative}
.main{flex:1;min-width:0;padding:1.25rem 1rem 3rem}
@media(min-width:1024px){ .main{padding:1.5rem 1.5rem 3rem} }

.page-title{font-size:1.4rem;font-weight:800;color:var(--navy);margin-bottom:1rem}
.page-subtitle{color:var(--muted);font-size:.9rem;margin-top:-.6rem;margin-bottom:1.2rem}

/* ---------- Sidebar de ícones (direita) ---------- */
.railbar{
  width:var(--sidebar-w);background:var(--navy);flex-shrink:0;
  display:none;flex-direction:column;align-items:center;gap:.35rem;
  padding:1rem 0;border-radius:14px 0 0 14px;position:sticky;top:64px;height:calc(100vh - 64px);
}
.railbar a{
  width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  color:#aab8d8;font-size:1.05rem;transition:.15s
}
.railbar a:hover,.railbar a.ativo{background:rgba(255,255,255,.12);color:var(--gold);text-decoration:none}
@media(min-width:768px){ .railbar{display:flex} }

/* ---------- Grelha de cartões ---------- */
.grid{display:grid;gap:1rem}
.grid.cols-2{grid-template-columns:1fr}
.grid.cols-3{grid-template-columns:1fr}
.grid.cols-4{grid-template-columns:1fr 1fr}
@media(min-width:640px){ .grid.cols-4{grid-template-columns:repeat(2,1fr)} }
@media(min-width:768px){
  .grid.cols-2{grid-template-columns:repeat(2,1fr)}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .grid.cols-4{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Cartões ---------- */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem;border:1px solid var(--line)}
.card h3{font-size:1rem;color:var(--navy)}
.card .card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.card-lead{color:var(--muted);font-size:.85rem}

.card.navy{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;border:0}
.card.blue{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;border:0}
.card.purple{background:linear-gradient(135deg,var(--purple),var(--purple-2));color:#fff;border:0}
.card.gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#3a2f00;border:0}
.card.navy h3,.card.blue h3,.card.purple h3{color:#fff}
.card.navy a,.card.blue a,.card.purple a{color:#fff}

/* KPI */
.kpi{display:flex;flex-direction:column;gap:.2rem}
.kpi .valor{font-size:2rem;font-weight:800;line-height:1}
.kpi .rotulo{font-size:.8rem;opacity:.85}
.kpi-inline{display:flex;align-items:center;gap:.8rem}
.kpi-inline .ic{width:44px;height:44px;border-radius:50%;background:#eef2fb;display:grid;place-items:center;color:var(--blue);font-size:1.2rem;flex-shrink:0}

/* Barra de progresso */
.progresso{height:8px;background:#e9edf6;border-radius:99px;overflow:hidden}
.progresso > span{display:block;height:100%;background:var(--blue);border-radius:99px}
.card.purple .progresso{background:rgba(255,255,255,.25)}
.card.purple .progresso > span{background:var(--gold)}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap}
.badge.verde{background:var(--green-soft);color:#1c7a3a}
.badge.amarelo{background:var(--amber-soft);color:#9a7400}
.badge.azul{background:#dbe9fb;color:#1b5fb0}
.badge.vermelho{background:var(--red-soft);color:#a62828}
.badge.cinza{background:#eceef3;color:#4b5563}

/* Passos (percurso) */
.passos{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.8rem}
.passos .passo{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.4rem .7rem;color:var(--muted)}
.passos .passo.ativo{background:var(--navy);color:#fff;border-color:var(--navy)}
.passos .seta{color:var(--muted)}

/* ---------- Tabelas ---------- */
.tabela-wrap{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#fff;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{padding:.7rem .8rem;text-align:left;border-bottom:1px solid var(--line);font-size:.88rem}
th{background:#f7f9fd;color:var(--navy);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.4px}
tr:last-child td{border-bottom:0}
tr:hover td{background:#fbfcfe}

/* ---------- Formulários ---------- */
.form-card{max-width:480px;margin:2rem auto}
.form-grid{display:grid;gap:1rem}
@media(min-width:640px){ .form-grid.cols-2{grid-template-columns:1fr 1fr} }
label{display:block;font-size:.82rem;font-weight:600;color:var(--navy);margin-bottom:.3rem}
input,select,textarea{
  width:100%;padding:.65rem .8rem;border:1px solid var(--line);border-radius:10px;
  font-size:.92rem;font-family:inherit;background:#fff;transition:.15s
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px #1f5fb022}
textarea{min-height:90px;resize:vertical}
.campo{margin-bottom:0}
.hint{font-size:.76rem;color:var(--muted);margin-top:.25rem}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.6rem 1.1rem;border-radius:10px;border:0;cursor:pointer;
  font-size:.88rem;font-weight:700;font-family:inherit;transition:.15s;text-decoration:none
}
.btn:hover{text-decoration:none;filter:brightness(.96)}
.btn-primary{background:var(--navy);color:#fff}
.btn-blue{background:var(--blue);color:#fff}
.btn-gold{background:var(--gold);color:#3a2f00}
.btn-purple{background:var(--purple);color:#fff}
.btn-ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn-danger{background:var(--red);color:#fff}
.btn-sm{padding:.4rem .7rem;font-size:.78rem}
.btn-block{width:100%}
.btn-link{background:none;color:var(--blue);padding:.3rem}

.acoes{display:flex;gap:.4rem;flex-wrap:wrap}

/* ---------- Flash ---------- */
.flashes{margin-bottom:1rem;display:flex;flex-direction:column;gap:.5rem}
.flash{padding:.7rem 1rem;border-radius:10px;font-size:.88rem;border:1px solid transparent}
.flash.sucesso{background:var(--green-soft);color:#1c7a3a;border-color:#b9e6c7}
.flash.aviso{background:var(--amber-soft);color:#8a6800;border-color:#f2e2a6}
.flash.erro{background:var(--red-soft);color:#a62828;border-color:#f0c2c2}
.flash.info{background:#dbe9fb;color:#1b5fb0;border-color:#bcd6f7}

/* ---------- Lista de itens ---------- */
.lista{display:flex;flex-direction:column;gap:.6rem}
.item{display:flex;align-items:center;gap:.8rem;padding:.7rem .85rem;border:1px solid var(--line);border-radius:12px;background:#fff}
.item .av{width:40px;height:40px;border-radius:50%;background:#eef2fb;display:grid;place-items:center;color:var(--blue);flex-shrink:0}
.item .meta{min-width:0;flex:1}
.item .meta .t{font-weight:700;font-size:.9rem}
.item .meta .s{font-size:.78rem;color:var(--muted)}

/* Busca */
.busca{position:relative;margin-bottom:1rem}
.busca input{padding-left:2.4rem}
.busca .ic{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--muted)}

/* Auth */
.auth-wrap{min-height:calc(100vh - 120px);display:grid;place-items:center;padding:1.5rem}
.auth-card{width:100%;max-width:420px;background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:2rem;border:1px solid var(--line)}
.auth-card .logo-mark{text-align:center;margin-bottom:1rem}
.auth-card .logo-mark .logo{font-size:1.4rem;font-weight:800;color:var(--navy)}
.auth-card .logo-mark .logo .x{color:var(--gold)}
.auth-card .logo-mark .sub{font-size:.75rem;color:var(--muted)}
.demo-box{margin-top:1.2rem;padding:.85rem;background:#f7f9fd;border:1px dashed var(--line);border-radius:12px;font-size:.78rem;color:var(--muted)}
.demo-box b{color:var(--navy)}
.demo-box code{background:#eef2fb;padding:.05rem .35rem;border-radius:5px;color:var(--navy)}

/* Landing */
.hero{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;border-radius:var(--radius);padding:2.5rem 1.5rem;text-align:center;margin-bottom:1.5rem}
.hero h1{font-size:1.8rem}
.hero p{opacity:.9;max-width:640px;margin:.5rem auto 1.2rem}
.modulos{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){ .modulos{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .modulos{grid-template-columns:repeat(3,1fr)} }
.modulo{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem;box-shadow:var(--shadow-sm)}
.modulo .ic{width:44px;height:44px;border-radius:12px;background:#eef2fb;display:grid;place-items:center;color:var(--blue);font-size:1.3rem;margin-bottom:.6rem}

/* Rodapé */
.rodape{border-top:1px solid var(--line);background:#fff;padding:1rem;text-align:center;color:var(--muted);font-size:.78rem;margin-top:auto}
.rodape a{color:var(--muted)}

/* Utilidades */
.flex{display:flex}
.between{justify-content:space-between}
.center{align-items:center}
.gap{gap:.6rem}
.wrap{flex-wrap:wrap}
.mt{margin-top:1rem}
.mb{margin-bottom:1rem}
.muted{color:var(--muted)}
.text-right{text-align:right}
.small{font-size:.8rem}
.pill{display:inline-block;background:#eef2fb;color:var(--navy);padding:.2rem .55rem;border-radius:8px;font-size:.72rem;font-weight:700}
.empty{text-align:center;color:var(--muted);padding:2rem 1rem}
.empty .ic{font-size:2rem;margin-bottom:.5rem;opacity:.5}
.divider{height:1px;background:var(--line);margin:1rem 0}