@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");
/* Manrope is the Nexus typeface (regular / medium / semibold, matching the source kit).
   Served from Google Fonts. If Meio Comunicação has licensed binaries, drop the .woff2 files
   into assets/fonts/ and replace this @import with local @font-face rules. */
:root{--font-sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:"JetBrains Mono","SF Mono",ui-monospace,monospace}

:root{
/* ── Brand — sampled from the Meio Comunicação signature logo ───────────── */
--meio-blue:#063586;--meio-gold:#f8c400;--meio-ink:#0b0d12;

/* ── Blue ramp. 900 is the Meio logo blue; 600 is the interactive action blue. */
--blue-50:#eef5ff;--blue-100:#dce9fd;--blue-200:#bbd5fb;--blue-300:#8cb9f7;--blue-400:#4e97f2;
--blue-500:#2b82ec;--blue-600:#1668e3;--blue-700:#1153b8;--blue-800:#0c4192;--blue-900:#063586;--blue-950:#04225a;

/* ── Sky — the bright secondary blue used in gradients, charts and toggles */
--sky-100:#e2f4ff;--sky-300:#8fd6ff;--sky-400:#38b6ff;--sky-500:#199ff5;--sky-600:#0d84d4;

/* ── Gold — Meio accent. Used sparingly: highlights, awards, gold-tier states */
--gold-50:#fff8e1;--gold-100:#ffefb8;--gold-300:#ffdf70;--gold-400:#ffd233;--gold-500:#f8c400;--gold-600:#d9a300;--gold-700:#a87c00;

/* ── Neutral ramp */
--n-0:#ffffff;--n-25:#fafbfc;--n-50:#f4f5f7;--n-100:#edeff3;--n-200:#e2e5eb;--n-300:#cbd1da;
--n-400:#a3abb8;--n-500:#79828f;--n-600:#5a6472;--n-700:#3e4653;--n-800:#252b35;--n-900:#14181f;--n-950:#0b0d12;

/* ── Semantic scales */
--success-50:#e8f7f0;--success-100:#cfeee0;--success-500:#1d9a6c;--success-600:#14855f;--success-700:#0f6b4d;
--info-50:#e8f1fe;--info-100:#d3e4fd;--info-500:#2b82ec;--info-600:#1668e3;--info-700:#1153b8;
--warning-50:#fff4db;--warning-100:#ffe7ae;--warning-500:#d39b09;--warning-600:#a4700a;--warning-700:#7d5507;
--danger-50:#fde9ec;--danger-100:#fad2d9;--danger-500:#d2314f;--danger-600:#b21f3c;--danger-700:#8e1730;
--process-50:#edf0fe;--process-100:#dbe1fd;--process-600:#4f63d2;--process-700:#3f50b0;

/* ── Semantic aliases — always prefer these over raw ramp values ─────────── */
--bg-app:var(--n-50);
--bg-canvas:var(--n-25);
--surface-card:var(--n-0);
--surface-sunken:var(--n-50);
--surface-raised:var(--n-0);
--surface-inverse:var(--n-900);
--surface-brand:var(--blue-900);
--surface-accent:var(--blue-600);
--surface-accent-soft:var(--blue-50);
--surface-hover:var(--n-50);
--surface-active:var(--n-100);
--surface-overlay:rgba(11,13,18,.44);

--text-strong:var(--n-950);
--text-body:var(--n-800);
--text-muted:var(--n-500);
--text-subtle:var(--n-400);
--text-on-accent:#ffffff;
--text-on-brand:#ffffff;
--text-accent:var(--blue-600);
--text-link:var(--blue-600);
--text-link-hover:var(--blue-800);

--border-subtle:var(--n-100);
--border-default:var(--n-200);
--border-strong:var(--n-300);
--border-accent:var(--blue-600);
--border-focus:var(--blue-600);

--chart-1:var(--blue-900);--chart-2:var(--sky-400);--chart-3:var(--success-500);
--chart-4:var(--gold-500);--chart-5:var(--process-600);--chart-grid:var(--n-200);

--status-won-bg:var(--success-50);--status-won-fg:var(--success-600);
--status-new-bg:var(--info-50);--status-new-fg:var(--info-600);
--status-negotiating-bg:var(--sky-100);--status-negotiating-fg:var(--sky-600);
--status-process-bg:var(--process-50);--status-process-fg:var(--process-600);
--status-lost-bg:var(--danger-50);--status-lost-fg:var(--danger-600);
--status-hold-bg:var(--warning-50);--status-hold-fg:var(--warning-600);
--status-neutral-bg:var(--n-100);--status-neutral-fg:var(--n-600);

--gradient-accent:linear-gradient(135deg,var(--sky-400) 0%,var(--blue-600) 100%);
--gradient-brand:linear-gradient(135deg,var(--blue-700) 0%,var(--blue-950) 100%);
--gradient-fade:linear-gradient(180deg,rgba(255,255,255,0) 0%,var(--surface-card) 76%);
}

[data-theme="dark"]{
--bg-app:#0b0d12;
--bg-canvas:#0b0d12;
--surface-card:#14181f;
--surface-sunken:#0f1319;
--surface-raised:#1b212b;
--surface-inverse:var(--n-0);
--surface-brand:var(--blue-900);
--surface-accent:var(--blue-500);
--surface-accent-soft:rgba(43,130,236,.14);
--surface-hover:#1b212b;
--surface-active:#222936;
--surface-overlay:rgba(4,6,10,.66);

--text-strong:#f3f5f8;
--text-body:#d7dce4;
--text-muted:#8e97a5;
--text-subtle:#6b7482;
--text-accent:var(--blue-300);
--text-link:var(--blue-300);
--text-link-hover:var(--sky-300);

--border-subtle:#1e242e;
--border-default:#272e3a;
--border-strong:#39424f;

--chart-1:var(--sky-400);--chart-2:var(--blue-400);--chart-grid:#272e3a;

--status-won-bg:rgba(29,154,108,.16);--status-won-fg:#4fd3a0;
--status-new-bg:rgba(43,130,236,.16);--status-new-fg:#7db4f7;
--status-negotiating-bg:rgba(56,182,255,.16);--status-negotiating-fg:#7fd2ff;
--status-process-bg:rgba(79,99,210,.18);--status-process-fg:#9fabf0;
--status-lost-bg:rgba(210,49,79,.16);--status-lost-fg:#f28aa0;
--status-hold-bg:rgba(211,155,9,.16);--status-hold-fg:#e9c157;
--status-neutral-bg:#1e242e;--status-neutral-fg:#98a1af;

--gradient-fade:linear-gradient(180deg,rgba(20,24,31,0) 0%,var(--surface-card) 76%);
}

:root{
--text-11:11px;--text-12:12px;--text-13:13px;--text-14:14px;--text-16:16px;--text-18:18px;
--text-20:20px;--text-24:24px;--text-28:28px;--text-32:32px;--text-40:40px;--text-48:48px;--text-56:56px;

--leading-tight:1.08;--leading-snug:1.2;--leading-normal:1.45;--leading-relaxed:1.6;

--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;

--tracking-tight:-.022em;--tracking-snug:-.014em;--tracking-normal:0;--tracking-wide:.06em;

/* Semantic type roles — size / line-height / weight / tracking */
--type-display:var(--weight-bold) var(--text-56)/var(--leading-tight) var(--font-sans);
--type-h1:var(--weight-bold) var(--text-32)/var(--leading-snug) var(--font-sans);
--type-h2:var(--weight-semibold) var(--text-24)/var(--leading-snug) var(--font-sans);
--type-h3:var(--weight-semibold) var(--text-20)/1.3 var(--font-sans);
--type-h4:var(--weight-semibold) var(--text-16)/1.35 var(--font-sans);
--type-body:var(--weight-regular) var(--text-16)/var(--leading-normal) var(--font-sans);
--type-body-sm:var(--weight-regular) var(--text-14)/var(--leading-normal) var(--font-sans);
--type-ui:var(--weight-medium) var(--text-14)/1.3 var(--font-sans);
--type-ui-sm:var(--weight-medium) var(--text-13)/1.3 var(--font-sans);
--type-caption:var(--weight-regular) var(--text-12)/1.35 var(--font-sans);
--type-metric:var(--weight-bold) var(--text-28)/1.1 var(--font-sans);
--type-mono:var(--weight-regular) var(--text-13)/1.4 var(--font-mono);
}

:root{
--space-0:0px;--space-1:2px;--space-2:4px;--space-3:6px;--space-4:8px;--space-5:10px;--space-6:12px;
--space-7:14px;--space-8:16px;--space-9:20px;--space-10:24px;--space-11:28px;--space-12:32px;
--space-14:40px;--space-16:48px;--space-20:64px;--space-24:80px;

/* Layout */
--layout-gutter:20px;
--layout-grid-gap:16px;
--layout-max:1440px;
--layout-nav-h:64px;
--layout-bottomnav-h:64px;
--layout-page-pad-x:24px;
--layout-page-pad-y:20px;

/* Control heights */
--control-h-sm:32px;--control-h-md:40px;--control-h-lg:48px;
--control-pad-x-sm:12px;--control-pad-x-md:16px;--control-pad-x-lg:20px;
--tap-min:44px;

--card-pad:16px;--card-pad-lg:20px;
}

:root{
--radius-xs:6px;--radius-sm:8px;--radius-md:10px;--radius-lg:12px;
--radius-xl:16px;--radius-2xl:20px;--radius-3xl:24px;--radius-pill:999px;

--radius-control:10px;
--radius-card:16px;
--radius-panel:20px;
--radius-badge:8px;
--radius-media:12px;
--radius-avatar:999px;
}

:root{
--shadow-xs:0 1px 2px rgba(11,13,18,.04);
--shadow-sm:0 1px 3px rgba(11,13,18,.05),0 1px 2px rgba(11,13,18,.03);
--shadow-md:0 4px 12px rgba(11,13,18,.06);
--shadow-lg:0 12px 28px rgba(11,13,18,.08);
--shadow-xl:0 24px 56px rgba(11,13,18,.10);
--shadow-accent:0 8px 20px rgba(22,104,227,.28);
--shadow-focus:0 0 0 3px rgba(22,104,227,.18);
--shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);
--blur-glass:saturate(140%) blur(18px); /* @kind other */
}
[data-theme="dark"]{
--shadow-xs:0 1px 2px rgba(0,0,0,.4);
--shadow-sm:0 1px 3px rgba(0,0,0,.45);
--shadow-md:0 4px 14px rgba(0,0,0,.5);
--shadow-lg:0 14px 32px rgba(0,0,0,.55);
--shadow-xl:0 28px 60px rgba(0,0,0,.6);
--shadow-focus:0 0 0 3px rgba(78,151,242,.3);
--shadow-inset:inset 0 1px 0 rgba(255,255,255,.04);
}

:root{
--ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
--duration-instant:80ms; /* @kind other */
--duration-fast:140ms; /* @kind other */
--duration-base:200ms; /* @kind other */
--duration-slow:320ms; /* @kind other */
--duration-slower:520ms; /* @kind other */
--transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard); /* @kind other */
--press-scale:.98; /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
--duration-instant:0ms; /* @kind other */
--duration-fast:0ms; /* @kind other */
--duration-base:0ms; /* @kind other */
--duration-slow:0ms; /* @kind other */
--duration-slower:0ms; /* @kind other */
--press-scale:1; /* @kind other */
}}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg-app);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:2px}
::selection{background:var(--blue-100);color:var(--blue-900)}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}



  html,body{height:100%}body{margin:0}
  /* Regra do próprio kit (ui_kits/admin/index.html): as telas de duas colunas viram uma abaixo de 1100px. */
  @media (max-width:1100px){.nx-dash{grid-template-columns:minmax(0,1fr)!important}}
  /* Hoje: destaque e atalhos lado a lado; empilham quando a tela estreita. */
  @media (max-width:1300px){.nx-topo{grid-template-columns:minmax(0,1fr)!important}}
  @media (min-width:1301px){.nx-topo .nx-spot{grid-template-columns:minmax(0,1fr)!important}}
  /* Celular: atalhos em 3 colunas, só número e nome (o detalhe fica na tela de destino). */
  @media (max-width:760px){.nx-atalhos{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
    .nx-atalho{min-height:0!important;padding:10px!important;gap:2px!important}.nx-atalho-ico,.nx-atalho-sub{display:none!important}}
  .nx-atalho:hover{background:var(--surface-hover)!important}
  .nx-atalho:focus-visible{outline:2px solid var(--border-accent);outline-offset:2px}
.nx-marca{border-radius:var(--radius-md)}.nx-marca:hover{opacity:.82}.nx-marca:focus-visible{outline:2px solid var(--border-accent);outline-offset:4px}
  /* Celular: só CSS, sem mudar o HTML das telas do kit. */
  @media (max-width:760px){
    [role=tablist]{max-width:100%;overflow-x:auto;scrollbar-width:none}
    div:has(> div > h1) > div:last-child{flex-shrink:1!important;flex-wrap:wrap;max-width:100%}
    /* Calendários de 7 colunas cabem na largura do celular: coluna da semana/hora estreita, dias dividem o resto. */
    [style*="48px repeat(7"]{grid-template-columns:30px repeat(7,minmax(0,1fr))!important;min-width:0!important}
    [style*="48px repeat(7"] > *{min-width:0;overflow:hidden}
    [style*="48px repeat(7"] [style*="left: 4px; right: 4px"]{left:1px!important;right:1px!important}
    [style*="48px repeat(7"] [style*="padding: 6px 8px"]{padding:4px 3px!important}
    [style*="48px repeat(7"] [style*="padding-right: 8px"]{padding-right:3px!important}
    header:has(> nav){flex-wrap:wrap;height:auto!important;padding:10px 14px!important;row-gap:10px}
    header:has(> nav) > nav{order:3;flex-basis:100%;justify-content:flex-start!important}
  }
  /* Grades auxiliares usadas pelo módulo antigo (serão removidas quando todos migrarem). */
  .nx-two{display:grid;grid-template-columns:minmax(0,2.55fr) minmax(0,1fr);gap:var(--layout-grid-gap);align-items:start}
  .nx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--layout-grid-gap)}
  .nx-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-10)}
  .nx-form3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}
  .nx-form2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
  @media (max-width:1100px){.nx-two{grid-template-columns:minmax(0,1fr)}}
  /* Hoje no celular, como produção (app.html:1373 e 1405): KPIs em 2 colunas abaixo de 900px,
     gráfico e destaque um embaixo do outro; a lista de clientes do painel vira ficha (regra .nx-fichas abaixo). */
  @media (max-width:900px){[style*="repeat(auto-fit, minmax(180px, 1fr))"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
  @media (max-width:760px){[style*="minmax(0px, 1.35fr) minmax(0px, 1fr)"]{grid-template-columns:minmax(0,1fr)!important}}
  /* Celular: janelas viram folha de baixo, como em produção (o painel lateral fica de fora). */
  @media (max-width:760px){
    div:has(> [role=dialog][aria-modal=true]:not([data-painel])){place-items:end center!important;padding:0!important}
    [role=dialog][aria-modal=true]:not([data-painel]){max-width:100%!important;max-height:92%!important;border-radius:var(--radius-panel) var(--radius-panel) 0 0!important}
  }
  /* Lateral que acompanha a rolagem (classe posta pelo base.jsx só quando a lateral cabe na janela). */
  @media (min-width:1101px){.nx-dash > aside.nx-gruda{position:sticky;top:16px}}
  /* Tabela que vira ficha no celular: envolva o DataTable em <div class="nx-fichas">.
     Cada linha vira um bloco; a 1ª célula é o título (largura toda), as demais em 2 colunas com o rótulo em cima. */
  @media (max-width:700px){
    :is(.nx-fichas,[style*="2.55fr"]:has([style*="1.35fr"])) table thead{display:none}
    :is(.nx-fichas,[style*="2.55fr"]:has([style*="1.35fr"])) table,:is(.nx-fichas,[style*="2.55fr"]:has([style*="1.35fr"])) table tbody{display:block;width:100%;min-width:0!important}
    :is(.nx-fichas,[style*="2.55fr"]:has([style*="1.35fr"])) table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:8px;width:100%;min-width:0!important;padding:12px 0;border-bottom:1px solid var(--border-subtle)}
    :is(.nx-fichas,[style*="2.55fr"]:has([style*="1.35fr"])) table td{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:0!important;border:0!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere}
    :is(.nx-fichas,[style*="2.55fr"]:has([style*="1.35fr"])) table td[data-rotulo]::before{content:attr(data-rotulo);font:var(--type-caption);color:var(--text-muted)}
    :is(.nx-fichas,[style*="2.55fr"]:has([style*="1.35fr"])) table td:first-child{display:block;grid-column:1/-1}
    :is(.nx-fichas,[style*="2.55fr"]:has([style*="1.35fr"])) table td :where(div,span,a,p,strong,small,b){max-width:100%;min-width:0;white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip!important}
    :is(.nx-fichas,[style*="2.55fr"]:has([style*="1.35fr"])) table td:empty{display:none}
    /* Célula só de ações (botões/menu) ocupa a linha inteira, alinhada à direita. */
    :is(.nx-fichas,[style*="2.55fr"]:has([style*="1.35fr"])) table td:last-child:has(button){grid-column:1/-1;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:8px}
    :is(.nx-fichas,[style*="2.55fr"]:has([style*="1.35fr"])) table td:last-child:has(button)::before{display:none}
    /* Só um botão de ícone (⋮): fica no canto da ficha, na altura do título, em vez de ocupar uma linha. */
    :is(.nx-fichas,[style*="2.55fr"]:has([style*="1.35fr"])) table tr{position:relative}
    :is(.nx-fichas,[style*="2.55fr"]:has([style*="1.35fr"])) table td:last-child:has(button[aria-label]):not(:has(button:not([aria-label]))):not(:has(button ~ button)){position:absolute;top:8px;right:0;width:auto}
    :is(.nx-fichas,[style*="2.55fr"]:has([style*="1.35fr"])) table tr:has(> td:last-child button[aria-label]:only-of-type) > td:first-child{padding-right:40px!important}
  }
  /* Paginação de etapas do quadro ("Etapa 1 de 8") numa linha só, sem mexer no molde do kit. */
  span:has(> button[aria-label="Etapas anteriores"]){white-space:nowrap}
  /* Agenda (semana): bloco de reuniões sobrepostas (data-grupo, modules/agenda.jsx) lista uma por linha; a linha corta com reticências. */
  span:has(> [data-grupo]){overflow:hidden!important;min-width:0}
  [data-grupo]{width:100%}
  [data-grupo] button{display:block!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Rodapé de diálogo: com botões demais para a largura, quebra linha em vez de cortar o texto do botão. */
  [role=dialog] > div[style*="padding: var(--space-9)"]:last-child{flex-wrap:wrap;row-gap:var(--space-3)}
  @keyframes nx-gira{to{transform:rotate(360deg)}}.nx-gira{animation:nx-gira 1s linear infinite}
  @media (max-width:760px){.nx-formgrid{grid-template-columns:minmax(0,1fr)!important}.nx-formgrid>div{grid-column:auto!important}}
  @media (max-width:760px){.nx-grid3,.nx-form3,.nx-form2{grid-template-columns:minmax(0,1fr)}.nx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}