* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
            background: linear-gradient(135deg, #0a1628 0%, #0d1f3c 40%, #162d56 70%, #1a3a6e 100%);
            background-attachment: fixed;
            min-height: 100vh;
            display: flex;
            position: relative;
            overflow-x: hidden;
        }
        body::before {
            content: none;
            position: fixed;
            top: -200px; right: -100px;
            width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(229,57,53,0.07) 0%, transparent 70%);
            pointer-events: none; z-index: 0;
        }
        body::after {
            content: none;
            position: fixed;
            bottom: -150px; left: 250px;
            width: 500px; height: 500px;
            background: radial-gradient(circle, rgba(59,130,246,0.06) 0%, transparent 70%);
            pointer-events: none; z-index: 0;
        }

        /* SIDEBAR */
        .sidebar {
            width: 315px;
            background: linear-gradient(180deg, #0d1f3c 0%, #162d56 100%);
            padding: 0;
            position: fixed;
            left: 0;
            top: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
        }

        .sidebar-header {
            padding: 28px 24px 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            position: relative;
        }

        .sidebar-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 24px;
            width: 40px;
            height: 3px;
            background: #e53935;
            border-radius: 2px;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            color: white;
        }

        .logo-icon {
            width: 48px;
            height: 48px;
            background: #e53935;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: 700;
            color: white;
            flex-shrink: 0;
        }

        .logo-text {
            font-size: 20px;
            font-weight: 800;
            letter-spacing: 1px;
        }

        .sidebar-nav {
            padding: 24px 0;
            flex: 1;
            overflow-y: auto;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE e Edge */
        }

        .sidebar-nav::-webkit-scrollbar {
            display: none; /* Chrome, Safari e Opera */
        }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px 24px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            border-left: 4px solid transparent;
        }

        .nav-item:hover {
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }

        .nav-item.active {
            background: rgba(229, 57, 53, 0.18);
            color: white;
            border-left-color: #e53935;
        }

        .nav-number {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            flex-shrink: 0;
        }

        .nav-item.active .nav-number {
            background: #e53935;
            color: white;
        }

        /* MAIN CONTENT */
        .main-content {
            flex: 1;
            margin-left: 315px;
            padding: 0;
            min-height: 100vh;
            background: transparent;
        }

        .content-wrapper {
            max-width: 900px;
            margin: 0 auto;
            padding: 60px 40px;
        }

        /* FORM SECTION */
        .form-section {
            background: rgba(255,255,255,0.985);
            border-radius: 17px;
            padding: 48px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.2);
            display: none;
            position: relative;
        }
        .form-section.active {
            display: block;
            animation: slideUp 0.35s ease;
        }
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        /* Wrapper neutro das secoes */
        .form-section-wrapper {
            position: relative;
            border-radius: 20px;
            padding: 0;
            background: transparent;
        }
        .form-section-wrapper:has(.form-section:not(.active)) { display: none; }
        @property --angle {
            syntax: "<angle>"; initial-value: 0deg; inherits: false;
        }
        .form-section-wrapper::before {
            content: none;
            position: absolute; inset: 0;
            border-radius: 20px;
            padding: 7px;
            background: conic-gradient(
                from var(--angle, 0deg),
                transparent 0deg, transparent 60deg,
                #e53935 90deg, #ff6b6b 120deg,
                #ffffff 150deg, #4a9eff 180deg,
                #1a3a6e 210deg, transparent 240deg, transparent 360deg
            );
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            animation: rotateBorder 4s linear infinite;
            pointer-events: none;
        }
        .form-section-wrapper::after {
            content: none;
            position: absolute; inset: -4px;
            border-radius: 24px;
            background: conic-gradient(
                from var(--angle, 0deg),
                transparent 0deg, transparent 80deg,
                rgba(229,57,53,0.15) 110deg,
                rgba(74,158,255,0.12) 160deg,
                transparent 200deg, transparent 360deg
            );
            animation: rotateBorder 4s linear infinite;
            filter: blur(8px);
            pointer-events: none; z-index: -1;
        }
        @keyframes rotateBorder {
            from { --angle: 0deg; }
            to   { --angle: 360deg; }
        }

        .section-title {
            font-size: 32px;
            font-weight: 700;
            color: #0d1f3c;
            margin-bottom: 8px;
            background: linear-gradient(135deg, #0d1f3c 60%, #1a3a6e 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .section-subtitle {
            font-size: 15px;
            color: #6b7280;
            margin-bottom: 40px;
        }

        /* FORM ELEMENTS */
        .form-question {
            margin-bottom: 32px;
        }

        .question-label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 12px;
        }

        .required {
            color: #ef4444;
        }

        input[type="text"],
        input[type="tel"],
        input[type="date"],
        input[type="email"],
        select {
            width: 100%;
            padding: 14px 16px;
            font-size: 15px;
            border: 1.5px solid #e2e5ea;
            border-radius: 10px;
            font-family: inherit;
            transition: all 0.2s ease;
            background: #fafbfc;
            color: #1a1a1a;
        }
        input::placeholder { color: #9ca3af; }
        input:focus, select:focus {
            outline: none;
            border-color: #1a3a6e;
            background: white;
            box-shadow: 0 0 0 3.5px rgba(13,31,60,0.1), 0 2px 8px rgba(13,31,60,0.08);
        }

        select {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230d1f3c' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            padding-right: 40px;
        }

        /* RADIO BUTTONS */
        .radio-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .radio-option {
            position: relative;
        }

        .radio-option input[type="radio"] {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

        .radio-option label {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            border: 1.5px solid #e2e5ea;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 500;
            font-size: 15px;
            color: #1a1a1a;
            transition: all 0.2s ease;
            background: #fafbfc;
        }

        .radio-option label::before {
            content: '';
            width: 20px;
            height: 20px;
            border: 2px solid #d1d5db;
            border-radius: 50%;
            margin-right: 14px;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .radio-option:hover label {
            border-color: #0d1f3c;
            background: #f9fafb;
        }

        .radio-option input:checked + label {
            border-color: #0d1f3c;
            background: white;
        }

        .radio-option input:checked + label::before {
            border-color: #0d1f3c;
            border-width: 6px;
        }

        /* CHECKBOX */
        .checkbox-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .checkbox-option {
            position: relative;
        }

        .checkbox-option input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

        .checkbox-option label {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
            font-size: 15px;
            color: #1a1a1a;
            transition: all 0.2s ease;
            background: white;
        }

        .checkbox-option label::before {
            content: '';
            width: 20px;
            height: 20px;
            border: 2px solid #d1d5db;
            border-radius: 4px;
            margin-right: 14px;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .checkbox-option:hover label {
            border-color: #0d1f3c;
            background: #f9fafb;
        }

        .checkbox-option input:checked + label {
            border-color: #0d1f3c;
            background: #f0f4ff;
        }

        .checkbox-option input:checked + label::before {
            background: #0d1f3c;
            border-color: #0d1f3c;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' stroke='white' stroke-width='2' d='M13.854 3.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3.5-3.5a.5.5 0 11.708-.708L6.5 10.293l6.646-6.647a.5.5 0 01.708 0z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
        }

        /* FILE UPLOAD */
        .file-upload {
            border: 2px dashed #d1d5db;
            border-radius: 12px;
            padding: 40px 24px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
            background: #fafafa;
        }

        .file-upload:hover {
            border-color: #1a3a6e;
            background: #f0f4ff;
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(13,31,60,0.1);
        }

        .file-upload.has-file {
            border-color: #10b981;
            border-style: solid;
            background: #d1fae5;
        }

        .file-upload input[type="file"] {
            display: none;
        }

        .file-upload-icon {
            font-size: 48px;
            margin-bottom: 12px;
            opacity: 0.4;
        }

        .file-upload.has-file .file-upload-icon {
            opacity: 1;
        }

        .file-upload-text {
            font-size: 14px;
            color: #6b7280;
            font-weight: 500;
        }

        .file-upload.has-file .file-upload-text {
            color: #059669;
            font-weight: 600;
        }

        .file-name {
            font-size: 13px;
            color: #059669;
            margin-top: 8px;
            font-weight: 600;
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: break-word;
            line-height: 1.45;
            max-width: 100%;
        }

        /* ALERT BOX */
        .alert-box {
            background: #fef3c7;
            border-left: 4px solid #f59e0b;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 24px;
        }

        .alert-box strong {
            display: block;
            font-size: 15px;
            color: #92400e;
            margin-bottom: 8px;
        }

        .alert-box ul {
            margin-left: 20px;
            color: #78350f;
        }

        .alert-box li {
            margin-bottom: 6px;
            font-size: 14px;
        }

        /* BUTTONS */
        .btn-group {
            display: flex;
            gap: 12px;
            margin-top: 40px;
            padding-top: 32px;
            border-top: 1px solid #e5e7eb;
        }

        button {
            padding: 14px 28px;
            font-size: 15px;
            font-weight: 600;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: inherit;
            flex: 1;
        }

        .btn-primary {
            background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
            color: white;
            box-shadow: 0 4px 14px rgba(229,57,53,0.35);
            letter-spacing: 0.3px;
        }
        .btn-primary:hover:not(:disabled) {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(229,57,53,0.45);
        }
        .btn-primary:active:not(:disabled) {
            transform: translateY(0px);
            box-shadow: 0 2px 8px rgba(229,57,53,0.3);
        }
        .btn-primary:disabled {
            background: #d1d5db;
            cursor: not-allowed;
            opacity: 0.6;
        }
        .btn-secondary {
            background: white;
            color: #0d1f3c;
            border: 1.5px solid #e2e5ea;
            box-shadow: 0 2px 6px rgba(0,0,0,0.06);
        }
        .btn-secondary:hover {
            border-color: #0d1f3c;
            background: #f4f6fb;
            box-shadow: 0 4px 12px rgba(13,31,60,0.12);
            transform: translateY(-1px);
        }

        /* LOADING */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .loading-overlay.active {
            display: flex;
        }

        .loading-content {
            text-align: center;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin: 0 auto 16px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .loading-content p {
            color: white;
            font-size: 16px;
            font-weight: 500;
        }

        /* ALERT */
        .alert {
            padding: 16px 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-weight: 600;
            font-size: 15px;
        }

        .alert.success {
            background: #d1fae5;
            color: #065f46;
            border-left: 4px solid #10b981;
        }

        .alert.error {
            background: #fee2e2;
            color: #991b1b;
            border-left: 4px solid #ef4444;
        }

        /* HAMBURGER BUTTON */
        .hamburger {
            display: none;
            position: static;
            background: transparent;
            border: none;
            border-radius: 8px;
            width: 40px;
            height: 40px;
            cursor: pointer;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 0;
            flex-shrink: 0;
        }
        .hamburger span {
            display: block;
            width: 20px;
            height: 2px;
            background: var(--ui-text, #172033);
            border-radius: 2px;
            transition: all 0.25s ease;
        }
        .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        .hamburger.open span:nth-child(2) { opacity: 0; }
        .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

        /* SIDEBAR OVERLAY (mobile) */
        .sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            z-index: 1000;
        }
        .sidebar-overlay.active { display: block; }

        /* RESPONSIVE */
        @media (max-width: 1024px) {
            .sidebar { width: 280px; }
            .main-content { margin-left: 280px; }
        }

        @media (max-width: 768px) {
            .hamburger { display: flex; }

            .sidebar {
                position: fixed;
                left: -315px;
                top: 0;
                width: 280px;
                height: 100vh;
                z-index: 1050;
                transition: left 0.28s ease;
            }
            .sidebar.open { left: 0; }

            .main-content { margin-left: 0; }

            .content-wrapper { padding: 72px 16px 40px; }

            .form-section { padding: 28px 18px; }

            .section-title { font-size: 22px; }

            .btn-group { flex-direction: column; }
        }
    
        /* Toasts (validação e feedback) */
        .toast-stack{
            position: fixed;
            right: 16px;
            bottom: 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 9999;
            max-width: min(420px, calc(100vw - 32px));
        }

        .toast{
            background: #111827;
            color: #f9fafb;
            border-radius: 12px;
            padding: 12px 14px;
            box-shadow: 0 8px 30px rgba(0,0,0,.25);
            display: grid;
            grid-template-columns: 10px 1fr auto;
            gap: 10px;
            align-items: start;
            animation: toastIn .18s ease-out;
        }

        .toast .bar{ background: #0d1f3c; }
        .toast.error .bar{ background: #ef4444; }
        .toast.success .bar{ background: #10b981; }
        .toast.info .bar{ background: #0d1f3c; }

        .toast .title{
            font-weight: 700;
            margin: 0 0 2px 0;
            font-size: 14px;
        }

        .toast .msg{
            margin: 0;
            font-size: 13px;
            line-height: 1.35;
            color: #e5e7eb;
        }

        .toast button{
            background: transparent;
            border: 0;
            color: #9ca3af;
            cursor: pointer;
            font-size: 16px;
            padding: 2px 6px;
            line-height: 1;
        }

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

        /* Modal de confirmação de PDF */
        .inline-warning {
            display: none;
            background: #fff7ed;
            border: 1.5px solid #fb923c;
            border-radius: 10px;
            padding: 14px 18px;
            margin-top: 10px;
            color: #7c2d12;
            font-size: 14px;
            line-height: 1.5;
        }
        .inline-warning.active {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }
        .inline-warning-icon {
            font-size: 20px;
            flex-shrink: 0;
            margin-top: 1px;
        }
        .inline-warning-body {
            flex: 1;
        }
        .inline-warning-body strong {
            display: block;
            margin-bottom: 4px;
            font-size: 14px;
        }
        .inline-warning-body button {
            margin-top: 10px;
            padding: 6px 16px;
            background: #e53935;
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
        }
        .inline-warning-body button:hover {
            background: #c62828;
        }

        .pdf-confirm-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
            z-index: 10000;
            align-items: center;
            justify-content: center;
        }
        .pdf-confirm-overlay.active {
            display: flex;
        }
        .pdf-confirm-box {
            background: white;
            border-radius: 16px;
            padding: 36px 32px;
            max-width: 460px;
            width: calc(100% - 40px);
            box-shadow: 0 20px 60px rgba(0,0,0,0.25);
            text-align: center;
        }
        .pdf-confirm-box .pdf-icon {
            font-size: 48px;
            margin-bottom: 16px;
        }
        .pdf-confirm-box h3 {
            font-size: 18px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 12px;
        }
        .pdf-confirm-box p {
            font-size: 14px;
            color: #4b5563;
            line-height: 1.6;
            margin-bottom: 24px;
        }
        .pdf-confirm-box p strong {
            color: #92400e;
        }
        .pdf-confirm-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
        }
        .pdf-confirm-actions button {
            flex: 1;
            max-width: 180px;
        }
        .btn-confirm-cancel {
            background: white;
            color: #0d1f3c;
            border: 1.5px solid #0d1f3c !important;
        }
        .btn-confirm-cancel:hover {
            background: #f0f4ff;
        }
        .btn-confirm-proceed {
            background: #f59e0b;
            color: white;
        }
        .btn-confirm-proceed:hover {
            background: #d97706;
        }

        /* ===== MODO EDIÇÃO ===== */
        /* Modal de ciencia das novas regras */
        .termo-rules-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(6, 18, 38, 0.72);
            z-index: 20000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .termo-rules-overlay.active { display: flex; }
        .termo-rules-box {
            width: min(720px, 100%);
            max-height: calc(100vh - 40px);
            overflow-y: auto;
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
            border: 1px solid rgba(13, 31, 60, 0.12);
        }
        .termo-rules-header {
            padding: 28px 30px 18px;
            border-bottom: 1px solid #e5e7eb;
        }
        .termo-rules-kicker {
            display: inline-flex;
            align-items: center;
            padding: 5px 10px;
            border-radius: 999px;
            background: #fef2f2;
            color: #b91c1c;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            margin-bottom: 12px;
        }
        .termo-rules-header h3 {
            color: #0d1f3c;
            font-size: 22px;
            font-weight: 800;
            line-height: 1.25;
            margin: 0 0 8px;
        }
        .termo-rules-header p {
            color: #64748b;
            font-size: 14px;
            line-height: 1.55;
            margin: 0;
        }
        .termo-rules-body {
            padding: 22px 30px 10px;
            color: #1f2937;
        }
        .termo-rules-body p {
            font-size: 14px;
            line-height: 1.65;
            margin-bottom: 14px;
        }
        .termo-rules-list {
            display: grid;
            gap: 10px;
            margin: 16px 0;
        }
        .termo-rules-item {
            border: 1px solid #e5e7eb;
            border-left: 4px solid #e53935;
            border-radius: 8px;
            padding: 12px 14px;
            background: #f8fafc;
            font-size: 14px;
            line-height: 1.5;
        }
        .termo-rules-item strong {
            display: block;
            color: #0d1f3c;
            margin-bottom: 4px;
        }
        .termo-rules-alert {
            border-radius: 10px;
            background: #fff7ed;
            border: 1px solid #fed7aa;
            color: #9a3412;
            padding: 14px 16px;
            font-size: 14px;
            line-height: 1.55;
            margin-top: 16px;
        }
        .termo-rules-footer {
            padding: 18px 30px 28px;
            border-top: 1px solid #e5e7eb;
            background: #f9fafb;
        }
        .termo-rules-check {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            color: #1f2937;
            font-size: 14px;
            line-height: 1.45;
            margin-bottom: 16px;
            cursor: pointer;
        }
        .termo-rules-check input {
            width: 18px;
            height: 18px;
            margin-top: 1px;
            accent-color: #e53935;
            flex-shrink: 0;
        }
        .termo-rules-actions {
            display: flex;
            justify-content: flex-end;
        }
        .termo-rules-actions .btn-primary:disabled {
            opacity: 0.45;
            cursor: not-allowed;
            box-shadow: none;
        }
        @media (max-width: 640px) {
            .termo-rules-header,
            .termo-rules-body,
            .termo-rules-footer {
                padding-left: 20px;
                padding-right: 20px;
            }
            .termo-rules-header h3 {
                font-size: 19px;
            }
            .termo-rules-actions .btn-primary {
                width: 100%;
            }
        }

        .edit-btn-sidebar {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0 16px 8px;
            padding: 12px 16px;
            background: rgba(229, 57, 53, 0.15);
            border: 1.5px solid rgba(229, 57, 53, 0.5);
            border-radius: 10px;
            color: white;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            font-family: inherit;
            width: calc(100% - 32px);
            justify-content: center;
        }
        .edit-btn-sidebar:hover {
            background: rgba(229, 57, 53, 0.3);
            border-color: #e53935;
        }
        .edit-btn-sidebar .edit-icon { font-size: 18px; }

        /* Modal de busca por ID */
        .edit-modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 12000;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }
        .edit-modal-overlay.active { display: flex; }
        .edit-modal-box {
            background: white;
            border-radius: 18px;
            padding: 36px 32px 28px;
            width: 100%;
            max-width: 480px;
            box-shadow: 0 24px 60px rgba(0,0,0,0.25);
        }
        .edit-modal-box h3 {
            font-size: 20px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 6px;
        }
        .edit-modal-box p {
            font-size: 14px;
            color: #6b7280;
            margin-bottom: 22px;
            line-height: 1.5;
        }
        .edit-modal-box input[type="text"] {
            width: 100%;
            padding: 13px 16px;
            font-size: 15px;
            border: 1.5px solid #d1d5db;
            border-radius: 8px;
            font-family: inherit;
            margin-bottom: 16px;
            transition: border-color 0.2s;
        }
        .edit-modal-box input[type="text"]:focus {
            outline: none;
            border-color: #0d1f3c;
            box-shadow: 0 0 0 3px rgba(91,95,199,0.1);
        }
        .edit-modal-actions { display: flex; gap: 10px; }
        .edit-modal-actions button { flex: 1; }

        /* Banner de modo edição no topo do formulário */
        .edit-mode-banner {
            display: none;
            background: linear-gradient(90deg, #0d1f3c, #1a3a6b);
            color: white;
            padding: 14px 20px;
            border-radius: 12px;
            margin-bottom: 24px;
            align-items: center;
            gap: 12px;
        }
        .edit-mode-banner.visible { display: flex; }
        .edit-mode-banner .banner-icon { font-size: 22px; }
        .edit-mode-banner .banner-text { flex: 1; }
        .edit-mode-banner .banner-text strong { display: block; font-size: 15px; margin-bottom: 2px; }
        .edit-mode-banner .banner-text span { font-size: 13px; opacity: 0.85; }
        .edit-mode-banner .banner-cancel {
            background: rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.4);
            color: white;
            border-radius: 8px;
            padding: 8px 14px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .edit-mode-banner .banner-cancel:hover { background: rgba(255,255,255,0.3); }

        /* Preview de documentos existentes */
        .doc-existing-preview {
            display: none;
            margin-top: 10px;
            padding: 12px 14px;
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            border-radius: 8px;
            font-size: 13px;
            color: #1e40af;
            flex-direction: column;
        }
        .doc-existing-preview.visible { display: flex; align-items: flex-start; gap: 8px; width: 100%; max-width: 100%; overflow: hidden; }
        .doc-existing-preview a {
            color: #1e40af;
            font-weight: 600;
            text-decoration: underline;
        }
        .doc-existing-preview .doc-icon { font-size: 16px; }

        /* ===== VALIDAÇÃO CPF ===== */
        input.cpf-valid   { border-color: #22c55e !important; background: #f0fdf4 !important; }
        input.cpf-invalid { border-color: #ef4444 !important; background: #fef2f2 !important; }
        .cpf-feedback { display: block; font-size: 12px; margin-top: 5px; font-weight: 500; }
        .cpf-fb-ok  { color: #16a34a; }
        .cpf-fb-err { color: #dc2626; }

        /* ===== KYC / PROVA DE VIDA ===== */
        .kyc-modal {
            position: fixed; inset: 0; z-index: 14000;
            display: flex; align-items: center; justify-content: center;
            background: rgba(0,0,0,0.88);
            opacity: 0; visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
        }
        .kyc-modal.active { opacity: 1; visibility: visible; }
        .kyc-modal-box {
            background: linear-gradient(160deg, #0d1f3c 0%, #162d56 100%);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 22px;
            width: min(460px, 96vw);
            max-height: 92vh;
            overflow-y: auto;
            box-shadow: 0 30px 80px rgba(0,0,0,0.55);
            display: flex; flex-direction: column;
        }
        .kyc-modal-header {
            padding: 26px 24px 0;
            text-align: center;
        }
        .kyc-modal-badge {
            display: inline-flex; align-items: center; gap: 6px;
            background: rgba(229,57,53,0.15);
            border: 1px solid rgba(229,57,53,0.3);
            border-radius: 20px;
            padding: 4px 12px;
            font-size: 11px; font-weight: 600;
            color: #ef5350; letter-spacing: 0.5px;
            margin-bottom: 10px;
        }
        .kyc-modal-title {
            font-size: 19px; font-weight: 700; color: #fff;
            margin-bottom: 4px;
        }
        .kyc-modal-sub {
            font-size: 13px; color: rgba(255,255,255,0.45);
            margin-bottom: 4px;
        }
        .kyc-countdown {
            display: none; align-items: center; justify-content: center; gap: 5px;
            margin-top: 6px;
            font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.45);
        }
        .kyc-countdown.visible { display: flex; }
        .kyc-countdown-val { font-variant-numeric: tabular-nums; min-width: 22px; text-align: right; }
        .kyc-countdown.urgent { color: #f87171; }
        .kyc-countdown.urgent .kyc-countdown-val { color: #f87171; }
        .kyc-modal-content {
            padding: 20px 24px 26px;
            display: flex; flex-direction: column;
            align-items: center; gap: 18px;
        }
        /* States */
        #kyc-state-consent,
        #kyc-state-loading, #kyc-state-camera,
        #kyc-state-success, #kyc-state-error {
            display: none;
            flex-direction: column; align-items: center; gap: 14px;
            width: 100%;
        }
        /* Consentimento LGPD */
        .kyc-consent-icon {
            width: 52px; height: 52px; border-radius: 50%;
            background: rgba(99,179,237,0.12);
            display: flex; align-items: center; justify-content: center;
            color: #63b3ed; flex-shrink: 0;
        }
        .kyc-consent-title {
            font-size: 1rem; font-weight: 700; color: #fff;
            text-align: center; margin: 0;
        }
        .kyc-consent-body {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px;
            padding: 14px 16px;
            width: 100%;
            display: flex; flex-direction: column; gap: 10px;
        }
        .kyc-consent-item {
            display: flex; gap: 10px; align-items: flex-start;
        }
        .kyc-consent-item svg { flex-shrink: 0; margin-top: 2px; color: #63b3ed; }
        .kyc-consent-item p { margin: 0; font-size: 0.78rem; color: rgba(255,255,255,0.78); line-height: 1.5; }
        .kyc-consent-item p strong { color: #fff; }
        .kyc-consent-policy {
            font-size: 0.72rem; color: rgba(255,255,255,0.45);
            text-align: center; line-height: 1.5; margin: 0;
        }
        .kyc-consent-btns {
            display: flex; flex-direction: column; gap: 8px; width: 100%;
        }
        .kyc-consent-accept {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            color: #fff; border: none; border-radius: 10px;
            padding: 12px; font-size: 0.88rem; font-weight: 600;
            cursor: pointer; width: 100%;
            transition: opacity 0.2s;
        }
        .kyc-consent-accept:hover { opacity: 0.88; }
        .kyc-consent-cancel {
            background: transparent; color: rgba(255,255,255,0.45);
            border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
            padding: 10px; font-size: 0.82rem; cursor: pointer; width: 100%;
            transition: color 0.2s;
        }
        .kyc-consent-cancel:hover { color: rgba(255,255,255,0.7); }
        /* Spinner */
        .kyc-spinner {
            width: 48px; height: 48px;
            border: 4px solid rgba(255,255,255,0.1);
            border-top-color: #e53935;
            border-radius: 50%;
            animation: kyc-spin 0.75s linear infinite;
        }
        @keyframes kyc-spin { to { transform: rotate(360deg); } }
        .kyc-loading-label {
            font-size: 14px; color: rgba(255,255,255,0.6);
            text-align: center;
        }
        /* Video */
        .kyc-video-wrapper {
            position: relative; width: 270px; height: 270px;
            border-radius: 50%; overflow: hidden;
            border: 3px solid rgba(255,255,255,0.12);
            background: #000;
            flex-shrink: 0;
        }
        #kyc-video {
            width: 100%; height: 100%;
            object-fit: cover;
            transform: scaleX(-1);
            display: block;
        }
        .kyc-face-ring {
            position: absolute; inset: 12px; border-radius: 50%;
            border: 2px dashed rgba(255,255,255,0.25);
            pointer-events: none;
            transition: border-color 0.4s, border-style 0.4s;
        }
        .kyc-face-ring.detected {
            border-style: solid; border-color: #22c55e;
            animation: kyc-ring-pulse 1.2s ease-in-out infinite;
        }
        @keyframes kyc-ring-pulse {
            0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
            50%      { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
        }
        /* Challenge */
        .kyc-challenge-area { text-align: center; width: 100%; }
        .kyc-challenge-icon { margin-bottom: 6px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.9); }
        .kyc-challenge-text {
            font-size: 17px; font-weight: 700; color: #fff;
            margin-bottom: 16px;
        }
        .kyc-steps { display: flex; gap: 16px; justify-content: center; }
        .kyc-step {
            display: flex; flex-direction: column; align-items: center; gap: 5px;
            font-size: 12px; color: rgba(255,255,255,0.35);
            transition: color 0.3s;
        }
        .kyc-step-dot {
            width: 28px; height: 28px; border-radius: 50%;
            background: rgba(255,255,255,0.08);
            display: flex; align-items: center; justify-content: center;
            font-size: 12px; font-weight: 700;
            transition: background 0.3s, color 0.3s;
        }
        .kyc-step.active .kyc-step-dot {
            background: #e53935; color: #fff;
            animation: kyc-spin 1.2s linear infinite;
        }
        .kyc-step.active { color: #fff; }
        .kyc-step.done .kyc-step-dot { background: #22c55e; color: #fff; }
        .kyc-step.done { color: #22c55e; }
        /* Comparação selfie + documento */
        .kyc-compare-row {
            display: flex; align-items: center; gap: 12px;
            width: 100%; justify-content: center; margin-bottom: 4px;
        }
        .kyc-compare-item {
            display: flex; flex-direction: column; align-items: center; gap: 6px;
        }
        .kyc-compare-sep { flex-shrink: 0; opacity: 0.5; }
        .kyc-compare-label {
            font-size: 11px; color: rgba(255,255,255,0.45); font-weight: 500;
            text-transform: uppercase; letter-spacing: 0.5px;
        }
        .kyc-doc-thumb {
            width: 110px; height: 110px; border-radius: 12px;
            background: rgba(255,255,255,0.06);
            border: 2px dashed rgba(255,255,255,0.2);
            display: flex; align-items: center; justify-content: center;
            overflow: hidden; transition: border-color 0.3s;
        }
        .kyc-doc-thumb img {
            width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
        }
        .kyc-doc-thumb.loaded { border-style: solid; border-color: #22c55e; }
        /* Upload button */
        .kyc-doc-upload-area { width: 100%; }
        .kyc-doc-options { display: flex; gap: 10px; width: 100%; }
        .kyc-doc-options .kyc-doc-upload-btn { flex: 1; }
        .kyc-doc-upload-btn {
            display: flex; align-items: center; justify-content: center; gap: 8px;
            width: 100%; padding: 12px 16px;
            background: rgba(255,255,255,0.07);
            border: 1.5px dashed rgba(255,255,255,0.25);
            border-radius: 10px;
            font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8);
            cursor: pointer; transition: background 0.2s, border-color 0.2s;
        }
        .kyc-doc-upload-btn:hover {
            background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.45);
        }
        .kyc-doc-upload-btn.uploaded {
            border-style: solid; border-color: #22c55e;
            color: #22c55e; background: rgba(34,197,94,0.08);
        }
        /* Doc camera area */
        .kyc-doc-cam-area { display: none; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
        #kyc-doc-video {
            width: 100%; border-radius: 10px; max-height: 200px;
            object-fit: cover; background: #000; transform: scaleX(-1);
        }
        .kyc-doc-cam-actions { display: flex; gap: 10px; width: 100%; }
        .kyc-doc-cam-actions button { flex: 1; }
        /* Acessórios tip */
        .kyc-accessories-tip {
            display: flex; align-items: flex-start; gap: 6px;
            margin-top: 10px; padding: 8px 12px;
            background: rgba(255,193,7,0.1);
            border: 1px solid rgba(255,193,7,0.25);
            border-radius: 8px;
            font-size: 12px; color: rgba(255,220,100,0.9);
            line-height: 1.45; text-align: left;
        }
        .kyc-accessories-tip svg { flex-shrink: 0; margin-top: 1px; color: #fbbf24; }
        /* Enable continue button */
        #kyc-continue-btn:not([disabled]) { opacity: 1 !important; cursor: pointer !important; }

        /* Success */
        .kyc-success-icon {
            width: 76px; height: 76px; border-radius: 50%;
            background: linear-gradient(135deg,#16a34a,#22c55e);
            display: flex; align-items: center; justify-content: center;
            font-size: 36px; color: #fff;
            animation: kyc-pop 0.45s cubic-bezier(0.34,1.56,0.64,1);
            box-shadow: 0 0 30px rgba(34,197,94,0.35);
        }
        @keyframes kyc-pop {
            0%   { transform: scale(0); }
            100% { transform: scale(1); }
        }
        .kyc-success-title {
            font-size: 17px; font-weight: 700; color: #22c55e;
        }
        .kyc-success-sub { font-size: 13px; color: rgba(255,255,255,0.45); }
        .kyc-capture-preview {
            width: 110px; height: 110px; border-radius: 50%;
            border: 3px solid #22c55e;
            display: block;
        }
        /* Error */
        .kyc-error-icon {
            width: 64px; height: 64px; border-radius: 50%;
            background: rgba(229,57,53,0.15);
            border: 2px solid rgba(229,57,53,0.4);
            display: flex; align-items: center; justify-content: center;
            font-size: 28px; color: #ef5350;
        }
        .kyc-error-msg {
            font-size: 14px; color: rgba(255,255,255,0.7);
            text-align: center; line-height: 1.5;
        }
        /* KYC Card inside section 1 (fundo branco do form-section) */
        .kyc-card {
            background: #f8fafc;
            border: 1.5px solid #e2e8f0;
            border-radius: 14px;
            padding: 16px 18px;
            margin-bottom: 28px;
            display: flex; align-items: center; gap: 14px;
            transition: border-color 0.3s, background 0.3s;
        }
        .kyc-card.done {
            border-color: #86efac;
            background: #f0fdf4;
        }
        .kyc-card-icon-wrap {
            width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
            background: #fee2e2;
            display: flex; align-items: center; justify-content: center;
            font-size: 22px;
            transition: background 0.3s;
        }
        .kyc-card.done .kyc-card-icon-wrap { background: #dcfce7; }
        .kyc-card-body { flex: 1; min-width: 0; }
        .kyc-card-title { font-size: 14px; font-weight: 600; color: #0f172a; }
        .kyc-card-desc { font-size: 12px; color: #64748b; margin-top: 2px; }
        .kyc-start-btn {
            padding: 9px 18px;
            background: #e53935; color: #fff;
            border: none; border-radius: 9px;
            font-size: 13px; font-weight: 600;
            cursor: pointer; white-space: nowrap;
            transition: background 0.2s;
        }
        .kyc-start-btn:hover { background: #c62828; }
        .kyc-badge-ok {
            padding: 6px 14px;
            background: #dcfce7;
            color: #16a34a; border-radius: 20px;
            font-size: 12px; font-weight: 600; white-space: nowrap;
        }
        @media (max-width: 480px) {
            .kyc-video-wrapper { width: 230px; height: 230px; }
            .kyc-modal-box { border-radius: 16px; }
        }
        /* ===== MODAL DE PREVIEW DE DOCUMENTO ===== */
        .doc-preview-modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.75);
            z-index: 15000;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }
        .doc-preview-modal-overlay.active { display: flex; }

        .doc-preview-modal-box {
            background: white;
            border-radius: 16px;
            width: 100%;
            max-width: 860px;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 24px 60px rgba(0,0,0,0.4);
            overflow: hidden;
        }

        .doc-preview-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid #e5e7eb;
            flex-shrink: 0;
        }
        .doc-preview-modal-header h4 {
            font-size: 15px;
            font-weight: 700;
            color: #1a1a1a;
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: calc(100% - 80px);
        }
        .doc-preview-modal-header button {
            background: #f3f4f6;
            border: none;
            border-radius: 8px;
            width: 36px;
            height: 36px;
            font-size: 18px;
            cursor: pointer;
            color: #374151;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            flex: unset;
            padding: 0;
        }
        .doc-preview-modal-header button:hover { background: #e5e7eb; }

        .doc-preview-modal-body {
            flex: 1;
            overflow: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f9fafb;
            min-height: 300px;
            position: relative;
        }

        .doc-preview-modal-body img {
            max-width: 100%;
            max-height: 75vh;
            object-fit: contain;
            border-radius: 4px;
        }

        .doc-preview-modal-body iframe {
            width: 100%;
            height: 75vh;
            border: none;
        }

        .doc-preview-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            color: #6b7280;
            font-size: 14px;
        }
        .doc-preview-loading .spinner {
            width: 36px;
            height: 36px;
            border: 3px solid #e5e7eb;
            border-top-color: #e53935;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin: 0;
        }
        .doc-preview-error {
            text-align: center;
            color: #dc2626;
            font-size: 14px;
            padding: 32px;
        }
        .doc-preview-error p { margin-bottom: 12px; }
        .doc-preview-error a {
            color: #0d1f3c;
            font-weight: 600;
            text-decoration: underline;
        }

        /* ===== MODAL CPF DUPLICADO ===== */
        .cpf-dup-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 13000;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }
        .cpf-dup-overlay.active { display: flex; }
        .cpf-dup-box {
            background: white;
            border-radius: 18px;
            padding: 36px 32px 28px;
            width: 100%;
            max-width: 480px;
            box-shadow: 0 24px 60px rgba(0,0,0,0.25);
            text-align: center;
        }
        .cpf-dup-icon { font-size: 52px; margin-bottom: 16px; }
        .cpf-dup-box h3 {
            font-size: 20px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 10px;
        }
        .cpf-dup-box p {
            font-size: 14px;
            color: #4b5563;
            line-height: 1.6;
            margin-bottom: 24px;
        }
        .cpf-dup-box p strong { color: #1a1a1a; }
        .cpf-dup-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .cpf-dup-actions button { flex: unset; width: 100%; }
        .btn-cpf-editar {
            background: #0d1f3c;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 14px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
        }
        .btn-cpf-editar:hover { background: #162d56; }
        .btn-cpf-novo {
            background: white;
            color: #6b7280;
            border: 1.5px solid #e5e7eb;
            border-radius: 8px;
            padding: 14px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            font-family: inherit;
        }
        .btn-cpf-novo:hover { border-color: #9ca3af; color: #374151; }


        /* Preview inline em edição */
        .doc-preview-inline-wrap {
            width: 100%;
        }
        .doc-preview-inline-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 8px;
            flex-wrap: wrap;
            width: 100%;
            max-width: 100%;
        }
        .doc-preview-inline-title {
            display: block;
            flex: 1 1 260px;
            min-width: 0;
            font-size: 13px;
            color: #1e40af;
            font-weight: 600;
            overflow-wrap: anywhere;
            word-break: break-word;
            line-height: 1.45;
        }
        .doc-preview-inline-title span {
            display: inline;
            font-weight: 400;
            color: #374151;
            overflow-wrap: anywhere;
            word-break: break-word;
        }
        .doc-preview-inline-action {
            font-size: 12px;
            color: #059669;
            font-weight: 600;
            text-decoration: none;
            background: #d1fae5;
            padding: 8px 10px;
            border-radius: 8px;
            white-space: normal;
            text-align: center;
            flex: 0 0 auto;
        }
        .doc-preview-inline-media,
        .doc-preview-inline-media img,
        .doc-preview-inline-media iframe {
            width: 100%;
            max-width: 100%;
        }
        .doc-preview-inline-media img {
            max-height: 340px;
            object-fit: contain;
            border-radius: 8px;
            display: block;
            border: 1px solid #e5e7eb;
            background: #fff;
        }
        .doc-preview-inline-media iframe {
            height: 340px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            display: block;
            background: #fff;
        }
        .doc-preview-inline-note {
            font-size: 12px;
            color: #6b7280;
            margin-top: 8px;
            line-height: 1.45;
        }

        /* Loading institucional */
        .loading-content {
            max-width: 520px;
            padding: 0 20px;
        }
        .loading-brand {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            font-size: 34px;
            font-weight: 900;
            font-style: italic;
            letter-spacing: 0.5px;
            margin: 10px 0 0;
            min-height: 52px;
            white-space: nowrap;
        }
        .loading-brand .brand-letter {
            opacity: 0;
            transform: translateX(-12px);
            filter: blur(4px);
            transition: opacity .45s ease, transform .45s ease, filter .45s ease;
        }
        .loading-brand .brand-letter.visible {
            opacity: 1;
            transform: translateX(0);
            filter: blur(0);
        }
        .loading-brand .blue {
            color: #1c4f86;
        }
        .loading-brand .red {
            color: #eb2336;
        }
        .loading-subtitle {
            color: rgba(255,255,255,0.92);
            font-size: 15px;
            font-weight: 600;
            margin: 12px 0 0;
            letter-spacing: .2px;
        }
        .loading-phrase {
            color: #ffffff;
            font-size: 15px;
            line-height: 1.65;
            max-width: 460px;
            margin: 22px auto 0;
            padding: 16px 18px;
            background: rgba(255,255,255,0.10);
            border: 1px solid rgba(255,255,255,0.16);
            border-radius: 14px;
            box-shadow: 0 10px 28px rgba(0,0,0,.18);
        }
        .loading-phrase strong {
            display: block;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            color: rgba(255,255,255,0.72);
            margin-bottom: 8px;
        }

        @media (max-width: 768px) {
            .doc-existing-preview {
                padding: 12px;
                overflow: hidden;
            }
            .doc-preview-inline-wrap {
                width: 100%;
                min-width: 0;
            }
            .doc-preview-inline-header {
                display: grid;
                grid-template-columns: 1fr;
                align-items: stretch;
                text-align: left;
            }
            .doc-preview-inline-title {
                width: 100%;
                min-width: 0;
                font-size: 12px;
            }
            .doc-preview-inline-action {
                width: 100%;
                text-align: center;
            }
            .doc-preview-inline-media img {
                max-height: 220px;
            }
            .doc-preview-inline-media iframe {
                height: 220px;
            }
            .loading-content {
                max-width: 100%;
                padding: 0 18px;
            }
            .loading-brand {
                font-size: 28px;
                min-height: 42px;
            }
            .loading-subtitle {
                font-size: 14px;
                margin-top: 14px;
            }
            .loading-phrase {
                font-size: 13px;
                max-width: 100%;
                margin-top: 24px;
                padding: 14px 16px;
            }
        }


        /* ===== CARTAS DE OPERAÇÃO ===== */
        .op-cards-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 16px;
        }
        .op-card {
            height: 220px;
            perspective: 1000px;
            cursor: pointer;
            user-select: none;
        }
        .op-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 16px;
        }
        .op-card.flipped .op-card-inner {
            transform: rotateY(180deg);
        }
        .op-card-front,
        .op-card-back {
            position: absolute;
            inset: 0;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.3);
            transition: box-shadow 0.2s, transform 0.2s;
            overflow: hidden;
        }
        .op-card:hover:not(.flipped) .op-card-front {
            box-shadow: 0 14px 36px rgba(0,0,0,0.4);
            transform: translateY(-4px);
        }
        .op-card-back { transform: rotateY(180deg); }

        /* Cores */
        .op-front-shopee  { background: linear-gradient(145deg, #f97316 0%, #ea580c 60%, #c2410c 100%); }
        .op-back-shopee   { background: linear-gradient(145deg, #fb923c 0%, #f97316 60%, #ea580c 100%); }
        .op-front-amazon  { background: linear-gradient(145deg, #1d4ed8 0%, #1e40af 60%, #1e3a8a 100%); }
        .op-back-amazon   { background: linear-gradient(145deg, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%); }
        .op-front-heineken { background: linear-gradient(145deg, #16a34a 0%, #15803d 60%, #166534 100%); }
        .op-back-heineken  { background: linear-gradient(145deg, #22c55e 0%, #16a34a 60%, #15803d 100%); }
        /* O amarelo do Mercado Livre. Texto escuro nestes dois cartões (ver .op-front-meli abaixo):
           o branco das outras operações some em cima do amarelo. */
        .op-front-meli    { background: linear-gradient(145deg, #ffe600 0%, #f5d800 60%, #d9bf00 100%); }
        .op-back-meli     { background: linear-gradient(145deg, #fff159 0%, #ffe600 60%, #f5d800 100%); }
        .op-front-meli .op-card-name,
        .op-front-meli .op-card-hint,
        .op-back-meli .op-card-selected-label { color: #2d3277; text-shadow: none; }

        .op-card-front {
            padding: 0;
            overflow: hidden;
        }
        .op-card-front::after { display: none; }
        .op-card-media { display: none; }

        .op-card-front-content {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            padding: 22px 20px 20px;
            text-align: left;
        }
        .op-card-bottom { width: 100%; }
        .op-card-name { font-size: 17px; font-weight: 800; color: white; letter-spacing: 1.2px; text-shadow: 0 2px 8px rgba(0,0,0,0.25); display: block; }
        .op-card-hint { font-size: 11px; color: rgba(255,255,255,0.78); margin-top: 5px; display: block; }
        .op-check-icon { font-size: 50px; color: white; margin-bottom: 6px; text-shadow: 0 4px 12px rgba(0,0,0,0.3); }
        .op-card-selected-label { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.95); letter-spacing: 0.5px; }

        /* ── Confetes (Shopee) ── */
        .confete {
            position: absolute;
            width: 7px; height: 10px;
            border-radius: 2px;
            opacity: 0;
            pointer-events: none;
        }
        .op-card.flipped .confete { animation: confeteFall 2.2s ease-out forwards; }
        @keyframes confeteFall {
            0%   { opacity: 1;   transform: translateY(0)    rotate(0deg)   scale(1); }
            60%  { opacity: 1;   transform: translateY(-70px) rotate(360deg) scale(0.9); }
            100% { opacity: 0;   transform: translateY(-120px) rotate(600deg) scale(0.4); }
        }

        /* ── Sorriso Amazon: desenha, brilha e some ── */
        .amazon-smile-anim {
            width: 110px;
            height: 46px;
            margin-bottom: 4px;
        }
        .smile-path, .smile-arrow {
            stroke-dasharray: 200;
            stroke-dashoffset: 200;
            opacity: 0;
        }
        .op-card.flipped .smile-path {
            animation: drawFadeSmile 2.2s cubic-bezier(0.4,0,0.2,1) 0.1s forwards;
        }
        .op-card.flipped .smile-arrow {
            animation: drawFadeSmile 1.2s cubic-bezier(0.4,0,0.2,1) 0.65s forwards;
        }
        @keyframes drawFadeSmile {
            0%   { stroke-dashoffset: 200; opacity: 0; filter: blur(0px); }
            35%  { stroke-dashoffset: 0;   opacity: 1; filter: blur(0px); }
            65%  { stroke-dashoffset: 0;   opacity: 1; filter: blur(1px) drop-shadow(0 0 6px white); }
            100% { stroke-dashoffset: 0;   opacity: 0; filter: blur(4px) drop-shadow(0 0 14px white); }
        }

        /* ── Espuma transbordando (Heineken) ── */
        .foam-bubble {
            position: absolute;
            border-radius: 50%;
            background: rgba(255,255,255,0.85);
            opacity: 0;
            pointer-events: none;
        }
        .op-card.flipped .foam-bubble { animation: foamRise 2.4s ease-out forwards; }
        @keyframes foamRise {
            0%   { opacity: 0.9; transform: translateY(0)    scale(1); }
            55%  { opacity: 0.85; transform: translateY(-45px) scale(1.4); }
            100% { opacity: 0;   transform: translateY(-90px) scale(2.2); }
        }

        @media (max-width: 640px) {
            .op-cards-grid { grid-template-columns: 1fr; gap: 14px; }
            .op-card { height: 180px; }
            .op-card-name { font-size: 18px; }
            .op-card-hint { font-size: 12px; }
        }

        /* Ajuste visual profissional: selecao sem flip e sem efeitos ludicos */
        .op-card {
            height: 168px;
            perspective: none;
        }
        .op-card-inner,
        .op-card.flipped .op-card-inner {
            transform: none;
            transform-style: flat;
            transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease;
        }
        .op-card-front,
        .op-card-back {
            border-radius: 10px;
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
        }
        .op-card-front {
            border: 1px solid rgba(255,255,255,0.16);
        }
        .op-card:hover:not(.flipped) .op-card-front {
            transform: translateY(-2px);
            box-shadow: 0 10px 26px rgba(15, 23, 42, 0.2);
        }
        .op-card-back {
            transform: none;
            opacity: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 28% 36%, rgba(255,255,255,.3), transparent 0 8%, transparent 14%),
                radial-gradient(circle at 72% 66%, rgba(255,255,255,.22), transparent 0 7%, transparent 13%),
                linear-gradient(145deg, rgba(255,255,255,.92), rgba(248,250,252,.94));
            border: 1.5px solid #1f2937;
            color: #0f172a;
        }
        .op-card.flipped .op-card-back {
            opacity: 1;
            animation: opDissolveIn .34s ease-out;
        }
        .op-card.flipped .op-card-front {
            filter: saturate(.72) brightness(.9);
        }
        .op-card.flipped .op-card-inner {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(15,23,42,.18);
        }
        .confete,
        .foam-bubble,
        .amazon-smile-anim {
            display: none !important;
        }
        .op-card-back .op-check-icon {
            width: 44px;
            height: 44px;
            margin-bottom: 12px;
            border-radius: 999px;
            background: #0d1f3c;
            font-size: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: none;
            text-shadow: none;
        }
        .op-card-back .op-check-icon::before {
            content: '';
            width: 20px;
            height: 20px;
            background: #fff;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
        }
        .op-card-back .op-card-selected-label {
            color: #0f172a;
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .08em;
        }
        .op-card-front-content > svg {
            display: none;
        }
        .op-card-front-content::before {
            content: '';
            width: 62px;
            height: 62px;
            border-radius: 16px;
            background: rgba(255,255,255,0.96);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #111827;
            font-size: 26px;
            font-weight: 900;
            letter-spacing: -.04em;
            box-shadow: 0 12px 28px rgba(15,23,42,.16);
        }
        .op-front-shopee .op-card-front-content::before {
            content: 'S';
            color: #ee4d2d;
            font-size: 33px;
            font-weight: 950;
            font-family: Inter, Arial, sans-serif;
        }
        .op-front-amazon .op-card-front-content::before {
            content: 'a';
            color: #111827;
            font-size: 42px;
            font-weight: 900;
            font-family: Georgia, serif;
            padding-bottom: 8px;
            box-shadow:
                0 12px 28px rgba(15,23,42,.16),
                inset 0 -7px 0 #ffb000;
        }
        /* O selo de cada operação é ESTE pseudo-elemento, não o <svg> do HTML — aquele está
           `display:none` logo acima, e serve só de referência de quem vier ler a marcação.
           Sem esta regra o cartão do Mercado Livre desenha o quadrado branco VAZIO.

           LETRA, e não emoji: os três vizinhos usam 'S', 'a' e '★', que herdam `color` e saem
           iguais em todo aparelho. Emoji não herda cor e é desenhado pelo sistema — Android,
           iPhone e Windows entregam três apertos de mão diferentes, e este formulário é
           preenchido no celular do motorista. */
        .op-front-meli .op-card-front-content::before {
            content: 'M';
            color: #2d3277;
            font-size: 33px;
            font-weight: 950;
            font-family: Inter, Arial, sans-serif;
            box-shadow:
                0 12px 28px rgba(15,23,42,.16),
                inset 0 -7px 0 #ffe600;
        }
        .op-front-heineken .op-card-front-content::before {
            content: '★';
            color: #d71920;
            font-size: 34px;
            text-shadow: 0 1px 0 #fff;
        }
        .op-card-name {
            text-shadow: none;
            letter-spacing: .02em;
        }
        .op-card-hint {
            color: rgba(255,255,255,0.86);
            font-weight: 600;
        }
        .op-card-back {
            display: none !important;
        }
        .op-card.flipped .op-card-front {
            filter: none;
            border-color: rgba(255,255,255,.78);
            box-shadow:
                0 14px 32px rgba(15,23,42,.18),
                0 0 0 3px rgba(255,255,255,.86),
                0 0 0 5px rgba(18,128,92,.42);
            transform: translateY(-3px);
        }
        .op-card.flipped .op-card-front::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(120deg, transparent 0 36%, rgba(255,255,255,.22) 44%, transparent 52%),
                radial-gradient(circle at 82% 22%, rgba(255,255,255,.18), transparent 0 18%, transparent 32%);
            animation: opSelectedSweep .7s ease-out both;
            pointer-events: none;
            z-index: 1;
        }
        .op-card.flipped .op-card-front::after {
            content: '';
            position: absolute;
            top: 16px;
            right: 16px;
            width: 34px;
            height: 34px;
            border-radius: 999px;
            background: rgba(255,255,255,.96);
            box-shadow: 0 10px 24px rgba(15,23,42,.2);
            z-index: 3;
        }
        .op-card.flipped .op-card-front-content::after {
            content: '';
            position: absolute;
            top: 26px;
            right: 25px;
            width: 16px;
            height: 16px;
            background: #12805c;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
            z-index: 4;
            animation: opCheckIn .28s cubic-bezier(.2,1.4,.5,1) both;
        }
        .op-card.flipped .op-card-name::after {
            content: ' selecionada';
            display: block;
            margin-top: 5px;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: rgba(255,255,255,.88);
        }
        .op-card.flipped .op-card-front::before,
        .op-card.flipped .op-card-front::after,
        .op-card.flipped .op-card-front-content::after {
            content: none !important;
            display: none !important;
        }
        .op-card.flipped .op-card-front {
            overflow: hidden;
        }
        .op-card.flipped .op-card-front-content {
            opacity: 0;
            transform: translateY(8px) scale(.96);
            transition: opacity .18s ease, transform .18s ease;
        }
        .op-selection-fx {
            position: absolute;
            inset: 0;
            z-index: 8;
            pointer-events: none;
            opacity: 0;
        }
        .op-card.flipped .op-selection-fx {
            opacity: 1;
        }
        .op-card-front-content {
            z-index: 4;
        }

        /* Amazon: avião decolando */
        .fx-amazon {
            background:
                linear-gradient(180deg, rgba(8,47,73,.12), rgba(37,99,235,.1)),
                radial-gradient(circle at 76% 24%, rgba(255,255,255,.2), transparent 0 26%, transparent 40%);
        }
        .fx-amazon::after,
        .fx-heineken::after,
        .fx-meli::after,
        .fx-shopee::after {
            position: absolute;
            left: 18px;
            bottom: 16px;
            z-index: 5;
            color: #fff;
            font-size: 12px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
            text-shadow: 0 2px 8px rgba(15,23,42,.28);
            opacity: 0;
            transform: translateY(8px);
        }
        .fx-amazon::after { content: 'Amazon selecionada'; }
        .fx-heineken::after { content: 'Heineken selecionada'; }
        /* Sobrescreve a cor branca da regra acima: em cima do amarelo ela nao se le. */
        .fx-meli::after { content: 'Mercado Livre selecionada'; color: #2d3277; text-shadow: none; }
        .fx-shopee::after { content: 'Shopee selecionada'; }
        .op-card.flipped .fx-amazon::after {
            animation: selectedTextIn .32s ease-out 1.35s forwards;
        }
        .op-card.flipped .fx-heineken::after {
            animation: selectedTextIn .32s ease-out 1.15s forwards;
        }
        .op-card.flipped .fx-meli::after {
            animation: selectedTextIn .32s ease-out 1.15s forwards;
        }
        .op-card.flipped .fx-shopee::after {
            animation: selectedTextIn .32s ease-out 1.05s forwards;
        }
        .fx-runway {
            position: absolute;
            left: 24px;
            right: 18px;
            bottom: 48px;
            height: 3px;
            background: repeating-linear-gradient(90deg, rgba(255,255,255,.75) 0 34px, transparent 34px 54px);
            transform: rotate(-5deg);
            transform-origin: left center;
            opacity: 0;
        }
        .fx-cloud {
            position: absolute;
            width: 46px;
            height: 16px;
            border-radius: 999px;
            background: rgba(255,255,255,.42);
            filter: blur(.2px);
            opacity: 0;
        }
        .fx-cloud::before,
        .fx-cloud::after {
            content: '';
            position: absolute;
            bottom: 4px;
            border-radius: 50%;
            background: inherit;
        }
        .fx-cloud::before {
            left: 7px;
            width: 18px;
            height: 18px;
        }
        .fx-cloud::after {
            right: 8px;
            width: 14px;
            height: 14px;
        }
        .fx-cloud.cloud-a { left: 92px; top: 26px; }
        .fx-cloud.cloud-b { right: 22px; top: 54px; transform: scale(.78); }
        .fx-plane {
            position: absolute;
            left: 22px;
            bottom: 60px;
            width: 70px;
            height: 18px;
            border-radius: 90% 18% 25% 90%;
            background: #ffffff;
            transform-origin: center;
            opacity: 0;
            box-shadow: 0 8px 18px rgba(15,23,42,.26);
        }
        .fx-plane::before {
            content: '';
            position: absolute;
            left: 28px;
            top: -20px;
            width: 24px;
            height: 28px;
            border-radius: 5px 18px 3px 6px;
            background: #ffffff;
            transform: skewX(-32deg) rotate(-2deg);
            transform-origin: bottom left;
        }
        .fx-plane::after {
            content: '';
            position: absolute;
            left: 30px;
            bottom: -17px;
            width: 28px;
            height: 22px;
            border-radius: 6px 4px 16px 4px;
            background: #dbeafe;
            transform: skewX(35deg);
            transform-origin: top left;
        }
        .fx-plane i {
            position: absolute;
            left: 1px;
            top: -13px;
            width: 16px;
            height: 22px;
            border-radius: 3px 14px 3px 3px;
            background: #ffffff;
            transform: skewX(15deg);
        }
        .fx-plane b {
            position: absolute;
            right: 8px;
            top: 5px;
            width: 18px;
            height: 5px;
            border-radius: 999px;
            background: #f59e0b;
        }
        .op-card.flipped .fx-runway {
            animation: runwayPass 1.15s linear forwards;
        }
        .op-card.flipped .fx-plane {
            animation: planeTakeoff 1.55s cubic-bezier(.18,.72,.28,1) forwards;
        }
        .op-card.flipped .fx-cloud {
            animation: cloudReveal 1.55s linear forwards;
        }
        .op-card.flipped .fx-cloud.cloud-b {
            animation-delay: .25s;
        }

        /* Heineken: campo enchendo e transbordando */
        .fx-beer-fill {
            position: absolute;
            left: -14%;
            right: -14%;
            bottom: -14px;
            height: 0;
            background:
                linear-gradient(105deg, transparent 0 18%, rgba(255,255,255,.18) 18% 20%, transparent 20% 62%, rgba(255,255,255,.1) 62% 64%, transparent 64%),
                linear-gradient(180deg, #f8d660 0%, #e7b52c 48%, #d59212 100%);
            border-radius: 54% 46% 0 0 / 22px 28px 0 0;
            opacity: .96;
            box-shadow: inset 0 14px 24px rgba(255,255,255,.14);
        }
        .fx-beer-fill::before,
        .fx-beer-fill::after {
            content: '';
            position: absolute;
            left: -6%;
            right: -6%;
            top: -15px;
            height: 28px;
            border-radius: 46% 54% 50% 50%;
            background: linear-gradient(180deg, rgba(255,229,120,.95), rgba(228,171,35,.72));
            transform: translateX(-18px) rotate(-1deg);
        }
        .fx-beer-fill::after {
            top: -9px;
            height: 22px;
            opacity: .72;
            background: linear-gradient(180deg, rgba(255,240,151,.5), rgba(204,134,11,.32));
            transform: translateX(30px) rotate(1deg);
        }
        .fx-beer-bubble {
            position: absolute;
            bottom: 18px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            border: 1.5px solid rgba(255,255,255,.58);
            background: rgba(255,255,255,.10);
            opacity: 0;
            z-index: 2;
        }
        .fx-beer-bubble.bubble-a {
            left: 58px;
            width: 6px;
            height: 6px;
        }
        .fx-beer-bubble.bubble-b {
            left: 124px;
            bottom: 12px;
            width: 9px;
            height: 9px;
        }
        .fx-beer-bubble.bubble-c {
            right: 58px;
            bottom: 20px;
            width: 5px;
            height: 5px;
        }
        .op-card.flipped .fx-beer-fill {
            animation: beerRise 1.25s cubic-bezier(.18,.82,.24,1) forwards;
        }
        .op-card.flipped .fx-beer-bubble {
            animation: beerBubbleRise 1.15s ease-out .35s forwards;
        }
        .op-card.flipped .fx-beer-bubble.bubble-b {
            animation-delay: .5s;
        }
        .op-card.flipped .fx-beer-bubble.bubble-c {
            animation-delay: .68s;
        }

        /* Shopee: caixas se empilhando */
        .fx-shopee {
            background:
                radial-gradient(circle at 82% 26%, rgba(255,255,255,.18), transparent 0 20%, transparent 34%),
                linear-gradient(180deg, rgba(255,255,255,.06), rgba(124,45,18,.08));
        }
        .fx-shopee-route {
            display: none;
        }
        .fx-shopee-box {
            position: absolute;
            left: 50%;
            top: -48px;
            width: 54px;
            height: 42px;
            border-radius: 5px;
            background:
                linear-gradient(135deg, rgba(255,255,255,.28) 0 18%, transparent 18%),
                linear-gradient(180deg, #fed7aa, #fb923c);
            border: 2px solid #ffedd5;
            box-shadow: 0 12px 20px rgba(15,23,42,.22);
            opacity: 0;
            transform: translateX(-50%) skewY(-2deg);
        }
        .fx-box-main { z-index: 3; }
        .fx-box-left { z-index: 2; }
        .fx-box-right { z-index: 1; }
        .fx-shopee-box::before,
        .fx-shopee-box::after {
            content: '';
            position: absolute;
            background: #f97316;
        }
        .fx-shopee-box::before {
            left: 8px;
            right: 8px;
            top: -9px;
            height: 9px;
            border-radius: 4px 4px 0 0;
            background: #ffedd5;
            transform: skewX(-28deg);
            transform-origin: bottom left;
        }
        .fx-shopee-box::after {
            right: -10px;
            top: 4px;
            width: 10px;
            height: 34px;
            border-radius: 0 5px 5px 0;
            background: #ea580c;
            transform: skewY(-32deg);
            transform-origin: left top;
        }
        .fx-shopee-box i {
            position: absolute;
            left: 50%;
            top: 0;
            width: 3px;
            height: 100%;
            background: rgba(255,255,255,.62);
            transform: translateX(-50%);
        }
        .fx-shopee-box.fx-box-left {
            background:
                linear-gradient(135deg, rgba(255,255,255,.3) 0 18%, transparent 18%),
                linear-gradient(180deg, #fff7ed, #fdba74);
        }
        .fx-shopee-box.fx-box-right {
            background:
                linear-gradient(135deg, rgba(255,255,255,.26) 0 18%, transparent 18%),
                linear-gradient(180deg, #fed7aa, #f97316);
        }
        .op-card.flipped .fx-box-main {
            animation: boxStackMain 1.05s cubic-bezier(.2,.78,.22,1) forwards;
        }
        .op-card.flipped .fx-box-left {
            animation: boxStackLeft 1.05s cubic-bezier(.2,.78,.22,1) .18s forwards;
        }
        .op-card.flipped .fx-box-right {
            animation: boxStackRight 1.05s cubic-bezier(.2,.78,.22,1) .34s forwards;
        }

        /* ── Mercado Livre: as nuvens ─────────────────────────────────────────
           SVG, e não formas de CSS: a silhueta de nuvem é feita de curvas, e uma curva desenhada
           com `border-radius` em três divs sobrepostas nunca fecha direito — a primeira versão
           deste efeito lia como uma mancha branca. O <svg> aqui é VISÍVEL, ao contrário do que
           está no .op-card-front-content (aquele é o selo, e continua display:none). */
        .fx-meli-sky {
            position: absolute;
            inset: 0;
            overflow: hidden;
            background:
                radial-gradient(ellipse 120% 80% at 50% 118%, rgba(255,255,255,.4), transparent 62%),
                linear-gradient(180deg, rgba(255,255,255,.14), rgba(45,50,119,.07));
        }
        .fx-meli-cloud {
            position: absolute;
            opacity: 0;
            /* A sombra vai no filtro, e não em box-shadow: o elemento é o retângulo do SVG, e a
               sombra da caixa desenharia um bloco em volta da nuvem em vez de segui-la. */
            filter: drop-shadow(0 8px 14px rgba(45,50,119,.18));
        }
        .fx-meli-cloud svg { display: block; }
        /* Partidas diferentes: as três viajam a MESMA distância (o keyframe é um só), então é o
           ponto de saída que decide onde cada uma repousa. Com o mesmo `left` elas terminavam
           empilhadas no mesmo lugar, e o efeito virava uma nuvem só e gorda. */
        .fx-cloud-a { left: -46%; top: 24%; width: 104px; }
        .fx-cloud-b { left: -18%; top: 54%; width: 72px; }
        .fx-cloud-c { left: -64%; top: 11%; width: 54px; }
        /* Ritmos diferentes de propósito: três nuvens no mesmo passo viram uma faixa só. */
        .op-card.flipped .fx-cloud-a {
            animation: meliCloudDrift 1.3s cubic-bezier(.24,.7,.28,1) .04s forwards;
        }
        .op-card.flipped .fx-cloud-b {
            animation: meliCloudDrift 1.6s cubic-bezier(.24,.7,.28,1) .2s forwards;
        }
        .op-card.flipped .fx-cloud-c {
            animation: meliCloudDrift 1.1s cubic-bezier(.24,.7,.28,1) .34s forwards;
        }

        @keyframes runwayPass {
            0% { opacity: 0; transform: rotate(-5deg) translateX(62px); }
            18% { opacity: 1; }
            82% { opacity: 1; }
            100% { opacity: 0; transform: rotate(-5deg) translateX(-82px); }
        }
        @keyframes planeTakeoff {
            0% { opacity: 0; transform: translate(0, 22px) rotate(0deg) scale(.88); }
            14% { opacity: 1; }
            64% { opacity: 1; transform: translate(78px, -28px) rotate(-13deg) scale(1.04); }
            100% { opacity: 1; transform: translate(118px, -48px) rotate(-14deg) scale(.9); }
        }
        @keyframes cloudReveal {
            0% { opacity: 0; transform: translateX(38px) scale(.86); }
            22% { opacity: .72; }
            72% { opacity: .62; }
            100% { opacity: .48; transform: translateX(-18px) scale(.96); }
        }
        @keyframes beerRise {
            0% { height: 0; border-radius: 46% 54% 0 0 / 18px 18px 0 0; }
            46% { height: 74%; border-radius: 56% 44% 0 0 / 24px 18px 0 0; }
            72% { height: 102%; border-radius: 42% 58% 0 0 / 18px 24px 0 0; }
            100% { height: 96%; border-radius: 48% 52% 0 0 / 18px 22px 0 0; }
        }
        @keyframes beerBubbleRise {
            0% { opacity: 0; transform: translateY(18px) scale(.72); }
            24% { opacity: .72; }
            78% { opacity: .58; }
            100% { opacity: .34; transform: translateY(-64px) scale(1.08); }
        }
        @keyframes routeIn {
            from { opacity: 0; transform: scaleX(.2); transform-origin: left; }
            to { opacity: .8; transform: scaleX(1); transform-origin: left; }
        }
        @keyframes boxStackMain {
            0% { opacity: 0; transform: translate(-50%, -12px) skewY(-2deg) scale(.86) rotate(-3deg); }
            18% { opacity: 1; }
            52% { opacity: 1; transform: translate(-50%, 78px) skewY(-2deg) scale(1) rotate(0deg); }
            100% { opacity: 1; transform: translate(-50%, 78px) skewY(-2deg) scale(1) rotate(0deg); }
        }
        @keyframes boxStackLeft {
            0% { opacity: 0; transform: translate(calc(-50% - 42px), -120px) skewY(-2deg) rotate(-12deg); }
            20% { opacity: 1; }
            58% { opacity: 1; transform: translate(calc(-50% - 42px), 76px) skewY(-2deg) rotate(-4deg); }
            100% { opacity: 1; transform: translate(calc(-50% - 42px), 76px) skewY(-2deg) rotate(-4deg); }
        }
        @keyframes boxStackRight {
            0% { opacity: 0; transform: translate(calc(-50% + 42px), -110px) skewY(-2deg) rotate(14deg); }
            22% { opacity: 1; }
            60% { opacity: 1; transform: translate(calc(-50% + 42px), 48px) skewY(-2deg) rotate(5deg); }
            100% { opacity: 1; transform: translate(calc(-50% + 42px), 48px) skewY(-2deg) rotate(5deg); }
        }
        /* Entra pela esquerda, cruza o cartão e sai pela direita — repousando visível no fim,
           porque o cartão fica selecionado: sumir no fim deixaria o cartão vazio. */
        @keyframes meliCloudDrift {
            0%   { opacity: 0; transform: translateX(0) scale(.92); }
            22%  { opacity: .96; }
            100% { opacity: .96; transform: translateX(210px) scale(1); }
        }
        @keyframes selectedTextIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes opSelectedSweep {
            from { transform: translateX(-70%); opacity: 0; }
            35% { opacity: 1; }
            to { transform: translateX(70%); opacity: 0; }
        }
        @keyframes opCheckIn {
            from { transform: scale(.55); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        @keyframes opDissolveIn {
            from { opacity: 0; filter: blur(10px); transform: scale(.985); }
            to { opacity: 1; filter: blur(0); transform: scale(1); }
        }

        /* Iconografia SVG via CSS para substituir emojis fixos */
        .file-upload-icon,
        .pdf-confirm-box .pdf-icon,
        .cpf-dup-icon,
        .doc-existing-preview .doc-icon {
            font-size: 0 !important;
            line-height: 0;
        }
        .file-upload-icon::before,
        .pdf-confirm-box .pdf-icon::before,
        .cpf-dup-icon::before,
        .doc-existing-preview .doc-icon::before {
            content: '';
            display: inline-block;
            width: 38px;
            height: 38px;
            background: #64748b;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/svg%3E") center / contain no-repeat;
        }
        .pdf-confirm-box .pdf-icon::before,
        .cpf-dup-icon::before {
            width: 46px;
            height: 46px;
            background: #b45309;
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
        }

        /* ================================================================
           REDESIGN VISUAL — PORTAL TRANSÁGIL
           ================================================================ */

        /* TOP HEADER BAR */
        .portal-topbar {
            position: fixed;
            top: 0; left: 0; right: 0;
            height: 52px;
            background: #05101f;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px 0 calc(315px + 24px);
            z-index: 995;
            box-shadow: 0 2px 20px rgba(0,0,0,0.5);
        }
        .portal-topbar-breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .portal-topbar-breadcrumb-portal {
            font-size: 12px;
            font-weight: 500;
            color: rgba(255,255,255,0.35);
        }
        .portal-topbar-breadcrumb-sep {
            color: rgba(255,255,255,0.16);
            font-size: 13px;
        }
        .portal-topbar-breadcrumb-page {
            font-size: 13px;
            font-weight: 700;
            color: rgba(255,255,255,0.88);
            letter-spacing: 0.1px;
        }
        .portal-topbar-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .portal-topbar-secure {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            font-weight: 600;
            color: #10b981;
            letter-spacing: 0.2px;
        }
        .portal-topbar-build {
            font-size: 10px;
            color: rgba(255,255,255,0.18);
            font-weight: 500;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        /* Deslocar sidebar e conteúdo para baixo do header */
        .sidebar {
            top: 52px !important;
            height: calc(100vh - 52px) !important;
        }
        .main-content {
            padding-top: 52px !important;
        }
        .content-wrapper {
            padding: 36px 40px 60px !important;
        }
        .hamburger:hover {
            background: rgba(23,32,51,0.07);
        }

        /* NAV STEP STATUS DOTS */
        .nav-step-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: rgba(255,255,255,0.16);
            flex-shrink: 0;
            margin-left: auto;
            transition: all 0.3s ease;
        }
        .nav-item.completed .nav-step-dot {
            background: #10b981;
            box-shadow: 0 0 8px rgba(16,185,129,0.5);
        }
        .nav-item.active .nav-step-dot {
            background: #e53935;
            box-shadow: 0 0 8px rgba(229,57,53,0.5);
        }
        .nav-item.completed {
            color: rgba(255,255,255,0.78);
        }
        .nav-item.completed .nav-number {
            background: #10b981;
            position: relative;
            font-size: 0;
            color: transparent;
        }
        .nav-item.completed .nav-number::after {
            content: '';
            position: absolute;
            inset: 0;
            margin: auto;
            width: 14px;
            height: 14px;
            background: white;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
        }

        /* HERO INTRO (Seção 1) */
        .hero-intro {
            margin-bottom: 32px;
            padding-bottom: 28px;
            border-bottom: 1.5px solid #f0f0f4;
        }
        .hero-intro-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 4px 12px;
            background: #0d1f3c;
            color: rgba(255,255,255,0.78);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
            border-radius: 99px;
            margin-bottom: 14px;
        }
        .hero-intro-eyebrow-dot {
            width: 5px;
            height: 5px;
            background: #e53935;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .hero-intro-heading {
            font-size: 26px;
            font-weight: 800;
            color: #0d1f3c;
            line-height: 1.18;
            margin-bottom: 8px;
            letter-spacing: -0.3px;
        }
        .hero-intro-lead {
            font-size: 14px;
            color: #6b7280;
            line-height: 1.55;
            margin-bottom: 22px;
        }
        .hero-cards-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        .hero-info-card {
            background: #f8fafc;
            border: 1px solid #e8ecf2;
            border-radius: 10px;
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 7px;
            transition: border-color .2s, box-shadow .2s;
        }
        .hero-info-card:hover {
            border-color: #c9d4e0;
            box-shadow: 0 3px 12px rgba(0,0,0,0.06);
        }
        .hero-info-card-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .hero-info-card-icon.tg-green  { background: #dcfce7; }
        .hero-info-card-icon.tg-blue   { background: #dbeafe; }
        .hero-info-card-icon.tg-amber  { background: #fef3c7; }
        .hero-info-card-title {
            font-size: 12px;
            font-weight: 700;
            color: #1f2937;
            line-height: 1.3;
        }
        .hero-info-card-body {
            font-size: 11px;
            color: #9ca3af;
            line-height: 1.45;
        }

        /* SECTION STEP BADGE */
        .section-step-tag {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 3px 10px 3px 4px;
            background: #f1f5f9;
            border: 1px solid #e2e8f0;
            border-radius: 99px;
            margin-bottom: 10px;
        }
        .section-step-tag-num {
            width: 22px;
            height: 22px;
            background: #0d1f3c;
            border-radius: 50%;
            font-size: 11px;
            font-weight: 700;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .section-step-tag-label {
            font-size: 11px;
            font-weight: 600;
            color: #64748b;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        /* REQUIREMENTS: VISUAL CHECKLIST CARD */
        .req-vcard {
            background: #f8fafc;
            border: 1.5px solid #e2e8f0;
            border-radius: 14px;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .req-vcard-head {
            padding: 14px 18px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid #e2e8f0;
            background: white;
        }
        .req-vcard-icon {
            width: 38px;
            height: 38px;
            border-radius: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .req-vcard-icon.shopee   { background: #fff7ed; }
        .req-vcard-icon.amazon   { background: #fffbeb; }
        .req-vcard-icon.heineken { background: #f0fdf4; }
        .req-vcard-heading { font-size: 14px; font-weight: 700; color: #0f172a; line-height: 1.3; }
        .req-vcard-sub     { font-size: 12px; color: #64748b; margin-top: 2px; line-height: 1.3; }
        .req-vcard-list {
            padding: 14px 18px;
            display: flex;
            flex-direction: column;
            gap: 9px;
        }
        .req-vcard-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 13px;
            color: #1e293b;
            line-height: 1.5;
        }
        .req-vcard-tick {
            width: 20px;
            height: 20px;
            background: #dcfce7;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 1px;
        }
        .req-vcard-warn {
            margin: 0 18px 16px;
            background: #fff1f2;
            border: 1px solid #fecdd3;
            border-radius: 8px;
            padding: 10px 14px;
            font-size: 12.5px;
            color: #9f1239;
            display: flex;
            align-items: flex-start;
            gap: 9px;
            line-height: 1.5;
        }
        .req-vcard-info {
            margin: 0 18px 16px;
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            border-radius: 8px;
            padding: 12px 14px;
            font-size: 13px;
            color: #1e40af;
            line-height: 1.55;
        }

        /* REQUISITOS: UMA OPERAÇÃO POR VEZ
           Com duas ou três operações marcadas os cartões de requisitos empilhavam numa
           única tela enorme. Agora só um aparece por vez, com contador e navegação
           própria — que fica fora do .btn-group porque a ficha contínua esconde aqueles. */
        .req-op-stepper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 16px;
            padding: 10px 14px;
            background: #f1f5f9;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
        }
        .req-op-stepper-count {
            font-size: 12.5px;
            font-weight: 700;
            color: #334155;
            letter-spacing: .2px;
        }
        .req-op-stepper-dots {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .req-op-stepper-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #cbd5e1;
            transition: background .2s ease, transform .2s ease;
        }
        .req-op-stepper-dot.atual {
            background: #1a3a6e;
            transform: scale(1.35);
        }
        .req-op-stepper-dot.respondida { background: #16a34a; }

        .req-op-nav {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
        }
        .req-op-nav .req-op-nav-btn { flex: 1; }

        @media (max-width: 640px) {
            .req-op-stepper {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
        }

        /* UPLOAD AREAS — melhorias visuais */
        .file-upload {
            border: 2px dashed #d1d5db;
            border-radius: 12px;
            padding: 28px 24px 22px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
            background: #fafafa;
            position: relative;
        }
        .file-upload:hover {
            border-color: #1a3a6e;
            background: #f0f4ff;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(13,31,60,0.1);
        }
        .file-upload.has-file {
            border-color: #10b981;
            border-style: solid;
            background: #f0fdf8;
        }
        .file-upload-status-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-top: 10px;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.3px;
            background: #f1f5f9;
            color: #94a3b8;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }
        .file-upload.has-file .file-upload-status-bar {
            background: #d1fae5;
            color: #059669;
        }
        .file-upload-status-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #cbd5e1;
        }
        .file-upload.has-file .file-upload-status-dot {
            background: #10b981;
        }

        /* SUBMIT — portal card */
        .submit-portal-card {
            background: linear-gradient(135deg, #0d1f3c 0%, #162d56 100%);
            border-radius: 14px;
            padding: 22px 24px;
            display: flex;
            align-items: center;
            gap: 18px;
            margin-bottom: 24px;
        }
        .submit-portal-card-icon {
            width: 50px;
            height: 50px;
            background: rgba(16,185,129,0.18);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .submit-portal-card-text strong {
            display: block;
            color: white;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 4px;
        }
        .submit-portal-card-text span {
            color: rgba(255,255,255,0.58);
            font-size: 13px;
            line-height: 1.45;
        }

        /* RESPONSIVE para o redesign */
        @media (max-width: 1024px) {
            .portal-topbar { padding-left: calc(280px + 20px); }
        }
        @media (max-width: 768px) {
            .portal-topbar {
                padding-left: 64px;
                padding-right: 16px;
            }
            .portal-topbar-build { display: none; }
            .content-wrapper {
                padding: 20px 16px 40px !important;
            }
            .hero-cards-grid { grid-template-columns: 1fr; }
            .hero-intro-heading { font-size: 21px; }
        }

        /* ================================================================
           TEMA OPERACIONAL CLARO
           ================================================================ */
        :root {
            --ui-bg: #e9edf3;
            --ui-panel: #fbfcfe;
            --ui-panel-soft: #f1f5f9;
            --ui-border: #d5dde8;
            --ui-border-strong: #bfcadb;
            --ui-text: #172033;
            --ui-muted: #657286;
            --ui-accent: #c9342f;
            --ui-accent-soft: #fff1f0;
            --ui-success: #12805c;
            --ui-success-soft: #e8f7ef;
            --ui-warn: #a15c00;
            --ui-warn-soft: #fff7e6;
            --ui-info: #2563a8;
            --ui-info-soft: #edf6ff;
        }

        body {
            background: var(--ui-bg) !important;
            color: var(--ui-text);
        }
        body::before,
        body::after {
            content: none !important;
        }

        .portal-topbar {
            height: 56px;
            background: rgba(247,249,252,0.96) !important;
            border-bottom: 1px solid var(--ui-border) !important;
            box-shadow: 0 1px 12px rgba(15,23,42,0.06) !important;
            color: var(--ui-text);
        }
        .portal-topbar-breadcrumb-portal {
            color: var(--ui-muted) !important;
        }
        .portal-topbar-breadcrumb-sep {
            color: #aab4c2 !important;
        }
        .portal-topbar-breadcrumb-page {
            color: var(--ui-text) !important;
        }
        .portal-topbar-secure {
            color: var(--ui-success) !important;
        }
        .portal-topbar-build {
            color: #9aa6b6 !important;
        }

        .sidebar {
            background: #f8fafc !important;
            border-right: 1px solid var(--ui-border);
            box-shadow: 1px 0 18px rgba(15,23,42,0.05) !important;
        }
        .sidebar-header {
            padding: 24px 22px 18px !important;
            border-bottom: 1px solid var(--ui-border) !important;
            background: #f8fafc;
        }
        .sidebar-header::after {
            background: var(--ui-accent) !important;
            left: 22px !important;
            width: 34px !important;
        }
        .sidebar-header svg text:first-of-type {
            fill: var(--ui-text) !important;
        }
        .sidebar-header svg text:last-of-type {
            fill: #8b96a8 !important;
        }
        .sidebar-nav {
            padding: 16px 10px !important;
        }
        .nav-item {
            color: var(--ui-muted) !important;
            border-left: 0 !important;
            border-radius: 8px;
            margin: 2px 0;
            padding: 11px 12px !important;
            gap: 12px !important;
            font-size: 14px !important;
            background: transparent;
        }
        .nav-item:hover {
            background: var(--ui-panel-soft) !important;
            color: var(--ui-text) !important;
        }
        .nav-item.active {
            background: var(--ui-accent-soft) !important;
            color: var(--ui-text) !important;
        }
        .nav-number {
            width: 28px !important;
            height: 28px !important;
            background: #eef2f7 !important;
            color: #667085 !important;
            font-size: 12px;
        }
        .nav-item.active .nav-number {
            background: var(--ui-accent) !important;
            color: #fff !important;
        }
        .nav-step-dot {
            width: 6px !important;
            height: 6px !important;
            background: #cbd5e1 !important;
        }
        .nav-item.completed {
            color: #2f6f55 !important;
        }
        .nav-item.completed .nav-number {
            background: var(--ui-success-soft) !important;
        }
        .nav-item.completed .nav-step-dot {
            background: var(--ui-success) !important;
            box-shadow: none !important;
        }

        .main-content {
            background: var(--ui-bg) !important;
        }
        .content-wrapper {
            max-width: 980px !important;
            padding: 28px 36px 56px !important;
        }

        .cadastro-progress {
            position: sticky;
            top: 68px;
            z-index: 60;
            margin: 0 0 18px;
            padding: 14px 16px;
            background: rgba(251,252,254,0.94);
            border: 1px solid var(--ui-border);
            border-radius: 8px;
            box-shadow: 0 8px 20px rgba(15,23,42,0.05);
            backdrop-filter: blur(10px);
        }
        .cadastro-progress-meta {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 12px;
            margin-bottom: 10px;
        }
        .cadastro-progress-step {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--ui-muted);
            white-space: nowrap;
        }
        .cadastro-progress-title {
            min-width: 0;
            color: var(--ui-text);
            font-size: 14px;
            font-weight: 750;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .cadastro-progress-percent {
            color: var(--ui-success);
            font-size: 13px;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
        }
        .cadastro-progress-track {
            height: 7px;
            background: #e9eef5;
            border-radius: 999px;
            overflow: hidden;
        }
        .cadastro-progress-fill {
            width: 11%;
            height: 100%;
            background: linear-gradient(90deg, var(--ui-success), #3aa981);
            border-radius: inherit;
            transition: width .28s ease;
        }

        .form-section {
            background: var(--ui-panel) !important;
            border: 1px solid var(--ui-border) !important;
            border-radius: 8px !important;
            padding: 32px !important;
            box-shadow: 0 10px 28px rgba(15,23,42,0.06) !important;
        }
        .sectioned-registration {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .sectioned-registration .form-section {
            display: block !important;
            padding: 0 !important;
            overflow: hidden;
            scroll-margin-top: 142px;
            transition: border-color .2s ease, box-shadow .2s ease;
        }
        .sectioned-registration .form-section.section-card-hidden {
            display: none !important;
        }
        .sectioned-registration .form-section:not(.active) {
            box-shadow: none !important;
        }
        .sectioned-registration .form-section:not(.active) > :not(.cadastro-section-card-head) {
            display: none !important;
        }
        .sectioned-registration .form-section.active {
            border-color: var(--ui-border-strong) !important;
        }
        .sectioned-registration .form-section.active > :not(.cadastro-section-card-head) {
            margin-left: 32px;
            margin-right: 32px;
        }
        .sectioned-registration .form-section.active > .cadastro-section-card-head + * {
            margin-top: 28px;
        }
        .sectioned-registration .form-section.active > .section-step-tag + * {
            margin-top: 28px;
        }
        .sectioned-registration .form-section.active > .btn-group:last-child,
        .sectioned-registration .form-section.active > div:last-child {
            margin-bottom: 32px;
        }
        .cadastro-section-card-head {
            width: 100%;
            border: 0;
            background: #fff;
            color: inherit;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 14px;
            padding: 18px 20px;
            text-align: left;
            cursor: pointer;
        }
        .form-section.active .cadastro-section-card-head {
            background: linear-gradient(180deg, #fff, #fbfcfe);
            border-bottom: 1px solid var(--ui-border);
            cursor: default;
        }
        .cadastro-section-card-index {
            width: 34px;
            height: 34px;
            border-radius: 999px;
            display: grid;
            place-items: center;
            background: var(--ui-panel-soft);
            color: var(--ui-muted);
            border: 1px solid var(--ui-border);
            font-weight: 800;
            font-size: 13px;
            font-variant-numeric: tabular-nums;
        }
        .form-section.active .cadastro-section-card-index {
            background: var(--ui-text);
            color: #fff;
            border-color: var(--ui-text);
        }
        .form-section.section-card-completed .cadastro-section-card-index {
            background: var(--ui-success);
            color: #fff;
            border-color: var(--ui-success);
        }
        .form-section.section-card-completed .cadastro-section-card-index::before {
            content: '✓';
        }
        .form-section.section-card-completed .cadastro-section-card-index {
            font-size: 0;
        }
        .form-section.section-card-completed .cadastro-section-card-index::before {
            font-size: 15px;
        }
        .cadastro-section-card-title {
            min-width: 0;
        }
        .cadastro-section-card-title strong {
            display: block;
            color: var(--ui-text);
            font-size: 15px;
            line-height: 1.25;
        }
        .cadastro-section-card-title span {
            display: block;
            margin-top: 3px;
            color: var(--ui-muted);
            font-size: 12px;
            line-height: 1.35;
        }
        .cadastro-section-card-state {
            justify-self: end;
            display: inline-flex;
            align-items: center;
            min-height: 28px;
            padding: 5px 10px;
            border-radius: 999px;
            background: var(--ui-panel-soft);
            color: var(--ui-muted);
            border: 1px solid var(--ui-border);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .04em;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .form-section.active .cadastro-section-card-state {
            background: var(--ui-info-soft);
            color: var(--ui-info);
            border-color: rgba(37,99,168,.22);
        }
        .form-section.section-card-completed .cadastro-section-card-state {
            background: var(--ui-success-soft);
            color: var(--ui-success);
            border-color: rgba(47,111,85,.22);
        }
        .form-section.section-card-locked .cadastro-section-card-head {
            cursor: default;
            background: #f8fafc;
        }
        .form-section.section-card-locked .cadastro-section-card-title strong,
        .form-section.section-card-locked .cadastro-section-card-title span {
            color: #94a3b8;
        }
        .sectioned-registration .section-step-tag {
            display: none !important;
        }
        @media (max-width: 680px) {
            .sectioned-registration .form-section.active > :not(.cadastro-section-card-head) {
                margin-left: 18px;
                margin-right: 18px;
            }
            .cadastro-section-card-head {
                grid-template-columns: auto 1fr;
                align-items: start;
                padding: 16px;
            }
            .cadastro-section-card-state {
                grid-column: 2;
                justify-self: start;
            }
        }
        .section-title,
        .hero-intro-heading {
            color: var(--ui-text) !important;
            background: none !important;
            -webkit-text-fill-color: currentColor !important;
            letter-spacing: 0 !important;
        }
        .section-title {
            font-size: 26px !important;
            margin-bottom: 6px !important;
        }
        .section-subtitle,
        .hero-intro-lead {
            color: var(--ui-muted) !important;
            margin-bottom: 28px !important;
        }
        .hero-intro {
            margin-bottom: 26px !important;
            padding-bottom: 24px !important;
            border-bottom: 1px solid var(--ui-border) !important;
        }
        .hero-intro-eyebrow {
            background: var(--ui-panel-soft) !important;
            color: var(--ui-muted) !important;
            border: 1px solid var(--ui-border);
            border-radius: 8px !important;
            letter-spacing: .08em !important;
        }
        .hero-intro-eyebrow-dot {
            background: var(--ui-success) !important;
        }
        .hero-info-card,
        .req-vcard {
            background: var(--ui-panel-soft) !important;
            border: 1px solid var(--ui-border) !important;
            border-radius: 8px !important;
            box-shadow: none !important;
        }
        .hero-info-card:hover {
            border-color: var(--ui-border-strong) !important;
            box-shadow: none !important;
        }
        .section-step-tag {
            background: var(--ui-panel-soft) !important;
            border: 1px solid var(--ui-border) !important;
            border-radius: 8px !important;
        }
        .section-step-tag-num {
            background: var(--ui-text) !important;
        }

        input[type="text"],
        input[type="tel"],
        input[type="date"],
        input[type="email"],
        input[type="password"],
        select {
            background: #fcfdff !important;
            border: 1px solid var(--ui-border-strong) !important;
            border-radius: 7px !important;
            color: var(--ui-text) !important;
            box-shadow: none !important;
        }
        input:focus,
        select:focus {
            border-color: var(--ui-info) !important;
            box-shadow: 0 0 0 3px rgba(37,99,168,0.12) !important;
        }
        .radio-option label,
        .checkbox-option label {
            background: #fcfdff !important;
            border: 1px solid var(--ui-border) !important;
            border-radius: 7px !important;
        }
        .radio-option:hover label,
        .checkbox-option:hover label,
        .radio-option input:checked + label,
        .checkbox-option input:checked + label {
            border-color: var(--ui-info) !important;
            background: var(--ui-info-soft) !important;
        }
        .radio-option input:checked + label::before,
        .checkbox-option input:checked + label::before {
            border-color: var(--ui-info) !important;
            background-color: var(--ui-info) !important;
        }

        .file-upload {
            background: var(--ui-panel-soft) !important;
            border: 1.5px dashed var(--ui-border-strong) !important;
            border-radius: 8px !important;
            padding: 24px 20px !important;
            box-shadow: none !important;
        }
        .file-upload:hover {
            background: var(--ui-info-soft) !important;
            border-color: var(--ui-info) !important;
            transform: none !important;
            box-shadow: none !important;
        }
        .file-upload.has-file {
            background: var(--ui-success-soft) !important;
            border-color: var(--ui-success) !important;
        }
        .file-upload-icon::before {
            width: 30px !important;
            height: 30px !important;
            background: var(--ui-info) !important;
        }
        .file-name {
            color: var(--ui-success) !important;
        }

        .btn-group {
            border-top: 1px solid var(--ui-border) !important;
            margin-top: 30px !important;
            padding-top: 22px !important;
        }
        button,
        .btn-primary,
        .btn-secondary {
            border-radius: 7px !important;
            box-shadow: none !important;
        }
        .btn-primary {
            background: var(--ui-accent) !important;
            color: #fff !important;
        }
        .btn-primary:hover:not(:disabled) {
            background: #a92b27 !important;
            transform: none !important;
            box-shadow: none !important;
        }
        .btn-secondary {
            color: var(--ui-text) !important;
            background: var(--ui-panel) !important;
            border: 1px solid var(--ui-border-strong) !important;
        }
        .btn-secondary:hover {
            background: var(--ui-panel-soft) !important;
            border-color: var(--ui-border-strong) !important;
            transform: none !important;
            box-shadow: none !important;
        }

        .alert,
        .alert-box,
        .inline-warning,
        [id$="_pdf_hint"],
        #trisy_pdf_hint {
            background: var(--ui-warn-soft) !important;
            border: 1px solid #f1d59b !important;
            border-left: 3px solid var(--ui-warn) !important;
            border-radius: 8px !important;
            color: #6f4200 !important;
            box-shadow: none !important;
        }
        .alert.error {
            background: #fff0f0 !important;
            border-color: #f0b8b8 !important;
            border-left-color: var(--ui-accent) !important;
            color: #8d2320 !important;
        }
        .alert.success {
            background: var(--ui-success-soft) !important;
            border-color: #b8dfc9 !important;
            border-left-color: var(--ui-success) !important;
            color: #155d45 !important;
        }
        .inline-warning-icon {
            font-size: 0 !important;
            line-height: 0;
        }
        .inline-warning-icon::before {
            content: '';
            display: inline-block;
            width: 22px;
            height: 22px;
            background: var(--ui-warn);
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
        }
        .doc-preview-modal-header button::before {
            content: '';
            width: 18px;
            height: 18px;
            background: var(--ui-muted);
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
        }

        .submit-portal-card {
            background: var(--ui-panel-soft) !important;
            border: 1px solid var(--ui-border) !important;
            border-radius: 8px !important;
        }
        .submit-portal-card-text strong {
            color: var(--ui-text) !important;
        }
        .submit-portal-card-text span {
            color: var(--ui-muted) !important;
        }

        .loading-overlay {
            background: rgba(245,247,251,0.86) !important;
            backdrop-filter: blur(8px);
        }
        .loading-content p,
        .loading-subtitle,
        .loading-phrase {
            color: var(--ui-text) !important;
        }
        .loading-phrase {
            background: var(--ui-panel) !important;
            border: 1px solid var(--ui-border) !important;
            box-shadow: none !important;
        }
        .spinner {
            border-color: #d7dee8 !important;
            border-top-color: var(--ui-accent) !important;
        }

        #securityAlertOverlay {
            background:
                radial-gradient(circle at 50% 18%, rgba(37,99,168,0.12), transparent 0 260px),
                rgba(224,230,238,0.92) !important;
            backdrop-filter: blur(8px);
            align-items: flex-start !important;
            padding-top: 72px !important;
        }
        #securityAlertOverlay > div {
            max-width: 640px !important;
            border-radius: 10px !important;
            border: 1px solid var(--ui-border) !important;
            box-shadow: 0 18px 40px rgba(15,23,42,0.12) !important;
        }
        #securityAlertOverlay img {
            max-height: 360px !important;
            object-fit: contain;
            object-position: center;
            border-radius: 10px 10px 0 0 !important;
            background: #f8fafc;
        }
        .security-image-link {
            display: block;
            cursor: zoom-in;
            text-decoration: none;
            background: #f8fafc;
            border-radius: 10px 10px 0 0;
        }
        .security-image-hint {
            margin: 8px 20px 0;
            color: var(--ui-muted);
            font-size: 12px;
            line-height: 1.4;
            text-align: center;
        }
        .security-image-hint strong {
            color: var(--ui-text);
            font-weight: 700;
        }
        .security-alert-warning {
            background: #fff0f0 !important;
            border-top: 1px solid #efb4b4 !important;
        }
        .security-alert-warning svg {
            stroke: #9f1f1b !important;
        }
        .security-alert-warning span {
            color: #8d2320 !important;
            font-weight: 700 !important;
        }
        #securityAlertOverlay [style*="background:#0d1f3c"] {
            background: var(--ui-panel-soft) !important;
            border-color: var(--ui-border) !important;
        }
        #securityAlertOverlay [style*="color:#e2e8f0"],
        #securityAlertOverlay [style*="color:#93c5fd"],
        #securityAlertOverlay [style*="color:#94a3b8"] {
            color: var(--ui-text) !important;
        }
        #helpPanel {
            background: var(--ui-panel) !important;
            color: var(--ui-text) !important;
            border-left: 1px solid var(--ui-border);
            box-shadow: -12px 0 30px rgba(15,23,42,0.12) !important;
        }
        .hp-header {
            background: var(--ui-panel) !important;
            border-bottom: 1px solid var(--ui-border) !important;
        }
        .hp-header h2 {
            color: var(--ui-text) !important;
        }
        .hp-header p,
        .hp-dept,
        .hp-section-lbl {
            color: var(--ui-muted) !important;
        }
        .hp-close {
            background: var(--ui-panel-soft) !important;
            color: var(--ui-muted) !important;
            border: 1px solid var(--ui-border) !important;
        }
        .hp-body {
            background: var(--ui-bg) !important;
        }
        .hp-warn {
            background: var(--ui-warn-soft) !important;
            border: 1px solid #f1d59b !important;
        }
        .hp-warn-text,
        .hp-warn-text strong {
            color: #6f4200 !important;
        }
        .hp-card {
            background: var(--ui-panel) !important;
            border: 1px solid var(--ui-border) !important;
            box-shadow: none !important;
        }
        .hp-num {
            color: var(--ui-text) !important;
        }
        .hp-card-ico {
            background: var(--ui-info-soft) !important;
        }
        .hp-wa {
            background: var(--ui-success) !important;
            border-radius: 7px !important;
        }
        .hp-callout {
            background: var(--ui-panel) !important;
            color: var(--ui-text) !important;
            border: 1px solid var(--ui-border) !important;
            box-shadow: 0 8px 22px rgba(15,23,42,0.12) !important;
        }
        .hp-callout::after,
        .hp-callout::before {
            border-top-color: var(--ui-panel) !important;
        }
        #helpFab {
            background: var(--ui-accent) !important;
            box-shadow: 0 8px 20px rgba(201,52,47,0.18) !important;
            border-radius: 999px !important;
        }
        .admin-login-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 99999;
            align-items: center;
            justify-content: center;
            padding: 24px;
            font-family: 'Inter', sans-serif;
            background:
                radial-gradient(circle at 50% 18%, rgba(37,99,168,0.12), transparent 0 300px),
                rgba(224,230,238,0.88);
            backdrop-filter: blur(8px);
        }
        .admin-login-box {
            width: 380px;
            max-width: 100%;
            padding: 30px;
            text-align: left;
            background: var(--ui-panel);
            border: 1px solid var(--ui-border);
            border-radius: 12px;
            box-shadow: 0 22px 54px rgba(15,23,42,0.16);
        }
        .admin-login-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 0 0 10px;
            color: var(--ui-muted);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .admin-login-kicker::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: var(--ui-accent);
            box-shadow: 0 0 0 4px rgba(201,52,47,0.12);
        }
        .admin-login-box > p:first-child {
            display: inline-flex !important;
            align-items: center !important;
            gap: 8px !important;
            margin: 0 0 10px !important;
            color: var(--ui-muted) !important;
            font-size: 12px !important;
            font-weight: 800 !important;
            letter-spacing: .08em !important;
            text-transform: uppercase !important;
        }
        .admin-login-box > p:first-child::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: var(--ui-accent);
            box-shadow: 0 0 0 4px rgba(201,52,47,0.12);
        }
        .admin-login-title {
            margin: 0 0 8px;
            color: var(--ui-text);
            font-size: 22px;
            font-weight: 800;
            letter-spacing: 0;
        }
        .admin-login-box > h3:first-of-type {
            margin: 0 0 22px !important;
            color: var(--ui-text) !important;
            font-size: 22px !important;
            font-weight: 800 !important;
            letter-spacing: 0 !important;
        }
        .admin-login-copy {
            margin: 0 0 22px;
            color: var(--ui-muted);
            font-size: 14px;
            line-height: 1.5;
        }
        .admin-login-input {
            width: 100%;
            padding: 12px 14px;
            background: #f8fafc;
            border: 1.5px solid var(--ui-border);
            border-radius: 8px;
            color: var(--ui-text);
            font-size: 14px;
            font-family: inherit;
            outline: none;
            margin-bottom: 10px;
            box-sizing: border-box;
            transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
        }
        .admin-login-input:focus {
            background: #fff;
            border-color: #8aa0bd;
            box-shadow: 0 0 0 4px rgba(37,99,168,0.10);
        }
        .admin-login-input::placeholder {
            color: #8794a6;
        }
        .admin-login-error {
            min-height: 18px;
            margin: 0 0 12px;
            color: #9f1f1b;
            font-size: 13px;
            font-weight: 700;
        }
        .admin-login-actions {
            display: grid;
            gap: 8px;
        }
        .admin-login-primary,
        .admin-login-secondary {
            width: 100%;
            border-radius: 8px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
            transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
        }
        .admin-login-primary {
            padding: 12px;
            border: none;
            color: #fff;
            background: var(--ui-accent);
            box-shadow: 0 10px 22px rgba(201,52,47,0.18);
        }
        .admin-login-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 26px rgba(201,52,47,0.22);
        }
        .admin-login-primary:disabled {
            cursor: not-allowed;
            opacity: .7;
            transform: none;
            box-shadow: none;
        }
        .admin-login-secondary {
            padding: 11px;
            color: var(--ui-muted);
            background: var(--ui-panel-soft);
            border: 1.5px solid var(--ui-border);
        }
        .admin-login-secondary:hover {
            color: var(--ui-text);
            border-color: #c3ccda;
            background: #fff;
        }
        .recaptcha-disclosure {
            margin: 14px 0 0;
            color: var(--ui-muted);
            font-size: 11px;
            line-height: 1.45;
            text-align: center;
        }
        .recaptcha-disclosure a {
            color: var(--ui-text);
            font-weight: 700;
            text-decoration: none;
        }

        @media (max-width: 768px) {
            .portal-topbar {
                height: 54px;
                padding-left: 8px !important;
                padding-right: 12px !important;
                gap: 6px;
            }
            .hamburger {
                display: flex;
            }
            .sidebar {
                top: 54px !important;
                height: calc(100vh - 54px) !important;
            }
            .content-wrapper {
                padding: 16px 14px 76px !important;
            }
            .cadastro-progress {
                position: relative;
                top: auto;
                z-index: 1;
                padding: 10px 12px;
                margin-bottom: 12px;
                box-shadow: none;
            }
            .cadastro-progress-meta {
                grid-template-columns: 1fr auto;
                gap: 4px 10px;
                margin-bottom: 8px;
            }
            .cadastro-progress-step {
                grid-column: 1 / -1;
            }
            .cadastro-progress-title {
                font-size: 13px;
            }
            .form-section {
                padding: 22px 16px !important;
            }
            .hero-cards-grid,
            .op-cards-grid {
                grid-template-columns: 1fr !important;
            }
            .btn-group {
                flex-direction: column;
            }
            #securityAlertOverlay {
                align-items: flex-start !important;
                justify-content: center !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
                padding: max(10px, env(safe-area-inset-top)) 10px calc(88px + env(safe-area-inset-bottom)) !important;
            }
            #securityAlertOverlay > div {
                max-height: none !important;
                overflow: visible !important;
                border-radius: 10px !important;
                margin: 0 auto !important;
            }
            #securityAlertOverlay img {
                max-height: 185px !important;
                border-radius: 10px 10px 0 0 !important;
            }
            #securityAlertOverlay [style*="margin:16px 20px 0"] {
                margin: 12px 12px 0 !important;
            }
            #securityAlertOverlay [style*="padding:16px 20px 22px"] {
                padding: 14px 12px 18px !important;
            }
            #securityAlertOverlay [style*="font-size:13px;color:#e2e8f0"] {
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) auto;
                gap: 6px 10px;
                align-items: start;
            }
            #securityAlertOverlay [style*="font-size:13px;color:#e2e8f0"] strong {
                text-align: right;
                line-height: 1.2;
            }
            #helpFabWrap {
                right: 12px !important;
                bottom: calc(12px + env(safe-area-inset-bottom)) !important;
                z-index: 70 !important;
            }
            .hp-callout {
                display: none !important;
            }
            #helpFab {
                height: 46px !important;
                width: auto !important;
                padding: 0 18px 0 14px !important;
                border-radius: 999px !important;
                font-size: 13px !important;
                font-weight: 700 !important;
                justify-content: center !important;
                gap: 8px !important;
                box-shadow: 0 6px 20px rgba(185,28,28,.38) !important;
            }
            #helpFab svg {
                width: 18px !important;
                height: 18px !important;
            }
            .fab-label-desktop { display: none !important; }
            .fab-label-mobile  { display: inline !important; }
            #helpPanel {
                width: 100vw !important;
                max-width: 100vw !important;
                height: min(86vh, 720px) !important;
                border-radius: 14px 14px 0 0 !important;
            }
        }

        /* reCAPTCHA badge oculto em todos os dispositivos (aviso legal mantido no formulário) */
        .grecaptcha-badge { visibility: hidden !important; }


        /* ══════════════════ Ficha contínua ══════════════════
           Depois da abertura (responsável + tipo de cadastro) o formulário deixa de ser uma
           tela por etapa e passa a ser uma ficha só, rolando. Todas as seções do caminho
           ficam abertas ao mesmo tempo — inclusive as ainda vazias, para a pessoa ver de
           antemão o tamanho do que tem pela frente. Só apresentação: as regras condicionais
           continuam sendo aplicadas pelo JS de sempre. */

        .ficha-continua .form-section > .btn-group {
            display: none !important;
        }
        .ficha-continua #submitSection > .btn-group {
            display: flex !important;
        }
        /* "Editar informações" era o voltar do fluxo por telas; na ficha única a pessoa
           simplesmente rola até o campo. */
        .ficha-continua #submitSection > .btn-group .btn-secondary {
            display: none !important;
        }

        .ficha-continua .form-section.secao-completa {
            border-color: rgba(47,111,85,.28) !important;
        }
        .ficha-continua .form-section.secao-completa .cadastro-section-card-index {
            background: var(--ui-success);
            color: #fff;
            border-color: var(--ui-success);
        }
        .ficha-continua .form-section.secao-completa .cadastro-section-card-state {
            background: var(--ui-success-soft);
            color: var(--ui-success);
            border-color: rgba(47,111,85,.22);
        }
        .ficha-continua .form-section.secao-pendente .cadastro-section-card-state {
            background: var(--ui-warn-soft);
            color: var(--ui-warn);
            border-color: rgba(161,92,0,.22);
        }
        /* ── Cabeçalho de seção ────────────────────────────────────────────────────────
           Cada seção precisa começar e terminar de forma óbvia na rolagem. Um cabeçalho só,
           em faixa própria, e um intervalo grande até a seção seguinte. */

        /* Mais ar entre uma seção e a próxima do que entre os campos de dentro: é isso que
           faz a virada ser lida como "acabou aqui, começa ali". */
        .sectioned-registration.ficha-continua {
            gap: 30px;
        }

        /* O cabeçalho do card já nomeia a seção; o h2 e o subtítulo internos repetiam a mesma
           informação logo abaixo, dando a impressão de dois títulos para o mesmo bloco. */
        .ficha-continua .form-section > .section-title,
        .ficha-continua .form-section > .section-subtitle {
            display: none !important;
        }

        .ficha-continua .form-section {
            box-shadow: 0 12px 30px rgba(15,23,42,0.07) !important;
        }
        .ficha-continua .form-section > .cadastro-section-card-head,
        .ficha-continua .form-section.active > .cadastro-section-card-head {
            padding: 20px 24px;
            gap: 16px;
            /* Faixa sólida, não degradê para branco: precisa se distinguir do corpo do card
               para ler como "aqui começa outra seção". */
            background: #f2f6fb;
            border-bottom: 2px solid var(--ui-border-strong);
            border-left: 4px solid var(--ui-border-strong);
        }
        /* A cor da lateral repete o estado do selo: verde quando a seção está fechada,
           âmbar enquanto falta alguma coisa. */
        .ficha-continua .form-section.secao-completa > .cadastro-section-card-head {
            border-left-color: var(--ui-success);
        }
        .ficha-continua .form-section.secao-pendente > .cadastro-section-card-head {
            border-left-color: var(--ui-warn);
        }
        .ficha-continua .cadastro-section-card-title strong {
            font-size: 17px;
            font-weight: 800;
        }
        .ficha-continua .cadastro-section-card-index {
            width: 38px;
            height: 38px;
            font-size: 14px;
        }
        /* Respiro entre a faixa do cabeçalho e o primeiro campo, e antes do fim do card.
           A margem vai no próprio cabeçalho (e o fecho, no padding da seção) porque o irmão
           seguinte costuma ser o h2/subtítulo escondidos — margem neles não renderiza nada. */
        .ficha-continua .form-section > .cadastro-section-card-head {
            margin-bottom: 26px;
        }
        .sectioned-registration.ficha-continua .form-section {
            padding-bottom: 28px !important;
        }

        /* Índice: lista todas as etapas da ficha, marcadas com o que falta, e serve de atalho. */
        .ficha-indice {
            background: var(--ui-panel, #fff);
            border: 1px solid var(--ui-border, #e2e8f0);
            border-radius: 8px;
            padding: 18px 20px;
            box-shadow: 0 10px 28px rgba(15,23,42,0.06);
        }
        .ficha-indice-titulo {
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--ui-muted, #64748b);
            margin-bottom: 12px;
        }
        .ficha-indice-lista {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 6px;
        }
        .ficha-indice-item {
            width: 100%;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 12px;
            padding: 9px 12px;
            border: 1px solid transparent;
            border-radius: 7px;
            background: transparent;
            color: inherit;
            font: inherit;
            text-align: left;
            cursor: pointer;
            transition: background .15s ease, border-color .15s ease;
        }
        .ficha-indice-item:hover {
            background: var(--ui-panel-soft, #f8fafc);
            border-color: var(--ui-border, #e2e8f0);
        }
        .ficha-indice-num {
            width: 24px;
            height: 24px;
            border-radius: 999px;
            display: grid;
            place-items: center;
            background: var(--ui-panel-soft, #f1f5f9);
            border: 1px solid var(--ui-border, #e2e8f0);
            color: var(--ui-muted, #64748b);
            font-size: 12px;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
        }
        .ficha-indice-item.completa .ficha-indice-num {
            background: var(--ui-success, #2f6f55);
            border-color: var(--ui-success, #2f6f55);
            color: #fff;
        }
        .ficha-indice-nome {
            min-width: 0;
            font-size: 14px;
            font-weight: 600;
            color: var(--ui-text, #0f172a);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ficha-indice-selo {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .03em;
            text-transform: uppercase;
            white-space: nowrap;
            color: var(--ui-muted, #64748b);
        }
        .ficha-indice-item.pendente .ficha-indice-selo {
            color: var(--ui-warn);
        }
        .ficha-indice-item.completa .ficha-indice-selo {
            color: var(--ui-success, #2f6f55);
        }

        /* Painel de pendências: substitui o "trava num campo por vez" do fluxo antigo. */
        .ficha-pendencias {
            display: none;
        }
        .ficha-pendencias.ativo {
            display: block;
            border: 1px solid rgba(185,28,28,.28);
            background: #fef2f2;
            border-radius: 10px;
            padding: 18px 20px;
            margin: 0 0 20px;
        }
        .ficha-pendencias-head strong {
            display: block;
            color: #991b1b;
            font-size: 15px;
        }
        .ficha-pendencias-head span {
            display: block;
            margin-top: 3px;
            color: #b45309;
            font-size: 12.5px;
        }
        .ficha-pendencias-grupo {
            margin-top: 14px;
        }
        .ficha-pendencias-secao {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: #7f1d1d;
            margin-bottom: 6px;
        }
        .ficha-pendencias-grupo ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 4px;
        }
        .ficha-pendencias-grupo button {
            width: 100%;
            text-align: left;
            background: #fff;
            border: 1px solid rgba(185,28,28,.18);
            border-radius: 7px;
            padding: 8px 12px;
            color: #0f172a;
            font: inherit;
            font-size: 13.5px;
            cursor: pointer;
        }
        .ficha-pendencias-grupo button:hover {
            border-color: rgba(185,28,28,.45);
            background: #fff5f5;
        }

        /* ══════════════════ Arrastar e soltar nos anexos ══════════════════ */
        .file-upload {
            position: relative;
        }
        .file-upload.is-dragover {
            border-color: #2563a8 !important;
            background: #eff6ff !important;
        }
        .file-upload-dnd-hint {
            margin-top: 6px;
            font-size: 12px;
            color: var(--ui-muted, #64748b);
        }
        /* O campo sob o cursor é o destino do Ctrl+V: a dica acende para deixar isso visível
           sem precisar de botão nenhum na caixa. */
        .file-upload:hover .file-upload-dnd-hint {
            color: var(--ui-info, #2563a8);
        }
        .file-upload.colado-agora {
            border-color: var(--ui-success, #12805c) !important;
            background: var(--ui-success-soft, #e8f7ef) !important;
        }

        /* Realce de quem veio do painel de pendências: numa ficha longa, chegar no lugar
           certo sem marcação nenhuma deixa a pessoa sem saber qual campo era o pendente. */
        .item-pendente-alvo {
            position: relative;
            border-radius: 10px;
            outline: 2px solid var(--ui-accent, #c9342f);
            outline-offset: 6px;
            animation: pulsoItemPendente 2.4s ease-out;
        }
        @keyframes pulsoItemPendente {
            0%   { background-color: rgba(201,52,47,.12); }
            100% { background-color: transparent; }
        }
        @media (prefers-reduced-motion: reduce) {
            .item-pendente-alvo { animation: none; }
        }
        .file-upload.is-dragover .file-upload-dnd-hint {
            color: #2563a8;
            font-weight: 700;
        }
        /* Em telas sem mouse não existe arrastar: fica só o toque para escolher o arquivo. */
        @media (hover: none), (pointer: coarse) {
            .file-upload-dnd-hint { display: none; }
        }

        @media (max-width: 680px) {
            .ficha-indice { padding: 16px; }
            .ficha-indice-item { grid-template-columns: auto 1fr; }
            .ficha-indice-selo { grid-column: 2; }
            .sectioned-registration.ficha-continua { gap: 22px; }
            .ficha-continua .form-section > .cadastro-section-card-head,
            .ficha-continua .form-section.active > .cadastro-section-card-head {
                padding: 16px;
            }
        }

        /* ══════════════════ Blocos de campos lado a lado ══════════════════
           Os mesmos campos da lista corrida, agrupados por assunto. No desktop os blocos
           dividem a largura da seção; no celular empilham, mas os campos curtos passam a
           dividir a linha — é daí que vem a maior parte do corte de rolagem. */
        .field-groups {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
            align-items: start;
        }
        /* Bloco que ocupa a linha inteira (ex.: Documentos, com anexos largos). */
        .field-group-wide { grid-column: 1 / -1; }

        .field-group {
            border: 1px solid var(--ui-border, #d5dde8);
            border-radius: 10px;
            background: var(--ui-panel, #fff);
            overflow: hidden;
        }
        .field-group-head {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px 14px;
            background: var(--ui-panel-soft, #f1f5f9);
            border-bottom: 1px solid var(--ui-border, #d5dde8);
        }
        .field-group-num {
            flex: none;
            width: 24px;
            height: 24px;
            border-radius: 7px;
            background: var(--ui-info, #2563a8);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .field-group-headtext { display: block; min-width: 0; }
        .field-group-title {
            display: block;
            font-size: 14px;
            font-weight: 700;
            color: var(--ui-text, #172033);
            line-height: 1.25;
        }
        .field-group-sub {
            display: block;
            font-size: 12px;
            color: var(--ui-muted, #657286);
            line-height: 1.35;
        }
        .field-group-body { padding: 16px 14px; }

        /* Dentro do bloco os campos ficam mais juntos: o próprio bloco já separa os assuntos,
           então os 32px de respiro da lista corrida viram rolagem à toa. */
        .field-group-body .form-question { margin-bottom: 16px; }
        .field-group-body .form-question:last-child { margin-bottom: 0; }
        .field-group-body > *:last-child { margin-bottom: 0; }
        .field-group-body .question-label {
            font-size: 13.5px;
            margin-bottom: 7px;
        }

        /* Par de campos curtos na mesma linha (CPF/nascimento, categoria/validade). */
        .fq-row {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0 14px;
        }
        .fq-row > .form-question { margin-bottom: 16px; }

        /* SIM/NÃO um do lado do outro: duas opções empilhadas gastam altura sem ganho nenhum. */
        .radio-group-inline { flex-direction: row; }
        .radio-group-inline .radio-option { flex: 1 1 0; min-width: 0; }
        .radio-group-inline .radio-option label { justify-content: center; }

        /* Uma coluna só quando não cabem dois blocos com folga. */
        @media (max-width: 900px) {
            .field-groups { grid-template-columns: minmax(0, 1fr); }
        }
        /* Em tela bem estreita nem o par de campos curtos cabe: volta a empilhar. */
        @media (max-width: 400px) {
            .fq-row { grid-template-columns: minmax(0, 1fr); }
        }

        /* ══════════════════ Anexo em linha, na altura de um campo ══════════════════
           A caixa de upload era um retângulo tracejado de ~120px com o ícone e o texto
           centralizados. Numa seção com quatro ou cinco anexos (CRLV, ANTT, CNH, comprovante)
           isso sozinho enchia uma tela. Aqui ela vira uma linha: ícone à esquerda, chamada e
           dica em coluna, na mesma altura dos inputs ao lado. Continua sendo a mesma área
           clicável, com o mesmo arrastar-e-soltar e o mesmo Ctrl+V — só deixou de ser um
           bloco solto no meio dos campos.

           O tracejado fica: é ele que diz "aqui se solta arquivo", e é o que diferencia o
           anexo de um campo de digitar. */
        .file-upload {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            column-gap: 12px;
            row-gap: 2px;
            padding: 11px 14px !important;
            text-align: left;
        }
        .file-upload-icon {
            grid-column: 1;
            /* Centralizado na chamada + dica, não no bloco todo: com o nome do arquivo
               embaixo o ícone descia junto e desalinhava da primeira linha. */
            grid-row: 1 / span 2;
            margin-bottom: 0;
        }
        .file-upload-icon::before {
            width: 22px !important;
            height: 22px !important;
        }
        /* Com arquivo anexado tudo na linha fica verde; o ícone azul era o único item
           destoando do estado. */
        .file-upload.has-file .file-upload-icon::before {
            background: var(--ui-success, #12805c) !important;
        }
        .file-upload-text {
            grid-column: 2;
            grid-row: 1;
        }
        .file-upload-dnd-hint {
            grid-column: 2;
            grid-row: 2;
            margin-top: 0;
        }
        /* Terceira linha, e só aparece de fato quando há arquivo: vazia, não ocupa altura. */
        .file-name {
            grid-column: 2;
            grid-row: 3;
            margin-top: 0;
        }

        /* ══════════════════ Ficha em duas colunas no desktop ══════════════════
           Na ficha contínua todas as seções ficam abertas, e empilhadas numa coluna só de
           900px a página fica altíssima — as seções curtas (tipo de cadastro, tipo de veículo,
           carretas) gastam uma tela inteira para três opções. A partir de 1280px os cards
           passam a dividir a largura, dois por linha, na mesma ordem de leitura de cima para
           baixo. No celular nada muda: a regra só existe dentro deste @media.

           Só vale na ficha contínua. No fluxo tela a tela aparece uma seção por vez — meia
           largura ali deixaria o card espremido com metade da tela vazia ao lado. */
        @media (min-width: 1280px) {
            /* A largura extra é só para a ficha aberta. No fluxo tela a tela aparece uma seção
               por vez, e esticá-la para 1340px daria linhas longas demais para ler. */
            .content-wrapper:has(.sectioned-registration.ficha-continua) {
                max-width: 1340px !important;
            }
            .sectioned-registration.ficha-continua {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                /* Sem esticar: cada card fica com a altura do próprio conteúdo em vez de
                   acompanhar o mais alto da linha. */
                align-items: start;
                gap: 20px;
            }
            /* Linha inteira para o que é largo por natureza: o índice, a abertura (cartões de
               operação em 3 colunas), os requisitos e o motorista (que já têm blocos internos
               lado a lado) e o fecho da ficha. O tipo de cadastro entra aqui por outro motivo:
               é uma seção curta entre duas largas, então em meia largura ela não tem com quem
               emparelhar e sobra um vão do lado. Quem divide a linha são as seções do veículo,
               que vêm em sequência. */
            .sectioned-registration.ficha-continua > #fichaIndice,
            .sectioned-registration.ficha-continua > #section1,
            .sectioned-registration.ficha-continua > #section3,
            .sectioned-registration.ficha-continua > #section2_amazon,
            .sectioned-registration.ficha-continua > #section4,
            .sectioned-registration.ficha-continua > #submitSection,
            .sectioned-registration.ficha-continua > #thankYouSection {
                grid-column: 1 / -1;
            }
            /* Ocupando a linha toda, as três opções cabem lado a lado — empilhadas virariam
               um card largo e quase vazio. */
            .sectioned-registration.ficha-continua > #section3 .radio-group {
                flex-direction: row;
            }
            .sectioned-registration.ficha-continua > #section3 .radio-option {
                flex: 1 1 0;
                min-width: 0;
            }
            /* Em meia largura os 32px de margem de cada lado comiam boa parte do card; nos que
               ocupam a linha inteira o respiro original continua valendo. */
            .sectioned-registration.ficha-continua .form-section.active > :not(.cadastro-section-card-head) {
                margin-left: 22px;
                margin-right: 22px;
            }
            .sectioned-registration.ficha-continua > #section1.active > :not(.cadastro-section-card-head),
            .sectioned-registration.ficha-continua > #section3.active > :not(.cadastro-section-card-head),
            .sectioned-registration.ficha-continua > #section2_amazon.active > :not(.cadastro-section-card-head),
            .sectioned-registration.ficha-continua > #section4.active > :not(.cadastro-section-card-head),
            .sectioned-registration.ficha-continua > #submitSection.active > :not(.cadastro-section-card-head),
            .sectioned-registration.ficha-continua > #thankYouSection.active > :not(.cadastro-section-card-head) {
                margin-left: 32px;
                margin-right: 32px;
            }
        }

/* ══════════════════════════════════════════════════════════════════════════
   REPAGINAÇÃO 2026 — camada final
   Só aparência. Nenhuma regra de negócio, validação ou fluxo muda aqui: nenhum
   campo é escondido (a validação filtra :invalid por visibilidade, então
   esconder input mudaria comportamento) e nenhum passo é pulado.
   Resolve, na ordem do feedback recebido:
   1) faixa morta entre a sidebar e o conteúdo
   2) o mesmo progresso repetido em três lugares
   3) vermelho como cor de ação (no Brasil lê como erro/perigo)
   4) todo campo com a mesma largura, sem pista de quanto se espera digitar
   5) cinzas que reprovam no WCAG AA — motorista confere no sol
   6) "9 etapas" assusta; viram 4 fases com tempo
   7) nenhum sinal de que o formulário salva sozinho
   8) prova de vida pedida sem explicar o quê nem por quê
   9) dois botões flutuantes empilhados em cima do formulário
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Verde de placa rodoviária: sinaliza "prossiga" e conversa com o universo do
       transporte. 5.4:1 com texto branco — passa no AA. */
    --cta: #0f7a45;
    --cta-hover: #0b6238;
    --cta-soft: #eaf6ef;
    --cta-border: #b9dfc9;

    /* Vermelho volta a significar UMA coisa só: erro. Não é mais cor de botão,
       nem do asterisco de obrigatório, nem do botão de ajuda. */
    --erro: #c9342f;
    --erro-soft: #fdf0ef;

    /* Cinzas recalibrados para AA sobre branco (o placeholder antigo, #9ca3af,
       dava 2.6:1 — ilegível no celular sob sol). */
    --ui-muted: #57637a;          /* 6.05:1 */
    --texto-fraco: #6b7280;       /* 4.83:1 — o mínimo que passa */

    --trilho-largura: 1180px;
}

/* ─── 1. Faixa morta ──────────────────────────────────────────────────────
   O conteúdo tinha 980px no meio de uma área de 1605px: sobravam ~340px de
   vazio de cada lado, e o bloco parecia jogado para a direita por causa do
   peso visual da sidebar escura. Coluna mais larga e respiro proporcional. */
.content-wrapper {
    max-width: var(--trilho-largura) !important;
    margin: 0 auto !important;
    padding: 26px clamp(18px, 2.4vw, 40px) 96px !important;
}

@media (min-width: 1600px) {
    /* Em tela muito larga, ancorar a coluna mais à esquerda tira a sensação de
       conteúdo desgarrado da navegação. */
    .content-wrapper {
        margin-left: min(6vw, 96px) !important;
        margin-right: auto !important;
    }
}

/* ─── 2. Um progresso só ──────────────────────────────────────────────────
   A barra do topo é o indicador. Os outros (selo por card e a tag de etapa
   dentro da seção) saem de cena: eram três contagens do mesmo estado, e uma
   delas dizia "de 7" enquanto a sidebar listava 9. */
.cadastro-section-card-state,
.section-step-tag {
    display: none !important;
}

/* O índice repetido dentro do formulário some no desktop (a sidebar já faz
   esse papel) e continua no celular, onde não existe sidebar. */
@media (min-width: 769px) {
    #fichaIndice { display: none !important; }
}

/* Sem o selo de texto, quem sinaliza pendência é a borda do cabeçalho da
   seção: informação de estado, não um segundo medidor de progresso. */
.form-section.secao-pendente > .cadastro-section-card-head {
    border-left: 3px solid var(--ui-warn, #a15c00);
}
.form-section.secao-completa > .cadastro-section-card-head {
    border-left: 3px solid var(--cta);
}

/* ─── Barra de progresso ─────────────────────────────────────────────────── */
.cadastro-progress {
    background: var(--ui-panel, #fff);
    border: 1px solid var(--ui-border, #d5dde8);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.cadastro-progress-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.cadastro-progress-step {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ui-muted);
}
.cadastro-progress-title {
    font-size: 15px;
    color: var(--ui-text, #172033);
}
.cadastro-progress-restante {
    font-size: 12.5px;
    color: var(--texto-fraco);
}
.cadastro-progress-percent {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--cta);
    font-variant-numeric: tabular-nums;
}
.cadastro-progress-fill {
    background: var(--cta) !important;
}

/* ─── 7. Sinal de que salva ──────────────────────────────────────────────── */
.cadastro-save-status {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    font-size: 12px;
    color: var(--texto-fraco);
}
.cadastro-save-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c3cbd8;
    flex-shrink: 0;
    transition: background .2s;
}
.cadastro-save-status[data-estado="salvando"] .cadastro-save-dot { background: var(--ui-warn, #a15c00); }
.cadastro-save-status[data-estado="salvo"] .cadastro-save-dot { background: var(--cta); }
.cadastro-save-status[data-estado="salvo"] { color: var(--cta); font-weight: 600; }

/* ─── 3. Vermelho só para erro ───────────────────────────────────────────── */
.btn-primary,
.btn-next,
.kyc-start-btn,
.submit-btn,
button[type="submit"] {
    background: var(--cta) !important;
    border-color: var(--cta) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-next:hover,
.kyc-start-btn:hover,
.submit-btn:hover,
button[type="submit"]:hover {
    background: var(--cta-hover) !important;
    border-color: var(--cta-hover) !important;
}

/* O asterisco de obrigatório usava exatamente o mesmo vermelho do botão de
   ação e do botão de ajuda: três significados na mesma cor. Vira marca
   discreta — quem avisa erro de verdade é a mensagem de erro. */
.required,
.form-label .required,
label .required {
    color: var(--texto-fraco) !important;
    font-weight: 600;
}

/* Erro continua vermelho, e agora é o único vermelho da tela. */
.form-input.is-invalid,
.error-message {
    color: var(--erro);
    border-color: var(--erro);
}

/* ─── 4. Largura do campo como pista do conteúdo ─────────────────────────── */
/* A largura é uma dica silenciosa de quanto se espera digitar. CPF com a mesma
   largura de "Nome completo" confunde. Só max-width: nada some, nada muda de
   obrigatoriedade, e no celular todos voltam a ocupar a linha inteira. */
@media (min-width: 700px) {
    .form-question input[type="text"],
    .form-question input[type="tel"],
    .form-question input[type="email"],
    .form-question input[type="date"],
    .form-question input:not([type]),
    .form-question select {
        max-width: 620px;
    }

    /* Documentos e números: largura do dado + monoespaçada, que alinha os grupos
       da máscara e deixa erro de digitação óbvio. */
    .form-question input[name*="cpf"],
    .form-question input[name*="cnpj"],
    .form-question input[name*="pis_nis"] {
        max-width: 22ch;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        letter-spacing: 0.02em;
    }
    .form-question input[name*="telefone"],
    .form-question input[name*="contato"] {
        max-width: 20ch;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
    .form-question input[name*="placa"] {
        max-width: 14ch;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
    .form-question input[name$="_ano"],
    .form-question input[name*="qtd_eixos"] { max-width: 11ch; }
    .form-question input[type="date"] { max-width: 18ch; }
    .form-question input[name*="cep"] { max-width: 14ch; }
    .form-question input[name*="email"] { max-width: 34ch; }
    .form-question input[name*="nome"] { max-width: 44ch; }
}

/* ─── 5. Contraste ──────────────────────────────────────────────────────── */
input::placeholder,
textarea::placeholder {
    color: var(--texto-fraco) !important;
    opacity: 1;                     /* o Firefox reduz a opacidade por conta própria */
}
.section-subtitle,
.hero-info-card-desc,
.kyc-card-desc,
.form-hint,
.help-text {
    color: var(--ui-muted) !important;
}

/* ─── 6. Nove etapas viram quatro fases ──────────────────────────────────── */
.nav-phase { margin-bottom: 6px; }
.nav-phase-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 24px 6px;
}
.nav-phase-nome {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.52);
}
.nav-phase-tempo {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.34);
    font-variant-numeric: tabular-nums;
}

/* O número de cada etapa some: era ele que fazia a lista ser lida como
   "9 coisas para fazer". A posição dentro da fase já diz o suficiente. */
.sidebar-nav .nav-number { display: none !important; }
.sidebar-nav .nav-item {
    padding-left: 24px !important;
    gap: 10px;
}
.sidebar-nav .nav-item.active {
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow: inset 3px 0 0 var(--cta);
}
.sidebar-nav .nav-item.completed .nav-step-dot { background: var(--cta) !important; }

/* ─── 9. Ajuda e aviso antigolpe na trilha lateral ───────────────────────── */
.sidebar-apoio {
    margin-top: auto;
    padding: 16px 18px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sidebar-antigolpe {
    display: flex;
    gap: 10px;
    text-align: left;
    padding: 12px;
    border-radius: 11px;
    border: 1px solid rgba(251, 191, 36, 0.28);
    background: rgba(251, 191, 36, 0.09);
    color: #fcd77f;
    cursor: pointer;
    font-family: inherit;
}
.sidebar-antigolpe:hover { background: rgba(251, 191, 36, 0.15); }
.sidebar-antigolpe svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.sidebar-antigolpe strong { display: block; font-size: 12px; margin-bottom: 2px; color: #fde8b0; }
.sidebar-antigolpe span { font-size: 11px; line-height: 1.45; color: rgba(253, 232, 176, 0.75); }
.sidebar-ajuda {
    background: none;
    border: none;
    padding: 4px 12px 8px;
    text-align: left;
    font-family: inherit;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.58);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.sidebar-ajuda:hover { color: #fff; }

.sidebar-rodape {
    padding: 12px 24px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.sidebar-rodape p {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.32);
    text-align: center;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    line-height: 1.6;
}
.sidebar-rodape span { font-size: 9px; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.22); }

/* Os flutuantes saem do desktop (viraram a trilha lateral) e ficam só no
   celular, onde não há sidebar visível — e ali sobra um, não dois. */
@media (min-width: 769px) {
    #helpFabWrap { display: none !important; }
}
@media (max-width: 768px) {
    .sidebar-apoio { display: none; }
    #helpCallout { display: none !important; }
    #helpFab {
        background: #1e293b !important;
        box-shadow: 0 6px 20px rgba(15, 23, 42, 0.35) !important;
    }
}

/* ─── 8. Prova de vida explicada ─────────────────────────────────────────── */
.kyc-card {
    border: 1px solid var(--cta-border) !important;
    background: var(--cta-soft) !important;
    border-radius: 14px !important;
    padding: 16px !important;
}
.kyc-card .kyc-card-icon-wrap {
    background: #fff !important;
    color: var(--cta);
    border: 1px solid var(--cta-border);
}
.kyc-card-title { font-size: 15px; }
.kyc-card-desc { max-width: 62ch; }
.kyc-card-passos {
    list-style: none;
    margin: 9px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kyc-card-passos li {
    position: relative;
    padding-left: 18px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ui-muted);
}
.kyc-card-passos li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cta);
}
.kyc-start-btn { align-self: flex-start; white-space: nowrap; }
.kyc-card.done { background: var(--cta-soft) !important; }

@media (max-width: 700px) {
    #kyc-card-pending { flex-direction: column; }
    .kyc-start-btn { width: 100%; }
}

/* ─── Ajustes da repaginação, vistos na primeira renderização ────────────── */

/* Com as fases, a sidebar passou a ser mais alta que a tela: o aviso antigolpe
   e o rodapé ficavam cortados. Ela rola sozinha, e a navegação nunca some. */
.sidebar {
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sidebar-nav { flex: 0 0 auto; }

/* Os rótulos das fases estavam quase invisíveis sobre o azul escuro. Sobre
   #0d1f3c, branco a 52% dá ~4:1; a 78% passa de 7:1. */
.nav-phase-nome { color: rgba(255, 255, 255, 0.78) !important; }
.nav-phase-tempo { color: rgba(255, 255, 255, 0.55) !important; }
.nav-phase + .nav-phase .nav-phase-head { border-top: 1px solid rgba(255, 255, 255, 0.07); margin-top: 4px; }

/* Mesmo problema no aviso antigolpe: era o texto mais apagado da tela, sendo
   o único ali que é informação de segurança de verdade. */
.sidebar-antigolpe { color: #ffd98a; }
.sidebar-antigolpe strong { color: #ffe9bd; }
.sidebar-antigolpe span { color: rgba(255, 233, 189, 0.88); }
.sidebar-ajuda { color: rgba(255, 255, 255, 0.72); }

/* Tirei o número de cada etapa da sidebar; manter o círculo numerado no
   cabeçalho da seção deixava a contagem viva só em um lugar, pela metade. */
.cadastro-section-card-index { display: none !important; }
.cadastro-section-card-head { padding-left: 18px; }

/* Campo de dado curto não deve esticar dentro de grids do formulário. */
@media (min-width: 700px) {
    .form-question { max-width: 100%; }
}

/* ─── Correção: a sidebar é CLARA ────────────────────────────────────────────
   A camada de tema claro repinta a sidebar de #f8fafc. Eu havia escrito os
   rótulos das fases e o aviso antigolpe em branco, herdando o visual da barra
   escura original — ficou branco sobre branco. Aqui as cores são recalculadas
   para fundo claro, todas acima de 4.5:1. */
.nav-phase-nome {
    color: var(--ui-muted) !important;      /* 6.05:1 sobre #f8fafc */
}
.nav-phase-tempo {
    color: var(--texto-fraco) !important;   /* 4.8:1 */
}
.nav-phase + .nav-phase .nav-phase-head {
    border-top: 1px solid var(--ui-border, #d5dde8);
    margin-top: 6px;
    padding-top: 14px;
}

/* Ativo: o realce era vermelho-claro (mesma cor de erro). Vira verde de ação,
   coerente com o resto. */
.sidebar-nav .nav-item.active {
    background: var(--cta-soft) !important;
    color: var(--ui-text, #172033) !important;
    box-shadow: inset 3px 0 0 var(--cta);
    font-weight: 600;
}
.sidebar-nav .nav-item { padding-left: 14px !important; }

/* Aviso antigolpe em fundo claro: âmbar escuro sobre creme, 6.3:1. É o único
   texto da lateral que é informação de segurança de verdade — não pode ser o
   mais apagado da tela, que era exatamente o que acontecia antes, perdido
   dentro de um card de marketing no meio da página. */
.sidebar-antigolpe {
    border: 1px solid #e8cf94;
    background: #fdf6e6;
    color: #7a5310;
}
.sidebar-antigolpe:hover { background: #fbeed0; }
.sidebar-antigolpe strong { color: #6b470c; }
.sidebar-antigolpe span { color: #7a5310; }
.sidebar-ajuda { color: var(--ui-muted) !important; }
.sidebar-ajuda:hover { color: var(--ui-text, #172033) !important; }

.sidebar-rodape { border-top: 1px solid var(--ui-border, #d5dde8); }
.sidebar-rodape p { color: var(--texto-fraco) !important; }
.sidebar-rodape span { color: var(--texto-fraco) !important; opacity: .85; }

/* O traço vermelho sob o logo era o mesmo vermelho do botão de ação. Como
   vermelho agora só quer dizer erro, ele sai da identidade da barra. */
.sidebar-header::after { background: var(--cta) !important; }

/* ═══ Correções apontadas no uso real ═══════════════════════════════════════ */

/* ─── Hover do botão principal ainda vinha vermelho ──────────────────────────
   A regra antiga é .btn-primary:hover:not(:disabled) — três seletores de peso
   contra os dois do meu .btn-primary:hover. Com !important dos dois lados, a
   mais específica ganha. Repito a especificidade em vez de empilhar !important
   às cegas. Botão de ação nunca fica vermelho: vermelho é erro. */
.btn-primary:hover:not(:disabled),
.btn-next:hover:not(:disabled),
.kyc-start-btn:hover:not(:disabled),
.submit-btn:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled) {
    background: var(--cta-hover) !important;
    border-color: var(--cta-hover) !important;
    color: #fff !important;
}
.btn-primary:active:not(:disabled),
button[type="submit"]:active:not(:disabled) {
    background: var(--cta-hover) !important;
}
.btn-primary:disabled,
button[type="submit"]:disabled {
    background: #9aa6b8 !important;
    border-color: #9aa6b8 !important;
}

/* ─── Texto fantasma atrás da barra do topo ──────────────────────────────────
   A barra é fixa com fundo a 96% de opacidade: o conteúdo rolando por baixo
   aparecia por trás do "Portal de Cadastro Operacional", parecendo texto
   duplicado. Barra opaca resolve. */
.portal-topbar {
    background: #f7f9fc !important;
    backdrop-filter: none !important;
}

/* ─── "TransÁgil" aparecia duas vezes ────────────────────────────────────────
   O logo da lateral já é a marca; a migalha repetia o nome logo ao lado.
   Fica só o nome da página. (Só CSS: o HTML e o JS seguem intactos.) */
.portal-topbar-breadcrumb-portal,
.portal-topbar-breadcrumb-sep {
    display: none !important;
}

/* ─── Vão enorme entre a lateral e o conteúdo ────────────────────────────────
   Centralizar na área útil ainda deixava ~200px de vazio colado na navegação.
   O conteúdo passa a encostar na lateral com um respiro fixo — que era o
   pedido original: ancorar na área útil, não no meio da tela. */
@media (min-width: 1200px) {
    .content-wrapper {
        margin-left: 0 !important;
        margin-right: auto !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
        max-width: 1240px !important;
    }
}

/* ─── Barra de rolagem da lateral ────────────────────────────────────────────
   Deixei a lateral rolável para o aviso antigolpe não ser cortado, e apareceu
   uma barra cinza grossa colada na navegação. Fica fina e discreta. */
.sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(23, 32, 51, 0.18) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(23, 32, 51, 0.16);
    border-radius: 3px;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(23, 32, 51, 0.3); }

/* ─── Ícones no "Tipo de Cadastro" ───────────────────────────────────────────
   Três rótulos parecidos exigiam leitura atenta para escolher. Com boneco e
   caminhão a escolha é reconhecida de relance. */
.radio-option label {
    display: flex !important;
    align-items: center;
    gap: 11px;
}
.radio-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--ui-panel-soft, #f1f5f9);
    color: var(--ui-muted);
    transition: background .15s, color .15s;
}
.radio-ico svg { width: 21px; height: 21px; }
.radio-option input:checked ~ label .radio-ico,
.radio-option input:checked + label .radio-ico {
    background: var(--cta-soft);
    color: var(--cta);
}

/* ─── Data de nascimento sozinha lá na direita ───────────────────────────────
   Duas causas somadas. A primeira: o campo é de texto com máscara, não
   type="date", então escapou da regra de largura e ficou do tamanho de um
   campo de nome. A segunda: .fq-row é uma grade de 50%/50%, então com o CPF
   curto à esquerda a segunda coluna só começava lá pela metade da tela — o
   campo parecia largado. Estreito o campo e encurto a linha. */
@media (min-width: 700px) {
    .form-question input[name*="nascimento"],
    .form-question input[name*="_data"],
    .form-question input[name*="data_"],
    .form-question input[name*="validade"],
    .form-question input[name*="realizacao"] {
        max-width: 16ch;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

    /* Linha mais curta aproxima as duas colunas sem mexer na grade (que outras
       seções também usam) e ainda melhora o comprimento de leitura. */
    .fq-row { max-width: 780px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAPEL + TRILHA ESCURA — camada final
   Branco puro ofuscava; escuro total ficou pesado. O meio-termo aprovado:
   conteúdo em tom de papel (creme frio, sem branco puro) e a trilha lateral
   quase preta, que dá o contraste da marca sem jogar a tela inteira no escuro.
   Continua sendo só aparência: nenhuma regra, validação ou fluxo muda.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    color-scheme: light;

    /* Superfícies: papel para a página, papel mais claro para os cartões. O
       branco puro (#fff) não aparece em lugar nenhum — era ele que cansava. */
    --ui-bg: #eeeae1;
    --ui-panel: #faf8f4;
    --ui-panel-soft: #f2efe8;
    --ui-border: #ddd7ca;
    --ui-border-strong: #c6bfae;

    /* Texto em marrom-grafite, não preto puro: sobre papel, preto absoluto
       vibra. 14:1 sobre o cartão. */
    --ui-text: #211f1b;
    --ui-muted: #5a544a;
    --texto-fraco: #6d665b;

    --cta: #0f7a45;
    --cta-hover: #0b6238;
    --cta-soft: #e8f2ea;
    --cta-border: #b7d5c2;

    --erro: #b3261e;
    --erro-soft: #fbeceb;
    --ui-accent: #b3261e;
    --ui-accent-soft: #fbeceb;
    --ui-success: #0f7a45;
    --ui-success-soft: #e8f2ea;
    --ui-warn: #8a5a00;
    --ui-warn-soft: #fbf1dd;
    --ui-info: #1c5f9e;
    --ui-info-soft: #e9f1fa;
}

body { background: var(--ui-bg) !important; color: var(--ui-text); }
.main-content { background: var(--ui-bg) !important; }

/* ─── Trilha lateral quase preta ────────────────────────────────────────── */
.sidebar,
.sidebar-header {
    background: #1c1b19 !important;
    border-right: 1px solid #2c2a26 !important;
    box-shadow: none !important;
}
.sidebar { scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }
.sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.sidebar-header svg text:first-of-type { fill: #f2ede4 !important; }
.sidebar-header svg text:last-of-type { fill: #9c9487 !important; }
.sidebar-header::after { background: var(--cta) !important; }

.nav-item { color: #b8b0a4 !important; }
.nav-item:hover { background: rgba(255, 255, 255, 0.06) !important; color: #f2ede4 !important; }
.sidebar-nav .nav-item.active {
    background: rgba(15, 122, 69, 0.20) !important;
    color: #f6f2ea !important;
    box-shadow: inset 3px 0 0 #35b877;
}
.nav-phase-nome { color: #cfc7ba !important; }
.nav-phase-tempo { color: #948c80 !important; }
.nav-phase + .nav-phase .nav-phase-head { border-top-color: rgba(255, 255, 255, 0.10); }
.nav-step-dot { background: rgba(255, 255, 255, 0.20) !important; }
.sidebar-nav .nav-item.completed .nav-step-dot { background: #35b877 !important; }

.sidebar-antigolpe {
    background: rgba(245, 196, 106, 0.10);
    border: 1px solid rgba(245, 196, 106, 0.30);
    color: #f3d9a4;
}
.sidebar-antigolpe:hover { background: rgba(245, 196, 106, 0.16); }
.sidebar-antigolpe strong { color: #fbe9c4; }
.sidebar-antigolpe span { color: rgba(251, 233, 196, 0.82); }
.sidebar-ajuda { color: #b8b0a4 !important; }
.sidebar-ajuda:hover { color: #f2ede4 !important; }
.sidebar-rodape { border-top-color: rgba(255, 255, 255, 0.10); }
.sidebar-rodape p,
.sidebar-rodape span { color: #8d8578 !important; }

/* ─── Barra do topo acompanha o papel ───────────────────────────────────── */
.portal-topbar {
    background: #f6f3ec !important;
    border-bottom: 1px solid var(--ui-border) !important;
    box-shadow: none !important;
    color: var(--ui-text);
}
.portal-topbar-breadcrumb-page { color: var(--ui-text) !important; }
.portal-topbar-secure { color: var(--cta) !important; }
.portal-topbar-build { color: var(--texto-fraco) !important; }
.hamburger span { background: var(--ui-text) !important; }

/* ─── Cartões ───────────────────────────────────────────────────────────── */
.form-section,
.cadastro-progress,
.cadastro-section-card-head,
.hero-info-card,
.submit-portal-card,
.ficha-indice,
.file-upload {
    background: var(--ui-panel) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text);
}
.form-section { box-shadow: 0 1px 2px rgba(33, 31, 27, 0.04) !important; }
.section-title,
.cadastro-section-card-title,
.hero-info-card-title,
.kyc-card-title,
.question-label,
.form-label { color: var(--ui-text) !important; }

/* ─── Campos: um degrau ACIMA do cartão ─────────────────────────────────────
   No papel a lógica inverte em relação ao escuro: o campo fica mais claro que
   o cartão, e é isso que diz "aqui se digita". */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="number"],
input:not([type]),
select,
textarea {
    background: #fffefb !important;
    border: 1px solid var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
}
input:focus,
select:focus,
textarea:focus {
    border-color: var(--cta) !important;
    box-shadow: 0 0 0 3px rgba(15, 122, 69, 0.16) !important;
    outline: none;
}
input::placeholder,
textarea::placeholder { color: var(--texto-fraco) !important; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }

/* ─── Prova de vida, radios e botões ────────────────────────────────────── */
.kyc-card {
    background: var(--cta-soft) !important;
    border-color: var(--cta-border) !important;
}
.kyc-card .kyc-card-icon-wrap {
    background: #fffefb !important;
    border-color: var(--cta-border);
    color: var(--cta);
}
.kyc-card-passos li::before { background: var(--cta); }
.kyc-card-passos li { color: var(--ui-muted); }

.radio-option,
.checkbox-option {
    background: var(--ui-panel) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
}
.radio-ico { background: var(--ui-panel-soft); color: var(--ui-muted); }
.radio-option input:checked ~ label .radio-ico,
.radio-option input:checked + label .radio-ico {
    background: var(--cta-soft);
    color: var(--cta);
}

.btn-primary,
.btn-next,
.kyc-start-btn,
.submit-btn,
button[type="submit"] {
    background: var(--cta) !important;
    border-color: var(--cta) !important;
    color: #fff !important;
}
.btn-primary:hover:not(:disabled),
.btn-next:hover:not(:disabled),
.kyc-start-btn:hover:not(:disabled),
.submit-btn:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled) {
    background: var(--cta-hover) !important;
    border-color: var(--cta-hover) !important;
}
.btn-primary:disabled,
button[type="submit"]:disabled,
.termo-rules-actions .btn-primary:disabled {
    background: #bdb6a8 !important;
    border-color: #bdb6a8 !important;
    color: #fdfcfa !important;
    opacity: 1 !important;
}
.btn-secondary {
    background: var(--ui-panel) !important;
    border: 1px solid var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
}
.btn-secondary:hover { background: var(--ui-panel-soft) !important; }

/* ─── Barra de progresso ────────────────────────────────────────────────── */
.cadastro-progress-track { background: #e2ddd1 !important; }
.cadastro-progress-fill { background: var(--cta) !important; }
.cadastro-progress-title { color: var(--ui-text) !important; }
.cadastro-progress-percent { color: var(--cta) !important; }
.cadastro-progress-step,
.cadastro-progress-restante { color: var(--ui-muted) !important; }
.cadastro-save-dot { background: #c6bfae; }
.cadastro-save-status[data-estado="salvo"] { color: var(--cta) !important; }
.cadastro-save-status[data-estado="salvo"] .cadastro-save-dot { background: var(--cta); }

/* ─── Textos de apoio ───────────────────────────────────────────────────── */
.section-subtitle,
.hero-info-card-desc,
.kyc-card-desc,
.form-hint,
.help-text,
.cadastro-section-card-subtitle { color: var(--ui-muted) !important; }
.required { color: var(--texto-fraco) !important; }

/* ─── Portão de entrada ─────────────────────────────────────────────────── */
#securityAlertOverlay {
    background:
        radial-gradient(circle at 50% 18%, rgba(37, 99, 168, 0.10), transparent 0 260px),
        rgba(28, 27, 25, 0.82) !important;
}
#securityAlertOverlay > div {
    background: var(--ui-panel) !important;
    border-color: var(--ui-border) !important;
    box-shadow: 0 24px 60px rgba(28, 27, 25, 0.35) !important;
}
#securityAlertOverlay img,
.security-image-link { background: #f6f3ec !important; }
.security-image-hint { color: var(--ui-muted) !important; }
.security-image-hint strong { color: var(--ui-text) !important; }
.security-alert-warning {
    background: var(--erro-soft) !important;
    border-top: 1px solid #eec4c1 !important;
}
.security-alert-warning svg { stroke: var(--erro) !important; }
.security-alert-warning span { color: var(--erro) !important; }
/* O bloco dos canais oficiais continua escuro de propósito: é a informação que
   a pessoa confere para não cair em golpe, e o contraste o destaca. */
/* Este bloco sempre foi CLARO no desenho original. Eu o pintei de escuro achando
   que o contraste era intencional, mas existe uma regra antiga (linha ~3646) que
   forca o texto dele para var(--ui-text) — escuro no papel. Deu escuro sobre
   escuro e os telefones sumiram, justamente a informacao que a pessoa usa para
   conferir se nao esta caindo em golpe. Volta a ser claro. */
#securityAlertOverlay [style*="background:#0d1f3c"] {
    background: var(--ui-panel-soft) !important;
    border: 1px solid var(--ui-border) !important;
}
#securityAlertOverlay [style*="background:#0d1f3c"] * { color: var(--ui-text) !important; }
#securityAlertOverlay [style*="color:#93c5fd"] { color: var(--ui-muted) !important; }
#securityAlertOverlay [style*="background:#fff8f0"] {
    background: var(--ui-warn-soft) !important;
    border-color: #e8d3a4 !important;
}
#securityAlertOverlay [style*="color:#7c2d12"] { color: #7a4a08 !important; }
#securityAlertOverlay [style*="color:#0c4a6e"] { color: #1c5f9e !important; }
#securityAlertOverlay [style*="background:#f8fafc"],
#securityAlertOverlay [style*="background:#f9fafb"] {
    background: var(--ui-panel-soft) !important;
    border-color: var(--ui-border) !important;
}
#securityAlertOverlay label,
#securityAlertOverlay label span { color: var(--ui-text) !important; }

/* ─── Modal das regras da ANTT ──────────────────────────────────────────── */
.termo-rules-box { background: var(--ui-panel) !important; border: 1px solid var(--ui-border) !important; }
.termo-rules-header { border-bottom: 1px solid var(--ui-border) !important; }
.termo-rules-header h3 { color: var(--ui-text) !important; }
.termo-rules-header p { color: var(--ui-muted) !important; }
.termo-rules-kicker { background: var(--erro-soft) !important; color: var(--erro) !important; }
.termo-rules-body,
.termo-rules-body p { color: var(--ui-text) !important; }
.termo-rules-item {
    background: var(--ui-panel-soft) !important;
    border-color: var(--ui-border) !important;
    border-left-color: var(--cta) !important;
    color: var(--ui-text) !important;
}
.termo-rules-item strong { color: var(--ui-text) !important; }
.termo-rules-alert {
    background: var(--ui-warn-soft) !important;
    border-color: #e8d3a4 !important;
    color: #7a4a08 !important;
}
.termo-rules-footer {
    background: var(--ui-panel-soft) !important;
    border-top: 1px solid var(--ui-border) !important;
}
.termo-rules-check,
.termo-rules-check span { color: var(--ui-text) !important; }
.termo-rules-check input { accent-color: var(--cta); }

/* ─── Demais overlays e painel de canais ────────────────────────────────── */
#cpfDupOverlay > div,
#pdfConfirmOverlay > div,
#docPreviewModalOverlay > div,
#segundaTecOverlay > div,
#editModalOverlay > div,
#adminLoginOverlay > div,
#docProprioOverlay > div,
.thank-you-card {
    background: var(--ui-panel) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-text) !important;
}
#helpPanel, .hp-card {
    background: var(--ui-panel) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
.hp-dept { color: var(--texto-fraco) !important; }
.hp-num { color: var(--ui-text) !important; }
.hp-wa { background: var(--cta) !important; color: #fff !important; }
.hp-wa:hover { background: var(--cta-hover) !important; }

/* ─── Estado das seções ─────────────────────────────────────────────────── */
.form-section.secao-pendente > .cadastro-section-card-head { border-left: 3px solid var(--ui-warn); }
.form-section.secao-completa > .cadastro-section-card-head { border-left: 3px solid var(--cta); }

/* A barra de progresso é sticky com fundo a 94% e blur: o conteúdo passava por
   trás e aparecia atrás do texto dela — mesmo defeito da barra do topo. Opaca. */
.cadastro-progress {
    background: var(--ui-panel) !important;
    backdrop-filter: none !important;
    border: 1px solid var(--ui-border) !important;
}

/* ═══ Trilha inteira, barra sem vão e conteúdo centralizado ═════════════════ */

/* ─── A lateral vai até o teto ───────────────────────────────────────────────
   A barra do topo atravessava a tela inteira e a lateral começava 52px abaixo:
   sobrava uma faixa clara na horizontal cortando a trilha escura. Agora a
   lateral ocupa a altura toda e a barra do topo começa depois dela. */
.sidebar {
    top: 0 !important;
    height: 100vh !important;
    z-index: 996 !important;      /* acima da barra do topo (995) */
}
.portal-topbar {
    left: 315px !important;
    padding-left: 24px !important;
}

/* ─── O vão que deixava o conteúdo aparecer ──────────────────────────────────
   A barra do topo tem 56px e a de progresso grudava em 68px: sobravam 12px de
   fresta, e era por ali que o conteúdo rolando aparecia — parecia que a barra
   era transparente. Não era: era o vão. Agora ela encosta na de cima.
   (Os 52px espalhados pelo arquivo são de quando a barra tinha essa altura;
   ficaram para trás quando ela passou para 56.) */
.cadastro-progress {
    top: 56px !important;
    box-shadow: 0 6px 14px -8px rgba(33, 31, 27, 0.28) !important;
}
.main-content { padding-top: 56px !important; }

/* Ao rolar até uma seção, ela não pode parar embaixo das duas barras. */
.form-section { scroll-margin-top: 132px; }

/* ─── Conteúdo centralizado ──────────────────────────────────────────────────
   Encostar na lateral resolveu o vão da esquerda, mas jogou todo o vazio para
   a direita, que incomodou mais. Centralizado, a sobra se divide nos dois
   lados e para de puxar o olho. */
@media (min-width: 1200px) {
    .content-wrapper {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 1240px !important;
    }
}

/* No celular a lateral vira gaveta: ali a barra do topo volta a ocupar a
   largura toda, senão fica um recuo de 315px sem nada. */
@media (max-width: 768px) {
    .portal-topbar { left: 0 !important; padding-left: 12px !important; }
    .sidebar { z-index: 1001 !important; }
}

/* Select de lista curta não precisa da largura de um campo de nome. */
@media (min-width: 700px) {
    .form-question select#urgencia_select { max-width: 30ch; }
}

/* ─── Par de campos curtos que estava "brigando" ─────────────────────────────
   A .fq-row e uma grade 50/50: com CPF e contato, que sao curtos, o segundo
   comecava la na metade da linha e ficava um buraco de ~200px entre os dois.
   Pareciam dois campos soltos, nao um par. Aqui as colunas se ajustam ao
   conteudo e os dois andam juntos. Como o "CPF valido" so aparece embaixo de
   um deles, o alinhamento e' pelo topo, senao a linha inteira dancava quando a
   mensagem entrava. */
@media (min-width: 700px) {
    .fq-row.fq-row-compacta {
        grid-template-columns: repeat(2, max-content);
        justify-content: start;
        column-gap: 28px;
        align-items: start;
    }
}