/* ============================================================
   MASON PASS — Portal do Irmão (mobile-first)
   ============================================================ */

:root {
  --bg:      #07050e; --bg2: #0c091a; --bg3: #110d22;
  --purple:  #6D28D9; --purple-lt: #8B5CF6; --purple-dk: #3B1760;
  --gold:    #C9A84C; --gold-lt: #F2D58A;
  --green:   #22C55E; --red: #EF4444; --yellow: #F59E0B;
  --text1:   rgba(255,255,255,0.92); --text2: rgba(255,255,255,0.60);
  --text3:   rgba(255,255,255,0.30);
  --border:  rgba(255,255,255,0.07); --border-gold: rgba(201,168,76,0.2);
  --nav-h:   64px; --top-h: 54px;
  --font-h:  'Playfair Display', Georgia, serif;
  --font-b:  'Poppins', system-ui, sans-serif;
  --tr:      0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { -webkit-font-smoothing: antialiased; font-size: 15px; }
body { background: var(--bg); color: var(--text1); font-family: var(--font-b); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ===== PORTAL BODY ===== */
.portal-body {
  min-height: 100vh;
  display: flex; flex-direction: column;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom,0px));
  padding-top: var(--top-h);
}

/* ===== TOPBAR ===== */
.portal-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--top-h);
  background: rgba(7,5,14,0.95);
  border-bottom: 1px solid var(--border-gold);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  backdrop-filter: blur(12px);
  padding-top: env(safe-area-inset-top, 0);
}
.portal-brand-name { display: block; font-size: 13px; font-weight: 600; color: var(--gold); letter-spacing: 1px; }
.portal-brand-sub  { display: block; font-size: 10px; color: var(--text3); letter-spacing: 1.5px; text-transform: uppercase; }
.portal-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-dk), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}

/* ===== MAIN ===== */
.portal-main { flex: 1; padding: 20px 16px; max-width: 520px; width: 100%; margin: 0 auto; }

/* ===== NAV BOTTOM ===== */
.portal-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0));
  background: rgba(12,9,26,0.98);
  border-top: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-around;
  padding: 10px 0 env(safe-area-inset-bottom, 0);
  backdrop-filter: blur(16px);
}
.pnav-link {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--text3); font-size: 10px; font-weight: 500;
  padding: 4px 12px; transition: color var(--tr);
  flex: 1;
}
.pnav-link:hover, .pnav-link.active { color: var(--gold); }
.pnav-link svg { opacity: 0.6; transition: opacity var(--tr); }
.pnav-link.active svg, .pnav-link:hover svg { opacity: 1; }

/* ===== PAGE HEADER ===== */
.ppage-header { margin-bottom: 20px; }
.ppage-title  { font-family: var(--font-h); font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.ppage-sub    { font-size: 12px; color: var(--text3); }

/* ===== CARDS ===== */
.pcard { background: var(--bg2); border: 1px solid var(--border); margin-bottom: 14px; }
.pcard-header { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.pcard-title  { font-size: 13px; font-weight: 600; color: var(--text2); }
.pcard-body   { padding: 16px; }
.pcard-action { font-size: 12px; color: var(--gold); }
.pcard-action:hover { color: var(--gold-lt); }

/* ===== STAT CARDS ===== */
.pstats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.pstat { background: var(--bg2); border: 1px solid var(--border); padding: 16px; }
.pstat-val  { font-family: var(--font-h); font-size: 22px; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 4px; }
.pstat-lbl  { font-size: 11px; color: var(--text3); }
.pstat-gold { border-color: var(--border-gold); }
.pstat-gold .pstat-val { color: var(--gold); }

/* ===== TICKET CARD ===== */
.ticket-card {
  background: var(--bg2); border: 1px solid var(--border-gold);
  padding: 18px; margin-bottom: 14px; cursor: pointer;
  transition: background var(--tr), border-color var(--tr);
}
.ticket-card:hover { background: rgba(201,168,76,0.04); }
.ticket-evento    { font-size: 14px; font-weight: 600; color: var(--text1); margin-bottom: 6px; }
.ticket-meta      { font-size: 11px; color: var(--text3); margin-bottom: 10px; }
.ticket-footer    { display: flex; align-items: center; justify-content: space-between; }
.ticket-code      { font-family:'Courier New',monospace; font-size:12px; color:var(--gold);
                    background:rgba(201,168,76,0.08); padding:2px 8px; letter-spacing:1px;
                    border:1px solid var(--border-gold); }
.ticket-tipo      { font-size:11px;color:var(--text3); }

/* ===== TICKET DETALHE ===== */
.ticket-qr-box {
  background: #0B0612; border: 1px solid var(--border-gold);
  padding: 20px; text-align: center; margin-bottom: 20px;
}
.ticket-qr-codigo {
  font-family:'Courier New',monospace; font-size:20px; font-weight:700;
  color:var(--gold); letter-spacing:3px; margin-bottom:14px;
}
.ticket-qr-img { width:180px; height:180px; display:block; margin:0 auto 10px; }
.ticket-qr-hint { font-size:11px; color:var(--text3); }

/* ===== MENSALIDADE ROW ===== */
.mens-row { display: flex; align-items: center; justify-content: space-between;
            padding: 12px 0; border-bottom: 1px solid var(--border); }
.mens-row:last-child { border-bottom: none; }
.mens-competencia { font-size: 13px; font-weight: 500; color: var(--text1); }
.mens-valor       { font-size: 13px; color: var(--text2); }

/* ===== FORMULÁRIOS ===== */
.form-group { display:flex;flex-direction:column;gap:6px;margin-bottom:14px; }
.form-label { font-size:12px;font-weight:500;color:var(--text2); }
.form-input, .form-select {
  background:var(--bg3);border:1px solid var(--border);
  color:var(--text1);font-family:var(--font-b);font-size:14px;
  padding:10px 14px;outline:none;width:100%;border-radius:0;
  transition:border-color var(--tr);
}
.form-input:focus { border-color:rgba(109,40,217,0.5); }

/* ===== BOTÕES ===== */
.btn { display:inline-flex;align-items:center;justify-content:center;gap:8px;
       padding:12px 20px;font-family:var(--font-b);font-size:14px;
       font-weight:600;border:none;cursor:pointer;transition:var(--tr); }
.btn-primary { background:linear-gradient(135deg,var(--gold),var(--gold-lt));color:var(--bg); }
.btn-primary:hover { box-shadow:0 4px 16px rgba(201,168,76,0.3); }
.btn-block { width:100%; }
.btn-outline { background:transparent;color:var(--text2);border:1px solid var(--border); }

/* ===== BADGES ===== */
.badge { display:inline-flex;align-items:center;padding:3px 10px;
         font-size:11px;font-weight:600;letter-spacing:0.5px;white-space:nowrap; }
.badge-green  { background:rgba(34,197,94,0.12); color:#86efac; border:1px solid rgba(34,197,94,0.25); }
.badge-red    { background:rgba(239,68,68,0.12);  color:#fca5a5; border:1px solid rgba(239,68,68,0.25); }
.badge-gold   { background:rgba(201,168,76,0.12); color:var(--gold);border:1px solid rgba(201,168,76,0.25); }
.badge-gray   { background:rgba(255,255,255,0.05);color:var(--text3);border:1px solid rgba(255,255,255,0.1); }

/* ===== FLASH ===== */
.flash { display:flex;align-items:center;gap:10px;padding:12px 16px;
         font-size:13px;border-left:3px solid;margin-bottom:16px; }
.flash-success { background:rgba(34,197,94,0.08); border-color:var(--green); color:#86efac; }
.flash-error   { background:rgba(239,68,68,0.08); border-color:var(--red);   color:#fca5a5; }

/* ===== UTILITÁRIOS ===== */
.text-muted { color:var(--text3); }
.text-gold  { color:var(--gold); }
.separator  { height:1px;background:var(--border);margin:16px 0; }
.empty-state { text-align:center;padding:40px 0;color:var(--text3);font-size:13px; }
.empty-state strong { display:block;margin-bottom:8px;font-size:22px;opacity:0.3; }

/* ===== ALERT ===== */
.palert { display:flex;align-items:center;gap:12px;padding:14px;
          border:1px solid;margin-bottom:16px;font-size:13px; }
.palert-warn { background:rgba(245,158,11,0.08);border-color:rgba(245,158,11,0.3);color:#fcd34d; }
.palert a { color:inherit;font-weight:600;margin-left:auto;font-size:12px; }