Início
Documentos
Visualizador NF-e XML

Visualizador NF-e XML

Visualizador NF-e XML: selecione NFE e xml com rapidez e contexto claro. Roda no navegador e mantém o fluxo leve. Boa para tarefas recorrentes que devem.

Sem cadastro · 100% gratuito · Privado

Arraste e solte o arquivo XML da NF-e aqui

XML (NF-e, NFC-e, CT-e)

Colar XML da NF-e

<div class="flex gap-3">
                <button type="button" id="nfe-paste-confirm" class="ft-btn ft-btn-primary">Processar XML</button>
                <button type="button" id="nfe-paste-cancel" class="ft-btn ft-btn-ghost">Cancelar</button>
            </div>
        </div>
    </div>

<div id="nfe-results" class="hidden">

<div class="flex flex-wrap items-center gap-3 mb-4 p-3 bg-surface border border-border rounded-xl">
            <div class="flex items-center gap-2 min-w-0">
                <svg class="w-4 h-4 text-green-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <span id="nfe-doc-type" class="text-sm font-semibold text-text-primary"></span>
                <span id="nfe-chave" class="text-xs text-text-muted font-mono truncate"></span>
            </div>
            <button type="button" id="btn-nfe-reset" class="ml-auto ft-btn ft-btn-ghost ft-btn-sm">Carregar novo arquivo</button>
        </div>

<div data-tool-pair="nfe-viewer">
            <div role="tablist" class="ft-tab-list mb-4">
                <button role="tab" class="ft-tab ft-tab--active" data-tab="nfe-t0" id="nfe-tab-0" aria-controls="nfe-panel-0" aria-selected="true">Emitente</button>
                <button role="tab" class="ft-tab" data-tab="nfe-t1" id="nfe-tab-1" aria-controls="nfe-panel-1" aria-selected="false" tabindex="-1">Destinatário</button>
                <button role="tab" class="ft-tab" data-tab="nfe-t2" id="nfe-tab-2" aria-controls="nfe-panel-2" aria-selected="false" tabindex="-1">Produtos</button>
                <button role="tab" class="ft-tab" data-tab="nfe-t3" id="nfe-tab-3" aria-controls="nfe-panel-3" aria-selected="false" tabindex="-1">Impostos</button>
                <button role="tab" class="ft-tab" data-tab="nfe-t4" id="nfe-tab-4" aria-controls="nfe-panel-4" aria-selected="false" tabindex="-1">Totais</button>
            </div>

<div role="tabpanel" id="nfe-panel-0" aria-labelledby="nfe-tab-0" data-tab-content="nfe-t0">
                <div class="bg-surface border border-border rounded-2xl overflow-hidden">
                    <div class="px-4 py-3 bg-elevated border-b border-border">
                        <span class="text-sm font-semibold text-text-primary">Emitente</span>
                    </div>
                    <div class="p-4">
                        <dl id="nfe-emitente" class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3"></dl>
                    </div>
                </div>
            </div>

<div role="tabpanel" id="nfe-panel-1" aria-labelledby="nfe-tab-1" data-tab-content="nfe-t1" hidden>
                <div class="bg-surface border border-border rounded-2xl overflow-hidden">
                    <div class="px-4 py-3 bg-elevated border-b border-border">
                        <span class="text-sm font-semibold text-text-primary">Destinatário</span>
                    </div>
                    <div class="p-4">
                        <dl id="nfe-destinatario" class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3"></dl>
                    </div>
                </div>
            </div>

<div role="tabpanel" id="nfe-panel-2" aria-labelledby="nfe-tab-2" data-tab-content="nfe-t2" hidden>
                <div class="bg-surface border border-border rounded-2xl overflow-hidden">
                    <div class="px-4 py-3 bg-elevated border-b border-border flex items-center justify-between">
                        <span class="text-sm font-semibold text-text-primary">Produtos</span>
                        <span id="nfe-prod-count" class="text-xs text-text-muted"></span>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="ft-table w-full text-xs">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Código</th>
                                    <th class="min-w-48">Descrição</th>
                                    <th>NCM</th>
                                    <th>CFOP</th>
                                    <th class="text-right">Qtd</th>
                                    <th class="text-right">Unit. (R$)</th>
                                    <th class="text-right">Total (R$)</th>
                                </tr>
                            </thead>
                            <tbody id="nfe-produtos-tbody"></tbody>
                        </table>
                    </div>
                </div>
            </div>

<div role="tabpanel" id="nfe-panel-3" aria-labelledby="nfe-tab-3" data-tab-content="nfe-t3" hidden>
                <div class="bg-surface border border-border rounded-2xl overflow-hidden">
                    <div class="px-4 py-3 bg-elevated border-b border-border">
                        <span class="text-sm font-semibold text-text-primary">Impostos</span>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="ft-table w-full text-sm">
                            <thead>
                                <tr>
                                    <th>Imposto</th>
                                    <th class="text-right">Base de Cálculo (R$)</th>
                                    <th class="text-right">Alíquota (%)</th>
                                    <th class="text-right">Valor (R$)</th>
                                </tr>
                            </thead>
                            <tbody id="nfe-impostos-tbody"></tbody>
                        </table>
                    </div>
                </div>
            </div>

<div role="tabpanel" id="nfe-panel-4" aria-labelledby="nfe-tab-4" data-tab-content="nfe-t4" hidden>
                <div class="bg-surface border border-border rounded-2xl overflow-hidden">
                    <div class="px-4 py-3 bg-elevated border-b border-border">
                        <span class="text-sm font-semibold text-text-primary">Totais</span>
                    </div>
                    <div class="p-4">
                        <dl id="nfe-totais" class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3"></dl>
                    </div>
                    
                    <div id="nfe-chave-block" class="hidden px-4 pb-4">
                        <div class="bg-elevated border border-border rounded-xl p-3">
                            <p class="text-xs text-text-muted mb-1 font-semibold">Chave de Acesso</p>
                            <div class="flex items-center gap-2">
                                <p id="nfe-chave-full" class="font-mono text-xs text-text-primary break-all flex-1"></p>
                                <button type="button" id="btn-copy-chave" class="ft-btn ft-btn-ghost ft-btn-sm shrink-0">Copiar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div id="nfe-error" class="hidden ft-alert-danger text-sm"></div>
</div>

</div>

</div>
    </div>

<div class="mb-8">
            
<div id="feedback-widget" class="flex flex-col items-center gap-3 py-4" data-tool="nfe-xml-viewer">
    <p class="ft-text-sm text-text-muted font-medium">
        Esta ferramenta foi útil?
    </p>
    <div class="flex items-center gap-3" id="feedback-buttons">
        <button type="button"
                class="ft-btn-outline ft-btn-sm"
                data-feedback="up"
                aria-label="Sim, útil">
            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                <path d="M7 10v12m8-16.12L14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" />
            </svg>
            Sim
        </button>
        <button type="button"
                class="ft-btn-outline ft-btn-sm"
                data-feedback="down"
                aria-label="Não, precisa melhorar">
            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                <path d="M17 14V2M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L14 22h0a3.13 3.13 0 0 1-3-3.88Z" />
            </svg>
            Não
        </button>
    </div>
    <p id="feedback-thanks" class="ft-text-sm text-success font-medium hidden">
        Obrigado pelo seu feedback!
    </p>
</div>

</div>
</div>

<section class="bg-transparent border-t border-border/50">
        <div class="ft-container ft-section">
            <div class="ft-cartoon-card max-w-3xl mx-auto">
                <div class="ft-text-seo prose prose-sm dark:prose-invert">
                    <h2>Por que usar Visualizador NF-e XML</h2><p>Quem chega até aqui normalmente está atrás de uma resposta rápida e útil, porque Visualizador NF-e XML combina com buscas comuns como Visualizador NF-e XML, NFE e xml online e uma forma prática de lidar com NFE Ela reduz rapidamente as opções de NFE e xml, o que ajuda quando procurar manualmente só atrasa a tarefa.</p><p>Use Visualizador NF-e XML quando precisar achar a opção certa mais rápido sem abrir planilhas, editores pesados ou formulários demorados. Útil para formulários, cadastros e saneamento documental quando a meta é reduzir trabalho manual. A página foi estruturada para responder primeiro à dúvida prática e depois entregar contexto suficiente para revisar o resultado com confiança. Isso importa quando uma ferramenta pequena deve tirar atrito, e não criar mais um.</p><h3>Quando esta ferramenta ajuda de verdade</h3><ul><li>Resolução direta para uma forma prática de lidar com NF-e XML Viewer</li><li>Saída clara para revisar com confiança para trabalho operacional do dia a dia</li><li>Tratamento local dos dados para Funciona bem em fluxos operacionais curtos</li></ul><p>Nas ferramentas client-side, o texto deixa claro quando tudo pode ser processado localmente e como conferir o resultado com segurança. Se esta etapa for apenas parte do fluxo, ferramentas próximas como Validar Chave NFe, Gerador Chave NFe e Leitor CNAB ajudam a continuar sem reconstruir o contexto do zero.</p><div class="ft-seo-legacy"><h2>Visualizador de NF-e — Leia XML de Nota Fiscal Eletrônica</h2><p>O <strong>Visualizador de XML NF-e</strong> parseia arquivos XML de Nota Fiscal Eletrônica e exibe todas as informações fiscais em formato legível e organizado. Chega de ler XML cru — visualize emitente, destinatário, produtos, impostos e totais de forma clara e estruturada.</p><p>A ferramenta interpreta a estrutura completa do XML da NF-e conforme o layout técnico da SEFAZ: dados do emitente (CNPJ, razão social, endereço), destinatário, itens com NCM, CFOP, valores unitários e totais, detalhamento de ICMS, IPI, PIS, COFINS, informações de transporte, duplicatas e dados adicionais. Tudo organizado em seções colapsáveis.</p><p><strong>Contadores</strong>, <strong>analistas fiscais</strong>, <strong>compradores</strong> e <strong>desenvolvedores de sistemas ERP</strong> utilizam esta ferramenta para conferir notas fiscais recebidas, auditar valores de impostos, verificar dados cadastrais e debugar integrações de emissão de NF-e sem precisar de software especializado.</p><p>O Visualizador de NF-e faz parte da suíte de ferramentas gratuitas do facilita.tools. Disponível em português, inglês e espanhol, otimizado para navegadores desktop e mobile.</p></div>
                </div>
                    <p class="ft-caption mt-4">
                        <time datetime="2026-03-24">Última atualização: 2026-03-24</time>
                    </p>
            </div>
        </div>
    </section>
    <section class="border-t border-border/50">
        <div class="ft-container ft-section">
            <h2 class="ft-h2 mb-8">Perguntas Frequentes</h2>
            
    <div class="ft-accordion">
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    O que o Visualizador NF-e XML faz?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>Visualizador NF-e XML ajuda você a selecione NFE e xml com um fluxo curto e direto. Ele foi pensado para quem precisa de resposta rápida sem perder o contexto do resultado.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    Quando vale usar o Visualizador NF-e XML?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>Use Visualizador NF-e XML quando a prioridade for rapidez, repetição e menos etapas manuais. Ele funciona bem em conferências rápidas, rotinas operacionais e tarefas pequenas que não justificam abrir uma aplicação completa.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    O Visualizador NF-e XML mantém meus dados privados?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>Nas ferramentas client-side, o processamento principal acontece no navegador. Isso reduz atrito com dados sensíveis ou temporários e ajuda bastante em conferências privadas e rápidas.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    Qual a diferença entre Visualizador NF-e XML e ferramentas próximas?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>Visualizador NF-e XML foca em uma tarefa específica para manter a página rápida e fácil de conferir. Se o seu fluxo continua depois desta etapa, Validar Chave NFe representa o tipo de ferramenta relacionada que costuma entrar em seguida.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    Quais informações da NF-e são exibidas?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>Todas: dados do emitente e destinatário, lista de produtos com NCM e CFOP, detalhamento de ICMS, IPI, PIS, COFINS, informações de transporte, duplicatas de pagamento e dados complementares.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    O visualizador valida a assinatura digital da NF-e?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>Não. A ferramenta exibe os dados contidos no XML de forma legível, mas não valida a assinatura digital nem consulta a SEFAZ. Para validação oficial, utilize o portal da Nota Fiscal Eletrônica.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    Meu XML de NF-e é enviado para algum servidor?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>Não. O parsing do XML é feito inteiramente no seu navegador. Nenhum dado fiscal é transmitido para nossos servidores, protegendo suas informações contábeis.</div>
                </div>
            </details>
    </div>

</div>
    </section>
    <section id="related-tools" class="relative overflow-hidden border-t border-border/50">
        <div class="ft-container ft-section">
            <h2 class="ft-h2 mb-8">Ferramentas Relacionadas</h2>
            
    <div class="ft-grid-tools">
            <a href="/pt/validar-chave-nfe" class="ft-card-tool group" aria-label="Validar Chave NFe">
                <div class="w-12 h-12 flex items-center justify-center">
                    <div class="w-full h-full min-w-[2.5rem] min-h-[2.5rem] rounded-[14px] border-2 border-black flex items-center justify-center transition-colors duration-300"
     style="background: #1B6BFF; color: #FFFFFF;"
     aria-hidden="true">
    <i data-lucide="file-key-2" class="w-5 h-5" style="display:block;"></i>
</div>

</div>
                <h3 class="ft-h4 text-sm font-semibold">Validar Chave NFe</h3>
                <p class="ft-caption text-xs line-clamp-2"></p>
            </a>
            <a href="/pt/gerador-chave-nfe" class="ft-card-tool group" aria-label="Gerador Chave NFe">
                <div class="w-12 h-12 flex items-center justify-center">
                    <div class="w-full h-full min-w-[2.5rem] min-h-[2.5rem] rounded-[14px] border-2 border-black flex items-center justify-center transition-colors duration-300"
     style="background: #1B6BFF; color: #FFFFFF;"
     aria-hidden="true">
    <i data-lucide="file-key" class="w-5 h-5" style="display:block;"></i>
</div>

</div>
                <h3 class="ft-h4 text-sm font-semibold">Gerador Chave NFe</h3>
                <p class="ft-caption text-xs line-clamp-2"></p>
            </a>
            <a href="/pt/leitor-arquivo-cnab" class="ft-card-tool group" aria-label="Leitor CNAB">
                <div class="w-12 h-12 flex items-center justify-center">
                    <div class="w-full h-full min-w-[2.5rem] min-h-[2.5rem] rounded-[14px] border-2 border-black flex items-center justify-center transition-colors duration-300"
     style="background: #6366F1; color: #FFFFFF;"
     aria-hidden="true">
    <i data-lucide="file-stack" class="w-5 h-5" style="display:block;"></i>
</div>

</div>
                <h3 class="ft-h4 text-sm font-semibold">Leitor CNAB</h3>
                <p class="ft-caption text-xs line-clamp-2"></p>
            </a>
    </div>

</div>
    </section>

</main>
        </div>
    </div>

<footer class="mt-auto">
    <div class="ft-footer-shell">
        <a href="/pt" class="ft-footer-wordmark block mb-12 sm:mb-16" aria-label="facilita.tools início">
            facilita<span class="ft-footer-dot">.</span><span class="ft-footer-brand-accent">tools</span>
        </a>

<div class="space-y-5">
                <a href="/pt" class="flex items-center gap-2.5">
                    <img src="/images/brand/site-logo.webp" alt="" class="h-8 w-8 flex-shrink-0" width="32" height="32" loading="lazy" decoding="async" aria-hidden="true" />
                    <span class="text-lg font-bold">facilita<span class="ft-footer-dot">.</span><span class="ft-footer-brand-accent">tools</span></span>
                </a>
                <p class="text-sm leading-relaxed max-w-sm">
                    Ferramentas online gratuitas para desenvolvedores, profissionais e tarefas do dia a dia.
                </p>
                <div class="flex items-center gap-3 pt-1">
                    <a href="https://github.com/Wmedrado" target="_blank" rel="noopener noreferrer"
                       class="w-10 h-10 rounded-full border border-white/25 flex items-center justify-center text-white/70 hover:text-white hover:border-white transition-all duration-200" aria-label="GitHub">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                        <span class="sr-only">GitHub abre em nova aba</span>
                    </a>
                    <a href="https://www.linkedin.com/in/devwilliam" target="_blank" rel="noopener noreferrer"
                       class="w-10 h-10 rounded-full border border-white/25 flex items-center justify-center text-white/70 hover:text-white hover:border-white transition-all duration-200" aria-label="LinkedIn">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                        <span class="sr-only">LinkedIn abre em nova aba</span>
                    </a>
                </div>
            </div>

<div>
                <p class="text-xs font-semibold uppercase mb-4">
                    Ferramentas
                </p>
                <ul class="space-y-2.5">
                        <li><a href="/pt/ferramentas/desenvolvimento" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Desenvolvedor</a></li>
                        <li><a href="/pt/ferramentas/financas" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Finanças</a></li>
                        <li><a href="/pt/ferramentas/calculadoras" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Calculadoras</a></li>
                        <li><a href="/pt/ferramentas/texto" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Texto</a></li>
                        <li><a href="/pt/ferramentas/seguranca" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Segurança</a></li>
                        <li><a href="/pt/ferramentas/data-hora" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Data e Hora</a></li>
                </ul>
            </div>

<div>
                <p class="text-xs font-semibold uppercase mb-4">
                    Recursos
                </p>
                <ul class="space-y-2.5">
                    <li><a href="/pt/favoritos" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Favoritos</a></li>
                    <li><a href="/pt/api/planos" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Planos</a></li>
                    <li><a href="/pt/api/documentacao" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Documentação API</a></li>

</ul>
            </div>

<div>
                <p class="text-xs font-semibold uppercase mb-4">
                    Empresa
                </p>
                <ul class="space-y-2.5">
                    <li><a href="/pt/sobre" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Sobre</a></li>
                    <li><a href="/pt/termos" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Termos de Uso</a></li>
                    <li><a href="/pt/privacidade" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Política de Privacidade</a></li>
                    <li><button type="button" data-cookie-preferences class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200 text-left">Preferências de cookies</button></li>
                </ul>
            </div>
        </div>

<div class="border-t border-white/20 mt-12 pt-6">
        <div class="flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-white/60">
            <p>© 2026 facilita.tools. Todos os direitos reservados.</p>

<a href="https://medradolabs.com" target="_blank" rel="noopener noreferrer"
               class="flex items-center gap-1.5 text-white/60 hover:text-white transition-colors duration-200">
                <img src="/images/brand/medrado-labs-icon.webp" alt="" width="14" height="14" class="w-3.5 h-3.5 rounded-sm" aria-hidden="true">
                Desenvolvido por Medrado Labs
            </a>

<section id="ft-chat-panel"
             class="ft-chat-panel hidden"
             role="dialog"
             aria-modal="false"
             aria-label="Assistente">
        <div class="ft-chat-header">
            <div class="min-w-0">
                <p class="ft-chat-kicker">Assistente IA</p>
                <h2 class="truncate text-base font-semibold text-text-primary">Assistente</h2>
            </div>
            <button id="ft-chat-close"
                    type="button"
                    class="ft-chat-icon-btn"
                    aria-label="Fechar">
                <i data-lucide="x" class="h-5 w-5" aria-hidden="true"></i>
            </button>
        </div>

<div id="ft-chat-thread"
             class="ft-chat-thread">
            <article class="ft-chat-bubble ft-chat-bubble-assistant">
                <p>Oi! Sou o assistente do Facilita. Posso gerar, validar e formatar CPF/CNPJ, ajudar com senhas, JSON, conversões, calculadoras e responder dúvidas sobre nossas ferramentas. Como posso te ajudar?</p>
            </article>
            <div class="ft-chat-quick-actions" aria-label="Pergunte qualquer coisa ou tente "gerar cpf"...">
                    <button type="button" class="ft-chat-chip" data-chat-message="Gerar CPF">Gerar CPF</button>
                    <button type="button" class="ft-chat-chip" data-chat-message="Validar CPF">Validar CPF</button>
                    <button type="button" class="ft-chat-chip" data-chat-message="Gerar CNPJ">Gerar CNPJ</button>
                    <button type="button" class="ft-chat-chip" data-chat-message="bom dia">Bom dia</button>
            </div>
        </div>

<div class="ft-chat-panel-actions">
            <a href="/pt/chat" class="ft-chat-full-link">
                <i data-lucide="sparkles" class="h-4 w-4" aria-hidden="true"></i>
                <span>Abrir chat completo</span>
                <i data-lucide="arrow-up-right" class="h-4 w-4" aria-hidden="true"></i>
            </a>
        </div>

<form id="ft-chat-form" class="ft-chat-form">
            <label class="sr-only" for="ft-chat-input">Pergunte qualquer coisa ou tente "gerar cpf"...</label>
            <div class="flex items-end gap-2">
                <input id="ft-chat-input"
                       type="text"
                       class="ft-chat-input"
                       placeholder="Pergunte qualquer coisa ou tente "gerar cpf"..."
                       autocomplete="off"
                       enterkeyhint="send" />
                <button id="ft-chat-send"
                        type="submit"
                        class="ft-chat-send"
                        aria-label="Enviar">
                    <i data-lucide="send-horizontal" class="h-5 w-5" aria-hidden="true"></i>
                </button>
            </div>
        </form>
    </section>

<div id="cookie-consent-banner"
     class="ft-cookie-consent translate-y-full print:hidden"
     role="dialog"
     aria-modal="false"
     aria-labelledby="cookie-consent-title"
     style="display:none;">
    <div class="ft-cookie-card">
        <div class="ft-cookie-copy">
            <div class="ft-cookie-heading">
                <span class="ft-cookie-icon" aria-hidden="true">
                    <i data-lucide="shield-check" class="h-5 w-5"></i>
                </span>
                <div>
                    <p class="ft-cookie-kicker">Privacidade</p>
                    <h2 id="cookie-consent-title">Você controla os cookies</h2>
                </div>
            </div>
            <p class="ft-cookie-message">
                Usamos cookies essenciais e preferências locais para manter o site funcionando. Medição e atribuição só ficam ativas com seu consentimento.
                <a href="/pt/privacidade">Política de Privacidade</a>.
            </p>

<div id="cookie-consent-details" class="ft-cookie-details" hidden>
                <div class="ft-cookie-choice">
                    <div>
                        <strong>Necessários</strong>
                        <p>Autenticação, segurança, idioma, consentimento e estabilidade da sessão.</p>
                    </div>
                    <span>Sempre ativo</span>
                </div>
                <div class="ft-cookie-choice">
                    <div>
                        <strong>Preferências locais</strong>
                        <p>Tema, acessibilidade, favoritos locais e cache técnico solicitado pelo usuário.</p>
                    </div>
                    <span>Sempre ativo</span>
                </div>
                <label class="ft-cookie-choice ft-cookie-choice-toggle" for="cookie-consent-analytics">
                    <div>
                        <strong>Medição e atribuição</strong>
                        <p>Ajuda a entender origem de acesso e melhorar conteúdo, sem vender dados pessoais.</p>
                    </div>
                    <input id="cookie-consent-analytics" type="checkbox" />
                    <span class="ft-cookie-switch" aria-hidden="true"></span>
                </label>
            </div>
        </div>

<div class="ft-cookie-actions">
            <button id="cookie-consent-decline" type="button" class="ft-cookie-btn ft-cookie-btn-muted">
                Recusar não essenciais
            </button>
            <button id="cookie-consent-manage"
                    type="button"
                    class="ft-cookie-btn ft-cookie-btn-ghost"
                    aria-expanded="false"
                    aria-controls="cookie-consent-details">
                Preferências
            </button>
            <button id="cookie-consent-save" type="button" class="ft-cookie-btn ft-cookie-btn-primary" hidden>
                Salvar preferências
            </button>
            <button id="cookie-consent-accept" type="button" class="ft-cookie-btn ft-cookie-btn-primary">
                Aceitar todos
            </button>
        </div>
    </div>
</div>

<div class="flex items-center justify-between p-4 border-b border-border">
        <h2 class="text-sm font-semibold text-text-primary flex items-center gap-2">
            <svg class="w-4 h-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <circle cx="12" cy="4" r="1" fill="currentColor" stroke="none"/>
                <path d="M7 8l5 0l5 0"/>
                <path d="M12 8l0 8"/>
                <path d="M8 20l4-4l4 4"/>
            </svg>
            Acessibilidade
        </h2>
        <button type="button"
                class="p-1 rounded-md text-text-muted hover:text-text-primary hover:bg-elevated
                       focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
                aria-label="Fechar"
                data-a11y-close>
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M18 6L6 18M6 6l12 12"/>
            </svg>
        </button>
    </div>

<div class="flex items-center justify-between">
            <span class="text-sm text-text-primary">Tamanho da Fonte</span>
            <div class="flex items-center gap-1">
                <button type="button"
                        class="ft-a11y-btn"
                        data-a11y-action="font-decrease"
                        aria-label="Diminuir Tamanho da Fonte">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14"/></svg>
                </button>
                <span class="text-xs text-text-muted w-10 text-center font-mono" id="a11y-font-value">100%</span>
                <button type="button"
                        class="ft-a11y-btn"
                        data-a11y-action="font-increase"
                        aria-label="Aumentar Tamanho da Fonte">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
                </button>
            </div>
        </div>

<button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="high-contrast"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
                    </svg>
                    <span class="text-sm text-text-primary">Alto Contraste</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="dyslexia-font"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M4 7V4h16v3M9 20h6M12 4v16"/>
                    </svg>
                    <span class="text-sm text-text-primary">Fonte para Dislexia</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="highlight-links"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/>
                    </svg>
                    <span class="text-sm text-text-primary">Destacar Links</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="reading-guide"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M4 6h16M4 12h16M4 18h7"/>
                    </svg>
                    <span class="text-sm text-text-primary">Guia de Leitura</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="big-cursor"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3zM13 13l6 6"/>
                    </svg>
                    <span class="text-sm text-text-primary">Cursor Grande</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="pause-animations"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span class="text-sm text-text-primary">Pausar Animações</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="text-spacing"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M21 6H3M3 12h18M3 18h18M8 6v12m8-12v12"/>
                    </svg>
                    <span class="text-sm text-text-primary">Espaçamento de Texto</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>

<div class="pt-2 border-t border-border">
            <button type="button"
                    class="w-full text-center text-xs text-text-muted hover:text-error transition-colors py-2
                           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 rounded"
                    data-a11y-action="reset">
                Redefinir todas as preferências
            </button>
        </div>
    </div>
</div>