@font-face {
    font-family: 'Roboto Condensed';
    src: url('/css/fonts/Roboto-Condensed.ttf')
}

@font-face {
    font-family: 'Roboto Bold Condensed';
    src: url('/css/fonts/RobotoCondensed-Bold.ttf');
}

@font-face {
    font-family: 'Roboto Bold';
    src: url('/css/fonts/Roboto-Bold.ttf')
}

.quotas-lobby-wrapper {
    position: relative;
}

.quotas-lobby{
    padding-left:10px;
    /* El overflow oculto puede venir de Swiper; aquí solo controlamos padding */
}

.sport-card-quota {
    width: 100%;
    height: 143.5px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.sport-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.background-futbol {
    /*background: linear-gradient(266deg, rgba(0, 0, 0, 0.85) 12%, rgba(45, 77, 0, 1) 80%);*/
    background: transparent linear-gradient(90deg, #29360F 0%, #000000 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 6px #00000080;
}

.background-tenis {
    /*background: linear-gradient(266deg, rgba(0, 0, 0, 0.85) 12%, rgba(20, 40, 78, 1) 80%);*/
    background: transparent linear-gradient(90deg, #0F2036 0%, #000000 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 6px #00000080;
}

.background-baloncesto {
    /*background: linear-gradient(266deg, rgba(0, 0, 0, 0.74) 12%, rgba(191, 106, 36, 0.86) 80%);*/
    background: transparent linear-gradient(90deg, #51300A 0%, #000000 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 6px #00000080;
}

.color-futbol {
    background: rgba(109, 149, 53, 1);
}

.color-tenis {
    background: rgba(43, 85, 166, 1)
}

.color-baloncesto {
    background: rgba(235, 134, 51, 0.86);
}

.color-sport-futbol {
    color: #73972A;
}

.color-sport-tenis {
    color: #3372B2;
}

.color-sport-baloncesto {
    color: #CE8B29;
}

.match-date {
    position: absolute;
    top: 12.91px;
    left: 12.41px;
    width:94px;
    height:17px;
    color: #A8A8A8;
    font-size: 14px;
}

.teams {
    position: absolute;
    top: 36.34px;
    left: 12.41px;
    width: 147px;
    height: 38px;
    font: bold 16px/19px Roboto;
    text-align: left;
    letter-spacing: 0px;
    color: #FFFFFF;
}

.teams p {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.competition {
    text-align:end;
    position: absolute;
    width:88px;
    top: 12.94px;
    right: 12.6px;
    font-weight: bold;
    font-size: 14px;
    color: -var(--color-sport-card-competition);
    white-space: nowrap;  /* no permitir saltos de línea */
    overflow: hidden;     /* esconder lo que se sale */
    text-overflow: ellipsis; /* poner ... */
    
}

.offers {
    line-height: 10px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    flex-direction: column;
    position: absolute;
    left: 12.41px;
    bottom: 13.34px;
}

.offers-futbol {
    width: 129.57px;
    height:49.94px;
}

.offers-other {
    width: 87.57px;
    height:49.94px;
}

.options {
    font-size: 14px;
    justify-content: space-around;
    display: flex;
    padding: 5px;
    align-items: center;
}

.quotas {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.315);
    border-radius: 50px;
    height: 27px;
}

.quota-team-home,
.quota-draw,
.quota-team-away {
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 23px;
    text-align: center;
    font: normal normal bold 14px/10px Roboto;
    letter-spacing: 0px;
}

.quota-team-home span,
.quota-draw span,
.quota-team-away span {
    padding: 10px;
    /* aquí sí puedes dar padding */
}

.image-futbol {
    background-image: url('/img/cuotas/futbol.webp');
    background-size: cover;
    background-position: center;
}


.image-tenis {
    background-image: url('/img/cuotas/tenis.webp');
    background-size: cover;
    background-position: center;
}

.image-baloncesto {
    background-image: url('/img/cuotas/basquet.webp');
    background-size: cover;
    background-position: center;
}

.image-quota {
    position: absolute;
    border-radius:100%;
    top: 60px;
    left: 66%;
    width: 45%;
    height: auto;
    aspect-ratio: 1 / 1;
}

/*Configuración swiper*/
/*==============================================================================*/
.swiper-slide {
  width: 256px; /* ancho fijo de cada slide */
  flex-shrink: 0; /* evitar que Swiper reduzca el ancho */
}
/*==============================================================================*/

@media(min-width:1024px){
    .quotas-lobby{
        padding-left:0px;
    }
    
    .sport-card-quota{
        /*width: 194.73px;*/
        height: auto;
        aspect-ratio:16/9;
    }
    
    .match-date{
        top: 11.17px;
        left: 13.75px;
        height: 17px;
        font:normal 9px / 15px Roboto;
    }
    
    .competition {
        width: 95px;
        top: 11.17px;
        right: 16.75px;
        height: 17px;
        font: bold 9px / 15px Roboto;
    }
    
    .teams{
        text-align: justify;
        top: 30px;
        width: 126px;
        left: 13.75px;
        bottom: 20.7px;
        font:bold 10px Roboto;
    }
    
    .offers {
        left: 13.75px;
        bottom: 7%;
    }
    
    .options{
        position: relative;
        font: normal 9px Roboto;
    }
    
    .offers-futbol {
        width: 100px;
        height: 47.94px;
    }

    .offers-other {
        width: 70px;
    }
    
    .quota-team-home,
    .quota-draw,
    .quota-team-away {
        font:bold 10px Roboto;
    }
    
    
    .quota-button-next, .quota-button-prev{
        position:absolute;
        background-position-y: 50%;
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
        height: 100%;
        top: 50%;
        transform: translateY(-50%);
        width: 15px;
        z-index: 100;
    }
    
    .quota-button-prev{
        background-image: url(/img/layout/flecha_izq.svg);
        left:-51px;
    }
    
    .quota-button-next{
        background-image: url(/img/layout/flecha_der.svg);
        right:-51px;
    }
    
}

@media(min-width:1170px){
    .teams{
        font: bold 16px Roboto;
    }
}

@media(min-width:1440px){
    
    .quotas-lobby{
        padding-left:0px;
    }
    
    .sport-card-quota{
        /*height: 185.88px;*/
    }
    
    .match-date{
        font:normal 14px Roboto;
    }
    
    .competition {
        width: 150px;
        font:  normal 14px Roboto;
    }
    
    .teams{
        text-align: justify;
        top: 50px;
        width: 150px;
        font:  bold 20px Roboto;
    }
    
    .offers {
        bottom: 16px;
    }
    
    .options{
        font: normal 14px Roboto;
    }
    
    .offers-futbol {
        width: 145px;
    }

    .offers-other {
        width: 115px;
    }
    
    
    .quota-team-home,
    .quota-draw,
    .quota-team-away {
        font: bold 14px Roboto;
    }
    
}

@media(min-width:1920px){
    
    .match-date {
        width: 140px;
        top: 20.17px;
        left: 16.75px;
        font: normal 14px Roboto;
    }
    
    .competition{
        top: 20.17px;
        font:  normal 14px Roboto;
    }
    
    .teams{
        font:  bold 20px Roboto;
        left: 16.75px;
        white-space: nowrap;        /* ❗ no permitir saltos de línea */
        overflow: hidden;           /* ❗ ocultar lo que sobra */
        text-overflow: ellipsis;
        height: 47px;
        width: 200px;
    }
    
    .offers{
        left: 16.75px;
    }
    
}