.x-panel-body-default{
     background-color: #f7f7f7 !important;
}
.gridResumen {
    max-width: 819px;
    font-family: 'Montserrat';
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .16);
    margin-left: auto;
    position: relative;
    margin-right: auto;
}
.cabecera{
    background-color: white;
    padding: 25px;
}
    .cabecera .parteTop {
        display: flex;
        justify-content: space-between;
        position: absolute;
        right: 0;
    }
.escudos{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
}
    .escudos .item {
        text-align: center;
        padding: 0 10px;
        width: calc(50% - 95px);
    }
      .escudos .item .imagen img {
         min-width: 40px;
         max-width: 80px;
         height: auto;
         max-height: 44px;
         min-height: 40px;
      }
.marcador {
    font-weight: bold;
    font-size: 24px;
    width: 95px;
    text-align: center;
}
.tabs{
    display: flex;
    background-color: #f2f2f2;
}
.tabs button{
    padding: 8px 24px;
    background: transparent;
    border: 0;
    /* iOS Safari pinta los <button> en azul nativo si no se fija el color */
    color: #555;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    font-family: 'Montserrat';
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
    .tabs button:hover {
        background-color: #ededed;
    }
.tabs button.activo{
    font-weight: bold;
    border-color: #c42927;
    color: #111;
}
.tablaJustificada .fila{
    display: flex;
}
.tablaJustificada > .fila:not(:last-child) {
    margin-bottom: 4px;
}
.fila .izda{
    text-align: left;
    min-width: 25%;
}
.fila .dcha{
    font-weight: bold;
}
.grupo{
    background-color: white;
    padding: 25px;
}
.row{
    display: flex;
    justify-content: space-between;
}
.col-md-6{
    width: 48%;
}

#grupoAlineaciones .team-positions div + div {
    margin-top: 8px;
}
.team-member {
    display: flex;
}
#grupoAlineaciones .team-member + .team-member {
    margin-top: 8px;
}
    .t-shirt {
        display: inline-block;
        position: relative;
        margin-right: 8px;
        filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
    }
.t-shirt i{
    font-size: 37px;
    min-width: 47px;
    text-align: center;
}
.t-shirt .dorsal{
    position: absolute;
    text-align: center;
    display: flex;
    justify-content: center;
    color: white;
    width: 100%;
    top: 7px;
    font-weight: bold;
}
.alias{
    padding-top: 7px;
}
.capitan .t-shirt:before {
    content: 'C';
    font-family: 'Montserrat';
    font-size: 10px;
    font-weight: 600;
    position: absolute;
    top: -5px;
    left: -10px;
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #FFEB3B;
    color: #111;
    border: 2px solid white;
}
.libero .t-shirt:after {
    content: 'L';
    font-family: 'Montserrat';
    font-size: 10px;
    font-weight: 600;
    position: absolute;
    top: -5px;
    right: -10px;
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #111;
    color: white;
    border: 2px solid white;
}
.team-positions .separador {
    border-top: 1px solid #ddd;
    padding-top: 10px;
    margin-top: 22px;
}
/* Colores */
.naranja .t-shirt i{
    color: orange;
}
.azul .t-shirt i{
    color: blue;
}
.campoVoley {
    display: flex;
    position: relative;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .16);
    border: 2px solid white;
    margin-top: 0;
    max-width: 470px;
    margin-left: auto;
    margin-right: auto;
    min-height: 198px;
}
.campoVoley:after {
    content: '';
    position: absolute;
    background-color: white;
    width: 2px;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
}
.tipo-voleibol {
    background-color: #C6A16A;
    background-image: url(/Resources/images/bg-parquet.svg);
}
.tipo-mini-voley {
    background-color: #C6A16A;
    background-image: url(/Resources/images/bg-parquet.svg);
}
.tipo-playa {
    background-color: #C6A16A;
    background: linear-gradient(to right bottom, #f5b07c, #f1c592, #eed8ae, #eed8ae, #eed8ae);
}
    .tipo-playa:before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        background-image: url(/Resources/images/bg-arena.png);
        background-repeat: repeat;
        opacity: 1;
        mix-blend-mode: multiply;
    }

    .tipo-playa:after {
        content: '';
        position: absolute;
        background-color: white;
        width: 2px;
        height: 100%;
        left: 0;
        right: 0;
        margin: auto;
    }
    .campoVoley.tipo-mini-voley .jugadores > .team-member:first-child{
        width: 100%;
    }
.balonSaque {
    position: absolute;
    color: white;
    font-size: 17px;
}
.sacaIzquierda .balonSaque{
    left: 10px;
    bottom: 10px;
}
.sacaDerecha .balonSaque {
    right: 10px;
    bottom: 10px;
}
.campoVoley > div {
    width: 50%;
}
    .campoVoley > div > div {
        padding: 20px;
        height: 100%;
    }
    .jugadores{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
        .jugadores > div {
            width: 50%;
            justify-content: center;
        }
        .jugadores > div > div {
            margin: 7px;
        }

.tipo-mini-voley .jugadores {
    height: 100%;
}
        .tipo-mini-voley .jugadores > div {
            align-items: center;
        }

.tipo-playa .jugadores {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    align-items: center;
}

.boxSet .cabecera-set {
    padding: 6px 15px;
    border-bottom: 1px solid #ddd;
    background-color: #f2f2f2;
}
.cabecera-set h3 {
    margin: 0;
    color: #111;
}
.body-set {
    padding: 15px;
    background-color: #fbfbfb;
}
.boxSet + .boxSet{
    margin-top: 15px;
}
.firmas{
    margin-top: 15px;
}
.firmas .fila{
    display: flex;
    margin-top: 10px;
}
.firmas .fila .nombre{
    margin-right: 15px;
    font-weight: bold;
}

blockquote {
    font-style: italic;
    color: #555555;
    padding: 16px 16px 16px 51px;
    border-left: 4px solid #c42927;
    position: relative;
    background: #f5f5f5;
    margin-top: 12px;
}

    blockquote::before {
        content: "\201C";
        color: #c42927;
        font-size: 4em;
        position: absolute;
        left: 10px;
        top: 1px;
    }

    blockquote::after {
        content: '';
    }

    blockquote span {
        display: block;
        color: #333333;
        font-style: normal;
        font-weight: bold;
        margin-top: 1em;
    }

.gridDeficiencias .tarjeta {
    background-color: #f8d7da61;
    padding: 15px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
}
.gridDeficiencias .tarjeta p {
    font-weight: bold;
}
    .gridDeficiencias .tarjeta .comentario {
        margin-top:4px;
    }
.gridDeficiencias .tarjeta + .tarjeta {
    margin-top: 8px;
}

.grupodeFirmas{
    display: flex;
    margin: -12px;
}
.grupodeFirmas > div{
    width: 33.3333%;
}
.grupodeFirmas > div > div{
    margin: 12px;
}
    .grupodeFirmas .item {
        border-left: 2px solid #c42927;
        padding: 5px 10px;
        font-size: 13px;
    }
    .grupodeFirmas .item .nombre{
        font-weight: bold;
    }
.grupodeFirmas h4{
    margin-bottom: 10px;
}
    .grupodeFirmas .sinfirma {
        font-style: italic;
        color: #888;
   }
.estructuraLocalVisitante {
    max-width: 520px;
    margin: 0 auto;
}
.estructuraLocalVisitante .flex {
    display: flex;
    justify-content:center;
    align-items: stretch;
    margin-top: 10px;
}
    .estructuraLocalVisitante .flex .item + .item{
        margin-top: 6px;
    }
    .estructuraLocalVisitante .flex .nombre {
        font-weight: 600;
    }
    .estructuraLocalVisitante .grupodedatos + .grupodedatos {
        margin-top: 15px;
    }
.estructuraLocalVisitante h2{
    font-size: 15px;
    text-align: center;
}
    .estructuraLocalVisitante .separador {
        width: 1px;
        margin: 0 15px;
        background-color: #ddd;
        flex-grow: 1;
    }
    .estructuraLocalVisitante .grupodedatos .flex > div:not(.separador) {
        width: 49%;
    }

#grupoAlineaciones > div + div{
    margin-top: 20px;
}
.marcadorEnSets {
    margin-bottom: 20px;
    font-weight: normal;
    display: flex;
    border-bottom: 1px solid #c42927;
    padding-bottom: 20px;
}

.marcadorEnSets .equipo {
    display: flex;
}
    .marcadorEnSets .nombre {
        margin-right: 20px;
        padding: 2px 3px;
    }
    .marcadorEnSets .equipo > div {
        padding: 2px 3px;
    }

    .marcadorEnSets .ganador {
        font-weight: bold;
    }

    .marcadorEnSets .total {
        margin-right: 15px;
        min-width: 24px;
        border-right: 1px solid #ddd;
    }

    .marcadorEnSets .equipo > div:not(:first-child) {
        min-width: 28.5px;
        text-align: right;
    }

    .marcadorEnSets .equipo + .equipo {
       
    }

.container-campo-voley {
    position: relative;
    margin-top: 15px;
    max-width: 470px;
    margin-left: auto;
    margin-right: auto;
}
.container-campo-voley .liberos{
   display: flex;
   margin-top: 15px;
}
    .container-campo-voley .liberos > div {
        width: 50%;
        text-align: center;
    }
    .container-campo-voley .liberos .team-member {
        justify-content: center;
    }

.liberos-locales .flex, .liberos-visitantes .flex {
    display: flex;
    justify-content: center;
}
    .liberos-locales .flex > div, .liberos-visitantes .flex > div {
        margin-left: 10px;
        margin-right: 10px;
    }

/* ===== Responsive (móvil / iframe estrecho) ===== */
@media (max-width: 767px) {
    .gridResumen {
        max-width: 100%;
    }

    .cabecera {
        padding: 15px 10px;
        display: flex;
        flex-direction: column-reverse;
    }

    /* El badge de estado deja de ir en absolute para no solaparse con los escudos */
        .cabecera .parteTop {
            position: static;
            justify-content: center;
            margin-bottom: 0;
        }

    .escudos .item {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        padding: 0 5px;
    }
        .escudos .item .nombre {
            font-size: 13px;
            overflow-wrap: anywhere;
        }

    .marcador {
        width: auto;
        min-width: 70px;
        font-size: 20px;
    }

    /* Las pestañas no caben en una línea: scroll horizontal */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
        .tabs > div {
            flex: 0 0 auto;
        }
        .tabs button {
            padding: 8px 14px;
            white-space: nowrap;
        }

    .grupo {
        padding: 15px 10px;
    }

    .body-set {
        padding: 10px;
    }

    /* Filas etiqueta / valor en columna */
    .tablaJustificada .fila {
        flex-direction: column;
        margin-bottom: 8px;
    }
    .fila .izda {
        min-width: 0;
    }

    /* Local / visitante apilados */
    .row {
        flex-direction: column;
    }
    .col-md-6 {
        width: 100%;
    }
        .col-md-6 + .col-md-6 {
            margin-top: 20px;
        }

    /* Marcador por sets: permitir scroll en vez de desbordar */
    .marcadorEnSets {
        overflow-x: auto;
        font-size: 13px;
    }
        .marcadorEnSets .nombre {
            margin-right: 8px;
        }
        .marcadorEnSets .total {
            margin-right: 8px;
        }

    /* Campo de juego */
    .campoVoley {
        min-height: 170px;
    }
        .campoVoley > div > div {
            padding: 8px 4px;
        }
    .jugadores > div > div {
        margin: 3px;
    }
    .t-shirt i {
        font-size: 30px;
        min-width: 38px;
    }
    .t-shirt .dorsal {
        top: 5px;
        font-size: 12px;
    }

    /* Firmas apiladas */
    .grupodeFirmas {
        flex-direction: column;
        margin: 0;
    }
        .grupodeFirmas > div {
            width: 100%;
        }
        .grupodeFirmas > div > div {
            margin: 8px 0;
        }

    .estructuraLocalVisitante .separador {
        margin: 0 8px;
    }
}