/* Tema Ergui — portado do CRM (/Users/convidado/Cursor/CRM)
   ─────────────────────────────────────────────────────────────────────────────
   O CRM e Tailwind v4 com @theme inline em src/app/globals.css; aqui nao ha build,
   entao os tokens sao copia manual. Ao mexer na identidade, mexer nos dois.
   Origem dos valores:
     globals.css ......... --background #f6f6f5, --foreground #1b1a19, --brand #f7ac00
     components/ui.tsx ... botoes, campos, card, badge, empty state
     components/nav.tsx .. item ativo (brand/15), badge de contagem
   DESVIO DELIBERADO DO CRM: os cinzas de texto. O CRM usa text-black/45 em metadado
   e placeholder:text-black/35 — 3,3:1 e 2,4:1 sobre branco, os dois reprovam em AA.
   Aqui o piso e .55 (4,8:1). Ver DESIGN.md. */

:root {
  /* superficie */
  --bg:          #f6f6f5;
  --surface:     #ffffff;
  --surface-2:   #fafafa;          /* cabecalho de tabela, rodape de painel */

  /* tinta — .35/.45 do CRM NAO sao usados em texto (ver cabecalho) */
  --ink:         #1b1a19;
  --ink-2:       rgba(0,0,0,.62);  /* 6,2:1 — rotulo, metadado */
  --ink-3:       rgba(0,0,0,.55);  /* 4,8:1 — piso AA, texto terciario */
  --faint:       rgba(0,0,0,.38);  /* SO decorativo: glifo, separador, disabled */

  /* marca — #f7ac00 da 1,9:1 sobre branco: nunca como cor de texto */
  --brand:       #f7ac00;
  --brand-ink:   #b45309;          /* 5,0:1 — o "amber-700" que o CRM ja usa */
  --brand-15:    rgba(247,172,0,.15);
  --brand-20:    rgba(247,172,0,.20);
  --brand-40:    rgba(247,172,0,.40);
  --brand-50:    rgba(247,172,0,.50);
  --ring:        rgba(247,172,0,.30);

  /* linhas */
  --line:        rgba(0,0,0,.10);
  --line-forte:  rgba(0,0,0,.15);
  --line-soft:   rgba(0,0,0,.05);
  --hover:       rgba(0,0,0,.05);

  /* semantica */
  --ok:      #059669;  --ok-ink:   #065f46;  --ok-bg:   #ecfdf5;  --ok-line:   #a7f3d0;
  --bad:     #dc2626;  --bad-ink:  #b91c1c;  --bad-bg:  #fef2f2;  --bad-line:  #fecaca;
  --info:    #2563eb;  --info-ink: #1d4ed8;  --info-bg: #eff6ff;  --info-line: #bfdbfe;

  /* forma — container 16, controle 12, micro 8, pill */
  --r-card: 16px;  --r-ctrl: 12px;  --r-mini: 8px;  --r-pill: 9999px;

  /* elevacao — card NAO tem sombra no CRM; so popover, drawer e modal */
  --sh-card:  0 1px 3px 0 rgb(0 0 0/.10), 0 1px 2px -1px rgb(0 0 0/.10);
  --sh-pop:   0 10px 15px -3px rgb(0 0 0/.10), 0 4px 6px -4px rgb(0 0 0/.10);
  --sh-modal: 0 20px 25px -5px rgb(0 0 0/.10), 0 8px 10px -6px rgb(0 0 0/.10);

  /* tipografia — Work Sans variavel, uma familia so (o CRM nao usa mono) */
  --sans: "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-2xs: 11px;  --t-xs: 12px;  --t-sm: 13px;
  --t-base: 14px; --t-lg: 20px;  --t-xl: 24px;

  /* movimento */
  --ease: cubic-bezier(.22,1,.36,1);   /* ease-out-quint */
  --dur:  .18s;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;   /* colunas de dias/horas alinhadas sem mono */
}

.hidden { display: none !important; }
.dim    { color: var(--ink-3); }

::selection { background: var(--brand-40); }

/* ── MARCA ───────────────────────────────────────────────────────────────── */

.marca { font-weight: 800; letter-spacing: -.025em; white-space: nowrap; }
.marca .m-e { color: var(--brand); }   /* ".ERGUI" — grande e decorativo, como no CRM */
.marca .m-p { color: var(--ink); }

/* ── BOTOES ──────────────────────────────────────────────────────────────── */
/* ui.tsx: base = inline-flex, gap-2, rounded-xl, font-medium, transition,
   disabled = cursor-not-allowed + opacity-50. Tamanhos sm/md. */

.btn-primario, .btn-plano, .btn-mini, .btn-perigo {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); border-radius: var(--r-ctrl);
  cursor: pointer; border: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn-primario:disabled, .btn-plano:disabled, .btn-mini:disabled, .btn-perigo:disabled {
  cursor: not-allowed; opacity: .5;
}

/* primary do CRM = GRAFITE, nao ambar */
.btn-primario {
  background: var(--ink); color: #fff;
  font-weight: 600; font-size: var(--t-sm); padding: 9px 16px;
}
.btn-primario:not(:disabled):hover { opacity: .9; }

.btn-perigo { background: var(--bad); color: #fff; font-weight: 600; font-size: var(--t-sm); padding: 9px 16px; }
.btn-perigo:not(:disabled):hover { background: var(--bad-ink); }

.btn-plano {
  background: var(--surface); border-color: var(--line-forte); color: var(--ink);
  font-weight: 500; font-size: var(--t-sm); padding: 7px 12px;
}
.btn-plano:not(:disabled):hover { background: var(--hover); }

.btn-mini {
  background: transparent; color: var(--ink-2);
  font-weight: 500; font-size: var(--t-xs); padding: 5px 10px; border-radius: var(--r-mini);
}
.btn-mini:not(:disabled):hover { background: var(--hover); color: var(--ink); }
.btn-mini.destaque { background: var(--brand); color: var(--ink); font-weight: 600; }
.btn-mini.destaque:not(:disabled):hover { filter: brightness(.95); }

.btn-icone {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--ink-2); font-size: 15px; line-height: 1;
  width: 30px; height: 30px; border-radius: var(--r-mini); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-icone:hover { background: var(--hover); color: var(--ink); }

:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

/* spinner de botao — equivale ao <Loader2 className="animate-spin"/> do CRM */
.btn-primario[aria-busy="true"]::before,
.btn-perigo[aria-busy="true"]::before,
.btn-plano[aria-busy="true"]::before {
  content: ''; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg) } }

/* ── CAMPOS ──────────────────────────────────────────────────────────────── */
/* ui.tsx: rounded-xl, border-black/15, px-3 py-2.5, foco = border-brand + ring-brand/30 */

.campo {
  background: var(--surface); border: 1px solid var(--line-forte); color: var(--ink);
  font-family: var(--sans); font-size: var(--t-sm); line-height: 1.3;
  padding: 7px 10px; border-radius: var(--r-ctrl);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.campo::placeholder { color: var(--ink-3); }          /* 4,8:1 — nao o /35 do CRM */
.campo:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 2px var(--ring); }
.campo:disabled { background: var(--hover); color: var(--ink-3); cursor: not-allowed; }
.campo.ruim { border-color: var(--bad); color: var(--bad-ink); }
.campo.ruim:focus { box-shadow: 0 0 0 2px rgba(220,38,38,.25); }
.campo.estreito { width: 92px; }
select.campo { cursor: pointer; }

label.rot { display: block; font-size: var(--t-xs); font-weight: 500; color: var(--ink-2); margin-bottom: 4px; }

/* checkbox como chip toggle — o padrao de segmented control do CRM
   (admin/marketing/page.tsx). O <input> continua no DOM: o JS le .checked dele. */
.check {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border: 1px solid var(--line-forte); border-radius: var(--r-mini);
  background: var(--surface); font-size: var(--t-xs); color: var(--ink-2);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.check:hover { background: var(--hover); }
.check:has(:checked) { background: var(--brand-20); border-color: transparent; color: var(--ink); font-weight: 600; }
.check:has(:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.check input { accent-color: var(--brand); cursor: pointer; margin: 0; }

/* ── SUPERFICIES ─────────────────────────────────────────────────────────── */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }

/* EmptyState do CRM: borda tracejada, sem sombra */
.vazio {
  border: 1px dashed var(--line-forte); border-radius: var(--r-card);
  background: rgba(255,255,255,.5);
  padding: 40px 24px; text-align: center; font-size: var(--t-sm); color: var(--ink-2);
}
.vazio p { margin-bottom: 14px; }

/* banner inline — o CRM nao tem toast de sistema, usa banner (leads/page.tsx) */
.banner {
  border: 1px solid var(--line); border-radius: var(--r-ctrl);
  padding: 10px 14px; font-size: var(--t-sm); line-height: 1.45;
}
.banner-brand { background: var(--brand-15); border-color: var(--brand-40); color: var(--ink); }
.banner-bad   { background: var(--bad-bg);   border-color: var(--bad-line);  color: var(--bad-ink); }
.banner-ok    { background: var(--ok-bg);    border-color: var(--ok-line);   color: var(--ok-ink); }
.banner strong { font-weight: 600; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--r-pill); padding: 2px 9px;
  font-size: var(--t-2xs); font-weight: 600; line-height: 1.6;
}
.pill-neutro { background: var(--hover);    color: var(--ink-2); }
.pill-brand  { background: var(--brand-20); color: var(--ink); }
.pill-info   { background: var(--info-bg);  color: var(--info-ink); }
.pill-bad    { background: var(--bad-bg);   color: var(--bad-ink); }

.status { font-size: var(--t-xs); color: var(--ink-2); }
.status.erro { color: var(--bad-ink); font-weight: 500; }
.status.ok   { color: var(--ok-ink); }

/* ── ESQUELETO DE CARREGAMENTO ───────────────────────────────────────────── */

.sk {
  background: linear-gradient(90deg, var(--line-soft) 25%, rgba(0,0,0,.09) 37%, var(--line-soft) 63%);
  background-size: 400% 100%;
  border-radius: 6px; animation: brilho 1.4s ease infinite;
}
@keyframes brilho { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .sk { background: var(--line-soft); }
}