/*
Theme Name: Nação Virtual
Theme URI: https://nacaovirtual.com.br
Author: Nação Virtual
Author URI: https://nacaovirtual.com.br
Description: Tema WordPress da Nação Virtual — consultoria de E-commerce, automações Google Sheets via API (Bling, Tiny, Mercado Livre, Shopee) e dashboards em Power BI. Visual sofisticado azul-marinho com destaques laranja.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nacao-virtual
Tags: ecommerce, consultoria, power-bi, automacao, business, corporate, modern, responsive, custom-colors, custom-menu, dark
*/

/* =========================================================
   1. RESET & BASE
========================================================= */
:root {
    /* Paleta Nação Virtual — azul-marinho profundo + laranja vibrante */
    --color-primary: #e37220;        /* laranja Nação Virtual — cor de destaque/CTA */
    --color-primary-dark: #b85a18;   /* laranja escuro (hover) */
    --color-primary-light: #f5a05c;  /* laranja claro */
    --color-accent: #e37220;         /* alias do primary para retro-compat */
    --color-accent-dark: #b85a18;
    --color-whatsapp: #25d366;

    /* Azul-marinho como secundária / institucional (logo da Nação Virtual) */
    --color-brand-navy: #1e3a5f;     /* azul-marinho da logo */
    --color-brand-navy-light: #2d5a8e;

    /* Tons de fundo — azul-marinho da logo institucional */
    --color-dark: #0d1b2a;           /* azul-marinho profundo (logo) */
    --color-dark-soft: #1b2a3f;      /* azul-marinho médio */
    --color-dark-card: #233653;      /* azul para cards no dark */
    --color-light: #f5f7fa;          /* fundo claro neutro */
    --color-white: #ffffff;

    /* Textos */
    --color-ink: #0d1b2a;
    --color-ink-soft: #2c3e57;
    --color-muted: #6c7a8e;
    --color-line: #e3e8ef;
    --color-line-dark: rgba(255, 255, 255, 0.08);

    /* Tipografia — Roboto (família única, profissional e legível) */
    --font-display: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Roboto Mono', 'Menlo', 'Courier New', monospace;

    /* Espaçamento e radius */
    --container: 1280px;
    --container-narrow: 920px;
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --shadow-sm: 0 2px 8px rgba(10, 20, 40, 0.06);
    --shadow-md: 0 10px 40px rgba(10, 20, 40, 0.08);
    --shadow-lg: 0 20px 60px rgba(10, 20, 40, 0.12);

    --transition: 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-ink);
    background: var(--color-light);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--color-primary-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-ink);
    margin: 0 0 0.6em;
}

h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}
h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
}
h3 {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    font-weight: 700;
}
h4 {
    font-size: 1.1rem;
    font-weight: 700;
}

p { margin: 0 0 1.2em; }

/* =========================================================
   2. LAYOUT
========================================================= */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding: clamp(48px, 7vw, 88px) 0;
}

.section--dark {
    background: var(--color-dark);
    color: var(--color-light);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
    color: var(--color-white);
}

.section--light {
    background: var(--color-light);
}

.section--white {
    background: var(--color-white);
}

/* =========================================================
   3. HEADER & NAV (estilo China Link - dark fixo)
========================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-dark);
    border-bottom: 1px solid var(--color-line-dark);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    gap: 32px;
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-logo {
    width: 38px;
    height: 38px;
    background: var(--color-primary);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.site-logo::after {
    content: "";
    position: absolute;
    inset: 9px;
    background: var(--color-accent);
    border-radius: 50%;
    transform: translate(7px, 7px);
}

/* Logo Nação Virtual (default no header) */
.site-logo-link {
    display: inline-flex;
    align-items: center;
}

.site-logo-default {
    height: 52px;
    width: auto;
    display: block;
    transition: opacity var(--transition);
}

.site-logo-link:hover .site-logo-default {
    opacity: 0.85;
}

/* Logo do header quando user faz upload via Customizer */
.custom-logo {
    height: 52px !important;
    width: auto !important;
    max-height: 60px;
}

.site-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--color-white);
}

.site-title a { color: inherit; }

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 36px;
}

.main-nav a {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-white);
    position: relative;
    padding: 8px 0;
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width var(--transition);
}

.main-nav a:hover,
.main-nav .current-menu-item a {
    color: var(--color-primary-light);
}

.main-nav a:hover::after,
.main-nav .current-menu-item a::after {
    width: 100%;
}

/* Elementos clonados via JS no drawer mobile — escondidos no desktop */
.nv-mobile-cta,
.nv-mobile-drawer-foot {
    display: none;
}

.header-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-whatsapp);
    color: var(--color-white) !important;
    padding: 14px 24px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: var(--transition);
}

.header-cta:hover {
    background: #1eb955;
    color: var(--color-white) !important;
    transform: translateY(-1px);
}

.header-cta::after { display: none !important; }

.menu-toggle {
    display: none;
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    cursor: pointer;
    padding: 0;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-white);
    margin: 6px auto;
    transition: var(--transition);
}

/* =========================================================
   4. HERO (estilo China Link - dark com grid de imagens)
========================================================= */
.hero {
    background: var(--color-dark);
    color: var(--color-white);
    padding: clamp(50px, 8vw, 90px) 0;
    position: relative;
    overflow: hidden;
}

/* Hero temático: Background com rede de dados (estilo dashboard / e-commerce) */
.hero--comex {
    background: var(--color-dark);
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Camada 1: Imagem de fundo (customizável via Customizer) */
.hero__bg-image {
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Camada 2: Overlay escuro (intensidade configurável via Customizer) */
.hero__bg-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(10, 20, 40, calc(var(--hero-bg-overlay, 0.75) * 1.05)) 0%,
            rgba(10, 20, 40, calc(var(--hero-bg-overlay, 0.75) * 0.85)) 40%,
            rgba(10, 20, 40, calc(var(--hero-bg-overlay, 0.75) * 0.7)) 70%,
            rgba(10, 20, 40, calc(var(--hero-bg-overlay, 0.75) * 0.95)) 100%
        );
}

/* Camada 3: Glow lateral para reforçar profundidade */
.hero__bg-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 30%, rgba(227, 114, 32, 0.18) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(227, 114, 32, 0.12) 0%, transparent 45%);
}

.hero--comex::before {
    display: none;
}

.hero::before {
    content: "";
    position: absolute;
    top: -150px;
    right: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(227, 114, 32, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.hero__inner {
    position: relative;
    z-index: 1;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(227, 114, 32, 0.12);
    border: 1px solid rgba(227, 114, 32, 0.3);
    color: var(--color-primary-light);
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 32px;
}

.hero__title {
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 28px;
    color: var(--color-white);
    letter-spacing: -0.01em;
}

.hero__title em {
    font-style: normal;
    color: var(--color-accent);
}

.hero__lead {
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    color: rgba(255, 255, 255, 0.75);
    max-width: 580px;
    margin-bottom: 44px;
    line-height: 1.7;
}

.hero__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* =========================================================
   5. BUTTONS (estilo pill - China Link)
========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn--primary:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(227, 114, 32, 0.35);
}

.btn--accent {
    background: var(--color-accent);
    color: var(--color-white);
}

.btn--accent:hover {
    background: var(--color-accent-dark);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(227, 114, 32, 0.35);
}

.btn--ghost {
    background: transparent;
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn--ghost:hover {
    border-color: var(--color-white);
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.05);
}

.btn--ghost-dark {
    background: transparent;
    color: var(--color-ink);
    border-color: var(--color-line);
}

.btn--ghost-dark:hover {
    border-color: var(--color-ink);
    color: var(--color-ink);
}

.btn__arrow {
    display: inline-block;
    transition: transform var(--transition);
}

.btn:hover .btn__arrow {
    transform: translateX(4px);
}

/* =========================================================
   6. STATS (dark)
========================================================= */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    padding: 60px 40px;
    background: var(--color-dark-soft);
    border-radius: var(--radius-lg);
    margin-top: 40px;
}

.stat {
    text-align: center;
}

.stat__number {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary-light);
    margin-bottom: 10px;
}

.stat__label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

/* =========================================================
   7. SECTION HEADERS
========================================================= */
.section__header {
    text-align: center;
    margin-bottom: 44px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.section__eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    margin-bottom: 14px;
}

.section__title {
    text-transform: uppercase;
    color: var(--color-ink);
    text-wrap: balance;
}

/* Também aplicar nos demais títulos importantes */
.hero__title,
.brands-title,
.cta-banner h2,
.page-header__title {
    text-wrap: balance;
}

.section--dark .section__title {
    color: var(--color-white);
}

.section__subtitle {
    font-size: 1.05rem;
    color: var(--color-muted);
    max-width: 600px;
    margin: 0 auto;
}

.section--dark .section__subtitle {
    color: rgba(255, 255, 255, 0.7);
}

/* =========================================================
   8. SERVICES CARDS (estilo China Link - cards arredondados)
========================================================= */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 28px;
}

.service-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
    border: 1px solid var(--color-line);
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.service-card__icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--color-white);
    font-weight: 800;
    font-size: 1.2rem;
}

.service-card__title {
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: var(--color-ink);
}

.service-card__desc {
    color: var(--color-muted);
    margin-bottom: 24px;
    font-size: 0.94rem;
    line-height: 1.65;
}

.service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.service-card__link:hover {
    color: var(--color-primary-dark);
}

/* =========================================================
   9. PORTFOLIO
========================================================= */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

.portfolio-item {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    display: block;
    border: 1px solid var(--color-line);
}

.portfolio-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.portfolio-item__image {
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--color-brand-navy) 0%, var(--color-primary) 100%);
    position: relative;
    overflow: hidden;
}

.portfolio-item__body {
    padding: 28px 28px 32px;
}

.portfolio-item__category {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: 10px;
    display: block;
}

.portfolio-item__title {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--color-ink);
}

.portfolio-item__desc {
    font-size: 0.92rem;
    color: var(--color-muted);
    margin: 0;
}

/* =========================================================
   10. CTA BANNER (dark)
========================================================= */
.cta-banner {
    background: var(--color-dark);
    color: var(--color-white);
    padding: clamp(50px, 7vw, 80px) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-banner::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(227, 114, 32, 0.18) 0%, transparent 60%);
    pointer-events: none;
}

.cta-banner__content {
    position: relative;
    z-index: 1;
}

.cta-banner h2 {
    color: var(--color-white);
    margin-bottom: 20px;
    text-transform: uppercase;
}

.cta-banner p {
    color: rgba(255, 255, 255, 0.75);
    max-width: 560px;
    margin: 0 auto 36px;
    font-size: 1.05rem;
}

/* =========================================================
   11. BRANDS / LOGOS
========================================================= */
.brands-section {
    background: var(--color-dark);
    color: var(--color-white);
    padding: clamp(48px, 6vw, 64px) 0;
    text-align: center;
}

.brands-title {
    color: var(--color-white);
    text-transform: uppercase;
    margin-bottom: 36px;
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
}

.brands-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(32px, 5vw, 64px);
}

.brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    transition: var(--transition);
}

.brand-logo:hover {
    color: var(--color-white);
}

/* Quando é uma imagem (logo do cliente) */
.brand-logo img {
    max-height: 56px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.55;
    transition: var(--transition);
}

.brand-logo img:hover {
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(245, 160, 92, 0.4));
}

@media (max-width: 600px) {
    .brand-logo {
        height: 44px;
    }
    .brand-logo img {
        max-height: 44px;
        max-width: 120px;
    }
}

/* =========================================================
   12. FOOTER (dark)
========================================================= */
.site-footer {
    background: var(--color-dark);
    color: var(--color-white);
    padding: 80px 0 32px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 48px;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--color-line-dark);
}

.footer-col h4 {
    color: var(--color-white);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
    font-weight: 700;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col li {
    margin-bottom: 12px;
}

.footer-col a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
    transition: color var(--transition);
}

.footer-col a:hover {
    color: var(--color-primary-light);
}

.footer-brand .footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.footer-logo__link {
    display: inline-block;
    line-height: 0;
}

.footer-logo__img {
    max-height: 56px;
    width: auto;
    height: auto;
    display: block;
}

.footer-logo__text {
    font-size: 1.2rem;
    color: var(--color-white);
    font-weight: 700;
}

.footer-brand p,
.footer-brand__desc {
    color: rgba(255, 255, 255, 0.65);
    max-width: 340px;
    font-size: 0.92rem;
    line-height: 1.7;
}

/* Bloco legal: razão social, CNPJ e endereço completo (estilo China Link) */
.footer-legal {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.88rem;
    line-height: 1.65;
    max-width: 340px;
}

.footer-legal p {
    margin: 0 0 10px;
    color: inherit;
    max-width: none;
}

.footer-legal__name {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 0.95rem;
    margin-bottom: 6px !important;
}

.footer-legal__cnpj {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55) !important;
    letter-spacing: 0.02em;
    margin-bottom: 12px !important;
}

.footer-legal__address {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.7) !important;
}

.footer-bottom {
    padding-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.5);
    flex-wrap: wrap;
    gap: 16px;
}

.footer-bottom__tagline {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

/* Crédito do desenvolvedor (Nação Virtual) */
.footer-credit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: var(--transition);
    font-size: 0.78rem;
}

.footer-credit:hover {
    color: rgba(255, 255, 255, 0.85);
}

.footer-credit__label {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
}

.footer-credit__logo {
    height: 22px;
    width: auto;
    display: block;
    opacity: 0.55;
    transition: opacity var(--transition);
}

.footer-credit:hover .footer-credit__logo {
    opacity: 1;
}

/* =========================================================
   13. PAGE CONTENT
========================================================= */
.page-header {
    background: var(--color-dark);
    color: var(--color-white);
    padding: clamp(70px, 10vw, 120px) 0 clamp(50px, 7vw, 80px);
    text-align: center;
}

.page-header__eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary-light);
    margin-bottom: 16px;
}

.page-header h1 {
    color: var(--color-white);
    text-transform: uppercase;
    margin: 0;
}

.page-content {
    padding: 80px 0;
    font-size: 1.02rem;
    background: var(--color-light);
}

.page-content > .container > p,
.page-content > .container--narrow > p {
    max-width: 720px;
}

.page-content h2 {
    margin-top: 1.8em;
    text-transform: uppercase;
}

/* =========================================================
   14. PÁGINA DE CONTATO (moderna)
========================================================= */

/* HERO DA PÁGINA DE CONTATO */
.contact-hero {
    background: var(--color-dark);
    color: var(--color-white);
    padding: clamp(60px, 9vw, 100px) 0 clamp(40px, 6vw, 70px);
    position: relative;
    overflow: hidden;
}

.contact-hero__pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 20%, rgba(227, 114, 32, 0.18) 0%, transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(227, 114, 32, 0.12) 0%, transparent 45%),
        linear-gradient(135deg, transparent 49.5%, rgba(255, 255, 255, 0.03) 50%, transparent 50.5%) 0 0 / 60px 60px;
}

.contact-hero__content {
    position: relative;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.contact-hero__title {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 24px 0 20px;
    color: var(--color-white);
    text-wrap: balance;
}

.contact-hero__title em {
    font-style: normal;
    color: var(--color-accent);
}

.contact-hero__lead {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: 1.7;
}

.contact-hero__lead strong {
    color: var(--color-primary-light);
}

/* CARDS DE CANAIS */
.contact-channels {
    background: var(--color-light);
    padding: 0;
    position: relative;
}

.contact-channels .container {
    transform: translateY(-50%);
    margin-bottom: -50px;
}

.contact-channels__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.contact-channel {
    background: var(--color-white);
    padding: 28px 24px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    transition: var(--transition);
    border: 1px solid var(--color-line);
}

.contact-channel:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channel__icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    flex-shrink: 0;
    transition: var(--transition);
}

.contact-channel--whatsapp .contact-channel__icon {
    background: linear-gradient(135deg, var(--color-whatsapp), #128c7e);
}

.contact-channel__body {
    min-width: 0;
    flex: 1;
}

.contact-channel__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    margin-bottom: 4px;
}

.contact-channel__value {
    display: block;
    font-size: 0.94rem;
    color: var(--color-ink);
    font-weight: 700;
    word-break: break-word;
    line-height: 1.3;
}

/* SEÇÃO PRINCIPAL: INFO + FORM */
.contact-main {
    background: var(--color-light);
    padding: 80px 0 clamp(60px, 9vw, 100px);
}

.contact-main__grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 60px;
    align-items: start;
}

.contact-main__info {
    padding-top: 12px;
}

.contact-main__heading {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    text-transform: uppercase;
    margin: 16px 0 24px;
    color: var(--color-ink);
    text-wrap: balance;
}

.contact-main__heading em {
    font-style: normal;
    color: var(--color-accent);
}

.contact-main__desc {
    color: var(--color-ink-soft);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 32px;
}

.contact-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 36px;
}

.contact-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--color-ink);
    font-size: 0.95rem;
}

.contact-feature__check {
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    flex-shrink: 0;
}

.contact-hours {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--color-white);
    border-radius: var(--radius);
    border: 1px solid var(--color-line);
    border-left: 4px solid var(--color-primary);
}

.contact-hours__icon {
    width: 44px;
    height: 44px;
    background: rgba(227, 114, 32, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.contact-hours strong {
    display: block;
    color: var(--color-ink);
    margin-bottom: 2px;
    font-size: 0.95rem;
}

.contact-hours p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.88rem;
}

/* CARD DO FORMULÁRIO */
.contact-form-card {
    background: var(--color-white);
    padding: clamp(28px, 4vw, 44px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-line);
}

.nexum-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-field {
    display: flex;
    flex-direction: column;
}

.form-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-ink);
    letter-spacing: 0.02em;
}

.form-field .required {
    color: var(--color-accent);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea,
.form-field select {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 0.96rem;
    color: var(--color-ink);
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: #f9fafc;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #a8b2c4;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-white);
    box-shadow: 0 0 0 4px rgba(227, 114, 32, 0.1);
}

.form-field textarea {
    min-height: 140px;
    resize: vertical;
    font-family: var(--font-body);
}

.form-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7a90' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
    cursor: pointer;
}

/* Checkbox LGPD */
.form-field--checkbox {
    margin-top: 4px;
}

.form-field--checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-ink-soft);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
}

.form-field--checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

.form-field--checkbox a {
    color: var(--color-primary);
    font-weight: 600;
}

.btn--block {
    width: 100%;
    margin-top: 8px;
    padding-top: 18px;
    padding-bottom: 18px;
    font-size: 1rem;
}

.form-admin-notice {
    margin-top: 20px;
    padding: 14px 16px;
    background: rgba(227, 114, 32, 0.08);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
    color: var(--color-ink-soft);
    font-size: 0.82rem;
    line-height: 1.5;
}

.form-admin-notice strong {
    color: var(--color-ink);
}

.form-admin-notice a {
    color: var(--color-accent);
    font-weight: 600;
}

/* MAPA */
.contact-map {
    background: var(--color-dark);
    padding: 0;
    line-height: 0;
}

.contact-map__embed {
    width: 100%;
    line-height: 0;
}

.contact-map__embed iframe {
    display: block;
    width: 100%;
    filter: grayscale(20%);
}

/* RESPONSIVO */
@media (max-width: 1100px) {
    .contact-channels__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 880px) {
    .contact-main__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .contact-channels .container {
        transform: translateY(-30px);
        margin-bottom: -30px;
    }
    .contact-channels__grid {
        grid-template-columns: 1fr;
    }
    .contact-channel {
        padding: 20px;
    }
}

/* =========================================================
   15. POST CARDS
========================================================= */
.post-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-line);
    transition: var(--transition);
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* =========================================================
   16. RESPONSIVE
========================================================= */
@media (max-width: 960px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    /* ============= HEADER MOBILE — Logo centralizada + hambúrguer ============= */

    /* Layout 3 colunas: hambúrguer (esquerda) | logo (centro) | espaço (direita) */
    .site-header__inner {
        display: grid !important;
        grid-template-columns: 44px 1fr 44px;
        align-items: center;
        gap: 12px;
        padding: 14px 0;
    }

    /* Branding vai pro centro */
    .site-branding {
        grid-column: 2;
        justify-content: center !important;
        display: flex;
    }
    .site-branding img,
    .site-branding .site-logo-default,
    .site-branding .custom-logo-link img {
        max-height: 38px !important;
        width: auto !important;
        height: auto !important;
    }

    /* Hambúrguer fica visível à esquerda — fixo sobre o drawer */
    .menu-toggle {
        display: block;
        grid-column: 1;
        grid-row: 1;
        position: relative;
        width: 36px;
        height: 36px;
        background: transparent;
        border: 0;
        cursor: pointer;
        padding: 0;
        z-index: 102; /* acima do drawer */
    }
    .menu-toggle span {
        position: absolute;
        left: 6px;
        right: 6px;
        height: 2px;
        background: white;
        border-radius: 2px;
        transition: all 0.25s;
    }
    .menu-toggle span:nth-child(1) { top: 11px; }
    .menu-toggle span:nth-child(2) { top: 17px; }
    .menu-toggle span:nth-child(3) { top: 23px; }
    /* Quando menu aberto, hambúrguer vira X */
    .menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    .menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* ESCONDE header-actions inteiro no mobile com selector mais específico (vence o rule duplicado em outra seção) */
    header.site-header .header-actions,
    .site-header .header-actions {
        display: none !important;
    }
    /* Também esconde o CTA verde do contato e qualquer botão de header solto */
    header.site-header .header-cta,
    .site-header .header-cta,
    .site-header .header-login-link {
        display: none !important;
    }

    /* Topbar: esconde info, mantém só o seletor de idioma */
    .topbar-info {
        display: none;
    }
    .site-topbar__inner {
        justify-content: center;
    }
    .site-topbar {
        padding: 6px 0;
    }

    /* ============= MENU DRAWER MOBILE ============= */
    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-dark);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 100;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: 72px; /* libera espaço pra o X fixo no topo */
        padding-bottom: 32px;
    }
    .main-nav.is-open {
        transform: translateX(0);
    }

    /* Backdrop quando menu aberto */
    body.has-menu-open {
        overflow: hidden;
    }

    /* CTA destacado no topo do drawer (criado via JS) */
    .nv-mobile-cta {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 0 24px 20px;
        padding: 14px 18px;
        background: var(--color-primary, #e37220);
        color: white !important;
        font-weight: 700;
        border-radius: 10px;
        text-align: center;
        text-decoration: none;
        font-size: 0.96rem;
        box-shadow: 0 4px 12px rgba(227, 114, 32, 0.3);
        transition: all 0.15s;
    }
    .nv-mobile-cta:hover,
    .nv-mobile-cta:active {
        background: #c95e10;
    }
    .nv-mobile-cta svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
    .nv-mobile-cta--admin {
        background: linear-gradient(135deg, #0d1b2a, #1e3a5f);
    }

    /* Links do menu */
    .main-nav ul {
        flex-direction: column;
        padding: 0 24px;
        gap: 0;
        list-style: none;
        margin: 0;
    }
    .main-nav li {
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .main-nav li:last-child {
        border-bottom: 0;
    }
    .main-nav a {
        padding: 16px 0;
        display: block;
        color: white;
        font-size: 1rem;
        font-weight: 500;
        text-decoration: none;
        transition: color 0.15s;
    }
    .main-nav a::after {
        display: none;
    }
    .main-nav a:hover,
    .main-nav .current-menu-item a {
        color: var(--color-primary, #e37220);
    }

    /* Rodapé do drawer (contato + redes) — colado depois do menu sem espaço enorme */
    .nv-mobile-drawer-foot {
        display: block;
        margin: 20px 24px 0;
        padding-top: 16px;
        border-top: 1px solid rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.6);
        font-size: 0.88rem;
        text-align: center;
    }
    .nv-mobile-drawer-foot a {
        color: rgba(255,255,255,0.8);
        text-decoration: none;
        font-weight: 500;
        display: inline-block;
        padding: 8px 16px;
    }
    .nv-mobile-drawer-foot a:active {
        color: var(--color-primary);
    }
    .nv-mobile-drawer-foot p { margin: 4px 0; }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__actions .btn {
        width: 100%;
    }
}

/* =========================================================
   17. WP CORE
========================================================= */
.alignleft { float: left; margin-right: 1.5em; }
.alignright { float: right; margin-left: 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide { max-width: 1080px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); }
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute !important;
    word-wrap: normal !important;
}
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--color-muted); text-align: center; }

/* =========================================================
   18. WHATSAPP FLOAT
========================================================= */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background: var(--color-whatsapp);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
    z-index: 99;
    transition: var(--transition);
}

.whatsapp-float:hover {
    transform: scale(1.08);
    color: var(--color-white);
}

.whatsapp-float svg {
    width: 32px;
    height: 32px;
}

/* =========================================================
   19. TOPBAR (idiomas + info)
========================================================= */
.site-topbar {
    background: #060d1d;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    border-bottom: 1px solid var(--color-line-dark);
}

.site-topbar__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    gap: 24px;
    min-height: 40px;
}

.topbar-info {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.topbar-info span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.topbar-info svg {
    width: 14px;
    height: 14px;
    color: var(--color-primary-light);
}

/* Seletor de idiomas */
.lang-switcher {
    position: relative;
    display: inline-block;
}

.lang-switcher__toggle {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-white);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.lang-switcher__toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-primary);
}

.lang-flag {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    background: #ccc;
    flex-shrink: 0;
}

.lang-switcher__chevron {
    transition: transform var(--transition);
    width: 10px;
    height: 10px;
}

.lang-switcher.is-open .lang-switcher__chevron {
    transform: rotate(180deg);
}

.lang-switcher__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--color-white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: var(--transition);
    z-index: 200;
    list-style: none;
    margin: 0;
}

.lang-switcher.is-open .lang-switcher__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-switcher__menu li {
    margin: 0;
}

.lang-switcher__menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--color-ink);
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}

.lang-switcher__menu a:hover,
.lang-switcher__menu a.is-active {
    background: var(--color-light);
    color: var(--color-primary-dark);
}

/* Bandeirinhas com gradiente (sem imagem externa) */
.flag-br { background: linear-gradient(135deg, #009c3b 0%, #009c3b 40%, #ffdf00 40%, #ffdf00 60%, #002776 60%); }
.flag-en { background: linear-gradient(180deg, #012169 0%, #012169 33%, #ffffff 33%, #ffffff 66%, #c8102e 66%); }
.flag-es { background: linear-gradient(180deg, #aa151b 0%, #aa151b 30%, #f1bf00 30%, #f1bf00 70%, #aa151b 70%); }
.flag-zh { background: #de2910; position: relative; }
.flag-zh::after { content: "★"; color: #ffde00; font-size: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 1; }

/* =========================================================
   20. CAROUSEL (Carrossel de Serviços)
========================================================= */
.carousel {
    position: relative;
    overflow: hidden;
    padding: 12px 4px 24px; /* respiro para sombras dos cards */
}

.carousel__track {
    display: flex;
    gap: 28px;
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.carousel__slide {
    flex: 0 0 calc((100% - 56px) / 3); /* 3 cards visíveis no desktop */
    min-width: 0;
}

.carousel__slide .service-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.carousel__slide .service-card__desc {
    flex: 1;
}

.carousel__controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
}

.carousel__btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--color-white);
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.carousel__btn:hover:not(:disabled) {
    background: var(--color-primary);
    color: var(--color-white);
    transform: scale(1.08);
}

.carousel__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.carousel__btn svg {
    width: 20px;
    height: 20px;
}

.carousel__dots {
    display: flex;
    gap: 8px;
    margin: 0 12px;
}

.carousel__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: var(--color-line);
    cursor: pointer;
    padding: 0;
    transition: var(--transition);
}

.carousel__dot.is-active {
    background: var(--color-primary);
    width: 28px;
    border-radius: 5px;
}

@media (max-width: 960px) {
    .carousel__slide { flex: 0 0 calc((100% - 28px) / 2); } /* 2 no tablet */
}

@media (max-width: 640px) {
    .carousel__slide { flex: 0 0 100%; } /* 1 no mobile */
    .carousel__track { gap: 16px; }
}

/* =========================================================
   21. MAPA-MÚNDI COMO FUNDO DO FOOTER
========================================================= */
.site-footer {
    position: relative;
    overflow: hidden;
}

.site-footer__map-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.18;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-footer__map-bg svg {
    width: 100%;
    height: 100%;
    max-width: 1400px;
    object-fit: contain;
}

.site-footer__map-bg .world-map__dot {
    fill: var(--color-brand-navy-light);
    opacity: 0.7;
}

.site-footer__map-bg .world-map__dot--highlight {
    fill: var(--color-primary);
    opacity: 1;
}

.site-footer__map-bg .world-line {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 1.5;
    stroke-dasharray: 5 5;
    opacity: 0.5;
    animation: dash-move 2s linear infinite;
}

@keyframes dash-move {
    to { stroke-dashoffset: -20; }
}

.site-footer .container {
    position: relative;
    z-index: 1;
}

/* Pings no fundo do footer (sutis) */
.footer-ping {
    position: absolute;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.footer-ping::before,
.footer-ping::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--color-accent);
}

.footer-ping::after {
    animation: ping-wave 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
    opacity: 0.5;
}

.footer-ping--primary::before,
.footer-ping--primary::after {
    background: var(--color-brand-navy-light);
}

@keyframes ping-wave {
    0% { transform: scale(1); opacity: 0.5; }
    80%, 100% { transform: scale(3); opacity: 0; }
}

/* =========================================================
   22. SEÇÃO DE VÍDEOS YOUTUBE (Estilo Netflix)
========================================================= */
.video-section {
    background: var(--color-dark);
    color: var(--color-white);
    padding: clamp(48px, 7vw, 88px) 0;
    position: relative;
    overflow: hidden;
}

.video-section .section__title {
    color: var(--color-white);
}

.video-section .section__subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.video-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-pill);
    padding: 6px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.video-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.video-tab.is-active {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(227, 114, 32, 0.35);
}

.video-tab:hover:not(.is-active) {
    color: var(--color-white);
}

.video-row {
    position: relative;
    display: none;
}

.video-row.is-active {
    display: block;
}

.video-row__scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 16px 4px 24px;
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;
}

.video-row__scroll::-webkit-scrollbar {
    height: 8px;
}

.video-row__scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
}

.video-row__scroll::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 4px;
}

.video-card {
    flex: 0 0 320px;
    background: var(--color-dark-soft);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    scroll-snap-align: start;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.video-card--vertical {
    flex: 0 0 220px;
}

.video-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border-color: var(--color-primary);
}

.video-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark) 100%);
    overflow: hidden;
}

.video-card--vertical .video-card__thumb {
    aspect-ratio: 9 / 16;
}

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

.video-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 20, 40, 0.3);
    transition: background var(--transition);
}

.video-card:hover .video-card__play {
    background: rgba(10, 20, 40, 0.5);
}

.video-card__play-icon {
    width: 56px;
    height: 56px;
    background: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    transition: var(--transition);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.video-card:hover .video-card__play-icon {
    background: var(--color-primary);
    color: var(--color-white);
    transform: scale(1.1);
}

.video-card__play-icon svg {
    width: 20px;
    height: 20px;
    margin-left: 3px;
}

.video-card__body {
    padding: 18px 20px 22px;
}

.video-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 6px;
    line-height: 1.3;
}

.video-card__meta {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}

/* =========================================================
   DEPOIMENTOS (estilo China Link — grid de cards com overlay)
========================================================= */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.testimonial-card {
    cursor: pointer;
    transition: var(--transition);
}

.testimonial-card:hover {
    transform: translateY(-6px);
}

.testimonial-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-dark-soft);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.testimonial-card:hover .testimonial-card__thumb {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.testimonial-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.testimonial-card:hover .testimonial-card__thumb img {
    transform: scale(1.05);
}

/* Overlay escuro permanente para legibilidade do texto */
.testimonial-card__thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(10, 20, 40, 0.85) 0%,
        rgba(10, 20, 40, 0.45) 35%,
        rgba(10, 20, 40, 0.2) 65%,
        rgba(10, 20, 40, 0.85) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Texto principal (canto superior esquerdo) */
.testimonial-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    padding: 22px 24px;
    z-index: 2;
    color: var(--color-white);
    pointer-events: none;
}

.testimonial-card__client {
    font-size: clamp(1.4rem, 2vw, 1.7rem);
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--color-white);
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.testimonial-card__person {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Watermark (canto inferior esquerdo) */
.testimonial-card__watermark {
    position: absolute;
    bottom: 16px;
    left: 24px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}

.testimonial-card__brand {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--color-primary-light);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding-right: 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.testimonial-card__campaign {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

/* Botão Play central */
.testimonial-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: var(--transition);
}

.testimonial-card__play-icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: var(--transition);
}

.testimonial-card:hover .testimonial-card__play-icon {
    background: var(--color-primary);
    color: var(--color-white);
    transform: scale(1.12);
}

.testimonial-card__play-icon svg {
    width: 24px;
    height: 24px;
    margin-left: 3px;
}

/* Caption abaixo do card (cargo + empresa) */
.testimonial-card__caption {
    padding: 14px 4px 0;
}

.testimonial-card__role {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    letter-spacing: 0.02em;
}

@media (max-width: 960px) {
    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .testimonial-card__overlay {
        padding: 18px 20px;
    }
    .testimonial-card__client {
        font-size: 1.3rem;
    }
}

/* Lightbox de vídeo */
.video-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    backdrop-filter: blur(8px);
}

.video-lightbox.is-open {
    display: flex;
    animation: fadeIn 300ms ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.video-lightbox__inner {
    position: relative;
    width: 100%;
    max-width: 960px;
    aspect-ratio: 16 / 9;
}

.video-lightbox__inner--vertical {
    max-width: 380px;
    aspect-ratio: 9 / 16;
}

.video-lightbox__inner iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--radius);
}

.video-lightbox__close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.video-lightbox__close:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

/* =========================================================
   23. GALERIA MASONRY DE PROJETOS
========================================================= */
.gallery-masonry {
    columns: 3;
    column-gap: 20px;
    margin-top: 40px;
}

.gallery-item {
    break-inside: avoid;
    margin-bottom: 20px;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    background: var(--color-dark-soft);
    display: block;
}

.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.gallery-item__image {
    width: 100%;
    display: block;
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-item:hover .gallery-item__image {
    transform: scale(1.05);
}

/* Alturas variadas para criar efeito masonry com gradient */
.gallery-item__placeholder {
    width: 100%;
    background: linear-gradient(135deg, var(--color-brand-navy) 0%, var(--color-primary) 100%);
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-item:nth-child(7n+1) .gallery-item__placeholder { aspect-ratio: 4 / 5; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark) 100%); }
.gallery-item:nth-child(7n+2) .gallery-item__placeholder { aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-brand-navy) 100%); }
.gallery-item:nth-child(7n+3) .gallery-item__placeholder { aspect-ratio: 1 / 1; background: linear-gradient(135deg, var(--color-dark-soft) 0%, var(--color-primary-light) 100%); }
.gallery-item:nth-child(7n+4) .gallery-item__placeholder { aspect-ratio: 4 / 6; background: linear-gradient(135deg, var(--color-brand-navy-light) 0%, var(--color-primary) 100%); }
.gallery-item:nth-child(7n+5) .gallery-item__placeholder { aspect-ratio: 3 / 2; background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-brand-navy) 100%); }
.gallery-item:nth-child(7n+6) .gallery-item__placeholder { aspect-ratio: 1 / 1; background: linear-gradient(135deg, var(--color-brand-navy) 0%, var(--color-primary-dark) 100%); }
.gallery-item:nth-child(7n+7) .gallery-item__placeholder { aspect-ratio: 4 / 5; background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary) 100%); }

.gallery-item:hover .gallery-item__placeholder {
    transform: scale(1.05);
}

.gallery-item__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(10, 20, 40, 0.85) 100%);
    display: flex;
    align-items: flex-end;
    padding: 20px;
    opacity: 0;
    transition: opacity var(--transition);
}

.gallery-item:hover .gallery-item__overlay {
    opacity: 1;
}

.gallery-item__caption {
    color: var(--color-white);
}

.gallery-item__category {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary-light);
    margin-bottom: 4px;
}

.gallery-item__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-white);
}

@media (max-width: 960px) {
    .gallery-masonry { columns: 2; }
}

@media (max-width: 600px) {
    .gallery-masonry { columns: 1; }
}

/* =========================================================
   24. SEÇÃO INSTAGRAM
========================================================= */
.instagram-section {
    background: var(--color-light);
    padding: clamp(48px, 7vw, 88px) 0;
}

.instagram-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 40px;
}

.instagram-header__title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.instagram-logo {
    width: 48px;
    height: 48px;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    flex-shrink: 0;
}

.instagram-logo svg {
    width: 26px;
    height: 26px;
}

.instagram-header h2 {
    margin: 0;
    text-transform: uppercase;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.instagram-header__handle {
    color: var(--color-muted);
    font-size: 0.95rem;
    margin: 4px 0 0;
}

/* Feed placeholder (fallback quando não há plugin) */
.instagram-feed-placeholder {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.instagram-post {
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, var(--color-brand-navy), var(--color-primary));
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
}

.instagram-post:nth-child(2n) { background: linear-gradient(135deg, var(--color-primary), var(--color-brand-navy)); }
.instagram-post:nth-child(3n) { background: linear-gradient(135deg, var(--color-dark-soft), var(--color-primary)); }
.instagram-post:nth-child(5n) { background: linear-gradient(135deg, var(--color-primary-light), var(--color-brand-navy)); }

.instagram-post:hover {
    transform: scale(1.03);
    z-index: 2;
}

.instagram-post__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 40, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--color-white);
    font-size: 0.85rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity var(--transition);
}

.instagram-post:hover .instagram-post__overlay {
    opacity: 1;
}

.instagram-post__stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.instagram-post__stat svg {
    width: 16px;
    height: 16px;
}

.instagram-placeholder-notice {
    margin-top: 24px;
    padding: 16px 20px;
    background: rgba(220, 39, 67, 0.08);
    border-left: 3px solid #dc2743;
    border-radius: var(--radius-sm);
    color: var(--color-ink-soft);
    font-size: 0.88rem;
}

.instagram-placeholder-notice strong {
    color: var(--color-ink);
}

.instagram-cta {
    text-align: center;
    margin-top: 40px;
}

@media (max-width: 960px) {
    .instagram-feed-placeholder { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
    .instagram-feed-placeholder { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   25. ANIMAÇÕES
========================================================= */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-up {
    animation: fadeUp 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fade-up:nth-child(2) { animation-delay: 80ms; }
.fade-up:nth-child(3) { animation-delay: 160ms; }
.fade-up:nth-child(4) { animation-delay: 240ms; }

/* =========================================================
   26. PÁGINA SOBRE (Quem Somos)
========================================================= */

/* ── HERO ── */
.sobre-hero {
    background: var(--color-dark);
    color: var(--color-white);
    padding: clamp(70px, 10vw, 120px) 0 clamp(40px, 6vw, 70px);
    position: relative;
    overflow: hidden;
}

.sobre-hero__pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 30%, rgba(227, 114, 32, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(227, 114, 32, 0.12) 0%, transparent 45%),
        linear-gradient(135deg, transparent 49.5%, rgba(255, 255, 255, 0.025) 50%, transparent 50.5%) 0 0 / 70px 70px;
}

.sobre-hero__content {
    position: relative;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}

.sobre-hero__title {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 24px 0 24px;
    color: var(--color-white);
    text-wrap: balance;
}

.sobre-hero__title em {
    font-style: normal;
    color: var(--color-accent);
}

.sobre-hero__lead {
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    margin: 0;
}

/* ── HISTÓRIA ── */
.sobre-historia {
    background: var(--color-light);
}

.sobre-historia__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
}

.sobre-historia__title {
    font-size: clamp(2rem, 3.5vw, 2.6rem);
    text-transform: uppercase;
    margin: 14px 0 28px;
    line-height: 1.15;
    text-wrap: balance;
}

.sobre-historia__text p {
    color: var(--color-ink-soft);
    font-size: 1.02rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.sobre-historia__media {
    position: relative;
}

.sobre-historia__image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: var(--shadow-lg);
    position: relative;
}

.sobre-historia__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sobre-historia__image--placeholder {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sobre-historia__image--placeholder svg {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    opacity: 0.6;
}

.sobre-historia__placeholder-note {
    position: relative;
    background: rgba(10, 20, 40, 0.85);
    padding: 14px 22px;
    border-radius: var(--radius);
    color: var(--color-white);
    backdrop-filter: blur(4px);
    text-align: center;
    max-width: 80%;
}

.sobre-historia__placeholder-note strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.sobre-historia__placeholder-note span {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
}

.sobre-historia__highlight {
    position: absolute;
    bottom: -28px;
    left: -28px;
    background: var(--color-white);
    padding: 18px 24px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 14px;
    border-left: 4px solid var(--color-accent);
    max-width: 240px;
}

.sobre-historia__highlight-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    flex-shrink: 0;
}

.sobre-historia__highlight strong {
    display: block;
    color: var(--color-ink);
    font-size: 1rem;
    line-height: 1.1;
    margin-bottom: 2px;
}

.sobre-historia__highlight span {
    color: var(--color-muted);
    font-size: 0.78rem;
}

@media (max-width: 880px) {
    .sobre-historia__grid { grid-template-columns: 1fr; gap: 50px; }
    .sobre-historia__highlight { position: static; max-width: 100%; margin-top: 20px; }
}

/* ── MISSÃO, VISÃO, VALORES ── */
.sobre-mvv {
    background: var(--color-white);
    padding: clamp(60px, 9vw, 100px) 0;
}

.sobre-mvv__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sobre-mvv__card {
    background: var(--color-light);
    padding: 36px 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-line);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.sobre-mvv__card:hover {
    transform: translateY(-6px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
}

.sobre-mvv__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    margin-bottom: 24px;
}

.sobre-mvv__icon--mission {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}
.sobre-mvv__icon--vision {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
}
.sobre-mvv__icon--values {
    background: linear-gradient(135deg, var(--color-dark-soft), var(--color-primary-dark));
}

.sobre-mvv__title {
    font-size: 1.3rem;
    text-transform: uppercase;
    margin-bottom: 14px;
    color: var(--color-ink);
}

.sobre-mvv__text {
    color: var(--color-ink-soft);
    line-height: 1.7;
    font-size: 0.96rem;
    margin: 0;
}

.sobre-mvv__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sobre-mvv__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--color-ink-soft);
    font-size: 0.94rem;
    line-height: 1.5;
    margin-bottom: 12px;
}

.sobre-mvv__check {
    width: 22px;
    height: 22px;
    background: var(--color-primary);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    flex-shrink: 0;
    margin-top: 1px;
}

@media (max-width: 960px) {
    .sobre-mvv__grid { grid-template-columns: 1fr; }
}

/* ── TIMELINE ── */
.sobre-timeline {
    background: var(--color-dark);
    color: var(--color-white);
    padding: clamp(60px, 9vw, 100px) 0;
    position: relative;
    overflow: hidden;
}

.sobre-timeline::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(227, 114, 32, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.sobre-timeline .section__title {
    color: var(--color-white);
}

.section__header--dark .section__title {
    color: var(--color-white);
}

.section__header--dark .section__subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.timeline {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    padding: 20px 0;
}

.timeline__line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--color-primary) 10%, var(--color-primary) 90%, transparent);
    transform: translateX(-50%);
}

.timeline__item {
    position: relative;
    width: 50%;
    padding: 22px 40px;
    box-sizing: border-box;
}

.timeline__item--left {
    left: 0;
    text-align: right;
}

.timeline__item--right {
    left: 50%;
    text-align: left;
}

.timeline__dot {
    position: absolute;
    top: 36px;
    width: 16px;
    height: 16px;
    background: var(--color-accent);
    border: 3px solid var(--color-dark);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 0 4px rgba(227, 114, 32, 0.25);
}

.timeline__item--left .timeline__dot {
    right: -8px;
}

.timeline__item--right .timeline__dot {
    left: -8px;
}

.timeline__card {
    background: var(--color-dark-soft);
    padding: 24px 28px;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: var(--transition);
}

.timeline__card:hover {
    border-color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.timeline__year {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--color-accent);
    background: rgba(227, 114, 32, 0.12);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.timeline__title {
    font-size: 1.2rem;
    color: var(--color-white);
    text-transform: uppercase;
    margin: 0 0 8px;
    line-height: 1.2;
}

.timeline__desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 760px) {
    .timeline__line { left: 14px; }
    .timeline__item, .timeline__item--left, .timeline__item--right {
        width: 100%;
        left: 0;
        padding: 14px 0 14px 40px;
        text-align: left;
    }
    .timeline__item--left .timeline__dot,
    .timeline__item--right .timeline__dot {
        left: 6px;
        right: auto;
    }
}

/* ── NÚMEROS ── */
.sobre-numeros {
    background: var(--color-light);
    padding: clamp(60px, 9vw, 100px) 0;
}

.sobre-numeros .section__title {
    color: var(--color-ink);
}

.sobre-numeros__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    text-align: center;
}

.sobre-numero {
    background: var(--color-white);
    padding: 40px 24px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-line);
    transition: var(--transition);
}

.sobre-numero:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.sobre-numero__valor {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.sobre-numero__label {
    font-size: 0.85rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* ── EQUIPE ── */
.sobre-equipe {
    background: var(--color-white);
}

.equipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 28px;
}

.membro-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-line);
    transition: var(--transition);
}

.membro-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.membro-card__photo {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-light);
}

.membro-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.membro-card:hover .membro-card__photo img {
    transform: scale(1.05);
}

.membro-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-line);
    background: linear-gradient(135deg, var(--color-light), #e8edf5);
}

.membro-card__linkedin {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    background: #0a66c2;
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    box-shadow: 0 4px 12px rgba(10, 102, 194, 0.3);
}

.membro-card__linkedin:hover {
    transform: scale(1.1);
    background: #094994;
}

.membro-card__body {
    padding: 22px 22px 26px;
}

.membro-card__name {
    font-size: 1.1rem;
    margin: 0 0 4px;
    color: var(--color-ink);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.membro-card__role {
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

.membro-card__bio {
    margin: 12px 0 0;
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* ── DIFERENCIAIS ── */
.sobre-diferenciais {
    background: var(--color-dark);
    color: var(--color-white);
    padding: clamp(60px, 9vw, 100px) 0;
    position: relative;
    overflow: hidden;
}

.sobre-diferenciais::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(227, 114, 32, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(227, 114, 32, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.sobre-diferenciais .container {
    position: relative;
}

.diferenciais-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.diferencial-card {
    background: var(--color-dark-soft);
    padding: 36px 32px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.diferencial-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-brand-navy), var(--color-primary));
    transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.diferencial-card:hover::before {
    width: 100%;
}

.diferencial-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-primary);
    background: linear-gradient(135deg, var(--color-dark-soft), #1c3050);
}

.diferencial-card__number {
    display: block;
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary-light);
    opacity: 0.4;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.diferencial-card__title {
    font-size: 1.2rem;
    color: var(--color-white);
    text-transform: uppercase;
    margin: 0 0 14px;
    line-height: 1.25;
}

.diferencial-card__desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 760px) {
    .diferenciais-grid { grid-template-columns: 1fr; }
}

/* ── CTA FINAL DA PÁGINA SOBRE ── */
.sobre-cta {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: clamp(60px, 8vw, 90px) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sobre-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.sobre-cta__content {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
}

.sobre-cta h2 {
    color: var(--color-white);
    text-transform: uppercase;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    margin-bottom: 20px;
    text-wrap: balance;
}

.sobre-cta p {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 36px;
}

.sobre-cta__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.sobre-cta .btn--ghost {
    border-color: rgba(255, 255, 255, 0.5);
}

.sobre-cta .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-white);
}

/* =========================================================
   27. PÁGINA SERVIÇOS
========================================================= */

/* ── HERO ── */
.servicos-hero {
    background: var(--color-dark);
    color: var(--color-white);
    padding: clamp(70px, 10vw, 120px) 0 clamp(50px, 7vw, 80px);
    position: relative;
    overflow: hidden;
}

.servicos-hero__pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 30%, rgba(227, 114, 32, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 85% 70%, rgba(227, 114, 32, 0.12) 0%, transparent 45%),
        linear-gradient(135deg, transparent 49.5%, rgba(255, 255, 255, 0.025) 50%, transparent 50.5%) 0 0 / 70px 70px;
}

.servicos-hero__content {
    position: relative;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}

.servicos-hero__title {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 24px 0 24px;
    color: var(--color-white);
    text-wrap: balance;
}

.servicos-hero__title em {
    font-style: normal;
    color: var(--color-accent);
}

.servicos-hero__lead {
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    margin: 0 0 36px;
}

.servicos-hero__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── GRID DE SERVIÇOS ── */
.servicos-grid-section {
    background: var(--color-light);
    padding: clamp(60px, 9vw, 100px) 0;
    scroll-margin-top: 80px;
}

.servicos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.servico-card {
    background: var(--color-white);
    padding: 36px 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-line);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.servico-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-brand-navy), var(--color-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.servico-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.servico-card:hover::before {
    transform: scaleX(1);
}

.servico-card__number {
    position: absolute;
    top: 24px;
    right: 28px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-line);
    letter-spacing: 0.05em;
    transition: color var(--transition);
}

.servico-card:hover .servico-card__number {
    color: var(--color-accent);
}

.servico-card__icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    margin-bottom: 24px;
}

.servico-card__icon svg {
    width: 28px;
    height: 28px;
}

.servico-card__icon img {
    max-width: 100%;
    max-height: 100%;
}

.servico-card__title {
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: 14px;
    color: var(--color-ink);
    letter-spacing: 0.01em;
}

.servico-card__desc {
    color: var(--color-ink-soft);
    line-height: 1.7;
    font-size: 0.94rem;
    margin: 0 0 24px;
    flex: 1;
}

.servico-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.servico-card__link span {
    transition: transform var(--transition);
}

.servico-card__link:hover span {
    transform: translateX(4px);
}

@media (max-width: 960px) {
    .servicos-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .servicos-grid { grid-template-columns: 1fr; }
}

/* ── PROCESSO DE TRABALHO ── */
.processo-section {
    background: var(--color-dark);
    color: var(--color-white);
    padding: clamp(60px, 9vw, 100px) 0;
    position: relative;
    overflow: hidden;
}

.processo-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(227, 114, 32, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.processo-section .container {
    position: relative;
}

.processo-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}

.processo-step {
    position: relative;
    padding-top: 20px;
}

.processo-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--color-accent);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-white);
    box-shadow: 0 0 0 6px rgba(227, 114, 32, 0.18);
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}

.processo-step__connector {
    position: absolute;
    top: 50px;
    left: 80px;
    right: -12px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
    z-index: 1;
}

.processo-step:last-child .processo-step__connector {
    display: none;
}

.processo-step__title {
    font-size: 1.1rem;
    text-transform: uppercase;
    margin: 0 0 12px;
    color: var(--color-white);
    letter-spacing: 0.02em;
}

.processo-step__desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 960px) {
    .processo-steps { grid-template-columns: 1fr 1fr; gap: 32px; }
    .processo-step__connector { display: none; }
}

@media (max-width: 600px) {
    .processo-steps { grid-template-columns: 1fr; }
}

/* ── SETORES ATENDIDOS ── */
.setores-section {
    background: var(--color-white);
    padding: clamp(60px, 9vw, 100px) 0;
}

.setores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
}

.setor-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    background: var(--color-light);
    border-radius: var(--radius);
    border: 1px solid var(--color-line);
    transition: var(--transition);
}

.setor-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-primary);
    background: var(--color-white);
    box-shadow: var(--shadow-md);
}

.setor-card__icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    flex-shrink: 0;
}

.setor-card__name {
    color: var(--color-ink);
    font-weight: 700;
    font-size: 0.95rem;
}

/* ── FAQ ── */
.faq-section {
    background: var(--color-light);
    padding: clamp(60px, 9vw, 100px) 0;
}

.faq-list {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--color-white);
    border-radius: var(--radius);
    border: 1px solid var(--color-line);
    overflow: hidden;
    transition: var(--transition);
}

.faq-item[open] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.faq-item__question {
    list-style: none;
    cursor: pointer;
    padding: 22px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-weight: 700;
    color: var(--color-ink);
    font-size: 1rem;
    transition: var(--transition);
}

.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::marker { content: ''; }

.faq-item__question:hover {
    color: var(--color-primary);
}

.faq-item__icon {
    width: 32px;
    height: 32px;
    background: var(--color-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item[open] .faq-item__icon {
    transform: rotate(180deg);
    background: var(--color-primary);
    color: var(--color-white);
}

.faq-item__answer {
    padding: 0 28px 22px;
    color: var(--color-ink-soft);
    line-height: 1.75;
    font-size: 0.96rem;
    animation: faqOpen 300ms ease;
}

.faq-item__answer p {
    margin: 0;
}

@keyframes faqOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   30. MODAL DE LEAD CAPTURE (Cursos e Materiais Gratuitos)
========================================================= */
.nv-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.nv-modal[aria-hidden="false"] {
    display: flex;
    animation: nvModalFade 280ms ease;
}

@keyframes nvModalFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.nv-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 27, 42, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.nv-modal__dialog {
    position: relative;
    background: white;
    border-radius: var(--radius-lg);
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
    animation: nvModalSlide 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes nvModalSlide {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.nv-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    border: none;
    background: rgba(13, 27, 42, 0.06);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink);
    z-index: 2;
    transition: var(--transition);
}
.nv-modal__close:hover {
    background: var(--color-ink);
    color: white;
}

.nv-modal__content {
    padding: 44px 36px 36px;
}

.nv-modal__eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-primary);
    margin-bottom: 12px;
}

.nv-modal__title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--color-ink);
    line-height: 1.2;
}

.nv-modal__lead {
    color: var(--color-muted);
    margin: 0 0 28px;
    font-size: 0.95rem;
    line-height: 1.65;
}

.nv-lead-form .nv-field {
    margin-bottom: 16px;
}

.nv-lead-form label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: 6px;
}

.nv-lead-form label .req {
    color: var(--color-primary);
}

.nv-lead-form input[type="text"],
.nv-lead-form input[type="email"],
.nv-lead-form input[type="tel"] {
    width: 100%;
    padding: 13px 14px;
    border: 1.5px solid var(--color-line);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    background: var(--color-light);
    color: var(--color-ink);
    transition: var(--transition);
}

.nv-lead-form input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: white;
    box-shadow: 0 0 0 4px rgba(227, 114, 32, 0.1);
}

.nv-field--check label {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    color: var(--color-muted) !important;
    cursor: pointer;
    line-height: 1.5;
}

.nv-field--check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    margin-top: 1px;
    flex-shrink: 0;
}

.nv-modal__submit {
    width: 100%;
    padding: 16px 24px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 12px;
    position: relative;
}

.nv-modal__submit:hover:not(:disabled) {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(227, 114, 32, 0.35);
}

.nv-modal__submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.nv-modal__submit-loading {
    display: none;
}

.nv-modal__submit.is-loading .nv-modal__submit-text {
    display: none;
}

.nv-modal__submit.is-loading .nv-modal__submit-loading {
    display: inline;
}

.nv-modal__error {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 8px;
    color: #c0392b;
    font-size: 0.88rem;
}

/* Success state */
.nv-modal__success-wrap {
    text-align: center;
    padding: 20px 0;
}

.nv-modal__success-icon {
    width: 80px;
    height: 80px;
    background: rgba(37, 211, 102, 0.12);
    color: #25d366;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    animation: nvSuccessPop 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes nvSuccessPop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.nv-modal__success-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--color-ink);
}

.nv-modal__success-msg {
    color: var(--color-muted);
    margin: 0 0 24px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.nv-yt-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
    margin-top: 20px;
}

.nv-yt-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.nv-modal__download-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-pill);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.92rem;
    text-decoration: none;
    transition: var(--transition);
    margin-top: 16px;
}

.nv-modal__download-btn:hover {
    background: var(--color-primary-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(227, 114, 32, 0.35);
}

@media (max-width: 560px) {
    .nv-modal__content { padding: 36px 24px 24px; }
    .nv-modal__title { font-size: 1.35rem; }
}

/* =========================================================
   31. SEÇÃO CURSOS GRATUITOS (home + archive)
========================================================= */
.cursos-section {
    padding: clamp(60px, 8vw, 100px) 0;
    background: var(--color-light);
}

.cursos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
}

.curso-card {
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-line);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.curso-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(13, 27, 42, 0.1);
    border-color: transparent;
}

.curso-card__thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--color-dark);
    overflow: hidden;
}

.curso-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.curso-card:hover .curso-card__thumb img {
    transform: scale(1.06);
}

.curso-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    transition: var(--transition);
}

.curso-card:hover .curso-card__play {
    transform: translate(-50%, -50%) scale(1.1);
}

.curso-card__play svg {
    width: 24px;
    height: 24px;
    margin-left: 3px;
}

.curso-card__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(13, 27, 42, 0.85);
    color: white;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    backdrop-filter: blur(8px);
}

.curso-card__badge--free {
    background: var(--color-primary);
}

.curso-card__body {
    padding: 24px 26px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.curso-card__meta {
    display: flex;
    gap: 14px;
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-bottom: 12px;
    font-family: var(--font-mono);
}

.curso-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.curso-card h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.35;
    color: var(--color-ink);
}

.curso-card__desc {
    color: var(--color-muted);
    margin: 0 0 18px;
    font-size: 0.92rem;
    line-height: 1.6;
    flex: 1;
}

.curso-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 20px;
    background: var(--color-ink);
    color: white;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.88rem;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: var(--font-body);
}

.curso-card__btn:hover {
    background: var(--color-primary);
    color: white;
    transform: translateY(-2px);
}

.curso-card__btn svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition);
}

.curso-card__btn:hover svg {
    transform: translateX(4px);
}

/* =========================================================
   32. SEÇÃO MATERIAIS GRATUITOS (download)
========================================================= */
.materiais-section {
    padding: clamp(60px, 8vw, 100px) 0;
    background: white;
}

.materiais-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
}

.material-card {
    background: var(--color-light);
    border-radius: var(--radius);
    padding: 28px;
    border: 1px solid var(--color-line);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    text-align: center;
}

.material-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(13, 27, 42, 0.08);
    border-color: var(--color-primary);
    background: white;
}

.material-card__cover {
    aspect-ratio: 3 / 4;
    background: linear-gradient(135deg, var(--color-brand-navy), var(--color-primary));
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto 20px;
    max-width: 180px;
    width: 100%;
    box-shadow: 0 8px 24px rgba(13, 27, 42, 0.18);
    transition: transform var(--transition);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.material-card:hover .material-card__cover {
    transform: translateY(-4px) rotate(-2deg);
}

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

.material-card__cover--placeholder {
    color: rgba(255,255,255,0.4);
}

.material-card__cover--placeholder svg {
    width: 48px;
    height: 48px;
}

.material-card__badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 4px 10px;
    background: rgba(227, 114, 32, 0.1);
    color: var(--color-primary-dark);
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 12px;
}

.material-card h3 {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.3;
    color: var(--color-ink);
}

.material-card__desc {
    color: var(--color-muted);
    margin: 0 0 16px;
    font-size: 0.88rem;
    line-height: 1.55;
    flex: 1;
}

.material-card__paginas {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-bottom: 16px;
    font-family: var(--font-mono);
}

.material-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-body);
}

.material-card__btn:hover {
    background: var(--color-primary-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(227, 114, 32, 0.3);
}

.material-card__btn svg {
    width: 16px;
    height: 16px;
}

/* =========================================================
   33. SEÇÃO BLOG (cards na home + arquivo)
========================================================= */
.blog-section {
    padding: clamp(60px, 8vw, 100px) 0;
    background: var(--color-light);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

.post-card {
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-line);
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(13, 27, 42, 0.1);
    border-color: transparent;
    color: inherit;
}

.post-card__thumb {
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--color-brand-navy), var(--color-primary));
    overflow: hidden;
    position: relative;
}

.post-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease;
}

.post-card:hover .post-card__thumb img {
    transform: scale(1.05);
}

.post-card__body {
    padding: 24px 28px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.post-card__meta {
    display: flex;
    gap: 12px;
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-bottom: 12px;
    font-family: var(--font-mono);
}

.post-card__category {
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.post-card h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.35;
    color: var(--color-ink);
}

.post-card__excerpt {
    color: var(--color-muted);
    margin: 0 0 18px;
    font-size: 0.93rem;
    line-height: 1.65;
    flex: 1;
}

.post-card__read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.post-card:hover .post-card__read {
    color: var(--color-primary-dark);
    gap: 10px;
}

/* Single post page */
.single-post-hero {
    background: var(--color-dark);
    color: white;
    padding: 100px 0 60px;
    position: relative;
}

.single-post-hero__category {
    color: var(--color-primary-light);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 14px;
    display: block;
    font-family: var(--font-mono);
}

.single-post-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    line-height: 1.15;
    max-width: 820px;
}

.single-post-hero__meta {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    font-family: var(--font-mono);
}

.single-post-content {
    background: white;
    padding: 60px 0 80px;
}

.single-post-content .container {
    max-width: 760px;
}

.single-post-content__featured {
    margin: -100px 0 40px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(13, 27, 42, 0.15);
    position: relative;
    z-index: 2;
}

.single-post-content__featured img {
    width: 100%;
    display: block;
}

.single-post-content__body {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--color-ink-soft);
}

.single-post-content__body h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 48px 0 16px;
    color: var(--color-ink);
}

.single-post-content__body h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 36px 0 14px;
    color: var(--color-ink);
}

.single-post-content__body p {
    margin: 0 0 20px;
}

.single-post-content__body img {
    border-radius: var(--radius);
    margin: 28px 0;
}

.single-post-content__body blockquote {
    border-left: 4px solid var(--color-primary);
    padding: 8px 0 8px 28px;
    margin: 32px 0;
    font-size: 1.15rem;
    font-style: italic;
    color: var(--color-ink);
}

.single-post-content__body a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.single-post-content__body a:hover {
    color: var(--color-primary-dark);
}

.single-post-content__body code {
    background: var(--color-light);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.92em;
    color: var(--color-primary-dark);
}

.single-post-content__body ul,
.single-post-content__body ol {
    margin: 0 0 20px;
    padding-left: 28px;
}

.single-post-content__body li {
    margin-bottom: 8px;
}

/* =========================================================
   34. PROJETO INDIVIDUAL — galeria
========================================================= */
.projeto-hero {
    background: var(--color-dark);
    color: white;
    padding: 80px 0 60px;
}

.projeto-hero__category {
    color: var(--color-primary-light);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 14px;
    display: block;
}

.projeto-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 700;
    margin: 0 0 24px;
    line-height: 1.1;
}

.projeto-hero__meta {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.projeto-hero__meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.projeto-hero__meta-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: var(--font-mono);
}

.projeto-hero__meta-value {
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
}

.projeto-content {
    background: white;
    padding: 60px 0;
}

.projeto-content .container {
    max-width: 880px;
}

.projeto-content__featured {
    margin-bottom: 40px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(13, 27, 42, 0.12);
}

.projeto-content__body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-ink-soft);
    margin-bottom: 48px;
}

.projeto-content__body p { margin: 0 0 18px; }

.projeto-galeria {
    background: var(--color-light);
    padding: 60px 0;
}

.projeto-galeria__title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 24px;
    color: var(--color-ink);
    text-align: center;
}

.projeto-galeria__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.projeto-galeria__item {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    background: var(--color-dark);
}

.projeto-galeria__item:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 30px rgba(13, 27, 42, 0.15);
}

.projeto-galeria__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.projeto-galeria__item:hover img {
    transform: scale(1.1);
}

/* Tags do projeto */
.projeto-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.projeto-tag {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(227, 114, 32, 0.1);
    color: var(--color-primary-dark);
    font-weight: 500;
}

/* =========================================================
   35. STATS — VERSÃO REPAGINADA (cards com ícones)
========================================================= */
.stats-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
    padding-top: 56px;
    margin-top: 56px;
    border-top: 1px solid rgba(255,255,255,0.1);
    position: relative;
}

.stat-v2 {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 28px;
    position: relative;
    transition: var(--transition);
}

/* Separador vertical entre stats */
.stat-v2:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 50%;
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
}

.stat-v2__icon {
    width: 48px;
    height: 48px;
    background: rgba(227, 114, 32, 0.12);
    border: 1px solid rgba(227, 114, 32, 0.25);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
    transition: var(--transition);
}

.stat-v2:hover .stat-v2__icon {
    background: var(--color-primary);
    color: white;
    transform: rotate(-5deg) scale(1.05);
    border-color: var(--color-primary);
}

.stat-v2__icon svg {
    width: 22px;
    height: 22px;
}

.stat-v2__content {
    display: flex;
    flex-direction: column;
}

.stat-v2__number {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 900;
    color: white;
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.stat-v2__number-suffix {
    color: var(--color-primary);
}

.stat-v2__label {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    margin-bottom: 4px;
}

.stat-v2__desc {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 720px) {
    .stat-v2:not(:last-child)::after { display: none; }
    .stats-v2 { gap: 8px; }
    .stat-v2 { padding: 16px; background: rgba(255,255,255,0.02); border-radius: var(--radius); }
}

/* =========================================================
   36. SEÇÃO ECOSSISTEMA DE CLIENTES (estilo DB1 Group)
========================================================= */
.ecossistema {
    padding: clamp(80px, 10vw, 120px) 0;
    background: var(--color-dark);
    color: white;
    position: relative;
    overflow: hidden;
}

.ecossistema__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
}

.ecossistema__bg::before,
.ecossistema__bg::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(227, 114, 32, 0.3);
}

.ecossistema__bg::before {
    top: 15%;
    left: 8%;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    transform: rotate(-15deg);
}

.ecossistema__bg::after {
    bottom: 20%;
    right: 10%;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    transform: rotate(25deg);
    border-color: rgba(45, 90, 142, 0.4);
}

.ecossistema__grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.ecossistema__content h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 28px;
    color: white;
}

.ecossistema__content h2 em {
    font-style: normal;
    color: var(--color-primary);
}

.ecossistema__content p {
    color: rgba(255,255,255,0.7);
    font-size: 1.02rem;
    line-height: 1.75;
    margin: 0 0 32px;
}

.ecossistema__stats {
    display: flex;
    gap: 32px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.ecossistema__stat-num {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
    display: block;
}

.ecossistema__stat-lbl {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 4px;
}

/* Hexágonos das categorias */
.hex-clusters {
    position: relative;
    width: 100%;
    aspect-ratio: 1.1 / 1;
    max-width: 720px;
    margin: 0 auto;
}

.hex-cluster {
    position: absolute;
    width: 38%;
    aspect-ratio: 1 / 0.866;
    /* Pontos de hexágono apontando para os lados */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 38px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: var(--transition);
}

/* Fallback: se clip-path não for suportado, vira retângulo arredondado */
@supports not (clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)) {
    .hex-cluster {
        clip-path: none;
        border-radius: var(--radius);
        background: rgba(255,255,255,0.05);
    }
    .hex-cluster__center {
        clip-path: none;
        border-radius: var(--radius);
    }
}

.hex-cluster:hover {
    background: rgba(227, 114, 32, 0.04);
    border-color: rgba(227, 114, 32, 0.3);
}

.hex-cluster--1 { top: 0; left: 24%; }
.hex-cluster--2 { top: 26%; right: 0; }
.hex-cluster--3 { top: 26%; left: 0; }
.hex-cluster--4 { bottom: 0; left: 24%; }

.hex-cluster__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38%;
    aspect-ratio: 1 / 0.866;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: var(--color-ink);
    z-index: 3;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(13, 27, 42, 0.5);
}

.hex-cluster__center-logo {
    width: 64px;
    height: 64px;
    background: var(--color-primary);
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.5rem;
}

.hex-cluster__center-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0;
}

.hex-cluster__label {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.08);
    color: var(--color-primary-light);
    border: 1px solid rgba(227, 114, 32, 0.4);
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    white-space: nowrap;
    z-index: 5;
}

.hex-cluster__brands {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    justify-content: center;
    align-items: center;
}

.hex-cluster__brand {
    color: rgba(255,255,255,0.85);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: -0.01em;
    padding: 0;
    transition: var(--transition);
}

.hex-cluster__brand:hover {
    color: var(--color-primary);
}

.hex-cluster__brand img {
    max-height: 22px;
    width: auto;
    filter: brightness(0) invert(1) opacity(0.85);
    transition: var(--transition);
}

.hex-cluster__brand:hover img {
    filter: none;
    opacity: 1;
}

/* Linhas decorativas conectando hexágonos */
.hex-clusters__lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 920px) {
    .ecossistema__grid { grid-template-columns: 1fr; gap: 48px; }
    .hex-clusters { max-width: 100%; aspect-ratio: 1 / 1.2; }
    .hex-cluster { padding: 24px 18px; }
    .hex-cluster__brand { font-size: 0.72rem; }
}

@media (max-width: 600px) {
    /* Em telas pequenas, vira lista vertical simples */
    .hex-clusters { aspect-ratio: auto; display: flex; flex-direction: column; gap: 16px; }
    .hex-cluster { position: static; width: 100%; aspect-ratio: auto; clip-path: none; border-radius: var(--radius); padding: 24px; }
    .hex-cluster__center { display: none; }
    .hex-cluster__label { position: static; transform: none; display: inline-block; margin-bottom: 14px; }
    .hex-cluster__brands { justify-content: flex-start; }
}

/* =========================================================
   37. SEÇÃO YOUTUBE — CARROSSEL ESTILO NETFLIX
========================================================= */
.youtube-section {
    padding: clamp(60px, 8vw, 100px) 0;
    background: linear-gradient(180deg, var(--color-dark) 0%, var(--color-dark-soft) 100%);
    color: white;
    overflow: hidden;
}

.youtube-section .section__title { color: white; }
.youtube-section .section__subtitle { color: rgba(255,255,255,0.7); }

.youtube-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.yt-video-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-dark-card);
    cursor: pointer;
    transition: var(--transition);
    display: block;
    text-decoration: none;
    color: inherit;
}

.yt-video-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    color: inherit;
}

.yt-video-card--featured {
    grid-column: span 2;
}

@media (max-width: 720px) {
    .yt-video-card--featured { grid-column: span 1; }
}

.yt-video-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--color-dark);
    overflow: hidden;
}

.yt-video-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.yt-video-card:hover .yt-video-card__thumb img {
    transform: scale(1.06);
}

.yt-video-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 27, 42, 0) 40%, rgba(13, 27, 42, 0.95) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px 24px;
    transition: var(--transition);
}

.yt-video-card:hover .yt-video-card__overlay {
    background: linear-gradient(180deg, rgba(13, 27, 42, 0.1) 0%, rgba(13, 27, 42, 0.95) 100%);
}

.yt-video-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    transition: var(--transition);
    opacity: 0.92;
}

.yt-video-card:hover .yt-video-card__play {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
}

.yt-video-card__play svg {
    width: 26px;
    height: 26px;
    margin-left: 3px;
}

.yt-video-card__duration {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
    z-index: 2;
}

.yt-video-card__body {
    padding: 18px 22px 22px;
}

.yt-video-card__title {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: white;
    line-height: 1.35;
    /* Limita a 2 linhas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.yt-video-card--featured .yt-video-card__title {
    font-size: 1.3rem;
}

.yt-video-card__excerpt {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.youtube-section__cta {
    text-align: center;
    margin-top: 48px;
}

.youtube-section__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: #ff0000;
    color: white;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: var(--transition);
    text-decoration: none;
}

.youtube-section__cta-btn:hover {
    background: #cc0000;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255, 0, 0, 0.4);
}

.youtube-section__cta-btn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* =========================================================
   38. SEÇÃO INSTAGRAM
========================================================= */
.instagram-section {
    padding: clamp(60px, 8vw, 100px) 0;
    background: var(--color-light);
}

.instagram-section__header {
    text-align: center;
    margin-bottom: 48px;
}

.instagram-section__handle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 16px;
    text-decoration: none;
}

.instagram-section__handle:hover {
    color: var(--color-primary-dark);
}

.instagram-section__handle svg {
    width: 22px;
    height: 22px;
}

.instagram-section__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    color: var(--color-ink);
}

/* Placeholder quando não tem plugin Smash Balloon */
.instagram-placeholder {
    background: white;
    border: 2px dashed var(--color-line);
    border-radius: var(--radius-lg);
    padding: 60px 32px;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.instagram-placeholder__icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #fd1d1d 0%, #fcb045 100%);
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 24px;
}

.instagram-placeholder__icon svg {
    width: 40px;
    height: 40px;
    fill: currentColor;
}

.instagram-placeholder h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--color-ink);
}

.instagram-placeholder p {
    color: var(--color-muted);
    margin: 0 0 24px;
    font-size: 0.95rem;
    line-height: 1.65;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.instagram-placeholder__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #fd1d1d 0%, #fcb045 100%);
    color: white;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    transition: var(--transition);
}

.instagram-placeholder__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(253, 29, 29, 0.3);
    color: white;
}

/* =========================================================
   39. ÁREA DO CLIENTE — Login, Trocar Senha (páginas auth)
========================================================= */
.nv-auth-page {
    min-height: calc(100vh - 200px);
    background: var(--color-dark);
    padding: 60px 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.nv-auth-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(227, 114, 32, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(45, 90, 142, 0.2) 0%, transparent 50%);
    pointer-events: none;
}

.nv-auth-container {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.nv-auth-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 48px 40px 36px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.nv-auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.nv-auth-logo-link {
    display: inline-block;
    margin-bottom: 24px;
}

.nv-auth-logo {
    height: 48px;
    width: auto;
    /* Inverter para o logo branco virar escuro no card branco */
    filter: brightness(0);
    opacity: 0.85;
}

.nv-auth-header h1 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--color-ink);
    letter-spacing: -0.01em;
}

.nv-auth-header p {
    color: var(--color-muted);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.nv-auth-alert {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-bottom: 20px;
    border-left: 3px solid;
}

.nv-auth-alert--error {
    background: rgba(220, 53, 69, 0.08);
    border-color: #dc3545;
    color: #b02a37;
}

.nv-auth-alert--success {
    background: rgba(16, 185, 129, 0.08);
    border-color: #10b981;
    color: #047857;
}

.nv-auth-form .nv-field {
    margin-bottom: 18px;
}

.nv-auth-form label {
    display: block;
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--color-ink);
    margin-bottom: 6px;
}

.nv-auth-form input[type="email"],
.nv-auth-form input[type="password"],
.nv-auth-form input[type="text"] {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--color-line);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.96rem;
    background: var(--color-light);
    color: var(--color-ink);
    transition: var(--transition);
}

.nv-auth-form input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: white;
    box-shadow: 0 0 0 4px rgba(227, 114, 32, 0.1);
}

.nv-auth-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.nv-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--color-muted);
    cursor: pointer;
}

.nv-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
}

.nv-auth-link {
    font-size: 0.88rem;
    color: var(--color-primary);
    font-weight: 500;
}

.nv-auth-link:hover {
    color: var(--color-primary-dark);
}

.nv-auth-btn {
    width: 100%;
    padding: 15px 24px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.nv-auth-btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(227, 114, 32, 0.35);
}

.nv-auth-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-line);
    font-size: 0.9rem;
    color: var(--color-muted);
}

.nv-auth-footer a {
    color: var(--color-primary);
    font-weight: 600;
}

.nv-auth-trust {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.nv-trust-item {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.04em;
}

@media (max-width: 480px) {
    .nv-auth-card { padding: 36px 24px 28px; }
    .nv-auth-header h1 { font-size: 1.5rem; }
}


/* =========================================================
   40. ÁREA DO CLIENTE — Dashboard refinado (Bold & Branded)
========================================================= */
.cliente-area {
    background: #f5f7fa;
    min-height: calc(100vh - 200px);
}

/* ───── HEADER NAVY ───── */
.cliente-area__header {
    background: linear-gradient(135deg, #0d1b2a 0%, #1e3a5f 60%, #2d5a8e 100%);
    color: white;
    padding: 56px 0 80px; /* extra bottom para acomodar tabs sobrepostas */
    position: relative;
    overflow: hidden;
}

.cliente-area__header::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(227, 114, 32, 0.22) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
}

.cliente-area__header-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.cliente-area__greet {
    display: block;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 8px;
    font-weight: 600;
}

.cliente-area__name {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.6vw, 2.5rem);
    font-weight: 900;
    margin: 0 0 10px;
    color: white;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.cliente-area__empresa,
.cliente-area__subtitle {
    color: rgba(255,255,255,0.7);
    margin: 0;
    font-size: 0.95rem;
    font-weight: 400;
}

/* Bloco de identidade do cliente (empresa + email + admin badge) */
.cliente-area__identity {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.cliente-area__identity-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius-pill);
    color: white;
    font-size: 0.84rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
}
.cliente-area__identity-item svg {
    flex-shrink: 0;
    opacity: 0.85;
}
.cliente-area__identity-item--muted {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.75);
    font-weight: 500;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: -0.01em;
}
.cliente-area__identity-item--admin {
    background: linear-gradient(90deg, rgba(227,114,32,0.3) 0%, rgba(227,114,32,0.15) 100%);
    border-color: rgba(227,114,32,0.5);
    color: #fed7aa;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cliente-area__identity-item--admin svg {
    color: #fed7aa;
    opacity: 1;
}

/* Botões do header (outline branco sutil) */
.cliente-area__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cliente-area__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    font-size: 0.86rem;
    font-weight: 600;
    transition: var(--transition);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    color: white;
    cursor: pointer;
    font-family: inherit;
}

.cliente-area__btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.4);
    color: white;
    transform: translateY(-1px);
}

.cliente-area__btn--ghost { /* alias para compat */
    background: rgba(255,255,255,0.06);
}

.cliente-area__btn--logout {
    background: transparent;
    color: rgba(255,200,200,0.85);
    border-color: rgba(255,200,200,0.25);
}

.cliente-area__btn--logout:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.5);
    color: white;
}

/* ───── STATS — cards brancos com faixa colorida vertical ───── */
.cliente-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    padding: 32px 0;
    margin-bottom: 32px;
}

.cliente-stat {
    background: white;
    border-radius: 12px;
    padding: 22px 24px 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(13, 27, 42, 0.04), 0 4px 12px rgba(13, 27, 42, 0.04);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.cliente-stat::before {
    /* faixa colorida vertical à esquerda */
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    background: var(--color-primary);
    border-radius: 0 2px 2px 0;
}

.cliente-stat:nth-child(2)::before { background: #10b981; }
.cliente-stat:nth-child(3)::before { background: #6b7280; }

.cliente-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(13, 27, 42, 0.06), 0 12px 28px rgba(13, 27, 42, 0.08);
}

.cliente-stat__num {
    font-family: var(--font-display);
    font-size: 2.3rem;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.cliente-stat:nth-child(2) .cliente-stat__num { color: #10b981; }
.cliente-stat:nth-child(3) .cliente-stat__num { color: #6b7280; }

.cliente-stat__lbl {
    font-size: 0.72rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
}

/* CTA verde do WhatsApp */
.cliente-stat--cta {
    background: linear-gradient(135deg, #25d366 0%, #128c4c 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
}

.cliente-stat--cta::before {
    display: none;
}

.cliente-stat--cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4);
}

.cliente-stat__cta-link {
    color: white;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: 100%;
    padding: 22px 24px;
    text-decoration: none;
    transition: var(--transition);
    font-size: 0.95rem;
}

.cliente-stat__cta-link:hover {
    color: white;
}

.cliente-stat__cta-link svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.cliente-stat__cta-link strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.cliente-stat__cta-link small {
    font-size: 0.82rem;
    font-weight: 400;
    opacity: 0.9;
}

.cliente-stat__cta-link::after {
    content: '→';
    margin-left: auto;
    font-size: 1.3rem;
    transition: transform 200ms ease;
}

.cliente-stat__cta-link:hover::after {
    transform: translateX(4px);
}

/* ───── EMPTY STATE ───── */
.cliente-empty {
    text-align: center;
    padding: 80px 24px;
    background: white;
    border-radius: 16px;
    border: 2px dashed #e5e7eb;
}

.cliente-empty__icon {
    font-size: 4rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.cliente-empty h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--color-ink);
}

.cliente-empty p {
    color: var(--color-muted);
    margin: 0 auto 28px;
    max-width: 480px;
    line-height: 1.65;
}

/* ───── SECTION TITLE ───── */
.cliente-section-title {
    margin-bottom: 24px;
}

.cliente-section-title__eyebrow {
    display: block;
    font-size: 0.72rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 600;
    margin-bottom: 6px;
}

.cliente-section-title__main {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-ink);
    letter-spacing: -0.01em;
}

/* Versão legada simples (mantida pra outras páginas) */
h2.cliente-section-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 24px;
    color: var(--color-ink);
}

/* ───── GRID DE SOLUÇÕES ───── */
.solucoes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    padding-bottom: 80px;
}

/* ───── CARD DE SOLUÇÃO (Bold & Branded refinado) ───── */
.solucao-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    padding: 0;
    transition: var(--transition);
    display: block;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(13, 27, 42, 0.04), 0 8px 24px rgba(13, 27, 42, 0.06);
}

.solucao-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(13, 27, 42, 0.06), 0 16px 36px rgba(13, 27, 42, 0.1);
}

/* Faixa laranja fininha no topo (assinatura) */
.solucao-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

.solucao-card--manutencao::before {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.solucao-card--inativo {
    opacity: 0.7;
}

.solucao-card--inativo::before {
    background: #d1d5db;
}

/* Header do card */
.solucao-card__top {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 26px 28px 0;
}

.solucao-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.solucao-card__icon span {
    font-size: 1.5rem;
    line-height: 1;
}

.solucao-card__title-wrap {
    flex: 1;
    min-width: 0;
}

.solucao-card__tipo {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    margin-bottom: 6px;
}

.solucao-card__title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
    color: var(--color-ink);
    letter-spacing: -0.01em;
}

/* Status pill no canto superior direito */
.solucao-card__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    flex-shrink: 0;
}

.solucao-card__status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    animation: nv-pulse 2.4s ease-in-out infinite;
}

@keyframes nv-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.solucao-card--manutencao .solucao-card__status {
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
}
.solucao-card--manutencao .solucao-card__status-dot { background: #f59e0b; }

.solucao-card--inativo .solucao-card__status {
    background: rgba(107, 114, 128, 0.12);
    color: #374151;
}
.solucao-card--inativo .solucao-card__status-dot {
    background: #6b7280;
    animation: none;
}

/* Descrição */
.solucao-card__desc {
    color: var(--color-muted);
    font-size: 0.94rem;
    line-height: 1.6;
    margin: 12px 28px 0;
    padding-left: 70px; /* alinhado com texto após ícone */
}

/* ───── CAIXA NAVY DA SENHA (destaque sutil) ───── */
.solucao-card__senha {
    margin: 22px 28px 0;
    background: linear-gradient(90deg, #1e3a5f 0%, #2d5a8e 100%);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    border: none;
}

.solucao-card__senha-icon {
    color: white;
    font-size: 1.05rem;
    opacity: 0.9;
}

.solucao-card__senha-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.solucao-card__senha-label {
    font-size: 0.66rem;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
}

.solucao-card__senha-val {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    color: white;
    font-weight: 600;
    background: transparent;
    padding: 0;
    border: none;
    word-break: break-all;
}

.solucao-card__senha-copy {
    background: var(--color-primary);
    border: none;
    color: white;
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

.solucao-card__senha-copy:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.solucao-card__senha-copy::before {
    content: '📋';
    font-size: 0.85rem;
}

.solucao-card__senha-copy.is-copied {
    background: #10b981;
}

.solucao-card__senha-copy.is-copied::before {
    content: '✓';
}

/* ───── FOOTER do card: botões + meta ───── */
.solucao-card__footer {
    padding: 22px 28px 24px;
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid #f3f4f6;
}

.solucao-card__actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Botão principal com gradient laranja */
.solucao-card__btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(227, 114, 32, 0.2), 0 4px 8px rgba(227, 114, 32, 0.15);
}

.solucao-card__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(227, 114, 32, 0.3), 0 8px 20px rgba(227, 114, 32, 0.25);
    color: white;
}

.solucao-card__btn--primary svg {
    width: 13px;
    height: 13px;
}

/* "Ver histórico" como link discreto */
.solucao-card__btn--ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    color: var(--color-muted);
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 0.86rem;
    cursor: pointer;
    border-radius: 8px;
    transition: var(--transition);
    font-family: inherit;
    text-decoration: none;
}

.solucao-card__btn--ghost:hover {
    color: var(--color-ink);
    background: #f9fafb;
}

/* Botão desabilitado para inativo */
.solucao-card__btn--disabled {
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    border-radius: 10px;
    background: #f3f4f6;
    color: #9ca3af;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: not-allowed;
    border: none;
}

/* Meta info à direita */
.solucao-card__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    color: #9ca3af;
    font-size: 0.78rem;
    text-align: right;
}

.solucao-card__meta-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.solucao-card__meta-row svg {
    width: 12px;
    height: 12px;
    opacity: 0.7;
}

.solucao-card__meta-url {
    font-family: var(--font-mono);
    font-size: 0.76rem;
}

/* ───── HISTÓRICO (drawer expansível) ───── */
.solucao-card__historico {
    margin: 0 28px 24px;
    padding: 18px 20px;
    background: #f9fafb;
    border-radius: 10px;
    border-left: 3px solid var(--color-primary);
}

.solucao-card__historico h4 {
    font-family: var(--font-display);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-ink);
    margin: 0 0 12px;
    font-weight: 700;
}

.solucao-card__historico ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.solucao-card__historico li {
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.85rem;
    color: var(--color-ink-soft);
    line-height: 1.6;
}

.solucao-card__historico li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.solucao-card__hist-data {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    background: white;
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--color-muted);
    margin-right: 8px;
    border: 1px solid #e5e7eb;
}

/* ───── RESPONSIVO ───── */
@media (max-width: 700px) {
    .cliente-area__header { padding: 36px 0 80px; }
    .cliente-area__header-inner { flex-direction: column; align-items: flex-start; }
    .cliente-area__actions { width: 100%; }
    .cliente-stats { grid-template-columns: 1fr 1fr; padding: 24px 0; }
    .cliente-stat--cta { grid-column: 1 / -1; }

    .solucao-card__top { padding: 22px 20px 0; gap: 14px; }
    .solucao-card__icon { width: 44px; height: 44px; }
    .solucao-card__title { font-size: 1.18rem; }
    .solucao-card__desc { padding-left: 0; margin: 14px 20px 0; }
    .solucao-card__senha { margin: 18px 20px 0; padding: 12px 14px; }
    .solucao-card__footer { padding: 18px 20px 22px; flex-direction: column; align-items: stretch; }
    .solucao-card__actions { width: 100%; }
    .solucao-card__btn--primary { flex: 1; justify-content: center; }
    .solucao-card__meta { align-items: flex-start; text-align: left; }
    .solucao-card__historico { margin: 0 20px 20px; }
}


/* Header actions (login + contato) */
.header-actions { display: flex; gap: 12px; align-items: center; }
.header-login-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.75);
    font-size: 0.86rem;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    transition: var(--transition);
    border: 1px solid rgba(255,255,255,0.15);
}
.header-login-link:hover {
    color: white;
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.3);
}
.header-cta--client {
    background: rgba(255,255,255,0.08);
    color: white;
    border: 1px solid rgba(255,255,255,0.15);
}
.header-cta--client:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
.header-cta--admin {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    border: 1px solid var(--color-primary-dark);
    box-shadow: 0 2px 8px rgba(227, 114, 32, 0.3);
}
.header-cta--admin:hover {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(227, 114, 32, 0.4);
}
.header-cta--admin svg { animation: nv-spin-soft 8s linear infinite; }
@keyframes nv-spin-soft { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@media (max-width: 980px) {
    .header-login-link { display: none; }
}

/* =========================================================
   41. ÁREA DO CLIENTE — Tabs de navegação (ancoradas na borda)
========================================================= */
.cliente-tabs {
    position: relative;
    z-index: 3;
    margin-top: -32px; /* sobreposição no header navy */
    margin-bottom: 0;
    pointer-events: none; /* só o card filho captura */
}

.cliente-tabs .container {
    pointer-events: auto;
    background: white;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -2px 8px rgba(13, 27, 42, 0.04), 0 8px 24px rgba(13, 27, 42, 0.06);
    padding: 0 20px;
    display: flex;
    gap: 0;
    overflow-x: auto;
    border-bottom: 1px solid #f3f4f6;
}

.cliente-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 18px 20px;
    color: var(--color-muted);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    position: relative;
    transition: var(--transition);
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

.cliente-tab:hover {
    color: var(--color-ink);
}

.cliente-tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.cliente-tab__icon {
    font-size: 1.05rem;
}

/* =========================================================
   42. PROJETOS — stats compactos
========================================================= */
.proj-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.proj-stat {
    background: white;
    border-radius: var(--radius);
    padding: 16px 24px;
    border: 1px solid var(--color-line);
    min-width: 150px;
}
.proj-stat__num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 4px;
}
.proj-stat__lbl {
    font-size: 0.82rem;
    color: var(--color-muted);
    font-weight: 500;
}

/* =========================================================
   43. PROJETOS — Grid de cards
========================================================= */
.projetos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
    padding-bottom: 60px;
}
.projeto-card {
    background: white;
    border-radius: var(--radius);
    border: 1px solid var(--color-line);
    padding: 28px;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}
.projeto-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(13, 27, 42, 0.08);
    color: inherit;
    border-color: var(--color-primary);
}
.projeto-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.projeto-card__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.projeto-card__atraso {
    background: #fee2e2;
    color: #b91c1c;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}
.projeto-card__title {
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.3;
    color: var(--color-ink);
}
.projeto-card__desc {
    color: var(--color-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 18px;
}
.projeto-card__progresso {
    background: var(--color-light);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.projeto-card__progresso-head {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--color-muted);
    margin-bottom: 6px;
}
.projeto-card__progresso-head strong {
    color: var(--color-primary);
    font-size: 1rem;
}
.projeto-card__progresso-bar {
    background: var(--color-line);
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}
.projeto-card__progresso-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.projeto-card__progresso-meta {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-top: 6px;
}
.projeto-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--color-line);
    margin-top: auto;
}
.projeto-card__meta {
    font-size: 0.82rem;
    color: var(--color-muted);
}
.projeto-card__arrow {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.85rem;
}

/* =========================================================
   44. PROJETO DETALHE
========================================================= */
.projeto-detalhe {
    padding-bottom: 80px;
}
.projeto-progresso-hero {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px 32px;
    border: 1px solid var(--color-line);
    margin-bottom: 32px;
}
.projeto-progresso-hero__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 14px;
}
.projeto-progresso-hero__meta {
    display: block;
    color: var(--color-muted);
    font-size: 0.88rem;
    margin-top: 2px;
}
.projeto-progresso-hero__pct {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
}
.projeto-progresso-hero__bar {
    background: var(--color-light);
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
}
.projeto-progresso-hero__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    border-radius: 5px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.projeto-detalhe__grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
}
@media (max-width: 920px) {
    .projeto-detalhe__grid { grid-template-columns: 1fr; }
}
.projeto-detalhe__main { min-width: 0; }
.projeto-detalhe__main h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 18px;
    color: var(--color-ink);
}
.projeto-detalhe__desc {
    background: white;
    border-radius: var(--radius);
    padding: 24px 28px;
    border: 1px solid var(--color-line);
}
.projeto-detalhe__desc p {
    color: var(--color-ink-soft);
    line-height: 1.7;
    margin: 0 0 12px;
}

/* Sidebar */
.projeto-detalhe__sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.proj-sidebar-card {
    background: white;
    border-radius: var(--radius);
    padding: 22px 24px;
    border: 1px solid var(--color-line);
}
.proj-sidebar-card h3 {
    font-family: var(--font-display);
    font-size: 0.96rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--color-ink);
}
.proj-sidebar-card--info {
    background: var(--color-light);
    border-color: rgba(227, 114, 32, 0.3);
    border-left: 3px solid var(--color-primary);
}
.proj-sidebar-card--cta {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-brand-navy) 100%);
    border-color: transparent;
    color: white;
}
.proj-sidebar-card--cta h3,
.proj-sidebar-card--cta p {
    color: white;
}
.proj-sidebar-card--cta p {
    font-size: 0.88rem;
    margin: 0 0 16px;
    opacity: 0.85;
}
.proj-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-line);
    font-size: 0.9rem;
}
.proj-info-row:last-child { border-bottom: none; }
.proj-info-row__lbl { color: var(--color-muted); }
.proj-info-row__val { color: var(--color-ink); font-weight: 600; }
.proj-link-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-light);
    border-radius: 10px;
    color: var(--color-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    transition: var(--transition);
    margin-bottom: 8px;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: var(--font-body);
}
.proj-link-btn:last-child { margin-bottom: 0; }
.proj-link-btn:hover {
    background: var(--color-primary);
    color: white;
    transform: translateX(4px);
}
.proj-link-btn small {
    margin-left: auto;
    color: var(--color-muted);
}
.proj-link-btn:hover small { color: white; }
.proj-link-btn--primary {
    background: white;
    color: var(--color-primary);
    justify-content: center;
}
.proj-link-btn--primary:hover {
    background: var(--color-primary-light);
    color: var(--color-dark);
    transform: translateY(-2px);
}

/* =========================================================
   45. ETAPAS — Timeline e checklist
========================================================= */
.etapas-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.etapa-card {
    background: white;
    border-radius: var(--radius);
    padding: 24px;
    border: 1px solid var(--color-line);
    transition: var(--transition);
    position: relative;
}
.etapa-card--em_andamento {
    border-left: 4px solid #3b82f6;
}
.etapa-card--concluido {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.04) 0%, white 80%);
    border-left: 4px solid #10b981;
}
.etapa-card--bloqueado {
    border-left: 4px solid #ef4444;
}
.etapa-card--pendente {
    opacity: 0.85;
}
.etapa-card__head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}
.etapa-card__num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-light);
    color: var(--color-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.92rem;
    flex-shrink: 0;
    border: 2px solid var(--color-line);
}
.etapa-card--concluido .etapa-card__num {
    background: #10b981;
    color: white;
    border-color: #10b981;
    font-size: 1.05rem;
}
.etapa-card--em_andamento .etapa-card__num {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}
.etapa-card__title-wrap {
    flex: 1;
}
.etapa-card__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--color-ink);
}
.etapa-card__meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.etapa-status {
    font-weight: 600;
    font-size: 0.85rem;
}
.etapa-card__desc {
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 12px 52px;
}
.etapa-card__desc p { margin: 4px 0; }

.etapa-checklist {
    list-style: none;
    padding: 0;
    margin: 14px 0 0 52px;
}
.etapa-checklist__item {
    margin: 6px 0;
}
.etapa-checklist__item label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.92rem;
    color: var(--color-ink-soft);
}
.etapa-checklist__item label:hover {
    background: var(--color-light);
}
.etapa-checklist__item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.etapa-checklist__item.is-done label {
    text-decoration: line-through;
    color: var(--color-muted);
}
.etapa-checklist__item.is-done span {
    opacity: 0.6;
}

/* =========================================================
   46. CHAMADOS — Lista e detalhe
========================================================= */
.chamados-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 60px;
}
.chamado-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: white;
    border-radius: var(--radius);
    border: 1px solid var(--color-line);
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}
.chamado-row:hover {
    transform: translateX(4px);
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(13, 27, 42, 0.06);
    color: inherit;
}
.chamado-row--aguardando_cliente {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.06) 0%, white 30%);
    border-left: 4px solid #8b5cf6;
}
.chamado-row__left {
    display: flex;
    gap: 14px;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.chamado-row__cat-icon {
    width: 44px;
    height: 44px;
    background: var(--color-light);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.chamado-row__title-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.chamado-row__title {
    color: var(--color-ink);
    font-size: 1.02rem;
}
.chamado-row__prio {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    text-transform: uppercase;
}
.chamado-row__meta {
    color: var(--color-muted);
    font-size: 0.82rem;
    margin-top: 4px;
}
.chamado-row__right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.chamado-row__status {
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.chamado-row__arrow {
    color: var(--color-muted);
    font-size: 1.2rem;
}

/* Chamado detalhe */
.chamado-detalhe {
    padding-bottom: 80px;
    max-width: 860px;
}
.chamado-projeto-link {
    background: rgba(227, 114, 32, 0.08);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 24px;
    font-size: 0.9rem;
}
.chamado-projeto-link a {
    color: var(--color-primary);
    font-weight: 600;
}

.chamado-thread {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}
.thread-msg {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.thread-msg__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-ink);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}
.thread-msg__body {
    flex: 1;
    background: white;
    border-radius: var(--radius);
    padding: 16px 20px;
    border: 1px solid var(--color-line);
    min-width: 0;
}
.thread-msg--original .thread-msg__body {
    background: #fffbeb;
    border-color: #fde68a;
}
.thread-msg--admin .thread-msg__body {
    background: #fff7ed;
    border-color: #fdba74;
    border-left: 3px solid var(--color-primary);
}
.thread-msg--cliente .thread-msg__body {
    background: #f0f9ff;
    border-color: #bae6fd;
}
.thread-msg__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-wrap: wrap;
}
.thread-msg__badge {
    background: var(--color-primary);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.thread-msg__date {
    color: var(--color-muted);
    font-size: 0.8rem;
    margin-left: auto;
}
.thread-msg__content {
    color: var(--color-ink-soft);
    line-height: 1.65;
}
.thread-msg__content p {
    margin: 4px 0;
}

.chamado-reply-form {
    background: white;
    border-radius: var(--radius);
    padding: 24px;
    border: 1px solid var(--color-line);
}
.chamado-reply-form h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--color-ink);
}
.chamado-reply-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--color-line);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.96rem;
    background: var(--color-light);
    resize: vertical;
    min-height: 100px;
    transition: var(--transition);
    margin-bottom: 14px;
}
.chamado-reply-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: white;
    box-shadow: 0 0 0 4px rgba(227, 114, 32, 0.1);
}
.chamado-fechado, .chamado-resolvido {
    padding: 18px 22px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 24px;
    font-size: 0.96rem;
}
.chamado-fechado {
    background: var(--color-light);
    color: var(--color-muted);
    border: 1px solid var(--color-line);
}
.chamado-resolvido {
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Modal de chamado: usa o mesmo CSS do nv-modal já existente */
.nv-modal .req { color: var(--color-primary); }
.nv-modal select, .nv-modal textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1.5px solid var(--color-line);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    background: var(--color-light);
    color: var(--color-ink);
    transition: var(--transition);
    margin-bottom: 0;
}
.nv-modal select:focus, .nv-modal textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: white;
    box-shadow: 0 0 0 4px rgba(227, 114, 32, 0.1);
}
.nv-modal textarea { resize: vertical; min-height: 100px; }

/* =========================================================
   47. PROJECT DETAIL — Sidebar + Tabs (Apps Script style)
========================================================= */
.proj-detail { background: #f5f7fa; min-height: calc(100vh - 200px); }

/* HEADER */
.proj-detail__header {
    background: linear-gradient(135deg, #0d1b2a 0%, #1e3a5f 60%, #2d5a8e 100%);
    color: white;
    padding: 32px 0 28px;
    position: relative;
    overflow: hidden;
}
.proj-detail__header::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -5%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(227, 114, 32, 0.22) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
}
.proj-detail__header-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}
.proj-detail__crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.65);
    margin-bottom: 10px;
}
.proj-detail__crumbs a { color: inherit; text-decoration: none; transition: color 0.2s; }
.proj-detail__crumbs a:hover { color: white; }
.proj-detail__title {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    font-weight: 900;
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: white;
}
.proj-detail__badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.proj-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.92);
    border: 1px solid rgba(255,255,255,0.2);
}
.proj-badge--soft { background: rgba(255,255,255,0.08); }
.proj-badge--warn { background: rgba(245, 158, 11, 0.25); border-color: rgba(245, 158, 11, 0.5); }
.proj-badge--danger { background: rgba(239, 68, 68, 0.25); border-color: rgba(239, 68, 68, 0.55); color: white; }

.proj-detail__head-actions {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.proj-detail__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(255,255,255,0.08);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    font-family: inherit;
}
.proj-detail__btn:hover {
    background: rgba(255,255,255,0.18);
    transform: translateY(-1px);
    color: white;
}
.proj-detail__btn--primary {
    background: var(--color-primary);
    border-color: var(--color-primary-dark);
}
.proj-detail__btn--primary:hover {
    background: var(--color-primary-dark);
    color: white;
}

/* Switcher de projetos */
.proj-switcher { position: relative; }
.proj-switcher__count {
    background: rgba(255,255,255,0.2);
    color: white;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-left: 4px;
}
.proj-switcher__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(13, 27, 42, 0.18);
    min-width: 280px;
    padding: 8px;
    z-index: 100;
}
.proj-switcher__menu-head {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-muted);
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-line);
    margin-bottom: 6px;
}
.proj-switcher__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--color-ink);
    text-decoration: none;
    transition: var(--transition);
}
.proj-switcher__item:hover {
    background: var(--color-light);
    color: var(--color-ink);
}
.proj-switcher__item strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
}
.proj-switcher__item small {
    display: block;
    font-size: 0.76rem;
    color: var(--color-muted);
}
.proj-switcher__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* BODY: agora é uma coluna só (tabs ficam horizontais no topo) */
.proj-detail__body {
    display: block;
    max-width: 1280px;
    margin: -10px auto 0;
    background: white;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -2px 8px rgba(13, 27, 42, 0.04);
    position: relative;
}

/* Dentro do ERP (admin/equipe), não trava largura — usa o container ERP */
body.nv-erp-mode .proj-detail__body {
    max-width: none;
    border-radius: 0;
    margin-top: 0;
}

/* TABS HORIZONTAIS — nova navegação do projeto */
.proj-tabs-bar {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    background: white;
    border-bottom: 2px solid var(--color-line);
    padding: 0 16px;
    scrollbar-width: thin;
    position: sticky;
    top: 0;
    z-index: 50;
}
.proj-tabs-bar::-webkit-scrollbar { height: 4px; }
.proj-tabs-bar::-webkit-scrollbar-thumb { background: var(--color-line); border-radius: 2px; }

.proj-tabs-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 14px;
    color: var(--color-muted);
    font-weight: 600;
    font-size: 0.88rem;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
    margin-bottom: -2px;
}
.proj-tabs-bar__item:hover {
    color: var(--color-ink);
}
.proj-tabs-bar__item--active {
    color: #e37220;
    border-bottom-color: #e37220;
    font-weight: 800;
}
.proj-tabs-bar__item .ic { font-size: 1rem; }
.proj-tabs-bar__item .cnt {
    background: var(--color-line);
    color: var(--color-muted);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 2px;
}
.proj-tabs-bar__item--active .cnt {
    background: #e37220;
    color: white;
}

@media (max-width: 700px) {
    .proj-tabs-bar { padding: 0 8px; }
    .proj-tabs-bar__item { padding: 12px 10px; font-size: 0.82rem; }
    .proj-tabs-bar__item .ic { font-size: 0.92rem; }
}

/* SIDEBAR antiga - desativada mas mantém pra compatibilidade */
.proj-sidebar { display: none !important; }

/* MAIN */
.proj-main { padding: 32px; min-width: 0; min-height: 600px; }
@media (max-width: 900px) {
    .proj-main { padding: 20px 16px; }
}
@media (max-width: 600px) {
    .proj-main { padding: 16px 12px; }
}
.proj-tab { display: none; }
.proj-tab--active { display: block; animation: nv-fade-in 0.3s ease; }
@keyframes nv-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.proj-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.proj-section-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--color-ink);
    letter-spacing: -0.01em;
}
.proj-section-sub {
    color: var(--color-muted);
    margin: 0;
    font-size: 0.92rem;
}
.proj-subsection-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 28px 0 14px;
    color: var(--color-ink);
}

/* HERO progresso */
.proj-hero-progress {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 22px 26px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(13, 27, 42, 0.04);
}
.proj-hero-progress__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 12px;
}
.proj-hero-progress__lbl {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.proj-hero-progress__meta {
    font-size: 0.92rem;
    color: var(--color-ink-soft);
    margin-top: 4px;
}
.proj-hero-progress__pct {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
    letter-spacing: -0.02em;
}
.proj-hero-progress__bar {
    background: var(--color-light);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}
.proj-hero-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* KPI grid */
.proj-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.proj-kpi {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 16px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(13, 27, 42, 0.04);
    transition: var(--transition);
}
.proj-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(13, 27, 42, 0.06);
}
.proj-kpi::before {
    content: '';
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 3px;
    background: var(--color-primary);
    border-radius: 0 2px 2px 0;
}
.proj-kpi--blue::before { background: #3b82f6; }
.proj-kpi--green::before { background: #10b981; }
.proj-kpi--yellow::before { background: #f59e0b; }
.proj-kpi--red::before { background: #ef4444; }
.proj-kpi__lbl {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-muted);
    margin-bottom: 6px;
}
.proj-kpi__num {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-primary);
}
.proj-kpi--blue .proj-kpi__num { color: #3b82f6; }
.proj-kpi--green .proj-kpi__num { color: #10b981; }
.proj-kpi--yellow .proj-kpi__num { color: #f59e0b; }
.proj-kpi--red .proj-kpi__num { color: #ef4444; }
.proj-kpi__sub {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-top: 4px;
}

/* Progresso por etapa */
.proj-etapas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
.proj-etapa-card {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 14px 18px;
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
    font-family: inherit;
    width: 100%;
}
.proj-etapa-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(13, 27, 42, 0.06);
    border-color: var(--color-primary-light);
}
.proj-etapa-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.proj-etapa-card__num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--color-light);
    color: var(--color-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
    border: 2px solid var(--color-line);
}
.proj-etapa-card__num.is-done { background: #10b981; border-color: #10b981; color: white; }
.proj-etapa-card__num.is-doing { background: #3b82f6; border-color: #3b82f6; color: white; }
.proj-etapa-card__pct { font-weight: 700; font-size: 0.86rem; }
.proj-etapa-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.96rem;
    color: var(--color-ink);
    margin: 6px 0 4px;
    line-height: 1.3;
}
.proj-etapa-card__sub {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-bottom: 8px;
}
.proj-etapa-card__bar {
    background: var(--color-light);
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
}
.proj-etapa-card__fill {
    height: 100%;
    border-radius: 3px;
    background: var(--color-primary);
    transition: width 0.4s;
}

/* Sobre o projeto */
.proj-about {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 22px 26px;
}
.proj-about p {
    margin: 0 0 12px;
    line-height: 1.65;
    color: var(--color-ink-soft);
}
.proj-about p:last-child { margin-bottom: 0; }

/* TIMELINE */
.proj-timeline {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 32px 24px;
    overflow-x: auto;
}
.proj-timeline__row {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-width: 700px;
    position: relative;
}
.proj-timeline__step {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 8px 6px;
}
.proj-timeline__step::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 0; right: 0;
    height: 3px;
    background: var(--color-line);
    z-index: 1;
}
.proj-timeline__step:first-child::before { left: 50%; }
.proj-timeline__step:last-child::before { right: 50%; }
.proj-timeline__step.is-done::before { background: #10b981; }
.proj-timeline__step.is-active::before {
    background: linear-gradient(90deg, #10b981 50%, var(--color-line) 50%);
}
.proj-timeline__circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--color-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-muted);
    position: relative;
    z-index: 2;
}
.proj-timeline__step.is-done .proj-timeline__circle {
    background: #10b981;
    border-color: #10b981;
    color: white;
    font-size: 1.3rem;
}
.proj-timeline__step.is-active .proj-timeline__circle {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 0 5px rgba(227, 114, 32, 0.18);
}
.proj-timeline__label {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-ink);
    margin-bottom: 2px;
}
.proj-timeline__sub {
    font-size: 0.74rem;
    color: var(--color-muted);
}

.proj-status-callout {
    margin-top: 20px;
    padding: 14px 20px;
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    color: var(--color-ink-soft);
    font-size: 0.92rem;
}

/* FILTROS */
.proj-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    background: white;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--color-line);
    align-items: center;
}
.proj-filter-pill {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--color-light);
    color: var(--color-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}
.proj-filter-pill:hover { background: var(--color-line); }
.proj-filter-pill span {
    background: rgba(0,0,0,0.08);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
}
.proj-filter-pill--active {
    background: var(--color-primary);
    color: white;
}
.proj-filter-pill--active span {
    background: rgba(255,255,255,0.25);
    color: white;
}
.proj-filters__actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

/* ACCORDION */
.proj-accordions { display: flex; flex-direction: column; gap: 12px; }
.proj-accordion {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.proj-accordion:hover { border-color: var(--color-primary-light); }
.proj-accordion.is-done { background: linear-gradient(180deg, rgba(16, 185, 129, 0.03) 0%, white 100%); }
.proj-accordion.is-blocked { border-left: 4px solid #ef4444; }

.proj-accordion__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    color: var(--color-ink);
    transition: background 0.15s;
}
.proj-accordion__head:hover { background: rgba(0,0,0,0.02); }
.proj-accordion__num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--color-light);
    color: var(--color-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.92rem;
    flex-shrink: 0;
    border: 2px solid var(--color-line);
}
.proj-accordion.is-done .proj-accordion__num { background: #10b981; border-color: #10b981; color: white; font-size: 1.05rem; }
.proj-accordion.is-doing .proj-accordion__num { background: #3b82f6; border-color: #3b82f6; color: white; }
.proj-accordion__info { flex: 1; min-width: 0; }
.proj-accordion__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-ink);
}
.proj-accordion__meta {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--color-muted);
    flex-wrap: wrap;
}
.proj-accordion__status {
    font-weight: 700;
    font-size: 0.8rem;
}
.proj-accordion__progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 8px;
    flex-shrink: 0;
}
.proj-accordion__progress-bar {
    width: 70px;
    height: 5px;
    background: var(--color-light);
    border-radius: 3px;
    overflow: hidden;
}
.proj-accordion__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    border-radius: 3px;
    transition: width 0.4s;
}
.proj-accordion__progress-text {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-muted);
    min-width: 36px;
    text-align: right;
}
.proj-accordion__chevron {
    width: 24px; height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    font-size: 1.1rem;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.proj-accordion.is-open .proj-accordion__chevron { transform: rotate(180deg); }
.proj-accordion__body {
    padding: 0 20px 0 70px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
}
.proj-accordion.is-open .proj-accordion__body {
    max-height: 3000px;
    padding: 0 20px 18px 70px;
}
.proj-accordion__desc {
    background: var(--color-light);
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 3px solid var(--color-primary-light);
    margin-bottom: 14px;
    font-size: 0.88rem;
    color: var(--color-ink-soft);
    line-height: 1.6;
}
.proj-accordion__desc p { margin: 0 0 6px; }
.proj-accordion__desc p:last-child { margin-bottom: 0; }

/* CHECKLIST */
.proj-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}
.proj-checklist__item {
    margin: 2px 0;
}
.proj-checklist__item label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    color: var(--color-ink);
    font-size: 0.88rem;
}
.proj-checklist__item label:hover { background: var(--color-light); }
.proj-checklist__item input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.proj-checklist__item.is-done label {
    color: var(--color-muted);
    text-decoration: line-through;
    opacity: 0.7;
}

/* KANBAN */
.proj-kanban {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    overflow-x: auto;
}
.proj-kanban__col {
    background: var(--color-light);
    border-radius: 10px;
    padding: 0;
    min-width: 200px;
    border-top: 3px solid var(--color-primary);
}
.proj-kanban__col-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.proj-kanban__col-title {
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.proj-kanban__col-count {
    background: white;
    color: var(--color-muted);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    font-size: 0.72rem;
    font-weight: 700;
}
.proj-kanban__col-body { padding: 10px; }
.proj-kanban__card {
    background: white;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border-left: 3px solid var(--color-primary);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    border: 1px solid var(--color-line);
    border-left-width: 3px;
    width: 100%;
    text-align: left;
    font-family: inherit;
    display: block;
}
.proj-kanban__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}
.proj-kanban__card-title {
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-ink);
    margin-bottom: 8px;
}
.proj-kanban__card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.74rem;
    color: var(--color-muted);
    margin-bottom: 6px;
}
.proj-kanban__card-bar {
    background: var(--color-light);
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
}
.proj-kanban__card-fill {
    height: 100%;
    border-radius: 2px;
}
.proj-kanban__empty {
    text-align: center;
    color: var(--color-muted);
    font-size: 0.82rem;
    padding: 24px 12px;
    opacity: 0.6;
}

/* ARQUIVOS / LINKS */
.proj-subtabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    background: white;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid var(--color-line);
}
.proj-subtab {
    padding: 8px 16px;
    border-radius: 8px;
    background: transparent;
    color: var(--color-muted);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}
.proj-subtab:hover { background: var(--color-light); }
.proj-subtab span {
    background: var(--color-line);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
}
.proj-subtab--active {
    background: var(--color-primary);
    color: white;
}
.proj-subtab--active span {
    background: rgba(255,255,255,0.25);
    color: white;
}

.proj-recursos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.proj-recurso {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    color: var(--color-ink);
    text-decoration: none;
    transition: var(--transition);
}
.proj-recurso:hover {
    transform: translateX(4px);
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(13, 27, 42, 0.06);
    color: var(--color-ink);
}
.proj-recurso__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.proj-recurso__info { flex: 1; min-width: 0; }
.proj-recurso__title {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: 2px;
}
.proj-recurso__host {
    font-size: 0.78rem;
    color: var(--color-muted);
    font-family: var(--font-mono);
}
.proj-recurso__open {
    background: var(--color-light);
    color: var(--color-ink);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}
.proj-recurso:hover .proj-recurso__open {
    background: var(--color-primary);
    color: white;
}

.proj-credenciais {
    background: linear-gradient(90deg, #1e3a5f 0%, #2d5a8e 100%);
    border-radius: 12px;
    padding: 20px 24px;
}
.proj-credenciais pre {
    color: white;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* CHAMADOS aba */
.proj-chamados-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.proj-chamado-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    text-decoration: none;
    color: var(--color-ink);
    transition: var(--transition);
}
.proj-chamado-row:hover {
    transform: translateX(4px);
    border-color: var(--color-primary);
    color: var(--color-ink);
}
.proj-chamado-row__icon {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
}
.proj-chamado-row__info { flex: 1; }
.proj-chamado-row__info strong { display: block; font-size: 0.95rem; }
.proj-chamado-row__info small { display: block; font-size: 0.78rem; color: var(--color-muted); margin-top: 2px; }
.proj-chamado-row__status {
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* EMPTY */
.proj-empty {
    background: white;
    border: 2px dashed var(--color-line);
    border-radius: 12px;
    padding: 60px 24px;
    text-align: center;
    color: var(--color-muted);
}

/* RESPONSIVO */
@media (max-width: 900px) {
    .proj-detail__body { grid-template-columns: 1fr; margin-top: 0; border-radius: 0; }
    .proj-sidebar {
        position: static;
        display: flex;
        overflow-x: auto;
        padding: 0;
        border-right: none;
        border-bottom: 1px solid var(--color-line);
        min-height: 0;
    }
    .proj-sidebar__section { display: none; }
    .proj-sidebar__item {
        white-space: nowrap;
        padding: 14px 18px;
        border-left: none;
        border-bottom: 3px solid transparent;
    }
    .proj-sidebar__item--active {
        border-left: none;
        border-bottom-color: var(--color-primary);
        background: transparent;
    }
    .proj-main { padding: 20px 16px; }
    .proj-kanban { grid-template-columns: 1fr; }
    .proj-detail__head-actions { width: 100%; }
}

/* =========================================================
   48. ADMIN — Seletor de clientes (cards)
========================================================= */
.cliente-selector__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.cliente-select-card {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 14px;
    padding: 20px 22px;
    text-decoration: none;
    color: var(--color-ink);
    transition: var(--transition);
    display: block;
    box-shadow: 0 1px 3px rgba(13, 27, 42, 0.04);
}
.cliente-select-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(13, 27, 42, 0.1);
    border-color: var(--color-primary);
    color: var(--color-ink);
}
.cliente-select-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.cliente-select-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 800;
}
.cliente-select-card__login {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-light);
    color: var(--color-muted);
}
.cliente-select-card__login--recent { background: rgba(16,185,129,0.14); color: #047857; }
.cliente-select-card__login--warn { background: rgba(245,158,11,0.14); color: #92400e; }
.cliente-select-card__login--stale { background: rgba(239,68,68,0.14); color: #b91c1c; }
.cliente-select-card__login--never { background: var(--color-light); color: var(--color-muted); font-style: italic; }
.cliente-select-card__name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 2px;
    color: var(--color-ink);
}
.cliente-select-card__empresa {
    font-size: 0.86rem;
    color: var(--color-ink-soft);
    margin: 0 0 2px;
    font-weight: 500;
}
.cliente-select-card__email {
    font-size: 0.8rem;
    color: var(--color-muted);
    margin: 0 0 14px;
    font-family: var(--font-mono);
}
.cliente-select-card__stats {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--color-line);
    margin-bottom: 12px;
}
.cliente-select-card__stats span {
    font-size: 0.82rem;
    color: var(--color-muted);
}
.cliente-select-card__stats strong {
    color: var(--color-ink);
    font-size: 1rem;
    font-weight: 700;
}
.cliente-select-card__cta {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s;
}
.cliente-select-card:hover .cliente-select-card__cta {
    gap: 10px;
}

/* =========================================================
   49. TAREFAS AVULSAS — Cards
========================================================= */
.nv-tarefas-lista { display: flex; flex-direction: column; gap: 10px; }
.nv-tarefa-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 16px 18px;
    transition: var(--transition);
}
.nv-tarefa-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: 0 4px 12px rgba(13, 27, 42, 0.05);
}
.nv-tarefa-card.is-done { opacity: 0.65; }
.nv-tarefa-card.is-done .nv-tarefa-card__title { text-decoration: line-through; }
.nv-tarefa-card__check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--color-line);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 2px;
}
.nv-tarefa-card__body { flex: 1; min-width: 0; }
.nv-tarefa-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-ink);
    line-height: 1.3;
}
.nv-tarefa-card__desc {
    font-size: 0.86rem;
    color: var(--color-ink-soft);
    margin-top: 4px;
    line-height: 1.5;
}
.nv-tarefa-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}
.nv-tarefa-pill {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}
.nv-tarefa-pill--prio {
    background: var(--color-light);
    color: var(--color-ink-soft);
}
.nv-tarefa-prazo {
    font-size: 0.78rem;
    color: var(--color-muted);
}
.nv-tarefa-prazo.is-late {
    color: #dc2626;
    font-weight: 700;
}
.nv-tarefa-projeto {
    font-size: 0.76rem;
    color: var(--color-muted);
    font-style: italic;
}

/* Toolbar e controles admin de tarefas */
.nv-tarefas-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}
.nv-tarefa-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.86rem;
    text-decoration: none;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(227,114,32,0.25);
}
.nv-tarefa-new-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(227,114,32,0.35);
    color: white;
}
.nv-tarefa-card__edit {
    align-self: flex-start;
    text-decoration: none;
    font-size: 1.05rem;
    opacity: 0.5;
    transition: opacity 0.15s;
    padding: 4px;
}
.nv-tarefa-card__edit:hover { opacity: 1; }

/* =========================================================
   50. AVATAR do cliente (logo redonda ou inicial)
========================================================= */
.nv-cliente-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    font-family: var(--font-display);
    font-weight: 800;
    flex-shrink: 0;
    border: 3px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.nv-cliente-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nv-cliente-avatar--initial {
    background: linear-gradient(135deg, #e37220 0%, #b85a18 100%);
}

/* Header welcome com avatar */
.cliente-area__welcome--with-avatar {
    display: flex;
    align-items: center;
    gap: 20px;
}
.cliente-area__welcome-text { min-width: 0; }

@media (max-width: 600px) {
    .cliente-area__welcome--with-avatar { gap: 14px; }
    .cliente-area__welcome--with-avatar .nv-cliente-avatar {
        width: 56px !important;
        height: 56px !important;
        font-size: 24px !important;
    }
}

/* =========================================================
   51. SOLUÇÕES COMPACTAS (cards menores em grid)
========================================================= */
.solucoes-grid .solucao-card__top {
    padding: 18px 20px 0;
    gap: 12px;
}
.solucoes-grid .solucao-card__icon {
    width: 40px;
    height: 40px;
}
.solucoes-grid .solucao-card__icon span { font-size: 1.2rem; }
.solucoes-grid .solucao-card__title { font-size: 1.05rem; }
.solucoes-grid .solucao-card__tipo { font-size: 0.64rem; }
.solucoes-grid .solucao-card__status {
    padding: 4px 10px;
    font-size: 0.68rem;
}

/* Esconde descrição nos cards compactos (fica só no histórico/detalhe) */
.solucoes-grid .solucao-card__desc {
    display: none;
}

/* Senha mais compacta */
.solucoes-grid .solucao-card__senha {
    margin: 14px 20px 0;
    padding: 10px 12px;
    gap: 8px;
}
.solucoes-grid .solucao-card__senha-label { font-size: 0.6rem; }
.solucoes-grid .solucao-card__senha-val { font-size: 0.8rem; }
.solucoes-grid .solucao-card__senha-copy {
    padding: 5px 12px;
    font-size: 0.72rem;
}

/* Footer empilhado e compacto */
.solucoes-grid .solucao-card__footer {
    padding: 14px 20px 18px;
    margin-top: 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
.solucoes-grid .solucao-card__actions {
    width: 100%;
    justify-content: space-between;
}
.solucoes-grid .solucao-card__btn--primary {
    flex: 1;
    justify-content: center;
    padding: 10px 16px;
    font-size: 0.84rem;
}
.solucoes-grid .solucao-card__btn--ghost {
    padding: 10px 12px;
    font-size: 0.8rem;
}
.solucoes-grid .solucao-card__meta {
    align-items: flex-start;
    text-align: left;
    font-size: 0.72rem;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}
.solucoes-grid .solucao-card__meta-url {
    font-size: 0.7rem;
}

/* =========================================================
   52. ANOTAÇÕES — Timeline com editor TinyMCE
========================================================= */
.nv-anot-wrap { max-width: 900px; }
.nv-anot-editor {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(13,27,42,0.04);
}
.nv-anot-editor::before {
    content: '';
    display: block;
    margin: -20px -24px 16px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    border-radius: 12px 12px 0 0;
}
.nv-anot-editor__head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px; flex-wrap: wrap;
}
.nv-anot-editor__head strong {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--color-ink);
}
.nv-anot-editor__hint {
    color: var(--color-muted); font-size: 0.82rem;
}
.nv-anot-editor__actions {
    display: flex; gap: 10px; margin-top: 14px; justify-content: flex-end;
}
.nv-anot-save {
    padding: 10px 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white; font-weight: 700; border: none; cursor: pointer;
    font-family: inherit; font-size: 0.88rem;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(227,114,32,0.3);
}
.nv-anot-save:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(227,114,32,0.4); }
.nv-anot-save:disabled { opacity: 0.6; cursor: not-allowed; }
.nv-anot-cancel {
    padding: 10px 18px;
    border-radius: 8px;
    background: white;
    color: var(--color-ink-soft);
    border: 1px solid var(--color-line);
    cursor: pointer; font-weight: 600; font-family: inherit; font-size: 0.86rem;
}
.nv-anot-cancel:hover { background: var(--color-light); }
.nv-anot-error {
    color: #dc2626;
    background: #fef2f2;
    border-left: 3px solid #ef4444;
    padding: 10px 14px;
    border-radius: 6px;
    margin: 12px 0 0;
    font-size: 0.88rem;
}

/* Lista cronológica */
.nv-anot-lista { display: flex; flex-direction: column; gap: 14px; }
.nv-anot-card {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 18px 22px;
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
}
.nv-anot-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: 0 4px 12px rgba(13,27,42,0.05);
}
.nv-anot-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.nv-anot-card__author {
    display: flex; align-items: center; gap: 10px;
}
.nv-anot-card__avatar {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: white; font-weight: 700; font-size: 0.95rem;
    flex-shrink: 0;
}
.nv-anot-card__avatar.is-admin {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
.nv-anot-card__avatar.is-client {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
}
.nv-anot-card__author strong {
    display: block; font-size: 0.94rem; color: var(--color-ink);
    font-family: var(--font-display); font-weight: 700;
}
.nv-anot-card__role {
    display: inline-block;
    font-size: 0.66rem;
    background: rgba(227,114,32,0.12);
    color: #b85a18;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    vertical-align: middle;
}
.nv-anot-card__author time {
    display: block;
    font-size: 0.76rem;
    color: var(--color-muted);
    margin-top: 2px;
}
.nv-anot-card__proj {
    font-size: 0.78rem;
    color: var(--color-muted);
    background: var(--color-light);
    padding: 4px 10px;
    border-radius: 999px;
}
.nv-anot-card__body {
    color: var(--color-ink-soft);
    line-height: 1.65;
    font-size: 0.94rem;
}
.nv-anot-card__body p { margin: 0 0 10px; }
.nv-anot-card__body p:last-child { margin-bottom: 0; }
.nv-anot-card__body ul, .nv-anot-card__body ol { margin: 0 0 10px; padding-left: 24px; }
.nv-anot-card__body img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }
.nv-anot-card__body blockquote {
    border-left: 3px solid var(--color-primary-light);
    margin: 10px 0;
    padding: 4px 14px;
    background: var(--color-light);
    color: var(--color-muted);
    font-style: italic;
}
.nv-anot-card__body a {
    color: var(--color-primary);
    text-decoration: underline;
}
.nv-anot-card__body table {
    border-collapse: collapse;
    margin: 10px 0;
}
.nv-anot-card__body table td, .nv-anot-card__body table th {
    border: 1px solid var(--color-line);
    padding: 6px 10px;
}
.nv-anot-card__actions {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--color-light);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.nv-anot-card__actions button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-muted);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: inherit;
}
.nv-anot-card__actions button:hover { color: var(--color-ink); background: var(--color-light); }
.nv-anot-card .nv-anot-delete:hover { color: #dc2626; background: #fef2f2; }

.nv-anot-empty {
    background: white;
    border: 2px dashed var(--color-line);
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
    color: var(--color-muted);
}

/* =========================================================
   53. ANOTAÇÕES v2 — Timeline com busca, filtros e stats
========================================================= */
/* Mini-stats no topo */
.nv-anot-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.nv-anot-stat {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 12px 16px;
    text-align: center;
    transition: transform 0.15s;
}
.nv-anot-stat:hover { transform: translateY(-2px); }
.nv-anot-stat__num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
    letter-spacing: -0.02em;
}
.nv-anot-stat__num--blue { color: #3b82f6; }
.nv-anot-stat__num--orange { color: var(--color-primary); }
.nv-anot-stat__lbl {
    font-size: 0.7rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-top: 4px;
}

/* Toolbar: busca + filtros */
.nv-anot-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
    background: white;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--color-line);
    flex-wrap: wrap;
}
.nv-anot-search {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    font-size: 0.92rem;
    background: var(--color-light);
    font-family: inherit;
    color: var(--color-ink);
}
.nv-anot-search:focus {
    outline: none;
    background: white;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(227,114,32,0.12);
}
.nv-anot-filter {
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--color-light);
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: all 0.15s;
}
.nv-anot-filter:hover { background: var(--color-line); color: var(--color-ink); }
.nv-anot-filter.is-active {
    background: var(--color-primary);
    color: white;
}

/* Editor colapsável (sobrescreve seção 52) */
.nv-anot-editor {
    /* mantém faixa laranja via ::before já definido na seção 52 */
}
.nv-anot-editor__head {
    padding: 14px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.nv-anot-editor__head:hover { background: rgba(0,0,0,0.02); }
.nv-anot-editor__head strong {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-ink);
    display: flex; align-items: center; gap: 8px;
    font-weight: 700;
}
.nv-anot-editor__toggle {
    color: var(--color-muted);
    transition: transform 0.2s;
    font-size: 1.2rem;
    line-height: 1;
}
.nv-anot-editor.is-open .nv-anot-editor__toggle { transform: rotate(180deg); }
.nv-anot-editor__body {
    padding: 0 22px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
}
.nv-anot-editor.is-open .nv-anot-editor__body {
    max-height: 1200px;
    padding: 0 22px 20px;
}

/* Sobrescreve hint antigo */
.nv-anot-editor__hint { display: none; }

/* Grupos por data */
.nv-anot-grupo { margin-bottom: 24px; }
.nv-anot-grupo__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.nv-anot-grupo__label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-line);
}

/* Cards mais compactos */
.nv-anot-card {
    padding: 14px 18px;
    margin-bottom: 8px;
}
.nv-anot-card__head {
    margin-bottom: 10px;
}
.nv-anot-card__avatar {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
}
.nv-anot-card__author strong {
    font-size: 0.9rem;
}
.nv-anot-card__author time {
    font-size: 0.74rem;
}

/* Ações aparecem só no hover */
.nv-anot-card__actions {
    opacity: 0;
    transition: opacity 0.15s;
}
.nv-anot-card:hover .nv-anot-card__actions {
    opacity: 1;
}
@media (max-width: 600px) {
    /* No mobile, sempre visíveis */
    .nv-anot-card__actions { opacity: 1; }
    .nv-anot-stats { grid-template-columns: 1fr 1fr 1fr; }
    .nv-anot-stat__num { font-size: 1.2rem; }
    .nv-anot-toolbar { padding: 8px 10px; }
    .nv-anot-search { min-width: 100%; }
}

/* =========================================================
   54. FINANCEIRO DO PROJETO — KPIs + Timeline de fases
========================================================= */

/* KPIs */
.fin-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}
.fin-kpi {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 16px 20px;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
}
.fin-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13,27,42,0.06);
}
.fin-kpi::before {
    content: '';
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 3px;
    background: var(--color-primary);
    border-radius: 0 2px 2px 0;
}
.fin-kpi--green::before { background: #10b981; }
.fin-kpi--yellow::before { background: #f59e0b; }
.fin-kpi--blue::before { background: #3b82f6; }
.fin-kpi__lbl {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-muted);
    margin-bottom: 6px;
}
.fin-kpi__num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.fin-kpi--green .fin-kpi__num { color: #10b981; }
.fin-kpi--yellow .fin-kpi__num { color: #f59e0b; }
.fin-kpi--blue .fin-kpi__num { color: #3b82f6; }
.fin-kpi__sub {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-top: 4px;
}

/* Timeline de fases */
.fin-fases {
    position: relative;
    padding-left: 30px;
}
.fin-fases::before {
    content: '';
    position: absolute;
    left: 14px; top: 30px; bottom: 30px;
    width: 2px;
    background: var(--color-line);
}
.fin-fase {
    position: relative;
    margin-bottom: 20px;
}
.fin-fase__dot {
    position: absolute;
    left: -30px; top: 18px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--color-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--color-muted);
    z-index: 2;
}
.fin-fase.is-done .fin-fase__dot {
    background: #10b981;
    border-color: #10b981;
    color: white;
}
.fin-fase.is-active .fin-fase__dot {
    background: white;
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(227,114,32,0.18);
}
.fin-fase.is-overdue .fin-fase__dot {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
}

/* Card de fase */
.fin-card {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 18px 22px;
    transition: all 0.15s;
}
.fin-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: 0 4px 12px rgba(13,27,42,0.05);
}
.fin-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.fin-card__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    gap: 8px;
}
.fin-card__title-sub {
    font-size: 0.8rem;
    color: var(--color-muted);
    font-weight: 500;
    margin-top: 2px;
}
.fin-card__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
}

/* Status pills */
.fin-status {
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.fin-status--pago { background: rgba(16,185,129,0.14); color: #047857; }
.fin-status--pendente { background: rgba(245,158,11,0.14); color: #92400e; }
.fin-status--atrasado { background: rgba(239,68,68,0.14); color: #b91c1c; }
.fin-status--aguardando { background: rgba(59,130,246,0.14); color: #1e40af; }
.fin-status--aprovado { background: rgba(16,185,129,0.14); color: #047857; }
.fin-status--ativa { background: rgba(139,92,246,0.14); color: #6b21a8; }
.fin-status--nao-aderiu { background: rgba(107,114,128,0.14); color: #374151; }

/* Info itens */
.fin-info__lbl {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
}
.fin-info__val {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-ink);
    margin-top: 2px;
}
.fin-info__val--big {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}
.fin-info__val--green { color: #10b981; }
.fin-info__val--orange { color: var(--color-primary); }
.fin-info__val--red { color: #ef4444; }

/* Anexo NFe / comprovante */
.fin-anexo {
    background: var(--color-light);
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--color-line);
}
.fin-anexo__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(227,114,32,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.fin-anexo__info { flex: 1; min-width: 0; }
.fin-anexo__name {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fin-anexo__meta {
    font-size: 0.74rem;
    color: var(--color-muted);
}
.fin-anexo__btn {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: none;
    padding: 6px 12px;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    white-space: nowrap;
    transition: all 0.15s;
}
.fin-anexo__btn:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* Barra de validação 30 dias */
.validacao-bar {
    margin-top: 12px;
    background: var(--color-light);
    border-radius: var(--radius-pill);
    height: 6px;
    overflow: hidden;
}
.validacao-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: var(--radius-pill);
    transition: width 0.4s ease;
}
.validacao-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-top: 6px;
}

/* Lista de pagamentos da recorrência */
.recorrencia-lista {
    margin-top: 14px;
}
.recorrencia-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--color-light);
    border-radius: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.recorrencia-item__mes {
    font-weight: 700;
    color: var(--color-ink);
    min-width: 100px;
    font-size: 0.86rem;
}
.recorrencia-item__valor {
    font-weight: 700;
    color: var(--color-ink);
    font-size: 0.95rem;
}
.recorrencia-item__status {
    margin-left: auto;
}
.recorrencia-item__anexo {
    color: var(--color-primary);
    font-size: 0.8rem;
    text-decoration: none;
    font-weight: 600;
}
.recorrencia-item__anexo:hover {
    text-decoration: underline;
}

/* Ações (botão aprovar) */
.fin-actions {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-light);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.fin-btn {
    padding: 10px 18px;
    border-radius: 8px;
    background: white;
    color: var(--color-ink-soft);
    border: 1px solid var(--color-line);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.86rem;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}
.fin-btn:hover {
    background: var(--color-light);
}
.fin-btn--primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(227,114,32,0.3);
}
.fin-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(227,114,32,0.4);
    color: white;
}
.fin-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .fin-card__head { flex-direction: column; align-items: flex-start; }
    .recorrencia-item__status { margin-left: 0; width: 100%; }
}

/* =========================================================
   55. FINANCEIRO GERAL — Inadimplência, Projeção, Export
========================================================= */

/* Inadimplência */
.nv-fin-inad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.nv-fin-inad-card {
    background: white;
    border: 1px solid #fecaca;
    border-left: 4px solid #ef4444;
    border-radius: 10px;
    padding: 14px 18px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.nv-fin-inad-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(239,68,68,0.12);
}
.nv-fin-inad-card--media { border-left-color: #f59e0b; border-color: #fde68a; }
.nv-fin-inad-card--baixa { border-left-color: #6b7280; border-color: #e5e7eb; }
.nv-fin-inad-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}
.nv-fin-inad-card__head strong {
    display: block;
    font-size: 0.96rem;
    color: #111827;
    font-family: var(--font-display);
}
.nv-fin-inad-card__empresa {
    font-size: 0.78rem;
    color: #6b7280;
    display: block;
    margin-top: 2px;
}
.nv-fin-inad-card__dias {
    background: #fef2f2;
    color: #b91c1c;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}
.nv-fin-inad-card--media .nv-fin-inad-card__dias {
    background: #fffbeb;
    color: #92400e;
}
.nv-fin-inad-card--baixa .nv-fin-inad-card__dias {
    background: #f3f4f6;
    color: #374151;
}
.nv-fin-inad-card__total {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 900;
    color: #b91c1c;
    letter-spacing: -0.01em;
    margin-bottom: 2px;
}
.nv-fin-inad-card--media .nv-fin-inad-card__total { color: #92400e; }
.nv-fin-inad-card--baixa .nv-fin-inad-card__total { color: #374151; }
.nv-fin-inad-card__count {
    font-size: 0.78rem;
    color: #6b7280;
    margin-bottom: 10px;
}
.nv-fin-inad-card__contact {
    display: flex;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
}
.nv-fin-inad-card__contact a {
    flex: 1;
    text-align: center;
    padding: 6px 10px;
    background: #f9fafb;
    color: #374151;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.15s;
}
.nv-fin-inad-card__contact a:hover {
    background: #e37220;
    color: white;
}

/* Projeção */
.nv-fin-proj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.nv-fin-proj-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    border-top: 3px solid #10b981;
    transition: transform 0.15s, box-shadow 0.15s;
}
.nv-fin-proj-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16,185,129,0.1);
}
.nv-fin-proj-card.is-empty {
    border-top-color: #e5e7eb;
    opacity: 0.6;
}
.nv-fin-proj-card__label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin-bottom: 6px;
}
.nv-fin-proj-card__total {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 900;
    color: #10b981;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}
.nv-fin-proj-card.is-empty .nv-fin-proj-card__total { color: #9ca3af; }
.nv-fin-proj-card__breakdown {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}
.nv-fin-proj-tag {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    background: #f3f4f6;
    color: #6b7280;
    display: inline-block;
}
.nv-fin-proj-tag--saldo { background: rgba(245,158,11,0.12); color: #92400e; }
.nv-fin-proj-tag--rec   { background: rgba(139,92,246,0.12); color: #6b21a8; }
.nv-fin-proj-card__det {
    margin-top: 8px;
    border-top: 1px solid #f3f4f6;
    padding-top: 8px;
}
.nv-fin-proj-card__det summary {
    cursor: pointer;
    font-size: 0.76rem;
    color: #6b7280;
    user-select: none;
}
.nv-fin-proj-card__det summary:hover { color: #e37220; }
.nv-fin-proj-card__det ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    font-size: 0.78rem;
    color: #374151;
}
.nv-fin-proj-card__det li {
    padding: 4px 0;
    border-bottom: 1px dashed #f3f4f6;
}
.nv-fin-proj-card__det li:last-child { border-bottom: none; }

/* Exportação */
.nv-fin-export {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 24px;
    text-align: center;
}
.nv-fin-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(16,185,129,0.3);
    transition: all 0.15s;
}
.nv-fin-export-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16,185,129,0.4);
}
.nv-fin-export__hint {
    font-size: 0.82rem;
    color: #6b7280;
    margin-top: 10px;
    margin-bottom: 0;
}

/* =========================================================
   56. TRÁFEGO PAGO — Empty state + Navigation
========================================================= */

/* Empty state (módulo ativado mas não configurado) */
.nv-tp-empty {
    background: white;
    border: 2px dashed var(--color-line);
    border-radius: 16px;
    padding: 40px 32px;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.nv-tp-empty__icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 12px;
}
.nv-tp-empty h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--color-ink);
}
.nv-tp-empty > p {
    color: var(--color-muted);
    font-size: 0.94rem;
    max-width: 480px;
    margin: 0 auto 24px;
    line-height: 1.6;
}
.nv-tp-empty__steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    margin: 0 auto 24px;
    max-width: 480px;
}
.nv-tp-empty__step {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--color-light);
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 12px 16px;
    transition: all 0.15s;
}
.nv-tp-empty__step.is-done {
    background: rgba(16,185,129,0.06);
    border-color: rgba(16,185,129,0.3);
}
.nv-tp-empty__step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--color-line);
    color: var(--color-muted);
    font-weight: 700;
    font-size: 0.86rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nv-tp-empty__step.is-done .nv-tp-empty__step-num {
    background: #10b981;
    border-color: #10b981;
    color: white;
}
.nv-tp-empty__step strong {
    display: block;
    font-size: 0.94rem;
    color: var(--color-ink);
}
.nv-tp-empty__step p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--color-muted);
}
.nv-tp-empty__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
}

.nv-tp-btn {
    padding: 10px 18px;
    background: white;
    color: var(--color-ink-soft);
    border: 1px solid var(--color-line);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.86rem;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nv-tp-btn:hover {
    background: var(--color-light);
    border-color: var(--color-primary-light);
    color: var(--color-ink);
}
.nv-tp-btn--primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(227,114,32,0.3);
}
.nv-tp-btn--primary:hover {
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(227,114,32,0.4);
}

/* Navegação principal do módulo (após configurado) */
.nv-tp-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.nv-tp-nav__item {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 20px 22px;
    text-decoration: none;
    color: var(--color-ink);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.nv-tp-nav__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(13,27,42,0.08);
    border-color: var(--color-primary);
    color: var(--color-ink);
}
.nv-tp-nav__item::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 3px; height: 100%;
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-light));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.2s;
}
.nv-tp-nav__item:hover::before { transform: scaleY(1); }
.nv-tp-nav__icon {
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 4px;
}
.nv-tp-nav__item strong {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-ink);
}
.nv-tp-nav__hint {
    font-size: 0.78rem;
    color: var(--color-muted);
}

/* =========================================================
   57. TRÁFEGO PAGO — Páginas (forms + listas)
========================================================= */
.nv-tp-page { background:#f5f7fa; min-height:calc(100vh - 200px); }
.nv-tp-container { max-width:1080px; margin:0 auto; padding:0 24px; position:relative; z-index:2; }

.nv-tp-header {
    background:linear-gradient(135deg, #0d1b2a 0%, #1e3a5f 60%, #2d5a8e 100%);
    color:white; padding:32px 0; position:relative; overflow:hidden;
}
.nv-tp-header::before {
    content:''; position:absolute; top:-40%; right:-5%;
    width:500px; height:500px;
    background:radial-gradient(circle, rgba(227,114,32,0.22) 0%, transparent 60%);
    border-radius:50%;
}
.nv-tp-header__crumbs {
    display:flex; align-items:center; gap:8px;
    font-size:0.82rem; color:rgba(255,255,255,0.65); margin-bottom:10px; flex-wrap:wrap;
}
.nv-tp-header__crumbs a { color:rgba(255,255,255,0.85); text-decoration:none; }
.nv-tp-header__crumbs a:hover { color:white; }
.nv-tp-header__title {
    font-family:var(--font-display);
    font-size:2.1rem; font-weight:900; letter-spacing:-0.02em; margin:0;
    color:#ffffff;
    text-shadow:0 2px 8px rgba(0,0,0,0.3);
    line-height:1.15;
}
.nv-tp-header__sub {
    color:rgba(255,255,255,0.85);
    margin-top:8px;
    font-size:1rem;
    font-weight:400;
}
.nv-tp-header__sub strong { color:#ffffff; font-weight:700; }

.nv-tp-wrap { padding:32px 0 80px; }
body.nv-area-cliente--in-project .nv-tp-wrap { padding:24px 0 60px; }
body.nv-area-cliente--in-project .nv-form-wrap { padding:24px 0 60px; }

/* Toolbar */
.nv-tp-toolbar {
    display:flex; justify-content:flex-end; margin-bottom:20px; gap:10px; flex-wrap:wrap;
}

/* Forms */
.nv-tp-form {
    background:white; border:1px solid var(--color-line); border-radius:16px;
    box-shadow:0 1px 3px rgba(13,27,42,0.04), 0 8px 24px rgba(13,27,42,0.06);
    overflow:hidden;
}
.nv-tp-form::before {
    content:''; display:block; height:3px;
    background:linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
}
.nv-tp-form-section { padding:24px 28px; border-bottom:1px solid var(--color-light); }
.nv-tp-form-section:last-of-type { border-bottom:none; }
.nv-tp-form-title {
    font-size:0.76rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.12em; color:var(--color-muted); margin-bottom:16px;
}
.nv-tp-field { margin-bottom:14px; min-width:0; }
.nv-tp-field:last-child { margin-bottom:0; }
.nv-tp-field label {
    display:block; font-weight:600; font-size:0.86rem;
    color:var(--color-ink-soft); margin-bottom:5px;
}
.nv-tp-field input[type=text], .nv-tp-field input[type=number],
.nv-tp-field input[type=date], .nv-tp-field input[type=month],
.nv-tp-field select, .nv-tp-field textarea {
    width:100%; padding:10px 12px; border:1px solid var(--color-line);
    border-radius:7px; font-size:0.9rem; font-family:inherit;
    background:white; color:var(--color-ink); box-sizing:border-box;
    transition:border-color 0.15s, box-shadow 0.15s;
}
.nv-tp-field input:focus, .nv-tp-field select:focus, .nv-tp-field textarea:focus {
    outline:none; border-color:var(--color-primary);
    box-shadow:0 0 0 3px rgba(227,114,32,0.12);
}
.nv-tp-field textarea { resize:vertical; min-height:80px; }
.nv-tp-hint { display:block; font-size:0.78rem; color:var(--color-muted); margin-top:4px; }
.nv-tp-hint a { color:var(--color-primary); }
.nv-tp-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.nv-tp-form-footer {
    padding:20px 28px; background:var(--color-light);
    display:flex; justify-content:flex-end; align-items:center;
    gap:10px; flex-wrap:wrap;
}
.nv-tp-error {
    color:#dc2626; padding:12px 28px; margin:0;
    background:#fef2f2; border-top:1px solid #fecaca;
    font-size:0.88rem;
}

/* Pills */
.nv-tp-pill-select { display:flex; gap:8px; flex-wrap:wrap; }
.nv-tp-pill-opt {
    padding:8px 16px; border:1.5px solid var(--color-line); border-radius:999px;
    background:white; font-size:0.84rem; font-weight:600; cursor:pointer;
    color:var(--color-muted); user-select:none; transition:all 0.15s;
}
.nv-tp-pill-opt:hover { border-color:var(--color-primary-light); }
.nv-tp-pill-opt.is-selected { background:var(--color-primary); border-color:var(--color-primary); color:white; }
.nv-tp-pill-opt[data-color=green].is-selected { background:#10b981; border-color:#10b981; }
.nv-tp-pill-opt[data-color=yellow].is-selected { background:#f59e0b; border-color:#f59e0b; }
.nv-tp-pill-opt[data-color=red].is-selected { background:#ef4444; border-color:#ef4444; }

.nv-tp-pill {
    display:inline-block; padding:4px 10px; border-radius:999px;
    font-size:0.74rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.04em; white-space:nowrap;
}
.nv-tp-pill--green { background:rgba(16,185,129,0.14); color:#047857; }
.nv-tp-pill--gray  { background:rgba(107,114,128,0.14); color:#374151; }

/* Plataforma cards (radio grid) */
.nv-tp-plat-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px;
}
.nv-tp-plat-card {
    background:white; border:2px solid var(--color-line); border-radius:10px;
    padding:12px 10px; cursor:pointer; transition:all 0.15s;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    position:relative; text-align:center;
}
.nv-tp-plat-card:hover { border-color:var(--color-primary-light); }
.nv-tp-plat-card.is-selected {
    border-color:var(--color-primary);
    background:rgba(227,114,32,0.04);
    box-shadow:0 4px 10px rgba(227,114,32,0.15);
}
.nv-tp-plat-card input { position:absolute; opacity:0; }
.nv-tp-plat-card__icon { font-size:1.5rem; line-height:1; }
.nv-tp-plat-card__lbl { font-size:0.78rem; font-weight:600; color:var(--color-ink); }

.nv-tp-plat-badge {
    display:inline-block; padding:3px 10px; border-radius:6px;
    font-size:0.72rem; font-weight:700; margin-bottom:6px;
}

/* Lista — vazio */
.nv-tp-empty-list {
    background:white; border:2px dashed var(--color-line); border-radius:14px;
    padding:48px 24px; text-align:center;
}
.nv-tp-empty-list p { color:var(--color-muted); margin-bottom:18px; }

/* Cards grid (metas/campanhas) */
.nv-tp-cards-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px;
}
.nv-tp-card {
    background:white; border:1px solid var(--color-line);
    border-radius:12px; padding:18px 20px; transition:all 0.15s;
}
.nv-tp-card:hover { border-color:var(--color-primary-light); box-shadow:0 4px 12px rgba(13,27,42,0.06); }
.nv-tp-card__head {
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:10px; margin-bottom:12px; flex-wrap:wrap;
}
.nv-tp-card__lbl {
    font-size:0.7rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.08em; color:var(--color-muted); display:block;
}
.nv-tp-card__title {
    font-family:var(--font-display); font-size:1.05rem; font-weight:800;
    color:var(--color-ink); margin:2px 0 0;
}
.nv-tp-card__actions {
    margin-top:14px; padding-top:12px; border-top:1px solid var(--color-light);
    display:flex; gap:10px; justify-content:flex-end;
}
.nv-tp-card__actions a, .nv-tp-card__actions button {
    color:var(--color-muted); font-size:0.82rem; font-weight:600;
    text-decoration:none; background:none; border:none; cursor:pointer;
    padding:4px 8px; border-radius:4px; font-family:inherit;
}
.nv-tp-card__actions a:hover { background:var(--color-light); color:var(--color-ink); }
.nv-tp-card__actions .nv-tp-del:hover { background:#fef2f2; color:#dc2626; }

/* Meta card */
.nv-tp-meta-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px;
}
.nv-tp-meta-item {
    background:var(--color-light); padding:10px 12px; border-radius:8px;
}
.nv-tp-meta-item span {
    display:block; font-size:0.7rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.06em; color:var(--color-muted);
}
.nv-tp-meta-item strong {
    display:block; font-family:var(--font-display); font-size:1.15rem;
    font-weight:800; color:var(--color-ink); margin-top:2px;
}

/* Camp info */
.nv-tp-camp-info {
    display:flex; flex-direction:column; gap:6px; font-size:0.86rem;
    color:var(--color-ink-soft);
}
.nv-tp-camp-info span { color:var(--color-muted); margin-right:4px; }
.nv-tp-camp-info strong { color:var(--color-ink); font-weight:600; }

/* Tabela (produtos) */
.nv-tp-table-wrap {
    background:white; border:1px solid var(--color-line);
    border-radius:12px; overflow:hidden; overflow-x:auto;
    box-shadow:0 1px 3px rgba(13,27,42,0.04);
}
.nv-tp-table { width:100%; border-collapse:collapse; font-size:0.88rem; }
.nv-tp-table thead {
    background:linear-gradient(135deg, #0d1b2a 0%, #1e3a5f 100%);
    color:white;
}
.nv-tp-table thead th {
    text-align:left; padding:14px 16px;
    font-weight:700;
    font-size:0.74rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:white;
    border-bottom:2px solid rgba(255,255,255,0.1);
    white-space:nowrap;
}
.nv-tp-table th:first-child { border-radius:0; }
.nv-tp-table td {
    padding:14px 16px;
    border-bottom:1px solid #f1f5f9;
    color:var(--color-ink);
    vertical-align:middle;
}
.nv-tp-table tbody tr { transition:background 0.15s; }
.nv-tp-table tbody tr:hover { background:rgba(227,114,32,0.04); }
.nv-tp-table tbody tr:last-child td { border-bottom:none; }
.nv-tp-table tr.is-inactive { opacity:0.55; }
.nv-tp-table__actions {
    text-align:right; white-space:nowrap;
}
.nv-tp-table__actions a, .nv-tp-table__actions button {
    display:inline-block; padding:4px 8px; margin-left:4px;
    text-decoration:none; color:var(--color-muted); background:none;
    border:none; cursor:pointer; font-size:1rem; border-radius:4px;
    font-family:inherit;
}
.nv-tp-table__actions a:hover { background:var(--color-light); color:var(--color-ink); }
.nv-tp-table__actions .nv-tp-del:hover { background:#fef2f2; color:#dc2626; }

/* Botões */
.nv-tp-btn {
    padding:10px 18px; background:white; color:var(--color-ink-soft);
    border:1px solid var(--color-line); border-radius:8px;
    text-decoration:none; font-weight:600; font-size:0.88rem;
    cursor:pointer; font-family:inherit; transition:all 0.15s;
    display:inline-flex; align-items:center; gap:6px;
}
.nv-tp-btn:hover { background:var(--color-light); color:var(--color-ink); }
.nv-tp-btn--primary {
    background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color:white; border:none;
    box-shadow:0 2px 8px rgba(227,114,32,0.3);
}
.nv-tp-btn--primary:hover {
    color:white; transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(227,114,32,0.4);
}

@media (max-width:600px) {
    .nv-tp-row { grid-template-columns:1fr; }
    .nv-tp-meta-grid { grid-template-columns:1fr; }
    .nv-tp-form-footer { flex-direction:column-reverse; align-items:stretch; }
    .nv-tp-btn { justify-content:center; }
}

/* =========================================================
   58. TRÁFEGO PAGO — KPIs + Filtros + Ações timeline
========================================================= */

/* KPIs */
.nv-tp-kpis {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:12px; margin-bottom:20px;
}
.nv-tp-kpi {
    background:white; border:1px solid var(--color-line); border-radius:10px;
    padding:14px 18px; border-left:3px solid var(--color-primary);
    transition:transform 0.15s, box-shadow 0.15s;
}
.nv-tp-kpi:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(13,27,42,0.06); }
.nv-tp-kpi--green  { border-left-color:#10b981; }
.nv-tp-kpi--orange { border-left-color:var(--color-primary); }
.nv-tp-kpi__lbl {
    font-size:0.7rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.08em; color:var(--color-muted); margin-bottom:6px;
}
.nv-tp-kpi__num {
    font-family:var(--font-display); font-size:1.4rem; font-weight:900;
    color:var(--color-ink); letter-spacing:-0.01em; line-height:1.1;
}
.nv-tp-kpi--green .nv-tp-kpi__num  { color:#10b981; }
.nv-tp-kpi--orange .nv-tp-kpi__num { color:var(--color-primary); }
.nv-tp-kpi__sub {
    font-size:0.74rem; color:var(--color-muted); margin-top:4px;
}

/* Filtros */
.nv-tp-filters {
    background:white; border:1px solid var(--color-line); border-radius:10px;
    padding:14px 18px; margin-bottom:18px;
    display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;
}
.nv-tp-filters__field { display:flex; flex-direction:column; gap:4px; min-width:140px; }
.nv-tp-filters__field label {
    font-size:0.74rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.06em; color:var(--color-muted);
}
.nv-tp-filters__field select,
.nv-tp-filters__field input {
    padding:8px 12px; border:1px solid var(--color-line); border-radius:6px;
    font-size:0.86rem; font-family:inherit; background:#f9fafb;
}
.nv-tp-filters__field select:focus,
.nv-tp-filters__field input:focus { outline:none; background:white; border-color:var(--color-primary); }
.nv-tp-filters__actions { display:flex; gap:6px; }

/* Ações — timeline */
.nv-tp-acoes-timeline {
    display:flex; flex-direction:column; gap:14px;
}
.nv-tp-acao-card {
    display:flex; gap:14px;
    background:white; border:1px solid var(--color-line); border-radius:12px;
    padding:18px 22px; transition:all 0.15s;
}
.nv-tp-acao-card:hover { border-color:var(--color-primary-light); box-shadow:0 4px 12px rgba(13,27,42,0.05); }
.nv-tp-acao-card[data-status="concluida"] { background:linear-gradient(90deg, rgba(16,185,129,0.04), transparent 30%); }
.nv-tp-acao-card[data-status="cancelada"] { opacity:0.65; }
.nv-tp-acao-card__icon {
    flex-shrink:0; width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem;
}
.nv-tp-acao-card__body { flex:1; min-width:0; }
.nv-tp-acao-card__head {
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:12px; flex-wrap:wrap; margin-bottom:8px;
}
.nv-tp-acao-card__tipo {
    font-size:0.72rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.08em; display:block; margin-bottom:2px;
}
.nv-tp-acao-card__title {
    font-family:var(--font-display); font-size:1.05rem; font-weight:800;
    margin:0; color:var(--color-ink); line-height:1.3;
}
.nv-tp-acao-card__meta {
    display:flex; gap:14px; flex-wrap:wrap;
    font-size:0.8rem; color:var(--color-muted); margin-bottom:10px;
}
.nv-tp-acao-card__desc {
    font-size:0.9rem; color:var(--color-ink-soft); line-height:1.55;
    margin-bottom:10px;
}
.nv-tp-acao-card__desc p { margin:0 0 6px; }
.nv-tp-acao-card__result {
    background:rgba(16,185,129,0.06); border-left:3px solid #10b981;
    padding:10px 14px; border-radius:0 8px 8px 0; margin-bottom:10px;
}
.nv-tp-acao-card__result strong {
    display:block; font-size:0.78rem; color:#047857; margin-bottom:2px;
}
.nv-tp-acao-card__result p {
    margin:0; font-size:0.88rem; color:var(--color-ink-soft);
}
.nv-tp-acao-card__actions {
    padding-top:8px; border-top:1px solid var(--color-light);
    display:flex; gap:10px; justify-content:flex-end;
}
.nv-tp-acao-card__actions a, .nv-tp-acao-card__actions button {
    color:var(--color-muted); font-size:0.82rem; font-weight:600;
    text-decoration:none; background:none; border:none; cursor:pointer;
    padding:4px 8px; border-radius:4px; font-family:inherit;
}
.nv-tp-acao-card__actions a:hover { background:var(--color-light); color:var(--color-ink); }
.nv-tp-acao-card__actions .nv-tp-del:hover { background:#fef2f2; color:#dc2626; }

/* Pills extras */
.nv-tp-pill-opt[data-color=blue].is-selected { background:#3b82f6; border-color:#3b82f6; }
.nv-tp-pill-opt[data-color=gray].is-selected { background:#6b7280; border-color:#6b7280; }

@media (max-width:600px) {
    .nv-tp-acao-card { flex-direction:column; }
    .nv-tp-acao-card__icon { width:36px; height:36px; }
    .nv-tp-filters { flex-direction:column; align-items:stretch; }
    .nv-tp-filters__field { min-width:0; }
}

/* =========================================================
   59. TRÁFEGO PAGO — Dashboard
========================================================= */

.nv-tp-dash-title {
    font-family:var(--font-display);
    font-size:1.15rem; font-weight:800;
    margin:36px 0 16px;
    color:var(--color-ink);
    display:flex; align-items:center; gap:10px;
    padding-bottom:12px;
    border-bottom:2px solid var(--color-line);
    position:relative;
}
.nv-tp-dash-title::after {
    content:''; position:absolute; left:0; bottom:-2px;
    width:60px; height:2px;
    background:var(--color-primary);
}
.nv-tp-dash-title:first-of-type { margin-top:28px; }

/* KPIs grandes do dashboard */
.nv-tp-dash-kpis {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:12px; margin-bottom:8px;
}
/* Variante quando tem MUITOS kpis (5-6+) — força mais colunas pra caber em 1 linha */
.nv-tp-dash-kpis--6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.nv-tp-dash-kpis--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* Em telas ≤ 1280px volta pra auto-fit */
@media (max-width: 1280px) {
    .nv-tp-dash-kpis--6,
    .nv-tp-dash-kpis--5 {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }
}
.nv-tp-dash-kpis--small {
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:10px;
}
.nv-tp-dash-kpi {
    background:white; border:1px solid var(--color-line);
    border-radius:12px; padding:16px 16px 14px;
    position:relative; overflow:hidden;
    transition:all 0.2s;
    box-shadow:0 1px 3px rgba(13,27,42,0.04);
    min-width: 0; /* permite encolher dentro do grid */
}
.nv-tp-dash-kpi::before {
    content:''; position:absolute; left:0; top:0; bottom:0;
    width:4px; background:var(--color-primary);
}
.nv-tp-dash-kpi--green::before  { background:#10b981; }
.nv-tp-dash-kpi--yellow::before { background:#f59e0b; }
.nv-tp-dash-kpi--red::before    { background:#ef4444; }
.nv-tp-dash-kpi--gray::before   { background:#9ca3af; }

.nv-tp-dash-kpi:hover {
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(13,27,42,0.08);
    border-color:rgba(227,114,32,0.3);
}

.nv-tp-dash-kpi__head {
    display:flex; justify-content:space-between; align-items:center;
    gap:8px; margin-bottom:10px; flex-wrap:wrap;
}
.nv-tp-dash-kpi__lbl {
    font-size:0.7rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.1em; color:var(--color-muted);
}
.nv-tp-dash-kpi__pill {
    font-size:0.68rem; font-weight:700;
    padding:3px 9px; border-radius:999px;
    background:rgba(107,114,128,0.12); color:#374151;
    white-space:nowrap;
}
.nv-tp-dash-kpi--green .nv-tp-dash-kpi__pill  { background:rgba(16,185,129,0.16); color:#047857; }
.nv-tp-dash-kpi--yellow .nv-tp-dash-kpi__pill { background:rgba(245,158,11,0.16); color:#92400e; }
.nv-tp-dash-kpi--red .nv-tp-dash-kpi__pill    { background:rgba(239,68,68,0.16); color:#b91c1c; }

.nv-tp-dash-kpi__num {
    font-family:var(--font-display);
    font-size:1.55rem; font-weight:900;
    color:var(--color-ink); letter-spacing:-0.02em;
    line-height:1.1; margin-bottom:6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Em telas grandes (≥1280) com até 5-6 cards, número pode ficar um pouco maior */
@media (min-width: 1281px) {
    .nv-tp-dash-kpis--6 .nv-tp-dash-kpi__num { font-size: 1.4rem; }
    .nv-tp-dash-kpis--5 .nv-tp-dash-kpi__num { font-size: 1.5rem; }
}
.nv-tp-dash-kpi--green .nv-tp-dash-kpi__num  { color:#047857; }
.nv-tp-dash-kpi--yellow .nv-tp-dash-kpi__num { color:#b45309; }
.nv-tp-dash-kpi--red .nv-tp-dash-kpi__num    { color:#b91c1c; }
.nv-tp-dash-kpis--small .nv-tp-dash-kpi { padding:14px 16px; }
.nv-tp-dash-kpis--small .nv-tp-dash-kpi__num { font-size:1.35rem; }
.nv-tp-dash-kpi__sub {
    font-size:0.78rem; color:var(--color-muted); line-height:1.4;
}

/* Charts */
.nv-tp-charts {
    display:grid;
    grid-template-columns:1fr;
    gap:18px; margin-bottom:8px;
}
.nv-tp-chart-box {
    background:white; border:1px solid var(--color-line);
    border-radius:12px; padding:20px 24px;
    box-shadow:0 1px 3px rgba(13,27,42,0.04);
}
.nv-tp-chart-box h3 {
    font-family:var(--font-display);
    font-size:0.96rem; font-weight:700;
    margin:0 0 14px; color:var(--color-ink);
}
/* Wrapper de canvas DENTRO de chart-box pra evitar crescimento infinito */
.nv-tp-chart-box canvas {
    max-height: 320px !important;
    width: 100% !important;
}
@media (max-width: 780px) {
    .nv-tp-chart-box { padding: 14px 16px; }
    .nv-tp-chart-box canvas { max-height: 240px !important; }
}

@media (min-width:1024px) {
    .nv-tp-charts {
        grid-template-columns:1fr 1fr;
    }
    .nv-tp-chart-box:first-child {
        grid-column:1 / -1;
    }
}

/* =========================================================
   60. TRÁFEGO PAGO — Lançamento em LOTE (tabela mensal)
========================================================= */

.nv-tp-lote-info {
    background:linear-gradient(135deg, rgba(227,114,32,0.06), rgba(59,130,246,0.06));
    border:1px solid var(--color-line);
    border-radius:10px;
    padding:14px 18px;
    margin-bottom:16px;
    display:flex; justify-content:space-between; align-items:center;
    gap:14px; flex-wrap:wrap;
    font-size:0.9rem; color:var(--color-ink);
}
.nv-tp-lote-info strong { color:var(--color-primary); font-weight:700; }

/* Tabela do lote */
.nv-tp-lote-tablewrap {
    background:white;
    border:1px solid var(--color-line);
    border-radius:12px;
    overflow:hidden; overflow-x:auto;
    box-shadow:0 1px 3px rgba(13,27,42,0.04);
}
.nv-tp-lote-table {
    width:100%; border-collapse:collapse;
    font-size:0.88rem;
    min-width:780px;
}
.nv-tp-lote-table thead {
    background:linear-gradient(135deg, #0d1b2a 0%, #1e3a5f 100%);
    position:sticky; top:0; z-index:5;
}
.nv-tp-lote-table thead th {
    text-align:left; padding:12px 14px;
    color:white;
    font-weight:700; font-size:0.74rem;
    letter-spacing:0.06em; text-transform:uppercase;
    border-bottom:2px solid rgba(255,255,255,0.1);
    white-space:nowrap;
}
.nv-tp-lote-table__num { text-align:right !important; }
.nv-tp-lote-table tbody tr {
    border-bottom:1px solid #f1f5f9;
    transition:background 0.12s;
}
.nv-tp-lote-table tbody tr:hover { background:rgba(227,114,32,0.04); }
.nv-tp-lote-table tbody tr.has-data {
    background:rgba(227,114,32,0.06);
}
.nv-tp-lote-table tbody tr.has-data:hover { background:rgba(227,114,32,0.1); }
.nv-tp-lote-table tbody tr.is-weekend td.nv-tp-lote-table__date {
    color:#6b7280;
}

.nv-tp-lote-table tbody td {
    padding:6px 8px;
    vertical-align:middle;
}
.nv-tp-lote-table__date {
    padding:10px 14px !important;
    white-space:nowrap;
    width:90px;
}
.nv-tp-lote-table__date strong {
    display:block;
    font-size:0.96rem;
    color:var(--color-ink);
    font-weight:700;
    line-height:1.1;
}
.nv-tp-lote-table__date span {
    display:block;
    font-size:0.72rem;
    color:var(--color-muted);
    text-transform:uppercase;
    letter-spacing:0.06em;
    margin-top:2px;
}
.nv-tp-lote-table__camp {
    padding:10px 14px !important;
    font-size:0.84rem;
    color:var(--color-ink-soft);
    max-width:240px;
}

.nv-tp-lote-table input[type=number] {
    width:100%;
    min-width:90px;
    padding:7px 10px;
    border:1px solid #e5e7eb;
    border-radius:6px;
    font-size:0.86rem;
    font-family:inherit;
    background:white;
    text-align:right;
    transition:all 0.12s;
}
.nv-tp-lote-table input[type=number]:focus {
    outline:none;
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px rgba(227,114,32,0.15);
    background:#fffdfb;
}
.nv-tp-lote-table input[type=number]::-webkit-outer-spin-button,
.nv-tp-lote-table input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance:none; margin:0;
}
.nv-tp-lote-table input[type=number] { -moz-appearance:textfield; }

/* Totais */
.nv-tp-lote-table tfoot {
    background:#f9fafb;
    border-top:2px solid var(--color-line);
}
.nv-tp-lote-table__totals td {
    padding:12px 14px !important;
    font-weight:700;
    color:var(--color-ink);
    font-size:0.9rem;
    text-align:right;
}
.nv-tp-lote-table__totals td:first-child {
    text-align:left;
    color:var(--color-muted);
    text-transform:uppercase;
    font-size:0.74rem;
    letter-spacing:0.08em;
}

/* Action bar */
.nv-tp-lote-actions {
    margin-top:18px;
    background:white;
    border:1px solid var(--color-line);
    border-radius:12px;
    padding:16px 22px;
    display:flex; justify-content:space-between; align-items:center;
    gap:14px; flex-wrap:wrap;
}
.nv-tp-lote-actions__hint {
    margin:0; font-size:0.86rem; color:var(--color-muted);
    flex:1; min-width:260px;
    transition:color 0.2s;
}

@media (max-width:780px) {
    .nv-tp-lote-actions { flex-direction:column; align-items:stretch; }
    .nv-tp-lote-actions__hint { text-align:center; }
}

/* =========================================================
   61. NAVEGAÇÃO DA ÁREA DO CLIENTE
   App header + Project nav + esconde header/footer do tema
========================================================= */

/* Esconde o header padrão do tema dentro da área do cliente */
body.nv-area-cliente > .site-header,
body.nv-area-cliente > header.site-header,
body.nv-area-cliente .site-header:not(.nv-app-header),
body.nv-area-cliente .site-topbar,
body.nv-area-cliente .top-bar,
body.nv-area-cliente .topbar,
body.nv-area-cliente > .header,
body.nv-area-cliente .nexum-header,
body.nv-area-cliente .nv-header,
body.nv-area-cliente .nv-topbar,
body.nv-area-cliente .nexum-topbar {
    display: none !important;
}
body.nv-area-cliente .site-footer {
    display: none !important;
}
body.nv-area-cliente .whatsapp-float {
    display: none !important;
}

body.nv-area-cliente {
    background: #f5f7fa;
    padding-top: 0 !important;
}

/* ====== APP HEADER (substitui o header do site) ====== */
.nv-app-header {
    background: linear-gradient(135deg, #0d1b2a 0%, #1e3a5f 100%);
    color: white;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(13, 27, 42, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nv-app-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.nv-app-header__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: white;
    transition: opacity 0.15s;
}
.nv-app-header__brand:hover { opacity: 0.85; color: white; }
.nv-app-header__brand img {
    max-height: 28px;
    width: auto;
    display: block;
}
.nv-app-header__brand-name {
    color: white;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.nv-app-header__brand-tag {
    background: rgba(227, 114, 32, 0.18);
    color: #f5a05c;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid rgba(227, 114, 32, 0.3);
}

/* Contexto: visualizando como cliente X */
.nv-app-header__context {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fde68a;
    padding: 5px 10px 5px 12px;
    border-radius: 8px;
    font-size: 0.84rem;
}
.nv-app-header__context-lbl {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.7);
}
.nv-app-header__context strong { color: white; font-weight: 700; }
.nv-app-header__context-exit {
    background: rgba(255,255,255,0.1);
    color: white;
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    font-size: 0.7rem;
    transition: all 0.15s;
}
.nv-app-header__context-exit:hover { background: rgba(239, 68, 68, 0.4); color: white; }

.nv-app-header__nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.nv-app-header__nav-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nv-app-header__nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Menu do usuário (dropdown) */
.nv-app-header__user {
    position: relative;
    margin-left: 8px;
}
.nv-app-header__user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: white;
    padding: 5px 12px 5px 5px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    transition: all 0.15s;
}
.nv-app-header__user-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}
.nv-app-header__avatar {
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #e37220 0%, #b85a18 100%);
    color: white;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(227, 114, 32, 0.4);
}
.nv-app-header__user-name { color: white; }
.nv-app-header__user-btn svg { opacity: 0.6; }

.nv-app-header__user-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    background: white;
    color: #0d1b2a;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(13, 27, 42, 0.18), 0 4px 8px rgba(13, 27, 42, 0.08);
    padding: 8px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: all 0.18s;
    border: 1px solid #e5e7eb;
}
.nv-app-header__user-menu.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
.nv-app-header__user-info {
    padding: 12px 12px 14px;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 6px;
}
.nv-app-header__user-info strong {
    display: block;
    font-size: 0.94rem;
    color: #0d1b2a;
    margin-bottom: 2px;
}
.nv-app-header__user-info span {
    font-size: 0.78rem;
    color: #6b7280;
}
.nv-app-header__user-menu a {
    display: block;
    padding: 9px 12px;
    color: #374151;
    text-decoration: none;
    font-size: 0.88rem;
    border-radius: 6px;
    transition: all 0.12s;
}
.nv-app-header__user-menu a:hover {
    background: #f5f7fa;
    color: #0d1b2a;
}
.nv-app-header__user-menu hr {
    border: none;
    border-top: 1px solid #f3f4f6;
    margin: 6px 0;
}
.nv-app-header__logout { color: #ef4444 !important; }
.nv-app-header__logout:hover { background: #fef2f2 !important; }

/* ====== PROJECT NAV (sub-navegação do projeto) ====== */
.nv-proj-nav {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 52px;
    z-index: 999;
    box-shadow: 0 1px 0 rgba(13, 27, 42, 0.02);
}
.nv-proj-nav__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 48px;
    flex-wrap: wrap;
}
.nv-proj-nav__title {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #0d1b2a;
    padding: 6px 0;
    border-right: 1px solid #e5e7eb;
    padding-right: 18px;
    transition: opacity 0.15s;
}
.nv-proj-nav__title:hover { opacity: 0.7; color: #0d1b2a; }
.nv-proj-nav__title-icon {
    font-size: 1.1rem;
    line-height: 1;
}
.nv-proj-nav__title-text strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0d1b2a;
    line-height: 1.15;
}
.nv-proj-nav__title-text small {
    display: block;
    font-size: 0.7rem;
    color: #6b7280;
    margin-top: 1px;
}

.nv-proj-nav__tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nv-proj-nav__tabs::-webkit-scrollbar { display: none; }

.nv-proj-nav__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    color: #6b7280;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 600;
    border-radius: 7px;
    transition: all 0.15s;
    white-space: nowrap;
    border: 1px solid transparent;
}
.nv-proj-nav__tab:hover {
    background: #f5f7fa;
    color: #0d1b2a;
}
.nv-proj-nav__tab.is-active {
    background: rgba(227, 114, 32, 0.1);
    color: #e37220;
    border-color: rgba(227, 114, 32, 0.2);
}
.nv-proj-nav__tab-icon { font-size: 0.9rem; line-height: 1; }

/* Sub-tabs (do Tráfego Pago) */
.nv-proj-nav__subtabs {
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nv-proj-nav__subtabs::-webkit-scrollbar { display: none; }

.nv-proj-nav__subtab {
    padding: 8px 10px;
    color: #6b7280;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: -1px;
}
.nv-proj-nav__subtab:hover {
    color: #0d1b2a;
}
.nv-proj-nav__subtab.is-active {
    color: #e37220;
    border-bottom-color: #e37220;
}

/* ====== FOOTER da área ====== */
body.nv-area-cliente { padding-bottom: 0; }

/* Mobile */
@media (max-width: 900px) {
    .nv-app-header__inner { gap: 12px; padding: 0 14px; }
    .nv-app-header__brand-tag { display: none; }
    .nv-app-header__nav-link { display: none; }
    .nv-app-header__user-name { display: none; }
    .nv-app-header__user-btn { padding: 4px 6px; }
    .nv-app-header__context { font-size: 0.78rem; }
    .nv-app-header__context-lbl { display: none; }

    .nv-proj-nav__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px 14px 0;
    }
    .nv-proj-nav__title {
        border-right: none;
        border-bottom: 1px solid #f3f4f6;
        padding-right: 0;
        padding-bottom: 12px;
        margin-bottom: 4px;
    }
    .nv-proj-nav__tabs { padding-bottom: 8px; }
    .nv-proj-nav__subtabs { padding: 0 14px; }
}

/* Ajuste pro top sticky do project-nav considerar header móvel */
@media (max-width: 900px) {
    .nv-proj-nav { top: 52px; }
}

/* Esconde os breadcrumbs antigos quando temos project-nav */
body.nv-area-cliente--in-project .nv-tp-header__crumbs,
body.nv-area-cliente--in-project .nv-form-header__crumbs {
    display: none;
}

/* Reduz padding do header das páginas internas já que temos contexto na project-nav */
body.nv-area-cliente--in-project .nv-tp-header,
body.nv-area-cliente--in-project .nv-form-header {
    background: white;
    color: var(--color-ink);
    padding: 16px 0 14px;
    border-bottom: 1px solid var(--color-line);
    box-shadow: none;
}
body.nv-area-cliente--in-project .nv-tp-header::before,
body.nv-area-cliente--in-project .nv-form-header::before {
    display: none;
}
body.nv-area-cliente--in-project .nv-tp-header__title,
body.nv-area-cliente--in-project .nv-form-header__title {
    color: var(--color-ink);
    font-size: 1.45rem;
    text-shadow: none;
    line-height: 1.2;
}
body.nv-area-cliente--in-project .nv-tp-header__sub,
body.nv-area-cliente--in-project .nv-form-header__sub {
    color: var(--color-muted);
    font-size: 0.88rem;
    margin-top: 4px;
}
body.nv-area-cliente--in-project .nv-tp-header__sub strong,
body.nv-area-cliente--in-project .nv-form-header__sub strong {
    color: var(--color-ink);
}

/* =========================================================
   62. TRÁFEGO PAGO — Métricas: Toggle de visualização + Grupos
========================================================= */

/* Barra de toggle de visualização (Agrupado / Lista) */
.nv-tp-view-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.nv-tp-view-toggle {
    display: inline-flex;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
    box-shadow: 0 1px 2px rgba(13, 27, 42, 0.04);
}
.nv-tp-view-toggle__btn {
    padding: 8px 16px;
    color: #6b7280;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 600;
    border-radius: 7px;
    transition: all 0.15s;
    white-space: nowrap;
}
.nv-tp-view-toggle__btn:hover {
    color: #0d1b2a;
    background: #f5f7fa;
}
.nv-tp-view-toggle__btn.is-active {
    background: linear-gradient(135deg, #e37220 0%, #b85a18 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(227, 114, 32, 0.3);
}
.nv-tp-view-bar__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Grupos (accordion) */
.nv-tp-grupos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nv-tp-grupo {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(13, 27, 42, 0.04);
}
.nv-tp-grupo:hover {
    border-color: rgba(227, 114, 32, 0.3);
    box-shadow: 0 4px 14px rgba(13, 27, 42, 0.08);
}
.nv-tp-grupo[open] {
    border-color: rgba(227, 114, 32, 0.4);
    box-shadow: 0 4px 14px rgba(13, 27, 42, 0.06);
}

.nv-tp-grupo__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.15s;
}
.nv-tp-grupo__header::-webkit-details-marker { display: none; }
.nv-tp-grupo__header:hover { background: #fafbfc; }

.nv-tp-grupo__caret {
    color: var(--color-muted);
    font-size: 0.75rem;
    transition: transform 0.2s;
    flex-shrink: 0;
    width: 14px;
}
.nv-tp-grupo[open] .nv-tp-grupo__caret {
    transform: rotate(90deg);
    color: var(--color-primary);
}

.nv-tp-grupo__title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nv-tp-grupo__camp {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}
.nv-tp-grupo__mes {
    font-size: 0.78rem;
    color: var(--color-muted);
    font-weight: 500;
}

.nv-tp-grupo__totals {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}
.nv-tp-grupo__total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
    min-width: 80px;
}
.nv-tp-grupo__total span {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
}
.nv-tp-grupo__total strong {
    font-family: var(--font-display);
    font-size: 0.96rem;
    font-weight: 800;
    color: var(--color-ink);
    margin-top: 2px;
}
.nv-tp-grupo__total--highlight strong {
    color: var(--color-primary);
    font-size: 1.05rem;
}

.nv-tp-grupo__body {
    padding: 0 20px 18px;
    border-top: 1px solid var(--color-light);
    margin-top: -1px;
}

.nv-tp-grupo__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    padding: 14px 0;
    margin-bottom: 12px;
    border-bottom: 1px dashed var(--color-line);
}
.nv-tp-grupo__stats > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nv-tp-grupo__stats span {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
}
.nv-tp-grupo__stats strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-ink);
}

/* Tabela interna (dentro do grupo) — visual mais leve */
.nv-tp-table--inner thead {
    background: #f9fafb;
}
.nv-tp-table--inner thead th {
    color: var(--color-muted);
    font-size: 0.7rem;
    padding: 8px 12px;
}
.nv-tp-table--inner tbody td {
    padding: 10px 12px;
    font-size: 0.86rem;
}
.nv-tp-table--inner tbody tr.is-weekend {
    background: rgba(107, 114, 128, 0.025);
}
.nv-tp-table--inner tbody tr.is-weekend td:first-child {
    color: var(--color-muted);
}

/* Responsivo */
@media (max-width: 780px) {
    .nv-tp-grupo__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .nv-tp-grupo__caret {
        position: absolute;
        right: 20px;
        top: 22px;
    }
    .nv-tp-grupo__totals {
        width: 100%;
        justify-content: space-between;
        padding-top: 8px;
        border-top: 1px dashed var(--color-line);
        gap: 8px;
    }
    .nv-tp-grupo__total {
        align-items: flex-start;
        min-width: 0;
    }
    .nv-tp-view-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .nv-tp-view-toggle { justify-content: center; }
    .nv-tp-view-bar__actions { justify-content: stretch; }
    .nv-tp-view-bar__actions .nv-tp-btn { flex: 1; justify-content: center; }
}

/* =========================================================
   63. TRÁFEGO PAGO — Seletor de Canal (lançamento em lote)
========================================================= */

.nv-tp-canal-select {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    padding: 32px;
    margin: 8px auto 0;
    max-width: 720px;
    box-shadow: 0 4px 14px rgba(13, 27, 42, 0.06);
}
.nv-tp-canal-select__head {
    text-align: center;
    margin-bottom: 24px;
}
.nv-tp-canal-select__head h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-ink);
    margin: 0 0 6px;
}
.nv-tp-canal-select__head p {
    color: var(--color-muted);
    font-size: 0.94rem;
    margin: 0;
}

.nv-tp-canal-select__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.nv-tp-canal-card {
    --canal-color: #6b7280;
    background: white;
    border: 2px solid var(--color-line);
    border-radius: 12px;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.nv-tp-canal-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--canal-color);
}
.nv-tp-canal-card:hover {
    transform: translateY(-3px);
    border-color: var(--canal-color);
    box-shadow: 0 8px 20px rgba(13, 27, 42, 0.1);
    color: var(--color-ink);
}
.nv-tp-canal-card__icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}
.nv-tp-canal-card__info {
    flex: 1;
    min-width: 0;
}
.nv-tp-canal-card__info strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-ink);
    line-height: 1.2;
    margin-bottom: 2px;
}
.nv-tp-canal-card__info span {
    font-size: 0.78rem;
    color: var(--color-muted);
}
.nv-tp-canal-card__arrow {
    color: var(--canal-color);
    font-size: 1.2rem;
    font-weight: 700;
    transition: transform 0.2s;
}
.nv-tp-canal-card:hover .nv-tp-canal-card__arrow {
    transform: translateX(4px);
}

/* Tag do canal selecionado (breadcrumb) */
.nv-tp-canal-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: 6px 6px 6px 14px;
    margin-bottom: 14px;
    font-size: 0.86rem;
}
.nv-tp-canal-tag__lbl {
    color: var(--color-muted);
    font-weight: 600;
}
.nv-tp-canal-tag__pill {
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.82rem;
}
.nv-tp-canal-tag__change {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(227, 114, 32, 0.08);
    transition: background 0.15s;
}
.nv-tp-canal-tag__change:hover {
    background: rgba(227, 114, 32, 0.16);
    color: var(--color-primary);
}

/* =========================================================
   64. DASHBOARD — Filtro de canal + Blocos por canal
========================================================= */

.nv-tp-dash-perf-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 32px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-line);
    position: relative;
}
.nv-tp-dash-perf-head::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 60px; height: 2px;
    background: var(--color-primary);
}

/* Pills de filtro de canal */
.nv-tp-canal-filter {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.nv-tp-canal-filter__pill {
    --pill-color: #6b7280;
    padding: 6px 12px;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.15s;
    white-space: nowrap;
}
.nv-tp-canal-filter__pill:hover {
    border-color: var(--pill-color);
    color: var(--color-ink);
}
.nv-tp-canal-filter__pill.is-active {
    background: var(--pill-color);
    color: white;
    border-color: var(--pill-color);
}
.nv-tp-canal-filter__pill.is-active:hover {
    color: white;
    opacity: 0.9;
}

/* Blocos accordion por canal */
.nv-tp-canais-perf {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.nv-tp-canal-bloco {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(13, 27, 42, 0.04);
    transition: all 0.2s;
}
.nv-tp-canal-bloco:hover {
    box-shadow: 0 4px 14px rgba(13, 27, 42, 0.06);
}
.nv-tp-canal-bloco[open] {
    border-color: rgba(13, 27, 42, 0.15);
}

.nv-tp-canal-bloco__head {
    --bloco-color: #6b7280;
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 16px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
    border-left: 4px solid var(--bloco-color);
    transition: background 0.15s;
}
.nv-tp-canal-bloco__head::-webkit-details-marker { display: none; }
.nv-tp-canal-bloco__head:hover { background: #fafbfc; }

.nv-tp-canal-bloco__title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.nv-tp-canal-bloco__caret {
    color: var(--color-muted);
    font-size: 0.7rem;
    transition: transform 0.2s;
}
.nv-tp-canal-bloco:not([open]) .nv-tp-canal-bloco__caret {
    transform: rotate(-90deg);
}
.nv-tp-canal-bloco__icon {
    font-size: 1.6rem;
    line-height: 1;
}
.nv-tp-canal-bloco__title strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-ink);
    line-height: 1.15;
}
.nv-tp-canal-bloco__title small {
    display: block;
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-top: 1px;
}

.nv-tp-canal-bloco__totals {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    align-items: center;
}
.nv-tp-canal-bloco__totals > div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    min-width: 76px;
}
.nv-tp-canal-bloco__totals span {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
}
.nv-tp-canal-bloco__totals strong {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--color-ink);
    margin-top: 2px;
}
.nv-tp-canal-bloco__roas strong {
    color: var(--color-primary) !important;
    font-size: 1.1rem !important;
}

.nv-tp-canal-bloco__body {
    padding: 0 22px 18px;
    border-top: 1px solid var(--color-light);
    background: #fafbfc;
}
.nv-tp-canal-bloco__body .nv-tp-table-wrap {
    border: none;
    background: transparent;
    box-shadow: none;
    margin-top: 14px;
}

@media (max-width: 780px) {
    .nv-tp-canal-bloco__head { flex-direction: column; align-items: stretch; }
    .nv-tp-canal-bloco__totals {
        justify-content: space-between;
        padding-top: 12px;
        border-top: 1px dashed var(--color-line);
        gap: 8px;
    }
    .nv-tp-canal-bloco__totals > div { align-items: flex-start; min-width: 0; }
}

/* =========================================================
   65. TRÁFEGO PAGO — Importadores (CSV/XLSX)
========================================================= */

.nv-tp-import-info {
    background: linear-gradient(135deg, rgba(59,130,246,0.05), rgba(227,114,32,0.03));
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 18px;
}
.nv-tp-import-info h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-ink);
    margin: 0 0 10px;
}
.nv-tp-import-info ol {
    margin: 0;
    padding-left: 22px;
    font-size: 0.88rem;
    color: var(--color-ink-soft);
    line-height: 1.65;
}
.nv-tp-import-info ol li { margin-bottom: 6px; }
.nv-tp-import-info ol ul { margin-top: 4px; padding-left: 18px; }
.nv-tp-import-info a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.nv-tp-import-info a:hover { text-decoration: underline; }
.nv-tp-import-info strong { color: var(--color-ink); }
.nv-tp-import-info table th {
    color: var(--color-muted);
    font-weight: 700;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.nv-tp-import-info table td { border-bottom: 1px solid #f3f4f6; }
.nv-tp-import-info table tr:last-child td { border-bottom: none; }

/* Upload file styling */
.nv-tp-file {
    width: 100%;
    padding: 14px 16px;
    border: 2px dashed var(--color-line);
    border-radius: 10px;
    background: #fafbfc;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    font-size: 0.9rem;
}
.nv-tp-file:hover {
    border-color: var(--color-primary);
    background: rgba(227,114,32,0.04);
}
.nv-tp-file:focus { outline: none; border-color: var(--color-primary); }

/* Result block */
.nv-tp-import-result {
    margin-top: 18px;
    padding: 0;
}
.nv-tp-import-result__ok {
    background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(16,185,129,0.02));
    border: 2px solid rgba(16,185,129,0.3);
    border-radius: 12px;
    padding: 22px 26px;
}
.nv-tp-import-result__ok h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: #047857;
    margin: 0 0 14px;
    font-weight: 800;
}
.nv-tp-import-result__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.nv-tp-import-result__grid > div {
    background: white;
    border: 1px solid #d1fae5;
    border-radius: 8px;
    padding: 12px 14px;
}
.nv-tp-import-result__grid span {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    margin-bottom: 4px;
}
.nv-tp-import-result__grid strong {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-ink);
}
.nv-tp-import-result__errs {
    background: white;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 12px;
    color: #991b1b;
    font-size: 0.84rem;
}
.nv-tp-import-result__errs ul {
    margin: 6px 0 0;
    padding-left: 22px;
}

/* SKU performance — tags */
.nv-tp-sku-tag {
    display: inline-block;
    background: #0d1b2a;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.nv-tp-sku-nome {
    color: var(--color-ink-soft);
    font-weight: 500;
    font-size: 0.92rem;
}

/* =========================================================
   66. DESEMPENHO ADS — accordion com thumb do produto
========================================================= */

.nv-tp-grupo__thumb {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    object-fit: cover;
    background: #f5f7fa;
    border: 1px solid var(--color-line);
    flex-shrink: 0;
}
.nv-tp-grupo__thumb--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--color-muted);
}

/* Quando tem thumb, dá um espacinho a mais entre o caret e o thumb */
.nv-tp-grupo--ads .nv-tp-grupo__header {
    gap: 12px;
}

@media (max-width: 780px) {
    .nv-tp-grupo__thumb { width: 36px; height: 36px; }
}

/* =========================================================
   67. PRODUTOS — Toolbar, Tabs, Thumbs, Estoque, Progress bar
========================================================= */

/* Toolbar */
.nv-tp-prod-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}
.nv-tp-btn--ghost {
    background: transparent;
    color: var(--color-muted);
    border: 1px dashed var(--color-line);
    font-size: 0.82rem;
}
.nv-tp-btn--ghost:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: rgba(227, 114, 32, 0.04);
}

/* Tabs */
.nv-tp-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--color-line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nv-tp-tabs::-webkit-scrollbar { display: none; }
.nv-tp-tab {
    padding: 10px 16px;
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.nv-tp-tab:hover {
    color: var(--color-ink);
    background: rgba(13, 27, 42, 0.02);
}
.nv-tp-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.nv-tp-tab--red.is-active { color: #dc2626; border-bottom-color: #dc2626; }
.nv-tp-tab--yellow.is-active { color: #b45309; border-bottom-color: #f59e0b; }
.nv-tp-tab__count {
    background: rgba(107, 114, 128, 0.12);
    color: var(--color-muted);
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
}
.nv-tp-tab.is-active .nv-tp-tab__count {
    background: rgba(227, 114, 32, 0.16);
    color: var(--color-primary);
}
.nv-tp-tab--red.is-active .nv-tp-tab__count { background: rgba(220, 38, 38, 0.16); color: #dc2626; }
.nv-tp-tab--yellow.is-active .nv-tp-tab__count { background: rgba(245, 158, 11, 0.16); color: #b45309; }

/* Thumb */
.nv-tp-prod-thumb {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-line);
    background: #f5f7fa;
}
.nv-tp-prod-thumb--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    font-size: 1.4rem;
}

/* Tabela de produtos */
.nv-tp-prod-table tbody tr { transition: background 0.12s; }
.nv-tp-prod-table tbody tr.is-inactive {
    opacity: 0.55;
    background: #fafbfc;
}

/* Estoque indicators */
.nv-tp-estoque-ok {
    color: var(--color-ink);
    font-weight: 600;
}
.nv-tp-estoque-baixo {
    color: #b45309;
    font-weight: 700;
    background: rgba(245, 158, 11, 0.12);
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 0.86rem;
}
.nv-tp-estoque-zero {
    color: #dc2626;
    font-weight: 700;
    background: rgba(239, 68, 68, 0.12);
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 0.86rem;
}

/* Paginação */
.nv-tp-paginacao {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--color-line);
}
.nv-tp-paginacao__info {
    color: var(--color-muted);
    font-size: 0.86rem;
}

/* Progress bar (importação SSE) */
.nv-tp-progress {
    margin-top: 18px;
    background: white;
    border: 2px solid rgba(227, 114, 32, 0.3);
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 4px 14px rgba(13, 27, 42, 0.06);
}
.nv-tp-progress__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.nv-tp-progress__lbl {
    font-weight: 700;
    color: var(--color-ink);
    font-size: 0.96rem;
}
.nv-tp-progress__pct {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--color-primary);
}
.nv-tp-progress__bar {
    height: 12px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
}
.nv-tp-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, #e37220 0%, #f5a05c 100%);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 999px;
    background-size: 30px 30px;
    background-image: linear-gradient(45deg,
        rgba(255,255,255,0.18) 25%, transparent 25%,
        transparent 50%, rgba(255,255,255,0.18) 50%,
        rgba(255,255,255,0.18) 75%, transparent 75%, transparent);
    animation: nv-tp-progress-stripes 1s linear infinite;
}
@keyframes nv-tp-progress-stripes {
    from { background-position: 0 0; }
    to { background-position: 30px 0; }
}
.nv-tp-progress__stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.84rem;
    color: var(--color-muted);
}
.nv-tp-progress__stats strong { color: var(--color-ink); font-weight: 700; }

/* =========================================================
   68. DESEMPENHO UNIFICADO & ANÁLISE INDIVIDUAL
========================================================= */

/* Tabs com scroll horizontal */
.nv-tp-tabs--scroll { padding-bottom: 2px; }

/* Mensagem contextual da aba */
.nv-tp-tab-msg {
    background: #f0f9ff;
    border-left: 4px solid #3b82f6;
    padding: 10px 14px;
    font-size: 0.86rem;
    color: #1e40af;
    margin: 14px 0 18px;
    border-radius: 0 8px 8px 0;
}
.nv-tp-tab-msg strong { color: #1e3a8a; }

/* Curva ABC — pills */
.nv-tp-abc {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
}
.nv-tp-abc--a {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}
.nv-tp-abc--b {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}
.nv-tp-abc--c {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}
.nv-tp-abc--z {
    background: #e5e7eb;
    color: #6b7280;
}

/* Botão pequeno */
.nv-tp-btn--sm {
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Tabela compacta de desempenho */
.nv-tp-prod-table--desempenho td,
.nv-tp-prod-table--desempenho th {
    font-size: 0.85rem;
    padding: 8px 10px;
}

/* === Análise individual === */
.nv-tp-analise-prod {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 22px;
    box-shadow: 0 4px 14px rgba(13, 27, 42, 0.04);
}
/* Imagem: SEMPRE 90x90 quadrado, indiferente ao contexto */
.nv-tp-analise-prod__img,
img.nv-tp-analise-prod__img,
.nv-tp-analise-prod > img,
.nv-tp-analise-prod > span.nv-tp-analise-prod__img {
    width: 90px !important;
    height: 90px !important;
    max-width: 90px !important;
    max-height: 90px !important;
    min-width: 90px !important;
    min-height: 90px !important;
    object-fit: contain !important;
    object-position: center;
    border-radius: 10px;
    border: 1px solid var(--color-line);
    background: #f8fafc;
    flex-shrink: 0;
    flex-grow: 0;
    display: block;
    padding: 4px;
    box-sizing: border-box;
}
.nv-tp-analise-prod__img--placeholder {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var(--color-muted);
}
.nv-tp-analise-prod__info {
    flex: 1 1 auto;
    min-width: 0;
}
.nv-tp-analise-prod__info h1 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin: 0 0 6px;
    color: var(--color-ink);
    font-weight: 800;
    line-height: 1.25;
}
.nv-tp-analise-prod__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--color-muted);
    font-size: 0.82rem;
    margin-bottom: 12px;
}
.nv-tp-analise-prod__vals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.nv-tp-analise-prod__vals > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nv-tp-analise-prod__vals span {
    font-size: 0.68rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.nv-tp-analise-prod__vals strong {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-ink);
    font-weight: 800;
}
.nv-tp-analise-prod__vals strong small {
    font-size: 0.7rem;
    color: var(--color-muted);
    font-weight: 500;
}
.nv-tp-analise-prod__act {
    flex-shrink: 0;
}

/* Seções */
.nv-tp-secao-titulo {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-ink);
    margin: 32px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-line);
}

/* Insights */
.nv-tp-insights { margin: 22px 0 14px; }
.nv-tp-insights h2 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-ink);
    margin: 0 0 12px;
}
.nv-tp-insights__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.nv-tp-insight {
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.5;
    border-left: 4px solid;
}
.nv-tp-insight--sucesso {
    background: #ecfdf5;
    border-left-color: #10b981;
    color: #064e3b;
}
.nv-tp-insight--info {
    background: #eff6ff;
    border-left-color: #3b82f6;
    color: #1e3a8a;
}
.nv-tp-insight--aviso {
    background: #fffbeb;
    border-left-color: #f59e0b;
    color: #78350f;
}
.nv-tp-insight--critico {
    background: #fef2f2;
    border-left-color: #dc2626;
    color: #7f1d1d;
}
.nv-tp-insight strong { font-weight: 700; }

/* Chart cards */
.nv-tp-chart-card {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 16px 0;
    box-shadow: 0 2px 8px rgba(13, 27, 42, 0.03);
}
.nv-tp-chart-card h3 {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--color-ink);
    margin: 0 0 14px;
}
/* CRÍTICO: Chart.js precisa de container com altura fixa quando maintainAspectRatio:false */
.nv-tp-chart-wrap {
    position: relative;
    height: 320px;
    width: 100%;
}
.nv-tp-chart-wrap canvas {
    max-width: 100% !important;
    max-height: 100% !important;
}
@media (max-width: 780px) {
    .nv-tp-chart-wrap { height: 240px; }
    .nv-tp-chart-card { padding: 14px 16px; }
}

/* Info-box */
.nv-tp-info-box {
    background: linear-gradient(135deg, #eff6ff, #fafbfc);
    border: 1px solid #dbeafe;
    color: #1e3a8a;
    padding: 16px 22px;
    border-radius: 10px;
    font-size: 0.9rem;
    margin: 14px 0;
}

@media (max-width: 780px) {
    .nv-tp-analise-prod { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
    .nv-tp-analise-prod__img,
    img.nv-tp-analise-prod__img,
    .nv-tp-analise-prod > img,
    .nv-tp-analise-prod > span.nv-tp-analise-prod__img {
        width: 70px !important; height: 70px !important;
        max-width: 70px !important; max-height: 70px !important;
        min-width: 70px !important; min-height: 70px !important;
        font-size: 1.8rem;
    }
    .nv-tp-analise-prod__info h1 { font-size: 1.05rem; }
    .nv-tp-analise-prod__vals { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .nv-tp-analise-prod__act { width: 100%; }
    .nv-tp-analise-prod__act .nv-tp-btn { width: 100%; }
}

/* =========================================================
   69. CORREÇÕES — Responsividade & Imagem do produto
========================================================= */

/* Container largo (usado em listas e dashboards) */
.nv-tp-container--wide {
    max-width: 1280px;
}

/* === Responsividade geral da área do cliente === */
@media (max-width: 1024px) {
    .nv-tp-container,
    .nv-tp-container--wide {
        padding: 0 16px;
    }
}

@media (max-width: 780px) {
    /* Header */
    .nv-tp-header { padding: 16px 0; }
    .nv-tp-header__title { font-size: 1.3rem; }
    .nv-tp-header__sub { font-size: 0.84rem; }
    .nv-tp-header__crumbs { font-size: 0.76rem; flex-wrap: wrap; }

    /* KPIs ficam em grid responsivo */
    .nv-tp-kpis {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .nv-tp-kpi { padding: 12px 14px; }
    .nv-tp-kpi__num { font-size: 1.1rem; }
    .nv-tp-kpi__lbl { font-size: 0.7rem; }
    .nv-tp-kpi__sub { font-size: 0.72rem; }

    /* Tabelas: scroll horizontal */
    .nv-tp-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px;
        padding: 0 16px;
    }
    .nv-tp-table { font-size: 0.82rem; min-width: 600px; }
    .nv-tp-table th, .nv-tp-table td { padding: 8px 10px; }

    /* Toolbar: empilha botões */
    .nv-tp-prod-toolbar,
    .nv-tp-toolbar {
        gap: 6px;
    }
    .nv-tp-prod-toolbar .nv-tp-btn,
    .nv-tp-toolbar .nv-tp-btn {
        font-size: 0.78rem;
        padding: 7px 12px;
    }

    /* Filtros: empilha vertical em mobile */
    .nv-tp-filters {
        flex-direction: column;
        gap: 10px;
    }
    .nv-tp-filters__field { width: 100%; min-width: 0 !important; }

    /* Formulários */
    .nv-tp-row,
    .nv-tp-row--3 {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    .nv-tp-form-section { padding: 14px 16px; }
    .nv-tp-form-title { font-size: 0.94rem; }

    /* Cards de stats (accordion antigo) */
    .nv-tp-grupo__header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .nv-tp-grupo__totals {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }
    .nv-tp-grupo__stats {
        grid-template-columns: 1fr 1fr;
    }

    /* Pills com texto longo */
    .nv-tp-pill, .nv-tp-canal-filter__pill {
        font-size: 0.74rem;
        padding: 4px 8px;
    }

    /* Insights em uma coluna */
    .nv-tp-insights__grid {
        grid-template-columns: 1fr;
    }

    /* Cabeçalho de seção */
    .nv-tp-secao-titulo { font-size: 1rem; margin-top: 22px; }

    /* App-header / project-nav (3 níveis de navegação) */
    .nv-app-header__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .nv-project-nav {
        padding: 0 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nv-project-nav::-webkit-scrollbar { display: none; }
    .nv-project-nav__inner { flex-wrap: nowrap; min-width: max-content; }
    .nv-project-nav__title {
        white-space: nowrap;
        max-width: 50vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 480px) {
    .nv-tp-kpis {
        grid-template-columns: 1fr;
    }
    .nv-tp-header__title { font-size: 1.15rem; }
    .nv-tp-tab { font-size: 0.78rem; padding: 8px 11px; }
    .nv-tp-tab__count { font-size: 0.68rem; padding: 1px 6px; }
}

/* =========================================================
   70. MULTI-PRODUCT PICKER + responsividade forms
========================================================= */

/* Container do picker */
.nv-tp-prodpicker {
    border: 1px solid var(--color-line);
    border-radius: 12px;
    background: white;
    overflow: visible;
    position: relative;
}

/* Barra de busca */
.nv-tp-prodpicker__search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-line);
    background: #fafbfc;
    border-radius: 12px 12px 0 0;
}
.nv-tp-prodpicker__icon { font-size: 1rem; color: var(--color-muted); flex-shrink: 0; }
.nv-tp-prodpicker__search input {
    flex: 1;
    border: 0 !important;
    background: transparent !important;
    padding: 6px 0 !important;
    outline: none !important;
    font-size: 0.92rem;
    min-width: 0;
}
.nv-tp-prodpicker__count {
    font-size: 0.78rem;
    color: var(--color-muted);
    white-space: nowrap;
    font-weight: 600;
    flex-shrink: 0;
}

/* Dropdown de resultados */
.nv-tp-prodpicker__dropdown {
    display: none;
    max-height: 460px;
    overflow-y: auto;
    border-bottom: 1px solid var(--color-line);
    background: #f9fafb;
    padding: 8px;
}
.nv-tp-prodpicker__dropdown.is-open { display: block; }
.nv-tp-prodpicker__loading {
    padding: 18px;
    text-align: center;
    color: var(--color-muted);
    font-size: 0.86rem;
}

/* Lista de selecionados */
.nv-tp-prodpicker__selecionados {
    padding: 8px;
    min-height: 60px;
    border-radius: 0 0 12px 12px;
}
.nv-tp-prodpicker__empty {
    margin: 0;
    padding: 16px;
    text-align: center;
    color: var(--color-muted);
    font-size: 0.86rem;
    font-style: italic;
}

/* === Card do produto === */
.nv-tp-prod-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    margin-bottom: 8px;
    transition: all 0.15s;
}
.nv-tp-prod-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(227,114,32,0.08);
}
.nv-tp-prod-card.is-selecionado {
    background: linear-gradient(135deg, rgba(16,185,129,0.04), white);
    border-color: rgba(16,185,129,0.3);
}

.nv-tp-prod-card__thumb {
    width: 64px; height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f7fa;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-line);
}
.nv-tp-prod-card__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 4px;
    box-sizing: border-box;
}
.nv-tp-prod-card__placeholder {
    font-size: 1.6rem;
    color: var(--color-muted);
}

.nv-tp-prod-card__body { flex: 1; min-width: 0; }
.nv-tp-prod-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.nv-tp-prod-card__marca {
    font-size: 0.74rem;
    color: var(--color-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.nv-tp-prod-card__nome {
    font-weight: 700;
    color: var(--color-ink);
    font-size: 0.92rem;
    margin-bottom: 8px;
    line-height: 1.3;
}

.nv-tp-prod-card__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}
.nv-tp-prod-card__stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.78rem;
}
.nv-tp-prod-card__stat span {
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.66rem;
    font-weight: 600;
}
.nv-tp-prod-card__stat strong {
    color: var(--color-ink);
    font-weight: 700;
    font-size: 0.86rem;
}
.nv-tp-prod-card__stat small {
    color: var(--color-muted);
    font-size: 0.7rem;
    font-weight: 500;
}

.nv-tp-prod-card__act { flex-shrink: 0; }
.nv-tp-prod-card__btn {
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: 0;
    white-space: nowrap;
    transition: all 0.15s;
}
.nv-tp-prod-card__btn--add {
    background: var(--color-primary);
    color: white;
}
.nv-tp-prod-card__btn--add:hover { background: #c95e10; }
.nv-tp-prod-card__btn--del {
    background: rgba(239,68,68,0.08);
    color: #dc2626;
    border: 1px solid rgba(239,68,68,0.2);
}
.nv-tp-prod-card__btn--del:hover { background: rgba(239,68,68,0.16); }

@media (max-width: 780px) {
    .nv-tp-prod-card { flex-wrap: wrap; }
    .nv-tp-prod-card__thumb { width: 50px; height: 50px; }
    .nv-tp-prod-card__act {
        width: 100%;
        order: 99;
        margin-top: 6px;
    }
    .nv-tp-prod-card__btn { width: 100%; }
    .nv-tp-prod-card__stats { grid-template-columns: 1fr 1fr; }
    .nv-tp-prodpicker__count { font-size: 0.7rem; }
}

/* =========================================================
   71. RESPONSIVIDADE — Formulários, listas e dashboards
========================================================= */

/* Formulários: sempre responsivos */
.nv-tp-form-section {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(13,27,42,0.03);
}
.nv-tp-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.nv-tp-row--3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Plataforma grid (cards de seleção) — virar grid responsiva */
.nv-tp-plat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

/* Form footer com botões */
.nv-tp-form-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* Reforço mobile: tudo em 1 coluna */
@media (max-width: 780px) {
    .nv-tp-row,
    .nv-tp-row--3 {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    .nv-tp-form-section {
        padding: 14px 16px;
    }
    .nv-tp-plat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .nv-tp-form-footer {
        flex-direction: column-reverse;
    }
    .nv-tp-form-footer .nv-tp-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    /* Inputs touch-friendly */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="date"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important; /* evita zoom no iOS */
    }
    /* Pill-select wraps */
    .nv-tp-pill-select {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* Tabelas — scroll horizontal sem quebrar layout */
.nv-tp-table-wrap {
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 780px) {
    .nv-tp-table-wrap {
        overflow-x: auto;
        margin: 0 -16px;
        padding: 0 16px;
        position: relative;
    }
    .nv-tp-table {
        min-width: 600px;
    }
}

/* Cards das campanhas/produtos */
.nv-tp-card {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(13,27,42,0.03);
}
.nv-tp-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.nv-tp-card__title {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-ink);
}
.nv-tp-card__actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--color-line);
}
.nv-tp-card__actions a {
    font-size: 0.84rem;
    color: var(--color-muted);
    text-decoration: none;
    font-weight: 600;
}
.nv-tp-card__actions a:hover { color: var(--color-primary); }

.nv-tp-camp-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px 18px;
    font-size: 0.86rem;
}
.nv-tp-camp-info > div { display: flex; flex-direction: column; gap: 1px; }
.nv-tp-camp-info span {
    font-size: 0.7rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.nv-tp-camp-info strong {
    color: var(--color-ink);
    font-weight: 700;
}

@media (max-width: 780px) {
    .nv-tp-card { padding: 14px 16px; }
    .nv-tp-card__title { font-size: 0.96rem; }
    .nv-tp-camp-info { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
    .nv-tp-card__actions { flex-wrap: wrap; }
}

/* Cabeçalho de página */
@media (max-width: 780px) {
    .nv-tp-header { padding: 14px 0 18px; }
    .nv-tp-header__title { font-size: 1.2rem !important; }
    .nv-tp-header__sub { font-size: 0.8rem; }
}

/* =========================================================
   72. ADMIN — Gerenciamento de Clientes (cards + filtros)
========================================================= */

.nv-admin-clientes { padding-bottom: 60px; }
.nv-admin-result-info {
    color: var(--color-muted);
    font-size: 0.84rem;
    margin: 14px 0;
}

/* Abas de status */
.nv-admin-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--color-line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nv-admin-tabs::-webkit-scrollbar { display: none; }
.nv-admin-tab {
    padding: 10px 16px;
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.15s;
}
.nv-admin-tab:hover { color: var(--color-ink); background: rgba(13,27,42,0.02); }
.nv-admin-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.nv-admin-tab--green.is-active { color: #10b981; border-bottom-color: #10b981; }
.nv-admin-tab--yellow.is-active { color: #f59e0b; border-bottom-color: #f59e0b; }
.nv-admin-tab--gray.is-active { color: #6b7280; border-bottom-color: #6b7280; }
.nv-admin-tab--star { color: #f59e0b; }
.nv-admin-tab--star:hover { background: rgba(245,158,11,0.05); }
.nv-admin-tab__count {
    background: rgba(107,114,128,0.12);
    color: var(--color-muted);
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
}
.nv-admin-tab.is-active .nv-admin-tab__count {
    background: rgba(227,114,32,0.16);
    color: var(--color-primary);
}

/* Filtros */
.nv-admin-filters {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 18px;
}
.nv-admin-filters__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}
.nv-admin-filters__field--grow { flex: 1; min-width: 240px; }
.nv-admin-filters__field label {
    font-size: 0.7rem;
    color: var(--color-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.nv-admin-filters__field input,
.nv-admin-filters__field select {
    padding: 8px 12px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
    outline: none;
    transition: border-color 0.15s;
}
.nv-admin-filters__field input:focus,
.nv-admin-filters__field select:focus {
    border-color: var(--color-primary);
}
.nv-admin-filters__actions {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

/* Grid de cards */
.nv-admin-clientes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

/* === Card individual === */
.nv-cli-card {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 14px;
    padding: 18px 20px;
    transition: all 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 6px rgba(13,27,42,0.04);
}
.nv-cli-card:hover {
    box-shadow: 0 6px 20px rgba(13,27,42,0.10);
    transform: translateY(-2px);
    border-color: rgba(227,114,32,0.3);
}
.nv-cli-card.is-favorito {
    border-color: #f59e0b;
    background: linear-gradient(135deg, white 0%, rgba(245,158,11,0.03) 100%);
}
.nv-cli-card.is-favorito::before {
    content: '⭐';
    position: absolute;
    top: -8px;
    left: 16px;
    background: #f59e0b;
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    box-shadow: 0 2px 4px rgba(245,158,11,0.4);
}

/* Head: avatar + nome + favorito */
.nv-cli-card__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.nv-cli-card__avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary, #e37220), #c95e10);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    flex-shrink: 0;
    font-family: var(--font-display);
}
.nv-cli-card__avatar--img {
    object-fit: cover;
    padding: 0;
}
.nv-cli-card__head-info { flex: 1; min-width: 0; }
.nv-cli-card__name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-ink);
    margin: 0 0 2px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nv-cli-card__empresa {
    color: var(--color-muted);
    font-size: 0.82rem;
    margin: 0 0 4px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nv-cli-card__segmento {
    display: inline-block;
    background: rgba(59,130,246,0.1);
    color: #1e40af;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.nv-cli-card__fav {
    background: transparent;
    border: 1px solid var(--color-line);
    color: #d1d5db;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
    padding: 0;
}
.nv-cli-card__fav:hover {
    border-color: #f59e0b;
    color: #f59e0b;
    transform: scale(1.1);
}
.nv-cli-card__fav.is-active {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #f59e0b;
}

/* Status row */
.nv-cli-card__status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.nv-cli-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.nv-cli-card__login {
    font-size: 0.74rem;
    font-weight: 600;
}
.nv-cli-card__login--recent { color: #10b981; }
.nv-cli-card__login--warn { color: #f59e0b; }
.nv-cli-card__login--stale { color: #dc2626; }
.nv-cli-card__login--never,
.nv-cli-card__login--stale { color: #9ca3af; }

/* Stats grid */
.nv-cli-card__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}
.nv-cli-card__stat {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nv-cli-card__stat-num {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-ink);
    line-height: 1;
}
.nv-cli-card__stat-lbl {
    font-size: 0.66rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.nv-cli-card__stat.is-alert .nv-cli-card__stat-num { color: #dc2626; }
.nv-cli-card__stat.is-warn .nv-cli-card__stat-num { color: #f59e0b; }
.nv-cli-card__stat--money .nv-cli-card__stat-num {
    color: #10b981;
    font-size: 0.96rem;
}

/* Footer */
.nv-cli-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}
.nv-cli-card__act {
    font-size: 0.76rem;
    color: var(--color-muted);
}
.nv-cli-card__act--empty { font-style: italic; }
.nv-cli-card__cta {
    color: var(--color-primary);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.15s;
}
.nv-cli-card__cta:hover { color: #c95e10; }

/* Alertas */
.nv-cli-card__alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-line);
}
.nv-cli-card__alert {
    font-size: 0.7rem;
    background: #fef3c7;
    color: #92400e;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

/* Tornar card clicável inteiro */
.nv-cli-card { cursor: default; }

@media (max-width: 780px) {
    .nv-admin-clientes-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .nv-admin-filters {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 14px;
    }
    .nv-admin-filters__field { width: 100%; min-width: 0; }
    .nv-admin-filters__actions { width: 100%; }
    .nv-admin-filters__actions .cliente-area__btn { flex: 1; }
    .nv-cli-card__name { font-size: 0.98rem; }
    .nv-cli-card__avatar { width: 42px; height: 42px; font-size: 1.05rem; }
    .nv-cli-card__stats { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   73. Botão de excluir pequeno + KPI red + TACOS
========================================================= */

.nv-tp-del--sm {
    background: transparent;
    border: 1px solid transparent;
    color: #9ca3af;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.92rem;
    padding: 0;
    transition: all 0.15s;
}
.nv-tp-del--sm:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

/* KPI vermelho (TACOS alto, etc) */
.nv-tp-kpi--red {
    border-left: 4px solid #dc2626;
}
.nv-tp-kpi--red .nv-tp-kpi__num {
    color: #dc2626;
}

/* Tooltip suave */
[title].nv-tp-kpi { cursor: help; }

/* =========================================================
   74. Canais de Marketplace (badges nos produtos)
========================================================= */

.nv-tp-canais {
    display: inline-flex;
    gap: 3px;
    margin-top: 2px;
    vertical-align: middle;
}
.nv-tp-canal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    color: white;
    font-size: 0.66rem;
    font-weight: 800;
    font-family: var(--font-display);
    letter-spacing: 0;
    line-height: 1;
}

/* Tabela de não vinculados no resultado da importação */
.nv-tp-naovinc-box {
    margin-top: 18px;
    padding: 16px 20px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
}
.nv-tp-naovinc-box h4 {
    margin: 0 0 6px;
    color: #92400e;
    font-family: var(--font-display);
    font-size: 0.96rem;
    font-weight: 800;
}
.nv-tp-naovinc-box p {
    color: #78350f;
    font-size: 0.86rem;
    margin: 0 0 12px;
}
.nv-tp-naovinc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    background: white;
    border-radius: 6px;
    overflow: hidden;
}
.nv-tp-naovinc-table th,
.nv-tp-naovinc-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #f3f4f6;
    text-align: left;
}
.nv-tp-naovinc-table th {
    background: #fef3c7;
    font-weight: 700;
    color: #78350f;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.nv-tp-naovinc-table tr:last-child td { border-bottom: 0; }
.nv-tp-naovinc-table code {
    background: #f9fafb;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.78rem;
    color: #1f2937;
}

/* =========================================================
   75. Aba Magalu × Shopee no Form de Produto + cards por canal
========================================================= */

.nv-tp-form-section--tabs { padding: 0; overflow: hidden; }

.nv-tp-canal-tabs {
    display: flex;
    background: #f9fafb;
    border-bottom: 1px solid var(--color-line);
}
.nv-tp-canal-tab {
    flex: 1;
    padding: 14px 20px;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--color-muted);
    font-size: 0.94rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.nv-tp-canal-tab:hover { color: var(--color-ink); background: rgba(13,27,42,0.02); }

.nv-tp-canal-tab.is-magalu.is-active {
    color: #0086FF;
    border-bottom-color: #0086FF;
    background: white;
}
.nv-tp-canal-tab.is-shopee.is-active {
    color: #EE4D2D;
    border-bottom-color: #EE4D2D;
    background: white;
}
.nv-tp-canal-tab__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    margin-left: 4px;
}

.nv-tp-canal-panel {
    display: none;
    padding: 20px 24px;
}
.nv-tp-canal-panel.is-active { display: block; }

.nv-tp-canal-banner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    border-left: 4px solid;
}
.nv-tp-canal-banner strong {
    font-size: 0.94rem;
    font-weight: 800;
}
.nv-tp-canal-banner small {
    font-size: 0.78rem;
    opacity: 0.85;
}
.nv-tp-canal-banner--magalu {
    background: rgba(0, 134, 255, 0.06);
    border-left-color: #0086FF;
    color: #1e40af;
}
.nv-tp-canal-banner--shopee {
    background: rgba(238, 77, 45, 0.06);
    border-left-color: #EE4D2D;
    color: #9a3412;
}

/* Lista de produtos: duas linhas com badge M / S */
.nv-tp-canal-vals {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.84rem;
}
.nv-tp-canal-val {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.nv-tp-canal-val.is-empty {
    color: var(--color-muted);
    opacity: 0.6;
}
.nv-tp-canal-val i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    color: white;
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 800;
    font-family: var(--font-display);
    flex-shrink: 0;
}

@media (max-width: 780px) {
    .nv-tp-canal-tabs { flex-direction: row; }
    .nv-tp-canal-tab { padding: 12px 14px; font-size: 0.86rem; }
    .nv-tp-canal-panel { padding: 14px 16px; }
}

/* =========================================================
   76. Hub Centro de Importações
========================================================= */

/* Abas de marketplace */
.nv-tp-imp-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 24px;
    padding: 6px;
    background: #f3f4f6;
    border-radius: 12px;
    border: 1px solid var(--color-line);
}
.nv-tp-imp-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    background: transparent;
    border: 0;
    border-radius: 9px;
    color: var(--color-muted);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}
.nv-tp-imp-tab:hover {
    background: rgba(255,255,255,0.7);
    color: var(--color-ink);
}
.nv-tp-imp-tab.is-active {
    background: white;
    color: var(--canal-cor, var(--color-primary));
    box-shadow: 0 2px 6px rgba(13,27,42,0.08), 0 0 0 1px var(--canal-cor, var(--color-primary));
}
/* Cores por aba ativa */
.nv-tp-imp-tab[data-canal="magalu"].is-active { --canal-cor: #0086FF; }
.nv-tp-imp-tab[data-canal="shopee"].is-active { --canal-cor: #EE4D2D; }
.nv-tp-imp-tab[data-canal="outros"].is-active { --canal-cor: #6b7280; }
.nv-tp-imp-tab__icon { font-size: 1.18rem; }

/* Painéis */
.nv-tp-imp-panel { display: none; }
.nv-tp-imp-panel.is-active { display: block; animation: nvImpFade 0.25s ease; }
@keyframes nvImpFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Banner do canal */
.nv-tp-imp-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border: 1px solid;
    border-radius: 12px;
    margin-bottom: 28px;
}
.nv-tp-imp-banner__icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.nv-tp-imp-banner__txt h2 {
    margin: 0 0 2px;
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 800;
}
.nv-tp-imp-banner__txt p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.86rem;
}

/* Grupos por categoria */
.nv-tp-imp-grupo {
    margin-bottom: 32px;
}
.nv-tp-imp-grupo__head {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-line);
}
.nv-tp-imp-grupo__head h3 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 1.04rem;
    font-weight: 800;
    color: var(--color-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.nv-tp-imp-grupo__head p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.84rem;
}

/* Cards */
.nv-tp-imp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
.nv-tp-imp-card {
    position: relative;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    transition: all 0.18s;
}
.nv-tp-imp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(13,27,42,0.08);
    border-color: var(--canal-cor, var(--color-primary));
}
.nv-tp-imp-card.is-destaque {
    border: 1.5px solid var(--canal-cor);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(238,77,45,0.02) 100%);
}
.nv-tp-imp-card.is-destaque::before {
    content: "⭐ Recomendado";
    position: absolute;
    top: -10px;
    left: 16px;
    background: var(--canal-cor);
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 12px;
    letter-spacing: 0.02em;
}
.nv-tp-imp-card.is-soon {
    opacity: 0.62;
    background: #f9fafb;
}
.nv-tp-imp-card.is-soon:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--color-line);
}

.nv-tp-imp-card__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--color-bg);
    color: var(--color-muted);
    font-size: 0.66rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    border: 1px solid var(--color-line);
}
.nv-tp-imp-card__icon {
    font-size: 1.85rem;
    margin-bottom: 10px;
    line-height: 1;
}
.nv-tp-imp-card__title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--color-ink);
    line-height: 1.3;
}
.nv-tp-imp-card__desc {
    margin: 0 0 14px;
    color: var(--color-muted);
    font-size: 0.84rem;
    line-height: 1.5;
    flex: 1;
}
.nv-tp-imp-card__btn {
    align-self: stretch;
    justify-content: center;
    color: var(--canal-cor) !important;
    border-color: var(--canal-cor) !important;
    font-weight: 700;
}
.nv-tp-imp-card__btn:hover:not(:disabled) {
    background: var(--canal-cor) !important;
    color: white !important;
}

@media (max-width: 640px) {
    .nv-tp-imp-tab__label { font-size: 0.86rem; }
    .nv-tp-imp-tab { padding: 12px 10px; gap: 6px; }
    .nv-tp-imp-banner { padding: 14px 16px; gap: 12px; }
    .nv-tp-imp-banner__icon { width: 44px; height: 44px; font-size: 1.4rem; }
    .nv-tp-imp-cards { grid-template-columns: 1fr; }
}

/* =========================================================
   77. DASHBOARD EXECUTIVO — KPIs Hero com delta
========================================================= */

.nv-tp-hero-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 28px;
}

.nv-tp-hero-kpi {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 12px 14px;
    position: relative;
    overflow: hidden;
    min-width: 0;
}
.nv-tp-hero-kpi--featured {
    background: linear-gradient(135deg, rgba(13,27,42,1) 0%, rgba(30,58,95,1) 100%);
    color: white;
    border-color: transparent;
}
.nv-tp-hero-kpi--featured .nv-tp-hero-kpi__lbl { color: rgba(255,255,255,0.85); }
.nv-tp-hero-kpi--featured .nv-tp-hero-kpi__sub { color: rgba(255,255,255,0.65); }

/* Status meta (verde/amarelo/vermelho) — borda esquerda */
.nv-tp-hero-kpi.is-meta-green  { border-left: 4px solid #10b981; }
.nv-tp-hero-kpi.is-meta-yellow { border-left: 4px solid #f59e0b; }
.nv-tp-hero-kpi.is-meta-red    { border-left: 4px solid #dc2626; }

.nv-tp-hero-kpi__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.nv-tp-hero-kpi__lbl {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.nv-tp-hero-kpi__num {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-ink);
    line-height: 1.1;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nv-tp-hero-kpi--featured .nv-tp-hero-kpi__num { color: white; }
.nv-tp-hero-kpi__sub {
    font-size: 0.72rem;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Delta (variação) */
.nv-tp-delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--font-display);
    white-space: nowrap;
    flex-shrink: 0;
}
.nv-tp-delta--green { background: rgba(16,185,129,0.12); color: #047857; }
.nv-tp-delta--red   { background: rgba(220,38,38,0.12); color: #b91c1c; }
.nv-tp-delta--gray  { background: rgba(107,114,128,0.10); color: #6b7280; }

.nv-tp-hero-kpi--featured .nv-tp-delta--green { background: rgba(16,185,129,0.25); color: #6ee7b7; }
.nv-tp-hero-kpi--featured .nv-tp-delta--red   { background: rgba(220,38,38,0.25); color: #fca5a5; }
.nv-tp-hero-kpi--featured .nv-tp-delta--gray  { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); }

/* =========================================================
   78. ALERTAS E SUGESTÕES
========================================================= */

.nv-tp-alertas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.nv-tp-alerta {
    background: white;
    border: 1px solid var(--color-line);
    border-left: 4px solid;
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nv-tp-alerta--critico { border-left-color: #dc2626; background: #fef2f2; }
.nv-tp-alerta--atencao { border-left-color: #f59e0b; background: #fffbeb; }
.nv-tp-alerta--info    { border-left-color: #3b82f6; background: #eff6ff; }
.nv-tp-alerta--sucesso { border-left-color: #10b981; background: #f0fdf4; }

.nv-tp-alerta__head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.nv-tp-alerta__ic { font-size: 1.3rem; line-height: 1; }
.nv-tp-alerta__title strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.94rem;
    font-weight: 800;
    color: var(--color-ink);
    margin-bottom: 2px;
}
.nv-tp-alerta__title p {
    margin: 0;
    color: #475569;
    font-size: 0.82rem;
    line-height: 1.4;
}

.nv-tp-alerta__itens {
    list-style: none;
    padding: 0;
    margin: 0;
    background: rgba(255,255,255,0.7);
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.04);
}
.nv-tp-alerta__itens li {
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.nv-tp-alerta__itens li:last-child { border-bottom: 0; }
.nv-tp-alerta__itens li a,
.nv-tp-alerta__itens li > span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    text-decoration: none;
    color: var(--color-ink);
    font-size: 0.84rem;
    flex-wrap: wrap;
}
.nv-tp-alerta__itens li a:hover { background: rgba(0,0,0,0.03); }
.nv-tp-alerta__nome { flex: 1; min-width: 120px; }
.nv-tp-alerta__meta { color: var(--color-muted); font-size: 0.78rem; white-space: nowrap; }

.nv-tp-alerta__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    color: var(--color-ink);
    font-weight: 700;
    font-size: 0.84rem;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    background: rgba(0,0,0,0.06);
    transition: all 0.15s;
}
.nv-tp-alerta__cta:hover { background: rgba(0,0,0,0.12); }
.nv-tp-alerta--critico .nv-tp-alerta__cta { color: #b91c1c; background: rgba(220,38,38,0.12); }
.nv-tp-alerta--critico .nv-tp-alerta__cta:hover { background: rgba(220,38,38,0.22); }
.nv-tp-alerta--atencao .nv-tp-alerta__cta { color: #b45309; background: rgba(245,158,11,0.15); }
.nv-tp-alerta--atencao .nv-tp-alerta__cta:hover { background: rgba(245,158,11,0.28); }
.nv-tp-alerta--sucesso .nv-tp-alerta__cta { color: #047857; background: rgba(16,185,129,0.15); }
.nv-tp-alerta--sucesso .nv-tp-alerta__cta:hover { background: rgba(16,185,129,0.28); }
.nv-tp-alerta--info    .nv-tp-alerta__cta { color: #1d4ed8; background: rgba(59,130,246,0.15); }
.nv-tp-alerta--info    .nv-tp-alerta__cta:hover { background: rgba(59,130,246,0.28); }

/* =========================================================
   79. ORGÂNICO × PAGO
========================================================= */

.nv-tp-op-card {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 22px 24px;
    margin-bottom: 28px;
}

.nv-tp-op-totals {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
}
.nv-tp-op-total {
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid;
}
.nv-tp-op-total .lbl {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-muted);
    margin-bottom: 4px;
}
.nv-tp-op-total strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-ink);
    margin-bottom: 2px;
}
.nv-tp-op-total small { color: var(--color-muted); font-size: 0.76rem; }

.nv-tp-op-total--organico { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.2); }
.nv-tp-op-total--pago     { background: rgba(227,114,32,0.06); border-color: rgba(227,114,32,0.2); }
.nv-tp-op-total--soma     { background: rgba(13,27,42,0.04); border-color: rgba(13,27,42,0.12); }

.nv-tp-op-bar {
    display: flex;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    background: #f3f4f6;
    margin-bottom: 14px;
}
.nv-tp-op-bar__organico { background: linear-gradient(90deg, #10b981, #059669); transition: width 0.3s; }
.nv-tp-op-bar__pago     { background: linear-gradient(90deg, #e37220, #c2410c); transition: width 0.3s; }

.nv-tp-op-insight {
    margin: 0;
    padding: 12px 16px;
    background: rgba(13,27,42,0.04);
    border-radius: 8px;
    color: #1e3a5f;
    font-size: 0.88rem;
    line-height: 1.5;
}

/* =========================================================
   80. TOP 10 PRODUTOS — Tabs + tabela
========================================================= */

.nv-tp-top-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 6px;
    margin-bottom: 14px;
}
.nv-tp-top-tab {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
}
.nv-tp-top-tab:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.nv-tp-top-tab.is-active {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: white;
}
.nv-tp-top-tab strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 800;
    margin-bottom: 2px;
}
.nv-tp-top-tab small { font-size: 0.74rem; color: var(--color-muted); }
.nv-tp-top-tab.is-active small { color: rgba(255,255,255,0.7); }

.nv-tp-top-panel { display: none; }
.nv-tp-top-panel.is-active { display: block; animation: nvTopFade 0.2s ease; }
@keyframes nvTopFade { from { opacity: 0; } to { opacity: 1; } }

.nv-tp-top-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 28px;
}
.nv-tp-top-table thead {
    background: #f9fafb;
}
.nv-tp-top-table th,
.nv-tp-top-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.86rem;
    vertical-align: middle;
}
.nv-tp-top-table th {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
}
.nv-tp-top-table th.num,
.nv-tp-top-table td.num { text-align: right; }
.nv-tp-top-table tbody tr:last-child td { border-bottom: 0; }
.nv-tp-top-table tbody tr:hover { background: #f9fafb; }

.nv-tp-top-table .rank {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--color-primary);
    text-align: center;
}
.nv-tp-top-table .sku {
    display: inline-block;
    background: rgba(13,27,42,0.06);
    color: #475569;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-left: 6px;
}
.nv-tp-top-table .actions { text-align: right; }

.nv-tp-top-table .cell-cls {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.82rem;
}
.cell-cls.cls-good { background: rgba(16,185,129,0.12); color: #047857; }
.cell-cls.cls-bad  { background: rgba(220,38,38,0.12);  color: #b91c1c; }
.cell-cls.cls-gray { background: rgba(107,114,128,0.10); color: #6b7280; }

.nv-tp-btn--xs {
    font-size: 0.78rem !important;
    padding: 4px 10px !important;
    height: auto !important;
}

.nv-tp-empty-mini {
    padding: 20px;
    text-align: center;
    background: white;
    border: 1px dashed var(--color-line);
    border-radius: 10px;
    color: var(--color-muted);
    margin-bottom: 28px;
}

/* =========================================================
   81. Mini KPIs operacionais (compactos)
========================================================= */

.nv-tp-mini-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 28px;
}
.nv-tp-mini-kpi {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    padding: 10px 14px;
}
.nv-tp-mini-kpi .lbl {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.nv-tp-mini-kpi strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-ink);
    margin: 3px 0 2px;
}

@media (max-width: 1200px) {
    .nv-tp-hero-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
    .nv-tp-hero-kpis { grid-template-columns: 1fr 1fr; }
    .nv-tp-op-totals { grid-template-columns: 1fr; }
    .nv-tp-top-table { font-size: 0.78rem; }
    .nv-tp-top-table th, .nv-tp-top-table td { padding: 8px 8px; }
}
@media (max-width: 480px) {
    .nv-tp-hero-kpis { grid-template-columns: 1fr; }
}

/* =========================================================
   82. DASHBOARD POR CANAL — abas grandes no topo + tabela comparativa
========================================================= */

/* Tag de canal no header */
.nv-tp-header__canal-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 700;
    margin-left: 14px;
    vertical-align: middle;
    backdrop-filter: blur(4px);
}

/* Abas grandes (cards) de canal — topo do dashboard */
.nv-tp-canal-mainTabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}
.nv-tp-canal-mainTab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    text-decoration: none;
    color: var(--color-ink);
    transition: all 0.18s;
    position: relative;
}
.nv-tp-canal-mainTab:hover {
    border-color: var(--canal-cor, var(--color-primary));
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(13,27,42,0.08);
}
.nv-tp-canal-mainTab.is-active {
    background: var(--canal-cor, var(--color-ink));
    color: white;
    border-color: var(--canal-cor, var(--color-ink));
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.nv-tp-canal-mainTab .ic {
    font-size: 1.6rem;
    line-height: 1;
}
.nv-tp-canal-mainTab .txt strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 2px;
}
.nv-tp-canal-mainTab .txt small {
    display: block;
    font-size: 0.74rem;
    color: var(--color-muted);
}
.nv-tp-canal-mainTab.is-active .txt small {
    color: rgba(255,255,255,0.75);
}

/* Tabela comparativa por canal */
.nv-tp-canal-comp {
    margin-bottom: 28px;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    overflow: hidden;
}
.nv-tp-canal-comp-table {
    width: 100%;
    border-collapse: collapse;
}
.nv-tp-canal-comp-table thead {
    background: #f9fafb;
}
.nv-tp-canal-comp-table th {
    padding: 10px 14px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    border-bottom: 1px solid var(--color-line);
}
.nv-tp-canal-comp-table th.num,
.nv-tp-canal-comp-table td.num {
    text-align: right;
}
.nv-tp-canal-comp-table td {
    padding: 14px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.88rem;
    vertical-align: middle;
}
.nv-tp-canal-comp-table tbody tr:last-child td { border-bottom: 0; }
.nv-tp-canal-comp-table tbody tr:hover { background: #fafafa; }

.nv-tp-canal-comp-table td.num strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.96rem;
    font-weight: 800;
    color: var(--color-ink);
}
.nv-tp-canal-comp-table td.num .nv-tp-delta {
    margin-top: 3px;
}

/* Chip de canal (na primeira coluna) */
.nv-tp-canal-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 8px;
    background: rgba(13,27,42,0.04);
    border-left: 3px solid var(--canal-cor, var(--color-primary));
    border-radius: 4px;
}
.nv-tp-canal-chip .ic { font-size: 1.06rem; }
.nv-tp-canal-chip strong {
    font-family: var(--font-display);
    font-size: 0.92rem;
    color: var(--color-ink);
}

@media (max-width: 780px) {
    .nv-tp-canal-mainTabs { grid-template-columns: 1fr 1fr; }
    .nv-tp-canal-mainTab { padding: 12px; }
    .nv-tp-canal-mainTab .ic { font-size: 1.3rem; }
    .nv-tp-canal-mainTab .txt strong { font-size: 0.86rem; }
    .nv-tp-canal-comp-table { font-size: 0.78rem; }
    .nv-tp-canal-comp-table th, .nv-tp-canal-comp-table td { padding: 8px; }
}
@media (max-width: 480px) {
    .nv-tp-canal-mainTabs { grid-template-columns: 1fr; }
}

/* =========================================================
   83. EXCLUIR DADOS — header danger + toolbar + cards
========================================================= */

/* Header com tom de alerta */
.nv-tp-header--danger {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 50%, #b91c1c 100%) !important;
}

/* Toolbar superior no hub de importações */
.nv-tp-imp-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* Botão danger */
.nv-tp-btn--danger {
    background: #dc2626 !important;
    color: white !important;
    border-color: #dc2626 !important;
}
.nv-tp-btn--danger:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}

/* Banner de aviso */
.nv-tp-danger-banner {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 24px;
    color: #7f1d1d;
    font-size: 0.9rem;
    line-height: 1.5;
}
.nv-tp-danger-banner strong { color: #991b1b; }

/* Cards de exclusão */
.nv-tp-del-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.nv-tp-del-card {
    background: white;
    border: 1px solid var(--color-line);
    border-left: 4px solid var(--card-cor, var(--color-primary));
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
}

.nv-tp-del-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(90deg, rgba(0,0,0,0.02) 0%, transparent 100%);
}
.nv-tp-del-card__icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.nv-tp-del-card__head-txt { flex: 1; }
.nv-tp-del-card__head-txt h3 {
    margin: 0 0 2px;
    font-family: var(--font-display);
    font-size: 1.06rem;
    font-weight: 800;
    color: var(--color-ink);
}
.nv-tp-del-card__head-txt small {
    color: var(--color-muted);
    font-size: 0.82rem;
}
.nv-tp-del-card__count {
    text-align: right;
    flex-shrink: 0;
}
.nv-tp-del-card__count .num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--card-cor);
    line-height: 1;
}
.nv-tp-del-card__count small {
    color: var(--color-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nv-tp-del-card__filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--color-line);
    background: #f9fafb;
}
.nv-tp-del-card__filter label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.nv-tp-del-card__filter input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    background: white;
    font-size: 0.86rem;
}
.nv-tp-del-card__filter button { width: 100%; }

.nv-tp-del-card__lista {
    padding: 0 20px 16px;
}
.nv-tp-del-card__lista-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-line);
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.nv-tp-del-card__checkall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}
.nv-tp-del-card__lista-head [data-role="counter"] {
    color: var(--color-muted);
    font-size: 0.84rem;
    flex: 1;
}

.nv-tp-del-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.nv-tp-del-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-line);
}
.nv-tp-del-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f3f4f6;
}
.nv-tp-del-table tbody tr:hover { background: #fafafa; }
.nv-tp-del-table input[type=checkbox] {
    width: 16px; height: 16px; cursor: pointer;
}

.nv-tp-del-card__limit {
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #92400e;
    margin-top: 8px;
}
.nv-tp-del-card__hint {
    padding: 10px 20px;
    margin: 0;
    background: #f9fafb;
    border-top: 1px solid var(--color-line);
    font-size: 0.82rem;
    color: var(--color-muted);
}
.nv-tp-del-card__hint a { color: var(--color-primary); text-decoration: none; font-weight: 600; }
.nv-tp-del-card__hint a:hover { text-decoration: underline; }

.nv-tp-del-card__empty {
    padding: 18px 20px;
    color: var(--color-muted);
    text-align: center;
    font-size: 0.9rem;
    border-top: 1px dashed var(--color-line);
}

@media (max-width: 640px) {
    .nv-tp-del-card__head { flex-wrap: wrap; }
    .nv-tp-del-card__count { width: 100%; text-align: left; }
    .nv-tp-del-card__filters { grid-template-columns: 1fr; }
}

/* =========================================================
   84. Gráficos com altura confortável (Evolução diária)
========================================================= */

.nv-tp-charts--tall .nv-tp-chart-box {
    padding: 18px;
}
.nv-tp-charts--tall .nv-tp-chart-canvas-wrap {
    position: relative;
    height: 320px;
    width: 100%;
}
.nv-tp-charts--tall .nv-tp-chart-canvas-wrap canvas {
    max-height: 100% !important;
}

@media (max-width: 780px) {
    .nv-tp-charts--tall .nv-tp-chart-canvas-wrap { height: 260px; }
}

/* =========================================================
   85. Página de Campanhas — tabela rica
========================================================= */

.nv-tp-camp-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.nv-tp-camp-kpi {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    padding: 12px 16px;
}
.nv-tp-camp-kpi .lbl {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.nv-tp-camp-kpi strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--color-ink);
}

.nv-tp-camp-table-wrap {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    overflow-x: auto;
    margin-top: 14px;
}
.nv-tp-camp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.nv-tp-camp-table thead {
    background: #f9fafb;
}
.nv-tp-camp-table th {
    padding: 10px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    border-bottom: 1px solid var(--color-line);
    white-space: nowrap;
}
.nv-tp-camp-table th.num,
.nv-tp-camp-table td.num {
    text-align: right;
}
.nv-tp-camp-table td {
    padding: 12px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
    white-space: nowrap;
}
.nv-tp-camp-table tbody tr:last-child td { border-bottom: 0; }
.nv-tp-camp-table tbody tr:hover { background: #fafafa; }
.nv-tp-camp-table td strong {
    color: var(--color-ink);
    font-family: var(--font-display);
}

/* Link de ordenação no header */
.nv-tp-th-sort {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: color 0.15s;
}
.nv-tp-th-sort:hover { color: var(--color-ink); }
.nv-tp-th-sort.is-active { color: var(--color-primary); }

/* =========================================================
   86. DIÁRIO DE BORDO
========================================================= */

.nv-tp-header--diario {
    background: linear-gradient(135deg, #0d1b2a 0%, #1e3a5f 60%, #d97706 100%) !important;
}

.nv-tp-diario-headbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.nv-tp-diario-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.nv-tp-diario-data {
    color: white;
    font-size: 1.0rem;
    font-weight: 600;
    padding: 6px 16px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: capitalize;
}
.nv-tp-diario-hoje {
    background: #f59e0b;
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

.nv-tp-diario-stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.nv-tp-diario-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    color: white;
    font-size: 0.84rem;
    font-weight: 600;
}

/* Toolbar */
.nv-tp-diario-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

/* Layout grid */
.nv-tp-diario-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
}
.nv-tp-diario-main { min-width: 0; }
.nv-tp-diario-side { display: flex; flex-direction: column; gap: 14px; }

/* Empty state */
.nv-tp-diario-empty {
    background: white;
    border: 2px dashed var(--color-line);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    color: var(--color-muted);
}
.nv-tp-diario-empty p:first-child { margin-top: 0; font-size: 0.95rem; }
.nv-tp-diario-empty p:last-child  { margin-bottom: 0; }

/* Lista de ações */
.nv-tp-acoes-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.nv-tp-acao {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border: 1px solid var(--color-line);
    border-left: 4px solid #d1d5db;
    border-radius: 10px;
    transition: opacity 0.2s, transform 0.2s;
}
.nv-tp-acao.is-feito {
    opacity: 0.55;
    border-left-color: #10b981;
}
.nv-tp-acao.is-feito .nv-tp-acao__head h4 { text-decoration: line-through; }
.nv-tp-acao.is-ignorado {
    opacity: 0.45;
    border-left-color: #9ca3af;
}
.nv-tp-acao.is-pendente { border-left-color: #f59e0b; }

.nv-tp-acao__check { padding-top: 2px; }
.nv-tp-acao__check input[type=checkbox] {
    width: 20px; height: 20px;
    cursor: pointer;
    accent-color: #10b981;
}

.nv-tp-acao__body { flex: 1; min-width: 0; }
.nv-tp-acao__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.nv-tp-acao__head h4 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--color-ink);
    width: 100%;
    line-height: 1.3;
}
.nv-tp-acao__prio {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
}
.nv-tp-acao__tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    background: rgba(13,27,42,0.06);
    color: #475569;
    font-weight: 600;
}
.nv-tp-acao__tag--old { background: rgba(245,158,11,0.12); color: #92400e; }

.nv-tp-acao__msg {
    margin: 4px 0 8px;
    font-size: 0.84rem;
    color: #475569;
    line-height: 1.5;
}

.nv-tp-acao__nota {
    background: #f9fafb;
    border-left: 3px solid #94a3b8;
    padding: 6px 10px;
    margin-bottom: 8px;
    border-radius: 4px;
    font-size: 0.82rem;
    color: #334155;
    font-style: italic;
}

.nv-tp-acao__actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Side cards */
.nv-tp-side-card {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 14px 16px;
}
.nv-tp-side-card h3 {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--color-ink);
}
.nv-tp-side-card textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.86rem;
    resize: vertical;
    box-sizing: border-box;
}
.nv-tp-side-card__hint {
    margin-top: 4px;
    color: var(--color-muted);
    font-size: 0.74rem;
    text-align: right;
}

/* Timeline histórico */
.nv-tp-historico {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.nv-tp-historico li {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
    align-items: flex-start;
}
.nv-tp-historico li:last-child { border-bottom: 0; }
.nv-tp-historico__ic {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    flex-shrink: 0;
}
.nv-tp-historico li strong {
    display: block;
    font-size: 0.84rem;
    color: var(--color-ink);
    margin-bottom: 1px;
    font-weight: 600;
}
.nv-tp-historico li small {
    color: var(--color-muted);
    font-size: 0.72rem;
}

/* IA box */
.nv-tp-ia-box {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 1px solid #c4b5fd;
    border-left: 4px solid #7c3aed;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.nv-tp-ia-box__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.nv-tp-ia-box__head strong {
    color: #5b21b6;
    font-family: var(--font-display);
    font-size: 0.94rem;
}
.nv-tp-ia-box__head button {
    background: transparent; border: none; cursor: pointer; color: #6b7280; font-size: 1.1rem;
}
.nv-tp-ia-box__body {
    color: #1e1b4b;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Modal */
.nv-tp-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
}
.nv-tp-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(13,27,42,0.6);
}
.nv-tp-modal__box {
    position: relative;
    max-width: 500px;
    margin: 60px auto 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.3);
    overflow: hidden;
}
.nv-tp-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-line);
}
.nv-tp-modal__head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.04rem;
    font-weight: 800;
}
.nv-tp-modal__head button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: #6b7280;
}
.nv-tp-modal__body { padding: 18px; }
.nv-tp-modal__body .nv-form-row { margin-bottom: 12px; }
.nv-tp-modal__body .nv-form-row label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-muted);
    margin-bottom: 4px;
}
.nv-tp-modal__body .nv-form-row input[type="password"],
.nv-tp-modal__body .nv-form-row input[type="text"],
.nv-tp-modal__body .nv-form-row select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    font-size: 0.9rem;
    box-sizing: border-box;
}
.nv-tp-modal__body small { color: var(--color-muted); font-size: 0.74rem; }

@media (max-width: 900px) {
    .nv-tp-diario-grid { grid-template-columns: 1fr; }
    .nv-tp-diario-headbar { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   87. PAGINAÇÃO REUTILIZÁVEL
========================================================= */

.nv-tp-pag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin: 20px 0 8px;
    padding: 14px 16px;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
}
.nv-tp-pag__info {
    font-size: 0.86rem;
    color: var(--color-muted);
}
.nv-tp-pag__info strong {
    color: var(--color-ink);
    font-family: var(--font-display);
}
.nv-tp-pag__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.nv-tp-pag__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    text-decoration: none;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 600;
    transition: all 0.15s;
    cursor: pointer;
}
.nv-tp-pag__btn:hover {
    background: var(--color-ink);
    color: white;
    border-color: var(--color-ink);
}
.nv-tp-pag__btn.is-active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    cursor: default;
}
.nv-tp-pag__btn.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f3f4f6;
}
.nv-tp-pag__btn.is-disabled:hover {
    background: #f3f4f6;
    color: var(--color-ink);
    border-color: var(--color-line);
}
.nv-tp-pag__sep {
    padding: 0 4px;
    color: var(--color-muted);
    font-size: 0.9rem;
}

/* Texto "ver todas" no dashboard */
.nv-tp-canal-bloco__more {
    margin: 10px 14px 0;
    padding: 8px 12px;
    background: #f9fafb;
    border-radius: 6px;
    font-size: 0.84rem;
    color: var(--color-muted);
}
.nv-tp-canal-bloco__more strong {
    color: var(--color-ink);
}
.nv-tp-canal-bloco__more a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    margin-left: 4px;
}
.nv-tp-canal-bloco__more a:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .nv-tp-pag { flex-direction: column; align-items: stretch; }
    .nv-tp-pag__nav { justify-content: center; }
}

/* =========================================================
   88. PERMISSÕES — tela de configuração
========================================================= */

.nv-tp-header--config {
    background: linear-gradient(135deg, #1e3a5f 0%, #3b82f6 50%, #6366f1 100%) !important;
}

.nv-tp-perm-status {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.nv-tp-perm-status small {
    color: var(--color-muted);
    font-size: 0.84rem;
}

.nv-tp-perm-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-weight: 700;
}
.nv-tp-perm-tag--override { background: rgba(245,158,11,0.18); color: #b45309; }
.nv-tp-perm-tag--padrao   { background: rgba(59,130,246,0.18); color: #1d4ed8; }

.nv-tp-perm-form {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 22px 24px;
}

.nv-tp-perm-section {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-line);
}
.nv-tp-perm-section:last-of-type {
    border-bottom: 0;
    margin-bottom: 12px;
    padding-bottom: 0;
}
.nv-tp-perm-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.nv-tp-perm-section h2 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 1.06rem;
    font-weight: 800;
    color: var(--color-ink);
}
.nv-tp-perm-section p {
    margin: 0 0 14px;
    color: var(--color-muted);
    font-size: 0.88rem;
}

.nv-tp-perm-bulk { display: flex; gap: 6px; flex-wrap: wrap; }

/* Escopo (radios) */
.nv-tp-perm-escopo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.nv-tp-perm-radio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #f9fafb;
    border: 2px solid var(--color-line);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.nv-tp-perm-radio:has(input:checked) {
    background: rgba(59,130,246,0.05);
    border-color: #3b82f6;
}
.nv-tp-perm-radio input[disabled] + div { opacity: 0.5; }
.nv-tp-perm-radio:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.nv-tp-perm-radio input { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; cursor: pointer; }
.nv-tp-perm-radio strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.94rem;
    color: var(--color-ink);
    margin-bottom: 2px;
}
.nv-tp-perm-radio small { color: var(--color-muted); font-size: 0.82rem; }

/* Grid de cards de tela */
.nv-tp-perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.nv-tp-perm-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f9fafb;
    border: 2px solid var(--color-line);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.nv-tp-perm-card.is-on {
    background: rgba(16,185,129,0.06);
    border-color: #10b981;
}
.nv-tp-perm-card input { margin: 0; width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }
.nv-tp-perm-card__ic { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.nv-tp-perm-card__txt { flex: 1; min-width: 0; }
.nv-tp-perm-card__txt strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.86rem;
    color: var(--color-ink);
    line-height: 1.2;
}
.nv-tp-perm-card__txt code {
    font-size: 0.7rem;
    color: var(--color-muted);
    background: transparent;
    padding: 0;
}

/* Home (radios em grid) */
.nv-tp-perm-home {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.nv-tp-perm-home__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f9fafb;
    border: 2px solid var(--color-line);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.nv-tp-perm-home__opt:has(input:checked) {
    background: rgba(59,130,246,0.08);
    border-color: #3b82f6;
}
.nv-tp-perm-home__opt.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: #f3f4f6;
}
.nv-tp-perm-home__opt input { margin: 0; width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }
.nv-tp-perm-home__opt .ic { font-size: 1.2rem; line-height: 1; flex-shrink: 0; }
.nv-tp-perm-home__opt strong {
    font-family: var(--font-display);
    font-size: 0.86rem;
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nv-tp-perm-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.nv-tp-perm-info {
    margin-top: 18px;
    padding: 16px 18px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
}
.nv-tp-perm-info h3 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 0.94rem;
    color: #075985;
}
.nv-tp-perm-info ul {
    margin: 0;
    padding-left: 22px;
    color: #0c4a6e;
    font-size: 0.86rem;
    line-height: 1.7;
}

@media (max-width: 640px) {
    .nv-tp-perm-escopo { grid-template-columns: 1fr; }
}

/* =========================================================
   89. CLIENTE 360º — ficha consolidada
========================================================= */

.nv-cli-page { padding-bottom: 60px; }

.nv-cli-header {
    background: linear-gradient(135deg, #0d1b2a 0%, #1e3a5f 50%, #6366f1 100%);
    color: white;
    padding: 30px 0 24px;
}
.nv-cli-headtop {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 8px;
}
.nv-cli-avatar {
    width: 70px; height: 70px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
}
.nv-cli-id { flex: 1; min-width: 0; }
.nv-cli-id h1 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 800;
    color: white;
    line-height: 1.1;
}
.nv-cli-id .razao,
.nv-cli-id .email {
    margin: 2px 0;
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem;
}
.nv-cli-saude {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    color: white;
    font-size: 0.92rem;
    font-weight: 600;
    flex-shrink: 0;
}
.nv-cli-saude .dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 12px currentColor;
}

/* KPIs hero */
.nv-cli-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: -32px 0 24px;
    position: relative;
    z-index: 2;
}
.nv-cli-kpi {
    background: white;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 4px 18px rgba(13,27,42,0.1);
}
.nv-cli-kpi .lbl {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.nv-cli-kpi strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-ink);
    margin: 4px 0 2px;
}
.nv-cli-kpi small {
    color: var(--color-muted);
    font-size: 0.74rem;
}

/* Tabs */
.nv-cli-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--color-line);
    margin-bottom: 20px;
    overflow-x: auto;
}
.nv-cli-tab {
    background: transparent;
    border: 0;
    padding: 10px 16px;
    margin-bottom: -2px;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-muted);
    white-space: nowrap;
    transition: all 0.15s;
}
.nv-cli-tab:hover { color: var(--color-ink); }
.nv-cli-tab.is-active {
    color: var(--color-ink);
    border-bottom-color: var(--color-primary);
}

/* Seções */
.nv-cli-section { display: none; }
.nv-cli-section.is-active { display: block; animation: nvCliFade 0.2s ease; }
@keyframes nvCliFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.nv-cli-section h2 {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-ink);
}
.nv-cli-section__hint {
    margin: -8px 0 14px;
    color: var(--color-muted);
    font-size: 0.88rem;
}

/* Forms */
.nv-cli-form {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 20px 22px;
}
.nv-cli-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.nv-cli-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.nv-cli-form label,
.nv-cli-full {
    display: block;
    margin-bottom: 12px;
}
.nv-cli-form label > span {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}
.nv-cli-form input[type="text"],
.nv-cli-form input[type="email"],
.nv-cli-form input[type="tel"],
.nv-cli-form input[type="url"],
.nv-cli-form input[type="number"],
.nv-cli-form input[type="date"],
.nv-cli-form input[type="datetime-local"],
.nv-cli-form select,
.nv-cli-form textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    background: white;
    font-size: 0.92rem;
    font-family: inherit;
    box-sizing: border-box;
}
.nv-cli-form textarea { resize: vertical; min-height: 70px; }
.nv-cli-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

/* Projetos cards */
.nv-cli-projetos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.nv-cli-projeto {
    display: block;
    background: white;
    border: 1px solid var(--color-line);
    border-left: 4px solid var(--color-primary);
    border-radius: 10px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
}
.nv-cli-projeto:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(13,27,42,0.08);
}
.nv-cli-projeto__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.nv-cli-projeto__head strong {
    font-family: var(--font-display);
    font-size: 0.96rem;
    color: var(--color-ink);
}
.nv-cli-projeto__sub {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.82rem;
}

/* Financeiro */
.nv-cli-financeiro-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.nv-cli-fin-card {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 14px 16px;
}
.nv-cli-fin-card .lbl {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.nv-cli-fin-card strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--color-ink);
}
.nv-cli-fin-card small { color: var(--color-muted); font-size: 0.78rem; }

/* Upload anexos */
.nv-cli-upload {
    background: #f9fafb;
    border: 2px dashed var(--color-line);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.nv-cli-upload__row {
    display: grid;
    grid-template-columns: 1fr auto 2fr auto;
    gap: 8px;
    align-items: center;
}
.nv-cli-upload__file {
    position: relative;
    cursor: pointer;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    padding: 9px 14px;
    font-size: 0.88rem;
    color: var(--color-ink);
}
.nv-cli-upload__file input[type=file] {
    position: absolute; opacity: 0; inset: 0; cursor: pointer;
}
.nv-cli-upload select,
.nv-cli-upload input[type=text] {
    padding: 9px 12px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    font-size: 0.88rem;
    box-sizing: border-box;
}

/* Lista de anexos */
.nv-cli-anexos {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nv-cli-anexo {
    display: flex;
    align-items: center;
    gap: 14px;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 12px 14px;
}
.nv-cli-anexo__ic { font-size: 1.6rem; flex-shrink: 0; }
.nv-cli-anexo__info { flex: 1; min-width: 0; }
.nv-cli-anexo__info a { color: var(--color-ink); text-decoration: none; }
.nv-cli-anexo__info a:hover { color: var(--color-primary); }
.nv-cli-anexo__info strong { font-family: var(--font-display); font-size: 0.92rem; }
.nv-cli-anexo__info p { margin: 2px 0; color: #475569; font-size: 0.82rem; }
.nv-cli-anexo__info small { color: var(--color-muted); font-size: 0.74rem; }
.nv-cli-anexo__actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Timeline */
.nv-cli-timeline-filters {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.nv-cli-tipos {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.nv-cli-tipos__lbl {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
}
.nv-cli-tipo-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.8rem;
    background: white;
    transition: all 0.15s;
}
.nv-cli-tipo-chip input { display: none; }
.nv-cli-tipo-chip:has(input:checked) {
    background: var(--c);
    color: white;
    border-color: var(--c);
}
.nv-cli-timeline-filters__row {
    display: flex;
    gap: 8px;
    align-items: end;
    flex-wrap: wrap;
}
.nv-cli-timeline-filters__row label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.78rem;
    color: var(--color-muted);
}
.nv-cli-timeline-filters__row input[type=date] {
    padding: 7px 10px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    font-size: 0.86rem;
}

.nv-cli-evento-add {
    margin-bottom: 18px;
    background: #f9fafb;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 6px 14px;
}
.nv-cli-evento-add summary {
    cursor: pointer;
    padding: 8px 0;
    font-weight: 600;
    color: var(--color-ink);
}
.nv-cli-evento-add[open] summary { margin-bottom: 10px; }

.nv-cli-timeline {
    position: relative;
    padding-left: 8px;
}
.nv-cli-timeline__day {
    margin: 18px 0 8px;
    padding: 6px 12px;
    background: var(--color-ink);
    color: white;
    border-radius: 6px;
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: capitalize;
    display: inline-block;
}
.nv-cli-timeline__day:first-child { margin-top: 0; }

.nv-cli-timeline__item {
    display: flex;
    gap: 14px;
    margin: 0 0 10px;
    padding: 12px 14px;
    background: white;
    border: 1px solid var(--color-line);
    border-left: 4px solid var(--c, #6b7280);
    border-radius: 10px;
    position: relative;
}
.nv-cli-timeline__ic {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,1);
    border: 2px solid var(--c, #6b7280);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.nv-cli-timeline__body { flex: 1; min-width: 0; }
.nv-cli-timeline__head {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.nv-cli-timeline__tipo {
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
}
.nv-cli-timeline__hora { color: var(--color-muted); font-size: 0.78rem; }
.nv-cli-timeline__autor { color: var(--color-muted); font-size: 0.78rem; }
.nv-cli-timeline__auto {
    background: rgba(13,27,42,0.06);
    color: #475569;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}
.nv-cli-timeline__body strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.94rem;
    color: var(--color-ink);
}
.nv-cli-timeline__body p {
    margin: 4px 0 0;
    color: #475569;
    font-size: 0.86rem;
    line-height: 1.4;
}
.nv-cli-timeline__del {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-muted);
    font-size: 1rem;
    opacity: 0;
    transition: opacity 0.15s;
}
.nv-cli-timeline__item:hover .nv-cli-timeline__del { opacity: 1; }
.nv-cli-timeline__del:hover { color: #dc2626; }

@media (max-width: 1100px) {
    .nv-cli-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
    .nv-cli-headtop { flex-wrap: wrap; }
    .nv-cli-saude { width: 100%; justify-content: center; }
    .nv-cli-kpis { grid-template-columns: 1fr 1fr; margin-top: 12px; }
    .nv-cli-grid-2, .nv-cli-grid-3 { grid-template-columns: 1fr; }
    .nv-cli-upload__row { grid-template-columns: 1fr; }
}

/* =========================================================
   90. CRM — Kanban
========================================================= */

.nv-crm-page { padding-bottom: 40px; }

.nv-crm-header {
    background: linear-gradient(135deg, #0d1b2a 0%, #1e3a5f 50%, #10b981 100%);
    color: white;
    padding: 26px 0 22px;
}
.nv-crm-headtop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    flex-wrap: wrap;
    gap: 12px;
}
.nv-crm-headtop h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 800;
    color: white;
}
.nv-crm-headtop__actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Kanban */
.nv-crm-kanban {
    display: grid;
    grid-template-columns: repeat(7, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 14px;
    overflow-x: auto;
    padding-bottom: 14px;
}

.nv-crm-col {
    background: #f3f4f6;
    border-top: 4px solid var(--col-cor, #94a3b8);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    min-height: 400px;
}
.nv-crm-col__head {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    background: white;
    border-radius: 6px 6px 0 0;
}
.nv-crm-col__title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.nv-crm-col__title strong {
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--col-cor);
    flex: 1;
}
.nv-crm-col__count {
    background: var(--col-cor);
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
}
.nv-crm-col__total {
    font-size: 0.78rem;
    color: var(--color-muted);
    font-family: var(--font-display);
}
.nv-crm-col__body {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}
.nv-crm-col__body.is-over {
    background: rgba(0, 0, 0, 0.04);
    box-shadow: inset 0 0 0 2px var(--col-cor);
    border-radius: 6px;
}

.nv-crm-empty {
    color: #9ca3af;
    text-align: center;
    padding: 16px 8px;
    font-size: 0.82rem;
    border: 2px dashed #e5e7eb;
    border-radius: 6px;
}

.nv-crm-card {
    background: white;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    cursor: grab;
    transition: transform 0.15s, box-shadow 0.15s;
    border-left: 3px solid var(--col-cor);
}
.nv-crm-card:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.nv-crm-card:active { cursor: grabbing; }
.nv-crm-card.is-dragging { opacity: 0.4; }

.nv-crm-card__head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    align-items: flex-start;
}
.nv-crm-card__title {
    flex: 1;
    color: var(--color-ink);
    text-decoration: none;
    min-width: 0;
}
.nv-crm-card__title strong {
    font-family: var(--font-display);
    font-size: 0.86rem;
    color: var(--color-ink);
    display: block;
    line-height: 1.2;
}
.nv-crm-card__title:hover strong { color: var(--color-primary); }

.nv-crm-card__avatar {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--col-cor);
    color: white;
    font-size: 0.62rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nv-crm-card__contato {
    margin: 2px 0 4px;
    font-size: 0.76rem;
    color: var(--color-muted);
}

.nv-crm-card__valor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 6px 0;
}
.nv-crm-card__valor .valor {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--color-ink);
}
.nv-crm-card__valor .prob {
    background: rgba(0,0,0,0.05);
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #475569;
}

.nv-crm-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.nv-crm-card__meta .tag {
    background: rgba(0,0,0,0.05);
    color: #475569;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
}

@media (max-width: 1100px) {
    .nv-crm-kanban { grid-template-columns: repeat(7, 240px); }
}

/* =========================================================
   91. CRM — Prospect (detalhe)
========================================================= */

.nv-prospect-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.nv-prospect-head__main { flex: 1; min-width: 0; }
.nv-prospect-head__main h1 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 800;
    color: white;
    line-height: 1.1;
}
.nv-prospect-head__main .contato {
    color: rgba(255,255,255,0.85);
    margin: 4px 0 12px;
    font-size: 0.94rem;
}
.nv-prospect-head__pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.nv-prospect-head__valor {
    text-align: right;
    color: white;
    flex-shrink: 0;
}
.nv-prospect-head__valor strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
}
.nv-prospect-head__valor small {
    color: rgba(255,255,255,0.75);
    font-size: 0.78rem;
}
.nv-prospect-head__valor .prob {
    margin-top: 8px;
    padding: 4px 12px;
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 700;
}

/* Banner de convertido */
.nv-prospect-converted {
    background: linear-gradient(135deg, rgba(16,185,129,0.15) 0%, rgba(16,185,129,0.05) 100%);
    border: 1px solid #6ee7b7;
    border-left: 4px solid #10b981;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 18px;
}
.nv-prospect-converted strong { color: #047857; font-family: var(--font-display); }
.nv-prospect-converted p { margin: 4px 0 0; color: #065f46; font-size: 0.9rem; }
.nv-prospect-converted a { color: #047857; font-weight: 600; }

/* Botões de estágio rápido */
.nv-prospect-stages {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 12px 14px;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
}
.nv-prospect-stages__lbl {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    margin-right: 6px;
}
.nv-prospect-stage {
    padding: 6px 12px;
    border: 2px solid var(--c);
    background: white;
    color: var(--c);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.nv-prospect-stage:hover:not(:disabled) {
    background: var(--c);
    color: white;
}
.nv-prospect-stage.is-current {
    background: var(--c);
    color: white;
    cursor: default;
}
.nv-prospect-stage:disabled:not(.is-current) { opacity: 0.5; cursor: not-allowed; }

/* Layout 2 colunas */
.nv-prospect-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 18px;
    align-items: start;
}
.nv-prospect-main { min-width: 0; }
.nv-prospect-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nv-prospect-main h2 {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: 1.16rem;
    font-weight: 800;
    color: var(--color-ink);
}
.nv-prospect-section {
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-line);
}
.nv-prospect-section:first-of-type { margin-top: 0; }

/* Side cards */
.nv-side-card {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 14px 16px;
}
.nv-side-card h3 {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 0.94rem;
    font-weight: 800;
    color: var(--color-ink);
}
.nv-side-card label {
    display: block;
    margin-bottom: 10px;
}
.nv-side-card label > span {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.nv-side-card input[type="text"],
.nv-side-card input[type="date"],
.nv-side-card select,
.nv-side-card textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    font-size: 0.88rem;
    box-sizing: border-box;
    font-family: inherit;
}

/* Histórico */
.nv-prospect-historico {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nv-prospect-historico li {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: #f9fafb;
    border-radius: 8px;
    border-left: 3px solid var(--color-primary);
}
.nv-prospect-historico .ic {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.94rem;
}
.nv-prospect-historico .body {
    flex: 1;
    min-width: 0;
    position: relative;
}
.nv-prospect-historico .head {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
    align-items: center;
}
.nv-prospect-historico .tipo {
    background: rgba(13,27,42,0.08);
    color: #475569;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.nv-prospect-historico .data { color: var(--color-muted); font-size: 0.74rem; }
.nv-prospect-historico .autor { color: var(--color-muted); font-size: 0.74rem; }
.nv-prospect-historico .body strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.86rem;
    color: var(--color-ink);
}
.nv-prospect-historico .resultado {
    margin: 4px 0 0;
    color: #047857;
    font-size: 0.82rem;
    font-weight: 600;
}
.nv-prospect-historico .conteudo {
    margin: 4px 0 0;
    color: #475569;
    font-size: 0.82rem;
    line-height: 1.4;
}
.nv-prospect-historico .excluir {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-muted);
    font-size: 0.84rem;
    opacity: 0;
    transition: opacity 0.15s;
}
.nv-prospect-historico li:hover .excluir { opacity: 1; }
.nv-prospect-historico .excluir:hover { color: #dc2626; }

@media (max-width: 1000px) {
    .nv-prospect-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .nv-prospect-head { flex-direction: column; align-items: stretch; }
    .nv-prospect-head__valor { text-align: left; }
}

/* =========================================================
   92. CRM — Form dentro de Modal (novo prospect, etc)
========================================================= */

/* Quando o .nv-cli-form está dentro de modal, remove a "caixa" extra
   já que o modal já tem padding e fundo branco */
.nv-tp-modal__body .nv-cli-form {
    background: transparent;
    border: 0;
    padding: 0;
}

/* Garante que selects e inputs do modal tenham aparência consistente
   mesmo sem a classe .nv-cli-form */
.nv-tp-modal__body input[type="text"],
.nv-tp-modal__body input[type="email"],
.nv-tp-modal__body input[type="tel"],
.nv-tp-modal__body input[type="url"],
.nv-tp-modal__body input[type="number"],
.nv-tp-modal__body input[type="date"],
.nv-tp-modal__body input[type="datetime-local"],
.nv-tp-modal__body select,
.nv-tp-modal__body textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    background: white;
    font-size: 0.92rem;
    font-family: inherit;
    box-sizing: border-box;
}
.nv-tp-modal__body textarea { resize: vertical; min-height: 70px; }

.nv-tp-modal__body label {
    display: block;
    margin-bottom: 12px;
}
.nv-tp-modal__body label > span {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

/* Grid dentro do modal */
.nv-tp-modal__body .nv-cli-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}
.nv-tp-modal__body .nv-cli-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}
.nv-tp-modal__body .nv-cli-full {
    display: block;
}

@media (max-width: 640px) {
    .nv-tp-modal__body .nv-cli-grid-2,
    .nv-tp-modal__body .nv-cli-grid-3 { grid-template-columns: 1fr; }
}

/* =========================================================
   93. CRM — Dashboard de Vendas
========================================================= */

.nv-crm-funil {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
}
.nv-crm-funil-row {
    display: grid;
    grid-template-columns: 180px 1fr 160px;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}
.nv-crm-funil-row:last-child { border-bottom: 0; }
.nv-crm-funil-row__lbl {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nv-crm-funil-row__lbl .ic {
    font-size: 1.2rem;
    width: 32px; height: 32px;
    background: white;
    border: 2px solid var(--c);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nv-crm-funil-row__lbl strong {
    font-family: var(--font-display);
    font-size: 0.94rem;
    color: var(--color-ink);
}
.nv-crm-funil-row__bar {
    background: #f3f4f6;
    border-radius: 6px;
    height: 28px;
    overflow: hidden;
    position: relative;
}
.nv-crm-funil-row__fill {
    background: var(--c, var(--color-primary));
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    color: white;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.86rem;
    min-width: 30px;
    transition: width 0.3s;
    box-sizing: border-box;
}
.nv-crm-funil-row__valor {
    text-align: right;
    font-family: var(--font-display);
    font-size: 0.94rem;
    font-weight: 800;
    color: var(--color-ink);
}
.nv-crm-funil-row__valor small {
    color: var(--color-muted);
    font-size: 0.74rem;
    font-weight: 400;
}

.nv-crm-funil-final {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 2px dashed var(--color-line);
}

/* Análise grid */
.nv-crm-analise-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 24px;
}
.nv-crm-analise-card {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 20px 22px;
}

/* =========================================================
   94. CRM Config — Origens
========================================================= */

.nv-crm-origens-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nv-crm-origem-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f9fafb;
    border: 1px solid var(--color-line);
    border-radius: 8px;
}
.nv-crm-origem-item input[type=text] {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    font-size: 0.92rem;
    background: white;
}
.nv-crm-origem-slug {
    background: rgba(13,27,42,0.06);
    color: #475569;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .nv-crm-analise-grid { grid-template-columns: 1fr; }
    .nv-crm-funil-row { grid-template-columns: 140px 1fr 110px; gap: 10px; }
}
@media (max-width: 640px) {
    .nv-crm-funil-row { grid-template-columns: 1fr; gap: 6px; }
    .nv-crm-funil-row__valor { text-align: left; }
}

/* =========================================================
   95. ONBOARDING — Templates (CRUD)
========================================================= */

.nv-onb-templates-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.nv-onb-template-card {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 16px 18px;
    transition: box-shadow 0.15s, transform 0.15s;
    display: flex;
    flex-direction: column;
}
.nv-onb-template-card:hover { box-shadow: 0 6px 16px rgba(13,27,42,0.08); }
.nv-onb-template-card.is-inativo { opacity: 0.6; background: #f9fafb; }

.nv-onb-template-card__head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.nv-onb-template-card__head h3 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 1.04rem;
    font-weight: 800;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.nv-onb-template-card__head p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.84rem;
    line-height: 1.4;
}
.nv-onb-template-card__stats {
    text-align: center;
    background: rgba(139,92,246,0.08);
    color: #7c3aed;
    padding: 6px 12px;
    border-radius: 8px;
    flex-shrink: 0;
}
.nv-onb-template-card__stats strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
}
.nv-onb-template-card__stats small {
    font-size: 0.72rem;
    color: var(--color-muted);
}

.nv-onb-template-passos {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    border-top: 1px dashed var(--color-line);
    padding-top: 10px;
    flex: 1;
}
.nv-onb-template-passos li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.86rem;
    color: var(--color-ink);
}
.nv-onb-template-passos .num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(13,27,42,0.06);
    color: #475569;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nv-onb-template-passos .badge {
    margin-left: auto;
    font-size: 0.86rem;
}
.nv-onb-template-passos .mais {
    color: var(--color-muted);
    font-size: 0.82rem;
    font-style: italic;
    padding-top: 4px;
}

.nv-onb-template-card__actions {
    display: flex;
    gap: 6px;
    border-top: 1px solid var(--color-line);
    padding-top: 10px;
}

/* Editor de template */
.nv-onb-passos-edit {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nv-onb-passo-edit {
    background: #f9fafb;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    transition: box-shadow 0.15s;
}
.nv-onb-passo-edit.is-dragging { opacity: 0.4; }
.nv-onb-passo-edit__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}
.nv-onb-passo-edit__head .drag-handle {
    cursor: grab;
    color: var(--color-muted);
    font-size: 1.2rem;
    user-select: none;
    padding: 0 2px;
}
.nv-onb-passo-edit__head .drag-handle:active { cursor: grabbing; }
.nv-onb-passo-edit__head .num {
    background: #8b5cf6;
    color: white;
    width: 26px; height: 26px;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nv-onb-passo-edit__head .passo-titulo {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    background: white;
    font-size: 0.92rem;
    font-family: inherit;
}

.nv-onb-passo-edit__body {
    padding: 12px 14px 14px 46px;
    border-top: 1px solid var(--color-line);
    background: white;
}

.nv-onb-dep-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 6px 4px 0;
    padding: 4px 10px;
    background: rgba(139,92,246,0.05);
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: 999px;
    font-size: 0.82rem;
    cursor: pointer;
}
.nv-onb-dep-opt:has(input:checked) {
    background: rgba(139,92,246,0.18);
    border-color: #8b5cf6;
    color: #5b21b6;
    font-weight: 600;
}

@media (max-width: 640px) {
    .nv-onb-passo-edit__body { padding-left: 14px; }
}

/* =========================================================
   96. ONBOARDING — Execução (checklist)
========================================================= */

.nv-onb-exec-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.nv-onb-exec-head h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 800;
    color: white;
}
.nv-onb-exec-progresso {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    padding: 8px 16px;
}
.nv-onb-exec-progresso .circ {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: conic-gradient(#10b981 calc(var(--pct) * 1%), rgba(255,255,255,0.15) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.nv-onb-exec-progresso .circ::before {
    content: '';
    position: absolute;
    inset: 5px;
    background: #1e3a5f;
    border-radius: 50%;
}
.nv-onb-exec-progresso .circ strong {
    position: relative;
    color: white;
    font-family: var(--font-display);
    font-size: 0.96rem;
    font-weight: 800;
}
.nv-onb-exec-progresso .info { color: white; }
.nv-onb-exec-progresso .info strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.94rem;
    font-weight: 700;
}
.nv-onb-exec-progresso .info small {
    display: block;
    color: rgba(255,255,255,0.75);
    font-size: 0.78rem;
}

/* Stats por status */
.nv-onb-exec-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.nv-onb-exec-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border: 1px solid var(--color-line);
    border-left: 4px solid var(--c);
    border-radius: 10px;
    padding: 10px 14px;
}
.nv-onb-exec-stat .ic {
    font-size: 1.5rem;
    color: var(--c);
}
.nv-onb-exec-stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-ink);
    line-height: 1;
}
.nv-onb-exec-stat small {
    color: var(--color-muted);
    font-size: 0.78rem;
}

/* Lista de passos */
.nv-onb-passos-exec {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nv-onb-passo-exec {
    display: flex;
    gap: 14px;
    background: white;
    border: 1px solid var(--color-line);
    border-left: 4px solid var(--c, #94a3b8);
    border-radius: 10px;
    padding: 14px 16px;
    transition: opacity 0.2s;
}
.nv-onb-passo-exec.is-concluido {
    background: rgba(16,185,129,0.04);
    opacity: 0.88;
}
.nv-onb-passo-exec.is-bloqueado {
    background: #f9fafb;
    opacity: 0.55;
}
.nv-onb-passo-exec.is-atrasado {
    box-shadow: inset 0 0 0 1px rgba(220,38,38,0.4);
}

.nv-onb-passo-exec__num {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--c, #94a3b8);
    color: white;
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nv-onb-passo-exec__body { flex: 1; min-width: 0; }

.nv-onb-passo-exec__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.nv-onb-passo-exec__head strong {
    font-family: var(--font-display);
    font-size: 1.02rem;
    color: var(--color-ink);
    line-height: 1.3;
    flex: 1;
    min-width: 200px;
}
.nv-onb-passo-exec.is-concluido .nv-onb-passo-exec__head strong {
    text-decoration: line-through;
    color: var(--color-muted);
}
.nv-onb-passo-exec__head .badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.nv-onb-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(13,27,42,0.06);
    color: #475569;
    white-space: nowrap;
}
.nv-onb-badge--status { background: rgba(var(--c-rgb, 148,163,184), 0.15); color: var(--c); }
.nv-onb-badge--cliente { background: rgba(59,130,246,0.1); color: #1d4ed8; }
.nv-onb-badge--prazo { background: rgba(59,130,246,0.1); color: #1d4ed8; }
.nv-onb-badge--atrasado { background: rgba(220,38,38,0.12); color: #b91c1c; font-weight: 700; }

.nv-onb-passo-exec__desc {
    margin: 4px 0 8px;
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.5;
}

.nv-onb-passo-exec__deps {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 6px 0;
    font-size: 0.78rem;
}
.nv-onb-passo-exec__deps small { color: var(--color-muted); font-weight: 600; }
.nv-onb-passo-exec__deps .dep {
    background: rgba(139,92,246,0.1);
    color: #6d28d9;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.nv-onb-subtasks {
    list-style: none;
    padding: 0;
    margin: 8px 0;
    background: #f9fafb;
    border-radius: 6px;
    padding: 8px 12px;
}
.nv-onb-subtasks li { padding: 3px 0; }
.nv-onb-subtasks label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.nv-onb-subtasks input { margin: 0; width: 16px; height: 16px; cursor: pointer; }
.nv-onb-subtasks span { font-size: 0.86rem; color: #334155; }
.nv-onb-subtasks span.is-done { text-decoration: line-through; color: var(--color-muted); }

.nv-onb-passo-exec__anexos {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 6px 0;
    font-size: 0.78rem;
}
.nv-onb-passo-exec__anexos small { color: var(--color-muted); font-weight: 600; }
.nv-onb-passo-exec__anexos .anx {
    background: rgba(245,158,11,0.1);
    color: #b45309;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.nv-onb-passo-exec__nota {
    margin: 6px 0;
    padding: 6px 10px;
    background: rgba(59,130,246,0.05);
    border-left: 3px solid #3b82f6;
    color: #1e3a8a;
    font-size: 0.82rem;
    border-radius: 4px;
}

.nv-onb-passo-exec__concl {
    margin: 6px 0 0;
    color: #047857;
    font-size: 0.8rem;
    font-weight: 600;
}

.nv-onb-passo-exec__actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-line);
}

.nv-onb-passo-exec__bloqueado {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(220,38,38,0.05);
    border-radius: 6px;
    color: #991b1b;
    font-size: 0.84rem;
    font-weight: 600;
}

/* Cards de template (quando não tem instância) */
.nv-onb-tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.nv-onb-tpl-card {
    background: white;
    border: 2px solid var(--color-line);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s, transform 0.15s;
}
.nv-onb-tpl-card:hover {
    border-color: #8b5cf6;
    transform: translateY(-2px);
}
.nv-onb-tpl-card h3 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--color-ink);
}
.nv-onb-tpl-card p {
    margin: 0 0 10px;
    color: var(--color-muted);
    font-size: 0.86rem;
    flex: 1;
}
.nv-onb-tpl-stats {
    margin: 10px 0;
    padding: 8px 12px;
    background: rgba(139,92,246,0.08);
    color: #6d28d9;
    border-radius: 6px;
    font-size: 0.86rem;
    text-align: center;
}
.nv-onb-tpl-stats strong { font-family: var(--font-display); font-size: 1.1rem; }

/* Onboarding mini no card de projeto do Cliente 360 */
.nv-cli-projeto__onb {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-line);
}
.nv-cli-projeto__onb .bar {
    height: 6px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 4px;
}
.nv-cli-projeto__onb .bar .fill {
    height: 100%;
    transition: width 0.3s;
}
.nv-cli-projeto__onb small {
    color: var(--color-muted);
    font-size: 0.76rem;
}
.nv-cli-projeto__onb small strong {
    color: var(--color-ink);
    font-family: var(--font-display);
}

@media (max-width: 900px) {
    .nv-onb-exec-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .nv-onb-exec-stats { grid-template-columns: 1fr; }
    .nv-onb-passo-exec { flex-direction: column; gap: 8px; }
    .nv-onb-exec-head { flex-direction: column; align-items: stretch; }
}

/* =========================================================
   97. FINANCEIRO — Listas
========================================================= */

.nv-fin-page { padding-bottom: 40px; }

.nv-fin-headtop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    flex-wrap: wrap;
    gap: 12px;
}
.nv-fin-headtop h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 800;
    color: white;
}
.nv-fin-headtop__actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* =========================================================
   98. EQUIPE — Cards, papéis, detalhe
========================================================= */

.nv-eqp-page { padding-bottom: 40px; }

/* Grid de cards na lista */
.nv-eqp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.nv-eqp-card {
    display: block;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--color-ink);
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.nv-eqp-card:hover {
    box-shadow: 0 6px 16px rgba(13,27,42,0.08);
    transform: translateY(-2px);
    border-color: #f59e0b;
}

.nv-eqp-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.nv-eqp-card__avatar {
    border-radius: 50%;
    flex-shrink: 0;
}
.nv-eqp-card__head strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--color-ink);
}
.nv-eqp-card__head small {
    display: block;
    color: var(--color-muted);
    font-size: 0.82rem;
}

.nv-eqp-card__papeis,
.nv-eqp-detail-head__papeis {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

.nv-eqp-papel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(0,0,0,0);
    background-color: color-mix(in srgb, var(--c) 12%, white);
    color: var(--c);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
}

.nv-eqp-card__capacidade {
    margin: 12px 0;
}
.nv-eqp-card__cap-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}
.nv-eqp-card__cap-head small { color: var(--color-muted); font-size: 0.84rem; }
.nv-eqp-card__cap-head strong {
    font-family: var(--font-display);
    font-size: 1.04rem;
    font-weight: 800;
}
.nv-eqp-card__bar {
    height: 8px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 4px;
}
.nv-eqp-card__bar-fill {
    height: 100%;
    transition: width 0.3s;
}

.nv-eqp-card__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-line);
}
.nv-eqp-card__stats div { text-align: center; }
.nv-eqp-card__stats strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.04rem;
    font-weight: 800;
    color: var(--color-ink);
}
.nv-eqp-card__stats small {
    display: block;
    color: var(--color-muted);
    font-size: 0.72rem;
}

/* Detalhe do membro */
.nv-eqp-detail-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.nv-eqp-detail-head__avatar {
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
}
.nv-eqp-detail-head__info { flex: 1; min-width: 250px; }
.nv-eqp-detail-head__info h1 {
    margin: 0;
    color: white;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 800;
}
.nv-eqp-detail-head__info p {
    margin: 4px 0 8px;
    color: rgba(255,255,255,0.85);
    font-size: 0.94rem;
}

/* Picker de papéis (modal de membro) */
.nv-eqp-papeis-pick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.nv-eqp-papel-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c) 8%, white);
    border: 1.5px solid color-mix(in srgb, var(--c) 20%, transparent);
    color: var(--c);
    font-size: 0.86rem;
    cursor: pointer;
    font-weight: 600;
}
.nv-eqp-papel-opt:has(input:checked) {
    background: color-mix(in srgb, var(--c) 18%, white);
    border-color: var(--c);
    font-weight: 800;
}
.nv-eqp-papel-opt input {
    margin: 0;
    accent-color: var(--c);
}

/* Lista de papéis (config) */
.nv-eqp-papeis-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nv-eqp-papel-row {
    display: grid;
    grid-template-columns: 60px 1fr 60px 80px 110px 36px;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--c) 4%, white);
    border: 1px solid color-mix(in srgb, var(--c) 18%, var(--color-line));
    border-left: 4px solid var(--c);
    border-radius: 8px;
}
.nv-eqp-papel-row input[type=text],
.nv-eqp-papel-row input[type=number] {
    padding: 6px 10px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    background: white;
    font-size: 0.9rem;
    font-family: inherit;
}
.nv-eqp-papel-row .p-icon {
    text-align: center;
    font-size: 1.1rem;
}
.nv-eqp-papel-row .p-color {
    width: 60px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    cursor: pointer;
}
.nv-eqp-papel-row .p-slug {
    background: rgba(13,27,42,0.06);
    color: #475569;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 700px) {
    .nv-eqp-papel-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 'icon label' 'color horas' 'slug remove';
    }
}

/* =========================================================
   99. EQUIPE — Dashboard executivo + Heatmap
========================================================= */

/* Alertas */
.nv-eqp-alertas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 16px 0;
}
.nv-eqp-alerta {
    background: white;
    border: 1px solid var(--color-line);
    border-left: 4px solid;
    border-radius: 10px;
    padding: 14px 16px;
}
.nv-eqp-alerta--vermelho { border-left-color: #dc2626; background: rgba(220,38,38,0.04); }
.nv-eqp-alerta--verde    { border-left-color: #10b981; background: rgba(16,185,129,0.04); }
.nv-eqp-alerta h3 {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 0.96rem;
    font-weight: 800;
    color: var(--color-ink);
}
.nv-eqp-alerta ul { list-style: none; padding: 0; margin: 0; }
.nv-eqp-alerta li { padding: 4px 0; border-bottom: 1px dashed rgba(13,27,42,0.08); }
.nv-eqp-alerta li:last-child { border-bottom: 0; }
.nv-eqp-alerta li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: var(--color-ink);
    font-size: 0.9rem;
}
.nv-eqp-alerta--vermelho li span { color: #dc2626; font-weight: 800; }
.nv-eqp-alerta--verde li span    { color: #10b981; font-weight: 800; }

/* Heatmap */
.nv-eqp-heatmap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}
.nv-eqp-heat-cell {
    display: block;
    text-decoration: none;
    color: var(--color-ink);
    background: white;
    border: 1px solid var(--color-line);
    border-left: 4px solid var(--c);
    border-radius: 8px;
    padding: 10px 12px;
    transition: box-shadow 0.15s;
}
.nv-eqp-heat-cell:hover { box-shadow: 0 4px 12px rgba(13,27,42,0.08); }
.nv-eqp-heat-cell__top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.nv-eqp-heat-cell__top .avatar { border-radius: 50%; flex-shrink: 0; }
.nv-eqp-heat-cell__top strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-ink);
}
.nv-eqp-heat-cell__top small {
    color: var(--color-muted);
    font-size: 0.74rem;
}
.nv-eqp-heat-cell__bar {
    position: relative;
    height: 22px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
}
.nv-eqp-heat-cell__bar .fill {
    height: 100%;
    transition: width 0.3s;
}
.nv-eqp-heat-cell__bar .pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    color: white;
    font-size: 0.82rem;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

@media (max-width: 700px) {
    .nv-eqp-alertas { grid-template-columns: 1fr; }
}

/* =========================================================
   100. EQUIPE — Cards de alocação (Cliente 360 + Projeto)
========================================================= */

.nv-cli-equipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.nv-cli-equipe-card {
    display: block;
    text-decoration: none;
    color: var(--color-ink);
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 14px 16px;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.nv-cli-equipe-card:hover {
    box-shadow: 0 4px 12px rgba(13,27,42,0.08);
    transform: translateY(-2px);
    border-color: #f59e0b;
}
.nv-cli-equipe-card.is-resp {
    border-left: 4px solid #dc2626;
    background: linear-gradient(90deg, rgba(220,38,38,0.04) 0%, white 30%);
}

.nv-cli-equipe-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.nv-cli-equipe-card__head .avatar { border-radius: 50%; flex-shrink: 0; }
.nv-cli-equipe-card__head strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.96rem;
    font-weight: 800;
    color: var(--color-ink);
}
.nv-cli-equipe-card__head small {
    display: block;
    color: var(--color-muted);
    font-size: 0.78rem;
}

.nv-cli-equipe-card__papeis {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.nv-cli-equipe-card__horas {
    padding-top: 8px;
    border-top: 1px dashed var(--color-line);
    font-size: 0.84rem;
    color: var(--color-muted);
}
.nv-cli-equipe-card__horas strong {
    font-family: var(--font-display);
    font-size: 1.02rem;
    color: var(--color-ink);
    font-weight: 800;
}

/* =========================================================
   101. PAINEL EXECUTIVO
========================================================= */

.nv-pnl-page { padding-bottom: 40px; }

.nv-pnl-headtop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
}
.nv-pnl-headtop__actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Seletor de período (tabs) */
.nv-pnl-cmp-tabs {
    display: flex;
    gap: 4px;
    margin: 12px 0 18px;
    border-bottom: 2px solid var(--color-line);
}
.nv-pnl-cmp-tab {
    padding: 10px 16px;
    text-decoration: none;
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.nv-pnl-cmp-tab:hover { color: var(--color-ink); }
.nv-pnl-cmp-tab.is-active {
    color: #e37220;
    border-bottom-color: #e37220;
    font-weight: 700;
}

/* Grid de cards saúde + ações */
.nv-pnl-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 18px;
    margin-bottom: 24px;
}
.nv-pnl-card {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 20px 22px;
}

/* Semáforo de saúde */
.nv-pnl-semaforo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.nv-pnl-saude-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: 12px;
}
.nv-pnl-saude-row .info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
}
.nv-pnl-saude-row .dot { font-size: 1.2rem; }
.nv-pnl-saude-row .bar {
    position: relative;
    height: 28px;
    background: #f3f4f6;
    border-radius: 6px;
    overflow: hidden;
}
.nv-pnl-saude-row .fill {
    height: 100%;
    transition: width 0.3s;
}
.nv-pnl-saude-row--verde    .fill { background: #10b981; }
.nv-pnl-saude-row--amarelo  .fill { background: #f59e0b; }
.nv-pnl-saude-row--vermelho .fill { background: #dc2626; }
.nv-pnl-saude-row .count {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    color: white;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.94rem;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.nv-pnl-drill {
    padding-top: 12px;
    border-top: 1px dashed var(--color-line);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
}
.nv-pnl-drill small { color: var(--color-muted); }
.nv-pnl-drill .chip {
    background: rgba(220,38,38,0.1);
    color: #b91c1c;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}
.nv-pnl-drill .chip:hover { background: rgba(220,38,38,0.18); }

/* Ações prioritárias */
.nv-pnl-acoes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nv-pnl-acoes li a {
    display: grid;
    grid-template-columns: 40px 1fr 20px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-ink);
    background: #f9fafb;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.nv-pnl-acoes li a:hover {
    background: rgba(227,114,32,0.06);
    border-color: rgba(227,114,32,0.2);
}
.nv-pnl-acoes .ic { font-size: 1.4rem; text-align: center; }
.nv-pnl-acoes .txt strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-ink);
}
.nv-pnl-acoes .txt small {
    display: block;
    color: var(--color-muted);
    font-size: 0.76rem;
    margin-top: 2px;
}
.nv-pnl-acoes .prio {
    color: var(--color-muted);
    font-weight: 800;
}

/* Metas grid */
.nv-pnl-metas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.nv-pnl-meta-card {
    background: white;
    border: 1px solid var(--color-line);
    border-left: 4px solid var(--c);
    border-radius: 10px;
    padding: 14px 16px;
}
.nv-pnl-meta-card__head {
    display: grid;
    grid-template-columns: 40px 1fr 60px;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.nv-pnl-meta-card__head .ic {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.nv-pnl-meta-card__head strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.94rem;
    color: var(--color-ink);
}
.nv-pnl-meta-card__head small {
    display: block;
    color: var(--color-muted);
    font-size: 0.78rem;
}
.nv-pnl-meta-card__head .pct {
    text-align: right;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
}
.nv-pnl-meta-card__bar {
    height: 8px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}
.nv-pnl-meta-card__bar .fill {
    height: 100%;
    transition: width 0.4s;
}
.nv-pnl-meta-card__nums {
    display: flex;
    justify-content: space-between;
    color: var(--color-muted);
    font-size: 0.82rem;
}
.nv-pnl-meta-card__nums strong { color: var(--color-ink); font-family: var(--font-display); }
.nv-pnl-meta-card__proj {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-line);
    font-size: 0.82rem;
    color: var(--color-muted);
}
.nv-pnl-meta-card__proj strong { color: var(--color-ink); font-family: var(--font-display); }

/* Feed */
.nv-pnl-feed {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 8px 12px;
}
.nv-pnl-feed-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px dashed rgba(13,27,42,0.08);
}
.nv-pnl-feed-item:last-child { border-bottom: 0; }
.nv-pnl-feed-item .ic {
    font-size: 1.3rem;
    text-align: center;
    line-height: 1.6;
}
.nv-pnl-feed-item .head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.nv-pnl-feed-item .head strong {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--color-ink);
}
.nv-pnl-feed-item .head .cli {
    color: #1e3a5f;
    text-decoration: none;
    font-size: 0.78rem;
}
.nv-pnl-feed-item .head .cli:hover { text-decoration: underline; }
.nv-pnl-feed-item small {
    display: block;
    color: var(--color-muted);
    font-size: 0.8rem;
    margin-top: 2px;
}
.nv-pnl-feed-item small.ts { font-size: 0.74rem; font-style: italic; }

@media (max-width: 900px) {
    .nv-pnl-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .nv-pnl-cmp-tabs { flex-wrap: wrap; }
    .nv-pnl-saude-row { grid-template-columns: 100px 1fr; }
}

/* =========================================================
   102. PAINEL — Sugestões de meta
========================================================= */

.nv-pnl-sugestoes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.nv-pnl-sugestao {
    background: white;
    border: 2px dashed var(--c);
    border-radius: 10px;
    padding: 14px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: var(--color-ink);
    transition: background 0.15s, transform 0.15s;
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto auto;
    gap: 4px 10px;
    align-items: center;
}
.nv-pnl-sugestao:hover {
    background: color-mix(in srgb, var(--c) 8%, white);
    transform: translateY(-2px);
}
.nv-pnl-sugestao .ic {
    grid-row: 1 / span 3;
    font-size: 1.6rem;
    text-align: center;
    align-self: center;
}
.nv-pnl-sugestao strong {
    font-family: var(--font-display);
    font-size: 0.86rem;
    color: var(--color-ink);
    font-weight: 700;
}
.nv-pnl-sugestao .val {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--c);
}
.nv-pnl-sugestao small {
    color: var(--color-muted);
    font-size: 0.74rem;
}

/* =========================================================
   103. HEADER — Botão Painel Executivo
========================================================= */

.header-cta.header-cta--painel {
    background: linear-gradient(135deg, #e37220 0%, #f59e0b 100%);
    color: white;
    font-family: var(--font-display);
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(227,114,32,0.3);
    transition: box-shadow 0.15s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}
.header-cta.header-cta--painel:hover {
    box-shadow: 0 4px 14px rgba(227,114,32,0.5);
    transform: translateY(-1px);
}

/* =========================================================
   105. CLIENTES — Lista + Widget
========================================================= */

.nv-cli-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.nv-cli-list-card {
    display: block;
    text-decoration: none;
    color: var(--color-ink);
    background: white;
    border: 1px solid var(--color-line);
    border-left: 4px solid var(--saude);
    border-radius: 10px;
    padding: 14px 16px;
    transition: box-shadow 0.15s, transform 0.15s;
}
.nv-cli-list-card:hover {
    box-shadow: 0 6px 14px rgba(13,27,42,0.08);
    transform: translateY(-2px);
}
.nv-cli-list-card.is-bloqueado {
    background: linear-gradient(90deg, rgba(220,38,38,0.04) 0%, white 50%);
}

.nv-cli-list-card__head {
    display: grid;
    grid-template-columns: 48px 1fr 26px;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.nv-cli-list-card__head .avatar { border-radius: 50%; }
.nv-cli-list-card__head strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.96rem;
    color: var(--color-ink);
    font-weight: 800;
    line-height: 1.2;
}
.nv-cli-list-card__head small {
    display: block;
    color: var(--color-muted);
    font-size: 0.78rem;
    margin-top: 2px;
}
.nv-cli-list-card__head .saude { font-size: 1.2rem; text-align: center; }

.nv-cli-list-card__alert {
    background: rgba(220,38,38,0.1);
    color: #b91c1c;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.nv-cli-list-card__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-line);
}
.nv-cli-list-card__stats div { text-align: center; }
.nv-cli-list-card__stats strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.94rem;
    font-weight: 800;
}
.nv-cli-list-card__stats small {
    display: block;
    color: var(--color-muted);
    font-size: 0.7rem;
}

.nv-cli-list-card__foot {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-line);
    text-align: center;
}
.nv-cli-list-card__foot small { color: var(--color-muted); font-size: 0.74rem; }

/* Widget de clientes no Painel */
.nv-pnl-clientes-quick {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 18px;
}
.nv-pnl-cli-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: white;
    border: 1px solid var(--color-line);
    border-left: 3px solid var(--saude);
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-ink);
    transition: background 0.15s;
}
.nv-pnl-cli-mini:hover { background: rgba(13,27,42,0.04); }
.nv-pnl-cli-mini .avatar { border-radius: 50%; flex-shrink: 0; }
.nv-pnl-cli-mini strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.84rem;
    color: var(--color-ink);
    font-weight: 700;
    line-height: 1.2;
}
.nv-pnl-cli-mini small {
    display: block;
    color: var(--color-muted);
    font-size: 0.72rem;
    margin-top: 2px;
}


/* =========================================================
   104. ERP LAYOUT INLINE — sidebar contextual responsivo
========================================================= */

/* Hide admin bar inside ERP (CSS fallback caso PHP não pegue) */
body.nv-erp-mode #wpadminbar { display: none !important; }
html.nv-erp-mode { margin-top: 0 !important; }

/* Wrap principal — ocupa largura total */
.nv-erp-layout {
    background: #f8fafc;
    width: 100%;
}

.nv-erp-layout__body {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: start;
    width: 100%;
    background: white;
    position: relative;
    min-height: calc(100vh - 80px);
}

/* Aside (lista lateral) */
.nv-erp-aside {
    background: white;
    border-right: 1px solid var(--color-line);
    padding: 18px 0;
    position: sticky;
    top: 0;
    min-height: 100vh;
    align-self: stretch;
}

.nv-erp-aside__section {
    color: var(--color-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 14px 22px 6px;
}

.nv-erp-aside__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 22px;
    color: var(--color-ink);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.nv-erp-aside__item:hover {
    background: rgba(227,114,32,0.04);
    color: var(--color-ink);
}
.nv-erp-aside__item.is-active {
    background: linear-gradient(90deg, rgba(227,114,32,0.12) 0%, rgba(227,114,32,0.02) 100%);
    border-left-color: #e37220;
    color: #b8530f;
    font-weight: 700;
}
.nv-erp-aside__item .ic {
    font-size: 1.05rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

/* Main (conteúdo) — sem largura travada */
.nv-erp-layout__main {
    min-width: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Force inner containers to use full width within main */
.nv-erp-layout__main .nv-tp-container,
.nv-erp-layout__main .nv-tp-container--wide,
.nv-erp-layout__main .container {
    max-width: none !important;
    width: 100%;
}

/* Hide site footer inside ERP for cleaner look */
body.nv-erp-mode .site-footer { display: none; }

/* Hide site header AND topbar inside ERP — sidebar já é a navegação principal */
body.nv-erp-mode .site-header { display: none; }
body.nv-erp-mode .site-topbar { display: none; }
body.nv-erp-mode .site-main { padding-top: 0; margin-top: 0; }

/* Toggle mobile (escondido em desktop) */
.nv-erp-aside__toggle {
    display: none;
}

/* Mobile/tablet */
@media (max-width: 900px) {
    .nv-erp-layout__body {
        grid-template-columns: 1fr;
    }
    .nv-erp-aside {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 260px;
        height: 100vh;
        z-index: 9999;
        box-shadow: 2px 0 12px rgba(0,0,0,0.15);
        overflow-y: auto;
        border-right: 0;
    }
    .nv-erp-aside.is-open { display: block; }
    body.nv-erp-mode::after {
        content: '';
        display: none;
    }
    .nv-erp-aside.is-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: -1;
    }
    .nv-erp-aside__toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #0d1b2a;
        color: white;
        border: 0;
        padding: 10px 16px;
        font-size: 0.92rem;
        font-weight: 700;
        cursor: pointer;
        width: 100%;
        text-align: left;
        border-radius: 0;
    }
}

/* BREADCRUMB */
.nv-erp-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 12px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    font-size: 0.86rem;
}
.nv-erp-crumbs__home {
    text-decoration: none;
    color: #e37220;
    font-size: 1.1rem;
    padding: 2px 6px;
    border-radius: 4px;
}
.nv-erp-crumbs__home:hover { background: rgba(227,114,32,0.12); }
.nv-erp-crumbs__sep { color: var(--color-muted); font-weight: 700; }
.nv-erp-crumbs__item {
    color: var(--color-muted);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
}
.nv-erp-crumbs__item:hover { background: rgba(13,27,42,0.06); color: var(--color-ink); }
.nv-erp-crumbs__current {
    color: var(--color-ink);
    font-weight: 700;
    padding: 2px 6px;
}

/* Brand no topo da sidebar */
.nv-erp-aside__brand {
    padding: 16px 22px 12px;
    border-bottom: 1px solid var(--color-line);
    margin-bottom: 8px;
}
.nv-erp-aside__brand a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-ink);
}
.nv-erp-aside__brand .ic { font-size: 1.6rem; }
.nv-erp-aside__brand strong {
    font-family: var(--font-display);
    font-size: 1.04rem;
    font-weight: 800;
    color: var(--color-ink);
    letter-spacing: 0.5px;
}

/* Usuário logado */
.nv-erp-aside__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px 14px;
    border-bottom: 1px solid var(--color-line);
    margin-bottom: 8px;
}
.nv-erp-aside__user .avatar { border-radius: 50%; flex-shrink: 0; }
.nv-erp-aside__user strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.84rem;
    color: var(--color-ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}
.nv-erp-aside__user small {
    display: block;
    color: var(--color-muted);
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

/* Foot */
.nv-erp-aside__foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-line);
}

/* =========================================================
   106. ERP CARDS GENÉRICOS (Projetos / Tarefas / Chamados / etc)
========================================================= */

.nv-erp-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.nv-erp-card {
    display: block;
    text-decoration: none;
    color: var(--color-ink);
    background: white;
    border: 1px solid var(--color-line);
    border-left: 4px solid var(--c);
    border-radius: 10px;
    padding: 14px 16px;
    transition: box-shadow 0.15s, transform 0.15s;
}
.nv-erp-card:hover {
    box-shadow: 0 6px 14px rgba(13,27,42,0.08);
    transform: translateY(-2px);
}
.nv-erp-card.is-atraso {
    background: linear-gradient(90deg, rgba(220,38,38,0.04) 0%, white 50%);
}

.nv-erp-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}
.nv-erp-card__head strong {
    flex: 1;
    font-family: var(--font-display);
    font-size: 0.96rem;
    color: var(--color-ink);
    font-weight: 800;
    line-height: 1.25;
}
.nv-erp-card__badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.nv-erp-card__cliente,
.nv-erp-card__meta {
    color: var(--color-muted);
    font-size: 0.82rem;
    margin-bottom: 8px;
}
.nv-erp-card__cliente a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}
.nv-erp-card__cliente a:hover { text-decoration: underline; }
.nv-erp-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nv-erp-card__inline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}
.nv-erp-card__pill {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}

.nv-erp-card__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 4px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-line);
}
.nv-erp-card__stats div { text-align: center; }
.nv-erp-card__stats strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.96rem;
    font-weight: 800;
}
.nv-erp-card__stats small {
    display: block;
    color: var(--color-muted);
    font-size: 0.7rem;
}

.nv-erp-card__progresso {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-line);
}
.nv-erp-card__progresso small { color: var(--color-muted); font-size: 0.76rem; }
.nv-erp-card__progresso .bar {
    height: 6px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
}
.nv-erp-card__progresso .fill {
    height: 100%;
    background: #f59e0b;
    transition: width 0.3s;
}

.nv-erp-card__foot {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-line);
    text-align: right;
}
.nv-erp-card__foot small { color: var(--color-muted); font-size: 0.72rem; }

/* =========================================================
   107. ERP PAGE — container padrão das telas consolidadas
========================================================= */

.nv-erp-page {
    padding-bottom: 40px;
}

/* Header gradiente (compartilhado entre /clientes/, /projetos/, /tarefas/, etc) */
.nv-erp-page .nv-crm-header {
    padding: 26px 0 22px;
    margin-bottom: 18px;
    position: relative;
    z-index: 2;
}

/* O wrap interno entre header e KPIs precisa ter espaço */
.nv-erp-page .nv-tp-wrap {
    padding: 0;
}

/* Container do wide funciona em modo full-width dentro do ERP */
.nv-erp-layout__main .nv-erp-page .nv-tp-container,
.nv-erp-layout__main .nv-erp-page .nv-tp-container--wide {
    max-width: none !important;
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
}
@media (max-width: 700px) {
    .nv-erp-layout__main .nv-erp-page .nv-tp-container,
    .nv-erp-layout__main .nv-erp-page .nv-tp-container--wide {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* Breadcrumb dentro do header gradiente */
.nv-erp-page .nv-crm-header .nv-erp-crumbs {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    margin-bottom: 14px;
}
.nv-erp-page .nv-crm-header .nv-erp-crumbs__home {
    color: white;
}
.nv-erp-page .nv-crm-header .nv-erp-crumbs__home:hover {
    background: rgba(255,255,255,0.15);
}
.nv-erp-page .nv-crm-header .nv-erp-crumbs__sep,
.nv-erp-page .nv-crm-header .nv-erp-crumbs__item {
    color: rgba(255,255,255,0.7);
}
.nv-erp-page .nv-crm-header .nv-erp-crumbs__item:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}
.nv-erp-page .nv-crm-header .nv-erp-crumbs__current {
    color: white;
}

/* Título no header */
.nv-erp-page .nv-crm-header h1 {
    color: white;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0;
}

/* =========================================================
   108. PROJETO DETALHE — adaptações ERP + responsividade
========================================================= */

/* Quando dentro do ERP, header do projeto fica colado no topo */
body.nv-erp-mode .proj-detail__header {
    padding-top: 24px;
    padding-bottom: 22px;
}

/* Container do header dentro do ERP usa largura total */
body.nv-erp-mode .proj-detail__header .container {
    max-width: none;
    padding: 0 24px;
}

body.nv-erp-mode .proj-tabs-bar {
    padding-left: 16px;
    padding-right: 16px;
}

/* Body do projeto no ERP: bordas e espaçamento ajustados */
body.nv-erp-mode .proj-detail__body {
    box-shadow: none;
    border-radius: 0;
}

body.nv-erp-mode .proj-main {
    padding: 24px;
}
@media (max-width: 900px) {
    body.nv-erp-mode .proj-detail__header .container { padding: 0 14px; }
    body.nv-erp-mode .proj-main { padding: 16px 12px; }
}

/* Header info responsivo */
@media (max-width: 700px) {
    .proj-detail__header { padding: 22px 0 18px; }
    .proj-detail__header-inner { gap: 12px; }
    .proj-detail__head-actions {
        width: 100%;
        gap: 6px;
    }
    .proj-detail__btn {
        padding: 8px 12px;
        font-size: 0.78rem;
        gap: 5px;
    }
    .proj-detail__crumbs {
        font-size: 0.74rem;
        gap: 4px;
        flex-wrap: wrap;
    }
}

/* Garante que o grid de cards funcione dentro do ERP */
.nv-erp-layout__main .nv-erp-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
    width: 100%;
}
.nv-erp-layout__main .nv-erp-card {
    display: block;
    width: 100%;
}

/* =========================================================
   109. FIX FORÇA — cards ERP devem ser blocos completos
========================================================= */

/* Quando o card é um <a> direto (padrão antigo) */
a.nv-erp-card,
a.nv-erp-card:visited,
a.nv-erp-card:link {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    position: relative;
}

/* Quando o card é um <div> contendo um <a> overlay (padrão novo, mais robusto) */
div.nv-erp-card {
    position: relative;
    cursor: pointer;
}
.nv-erp-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    text-decoration: none;
    color: inherit;
}
/* Sublinks (cliente etc) precisam ficar acima do overlay pra ser clicáveis */
.nv-erp-card__sublink {
    position: relative;
    z-index: 2;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}
.nv-erp-card__sublink:hover { text-decoration: underline; }

/* Garante que o grid pai realmente forma colunas */
.nv-erp-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch;
}

/* Filhos do card devem ser blocks */
.nv-erp-card > .nv-erp-card__head,
.nv-erp-card > .nv-erp-card__cliente,
.nv-erp-card > .nv-erp-card__meta,
.nv-erp-card > .nv-erp-card__stats,
.nv-erp-card > .nv-erp-card__inline,
.nv-erp-card > .nv-erp-card__progresso,
.nv-erp-card > .nv-erp-card__foot,
.nv-erp-card > p {
    position: relative;
    z-index: 2;
    pointer-events: none;
}
.nv-erp-card > .nv-erp-card__head,
.nv-erp-card > .nv-erp-card__inline {
    display: flex;
}
.nv-erp-card > .nv-erp-card__stats,
.nv-erp-card > .nv-erp-card__progresso {
    display: grid;
}

/* =========================================================
   110. SIDEBAR COLAPSÁVEL + MODAL NOVO PROJETO
========================================================= */

/* Botão collapse no canto da sidebar */
.nv-erp-aside__collapse {
    position: absolute;
    top: 16px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--color-line);
    background: white;
    color: var(--color-muted);
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.nv-erp-aside__collapse:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
.nv-erp-aside__collapse .ic-closed { display: none; }
body.nv-erp-aside-collapsed .nv-erp-aside__collapse .ic-open { display: none; }
body.nv-erp-aside-collapsed .nv-erp-aside__collapse .ic-closed { display: inline; }

@media (max-width: 900px) {
    .nv-erp-aside__collapse { display: none; }
}

/* Sidebar colapsada (desktop): largura mínima, só ícones */
@media (min-width: 901px) {
    body.nv-erp-aside-collapsed .nv-erp-layout__body {
        grid-template-columns: 56px 1fr;
    }
    body.nv-erp-aside-collapsed .nv-erp-aside {
        overflow-x: hidden;
    }
    body.nv-erp-aside-collapsed .nv-erp-aside__brand a strong,
    body.nv-erp-aside-collapsed .nv-erp-aside__user > div,
    body.nv-erp-aside-collapsed .nv-erp-aside__section,
    body.nv-erp-aside-collapsed .nv-erp-aside__item .lbl {
        display: none;
    }
    body.nv-erp-aside-collapsed .nv-erp-aside__brand {
        padding: 16px 0;
        text-align: center;
    }
    body.nv-erp-aside-collapsed .nv-erp-aside__brand a {
        justify-content: center;
    }
    body.nv-erp-aside-collapsed .nv-erp-aside__user {
        padding: 10px 0;
        justify-content: center;
    }
    body.nv-erp-aside-collapsed .nv-erp-aside__item {
        padding: 12px 0;
        justify-content: center;
    }
    body.nv-erp-aside-collapsed .nv-erp-aside__item .ic {
        width: auto;
        font-size: 1.2rem;
    }
    body.nv-erp-aside-collapsed .nv-erp-aside__item.is-active {
        padding-left: 0;
        border-left: 0;
        border-right: 3px solid #e37220;
    }
    /* Tooltip-like com title attr é gerenciado pelo browser. */
    body.nv-erp-aside-collapsed .nv-erp-aside__collapse {
        right: 50%;
        transform: translateX(50%);
    }
}

/* Modal novo projeto */
.nv-novo-projeto-secao {
    border-top: 1px dashed var(--color-line);
    padding-top: 14px;
    margin-top: 14px;
}
.nv-novo-projeto-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    padding: 12px;
    background: rgba(13,27,42,0.03);
    border-radius: 8px;
    border: 1px solid var(--color-line);
    transition: background 0.15s, border-color 0.15s;
}
.nv-novo-projeto-toggle:hover { background: rgba(227,114,32,0.06); border-color: rgba(227,114,32,0.3); }
.nv-novo-projeto-toggle:has(input:checked) {
    background: rgba(227,114,32,0.08);
    border-color: #e37220;
}
.nv-novo-projeto-toggle input { margin-top: 3px; accent-color: #e37220; }
.nv-novo-projeto-toggle strong {
    display: block;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 0.96rem;
    margin-bottom: 2px;
}
.nv-novo-projeto-toggle small {
    display: block;
    color: var(--color-muted);
    font-size: 0.82rem;
}

/* =========================================================
   111. CONFIG — Linhas de soluções / marketplaces
========================================================= */

.nv-cfg-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nv-cfg-row {
    display: grid;
    grid-template-columns: 50px 1fr 50px 1.5fr 110px 32px;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--c, #94a3b8) 4%, white);
    border: 1px solid var(--color-line);
    border-left: 4px solid var(--c, #94a3b8);
    border-radius: 8px;
}
.nv-cfg-row--mk {
    grid-template-columns: 50px 1fr 50px 110px 32px;
}
.nv-cfg-row input[type=text] {
    padding: 6px 10px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    background: white;
    font-size: 0.9rem;
    font-family: inherit;
}
.nv-cfg-row .cfg-icon { text-align: center; font-size: 1.1rem; }
.nv-cfg-row .cfg-color {
    width: 50px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    cursor: pointer;
}
.nv-cfg-row .cfg-slug {
    background: rgba(13,27,42,0.06);
    color: #475569;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 700px) {
    .nv-cfg-row, .nv-cfg-row--mk {
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: row;
    }
}

/* =========================================================
   112. ACADEMY — Home, cards, feed
========================================================= */

.nv-academy-page { padding-bottom: 60px; }

.nv-academy-headtop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.nv-academy-headtop__actions { display: flex; gap: 8px; }
.nv-academy-headtop__actions .nv-tp-btn {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
    color: white;
}
.nv-academy-headtop__actions .nv-tp-btn:hover {
    background: rgba(255,255,255,0.25);
}

/* Sub-abas */
.nv-academy-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 2px solid var(--color-line);
    margin: 20px 0 18px;
    padding-bottom: 0;
    scrollbar-width: thin;
}
.nv-academy-tab {
    padding: 12px 18px;
    color: var(--color-muted);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.nv-academy-tab:hover { color: var(--color-ink); }
.nv-academy-tab.is-active {
    color: #e37220;
    border-bottom-color: #e37220;
    font-weight: 800;
}

/* Grid (modo filtro) */
.nv-academy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

/* Linha estilo Netflix */
.nv-academy-row { margin-bottom: 30px; }
.nv-academy-row__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}
.nv-academy-row__head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--color-ink);
    font-weight: 800;
}
.nv-academy-row__head .ver-todos {
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s;
}
.nv-academy-row__head .ver-todos:hover { color: #e37220; }

.nv-academy-row__scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.nv-academy-row__scroll::-webkit-scrollbar { height: 6px; }
.nv-academy-row__scroll::-webkit-scrollbar-thumb { background: var(--color-line); border-radius: 3px; }
.nv-academy-row__scroll .nv-academy-card {
    flex-shrink: 0;
    width: 240px;
    scroll-snap-align: start;
}

/* Card */
.nv-academy-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-line);
    transition: box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
    position: relative;
}
.nv-academy-card:hover {
    box-shadow: 0 8px 20px rgba(13,27,42,0.12);
    transform: translateY(-3px);
}
.nv-academy-card__link {
    position: absolute;
    inset: 0;
    z-index: 5;
    text-decoration: none;
    color: inherit;
}

.nv-academy-card__capa {
    position: relative;
    aspect-ratio: 16/9;
    background: #f3f4f6;
    overflow: hidden;
}
.nv-academy-card__capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nv-academy-card__capa-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d1b2a 0%, #1e3a5f 100%);
    color: white;
}
.nv-academy-card__capa-placeholder span { font-size: 3rem; opacity: 0.6; }

.nv-academy-card__overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    backdrop-filter: blur(8px);
}

.nv-academy-card__lock {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(220,38,38,0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.78rem;
}

.nv-academy-card__duracao {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.85);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'SF Mono', Consolas, monospace;
}

.nv-academy-card__info {
    padding: 12px 14px;
}
.nv-academy-card__info h3 {
    margin: 0 0 6px;
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nv-academy-card__meta {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 0.74rem;
    color: var(--color-muted);
    flex-wrap: wrap;
}
.nv-academy-card__meta .cat {
    background: rgba(227,114,32,0.1);
    color: #e37220;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

/* ===== FEED ===== */
.nv-academy-feed-wrap {
    max-width: 680px;
    margin: 0 auto;
}

.nv-academy-feed-composer {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 20px;
}
.nv-academy-feed-composer textarea {
    width: 100%;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 80px;
}
.nv-academy-feed-composer textarea:focus {
    outline: none;
    border-color: #e37220;
}
.nv-academy-feed-composer__row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    align-items: center;
}
.nv-academy-feed-composer__row input[type=url] {
    border: 1px solid var(--color-line);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.88rem;
    font-family: inherit;
}

.nv-academy-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nv-academy-feed-post {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    overflow: hidden;
}

.nv-academy-feed-post__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-line);
}
.nv-academy-feed-post__head .avatar {
    border-radius: 50%;
    width: 42px;
    height: 42px;
}
.nv-academy-feed-post__head strong {
    display: block;
    color: var(--color-ink);
    font-size: 0.95rem;
    font-weight: 700;
}
.nv-academy-feed-post__head small {
    color: var(--color-muted);
    font-size: 0.78rem;
}

.nv-academy-feed-post__body {
    padding: 16px 18px;
}
.nv-academy-feed-post__body p { margin: 0 0 8px; line-height: 1.5; color: var(--color-ink); }
.nv-academy-feed-post__body p:last-child { margin-bottom: 0; }
.nv-academy-feed-post__img {
    max-width: 100%;
    border-radius: 8px;
    margin-top: 10px;
    display: block;
}
.nv-academy-feed-post__link {
    display: inline-block;
    margin-top: 10px;
    color: #e37220;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    word-break: break-all;
}
.nv-academy-feed-post__link:hover { text-decoration: underline; }

.nv-academy-feed-post__foot {
    display: flex;
    gap: 4px;
    padding: 8px 14px;
    border-top: 1px solid var(--color-line);
    background: rgba(13,27,42,0.02);
}
.nv-academy-react {
    background: transparent;
    border: 0;
    color: var(--color-muted);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}
.nv-academy-react:hover { background: rgba(227,114,32,0.08); color: #e37220; }
.nv-academy-react.is-active {
    color: #e37220;
    background: rgba(227,114,32,0.1);
}
.nv-academy-react .ic { font-size: 1.05rem; }

.nv-academy-feed-post__comentarios {
    padding: 12px 18px;
    border-top: 1px solid var(--color-line);
    background: rgba(13,27,42,0.02);
}
.nv-academy-feed-post__comentarios .lista-c {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.nv-academy-feed-post__comentarios .comentario {
    display: flex;
    gap: 10px;
}
.nv-academy-feed-post__comentarios .comentario .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}
.nv-academy-feed-post__comentarios .comentario > div {
    background: white;
    border-radius: 12px;
    padding: 8px 12px;
    flex: 1;
}
.nv-academy-feed-post__comentarios .comentario strong {
    font-size: 0.86rem;
    color: var(--color-ink);
}
.nv-academy-feed-post__comentarios .comentario small {
    color: var(--color-muted);
    font-size: 0.74rem;
    margin-left: 6px;
}
.nv-academy-feed-post__comentarios .comentario p {
    margin: 4px 0 0;
    color: var(--color-ink);
    font-size: 0.9rem;
}

.nv-academy-feed-post__comentarios .novo-c {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.nv-academy-feed-post__comentarios .novo-c .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}
.nv-academy-feed-post__comentarios .novo-c .comentario-input {
    flex: 1;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

@media (max-width: 700px) {
    .nv-academy-row__scroll .nv-academy-card { width: 180px; }
    .nv-academy-card__info h3 { font-size: 0.86rem; }
}

/* =========================================================
   113. ACADEMY — Páginas de detalhe (player, treinamento, artigo)
========================================================= */

/* ===== PLAYER DE VÍDEO ===== */
.nv-academy-player-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    margin-top: 12px;
}

.nv-academy-player {
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16/9;
}
.nv-academy-player iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.nv-academy-player__error {
    color: white;
    padding: 40px;
    text-align: center;
}

.nv-academy-info {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 18px 20px;
    margin-top: 14px;
}
.nv-academy-info h1 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--color-ink);
    line-height: 1.25;
}
.nv-academy-info__meta {
    color: var(--color-muted);
    font-size: 0.86rem;
    margin-bottom: 12px;
}
.nv-academy-info__pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}
.nv-academy-info__cats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.nv-academy-info__cat {
    background: rgba(227,114,32,0.08);
    color: #e37220;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}
.nv-academy-info__cat:hover {
    background: rgba(227,114,32,0.18);
}

.nv-academy-info__desc {
    border-top: 1px dashed var(--color-line);
    padding-top: 12px;
    margin-top: 12px;
    color: var(--color-ink);
    line-height: 1.6;
}
.nv-academy-info__desc p { margin: 0 0 8px; }
.nv-academy-info__desc p:last-child { margin: 0; }

.nv-academy-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* Lista lateral de vídeos relacionados */
.nv-academy-player-sidebar {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 16px;
    height: fit-content;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}
.nv-academy-player-sidebar h3 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-ink);
}

.nv-academy-related {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.nv-academy-related a {
    display: flex;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    padding: 6px;
    border-radius: 6px;
    transition: background 0.15s;
}
.nv-academy-related a:hover { background: rgba(13,27,42,0.04); }

.nv-academy-related .thumb {
    width: 110px;
    aspect-ratio: 16/9;
    background: #f3f4f6;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.nv-academy-related .thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.nv-academy-related .thumb-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #0d1b2a, #1e3a5f);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.5rem;
}
.nv-academy-related .thumb .dur {
    position: absolute;
    bottom: 4px; right: 4px;
    background: rgba(0,0,0,0.85);
    color: white;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.66rem;
    font-weight: 600;
}
.nv-academy-related .info { flex: 1; min-width: 0; }
.nv-academy-related .info strong {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-ink);
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nv-academy-related .info small { color: var(--color-muted); font-size: 0.72rem; }

/* Comentários */
.nv-academy-comentarios {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 18px 20px;
    margin-top: 14px;
}
.nv-academy-comentarios h2 {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: 1.1rem;
}
.nv-academy-comentarios h2 small { color: var(--color-muted); font-weight: 500; }

.nv-academy-comentarios .novo-c {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--color-line);
}
.nv-academy-comentarios .novo-c .avatar {
    border-radius: 50%; width: 36px; height: 36px; flex-shrink: 0;
}
.nv-academy-comentarios .novo-c .comentario-input {
    flex: 1;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 0.9rem;
    min-height: 60px;
}

.nv-academy-comentarios .lista-c {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.nv-academy-comentarios .comentario {
    display: flex;
    gap: 10px;
}
.nv-academy-comentarios .comentario .avatar {
    border-radius: 50%; width: 36px; height: 36px; flex-shrink: 0;
}
.nv-academy-comentarios .comentario > div {
    flex: 1;
    background: rgba(13,27,42,0.04);
    border-radius: 8px;
    padding: 8px 12px;
}
.nv-academy-comentarios .comentario strong { color: var(--color-ink); font-size: 0.88rem; }
.nv-academy-comentarios .comentario small {
    color: var(--color-muted);
    font-size: 0.74rem;
    margin-left: 6px;
}
.nv-academy-comentarios .comentario p {
    margin: 4px 0 0;
    color: var(--color-ink);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ===== TREINAMENTO ===== */
.nv-academy-train-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 12px;
}
.nv-academy-train-hero__capa {
    background: #f3f4f6;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.nv-academy-train-hero__capa img,
.nv-academy-train-hero__capa iframe {
    width: 100%; height: 100%;
    object-fit: cover;
    border: 0;
    display: block;
}
.nv-academy-train-hero__info {
    padding: 22px 24px;
}
.nv-academy-train-hero__pill {
    display: inline-block;
    background: rgba(227,114,32,0.1);
    color: #e37220;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.nv-academy-train-hero__info h1 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1.2;
}

/* Lista de aulas */
.nv-academy-aulas {
    margin-top: 24px;
}
.nv-academy-aulas h2 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin: 0 0 14px;
}
.nv-academy-aulas-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: aula;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nv-academy-aulas-list li a {
    display: grid;
    grid-template-columns: 40px 140px 1fr auto;
    align-items: center;
    gap: 16px;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, transform 0.15s;
}
.nv-academy-aulas-list li a:hover {
    box-shadow: 0 4px 12px rgba(13,27,42,0.08);
    transform: translateY(-1px);
}
.nv-academy-aulas-list .num {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-muted);
    text-align: center;
}
.nv-academy-aulas-list .thumb {
    width: 140px;
    aspect-ratio: 16/9;
    background: #f3f4f6;
    border-radius: 6px;
    overflow: hidden;
}
.nv-academy-aulas-list .thumb img { width: 100%; height: 100%; object-fit: cover; }
.nv-academy-aulas-list .thumb-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #0d1b2a, #1e3a5f);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.8rem;
}
.nv-academy-aulas-list .info strong {
    display: block;
    font-size: 0.96rem;
    color: var(--color-ink);
    margin-bottom: 2px;
}
.nv-academy-aulas-list .info small { color: var(--color-muted); font-size: 0.8rem; }
.nv-academy-aulas-list .play {
    width: 36px; height: 36px;
    background: rgba(227,114,32,0.1);
    color: #e37220;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    transition: background 0.15s;
}
.nv-academy-aulas-list li a:hover .play { background: #e37220; color: white; }

/* ===== ARTIGO ===== */
.nv-academy-artigo {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 12px;
}
.nv-academy-artigo__capa {
    aspect-ratio: 21/9;
    background: #f3f4f6;
    overflow: hidden;
}
.nv-academy-artigo__capa img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.nv-academy-artigo__head {
    padding: 28px 32px 16px;
    border-bottom: 1px solid var(--color-line);
}
.nv-academy-artigo__head h1 {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1.2;
    color: var(--color-ink);
    letter-spacing: -0.02em;
}

.nv-academy-artigo__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-muted);
    font-size: 0.88rem;
    flex-wrap: wrap;
}
.nv-academy-artigo__meta .avatar {
    border-radius: 50%;
    width: 36px; height: 36px;
}

.nv-academy-artigo__conteudo {
    padding: 26px 32px;
    color: var(--color-ink);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 720px;
    margin: 0 auto;
}
.nv-academy-artigo__conteudo p { margin: 0 0 16px; }
.nv-academy-artigo__conteudo h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    margin: 24px 0 12px;
    color: var(--color-ink);
}
.nv-academy-artigo__conteudo h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin: 20px 0 10px;
}
.nv-academy-artigo__conteudo img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 10px 0;
}
.nv-academy-artigo__conteudo blockquote {
    margin: 14px 0;
    padding: 12px 18px;
    border-left: 3px solid #e37220;
    background: rgba(227,114,32,0.04);
    color: var(--color-ink);
    font-style: italic;
}
.nv-academy-artigo__conteudo a {
    color: #e37220;
    text-decoration: underline;
    text-decoration-color: rgba(227,114,32,0.4);
}
.nv-academy-artigo__conteudo ul, .nv-academy-artigo__conteudo ol {
    margin: 0 0 16px 24px;
}
.nv-academy-artigo__conteudo li { margin-bottom: 4px; }

.nv-academy-artigo__foot {
    padding: 16px 32px;
    border-top: 1px solid var(--color-line);
    background: rgba(13,27,42,0.02);
    display: flex;
    gap: 8px;
}

.nv-academy-relacionados { margin-top: 30px; }
.nv-academy-relacionados h2 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin: 0 0 14px;
}

@media (max-width: 980px) {
    .nv-academy-player-layout { grid-template-columns: 1fr; }
    .nv-academy-player-sidebar {
        position: static;
        max-height: none;
    }
    .nv-academy-train-hero { grid-template-columns: 1fr; }
    .nv-academy-aulas-list li a { grid-template-columns: 30px 100px 1fr auto; gap: 10px; }
    .nv-academy-aulas-list .thumb { width: 100px; }
}

@media (max-width: 600px) {
    .nv-academy-artigo__head { padding: 20px 18px 14px; }
    .nv-academy-artigo__head h1 { font-size: 1.45rem; }
    .nv-academy-artigo__conteudo { padding: 18px; font-size: 0.98rem; }
    .nv-academy-artigo__foot { padding: 12px 18px; }
    .nv-academy-aulas-list li a { grid-template-columns: 30px 1fr auto; }
    .nv-academy-aulas-list .thumb { display: none; }
}

/* =========================================================
   114. ACADEMY — Telas admin (cadastro)
========================================================= */

.nv-academy-admin-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 18px 0 14px;
    gap: 12px;
    flex-wrap: wrap;
}

.nv-academy-admin-table {
    width: 100%;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.nv-academy-admin-table th {
    background: rgba(13,27,42,0.04);
    text-align: left;
    padding: 10px 14px;
    font-size: 0.82rem;
    color: var(--color-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-line);
}
.nv-academy-admin-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-line);
    vertical-align: middle;
}
.nv-academy-admin-table tbody tr:last-child td { border-bottom: 0; }
.nv-academy-admin-table tbody tr:hover { background: rgba(13,27,42,0.02); }
.nv-academy-admin-table td .nv-tp-btn { margin-right: 4px; }

/* Form wrap */
.nv-academy-form-wrap {
    margin-top: 18px;
}

/* Categorias */
.nv-academy-cat-add {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.nv-academy-cat-add input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.92rem;
}
.nv-academy-cat-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.nv-academy-cat-row {
    display: grid;
    grid-template-columns: 1fr 90px 50px;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(13,27,42,0.03);
    border: 1px solid var(--color-line);
    border-radius: 6px;
}
.nv-academy-cat-row .cat-nome {
    background: transparent;
    border: 0;
    padding: 4px 0;
    font-size: 0.92rem;
    font-family: inherit;
}
.nv-academy-cat-row .cat-nome:focus {
    outline: none;
    background: white;
    border-radius: 4px;
    padding: 4px 8px;
}
.nv-academy-cat-row .cat-count {
    color: var(--color-muted);
    font-size: 0.78rem;
    text-align: right;
}

/* Media picker */
.nv-academy-media-picker {
    border: 1px dashed var(--color-line);
    border-radius: 8px;
    padding: 12px;
    background: rgba(13,27,42,0.02);
    margin-top: 4px;
}
.nv-academy-media-picker .preview {
    min-height: 80px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nv-academy-media-picker .preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 6px;
    display: block;
}
.nv-academy-media-picker .preview:empty::before {
    content: 'Nenhuma imagem selecionada';
    color: var(--color-muted);
    font-size: 0.84rem;
}
.nv-academy-media-picker .actions {
    display: flex;
    gap: 6px;
}

/* Visibilidade */
.nv-academy-visibilidade {
    background: rgba(13,27,42,0.03);
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 16px;
    margin-top: 14px;
}
.nv-academy-visibilidade h3 {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 0.94rem;
    color: var(--color-ink);
}
.nv-academy-vis-opcao {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.nv-academy-vis-opcao:hover { border-color: #e37220; }
.nv-academy-vis-opcao:has(input:checked) {
    background: rgba(227,114,32,0.05);
    border-color: #e37220;
}
.nv-academy-vis-opcao input[type="radio"] {
    accent-color: #e37220;
    margin-top: 3px;
    flex-shrink: 0;
}
.nv-academy-vis-opcao strong {
    display: block;
    color: var(--color-ink);
    font-size: 0.94rem;
    margin-bottom: 2px;
}
.nv-academy-vis-opcao small {
    display: block;
    color: var(--color-muted);
    font-size: 0.82rem;
}

.nv-academy-clientes-select {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px dashed var(--color-line);
}
.nv-academy-clientes-select select[multiple] {
    min-height: 140px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    padding: 6px;
}
.nv-academy-clientes-select select option:checked {
    background: rgba(227,114,32,0.15);
    color: #e37220;
    font-weight: 600;
}

@media (max-width: 700px) {
    .nv-academy-admin-table th:nth-child(2),
    .nv-academy-admin-table td:nth-child(2),
    .nv-academy-admin-table th:nth-child(4),
    .nv-academy-admin-table td:nth-child(4) {
        display: none;
    }
}

/* =========================================================
   115. PRECIFICAÇÃO
========================================================= */

/* Hub: cards de clientes */
.nv-prec-clientes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.nv-prec-cliente-card {
    padding: 16px;
}
.nv-prec-cliente-card__head {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}
.nv-prec-cliente-card__head .avatar {
    border-radius: 50%;
    width: 48px; height: 48px;
    flex-shrink: 0;
}
.nv-prec-cliente-card__head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-ink);
}
.nv-prec-cliente-card__head small {
    color: var(--color-muted);
    font-size: 0.78rem;
}
.nv-prec-cliente-card__kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--color-line);
}
.nv-prec-cliente-card__kpis > div {
    text-align: center;
}
.nv-prec-cliente-card__kpis strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--color-ink);
}
.nv-prec-cliente-card__kpis span {
    display: block;
    font-size: 0.72rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.nv-prec-cliente-card__kpis .is-warn strong {
    color: #d97706;
}

/* KPIs do hub */
.nv-prec-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 18px 0;
}
.nv-prec-kpi {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    transition: border-color 0.15s, transform 0.15s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.nv-prec-kpi:hover {
    border-color: #e37220;
    transform: translateY(-1px);
}
.nv-prec-kpi .ic {
    display: block;
    font-size: 1.4rem;
    margin-bottom: 4px;
}
.nv-prec-kpi strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--color-ink);
    margin-bottom: 2px;
}
.nv-prec-kpi small {
    color: var(--color-muted);
    font-size: 0.78rem;
}
.nv-prec-kpi.is-active {
    border-color: #e37220;
    background: rgba(227,114,32,0.06);
}
.nv-prec-kpi.is-warn strong { color: #d97706; }
.nv-prec-kpi.is-ok strong   { color: #059669; }

.nv-prec-kpis--compact .nv-prec-kpi {
    padding: 10px 12px;
}
.nv-prec-kpis--compact .nv-prec-kpi strong { font-size: 1.2rem; }
.nv-prec-kpis--compact .nv-prec-kpi small { font-size: 0.72rem; }

/* Filtros */
.nv-prec-filtros {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 14px 0;
    flex-wrap: wrap;
}
.nv-prec-filtros input[type="search"] {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9rem;
}
.nv-prec-filtros select {
    padding: 8px 12px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9rem;
}

/* Tabela */
.nv-prec-tabela-wrap {
    overflow-x: auto;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
}
.nv-prec-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.nv-prec-tabela th {
    background: rgba(13,27,42,0.04);
    text-align: left;
    padding: 10px 12px;
    font-size: 0.74rem;
    color: var(--color-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-line);
    white-space: nowrap;
}
.nv-prec-tabela th.num,
.nv-prec-tabela td.num {
    text-align: right;
    white-space: nowrap;
}
.nv-prec-tabela td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-line);
    vertical-align: middle;
}
.nv-prec-tabela tbody tr:last-child td { border-bottom: 0; }
.nv-prec-tabela tbody tr:hover { background: rgba(13,27,42,0.02); }

/* Edição inline */
.nv-edit {
    outline: none;
    border-radius: 3px;
    padding: 2px 4px;
    transition: background 0.15s;
    cursor: text;
}
.nv-edit:hover { background: rgba(227,114,32,0.06); }
.nv-edit:focus { background: white; box-shadow: 0 0 0 2px #e37220; }

.nv-edit-money, .nv-edit-num {
    padding: 2px 4px;
    border-radius: 3px;
    transition: background 0.15s;
}
.nv-edit-money:hover, .nv-edit-num:hover {
    background: rgba(227,114,32,0.06);
}

.nv-edit-emb {
    padding: 4px 6px;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    font-size: 0.84rem;
    background: white;
    max-width: 160px;
    transition: background 0.3s;
}

/* Pills */
.nv-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}
.nv-pill--ok    { background: rgba(16,185,129,0.1); color: #059669; }
.nv-pill--warn  { background: rgba(217,119,6,0.1); color: #d97706; }
.nv-pill--err   { background: rgba(220,38,38,0.1); color: #b91c1c; }

/* Card disabled (módulos futuros) */
.nv-erp-card.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.nv-erp-card.is-disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Form embalagens */
.nv-emb-form {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}
.nv-emb-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--color-muted);
}
.nv-emb-form input {
    padding: 8px 10px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9rem;
}
@media (max-width: 720px) {
    .nv-emb-form { grid-template-columns: 1fr 1fr; }
}

/* Modal genérico */
.nv-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nv-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(13,27,42,0.7);
    backdrop-filter: blur(2px);
}
.nv-modal__box {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 28px;
    width: min(680px, 90%);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}
.nv-modal__box h2 {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--color-ink);
}
.nv-modal__close {
    position: absolute;
    top: 12px; right: 12px;
    width: 32px; height: 32px;
    background: rgba(13,27,42,0.08);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    color: var(--color-ink);
}
.nv-modal__close:hover { background: rgba(13,27,42,0.18); }

/* =========================================================
   116. PRECIFICAÇÃO — Importação por planilha
========================================================= */

/* Stepper */
.nv-import-stepper {
    display: flex;
    justify-content: space-between;
    margin: 20px 0 30px;
    position: relative;
}
.nv-import-stepper::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 6%;
    right: 6%;
    height: 2px;
    background: var(--color-line);
    z-index: 0;
}
.nv-import-stepper .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
    flex: 1;
    text-align: center;
}
.nv-import-stepper .num {
    width: 36px;
    height: 36px;
    background: white;
    border: 2px solid var(--color-line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--color-muted);
    transition: all 0.2s;
}
.nv-import-stepper .step.is-active .num {
    background: #e37220;
    border-color: #e37220;
    color: white;
    transform: scale(1.1);
}
.nv-import-stepper .step.is-done .num {
    background: #059669;
    border-color: #059669;
    color: white;
}
.nv-import-stepper .step.is-done .num::after { content: '✓'; }
.nv-import-stepper .step.is-done .num span { display: none; }
.nv-import-stepper .lbl {
    font-size: 0.78rem;
    color: var(--color-muted);
    font-weight: 500;
}
.nv-import-stepper .step.is-active .lbl,
.nv-import-stepper .step.is-done .lbl {
    color: var(--color-ink);
    font-weight: 700;
}

/* Etapas */
.nv-import-etapa { display: none; }
.nv-import-etapa.is-active { display: block; }

/* Template link */
.nv-import-template-link {
    background: rgba(13,27,42,0.04);
    border: 1px solid var(--color-line);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.nv-import-template-link p {
    margin: 0;
    color: var(--color-ink);
    font-size: 0.9rem;
}

/* Dropzone */
.nv-import-dropzone {
    border: 2px dashed var(--color-line);
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: rgba(13,27,42,0.02);
}
.nv-import-dropzone:hover, .nv-import-dropzone.is-drag {
    border-color: #e37220;
    background: rgba(227,114,32,0.06);
}
.nv-import-dropzone__inner .ic {
    display: block;
    font-size: 2.4rem;
    margin-bottom: 8px;
}
.nv-import-dropzone__inner p {
    margin: 0 0 6px;
    color: var(--color-ink);
    font-size: 1rem;
}
.nv-import-dropzone__inner small {
    color: var(--color-muted);
    font-size: 0.84rem;
}

/* Mapeamento */
.nv-import-mapeamento-wrap {
    border: 1px solid var(--color-line);
    border-radius: 8px;
    overflow: hidden;
}
.nv-mapeamento-select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9rem;
    background: white;
}

/* Opções de importação */
.nv-import-opcoes {
    background: rgba(13,27,42,0.03);
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nv-import-opcoes label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
}
.nv-import-opcoes input[type="checkbox"] {
    accent-color: #e37220;
    margin-top: 3px;
}
.nv-import-opcoes strong {
    display: block;
    color: var(--color-ink);
    font-size: 0.92rem;
}
.nv-import-opcoes small {
    display: block;
    color: var(--color-muted);
    font-size: 0.8rem;
    margin-top: 2px;
}

@media (max-width: 700px) {
    .nv-import-stepper .lbl { display: none; }
}

/* =========================================================
   117. PRECIFICAÇÃO — Integrações API
========================================================= */

/* Card de integração existente */
.nv-integ-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}
.nv-integ-card {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 16px;
    transition: box-shadow 0.15s;
}
.nv-integ-card:hover { box-shadow: 0 2px 8px rgba(13,27,42,0.08); }

.nv-integ-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.nv-integ-card__title { flex: 1; }
.nv-integ-card__title h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-ink);
}
.nv-integ-card__title small {
    color: var(--color-muted);
    font-size: 0.82rem;
}

/* Ícone do provedor */
.nv-integ-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.nv-integ-card__body {
    padding-top: 10px;
    border-top: 1px dashed var(--color-line);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.86rem;
    margin-bottom: 10px;
}
.nv-integ-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-muted);
}
.nv-integ-meta strong { color: var(--color-ink); }

.nv-integ-card__actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    padding-top: 10px;
    border-top: 1px dashed var(--color-line);
}

/* Grid de provedores disponíveis */
.nv-integ-disponiveis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.nv-integ-disp {
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s;
}
.nv-integ-disp:hover {
    border-color: #e37220;
    transform: translateY(-2px);
}
.nv-integ-disp h4 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 0.96rem;
    color: var(--color-ink);
}
.nv-integ-disp small {
    color: var(--color-muted);
    font-size: 0.78rem;
    display: block;
    margin-bottom: 6px;
}

/* Form de integração */
.nv-integ-form-header {
    display: flex;
    gap: 14px;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-line);
}
.nv-integ-form-header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
}
.nv-integ-form-header p { font-size: 0.86rem; }
.nv-integ-form-header a {
    color: #e37220;
    text-decoration: none;
}

.nv-integ-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.nv-integ-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nv-integ-form-grid label.nv-cli-full { grid-column: 1 / -1; }
.nv-integ-form-grid label > span:first-child {
    font-size: 0.84rem;
    color: var(--color-muted);
    font-weight: 600;
}
.nv-integ-form-grid input,
.nv-integ-form-grid select {
    padding: 8px 12px;
    border: 1px solid var(--color-line);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9rem;
}
.nv-integ-form-grid input[readonly] {
    background: rgba(13,27,42,0.04);
    color: var(--color-muted);
    cursor: text;
}

@media (max-width: 700px) {
    .nv-integ-form-grid { grid-template-columns: 1fr; }
}