/* Inicio del CSS */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --color-bg1: #06202B;
    --color-bg2: #061922;

    --color-bg4: #222831; /* Sin usar */
    --color-bg3: #077A7D; /* Sin usar */

    --color-border: #010507;
    --color-label: #5de1ff;
    --color-legend: #00bfff;
    --color-button: #007BFF;
    --color-bgButtonHoverBlue: #c9f5ff;
    --color-bgButtonHoverRed: #ffcdc9;

    /* Tamaño texto */
    --font-size-label: clamp(0.8rem, 0.8rem + 1vw, 1.1rem);
    --font-size-legend: clamp(1.2rem, 1.2rem + 1vw, 1.8rem);
    --font-size-legend: clamp(1.2rem, 1.2rem + 1vw, 1.8rem);
    --font-size-button: clamp(0.8rem, 0.8rem + 1vw, 1.2rem);
    --font-size-a: clamp(1.0rem, 1.0rem + 1vw, 1.4rem);
    --font-size-h1: clamp(1.2rem, 1.2rem + 1vw, 2.4rem);
    --font-size-h2: clamp(1.1rem, 1.1rem + 1vw, 1.8rem);


    --font-size-idReserva: clamp(1.1rem, 1.1rem + 1vw, 1.3rem);

}
label{
    color: var(--color-label) !important;
    font-size: var(--font-size-label) !important;
}
legend{
    color: var(--color-legend) !important;
    font-size: var(--font-size-legend) !important;
}
.numBici{
    color: var(--color-legend) !important;
    font-size: var(--font-size-legend) !important;
    padding: 10px 30px;
}


/* COLORS:    #222831  |  #393E46  |  #00ADB5  |  #00FFF5    */
body{
    background-color: var(--color-bg1);
    font-family: Verdana, Geneva, Tahoma, sans-serif, Helvetica, sans-serif;
}

/* -------------- TITULO --------------- */
#titulo{
    border-bottom: 2px solid var(--color-border);
    padding: 30px 30px 10px 30px;
}

/* Por defecto se muestran en línea */
#img-titulo{
    display: inline-block;
    vertical-align: middle;
}
#txt-titulo{
    display: inline-block;
    font-style: italic;
    font-size: var(--font-size-h1);
    color: var(--color-label);
    vertical-align: middle;
    margin: 20px;
}
#img-titulo img{
    width: 15vw;
    max-width: 180px;
    min-width: 110px;
    border-radius: 15px;
}


#cerrar_sesion {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    cursor: pointer;
}


/* ----------- MENU ---------------- */
#menu{
    margin: 30px auto;
    margin-bottom: 70px;
    text-align: center;
}

#menu ul {
    list-style-type: none;
}

#menu ul li{
    display: inline-block;
    margin: 0 20px;
    padding: 14px;
    border: 2px solid var(--color-border);
    border-radius: 5px;
    background-color: var(--color-bg2);
}

#menu ul li a{
    text-decoration: none;
    font-weight: bold;
    font-size: var(--font-size-a);
    color: var(--color-legend);
    transition: all 300ms;
}
#menu ul li a:hover{
    color: var(--color-bgButtonHoverBlue);
}

.contenido{
    display: grid;
    min-height: 100dvh;
    grid-template-rows: auto 1fr auto;
}

/* ============= RESPONSIVE ============= */
@media (max-width: 905px) {
    /* Título se centra y se muestran en bloque */
    #titulo{
        text-align: center;
        padding: 20px;
    }
    #img-titulo,
    #txt-titulo{
        display: block;
        margin: 0 auto;
    }
    
    
    /* Menú: convertir li a bloque para que se muestren en vertical */
    #menu{
        margin: 20px auto;
    }
    #menu ul li{
        display: block;
        margin: 10px auto;
        padding: 12px;
        width: 80%;       /* Se adapta a casi todo el ancho */
        max-width: 250px; /* Máximo para controlar el tamaño en pantallas grandes */
    }
    #menu ul li a{
        display: block;
        padding: 10px 0;  /* Aumenta el área táctil */
    }
    #cerrar_sesion {
        width: 40px;
    }
}