/* =====================================================================
   CarbonNexus — tema corporativo laranja/preto (mesma paleta do CarbonLog)
   ===================================================================== */
:root{
  --preto:#0f0f0f;
  --preto-2:#1a1a1a;
  --preto-3:#242424;
  --borda:#333333;
  --laranja:#ff6b00;
  --laranja-2:#ff8534;
  --laranja-escuro:#cc5500;
  --texto:#f2f2f2;
  --texto-suave:#a8a8a8;
  --vermelho:#e74c3c;
  --radius:10px;
  --sombra:0 8px 30px rgba(0,0,0,.5);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--preto);
  color:var(--texto);
  font-size:15px;
  line-height:1.5;
}
a{color:var(--laranja-2);text-decoration:none}
a:hover{color:var(--laranja)}

/* ---- Tela de login (tema claro, só aqui — resto do app continua escuro) ---- */
.login-page{
  min-height:100vh;
  display:flex;flex-direction:column;
  padding:24px;
  color:#1a1a1a;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,107,0,.09), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(255,107,0,.08), transparent 45%),
    linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.93)),
    url("../img/estoque-bg.jpg") center/cover no-repeat,
    #f4f4f4;
}
.login-conteudo{
  flex:1;width:100%;
  display:flex;align-items:center;justify-content:center;
}

/* ---- Carrossel de transportadoras parceiras (logo cloud com fade nas bordas) ---- */
.login-transportadoras{
  width:100%;max-width:680px;margin:0 auto 4px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}
.login-transportadoras-trilho{
  display:flex;align-items:center;gap:20px;width:max-content;
  animation:login-transportadoras-scroll 26s linear infinite;
}
.login-transportadora-chip{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  height:52px;padding:0 18px;
  background:#fff;border:1px solid #e4e4e4;border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  opacity:.9;
  transition:opacity .2s ease, transform .15s ease;
}
.login-transportadora-chip:hover{opacity:1;transform:translateY(-1px)}
.login-transportadora-chip img{
  height:32px;width:auto;max-width:130px;
  display:block;object-fit:contain;
}
@keyframes login-transportadoras-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){
  .login-transportadoras-trilho{animation:none}
}
.login-rodape{
  text-align:center;color:#767676;font-size:12px;
  margin-top:14px;
}
.login-card{
  width:100%;max-width:380px;
  background:#fff;
  border:1px solid #e4e4e4;
  border-radius:var(--radius);
  box-shadow:0 8px 30px rgba(0,0,0,.12);
  padding:36px 32px;
}
.login-brand{text-align:center;margin-bottom:28px}
.login-brand .logo-texto{font-size:24px;font-weight:800;letter-spacing:.5px;color:#1a1a1a}
.login-brand .logo-texto span{color:var(--laranja)}
.login-brand p{color:#767676;font-size:13px;margin-top:4px}

.campo{margin-bottom:16px}
.campo label{display:block;font-size:13px;color:#6b6b6b;margin-bottom:6px}
.campo input{
  width:100%;padding:11px 12px;
  background:#f7f7f7;
  border:1px solid #dcdcdc;
  border-radius:6px;
  color:#1a1a1a;
  font-size:14px;
}
.campo input:focus{outline:none;border-color:var(--laranja);background:#fff}

.btn-entrar{
  width:100%;padding:12px;margin-top:6px;
  background:var(--laranja);
  color:#fff;font-weight:700;font-size:15px;
  border:none;border-radius:6px;cursor:pointer;
  transition:background .15s ease;
}
.btn-entrar:hover{background:var(--laranja-2)}

.alerta-login{
  background:#fdecea;
  border:1px solid #f3b7b0;
  color:#c0392b;
  padding:10px 12px;border-radius:6px;
  font-size:13px;margin-bottom:16px;
}

/* ---- Dashboard (inspirado no layout do painel da Vercel) ---- */
.hub-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;height:56px;
  border-bottom:1px solid var(--borda);background:var(--preto-2);
}
.hub-brand{display:flex;align-items:center;gap:12px}

/* ---- Marca CarbonNexus: caixinha 3D girando (mesma técnica do loader
   de NFs do CarbonLog — perspective + preserve-3d + rotate contínuo —,
   só que laranja e com o ∞ nas faces em vez do papelão/"NF"). ---- */
.hub-mark-cena{display:inline-block;perspective:200px;vertical-align:middle;opacity:.82}
.hub-mark-cubo{
  display:inline-block;
  width:24px;height:24px;position:relative;transform-style:preserve-3d;
  animation:hub-mark-girar 3.2s infinite linear;
}
.hub-mark-face{
  position:absolute;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:#fff;line-height:1;
  border:1px solid var(--laranja-escuro);border-radius:3px;
  background:linear-gradient(160deg,var(--laranja-2) 0%,var(--laranja) 55%,var(--laranja-escuro) 100%);
}
.hub-mark-face--frente{transform:translateZ(12px)}
.hub-mark-face--tras{transform:translateZ(-12px) rotateY(180deg)}
.hub-mark-face--direita{transform:rotateY(90deg) translateZ(12px)}
.hub-mark-face--esquerda{transform:rotateY(-90deg) translateZ(12px)}
.hub-mark-face--topo{transform:rotateX(90deg) translateZ(12px)}
.hub-mark-face--base{transform:rotateX(-90deg) translateZ(12px)}
@keyframes hub-mark-girar{
  from{transform:rotateX(0deg) rotateY(0deg)}
  to{transform:rotateX(360deg) rotateY(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .hub-mark-cubo{animation:none}
}

/* Variante grande, usada no card de login */
.hub-mark-cena--grande{perspective:420px;margin-bottom:10px}
.hub-mark-cena--grande .hub-mark-cubo{width:64px;height:64px}
.hub-mark-cena--grande .hub-mark-face{width:64px;height:64px;font-size:30px;border-radius:6px}
.hub-mark-cena--grande .hub-mark-face--frente{transform:translateZ(32px)}
.hub-mark-cena--grande .hub-mark-face--tras{transform:translateZ(-32px) rotateY(180deg)}
.hub-mark-cena--grande .hub-mark-face--direita{transform:rotateY(90deg) translateZ(32px)}
.hub-mark-cena--grande .hub-mark-face--esquerda{transform:rotateY(-90deg) translateZ(32px)}
.hub-mark-cena--grande .hub-mark-face--topo{transform:rotateX(90deg) translateZ(32px)}
.hub-mark-cena--grande .hub-mark-face--base{transform:rotateX(-90deg) translateZ(32px)}
.hub-divisor{color:var(--borda);font-size:16px}
.hub-topbar .logo-texto{font-size:15px;font-weight:700}
.hub-topbar .logo-texto span{color:var(--laranja)}

.hub-user{display:flex;align-items:center;gap:14px}
.hub-avatar{
  width:28px;height:28px;border-radius:50%;
  background:var(--preto-3);border:1px solid var(--borda);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--texto-suave);
}
.hub-topbar .sair{font-size:13px;color:var(--texto-suave)}
.hub-topbar .sair:hover{color:var(--laranja)}

.hub-conteudo{padding:40px 28px;max-width:1160px;margin:0 auto}
.hub-cabecalho{margin-bottom:28px}
.hub-conteudo h1{font-size:20px;font-weight:600;margin-bottom:4px}
.hub-conteudo .sub{color:var(--texto-suave);font-size:13px}

.grid-servicos{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
.card-servico{
  background:var(--preto-2);border:1px solid var(--borda);border-radius:14px;
  padding:28px 30px;display:flex;flex-direction:column;min-height:190px;
  transition:border-color .15s ease, transform .15s ease;
}
.card-servico.disponivel:hover{border-color:var(--laranja-escuro);transform:translateY(-2px)}
.card-servico-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.card-servico-icone{
  display:flex;align-items:center;justify-content:center;
  color:var(--laranja-2);
}
.card-servico-icone svg{width:36px;height:36px}
.card-servico .status{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.card-servico .status.ok{background:var(--laranja);box-shadow:0 0 0 3px rgba(255,107,0,.18)}
.card-servico .status.pendente{background:var(--borda)}
.card-servico h3{font-size:18px;font-weight:600;margin-bottom:3px}
.card-servico-dominio{color:var(--texto-suave);font-size:13px;margin-bottom:14px;min-height:18px}
.card-servico-desc{color:var(--texto);font-size:14px;line-height:1.6;flex:1;margin-bottom:18px}
.card-servico-rodape{
  font-size:13px;color:var(--texto-suave);
  padding-top:14px;border-top:1px solid var(--preto-3);
}
.card-servico.disponivel .card-servico-rodape{color:var(--laranja-2)}