/* ============================================================================ Neurodor — biblioteca de componentes de form + overrides Bootstrap. Consome tokens --nd-* emitidos pelo interface-ead. Escopo: rotas autenticadas (.nd-logged-area no body). ============================================================================ */ /* ─── Overrides Bootstrap/Metronic quando modo logado = dark ─────────────── page-videoaulas, page-desempenho, page-cursos usam classes Bootstrap puras (.card, .text-gray-900, .text-gray-500, .border-hover-success). Sem essas regras o conteúdo fica claro mesmo com paleta dark. Contrato: [data-theme="dark"] no é emitido por interface_ead_language_attributes() — fonte única do tema. Antes essas regras dependiam de body.nd-mode-dark, que silenciosamente falhava quando rota escapava do registry do interface-ead. */ [data-theme="dark"] .nd-logged-area .card { background: var(--nd-bg-surface, #131A1F); border-color: var(--nd-border, #233038); color: var(--nd-text, #E8F1F2); } [data-theme="dark"] .nd-logged-area .card-body { color: var(--nd-text, #E8F1F2); } [data-theme="dark"] .nd-logged-area .card-header, [data-theme="dark"] .nd-logged-area .card-footer { background: transparent; border-color: var(--nd-border, #233038); } [data-theme="dark"] .nd-logged-area .text-gray-900 { color: var(--nd-text, #E8F1F2) !important; } [data-theme="dark"] .nd-logged-area .text-gray-800 { color: var(--nd-text, #E8F1F2) !important; } [data-theme="dark"] .nd-logged-area .text-gray-700 { color: var(--nd-text, #E8F1F2) !important; } [data-theme="dark"] .nd-logged-area .text-gray-600 { color: var(--nd-text-muted, #8DA0A8) !important; } [data-theme="dark"] .nd-logged-area .text-gray-500 { color: var(--nd-text-muted, #8DA0A8) !important; } [data-theme="dark"] .nd-logged-area .text-gray-400 { color: var(--nd-text-dim, #5A6E76) !important; } [data-theme="dark"] .nd-logged-area .text-muted { color: var(--nd-text-muted, #8DA0A8) !important; } [data-theme="dark"] .nd-logged-area .bg-light, [data-theme="dark"] .nd-logged-area .bg-white { background: var(--nd-bg-surface-2, #1A2329) !important; } [data-theme="dark"] .nd-logged-area .border, [data-theme="dark"] .nd-logged-area .border-gray-300, [data-theme="dark"] .nd-logged-area .border-gray-200 { border-color: var(--nd-border, #233038) !important; } [data-theme="dark"] .nd-logged-area .table, [data-theme="dark"] .nd-logged-area .table th, [data-theme="dark"] .nd-logged-area .table td { color: var(--nd-text, #E8F1F2); border-color: var(--nd-border, #233038); } [data-theme="dark"] .nd-logged-area .table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--nd-bg-surface-2, #1A2329); color: var(--nd-text, #E8F1F2); } [data-theme="dark"] .nd-logged-area .form-control, [data-theme="dark"] .nd-logged-area .form-select { background: var(--nd-bg-input, #0F161B); border-color: var(--nd-border, #233038); color: var(--nd-text, #E8F1F2); } [data-theme="dark"] .nd-logged-area .dropdown-menu { background: var(--nd-bg-surface, #131A1F); border-color: var(--nd-border, #233038); color: var(--nd-text, #E8F1F2); } [data-theme="dark"] .nd-logged-area .dropdown-item { color: var(--nd-text, #E8F1F2); } [data-theme="dark"] .nd-logged-area .dropdown-item:hover { background: var(--nd-bg-surface-2, #1A2329); color: var(--nd-brand, #1FBA7A); } [data-theme="dark"] .nd-logged-area .breadcrumb a { color: var(--nd-brand, #1FBA7A); } [data-theme="dark"] .nd-logged-area .breadcrumb-item.text-muted, [data-theme="dark"] .nd-logged-area .breadcrumb-item a.text-muted { color: var(--nd-text-muted, #8DA0A8) !important; } /* Botão "Voltar" do toolbar (page-videoaulas etc) — sai do verde Bootstrap default e adota o brand do admin. Aplica em ambos os modos. */ .nd-logged-area #kt_app_toolbar .btn-success { background: var(--nd-brand, #1FBA7A); border-color: var(--nd-brand, #1FBA7A); color: var(--nd-on-brand, #ffffff); } .nd-logged-area #kt_app_toolbar .btn-success:hover { background: var(--nd-brand-hover, var(--nd-brand, #1FBA7A)); border-color: var(--nd-brand-hover, var(--nd-brand, #1FBA7A)); } /* App-toolbar sticky (dark) */ [data-theme="dark"] .nd-logged-area #kt_app_toolbar, [data-theme="dark"] .nd-logged-area #kt_app_content { background: var(--nd-bg-page, #0B0F12); } [data-theme="dark"] .nd-logged-area #kt_app_sidebar, [data-theme="dark"] .nd-logged-area .app-sidebar { background: var(--nd-bg-surface, #131A1F); border-left-color: var(--nd-border, #233038); } [data-theme="dark"] .nd-logged-area .app-sidebar-menu .menu-link, [data-theme="dark"] .nd-logged-area .app-sidebar-menu .menu-title { color: var(--nd-text-muted, #8DA0A8); } [data-theme="dark"] .nd-logged-area .app-sidebar-menu .menu-link.active { color: var(--nd-brand, #1FBA7A); background: var(--nd-brand-soft, rgba(31,186,122,0.08)); } /* Background da área logada — consome --nd-bg-page direto. Metronic força `body { background-color: transparent !important }` e `.app-wrapper { background: 0 0 !important }`. Para a paleta do aluno pintar a página inteira, o recebe a cor (visível através do body transparente do Metronic). Funciona para qualquer tema/paleta. Em /painel-aluno/ isso é especialmente visível porque as regions têm gap entre si — o html vaza por baixo. */ html[data-theme] { background-color: var(--nd-bg-page, #F4F7F8); } /* Como o Metronic é transparent !important, ele revela o html — OK. Mas wrappers internos como #kt_app_content podem ter background próprio do Metronic; forçamos transparente pra deixar o html aparecer. */ .nd-logged-area #kt_app_main, .nd-logged-area #kt_app_content, .nd-logged-area .app-main, .nd-logged-area .app-page { background-color: transparent; } /* ─── Botões — variantes canônicas ─────────────────────────────────────── */ .nd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--nd-sp-2, 8px); padding: 10px 18px; border-radius: var(--nd-radius-sm, 8px); font-family: inherit; font-size: var(--nd-fs-sm, 0.9rem); font-weight: 500; min-height: var(--nd-touch-min, 44px); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: filter var(--nd-dur-fast, 0.15s), background var(--nd-dur-fast, 0.15s), border-color var(--nd-dur-fast, 0.15s), box-shadow var(--nd-dur-fast, 0.15s); line-height: 1.2; } .nd-btn:focus-visible { outline: none; box-shadow: var(--nd-shadow-glow, 0 0 0 4px rgba(31,186,122,0.25)); } /* specificity boost igual ao panel.css — vide nota lá */ .nd-btn.nd-btn-primary, a.nd-btn-primary, button.nd-btn-primary, .interface-ead a.nd-btn-primary { background: var(--nd-brand, #1FBA7A); color: var(--nd-on-brand, #0F172A); border-color: transparent; box-shadow: var(--nd-shadow-sm, 0 1px 2px rgba(0,0,0,0.06)); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18); font-weight: 700; } .nd-btn.nd-btn-primary:hover, a.nd-btn-primary:hover, button.nd-btn-primary:hover, .interface-ead a.nd-btn-primary:hover { background: var(--nd-brand-hover, var(--nd-brand, #25D08A)); filter: brightness(0.96); color: var(--nd-on-brand, #0F172A); } .nd-btn-ghost { background: transparent; color: var(--nd-text, #0F172A); border-color: var(--nd-border-strong, #CBD5E1); } .nd-btn-ghost:hover { border-color: var(--nd-brand, #1FBA7A); color: var(--nd-brand, #1FBA7A); } .nd-btn-link { background: none; border: none; color: var(--nd-brand, #1FBA7A); padding: 0; min-height: 0; font-weight: 600; } .nd-btn-link:hover { text-decoration: underline; } .nd-btn-danger { background: var(--nd-danger, #E5484D); color: #ffffff; border-color: transparent; font-weight: 700; } .nd-btn-danger:hover { filter: brightness(0.95); } /* ─── Form genérico ────────────────────────────────────────────────────── */ .nd-form { display: flex; flex-direction: column; gap: var(--nd-sp-5, 24px); } .nd-field { display: flex; flex-direction: column; gap: 6px; } .nd-label { font-size: var(--nd-fs-xs, 0.75rem); color: var(--nd-text-muted, #475569); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; } .nd-req { color: var(--nd-brand, #1FBA7A); margin-left: 2px; } .nd-opt { color: var(--nd-text-dim, #94A3B8); font-size: 10px; text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; } /* ─── Inputs / Selects / Textareas ─────────────────────────────────────── */ .nd-input, .nd-select, .nd-textarea { width: 100%; box-sizing: border-box; background: var(--nd-bg-input, #ffffff); border: 1px solid var(--nd-border, #e2e8f0); border-radius: var(--nd-radius-sm, 8px); padding: 10px 14px; color: var(--nd-text, #0f172a); font-family: inherit; font-size: 16px; /* 16px obriga iOS a não dar zoom no foco */ transition: border-color var(--nd-dur-fast, 0.15s), box-shadow var(--nd-dur-fast, 0.15s); } .nd-input:focus, .nd-select:focus, .nd-textarea:focus { outline: none; border-color: var(--nd-brand, #1FBA7A); box-shadow: var(--nd-shadow-glow, 0 0 0 4px rgba(31,186,122,0.25)); } .nd-input::placeholder, .nd-textarea::placeholder { color: var(--nd-text-dim, #94A3B8); } .nd-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; } /* ─── Segmented control (radio bonito) ─────────────────────────────────── */ .nd-seg-control { display: inline-flex; background: var(--nd-bg-input, #ffffff); border: 1px solid var(--nd-border, #e2e8f0); border-radius: var(--nd-radius-sm, 8px); padding: 3px; gap: 2px; flex-wrap: wrap; } .nd-seg-control input[type="radio"] { appearance: none; position: absolute; opacity: 0; width: 0; height: 0; } .nd-seg { padding: 8px 16px; background: transparent; border: none; color: var(--nd-text-muted, #475569); font-size: var(--nd-fs-sm, 0.9rem); border-radius: 5px; cursor: pointer; transition: color var(--nd-dur-fast, 0.15s), background var(--nd-dur-fast, 0.15s); user-select: none; line-height: 1.3; min-height: 36px; display: inline-flex; align-items: center; } .nd-seg-control input[type="radio"]:checked + .nd-seg { background: var(--nd-brand, #1FBA7A); color: var(--nd-on-brand, #ffffff); font-weight: 600; } .nd-seg:not(:has(+ input[type="radio"]:checked)):hover { color: var(--nd-text, #0f172a); } /* ─── Checkbox custom ──────────────────────────────────────────────────── */ /* CHECKOUT-BILLING-100 (2026-05-19) — espaço dedicado + display block para * NÃO ficar encavalado com upload-zone vizinho. */ .nd-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 13px; color: var(--nd-text, #0f172a); line-height: 1.5; padding: 12px 14px; background: var(--nd-bg-card, #f8fafc); border: 1px solid var(--nd-border, #e2e8f0); border-radius: 8px; margin-top: 16px; transition: border-color .15s, background .15s; } .nd-check:hover { border-color: var(--nd-border-strong, #cbd5e1); } .nd-check:has(input:checked) { background: var(--nd-brand-soft, rgba(31,186,122,0.05)); border-color: var(--nd-brand, #1FBA7A); } .nd-check input[type="checkbox"] { appearance: none; width: 18px; height: 18px; border: 1px solid var(--nd-border-strong, #CBD5E1); border-radius: 4px; background: var(--nd-bg-input, #ffffff); position: relative; cursor: pointer; flex-shrink: 0; margin-top: 2px; transition: background var(--nd-dur-fast, 0.15s), border-color var(--nd-dur-fast, 0.15s); } .nd-check input[type="checkbox"]:checked { background: var(--nd-brand, #1FBA7A); border-color: var(--nd-brand, #1FBA7A); } .nd-check input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--nd-on-brand, #ffffff); border-width: 0 2px 2px 0; transform: rotate(45deg); } .nd-check input[type="checkbox"]:focus-visible { box-shadow: var(--nd-shadow-glow, 0 0 0 4px rgba(31,186,122,0.25)); outline: none; } /* ─── Upload zone (drag-drop) ──────────────────────────────────────────── */ /* CHECKOUT-BILLING-100 (2026-05-19) — refeito visual: o HTML render é label * com filhos .nd-upload-zone__icon/__label/__hint/__filename/__preview/__remove * (BEM). Antes o CSS era para .nd-upload-inner (estrutura diferente). */ .nd-upload-zone { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 20px; border: 2px dashed var(--nd-border-strong, #94a3b8); border-radius: var(--nd-radius, 12px); background: var(--nd-bg-input, #f8fafc); transition: border-color .15s, background .15s, transform .15s; position: relative; cursor: pointer; text-align: center; min-height: 180px; justify-content: center; user-select: none; margin: 14px 0; } .nd-upload-zone:hover, .nd-upload-zone:focus-visible, .nd-upload-zone[data-state="dragover"] { border-color: var(--nd-brand, #1FBA7A); background: var(--nd-brand-soft, rgba(31,186,122,0.08)); transform: translateY(-1px); outline: none; } .nd-upload-zone[data-has-file="1"] { border-style: solid; border-color: var(--nd-brand, #1FBA7A); background: var(--nd-brand-soft, rgba(31,186,122,0.06)); padding-top: 16px; } .nd-upload-zone__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--nd-text-muted, #64748b); transition: color .15s, transform .2s; } .nd-upload-zone:hover .nd-upload-zone__icon, .nd-upload-zone[data-state="dragover"] .nd-upload-zone__icon { color: var(--nd-brand, #1FBA7A); transform: translateY(-3px) scale(1.05); } .nd-upload-zone[data-has-file="1"] .nd-upload-zone__icon { display: none; } .nd-upload-zone__label { font-weight: 700; color: var(--nd-text, #0f172a); font-size: 15px; line-height: 1.3; } .nd-upload-zone__hint { font-size: 12px; color: var(--nd-text-muted, #64748b); line-height: 1.4; max-width: 280px; } .nd-upload-zone[data-has-file="1"] .nd-upload-zone__hint { display: none; } .nd-upload-zone__filename { font-size: 13px; color: var(--nd-brand, #1FBA7A); font-weight: 600; word-break: break-all; max-width: 100%; margin-top: 4px; } .nd-upload-zone__filename:empty { display: none; } .nd-upload-zone__preview { margin-top: 10px; max-width: 100%; overflow: hidden; border-radius: 8px; border: 1px solid var(--nd-border, #e2e8f0); background: #fff; } .nd-upload-zone__preview img, .nd-upload-zone__preview canvas { display: block; max-width: 220px; max-height: 140px; width: auto; height: auto; margin: 0 auto; } .nd-upload-zone__remove { position: absolute; top: 10px; right: 10px; background: var(--nd-danger, #dc2626); color: #fff; border: none; border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.15); transition: background .15s, transform .15s; z-index: 2; } .nd-upload-zone__remove:hover { background: #b91c1c; transform: scale(1.05); } /* Status do upload AJAX */ .nd-upload-zone__status { display: block; margin-top: 8px; padding: 6px 10px; font-size: 12px; font-weight: 600; border-radius: 6px; line-height: 1.4; } .nd-upload-zone__status--uploading { background: #fef3c7; color: #92400e; } .nd-upload-zone__status--success { background: #dcfce7; color: #15803d; } .nd-upload-zone__status--error { background: #fee2e2; color: #b91c1c; } /* Indicador "click to upload" pulsante quando vazio */ .nd-upload-zone:not([data-has-file]):after, .nd-upload-zone:not([data-has-file="1"]):after { content: "↑ Clique ou arraste para enviar"; display: block; font-size: 11px; font-weight: 600; color: var(--nd-brand, #1FBA7A); text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; } .nd-upload-zone[data-has-file="1"]:after { content: none; } /* ─── Botão block (full-width) ─────────────────────────────────────────── */ .nd-btn-block { width: 100%; justify-content: center; } /* ─── Validação visual (CHECKOUT-BILLING-100 2026-05-19) ──────────────── */ .nd-checkout-col.has-error .nd-input, .nd-checkout-col.has-error input, .nd-checkout-col.has-error select, .nd-checkout-col.has-error textarea { border-color: var(--nd-danger, #dc2626) !important; background: rgba(220, 38, 38, 0.04); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); animation: nd-shake .35s ease-in-out; } .nd-checkout-col.has-error .nd-label { color: var(--nd-danger, #dc2626); font-weight: 700; } .nd-checkout-col.has-error::before { content: "⚠"; position: absolute; top: 8px; right: 12px; font-size: 16px; color: var(--nd-danger, #dc2626); pointer-events: none; z-index: 2; } .nd-checkout-col { position: relative; } .nd-cw-error-msg, .nd-field-error { color: var(--nd-danger, #dc2626); font-size: 12px; font-weight: 600; margin: 6px 0 0; padding: 6px 10px; background: rgba(220, 38, 38, 0.08); border-left: 3px solid var(--nd-danger, #dc2626); border-radius: 4px; display: flex; align-items: center; gap: 6px; } .nd-cw-error-msg::before, .nd-field-error::before { content: "⚠"; font-size: 14px; } @keyframes nd-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } /* Upload zone com erro */ .nd-upload-zone.has-error, [data-nd-required="1"].has-error { border-color: var(--nd-danger, #dc2626) !important; background: rgba(220, 38, 38, 0.04); animation: nd-shake .35s ease-in-out; } /* Checkbox required com erro */ .nd-check.has-error { border-color: var(--nd-danger, #dc2626); background: rgba(220, 38, 38, 0.04); animation: nd-shake .35s ease-in-out; } /* Banner de erro no topo do step (wizard) */ .nd-cw-step__error-banner { background: rgba(220, 38, 38, 0.08); border: 1px solid var(--nd-danger, #dc2626); color: var(--nd-danger, #dc2626); padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 10px; animation: nd-fade-in .3s; } .nd-cw-step__error-banner::before { content: "⚠"; font-size: 18px; } @keyframes nd-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ─── Two-column grid (form + aside) ───────────────────────────────────── */ .nd-kyc-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--nd-sp-5, 24px); align-items: start; } @media (max-width: 899px) { .nd-kyc-grid { grid-template-columns: 1fr; } } .nd-kyc-form-wrap { /* Region já tem padding/border; só ajusta gap interno */ } .nd-kyc-intro { color: var(--nd-text-muted, #475569); margin: 0 0 var(--nd-sp-4, 16px); } .nd-kyc-aside { display: flex; flex-direction: column; gap: var(--nd-sp-4, 16px); } .nd-kyc-aside h3 { margin: 0 0 var(--nd-sp-3, 12px); font-size: var(--nd-fs-sm, 0.95rem); text-transform: uppercase; letter-spacing: 0.06em; color: var(--nd-text-muted, #475569); font-weight: 600; } /* ─── Steps vertical (numerados) ───────────────────────────────────────── */ .nd-steps-vertical { list-style: none; padding: 0; margin: 0; counter-reset: nd-step; } .nd-steps-vertical li { counter-increment: nd-step; position: relative; padding-left: var(--nd-sp-7, 40px); margin-bottom: var(--nd-sp-3, 12px); font-size: var(--nd-fs-sm, 0.95rem); color: var(--nd-text-muted, #475569); } .nd-steps-vertical li::before { content: counter(nd-step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--nd-brand-soft, rgba(31,186,122,0.12)); color: var(--nd-brand, #1FBA7A); font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--nd-fs-xs, 0.75rem); font-weight: 700; display: flex; align-items: center; justify-content: center; } .nd-steps-vertical li strong { display: block; color: var(--nd-text, #0f172a); font-size: var(--nd-fs-sm, 0.95rem); margin-bottom: 2px; } .nd-steps-vertical li span { font-size: var(--nd-fs-xs, 0.85rem); } /* ─── Trust list (badges de segurança) ─────────────────────────────────── */ .nd-trust-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--nd-sp-2, 10px); } .nd-trust-list li { display: flex; align-items: center; gap: var(--nd-sp-2, 10px); color: var(--nd-text-muted, #475569); font-size: var(--nd-fs-sm, 0.9rem); } .nd-trust-list svg { color: var(--nd-brand, #1FBA7A); flex-shrink: 0; } /* ─── /finalizar-compra/ — page-finalizar-compra.php ─────────────────────── Tokenização do header, form WC e botão final ("Finalizar pedido"). */ .public-checkout-card { background: var(--nd-bg-surface, #ffffff) !important; border: 1px solid var(--nd-border, #e2e8f0) !important; border-radius: var(--nd-radius-lg, 14px) !important; box-shadow: var(--nd-shadow-md, 0 6px 20px rgba(0,0,0,0.08)) !important; } .public-checkout-title { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); color: var(--nd-text, #0f172a); margin: 0 0 var(--nd-sp-2, 6px); } .public-checkout-subtitle { color: var(--nd-text-muted, #475569); font-size: var(--nd-fs-base, 1rem); } /* Botões finais do WC + qualquer .btn.btn-primary dentro do checkout. `.btn-primary` do Bootstrap/Metronic é AZUL por default (#1B84FF) — sem esse override, "Finalizar pedido" e "Aplicar Cupom" ficam azuis mesmo com brand verde. */ .woocommerce-checkout button#place_order, .woocommerce-checkout .button.alt, .woocommerce-checkout .button[type="submit"], .woocommerce-page button#place_order, .woocommerce-page .button.alt, .public-checkout-card .btn.btn-primary, .woocommerce-checkout .btn.btn-primary, body[class*="page-template"] .btn.btn-primary, .nd-logged-area .btn.btn-primary { background: var(--nd-brand, #1FBA7A) !important; color: var(--nd-on-brand, #0F172A) !important; border: 1px solid rgba(15, 23, 42, 0.12) !important; border-radius: var(--nd-radius-sm, 8px) !important; font-weight: 700 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18); padding: 10px 18px !important; min-height: var(--nd-touch-min, 44px); box-shadow: var(--nd-shadow-sm, 0 2px 6px rgba(15,23,42,0.15)) !important; transition: filter var(--nd-dur-fast, 0.15s), box-shadow var(--nd-dur-fast, 0.15s); } /* Place_order = full-width sticky */ .woocommerce-checkout button#place_order, .woocommerce-checkout .button.alt { width: 100%; padding: 12px 22px !important; } .woocommerce-checkout button#place_order:hover, .woocommerce-checkout .button.alt:hover, .woocommerce-page button#place_order:hover, .public-checkout-card .btn.btn-primary:hover, .woocommerce-checkout .btn.btn-primary:hover, .nd-logged-area .btn.btn-primary:hover { background: var(--nd-brand-hover, var(--nd-brand, #1FBA7A)) !important; filter: brightness(0.96); box-shadow: var(--nd-shadow-md, 0 4px 12px rgba(15,23,42,0.22)) !important; color: var(--nd-on-brand, #0F172A) !important; } /* Layout 2-col em desktop: form esquerda + summary direita. WC já estrutura via #customer_details + #order_review — só ajusto grid. */ @media (min-width: 900px) { .woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1fr 360px; gap: var(--nd-sp-5, 24px); align-items: start; } .woocommerce-checkout #customer_details { grid-column: 1; } .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 2; position: sticky; top: var(--nd-sp-4, 16px); } } /* ─── Thank-you (pós-checkout) ─────────────────────────────────────────── */ .nd-thankyou { background: var(--nd-bg-surface, #ffffff); border: 1px solid var(--nd-border, #e2e8f0); border-radius: var(--nd-radius-lg, 14px); padding: var(--nd-sp-6, 32px); max-width: 560px; margin: 0 auto; } .nd-thankyou-failed { text-align: center; color: var(--nd-text, #0f172a); } .nd-thankyou-failed svg { color: var(--nd-danger, #E5484D); margin-bottom: var(--nd-sp-3, 12px); } .nd-thankyou-failed h3 { margin: 0 0 var(--nd-sp-2, 8px); font-size: var(--nd-fs-lg, 1.25rem); } .nd-thankyou-failed p { color: var(--nd-text-muted, #475569); margin: 0 0 var(--nd-sp-4, 16px); } .nd-thankyou-actions { display: flex; gap: var(--nd-sp-3, 12px); justify-content: center; flex-wrap: wrap; } .nd-thankyou-total { display: flex; align-items: baseline; justify-content: space-between; padding: var(--nd-sp-4, 16px) 0; border-top: 1px dashed var(--nd-border, #e2e8f0); border-bottom: 1px dashed var(--nd-border, #e2e8f0); margin: var(--nd-sp-4, 16px) 0; } .nd-thankyou-total-label { font-size: var(--nd-fs-xs, 0.78rem); color: var(--nd-text-muted, #475569); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .nd-thankyou-total-value { font-size: var(--nd-fs-xl, 1.5rem); color: var(--nd-text, #0f172a); font-weight: 700; } .nd-countdown-row { display: flex; align-items: center; justify-content: center; gap: var(--nd-sp-3, 12px); padding: var(--nd-sp-3, 12px); background: var(--nd-brand-soft, rgba(31,186,122,0.08)); border-radius: var(--nd-radius-sm, 8px); margin-top: var(--nd-sp-3, 12px); } .nd-countdown-label { color: var(--nd-text-muted, #475569); font-size: var(--nd-fs-sm, 0.9rem); } .nd-countdown { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: var(--nd-fs-lg, 1.25rem); font-weight: 700; color: var(--nd-brand, #1FBA7A); letter-spacing: 0.04em; } .nd-thankyou-confirmed { text-align: center; padding: var(--nd-sp-5, 24px) 0 var(--nd-sp-4, 16px); } .nd-thankyou-confirmed-icon { color: var(--nd-brand, #1FBA7A); margin-bottom: var(--nd-sp-3, 12px); } .nd-thankyou-confirmed-title { margin: 0 0 var(--nd-sp-2, 8px); font-size: var(--nd-fs-xl, 1.5rem); color: var(--nd-text, #0f172a); } .nd-thankyou-confirmed-msg { color: var(--nd-text-muted, #475569); margin: 0 0 var(--nd-sp-5, 24px); } /* ─── KYC confirmed state (success) ────────────────────────────────────── */ .nd-kyc-confirmed { text-align: center; padding: var(--nd-sp-7, 48px) var(--nd-sp-5, 24px); } .nd-kyc-confirmed-icon { color: var(--nd-brand, #1FBA7A); margin-bottom: var(--nd-sp-3, 12px); display: inline-flex; } .nd-kyc-confirmed h2 { margin: 0 0 var(--nd-sp-2, 8px); font-size: var(--nd-fs-lg, 1.4rem); color: var(--nd-text, #0f172a); } .nd-kyc-confirmed-msg { color: var(--nd-text-muted, #475569); max-width: 50ch; margin: 0 auto var(--nd-sp-5, 24px); } /* ============================================================================ DSV2 — Tokenização de classes Bootstrap/Metronic em LIGHT mode ---------------------------------------------------------------------------- Cobre o gap reportado em 2026-05-12: telas legadas (page-desempenho.php, kt_app_toolbar) com text-primary/bg-success/btn-success/text-hover-success continuam com defaults Bootstrap (azul / verde Metronic) em vez do brand. Escopo: SOMENTE em .nd-logged-area (área do aluno) — NÃO vaza no admin nem em checkout WC (onde Bootstrap defaults podem ser intencionais). Specificity (0,2,0) garante override sobre Bootstrap original (0,1,0). ============================================================================ */ /* TEXT primary / success → brand (light + dark) */ .nd-logged-area .text-primary, .nd-logged-area .text-success { color: var(--nd-brand, #1FBA7A) !important; } .nd-logged-area .text-primary i, .nd-logged-area .text-primary svg { color: var(--nd-brand, #1FBA7A); } /* HOVER success (breadcrumb a.text-hover-success etc) */ .nd-logged-area .text-hover-success:hover, .nd-logged-area .text-hover-primary:hover, .nd-logged-area a.text-hover-success:hover, .nd-logged-area a.text-hover-primary:hover { color: var(--nd-brand, #1FBA7A) !important; } /* BG primary / success → brand */ .nd-logged-area .bg-primary, .nd-logged-area .bg-success { background-color: var(--nd-brand, #1FBA7A) !important; color: var(--nd-on-brand, #FFFFFF) !important; } .nd-logged-area .bg-success.bg-opacity-70 { background-color: color-mix(in srgb, var(--nd-brand, #1FBA7A) 70%, transparent) !important; } /* BG danger → semantic --nd-danger (mantém vermelho mas centralizado) */ .nd-logged-area .bg-danger { background-color: var(--nd-danger, #E5484D) !important; color: #FFFFFF !important; } .nd-logged-area .bg-danger.bg-opacity-70 { background-color: color-mix(in srgb, var(--nd-danger, #E5484D) 70%, transparent) !important; } /* BG warning → semantic */ .nd-logged-area .bg-warning { background-color: var(--nd-warn, #F0B429) !important; color: #0F172A !important; } /* BG info → semantic info */ .nd-logged-area .bg-info { background-color: var(--nd-info, #4A9EFF) !important; color: #FFFFFF !important; } /* BUTTONS — primary/success */ .nd-logged-area .btn.btn-primary, .nd-logged-area .btn.btn-success { background-color: var(--nd-brand, #1FBA7A) !important; border-color: var(--nd-brand, #1FBA7A) !important; color: var(--nd-on-brand, #FFFFFF) !important; } .nd-logged-area .btn.btn-primary:hover, .nd-logged-area .btn.btn-success:hover, .nd-logged-area .btn.btn-primary:focus, .nd-logged-area .btn.btn-success:focus { background-color: var(--nd-brand-hover, color-mix(in srgb, var(--nd-brand, #1FBA7A) 85%, #000)) !important; border-color: var(--nd-brand-hover, color-mix(in srgb, var(--nd-brand, #1FBA7A) 85%, #000)) !important; color: var(--nd-on-brand, #FFFFFF) !important; } /* BUTTON light variants (btn-light-success / btn-light-primary) */ .nd-logged-area .btn-light-primary, .nd-logged-area .btn-light-success { background-color: var(--nd-brand-soft, color-mix(in srgb, var(--nd-brand, #1FBA7A) 12%, transparent)) !important; border-color: var(--nd-brand-border, color-mix(in srgb, var(--nd-brand, #1FBA7A) 28%, transparent)) !important; color: var(--nd-brand, #1FBA7A) !important; } /* BADGES light variants */ .nd-logged-area .badge.badge-light-primary, .nd-logged-area .badge.badge-light-success { background-color: var(--nd-brand-soft, color-mix(in srgb, var(--nd-brand, #1FBA7A) 12%, transparent)) !important; color: var(--nd-brand, #1FBA7A) !important; } /* APP TOOLBAR — page-heading + breadcrumb tokenizados */ .nd-logged-area #kt_app_toolbar .page-heading { color: var(--nd-text, #0F172A); } .nd-logged-area #kt_app_toolbar .breadcrumb-item a { color: var(--nd-text-muted, #56707A); transition: color var(--nd-dur-fast, 150ms) ease; } .nd-logged-area #kt_app_toolbar .breadcrumb-item a:hover { color: var(--nd-brand, #1FBA7A); } .nd-logged-area #kt_app_toolbar .breadcrumb-item .bullet { background-color: var(--nd-text-dim, #8DA0A8) !important; } /* APP TOOLBAR + APP CONTENT em LIGHT — fundo neutro (era branco puro) */ [data-theme="light"] .nd-logged-area #kt_app_toolbar, [data-theme="light"] .nd-logged-area #kt_app_content { background: var(--nd-bg-page, #F4F7F8); } [data-theme="light"] .nd-logged-area #kt_app_content .card { background: var(--nd-bg-surface, #FFFFFF); border-color: var(--nd-border, #E2E8EB); } /* CARDS legacy (.card-flush etc) em LIGHT — borda tokenizada */ .nd-logged-area .card-flush, .nd-logged-area .card.card-flush { border: 1px solid var(--nd-border, #E2E8EB); border-radius: var(--nd-radius, 12px); } /* TEXT-GRAY-* mapeados pra tokens (light fica próximo do Metronic, dark inverte) */ [data-theme="light"] .nd-logged-area .text-gray-900 { color: var(--nd-text, #0E1B22); } [data-theme="light"] .nd-logged-area .text-gray-800 { color: var(--nd-text, #0E1B22); } [data-theme="light"] .nd-logged-area .text-gray-700, [data-theme="light"] .nd-logged-area .text-gray-600, [data-theme="light"] .nd-logged-area .text-gray-500 { color: var(--nd-text-muted, #56707A); } [data-theme="light"] .nd-logged-area .text-gray-400 { color: var(--nd-text-dim, #8DA0A8); } /* BG-GRAY-100 (cards de KPI legados em /desempenho/) — tokeniza */ .nd-logged-area .bg-gray-100, .nd-logged-area .bg-gray-100.bg-opacity-70 { background: var(--nd-bg-surface-2, #F0F4F5) !important; } .nd-logged-area .bg-gray-200 { background: var(--nd-border, #E2E8EB) !important; } /* TABLE com bg-primary header (page-desempenho ranking) */ .nd-logged-area .table thead .bg-primary, .nd-logged-area .table tr.bg-primary { background-color: var(--nd-brand, #1FBA7A) !important; color: var(--nd-on-brand, #FFFFFF) !important; } /* DROPDOWN-MENU em LIGHT — borda + bg de surface */ [data-theme="light"] .nd-logged-area .dropdown-menu { background: var(--nd-bg-surface, #FFFFFF); border: 1px solid var(--nd-border, #E2E8EB); } [data-theme="light"] .nd-logged-area .dropdown-item { color: var(--nd-text, #0E1B22); } [data-theme="light"] .nd-logged-area .dropdown-item:hover, [data-theme="light"] .nd-logged-area .dropdown-item:focus { background: var(--nd-brand-soft, color-mix(in srgb, var(--nd-brand, #1FBA7A) 8%, transparent)); color: var(--nd-brand, #1FBA7A); } /* SIDEBAR Metronic em LIGHT — adopta brand para active/hover */ [data-theme="light"] .nd-logged-area .app-sidebar-menu .menu-link.active, [data-theme="light"] .nd-logged-area .app-sidebar-menu .menu-link:hover { color: var(--nd-brand, #1FBA7A); background: var(--nd-brand-soft, color-mix(in srgb, var(--nd-brand, #1FBA7A) 8%, transparent)); } [data-theme="light"] .nd-logged-area .app-sidebar-menu .menu-link.active .menu-icon i, [data-theme="light"] .nd-logged-area .app-sidebar-menu .menu-link:hover .menu-icon i { color: var(--nd-brand, #1FBA7A) !important; }