/* ============================================================================ * GBC Motos · Buscador nuevo — MÓDULO C · FRONTEND (CSS) * Archivo: 04-frontend.css · TuWebFacil · septiembre 2026 * ---------------------------------------------------------------------------- * * QUÉ HACE * Estilos del desplegable nuevo de búsqueda: filas con foto, nombre, COD, * semáforo y precio, scroll infinito, estados de carga / vacío / error, y el * pie con el aviso de precios y el botón "Ver los N resultados". * * REEMPLAZA AL SNIPPET 12. Ojo con esto: el snippet 12 también estilaba el * desplegable VIEJO (.tt-menu). Como el buscador viejo tiene que seguir * andando mientras el interruptor esté apagado, sus reglas están acá abajo, * en el BLOQUE Z. Si se borra el bloque Z y se desactiva el snippet 12, el * buscador viejo queda sin estilos. * * DE QUÉ DEPENDE * · 04-frontend.js → pone la clase `gbc-ls-on` en el y dibuja el * panel `.gbc-ls-panel` colgado del . * · El alto y la posición del panel los calcula el JS contra el viewport * real (visualViewport en celular). Acá NO hay un max-height fijo: el * `max-height: 300px` del snippet 12 era justamente el que cortaba la * lista y hacía imposible el scroll infinito. * · Snippet 24 → pone `html.gbc-dark` cuando el sitio está en modo oscuro. * El bloque K se apoya en eso y además contempla `body.electro-dark`. * * CÓMO SE APAGA * Desactivar el snippet, o sacar `gbc_new=1` de la URL: sin esa clase en el * todo lo de acá queda inerte y sólo aplica el bloque Z (el viejo). * * DÓNDE VA * Code Snippets → Añadir nuevo → tipo CSS · Ámbito "site-css" · Prioridad 10 * * MOBILE PRIMERO: todo lo de abajo está escrito para pantalla chica. Las * medidas de escritorio están al final, en el bloque J (min-width: 768px). * La mayoría de los clientes de GBC entra desde el celular. * ==========================================================================*/ /* ═══ A · VARIABLES Y CONTENEDOR ══════════════════════════════════════════ */ .gbc-ls-panel { /* Paleta tomada del sitio (snippet 24): azul de títulos #1F2A5C, gris de metadatos #4E565D, gris suave #5F676E. */ --gbc-fondo: #FFFFFF; --gbc-borde: #DFE3E8; --gbc-titulo: #1F2A5C; --gbc-texto: #4E565D; --gbc-suave: #5F676E; --gbc-hover: #F2F5FA; --gbc-activo: #E8EFFA; --gbc-placa: #F1F3F5; --gbc-marca: #FFF3BF; /* Semáforo. Son el verde / amarillo / rojo del snippet 10, pero en versión pastilla: sobre fondo blanco y a 12 px, el verde y el rojo plenos con texto blanco quedan por debajo del contraste mínimo, y el amarillo puro es ilegible (por eso el snippet 10 le tuvo que poner borde negro). Estas combinaciones pasan 4.5:1 y se siguen leyendo como verde, amarillo y rojo de un vistazo. */ --gbc-ok-bg: #E4F4E9; --gbc-ok-fg: #15662F; --gbc-bajo-bg: #FCF0CD; --gbc-bajo-fg: #6B4E00; --gbc-sin-bg: #FBE4E4; --gbc-sin-fg: #A81E1E; position: fixed; top: 0; left: 8px; right: 8px; z-index: 100000; /* la cabecera pegajosa de Electro usa 999+ */ display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--gbc-fondo); border: 1px solid var(--gbc-borde); border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 25, 55, .18); font-size: 14px; line-height: 1.35; color: var(--gbc-texto); -webkit-text-size-adjust: 100%; } /* !important necesario: la clase de arriba declara display:flex, que le gana al display:none que el atributo [hidden] trae por defecto. Es la única forma de que el panel arranque cerrado sin agregar una clase extra. */ .gbc-ls-panel[hidden] { display: none !important; } /* Región sólo para lectores de pantalla (cantidad de resultados). */ .gbc-ls-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ═══ B · CABECERA · qué expandió el diccionario ══════════════════════════ */ .gbc-ls-cabecera { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--gbc-borde); font-size: 12px; color: var(--gbc-suave); } .gbc-ls-cabecera[hidden] { display: none; } .gbc-ls-chip { padding: 2px 8px; border-radius: 999px; background: var(--gbc-hover); color: var(--gbc-titulo); font-weight: 600; } /* ═══ C · ZONA DE SCROLL · acá vive el scroll infinito ════════════════════ `flex: 1` + `min-height: 0` es lo que deja que el panel crezca hasta el alto que le calcula el JS y recién ahí scrollee, en vez de cortar en un número fijo de pixeles. `overscroll-behavior: contain` evita que al llegar al final del desplegable se empiece a mover la página de atrás: en celular eso es lo que hace que una lista larga se sienta rota. */ .gbc-ls-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .gbc-ls-lista { position: relative; /* referencia para medir el bloque que se poda */ display: block; } /* Ocupa el lugar de las filas descartadas para que la barra de scroll no pegue un salto cuando el JS poda arriba de 300 nodos. */ .gbc-ls-espaciador { display: block; height: 0; } .gbc-ls-centinela { height: 1px; } .gbc-ls-mas { padding: 12px; text-align: center; font-size: 13px; color: var(--gbc-suave); } .gbc-ls-mas[hidden] { display: none; } /* ═══ D · LA FILA ═════════════════════════════════════════════════════════ */ .gbc-ls-fila { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 64px; /* dedo cómodo: bien arriba de los 44 px */ border-bottom: 1px solid var(--gbc-borde); text-decoration: none; color: inherit; cursor: pointer; contain: layout paint; /* con 300 filas vivas, ayuda en celular */ } .gbc-ls-fila:last-child { border-bottom: 0; } .gbc-ls-fila:hover, .gbc-ls-fila--activa { background: var(--gbc-hover); text-decoration: none; } .gbc-ls-fila--activa { background: var(--gbc-activo); } .gbc-ls-fila:focus-visible { outline: 2px solid var(--gbc-titulo); outline-offset: -2px; } /* ═══ E · LA FOTO · el 77 % del catálogo no tiene ═════════════════════════ El recuadro tiene medida fija y se dibuja aunque no haya imagen, así que el layout no salta cuando la foto entra tarde ni cuando directamente no existe. La placa gris se ve prolija y del mismo tamaño que una foto real. */ .gbc-ls-foto { flex: 0 0 56px; width: 56px; height: 56px; display: block; border-radius: 6px; background: var(--gbc-placa); overflow: hidden; line-height: 0; } .gbc-ls-img { width: 100%; height: 100%; object-fit: contain; /* la pieza entera, nunca recortada (igual que el catálogo) */ display: block; background: var(--gbc-placa); } /* Cuando lo que se ve es la placa "sin imagen", se le baja un punto para que no compita con las fotos reales de la misma lista. */ .gbc-ls-img--placa { opacity: .82; } /* ═══ F · NOMBRE, COD Y SEMÁFORO ══════════════════════════════════════════ */ .gbc-ls-datos { flex: 1 1 auto; min-width: 0; /* sin esto el texto largo desborda el flex */ display: block; } .gbc-ls-nombre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 600; color: var(--gbc-titulo); } .gbc-ls-mark { background: var(--gbc-marca); color: inherit; padding: 0; border-radius: 2px; } .gbc-ls-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; } /* COD, nunca "SKU": el snippet 14 lo renombra en todo el sitio. */ .gbc-ls-cod { font-size: 12px; color: var(--gbc-suave); font-variant-numeric: tabular-nums; letter-spacing: .02em; } .gbc-ls-sem { font-size: 11px; font-weight: 700; line-height: 1.6; padding: 1px 8px; border-radius: 999px; white-space: nowrap; } .gbc-ls-sem--ok { background: var(--gbc-ok-bg); color: var(--gbc-ok-fg); } .gbc-ls-sem--bajo { background: var(--gbc-bajo-bg); color: var(--gbc-bajo-fg); } .gbc-ls-sem--sin { background: var(--gbc-sin-bg); color: var(--gbc-sin-fg); } /* ═══ G · PRECIO ══════════════════════════════════════════════════════════ Este nodo sólo existe si el servidor mandó el precio. Al anónimo no se le dibuja nada acá: el aviso va una vez sola, en el pie. */ .gbc-ls-precio { flex: 0 0 auto; align-self: center; font-size: 14px; font-weight: 700; color: var(--gbc-titulo); white-space: nowrap; font-variant-numeric: tabular-nums; } /* ═══ H · PIE · aviso de precios + "Ver los N resultados" ═════════════════ El pie queda fuera de la zona de scroll a propósito: con scroll infinito, un botón "al final de la lista" no llega nunca. Así está siempre a mano y sigue siendo el cierre visual del desplegable. */ .gbc-ls-pie { flex: 0 0 auto; border-top: 1px solid var(--gbc-borde); background: var(--gbc-fondo); } .gbc-ls-aviso { padding: 10px 12px; font-size: 12.5px; color: var(--gbc-suave); background: var(--gbc-hover); text-align: center; } .gbc-ls-aviso[hidden], .gbc-ls-todos[hidden] { display: none; } .gbc-ls-todos { display: block; width: 100%; min-height: 48px; padding: 13px 12px; border: 0; background: transparent; color: var(--gbc-titulo); font-size: 14px; font-weight: 700; font-family: inherit; text-align: center; cursor: pointer; } .gbc-ls-todos:hover { background: var(--gbc-hover); } .gbc-ls-todos:focus-visible { outline: 2px solid var(--gbc-titulo); outline-offset: -2px; } /* ═══ I · ESTADOS · cargando, vacío, error, pista ═════════════════════════ */ .gbc-ls-msg { padding: 18px 16px; text-align: center; } .gbc-ls-msg__t { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--gbc-titulo); } .gbc-ls-msg__a { margin: 0; font-size: 13px; color: var(--gbc-suave); } .gbc-ls-msg__b { margin-top: 12px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--gbc-borde); border-radius: 8px; background: var(--gbc-fondo); color: var(--gbc-titulo); font: inherit; font-weight: 700; cursor: pointer; } .gbc-ls-msg--error .gbc-ls-msg__t { color: var(--gbc-sin-fg); } .gbc-ls-msg--pista { padding: 14px 16px; } /* Esqueleto de carga: cuatro filas fantasma con la misma altura que las reales, así el panel no cambia de tamaño cuando llegan los resultados. */ .gbc-ls-fila--fantasma { cursor: default; pointer-events: none; } .gbc-ls-fila--fantasma .gbc-ls-foto, .gbc-ls-barra { background: linear-gradient(90deg, #EEF1F4 25%, #E2E6EB 37%, #EEF1F4 63%); background-size: 400% 100%; animation: gbc-ls-brillo 1.3s ease infinite; } .gbc-ls-barra { display: block; height: 12px; border-radius: 4px; } .gbc-ls-barra--a { width: 78%; margin-bottom: 8px; } .gbc-ls-barra--b { width: 42%; } @keyframes gbc-ls-brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .gbc-ls-fila--fantasma .gbc-ls-foto, .gbc-ls-barra { animation: none; } } /* ═══ J · ESCRITORIO ══════════════════════════════════════════════════════ */ @media (min-width: 768px) { .gbc-ls-panel { font-size: 14px; } .gbc-ls-fila { min-height: 56px; padding: 8px 14px; gap: 12px; } .gbc-ls-foto { flex-basis: 48px; width: 48px; height: 48px; } .gbc-ls-nombre { -webkit-line-clamp: 1; } .gbc-ls-todos { min-height: 44px; } } /* ═══ K · MODO OSCURO ═════════════════════════════════════════════════════ `html.gbc-dark` la pone el snippet 24 midiendo el brillo real del fondo. `body.electro-dark` es la clase propia del tema. Se contemplan las dos porque el switch Dark/Light de GBC está activo. */ html.gbc-dark .gbc-ls-panel, body.electro-dark .gbc-ls-panel { --gbc-fondo: #1B2027; --gbc-borde: #2E353E; --gbc-titulo: #8FB9E8; --gbc-texto: #C3C9CF; --gbc-suave: #AEB6BD; --gbc-hover: #232A33; --gbc-activo: #2B3543; --gbc-placa: #F4F5F7; /* la placa "sin imagen" es clara: se deja clara */ --gbc-marca: #5A4A00; --gbc-ok-bg: #17331F; --gbc-ok-fg: #7BD79A; --gbc-bajo-bg: #38300F; --gbc-bajo-fg: #EBC85A; --gbc-sin-bg: #3A1D1D; --gbc-sin-fg: #F09393; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); } html.gbc-dark .gbc-ls-mark, body.electro-dark .gbc-ls-mark { color: #FFE9A3; } html.gbc-dark .gbc-ls-fila--fantasma .gbc-ls-foto, html.gbc-dark .gbc-ls-barra, body.electro-dark .gbc-ls-fila--fantasma .gbc-ls-foto, body.electro-dark .gbc-ls-barra { background: linear-gradient(90deg, #232A33 25%, #2C343E 37%, #232A33 63%); background-size: 400% 100%; } /* ═══ Z · CONVIVENCIA CON EL BUSCADOR VIEJO ═══════════════════════════════ Este bloque es el que hace que se pueda desactivar el snippet 12 sin dejar al buscador viejo sin estilos. Z.1 — Con el interruptor APAGADO (sin `gbc_new=1`), el desplegable viejo de Typeahead sigue siendo el que atiende a los clientes. Estas son las reglas del snippet 12, textuales. */ .tt-menu, .ui-autocomplete { max-height: 300px; overflow-y: auto; display: none; position: absolute; z-index: 1000; background-color: #fff; border: 1px solid #ccc; width: 100%; } /* !important heredado del snippet 12: Typeahead escribe `display: none` en el atributo style del menú, y sin !important la clase no le gana. */ .tt-menu.tt-open, .ui-autocomplete.ui-open { display: block !important; } .search-result-item { display: flex; align-items: center; padding: 5px; cursor: pointer; } .search-result-image { width: 50px; height: 50px; margin-right: 10px; } .search-result-title { font-size: 14px; color: #333; } .empty-message { text-align: center; padding: 10px; color: #999; } /* Z.2 — Con el interruptor ENCENDIDO, el JS ya desmonta Typeahead. Esto es la red de seguridad por si el tema lo vuelve a instanciar en la cabecera móvil: dos desplegables abiertos a la vez sería lo peor de los dos. !important obligado: Typeahead pone `display: block` inline en el menú y `position: relative` inline en el envoltorio. */ html.gbc-ls-on .tt-menu, html.gbc-ls-on .tt-hint, html.gbc-ls-on .tt-dataset { display: none !important; } html.gbc-ls-on .twitter-typeahead { display: block !important; /* que no colapse el input si quedó envuelto */ width: 100% !important; }