/* ===============================
   APP HEADER GLOBAL (único)
================================ */

.appHeaderWrap{ background: transparent; }

.appHeaderCard{
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 18px 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.30);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.appHeaderTitle{
  font-size: 22px;
  font-weight: 800;
  color: var(--txt-main);
  line-height: 1.15;
}

.appHeaderSub{
  margin-top: 4px;
  color: var(--txt-soft);
  font-size: 13px;
}

.appHeaderRight{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.appUserPill{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--txt-main);
}

.appUserPill .muted{ color: var(--txt-soft); font-size: 12px; }

.appUserPill .role{
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
}

.appBtnLogout{ border-radius: 999px !important; }

@media (max-width: 720px){
  .appHeaderCard{ flex-direction:column; align-items:stretch; }
  .appHeaderRight{ justify-content:flex-start; }
}

/* ===== BODY GLOBAL ===== */
.app-body{
  min-height: 100vh;
  background:
    radial-gradient(1200px 900px at 20% 0%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 700px at 80% 10%, rgba(120,190,255,.08), transparent 55%),
    #27395b !important;
  color: #e7eefc !important;
}

.app-body .card,
.app-body .shadow-sm{
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.28) !important;
  color: #e7eefc !important;
}

.app-body .text-muted,
.app-body .small,
.app-body .form-label{
  color: #9fb2d6 !important;
}

.app-body .form-control{
  background: rgba(25,17,54,.39) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
}

.app-body .form-control::placeholder{
  color: rgba(159,178,214,.55) !important;
}

.app-body .form-control:focus{
  border-color: rgba(37,99,235,.7) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.18) !important;
}

.app-body a{
  color: #9fc4ff;
}

.app-body .btn-primary{
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(14,165,233,.9)) !important;
  border: 0 !important;
  border-radius: 12px !important;
}

.app-body .btn-outline-light{
  border-radius: 999px !important;
}