/* Maxfem OS - design system unificado (tokens + base).
   Mesma identidade da Comunidade e do CRM: claro, rosa, Inter no texto e Poppins nos titulos.
   Este arquivo entra ANTES do <style> de cada pagina; a pagina so traduz seus componentes pra estes tokens. */
: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 pelas paginas */
  --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);
  --glow:0 8px 20px rgba(237,43,117,.24);
}

/* base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:0}
h1{font-weight:500;color:var(--rose-950)}
button,input,select,textarea{font-family:inherit}
img{max-width:100%}
::selection{background:var(--rose-100);color:var(--rose-900)}

/* scrollbar fina rosa */
*{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}

/* foco acessivel com halo rosa */
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(237,43,117,.28)}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--rose-500)}

/* movimento reduzido */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE FIRST — estes paineis sao usados no celular tanto quanto no desktop.
   Regras pensadas primeiro pro telefone; o desktop so acrescenta acima de 640px.
   Nao muda estrutura, ids nem classes usadas pelo JS: so apresentacao.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nada de rolagem horizontal na pagina inteira: quem rola e o bloco largo. */
html,body{overflow-x:hidden;max-width:100%}
/* Area segura do iPhone (notch e barra inferior). */
.topbar{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
.container{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
/* Toque: sem realce azul e sem efeitos de mouse que so atrapalham no dedo. */
button,a,[role=button],.tab,.channel-tab{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media(hover:none) and (pointer:coarse){
  .card:hover,.panel:hover,.kpi-card:hover,tbody tr:hover{transform:none}
  button,.tab,.channel-tab,select,.btn{min-height:40px}
}

@media(max-width:640px){
  /* Barra do topo empilha marca e acoes sem estourar a linha. */
  .topbar{flex-wrap:wrap;gap:8px;padding-top:10px;padding-bottom:10px}
  .topbar .topbar-right,.topbar .actions{margin-left:auto}
  /* Filtros: trilho rolavel em vez de quebrar em 3 linhas. */
  .filters-bar,.filters,.toolbar{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .filters-bar::-webkit-scrollbar,.filters::-webkit-scrollbar,.toolbar::-webkit-scrollbar{display:none}
  .filters-bar>*,.filters>*,.toolbar>*{flex:0 0 auto}
  /* Abas viram trilho rolavel. */
  .tabs,.tab-bar,.channel-nav,.seg{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .tabs::-webkit-scrollbar,.tab-bar::-webkit-scrollbar,.channel-nav::-webkit-scrollbar,.seg::-webkit-scrollbar{display:none}
  .tabs>*,.tab-bar>*,.channel-nav>*,.seg>*{flex:0 0 auto}
  /* Grades viram coluna unica. */
  .grid,.kpi-grid,.cards,.kpis,.row-2,.row-3,.row-4{grid-template-columns:1fr!important}
  /* Cartoes e miolo com respiro proporcional a tela. */
  .container{padding:14px 12px 40px}
  .card,.panel,.kpi-card,.box{padding:14px;border-radius:14px}
  h1{font-size:22px;line-height:1.15}
  h2{font-size:17px}
  .kpi-value{font-size:20px}
  /* Tabela larga rola dentro do cartao, nunca empurra a pagina. */
  .card,.panel,.table-wrap,.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:560px}
  thead th{padding:8px 10px;font-size:10px}
  tbody td{padding:9px 10px;font-size:11.5px}
  /* Modais ocupam a tela com folga e rolam por dentro. */
  .modal,.modal-box,.dialog,.sheet{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 32px)!important;overflow-y:auto}
  /* 16px no campo evita o zoom automatico do Safari ao focar. */
  input,select,textarea{font-size:16px!important}
  /* Botoes de linha inteira quando sozinhos no rodape de um formulario. */
  .login-box,.login-btn,.btn-block{width:100%}
}