/* Design tokens */
:root{
  --n6-bg:#f7fafc; --n6-surface:#fff; --n6-surface-2:#fafafa; --n6-border:#e5e7eb;
  --n6-text:#0f172a; --n6-text-subtle:#64748b;
  --n6-primary:#16a34a; --n6-primary-soft:rgba(22,163,74,.08);
  --n6-shadow-sm:0 2px 8px rgba(2,6,23,.06);
  --n6-radius:16px; --n6-gap:24px;
}

.n6nova-wrap{ font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; color:var(--n6-text); max-width:1280px; margin:0 auto; padding:24px; background:var(--n6-bg); }
.n6nova-topbar{ display:flex; gap:12px; align-items:center; margin-bottom:20px; flex-wrap:wrap; }
.pill{ padding:8px 14px; border-radius:999px; cursor:pointer; font-size:14px; font-weight:600; border:1px solid var(--n6-border); background:var(--n6-surface); color:var(--n6-text); box-shadow:var(--n6-shadow-sm); transition:transform .12s ease, box-shadow .2s ease; }
.pill:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(2,6,23,.08); }
.pill.dark{ background:var(--n6-primary); color:#fff; border-color:transparent; }
.pill.small{ font-size:12px; padding:4px 10px; }
.pill.active{ outline:2px solid var(--n6-primary); }

.n6nova-topbar .menu,.inline-range .menu{ position:absolute; background:var(--n6-surface); border-radius:12px; border:1px solid var(--n6-border); box-shadow:0 10px 30px rgba(2,6,23,.1); padding:6px; margin-top:6px; min-width:180px; z-index:1000; }
.n6nova-topbar .menu button,.n6nova-topbar .menu a,.inline-range .menu button{ display:block; padding:10px 12px; font-size:14px; color:var(--n6-text); border-radius:10px; background:transparent; border:0; }
.n6nova-topbar .menu button:hover,.n6nova-topbar .menu a:hover,.inline-range .menu button:hover{ background:var(--n6-surface-2); }

/* Grid 12 col */
.n6nova-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--n6-gap); align-items:stretch; }
.n6nova-grid > .n6nova-card:nth-child(-n+3){ grid-column:span 4; }
.n6nova-card.full{ grid-column:1 / -1; min-height:380px; }

/* Cards */
.n6nova-card{ background:var(--n6-surface); border:1px solid var(--n6-border); border-radius:var(--n6-radius); padding:20px; box-shadow:var(--n6-shadow-sm); display:grid; grid-template-rows:auto 1fr auto; min-height:220px; }
.card-title{ font-size:13px; letter-spacing:.02em; text-transform:uppercase; font-weight:700; color:#1f2937; margin-bottom:10px; display:flex; gap:10px; align-items:center; }
.kpi{ font-size:42px; font-weight:800; color:#0b1220; margin-bottom:4px; }
.sub{ font-size:13px; color:var(--n6-text-subtle); }
.delta{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background:var(--n6-primary-soft); color:#14532d; font-weight:700; }

.toplist.mini{ margin-top:14px; max-height:220px; overflow:auto; padding-right:6px; }
.toprow{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; gap:10px; font-size:14px; border-bottom:1px dashed var(--n6-border); }
.toprow:last-child{ border-bottom:none; }

#main-chart,.n6-chart{ width:100% !important; height:320px !important; }

/* Skeleton */
.skeleton{ position:relative; overflow:hidden; background:#eef2f6; border-radius:12px; }
.skeleton::after{ content:''; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); animation:n6shimmer 1.2s infinite; }
@keyframes n6shimmer{ 100%{ transform:translateX(100%);} }

#btn-export-csv{ margin-left:8px; }

@media (max-width:1200px){ .n6nova-grid > .n6nova-card:nth-child(-n+3){ grid-column:span 6; } }
@media (max-width:768px){
  .n6nova-grid{ grid-template-columns:repeat(1,minmax(0,1fr)); }
  .n6nova-grid > .n6nova-card:nth-child(-n+3){ grid-column:span 1; }
  .n6nova-wrap{ padding:16px; }
}

/* === AUTH PAGE (dark, fullscreen, clean) ===================== */

/* Impede rolagem do body quando o overlay está aberto */
body.n6-auth-open { overflow: hidden; }

/* Tela inteira, fundo escuro com blobs, centro perfeito */
.n6-auth{
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;   /* ocupa a viewport inteira */
  display: flex;
  align-items: center;                     /* centro vertical */
  justify-content: center;                 /* centro horizontal */
  padding: clamp(16px, 3vh, 40px) 16px;
  min-height: 100dvh;                      /* cobre mobile moderno */
  overflow: hidden;
  z-index: 9999;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(22,163,74,.18), transparent 60%),
    radial-gradient(1000px 800px at 110% 120%, rgba(34,211,238,.16), transparent 60%),
    linear-gradient(180deg,#0b1220 0%,#0b1220 100%);
}
.n6-auth *{ box-sizing: border-box; }

/* Compensa a admin bar mantendo o centro real */
@media (min-width: 782px){ body.admin-bar .n6-auth{ top: 32px; } }
@media (max-width: 781.98px){ body.admin-bar .n6-auth{ top: 46px; } }

/* Blobs decorativos */
.n6-auth-bg .blob{
  position: absolute; filter: blur(28px); opacity: .55;
  animation: float 18s ease-in-out infinite; border-radius: 999px;
}
.n6-auth-bg .b1{ width:420px; height:420px; background:#16a34a; top:-120px; left:-120px; }
.n6-auth-bg .b2{ width:360px; height:360px; background:#22d3ee; bottom:-120px; right:-80px; animation-delay:-6s; }
.n6-auth-bg .b3{ width:260px; height:260px; background:#34d399; top:45%; left:65%; animation-delay:-3s; }
@keyframes float{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(0,-20px,0) scale(1.03)} }

/* Cartão central */
.n6-auth-card{
  width: min(460px, 92vw);
  max-height: calc(100dvh - 96px);
  overflow: auto;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  box-shadow: 0 20px 55px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
  padding: 30px 26px 22px;
  animation: popin .35s ease-out;
}
@keyframes popin{ from{ opacity:0; transform: scale(.985) } to{ opacity:1; transform: scale(1) } }

.n6-auth-card.shake { animation: shake .4s linear; }
@keyframes shake{
  10%,90% { transform: translateX(-2px); }
  20%,80% { transform: translateX(3px); }
  30%,50%,70% { transform: translateX(-6px); }
  40%,60% { transform: translateX(6px); }
}

/* Cabeçalho */
.n6-auth-head{ text-align:center; margin-bottom:16px; }
.n6-auth-logo{
  display:block;
  margin: 0 auto 10px;
  width: clamp(140px, 18vw, 180px);
  height: auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 6px 18px rgba(2,6,23,.18));
}
.n6-auth-head h1{ margin: 8px 0 4px; font-size:22px; font-weight:800; color:#0f172a; letter-spacing:.2px; }
.n6-auth-head p{ margin:0; color:#475569; }

/* Form */
.n6-auth-form .field{ margin:12px 0; }
.n6-auth-form label{ display:block; font-size:12px; color:#334155; margin:0 0 6px; font-weight:600; }
.n6-auth-form input[type="text"],
.n6-auth-form input[type="password"]{
  width:100%; padding:14px 14px; font-size:15px; outline:none; background:#fff;
  border-radius:12px; border:1px solid rgba(2,6,23,.10);
  transition: border .2s, box-shadow .2s, background .2s;
}
.n6-auth-form input:focus{
  border-color:#10b98133; box-shadow:0 0 0 6px #10b9811f; background:#fcfffd;
}

/* Linha “lembrar-me / esqueci” */
.row.between{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 14px; }

/* Switch lembrar-me */
.switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.switch input{ display:none; }
.switch .slider{
  width:44px; height:24px; border-radius:999px; position:relative; display:inline-block;
  background:#e2e8f0; transition: background .2s ease, box-shadow .2s ease;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
.switch .slider:after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.18); transition: transform .18s ease;
}
.switch input:checked + .slider{ background:#10b981; }
.switch input:checked + .slider:after{ transform: translateX(20px); }
.switch i{ font-style:normal; font-size:14px; color:#334155; line-height:1; }

/* Link “esqueci a senha” */
.muted{ color:#1f2937; text-decoration:none; opacity:.85; }
.muted:hover{ color:#0f766e; opacity:1; text-decoration: underline; }
.muted:focus-visible{ outline:2px solid #10b981; outline-offset:3px; border-radius:6px; }

/* Botões */
.btn{
  width:100%; border:0; border-radius:12px; padding:14px 16px; font-weight:700; cursor:pointer;
  transition: transform .08s ease, box-shadow .22s ease, filter .2s ease, color .2s ease;
  position: relative; overflow: hidden;      /* para o shine */
}
.btn-primary{
  background: linear-gradient(135deg,#10b981,#059669);
  color:#fff !important;
  border: 0;
  box-shadow: 0 10px 22px rgba(16,185,129,.28), 0 1px 0 rgba(255,255,255,.35) inset;
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(16,185,129,.34), 0 1px 0 rgba(255,255,255,.38) inset;
  background: linear-gradient(135deg,#14c38e,#0aa37a);
}
.btn-primary:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 4px rgba(16,185,129,.28), 0 10px 22px rgba(16,185,129,.28);
}
.btn-primary::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 35%, transparent 70%);
  transform:translateX(-120%); transition:transform .55s ease; pointer-events:none;
}
.btn-primary:hover::after{ transform:translateX(120%); }
.btn:disabled{ opacity:.7; cursor:not-allowed; }

/* Spinner no botão */
.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff;
  display:none; margin-right:8px; vertical-align:-3px; animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg) } }
.btn.loading .spinner{ display:inline-block; }

/* Campo senha + botão olho */
.pw-wrap input{ padding-right:52px; }
.pw-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; display:grid; place-items:center;
  border:0; background:transparent; cursor:pointer; border-radius:10px;
  transition: background .2s ease, opacity .2s ease;
  -webkit-appearance: none; appearance: none; outline: none;
}
.pw-toggle:hover{ background: rgba(2,6,23,.06); }
.pw-toggle:focus-visible{ outline:2px solid var(--n6-primary); outline-offset:2px; }
.pw-toggle svg{ width:20px; height:20px; stroke:#64748b; fill:none; stroke-width:2; transition: stroke .2s; }
.pw-toggle:hover svg, .pw-toggle.on svg{ stroke:#16a34a; }
.pw-toggle .ico-eye-off{ display:none; }
.pw-toggle.on .ico-eye{ display:none; }
.pw-toggle.on .ico-eye-off{ display:block; }

/* Rodapé da auth */
.n6-auth-msg{ margin-top:10px; font-size:14px; color:#ef4444; text-align:center; min-height:20px; }
.n6-auth-foot{ text-align:center; margin-top:10px; color:#64748b; font-size:12px; }


/* === PATCH: focus/active limpos no login ===================== */

/* Toggle do olho: sem fundo/borda herdados do WP e com focus ring verde */
.n6-auth .pw-wrap{ position: relative; }                 /* garante contexto p/ absolute */
.n6-auth .pw-wrap input{ padding-right: 52px; }          /* espaço pro botão */
.n6-auth .pw-toggle{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  z-index: 3;
  -webkit-appearance: none; appearance: none;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
.n6-auth .pw-toggle:focus,
.n6-auth .pw-toggle:active{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
.n6-auth .pw-toggle:focus-visible{
  outline: 0 !important;
  box-shadow: 0 0 0 4px rgba(16,185,129,.28) !important; /* anel verde */
  border-radius: 10px;
}

/* Botão primário: remove borda/outline herdados e mantém o ring verde */
.n6-auth .btn-primary{
  border: 0 !important;
}
.n6-auth .btn-primary:focus,
.n6-auth .btn-primary:active{
  border: 0 !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(16,185,129,.28) !important;
}

/* (se algum tema aplicar fundo nos labels, zera) */
.n6-auth .n6-auth-form label{ background: transparent !important; }

/* Chip de status no topo */
.n6-status-pill{ display:inline-flex; align-items:center; gap:8px; }
.n6-status-pill .dot{ width:8px; height:8px; border-radius:50%; background:#10b981; }
.n6-status-pill .sep{ opacity:.45; }
.n6-status-pill.ok    { color:#065f46; }
.n6-status-pill.warn  { color:#92400e; }
.n6-status-pill.danger{ color:#991b1b; }
.n6-status-pill.off   { color:#64748b; opacity:.85; }
.n6-status-pill.ok     .dot{ background:#10b981; }
.n6-status-pill.warn   .dot{ background:#f59e0b; }
.n6-status-pill.danger .dot{ background:#ef4444; }
.n6-status-pill.off    .dot{ background:#94a3b8; }

/* ===================== THEME (LIGHT/DARK) ===================== */

/* tema claro = default (já definido nas suas :root vars) */
html[data-theme="light"] body{ background: var(--n6-bg); }

/* tema escuro: só trocamos tokens, todo o resto já usa variáveis */
html[data-theme="dark"]{
  --n6-bg:#0b1220;
  --n6-surface:#101826;
  --n6-surface-2:#0e1726;
  --n6-border:rgba(255,255,255,.08);
  --n6-text:#e5e7eb;
  --n6-text-subtle:#b6c2d6;
  --n6-shadow-sm:0 2px 10px rgba(0,0,0,.45);
}

/* botão do tema — reaproveita .pill mas vira “bolinha” */
.n6-theme-toggle{
  width:34px; height:34px; padding:0; display:inline-grid; place-items:center;
}
.n6-theme-toggle .icon{ display:none; }
html[data-theme="light"] .n6-theme-toggle .sun{ display:block; }
html[data-theme="dark"]  .n6-theme-toggle .moon{ display:block; }

/* ==== Tema DARK via [data-theme="dark"] ==== */
:root[data-theme="dark"]{
  --n6-bg:#0b1220;
  --n6-surface:#0f172a;
  --n6-surface-2:#0b1220;
  --n6-border:#1f2937;
  --n6-text:#e5e7eb;
  --n6-text-subtle:#94a3b8;
  --n6-primary:#16a34a;
  --n6-primary-soft:rgba(16,185,129,.12);
}

/* garante que o fundo geral acompanhe o tema */
body, .n6nova-wrap{ background:var(--n6-bg) !important; }
.n6nova-card{ background:var(--n6-surface); border-color:var(--n6-border); color:var(--n6-text); }
.card-title{ color:var(--n6-text); }
.sub{ color:var(--n6-text-subtle); }
.pill{ background:var(--n6-surface); border-color:var(--n6-border); color:var(--n6-text); }

/* =========================
   Toggle – estilo “Adobe stock”
   (substitua TODO o seu bloco do toggle por este)
   ========================= */
#n6-theme-toggle{
  /* dimensões controladas por variáveis p/ alinhar o knob sempre */
  --tg-w: 84px;
  --tg-h: 36px;
  --pad: 4px;
  --knob: 28px;

  width: var(--tg-w);
  height: var(--tg-h);
  background: transparent;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative; /* p/ tooltip */
}

/* cápsula */
#n6-theme-toggle .toggle-container{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--tg-h) / 2);
  border: 1.5px solid transparent;      /* cor vem por estado */
  box-shadow:
    inset 0 10px 14px rgba(255,255,255,.16),
    inset 0 -10px 18px rgba(0,0,0,.10),
    0 6px 12px rgba(0,0,0,.12);
  overflow: hidden;                      /* pra máscara do brilho */
}

/* brilho superior suave */
#n6-theme-toggle .toggle-container::before{
  content:"";
  position:absolute;
  inset: 2px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 48%);
  pointer-events:none;
}

/* ícones – sempre centralizados verticalmente */
#n6-theme-toggle .sun-icon,
#n6-theme-toggle .moon-icon{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:20px; height:20px;
  pointer-events:none;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.12)) drop-shadow(0 2px 8px rgba(0,0,0,.12));
}

/* posições dos ícones */
#n6-theme-toggle .sun-icon{ left: 10px; }
#n6-theme-toggle .moon-icon{ right: 10px; }

/* cores dos ícones – branco como no mock */
#n6-theme-toggle .sun-icon .sun-core{ fill:#fff; }
#n6-theme-toggle .sun-icon .rays,
#n6-theme-toggle .sun-icon line{ stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#n6-theme-toggle .moon-icon path{ fill:#fff; }

/* pequeno giro nos raios ao alternar (mimo) */
#n6-theme-toggle .sun-icon .rays{
  transform-origin: 12px 12px;
  transition: transform .35s ease, opacity .25s ease;
}
#n6-theme-toggle[aria-pressed="true"] .sun-icon .rays{ transform: rotate(22deg); }

/* knob (bolinha) */
#n6-theme-toggle .toggle-switch{
  position:absolute;
  top:50%;
  left: var(--pad);                      /* start no claro */
  width: var(--knob);
  height: var(--knob);
  transform: translateY(-50%);
  border-radius: 999px;
  background: radial-gradient(100% 100% at 30% 30%, #ffffff 0%, #f3f3f3 80%);
  border: 1px solid #e8eaee;
  box-shadow:
    0 3px 8px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.85) inset;
  transition: left .28s ease, box-shadow .2s ease, transform .28s ease;
  z-index: 1;                            /* acima dos ícones */
}

/* hover no knob */
#n6-theme-toggle:hover .toggle-switch{
  box-shadow:
    0 4px 12px rgba(0,0,0,.33),
    0 1px 0 rgba(255,255,255,.9) inset;
}

/* ===== Estados ===== */
/* Claro (aria-pressed="false") -> amarelo */
#n6-theme-toggle[aria-pressed="false"] .toggle-container{
  background: linear-gradient(135deg,#E9A90F 0%, #F4C63F 100%);
  border-color: #D39B12;
}

/* Escuro (aria-pressed="true") -> azul */
#n6-theme-toggle[aria-pressed="true"] .toggle-container{
  background: linear-gradient(135deg,#3E5CE7 0%, #2144C2 100%);
  border-color: #2F49D0;
}

/* move o knob pra direita no escuro, alinhando EXATO pela matemática */
#n6-theme-toggle[aria-pressed="true"] .toggle-switch{
  left: calc(100% - var(--pad) - var(--knob));
}

/* ===== Tooltips ===== */
#n6-theme-toggle[aria-pressed="true"]:hover::after,
#n6-theme-toggle[aria-pressed="false"]:hover::after{
  position:absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  background:#333; color:#fff;
  padding:6px 8px; font-size:12px; border-radius:6px; white-space:nowrap;
  box-shadow: 0 6px 12px rgba(0,0,0,.18);
  content: attr(data-tip);
}

/* textos automáticos via data-tip (defina no JS) */

/* ===== News Slider ===== */
.n6news-card{ overflow: hidden; }

.n6news-viewport{
  position: relative;
  padding: 6px 44px;              /* espaço para as setas */
  isolation: isolate;
}

.n6news-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 360px);
  gap: 16px;
  overflow-x: auto;
  padding: 4px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.n6news-track::-webkit-scrollbar{ height: 8px; }
.n6news-track::-webkit-scrollbar-thumb{
  background: rgba(2,6,23,.16); border-radius: 999px;
}
:root[data-theme="dark"] .n6news-track::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
}

.n6news-carditem{
  display: grid; grid-template-rows: 160px 1fr;
  background: var(--n6-surface);
  border: 1px solid var(--n6-border);
  border-radius: 16px;
  box-shadow: var(--n6-shadow-sm);
  color: inherit; text-decoration: none;
  scroll-snap-align: start;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .22s ease, border-color .2s ease;
}
.n6news-carditem:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(2,6,23,.12);
  border-color: rgba(2,6,23,.12);
}
:root[data-theme="dark"] .n6news-carditem:hover{
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}

.n6news-img{
  width: 100%; height: 100%; object-fit: cover;
}

.n6news-body{ padding: 12px 14px 14px; display: grid; gap: 6px; }
.n6news-body h3{
  font-size: 16px; line-height: 1.25; margin: 2px 0;
}
.n6news-body p{
  font-size: 13px; color: var(--n6-text-subtle); margin: 0;
}
.n6news-cta{
  margin-top: 4px; font-weight: 700; font-size: 13px;
  color: var(--n6-primary);
}

/* Setas */
.n6news-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid var(--n6-border);
  background: var(--n6-surface);
  color: var(--n6-text);
  box-shadow: var(--n6-shadow-sm);
  cursor: pointer;
  z-index: 2;
}
.n6news-nav.prev{ left: 6px; }
.n6news-nav.next{ right: 6px; }
.n6news-nav:disabled{
  opacity: .45; cursor: not-allowed;
}

/* Gradientes nas bordas (efeito de fade) */
.n6news-viewport::before,
.n6news-viewport::after{
  content:""; position: absolute; top: 0; bottom: 0; width: 36px; z-index: 1; pointer-events: none;
}
.n6news-viewport::before{
  left: 44px; background: linear-gradient(90deg, var(--n6-bg) 0%, transparent 100%);
}
.n6news-viewport::after{
  right: 44px; background: linear-gradient(270deg, var(--n6-bg) 0%, transparent 100%);
}

/* Ajustes responsivos */
@media (max-width: 680px){
  .n6news-viewport{ padding: 4px 40px; }
  .n6news-track{ grid-auto-columns: minmax(250px, 85%); }
}

/* Dots (paginação) */
.n6news-dots{
  display:flex; gap:8px; justify-content:center;
  margin:10px 0 0;
}
.n6news-dots button{
  width:8px; height:8px; border-radius:50%;
  border:0; background:rgba(2,6,23,.25);
  opacity:.7; transform:scale(1);
  transition:transform .2s, opacity .2s, background-color .2s;
  cursor:pointer;
}
:root[data-theme="dark"] .n6news-dots button{ background:rgba(255,255,255,.35); }
.n6news-dots button[aria-selected="true"]{
  background:var(--n6-primary);
  opacity:1; transform:scale(1.5);
}
.n6news-dots button:focus-visible{
  outline:2px solid var(--n6-primary); outline-offset:3px;
}

/* Barra de progresso do autoplay */
.n6news-progress{
  position:absolute; left:44px; right:44px; bottom:6px;
  height:3px; border-radius:999px;
  background:rgba(2,6,23,.12); overflow:hidden;
}
:root[data-theme="dark"] .n6news-progress{ background:rgba(255,255,255,.18); }
.n6news-progress > span{
  display:block; height:100%; width:0;
  background:var(--n6-primary);
  transform-origin:left center;
  transition:width .2s linear; /* é atualizado via JS */
}

/* === NEWS SLIDER – POLIMENTO === */

/* 1) Mais espaço embaixo p/ dots + progresso */
.n6news-viewport{
  padding: 6px 44px 32px; /* antes: 6px 44px; */
}

/* 2) Esmaecimento das bordas mais estreito (não cobre o 1º card) */
.n6news-viewport::before,
.n6news-viewport::after{ width: 20px; } /* antes: 36px */

/* 3) Garante que o 1º snap não fique atrás do fade */
.n6news-track{
  scroll-padding-left: 20px;   /* empurra o snap inicial */
  padding-left: 8px;           /* pequeno “respiro” à esquerda */
}

/* 4) Dots centralizados, menores e acima da barra de progresso */
.n6news-dots{
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 8px;
  z-index: 3; /* acima da barra */
  pointer-events: auto;
}
.n6news-dots button{
  width: 6px; height: 6px; border: 0;
  border-radius: 999px;
  background: rgba(2,6,23,.28);
  opacity: .9; transform: none; /* remove scale que ovaliza */
  cursor: pointer; transition: width .2s, opacity .2s, background-color .2s;
}
:root[data-theme="dark"] .n6news-dots button{ background: rgba(255,255,255,.38); }
/* Dot ativo vira “pílula” discreta */
.n6news-dots button[aria-selected="true"]{
  width: 18px; height: 6px;
  background: var(--n6-primary);
  opacity: 1;
}
.n6news-dots button:focus-visible{
  outline: 2px solid var(--n6-primary);
  outline-offset: 3px;
}

/* 5) Barra de progresso mais fina, centralizada e atrás dos dots */
.n6news-progress{
  position: absolute;
  left: 60px; right: 60px; bottom: 12px; /* mais margem lateral/vertical */
  height: 2px; border-radius: 999px;
  background: rgba(2,6,23,.12);
  overflow: hidden; z-index: 2;
}
:root[data-theme="dark"] .n6news-progress{ background: rgba(255,255,255,.18); }
.n6news-progress > span{
  display: block; height: 100%; width: 0;
  background: var(--n6-primary);
  transform-origin: left center;
  transition: width .2s linear;
}

/* 6) Mini refinamento no hover das setas para não “tremer” o layout */
.n6news-nav{ transition: transform .15s ease, box-shadow .2s ease; }
.n6news-nav:hover{ transform: translateY(-1px); }

/* === NEWS SLIDER — APENAS SETAS (sem dots/progresso) === */

/* 2.1) Volta o padding original (sem espaço extra embaixo) */
.n6news-viewport{
  padding: 6px 44px !important; /* era 6px 44px 32px */
}

/* 2.2) Some com dots e barra de progresso, caso existam no DOM */
.n6news-dots,
.n6news-progress{
  display: none !important;
}

/* 2.3) Remove os fades laterais que “comiam” o 1º card */
.n6news-viewport::before,
.n6news-viewport::after{
  display: none !important;
}

/* 2.4) Reseta ajustes de padding do track para alinhar os cards */
.n6news-track{
  scroll-padding-left: 0 !important;
  padding-left: 0 !important;
}

/* === NEWS SLIDER — impedir sobreposição texto/imagem === */

/* 1) Garante duas linhas fixas: imagem (altura fixa) + texto */
.n6news-carditem{
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: 180px auto;      /* ajuste a altura que preferir */
  align-content: start;
  overflow: hidden;                     /* corta qualquer escape do conteúdo */
}

/* 2) Imagem sempre ocupa a 1ª linha, como bloco, cobrindo a área */
.n6news-img{
  grid-row: 1 / 2 !important;
  display: block;                       /* evita comportamento inline */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 3) Texto sempre na 2ª linha, sem “subir” por margem colapsada */
.n6news-body{
  grid-row: 2 / 3 !important;
  margin: 0 !important;
  padding: 12px 14px 14px;
  position: relative;                   /* novo contexto, evita colapsos estranhos */
  z-index: 0;
}

/* 4) Margens controladas nos textos (evita “empurrões”) */
.n6news-body h3{
  margin: 2px 0 6px !important;
  line-height: 1.25;
}
.n6news-body p{
  margin: 0 !important;
}

/* 5) (Opcional) Limita linhas para manter altura uniforme dos cards */
.n6news-body h3{
  display: -webkit-box;
  -webkit-line-clamp: 2;               /* título em até 2 linhas */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.n6news-body p{
  display: -webkit-box;
  -webkit-line-clamp: 2;               /* descrição em até 2 linhas */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- FIX: texto nunca sobrepõe a imagem no carrossel --- */
.n6news-carditem{
  /* 2 linhas: imagem (fixa/adaptativa) + texto */
  display: grid;
  grid-template-rows: 200px auto;          /* ajuste a altura que preferir */
  align-content: start;
}

@media (min-width: 900px){
  .n6news-carditem{
    grid-template-rows: minmax(200px, 14vw) auto; /* responsivo em telas grandes */
  }
}

.n6news-img{
  grid-row: 1 / 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* garante que o bloco de texto não seja absoluto/overlay */
.n6news-body{
  grid-row: 2 / 3;
  position: static !important;
  background: transparent !important;
  color: var(--n6-text);
}

.n6news-body h3{ margin: 2px 0 4px; }
.n6news-body p{ margin: 0; color: var(--n6-text-subtle); }
.n6news-cta{ color: var(--n6-primary); font-weight: 700; margin-top: 4px; display: inline-block; }

/* opcional: evita qualquer máscara/gradiente legado */
.n6news-carditem::before,
.n6news-carditem::after{
  content: none !important;
}

.n6news-carditem{
  grid-template-rows: 180px auto !important; /* antes era 200px+ */
  gap: 0 !important;
}
.n6news-body{ padding: 6px 14px 12px !important; }
.n6news-body h3{ margin: 0 0 4px !important; }
.n6news-img{ height: 100% !important; object-fit: cover; display:block; }

/* === News arrows - cor e hover (N6 verde) === */
.n6news-nav{
  /* mantém posição central (não deixa “descer”) */
  transform: translateY(-50%) !important;

  /* cores base */
  background: var(--n6-surface) !important;
  border-color: var(--n6-border) !important;
  color: var(--n6-text) !important;

  /* tira animação de translate; só anima cor/sombra */
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

/* Hover: verde N6 + ícone branco */
.n6news-nav:hover{
  background: var(--n6-primary) !important;
  border-color: var(--n6-primary) !important;
  color: #fff !important; /* o SVG usa currentColor -> fica branco */
  box-shadow: 0 10px 22px rgba(16,185,129,.22) !important;
}

/* Estado ativo/focus: sem “pular” e com foco acessível */
.n6news-nav:active,
.n6news-nav:focus{
  transform: translateY(-50%) !important; /* trava a posição */
}
.n6news-nav:focus-visible{
  outline: 2px solid var(--n6-primary);
  outline-offset: 2px;
}

/* Tema escuro: base igual; hover segue verde */
:root[data-theme="dark"] .n6news-nav{
  background: var(--n6-surface) !important;
  border-color: var(--n6-border) !important;
  color: var(--n6-text) !important;
}

/* Centralização real do ícone dentro do botão */
.n6news-nav{
  display: flex;                 /* força centrado */
  align-items: center;
  justify-content: center;
  line-height: 0;                /* evita “empurrão” vertical */
  box-sizing: border-box;
}

.n6news-nav svg{
  display: block;                /* remove espaço inline do svg */
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* --- Micro ajuste óptico do chevron --- */
/* O chevron “next” parece 0.5px à esquerda; empurra um tiquinho à direita */
.n6news-nav.next svg{ transform: translateX(0.5px); }
/* O chevron “prev” o oposto */
.n6news-nav.prev svg{ transform: translateX(-0.5px); }

/* Se notar que está 0.5px “baixo”, suba um tiquinho também: */
/* .n6news-nav svg{ transform: translate(0.5px, -0.5px); }  (ajuste fino opcional) */


/* === SETAS N6: sem SVG, sempre visíveis quando habilitadas === */
.n6news-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;
  border-radius:999px;
  border:1px solid var(--n6-border);
  background: var(--n6-primary);
  color:#fff;
  box-shadow: 0 8px 22px rgba(16,185,129,.18); /* glow suave verde */
  transform:none !important;
  transition: background .15s ease, box-shadow .15s ease, opacity .15s ease;
}

/* desativa qualquer SVG existente */
.n6news-nav svg{ display:none !important; }

/* Flecha desenhada via CSS */
.n6news-nav::after{
  content:"";
  width:10px; height:10px;
  border-right:2px solid currentColor;
  border-top:2px solid currentColor;
  transform: rotate(45deg);   /* → */
}

.n6news-nav.prev::after{
  transform: rotate(225deg);  /* ← */
}

.n6news-nav:hover{
  background:#19b06a;                   /* um tom acima do --n6-primary */
  box-shadow: 0 10px 26px rgba(16,185,129,.25);
}

.n6news-nav:active{
  transform:none;                        /* sem “pular” ao clicar */
  box-shadow: 0 6px 16px rgba(16,185,129,.20);
}

.n6news-nav:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}

/* container do carrossel precisa ser relativo */
.n6news-viewport{ position: relative; }

/* === SETAS N6 (posicionadas nas laterais, centradas) === */
.n6news-nav{
  position: absolute;                 /* <- importante */
  top: 50%;                           /* centraliza verticalmente */
  transform: translateY(-50%);        /* sem “pulo” no hover, só para centrar */
  z-index: 5;

  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border-radius:999px;
  border:1px solid var(--n6-border);
  background: var(--n6-primary);
  color:#fff;                         /* flecha branca */
  box-shadow: 0 8px 22px rgba(16,185,129,.18);
  transition: background .15s ease, box-shadow .15s ease, opacity .15s ease;
}

/* lados */
.n6news-nav.prev{ left: 10px; }
.n6news-nav.next{ right: 10px; }

/* não usamos o SVG embutido */
.n6news-nav svg{ display:none !important; }

/* flecha desenhada por bordas (sempre central) */
.n6news-nav::after{
  content:"";
  position:absolute; inset:0; margin:auto;  /* centraliza o pseudo-elemento */
  display:block;
  width:12px; height:12px; box-sizing:content-box;
  border-right:2px solid currentColor;
  border-top:2px solid currentColor;
  transform: rotate(45deg);                 /* ">" */
}
.n6news-nav.prev::after{ transform: rotate(-135deg); } /* "<" */

/* hover/click — sem deslocar */
.n6news-nav:hover{
  background:#19b06a;
  box-shadow: 0 10px 26px rgba(16,185,129,.25);
}
.n6news-nav:active{
  transform: translateY(-50%);              /* mantém centralização, sem “pulo” */
  box-shadow: 0 6px 16px rgba(16,185,129,.20);
}
.n6news-nav:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }

/* === N6 News: espaçamentos maiores e configuráveis === */
:root{
  --n6-news-pad-x: 84px;   /* espaço lateral dentro do carrossel (L/R) */
  --n6-news-gap:   24px;   /* espaço entre cards */
}

/* padding interno do carrossel (lados) */
.n6news-viewport{
  padding: 8px var(--n6-news-pad-x);
}

/* distância entre os cards */
.n6news-track{
  gap: var(--n6-news-gap);
  padding: 0 8px; /* pequeno respiro para não “colar” no raio do card */
}

/* Reposiciona as setas para acompanhar o novo padding */
.n6news-nav.prev{ left:  calc(var(--n6-news-pad-x) - 90px); }
.n6news-nav.next{ right: calc(var(--n6-news-pad-x) - 90px); }

/* (opcional) em telas menores, reduza um pouco o padding lateral */
@media (max-width: 680px){
  :root{ --n6-news-pad-x: 56px; --n6-news-gap: 20px; }
}


/* ==== Drawer de Suporte (side-panel) ==== */
.n6drawer[hidden]{ display:none !important; }
.n6drawer{
  position: fixed; inset: 0; z-index: 9999;
}
.n6drawer__backdrop{
  position:absolute; inset:0;
  background: rgba(2,6,23,.42);
  opacity: 0; transition: opacity .18s ease;
}
.n6drawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(520px, 96vw);
  background: var(--n6-surface);
  border-left:1px solid var(--n6-border);
  box-shadow: -20px 0 55px rgba(2,6,23,.18);
  transform: translateX(100%); transition: transform .18s ease;
  display:flex; flex-direction:column;
}
.n6drawer.open .n6drawer__panel{ transform: translateX(0); }
.n6drawer.open .n6drawer__backdrop{ opacity: 1; }

.n6drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 16px; border-bottom:1px solid var(--n6-border);
}
.n6drawer__head h3{ margin:0; font-size:18px; }
.n6drawer__close{
  background:transparent; border:0; font-size:26px; line-height:1;
  cursor:pointer; color:var(--n6-text-subtle);
}
.n6drawer__form{ padding:16px; display:grid; gap:14px; }
.n6drawer__form label{ display:grid; gap:6px; font-size:13px; color:var(--n6-text); }
.n6drawer__form input[type="text"],
.n6drawer__form input[type="email"],
.n6drawer__form select,
.n6drawer__form textarea{
  width:100%; padding:12px 12px; border-radius:12px; border:1px solid var(--n6-border);
  background: var(--n6-surface-2); color: var(--n6-text);
}
.n6drawer__form textarea{ resize: vertical; }
.n6drawer__form .row{ display:grid; gap:12px; }
.n6drawer__form .row.two{ grid-template-columns: 1fr 1fr; }
@media (max-width: 680px){ .n6drawer__form .row.two{ grid-template-columns: 1fr; } }

.n6drawer__form .actions{
  display:flex; justify-content:flex-end; gap:10px; margin-top:2px;
}
.n6drawer__msg{ min-height:18px; font-size:13px; color:var(--n6-text-subtle); }

/* evita scroll do body quando o drawer está aberto */
body.n6-support-open{ overflow: hidden; }

/* ===========================
   N6 – Drawer de Suporte
   (colar no fim de assets/css/nova.css)
   =========================== */

:root{
  --n6p:        #10b981;                 /* primária */
  --n6-card:    #ffffff;
  --n6-text:    #0f172a;
  --n6-muted:   #64748b;
  --n6-border:  rgba(2,6,23,.10);
  --n6-input:   #ffffff;
  --n6-ring:    #10b98133;
  --n6-scrim:   rgba(2,6,23,.46);
}

[data-theme="dark"]{
  --n6-card:   #0b1220;
  --n6-text:   #e5e7eb;
  --n6-muted:  #94a3b8;
  --n6-border: rgba(255,255,255,.10);
  --n6-input:  #0f172a;
  --n6-ring:   #10b98133;
  --n6-scrim:  rgba(0,0,0,.55);
}

/* wrapper */
#n6-support-drawer{
  position: fixed; inset: 0; z-index: 10050;
  display: block; /* fica oculto via [hidden] no HTML */
}
#n6-support-drawer::before{
  content:"";
  position: absolute; inset: 0;
  background: var(--n6-scrim);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .18s ease;
  pointer-events: none;
}
#n6-support-drawer.open::before{ opacity: 1; }

/* painel (coluna da direita) */
#n6-support-drawer > .panel{
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(560px, 96vw);
  background: var(--n6-card);
  color: var(--n6-text);
  border-left: 1px solid var(--n6-border);
  box-shadow: -30px 0 80px rgba(2,6,23,.35);
  transform: translateX(102%);
  transition: transform .18s ease;
  display: flex; flex-direction: column;
}
#n6-support-drawer.open > .panel{ transform: translateX(0); }

/* header */
#n6-support-drawer .panel .head{
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--n6-border);
  background: inherit;
}
#n6-support-drawer .panel .head h3{
  font-size: 18px; font-weight: 600; margin: 0;
}
#n6-support-drawer .panel .close{
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px;
  border: 1px solid var(--n6-border);
  background: transparent; color: var(--n6-muted);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
#n6-support-drawer .panel .close:hover{
  background: rgba(2,6,23,.04); color: var(--n6-text);
}

/* conteúdo rolável */
#n6-support-drawer .panel .body{
  padding: 16px 18px 22px;
  overflow: auto;
}

/* grid do formulário */
#n6-support-drawer .form-grid{
  display: grid; gap: 14px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 760px){
  #n6-support-drawer .form-grid{ grid-template-columns: 1fr; }
}

/* campos */
#n6-support-drawer .field label{
  display: block; margin: 0 0 6px;
  font-size: 12px; letter-spacing: .02em;
  color: var(--n6-muted);
}
#n6-support-drawer input[type="text"],
#n6-support-drawer input[type="email"],
#n6-support-drawer select,
#n6-support-drawer textarea{
  width: 100%;
  border: 1px solid var(--n6-border);
  background: var(--n6-input);
  color: var(--n6-text);
  border-radius: 14px;
  padding: 12px 12px;
  font: inherit;
  outline: none;
  box-shadow: 0 0 0 0 var(--n6-ring);
  transition: border-color .12s, box-shadow .12s, background .12s;
}
#n6-support-drawer textarea{ min-height: 160px; resize: vertical; }
#n6-support-drawer select{ appearance: none; background-image: none; }

#n6-support-drawer input:focus,
#n6-support-drawer select:focus,
#n6-support-drawer textarea:focus{
  border-color: var(--n6p);
  box-shadow: 0 0 0 6px var(--n6-ring);
}

/* checkbox/consentimento */
#n6-support-drawer .consent{
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--n6-muted); margin-top: 6px;
}

/* ações */
#n6-support-drawer .actions{
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 10px; border-top: 1px solid var(--n6-border);
  margin-top: 14px;
}
#n6-support-drawer .btn{
  --_padx: 14px; --_pady: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--_pady) var(--_padx);
  font-weight: 600; border-radius: 12px;
  border: 1px solid var(--n6-border);
  background: transparent; color: var(--n6-text);
  cursor: pointer; transition: transform .06s ease, background .12s, border-color .12s;
}
#n6-support-drawer .btn:hover{ background: rgba(2,6,23,.04); }
#n6-support-drawer .btn:active{ transform: translateY(1px); }

#n6-support-drawer .btn-primary{
  border-color: transparent;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 10px 20px rgba(16,185,129,.28);
}
#n6-support-drawer .btn-primary:hover{
  background: linear-gradient(135deg, #14c38e, #0aa37a);
  box-shadow: 0 14px 26px rgba(16,185,129,.34);
}

/* mensagem de status */
#n6-support-drawer #n6-support-msg{
  margin-top: 8px; min-height: 20px; font-size: 14px; color: var(--n6-muted);
}
#n6-support-drawer #n6-support-msg.success{ color: var(--n6p); }
#n6-support-drawer #n6-support-msg.error{ color: #ef4444; }

/* acessibilidade / motion */
@media (prefers-reduced-motion: reduce){
  #n6-support-drawer::before,
  #n6-support-drawer > .panel{ transition: none; }
}

/* ===== N6 Support Drawer – ajustes finais ===== */

/* 1) Painel: largura, sombra e scroll interno */
#n6-support-drawer .n6drawer__panel{
  width: min(520px, 96vw);
  overflow: auto;                        /* ativa scroll dentro do painel */
  box-shadow: -20px 0 55px rgba(2,6,23,.18);
}

/* 2) Cabeçalho sticky */
#n6-support-drawer .n6drawer__head{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--n6-surface);
  border-bottom: 1px solid var(--n6-border);
  padding: 16px;
}

/* 3) Form: respiro interno consistente */
#n6-support-drawer .n6drawer__form{
  padding: 16px;
  display: grid;
  gap: 14px;
}

/* 4) Grid 2 colunas responsivo */
#n6-support-drawer .n6drawer__form .row.two{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 680px){
  #n6-support-drawer .n6drawer__form .row.two{ grid-template-columns: 1fr; }
}

/* 5) Campos: altura, foco e placeholder */
#n6-support-drawer .n6drawer__form input[type="text"],
#n6-support-drawer .n6drawer__form input[type="email"],
#n6-support-drawer .n6drawer__form select{
  height: 44px;
  line-height: 1.3;
  font: inherit;
  background: var(--n6-surface-2);
  border: 1px solid var(--n6-border);
  border-radius: 12px;
  padding: 12px 12px;
  color: var(--n6-text);
}
#n6-support-drawer .n6drawer__form textarea{
  min-height: 160px;
  font: inherit;
  background: var(--n6-surface-2);
  border: 1px solid var(--n6-border);
  border-radius: 12px;
  padding: 12px 12px;
  color: var(--n6-text);
}
#n6-support-drawer .n6drawer__form input::placeholder,
#n6-support-drawer .n6drawer__form textarea::placeholder{
  color: var(--n6-text-subtle);
  opacity: .9;
}
#n6-support-drawer .n6drawer__form input:focus,
#n6-support-drawer .n6drawer__form select:focus,
#n6-support-drawer .n6drawer__form textarea:focus{
  outline: 0;
  border-color: var(--n6-primary);
  box-shadow: 0 0 0 6px var(--n6-primary-soft);
  background: #fff;
}

/* 6) Checkbox/consentimento alinhado */
#n6-support-drawer .n6drawer__form .check{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--n6-text-subtle);
}
#n6-support-drawer .n6drawer__form .check input{
  width: 18px; height: 18px;
  accent-color: var(--n6-primary);
}

/* 7) Rodapé de ações sticky e sem “pulo” */
#n6-support-drawer .n6drawer__form .actions{
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;                            /* evita deslocar layout */
  padding: 12px 0 0;
  background:
    linear-gradient(180deg, transparent, var(--n6-surface) 40%);
  border-top: 1px solid var(--n6-border);
}

/* 8) Botões: tamanho mínimo e estados */
#n6-support-drawer .n6drawer__form .actions .pill{
  min-height: 40px;
  padding: 10px 16px;
}
#n6-support-drawer #n6-support-send[disabled]{
  opacity: .6;
  cursor: not-allowed;
  filter: grayscale(.1);
}

/* 9) Mensagens (status) mais legíveis */
#n6-support-drawer .n6drawer__msg{
  min-height: 18px;
  font-size: 13px;
  color: var(--n6-text-subtle);
}
#n6-support-drawer .n6drawer__msg.success{ color: var(--n6-primary); }
#n6-support-drawer .n6drawer__msg.error{ color: #ef4444; }

/* 10) Backdrop um pouco mais opaco (opcional) */
#n6-support-drawer .n6drawer__backdrop{
  background: rgba(2,6,23,.48);
}

/* Padroniza tipografia e layout dos chips .pill (a e button) */
.pill,
a.pill,
button.pill{
  font: inherit;                 /* herda a mesma família/tamanho do resto */
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;                /* mesmo compasso dos demais */
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;                      /* espaço p/ ícone + texto */
}

/* Garante que o "Suporte" siga a mesma cor e não herde estilos do UA */
#n6nova-support.pill{
  color: var(--n6-text);
  background: var(--n6-surface);
  border-color: var(--n6-border);
}

/* Ícones nos chips (se houver) com tamanho uniforme */
.n6nav-chips .pill svg{
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

/* Cápsula da topbar (o grupo dos chips) — se ainda não tiver estilo */
.n6nav-chips{
  display:inline-flex; align-items:center; gap:10px;
  background: var(--n6-surface);
  border: 1px solid var(--n6-border);
  border-radius: 9999px;
  padding: 6px 10px;
  box-shadow: var(--n6-shadow-sm);
}

/* No dark, usa tokens escuros automaticamente */
:root[data-theme="dark"] .n6nav-chips{
  background: var(--n6-surface);
  border-color: var(--n6-border);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}

/* Os popovers (Conta/Notificações) já ficam dark, mas reforço */
:root[data-theme="dark"] .n6nova-topbar .menu{
  background: var(--n6-surface) !important;
  border-color: var(--n6-border) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.45) !important;
}
:root[data-theme="dark"] .n6nova-topbar .menu a,
:root[data-theme="dark"] .n6nova-topbar .menu button{
  color: var(--n6-text) !important;
}
:root[data-theme="dark"] .n6nova-topbar .menu a:hover,
:root[data-theme="dark"] .n6nova-topbar .menu button:hover{
  background: var(--n6-surface-2) !important;
}

/* === Topbar: textos visíveis no tema escuro === */
:root[data-theme="dark"] .n6nav-chips,
:root[data-theme="dark"] .n6nav-chips .pill,
:root[data-theme="dark"] .n6nav-chips a.pill,
:root[data-theme="dark"] .n6nav-chips button.pill{
  color: var(--n6-text) !important;          /* texto claro */
  background: var(--n6-surface) !important;  /* cápsula/chips escuros */
  border-color: var(--n6-border) !important;
}

/* spans/labels internos (ex.: “N6Tech”, “Notificações”, “Suporte”) */
:root[data-theme="dark"] .n6nav-chips .pill span,
:root[data-theme="dark"] .n6nav-chips .pill strong{
  color: var(--n6-text) !important;
  opacity: 1 !important;                      /* remove qualquer atenuação */
}

/* hover coerente no dark */
:root[data-theme="dark"] .n6nav-chips .pill:hover{
  background: var(--n6-surface-2) !important;
  border-color: var(--n6-border) !important;
}

/* ícones dos chips usam a mesma cor do texto */
.n6nav-chips .pill svg{
  width:16px; height:16px;
  stroke: currentColor; fill: currentColor;
}

/* botão de notificações: o <span> herda cor do chip */
#n6-notify-btn span{ color: inherit; }

/* separador do status um pouco mais visível no dark */
:root[data-theme="dark"] .n6-status-pill .sep{ opacity:.7; }

/* Notificações: zera qualquer ícone de fundo legado */
#n6-notify-btn{
  position: relative;
  background-image: none !important;   /* desliga PNG/SVG de fundo que fica escuro */
  padding-left: 36px;                  /* espaço pro ícone */
  color: var(--n6-text) !important;    /* texto segue o tema */
}

/* Injeta um sino que sempre usa currentColor (light/dark) */
#n6-notify-btn::before{
  content:"";
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px;
  background-color: currentColor;      /* cor do ícone = cor do texto */
  /* máscara do sino (SVG inline) */
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M12 3a6 6 0 0 0-6 6v3c0 .53-.21 1.04-.59 1.41L4 15h16l-1.41-1.59A2 2 0 0 1 18 12V9a6 6 0 0 0-6-6zm0 18a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3z"/>\
</svg>') no-repeat center / 100% 100%;
          mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M12 3a6 6 0 0 0-6 6v3c0 .53-.21 1.04-.59 1.41L4 15h16l-1.41-1.59A2 2 0 0 1 18 12V9a6 6 0 0 0-6-6zm0 18a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3z"/>\
</svg>') no-repeat center / 100% 100%;
}

/* acessibilidade: se preferir menos animação, nada muda aqui */

/* Esconde QUALQUER SVG/ícone interno para evitar “duplo” */
#n6-notify-btn svg,
#n6-notify-btn .ico,
#n6-notify-btn .icon {
  display: none !important;
}

/* Ícone único via máscara, herda currentColor (light/dark) */
#n6-notify-btn::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-color: currentColor; /* cor = texto */
  -webkit-mask: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
      <path d="M12 3a6 6 0 0 0-6 6v3c0 .53-.21 1.04-.59 1.41L4 15h16l-1.41-1.59A2 2 0 0 1 18 12V9a6 6 0 0 0-6-6zm0 18a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3z"/>\
    </svg>') no-repeat center / 100% 100%;
  mask: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
      <path d="M12 3a6 6 0 0 0-6 6v3c0 .53-.21 1.04-.59 1.41L4 15h16l-1.41-1.59A2 2 0 0 1 18 12V9a6 6 0 0 0-6-6zm0 18a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3z"/>\
    </svg>') no-repeat center / 100% 100%;
}

/* === Support drawer — 3 botões iguais + ícone do WhatsApp ================= */
/* tamanhos/padronização */
:root{
  --n6-btn-h: 42px;
  --n6-btn-r: 12px;   /* mude para 999px se quiser “pílula” total */
}

/* todos os botões da área de ações com o MESMO visual */
#n6-support-drawer .n6drawer__form .actions .pill,
#n6-support-drawer .n6drawer__form .actions button{
  height: var(--n6-btn-h) !important;
  min-height: var(--n6-btn-h) !important;
  padding: 0 16px !important;
  border-radius: var(--n6-btn-r) !important;
  border: 1px solid var(--n6-border) !important;
  background: var(--n6-surface) !important;
  color: var(--n6-text) !important;
  box-shadow: var(--n6-shadow-sm) !important;
  display: inline-flex; align-items: center; gap: 8px;
}

/* botão do WhatsApp – igual aos outros por padrão */
#n6-support-wa{
  --wa: #25D366;                       /* cor do WhatsApp */
  border-color: var(--n6-border) !important;
}

/* ícone via máscara (pinta certo e não vira quadrado) */
#n6-support-wa::before{
  content: "";
  width: 16px; height: 16px; flex: 0 0 16px;
  background-color: var(--wa);
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M20 3.5A10.5 10.5 0 1 0 4.6 20.3L3 21l.8-1.6A10.5 10.5 0 1 0 20 3.5Zm-5.7 5.2c-.2-.4-.4-.4-.6-.4h-.5c-.2 0-.5.1-.8.4-.3.3-1 .9-1 2s1 2.3 1.1 2.5 2 3.1 4.9 4.2c2.4 1 2.9.8 3.4.8s1.7-.7 1.9-1.4c.2-.7.2-1.2.1-1.4s-.2-.3-.5-.4l-1.7-.8c-.2-.1-.4-.1-.6.1-.2.2-.7.8-.8.9-.2.2-.4.2-.6.1-.3-.1-1.1-.4-2.1-1.3a7 7 0 0 1-1.4-1.7c-.1-.2 0-.4.1-.6.1-.1.2-.2.3-.4.1-.1.1-.3.2-.5 0-.2 0-.4 0-.5 0-.2-.6-1.6-.8-1.9Z"/>\
</svg>') no-repeat center / 100% 100%;
          mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M20 3.5A10.5 10.5 0 1 0 4.6 20.3L3 21l.8-1.6A10.5 10.5 0 1 0 20 3.5Zm-5.7 5.2c-.2-.4-.4-.4-.6-.4h-.5c-.2 0-.5.1-.8.4-.3.3-1 .9-1 2s1 2.3 1.1 2.5 2 3.1 4.9 4.2c2.4 1 2.9.8 3.4.8s1.7-.7 1.9-1.4c.2-.7.2-1.2.1-1.4s-.2-.3-.5-.4l-1.7-.8c-.2-.1-.4-.1-.6.1-.2.2-.7.8-.8.9-.2.2-.4.2-.6.1-.3-.1-1.1-.4-2.1-1.3a7 7 0 0 1-1.4-1.7c-.1-.2 0-.4.1-.6.1-.1.2-.2.3-.4.1-.1.1-.3.2-.5 0-.2 0-.4 0-.5 0-.2-.6-1.6-.8-1.9Z"/>\
</svg>') no-repeat center / 100% 100%;
}

/* hover consistente: o WA fica verde e o ícone fica branco */
#n6-support-wa:hover{
  background: var(--wa) !important;
  border-color: var(--wa) !important;
  color: #fff !important;
}
#n6-support-wa:hover::before{ background-color: #fff; }

/* foco acessível igual p/ todos */
#n6-support-drawer .n6drawer__form .actions .pill:focus-visible{
  outline: 2px solid var(--n6-primary) !important;
  outline-offset: 2px;
}