/* CONFIGURACIÓN PARA DISPOSITIVOS INFERIORES A 620 PX DE ANCHO */
@media (max-width: 600px) {

    #formulario-login,
    #formulario-registro {
        width: 80% !important;
    }

    h1 {
        font-size: 20px !important;
    }

    legend {
        display: none;
    }

    .detalle-item {
        flex-direction: column;
        margin-bottom: 0px !important;
        gap: 0px;

    }

    .ficha-detalles {
        height: 80vh !important;
    }

    .detalle-notificaciones {
        width: 80% !important;

    }

    .ficha-usuario-inscrito {
        width: 80%;
    }

    .ficha-usuario {
        width: 80% !important;
        height: 20vh !important;
    }
}

@media (max-width: 820px) {

    /* Estilos responsive para index.html */
    .logo img {
        width: 80px !important;
    }

    h1 {
        font-size: 18px !important;
    }

    #formulario-login,
    #formulario-registro {
        width: 70% !important;
    }

    .intro p {
        display: none;
    }

    .carrusel-noticias {
        align-content: center;
    }

    .noticia-articulo.activo {
        width: 80% !important;
    }


    .features {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .features p {
        display: none;
    }

    /* Estilos responsive para private.html */
    body {
        width: 100%;
    }

    .logotipo,
    .usuario {
        margin: 0;
    }

    #mensaje-bienvenida {
        display: none;
    }

    #ficha-partido {
        display: flex !important;
        flex-direction: column;
    }

    .partido-nivel {
        display: none !important;
    }

    .partido-estrellas {
        position: relative;
    }

    .ficha-detalles {
        width: 90vw;
        height: 100%;
        max-height: fit-content;
    }

    .notificaciones {
        flex-direction: column;
    }

    .logotipo h3 {
        display: none;
    }

    header {
        padding: 10px;
    }

    /* Estilo responsive de la ventana emergente de informacion de privacidad */
    .informacion {
        padding: 10px !important;
        max-height: 90% !important;
        width: 70% !important;
    }

    .mis-partidos {
        grid-template-columns: 1fr !important;
    }

    .ficha-usuario {
        width: 70% !important;

    }

    .ficha-usuario-body p {
        display: flex;
        flex-direction: column;
        align-items: center !important;
        font-size: 16px;
    }
}

/* CONFIGURACIÓN PARA DISPOSITIVOS INFERIORES A 830 PX DE ANCHO */

@media (max-width: 1100px) {

    /* Estilos responsive para index.html */

    .div-botones-acceso {
        gap: 30px;
    }

    .botones-acceso {
        width: 160px;
        font-size: 16px;
        border-radius: 12px;
    }

    #formulario-login,
    #formulario-registro {
        width: 50%;
    }

    .login,
    .registro {
        padding: 50px 0;
        height: 100%;
    }


    #contenedor-pistas {
        display: flex;
        flex-direction: column;
    }

    #selector-ciudades {
        flex-direction: column;
    }

    .pista {
        width: 80vw;
        min-height: fit-content;
    }

    .pista a img {
        width: 60vw;
        height: 30vh;
    }

    /* Estilos responsive para private.html */

    .html {
        min-height: fit-content;

    }

    .contenido {
        height: 100%;
    }

    .ver-partidos {
        grid-template-columns: 1fr;
    }

    #ficha-partido p {
        padding: 0px 0px 0px 50px !important;
    }

    .ficha-usuario {
        height: 30vh !important;
        width: 60vw !important;
        gap: 0px;
    }

    #div-jugadores-inscritos {
        height: 80%;
    }

    .fichas-container {
        grid-template-columns: 1fr !important;
        place-items: center;
    }

    .ficha-usuario-inscrito {
        width: 70% !important;
    }

    .detalle-notificaciones {
        width: 60%;

    }
}

@media (max-width: 1300px) {

    /* Estilos responsive para private.html */

    #ficha-partido p {
        padding: 0;
    }

    #form-publicar {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    #form-publicar input[type="submit"],
    #form-publicar input[type="reset"] {
        width: 70%;
    }

    fieldset {
        max-width: 100%;
    }

    .mis-partidos {
        grid-template-columns: 1fr 1fr;
    }

    body {
        width: 100%;
    }

    .listados-admin {
        display: flex;
        flex-direction: column;
    }

    .ficha-usuario-header {
        display: flex;
        flex-direction: column;       
        justify-content: center;
    }


    .ficha-usuario-header * {
        text-align: center;
    }

    #contenedor-noticias {
        display: grid;
        place-items: center;
    }

    .noticia-articulo {
        display: none;
    }

    .noticia-articulo.activo {
        display: flex;
        flex-direction: column;
        width: 50%;
        align-self: center;

    }

    #formulario-login,
    #formulario-registro {
        width: 40%;
    }
}

@media (max-width: 1500px) {
    .ficha-usuario-fecha-span {
        align-self: center;
    }
}


@media (max-width: 1650px) {
    #contenedor-pistas {
        grid-template-columns: 1fr 1fr;
    }
    .ficha-usuario-inscrito *{
        display: flex;
        flex-direction: column;
        align-items: center !important;
        text-align: center;
        justify-content: center;
    }  

    .ficha-usuario-fecha-span {
        align-self: center;
    }

    .botones-ficha-usuario {
        text-align: center;
    }

}