, así que la clase de tipografía se aplica también al

para que el nombre del negocio en la barra respete la elección. */ .barra.fuente-moderna .barra-titulo { font-family: "Space Grotesk", "IBM Plex Sans", -apple-system, sans-serif; } .barra.fuente-elegante .barra-titulo { font-family: "Playfair Display", "Lora", serif; } .barra.fuente-amigable .barra-titulo { font-family: "Quicksand", "Nunito", sans-serif; } /* Imagen de fondo opcional detrás de categorías y productos. Se aplica sobre

(no ) para no tapar la barra superior fija. */ main.con-fondo-personalizado { background-size: cover; background-position: center; background-attachment: fixed; } main.con-fondo-personalizado .pantalla { background: rgba(245, 242, 236, 0.88); border-radius: 14px; } img { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea { font-family: inherit; } :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } .skip-link { position: absolute; top: -100%; left: 12px; background: var(--blanco); color: var(--texto); padding: 10px 16px; border-radius: 6px; z-index: 1000; transition: top 0.15s ease; } .skip-link:focus { top: 12px; } /* ============================================================ BARRA SUPERIOR (fija en todas las pantallas) ============================================================ */ .barra { position: fixed; top: 0; left: 0; right: 0; height: var(--alto-barra); background: var(--acento); color: var(--blanco); display: flex; align-items: center; gap: 12px; padding: 0 14px 0 0; z-index: 100; } .barra-titulo-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; text-decoration: none; color: inherit; } .barra-logo { width: var(--alto-barra); height: var(--alto-barra); border-radius: 50%; object-fit: cover; flex-shrink: 0; } .barra-titulo { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* En admin.html .barra-titulo ES el (acá, no un hijo de .barra-titulo-link como en el catálogo público), así que necesita su propio reset de estilos de link. */ text-decoration: none; color: inherit; } /* ---------- Subbarra: volver a la pantalla anterior ---------- */ .subbarra { position: fixed; top: var(--alto-barra); left: 0; right: 0; z-index: 99; min-height: var(--alto-subbarra); box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: var(--blanco); border-bottom: 1px solid var(--borde); } .subbarra-boton { width: 100%; max-width: var(--ancho-max); box-sizing: border-box; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--texto); padding: 0 14px; } .subbarra-boton span:first-child { font-size: 18px; line-height: 1; } /* ---------- Contenedor de acciones (admin + carrito) ---------- */ .barra-acciones { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .barra-boton { background: rgba(255,255,255,0.14); border-radius: 10px; width: 40px; height: 40px; display: grid; place-items: center; color: var(--blanco); font-size: 18px; flex-shrink: 0; padding: 6px; } .barra-boton:active { transform: scale(0.94); } .barra-usuario { width: auto; height: auto; padding: 8px 12px; font-size: 14px; font-weight: 600; white-space: nowrap; } /* Nombre del negocio, visible solo cuando su dueño está viendo su propio catálogo con sesión de admin activa (ver marcarSiEstaLogueado en app.js). No es un botón: es una etiqueta informativa estática. */ .barra-badge-negocio { font-size: 12.5px; font-weight: 700; color: var(--blanco); background: rgba(255,255,255,0.14); border-radius: 10px; padding: 8px 10px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; min-width: 0; } /* ---------- Ícono del carrito con contador ---------- */ .carrito-boton { position: relative; background: rgba(255,255,255,0.14); border-radius: 10px; width: 40px; height: 40px; display: grid; place-items: center; color: var(--blanco); font-size: 19px; flex-shrink: 0; } .carrito-boton:active { transform: scale(0.94); } .carrito-contador { position: absolute; top: -5px; right: -5px; background: var(--acento); color: var(--blanco); font-size: 11px; font-weight: 700; min-width: 19px; height: 19px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; border: 2px solid var(--negro); } .carrito-contador.oculto { display: none; } /* ============================================================ CONTENEDOR DE PANTALLAS ============================================================ */ main { padding-top: var(--alto-barra); max-width: var(--ancho-max); margin: 0 auto; min-height: 100vh; background: var(--gris-fondo); } main.con-subbarra { padding-top: calc(var(--alto-barra) + var(--alto-subbarra)); } .pantalla { display: none; padding: 14px; } .pantalla.activa { display: block; } /* ============================================================ PANTALLA 1 - CATEGORÍAS ============================================================ */ .saludo { padding: 4px 2px 16px; } .saludo h1 { font-size: 22px; font-weight: 800; margin-bottom: 3px; } .saludo p { font-size: 14px; color: var(--texto-suave); } /* Contenedor de categorías: grid de 2 columnas por defecto (forma "circular" o "cuadrada"). La variante "columna" cambia a una sola columna de ancho completo — ver #lista-categorias.columna abajo. */ #lista-categorias { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .categoria { position: relative; aspect-ratio: 1 / 1; border-radius: 50%; /* forma "circular", la de siempre */ overflow: hidden; display: block; width: 100%; background-size: cover; background-position: center; text-align: center; } /* Forma "cuadrada": mismo grid de 2 columnas, esquinas redondeadas en vez de círculo. */ #lista-categorias.cuadrada .categoria { border-radius: 14px; } /* Forma "columna": una tarjeta ancha por fila en vez de grid — el nombre queda alineado a la izquierda como una lista de menú. */ #lista-categorias.columna { grid-template-columns: 1fr; } #lista-categorias.columna .categoria { aspect-ratio: auto; height: 84px; border-radius: 14px; } #lista-categorias.columna .categoria-nombre { justify-content: flex-start; padding-left: 20px; text-align: left; } .categoria-nombre { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: var(--blanco); font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; text-shadow: 0 2px 8px rgba(0,0,0,0.6); padding: 0 14%; text-align: center; } .boton-contacto-negocio { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 18px; padding: 14px; background: var(--whatsapp); color: var(--blanco); border-radius: 12px; font-size: 15px; font-weight: 700; text-align: center; text-decoration: none; } .boton-contacto-negocio:active { opacity: 0.85; } .tarjeta-promo { margin-top: 18px; padding: 18px; border-radius: 14px; background: linear-gradient(135deg, var(--negro), var(--acento-oscuro)); color: var(--blanco); text-align: center; } .tarjeta-promo-etiqueta { display: inline-block; font-size: 12px; font-weight: 700; color: var(--dorado); background: rgba(212, 162, 76, 0.18); padding: 4px 10px; border-radius: 20px; margin-bottom: 10px; } .tarjeta-promo-titulo { font-size: 18px; font-weight: 800; margin-bottom: 4px; } .tarjeta-promo-precio { font-size: 26px; font-weight: 800; color: var(--dorado); } .tarjeta-promo-precio span { display: block; font-size: 13px; font-weight: 600; color: var(--blanco); opacity: 0.8; } .categoria:active { transform: scale(0.985); } /* ============================================================ PANTALLA 2 - LISTADO DE PRODUCTOS ============================================================ */ .contador-productos { font-size: 14px; color: var(--texto-suave); padding: 2px 2px 12px; } /* Grid de 2 columnas por defecto (forma "grid-cuadrado" o "grid-circular"). La variante "columna" pasa a una sola columna de ancho completo — ver #lista-productos.columna abajo. */ #lista-productos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } #lista-productos.columna { grid-template-columns: 1fr; } .producto-fila { display: flex; flex-direction: column; gap: 8px; background: var(--blanco); border-radius: 14px; padding: 10px; width: 100%; text-align: left; border: 1px solid var(--borde); } .producto-fila:active { background: #fafbfc; } .producto-miniatura { width: 100%; aspect-ratio: 1 / 1; border-radius: 9px; /* forma "grid-cuadrado", la de siempre */ object-fit: cover; background: var(--gris-fondo); flex-shrink: 0; } /* Forma "grid-circular": misma tarjeta, miniatura redonda. */ #lista-productos.grid-circular .producto-miniatura { border-radius: 50%; } /* Forma "columna": la misma tarjeta (imagen grande cuadrada arriba, datos en texto abajo) pero ocupando todo el ancho en vez de la mitad del grid. */ #lista-productos.columna .producto-fila { flex-direction: column; } #lista-productos.columna .producto-miniatura { aspect-ratio: 16 / 10; } .producto-datos { min-width: 0; } .producto-nombre { font-size: 16px; font-weight: 600; margin-bottom: 3px; } .producto-unidad { font-size: 13px; color: var(--texto-suave); font-weight: 400; } .producto-precio { font-size: 18px; font-weight: 800; color: var(--dorado); } .etiqueta-oferta { display: inline-block; background: var(--rojo); color: var(--blanco); font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; margin-left: 6px; vertical-align: middle; } .etiqueta-agotado { display: inline-block; background: var(--texto-suave); color: var(--blanco); font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; margin-left: 6px; } .producto-fila.agotado { opacity: 0.55; } /* ============================================================ PANTALLA 3 - DETALLE DEL PRODUCTO ============================================================ */ .detalle-imagen { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--blanco); margin-bottom: 16px; } .detalle-nombre { font-size: 24px; font-weight: 800; margin-bottom: 4px; } .detalle-precio { font-size: 26px; font-weight: 800; color: var(--dorado); margin-bottom: 2px; } .detalle-unidad { font-size: 14px; color: var(--texto-suave); margin-bottom: 20px; } .detalle-descripcion { font-size: 14.5px; line-height: 1.5; color: var(--texto); white-space: pre-line; margin-top: -8px; margin-bottom: 20px; } .bloque { background: var(--blanco); border: 1px solid var(--borde); border-radius: 12px; padding: 14px; margin-bottom: 14px; } .bloque-titulo { font-size: 14px; font-weight: 700; margin-bottom: 9px; } .observaciones { width: 100%; min-height: 74px; border: 1px solid var(--borde); border-radius: 9px; padding: 10px; font-size: 15px; resize: vertical; color: var(--texto); } .observaciones:focus { outline: none; border-color: var(--acento); } .contador-caracteres { text-align: right; font-size: 12px; color: var(--texto-suave); margin-top: 5px; } /* ---------- Selector de cantidad ---------- */ .selector { display: flex; align-items: center; justify-content: center; gap: 20px; } .selector-boton { width: 46px; height: 46px; border-radius: 50%; background: var(--gris-fondo); border: 1px solid var(--borde); font-size: 24px; font-weight: 700; color: var(--texto); display: grid; place-items: center; line-height: 1; } .selector-boton:active { background: var(--borde); } .selector-boton:disabled { opacity: 0.35; } .selector-valor { font-size: 24px; font-weight: 800; min-width: 90px; text-align: center; } .selector-valor small { display: block; font-size: 12px; font-weight: 500; color: var(--texto-suave); } /* ============================================================ PANTALLA 4 - CARRITO ============================================================ */ .carrito-acciones { display: flex; justify-content: flex-end; margin-bottom: 14px; } .carrito-linea { background: var(--blanco); border: 1px solid var(--borde); border-radius: 12px; padding: 13px; margin-bottom: 11px; } .carrito-linea-arriba { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; } .carrito-linea-nombre { font-size: 16px; font-weight: 600; } .carrito-linea-obs { font-size: 13px; color: var(--texto-suave); font-style: italic; margin-top: 3px; } .carrito-linea-subtotal { font-size: 17px; font-weight: 800; white-space: nowrap; } .carrito-linea-abajo { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .selector-chico { gap: 12px; } .selector-chico .selector-boton { width: 34px; height: 34px; font-size: 19px; } .selector-chico .selector-valor { font-size: 16px; min-width: 66px; } .selector-chico .selector-valor small { font-size: 11px; } .quitar { color: var(--rojo); font-size: 13px; font-weight: 600; padding: 6px; } /* ---------- Formulario ---------- */ .campo { margin-bottom: 14px; } .campo label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; } .campo label .obligatorio { color: var(--rojo); } .campo input, .campo textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--borde); border-radius: 9px; font-size: 15px; color: var(--texto); } .campo textarea { resize: vertical; min-height: 70px; } .campo input:focus, .campo textarea:focus { outline: none; border-color: var(--acento); } .campo input.error { border-color: var(--rojo); } .opciones { display: flex; gap: 10px; } .opcion { flex: 1; padding: 13px 8px; border: 2px solid var(--borde); border-radius: 10px; background: var(--blanco); font-size: 14px; font-weight: 600; color: var(--texto); text-align: center; line-height: 1.25; } .opcion.elegida { border-color: var(--acento); background: #eaf1ec; color: var(--acento-oscuro); } .oculto { display: none !important; } /* ---------- Resumen y botón final ---------- */ .resumen { background: var(--blanco); border: 1px solid var(--borde); border-radius: 12px; padding: 14px; margin-bottom: 14px; } .resumen-fila { display: flex; justify-content: space-between; font-size: 15px; padding: 3px 0; color: var(--texto-suave); } .resumen-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 22px; font-weight: 800; color: var(--texto); border-top: 1px solid var(--borde); margin-top: 9px; padding-top: 9px; } .boton-whatsapp { width: 100%; padding: 16px; background: var(--whatsapp); color: #ffffff; border-radius: 12px; font-size: 17px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 9px; } .boton-whatsapp:active { background: #3d9257; } .boton-whatsapp:disabled { background: #cfd5dc; color: #8b939d; } .aviso { background: #fff8e6; border-left: 4px solid var(--amarillo); border-radius: 8px; padding: 11px 13px; font-size: 13.5px; margin-bottom: 14px; } .aviso.error { background: #fdeceb; border-left-color: var(--rojo); } /* ---------- Botón fijo de agregar (pantalla detalle) ---------- */ .barra-accion { position: sticky; bottom: 0; background: var(--gris-fondo); padding: 12px 0 6px; margin-top: 6px; } .boton-principal { width: 100%; padding: 16px; background: var(--acento); color: var(--blanco); border-radius: 12px; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .boton-principal:active { background: var(--acento-oscuro); } .boton-principal:disabled { background: #cfd5dc; } /* ---------- Estado vacío ---------- */ .vacio { text-align: center; padding: 60px 24px; color: var(--texto-suave); } .vacio-icono { font-size: 46px; margin-bottom: 12px; } .vacio p { margin-bottom: 18px; font-size: 15px; } .boton-secundario { display: inline-block; padding: 12px 22px; background: var(--negro); color: var(--blanco); border-radius: 10px; font-size: 15px; font-weight: 600; } /* ---------- Aviso flotante al agregar ---------- */ .confirmacion { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(90px); background: var(--negro); color: var(--blanco); padding: 12px 20px; border-radius: 30px; font-size: 14.5px; font-weight: 600; z-index: 200; transition: transform 0.25s ease; box-shadow: 0 6px 20px rgba(0,0,0,0.25); max-width: 90vw; text-align: center; } .confirmacion.visible { transform: translateX(-50%) translateY(0); } /* ---------- Botón flotante de carrito (estilo WhatsApp) ---------- */ .carrito-flotante { position: fixed; right: 18px; bottom: 90px; width: 56px; height: 56px; border-radius: 50%; background: var(--acento); color: var(--blanco); font-size: 26px; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,0,0,0.25); z-index: 150; } .carrito-flotante:active { transform: scale(0.94); } .carrito-flotante-contador { position: absolute; top: -4px; right: -4px; background: var(--rojo); color: var(--blanco); font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; border: 2px solid var(--blanco); } .carrito-flotante-contador.oculto { display: none; } footer { text-align: center; font-size: 12px; color: var(--texto-suave); padding: 26px 14px 34px; } .compartir { margin-bottom: 20px; } .compartir-titulo { display: block; font-size: 13px; font-weight: 600; color: var(--texto); margin-bottom: 10px; } .compartir-botones { display: flex; justify-content: center; gap: 12px; } .compartir-boton { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--blanco); transition: transform 0.15s ease; } .compartir-boton:active { transform: scale(0.92); } .compartir-boton svg { width: 22px; height: 22px; } .compartir-whatsapp { background: var(--whatsapp); } .compartir-facebook { background: #1877f2; } .compartir-messenger { background: #0084ff; } .compartir-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } .boton-vaciar { padding: 8px 16px; background: var(--rojo); color: var(--blanco); border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s; } .boton-vaciar:hover { background: #c41e3a; } .boton-vaciar:active { background: #a01830; } /* ============================================================ ESCRITORIO (desde 900px) ------------------------------------------------------------ Todo lo de arriba sigue aplicando: esto solo agranda el ancho del catálogo y pasa el grid de categorías/productos de 2 a 4 columnas. Las variantes de forma (cuadrada/columna/circular, elegidas por cada negocio desde el panel admin) se respetan igual: "columna" sigue siendo 1 columna aun en escritorio. ============================================================ */ @media (min-width: 900px) { :root { --ancho-max: 1100px; } #lista-categorias { grid-template-columns: repeat(4, 1fr); } #lista-categorias.columna { grid-template-columns: 1fr; } #lista-productos { grid-template-columns: repeat(4, 1fr); } #lista-productos.columna { grid-template-columns: 1fr; } }