/* Importar fuentes */
@import url("https://fonts.googleapis.com/css?family=Sacramento&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');

/* Estilos globales */
html,
body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: Open Sans;
    font-size: medium;
    color:black;
    background: rgb(253, 245, 230);
    
}
.container-fluid{
	color:black;
	
}
/* Cabecera */
.header {
	 background: rgb(253, 245, 230);
}

/* Navbar y Breadcrumb */
.navbar,
.breadcrumb {
    background-color: transparent;
    color: rgb(0, 0, 0);
}
.breadcrumb-item a {
    color: rgb(128, 64, 0);
    text-decoration: none;
}
.breadcrumb-item a:hover {
    text-decoration: underline;
}

/* Carousel */
.carousel-item img {
    width: 70%;            /* Ajusta el ancho al porcentaje que prefieras */
    max-width: 600px;      /* Ancho máximo para asegurar consistencia en pantallas grandes */
    height: 400px;         /* Altura fija para mantener consistencia */
    object-fit: cover;     /* Recorta la imagen para que se ajuste al tamaño sin distorsionarse */
    margin: 0 auto;        /* Centra horizontalmente la imagen */
    display: block;
}


/* Texto */
/* Aplica color negro a las celdas de encabezado y cuerpo de la tabla */
.table th, .table td {
    color: black;
}
.nota {
    color: rgb(0, 0, 0);
}
.text-center{
	color:black;
}

.text-responsive {
    color: rgb(0, 0, 0);
    font-size: 1.5rem;
}

/* Contenedor y alineación de logo */
.container-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Formulario */
.form-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 8px;
     background: rgb(253, 245, 230);
}

.form-container label {
    color: #000000;
}

.form-control {
     background: rgb(253, 245, 230);
    color: #000000;
    border: 2px solid #ddd;
	font-size: 22px;
}

.form-control:focus {
    background-color: bisque;
    border-color: rgb(128, 64, 64);
}

/* Botones */
.myButton,
.myButtonEstablecimientos,
.myButtonEliminar,
.myButtonEditar,
.myButtonInferiorEstablecimiento {
    margin-top: 3%;
	margin-bottom: 3%;
	margin:0;
    color: black;
    font-size: 18px;
    line-height: 16px;
    padding: 0.5rem 0.5rem;
    border-radius: 10px;
    font-family: Georgia, serif;
    font-weight: normal;
    text-decoration: none;
    background-image: linear-gradient(to right, rgb(251, 217, 183) 0%, rgb(205, 149, 117) 50%);
    box-shadow: rgb(0, 0, 0) 5px 5px 15px 5px;
    border: 2px solid rgb(255, 255, 255);
    display: inline-block;
}
.myButtonBuscarPlato{
	    color: black;
	    font-size: 18px;
	    line-height: 16px;
	    padding: 10px;
	    border-radius: 10px;
	    font-family: Georgia, serif;
	    font-weight: normal;
	    text-decoration: none;
	    background-image: linear-gradient(to right, rgb(251, 217, 183) 0%, rgb(205, 149, 117) 50%);
	    box-shadow: rgb(0, 0, 0) 5px 5px 15px 5px;
	    border: 2px solid rgb(255, 255, 255);
	    display: inline-block;
}

.myButton:hover,
.myButtonEstablecimientos:hover,
.myButtonEliminar:hover,
.myButtonEditar:hover {
    background: rgb(251, 217, 183);
}

.myButtonEliminar:hover {
    background: rgb(255, 0, 0);
    color: aliceblue;
}

.myButtonEditar:hover {
    background: rgb(255, 128, 0);
    color: aliceblue;
}

.myButtonEliminar:active,
.myButtonEditar:active {
    background: rgb(251, 217, 183);
}
/* Hacer el botón de hamburguesa visible solo en pantallas pequeñas */
.navbar-toggler {
    border: none;
    background-color: transparent;
    color: rgb(0, 0, 0);  /* Ajusta el color del icono */
    display: block;
}

.navbar-toggler-icon {
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none'%3E%3Cpath fill='%23ffffff' d='M5 7h20a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zM5 15h20a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1zM5 23h20a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Hacer que el botón de hamburguesa solo se muestre en pantallas pequeñas */
@media (max-width: 768px) {
    .navbar-toggler {
        display: block;  /* Asegúrate de que el botón de hamburguesa se muestre */
    }
    .navbar-collapse {
        display: none;  /* Esconde el contenido del menú por defecto */
    }
    .navbar-collapse.collapse {
        display: block !important;  /* Muestra el contenido cuando se activa */
    }
}


/* Cards */
.card {
    max-height: 700px;
	max-width: 450px;  /* Limita el tamaño máximo */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 5% auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
	font-size: 26px;
}

.card:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.card-img-top {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.card-body {
    flex-grow: 1;
    background-color: burlywood;
	color: black;
}

/* Comida */
.comerMenu {
    font-size: 7rem;
    line-height: calc(10px + 10vh);
    font-family: "Sacramento", cursive;
    color: rgb(128, 64, 64);
    text-align: center;
    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500,
                 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00,
                 0 0 98px #ff0000;
    animation: blink 12s infinite;
}

/* Animación de parpadeo */
@keyframes blink {
    20%, 24%, 55% {
        color: #111;
        text-shadow: none;
    }
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500,
                     0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00,
                     0 0 98px #ff0000;
        color: #fff6a9;
    }
}

/* Footer */
.footer {
	background: rgb(253, 245, 230);
    text-align: center;
    padding: 20px 0;
    margin-top: 1%;
    color: rgb(0, 0, 0);
    width: 100%;
}

/*iconos redes sociales*/

.social-icons i {
    font-size: 1.5rem;
}
.social-icons a {
    transition: transform 0.2s ease-in-out;
}
.social-icons a:hover {
    transform: scale(1.2); /* Aumenta ligeramente el tamaño al pasar el ratón */
}

.footer .breadcrumb {
    font-size: 16pt;
}

.footer .breadcrumb a {
    color: rgb(0, 0, 0);
}
.mb-0{
	color:black;
}

/* Mapa */
.map-container {
    width: 100%;
    height: 400px;
    background-color: #eaeaea;
    border: 1px solid rgb(128, 64, 64);
    border-radius: 0.5rem;
    margin-top: 4%;
}

/* Media Queries */

/* Pantallas medianas */
@media (max-width: 992px) {
    .comerMenu {
        font-size: calc(10px + 6vh);
        line-height: calc(10px + 8vh);
    }
}

/* Pantallas pequeñas */
@media (max-width: 768px) {
    .comerMenu {
        font-size: calc(10px + 4vh);
        line-height: calc(10px + 6vh);
    }
}

/* Pantallas extra pequeñas */
@media (max-width: 576px) {
    .comerMenu {
        font-size: calc(12px + 2vh);
        line-height: calc(12px + 3vh);
    }

    .carousel-item img {
        max-height: 300px;
    }

    .navbar-brand img {
        width: 150px;
        height: auto;
    }

    .footer {
        padding: 15px 10px;
    }
}

/* Formulario Login */
.bienvenidoSesion {
    color: rgb(0, 0, 0);
}

.form-label {
    color: rgb(0, 0, 0);
    font-size: 22pt;
}

/* Reserva Confirmada */

.table{
	color:rgb(0, 0, 0);
	font-size: 22px;
}


/* Botón deshabilitado */
.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.modal{
	color:black;
	background-color: transparent;
}

.list-group-item{
	background: rgb(253, 245, 230);
		
}