.restaurant-layout {
    border-collapse: separate; /* Cambiar a 'separate' para que funcione border-spacing */
    border-spacing: 10px; /* Añadir margen entre las celdas */
}

.restaurant-layout td {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

.fila {
    width: 100%;
}

.mesa {
    background-color: white;
    background-image:url(../img/mesa.png);
    background-repeat:no-repeat;
    background-size:100%;
    text-align: center; /* Centra contenido de texto, si hay alguno */
    vertical-align: middle; /* Centra contenido de texto verticalmente, si hay alguno */
    background-position: center center; /* Centra la imagen de fondo */
}

.mesa-grande {
    background-color: white;
    height: 200px;
    background-image:url(../img/mesa-grande.png);
    background-repeat:no-repeat;
    background-size:100%;
    height: 100vh;
    text-align: center; /* Centra contenido de texto, si hay alguno */
    vertical-align: middle; /* Centra contenido de texto verticalmente, si hay alguno */
    background-position: center center; /* Centra la imagen de fondo */
}

.cocina-mostrador {
    background-color: rgb(203, 203, 203);
    color: black;
}

.ocupado {
    background-color: rgb(203, 203, 203);
    color: black;
}

.selected {
    background-color: yellow;
}

.overlay-reserva {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7); /* Fondo negro con opacidad */
    color: white; /* Color del texto */
    padding: 20px; /* Espaciado interno */
    border-radius: 10px; /* Bordes redondeados */
    z-index: 1; /* Asegura que el overlay esté por encima de la tabla */
}

.restaurant-layout {
    position: relative; /* Necesario para que el overlay se posicione correctamente */
    z-index: 0; /* Asegura que la tabla esté por debajo del overlay */
}

.past-day {
    background-color: #e0e0e0; /* Color de fondo gris */
    color: #a0a0a0; /* Color de texto gris */
    pointer-events: none; /* Opcional: desactiva interacciones */
  }