/* =====================================================================
   Marca Barber-App (login, primer ingreso, súper usuario)
   Azul noche + dorado, independiente del tema elegido por cada salón.
   ===================================================================== */
.brand, .brand-screen {
  --bg: #0A1640; --surface: #12235C; --surface-2: #0B1745; --text: #EEF2FF; --muted: #A9B4D6;
  --primary: #F5A70A; --primary-soft: rgba(245,167,10,.14); --on-primary: #14161F;
  --border: #263A7A; --success: #34D17E; --danger: #FF6B6B; --warn: #F5B21E;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  color-scheme: dark; color: var(--text);
}
.brand-screen {
  min-height: 100vh; min-height: 100dvh; display: grid; justify-items: center; align-content: start;
  padding: 7vh 16px 32px; text-align: center;
  background: radial-gradient(ellipse 90% 60% at 50% 18%, #1B2D6B 0%, #0A1640 60%, #08112F 100%);
}
.brand-screen .logo { width: 132px; height: 132px; border-radius: 30px; filter: drop-shadow(0 0 40px rgba(245,167,10,.35)); }
.brand-screen h1 { font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; margin: 18px 0 6px; }
.brand-screen h1 .accent { color: var(--primary); }
.brand-screen .tag { color: var(--muted); margin: 0 0 12px; }
.brand-screen .ver { display: inline-block; font-size: .8rem; font-weight: 600; padding: 3px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(18,35,92,.7); color: var(--text); margin-bottom: 26px; }
.brand-card { width: min(440px, 100%); text-align: left; background: rgba(18,35,92,.92); border: 1px solid var(--border);
  border-radius: 16px; padding: 26px; box-shadow: var(--shadow); display: grid; gap: 14px; }
.brand-card h2 { margin: 0; font-size: 1.35rem; }
.brand-card .sub { color: var(--muted); margin: -8px 0 4px; font-size: .92rem; }
.brand-card label > span { color: var(--text); font-weight: 600; }
.brand-card input, .brand-card select, .brand input, .brand select, .brand textarea {
  background: var(--surface-2); border-color: var(--border); color: var(--text); padding: 12px 13px; }
.brand-card .btn.primary, .brand .btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.brand-card .switch { text-align: center; color: var(--muted); font-size: .92rem; }
.brand-card .switch a { color: var(--primary); font-weight: 700; text-decoration: none; cursor: pointer; }
.brand-card .err { color: var(--danger); font-weight: 600; margin: 0; }
.brand-card .ok { color: var(--success); font-weight: 600; margin: 0; }
.brand-foot { color: var(--muted); font-size: .8rem; margin-top: 22px; opacity: .8; }
.brand-card .steps { display: grid; gap: 10px; counter-reset: s; padding: 0; margin: 0; list-style: none; }
.brand-card .steps li { display: flex; gap: 10px; align-items: flex-start; }
.brand-card .steps li::before { counter-increment: s; content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--primary); color: var(--on-primary); font-weight: 800; font-size: .8rem; }
.pw { position: relative; }
.pw button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; }
.code-input { letter-spacing: .5em; font-size: 1.4rem !important; text-align: center; font-variant-numeric: tabular-nums; }