/* Visual "glassy": papel de parede suave ao fundo + painéis translúcidos em rosa */
:root {
  /* Papel de parede (escolhido em Configurações › Aparência) */
  --bg-image: url("../img/fundo-suave.svg");
  --veil: linear-gradient(180deg, rgba(255, 245, 248, .15), rgba(255, 240, 245, .3));
  --bg: #fbe9ef;
  --glass: rgba(255, 255, 255, .42);
  --glass-strong: rgba(255, 255, 255, .72);
  --glass-soft: rgba(255, 255, 255, .3);
  --glass-border: rgba(255, 255, 255, .7);
  --line: rgba(var(--shade-rgb), .09);
  --line-strong: rgba(var(--shade-rgb), .14);
  --text: #3a1a2a;
  --text-2: #6d4658;
  --muted: #9c7586;
  --primary: #d6457a;
  --primary-2: #f06e9c;
  --primary-dark: #b3315f;
  --primary-soft: rgba(var(--accent-rgb), .12);
  --grad: linear-gradient(135deg, #f37aa4 0%, #d6457a 100%);
  /* Paleta (Configurações › Aparência): rosa é a padrão */
  --on-primary: #fff;
  --accent-rgb: 214, 69, 122;
  --accent2-rgb: 240, 110, 156;
  --hero-bg: linear-gradient(120deg, rgba(92, 24, 58, .82) 0%, rgba(168, 48, 98, .7) 52%, rgba(240, 120, 160, .55) 100%);
  --hero-shade-rgb: 110, 25, 60;
  --hero-deep-rgb: 40, 8, 24;
  --hero-glow-rgb: 255, 140, 180;
  --hero-accent: #ffd6e5;
  --hero-cta-fg: #8a2350;
  --avatar-grad: linear-gradient(135deg, #f37aa4, #8a2350);
  --danger: #d63c4f;
  --success: #17946a;
  --warning: #c98500;

  --st-agendado: #2f6fed;
  --st-confirmado: #17a565;
  --st-concluido: #0d7a57;
  --st-faltou: #e04a5a;
  --st-cancelado: #9aa3b5;

  /* Cores dos gráficos (rosa + violeta, validadas para daltonismo) */
  --series-1: #d6457a;
  --series-2: #6250d6;

  --radius: 18px;

  /* Receita do vidro: preenchimento leve + reflexo diagonal + bordas iluminadas */
  --glass-fill: rgba(255, 255, 255, .0);
  --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .2) 30%, rgba(255, 255, 255, .06) 55%, rgba(255, 255, 255, .16) 100%);
  --glass-edges: rgba(255, 255, 255, .85) rgba(255, 255, 255, .35) rgba(255, 255, 255, .22) rgba(255, 255, 255, .65);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, .95), inset 1px 0 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(255, 255, 255, .15);
  /* Reflexo "molhado" na metade de cima dos botões coloridos */
  --gloss: linear-gradient(180deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, .12) 48%, rgba(255, 255, 255, 0) 52%);
  --blur: blur(28px) saturate(190%) brightness(1.05);
  --blur-sm: blur(12px) saturate(170%);
  --shadow: 0 14px 40px rgba(var(--shade-rgb), .12), 0 2px 6px rgba(var(--shade-rgb), .05), var(--glass-inset);
  --shadow-lg: 0 24px 60px rgba(90, 25, 50, .2), var(--glass-inset);
  --sidebar-w: 248px;

  /* Superfícies dos controles (redefinidas no modo escuro) */
  --shade-rgb: 120, 40, 70;
  --ctl: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .26));
  --ctl-hover: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .45));
  --chip-bg: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .22));
  --hover: rgba(255, 255, 255, .45);
  --tray: rgba(255, 255, 255, .22);
  --input: rgba(255, 255, 255, .38);
  --input-focus: rgba(255, 255, 255, .75);
  --input-edges: rgba(255, 255, 255, .45) rgba(255, 255, 255, .7) rgba(255, 255, 255, .85) rgba(255, 255, 255, .55);
  --input-inset: inset 0 2px 4px rgba(var(--shade-rgb), .08), 0 1px 0 rgba(255, 255, 255, .6);
  --row: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .2));
  --cal-head: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .22));
  --appt-sheen: var(--appt-sheen);
  --modal-bg: rgba(255, 246, 249, .8);
  --soft-fill: rgba(255, 255, 255, .25);
  --neutral-bg: rgba(255, 255, 255, .6);
  --ico-bg: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 220, 232, .35));
  --option-bg: #fff;
  --tag-bg: #3a1a2a;
  --tag-fg: #fff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
/* Fundo fixo (sala de lash) que aparece desfocado através do vidro */
body::before, body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
body::before { background: var(--bg-image) center bottom / cover no-repeat, var(--bg); }
/* Véu leve para o texto continuar legível nas áreas sem painel */
body::after { background: var(--veil); }
html { background: var(--bg); }
body { background: transparent; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.pos { color: var(--success); }
.neg { color: var(--danger); }

.glass, .card, .stat, .sidebar, .topbar, .modal, .cal-day, .cal-month, .week-col {
  background: var(--glass-sheen), var(--glass-fill);
  border: 1px solid;
  border-color: var(--glass-edges);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
}

/* Layout */
.app { display: flex; min-height: 100vh; }
/* Menu lateral: só ícones (padrão) ou ícones + descrição (Configurações › Aparência) */
.sidebar {
  width: var(--sidebar-w);
  position: fixed; top: 16px; bottom: 16px; left: 16px;
  border-radius: 24px;
  z-index: 30;
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform .25s ease, width .2s ease;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  padding: 2px 2px 16px; font-size: 17px; font-weight: 750; color: var(--text); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden;
}
.brand-mark {
  width: 46px; height: 46px; border-radius: 15px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gloss), var(--grad); color: #fff;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.brand-mark svg { width: 80%; height: 80%; }
#nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-item, .nav-sub {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  height: 46px; padding: 0 12px; border-radius: 14px;
  color: var(--text-2); cursor: pointer; text-decoration: none; font-weight: 550;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.nav-item svg, .side-btn svg { width: 22px; height: 22px; flex: none; }
.nav-item:hover, .nav-sub:hover { background: var(--hover); box-shadow: var(--glass-inset); color: var(--text); text-decoration: none; }
.nav-item.active, .nav-item.group-active {
  background: var(--gloss), var(--grad); color: #fff;
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.nav-sub { height: 36px; padding-left: 46px; font-size: 13px; color: var(--muted); font-weight: 500; }
.nav-sub.active { color: var(--primary); background: var(--primary-soft); font-weight: 650; }
.side-foot { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.side-btn {
  display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 12px; border-radius: 14px;
  border: none; background: none; color: var(--text-2); cursor: pointer; font: inherit; font-weight: 550; white-space: nowrap;
  position: relative;
}
.side-btn:hover { background: var(--hover); color: var(--text); }

/* Modo só ícones */
body:not(.sb-labels) { --sidebar-w: 74px; }
body:not(.sb-labels) .sidebar { padding: 14px 12px; align-items: center; }
body:not(.sb-labels) .brand { padding: 2px 0 16px; }
body:not(.sb-labels) .brand-name,
body:not(.sb-labels) .nav-label,
body:not(.sb-labels) .nav-sub { display: none; }
body:not(.sb-labels) .nav-item, body:not(.sb-labels) .side-btn { width: 48px; height: 48px; padding: 0; justify-content: center; }
/* Dica com o nome ao passar o mouse */
body:not(.sb-labels) [data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%);
  padding: 6px 11px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--tag-bg); color: var(--tag-fg); box-shadow: var(--shadow-lg); pointer-events: none; z-index: 50;
}
/* Submenu da seção atual no topo (no modo só ícones) */
.topbar .subnav { display: none; }
body:not(.sb-labels) .topbar .subnav:not(:empty) { display: inline-flex; }
.topbar-title { display: flex; align-items: center; gap: 14px; flex: 1; flex-wrap: wrap; min-width: 0; }
.topbar-title h1 { flex: none; }
.subnav a { text-decoration: none; padding: 6px 12px; border-radius: 10px; color: var(--text-2); font-weight: 550; font-size: 13px; }
.subnav a:hover { background: var(--hover); color: var(--text); }
.subnav a.active { background: var(--gloss), var(--grad); color: #fff; box-shadow: 0 4px 12px rgba(var(--accent-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .55); }
.main { flex: 1; margin-left: calc(var(--sidebar-w) + 32px); min-width: 0; display: flex; flex-direction: column; padding-right: 16px; }
.topbar {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding: 14px 20px;
  border-radius: 20px;
  position: sticky; top: 16px; z-index: 10;
}
.topbar h1 { font-size: 20px; }
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.topbar .menu-btn { display: none; }
.view { padding: 20px 4px 40px; }
.backdrop { display: none; }

@media (max-width: 860px) {
  .sidebar, body:not(.sb-labels) .sidebar { width: 248px; transform: translateX(calc(-100% - 24px)); top: 10px; bottom: 10px; left: 10px; align-items: stretch; overflow-y: auto; }
  body:not(.sb-labels) .brand-name, body:not(.sb-labels) .nav-label { display: inline; }
  body:not(.sb-labels) .nav-sub { display: flex; }
  body:not(.sb-labels) .nav-item, body:not(.sb-labels) .side-btn { width: auto; height: 46px; padding: 0 12px; justify-content: flex-start; }
  body:not(.sb-labels) [data-tip]:hover::after { display: none; }
  body:not(.sb-labels) .topbar .subnav:not(:empty) { display: none; }
  .sidebar.open, body:not(.sb-labels) .sidebar.open { transform: none; }
  .topbar { flex-wrap: wrap; }
  .top-actions { width: 100%; }
  .top-actions:empty { display: none; }
  .backdrop.show { display: block; position: fixed; inset: 0; background: rgba(70, 20, 40, .25); backdrop-filter: blur(4px); z-index: 25; }
  .main { margin-left: 0; padding: 0 12px; }
  .topbar .menu-btn { display: inline-flex; }
  .view { padding: 16px 0 32px; }
  .topbar { padding: 10px 14px; top: 10px; margin-top: 10px; }
  .topbar h1 { font-size: 17px; }
}

/* Botões */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid; border-color: var(--glass-edges);
  background: var(--ctl);
  -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm);
  color: var(--text);
  padding: 8px 14px; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 550;
  white-space: nowrap; transition: transform .12s, box-shadow .15s, background .15s;
  box-shadow: 0 4px 12px rgba(var(--shade-rgb), .08), var(--glass-inset);
}
.btn:hover { background: var(--ctl-hover); box-shadow: 0 8px 20px rgba(var(--shade-rgb), .12), var(--glass-inset); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary, .btn.success, .btn.wa { border-color: rgba(255, 255, 255, .45) rgba(255, 255, 255, .15) rgba(0, 0, 0, .05) rgba(255, 255, 255, .3); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
.btn.primary { background: var(--gloss), var(--grad); box-shadow: 0 8px 22px rgba(var(--accent-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn.primary:hover { background: var(--gloss), var(--grad); box-shadow: 0 12px 28px rgba(var(--accent-rgb), .45), inset 0 1px 0 rgba(255, 255, 255, .7); filter: brightness(1.05); }
.btn.danger { color: var(--danger); }
.btn.success, .btn.success:hover { background: var(--gloss), linear-gradient(135deg, #2fc48a, #149a69); box-shadow: 0 8px 20px rgba(23, 148, 106, .3), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn.wa, .btn.wa:hover { background: var(--gloss), linear-gradient(135deg, #34d07a, #1aa557); box-shadow: 0 6px 16px rgba(26, 165, 87, .28), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 10px; }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; backdrop-filter: none; }
.btn.ghost:hover { background: var(--hover); box-shadow: var(--glass-inset); }
.btn:disabled { opacity: .5; cursor: default; box-shadow: none; }
.icon-btn { border: none; background: none; font-size: 20px; cursor: pointer; padding: 6px; display: inline-flex; color: var(--text-2); border-radius: 10px; }
.icon-btn:hover { background: var(--hover); box-shadow: var(--glass-inset); }

/* Cartões */
.card { border-radius: var(--radius); padding: 18px; }
.card + .card { margin-top: 16px; }
.grid > .card { margin-top: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 16px; }
.stat { border-radius: var(--radius); padding: 16px 18px; position: relative; overflow: hidden; }
.stat::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent2-rgb), .18), rgba(var(--accent2-rgb), 0) 70%);
  pointer-events: none;
}
.stat .label { color: var(--text-2); font-size: 12px; font-weight: 550; display: flex; align-items: center; gap: 8px; }
.stat .value { font-size: 24px; font-weight: 750; margin-top: 6px; letter-spacing: -.02em; }
.stat .sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
.stat-ico {
  width: 32px; height: 32px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ico-bg);
  border: 1px solid; border-color: var(--glass-edges);
  box-shadow: 0 4px 10px rgba(var(--accent-rgb), .15), var(--glass-inset);
  font-size: 15px; flex: none;
}

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.toolbar .spacer { flex: 1; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 13px; background: var(--glass-sheen), var(--tray); border: 1px solid; border-color: var(--glass-edges); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm); box-shadow: var(--glass-inset); }
.seg button { border: none; background: transparent; padding: 6px 13px; cursor: pointer; font: inherit; font-weight: 550; color: var(--text-2); border-radius: 10px; }
.seg button:hover:not(.active) { background: var(--hover); }
.seg button.active { background: var(--gloss), var(--grad); color: #fff; box-shadow: 0 4px 12px rgba(var(--accent-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .55); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid; border-color: var(--glass-edges); background: var(--chip-bg); border-radius: 99px; padding: 6px 13px; cursor: pointer; font: inherit; font-size: 13px; color: var(--text-2); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm); box-shadow: var(--glass-inset); }
.chip:hover { background: var(--ctl-hover); }
.chip.active { background: var(--gloss), var(--grad); border-color: rgba(255, 255, 255, .4); color: #fff; box-shadow: 0 4px 12px rgba(var(--accent-rgb), .28), inset 0 1px 0 rgba(255, 255, 255, .55); }

/* Formulários */
input, select, textarea {
  font: inherit; color: var(--text);
  border: 1px solid; border-color: var(--input-edges);
  border-radius: 12px;
  padding: 8px 11px; width: 100%;
  /* Vidro "afundado": sombra interna em cima, luz embaixo */
  background: var(--input);
  -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm);
  box-shadow: var(--input-inset);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
select option { background: var(--option-bg); color: var(--text); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary-2); box-shadow: 0 0 0 4px rgba(var(--accent2-rgb), .2), inset 0 1px 3px rgba(var(--shade-rgb), .06); background: var(--input-focus); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--primary); }
input[type=color] { padding: 3px; height: 38px; }
textarea { min-height: 70px; resize: vertical; }
.toolbar input, .toolbar select { width: auto; }
label.field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-2); font-weight: 550; }
label.check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }

/* Tabelas */
table.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th, .table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.table th { font-size: 11px; color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: .05em; background: transparent; }
.table tbody tr:last-child td { border-bottom: none; }
.table tr.click { cursor: pointer; }
.table tr.click:hover td { background: rgba(var(--accent2-rgb), .07); }
.table tr.click:hover td:first-child { border-radius: 10px 0 0 10px; }
.table tr.click:hover td:last-child { border-radius: 0 10px 10px 0; }
.table tfoot td { font-weight: 700; border-top: 1px solid var(--line-strong); border-bottom: none; }
.table-wrap { overflow-x: auto; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm); }
.badge.agendado { background: rgba(47, 111, 237, .12); color: #1f4fb3; border-color: rgba(47, 111, 237, .2); }
.badge.confirmado { background: rgba(23, 165, 101, .12); color: #11704a; border-color: rgba(23, 165, 101, .2); }
.badge.concluido { background: rgba(13, 122, 87, .14); color: #0a5a40; border-color: rgba(13, 122, 87, .22); }
.badge.faltou { background: rgba(224, 74, 90, .12); color: #a8283a; border-color: rgba(224, 74, 90, .2); }
.badge.cancelado { background: rgba(140, 150, 170, .14); color: #5d6880; border-color: rgba(140, 150, 170, .2); }
.badge.warn { background: rgba(240, 170, 20, .15); color: #855800; border-color: rgba(240, 170, 20, .25); }
.badge.danger { background: rgba(224, 74, 90, .12); color: #a8283a; border-color: rgba(224, 74, 90, .2); }
.badge.ok { background: rgba(23, 165, 101, .12); color: #11704a; border-color: rgba(23, 165, 101, .2); }
.badge.neutral { background: var(--neutral-bg); color: var(--text-2); border-color: var(--line); }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.list li:last-child { border-bottom: none; }
.list .grow { flex: 1; min-width: 0; }
.empty { color: var(--muted); padding: 10px 0; font-size: 13px; }
.alert { padding: 10px 14px; border-radius: 12px; background: rgba(240, 170, 20, .14); color: #7a5000; font-size: 13px; margin-bottom: 12px; border: 1px solid rgba(240, 170, 20, .25); box-shadow: var(--glass-inset); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm); }
.alert.danger { background: rgba(224, 74, 90, .1); color: #9a2333; border-color: rgba(224, 74, 90, .22); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(70, 20, 40, .14);
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  display: flex; align-items: flex-start; justify-content: center; z-index: 100; padding: 40px 16px; overflow-y: auto;
  animation: fade .15s ease;
}
.modal { border-radius: 22px; width: 100%; max-width: 620px; background: var(--glass-sheen), var(--modal-bg); box-shadow: var(--shadow-lg); animation: pop .18s ease; }
.modal.wide { max-width: 860px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 18px 22px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.modal-foot .left { margin-right: auto; display: flex; gap: 8px; flex-wrap: wrap; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(90px);
  background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 60%), rgba(58, 22, 40, .7); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255, 255, 255, .2);
  color: #fff; padding: 11px 18px; border-radius: 14px; transition: transform .25s; z-index: 200; pointer-events: none;
  box-shadow: var(--shadow-lg);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* Abas */
.tabs { display: inline-flex; gap: 2px; padding: 4px; margin-bottom: 18px; overflow-x: auto; max-width: 100%; border-radius: 14px; background: var(--glass-sheen), var(--tray); border: 1px solid; border-color: var(--glass-edges); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm); box-shadow: var(--glass-inset); }
.tabs button { border: none; background: none; padding: 8px 14px; cursor: pointer; font: inherit; font-weight: 550; color: var(--text-2); border-radius: 10px; white-space: nowrap; }
.tabs button:hover { background: var(--hover); }
.tabs button.active { background: var(--gloss), var(--grad); color: #fff; box-shadow: 0 4px 12px rgba(var(--accent-rgb), .28), inset 0 1px 0 rgba(255, 255, 255, .55); }

/* Agenda */
.cal-day { display: flex; border-radius: var(--radius); overflow-x: auto; }
.cal-times { flex: none; width: 58px; border-right: 1px solid var(--line); }
.cal-col { flex: 1; min-width: 170px; border-right: 1px solid var(--line); }
.cal-col:last-child { border-right: none; }
.cal-head { height: 46px; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 650; border-bottom: 1px solid var(--line); background: var(--cal-head); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm); position: sticky; top: 0; z-index: 4; }
.cal-body { position: relative; }
.cal-slot { border-bottom: 1px dashed rgba(var(--shade-rgb), .06); cursor: pointer; transition: background .1s; }
.cal-slot.hour { border-bottom: 1px solid var(--line); }
.cal-slot:hover { background: rgba(var(--accent2-rgb), .08); }
.cal-time { font-size: 11px; color: var(--muted); text-align: right; padding: 2px 8px 0 0; }
.appt {
  position: absolute; left: 4px; right: 4px;
  border-radius: 10px; padding: 5px 8px; font-size: 12px; overflow: hidden; cursor: pointer;
  border: 1px solid; border-color: var(--glass-edges); border-left: 4px solid var(--st-agendado);
  background: var(--appt-sheen), rgba(200, 220, 255, .5); color: #173b80;
  -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm);
  box-shadow: 0 4px 12px rgba(var(--shade-rgb), .1), var(--glass-inset);
  transition: transform .12s, box-shadow .12s;
}
.appt:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(var(--shade-rgb), .14); z-index: 3; }
.appt b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt.confirmado { border-left-color: var(--st-confirmado); background: var(--appt-sheen), rgba(190, 240, 212, .5); color: #0f5a39; }
.appt.concluido { border-left-color: var(--st-concluido); background: var(--appt-sheen), rgba(180, 228, 208, .55); color: #0a4632; }
.appt.faltou { border-left-color: var(--st-faltou); background: var(--appt-sheen), rgba(255, 205, 212, .55); color: #7a1d2a; }
.appt.cancelado { border-left-color: var(--st-cancelado); background: var(--appt-sheen), rgba(230, 232, 238, .5); color: #6f7790; text-decoration: line-through; }
.now-line { position: absolute; left: 0; right: 0; border-top: 2px solid var(--danger); z-index: 1; pointer-events: none; }
.cal-body .appt { z-index: 2; }
.now-line::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

.cal-week { display: grid; grid-template-columns: repeat(7, minmax(140px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.week-col { border-radius: var(--radius); min-height: 300px; display: flex; flex-direction: column; }
.week-col.today { border-color: rgba(var(--accent-rgb), .55); box-shadow: var(--shadow), 0 0 0 3px rgba(var(--accent2-rgb), .15); }
.week-head { padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.week-items { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.week-items .appt { position: static; }

.cal-month { display: grid; grid-template-columns: repeat(7, 1fr); border-radius: var(--radius); overflow: hidden; }
.month-dow { padding: 10px 8px; font-size: 11px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; text-align: center; border-bottom: 1px solid var(--line); }
.month-cell { min-height: 100px; padding: 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; font-size: 12px; overflow: hidden; transition: background .1s; }
.month-cell:nth-child(7n) { border-right: none; }
.month-cell:hover { background: rgba(var(--accent2-rgb), .07); }
.month-cell.other { color: var(--muted); background: var(--soft-fill); }
.month-cell.today .num { background: var(--gloss), var(--grad); color: #fff; border-radius: 99px; padding: 1px 8px; box-shadow: 0 4px 10px rgba(var(--accent-rgb), .3); }
.month-cell .num { font-weight: 650; display: inline-block; margin-bottom: 4px; }
.month-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }

/* Fotos */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.photo { position: relative; border-radius: 14px; overflow: hidden; background: var(--soft-fill); aspect-ratio: 1; cursor: pointer; border: 1px solid var(--glass-border); box-shadow: var(--shadow); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo .tag { position: absolute; left: 8px; top: 8px; background: rgba(58, 22, 40, .55); backdrop-filter: blur(6px); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 99px; }
.photo .del { position: absolute; right: 6px; top: 6px; background: rgba(58, 22, 40, .55); backdrop-filter: blur(6px); color: #fff; border: none; border-radius: 8px; cursor: pointer; padding: 2px 7px; }

/* Gráficos */
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid-line { stroke: rgba(var(--shade-rgb), .08); stroke-width: 1; }
.chart .axis-label { fill: var(--muted); font-size: 11px; }
.chart .bar-hit { fill: transparent; cursor: default; }
.chart .bar-hit:hover { fill: rgba(var(--accent2-rgb), .06); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.tooltip { position: absolute; pointer-events: none; background: rgba(58, 22, 40, .75); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: 12px; padding: 7px 10px; border-radius: 10px; white-space: nowrap; transform: translate(-50%, -100%); margin-top: -10px; display: none; z-index: 5; box-shadow: var(--shadow-lg); }
.hbar { display: grid; grid-template-columns: minmax(110px, 180px) 1fr auto; gap: 10px; align-items: center; margin-bottom: 10px; font-size: 13px; }
.hbar .track { height: 12px; background: var(--soft-fill); box-shadow: inset 0 1px 2px rgba(var(--shade-rgb), .1); border-radius: 99px; overflow: hidden; }
.hbar .fill { height: 100%; background: var(--series-1); border-radius: 99px; min-width: 4px; }

.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.consume-row { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.section-title { font-size: 11px; font-weight: 650; color: var(--muted); margin: 18px 0 8px; text-transform: uppercase; letter-spacing: .06em; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; font-size: 13px; }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; }
.client-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.avatar { width: 58px; height: 58px; border-radius: 18px; background: var(--gloss), var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex: none; box-shadow: 0 8px 20px rgba(var(--accent-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .6); }

@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 13px 14px; }
  .stat .value { font-size: 19px; }
  .kv { grid-template-columns: 110px 1fr; }
}

/* Navegadores sem backdrop-filter: painéis mais opacos */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .stat, .sidebar, .topbar, .modal, .cal-day, .cal-month, .week-col { background: var(--glass-sheen), rgba(255, 255, 255, .9); }
}

/* ===== Home do dashboard ===== */
.dash-top { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 16px; align-items: stretch; }
.dash-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-side .card + .card { margin-top: 0; }
.dash-side .card:last-child { flex: 1; }

/* Card de destaque: vidro rosado escuro com a foto "saindo" pelo topo */
.hero {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: 380px; margin-top: 70px; padding: 30px 30px 22px;
  border-radius: 26px; color: #fff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .06) 35%, rgba(255, 255, 255, 0) 60%),
    var(--hero-bg);
  border: 1px solid; border-color: rgba(255, 255, 255, .55) rgba(255, 255, 255, .2) rgba(255, 255, 255, .1) rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: 0 30px 60px rgba(var(--hero-shade-rgb), .28), 0 4px 12px rgba(var(--hero-shade-rgb), .12), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .35s ease;
}
.hero-glow {
  position: absolute; z-index: -1; right: 4%; bottom: 0; width: 46%; height: 85%;
  background: radial-gradient(ellipse at 50% 60%, rgba(var(--hero-glow-rgb), .75), rgba(var(--hero-glow-rgb), .25) 45%, rgba(var(--hero-glow-rgb), 0) 70%);
  filter: blur(10px); pointer-events: none;
}
.hero-photo {
  position: absolute; z-index: 0; right: 5%; bottom: 0;
  height: calc(100% + 70px); width: auto; max-width: 52%; object-fit: contain; object-position: bottom center;
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 24px 30px rgba(var(--hero-shade-rgb), .45)) drop-shadow(0 2px 4px rgba(var(--hero-shade-rgb), .25));
  /* Esfuma o braço cortado na borda esquerda da foto */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%);
  transition: transform .35s ease;
}
.hero-content { position: relative; z-index: 1; max-width: 52%; }
.hero-kicker { font-size: 12px; letter-spacing: .04em; opacity: .85; margin-bottom: 14px; text-transform: uppercase; font-weight: 600; }
.hero-title { font-size: 40px; line-height: 1.08; font-weight: 750; letter-spacing: -.03em; text-shadow: 0 2px 18px rgba(var(--hero-shade-rgb), .25); }
.hero-title span { color: var(--hero-accent); }
.hero-sub { margin: 12px 0 0; font-size: 14px; opacity: .9; }
.hero-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.btn.hero-cta { background: #fff; color: var(--hero-cta-fg); border-color: transparent; padding: 11px 22px; border-radius: 14px; font-weight: 650; box-shadow: 0 10px 24px rgba(var(--hero-shade-rgb), .25); }
.btn.hero-cta:hover { background: #fff; filter: brightness(.97); }
.btn.hero-ghost { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .35); padding: 11px 18px; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn.hero-ghost:hover { background: rgba(255, 255, 255, .24); color: #fff; }

/* Faixa de indicadores em vidro, por cima da foto (desfoca o vestido) */
.hero-stats {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; gap: 8px;
  padding: 16px 16px 16px 22px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .08) 60%, rgba(255, 255, 255, .14));
  border: 1px solid; border-color: rgba(255, 255, 255, .6) rgba(255, 255, 255, .25) rgba(255, 255, 255, .15) rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 12px 30px rgba(var(--hero-shade-rgb), .2), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.hs-value { font-size: 26px; font-weight: 750; letter-spacing: -.02em; white-space: nowrap; }
.hs-label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; opacity: .9; margin-top: 2px; }
.hs-label i { width: 8px; height: 8px; border-radius: 3px; display: inline-block; flex: none; }
.hs-go {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--hero-deep-rgb), .75); color: #fff; font-size: 18px; text-decoration: none;
  box-shadow: 0 6px 14px rgba(var(--hero-deep-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.hs-go:hover { text-decoration: none; background: rgba(var(--hero-deep-rgb), .9); }

/* Gráfico de linha */
.line-chart .xhair { stroke: rgba(var(--shade-rgb), .25); stroke-width: 1; stroke-dasharray: 3 3; }
.line-chart .xdot, .line-chart .last-dot { fill: var(--option-bg); stroke: var(--series-1); stroke-width: 3; }
.line-chart .last-tag rect { fill: var(--tag-bg); }
.line-chart .last-tag text { fill: var(--tag-fg); font-size: 11px; font-weight: 600; }

/* Próximo atendimento */
.next-body { display: flex; align-items: center; gap: 14px; }
.next-info { flex: 1; min-width: 0; }
.next-time { font-size: 34px; font-weight: 750; letter-spacing: -.03em; line-height: 1; color: var(--primary-dark); }
.next-avatar {
  width: 84px; height: 84px; border-radius: 22px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 750; color: #fff;
  background: var(--gloss), var(--avatar-grad);
  box-shadow: 0 12px 24px rgba(138, 35, 80, .3), inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* Agenda do dia em linhas de vidro */
.day-head, .day-row { display: grid; grid-template-columns: 70px minmax(180px, 2fr) minmax(110px, 1fr) 130px 100px minmax(110px, auto); gap: 12px; align-items: center; }
.day-head { padding: 0 14px 8px; font-size: 11px; color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.day-rows { display: flex; flex-direction: column; gap: 8px; }
.day-row {
  padding: 10px 14px; border-radius: 16px; cursor: pointer;
  background: var(--row);
  border: 1px solid; border-color: var(--glass-edges);
  box-shadow: 0 4px 12px rgba(var(--shade-rgb), .06), var(--glass-inset);
  transition: transform .12s, box-shadow .15s;
}
.day-row:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(var(--shade-rgb), .12), var(--glass-inset); }
.day-row.cancelado { opacity: .55; }
.day-time { font-weight: 750; font-size: 15px; color: var(--primary-dark); }
.day-client { display: flex; align-items: center; gap: 10px; min-width: 0; }
.day-client > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.day-client b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-avatar {
  width: 38px; height: 38px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; background: var(--gloss), var(--grad);
  box-shadow: 0 4px 10px rgba(var(--accent-rgb), .25), inset 0 1px 0 rgba(255, 255, 255, .55);
}

@media (max-width: 1180px) {
  .dash-top { grid-template-columns: 1fr; }
  .dash-side { flex-direction: row; flex-wrap: wrap; }
  .dash-side .card { flex: 1 1 300px; }
}
@media (max-width: 760px) {
  .hero { min-height: 0; padding: 22px 18px 16px; margin-top: 70px; }
  /* No celular a foto fica no canto superior, saindo do card, e esfuma embaixo */
  .hero-photo { top: -70px; bottom: auto; right: -6%; width: 66%; height: auto; max-width: none; }
  .hero-photo {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%), linear-gradient(180deg, #000 62%, transparent 92%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 14%), linear-gradient(180deg, #000 62%, transparent 92%);
    mask-composite: intersect;
  }
  .hero-content { max-width: 60%; }
  .hero-kicker { font-size: 10.5px; }
  .hero-title { font-size: 26px; }
  .hero-sub { font-size: 13px; }
  .hero-stats { grid-template-columns: 1fr 1fr; padding: 14px; }
  .hs-value { font-size: 20px; }
  .hs-go { display: none; }
  .day-head { display: none; }
  .day-row { grid-template-columns: 56px 1fr auto; row-gap: 6px; }
  .day-row > :nth-child(3), .day-row > :nth-child(5) { display: none; }
  .day-row > :nth-child(6):empty { display: none; }
  .day-row > :nth-child(6) { grid-column: 1 / -1; text-align: left; }
}

/* ===== Papéis de parede ===== */
:root[data-wall="estudio"] { --bg-image: url("../img/fundo-estudio.svg"); }
:root[data-wall="nenhum"] { --bg-image: none; }

/* ===== Modo escuro ===== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-image: url("../img/fundo-suave-escuro.svg");
  --veil: linear-gradient(180deg, rgba(18, 8, 14, .1), rgba(18, 8, 14, .35));
  --bg: #160c12;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);
  --glass-border: rgba(255, 255, 255, .14);
  --text: #f7eaf0;
  --text-2: #d6b9c6;
  --muted: #a3899a;
  --primary: #f27aa6;
  --primary-2: #ff8fb6;
  --primary-dark: #ff9cc2;
  --primary-soft: rgba(242, 122, 166, .16);
  --danger: #ff6f84;
  --success: #4fd39b;
  --warning: #ffc04d;
  --st-agendado: #6b9bff;
  --st-confirmado: #3fcf8e;
  --st-concluido: #2fb886;
  --st-faltou: #ff6f84;
  --st-cancelado: #8b93a6;
  /* Gráficos: passos escuros validados contra o fundo escuro */
  --series-1: #e0558a;
  --series-2: #9085e9;

  --glass-fill: rgba(36, 16, 28, .38);
  --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, .015) 55%, rgba(255, 255, 255, .05) 100%);
  --glass-edges: rgba(255, 255, 255, .22) rgba(255, 255, 255, .08) rgba(255, 255, 255, .05) rgba(255, 255, 255, .15);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, .14), inset 1px 0 0 rgba(255, 255, 255, .05);
  --gloss: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 48%, rgba(255, 255, 255, 0) 52%);
  --blur: blur(28px) saturate(150%) brightness(.92);
  --shade-rgb: 0, 0, 0;
  --shadow: 0 14px 40px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .2), var(--glass-inset);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55), var(--glass-inset);

  --ctl: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  --ctl-hover: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08));
  --chip-bg: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  --hover: rgba(255, 255, 255, .08);
  --tray: rgba(255, 255, 255, .04);
  --input: rgba(0, 0, 0, .22);
  --input-focus: rgba(0, 0, 0, .35);
  --input-edges: rgba(0, 0, 0, .35) rgba(255, 255, 255, .08) rgba(255, 255, 255, .14) rgba(255, 255, 255, .06);
  --input-inset: inset 0 2px 4px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .05);
  --row: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025));
  --cal-head: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  --appt-sheen: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 60%);
  --modal-bg: rgba(34, 16, 27, .88);
  --soft-fill: rgba(255, 255, 255, .04);
  --neutral-bg: rgba(255, 255, 255, .08);
  --ico-bg: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04));
  --option-bg: #24121d;
  --tag-bg: #f7eaf0;
  --tag-fg: #24121d;
}
:root[data-theme="dark"][data-wall="estudio"] { --bg-image: url("../img/fundo-estudio.svg"); --veil: linear-gradient(180deg, rgba(18, 8, 14, .78), rgba(18, 8, 14, .86)); }
:root[data-theme="dark"][data-wall="nenhum"] { --bg-image: none; }

/* Etiquetas e blocos de status com texto claro no escuro */
:root[data-theme="dark"] .badge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .badge.agendado { background: rgba(107, 155, 255, .16); color: #b3cbff; border-color: rgba(107, 155, 255, .28); }
:root[data-theme="dark"] .badge.confirmado, :root[data-theme="dark"] .badge.ok { background: rgba(63, 207, 142, .14); color: #8fe8bf; border-color: rgba(63, 207, 142, .26); }
:root[data-theme="dark"] .badge.concluido { background: rgba(47, 184, 134, .16); color: #84dfb9; border-color: rgba(47, 184, 134, .28); }
:root[data-theme="dark"] .badge.faltou, :root[data-theme="dark"] .badge.danger { background: rgba(255, 111, 132, .14); color: #ffadb9; border-color: rgba(255, 111, 132, .26); }
:root[data-theme="dark"] .badge.cancelado { background: rgba(139, 147, 166, .14); color: #c2c8d6; border-color: rgba(139, 147, 166, .24); }
:root[data-theme="dark"] .badge.warn { background: rgba(255, 192, 77, .14); color: #ffd98f; border-color: rgba(255, 192, 77, .26); }
:root[data-theme="dark"] .alert { background: rgba(255, 192, 77, .12); color: #ffd98f; border-color: rgba(255, 192, 77, .24); }
:root[data-theme="dark"] .alert.danger { background: rgba(255, 111, 132, .12); color: #ffb3bf; border-color: rgba(255, 111, 132, .24); }
:root[data-theme="dark"] .appt { background: var(--appt-sheen), rgba(107, 155, 255, .2); color: #d8e5ff; }
:root[data-theme="dark"] .appt.confirmado { background: var(--appt-sheen), rgba(63, 207, 142, .18); color: #c9f5e0; }
:root[data-theme="dark"] .appt.concluido { background: var(--appt-sheen), rgba(47, 184, 134, .22); color: #c2f0dc; }
:root[data-theme="dark"] .appt.faltou { background: var(--appt-sheen), rgba(255, 111, 132, .2); color: #ffd3da; }
:root[data-theme="dark"] .appt.cancelado { background: var(--appt-sheen), rgba(139, 147, 166, .16); color: #aab1c2; }
:root[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .hero { box-shadow: 0 30px 60px rgba(0, 0, 0, .45), 0 4px 12px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .3); }
:root[data-theme="dark"] .btn.hero-ghost { color: #fff; }

/* ===== Agendamento online (painel) ===== */
.nav-badge {
  position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
body.sb-labels .nav-badge { position: static; margin-left: auto; box-shadow: none; }
.bk-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.bk-cal { box-shadow: none; }
.bk-cell { min-height: 74px; user-select: none; }
.bk-cell.past { opacity: .4; cursor: default; }
.bk-cell.past:hover { background: none; }
.bk-cell.open { background: linear-gradient(135deg, rgba(var(--accent2-rgb), .22), rgba(var(--accent2-rgb), .08)); }
.bk-cell.sel { outline: 2px solid var(--primary); outline-offset: -2px; background: var(--primary-soft); }
.bk-cell.open.sel { background: linear-gradient(135deg, rgba(var(--accent2-rgb), .32), rgba(var(--accent2-rgb), .14)); }
.bk-info { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-panel { padding: 14px; border-radius: 16px; background: var(--row); border: 1px solid; border-color: var(--glass-edges); box-shadow: var(--glass-inset); }
.bk-panel .field { margin-top: 12px; }
.req-row { grid-template-columns: 130px minmax(160px, 1.3fr) minmax(150px, 1fr) minmax(100px, 1fr) auto; cursor: default; }
.req-row:hover { transform: none; }
@media (max-width: 900px) {
  .bk-wrap { grid-template-columns: 1fr; }
  .req-row { grid-template-columns: 1fr; gap: 8px; }
  .req-row .row-actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* Tela de login */
body.login-mode .app { display: block; }
.login-page {
  min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 480px);
  gap: 20px; padding: 20px; align-items: stretch;
}
.login-hero {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 30px; padding: 44px; color: #fff; display: flex; align-items: flex-start;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .05) 35%, rgba(255, 255, 255, 0) 60%),
    var(--hero-bg);
  border: 1px solid; border-color: rgba(255, 255, 255, .5) rgba(255, 255, 255, .18) rgba(255, 255, 255, .1) rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: 0 30px 70px rgba(var(--hero-shade-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.login-hero-glow {
  position: absolute; z-index: -1; right: 0; bottom: 0; width: 70%; height: 80%;
  background: radial-gradient(ellipse at 60% 70%, rgba(var(--hero-glow-rgb), .7), rgba(var(--hero-glow-rgb), 0) 65%);
  filter: blur(10px);
}
.login-photo {
  position: absolute; z-index: -1; right: 2%; bottom: 0; height: 88%; max-width: 62%; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 24px 34px rgba(var(--hero-shade-rgb), .45));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%);
}
.login-hero-text { max-width: 52%; }
.login-brand { display: flex; align-items: center; gap: 12px; font-weight: 750; font-size: 18px; margin-bottom: 56px; }
.login-brand .brand-mark { background: rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.login-hero h1 { font-size: 46px; line-height: 1.05; letter-spacing: -.035em; font-weight: 750; text-shadow: 0 2px 18px rgba(var(--hero-shade-rgb), .25); }
.login-hero h1 span { color: var(--hero-accent); }
.login-hero p { margin: 16px 0 0; opacity: .9; font-size: 15px; max-width: 320px; }

.login-card {
  align-self: center; display: flex; flex-direction: column; gap: 14px;
  padding: 40px 34px; border-radius: 28px;
  background: var(--glass-sheen), var(--modal-bg);
  border: 1px solid; border-color: var(--glass-edges);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--shadow-lg);
}
.login-card h2 { font-size: 28px; letter-spacing: -.02em; }
.login-card > p { margin: -6px 0 6px; }
.login-mobile-brand { display: none; align-items: center; gap: 10px; font-size: 16px; margin-bottom: 8px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: none; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 8px; display: inline-flex;
}
.pw-toggle:hover, .pw-toggle[aria-pressed="true"] { color: var(--primary); background: var(--hover); }
.login-err { min-height: 18px; font-size: 13px; color: var(--danger); font-weight: 600; }
.login-btn { justify-content: center; padding: 13px; font-size: 15px; border-radius: 14px; }
.login-foot { text-align: center; margin: 4px 0 0; }
.login-card input { padding: 11px 13px; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }

@media (max-width: 900px) {
  .login-page { grid-template-columns: 1fr; padding: 0; gap: 0; }
  .login-hero { display: none; }
  .login-card { margin: 8vh 16px; padding: 30px 22px; }
  .login-mobile-brand { display: flex; }
}

/* ===== Conta (topo) ===== */
.account { position: relative; flex: none; }
.account-btn {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 99px; cursor: pointer;
  border: 1px solid; border-color: var(--glass-edges); background: var(--ctl); color: var(--text); font: inherit; font-weight: 600;
  box-shadow: 0 4px 12px rgba(var(--shade-rgb), .08), var(--glass-inset);
}
.account-btn:hover { background: var(--ctl-hover); }
.account-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gloss), var(--grad); color: #fff; font-size: 12px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.account-menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px; z-index: 60;
  padding: 8px; border-radius: 16px; display: flex; flex-direction: column; gap: 2px;
  background: var(--glass-sheen), var(--modal-bg); border: 1px solid; border-color: var(--glass-edges);
  box-shadow: var(--shadow-lg);
  animation: pop .15s ease;
}
.account-menu[hidden] { display: none; }
.account-head { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.account-menu a, .account-menu button {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; border: none; background: none;
  color: var(--text); font: inherit; font-weight: 550; text-decoration: none; cursor: pointer; text-align: left;
}
.account-menu a:hover, .account-menu button:hover { background: var(--hover); text-decoration: none; }
.account-menu svg { width: 18px; height: 18px; flex: none; }
.account-menu .danger { color: var(--danger); }
.account-local { cursor: pointer; font-size: 12px; }

/* Menu lateral em telas baixas (ex.: notebook 1366×768): compacta para o "Sair" caber */
@media (min-width: 861px) and (max-height: 820px) {
  .sidebar { padding-top: 10px; padding-bottom: 10px; gap: 2px; }
  .brand { padding-bottom: 10px; }
  .brand-mark { width: 40px; height: 40px; border-radius: 13px; }
  #nav { gap: 2px; }
  .nav-item, .side-btn { height: 40px; }
  body:not(.sb-labels) .nav-item, body:not(.sb-labels) .side-btn { width: 44px; height: 40px; }
  .nav-sub { height: 32px; }
  .side-foot { padding-top: 6px; gap: 2px; }
}
@media (min-width: 861px) and (max-height: 640px) {
  .nav-item, .side-btn, body:not(.sb-labels) .nav-item, body:not(.sb-labels) .side-btn { height: 34px; }
  .nav-item svg, .side-btn svg { width: 20px; height: 20px; }
  .brand-mark { width: 34px; height: 34px; }
}

@media (max-width: 860px) {
  .account-name { display: none; }
  .account-btn { padding: 3px; }
  .top-actions { order: 3; }
}

/* ===== Paletas de cor ===== */
/* Texto sobre o degradê principal (branco no rosa, escuro no dourado) */
:is(.nav-item.active, .btn.primary, .seg button.active, .chip.active, .tabs button.active, .subnav a.active,
    .month-cell.today .num, .step-num, .mini-avatar, .avatar, .brand-mark, .account-avatar, .pday.sel) { color: var(--on-primary); }
:root[data-palette$="dourado"] .btn.primary { text-shadow: none; }

/* Rosa e dourado: superfícies rosadas com detalhes em dourado */
:root[data-palette="rosa-dourado"] {
  --grad: linear-gradient(135deg, #f4dfa0 0%, #dab55e 45%, #b68a2f 100%);
  --on-primary: #2e2005;
  --primary: #95650f;
  --primary-2: #d4a94e;
  --primary-dark: #835810;
  --primary-soft: rgba(212, 169, 78, .18);
  --accent-rgb: 182, 138, 47;
  --accent2-rgb: 212, 169, 78;
  --hero-accent: #f4dfa0;
  --series-1: #d6457a;
  --series-2: #a87a1e;
}
:root[data-palette="rosa-dourado"][data-theme="dark"] {
  --primary: #e2bd6a;
  --primary-2: #f0d48f;
  --primary-dark: #f0d48f;
  --primary-soft: rgba(226, 189, 106, .16);
  --series-1: #e0558a;
  --series-2: #a6821f;
}

/* Dourado e preto (sempre escuro) */
:root[data-palette="preto-dourado"] {
  color-scheme: dark;
  --bg-image: url("../img/fundo-preto-dourado.svg");
  --veil: linear-gradient(180deg, rgba(10, 9, 7, .1), rgba(10, 9, 7, .35));
  --bg: #0d0b08;
  --text: #f4ecd8;
  --text-2: #d1c4a5;
  --muted: #a09379;
  --line: rgba(255, 240, 200, .09);
  --line-strong: rgba(255, 240, 200, .15);
  --grad: linear-gradient(135deg, #f4dfa0 0%, #dab55e 45%, #b68a2f 100%);
  --on-primary: #2e2005;
  --primary: #dcb862;
  --primary-2: #f0d48f;
  --primary-dark: #f0d48f;
  --primary-soft: rgba(220, 184, 98, .16);
  --accent-rgb: 182, 138, 47;
  --accent2-rgb: 220, 184, 98;
  --hero-bg: linear-gradient(120deg, rgba(18, 15, 10, .92) 0%, rgba(66, 51, 22, .86) 55%, rgba(158, 122, 52, .62) 100%);
  --hero-shade-rgb: 0, 0, 0;
  --hero-deep-rgb: 10, 9, 7;
  --hero-glow-rgb: 220, 184, 98;
  --hero-accent: #f4dfa0;
  --hero-cta-fg: #3a2a08;
  --avatar-grad: linear-gradient(135deg, #e7c878, #8a6420);
  --series-1: #b08a24;
  --series-2: #9085e9;
  --glass-fill: rgba(22, 19, 14, .5);
  --glass-sheen: linear-gradient(135deg, rgba(255, 245, 220, .12) 0%, rgba(255, 245, 220, .04) 30%, rgba(255, 245, 220, .015) 55%, rgba(255, 245, 220, .05) 100%);
  --glass-edges: rgba(255, 235, 190, .24) rgba(255, 235, 190, .08) rgba(255, 235, 190, .05) rgba(255, 235, 190, .16);
  --glass-inset: inset 0 1px 0 rgba(255, 240, 210, .14), inset 1px 0 0 rgba(255, 240, 210, .05);
  --shade-rgb: 0, 0, 0;
  --modal-bg: rgba(24, 21, 15, .9);
  --option-bg: #1a1712;
  --tag-bg: #f4ecd8;
  --tag-fg: #1a1712;
}

/* Branco e dourado (sempre claro) */
:root[data-palette="branco-dourado"] {
  color-scheme: light;
  --bg-image: url("../img/fundo-branco-dourado.svg");
  --veil: linear-gradient(180deg, rgba(255, 252, 245, .15), rgba(255, 250, 240, .3));
  --bg: #faf7f1;
  --text: #2b2416;
  --text-2: #66593f;
  --muted: #9a8d74;
  --line: rgba(90, 70, 30, .1);
  --line-strong: rgba(90, 70, 30, .16);
  --grad: linear-gradient(135deg, #f4dfa0 0%, #dab55e 45%, #b68a2f 100%);
  --on-primary: #2e2005;
  --primary: #95650f;
  --primary-2: #d4a94e;
  --primary-dark: #7a520c;
  --primary-soft: rgba(212, 169, 78, .16);
  --accent-rgb: 182, 138, 47;
  --accent2-rgb: 212, 169, 78;
  --hero-bg: linear-gradient(120deg, rgba(58, 45, 20, .9) 0%, rgba(132, 100, 40, .8) 55%, rgba(214, 176, 92, .62) 100%);
  --hero-shade-rgb: 70, 52, 15;
  --hero-deep-rgb: 40, 30, 10;
  --hero-glow-rgb: 240, 210, 140;
  --hero-accent: #f6e2a8;
  --hero-cta-fg: #6b4a0c;
  --avatar-grad: linear-gradient(135deg, #e7c878, #8a6420);
  --series-1: #a87a1e;
  --series-2: #6250d6;
  --shade-rgb: 90, 70, 30;
  --ico-bg: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(240, 222, 180, .35));
  --modal-bg: rgba(255, 253, 249, .86);
  /* Vidro mais branco: menos saturação do fundo champanhe */
  --glass-fill: rgba(255, 255, 255, .42);
  --blur: blur(28px) saturate(115%) brightness(1.04);
  --row: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .4));
}
:root[data-palette="rosa-dourado"]:not([data-theme="dark"]) { --ico-bg: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(244, 223, 170, .3)); }
/* A escolha "Estúdio" / "Sem imagem" vale em qualquer paleta */
:root[data-palette][data-wall="estudio"] { --bg-image: url("../img/fundo-estudio.svg"); }
:root[data-palette][data-wall="nenhum"] { --bg-image: none; }
:root[data-palette="preto-dourado"][data-wall="estudio"] { --veil: linear-gradient(180deg, rgba(10, 9, 7, .8), rgba(10, 9, 7, .88)); }
.login-brand .brand-mark { color: #fff; }
.login-monogram { width: 92px; height: 92px; color: var(--hero-accent); margin-bottom: 18px; filter: drop-shadow(0 6px 18px rgba(var(--hero-shade-rgb), .35)); }
.login-monogram svg { width: 100%; height: 100%; }

/* Seletor de paletas (Configurações › Aparência) */
.palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.palette {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; border-radius: 16px; cursor: pointer; text-align: left;
  border: 1px solid; border-color: var(--glass-edges); background: var(--row); color: var(--text); font: inherit; box-shadow: var(--glass-inset);
}
.palette:hover { background: var(--ctl-hover); }
.palette.active { outline: 2px solid var(--primary); outline-offset: 1px; }
.palette-swatch { width: 100%; height: 54px; border-radius: 11px; display: flex; align-items: flex-end; gap: 6px; padding: 8px; margin-bottom: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.palette-swatch i { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .5); }
.seg button:disabled { opacity: .45; cursor: not-allowed; }

/* Botão "Sair" sempre visível no canto superior direito */
.account { display: flex; align-items: center; gap: 8px; }
.btn.logout-top { color: var(--danger); padding: 7px 12px; border-radius: 99px; }
.btn.logout-top svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 860px) {
  .btn.logout-top span { display: none; }
  .btn.logout-top { padding: 7px; }
}

/* Esqueci a senha */
[hidden] { display: none !important; }
.login-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.linkish { background: none; border: none; color: var(--primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { color: var(--primary-dark); }
.fg-step2 { display: flex; flex-direction: column; gap: 14px; }
.code-input { font-size: 24px !important; letter-spacing: .45em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }