/* ==========================================================
   LEADS 360º PLATFORM
   STYLE.CSS

   VERSÃO: 2.0.0
   ARQUITETURA VISUAL OFICIAL

   Organização:

   00 • ROOT
   01 • BASE
   02 • HEADER
   03 • HERO

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



/* ==========================================================
   00 • ROOT
========================================================== */

:root{

    --radius:30px;

    --transition:.25s ease;

    --container:1200px;

}



/* ==========================================================
   01 • BASE
========================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:
    "Segoe UI",
    sans-serif;

    background:
    var(--background);

    color:
    var(--text);

    transition:
    background .35s ease,
    color .35s ease;

}

main{

    width:100%;

    max-width:
    var(--container);

    margin:auto;

    padding:20px;

}

section{

    margin-bottom:35px;

}

button{

    cursor:pointer;

    transition:
    var(--transition);

}

a{

    text-decoration:none;

    color:inherit;

}



/* ==========================================================
   02 • HEADER
========================================================== */

header{

    width:100%;

    padding:20px;

}

.header-container{

    max-width:
    var(--container);

    margin:auto;

    display:flex;

    justify-content:
    space-between;

    align-items:center;

}

.logo{

    width:190px;

    max-width:100%;

    display:block;

}

.header-actions{

    display:flex;

    align-items:center;

    gap:10px;

}

.theme-btn{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:
    var(--surface);

    color:
    var(--text);

    box-shadow:
    var(--shadow);

    font-size:20px;

}



/* ==========================================================
   03 • HERO
========================================================== */

.hero{

    text-align:center;

    padding:25px 15px;

}

.hero-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    border-radius:30px;

    background:
    var(--primary);

    color:#111;

    font-weight:700;

    margin-bottom:20px;

}

.hero h1{

    font-size:clamp(28px,5vw,46px);

    font-weight:700;

    line-height:1.2;

    margin-bottom:20px;

}

.hero p{

    max-width:760px;

    margin:auto;

    font-size:18px;

    line-height:1.7;

    color:
    var(--text-secondary);

}/* ==========================================================
   04 • PESQUISA
========================================================== */


.search-section{

    width:100%;

    margin:35px auto;

}


.search-outer{


    padding:3px;

    border-radius:42px;


    background:

    linear-gradient(
        90deg,
        #FAD02C,
        #444,
        #dcdcdc,
        #FAD02C
    );


    background-size:300% 300%;


    animation:

    l360Border 5s linear infinite;


}



[data-theme="dark"] .search-outer{


    background:

    linear-gradient(
        90deg,
        #777,
        #FAD02C,
        #f5f5f5,
        #777
    );


}



@keyframes l360Border{


    0%{

        background-position:0% 50%;

    }


    100%{

        background-position:300% 50%;

    }


}





.search-inner{


    height:60px;

    background:

    var(--search-background);


    border-radius:38px;


    display:flex;

    align-items:center;


    padding:0 8px 0 20px;


}



.search-inner input{


    flex:1;


    height:100%;


    border:none;


    outline:none;


    background:transparent;


    font-size:16px;


    color:

    var(--search-text);


}





.search-button{


    height:46px;


    min-width:110px;


    border-radius:28px;


    border:none;


    background:

    var(--primary);


    color:#111;


    display:flex;


    align-items:center;


    justify-content:center;


    gap:8px;


    font-weight:700;


}





.search-button i{


    font-size:16px;

}




.search-tip{


    margin-top:15px;


    text-align:center;


    font-size:14px;


    color:

    var(--text-secondary);


}


.status-dot{


    display:inline-block;


    width:7px;


    height:7px;


    border-radius:50%;


    background:#FAD02C;


    margin-right:6px;


}



/* ==========================================================
   05 • LOCALIZAÇÃO
========================================================== */


.location-box{


    width:100%;


    display:flex;


    gap:15px;


    margin-top:20px;


}




.location-box select{


    flex:1;


    height:52px;


    border-radius:26px;


    border:2px solid var(--primary);


    background:

    var(--surface);


    color:

    var(--text);


    padding:0 20px;


    font-size:16px;


}



/* ==========================================================
   06 • LOADER
========================================================== */

.loader{

    display:none;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:50px 20px;

}

.loader-circle{

    width:80px;

    height:80px;

    border:6px solid rgba(255,255,255,.15);

    border-top:6px solid var(--primary);

    border-radius:50%;

    animation:l360spin 1s linear infinite;

    margin-bottom:25px;

}

.loader-status{

    max-width:500px;

}

.loader-status p{

    font-size:18px;

    margin-bottom:20px;

}

.loader-status ul{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:8px;

    color:var(--text-secondary);

}

@keyframes l360spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



/* ==========================================================
   07 • RESULTADO
========================================================== */

.result{

    display:none;

    justify-content:center;

    align-items:center;

}

.result-card{

    width:100%;

    max-width:700px;

    padding:35px;

    border-radius:30px;

    background:var(--surface);

    box-shadow:var(--shadow);

    text-align:center;

}

.result-label{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:var(--primary);

    color:#111;

    font-weight:700;

    margin-bottom:20px;

}

.result-score{

    font-size:72px;

    font-weight:800;

    margin-bottom:15px;

}

.result h2{

    margin-bottom:18px;

}

.result-text{

    line-height:1.7;

    margin-bottom:30px;

    color:var(--text-secondary);

}

.result-actions{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}

.result-actions button{

    min-width:180px;

    height:52px;

    border:none;

    border-radius:30px;

    background:var(--primary);

    color:#111;

    font-weight:700;

}

.result-actions button:hover{

    background:var(--primary-hover);

}/* ==========================================================
   08 • PAINEL DE EVOLUÇÃO
========================================================== */

.panel-card{

    display:none;

    width:100%;

    max-width:900px;

    margin:auto;

    padding:30px;

    border-radius:30px;

    background:var(--surface);

    box-shadow:var(--shadow);

}

.panel-header{

    font-size:24px;

    font-weight:700;

    margin-bottom:25px;

}

.panel-empty{

    text-align:center;

    padding:35px 15px;

}

.panel-empty h3{

    margin-bottom:15px;

}

.panel-empty p{

    color:var(--text-secondary);

    margin-bottom:25px;

}

.panel-empty button{

    width:220px;

    height:52px;

    border:none;

    border-radius:30px;

    background:var(--primary);

    color:#111;

    font-weight:700;

}

.panel-content{

    display:none;

}

.panel-grid{

    display:grid;

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

    gap:18px;

    margin-bottom:30px;

}

.panel-item{

    background:var(--surface-secondary);

    border-radius:22px;

    padding:18px;

}

.panel-item span{

    display:block;

    font-size:14px;

    color:var(--text-secondary);

    margin-bottom:8px;

}

.panel-item strong{

    font-size:26px;

}

.panel-opportunity{

    color:#1fa64a;

}

.panel-pdfs{

    margin-bottom:25px;

}

.panel-pdfs h4{

    margin-bottom:12px;

}

.panel-pdfs ul{

    list-style:none;

}

.panel-pdfs li{

    padding:8px 0;

}

.panel-message{

    padding:20px;

    border-radius:22px;

    background:var(--surface-secondary);

    margin-bottom:25px;

}

.panel-message p{

    line-height:1.7;

}

.panel-actions{

    display:flex;

    justify-content:center;

}

.panel-actions button{

    width:280px;

    height:56px;

    border:none;

    border-radius:30px;

    background:var(--primary);

    color:#111;

    font-weight:700;

}



/* ==========================================================
   09 • CARDS / SHORTCUTS
========================================================== */

.shortcuts{

    width:100%;

    display:grid;

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

    gap:18px;

    margin:35px auto;

}

.shortcut{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:22px;

    border-radius:24px;

    background:var(--surface);

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.shortcut:hover{

    transform:translateY(-4px);

}

.shortcut span{

    font-size:32px;

    margin-bottom:12px;

}

.shortcut strong{

    font-size:16px;

    margin-bottom:8px;

}

.shortcut small{

    font-size:13px;

    color:var(--text-secondary);

}



/* ==========================================================
   10 • FOOTER
========================================================== */

footer{

    margin-top:50px;

    border-top:1px solid var(--border);

    padding:25px 20px;

}

.footer-container{

    max-width:1200px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

.footer-left{

    font-size:14px;

}

.footer-center{

    text-align:center;

}

.footer-center strong{

    display:block;

    margin-bottom:10px;

}

.social-icons{

    display:flex;

    justify-content:center;

    gap:15px;

}

.footer-right{

    font-size:14px;

    text-align:right;

}
/* ==========================================================
   11 • RESPONSIVIDADE
========================================================== */


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1024px){

    main{

        padding:20px;

    }

    .panel-grid{

        grid-template-columns:1fr 1fr;

    }

}



/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    /* ---------- HEADER ---------- */

    header{

        padding:15px;

    }

    .header-container{

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

    }

    .logo{

        width:150px;

    }

    .theme-btn{

        width:42px;

        height:42px;

        font-size:18px;

    }


    /* ---------- HERO ---------- */

    .hero{

        padding:15px;

    }

    .hero h1{

        font-size:30px;

        line-height:1.25;

    }

    .hero p{

        font-size:16px;

    }


    /* ---------- PESQUISA ---------- */

   .search-shell{

    padding:2px;

    border-radius:40px;

    background:linear-gradient(
        90deg,
        #FAD02C,
        #444,
        #d7d7d7,
        #FAD02C
    );

    background-size:300% 300%;

    animation:l360SearchBorder 6s linear infinite;

}

[data-theme="dark"] .search-shell{

    background:linear-gradient(
        90deg,
        #666,
        #FAD02C,
        #f5f5f5,
        #666
    );

    background-size:300% 300%;

}

@keyframes l360SearchBorder{

    0%{background-position:0% 50%;}

    100%{background-position:300% 50%;}

}


    /* ---------- LOCALIZAÇÃO ---------- */

    .location-box{

        flex-direction:column;

        gap:12px;

    }

    .location-box select{

        width:100%;

    }


    /* ---------- RESULTADO ---------- */

    .result-card{

        padding:25px 20px;

    }

    .result-score{

        font-size:56px;

    }

    .result-actions{

        flex-direction:column;

    }

    .result-actions button{

        width:100%;

    }


    /* ---------- PAINEL ---------- */

    .panel-card{

        padding:22px;

    }

    .panel-grid{

        grid-template-columns:1fr;

    }

    .panel-actions button{

        width:100%;

    }


    /* ---------- SHORTCUTS ---------- */

    .shortcuts{

        grid-template-columns:1fr 1fr;

        gap:12px;

        padding:0;

    }

    .shortcut{

        padding:18px;

    }

    .shortcut span{

        font-size:28px;

    }


    /* ---------- FOOTER ---------- */

    .footer-container{

        flex-direction:column;

        text-align:center;

    }

    .footer-right{

        text-align:center;

    }

}



/* ==========================================================
   MOBILE PEQUENO
========================================================== */

@media (max-width:480px){

    .hero h1{

        font-size:26px;

    }

    .hero p{

        font-size:15px;

    }

    .shortcuts{

        grid-template-columns:1fr;
        
         gap:15px;


    }

    .search-box input{

        padding-right:110px;

    }

}