/* Smart Connecta 1.4.106 · Padrão visual Smart (camada única).
   Antes cada módulo copiava o seu próprio hero, abas e cartões (si-, rx-, fb-, as-, qa-, wf-, md-, sx-, pj-, bl-…) e os módulos
   novos se afastaram da linha: título preto, abas e bordas azuis, quatro modelos de cabeçalho. Aqui ficam os tokens e os
   componentes de referência (os do Smart IA, Visão geral e Supervisão). As telas usam as classes sm-* e este arquivo é carregado
   por último. Regras: telas de painel usam o hero escuro (.sm-hero); telas de trabalho usam o cabeçalho claro (.sm-head). */
:root{
  --sm-title:#25136c;          /* títulos de página (roxo-marinho da marca) */
  --sm-ink:#1d1238;            /* títulos de cartão e números */
  --sm-text:#4a3f66;
  --sm-muted:#8a80a3;
  --sm-line:#ece7f4;
  --sm-soft:#f8f6fc;
  --sm-violet:#6a3df0;
  --sm-violet-soft:#f1ecfe;
  --sm-line-gradient:linear-gradient(90deg,#ff7a1a,#e5179b,#6a3df0,#2f8cff);
  --sm-tab-active:linear-gradient(120deg,rgba(255,122,26,.14),rgba(229,23,155,.12) 45%,rgba(106,61,240,.16));
  --sm-hero-bg:radial-gradient(120% 140% at 0% 0%,#2a1460 0%,#170c38 50%,#0e0826 100%);
}

/* ---------------------------------------------------------------- hero escuro (telas de painel) */
.sm-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;padding:26px 30px;color:#fff;background:var(--sm-hero-bg);
  box-shadow:0 20px 50px rgba(23,12,56,.2);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:0 0 18px}
.sm-hero-aurora{position:absolute;inset:-60% -10%;z-index:-1;filter:blur(70px);pointer-events:none}
.sm-hero-aurora i{position:absolute;border-radius:50%;opacity:.5;mix-blend-mode:screen;animation:sm-drift 24s ease-in-out infinite alternate}
.sm-hero-aurora i:nth-child(1){width:380px;height:380px;left:-60px;top:-40px;background:#e5179b}
.sm-hero-aurora i:nth-child(2){width:420px;height:420px;left:42%;top:10%;background:#6a3df0;animation-delay:-8s}
.sm-hero-aurora i:nth-child(3){width:300px;height:300px;right:-40px;top:-60px;background:#ff7a1a;opacity:.35;animation-delay:-14s}
@keyframes sm-drift{to{transform:translate3d(50px,24px,0) scale(1.1)}}
.sm-hero-text{min-width:0;flex:1 1 420px}
.sm-hero-eyebrow{display:block;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#bff7de}
.sm-hero h1{margin:6px 0 4px;font-size:27px;line-height:1.15;letter-spacing:-.6px;font-weight:800;color:#fff}
.sm-hero p{margin:0;font-size:14px;line-height:1.5;color:rgba(239,233,255,.8);max-width:760px}
.sm-hero-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sm-hero-actions .cp-button{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff;font-size:13px!important;font-weight:800;padding:10px 16px;border-radius:12px}
.sm-hero-actions .cp-button:hover{background:rgba(255,255,255,.18)}
.sm-hero-actions .cp-button.primary{background:#fff;border-color:#fff;color:var(--sm-violet)}

/* ---------------------------------------------------------------- cabeçalho claro (telas de trabalho) */
.sm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 18px;flex-wrap:wrap;margin:0 0 16px}
.sm-head>div:first-child{min-width:0;flex:1 1 360px}
.sm-head .sm-eyebrow,.sm-eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#8a5cf6}
#content .sm-head h1,#content .sm-head h2{margin:2px 0 0;font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.4px;color:var(--sm-title)}
#content .sm-head p{margin:4px 0 0;font-size:14px;line-height:1.5;color:#6f6798;max-width:760px}

/* ---------------------------------------------------------------- abas (barra branca, pílula com o gradiente suave da marca) */
#content .sm-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:6px;border:1px solid var(--sm-line);border-radius:16px;background:#fff;
  border-bottom:1px solid var(--sm-line);overflow:visible;box-shadow:0 6px 20px rgba(29,18,56,.04)}
#content .sm-tabs>:is(button,a){border:0;border-radius:12px;background:transparent;padding:9px 12px;font:inherit;font-size:13px;font-weight:800;
  line-height:1.3;color:var(--sm-text);cursor:pointer;box-shadow:none;margin:0;white-space:nowrap;text-decoration:none}
#content .sm-tabs>.cp-button{font-size:13px!important}  /* .cp-button fixa 11px com !important */
#content .sm-tabs>:is(button,a):hover{background:var(--sm-soft);color:var(--sm-ink)}
#content .sm-tabs>:is(button,a):is(.active,[aria-selected="true"],[aria-current="page"],[aria-pressed="true"]){background:var(--sm-tab-active);color:var(--sm-ink);box-shadow:none;border:0}
#content .sm-tabs>:is(button,a):focus-visible{outline:2px solid var(--sm-violet);outline-offset:2px}
#content .sm-tabs.sm-tabs-sub{padding:4px;border-radius:14px;box-shadow:none}
#content .sm-tabs.sm-tabs-sub>:is(button,a){padding:7px 12px;font-size:12.5px!important}

/* ---------------------------------------------------------------- cartões de indicador: a linha gradiente no topo */
#content .sm-kpi{position:relative;overflow:hidden;background:#fff;border:1px solid var(--sm-line);border-radius:16px;border-top:1px solid var(--sm-line)}
#content .sm-kpi::before{content:'';position:absolute;inset:0 0 auto 0;width:auto;height:3px;background:var(--sm-line-gradient)}
#content .sm-kpi :is(strong,b.sm-kpi-value){color:var(--sm-ink)}

/* ---------------------------------------------------------------- campo de arquivo no padrão dos botões */
#content input[type=file],.cp-modal input[type=file]{font:inherit;font-size:12px;color:var(--sm-muted);max-width:100%}
#content input[type=file]::file-selector-button,.cp-modal input[type=file]::file-selector-button{margin-right:10px;padding:8px 14px;border:1px solid #e9e3ef;border-radius:9px;
  background:#fff;color:#5b3fb8;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
#content input[type=file]::file-selector-button:hover,.cp-modal input[type=file]::file-selector-button:hover{background:#faf8ff;border-color:#d6c6ee}

@media (max-width:700px){
  .sm-hero{padding:20px;border-radius:20px}.sm-hero h1{font-size:21px}
  #content .sm-head h1,#content .sm-head h2{font-size:20px}
  #content .sm-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
}
@media (prefers-reduced-motion:reduce){.sm-hero-aurora i{animation:none}}
/* estado no cartão de indicador (atenção / problema) troca a linha da marca pela cor de estado */
#content .sm-kpi.warn::before{background:#d97706}
#content .sm-kpi.bad::before{background:#dc2626}