/* ######  ####### #       #######       #     #####                                                                                                 
 #     # #       #       #     #       #    #     # #    # ###### #    # #####   ##      #####  ######  ####  #####  ######  ####  # #    #   ##   
 #     # #       #       #     #       #    #       #    # #      ##   #   #    #  #     #    # #      #    # #    # #      #      # #    #  #  #  
 ######  #####   #       #     #       #    #       #    # #####  # #  #   #   #    #    #    # #####  #      #    # #####   ####  # #    # #    # 
 #   #   #       #       #     # #     #    #       #    # #      #  # #   #   ######    #####  #      #  ### #####  #           # # #    # ###### 
 #    #  #       #       #     # #     #    #     # #    # #      #   ##   #   #    #    #   #  #      #    # #   #  #      #    # #  #  #  #    # 
 #     # ####### ####### #######  #####      #####   ####  ###### #    #   #   #    #    #    # ######  ####  #    # ######  ####  #   ##   #    #                                                                                                                                               
 */

/* Estilos generales */

.body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.contenedor-cuenta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 30vh;
    padding-top: 1vh;
    gap: 2vh;
    margin-bottom: 50px;
}

#cuenta-regresiva {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    gap: 5px;
    width: 100%;
}

/* Título */
h1 {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    text-align: center;
}


/* Separador de reloj digital */
.separador {
    font-size: 3rem;
    font-weight: bold;
    color: #001489;
    align-self: center;
    margin: 0 5px;
}

/* Estilo de cada tarjeta de tiempo */
.item-tiempo {
    width: 120px;
    height: 140px;
    position: relative;
    font-size: 2rem;
    font-weight: bold;
    perspective: 400px;
    margin-bottom: 20px;
}

/* Estilo de la libreta */
.hoja-libreta {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    background: white;
    border: 2px solid #bbb;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform-style: preserve-3d;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(white 98%, #d3d3d3 100%);
    min-height: 100px;
}

/* Línea azul en la parte superior */
.hoja-libreta::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: 25px;
    background: #001489;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Corrección del salto al voltear */
.numero {
    font-family: Arial, sans-serif;
    font-size: 3rem;
    font-weight: bold;
    color: #001489;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60px;
}

/* Etiquetas de tiempo */
.etiqueta-tiempo {
    font-size: 1.2rem;
    margin-top: 10px;
    color: #333;
    text-align: center;
    font-weight: bold;
}

/* Animación de volteo optimizada */
@keyframes volteo {
    0% { transform: rotateX(0); }
    40% { transform: rotateX(-90deg); opacity: 0.5; }
    50% { transform: rotateX(-90deg); opacity: 0; }
    51% { transform: rotateX(90deg); opacity: 0; }
    100% { transform: rotateX(0); opacity: 1; }
}

/* ########  ########  ######  ########   #######  ##    ##  ######  #### ##     ## #### ########     ###    ########     
##     ## ##       ##    ## ##     ## ##     ## ###   ## ##    ##  ##  ##     ##  ##  ##     ##   ## ##   ##     ##    
##     ## ##       ##       ##     ## ##     ## ####  ## ##        ##  ##     ##  ##  ##     ##  ##   ##  ##     ##    
########  ######    ######  ########  ##     ## ## ## ##  ######   ##  ##     ##  ##  ##     ## ##     ## ##     ##    
##   ##   ##             ## ##        ##     ## ##  ####       ##  ##   ##   ##   ##  ##     ## ######### ##     ##    
##    ##  ##       ##    ## ##        ##     ## ##   ### ##    ##  ##    ## ##    ##  ##     ## ##     ## ##     ##    
##     ## ########  ######  ##         #######  ##    ##  ######  ####    ###    #### ########  ##     ## ########     
*/
.animar {
    animation: volteo 0.8s ease-in-out forwards; /* Aumentado el tiempo de animación para mayor fluidez */
}
/* Media Queries para responsividad */
@media (max-width: 768px) {
    .item-tiempo {
        width: 100px;
        height: 120px;
        font-size: 1.8rem;
    }
    .numero {
        font-size: 2.5rem;
        min-height: 50px;
    }
}

@media (max-width: 480px) {
    .item-tiempo {
        width: 70px; /* Reducido de 90px a 70px */
        height: 90px; /* Reducido de 110px a 90px */
        font-size: 1.4rem;
    }
    .numero {
        font-size: 1.8rem; /* Reducido para evitar que se amontone */
        min-height: 40px;
    }
    .etiqueta-tiempo {
        font-size: 1rem; /* Ajustado para mejorar la legibilidad */
    }
}