/* =====================================================================
   BeautyPro — sistema visual
   =====================================================================
   As cores saíram das telas de referência: creme quente de fundo, rosa
   empoeirado nos destaques, vinho nas ações de risco, e preto quase puro
   nos botões principais.

   O contraste segue esse par: fundo claríssimo com texto quase preto. É o
   que faz o app ser legível na luz do salão, que costuma ser forte.
   ===================================================================== */

:root {
  /* ── Base ─────────────────────────────────────────────────────── */
  --bg:            #FAF6F4;   /* creme do fundo */
  --surface:       #FFFFFF;
  --surface-2:     #F6EFEC;   /* cartão sobre o creme */
  --line:          #EDE2DE;

  /* ── Rosa ─────────────────────────────────────────────────────── */
  --rose-50:       #FDF2F0;
  --rose-100:      #F9E3DE;
  --rose-200:      #F3C9C0;
  --rose-300:      #EFB4A6;   /* botão do splash */
  --rose-400:      #E29486;
  --rose-500:      #C96A62;
  --rose-600:      #B4544F;   /* "Cadastre-se", links de ação */
  --rose-700:      #9B4340;

  /* ── Tinta ────────────────────────────────────────────────────── */
  --ink-900:       #14100F;   /* botão Entrar, títulos */
  --ink-800:       #221C1A;
  --ink-700:       #3D3330;
  --ink-500:       #7A6C67;
  --ink-400:       #A2938D;
  --ink-300:       #C6B9B4;

  /* ── Estados ──────────────────────────────────────────────────── */
  --green-50:      #EAF7EF;
  --green-500:     #2E9E5B;   /* "Confirmado" */
  --green-700:     #1F7A44;
  --amber-500:     #D89A2E;
  --red-50:        #FDEDEC;
  --red-500:       #C0483F;

  /* ── Forma ────────────────────────────────────────────────────── */
  --r-sm:          10px;
  --r:             14px;
  --r-lg:          20px;
  --r-pill:        999px;

  --shadow-sm:     0 1px 2px rgba(20, 16, 15, .04);
  --shadow:        0 4px 16px rgba(20, 16, 15, .06);
  --shadow-lg:     0 12px 34px rgba(20, 16, 15, .12);

  /* ── Tipografia ───────────────────────────────────────────────── */
  /* Serifada só na marca, como nas telas. O resto é sem serifa, que
     lê melhor em corpo pequeno na tela do celular. */
  --font-brand:    'Playfair Display', Georgia, serif;
  --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Altura da barra inferior, usada por quem precisa reservar espaço. */
  --tabbar-h:      64px;
  --safe-b:        env(safe-area-inset-bottom, 0px);
}

/* ── Reset enxuto ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p { margin: 0; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; }

img { max-width: 100%; display: block; }

/* ── Marca ─────────────────────────────────────────────────────── */
.bp-brand {
  font-family: var(--font-brand);
  font-weight: 500;
  letter-spacing: -.5px;
}

/* ── Botões ────────────────────────────────────────────────────── */
.bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 22px;
  border: none;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease, background .16s ease;
}

.bp-btn:active { transform: scale(.985); }

/* Preto para a ação principal dentro do app; rosa para a de entrada,
   sobre a foto do splash, onde o preto sumiria no fundo escuro. */
.bp-btn--dark { background: var(--ink-900); color: #fff; }
.bp-btn--dark:hover { background: var(--ink-800); }

.bp-btn--rose { background: var(--rose-300); color: var(--ink-900); }
.bp-btn--rose:hover { background: var(--rose-200); }

.bp-btn--wine { background: var(--rose-500); color: #fff; }
.bp-btn--wine:hover { background: var(--rose-600); }

.bp-btn--ghost {
  background: var(--surface);
  color: var(--ink-800);
  border: 1px solid var(--line);
  font-weight: 500;
}
.bp-btn--ghost:hover { border-color: var(--rose-200); }

.bp-btn--sm { padding: 11px 18px; font-size: 14px; width: auto; }

/* ── Campos ────────────────────────────────────────────────────── */
.bp-field { margin-bottom: 18px; }

.bp-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-800);
}

.bp-input,
.bp-select,
.bp-textarea {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink-900);
  transition: border-color .14s ease, box-shadow .14s ease;
}

.bp-input::placeholder,
.bp-textarea::placeholder { color: var(--ink-300); }

.bp-input:focus,
.bp-select:focus,
.bp-textarea:focus {
  outline: none;
  border-color: var(--rose-300);
  box-shadow: 0 0 0 3px var(--rose-50);
}

.bp-textarea { resize: vertical; min-height: 110px; }

/* Campo com botão dentro (olho da senha, busca). */
.bp-input-wrap { position: relative; }

.bp-input-wrap .bp-input { padding-right: 48px; }

.bp-input-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: var(--ink-400);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 4px;
}

/* ── Cartões ───────────────────────────────────────────────────── */
.bp-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

/* ── Etiquetas de estado ───────────────────────────────────────── */
.bp-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
}

.bp-tag--ok      { background: var(--green-50); color: var(--green-700); }
.bp-tag--wait    { background: var(--rose-50);  color: var(--rose-600); }
.bp-tag--off     { background: #F1EDEB;         color: var(--ink-500); }
.bp-tag--danger  { background: var(--red-50);   color: var(--red-500); }

/* ── Filtros em pílula (Hoje / Semana / Mês) ───────────────────── */
.bp-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.bp-chips::-webkit-scrollbar { display: none; }

.bp-chip {
  flex: 0 0 auto;
  padding: 10px 22px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-500);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.bp-chip.is-on { background: var(--ink-900); color: #fff; font-weight: 600; }

/* ── Divisor com texto ─────────────────────────────────────────── */
.bp-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 20px;
  color: var(--ink-400);
  font-size: 13px;
}
.bp-divider::before,
.bp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ── Cabeçalho de página ───────────────────────────────────────── */
.bp-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 14px;
}

.bp-head h1 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.3px;
}

.bp-back {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: -6px;
  border: none;
  background: none;
  color: var(--ink-900);
  cursor: pointer;
}

/* ── Barra inferior ────────────────────────────────────────────── */
.bp-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}

.bp-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-400);
}

.bp-tab i { font-size: 20px; }

.bp-tab.is-on { color: var(--rose-600); font-weight: 600; }

/* Todo conteúdo reserva espaço para a barra: sem isto o último item da
   lista fica escondido atrás dela, que é o defeito mais comum em app
   com navegação fixa embaixo. */
.bp-page { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 20px); }

/* ── Botão flutuante ───────────────────────────────────────────── */
.bp-fab {
  position: fixed;
  right: 18px;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
  z-index: 95;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--ink-900);
  color: #fff;
  font-size: 24px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
}

/* ── Lista de itens ────────────────────────────────────────────── */
.bp-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.bp-row:last-child { border-bottom: 0; }

.bp-row__body { flex: 1; min-width: 0; }
.bp-row__title { font-size: 15px; font-weight: 600; }
.bp-row__sub   { font-size: 13px; color: var(--ink-400); }

.bp-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: 0 0 auto;
  object-fit: cover;
  background: var(--rose-100);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--rose-600);
}

.bp-chevron { color: var(--ink-300); flex: 0 0 auto; }

/* ── Estado vazio ──────────────────────────────────────────────── */
.bp-empty {
  text-align: center;
  padding: 46px 24px;
  color: var(--ink-400);
}
.bp-empty h3 { font-size: 16px; color: var(--ink-800); margin-bottom: 6px; }
.bp-empty p  { font-size: 13.5px; }

/* ── Acessibilidade ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Foco visível para quem navega por teclado. Removi o outline padrão nos
   campos, então preciso devolver algo em seu lugar. */
:focus-visible {
  outline: 2px solid var(--rose-400);
  outline-offset: 2px;
  border-radius: 6px;
}