/* PATH: /public/css/app.css
   app.css (NOVO)
   - SOMENTE tokens (:root), dark tokens e base mínima.
*/

:root{
  --vx-brand: #8A05BE;
  --vx-brand-2: #6D17D6;

  --vx-game: #22D3EE;
  --vx-game-2: #A78BFA;

  --vx-success: #16A34A;
  --vx-danger:  #EF4444;
  --vx-warning: #F59E0B;

  --vx-bg: #FAFAFD;
  --vx-surface: #FFFFFF;
  --vx-surface-2: #F6F6FA;
  --vx-surface-3: #F0F1F7;

  --vx-text: #0B1220;
  --vx-muted: rgba(11,18,32,.58);
  --vx-faint: rgba(11,18,32,.38);

  --vx-border: rgba(11,18,32,.10);
  --vx-border-2: rgba(11,18,32,.06);

  --vx-shadow-xs: 0 4px 10px rgba(11,18,32,.05);
  --vx-shadow-sm: 0 8px 18px rgba(11,18,32,.06);
  --vx-shadow:    0 14px 30px rgba(11,18,32,.08);

  --vx-r-xs: 10px;
  --vx-r-sm: 14px;
  --vx-r-md: 18px;
  --vx-r-lg: 22px;

  --vx-pad-1: 10px;
  --vx-pad-2: 14px;
  --vx-pad-3: 18px;

  --vx-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --vx-ls-tight: -0.35px;

  --vx-ring: 0 0 0 2px rgba(138, 5, 190, .16);

  /* Bootstrap overrides */
  --bs-font-sans-serif: var(--vx-font);
  --bs-body-font-family: var(--vx-font);
  --bs-body-bg: var(--vx-bg);
  --bs-body-color: var(--vx-text);

  --bs-primary: var(--vx-brand);
  --bs-success: var(--vx-success);
  --bs-danger: var(--vx-danger);
  --bs-warning: var(--vx-warning);

  --bs-border-color: var(--vx-border-2);
  --bs-border-radius: var(--vx-r-sm);
  --bs-border-radius-sm: var(--vx-r-xs);
  --bs-border-radius-lg: var(--vx-r-md);

  --bs-link-color: var(--vx-brand);
  --bs-link-hover-color: var(--vx-brand-2);
}

body[data-theme="dark"]{
  --vx-bg: #0B0B12;
  --vx-surface: #111224;
  --vx-surface-2: #151733;
  --vx-surface-3: #191C3C;

  --vx-text: rgba(255,255,255,.92);
  --vx-muted: rgba(255,255,255,.62);
  --vx-faint: rgba(255,255,255,.40);

  --vx-border: rgba(255,255,255,.12);
  --vx-border-2: rgba(255,255,255,.08);

  --vx-shadow-xs: 0 10px 26px rgba(0,0,0,.35);
  --vx-shadow-sm: 0 14px 34px rgba(0,0,0,.40);
  --vx-shadow:    0 18px 50px rgba(0,0,0,.48);

  --bs-body-bg: var(--vx-bg);
  --bs-body-color: var(--vx-text);
  --bs-border-color: var(--vx-border-2);

  --vx-ring: 0 0 0 2px rgba(138, 5, 190, .28);
}

html, body { height: 100%; }
body{
  font-family: var(--vx-font);
  letter-spacing: var(--vx-ls-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.vitrix-bg{
  background: var(--vx-bg);
  color: var(--vx-text);
}

a{ text-decoration: none; }
.vx-muted{ color: var(--vx-muted) !important; }

/* ✅ padding do conteúdo para Topbar + BottomNav fixos */
.vitrix-main{
  /* padding-top: 14px; */
  padding-bottom: 92px;
}

body.vx-show-topbar .vitrix-main{
  padding-top: 84px;
}

/* AUTH FULL PAGE */
.vx-auth-modal .modal-content{
  border: 0;
  border-radius: 0;
}

.vx-auth-shell{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(130% 90% at 100% 0%, rgba(255, 211, 130, .36), transparent 58%),
    radial-gradient(130% 90% at 0% 100%, rgba(255, 64, 149, .24), transparent 52%),
    linear-gradient(180deg, #f7f8fb 0%, #eef0f6 100%);
}

.vx-auth-close{
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
}

.vx-auth-bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vx-auth-orb{
  position: absolute;
  border-radius: 999px;
  filter: blur(1px);
}

.vx-auth-orb-a{
  width: 260px;
  height: 260px;
  top: -90px;
  right: -60px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 61, 143, .36), rgba(255, 61, 143, 0));
}

.vx-auth-orb-b{
  width: 300px;
  height: 300px;
  bottom: -110px;
  left: -100px;
  background: radial-gradient(circle at 30% 30%, rgba(138,5,190,.24), rgba(138,5,190,0));
}

.vx-auth-orb-c{
  width: 180px;
  height: 180px;
  top: 32%;
  right: 10%;
  background: radial-gradient(circle at 40% 40%, rgba(255, 196, 99, .30), rgba(255, 196, 99, 0));
}

.vx-auth-wrap{
  position: relative;
  z-index: 1;
  max-width: 420px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 22px;
}

.vx-auth-brand{
  text-align: center;
  margin-bottom: 18px;
}

.vx-auth-logo{
  font-size: 36px;
  font-weight: 1000;
  letter-spacing: -1px;
  color: var(--vx-brand);
}

.vx-auth-tag{
  font-size: 12px;
  color: var(--vx-muted);
  font-weight: 700;
}

.vx-auth-stage{
  position: relative;
  border-radius: 26px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.90);
  box-shadow: 0 24px 44px rgba(11,18,32,.10);
  backdrop-filter: blur(8px);
  overflow: auto;
  max-height: calc(100dvh - 160px);
  padding: 0 40px;
}

.vx-auth-view{
  display: none;
  padding: 24px 18px 18px;
  animation: vx_auth_in .22s ease;
}

.vx-auth-stage.is-login .vx-auth-view[data-view="login"],
.vx-auth-stage.is-register .vx-auth-view[data-view="register"],
.vx-auth-stage.is-forgot .vx-auth-view[data-view="forgot"]{
  display: block;
}

@keyframes vx_auth_in{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}

.vx-auth-title{
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -0.8px;
  margin: 0;
  color: var(--vx-text);
}

.vx-auth-sub{
  margin-top: 4px;
  margin-bottom: 16px;
  color: var(--vx-muted);
  font-size: 13px;
}

.vx-auth-field{
  margin-bottom: 10px;
}

.vx-auth-field label{
  font-size: 12px;
  color: var(--vx-muted);
  font-weight: 800;
  margin-bottom: 6px;
  display: block;
}

.vx-auth-field input{
  width: 100%;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--vx-border-2);
  background: #fff;
  padding: 0 12px;
  color: var(--vx-text);
  font-weight: 700;
  outline: 0;
}

.vx-auth-field textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--vx-border-2);
  background: #fff;
  padding: 10px 12px;
  color: var(--vx-text);
  font-weight: 700;
  outline: 0;
  resize: vertical;
  min-height: 84px;
}

.vx-auth-field input[type="file"]{
  height: auto;
  padding: 10px 12px;
}

.vx-auth-field input:focus{
  border-color: color-mix(in srgb, var(--vx-brand) 42%, var(--vx-border-2));
  box-shadow: var(--vx-ring);
}

.vx-auth-field textarea:focus{
  border-color: color-mix(in srgb, var(--vx-brand) 42%, var(--vx-border-2));
  box-shadow: var(--vx-ring);
}

.vx-auth-field.has-error input,
.vx-auth-field.has-error textarea{
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239,68,68,.16);
}

.vx-auth-error{
  display: none;
  margin-top: 4px;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 700;
}

.vx-auth-field.has-error .vx-auth-error{
  display: block;
}

.vx-auth-help{
  display: block;
  margin-top: 4px;
  color: var(--vx-muted);
  font-size: 12px;
}

.vx-auth-general-error{
  margin-bottom: 12px;
  border-radius: 12px;
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.22);
  color: #7f1d1d;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 10px;
}

.vx-auth-bio-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vx-auth-bio-head small{
  color: var(--vx-muted);
  font-size: 12px;
  font-weight: 800;
}

.vx-auth-photo-preview{
  margin-top: 8px;
  width: 82px;
  height: 82px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--vx-border-2);
  background: rgba(11,18,32,.04);
}

.vx-auth-photo-preview img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vx-auth-field input[readonly]{
  background: #f4f5f9;
}

.vx-auth-btn-main{
  border: 0;
  border-radius: 14px;
  height: 46px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, #ff2f93 0%, var(--vx-brand) 52%, var(--vx-brand-2) 100%);
  box-shadow: 0 14px 28px rgba(138,5,190,.24);
}

.vx-auth-link{
  margin-top: 4px;
  border: 0;
  background: transparent;
  color: var(--vx-brand);
  font-weight: 800;
}

.vx-auth-sep{
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--vx-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.vx-auth-sep::before,
.vx-auth-sep::after{
  content: "";
  flex: 1;
  border-top: 1px solid var(--vx-border-2);
}

.vx-auth-social{
  display: grid;
  gap: 8px;
}

.vx-auth-social-btn{
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--vx-border-2);
  background: #fff;
  color: var(--vx-text);
  font-weight: 800;
}

.vx-auth-foot{
  text-align: center;
  font-size: 12px;
  color: var(--vx-muted);
  margin-top: 10px;
}

.vx-auth-inline{
  border: 0;
  background: transparent;
  color: var(--vx-brand);
  font-weight: 900;
  font-size: 12px;
  padding: 0;
  vertical-align: baseline;
}

/* NOTIFICATIONS SIDEBAR FULLSCREEN */
.vx-notif-sheet{
  --bs-offcanvas-width: 100vw;
  background: var(--vx-bg);
}

.vx-notif-sheet .offcanvas-header{
  border-bottom: 1px solid var(--vx-border-2);
  padding: 16px;
}

.vx-notif-sheet .offcanvas-title{
  font-weight: 900;
  letter-spacing: -0.4px;
}

.vx-notif-sheet .offcanvas-body{
  padding: 14px;
}

/* GUEST LOCKS */
.vx-locked{
  position: relative;
}

.vx-locked::after{
  content: "🔒";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--vx-border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  box-shadow: var(--vx-shadow-xs);
}

.vx-bnav-item.vx-locked{
  opacity: .92;
}

.vx-drawer-item.vx-locked{
  opacity: .88;
}

/* GUEST CONTEXT MODAL */
.vx-guard-modal .modal-content{
  border-radius: 18px;
}

.vx-guard-modal .modal-title{
  font-weight: 900;
  letter-spacing: -0.3px;
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 768px !important;
    }
}