/* FUENTE */
@import url('https://fonts.googleapis.com/css2?family=Epunda+Sans:ital,wght@0,300..900;1,300..900&family=TASA+Orbiter:wght@400..800&display=swap');

/* GENERAL */
*{
    font-family: "TASA Orbiter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.body-registro,
.body-login {
    background-image: url('../img/fondo_1.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
}

.register-container,
.login-container {
    max-width: 500px;
    margin: 50px auto;
    padding: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-registro input,
.form-login input {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
}

.form-registro input::placeholder,
.form-login input::placeholder {
    color: gray;
}

@media (max-width: 480px) {
    .body-registro,
    .body-login {
        background-image: url('../img/fondo_2.jpg');
    }
}

.body-dashboard, .body-indexUsuarios, .body-editarUsuario, .body-canchas,
.body-agregarCancha, .body-editarCancha, .body-reservas, .body-ingresos,
.body-personalizacion{
    background-color: whitesmoke;
    display: grid;
    min-height: 100dvh;
    grid-template-rows: auto 1fr auto;
}

/*
.pagination .page-item.active .page-link {
  background-color: #28a745; 
  border-color: #28a745;   
}

.pagination .page-item.active .page-link {
  color: #ffffff; 
}
*/


/* INDEX.PHP */ 
.body-index {
    min-height: 100vh;
    background: url('../img/fondo_1.jpg') no-repeat center center fixed;
    background-size: cover;
    position: relative;
}

@media (max-width: 480px) {
    .body-index{
        background-image: url('../img/fondo_2.jpg');
    }
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Color negro con 60% de transparencia */
    z-index: 1;
}

.content {
    position: relative;
    z-index: 2;
}

.body-index h1 {
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px #757474;
}

.body-index .lead {
    color: #fff;
    text-shadow: 1px 1px 2px #000000;
}