/* ==========================================================================
   CRM — Design System da plataforma

   Três camadas de tokens:
   1. Tema da plataforma (azul e branco): o padrão de toda empresa.
   2. Tema da empresa: só --primary-color, --secondary-color e --accent-color mudam.
      O app aplica os três no <html> depois do login (applyTheme em app.js) e calcula
      os tons de texto seguros (--primary-text, --on-primary, --accent-text, --sidebar-text)
      para manter contraste de 4,5:1 com qualquer cor escolhida.
   3. Cores de status (confirmado, concluído, pago, falta, cancelado): fixas, nunca seguem
      a cor da empresa, para o significado não se perder.

   Os componentes usam SÓ tokens. Para trocar a identidade da plataforma, mude o bloco
   "Tema da plataforma" abaixo e os arquivos de public/brand/.
   ========================================================================== */

:root {
  /* ---------- Tema da plataforma (a empresa sobrescreve estes três) ---------- */
  --primary-color: #2563EB;     /* ações, seleção, destaques de navegação */
  --secondary-color: #0F2552;   /* barra lateral e topo no celular */
  --accent-color: #0EA5E9;      /* realces: horários livres, "hoje", marcas do gráfico */

  /* tons de texto calculados para o tema atual (o app recalcula para a empresa) */
  --primary-text: #1D4ED8;      /* primária usada como texto sobre branco */
  --on-primary: #FFFFFF;        /* texto sobre a primária */
  --accent-text: #0369A1;       /* destaque usado como texto sobre branco */
  --sidebar-text: #E8EEF9;      /* texto sobre a barra lateral */

  /* derivados: acompanham sozinhos a cor da empresa */
  --primary-hover: color-mix(in srgb, var(--primary-color) 82%, #000);
  --primary-soft: color-mix(in srgb, var(--primary-color) 8%, #fff);
  --primary-soft-2: color-mix(in srgb, var(--primary-color) 22%, #fff);
  --accent-soft: color-mix(in srgb, var(--accent-color) 9%, #fff);
  --accent-soft-2: color-mix(in srgb, var(--accent-color) 32%, #fff);
  --sidebar-color: var(--secondary-color);
  --sidebar-background: var(--sidebar-color);
  --sidebar-muted: color-mix(in srgb, var(--sidebar-text) 72%, var(--sidebar-color));
  --sidebar-hover: color-mix(in srgb, var(--sidebar-text) 12%, transparent);
  --nav-active: color-mix(in srgb, var(--surface-color) 90%, var(--primary-color));
  --focus-ring: color-mix(in srgb, var(--primary-color) 14%, transparent);
  --accent-wash: color-mix(in srgb, var(--accent-color) 7%, transparent);
  --on-primary-soft: color-mix(in srgb, var(--on-primary) 40%, transparent);
  --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
  /* marca ReagendixPro (painel de apresentação, símbolo e destaques sobre o marinho) */
  --accent-on-dark: #60A5FA;       /* "Pro" e destaque de título sobre o marinho */
  --text-on-dark-muted: #CBD5E1;   /* texto de apoio sobre o marinho */
  --secondary-2: #1E293B;          /* hover e divisores dentro da barra lateral */
  --brand-deep: #1E3A8A;           /* fundo dos ícones de benefício no painel escuro */
  --primary-pale: #93C5FD;         /* traço desses ícones e a vaga antiga na prévia da agenda */
  --brand-glow: rgb(37 99 235 / .35);
  --shadow-card: 0 1px 2px rgb(15 23 42 / .06), 0 12px 32px rgb(15 23 42 / .08);
  --shadow-pop: 0 12px 32px rgb(15 23 42 / .16);
  --shadow-primary: 0 6px 16px rgb(37 99 235 / .25);

  /* ---------- Neutros ---------- */
  --background-color: #F4F6FA;
  --surface-color: #FFFFFF;
  --surface-2: #F8FAFC;
  --surface-3: #EEF2F7;
  --border-color: #E2E8F0;
  --border-strong: #CBD5E1;
  --border-hover: #94A3B8;
  --text-color: #0F172A;
  --text-soft: #334155;
  --text-muted: #5B6475;
  --text-faint: #94A3B8;
  --text-subtle: #64748B;           /* placeholders e ícones dentro de campos (entrada) */
  --ink-hover: #020617;
  --shadow-rgb: 15 23 42;

  /* ---------- Estados (fixos) ---------- */
  --success: #16A34A;  --success-text: #166534;  --success-soft: #EAF7EF;  --success-soft-2: #D5EFDF;
  --warning: #D69E1E;  --warning-text: #7A560A;  --warning-soft: #FEF6E4;  --warning-border: #F3DFAE;
  --danger: #DC2640;   --danger-text: #B4152B;   --danger-soft: #FDEEF0;   --danger-border: #F6C9D0;   --danger-ink: #7F1D1D;
  --info: #0891B2;     --info-text: #0E7490;     --info-soft: #E7F6FA;     --info-border: #B4E1EC;

  /* Status do atendimento: cor + fundo claro próprios */
  --st-agendado: #64748B;           --st-agendado-bg: var(--surface-color);
  --st-confirmado: var(--info);     --st-confirmado-bg: var(--info-soft);
  --st-andamento: var(--warning);   --st-andamento-bg: var(--warning-soft);
  --st-concluido: #7C3AED;          --st-concluido-bg: #F3EEFE;  --st-concluido-border: #DDCDFB;  --st-concluido-text: #6D28D9;
  --st-pago: var(--success);        --st-pago-bg: var(--success-soft);
  --st-faltou: var(--danger);       --st-faltou-bg: var(--danger-soft);
  --st-cancelado: var(--text-faint); --st-cancelado-bg: var(--surface-3);

  /* Cor do agendamento (escolhida no formulário): fixa em qualquer tema, como o status.
     Um tom por cor; fundo e borda saem dele (color-mix), como --primary-soft.
     Sem vermelho: no sistema, vermelho é perigo e falta. A mesma lista está em app.js (APPT_COLORS)
     e no servidor (appointments.js). Sem cor = padrão: o card segue a cor do status. */
  /* Tons fortes: o card inteiro é pintado e o texto é branco (todos ≥ 4,5:1 com branco). */
  --ap-rosa: #D6336C;
  --ap-laranja: #C2410C;
  --ap-amarelo: #A16207;
  --ap-verde: #15803D;
  --ap-azul: #2563EB;
  --ap-lilas: #9333EA;
  --ap-cinza: #5F6B7C;
  --ap-ink: #FFFFFF;

  /* avisos flutuantes (fundo escuro fixo) */
  --text-inverse: #FFFFFF;
  --toast-background: #0F172A;
  --toast-icon: #86EFAC;
  --toast-muted: #CBD5E1;

  /* ---------- Tipografia ---------- */
  --font-brand: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --heading-weight: 650;

  /* ---------- Forma ---------- */
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --shadow: 0 18px 40px -18px rgb(var(--shadow-rgb) / .28);
  --shadow-sm: 0 1px 2px rgb(var(--shadow-rgb) / .05);
  --shadow-float: 0 12px 28px -12px rgb(var(--shadow-rgb) / .38);

  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  font-family: var(--font-body);
  color: var(--text-color);
  background: var(--background-color);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--text-muted); font-size: .86rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
svg { flex: none; }

/* ---------- Marca ---------- */
.wordmark { text-align: center; color: inherit; line-height: 1; }
.wordmark .w1 { font-family: var(--font-brand); font-weight: 750; font-size: 2rem; letter-spacing: -.01em; overflow-wrap: anywhere; }
.wordmark .w2 { font-family: var(--font-brand); font-weight: 500; font-size: .9rem; letter-spacing: .08em; margin-top: 6px; }
.logo-mark { display: block; }

/* ---------- Entrada (login, cadastro de empresa, convite, senha) ----------
   Sempre 100% ReagendixPro: a cor da empresa só vale depois do login. Um cartão serve todas as etapas.
   Computador (≥ 1024 px): painel de apresentação à esquerda (7fr) e o cartão à direita (5fr).
   Tablet: faixa marinho no topo e o cartão sobe sobre ela. Celular: topo marinho e uma folha branca. */
/* A entrada tem os próprios tokens (ReagendixPro): o resto do sistema, da empresa, mantém os valores de :root. */
.login {
  --secondary-color: #0F172A; --accent-color: #38BDF8;
  --background-color: #F8FAFC; --surface-3: #F1F5F9; --text-muted: #475569;
  --danger: #DC2626; --danger-text: #B91C1C; --danger-soft: #FEF2F2; --danger-border: #FECACA;
  --success: #15803D; --success-soft: #DCFCE7;
  --st-confirmado: #1E40AF; --st-confirmado-bg: #DBEAFE;
  --st-andamento: #92400E; --st-andamento-bg: #FEF3C7;
  --st-concluido: #5B21B6; --st-concluido-bg: #EDE9FE;
  --st-pago: #166534; --st-pago-bg: #DCFCE7;
  --st-cancelado: #3F3F46; --st-cancelado-bg: #E4E4E7;
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: var(--font-heading);
  --radius-sm: 10px; --radius-md: 12px; --radius-xl: 20px; --radius-pill: 999px;
  min-height: 100vh; min-height: 100dvh; background: var(--background-color); color: var(--text-color);
  font-family: var(--font-body);
}
.auth-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--background-color); }

/* painel de apresentação (celular: marca e frase; tablet: marca e título; computador: tudo) */
.auth-visual {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px;
  padding: 56px 28px 52px; color: #fff;
  background-color: var(--secondary-color);
  background-image: radial-gradient(ellipse 70% 60% at 85% 100%, var(--brand-glow), transparent 70%);
}
.av-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.av-mark { display: block; width: 64px; height: auto; flex: none; }
.av-name { font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.035em; }
.av-name span { color: var(--accent-on-dark); }
.av-tag { margin: 0; font-size: 15px; color: var(--text-on-dark-muted); }
.av-copy, .av-benefits, .av-board { display: none; }
.av-title { margin: 0; font-size: 44px; line-height: 1.04; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
.av-title span { color: var(--accent-on-dark); }
.av-lead { margin: 18px 0 0; max-width: 56ch; font-size: 18px; line-height: 1.55; color: var(--text-on-dark-muted); text-wrap: pretty; }
.av-benefits { list-style: none; margin: 0; padding: 0; grid-template-columns: 1fr 1fr; gap: 20px 28px; max-width: 640px; }
.av-benefits li { display: flex; gap: 14px; align-items: flex-start; }
.av-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--brand-deep); color: var(--primary-pale); }
.av-ic svg { width: 22px; height: 22px; }
.av-tx { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--text-on-dark-muted); }
.av-tx strong { font-size: 15px; font-weight: 700; color: #fff; }

/* prévia da agenda: só formas (sem texto, nome ou número). Um bloco azul troca de horário: o gesto "reagendar". */
.av-board { position: absolute; right: 56px; bottom: -24px; width: 600px; height: 300px; padding: 18px; border-radius: 16px 16px 0 0; background: var(--surface-color); box-shadow: 0 -10px 40px rgb(0 0 0 / .25); }
.bd { position: relative; width: 100%; height: 100%; }
.bd-day { position: absolute; top: 6px; width: 40px; height: 8px; border-radius: 4px; background: var(--border-color); }
.bd-day:nth-child(1) { left: 12px; } .bd-day:nth-child(2) { left: 124px; } .bd-day:nth-child(3) { left: 236px; } .bd-day:nth-child(4) { left: 348px; } .bd-day:nth-child(5) { left: 460px; }
.bd-day.is-on { background: var(--primary-color); }
.bd-grid { position: absolute; left: 4px; right: 0; top: 30px; bottom: 0; background-image: linear-gradient(var(--surface-3) 1px, transparent 1px), linear-gradient(90deg, var(--surface-3) 1px, transparent 1px); background-size: 100% 68px, 112px 100%; background-position: 0 0, 0 0; }
.bd-blk { position: absolute; left: calc(8px + var(--c) * 112px); top: calc(34px + var(--r) * 68px); width: 104px; height: calc(var(--h) * 68px - 8px); padding: 8px; display: flex; flex-direction: column; gap: 6px; border-radius: var(--radius-sm); background: var(--bg); }
.bd-bar { width: 70%; height: 7px; border-radius: 4px; background: var(--bar); }
.bd-bar-2 { width: 45%; height: 6px; opacity: .5; }
.bd-a { --c: 0; --r: 0; --h: 1; --bg: var(--st-confirmado-bg); --bar: var(--st-confirmado); }
.bd-b { --c: 2; --r: 1; --h: 1; --bg: var(--st-concluido-bg); --bar: var(--st-concluido); }
.bd-c { --c: 3; --r: 0; --h: 2; --bg: var(--st-pago-bg); --bar: var(--st-pago); }
.bd-d { --c: 4; --r: 2; --h: 1; --bg: var(--st-andamento-bg); --bar: var(--st-andamento); }
.bd-e { --c: 0; --r: 2; --h: 1; --bg: var(--st-cancelado-bg); --bar: var(--st-cancelado); }
.bd-ghost { position: absolute; left: 120px; top: 170px; width: 104px; height: 60px; border: 2px dashed var(--primary-pale); border-radius: var(--radius-sm); }
.bd-move { --c: 1; --r: 2; --h: 1; --bg: var(--primary-color); --bar: #fff; box-shadow: 0 8px 20px rgb(37 99 235 / .35); animation: rgx-move 7s ease-in-out infinite; }
@keyframes rgx-move { 0%, 30% { transform: translate(0, 0); } 45%, 80% { transform: translate(152px, -68px); } 95%, 100% { transform: translate(0, 0); } }

.auth-panel { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 28px 24px calc(28px + env(safe-area-inset-bottom)); gap: 20px; background: var(--surface-color); border-radius: 24px 24px 0 0; margin-top: -24px; position: relative; }
.auth-card { width: 100%; max-width: 440px; }
.auth-below { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 8px; text-align: center; font-size: 14px; color: var(--text-muted); }
.auth-below p { margin: 0; line-height: 1.5; }
.auth-below a { color: var(--primary-color); font-weight: 600; text-underline-offset: 3px; }
.auth-below a:hover { color: var(--primary-hover); }
.auth-foot { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.auth-foot svg { width: 14px; height: 14px; }
/* o celular só mostra o cartão: os avisos de baixo ficam com ele */
.auth-below .auth-track { display: none; }
.sw-short { display: inline; }
.sw-long { display: none; }
.auth-main { display: flex; flex-direction: column; width: 100%; }

@media (min-width: 600px) {
  .auth-visual { min-height: 340px; padding: 44px 56px 120px; gap: 28px; }
  .av-brand { flex-direction: row; align-items: center; gap: 12px; }
  .av-mark { width: 44px; }
  .av-name { font-size: 30px; }
  .av-tag { display: none; }
  .av-copy { display: block; }
  .auth-panel { margin-top: -90px; background: transparent; border-radius: 0; padding: 0 24px 40px; }
  .auth-card { max-width: 480px; padding: 36px 36px 28px; border: 1px solid var(--border-color); border-radius: var(--radius-xl); background: var(--surface-color); box-shadow: var(--shadow-card); }
  .auth-below { max-width: 480px; }
  .auth-below .auth-track { display: block; }
  .sw-short { display: none; }
  .sw-long { display: inline; }
}
@media (min-width: 1024px) {
  .auth-shell { display: grid; grid-template-columns: 7fr 5fr; }
  .auth-visual { position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; min-height: 0; padding: 64px 72px; gap: 40px; }
  .av-title { font-size: 60px; }
  .av-copy { max-width: 600px; }
  .av-benefits { display: grid; }
  .av-board { display: block; }
  .auth-panel { justify-content: center; margin-top: 0; padding: 48px; }
  .auth-card { width: 440px; max-width: none; box-shadow: var(--shadow-card); }
  .auth-below { width: 440px; }
}
/* janelas baixas: a prévia da agenda sai para o conteúdo não se sobrepor */
@media (min-width: 1024px) and (max-height: 860px) {
  .av-board { display: none; }
  .auth-visual { padding-top: 44px; gap: 28px; }
  .av-title { font-size: 52px; }
}
@media (max-width: 359px) { .auth-panel { padding-left: 16px; padding-right: 16px; } }

/* cartão: um título, uma ação principal. Telas longas (cadastro) rolam a página; o painel fica preso à janela. */
.auth-view { display: flex; flex-direction: column; gap: 18px; }
.auth-view > * { margin: 0; }
.auth-main h1 { font-family: var(--font-heading); font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; color: var(--text-color); text-wrap: balance; }
.auth-main .auth-hero { font-size: 28px; text-align: left; }
.auth-lead, .auth-sub { font-size: 15px; line-height: 1.5; color: var(--text-muted); text-align: left; text-wrap: pretty; }
.auth-lead b { color: var(--text-color); font-weight: 700; overflow-wrap: anywhere; }
:is(.auth-hero, .auth-main h1) + :is(.auth-lead, .auth-sub) { margin-top: -14px; }
.auth-back { display: flex; align-items: center; gap: 6px; width: fit-content; min-height: 44px; margin: -8px 0 -6px -10px; padding: 0 12px 0 8px; border-radius: var(--radius-sm); color: var(--primary-color); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .15s; }
.auth-back svg { width: 18px; height: 18px; }
.auth-back:hover { background: var(--primary-soft); color: var(--primary-hover); }
.auth-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--surface-3); color: var(--text-muted); }
.auth-ic svg { width: 24px; height: 24px; }
.auth-ic.is-ok { background: var(--success-soft); color: var(--success-text); }
.auth-ic.is-bad { background: var(--danger-soft); color: var(--danger); }

.login .field { display: flex; flex-direction: column; gap: 6px; margin: 0; text-align: left; }
.login .field > label, .login .label { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-color); }
.login .field > label .muted { font-weight: 400; font-size: inherit; }
.login .field :is(input, textarea) {
  min-height: 48px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--background-color); color: var(--text-color); font-size: 15px;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.login .field textarea { padding: 12px 14px; min-height: 84px; resize: vertical; }
.login .field :is(input, textarea)::placeholder { color: var(--text-subtle); opacity: 1; }
.login .field :is(input, textarea):hover { border-color: var(--border-hover); }
.login .field :is(input, textarea):focus { border-color: var(--primary-color); box-shadow: 0 0 0 1px var(--primary-color); background: var(--surface-color); }
.login .field :is(input, textarea)[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); background: var(--surface-color); }
.login .field input:-webkit-autofill { -webkit-text-fill-color: var(--text-color); box-shadow: 0 0 0 100px var(--background-color) inset; }
.login .field input[readonly] { background: var(--surface-3); color: var(--text-muted); }
/* enviando: os campos ficam travados (somente leitura: o texto continua selecionável) */
.login [aria-busy="true"] .field :is(input, textarea) { background: var(--surface-3); color: var(--text-muted); border-color: var(--border-color); box-shadow: none; pointer-events: none; }
.login .field-hint { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.login .field-error { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13px; font-weight: 500; color: var(--danger-text); }
.login .field-error svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.auth-row { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 520px) { .auth-row { grid-template-columns: 1fr 1fr; gap: 12px; } }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* campo com ícone à esquerda */
.input-ic { position: relative; }
.input-ic > .ic { position: absolute; left: 14px; top: 15px; width: 18px; height: 18px; color: var(--text-subtle); pointer-events: none; z-index: 2; }
.login .field .input-ic input { padding-left: 42px; }
.pass-wrap { position: relative; }
.login .field .pass-wrap input { padding-right: 50px; }
.pass-toggle { position: absolute; top: 2px; right: 2px; transform: none; display: grid; place-items: center; width: 44px; height: 44px; border: none; border-radius: var(--radius-sm); background: none; color: var(--text-muted); }
.pass-toggle:hover { color: var(--primary-color); }
.pass-toggle svg { width: 20px; height: 20px; }

/* lembrar de mim + esqueci a senha */
.auth-opts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; }
.auth-opts .link-btn { display: flex; align-items: center; min-height: 44px; padding: 0; font-size: 14px; }
.check { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 14px; color: var(--text-color); }
.check input { position: absolute; opacity: 0; width: 44px; height: 44px; left: -12px; margin: 0; cursor: pointer; }
.check-box { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 4px; border: 1.5px solid var(--text-subtle); background: var(--surface-color); color: transparent; transition: background-color .15s, border-color .15s; }
.check-box svg { width: 12px; height: 12px; }
.check input:checked + .check-box { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.check input:focus-visible + .check-box { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.check:hover .check-box { border-color: var(--primary-color); }

/* botões do cartão */
.login .btn { border-radius: var(--radius-md); font-size: 15px; }
.login .btn-primary { min-height: 52px; font-size: 16px; font-weight: 700; background: var(--primary-color); box-shadow: var(--shadow-primary); transition: background-color .15s, box-shadow .2s; }
.login .btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.login .btn-primary:disabled { opacity: 1; background: var(--primary-hover); cursor: progress; }
.login .btn-quiet, .login .btn-outline { min-height: 52px; justify-content: center; background: var(--surface-color); color: var(--text-color); border: 1px solid var(--border-strong); font-weight: 600; }
.login .btn-quiet:hover, .login .btn-outline:hover { background: var(--background-color); border-color: var(--border-hover); }
.login .btn-sm { min-height: 44px; }
.login .link-btn { color: var(--primary-color); }
.login .link-btn:hover { color: var(--primary-hover); }
.login .spinner { width: 18px; height: 18px; border-width: 2px; animation-duration: .8s; }
.login .btn-quiet .spinner, .login .btn-outline .spinner { border-color: var(--border-color); border-top-color: var(--primary-color); }
.auth-actions { display: grid; gap: 12px; margin: 0; }
.auth-google { display: flex; flex-direction: column; gap: 18px; }
.login .btn-google-main { min-height: 52px; gap: 10px; font-size: 15px; font-weight: 600; background: var(--surface-color); color: var(--text-color); border: 1px solid var(--border-strong); }
.login .btn-google-main:hover { background: var(--background-color); border-color: var(--border-hover); }
.login .btn-google-main svg { width: 18px; height: 18px; flex: none; }
.login .btn-google-main[aria-disabled="true"] { pointer-events: none; opacity: .7; }
.login .auth-sep { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 13px; color: var(--text-subtle); }
.login .auth-sep::before, .login .auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
.auth-switch { margin: 0; font-size: 14px; color: var(--text-muted); text-align: center; }
.auth-switch .link-btn { display: inline; padding: 0; font-size: inherit; font-weight: 700; text-decoration: none; }
.auth-fine { font-size: 13px; color: var(--text-muted); text-align: center; }
.auth-out { margin: 0; }
.login .btn-google { gap: 10px; }
.login .btn-google svg { width: 18px; height: 18px; flex: none; }
.btn[aria-disabled="true"] { pointer-events: none; opacity: .7; }


/* aviso no topo do cartão */
.login .form-alert { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: var(--radius-md); text-align: left; font-size: 14px; line-height: 1.45; background: var(--danger-soft); border: 1px solid var(--danger-border); color: var(--danger-ink); }
.login .form-alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--danger); }
.login .form-alert.ok { background: var(--success-soft); border-color: rgb(21 128 61 / .3); color: var(--success-text); }
.login .form-alert.ok svg { color: var(--success); }

/* situações explicadas: identidade confirmada sem empresa, e situação de acesso */
.id-status, .id-note { padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border-color); font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.id-status b { color: var(--text-color); font-weight: 700; }
.id-guide { margin: 0; }
.id-guide > div { padding: 14px 0; border-top: 1px solid var(--border-color); }
.id-guide > div:last-child { border-bottom: 1px solid var(--border-color); }
.id-guide dt { margin: 0; color: var(--text-color); font-size: 15px; font-weight: 700; }
.id-guide dd { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }

/* cadastro enviado: o que acontece agora e o código para acompanhar */
.signup-done { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.signup-done-head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.signup-done-head h2 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.signup-done-head p { margin: -14px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.signup-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 12px; }
.signup-steps li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: center; font-size: 13px; color: var(--text-muted); }
.signup-steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-color); color: var(--text-muted); font-size: 13px; font-weight: 700; }
.signup-steps li:first-child::before { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.signup-steps b { color: var(--text-color); font-size: 15px; font-weight: 600; }
.code-box { display: flex; align-items: center; gap: 8px; }
.code-box code { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 52px; padding: 0 14px; border-radius: var(--radius-sm); background: var(--surface-3); overflow-wrap: anywhere; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 18px; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.code-box .btn { min-height: 52px; }
.signup-status { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--surface-2); }
.signup-status p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.ss-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ss-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; background: var(--surface-3); color: var(--text-muted); white-space: nowrap; }
.signup-status.is-approved .ss-badge { background: var(--success-soft); color: var(--success-text); }
.signup-status.is-rejected .ss-badge { background: var(--danger-soft); color: var(--danger-text); }
.mono-input { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .06em; }

@media (prefers-reduced-motion: reduce) {
  .bd-move { animation: none; }
  .login .btn-primary, .check-box, .login .field :is(input, textarea) { transition: none; }
}

.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.label-row .label { margin-bottom: 0; }
.label-row .link-btn { font-size: .8rem; padding: 4px 0; text-decoration: none; text-align: right; }

.field-hint { margin: 6px 0 0; font-size: .78rem; color: var(--text-muted); }
.field-error { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: .8rem; font-weight: 500; color: var(--danger-text); }
.field-error svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.field :is(input, textarea)[aria-invalid="true"] { border-color: var(--danger); }
.field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(220 38 64 / .15); }
.form-alert {
  display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 12px 14px;
  border-radius: var(--radius-sm); text-align: left; font-size: .86rem; line-height: 1.45;
  background: var(--danger-soft); border: 1px solid var(--danger-border); color: var(--danger-text);
}
.form-alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.form-alert.ok { background: var(--success-soft); border-color: rgb(22 163 74 / .3); color: var(--success-text); }

/* foco visível pelo teclado em todo o sistema (o mouse não mostra o contorno) */
:where(a, button, select, input, textarea, [role="button"], [tabindex]):focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
:where(.sidebar, .topbar) :focus-visible { outline-color: var(--sidebar-text); }
.setup-box { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-color); text-align: left; }
.setup-box h2 { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.1rem; margin: 0 0 4px; }
.setup-box .muted { margin: 0; }
.setup-box .btn { margin-top: 14px; }
.google-setup-hint { display: none; text-align: center; }
.auth-google.is-setup .google-setup-hint { display: block; }
.auth-google.is-setup .btn-google { opacity: .55; cursor: not-allowed; pointer-events: auto; }

/* ==========================================================================
   Estrutura do app
   ========================================================================== */
.app { min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 10px 16px;
  background: var(--sidebar-background);
  color: var(--sidebar-text);
  border-bottom: 1px solid var(--sidebar-hover);
}
.brand-inline { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.brand-inline .logo-mark { width: 32px; filter: drop-shadow(0 2px 3px rgb(var(--shadow-rgb) / .18)); }
.brand-inline .name { font-family: var(--font-brand); font-weight: 650; letter-spacing: .01em; font-size: .98rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-inline .unit { display: block; font-size: .7rem; letter-spacing: .04em; font-weight: 500; color: var(--sidebar-muted); }
.top-user { margin-left: auto; margin-right: 2px; font-size: .8rem; font-weight: 500; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border: none; border-radius: 12px;
  background: transparent; color: inherit;
  transition: background-color .15s;
}
.icon-btn:hover { background: rgb(var(--shadow-rgb) / .06); }
.icon-btn.is-on { background: rgb(var(--shadow-rgb) / .08); color: var(--primary, currentColor); }
.topbar .icon-btn:hover, .sidebar .icon-btn:hover { background: var(--sidebar-hover); }
.icon-btn svg { width: 22px; height: 22px; }

.sidebar { display: none; }
.main { padding: 20px 16px 170px; max-width: 1180px; margin: 0 auto; }

.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgb(255 255 255 / .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-color);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
}
body[data-nav-count="3"] .bottom-nav { grid-template-columns: repeat(3, 1fr); }
body[data-nav-count="4"] .bottom-nav { grid-template-columns: repeat(4, 1fr); }
.nav-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: none; background: none;
  color: var(--text-muted);
  font-size: .72rem; font-weight: 500;
  padding: 7px 0 6px; min-height: 52px;
  text-decoration: none;
  transition: color .15s;
}
.nav-item svg { width: 23px; height: 23px; }
.nav-item.active { color: var(--primary-text); font-weight: 600; }
.bottom-nav .nav-item.active::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary-color); }

/* Botão flutuante "Novo agendamento": canto inferior direito da área principal, em todo tamanho.
   Celular e telas médias: círculo só com o ícone, acima da barra de baixo.
   Computador largo: ícone + texto. O nome acessível é sempre "Novo agendamento". */
.fab {
  position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 31;
  display: inline-grid; place-items: center;
  width: 56px; height: 56px; padding: 0;
  border: none; border-radius: 100px;
  background: var(--gradient-primary);
  color: var(--on-primary); font-weight: 600; font-size: .94rem; white-space: nowrap;
  box-shadow: var(--shadow-float), 0 2px 6px -2px rgb(var(--shadow-rgb) / .22);
  transition: transform .15s var(--ease), box-shadow .2s ease, filter .15s;
}
.fab:hover { box-shadow: 0 16px 32px -12px rgb(var(--shadow-rgb) / .45), 0 2px 6px -2px rgb(var(--shadow-rgb) / .22); filter: brightness(1.04); }
.fab:active { transform: scale(.96); }
.fab:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }
.fab svg { width: 24px; height: 24px; }
.fab-label { display: none; }
/* com o botão à vista, o aviso rápido sobe para não ficar por cima dele */
@media (max-width: 899px) { body.has-fab .toast { bottom: calc(146px + env(safe-area-inset-bottom)); } }

@media (min-width: 900px) {
  .topbar, .bottom-nav { display: none !important; }
  .fab { right: 28px; bottom: 28px; }
  /* espaço no fim da tela para o último item rolar para fora do botão */
  body.has-fab .main { padding-bottom: 112px; }
  .app { display: grid; grid-template-columns: var(--side-w, 248px) minmax(0, 1fr); }
  .sidebar {
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    background: var(--sidebar-background);
    padding: 28px 16px 18px;
    color: var(--sidebar-text);
    border-right: 1px solid var(--sidebar-hover);
  }
  .sidebar .brand { text-align: center; margin-bottom: 26px; }
  .sidebar .logo-mark { width: 60px; margin: 0 auto 12px; filter: drop-shadow(0 4px 8px rgb(var(--shadow-rgb) / .18)); }
  .sidebar .wordmark .w1 { font-size: 1.55rem; }
  .sidebar .wordmark .w2 { font-size: .72rem; }
  .sidebar .unit { margin-top: 8px; font-family: var(--font-brand); letter-spacing: .04em; font-size: .78rem; font-weight: 500; color: var(--sidebar-muted); }
  .side-nav { display: flex; flex-direction: column; gap: 2px; }
  .side-nav .nav-item {
    flex-direction: row; gap: 12px; min-height: 0;
    padding: 11px 14px; border-radius: 12px;
    color: var(--sidebar-text); font-size: .93rem; font-weight: 500;
  }
  .side-nav .nav-item:hover { background: var(--sidebar-hover); }
  .side-nav .nav-item.active { background: var(--nav-active); color: var(--primary-text); font-weight: 600; box-shadow: 0 4px 14px -8px rgb(var(--shadow-rgb) / .5); }
  .sidebar .spacer { flex: 1; }
  .main { padding: 30px 40px 60px; width: 100%; }
}

/* ---- Barra lateral recolhível (computador e tablet largo) ---- */
.side-toggle { display: none; }
@media (min-width: 900px) {
  .side-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -10px 0 8px -6px; color: var(--sidebar-text); }
  .side-toggle .chev { transition: transform .2s var(--ease); transform-origin: 14.2px 12px; }
  body.nav-collapsed .side-toggle .chev { transform: scaleX(-1); }
  .side-bell { position: relative; }
  body.nav-collapsed { --side-w: 76px; }
  @media (prefers-reduced-motion: no-preference) { .app { transition: grid-template-columns .2s var(--ease); } }
  body.nav-collapsed .sidebar { padding-left: 10px; padding-right: 10px; align-items: center; }
  body.nav-collapsed .sidebar .brand { margin-bottom: 14px; }
  body.nav-collapsed .sidebar .logo-mark { width: 40px; margin-bottom: 0; }
  body.nav-collapsed .sidebar .wordmark, body.nav-collapsed .sidebar .brand .unit { display: none; }
  body.nav-collapsed .side-nav { width: 100%; align-items: center; }
  body.nav-collapsed .side-nav .nav-item { width: 48px; height: 48px; padding: 0; justify-content: center; position: relative; }
  /* o nome continua para leitor de tela e vira dica ao passar o mouse (title) */
  body.nav-collapsed .side-nav .nav-item > span:not(.nav-badge), body.nav-collapsed .side-bell > span:not(.bell-count) {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  body.nav-collapsed .side-nav .nav-badge { position: absolute; top: 2px; right: 2px; margin: 0; min-width: 18px; height: 18px; font-size: .66rem; padding: 0 4px; }
  body.nav-collapsed .nav-group { display: block; height: 1px; margin: 10px 12px; padding: 0; overflow: hidden; font-size: 0; background: var(--sidebar-hover); }
  body.nav-collapsed .side-nav .nav-group:first-child { display: none; }
  body.nav-collapsed .side-bell { width: 48px; height: 48px; padding: 0; justify-content: center; }
  body.nav-collapsed .side-bell .bell-count { position: absolute; top: 2px; right: 2px; margin: 0; }
  body.nav-collapsed .who { flex-direction: column; padding: 8px 4px; gap: 6px; width: 100%; }
  body.nav-collapsed .who-text { display: none; }
  body.nav-collapsed .toast { left: calc(50% + 38px); }
}

/* computador largo: há espaço para o texto ao lado do ícone */
@media (min-width: 1200px) {
  .fab { display: inline-flex; gap: 10px; width: auto; height: 56px; padding: 0 24px 0 20px; }
  .fab-label { display: inline; }
}

/* quem está usando (barra lateral) */
.who { display: none; }
@media (min-width: 900px) {
  .who {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 6px 10px 10px; border-radius: 14px;
    background: var(--sidebar-hover);
  }
  .who-av { width: 36px; height: 36px; font-size: .8rem; background: var(--surface-color); color: var(--primary-text); }
  .who-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .who-name { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .who-role { font-size: .76rem; color: var(--sidebar-muted); }
  .who-out { width: 36px; height: 36px; }
  .who-out svg { width: 19px; height: 19px; }
}

/* entrada curta ao trocar de tela */
.view-in { animation: rise .22s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Títulos de página ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.eyebrow { font-size: .86rem; font-weight: 600; color: var(--primary-text); }
.page-title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.9rem; line-height: 1.1; margin: 2px 0 0; letter-spacing: -.005em; }
.page-title::first-letter { text-transform: uppercase; }
.section-title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.35rem; margin: 0; }
.page-note { margin: 14px 0 0; max-width: 70ch; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 100px;
  min-height: 44px; padding: 10px 20px;
  font-weight: 600; font-size: .9rem;
  transition: transform .12s ease, box-shadow .2s ease, background-color .15s, border-color .15s, opacity .2s;
  text-decoration: none;
}
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--gradient-primary); color: var(--on-primary); box-shadow: 0 6px 14px -10px rgb(var(--shadow-rgb) / .45); }
.btn-primary:hover { box-shadow: 0 10px 20px -12px rgb(var(--shadow-rgb) / .5); }
.btn-primary:disabled { opacity: .55; }
.btn-outline { background: var(--surface-color); color: var(--text-color); border: 1px solid var(--border-strong); }
.btn-outline:hover:not(:disabled) { border-color: var(--primary-color); color: var(--primary-text); }
.btn-soft { background: var(--primary-soft); color: var(--primary-text); }
.btn-quiet { background: var(--surface-2); color: var(--text-color); border: 1px solid var(--border-color); justify-content: flex-start; }
.btn-quiet:hover { border-color: var(--border-strong); background: var(--surface-color); }
.btn-danger { background: transparent; color: var(--danger-text); border: 1px solid var(--danger-border); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-whats { background: var(--success-soft); color: var(--success-text); }
.btn-whats:hover { background: var(--success-soft-2); }
.btn-sm { min-height: 38px; padding: 7px 14px; font-size: .84rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.link-btn { border: none; background: none; color: var(--primary-text); font-weight: 600; font-size: .86rem; padding: 4px; text-decoration: none; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Campos ---------- */
.field { margin-bottom: 14px; }
.field > label, .label {
  display: block; margin-bottom: 6px;
  font-size: .84rem; font-weight: 500;
  color: var(--text-soft);
}
.input, .field input, .field select, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-color);
  font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
.field input[type="checkbox"] { width: auto; min-height: 0; }
.field textarea { min-height: 76px; resize: vertical; }
.input:hover, .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--border-hover); }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--focus-ring);
}
.field input[readonly], .field textarea[readonly] { background: var(--surface-2); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .row-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .stack-sm { grid-template-columns: 1fr !important; gap: 0; } }

/* ---------- Superfícies ---------- */
.card { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; }
.card h2 { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.3rem; margin: 0 0 4px; }
.card .sub { color: var(--text-muted); font-size: .86rem; margin: 0 0 16px; max-width: 70ch; }
.divider { height: 1px; background: var(--border-color); margin: 16px 0; }
.section-label { font-size: .86rem; font-weight: 600; color: var(--primary-text); margin: 6px 0 10px; }

/* ---------- Filtros: chips e segmentado ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; margin: 0 -2px 14px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-strong); background: var(--surface-color);
  border-radius: 100px; min-height: 38px; padding: 6px 14px;
  font-size: .85rem; font-weight: 500; white-space: nowrap;
  transition: border-color .15s, background-color .15s;
}
.chip:hover { border-color: var(--primary-color); }
.chip .sw { width: 10px; height: 10px; border-radius: 50%; }
.chip.active { border-color: var(--text-color); background: var(--text-color); color: var(--text-inverse); }
.chip-count { font-weight: 600; margin-left: 2px; font-variant-numeric: tabular-nums; opacity: .8; }

.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-3); border-radius: 12px; flex: none; }
.seg button {
  border: none; background: none; border-radius: 9px;
  min-height: 36px; padding: 6px 14px;
  font-size: .86rem; font-weight: 500; color: var(--text-soft); white-space: nowrap;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.seg button:hover { color: var(--text-color); }
.seg button.active { background: var(--surface-color); color: var(--text-color); font-weight: 600; box-shadow: 0 1px 3px rgb(var(--shadow-rgb) / .14); }

.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .search { flex: 1 1 260px; margin: 0; }

/* ---------- Status ---------- */
.badge, .tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 600; line-height: 1.3;
  padding: 3px 9px; border-radius: 100px; white-space: nowrap;
}
.badge.agendado { background: var(--surface-color); color: var(--text-soft); box-shadow: inset 0 0 0 1px var(--border-strong); }
.badge.confirmado { background: var(--st-confirmado-bg); color: var(--info-text); }
.badge.em_andamento { background: var(--st-andamento-bg); color: var(--warning-text); }
.badge.concluido { background: var(--st-concluido-bg); color: var(--st-concluido-text); }
.badge.cancelado { background: var(--st-cancelado-bg); color: var(--text-muted); }
.badge.faltou, .badge.nao_compareceu { background: var(--st-faltou-bg); color: var(--danger-text); }
.badge.pago, .tag.paid, .tag.teal { background: var(--st-pago-bg); color: var(--success-text); }
.tag { background: var(--primary-soft); color: var(--primary-text); }
.tag.gold { background: var(--warning-soft); color: var(--warning-text); }
.warn-tag { background: var(--warning-soft); color: var(--warning-text); font-size: .7rem; }

/* pontos de cor por status (legenda, ações) */
.dot.st-agendado, .compo .st-agendado { background: var(--border-strong); }
.dot.st-confirmado, .compo .st-confirmado { background: var(--info); }
.dot.st-em_andamento, .compo .st-em_andamento { background: var(--warning); }
.dot.st-concluido, .compo .st-concluido { background: var(--st-concluido); }
.dot.st-cancelado, .compo .st-cancelado { background: var(--text-faint); }
.dot.st-faltou, .dot.st-nao_compareceu { background: var(--danger); }
.dot.st-reabrir { background: var(--primary-color); }

/* ==========================================================================
   Agenda
   ========================================================================== */
.ag-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin-bottom: 18px; }
.ag-tools { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.ag-step { display: inline-flex; align-items: center; gap: 4px; }
.ag-step .icon-btn { color: var(--text-muted); }
.ag-step .icon-btn svg { width: 20px; height: 20px; }
.date-pick { position: relative; overflow: hidden; cursor: pointer; }
.date-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.date-pick:focus-within { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* faixa da semana (modo dia) */
.week {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 6px; margin-bottom: 14px;
}
.day-chip {
  position: relative;
  border: none; background: none;
  border-radius: 11px;
  min-height: 56px; padding: 7px 0 10px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  transition: background-color .15s;
}
.day-chip .dw { font-size: .72rem; color: var(--text-muted); font-weight: 500; }
.day-chip .dn { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.3rem; line-height: 1.1; }
.day-chip .dot { position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-color); }
.day-chip.today:not(.active) .dn { color: var(--primary-text); }
.day-chip.today:not(.active)::after { content: ''; position: absolute; inset: 3px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--accent-soft-2); pointer-events: none; }
.day-chip.closed .dn { color: var(--text-faint); }
.day-chip.active { background: var(--gradient-primary); color: var(--on-primary); box-shadow: 0 6px 14px -10px rgb(var(--shadow-rgb) / .45); }
.day-chip.active .dw, .day-chip.active .dn { color: var(--on-primary); }
.day-chip.active .dot { background: var(--on-primary); }
.day-chip:not(.active):hover { background: var(--accent-soft); }

/* resumo do dia (agenda): quatro números de uma mesma história numa faixa só.
   Cor semântica só no ponto e na barra: azul = agendado, âmbar = em andamento,
   orquídea = concluído (a receber), verde = pago. As mesmas cores da régua e dos selos. */
.day-sum { position: relative; margin: 0 0 12px; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; }
.ds-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.ds-item { min-width: 0; padding: 14px 18px 16px; border-left: 1px solid var(--border-color); transition: background-color .3s; }
.ds-item:first-child { border-left: none; }
.ds-item dt { display: flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-item dd { margin: 0; }
.ds-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-dot); }
.ds-value { margin-top: 2px !important; font-family: var(--font-heading); font-weight: 700; font-size: 1.6rem; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ds-note { font-size: .78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-booked { --c-dot: var(--info); }
.ds-running { --c-dot: var(--warning); }
.ds-done { --c-dot: var(--st-concluido); }
.ds-paid { --c-dot: var(--success); }
/* algo acontecendo agora: o único indicador que ganha fundo, e o ponto pulsa uma vez por ciclo */
.ds-running.is-live { background: var(--warning-soft); }
.ds-running.is-live .ds-note { color: var(--warning-text); font-weight: 600; }
.ds-running.is-live .ds-dot { box-shadow: 0 0 0 0 rgb(214 158 30 / .55); animation: ds-pulse 2s var(--ease) infinite; }
@keyframes ds-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.ds-bar { display: flex; height: 4px; background: var(--surface-3); }
.ds-bar i { display: block; height: 100%; }
.ds-bar .b-paid { background: var(--success); }
.ds-bar .b-done { background: var(--st-concluido); }
.ds-bar .b-run { background: var(--warning); }
.ds-bar .b-wait { background: var(--info-border); }
@media (max-width: 640px) {
  .ds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-item { padding: 12px 14px 14px; }
  .ds-item:nth-child(3) { border-left: none; }
  .ds-item:nth-child(n + 3) { border-top: 1px solid var(--border-color); }
  .ds-value { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .ds-running.is-live .ds-dot { animation: none; } }

/* linha de contexto: expediente + tempo livre à esquerda, filtro de profissionais à direita */
.ag-context { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ag-hours { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .92rem; font-weight: 500; color: var(--text-soft); }
.ag-hours svg { width: 17px; height: 17px; flex: none; color: var(--accent-text); }
.ag-free { margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--border-strong); color: var(--text-muted); font-weight: 400; }
.ag-context .chips { margin: 0; padding-bottom: 2px; flex: 0 1 auto; min-width: 0; }

/* fatos em linha (Plataforma) */
.day-facts { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 0; flex: 1 1 360px; }
.day-facts > div { padding: 0 18px; border-left: 1px solid var(--border-strong); }
.day-facts > div:first-child { padding-left: 0; border-left: none; }
.day-facts dt { font-size: .8rem; color: var(--text-muted); }
.day-facts dd { margin: 0; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.3rem; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .day-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 0; }
  .day-facts > div:nth-child(3) { padding-left: 0; border-left: none; }
  .day-facts dd { font-size: 1.15rem; }
}

.banner {
  display: flex; align-items: center; gap: 12px;
  border-radius: var(--radius-md); padding: 11px 16px; margin-bottom: 14px;
  background: var(--warning-soft); color: var(--warning-text); font-size: .88rem;
  border: 1px solid var(--warning-border);
}
.banner svg { width: 22px; height: 22px; color: var(--warning); flex: 0 0 auto; }

/* ---- Régua de horários (computador) ---- */
.tg { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 8px 12px 14px 0; margin-bottom: 16px; }
.tg-head, .tg-body { display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(0, 1fr)); }
.tg-head { position: sticky; top: 0; z-index: 3; background: var(--surface-color); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 6px 0 10px; border-bottom: 1px solid var(--border-color); margin-bottom: 8px; }
.tg-colhead { display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 600; font-size: .9rem; min-width: 0; padding: 0 6px; }
.tg-colhead .sw { width: 10px; height: 10px; border-radius: 50%; flex: none; }
/* coluna de uma profissional: inicial na cor dela, quantos atendimentos e quanto do expediente está ocupado */
.tg-colhead.is-prof { justify-content: flex-start; gap: 10px; padding: 2px 12px; }
.tg-av { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font-size: .8rem; font-weight: 700; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgb(var(--shadow-rgb) / .1); }
.tg-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tg-who b { font-size: .95rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-load { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .76rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
/* coluna estreita (a largura acompanha os atendimentos simultâneos): o texto corta, a barra encolhe */
.tg-colhead { overflow: hidden; }
.tg-load > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tg-bar { display: block; flex: 0 1 56px; min-width: 16px; width: 56px; height: 5px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.tg-bar i { display: block; height: 100%; border-radius: 5px; }
.tg-body { position: relative; margin-top: 8px; }
.tg-body > * { grid-row: 1; }
.tg-axis { grid-column: 1; position: relative; }
.tg-axis span { position: absolute; right: 10px; transform: translateY(-50%); font-size: .78rem; font-weight: 600; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.tg-lines { grid-column: 2 / -1; position: relative; pointer-events: none; }
.tg-lines i { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border-color); }
.tg-lines i.half { border-top-style: dashed; opacity: .6; }
/* horas que já passaram hoje: um véu leve só no fundo (os cards continuam nítidos, porque o que
   passou sem concluir é o que pede ação) */
.tg-past { position: absolute; left: -3px; right: -3px; top: 0; pointer-events: none; background: rgb(var(--shadow-rgb) / .035); border-radius: 0 0 4px 4px; }
.tg-now-label {
  position: absolute; right: 4px; z-index: 6; transform: translateY(-50%);
  padding: 2px 7px; border-radius: 100px;
  background: var(--danger); color: var(--text-inverse);
  font-size: .72rem; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--surface-color);
}
.tg-col { position: relative; margin: 0 3px; min-width: 0; }
.tg-col + .tg-col::before { content: ''; position: absolute; top: 0; bottom: 0; left: -3.5px; border-left: 1px dashed var(--border-color); }
.tg-off, .tg-col.is-closed::after {
  position: absolute; left: 0; right: 0;
  background: repeating-linear-gradient(-45deg, rgb(var(--shadow-rgb) / .035) 0 6px, transparent 6px 12px);
}
.tg-col.is-closed::after { content: ''; top: 0; bottom: 0; }
.tg.is-week.can-edit .tg-col:not(.is-closed) { cursor: copy; }

.tg-free {
  position: absolute; left: 2px; right: 2px; z-index: 1;
  display: flex; align-items: flex-start; gap: 6px;
  padding: 7px 10px; overflow: hidden;
  border: 1px dashed var(--accent-soft-2); border-radius: 10px; background: transparent;
  color: var(--accent-text); font-size: .8rem; font-weight: 500; text-align: left;
  transition: background-color .15s, border-color .15s;
}
button.tg-free:hover { background: var(--accent-soft); border-color: var(--accent-color); }
.tg-free svg { width: 15px; height: 15px; margin-top: 2px; opacity: 0; transition: opacity .15s; }
button.tg-free:hover svg, button.tg-free:focus-visible svg { opacity: 1; }
div.tg-free { color: var(--text-muted); border-color: var(--border-strong); }

/* Card do atendimento: altura fixa (meia hora da escala, definida no app.js), a mesma com ou sem
   duração. Horário, cliente e serviço (até 2 linhas, nome de serviço longo não some), mais duração
   e valor quando a coluna é larga. O conteúdo começa no topo: o horário fica na linha do início. */
.tg-appt {
  position: absolute; z-index: 2;
  container: tg-card / inline-size;
  padding: 0; overflow: hidden;
  border: 1px solid transparent; border-radius: 10px;
  background: var(--bg, var(--surface-color)); text-align: left; line-height: 1.25;
  box-shadow: inset 3px 0 0 var(--c), 0 1px 2px rgb(var(--shadow-rgb) / .06);
  transition: box-shadow .15s;
}
.tg-appt:hover { box-shadow: inset 3px 0 0 var(--c), 0 8px 18px -10px rgb(var(--shadow-rgb) / .45); z-index: 4; }
/* o espaçamento fica por dentro, para a largura do card poder ajustá-lo (raias estreitas) */
.tg-in { display: flex; flex-direction: column; justify-content: flex-start; gap: 1px; height: 100%; padding: 6px 10px 6px 12px; }
.tg-in > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-appt .tg-time { font-size: .74rem; font-weight: 600; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.tg-appt .tg-client { font-weight: 650; font-size: .88rem; }
.tg-appt .tg-svc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-width: 0; font-size: .78rem; line-height: 1.2; color: var(--text-soft);
  white-space: normal; hyphens: auto; overflow-wrap: break-word;
}
.tg-appt .tg-time svg { width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px; color: var(--success-text); }
.tg-in > .tg-ini { display: none; font-weight: 700; font-size: .78rem; letter-spacing: .02em; }
.tg-foot { display: flex; align-items: baseline; gap: 10px; }
/* duração e valor: só quando a coluna tem espaço (uma profissional, ou poucas) */
.tg-extra { display: none; flex: none; gap: 8px; margin-left: auto; font-size: .74rem; font-weight: 600; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.tg-appt.has-color:not(.is-paid) .tg-extra { color: var(--ap-ink); }
@container tg-card (min-width: 230px) { .tg-extra { display: flex; } }
/* coluna estreita (muitas profissionais): menos respiro dos lados para caber o texto */
@container tg-card (max-width: 129px) {
  .tg-appt .tg-in { padding-right: 4px; padding-left: 9px; }
  .tg-appt .tg-time svg { width: 11px; height: 11px; margin-right: 2px; }
  .tg-appt .tg-client { font-size: .84rem; }
  .tg-appt .tg-svc { font-size: .72rem; }
}
/* coluna bem estreita: só o início do horário (o término segue no rótulo, na dica e no detalhe);
   cliente e serviço continuam à vista */
@container tg-card (max-width: 95px) {
  .tg-end { display: none; }
  .tg-appt .tg-in { gap: 0; padding: 4px 2px 4px 7px; }
  .tg-appt .tg-time { font-size: .7rem; line-height: 1.15; }
  .tg-appt .tg-client { font-size: .8rem; line-height: 1.15; }
  .tg-appt .tg-svc { font-size: .68rem; line-height: 1.15; -webkit-line-clamp: 3; letter-spacing: -.005em; }
}
/* raia muito estreita (vários atendimentos no mesmo horário): horário e iniciais */
@container tg-card (max-width: 63px) {
  .tg-appt .tg-in { padding: 4px 3px 4px 7px; }
  .tg-appt .tg-time { font-size: .68rem; }
  .tg-appt .tg-time svg, .tg-appt .tg-conf { display: none; }
  .tg .tg-appt .tg-in > .tg-client, .tg .tg-appt .tg-foot { display: none; }
  .tg-in > .tg-ini { display: block; }
}
/* raia mínima: o horário não cabe inteiro, então ficam só as iniciais (o resto na dica e no detalhe) */
@container tg-card (max-width: 43px) {
  .tg-appt .tg-in { padding: 4px 2px 4px 6px; }
  .tg .tg-appt .tg-time { display: none; }
}
/* próximo atendimento de hoje: anel na cor principal e quanto falta */
.tg-appt.is-next { outline: 2px solid var(--primary-color); outline-offset: 2px; z-index: 3; animation: next-ring 1.6s var(--ease) 1; }
.tg-next {
  position: absolute; top: 6px; right: 6px;
  padding: 2px 8px; border-radius: 100px;
  background: var(--primary-color); color: var(--on-primary);
  font-size: .7rem; font-weight: 700; line-height: 1.35; white-space: nowrap;
  box-shadow: 0 0 0 1.5px var(--surface-color);
}
/* o selo divide só a linha do horário; em coluna estreita (e na semana) fica só o anel */
.tg-appt.is-next .tg-time { padding-right: 74px; }
@container tg-card (max-width: 179px) { .tg-next { display: none; } .tg-appt.is-next .tg-time { padding-right: 0; } }
.tg.is-week .tg-next { display: none; }
.tg.is-week .tg-appt.is-next .tg-time { padding-right: 0; }
@keyframes next-ring { 0% { outline-offset: 10px; outline-color: transparent; } 100% { outline-offset: 2px; } }
/* agendado = tracejado (ainda não firme); confirmado = turquesa; em andamento = dourado;
   concluído sem pagamento = orquídea; pago = esmaecido com ✓ (caso encerrado) */
.tg-appt.st-agendado, .tl-appt.st-agendado, .lg-sw.st-agendado { --bg: var(--surface-color); border: 1px dashed var(--border-strong); }
.tg-appt.st-confirmado, .tl-appt.st-confirmado, .lg-sw.st-confirmado { --bg: var(--st-confirmado-bg); border-color: var(--info-border); }
.tg-appt.st-em_andamento, .tl-appt.st-em_andamento, .lg-sw.st-em_andamento { --bg: var(--st-andamento-bg); border-color: var(--warning-border); }
.tg-appt.st-concluido, .tl-appt.st-concluido, .lg-sw.st-concluido { --bg: var(--st-concluido-bg); border-color: var(--st-concluido-border); }
.tg-appt.is-paid, .tl-appt.is-paid, .lg-sw.st-pago { --bg: var(--surface-2); border: 1px solid var(--border-color); }
.tg-appt.is-paid .tg-client, .tg-appt.is-paid .tg-svc { color: var(--text-muted); }
.tg-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: -4px 0 18px; padding: 0 4px; font-size: .8rem; color: var(--text-muted); }
.tg-legend li { display: inline-flex; align-items: center; gap: 7px; }
.tg-legend svg { width: 13px; height: 13px; margin-right: -3px; color: var(--success-text); }
.lg-sw { display: inline-block; width: 18px; height: 12px; border-radius: 4px; background: var(--bg); border: 1px solid transparent; }
.lg-sw.st-pago { border-color: var(--border-strong); }
:where(.tg.is-week) .tg-in { gap: 0; padding: 3px 6px 3px 9px; }
.tg.is-week .tg-appt .tg-client { font-size: .8rem; }
.tg-now { position: absolute; left: -3px; right: -3px; z-index: 5; height: 0; border-top: 2px solid var(--danger); pointer-events: none; }
.tg-now::before { content: ''; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }

.tg-dayhead { display: flex; flex-direction: column; align-items: center; gap: 0; border: none; background: none; border-radius: 10px; padding: 4px 10px; min-width: 64px; }
.tg-dayhead span { font-size: .76rem; color: var(--text-muted); font-weight: 500; }
.tg-dayhead b { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.35rem; line-height: 1.1; }
.tg-dayhead em { font-style: normal; font-size: .72rem; color: var(--accent-text); font-weight: 600; min-height: 1.1em; }
.tg-dayhead:hover { background: var(--accent-soft); }
.tg-dayhead.is-today b { color: var(--primary-text); }
.tg-dayhead.is-today { box-shadow: inset 0 0 0 1px var(--accent-soft-2); }

/* ---- Linha do tempo do dia (tablet e computador) ----
   Profissionais em linhas, horário no eixo X. As posições são % da faixa de horas: o dia inteiro
   cabe na largura enquanto cada hora tiver pelo menos --tl-hour; abaixo disso a faixa rola na
   horizontal (só ela, nunca a página) e os nomes ficam presos à esquerda. Cada linha cresce só o
   necessário para os atendimentos simultâneos (--lanes sub-linhas de --tl-lane). */
.tl {
  --tl-who: 196px; --tl-hour: 320px; --tl-lane: 150px; --tl-pad: 6px;
  background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  margin-bottom: 16px; overflow: hidden;
}
.tl-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.tl-scroll:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; border-radius: var(--radius-lg); }
.tl-grid { position: relative; min-width: calc(var(--tl-who) + var(--hours) * var(--tl-hour) + 16px); padding-right: 16px; }
/* Cada hora tem no mínimo --tl-hour: com 320 px, um atendimento de 30 min tem ~157 px, o bastante para
   o mesmo conteúdo do card da régua em colunas: horário com término inteiro, nome em até 2 linhas,
   serviço, duração e valor, e a situação. Em tela larga a faixa estica e os cards crescem junto.
   "Ver o dia todo" encaixa o dia inteiro na largura (cards menores e mais baixos, só o essencial à vista). */
.tl.is-fit { --tl-hour: 56px; --tl-lane: 108px; }
.tl-zoom {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; margin-left: -9px; border: none; border-radius: 8px;
  background: none; color: var(--primary-text); font-size: .76rem; font-weight: 600; white-space: nowrap;
}
.tl-zoom:hover { background: var(--primary-soft); }
.tl-zoom svg { width: 16px; height: 16px; }
.tl-head, .tl-row { display: grid; grid-template-columns: var(--tl-who) minmax(0, 1fr); }
.tl-head { position: relative; z-index: 4; height: 38px; border-bottom: 1px solid var(--border-color); background: var(--surface-color); }
.tl-corner {
  position: sticky; left: 0; z-index: 4; display: flex; align-items: center; padding: 0 16px;
  background: var(--surface-color); font-size: .76rem; font-weight: 600; color: var(--text-muted); border-right: 1px solid var(--border-color);
}
.tl-scale { position: relative; }
.tl-scale span {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  font-size: .78rem; font-weight: 600; color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tl-scale span.is-first { transform: translate(4px, -50%); }
.tl-scale span.is-last { transform: translate(calc(-100% - 2px), -50%); }
.tl-now-label {
  position: absolute; top: 50%; z-index: 3; transform: translate(-50%, -50%);
  padding: 2px 7px; border-radius: 100px; background: var(--danger); color: var(--text-inverse);
  font-size: .72rem; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--surface-color);
}
/* linhas das horas por trás de todas as faixas */
.tl-lines { position: absolute; top: 38px; bottom: 0; left: var(--tl-who); right: 16px; pointer-events: none; }
.tl-lines i { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--border-color); }
.tl-lines i.half { border-left-style: dashed; opacity: .55; }

.tl-row { min-height: calc(var(--lanes) * var(--tl-lane) + var(--tl-pad)); }
.tl-row + .tl-row { border-top: 1px solid var(--border-color); }
.tl-who {
  position: sticky; left: 0; z-index: 3; display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 10px 14px 10px 16px; background: var(--surface-color); border-right: 1px solid var(--border-color);
}
.tl-who .tg-who { min-width: 0; }
.tl-who .tg-bar { display: none; }
/* a faixa isola as camadas dos cards, do "agora" e das faixas livres: com a rolagem lateral, tudo passa
   por baixo da coluna fixa dos nomes (antes os cards, de mesmo z-index, desenhavam por cima dela) */
.tl-track { position: relative; min-width: 0; isolation: isolate; }
.tl.can-edit .tl-row:not(.is-closed) .tl-track { cursor: copy; }
.tl-past { position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none; background: rgb(var(--shadow-rgb) / .035); }
.tl-off, .tl-row.is-closed .tl-track::after {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(-45deg, rgb(var(--shadow-rgb) / .035) 0 6px, transparent 6px 12px);
}
.tl-row.is-closed .tl-track::after { content: ''; left: 0; right: 0; }
.tl-now { position: absolute; top: 0; bottom: 0; z-index: 5; width: 0; border-left: 2px solid var(--danger); margin-left: -1px; pointer-events: none; }

.tl-free {
  position: absolute; top: var(--tl-pad); bottom: var(--tl-pad); z-index: 1;
  container: tl-free / inline-size;
  display: flex; align-items: center; gap: 6px; padding: 0 10px; overflow: hidden; min-width: 0;
  border: 1px dashed var(--accent-soft-2); border-radius: 10px; background: transparent;
  color: var(--accent-text); font-size: .8rem; font-weight: 500; text-align: left; white-space: nowrap;
  transition: background-color .15s, border-color .15s;
}
.tl-free span { overflow: hidden; text-overflow: ellipsis; }
.tl-free svg { width: 15px; height: 15px; flex: none; }
button.tl-free:hover { background: var(--accent-soft); border-color: var(--accent-color); }
div.tl-free { color: var(--text-muted); border-color: var(--border-strong); }
@container tl-free (max-width: 92px) { .tl-free span { display: none; } .tl-free { justify-content: center; padding: 0; } }

.tl-block {
  position: absolute; top: var(--tl-pad); bottom: var(--tl-pad); z-index: 2;
  display: flex; align-items: center; gap: 6px; padding: 0 10px; overflow: hidden; min-width: 0;
  border: 1px solid var(--border-strong); border-radius: 10px; color: var(--text-soft); font-size: .78rem; font-weight: 600;
  background: repeating-linear-gradient(-45deg, var(--surface-3) 0 6px, var(--surface-2) 6px 12px);
}
.tl-block span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-block svg { width: 14px; height: 14px; flex: none; }

/* Card do atendimento na linha do tempo: largura = duração real (mínimo meia hora); horário,
   cliente e serviço; em card estreito ficam horário e iniciais (o resto na dica e no detalhe) */
.tl-appt {
  position: absolute; z-index: 3;
  top: calc(var(--lane) * var(--tl-lane) + var(--tl-pad)); height: calc(var(--tl-lane) - var(--tl-pad));
  container: tl-card / inline-size;
  padding: 0; overflow: hidden; margin-left: 1px;
  border: 1px solid transparent; border-radius: 10px;
  background: var(--bg, var(--surface-color)); color: var(--text-color); text-align: left; line-height: 1.25;
  box-shadow: inset 3px 0 0 var(--c), 0 1px 2px rgb(var(--shadow-rgb) / .06);
  transition: box-shadow .15s;
}
.tl-appt:hover { box-shadow: inset 3px 0 0 var(--c), 0 8px 18px -10px rgb(var(--shadow-rgb) / .45); z-index: 4; }
/* Conteúdo do card. Seletores presos a .tl-appt: a linha do tempo da Atividade (plataforma) também usa
   .tl-time e somava um respiro em cima que empurrava nome e serviço para fora do card.
   De cima para baixo: horário (início e término, nunca cortado), nome em até 2 linhas (quebra entre
   palavras, sem hífen), serviço em até 2 linhas e, no pé do card, duração e valor e a situação.
   O que não cabe continua na dica (title), no rótulo acessível e no detalhe do atendimento. */
.tl-appt .tl-in { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 8px 9px 8px 12px; text-align: left; }
.tl-appt .tl-in > span { min-width: 0; }
.tl-appt .tl-time {
  display: flex; align-items: center; padding: 0; white-space: nowrap; overflow: hidden;
  font-size: .76rem; font-weight: 600; line-height: 1.3; color: var(--text-soft); font-variant-numeric: tabular-nums;
}
/* as marcas (sessão, dupla) cedem espaço antes do horário */
.tl-appt .tl-time > .tl-sess, .tl-appt .tl-time > .tl-pair { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.tl-appt .tl-time svg { width: 12px; height: 12px; flex: none; color: var(--success-text); }
.tl-appt .tl-time > svg { margin-right: 3px; }
.tl-appt .tl-client {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-weight: 650; font-size: .86rem; line-height: 1.25; overflow-wrap: break-word;
}
.tl-appt .tl-svc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: .76rem; line-height: 1.25; color: var(--text-soft); overflow-wrap: break-word;
}
.tl-appt .tl-ini, .tl-appt .tl-first { display: none; font-weight: 700; font-size: .78rem; letter-spacing: .02em; }
.tl-appt.is-paid .tl-client, .tl-appt.is-paid .tl-svc { color: var(--text-muted); }
.tl-appt.has-color .tl-time, .tl-appt.has-color .tl-svc, .tl-appt.has-color .tl-time svg { color: var(--ap-ink); }
.tl-appt.has-color.is-paid .tl-time, .tl-appt.has-color.is-paid .tl-svc { color: var(--text-soft); }
.tl-appt.has-color.is-paid .tl-time svg { color: var(--success-text); }
/* card estreito: o término sai do horário (continua na dica e no detalhe) */
@container tl-card (max-width: 112px) { .tl-appt .tl-end { display: none; } .tl-appt .tl-in { padding-right: 4px; } }
/* "Ver o dia todo" em tela larga (~65 px): horário compacto, nome quebrando por palavra, serviço numa linha */
@container tl-card (max-width: 84px) {
  .tl-appt .tl-in { padding: 5px 2px 5px 7px; }
  .tl-appt .tl-time { font-size: .68rem; letter-spacing: -.01em; }
  .tl-appt .tl-time .tg-conf, .tl-appt .tl-time > svg, .tl-appt .tl-sess { display: none; }
  .tl-appt .tl-client { font-size: .72rem; letter-spacing: -.015em; }
  .tl-appt .tl-svc { font-size: .66rem; text-overflow: clip; }
}
/* só no "Ver o dia todo" (cards bem estreitos): primeiro nome; abaixo disso, as iniciais */
@container tl-card (max-width: 46px) {
  .tl-appt .tl-time, .tl-appt .tl-svc, .tl-appt .tl-client { display: none; }
  .tl-appt .tl-in > .tl-first { display: block; overflow: hidden; text-overflow: clip; white-space: nowrap; font-size: .72rem; }
  .tl-appt .tl-in { justify-content: center; padding: 4px 1px 4px 6px; }
}
@container tl-card (max-width: 30px) { .tl-appt .tl-in > .tl-first { display: none; } .tl-appt .tl-in > .tl-ini { display: block; } }
.tl-appt.is-next { outline: 2px solid var(--primary-color); outline-offset: 2px; z-index: 4; }
.tl-next {
  position: absolute; top: 5px; right: 5px; padding: 2px 7px; border-radius: 100px;
  background: var(--primary-color); color: var(--on-primary); font-size: .68rem; font-weight: 700; line-height: 1.35; white-space: nowrap;
}
@container tl-card (max-width: 200px) { .tl-next { display: none; } }
/* serviço de uma sessão (dois serviços da mesma cliente): marca "1/2" no horário */
.tl-sess, .sess-tag {
  display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 0 5px; border-radius: 100px;
  font-size: .68rem; font-weight: 700; line-height: 1.5; letter-spacing: .01em; font-variant-numeric: tabular-nums;
  background: var(--surface-color); color: var(--text-soft); box-shadow: inset 0 0 0 1px var(--border-strong);
}
.tl-sess svg, .sess-tag svg { width: 11px; height: 11px; }
.tl-appt.has-color:not(.is-paid) .tl-sess, .tg-appt.has-color:not(.is-paid) .sess-tag { background: rgb(255 255 255 / .2); color: var(--ap-ink); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); }

/* atendimento em dupla: marca com o nome de quem atende junto (a outra profissional da linha) */
.tl-pair, .pair-tag {
  display: inline-flex; align-items: center; gap: 3px; min-width: 0; margin-left: 6px; padding: 0 6px 0 4px; border-radius: 100px;
  font-size: .68rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
  background: var(--primary-soft); color: var(--primary-text); box-shadow: inset 0 0 0 1px var(--primary-color);
}
.tl-pair svg, .pair-tag svg { width: 12px; height: 12px; flex: none; }
.tl-pair .pair-name, .pair-tag .pair-name { overflow: hidden; text-overflow: ellipsis; }
.tl-appt.has-color:not(.is-paid) .tl-pair, .tg-appt.has-color:not(.is-paid) .pair-tag { background: rgb(255 255 255 / .2); color: var(--ap-ink); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); }
.tl-appt .tl-time { gap: 0; }
/* card estreito (atendimento curto, como a etapa de 20 min): a marca da parceira não cabe e sairia cortada; o nome e a etapa seguem no rótulo e no detalhe */
@container tl-card (max-width: 119px) { .tl-pair { display: none; } }
/* etapa (uma depois da outra): quem atende antes ou depois, no lugar do nome do serviço (que vai na marca) */
.stage-hand { font-variant-numeric: tabular-nums; }
.stage-hand b { font-weight: 700; color: var(--text-color); }
.stage-hand .sh-arrow { display: none; }
/* card estreito (etapa curta): a seta no lugar de "Depois:"/"Antes:", para caber o nome e o horário */
@container tl-card (max-width: 119px) { .stage-hand .sh-lbl, .stage-hand .sh-end { display: none; } .stage-hand .sh-arrow { display: inline; } }
@container tg-card (max-width: 129px) { .stage-hand .sh-lbl, .stage-hand .sh-end { display: none; } .stage-hand .sh-arrow { display: inline; } }
.tl-appt.has-color:not(.is-paid) .stage-hand b, .tg-appt.has-color:not(.is-paid) .stage-hand b { color: var(--ap-ink); }
/* pé do card: duração e valor (como na régua em colunas) e, embaixo, a situação com a bolinha da cor dela */
.tl-appt .tl-meta {
  display: flex; gap: 0 6px; margin-top: auto; overflow: hidden; white-space: nowrap;
  font-size: .74rem; font-weight: 600; line-height: 1.3; color: var(--text-soft); font-variant-numeric: tabular-nums;
}
.tl-appt .tl-meta > span { flex: none; }
.tl-appt .tl-meta > span + span::before { content: '·'; margin-right: 6px; opacity: .7; }
.tl-appt .tl-st {
  display: flex; align-items: center; gap: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: .7rem; font-weight: 600; line-height: 1.3; color: var(--text-muted);
}
.tl-appt .tl-svc + .tl-st { margin-top: auto; }
.tl-appt .tl-st i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.tl-appt .tl-st.is-confirmado i { background: var(--info); }
.tl-appt .tl-st.is-em_atendimento i { background: var(--warning); }
.tl-appt .tl-st.is-finalizado i { background: var(--st-concluido); }
.tl-appt .tl-st.is-finalizado { color: var(--st-concluido-text); }
.tl-appt .tl-st.is-pago i { background: var(--success); }
.tl-appt .tl-st.is-pago { color: var(--success-text); }
.tl-appt.has-color:not(.is-paid) .tl-meta, .tl-appt.has-color:not(.is-paid) .tl-st { color: var(--ap-ink); }
.tl-appt.has-color:not(.is-paid) .tl-st i { box-shadow: 0 0 0 1.5px rgb(255 255 255 / .7); }
/* card estreito ("Ver o dia todo"): o pé sai, ficam horário, nome e serviço (o resto na dica e no detalhe) */
@container tl-card (max-width: 119px) { .tl-appt .tl-meta, .tl-appt .tl-st { display: none; } .tl-appt .tl-svc { margin-top: auto; -webkit-line-clamp: 1; } }.seg-icons button { display: inline-flex; align-items: center; gap: 6px; }
.seg-icons svg { width: 16px; height: 16px; }

/* tablet: coluna dos nomes mais estreita (inicial e nome), hora um pouco menor, rolagem controlada */
@media (max-width: 1099px) {
  .tl { --tl-who: 156px; }
  .tl-who { padding: 8px 10px 8px 12px; gap: 8px; }
  .tl-who .tg-av { width: 30px; height: 30px; font-size: .72rem; }
  .tl-who .tg-bar { display: none; }
}
/* a agenda do dia aproveita a largura toda do computador (as outras telas mantêm a largura de leitura) */
@media (min-width: 1200px) { body[data-view="agenda"] .main { max-width: 1680px; } }

/* ---- Lista do dia (celular) ---- */
.timeline { display: flex; flex-direction: column; gap: 8px; }
.appt { display: grid; grid-template-columns: 50px 1fr; gap: 10px; align-items: stretch; }
.appt .time { text-align: right; padding-top: 11px; font-variant-numeric: tabular-nums; }
.appt .time b { display: block; font-size: .95rem; font-weight: 600; }
.appt .time span { font-size: .76rem; color: var(--text-muted); }
.appt-card {
  position: relative;
  background: var(--bg, var(--surface-color)); border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 11px 12px 11px 16px; cursor: pointer; overflow: hidden;
  display: flex; gap: 10px; align-items: center;
  transition: border-color .15s, box-shadow .15s;
  text-align: left; width: 100%; min-width: 0;
}
.appt-card:hover { border-color: var(--border-strong); box-shadow: 0 8px 18px -12px rgb(var(--shadow-rgb) / .4); }
.appt-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--accent-color)); }
.appt-card .info { flex: 1; min-width: 0; }
.appt-card .client { font-weight: 600; font-size: .97rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt-card .meta { font-size: .82rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt-card .foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
/* atendimento em etapas na lista: uma linha por etapa (número, profissional, nome da etapa e horário) */
.appt-stages { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: .82rem; }
.appt-stages li { display: grid; grid-template-columns: 18px 8px minmax(0, 1fr) auto; align-items: center; gap: 0 6px; min-width: 0; color: var(--text-muted); }
.appt-stages .st-who { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt-stages .st-name { grid-column: 3 / -1; min-width: 0; font-size: .76rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt-stages .st-n { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: .68rem; font-weight: 700; background: var(--primary-soft); color: var(--primary-text); box-shadow: inset 0 0 0 1px var(--primary-soft-2); }
.appt-stages .sw { width: 8px; height: 8px; border-radius: 50%; }
.appt-stages b { font-weight: 650; color: var(--text-color); }
.appt-stages .st-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-soft); }
.appt-stages li.is-mine .st-n { background: var(--primary-color); color: #fff; box-shadow: none; }
.appt-stages:has(.is-mine) li:not(.is-mine) { opacity: .72; }
.appt-card .price { font-weight: 600; font-size: .86rem; }
.appt.is-agendado .appt-card { border-style: dashed; border-color: var(--border-strong); }
.appt.is-confirmado .appt-card { --bg: var(--surface-color); }
.appt.is-em_andamento .appt-card { --bg: var(--warning-soft); border-color: var(--warning-border); }
.appt.is-cancelado .appt-card, .appt.is-faltou .appt-card, .appt.is-nao_compareceu .appt-card { opacity: .65; }
.appt.is-cancelado .client { text-decoration: line-through; }

/* celular: a linha do agora entre o que passou e o que vem, e o próximo atendimento em destaque */
.now-row { display: grid; grid-template-columns: 50px 1fr; gap: 10px; align-items: center; margin: 2px 0; }
.now-row b { text-align: right; font-size: .8rem; font-weight: 700; color: var(--danger-text); font-variant-numeric: tabular-nums; }
.now-row i { position: relative; height: 2px; border-radius: 2px; background: var(--danger); }
.now-row i::before { content: ''; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.appt.is-next .appt-card { outline: 2px solid var(--primary-color); outline-offset: 2px; animation: next-ring 1.6s var(--ease) 1; }
.next-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 100px; background: var(--primary-color); color: var(--on-primary); font-size: .74rem; font-weight: 700; line-height: 1.3; white-space: nowrap; }

.gap-row { display: grid; grid-template-columns: 50px 1fr; gap: 10px; align-items: center; }
.gap-time { text-align: right; font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.gap-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 8px 14px; width: 100%;
  border: 1px dashed var(--accent-soft-2); border-radius: var(--radius-md); background: transparent;
  font-size: .86rem; color: var(--text-color); text-align: left;
}
.gap-btn b { display: inline-flex; align-items: center; gap: 4px; color: var(--primary-text); font-weight: 600; font-size: .84rem; white-space: nowrap; }
.gap-btn b svg { width: 16px; height: 16px; }
button.gap-btn:hover { background: var(--accent-soft); border-color: var(--accent-color); }
div.gap-btn { border-color: var(--border-strong); }

.lost { margin-top: 14px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); padding: 0 14px; }
.lost summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: .9rem; color: var(--text-muted); list-style-position: inside; }
.lost[open] summary { border-bottom: 1px solid var(--border-color); margin-bottom: 10px; }
.lost .timeline { padding-bottom: 12px; }

/* botão de próximo passo no cartão */
.step-btn {
  flex: 0 0 auto;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 64px; min-height: 52px; padding: 0 8px;
  border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-color);
  font-size: .72rem; font-weight: 600; color: var(--text-muted);
  transition: background-color .15s, transform .12s;
}
.step-btn:active { transform: scale(.96); }
.step-btn svg { width: 18px; height: 18px; }
.step-btn.start { color: var(--primary-text); border-color: var(--primary-soft-2); }
.step-btn.start:hover { background: var(--primary-soft); }
.step-btn.finish { color: var(--text-color); background: var(--warning); border-color: var(--warning); }
.step-btn.receive { color: var(--on-primary); background: var(--gradient-primary); border-color: transparent; box-shadow: 0 6px 14px -10px rgb(var(--shadow-rgb) / .45); }
.step-btn.paid { color: var(--success-text); background: var(--st-pago-bg); border-color: var(--st-pago-bg); }
.step-btn:disabled { opacity: .6; }

/* ---- Semana (celular) ---- */
.wk-list { display: flex; flex-direction: column; gap: 10px; }
.wk-day { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; }
.wk-day.is-today { border-color: var(--accent-soft-2); }
.wk-day.is-closed { background: var(--surface-2); }
.wk-dayhead { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 14px; border: none; background: none; text-align: left; }
.wk-dayhead b { font-weight: 600; }
.wk-day.is-today .wk-dayhead b { color: var(--primary-text); }
.wk-dayhead span { margin-left: auto; font-size: .8rem; color: var(--text-muted); }
.wk-dayhead svg { width: 16px; height: 16px; color: var(--text-faint); }
.wk-row {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 14px 9px 18px; border: none; border-top: 1px solid var(--border-color); background: none; text-align: left;
}
.wk-row::before { content: ''; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--c); }
.wk-row:hover { background: var(--surface-2); }
.wk-time { font-weight: 600; font-size: .88rem; width: 42px; flex: none; font-variant-numeric: tabular-nums; }
.wk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.wk-main b { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-main small { font-size: .8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Cor escolhida no agendamento ----
   O card inteiro ganha a cor, com texto branco, para a agenda ser lida de longe.
   O status continua legível: ✓ marca concluído; pago (caso encerrado) vira um tom claro da mesma cor
   com texto escuro; nas listas, o selo de status continua no card. */
.ap-rosa { --ap: var(--ap-rosa); }
.ap-laranja { --ap: var(--ap-laranja); }
.ap-amarelo { --ap: var(--ap-amarelo); }
.ap-verde { --ap: var(--ap-verde); }
.ap-azul { --ap: var(--ap-azul); }
.ap-lilas { --ap: var(--ap-lilas); }
.ap-cinza { --ap: var(--ap-cinza); }
.has-color {
  --ap-strong: color-mix(in srgb, var(--ap) 72%, #000);   /* faixa lateral e borda */
  --ap-hover: color-mix(in srgb, var(--ap) 88%, #000);
  --ap-soft: color-mix(in srgb, var(--ap) 24%, #fff);     /* pago: encerrado, mais calmo */
  --ap-line: color-mix(in srgb, var(--ap) 45%, #fff);     /* borda do pago */
  --ap-soft-hover: color-mix(in srgb, var(--ap) 30%, #fff);
}
/* régua (computador) */
.tg-appt.has-color, .tl-appt.has-color { --bg: var(--ap); --c: var(--ap-strong); border: 1px solid var(--ap-strong); color: var(--ap-ink); }
.tg-appt.has-color .tg-time, .tg-appt.has-color .tg-svc, .tg-appt.has-color .tg-time svg { color: var(--ap-ink); }
.tg-appt.has-color .tg-svc { font-weight: 500; }
.tg-appt.has-color:hover, .tl-appt.has-color:hover { --bg: var(--ap-hover); }
.tg-appt.has-color.is-paid, .tl-appt.has-color.is-paid { --bg: var(--ap-soft); --c: var(--ap); border-color: var(--ap-line); color: var(--text-color); }
.tg-appt.has-color.is-paid .tg-time, .tg-appt.has-color.is-paid .tg-svc { color: var(--text-soft); }
.tg-appt.has-color.is-paid .tg-time svg { color: var(--success-text); }
.tg-appt.has-color.is-paid .tg-client, .tl-appt.has-color.is-paid .tl-client { color: var(--text-color); }
/* lista do dia (celular). .appt na frente: vence o fundo por status (.appt.is-confirmado .appt-card) */
.appt .appt-card.has-color { --bg: var(--ap); --c: var(--ap-strong); border-color: var(--ap-strong); color: var(--ap-ink); }
.appt .appt-card.has-color .meta, .appt .appt-card.has-color .price { color: var(--ap-ink); font-weight: 500; }
.appt .appt-card.has-color .rr-prof .sw { box-shadow: 0 0 0 1.5px var(--ap-ink); }
.appt .appt-card.has-color:hover { --bg: var(--ap-hover); border-color: var(--ap-strong); }
.appt .appt-card.has-color .step-btn { box-shadow: 0 0 0 1.5px var(--ap-ink); }
.appt .appt-card.has-color.is-paid { --bg: var(--ap-soft); --c: var(--ap); border-color: var(--ap-line); color: var(--text-color); }
.appt .appt-card.has-color.is-paid .meta { color: var(--text-soft); }
.appt .appt-card.has-color.is-paid .rr-prof .sw { box-shadow: none; }
.appt .appt-card.has-color.is-paid:hover { --bg: var(--ap-soft-hover); }
/* semana (celular) */
.wk-row.has-color { --c: var(--ap-strong); background: var(--ap); color: var(--ap-ink); }
.wk-row.has-color .wk-main small { color: var(--ap-ink); font-weight: 500; }
.wk-row.has-color:hover { background: var(--ap-hover); }
.wk-row.has-color.is-paid { --c: var(--ap); background: var(--ap-soft); color: var(--text-color); }
.wk-row.has-color.is-paid .wk-main small { color: var(--text-soft); }
.wk-row.has-color.is-paid:hover { background: var(--ap-soft-hover); }

/* ---- Mês ---- */
.mg { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 10px; }
.mg-week, .mg-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mg-week span { text-align: center; font-size: .78rem; color: var(--text-muted); font-weight: 500; padding: 4px 0 8px; }
.mg-cell {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-height: 92px; padding: 8px 9px; border: 1px solid transparent; border-radius: 12px;
  background: var(--surface-2); text-align: left; min-width: 0;
  transition: border-color .15s, background-color .15s;
}
.mg-cell:hover { border-color: var(--border-strong); background: var(--surface-color); }
.mg-n { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.15rem; line-height: 1; }
.mg-count { font-weight: 600; font-size: .86rem; color: var(--primary-text); font-variant-numeric: tabular-nums; }
.mg-unit { font-weight: 500; color: var(--text-muted); font-size: .76rem; }
.mg-closed { font-size: .74rem; color: var(--text-muted); }
.mg-bar { margin-top: auto; width: 100%; height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.mg-bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent-color); }
.mg-cell.is-out { background: transparent; opacity: .5; }
.mg-cell.is-closed:not(.is-out) { background: repeating-linear-gradient(-45deg, rgb(var(--shadow-rgb) / .035) 0 6px, transparent 6px 12px); }
.mg-cell.is-today .mg-n { color: var(--primary-text); }
.mg-cell.is-today { box-shadow: inset 0 0 0 1px var(--accent-soft-2); }
.mg-cell.is-selected { border-color: var(--primary-color); background: var(--surface-color); }
@media (max-width: 600px) {
  .mg { padding: 6px; }
  .mg-week, .mg-grid { gap: 2px; }
  .mg-cell { min-height: 58px; padding: 6px 4px; align-items: center; }
  .mg-unit, .mg-closed { display: none; }
  .mg-count { font-size: .78rem; }
}

/* destaque depois de salvar */
.flash { animation: flash 1.4s var(--ease); }
@keyframes flash { 0%, 30% { box-shadow: 0 0 0 3px var(--accent-color), 0 10px 24px -12px rgb(var(--shadow-rgb) / .3); } 100% { box-shadow: 0 0 0 0 transparent; } }

.empty { text-align: center; padding: 40px 16px; color: var(--text-muted); background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.empty .logo-mark { width: 52px; margin: 0 auto 14px; opacity: .35; filter: grayscale(.2); }
.empty h3 { font-family: var(--font-heading); font-weight: var(--heading-weight); color: var(--text-color); font-size: 1.2rem; margin: 0 0 4px; }
.empty p { margin: 0 auto 16px; font-size: .9rem; max-width: 46ch; }
.list > .empty, .svc-table > .empty, .card .empty { border: none; }

/* ==========================================================================
   Listas (clientes, equipe)
   ========================================================================== */
.search { position: relative; margin-bottom: 14px; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-faint); pointer-events: none; }
.search input { padding-left: 42px; border-radius: 100px; }
.list { display: flex; flex-direction: column; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; }
.list-item {
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 10px 16px; background: transparent; border: none; border-top: 1px solid var(--border-color);
  cursor: pointer; text-align: left; width: 100%; transition: background-color .15s;
}
.list-item:first-child { border-top: none; }
.list-item:hover { background: var(--surface-2); }
.list-item .grow { flex: 1; min-width: 0; }
.list-item .title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .desc { font-size: .82rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item.inactive { opacity: .55; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  font-weight: 600; font-size: .9rem; letter-spacing: .02em; color: var(--on-primary);
  background: var(--gradient-primary);
}
.avatar.t { background: linear-gradient(135deg, var(--info-border), var(--info-soft)); color: var(--info-text); }
.avatar.r { background: linear-gradient(135deg, var(--accent-soft-2), var(--accent-soft)); color: var(--accent-text); }
.avatar.g { background: linear-gradient(135deg, var(--text-color), var(--text-muted)); }
.price-lg { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.2rem; white-space: nowrap; }

/* ---------- Serviços ---------- */
.svc-table { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; }
.svc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 110px 120px 92px; align-items: center; gap: 12px;
  padding: 0 18px 0 6px; border-top: 1px solid var(--border-color);
}
.svc-row:first-child { border-top: none; }
.svc-headrow { padding-top: 12px; padding-bottom: 10px; font-size: .8rem; color: var(--text-muted); background: var(--surface-2); }
.svc-headrow span:first-child { padding-left: 12px; }
.svc-headrow span:nth-child(3), .svc-row .svc-price { text-align: right; }
.svc-headrow span:last-child { text-align: center; }
.svc-main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 64px; justify-content: center; padding: 10px 12px; border: none; background: none; border-radius: 10px; text-align: left; }
.svc-main:hover .svc-name { color: var(--primary-text); }
.svc-name { font-weight: 600; font-size: .96rem; transition: color .15s; }
.svc-desc { font-size: .82rem; color: var(--text-muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-dur { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.svc-dur svg { width: 16px; height: 16px; color: var(--warning); }
.svc-price { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.15rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.svc-row .switch { justify-self: center; }
.svc-row.inactive .svc-name, .svc-row.inactive .svc-price, .svc-row.inactive .svc-dur { opacity: .5; }
@media (max-width: 640px) {
  .svc-headrow { display: none; }
  .svc-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'main switch' 'meta price'; gap: 0 12px; padding: 4px 14px 12px 2px; }
  .svc-main { grid-area: main; min-height: 0; padding: 8px 12px 4px; }
  .svc-row .switch { grid-area: switch; }
  .svc-dur { grid-area: meta; padding-left: 12px; }
  .svc-price { grid-area: price; }
}

/* interruptor (ativo/inativo) */
.switch { position: relative; display: inline-flex; width: 46px; height: 28px; flex: none; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 100px; background: var(--border-strong); transition: background-color .2s; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-color); box-shadow: 0 1px 3px rgb(var(--shadow-rgb) / .2); transition: transform .2s var(--ease); }
.switch input:checked + span { background: var(--primary-color); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.switch input:disabled + span { opacity: .6; }

/* ==========================================================================
   Painel / folha lateral
   ========================================================================== */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgb(var(--shadow-rgb) / .42);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade .2s ease;
}
.sheet {
  width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh;
  background: var(--surface-color); border-radius: 22px 22px 0 0;
  display: flex; flex-direction: column;
  animation: up .28s var(--ease);
  outline: none;
}
.sheet-head { padding: 10px 56px 12px 20px; border-bottom: 1px solid var(--border-color); position: relative; }
.sheet-head .grabber { width: 40px; height: 4px; border-radius: 4px; background: var(--border-strong); margin: 0 auto 10px; }
.sheet-head h2 { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.4rem; margin: 0; overflow-wrap: anywhere; }
.sheet-head .close { position: absolute; right: 10px; top: 14px; color: var(--text-muted); }
.sheet-body { padding: 18px 20px 22px; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.sheet-foot { padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-color); display: flex; gap: 10px; background: var(--surface-color); border-radius: 0 0 22px 22px; }
.sheet-foot .btn-primary { flex: 1; }
@media (min-width: 700px) and (max-width: 899px) {
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: 22px; max-height: 88vh; }
  .sheet-head .grabber { display: none; }
  .sheet-head { padding-top: 18px; }
}
/* computador: painel lateral à direita, a agenda continua à vista */
@media (min-width: 900px) {
  .sheet-backdrop { justify-content: flex-end; align-items: stretch; background: rgb(var(--shadow-rgb) / .28); }
  .sheet { max-width: 500px; max-height: none; height: 100%; border-radius: 22px 0 0 22px; animation: side .3s var(--ease); box-shadow: -20px 0 50px -30px rgb(var(--shadow-rgb) / .6); }
  .sheet-head { padding: 22px 60px 16px 26px; }
  .sheet-head .grabber { display: none; }
  .sheet-head .close { top: 18px; right: 16px; }
  .sheet-body { padding: 20px 26px 26px; }
  .sheet-foot { padding: 14px 26px 18px; border-radius: 0 0 0 22px; }
}
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes side { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Detalhes do atendimento ---- */
.dt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dt-when { display: flex; flex-direction: column; }
.dt-when b { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.7rem; line-height: 1.1; }
.dt-when span { font-size: .88rem; color: var(--text-muted); margin-top: 4px; }
.dt-list { margin: 0 0 16px; border-top: 1px solid var(--border-color); }
.dt-list > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-color); }
.dt-list dt { font-size: .84rem; color: var(--text-muted); }
.dt-list dd { margin: 0; font-weight: 500; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; overflow-wrap: anywhere; }
.dt-list .sw { width: 10px; height: 10px; border-radius: 50%; }
.dt-notes dd { font-weight: 400; white-space: pre-line; }
.dt-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 12px; }
.dt-actions .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* ---- Sessão de atendimento (dois serviços da mesma cliente) ---- */
.svc-items { display: grid; gap: 10px; }
.svc-item { padding: 12px 14px 4px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-2); }
.svc-item.is-locked { background: var(--surface-3); }
.svc-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.svc-item-head b { font-size: .9rem; font-weight: 600; }
.svc-item-n {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; flex: none;
  background: var(--surface-color); box-shadow: inset 0 0 0 1px var(--border-strong); font-size: .76rem; font-weight: 700; color: var(--text-soft);
}
.svc-item .field { margin-top: 10px; }
/* Atendimento em dupla no formulário: o seletor ocupa a largura do bloco (dois botões iguais, alvo de toque
   confortável) e as duas listas ficam lado a lado enquanto couberem; com uma só, ela usa a largura toda */
.svc-item .team-mode { margin-top: 12px; }
.seg-team { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-top: 4px; }
.seg-team button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 10px; border-radius: 9px; }
.seg-team button svg { width: 16px; height: 16px; flex: none; }
.seg-team button[aria-pressed="true"] { background: var(--surface-color); color: var(--primary-text); font-weight: 650; box-shadow: 0 1px 3px rgb(var(--shadow-rgb) / .14), inset 0 0 0 1.5px var(--primary-color); }
.seg-team button:disabled { opacity: .55; cursor: not-allowed; }
.seg-team button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.team-profs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
.team-profs select { text-overflow: ellipsis; }
.svc-item .pair-hint { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--primary-text); font-weight: 550; }
.svc-item .pair-hint::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-color); flex: none; }
/* detalhe do atendimento em dupla */
.dt-pair { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.dt-pair .rr-prof { margin-left: 0; }
.dt-pair .rr-prof + .rr-prof::before { content: '+'; margin-right: 5px; color: var(--text-muted); }
.pair-note { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .8rem; color: var(--text-muted); }
.pair-note svg { width: 14px; height: 14px; flex: none; color: var(--primary-text); }
/* etapas no detalhe: a lista fica junto das profissionais */
.dt-pair + .sess-steps, dd > .sess-steps { margin: 6px 0 2px; }
.svc-stages { margin-top: 14px; }
.svc-stages #svStageFields { margin-top: 12px; }
.svc-remove { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--danger-text); text-decoration: none; font-size: .84rem; }
.svc-remove svg { width: 15px; height: 15px; }
.svc-add { margin-top: 10px; gap: 6px; }
.svc-add svg { width: 16px; height: 16px; }
.svc-add-hint { margin-top: 6px; }
.sess-summary { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--surface-color); }
.sess-sum-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.sess-sum-head b { font-size: .92rem; }
.sess-sum-error { display: flex; gap: 8px; margin: 0; color: var(--danger-text); font-size: .86rem; font-weight: 500; }
.sess-sum-error svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
/* etapas: uma linha por serviço, ligadas por um traço (a mesma visita) */
.sess-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sess-steps li {
  position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 2px 12px; align-items: baseline;
  padding: 8px 0 8px 18px; font-size: .88rem;
}
.sess-steps li::before { content: ''; position: absolute; left: 4px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-color); }
.sess-steps li + li::after { content: ''; position: absolute; left: 7.5px; top: -6px; height: 20px; border-left: 1.5px dashed var(--border-strong); }
.sess-steps li.has-warn::before { background: var(--warning); }
.sess-steps li.is-off { opacity: .6; }
.sess-steps li.is-off::before { background: var(--text-faint); }
.sess-steps li.is-current { background: linear-gradient(90deg, var(--primary-soft), transparent 80%); border-radius: 8px; }
.sess-step-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.sess-step-main { display: flex; flex-direction: column; min-width: 0; }
.sess-step-main .muted { display: inline-flex; align-items: center; gap: 6px; }
.sess-step-main .sw { width: 9px; height: 9px; border-radius: 50%; }
.sess-step-state { grid-column: 2; display: flex; align-items: flex-start; gap: 6px; font-size: .8rem; color: var(--success-text); }
.sess-step-state svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.sess-steps li.has-warn .sess-step-state { color: var(--warning-text); }
.sess-steps.is-static .sess-step-state { color: inherit; }
.dt-sess { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.dt-sess-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.dt-sess-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .95rem; font-weight: 600; }
.dt-sess-head svg { width: 16px; height: 16px; color: var(--primary-text); }
.dt-sess-total { margin: 6px 0 0; font-size: .84rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.sess-tag { margin-left: 6px; vertical-align: 1px; }
@media (max-width: 480px) { .sess-steps li { grid-template-columns: 1fr; } .sess-step-state { grid-column: 1; } }

/* ---- Formulário de agendamento ---- */
.form-step { padding: 2px 0 6px; }
.form-step + .form-step { border-top: 1px solid var(--border-color); padding-top: 16px; margin-top: 4px; }
.form-step-title { display: flex; align-items: center; gap: 10px; font-size: .98rem; font-weight: 600; margin: 0 0 12px; }
.step-n {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-text); font-size: .78rem; font-weight: 600;
}
.slots { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 6px; }
.slot-group { display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: start; }
.slot-label { font-size: .8rem; color: var(--text-muted); padding-top: 8px; }
.slot-list { display: flex; flex-wrap: wrap; gap: 6px; }
.slot {
  min-width: 62px; min-height: 38px; padding: 6px 10px;
  border: 1px solid var(--border-strong); background: var(--surface-color); border-radius: 10px;
  font-size: .86rem; font-weight: 500; font-variant-numeric: tabular-nums;
  transition: border-color .15s, background-color .15s;
}
.slot:hover { border-color: var(--primary-color); color: var(--primary-text); }
.slot.active { background: var(--primary-color); border-color: var(--primary-color); color: var(--on-primary); }
.toggle-lg { font-size: .92rem; color: var(--text-color); margin-top: 6px; }

/* campo "Cor do agendamento": parece um campo; ao tocar, abre a paleta logo abaixo */
.color-trigger {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 46px; padding: 8px 12px 8px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-color);
  font-size: 1rem; text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.color-trigger:hover { border-color: var(--border-hover); }
.color-trigger[aria-expanded="true"] { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--focus-ring); }
.color-trigger .ct-name { flex: 1; min-width: 0; font-weight: 500; }
.color-trigger .ct-hint { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.color-trigger > svg:last-child { width: 18px; height: 18px; color: var(--text-muted); transform: rotate(90deg); transition: transform .2s var(--ease); }
.color-trigger[aria-expanded="true"] > svg:last-child { transform: rotate(-90deg); }
.color-panel {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  margin-top: 8px; padding: 8px;
  border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-2);
  animation: rise .18s var(--ease);
}
.color-opt {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-height: 72px; padding: 9px 4px 7px;
  border: none; border-radius: var(--radius-sm); background: transparent;
  font-size: .78rem; font-weight: 500; color: var(--text-soft);
  transition: background-color .15s;
}
.color-opt:hover { background: var(--surface-color); }
.color-opt[aria-checked="true"] { color: var(--text-color); font-weight: 600; background: var(--surface-color); }
/* amostra: círculo na cor; o padrão mostra os dois fundos de status que ele segue */
.ap-sw {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ap); color: #fff;
  box-shadow: inset 0 0 0 1px rgb(var(--shadow-rgb) / .12);
  transition: box-shadow .15s;
}
.ap-sw.is-default { --ap: var(--text-muted); background: linear-gradient(135deg, var(--st-confirmado-bg) 50%, var(--st-concluido-bg) 50%); color: var(--text-soft); box-shadow: inset 0 0 0 1px var(--border-strong); }
.ap-sw svg { width: 16px; height: 16px; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s var(--ease); }
.color-opt[aria-checked="true"] .ap-sw { box-shadow: 0 0 0 2px var(--surface-color), 0 0 0 4px var(--ap); }
.color-opt[aria-checked="true"] .ap-sw svg { opacity: 1; transform: none; }
.color-trigger .ap-sw { width: 24px; height: 24px; }
.dt-list .ap-sw { width: 12px; height: 12px; }
@media (min-width: 520px) { .color-panel { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.pay-box { margin-top: 12px; }

.segmented { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.segmented button { border: 1px solid var(--border-strong); background: var(--surface-color); border-radius: 100px; min-height: 36px; padding: 6px 13px; font-size: .84rem; font-weight: 500; }
.segmented button.active { color: var(--text-inverse); border-color: transparent; }
.segmented button.active[data-v="agendado"] { background: var(--text-soft); }
.segmented button.active[data-v="confirmado"] { background: var(--info-text); }
.segmented button.active[data-v="em_andamento"] { background: var(--warning); color: var(--text-color); }
.segmented button.active[data-v="concluido"] { background: var(--st-concluido-text); }
.segmented button.active[data-v="faltou"] { background: var(--danger-text); }
.segmented button.active[data-v="cancelado"] { background: var(--text-muted); }

.warn {
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px;
  background: var(--warning-soft); border: 1px solid var(--warning-border); color: var(--warning-text); font-size: .88rem;
}
.warn b { display: block; margin-bottom: 4px; color: inherit; }
.warn ul { margin: 0; padding-left: 18px; }

/* autocomplete de cliente */
.ac { position: relative; }
.ac-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  background: var(--surface-color); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  border: 1px solid var(--border-color); max-height: 240px; overflow-y: auto;
}
.ac-item { display: flex; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 10px 14px; border: none; background: none; text-align: left; border-bottom: 1px solid var(--border-color); }
.ac-item:hover, .ac-item:focus { background: var(--accent-soft); outline: none; }
.ac-item.new { color: var(--primary-text); font-weight: 600; }
.selected-client {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--surface-2); border: 1px solid var(--border-strong);
}
.selected-client .avatar { width: 38px; height: 38px; font-size: .84rem; }
.selected-client .grow { flex: 1; min-width: 0; }

.history { display: flex; flex-direction: column; gap: 6px; }
.history-item { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border-color); border-radius: 12px; font-size: .86rem; }

.method-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.method-grid button { border: 1px solid var(--border-strong); background: var(--surface-color); border-radius: 12px; min-height: 44px; padding: 10px 6px; font-weight: 500; font-size: .88rem; }
.method-grid button.active { border-color: var(--primary-color); background: var(--primary-soft); color: var(--primary-text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--primary-color); }

/* pequenas estatísticas (ficha da cliente) */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--surface-2); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 12px 14px; }
.stat .k { font-size: .8rem; color: var(--text-muted); }
.stat .v { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.4rem; line-height: 1.2; white-space: nowrap; }

/* ==========================================================================
   Painel (dashboard)
   ========================================================================== */
/* Leitura: hoje (agora) -> precisa de atenção -> ações -> desempenho do período -> pendências -> detalhamento.
   Containers só onde separam contextos; números do mesmo assunto ficam numa faixa única. */
.db-head { margin-bottom: 22px; }
.db-head .page-title::first-letter { text-transform: none; }
.db-context { margin: 4px 0 0; font-size: .92rem; color: var(--text-muted); }
.db-context::first-letter { text-transform: uppercase; }

.db-top { display: grid; gap: 20px; margin-bottom: 20px; }
@media (min-width: 1100px) { .db-top { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }

.db-today, .db-attn, .db-period, .db-panel, .db-detail {
  background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
}
.db-today { padding: 22px 24px 18px; container-type: inline-size; }
.db-today-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.db-today h2, .db-attn h2, .db-period h2, .db-panel h2, .db-detail h2 {
  font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.2rem; margin: 0; line-height: 1.25;
}
.db-today-head .link-btn { display: inline-flex; align-items: center; gap: 2px; padding: 4px 0; }
.db-today-head .link-btn svg { width: 16px; height: 16px; }
.db-status { margin: 6px 0 18px; font-size: 1.02rem; color: var(--text-soft); }

/* faixa do expediente: o elemento de destaque do Painel */
/* Linha do dia (Início). Cards com horário e primeiro nome; livre tracejado; fora do expediente hachurado.
   Cada hora tem no mínimo 64 px (RAIL_HOUR em app.js): em tela estreita só a faixa rola para os lados. */
.rail { --lane-h: 38px; --lane-gap: 5px; --label-h: 24px; }
.rail-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; padding-bottom: 2px; }
.rail-track {
  position: relative; min-width: calc(var(--hours) * 64px);
  height: calc(var(--label-h) + var(--rows) * var(--lane-h) + (var(--rows) - 1) * var(--lane-gap) + 8px);
}
.rail-tick { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--border-color); }
.rail-tick b { position: absolute; top: 0; left: 0; transform: translateX(-50%); font-size: .76rem; font-weight: 600; color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rail-tick.is-first b { transform: none; }
.rail-tick.is-last b { transform: translateX(-100%); }
.rail-past { position: absolute; left: 0; top: var(--label-h); bottom: 0; border-radius: 8px 0 0 8px; background: rgb(var(--shadow-rgb) / .045); pointer-events: none; }
/* fora do expediente (antes, intervalo, depois): o mesmo hachurado da agenda */
.rail-off {
  position: absolute; top: var(--label-h); bottom: 0; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgb(var(--shadow-rgb) / .045) 0 6px, transparent 6px 12px);
}
/* trecho livre (de agora em diante): tracejado no tom de destaque, com o rótulo quando cabe */
.rail-free {
  position: absolute; top: calc(var(--label-h) + 2px); bottom: 2px; display: flex; align-items: flex-end; overflow: hidden;
  container: rail-free / inline-size; pointer-events: none;
  border: 1px dashed var(--accent-soft-2); border-radius: 8px; background: var(--accent-wash);
}
.rail-free span { padding: 0 8px 5px; font-size: .7rem; font-weight: 600; color: var(--accent-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container rail-free (max-width: 70px) { .rail-free span { display: none; } }
.rail-seg {
  position: absolute; z-index: 1; top: calc(var(--label-h) + 4px + var(--lane) * (var(--lane-h) + var(--lane-gap)));
  height: var(--lane-h); padding: 0 8px 0 11px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; overflow: hidden;
  border: 1px solid var(--info-border); border-radius: 9px;
  background: var(--st-confirmado-bg); color: var(--text-color);
  box-shadow: inset 3px 0 0 var(--c, var(--info)), 0 1px 2px rgb(var(--shadow-rgb) / .06);
  text-align: left; line-height: 1.2;
  transition: filter .15s, box-shadow .15s;
}
.rail-seg b { font-size: .7rem; font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.rail-seg span { max-width: 100%; font-size: .8rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-seg:hover { filter: brightness(.97); box-shadow: inset 3px 0 0 var(--c, var(--info)), 0 6px 14px -8px rgb(var(--shadow-rgb) / .45); z-index: 2; }
.rail-seg.st-concluido { background: var(--st-concluido-bg); border-color: var(--st-concluido-border); }
.rail-seg.is-paid { background: var(--surface-2); border-color: var(--border-color); color: var(--text-muted); }
.rail-seg.has-color { background: var(--ap); border-color: var(--ap-strong); color: var(--ap-ink); box-shadow: inset 3px 0 0 var(--ap-strong); }
.rail-seg.has-color b { color: var(--ap-ink); }
.rail-seg.has-color.is-paid { background: var(--ap-soft); border-color: var(--ap-line); color: var(--text-soft); }
.rail-seg.has-color.is-paid b { color: var(--text-soft); }
.rail-now { position: absolute; top: calc(var(--label-h) - 4px); bottom: -2px; width: 2px; margin-left: -1px; background: var(--danger); z-index: 3; pointer-events: none; }
.rail-now b {
  position: absolute; top: calc(-1 * var(--label-h) + 2px); left: 50%; transform: translateX(-50%);
  padding: 1px 6px; border-radius: 100px; background: var(--danger); color: var(--text-inverse);
  font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--surface-color);
}
.rail-empty { margin: 0; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-muted); font-size: .9rem; }
.rail-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 10px 0 0; padding: 0; font-size: .76rem; color: var(--text-muted); }
.rail-legend li { display: inline-flex; align-items: center; gap: 7px; }
.rail-legend span { width: 18px; height: 11px; border-radius: 4px; }
.rl-busy { background: var(--st-confirmado-bg); border: 1px solid var(--info-border); box-shadow: inset 2px 0 0 var(--info); }
.rl-free { background: var(--accent-wash); border: 1px dashed var(--accent-soft-2); }
.rl-off { background: repeating-linear-gradient(-45deg, rgb(var(--shadow-rgb) / .12) 0 3px, transparent 3px 6px); border: 1px solid var(--border-color); }

/* números de hoje: uma faixa só */
.db-today-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border-color); }
.db-today-facts > div { padding: 0 16px; border-left: 1px solid var(--border-color); min-width: 0; }
.db-today-facts > div:first-child { padding-left: 0; border-left: none; }
.db-today-facts dt, .db-facts dt { font-size: .8rem; color: var(--text-muted); }
.db-today-facts dd, .db-facts dd { margin: 0; }
.pf-value { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.4rem; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-value small { font-size: .9rem; color: var(--text-muted); font-weight: 500; }
.pf-note { font-size: .76rem; color: var(--text-muted); line-height: 1.35; margin-top: 2px; }
.pf-note .delta { display: inline; margin: 0; font-size: .76rem; }
.pf-note .delta .muted { display: none; }
/* a coluna do dia decide (não a tela): estreita, os quatro números viram 2×2 */
@container (max-width: 680px) {
  .db-today-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .db-today-facts > div:nth-child(3) { padding-left: 0; border-left: none; }
}

/* a seguir */
.db-next { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.db-next h3 { margin: 0 0 4px; font-size: .84rem; font-weight: 600; color: var(--text-muted); }
.db-next-list { list-style: none; margin: 0; padding: 0; }
.db-next-row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; padding: 9px 8px; margin: 0 -8px; border: none; border-radius: var(--radius-sm); background: none; text-align: left;
  box-sizing: content-box; max-width: 100%;
  transition: background-color .15s;
}
.db-next-row:hover { background: var(--surface-2); }
.dn-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.dn-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.dn-main b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-main small { font-size: .8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-until { font-size: .78rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.db-next-row.is-next .dn-time { color: var(--primary-text); }
.db-next-row.is-next .dn-until { padding: 2px 9px; border-radius: 100px; background: var(--primary-color); color: var(--on-primary); }

/* atenção + ações */
.db-side { display: flex; flex-direction: column; gap: 14px; }
.db-attn { padding: 20px 20px 8px; }
.attn-list { list-style: none; margin: 10px 0 0; padding: 0; }
.attn-item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: 'ico body' '. act';
  gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--border-color);
}
.attn-item:first-child { border-top: none; }
.attn-ico { grid-area: ico; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; }
.attn-ico svg { width: 18px; height: 18px; }
.attn-body { grid-area: body; display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.attn-body b { font-size: .92rem; font-weight: 600; }
.attn-body span { font-size: .8rem; color: var(--text-muted); overflow-wrap: anywhere; }
.attn-item .btn { grid-area: act; justify-self: start; margin-top: 4px; }
.attn-warn .attn-ico { background: var(--warning-soft); color: var(--warning-text); }
.attn-money .attn-ico { background: var(--primary-soft); color: var(--primary-text); }
.attn-gift .attn-ico { background: var(--accent-soft); color: var(--accent-text); }
.attn-people .attn-ico { background: var(--info-soft); color: var(--info-text); }
.attn-clear, .list-clear { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; font-size: .88rem; color: var(--text-soft); }
.attn-clear { padding: 12px 14px; border-radius: var(--radius-md); background: var(--success-soft); }
.attn-clear svg, .list-clear svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--success-text); }
.list-clear { margin: 6px 0 4px; color: var(--text-muted); }
.db-actions { display: flex; flex-direction: column; gap: 8px; }
.db-actions-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.db-actions-row .btn svg { width: 17px; height: 17px; }

/* desempenho do período */
.db-period { padding: 22px 24px 24px; margin-bottom: 20px; }
.db-period-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 20px; }
.db-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.db-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.db-seg::-webkit-scrollbar { display: none; }
.db-custom { max-width: 420px; margin-bottom: 6px; }
.db-money { display: grid; gap: 18px 32px; }
@media (min-width: 760px) { .db-money { grid-template-columns: 260px minmax(0, 1fr); align-items: center; } }
.db-hero { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.db-hero-label { font-size: .88rem; font-weight: 600; color: var(--primary-text); }
.db-hero-value { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-hero-note { font-size: .86rem; color: var(--text-muted); }
.db-chart { min-width: 0; }
.db-chart h3 { margin: 0 0 4px; font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.db-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 22px 0 0;
  background: var(--border-color); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden;
}
.db-facts > div { padding: 14px 16px; background: var(--surface-color); min-width: 0; }
.db-facts > div.is-attn { background: var(--warning-soft); }
.db-facts > div.is-attn dt, .db-facts > div.is-attn .pf-value { color: var(--warning-text); }
.db-facts .pf-value { font-size: 1.25rem; }
/* seis indicadores: 2×3 no celular, 3×2 no computador (sem célula sobrando) */
@media (min-width: 900px) { .db-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* pendências lado a lado */
.db-lists { display: grid; gap: 20px; margin-bottom: 20px; }
@media (min-width: 1000px) { .db-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.db-panel { padding: 20px 20px 12px; scroll-margin-top: 20px; }
.db-panel .sub, .db-detail .sub { color: var(--text-muted); font-size: .84rem; margin: 4px 0 10px; }
.db-panel h2 .count, .db-attn h2 .count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; margin-left: 6px; border-radius: 100px; background: var(--accent-text); color: var(--text-inverse); font-family: var(--font-body); font-size: .78rem; font-weight: 600; vertical-align: middle; }
.db-attn h2 .count { background: var(--warning-text); }

/* detalhamento: seis listas numa grade com divisórias, sem um cartão para cada */
.db-detail { padding: 22px 24px 8px; }
.db-detail-grid { display: grid; margin-top: 8px; }
.db-detail-grid > div { padding: 16px 0; border-top: 1px solid var(--border-color); min-width: 0; }
.db-detail-grid > div:first-child { border-top: none; }
.db-detail h3 { margin: 0 0 12px; font-size: .95rem; font-weight: 600; }
@media (min-width: 700px) {
  .db-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .db-detail-grid > div:nth-child(2) { border-top: none; }
}
@media (min-width: 1100px) {
  .db-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; }
  .db-detail-grid > div { padding: 16px 22px; border-left: 1px solid var(--border-color); }
  .db-detail-grid > div:nth-child(3n + 1) { padding-left: 0; border-left: none; }
  .db-detail-grid > div:nth-child(3n) { padding-right: 0; }
  .db-detail-grid > div:nth-child(-n + 3) { border-top: none; }
}
@media (max-width: 520px) {
  .db-today, .db-period, .db-detail { padding-left: 16px; padding-right: 16px; }
  .db-attn, .db-panel { padding-left: 16px; padding-right: 16px; }
}

.select-sm { width: auto; min-height: 38px; padding: 7px 12px; border-radius: 100px; font-size: .86rem; }
.list-empty { padding: 14px 0 4px; margin: 0; }

.barlist { display: flex; flex-direction: column; gap: 12px; }
.bl-top { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; margin-bottom: 5px; }
.bl-label { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-label .sw { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.bl-value { font-weight: 600; white-space: nowrap; }
.bl-track { height: 8px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.bl-bar { height: 100%; border-radius: 5px; background: var(--primary-color); }

.daychart { position: relative; }
.daychart svg { display: block; overflow: visible; }
.daychart .grid { stroke: var(--border-color); stroke-width: 1; stroke-dasharray: 3 4; }
.daychart .base { stroke: var(--border-strong); stroke-width: 1; }
.daychart .axis { font-size: 10.5px; fill: var(--text-muted); font-family: var(--font-body); }
.daychart .bar { fill: var(--primary-color); transition: opacity .15s; }
.daychart .bar.today { fill: var(--accent-color); }
.daychart .hit { fill: transparent; cursor: pointer; }
.daychart .bar-g.hover .hit { fill: var(--accent-wash); }
.daychart:hover .bar-g:not(.hover) .bar { opacity: .55; }
.chart-tip {
  position: absolute; top: -8px; transform: translate(-50%, -100%);
  background: var(--toast-background); color: var(--text-inverse); border-radius: 10px; padding: 8px 12px;
  font-size: .8rem; line-height: 1.35; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow);
}
.chart-tip .muted { color: var(--toast-muted); font-size: .76rem; }

/* Painel: variação contra o período anterior (seta + texto; a cor só reforça) */
.delta { display: block; margin-top: 6px; font-size: .84rem; font-weight: 600; color: var(--text-muted); }
.delta.up { color: var(--success-text); }
.delta.down { color: var(--danger-text); }
.delta .muted { font-weight: 400; }

.report-row > .price { font-weight: 600; font-size: .9rem; white-space: nowrap; }
.report-row > .btn-whats { flex: 0 0 auto; }
.rr-info .link-btn.client { display: block; max-width: 100%; color: var(--text-color); text-align: left; }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.plain-list li { display: flex; align-items: center; gap: 8px; font-size: .88rem; min-height: 36px; }
.plain-list .link-btn { padding: 2px 0; text-align: left; color: var(--text-color); font-weight: 500; }
.icon-link { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: auto; border-radius: 10px; color: var(--success-text); background: var(--success-soft); }
.icon-link:hover { background: var(--success-soft-2); }
.icon-link svg { width: 18px; height: 18px; }

.report-list { display: flex; flex-direction: column; }
.report-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-top: 1px solid var(--border-color); border-radius: 10px; }
.report-row:first-child { border-top: none; }
.report-row[role="button"] { cursor: pointer; }
.report-row[role="button"]:hover { background: var(--surface-2); }
.rr-prof { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; }
.rr-prof .sw, .meta .sw { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.appt-card .rr-prof::before { content: ''; }
.rr-date { width: 48px; flex: 0 0 auto; text-align: center; line-height: 1.2; }
.rr-date b { display: block; font-size: .88rem; }
.rr-date span { font-size: .76rem; color: var(--text-muted); }
.rr-info { flex: 1; min-width: 0; }
.rr-info .client { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-info .meta { font-size: .8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-info .foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.rr-info .price { font-weight: 600; font-size: .86rem; }

/* ==========================================================================
   Ajustes
   ========================================================================== */
.hours-grid { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.hours-row { display: grid; grid-template-columns: 92px 130px 130px auto; gap: 8px; align-items: center; }
.hours-row .dname { font-weight: 600; font-size: .9rem; }
.hours-row input[type=time] { min-height: 42px; padding: 8px 10px; }
.hours-row.off input[type=time] { opacity: .35; }
.toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: .84rem; color: var(--text-soft); white-space: nowrap; cursor: pointer; }
.toggle input { accent-color: var(--primary-color); width: 18px; height: 18px; }
@media (max-width: 480px) {
  .hours-row { grid-template-columns: 1fr 1fr; }
  .hours-row .dname { grid-column: 1; }
  .hours-row .toggle { grid-column: 2; grid-row: 1; justify-self: end; }
}
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface-color); box-shadow: 0 0 0 1px var(--border-strong); }
.swatch.active { box-shadow: 0 0 0 2.5px var(--text-color); }
.special-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border-color); margin-bottom: 6px; font-size: .88rem; }
.special-item .grow { flex: 1; }
.special-item button { border: none; background: none; color: var(--danger-text); font-weight: 700; font-size: 1.2rem; width: 36px; height: 36px; border-radius: 10px; }
.special-item button:hover { background: var(--danger-soft); }

.link-card { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; transition: border-color .15s; }
.link-card:hover { border-color: var(--border-strong); }
.link-card > svg { width: 22px; height: 22px; color: var(--primary-text); flex: 0 0 auto; }
.link-card > div { flex: 1; }
.link-card > svg:last-child { color: var(--text-faint); }

/* ==========================================================================
   Acessos
   ========================================================================== */
.role-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: .74rem; font-weight: 600;
  padding: 3px 11px; border-radius: 100px; border: 1px solid transparent;
}
.role-chip.master { background: var(--text-color); color: var(--text-inverse); }
.role-chip.admin { background: var(--primary-soft); color: var(--primary-text); border-color: var(--primary-soft-2); }
.role-chip.gerente { background: var(--info-soft); color: var(--info-text); border-color: var(--info-border); }
.role-chip.usuario { background: var(--surface-3); color: var(--text-soft); }
.role-chip.wait { background: var(--warning-soft); color: var(--warning-text); }
.avatar.role-master { background: var(--text-color); color: var(--text-inverse); }
.avatar.role-admin { background: var(--gradient-primary); color: var(--on-primary); }
.avatar.role-gerente { background: linear-gradient(135deg, var(--info-border), var(--info-soft)); color: var(--info-text); }
.avatar.role-usuario { background: var(--surface-3); color: var(--text-soft); }

.acc-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 14px;
}
.acc-sum-main { display: inline-flex; align-items: baseline; gap: 8px; margin-right: 6px; font-size: .9rem; color: var(--text-muted); }
.acc-sum-main .n { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.7rem; color: var(--text-color); line-height: 1; }
.acc-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 900px) { .acc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acc-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 14px; transition: border-color .15s, box-shadow .15s;
}
.acc-card:hover { border-color: var(--border-strong); box-shadow: 0 8px 18px -12px rgb(var(--shadow-rgb) / .35); }
.acc-card.inactive { opacity: .6; }
.acc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.acc-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-meta { font-size: .82rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-status { display: block; font-size: .76rem; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-status::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: middle; }
.acc-status.on { color: var(--success-text); }
.acc-status.wait { color: var(--warning-text); }
.acc-status.off { color: var(--text-muted); }

.perm-scroll { overflow-x: auto; }
table.perm { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 460px; }
.perm th, .perm td { padding: 10px 8px; border-bottom: 1px solid var(--border-color); }
.perm thead th { text-align: center; }
.perm tbody th { text-align: left; font-weight: 500; }
.perm td { text-align: center; width: 110px; }
.perm tbody tr:last-child th, .perm tbody tr:last-child td { border-bottom: none; }
.perm .yes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--success-soft); color: var(--success-text); }
.perm .yes svg { width: 14px; height: 14px; }
.perm .no { color: var(--text-muted); }
.perm .perm-check { width: 24px; height: 24px; accent-color: var(--primary-color); cursor: pointer; }
.perm-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

.role-pick { display: grid; gap: 8px; margin-bottom: 4px; }
.role-pick button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface-color);
  transition: border-color .15s;
}
.role-pick button:hover { border-color: var(--primary-color); }
.role-pick button.active { border-color: var(--primary-color); box-shadow: inset 0 0 0 1px var(--primary-color); background: var(--primary-soft); }
.role-pick button:disabled { opacity: .45; cursor: not-allowed; }
.rp-desc { font-size: .82rem; color: var(--text-muted); line-height: 1.4; }

.pass-row { display: flex; gap: 8px; }
.pass-row .input { flex: 1; min-width: 0; }
.mono-input { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .02em; }
.cred-hero { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--primary-soft); margin-bottom: 14px; }
.cred-hero svg { width: 26px; height: 26px; color: var(--primary-text); flex: 0 0 auto; margin-top: 2px; }
.cred { display: grid; gap: 0; border: 1px dashed var(--accent-soft-2); border-radius: 14px; padding: 4px 14px; }
.cred > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.cred > div:last-child { border-bottom: none; }
.cred .label { margin: 0; }
.cred b { font-size: .95rem; word-break: break-all; text-align: right; }
.cred .link-text { font-size: .8rem; font-weight: 500; }
.cred > div:has(.link-text) { flex-direction: column; align-items: flex-start; }
.cred > div:has(.link-text) b { text-align: left; }

.card h2 .count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; margin-left: 6px; border-radius: 100px; background: var(--accent-text); color: var(--text-inverse); font-family: var(--font-body); font-size: .78rem; font-weight: 600; vertical-align: middle; }
.pending-card { border: 1px solid var(--accent-soft-2); }
.pending-list { display: flex; flex-direction: column; }
.pending-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--border-color); }
.pending-row .grow { flex: 1 1 200px; min-width: 0; }
.pending-row .acc-meta { overflow-wrap: anywhere; }
.pending-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Usuários: ações do topo, link de cadastro pelo Google */
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.signup-card { margin-top: 18px; }
.signup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.signup-head .sub { margin-bottom: 0; }
.signup-head .switch { margin-top: 4px; }
.signup-link { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.signup-link .input { flex: 1; min-width: 0; min-height: 40px; font-size: .86rem; background: var(--surface-2); }
.signup-note { margin: 12px 0 0; }
@media (max-width: 520px) { .signup-link { flex-direction: column; align-items: stretch; } }
.auth-out { margin-top: 10px; justify-content: center; }

/* ==========================================================================
   Avisos, carregamento e detalhes finais
   ========================================================================== */
.toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 80;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: min(92vw, 520px);
  background: var(--toast-background); color: var(--text-inverse); padding: 10px 12px 10px 14px; border-radius: 14px;
  font-size: .88rem; line-height: 1.4; box-shadow: 0 18px 40px -16px rgb(var(--shadow-rgb) / .55);
  transition: opacity .22s ease, transform .26s var(--ease);
}
.toast svg { width: 18px; height: 18px; color: var(--toast-icon); }
.toast.error { background: var(--danger-text); }
.toast.error svg { color: var(--text-inverse); }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast-action { border: none; background: rgb(255 255 255 / .14); color: var(--text-inverse); font-weight: 600; font-size: .84rem; border-radius: 9px; min-height: 34px; padding: 5px 12px; margin-left: 4px; white-space: nowrap; }
.toast-action:hover { background: rgb(255 255 255 / .24); }
@media (min-width: 900px) { .toast { bottom: 28px; left: calc(50% + 124px); } }

.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--on-primary-soft); border-top-color: var(--on-primary); animation: spin .7s linear infinite; }
.btn-outline .spinner, .btn-quiet .spinner, .btn-danger .spinner { border-color: var(--border-color); border-top-color: var(--primary-color); }
@keyframes spin { to { transform: rotate(360deg); } }

/* carregamento: só aparece se a resposta demorar; esmaece sem apagar a tela */
.main.is-loading { opacity: .55; pointer-events: none; transition: opacity .2s; cursor: progress; }
.main.is-loading:empty { opacity: 1; }
/* telas em React: o contêiner não entra no layout; o trecho que recarrega (filtro trocado) esmaece igual */
.react-view { display: contents; }
.react-view [aria-busy="true"] { opacity: .55; transition: opacity .2s; cursor: progress; }
.main.is-loading:empty::before {
  content: ''; display: block; height: 420px; border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 40%, var(--surface-3) 80%) 0 0 / 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

::selection { background: var(--accent-soft-2); color: var(--text-color); }
input, textarea { caret-color: var(--primary-color); }
.price, .price-lg, .stat .v, .appt .time, .rr-date, .bl-value, .summary-value, .fact-value, .daychart .axis { font-variant-numeric: tabular-nums; }

/* ---------- Menos movimento ----------
   Para quem pediu menos animação: nada desliza, mas cada mudança de estado continua visível. */
@media (prefers-reduced-motion: reduce) {
  .sheet { animation: fade .15s ease; }
  .view-in, .color-panel, .tg-appt.is-next, .appt.is-next .appt-card { animation: none; }
  .ap-sw svg, .color-trigger > svg:last-child { transition: none; }
  .flash { animation: none; box-shadow: 0 0 0 3px var(--accent-color); }
  .toast { transition: opacity .2s ease; transform: translate(-50%, 0); }
  .btn:active, .fab:active, .step-btn:active { transform: none; }
  .switch span::after { transition: none; }
  .main.is-loading:empty::before { animation: none; }
  .spinner { animation-duration: 1.4s; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   Plataforma: acesso de suporte da MASTER, diálogos e identidade da empresa
   ========================================================================== */

/* aviso fixo enquanto a MASTER está dentro de uma empresa */
.support-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; min-height: 44px;
  background: var(--warning-soft); color: var(--warning-text);
  border-bottom: 1px solid var(--warning-border); font-size: .86rem; line-height: 1.35;
}
.support-bar svg { width: 20px; height: 20px; flex: none; color: var(--warning); }
.support-text { flex: 1 1 240px; min-width: 0; }
.support-exit { background: var(--surface-color); color: var(--text-color); border: 1px solid var(--warning-border); min-height: 34px; }
.support-exit:hover { border-color: var(--warning); }
body.in-support .topbar { top: var(--support-h, 44px); }
@media (min-width: 900px) {
  .support-bar { grid-column: 1 / -1; padding: 8px 24px; }
  body.in-support .sidebar { top: var(--support-h, 44px); height: calc(100vh - var(--support-h, 44px)); }
}

/* diálogo de confirmação: por cima da folha aberta, centralizado */
#dialogRoot .sheet-backdrop { z-index: 60; align-items: center; justify-content: center; padding: 16px; }
.sheet.is-dialog { max-width: 440px; height: auto; max-height: 88vh; border-radius: var(--radius-lg); animation: up .22s var(--ease); box-shadow: var(--shadow); }
.sheet.is-dialog .grabber { display: none; }
.sheet.is-dialog .sheet-head { padding: 18px 56px 12px 20px; }
.sheet.is-dialog .sheet-head h2 { font-size: 1.2rem; }
.sheet.is-dialog .sheet-foot { border-radius: 0 0 var(--radius-lg) var(--radius-lg); justify-content: flex-end; }
.sheet.is-dialog .sheet-foot .btn { flex: 0 1 auto; }
.dialog-msg { margin: 0 0 12px; color: var(--text-soft); overflow-wrap: anywhere; }
.btn-danger-solid { background: var(--danger-text); color: var(--text-inverse); }
.btn-danger-solid:hover { background: #991225; }
@media (prefers-reduced-motion: reduce) { .sheet.is-dialog { animation: fade .15s ease; } }

/* identidade visual da empresa (Configurações) */
.brand-edit { display: grid; gap: 18px; }
.brand-logo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo-preview { width: 84px; height: 84px; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border-color); overflow: hidden; }
.logo-preview img { max-width: 72px; max-height: 72px; object-fit: contain; }
.brand-logo-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 240px; }
.brand-logo-actions .field-hint { flex-basis: 100%; margin: 0; }
.file-btn { position: relative; overflow: hidden; cursor: pointer; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-btn:focus-within { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.color-grid { display: grid; gap: 4px 16px; }
@media (min-width: 640px) { .color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.color-input { display: flex; gap: 8px; align-items: center; }
.color-input input[type="color"] { width: 46px; height: 46px; min-height: 0; padding: 3px; flex: none; border-radius: var(--radius-sm); cursor: pointer; background: var(--surface-color); }
.color-input .mono-input { flex: 1; min-width: 0; text-transform: uppercase; }
.brand-preview { display: grid; grid-template-columns: 120px minmax(0, 1fr); min-height: 120px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-color); }
.bp-side { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; background: var(--p-secondary); color: var(--p-on-secondary); font-size: .78rem; font-weight: 600; text-align: center; }
.bp-side img { width: 34px; height: 34px; object-fit: contain; }
.bp-side i { display: block; width: 80%; height: 8px; border-radius: 4px; background: currentColor; opacity: .25; }
.bp-main { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; background: var(--background-color); font-size: .86rem; }
.bp-btn { padding: 7px 14px; border-radius: 100px; background: var(--p-primary); color: var(--p-on-primary); font-weight: 600; font-size: .8rem; }
.bp-chip { padding: 3px 10px; border-radius: 100px; border: 2px solid var(--p-accent); font-weight: 600; font-size: .76rem; }
.brand-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* plataforma: detalhe da empresa e usuários */
.co-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.co-head .logo-preview { width: 64px; height: 64px; }
.co-head .logo-preview img { max-width: 54px; max-height: 54px; }
.co-head .grow { flex: 1; min-width: 0; }
.co-status { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; }
.co-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.co-status.on { color: var(--success-text); }
.co-status.off { color: var(--danger-text); }
.hs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-weight: 400; font-size: .86rem; }
.hs-day b { font-weight: 600; margin-right: 2px; }
.hs-day.off { color: var(--text-muted); }
.co-swatches { gap: 6px 14px; font-weight: 400; font-size: .86rem; }
.co-swatch { display: inline-flex; align-items: center; gap: 6px; }
.co-swatch i { width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgb(var(--shadow-rgb) / .15); }
.pu-links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pu-links .role-chip { white-space: normal; }
.acc-card > .btn { flex: 0 0 auto; }
.color-input .mono-input::placeholder { text-transform: none; }

/* ==========================================================================
   Central de Avisos: sino, lista do dia e aviso ao entrar
   ========================================================================== */
.bell-btn { position: relative; }
.bell-count {
  position: absolute; display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px;
  background: var(--danger); color: var(--text-inverse);
  font-size: .68rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--sidebar-background);
}
.bell-btn .bell-count { top: 3px; right: 2px; }
.side-bell {
  display: none; align-items: center; gap: 12px; width: 100%; margin-top: 2px;
  padding: 11px 14px; border: none; border-radius: 12px; background: none;
  color: var(--sidebar-text); font-size: .93rem; font-weight: 500; text-align: left;
  transition: background-color .15s;
}
.side-bell svg { width: 23px; height: 23px; }
.side-bell:hover { background: var(--sidebar-hover); }
.side-bell .bell-count { position: static; margin-left: auto; }
@media (min-width: 900px) {
  .side-bell { display: flex; }
  .side-bell.hidden { display: none !important; }
  .bell-btn { display: none !important; }
}

.rem-head h3 { margin: 0; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.15rem; }
.rem-head p { margin: 2px 0 14px; font-size: .86rem; color: var(--text-muted); }
.rem-days { display: flex; width: 100%; margin-bottom: 12px; }
.rem-days button { flex: 1 1 0; }
.rem-filter { display: flex; width: 100%; overflow-x: auto; margin-bottom: 6px; scrollbar-width: none; }
.rem-filter button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.rem-n { font-size: .74rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rem-list { list-style: none; margin: 0; padding: 0; }
.rem-item {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: 'time main' '. act';
  gap: 6px 12px; padding: 14px 0; border-top: 1px solid var(--border-color);
}
.rem-item:first-child { border-top: none; }
.rem-time { grid-area: time; padding-top: 1px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rem-main { grid-area: main; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.rem-name { padding: 0; border: none; background: none; font-weight: 600; font-size: .98rem; text-align: left; color: var(--text-color); }
.rem-name:hover { color: var(--primary-text); text-decoration: underline; text-underline-offset: 3px; }
.rem-main small { font-size: .8rem; color: var(--text-muted); }
.rem-state { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .8rem; font-weight: 600; }
.rem-state svg { width: 15px; height: 15px; }
.rem-state i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rem-state.is-pending { color: var(--primary-text); }
.rem-state.is-sent { color: var(--success-text); }
.rem-state.is-confirmed { color: var(--info-text); }
.rem-state.is-dismissed { color: var(--text-muted); font-weight: 500; }
.rem-state.is-warn { color: var(--warning-text); }
.rem-actions { grid-area: act; display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; }
.rem-actions .link-btn { padding: 6px 0; font-size: .82rem; }
.rem-actions .rem-quiet { color: var(--text-muted); font-weight: 500; }
.rem-item.is-late .rem-time { color: var(--text-muted); }
.rem-item.is-dismissed .rem-name, .rem-item.is-dismissed .rem-time { color: var(--text-muted); }

/* aviso ao entrar: discreto, no canto, uma vez por dia */
.rem-pop {
  position: fixed; right: 16px; top: calc(68px + env(safe-area-inset-top)); z-index: 45;
  width: min(340px, calc(100vw - 32px)); padding: 14px 16px 16px;
  background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); animation: rise .25s var(--ease);
}
.rem-pop-head { display: flex; align-items: center; gap: 10px; }
.rem-pop-head b { flex: 1; font-size: .98rem; }
.rem-pop-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--primary-soft); color: var(--primary-text); }
.rem-pop-ico svg { width: 18px; height: 18px; }
.rem-pop-close { width: 34px; height: 34px; margin-right: -8px; color: var(--text-muted); }
.rem-pop-close svg { width: 18px; height: 18px; }
.rem-pop p { margin: 8px 0 6px; font-size: .86rem; color: var(--text-soft); }
.rem-pop ul { list-style: none; margin: 0 0 12px; padding: 0; }
.rem-pop li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .88rem; border-top: 1px solid var(--border-color); }
.rem-pop li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rem-pop li b { font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .rem-pop { top: 24px; right: 28px; } }
@media (prefers-reduced-motion: reduce) { .rem-pop { animation: none; } }

/* ==========================================================================
   Central da plataforma (MASTER): visão geral, empresas, detalhe, atividade e alertas
   Mesmo vocabulário do resto do sistema: superfícies brancas com borda fina, faixa de números
   com divisórias (não um cartão por número), linha do tempo e alertas com o texto da gravidade.
   ========================================================================== */
.nav-group { display: block; margin: 14px 14px 4px; font-size: .74rem; font-weight: 600; color: var(--sidebar-muted); }
.side-nav .nav-group:first-child { margin-top: 0; }
.nav-badge { margin-left: auto; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 100px; background: var(--danger); color: var(--text-inverse); font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bottom-nav .nav-badge { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; min-width: 18px; height: 18px; font-size: .66rem; }

.hub-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 22px; }
.hub-sub { margin: 6px 0 0; font-size: .95rem; color: var(--text-muted); }
.hub-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px -4px; }
.hub-back svg { width: 16px; height: 16px; }

/* números: uma faixa, divisórias de 1px (a cor do fundo aparece entre as células) */
.hub-kpis {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 0 0 22px;
  background: var(--border-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden;
}
.hub-kpis.is-compact { grid-template-columns: repeat(6, minmax(0, 1fr)); border-radius: var(--radius-md); }
.hub-kpis > div { min-width: 0; padding: 16px 20px 18px; background: var(--surface-color); }
.hub-kpis dt { font-size: .8rem; font-weight: 600; color: var(--text-soft); }
.hub-kpis dd { margin: 0; }
.hub-value { margin-top: 4px !important; font-family: var(--font-heading); font-weight: 700; font-size: 1.9rem; line-height: 1.1; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.hub-kpis.is-compact .hub-value { font-size: 1.4rem; margin-top: auto !important; padding-top: 6px; }
/* rótulos de uma ou duas linhas: os números ficam alinhados pela base */
.hub-kpis.is-compact > div { display: flex; flex-direction: column; }
.hub-note { margin-top: 4px !important; font-size: .78rem; line-height: 1.35; color: var(--text-muted); }
@media (max-width: 1100px) { .hub-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hub-kpis.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hub-kpis, .hub-kpis.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hub-kpis > div { padding: 14px 16px; } .hub-value { font-size: 1.5rem; } }
/* com quantidade ímpar de células, a última ocupa a linha inteira (sem buraco cinza) */
@media (max-width: 1100px) and (min-width: 641px) { .hub-kpis:not(.is-compact) > div:nth-child(4) { grid-column: span 1; } .hub-kpis:not(.is-compact) > div:nth-child(5) { grid-column: span 2; } }
@media (max-width: 640px) { .hub-kpis:not(.is-compact) > div:last-child { grid-column: 1 / -1; } }

.hub-grid { display: grid; gap: 20px; margin-bottom: 20px; }
@media (min-width: 1100px) { .hub-grid { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } }
.hub-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hub-panel { min-width: 0; padding: 20px 22px; margin-bottom: 20px; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.hub-grid .hub-panel, .hub-side .hub-panel { margin-bottom: 0; }
.hub-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hub-panel-head h2 { margin: 0; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.15rem; }
.hub-panel-head .link-btn { display: inline-flex; align-items: center; gap: 2px; padding: 4px 0; white-space: nowrap; }
.hub-panel-head .link-btn svg { width: 15px; height: 15px; }
.hub-panel h2 .count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; margin-left: 6px; border-radius: 100px; background: var(--warning-text); color: var(--text-inverse); font-family: var(--font-body); font-size: .78rem; font-weight: 600; vertical-align: middle; }
.hub-panel h2 .count.sev-high { background: var(--danger-text); }
.hub-panel h2 .count.sev-low { background: var(--text-muted); }
@media (max-width: 520px) { .hub-panel { padding: 16px; } }

/* linha do tempo */
.tl-day + .tl-day { margin-top: 14px; }
.tl-day h3 { margin: 0 0 4px; font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.tl-list { list-style: none; margin: 0; padding: 0; }
.tl-item { position: relative; display: grid; grid-template-columns: 44px 30px minmax(0, 1fr); align-items: start; gap: 10px; padding: 8px 0; }
.tl-item + .tl-item::before { content: ''; position: absolute; left: 68px; top: -10px; height: 18px; border-left: 1px solid var(--border-color); }
.tl-time { padding-top: 5px; font-size: .78rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tl-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-3); color: var(--text-soft); }
.tl-ico svg { width: 16px; height: 16px; }
.tl-acesso .tl-ico { background: var(--primary-soft); color: var(--primary-text); }
.tl-empresas .tl-ico { background: var(--info-soft); color: var(--info-text); }
.tl-pessoas .tl-ico { background: var(--st-concluido-bg); color: var(--st-concluido-text); }
.tl-operacao .tl-ico { background: var(--success-soft); color: var(--success-text); }
.tl-body { display: flex; flex-direction: column; min-width: 0; padding-top: 1px; line-height: 1.35; }
.tl-body > b { font-size: .92rem; font-weight: 600; }
.tl-meta { font-size: .8rem; color: var(--text-muted); overflow-wrap: anywhere; }
.tl-company { color: var(--text-soft); font-weight: 500; text-decoration: none; }
.tl-company:hover { color: var(--primary-text); text-decoration: underline; text-underline-offset: 3px; }

/* alertas: mesmo componente do Painel da empresa, com a gravidade escrita */
.attn-sev-high .attn-ico { background: var(--danger-soft); color: var(--danger-text); }
.attn-sev-medium .attn-ico { background: var(--warning-soft); color: var(--warning-text); }
.attn-sev-low .attn-ico { background: var(--surface-3); color: var(--text-soft); }
.attn-item .attn-body > span + span { margin-top: 1px; }
.sev-label { font-weight: 700; }
.attn-sev-high .sev-label { color: var(--danger-text); }
.attn-sev-medium .sev-label { color: var(--warning-text); }
.attn-body a { color: var(--text-soft); font-weight: 600; }
.all-clear { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--success-soft); }
.all-clear svg { width: 22px; height: 22px; flex: none; color: var(--success-text); }
.all-clear div { display: flex; flex-direction: column; gap: 2px; }
.all-clear b { color: var(--success-text); font-size: .98rem; }
.all-clear span { font-size: .86rem; color: var(--text-soft); }

/* empresas na visão geral */
.hub-co { list-style: none; margin: 0; padding: 0; }
.hub-co li + li { border-top: 1px solid var(--border-color); }
.hub-co a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 8px; margin: 0 -8px; border-radius: var(--radius-sm); color: inherit; text-decoration: none; }
.hub-co a:hover { background: var(--surface-2); }
.hub-co-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-co-meta { grid-column: 1 / -1; font-size: .8rem; color: var(--text-muted); }

/* lista de empresas */
.co-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.co-toolbar .search { flex: 1 1 260px; margin: 0; }
.co-toolbar .chips { margin: 0; padding-bottom: 0; flex: 1 1 100%; }
.co-grid { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; }
.co-grid > .empty { border: none; }
.co-row {
  display: grid; grid-template-columns: minmax(0, 2.4fr) 96px 76px 76px 170px 150px 96px; align-items: center; gap: 12px;
  padding: 12px 18px; border-top: 1px solid var(--border-color);
}
.co-row:first-child { border-top: none; }
.co-headrow { padding-top: 10px; padding-bottom: 10px; background: var(--surface-2); font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.co-headrow span:nth-child(n + 3):nth-child(-n + 5) { text-align: right; }
.co-row.is-off .co-main b, .co-row.is-off .co-num { color: var(--text-muted); }
.co-main { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.co-main b { font-weight: 600; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-main:hover b { color: var(--primary-text); text-decoration: underline; text-underline-offset: 3px; }
.co-main small { font-size: .8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-warn { color: var(--warning-text); font-weight: 600; }
.co-num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.co-when { font-size: .84rem; color: var(--text-soft); }
.co-act { text-align: right; }
.co-mfacts { display: none; }
@media (max-width: 1000px) {
  .co-headrow { display: none; }
  .co-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'main status' 'facts act'; gap: 8px 12px; }
  .co-main { grid-area: main; }
  .co-cell:nth-child(2) { grid-area: status; justify-self: end; }
  .co-num, .co-when { display: none; }
  .co-row::after { content: none; }
  .co-act { grid-area: act; }
  .co-mfacts { display: block; grid-area: facts; align-self: center; font-size: .8rem; color: var(--text-muted); }
}

/* detalhe da empresa */
.co-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.co-hero .logo-preview { width: 64px; height: 64px; }
.co-hero .logo-preview img { max-width: 54px; max-height: 54px; }
.co-hero .grow { flex: 1 1 320px; min-width: 0; }
.co-hero .page-title { overflow-wrap: anywhere; }
.co-hero-meta { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; margin: 6px 0 0; font-size: .88rem; color: var(--text-muted); }
.co-hero-act { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.co-hero-act small { font-size: .76rem; color: var(--text-muted); }
@media (max-width: 640px) { .co-hero-act { align-items: stretch; width: 100%; } .co-hero-act .btn { width: 100%; } }
.co-tabs { display: flex; max-width: 100%; overflow-x: auto; margin-bottom: 18px; scrollbar-width: none; }
.co-tabs button { flex: 0 0 auto; }
.co-sub { margin: 20px 0 8px; font-size: .95rem; font-weight: 600; }
.co-note { margin: 10px 0; }
.co-people { list-style: none; margin: 0; padding: 0; }
.co-people li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-color); }
.co-people li:first-child { border-top: none; }
.co-people li.is-off { opacity: .6; }
.co-people .avatar { width: 38px; height: 38px; font-size: .82rem; }
.co-people .avatar svg { width: 17px; height: 17px; }
.co-people .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.co-people .grow b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-people small { font-size: .8rem; color: var(--text-muted); overflow-wrap: anywhere; }
.co-people-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.co-invite { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.co-invite .field { flex: 1 1 260px; margin: 0; }
.co-int { list-style: none; margin: 0; padding: 0; }
.co-int li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; }
.co-int small { grid-column: 1 / -1; font-size: .8rem; color: var(--text-muted); }
.int-state { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; }
.int-state i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.int-state.is-connected { color: var(--success-text); }
.int-state.is-error { color: var(--danger-text); }
.int-state.is-disconnected { color: var(--text-muted); }

/* ==========================================================================
   Fase 1: Início, bloqueios, equipe, horários com intervalo, mensagens e o "Começar"
   Mesmos tokens do resto do sistema: nada aqui define cor nova.
   ========================================================================== */

/* ---------- Agenda: bloqueios, confirmação da cliente ---------- */
.tg-block {
  position: absolute; left: 2px; right: 2px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 6px 9px; overflow: hidden; text-align: left;
  border: 1px solid var(--border-strong); border-radius: 10px;
  background: repeating-linear-gradient(-45deg, var(--surface-3) 0 6px, var(--surface-2) 6px 12px);
  color: var(--text-soft); line-height: 1.3;
}
.tg-block:hover { border-color: var(--border-hover); }
.tg-block-label { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; }
.tg-block-label svg { width: 13px; height: 13px; }
.tg-block-when { font-size: .74rem; color: var(--text-muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-conf svg, .tg-legend .tg-conf svg { width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px; color: var(--info-text); }
.lg-sw.st-bloqueio { background: repeating-linear-gradient(-45deg, var(--surface-3) 0 3px, var(--surface-color) 3px 6px); border-color: var(--border-strong); }
.ag-tools [data-action="new-block"] svg { width: 16px; height: 16px; }

.block-row { display: grid; grid-template-columns: 50px 1fr; gap: 10px; align-items: center; }
.block-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 9px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); text-align: left; font-size: .86rem; color: var(--text-soft);
  background: repeating-linear-gradient(-45deg, var(--surface-3) 0 6px, var(--surface-2) 6px 12px);
}
.block-btn svg { width: 16px; height: 16px; flex: none; }

/* grupo de opções em pílulas (tipo de bloqueio, serviços, horário) */
.pill-group { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pill-group button {
  min-height: 40px; padding: 7px 14px; border-radius: 100px; font-size: .86rem; font-weight: 500;
  border: 1px solid var(--border-strong); background: var(--surface-color); color: var(--text-soft);
  transition: border-color .15s, background-color .15s, color .15s;
}
.pill-group button:hover { border-color: var(--primary-color); }
.pill-group button.active { border-color: var(--primary-color); background: var(--primary-soft); color: var(--primary-text); font-weight: 600; }
.check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 14px; margin: 0 0 8px; }
.check-list .toggle { white-space: normal; min-height: 40px; }
details.adv { margin: 4px 0 14px; border-top: 1px solid var(--border-color); }
details.adv > summary { cursor: pointer; padding: 14px 0 10px; font-weight: 600; font-size: .9rem; color: var(--primary-text); list-style-position: inside; }
details.adv[open] > summary { margin-bottom: 4px; }

/* ---------- Navegação: "Mais" no celular ---------- */
.bottom-nav button.nav-item { font-family: inherit; }
.more-group { margin: 18px 0 6px; font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.more-group:first-child { margin-top: 0; }
.more-list { display: flex; flex-direction: column; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; }
.more-item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; color: var(--text-color); text-decoration: none; font-weight: 500; border-top: 1px solid var(--border-color); }
.more-item:first-child { border-top: none; }
.more-item svg { width: 21px; height: 21px; color: var(--text-muted); }
.more-item span { flex: 1; }
.more-item > svg:last-child { width: 16px; height: 16px; color: var(--text-faint); }
.more-item.active { color: var(--primary-text); font-weight: 600; background: var(--primary-soft); }
.more-item.active svg:first-child { color: var(--primary-text); }

/* ---------- Início ---------- */
.ds-confirmed { --c-dot: var(--info-text); }
.ds-forecast { --c-dot: var(--primary-color); }
}
.home-empty { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.home-empty p { margin: 0 0 10px; color: var(--text-soft); font-size: .92rem; max-width: 60ch; }

.onb-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 18px;
  margin-bottom: 18px; padding: 18px 20px; border-radius: var(--radius-lg);
  background: var(--primary-soft); border: 1px solid var(--primary-soft-2);
}
.onb-card-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-color); color: var(--primary-text); }
.onb-card-ico svg { width: 22px; height: 22px; }
.onb-card h2 { margin: 0; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.1rem; }
.onb-card p { margin: 2px 0 10px; font-size: .88rem; color: var(--text-soft); }
@media (max-width: 640px) { .onb-card { grid-template-columns: auto minmax(0, 1fr); } .onb-card .btn { grid-column: 1 / -1; } }

/* ---------- Relatórios e Faturamento ---------- */
.report-head { align-items: flex-end; }
.report-head .db-filters { margin-left: auto; }
.sub-title { margin: 22px 0 10px; font-size: .84rem; font-weight: 600; color: var(--text-muted); }

/* ---------- Mensagens ---------- */
.msg-layout { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .msg-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.msg-today { padding-top: 18px; }
.tpl-vars { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.tpl-vars .chip { margin: 0; font-variant-numeric: tabular-nums; font-size: .8rem; }
.tpl-preview { padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--success-soft); border: 1px solid var(--success-soft-2); max-width: 46ch; }
.tpl-preview-label { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--success-text); }
.tpl-preview-label svg { width: 14px; height: 14px; }
.tpl-preview p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; color: var(--text-color); }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- Editor de horários ---------- */
.he { display: flex; flex-direction: column; max-width: 720px; }
.he-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px 16px; align-items: start; padding: 12px 0; border-top: 1px solid var(--border-color); }
.he-row:first-child { border-top: none; padding-top: 4px; }
.he-day { display: flex; align-items: center; gap: 12px; min-height: 42px; cursor: pointer; }
.he-day b { display: block; font-size: .92rem; font-weight: 600; }
.he-state { display: block; font-size: .76rem; color: var(--text-muted); }
.he-periods { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.he-period { display: flex; align-items: center; gap: 8px; }
.he-period input[type=time] { width: 128px; min-height: 42px; padding: 8px 10px; }
.he-to { font-size: .84rem; color: var(--text-muted); }
.he-del { width: 36px; height: 36px; color: var(--text-muted); }
.he-del svg { width: 17px; height: 17px; }
.he-tools { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.he-tools .link-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 0; font-size: .82rem; }
.he-tools svg { width: 15px; height: 15px; }
.he-row.is-off .he-periods { display: none; }
.he-row.is-off .he-day b { color: var(--text-muted); }
@media (max-width: 560px) {
  .he-row { grid-template-columns: 1fr; }
  .he-period input[type=time] { flex: 1; width: auto; min-width: 0; }
}
.copy-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.copy-quick .chip { margin: 0; }
.copy-days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.tz-note { display: flex; align-items: center; gap: 6px; margin: -2px 0 16px; }
.tz-note svg { width: 15px; height: 15px; flex: none; }

/* ---------- Equipe ---------- */
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.head-actions .btn svg { width: 16px; height: 16px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 16px; }
.team-card {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px; text-align: left;
  background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  transition: border-color .15s, box-shadow .2s;
}
.team-card:hover { border-color: var(--border-strong); box-shadow: 0 10px 22px -16px rgb(var(--shadow-rgb) / .4); }
.team-card.is-inactive { opacity: .6; }
.team-av { width: 44px; height: 44px; font-size: .9rem; flex: none; }
.team-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.team-main b { font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.team-main small { font-size: .8rem; color: var(--text-muted); margin-bottom: 4px; }
.team-meta { display: flex; align-items: flex-start; gap: 6px; font-size: .82rem; color: var(--text-soft); }
.team-meta svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--text-muted); }
.team-meta.is-block, .team-meta.is-block svg { color: var(--warning-text); }
.team-blocks .plain-list li { flex-wrap: wrap; gap: 2px 8px; }

/* ---------- Serviços ---------- */
.svc-cat { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 100px; background: var(--surface-3); color: var(--text-soft); font-size: .74rem; font-weight: 600; }
.svc-doers { margin: 0 0 4px; font-weight: 500; }

/* ---------- Começar (onboarding) ---------- */
.onb-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 22px; }
.onb-top .page-title::first-letter { text-transform: none; }
.onb-body { display: grid; gap: 20px; align-items: start; }
.onb-body > * { min-width: 0; }
@media (min-width: 1000px) { .onb-body { grid-template-columns: 250px minmax(0, 1fr); } }
.onb-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.onb-step {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; text-align: left;
  border: none; border-radius: 12px; background: none; color: var(--text-soft);
}
.onb-step:hover { background: var(--surface-3); }
.onb-n {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); background: var(--surface-color);
  font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.onb-n svg { width: 15px; height: 15px; }
.onb-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.onb-t b { font-size: .9rem; font-weight: 600; }
.onb-t small { font-size: .76rem; color: var(--text-muted); }
.onb-step.is-done .onb-n { border-color: var(--success); background: var(--success); color: var(--text-inverse); }
.onb-step.is-current { background: var(--surface-color); box-shadow: 0 6px 16px -12px rgb(var(--shadow-rgb) / .5); color: var(--text-color); }
.onb-step.is-current .onb-n { border-color: var(--primary-color); background: var(--primary-color); color: var(--on-primary); }
@media (max-width: 999px) {
  /* celular e tablet: as etapas viram atalhos em linha; o nome aparece só no passo atual */
  .onb-steps ol { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; padding-bottom: 2px; }
  .onb-steps ol::-webkit-scrollbar { display: none; }
  .onb-step { flex: none; width: auto; padding: 6px 12px 6px 6px; border: 1px solid var(--border-color); background: var(--surface-color); border-radius: 100px; }
  .onb-step .onb-t small { display: none; }
  .onb-step .onb-t b { white-space: nowrap; }
  .onb-step .onb-n { width: 26px; height: 26px; font-size: .76rem; }
  .onb-step:not(.is-current) { padding-right: 6px; }
  .onb-step:not(.is-current) .onb-t { display: none; }
}
.onb-panel { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 0 24px 22px; overflow: hidden; }
@media (max-width: 560px) { .onb-panel { padding: 0 16px 18px; } .onb-progress { margin-left: -16px !important; margin-right: -16px !important; } }
.onb-progress { height: 4px; margin: 0 -24px 22px; background: var(--surface-3); }
.onb-card .onb-progress { margin: 0; border-radius: 4px; max-width: 360px; }
.onb-progress i { display: block; height: 100%; background: var(--primary-color); border-radius: 0 4px 4px 0; transition: width .4s var(--ease); }
.onb-panel h2 { margin: 0; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.45rem; }
.onb-lead { margin: 4px 0 20px; color: var(--text-muted); font-size: .92rem; max-width: 62ch; }
.onb-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.onb-count { font-size: .82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .onb-count { display: none; } .onb-nav .btn { flex: 1; } }

.quick-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: end; padding: 14px; margin-bottom: 14px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border-color); }
#qsForm { grid-template-columns: minmax(0, 1fr) 120px 130px auto; }
#qpForm, #qcForm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.quick-add .field { margin-bottom: 0; }
.quick-add [data-quick-add] { min-height: 46px; }
@media (max-width: 640px) {
  .quick-add, #qsForm, #qpForm, #qcForm { grid-template-columns: 1fr 1fr; gap: 10px; }
  .quick-add .field:first-child, .quick-add [data-quick-add] { grid-column: 1 / -1; }
  #qpForm .field, #qcForm .field { grid-column: 1 / -1; }
}
.onb-list { list-style: none; margin: 0; padding: 0; }
.onb-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 6px 0; border-top: 1px solid var(--border-color); }
.onb-list li:first-child { border-top: none; }
.onb-list li > span { display: flex; flex-direction: column; min-width: 0; }
.onb-list small { font-size: .8rem; color: var(--text-muted); }
.onb-list .icon-btn { color: var(--text-muted); }
.onb-list .icon-btn svg { width: 18px; height: 18px; }
.onb-list .onb-who { flex-direction: row; align-items: center; gap: 10px; }
.onb-list .onb-who > span:last-child { display: flex; flex-direction: column; }
.onb-list .avatar { width: 34px; height: 34px; font-size: .76rem; }
.onb-list-empty { color: var(--text-muted); font-size: .88rem; }
.onb-me { margin-bottom: 12px; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 16px; }
.choice {
  display: flex; flex-direction: column; gap: 4px; padding: 16px; text-align: left;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-color);
  transition: border-color .15s, background-color .15s;
}
.choice b { font-size: .96rem; }
.choice span { font-size: .84rem; color: var(--text-muted); }
.choice:hover { border-color: var(--primary-color); }
.choice.is-on { border-color: var(--primary-color); background: var(--primary-soft); }
.choice.is-on b { color: var(--primary-text); }

.review-list { list-style: none; margin: 0; padding: 0; }
.review-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-color); }
.review-list li:first-child { border-top: none; }
.review-list li > span:nth-child(2) { display: flex; flex-direction: column; }
.review-list b { font-size: .94rem; }
.review-list small { font-size: .82rem; color: var(--text-muted); }
.rv-ico svg { width: 20px; height: 20px; color: var(--warning-text); }
.review-list li.is-ok .rv-ico svg { color: var(--success-text); }

.onb-done { max-width: 620px; margin: 6vh auto 0; text-align: center; }
.onb-done-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--success-soft); color: var(--success-text); margin-bottom: 14px; }
.onb-done-ico svg { width: 32px; height: 32px; }
.onb-done .page-title::first-letter { text-transform: none; }
.onb-done .db-context { margin: 10px auto 22px; max-width: 52ch; }
.onb-done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .onb-progress i { transition: none; } }

/* menu da empresa ficou mais longo: a barra lateral rola em telas baixas */
@media (min-width: 900px) { .sidebar { overflow-y: auto; scrollbar-width: thin; } .side-nav .nav-item { padding-top: 9px; padding-bottom: 9px; } }

/* ==========================================================================
   Navegadores sem color-mix() (Chrome e Edge até a 110, como o Chrome 109 do Windows 7/8.1;
   Safari até o 16.1; Firefox até o 112). Neles, um token feito com color-mix() é inválido e
   o fundo que o usa some: o botão principal (gradiente com --primary-hover) ficava branco, com
   texto branco. Aqui ficam os mesmos tons já calculados. Para o tema da empresa, o app.js
   (applyTheme) calcula os tons da cor escolhida e grava no <html>, por cima destes.
   Valores conferidos em test/legacy-colors.test.js.
   ========================================================================== */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --primary-hover: #1E51C1;
    --primary-soft: #EEF3FD;
    --primary-soft-2: #CFDDFB;
    --accent-soft: #E9F7FD;
    --accent-soft-2: #B2E2F8;
    --sidebar-muted: #ABB6CA;
    --sidebar-hover: rgb(232 238 249 / .12);
    --nav-active: #E9EFFD;
    --focus-ring: rgb(37 99 235 / .14);
    --accent-wash: rgb(14 165 233 / .07);
    --on-primary-soft: rgb(255 255 255 / .4);
  }
  .has-color.ap-rosa    { --ap-strong: #9A254E; --ap-hover: #BC2D5F; --ap-soft: #F5CEDC; --ap-line: #EDA3BD; --ap-soft-hover: #F3C2D3; }
  .has-color.ap-laranja { --ap-strong: #8C2F09; --ap-hover: #AB390B; --ap-soft: #F0D1C5; --ap-line: #E4AA92; --ap-soft-hover: #EDC6B6; }
  .has-color.ap-amarelo { --ap-strong: #744705; --ap-hover: #8E5606; --ap-soft: #E8D9C3; --ap-line: #D5B88F; --ap-soft-hover: #E3D0B5; }
  .has-color.ap-verde   { --ap-strong: #0F5C2C; --ap-hover: #127136; --ap-soft: #C7E1D0; --ap-line: #96C6A8; --ap-soft-hover: #B9D9C5; }
  .has-color.ap-azul    { --ap-strong: #1B47A9; --ap-hover: #2157CF; --ap-soft: #CBDAFA; --ap-line: #9DB9F6; --ap-soft-hover: #BED0F9; }
  .has-color.ap-lilas   { --ap-strong: #6A25A8; --ap-hover: #812DCE; --ap-soft: #E5CEFA; --ap-line: #CEA3F6; --ap-soft-hover: #DFC2F9; }
  .has-color.ap-cinza   { --ap-strong: #444D59; --ap-hover: #545E6D; --ap-soft: #D9DBE0; --ap-line: #B7BCC4; --ap-soft-hover: #CFD3D8; }
}

/* ---- Solicitações de cadastro (MASTER) ---- */
.su-tabs { margin-bottom: 16px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.su-tabs .chip-count { margin-left: 4px; }
.su-list { display: grid; gap: 12px; }
.su-card { display: flex; gap: 16px 24px; align-items: flex-start; padding: 18px 20px; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.su-main { flex: 1; min-width: 0; }
.su-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.su-top h2 { margin: 0; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.12rem; overflow-wrap: anywhere; }
.su-when { font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.su-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 20px; margin: 12px 0 0; }
.su-facts dt { font-size: .76rem; color: var(--text-muted); }
.su-facts dd { margin: 0; font-size: .9rem; font-weight: 500; overflow-wrap: anywhere; }
.su-msg { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: .88rem; color: var(--text-soft); white-space: pre-line; }
.su-warn { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.su-warn li { display: flex; gap: 8px; font-size: .84rem; color: var(--warning-text); }
.su-warn svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.su-decision { margin: 12px 0 0; font-size: .86rem; color: var(--text-soft); }
.su-decision a { font-weight: 600; color: var(--primary-text); }
.su-actions { display: flex; flex-direction: column; gap: 8px; flex: none; }
.su-actions .btn { gap: 6px; }
.su-actions svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .su-card { flex-direction: column; } .su-actions { flex-direction: row; width: 100%; } .su-actions .btn { flex: 1; } }
/* card estreito de uma sessão: o "1/2" some, então um ponto no canto lembra que há outro serviço da mesma visita */
@container tl-card (max-width: 84px) { .tl-appt.in-session .tl-in::after { content: ''; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-color); box-shadow: 0 0 0 1.5px var(--surface-color); } }

/* ==========================================================================
   Início: painel "Hoje"
   O que acontece agora (frase) e a previsão do dia lideram; as etapas do dia seguem o ciclo do
   atendimento (agendado → confirmado → em atendimento → finalizado); a barra mostra a composição com os
   mesmos números; a linha do dia fecha o painel. Nada aqui calcula: os valores vêm de renderHome.
   ========================================================================== */
.today-board {
  position: relative; margin-bottom: 20px; padding: 24px 26px 22px;
  background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); container: today / inline-size;
}
/* filete na cor da empresa no topo: o painel é o centro da tela */
.today-board::before {
  content: ''; position: absolute; left: 26px; right: 26px; top: -1px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--primary-color);
}
.tb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.tb-lead { min-width: 0; flex: 1 1 340px; }
.tb-status { margin: 0; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.45rem; line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.tb-chip {
  display: inline-block; margin-left: 4px; padding: 2px 10px; border-radius: 100px; vertical-align: 3px;
  background: var(--primary-color); color: var(--on-primary); font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: 0; white-space: nowrap;
}
.tb-forecast { margin: 0; text-align: right; }
.tb-forecast dt { font-size: .8rem; font-weight: 600; color: var(--text-soft); }
.tb-forecast dd { margin: 0; }
.tb-money { font-family: var(--font-heading); font-weight: 700; font-size: 2rem; line-height: 1.1; letter-spacing: -.02em; color: var(--text-color); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-forecast .tb-note { font-size: .82rem; color: var(--text-muted); }

/* etapas do dia: quatro blocos na mesma linha, ligados por um traço (é o mesmo atendimento andando) */
.tb-flow { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: none; }
.tb-step {
  position: relative; min-width: 0; padding: 14px 16px 15px; border-radius: var(--radius-md);
  background: var(--surface-2); border: 1px solid var(--border-color); transition: background-color .3s, border-color .3s;
}
.tb-step + .tb-step::before {
  content: ''; position: absolute; left: -11px; top: 50%; width: 10px; height: 2px; background: var(--border-strong);
}
.tb-label { display: flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-num { display: block; margin-top: 4px; font-family: var(--font-heading); font-weight: 700; font-size: 2.1rem; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tb-step .tb-note { display: block; margin-top: 2px; font-size: .78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-step.ds-running.is-live { background: var(--warning-soft); border-color: var(--warning-border); }
.tb-step.ds-running.is-live .tb-note { color: var(--warning-text); font-weight: 600; }
.today-board.is-empty .tb-num { color: var(--text-faint); }

/* composição do dia: a mesma soma das etapas, em proporção, com legenda em texto (cor nunca sozinha) */
.tb-mix { margin-top: 16px; }
.tb-bar { display: flex; gap: 3px; height: 10px; border-radius: 100px; overflow: hidden; background: var(--surface-3); }
.tb-bar i { display: block; height: 100%; border-radius: 100px; transform-origin: left; }
.b-paid { background: var(--success); }
.b-done { background: var(--st-concluido); }
.b-run { background: var(--warning); }
.b-wait { background: var(--info-border); }
.tb-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; font-size: .8rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.tb-legend li { display: inline-flex; align-items: center; gap: 7px; }
.lg-dot { width: 9px; height: 9px; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .tb-bar i { animation: tb-grow .8s var(--ease) both; }
  @keyframes tb-grow { from { transform: scaleX(0); } }
}

.tb-rail { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.tb-rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.tb-rail-head h3 { margin: 0; font-size: .84rem; font-weight: 600; color: var(--text-muted); }
.tb-rail-head .link-btn { display: inline-flex; align-items: center; gap: 2px; padding: 4px 0; text-decoration: none; font-weight: 600; }
.tb-rail-head .link-btn svg { width: 16px; height: 16px; }

/* próximos atendimentos: cartão próprio ao lado de "Precisa de atenção" */
.db-upcoming .db-today-head { margin-bottom: 6px; }
.db-count { font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.db-none { margin: 8px 0 4px; color: var(--text-muted); font-size: .92rem; }

/* painel estreito (tablet e celular): etapas em 2 × 2, previsão abaixo da frase, sem os traços entre etapas */
@container today (max-width: 720px) {
  .tb-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-step:nth-child(odd)::before { display: none; }
  .tb-forecast { text-align: left; flex: 1 1 100%; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; padding-top: 14px; border-top: 1px solid var(--border-color); }
  .tb-forecast dt { grid-column: 1 / -1; }
  .tb-money { font-size: 1.7rem; }
}
@container today (max-width: 440px) {
  .tb-status { font-size: 1.2rem; }
  .tb-num { font-size: 1.7rem; }
  .tb-step { padding: 12px 12px 13px; }
}
@media (max-width: 520px) { .today-board { padding: 20px 16px 18px; } .today-board::before { left: 16px; right: 16px; } }

/* ==========================================================================
   Relatórios: catálogo e relatório com prévia e download
   ========================================================================== */
/* Catálogo: um grupo abaixo do outro, cada relatório num cartão próprio (ícone, nome, o que entrega e como sai) */
.rc-groups { display: flex; flex-direction: column; gap: 40px; }
.rc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.rc-head h2 { margin: 0; font-family: var(--font-heading); font-size: 1.25rem; font-weight: var(--heading-weight); letter-spacing: -.01em; }
.rc-count { flex: none; font-size: .82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.rc-item {
  position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 20px;
  color: inherit; text-decoration: none; background: var(--surface-color);
  border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  transition: border-color .18s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.rc-item:hover { border-color: var(--primary-soft-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.rc-item:active { transform: none; }
.rc-item:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.rc-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary-text); transition: background-color .18s, color .18s; }
.rc-ic svg { width: 22px; height: 22px; }
.rc-item:hover .rc-ic { background: var(--primary-color); color: var(--on-primary); }
.rc-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.rc-main b { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.08rem; line-height: 1.25; letter-spacing: -.005em; text-wrap: balance; }
.rc-main span { font-size: .88rem; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.rc-foot { display: flex; align-items: center; gap: 6px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.rc-fmt { padding: 3px 10px; border-radius: 100px; background: var(--surface-3); color: var(--text-soft); font-size: .76rem; font-weight: 650; letter-spacing: .02em; }
.rc-go { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border-radius: 50%; color: var(--primary-text); background: var(--primary-soft); transition: background-color .18s, color .18s, transform .22s var(--ease); }
.rc-go svg { width: 16px; height: 16px; }
.rc-item:hover .rc-go { background: var(--primary-color); color: var(--on-primary); transform: translateX(3px); }
/* o resumo é a única leitura na tela: ocupa o grupo inteiro, com o ícone ao lado do texto */
.rc-list.is-solo { grid-template-columns: minmax(0, 1fr); }
.rc-item.is-screen { background: var(--primary-soft); border-color: var(--primary-soft-2); }
.rc-item.is-screen .rc-ic { background: var(--surface-color); }
.rc-item.is-screen:hover .rc-ic { background: var(--primary-color); }
@media (min-width: 700px) {
  .rc-item.is-screen { flex-direction: row; align-items: center; gap: 18px; }
  .rc-item.is-screen .rc-foot { margin-left: auto; padding: 0; border: 0; }
}
@media (max-width: 520px) {
  .rc-groups { gap: 30px; }
  .rc-list { gap: 12px; }
  .rc-item { padding: 16px; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; }
  .rc-main { flex: 1 1 calc(100% - 62px); }
  .rc-foot { flex: 1 1 100%; padding-top: 12px; }
  .rc-ic { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .rc-item, .rc-ic, .rc-go { transition: none; } .rc-item:hover, .rc-item:hover .rc-go { transform: none; } }

.rv-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rv-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.rv-actions .btn svg { width: 18px; height: 18px; flex: none; }
.rv-filters { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: flex-end; margin: 4px 0 16px; }
.rv-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rv-f > span { font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.rv-f .select-sm { max-width: 100%; }
.rv-period .db-seg { max-width: 100%; }
.rv-count { margin: 0 0 6px; font-size: .9rem; color: var(--text-soft); }
.rv-note { margin: 0 0 12px; font-size: .84rem; }
.rv-summary { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.rv-summary li { display: flex; align-items: baseline; gap: 8px; font-size: .9rem; }
.rv-summary span { color: var(--text-muted); }
.rv-summary b { font-variant-numeric: tabular-nums; }
.rv-summary small { color: var(--text-muted); }

.rc-scroll { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); }
.rc-scroll:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.rc-table { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.rc-table th { text-align: left; padding: 10px 12px; font-size: .76rem; font-weight: 650; color: var(--text-muted); background: var(--surface-2); border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.rc-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.rc-table tbody tr:last-child td { border-bottom: 0; }
.rc-table .num { text-align: right; white-space: nowrap; }
.rc-table tfoot td { font-weight: 650; border-top: 1px solid var(--border-strong); border-bottom: 0; background: var(--surface-2); }
.rv-pages { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 4px; font-size: .88rem; color: var(--text-soft); }
.rv-pages .btn { display: inline-flex; align-items: center; gap: 6px; }
.rv-pages .btn svg { width: 16px; height: 16px; }

/* celular: cada linha vira um bloco com o nome da coluna ao lado do valor (nada de rolar para os lados) */
@media (max-width: 640px) {
  .rc-scroll { border: 0; background: none; overflow: visible; }
  .rc-table, .rc-table tbody, .rc-table tfoot, .rc-table tr, .rc-table td { display: block; }
  .rc-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rc-table tr { margin-bottom: 10px; padding: 8px 14px; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
  .rc-table td, .rc-table tfoot td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 4px 0; border: 0; background: none; text-align: right; overflow-wrap: anywhere; }
  .rc-table td::before { content: attr(data-label); flex: none; font-size: .78rem; color: var(--text-muted); text-align: left; font-weight: 500; }
  .rc-table td.is-empty { display: none; }
  .rc-table tfoot tr { background: var(--surface-2); }
  .rv-f { flex: 1 1 calc(50% - 8px); }
  .rv-period { flex-basis: 100%; }
  .rv-f .select-sm { width: 100%; }
  .rv-actions { width: 100%; }
  .rv-actions .btn { flex: 1 1 0; justify-content: center; }
}

/* o período mostra todas as opções (quebra em linhas no celular em vez de esconder as últimas) */
@media (max-width: 640px) { .db-seg { overflow: visible; flex-wrap: wrap; } }

/* telas de toque: alvos de pelo menos 44 px nos filtros */
@media (pointer: coarse) {
  .chip, .seg button, .select-sm { min-height: 44px; }
  .seg-team button { min-height: 44px; }
}

/* ==========================================================================
   Painel MASTER (ReagendixPro): tokens, menu, barra superior, cabeçalho e listas da plataforma.
   Tudo escopado em body.is-platform (a MASTER fora de uma empresa): as telas da empresa não mudam.
   O modo suporte (faixa preta + moldura) vale por cima da empresa, mas só aparece para a MASTER.
   ========================================================================== */
:root { --support-black: #000; }
body.is-platform {
  --secondary-color: #0F172A; --accent-color: #38BDF8;
  --sidebar-color: #0F172A; --sidebar-background: #0F172A; --sidebar-text: #CBD5E1; --sidebar-muted: #94A3B8; --sidebar-hover: #1E293B;
  --background-color: #F8FAFC; --surface-2: #F8FAFC; --surface-3: #F1F5F9; --text-muted: #475569;
  --danger: #DC2626; --danger-text: #B91C1C; --danger-soft: #FEF2F2; --danger-border: #FECACA;
  --success: #15803D; --success-text: #166534; --success-soft: #DCFCE7;
  --warning: #B45309; --warning-text: #92400E; --warning-soft: #FFFBEB; --warning-border: #FDE68A;
  --st-confirmado: #1E40AF; --st-confirmado-bg: #DBEAFE;
  --st-andamento: #92400E; --st-andamento-bg: #FEF3C7;
  --st-concluido: #5B21B6; --st-concluido-bg: #EDE9FE; --st-concluido-text: #5B21B6;
  --st-pago: #166534; --st-pago-bg: #DCFCE7;
  --st-cancelado: #3F3F46; --st-cancelado-bg: #E4E4E7;
  --font-brand: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: var(--font-brand); --font-body: var(--font-brand);
  --heading-weight: 700; --radius-lg: 14px; --radius-md: 12px; --radius-sm: 10px;
  --side-w: 256px;
  font-family: var(--font-body);
}
body.is-platform.nav-collapsed { --side-w: 76px; }
body.is-platform .page-title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
body.is-platform .hub-sub { margin-top: 4px; font-size: 15px; }
body.is-platform .hub-head { align-items: center; margin-bottom: 24px; }
body.is-platform .hub-head .btn { min-height: 44px; padding: 0 20px; font-size: 15px; font-weight: 700; }
body.is-platform .btn-primary { box-shadow: none; }
body.is-platform :where(a, button, select, input, textarea):focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
body.is-platform .main { max-width: 1332px; margin: 0; }
body.is-platform .brand .pro, body.is-platform .brand-inline .pro { color: var(--accent-on-dark); }

/* barra superior (computador): busca global e alertas */
.plat-bar { display: none; }
@media (min-width: 900px) {
  body.is-platform .app { grid-template-rows: 68px minmax(0, 1fr); }
  body.is-platform .sidebar { grid-row: 1 / span 2; padding: 0 12px 12px; }
  body.is-platform .plat-bar {
    grid-column: 2; grid-row: 1; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 0 36px; background: var(--surface-color); border-bottom: 1px solid var(--border-color);
  }
  body.is-platform .main { grid-column: 2; grid-row: 2; padding: 28px 36px 60px; }
  .plat-search { position: relative; flex: 0 1 440px; }
  .plat-search svg { position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; color: var(--text-subtle); pointer-events: none; }
  .plat-search input { width: 100%; min-height: 44px; padding: 0 14px 0 42px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--background-color); font-size: 15px; }
  .plat-search input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 1px var(--primary-color); background: var(--surface-color); }
  .plat-bell { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--surface-color); color: var(--text-color); }
  .plat-bell:hover { background: var(--background-color); }
  .plat-bell svg { width: 20px; height: 20px; }
  .plat-bell .bell-count { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; }

  /* menu lateral */
  body.is-platform .sidebar .brand { display: flex; align-items: center; gap: 10px; height: 68px; margin: 0; padding: 0 12px; text-align: left; flex: none; }
  body.is-platform .sidebar .logo-mark { width: 30px; height: auto; margin: 0; filter: none; flex: none; }
  body.is-platform .sidebar .wordmark { text-align: left; }
  body.is-platform .sidebar .wordmark .w1 { font-size: 21px; font-weight: 800; letter-spacing: -.035em; }
  body.is-platform .side-nav { gap: 2px; padding-top: 12px; }
  body.is-platform .side-nav .nav-item { min-height: 44px; padding: 0 12px; gap: 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--text-on-dark-muted); }
  body.is-platform .side-nav .nav-item svg { width: 20px; height: 20px; }
  body.is-platform .side-nav .nav-item:hover { background: var(--secondary-2); color: #fff; }
  body.is-platform .side-nav .nav-item.active { background: var(--primary-color); color: #fff; box-shadow: none; }
  body.is-platform .nav-group { margin: 18px 12px 6px; font-size: 13px; font-weight: 500; color: var(--sidebar-muted); }
  body.is-platform .side-nav .nav-item[href="#psolicitacoes"] .nav-badge { background: var(--primary-color); }
  body.is-platform .side-nav .nav-item.active .nav-badge { background: #fff; color: var(--primary-color); }
  body.is-platform .sidebar .spacer { order: 50; }
  body.is-platform .side-toggle { order: 90; display: flex; align-items: center; gap: 12px; width: auto; height: 44px; margin: 0 0 8px; padding: 0 12px; justify-content: flex-start; border-top: 1px solid var(--secondary-2); border-radius: 0; font-size: 14px; font-weight: 600; color: var(--text-on-dark-muted); }
  body.is-platform .side-toggle::after { content: 'Recolher menu'; }
  body.is-platform.nav-collapsed .side-toggle::after { content: none; }
  body.is-platform.nav-collapsed .side-toggle { justify-content: center; padding: 0; width: 100%; }
  body.is-platform .who { order: 100; background: none; padding: 8px 4px 8px 12px; }
  body.is-platform .who-av { background: var(--primary-color); color: #fff; }
  body.is-platform .who-name { font-weight: 700; }
  body.is-platform.nav-collapsed .sidebar .brand { padding: 0; justify-content: center; }
  body.is-platform.nav-collapsed .sidebar .wordmark { display: none; }
  body.is-platform.nav-collapsed .sidebar .logo-mark { width: 34px; }
  body.is-platform.nav-collapsed .nav-group { margin: 10px 12px; }
  body.is-platform.nav-collapsed .side-nav .nav-item { border-radius: var(--radius-sm); }
}

/* números da Visão geral: um cartão por número, clicável para a lista */
body.is-platform .hub-kpis:not(.is-compact) { gap: 16px; background: none; border: 0; border-radius: 0; overflow: visible; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
body.is-platform .hub-kpis:not(.is-compact) > .kpi { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
body.is-platform .kpi dt { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--text-color); }
.kpi-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--primary-soft); color: var(--primary-color); }
.kpi-ic svg { width: 18px; height: 18px; }
body.is-platform .hub-value { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin-top: 10px !important; }
body.is-platform .hub-note { font-size: 13px; }
body.is-platform .kpi-go { margin: 10px 0 0 !important; text-align: right; }
body.is-platform .kpi-go .link-btn { display: inline-flex; align-items: center; gap: 2px; padding: 4px 0; font-size: 13px; }
body.is-platform .kpi-go .link-btn svg { width: 14px; height: 14px; }
body.is-platform .hub-kpis.is-compact { border-radius: var(--radius-lg); }
body.is-platform .hub-panel { padding: 20px 24px; }
body.is-platform .hub-panel-head h2 { font-size: 18px; font-weight: 700; }
body.is-platform .hub-panel-head .link-btn { font-size: 14px; }
body.is-platform .hub-panel h2 .count { background: var(--danger); }
body.is-platform .tl-item { padding: 10px 0; }
body.is-platform .tl-body > b { font-weight: 600; }
body.is-platform .role-chip.master { background: var(--text-color); color: #fff; }

/* lista padrão: cartão branco, cabeçalho de colunas, linhas altas, rodapé "N de M" */
body.is-platform .co-grid { border-radius: var(--radius-lg); }
body.is-platform .co-headrow { background: var(--background-color); font-size: 13px; font-weight: 600; color: var(--text-muted); }
body.is-platform .co-row { min-height: 64px; border-top-color: var(--surface-3); }
body.is-platform .co-row:not(.co-headrow):hover { background: var(--background-color); }
body.is-platform .co-toolbar { padding: 16px; margin: 0; background: var(--surface-color); border: 1px solid var(--border-color); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
body.is-platform .co-toolbar + .co-grid { border-top-left-radius: 0; border-top-right-radius: 0; }
body.is-platform .co-main b { font-size: 15px; font-weight: 700; }
body.is-platform .co-num { font-weight: 500; }
.co-foot { padding: 14px 18px; border-top: 1px solid var(--border-color); font-size: 13px; color: var(--text-muted); }
body.is-platform .co-status { gap: 6px; font-size: 14px; font-weight: 700; }
body.is-platform .co-status::before { content: none; }
body.is-platform .co-status svg { width: 16px; height: 16px; }
.co-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: var(--radius-sm); color: #fff; font-size: 13px; font-weight: 800; }
.co-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.co-id .co-main { flex: 1; }
body.is-platform .btn-sm { min-height: 44px; }

/* Configurações */
.cfg-state { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.cfg-state svg { width: 18px; height: 18px; }
.cfg-state.is-on { color: var(--success-text); }
.cfg-state.is-off { color: var(--warning-text); }
.cfg-brand { gap: 10px; font-weight: 800; letter-spacing: -.035em; font-size: 18px; }
.cfg-brand b { color: var(--primary-color); font-weight: 800; }

/* celular da plataforma: topo marinho com a marca e cinco abas */
@media (max-width: 899px) {
  body.is-platform .topbar { background: var(--secondary-color); }
  body.is-platform .brand-inline .logo-mark { width: 26px; filter: none; }
  body.is-platform .brand-inline .name { font-size: 18px; font-weight: 800; letter-spacing: -.035em; }
  body.is-platform .bottom-nav .nav-item { min-height: 52px; font-size: 11px; font-weight: 700; }
  body.is-platform .bottom-nav .nav-item.active { color: var(--primary-color); }
  body.is-platform .bottom-nav .nav-item.active::before { background: var(--primary-color); }
  body.is-platform .main { padding: 20px 16px 120px; }
  body.is-platform .page-title { font-size: 26px; }
}
.more-exit { margin-top: 12px; border-top: 1px solid var(--border-color); padding-top: 8px; }

/* modo suporte: moldura preta de 4 px e faixa preta listrada (o preto não pertence à marca nem aos status) */
.support-bar {
  background-color: var(--support-black); background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .07) 0 12px, transparent 12px 24px);
  color: #fff; border-bottom: 0; min-height: 56px; padding: 8px 20px; font-size: 14px;
}
.support-bar svg { color: #fff; }
.support-clock { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.support-exit { background: #fff; color: #000; border: 0; min-height: 40px; font-weight: 700; }
.support-exit:hover { background: var(--surface-3); }
body.in-support::after { content: ''; position: fixed; inset: 0; z-index: 100; border: 4px solid var(--support-black); pointer-events: none; }
@media (max-width: 1000px) { .co-id { grid-area: main; } }

.tl-body .role-chip { align-self: flex-start; margin: 2px 0; }
body.is-platform .hub-grid.is-home { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { body.is-platform .hub-grid.is-home { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
body.is-platform .co-toolbar .search .input, body.is-platform .co-toolbar select { min-height: 44px; border-radius: var(--radius-sm); border-color: var(--border-strong); }
body.is-platform .co-toolbar .seg { border-radius: var(--radius-sm); }

/* ==========================================================================
   Perfis de segmento: "Seu negócio" no Começar (cartões por área + como o sistema fica) e o catálogo da MASTER.
   Usa só os tokens do sistema: no app da empresa, a cor da empresa; no painel, a da plataforma.
   ========================================================================== */
.seg-areas { display: flex; flex-direction: column; gap: 22px; }
.seg-area { margin: 0; padding: 0; border: 0; min-width: 0; }
.seg-area legend { padding: 0; margin-bottom: 10px; font-size: .82rem; font-weight: 650; color: var(--text-muted); }
.seg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.seg-card {
  position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 64px; padding: 14px 40px 14px 14px; text-align: left;
  border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); color: inherit;
  transition: border-color .15s, background-color .15s, box-shadow .2s var(--ease);
}
.seg-card:hover { border-color: var(--primary-soft-2); box-shadow: var(--shadow-sm); }
.seg-card:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.seg-card.is-on { border-color: var(--primary-color); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary-color); }
.seg-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--text-soft); transition: background-color .15s, color .15s; }
.seg-ico svg { width: 19px; height: 19px; }
.seg-card.is-on .seg-ico { background: var(--primary-color); color: var(--on-primary); }
.seg-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.seg-txt b { font-weight: 650; font-size: .95rem; line-height: 1.3; }
.seg-txt small { font-size: .8rem; line-height: 1.4; color: var(--text-muted); }
.seg-check { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-strong); color: transparent; }
.seg-check svg { width: 12px; height: 12px; }
.seg-card.is-on .seg-check { background: var(--primary-color); border-color: var(--primary-color); color: var(--on-primary); }
.seg-hint { margin-top: 18px; }

/* como o sistema fica para o segmento escolhido */
.seg-kit { margin-top: 24px; padding: 20px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--surface-2); }
.seg-kit h3 { margin: 0 0 14px; font-family: var(--font-heading); font-size: 1.05rem; font-weight: var(--heading-weight); }
.seg-words { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 0 0 18px; border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; background: var(--border-color); }
.seg-words > div { padding: 10px 14px; background: var(--surface-color); }
.seg-words dt { font-size: .76rem; color: var(--text-muted); }
.seg-words dd { margin: 2px 0 0; font-weight: 650; }
.seg-svcs { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.seg-svcs legend { grid-column: 1 / -1; padding: 0; margin-bottom: 8px; font-size: .86rem; font-weight: 650; }
.seg-svc, .seg-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; min-height: 44px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--surface-color); cursor: pointer; }
.seg-svc input, .seg-opt input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--primary-color); }
.seg-svc span, .seg-opt span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.seg-svc b, .seg-opt b { font-weight: 600; font-size: .9rem; }
.seg-svc small, .seg-opt small { font-size: .78rem; color: var(--text-muted); }
.seg-svc:has(input:checked) { border-color: var(--primary-soft-2); }
.seg-opt { margin-bottom: 12px; }
.seg-lgpd { display: flex; gap: 10px; margin: 4px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--info-soft); border: 1px solid var(--info-border); font-size: .84rem; line-height: 1.5; color: var(--text-soft); }
.seg-lgpd svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--info-text); }
.seg-lgpd b { color: var(--text-color); }
.seg-fixed { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border-color); }
.seg-fixed b { font-weight: 600; }
.seg-fixed span { font-size: .8rem; color: var(--text-muted); }
@media (max-width: 520px) { .seg-kit { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .seg-card, .seg-ico { transition: none; } }

/* cadastro público: o seletor segue os campos da entrada */
.login .field select {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background-color: var(--background-color); color: var(--text-color); font-size: 15px;
}
.login .field select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 1px var(--primary-color); background-color: var(--surface-color); }

/* painel MASTER: catálogo de segmentos */
.seg-filter { margin-bottom: 20px; flex-wrap: wrap; }
.sg-group .hub-panel-head { align-items: center; }
.sg-list { list-style: none; margin: 0; padding: 0; }
.sg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px 16px; min-height: 64px; padding: 12px 0; border-top: 1px solid var(--surface-3); }
.sg-row:first-child { border-top: 0; }
.sg-row.is-off .sg-main b { color: var(--text-muted); }
.sg-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sg-main b { font-weight: 700; }
.sg-words { font-size: .84rem; color: var(--text-muted); overflow-wrap: anywhere; }
.sg-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.sg-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-soft); font-size: .74rem; font-weight: 650; white-space: nowrap; }
.sg-tag svg { width: 13px; height: 13px; }
.sg-tag.is-lgpd { background: var(--info-soft); color: var(--info-text); }
.sg-num { font-size: .84rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .sg-row { grid-template-columns: minmax(0, 1fr) auto; }
  .sg-tags { grid-column: 1 / -1; justify-content: flex-start; order: 3; }
}
.sg-vocab { display: grid; gap: 10px; }
.sg-word { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 128px; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.sg-word legend { padding: 0; margin-bottom: 6px; font-size: .84rem; font-weight: 600; color: var(--text-soft); }
.sg-word .input, .sg-word select { min-height: 44px; }
@media (max-width: 520px) { .sg-word { grid-template-columns: 1fr 1fr; } .sg-word select { grid-column: 1 / -1; } }
.sg-svcs { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.sg-svc { display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, .8fr) 44px; gap: 8px; align-items: center; }
.sg-svc .input { min-height: 44px; }
@media (max-width: 520px) { .sg-svc { grid-template-columns: minmax(0, 1fr) 76px 44px; } .sg-svc [data-k="category"] { grid-column: 1 / 3; } }

/* recursos que o segmento desliga (a rotina do tipo de negócio não usa) */
.svc-add.is-off, .svc-add-hint.is-off { display: none !important; }
.seg-feats { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.seg-feats li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--surface-3); color: var(--text-muted); font-size: .8rem; font-weight: 600; }
.seg-feats li svg { width: 14px; height: 14px; }
.seg-feats li.is-on { background: var(--primary-soft); color: var(--primary-text); }

/* MASTER: módulos de um segmento (núcleo + os que entram fase a fase) */
.sg-mods { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.sg-mods li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-muted); }
.sg-mods li > svg { width: 18px; height: 18px; margin-top: 1px; }
.sg-mods li.is-on > svg { color: var(--success-text); }
.sg-mods li span:not(.sg-tag) { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sg-mods b { color: var(--text-color); font-weight: 600; font-size: .9rem; }
.sg-mods small { font-size: .78rem; }

/* ==========================================================================
   Prontuário (F1): lista de pendências, linha do tempo da evolução, anamnese, ficha e documentos
   ========================================================================== */
.cl-search { margin: 0 0 8px; max-width: 520px; }
.cl-results { list-style: none; margin: 0 0 18px; padding: 6px; max-width: 520px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); box-shadow: var(--shadow-sm); }
.cl-results a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: var(--radius-sm); color: inherit; text-decoration: none; }
.cl-results a:hover { background: var(--surface-2); }
.cl-results svg { width: 16px; height: 16px; color: var(--text-muted); }
.cl-results .muted { padding: 10px; }
.cl-list { list-style: none; margin: 0; padding: 0; }
.cl-list li + li { border-top: 1px solid var(--border-color); }
.cl-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 6px; color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.cl-list a:hover { background: var(--surface-2); }
.cl-list a > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.cl-list b { font-weight: 600; }
.cl-list small { font-size: .82rem; color: var(--text-muted); }
.cl-list a > svg { width: 18px; height: 18px; color: var(--text-muted); flex: none; }
.cl-list .link-btn { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.cl-list .link-btn svg { width: 15px; height: 15px; }
.cl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cl-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 36px; border-radius: 999px; border: 1px solid var(--warning-border); background: var(--warning-soft); color: var(--warning-text); font-size: .82rem; font-weight: 650; }
.cl-badge svg { width: 16px; height: 16px; }
.cl-badge.is-ok { border-color: transparent; background: var(--success-soft); color: var(--success-text); }
button.cl-badge:hover { border-color: var(--warning); }
.cl-new textarea, .cl-entry textarea { min-height: 140px; }
.cl-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cl-entry { padding: 16px 18px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--surface-color); }
.cl-entry-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 8px; }
.cl-entry-head b { font-weight: 650; }
.cl-entry-head small { font-size: .8rem; color: var(--text-muted); }
.cl-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.cl-entry-actions { display: flex; gap: 14px; margin-top: 10px; }
.cl-entry-actions .link-btn { padding: 6px 0; min-height: 32px; }
.cl-empty { padding: 12px 2px; }
.cl-versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cl-versions li { padding-bottom: 14px; border-bottom: 1px solid var(--border-color); }
.cl-ana-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; }
.cl-ana-head h2 { margin: 0; }
.cl-ana-head small { font-size: .8rem; color: var(--text-muted); }
.cl-qedit { margin-left: 8px; }
.cl-consent { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning-text); font-size: .88rem; }
.cl-consent svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.cl-consent.is-ok { background: var(--success-soft); color: var(--success-text); }
.cl-doc { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-top: 1px solid var(--border-color); }
.cl-doc:first-of-type { border-top: 0; }
.cl-skip { margin: 4px 0 0; padding-left: 18px; font-size: .86rem; color: var(--text-soft); }
/* F1.1: situação do paciente, financeiro, documentos e anexos */
.cl-head-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cl-status { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 650; background: var(--info-soft); color: var(--info-text); }
.cl-status.is-pausado { background: var(--warning-soft); color: var(--warning-text); }
.cl-status.is-alta { background: var(--success-soft); color: var(--success-text); }
.cl-status.is-encaminhado, .cl-status.is-interrompido { background: var(--surface-3); color: var(--text-soft); }
.cl-status-now { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.cl-status-now small { font-size: .82rem; color: var(--text-muted); }
.cl-plain { list-style: none; margin: 0; padding: 0; }
.cl-plain > li + li { border-top: 1px solid var(--border-color); }
.cl-plain > li:not(.cl-doc) { padding: 10px 0; }
.cl-doc > span, .cl-pay-text { display: flex; flex-direction: column; min-width: 0; }
.cl-doc small, .cl-pay-text small { font-size: .8rem; color: var(--text-muted); }
.cl-pay > li { padding: 2px 0 2px 4px; }
.cl-tax-bar { align-items: flex-end; gap: 10px; margin-top: 12px; }
.cl-tax-bar .field { flex: 0 1 220px; margin-bottom: 0; }
.cl-tax-bar .btn { min-height: 44px; }
.cl-tax-bar .btn svg { width: 16px; height: 16px; }
.cl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 16px 0 12px; }
.cl-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-2); }
.cl-stats small { font-size: .78rem; color: var(--text-muted); }
.cl-stats b { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cl-amount { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-policy { margin-top: 12px; }
.dt-extra { flex-wrap: wrap; }
.dt-extra .btn svg { width: 16px; height: 16px; }

/* ---------- Documentos emitidos (#documentos) ---------- */
.doc-toolbar { align-items: flex-end; }
.doc-filter { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--text-muted); }
.doc-filter .input { min-width: 0; }
.doc-status { margin-bottom: 14px; }
.doc-row {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 110px 140px 310px; align-items: center; gap: 12px;
  padding: 10px 18px; border-top: 1px solid var(--border-color);
}
.doc-row:first-child { border-top: none; }
.doc-row.svc-headrow span:first-child { padding-left: 0; }
.doc-row.svc-headrow span:nth-child(3) { text-align: left; }
.doc-main, .doc-who, .doc-when, .doc-state { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-main b { font-weight: 600; }
.doc-row small { font-size: .8rem; color: var(--text-muted); overflow-wrap: anywhere; }
.doc-when { font-variant-numeric: tabular-nums; }
.doc-state .badge { align-self: flex-start; }
.doc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.doc-cancel { color: var(--danger-text); }
.doc-row.is-cancelled .doc-main b, .doc-row.is-cancelled .doc-who { opacity: .6; }
@media (max-width: 900px) {
  .doc-row.svc-headrow { display: none; }
  .doc-row { grid-template-columns: minmax(0, 1fr) minmax(0, auto); grid-template-areas: 'main main' 'state state' 'who when' 'actions actions'; gap: 6px 12px; padding: 12px 14px; }
  .doc-main { grid-area: main; } .doc-who { grid-area: who; } .doc-when { grid-area: when; text-align: right; }
  .doc-state { grid-area: state; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .doc-actions { grid-area: actions; justify-content: flex-start; margin-left: -10px; }
  .doc-filter { flex: 1 1 140px; }
}