:root{
  --navy:#0f172a;
  --blue:#2563eb;
  --blue-light:#3b82f6;
  --blue-soft:#dbeafe;
  --muted:#64748b;
  --line:#e2e8f0;
  --bg:#f8fafc;
  --surface:#ffffff;
  --text:#334155;
  --heading:#0f172a;
  --green:#16a34a;
  --green-soft:#dcfce7;
  --amber:#b45309;
  --amber-soft:#fef3c7;
  --red:#dc2626;
  --red-soft:#fee2e2;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 12px 28px rgba(15,23,42,.08);
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
}
a{color:var(--blue); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{color:var(--heading); margin:0 0 8px;}

/* --- tela de login / esqueci senha (sem sidebar) --- */
.auth-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.auth-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  padding:36px 32px; width:100%; max-width:380px;
}
.auth-card .brand{display:flex; align-items:center; margin-bottom:24px;}
.auth-card .brand img{height:34px; width:auto; display:block;}
.auth-card h1{font-size:1.2rem; margin-bottom:4px;}
.auth-card p.subtitulo{color:var(--muted); font-size:.88rem; margin:0 0 20px;}

/* --- app shell (topbar + sidebar) --- */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:220px; flex-shrink:0; background:var(--navy); color:#cbd5e1; padding:22px 14px;
  display:flex; flex-direction:column; gap:4px;
}
.sidebar .brand{display:flex; align-items:center; padding:0 8px 20px;}
.sidebar .brand img{height:28px; width:auto; display:block;}
.sidebar nav{display:flex; flex-direction:column; gap:2px; flex:1;}
.sidebar nav a{
  color:#cbd5e1; padding:10px 12px; border-radius:8px; font-size:.9rem; font-weight:600;
  display:flex; align-items:center; gap:10px;
}
.sidebar nav a:hover{background:rgba(255,255,255,.06); text-decoration:none; color:#fff;}
.sidebar nav a.ativo{background:var(--blue); color:#fff;}
.sidebar .rodape-usuario{border-top:1px solid rgba(255,255,255,.12); padding-top:14px; font-size:.82rem;}
.sidebar .rodape-usuario .nome{color:#fff; font-weight:700; display:block; margin-bottom:2px;}
.sidebar .rodape-usuario a{color:#94a3b8;}

.conteudo{flex:1; min-width:0;}
.topbar{
  background:var(--surface); border-bottom:1px solid var(--line); padding:16px 26px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:20;
}
.topbar h1{font-size:1.15rem; margin:0;}
.topbar .btn-menu{display:none;}
main{padding:26px;}

/* --- componentes --- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:22px;}
.grid-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px;}
.stat-tile{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px;}
.stat-tile .valor{font-size:1.9rem; font-weight:800; color:var(--heading);}
.stat-tile .rotulo{font-size:.82rem; color:var(--muted); font-weight:600;}

.form-field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.form-field label{font-size:.82rem; font-weight:700; color:var(--heading);}
.form-field input, .form-field select, .form-field textarea{
  border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-size:.92rem; font-family:inherit;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:2px solid var(--blue-light); outline-offset:1px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; border-radius:9px;
  padding:10px 16px; font-size:.88rem; font-weight:700; cursor:pointer; font-family:inherit; text-decoration:none;
}
.btn-primary{background:var(--blue); color:#fff;}
.btn-primary:hover{background:#1d4ed8;}
.btn-secundario{background:#fff; color:var(--navy); border:1.5px solid var(--line);}
.btn-secundario:hover{border-color:var(--blue);}
.btn-perigo{background:var(--red-soft); color:var(--red);}
.btn-perigo:hover{background:#fecaca;}
.btn-full{width:100%;}
.btn-sm{padding:6px 12px; font-size:.8rem;}

.alerta{padding:12px 16px; border-radius:10px; font-size:.88rem; margin-bottom:18px;}
.alerta-sucesso{background:var(--green-soft); color:#166534;}
.alerta-erro{background:var(--red-soft); color:#991b1b;}

table{width:100%; border-collapse:collapse; font-size:.88rem;}
table th{text-align:left; color:var(--muted); font-weight:700; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; padding:10px 12px; border-bottom:1px solid var(--line);}
table td{padding:12px; border-bottom:1px solid var(--line); vertical-align:middle;}
table tr:last-child td{border-bottom:none;}
table tr:hover td{background:#f8fafc;}

.badge{display:inline-block; padding:3px 10px; border-radius:100px; font-size:.74rem; font-weight:700;}
.badge-cinza{background:#f1f5f9; color:#475569;}
.badge-azul{background:var(--blue-soft); color:#1d4ed8;}
.badge-verde{background:var(--green-soft); color:#166534;}
.badge-amarelo{background:var(--amber-soft); color:var(--amber);}
.badge-vermelho{background:var(--red-soft); color:#991b1b;}

.filtros{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; align-items:end;}
.paginacao{display:flex; gap:8px; justify-content:center; margin-top:18px;}
.paginacao a, .paginacao span{padding:6px 12px; border-radius:8px; font-size:.85rem; border:1px solid var(--line);}
.paginacao a.ativo{background:var(--blue); color:#fff; border-color:var(--blue);}

.detalhe-grid{display:grid; grid-template-columns:2fr 1fr; gap:20px;}
.lista-arquivos{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.lista-arquivos li{display:flex; justify-content:space-between; align-items:center; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:.85rem;}

@media (max-width:820px){
  .sidebar{position:fixed; left:-240px; top:0; bottom:0; z-index:40; transition:left .2s; box-shadow:16px 0 30px rgba(0,0,0,.2);}
  .sidebar.aberta{left:0;}
  .topbar .btn-menu{display:inline-flex;}
  .detalhe-grid{grid-template-columns:1fr;}
  main{padding:16px;}
}