.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #f8f9fa;
    padding: 10px 20px;
    display: flex;
    align-items: center;
}
.navbar .logo {
    width: 80px;
    margin-right: 20px;
}
.btn-custom {
    margin: 2px;
    padding: 20px 21px;
    font-size: 1.1rem;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-touch-callout: none;
}
.btn-numero {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-touch-callout: none;
}
.btn-numero:hover {
    background-color: #0d6efd;
    color: white;
}
/* Eliminar todos los efectos de estado focus/active */
.btn-numero:active, 
.btn-numero:focus,
.btn-custom:active,
.btn-custom:focus {
    background-color: transparent !important;
    color: #212529 !important;
    outline: none !important;
    box-shadow: none !important;
    border-color: #dee2e6 !important;
}
/* Específicamente para dispositivos táctiles */
@media (hover: none) {
    .btn-numero:focus,
    .btn-numero:active,
    .btn-custom:focus,
    .btn-custom:active {
        background-color: transparent !important;
        color: #212529 !important;
    }
}
.d-grid {
    gap: 4px;
}
.col-4{
    padding-left: 4px;
    padding-right: 4px;
}
.container-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60px;
}
#resultado {
    width: 250px;
    margin-bottom: 20px;
}
.buttons-container {
    margin-top: 20px;
}
#mensaje-error {
    color: black;
    text-align: center;
    margin-bottom: 8px;
}
#acceder {
    transition: all 0.3s ease; /* Suaviza la transición */
    -webkit-tap-highlight-color: transparent;
}
#acceder:hover {
    background-color: #e0a800; /* Cambia el color de fondo */
    color: #fff; /* Cambia el color del texto */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Sombra sutil */
    transform: scale(1.05); /* Agranda ligeramente el botón */
}
#acceder:active,
#acceder:focus {
    background-color: #e0a800 !important;
    color: #fff !important;
    outline: none !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2) !important;
}
/* Centrado del contenido */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 95vh;
}
/* Logo */
.logo {
    margin-bottom: -190px; /* Reduce la distancia entre el logo y el input */
}
/* Ajustes adicionales para el input si es necesario */
input[type="text"] {
    margin-top: -100px; /* Espacio para que no quede tan pegado */
}
/* Eliminar highlight en dispositivos móviles para todos los elementos */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* Soporte para Firefox */
button::-moz-focus-inner {
    border: 0;
}