/* =====================================================
   Meus negócios (negocios.html): painel do anunciante, cartões de criar com a cor de cada
   classe (as mesmas da página inicial) e o formulário que muda de cor conforme o tipo.
   ===================================================== */
:root { --c-servicos: #00adee; --c-delivery: #ff7a1a; --c-lojinha: #b066ff; --c-imoveis: #2fbf71; --c-saude: #0fb5a6; --c-comunidade: #e5487f; }
.servicos { --c: var(--c-servicos); }
.delivery { --c: var(--c-delivery); }
.lojinha { --c: var(--c-lojinha); }
.imoveis { --c: var(--c-imoveis); }
.saude { --c: var(--c-saude); }
.comunidade { --c: var(--c-comunidade); }

/* ---------- topo ---------- */
.ng-hero { position: relative; overflow: hidden; display: grid; gap: 16px; margin: 4px 0 22px; padding: 22px 20px 18px; border-radius: 24px; border: 1px solid var(--line);
  background:
    radial-gradient(70% 120% at 0% 0%, color-mix(in srgb, var(--c-servicos) 22%, transparent), transparent 70%),
    radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--c-lojinha) 18%, transparent), transparent 70%),
    radial-gradient(60% 120% at 100% 100%, color-mix(in srgb, var(--c-delivery) 14%, transparent), transparent 70%),
    var(--panel); }
.ng-kicker { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ng-hero h1 { margin: 4px 0 4px; font-size: 28px; font-weight: 850; letter-spacing: -.6px; }
.ng-hero p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; max-width: 46ch; }
.ng-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* 6 lugares sempre em 3 + 3: cada um na cor da sua classe; criado = cartão aceso no degradê da cor */
@media (min-width: 700px) { .ng-slots { gap: 12px; } }
.ng-slot { position: relative; overflow: hidden; display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 112px; padding: 14px 6px 12px; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--c) 38%, var(--line));
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), color-mix(in srgb, var(--panel) 85%, transparent);
  color: var(--text); font: inherit; font-size: 12.5px; font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .2s, border-color .15s; }
.ng-slot:hover { transform: translateY(-2px); border-color: var(--c); box-shadow: 0 10px 22px -16px var(--c); }
.ng-slot .ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 62%, #000)); box-shadow: 0 8px 18px -8px var(--c); }
.ng-slot .ic svg { width: 20px; height: 20px; }
.ng-slot .st { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 850; letter-spacing: .02em;
  color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.ng-slot.feito { border-color: transparent; color: #fff;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 55%, #000));
  box-shadow: 0 12px 26px -16px var(--c); }
.ng-slot.feito .ic { background: rgba(255, 255, 255, .2); box-shadow: none; }
.ng-slot.feito .st { color: #fff; background: rgba(0, 0, 0, .22); }
.ng-slot.feito .st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7dffb3; box-shadow: 0 0 0 2px rgba(125, 255, 179, .25); }
.ng-slot.feito .st.pausa::before { background: #ffb347; box-shadow: 0 0 0 2px rgba(255, 179, 71, .3); }

.ng-tit { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; margin: 22px 2px 10px; }
.ng-tit h2 { margin: 0; font-size: 18px; font-weight: 850; letter-spacing: -.2px; }
.ng-tit small { color: var(--muted); font-size: 12.5px; }

/* ---------- cartões dos perfis criados ---------- */
.neg-grade { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.neg-grade:empty { display: none; }
.neg-card { border-radius: 24px; scroll-margin-top: 80px; box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 30%, transparent) inset; }
.neg-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; z-index: 2; background: var(--c); }
.neg-card .capa { height: 112px; background: #06202c var(--img) center / cover no-repeat; }
.neg-card .capa::after { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 45%, transparent) 0%, rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, .55) 100%); }
.neg-card .capa .tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 9px; box-shadow: 0 6px 16px -6px var(--c); }
.ng-status { position: absolute; right: 12px; top: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 11.5px; font-weight: 750; }
.ng-status i { width: 7px; height: 7px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 3px rgba(47, 191, 113, .25); }
.ng-status.off i { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .25); }
.neg-card .corpo { gap: 12px; }
.ng-cab { display: flex; align-items: flex-start; gap: 12px; margin-top: -30px; position: relative; z-index: 1; }
.ng-cab > div:last-child { min-width: 0; display: grid; gap: 2px; padding-top: 36px; }
.neg-card .ng-cab .avatar { width: 66px; height: 66px; margin: 0; font-size: 20px; border: 3px solid var(--panel); box-shadow: 0 0 0 2px var(--c);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, #000), var(--c)); }
.neg-card h3 { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neg-card .meta { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neg-card .nums div { padding: 9px 6px; border-radius: 14px; background: var(--panel-2); }
.neg-card .nums b { font-size: 17px; }
.neg-card .nums div:first-child b { color: var(--c); }
.ng-comp { display: grid; gap: 7px; padding: 11px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 25%, var(--line)); background: color-mix(in srgb, var(--c) 6%, transparent); }
.ng-comp-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.ng-comp-topo span { color: var(--muted); font-size: 12px; }
.ng-comp-barra { height: 6px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.ng-comp-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, #fff), var(--c)); transition: width .5s; }
.ng-comp.ok { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: color-mix(in srgb, var(--ok) 7%, transparent); }
.ng-comp.ok .ng-comp-topo strong { color: var(--ok); }
.ng-comp-falta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.ng-comp-falta svg { color: var(--c); flex: none; }
.ng-comp-falta:hover { color: var(--text); }
.neg-card .acoes { gap: 8px; }
.neg-card .acoes .btn { min-height: 38px; }
.btn.ng-pri { background: var(--c); color: #fff; border-color: transparent; box-shadow: 0 8px 20px -12px var(--c); }
.btn.ng-pri:hover { background: color-mix(in srgb, var(--c) 85%, #000); }
.btn.ng-so-ic { padding-left: 11px; padding-right: 11px; }
.btn.ng-alerta { color: #ef4444; border-color: color-mix(in srgb, #ef4444 40%, var(--line)); }

/* ---------- cartões de criar (cada tipo com a sua cara) ---------- */
.ng-criar { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ng-criar:empty { display: none; }
.ng-novo { position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: start; gap: 6px; min-height: 250px; padding: 18px; border-radius: 24px; text-align: left;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); color: #fff; font: inherit; cursor: pointer;
  background: #071017 var(--img) center / cover no-repeat; transition: transform .2s, box-shadow .2s; }
.ng-novo::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4, 10, 14, .55) 0%, rgba(4, 10, 14, .82) 55%, rgba(4, 10, 14, .94) 100%), linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, transparent), transparent 60%); }
.ng-novo:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px var(--c); }
.ng-novo:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; }
.ng-novo-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ng-novo-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 70%, #fff 30%), var(--c)); box-shadow: 0 10px 24px -8px var(--c); }
.ng-novo-tag { padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; color: #fff; background: color-mix(in srgb, var(--c) 35%, rgba(0, 0, 0, .3)); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); }
.ng-novo strong { font-size: 20px; font-weight: 850; letter-spacing: -.3px; line-height: 1.2; }
.ng-novo > small { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.ng-novo-pts { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 5px; font-size: 13px; color: rgba(255, 255, 255, .92); }
.ng-novo-pts li { display: flex; align-items: center; gap: 7px; }
.ng-novo-pts svg { color: var(--c); flex: none; stroke-width: 3; }
.ng-novo-cta { justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 10px 16px; border-radius: 999px; background: var(--c); color: #fff;
  font-size: 14px; font-weight: 800; box-shadow: 0 10px 24px -10px var(--c); }
.ng-novo:hover .ng-novo-cta svg { transform: translateX(3px); }
.ng-novo-cta svg { transition: transform .2s; }

/* ---------- formulário ---------- */
#folhaNegocio { --c: var(--c-servicos); }
#folhaNegocio[data-tipo="delivery"] { --c: var(--c-delivery); }
#folhaNegocio[data-tipo="lojinha"] { --c: var(--c-lojinha); }
#folhaNegocio[data-tipo="imoveis"] { --c: var(--c-imoveis); }
#folhaNegocio[data-tipo="saude"] { --c: var(--c-saude); }
#folhaNegocio .folha-topo { position: relative; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 14%, transparent), transparent); transition: background .3s; }
#folhaNegocio .folha-topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c); transition: background .3s; }
#folhaNegocio #negSalvar { background: var(--c); color: #fff; box-shadow: 0 10px 24px -12px var(--c); }
#folhaNegocio #negSalvar:hover { background: color-mix(in srgb, var(--c) 85%, #000); }
#folhaNegocio .marca-op.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
#folhaNegocio input:focus, #folhaNegocio textarea:focus, #folhaNegocio select:focus { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); outline: none; }
#folhaNegocio .neg-mais > summary::after { color: var(--c); }
/* áreas de atuação (Freelances) */
.campo.areas { display: grid; gap: 10px; }
.areas-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.areas-cab label { margin: 0; }
.areas-conta { font-size: 12px; font-weight: 700; color: var(--muted); padding: 3px 9px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
.areas-conta.on { color: var(--c); border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); }
.areas-escolhidas { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-radius: 16px; border: 1.5px dashed var(--line); background: color-mix(in srgb, var(--c) 4%, transparent); min-height: 24px; }
.areas-vazio { margin: 0; font-size: 13px; color: var(--muted); }
.area-esc { display: inline-flex; align-items: center; border-radius: 999px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); overflow: hidden; }
.area-esc.principal { background: var(--c); border-color: var(--c); color: #fff; }
.area-esc-nome { display: inline-flex; align-items: center; gap: 6px; padding: 7px 4px 7px 12px; border: 0; background: none; color: inherit; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.area-esc-nome small { font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.22); }
.area-esc-x { display: grid; place-items: center; width: 30px; height: 30px; border: 0; background: none; color: inherit; opacity: .75; cursor: pointer; }
.area-esc-x:hover { opacity: 1; }
#folhaNegocio .areas-busca { width: 100%; box-sizing: border-box; padding: 11px 14px 11px 40px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23889' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 13px center / 18px no-repeat; color: var(--text); font: inherit; font-size: 14.5px; }
.areas-grupos { display: grid; gap: 8px; }
.area-grupo { border: 1px solid var(--line); border-radius: 16px; background: var(--panel-2); overflow: hidden; }
.area-grupo > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 13px 14px; cursor: pointer; font-weight: 750; font-size: 14.5px; }
.area-grupo > summary::-webkit-details-marker { display: none; }
.area-grupo > summary span { flex: 1; }
.area-grupo > summary small { font-size: 12px; font-weight: 650; color: var(--muted); }
.area-grupo > summary small.on { color: var(--c); font-weight: 800; }
.area-grupo > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: -4px 4px 0 2px; transition: transform .2s; }
.area-grupo[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.area-grupo > .marcas { padding: 2px 12px 14px; }
.area-grupo .marca-op { background: var(--panel); }
.area-outra { padding: 2px 2px 0; }

#negAvatar { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, #000), var(--c)); box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px color-mix(in srgb, var(--c) 60%, transparent); transition: background .3s; }
#negAvatar.vazio svg { width: 30px; height: 30px; }

.ng-tipos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ng-tipos.um { grid-template-columns: 1fr; }
.ng-tipo { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--panel-2);
  color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.ng-tipo .ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); transition: background .15s, color .15s; }
.ng-tipo .tx { min-width: 0; display: grid; gap: 1px; }
.ng-tipo strong { font-size: 14px; }
.ng-tipo small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-tipo .ok { position: absolute; right: 9px; top: 9px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); }
.ng-tipo:not(:disabled):hover { border-color: color-mix(in srgb, var(--c) 60%, var(--line)); }
.ng-tipo.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--panel)); box-shadow: 0 8px 22px -14px var(--c); }
.ng-tipo.on .ic { background: var(--c); color: #fff; }
.ng-tipo.on .ok { border-color: var(--c); background: var(--c) radial-gradient(circle, #fff 0 3px, transparent 3.5px); }
.ng-tipo:disabled { cursor: default; opacity: .5; }
.ng-tipo:disabled small { color: var(--ok); font-weight: 700; }
.ng-tipos.um .ng-tipo { cursor: default; }

@media (max-width: 560px) {
  .ng-hero { padding: 18px 16px 16px; border-radius: 22px; }
  .ng-hero h1 { font-size: 25px; }
  .ng-slot { font-size: 11.5px; min-height: 104px; padding: 12px 2px 10px; }
  .neg-grade, .ng-criar { grid-template-columns: 1fr; }
  .ng-novo { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .ng-novo, .ng-slot, .ng-tipo, .ng-comp-barra i { transition: none; } }

/* ---------- resumo dos 30 dias no topo ---------- */
.ng-resumo { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.ng-res-item { flex: 1 1 110px; display: grid; gap: 1px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--panel) 75%, transparent); border: 1px solid var(--line); }
.ng-res-item b { font-size: 20px; font-weight: 850; letter-spacing: -.3px; }
.ng-res-item span { font-size: 12px; color: var(--muted); }
.ng-res-item small, .ng-est-n i { font-size: 11.5px; font-weight: 800; font-style: normal; }
.sobe { color: var(--ok); } .desce { color: var(--danger); }
.ng-res-ver { flex: 1 1 140px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; border-radius: 14px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--c-servicos), var(--c-lojinha)); color: #fff; font: inherit; font-weight: 800; font-size: 13.5px; box-shadow: 0 10px 24px -14px var(--c-lojinha); }

/* ---------- estatísticas no cartão do perfil ---------- */
.ng-est-tit { margin: 2px 2px -6px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ng-est { display: flex; align-items: center; gap: 4px; width: 100%; padding: 10px 10px 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ng-est:hover { border-color: var(--c); }
.ng-est-n { flex: 1; min-width: 0; display: grid; gap: 0; }
.ng-est-n b { font-size: 17px; font-weight: 850; }
.ng-est-n small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ng-est-vazio { flex: 1; font-size: 12.5px; color: var(--muted); }
.ng-est-ver { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 7px 9px; border-radius: 10px; background: var(--c); color: #fff; font-size: 12px; font-weight: 800; }
.ng-escolha { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; margin-bottom: 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ng-escolha .avatar { width: 46px; height: 46px; box-shadow: 0 0 0 2px var(--c); }
.ng-escolha .tx { flex: 1; display: grid; gap: 2px; } .ng-escolha small { color: var(--muted); font-size: 12.5px; }

/* ---------- formulário: blocos novos ---------- */
.ng-bloco { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
.ng-bloco:empty { display: none; }
.ng-bloco > .campo:first-of-type { margin-top: 10px; }
.ng-bloco-tit { display: flex; align-items: center; gap: 10px; }
.ng-bloco-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.ng-bloco-tit > div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ng-bloco-tit strong { font-size: 14.5px; } .ng-bloco-tit small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.ng-prefixo { display: flex; align-items: stretch; }
.ng-prefixo span { display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--line); border-right: 0; border-radius: 12px 0 0 12px; background: var(--panel-2); color: var(--muted); font-weight: 800; }
.ng-prefixo input { border-radius: 0 12px 12px 0 !important; min-width: 0; flex: 1; }
#negCnpjAjuda.ok { color: var(--ok); font-weight: 700; } #negCnpjAjuda.erro { color: var(--danger); font-weight: 700; }
.ng-capa-ed { position: relative; }
.ng-capa-vazia { width: 100%; aspect-ratio: 2.6 / 1; display: grid; place-content: center; justify-items: center; gap: 4px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--c) 55%, var(--line));
  background: color-mix(in srgb, var(--c) 6%, transparent); color: var(--c); font: inherit; cursor: pointer; }
.ng-capa-vazia span { font-weight: 800; font-size: 14px; } .ng-capa-vazia small { color: var(--muted); font-size: 12px; }
.ng-capa-foto { position: relative; aspect-ratio: 2 / 1; border-radius: 16px; background: #06202c center / cover no-repeat; overflow: hidden; }
.ng-capa-foto .bts { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; }
.ng-capa-foto .bts .btn { background: rgba(0, 0, 0, .55); color: #fff; border-color: transparent; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ng-chip { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ng-chip:hover { border-color: var(--c); color: var(--c); }
.ng-hor-atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; }
.ng-hor-lista { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); }
.ng-hor-dia { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; border-top: 1px solid var(--line); }
.ng-hor-dia:first-child { border-top: 0; }
.ng-hor-dia .nome { width: 38px; flex: none; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.ng-hor-dia.aberto .nome { color: var(--text); }
.ng-hor-dia .horas { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.ng-hor-dia .horas input { width: 96px; min-width: 0; padding: 9px 6px; border: 1px solid var(--line); border-radius: 11px; background: var(--input); color: var(--text);
  font: inherit; font-size: 15px; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; cursor: pointer; }
:root[data-theme="dark"] .ng-hor-dia .horas input { color-scheme: dark; }
.ng-hor-dia .horas input:focus { outline: none; border-color: var(--c); }
.ng-hor-dia .horas input::-webkit-calendar-picker-indicator { display: none; }
.ng-hor-dia .horas input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.ng-hor-dia .horas span { font-size: 12px; color: var(--muted); }
.ng-hor-dia .fechado { font-size: 13px; color: var(--muted); }
.ng-chave { position: relative; flex: none; width: 40px; height: 24px; cursor: pointer; }
.ng-chave input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ng-chave i { position: absolute; inset: 0; border-radius: 99px; background: var(--line); transition: background .2s; pointer-events: none; }
.ng-chave i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.ng-chave input:checked + i { background: var(--c); }
.ng-chave input:checked + i::after { transform: translateX(16px); }
.ng-chave input:focus-visible + i { outline: 2px solid var(--c); outline-offset: 2px; }
.ng-promo-previa { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--c) 60%, transparent);
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 18%, transparent), color-mix(in srgb, var(--c) 4%, transparent)); }
.ng-promo-previa .ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--c); color: #fff; }
.ng-promo-previa .tx { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ng-promo-previa small { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.ng-promo-previa p { margin: 0; font-size: 12.5px; color: var(--muted); }
.ng-promo-previa .ate { font-size: 11.5px; color: var(--muted); }
.ng-promo-previa .cupom { flex: none; padding: 6px 9px; border-radius: 10px; border: 1.5px dashed var(--c); color: var(--c); font: 800 12.5px ui-monospace, Menlo, monospace; letter-spacing: .05em; }

/* =====================================================
   Estatísticas do negócio (insights-negocio.js)
   ===================================================== */
.ni-folha { --c: var(--c-servicos); }
.ni-folha[data-tipo="delivery"] { --c: var(--c-delivery); }
.ni-folha[data-tipo="lojinha"] { --c: var(--c-lojinha); }
.ni-folha[data-tipo="imoveis"] { --c: var(--c-imoveis); }
.ni-folha[data-tipo="saude"] { --c: var(--c-saude); }
.ni-folha .folha-topo { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 14%, transparent), transparent); }
.ni-corpo { padding: 14px 16px 28px; display: grid; gap: 14px; align-content: start; }
.ni-carregando { padding: 40px 0; text-align: center; color: var(--muted); }
.ni-topo { display: grid; gap: 10px; }
.ni-quem { display: flex; align-items: center; gap: 12px; }
.ni-quem .avatar { width: 48px; height: 48px; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--c); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, #000), var(--c)); }
.ni-quem > div { display: grid; gap: 2px; min-width: 0; }
.ni-quem strong { font-size: 17px; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ni-tipo { justify-self: start; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); font-size: 11.5px; font-weight: 800; }
.ni-periodo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 13px; background: var(--panel-2); }
.ni-periodo button { border: 0; border-radius: 10px; padding: 9px 4px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.ni-periodo button[aria-selected="true"] { background: var(--c); color: #fff; box-shadow: 0 6px 16px -8px var(--c); }
.ni-intervalo { color: var(--muted); font-size: 12px; }
.ni-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); font-size: 13px; line-height: 1.45; }
.ni-aviso svg { flex: none; color: var(--gold); margin-top: 1px; }
.ni-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ni-kpi { display: grid; gap: 3px; align-content: start; padding: 13px 14px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); }
.ni-kpi.principal { background: linear-gradient(140deg, color-mix(in srgb, var(--c) 22%, var(--panel-2)), var(--panel-2)); border-color: color-mix(in srgb, var(--c) 40%, var(--line)); }
.ni-kpi .rot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 750; color: var(--muted); }
.ni-kpi .rot svg { color: var(--c); }
.ni-kpi strong { font-size: 26px; font-weight: 850; letter-spacing: -.5px; line-height: 1.1; }
.ni-kpi small { font-size: 11.5px; } .ni-kpi .cmp { font-weight: 800; color: var(--muted); } .ni-kpi .cmp.sobe { color: var(--ok); } .ni-kpi .cmp.desce { color: var(--danger); }
.ni-kpi .dica { color: var(--muted); }
.ni-secao { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.ni-secao-cab { display: flex; align-items: center; gap: 10px; }
.ni-secao-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.ni-secao-cab h3 { margin: 0; font-size: 15.5px; font-weight: 850; }
.ni-secao-cab p { margin: 1px 0 0; font-size: 12px; color: var(--muted); }
.ni-vazio { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); color: var(--muted); font-size: 13px; line-height: 1.45; }
.ni-legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--muted); }
.ni-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.ni-legenda span::before { content: ""; width: 12px; height: 8px; border-radius: 3px; background: var(--c); }
.ni-legenda .c::before { height: 3px; background: var(--ok); }
.ni-legenda .p::before { height: 0; border-top: 2px dashed var(--muted); background: none; }
.ni-graf { position: relative; }
.ni-graf svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.ni-graf .eixo { stroke: var(--line); stroke-width: 1; }
.ni-graf .guia { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.ni-graf .col { fill: color-mix(in srgb, var(--c) 75%, transparent); }
.ni-graf .ant { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .8; }
.ni-graf .cont { fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.ni-graf .mira { stroke: var(--text); stroke-width: 1; opacity: .35; }
.ni-graf-max { position: absolute; left: 4px; top: -4px; font-size: 10.5px; color: var(--muted); }
.ni-graf-eixo { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 2px; }
.ni-graf-dica { position: absolute; top: -6px; transform: translate(-50%, -100%); display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 11.5px; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow); z-index: 2; }
.ni-graf-dica .v { color: color-mix(in srgb, var(--c) 70%, var(--bg)); } .ni-graf-dica .c { color: color-mix(in srgb, var(--ok) 70%, var(--bg)); } .ni-graf-dica .p { opacity: .7; }
.ni-funil { display: grid; gap: 8px; }
.ni-funil-etapa { display: grid; gap: 3px; }
.ni-funil-barra { display: flex; align-items: baseline; gap: 8px; padding: 11px 12px; border-radius: 12px; color: #fff; min-width: max-content;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 70%, #fff 0%)); }
.ni-funil-etapa:nth-child(2) .ni-funil-barra { background: color-mix(in srgb, var(--c) 78%, var(--panel)); }
.ni-funil-etapa:nth-child(3) .ni-funil-barra { background: color-mix(in srgb, var(--ok) 85%, var(--panel)); }
.ni-funil-barra b { font-size: 17px; font-weight: 850; } .ni-funil-barra span { font-size: 12.5px; font-weight: 700; opacity: .95; }
.ni-funil-etapa small { font-size: 11.5px; color: var(--muted); padding-left: 4px; }
.ni-barra { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(60px, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.ni-barra-nome { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ni-barra-nome svg { flex: none; color: var(--c); }
.ni-barra-trilho { display: block; height: 8px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.ni-barra-trilho i { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--c) 65%, transparent); }
.ni-barra.top .ni-barra-trilho i { background: var(--c); }
.ni-barra.top .ni-barra-nome { font-weight: 750; }
.ni-barra-num { display: grid; justify-items: end; line-height: 1.15; } .ni-barra-num b { font-size: 14px; } .ni-barra-num small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.ni-pico { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--c) 10%, transparent); font-size: 13px; line-height: 1.4; }
.ni-pico svg { flex: none; color: var(--c); margin-top: 1px; }
.ni-calor { display: grid; grid-template-columns: 34px repeat(8, minmax(0, 1fr)); gap: 3px; }
.ni-calor .hora { font-size: 10px; color: var(--muted); text-align: center; }
.ni-calor .dia { font-size: 11px; color: var(--muted); font-weight: 700; align-self: center; }
.ni-calor .cel { aspect-ratio: 1.35; border-radius: 5px; background: color-mix(in srgb, var(--c) calc(var(--a) * 100%), var(--panel-2)); }
.ni-calor .cel.top { outline: 2px solid var(--text); outline-offset: -2px; }
.ni-calor-leg { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 6px; font-size: 10.5px; color: var(--muted); }
.ni-calor-leg i { width: 70px; height: 7px; border-radius: 99px; background: linear-gradient(90deg, var(--panel-2), var(--c)); }
.ni-item { display: grid; grid-template-columns: 18px 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.ni-item .pos { font-weight: 850; color: var(--muted); font-size: 13px; text-align: center; }
.ni-item .ft { width: 42px; height: 42px; border-radius: 10px; background: var(--panel-2) center / cover no-repeat; display: grid; place-items: center; color: var(--muted); }
.ni-item .tx { display: grid; gap: 5px; min-width: 0; } .ni-item .tx strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ni-item > b { font-size: 15px; }
.ni-aval { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.ni-aval-media { display: grid; justify-items: center; gap: 2px; padding-right: 4px; }
.ni-aval-media strong { font-size: 38px; font-weight: 850; line-height: 1; }
.estrelas { color: var(--gold); letter-spacing: 1px; font-size: 14px; }
.ni-aval-media small { color: var(--muted); font-size: 11.5px; }
.ni-aval-dist { display: grid; gap: 4px; }
.ni-aval-dist > div { display: grid; grid-template-columns: 26px minmax(0, 1fr) 26px; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.ni-aval-dist .ni-barra-trilho i { background: var(--gold); }
.ni-aval-dist small { text-align: right; }
.ni-aval-per { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.ni-recl { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 12px; background: var(--panel-2); color: var(--text); text-decoration: none; font-size: 13px; font-weight: 700; }
.ni-recl span { flex: 1; } .ni-recl.pend { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.ni-coment { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); }
.ni-coment p { margin: 0; font-size: 13px; line-height: 1.45; } .ni-coment small { color: var(--muted); font-size: 11.5px; }
.ni-dica { display: flex; gap: 12px; padding: 12px; border-radius: 14px; background: var(--panel-2); }
.ni-dica .ic { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.ni-dica > div { display: grid; gap: 4px; justify-items: start; } .ni-dica strong { font-size: 14px; } .ni-dica p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.ni-rodape { display: grid; gap: 10px; }
.ni-baixar { justify-content: center; background: var(--c); color: #fff; border: 0; min-height: 46px; font-weight: 800; }
.ni-rodape p { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; text-align: center; }
@media (min-width: 720px) {
  .ni-corpo { max-width: 880px; margin: 0 auto; width: 100%; }
  .ni-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* faixa da promoção no cartão do negócio */
.ng-promo-st { display: flex; align-items: center; gap: 10px; width: 100%; margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  border: 1px dashed color-mix(in srgb, #f43f5e 55%, transparent); background: linear-gradient(120deg, color-mix(in srgb, #f43f5e 13%, transparent), color-mix(in srgb, #f97316 6%, transparent)); }
.ng-promo-st > svg { flex: none; color: #f43f5e; }
.ng-promo-st .tx { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ng-promo-st strong { font-size: 13.5px; }
.ng-promo-st small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-promo-st .cupom { flex: none; padding: 4px 8px; border-radius: 8px; border: 1.5px dashed #f43f5e; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 800; letter-spacing: .05em; color: #f43f5e; }
.ng-promo-st.espera { border-color: color-mix(in srgb, #f59e0b 60%, transparent); background: color-mix(in srgb, #f59e0b 9%, transparent); }
.ng-promo-st.espera > svg { color: #f59e0b; }
.ng-promo-st.espera small { white-space: normal; }
.ng-promo-st.fim { border-color: var(--line); background: var(--panel-2); }
.ng-promo-st.fim > svg { color: var(--muted); }

/* Cartão do plano (Grátis / Pro) no topo */
.ng-plano { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 12px 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, #7c3aed 40%, var(--line)); background: linear-gradient(120deg, color-mix(in srgb, #7c3aed 16%, var(--panel)), color-mix(in srgb, #2563eb 10%, var(--panel))); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ng-plano-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #7c3aed, #2563eb); color: #fff; }
.ng-plano-ic .selo-pro { background: none; font-size: 12px; }
.ng-plano-tx { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ng-plano-tx strong { font-size: 15px; }
.ng-plano-tx small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.ng-plano-cta { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: none; padding: 9px 16px; border-radius: 999px; background: linear-gradient(135deg, #7c3aed, #2563eb); color: #fff; font-size: 13.5px; font-weight: 800; box-shadow: 0 8px 18px -10px #7c3aed; }
@media (max-width: 560px) {
  .ng-plano { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px 12px; padding: 14px; }
  .ng-plano-cta { grid-column: 1 / -1; width: 100%; box-sizing: border-box; min-height: 44px; border-radius: 14px; }
}
.ng-plano.pro { border-color: color-mix(in srgb, #2fbf71 45%, var(--line)); background: linear-gradient(120deg, color-mix(in srgb, #2fbf71 12%, var(--panel)), color-mix(in srgb, #7c3aed 10%, var(--panel))); }
.ng-plano.espera { border-color: color-mix(in srgb, #f5a524 50%, var(--line)); }
.ng-plano.espera .ng-plano-ic { background: #f5a524; }
.ng-plano-falta { justify-self: start; margin-top: 3px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #2fbf71; background: color-mix(in srgb, #2fbf71 16%, transparent); }
.ng-plano-falta.perto { color: #f5a524; background: color-mix(in srgb, #f5a524 18%, transparent); }
.ng-plano-barra { display: block; height: 5px; margin-top: 4px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 22%, transparent); overflow: hidden; }
.ng-plano-barra i { display: block; height: 100%; border-radius: inherit; background: #2fbf71; }
.ng-plano.perto { border-color: color-mix(in srgb, #f5a524 55%, var(--line)); }
.ng-plano.perto .ng-plano-barra i { background: #f5a524; }
.ng-plano-ic:has(.selo-pro) { width: auto; min-width: 40px; padding: 0 5px; box-sizing: border-box; }
.ng-plano-ic .selo-pro { font-size: 9.5px; padding: 0; letter-spacing: .03em; }
/* Recursos do Pro nas estatísticas (90 dias e Excel) */
.ni-pro { display: inline-flex; align-items: center; height: 15px; margin-left: 5px; padding: 0 4px; border-radius: 5px; font-size: 8.5px; font-weight: 900; letter-spacing: .06em; color: #fff; background: linear-gradient(135deg, #7c3aed, #2563eb); vertical-align: middle; }
.ni-periodo button.travado { opacity: .85; }
.ni-baixar.travado { background: linear-gradient(135deg, #7c3aed, #2563eb); }
.ni-baixar.travado .ni-pro { background: rgba(255,255,255,.22); }

/* ---------- Saúde no formulário: registro, especialidades e avisos ---------- */
.neg-registro { display: grid; gap: 8px; }
.neg-aviso-saude { margin: 2px 0 0; padding: 9px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; color: var(--muted); background: color-mix(in srgb, var(--c) 8%, transparent); border: 1px solid color-mix(in srgb, var(--c) 25%, var(--line)); }
.neg-esp-outra { display: flex; gap: 8px; margin-top: 8px; }
.neg-esp-outra input { flex: 1; min-width: 0; }
.marca-op.linha { display: inline-flex; margin: 2px 0 8px; }
/* Comunidade: cartão especial em Meus negócios (abre a página da Comunidade) */
.ng-novo.comunidade .ng-novo-aviso, .neg-card.comunidade .ng-com-aviso { display: flex; gap: 8px; align-items: flex-start; margin-top: 4px; padding: 8px 10px; border-radius: 12px; font-size: 12px; line-height: 1.4; text-align: left;
  background: #ffe08a; border: 1px solid #f5b400; color: #3d2800; font-weight: 650; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .5); }
/* aviso "proibido vender": amarelo de atenção, igual nos dois temas (no tema claro a letra branca/escura sumia) */
.ng-novo.comunidade .ng-novo-aviso svg, .neg-card.comunidade .ng-com-aviso svg { flex: none; color: #b45309; stroke-width: 2.5; }
a.ng-novo, a.ng-novo * { text-decoration: none; }

/* Sem plano: só um perfil no ar, os outros pausados */
.ng-status.pausa i { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .25); }
.neg-aviso.pausa { background: color-mix(in srgb, #f59e0b 10%, transparent); border-color: color-mix(in srgb, #f59e0b 35%, transparent); }
.neg-aviso.pausa strong { color: #f59e0b; }
.neg-aviso.pausa span { color: var(--muted); }
.neg-aviso-bts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
/* Comunidade no seletor de tipo: atalho (não é perfil de negócio) */
a.ng-tipo { color: inherit; text-decoration: none; cursor: pointer; }
a.ng-tipo.comunidade { border-style: dashed; }
a.ng-tipo:hover { border-color: color-mix(in srgb, var(--c) 60%, var(--line)); }

/* Perfil grátis: o que é do Plus (fica guardado e não aparece para os clientes) */
.ng-plus-nota { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 10px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; color: var(--muted);
  background: color-mix(in srgb, #0ea5e9 9%, transparent); border: 1px dashed color-mix(in srgb, #0ea5e9 45%, var(--line)); }
.ng-plus-nota > svg { flex: none; color: #0ea5e9; }
.ng-plus-nota > span { flex: 1; min-width: 0; }
.ng-plus-bt { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.ng-plus-bt b, .ng-so-plus { font-size: 9.5px; font-weight: 900; letter-spacing: .06em; padding: 2px 5px; border-radius: 5px; background: rgba(255, 255, 255, .25); }
.ng-so-plus { display: inline-block; color: #fff; background: linear-gradient(135deg, #3b82f6, #1d4ed8); align-self: flex-start; }
.neg-item.so-plano, .neg-foto.so-plano { opacity: .6; }
.neg-foto.so-plano .ng-so-plus { position: absolute; left: 6px; bottom: 6px; }
.ng-est.travado { position: relative; }
.ng-est.travado .ng-est-vazio { flex: 1; }
.ng-verif { display: grid; gap: 6px; margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; font-size: 13px; line-height: 1.45;
  background: color-mix(in srgb, #0ea5e9 10%, transparent); border: 1px solid color-mix(in srgb, #0ea5e9 40%, transparent); }
.ng-verif strong { color: #0ea5e9; font-size: 14px; }
.ng-verif .btn { justify-self: start; }
.neg-item.so-plano { position: relative; }
.neg-item.so-plano > .ng-so-plus { position: absolute; top: -7px; right: 12px; z-index: 1; }
/* Capa no cartão do perfil grátis: o dono vê a capa, mas os clientes só com plano */
.ng-capa-plus { position: absolute; right: 12px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ng-capa-plus b { font-size: 9.5px; font-weight: 900; letter-spacing: .06em; padding: 2px 5px; border-radius: 5px; background: linear-gradient(135deg, #3b82f6, #1d4ed8); }

/* Link curto e QR Code do perfil */
.lq-caixa { display: grid; gap: 12px; justify-items: center; text-align: center; }
.lq-link { width: 100%; display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.lq-link small { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lq-link strong { font-size: 16px; color: var(--accent); overflow-wrap: anywhere; }
.lq-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lq-qr { width: min(240px, 70vw); aspect-ratio: 1; padding: 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .5); }
.lq-qr canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.lq-dica { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; max-width: 36ch; }
.lq-aviso { margin: 0; font-size: 12.5px; color: #f59e0b; }

/* avaliações boas novas desde a última visita (saíram do sino) */
.ng-novas { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 999px; background: #16a34a; color: #fff; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; }