/* ============================================================
   Maxfem OS - design system unificado (claro, rosa, Poppins nos titulos)
   Referencia: comunidade.maxfem.cloud e crm.maxfem.cloud.
   Este arquivo entra ANTES do <style> de cada pagina: fornece os tokens
   e as regras base; a pagina so ajusta o que e especifico dela.
   ============================================================ */
:root{
  --rose-950:#4a0a25;--rose-900:#7b1042;--rose-800:#9a1749;--rose-700:#c41e61;--rose-600:#d92368;--rose-500:#ed2b75;
  --rose-200:#f8a4c8;--rose-100:#fce4ef;--rose-50:#fff5f9;--candy:#ff6b9d;
  --bg:#fbf7f9;              /* fundo da pagina */
  --paper:#ffffff;           /* cards, barras */
  --line:#eadfe4;--line-soft:#f1e9ed;
  --ink:#1a1a2e;--ink-2:#4a4a5a;--muted:#8e8e9e;
  --green:#217a56;--green-bg:#e9f6ef;--amber:#9a6217;--amber-bg:#fff3d8;--red:#b42318;--red-bg:#fde8e8;--blue:#385c91;--blue-bg:#eaf0fa;
  --radius:18px;--radius-sm:12px;
  --shadow:0 4px 20px rgba(61,28,43,.035);--shadow-lg:0 24px 70px rgba(71,31,50,.16);
  --font:'Inter',system-ui,-apple-system,sans-serif;--serif:'Poppins','Inter',system-ui,sans-serif;

  /* Gradientes reutilizados */
  --grad-primary:linear-gradient(135deg,#ed2b75,#ff6b9d);
  --grad-primary-hover:linear-gradient(135deg,#c41e61,#ed2b75);
  --grad-tab:linear-gradient(135deg,#ed2b75,#c41e61);
  --grad-wine:linear-gradient(128deg,#4a0a25,#8d1f50 62%,#c54f7c);

  /* Apelidos legados usados pelas paginas antigas do dashboard (mapeiam pros tokens acima) */
  --rosa:var(--rose-500);--rosa-claro:var(--rose-200);--rosa-petala:var(--rose-100);--rosa-profundo:var(--rose-700);
  --dark:var(--ink);--white:#ffffff;--cream:var(--rose-50);
  --gray-700:var(--ink-2);--gray-500:#6b6b7a;--gray-400:var(--muted);--gray-200:var(--line);--gray-100:var(--line-soft);--gray-50:var(--bg);
  --orange:var(--amber);--orange-bg:var(--amber-bg);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:14px/1.5 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer}
img{max-width:100%}
::selection{background:var(--rose-100);color:var(--mx-rose-900,var(--rose-900))}
*{scrollbar-width:thin;scrollbar-color:rgba(237,43,117,.35) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:rgba(237,43,117,.3);border-radius:8px}
*::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(237,43,117,.28)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- Tipografia ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0}
.mx-page-title,.page-title{font:500 32px/1.05 var(--serif);color:var(--mx-rose-950,var(--rose-950));margin:0}
.eyebrow{display:block;color:var(--mx-rose-700,var(--rose-700));font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;margin-bottom:7px}
.muted{color:var(--muted)}
.mono{font-family:"SF Mono",SFMono-Regular,ui-monospace,Menlo,monospace}

/* ---------- Barra superior interna (escondida quando embutido: cada pagina mantem sua regra html.mx-embed) ---------- */
.topbar{position:sticky;top:0;z-index:100;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 32px;background:var(--mx-surface,rgba(255,255,255,.92));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);box-shadow:none;color:var(--ink)}
.brand-row{display:flex;align-items:center;gap:14px;min-width:0}
.logo-img{height:28px;width:auto;display:block}
.brand-divider{width:1px;height:28px;background:var(--line)}
.brand-titles h1{font:600 15px/1.15 var(--serif);color:var(--mx-rose-950,var(--rose-950));letter-spacing:0}
.brand-titles .subtitle{font:600 10px/1 var(--font);letter-spacing:.13em;text-transform:uppercase;color:var(--mx-rose-700,var(--rose-700));margin-top:5px}
.topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.status-live,.status-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--ink-2);padding:6px 10px;background:var(--mx-surface,#fff);border:1px solid var(--line);border-radius:20px}
.live-dot,.status-dot{width:7px;height:7px;border-radius:50%;background:#2fbf71;box-shadow:0 0 0 3px rgba(47,191,113,.18)}
.status-dot.offline{background:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.18)}
.topbar .btn-logout,.topbar .logout-btn,.topbar .topbar-btn{background:var(--mx-surface,#fff);border:1px solid var(--line);color:var(--ink-2);padding:7px 12px;border-radius:10px;font-size:12px;font-weight:700;transition:.16s}
.topbar .btn-logout:hover,.topbar .logout-btn:hover,.topbar .topbar-btn:hover{border-color:var(--rose-200);color:var(--mx-rose-800,var(--rose-800))}

/* ---------- Abas de canal: cor do canal so no sublinhado/ponto da aba ativa ---------- */
.channel-nav{background:var(--mx-surface,rgba(255,255,255,.92));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);padding:0 32px;display:flex;align-items:center;gap:4px;position:sticky;top:72px;z-index:95;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none}
.channel-nav::-webkit-scrollbar{display:none}
.channel-tab{display:inline-flex;align-items:center;gap:8px;padding:15px 16px;font:700 13px/1 var(--font);color:var(--muted);background:transparent;border:0;border-bottom:3px solid transparent;cursor:pointer;transition:color .16s,background .16s;text-decoration:none;scroll-snap-align:start;flex-shrink:0;min-height:48px;-webkit-tap-highlight-color:transparent}
.channel-tab::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .16s}
.channel-tab:hover{color:var(--mx-rose-900,var(--rose-900));background:var(--rose-50)}
.channel-tab.active{color:var(--ink);border-bottom-color:var(--tab-color,var(--rose-500))}
.channel-tab.active::before{background:var(--tab-color,var(--rose-500));box-shadow:0 0 0 3px color-mix(in srgb,var(--tab-color,var(--rose-500)) 18%,transparent)}
.channel-tab .badge-soon{display:inline-block;padding:2px 7px;border-radius:20px;font-size:9px;font-weight:700;text-transform:uppercase;background:var(--amber-bg);color:var(--mx-amber,var(--amber));letter-spacing:.3px}
@media(max-width:640px){.channel-nav{padding:0 12px;top:auto;position:static;gap:2px}.channel-tab{padding:12px 12px;font-size:12px}}

/* ---------- Barra de filtros / segmentado ---------- */
.filters-bar{background:var(--mx-surface,rgba(255,255,255,.92));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);padding:12px 32px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:sticky;top:123px;z-index:90}
.filter-group,.segmented,.tabs{display:inline-flex;align-items:center;gap:4px;background:var(--mx-surface,#fffafc);border:1px solid var(--line);border-radius:14px;padding:4px}
.filter-btn,.segmented button,.tabs .tab{background:transparent;border:0;padding:8px 14px;border-radius:10px;font:700 13px/1.2 var(--font);color:var(--muted);cursor:pointer;transition:.16s;display:inline-flex;align-items:center;gap:6px}
.filter-btn:hover,.segmented button:hover,.tabs .tab:hover{color:var(--mx-rose-900,var(--rose-900));background:rgba(237,43,117,.08)}
.filter-btn.active,.segmented button.active,.tabs .tab.active{background:var(--grad-tab);color:#fff;box-shadow:0 8px 20px rgba(237,43,117,.24)}
.custom-range{display:inline-flex;align-items:center;gap:6px;background:var(--mx-surface,#fffafc);border:1px solid var(--line);padding:4px 10px;border-radius:14px}
.custom-range-label{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-right:2px}
.custom-range-sep{color:var(--muted);font-weight:600;font-size:13px}
.custom-date{background:var(--mx-surface,#fff);border:1px solid var(--line);border-radius:10px;padding:7px 10px;font:500 12.5px var(--font);color:var(--ink);cursor:pointer;outline:none;transition:.16s}
.custom-date:focus{border-color:var(--rose-500);box-shadow:0 0 0 3px rgba(237,43,117,.16)}
.custom-apply{background:var(--grad-primary);color:#fff;border:0;border-radius:10px;padding:8px 12px;font:700 12px var(--font);cursor:pointer;box-shadow:0 8px 20px rgba(237,43,117,.24);transition:.16s}
.custom-apply:hover{background:var(--grad-primary-hover);transform:translateY(-1px)}
.custom-apply:disabled{background:var(--line);color:var(--muted);box-shadow:none;cursor:not-allowed;transform:none}
.refresh-btn{background:var(--grad-primary);color:#fff;border:0;border-radius:12px;padding:9px 14px;font:700 12.5px var(--font);cursor:pointer;display:inline-flex;align-items:center;gap:6px;box-shadow:0 8px 20px rgba(237,43,117,.24);transition:.16s}
.refresh-btn:hover{background:var(--grad-primary-hover);transform:translateY(-1px)}
.refresh-btn.loading{opacity:.6;cursor:wait}
.auto-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);cursor:pointer;user-select:none}
.auto-toggle input,input[type=checkbox],input[type=radio]{accent-color:#ed2b75;cursor:pointer}

/* ---------- Botoes ---------- */
.btn,.btn-outline,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:10px 16px;font:700 13px/1.2 var(--font);cursor:pointer;background:var(--mx-surface,#fff);color:var(--ink-2);transition:.16s}
.btn:hover,.btn-outline:hover,.btn-secondary:hover{border-color:var(--rose-200);color:var(--mx-rose-800,var(--rose-800));transform:translateY(-1px)}
.btn-primary,.btn.primary,.login-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--grad-primary);color:#fff;border:0;border-radius:12px;padding:11px 16px;font:700 13px/1.2 var(--font);cursor:pointer;box-shadow:0 8px 20px rgba(237,43,117,.24);transition:.16s}
.btn-primary:hover,.btn.primary:hover,.login-btn:hover{background:var(--grad-primary-hover);transform:translateY(-1px)}
.btn-soft,.btn.soft{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--rose-100);color:var(--mx-rose-800,var(--rose-800));border:0;border-radius:12px;padding:10px 16px;font:700 13px/1.2 var(--font);cursor:pointer;transition:.16s}
.btn-soft:hover,.btn.soft:hover{background:var(--mx-surface-alt,#f6d7e3)}
.btn-danger,.btn.danger{color:var(--mx-red,var(--red))}
.btn:disabled,.btn-primary:disabled,.login-btn:disabled,.btn-soft:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.sm,.btn-sm{padding:7px 12px;font-size:12px;border-radius:10px}

/* ---------- Campos ---------- */
input[type=text],input[type=number],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=url],input[type=date],input[type=datetime-local],input[type=time],select,textarea,.input,.login-input{background:var(--mx-surface,#fff);border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--ink);font:500 13px/1.3 var(--font);outline:none;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus,.input:focus,.login-input:focus{border-color:#ed2b75;box-shadow:0 0 0 3px rgba(237,43,117,.16)}
input::placeholder,textarea::placeholder{color:var(--mx-muted,#b2a6ac)}
label{font-size:12px;font-weight:600;color:var(--ink-2)}
textarea{resize:vertical}

/* ---------- Conteudo ---------- */
.container{max-width:1280px;margin:0 auto;padding:28px 32px 70px}
.card,.panel{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:border-color .25s,box-shadow .25s}
.card:hover{border-color:var(--mx-line,#f3dce5)}
.section-title{font:600 15px/1.2 var(--serif);color:var(--mx-rose-950,var(--rose-950));margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:10px}
.section-title .icon{width:24px;height:24px;background:var(--rose-100);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.section-title .icon svg{width:13px;height:13px;fill:none;stroke:var(--rose-700);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.section-title .loading-tag{font:500 11px var(--font);color:var(--muted);margin-left:8px}

/* KPIs: cartao branco; o de destaque (.accent) usa o gradiente vinho */
.kpi-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);padding:20px;position:relative;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s}
.kpi-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(71,31,50,.10);border-color:var(--mx-line,#f3dce5)}
.kpi-card::before{content:none}
.kpi-card.accent{background:var(--grad-wine);color:#fff;border-color:transparent}
.kpi-card.accent::after{content:"";position:absolute;width:160px;height:160px;border:1px solid rgba(255,255,255,.16);border-radius:50%;right:-50px;top:-80px;box-shadow:0 0 0 26px rgba(255,255,255,.035)}
.kpi-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}
.kpi-card.accent .kpi-label{color:#ffd7e7}
.kpi-value{font:600 28px/1.1 var(--serif);letter-spacing:-.02em;color:var(--mx-rose-950,var(--rose-950))}
.kpi-card.accent .kpi-value{color:#fff}
.kpi-delta{font-size:12px;font-weight:600;margin-top:10px;display:flex;align-items:center;gap:4px}
.kpi-delta.up{color:var(--mx-green,var(--green))}.kpi-delta.down{color:var(--mx-red,var(--red))}.kpi-delta.flat{color:var(--muted)}
.kpi-card.accent .kpi-delta{color:rgba(255,255,255,.9)}
.kpi-sub{font-size:11px;color:var(--muted);margin-top:6px;font-weight:500}
.kpi-card.accent .kpi-sub{color:rgba(255,255,255,.72)}
.hero-wine,.range-banner,.insight{background:var(--grad-wine);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero-wine::after,.range-banner::after{content:"";position:absolute;width:240px;height:240px;border:1px solid rgba(255,255,255,.16);border-radius:50%;right:-73px;top:-112px;box-shadow:0 0 0 34px rgba(255,255,255,.035),0 0 0 70px rgba(255,255,255,.025);pointer-events:none}

/* ---------- Tabelas ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{background:transparent;color:var(--muted);font:700 11px/1.2 var(--font);text-transform:uppercase;letter-spacing:.06em;padding:10px 14px;text-align:left;border-bottom:1px solid var(--line)}
tbody td{padding:10px 14px;border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--ink)}
tbody tr:nth-child(even){background:transparent}
tbody tr:hover{background:var(--rose-50)}
td.name{font-weight:600;color:var(--ink)}
td.highlight{font-weight:700;color:var(--mx-rose-700,var(--rose-700))}
td.revenue{font-weight:600;color:var(--mx-rose-900,var(--rose-900))}
.table-wrap{border-radius:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-soft);background:var(--mx-surface,#fff)}
.table-empty{padding:20px;text-align:center;color:var(--muted);font-size:12px}

/* ---------- Badges / status ---------- */
.badge,.pill,.tag{display:inline-flex;align-items:center;gap:5px;border-radius:20px;font-size:10px;font-weight:700;padding:3px 9px;background:var(--rose-100);color:var(--mx-rose-900,var(--rose-900));letter-spacing:.02em;white-space:nowrap}
.badge.ok,.badge.success,.badge.green,.pill.ok,.tag.ok{background:var(--green-bg);color:var(--mx-green,var(--green))}
.badge.warn,.badge.amber,.badge.orange,.pill.warn,.tag.warn{background:var(--amber-bg);color:var(--mx-amber,var(--amber))}
.badge.err,.badge.error,.badge.red,.badge.danger,.pill.err,.tag.err{background:var(--red-bg);color:var(--mx-red,var(--red))}
.badge.info,.badge.blue,.pill.info,.tag.info{background:var(--blue-bg);color:var(--mx-blue,var(--blue))}
.badge.neutral,.pill.neutral,.tag.neutral{background:var(--rose-100);color:var(--mx-rose-900,var(--rose-900))}
.status-pill{border-radius:14px;padding:16px;text-align:center;transition:transform .15s;border:1px solid var(--line-soft);background:var(--mx-surface,#fff)}
.status-pill:hover{transform:translateY(-2px)}
.status-pill.green{background:var(--green-bg);border-color:transparent}
.status-pill.blue{background:var(--blue-bg);border-color:transparent}
.status-pill.orange{background:var(--amber-bg);border-color:transparent}
.status-pill.red{background:var(--red-bg);border-color:transparent}
.pill-value{font:600 24px/1.1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.status-pill.green .pill-value{color:var(--mx-green,var(--green))}
.status-pill.blue .pill-value{color:var(--mx-blue,var(--blue))}
.status-pill.orange .pill-value{color:var(--mx-amber,var(--amber))}
.status-pill.red .pill-value{color:var(--mx-red,var(--red))}
.pill-label{font-size:11px;font-weight:500;color:var(--ink-2);margin-top:4px}

/* ---------- Avisos ---------- */
.loading{text-align:center;padding:80px 20px;color:var(--muted)}
.loading-badge{display:inline-block;background:var(--rose-100);color:var(--mx-rose-900,var(--rose-900));padding:8px 16px;border-radius:20px;font-weight:700;font-size:12px;margin-bottom:14px}
.error{background:var(--red-bg);border:1px solid var(--mx-line,#f5c2cb);border-radius:var(--radius-sm);padding:14px 18px;color:var(--mx-red,var(--red));font-weight:500;margin-bottom:20px}
.note{background:var(--rose-50);border:1px solid var(--rose-100);border-left:3px solid var(--rose-500);border-radius:0 12px 12px 0;padding:12px 16px;font-size:12.5px;color:var(--ink-2);margin-top:14px;line-height:1.55}
.note strong{color:var(--mx-rose-900,var(--rose-900));font-weight:700}
.footer{margin-top:40px;padding-top:24px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);flex-wrap:wrap;gap:8px}
.footer .brand{color:var(--mx-rose-700,var(--rose-700));font-weight:700}

/* ---------- Login ---------- */
.login-overlay{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px;isolation:isolate;overflow:hidden}
.login-overlay::before{content:"";position:absolute;z-index:-1;width:780px;height:780px;border-radius:50%;border:1px solid rgba(237,43,117,.16);box-shadow:0 0 0 70px rgba(237,43,117,.025),0 0 0 140px rgba(237,43,117,.018),0 0 160px rgba(237,43,117,.12);right:-240px;top:-430px}
.login-box{width:100%;max-width:400px;background:var(--mx-surface,#fff);border:1px solid var(--line);border-radius:25px;padding:32px 28px;box-shadow:0 35px 120px rgba(71,31,50,.12);text-align:center}
.login-logo{height:30px;width:auto;margin:0 auto 18px;display:block}
.login-box h2{font:600 22px/1.1 var(--serif);color:var(--mx-rose-950,var(--rose-950));letter-spacing:-.01em}
.login-box p{font-size:12.5px;color:var(--muted);margin:6px 0 20px}
.login-input{width:100%;padding:12px 14px;font-size:14px;margin-bottom:12px}
.login-btn{width:100%;padding:13px 16px;font-size:14px}
.login-err{color:var(--mx-red,var(--red));font-size:12px;font-weight:500;margin-top:8px;min-height:16px}

/* ---------- Responsivo ---------- */
@media(max-width:960px){
  .topbar{padding:10px 16px;min-height:64px}
  .filters-bar{padding:10px 14px;top:auto;position:static;gap:8px}
  .container{padding:18px 14px 40px}
  .card,.panel,.kpi-card{padding:16px}
  .kpi-value{font-size:22px}
  thead th{padding:8px 10px;font-size:10px}
  tbody td{padding:8px 10px;font-size:11.5px}
}
@media(max-width:600px){
  .logo-img{height:24px}
  .brand-divider{height:22px}
}