/* ============================================================
   Painel de Requisições EMTEC
   Paleta oficial da marca: azul-marinho, azul e o cinza do logo.
   ============================================================ */
:root{
  --navy-900:#0F2444;
  --navy-800:#16304F;
  --navy-700:#1B365A;
  --navy-600:#1E3A5F;
  --blue-700:#1C479A;
  --blue-600:#1A55D6;
  --blue-500:#2563EB;
  --blue-400:#60A5FA;

  --cinza-marca:#949599;
  --azul-marca:#213E7A;

  --paper:#EEF1F5;
  --paper-2:#FFFFFF;
  --linha:#D5DCE5;
  --tinta:#16304F;
  --tinta-suave:#5B6980;
  --steel:#C7D0DD;

  --verde:#1F7A4D;
  --verde-bg:#E7F3EC;
  --ambar:#B87A12;
  --ambar-bg:#FBF1DE;
  --vermelho:#C0392B;
  --vermelho-bg:#FBEAE8;

  --raio:10px;
  --sombra:0 1px 3px rgba(15,36,68,.08);
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--paper);
  color:var(--tinta);
  font-size:15px;
  line-height:1.5;
}
a{color:var(--blue-700);}

/* ── Cabeçalho ───────────────────────────────── */
.topbar{
  background:linear-gradient(100deg,var(--navy-900) 0%,var(--navy-600) 42%,
             var(--blue-700) 74%,var(--blue-600) 100%);
  color:#fff;
  padding:0 22px;
  display:flex;
  align-items:center;
  gap:26px;
  min-height:58px;
  flex-wrap:wrap;
}
.topbar .logo{height:26px;width:auto;display:block;flex-shrink:0;}
.topbar .espaco{flex:1;}
.topbar .usuario{font-size:13px;color:#DCE6F5;display:flex;align-items:center;gap:10px;}
.topbar .usuario strong{color:#fff;font-weight:600;}
.topbar .perfil{
  background:rgba(255,255,255,.16);padding:3px 10px;border-radius:99px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
}
.topbar a{color:#DCE6F5;text-decoration:none;font-size:13.5px;}
.topbar a:hover{color:#fff;}

.nav{
  background:var(--navy-800);
  padding:0 22px;
  display:flex;
  gap:2px;
  overflow-x:auto;
}
.nav a{
  color:var(--steel);text-decoration:none;padding:11px 15px;
  font-size:13.5px;white-space:nowrap;border-bottom:3px solid transparent;
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.05);}
.nav a.ativo{color:#fff;border-bottom-color:var(--blue-400);font-weight:600;}

.container{max-width:1240px;margin:0 auto;padding:22px 20px 60px;}

/* ── Blocos ──────────────────────────────────── */
.painel{
  background:var(--paper-2);border:1px solid var(--linha);
  border-radius:var(--raio);padding:20px;margin-bottom:18px;
  box-shadow:var(--sombra);
}
.painel h2{margin:0 0 16px;font-size:16px;color:var(--navy-700);}
h1{font-size:22px;margin:0 0 18px;color:var(--navy-800);}

.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;}
.campo{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.campo label{
  font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--tinta-suave);
}
input,select,textarea{
  font-family:inherit;font-size:14px;padding:9px 11px;
  border:1px solid var(--linha);border-radius:7px;
  background:#fff;color:var(--tinta);width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--blue-500);
  box-shadow:0 0 0 3px rgba(37,99,235,.14);
}
input[readonly],input:disabled,select:disabled{background:#F1F4F8;color:var(--tinta-suave);}
textarea{resize:vertical;min-height:60px;}

/* ── Botões ──────────────────────────────────── */
.btn{
  display:inline-block;padding:10px 18px;border:none;border-radius:7px;
  font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;
  text-align:center;transition:background .15s;
}
.btn-primario{background:var(--blue-700);color:#fff;}
.btn-primario:hover{background:var(--navy-600);}
.btn-neutro{background:#fff;color:var(--navy-700);border:1px solid var(--linha);}
.btn-neutro:hover{background:var(--paper);border-color:var(--steel);}
.btn-verde{background:var(--verde);color:#fff;}
.btn-verde:hover{background:#186340;}
.btn-vermelho{background:var(--vermelho);color:#fff;}
.btn-vermelho:hover{background:#A32E22;}
.btn-pequeno{padding:6px 12px;font-size:13px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ── Cartões de estatística ──────────────────── */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px;}
.cartao{
  background:var(--paper-2);border:1px solid var(--linha);
  border-left:4px solid var(--steel);border-radius:var(--raio);
  padding:14px 16px;box-shadow:var(--sombra);
}
.cartao .rotulo{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--tinta-suave);
}
.cartao .valor{font-size:26px;font-weight:800;margin-top:4px;color:var(--navy-800);}
.cartao.pendente{border-left-color:var(--ambar);}
.cartao.aprovada{border-left-color:var(--verde);}
.cartao.parcial{border-left-color:var(--blue-500);}
.cartao.rejeitada{border-left-color:var(--vermelho);}

/* ── Tabelas ─────────────────────────────────── */
.tabela-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:14px;}
th{
  background:var(--navy-700);color:#fff;text-align:left;padding:10px;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;
  font-weight:700;white-space:nowrap;
}
td{padding:10px;border-bottom:1px solid var(--linha);vertical-align:top;}
tbody tr:hover{background:#F5F8FC;}
td.num{text-align:right;white-space:nowrap;}

.pill{
  display:inline-block;padding:3px 10px;border-radius:99px;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pill.pendente{background:var(--ambar-bg);color:var(--ambar);}
.pill.aprovada{background:var(--verde-bg);color:var(--verde);}
.pill.aprovada_parcial{background:#E4EDFC;color:var(--blue-700);}
.pill.rejeitada{background:var(--vermelho-bg);color:var(--vermelho);}
.pill.tipo{background:var(--paper);color:var(--tinta-suave);border:1px solid var(--linha);}

/* ── Avisos ──────────────────────────────────── */
.aviso{padding:12px 16px;border-radius:var(--raio);margin-bottom:16px;font-size:14px;}
.aviso.ok{background:var(--verde-bg);color:var(--verde);border:1px solid #BFE0CD;}
.aviso.erro{background:var(--vermelho-bg);color:var(--vermelho);border:1px solid #F0C6C1;}
.aviso.atencao{background:#E4EDFC;color:var(--blue-700);border:1px solid #C3D6F5;}

.vazio{text-align:center;padding:44px 20px;color:var(--tinta-suave);}

/* ── Telas de acesso ─────────────────────────── */
.tela-login{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-600) 38%,
             var(--blue-700) 72%,var(--blue-600) 100%);
}
.caixa-login{width:100%;max-width:420px;text-align:center;color:#fff;}
.caixa-login .marca{
  display:inline-block;background:rgba(255,255,255,.10);
  padding:16px 26px;border-radius:12px;margin-bottom:26px;
  border:1px solid rgba(255,255,255,.14);
}
.caixa-login .marca img{height:38px;width:auto;display:block;}
.caixa-login h1{font-size:26px;font-weight:700;color:#fff;margin:0 0 6px;}
.caixa-login .sub{color:#B9CCE8;font-size:14px;margin-bottom:10px;}
.caixa-login .risco{
  width:44px;height:3px;background:rgba(255,255,255,.35);
  border-radius:2px;margin:0 auto 26px;
}
.caixa-login .campo{text-align:left;margin-bottom:16px;}
.caixa-login label{color:#B9CCE8;letter-spacing:.6px;}
.caixa-login input{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:#fff;padding:12px 14px;font-size:15px;
}
.caixa-login input::placeholder{color:#7F97BC;}
.caixa-login input:focus{
  background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.45);
  box-shadow:0 0 0 3px rgba(255,255,255,.10);
}
.caixa-login .btn{
  width:100%;margin-top:8px;background:#fff;color:var(--navy-700);
  font-weight:700;padding:13px;font-size:15px;
}
.caixa-login .btn:hover{background:#E8EFF9;}
.caixa-login .aviso{text-align:left;}
.caixa-login .aviso.erro{
  background:rgba(192,57,43,.20);color:#FFD9D4;border-color:rgba(255,150,140,.35);
}
.rodape-login{color:#93A9CA;font-size:12px;margin-top:22px;line-height:1.7;}

/* ── Itens ───────────────────────────────────── */
.linha-item{
  border:1px solid var(--linha);border-radius:var(--raio);
  padding:14px;margin-bottom:12px;background:#FAFCFE;
}
.linha-item .cabecalho{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.linha-item .cabecalho strong{font-size:12.5px;color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.4px;}
.remover{
  background:none;border:none;color:var(--vermelho);cursor:pointer;
  font-size:18px;line-height:1;padding:2px 6px;width:auto;
}
.total-linha{
  display:flex;justify-content:flex-end;gap:14px;align-items:baseline;
  font-size:18px;font-weight:800;padding:14px 4px 0;color:var(--navy-800);
}
.total-linha .rotulo{font-size:12.5px;font-weight:700;color:var(--tinta-suave);text-transform:uppercase;}

.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.filtros .campo{margin-bottom:0;min-width:160px;flex:1;}

.paginacao{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:18px;font-size:14px;}

.linha-dados{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;}
.dado .rotulo{font-size:11px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;color:var(--tinta-suave);}
.dado .valor{font-size:15px;}

.caixa-senha{
  background:#E4EDFC;border:1px solid #C3D6F5;border-radius:var(--raio);
  padding:16px;margin-bottom:16px;
}
.caixa-senha code{
  background:#fff;padding:5px 12px;border-radius:5px;font-size:16px;
  font-weight:700;border:1px solid var(--linha);color:var(--navy-800);
  display:inline-block;margin:6px 0;
}

@media (max-width:700px){
  .container{padding:16px 12px 50px;}
  .painel{padding:16px;}
  th,td{padding:8px 6px;font-size:13px;}
  .topbar{padding:10px 14px;gap:12px;min-height:auto;}
  .topbar .logo{height:22px;}
  .topbar .usuario{font-size:12px;}
  .nav{padding:0 10px;}
  .caixa-login .marca img{height:32px;}
  .caixa-login h1{font-size:22px;}
}