/* ───────────────────────────────────────────────────────────── Google Places autocomplete — estilo Gowy (componente) El dropdown (.pac-container) lo inyecta Google en , por eso estas reglas son globales. Las usa cualquier pantalla que monte el autocomplete vía components/places-autocomplete.js (cst.neworder, ssn.signup.03.complete, etc.). Todo con tokens. ───────────────────────────────────────────────────────────── */ .pac-container { box-sizing: border-box; margin-top: 6px; background: var(--color-surface); border: 0.5px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .7); font-family: var(--font-body); overflow: hidden; } /* Cada predicción en dos líneas: la dirección principal (calle) grande y clara arriba, y el resto (ciudad, región, país) más pequeño debajo. La estructura la provee Google: .pac-item-query = texto principal y el texto secundario es el nodo de texto final del .pac-item. El ícono va absoluto para que ambas líneas queden alineadas a su derecha. */ .pac-container .pac-item { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: 2px; padding: 10px 14px 10px 42px; border-top: 0.5px solid var(--color-border); color: var(--color-secondary); /* segunda línea (texto secundario) */ font-family: var(--font-body); font-size: 12px; line-height: 1.35; cursor: pointer; } .pac-container .pac-item:first-child { border-top: 0; } .pac-container .pac-item:hover, .pac-container .pac-item-selected { background: var(--color-surface-2); } /* Oculta el sprite de Google y usa un ícono de Material Symbols */ .pac-container .pac-icon { display: none; } .pac-container .pac-item::before { content: 'location_on'; position: absolute; left: 14px; top: 11px; font-family: 'Material Symbols Outlined'; font-size: 18px; color: var(--color-muted); } /* Dirección principal → ocupa toda la primera línea, grande y clara */ .pac-container .pac-item-query { flex: 1 1 100%; font-size: 16px; color: var(--color-on-surface); } .pac-container .pac-matched { color: var(--color-on-surface); font-weight: 700; } /* Primera opción: "Ubicación actual" (una sola línea) */ .pac-container .gowy-pac-current { flex-wrap: nowrap; align-items: center; gap: 10px; padding: 12px 14px; color: var(--color-on-surface); font-weight: 500; } .pac-container .gowy-pac-current::before { content: none; } /* sin el location_on genérico */ .gowy-pac-current__icon { color: var(--color-primary); font-size: 20px; } .gowy-pac-current__txt { font-size: 16px; }