/* Personalidade do Belleza: cores vivas por tema, gradientes, animações e microinterações.
   Carregado depois de style.css: redefine os tokens e sobrepõe o que era fixo. */

:root, :root[data-theme="rose"] {
  --brand: #d6457c; --brand-2: #ff8fb1; --brand-dark: #7a2447; --brand-soft: #fde4ec; --brand-softer: #fff0f5;
  --accent: #3fae86; --accent-soft: #dff4ea; --side: #fdeef3; --side-2: #fff7f9; --nav-on: #f8c9d9; --nav-on-ink: #7a2447;
  --bg: #fffaf8; --line: #f4e4e8;
}
:root[data-theme="lilac"] {
  --brand: #8b5cd6; --brand-2: #c4a1ff; --brand-dark: #432680; --brand-soft: #ece3fb; --brand-softer: #f7f2fe;
  --accent: #ec6fa5; --accent-soft: #fde3ef; --side: #f0e9fc; --side-2: #faf7ff; --nav-on: #dccbf6; --nav-on-ink: #432680;
  --bg: #fbf9ff; --line: #eae1f7;
}
:root[data-theme="teal"] {
  --brand: #0f9d9a; --brand-2: #5ad8cf; --brand-dark: #08504e; --brand-soft: #d6f3f1; --brand-softer: #ecfaf9;
  --accent: #f06a8d; --accent-soft: #fde2ea; --side: #e2f5f3; --side-2: #f3fbfa; --nav-on: #b3e6e2; --nav-on-ink: #08504e;
  --bg: #f8fdfc; --line: #dcefed;
}
:root[data-theme="gold"] {
  --brand: #d98a1c; --brand-2: #ffc766; --brand-dark: #6e4204; --brand-soft: #fbebcf; --brand-softer: #fff6e6;
  --accent: #3f9b72; --accent-soft: #dff2e8; --side: #fbf0dc; --side-2: #fffaf0; --nav-on: #f5dba8; --nav-on-ink: #6e4204;
  --bg: #fffcf6; --line: #f3e8d2;
}
:root[data-theme="berry"] {
  --brand: #b02a6b; --brand-2: #f26ba8; --brand-dark: #5a1236; --brand-soft: #f7dcea; --brand-softer: #fcedf4;
  --accent: #e8903f; --accent-soft: #fdebd6; --side: #f6e1ec; --side-2: #fcf3f8; --nav-on: #ebb8d1; --nav-on-ink: #5a1236;
  --bg: #fffafc; --line: #f1dde7;
}
:root { --brand-ink: #fff; --rose-soft: var(--brand-soft); --sage: var(--accent); --sage-soft: var(--accent-soft); }

/* fundo com brilho suave da cor do salão */
body { background: var(--bg); }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(700px 400px at 100% -5%, color-mix(in srgb, var(--brand-2) 22%, transparent), transparent 70%),
              radial-gradient(600px 380px at -5% 105%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }

/* ---------- menu e topo ---------- */
body.authed #side { background: linear-gradient(180deg, var(--side), var(--side-2)); }
.brand { color: var(--brand); } .brand-name { color: var(--brand-dark); }
nav#nav a.on { background: var(--nav-on); color: var(--nav-on-ink); }
nav#nav a { transition: background .2s, transform .2s, color .2s; }
@media (min-width: 900px) { nav#nav a:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); transform: translateX(3px); } }
.side-foot { border-left-color: var(--brand); }
.avatar { background: var(--brand-soft); color: var(--brand); }
.avatar.sage { background: var(--accent-soft); color: var(--accent); }
header#top { backdrop-filter: blur(8px); background: color-mix(in srgb, #fff 82%, transparent); }

/* ---------- botões ---------- */
button { transition: transform .15s, box-shadow .2s, border-color .2s, background .2s; }
button:active { transform: scale(.97); }
button.primary { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 70%, var(--brand-2))); border-color: transparent; box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 35%, transparent); }
button.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 40%, transparent); }
button.link, a { color: var(--brand); }
input:focus, select:focus, textarea:focus { outline-color: var(--brand-soft); border-color: var(--brand); }
.chip.on { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand-2); }

/* ---------- cartões e listas ---------- */
.card { border-radius: 18px; border-color: var(--line); }
.appt { transition: transform .18s, box-shadow .2s; }
.appt:hover, .tl li:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 14%, transparent); }
.tl li { transition: background .2s; border-radius: 12px; } .tl li:hover { transform: none; box-shadow: none; background: var(--brand-softer); }
.badge { background: var(--brand-soft); color: var(--brand-dark); }
.s-confirmado, .s-pago { background: var(--accent-soft); color: var(--accent); }
.tl .dot { background: var(--brand); } .tl .dot.ok { background: var(--accent); }

/* ---------- KPIs vivos ---------- */
.kpi { position: relative; overflow: hidden; transition: transform .2s, box-shadow .25s; border: 0; box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 10%, transparent); }
.kpi:hover { transform: translateY(-3px); box-shadow: 0 14px 30px color-mix(in srgb, var(--brand) 18%, transparent); }
.kpi.rose { background: linear-gradient(135deg, var(--brand-softer), var(--brand-soft)); }
.kpi.sage { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 55%, #fff), var(--accent-soft)); }
.kpi::after { content: ''; position: absolute; right: -22px; top: -22px; width: 90px; height: 90px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 9%, transparent); }
.kpi.sage::after { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.kpi .ico { background: var(--brand); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--brand) 35%, transparent); position: relative; z-index: 1; }
.kpi.sage .ico { background: var(--accent); box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.kpi .ico svg { stroke: #fff; }
.kpi .val { position: relative; z-index: 1; }

/* ---------- herói do painel ---------- */
.hero-card { position: relative; overflow: hidden; color: #fff; border-radius: 24px; padding: 22px 24px; margin-bottom: 18px;
  background: linear-gradient(120deg, var(--brand-dark), var(--brand) 55%, var(--brand-2)); box-shadow: 0 16px 40px color-mix(in srgb, var(--brand) 32%, transparent);
  display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.hero-card::before, .hero-card::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.hero-card::before { width: 220px; height: 220px; right: -60px; top: -90px; } .hero-card::after { width: 120px; height: 120px; left: 38%; bottom: -70px; }
.hero-card > * { position: relative; z-index: 1; }
.hero-card h1 { color: #fff; margin: 0 0 4px; font-size: 32px; } .hero-card h1 em { font-style: normal; color: #ffe9a8; }
.hero-card p { margin: 0; color: rgba(255, 255, 255, .9); font-size: 16px; max-width: 520px; }
.hero-card .hero-date { font-size: 13px; opacity: .8; margin-bottom: 6px; letter-spacing: .3px; }
.hero-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.hero-actions button { background: rgba(255, 255, 255, .95); color: var(--brand-dark); border: 0; font-weight: 600; box-shadow: 0 6px 16px rgba(0, 0, 0, .15); }
.hero-actions button.ghost { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: none; }
.goal { display: flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, .16); border-radius: 18px; padding: 12px 16px; backdrop-filter: blur(4px); cursor: pointer; }
.goal svg { width: 84px; height: 84px; flex: none; } .goal .ring-bg { stroke: rgba(255, 255, 255, .25); } .goal .ring { stroke: #ffe9a8; stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.goal b { font: 700 22px var(--serif); display: block; } .goal small { opacity: .9; display: block; max-width: 150px; line-height: 1.3; }
.goal .pct { font: 700 17px var(--sans); fill: #fff; }

/* ---------- primeiros passos ---------- */
.steps-card { border: 2px dashed color-mix(in srgb, var(--brand) 35%, transparent); background: linear-gradient(135deg, #fff, var(--brand-softer)); }
.steps-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.progress { height: 10px; border-radius: 99px; background: var(--brand-soft); overflow: hidden; margin: 10px 0 12px; }
.progress > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .8s ease; }
.step { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-radius: 12px; cursor: pointer; transition: background .2s; }
.step:hover { background: var(--brand-softer); }
.step .check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--brand-2); flex: none; display: grid; place-items: center; color: #fff; font-size: 14px; }
.step.done .check { background: var(--accent); border-color: var(--accent); } .step.done strong { text-decoration: line-through; opacity: .55; }
.step .go { margin-left: auto; color: var(--brand); font-size: 13px; }

/* ---------- gráficos ---------- */
.chart .bar { fill: var(--brand-2); opacity: .6; transition: opacity .2s; } .chart .bar:hover { opacity: 1; } .chart .bar.hot { fill: var(--accent); opacity: 1; }
.chart .tipbox { fill: var(--accent); }
.hbar .fill { background: var(--accent); } .hbar .fill.rose { background: var(--brand-2); }

/* ---------- aparência ---------- */
.swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 16px; border: 2px solid var(--line); background: #fff; cursor: pointer; font-size: 13px; transition: transform .15s, border-color .2s; }
.swatch:hover { transform: translateY(-2px); } .swatch.on { border-color: var(--brand); box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 22%, transparent); }
.swatch i { width: 42px; height: 42px; border-radius: 50%; display: block; }

/* ---------- vazio com carinho ---------- */
.empty-state { text-align: center; padding: 26px 14px; }
.empty-state .big { font-size: 44px; line-height: 1; margin-bottom: 8px; animation: float 3s ease-in-out infinite; }
.empty-state h3 { font: 600 19px var(--serif); margin: 4px 0; } .empty-state p { margin: 0 0 12px; color: var(--muted); }

/* ---------- carregando (esqueleto) ---------- */
.skel { border-radius: 14px; background: linear-gradient(90deg, var(--brand-softer) 25%, color-mix(in srgb, var(--brand-soft) 70%, #fff) 50%, var(--brand-softer) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }

/* ---------- animações ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
#app > * { animation: rise .4s both; }
#app > *:nth-child(2) { animation-delay: .05s; } #app > *:nth-child(3) { animation-delay: .1s; } #app > *:nth-child(4) { animation-delay: .15s; } #app > *:nth-child(5) { animation-delay: .2s; }
.kpis .kpi { animation: rise .45s both; } .kpis .kpi:nth-child(2) { animation-delay: .06s; } .kpis .kpi:nth-child(3) { animation-delay: .12s; } .kpis .kpi:nth-child(4) { animation-delay: .18s; }
#modal .sheet { animation: pop .25s both; } #toast { animation: toastin .3s both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* confete */
#confetti { position: fixed; inset: 0; z-index: 80; pointer-events: none; }

@media (max-width: 599px) {
  .hero-card { padding: 18px; border-radius: 20px; } .hero-card h1 { font-size: 26px; }
  .goal { width: 100%; } .goal svg { width: 68px; height: 68px; }
}

/* ---------- check animado ---------- */
.celebrate { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 12px; pointer-events: none; animation: pop .3s both; }
.celebrate.out { opacity: 0; transition: opacity .4s; }
.celebrate .ck { width: 120px; height: 120px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 20px 60px color-mix(in srgb, var(--brand) 35%, transparent); }
.celebrate .ck svg { width: 84px; height: 84px; fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ck-c { stroke: var(--accent); stroke-dasharray: 145; stroke-dashoffset: 145; animation: draw .55s ease forwards; }
.ck-p { stroke: var(--accent); stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .4s .45s ease forwards; }
.celebrate .ck-t { background: #fff; color: var(--brand-dark); font: 600 18px var(--serif); padding: 8px 20px; border-radius: 99px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- logomarca do salão ---------- */
.salon-logo { max-width: 120px; max-height: 80px; object-fit: contain; border-radius: 14px; margin: 0 auto 6px; display: block; }

/* tipografia moderna (Outfit) */
:root { --sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body { font-size: 16px; }
/* números legíveis (sem serifa); a serifa fica para títulos */
.stat, .kpi .val, .goal b, .m-kpi b { font-family: var(--sans); font-weight: 700; letter-spacing: -.3px; }
.kpi .val { font-size: 28px; } .stat { font-size: 26px; }
/* ---------- visão semanal da agenda ---------- */
.week { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .week { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.wday { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 8px; min-height: 120px; }
.wday.today { border-color: var(--brand); box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 18%, transparent); }
.wh { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 8px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.wi { font-size: 13px; padding: 6px 8px; margin-bottom: 5px; border-radius: 10px; background: var(--brand-softer); border-left: 4px solid var(--brand); cursor: pointer; line-height: 1.3; transition: transform .15s; }
.wi:hover { transform: translateX(2px); background: var(--brand-soft); } .wi.cancelled { opacity: .5; text-decoration: line-through; }
.wempty { text-align: center; padding: 14px 0; }
/* ---------- vendas / PDV ---------- */
.pdv { display: grid; gap: 16px; } @media (min-width: 1000px) { .pdv { grid-template-columns: 1.5fr 1fr; align-items: start; } .cart { position: sticky; top: 76px; } }
.pgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pcard { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: transform .15s, box-shadow .2s; }
.pcard:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 16%, transparent); border-color: var(--brand-2); }
.pcard:disabled { opacity: .5; cursor: not-allowed; } .pcard .pe { font-size: 26px; } .pcard b { color: var(--brand-dark); font-size: 17px; }
.cline { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.qty { display: flex; align-items: center; gap: 8px; } .qty button { width: 30px; height: 30px; padding: 0; border-radius: 50%; }
.inl { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; } .inl .avatar { font-weight: 600; }
img.avatar { object-fit: cover; }