/* ============================================================
   W COMUNIQUE — Design System compartilhado (todas as telas)
   Importe: <link rel="stylesheet" href="assets/wcom-ui.css">
   + Tailwind CDN para layout.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --wc:#2563eb; --wc-dark:#1d4ed8; --wc-light:#3b82f6;
  --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --bg:#f1f5f9; --surface:#ffffff;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --shadow-md:0 1px 3px rgba(16,24,40,.06),0 8px 24px -10px rgba(16,24,40,.12);
  --shadow-glow:0 8px 20px -6px rgba(37,99,235,.5);
  --ease:cubic-bezier(.4,0,.2,1);
  /* ============ Operador status (supervisor.html) ============ */
  --st-disp-bg:#f0fdf4;     --st-disp-bd:#22c55e;     --st-disp-tx:#166534;
  --st-atend-bg:#eff6ff;    --st-atend-bd:#3b82f6;    --st-atend-tx:#1e40af;
  --st-disc-bg:#eef2ff;     --st-disc-bd:#6366f1;     --st-disc-tx:#3730a3;
  --st-pausa-bg:#fffbeb;    --st-pausa-bd:#f59e0b;    --st-pausa-tx:#92400e;
  --st-pausaov-bg:#fff7ed;  --st-pausaov-bd:#f97316;  --st-pausaov-tx:#7c2d12;
  --st-cler-bg:#f8fafc;     --st-cler-bd:#94a3b8;     --st-cler-tx:#475569;
  --st-off-bg:#f8fafc;      --st-off-bd:#e2e8f0;      --st-off-tx:#94a3b8;
  --st-alert-bg:#fff1f2;    --st-alert-bd:#ef4444;    --st-alert-tx:#991b1b;
}
/* Card de operador (supervisor) */
.op-card{ position:relative; background:var(--st-card-bg, #fff); border:1px solid var(--st-card-bd, #e2e8f0); border-left:4px solid var(--st-card-accent, #94a3b8); border-radius:10px; padding:10px 12px 10px 14px; transition:.15s var(--ease); min-height:84px; }
.op-card:hover{ box-shadow:var(--shadow-sm); transform:translateY(-1px); cursor:pointer; }
.op-card.alert{ animation:op-pulse 1.6s ease-in-out infinite; }
.op-card.offline{ opacity:.55; }
.op-init{ width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#fff;flex-shrink:0; }
.op-chip{ font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px;display:inline-block; }
.op-timer{ font-variant-numeric:tabular-nums;font-weight:600;font-family:'JetBrains Mono','SF Mono',Menlo,monospace; }
@keyframes op-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,.45);} 50%{ box-shadow:0 0 0 6px rgba(239,68,68,0);} }
/* Header agrupador por equipe */
.eq-header{ display:flex; align-items:center; gap:12px; padding:8px 14px; background:#fff; border:1px solid #e2e8f0; border-radius:10px; margin-bottom:10px; }
.eq-header .eq-dot{ width:12px; height:12px; border-radius:3px; }
.eq-header .eq-name{ font-weight:700; font-size:13.5px; color:#1e293b; text-transform:uppercase; letter-spacing:.04em; }
.eq-header .eq-mini{ font-size:11px; color:#64748b; display:flex; gap:14px; }
.eq-header .eq-mini b{ color:#0f172a; font-weight:700; }
.eq-header .eq-fila{ margin-left:auto; font-size:11.5px; }
.eq-header .eq-fila.warn{ color:#7c2d12; font-weight:600; }
.eq-header .eq-fila.crit{ color:#991b1b; font-weight:700; }
*{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
body{ background:var(--bg); color:#334155; margin:0; }

/* ---------- Scrollbar ---------- */
.scroll::-webkit-scrollbar,*::-webkit-scrollbar{ width:7px; height:7px; }
.scroll::-webkit-scrollbar-thumb,*::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:99px; }
.scroll::-webkit-scrollbar-track,*::-webkit-scrollbar-track{ background:transparent; }

/* ---------- Ícones ---------- */
.ico{ width:20px;height:20px;stroke-width:1.8;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round; }
.ico-sm{ width:16px;height:16px;stroke-width:1.8;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round; }

/* ---------- Sidebar (rail) ---------- */
.wc-rail{ width:82px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding:20px 0;gap:6px;
  background:linear-gradient(180deg,#0f172a,#1e293b); }
.wc-logo{ width:76px;height:76px;border-radius:22px;display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#fff;font-size:18px;margin-bottom:18px;
  overflow:hidden;background:transparent;box-shadow:none; }
.wc-logo img{ width:100%;height:100%;object-fit:contain;display:block; }
.wc-railbtn{ width:44px;height:44px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  color:#94a3b8;transition:all .18s var(--ease);text-decoration:none; }
.wc-railbtn:hover{ background:rgba(255,255,255,.08);color:#fff;transform:translateY(-1px); }
.wc-railbtn.active{ color:#fff;background:linear-gradient(135deg,var(--wc),var(--wc-dark));box-shadow:0 8px 18px -6px rgba(37,99,235,.6); }

/* ---------- Topbar ---------- */
.wc-topbar{ background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-bottom:1px solid rgba(226,232,240,.7);
  padding:16px 32px;display:flex;align-items:center;justify-content:space-between; }
.wc-title{ font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.02em; }
.wc-subtitle{ font-size:13px;color:#94a3b8;margin-top:2px; }

/* ---------- Botões ---------- */
.wc-btn{ display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:12px;font-size:13px;
  font-weight:600;border:none;cursor:pointer;transition:all .18s var(--ease); }
.wc-btn-primary{ color:#fff;background:linear-gradient(135deg,var(--wc),var(--wc-dark));box-shadow:var(--shadow-glow); }
.wc-btn-primary:hover{ transform:translateY(-1px);box-shadow:0 10px 22px -6px rgba(37,99,235,.6); }
.wc-btn-ghost{ background:#fff;border:1px solid var(--line);color:#475569; }
.wc-btn-ghost:hover{ background:#f8fafc;border-color:#cbd5e1; }

/* ---------- Cards ---------- */
.wc-card{ background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid rgba(226,232,240,.6); }
.wc-card-hover{ transition:all .18s var(--ease); }
.wc-card-hover:hover{ transform:translateY(-3px);box-shadow:0 12px 28px -10px rgba(16,24,40,.18); }

/* ---------- Avatares ---------- */
.wc-avatar{ border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0; }
.wc-avatar-img{ overflow:hidden;background:#0a2a5e; }
.wc-avatar-img img{ width:100%;height:100%;object-fit:cover;display:block; }
.av-blue{ background:linear-gradient(135deg,#3b82f6,#2563eb); }
.av-cyan{ background:linear-gradient(135deg,#06b6d4,#0891b2); }
.av-violet{ background:linear-gradient(135deg,#a855f7,#7c3aed); }
.av-orange{ background:linear-gradient(135deg,#f97316,#ea580c); }
.av-rose{ background:linear-gradient(135deg,#f43f5e,#e11d48); }
.av-emerald{ background:linear-gradient(135deg,#10b981,#059669); }
.av-amber{ background:linear-gradient(135deg,#f59e0b,#d97706); }
.wc-dot{ position:absolute;bottom:-2px;right:-2px;width:13px;height:13px;border-radius:50%;border:2px solid #fff; }
.dot-on{ background:#22c55e; } .dot-away{ background:#f59e0b; } .dot-off{ background:#94a3b8; }

/* ---------- Badges / Tags ---------- */
.wc-badge{ font-size:12px;font-weight:600;padding:3px 10px;border-radius:8px;display:inline-flex;align-items:center;gap:5px; }
.b-blue{ background:#eff6ff;color:#1d4ed8; } .b-green{ background:#ecfdf5;color:#047857; }
.b-amber{ background:#fffbeb;color:#b45309; } .b-rose{ background:#fff1f2;color:#be123c; }
.b-violet{ background:#f5f3ff;color:#6d28d9; } .b-slate{ background:#f1f5f9;color:#475569; }

/* ---------- Tabela ---------- */
.wc-table{ width:100%;font-size:13px;border-collapse:collapse; }
.wc-table thead th{ text-align:left;color:#94a3b8;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  font-weight:600;padding:14px 24px; }
.wc-table tbody td{ padding:14px 24px;border-top:1px solid #f1f5f9; }
.wc-table tbody tr{ transition:background .15s var(--ease); }
.wc-table tbody tr:hover{ background:#f8fafc; }

/* ---------- KPI ---------- */
.wc-kpi-val{ font-size:28px;font-weight:700;color:var(--ink);letter-spacing:-.02em; }
.wc-kpi-label{ font-size:13px;color:#94a3b8; }

/* ============================================================
   ANIMAÇÕES (sensação premium)
   ============================================================ */
@keyframes wcFadeUp{ from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }
@keyframes wcFadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes wcScaleIn{ from{opacity:0;transform:scale(.96);} to{opacity:1;transform:scale(1);} }
@keyframes wcPulse{ 0%{box-shadow:0 0 0 0 rgba(34,197,94,.4);} 70%{box-shadow:0 0 0 10px rgba(34,197,94,0);} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0);} }
@keyframes wcPulseDesligar{ 0%{box-shadow:0 0 0 0 rgba(225,29,72,.6);} 70%{box-shadow:0 0 0 16px rgba(225,29,72,0);} 100%{box-shadow:0 0 0 0 rgba(225,29,72,0);} }
@keyframes wcBounceBadge{ 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-4px);} }
@keyframes wcBlinkWarn{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
@keyframes wcBounce{ 0%,80%,100%{transform:translateY(0);} 40%{transform:translateY(-5px);} }
@keyframes wcShimmer{ 0%{background-position:-400px 0;} 100%{background-position:400px 0;} }

.wc-in{ animation:wcFadeUp .5s var(--ease) both; }
.wc-in-fade{ animation:wcFadeIn .5s var(--ease) both; }
.wc-in-scale{ animation:wcScaleIn .4s var(--ease) both; }
/* stagger: aplique wc-in + um delay */
.d1{ animation-delay:.05s; } .d2{ animation-delay:.10s; } .d3{ animation-delay:.15s; }
.d4{ animation-delay:.20s; } .d5{ animation-delay:.25s; } .d6{ animation-delay:.30s; }
.wc-pulse{ animation:wcPulse 1.8s infinite; }
.wc-pulse-desligar{ animation:wcPulseDesligar 1s infinite; }
.wc-badge-desligar{ animation:wcBlinkWarn .8s infinite; }
.wc-typing span{ display:inline-block;width:6px;height:6px;border-radius:50%;background:#cbd5e1;animation:wcBounce 1.2s infinite; }
.wc-typing span:nth-child(2){ animation-delay:.15s; } .wc-typing span:nth-child(3){ animation-delay:.3s; }
.wc-skeleton{ background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 37%,#f1f5f9 63%);background-size:800px 100%;animation:wcShimmer 1.4s infinite; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}


/* ============================================================
   MODO ESCURO (dark mode) — ativado por html.wc-dark
   Toggle: Configuracoes > Geral > "Modo escuro" (persiste em wc_theme)
   ============================================================ */
html.wc-dark{
  --ink:#e2e8f0; --muted:#94a3b8; --line:#334155;
  --bg:#0f172a; --surface:#1e293b;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.5);
  --shadow-md:0 1px 3px rgba(0,0,0,.5),0 8px 24px -10px rgba(0,0,0,.6);
  color-scheme:dark;
}
html.wc-dark body{ background:var(--bg); color:#cbd5e1; }
html.wc-dark .wc-card{ background:var(--surface); border-color:#334155; }
html.wc-dark .wc-topbar{ background:rgba(15,23,42,.85); border-bottom-color:rgba(51,65,85,.7); }
html.wc-dark .wc-subtitle{ color:#94a3b8; }
html.wc-dark .wc-btn-ghost{ background:#1e293b; border-color:#334155; color:#cbd5e1; }
html.wc-dark .wc-btn-ghost:hover{ background:#334155; border-color:#475569; }
html.wc-dark .tab{ color:#94a3b8; }
html.wc-dark .tab:hover{ background:#1e293b; }
html.wc-dark .tab.sel{ background:rgba(59,130,246,.16); color:#93c5fd; }
html.wc-dark .eq-header{ background:#1e293b; border-color:#334155; }
html.wc-dark .eq-header .eq-name{ color:#e2e8f0; }
html.wc-dark .op-card{ background:#1e293b; border-color:#334155; }
html.wc-dark .wc-table tbody td{ border-top-color:#334155; }
html.wc-dark .wc-table tbody tr:hover{ background:#1e293b; }
/* Campos de formulario */
html.wc-dark .fld{ background:#0f172a; border-color:#334155; color:#e2e8f0; }
html.wc-dark .lbl{ color:#94a3b8; }
html.wc-dark input[type="text"],html.wc-dark input[type="search"],html.wc-dark input[type="email"],
html.wc-dark input[type="tel"],html.wc-dark input[type="password"],html.wc-dark input[type="number"],
html.wc-dark textarea,html.wc-dark select{ background:#0f172a; border-color:#334155; color:#e2e8f0; }
html.wc-dark input::placeholder,html.wc-dark textarea::placeholder{ color:#64748b; }
/* Utilitarios Tailwind usados nas telas */
html.wc-dark .text-slate-900{ color:#f1f5f9!important; }
html.wc-dark .text-slate-800{ color:#e2e8f0!important; }
html.wc-dark .text-slate-700{ color:#cbd5e1!important; }
html.wc-dark .text-slate-600{ color:#94a3b8!important; }
html.wc-dark .text-slate-500{ color:#94a3b8!important; }
html.wc-dark .text-slate-400{ color:#94a3b8!important; }
html.wc-dark .text-slate-300{ color:#64748b!important; }
html.wc-dark .text-gray-500{ color:#94a3b8!important; }
html.wc-dark .text-gray-400{ color:#94a3b8!important; }
html.wc-dark .bg-white{ background:#1e293b!important; }
html.wc-dark .bg-slate-50{ background:#0f172a!important; }
html.wc-dark .bg-slate-100{ background:#1e293b!important; }
html.wc-dark .bg-slate-200{ background:#334155!important; }
html.wc-dark .bg-slate-300{ background:#475569!important; }
html.wc-dark .bg-slate-400{ background:#475569!important; }
html.wc-dark .bg-slate-500{ background:#64748b!important; }
html.wc-dark .bg-gray-50{ background:#0f172a!important; }
html.wc-dark .bg-gray-400{ background:#475569!important; }
html.wc-dark .border-slate-200{ border-color:#334155!important; }
html.wc-dark .border-slate-100{ border-color:#273449!important; }
html.wc-dark .border-slate-50{ border-color:#1e293b!important; }
html.wc-dark .border-slate-300{ border-color:#475569!important; }
html.wc-dark .border-gray-200{ border-color:#334155!important; }


/* ============================================================
   Atendimento (atendimento.html) — dark: classes locais + inline
   ============================================================ */
html.wc-dark .conv-item:hover{ background:#1e293b; }
html.wc-dark .msg-in{ background:#334155; color:#e2e8f0; }
html.wc-dark .dial-field{ background:#0f172a; }
html.wc-dark .dial-field:focus{ background:#0f172a; }
html.wc-dark .tab-chip{ background:#1e293b; color:#cbd5e1; }
html.wc-dark .tab-chip:hover{ background:#334155; }
html.wc-dark .hdr-btn{ background:#1e293b; color:#94a3b8; }
html.wc-dark .hdr-btn:hover{ background:#334155; border-color:#475569; }
html.wc-dark .hdr-drop{ background:#1e293b; }
html.wc-dark .hdr-opt{ color:#cbd5e1; }
html.wc-dark .hdr-opt:hover{ background:#334155; }
html.wc-dark .fpill{ background:#1e293b; color:#94a3b8; }
html.wc-dark .fpill:hover{ background:#334155; }
html.wc-dark .cmode.sel{ background:#1e3a5f; color:#93c5fd; }
html.wc-dark .vu-bar{ background:#334155; }
html.wc-dark .msg-day-pill{ background:#334155 !important; color:#e2e8f0 !important; }
/* Estilos inline claros (popovers/dropdowns/paineis) — so !important vence inline */
html.wc-dark [style*="background:#fff"]{ background:#1e293b !important; }
html.wc-dark [style*="background:#f8fafc"]{ background:#0f172a !important; }
html.wc-dark [style*="background:#f1f5f9"]{ background:#1e293b !important; }
html.wc-dark [style*="background:#e2e8f0"]{ background:#334155 !important; }