body, h1, h2, h3, p {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif; /* Asegura la consistencia de la fuente en todos los elementos */
    line-height: 1.6; /* Mejora la legibilidad del texto */
    color: #ddd; /* Un color de texto más claro para todos los elementos */
}

body {
    background-color: #121212;
    padding: 5px; /* Agrega padding para evitar que el contenido toque los bordes */
}

/* Contenedor principal */
.app-container {
    color: white;
    background-color: #121212; /* Oscuro para el fondo principal */
    max-width: 600px; /* Ajustado para simular un dispositivo móvil */
    width: calc(100% - 20px); /* Asegura que el contenedor se ajuste a la pantalla */
    margin: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Sombra para destacar el contenedor */
    position: relative; /* Necesario para el posicionamiento absoluto del header */
}

/* Imagen de fondo con estilo de portaa */
.cover-image {
    background: url('https://res.cloudinary.com/du83rwgxa/image/upload/v1724444455/Chic_yswh52.jpg') no-repeat center center/cover;
    text-align: center;
    padding: 20px 0; /* Ajuste para la cobertura completa */
    height: 150px; /* Ajusta la altura a tu necesidad */
    width: calc(100% - 0px); /* Ancho ajustable */
    margin: 20px auto; /* Centrado con margen superior e inferior */
    position: relative; /* Necesario para que el header se posicione dentro del cover */
    z-index: 1; /* Asegura que la imagen de fondo se mantenga detrás del header */
    overflow: hidden; /* Asegura que los bordes redondeados funcionen correctamente */
}

/* Cabecera de la aplicación con fondo semitransparente */
.app-header {
    background-color: #2E2E2E; /* Fondo negro semitransparente */
    padding: 20px; /* Espacio interior aumentado */
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para efecto flotante */
    text-align: center;
    width: calc(70% - 40px); /* Ancho dinámico */
    position: relative; /* Posicionamiento relativo */
    margin: -75px auto 0 auto; /* Margen superior negativo para superponer el cover-image */
    z-index: 2; /* Asegura que el header esté por encima de la imagen de fondo */
}

/* Estilos para el título principal y elementos de cabecera */
.app-header h1, .status, .address, .delivery {
    font-size: 16px; /* Tamaño de fuente ajustado para móvil */
}

.status {
    font-weight: bold;
    /* Puedes agregar estilos base aquí */
}

/* Contenedor de horarios */
.hours-container {
    background-color: #1E1E1E; /* Fondo oscuro */
    padding: 10px 15px; /* Espaciado */
    text-align: center;
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra */
    margin: 40px auto 20px auto; /* Espaciado superior e inferior */
    width: calc(100% - 40px); /* Ancho dinámico */
    position: relative;
}

/* Estilos interactivos para cabecera de horarios */
.hours-header {
    display: flex;
    justify-content: space-between; /* Espacio entre elementos */
    align-items: center;
    font-size: 14px; /* Tamaño de fuente */
    cursor: pointer; /* Cursor de mano */
    color: #fff; /* Color del texto */
}

/* Iconos de la cabecera de horarios */
.hours-header .icon, .hours-header .arrow {
    height: 20px; /* Tamaño del icono */
    width: 20px; /* Tamaño del icono */
    filter: invert(1); /* Hace el icono blanco */
}

.hours-header img {
    height: 20px; /* Icono de hora más pequeño */
}

/* Dropdown de horarios */
.hours-dropdown {
    display: none; /* Oculto por defecto */
    background-color: #444; /* Fondo oscuro para los items */
    margin-top: 10px; /* Espacio encima del dropdown */
}

/* Estilos para cada item en el dropdown de horarios */
.hour-item {
    padding: 8px; /* Padding uniforme */
    border-bottom: 1px solid #555; /* Borde sutil */
}

/* Estilos para la sección de menú */
.menu {
    background-color: #000; /* Fondo oscuro para la sección de menú */
    color: #fff; /* Texto claro para contraste */
    padding: 20px; /* Espaciado adecuado */
    margin-top: 10px; /* Espaciado superior para separar del horario */
}

/* Estilos para el título de la sección de menú */
.menu h2 {
    color: #fff; /* Color claro para el título de sección */
    text-align: left;
    margin-bottom: 5px; /* Espacio debajo del título reducido */
    padding-left: 20px; /* Añadir padding a la izquierda para alineación */
}

/* Estilos para cada item del menú */
.burger-item {
    background-color: #000; /* Fondo oscuro para cada item */
    border: 1px solid #444; /* Borde sutil */
    margin-bottom: 10px; /* Espacio entre items */
    display: flex; /* Alinear imagen y detalles horizontalmente */
    padding: 10px; /* Padding interno */
    border-radius: 10px; /* Bordes redondeados */
    position: relative; /* Posicionamiento relativo para el botón */
    align-items: center; /* Alinear elementos verticalmente */
    overflow: hidden; /* Evitar que el contenido se desborde */
}

/* Botón de añadir */
.add-button {
    background-color: #fff; /* Fondo blanco */
    border: none; /* Sin borde */
    color: #000; /* Color del texto */
    border-radius: 50%; /* Forma circular */
    width: 30px; /* Ancho del botón */
    height: 30px; /* Altura del botón */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px; /* Tamaño de la fuente */
    font-weight: bold; /* Negrita */
    position: absolute; /* Posicionamiento absoluto */
    right: 10px; /* Ajusta según sea necesario */
    top: 50%; /* Ajusta según sea necesario */
    transform: translateY(-50%); /* Centra verticalmente */
    cursor: pointer; /* Manito al pasar por encima */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra */
    transition: background-color 0.3s ease; /* Transición de color */
}



.add-button:hover {
    background-color: #ddd; /* Color de fondo al pasar el ratón */
}

/* Ajuste de imagen para cada ítem del menú */
.burger-item img {
    width: 80px; /* Tamaño fijo para la imagen */
    height: 80px; /* Tamaño fijo para mantener la proporción */
    margin-right: 10px; /* Espacio entre la imagen y los detalles */
    border-radius: 5px; /* Bordes redondeados para la imagen */
}

.burger-details h3 {
    margin: 0 0 5px 0; /* Margen inferior para espaciado */
    color: #FFFFFF; /* Color del título del producto */
    font-size: 16px; /* Tamaño de la fuente */
}

/* Detalles de cada ítem del menú */
.burger-details {
    flex-grow: 1; /* Permite que los detalles ocupen el espacio disponible */
    padding-right: 50px; /* Espacio para el botón de agregar */
    overflow: hidden; /* Evitar desbordamiento */
    text-overflow: ellipsis; /* Añadir puntos suspensivos al desbordar */
}

/* Descripción de cada ítem del menú */
.burger-details p {
    font-size: 12px; /* Tamaño de fuente para la descripción */
    color: #CCC; /* Color de texto más suave para la descripción */
    margin: 0 0 5px 0; /* Margen inferior para espaciado */
    line-height: 1.4; /* Interlineado */
    overflow: hidden; /* Ocultar desbordamiento */
    text-overflow: ellipsis; /* Añadir puntos suspensivos al desbordar */
}

/* Precios de cada ítem del menú */
.prices span {
    display: block; /* Cada precio en una nueva línea */
    font-weight: bold; /* Negrita para los precios */
    color: #FFFFFF; /* Color de texto para los precios */
    font-size: 14px; /* Tamaño de la fuente */
}

/* Estilos para el pie de página */
.footer {
    text-align: left;
    padding: 20px 0; /* Espaciado superior e inferior */
    background-color: #222; /* Color de fondo para el pie de página */
}

/* Estilos para los iconos de redes sociales en el pie de página */
.footer .social-icons a {
    margin: 0 10px; /* Espacio entre iconos */
}

.footer .social-icons img {
    height: 30px; /* Ajuste del tamaño de los iconos */
}

/* Estilos para la información del desarrollador */
.developer-info {
    text-align: center;
    margin-top: 10px;
    color: #fff;
    font-size: 10px;
}

.developer-info img.menu-icon {
    width: 20px;
    height: 20px;
    margin-left: 5px;
    vertical-align: middle;
    color: #fff;
}

/* Modal flotante del carrito */
.cart-float {
    display: none; /* Oculto por defecto */
    position: fixed; /* Fijo en la parte inferior */
    bottom: 55px; /* Un poco de margen desde el borde inferior */
    left: 50%;
    transform: translateX(-50%);
    background-color: #4285F4; /* Color de fondo */
    color: white; /* Color del texto */
    padding: 10px 20px; /* Espaciado */
    border-radius: 30px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra */
    z-index: 1000; /* Asegura que el modal esté por encima de otros elementos */
    display: flex; /* Flexbox para alinear elementos */
    align-items: center; /* Alinear verticalmente */
    cursor: pointer; /* Manito al pasar por encima */
    max-width: calc(100% - 20px); /* Ancho máximo en móviles */
}

.cart-float-content {
    display: flex; /* Flexbox para alinear elementos */
    align-items: center; /* Alinear verticalmente */
}

.cart-float-content img {
    height: 24px; /* Tamaño del icono */
    width: 24px; /* Tamaño del icono */
    margin-right: 10px; /* Espacio entre icono y texto */
}

.cart-float-content span {
    margin-right: 10px; /* Espacio entre elementos */
}

/* Modal de carrito */
.cart-modal {
    display: none; /* Oculto por defecto */
    position: fixed; /* Fijo en la pantalla */
    top: 0; /* Alineado al borde superior */
    left: 0; /* Alineado al borde izquierdo */
    right: 0; /* Alineado al borde derecho */
    bottom: 0; /* Alineado al borde inferior */
    background-color: rgba(0, 0, 0, 0.85); /* Fondo semitransparente más oscuro para mejor enfoque */
    z-index: 1000; /* Asegura que el modal esté por encima de otros elementos */
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: center; /* Centra horizontalmente el contenido */
    animation: fadeIn 0.3s; /* Animación suave al abrir */
}

/* Animación de aparición */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cart-content {
    background-color: #2c2c2c; /* Fondo oscuro para el contenido del carrito */
  color: white;
    padding: 30px;
    border-radius: 8px; /* Bordes redondeados para un look más moderno */
    width: 90%; /* Ancho relativo para mantener el contenido centrado y proporcionado */
    max-width: 400px; /* Ancho máximo para evitar un modal demasiado grande en pantallas grandes */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Sombra para dar profundidad */
    overflow-y: auto; /* Permite desplazamiento si el contenido excede la altura */
    max-height: 80%; /* Altura máxima para garantizar margen con el borde de la pantalla */
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: white;
    font-size: 34px;
    cursor: pointer;
}

.cart-content h2 {
    text-align: center;
    margin-bottom: 20px;
}

#cart-items-container {
    margin-bottom: 20px;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cart-item img {
    height: 50px; /* Altura de la imagen */
    width: 50px; /* Ancho de la imagen */
    margin-right: 10px;
    border-radius: 5px; /* Bordes redondeados */
}

.cart-item-details {
    flex-grow: 1;
}

.cart-summary {
    margin-top: 20px;
}

.cart-summary .cart-option {
    margin-bottom: 10px;
}

.cart-summary label {
    display: block;
    margin-bottom: 5px;
}

.cart-summary .options {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-summary .options div {
    display: flex;
    align-items: center;
}

.cart-summary .options label {
    margin-left: 5px;
}

.cart-summary input[type="text"] {
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-weight: bold;
}

.submit-button {
    width: 100%;
    padding: 10px;
    background-color: #4285F4; /* Color de fondo */
    color: white; /* Color del texto */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño de la fuente */
    cursor: pointer; /* Manito al pasar por encima */
    transition: background-color 0.3s ease; /* Transición de color */
}

.submit-button:hover {
    background-color: #357ae8; /* Color de fondo al pasar el ratón */
}

/* Estilos para el modal de imagen, tamaño y extras */
.size-extra-modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.size-extra-content {
    background-color: #000000; /* Fondo oscuro */
    color: white; /* Color del texto */
    padding: 20px;
    border-radius: 10px; /* Bordes redondeados */
    width: 90%;
    max-width: 500px; /* Ancho máximo */
    position: relative;
    max-height: 80%; /* Altura máxima */
    overflow-y: auto; /* Scroll vertical si se excede la altura */
}

.size-extra-content .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.size-extra-content h2 {
    text-align: center;
    margin-bottom: 20px;
}

.size-extra-content #modal-img-container {
    text-align: center;
    margin-bottom: 20px;
}

.size-extra-content #detail-description {
    margin-bottom: 20px; /* Añadir espacio debajo de la descripción */
}

.size-extra-content h3 {
    margin-top: 20px; /* Añadir espacio superior */
    margin-bottom: 10px; /* Añadir espacio inferior */
    border-bottom: 1px solid #444; /* Añadir una línea inferior para separar */
    padding-bottom: 5px; /* Añadir espacio debajo del texto */
}

.size-extra-content #size-options-container,
.size-extra-content #extra-options-container {
    margin-bottom: 20px;
}

.size-extra-content .add-size-extra-button {
    width: 100%;
    padding: 10px;
    background-color: #4285F4; /* Color de fondo */
    color: white; /* Color del texto */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño de la fuente */
    cursor: pointer; /* Manito al pasar por encima */
    transition: background-color 0.3s ease; /* Transición de color */
}

.size-extra-content .add-size-extra-button:hover {
    background-color: #357ae8; /* Color de fondo al pasar el ratón */
}

.size-extra-content #detail-img {
    width: 100%; /* Ajusta el ancho al 100% del contenedor */
    max-width: 250px; /* Puedes ajustar el tamaño máximo a tu preferencia */
    height: auto; /* Mantener la proporción de la imagen */
    margin: auto; /* Centrar la imagen horizontalmente */
    display: block; /* Asegurar que la imagen se muestre como un bloque */
}

/* Estilos para la animación de carga */
.loading {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: 10px;
    z-index: 1000;
}

/* Estilos adicionales para el botón de agregar y el carrito flotante */
.add-button {
    display: inline-block; /* Asegúrate de que los botones se puedan mostrar/ocultar */
}

/* Estilos para el mensaje cuando el negocio está cerrado */
.closed-message {
    display: none;
    text-align: center;
    color: red;
    font-size: 18px;
    margin-top: 20px;
}

.search-filter-container {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #000;
}

#search-bar {
    width: 100%;
    padding: 10px;
    border-radius: 15px;
    border: 1px solid #ccc;
}

/* Media queries para adaptar el diseño a dispositivos móviles */
@media (max-width: 768px) {
    .app-container, .menu, .hours-container {
        max-width: 100%;
        padding: 5px;
    }

    .app-header h1, .footer .social-icons img, .hours-header img {
        font-size: 14px;
        height: 20px; /* Tamaños ajustados para la vista en móvil */
    }

    .burger-item {
        align-items: center; /* Centrar elementos */
    }

    .burger-item img {
        margin-bottom: 10px; /* Espacio debajo de la imagen en móviles */
    }
    .cart-float {
        padding: 10px; /* Reducir padding en dispositivos móviles */
        max-width: calc(100% - 20px); /* Ajustar ancho máximo en móviles */
    }
}

/* Mostrar dropdown de horarios al hacer clic */
.hours-dropdown.show {
    display: block; /* Mostrar el dropdown */
    margin-top: 10px; /* Añadir margen superior para separación */
}

input[type="text"], input[type="radio"] {
  padding: 8px;
  margin: 5px;
  border: 2px solid #ccc;
  border-radius: 4px;
}

select {
    width: 100%; /* Asegura que el listbox use todo el espacio disponible */
    padding: 8px 10px; /* Espaciado interno para facilitar la selección */
    border: 1px solid #ccc; /* Borde sutil */
    border-radius: 5px; /* Bordes redondeados para una apariencia moderna */
    background-color: white; /* Fondo blanco para mejorar la legibilidad */
    cursor: pointer; /* Indica que el elemento es interactivo */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra ligera para un efecto sutil */
}

select:focus {
    border-color: #4285F4; /* Cambia el color del borde cuando el listbox está enfocado */
    box-shadow: 0 0 8px rgba(66, 133, 244, 0.5); /* Sombra de foco más destacada */
}

/* Estilos para el input de nombre del cliente */
#nombre {
    width: 100%; /* Utiliza todo el ancho disponible del contenedor */
    padding: 12px 20px; /* Espaciado interno suficiente para una escritura cómoda */
    margin: 8px 0; /* Margen para separar de otros elementos */
    display: inline-block; /* Asegura que el elemento se maneje como bloque pero alinee como inline */
    border: 1px solid #ccc; /* Borde sutil */
    border-radius: 4px; /* Bordes redondeados para un aspecto suave */
    box-sizing: border-box; /* El modelo de caja para incluir padding y border en el ancho */
    background-color: #fff; /* Fondo blanco para el input */
    color: #333; /* Texto en color oscuro para contraste */
    font-size: 16px; /* Tamaño de fuente legible */
}

#nombre:focus {
    border-color: #4285F4; /* Cambia el color del borde al enfocar el input */
    box-shadow: 0 0 8px rgba(66, 133, 244, 0.5); /* Sombra suave para indicar foco */
    outline: none; /* Elimina el outline por defecto para evitar distracciones */
}

/* Estilos para el input de dirección */
#direccion {
    width: 100%; /* Utiliza todo el ancho disponible del contenedor */
    padding: 12px 20px; /* Espaciado interno suficiente para una escritura cómoda */
    margin: 8px 0; /* Margen para separar de otros elementos */
    display: inline-block; /* Asegura que el elemento se maneje como bloque pero alinee como inline */
    border: 1px solid #ccc; /* Borde sutil */
    border-radius: 4px; /* Bordes redondeados para un aspecto suave */
    box-sizing: border-box; /* El modelo de caja para incluir padding y border en el ancho */
    background-color: #fff; /* Fondo blanco para el input */
    color: #333; /* Texto en color oscuro para contraste */
    font-size: 16px; /* Tamaño de fuente legible */
}

#direccion:focus {
    border-color: #4285F4; /* Cambia el color del borde al enfocar el input */
    box-shadow: 0 0 8px rgba(66, 133, 244, 0.3); /* Sombra suave para indicar foco */
    outline: none; /* Elimina el outline por defecto para evitar distracciones */
}

.notes-container {
    margin-top: 20px;
}

#product-notes {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 14px;
    box-sizing: border-box;
    resize: vertical; /* Permitir que el usuario ajuste el tamaño vertical */
    min-height: 50px; /* Altura mínima */
    background-color: #1e1e1e;
    color: white;
}

.extra-info-bubble {
    background-color: #f0630b; /* Color de fondo */
    color: #333; /* Color del texto */
    padding: 5px 10px;
    border-radius: 15px; /* Forma de burbuja */
    font-size: 12px;
    display: inline-block;
    margin-top: 5px;
    text-align: center;
    max-width: 200px; /* Ancho máximo */
    width: auto; /* Ajuste automático del ancho */
}


#table-number {
    width: 100%; /* Utiliza todo el ancho disponible del contenedor */
    padding: 12px 20px; /* Espaciado interno suficiente para una escritura cómoda */
    margin: 8px 0; /* Margen para separar de otros elementos */
    display: inline-block; /* Asegura que el elemento se maneje como bloque pero alinee como inline */
    border: 1px solid #ccc; /* Borde sutil */
    border-radius: 4px; /* Bordes redondeados para un aspecto suave */
    box-sizing: border-box; /* El modelo de caja para incluir padding y border en el ancho */
    background-color: #fff; /* Fondo blanco para el input */
    color: #333; /* Texto en color oscuro para contraste */
    font-size: 16px; /* Tamaño de fuent legible */
}

#table-number:focus {
    border-color: #4285F4; /* Cambia el color del borde al enfocar el input */
    box-shadow: 0 0 8px rgba(66, 133, 244, 0.5); /* Sombra suave para indicar foco */
    outline: none; /* Elimina el outline por defecto para evitar distracciones */
}

.current-day {
    background-color: #609a44; /* Cambia el color de fondo para resaltar el día actual */
    color: #333; /* Cambia el color del texto para contrastar con el fondo */
    font-weight: bold; /* Hace que el texto sea más grueso para destacarlo */
}

#bank-info {
    background-color: #f9f9f9; /* Color de fondo suave */
    padding: 10px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    border: 1px solid #ddd; /* Borde sutil */
    margin-top: 10px; /* Espacio superior */
    color: #333; /* Color de texto oscuro para buen contraste */
}

#bank-info p {
    color: #333; /* Color del texto del párrafo, destacando el mensaje */
    font-weight: bold; /* Hace que el texto sea más prominente */
}

#bank-info ul {
    margin: 10px 0 0 20px; /* Espaciado para la lista */
    padding-left: 0;
    color: #5a5a5a; /* Color de texto para los elementos de la lista */
}

#bank-info li {
    margin-bottom: 5px; /* Espacio entre elementos de la lista */
}