/* Tema "Salão de beleza": off-white, rosa queimado, vinho profundo e champanhe.
   Ativado pela classe .t-salao no <html> quando o tipo de negócio é salão. */
@font-face {
  font-family: "Lora";
  src: url("/fonts/lora.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

html.t-salao {
  --graphite: #2b1620;        /* vinho profundo */
  --graphite-2: #3a1f2b;
  --graphite-3: #4f2c3a;
  --copper: #b87585;          /* rosa queimado (decorativo) */
  --copper-strong: #8f4c60;   /* botões e links (contraste AA com branco) */
  --copper-hover: #763c4f;
  --copper-soft: #f3e2e5;
  --copper-tint: #faf1f1;
  --champ: #c9aa7f;           /* champanhe */
  --champ-soft: #e9dcc6;

  --ink: #2b1d23;
  --ink-2: #5b4a51;
  --muted: #86767c;
  --paper: #f8f4f1;           /* off-white */
  --surface: #fffdfb;
  --line: #ece2de;
  --ok: #2f6b4f;
  --ok-soft: #e6f1eb;
  --wa: #1f5a40;

  --serif: "Lora", Georgia, "Times New Roman", serif;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(60, 30, 40, .04), 0 8px 24px rgba(60, 30, 40, .05);
}

/* Tipografia elegante nos títulos, menu e valores; texto corrido segue sem serifa para leitura fácil */
.t-salao h1, .t-salao h2, .t-salao h3,
.t-salao .side a.nav, .t-salao .est-card .nm, .t-salao .kpi .value, .t-salao .occ-big,
.t-salao .day-item .t, .t-salao .day-item .who, .t-salao .modal header, .t-salao .bk-head h1,
.t-salao .summary .when, .t-salao .opt .name, .t-salao .done-mark + h2 { font-family: var(--serif); letter-spacing: 0; }
.t-salao h1, .t-salao h2 { font-weight: 600; }
.t-salao .kpi .value { font-weight: 600; font-size: 1.55rem; }
.t-salao .occ-big { font-weight: 600; font-size: 1.85rem; }

/* Cartões */
.t-salao .card, .t-salao .kpi, .t-salao .table-wrap { border-color: var(--line); box-shadow: var(--shadow); }
.t-salao th, .t-salao .cal-head, .t-salao .cal-month .wd { background: #fbf6f3; }
.t-salao .meter { background: #f0e6e4; }
.t-salao .trial-bar { color: #6e3346; }
.t-salao .linechart line { stroke: #f1e7e4; }

/* Menu lateral vinho com folhagens em champanhe */
.t-salao .side {
  background-color: var(--graphite);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 440' fill='none' stroke='%23c9aa7f' stroke-opacity='.28' stroke-width='1.1'%3E%3Cpath d='M-30 440C20 350 90 300 120 190C60 230 0 320-30 440Z'/%3E%3Cpath d='M-30 440C30 360 80 290 120 190'/%3E%3Cpath d='M-60 330C-20 270 20 150-5 60C-45 130-70 240-60 330Z'/%3E%3Cpath d='M-60 330C-30 250-10 160-5 60'/%3E%3Cpath d='M0 440C70 425 150 380 190 320C120 325 50 365 0 440Z'/%3E%3Cpath d='M0 440C70 400 130 360 190 320'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left bottom; background-size: 240px auto;
  color: #d9c8cd;
}
.t-salao .side a.nav { color: #e2d3d7; font-weight: 500; font-size: 1.02rem; }
.t-salao .side a.nav .i { color: #cdb7bd; }
.t-salao .side a.nav:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.t-salao .side a.nav.active { background: rgba(184, 117, 133, .18); color: #fff; box-shadow: inset 3px 0 0 var(--copper); }
.t-salao .side a.nav.active .i { color: #e7b8c3; }
.t-salao .est-card { border-top-color: rgba(201, 170, 127, .25); }
.t-salao .est-card .av { border-color: var(--champ); color: var(--champ); }
.t-salao .est-card .sb { color: #bfa9af; }

/* Logo com flor de lótus */
.t-salao .logo .lt { font-family: var(--serif); font-weight: 500; letter-spacing: 0; color: #f4e9e2; }
.t-salao .logo .lt span { color: #f4e9e2; }
.t-salao .logo.on-light .lt, .t-salao .logo.on-light .lt span { color: var(--ink); }

/* Topo */
.t-salao .topbar { background: var(--paper); }
.t-salao .topbar h1.greet { font-size: 1.9rem; }
.t-salao .greet-heart { display: inline-flex; vertical-align: middle; margin-left: .35rem; color: var(--copper); }
.t-salao .greet-heart .i { width: 24px; height: 24px; }
.t-salao .icon-btn { background: var(--surface); }
.t-salao .icon-btn .dot { background: #c2546f; border-color: var(--surface); }
.profile-chip { display: flex; align-items: center; gap: .3rem; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-2); }
.profile-chip .face { width: 42px; height: 42px; border-radius: 50%; background: var(--graphite); color: #f4e9e2; display: grid; place-items: center; }
.profile-chip .face .i { width: 22px; height: 22px; }
.profile-chip > .i { width: 16px; height: 16px; }

/* Botões */
.t-salao .btn-primary { box-shadow: 0 2px 8px rgba(143, 76, 96, .18); }
.t-salao .btn-wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.t-salao .btn-wa:hover { background: #17482f; border-color: #17482f; }
.t-salao .seg button.on { background: var(--graphite); }

/* Ícones em círculos rosados */
.t-salao .ic { background: var(--copper-soft); color: var(--copper-strong); }
.t-salao .sec-h .i { color: var(--copper); }
.t-salao .empty-art { color: var(--copper); }

/* Clientes para chamar de volta */
.t-salao .return-card {
  background-color: #f6eaea; border-color: #ead6d8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none' stroke='%23b87585' stroke-opacity='.22' stroke-width='1.1'%3E%3Cpath d='M160 160C140 110 120 80 70 60C90 110 120 140 160 160Z'/%3E%3Cpath d='M160 160C130 120 100 90 70 60'/%3E%3Cpath d='M175 120C170 80 160 40 125 10C125 60 145 95 175 120Z'/%3E%3Cpath d='M175 120C160 80 145 45 125 10'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right bottom; background-size: 150px auto;
}
.t-salao .return-card .ic { background: #efd9dc; }
.t-salao .return-row a strong { color: var(--copper-strong); font-family: var(--serif); font-weight: 600; }
.t-salao .return-row { border-bottom-color: #ead6d8; }

/* Agenda */
.t-salao .cal-col .hl { border-top-color: #f2e9e6; }
.t-salao .cal-col .off { background: repeating-linear-gradient(135deg, #f7f1ee 0 6px, #f1e9e6 6px 12px); }
.t-salao .cal-ev.completed { background: #f1ebe9; }

/* Página de agendamento da cliente */
.t-salao .bk-head { background-color: var(--graphite); }
.t-salao .bk-head .ph { background: var(--copper); font-family: var(--serif); }
.t-salao .bk-head p { color: #d4c1c6; }
.t-salao .opt .tick { border-color: #d8c9cc; }
.t-salao .bk-progress i.on { background: var(--copper); }

/* Página de vendas para salões */
.t-salao body { background: var(--surface); }
.t-salao .lp-brand { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.t-salao .hero h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; line-height: 1.12; }
.t-salao .how h2, .t-salao .pricing h2, .t-salao .faq h2, .t-salao .features h3, .t-salao .pv span, .t-salao .ha-list .t, .t-salao .ha-list b { font-family: var(--serif); letter-spacing: 0; }
.t-salao .hero-agenda { box-shadow: 0 30px 60px -30px rgba(43, 22, 32, .55); }
.t-salao .hero-agenda .ha-top strong { font-family: var(--serif); font-weight: 500; }
.t-salao .ha-list li.past .t { color: #bcaab0; }
.t-salao .features { background: var(--paper); }
.t-salao .btn-brass { background: var(--copper-strong); border-color: var(--copper-strong); color: #fff; }
.t-salao .btn-brass:hover { background: var(--copper-hover); border-color: var(--copper-hover); }

/* Ajustes finos */
.t-salao .side .logo svg { width: 44px; height: 44px; }
.t-salao .side .logo .lt { font-size: 1.28rem; line-height: 1.05; }
.t-salao .empty strong { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; }
.t-salao .card-h .note { color: var(--copper-strong); }

/* Entrar e criar conta */
.t-salao .auth-art {
  background-color: var(--graphite);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 440' fill='none' stroke='%23c9aa7f' stroke-opacity='.28' stroke-width='1.1'%3E%3Cpath d='M-30 440C20 350 90 300 120 190C60 230 0 320-30 440Z'/%3E%3Cpath d='M-30 440C30 360 80 290 120 190'/%3E%3Cpath d='M-60 330C-20 270 20 150-5 60C-45 130-70 240-60 330Z'/%3E%3Cpath d='M-60 330C-30 250-10 160-5 60'/%3E%3Cpath d='M0 440C70 425 150 380 190 320C120 325 50 365 0 440Z'/%3E%3Cpath d='M0 440C70 400 130 360 190 320'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right bottom; background-size: 420px auto;
}
.t-salao .auth-art .quote { font-family: var(--serif); font-weight: 500; font-size: 2rem; line-height: 1.25; color: #f6ece6; }
.t-salao .auth-art .sub-art { color: #cdb7bd; }
.t-salao .auth-form { background: var(--paper); }
.t-salao .auth-form h1 { font-family: var(--serif); }
.t-salao .auth-form .card { box-shadow: none; background: transparent; }