/* ============================================================
   PROLIBER
   Caderno de Teses
   style.css
============================================================ */

/* ---------- Variáveis ---------- */

:root{

    --cor-primaria:#0d47a1;
    --cor-secundaria:#1565c0;
    --cor-hover:#0b3b84;

    --cor-sucesso:#198754;
    --cor-perigo:#dc3545;
    --cor-aviso:#ffc107;

    --texto:#212529;
    --texto-claro:#6c757d;

    --fundo:#f4f6f9;

    --card:#ffffff;

    --borda:#dfe5ec;

    --radius:14px;

}


/* ---------- Body ---------- */

body{

    background:var(--fundo);

    font-family:
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

    color:var(--texto);

}


/* ---------- Título ---------- */

h1{

    font-weight:700;

    color:var(--cor-primaria);

}

h2,h3,h4,h5{

    font-weight:600;

}


/* ---------- Cards ---------- */

.card{

    border:none;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:

        0 4px 20px rgba(0,0,0,.06);

}


.card-header{

    background:var(--cor-primaria)!important;

    color:white;

    padding:18px 24px;

}

.card-body{

    padding:30px;

}


/* ---------- Alert ---------- */

.alert{

    border:none;

    border-radius:12px;

}


/* ---------- Progress ---------- */

.progress{

    border-radius:50px;

    background:#d9e2ef;

    overflow:hidden;

}

.progress-bar{

    background:var(--cor-secundaria);

    font-weight:600;

    transition: width .35s ease;

}


/* ---------- Labels ---------- */

.form-label{

    display:block;

    text-align:left;

    font-weight:600;

    margin-bottom:8px;

}

.card-header h4{

    text-align:left;

}

/* ---------- Inputs ---------- */

.form-control,

.form-select{

    border-radius:10px;

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

    min-height:48px;

    transition:.25s;

}


.form-control:focus,

.form-select:focus{

    border-color:var(--cor-secundaria);

    box-shadow:

        0 0 0 .18rem rgba(13,71,161,.15);

}


/* ---------- Textareas ---------- */

textarea.form-control{

    min-height:220px;

    resize:vertical;

}


/* ---------- Placeholder ---------- */

::placeholder{

    color:#9aa6b2!important;

}


/* ---------- Checkbox ---------- */

.form-check{

    margin-bottom:10px;

}

.form-check-input{

    cursor:pointer;

}

.form-check-label{

    cursor:pointer;

}


/* ---------- Contadores ---------- */

.contador{

    text-align:right;

    font-size:.85rem;

    color:var(--texto-claro);

    margin-top:6px;

}


/* ---------- Botões ---------- */

.btn-primary{

    background:var(--cor-secundaria);

    border:none;

    border-radius:10px;

    padding:14px 28px;

    font-size:1.05rem;

    font-weight:600;

}


.btn-primary:hover{

    background:var(--cor-hover);

}


.btn-lg{

    min-width:320px;

}


/* ---------- Spinner ---------- */

.spinner-border{

    width:1rem;

    height:1rem;

}


/* ---------- Obrigatório ---------- */

.obrigatorio{

    color:var(--cor-perigo);

}


/* ---------- Ajuda ---------- */

.form-text{

    color:var(--texto-claro);

}


/* ---------- Mensagens ---------- */

.invalid-feedback{

    display:block;

}


/* ---------- Seções ---------- */

.section-icon{

    margin-right:10px;

    font-size:1.2rem;

}


/* ---------- Rodapé ---------- */

footer{

    margin-top:40px;

    color:var(--texto-claro);

    text-align:center;

}


/* ---------- Fade ---------- */

.fade-in{

    animation:fade .4s;

}


@keyframes fade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/* ---------- Loader ---------- */

.loading{

    opacity:.65;

    pointer-events:none;

}


/* ---------- Barra fixa ---------- */

.sticky-progress{

    position:sticky;

    top:0;

    z-index:1000;

}


/* ---------- Campo Outro ---------- */

#divOutroSegmento{

    padding-top:15px;

}


/* ---------- Textareas ---------- */

textarea{

    line-height:1.6;

}


/* ---------- Cards ---------- */

.card + .card{

    margin-top:25px;

}


/* ---------- Hover ---------- */

.card:hover{

    transition:.25s;

    transform:translateY(-2px);

}


/* ---------- Desktop ---------- */

@media(min-width:992px){

.container{

    max-width:1100px;

}

}


/* ---------- Mobile ---------- */

@media(max-width:768px){

.card-body{

    padding:20px;

}

.btn-lg{

    width:100%;

}

textarea.form-control{

    min-height:180px;

}

}


/* ---------- Impressão ---------- */

@media print{

body{

    background:white;

}

.card{

    box-shadow:none;

}

.progress{

    display:none;

}

button{

    display:none;

}

}

/* ==========================================================
   Etapas
========================================================== */

.etapa{

    animation: aparecer .25s ease;

}

@keyframes aparecer{

    from{

        opacity:0;
        transform:translateY(10px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}