{"id":43861,"date":"2026-04-07T17:51:47","date_gmt":"2026-04-07T20:51:47","guid":{"rendered":"https:\/\/vexpenses.com.br\/blog\/?page_id=43861"},"modified":"2026-05-27T19:37:26","modified_gmt":"2026-05-27T22:37:26","slug":"gerador-de-briefing-de-viagem-corporativa","status":"publish","type":"page","link":"https:\/\/vexpenses.com.br\/blog\/gerador-de-briefing-de-viagem-corporativa\/","title":{"rendered":"Gerador de Briefing de Viagem Corporativa"},"content":{"rendered":"\r\n<!-- Importa\u00e7\u00e3o de Fontes -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&#038;family=JetBrains+Mono:wght@400;500&#038;display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  \/* Estilos globais para ocultar header, footer e margens do WordPress *\/\r\n  header, footer,\r\n  .site-header, .site-footer,\r\n  #masthead, #colophon,\r\n  .ast-site-header, .ast-site-footer,\r\n  .elementor-location-header, .elementor-location-footer,\r\n  .oceanwp-header, .oceanwp-footer,\r\n  .nv-navbar, .nv-footer-wrap,\r\n  .wp-block-template-part {\r\n    display: none !important;\r\n  }\r\n\r\n  \/* Oculta chatbots e widgets flutuantes no canto inferior *\/\r\n  #intercom-container, \r\n  .intercom-lightweight-app,\r\n  .intercom-launcher-frame,\r\n  #hubspot-messages-iframe-container,\r\n  #zE-launcher, iframe#ze-snippet,\r\n  jdiv, \r\n  #blip-chat-container,\r\n  #rd-station-chatbot,\r\n  .joinchat, .wa-chat-box,\r\n  [id*=\"chat-widget\"], [class*=\"chat-widget\"],\r\n  [id*=\"chatbot\"], [class*=\"chatbot\"] {\r\n    display: none !important;\r\n  }\r\n\r\n  html, body {\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n    background-color: #FAFBFD !important;\r\n  }\r\n\r\n  .site, .site-content, #content, .site-main, .entry-content, main, .ast-container, .container {\r\n    padding: 0 !important;\r\n    margin: 0 !important;\r\n    max-width: 100% !important;\r\n    width: 100% !important;\r\n    border: none !important;\r\n    box-shadow: none !important;\r\n  }\r\n\r\n  \/* Oculta a barra preta de administra\u00e7\u00e3o do WP *\/\r\n  #wpadminbar {\r\n    display: none !important;\r\n  }\r\n  \r\n  body.admin-bar {\r\n    margin-top: 0 !important;\r\n    padding-top: 0 !important;\r\n  }\r\n<\/style>\r\n\r\n<style>\r\n  \/* Vari\u00e1veis e Reset restritos ao cont\u00eainer do widget *\/\r\n  #vex-widget-container {\r\n    --vex-dark: #00326B;\r\n    --vex-blue: #0073E6;\r\n    --vex-cyan: #70CDFF;\r\n    --vex-cyan-light: #E8F6FF;\r\n    --surface: #FAFBFD;\r\n    --surface-card: #FFFFFF;\r\n    --border: #E2E8F0;\r\n    --border-focus: #0073E6;\r\n    --text-primary: #0F1A2E;\r\n    --text-secondary: #4A5568;\r\n    --text-muted: #8896A6;\r\n    --success: #059669;\r\n    --success-bg: #ECFDF5;\r\n    --warning: #D97706;\r\n    --warning-bg: #FFFBEB;\r\n    --error: #DC2626;\r\n    --error-bg: #FEF2F2;\r\n    --radius: 10px;\r\n    --radius-sm: 6px;\r\n    --shadow-sm: 0 1px 3px rgba(0,50,107,0.06);\r\n    --shadow-md: 0 4px 12px rgba(0,50,107,0.08);\r\n    --shadow-lg: 0 8px 30px rgba(0,50,107,0.12);\r\n\r\n    font-family: 'Plus Jakarta Sans', sans-serif;\r\n    background: var(--surface);\r\n    color: var(--text-primary);\r\n    line-height: 1.6;\r\n    text-align: left;\r\n    border-radius: var(--radius);\r\n    overflow: hidden;\r\n    position: relative;\r\n    min-height: 100vh;\r\n  }\r\n\r\n  #vex-widget-container * { \r\n    margin: 0; \r\n    padding: 0; \r\n    box-sizing: border-box; \r\n  }\r\n\r\n  \/* Header *\/\r\n  #vex-widget-container .header {\r\n    background: var(--vex-dark);\r\n    padding: 0;\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n\r\n  #vex-widget-container .header::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -50%;\r\n    right: -10%;\r\n    width: 500px;\r\n    height: 500px;\r\n    background: radial-gradient(circle, rgba(112,205,255,0.12) 0%, transparent 70%);\r\n    border-radius: 50%;\r\n  }\r\n\r\n  #vex-widget-container .header-inner {\r\n    max-width: 900px;\r\n    margin: 0 auto;\r\n    padding: 40px 24px 36px;\r\n    position: relative;\r\n    z-index: 1;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    gap: 24px;\r\n  }\r\n\r\n  #vex-widget-container .header-content {\r\n    flex: 1;\r\n  }\r\n\r\n  #vex-widget-container .header-logo {\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  #vex-widget-container .header-logo img {\r\n    max-width: 140px;\r\n    height: auto;\r\n    display: block;\r\n  }\r\n\r\n  #vex-widget-container .header-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    background: rgba(112,205,255,0.15);\r\n    border: 1px solid rgba(112,205,255,0.25);\r\n    color: var(--vex-cyan);\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    padding: 5px 12px;\r\n    border-radius: 20px;\r\n    margin-bottom: 16px;\r\n    letter-spacing: 0.5px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  #vex-widget-container .header h1 {\r\n    font-size: 28px;\r\n    font-weight: 800;\r\n    color: #fff;\r\n    margin-bottom: 10px;\r\n    letter-spacing: -0.5px;\r\n    line-height: 1.2;\r\n  }\r\n\r\n  #vex-widget-container .header p {\r\n    color: rgba(255,255,255,0.7);\r\n    font-size: 15px;\r\n    max-width: 620px;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  \/* Progress *\/\r\n  #vex-widget-container .progress-bar {\r\n    background: var(--surface-card);\r\n    border-bottom: 1px solid var(--border);\r\n    padding: 0;\r\n    position: sticky;\r\n    top: 0;\r\n    z-index: 100;\r\n    box-shadow: var(--shadow-sm);\r\n  }\r\n\r\n  #vex-widget-container .progress-inner {\r\n    max-width: 900px;\r\n    margin: 0 auto;\r\n    padding: 16px 24px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n  }\r\n\r\n  #vex-widget-container .progress-step {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-size: 13px;\r\n    font-weight: 500;\r\n    color: var(--text-muted);\r\n    transition: color 0.3s;\r\n  }\r\n\r\n  #vex-widget-container .progress-step.active { color: var(--vex-blue); }\r\n  #vex-widget-container .progress-step.completed { color: var(--success); }\r\n\r\n  #vex-widget-container .progress-dot {\r\n    width: 28px;\r\n    height: 28px;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    background: var(--border);\r\n    color: var(--text-muted);\r\n    transition: all 0.3s;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  #vex-widget-container .progress-step.active .progress-dot {\r\n    background: var(--vex-blue);\r\n    color: #fff;\r\n    box-shadow: 0 0 0 4px rgba(0,115,230,0.15);\r\n  }\r\n\r\n  #vex-widget-container .progress-step.completed .progress-dot {\r\n    background: var(--success);\r\n    color: #fff;\r\n  }\r\n\r\n  #vex-widget-container .progress-line {\r\n    flex: 1;\r\n    height: 2px;\r\n    background: var(--border);\r\n    border-radius: 1px;\r\n  }\r\n\r\n  #vex-widget-container .progress-line.completed { background: var(--success); }\r\n\r\n  #vex-widget-container .progress-label {\r\n    display: none;\r\n  }\r\n\r\n  @media (min-width: 640px) {\r\n    #vex-widget-container .progress-label { display: inline; }\r\n  }\r\n\r\n  \/* Main *\/\r\n  #vex-widget-container .main {\r\n    max-width: 900px;\r\n    margin: 0 auto;\r\n    padding: 32px 24px 60px;\r\n  }\r\n\r\n  \/* Steps *\/\r\n  #vex-widget-container .step {\r\n    display: none;\r\n    animation: vex-fadeIn 0.35s ease;\r\n  }\r\n\r\n  #vex-widget-container .step.active { display: block; }\r\n\r\n  @keyframes vex-fadeIn {\r\n    from { opacity: 0; transform: translateY(12px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  #vex-widget-container .step-header {\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  #vex-widget-container .step-header h2 {\r\n    font-size: 20px;\r\n    font-weight: 700;\r\n    color: var(--vex-dark);\r\n    margin-bottom: 4px;\r\n  }\r\n\r\n  #vex-widget-container .step-header p {\r\n    font-size: 14px;\r\n    color: var(--text-secondary);\r\n  }\r\n\r\n  \/* Form *\/\r\n  #vex-widget-container .form-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr;\r\n    gap: 20px;\r\n  }\r\n\r\n  @media (min-width: 640px) {\r\n    #vex-widget-container .form-grid.cols-2 { grid-template-columns: 1fr 1fr; }\r\n    #vex-widget-container .form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }\r\n  }\r\n\r\n  #vex-widget-container .form-group {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n  }\r\n\r\n  #vex-widget-container .form-group.full-width {\r\n    grid-column: 1 \/ -1;\r\n  }\r\n\r\n  #vex-widget-container .form-label {\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    color: var(--text-primary);\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 4px;\r\n  }\r\n\r\n  #vex-widget-container .form-label .required {\r\n    color: var(--error);\r\n    font-size: 14px;\r\n  }\r\n\r\n  #vex-widget-container .form-label .hint {\r\n    font-weight: 400;\r\n    color: var(--text-muted);\r\n    font-size: 12px;\r\n  }\r\n\r\n  #vex-widget-container .form-input,\r\n  #vex-widget-container .form-select,\r\n  #vex-widget-container .form-textarea {\r\n    font-family: inherit;\r\n    font-size: 14px;\r\n    padding: 10px 14px;\r\n    border: 1.5px solid var(--border);\r\n    border-radius: var(--radius-sm);\r\n    background: var(--surface-card);\r\n    color: var(--text-primary);\r\n    transition: border-color 0.2s, box-shadow 0.2s;\r\n    outline: none;\r\n    width: 100%;\r\n  }\r\n\r\n  #vex-widget-container .form-input:focus,\r\n  #vex-widget-container .form-select:focus,\r\n  #vex-widget-container .form-textarea:focus {\r\n    border-color: var(--border-focus);\r\n    box-shadow: 0 0 0 3px rgba(0,115,230,0.1);\r\n  }\r\n\r\n  #vex-widget-container .form-input::placeholder,\r\n  #vex-widget-container .form-textarea::placeholder {\r\n    color: var(--text-muted);\r\n  }\r\n\r\n  #vex-widget-container .form-textarea {\r\n    resize: vertical;\r\n    min-height: 80px;\r\n  }\r\n\r\n  #vex-widget-container .form-select {\r\n    appearance: none;\r\n    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='%234A5568' d='M6 8L1 3h10z'\/%3E%3C\/svg%3E\");\r\n    background-repeat: no-repeat;\r\n    background-position: right 12px center;\r\n    padding-right: 32px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  \/* Checkbox group *\/\r\n  #vex-widget-container .checkbox-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr;\r\n    gap: 8px;\r\n  }\r\n\r\n  @media (min-width: 480px) {\r\n    #vex-widget-container .checkbox-grid { grid-template-columns: 1fr 1fr; }\r\n  }\r\n\r\n  @media (min-width: 640px) {\r\n    #vex-widget-container .checkbox-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }\r\n  }\r\n\r\n  #vex-widget-container .checkbox-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 10px 12px;\r\n    border: 1.5px solid var(--border);\r\n    border-radius: var(--radius-sm);\r\n    cursor: pointer;\r\n    transition: all 0.2s;\r\n    font-size: 13px;\r\n    font-weight: 500;\r\n    color: var(--text-secondary);\r\n    background: var(--surface-card);\r\n  }\r\n\r\n  #vex-widget-container .checkbox-item:hover {\r\n    border-color: var(--vex-blue);\r\n    background: var(--vex-cyan-light);\r\n  }\r\n\r\n  #vex-widget-container .checkbox-item.selected {\r\n    border-color: var(--vex-blue);\r\n    background: var(--vex-cyan-light);\r\n    color: var(--vex-dark);\r\n  }\r\n\r\n  #vex-widget-container .checkbox-item input { display: none; }\r\n\r\n  #vex-widget-container .checkbox-box {\r\n    width: 18px;\r\n    height: 18px;\r\n    border: 2px solid var(--border);\r\n    border-radius: 4px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: all 0.2s;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  #vex-widget-container .checkbox-item.selected .checkbox-box {\r\n    background: var(--vex-blue);\r\n    border-color: var(--vex-blue);\r\n  }\r\n\r\n  #vex-widget-container .checkbox-box svg {\r\n    width: 11px;\r\n    height: 11px;\r\n    stroke: #fff;\r\n    stroke-width: 3;\r\n    fill: none;\r\n    opacity: 0;\r\n    transition: opacity 0.2s;\r\n  }\r\n\r\n  #vex-widget-container .checkbox-item.selected .checkbox-box svg { opacity: 1; }\r\n\r\n  \/* Radio cards *\/\r\n  #vex-widget-container .radio-group {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr; \/* Padr\u00e3o 2 colunas para Sim\/N\u00e3o *\/\r\n    gap: 10px;\r\n  }\r\n\r\n  #vex-widget-container .radio-group.cols-3 {\r\n    grid-template-columns: 1fr; \/* Empilha em telas menores *\/\r\n  }\r\n\r\n  @media (min-width: 480px) {\r\n    #vex-widget-container .radio-group.cols-3 { grid-template-columns: 1fr 1fr 1fr; }\r\n  }\r\n\r\n  @media (min-width: 640px) {\r\n    #vex-widget-container .radio-group.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }\r\n  }\r\n\r\n  #vex-widget-container .radio-card {\r\n    padding: 14px 16px;\r\n    border: 1.5px solid var(--border);\r\n    border-radius: var(--radius-sm);\r\n    cursor: pointer;\r\n    transition: all 0.2s;\r\n    text-align: center;\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    color: var(--text-secondary);\r\n    background: var(--surface-card);\r\n  }\r\n\r\n  #vex-widget-container .radio-card:hover {\r\n    border-color: var(--vex-blue);\r\n    background: var(--vex-cyan-light);\r\n  }\r\n\r\n  #vex-widget-container .radio-card.selected {\r\n    border-color: var(--vex-blue);\r\n    background: var(--vex-cyan-light);\r\n    color: var(--vex-dark);\r\n  }\r\n\r\n  #vex-widget-container .radio-card input { display: none; }\r\n\r\n  \/* Section divider *\/\r\n  #vex-widget-container .section-divider {\r\n    border: none;\r\n    border-top: 1px solid var(--border);\r\n    margin: 28px 0;\r\n  }\r\n\r\n  #vex-widget-container .section-title {\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    color: var(--vex-dark);\r\n    margin-bottom: 16px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n  }\r\n\r\n  #vex-widget-container .section-title::before {\r\n    content: '';\r\n    width: 3px;\r\n    height: 16px;\r\n    background: var(--vex-blue);\r\n    border-radius: 2px;\r\n  }\r\n\r\n  \/* Buttons *\/\r\n  #vex-widget-container .btn-row {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-top: 32px;\r\n    gap: 12px;\r\n  }\r\n\r\n  #vex-widget-container .btn {\r\n    font-family: inherit;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    padding: 12px 28px;\r\n    border-radius: var(--radius-sm);\r\n    border: none;\r\n    cursor: pointer;\r\n    transition: all 0.2s;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n  }\r\n\r\n  #vex-widget-container .btn-primary {\r\n    background: var(--vex-blue);\r\n    color: #fff;\r\n  }\r\n\r\n  #vex-widget-container .btn-primary:hover {\r\n    background: #005BBF;\r\n    box-shadow: var(--shadow-md);\r\n  }\r\n\r\n  #vex-widget-container .btn-secondary {\r\n    background: transparent;\r\n    color: var(--text-secondary);\r\n    border: 1.5px solid var(--border);\r\n  }\r\n\r\n  #vex-widget-container .btn-secondary:hover {\r\n    border-color: var(--text-muted);\r\n    background: var(--surface);\r\n  }\r\n\r\n  #vex-widget-container .btn-success {\r\n    background: var(--vex-dark);\r\n    color: #fff;\r\n  }\r\n\r\n  #vex-widget-container .btn-success:hover {\r\n    background: #002554;\r\n    box-shadow: var(--shadow-md);\r\n  }\r\n\r\n  #vex-widget-container .btn svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n\r\n  \/* Output *\/\r\n  #vex-widget-container .output-container {\r\n    display: none;\r\n  }\r\n\r\n  #vex-widget-container .output-container.active {\r\n    display: block;\r\n    animation: vex-fadeIn 0.4s ease;\r\n  }\r\n\r\n  #vex-widget-container .output-card {\r\n    background: var(--surface-card);\r\n    border: 1px solid var(--border);\r\n    border-radius: var(--radius);\r\n    box-shadow: var(--shadow-md);\r\n    overflow: hidden;\r\n  }\r\n\r\n  #vex-widget-container .output-header {\r\n    background: var(--vex-dark);\r\n    padding: 24px 28px;\r\n    color: #fff;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n  }\r\n\r\n  #vex-widget-container .output-header h3 {\r\n    font-size: 18px;\r\n    font-weight: 700;\r\n    margin-bottom: 4px;\r\n  }\r\n\r\n  #vex-widget-container .output-header p {\r\n    font-size: 12px;\r\n    color: rgba(255,255,255,0.6);\r\n  }\r\n\r\n  #vex-widget-container .output-header-actions {\r\n    display: flex;\r\n    gap: 8px;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  #vex-widget-container .btn-icon {\r\n    width: 36px;\r\n    height: 36px;\r\n    border-radius: var(--radius-sm);\r\n    border: 1px solid rgba(255,255,255,0.2);\r\n    background: rgba(255,255,255,0.1);\r\n    color: #fff;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    transition: all 0.2s;\r\n  }\r\n\r\n  #vex-widget-container .btn-icon:hover {\r\n    background: rgba(255,255,255,0.2);\r\n  }\r\n\r\n  #vex-widget-container .btn-icon svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n\r\n  #vex-widget-container .output-body {\r\n    padding: 28px;\r\n  }\r\n\r\n  #vex-widget-container .output-section {\r\n    margin-bottom: 24px;\r\n  }\r\n\r\n  #vex-widget-container .output-section:last-child { margin-bottom: 0; }\r\n\r\n  #vex-widget-container .output-section-title {\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    color: var(--vex-blue);\r\n    margin-bottom: 12px;\r\n    padding-bottom: 8px;\r\n    border-bottom: 1px solid var(--border);\r\n  }\r\n\r\n  #vex-widget-container .output-row {\r\n    display: grid;\r\n    grid-template-columns: 160px 1fr;\r\n    gap: 4px 16px;\r\n    padding: 6px 0;\r\n    font-size: 14px;\r\n  }\r\n\r\n  @media (max-width: 640px) {\r\n    #vex-widget-container .output-row {\r\n      grid-template-columns: 1fr;\r\n      gap: 2px;\r\n    }\r\n  }\r\n\r\n  #vex-widget-container .output-key {\r\n    font-weight: 600;\r\n    color: var(--text-secondary);\r\n    font-size: 13px;\r\n  }\r\n\r\n  #vex-widget-container .output-value {\r\n    color: var(--text-primary);\r\n  }\r\n\r\n  #vex-widget-container .output-value.empty {\r\n    color: var(--text-muted);\r\n    font-style: italic;\r\n  }\r\n\r\n  #vex-widget-container .output-tags {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 6px;\r\n  }\r\n\r\n  #vex-widget-container .output-tag {\r\n    background: var(--vex-cyan-light);\r\n    color: var(--vex-dark);\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    padding: 4px 10px;\r\n    border-radius: 4px;\r\n  }\r\n\r\n  #vex-widget-container .output-notes {\r\n    background: var(--surface);\r\n    border-radius: var(--radius-sm);\r\n    padding: 14px 16px;\r\n    font-size: 14px;\r\n    color: var(--text-secondary);\r\n    line-height: 1.6;\r\n    white-space: pre-wrap;\r\n  }\r\n\r\n  #vex-widget-container .output-footer {\r\n    background: var(--surface);\r\n    border-top: 1px solid var(--border);\r\n    padding: 16px 28px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    gap: 12px;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  #vex-widget-container .output-footer-info {\r\n    font-size: 12px;\r\n    color: var(--text-muted);\r\n  }\r\n\r\n  #vex-widget-container .output-footer-actions {\r\n    display: flex;\r\n    gap: 10px;\r\n  }\r\n\r\n  \/* Banner exclusivo para impress\u00e3o\/PDF *\/\r\n  #vex-widget-container .print-banner {\r\n    display: none;\r\n  }\r\n\r\n  \/* Status badge *\/\r\n  #vex-widget-container .status-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 5px;\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    padding: 4px 10px;\r\n    border-radius: 20px;\r\n  }\r\n\r\n  #vex-widget-container .status-badge.pending {\r\n    background: var(--warning-bg);\r\n    color: var(--warning);\r\n  }\r\n\r\n  #vex-widget-container .status-badge.pending::before {\r\n    content: '';\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background: var(--warning);\r\n  }\r\n\r\n  \/* Alert *\/\r\n  #vex-widget-container .alert {\r\n    padding: 14px 16px;\r\n    border-radius: var(--radius-sm);\r\n    font-size: 13px;\r\n    margin-bottom: 20px;\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 10px;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  #vex-widget-container .alert-info {\r\n    background: var(--vex-cyan-light);\r\n    color: var(--vex-dark);\r\n    border: 1px solid rgba(0,115,230,0.15);\r\n  }\r\n\r\n  #vex-widget-container .alert svg {\r\n    width: 18px;\r\n    height: 18px;\r\n    flex-shrink: 0;\r\n    margin-top: 1px;\r\n  }\r\n\r\n  \/* Viajante extra rows *\/\r\n  #vex-widget-container .viajante-row {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr auto;\r\n    gap: 10px;\r\n    align-items: end;\r\n    padding: 10px 0;\r\n  }\r\n\r\n  @media (max-width: 640px) {\r\n    #vex-widget-container .viajante-row {\r\n      grid-template-columns: 1fr;\r\n    }\r\n  }\r\n\r\n  #vex-widget-container .btn-remove {\r\n    width: 36px;\r\n    height: 36px;\r\n    border-radius: var(--radius-sm);\r\n    border: 1.5px solid var(--border);\r\n    background: var(--surface-card);\r\n    color: var(--error);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    transition: all 0.2s;\r\n    flex-shrink: 0;\r\n    margin-bottom: 1px;\r\n  }\r\n\r\n  #vex-widget-container .btn-remove:hover {\r\n    background: var(--error-bg);\r\n    border-color: var(--error);\r\n  }\r\n\r\n  #vex-widget-container .btn-add {\r\n    font-family: inherit;\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    color: var(--vex-blue);\r\n    background: none;\r\n    border: 1.5px dashed var(--vex-blue);\r\n    border-radius: var(--radius-sm);\r\n    padding: 10px 16px;\r\n    cursor: pointer;\r\n    transition: all 0.2s;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n  }\r\n\r\n  #vex-widget-container .btn-add:hover {\r\n    background: var(--vex-cyan-light);\r\n  }\r\n\r\n  \/* Toast *\/\r\n  #vex-widget-container .toast {\r\n    position: fixed;\r\n    bottom: 24px;\r\n    right: 24px;\r\n    background: var(--vex-dark);\r\n    color: #fff;\r\n    padding: 14px 20px;\r\n    border-radius: var(--radius);\r\n    font-size: 14px;\r\n    font-weight: 500;\r\n    box-shadow: var(--shadow-lg);\r\n    z-index: 9999;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    transform: translateY(100px);\r\n    opacity: 0;\r\n    transition: all 0.35s ease;\r\n  }\r\n\r\n  #vex-widget-container .toast.show {\r\n    transform: translateY(0);\r\n    opacity: 1;\r\n  }\r\n\r\n  #vex-widget-container .toast svg {\r\n    width: 18px;\r\n    height: 18px;\r\n    color: var(--success);\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  \/* --- RESPONSIVIDADE EXTRA PARA TELAS MENORES --- *\/\r\n  @media (max-width: 640px) {\r\n    #vex-widget-container .header-inner { \r\n      padding: 32px 16px 24px; \r\n      flex-direction: column-reverse;\r\n      gap: 20px;\r\n    }\r\n    #vex-widget-container .header-logo {\r\n      align-self: flex-start;\r\n      margin-bottom: 8px;\r\n    }\r\n    #vex-widget-container .header h1 { font-size: 24px; }\r\n    #vex-widget-container .progress-inner { padding: 12px 16px; }\r\n    #vex-widget-container .main { padding: 24px 16px 40px; }\r\n    \r\n    #vex-widget-container .btn-row {\r\n      flex-direction: column-reverse;\r\n      align-items: stretch;\r\n      gap: 12px;\r\n    }\r\n    \r\n    \/* Oculta divs vazias usadas como espa\u00e7adores nativamente *\/\r\n    #vex-widget-container .btn-row > div:empty {\r\n      display: none; \r\n    }\r\n\r\n    #vex-widget-container .btn {\r\n      width: 100%;\r\n      justify-content: center;\r\n    }\r\n\r\n    #vex-widget-container .output-header {\r\n      flex-direction: column;\r\n      gap: 16px;\r\n      padding: 20px 16px;\r\n    }\r\n\r\n    #vex-widget-container .output-header-actions {\r\n      width: 100%;\r\n      justify-content: flex-end;\r\n    }\r\n\r\n    #vex-widget-container .output-body { padding: 20px 16px; }\r\n\r\n    #vex-widget-container .output-footer {\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n      padding: 20px 16px;\r\n      gap: 16px;\r\n    }\r\n\r\n    #vex-widget-container .output-footer-actions {\r\n      flex-direction: column;\r\n      width: 100%;\r\n    }\r\n\r\n    #vex-widget-container .output-footer-actions .btn {\r\n      width: 100%;\r\n    }\r\n  }\r\n\r\n  \/* Print *\/\r\n  @media print {\r\n    #vex-widget-container .header,\r\n    #vex-widget-container .progress-bar,\r\n    #vex-widget-container .btn-row,\r\n    #vex-widget-container .output-header-actions,\r\n    #vex-widget-container .output-footer-actions,\r\n    #vex-widget-container .toast,\r\n    #vex-widget-container .no-print { display: none !important; }\r\n    #vex-widget-container .main { padding: 0; }\r\n    #vex-widget-container .output-container { display: block !important; }\r\n    #vex-widget-container .output-card { border: none; box-shadow: none; }\r\n    #vex-widget-container .output-header { print-color-adjust: exact; -webkit-print-color-adjust: exact; }\r\n    #vex-widget-container .output-body { padding: 20px 0; }\r\n    \r\n    #vex-widget-container .print-banner {\r\n      display: block !important;\r\n      margin-top: 30px;\r\n      margin-bottom: 10px;\r\n      text-align: center;\r\n      page-break-inside: avoid;\r\n    }\r\n    \r\n    #vex-widget-container .print-banner img {\r\n      max-width: 100%;\r\n      height: auto;\r\n      border-radius: var(--radius-sm);\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- In\u00edcio do Container do Widget -->\r\n<div id=\"vex-widget-container\">\r\n\r\n  <!-- Header -->\r\n  <div class=\"header\">\r\n    <div class=\"header-inner\">\r\n      <div class=\"header-content\">\r\n        <div class=\"header-badge\">\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/><path d=\"M2 17l10 5 10-5\"\/><path d=\"M2 12l10 5 10-5\"\/><\/svg>\r\n          Ferramenta gratuita\r\n        <\/div>\r\n        <h1>Gerador de briefing de viagem corporativa<\/h1>\r\n        <p>Padronize as solicita\u00e7\u00f5es de viagem da sua empresa. Preencha as informa\u00e7\u00f5es e gere um briefing formatado, pronto para enviar ao aprovador ou ao time de viagens.<\/p>\r\n      <\/div>\r\n      <div class=\"header-logo\">\r\n        <img decoding=\"async\" src=\"https:\/\/d9hhrg4mnvzow.cloudfront.net\/material.vexpenses.com\/gerador-de-politica-de-viagens-corporativas\/960e5550-logo-vex-vr-horizontal-colorido-branco-tag_106w028000000000000028.png\" alt=\"Logo VExpenses\">\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Progress -->\r\n  <div class=\"progress-bar\">\r\n    <div class=\"progress-inner\">\r\n      <div class=\"progress-step active\" data-step=\"1\">\r\n        <div class=\"progress-dot\">1<\/div>\r\n        <span class=\"progress-label\">Viajante<\/span>\r\n      <\/div>\r\n      <div class=\"progress-line\"><\/div>\r\n      <div class=\"progress-step\" data-step=\"2\">\r\n        <div class=\"progress-dot\">2<\/div>\r\n        <span class=\"progress-label\">Roteiro<\/span>\r\n      <\/div>\r\n      <div class=\"progress-line\"><\/div>\r\n      <div class=\"progress-step\" data-step=\"3\">\r\n        <div class=\"progress-dot\">3<\/div>\r\n        <span class=\"progress-label\">Log\u00edstica<\/span>\r\n      <\/div>\r\n      <div class=\"progress-line\"><\/div>\r\n      <div class=\"progress-step\" data-step=\"4\">\r\n        <div class=\"progress-dot\">4<\/div>\r\n        <span class=\"progress-label\">Observa\u00e7\u00f5es<\/span>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Main -->\r\n  <div class=\"main\">\r\n\r\n    <!-- Step 1: Viajante -->\r\n    <div class=\"step active\" data-step=\"1\">\r\n      <div class=\"step-header\">\r\n        <h2>Dados do viajante e da solicita\u00e7\u00e3o<\/h2>\r\n        <p>Informa\u00e7\u00f5es de quem vai viajar e de quem est\u00e1 solicitando.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"form-grid cols-2\">\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Nome do viajante <span class=\"required\">*<\/span><\/label>\r\n          <input type=\"text\" class=\"form-input\" id=\"viajante-nome\" placeholder=\"Nome completo\">\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Cargo \/ \u00e1rea<\/label>\r\n          <input type=\"text\" class=\"form-input\" id=\"viajante-cargo\" placeholder=\"Ex: Gerente Comercial\">\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Centro de custo<\/label>\r\n          <input type=\"text\" class=\"form-input\" id=\"viajante-cc\" placeholder=\"Ex: Vendas SP\">\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Solicitado por<\/label>\r\n          <input type=\"text\" class=\"form-input\" id=\"solicitante\" placeholder=\"Nome de quem solicita, se diferente\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <hr class=\"section-divider\">\r\n\r\n      <div class=\"section-title\">H\u00e1 mais viajantes nesta mesma viagem?<\/div>\r\n\r\n      <div id=\"viajantes-extras\"><\/div>\r\n\r\n      <button class=\"btn-add\" onclick=\"addViajante()\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\r\n        Adicionar viajante\r\n      <\/button>\r\n\r\n      <div class=\"btn-row\">\r\n        <div><\/div>\r\n        <button class=\"btn btn-primary\" onclick=\"nextStep(2)\">\r\n          Pr\u00f3ximo\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\r\n        <\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Step 2: Roteiro -->\r\n    <div class=\"step\" data-step=\"2\">\r\n      <div class=\"step-header\">\r\n        <h2>Roteiro e justificativa<\/h2>\r\n        <p>Destino, datas e motivo da viagem.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"form-grid cols-2\">\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Cidade de origem <span class=\"required\">*<\/span><\/label>\r\n          <input type=\"text\" class=\"form-input\" id=\"origem\" placeholder=\"Ex: S\u00e3o Paulo\/SP\">\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Cidade de destino <span class=\"required\">*<\/span><\/label>\r\n          <input type=\"text\" class=\"form-input\" id=\"destino\" placeholder=\"Ex: Bras\u00edlia\/DF\">\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Data de ida <span class=\"required\">*<\/span><\/label>\r\n          <input type=\"date\" class=\"form-input\" id=\"data-ida\">\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Data de volta <span class=\"required\">*<\/span><\/label>\r\n          <input type=\"date\" class=\"form-input\" id=\"data-volta\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <hr class=\"section-divider\">\r\n\r\n      <div class=\"form-grid\">\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Motivo da viagem <span class=\"required\">*<\/span><\/label>\r\n          <select class=\"form-select\" id=\"motivo\">\r\n            <option value=\"\">Selecione<\/option>\r\n            <option value=\"Reuni\u00e3o com cliente\">Reuni\u00e3o com cliente<\/option>\r\n            <option value=\"Reuni\u00e3o interna\">Reuni\u00e3o interna<\/option>\r\n            <option value=\"Evento \/ feira \/ congresso\">Evento \/ feira \/ congresso<\/option>\r\n            <option value=\"Treinamento\">Treinamento<\/option>\r\n            <option value=\"Visita t\u00e9cnica\">Visita t\u00e9cnica<\/option>\r\n            <option value=\"Prospec\u00e7\u00e3o comercial\">Prospec\u00e7\u00e3o comercial<\/option>\r\n            <option value=\"Implanta\u00e7\u00e3o \/ onboarding\">Implanta\u00e7\u00e3o \/ onboarding<\/option>\r\n            <option value=\"Outro\">Outro<\/option>\r\n          <\/select>\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Justificativa de neg\u00f3cio <span class=\"required\">*<\/span><\/label>\r\n          <textarea class=\"form-textarea\" id=\"justificativa\" placeholder=\"Descreva o objetivo da viagem e o resultado esperado. Ex: Apresenta\u00e7\u00e3o de proposta comercial para a empresa X, com potencial de contrato de R$ 200k\/ano.\"><\/textarea>\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Agenda prevista no destino <span class=\"hint\">(opcional)<\/span><\/label>\r\n          <textarea class=\"form-textarea\" id=\"agenda\" placeholder=\"Compromissos, hor\u00e1rios e locais. Ex: Dia 15 \u00e0s 10h - reuni\u00e3o no escrit\u00f3rio da empresa X (Av. Paulista, 1000). Dia 15 \u00e0s 14h - visita ao centro de distribui\u00e7\u00e3o.\"><\/textarea>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"btn-row\">\r\n        <button class=\"btn btn-secondary\" onclick=\"prevStep(1)\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg>\r\n          Voltar\r\n        <\/button>\r\n        <button class=\"btn btn-primary\" onclick=\"nextStep(3)\">\r\n          Pr\u00f3ximo\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\r\n        <\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Step 3: Log\u00edstica -->\r\n    <div class=\"step\" data-step=\"3\">\r\n      <div class=\"step-header\">\r\n        <h2>Necessidades de log\u00edstica<\/h2>\r\n        <p>Transporte, hospedagem e deslocamento local.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"section-title\">Transporte a\u00e9reo<\/div>\r\n\r\n      <div class=\"form-grid cols-2\">\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Precisa de voo?<\/label>\r\n          <div class=\"radio-group\">\r\n            <label class=\"radio-card selected\" onclick=\"selectRadio(this, 'precisa-voo')\">\r\n              <input type=\"radio\" name=\"precisa-voo\" value=\"Sim\" checked>\r\n              Sim\r\n            <\/label>\r\n            <label class=\"radio-card\" onclick=\"selectRadio(this, 'precisa-voo')\">\r\n              <input type=\"radio\" name=\"precisa-voo\" value=\"N\u00e3o\">\r\n              N\u00e3o\r\n            <\/label>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"form-group\" id=\"voo-preferencia-group\">\r\n          <label class=\"form-label\">Prefer\u00eancia de hor\u00e1rio<\/label>\r\n          <select class=\"form-select\" id=\"voo-preferencia\">\r\n            <option value=\"\">Sem prefer\u00eancia<\/option>\r\n            <option value=\"Manh\u00e3 (at\u00e9 12h)\">Manh\u00e3 (at\u00e9 12h)<\/option>\r\n            <option value=\"Tarde (12h-18h)\">Tarde (12h-18h)<\/option>\r\n            <option value=\"Noite (ap\u00f3s 18h)\">Noite (ap\u00f3s 18h)<\/option>\r\n            <option value=\"Primeiro voo dispon\u00edvel\">Primeiro voo dispon\u00edvel<\/option>\r\n            <option value=\"\u00daltimo voo dispon\u00edvel\">\u00daltimo voo dispon\u00edvel<\/option>\r\n          <\/select>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div id=\"voo-obs-group\" class=\"form-grid\" style=\"margin-top: 16px;\">\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Observa\u00e7\u00f5es sobre o voo <span class=\"hint\">(opcional)<\/span><\/label>\r\n          <input type=\"text\" class=\"form-input\" id=\"voo-obs\" placeholder=\"Ex: Precisa de assento na janela, bagagem despachada etc.\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <hr class=\"section-divider\">\r\n\r\n      <div class=\"section-title\">Hospedagem<\/div>\r\n\r\n      <div class=\"form-grid cols-2\">\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Precisa de hotel?<\/label>\r\n          <div class=\"radio-group\">\r\n            <label class=\"radio-card selected\" onclick=\"selectRadio(this, 'precisa-hotel')\">\r\n              <input type=\"radio\" name=\"precisa-hotel\" value=\"Sim\" checked>\r\n              Sim\r\n            <\/label>\r\n            <label class=\"radio-card\" onclick=\"selectRadio(this, 'precisa-hotel')\">\r\n              <input type=\"radio\" name=\"precisa-hotel\" value=\"N\u00e3o\">\r\n              N\u00e3o\r\n            <\/label>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"form-group\" id=\"hotel-checkin-group\">\r\n          <label class=\"form-label\">Check-in \/ check-out<\/label>\r\n          <div class=\"form-grid cols-2\" style=\"gap: 10px;\">\r\n            <input type=\"date\" class=\"form-input\" id=\"hotel-checkin\" placeholder=\"Check-in\">\r\n            <input type=\"date\" class=\"form-input\" id=\"hotel-checkout\" placeholder=\"Check-out\">\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div id=\"hotel-extra-group\" class=\"form-grid cols-2\" style=\"margin-top: 16px;\">\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Regi\u00e3o de prefer\u00eancia <span class=\"hint\">(opcional)<\/span><\/label>\r\n          <input type=\"text\" class=\"form-input\" id=\"hotel-regiao\" placeholder=\"Ex: Pr\u00f3ximo \u00e0 Av. Paulista ou ao aeroporto\">\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Observa\u00e7\u00f5es sobre hospedagem <span class=\"hint\">(opcional)<\/span><\/label>\r\n          <input type=\"text\" class=\"form-input\" id=\"hotel-obs\" placeholder=\"Ex: Andar alto, precisa de early check-in\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <hr class=\"section-divider\">\r\n\r\n      <div class=\"section-title\">Deslocamento local<\/div>\r\n\r\n      <div class=\"form-group\">\r\n        <label class=\"form-label\">Como pretende se deslocar no destino?<\/label>\r\n        <div class=\"checkbox-grid cols-3\">\r\n          <label class=\"checkbox-item\">\r\n            <input type=\"checkbox\" value=\"Aplicativo de transporte\" onchange=\"toggleCheckbox(this)\">\r\n            <span class=\"checkbox-box\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>\r\n            Aplicativo\r\n          <\/label>\r\n          <label class=\"checkbox-item\">\r\n            <input type=\"checkbox\" value=\"T\u00e1xi\" onchange=\"toggleCheckbox(this)\">\r\n            <span class=\"checkbox-box\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>\r\n            T\u00e1xi\r\n          <\/label>\r\n          <label class=\"checkbox-item\">\r\n            <input type=\"checkbox\" value=\"Aluguel de carro\" onchange=\"toggleCheckbox(this)\">\r\n            <span class=\"checkbox-box\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>\r\n            Aluguel de carro\r\n          <\/label>\r\n          <label class=\"checkbox-item\">\r\n            <input type=\"checkbox\" value=\"Carro pr\u00f3prio\" onchange=\"toggleCheckbox(this)\">\r\n            <span class=\"checkbox-box\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>\r\n            Carro pr\u00f3prio\r\n          <\/label>\r\n          <label class=\"checkbox-item\">\r\n            <input type=\"checkbox\" value=\"Transfer corporativo\" onchange=\"toggleCheckbox(this)\">\r\n            <span class=\"checkbox-box\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>\r\n            Transfer\r\n          <\/label>\r\n          <label class=\"checkbox-item\">\r\n            <input type=\"checkbox\" value=\"Transporte p\u00fablico\" onchange=\"toggleCheckbox(this)\">\r\n            <span class=\"checkbox-box\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>\r\n            Transporte p\u00fablico\r\n          <\/label>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"btn-row\">\r\n        <button class=\"btn btn-secondary\" onclick=\"prevStep(2)\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg>\r\n          Voltar\r\n        <\/button>\r\n        <button class=\"btn btn-primary\" onclick=\"nextStep(4)\">\r\n          Pr\u00f3ximo\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\r\n        <\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Step 4: Observa\u00e7\u00f5es -->\r\n    <div class=\"step\" data-step=\"4\">\r\n      <div class=\"step-header\">\r\n        <h2>Informa\u00e7\u00f5es complementares<\/h2>\r\n        <p>Or\u00e7amento, urg\u00eancia e observa\u00e7\u00f5es finais.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"form-grid cols-2\">\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Or\u00e7amento estimado <span class=\"hint\">(opcional)<\/span><\/label>\r\n          <input type=\"text\" class=\"form-input\" id=\"orcamento\" placeholder=\"Ex: R$ 3.500,00\">\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Urg\u00eancia<\/label>\r\n          <div class=\"radio-group cols-3\">\r\n            <label class=\"radio-card\" onclick=\"selectRadio(this, 'urgencia')\">\r\n              <input type=\"radio\" name=\"urgencia\" value=\"Normal\">\r\n              Normal\r\n            <\/label>\r\n            <label class=\"radio-card\" onclick=\"selectRadio(this, 'urgencia')\">\r\n              <input type=\"radio\" name=\"urgencia\" value=\"Urgente\">\r\n              Urgente\r\n            <\/label>\r\n            <label class=\"radio-card\" onclick=\"selectRadio(this, 'urgencia')\">\r\n              <input type=\"radio\" name=\"urgencia\" value=\"Emergencial\">\r\n              Emergencial\r\n            <\/label>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <hr class=\"section-divider\">\r\n\r\n      <div class=\"form-grid\">\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Forma de pagamento preferida <span class=\"hint\">(opcional)<\/span><\/label>\r\n          <select class=\"form-select\" id=\"pagamento\">\r\n            <option value=\"\">Selecione<\/option>\r\n            <option value=\"Cart\u00e3o corporativo\">Cart\u00e3o corporativo<\/option>\r\n            <option value=\"Faturamento empresa\">Faturamento empresa<\/option>\r\n            <option value=\"Reembolso ao viajante\">Reembolso ao viajante<\/option>\r\n            <option value=\"A definir com o financeiro\">A definir com o financeiro<\/option>\r\n          <\/select>\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Observa\u00e7\u00f5es gerais <span class=\"hint\">(opcional)<\/span><\/label>\r\n          <textarea class=\"form-textarea\" id=\"observacoes\" placeholder=\"Qualquer informa\u00e7\u00e3o adicional relevante. Ex: O viajante tem restri\u00e7\u00e3o alimentar. A reuni\u00e3o pode estender para o dia seguinte dependendo do andamento. Necessidade de internet 4G no hotel.\"><\/textarea>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"btn-row\">\r\n        <button class=\"btn btn-secondary\" onclick=\"prevStep(3)\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg>\r\n          Voltar\r\n        <\/button>\r\n        <button class=\"btn btn-success\" onclick=\"generateBriefing()\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/><\/svg>\r\n          Gerar briefing\r\n        <\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Output -->\r\n    <div class=\"output-container\" id=\"output\">\r\n      <div class=\"output-card\">\r\n        <div class=\"output-header\">\r\n          <div>\r\n            <h3>Briefing de viagem corporativa<\/h3>\r\n            <p id=\"output-date\"><\/p>\r\n          <\/div>\r\n          <div class=\"output-header-actions\">\r\n            <button class=\"btn-icon\" onclick=\"copyBriefing()\" title=\"Copiar como texto\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"\/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\/><\/svg>\r\n            <\/button>\r\n            <button class=\"btn-icon\" onclick=\"window.print()\" title=\"Imprimir \/ salvar PDF\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"6 9 6 2 18 2 18 9\"\/><path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"\/><rect x=\"6\" y=\"14\" width=\"12\" height=\"8\"\/><\/svg>\r\n            <\/button>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"output-body\" id=\"output-body\">\r\n          <!-- Generated dynamically -->\r\n        <\/div>\r\n\r\n        <!-- Banner exclusivo para o PDF -->\r\n        <div class=\"print-banner\">\r\n          <a href=\"https:\/\/lp.vexpenses.com\/vexpenses-viagens\/?utm_source=materialrico&#038;utm_medium=organic&#038;utm_campaign=gerador-de-briefing&#038;utm_content=bannerpdf\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n            <img decoding=\"async\" src=\"https:\/\/vexpenses.com.br\/blog\/wp-content\/uploads\/2026\/01\/2026-01-14_material-rico_banner_gerador-de-despesas.png\" alt=\"Conhe\u00e7a o VExpenses\">\r\n          <\/a>\r\n        <\/div>\r\n\r\n        <div class=\"output-footer\">\r\n          <span class=\"output-footer-info\">Briefing gerado com o Gerador de Briefing de Viagem da VExpenses<\/span>\r\n          <div class=\"output-footer-actions\">\r\n            <button class=\"btn btn-secondary\" onclick=\"resetForm()\">\r\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"1 4 1 10 7 10\"\/><path d=\"M3.51 15a9 9 0 1 0 2.13-9.36L1 10\"\/><\/svg>\r\n              Novo briefing\r\n            <\/button>\r\n            <button class=\"btn btn-primary\" onclick=\"copyBriefing()\">\r\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"\/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\/><\/svg>\r\n              Copiar briefing\r\n            <\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- Toast -->\r\n  <div class=\"toast\" id=\"toast\">\r\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>\r\n    <span id=\"toast-msg\">Briefing copiado!<\/span>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n  let viajantesCount = 0;\r\n\r\n  function nextStep(step) {\r\n    if (!validateCurrentStep()) return;\r\n    showStep(step);\r\n  }\r\n\r\n  function prevStep(step) {\r\n    showStep(step);\r\n  }\r\n\r\n  function showStep(step) {\r\n    const container = document.getElementById('vex-widget-container');\r\n\r\n    container.querySelectorAll('.step').forEach(s => s.classList.remove('active'));\r\n    container.querySelector(`.step[data-step=\"${step}\"]`).classList.add('active');\r\n\r\n    container.querySelectorAll('.progress-step').forEach((ps, i) => {\r\n      const stepNum = i + 1;\r\n      ps.classList.remove('active', 'completed');\r\n      if (stepNum === step) ps.classList.add('active');\r\n      else if (stepNum < step) ps.classList.add('completed');\r\n    });\r\n\r\n    container.querySelectorAll('.progress-line').forEach((line, i) => {\r\n      line.classList.toggle('completed', i + 1 < step);\r\n    });\r\n\r\n    container.querySelectorAll('.progress-step .progress-dot').forEach((dot, i) => {\r\n      const stepNum = i + 1;\r\n      if (stepNum < step) {\r\n        dot.innerHTML = '<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>';\r\n      } else {\r\n        dot.textContent = stepNum;\r\n      }\r\n    });\r\n\r\n    window.scrollTo({ top: 0, behavior: 'smooth' });\r\n  }\r\n\r\n  function validateCurrentStep() {\r\n    const activeStep = document.querySelector('#vex-widget-container .step.active');\r\n    const step = parseInt(activeStep.dataset.step);\r\n\r\n    if (step === 1) {\r\n      const nome = document.getElementById('viajante-nome').value.trim();\r\n      if (!nome) { highlightField('viajante-nome'); return false; }\r\n    }\r\n\r\n    if (step === 2) {\r\n      const fields = ['origem', 'destino', 'data-ida', 'data-volta', 'motivo', 'justificativa'];\r\n      for (const f of fields) {\r\n        const el = document.getElementById(f);\r\n        if (!el.value.trim()) { highlightField(f); return false; }\r\n      }\r\n    }\r\n\r\n    return true;\r\n  }\r\n\r\n  function highlightField(id) {\r\n    const el = document.getElementById(id);\r\n    el.style.borderColor = 'var(--error)';\r\n    el.style.boxShadow = '0 0 0 3px rgba(220,38,38,0.1)';\r\n    el.focus();\r\n    setTimeout(() => {\r\n      el.style.borderColor = '';\r\n      el.style.boxShadow = '';\r\n    }, 2500);\r\n  }\r\n\r\n  function selectRadio(card, name) {\r\n    const group = card.closest('.radio-group');\r\n    group.querySelectorAll('.radio-card').forEach(c => c.classList.remove('selected'));\r\n    card.classList.add('selected');\r\n    card.querySelector('input').checked = true;\r\n  }\r\n\r\n  function toggleCheckbox(input) {\r\n    input.parentElement.classList.toggle('selected', input.checked);\r\n  }\r\n\r\n  function addViajante() {\r\n    viajantesCount++;\r\n    const container = document.getElementById('viajantes-extras');\r\n    const row = document.createElement('div');\r\n    row.className = 'viajante-row';\r\n    row.id = `viajante-row-${viajantesCount}`;\r\n    row.innerHTML = `\r\n      <div class=\"form-group\">\r\n        <label class=\"form-label\">Nome<\/label>\r\n        <input type=\"text\" class=\"form-input viajante-extra-nome\" placeholder=\"Nome completo\">\r\n      <\/div>\r\n      <div class=\"form-group\">\r\n        <label class=\"form-label\">Cargo \/ \u00e1rea<\/label>\r\n        <input type=\"text\" class=\"form-input viajante-extra-cargo\" placeholder=\"Ex: Analista Comercial\">\r\n      <\/div>\r\n      <button class=\"btn-remove\" onclick=\"removeViajante(${viajantesCount})\" title=\"Remover\">\r\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>\r\n      <\/button>\r\n    `;\r\n    container.appendChild(row);\r\n  }\r\n\r\n  function removeViajante(id) {\r\n    document.getElementById(`viajante-row-${id}`)?.remove();\r\n  }\r\n\r\n  function getVal(id) {\r\n    const el = document.getElementById(id);\r\n    return el ? el.value.trim() : '';\r\n  }\r\n\r\n  function getRadio(name) {\r\n    const checked = document.querySelector(`#vex-widget-container input[name=\"${name}\"]:checked`);\r\n    return checked ? checked.value : '';\r\n  }\r\n\r\n  function getCheckedValues(selector) {\r\n    return Array.from(document.querySelectorAll(`#vex-widget-container ${selector}`))\r\n      .filter(cb => cb.checked)\r\n      .map(cb => cb.value);\r\n  }\r\n\r\n  function formatDate(dateStr) {\r\n    if (!dateStr) return '';\r\n    const [y, m, d] = dateStr.split('-');\r\n    return `${d}\/${m}\/${y}`;\r\n  }\r\n\r\n  function generateBriefing() {\r\n    const data = {\r\n      viajante: getVal('viajante-nome'),\r\n      cargo: getVal('viajante-cargo'),\r\n      cc: getVal('viajante-cc'),\r\n      solicitante: getVal('solicitante'),\r\n      viajantesExtras: [],\r\n      origem: getVal('origem'),\r\n      destino: getVal('destino'),\r\n      dataIda: getVal('data-ida'),\r\n      dataVolta: getVal('data-volta'),\r\n      motivo: getVal('motivo'),\r\n      justificativa: getVal('justificativa'),\r\n      agenda: getVal('agenda'),\r\n      precisaVoo: getRadio('precisa-voo'),\r\n      vooPreferencia: getVal('voo-preferencia'),\r\n      vooObs: getVal('voo-obs'),\r\n      precisaHotel: getRadio('precisa-hotel'),\r\n      hotelCheckin: getVal('hotel-checkin'),\r\n      hotelCheckout: getVal('hotel-checkout'),\r\n      hotelRegiao: getVal('hotel-regiao'),\r\n      hotelObs: getVal('hotel-obs'),\r\n      deslocamento: getCheckedValues('.checkbox-grid input[type=\"checkbox\"]'),\r\n      orcamento: getVal('orcamento'),\r\n      urgencia: getRadio('urgencia'),\r\n      pagamento: getVal('pagamento'),\r\n      observacoes: getVal('observacoes'),\r\n    };\r\n\r\n    document.querySelectorAll('#vex-widget-container .viajante-row').forEach(row => {\r\n      const nome = row.querySelector('.viajante-extra-nome')?.value.trim();\r\n      const cargo = row.querySelector('.viajante-extra-cargo')?.value.trim();\r\n      if (nome) data.viajantesExtras.push({ nome, cargo });\r\n    });\r\n\r\n    renderOutput(data);\r\n  }\r\n\r\n  function renderOutput(d) {\r\n    const now = new Date();\r\n    const dateStr = now.toLocaleDateString('pt-BR', { day: '2-digit', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit' });\r\n    document.getElementById('output-date').textContent = `Gerado em ${dateStr}`;\r\n\r\n    let viajantesHtml = `\r\n      <div class=\"output-row\">\r\n        <span class=\"output-key\">Viajante principal<\/span>\r\n        <span class=\"output-value\">${d.viajante}${d.cargo ? ' \u2014 ' + d.cargo : ''}<\/span>\r\n      <\/div>\r\n    `;\r\n\r\n    if (d.viajantesExtras.length > 0) {\r\n      d.viajantesExtras.forEach((v, i) => {\r\n        viajantesHtml += `\r\n          <div class=\"output-row\">\r\n            <span class=\"output-key\">Viajante ${i + 2}<\/span>\r\n            <span class=\"output-value\">${v.nome}${v.cargo ? ' \u2014 ' + v.cargo : ''}<\/span>\r\n          <\/div>\r\n        `;\r\n      });\r\n    }\r\n\r\n    if (d.cc) {\r\n      viajantesHtml += `\r\n        <div class=\"output-row\">\r\n          <span class=\"output-key\">Centro de custo<\/span>\r\n          <span class=\"output-value\">${d.cc}<\/span>\r\n        <\/div>\r\n      `;\r\n    }\r\n\r\n    if (d.solicitante) {\r\n      viajantesHtml += `\r\n        <div class=\"output-row\">\r\n          <span class=\"output-key\">Solicitado por<\/span>\r\n          <span class=\"output-value\">${d.solicitante}<\/span>\r\n        <\/div>\r\n      `;\r\n    }\r\n\r\n    let nights = '';\r\n    if (d.dataIda && d.dataVolta) {\r\n      const ida = new Date(d.dataIda);\r\n      const volta = new Date(d.dataVolta);\r\n      const diff = Math.ceil((volta - ida) \/ (1000 * 60 * 60 * 24));\r\n      if (diff > 0) nights = ` (${diff} ${diff === 1 ? 'dia' : 'dias'})`;\r\n    }\r\n\r\n    let logisticaHtml = '';\r\n\r\n    if (d.precisaVoo === 'Sim') {\r\n      logisticaHtml += `\r\n        <div class=\"output-row\">\r\n          <span class=\"output-key\">Transporte a\u00e9reo<\/span>\r\n          <span class=\"output-value\">Sim${d.vooPreferencia ? ' \u2014 Prefer\u00eancia: ' + d.vooPreferencia : ''}<\/span>\r\n        <\/div>\r\n      `;\r\n      if (d.vooObs) {\r\n        logisticaHtml += `\r\n          <div class=\"output-row\">\r\n            <span class=\"output-key\">Obs. sobre voo<\/span>\r\n            <span class=\"output-value\">${d.vooObs}<\/span>\r\n          <\/div>\r\n        `;\r\n      }\r\n    } else if (d.precisaVoo === 'N\u00e3o') {\r\n      logisticaHtml += `\r\n        <div class=\"output-row\">\r\n          <span class=\"output-key\">Transporte a\u00e9reo<\/span>\r\n          <span class=\"output-value\">N\u00e3o necess\u00e1rio<\/span>\r\n        <\/div>\r\n      `;\r\n    }\r\n\r\n    if (d.precisaHotel === 'Sim') {\r\n      let hotelDates = '';\r\n      if (d.hotelCheckin && d.hotelCheckout) {\r\n        const ci = new Date(d.hotelCheckin);\r\n        const co = new Date(d.hotelCheckout);\r\n        const hotelNights = Math.ceil((co - ci) \/ (1000 * 60 * 60 * 24));\r\n        hotelDates = ` \u2014 ${formatDate(d.hotelCheckin)} a ${formatDate(d.hotelCheckout)}`;\r\n        if (hotelNights > 0) hotelDates += ` (${hotelNights} ${hotelNights === 1 ? 'di\u00e1ria' : 'di\u00e1rias'})`;\r\n      }\r\n      logisticaHtml += `\r\n        <div class=\"output-row\">\r\n          <span class=\"output-key\">Hospedagem<\/span>\r\n          <span class=\"output-value\">Sim${hotelDates}<\/span>\r\n        <\/div>\r\n      `;\r\n      if (d.hotelRegiao) {\r\n        logisticaHtml += `\r\n          <div class=\"output-row\">\r\n            <span class=\"output-key\">Regi\u00e3o preferida<\/span>\r\n            <span class=\"output-value\">${d.hotelRegiao}<\/span>\r\n          <\/div>\r\n        `;\r\n      }\r\n      if (d.hotelObs) {\r\n        logisticaHtml += `\r\n          <div class=\"output-row\">\r\n            <span class=\"output-key\">Obs. hospedagem<\/span>\r\n            <span class=\"output-value\">${d.hotelObs}<\/span>\r\n          <\/div>\r\n        `;\r\n      }\r\n    } else if (d.precisaHotel === 'N\u00e3o') {\r\n      logisticaHtml += `\r\n        <div class=\"output-row\">\r\n          <span class=\"output-key\">Hospedagem<\/span>\r\n          <span class=\"output-value\">N\u00e3o necess\u00e1rio<\/span>\r\n        <\/div>\r\n      `;\r\n    }\r\n\r\n    if (d.deslocamento.length > 0) {\r\n      logisticaHtml += `\r\n        <div class=\"output-row\">\r\n          <span class=\"output-key\">Deslocamento local<\/span>\r\n          <span class=\"output-value\">\r\n            <div class=\"output-tags\">${d.deslocamento.map(t => `<span class=\"output-tag\">${t}<\/span>`).join('')}<\/div>\r\n          <\/span>\r\n        <\/div>\r\n      `;\r\n    }\r\n\r\n    let complementarHtml = '';\r\n\r\n    if (d.orcamento) {\r\n      complementarHtml += `\r\n        <div class=\"output-row\">\r\n          <span class=\"output-key\">Or\u00e7amento estimado<\/span>\r\n          <span class=\"output-value\">${d.orcamento}<\/span>\r\n        <\/div>\r\n      `;\r\n    }\r\n\r\n    if (d.urgencia) {\r\n      complementarHtml += `\r\n        <div class=\"output-row\">\r\n          <span class=\"output-key\">Urg\u00eancia<\/span>\r\n          <span class=\"output-value\"><span class=\"status-badge pending\">${d.urgencia}<\/span><\/span>\r\n        <\/div>\r\n      `;\r\n    }\r\n\r\n    if (d.pagamento) {\r\n      complementarHtml += `\r\n        <div class=\"output-row\">\r\n          <span class=\"output-key\">Pagamento<\/span>\r\n          <span class=\"output-value\">${d.pagamento}<\/span>\r\n        <\/div>\r\n      `;\r\n    }\r\n\r\n    const body = document.getElementById('output-body');\r\n    body.innerHTML = `\r\n      <div class=\"output-section\">\r\n        <div class=\"output-section-title\">Viajante<\/div>\r\n        ${viajantesHtml}\r\n      <\/div>\r\n\r\n      <div class=\"output-section\">\r\n        <div class=\"output-section-title\">Roteiro<\/div>\r\n        <div class=\"output-row\">\r\n          <span class=\"output-key\">Trecho<\/span>\r\n          <span class=\"output-value\">${d.origem} \u2192 ${d.destino}<\/span>\r\n        <\/div>\r\n        <div class=\"output-row\">\r\n          <span class=\"output-key\">Per\u00edodo<\/span>\r\n          <span class=\"output-value\">${formatDate(d.dataIda)} a ${formatDate(d.dataVolta)}${nights}<\/span>\r\n        <\/div>\r\n        <div class=\"output-row\">\r\n          <span class=\"output-key\">Motivo<\/span>\r\n          <span class=\"output-value\">${d.motivo}<\/span>\r\n        <\/div>\r\n        <div class=\"output-row\">\r\n          <span class=\"output-key\">Justificativa<\/span>\r\n          <span class=\"output-value\">${d.justificativa}<\/span>\r\n        <\/div>\r\n        ${d.agenda ? `\r\n        <div class=\"output-row\">\r\n          <span class=\"output-key\">Agenda<\/span>\r\n          <span class=\"output-value\">${d.agenda}<\/span>\r\n        <\/div>\r\n        ` : ''}\r\n      <\/div>\r\n\r\n      <div class=\"output-section\">\r\n        <div class=\"output-section-title\">Log\u00edstica<\/div>\r\n        ${logisticaHtml}\r\n      <\/div>\r\n\r\n      ${complementarHtml ? `\r\n      <div class=\"output-section\">\r\n        <div class=\"output-section-title\">Informa\u00e7\u00f5es complementares<\/div>\r\n        ${complementarHtml}\r\n      <\/div>\r\n      ` : ''}\r\n\r\n      ${d.observacoes ? `\r\n      <div class=\"output-section\">\r\n        <div class=\"output-section-title\">Observa\u00e7\u00f5es<\/div>\r\n        <div class=\"output-notes\">${d.observacoes}<\/div>\r\n      <\/div>\r\n      ` : ''}\r\n    `;\r\n\r\n    const container = document.getElementById('vex-widget-container');\r\n    \r\n    container.querySelectorAll('.step').forEach(s => s.classList.remove('active'));\r\n    container.querySelector('.progress-bar').style.display = 'none';\r\n    document.getElementById('output').classList.add('active');\r\n    container.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n  }\r\n\r\n  function copyBriefing() {\r\n    const body = document.getElementById('output-body');\r\n    const sections = body.querySelectorAll('.output-section');\r\n    let text = '=== BRIEFING DE VIAGEM CORPORATIVA ===\\n\\n';\r\n\r\n    sections.forEach(section => {\r\n      const title = section.querySelector('.output-section-title')?.textContent;\r\n      if (title) text += `--- ${title.toUpperCase()} ---\\n`;\r\n\r\n      section.querySelectorAll('.output-row').forEach(row => {\r\n        const key = row.querySelector('.output-key')?.textContent;\r\n        const valueEl = row.querySelector('.output-value');\r\n        let value = '';\r\n\r\n        const tags = valueEl?.querySelectorAll('.output-tag');\r\n        if (tags && tags.length > 0) {\r\n          value = Array.from(tags).map(t => t.textContent).join(', ');\r\n        } else {\r\n          const badge = valueEl?.querySelector('.status-badge');\r\n          value = badge ? badge.textContent.trim() : (valueEl?.textContent.trim() || '');\r\n        }\r\n\r\n        if (key && value) text += `${key}: ${value}\\n`;\r\n      });\r\n\r\n      const notes = section.querySelector('.output-notes');\r\n      if (notes) text += `${notes.textContent.trim()}\\n`;\r\n\r\n      text += '\\n';\r\n    });\r\n\r\n    text += `Gerado em: ${document.getElementById('output-date').textContent.replace('Gerado em ', '')}\\n`;\r\n    text += 'Ferramenta: Gerador de Briefing de Viagem \u2014 VExpenses\\n';\r\n\r\n    navigator.clipboard.writeText(text).then(() => {\r\n      showToast('Briefing copiado para a \u00e1rea de transfer\u00eancia!');\r\n    }).catch(() => {\r\n      const ta = document.createElement('textarea');\r\n      ta.value = text;\r\n      document.body.appendChild(ta);\r\n      ta.select();\r\n      document.execCommand('copy');\r\n      document.body.removeChild(ta);\r\n      showToast('Briefing copiado!');\r\n    });\r\n  }\r\n\r\n  function showToast(msg) {\r\n    const toast = document.getElementById('toast');\r\n    document.getElementById('toast-msg').textContent = msg;\r\n    toast.classList.add('show');\r\n    setTimeout(() => toast.classList.remove('show'), 3000);\r\n  }\r\n\r\n  function resetForm() {\r\n    const container = document.getElementById('vex-widget-container');\r\n    \r\n    container.querySelectorAll('.form-input, .form-textarea, .form-select').forEach(el => {\r\n      if (el.type === 'date') el.value = '';\r\n      else el.value = '';\r\n    });\r\n\r\n    container.querySelectorAll('.checkbox-item').forEach(item => {\r\n      item.classList.remove('selected');\r\n      item.querySelector('input').checked = false;\r\n    });\r\n\r\n    container.querySelectorAll('.radio-card').forEach(card => {\r\n      card.classList.remove('selected');\r\n      card.querySelector('input').checked = false;\r\n    });\r\n\r\n    container.querySelectorAll('.radio-group').forEach(group => {\r\n      const first = group.querySelector('.radio-card');\r\n      if (first && group.closest('.step[data-step=\"3\"]')) {\r\n        first.classList.add('selected');\r\n        first.querySelector('input').checked = true;\r\n      }\r\n    });\r\n\r\n    document.getElementById('viajantes-extras').innerHTML = '';\r\n    viajantesCount = 0;\r\n\r\n    document.getElementById('output').classList.remove('active');\r\n    container.querySelector('.progress-bar').style.display = '';\r\n    showStep(1);\r\n  }\r\n<\/script>\r\n\r\n","protected":false},"excerpt":{"rendered":"Ferramenta gratuita Gerador de briefing de viagem corporativa Padronize as solicita\u00e7\u00f5es de viagem da sua empresa. Preencha as informa\u00e7\u00f5es e gere um briefing formatado, pronto para enviar ao aprovador ou ao time de viagens. 1 Viajante 2 Roteiro 3 Log\u00edstica 4 Observa\u00e7\u00f5es Dados do viajante e da solicita\u00e7\u00e3o Informa\u00e7\u00f5es de quem vai viajar e de [&hellip;]","protected":false},"author":39,"featured_media":0,"parent":0,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-43861","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Gerador de Briefing de Viagem Corporativa - Blog<\/title>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gerador de Briefing de Viagem Corporativa - Blog\" \/>\n<meta property=\"og:description\" content=\"Ferramenta gratuita Gerador de briefing de viagem corporativa Padronize as solicita\u00e7\u00f5es de viagem da sua empresa. Preencha as informa\u00e7\u00f5es e gere um briefing formatado, pronto para enviar ao aprovador ou ao time de viagens. 1 Viajante 2 Roteiro 3 Log\u00edstica 4 Observa\u00e7\u00f5es Dados do viajante e da solicita\u00e7\u00e3o Informa\u00e7\u00f5es de quem vai viajar e de [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vexpenses.com.br\/blog\/gerador-de-briefing-de-viagem-corporativa\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-27T22:37:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d9hhrg4mnvzow.cloudfront.net\/material.vexpenses.com\/gerador-de-politica-de-viagens-corporativas\/960e5550-logo-vex-vr-horizontal-colorido-branco-tag_106w028000000000000028.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/gerador-de-briefing-de-viagem-corporativa\\\/\",\"url\":\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/gerador-de-briefing-de-viagem-corporativa\\\/\",\"name\":\"Gerador de Briefing de Viagem Corporativa - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/gerador-de-briefing-de-viagem-corporativa\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/gerador-de-briefing-de-viagem-corporativa\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d9hhrg4mnvzow.cloudfront.net\\\/material.vexpenses.com\\\/gerador-de-politica-de-viagens-corporativas\\\/960e5550-logo-vex-vr-horizontal-colorido-branco-tag_106w028000000000000028.png\",\"datePublished\":\"2026-04-07T20:51:47+00:00\",\"dateModified\":\"2026-05-27T22:37:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/gerador-de-briefing-de-viagem-corporativa\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/gerador-de-briefing-de-viagem-corporativa\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/gerador-de-briefing-de-viagem-corporativa\\\/#primaryimage\",\"url\":\"https:\\\/\\\/d9hhrg4mnvzow.cloudfront.net\\\/material.vexpenses.com\\\/gerador-de-politica-de-viagens-corporativas\\\/960e5550-logo-vex-vr-horizontal-colorido-branco-tag_106w028000000000000028.png\",\"contentUrl\":\"https:\\\/\\\/d9hhrg4mnvzow.cloudfront.net\\\/material.vexpenses.com\\\/gerador-de-politica-de-viagens-corporativas\\\/960e5550-logo-vex-vr-horizontal-colorido-branco-tag_106w028000000000000028.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/gerador-de-briefing-de-viagem-corporativa\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gerador de Briefing de Viagem Corporativa\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/\",\"name\":\"Blog\",\"description\":\"Blog VExpenses\",\"publisher\":{\"@id\":\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/#organization\",\"name\":\"Blog\",\"url\":\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/logo-vr-alt.png\",\"contentUrl\":\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/logo-vr-alt.png\",\"width\":709,\"height\":230,\"caption\":\"Blog\"},\"image\":{\"@id\":\"https:\\\/\\\/vexpenses.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gerador de Briefing de Viagem Corporativa - Blog","robots":{"index":"noindex","follow":"follow"},"og_locale":"pt_BR","og_type":"article","og_title":"Gerador de Briefing de Viagem Corporativa - Blog","og_description":"Ferramenta gratuita Gerador de briefing de viagem corporativa Padronize as solicita\u00e7\u00f5es de viagem da sua empresa. Preencha as informa\u00e7\u00f5es e gere um briefing formatado, pronto para enviar ao aprovador ou ao time de viagens. 1 Viajante 2 Roteiro 3 Log\u00edstica 4 Observa\u00e7\u00f5es Dados do viajante e da solicita\u00e7\u00e3o Informa\u00e7\u00f5es de quem vai viajar e de [&hellip;]","og_url":"https:\/\/vexpenses.com.br\/blog\/gerador-de-briefing-de-viagem-corporativa\/","og_site_name":"Blog","article_modified_time":"2026-05-27T22:37:26+00:00","og_image":[{"url":"https:\/\/d9hhrg4mnvzow.cloudfront.net\/material.vexpenses.com\/gerador-de-politica-de-viagens-corporativas\/960e5550-logo-vex-vr-horizontal-colorido-branco-tag_106w028000000000000028.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. tempo de leitura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/vexpenses.com.br\/blog\/gerador-de-briefing-de-viagem-corporativa\/","url":"https:\/\/vexpenses.com.br\/blog\/gerador-de-briefing-de-viagem-corporativa\/","name":"Gerador de Briefing de Viagem Corporativa - Blog","isPartOf":{"@id":"https:\/\/vexpenses.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vexpenses.com.br\/blog\/gerador-de-briefing-de-viagem-corporativa\/#primaryimage"},"image":{"@id":"https:\/\/vexpenses.com.br\/blog\/gerador-de-briefing-de-viagem-corporativa\/#primaryimage"},"thumbnailUrl":"https:\/\/d9hhrg4mnvzow.cloudfront.net\/material.vexpenses.com\/gerador-de-politica-de-viagens-corporativas\/960e5550-logo-vex-vr-horizontal-colorido-branco-tag_106w028000000000000028.png","datePublished":"2026-04-07T20:51:47+00:00","dateModified":"2026-05-27T22:37:26+00:00","breadcrumb":{"@id":"https:\/\/vexpenses.com.br\/blog\/gerador-de-briefing-de-viagem-corporativa\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vexpenses.com.br\/blog\/gerador-de-briefing-de-viagem-corporativa\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/vexpenses.com.br\/blog\/gerador-de-briefing-de-viagem-corporativa\/#primaryimage","url":"https:\/\/d9hhrg4mnvzow.cloudfront.net\/material.vexpenses.com\/gerador-de-politica-de-viagens-corporativas\/960e5550-logo-vex-vr-horizontal-colorido-branco-tag_106w028000000000000028.png","contentUrl":"https:\/\/d9hhrg4mnvzow.cloudfront.net\/material.vexpenses.com\/gerador-de-politica-de-viagens-corporativas\/960e5550-logo-vex-vr-horizontal-colorido-branco-tag_106w028000000000000028.png"},{"@type":"BreadcrumbList","@id":"https:\/\/vexpenses.com.br\/blog\/gerador-de-briefing-de-viagem-corporativa\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/vexpenses.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Gerador de Briefing de Viagem Corporativa"}]},{"@type":"WebSite","@id":"https:\/\/vexpenses.com.br\/blog\/#website","url":"https:\/\/vexpenses.com.br\/blog\/","name":"Blog","description":"Blog VExpenses","publisher":{"@id":"https:\/\/vexpenses.com.br\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vexpenses.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/vexpenses.com.br\/blog\/#organization","name":"Blog","url":"https:\/\/vexpenses.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/vexpenses.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/vexpenses.com.br\/blog\/wp-content\/uploads\/2025\/08\/logo-vr-alt.png","contentUrl":"https:\/\/vexpenses.com.br\/blog\/wp-content\/uploads\/2025\/08\/logo-vr-alt.png","width":709,"height":230,"caption":"Blog"},"image":{"@id":"https:\/\/vexpenses.com.br\/blog\/#\/schema\/logo\/image\/"}}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/vexpenses.com.br\/blog\/wp-json\/wp\/v2\/pages\/43861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vexpenses.com.br\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vexpenses.com.br\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vexpenses.com.br\/blog\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/vexpenses.com.br\/blog\/wp-json\/wp\/v2\/comments?post=43861"}],"version-history":[{"count":7,"href":"https:\/\/vexpenses.com.br\/blog\/wp-json\/wp\/v2\/pages\/43861\/revisions"}],"predecessor-version":[{"id":44357,"href":"https:\/\/vexpenses.com.br\/blog\/wp-json\/wp\/v2\/pages\/43861\/revisions\/44357"}],"wp:attachment":[{"href":"https:\/\/vexpenses.com.br\/blog\/wp-json\/wp\/v2\/media?parent=43861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}