/* Tarjetas de Restaurantes */
.tarjeta-restaurante { background: white; border-radius: 12px; overflow: hidden; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); position: relative; border: 1px solid #eee; cursor: pointer; }
.restaurante-img { width: 100%; height: 140px; object-fit: cover; }
.restaurante-info { padding: 15px; }
.restaurante-nombre { font-size: 18px; font-weight: bold; color: #333; margin: 0 0 5px 0; }
.restaurante-detalles { font-size: 13px; color: #666; display: flex; justify-content: space-between; margin-top: 10px; }
.estado-badge { position: absolute; top: 10px; right: 10px; padding: 5px 10px; border-radius: 20px; font-size: 11px; font-weight: bold; color: white; z-index: 10; }
.abierto { background-color: #2ed573; }
.cerrado { background-color: #ff5500; }

body { font-family: 'Segoe UI', sans-serif; background-color: #f4f7f6; margin: 0; padding-bottom: 70px; }
.contenido-seccion { padding: 20px; max-width: 500px; margin: 0 auto; }

/* Ocultar secciones por defecto */
.seccion { display: none; }
.seccion.activa { display: block; }

/* Estilos del menú de navegación inferior */
.menu-inferior { position: fixed; bottom: 0; left: 0; right: 0; background: white; display: flex; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); height: 60px; z-index: 100; }
.tab { flex: 1; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #777; cursor: pointer; text-decoration: none; font-size: 12px; font-weight: bold; }
.tab.activo { color: #ff5500; }
.tab-icono { font-size: 24px; margin-bottom: 2px; }

/* Estilo tarjeta de datos de perfil */
.tarjeta-perfil { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); margin-top: 15px; }
.dato-perfil { margin-bottom: 10px; font-size: 16px; color: #333; }
.boton-cerrar-sesion { width: 100%; padding: 12px; background: #dfe4ea; color: #ff5500; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; margin-top: 20px; }

/* Estilos del Buscador de Restaurantes estilo App Nativa */
.contenedor-buscador {
    position: relative;
    margin: -60px 15px 20px 15px;
    z-index: 110;
}
.input-buscador {
    width: 100%;
    padding: 16px 20px;
    padding-right: 65px;
    border-radius: 30px;
    border: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    font-size: 15px;
    box-sizing: border-box;
    outline: none;
    font-family: 'Segoe UI', sans-serif;
    color: #333;
}
.input-buscador::placeholder {
    color: #999;
    font-weight: 500;
}
.btn-buscar-icono {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fb4502;
    color: white;
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(233, 30, 99, 0.3);
    transition: transform 0.2s;
}
.btn-buscar-icono:active {
    transform: translateY(-50%) scale(0.9);
}

/* Estilos del Menú de Comida */
.tarjeta-producto { display: flex; background: white; border-radius: 10px; overflow: hidden; margin-bottom: 15px; border: 1px solid #eee; padding: 10px; align-items: center; }
.producto-img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; margin-right: 15px; }
.producto-info { flex: 1; }
.producto-nombre { font-size: 16px; font-weight: bold; color: #333; margin: 0 0 5px 0; }
.producto-desc { font-size: 12px; color: #777; margin: 0 0 8px 0; }
.producto-precio { font-size: 15px; font-weight: bold; color: #ff5500; }
.btn-agregar { background: #ff5500; color: white; border: none; border-radius: 5px; padding: 6px 12px; font-weight: bold; cursor: pointer; font-size: 12px; }
.btn-agregar:hover { background: #e84118; }

/* Caja de Estado de Pedido Activo */
.caja-pedido-activo { background: white; padding: 20px; border-radius: 12px; border: 1px solid #eee; box-shadow: 0 4px 12px rgba(0,0,0,0.05); text-align: center; }
.estado-visual { background: #ffe9db; color: #ff5500; display: inline-block; padding: 8px 18px; border-radius: 20px; font-weight: bold; margin: 15px 0; font-size: 16px; letter-spacing: 1px; }

/* Botón de actualizar superior */
.btn-actualizar { position: absolute; top: 20px; right: 20px; background: white; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(0,0,0,0.2); cursor: pointer; z-index: 110; transition: transform 0.2s ease; }
.btn-actualizar:active { transform: scale(0.9); }

/* Píldora de contacto */
.pildora-contacto {
    position: absolute;
    top: 5px;
    right: 50px;
    background: white;
    color: #fb4502;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    text-decoration: none;
    z-index: 110;
    transition: transform 0.2s ease;
    font-family: 'Segoe UI', sans-serif;
}
.pildora-contacto:active {
    transform: scale(0.95);
}

/* Toast */
#toast-notificacion {
    visibility: hidden;
    min-width: 250px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 14px 20px;
    position: fixed;
    z-index: 9999;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.3s, bottom 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#toast-notificacion.mostrar {
    visibility: visible;
    opacity: 1;
    bottom: 80px;
}
#toast-notificacion.exito { background-color: #2ed573; }
#toast-notificacion.error { background-color: #ff4757; }
#toast-notificacion.info { background-color: #ff5500; }

/* Animaciones */
@keyframes popCheck {
    0% { transform: scale(0); opacity: 0; }
    80% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); }
}
@keyframes slideUpText {
    0% { transform: translateY(30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Botón flotante ubicación mapa */
.btn-mi-ubicacion {
    position: absolute;
    bottom: 85px;
    right: 30px;
    background: white;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 24px;
    color: #ff5500;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 410;
    transition: transform 0.2s ease;
}
.btn-mi-ubicacion:active {
    transform: scale(0.9);
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Estilos para la tarjeta de producto interactiva */
.tarjeta-producto {
    display: flex;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
    border: 1px solid #eee;
    padding: 12px;
    align-items: center;
    cursor: pointer; /* Cambia el cursor a mano para indicar interactividad */
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.tarjeta-producto:active {
    transform: scale(0.98); /* Efecto de presión al tocar la tarjeta */
}

/* Animación de deslizamiento de abajo hacia arriba para el modal de productos */
@keyframes slideUpModal {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

#modal-detalle-producto {
    animation: slideUpModal 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}