`), wrapper direct child fica em order:0 → contrato pode subir; nesse caso reorder precisa ajuste pro selector do wrapper. */ /* -------------------------------------------------------------------------- 2c. Alert banner do addon (Bootstrap `.alert.alert-warning` sem CSS carregado no tema 2026 — fica bare sem essas regras). Skin paridade .nt-flash--warning, tokens amber + border-left. Selector descendant (`.main-body .alert` sem `>`) cobre tanto sibling direto (caso comprovado em #contrato L23) quanto nested dentro de #contrato — emit do addon é ionCubed, hierarquia exata não verificada. Scope ainda restrito a .main-body do PDP. .nt-addon-widget alert herdaria mesma skin se aparecer no dashboard (desejável). -------------------------------------------------------------------------- */ .main-body .alert, .main-body .alert-warning, .nt-addon-widget .alert, .nt-addon-widget .alert-warning { background: color-mix(in srgb, var(--amber) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--border)); border-left: 4px solid var(--amber); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); color: var(--text-1); font-size: var(--text-sm); line-height: 1.5; margin: 0 0 var(--space-3) 0; box-shadow: var(--shadow-sm); } .main-body .alert strong, .main-body .alert-warning strong, .main-body .alert b, .main-body .alert-warning b, .nt-addon-widget .alert strong, .nt-addon-widget .alert-warning strong { color: var(--text-1); font-weight: 700; } .main-body .alert a, .main-body .alert-warning a, .nt-addon-widget .alert a, .nt-addon-widget .alert-warning a { color: var(--accent-on-light); text-decoration: underline; font-weight: 600; } /* -------------------------------------------------------------------------- 2d. Alert "Aguardando assinatura de contrato" — destaque forte no PDP. Classe .nt-contract-pending-alert aplicada via addon-contratos-tag.js quando o texto do alert menciona assinatura/contrato. -------------------------------------------------------------------------- */ .main-body .alert.nt-contract-pending-alert, .main-body .alert-warning.nt-contract-pending-alert, .nt-addon-widget .alert.nt-contract-pending-alert, .nt-addon-widget .alert-warning.nt-contract-pending-alert { order: -1; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4); background: linear-gradient(135deg, #fff8e1 0%, #ffe082 50%, #ffca28 100%); border: 2px solid #f59e0b; border-left: 6px solid #d97706; border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); color: #78350f; font-size: var(--text-base, var(--text-md)); line-height: 1.55; box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35); margin-bottom: var(--space-4); animation: nt-contract-pulse 2.5s ease-in-out infinite; } .main-body .alert.nt-contract-pending-alert::before, .main-body .alert-warning.nt-contract-pending-alert::before, .nt-addon-widget .alert.nt-contract-pending-alert::before, .nt-addon-widget .alert-warning.nt-contract-pending-alert::before { content: ""; flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-md); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M9 15l2 2 4-4'/%3E%3C/svg%3E") center / 24px no-repeat; border: 2px solid #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2); } .nt-contract-pending-alert__content { flex: 1 1 220px; min-width: 0; display: grid; gap: var(--space-2); } .nt-contract-pending-alert__headline { margin: 0; font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 700; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-on-light); } .nt-contract-pending-alert__body { font-size: var(--text-sm); line-height: 1.55; color: #78350f; } .nt-contract-pending-alert__highlight { display: inline; padding: 0 4px; font-family: var(--font-display); font-size: 1.05em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent-on-light); background: rgba(255, 255, 255, 0.85); border-radius: var(--radius-sm); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .main-body .alert.nt-contract-pending-alert strong, .main-body .alert-warning.nt-contract-pending-alert strong, .main-body .alert.nt-contract-pending-alert b, .main-body .alert-warning.nt-contract-pending-alert b, .nt-addon-widget .alert.nt-contract-pending-alert strong, .nt-addon-widget .alert-warning.nt-contract-pending-alert strong, .nt-contract-pending-alert__body strong, .nt-contract-pending-alert__body b { color: #92400e; font-size: var(--text-md); font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.06em; } .nt-contract-pending-alert__cta { flex-shrink: 0; align-self: center; margin-left: auto; min-height: 48px; padding: var(--space-3) var(--space-6); font-size: var(--text-sm); letter-spacing: 0.06em; box-shadow: 0 4px 12px rgba(217, 51, 56, 0.35); cursor: pointer; border: none; } .nt-contract-pending-alert__cta:hover { filter: brightness(1.08); transform: translateY(-1px); } @keyframes nt-contract-pulse { 0%, 100% { box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35); } 50% { box-shadow: 0 8px 32px rgba(245, 158, 11, 0.55), 0 0 0 4px rgba(245, 158, 11, 0.15); } } @media (max-width: 640px) { .main-body .alert.nt-contract-pending-alert, .main-body .alert-warning.nt-contract-pending-alert, .nt-addon-widget .alert.nt-contract-pending-alert, .nt-addon-widget .alert-warning.nt-contract-pending-alert { flex-direction: column; align-items: stretch; text-align: left; } .nt-contract-pending-alert__headline { font-size: 1.35rem; } .nt-contract-pending-alert__cta { align-self: stretch; margin-left: 0; width: 100%; } } @media (prefers-reduced-motion: reduce) { .main-body .alert.nt-contract-pending-alert, .main-body .alert-warning.nt-contract-pending-alert, .nt-addon-widget .alert.nt-contract-pending-alert, .nt-addon-widget .alert-warning.nt-contract-pending-alert { animation: none; } .nt-contract-pending-alert__cta:hover { transform: none; } } /* -------------------------------------------------------------------------- 3. Heading "CONTRATOS"/"CONTRATO" — usar tipografia .nt-section-title style -------------------------------------------------------------------------- */ .nt-addon-widget h1, .nt-addon-widget h2, .nt-addon-widget h3, .nt-addon-widget > strong:first-child, .main-body > #contrato h1, .main-body > #contrato h2, .main-body > #contrato h3, .main-body > #contrato > strong:first-child, .main-body > .MMHospedagem_Contrato_Clean h1, .main-body > .MMHospedagem_Contrato_Clean h2, .main-body > .MMHospedagem_Contrato_Clean h3 { font-family: 'Rajdhani', system-ui, sans-serif; font-weight: 700; font-size: var(--text-lg); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-1); margin: 0 0 var(--space-4) 0; padding-left: var(--space-3); border-left: 4px solid var(--accent); line-height: 1.2; } /* Subtexto descritivo (parágrafo após heading no addon) */ .nt-addon-widget > p, .main-body > #contrato > p, .main-body > .MMHospedagem_Contrato_Clean > p { color: var(--text-2); font-size: var(--text-sm); margin: 0 0 var(--space-3) 0; line-height: 1.5; } /* -------------------------------------------------------------------------- 4. Tabela — replica .nt-table do tema -------------------------------------------------------------------------- */ .nt-addon-widget table, .main-body > #contrato table, .main-body > .MMHospedagem_Contrato_Clean table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-3) 0; font-size: var(--text-sm); border: 1px solid var(--border); } .nt-addon-widget thead th, .main-body > #contrato thead th, .main-body > .MMHospedagem_Contrato_Clean thead th, .nt-addon-widget table tr:first-child th, .main-body > #contrato table tr:first-child th { background: var(--surface); color: var(--text-3); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } .nt-addon-widget tbody td, .main-body > #contrato tbody td, .main-body > .MMHospedagem_Contrato_Clean tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-1); } .nt-addon-widget tbody tr:last-child td, .main-body > #contrato tbody tr:last-child td, .main-body > .MMHospedagem_Contrato_Clean tbody tr:last-child td { border-bottom: 0; } .nt-addon-widget tbody tr:hover, .main-body > #contrato tbody tr:hover, .main-body > .MMHospedagem_Contrato_Clean tbody tr:hover { background: var(--card-hover); } /* Wrapper scroll mobile */ .nt-addon-widget, .main-body > #contrato, .main-body > .MMHospedagem_Contrato_Clean { overflow-x: auto; } /* -------------------------------------------------------------------------- 5. Status pill (.is-pending / .is-signed via mini-JS tag) -------------------------------------------------------------------------- */ .nt-addon-widget td.is-pending, .nt-addon-widget td.is-signed, .nt-addon-widget td.is-cancelled, .main-body > #contrato td.is-pending, .main-body > #contrato td.is-signed, .main-body > #contrato td.is-cancelled, .main-body > .MMHospedagem_Contrato_Clean td.is-pending, .main-body > .MMHospedagem_Contrato_Clean td.is-signed, .main-body > .MMHospedagem_Contrato_Clean td.is-cancelled { font-weight: 600; white-space: nowrap; } .nt-addon-widget td.is-pending, .main-body > #contrato td.is-pending, .main-body > .MMHospedagem_Contrato_Clean td.is-pending { color: var(--amber); } .nt-addon-widget td.is-signed, .main-body > #contrato td.is-signed, .main-body > .MMHospedagem_Contrato_Clean td.is-signed { color: var(--green); } .nt-addon-widget td.is-cancelled, .main-body > #contrato td.is-cancelled, .main-body > .MMHospedagem_Contrato_Clean td.is-cancelled { color: var(--red); } .nt-addon-widget td.is-pending::before, .nt-addon-widget td.is-signed::before, .nt-addon-widget td.is-cancelled::before, .main-body > #contrato td.is-pending::before, .main-body > #contrato td.is-signed::before, .main-body > #contrato td.is-cancelled::before, .main-body > .MMHospedagem_Contrato_Clean td.is-pending::before, .main-body > .MMHospedagem_Contrato_Clean td.is-signed::before, .main-body > .MMHospedagem_Contrato_Clean td.is-cancelled::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--space-2); vertical-align: middle; } .nt-addon-widget td.is-pending::before, .main-body > #contrato td.is-pending::before, .main-body > .MMHospedagem_Contrato_Clean td.is-pending::before { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 20%, transparent); } .nt-addon-widget td.is-signed::before, .main-body > #contrato td.is-signed::before, .main-body > .MMHospedagem_Contrato_Clean td.is-signed::before { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); } .nt-addon-widget td.is-cancelled::before, .main-body > #contrato td.is-cancelled::before, .main-body > .MMHospedagem_Contrato_Clean td.is-cancelled::before { background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 20%, transparent); } /* Botão de status nativo do addon (.botaoStatus laranja #FD7E14) */ .nt-addon-widget .MMHospedagem_Contrato_botaoStatus, .main-body > #contrato .MMHospedagem_Contrato_botaoStatus, .main-body > .MMHospedagem_Contrato_Clean .MMHospedagem_Contrato_botaoStatus { background: var(--amber); color: var(--text-1); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); display: inline-block; } /* -------------------------------------------------------------------------- 6. Links "Ver Contrato"/"Ver Contratos"/"Baixar" -------------------------------------------------------------------------- */ .nt-addon-widget a, .main-body > #contrato a, .main-body > .MMHospedagem_Contrato_Clean a { color: var(--accent-on-light); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; transition: color 0.15s ease; } .nt-addon-widget a:hover, .main-body > #contrato a:hover, .main-body > .MMHospedagem_Contrato_Clean a:hover { color: var(--accent); } .nt-addon-widget a:focus-visible, .main-body > #contrato a:focus-visible, .main-body > .MMHospedagem_Contrato_Clean a:focus-visible, .nt-addon-widget #TabelaProcurarContrato_wrapper .paginate_button:focus-visible, .nt-addon-widget #TabelaProcurarContrato_wrapper .previous:focus-visible, .nt-addon-widget #TabelaProcurarContrato_wrapper .next:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Reset cor inline emitida pelo addon */ .nt-addon-widget font[color], .nt-addon-widget a font[color], .main-body > #contrato font[color], .main-body > .MMHospedagem_Contrato_Clean font[color] { color: inherit !important; } /* -------------------------------------------------------------------------- 10. DataTables wrapper (#TabelaProcurarContrato_wrapper) -------------------------------------------------------------------------- */ .nt-addon-widget #TabelaProcurarContrato_wrapper { font-size: var(--text-sm); color: var(--text-1); } .nt-addon-widget #TabelaProcurarContrato_wrapper .dataTables_length label, .nt-addon-widget #TabelaProcurarContrato_wrapper .dataTables_filter label { color: var(--text-2); font-size: var(--text-xs); font-weight: 500; } .nt-addon-widget #TabelaProcurarContrato_wrapper .form-control { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); color: var(--text-1); min-height: 32px; } .nt-addon-widget #TabelaProcurarContrato_wrapper .form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .nt-addon-widget #TabelaProcurarContrato_wrapper .dataTables_info { background: var(--surface); border-bottom: 1px solid var(--border); color: var(--text-3); font-size: var(--text-xs); padding: var(--space-2) var(--space-4); } .nt-addon-widget #TabelaProcurarContrato_wrapper .paginate_button, .nt-addon-widget #TabelaProcurarContrato_wrapper .previous, .nt-addon-widget #TabelaProcurarContrato_wrapper .next { background: var(--surface) !important; color: var(--text-1) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; padding: var(--space-2) var(--space-3) !important; font-size: var(--text-xs) !important; transition: background 0.15s ease, border-color 0.15s ease; margin: 0 var(--space-1); } .nt-addon-widget #TabelaProcurarContrato_wrapper .paginate_button:hover { background: var(--card-hover) !important; border-color: var(--accent-border) !important; } .nt-addon-widget #TabelaProcurarContrato_wrapper .current { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; } .nt-addon-widget #TabelaProcurarContrato_wrapper .disabled { background: var(--surface) !important; color: var(--text-3) !important; opacity: 0.5; pointer-events: none; } /* -------------------------------------------------------------------------- 11. Mobile responsive -------------------------------------------------------------------------- */ @media (max-width: 768px) { .nt-addon-widget, .main-body > #contrato, .main-body > .MMHospedagem_Contrato_Clean { padding: var(--space-4); } .nt-addon-widget thead th, .nt-addon-widget tbody td, .main-body > #contrato thead th, .main-body > #contrato tbody td, .main-body > .MMHospedagem_Contrato_Clean thead th, .main-body > .MMHospedagem_Contrato_Clean tbody td { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); } } /* -------------------------------------------------------------------------- 12. Modal vanilla Bootstrap (#popupModal — real addon markup) -------------------------------------------------------------------------- addon_contratos emite #popupModal.modal.fade markup esperando Bootstrap CSS. Tema 2026 não importa bootstrap.min.css — regras abaixo + shim JS em js/addon-contratos-tag.js provê overlay equivalente via classList toggle. Triggers: $.fn.modal('show'/'hide') adiciona/remove .in OU .show class. -------------------------------------------------------------------------- */ #popupModal.modal { position: fixed; inset: 0; z-index: 9999; display: none; background: rgba(0, 0, 0, 0.55); overflow-y: auto; padding: var(--space-8) var(--space-4); } #popupModal.modal.in, #popupModal.modal.show { display: flex; align-items: flex-start; justify-content: center; } #popupModal .modal-dialog { max-width: 900px; width: 100%; margin: auto; } #popupModal .modal-content { background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); overflow: hidden; } #popupModal .modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-5); border-bottom: 1px solid var(--border); } #popupModal .modal-title { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-1); } #popupModal .modal-body { padding: var(--space-5); max-height: 70vh; overflow-y: auto; } #popupModal .modal-footer { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); } #popupModal .close, #popupModal [data-dismiss="modal"] { background: none; border: 0; font-size: var(--text-lg); line-height: 1; cursor: pointer; color: var(--text-2); padding: var(--space-2); transition: color 0.15s ease; } #popupModal .close:hover, #popupModal [data-dismiss="modal"]:hover { color: var(--text-1); } body.modal-open { overflow: hidden; } @media (max-width: 768px) { #popupModal.modal { padding: var(--space-4) var(--space-3); } #popupModal .modal-header { padding: var(--space-4); } #popupModal .modal-body { padding: var(--space-4); } #popupModal .modal-footer { padding: var(--space-3) var(--space-4); } } @media (prefers-reduced-motion: reduce) { #popupModal.modal { transition: none; } } /* -------------------------------------------------------------------------- 13. prefers-reduced-motion: kill transitions/transforms decorativos -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .nt-addon-widget a, .main-body > #contrato a, .main-body > .MMHospedagem_Contrato_Clean a, .nt-addon-widget #TabelaProcurarContrato_wrapper .paginate_button { transition: none; } }