/* ============================================================================
   Neurodor — Componentes DSV2 (Fase 2)
   ----------------------------------------------------------------------------
   Carregado quando dsv2.flags.components_v2 = true.
   Complementa nd-components.css (botões/inputs já lá).

   Inclui:
   - .nd-btn-block, refinos .nd-btn-*
   - .nd-card canonical (grid auto 1fr auto, line-clamp obrigatório)
   - Aliases para .neurodor-course-card, .ndi-course-card, .course-card-v2
   - .nd-kpi, .nd-empty, .nd-tag, .nd-about colapsável
   - .nd-avatar (iniciais em círculo), .nd-user-menu (dropdown), .nd-toast
============================================================================ */

/* ─── Botões — completar variantes ──────────────────────────────────────── */
.nd-btn-block { width: 100%; }
.nd-btn[disabled],
.nd-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ─── Card canonical ───────────────────────────────────────────────────────
   Estrutura SEMPRE: <article class="nd-card [variant]">
                       <div class="nd-card-thumb">...</div>
                       <div class="nd-card-body">...</div>
                       <div class="nd-card-footer">...</div>
                     </article>
   Grid `auto 1fr auto` garante footer SEMPRE colado embaixo + altura uniforme. */
.nd-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--nd-bg-surface, #FFFFFF);
    border: 1px solid var(--nd-border, #E2E8EB);
    border-radius: var(--nd-radius, 12px);
    overflow: hidden;
    transition: transform var(--nd-dur-fast, 150ms) ease,
                border-color var(--nd-dur-fast, 150ms) ease,
                box-shadow var(--nd-dur-fast, 150ms) ease;
    min-width: 0; /* permite line-clamp em grid children */
}
.nd-card:hover {
    border-color: var(--nd-brand-border, color-mix(in srgb, var(--nd-brand, #1FBA7A) 28%, transparent));
    transform: translateY(-2px);
    box-shadow: var(--nd-shadow-md, 0 6px 16px rgba(0,0,0,0.08));
}

/* Thumb — ratio fixo, image cover */
.nd-card-thumb {
    aspect-ratio: 16 / 10;
    background: var(--nd-bg-surface-2, #F0F4F5);
    position: relative;
    overflow: hidden;
}
.nd-card-thumb img,
.nd-card-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nd-card-thumb .nd-tag {
    position: absolute;
    top: var(--nd-sp-2, 8px);
    left: var(--nd-sp-2, 8px);
    z-index: 1;
}

/* Body — preenche altura disponível */
.nd-card-body {
    padding: var(--nd-sp-4, 16px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Eyebrow — texto pequeno acima do título */
.nd-card-eyebrow {
    font-family: ui-monospace, "JetBrains Mono", "SF Mono", monospace;
    font-size: 10px;
    color: var(--nd-text-muted, #56707A);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Título — SEMPRE 2 linhas máx */
.nd-card-title {
    font-size: var(--nd-fs-sm, 0.9rem);
    font-weight: 500;
    margin: 0;
    color: var(--nd-text, #0E1B22);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(1.35em * 2);
    /* 2026-05-16: defensivo contra palavra única longa (ex: "Neuromodulação")
       estourar a coluna do grid em mobile — line-clamp esconde verticalmente
       mas não horizontalmente. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Desc — SEMPRE 3 linhas máx */
.nd-card-desc {
    font-size: 12px;
    color: var(--nd-text-muted, #56707A);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(1.5em * 3);
}

/* Footer — sempre embaixo (grid 3ª linha) */
.nd-card-footer {
    padding: var(--nd-sp-3, 12px) var(--nd-sp-4, 16px);
    border-top: 1px solid var(--nd-border, #E2E8EB);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nd-sp-2, 8px);
}

.nd-card-price {
    font-weight: 700;
    color: var(--nd-text, #0E1B22);
}

/* Variantes de card */
/* --course é o default visual (sem override). Marcador semântico — ajuda CSS
   futuro a fazer regras específicas sem precisar mudar markup. */
.nd-card--course { /* default — aspect-ratio 16/10 herdado de .nd-card-thumb */ }
.nd-card--module .nd-card-thumb { aspect-ratio: 1 / 1; }
.nd-card--module .nd-card-body { padding: var(--nd-sp-3, 12px); }
.nd-card--module .nd-card-title {
    font-size: 13px;
    -webkit-line-clamp: 2;
    max-height: calc(1.35em * 2);
}

.nd-card--upsell .nd-card-thumb { aspect-ratio: 16 / 9; }

.nd-card--plan .nd-card-thumb { display: none; }
.nd-card--plan { grid-template-rows: 1fr auto; }
.nd-card--plan .nd-card-body { padding: var(--nd-sp-5, 24px); }

/* ─── Aliases — consolidação dos 5 cards divergentes ───────────────────────
   Permite que CSS existente (.neurodor-course-card, .ndi-course-card,
   .course-card-v2, .interface-ea-card) ganhe o mesmo comportamento de
   grid+line-clamp sem precisar refatorar o markup de TODOS os templates.
   Migração progressiva sem regressão. */
.neurodor-course-card,
.ndi-course-card,
.course-card-v2,
.nd-logged-area .interface-ea-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
}

/* .interface-ea-card — ALTURA FIXA + descrição SCROLLABLE interna.
   Card é <a> clicável; descrição dentro tem scroll próprio (pointer-events
   bloqueia propagação de wheel pro link, mas click ainda navega).
   Decisão Q6 — altura uniforme do grid + permite ler texto completo. */
.nd-logged-area .interface-ea-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 220px;
    max-height: 280px;
    overflow: hidden;
    padding: var(--nd-sp-5, 24px) !important; /* sobrescreve p-9 muito grande */
}
.nd-logged-area .interface-ea-card .card-body .fs-4,
.nd-logged-area .interface-ea-card .card-body .fs-3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    max-height: calc(1.3em * 2);
    word-break: break-word;
    flex-shrink: 0;
}

/* Descrição — altura fixa + SCROLLABLE interno. Scrollbar custom discreto.
   Fade-out no fim quando há overflow ainda não rolado. */
.nd-logged-area .interface-ea-card .card-body p,
.nd-logged-area .interface-ea-card .card-body .text-gray-500.fs-5,
.nd-logged-area .interface-ea-card .card-body .text-gray-500.fs-6 {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    line-height: 1.5;
    white-space: pre-line;          /* preserva quebras do ACF */
    word-break: break-word;
    margin-bottom: 0;
    padding-right: 6px;
    cursor: text;                   /* indica área de leitura */
    scrollbar-width: thin;
    scrollbar-color: var(--nd-brand-border, color-mix(in srgb, var(--nd-brand, #1FBA7A) 28%, transparent)) transparent;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}
.nd-logged-area .interface-ea-card .card-body p::-webkit-scrollbar,
.nd-logged-area .interface-ea-card .card-body .text-gray-500.fs-5::-webkit-scrollbar,
.nd-logged-area .interface-ea-card .card-body .text-gray-500.fs-6::-webkit-scrollbar {
    width: 6px;
}
.nd-logged-area .interface-ea-card .card-body p::-webkit-scrollbar-thumb,
.nd-logged-area .interface-ea-card .card-body .text-gray-500.fs-5::-webkit-scrollbar-thumb,
.nd-logged-area .interface-ea-card .card-body .text-gray-500.fs-6::-webkit-scrollbar-thumb {
    background: var(--nd-brand-border, color-mix(in srgb, var(--nd-brand, #1FBA7A) 28%, transparent));
    border-radius: 3px;
}
.nd-logged-area .interface-ea-card .card-body p:hover::-webkit-scrollbar-thumb,
.nd-logged-area .interface-ea-card .card-body .text-gray-500.fs-5:hover::-webkit-scrollbar-thumb,
.nd-logged-area .interface-ea-card .card-body .text-gray-500.fs-6:hover::-webkit-scrollbar-thumb {
    background: var(--nd-brand, #1FBA7A);
}

/* Indicador "rolável" — ponta inferior pulsando quando há overflow */
.nd-logged-area .interface-ea-card .card-body {
    position: relative;
}
.nd-logged-area .interface-ea-card .card-body::after {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 24px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--nd-brand-soft, color-mix(in srgb, var(--nd-brand, #1FBA7A) 12%, transparent));
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231FBA7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    pointer-events: none;
    opacity: 0.7;
    animation: nd-card-scroll-hint 1.8s ease-in-out infinite;
}
@keyframes nd-card-scroll-hint {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50%      { transform: translateY(3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .nd-logged-area .interface-ea-card .card-body::after { animation: none; }
}

/* card-image tem aspect-ratio fixo */
.nd-logged-area .interface-ea-card .card-image {
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    width: 100%;
}

/* Mobile — altura reduzida */
@media (max-width: 600px) {
    .nd-logged-area .interface-ea-card .card-body {
        min-height: 180px;
        max-height: 240px;
        padding: var(--nd-sp-4, 16px) !important;
    }
    .nd-logged-area .interface-ea-card .card-body::after {
        right: 16px;
    }
}

/* ============================================================================
   CARDS LEGACY (single-modulos.php, taxonomy-simulados, single-resumos etc.)
   ----------------------------------------------------------------------------
   Estes cards usam .card.border-hover-success/danger SEM .interface-ea-card
   (que ganha tratamento próprio acima). Em tema legacy:
   - .card-image = 300px fixo (custom.css) → desproporcional vs texto curto
   - .card-body.p-9 sem altura mínima, texto pode ser cortado
   - Em dark mode, color do title herdava .text-gray-900 (escuro) sobre fundo escuro
   Fix: imagem ratio adequado, texto line-clamp 3, cores tokenizadas, altura mínima.
============================================================================ */
.nd-logged-area .card.border-hover-success:not(.interface-ea-card),
.nd-logged-area .card.border-hover-danger:not(.interface-ea-card) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--nd-bg-surface, #ffffff);
    color: var(--nd-text, #0f172a);
}
.nd-logged-area .card.border-hover-success:not(.interface-ea-card) > .card-header,
.nd-logged-area .card.border-hover-danger:not(.interface-ea-card) > .card-header {
    flex-shrink: 0;
}
.nd-logged-area .card.border-hover-success:not(.interface-ea-card) .card-image,
.nd-logged-area .card.border-hover-danger:not(.interface-ea-card) .card-image {
    height: 180px !important;       /* sobrescreve 300px do custom.css */
}
.nd-logged-area .card.border-hover-success:not(.interface-ea-card) .card-body,
.nd-logged-area .card.border-hover-danger:not(.interface-ea-card) .card-body {
    padding: var(--nd-sp-4, 16px) var(--nd-sp-5, 20px) !important;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--nd-text, #0f172a);
}
.nd-logged-area .card.border-hover-success:not(.interface-ea-card) .card-body .fs-2,
.nd-logged-area .card.border-hover-success:not(.interface-ea-card) .card-body .fs-3,
.nd-logged-area .card.border-hover-success:not(.interface-ea-card) .card-body .fs-4,
.nd-logged-area .card.border-hover-danger:not(.interface-ea-card) .card-body .fs-2,
.nd-logged-area .card.border-hover-danger:not(.interface-ea-card) .card-body .fs-3,
.nd-logged-area .card.border-hover-danger:not(.interface-ea-card) .card-body .fs-4 {
    font-size: var(--nd-fs-base, 1rem) !important;
    font-weight: 700;
    line-height: 1.3;
    color: var(--nd-text, #0f172a) !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    margin: 0;
}
.nd-logged-area .card.border-hover-success:not(.interface-ea-card) .card-body small,
.nd-logged-area .card.border-hover-success:not(.interface-ea-card) .card-body .text-gray-500,
.nd-logged-area .card.border-hover-success:not(.interface-ea-card) .card-body .text-gray-600,
.nd-logged-area .card.border-hover-danger:not(.interface-ea-card) .card-body small,
.nd-logged-area .card.border-hover-danger:not(.interface-ea-card) .card-body .text-gray-500,
.nd-logged-area .card.border-hover-danger:not(.interface-ea-card) .card-body .text-gray-600 {
    color: var(--nd-text-soft, #64748b) !important;
    font-size: var(--nd-fs-xs, 0.78rem);
    line-height: 1.4;
}
/* Cards com DESCRIÇÃO longa (p ou .fs-5/.fs-6) — scroll interno como nos .interface-ea-card */
.nd-logged-area .card.border-hover-success:not(.interface-ea-card) .card-body p,
.nd-logged-area .card.border-hover-danger:not(.interface-ea-card) .card-body p {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 6em;
    overflow-y: auto;
    overflow-x: hidden;
    line-height: 1.5;
    font-size: var(--nd-fs-sm, 0.875rem);
    color: var(--nd-text-soft, #475569);
    margin: 0;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--nd-brand-border, color-mix(in srgb, var(--nd-brand, #1FBA7A) 28%, transparent)) transparent;
}
.nd-logged-area .card.border-hover-success:not(.interface-ea-card) .card-body p::-webkit-scrollbar,
.nd-logged-area .card.border-hover-danger:not(.interface-ea-card) .card-body p::-webkit-scrollbar {
    width: 4px;
}
.nd-logged-area .card.border-hover-success:not(.interface-ea-card) .card-body p::-webkit-scrollbar-thumb,
.nd-logged-area .card.border-hover-danger:not(.interface-ea-card) .card-body p::-webkit-scrollbar-thumb {
    background: var(--nd-brand-border, color-mix(in srgb, var(--nd-brand, #1FBA7A) 28%, transparent));
    border-radius: 2px;
}
.nd-logged-area .card.border-hover-danger.disabled-card { opacity: 0.7; }

/* Dark mode — text-gray-900 sobre superfície escura precisa de cor clara explícita */
[data-theme="dark"] .nd-logged-area .card.border-hover-success:not(.interface-ea-card),
[data-theme="dark"] .nd-logged-area .card.border-hover-danger:not(.interface-ea-card) {
    background: var(--nd-bg-surface, #1a2433);
    border-color: var(--nd-border, #233038);
}

@media (max-width: 600px) {
    .nd-logged-area .card.border-hover-success:not(.interface-ea-card) .card-image,
    .nd-logged-area .card.border-hover-danger:not(.interface-ea-card) .card-image {
        height: 140px !important;
    }
    .nd-logged-area .card.border-hover-success:not(.interface-ea-card) .card-body,
    .nd-logged-area .card.border-hover-danger:not(.interface-ea-card) .card-body {
        padding: var(--nd-sp-3, 12px) var(--nd-sp-4, 14px) !important;
        min-height: 70px;
    }
}
.neurodor-course-card .neurodor-course-card__title,
.neurodor-course-card-title,
.ndi-course-card__title,
.course-card-v2 .title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    max-height: calc(1.35em * 2);
}
.neurodor-course-card .neurodor-course-card__desc,
.neurodor-course-card-desc,
.ndi-course-card__desc,
.course-card-v2 .desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    max-height: calc(1.5em * 3);
}

/* ─── KPI (já tinha .interface-kpi-* no projeto, este é mais limpo) ────── */
.nd-kpi {
    background: var(--nd-bg-surface, #FFFFFF);
    border: 1px solid var(--nd-border, #E2E8EB);
    border-radius: var(--nd-radius, 12px);
    padding: var(--nd-sp-4, 16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nd-sp-3, 12px);
    min-width: 0;
}
.nd-kpi-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nd-kpi-num {
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: var(--nd-fs-xl, 1.5rem);
    font-weight: 600;
    line-height: 1;
    color: var(--nd-text, #0E1B22);
}
.nd-kpi-lbl {
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 10px;
    color: var(--nd-text-muted, #56707A);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.nd-kpi-ic {
    width: 36px;
    height: 36px;
    border-radius: var(--nd-radius-sm, 8px);
    background: var(--nd-brand-soft, color-mix(in srgb, var(--nd-brand, #1FBA7A) 10%, transparent));
    color: var(--nd-brand, #1FBA7A);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.nd-kpi-ic svg { width: 18px; height: 18px; }

/* ─── Empty state ─────────────────────────────────────────────────────── */
.nd-empty {
    padding: var(--nd-sp-5, 24px) var(--nd-sp-4, 16px);
    text-align: center;
    border: 1px dashed var(--nd-border, #E2E8EB);
    border-radius: var(--nd-radius, 12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nd-sp-2, 8px);
    color: var(--nd-text-muted, #56707A);
    font-size: var(--nd-fs-sm, 0.9rem);
    background: transparent;
}
.nd-empty svg {
    width: 28px;
    height: 28px;
    color: var(--nd-text-dim, #8DA0A8);
}

/* ─── Tags ────────────────────────────────────────────────────────────── */
.nd-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--nd-radius-pill, 999px);
    font-size: 10px;
    font-family: ui-monospace, "JetBrains Mono", monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.4;
}
.nd-tag-live    { background: rgba(255, 77, 77, 0.15);  color: var(--nd-live, #FF4D4D); }
.nd-tag-new     { background: var(--nd-brand-soft, color-mix(in srgb, var(--nd-brand, #1FBA7A) 12%, transparent)); color: var(--nd-brand, #1FBA7A); }
.nd-tag-pending { background: rgba(74, 158, 255, 0.12); color: var(--nd-info, #4A9EFF); }
.nd-tag-warn    { background: rgba(240, 180, 41, 0.15); color: var(--nd-warn, #F0B429); }

/* ─── Bloco "Sobre o curso" colapsável ─────────────────────────────────── */
.nd-about {
    background: var(--nd-bg-surface, #FFFFFF);
    border: 1px solid var(--nd-border, #E2E8EB);
    border-radius: var(--nd-radius, 12px);
    padding: var(--nd-sp-5, 24px);
}
.nd-about-heading {
    font-size: var(--nd-fs-xs, 0.75rem);
    font-family: ui-monospace, "JetBrains Mono", monospace;
    color: var(--nd-text-muted, #56707A);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--nd-sp-3, 12px);
}
.nd-about-lead {
    font-size: var(--nd-fs-lg, 1.125rem);
    font-weight: 300;
    line-height: 1.45;
    margin: 0 0 var(--nd-sp-4, 16px);
    color: var(--nd-text, #0E1B22);
}
.nd-about-body {
    font-size: var(--nd-fs-sm, 0.9rem);
    color: var(--nd-text-muted, #56707A);
    line-height: 1.65;
    position: relative;
    overflow: hidden;
    transition: max-height 350ms cubic-bezier(.2, .8, .2, 1);
}
.nd-about-body > * + * { margin-top: var(--nd-sp-3, 12px); }
.nd-about[data-state="collapsed"] .nd-about-body { max-height: 8.5em; }
.nd-about[data-state="collapsed"] .nd-about-body::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 4em;
    background: linear-gradient(transparent, var(--nd-bg-surface, #FFFFFF));
    pointer-events: none;
}
.nd-about[data-state="expanded"] .nd-about-body { max-height: 9999px; }
.nd-about[data-state="collapsed"] .nd-about-toggle-hide { display: none; }
.nd-about[data-state="expanded"]  .nd-about-toggle-show { display: none; }
.nd-about-toggle { margin-top: var(--nd-sp-3, 12px); font-weight: 500; }

/* ─── Avatar (iniciais em círculo) ─────────────────────────────────────── */
.nd-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--nd-brand-soft, color-mix(in srgb, var(--nd-brand, #1FBA7A) 12%, transparent));
    color: var(--nd-brand, #1FBA7A);
    font-weight: 700;
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
    text-transform: uppercase;
    border: 1px solid var(--nd-brand-border, color-mix(in srgb, var(--nd-brand, #1FBA7A) 28%, transparent));
}
.nd-avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.nd-avatar-md { width: 40px; height: 40px; font-size: 14px; }
.nd-avatar-lg { width: 48px; height: 48px; font-size: 17px; }
.nd-avatar-xl { width: 64px; height: 64px; font-size: 22px; }

/* Versão clicável — botão wrapper com touch target */
button.nd-avatar,
a.nd-avatar {
    cursor: pointer;
    padding: 0;
    transition: filter var(--nd-dur-fast, 150ms) ease,
                box-shadow var(--nd-dur-fast, 150ms) ease;
}
button.nd-avatar:hover,
a.nd-avatar:hover {
    filter: brightness(1.05);
    box-shadow: var(--nd-shadow-glow, 0 0 0 4px rgba(31,186,122,0.18));
}
button.nd-avatar:focus-visible,
a.nd-avatar:focus-visible {
    outline: none;
    box-shadow: var(--nd-shadow-glow, 0 0 0 4px rgba(31,186,122,0.25));
}

/* ─── User menu (dropdown) ─────────────────────────────────────────────── */
.nd-user-menu {
    position: relative;
    display: inline-block;
}
.nd-user-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    background: var(--nd-bg-surface, #FFFFFF);
    border: 1px solid var(--nd-border, #E2E8EB);
    border-radius: var(--nd-radius, 12px);
    box-shadow: var(--nd-shadow-lg, 0 20px 48px rgba(0,0,0,0.12));
    padding: var(--nd-sp-2, 8px);
    z-index: var(--nd-z-modal, 200);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--nd-dur-fast, 150ms) ease, transform var(--nd-dur-fast, 150ms) ease;
}
.nd-user-menu[data-open="true"] .nd-user-menu-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.nd-user-menu-header {
    padding: var(--nd-sp-2, 8px) var(--nd-sp-3, 12px);
    border-bottom: 1px solid var(--nd-border, #E2E8EB);
    margin-bottom: var(--nd-sp-2, 8px);
}
.nd-user-menu-name {
    font-weight: 600;
    color: var(--nd-text, #0E1B22);
    font-size: var(--nd-fs-sm, 0.9rem);
    margin: 0;
}
.nd-user-menu-email {
    font-size: 11px;
    color: var(--nd-text-muted, #56707A);
    margin: 2px 0 0;
}

.nd-user-menu-item {
    display: flex;
    align-items: center;
    gap: var(--nd-sp-2, 8px);
    padding: var(--nd-sp-2, 8px) var(--nd-sp-3, 12px);
    border-radius: var(--nd-radius-sm, 8px);
    color: var(--nd-text, #0E1B22);
    text-decoration: none;
    font-size: var(--nd-fs-sm, 0.9rem);
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    transition: background var(--nd-dur-fast, 150ms) ease;
    line-height: 1.3;
    min-height: var(--nd-touch-min, 44px);
}
.nd-user-menu-item:hover,
.nd-user-menu-item:focus-visible {
    background: var(--nd-bg-surface-2, #F0F4F5);
    color: var(--nd-text, #0E1B22);
    outline: none;
}
.nd-user-menu-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--nd-text-muted, #56707A);
}
.nd-user-menu-item--danger { color: var(--nd-danger, #E5484D); }
.nd-user-menu-item--danger svg { color: var(--nd-danger, #E5484D); }

.nd-user-menu-divider {
    height: 1px;
    background: var(--nd-border, #E2E8EB);
    margin: var(--nd-sp-2, 8px) 0;
}

.nd-user-menu-section {
    padding: var(--nd-sp-2, 8px) var(--nd-sp-3, 12px) 4px;
    font-size: 10px;
    font-family: ui-monospace, "JetBrains Mono", monospace;
    color: var(--nd-text-muted, #56707A);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Paleta swatches (radio disfarçado) */
.nd-palette-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 0 var(--nd-sp-3, 12px) var(--nd-sp-2, 8px);
}
.nd-palette-swatch {
    aspect-ratio: 1 / 1;
    border-radius: var(--nd-radius-sm, 8px);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--nd-dur-fast, 150ms) ease, border-color var(--nd-dur-fast, 150ms) ease;
    background-clip: padding-box;
    position: relative;
}
.nd-palette-swatch:hover { transform: scale(1.05); }
.nd-palette-swatch[aria-checked="true"] {
    border-color: var(--nd-text, #0E1B22);
    box-shadow: var(--nd-shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
}
.nd-palette-swatch--padrao  { background: linear-gradient(135deg, var(--nd-brand, #1FBA7A) 50%, #FFFFFF 50%); }
.nd-palette-swatch--noturno { background: linear-gradient(135deg, #25D08A 50%, #131A1F 50%); }
.nd-palette-swatch--azul    { background: linear-gradient(135deg, #4A9EFF 50%, #FFFFFF 50%); }
.nd-palette-swatch--sepia   { background: linear-gradient(135deg, #5C8A6E 50%, #F4ECD8 50%); }

/* ─── Theme toggle (sun/moon) ──────────────────────────────────────────── */
.nd-theme-toggle .nd-theme-icon-sun  { display: inline-block; }
.nd-theme-toggle .nd-theme-icon-moon { display: none; }
[data-theme="dark"] .nd-theme-toggle .nd-theme-icon-sun  { display: none; }
[data-theme="dark"] .nd-theme-toggle .nd-theme-icon-moon { display: inline-block; }

/* ─── Toast (feedback rápido) ──────────────────────────────────────────── */
#nd-toast-root {
    position: fixed;
    top: var(--nd-sp-4, 16px);
    right: var(--nd-sp-4, 16px);
    /* 10001 — acima do dock (10000), avatar (9000), sino (8999) e header
       Metronic (~1000). Antes era 300 (--nd-z-toast) e sumia atrás dos floats. */
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: var(--nd-sp-2, 8px);
    pointer-events: none;
    max-width: 320px;
}
.nd-toast {
    background: var(--nd-bg-surface, #FFFFFF);
    border: 1px solid var(--nd-border, #E2E8EB);
    border-left: 3px solid var(--nd-brand, #1FBA7A);
    border-radius: var(--nd-radius-sm, 8px);
    padding: var(--nd-sp-3, 12px) var(--nd-sp-4, 16px);
    box-shadow: var(--nd-shadow-md, 0 6px 16px rgba(0,0,0,0.08));
    color: var(--nd-text, #0E1B22);
    font-size: var(--nd-fs-sm, 0.9rem);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity var(--nd-dur-base, 250ms) ease,
                transform var(--nd-dur-base, 250ms) ease;
}
.nd-toast.is-visible {
    opacity: 1;
    transform: translateX(0);
}
.nd-toast--success { border-left-color: var(--nd-brand, #1FBA7A); }
.nd-toast--error   { border-left-color: var(--nd-danger, #E5484D); }
.nd-toast--warn    { border-left-color: var(--nd-warn, #F0B429); }
.nd-toast--info    { border-left-color: var(--nd-info, #4A9EFF); }

/* ─── Hide .profile-thumbnail quando DSV2 components_v2 ON (decisão Q16) ─
   Avatar com foto circular legado some — substituído por .nd-avatar com
   iniciais. Site permanece funcional se flag desligar. */
.dsv2-components-v2 .profile-thumbnail { display: none; }

/* ─── DSV2 Fase 4 — esconder bloco user-menu Metronic quando logged_v2 ON ─
   header.php tem #kt_header_user_menu_toggle com markup Metronic (foto+dropdown).
   Quando logged_v2 ON, mostramos o .nd-user-menu floating no topo via wp_footer
   e escondemos o legado. */
.dsv2-logged-v2 #kt_header_user_menu_toggle { display: none !important; }
/* Esconde também o toggle Metronic da sidebar (ícone "<" que aparece misturado
   no user-menu floating). A UX nova de minimizar/maximizar agora é via item
   "Minimizar barra lateral" no dropdown do user-menu. */
.dsv2-logged-v2 #kt_app_sidebar_toggle { display: none !important; }
/* Estado ativo do botão "Maximizar/Minimizar barra lateral" no user-menu */
.nd-user-menu-item[data-nd-action="toggle-sidebar"].is-active {
    background: var(--nd-brand-soft, color-mix(in srgb, var(--nd-brand, #1FBA7A) 12%, transparent)) !important;
    color: var(--nd-brand, #1FBA7A) !important;
    font-weight: 600;
}
.nd-user-menu-item[data-nd-action="toggle-sidebar"].is-active svg {
    color: var(--nd-brand, #1FBA7A);
}

/* Desktop (≥992px) — esvazia o conteúdo do #kt_app_header sem mexer na altura.
   - logo `.nd-mobile-header-logo` já é display:none em desktop (linhas abaixo)
   - avatar `#kt_header_user_menu_toggle` é redundante (temos .nd-user-menu-floating)
   Usamos visibility:hidden no container interno para preservar a altura do
   header e o offset --bs-app-header-height-desktop que o Metronic aplica ao
   conteúdo da página. Sino e avatar floating são position:fixed → continuam
   visíveis sobrepostos. */
@media (min-width: 992px) {
    #kt_app_header > #kt_app_header_container > * {
        visibility: hidden;
    }
}

/* Mobile header: logo centralizada injetada via JS (injectMobileHeaderLogo).
   Visível só em <992px. B.F5.19 — Toda configuração de mobile dentro da media
   query para evitar conflito com desktop. */
.nd-mobile-header-logo {
    display: none; /* desktop: oculto */
    pointer-events: auto;
    text-decoration: none;
    z-index: 1;
}
.nd-mobile-header-logo img {
    max-height: 32px;
    width: auto;
    display: block;
}
/* B.F5.19 — Force dark variant hidden by default (specificity 0,2,0 vence
   `.nd-mobile-header-logo img { display: block }` que era 0,1,1). Sem isso,
   em paleta clara aparecia logo light + dark sobrepostos. */
.nd-mobile-header-logo .nd-logo__dark { display: none; }

/* Destaque controlado do logo em fundos escuros.
   Em vez de depender só de filter no bitmap, cria uma cápsula suave atrás do logo
   para melhorar a leitura do texto em headers/sidebars dark. */
:root {
    --nd-logo-dark-filter: drop-shadow(0 1px 0 rgba(255,255,255,.14)) brightness(1.06) contrast(1.04);
    --nd-logo-dark-shell-bg: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
    --nd-logo-dark-shell-border: rgba(255,255,255,.12);
    --nd-logo-dark-shell-shadow: 0 8px 22px rgba(0,0,0,.18);
}

html[data-theme="dark"] .dsv2-logged-v2 .app-sidebar-logo > a,
html[data-theme="dark"] .dsv2-logged-v2 .nd-mobile-header-logo,
html[data-theme="dark"] .neurodor-panel-body .app-sidebar-logo > a,
html[data-theme="dark"] .neurodor-panel-body .nd-mobile-header-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 16px;
    background: var(--nd-logo-dark-shell-bg);
    border: 1px solid var(--nd-logo-dark-shell-border);
    box-shadow: var(--nd-logo-dark-shell-shadow);
    backdrop-filter: blur(8px) saturate(1.05);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
}

html[data-theme="dark"] .dsv2-logged-v2 .app-sidebar-logo .app-sidebar-logo-default,
html[data-theme="dark"] .dsv2-logged-v2 .nd-mobile-header-logo img,
html[data-theme="dark"] .neurodor-panel-body .app-sidebar-logo .app-sidebar-logo-default,
html[data-theme="dark"] .neurodor-panel-body .nd-mobile-header-logo img {
    filter: var(--nd-logo-dark-filter);
    transform: translateZ(0);
    transition: filter var(--nd-dur-base, 250ms) ease, opacity var(--nd-dur-base, 250ms) ease, transform var(--nd-dur-base, 250ms) ease;
}

html[data-theme="dark"] .dsv2-logged-v2 .app-sidebar-logo > a:hover,
html[data-theme="dark"] .dsv2-logged-v2 .nd-mobile-header-logo:hover,
html[data-theme="dark"] .neurodor-panel-body .app-sidebar-logo > a:hover,
html[data-theme="dark"] .neurodor-panel-body .nd-mobile-header-logo:hover {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
    border-color: rgba(255,255,255,.16);
}

html[data-theme="dark"] .dsv2-logged-v2 .app-sidebar-logo > a:hover .app-sidebar-logo-default,
html[data-theme="dark"] .dsv2-logged-v2 .nd-mobile-header-logo:hover img,
html[data-theme="dark"] .neurodor-panel-body .app-sidebar-logo > a:hover .app-sidebar-logo-default,
html[data-theme="dark"] .neurodor-panel-body .nd-mobile-header-logo:hover img {
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.18)) brightness(1.1) contrast(1.06);
}
@media (max-width: 991px) {
    /* B.F5.20 — abandonando position:absolute (algumas regras Metronic em
       html[data-theme="dark"] .dsv2-logged-v2 .nd-mobile-header-logo herdavam
       sem position, gerando layout inesperado).

       Nova abordagem: flex layout dentro de #kt_app_header_container.
       Hamburger ocupa flex shrink à esquerda; logo flex-grows ao centro;
       wrapper flex shrink à direita com avatar. Centralização via
       justify-content do flex item logo. */
    #kt_app_header_container {
        position: relative;
        display: flex;
        align-items: center;
    }
    /* Force wrapper a não invadir o meio em mobile (já tem flex-lg-grow-1 só
       em desktop, mas reforçamos shrink em mobile). */
    #kt_app_header_container > #kt_app_header_wrapper {
        flex: 0 0 auto;
    }
    /* Logo ocupa o meio via flex grow + centra o conteúdo via justify */
    .nd-mobile-header-logo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
        padding: 0;
        /* Reset qualquer position herdado (regras antigas dark theme) */
        position: static;
        left: auto;
        top: auto;
        /* 2026-05-16 — ajuste fino de centralização configurável em
           admin → Interface EAD → Logo Mobile. Variáveis emitidas no <head>
           por interface_ead_mobile_logo_emit_vars(). Defaults se admin off:
           -12px base, +0 (sem sino). */
        transform: translateX(var(--nd-mobile-logo-shift, -12px));
        transition: transform 200ms ease;
        max-width: none;
    }
    /* Compensação adicional quando o sino de notificações está visível.
       :has() suportado em Safari 15.4+, Chrome 105+, Firefox 121+. Fallback:
       browsers antigos ficam só no shift base (graceful). */
    body:has(.neurodor-hub-bell) .nd-mobile-header-logo {
        transform: translateX(calc(var(--nd-mobile-logo-shift, -12px) + var(--nd-mobile-logo-shift-bell-extra, -8px)));
    }

    /* Visibilidade light/dark em mobile, com specificity acima das regras de img.
       Trigger paleta noturno OU body.nd-mode-dark OU prefers-color-scheme dark. */
    html[data-palette="noturno"] .nd-mobile-header-logo.has-dark-variant .nd-logo__light,
    body.nd-mode-dark .nd-mobile-header-logo.has-dark-variant .nd-logo__light {
        display: none;
    }
    html[data-palette="noturno"] .nd-mobile-header-logo.has-dark-variant .nd-logo__dark,
    body.nd-mode-dark .nd-mobile-header-logo.has-dark-variant .nd-logo__dark {
        display: block;
    }
    @media (prefers-color-scheme: dark) {
        html:not([data-palette="padrao"]):not([data-palette="azul"]):not([data-palette="sepia"]) .nd-mobile-header-logo.has-dark-variant .nd-logo__light {
            display: none;
        }
        html:not([data-palette="padrao"]):not([data-palette="azul"]):not([data-palette="sepia"]) .nd-mobile-header-logo.has-dark-variant .nd-logo__dark {
            display: block;
        }
    }

    /* Esconde o app-header-menu drawer empty da Metronic em mobile (cria espaço
       fantasma entre logo e avatar). */
    #kt_app_header_wrapper .app-header-menu:empty {
        display: none !important;
    }
}
/* Handheld pequeno (<360px): logo encolhe pra liberar zona-direita.
   Combinado com hub.css que esconde o sino, sobra avatar + hamburger + logo. */
@media (max-width: 360px) {
    .nd-mobile-header-logo img { max-height: 22px; }
    .nd-mobile-header-logo { max-width: 32px; overflow: hidden; }
}
/* Esconde também o bloco rodapé sidebar (linhas 561-602 header.php — decisão Q18) */
.dsv2-logged-v2 .app-sidebar .app-sidebar-footer,
.dsv2-logged-v2 #kt_app_sidebar_footer { display: none !important; }

/* User menu floating injected via wp_footer — posiciona top-right.
   Em telas <900px, fica no canto direito do header Metronic mobile. */
/* Centralizado verticalmente no Metronic #kt_app_header:
   - Desktop (>=992px): --bs-app-header-height=70px → avatar 40px centraliza em top: 15px
   - Mobile (<992px):  --bs-app-header-height=60px → avatar 40px centraliza em top: 10px
   Páginas com topbar custom (ex.: /ao-vivo/) têm override específico abaixo. */
.nd-user-menu-floating {
    position: fixed;
    top: 15px;
    right: 10px;          /* desktop: mais perto da borda, libera espaço pro sino */
    z-index: 9000;
}
@media (max-width: 991px) {
    .nd-user-menu-floating {
        top: 10px;
        right: 16px;       /* mobile: mantém o spacing original */
        z-index: 9000;
    }
}
/* Dropdown panel quando aberto fica acima de tudo exceto modal/dock */
.nd-user-menu-floating .nd-user-menu-panel {
    z-index: 9001;
}
/* Admin user (logged with manage_options) — body.admin-bar é adicionado pelo
   WP quando #wpadminbar é renderizado no topo. Empurra o avatar floating pra
   BAIXO do admin bar pra não colidir com o user-menu nativo (top-right) dele.
   Desktop: adminbar 32px + centro do Metronic header (70px) = 32+15 = 47.
   Mobile: adminbar 46px + centro do Metronic header (60px) = 46+10 = 56.
   Em mobile o WP admin bar é position:absolute (scrolla com a página) então
   ao rolar o avatar pode dessincronizar do header — trade-off aceito (admin
   raramente testa scroll prolongado em mobile). */
body.admin-bar .nd-user-menu-floating {
    top: 47px;
}
@media (max-width: 991px) {
    body.admin-bar .nd-user-menu-floating {
        top: 56px;
    }
}
/* Quando floating, posicionar dropdown pra abaixo-esquerda (não estourar viewport) */
.nd-user-menu-floating .nd-user-menu-panel {
    right: 0;
    left: auto;
    min-width: 260px;
}
/* 2026-05-16 (v2): em mobile/tablet (<=991px) o panel é ancorado direto no
   VIEWPORT via position:fixed em vez de absolute dentro do .nd-user-menu-floating.
   Motivo: o floating é display:inline-block + width:40px, então `right:0` do panel
   (absolute) fica preso ao avatar — qualquer transform/padding herdado pode
   empurrar pra fora da tela. Fixed ancora no viewport e garante NUNCA estourar. */
@media (max-width: 991px) {
    .nd-user-menu-floating .nd-user-menu-panel {
        position: fixed;
        top: 60px;                      /* header Metronic mobile = 60px */
        right: 12px;
        left: auto;
        min-width: 0;
        width: 280px;
        max-width: calc(100vw - 24px);
    }
    body.admin-bar .nd-user-menu-floating .nd-user-menu-panel {
        top: 106px;                     /* admin-bar 46 + header 60 */
    }
}
@media (max-width: 480px) {
    /* Telas estreitas — panel preenche quase a viewport inteira, com respiro
       lateral simétrico de 12px. */
    .nd-user-menu-floating .nd-user-menu-panel {
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }
}

/* Avatar do floating ganha sombra leve pra destacar sobre header Metronic */
.nd-user-menu-floating .nd-avatar {
    box-shadow: var(--nd-shadow-md, 0 6px 16px rgba(0,0,0,0.08));
    border-width: 2px;
}

/* ─── Skeletons (loading state) ──────────────────────────────────────────
   Marcador: <div class="nd-skeleton"></div> ou aplicar .nd-skeleton em
   qualquer elemento. Shimmer animado via gradient + animation. Respeita
   prefers-reduced-motion (anima estática). */
.nd-skeleton {
    display: block;
    background-color: var(--nd-bg-surface-2, #F0F4F5);
    background-image: linear-gradient(
        90deg,
        var(--nd-bg-surface-2, #F0F4F5) 0%,
        var(--nd-bg-surface, #FFFFFF) 50%,
        var(--nd-bg-surface-2, #F0F4F5) 100%
    );
    background-size: 200% 100%;
    background-position: -200% 0;
    border-radius: var(--nd-radius-sm, 8px);
    animation: nd-skeleton-shimmer 1.5s ease-in-out infinite;
    min-height: 1em;
    color: transparent;
    user-select: none;
}
.nd-skeleton-text { height: 1em; margin-bottom: 4px; }
.nd-skeleton-text-sm { height: 0.75em; }
.nd-skeleton-title { height: 1.5em; margin-bottom: var(--nd-sp-2, 8px); }
.nd-skeleton-thumb { aspect-ratio: 16 / 10; min-height: 0; }
.nd-skeleton-circle { border-radius: 999px; aspect-ratio: 1 / 1; }
.nd-skeleton-block { height: 60px; }

/* Card-skeleton — espelha .nd-card pra grids de cursos */
.nd-card-skeleton {
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--nd-bg-surface, #FFFFFF);
    border: 1px solid var(--nd-border, #E2E8EB);
    border-radius: var(--nd-radius, 12px);
    overflow: hidden;
    min-height: 280px;
}
.nd-card-skeleton .nd-skeleton-thumb { border-radius: 0; }
.nd-card-skeleton-body { padding: var(--nd-sp-4, 16px); display: flex; flex-direction: column; gap: 6px; }
.nd-card-skeleton-footer { padding: var(--nd-sp-3, 12px) var(--nd-sp-4, 16px); border-top: 1px solid var(--nd-border, #E2E8EB); }

@keyframes nd-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .nd-skeleton {
        animation: none;
        background-position: 0 0;
    }
}

/* ============================================================================
   AJUSTES — sobreposições corrigidas + zona de alertas inferior da sidebar
   ============================================================================ */

/* C-fix) Sidebar minimize defensivo — quando Metronic JS não responde,
   aplicar visual manualmente via body.app-sidebar-minimize.
   Largura reduzida + esconde textos/sub-itens. Mantém ícones visíveis. */
body.app-sidebar-minimize .app-sidebar,
body.app-sidebar-minimize #kt_app_sidebar {
    width: 75px !important;
    transition: width var(--nd-dur-base, 250ms) ease;
}
body.app-sidebar-minimize .app-sidebar .menu-title,
body.app-sidebar-minimize .app-sidebar .menu-arrow,
body.app-sidebar-minimize .app-sidebar .menu-sub,
body.app-sidebar-minimize .app-sidebar .menu-badge,
body.app-sidebar-minimize .app-sidebar-logo .app-sidebar-logo-default,
body.app-sidebar-minimize .nd-aovivo-sidebar-label {
    display: none !important;
}
body.app-sidebar-minimize .app-sidebar .menu-icon,
body.app-sidebar-minimize .nd-aovivo-sidebar-visual {
    margin: 0 auto !important;
}
body.app-sidebar-minimize .app-content,
body.app-sidebar-minimize #kt_app_content,
body.app-sidebar-minimize #kt_app_main {
    margin-left: 75px !important;
    transition: margin-left var(--nd-dur-base, 250ms) ease;
}
@media (max-width: 991px) {
    body.app-sidebar-minimize .app-sidebar,
    body.app-sidebar-minimize #kt_app_sidebar {
        width: 100% !important;
        transform: translateX(-100%);
    }
    body.app-sidebar-minimize .app-content,
    body.app-sidebar-minimize #kt_app_content,
    body.app-sidebar-minimize #kt_app_main {
        margin-left: 0 !important;
    }
}
/* Hover expand quando sidebar tem hoverable */
body[data-kt-app-sidebar-hoverable="true"].app-sidebar-minimize .app-sidebar:hover {
    width: 225px !important;
}
body[data-kt-app-sidebar-hoverable="true"].app-sidebar-minimize .app-sidebar:hover .menu-title,
body[data-kt-app-sidebar-hoverable="true"].app-sidebar-minimize .app-sidebar:hover .app-sidebar-logo-default,
body[data-kt-app-sidebar-hoverable="true"].app-sidebar-minimize .app-sidebar:hover .nd-aovivo-sidebar-label {
    display: inline-block !important;
}


/* A) Sidebar slot ao-vivo (neurodor-aovivo) — subir pra não sobrepor com
   .nd-home-widget__launcher (neurodor-intent, fixed bottom-right ~60px).
   Zona reservada pra alertas futuros (mensagens, notificações urgentes). */
.dsv2-logged-v2 .nd-aovivo-sidebar-slot {
    margin-bottom: 96px !important;
    border-top: 1px solid var(--nd-border, #E2E8EB);
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--nd-brand-soft, color-mix(in srgb, var(--nd-brand, #1FBA7A) 8%, transparent)) 100%
    );
    border-radius: 0 0 var(--nd-radius, 12px) var(--nd-radius, 12px);
    padding: var(--nd-sp-2, 8px) var(--nd-sp-3, 12px);
}

/* Zona inferior reservada (futuro: mensagens, badges, alertas urgentes).
   Estrutura wrapper opcional — outros plugins podem injetar dentro de
   .nd-sidebar-alerts-zone via filter neurodor_panel_sidebar_alerts. */
.dsv2-logged-v2 .nd-sidebar-alerts-zone {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: var(--nd-sp-3, 12px);
    background: var(--nd-bg-surface-2, #F0F4F5);
    border-top: 1px solid var(--nd-border, #E2E8EB);
    display: flex;
    flex-direction: column;
    gap: var(--nd-sp-2, 8px);
    z-index: 5;
}

/* nd-home-widget launcher — assegura position fixed previsível + z baixo
   pra que dropdowns DSV2 (.nd-user-menu-panel z=200) fiquem por cima. */
.nd-home-widget__launcher {
    z-index: 100 !important;
}

/* D) /ao-vivo/ topbar — não sobrepor com .nd-user-menu-floating */
.nd-aovivo-topbar {
    padding-right: 80px !important;  /* espaço pro avatar floating direito */
    position: relative;
}
@media (max-width: 600px) {
    .nd-aovivo-topbar {
        padding-right: 64px !important;
    }
    .nd-aovivo-topbar-nav {
        gap: var(--nd-sp-2, 8px);
        flex-wrap: wrap;
    }
    .nd-aovivo-topbar-nav a {
        font-size: var(--nd-fs-xs, 0.75rem);
        padding: 4px 8px;
    }
}
/* Avatar floating em /ao-vivo/ herda mesma posição mas alinha com a topbar */
body.page-template-page-ao-vivo .nd-user-menu-floating,
.nd-aovivo-shell .nd-user-menu-floating {
    top: 8px;
    right: 16px;
}
/* Em telas pequenas, garante que o topbar tenha altura suficiente pra conter
   o avatar floating (44px touch target + 8px top + folga). Caso contrário, o
   avatar transborda a borda inferior do topbar no Safari mobile. */
@media (max-width: 720px) {
    .nd-aovivo-topbar {
        min-height: 60px;
    }
}

/* ============================================================================
   DSV2 Fase 6 — Single curso landing (schema novo via EAD_Cursos\Schema)
   ============================================================================ */

.nd-curso-hero {
    padding-top: var(--nd-sp-7, 48px) !important;
    padding-bottom: var(--nd-sp-7, 48px) !important;
}
.nd-curso-title {
    font-size: var(--nd-fs-xl, 1.5rem);
    font-weight: 800;
    color: var(--nd-text, #0E1B22);
    margin: 0 0 var(--nd-sp-3, 12px);
    line-height: 1.15;
}
.nd-curso-hook {
    font-size: var(--nd-fs-lg, 1.125rem);
    font-weight: 500;
    color: var(--nd-text, #0E1B22);
    margin: 0 0 var(--nd-sp-3, 12px);
    line-height: 1.4;
}
.nd-curso-subtitulo {
    font-size: var(--nd-fs-base, 1rem);
    color: var(--nd-text-muted, #56707A);
    margin: 0 0 var(--nd-sp-5, 24px);
    line-height: 1.55;
}
.nd-curso-preco-row {
    display: inline-flex;
    align-items: baseline;
    gap: var(--nd-sp-2, 8px);
    background: var(--nd-brand-soft, color-mix(in srgb, var(--nd-brand, #1FBA7A) 10%, transparent));
    border: 1px solid var(--nd-brand-border, color-mix(in srgb, var(--nd-brand, #1FBA7A) 28%, transparent));
    padding: var(--nd-sp-2, 8px) var(--nd-sp-4, 16px);
    border-radius: var(--nd-radius-pill, 999px);
}
.nd-curso-preco {
    font-size: var(--nd-fs-lg, 1.125rem);
    font-weight: 700;
    color: var(--nd-brand, #1FBA7A);
}
.nd-curso-preco-row small {
    color: var(--nd-text-muted, #56707A);
    font-size: var(--nd-fs-xs, 0.75rem);
}
.nd-curso-thumb {
    width: 100%;
    border-radius: var(--nd-radius-lg, 16px);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    box-shadow: var(--nd-shadow-md, 0 6px 16px rgba(0,0,0,0.08));
}

.nd-curso-section-title {
    font-size: var(--nd-fs-lg, 1.125rem);
    font-weight: 700;
    color: var(--nd-text, #0E1B22);
    margin: 0 0 var(--nd-sp-5, 24px);
    text-align: center;
}
.nd-curso-section-title span {
    color: var(--nd-brand, #1FBA7A);
}

.nd-curso-outcome,
.nd-curso-pilar {
    background: var(--nd-bg-surface, #FFFFFF);
    border: 1px solid var(--nd-border, #E2E8EB);
    border-radius: var(--nd-radius, 12px);
    padding: var(--nd-sp-5, 24px);
    height: 100%;
    transition: transform var(--nd-dur-fast, 150ms) ease, box-shadow var(--nd-dur-fast, 150ms) ease;
}
.nd-curso-outcome:hover,
.nd-curso-pilar:hover {
    transform: translateY(-2px);
    box-shadow: var(--nd-shadow-md, 0 6px 16px rgba(0,0,0,0.08));
}
.nd-curso-outcome-num,
.nd-curso-pilar-num {
    display: inline-block;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--nd-brand, #1FBA7A);
    background: var(--nd-brand-soft, color-mix(in srgb, var(--nd-brand, #1FBA7A) 10%, transparent));
    padding: 2px 8px;
    border-radius: var(--nd-radius-pill, 999px);
    letter-spacing: 0.08em;
    margin-bottom: var(--nd-sp-3, 12px);
}
.nd-curso-outcome-titulo,
.nd-curso-pilar-titulo {
    font-size: var(--nd-fs-base, 1rem);
    font-weight: 700;
    color: var(--nd-text, #0E1B22);
    margin: 0 0 var(--nd-sp-2, 8px);
    line-height: 1.35;
}
.nd-curso-outcome-desc,
.nd-curso-pilar-desc {
    font-size: var(--nd-fs-sm, 0.9rem);
    color: var(--nd-text-muted, #56707A);
    line-height: 1.55;
    margin: 0;
}

.nd-curso-bloco {
    background: var(--nd-bg-surface, #FFFFFF);
    border: 1px solid var(--nd-border, #E2E8EB);
    border-radius: var(--nd-radius, 12px);
    padding: var(--nd-sp-5, 24px);
    height: 100%;
}
.nd-curso-bloco h3 {
    font-size: var(--nd-fs-base, 1rem);
    font-weight: 700;
    color: var(--nd-text, #0E1B22);
    margin: 0 0 var(--nd-sp-3, 12px);
}
.nd-curso-bloco p {
    color: var(--nd-text-muted, #56707A);
    line-height: 1.6;
    margin: 0;
    white-space: pre-line;
}
.nd-curso-bloco--problema { border-left: 3px solid var(--nd-warn, #F0B429); }
.nd-curso-bloco--solucao  { border-left: 3px solid var(--nd-brand, #1FBA7A); }

.nd-curso-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nd-sp-2, 8px);
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}
.nd-curso-chip {
    background: var(--nd-bg-surface-2, #F0F4F5);
    border: 1px solid var(--nd-border, #E2E8EB);
    color: var(--nd-text, #0E1B22);
    padding: var(--nd-sp-2, 8px) var(--nd-sp-4, 16px);
    border-radius: var(--nd-radius-pill, 999px);
    font-size: var(--nd-fs-sm, 0.9rem);
    font-weight: 500;
    transition: all var(--nd-dur-fast, 150ms) ease;
}
.nd-curso-chip:hover {
    border-color: var(--nd-brand, #1FBA7A);
    color: var(--nd-brand, #1FBA7A);
}

@media (max-width: 600px) {
    .nd-curso-hero {
        padding-top: var(--nd-sp-5, 24px) !important;
        padding-bottom: var(--nd-sp-5, 24px) !important;
    }
    .nd-curso-title { font-size: var(--nd-fs-lg, 1.125rem); }
    .nd-curso-section-title { text-align: left; }
    .nd-curso-outcome,
    .nd-curso-pilar,
    .nd-curso-bloco {
        padding: var(--nd-sp-4, 16px);
    }
    .nd-curso-chips { justify-content: flex-start; }
}

/* Continuar-assistindo region — visual */
.neurodor-region--continuar-assistindo .nd-card--continuar {
    text-decoration: none;
    color: inherit;
}
.neurodor-region--continuar-assistindo .nd-card--continuar:hover {
    transform: translateY(-2px);
}
.neurodor-region--continuar-assistindo .nd-card-thumb .nd-tag {
    background: var(--nd-bg-page, #F4F7F8);
    color: var(--nd-brand, #1FBA7A);
    border: 1px solid var(--nd-brand-border, color-mix(in srgb, var(--nd-brand, #1FBA7A) 28%, transparent));
}

/* ============================================================================
   DSV2 Fase 3 — Públicas (body.nd-public)
   ============================================================================ */

/* Navbar pública (header-site.php) — bg neutro + brand pros links primários */
.nd-public .navbar.navbar-light.bg-white {
    background: var(--nd-bg-surface, #FFFFFF) !important;
    border-bottom: 1px solid var(--nd-border, #E2E8EB);
    box-shadow: var(--nd-shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
}
/* B.F5.17 — Specificity match com Bootstrap (.navbar-light .navbar-nav .nav-link = 0,3,1).
   Igualar specificity + estar DEPOIS no source order → vence sem !important
   (que vazava para outros <a> herdando link-color). */
body.nd-public .navbar.navbar-light .navbar-nav .nav-link {
    color: var(--nd-text, #0E1B22);
    transition: color var(--nd-dur-fast, 150ms) ease;
}
body.nd-public .navbar.navbar-light .navbar-nav .nav-link:hover,
body.nd-public .navbar.navbar-light .navbar-nav .nav-link:focus {
    color: var(--nd-brand, #1FBA7A);
}
/* Toggler (botão hamburger mobile) reage à paleta — escopado em .nd-public */
body.nd-public .navbar.navbar-light .navbar-toggler {
    border-color: var(--nd-border, #E2E8EB);
    color: var(--nd-text, #0E1B22);
}
body.nd-public .navbar.navbar-light .navbar-toggler-icon {
    /* Ícone hamburger SVG inline do BS5 herda cor via currentColor */
    filter: none;
}
.nd-public .navbar .btn.verde {
    background: var(--nd-brand, #1FBA7A);
    color: var(--nd-on-brand, #FFFFFF);
    border: 1px solid transparent;
    border-radius: var(--nd-radius-sm, 8px);
    padding: 8px 16px;
    font-weight: 600;
    min-height: var(--nd-touch-min, 44px);
    display: inline-flex;
    align-items: center;
}
.nd-public .navbar .btn.verde:hover {
    background: var(--nd-brand-hover, color-mix(in srgb, var(--nd-brand, #1FBA7A) 85%, #000));
    color: var(--nd-on-brand, #FFFFFF);
}
.nd-public .navbar .btn.azul {
    background: transparent;
    color: var(--nd-text, #0E1B22);
    border: 1px solid var(--nd-border-strong, #C9D3D7);
    border-radius: var(--nd-radius-sm, 8px);
    padding: 8px 16px;
    font-weight: 600;
    min-height: var(--nd-touch-min, 44px);
    display: inline-flex;
    align-items: center;
}
.nd-public .navbar .btn.azul:hover {
    border-color: var(--nd-brand, #1FBA7A);
    color: var(--nd-brand, #1FBA7A);
}

/* /planos/ legado — .btn-success Metronic verde escuro → brand DSV2 */
.nd-public .btn.btn-success {
    background: var(--nd-brand, #1FBA7A) !important;
    color: var(--nd-on-brand, #FFFFFF) !important;
    border: 1px solid transparent;
    font-weight: 600;
}
.nd-public .btn.btn-success:hover {
    background: var(--nd-brand-hover, color-mix(in srgb, var(--nd-brand, #1FBA7A) 85%, #000)) !important;
}
.nd-public .border-gray-300,
.nd-public .border-dashed.border-gray-300 {
    border-color: var(--nd-border, #E2E8EB) !important;
}
.nd-public .border-hover-success:hover {
    border-color: var(--nd-brand, #1FBA7A) !important;
}

/* Card de plano (page-planos.php legado) — usa .public-checkout-card já */
.nd-public .public-checkout-card {
    background: var(--nd-bg-surface, #FFFFFF);
    border: 1px solid var(--nd-border, #E2E8EB);
    border-radius: var(--nd-radius, 12px);
    box-shadow: var(--nd-shadow-md, 0 6px 16px rgba(0,0,0,0.08));
}

/* /cursos/ legado .course-card-v2 já ganha line-clamp via alias acima.
   Pequeno polish em /cursos/ pra alinhar fundo com tema. */
.nd-public .courses-page-shell { background: var(--nd-bg-page, #F4F7F8); }

/* Form errors no checkout legado — corrigir cor invisível #fff em fundo branco */
.nd-public .woocommerce form .form-row.woocommerce-invalid label {
    color: var(--nd-danger, #E5484D) !important;
}

/* ─── Responsivo (base) ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .nd-user-menu-panel {
        right: var(--nd-sp-2, 8px);
        left: var(--nd-sp-2, 8px);
        min-width: auto;
    }
    .nd-card-body { padding: var(--nd-sp-3, 12px); }
}

/* ─── Responsividade fina — gaps identificados na auditoria Fase 5.1 ──── */

/* nd-kpi em mobile — stack vertical quando texto não couber */
@media (max-width: 480px) {
    .nd-kpi {
        flex-direction: row;
        gap: var(--nd-sp-2, 8px);
        padding: var(--nd-sp-3, 12px);
    }
    .nd-kpi-num { font-size: var(--nd-fs-lg, 1.125rem); }
    .nd-kpi-ic  { width: 32px; height: 32px; }
    .nd-kpi-ic svg { width: 16px; height: 16px; }
}

/* nd-toast em mobile — full-width 320 safe */
@media (max-width: 480px) {
    #nd-toast-root {
        top: var(--nd-sp-2, 8px);
        right: var(--nd-sp-2, 8px);
        left: var(--nd-sp-2, 8px);
        max-width: none;
    }
    .nd-toast {
        font-size: var(--nd-fs-xs, 0.75rem);
        padding: var(--nd-sp-2, 8px) var(--nd-sp-3, 12px);
    }
}

/* nd-card grid pública (em /cursos/) — 1-col em < 480px sem deformar */
@media (max-width: 480px) {
    .nd-public .courses-page-grid > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* nd-tag em mobile — touch-friendly */
@media (max-width: 480px) {
    .nd-tag {
        font-size: 9px;
        padding: 2px 6px;
        letter-spacing: 0.06em;
    }
}

/* .nd-public navbar mobile — buttons stack vertical no toggler */
@media (max-width: 991px) {
    .nd-public .navbar .navbar-collapse {
        padding-top: var(--nd-sp-3, 12px);
    }
    .nd-public .navbar .navbar-nav {
        gap: var(--nd-sp-2, 8px);
        align-items: stretch;
    }
    .nd-public .navbar .btn.verde,
    .nd-public .navbar .btn.azul {
        width: 100%;
        justify-content: center;
    }
}

/* nd-about — colapsado mais curto em mobile pra economizar viewport */
@media (max-width: 600px) {
    .nd-about {
        padding: var(--nd-sp-4, 16px);
    }
    .nd-about[data-state="collapsed"] .nd-about-body {
        max-height: 6em;
    }
}

/* nd-card-skeleton — alturas menores em mobile */
@media (max-width: 480px) {
    .nd-card-skeleton {
        min-height: 220px;
    }
}

/* nd-avatar — touch min 44 quando interativo */
@media (max-width: 600px) {
    button.nd-avatar.nd-avatar-sm,
    a.nd-avatar.nd-avatar-sm {
        min-width: var(--nd-touch-min, 44px);
        min-height: var(--nd-touch-min, 44px);
    }
}

/* /ao-vivo/ topbar nav links — quebra mais legível em mobile pequeno */
@media (max-width: 480px) {
    .nd-aovivo-topbar-nav {
        width: 100%;
        justify-content: space-between;
    }
    .nd-aovivo-topbar-nav a {
        flex: 1;
        text-align: center;
        font-size: 11px;
        padding: 6px 4px;
        white-space: nowrap;
    }
    .nd-aovivo-topbar {
        flex-wrap: wrap;
        padding-right: var(--nd-sp-3, 12px) !important; /* avatar floating ajusta sozinho */
    }
    .nd-aovivo-topbar-brand img {
        height: 24px;
    }
    .nd-aovivo-topbar-brand span {
        font-size: var(--nd-fs-xs, 0.75rem);
    }
}

/* Continuar-assistindo grid — adapta 3 → 2 → 1 conforme viewport.
   2026-05-16: minmax(0, 1fr) substitui 1fr cru pra permitir shrink em
   mobile quando título/imagem tentam crescer além do container. */
@media (max-width: 900px) {
    .neurodor-region--continuar-assistindo .neurodor-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 480px) {
    .neurodor-region--continuar-assistindo .neurodor-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================================
   .nd-page-toolbar — substitui #kt_app_toolbar (Metronic legado)
   Padding ~50% do toolbar antigo. Layout: breadcrumb+título à esquerda,
   actions à direita. Cores via tokens.
   Ativado quando body.nd-page-toolbar-active (JS clona heading+breadcrumb+actions).
============================================================================ */
body.nd-page-toolbar-active #kt_app_toolbar,
body.dsv2-logged-v2 #kt_app_toolbar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
/* DSV2 2026-05-13 — toolbar absorve estilo do hero (panel.css:85-226).
   Gradient brand + texto on-brand + breadcrumb claro. Reage à paleta do aluno
   via cascade de var(--nd-brand). Sem mudar markup; só CSS. */
body.nd-page-toolbar-active .interface-ead .nd-page-toolbar,
.nd-page-toolbar {
    position: relative;
    display: block;
    width: auto;
    background: linear-gradient(135deg, var(--nd-brand, #1FBA7A), var(--interface-ea-secondary, color-mix(in srgb, var(--nd-brand, #1FBA7A) 80%, #000))) !important;
    color: var(--nd-on-brand, #ffffff) !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: var(--nd-radius-lg, 14px);
    padding: var(--nd-sp-3, 14px) var(--nd-sp-5, 22px) !important;
    /* Margem lateral pequena, sem max-width — deixa o pai (container) controlar a largura */
    margin: var(--nd-sp-3, 12px) var(--nd-sp-3, 12px) var(--nd-sp-4, 16px) !important;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
    box-sizing: border-box;
}
/* Glow idêntico ao hero (panel.css:117-124) */
.nd-page-toolbar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 70% at 100% 0%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
}
.nd-page-toolbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nd-sp-4, 16px);
    margin: 0 auto;
    padding: 0;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.nd-page-toolbar__title-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.nd-page-toolbar__title {
    margin: 0 !important;
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--nd-on-brand, #ffffff) !important;
    animation: none !important;
    font-family: inherit !important;
}
.nd-page-toolbar__breadcrumb {
    font-size: var(--nd-fs-xs, 0.75rem);
    color: var(--nd-on-brand, rgba(255,255,255,0.88));
    opacity: 0.88;
}
.nd-page-toolbar__breadcrumb,
.nd-page-toolbar__breadcrumb .breadcrumb,
.nd-page-toolbar__breadcrumb .breadcrumb a,
.nd-page-toolbar__breadcrumb .breadcrumb-item,
.nd-page-toolbar__breadcrumb .breadcrumb-item.text-muted,
.nd-page-toolbar__breadcrumb .breadcrumb span {
    color: var(--nd-on-brand, rgba(255,255,255,0.88)) !important;
    background: transparent !important;
}
.nd-page-toolbar__breadcrumb .breadcrumb a:hover {
    opacity: 1;
    text-decoration: underline;
    color: var(--nd-on-brand, #ffffff) !important;
}
/* DSV2 2026-05-20 — Âncoras <a> da breadcrumb da toolbar SEMPRE em branco.
   Fix paleta "noturno": --nd-on-brand é #042116 (quase-preto) sobre o gradient
   brand #25D08A → degrade escuro, deixando o link ilegível. Branco vence em
   todas as 4 paletas (padrão/azul/sépia já eram brancas; noturno passa a ser). */
.nd-page-toolbar__breadcrumb .breadcrumb a,
.nd-page-toolbar__breadcrumb .breadcrumb a.text-muted,
.nd-page-toolbar__breadcrumb .breadcrumb a.text-hover-success {
    color: #ffffff !important;
}
.nd-page-toolbar__breadcrumb .breadcrumb .bullet {
    background: currentColor !important;
    opacity: 0.55;
}
.nd-page-toolbar__breadcrumb .breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* ──────────────────────────────────────────────────────────────────────
   Breadcrumb global (helper gerar_breadcrumb) — reage às paletas DSV2.
   Classes .text-muted/.text-hover-success do Metronic legado não consomem
   tokens --nd-*; em paleta azul/sépia/noturno o hover continua verde fixo.
   Dentro de .nd-page-toolbar__breadcrumb o override acima (com !important)
   vence e mantém texto branco sobre fundo brand.
   ────────────────────────────────────────────────────────────────────── */
.breadcrumb a.text-muted,
.breadcrumb a.text-hover-success,
.breadcrumb-item a {
    color: var(--nd-text-muted, #56707A);
    transition: color .15s ease;
    text-decoration: none;
}
.breadcrumb a.text-hover-success:hover,
.breadcrumb a.text-muted:hover,
.breadcrumb-item a:hover {
    color: var(--nd-brand, #1FBA7A);
}
.breadcrumb .breadcrumb-item.text-muted:last-child {
    color: var(--nd-text, #1B2A33);
    font-weight: 600;
}

/* Botões on-hero: branco sólido com texto brand (panel.css:200-211) */
.nd-page-toolbar__actions .btn,
.nd-page-toolbar__actions .btn-success {
    background: #ffffff !important;
    color: var(--nd-brand, #1FBA7A) !important;
    border: 1px solid rgba(255,255,255,0.7) !important;
    height: auto !important;
    border-radius: var(--nd-radius, 8px) !important;
    padding: 6px 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important;
}
.nd-page-toolbar__actions .btn:hover,
.nd-page-toolbar__actions .btn-success:hover {
    background: #ffffff !important;
    filter: brightness(0.96);
}
/* Variante SLIM (páginas com player de vídeo). Aplica via body.nd-player-page
   OU modifier .nd-page-toolbar--slim manual. */
body.nd-player-page .nd-page-toolbar,
.nd-page-toolbar.nd-page-toolbar--slim {
    padding: var(--nd-sp-2, 8px) var(--nd-sp-4, 16px) !important;
    margin: var(--nd-sp-2, 8px) auto;
    border-radius: var(--nd-radius, 10px);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}
body.nd-player-page .nd-page-toolbar__inner,
.nd-page-toolbar--slim .nd-page-toolbar__inner {
    padding: 0;
    flex-wrap: nowrap;
    gap: var(--nd-sp-3, 12px);
}
body.nd-player-page .nd-page-toolbar__title,
.nd-page-toolbar--slim .nd-page-toolbar__title {
    font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem) !important;
}
body.nd-player-page .nd-page-toolbar__breadcrumb,
.nd-page-toolbar--slim .nd-page-toolbar__breadcrumb {
    display: none;
}
@media (min-width: 900px) {
    body.nd-player-page .nd-page-toolbar__breadcrumb,
    .nd-page-toolbar--slim .nd-page-toolbar__breadcrumb {
        display: flex;
    }
}
body.nd-player-page .nd-page-toolbar::after,
.nd-page-toolbar--slim::after {
    background: radial-gradient(120% 50% at 100% 0%, rgba(255,255,255,0.12), transparent 60%);
}
/* Mobile <600px: single row compacto (título + breadcrumb pequeno empilhados à
   esquerda + botão à direita), consome o menor espaço vertical possível. */
@media (max-width: 600px) {
    .nd-page-toolbar {
        padding: var(--nd-sp-2, 10px) var(--nd-sp-4, 14px) !important;
        margin: var(--nd-sp-2, 8px) var(--nd-sp-2, 8px) var(--nd-sp-3, 12px) !important;
        border-radius: var(--nd-radius, 12px);
    }
    .nd-page-toolbar__inner {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: var(--nd-sp-2, 10px);
    }
    .nd-page-toolbar__title-block {
        flex: 1 1 auto;
        min-width: 0;
    }
    .nd-page-toolbar__title {
        font-size: 0.95rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.15 !important;
    }
    .nd-page-toolbar__breadcrumb {
        font-size: 0.65rem;
        margin-top: 1px;
    }
    .nd-page-toolbar__breadcrumb .breadcrumb {
        flex-wrap: nowrap;
        overflow: hidden;
        gap: 4px;
    }
    .nd-page-toolbar__breadcrumb .breadcrumb-item {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .nd-page-toolbar__actions {
        flex-shrink: 0;
        width: auto;
        margin: 0;
    }
    .nd-page-toolbar__actions .btn,
    .nd-page-toolbar__actions .btn-success {
        padding: 4px 10px !important;
        font-size: 0.75rem !important;
    }
    /* Slim em mobile fica ainda mais compacto e mantém breadcrumb visível também */
    body.nd-player-page .nd-page-toolbar,
    .nd-page-toolbar--slim {
        padding: var(--nd-sp-1, 6px) var(--nd-sp-3, 12px) !important;
        margin: var(--nd-sp-2, 8px);
    }
    body.nd-player-page .nd-page-toolbar__title,
    .nd-page-toolbar--slim .nd-page-toolbar__title {
        font-size: 0.85rem !important;
    }
    /* Em mobile player, breadcrumb fica visível mas mini — antes estava
       display:none cortando o aluno do contexto. */
    body.nd-player-page .nd-page-toolbar__breadcrumb,
    .nd-page-toolbar--slim .nd-page-toolbar__breadcrumb {
        display: block;
        font-size: 0.6rem;
        margin-top: 0;
    }
}
/* Actions container (não-on-hero styling) — apenas layout */
.nd-page-toolbar__actions {
    display: flex;
    align-items: center;
    gap: var(--nd-sp-2, 8px);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.nd-page-toolbar__actions .btn,
.nd-page-toolbar__actions .nd-btn {
    font-size: var(--nd-fs-sm, 0.875rem);
}

/* ============================================================================
   .nd-shortcuts-dock — DESKTOP: trigger pode estar in-sidebar (esquerda da
   tela, dentro de #kt_app_sidebar) OU standalone fixed (left:20, bottom:20)
   quando JS não consegue ancorar. Abre em LEQUE RADIAL à esquerda do trigger:
   item central é o mais afastado horizontalmente (pico do arco); itens das
   pontas retornam simetricamente. Geometria é calculada em JS por
   computeDockPositions(N) — NÃO replicar offsets em CSS. MOBILE (<600px):
   trigger oculto, items em barra horizontal centralizada inferior.
   Render server-side via class-dsv2-avatar.php (wp_footer).
============================================================================ */
.nd-shortcuts-dock {
    position: fixed !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    left: 20px;
    right: auto;
    z-index: 10000;
    visibility: visible !important;
    width: 48px;
    height: 48px;
    pointer-events: none;
}
/* Trigger button — sempre visível em desktop, pill brand de 48px com símbolo "?" */
.nd-shortcuts-dock__trigger {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--nd-brand, #1FBA7A);
    color: var(--nd-on-brand, #ffffff);
    border: 1px solid var(--nd-brand-border, color-mix(in srgb, var(--nd-brand, #1FBA7A) 28%, transparent));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px var(--nd-brand-soft, rgba(31,186,122,0.35));
    transition: transform var(--nd-dur-fast, 150ms) ease,
                box-shadow var(--nd-dur-fast, 150ms) ease,
                background var(--nd-dur-fast, 150ms) ease;
    pointer-events: auto;
    padding: 0;
}
.nd-shortcuts-dock__trigger:hover,
.nd-shortcuts-dock__trigger:focus-visible {
    transform: scale(1.06);
    box-shadow: 0 10px 22px var(--nd-brand-soft, rgba(31,186,122,0.50));
    outline: none;
}
.nd-shortcuts-dock[data-state="open"] .nd-shortcuts-dock__trigger {
    background: color-mix(in srgb, var(--nd-brand, #1FBA7A) 85%, #000);
    transform: rotate(45deg);   /* "?" gira pra dar feedback de aberto */
}
.nd-shortcuts-dock__trigger-icon {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: currentColor;
    font-family: var(--nd-ff, system-ui, -apple-system, sans-serif);
}
/* Itens: position:fixed pra escapar do overflow:hidden da .app-sidebar-menu
   (a sidebar Metronic clipa qualquer descendente que extrapole seu container).
   Posição inicial JS calcula via trigger.getBoundingClientRect e seta inline
   styles top/left. Estado fechado: hidden. */
.nd-shortcuts-dock__item {
    position: fixed;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    height: 40px;
    padding: 0 16px 0 10px;
    border-radius: 999px;
    background: var(--nd-bg-surface, #ffffff);
    color: var(--nd-text, #0f172a) !important;
    text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.7);
    pointer-events: none;
    z-index: 10002; /* acima da sidebar (105) + do dock container (10000) */
    transition: opacity var(--nd-dur-fast, 150ms) ease,
                transform var(--nd-dur-base, 240ms) cubic-bezier(0.34, 1.4, 0.64, 1),
                background var(--nd-dur-fast, 150ms) ease,
                color var(--nd-dur-fast, 150ms) ease;
}
.nd-shortcuts-dock__item:hover,
.nd-shortcuts-dock__item:focus-visible {
    background: var(--nd-brand, #1FBA7A);
    color: var(--nd-on-brand, #ffffff) !important;
    outline: none;
    text-decoration: none !important;
}
.nd-shortcuts-dock__icon {
    width: 18px;
    height: 18px;
    color: currentColor;
    stroke: currentColor;
    flex-shrink: 0;
}
.nd-shortcuts-dock__label {
    position: static;
    transform: none;
    background: transparent;
    color: inherit;
    font-size: var(--nd-fs-sm, 13px);
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}
/* Estado ABERTO: visibility via data-state. JS posiciona top/left inline
   via getBoundingClientRect do trigger (CSS só controla opacity + scale). */
.nd-shortcuts-dock[data-state="open"] .nd-shortcuts-dock__item {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}
/* Stagger — items emergem do trigger pra fora, do último ao primeiro DOM.
   Funciona para qualquer N (delays incrementais de 50ms). */
.nd-shortcuts-dock[data-state="open"] .nd-shortcuts-dock__item:nth-child(6) { transition-delay: 0ms; }
.nd-shortcuts-dock[data-state="open"] .nd-shortcuts-dock__item:nth-child(5) { transition-delay: 50ms; }
.nd-shortcuts-dock[data-state="open"] .nd-shortcuts-dock__item:nth-child(4) { transition-delay: 100ms; }
.nd-shortcuts-dock[data-state="open"] .nd-shortcuts-dock__item:nth-child(3) { transition-delay: 150ms; }
.nd-shortcuts-dock[data-state="open"] .nd-shortcuts-dock__item:nth-child(2) { transition-delay: 200ms; }
/* Variante IN-SIDEBAR — quando JS move o dock pra dentro de #kt_app_sidebar
   (desktop ≥992px). Container vira position:relative pra fluir como item
   da sidebar; trigger e itens mantêm comportamento. */
.nd-shortcuts-dock--in-sidebar {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    margin: 8px 16px 20px;  /* padding left + bottom da sidebar */
    z-index: 5; /* acima dos menu-items, abaixo do ao-vivo slot (9999) */
}
.nd-shortcuts-dock--in-sidebar .nd-shortcuts-dock__trigger {
    box-shadow: 0 4px 12px var(--nd-brand-soft, rgba(31,186,122,0.25));
}
.nd-shortcuts-dock--in-sidebar .nd-shortcuts-dock__item {
    z-index: 10001; /* itens escapam do overflow:hidden da sidebar via z-index alto */
}
/* ╔════════════════════════════════════════════════════════════════════════╗
   ║ ⚠️  MOBILE DOCK — NÃO REMOVER / NÃO ALTERAR SEM PROTEGER MOBILE ⚠️       ║
   ╠════════════════════════════════════════════════════════════════════════╣
   ║ Em mobile (<600px) o dock vira BARRA HORIZONTAL CENTRALIZADA inferior  ║
   ║ com TODOS os items SEMPRE VISÍVEIS. Trigger oculto.                    ║
   ║                                                                          ║
   ║ Esse bloco RESTAURA tudo que o CSS desktop sobrescreve:                ║
   ║   - position:fixed (não absolute) com bottom-center alignment           ║
   ║   - items viram position:static (não fixed)                            ║
   ║   - transform/opacity reset (todos visíveis sem precisar abrir)        ║
   ║   - JS resize handler placeShortcutsDock() também desfaz a movimentação ║
   ║     pra dentro da sidebar quando viewport desce <992px.                ║
   ║                                                                          ║
   ║ Quebrou em algumas iterações passadas — SEMPRE testar mobile depois de  ║
   ║ mexer no bloco .nd-shortcuts-dock acima. Memory:                       ║
   ║   project_dock_mobile_guard_20260513.md                                  ║
   ╚════════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 600px) {
    .nd-shortcuts-dock {
        position: fixed !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: auto;
        height: auto;
        padding: 5px;
        background: var(--nd-bg-surface, #ffffff);
        border: 1px solid var(--nd-border, #e2e8f0);
        border-radius: var(--nd-radius-pill, 999px);
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
        display: flex !important;
        flex-direction: row;
        gap: 8px;
        align-items: center;
        justify-content: space-around;
        max-width: calc(100vw - 24px);
        pointer-events: auto;
    }
    .nd-shortcuts-dock__trigger {
        display: none;          /* mobile não usa trigger */
    }
    .nd-shortcuts-dock__item {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transition-delay: 0ms !important;
        width: 38px;
        height: 38px;
        min-width: 38px;
        padding: 0;
        background: var(--nd-bg-surface-2, #f1f5f9);
        box-shadow: none;
        justify-content: center;
    }
    .nd-shortcuts-dock__label {
        display: none;          /* labels ocultos em mobile */
    }
}
/* Esconde residual .nd-sidebar-atalhos de versões anteriores se o navegador
   tiver cache do JS antigo. */
.nd-sidebar-atalhos { display: none !important; }

/* ============================================================================
   Forms Metronic legacy em página logada — tokenizar inputs/alerts
   Cobre /editar-perfil/, /alterar-senha/, /meu-perfil/, formulários WC etc.
============================================================================ */
.nd-logged-area .form-control-solid {
    background: var(--nd-bg-surface-2, #f1f5f9) !important;
    border: 1px solid var(--nd-border, #e2e8f0) !important;
    color: var(--nd-text, #0f172a) !important;
    transition: border-color var(--nd-dur-fast, 150ms), background var(--nd-dur-fast, 150ms);
}
.nd-logged-area .form-control-solid:focus,
.nd-logged-area .form-control-solid:active {
    background: var(--nd-bg-surface, #ffffff) !important;
    border-color: var(--nd-brand, #1FBA7A) !important;
    box-shadow: 0 0 0 3px var(--nd-brand-soft, rgba(31,186,122,0.18)) !important;
    color: var(--nd-text, #0f172a) !important;
}
.nd-logged-area .form-control-solid::placeholder { color: var(--nd-text-soft, #94a3b8); }
.nd-logged-area .col-form-label { color: var(--nd-text, #0f172a); }
.nd-logged-area .alert-danger {
    background: var(--nd-danger-soft, rgba(220,38,38,0.08)) !important;
    border: 1px solid var(--nd-danger-border, rgba(220,38,38,0.3)) !important;
    color: var(--nd-danger, #b91c1c) !important;
}
.nd-logged-area .alert-danger h4,
.nd-logged-area .alert-danger .text-white { color: var(--nd-danger, #b91c1c) !important; }
.nd-logged-area .alert-success {
    background: var(--nd-success-soft, rgba(34,197,94,0.08)) !important;
    border: 1px solid var(--nd-success-border, rgba(34,197,94,0.3)) !important;
    color: var(--nd-success, #16a34a) !important;
}
.nd-logged-area #kt_profile_details_view .card-header,
.nd-logged-area .card .card-header.cursor-pointer {
    background: var(--nd-bg-surface, #fff);
    border-bottom: 1px solid var(--nd-border, #e2e8f0);
}
.nd-logged-area #kt_profile_details_view .card-title h3,
.nd-logged-area .card .card-title h3 {
    color: var(--nd-text, #0f172a);
    font-weight: 700;
}

/* ============================================================================
   DSV2 Checkout V2 — componentes 2026-05-13
   ============================================================================
   Adicionados para o checkout NOVO inline KYC:
   - .nd-payment-tile: card de gateway (radio escondido + label visual)
   - .nd-summary-card: resumo do pedido (sticky desktop, collapse mobile)
   - .nd-status-card: estado pago/aguardando/erro/processando (thankyou)
*/

/* ─── Payment Tile ───────────────────────────────────────────────────────── */
.nd-payment-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--nd-sp-3, 12px);
}
.nd-payment-tile {
    display: flex;
    align-items: center;
    gap: var(--nd-sp-3, 12px);
    padding: var(--nd-sp-4, 16px);
    border: 2px solid var(--nd-border, #e2e8eb);
    border-radius: var(--nd-radius, 12px);
    background: var(--nd-bg-surface, #fff);
    cursor: pointer;
    transition: border-color var(--nd-dur-fast, 150ms), background var(--nd-dur-fast, 150ms), box-shadow var(--nd-dur-fast, 150ms);
    user-select: none;
    position: relative;
}
.nd-payment-tile:hover {
    border-color: var(--nd-brand, #1FBA7A);
}
.nd-payment-tile input[type="radio"] {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
    margin: 0;
}
.nd-payment-tile__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--nd-brand-soft, rgba(31,186,122,0.10));
    color: var(--nd-brand, #1FBA7A);
}
.nd-payment-tile__icon svg { width: 22px; height: 22px; }
.nd-payment-tile__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.nd-payment-tile__label {
    font-weight: 600;
    color: var(--nd-text, #0E1B22);
    font-size: var(--nd-fs-sm, 0.875rem);
    line-height: 1.2;
}
.nd-payment-tile__hint {
    font-size: var(--nd-fs-xs, 0.75rem);
    color: var(--nd-text-soft, #64748b);
    line-height: 1.3;
}
.nd-payment-tile.is-active,
.nd-payment-tile:has(input[type="radio"]:checked) {
    border-color: var(--nd-brand, #1FBA7A);
    background: var(--nd-brand-soft, color-mix(in srgb, var(--nd-brand, #1FBA7A) 7%, transparent));
    box-shadow: 0 0 0 3px var(--nd-brand-glow, rgba(31,186,122,0.15));
}
.nd-payment-tile.is-active .nd-payment-tile__icon {
    background: var(--nd-brand, #1FBA7A);
    color: #fff;
}

/* ─── Summary Card (resumo do pedido) ────────────────────────────────────── */
.nd-summary-card {
    background: var(--nd-bg-surface, #fff);
    border: 1px solid var(--nd-border, #e2e8eb);
    border-radius: var(--nd-radius, 12px);
    padding: var(--nd-sp-4, 16px);
}
.nd-summary-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--nd-sp-3, 12px);
    margin-bottom: var(--nd-sp-3, 12px);
    border-bottom: 1px solid var(--nd-border, #e2e8eb);
}
.nd-summary-card__title {
    margin: 0;
    font-size: var(--nd-fs-md, 1rem);
    font-weight: 700;
    color: var(--nd-text, #0E1B22);
}
.nd-summary-card__items { display: flex; flex-direction: column; gap: var(--nd-sp-2, 8px); }
.nd-summary-card__item {
    display: flex;
    align-items: flex-start;
    gap: var(--nd-sp-3, 12px);
}
.nd-summary-card__thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--nd-radius-sm, 8px);
    object-fit: cover;
    background: var(--nd-bg-surface-2, #f1f5f9);
}
.nd-summary-card__item-body { flex: 1; min-width: 0; }
.nd-summary-card__item-name {
    font-weight: 600;
    color: var(--nd-text, #0E1B22);
    font-size: var(--nd-fs-sm, 0.875rem);
    line-height: 1.3;
    margin: 0;
}
.nd-summary-card__item-meta {
    font-size: var(--nd-fs-xs, 0.75rem);
    color: var(--nd-text-soft, #64748b);
    margin: 2px 0 0;
}
.nd-summary-card__item-price {
    font-weight: 600;
    color: var(--nd-text, #0E1B22);
    font-size: var(--nd-fs-sm, 0.875rem);
    white-space: nowrap;
}
.nd-summary-card__totals {
    margin-top: var(--nd-sp-3, 12px);
    padding-top: var(--nd-sp-3, 12px);
    border-top: 1px solid var(--nd-border, #e2e8eb);
    display: flex;
    flex-direction: column;
    gap: var(--nd-sp-2, 8px);
}
.nd-summary-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--nd-fs-sm, 0.875rem);
    color: var(--nd-text-soft, #64748b);
}
.nd-summary-card__row--total {
    color: var(--nd-text, #0E1B22);
    font-weight: 700;
    font-size: var(--nd-fs-lg, 1.125rem);
    margin-top: var(--nd-sp-2, 8px);
    padding-top: var(--nd-sp-2, 8px);
    border-top: 1px dashed var(--nd-border, #e2e8eb);
}
.nd-summary-card__row--total .nd-summary-card__amount {
    color: var(--nd-brand, #1FBA7A);
}

/* Variante <details> colapsável (mobile) */
details.nd-summary-card { padding: 0; }
details.nd-summary-card > summary {
    list-style: none;
    cursor: pointer;
    padding: var(--nd-sp-3, 12px) var(--nd-sp-4, 16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    color: var(--nd-text, #0E1B22);
}
details.nd-summary-card > summary::-webkit-details-marker { display: none; }
details.nd-summary-card > summary::after {
    content: '▾';
    color: var(--nd-text-soft, #64748b);
    transition: transform var(--nd-dur-fast, 150ms);
}
details.nd-summary-card[open] > summary::after { transform: rotate(180deg); }
details.nd-summary-card > .nd-summary-card__items,
details.nd-summary-card > .nd-summary-card__totals { padding: 0 var(--nd-sp-4, 16px) var(--nd-sp-4, 16px); }

/* ─── Status Card (thankyou) ─────────────────────────────────────────────── */
.nd-status-card {
    background: var(--nd-bg-surface, #fff);
    border: 1px solid var(--nd-border, #e2e8eb);
    border-radius: var(--nd-radius-lg, 16px);
    padding: var(--nd-sp-6, 32px) var(--nd-sp-5, 24px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nd-sp-3, 12px);
}
.nd-status-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--nd-bg-surface-2, #f1f5f9);
}
.nd-status-card__icon svg { width: 36px; height: 36px; }
.nd-status-card__title {
    margin: 0;
    font-size: var(--nd-fs-xl, 1.5rem);
    font-weight: 700;
    color: var(--nd-text, #0E1B22);
}
.nd-status-card__message {
    margin: 0;
    color: var(--nd-text-soft, #475569);
    max-width: 38ch;
    line-height: 1.5;
}
.nd-status-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nd-sp-3, 12px);
    justify-content: center;
    margin-top: var(--nd-sp-3, 12px);
}
/* Variantes de estado */
.nd-status-card--success .nd-status-card__icon { background: var(--nd-success-soft, rgba(31,186,122,0.10)); color: var(--nd-brand, #1FBA7A); }
.nd-status-card--success .nd-status-card__icon svg { color: var(--nd-brand, #1FBA7A); }
.nd-status-card--pending .nd-status-card__icon { background: rgba(245,158,11,0.10); color: #d97706; }
.nd-status-card--pending .nd-status-card__icon svg { color: #d97706; }
.nd-status-card--error .nd-status-card__icon { background: var(--nd-danger-soft, rgba(220,38,38,0.08)); color: var(--nd-danger, #dc2626); }
.nd-status-card--error .nd-status-card__icon svg { color: var(--nd-danger, #dc2626); }

/* RECOVERY-CONSOLIDA (2026-05-19) — variante horizontal compacta para banners
 * inline (topo de /produto/, /finalizar-compra/). Mantém a mesma fonte de
 * design do thankyou — apenas troca o flex-direction. */
.nd-status-card--inline {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: var(--nd-sp-3, 14px) var(--nd-sp-4, 18px);
    gap: var(--nd-sp-3, 14px);
    margin: 0 0 var(--nd-sp-4, 20px);
}
.nd-status-card--inline .nd-status-card__icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}
.nd-status-card--inline .nd-status-card__body { flex: 1; min-width: 0; }
.nd-status-card--inline .nd-status-card__title { font-size: 14px; font-weight: 700; margin: 0 0 2px; line-height: 1.3; }
.nd-status-card--inline .nd-status-card__hint  { font-size: 13px; margin: 0; line-height: 1.4; color: var(--nd-text-soft, #64748b); }
.nd-status-card--inline .nd-btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 600px) {
    .nd-status-card--inline { flex-direction: column; align-items: stretch; text-align: center; }
    .nd-status-card--inline .nd-btn { text-align: center; }
}

.nd-status-card__meta {
    font-size: var(--nd-fs-sm, 0.875rem);
    color: var(--nd-text-soft, #64748b);
    display: flex;
    flex-wrap: wrap;
    gap: var(--nd-sp-3, 12px);
    justify-content: center;
}
.nd-status-card__meta-item { display: inline-flex; align-items: center; gap: 4px; }

/* ============================================================================
   PALETTE PROPAGATION — área logada 2026-05-13 (1.6.0)
   ============================================================================
   Quando aluno troca paleta no menu (Padrão/Noturno/Azul/Sépia), [data-palette]
   no <html> seta tokens (--nd-bg-page, --nd-bg-surface, --nd-text, --nd-brand,
   etc.). Mas Metronic/Bootstrap usam --bs-* hardcoded e não respeitam --nd-*.
   Estes overrides scoped body.nd-logged-area mapeiam classes Metronic comuns
   para tokens --nd-*, fazendo a paleta propagar pro site inteiro logado.
   Usa !important pra vencer especificidade Metronic (justificado).
*/

/* Onda 1 — Fundo de página + cards principais (TODOS os wrappers Metronic) */
body.nd-logged-area,
body.nd-logged-area #kt_app_root,
body.nd-logged-area #kt_app_page,
body.nd-logged-area #kt_app_body {
    background: var(--nd-bg-page, #f4f6f8) !important;
}
body.nd-logged-area .app-content,
body.nd-logged-area #kt_app_content,
body.nd-logged-area #kt_app_content_container,
body.nd-logged-area .app-content-container,
body.nd-logged-area .app-main,
body.nd-logged-area #kt_app_main,
body.nd-logged-area .neurodor-painel-shell {
    background: transparent !important;
}
/* TODOS os tipos de card do painel: nd-card, neurodor-region, neurodor-card,
   neurodor-course-card, nd-gm-card (gamification), neurodor-atalho, .card Metronic */
body.nd-logged-area .card,
body.nd-logged-area .neurodor-region,
body.nd-logged-area .nd-card,
body.nd-logged-area .neurodor-card,
body.nd-logged-area .neurodor-course-card,
body.nd-logged-area .nd-gm-card,
body.nd-logged-area .neurodor-atalho,
body.nd-logged-area .nd-summary-card,
body.nd-logged-area .nd-status-card {
    background: var(--nd-bg-surface, #ffffff) !important;
    color: var(--nd-text, #0f172a) !important;
    border-color: var(--nd-border, #e2e8f0) !important;
}
/* Headings dentro dos cards seguem a cor de texto da paleta */
body.nd-logged-area .neurodor-region h1,
body.nd-logged-area .neurodor-region h2,
body.nd-logged-area .neurodor-region h3,
body.nd-logged-area .neurodor-region-title,
body.nd-logged-area .neurodor-region__title,
body.nd-logged-area .nd-card-title,
body.nd-logged-area .neurodor-card__title,
body.nd-logged-area .neurodor-course-title,
body.nd-logged-area .nd-gm-value,
body.nd-logged-area .nd-gm-label,
body.nd-logged-area .neurodor-region-empty {
    color: var(--nd-text, #0f172a) !important;
}
body.nd-logged-area .nd-card-eyebrow,
body.nd-logged-area .neurodor-card__description,
body.nd-logged-area .neurodor-card__meta,
body.nd-logged-area .nd-gm-mission-meta,
body.nd-logged-area .neurodor-atalho-label,
body.nd-logged-area .neurodor-region__desc {
    color: var(--nd-text-muted, #475569) !important;
}
body.nd-logged-area .card-header,
body.nd-logged-area .card-body,
body.nd-logged-area .card-footer {
    background: transparent !important;
    border-color: var(--nd-border, #e2e8f0) !important;
}

/* Onda 2 — Botões, sidebar menu active state */
body.nd-logged-area .btn-success,
body.nd-logged-area .btn-primary {
    background-color: var(--nd-brand, #1FBA7A) !important;
    border-color: var(--nd-brand, #1FBA7A) !important;
    color: var(--nd-on-brand, #ffffff) !important;
}
body.nd-logged-area .btn-success:hover,
body.nd-logged-area .btn-primary:hover,
body.nd-logged-area .btn-success:focus,
body.nd-logged-area .btn-primary:focus {
    background-color: var(--nd-brand-hover, var(--nd-brand, #1FBA7A)) !important;
    border-color: var(--nd-brand-hover, var(--nd-brand, #1FBA7A)) !important;
    filter: brightness(0.95);
}
body.nd-logged-area .menu-link.active,
body.nd-logged-area .menu-item.show > .menu-link {
    background-color: var(--nd-brand-soft, color-mix(in srgb, var(--nd-brand, #1FBA7A) 14%, transparent)) !important;
    color: var(--nd-brand, #1FBA7A) !important;
}
body.nd-logged-area .menu-link.active .menu-title,
body.nd-logged-area .menu-link.active .menu-icon i {
    color: var(--nd-brand, #1FBA7A) !important;
}
body.nd-logged-area .text-primary,
body.nd-logged-area .text-success {
    color: var(--nd-brand, #1FBA7A) !important;
}

/* Onda 3 — Textos e bordas globais (paleta text/muted) */
body.nd-logged-area .text-gray-900,
body.nd-logged-area .text-gray-800,
body.nd-logged-area .text-dark {
    color: var(--nd-text, #0f172a) !important;
}
body.nd-logged-area .text-gray-500,
body.nd-logged-area .text-gray-600,
body.nd-logged-area .text-gray-700,
body.nd-logged-area .text-muted {
    color: var(--nd-text-muted, #475569) !important;
}
body.nd-logged-area .border,
body.nd-logged-area .border-gray-300,
body.nd-logged-area .border-gray-200,
body.nd-logged-area .border-dashed {
    border-color: var(--nd-border, #e2e8f0) !important;
}
body.nd-logged-area .separator,
body.nd-logged-area .separator-dashed {
    border-color: var(--nd-border, #e2e8f0) !important;
}
/* Sidebar Metronic — fundo respeita paleta também */
body.nd-logged-area #kt_app_sidebar,
body.nd-logged-area .app-sidebar {
    background: var(--nd-bg-surface, #ffffff) !important;
    border-right-color: var(--nd-border, #e2e8f0) !important;
}
body.nd-logged-area #kt_app_header,
body.nd-logged-area .app-header {
    background: var(--nd-bg-surface, #ffffff) !important;
    border-bottom-color: var(--nd-border, #e2e8f0) !important;
}
/* Inputs Metronic — fundo + bordas + texto */
body.nd-logged-area .form-control,
body.nd-logged-area .form-select,
body.nd-logged-area .form-control-solid {
    background: var(--nd-bg-input, var(--nd-bg-surface, #ffffff)) !important;
    border-color: var(--nd-border, #e2e8f0) !important;
    color: var(--nd-text, #0f172a) !important;
}
body.nd-logged-area .form-control:focus,
body.nd-logged-area .form-control-solid:focus {
    border-color: var(--nd-brand, #1FBA7A) !important;
    box-shadow: 0 0 0 3px var(--nd-brand-soft, color-mix(in srgb, var(--nd-brand, #1FBA7A) 18%, transparent)) !important;
}

/* ╔════════════════════════════════════════════════════════════════════════╗
   ║ Safety net horizontal-scroll — mobile logado (<600px)                   ║
   ╠════════════════════════════════════════════════════════════════════════╣
   ║ Adicionado 2026-05-16 após auditoria documentada em                     ║
   ║   wp-content/plugins/neurodor-onboarding/docs/                          ║
   ║   Responsividade_Auditoria_2026-05-16.md                                ║
   ║                                                                          ║
   ║ Rede defensiva: previne overflow lateral causado por widgets/drawers    ║
   ║ que escapam o viewport. Escopo restrito a:                              ║
   ║   - viewport <= 600px                                                   ║
   ║   - body.nd-logged-area (área pública NÃO afetada)                      ║
   ║   - eixo X apenas (scroll vertical preservado)                          ║
   ║                                                                          ║
   ║ Se algum componente futuro DEPENDER de overflow lateral natural,        ║
   ║ usar nd-allow-x-overflow no próprio elemento (não global).              ║
   ╚════════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 600px) {
    body.nd-logged-area {
        overflow-x: hidden;
    }
    body.nd-logged-area .app-page,
    body.nd-logged-area .app-wrapper,
    body.nd-logged-area .app-main,
    body.nd-logged-area .app-container {
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/* ╔════════════════════════════════════════════════════════════════════════╗
   ║ F2-V2 (2026-05-18 — Missão 2 V2.2) — a.nd-btn no thankyou + dialog/CT  ║
   ╠════════════════════════════════════════════════════════════════════════╣
   ║ Antes: <a class="nd-btn nd-btn--primary"> renderizava como link azul   ║
   ║ por especificidade insuficiente em alguns contextos (status card).     ║
   ║ Forçamos display + reset de text-decoration + color inherit.           ║
   ╚════════════════════════════════════════════════════════════════════════╝ */
a.nd-btn,
.nd-status-card a.nd-btn,
.nd-checkout-contract a.nd-btn,
.nd-thankyou a.nd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nd-sp-2, 8px);
    text-decoration: none !important;
    color: inherit;
    min-height: var(--nd-touch-min, 44px);
}
a.nd-btn:hover,
a.nd-btn:focus-visible,
.nd-status-card a.nd-btn:hover,
.nd-status-card a.nd-btn:focus-visible {
    text-decoration: none;
}
a.nd-btn--primary,
.nd-status-card a.nd-btn--primary {
    color: var(--nd-on-primary, #fff);
}

/* F2-V6 (G4 a11y): foco visível em upload-zone (tab) + estado de drag */
.nd-upload-zone:focus-visible {
    outline: 2px solid var(--nd-brand, #1FBA7A);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--nd-brand-soft, color-mix(in srgb, var(--nd-brand, #1FBA7A) 18%, transparent));
}
.nd-upload-zone[data-state="dragover"] {
    border-color: var(--nd-brand, #1FBA7A);
    background: var(--nd-brand-soft, color-mix(in srgb, var(--nd-brand, #1FBA7A) 8%, transparent));
}
.nd-upload-zone__remove {
    background: transparent;
    border: 1px solid var(--nd-border, #e2e8f0);
    border-radius: var(--nd-radius-sm, 8px);
    padding: 4px 10px;
    font-size: var(--nd-fs-sm, 14px);
    cursor: pointer;
    margin-top: 6px;
}
.nd-upload-zone__preview img,
.nd-upload-zone__preview canvas {
    max-width: 120px;
    max-height: 160px;
    border-radius: var(--nd-radius-sm, 8px);
    object-fit: cover;
}

/* F2-V6: required indicator + dupe alert */
.nd-required {
    color: var(--nd-danger, #dc2626);
    font-weight: 700;
    margin-left: 2px;
}
.neurodor-dupe-alert {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: var(--nd-radius-sm, 8px);
    background: color-mix(in srgb, var(--nd-warning, #ea580c) 8%, transparent);
    color: var(--nd-text, #0f172a);
    font-size: var(--nd-fs-sm, 14px);
}
.neurodor-dupe-alert__email { opacity: 0.8; }
.neurodor-dupe-alert__actions { display: inline-flex; gap: 10px; margin-left: 8px; }
.neurodor-dupe-alert__actions a {
    color: var(--nd-brand, #1FBA7A);
    text-decoration: underline;
}

/* F2-V1: contexto checkout — esconde elementos da área logada que ainda vazem */
body.nd-checkout-context .nd-sidebar-atalhos,
body.nd-checkout-context .nd-shortcuts-dock,
body.nd-checkout-context .nd-page-toolbar,
body.nd-checkout-context #kt_app_sidebar {
    display: none !important;
}

/* F2-CT4 (G5): modal contrato — dialog flutuante */
dialog.nd-contract-modal {
    border: none;
    border-radius: var(--nd-radius-lg, 16px);
    padding: 0;
    max-width: 900px;
    width: 92vw;
    max-height: 90vh;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
dialog.nd-contract-modal::backdrop { background: rgba(0,0,0,0.55); }
dialog.nd-contract-modal .nd-contract-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--nd-border, #e2e8f0);
}
dialog.nd-contract-modal .nd-contract-modal__body { height: 70vh; }
dialog.nd-contract-modal iframe { width: 100%; height: 100%; border: 0; }
dialog.nd-contract-modal .nd-contract-modal__footer {
    padding: 12px 20px; border-top: 1px solid var(--nd-border, #e2e8f0);
    display: flex; justify-content: flex-end; gap: 8px;
}
@media (max-width: 599.98px) {
    /* Fallback mobile: dialog não aparece; usuário clica no link target=_blank */
    dialog.nd-contract-modal { display: none !important; }
}

/* ╔════════════════════════════════════════════════════════════════════════╗
   ║ M2.5 (2026-05-18) — Single product DSV2                                ║
   ╠════════════════════════════════════════════════════════════════════════╣
   ║ ANTI-REGRESSÃO: TODOS os seletores escopados em .nd-product-* OU       ║
   ║ body.nd-product-context .nd-*. ZERO seletores globais (body, html,    ║
   ║ .app-sidebar, .nd-user-menu, .nd-logo, [data-palette], [data-theme]).  ║
   ║ Preserva 100% do shell Metronic + paletas + theme toggle.              ║
   ╚════════════════════════════════════════════════════════════════════════╝ */
/* M2.5b Fix C: background customizável via Visual_Settings color_product_bg */
body.nd-product-context {
    background: var(--nd-bg-page-product, var(--nd-bg-page, #ffffff));
}
.nd-product-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: transparent;
}

.nd-product-card--single {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    background: var(--nd-card-bg, #ffffff);
    border: 1px solid var(--nd-border, #e2e8f0);
    border-radius: var(--nd-radius-lg, 16px);
    padding: 24px;
    margin-bottom: 24px;
}

.nd-product-card__gallery {
    display: flex;
    align-items: center;
    justify-content: center;
}
.nd-product-card__gallery img,
.nd-product-card__gallery .wp-post-image {
    width: 100%;
    height: auto;
    max-width: 500px;
    border-radius: var(--nd-radius, 12px);
    object-fit: contain;
}
.nd-product-card__gallery .woocommerce-product-gallery {
    width: 100%;
    max-width: 500px;
}
.nd-product-card__gallery .woocommerce-product-gallery__wrapper {
    margin: 0;
}

.nd-product-card__info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.nd-product-card__title {
    font-size: var(--nd-fs-xl, 28px);
    margin: 0 0 4px;
    color: var(--nd-text, #0f172a);
    line-height: 1.2;
}
.nd-product-card__price {
    font-size: var(--nd-fs-lg, 22px);
    color: var(--nd-brand, #1FBA7A);
    font-weight: 700;
}
.nd-product-card__price .amount,
.nd-product-card__price bdi { color: inherit; }
.nd-product-card__price-alt {
    background: color-mix(in srgb, var(--nd-brand, #1FBA7A) 6%, transparent);
    border: 1px solid var(--nd-border, #e2e8f0);
    border-radius: var(--nd-radius-sm, 8px);
    padding: 8px 12px;
    font-size: var(--nd-fs-sm, 14px);
    color: var(--nd-text, #0f172a);
    margin-top: -4px;
}
.nd-product-card__price-alt-label {
    display: block;
    color: var(--nd-text-muted, #64748b);
    font-size: var(--nd-fs-xs, 12px);
    margin-bottom: 2px;
}
.nd-product-card__price-alt-hint {
    color: var(--nd-text-muted, #64748b);
    display: block;
    margin-top: 4px;
}
.nd-product-card__excerpt {
    color: var(--nd-text, #0f172a);
    line-height: 1.6;
    font-size: var(--nd-fs-base, 16px);
}
.nd-product-card__excerpt p:last-child { margin-bottom: 0; }
.nd-product-card__actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
    flex-wrap: wrap;
}
.nd-btn--lg {
    padding: 14px 28px;
    font-size: var(--nd-fs-base, 16px);
    font-weight: 600;
}
.nd-product-card__meta {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--nd-border, #e2e8f0);
    font-size: var(--nd-fs-sm, 14px);
    color: var(--nd-text-muted, #64748b);
}
.nd-product-card__sku { display: inline-block; }

/* Card rich do curso vinculado (M2.5-T4) */
.nd-product-course-card {
    background: color-mix(in srgb, var(--nd-brand, #1FBA7A) 4%, var(--nd-card-bg, #ffffff));
    border: 1px solid var(--nd-border, #e2e8f0);
    border-radius: var(--nd-radius-lg, 16px);
    padding: 20px 24px;
    margin-bottom: 24px;
}
.nd-product-course-card__header { margin-bottom: 12px; }
.nd-product-course-card__title {
    font-size: var(--nd-fs-lg, 20px);
    margin: 0;
    color: var(--nd-text, #0f172a);
}
.nd-product-course-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: var(--nd-text-muted, #64748b);
    font-size: var(--nd-fs-sm, 14px);
    margin-bottom: 12px;
}
.nd-product-course-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nd-product-course-card__meta-item strong { color: var(--nd-brand, #1FBA7A); font-weight: 700; }
.nd-product-course-card__link {
    display: inline-block;
    color: var(--nd-brand, #1FBA7A);
    font-weight: 600;
    text-decoration: none;
}
.nd-product-course-card__link:hover { text-decoration: underline; }
.nd-product-course-card--minimal { padding: 16px 20px; }
.nd-product-course-card__minimal-msg {
    margin: 0;
    color: var(--nd-text-muted, #64748b);
    font-style: italic;
    text-align: center;
}

/* Descrição expandida em .nd-card */
.nd-product-description {
    padding: 24px;
    margin-bottom: 24px;
    background: var(--nd-card-bg, #ffffff);
    border: 1px solid var(--nd-border, #e2e8f0);
    border-radius: var(--nd-radius-lg, 16px);
}
.nd-product-description h2 {
    margin-top: 0;
    font-size: var(--nd-fs-lg, 20px);
    color: var(--nd-text, #0f172a);
}
.nd-product-description p { line-height: 1.7; color: var(--nd-text, #0f172a); }

/* Responsividade — 2-col→1-col em <880px, padding reduzido em mobile */
@media (max-width: 879.98px) {
    .nd-product-card--single {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .nd-product-card__gallery { max-width: 100%; }
}
@media (max-width: 599.98px) {
    .nd-product-page { padding: 12px; }
    .nd-product-card--single,
    .nd-product-course-card,
    .nd-product-description { padding: 16px; }
    .nd-product-card__gallery img,
    .nd-product-card__gallery .wp-post-image { max-width: 100%; }
    .nd-product-card__title { font-size: var(--nd-fs-lg, 20px); }
    .nd-product-card__actions .nd-btn--lg { width: 100%; justify-content: center; }
    /* Mobile-only: suprime dock/toolbar pra foco em compra. SEMPRE com namespace
       body.nd-product-context — preserva /painel-aluno/ e outros paths intactos */
    body.nd-product-context .nd-shortcuts-dock { display: none !important; }
    body.nd-product-context .nd-page-toolbar { display: none !important; }
}

/* ╔════════════════════════════════════════════════════════════════════════╗
   ║ M2.5c (2026-05-19) — Shell cadastro-style aplicado ao checkout         ║
   ╠════════════════════════════════════════════════════════════════════════╣
   ║ TUDO escopado em .neurodor-onboarding-shell.is-context-checkout OU    ║
   ║ .neurodor-onboarding-side-legal. Cadastro original preservado.         ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

.neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-card,
.neurodor-onboarding-shell.is-context-checkout .neurodor-checkout-card {
    max-width: 880px;
}
.neurodor-onboarding-shell.is-context-checkout .nd-card.nd-checkout-card {
    box-shadow: none;
    border: 1px solid var(--nd-border, #e2e8eb);
    margin-bottom: 16px;
}

/* HOTFIX 6 (2026-05-19): topbar inline reset defensivo */
.nd-checkout-topbar--inline {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 8px;
}

/* HOTFIX 7 (2026-05-19): bot ão sair do checkout — classe NOVA sem conflito com .nd-checkout-topbar */
.nd-checkout-exit-bar {
    display: flex;
    justify-content: flex-start;
    margin: -8px 0 12px;
}
.nd-checkout-exit-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    background: transparent;
    color: var(--no-text-muted, #64748b);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    border: 1px solid transparent;
}
.nd-checkout-exit-link:hover,
.nd-checkout-exit-link:focus-visible {
    background: rgba(0, 0, 0, 0.04);
    color: var(--no-primary, var(--nd-brand, #1FBA7A));
    border-color: rgba(0, 0, 0, 0.08);
    text-decoration: none;
}
.nd-checkout-exit-link svg {
    width: 14px;
    height: 14px;
}

/* Step nav buttons (injetados pelo nd-checkout-wizard-bridge.js) */
.nd-checkout-step-nav {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--nd-border, #e2e8eb);
}
.nd-checkout-step-nav .nd-btn { min-width: 120px; }
@media (max-width: 599.98px) {
    .nd-checkout-step-nav { flex-direction: column-reverse; }
    .nd-checkout-step-nav .nd-btn { width: 100%; }
}

/* Bloco LEGAL no side panel (M2.5c G6) */
.neurodor-onboarding-side-legal {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
.neurodor-onboarding-side-legal__title {
    font-size: var(--no-fs-sm, 14px);
    color: var(--no-on-side, currentColor);
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}
.neurodor-onboarding-side-legal__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.neurodor-onboarding-side-legal__link {
    color: var(--no-on-side, currentColor);
    text-decoration: none;
    font-size: var(--no-fs-sm, 14px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}
.neurodor-onboarding-side-legal__link:hover {
    text-decoration: underline;
    color: var(--no-primary, currentColor);
}

.neurodor-onboarding-shell.is-context-checkout .neurodor-stepper-nav { margin-bottom: 24px; }

@media (max-width: 879.98px) {
    .neurodor-onboarding-shell.is-context-checkout.is-layout-split {
        grid-template-columns: 1fr;
    }
    .neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side {
        display: none;
    }
}

/* ═══ M2.5c FIX visual (2026-05-19) ═══════════════════════════════════════
   Bugs reportados pelo usuário: fundo verde gigante (side panel renderizando
   full width), stepper checkmarks repetidos grandes (svg sem gate is-done),
   form em 2-col espremidas (.nd-checkout-grid 2-col aninhado dentro do card).
   ═══════════════════════════════════════════════════════════════════════ */

/* Stepper checkmark SVG: escondido por default; só aparece em .is-done.
   Defensive: onboarding.css define isso, mas garante caso cascade falhe. */
.neurodor-onboarding-shell.is-context-checkout .neurodor-stepper-check {
    display: none;
}
.neurodor-onboarding-shell.is-context-checkout .neurodor-stepper-item.is-done .neurodor-stepper-check {
    display: block;
}
.neurodor-onboarding-shell.is-context-checkout .neurodor-stepper-item.is-done .neurodor-stepper-num-text {
    opacity: 0;
}

/* nd-checkout-grid 2-col (form+summary do form-checkout.php) dentro do card
   cadastro: forçar 1-col pra não espremer */
.neurodor-onboarding-shell.is-context-checkout .nd-checkout-grid {
    display: block !important;
    grid-template-columns: none !important;
}
.neurodor-onboarding-shell.is-context-checkout .nd-checkout-grid__form,
.neurodor-onboarding-shell.is-context-checkout .nd-checkout-grid__summary {
    width: 100%;
    max-width: 100%;
}
.neurodor-onboarding-shell.is-context-checkout .nd-checkout-grid__summary {
    margin-top: 20px;
}

/* M2.5c HOTFIX 3 (2026-05-19): layout 70/30 + summary no side + destaque cards */

/* Layout 70/30: form esquerda larga + side direita compacto */
.neurodor-onboarding-shell.is-context-checkout.is-layout-split {
    grid-template-columns: minmax(0, 7fr) minmax(320px, 3fr) !important;
}

/* Steps escondidos (data-step-group !== current) — defensive */
[data-step-group][hidden] {
    display: none !important;
}

/* Card no checkout: scroll natural da página (vs scroll interno do cadastro) */
.neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-main .neurodor-onboarding-card {
    max-width: 100%;
    max-height: none;
    overflow-y: visible;
}

/* Side aside: empilha summary + side-visual content + documentos em cards */
.neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 20px;
    overflow-y: auto;
    max-height: 100dvh;
    position: sticky;
    top: 0;
}

/* SUMMARY transferido pro side: card destacado, fundo branco sobre o verde */
.neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side .nd-summary-card {
    background: #ffffff;
    color: #0f172a;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.neurodor-onboarding-shell.is-context-checkout .nd-summary-card summary {
    cursor: default;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 15px;
    color: #0f172a;
    margin-bottom: 12px;
}
.neurodor-onboarding-shell.is-context-checkout .nd-summary-card summary::-webkit-details-marker { display: none; }
.neurodor-onboarding-shell.is-context-checkout .nd-summary-card__items { margin: 8px 0 12px; }
.neurodor-onboarding-shell.is-context-checkout .nd-summary-card__item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}
.neurodor-onboarding-shell.is-context-checkout .nd-summary-card__item:last-child { border-bottom: none; }
.neurodor-onboarding-shell.is-context-checkout .nd-summary-card__thumb {
    width: 40px; height: 40px; object-fit: cover; border-radius: 6px;
}
.neurodor-onboarding-shell.is-context-checkout .nd-summary-card__item-name { margin: 0; font-size: 13px; font-weight: 500; }
.neurodor-onboarding-shell.is-context-checkout .nd-summary-card__item-price { margin-left: auto; font-weight: 600; font-size: 13px; }
.neurodor-onboarding-shell.is-context-checkout .nd-summary-card__totals { padding-top: 8px; border-top: 1px solid #e2e8f0; }
.neurodor-onboarding-shell.is-context-checkout .nd-summary-card__row {
    display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px;
}
.neurodor-onboarding-shell.is-context-checkout .nd-summary-card__row--total {
    font-weight: 700; font-size: 16px; padding-top: 8px; border-top: 1px solid #e2e8f0; margin-top: 4px;
}

/* Cupom dentro do summary */
.neurodor-onboarding-shell.is-context-checkout .nd-checkout-coupon { margin-top: 12px; }
.neurodor-onboarding-shell.is-context-checkout .nd-checkout-coupon summary { font-size: 12px; color: #64748b; font-weight: 500; cursor: pointer; }
.neurodor-onboarding-shell.is-context-checkout .nd-checkout-coupon__form { display: flex; gap: 6px; margin-top: 8px; }
.neurodor-onboarding-shell.is-context-checkout .nd-checkout-coupon__form .nd-input { flex: 1; font-size: 13px; padding: 6px 10px; min-height: 36px; }
.neurodor-onboarding-shell.is-context-checkout .nd-checkout-coupon__form .nd-btn { padding: 6px 12px; font-size: 13px; min-height: 36px; }

/* DOCUMENTOS (side-legal-checkout) tambem como card destacado */
.neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side-legal {
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    margin: 0;
    border-top: none;
}
.neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side-legal__title {
    color: #0f172a;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 1;
}
.neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side-legal__link {
    color: #0ea5a4;
    font-size: 13px;
}
.neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side-legal__link:hover {
    color: #0d9695;
}

/* HOTFIX 5 (2026-05-19): textos compactos no side checkout pra evitar rolagem */
.neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side-inner {
    padding: 0;
    margin: 0;
    text-align: center;
}
.neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side-logo {
    margin-bottom: 6px;
}
.neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side-logo img {
    max-width: 120px !important;     /* override do max-width:220px inline */
    max-height: 60px;
    object-fit: contain;
}
.neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side-backdrop {
    width: 180px !important; height: 180px !important;
}
.neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side-title {
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.3;
    margin: 4px 0 2px;
}
.neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side-subtitle {
    font-size: 12px !important;
    line-height: 1.4;
    margin: 0 0 8px;
    opacity: 0.85;
}
.neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side-lgpd {
    font-size: 10px !important;
    line-height: 1.4;
    padding: 6px 0 0;
    margin-top: 4px;
    opacity: 0.75;
    border-top: 1px solid rgba(255,255,255,0.15);
}
.neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side-lgpd a {
    color: inherit;
    text-decoration: underline;
}

/* HOTFIX 4 (2026-05-19): NÃO esconder summary com data-moved-to-side
   — JS move o MESMO elemento, então essa regra escondia a versão que foi
   pro side (única instância existente). Mantém só o grid override 1-col. */
.neurodor-onboarding-shell.is-context-checkout .nd-checkout-grid {
    display: block !important;
    grid-template-columns: none !important;
}
.neurodor-onboarding-shell.is-context-checkout .nd-checkout-grid__form { width: 100%; }

/* Summary movido pro side: garantir visível + display:block default */
.neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side .nd-checkout-grid__summary[data-moved-to-side="1"] {
    display: block !important;
    width: 100%;
    max-width: 100%;
}

/* HOTFIX 5: responsividade refinada (mobile/tablet) */

/* Tablet large (1024-1280px): 65/35 */
@media (max-width: 1280px) and (min-width: 1025px) {
    .neurodor-onboarding-shell.is-context-checkout.is-layout-split {
        grid-template-columns: minmax(0, 6.5fr) minmax(280px, 3.5fr) !important;
    }
}

/* Tablet (769-1024px): side full width acima do form, compacto */
@media (max-width: 1024px) and (min-width: 769px) {
    .neurodor-onboarding-shell.is-context-checkout.is-layout-split {
        grid-template-columns: 1fr !important;
    }
    .neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side {
        position: static;
        max-height: none;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px 20px;
        order: 1;
    }
    .neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side-inner,
    .neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side-lgpd,
    .neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side-legal {
        flex: 1 1 200px;
    }
    .neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side .nd-checkout-grid__summary {
        flex: 1 1 100%;
    }
    .neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-main {
        order: 2;
    }
}

/* Mobile (<768px): side vira compacto, summary expandido, LGPD/logo+title escondidos */
@media (max-width: 768px) {
    .neurodor-onboarding-shell.is-context-checkout.is-layout-split {
        grid-template-columns: 1fr !important;
    }
    .neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side {
        position: static;
        max-height: none;
        padding: 12px;
        gap: 12px;
        order: 1;     /* side FICA no topo no mobile */
    }
    /* No mobile, esconder decoração + LGPD do side panel — só mantém summary + documentos */
    .neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side-deco,
    .neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side-inner,
    .neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side-lgpd {
        display: none;
    }
    /* Summary collapsable no mobile (details native — fecha por default) */
    .neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side .nd-summary-card summary {
        cursor: pointer;
    }
    .neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-side .nd-summary-card summary::-webkit-details-marker {
        display: inline-block;
    }
    .neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-main {
        order: 2;
        padding: 16px 12px;
    }
    /* Card cadastro full-width sem padding extra mobile */
    .neurodor-onboarding-shell.is-context-checkout .neurodor-onboarding-card {
        padding: 16px 12px;
    }
    /* Step nav buttons full-width mobile */
    .nd-checkout-step-nav { flex-direction: column-reverse; gap: 8px; }
    .nd-checkout-step-nav .nd-btn { width: 100%; }
    /* Stepper compacto mobile */
    .neurodor-onboarding-shell.is-context-checkout .neurodor-stepper-nav ol {
        gap: 4px;
    }
    .neurodor-onboarding-shell.is-context-checkout .neurodor-stepper-item .neurodor-stepper-label {
        font-size: 11px;
    }
    .neurodor-onboarding-shell.is-context-checkout .neurodor-stepper-num {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px;
    }
}

/* Mobile-extra (<480px): summary auto-fecha no init via JS hint */
@media (max-width: 480px) {
    .neurodor-onboarding-shell.is-context-checkout .nd-checkout-section__title {
        font-size: 16px;
    }
    .neurodor-onboarding-shell.is-context-checkout .nd-checkout-section__hint {
        font-size: 12px;
    }
}


/* ============================================================
   M2.5d (2026-05-19) — UX validations inline (CPF/CEP/dupe)
   Escopado em .nd-field (Form_Renderer) — não vaza p/ cadastro.
   ============================================================ */
.nd-field .nd-field__error {
    display: block;
    margin-top: 4px;
    color: var(--nd-danger, #d93b3b);
    font-size: 12px;
    line-height: 1.3;
}
.nd-field .nd-field__error[hidden] { display: none; }
.nd-field input.has-error,
.nd-field select.has-error,
.nd-field textarea.has-error {
    border-color: var(--nd-danger, #d93b3b) !important;
    box-shadow: 0 0 0 2px rgba(217, 59, 59, 0.12);
}
[data-nd-upload-zone].has-error {
    border-color: var(--nd-danger, #d93b3b) !important;
    background-color: rgba(217, 59, 59, 0.04);
}
.nd-checkout-step-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}
.nd-checkout-step-nav .nd-btn { min-width: 140px; }