/* ============================================================
   LISTA DE ESPERA — EMPIRE HAIR · styles.css
   Roupa do redesign do Painel (Sprint 6, 20/10/2026).
   Marca: Tráfego Pago - Empire Hair/DESIGN.md (cores, tipografia, chips de
   largura fixa, linha de lista em colunas fixas, PIN). Estrutura: DESIGN-TOKENS.md.
   Fonte da verdade visual: painel-empire/design/wireframe-lista-espera-v1-2026-10-20.html
   ============================================================ */

/* ---- fontes (copiadas do Painel em 20/10: Recoleta desktop + GT America Trial, app interno) ----
   A GT America Trial não tem acento nem cifrão: cobre só o ASCII (unicode-range) e o resto cai na
   Helvetica Neue. swap no título (Recoleta), optional no corpo (GT America). */
@font-face { font-family: "Recoleta"; src: url("fonts/recoleta-300.v1.woff2") format("woff2"); font-weight: 100 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Recoleta"; src: url("fonts/recoleta-400.v1.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Recoleta"; src: url("fonts/recoleta-500.v1.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "GT America"; src: url("fonts/gt-america-300.v1.woff2") format("woff2"); font-weight: 100 300; font-style: normal; font-display: optional; unicode-range: U+0020-007E; }
@font-face { font-family: "GT America"; src: url("fonts/gt-america-400.v1.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: optional; unicode-range: U+0020-007E; }
@font-face { font-family: "GT America"; src: url("fonts/gt-america-500.v1.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: optional; unicode-range: U+0020-007E; }

:root {
  /* ---- cores (DESIGN.md do Empire) ---- */
  --bg:         #FDFCF8;   /* papel: fundo da página */
  --card:       #FFFFFF;   /* card, camada 1 */
  --soft-2:     #faf3e8;   /* hover suave, trilha de barra, chip Aguardando */
  --soft:       #f4e5cf;   /* hover forte, pílula, botão suave */
  --text:       #342817;   /* texto · botão primário · chip escuro (13,99:1 no fundo) */
  --sec:        #6f6151;   /* texto secundário (5,84:1 no fundo) */
  --accent:     #a8854d;   /* dourado: SÓ texto ≥ 24 px, ícone, borda, chip, dado em destaque */
  --ouro-texto: #8c6a33;   /* dourado pra texto pequeno (4,97:1 no branco) */
  --erro:       #B42318;   /* SÓ no erro do PIN */
  --erro-soft:  rgba(180, 35, 24, .08);
  --ink-04: rgba(52, 40, 23, .04); --ink-06: rgba(52, 40, 23, .06); --ink-10: rgba(52, 40, 23, .10);
  --ink-20: rgba(52, 40, 23, .20); --ink-35: rgba(52, 40, 23, .35); --ink-50: rgba(52, 40, 23, .50);
  --ouro-07: rgba(168, 133, 77, .07);   /* chip Contatada: 16 % dava 4,20:1 e 10 % 4,49:1 com texto de 12 px no branco; 7 % = 4,62:1 */
  --ouro-25: rgba(168, 133, 77, .25);
  --ouro-50: rgba(168, 133, 77, .50);

  /* nomes antigos do app: só apontam pros novos (uma fonte de verdade) */
  --blush: var(--soft); --blush-light: var(--bg); --mauve: var(--accent); --deep: var(--text);
  --ink: var(--text); --ink-soft: var(--sec); --ink-faint: var(--sec); --line: var(--ink-10); --line-strong: var(--ink-20);
  --brand-12: var(--ouro-07);

  /* ---- tipografia ---- */
  --serif: "Recoleta", Georgia, serif;
  --sans: "GT America", "Helvetica Neue", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-title: var(--serif); --font-body: var(--sans);
  --fs-body: 15px; --fs-small: 13px; --fs-label: 11px; --fs-micro: 11.5px;

  /* ---- forma, sombra, motion ---- */
  --r-card: 24px; --r-inner: 16px; --r-control: 10px; --r-tag: 6px; --r-full: 999px;
  --sh-card: 0 4px 20px rgba(52, 40, 23, .06);
  --sh-pop: 0 8px 30px rgba(52, 40, 23, .12);
  --sh-modal: 0 20px 60px rgba(52, 40, 23, .15);
  --shadow-card: var(--sh-card); --shadow-modal: var(--sh-modal);
  --ease: cubic-bezier(.2, 0, 0, 1); --ease-exit: cubic-bezier(.3, 0, 1, 1);
  --t-micro: 120ms var(--ease); --t-standard: 200ms var(--ease);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
/* reserva o espaço da barra de rolagem: aba curta e aba longa ficam na mesma largura (Windows) */
html { scrollbar-gutter: stable; }

body {
  background: var(--bg); color: var(--text);
  font-family: var(--sans); font-weight: 300; font-size: var(--fs-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 300; letter-spacing: -.025em; line-height: 1.08; }
h2, h3 { font-weight: 400; letter-spacing: -.015em; }
.it { font-family: var(--serif); font-style: normal; font-weight: 300; color: var(--accent); }   /* palavra em destaque: só em título ≥ 24 px */
b, strong { font-weight: 500; }
.num, .tabular { font-variant-numeric: tabular-nums; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:disabled { cursor: not-allowed; }
input, select, textarea { font: inherit; font-weight: 400; color: var(--text); }
a { color: inherit; text-decoration: none; }
svg.i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
svg.i.l { width: 18px; height: 18px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hidden { display: none !important; }

/* troca de aba: a tela nova entra suave em vez de pular */
#subview.entrando { animation: troca 180ms var(--ease); }
@keyframes troca { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }

/* ---------- utilitários de texto ---------- */
.label, .eyebrow { font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; font-weight: 400; color: var(--sec); }
.kicker { font-size: 12.5px; color: var(--sec); }
.kicker::first-letter { text-transform: uppercase; }   /* "terça-feira, 20 de outubro" vira "Terça-feira…" sem mexer no texto */
.small { font-size: var(--fs-small); color: var(--sec); }
.muted, .faint { color: var(--sec); }
.micro { font-size: var(--fs-micro); }
.trunca { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.more { font-size: var(--fs-small); color: var(--ouro-texto); font-weight: 400; white-space: nowrap; }
.more:hover { color: var(--text); }
.link-btn { color: var(--ouro-texto); font-size: var(--fs-small); }
.link-btn:hover { color: var(--text); }
.hr { height: 1px; background: var(--ink-10); margin: 16px 0; }

/* ---------- banner demo / aviso (sem vermelho: aviso forte é escuro) ---------- */
.banner { display: block; padding: 8px 20px; font-size: var(--fs-small); text-align: center; background: var(--soft-2); color: var(--text); }
.banner.erro { background: var(--text); color: var(--bg); }
.banner .btn { min-height: 32px; padding: 5px 14px; margin-left: 12px; vertical-align: middle; font-size: var(--fs-small); background: var(--bg); color: var(--text); }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; min-height: 26px; border-radius: var(--r-full); font-size: 12px; font-weight: 400; background: var(--soft); color: var(--text); white-space: nowrap; line-height: 1.3; }
.chip.gold { background: var(--ouro-07); color: var(--ouro-texto); font-weight: 500; }
.chip.outline { background: var(--card); border: 1px solid var(--ink-20); color: var(--sec); }
.chip.ink { background: var(--text); color: var(--bg); }
button.chip { transition: background var(--t-micro), color var(--t-micro); }
button.chip:hover { background: var(--soft); color: var(--text); }
.chip.on, button.chip.on:hover { background: var(--text); color: var(--bg); }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-full); padding: 11px 20px; font-size: 14px; font-weight: 400; min-height: 44px; white-space: nowrap; transition: background 250ms var(--ease), color 250ms var(--ease), transform var(--t-micro); }
.btn:hover { transition-duration: 120ms; }
.btn:active { transform: scale(.97); }
.btn-primary, .btn:not(.btn-soft):not(.btn-outline):not(.ghost) { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: var(--ouro-texto); }   /* creme sobre #8c6a33 = 4,84:1 (sobre #a8854d dava 3,3) */
.btn-primary:disabled, .btn:disabled { background: var(--ink-10); color: var(--sec); }
.btn-soft { background: var(--soft); color: var(--text); }
.btn-soft:hover { background: var(--ouro-25); }
.btn-outline, .btn.ghost { border: 1px solid var(--ink-20); background: var(--card); color: var(--text); }
.btn-outline:hover, .btn.ghost:hover { background: var(--soft); }
.btn.sm { padding: 7px 14px; min-height: 36px; font-size: 13px; }
.iconbtn { width: 36px; height: 36px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; color: var(--sec); position: relative; flex-shrink: 0; transition: background var(--t-micro), color var(--t-micro); }
.iconbtn:hover { background: var(--soft); color: var(--text); }
.iconbtn.on { background: var(--text); color: var(--bg); }
.iconbtn .cnt { position: absolute; top: 0; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-full); background: var(--text); color: var(--bg); font-size: 10px; font-weight: 500; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); line-height: 1; }

/* ---------- cards ---------- */
.card { background: var(--card); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 24px; min-width: 0; }
.card h2 { font-size: 19px; }
.card h2 .it, .modal h3 .it, .vazio-card h2 .it { color: var(--ouro-texto); }   /* abaixo de 24 px o dourado da marca dá 3,43:1; o de texto, 4,97:1 */
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.desc { font-size: var(--fs-small); color: var(--sec); margin: 4px 0 16px; }

/* ---------- avatar ---------- */
.avatar { width: 32px; height: 32px; border-radius: var(--r-full); background: var(--soft); color: var(--text); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; flex: none; }
.avatar.dk { background: var(--text); color: var(--bg); }
.avatar.big { width: 56px; height: 56px; font-size: 18px; }

/* ============================================================
   ENTRAR (quem está usando → PIN de 6 caixas)
   ============================================================ */
.login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 24px 16px; }
.login-logo { text-align: center; }
.login-logo .marca { font-family: var(--serif); font-weight: 300; font-size: 34px; letter-spacing: -.025em; line-height: 1.08; color: var(--text); margin-top: 6px; }
.login-card { background: var(--card); border-radius: var(--r-card); padding: 32px; width: 440px; max-width: 100%; box-shadow: var(--sh-card); display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* cartão ainda sem os nomes: guarda a altura final (título + 4 nomes) pra marca não pular */
.login-card:empty { min-height: 430px; }
.login-card h2 { font-size: 28px; text-align: center; }
.who { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.who button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; min-height: 56px; border-radius: var(--r-inner); background: var(--card); border: 1px solid var(--ink-10); text-align: left; font-size: 15px; font-weight: 400; color: var(--text); transition: background var(--t-micro); }
.who button:hover { background: var(--soft-2); }
.who .tag { margin-left: auto; font-size: 11px; color: var(--sec); border: 1px solid var(--ink-20); border-radius: var(--r-tag); padding: 0 6px; white-space: nowrap; }
.login-msg { text-align: center; font-size: var(--fs-small); color: var(--sec); min-height: 22px; max-width: 360px; }
.login-msg.erro { color: var(--text); font-weight: 400; }   /* aviso de acesso, não é erro de PIN: sem vermelho */

/* PIN: 6 caixas 54×66; dígito entra em 140 ms; erro = vermelho + balanço 400 ms que decai e limpa;
   acerto = borda dourada que se desenha (pathLength="1") + selo "PIN confirmado". Receita do DESIGN.md. */
.otp { position: relative; display: flex; gap: 10px; padding: 10px; border-radius: 22px; outline: none; }
.otp .ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.otp .ring rect { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); rx: 22px; ry: 22px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.otp.ok .ring rect { opacity: 1; animation: draw 500ms var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0 } }
.otp .box { width: 54px; height: 66px; border-radius: 14px; border: 1.5px solid var(--ink-20); background: var(--card); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 400; font-variant-numeric: tabular-nums; position: relative; overflow: hidden; transition: border-color var(--t-micro), box-shadow var(--t-micro), background var(--t-micro), color var(--t-micro); }
.otp .box.cur { border-color: var(--text); box-shadow: 0 0 0 4px var(--ink-06); }
.otp .box.cur::after { content: ""; position: absolute; width: 1.5px; height: 26px; background: var(--text); animation: blink 1.25s ease-out infinite; }
.otp .box.has::after { display: none; }
.otp .box span { display: inline-block; animation: digit 140ms var(--ease) both; }
@keyframes digit { from { opacity: 0; transform: scale(.8) translateY(3px) } to { opacity: 1; transform: none } }
@keyframes blink { 0%, 70%, 100% { opacity: 1 } 20%, 50% { opacity: 0 } }
.otp.err .box { border-color: var(--erro); color: var(--erro); background: var(--erro-soft); }
.otp.err { animation: shake 400ms cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shake { 0%, 100% { transform: translateX(0) } 12% { transform: translateX(-10px) } 28% { transform: translateX(10px) } 44% { transform: translateX(-7px) } 60% { transform: translateX(7px) } 76% { transform: translateX(-4px) } 90% { transform: translateX(3px) } }
.otp.ok .box { border-color: var(--ouro-50); color: var(--ouro-texto); animation: lift 240ms var(--ease) both; }
.otp.ok .box:nth-child(3) { animation-delay: 40ms } .otp.ok .box:nth-child(4) { animation-delay: 80ms } .otp.ok .box:nth-child(5) { animation-delay: 120ms } .otp.ok .box:nth-child(6) { animation-delay: 160ms } .otp.ok .box:nth-child(7) { animation-delay: 200ms }
@keyframes lift { 40% { transform: translateY(-3px) } }
.otp-in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pin-msg { min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: var(--fs-small); color: var(--sec); max-width: 360px; gap: 8px; }
.pin-msg.erro { color: var(--erro); font-weight: 400; }   /* o único vermelho do app: só PIN incorreto e 3 tentativas */
.pin-msg.aviso { color: var(--text); font-weight: 400; }   /* sessão em outro computador, captcha, rede: aviso, não erro de PIN */
.pin-msg .btn { color: var(--bg); }
.ok-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--text); color: var(--bg); border-radius: var(--r-full); padding: 8px 14px 8px 10px; font-size: 13px; font-weight: 400; box-shadow: var(--sh-card); animation: chipin 260ms var(--ease) both; }
.ok-chip .ck { width: 20px; height: 20px; border-radius: var(--r-full); background: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.ok-chip .ck .i { width: 12px; height: 12px; stroke-width: 3; color: var(--text); }
@keyframes chipin { from { opacity: 0; transform: scale(.92) translateY(4px) } to { opacity: 1; transform: none } }
.keypad { display: grid; grid-template-columns: repeat(3, 64px); gap: 10px; justify-content: center; }
.keypad button { height: 56px; border-radius: var(--r-inner); background: var(--card); border: 1px solid var(--ink-10); font-size: 22px; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--text); transition: background var(--t-micro), opacity var(--t-micro); }
.keypad button:hover { background: var(--soft-2); }
.keypad button:active { background: var(--soft); }
.keypad button.muted { color: var(--sec); font-size: 18px; }
.keypad button { display: flex; align-items: center; justify-content: center; }   /* ✓ e apagar são ícones Lucide */
.keypad button:disabled { opacity: .35; }
.login-nota { font-size: var(--fs-small); color: var(--sec); text-align: center; }
.login-diag { font-size: var(--fs-micro); color: var(--sec); text-align: center; }

/* ============================================================
   CABEÇALHO DA PÁGINA (era a barra do topo)
   ============================================================ */
.content { max-width: 1180px; margin: 0 auto; padding: 28px 32px 36px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1180px; margin: 0 auto; padding: 28px 32px 0; min-width: 0; }
.page-h .titulo { min-width: 0; }
.page-h .kicker { margin-bottom: 6px; }
.page-h h1 { font-size: 34px; }
.page-h .sub { color: var(--sec); font-size: 14px; margin-top: 6px; }
.page-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
/* dentro do Painel: o nome do app, a usuária e quem está online já aparecem no topo do Painel */
.embed .page-h h1, .embed #userchip, .embed #online-chip { display: none !important; }
.embed .page-h .sub { font-size: var(--fs-body); color: var(--text); margin-top: 2px; }

.tabs-seg { display: inline-flex; background: var(--soft-2); border-radius: var(--r-full); padding: 3px; gap: 2px; flex-wrap: wrap; }
.tabs-seg:empty, .tabs-seg:has(> :only-child) { display: none; }   /* recepção só tem a Lista: sem segmento de uma aba só */
.tabs-seg button, .seg button { padding: 7px 14px; border-radius: var(--r-full); font-size: 13px; color: var(--sec); min-height: 32px; font-weight: 400; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background var(--t-micro), color var(--t-micro); }
.tabs-seg button:hover, .seg button:hover { color: var(--text); }
.tabs-seg button.on, .seg button.on { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(52, 40, 23, .08); }
.seg { display: inline-flex; background: var(--soft-2); border-radius: var(--r-full); padding: 3px; gap: 2px; flex-wrap: wrap; }

.online-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sec); padding: 4px 10px; min-height: 26px; border-radius: var(--r-full); background: var(--soft-2); white-space: nowrap; max-width: 260px; }
.online-chip span:last-child { overflow: hidden; text-overflow: ellipsis; }
.online-chip .pulse { width: 7px; height: 7px; border-radius: var(--r-full); background: var(--accent); flex: none; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
.userchip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ink-10); border-radius: var(--r-full); background: var(--card); padding: 3px 12px 3px 4px; min-height: 36px; font-size: 13px; font-weight: 400; color: var(--text); white-space: nowrap; transition: background var(--t-micro); }
.userchip:hover { background: var(--soft-2); }
.userchip .avatar { width: 28px; height: 28px; font-size: 11px; }
.userchip .faint { color: var(--sec); }

/* ---------- notificações (toasts + sininho) ---------- */
#toasts { position: fixed; top: 16px; right: 16px; z-index: 300; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.toast { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; background: var(--card); border-left: 3px solid var(--accent); border-radius: var(--r-control); padding: 12px 16px; font-size: var(--fs-small); box-shadow: var(--sh-pop); animation: entra 300ms var(--ease); }
.toast.some { opacity: 0; transform: translateY(-4px); transition: opacity 300ms, transform 300ms; }
.toast .t-ic { flex: none; color: var(--accent); display: flex; padding-top: 1px; }
.bell-wrap { position: relative; }
.feed-pop { position: absolute; right: 0; top: 44px; width: 340px; max-width: calc(100vw - 32px); max-height: 420px; overflow-y: auto; z-index: 200; background: var(--card); border-radius: var(--r-inner); box-shadow: var(--sh-pop); border: 1px solid var(--ink-06); padding-bottom: 8px; animation: entra 200ms var(--ease); }
.feed-item { display: flex; gap: 10px; padding: 10px 16px; font-size: var(--fs-small); border-bottom: 1px solid var(--ink-06); }
.feed-item:last-child { border-bottom: none; }
.fi-ic { flex: none; color: var(--accent); display: flex; padding-top: 2px; }
.lt-row .nm small.editing svg.i { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }

/* modo gravação (admin): borra dado de cliente pra gravar a tela sem expor ninguém */
body.modo-gravacao .pii { filter: blur(6px); user-select: none; }
body.modo-gravacao a.pii { pointer-events: none; }   /* sem hover: o Chrome mostraria o número no rodapé */

/* ============================================================
   FILTROS + LISTA
   ============================================================ */
.lt-filters { display: flex; flex-direction: column; gap: 10px; }
.filters { display: flex; gap: 10px 16px; align-items: center; flex-wrap: wrap; min-width: 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.search { display: flex; align-items: center; gap: 10px; height: 38px; border-radius: var(--r-full); border: 1px solid var(--ink-10); background: var(--card); padding: 0 14px; color: var(--sec); font-size: 14px; flex: 1; min-width: 170px; max-width: 300px; transition: border-color var(--t-micro), box-shadow var(--t-micro); }
.search:focus-within { border-color: var(--ouro-50); box-shadow: 0 0 0 4px rgba(168, 133, 77, .12); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 14px; }
.search input::placeholder { color: var(--ink-50); }
.field .search input, .field .search input:focus { height: auto; border: 0; box-shadow: none; padding: 0; }   /* dentro de campo: a pílula é a borda */
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search .i { color: var(--ink-50); }
/* seletor nativo com a roupa do wireframe (.sel): chevron desenhado, 36 px, raio 10 */
select.sel { appearance: none; -webkit-appearance: none; height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--ink-20); border-radius: var(--r-control); background: var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f6151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center; font-size: 13px; font-weight: 400; color: var(--text); max-width: 190px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background-color var(--t-micro); }
select.sel:hover { background-color: var(--soft-2); }
select.sel.lg { height: 44px; font-size: 14px; max-width: none; width: 100%; }

.lt-list { display: flex; flex-direction: column; gap: 10px; }
.lt-head, .lt-row { display: grid; grid-template-columns: 150px 140px 100px minmax(100px, 1fr) 130px 112px 190px; gap: 12px; align-items: center; padding: 0 20px; }
.lt-head { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sec); font-weight: 400; }
.lt-head span:last-child { text-align: right; }
.lt-row { padding: 12px 20px; background: var(--card); border-radius: var(--r-inner); box-shadow: var(--sh-card); font-size: 13.5px; min-height: 64px; transition: box-shadow var(--t-micro); }
.lt-row:hover { box-shadow: var(--sh-pop); }
.lt-row.editing { outline: 1.5px dashed var(--ouro-50); outline-offset: -1.5px; }
.lt-row.deleted { box-shadow: none; outline: 1px dashed var(--ink-20); outline-offset: -1px; }
.lt-row.deleted .nm, .lt-row.deleted .pref, .lt-row.deleted .disp, .lt-row.deleted .wa { color: var(--sec); }   /* excluída: cor secundária (5,99:1) em vez de 55 % de opacidade (2,35:1); ações em 100 % */
.lt-row > * { min-width: 0; }
.lt-row .nm { font-weight: 400; }
.lt-row .nm > span { display: block; }
.lt-row .nm small, .lt-row .disp small { display: block; color: var(--sec); font-size: 12px; font-weight: 300; margin-top: 2px; }
.lt-row .nm small.editing { color: var(--ouro-texto); font-weight: 400; }
.lt-row .nm small.pii { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }   /* observação longa: no máximo 2 linhas (antes era 1, com reticências) */
.lt-row .wa { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--ouro-texto); font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; border-radius: var(--r-tag); transition: color var(--t-micro); }
.lt-row .wa:hover { color: var(--text); }
.lt-row .wa span { overflow: hidden; text-overflow: ellipsis; }
.lt-row .tags { display: flex; gap: 4px; flex-wrap: wrap; }
.lt-row .tags .chip { padding: 2px 8px; min-height: 22px; font-size: 11.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 18px; }
.lt-row .disp { font-size: 12.5px; }
.lt-row .disp > span { display: block; }
.stw { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.st { display: inline-flex; align-items: center; justify-content: center; width: 106px; height: 26px; border-radius: var(--r-full); font-size: 12px; font-weight: 400; white-space: nowrap; }
.st.aguardando { background: var(--soft-2); color: var(--text); }
.st.contatada { background: rgba(168, 133, 77, .16); box-shadow: inset 0 0 0 1px rgba(168, 133, 77, .35); color: var(--text); font-weight: 500; }   /* 16 % do SPEC; o #8c6a33 ali dava 4,22:1, então o texto é o escuro (12,21:1) e a borda fina separa do Aguardando */
.st.agendada { background: var(--text); color: var(--bg); font-weight: 500; }
.st.concluida { border: 1px solid var(--accent); color: var(--ouro-texto); }
.st.desistiu { background: var(--ink-06); color: var(--sec); }
.stw small { font-size: 11.5px; color: var(--sec); white-space: nowrap; }
/* ações: 3 slots fixos (editar · avançar/restaurar · excluir); .ph é o lugar vazio que mantém o alinhamento */
.lt-row .acts { display: grid; grid-template-columns: 36px 106px 36px; gap: 6px; align-items: center; justify-items: center; justify-content: end; }
.lt-row .acts .btn { width: 106px; justify-content: center; padding-left: 0; padding-right: 0; }
.lt-row .acts .ph { width: 106px; height: 36px; }
.lt-row .acts .ph.sm { width: 36px; }

/* estado vazio / carregando */
.vazio-card { text-align: center; padding: 36px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vazio-card .o { width: 48px; height: 48px; border-radius: var(--r-full); background: var(--soft); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }
.vazio-card h2 { font-size: 22px; }
.vazio-card p { font-size: 14px; color: var(--sec); max-width: 420px; }
.vazio-card .btn { margin-top: 6px; }
.skel { display: flex; flex-direction: column; gap: 10px; }
.skel i { display: block; height: 64px; border-radius: var(--r-inner); background: linear-gradient(90deg, var(--soft-2), var(--card), var(--soft-2)); background-size: 200% 100%; animation: sk 1.4s linear infinite; }
@keyframes sk { to { background-position: -200% 0 } }

/* ============================================================
   MODAIS (Nova cliente · Agendar · Excluir em 2 passos)
   ============================================================ */
.overlay { position: fixed; inset: 0; background: rgba(52, 40, 23, .35); display: flex; align-items: flex-start; justify-content: center; padding: 20px 16px; overflow-y: auto; z-index: 100; animation: fadein 200ms var(--ease); }
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
.modal { background: var(--card); border-radius: var(--r-card); width: 560px; max-width: 100%; padding: 24px 24px 0; box-shadow: var(--sh-modal); animation: entra 300ms var(--ease); margin: auto; max-height: calc(100dvh - 40px); overflow-y: auto; display: flex; flex-direction: column; min-width: 0; }
.modal.slim { width: 440px; }
@keyframes entra { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.modal h3 { font-size: 22px; margin-top: 4px; }
.modal .sub { font-size: 13.5px; color: var(--sec); margin: 6px 0 16px; }
.modal .sub b { color: var(--text); }
.modal .aviso-edicao { display: block; margin-top: 6px; color: var(--ouro-texto); font-weight: 400; }
.modal .aviso-edicao svg.i { vertical-align: -3px; margin-right: 6px; }
.sec-h h2 svg.i { color: var(--accent); vertical-align: -2px; margin-right: 8px; }
.label svg.i { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; }

/* minmax(0,1fr) + min-width:0 — sem isso, select com texto longo estoura o modal */
.fgrid, .frm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.full, .frm .full { grid-column: 1 / -1; }
.field label { font-size: 12.5px; color: var(--sec); font-weight: 400; }
.field label .req { color: var(--ouro-texto); }
.field label .opt { color: var(--sec); }
.field input, .field select, .field textarea, .in { width: 100%; min-width: 0; height: 44px; border: 1px solid var(--ink-20); border-radius: var(--r-control); padding: 0 12px; background: var(--card); font-size: 15px; font-weight: 400; color: var(--text); transition: border-color var(--t-micro), box-shadow var(--t-micro); }
.field select { appearance: none; -webkit-appearance: none; padding-right: 32px; background: var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f6151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 12px center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-50); }
.field input:focus, .field select:focus, .field textarea:focus, .in:focus-within { outline: none; border-color: var(--ouro-50); box-shadow: 0 0 0 4px rgba(168, 133, 77, .12); }
.field textarea { height: auto; min-height: 72px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.field input[type="date"] { font-variant-numeric: tabular-nums; }
.in { display: flex; align-items: center; gap: 6px; padding: 0 10px; }
.in .pre { color: var(--sec); font-size: 13px; }
.in input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; font: inherit; color: var(--text); font-variant-numeric: tabular-nums; }
.in input::placeholder { color: var(--ink-50); }
.in.sm { height: 36px; font-size: 13px; }

/* pílulas dos 3 campos múltiplos (serviços · dias · horários) */
.pills { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.pills:empty::after { content: "nada escolhido ainda"; font-size: var(--fs-small); color: var(--sec); padding: 4px 2px; }
.pill { display: inline-flex; align-items: center; gap: 7px; background: var(--text); color: var(--bg); border-radius: var(--r-full); padding: 4px 6px 4px 12px; min-height: 28px; font-size: 12.5px; font-weight: 400; max-width: 100%; }
.pill .cat { color: rgba(253, 252, 248, .7); }
.pill .x { width: 18px; height: 18px; border-radius: var(--r-full); background: rgba(253, 252, 248, .18); color: var(--bg); font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background var(--t-micro); }
.pill .x:hover { background: var(--accent); color: var(--text); }
.adder { display: flex; gap: 8px; }
.adder select { flex: 1; min-width: 0; }
.hint { font-size: var(--fs-micro); color: var(--sec); margin-top: 2px; }

/* busca de serviços (mesmos nomes do Kommo): lista inline, agrupada por categoria */
.serv-busca { display: flex; flex-direction: column; gap: 6px; }
.serv-busca .search { flex: none; }   /* o flex:1 da barra de filtros, numa coluna, zerava a altura (ficava com 25 px em vez de 44) */
.serv-lista { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--ink-10); border-radius: var(--r-control); background: var(--card); padding: 4px; box-shadow: var(--sh-pop); }
.serv-lista[hidden] { display: none; }
.serv-grupo { position: sticky; top: -4px; background: var(--card); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--sec); padding: 8px 8px 4px; }
.serv-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px; border-radius: var(--r-tag); text-align: left; font-size: 14px; font-weight: 300; color: var(--text); transition: background var(--t-micro); }
.serv-item:hover { background: var(--soft-2); }
.serv-item.on { background: var(--soft); font-weight: 400; }
.serv-item .ck { flex: none; width: 18px; height: 18px; border-radius: var(--r-tag); border: 1px solid var(--ink-35); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--bg); }
.serv-item.on .ck { background: var(--text); border-color: var(--text); }
.serv-vazio { font-size: var(--fs-small); color: var(--sec); padding: 10px 8px; }

.modal-foot, .acts-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding: 16px 0 24px; border-top: 1px solid var(--ink-06); position: sticky; bottom: 0; background: var(--card); }
.modal-foot .btn { min-width: 120px; }
.confirm-quote { background: var(--soft-2); border-radius: var(--r-inner); padding: 14px 16px; font-size: 14px; margin: 0 0 14px; color: var(--text); }   /* sem itálico: a GT America não tem e o navegador inventaria um */
.confirm-quote b { font-weight: 400; }

/* ============================================================
   LOG (só admin)
   ============================================================ */
.page-h2 { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-h2 .kicker { margin-bottom: 6px; }
.page-h2 h2 { font-size: 26px; font-weight: 300; letter-spacing: -.025em; }
.log-card { padding: 4px 24px; }
.alertas-card { box-shadow: 0 0 0 1px var(--ouro-25), var(--sh-card); }
.logline { display: grid; grid-template-columns: 100px 130px minmax(0, 1fr) 160px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ink-06); font-size: 13.5px; }
.logline:last-child { border-bottom: 0; }
.logline > * { min-width: 0; }
.logline .h { color: var(--sec); font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; }
.logline .chip { width: 130px; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; display: inline-flex; }
.logline .d { display: block; color: var(--sec); font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; }
.logline .txt { overflow-wrap: anywhere; }
.logline .r { justify-self: end; }
.logline .r .btn { min-width: 150px; }
.logline.destaque { background: linear-gradient(90deg, transparent, var(--ouro-07) 20%, var(--ouro-07) 80%, transparent); }

/* ============================================================
   CONFIGURAÇÕES (só admin)
   ============================================================ */
.cfg4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }   /* dois cards na mesma linha têm a mesma altura */
.cfg4 .card.full { grid-column: 1 / -1; }
.pro-lista { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.pro-lista.rola-baixo { --m: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); }
.pro-lista.rola-cima { --m: linear-gradient(to bottom, transparent, #000 48px); }
.pro-lista.rola-cima.rola-baixo { --m: linear-gradient(to bottom, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.pro-lista.rola-cima, .pro-lista.rola-baixo { -webkit-mask-image: var(--m); mask-image: var(--m); }
.pro { display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--ink-06); font-size: 13.5px; }
.pro.prof { grid-template-columns: 36px minmax(0, 1fr) 96px; }
.pro.preco { grid-template-columns: minmax(0, 1fr) 120px 96px; }
.pro.usr { grid-template-columns: 36px minmax(0, 1fr) 128px 96px 112px 96px; }
.pro:last-child { border-bottom: 0; }
.pro > * { min-width: 0; }
.pro .nome { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pro .nome > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.pro .nome .chip { font-size: 11px; min-height: 22px; padding: 2px 8px; }
.pro .off { color: var(--sec); text-decoration: line-through; }
.pro .n { font-size: 11px; color: var(--sec); background: var(--soft-2); border-radius: var(--r-tag); padding: 1px 6px; text-align: center; font-variant-numeric: tabular-nums; }
.pro .in { height: 34px; font-size: 13px; border-radius: 8px; padding: 0 10px; }
.pro .in input { text-align: right; }
.pro .in.pin input { text-align: left; letter-spacing: .04em; }
.pro .btn { width: 100%; justify-content: center; padding-left: 0; padding-right: 0; }
.pro .ph { height: 36px; }
.cfg-arq { margin: 12px 0 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.frm { align-items: end; }
.frm.c-prof { grid-template-columns: 90px minmax(0, 1fr) 110px; }
.frm.c-proc { grid-template-columns: minmax(0, 1fr) 110px; }
.frm.c-usr { grid-template-columns: minmax(0, 1fr) 150px 110px; }
.frm .btn { height: 44px; min-height: 44px; width: 100%; padding-left: 0; padding-right: 0; }
.cfg-msg { width: 100%; min-height: 110px; border: 1px solid var(--ink-20); border-radius: var(--r-control); padding: 12px 14px; font-size: 14px; line-height: 1.5; background: var(--card); resize: vertical; }
.cfg-msg:focus { outline: none; border-color: var(--ouro-50); box-shadow: 0 0 0 4px rgba(168, 133, 77, .12); }

/* ============================================================
   DADOS (só admin & master) — KPIs e gráficos no padrão do Dashboard do Painel
   ============================================================ */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; min-height: 130px; container-type: inline-size; }
.kpi .v { font-size: min(40px, 17cqi); font-weight: 500; letter-spacing: -.025em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi .v .cents { font-size: .5em; color: var(--sec); font-weight: 400; margin-left: 2px; }
.kpi .v .unit { font-size: .45em; color: var(--sec); font-weight: 400; margin-right: 6px; vertical-align: .4em; }
.kpi .delta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sec); flex-wrap: wrap; line-height: 1.45; margin-top: auto; }
.kpi[data-destaque="true"] { box-shadow: 0 0 0 1.5px var(--ouro-50), var(--sh-card); }
.ring-kpi { display: flex; align-items: flex-end; gap: 14px; min-width: 0; flex: 1; }   /* a frase desce pro mesmo lugar da frase dos cards vizinhos */
.ring-kpi svg { align-self: center; }
.ring-kpi svg { width: 56px; height: 56px; flex: none; }
.ring-kpi .tr { fill: none; stroke: var(--soft-2); stroke-width: 6; }
.ring-kpi .pr { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }
.ring-kpi text { font-size: 13px; font-weight: 500; fill: var(--text); font-family: var(--sans); font-variant-numeric: tabular-nums; }
.ring-kpi > div { min-width: 0; }
.faixa4 { padding: 16px 24px; }
.stat4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat4 .v { font-size: 26px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.stat4 .v small { font-size: 13px; color: var(--sec); font-weight: 400; }
.stat4 .k { font-size: 12px; color: var(--sec); margin-top: 4px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.note { font-size: 12.5px; color: var(--sec); }
.note.aviso { display: flex; gap: 8px; align-items: flex-start; }
.note.aviso svg.i { color: var(--accent); margin-top: 1px; }
.callout { background: var(--soft-2); border-radius: var(--r-inner); padding: 14px 16px; font-size: 13.5px; color: var(--sec); }
.callout b { color: var(--text); }

/* barras horizontais (ranking): nome · trilha · número · complemento */
.bars { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.bars .b { display: grid; grid-template-columns: 190px minmax(0, 1fr) 84px 84px; align-items: center; gap: 12px; font-size: 13.5px; }
.bars .b > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .b .track { height: 10px; border-radius: var(--r-full); background: var(--soft-2); overflow: hidden; }
.bars .b .track i { display: block; height: 100%; border-radius: var(--r-full); background: var(--ink-20); transition: width var(--t-standard); }
.bars .b.hi .track i { background: var(--accent); }
.bars .b .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 400; white-space: nowrap; }
.bars .b .m { text-align: right; color: var(--sec); font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; }
.bars.so-n .b .n { grid-column: 4; }   /* só a contagem: a barra termina onde termina a dos vizinhos e o número fica na borda direita, embaixo do "N na fila" */

/* barras por semana (topo redondo, cinza, pico dourado, cartão no mouse, comparado tracejado) */
.chart-card { position: relative; }
.chart-card .sec-h { margin-bottom: 4px; }
.graf-ctl { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 10px; }
.interruptor { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; font-size: 13.5px; font-weight: 400; color: var(--text); white-space: nowrap; user-select: none; }
.interruptor .tk { position: relative; width: 38px; height: 22px; flex-shrink: 0; border-radius: var(--r-full); background: var(--ink-20); transition: background 200ms var(--ease); }
.interruptor .tk::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: var(--r-full); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform 200ms var(--ease); }
.interruptor[aria-checked="true"] .tk { background: var(--accent); }
.interruptor[aria-checked="true"] .tk::after { transform: translateX(16px); }
.graf-cols { position: relative; display: flex; align-items: stretch; gap: 8px; margin-top: 14px; height: 170px; }
.graf-cols .grade { position: absolute; left: 0; right: 0; top: 0; bottom: 20px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.graf-cols .grade i { display: block; height: 0; border-top: 1px dashed var(--ink-10); }   /* gridline pontilhada */
.graf-cols .c { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; cursor: default; }
.graf-cols .area { position: relative; flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.graf-cols .area i { display: block; width: 100%; max-width: 26px; min-height: 2px; border-radius: var(--r-full) var(--r-full) 4px 4px; }
.graf-cols .cur { position: relative; z-index: 1; background: var(--ink-10); transition: background var(--t-micro); }
.graf-cols .out { position: relative; z-index: 1; background: var(--ink-20); }
.graf-cols .prev { position: absolute; bottom: 0; left: 50%; transform: translateX(calc(-50% + 8px)); width: 100%; max-width: 26px; background: transparent; border: 1.5px dashed var(--ink-20); border-bottom: 0; }
.graf-cols .c[data-pico="true"] .cur { background: var(--accent); }
.graf-cols .c[data-ativo="true"] .cur { background: var(--ouro-texto); }
.graf-cols .c[data-ativo="true"] .out { background: var(--ink-35); }
.graf-cols .eixo { position: relative; height: 14px; font-size: 10px; line-height: 14px; color: var(--sec); font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
.graf-cols .c[data-pico="true"] .eixo { color: var(--ouro-texto); font-weight: 500; }
.graf-tip { position: absolute; left: 0; top: 0; z-index: 3; min-width: 220px; max-width: min(320px, 100%); padding: 12px 14px; pointer-events: none; background: var(--card); border: 1px solid var(--ink-06); border-radius: 14px; box-shadow: var(--sh-pop); font-size: 13px; font-weight: 400; opacity: 0; will-change: transform; transition: transform 100ms var(--ease), opacity 120ms; }
.graf-tip[data-on="true"] { opacity: 1; }
.graf-tip .d { margin-bottom: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sec); white-space: nowrap; }
.graf-tip .l { display: flex; align-items: center; gap: 8px; padding: 3px 0; white-space: nowrap; }
.graf-tip .l i { width: 8px; height: 8px; border-radius: var(--r-full); flex-shrink: 0; background: var(--accent); }
.graf-tip .l .k { color: var(--sec); }
.graf-tip .l .n { margin-left: auto; padding-left: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lgd { display: flex; gap: 6px 16px; font-size: 12.5px; color: var(--sec); margin-top: 8px; flex-wrap: wrap; }
.lgd span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lgd i { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--accent); }
.lgd i.dash { width: 14px; height: 0; border-top: 1.5px dashed var(--ink-35); border-radius: 0; background: none; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1130px) {
  .lt-head { display: none; }
  /* entre 641 e 1130 px (Lista no Painel com a barra aberta): duas linhas por cliente.
     em cima nome · status · ações; embaixo WhatsApp · preferência · serviços · disponibilidade */
  .lt-row { grid-template-columns: repeat(3, minmax(0, 1fr)) 190px; row-gap: 12px; }
  .lt-row .nm { grid-row: 1; grid-column: 1 / 3; }
  .lt-row .stw { grid-row: 1; grid-column: 3; }
  .lt-row .acts { grid-row: 1; grid-column: 4; justify-self: end; }
  .lt-row .wa, .lt-row .pref, .lt-row .tags, .lt-row .disp { grid-row: 2; align-self: start; }
  .lt-row .wa { grid-column: 1; margin-top: 16px; }   /* sem rótulo: desce a altura do rótulo dos vizinhos */
  .lt-row .pref { grid-column: 2; }
  .lt-row .tags { grid-column: 3; }
  .lt-row .disp { grid-column: 4; }
  .lt-row .pref::before, .lt-row .tags::before, .lt-row .disp::before { content: attr(data-l); display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--sec); margin-bottom: 2px; }
  .lt-row .tags::before { width: 100%; }
}
@media (max-width: 1024px) {
  .kpis, .stat4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .content, .page-h { padding-left: 24px; padding-right: 24px; }
  .cfg4, .grid2 { grid-template-columns: minmax(0, 1fr); }
  .pro.usr { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* nome e PIN em linha própria; os 3 botões dividem a largura */
  .pro.usr .avatar { display: none; }
  .pro.usr .nome { grid-column: 1 / -1; }
  .pro.usr .in { grid-column: 1 / -1; }
  .logline { grid-template-columns: 100px minmax(0, 1fr); }
  .logline .chip { grid-column: 2; justify-self: start; }
  .logline .txt { grid-column: 1 / -1; }
  .logline .r { grid-column: 1 / -1; justify-self: start; }
  .lt-row .acts { grid-template-columns: 36px 106px 36px; }
  .lt-filters .search { flex: 1 1 100%; max-width: none; }   /* busca na linha dela: o texto de exemplo não corta */
}
@media (max-width: 640px) {
  .content, .page-h { padding-left: 16px; padding-right: 16px; }
  .content { padding-top: 20px; gap: 20px; }
  .page-h { padding-top: 20px; }
  .page-h h1 { font-size: 28px; }
  .kpis, .stat4 { grid-template-columns: minmax(0, 1fr); }
  .kpi .v { font-size: 36px; }
  .lt-row { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .lt-row .nm, .lt-row .stw, .lt-row .acts, .lt-row .wa, .lt-row .pref, .lt-row .tags, .lt-row .disp { grid-row: auto; grid-column: 1; }
  .lt-row .wa { margin-top: 0; }
  .lt-row .acts { justify-self: start; justify-content: start; }
  .otp { gap: 6px; padding: 8px; }
  .otp .box { width: 44px; height: 56px; font-size: 22px; }
  .keypad { grid-template-columns: repeat(3, 56px); }
  .login-card { padding: 24px 16px; }
  .fgrid, .frm, .frm.c-prof, .frm.c-proc, .frm.c-usr { grid-template-columns: minmax(0, 1fr); }
  .frm .btn { width: auto; justify-self: start; padding-left: 20px; padding-right: 20px; }
  .bars .b { grid-template-columns: minmax(0, 1fr) auto auto; }
  .bars .b .track { grid-column: 1 / -1; grid-row: 2; }
  .bars .b .m, .bars .b .n { text-align: right; }
  .bars.so-n .b .n { grid-column: auto; }
  .pro.prof { grid-template-columns: 36px minmax(0, 1fr) 96px; }
  .pro.preco { grid-template-columns: minmax(0, 1fr) 96px 96px; }
  .pro.usr { grid-template-columns: minmax(0, 1fr) 96px; }
  .pro.usr > .btn, .pro.usr > .ph { grid-column: auto; }
  .graf-cols { height: 140px; }
  .graf-tip { min-width: 180px; }
  .search { max-width: 100%; }
  select.sel { max-width: 100%; flex: 1 1 42%; }   /* dois seletores por linha, sem "Pro…" */
  .modal { padding: 20px 16px 0; }
  .modal-foot .btn { flex: 1; }
  .userchip .faint { display: none; }   /* no celular fica avatar + nome; o "· trocar" sai */
  .feed-pop { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; max-height: 60vh; }   /* no celular o sininho está à esquerda: a lista vira folha embaixo */
}

/* captcha do login (Cloudflare Turnstile): invisível; só aparece se o Cloudflare pedir um clique */
#captcha-box { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}