/* ==========================================================
   CATÁLOGO DE APLICACIÓN DE BATERÍAS
   LLANTIMUNDO
   style.css
========================================================== */

/* =========================
   VARIABLES
========================= */

:root{

    --rojo:#c8102e;
    --rojo-hover:#a30d26;

    --gris:#f5f6fa;
    --gris2:#ececec;

    --texto:#333333;

    --radio:18px;

}

/* =========================
   BODY
========================= */

body{

    background:#f4f6f9;

    font-family:
    "Segoe UI",
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;

    color:var(--texto);

}

/* =========================
   HEADER
========================= */

.header-app{

    background:linear-gradient(135deg,#c8102e,#8f0018);

    color:#fff;

    padding:28px 0;

    margin-bottom:25px;

}

/* =========================
   LOGO
========================= */

.logo{

      width:180px;
    height:auto;

    transition:.30s;


}

.logo:hover{

    transform:scale(1.05);

}

/* =========================
   TITULO
========================= */

.titulo{

    font-size:2rem;

    font-weight:700;

    margin-bottom:5px;

}

.subtitulo{

    opacity:.95;

    font-size:1rem;

}

/* =========================
   TARJETAS
========================= */

.card-soft{

    border:none;

    border-radius:var(--radio);

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

    

}

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

.form-label{

    font-weight:600;

    color:#555;

}

/* =========================
   SELECT
========================= */

.form-select{

    height:50px;

    border-radius:12px;

    border:1px solid #ddd;

    transition:.25s;

}

.form-select:focus{

    border-color:var(--rojo);

    box-shadow:0 0 0 .20rem rgba(200,16,46,.20);

}

/* =========================
   BOTONES
========================= */

.btn{

    border-radius:12px;

    padding:10px 30px;

    font-weight:600;

}

.btn-danger{

    background:var(--rojo);

    border:none;

}

.btn-danger:hover{

    background:var(--rojo-hover);

}

.btn-outline-secondary{

    border-width:2px;

}

/* =========================
   CARD HEADER
========================= */

.card-header{

    font-weight:700;

    font-size:1.05rem;

}

/* =========================
   TABLA
========================= */

.table{

    margin-bottom:0;

}

.table thead{

    vertical-align:middle;

}

.table thead th{

    background:var(--rojo);

    color:white;

    border:none;

    padding:14px;

    text-align:center;

}

.table tbody td{

    text-align:center;

    vertical-align:middle;

    padding:14px;

}

.table-hover tbody tr:hover{

    background:#fff4f6;

    transition:.20s;

}

/* =========================
   ALERTA
========================= */

.alert{

    border:none;

    border-radius:14px;

}

/* =========================
   SPINNER
========================= */

.spinner-border{

    width:3rem;

    height:3rem;

}

/* =========================
   PLACEHOLDER TABLA
========================= */

#tablaResultados td{

    padding:35px;

}

/* =========================
   SOMBRAS
========================= */

.shadow-sm{

    box-shadow:0 8px 18px rgba(0,0,0,.08)!important;

}

/* =========================
   SCROLL TABLA
========================= */

.table-responsive{

    border-radius:0 0 18px 18px;

}

/* =========================
   ANIMACIONES
========================= */

.card-soft{

    animation:fade .40s;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:992px){

    .titulo{

        font-size:1.7rem;

        margin-top:15px;

        text-align:center;

    }

    .subtitulo{

        text-align:center;

    }

    .logo{

        width:80px;

    }

}

@media(max-width:768px){

    .btn{

        width:100%;

        margin-bottom:10px;

    }

    .btn + .btn{

        margin-left:0!important;

    }

    .card-body{

        padding:25px;

    }

}

@media(max-width:576px){

    .titulo{

        font-size:1.45rem;

    }

    .subtitulo{

        font-size:.90rem;

    }

}