/* ==========================================================================
   Painel Central — design system v2 ("Panze style")
   Launcher de aplicações (painel.attd.com.br) · navy + azul Atitude
   ========================================================================== */

:root{
  --bg:          #eef1f5;
  --surface:     #ffffff;
  --surface-2:   #f5f7fa;
  --border:      #eaeef3;
  --border-2:    #dde3ea;
  --text:        #18212f;
  --text-2:      #586273;
  --text-3:      #95a0b0;
  --navy:        #18212f;
  --navy-700:    #0f1620;
  --accent:      #1925d2;
  --accent-700:  #141ea8;
  --accent-soft: #eef0ff;
  --orange:      #f97316;
  --green:       #16a34a;
  --red:         #e5484d;
  --radius:      24px;
  --radius-md:   18px;
  --radius-sm:   13px;
  --pill:        999px;
  --shadow:      0 1px 2px rgba(24,33,47,.04), 0 6px 18px rgba(24,33,47,.05);
  --shadow-md:   0 10px 30px rgba(24,33,47,.10);
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  color:var(--text);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(820px 460px at 0% -4%, rgba(249,115,22,.12), transparent 60%),
    radial-gradient(820px 460px at 100% -4%, rgba(25,37,210,.12), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  min-height:100vh;
}
a{ color:inherit; text-decoration:none; }

/* ===== Shell =========================================================== */
.hub{ min-height:100vh; display:flex; flex-direction:column; }

/* ===== Topbar (marca + usuário) ======================================= */
.hub-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 36px;
}
.hub-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.hub-brand .brand-logo{ width:150px; max-width:100%; height:auto; display:block; }
.hub-brand .brand-modulo{
  font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-2); padding-left:3px;
}
.hub-user{
  display:flex; align-items:center; gap:11px; font-size:13px; color:var(--text-2);
}
.hub-user .who{
  display:flex; align-items:center; gap:9px;
  background:var(--surface); padding:6px 14px 6px 6px; border-radius:var(--pill);
  box-shadow:var(--shadow); font-weight:600; color:var(--text);
}
.hub-user .avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--navy); color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
}
.hub-role{
  display:inline-block; padding:1px 9px; border-radius:var(--pill);
  background:var(--accent-soft); color:var(--accent); font-size:10px; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em;
}
.hub-logout{
  color:var(--text-2); background:var(--surface); border:1px solid var(--border-2);
  padding:8px 14px; border-radius:var(--pill); font-size:12px; font-weight:700;
  box-shadow:var(--shadow); transition:background .15s, color .15s;
}
.hub-logout:hover{ background:#fff; color:var(--navy); }

/* ===== Conteúdo ======================================================== */
.hub-main{ flex:1; display:flex; flex-direction:column; align-items:center; padding:40px 24px 64px; }
.hub-hello{ text-align:center; margin-bottom:34px; }
.hub-hello h1{ font-size:32px; font-weight:800; letter-spacing:-.03em; margin:0 0 6px; color:var(--text); }
.hub-hello p{ font-size:14px; color:var(--text-2); margin:0; font-weight:500; }

/* ===== Grid de apps =================================================== */
.hub-grid{
  display:grid; gap:18px; width:100%; max-width:960px;
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width:760px){ .hub-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .hub-grid{ grid-template-columns:1fr; } }

.app-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px 22px;
  display:flex; flex-direction:column; gap:8px;
  position:relative; overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .16s, box-shadow .16s;
  min-height:158px;
}
.app-card:not(.is-soon):hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.app-card__icon{
  width:50px;height:50px;border-radius:15px;
  background:var(--accent-soft); color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:25px;
  margin-bottom:4px;
}
.app-card__name{ font-size:17px; font-weight:800; color:var(--text); letter-spacing:-.02em; }
.app-card__desc{ font-size:13px; color:var(--text-2); font-weight:500; }
.app-card__arrow{ position:absolute; top:22px; right:22px; color:var(--text-3); font-size:19px; transition:transform .16s, color .16s; }
.app-card:not(.is-soon):hover .app-card__arrow{ transform:translateX(4px); color:var(--accent); }

.app-card.is-soon{ opacity:.6; }
.app-card.is-soon .app-card__icon{ background:var(--surface-2); color:var(--text-3); }
.badge-soon{
  position:absolute; top:18px; right:18px;
  background:var(--surface-2); color:var(--text-3);
  font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--pill); border:1px solid var(--border);
}

.hub-alert{
  background:var(--accent-soft); border:1px solid #c7ccff; color:var(--accent-700);
  border-radius:var(--radius-sm); padding:12px 17px; font-size:13px; font-weight:600;
  max-width:960px; width:100%; margin:0 auto 22px; text-align:center;
}

.hub-foot{ text-align:center; color:var(--text-3); font-size:12px; padding:20px; font-weight:500; }

/* ===== Login =========================================================== */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
.login-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-md); border:1px solid var(--border); padding:34px; width:100%; max-width:380px; }
.login-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:8px; }
.login-brand .brand-logo{ width:160px; max-width:100%; height:auto; display:block; }
.login-brand .brand-modulo{ font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--text-2); padding-left:3px; }

.field{ margin-bottom:15px; }
.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.field input{ width:100%; padding:11px 14px; border:1px solid var(--border-2); border-radius:var(--radius-sm); font-size:14px; font-family:inherit; color:var(--text); }
.field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 16px; border-radius:var(--pill);
  font-size:14px; font-weight:700; cursor:pointer; border:1px solid transparent;
  background:var(--navy); color:#fff; width:100%; transition:background .15s, transform .12s;
}
.btn:hover{ background:var(--navy-700); transform:translateY(-1px); }

.alert{ border-radius:var(--radius-sm); padding:12px 15px; font-size:13px; margin-bottom:16px; border:1px solid; font-weight:500; }
.alert--error{ background:#fef0f0; border-color:#f9d3d3; color:#c93a3f; }