/* Importar la fuente ClockIcons */
@import url('https://db.onlinewebfonts.com/c/84cb021d5f9af287ffff84b61beef6dc?family=clockicons');

/* Importar la fuente Raleway desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

/* Definición de la fuente ClockIcons */
@font-face {
    font-family: "ClockIcons";
    src: url('clockicons.eot');
    src: url('clockicons.eot?#iefix') format('embedded-opentype'),
         url('clockicons.woff2') format('woff2'),
         url('clockicons.woff') format('woff'),
         url('clockicons.ttf') format('truetype'),
         url('clockicons.svg#clockicons') format('svg');
}

/* Estilos generales del cronómetro */
#cronometro {
    font-family: "ClockIcons";
    text-align: center;
}

/* Estilo del display del cronómetro */
#display {
    font-size: 6em;
    display: flex;
    justify-content: center;
}

/* Estilo para las centésimas dentro de un span */
span#centesimas {
    font-size: 50%;  /* Ajustamos el tamaño a la mitad */
    vertical-align: baseline;  /* Alineación al fondo */
}

/* Estilos para la tabla de vueltas */
#tabla_vueltas {
    width: 80% !important;
    margin: auto;
    font-size: 1.1em;
}

/* Estilos para las celdas y encabezados de la tabla */
th, td {
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

/* ... (El resto del código CSS permanece igual) */

/* Estilos para la fila de nombre */
.nombre_fila {
    height: calc(2 / 3 * 100%); /* 2/3 del alto regular de las otras filas */
}

/* Estilos para el campo de entrada del nombre */
.nombre_input {
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    background-color: transparent;
    font-size: 1em;
}


/* Estilo para la tipografía de la cabecera de la tabla */
th {
    font-family: "Raleway", sans-serif;
}

/* Media queries para dispositivos móviles */
@media only screen and (max-width: 768px) {
    #tabla_vueltas {
        width: 80% !important;
    }
}