/* ==========================================================
   ELETROALTA ENGENHARIA
   SISTEMA DE SOLICITAÇÃO DE ORÇAMENTOS
   style.css
========================================================== */

/* ==========================================================
   RESET
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',Arial,sans-serif;

    background:#F4F7FB;

    color:#1F2937;

    line-height:1.6;

    font-size:16px;

}

/* ==========================================================
   VARIÁVEIS
========================================================== */

:root{

    --azul:#071522;

    --azul-secundario:#10233D;

    --azul-claro:#1E88E5;

    --azul-hover:#1565C0;

    --azul-card:#0E1D31;

    --amarelo:#FFC107;

    --verde:#16A34A;

    --vermelho:#DC2626;

    --texto:#1F2937;

    --texto-claro:#6B7280;

    --branco:#FFFFFF;

    --fundo:#F4F7FB;

    --borda:#D9E2EC;

    --sombra:0 10px 35px rgba(0,0,0,.10);

}

/* ==========================================================
   CONTAINER
========================================================== */

.container{

    width:95%;

    max-width:1350px;

    margin:auto;

}

/* ==========================================================
   TOPO
========================================================== */

.topo{

    background:#05070C;

    border-bottom:1px solid rgba(255,255,255,.08);

    padding:18px 0;

}

.topo .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* ==========================================================
   LOGOTIPO
========================================================== */

.logo{

    height:60px;

    width:auto;

    display:block;

}

/* ==========================================================
   BOTÃO VOLTAR
========================================================== */

.btn-voltar{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    background:var(--azul-claro);

    color:#FFF;

    padding:14px 24px;

    border-radius:8px;

    font-size:15px;

    font-weight:700;

    transition:.30s;

}

.btn-voltar:hover{

    background:var(--azul-hover);

    transform:translateY(-2px);

}

/* ==========================================================
   HERO
========================================================== */

.hero{

    background:

        linear-gradient(

            135deg,

            #071522,

            #10233D

        );

    color:white;

    padding:80px 0 110px;

}

.hero .container{

    max-width:1250px;

}

/* ==========================================================
   BADGE
========================================================== */

.badge{

    display:inline-block;

    padding:8px 18px;

    border:1px solid #1E88E5;

    color:#56B3FF;

    border-radius:6px;

    letter-spacing:2px;

    font-size:12px;

    font-weight:600;

    text-transform:uppercase;

}

/* ==========================================================
   TITULOS
========================================================== */

.hero h1{

    margin-top:25px;

    font-size:58px;

    line-height:1.05;

    font-weight:800;

    color:white;

}

.hero h2{

    margin:22px 0;

    font-size:30px;

    color:#5EB6FF;

    font-weight:700;

}

.hero p{

    max-width:850px;

    font-size:20px;

    color:#D7E3F0;

}

/* ==========================================================
   FORMULÁRIO
========================================================== */

form{

    margin-top:-55px;

    margin-bottom:70px;

}

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

@media(max-width:900px){

    .topo .container{

        flex-direction:column;

        gap:20px;

    }

    .hero{

        padding:60px 0 80px;

    }

    .hero h1{

        font-size:40px;

    }

    .hero h2{

        font-size:24px;

    }

    .hero p{

        font-size:18px;

    }

}

@media(max-width:600px){

    .hero h1{

        font-size:32px;

    }

    .hero h2{

        font-size:20px;

    }

    .hero p{

        font-size:16px;

    }

    .logo{

        height:48px;

    }

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

.card{

    background:#FFF;

    border-radius:14px;

    padding:35px;

    margin-bottom:28px;

    box-shadow:var(--sombra);

    border:1px solid #E8EEF5;

    transition:.30s;

}

.card:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.card h2{

    color:var(--azul);

    font-size:28px;

    font-weight:800;

    margin-bottom:10px;

}

.card p{

    color:var(--texto-claro);

    margin-bottom:25px;

    font-size:16px;

}

/* ==========================================================
   GRID
========================================================== */

.grid-2{

    display:grid;

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

    gap:24px;

}

.grid-3{

    display:grid;

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

    gap:24px;

}

/* ==========================================================
   LABELS
========================================================== */

label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:700;

    color:#334155;

}

/* ==========================================================
   CAMPOS
========================================================== */

input,
select,
textarea{

    width:100%;

    padding:15px 18px;

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

    border-radius:8px;

    background:white;

    font-size:15px;

    transition:.25s;

}

input:hover,
select:hover,
textarea:hover{

    border-color:#B7C7DA;

}

input:focus,
select:focus,
textarea:focus{

    outline:none;

    border-color:var(--azul-claro);

    box-shadow:0 0 0 4px rgba(30,136,229,.18);

}

textarea{

    resize:vertical;

    min-height:140px;

}

/* ==========================================================
   PESQUISA
========================================================== */

.pesquisa{

    margin-bottom:20px;

    padding:16px;

    font-size:16px;

}

/* ==========================================================
   INPUT QUANTIDADE
========================================================== */

.qtd{

    width:90px;

    text-align:center;

    font-weight:700;

}

/* ==========================================================
   RESUMO FIXO
========================================================== */

.resumo{

    position:sticky;

    bottom:15px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    background:#071522;

    color:#FFF;

    padding:14px 22px;

    border-radius:10px;

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

    z-index:999;

}

.resumo-esquerda{

    display:flex;

    align-items:center;

    gap:15px;

}

.resumo-esquerda h4{

    margin:0;

    font-size:15px;

    font-weight:700;

}

.resumo-esquerda h3{

    margin:0;

    font-size:34px;

    color:#4DB2FF;

    line-height:1;

}

.resumo-esquerda p{

    margin:0;

    font-size:13px;

    color:#D6E2F1;

}

.resumo-direita{

    display:flex;

    align-items:center;

    gap:12px;

}

.botao{

    padding:14px 24px;

    background:#1E88E5;

    color:#FFF;

    border:none;

    border-radius:8px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    width:auto;

    min-width:320px;

}

.botao:hover{

    background:#1565C0;

}

.botao-secundario{

    padding:14px 20px;

    border-radius:8px;

    background:#FFF;

    color:#071522;

    text-decoration:none;

    font-weight:600;

    white-space:nowrap;

}

/* ==========================================================
   ALERTAS
========================================================== */

.alerta{

    padding:18px;

    border-radius:8px;

    margin-bottom:25px;

}

.alerta-sucesso{

    background:#DCFCE7;

    color:#166534;

}

.alerta-erro{

    background:#FEE2E2;

    color:#991B1B;

}

/* ==========================================================
   UPLOAD
========================================================== */

input[type=file]{

    background:#F8FAFC;

    padding:18px;

}

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

@media(max-width:1000px){

    .grid-2,
    .grid-3{

        grid-template-columns:1fr;

    }

    .resumo{

        flex-direction:column;

        text-align:center;

        gap:15px;

    }

}

@media(max-width:600px){

    .card{

        padding:22px;

    }

    .card h2{

        font-size:24px;

    }

    .botao{

        font-size:18px;

    }

}
/* ==========================================================
   TABELA DE EQUIPAMENTOS
========================================================== */

table{

    width:100%;

    border-collapse:collapse;

    background:#FFF;

    border-radius:10px;

    overflow:hidden;

    box-shadow:0 4px 20px rgba(0,0,0,.04);

}

thead{

    background:#071522;

    color:#FFF;

}

thead th{

    padding:16px 14px;

    text-align:left;

    font-size:14px;

    font-weight:700;

    letter-spacing:.4px;

    text-transform:uppercase;

}

tbody td{

    padding:14px;

    border-bottom:1px solid #EDF2F7;

    vertical-align:middle;

    transition:.25s;

}

tbody tr:nth-child(even){

    background:#FAFBFC;

}

tbody tr:hover{

    background:#EDF6FF;

}

.col-id{

    width:70px;

    text-align:center;

    font-weight:700;

}

.col-un{

    width:90px;

    text-align:center;

}

.col-qtd{

    width:120px;

    text-align:center;

}

/* ==========================================================
   INPUT QUANTIDADE
========================================================== */

input.qtd{

    width:75px;

    margin:auto;

    text-align:center;

    font-weight:700;

}

/* ==========================================================
   SCROLL TABELA
========================================================== */

.tabela-scroll{

    overflow-x:auto;

}

/* ==========================================================
   LOADING
========================================================== */

.loading{

    display:none;

    text-align:center;

    padding:30px;

}

.loading img{

    width:50px;

}

/* ==========================================================
   MENSAGENS
========================================================== */

.msg{

    padding:20px;

    border-radius:8px;

    margin-bottom:25px;

    font-size:15px;

}

.msg-ok{

    background:#DCFCE7;

    color:#166534;

}

.msg-erro{

    background:#FEE2E2;

    color:#991B1B;

}

/* ==========================================================
   RODAPÉ
========================================================== */

footer{

    background:#05070C;

    color:#FFF;

    margin-top:70px;

    padding:40px 0;

}

footer .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

footer p{

    color:#B6C2D2;

    font-size:14px;

}

footer a{

    color:#4DA3FF;

    text-decoration:none;

}

footer a:hover{

    text-decoration:underline;

}

/* ==========================================================
   ANIMAÇÕES
========================================================== */

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.card{

    animation:fade .45s ease;

}

/* ==========================================================
   BARRA DE ROLAGEM
========================================================== */

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-track{

    background:#EAEFF4;

}

::-webkit-scrollbar-thumb{

    background:#AFC1D6;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#6B8DB4;

}

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

@media(max-width:900px){

    table{

        min-width:800px;

    }

}

@media(max-width:768px){

    footer .container{

        flex-direction:column;

        text-align:center;

    }

    .btn-voltar{

        width:100%;

        justify-content:center;

    }

}

@media(max-width:600px){

    body{

        font-size:15px;

    }

    thead th{

        font-size:12px;

        padding:12px;

    }

    tbody td{

        font-size:13px;

        padding:10px;

    }

    input.qtd{

        width:60px;

    }

}

/* ==========================================================
   EFEITOS
========================================================== */

.botao,
.btn-voltar,
.card,
input,
select,
textarea{

    transition:all .25s ease;

}

.card:hover{

    border-color:#C9D7E7;

}

input:disabled{

    background:#F3F5F7;

    color:#999;

}

button:disabled{

    opacity:.6;

    cursor:not-allowed;

}

/* ==========================================================
   FIM DO ARQUIVO
========================================================== */