/* Garante sobreposição das barras */
.scroll-line, .audit-header {
    position: fixed;
    width: 100%;
    z-index: 9999 !important; /* Força ficar acima de tudo */
}

/* Esconde o que não deve ser visto */
.hidden { display: none; }

/* Estilo da seção ativa */
.active-section { border: 2px solid #2196F3; }
/* Sobrescrita de Variáveis */
:root {
    --primary: #2f5d50;
    --secondary: #9aa874;
    --bg-main: #f3f1e9;
    --card-shadow: 0 10px 30px rgba(0,0,0,0.20);
}

/* Ajuste de Container */
.container { width: min(1100px, 95%); margin: 2rem auto; padding: 0 2rem; }

/* Sobrescrita dos Cards */
.card {
    display:flex;
    flex-direction:column; 
    height: 100%;
    min-height: 760px;
    background: #ffffff;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: var(--card-shadow);
    border: none;
}

.dashboard-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px;
    width: 100%;
}

.dashboard-item {
    background: #ffffff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: var(--card-shadow);
    text-align: center;
}

.dashboard-item label { display: block; font-size: 0.75rem; font-weight: bold; color: #666; margin-bottom: 5px; }

.progress-container {
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    margin: 5px 0;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--primary);
    width: 0%;
    transition: width 0.3s;
}

/* Questionário */
#questionnaire { max-width: 900px; margin: 0 auto; overflow-y: auto; }
.section-card { margin-bottom: 10px; border: 1px solid #ddd; border-radius: 8px; }
.section-header { padding: 20px; cursor: pointer; background: #fdfdfd; display: flex; justify-content: space-between; }
.section-body { padding: 20px; border-top: 1px solid #eee; }
.section-body.hidden { display: none !important; }

.question-card { padding: 15px; margin-bottom: 15px; border-left: 4px solid #eee; background: #fafafa; border-radius: 4px; }
.question-card p { font-size: 1.1rem; font-weight: 500; margin-bottom: 1rem; }

/* Botões e Estados */
.opt-btn {
    position: relative;
    z-index: 10;
    cursor: pointer;
    background: #eee;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    margin: 5px;
}
.opt-btn:hover { background: #ddd; }
.active-sim { background: #c8e6c9 !important; border: 1px solid green; }
.active-nao { background: #ffcdd2 !important; border: 1px solid red; }

/* Utilitários */
.hidden { display: none !important; }
/* Container que centraliza os dois cards */
.dual-card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Divide em 3 colunas iguais */
    gap: 2rem; /* Espaço entre os cards */
    max-width: 1000px; /* Limita a largura total */
    margin: 4rem auto; /* Centraliza o container na página */
    align-items: stretch; /* Garante que ambos tenham a mesma altura */
}

/* Garante que os cards dentro do grid tenham o mesmo estilo */
.dual-card-container .card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 3rem;
}
.header-cep {
    background: #ffffff;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: var(--card-shadow);
    margin-bottom: 2rem;
    /* Isso garante que, mesmo dentro do container, ele tenha respiro */
}
.hero-banner {
    display: flex;
    flex-direction: column; /* Empilha os itens verticalmente */
    align-items: center;    /* Centraliza horizontalmente */
    text-align: center;     /* Garante que o texto fique centralizado */
    padding: 3rem;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: var(--card-shadow);
    margin-bottom: 2rem;
}

.banner-info {
    display: flex;
    justify-content: center; /* Centraliza as cápsulas na linha */
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;         /* Permite que quebrem linha se a tela for pequena */
}

.capsule {
    background: #f1f5f9;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    color: #475569;
}
#audit-dashboard {
    display: none !important;
}

/* Indicador da Seção Atual */
.section-tracker {
    position: fixed;
    top: 80px; /* Ajuste conforme a altura da sua barra */
    left: 0;
    width: 100%;
    background: #f4f4f4;
    padding: 5px 20px;
    font-size: 0.9em;
    color: #555;
    z-index: 999;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
    margin-bottom: 5px;
}
/* ==========================================================
BARRA DE PROGRESSO FIXA
========================================================== */

#fixed-progress-bar{

    position:sticky;
    left: 20px;;
    top:30px;
    transform: translateY(-5%);

    width:110px;

    min-width:110px;

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:18px;

    box-shadow:0 10px 30px rgba(15,23,42,.08);

    padding:18px 14px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:16px;

    z-index:1000;

}

/* =======================================
PERCENTUAL
======================================= */

#p-info-percent{

    width:72px;

    height:72px;

    border-radius:50%;

    background:#f8fafc;

    border:5px solid #22c55e;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    font-weight:700;

    color:#1e293b;

}

/* =======================================
INDICADORES
======================================= */

.progress-info{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.progress-info span{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:8px;

    background:#f8fafc;

    border-radius:10px;

    font-size:11px;

    color:#64748b;

    line-height:1.2;

}

.progress-info strong{

    font-size:18px;

    color:#0f172a;

}

/* =======================================
BARRA
======================================= */

.progress-track{

    width:12px;

    height:180px;

    background:#e5e7eb;

    border-radius:999px;

    overflow:hidden;

    position:relative;

}

.progress-fill{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:0;

    background:linear-gradient(

        180deg,

        #4ade80,

        #16a34a

    );

    border-radius:999px;

    transition:height .35s ease;

}

/* =======================================
STATUS
======================================= */

.progress-status{

    text-align:center;

    font-weight:700;

    color:#2563eb;

    font-size:14px;

}

/* =======================================
LAYOUT DA AUDITORIA
======================================= */

#audit-workspace{

    display:grid;

    grid-template-columns:110px 1fr;

    gap:28px;

    align-items:start;

}

#questionnaire-area{

    min-width:0;

}

/* =======================================
RESPONSIVO
======================================= */

@media(max-width:900px){

    #audit-workspace{

        display:block;

    }

    #fixed-progress-bar{

        position:sticky;

        top:70px;

        width:100%;

        min-width:100%;

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

        gap:18px;

        margin-bottom:20px;

    }

    .progress-info{

        flex-direction:row;

        flex:1;

        justify-content:space-between;

    }

    .progress-track{

        width:180px;

        height:10px;

    }

    .progress-fill{

        width:0;

        height:100%;

    }

}
/* ===========================================================
   AUDIT PROGRESS CARD
=========================================================== */

.audit-progress-card{

    background:#ffffff;

    border-radius:20px;

    padding:28px;

    margin-bottom:30px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.audit-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.audit-header h2{

    margin:0;

    font-size:28px;

}

.audit-header p{

    margin-top:6px;

    color:#666;

}

.audit-percent{

    font-size:38px;

    font-weight:700;

    color:var(--primary);

}

.audit-progress-track{

    width:100%;

    height:14px;

    background:#ececec;

    border-radius:30px;

    overflow:hidden;

    margin-bottom:25px;

}

.audit-progress-fill{

    width:0%;

    height:100%;

    background:linear-gradient(
        90deg,
        #2f5d50,
        #4d8d77
    );

    transition:.4s;

}

.audit-metrics{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

}

.metric-card{

    background:#f8fafb;

    border-radius:14px;

    padding:18px;

    text-align:center;

}

.metric-title{

    display:block;

    font-size:13px;

    color:#777;

    margin-bottom:8px;

}

.metric-value{

    font-size:24px;

    font-weight:700;

    color:#1f2937;

}

.audit-status{

    margin-top:20px;

    text-align:center;

    font-size:16px;

    font-weight:600;

    color:var(--primary);

}
/* ==========================================
   BOTÕES DA AUDITORIA
========================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-width:180px;

    padding:14px 28px;

    border:none;

    border-radius:12px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:all .25s ease;

    box-shadow:0 6px 18px rgba(0,0,0,.10);

}
.modal-content .btn{

    width:100%;

    height:54px;

    margin-top:14px;

    font-size:17px;

    border-radius:12px;

    font-weight:700;

}
.modal-content .btn-secondary{

    background:#e5e7eb;

    color:#334155;

}

.modal-content .btn-secondary:hover{

    background:#d1d5db;

}
/* ========================= */

.btn:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(0,0,0,.15);

}

/* ========================= */

.btn-primary{

    background:#2563eb;

    color:#fff;

}

.btn-primary:hover{

    background:#1d4ed8;

}

/* ========================= */

.btn-success{

    background:#16a34a;

    color:#fff;

}

.btn-success:hover{

    background:#15803d;

}

/* ========================= */

.btn-outline-danger{

    background:#fff;

    color:#dc2626;

    border:2px solid #dc2626;

}

.btn-outline-danger:hover{

    background:#dc2626;

    color:#fff;

}
/* =======================================================
RELATÓRIO
======================================================= */

.modal{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.82);
    backdrop-filter: blur(8px);
    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}
.modal-content{

    width:min(92vw,650px);

    background:#ffffff;

    border-radius:18px;

    padding:42px;

    border:1px solid #e5e7eb;

    box-shadow:0 35px 100px rgba(0,0,0,.45);

    animation:modalFade .25s ease;

    overflow:hidden;

}

.modal-content h2{

    margin:0 0 10px;

    font-size:34px;

    font-weight:700;

    color:#0f172a;

    text-align:center;

}

.modal-content p{

    text-align:center;

    color:#64748b;

    font-size:16px;

    margin-bottom:28px;

}
.modal-content label{

    display:block;

    margin-top:18px;

    margin-bottom:8px;

    font-weight:600;

    color:#334155;

    font-size:15px;

}
.modal-content input{

    width:100%;

    height:54px;

    padding:0 16px;

    border:1px solid #cbd5e1;

    border-radius:12px;

    font-size:16px;

    transition:.2s;

}
.modal-content input:focus{

    outline:none;

    border-color:#2563eb;

    box-shadow:

        0 0 0 4px rgba(37,99,235,.15);

}
.hidden{

    display:none;

}

.modal-report{

    width:min(1100px,95vw);

    max-height:90vh;

    overflow:auto;

    background:#fff;

    border-radius:20px;

    padding:35px;

    box-shadow:0 20px 50px rgba(0,0,0,.25);

}

.report-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.btn-close{

    border:none;

    background:none;

    font-size:34px;

    cursor:pointer;

}

.report-summary{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-bottom:30px;

}

.summary-card{

    background:#f8fafc;

    border-radius:12px;

    padding:20px;

    text-align:center;

}

.summary-value{

    font-size:34px;

    font-weight:700;

}

.summary-title{

    color:#666;

}

.report-item{

    border-left:5px solid #dc2626;

    background:#fafafa;

    border-radius:10px;

    padding:22px;

    margin-bottom:20px;

}

.report-item h3{

    margin-top:0;

}

.report-footer{

    margin-top:30px;

    text-align:right;

}
.audit-footer-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:40px;

    padding-top:25px;

    border-top:1px solid #e5e7eb;

}
/* ===========================================
   PREMIUM
=========================================== */

.premium-card{

    display:flex;

    flex-direction:column;

}

.premium-header{

    font-size:24px;

    font-weight:700;

    margin-bottom:18px;

    color:#1f5132;

}

.premium-intro{

    color:#666;

    margin-bottom:24px;

}

.premium-option{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px;

    margin-bottom:15px;

    border:1px solid #d9e7dc;

    border-radius:12px;

    background:#fafcf9;

}

.premium-option strong{

    display:block;

    margin-bottom:4px;

}

.premium-option small{

    color:#666;

}

.premium-best{

    border:2px solid #2d6b42;

    background:#eef8f1;

}

.btn-premium{

    padding:10px 20px;

    border:none;

    border-radius:8px;

    background:#2d6b42;

    color:white;

    cursor:pointer;

    font-weight:600;

}

.btn-premium:hover{

    background:#215032;

}

.btn-complete{

    background:#b8860b;

}

.btn-complete:hover{

    background:#946d05;

}
/* ==========================================================
   CARD GERADORES
========================================================== */

.geradores-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.card-footer{

    margin-top:auto;

    width:100%;

}

.card-icon{

    font-size:56px;

    margin-bottom:20px;

}

.generator-list{

    flex:1;
    width:100%;

}

.generator-item{

    background:#f7f8f6;

    border:1px solid #dfe5df;

    border-radius:10px;

    padding:12px 16px;

    margin-bottom:10px;

    text-align:left;

    font-size:15px;

}

.generator-status{

    background:#fff3cd;

    color:#8a6d3b;

    padding:10px 18px;

    border-radius:30px;

    font-weight:600;

    margin-bottom:25px;

}

.btn-geradores{

    display:block;

    width:100%;

    padding:14px;

    border:none;

    border-radius:12px;

    background:#2563eb;

    color:#ffffff;

    font-weight:700;

    text-align:center;

    text-decoration:none;

    transition:.25s;

}

.btn-geradores:hover{

    background:#1d4ed8;

}

/* ===================================================
   PLANOS PREMIUM
=================================================== */

.premium-plan{

    position:relative;

    width:100%;

    margin-top:18px;

    padding:18px;

    border-radius:14px;

    border:1px solid #dfe5df;

    background:#fafcf9;

    transition:.25s;

}

.premium-plan:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 20px rgba(0,0,0,.08);

}

.plan-info h4{

    margin:0 0 12px;

    color:#2f5d50;

}

.plan-info ul{

    padding-left:18px;

    margin-bottom:18px;

}

.plan-info li{

    margin-bottom:8px;

    font-size:14px;

}

.btn-plan{

    width:100%;

    min-height:78px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-top:14px;

    border:none;

    border-radius:12px;

    background:#2563eb;

    color:#ffffff;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.btn-plan:hover{

    background:#1d4ed8;

}

.best-plan{

    border:2px solid #d4af37;

    background:#fffdf5;

}

.best-badge{

    position:absolute;

    top:-12px;

    right:15px;

    background:#d4af37;

    color:#fff;

    padding:4px 12px;

    border-radius:20px;

    font-size:11px;

    font-weight:700;

}

.btn-best{

    background:#16a34a;

}

.btn-best:hover{

    background:#15803d;

}
/* ==========================================================
   CARD CHECKLIST
========================================================== */

.checklist-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.status-free{

    background:#dcfce7;

    color:#166534;

}

.btn-checklist{

    display:block;

    width:100%;

    padding:14px;

    border:none;

    border-radius:12px;

    background:#16a34a;

    color:#ffffff;

    font-weight:700;

    text-align:center;

    text-decoration:none;

    transition:.25s;

}

.btn-checklist:hover{

    background:#15803d;

}

/* ==========================================
   PREÇO DOS PLANOS
========================================== */

.btn-plan{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:8px;

}

.price{

    display:block;

    margin-top:10px;

    font-size:.95rem;

    font-weight:600;

    opacity:.95;

}

.btn-best .price{

    background:rgba(255,255,255,.25);

}
@keyframes modalFade{

    from{

        opacity:0;

        transform:translateY(20px) scale(.96);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}
/*======================================================
CONFIGURAÇÃO INICIAL
======================================================*/

.config-panel{

    max-width:900px;

    margin:40px auto;

    background:#fff;

    border-radius:18px;

    padding:40px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.config-header{

    margin-bottom:35px;

}

.config-header h2{

    margin-bottom:10px;

    color:#17324d;

}

.config-header p{

    color:#64748b;

    line-height:1.6;

}

.config-item{

    padding:25px 0;

    border-top:1px solid #e5e7eb;

}

.config-item:first-of-type{

    border-top:none;

}

.config-item h3{

    margin-bottom:16px;

    font-size:1.25rem;

    color:#17324d;

}

.config-options{

    display:flex;

    gap:30px;

    margin-bottom:10px;

}

.option-radio{

    display:flex;

    align-items:center;

    gap:8px;

    cursor:pointer;

    font-size:1.05rem;

    font-weight:600;

}

.option-radio input{

    transform:scale(1.2);

}

.config-help{

    margin:0;

    color:#64748b;

    line-height:1.6;

}

.config-footer{

    text-align:center;

    margin-top:35px;

}

.btn-config{

    min-width:320px;

    padding:16px 30px;

    font-size:1.05rem;

    border-radius:12px;

}
.card-instrucoes {
    margin: 20px 0;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #dbeafe;
    border-left: 4px solid #16a34a;
    border-radius: 10px;
    text-align: left;
}

.card-instrucoes h4 {
    margin: 0 0 10px;
    font-size: 1rem;
    color: #166534;
}

.card-instrucoes ul {
    margin: 0;
    padding-left: 18px;
}

.card-instrucoes li {
    margin-bottom: 8px;
    font-size: 0.92rem;
    line-height: 1.45;
    color: #334155;
}

.card-instrucoes li:last-child {
    margin-bottom: 0;
}
.report-premium-card{

    margin:40px 0;

    padding:32px;

    border-radius:16px;

    background:#fff8e6;

    border:2px solid #f4c542;

    text-align:center;

}

.report-premium-card h2{

    margin-bottom:15px;

}

.report-premium-card p{

    margin-bottom:20px;

}

.report-blur{

    filter:blur(6px);

    pointer-events:none;

    user-select:none;

    opacity:.75;

}
.report-premium-card{

    margin:40px 0;

    padding:30px;

    border-radius:14px;

    background:#fff8e8;

    border:2px solid #f4c542;

    text-align:center;

}

.report-premium-card h2{

    margin-bottom:15px;

}

.report-premium-card p{

    margin-bottom:25px;

}

.btn-premium-report{

    padding:14px 28px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

}

.report-blur{

    filter: blur(8px);

    opacity:.50;

    pointer-events:none;

    user-select:none;

    transition:.25s;

}