@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Regular.woff2') format('woff2'),
         url('fonts/Lato-Regular.woff') format('woff'),
         url('fonts/Lato-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Bold.woff2') format('woff2'),
         url('fonts/Lato-Bold.woff') format('woff'),
         url('fonts/Lato-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

body {
    background-color: #e7e6e6; /* Color de fondo para toda la página */
    font-family: 'Lato', sans-serif; /* Aplicar la tipografía Lato a todo el documento */
}

.formulario {
    padding: 20px;
}

.form-control {
    background-color: #ffffff; /* Color blanco para las entradas */
    border: 1px solid #ced4da; /* Borde de las entradas */
    border-radius: 25px; /* Bordes completamente redondeados */
}

.form-control:focus {
    border-color: #80bdff; /* Color del borde al enfocar */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Sombra al enfocar */
}

.btn-primary {
    background-color: #e00342; /* Color del botón */
    border-color: #e00342; /* Borde del botón */
}

.btn-primary:hover {
    background-color: #c00236; /* Color del botón al pasar el mouse */
    border-color: #c00236; /* Borde del botón al pasar el mouse */
}

.Clas_1, .Clase_2 {
    padding: 10px 20px; /* Espaciado interno */
    font-size: 16px; /* Tamaño de fuente */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar el mouse */
    transition: background-color 0.3s, transform 0.2s; /* Transiciones suaves */
}

.Clas_1 {
    background-color: #28a745; /* Color verde para el botón "Grabar" */
    color:#28a745; /* Color del texto */
}

.Clas_1:hover {
    background-color: #218838; /* Color más oscuro al pasar el mouse */
    transform: scale(1.05); /* Efecto de aumento al pasar el mouse */
}

.Clase_2 {
    background-color: #dc3545; /* Color rojo para el botón "Detener" */
    color: white; /* Color del texto */
    opacity: 0.6; /* Opacidad para el botón deshabilitado */
}

.Clase_2:disabled {
    cursor: not-allowed; /* Cambia el cursor para indicar que está deshabilitado */
}

.Clase_2:hover {
    background-color: #c82333; /* Color más oscuro al pasar el mouse */
    transform: scale(1.05); /* Efecto de aumento al pasar el mouse */
    opacity: 0.6; /* Mantiene la opacidad para el botón deshabilitado */
}