:root{
  --azul-escuro:#101d33; --azul:#16255a; --laranja:#f2a71b;
  --fundo:#eef1f6; --texto:#1c2740; --suave:#6b7a92; --linha:#e2e7f0;
  --ok:#1fae5a; --erro:#d4463a;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Arial,sans-serif;background:var(--fundo);color:var(--texto)}
a{color:inherit}

/* ---------- Login ---------- */
.login-tela{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--azul) 0%,#0b1730 100%);padding:20px}
.login-caixa{width:100%;max-width:400px;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-topo{background:var(--azul-escuro);padding:28px 30px;color:#fff}
.selo-marca{color:var(--laranja);font-size:12px;letter-spacing:2px;font-weight:700}
.login-topo h1{font-size:20px;margin:8px 0 4px}
.login-topo p{margin:0;color:#b8c2d9;font-size:13px}
.login-corpo{padding:26px 30px 30px}
.campo{margin-bottom:16px}
.campo label{display:block;font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--suave);margin-bottom:6px}
.campo input,.campo select{width:100%;padding:11px 12px;border:1px solid var(--linha);border-radius:9px;font-size:15px}
.campo input:focus,.campo select:focus{outline:2px solid var(--azul);outline-offset:1px}
.codigo-campo{letter-spacing:10px;font-size:22px;text-align:center;font-weight:700}
.botao{padding:11px 18px;border-radius:9px;border:none;font-weight:700;cursor:pointer;font-size:14px}
.botao.destaque{background:var(--laranja);color:var(--azul-escuro)}
.botao.destaque:hover{filter:brightness(1.05)}
.botao.claro{background:#eef1f6;color:var(--azul)}
.alerta{padding:10px 14px;border-radius:9px;font-size:13px;margin-bottom:14px}
.alerta.erro{background:#fde9e7;color:#9c2c22}
.alerta.info{background:#e9f2ff;color:#1a4a8a}

/* ---------- Painel ---------- */
.topo{display:flex;align-items:center;justify-content:space-between;background:var(--azul-escuro);
  color:#fff;padding:14px 26px}
.topo-marca{display:flex;align-items:center;gap:12px}
.logo{width:36px;height:36px;border-radius:9px;background:var(--laranja);color:var(--azul-escuro);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.topo-txt{display:flex;flex-direction:column;line-height:1.25}
.topo-txt small{color:#9fb0cc;font-size:10.5px;letter-spacing:1.5px}
.topo-usuario{display:flex;align-items:center;gap:14px}
.chip{background:rgba(255,255,255,.1);padding:6px 12px;border-radius:20px;font-size:13px}
.sair{font-size:13px;color:#cfd8e8;text-decoration:none}
.sair:hover{color:#fff}
.conteudo{max-width:1180px;margin:0 auto;padding:28px 22px 60px}
.cabecalho-pagina h1{margin:0 0 4px;font-size:22px}
.cabecalho-pagina p{margin:0 0 22px;color:var(--suave);font-size:14px}

.grade-cartoes{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.cartao-sistema{display:block;background:#fff;border-radius:14px;padding:18px;text-decoration:none;color:inherit;
  box-shadow:0 2px 10px rgba(16,29,51,.06);border:1px solid var(--linha);transition:transform .12s, box-shadow .12s}
.cartao-sistema:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,29,51,.14)}
.cartao-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.avatar{width:38px;height:38px;border-radius:10px;background:var(--azul);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:16px}
.status-dot{width:10px;height:10px;border-radius:50%;background:var(--suave)}
.status-dot.online{background:var(--ok);box-shadow:0 0 0 3px rgba(31,174,90,.18)}
.status-dot.offline{background:var(--erro);box-shadow:0 0 0 3px rgba(212,70,58,.18)}
.cartao-nome{font-weight:700;font-size:15.5px;margin-bottom:4px}
.cartao-desc{color:var(--suave);font-size:12.5px;margin-bottom:14px;min-height:32px}
.cartao-rodape{font-size:11.5px;color:var(--suave);font-weight:600}