/* =========================================================
   Narro · Design System de Aplicativos · v1 (31/10/2026)
   Filho do DS3. Base visual: o sistema de Propostas (aprovado pelo Anderson).
   Vale para TODOS os aplicativos da Narro: Narro Flow (CRM), Narro Studio,
   Narro OS e Propostas.

   REGRA DE OURO: nenhuma tela escreve cor, tamanho, espaço ou canto à mão.
   Tudo sai dos tokens abaixo. Mudou o token, muda em todos os aplicativos.

   Tema: <html data-tema="escuro"> (roxo, padrão) ou data-tema="claro".
   ========================================================= */

@font-face{font-family:"MADE Tommy";src:url("/fonts/made-tommy-light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"MADE Tommy";src:url("/fonts/made-tommy-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"MADE Tommy";src:url("/fonts/made-tommy-medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"MADE Tommy";src:url("/fonts/made-tommy-bold.woff2") format("woff2");font-weight:700;font-display:swap}

/* ---------- 1. Tokens fixos (não mudam com o tema) ---------- */
:root{
  /* cores da marca, mesmos valores do DS3 */
  --marca-roxo:#480067;
  --marca-roxo-escuro:#1d0039;
  --marca-verde:#65d600;
  --marca-verde-hover:#71e20c;

  /* letra */
  --fonte:"MADE Tommy","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-tela:28px;        /* título da tela: Light 300 + palavra-chave 700 */
  --f-bloco:17px;       /* título de bloco, nome na lista */
  --f-corpo:14px;       /* texto de trabalho */
  --f-apoio:12.5px;     /* informação secundária */
  --f-rotulo:11px;      /* rótulo em caixa alta */
  --f-numero:30px;      /* número em destaque: forte, nunca gigante */
  --f-numero-p:22px;
  --tracking:.02em;
  --tracking-rotulo:.1em;

  /* espaço: escala de 4 */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:20px; --e-6:24px; --e-8:32px; --e-10:40px; --e-12:48px;

  /* ESQUELETO DE APP: largura total, margem mínima (regra do Anderson, 31/10) */
  --margem:24px;               /* margem lateral da área de trabalho */
  --menu-largura:240px;
  --menu-recolhido:68px;
  --topo-altura:60px;
  --ler-max:680px;             /* só texto corrido longo tem largura máxima */

  /* cantos: UM lugar para mudar tudo (2px = DS3 de página; 12px = Propostas) */
  --r-caixa:12px;
  --r-campo:10px;
  --r-pilula:999px;

  /* movimento: leve, curvas do DS3 */
  --curva:cubic-bezier(.16,1,.3,1);
  --t-rapido:.18s;
  --t-normal:.3s;

  /* tamanhos de controle */
  --controle:40px;
  --controle-p:32px;
  --controle-g:48px;
}
@media (max-width:720px){:root{--margem:16px;--f-tela:23px;--f-numero:26px}}

/* ---------- 2. Tema ESCURO (padrão, roxo do Propostas) ---------- */
:root,[data-tema="escuro"]{
  color-scheme:dark;
  --fundo:#130026;              /* área de trabalho (02/11: roxo mais escuro) */
  --menu:#0e001d;               /* menu lateral */
  /* 3 ANDARES (Anderson 02/11, lógica do Runrun.it): página → zona/coluna → cartão, cada um com degrau visível */
  --andar-1:var(--fundo);       /* página */
  --andar-2:#1c0936;            /* zona, coluna, grupo */
  --andar-3:#261244;            /* cartão: o mais alto e mais claro */
  --andar-3-hover:#2e1752;
  --sombra-cartao:0 1px 0 rgba(255,255,255,.05) inset,0 4px 14px rgba(5,0,15,.45);
  --sup:var(--andar-3);         /* cartão, linha da lista */
  --sup-2:var(--andar-3-hover); /* cartão em foco, selecionado */
  --sup-campo:#170830;          /* dentro de campo */
  --texto:#ffffff;
  --texto-2:rgba(255,255,255,.74);
  --texto-3:rgba(255,255,255,.52);
  --linha:rgba(255,255,255,.12);
  --linha-forte:rgba(255,255,255,.26);
  --destaque:var(--marca-verde);          /* palavra-chave, valor, item ativo */
  /* ação principal (CTA): verde com texto escuro */
  --cta:var(--marca-verde);
  --cta-texto:#1a0030;
  --cta-hover:var(--marca-verde-hover);
  /* ação comum: pílula de linha */
  --acao-linha:rgba(255,255,255,.5);
  --acao-hover-fundo:#ffffff;
  --acao-hover-texto:var(--marca-roxo-escuro);
  /* estados */
  --ok:#65d600;    --ok-fundo:rgba(101,214,0,.13);
  --alerta:#f5c451; --alerta-fundo:rgba(245,196,81,.13);
  --erro:#ff6b86;  --erro-fundo:rgba(255,107,134,.14);
  --info:#9fb8ff;  --info-fundo:rgba(159,184,255,.13);
  /* tons de bloco no ESCURO: "como o Propostas" (opção E, Anderson 01/11): blocos um degrau acima do fundo, sem cor;
     a cor fica na bolinha roxa da marca com ícone verde e no número verde. O bloco de destaque desce para o roxo da marca. */
  --tom-a:#2a0a4d; --tom-a-icone:#65d600;
  --tom-b:#2a0a4d; --tom-b-icone:#65d600;
  --tom-c:#2a0a4d; --tom-c-icone:#65d600;
  --tom-d:#2a0a4d; --tom-d-icone:#65d600;
  --tom-e:#2a0a4d; --tom-e-icone:#65d600;
  --bloco-icone-fundo:var(--marca-roxo);
  --bloco-numero:var(--marca-verde);
  /* faixa de aviso com progresso (ex.: cadastro incompleto): roxo mais escuro que o fundo + barra verde-limão (Anderson 01/11) */
  --faixa-fundo:#0d001c;
  --faixa-borda:rgba(255,255,255,.08);
  --faixa-barra:var(--barra);
  /* BARRA DE PROGRESSO com personalidade (Anderson 01/11): degradê verde-limão + brilho neon em volta */
  --barra:linear-gradient(90deg,#2f9a00 0%,var(--marca-verde) 55%,#b9ff5e 100%);
  --barra-brilho:0 0 6px rgba(101,214,0,.85),0 0 16px rgba(101,214,0,.45);
  /* brilho neon ao passar o mouse em botão (Anderson 01/11: claro e escuro se comportam igual) */
  --brilho-hover:0 0 10px rgba(101,214,0,.55),0 0 24px rgba(101,214,0,.25);
  /* nome do app escrito à mão (narro-marca.js): roxinho neon */
  --marca-app:#d49bff;
  --marca-app-fraco:0 0 2px rgba(222,170,255,.6),0 0 6px rgba(176,92,255,.35);
  --marca-app-forte:0 0 2px rgba(240,210,255,1),0 0 8px rgba(196,120,255,.95),0 0 18px rgba(160,70,255,.75),0 0 34px rgba(150,60,255,.45);
  --sombra:0 12px 40px rgba(5,0,15,.45);
  --foco:0 0 0 3px rgba(101,214,0,.35);
}

/* ---------- 3. Tema CLARO (telas de dado: relatório, lista, painel) ---------- */
[data-tema="claro"]{
  color-scheme:light;
  --fundo:#f1f0f4;
  --menu:#ffffff;
  --andar-1:var(--fundo);
  --andar-2:#e3dfea;
  --andar-3:#ffffff;
  --andar-3-hover:#ffffff;
  --sombra-cartao:0 1px 2px rgba(46,42,51,.10),0 4px 12px rgba(46,42,51,.06);
  --sup:var(--andar-3);
  --sup-2:#f6f2fa;
  --sup-campo:#ffffff;
  --texto:#2e2a33;              /* ink-light do DS3: quase preto, nunca preto puro */
  --texto-2:rgba(46,42,51,.74);
  --texto-3:rgba(46,42,51,.52);
  --linha:rgba(46,42,51,.12);
  --linha-forte:rgba(46,42,51,.26);
  --destaque:var(--marca-roxo);          /* roxo só com significado */
  --cta:var(--marca-roxo);
  --cta-texto:#ffffff;
  --cta-hover:#5a0a80;
  --acao-linha:rgba(46,42,51,.55); /* contorno do botão comum mais firme (02/11: "Colar o HTML" sem contraste) */
  --acao-hover-fundo:var(--marca-roxo);
  --acao-hover-texto:#ffffff;
  --ok:#2f7d00;    --ok-fundo:#e7f6dc;
  --alerta:#8a5a00; --alerta-fundo:#fbf0d4;
  --erro:#b4203f;  --erro-fundo:#fbe3e8;
  --info:#2c4fae;  --info-fundo:#e3eafb;
  --tom-a:#dcc8f7; --tom-a-icone:#480067;
  --tom-b:#c9eeae; --tom-b-icone:#2f7d00;
  --tom-c:#f7df9f; --tom-c-icone:#8a5a00;
  --tom-d:#c5daf7; --tom-d-icone:#2c4fae;
  --tom-e:#f7c7db; --tom-e-icone:#a3245a;
  --bloco-icone-fundo:#ffffff;
  --bloco-numero:var(--texto);
  --faixa-fundo:var(--alerta-fundo);
  --faixa-borda:transparent;
  --faixa-barra:var(--barra);
  /* no claro, o mesmo comportamento do escuro na cor de destaque do claro (roxo) */
  --barra:linear-gradient(90deg,#2b0040 0%,var(--marca-roxo) 50%,#9a3fd0 100%);
  --barra-brilho:0 0 6px rgba(120,30,170,.6),0 0 14px rgba(120,30,170,.3);
  --brilho-hover:0 0 10px rgba(110,20,160,.4),0 0 22px rgba(110,20,160,.18);
  --marca-app:#8a2be2;
  --marca-app-fraco:0 0 2px rgba(160,70,240,.3);
  --marca-app-forte:0 0 3px rgba(160,70,240,.55),0 0 10px rgba(160,70,240,.3);
  --sombra:0 12px 40px rgba(46,42,51,.12);
  --foco:0 0 0 3px rgba(72,0,103,.22);
}

/* ---------- 4. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:400 var(--f-corpo)/1.45 var(--fonte);letter-spacing:var(--tracking);color:var(--texto);background:var(--fundo);-webkit-font-smoothing:antialiased;transition:background-color var(--t-normal) ease,color var(--t-normal) ease}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:0;box-shadow:var(--foco);border-radius:var(--r-campo)}
[hidden]{display:none!important}
.na-icone{width:18px;height:18px;flex:none;stroke-width:1.75}
/* ícone oficial (Solar Bold Duotone + micro-animação, ver narro-icones.js): herda a cor do texto; a 2ª camada é a mesma cor em 50% */
.na-ic{display:inline-grid;place-items:center;width:var(--ic,18px);height:var(--ic,18px);flex:none;line-height:0}
.na-ic svg{width:100%;height:100%;overflow:visible}
.na-ic--g{--ic:24px}.na-ic--gg{--ic:32px}

/* ---------- 5. Esqueleto do aplicativo ---------- */
.na-app{display:grid;grid-template-columns:var(--menu-largura) minmax(0,1fr);min-height:100svh;transition:grid-template-columns var(--t-normal) var(--curva)}
.na-app[data-menu="recolhido"]{grid-template-columns:var(--menu-recolhido) minmax(0,1fr)}

.na-menu{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;gap:var(--e-1);padding:var(--e-4) var(--e-3);background:var(--menu);border-right:1px solid var(--linha);overflow:hidden}
.na-menu__marca{display:flex;align-items:center;gap:var(--e-3);height:44px;padding:0 var(--e-2);margin-bottom:var(--e-4);white-space:nowrap}
.na-menu__marca img{height:18px;width:auto;flex:none}
:root .na-menu__marca img,[data-tema="escuro"] .na-menu__marca img{filter:brightness(0) invert(1)}
[data-tema="claro"] .na-menu__marca img{filter:none}
.na-app[data-menu="recolhido"] .na-menu__marca img{height:14px}
.na-menu__app{font-size:var(--f-apoio);font-weight:300;color:var(--texto-2)}
/* nome do app em letra manuscrita com NEON que respira devagar (narro-marca.js) */
.na-marca-app{display:inline-block;font:400 34px/1 "Sacramento",cursive;letter-spacing:0;color:var(--marca-app);margin:-6px 0 -10px 2px;position:relative;top:1px;white-space:nowrap;
  text-shadow:var(--marca-app-fraco);animation:na-neon 5s ease-in-out infinite}
@keyframes na-neon{0%,100%{text-shadow:var(--marca-app-fraco);opacity:.88}50%{text-shadow:var(--marca-app-forte);opacity:1}}
@media (prefers-reduced-motion:reduce){.na-marca-app{animation:none;text-shadow:var(--marca-app-forte)}}
.na-menu__grupo{margin:var(--e-4) 0 var(--e-1);padding:0 var(--e-3);font-size:10px;font-weight:500;letter-spacing:var(--tracking-rotulo);text-transform:uppercase;color:var(--texto-3);white-space:nowrap}
.na-menu__item{display:flex;align-items:center;gap:var(--e-3);min-height:var(--controle);padding:0 var(--e-3);border-radius:var(--r-campo);font-size:var(--f-corpo);font-weight:500;color:var(--texto-2);white-space:nowrap;transition:background-color var(--t-rapido) ease,color var(--t-rapido) ease}
.na-menu__item:hover{background:var(--sup);color:var(--texto)}
.na-menu__item[aria-current="page"]{background:var(--sup-2);color:var(--texto)}
.na-menu__item[aria-current="page"] :is(.na-icone,.na-ic){color:var(--destaque)}
.na-menu__item .na-contador{margin-left:auto}
.na-menu__fim{margin-top:auto;display:grid;gap:var(--e-1)}
.na-app[data-menu="recolhido"] .na-menu__app,
.na-app[data-menu="recolhido"] .na-menu__grupo,
.na-app[data-menu="recolhido"] .na-menu__item span,
.na-app[data-menu="recolhido"] .na-menu__item .na-contador{display:none}
.na-app[data-menu="recolhido"] .na-menu__item{justify-content:center;padding:0}

.na-principal{min-width:0;display:flex;flex-direction:column}
.na-topo{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--e-3);height:var(--topo-altura);padding:0 var(--margem);background:var(--fundo);border-bottom:1px solid var(--linha)}
.na-topo__conta{display:inline-flex;align-items:center;gap:var(--e-2);min-height:var(--controle-p);padding:0 var(--e-3) 0 var(--e-1);border:1px solid var(--linha);border-radius:var(--r-pilula);font-size:var(--f-apoio);font-weight:500}
.na-topo__conta i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--cta);color:var(--cta-texto);font:700 10px/1 var(--fonte);font-style:normal}
.na-topo__busca{flex:1;max-width:520px;margin-left:var(--e-2)}
.na-topo__fim{margin-left:auto;display:flex;align-items:center;gap:var(--e-2)}

/* área de trabalho: LARGURA TOTAL, margem mínima, nada encolhido no centro */
.na-tela{padding:var(--e-6) var(--margem) var(--e-12);display:grid;gap:var(--e-6);align-content:start}
.na-tela__cabeca{display:flex;align-items:flex-end;gap:var(--e-4);flex-wrap:wrap}
.na-tela__titulo{font-size:var(--f-tela);font-weight:300;line-height:1.1;letter-spacing:-.01em}
.na-tela__titulo strong{font-weight:700;color:var(--destaque)}
.na-tela__resumo{margin-top:var(--e-2);font-size:var(--f-apoio);color:var(--texto-2)}
.na-tela__resumo b{color:var(--texto);font-weight:700}
.na-tela__acoes{margin-left:auto;display:flex;gap:var(--e-2);flex-wrap:wrap}
.na-barra{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap}
.na-barra__fim{margin-left:auto;display:flex;gap:var(--e-2);align-items:center}
.na-ler{max-width:var(--ler-max)}

/* celular: menu vira barra de baixo, como app */
@media (max-width:860px){
  .na-app,.na-app[data-menu="recolhido"]{grid-template-columns:1fr}
  .na-menu{position:fixed;inset:auto 0 0 0;z-index:40;height:auto;flex-direction:row;justify-content:space-around;padding:var(--e-2) var(--e-2) calc(var(--e-2) + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--linha)}
  .na-menu__marca,.na-menu__grupo,.na-menu__fim,.na-menu [data-so-computador]{display:none}
  .na-menu__item{flex-direction:column;gap:2px;min-height:48px;padding:var(--e-1) var(--e-2);font-size:10px;justify-content:center}
  .na-menu__item .na-contador{display:none}
  .na-principal{padding-bottom:76px}
  .na-topo__busca,[data-so-computador]{display:none}
}

/* ---------- 6. Botões (pílula, texto sem ícone; ícone só no botão redondo) ---------- */
.na-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);min-height:var(--controle);padding:0 var(--e-5);border-radius:var(--r-pilula);border:1px solid var(--acao-linha);font-size:13px;font-weight:600;letter-spacing:.03em;white-space:nowrap;color:var(--texto);transition:background-color var(--t-rapido) ease,color var(--t-rapido) ease,border-color var(--t-rapido) ease,box-shadow var(--t-normal) ease}
.na-btn:hover{background:var(--acao-hover-fundo);border-color:var(--acao-hover-fundo);color:var(--acao-hover-texto);box-shadow:var(--brilho-hover)}
.na-btn--cta{background:var(--cta);border-color:var(--cta);color:var(--cta-texto);font-weight:700}
.na-btn--cta:hover{background:var(--cta-hover);border-color:var(--cta-hover);color:var(--cta-texto)}
.na-btn--texto{border-color:transparent;padding:0 var(--e-3);color:var(--texto-2)}
.na-btn--texto:hover{background:var(--sup);border-color:transparent;color:var(--texto);box-shadow:none}
.na-btn--perigo{color:var(--erro);border-color:var(--erro-fundo)}
.na-btn--perigo:hover{background:var(--erro);border-color:var(--erro);color:#fff}
.na-btn--p{min-height:var(--controle-p);padding:0 var(--e-4);font-size:12px}
.na-btn--g{min-height:var(--controle-g);padding:0 var(--e-8);font-size:14px}
.na-btn:disabled{opacity:.45;pointer-events:none}
.na-redondo{display:inline-grid;place-items:center;width:var(--controle);height:var(--controle);border-radius:50%;border:1px solid var(--acao-linha);color:var(--texto-2);transition:background-color var(--t-rapido) ease,color var(--t-rapido) ease,box-shadow var(--t-normal) ease}
.na-redondo:hover{background:var(--sup-2);color:var(--texto);box-shadow:var(--brilho-hover)}
.na-redondo--p{width:var(--controle-p);height:var(--controle-p)}
.na-redondo--sem-linha{border-color:transparent}

/* ---------- 7. Campos ---------- */
.na-campo{display:grid;gap:6px}
.na-campo>span{font-size:12px;font-weight:500;color:var(--texto-2)}
.na-campo small{font-size:12px;color:var(--texto-3)}
.na-entrada{width:100%;min-height:var(--controle-g);padding:0 var(--e-4);border:1px solid var(--linha-forte);border-radius:var(--r-campo);background:var(--sup-campo);font-size:var(--f-corpo);font-weight:400;transition:border-color var(--t-rapido) ease,box-shadow var(--t-rapido) ease}
textarea.na-entrada{min-height:104px;padding:var(--e-3) var(--e-4);resize:vertical;line-height:1.5}
.na-entrada::placeholder{color:var(--texto-3)}
.na-entrada:hover{border-color:var(--texto-3)}
.na-entrada:focus{outline:0;border-color:var(--destaque);box-shadow:var(--foco)}
.na-campo--erro .na-entrada{border-color:var(--erro)}
.na-campo--erro small{color:var(--erro)}
.na-campo--ok .na-entrada{border-color:var(--ok)}
select.na-entrada{appearance:none;padding-right:var(--e-10);background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.na-busca{position:relative;display:block}
.na-busca :is(.na-icone,.na-ic){position:absolute;left:14px;top:50%;translate:0 -50%;color:var(--texto-3)}
.na-busca input{width:100%;min-height:var(--controle);padding:0 var(--e-4) 0 42px;border:1px solid var(--linha);border-radius:var(--r-pilula);background:var(--sup-campo);font-size:13px}
.na-busca input:focus{outline:0;border-color:var(--destaque);box-shadow:var(--foco)}
.na-grade-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--e-4)}
/* liga/desliga */
.na-chave{position:relative;display:inline-flex;align-items:center;gap:var(--e-3);cursor:pointer;font-size:13px}
.na-chave input{position:absolute;opacity:0}
.na-chave i{position:relative;width:38px;height:22px;border-radius:var(--r-pilula);background:var(--linha-forte);transition:background-color var(--t-rapido) ease}
.na-chave i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--t-normal) var(--curva)}
.na-chave input:checked+i{background:var(--marca-verde)}
.na-chave input:checked+i::after{transform:translateX(16px)}
.na-chave input:focus-visible+i{box-shadow:var(--foco)}

/* ---------- 8. Abas (pílulas, como no Propostas) ---------- */
.na-abas{display:inline-flex;gap:2px;padding:var(--e-1);border:1px solid var(--linha);border-radius:var(--r-pilula);background:var(--sup-campo)}
.na-abas button{display:inline-flex;align-items:center;gap:var(--e-2);min-height:var(--controle-p);padding:0 var(--e-4);border-radius:var(--r-pilula);font-size:13px;font-weight:500;color:var(--texto-2);transition:background-color var(--t-rapido) ease,color var(--t-rapido) ease}
.na-abas button:hover{color:var(--texto)}
.na-abas button[aria-selected="true"]{background:var(--texto);color:var(--fundo)}
.na-abas button[aria-selected="true"] .na-contador{color:inherit;opacity:.7}

/* ---------- 9. Etiquetas, contador, avatar ---------- */
.na-etiqueta{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 var(--e-3);border-radius:var(--r-pilula);background:var(--sup-2);font-size:12px;font-weight:500;color:var(--texto-2);white-space:nowrap}
.na-etiqueta::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.na-etiqueta--sem-ponto::before{display:none}
.na-etiqueta--ok{background:var(--ok-fundo);color:var(--ok)}
.na-etiqueta--alerta{background:var(--alerta-fundo);color:var(--alerta)}
.na-etiqueta--erro{background:var(--erro-fundo);color:var(--erro)}
.na-etiqueta--info{background:var(--info-fundo);color:var(--info)}
.na-contador{font-size:12px;font-weight:600;color:var(--texto-3)}
.na-avatar{display:inline-grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--sup-2);font-size:12px;font-weight:700;color:var(--texto)}
.na-avatar--g{width:48px;height:48px;font-size:16px}

/* ---------- 10. Cartão, lista, tabela ---------- */
.na-cartao{padding:var(--e-5);border:1px solid var(--linha);border-radius:var(--r-caixa);background:var(--sup)}
.na-cartao__titulo{display:flex;align-items:center;gap:var(--e-2);margin-bottom:var(--e-4);font-size:var(--f-bloco);font-weight:600}
.na-cartao__titulo .na-btn,.na-cartao__titulo .na-redondo{margin-left:auto}
.na-rotulo{font-size:var(--f-rotulo);font-weight:500;letter-spacing:var(--tracking-rotulo);text-transform:uppercase;color:var(--texto-3)}

/* linha de lista: tudo numa faixa só, largura total */
.na-lista{display:grid;gap:var(--e-2)}
.na-linha{display:grid;grid-template-columns:minmax(220px,2fr) minmax(120px,1fr) auto minmax(120px,auto) auto;align-items:center;gap:var(--e-5);padding:var(--e-4) var(--e-5);border:1px solid var(--linha);border-radius:var(--r-caixa);background:var(--sup);transition:background-color var(--t-rapido) ease,border-color var(--t-rapido) ease}
.na-linha:hover{background:var(--sup-2);border-color:var(--linha-forte)}
.na-linha__nome{display:grid;gap:2px;min-width:0}
.na-linha__nome b{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.na-linha__nome small{font-size:var(--f-apoio);color:var(--texto-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.na-linha__valor{font-size:15px;font-weight:700;color:var(--destaque);white-space:nowrap;text-align:right}
.na-linha__acoes{display:flex;gap:var(--e-1);justify-content:flex-end}
@media (max-width:1100px){.na-linha{grid-template-columns:minmax(0,1fr) auto;gap:var(--e-3)}.na-linha>:nth-child(2){grid-column:1}.na-linha__valor{text-align:left}}

.na-tabela-caixa{border:1px solid var(--linha);border-radius:var(--r-caixa);background:var(--sup);overflow:auto}
.na-tabela{width:100%;border-collapse:collapse;font-size:13px}
.na-tabela th{position:sticky;top:0;padding:var(--e-3) var(--e-4);background:var(--sup);text-align:left;font-size:var(--f-rotulo);font-weight:500;letter-spacing:var(--tracking-rotulo);text-transform:uppercase;color:var(--texto-3);border-bottom:1px solid var(--linha);white-space:nowrap}
.na-tabela td{padding:var(--e-3) var(--e-4);border-bottom:1px solid var(--linha);white-space:nowrap}
.na-tabela tr:last-child td{border-bottom:0}
.na-tabela tbody tr:hover td{background:var(--sup-2)}
.na-tabela .num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- 11. Número em destaque (bloco com tom e ícone) ---------- */
.na-numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--e-3)}
.na-numero{display:grid;gap:var(--e-2);padding:var(--e-4) var(--e-5);border-radius:var(--r-caixa);background:var(--tom,var(--sup))}
/* BLOCO COM TOM (aprovado pelo Anderson 01/11/2026): degradê marcado da cor do bloco puxando para a cor do ícone
   + borda fina no tom mais forte. Exceção aprovada à regra "sem degradê", só para blocos coloridos de aplicativo. */
.na-bloco{--tom:var(--sup);--tom-icone:var(--destaque);display:grid;gap:var(--e-3);padding:var(--e-5);border-radius:var(--r-caixa)}
.na-numero,.na-bloco{background:linear-gradient(150deg,color-mix(in srgb,var(--tom) 85%,#fff) 0%,var(--tom) 45%,color-mix(in srgb,var(--tom) 62%,var(--tom-icone)) 100%);border:1px solid color-mix(in srgb,var(--tom) 72%,var(--tom-icone))}
/* no ESCURO: volta à cor lisa de antes (o degradê ficou feio no escuro, Anderson 01/11), só com a borda fina na cor do ícone */
:root:not([data-tema="claro"]) :is(.na-numero,.na-bloco){background:var(--tom);border-color:rgba(255,255,255,.12);
  /* o que fica DENTRO do bloco nasce da cor do bloco (tom mais escuro), nunca do roxo geral (Anderson 01/11) */
  --sup:color-mix(in srgb,var(--tom) 62%,#05000c);--sup-2:color-mix(in srgb,var(--tom) 80%,#05000c)}
/* bloco de DESTAQUE (o mais importante da tela): no escuro, degradê descendo para o roxo da marca na base */
:root:not([data-tema="claro"]) .na-bloco--destaque{background:linear-gradient(180deg,var(--tom) 0%,var(--marca-roxo) 100%);border-color:rgba(201,167,255,.32);--sup:rgba(20,0,40,.5);--sup-2:rgba(20,0,40,.7)}
/* ===== ESTILO DOS BLOCOS NO ESCURO: UMA CHAVE SÓ (Anderson 01/11: "se eu quiser mudar no futuro, que seja prático")
   <html data-blocos="sobrio">   padrão: blocos sem cor, só o .na-bloco--destaque desce para o roxo da marca
   <html data-blocos="degrade">  todos os blocos com o degradê roxo do destaque
   <html data-blocos="cores">    cada bloco num roxo próximo (paleta "meio-termo", opção C)
   Trocar o atributo muda o sistema inteiro. O claro não muda. ===== */
:root:not([data-tema="claro"])[data-blocos="degrade"] :is(.na-numero,.na-bloco){background:linear-gradient(180deg,var(--tom) 0%,var(--marca-roxo) 100%);border-color:rgba(201,167,255,.32);--sup:rgba(20,0,40,.5);--sup-2:rgba(20,0,40,.7)}
:root:not([data-tema="claro"])[data-blocos="cores"]{--tom-a:#35105e;--tom-a-icone:#d8b8ff;--tom-b:#2a1660;--tom-b-icone:#9fe870;--tom-c:#3f1258;--tom-c-icone:#ffd36b;--tom-d:#241a63;--tom-d-icone:#9cc8ff;--tom-e:#46104f;--tom-e-icone:#ffa3c7}
:root:not([data-tema="claro"])[data-blocos="cores"] :is(.na-numero,.na-bloco){border-color:color-mix(in srgb,var(--tom-icone) 38%,transparent);--bloco-icone-fundo:var(--sup);--bloco-numero:var(--texto)}
.na-bloco--a{--tom:var(--tom-a);--tom-icone:var(--tom-a-icone)}
.na-bloco--b{--tom:var(--tom-b);--tom-icone:var(--tom-b-icone)}
.na-bloco--c{--tom:var(--tom-c);--tom-icone:var(--tom-c-icone)}
.na-bloco--d{--tom:var(--tom-d);--tom-icone:var(--tom-d-icone)}
.na-bloco--e{--tom:var(--tom-e);--tom-icone:var(--tom-e-icone)}
.na-numero__topo{display:flex;align-items:center;gap:var(--e-2);font-size:12px;font-weight:500;color:var(--texto-2)}
.na-numero__topo i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bloco-icone-fundo,var(--sup));color:var(--tom-icone,var(--destaque))}
.na-numero__topo i .na-ic{--ic:16px}
.na-numero__topo i .na-icone{width:15px;height:15px}
.na-numero b{font-size:var(--f-numero);font-weight:700;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--bloco-numero,var(--texto))}
.na-numero small{font-size:12px;color:var(--texto-2)}
.na-numero small em{font-style:normal;font-weight:700;color:var(--ok)}
.na-numero--a{--tom:var(--tom-a);--tom-icone:var(--tom-a-icone)}
.na-numero--b{--tom:var(--tom-b);--tom-icone:var(--tom-b-icone)}
.na-numero--c{--tom:var(--tom-c);--tom-icone:var(--tom-c-icone)}
.na-numero--d{--tom:var(--tom-d);--tom-icone:var(--tom-d-icone)}
.na-numero--e{--tom:var(--tom-e);--tom-icone:var(--tom-e-icone)}
/* barra fina de progresso: 4 px */
.na-progresso{height:4px;border-radius:var(--r-pilula);background:var(--linha)}
.na-progresso i{display:block;height:100%;width:var(--valor,0%);border-radius:inherit;background:var(--cor,var(--barra,var(--destaque)));box-shadow:var(--barra-brilho,none)}

/* ---------- 12. A leitura (o relatório que explica) ---------- */
.na-leitura{display:grid;grid-template-columns:auto 1fr;gap:var(--e-3) var(--e-4);padding:var(--e-5);border-radius:var(--r-caixa);background:var(--tom-a);color:var(--texto)}
.na-leitura>i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--sup);color:var(--tom-a-icone)}
.na-leitura p{font-size:15px;line-height:1.55;font-weight:300}
.na-leitura p b{font-weight:700}
.na-leitura__acao{margin-top:var(--e-2);font-size:13px;color:var(--texto-2)}
.na-leitura__acao b{color:var(--destaque)}

/* ---------- 13. Avisos e estado vazio ---------- */
.na-aviso{display:flex;align-items:center;gap:var(--e-3);padding:var(--e-3) var(--e-4);border-radius:var(--r-campo);background:var(--info-fundo);color:var(--info);font-size:13px;font-weight:500}
.na-aviso--ok{background:var(--ok-fundo);color:var(--ok)}
.na-aviso--alerta{background:var(--alerta-fundo);color:var(--alerta)}
.na-aviso--erro{background:var(--erro-fundo);color:var(--erro)}
.na-aviso .na-btn{margin-left:auto}
.na-vazio{display:grid;justify-items:center;gap:var(--e-3);padding:var(--e-12) var(--e-6);border:1px dashed var(--linha-forte);border-radius:var(--r-caixa);text-align:center;color:var(--texto-2)}
.na-vazio b{font-size:var(--f-bloco);color:var(--texto)}

/* ---------- 14. Passos do assistente (bolinha roxa com número verde) ---------- */
.na-passos{display:flex;gap:var(--e-2);flex-wrap:wrap}
.na-passo{display:flex;align-items:center;gap:var(--e-2);font-size:13px;font-weight:500;color:var(--texto-3)}
.na-passo b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--sup-2);font-size:13px;font-weight:700;color:var(--texto-3)}
.na-passo[aria-current="step"]{color:var(--texto)}
.na-passo[aria-current="step"] b{background:var(--marca-roxo);color:var(--marca-verde)}
.na-passo--feito b{background:var(--ok-fundo);color:var(--ok)}
.na-passo+.na-passo::before{content:"";width:24px;height:1px;margin-right:var(--e-1);background:var(--linha-forte)}
/* escolha em cartão (uma decisão por tela) */
.na-escolhas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--e-3)}
.na-escolha{position:relative;display:grid;gap:var(--e-1);padding:var(--e-4) var(--e-5);border:1px solid var(--linha);border-radius:var(--r-caixa);background:var(--sup);cursor:pointer;transition:border-color var(--t-rapido) ease,background-color var(--t-rapido) ease}
.na-escolha input{position:absolute;opacity:0}
.na-escolha b{font-size:15px;font-weight:600}
.na-escolha small{font-size:12.5px;color:var(--texto-2)}
.na-escolha:hover{border-color:var(--linha-forte)}
.na-escolha:has(input:checked){border-color:var(--destaque);background:var(--sup-2);box-shadow:inset 0 0 0 1px var(--destaque)}
.na-escolha:has(input:focus-visible){box-shadow:var(--foco)}
/* etapas da régua lidas como frase */
.na-etapas{display:grid;gap:var(--e-2)}
.na-etapa{display:grid;grid-template-columns:30px 150px 120px minmax(0,1fr) auto;align-items:center;gap:var(--e-4);padding:var(--e-3) var(--e-4);border:1px solid var(--linha);border-radius:var(--r-caixa);background:var(--sup)}
.na-etapa>b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--marca-roxo);color:var(--marca-verde);font-size:13px}
.na-etapa__quando{font-size:13px;font-weight:600}
.na-etapa__canal{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--texto-2)}
.na-etapa__oque{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:860px){.na-etapa{grid-template-columns:30px 1fr auto}.na-etapa__canal,.na-etapa__oque{grid-column:2}}
.na-rodape-acao{position:sticky;bottom:0;display:flex;align-items:center;gap:var(--e-3);margin:0 calc(-1 * var(--margem));padding:var(--e-3) var(--margem);background:var(--fundo);border-top:1px solid var(--linha)}
.na-rodape-acao .na-btn--cta{margin-left:auto}

/* ---------- 15. Janela e menu suspenso ---------- */
.na-janela{width:min(520px,calc(100vw - 2 * var(--margem)));padding:0;border:1px solid var(--linha);border-radius:var(--r-caixa);background:var(--sup);color:var(--texto);box-shadow:var(--sombra)}
.na-janela::backdrop{background:rgba(10,0,20,.55)}
.na-janela__corpo{display:grid;gap:var(--e-4);padding:var(--e-6)}
.na-janela__corpo h3{font-size:20px;font-weight:300}
.na-janela__corpo h3 strong{font-weight:700;color:var(--destaque)}
.na-janela__fim{display:flex;justify-content:flex-end;gap:var(--e-2);padding:var(--e-4) var(--e-6);border-top:1px solid var(--linha)}
.na-suspenso{position:relative}
.na-suspenso summary{list-style:none}
.na-suspenso summary::-webkit-details-marker{display:none}
.na-suspenso__caixa{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:200px;padding:var(--e-1);border:1px solid var(--linha);border-radius:var(--r-campo);background:var(--sup);box-shadow:var(--sombra)}
.na-suspenso__caixa button,.na-suspenso__caixa a{display:flex;align-items:center;gap:var(--e-2);width:100%;min-height:36px;padding:0 var(--e-3);border-radius:8px;font-size:13px;text-align:left}
.na-suspenso__caixa button:hover,.na-suspenso__caixa a:hover{background:var(--sup-2)}

/* ---------- 16. Grades de tela ---------- */
.na-grade-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e-4)}
.na-grade-ficha{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr) minmax(260px,320px);gap:var(--e-4);align-items:start}
.na-grade-painel{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--e-4);align-items:start}
@media (max-width:1200px){.na-grade-ficha{grid-template-columns:minmax(260px,320px) minmax(0,1fr)}.na-grade-ficha>:last-child{grid-column:1/-1}}
@media (max-width:860px){.na-grade-2,.na-grade-ficha,.na-grade-painel{grid-template-columns:1fr}}

/* menos movimento */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---------- 17. Celular: nada passa da largura da tela ---------- */
.na-abas{max-width:100%;overflow-x:auto;scrollbar-width:none}
.na-abas::-webkit-scrollbar{display:none}
@media (max-width:860px){
  .na-topo .na-topo__busca{display:none}
  .na-principal{min-width:0;overflow-x:clip}
  .na-tela__acoes{margin-left:0;width:100%}
  .na-barra__fim{margin-left:0;width:100%}
  .na-barra__fim .na-busca{width:100%!important}
  .na-linha{grid-template-columns:minmax(0,1fr);gap:var(--e-2)}
  .na-linha>:nth-child(2),.na-linha>:nth-child(3){display:inline-flex}
  .na-linha__valor{text-align:left}
  .na-linha__acoes{justify-content:flex-start}
}
.na-tela>*,.na-barra>*{min-width:0}
@media (max-width:860px){
  .na-passos{gap:var(--e-2) var(--e-4)}
  .na-passo+.na-passo::before{display:none}
  .na-rodape-acao .na-tela__resumo{display:none}
}

/* ---------- Caixa com cor = FAIXA SOLTA (Anderson 02/11/2026, modelo B) ----------
   Toda caixa que carrega uma cor (etapa, situação, aviso): caixa toda redonda e a cor
   num tracinho em pílula por dentro, que não encosta nos cantos. Nunca borda lateral que curva com o canto.
   Uso: <div class="na-caixa-cor" style="--cor:var(--ok)">…</div> */
.na-caixa-cor{position:relative;border-radius:var(--r-caixa);padding-left:calc(var(--e-4) + 18px) !important}
.na-caixa-cor::before{content:"";position:absolute;left:14px;top:14px;bottom:14px;width:4px;border-radius:var(--r-pilula);background:var(--cor,var(--destaque))}

/* ---------- 3 ANDARES: zona e cartão (Anderson 02/11/2026, "gostei") ----------
   Página (--andar-1) → zona (--andar-2) com cabeçalho e rodapé de ação → cartão (--andar-3, sombra).
   Separar por degrau de tom e relevo, quase sem borda. Cor só com significado: estado muda o cartão inteiro. */
.na-zona{display:flex;flex-direction:column;min-width:0;background:var(--andar-2);border-radius:var(--r-caixa)}
.na-zona__cabeca{padding:var(--e-4) var(--e-4) var(--e-2)}
.na-zona__titulo{display:flex;align-items:center;gap:var(--e-2);font-size:14px;font-weight:700;color:var(--texto)}
.na-zona__titulo .na-ponto{width:9px;height:9px;border-radius:50%;background:var(--cor,var(--destaque));flex:none}
.na-zona__numeros{display:flex;gap:var(--e-4);margin-top:6px;font-size:12px;color:var(--texto-2)}
.na-zona__numeros b{color:var(--texto);font-weight:600}
.na-zona__corpo{display:grid;gap:var(--e-3);padding:var(--e-2) var(--e-3);align-content:start}
.na-zona__rodape{margin-top:auto;display:flex;align-items:center;gap:var(--e-2);padding:var(--e-3) var(--e-4) var(--e-4);font-size:13px;font-weight:600;color:var(--texto-2)}
.na-zona__rodape:hover{color:var(--texto)}
/* cartão de zona (.na-cartao-zona; o .na-cartao antigo continua para painéis): esqueleto fixo, sempre nesta ordem: etiquetas → título → apoio → dados (ícone) → rodapé */
.na-cartao-zona{position:relative;display:grid;gap:8px;background:var(--andar-3);border-radius:var(--r-caixa);box-shadow:var(--sombra-cartao);padding:var(--e-3) var(--e-4) var(--e-3) calc(var(--e-4) + 10px);transition:background-color var(--t-rapido) ease,transform var(--t-rapido) ease}
.na-cartao-zona:hover{background:var(--andar-3-hover);transform:translateY(-1px)}
.na-cartao-zona::before{content:"";position:absolute;left:10px;top:14px;bottom:14px;width:4px;border-radius:var(--r-pilula);background:var(--cor,transparent)}
.na-cartao-zona__etiquetas{display:flex;gap:4px}
.na-cartao-zona__etiquetas>span{height:4px;width:22px;border-radius:var(--r-pilula);background:var(--etiqueta,var(--texto-3))}
.na-cartao-zona__titulo{font-weight:700;font-size:14px;line-height:1.25}
.na-cartao-zona__apoio{font-size:12px;color:var(--texto-2);margin-top:3px}
.na-cartao-zona__dados{display:flex;align-items:center;gap:var(--e-3);font-size:12px;color:var(--texto-2)}
.na-cartao-zona__dados b{color:var(--texto);font-weight:700}
.na-cartao-zona__rodape{display:flex;align-items:center;gap:var(--e-2);font-size:11px;color:var(--texto-3)}
.na-cartao-zona--alerta{background:color-mix(in srgb,var(--erro) var(--alerta-tinta,10%),var(--andar-3))}
[data-tema="claro"] .na-cartao-zona--alerta{--alerta-tinta:5%}
.na-cartao-zona--alerta .na-cartao-zona__titulo,.na-cartao-zona--alerta .na-cartao-zona__alerta{color:var(--erro)}

/* ---------- Menu em blocos (Anderson 02/11/2026, "muito bom") ----------
   Cada grupo do menu é um bloco um degrau acima do menu (lógica dos 3 andares); item ativo = cartão (andar 3 + sombra).
   Grupo que é um caminho em etapas leva o número em bolinha roxa com número verde (padrão Narro). */
.na-menu__bloco{display:grid;gap:2px;padding:var(--e-2);background:var(--andar-2);border-radius:var(--r-caixa)}
.na-menu__bloco .na-menu__grupo{margin:var(--e-1) 0 var(--e-2);padding:0 var(--e-2)}
.na-menu__bloco .na-menu__item[aria-current="page"]{background:var(--andar-3);box-shadow:var(--sombra-cartao)}
.na-menu__bloco .na-menu__item:hover:not([aria-current="page"]){background:color-mix(in srgb,var(--andar-3) 55%,transparent)}
.na-menu__passo{margin-left:auto;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--marca-roxo);color:var(--marca-verde);font-size:11px;font-weight:700}
@media (max-width:860px){.na-menu__bloco{display:contents}.na-menu__bloco.na-menu__fim{display:none}.na-menu__passo{display:none}}

/* ---------- Lista com linhas (Anderson 02/11/2026: "a gente precisa ter linha para separar") ----------
   Mesmo padrão da tabela: linha fina entre um item e outro, o último sem linha. Para toda lista dentro de cartão. */
.na-lista-linhas>*{padding:var(--e-3) 0}
.na-lista-linhas>*+*{border-top:1px solid transparent;border-image:var(--linha-acabada) 1}
.na-lista-linhas>:first-child{padding-top:0}
.na-lista-linhas>:last-child{padding-bottom:0}

/* ---------- LINHA COM ACABAMENTO = padrão do sistema (Anderson 02/11/2026) ----------
   Toda linha de separação começa num degradê leve, fica cheia no meio e termina num degradê leve.
   Token --linha-acabada (fundo de 1 px ou border-image). Peça solta: .na-divisor. */
:root{--linha-acabada:linear-gradient(90deg,transparent 0%,var(--linha) 9%,var(--linha) 91%,transparent 100%)}
.na-divisor{height:1px;border:0;margin:var(--e-3) 0;background:var(--linha-acabada)}
.na-tabela td{border-bottom:0}
.na-tabela tbody tr{background:var(--linha-acabada) bottom/100% 1px no-repeat}
.na-tabela tbody tr:last-child{background:none}

/* ===== PÁGINA E GRUPOS (02/11/2026, pedido do Anderson: "um padrão com espaçamento, com título para cada grupo")
   Toda tela: .na-pagina (margem 24 px; 16 no celular; 16 px entre um grupo e outro).
   Todo grupo: .na-grupo (cartão, 20 px por dentro, 12 px do título até o conteúdo) SEMPRE com .na-grupo__titulo.
   Rótulo de campo continua sendo .na-rotulo (pequeno, maiúsculas); título de grupo é .na-grupo__titulo. */
.na-pagina{flex:1;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e-4);align-content:start;padding:var(--e-6)}
@media (max-width:640px){.na-pagina{padding:var(--e-4)}}
.na-grupo{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e-3);padding:var(--e-5)}
.na-grupo__titulo{display:flex;align-items:center;gap:var(--e-3);margin:0;font-size:15px;line-height:1.3;font-weight:700;color:var(--texto)}
.na-grupo__titulo .na-passo b{flex-shrink:0}
.na-grupo__sub{margin:calc(-1 * var(--e-2)) 0 0;font-size:13px;line-height:1.45;color:var(--texto-2)}


/* =====================================================================
   COR VIVA COM HIERARQUIA (02/11/2026 · estudo aplicativos/estudo-cores.html, "aplique tudo")
   · 3 TEMAS que a pessoa escolhe: claro · grafite (escuro neutro) · escuro (roxo)
   · COR POR ÁREA do caminho: cada passo tem a sua cor (menu, ícones, cartões). <body data-area="...">
   · 1 AÇÃO PRINCIPAL por tela, verde cheio em todos os temas (.na-btn--cta); o resto em contorno
   · CARTÃO em 3 jeitos que a pessoa escolhe: <html data-cartao="a|b|d"> (C, cor cheia, foi reprovado)
   · Texto em cima de cor SEMPRE medido: --sobre-area (escuro no escuro, branco no claro)
   · Regra: DELICADO, não chamativo ("muito agressivo, pouco delicado" foi reprovado)
   ===================================================================== */
:root,[data-tema="escuro"],[data-tema="grafite"]{
  --area-dia:#65d600; --area-captacao:#3dcfff; --area-relacionamento:#ff7a5c; --area-vendas:#34e0a1; --area-resultados:#b794ff; --area-automacao:#ff86b4;
  --sobre-area:#140024;
}
[data-tema="claro"]{
  --area-dia:#3d8a00; --area-captacao:#0079b8; --area-relacionamento:#c43a22; --area-vendas:#087a54; --area-resultados:#6a3fd1; --area-automacao:#b62e66;
  --sobre-area:#ffffff;
  /* ação principal verde também no claro (antes era roxo: "tudo roxo, botão roxo") */
  --cta:#65d600; --cta-texto:#10001f; --cta-hover:#71e20c; /* verde vivo: texto escuro com contraste 11:1 */
}
/* GRAFITE: escuro neutro, o roxo fica só na marca */
[data-tema="grafite"]{
  --fundo:#141318; --menu:#0f0e13; --andar-1:var(--fundo); --andar-2:#1d1c23; --andar-3:#27262f; --andar-3-hover:#2f2e38;
  --sup-campo:#18171d; --faixa-fundo:#101014;
  --sombra-cartao:0 1px 0 rgba(255,255,255,.04) inset,0 6px 18px rgba(0,0,0,.35);
  --sombra:0 12px 40px rgba(0,0,0,.5);
  --tom-a:#1d1c23; --tom-b:#1d1c23; --tom-c:#1d1c23; --tom-d:#1d1c23; --tom-e:#1d1c23;
}
:root{--area:var(--area-dia)}
[data-area="dia"]{--area:var(--area-dia)}
[data-area="captacao"]{--area:var(--area-captacao)}
[data-area="relacionamento"]{--area:var(--area-relacionamento)}
[data-area="vendas"]{--area:var(--area-vendas)}
[data-area="resultados"]{--area:var(--area-resultados)}
[data-area="automacao"]{--area:var(--area-automacao)}

/* menu com a cor de cada área */
.na-menu__item[data-area] .na-ic,.na-menu__item[data-area] svg{color:var(--area)}
.na-menu__item[data-area][aria-current="page"]{background:color-mix(in srgb,var(--area) 18%,var(--andar-3))}
.na-menu__item[data-area] .na-menu__passo{background:var(--area);color:var(--sobre-area)}

/* ícone delicado da área: fundo leve, desenho na cor */
.na-ic-area{display:inline-grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--area) 16%,transparent);color:var(--area)}

/* CARTÃO · B degradê (a cor só sussurra no canto) · D sombra chapada (shape liso, 4 px, sem desfoque) · A liso */
html[data-cartao="b"] :is(.card,.na-grupo,.na-cartao-zona){background:linear-gradient(160deg,color-mix(in srgb,var(--area) 11%,var(--andar-3)) 0%,var(--andar-3) 45%)}
html[data-cartao="b"][data-tema="claro"] :is(.card,.na-grupo,.na-cartao-zona){background:linear-gradient(160deg,color-mix(in srgb,var(--area) 7%,#fff) 0%,#fff 45%)}
html[data-cartao="d"] :is(.card,.na-grupo,.na-cartao-zona){box-shadow:4px 4px 0 0 color-mix(in srgb,var(--area) 26%,var(--andar-1))}
html[data-cartao="d"][data-tema="claro"] :is(.card,.na-grupo,.na-cartao-zona){box-shadow:4px 4px 0 0 color-mix(in srgb,var(--area) 20%,var(--fundo))}
html[data-cartao="d"] :is(a,button).card:hover,html[data-cartao="d"] a:hover>.card{box-shadow:5px 5px 0 0 color-mix(in srgb,var(--area) 36%,var(--andar-1));transform:translate(-1px,-1px)}

/* AÇÕES DA LINHA (subir, descer, duplicar, tirar) só aparecem ao passar o mouse ou focar a linha
   ("como alguém vai saber tanta coisa"); no celular, sempre visíveis */
.na-acoes-linha{display:flex;align-items:center;gap:var(--e-1);opacity:0;transition:opacity .15s}
:is(li,div,tr):hover>.na-acoes-linha,:is(li,div,tr):hover>*>.na-acoes-linha,.na-acoes-linha:focus-within{opacity:1}
@media (hover:none){.na-acoes-linha{opacity:1}}

/* GRUPO QUE ABRE E FECHA no menu (02/11: "Ajustes oculto com uma setinha; clica e abre"; sem buraco antes dele) */
.na-menu__bloco--abre{margin-top:0}
.na-menu__abre{display:flex;align-items:center;gap:var(--e-2);width:100%;margin:var(--e-1) 0 0;padding:0 var(--e-2);border:0;background:none;cursor:pointer;
  font-size:10px;font-weight:500;letter-spacing:var(--tracking-rotulo);text-transform:uppercase;color:var(--texto-3);font-family:inherit}
.na-menu__abre:hover{color:var(--texto-2)}
.na-menu__abre .na-ic,.na-menu__abre svg{width:14px;height:14px;margin-left:auto;transition:transform .2s}
.na-menu__abre[aria-expanded="true"] .na-ic,.na-menu__abre[aria-expanded="true"] svg{transform:rotate(90deg)}
.na-menu__bloco--abre:not(:has(.na-menu__abre[aria-expanded="true"])){padding-bottom:var(--e-3)}

/* marcar e escolher (caixinha, bolinha, régua) sempre no verde da ação, nunca o azul clarinho do navegador (02/11) */
:root{accent-color:var(--cta)}
input[type="checkbox"],input[type="radio"],input[type="range"]{accent-color:var(--cta);width:18px;height:18px}
input[type="range"]{width:auto;height:auto}

/* GRUPO COM A LINHA PADRÃO EM CIMA (02/11: "a linha em degradezinho separando cada grupo, senão não dá para entender")
   Use em cada grupo de uma ficha ou formulário longo (menos o primeiro). A linha some sozinha se o grupo não aparecer. */
.na-com-linha{padding-top:var(--e-4);background:var(--linha-acabada) top left/100% 1px no-repeat}

/* =====================================================================
   ESTILO ESCOLHIDO = UM LUGAR SÓ (02/11/2026, Anderson: "uma forma rápida de alterar em tudo, o padrão")
   <html data-cartao="a|b|d"> (Aparência › Cartão) manda em TODAS as superfícies e no passar do mouse.
   Toda peça lê só estes 4 tokens; para mudar o jeito de tudo, muda aqui:
     --estilo-fundo(cor)  fundo de cartão/bloco      --estilo-sombra   relevo de cartão/bloco
     --brilho-hover       passar o mouse             --barra           barra de progresso
   A · LISO ............ cor chapada; mouse só troca o fundo; sem brilho; barra de cor única
   B · DEGRADÊ DELICADO  a cor sussurra no canto; brilho leve no mouse; barra em degradê
   D · SOMBRA CHAPADA .. cor chapada + sombra de 4 px sem desfoque; mouse = sombra chapada; barra de cor única
   ===================================================================== */
html[data-cartao="a"],html[data-cartao="d"]{--barra:var(--destaque);--barra-brilho:none}
html[data-cartao="a"]{--brilho-hover:none;--sombra-cartao:none} /* liso = plano: nada de relevo, separa só pelo tom do andar */
html[data-cartao="d"]{--brilho-hover:3px 3px 0 0 color-mix(in srgb,var(--area) 34%,transparent)}
html[data-cartao="b"]{--brilho-hover:0 0 0 3px color-mix(in srgb,var(--area) 14%,transparent)}
/* blocos de número e destaque: degradê só no B */
html[data-cartao="a"] :is(.na-numero,.na-bloco,.na-bloco--destaque),
html[data-cartao="d"] :is(.na-numero,.na-bloco,.na-bloco--destaque){background:var(--tom)!important}
html[data-cartao="d"] :is(.na-numero,.na-bloco){box-shadow:4px 4px 0 0 color-mix(in srgb,var(--area) 22%,var(--andar-1))}
/* no liso, cartão e grupo sem relevo extra: só a cor do andar */
html[data-cartao="a"] :is(.card,.na-grupo,.na-cartao-zona){background:var(--andar-3)}

/* =====================================================================
   CARA VIVA (02/11/2026, item 1 da revisão · protótipo "claro-relacionamento" aprovado para seguir)
   Lógica: o FUNDO define a zona; cada bloco é uma peça separada; cor por ASSUNTO (tom pastel) e por SITUAÇÃO (etiqueta).
   Peças: .na-resumo + .na-res (cartão-resumo), .na-bloco-v (bloco branco com cabeçalho), .na-pecas (linhas como peças),
          .na-ic-tom (ícone em quadradinho colorido), .na-etiqueta--cinza, .na-medida (barrinha de resultado).
   Cor por assunto: classe .tom-roxo | -azul | -verde | -laranja | -amarelo | -rosa | -cinza (define --c e --f).
   ===================================================================== */
:root,[data-tema="escuro"],[data-tema="grafite"]{
  --tom-roxo:#b79cff;--tom-azul:#6cc6ff;--tom-verde:#5fd38a;--tom-laranja:#ff9a70;--tom-amarelo:#f2c14e;--tom-rosa:#ff86b4;--tom-cinza:#a9a4b3;
  --tom-mistura:22%;--peca:var(--andar-2);--bloco-v:var(--andar-3)}
[data-tema="claro"]{
  --tom-roxo:#6f4ef2;--tom-azul:#0a74b8;--tom-verde:#23864a;--tom-laranja:#d24f1f;--tom-amarelo:#a26f00;--tom-rosa:#b62e66;--tom-cinza:#6b6774;
  --tom-mistura:13%;--peca:#f4f2f8;--bloco-v:#ffffff}
.tom-roxo{--c:var(--tom-roxo)}.tom-azul{--c:var(--tom-azul)}.tom-verde{--c:var(--tom-verde)}.tom-laranja{--c:var(--tom-laranja)}
.tom-amarelo{--c:var(--tom-amarelo)}.tom-rosa{--c:var(--tom-rosa)}.tom-cinza{--c:var(--tom-cinza)}
:is(.tom-roxo,.tom-azul,.tom-verde,.tom-laranja,.tom-amarelo,.tom-rosa,.tom-cinza){--f:color-mix(in srgb,var(--c) var(--tom-mistura),var(--bloco-v))}

/* cartão-resumo: compacto, pastel por assunto, número na cor */
.na-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--e-3)}
.na-res{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);padding:var(--e-3) var(--e-4);border-radius:var(--r-caixa);background:var(--f,var(--sup-2));color:var(--c,var(--texto));min-height:72px}
.na-res>div>span{display:block;font-size:12px;font-weight:600;color:var(--texto-2)}
.na-res b{display:block;font-size:24px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.na-res .na-ic-tom{background:color-mix(in srgb,var(--bloco-v) 70%,transparent)}

/* bloco: peça branca sobre o fundo da zona, com cabeçalho (título + para que serve + ferramentas) */
.na-bloco-v{display:grid;gap:var(--e-3);padding:var(--e-5);border-radius:var(--r-caixa);background:var(--bloco-v)}
.na-bloco-v__cabeca{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3)}
.na-bloco-v__cabeca h2{margin:0;font-size:16px;font-weight:700}
.na-bloco-v__cabeca p{margin:2px 0 0;font-size:12.5px;color:var(--texto-3)}
.na-bloco-v__fim{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--e-2);align-items:center}

/* linhas como peças separadas (no lugar da lista com risquinhos) */
.na-pecas{display:grid;gap:var(--e-2)}
.na-pecas>*{display:grid;align-items:center;gap:var(--e-4);padding:var(--e-3) var(--e-4);border-radius:var(--r-campo);background:var(--peca);color:inherit;text-decoration:none;transition:background-color var(--t-rapido) ease}
.na-pecas>:hover{background:color-mix(in srgb,var(--peca) 82%,var(--area))}

/* ícone em quadradinho colorido */
.na-ic-tom{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--f,var(--sup-2));color:var(--c,var(--texto-2))}
.na-ic-tom svg{width:20px;height:20px}

/* etiqueta de situação: pastel cheio, letra forte */
.na-etiqueta{font-weight:600}
.na-etiqueta--cinza{background:color-mix(in srgb,var(--tom-cinza) var(--tom-mistura),var(--bloco-v));color:var(--tom-cinza)}
.na-etiqueta--tom{background:var(--f);color:var(--c)}

/* barrinha de resultado (abriram, clicaram) */
.na-medida{display:grid;grid-template-columns:64px 1fr 40px;align-items:center;gap:var(--e-2);font-size:11.5px;color:var(--texto-2)}
.na-medida i{height:6px;border-radius:999px;background:var(--bloco-v);overflow:hidden}
.na-medida i em{display:block;height:100%;width:var(--v,0%);border-radius:999px;background:var(--c,var(--destaque))}
.na-medida b{text-align:right;color:var(--texto);font-variant-numeric:tabular-nums}

/* abas da página no claro: caixa branca, aba ativa escura, com contagem */
.na-abas-pagina{display:flex;gap:4px;padding:4px;border-radius:var(--r-caixa);background:var(--bloco-v);width:max-content;max-width:100%;overflow-x:auto}
.na-abas-pagina a{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:calc(var(--r-caixa) - 4px);font-size:13px;font-weight:600;color:var(--texto-2);white-space:nowrap;text-decoration:none}
.na-abas-pagina a:hover{color:var(--texto);background:var(--peca)}
.na-abas-pagina a[aria-current="page"]{background:var(--texto);color:var(--fundo)}
.na-abas-pagina a span{padding:1px 7px;border-radius:999px;background:var(--peca);font-size:11px}
.na-abas-pagina a[aria-current="page"] span{background:color-mix(in srgb,var(--fundo) 20%,transparent);color:inherit}

/* menu: cada ícone num quadradinho na cor da área (dia a dia com tons próprios) */
.na-menu__item .na-menu__tom{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:10px;background:var(--f);color:var(--c)}
.na-menu__item .na-menu__tom svg{width:18px;height:18px}
.na-menu__item[aria-current="page"]{background:var(--f,var(--sup-2))}
.na-menu__item[data-area] .na-menu__tom svg,.na-menu__item .na-menu__tom svg{color:inherit}
/* cara viva: o rótulo do cartão-resumo não pinta o ícone */
.na-res .na-ic-tom{color:var(--c)}
/* TODAS as listas do sistema viram peças separadas (sem risquinho entre linhas) */
.na-lista-linhas{display:grid;gap:var(--e-2)}
.na-lista-linhas>*,.na-lista-linhas>:first-child,.na-lista-linhas>:last-child{padding:var(--e-3) var(--e-4)!important;margin-inline:0!important;border-radius:var(--r-campo);background:var(--peca)}
.na-lista-linhas>*+*{border-top:0;border-image:none}
.na-lista-linhas>:is(a,button,[role="button"]):hover,.na-lista-linhas>:hover{background:color-mix(in srgb,var(--peca) 82%,var(--area))}
/* faixa de aviso no tom amarelo pastel */
.na-faixa-tom{display:flex;align-items:center;gap:var(--e-3);padding:var(--e-3) var(--e-4);border-radius:var(--r-caixa);background:var(--f);color:var(--texto);font-size:13px}
.na-faixa-tom>.na-ic-tom{background:var(--bloco-v)}

/* LISTAS NO PADRÃO DO MERCADO (02/11/2026, item 7): abas com contagem + busca, período e ordenar; menu ⋮ por linha */
.na-barra-lista{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3)}
.na-barra-lista__abas{display:flex;gap:4px;padding:4px;border-radius:var(--r-campo);background:var(--peca)}
.na-barra-lista__abas button{display:flex;align-items:center;gap:6px;padding:6px 12px;border:0;border-radius:calc(var(--r-campo) - 3px);background:transparent;font:600 12.5px var(--fonte);color:var(--texto-2);cursor:pointer;white-space:nowrap}
.na-barra-lista__abas button span{padding:0 6px;border-radius:999px;background:var(--bloco-v);font-size:11px}
.na-barra-lista__abas button[aria-selected="true"]{background:var(--texto);color:var(--fundo)}
.na-barra-lista__abas button[aria-selected="true"] span{background:color-mix(in srgb,var(--fundo) 22%,transparent);color:inherit}
.na-barra-lista__ferramentas{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--e-2)}
.na-barra-lista__busca{display:flex;align-items:center;gap:6px;min-width:220px;padding:0 10px;border-radius:var(--r-campo);background:var(--peca);color:var(--texto-3)}
.na-barra-lista__busca input{flex:1;min-width:0;height:36px;border:0;background:transparent;font:500 13px var(--fonte);color:var(--texto);outline:0}
.na-barra-lista__sel{height:36px;padding:0 10px;border:0;border-radius:var(--r-campo);background:var(--peca);font:600 12.5px var(--fonte);color:var(--texto-2);cursor:pointer}
.na-menu-linha{position:relative}
.na-menu-linha__caixa{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:180px;display:grid;padding:var(--e-1);border:1px solid var(--linha);border-radius:var(--r-campo);background:var(--bloco-v);box-shadow:var(--sombra)}
.na-menu-linha__caixa>*{display:flex;align-items:center;gap:var(--e-2);padding:8px 10px;border:0;border-radius:calc(var(--r-campo) - 3px);background:transparent;font:500 13px var(--fonte);color:var(--texto);text-decoration:none;text-align:left;cursor:pointer}
.na-menu-linha__caixa>:hover{background:var(--peca)}
.na-menu-linha__perigo{color:var(--erro)!important}

/* MENU POR ÍCONES + SUBMENU (02/11/2026, item 8): recolhe para só ícones; ao passar o mouse, as partes de cada área */
html[data-menu="icones"]{--menu-largura:84px}
html[data-menu="icones"] .na-menu :is(.na-menu__grupo,.na-menu__item>span:not(.na-menu__tom),.na-menu__passo,.na-marca-app,.na-menu__abre){display:none}
html[data-menu="icones"] .na-menu__item{justify-content:center;padding:0}
html[data-menu="icones"] .na-menu__marca{justify-content:center;padding:0}
html[data-menu="icones"] .na-menu__marca svg{width:44px!important}
.na-menu__sub{position:fixed;z-index:80;min-width:210px;display:grid;gap:2px;padding:var(--e-2);border:1px solid var(--linha);border-radius:var(--r-caixa);background:var(--bloco-v,var(--sup));box-shadow:var(--sombra)}
.na-menu__sub b{padding:6px 10px 4px;font-size:10px;font-weight:600;letter-spacing:var(--tracking-rotulo);text-transform:uppercase;color:var(--texto-3)}
.na-menu__sub a{display:flex;align-items:center;gap:var(--e-2);padding:8px 10px;border-radius:var(--r-campo);font-size:13.5px;font-weight:500;color:var(--texto-2);text-decoration:none}
.na-menu__sub a:hover,.na-menu__sub a[aria-current="page"]{background:var(--peca,var(--sup-2));color:var(--texto)}
.na-menu__recolher{display:flex;align-items:center;gap:var(--e-2);margin-top:auto;padding:8px 10px;border:0;border-radius:var(--r-campo);background:transparent;font:500 12px var(--fonte);color:var(--texto-3);cursor:pointer}
.na-menu__recolher:hover{background:var(--sup);color:var(--texto)}
html[data-menu="icones"] .na-menu__recolher{justify-content:center}
html[data-menu="icones"] .na-menu__recolher span{display:none}
/* painel do funil (item 10): passos lado a lado, setas com a % de passagem */
.na-painel-funil{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e-2)}
.na-painel-funil__passo{position:relative;display:flex;align-items:stretch;gap:var(--e-2)}
.na-painel-funil__passo>.na-res{flex:1;min-height:96px}
.na-painel-funil__passo .na-res small{display:block;margin-top:2px;font-size:11px;color:var(--texto-3)}
.na-painel-funil__seta{display:grid;place-items:center;align-content:center;gap:2px;min-width:44px;color:var(--texto-3)}
.na-painel-funil__seta b{font-size:12px;color:var(--texto)}
@media (max-width:900px){.na-painel-funil{grid-template-columns:1fr 1fr}}
.na-etiqueta--p{min-height:20px;padding:0 8px;font-size:11px}

/* ícone SEMPRE no centro do quadradinho (02/11: "muitos ícones descentralizados") */
.na-ic-tom,.na-ic-area,.na-res .na-ic-tom{display:inline-grid!important;place-items:center;line-height:0}
:is(.na-ic-tom,.na-ic-area,.na-menu__tom,.na-redondo) svg{display:block;margin:auto}
/* cartão institucional da Narro no menu (item 13): foto na aspa oficial + assinatura */
.na-menu__narro{display:flex;align-items:center;gap:var(--e-4);margin-top:var(--e-3);padding:var(--e-4) var(--e-5) var(--e-4) var(--e-4);border-radius:var(--r-caixa);background:var(--marca-roxo-escuro);color:#fff;text-decoration:none;overflow:hidden}
.na-menu__narro-aspa{flex:none;width:52px;height:80px;overflow:visible}
.na-menu__narro-frase{font:300 17px/1.22 "MADE Tommy",var(--fonte);letter-spacing:-.02em;color:#fff;padding-right:var(--e-2)}
.na-menu__narro-frase b{font-weight:700}
.na-menu__narro:hover{box-shadow:var(--brilho-hover)}
html[data-menu="icones"] .na-menu__narro{display:none}
@media (max-width:767px){.na-menu__narro{display:none}}
/* resumo no topo da ficha do contato (revisão RD): frase com o engajamento + quatro números */
.na-resumo-ficha{display:grid;gap:var(--e-3);padding:var(--e-4) var(--e-5);border-bottom:1px solid var(--linha)}
.na-resumo-ficha__frase{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);margin:0;font-size:13.5px;line-height:1.5;color:var(--texto)}
.na-resumo-ficha__numeros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e-2)}
.na-resumo-ficha__numeros .na-res{min-height:0;padding:10px 12px;text-align:left;cursor:pointer;border:0}
.na-resumo-ficha__numeros .na-res b{font-size:20px}
@media (max-width:640px){.na-resumo-ficha__numeros{grid-template-columns:1fr 1fr}}

/* #####################################################################
   PAINEL DE CONTROLE DOS ESTILOS · Viva · Leve · Cinza (6.12, 04/11/2026)
   Pedido do Anderson: "integrar a forma de mudar isso para... fazer uma mudança só e alterar tudo".
   COMO MUDAR: mexa SÓ na parte A (uma tabela por estilo). A parte B só lê a tabela; não precisa tocar.
   Quem escolhe: cada pessoa, em Aparência > Estilo (fica no aparelho). <html data-estilo="viva|leve|cinza">.
   Viva e Leve = tema claro; Cinza = tema escuro (data-tema="grafite"). Protótipos: docs/narro-flow/prototipos/
   inicio-variacoes.html (telas) e botoes-afundar.html (botão "Tecla", aprovado).
   Regra de cada estilo (04/11): Viva = tudo vivo · Leve = tudo suave · Cinza = tudo escuro com as cores no extremo.
   ##################################################################### */

/* ============ A · TABELA DE CADA ESTILO (mudou aqui, mudou no sistema todo) ============ */

/* A.1 · FORMA (vale nos 3) */
html[data-estilo]{
  --r-caixa:22px;            /* curva dos cartões e caixas */
  --e-raio-painel:28px;      /* curva dos painéis grandes (Início) */
  --e-raio-campo:999px;      /* campos, buscas, seleções e abas = pílula */
  --e-raio-texto:18px;       /* caixa de texto grande */
  --e-raio-lg:14px;          /* "rounded-lg" escrito nas telas */
  --e-raio-xl:20px;          /* "rounded-xl / 2xl" escritos nas telas */
  --e-peca-topo:40px;        /* altura da busca e dos botões do topo */
  --e-busca-largura:220px;   /* largura da busca do topo */
  --e-tecla-altura:3px;      /* quanto o botão "afunda" */
  --e-tecla-cartao:4px;      /* quanto o cartão colorido "afunda" */
  --menu-ativo-texto:#ffffff;
}

/* A.2 · VIVA (claro, cores puras e fortes) */
html[data-tema="claro"][data-estilo="viva"]{
  --fundo:#f9f9fb; --andar-2:#f2f1f6; --sup-2:#f5f3fa; --peca:#f4f3f8;
  --tom-roxo:#7b2ff7; --tom-azul:#0a84ff; --tom-verde:#16a34a; --tom-laranja:#ff5b1f; --tom-amarelo:#f5a300; --tom-rosa:#f0287a; --tom-cinza:#6b6774;
  --area-dia:#4fb800; --area-captacao:#00b4d8; --area-relacionamento:#ff5b1f; --area-automacao:#f0287a; --area-vendas:#00a862; --area-resultados:#7b2ff7;
  --ok:#16a34a; --ok-fundo:#e3f8e9; --alerta:#e08a00; --alerta-fundo:#fff3d6; --erro:#e11d48; --erro-fundo:#ffe4ea; --info:#0a6fe0; --info-fundo:#e3f0ff;
  --tom-mistura:13%;                                   /* tom claro das peças pequenas (chips do fluxo, tags) */
  --e-forte-mistura:100%; --e-forte-base:#ffffff;      /* peças fortes (resumos, avisos, etiquetas, ícones) = COR CHEIA */
  --e-forte-texto:#ffffff; --e-forte-rotulo:rgba(255,255,255,.85); --e-forte-ic:rgba(255,255,255,.2);
  --destaque:#7b2ff7; --barra:linear-gradient(90deg,#5b16d9 0%,#7b2ff7 55%,#a66bff 100%);
  --barra-brilho:0 0 6px rgba(123,47,247,.45),0 0 14px rgba(123,47,247,.22); --foco:0 0 0 3px rgba(123,47,247,.25);
  --tom-a:#ece3ff; --tom-a-icone:#7b2ff7; --tom-b:#e3f8d4; --tom-b-icone:#3f9b00; --tom-c:#fff1cc; --tom-c-icone:#b86e00; --tom-d:#e1efff; --tom-d-icone:#0a6fe0; --tom-e:#ffe1ee; --tom-e-icone:#e0186d;
  --menu-ativo:#7b2ff7; --e-menu-ativo-mistura:100%; --e-menu-ativo-base:#ffffff; --e-menu-ativo-texto:#ffffff;   /* pílula do item aberto = a cor do ícone, cheia */
  --novo-peca:#ffffff; --novo-hover:rgba(20,20,30,.05); --novo-sombra-peca:0 1px 3px rgba(20,20,30,.06); --novo-campo-borda:var(--linha);
  --sombra-cartao:0 1px 2px rgba(20,20,30,.04),0 8px 24px rgba(20,20,30,.05);
  --tecla:rgba(20,20,30,.10); --tecla-cta:#4aa600; --brilho-hover:inset 0 0 0 1px rgba(20,20,30,.08);
  --ini-c1:#7b2ff7; --ini-c1-t:#ffffff; --ini-c2:#0a84ff; --ini-c2-t:#ffffff; --ini-c3:#f0287a; --ini-c3-t:#ffffff; --ini-cartao:#ffffff;
  --e-duotone:.7;            /* força da 2ª camada dos ícones */
}

/* A.3 · LEVE (claro, tons limpos e suaves) */
html[data-tema="claro"][data-estilo="leve"]{
  --fundo:#f3f5f7; --andar-2:#f2f1f6; --sup-2:#f5f3fa; --peca:#f4f3f8;
  --tom-roxo:#7b2ff7; --tom-azul:#0a84ff; --tom-verde:#16a34a; --tom-laranja:#ff5b1f; --tom-amarelo:#e69a00; --tom-rosa:#f0287a; --tom-cinza:#6b6774;
  --area-dia:#4fb800; --area-captacao:#00b4d8; --area-relacionamento:#ff5b1f; --area-automacao:#f0287a; --area-vendas:#00a862; --area-resultados:#7b2ff7;
  --ok:#16a34a; --ok-fundo:#e3f8e9; --alerta:#b86e00; --alerta-fundo:#fff3d6; --erro:#e11d48; --erro-fundo:#ffe4ea; --info:#0a6fe0; --info-fundo:#e3f0ff;
  --tom-mistura:30%;
  --e-forte-mistura:24%; --e-forte-base:#ffffff;       /* peças fortes = TOM CLARO LIMPO com texto escuro */
  --e-forte-texto:var(--texto); --e-forte-rotulo:var(--texto-2); --e-forte-ic:rgba(255,255,255,.65);
  --destaque:#7b2ff7; --barra:linear-gradient(90deg,#5b16d9 0%,#7b2ff7 55%,#a66bff 100%);
  --barra-brilho:0 0 6px rgba(123,47,247,.45),0 0 14px rgba(123,47,247,.22); --foco:0 0 0 3px rgba(123,47,247,.25);
  --tom-a:#ece3ff; --tom-a-icone:#7b2ff7; --tom-b:#e3f8d4; --tom-b-icone:#3f9b00; --tom-c:#fff1cc; --tom-c-icone:#b86e00; --tom-d:#e1efff; --tom-d-icone:#0a6fe0; --tom-e:#ffe1ee; --tom-e-icone:#e0186d;
  --menu-ativo:#17151c; --e-menu-ativo-mistura:26%; --e-menu-ativo-base:#ffffff; --e-menu-ativo-texto:var(--texto);   /* Leve: pílula no tom claro da cor */
  --novo-peca:#ffffff; --novo-hover:rgba(20,20,30,.05); --novo-sombra-peca:0 1px 3px rgba(20,20,30,.06); --novo-campo-borda:var(--linha);
  --sombra-cartao:0 1px 2px rgba(20,20,30,.04),0 8px 24px rgba(20,20,30,.05);
  --tecla:rgba(20,20,30,.10); --tecla-cta:#4aa600; --brilho-hover:inset 0 0 0 1px rgba(20,20,30,.08);
  --ini-c1:#d9f5a4; --ini-c1-t:#2c3a10; --ini-c2:#a6e3d8; --ini-c2-t:#0f3b34; --ini-c3:#f6b0bd; --ini-c3-t:#4a1520; --ini-cartao:#ffffff;
  --e-duotone:.7;
  --e-pagina:linear-gradient(135deg,#eef4f4 0%,#f6f6f9 45%,#eff2f7 100%);
}

/* A.4 · CINZA (escuro: fundo cinza-escuro, painéis grafite, cores no extremo) */
html[data-tema="grafite"][data-estilo="cinza"]{
  --fundo:#17171b; --andar-1:var(--fundo); --andar-2:#1c1c21; --andar-3:#212127; --andar-3-hover:#2a2a31;
  --sup:var(--andar-3); --sup-2:#2a2a31; --sup-campo:#1b1b20; --peca:#1c1c21; --bloco-v:var(--andar-3);
  --tom-roxo:#9b5cff; --tom-azul:#3aa0ff; --tom-verde:#34c96a; --tom-laranja:#ff7a45; --tom-amarelo:#ffbf3d; --tom-rosa:#ff4d94; --tom-cinza:#a9a9b4;
  --area-dia:#65d600; --area-captacao:#22d3ee; --area-relacionamento:#ff7a45; --area-automacao:#ff4d94; --area-vendas:#2fd58a; --area-resultados:#9b5cff;
  --ok:#34c96a; --alerta:#ffbf3d; --erro:#ff4d6d; --info:#3aa0ff;
  --tom-mistura:20%;
  --e-forte-mistura:100%; --e-forte-base:var(--andar-3); /* peças fortes = COR CHEIA, como no Viva */
  --e-forte-texto:#ffffff; --e-forte-rotulo:rgba(255,255,255,.85); --e-forte-ic:rgba(255,255,255,.2);
  --destaque:#9b5cff; --barra:linear-gradient(90deg,#7b2ff7 0%,#9b5cff 55%,#c4a3ff 100%);
  --tom-a:#2a2236; --tom-a-icone:#b993ff; --tom-b:#1f2c22; --tom-b-icone:#7ee08a; --tom-c:#302a1c; --tom-c-icone:#ffcf6b; --tom-d:#1c2736; --tom-d-icone:#7cbcff; --tom-e:#33202a; --tom-e-icone:#ff8ab8;
  --menu-ativo:#7b2ff7; --e-menu-ativo-mistura:100%; --e-menu-ativo-base:var(--andar-3); --e-menu-ativo-texto:#ffffff;
  --novo-peca:#2b2b32; --novo-hover:rgba(255,255,255,.06); --novo-sombra-peca:none; --novo-campo-borda:var(--linha);
  --tecla:rgba(0,0,0,.45); --tecla-cta:#4aa600; --brilho-hover:inset 0 0 0 1px rgba(255,255,255,.08);
  --ini-c1:#7b2ff7; --ini-c1-t:#ffffff; --ini-c2:#0a84ff; --ini-c2-t:#ffffff; --ini-c3:#f0287a; --ini-c3-t:#ffffff; --ini-cartao:#2a2a31;
  --e-duotone:.7;
}


/* ============ B · REGRAS (só leem a tabela; não precisa mexer para mudar cor ou medida) ============ */

/* B.1 · fundo da página e ícones */
html[data-estilo="leve"] :is(body,.mesh-bg){background:var(--e-pagina) fixed}
html[data-estilo] svg [opacity]{opacity:var(--e-duotone)}

/* B.2 · PEÇAS FORTES: resumos, faixas de aviso, etiquetas, ícones coloridos.
   Viva e Cinza = cor cheia com texto branco; Leve = tom claro com texto escuro (pela tabela: --e-forte-*) */
html[data-estilo] :is(.na-res,.na-faixa-tom,.na-etiqueta--tom){background:color-mix(in srgb,var(--c,var(--tom-cinza)) var(--e-forte-mistura),var(--e-forte-base));color:var(--e-forte-texto)}
html[data-estilo] .na-res>div>span{color:var(--e-forte-rotulo)}
html[data-estilo] .na-res b{color:var(--e-forte-texto)}
html[data-estilo] :is(.na-res,.na-faixa-tom) .na-ic-tom{background:var(--e-forte-ic);color:var(--e-forte-texto)}
html[data-estilo] .na-faixa-tom b{color:inherit}
html[data-estilo] .na-ic-tom:not(.na-res .na-ic-tom):not(.na-faixa-tom .na-ic-tom){background:color-mix(in srgb,var(--c,var(--tom-cinza)) var(--e-forte-mistura),var(--e-forte-base));color:var(--e-forte-texto)}
html[data-estilo] .na-etiqueta--ok{background:color-mix(in srgb,var(--ok) var(--e-forte-mistura),var(--e-forte-base));color:var(--e-forte-texto)}
html[data-estilo] .na-etiqueta--alerta{background:color-mix(in srgb,var(--alerta) var(--e-forte-mistura),var(--e-forte-base));color:var(--e-forte-texto)}
html[data-estilo] .na-etiqueta--erro{background:color-mix(in srgb,var(--erro) var(--e-forte-mistura),var(--e-forte-base));color:var(--e-forte-texto)}
html[data-estilo] .na-etiqueta--info{background:color-mix(in srgb,var(--info) var(--e-forte-mistura),var(--e-forte-base));color:var(--e-forte-texto)}
html[data-estilo] .na-aviso{background:color-mix(in srgb,var(--info) var(--e-forte-mistura),var(--e-forte-base));color:var(--e-forte-texto)}
html[data-estilo] .na-aviso--ok{background:color-mix(in srgb,var(--ok) var(--e-forte-mistura),var(--e-forte-base))}
html[data-estilo] .na-aviso--alerta{background:color-mix(in srgb,var(--alerta) var(--e-forte-mistura),var(--e-forte-base))}
html[data-estilo] .na-aviso--erro{background:color-mix(in srgb,var(--erro) var(--e-forte-mistura),var(--e-forte-base))}

/* B.3 · MENU LATERAL (computador): sem caixas, ícone numa bolinha, item ativo = pílula cheia */
@media (min-width:861px){
  html[data-estilo] .na-menu{background:transparent;border-right:0;gap:var(--e-4);padding:var(--e-5) var(--e-4);overflow-y:auto;scrollbar-width:none}
  html[data-estilo] .na-menu > *{flex-shrink:0}
  html[data-estilo] .na-menu__bloco{background:transparent;padding:0;gap:4px}
  html[data-estilo] .na-menu__grupo{margin:0 0 var(--e-2);padding:0 var(--e-3);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--texto-3)}
  html[data-estilo] .na-menu__item{min-height:46px;padding:0 6px;border-radius:999px;font-size:14px;font-weight:500;color:var(--texto)}
  html[data-estilo] .na-menu__item .na-menu__tom :is(.na-ic,svg){color:inherit}
  /* cada ícone com a sua cor viva; mouse em cima = a bolinha fica inteira na cor e o ícone branco (04/11) */
  html[data-estilo] .na-menu__item .na-menu__tom{width:34px;height:34px;border-radius:50%;background:var(--novo-peca);color:var(--c,var(--texto));box-shadow:var(--novo-sombra-peca);transition:background-color .15s ease,color .15s ease}
  html[data-estilo] .na-menu__item:hover:not([aria-current="page"]) .na-menu__tom{background:var(--c,var(--texto));color:#ffffff}
  html[data-estilo] .na-menu__item:hover:not([aria-current="page"]){background:var(--novo-hover);box-shadow:none}
  /* item aberto = pílula na COR DO PRÓPRIO ÍCONE (04/11: "ele clicou, fica verde; o laranjinha fica laranja") */
  html[data-estilo] .na-menu__item[aria-current="page"]{background:color-mix(in srgb,var(--menu-cor,var(--menu-ativo)) var(--e-menu-ativo-mistura),var(--e-menu-ativo-base));color:var(--e-menu-ativo-texto);box-shadow:none}
  html[data-estilo] .na-menu__item[aria-current="page"] .na-menu__tom{background:rgba(255,255,255,.2);color:var(--e-menu-ativo-texto);box-shadow:none}
  html[data-estilo] .na-menu__item[aria-current="page"] .na-menu__tom :is(.na-ic,svg){color:var(--e-menu-ativo-texto)}
  /* amarelo também com texto branco (04/11: "está escuro, está feio") */
  html[data-estilo] .na-menu__item .na-menu__passo{width:auto;height:auto;margin-right:10px;background:transparent;color:var(--texto-3);font-size:11px;font-weight:600}
  html[data-estilo] .na-menu__item[aria-current="page"] .na-menu__passo{color:var(--e-menu-ativo-texto);opacity:.75}
  html[data-estilo] .na-menu__abre{padding:0 var(--e-3);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none}
}

/* B.4 · TOPO (computador): uma linha = título à esquerda; busca + botões juntos à direita */
@media (min-width:861px){
  html[data-estilo] .na-cabecalho{display:flex!important;flex-wrap:wrap;align-items:center!important;gap:12px 20px!important;padding:20px 24px 4px!important;border-bottom:0!important;border-image:none!important}
  html[data-estilo] .na-topo__titulo{flex:1 1 200px;min-width:0}
  html[data-estilo] .na-topo__acoes{gap:8px!important;flex-wrap:nowrap;margin-left:auto}
  html[data-estilo] .na-topo__busca{display:block!important}
  html[data-estilo] .na-topo__campo{width:var(--e-busca-largura)!important;height:var(--e-peca-topo);padding:0 14px!important;background:var(--novo-peca)!important;border:1px solid var(--novo-peca)!important;box-shadow:var(--novo-sombra-peca);font-size:13px}
  html[data-estilo] .na-topo__redondo{width:var(--e-peca-topo)!important;height:var(--e-peca-topo)!important;border-radius:50%!important;background:var(--novo-peca)!important;border:1px solid var(--novo-peca)!important;color:var(--texto)!important}
  html[data-estilo] .na-topo__conta{height:var(--e-peca-topo);padding:0 12px 0 6px;border-radius:999px;background:var(--novo-peca);border-color:var(--novo-peca)}
  html[data-estilo] .na-topo__acoes .na-btn--cta{min-height:var(--e-peca-topo);padding:0 18px;font-size:13.5px}
  html[data-estilo] .na-topo__titulo h1{font-size:32px!important;line-height:1.1;font-weight:500!important;letter-spacing:-.025em;white-space:normal}
  html[data-estilo] .na-topo__titulo p{margin-top:4px!important;font-size:14px!important;white-space:normal}
}
@media (min-width:861px) and (max-width:1180px){ html[data-estilo] .na-topo__campo{width:180px!important} }

/* B.5 · CAMPOS, BUSCAS, SELEÇÕES E ABAS em pílula; caixa de texto e "rounded" das telas pela tabela */
html[data-estilo] :is(.na-entrada:not(textarea),.na-busca input,.na-barra-lista__busca,.na-barra-lista__sel,
  input:is([type="text"],[type="email"],[type="search"],[type="tel"],[type="number"],[type="url"],[type="password"],[type="date"],[type="time"],[type="datetime-local"],:not([type])):not(.na-barra-lista__busca input),
  select){border-radius:var(--e-raio-campo)!important}
html[data-estilo] :is(.na-barra-lista__busca,.na-barra-lista__sel){background:var(--novo-peca);border:1px solid var(--novo-campo-borda);height:40px}
html[data-estilo] :is(.na-barra-lista__sel,.na-barra-lista__busca){padding:0 14px}
html[data-estilo] .na-barra-lista__busca input{height:38px}
html[data-estilo] .na-barra-lista__abas{border-radius:999px;padding:4px}
html[data-estilo] .na-barra-lista__abas button{border-radius:999px}
html[data-estilo] textarea{border-radius:var(--e-raio-texto)!important}
html[data-estilo] .rounded-lg{border-radius:var(--e-raio-lg)!important}
html[data-estilo] :is(.rounded-xl,.rounded-2xl){border-radius:var(--e-raio-xl)!important}

/* B.6 · BOTÃO = TECLA (aprovado): parado tem sombra chapada embaixo; mouse em cima = desce e a sombra some */
html[data-estilo] :is(.na-btn:not(.na-btn--texto),.na-redondo,.na-topo__redondo,.na-topo__conta){box-shadow:0 var(--e-tecla-altura) 0 var(--tecla)!important;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease,color .12s ease}
html[data-estilo] .na-btn.na-btn--cta:not(.na-btn--texto){box-shadow:0 var(--e-tecla-altura) 0 var(--tecla-cta)!important}
html[data-estilo] :is(.na-btn:not(.na-btn--texto),.na-redondo,.na-topo__redondo,.na-topo__conta):not(:disabled):is(:hover,:active){transform:translateY(var(--e-tecla-altura));box-shadow:0 0 0 var(--tecla)!important}
html[data-estilo] .na-btn.na-btn--cta:not(.na-btn--texto):not(:disabled):is(:hover,:active){box-shadow:0 0 0 var(--tecla-cta)!important}
html[data-estilo] .na-topo__redondo:hover{background:var(--novo-peca)!important}
html[data-estilo] .na-btn:not(.na-btn--cta):not(.na-btn--texto):not(.na-btn--perigo){background:var(--novo-peca);border-color:var(--novo-peca);color:var(--texto)}
html[data-estilo] .na-btn--cta:hover{background:var(--cta);border-color:var(--cta);color:var(--cta-texto)}
html[data-estilo] .na-btn--perigo{background:var(--novo-peca)}
/* cartões clicáveis também afundam (sem subir, sem brilho) */
html[data-estilo] :is(a.card,button.card,a.na-grupo,a.na-cartao-zona):hover,
html[data-estilo] a:hover>.card{transform:translateY(var(--e-tecla-altura))!important;box-shadow:none!important}
html[data-estilo] .na-menu__narro:hover{box-shadow:none;transform:translateY(2px)}

/* B.7 · INÍCIO (Sua semana · Para você agir hoje · Deixe a conta pronta · Agora) */
.na-ini{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.na-ini__col{display:grid;gap:20px;min-width:0}
.na-ini__painel{background:var(--andar-3);border-radius:var(--e-raio-painel,28px);padding:24px;box-shadow:var(--sombra-cartao);min-width:0}
.na-ini__cab{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.na-ini__cab h2{margin:0;font-size:20px;font-weight:500;letter-spacing:-.01em}
.na-ini__cab h2 span{color:var(--texto-3)}
.na-ini__mini-txt{margin-left:auto;display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--linha);font-size:12.5px;font-weight:500;color:var(--texto-2)}
.na-ini__semana{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.na-ini__semana span{font-size:13px;color:var(--texto-3)}
.na-ini__semana b{display:block;margin:6px 0 14px;font-size:32px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.na-ini__semana i{display:block;height:6px;border-radius:999px;background:var(--b)}
.na-ini__semana small{display:block;margin-top:8px;font-size:12px;color:var(--texto-2)}
.na-ini__cores{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px}
.na-ini__cor{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:150px;padding:18px;border-radius:22px;background:var(--f);color:var(--t);text-decoration:none;transition:transform .12s ease,box-shadow .12s ease;box-shadow:0 var(--e-tecla-cartao,4px) 0 color-mix(in srgb,var(--f) 70%,#000)}
.na-ini__cor:is(:hover,:active){transform:translateY(var(--e-tecla-cartao,4px));box-shadow:0 0 0 color-mix(in srgb,var(--f) 70%,#000)}
.na-ini__cor h3{margin:0;max-width:70%;font-size:15px;font-weight:600;line-height:1.25;color:inherit}
.na-ini__abrir{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid color-mix(in srgb,var(--t) 25%,transparent)}
.na-ini__abrir :is(svg,.na-ic){width:15px;height:15px;color:inherit}
.na-ini__pe{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.na-ini__pe small{font-size:12px;line-height:1.35;opacity:.8}
.na-ini__pe b{display:grid;place-items:center;min-width:46px;height:46px;padding:0 10px;border-radius:999px;background:color-mix(in srgb,var(--t) 14%,transparent);font-size:17px;font-weight:600}
.na-ini__prog{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--texto-2)}
.na-ini__prog i{flex:1;height:6px;border-radius:999px;background:var(--linha);overflow:hidden}
.na-ini__prog em{display:block;height:100%;background:var(--destaque);border-radius:999px}
.na-ini__tarefas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.na-ini__tarefa{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;border:1px solid var(--linha);font-size:13.5px;font-weight:500;color:var(--texto);text-decoration:none}
.na-ini__tarefa--feita{color:var(--texto-3);text-decoration:line-through}
.na-ini__mini{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--linha);color:var(--texto)}
.na-ini__mini :is(svg,.na-ic){width:15px;height:15px}
.na-ini__feed{display:grid;gap:12px}
.na-ini__ev{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px}
.na-ini__quando{display:grid;justify-items:center;align-content:start;gap:6px;font-size:11px;line-height:1.3;color:var(--texto-2);text-align:center}
.na-ini__cartao{display:grid;gap:10px;padding:14px;border-radius:20px;background:var(--ini-cartao,var(--andar-2));border:1px solid var(--linha);color:var(--texto);text-decoration:none}
:is(.na-ini__cartao,a.na-ini__tarefa){box-shadow:0 var(--e-tecla-altura,3px) 0 var(--tecla,var(--linha));transition:transform .12s ease,box-shadow .12s ease}
:is(.na-ini__cartao,a.na-ini__tarefa):is(:hover,:active){transform:translateY(var(--e-tecla-altura,3px));box-shadow:0 0 0 var(--tecla,var(--linha))}
.na-ini__linha1{display:flex;align-items:center;gap:10px}
.na-ini__av{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;font-size:13px;font-weight:700;background:var(--f);color:var(--t)}
.na-ini__nome{display:grid;gap:2px;min-width:0;flex:1}
.na-ini__nome b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.na-ini__nome span{font-size:12px;line-height:1.35;color:var(--texto-3);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.na-ini__tags{display:flex;justify-content:space-between;gap:8px}
.na-ini__tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;border:1px solid var(--linha);font-size:11.5px;color:var(--texto-2)}
.na-ini__tag--cheia{border:0;background:var(--ini-c3);color:var(--ini-c3-t);font-weight:600}
.na-ini__vazio{margin:0;font-size:13px;color:var(--texto-2)}
@media (max-width:1180px){.na-ini{grid-template-columns:1fr}}
@media (min-width:1181px) and (max-width:1400px){.na-ini{grid-template-columns:minmax(0,1fr) 320px}.na-ini__ev{grid-template-columns:44px minmax(0,1fr)}.na-ini__cartao .na-ini__linha1>.na-ini__mini{display:none}.na-ini__cor h3{max-width:none;padding-right:44px}}
@media (max-width:900px){.na-ini__semana,.na-ini__tarefas{grid-template-columns:1fr}}
@media (max-width:640px){.na-ini__painel{padding:18px;border-radius:24px}.na-ini__semana b{font-size:28px}}