/* CSS compartilhado: :where isola páginas sem aumentar a especificidade. */

/* compras.html */
:root:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            --laranja: #F97316;
            --laranja-vivo: #FF7A1F;
            --laranja-suave: #FFEDD5;
            --laranja-medio: #FED7AA;
            --laranja-borda: #FDBA74;
            --laranja-gradiente: linear-gradient(135deg, #FF7A1F 0%, #F9550B 50%, #E84500 100%);
            --laranja-gradiente-suave: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
            --azul-escuro: #0F1E3A;
            --azul-profundo: #0A1628;
            --azul-medio: #1A3A6B;
            --azul-gradiente: linear-gradient(160deg, #0A1628 0%, #112240 40%, #1A3A6B 100%);
            --cinza-fundo: #F8FAFB;
            --cinza-borda: #E8ECF1;
            --cinza-texto: #64748B;
            --texto: #0F172A;
            --texto-suave: #475569;
            --branco: #FFFFFF;
            --verde: #10B981;
            --verde-suave: #D1FAE5;
            --vermelho: #EF4444;
            --vermelho-suave: #FEE2E2;
            --sombra-xs: 0 1px 2px rgba(0, 0, 0, .04);
            --sombra-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
            --sombra-md: 0 4px 6px rgba(0, 0, 0, .05), 0 2px 4px rgba(0, 0, 0, .04);
            --sombra-lg: 0 10px 25px rgba(0, 0, 0, .07), 0 4px 10px rgba(0, 0, 0, .04);
            --sombra-xl: 0 20px 50px rgba(0, 0, 0, .10), 0 8px 20px rgba(0, 0, 0, .05);
            --sombra-laranja: 0 8px 30px rgba(249, 115, 22, .18);
            --sombra-azul: 0 8px 30px rgba(15, 30, 58, .12);
            --radius-xs: 6px;
            --radius-sm: 10px;
            --radius: 14px;
            --radius-lg: 18px;
            --radius-xl: 22px;
            --radius-2xl: 28px;
            --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }
*:where(html[data-pagina="compras"], html[data-pagina="compras"] *),
*:where(html[data-pagina="compras"], html[data-pagina="compras"] *)::before,
*:where(html[data-pagina="compras"], html[data-pagina="compras"] *)::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
html:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            scroll-behavior: smooth;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
body:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background: #F5F6FA;
            color: var(--texto);
            min-height: 100vh;
            background-image:
                radial-gradient(ellipse at 15% 20%, rgba(249, 115, 22, 0.04) 0%, transparent 55%),
                radial-gradient(ellipse at 85% 75%, rgba(26, 58, 107, 0.05) 0%, transparent 55%);
            background-attachment: fixed;
            line-height: 1.5;
        }
.header:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(249, 115, 22, .15);
            padding: 14px 36px;
            display: flex;
            align-items: center;
            gap: 18px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 20px rgba(249, 115, 22, .06), 0 1px 3px rgba(0, 0, 0, .04);
        }
.header-logo:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            width: 50px;
            height: 50px;
            background: var(--laranja-gradiente);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: var(--sombra-laranja);
            position: relative;
            overflow: hidden;
        }
.header-logo img:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            width: 100%;
            height: 100%;
            object-fit: contain;
            position: relative;
            z-index: 1;
        }
.header-logo:where(html[data-pagina="compras"], html[data-pagina="compras"] *)::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%);
            border-radius: inherit;
            pointer-events: none;
        }
.header-titulo:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            border-left: 2px solid var(--laranja-borda);
            padding-left: 18px;
        }
.header-titulo h1:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            font-size: 17px;
            font-weight: 700;
            color: var(--azul-escuro);
            line-height: 1.2;
            letter-spacing: -0.01em;
        }
.header-titulo p:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            font-size: 11.5px;
            color: var(--cinza-texto);
            margin-top: 3px;
            font-weight: 500;
        }
.page-wrapper:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            max-width: 880px;
            margin: 0 auto;
            padding: 32px 20px 70px;
        }
.intro-card:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            background: var(--azul-gradiente);
            color: var(--branco);
            border-radius: var(--radius-xl);
            padding: 32px 36px;
            margin-bottom: 28px;
            position: relative;
            overflow: hidden;
            box-shadow: var(--sombra-xl), var(--sombra-azul);
        }
.intro-card:where(html[data-pagina="compras"], html[data-pagina="compras"] *)::before {
            content: '';
            position: absolute;
            right: -60px;
            top: -60px;
            width: 240px;
            height: 240px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(249, 115, 22, .2) 0%, transparent 70%);
            pointer-events: none;
        }
.intro-card>*:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            position: relative;
            z-index: 1;
        }
.intro-badge:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, .12);
            color: #FDBA74;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .08em;
            padding: 6px 14px;
            border-radius: 50px;
            margin-bottom: 16px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, .15);
        }
.intro-card h2:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            font-size: 26px;
            font-weight: 800;
            margin-bottom: 10px;
            letter-spacing: -0.02em;
            line-height: 1.2;
        }
.intro-card p:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            font-size: 14px;
            opacity: .82;
            line-height: 1.7;
            font-weight: 400;
            max-width: 90%;
        }
.section:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            background: var(--branco);
            border-radius: var(--radius-lg);
            box-shadow: var(--sombra-md);
            border: 1px solid var(--cinza-borda);
            margin-bottom: 18px;
            overflow: hidden;
            transition: all var(--transition);
        }
.section:hover:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            box-shadow: var(--sombra-lg);
            border-color: #dce3eb;
        }
.section-header:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            background: var(--laranja-gradiente-suave);
            border-bottom: 1.5px solid var(--laranja-borda);
            padding: 15px 22px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
.section-icon:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            width: 36px;
            height: 36px;
            background: var(--laranja-gradiente);
            border-radius: var(--radius-xs);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 17px;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(249, 115, 22, .25);
            position: relative;
            overflow: hidden;
        }
.section-icon i:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            font-size: 17px;
            color: white;
            z-index: 1;
        }
.section-icon:where(html[data-pagina="compras"], html[data-pagina="compras"] *)::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
            border-radius: inherit;
            pointer-events: none;
        }
.section-header h3:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            font-size: 12.5px;
            font-weight: 700;
            color: var(--azul-escuro);
            text-transform: uppercase;
            letter-spacing: .07em;
        }
.section-body:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            padding: 22px 24px 24px;
        }
.campo:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            margin-bottom: 0;
            display: flex;
            gap: 12px;
            align-items: flex-end;
            flex-wrap: wrap;
        }
.campo-input-group:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            flex: 1;
            min-width: 200px;
        }
.campo label:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: var(--azul-escuro);
            margin-bottom: 7px;
            letter-spacing: 0.01em;
        }
.campo input[type=text]:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            width: 100%;
            padding: 12px 15px;
            border: 1.5px solid var(--cinza-borda);
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-family: inherit;
            color: var(--texto);
            background: #FAFBFC;
            transition: all var(--transition);
            outline: none;
            letter-spacing: 0.01em;
        }
.campo input[type=text]:hover:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            border-color: #c9d3de;
            background: #FDFDFE;
        }
.campo input[type=text]:focus:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            border-color: var(--laranja);
            box-shadow: 0 0 0 4px rgba(249, 115, 22, .08);
            background: white;
        }
.campo input[type=text]:where(html[data-pagina="compras"], html[data-pagina="compras"] *)::placeholder {
            color: #B0BEC5;
            font-weight: 400;
        }
.btn-buscar:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            padding: 12px 28px;
            background: var(--laranja-gradiente);
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            letter-spacing: .03em;
            transition: all var(--transition);
            font-family: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: var(--sombra-laranja);
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            flex-shrink: 0;
            height: 46px;
        }
.btn-buscar:where(html[data-pagina="compras"], html[data-pagina="compras"] *)::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
            border-radius: inherit;
            pointer-events: none;
        }
.btn-buscar:hover:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            transform: translateY(-2px);
            box-shadow: 0 14px 35px rgba(249, 115, 22, .28);
        }
.btn-buscar:active:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            transform: scale(.98) translateY(0);
            transition: transform 0.1s;
        }
.btn-buscar:disabled:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            opacity: .6;
            cursor: not-allowed;
            transform: none;
            box-shadow: var(--sombra-sm);
        }
.loading-wrapper:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 48px 20px;
            gap: 16px;
        }
.loading-wrapper.visible:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            display: flex;
        }
.spinner:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 4px solid var(--cinza-borda);
            border-top-color: var(--laranja);
            animation: pagina_compras_spin 0.8s linear infinite;
        }
@keyframes pagina_compras_spin {
            to { transform: rotate(360deg); }
        }
.loading-text:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            font-size: 13px;
            color: var(--cinza-texto);
            font-weight: 500;
        }
.resultados-wrapper:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            display: none;
        }
.resultados-wrapper.visible:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            display: block;
        }
.state-box:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            text-align: center;
            padding: 40px 20px;
            border-radius: var(--radius-lg);
            border: 1.5px dashed var(--cinza-borda);
            background: #FAFBFC;
            margin-top: 4px;
        }
.state-box .state-icon:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            font-size: 42px;
            margin-bottom: 12px;
            display: block;
        }
.state-box .state-title:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            font-size: 16px;
            font-weight: 700;
            color: var(--azul-escuro);
            margin-bottom: 6px;
        }
.state-box .state-desc:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            font-size: 13px;
            color: var(--cinza-texto);
            line-height: 1.6;
        }
.venda-card:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            background: var(--branco);
            border-radius: var(--radius-lg);
            box-shadow: var(--sombra-md);
            border: 1px solid var(--cinza-borda);
            margin-bottom: 20px;
            overflow: hidden;
            transition: all var(--transition);
        }
.venda-card:hover:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            box-shadow: var(--sombra-lg);
            border-color: #dce3eb;
            transform: translateY(-2px);
        }
.venda-card-header:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            background: linear-gradient(135deg, #FFF7ED 0%, #FFFFFF 100%);
            border-bottom: 1.5px solid var(--laranja-borda);
            padding: 16px 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }
.venda-card-header-left:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            display: flex;
            align-items: center;
            gap: 14px;
        }
.venda-card-header-left .venda-icon:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            width: 44px;
            height: 44px;
            background: var(--laranja-gradiente);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            flex-shrink: 0;
            box-shadow: 0 4px 14px rgba(249, 115, 22, .3);
        }
.venda-card-header-left .venda-title:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            font-size: 16px;
            font-weight: 700;
            color: var(--azul-escuro);
            line-height: 1.2;
        }
.venda-card-header-left .venda-date:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            font-size: 12px;
            color: var(--cinza-texto);
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 5px;
        }
.venda-card-header-right:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
.status-badge:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 5px 12px;
            border-radius: 50px;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .02em;
            white-space: nowrap;
            background: #F1F5F9;
            color: var(--texto-suave);
            border: 1px solid #E2E8F0;
        }
.status-badge i:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            font-size: 11px;
        }
.status-pendente:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            background: #FEF3C7;
            color: #92400E;
            border-color: #FCD34D;
        }
.status-aprovado:where(html[data-pagina="compras"], html[data-pagina="compras"] *),
.status-finalizado:where(html[data-pagina="compras"], html[data-pagina="compras"] *),
.status-concluido:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            background: var(--verde-suave);
            color: #065F46;
            border-color: #6EE7B7;
        }
.status-andamento:where(html[data-pagina="compras"], html[data-pagina="compras"] *),
.status-em-andamento:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            background: #DBEAFE;
            color: #1E40AF;
            border-color: #93C5FD;
        }
.status-cancelado:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            background: var(--vermelho-suave);
            color: #991B1B;
            border-color: #FCA5A5;
        }
.venda-card-body:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            padding: 20px 22px;
        }
.info-grid:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 16px 24px;
        }
.info-item:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
.info-item .info-label:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            font-size: 10.5px;
            font-weight: 600;
            color: var(--cinza-texto);
            text-transform: uppercase;
            letter-spacing: .05em;
            display: flex;
            align-items: center;
            gap: 5px;
        }
.info-item .info-label i:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            color: var(--laranja);
            font-size: 12px;
            width: 16px;
            text-align: center;
        }
.info-item .info-value:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            font-size: 14px;
            font-weight: 600;
            color: var(--azul-escuro);
            word-break: break-word;
        }
.info-item .info-value.highlight:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            color: var(--laranja);
            font-size: 17px;
            font-weight: 800;
        }
.info-item.full-width:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            grid-column: 1 / -1;
        }
.footer-note:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            text-align: center;
            margin-top: 24px;
            font-size: 11px;
            color: #94A3B8;
            letter-spacing: 0.02em;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
.footer-note i:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
            color: var(--laranja);
            font-size: 13px;
        }
:where(html[data-pagina="compras"], html[data-pagina="compras"] *)::-webkit-scrollbar {
            width: 6px;
        }
:where(html[data-pagina="compras"], html[data-pagina="compras"] *)::-webkit-scrollbar-track {
            background: transparent;
        }
:where(html[data-pagina="compras"], html[data-pagina="compras"] *)::-webkit-scrollbar-thumb {
            background: #CBD5E1;
            border-radius: 10px;
        }
:where(html[data-pagina="compras"], html[data-pagina="compras"] *)::-webkit-scrollbar-thumb:hover {
            background: #94A3B8;
        }
:where(html[data-pagina="compras"], html[data-pagina="compras"] *)::selection {
            background: rgba(249, 115, 22, .2);
            color: var(--azul-escuro);
        }
@media (max-width: 560px) {
.header:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
                padding: 12px 16px;
                gap: 12px;
            }
.header-titulo h1:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
                font-size: 15px;
            }
.intro-card:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
                padding: 22px 20px;
            }
.intro-card h2:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
                font-size: 21px;
            }
.intro-card p:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
                max-width: 100%;
            }
.section-body:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
                padding: 16px 16px 18px;
            }
.campo:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
                flex-direction: column;
            }
.btn-buscar:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
                width: 100%;
            }
.info-grid:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
                grid-template-columns: 1fr 1fr;
            }
.venda-card-header:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
                flex-direction: column;
                align-items: flex-start;
            }
.venda-card-header-right:where(html[data-pagina="compras"], html[data-pagina="compras"] *) {
                width: 100%;
                justify-content: flex-start;
            }

        }

    

/* feedback.html */
:root:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            --laranja: #F97316;
            --laranja-vivo: #FF7A1F;
            --laranja-suave: #FFEDD5;
            --laranja-medio: #FED7AA;
            --laranja-borda: #FDBA74;
            --laranja-gradiente: linear-gradient(135deg, #FF7A1F 0%, #F9550B 50%, #E84500 100%);
            --laranja-gradiente-suave: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
            --azul-escuro: #0F1E3A;
            --azul-profundo: #0A1628;
            --azul-medio: #1A3A6B;
            --azul-gradiente: linear-gradient(160deg, #0A1628 0%, #112240 40%, #1A3A6B 100%);
            --azul-card: linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%);
            --cinza-fundo: #F8FAFB;
            --cinza-borda: #E8ECF1;
            --cinza-texto: #64748B;
            --texto: #0F172A;
            --texto-suave: #475569;
            --branco: #FFFFFF;
            --verde: #10B981;
            --verde-suave: #D1FAE5;
            --vermelho: #EF4444;
            --sombra-xs: 0 1px 2px rgba(0, 0, 0, .04);
            --sombra-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
            --sombra-md: 0 4px 6px rgba(0, 0, 0, .05), 0 2px 4px rgba(0, 0, 0, .04);
            --sombra-lg: 0 10px 25px rgba(0, 0, 0, .07), 0 4px 10px rgba(0, 0, 0, .04);
            --sombra-xl: 0 20px 50px rgba(0, 0, 0, .10), 0 8px 20px rgba(0, 0, 0, .05);
            --sombra-laranja: 0 8px 30px rgba(249, 115, 22, .18);
            --sombra-azul: 0 8px 30px rgba(15, 30, 58, .12);
            --radius-xs: 6px;
            --radius-sm: 10px;
            --radius: 14px;
            --radius-lg: 18px;
            --radius-xl: 22px;
            --radius-2xl: 28px;
            --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: 0.35s cubic-bezier(0.25, 0.8, 0.25, 1.2);
        }
*:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *),
*:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *)::before,
*:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *)::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
html:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            scroll-behavior: smooth;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
body:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background: #F5F6FA;
            color: var(--texto);
            min-height: 100vh;
            background-image:
                radial-gradient(ellipse at 15% 20%, rgba(249, 115, 22, 0.04) 0%, transparent 55%),
                radial-gradient(ellipse at 85% 75%, rgba(26, 58, 107, 0.05) 0%, transparent 55%),
                radial-gradient(ellipse at 50% 50%, rgba(249, 115, 22, 0.02) 0%, transparent 70%);
            background-attachment: fixed;
            line-height: 1.5;
        }
.header:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(249, 115, 22, .15);
            padding: 14px 36px;
            display: flex;
            align-items: center;
            gap: 18px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 20px rgba(249, 115, 22, .06), 0 1px 3px rgba(0, 0, 0, .04);
            transition: all var(--transition);
        }
.header-logo:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            width: 50px;
            height: 50px;
            background: var(--laranja-gradiente);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: var(--sombra-laranja);
            position: relative;
            overflow: hidden;
        }
.header-logo img:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            width: 100%;
            height: 100%;
            object-fit: contain;
            position: relative;
            z-index: 1;
        }
.header-logo:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *)::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%);
            border-radius: inherit;
            pointer-events: none;
        }
.header-titulo:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            border-left: 2px solid var(--laranja-borda);
            padding-left: 18px;
        }
.header-titulo h1:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            font-size: 17px;
            font-weight: 700;
            color: var(--azul-escuro);
            line-height: 1.2;
            letter-spacing: -0.01em;
        }
.header-titulo p:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            font-size: 11.5px;
            color: var(--cinza-texto);
            margin-top: 3px;
            font-weight: 500;
            letter-spacing: 0.01em;
        }
.header-status:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--laranja-suave);
            padding: 8px 14px;
            border-radius: 50px;
            font-size: 11.5px;
            font-weight: 600;
            color: var(--laranja);
            letter-spacing: 0.02em;
            border: 1px solid var(--laranja-borda);
        }
.header-status .dot:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            width: 8px;
            height: 8px;
            background: var(--laranja);
            border-radius: 50%;
            animation: pagina_feedback_pulse-dot 2s infinite;
        }
@keyframes pagina_feedback_pulse-dot {
            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(249, 115, 22, .5);
            }
            50% {
                box-shadow: 0 0 0 10px rgba(249, 115, 22, 0);
            }
        }
.page-wrapper:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            max-width: 780px;
            margin: 0 auto;
            padding: 32px 20px 70px;
        }
.intro-card:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            background: var(--azul-gradiente);
            color: var(--branco);
            border-radius: var(--radius-xl);
            padding: 32px 36px;
            margin-bottom: 28px;
            position: relative;
            overflow: hidden;
            box-shadow: var(--sombra-xl), var(--sombra-azul);
        }
.intro-card:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *)::before {
            content: '';
            position: absolute;
            right: -60px;
            top: -60px;
            width: 240px;
            height: 240px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(249, 115, 22, .2) 0%, transparent 70%);
            pointer-events: none;
        }
.intro-card:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *)::after {
            content: '';
            position: absolute;
            left: 30%;
            bottom: -40px;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 255, 255, .04) 0%, transparent 70%);
            pointer-events: none;
        }
.intro-card>*:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            position: relative;
            z-index: 1;
        }
.intro-badge:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, .12);
            color: #FDBA74;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .08em;
            padding: 6px 14px;
            border-radius: 50px;
            margin-bottom: 16px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, .15);
        }
.intro-badge .icon-sun:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            font-size: 15px;
            animation: pagina_feedback_rotate-slow 12s linear infinite;
        }
@keyframes pagina_feedback_rotate-slow {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
.intro-card h2:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            font-size: 26px;
            font-weight: 800;
            margin-bottom: 10px;
            letter-spacing: -0.02em;
            line-height: 1.2;
        }
.intro-card p:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            font-size: 14px;
            opacity: .82;
            line-height: 1.7;
            font-weight: 400;
            max-width: 90%;
        }
.section:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            background: var(--branco);
            border-radius: var(--radius-lg);
            box-shadow: var(--sombra-md);
            border: 1px solid var(--cinza-borda);
            margin-bottom: 18px;
            overflow: hidden;
            transition: all var(--transition);
            position: relative;
        }
.section:hover:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            box-shadow: var(--sombra-lg);
            border-color: #dce3eb;
        }
.section-header:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            background: var(--laranja-gradiente-suave);
            border-bottom: 1.5px solid var(--laranja-borda);
            padding: 15px 22px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
.section-icon:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            width: 36px;
            height: 36px;
            background: var(--laranja-gradiente);
            border-radius: var(--radius-xs);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 17px;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(249, 115, 22, .25);
            position: relative;
            overflow: hidden;
        }
.section-icon i:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            font-size: 17px;
            color: white;
            z-index: 1;
        }
.section-icon:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *)::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
            border-radius: inherit;
            pointer-events: none;
        }
.section-header h3:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            font-size: 12.5px;
            font-weight: 700;
            color: var(--azul-escuro);
            text-transform: uppercase;
            letter-spacing: .07em;
        }
.section-badge:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            margin-left: auto;
            font-size: 10px;
            font-weight: 700;
            color: var(--laranja);
            background: rgba(249, 115, 22, .1);
            padding: 4px 10px;
            border-radius: 50px;
            letter-spacing: .04em;
        }
.section-body:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            padding: 22px 24px 24px;
        }
.campo:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            margin-bottom: 20px;
            position: relative;
        }
.campo:last-child:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            margin-bottom: 0;
        }
.campo label:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: var(--azul-escuro);
            margin-bottom: 7px;
            letter-spacing: 0.01em;
        }
.campo label .obrigatorio:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            color: var(--laranja);
            margin-left: 2px;
            font-weight: 700;
        }
.campo .label-desc:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            font-weight: 400;
            color: var(--cinza-texto);
            font-size: 11px;
            margin-left: 6px;
            letter-spacing: 0;
        }
.campo input[type=text]:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *),
.campo textarea:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *),
.campo select:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            width: 100%;
            padding: 12px 15px;
            border: 1.5px solid var(--cinza-borda);
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-family: inherit;
            color: var(--texto);
            background: #FAFBFC;
            transition: all var(--transition);
            outline: none;
            letter-spacing: 0.01em;
        }
.campo input[type=text]:hover:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *),
.campo textarea:hover:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *),
.campo select:hover:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            border-color: #c9d3de;
            background: #FDFDFE;
        }
.campo input[type=text]:focus:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *),
.campo textarea:focus:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *),
.campo select:focus:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            border-color: var(--laranja);
            box-shadow: 0 0 0 4px rgba(249, 115, 22, .08);
            background: white;
            outline: none;
        }
.campo textarea:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            resize: vertical;
            min-height: 90px;
            line-height: 1.6;
        }
.campo input[type=text]:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *)::placeholder,
.campo textarea:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *)::placeholder {
            color: #B0BEC5;
            font-weight: 400;
        }
.input-nome:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            width: 100%;
            padding: 12px 15px;
            border: 1.5px solid var(--cinza-borda);
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-family: inherit;
            color: var(--texto);
            background: #FAFBFC;
            transition: all var(--transition);
            outline: none;
        }
.input-nome:hover:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            border-color: #c9d3de;
            background: #FDFDFE;
        }
.input-nome:focus:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            border-color: var(--laranja);
            box-shadow: 0 0 0 4px rgba(249, 115, 22, .08);
            background: white;
        }
.input-nome:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *)::placeholder {
            color: #B0BEC5;
            font-weight: 400;
        }
.campo-row:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
@media (max-width: 560px) {
.campo-row:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
                grid-template-columns: 1fr;
            }
.intro-card p:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
                max-width: 100%;
            }
.header:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
                padding: 12px 16px;
                gap: 12px;
            }
.header-titulo h1:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
                font-size: 15px;
            }
.header-status:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
                display: none;
            }
.intro-card:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
                padding: 22px 20px;
            }
.intro-card h2:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
                font-size: 21px;
            }
.section-body:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
                padding: 16px 16px 18px;
            }

        }
.estrelas:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            display: flex;
            gap: 5px;
            margin-top: 3px;
            flex-direction: row-reverse;   /* Inverte a ordem visual para 1,2,3,4,5 */
            justify-content: flex-end;     /* Alinha o conjunto à esquerda */
        }
.estrelas input[type=radio]:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            display: none;
        }
.estrelas label:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            cursor: pointer;
            font-size: 30px;
            color: #DDE3EA;
            transition: all var(--transition-slow);
            margin: 0;
            line-height: 1;
            position: relative;
            display: inline-block;
            user-select: none;
        }
.estrelas label:hover:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            transform: scale(1.2);
            color: #FFB347;
        }
.estrelas input[type=radio]:checked~label:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            color: var(--laranja-vivo);
            text-shadow: 0 0 18px rgba(249, 115, 22, .5);
        }
.estrelas:has(label:hover) label:not(:hover):not(:hover~label):where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            color: #DDE3EA;
            text-shadow: none;
            transform: scale(1);
        }
.estrelas label:hover~label:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            color: #FFB347;
            transform: scale(1.08);
        }
.estrelas input[type=radio]:checked+label:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            color: var(--laranja-vivo);
            text-shadow: 0 0 18px rgba(249, 115, 22, .5);
            animation: pagina_feedback_star-pop 0.35s ease-out;
        }
@keyframes pagina_feedback_star-pop {
            0% {
                transform: scale(1);
            }
            40% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }
.radio-grupo:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 3px;
        }
.radio-grupo input[type=radio]:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            display: none;
        }
.radio-grupo label:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            cursor: pointer;
            padding: 9px 17px;
            border: 1.5px solid var(--cinza-borda);
            border-radius: 50px;
            font-size: 12.5px;
            font-weight: 500;
            color: var(--cinza-texto);
            background: #FAFBFC;
            transition: all var(--transition);
            margin: 0;
            user-select: none;
            letter-spacing: 0.01em;
            display: flex;
            align-items: center;
            gap: 6px;
        }
.radio-grupo label i:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            font-size: 14px;
        }
.radio-grupo input[type=radio]:checked+label:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            background: var(--laranja-suave);
            border-color: var(--laranja);
            color: var(--laranja);
            font-weight: 700;
            box-shadow: 0 2px 10px rgba(249, 115, 22, .12);
        }
.radio-grupo label:hover:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            border-color: var(--laranja-borda);
            color: var(--azul-escuro);
            background: #FFFBF7;
            transform: translateY(-1px);
        }
.nps-wrapper:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            margin-top: 6px;
        }
.nps-numeros:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            display: grid;
            grid-template-columns: repeat(11, 1fr);
            gap: 5px;
            margin-bottom: 10px;
        }
.nps-numeros input[type=radio]:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            display: none;
        }
.nps-numeros label:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            cursor: pointer;
            text-align: center;
            padding: 11px 4px;
            border: 1.5px solid var(--cinza-borda);
            border-radius: var(--radius-xs);
            font-size: 13px;
            font-weight: 600;
            color: var(--cinza-texto);
            background: #FAFBFC;
            transition: all var(--transition);
            margin: 0;
            user-select: none;
        }
.nps-numeros label:hover:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            border-color: var(--laranja-borda);
            background: var(--laranja-suave);
            transform: translateY(-2px);
            box-shadow: var(--sombra-sm);
        }
.nps-numeros input[type=radio]:checked+label:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            background: var(--laranja-gradiente);
            border-color: var(--laranja);
            color: white;
            box-shadow: var(--sombra-laranja);
            transform: translateY(-2px);
            font-weight: 700;
        }
.nps-legenda:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            display: flex;
            justify-content: space-between;
            font-size: 10.5px;
            color: var(--cinza-texto);
            font-weight: 500;
            letter-spacing: 0.02em;
            padding: 0 2px;
        }
.btn-submit:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            width: 100%;
            padding: 17px;
            background: var(--laranja-gradiente);
            color: white;
            border: none;
            border-radius: var(--radius);
            font-size: 15.5px;
            font-weight: 700;
            cursor: pointer;
            letter-spacing: .03em;
            margin-top: 24px;
            transition: all var(--transition);
            font-family: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: var(--sombra-laranja);
            position: relative;
            overflow: hidden;
        }
.btn-submit:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *)::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
            border-radius: inherit;
            pointer-events: none;
        }
.btn-submit:hover:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            transform: translateY(-2px);
            box-shadow: 0 14px 35px rgba(249, 115, 22, .28);
        }
.btn-submit:active:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            transform: scale(.98) translateY(0);
            transition: transform 0.1s;
        }
.btn-submit .btn-icon:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            font-size: 20px;
            animation: pagina_feedback_float-up 2s ease-in-out infinite;
        }
@keyframes pagina_feedback_float-up {
            0%,
            100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-4px);
            }
        }
.footer-note:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            text-align: center;
            margin-top: 20px;
            font-size: 11px;
            color: #94A3B8;
            letter-spacing: 0.02em;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
.footer-note i:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *) {
            color: var(--laranja);
            font-size: 13px;
        }
:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *)::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *)::-webkit-scrollbar-track {
            background: transparent;
        }
:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *)::-webkit-scrollbar-thumb {
            background: #CBD5E1;
            border-radius: 10px;
        }
:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *)::-webkit-scrollbar-thumb:hover {
            background: #94A3B8;
        }
:where(html[data-pagina="feedback"], html[data-pagina="feedback"] *)::selection {
            background: rgba(249, 115, 22, .2);
            color: var(--azul-escuro);
        }