/* ============ BASE: tokens, reset, tipografia, controles, foco, skeleton ============

   Regra desta camada: componente NÃO tem hex solto. Cor, espaço, raio, sombra e
   duração saem daqui. Se um valor aparece duas vezes numa tela, ele virou token.

   Elevação = borda + sombra discreta. Nada de glow verde: brilho colorido em card
   e botão é o que dava cara de template — some de perto e cansa de longe.
*/
:root{
  /* ---- superfícies (nunca #000: preto puro achata a hierarquia) ---- */
  --bg:#020617;            /* fundo da aplicação */
  --surface:#0F172A;       /* card, sidebar, topbar */
  --surface-2:#1E293B;     /* card dentro de card, hover, input */
  --surface-3:#293548;     /* hover de linha, elemento ativo */
  --line:#334155;          /* borda padrão */
  --line-soft:#22304A;     /* divisória interna (mais discreta) */

  /* ---- texto (contraste conferido sobre --bg e --surface: mínimo 4.5:1) ---- */
  --tx:#F8FAFC;            /* texto principal      ~18:1 */
  --tx2:#CBD5E1;           /* secundário           ~11:1 */
  --tx3:#94A3B8;           /* terciário / meta     ~6.9:1 */

  /* ---- accent: verde WhatsApp (identidade) ---- */
  --accent:#22C55E;
  --accent-hover:#2FD167;  /* +4% de luz no hover */
  --accent-press:#16A34A;
  --accent-ink:#03130A;    /* texto sobre accent sólido */
  --accent-soft:rgba(34,197,94,.12);
  --accent-line:rgba(34,197,94,.32);

  /* ---- semânticos ---- */
  --danger:#EF4444; --danger-soft:rgba(239,68,68,.12); --danger-line:rgba(239,68,68,.35);
  --warn:#F59E0B;   --warn-soft:rgba(245,158,11,.12);  --warn-line:rgba(245,158,11,.35);
  --info:#38BDF8;   --info-soft:rgba(56,189,248,.12);  --info-line:rgba(56,189,248,.3);

  /* ---- espaçamento: grade de 8pt (4 é o meio-passo permitido) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px;

  /* ---- raio: 8 padrão, 12 em card grande, 999 só em pill ---- */
  --r:8px; --r-sm:6px; --r-lg:12px; --r-full:999px;

  /* ---- elevação ---- */
  --sh-1:0 1px 2px rgba(2,6,23,.5);
  --sh-2:0 4px 12px rgba(2,6,23,.5);
  --sh-3:0 16px 40px rgba(2,6,23,.6);

  /* ---- movimento ---- */
  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:150ms; --t:200ms; --t-slow:250ms;

  /* ---- tipografia ---- */
  --font:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,'Cascadia Code',Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--font);font-size:14px;
  line-height:1.5;overflow:hidden;-webkit-font-smoothing:antialiased}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}

/* números alinhados em coluna: contador, preço, hora, célula de tabela */
.stat .val,.cv-time,.tl-time,.si-qty,.si-tot,.sale-total,.camp-nums,.bar-fill,
.msg .tm,.n8n-meta,td,.num,.pill,.unread,.fs-line{font-variant-numeric:tabular-nums}

/* micro-label: SETOR, STATUS, AÇÕES, cabeçalho de tabela */
.stat .lbl,.is-lbl,.ih-lbl,th,.field label,.au-sec-title,.micro{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- clicáveis: cursor e foco visível em TUDO ---- */
button,[role="button"],summary,label.switch,.conv-item,.recent-item,.tl-row,.dropzone{cursor:pointer}
button{font-family:inherit;border:none;background:none;color:inherit;font-size:inherit}
button:disabled{opacity:.45;cursor:not-allowed}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.switch input:focus-visible+.slider{outline:2px solid var(--accent);outline-offset:2px}

/* ---- ícones ---- */
.ico{width:16px;height:16px;flex-shrink:0;display:inline-block;vertical-align:-3px}
.ico.sm{width:14px;height:14px}
.ico.lg{width:20px;height:20px}
.ico.xl{width:28px;height:28px}
.ico.muted{color:var(--tx3)}
.ico.ok{color:var(--accent)}
.ico.warn{color:var(--warn)}
.ico.bad{color:var(--danger)}

/* ---- campos ---- */
input,textarea,select{font-family:inherit;font-size:13.5px;color:var(--tx);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:9px 12px;outline:none;transition:border-color var(--t-fast) var(--ease),
  box-shadow var(--t-fast) var(--ease)}
input:hover:not(:disabled),textarea:hover:not(:disabled),select:hover:not(:disabled){border-color:var(--surface-3)}
input:focus,textarea:focus,select:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder,textarea::placeholder{color:var(--tx3)}
select{cursor:pointer;appearance:none;padding-right:32px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px}
textarea{resize:vertical;line-height:1.55}

.field{margin-bottom:var(--s4)}
.field label{display:block;color:var(--tx3);margin-bottom:var(--s2)}
.field input,.field textarea,.field select{width:100%}
.field .fhint{font-size:11.5px;color:var(--tx3);margin-top:var(--s1);line-height:1.45}

/* ---- utilitários ---- */
.hidden{display:none!important}
.muted{color:var(--tx3)}
.small{font-size:12px}
.row{display:flex;align-items:center;gap:var(--s2)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-full);
  border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--surface-3);background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

/* ---- carregamento: skeleton, não spinner ----
   Spinner diz "espere"; skeleton diz "isto vai virar uma lista de conversas".
   O shimmer é sutil de propósito (2 tons de superfície, sem branco). */
.sk{position:relative;overflow:hidden;background:var(--surface-2);border-radius:var(--r)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(148,163,184,.09),transparent);
  animation:sk-shimmer 1.4s ease-in-out infinite}
@keyframes sk-shimmer{100%{transform:translateX(100%)}}
.sk-line{height:10px;border-radius:var(--r-full)}
.sk-line.w40{width:40%}.sk-line.w60{width:60%}.sk-line.w80{width:80%}
.sk-title{height:14px;width:35%;border-radius:var(--r-full)}
.sk-block{height:96px}
.sk-card{height:150px;border-radius:var(--r-lg)}
.sk-stack{display:flex;flex-direction:column;gap:var(--s3)}
.sk-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line-soft)}
.sk-av{width:34px;height:34px;border-radius:var(--r-full);flex-shrink:0}
.sk-row .sk-body{flex:1;display:flex;flex-direction:column;gap:var(--s2)}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s3)}

/* spinner mantido só como reserva (nenhuma tela usa por padrão) */
.spinner{width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite;margin:var(--s8) auto}
@keyframes spin{to{transform:rotate(360deg)}}

@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---- acessibilidade: quem pediu menos animação, recebe menos animação ---- */
@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::after{animation:none;opacity:.5}
}