/* ================================================================ LA PORTADA DEL TALLER ================================================================ El Home de fixhubtec.com: la tira de fotos, el carrusel de banners, el mosaico de categorías, los cuadrados de dispositivo, la cinta de marcas y los medios de pago. Todo se llena desde Administración → Portada; acá está solo cómo se ve. Va únicamente en public/tec.html. La portada del programa (fixhubpos.com) es otra cosa y tiene su propia hoja: pos/css/portada-pos.css. El javascript que arma todo esto es tienda/js/portada-taller.js. ================================================================ */ /* Las filas full-bleed de acá adentro se estiran al ancho de la ventana con margen negativo, y basta que sobre un pixel para que aparezca la barra de scroll horizontal. Eso no es solo feo: la barra se come alto de ventana, cambia el máximo de scroll y el navegador recorta la posición — es el salto que se veía al volver de otra pestaña, con la barra asomando una fracción de segundo. clip y no hidden a propósito: hidden convierte al elemento en contenedor de scroll y en Safari eso rompe el position:sticky del navbar (por eso se había descartado antes); clip recorta sin ser contenedor de scroll, así que el navbar sigue pegándose. */ #vit-pagina-home { overflow-x: clip; } /* ── Tira animada de fotos del Home (Admin → Portada → Tira de fotos) — ocupa el espacio que antes quedaba vacío arriba del carrusel de banners. Imágenes libres, sin nombre fijo (tabla "tira_home", igual que "banners_home"), en loop continuo tipo cinta — mismo mecanismo de duplicar la lista + animar la mitad exacta que #fixhub-marcas más abajo. Full-bleed igual que marcas/dispositivos, ver "Las filas que van de borde a borde". */ #fixhub-tira { overflow: hidden; margin: 0 0 20px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } #fixhub-tira.oculto { display: none; } .fixhub-tira-fila { display: flex; gap: 12px; width: max-content; animation: fixhub-tira-desplazar 26s linear infinite; } @keyframes fixhub-tira-desplazar { from { transform: translateX(0); } to { transform: translateX(-50%); } } .fixhub-tira-img { width: 220px; height: 130px; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; } @media (max-width: 640px) { .fixhub-tira-img { width: 160px; height: 96px; } } /* ── Carrusel de banners del Home (reemplaza el hero de texto cuando hay al menos un banner activo, ver Admin → Portada) ── No se le pide al admin que suba una imagen de un tamaño exacto: el aspect-ratio se calcula solo (ver JS más abajo) a partir de las medidas reales de la primera imagen, así que sirve tanto una imagen ancha tipo banner como un flyer vertical tipo "promoción de pantallas" — nunca se recorta (object-fit:contain), solo se limita el alto máximo para que no domine toda la pantalla. */ /* Ancho real (no acotado a los 720px del hero) calculado en JS — ver "Las filas que van de borde a borde", mismo mecanismo que #fixhub-marcas/#fixhub-dispositivos. Sin bordes redondeados porque llega de punta a punta de la pantalla, pegado a los bordes reales del viewport. */ /* Con el carrusel activo no va espacio arriba: el carrusel es edge-to-edge y tiene que arrancar pegado al navbar, sin la franja vacía que dejaba el padding-top del hero (56px, 40px en móvil). Se ata a que el carrusel esté visible y no se le saca el padding a secas porque ese espacio SÍ hace falta cuando el Home muestra el hero de texto en vez del carrusel. */ .sel-emp-hero:has(> #fixhub-carrusel:not(.oculto)) { padding-top: 0; } #fixhub-carrusel { position: relative; width: auto; max-height: 480px; aspect-ratio: 16 / 9; /* fallback mientras carga la 1ª imagen */ overflow: hidden; background: rgba(255,255,255,0.03); } #fixhub-carrusel.oculto { display: none; } #fixhub-carrusel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.4s ease; cursor: pointer; } #fixhub-carrusel img.activo { opacity: 1; } @media (max-width: 640px) { #fixhub-carrusel { max-height: 360px; } } /* ── Tarjetas de categoría de producto del Home (Admin → Portada → Categorías) — collage de imágenes rectangulares (no círculos), nombre + "desde $" superpuestos abajo con degradado para que se lean sobre cualquier foto. Al hacer click filtran el catálogo por "producto" (ver irCategoriaFixHub). Van ARRIBA de los cuadrados de dispositivo (#fixhub-dispositivos). ── */ /* Mosaico de categorías. No son 16 tarjetas iguales: tres categorías (Servicio técnico, Carcasas, Láminas) son el 95% del catálogo, así que van grandes, y la cola larga —cargadores, cables, pendrives, correas: 194 productos entre 13 categorías— va agrupada abajo en tarjetas chicas. Con todas del mismo tamaño, una categoría de 1 producto pesaba lo mismo que una de 2.193. Dos filas con su propia grilla en vez de una sola de 6 columnas: así cada fila reparte el ancho entre los que tenga y no queda un hueco cuando el número de grupos no divide justo. */ /* Escapa del .sel-emp-hero (max-width:720px) con el mismo mecanismo que #fixhub-dispositivos y #fixhub-marcas (ver "Las filas que van de borde a borde"): sin eso el mosaico quedaba encajonado a 640px, bastante más angosto que la fila de dispositivos de abajo. El ancho útil lo pone cada fila, no el contenedor. */ #fixhub-categorias { display: flex; flex-direction: column; gap: 12px; margin: 64px 0 0; } #fixhub-categorias.oculto { display: none; } .fixhub-cat-fila { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 12px; max-width: 1100px; margin: 0 auto; padding: 0 16px; width: 100%; box-sizing: border-box; } .fixhub-cat-item.destacada { height: 200px; } .fixhub-cat-item.agrupada { height: 122px; } @media (max-width: 900px) { .fixhub-cat-fila { grid-template-columns: repeat(2, 1fr); } .fixhub-cat-item.destacada { height: 160px; } .fixhub-cat-item.agrupada { height: 112px; } } @media (max-width: 560px) { .fixhub-cat-fila { grid-template-columns: repeat(2, 1fr); gap: 10px; } .fixhub-cat-item.destacada { height: 132px; } .fixhub-cat-item.agrupada { height: 104px; } } /* Mismo lenguaje que la tarjeta del seguimiento y la del buscador de carcasas: vidrio apenas encendido sobre el fondo, borde fino y esquina de 16. Antes eran cajas opacas con su propio gris, que en una página con tres tarjetas de vidrio se leían como de otro sitio. */ .fixhub-cat-item { position: relative; cursor: pointer; padding: 0; border-radius: 16px; overflow: hidden; background-color: rgba(255,255,255,0.03); border: 1px solid var(--vbo, rgba(255,255,255,0.12)); background-size: cover; background-position: center; transition: transform 0.2s var(--ease-apple, ease), border-color 0.2s var(--ease-apple, ease), background-color 0.2s var(--ease-apple, ease); } .fixhub-cat-item:hover { transform: translateY(-3px); border-color: var(--va); background-color: rgba(255,255,255,0.06); } /* Ícono genérico (Tabler) de respaldo para categorías que todavía no tienen foto propia subida desde Admin → Portada — así la tarjeta aparece de inmediato en vez de esperar a que se cree una con imagen. Mismo tamaño de tarjeta que las que sí tienen foto, para que el collage no quede descuadrado mezclando las dos. */ /* Sin foto, el ícono va arriba a la izquierda y el nombre abajo, como una ficha. Centrado quedaba justo detrás del nombre, que se lee encima. */ .fixhub-cat-item .fixhub-cat-icono { position: absolute; inset: 14px auto auto 14px; display: flex; align-items: center; justify-content: center; } .fixhub-cat-item .fixhub-cat-icono i { font-size: 26px; color: var(--va); } /* Degradado oscuro solo en el tercio de abajo — así el nombre/precio se leen sobre cualquier foto sin taparla entera. */ /* El velo oscuro es para leer el nombre SOBRE una foto. Sin foto no hay nada que tapar y apagaba el vidrio. */ .fixhub-cat-item.con-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 45%, transparent 75%); pointer-events: none; } .fixhub-cat-tile-texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; z-index: 1; display: flex; flex-direction: column; gap: 3px; text-align: left; } .fixhub-cat-tile-nombre { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.2; } .fixhub-cat-item:not(.con-foto) .fixhub-cat-tile-nombre { color: var(--vtx); } .fixhub-cat-item:not(.con-foto) .fixhub-cat-tile-precio { color: var(--vtx3); } .fixhub-cat-tile-precio { font-size: 12px; color: rgba(255,255,255,0.85); } .fixhub-cat-item.destacada .fixhub-cat-tile-nombre { font-size: 19px; } .fixhub-cat-item.agrupada .fixhub-cat-tile-nombre { font-size: 13px; } /* En las agrupadas, la línea de abajo lista qué incluye el grupo en vez del precio: "Cargadores · Cables · Adaptadores" dice más que un "Desde $X" de la más barata de cuatro cosas distintas. */ .fixhub-cat-item.agrupada .fixhub-cat-tile-precio { font-size: 10.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Tarjetas grandes de dispositivo del Home — ver DISPOSITIVOS_DEFECTO más abajo. Admin sube una foto propia por dispositivo (Admin → Portada → Dispositivos, bucket "dispositivos-home"); mientras no exista, se muestra un ícono genérico de respaldo sobre fondo oscuro en vez de la foto. En pantallas chicas la fila se desliza en vez de apilarse (scroll horizontal con snap). */ /* Ancho real (no acotado a los 720px del hero) calculado en JS — ver "Las filas que van de borde a borde", mismo motivo y mismo mecanismo que #fixhub-marcas. */ /* Títulos de sección del Home (Dispositivos/Marcas) — ambas filas son full-bleed (sin padding lateral propio, el ancho real se resuelve en CSS, ver "Las filas que van de borde a borde"), así que el título va con su propio padding lateral para alinearse con el resto del contenido acotado (mismo criterio que usa #fixhub-categorias). */ /* 64px: mismo espaciado entre TODAS las secciones del Home (Ver catálogo → Categorías → Dispositivos → Marcas) — antes cada una tenía su propio margen chico y quedaban todas apretadas entre sí. */ .fixhub-seccion-titulo { font-size: 19px; font-weight: 700; color: var(--va); text-align: center; margin: 64px 0 0; padding: 0 16px; } /* Rayita corta centrada debajo del título — mismo acento morado que ya usa el resto del sitio (precios, botones), no un color nuevo. */ .fixhub-seccion-titulo::after { content: ''; display: block; width: 44px; height: 3px; background: #22d3ee; border-radius: 2px; margin: 8px auto 0; } #fixhub-dispositivos { display: flex; flex-wrap: nowrap; justify-content: center; gap: 14px; margin: 14px 0 0; /* overflow-y:hidden explícito a propósito: dejar solo overflow-x:auto hace que el navegador calcule overflow-y como "auto" también (mismo quirk de CSS que rompió el sticky del navbar antes) — sin esto, cualquier cosa que empuje el contenido 1px más alto de la cuenta puede hacer aparecer una barra de scroll vertical en esta fila puntual y correr todo lo de abajo ("Ver catálogo" para abajo pegando un salto), que es justo lo que se reportó al pasar el mouse por una tarjeta. */ overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding: 4px 4px 10px; -webkit-overflow-scrolling: touch; /* Ocultar la barra de scroll horizontal visualmente (sin desactivar el scroll): en Mac con mouse conectado, la barra "clásica" reserva espacio dentro de la fila mientras se interactúa con ella, lo que empuja "Ver catálogo" y todo lo de abajo hacia abajo justo al pasar el mouse por las tarjetas — el salto reportado. */ scrollbar-width: none; -ms-overflow-style: none; } #fixhub-dispositivos::-webkit-scrollbar { display: none; } #fixhub-dispositivos.oculto { display: none; } .fixhub-disp-item { position: relative; flex: 0 0 auto; scroll-snap-align: start; width: 190px; height: 240px; border-radius: var(--rl, 16px); overflow: hidden; border: 1px solid var(--vbor2); background: rgba(255,255,255,0.04); transition: border-color 0.15s var(--ease-apple, ease); } .fixhub-disp-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .fixhub-disp-icono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .fixhub-disp-icono i { font-size: 40px; color: var(--vtx3); } /* Scrim degradado abajo para que el nombre se lea encima de cualquier foto, clara u oscura — mismo truco que las tarjetas de categoría de spdigital.cl que sirvieron de referencia. */ .fixhub-disp-item span { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 14px; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75) 65%); color: #fff; font-size: 15px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,0.5); } /* ── Tira de marcas del Home (Samsung, Motorola, etc.) ── Solo vitrina, sin click ni texto: el logo (o las iniciales, mientras no se suba uno) alcanza para reconocer la marca. Se desplaza sola en loop, tipo cinta de logos — la lista se duplica en el JS y la animación recorre la mitad exacta, así el "salto" al volver al principio no se nota. Cada logo se sube directo al bucket "marcas-home" en Supabase Storage con nombre fijo (ver MARCAS_HOME más abajo). */ /* Edge-to-edge: .sel-emp-hero (el contenedor padre) tiene max-width:720px + padding propio para el resto del hero, así que para que la tira ocupe todo el ancho de la ventana hay que "romper" ese contenedor con el truco clásico de full-bleed (100vw + centrado con márgenes negativos), en vez de heredar el ancho acotado del resto de la sección. */ /* Full-bleed sin 100vw a propósito: 100vw cuenta el ancho de la barra de scroll como si fuera parte de la página, así que en Safari se pasaba del ancho real y generaba un scroll horizontal — el arreglo anterior (overflow-x:hidden en html/body) lo tapaba, pero de paso rompía el position:sticky del navbar (bug de Safari: overflow-x:hidden en un ancestro desactiva sticky en descendientes, aunque el que realmente scrollea siga siendo otro). En vez de eso, el ancho y el margen exacto se calculan en JS con medidas reales (ver _ajustarAnchoMarcas en el script de más abajo) y se aplican como estilo inline — cero dependencia de vw, cero necesidad de tocar overflow en ningún ancestro. */ #fixhub-marcas { overflow: hidden; margin: 14px 0 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } #fixhub-marcas.oculto { display: none; } .fixhub-marcas-tira { display: flex; gap: 16px; width: max-content; animation: fixhub-marcas-desplazar 30s linear infinite; } @keyframes fixhub-marcas-desplazar { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Fondo blanco fijo (no depende del tema oscuro/claro del sitio) — los logos de marca vienen pensados para ir sobre blanco y son oscuros o de un solo color (ej. Nokia), así que sobre el fondo oscuro normal de las tarjetas quedaban invisibles. Fue un gris medio un tiempo, para que la franja no cortara tanto con el resto del sitio. Ahora va el mismo blanco roto (#e6e6e6, un 10% de gris) y el mismo redondeo que las fichas de medios de pago, que están justo abajo — las dos tiras son lo mismo (una fila de logos ajenos sobre fondo claro) y se veía raro que una fuera gris y la otra blanca. Ese 10% le saca el filo al blanco puro contra el fondo negro sin que ningún logo oscuro pierda contraste. */ .fixhub-marca-circulo { flex: 0 0 auto; width: 96px; height: 56px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0,0,0,0.12); background: #e6e6e6; overflow: hidden; } .fixhub-marca-circulo img { width: 100%; height: 100%; object-fit: contain; padding: 10px 14px; } .fixhub-marca-circulo span { font-size: 13px; font-weight: 600; color: #565656; } /* ── Medios de pago del Home (último bloque, debajo de la tira de marcas) ── Sello de confianza: el que llegó hasta abajo ya sabe qué reparamos y con qué marcas trabajamos; lo que le falta es saber cómo va a pagar. A diferencia de la tira de marcas, acá la lista no está escrita en el código: son filas de la tabla medios_pago_home, que el admin agrega, ordena y elimina desde Administración → Portada. Era una lista fija de trece nombres y el logo hacía de interruptor, pero así no había forma de sacar de la vista los que no se usan ni de sumar uno que no estuviera en la lista. Si no queda ninguno, se esconde la sección entera, título incluido. */ /* Full-bleed como marcas y dispositivos (ver "Las filas que van de borde a borde"): .sel-emp-hero acota a 720px CON 40px de padding a cada lado, así que acá adentro quedaban 608px útiles y las seis fichas suman 616 — se caía una sola ficha a la segunda fila por ocho píxeles, con media pantalla vacía al lado. Ahora la fila mide contra la ventana y se acota sola, con tope propio para que en un monitor ancho no se estire en una tira de trece. */ #fixhub-pagos { margin: 16px 0 0; } #fixhub-pagos.oculto { display: none; } .fixhub-seccion-titulo.oculto { display: none; } .fixhub-pagos-fila { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; max-width: 1000px; margin: 0 auto; padding: 0 16px; } /* Fichas de caja fija, exactamente como los recuadros de la tira de marcas (.fixhub-marca-circulo): la caja manda y el logo se acomoda adentro con object-fit:contain. Antes era al revés — alto fijo y ancho libre — y como cada logo trae su propia proporción y su propio margen interno, la fila quedaba con fichas de todos los anchos y unos logos el doble de grandes que otros. Blancas, eso sí, claras igual que las marcas: estos logotipos (Webpay, Redcompra) están dibujados para fondo claro. Mismo blanco roto que la tira de arriba, ver .fixhub-marca-circulo. */ .fixhub-pago { flex: 0 0 auto; width: 96px; height: 52px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #e6e6e6; border: 1px solid rgba(0,0,0,0.10); } .fixhub-pago img { width: 100%; height: 100%; object-fit: contain; padding: 7px 10px; box-sizing: border-box; display: block; } /* Mismo ancho útil que la fila de fichas: el texto entra completo en una línea (mide 932px y ahí hay 968 disponibles), en vez de partirse en tres teniendo media pantalla libre al costado. Cuando la ventana no da —celulares, ventana angosta— parte igual, y text-wrap:balance le reparte parejas las líneas en vez de dejar una última con dos palabras sueltas. */ .fixhub-pagos-nota { margin: 14px auto 0; max-width: 1000px; padding: 0 16px; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--vtx3); text-wrap: balance; } @media (max-width: 640px) { .fixhub-pago { width: 82px; height: 46px; } .fixhub-pago img { padding: 6px 8px; } } /* ── Las filas que van de borde a borde ────────────────────────── Viven dentro de .sel-emp-hero, que está centrado y acotado a 720px, y tienen que escaparse de ese ancho. Esto se hacía en JavaScript: medir dónde caía cada fila y escribirle un width y un margin-left en pixeles, recalculando con un ResizeObserver. Funcionaba, pero era código corriendo cada vez que el navegador tocaba el layout — incluso al volver de otra pestaña, que es cuando Safari rehace el suyo. Ahí estaba el salto: un cálculo hecho en el peor momento, con medidas a medio asentar, moviendo seis elementos a la vez. Ahora no corre nada: es una cuenta de CSS que el navegador resuelve solo, en el mismo paso en que arma la página. 50% es la mitad del ancho útil del padre y 50vw la mitad de la ventana, así que la resta es exactamente lo que hay que salirse por cada lado. --barra-scroll corrige que vw incluya el ancho de la barra de scroll vertical y sobre justo eso (el motivo por el que 100vw estaba descartado); se mide una vez y se actualiza solo si cambia el tamaño de la ventana. Aunque quedara vieja, el overflow-x:clip del Home impide que la sobra se convierta en barra horizontal. */ #fixhub-carrusel, #fixhub-tira, #fixhub-categorias, #fixhub-dispositivos, #fixhub-marcas, #fixhub-pagos { margin-left: calc(50% - 50vw + var(--barra-scroll, 0px) / 2); margin-right: calc(50% - 50vw + var(--barra-scroll, 0px) / 2); } /* El carrusel, además, con ancho explícito: tiene aspect-ratio y max-height, así que con el ancho en auto el navegador lo achica para respetar el alto máximo (quedaba 1280 en una ventana de 1389) en vez de llenar y recortar, que es como se ve siempre. */ #fixhub-carrusel { width: calc(100vw - var(--barra-scroll, 0px)); } /* ── Tarjeta de reseñas de Google (estática, ver comentario junto al markup) — debajo de la tira de marcas, último elemento del Home antes del footer. ── */ /* El menú de Seguimiento, ahora colgado del navbar. Se ancla al borde DERECHO de su botón en vez de centrarse: centrado se salía de la pantalla, porque el botón está pegado al margen derecho. */ .vit-seg-en-nav .vit-acceso-menu { left: auto; right: 0; transform: none; animation: none; } /* ── "Sigue tu equipo" ─────────────────────────────────────────── */ /* El formulario vive en el Home (ver .tal-seg-suelto más abajo) y no en el navbar: como segunda fila de la barra se comía media pantalla antes de que empezara la página. Los campos y el botón no se cuelgan de .vit-nav por lo mismo — atados a la barra llegaban al Home sin un solo estilo, cajas blancas del sistema sobre fondo oscuro. */ .tal-barra-seg-campo { flex: 0 1 190px; min-width: 0; padding: 9px 13px; border: 1px solid var(--vbo, rgba(255,255,255,0.14)); border-radius: 9px; background: rgba(255,255,255,0.06); color: var(--vtx); font: inherit; font-size: 14.5px; } /* El campo del código escribe en mayúsculas —así lo guarda el comprobante— pero el TEXTO DE AYUDA no: heredaba el text-transform y se leía "CÓDIGO DE COMPROBANTE" a gritos. El de escribir se queda; el de ayudar, no. */ .tal-barra-seg-campo::placeholder { color: var(--vtx3); text-transform: none; } .tal-barra-seg-campo:focus { outline: none; border-color: var(--va); } .tal-barra-seg-btn { flex: 0 0 auto; padding: 9px 22px; border: 0; border-radius: 9px; background: linear-gradient(180deg, #b769c7, var(--color-accent-dark, #6a1b9a)); color: #fff; font: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer; } .tal-barra-seg-btn:hover { filter: brightness(1.07); } @media (max-width: 620px) { /* En el teléfono los dos campos se reparten una línea y el botón se lleva la siguiente: los tres juntos dejarían cada campo del ancho de dos letras. */ .tal-barra-seg-campo { flex: 1 1 calc(50% - 5px); } .tal-barra-seg-btn { flex: 1 1 100%; } } /* ── "Dónde estamos" en la barra de arriba ─────────────────────── */ /* La barra morada era bandera + aviso + bandera. Ahora lleva el acceso a la izquierda, así que el aviso se queda con el espacio del medio y las banderas se juntan a la derecha: si el acceso empujara desde un lado sin nada que lo equilibre, el aviso dejaría de estar centrado. */ .fx-tec .vit-donde-en-aviso { margin-right: auto; display: flex; } .fx-tec .vit-donde-en-aviso .vit-acceso { flex-direction: row; align-items: center; gap: 6px; padding: 2px 8px; font-size: 12px; color: inherit; } .fx-tec .vit-donde-en-aviso .vit-acceso svg { width: 15px; height: 15px; } /* El menú cuelga de una barra angosta: se ancla a la izquierda para no salirse por el borde de la pantalla. */ .fx-tec .vit-donde-en-aviso .vit-acceso-menu { left: 0; right: auto; transform: none; animation: none; text-align: left; } /* ── El pie ────────────────────────────────────────────────────── */ /* El sitio no tenía. Los textos legales y los medios de pago vivían arriba compitiendo con el banner, y son justo lo que se busca al final. */ /* La raya que cierra el Home (el borde de .sel-emp-header) se queda, pero sin el aire que la acompañaba: el pie quedó en dos filas cortas —los íconos del local y la letra chica legal— y va pegado a ella. */ .tal-pie { margin: 0; padding: 10px 20px 22px; } /* 44px pensados para cuando abajo seguía un pie con dos menús y la firma. Se toca solo acá porque la clase es compartida: en el selector de empresas del POS el hero sigue cerrando con su aire de siempre. */ #home-taller .sel-emp-hero { padding-bottom: 14px; } .tal-pie-dentro { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 10px; } /* Los dos accesos conservan su markup —para que sus menús sigan abriendo igual— pero acá son enlaces de pie, no baldosas: en fila, sin recuadro y en una línea. */ .tal-pie .vit-acceso { flex-direction: row; align-items: center; gap: 7px; padding: 8px 14px; font-size: 13.5px; } /* Abren hacia ARRIBA: colgando hacia abajo desde el pie, el menú queda fuera de la página. */ .tal-pie .vit-acceso-menu { top: auto; bottom: calc(100% - 6px); animation: none; } /* Los dos accesos del pie van en fila y del ancho de su texto. Su markup original está pensado para una grilla de columnas iguales, donde cada uno se estira; acá se estiraban al ancho entero y quedaban uno debajo del otro. */ .tal-pie .vit-acceso-wrap { flex: 0 0 auto; } .tal-pie .vit-acceso { flex: 0 0 auto; } /* ── El modal de seguimiento ───────────────────────────────────── */ /* Centrado y por encima de todo, que es lo que le faltaba a las dos formas anteriores: como menú quedaba abajo y angosto, y como página obligaba a poner la búsqueda en la dirección para poder volver a ella. Un modal se mira y se cierra, que es exactamente lo que se hace con el estado de una reparación. */ .tal-modal-seg { position: fixed; inset: 0; z-index: 400; /* sobre el navbar (260) y las páginas (250) */ display: grid; place-items: center; padding: 20px; } .tal-modal-seg[hidden] { display: none; } .tal-modal-seg-fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); } .tal-modal-seg-caja { position: relative; width: min(460px, 100%); max-height: min(80vh, 720px); overflow-y: auto; padding: 22px; border: 1px solid var(--vbo, rgba(255,255,255,0.14)); border-radius: 18px; background: linear-gradient(165deg, #201b24, #161616 62%); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); } .tal-modal-seg-titulo { margin: 0 0 14px; font-size: 21px; font-weight: 750; letter-spacing: -0.02em; color: var(--vtx); } .tal-modal-seg-cerrar { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--vbo, rgba(255,255,255,0.12)); border-radius: 9px; background: rgba(255,255,255,0.04); color: var(--vtx3); font-size: 17px; cursor: pointer; } .tal-modal-seg-cerrar:hover { color: var(--vtx); border-color: var(--va); } /* Con el modal abierto la página de atrás no se desplaza: si no, al rodar la rueda sobre el fondo se mueve lo de abajo y el modal queda flotando sobre otra cosa. */ body.tal-con-modal { overflow: hidden; } /* Con el resultado a la vista, los dos campos sobran: lo que preguntan ya se escribió en la barra de arriba. Vuelven con "Nueva búsqueda". El !important no es pereza: ese
lo arma agenda.js con sus estilos escritos EN LÍNEA (display:flex entre ellos), y un estilo en línea le gana a cualquier regla de hoja por específica que sea. La alternativa era sacarle los estilos en línea a una función que usan también el desplegable de "Repara aquí" y la agenda interna, y eso es mucho más riesgo por una línea de CSS. */ .tal-modal-seg .agenda-seg-buscador { display: none !important; } /* ── El local en la barra de arriba ────────────────────────────── */ /* Centrado: la barra es un flex de tres partes pensado para bandera + texto + bandera, donde el del medio se lleva el espacio sobrante. Acá hay una sola parte, así que toma ese papel — sin flex:1 quedaba pegada a la izquierda. */ .tal-aviso-local { flex: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 8px; font-size: 12.5px; line-height: 1.35; text-align: center; } .tal-aviso-local[hidden] { display: none; } .tal-aviso-sep { opacity: 0.5; } .tal-aviso-sep[hidden] { display: none; } @media (max-width: 620px) { /* En pantalla chica los dos datos se reparten en dos renglones, cada uno entero y centrado. Antes se escondía el horario, y un local sin horario a la vista obliga a buscarlo en otra parte — justo el dato que evita un viaje en vano. El separador se va: entre dos renglones no separa nada, cuelga. */ .tal-aviso-local { font-size: 11.5px; } .tal-aviso-local .tal-aviso-dato { flex: 1 1 100%; } .tal-aviso-local .tal-aviso-sep { display: none; } } /* ── Los enlaces del local, en el pie ──────────────────────────── */ /* Son los mismos elementos que estaban dentro del menú "Dónde estamos", con sus mismos id: _cargarInfoEmpresa les pone la dirección real de cada red al llegar los datos. Acá cambia solo cómo se reparten. */ /* Los íconos van primero, pegados a la línea de arriba, y los dos enlaces legales debajo: son letra chica de cierre, no un acceso que haya que ofrecer antes que el WhatsApp o el mapa. */ .tal-pie-legal { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--vtx3); } .tal-pie-legal a { color: var(--vtx3); text-decoration: none; } .tal-pie-legal a:hover { color: var(--vtx); text-decoration: underline; } .tal-pie-legal span { margin: 0 6px; opacity: 0.6; } .tal-pie-redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; /* La línea de abajo la trae .vit-acceso-redes, que en su lugar de origen separa los íconos de lo que viene después. Acá abajo ya no viene nada. */ border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } /* El acceso a Carcasas del navbar es un —lleva a /carcasas, así que tiene que poder abrirse en otra pestaña—, y el navegador le pone subrayado a los enlaces. Sus vecinos son