/* Estilos generales para centrar todo en la pantalla */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #0f172a; /* Fondo oscuro muy moderno */
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

/* Caja principal que encierra el cronómetro */
.cronometro-contenedor {
    background-color: #1e293b; /* Color de tarjeta un poco más claro que el fondo */
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    text-align: center;
    width: 380px;
}

/* Diseño de los números del tiempo */
.pantalla-tiempo {
    font-size: 3.5rem;
    font-weight: bold;
    font-family: monospace; /* Fuente fija para que los números no bailen al cambiar */
    background-color: #020617;
    padding: 15px;
    border-radius: 10px;
    margin: 20px 0;
    color: #38bdf8; /* Azul brillante brillante */
    letter-spacing: 2px;
}

/* Caja de los botones */
.botones-control {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Organiza los botones en 2 columnas */
    gap: 10px;
    margin-bottom: 20px;
}

/* Estilo base para todos los botones */
.btn {
    padding: 12px;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

/* Efecto al presionar cualquier botón */
.btn:active {
    transform: scale(0.95);
}

/* Colores específicos para cada acción */
.btn-iniciar { background-color: #22c55e; color: white; } /* Verde */
.btn-pausar { background-color: #eab308; color: white; }   /* Amarillo */
.btn-registrar { background-color: #3b82f6; color: white; }/* Azul */
.btn-reiniciar { background-color: #ef4444; color: white; }/* Rojo */

/* Contenedor de la lista de tiempos grabados */
.registro-vueltas {
    max-height: 150px;
    overflow-y: auto; /* Si hay muchos tiempos, aparece barra de desplazamiento */
    background-color: #0f172a;
    border-radius: 8px;
    padding: 10px;
    text-align: left;
}

.registro-vueltas h3 {
    margin-top: 0;
    font-size: 0.9rem;
    color: #94a3b8;
    border-bottom: 1px solid #334155;
    padding-bottom: 5px;
}

/* Estilo para cada fila de tiempo registrado */
#lista-vueltas {
    list-style: none;
    padding: 0;
    margin: 0;
}

#lista-vueltas li {
    padding: 6px 10px;
    border-bottom: 1px solid #1e293b;
    font-family: monospace;
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
}