/* ============================================================
   BARBERFLOW — DESIGN TOKENS & BASE LAYOUT
   Inclua este arquivo em TODOS os apps antes de components.css
============================================================ */

/* ── Fontes (Poppins + Playfair Display + Special Elite) ──── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Poppins:wght@400;500;600;700&family=Special+Elite&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Nova base clara premium */
  --bg:           #F5E9DC;
  --surface:      #F0E4D7;
  --header-bg:    #2B1B12;
  --card:         #FFFFFF;
  --card2:        #F0E4D7;

  /* Paleta principal */
  --gold:         #D4A017;
  --gold-light:   #F2B705;
  --gold-dark:    #6B4A32;
  --gold-muted:   rgba(212, 160, 23, .14);
  --gold-border:  rgba(107, 74, 50, .22);

  /* CTA */
  --cta:          #F2B705;
  --cta-text:     #2B1B12;

  /* Marrom */
  --brown:        #5C3317;
  --brown-light:  #7A4520;
  --brown-border: rgba(92, 51, 23, .50);

  /* Texto */
  --text:         #2A211B;
  --text-muted:   #6B5A4A;
  --text-dim:     #8B7A69;
  --text-on-surface: #F5E9DC;
  --text-on-surface-muted: #E7D7C8;

  /* Borda/sombra/overlay */
  --border-soft:  #D9C7B6;
  --shadow-soft:  0 8px 24px rgba(43, 27, 18, .10);
  --shadow-menu:  12px 0 34px rgba(43, 27, 18, .20);
  --overlay:      rgba(43, 27, 18, .26);
  --overlay-soft: rgba(43, 27, 18, .18);

  /* BarberPole clássico (mantido por decisão) */
  --wood-light:   #4a2a08;
  --wood-1:       #5C3317;
  --wood-2:       #3a1f00;
  --wood-dark:    #2a0e00;
  --wood-darker:  #1a0800;

  /* Feedback */
  --danger:       #e05252;
  --success:      #52c97a;
  --warning:      #e0a832;

  /* Azul complementar */
  --blue:         #0D1F3C;
  --blue-light:   #1A3460;
  --blue-border:  rgba(26, 52, 96, .60);

  /* Raios */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-full: 9999px;

  /* Layout */
  --nav-h:    62px;
  --header-h: 64px;

  /* Animação */
  --ease: .22s cubic-bezier(.4, 0, .2, 1);

  /* Tipografia */
  --font: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;

  /* Hierarquia tipográfica reutilizável */
  --fs-title-large: clamp(1.375rem, 2.2vw, 1.75rem); /* 22px-28px */
  --fs-section-title: clamp(1rem, 1.6vw, 1.125rem);  /* 16px-18px */
  --fs-card-title: 0.95rem;                           /* ~15px */
  --fs-body: 0.9rem;                                  /* ~14px */
  --fs-caption: 0.8rem;                               /* ~13px */

  --fw-title-large: 700;
  --fw-section-title: 600;
  --fw-card-title: 600;
  --fw-body: 500;
  --fw-caption: 400;

  --lh-title-large: 1.25;
  --lh-section-title: 1.35;
  --lh-body: 1.5;
  --lh-caption: 1.45;

  /* Espaçamentos de hierarquia */
  --space-title-content: 24px;
  --space-section: 16px;
  --space-item: 10px;
}

/* ── Base ──────────────────────────────────────────────────── */
html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Tipografia Base ───────────────────────────────────────── */
p, input, textarea, button, label, span, small, li {
  font-family: var(--font);
}

/* ── SPA Root ──────────────────────────────────────────────── */
#app {
  position: fixed;
  inset: 0;
  z-index: 1; /* contexto explícito — menu-drawer (9700) e modais externos ficam acima */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* corta slides fora da viewport */
}

/* ── Telas (screens) ──────────────────────────────────────── */
.tela {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* scroll nativo iOS/Android WebView */
  background: var(--bg);
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  scroll-behavior: smooth;
}

/* Home: base permanente — fica embaixo de tudo, sem animação */
#tela-inicio {
  display: flex;
  z-index: 1;
  top: 0;
  padding-top: var(--header-h);
}
#tela-inicio.ativa,
#tela-inicio.saindo { pointer-events: auto; }

/* Classes de estado — display gerenciado pelo WAAPI em Router._animar()
   Sem animation: aqui; o JS usa Web Animations API para permitir
   interrupção fluida no meio da animação. */
.tela.ativa         { display: flex; }
.tela.entrando-lento,
.tela.saindo,
.tela.saindo-direita { display: flex; }

/* Scrollbar fina */
.tela::-webkit-scrollbar       { width: 2px; }
.tela::-webkit-scrollbar-thumb { background: var(--gold-border); border-radius: 10px; }

/* ── Modo Visitante — botões bloqueados ───────────────────── */
/*
 * Aplicado automaticamente pelo GuestMode.js em botões com
 * data-action="agendar|mensagem|pagar|like|barbershop-favorite"
 * quando o usuário não está logado.
 *
 * Não desabilita o elemento (aria-disabled fica no JS);
 * o bloqueio real é feito no Router via event delegation.
 */
.bloqueado {
  opacity: .45;
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(.35);
  position: relative;
  transition: opacity var(--ease), filter var(--ease);
}

/* Ícone de cadeado sobreposto via pseudo-elemento */
.bloqueado::after {
  content: '🔒';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8em;
  pointer-events: none;
  opacity: .7;
}