/*Creamos nuestras variables como base para color y textos*/
:root {
    --azul-oscuro: #13233c;
    --azul-medio: #214f82;
    --verde: #c9f6b0;
    --negro: #232b2e;
    --blanco: #fff;
    --fondos: #f1eee9;
    --degradado-oscuro: linear-gradient(90deg, #13233c 0%, #214f82 100%);
    --degradado-claro: linear-gradient(-90deg, #214f82 0%, #c9f6b0 100%);

    --texto: 'Quicksand', sans-serif !important;
}

/*importamos nuestra tipografía*/
@font-face {
  font-family: 'Quicksand';
  src: url(/fonts/Quicksand-VariableFont_wght.ttf);
}

/*Añadimos estilos generales para que se aplique nuestra tipografía a todo el cuerpo y un padding general a los contenedores*/
body {
    font-family: var(--texto) !important;        
}

main .container {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* BOTONES */
.btn-primary {
    padding: 12px 20px;
    background: var(--degradado-oscuro);
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 600;
    font-size: 15px;
    color: var(--blanco);
    border-radius: 0;
    z-index: 1;
    position: relative;
    cursor: pointer;
    border: none;
}
/*creamos un after para tener un efecto al hacer hover en los botones*/
.btn-primary:after {
    content: "";
    background: var(--azul-medio);
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    transition: all 0.4s ease;
    z-index: -1;
}
/*al pasar por encima del botón, el after tendrá el ancho completo y así aparecerá horizontalmente*/
.btn-primary:hover:after {
    width: 100%;
}

/*mismo botón pero en línea para que no queden tan recargadas las tablas*/
.btn-secondary {
    padding: 12px 20px;
    background: transparent;
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 600;
    font-size: 15px;
    color: var(--azul-medio);
    border-radius: 0;
    z-index: 1;
    position: relative;
    cursor: pointer;
    border: 2px solid var(--azul-medio);
}

.btn-secondary:after {
    content: "";
    background: var(--degradado-oscuro);
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    transition: all 0.4s ease;
    z-index: -1;
}

.btn-secondary:hover:after {
    width: 100%;
}

/* titulares*/
h1 {
    font-size: 40px;
    font-weight: 500;
    color: var(--azul-oscuro);
    padding-bottom: 20px;
    position: relative;
}
/* añadimos un after al H1 para que tenga una decoración debajo*/
h1:after {
    content: "";
    background: var(--degradado-claro);
    width: 50%;
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
}

h2 {
    font-size: 30px;
    font-weight: 500;
    color: var(--azul-medio);
    margin-top: 40px;
    padding-bottom: 10px;
    position: relative;
    width: max-content;
}
/*otra decoración para el H2*/
h2:after {
    content: "";
    background: var(--degradado-claro);
    width: 100%;
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* HEADER */
/*tamaño del logo y margen a la derecha*/
.logo-header {
    max-width: 150px;
    margin-right: 40px;
}

/*logo para móvil (simplificado), está en display none para hacerlo aparecer solo en versión móvil*/
.logo-header-mv {
    display: none;
}

/*estilos del menú*/
#navbarSupportedContent>.navbar-nav>.nav-item>.nav-link {
    color: var(--negro);
    transition: all 0.3s ease;
}

#navbarSupportedContent>.navbar-nav>.nav-item {
    position: relative;
    padding:10px;
    margin: 0 10px;
}

#navbarSupportedContent>.navbar-nav>.nav-item>.nav-link:hover {
    color: var(--azul-medio);
}

#navbarSupportedContent>.navbar-nav>.nav-item>.nav-link:after {
    content: "";
    background-color: var(--azul-medio);
    width: 0;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all 0.3s ease;
}

#navbarSupportedContent>.navbar-nav>.nav-item>.nav-link:hover:after  {
    width: 100%;
}

/*estilos del desplegable de usuario*/
#navbarDropdown {
    text-decoration: none;
    color: var(--azul-oscuro);
}

/*tamaño y color del icono de usuario que hemos añadido en app.blade*/
#navbarDropdown .icono-user {
    fill: var(--azul-oscuro);
    max-width: 20px;
}

#navbarDropdown:hover {
    color: var(--azul-medio);
}

#navbarDropdown:hover .icono-user {
    fill: var(--azul-medio);
}

/*footer*/
/*Con flex podemos controlar la dirección y tamaños según los dispositivos*/
.footer {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    padding: 20px;
    background: var(--fondos);
}

/*Enlaces del footer*/
.footer a {
    color: var(--azul-oscuro);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer a:hover {
    color: var(--azul-medio);
}

/*Columnas del footer*/
.footer-col {
    display: flex;
    flex-direction: column;
    width: 33%;
    align-items: center;
}

/*Tamaño del logo del footer*/
.footer .logo-footer {
    max-width: 200px;
}

/*Estilos de los iconos de redes sociales*/
.footer-col .redes-footer {
    display: flex; 
    flex-direction: row;
    justify-content: flex-start;
}

.redes-footer svg {
    max-width: 26px;
    fill: var(--azul-oscuro);
    margin: 10px;
    transition: all 0.3s ease;
}

.redes-footer svg:hover {
    fill: var(--azul-medio);
}




/*ESTIOS POR PÁGINAS*/

/* HOME */
/*le damos la altura total de la pantalla y añadimos una imagen de fondo*/
.body-home {
    background: url('/images/padelicias.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
    position: relative;
    height: 100vh;
}

/*nuevo div dentro del cuerpo para añadir el efecto blur sobre le fondo (no compatible con algunos navegadores)*/
.caja-home {
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(3px);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
}

/*estilos del div del contenido. Le damos tamaño, fondo, padding...*/
.contenedor-home {
    background-color: var(--fondos);
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 65%;
    height: 65%;
    margin: auto;
}

/*estilos del logo*/
.contenedor-home .logo-home {
    max-width: 350px;
    margin-bottom: 40px;
}

/*contenedor de los botones*/
.home-login {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/*estilo de los botones de incio y registro (siguiendo el estilo de botones más arriba)*/
.home-login .btn-login, .home-login .btn-register {
    background: var(--degradado-oscuro);
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 600;
    font-size: 18px;
    color: var(--blanco);
    margin: 0 20px;
    z-index: 1;
    position: relative;
    border: none;
}

.home-login .btn-login:after, .home-login .btn-register:after {
    content: "";
    background: var(--azul-medio);
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    transition: all 0.4s ease;
    z-index: -1;
}

.home-login .btn-login:hover:after, .home-login .btn-register:hover:after {
    width: 100%;
}



/* LOGIN y REGISTRO (van juntos los estilos, ya que la base de la página es igual) */
/*div contenedor*/
.contenedor-login, .contenedor-register {
    display: flex;
    justify-content: center;
    width: 100%;
}
.contenedor-login .btn-login, .contenedor-register .btn-register {
    max-width: 150px;
}

/*botones*/
.btn-login, .btn-register {
    padding: 12px 20px;
    background: var(--degradado-oscuro);
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 600;
    font-size: 15px;
    color: var(--blanco);
    border-radius: 0;
    z-index: 1;
    position: relative;
    cursor: pointer;
    border: none;
}

.btn-login:after, .btn-register:after {
    content: "";
    background: var(--azul-medio);
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    transition: all 0.4s ease;
    z-index: -1;
}

.btn-login:hover:after, .btn-register:hover:after {
    width: 100%;
}   

.contenedor-login .btn-login, .contenedor-register .btn-register {
    margin: 10px 0;
}

/*estilo del enlace de recuperar contraseña*/
.link-password {
    color: var(--negro);
    padding: 10px 0;
    text-align: left;
    font-size: 13px;
}

.link-password:hover {
    color: var(--azul-medio);
}

/*contenedor del botón y link de recuperar contraseña*/
.flex-col {
    display: flex;
    flex-direction: column;
}

/*estilos del recaptcha (le bajamos el tamaño para que no salga del cuadro)*/
.g-recaptcha {
    transform: scale(0.8);
}

.col-recaptcha {
    padding: 0;
}

.col-recaptcha .btn-register {
    margin-left: 10px;
}


/*EStilos de todas las tablas*/
/*contenedor de la tabla, para que sea responsive (en ordenador será visible toda la tabla)*/
.contenedor-tabla {
    overflow-x: visible;
}

table tr, table td, table th {
    font-family: 'Quicksand', sans-serif !important;
}

.table-striped {
    margin-top: 40px;
}

/*alineamos verticalmente los TR*/
table tr {
    vertical-align: middle;
}

/*añadimos un padding general para los hijos dentro de los hijos de los elementos no caption, es decir los td y th dentro de los tr*/
.table > :not(caption) > * > * {
    padding: 10px;
}

/*añadimos un fondo al thead para diferenciarlo*/
.cab-tabla {
    background-color: var(--verde);
}



/*PISTAS*/
/*Añadimos margen superior al botón de añadir pista (el resto de estilos los coge por la clase de botón)*/
.new-pista {
    margin: 20px 0 0 0;
}

/*estilos de la paginación inferior*/
.paginacion>nav {
    display: flex;
    flex-direction: column; /*con esto lo centramos (porque está al mismo nivel que otros divs), ya que la posición horizontal de los números viene de otro div interno*/
    /* align-items: center; */
    text-align: center;
}

/*ahora quitamos la paginación de texto, ya que en el php no aparece para tener solo los numeros de páginas*/
.paginacion>nav>div:first-child,
.paginacion>nav>div:last-child>div:first-child {
    display: none;
}

.paginacion>nav>div:last-child {
    margin-top: 20px;
}

/*estilos de color para los números, fondos y hover*/
.paginacion>nav>div:last-child a {
    text-decoration: none;
    color: var(--azul-oscuro);
    transition: all 0.3s ease;
}

/*damos efecto deshabilitado a las páginas que no se pueden seleccionar*/
.paginacion>nav>div:last-child span>span,
.paginacion>nav>div:last-child span>span>span {
    background: linear-gradient(#f1eee9, #f1eee9); /*tenemos que usar un gradiente con un único color porque no coge el color solo*/
    color: #6a6a6a;
}

.paginacion>nav>div:last-child span>span>span>svg {
    fill: #6a6a6a;
}

.paginacion>nav>div:last-child a:hover {
    background: linear-gradient(#c9f6b0, #c9f6b0);
}

/*tamaño de las flechas*/
.paginacion svg {
    max-width: 35px;
}



/* PERFIL DE USUARIO */
/*contenedor de datos de usuario y los botones*/
.info-user {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    margin-top: 20px;
}

.datos-user, .botones-user {
    width: 50%;
}

.botones-user {
    display: flex;
    flex-direction: row;
}

.botones-user .btn-primary:first-child {
    margin-right: 40px;
}


/* DETALLES DE PISTA */
/*contenedor de datos de pista e imagen*/
.pista {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    margin-top: 20px;
}

.info-pista, .img-pista {
    width: 50%;
}

.img-pista {
    background: url(/images/pista-padel.jpg);
    background-position: center;
    background-size: cover;
    height: 200px;
}

.botones-pista {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
}

.botones-pista .btn-primary {
    margin-right: 40px;
}



/*RESPONSIVE*/
/*tablets medianas*/
@media screen and (max-width: 950px) {
    .botones-pista .btn-primary, .botones-user .btn-primary:first-child {
        margin-right: 20px; /*rebajamos un poco el margen para que se adapten mejor los botones*/
    }

    /*responsive de la tabla, para tener scroll horizontal*/
    .contenedor-tabla {
        overflow-x: auto;
    }
}

/*móvil*/
@media screen and (max-width: 768px) {
    #navbarSupportedContent {
        text-align: center;
    }

    .pista {
        flex-direction: column; /*los datos y la imagen pasan a estar verticalmente*/
        align-items: flex-start;
    }

    .info-pista, .img-pista {
        width: 100%; /*al estar en columna y no en fila, le damos el ancho completo*/
    }

    .img-pista {
        margin-top: 20px; /*al pasar a estar debajo de la info, le damos un margen superior*/
    }

    /*ocultamos el logo de ordenador*/
    .logo-header {
        display: none;
    }
    /*mostramos el logo de móvil*/
    .logo-header-mv {
        display: initial;
        max-width: 40px;
    }

    /*adaptamos el tamaño del cuadro de la página de inicio*/
    .contenedor-home {
        width: 90%;
        height: 40%;
        padding: 40px 20px;
        margin-top: 40px;
    }
    /*tamaño del logo de la página de incio en móvil*/
    .contenedor-home .logo-home {
        max-width: 200px;
    }

    /*como con la página de detalles de pista lo pasamos a columna*/
    .info-user {
        flex-direction: column;
        align-items: flex-start;
    }

    .datos-user, .botones-user {
        width: 100%;
    }

    .botones-user {
        margin-top: 20px;
    }

    /*columnas en vertical y las separamos un poco*/
    .footer {
        flex-direction: column;
    }

    .footer-col {
        width: 100%;
        margin: 20px 0;
    }
}