/* DETALLE-PRODUCTO*/ /* -------------------------------------------------------------------------------- */


/* :root {
	--primaryFont: 'Outfit', sans-serif;

    --colorBlack: #292936 ;
    --colorPrimary: #F00353;
	--colorPrimaryHover: #DE064F;
    --colorPrimaryDisabled: #E59AB3;

    --colorSecondary: #707070;
    --colorSecondaryHover: #3E3E5F;
    --colorSecondaryDisabled: #8181A0;

    --colorSuccess: #00B16D;
    --colorSuccessHover: #009A5F;
    --colorSuccessDisabled: #65C6A1;

    --colorDanger: #A8003A;
    --colorDangerHover: #910031;
    --colorDangerDisabled: #E97B86;

    --colorOferta: #00642F;
    --colorAction: #007bff;
    --colorActionHover: #0062cc;
} */

.fondo-detalle-producto {
    /* background: linear-gradient(180deg, rgba(226,226,238,1) 0%, rgba(226,226,238,0) 100%); */
    margin-top: 2em;
}

.container-detalle {
    position: relative;
    bottom: 1.5em;
}

.img-carousel-detalle{
    width:100%;
    height:25em;
    object-fit:cover;
}

.img-xs-carousel-detalle{
    width: 100%;
    height: 3em;
    object-fit: cover;
    cursor: pointer;
}



@media (min-width: 992px) {
    .container-detalle {
        padding: 0 0 0 0!important;
    }   
}

.migajas {
    font-size: 14px!important;
    margin-bottom: 1em;
    margin-top: 3em;
}

.migajas, a:link, a:visited, a:active, a:hover  {
    text-decoration:none !important;
}  

.migajas-style {
    color: #868E96;
    margin-bottom: 0px !important;
    text-decoration: none !important;
}

.migajas-min-w{
    min-width: fit-content;
}

.migajas-xl{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.migajas-back {
    color: var(--colorBlack) !important;
    text-decoration: none !important;
}

.migajas a:hover{
    color: var(--colorBlack)!important;
}

.titulo-seccion-home {
    padding-top: 1.5em;
    padding-bottom: 0.5em;
}

.contendor-detalle-compartir-producto{
    display: flex;
    justify-content: end;
    color: var(--colorSecondary);
}

.detalle-compartir-producto{
    color:  var(--colorSecondary);

}

.car-tittle-detalle {
    color: var(--colorPrimary);
}
.detalle-producto {
    border: #E8E8E8 1px solid;
    background-color: #FFFFFF;
    border-radius: 8px 8px 0 0;
    border-color: #E2E2E8;
    box-shadow: 1px 3px 10px #5555811A;
    margin-right: 0px!important;
    margin-left: 0px!important;
}

.slider-single {
    padding: 10px 10px 0 10px;
}

.price-item {
    font-size: 32px;
    font-weight: 300;
}
.card-price-text {
    margin-bottom: 0px !important;
    font-size: 38px !important;
    font-weight: 300;
}

.span-offer{
    background-color: var(--colorPrimary);
    color: #fff;
    font-size: 12px;
    padding: 4px;
    border-radius: 4px;
    position: relative;
    bottom: 8px;
    top: auto;
    left: auto;
    right: auto;
}

.detalle-producto-text {
    padding-top: 25px;
}
.font-modelo {
    font-size: 24px !important;
    line-height: 30px;
}
.modelo-km {
    font-size: 14px !important;
    color: var(--colorSecondary);
    /* margin-bottom: 26px !important; */
}
.btn-contact {
    background-color: var(--colorPrimary) !important;
    height: 50px;
    font-size: 16px !important;
    color: #FFFFFF !important;
    border-radius: 2px !important;
}

.btn-secondary-ask {
    height: 48px;
    margin-left: 8px;
    background-color: #F1F1F9 !important;
    color: var(--colorSecondary) !important;
    font-size: 16px !important;
    line-height: 1rem !important;
}
.visit-agencia {
    color: #292936;
    margin-top: 26px;
    margin-bottom: 8px !important;
}
.detalle-info {
    background-color: #FFFFFF;
    border-radius: 0 0 8px 8px;
    border: #E8E8E8 1px solid;
    box-shadow: 1px 3px 10px #5555811A;
    margin-right: 0px!important;
    margin-left: 0px!important;
}

.card-agencia-link {
    background-color: #FFFFFF;
    border-radius: 4px;
    border: #E8E8E8 1px solid;
    height: auto;
}

.card-agencia-link:hover {
    box-shadow: 1px 3px 10px #5555811A;
}

.card-img-agencia {
    border-radius: 4px;
    padding: 10px !important;
}

.img-agencia {
    width: 76px;
    height: 76px;
    border-radius: 4px;
    object-fit: cover;
}

.agencia-name {
    font-size: 18px!important;
    color: #292936;
}

.agencia-address {
    font-size: 14px;
    color: #555581;
}

.title-contact {
    margin-top: 32px !important;
    line-height: 26px;
    padding-bottom: 25px;
}

.title-contact a:link, a:visited, a:active, a:hover{
    text-decoration:none !important;
}

.title-contact a{
    /* color: var(--colorPrimary); */
    font-weight: 400;
}

.text-datos-car {
    margin-top: 25px;
    padding-bottom: 25px;
}

.table-style {
    border: #E8E8E8 1px solid;
    box-shadow: 1px 3px 10px #5555811a;
    border-radius: 4px;
}

.table td {
    border-top: 0px !important;
}

.table{
    margin-bottom: 0px !important;
}

.text-info {
    margin-top: 25px;
    padding-bottom: 25px;
}

.text-info-tittle {
    color: #292936!important;
}

.text-info-body {
    margin-top: 21px;
    line-height: 26px;
    color: #292936;
}

td.td-style-brandal {
    background-color: #F1F1F9 !important;
    margin-inline: 13px;
    }
    
/* Llevarnos los estilos estos para el css de detalle*/

.container .container-carousel{
    padding-left: 30px;
    padding-right: 30px;
}

.slider-box .slider-img{
    width: 90px!important;
    height: auto;
    object-fit: cover;
    padding: 0 4px;
}

.slider-img img {
    border-radius: 4px;
}

.slider-box .slick-list{
    height: 55px;
}

.slick-prev{
    left: -50px!important;
}

.slick-next{
    right: -50px!important;
}

.slick-prev:before, .slick-next:before{
    border-radius: 50% !important;
    color: #FFFFFF !important;
    background-color: var(--colorSecondary);
}

.slick-prev , .slick-next {
    box-shadow: 0px 3px 10px #5555811A;
}

.container-carousel .slick-track{
    min-width: 300px;
}

/* Creamos un media para ir manteniendo en línea al margin-left que está en el ::before, sino se rompe */
/*@media (min-width: 992px) {
    .tooltips:before{
        margin-left: -100px;
    }    
}

.tooltips:after {
    content: "";
    position: absolute;
    bottom: 75%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    opacity: 0;
    transition: opacity .6s;
    border-color: #062B45 transparent transparent transparent;
    visibility: hidden;
}

/* Tooltip box 
.tooltips:before {
    display: block;
    content: attr(data-tooltip);
    position: relative;
    width: 110px;
    background-color: #062B45;
    color: #fff;
    text-align: center;
    padding: 8px;
    line-height: 1.2;
    border-radius: 4px;
    z-index: 1;
    opacity: 0;
    transition: opacity .6s;
    bottom: auto;
    left: auto;
    top: -3px;
    right: 40px;
    font-size: 0.75em;
    visibility: hidden;
}

/* Tooltip arrow 
.tooltips:after {
    content: "";
    position: relative;
    top: 0px;
    left: 14px;
    border-width: 5px;
    border-style: solid;
    opacity: 0;
    transition: opacity .6s;
    border-color: #062B45 transparent transparent transparent;
    visibility: hidden;
}

.tooltips:hover:before, .tooltips:hover:after {
    opacity: 1;
    visibility: visible;
}*/

.icon-verificado-agencia{
    width: 28px;
    height: 28px;
    
}
.estado-ficha-peritaje{
    text-align: center;
    color: #FFF !important;
    border-radius: 2px;
    background: #00B16D;
    padding:6px 10px;
    gap: 5px;
    cursor: default;
}

.btn-borde-sin-relleno{
    background-color: #FFFFFF;
    text-align: center;
    font-weight: 500 !important;
    color: var(--colorBlack) !important;
    border-radius: 2px;
    border: 1px solid #292936 !important;
    padding:6px 10px;
    gap: 6px;
    width: 100%;
    height: 50px;
}

.btn-favorito{
    background-color: #FFFFFF;
    text-align: center;
    font-weight: 400 !important;
    color: var(--colorBlack) !important;
    border-radius: 2px;
    border: none;
    width: 100%;
    height: 50px;
    padding: 6px 10px;
    gap: 6px;
    text-decoration:none
}

.fixed-height-btn-actions {
    height: 45px;
}