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

img {
    pointer-events: none;
	user-drag: none; 
	  user-select: none;
	  -moz-user-select: none;
	  -webkit-user-drag: none;
	  -webkit-user-select: none;
	  -ms-user-select: none;
}

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 16px; /* Tamaño de fuente adecuado para móviles */
    background-color: #f5f5f5; /* Color de fondo más claro para mejor contraste */
    background-image: url("https://fotos.eject-computer.com/san_pankracio/fondo.jpeg");
	background-size: cover !important;
	font-family: 'Roboto', sans-serif;
}


nav.navContainer {
	background-color: #FFF !important;
	width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background-color: #333;

}

nav.navContainer {
    max-height: 80%;
    width: auto;
}

main.container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: rgba(242, 242, 242, 0.85) !important;
}

.articuloCentral {
    background: none;
    color: #333; /* Color del texto más oscuro para mejor legibilidad */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: none;
    width: 100%;
    max-width: 600px; /* Limitar el ancho máximo del artículo */
    padding: 1rem; /* Añadir padding para mejor apariencia en móviles */
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Espaciado entre los botones */
}

button {
    border-radius: 8px;
    background-color: black;
    font-size: 1rem; /* Tamaño de fuente adecuado para botones en móviles */
    font-weight: 400;
    padding: 12px 20px; /* Ajustado para mejor tacto en móviles */
    border-width: 2px;
    height: auto; /* Ajuste automático para mejor tacto */
    width: 100%; /* Botones ocupan el 100% del ancho del contenedor */
    max-width: 300px; /* Ancho máximo para los botones */
    margin: 10px 0; /* Espaciado entre los botones en la dirección vertical */
    color: #FFF;
    text-decoration: none;
    border: none;
    transition: background-color 0.3s ease; /* Transición suave para el cambio de color */
}

.labelLocal {
    font-weight: bold;
    text-align: left; /* Asegura que el texto del label esté alineado a la izquierda */
    width: 100%;
    max-width: 300px; /* Alineación con el select */
    margin: 5px 0; /* Espaciado para el label */
}

.selectLocal {
    font-size: 1rem; /* Tamaño de fuente adecuado para botones en móviles */
    font-weight: 400;
    padding: 12px 20px; /* Ajustado para mejor tacto en móviles */
    height: auto; /* Ajuste automático para mejor tacto */
    width: 100%; /* Botones ocupan el 100% del ancho del contenedor */
    max-width: 300px; /* Ancho máximo para los botones */
    margin: 10px 0; /* Espaciado entre los botones en la dirección vertical */
    text-decoration: none;
    left: 0;
    border: 1px solid #ccc; /* Borde alrededor del select */
    border-radius: 4px; /* Bordes redondeados */
    background-color: #fff; /* Fondo blanco para mejor contraste */
    transition: border-color 0.3s ease; /* Transición suave para el cambio de color del borde */
}

select {
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    max-width: 300px; /* Ancho máximo para dispositivos más grandes */
    background-color: #fff;
    transition: border-color 0.3s ease; /* Transición suave para el cambio de color del borde */
}

select:focus {
    border-color: #333; /* Cambiar el color del borde al enfocar */
    outline: none; /* Quitar el borde de enfoque predeterminado */
}

.noTablesMessage {
    color: #ab0005;
    display: none;
}

.allOccupiedMessage{
    font-weight: bold;
    color: black;
}

#locales-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.local-select-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 10px;
}

.btnSentarse {
    margin: 20px auto; /* Centrar el botón horizontalmente y agregar margen vertical */
    display: block; /* Asegurar que el botón sea un elemento de bloque para centrar correctamente */
}

.btn{
	width: 100% !important;
}

.h1SeleccionarMesa {
	text-align: center;
	margin: 0;
	margin-bottom: 3%;
}

/* Estilos específicos para dispositivos móviles */
@media only screen and (max-width: 600px) {
    html, body {
        font-size: 18px; /* Incrementar el tamaño de fuente */
    }
    button, .selectLocal, select {
        font-size: 1.2rem; /* Incrementar el tamaño de fuente */
        padding: 14px; /* Aumentar el padding */
    }

}