/* CSS compartido del modulo "envio local" (cotizador /v2/nuevo-envio + crear envio /v2/crear-envio) — un solo documento porque ambas pantallas son pasos del mismo flujo y comparten componentes visuales. Reutiliza los tokens de v2/app.css; algunas clases genericas (.field-label, .field-input, .card-title) se redefinen aqui porque cada modulo v2 carga su propio css (mismo patron que el resto de paginas v2). */ .field-label { display: block; font-size: 12px; font-weight: 600; color: var(--tx-base); margin-bottom: 6px; } .field-input { width: 100%; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; font: 13.5px var(--font); color: var(--tx-strong); background: var(--bg-card); } .field-input::placeholder { color: var(--tx-faint); } .field-input--readonly { background: var(--bg-hover); color: var(--tx-muted); cursor: not-allowed; } .field-required { color: var(--red); } .t-faint { color: var(--tx-faint); } .card-title { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--tx-strong); } /* Texto tipo link, secundario (usado en Origen y en Paquete) */ .text-toggle { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--tx-muted); } /* Switch envio / encargo (arriba del cotizador, PageNuevoEnvioV2) */ .quote-mode-switch { display: inline-flex; gap: 4px; margin-bottom: 20px; padding: 4px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-card); } .qms-opt { border: none; background: none; cursor: pointer; padding: 8px 14px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; color: var(--tx-muted); } .qms-opt:hover { background: var(--bg-hover); } .qms-opt.is-active { background: var(--orange); color: #fff; } .qms-opt.is-active:hover { background: var(--orange); } /* Punto de color (badge de tarjeta, dot de ruta) */ .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .dot--green { background: var(--green); } .dot--orange { background: var(--orange); } .dot--blue { background: var(--blue); } .dot--faint { background: var(--tx-faint); } .dot--amber { background: var(--amber); } .dot--red { background: var(--red); } /* ============================================================ Cotizador (/v2/nuevo-envio) ============================================================ */ /* autocomplete-map-search-g (v1) renderiza clases bootstrap (.input-group, .form-control, .btn-outline-secondary) que esta pagina no carga — se sobreescriben aqui con los tokens de v2/app.css para que coincidan con el resto de la maqueta (.field-input / .addr-tool-btn) */ .fc-body .autocomplete { position: relative; } .fc-body .input-group { display: flex; align-items: stretch; gap: 8px; } .fc-body .input-group .form-control { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; font: 13.5px var(--font); color: var(--tx-strong); background: var(--bg-card); } .fc-body .input-group .form-control::placeholder { color: var(--tx-faint); } .fc-body .input-group-append { display: flex; gap: 6px; } .fc-body .btn-outline-secondary { width: 40px; height: 40px; flex-shrink: 0; cursor: pointer; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-card); color: var(--tx-base); display: flex; align-items: center; justify-content: center; } .fc-body .btn-outline-secondary:hover { background: var(--bg-hover); } .fc-body .btn-outline-secondary.btn-more-options { width: auto; padding: 0 12px; gap: 6px; font-size: 12px; font-weight: 600; color: var(--tx-muted); } .fc-body .blockquote-footer { margin-top: 6px; font-size: 11.5px; color: var(--tx-muted); } /* Boton "IA" del buscador y modal de busqueda con IA (quote-full-address-ia, quote-full-address) montados con mode="ep-btn" — misma logica que el bloque de arriba, clases .ep-* solo existen en app.css (v1, no cargado aqui) */ .fc-body .ep-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; } .fc-body .ep-btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } .fc-body .ep-btn-primary { background: var(--orange); border-color: var(--orange); color: #fff; } .fc-body .ep-btn-primary:hover:not(:disabled) { background: var(--orange-d); border-color: var(--orange-d); } .fc-body .ep-btn-outline-primary { background: transparent; border-color: var(--orange); color: var(--orange); } .fc-body .ep-btn-outline-primary:hover:not(:disabled) { background: var(--orange); color: #fff; } .fc-body .ep-btn-sm { padding: 5px 10px; font-size: 11.5px; border-radius: 6px; } .fc-body .ep-btn-icon { padding: 0; width: 28px; height: 28px; font-size: 12px; } .fc-body .ep-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .22); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 1050; display: flex; align-items: center; justify-content: center; } .fc-body .ep-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); width: 480px; max-width: calc(100vw - 32px); max-height: calc(100vh - 120px); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0, 0, 0, .16), 0 2px 8px rgba(0, 0, 0, .08); } .fc-body .ep-modal-header { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0; } .fc-body .ep-modal-title { font-size: 16px; font-weight: 800; color: var(--tx-strong); letter-spacing: -.03em; } .fc-body .ep-modal-sub { font-size: 11.5px; color: var(--tx-muted); margin-top: 3px; } .fc-body .ep-modal-close { width: 28px; height: 28px; background: var(--bg-hover); border: none; border-radius: var(--r-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--tx-muted); flex-shrink: 0; line-height: 1; transition: background .12s; } .fc-body .ep-modal-close:hover { background: var(--border); } .fc-body .ep-modal-body { padding: 18px 22px; overflow-y: auto; flex: 1; min-height: 0; } .fc-body .ep-modal-footer { padding: 12px 22px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-shrink: 0; } .fc-body .ep-modal-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tx-faint); display: block; margin-bottom: 8px; } .fc-body .ep-modal-error { font-size: 11.5px; color: var(--red); margin-top: 6px; font-weight: 600; } .fc-body .ep-modal-input-wrap { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--bg-app); } .fc-body .ep-modal-input-wrap .ep-modal-input-icon { padding: 0 12px; color: var(--tx-muted); font-size: 13px; flex-shrink: 0; } .fc-body .ep-modal-input-wrap .form-control { border: none; border-radius: 0; font-size: 13px; padding: 9px 10px; box-shadow: none; color: var(--tx-strong); flex: 1; } .fc-body .ep-modal-btn { border: none; border-radius: var(--r-sm); padding: 7px 16px; font-size: .8rem; font-weight: 600; cursor: pointer; } .fc-body .ep-modal-btn:disabled { opacity: .6; cursor: not-allowed; } .fc-body .ep-modal-btn.ep-modal-btn-ghost { background: transparent; color: var(--tx-muted); } .fc-body .ep-modal-btn.ep-modal-btn-ghost:hover:not(:disabled) { background: var(--bg-hover); } .fc-body .ep-modal-btn.ep-modal-btn-primary { background: var(--orange); color: #fff; } .fc-body .ep-modal-btn.ep-modal-btn-primary:hover:not(:disabled) { background: var(--orange-d); } /* Barra de progreso de pasos */ .quote-progress { display: flex; align-items: center; margin: 28px 0 24px; } .qp-step { display: flex; align-items: center; gap: 8px; } .qp-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--bg-hover); color: var(--tx-faint); flex-shrink: 0; } .qp-step.is-done .qp-dot { background: var(--green); color: #fff; } .qp-step.is-active .qp-dot { background: var(--orange); color: #fff; } .qp-label { font-size: 12.5px; font-weight: 600; color: var(--tx-faint); } .qp-step.is-done .qp-label, .qp-step.is-active .qp-label { color: var(--tx-strong); } .qp-line { flex: 1; height: 2px; background: var(--border); margin: 0 10px; min-width: 24px; } /* Layout de 2 columnas: flujo + panel lateral */ .quote-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; } .flow-stack { display: flex; flex-direction: column; gap: 16px; } .side-stack { display: flex; flex-direction: column; gap: 16px; } /* Tarjeta de cada paso del flujo */ .flow-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 20px; } .flow-card.is-locked { opacity: .5; } .fc-head { display: flex; align-items: center; gap: 14px; } .fc-icon { width: 40px; height: 40px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fc-icon svg { width: 19px; height: 19px; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .fc-icon--green { background: var(--green-bg); } .fc-icon--green svg { stroke: var(--green); } .fc-icon--orange { background: var(--orange-bg); } .fc-icon--orange svg { stroke: var(--orange-d); } .fc-icon--muted { background: var(--bg-hover); } .fc-icon--muted svg { stroke: var(--tx-faint); } .fc-title { flex: 1; } .fc-title h2 { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--tx-strong); } .fc-title p { margin: 2px 0 0; font-size: 12.5px; color: var(--tx-muted); } .fc-body { margin-top: 16px; } .fc-summary { margin-top: 14px; padding: 12px 14px; background: var(--bg-app); border-radius: var(--r-md); font-size: 12.5px; color: var(--tx-base); } .fc-summary .addr { color: var(--tx-strong); font-weight: 600; } .fc-summary .meta { display: block; margin-top: 3px; color: var(--tx-muted); } /* Tarjeta compacta de seccion ya completada (Destino/Paquete confirmados) */ .fc-done-row { display: flex; align-items: center; gap: 10px; } .fc-done-icon { width: 32px; height: 32px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fc-done-icon svg { width: 15px; height: 15px; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .fc-done-label { flex: 1; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--tx-muted); } .fc-done-change { font-size: 12px; font-weight: 700; color: var(--orange-d); cursor: pointer; } .fc-done-value { margin: 8px 0 0; font-size: 13.5px; font-weight: 700; color: var(--tx-strong); line-height: 1.4; } .pickup-note { display: flex; gap: 10px; align-items: flex-start; background: var(--orange-bg); border-radius: var(--r-md); padding: 10px 12px; font-size: 12.5px; color: var(--tx-base); } .pickup-note svg { width: 16px; height: 16px; stroke: var(--orange-d); flex-shrink: 0; margin-top: 1px; } .pickup-note b { color: var(--tx-strong); } .addr-row { display: flex; gap: 8px; } .addr-row .field-input { flex: 1; } .addr-tool-btn { width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--bg-card); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .addr-tool-btn svg { width: 16px; height: 16px; stroke: var(--tx-base); stroke-width: 2; } .cobertura-ok { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; background: var(--green-bg); border-radius: var(--r-md); font-size: 12.5px; color: var(--green); font-weight: 600; } .cobertura-ok svg { width: 16px; height: 16px; stroke: var(--green); stroke-width: 2.4; flex-shrink: 0; } .cobertura-out { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; background: var(--red-bg); border-radius: var(--r-md); font-size: 12.5px; color: var(--red); font-weight: 600; } .cobertura-out svg { width: 16px; height: 16px; stroke: var(--red); stroke-width: 2.4; flex-shrink: 0; } /* Dias de servicio de la zona de cada direccion (origen/destino) */ .days-available { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 10px 12px; background: var(--bg-app); border-radius: var(--r-md); font-size: 12.5px; } .days-available__label { color: var(--tx-muted); } .days-available__value { color: var(--tx-base); font-weight: 600; } /* Mapa origen/destino (MapQuoterV2.vue): marcador + circulo del radio permitido */ .gmap-quoter { margin-top: 14px; } .gmap-quoter__map { width: 100%; height: 220px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); } .gmap-quoter__coords { font-size: 11px; color: var(--tx-faint); font-family: monospace; } .gmap-quoter__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; } .gmap-quoter__gmaps { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--orange-d); white-space: nowrap; } .gmap-quoter__gmaps:hover { color: var(--orange-d); text-decoration: underline; } .gmap-quoter__gmaps i { margin-left: 3px; font-size: 10px; } /* Grid de tamanos de paquete */ .pkg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .pkg-opt { border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 12px; text-align: center; background: var(--bg-card); cursor: pointer; } .pkg-opt.is-selected { border-color: var(--orange); background: var(--orange-bg); } .pkg-icon { width: 34px; height: 34px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; } .pkg-icon svg { width: 22px; height: 22px; stroke: var(--tx-base); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; } .pkg-opt.is-selected .pkg-icon svg { stroke: var(--orange-d); } .pkg-name { display: block; font-size: 12.5px; font-weight: 700; color: var(--tx-strong); } .pkg-cap { display: block; font-size: 11px; color: var(--tx-muted); margin-top: 2px; } /* Panel lateral: herramientas + resultado */ .side-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 18px; } .side-card h3 { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: var(--tx-strong); } .side-card .sub { font-size: 12px; color: var(--tx-muted); } .tool-link { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-top: 1px solid var(--border); margin-top: 12px; } .tool-link:first-of-type { margin-top: 14px; } .tool-icon { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--bg-hover); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tool-icon svg { width: 16px; height: 16px; stroke: var(--tx-base); stroke-width: 2; fill: none; } .tool-body { flex: 1; min-width: 0; } .tool-title { font-size: 12.5px; font-weight: 600; color: var(--tx-strong); } .tool-desc { font-size: 11.5px; color: var(--tx-muted); margin-top: 1px; } .tool-arrow { color: var(--tx-faint); font-size: 13px; } .svc-no-coverage { background: var(--red-bg); border: 1px solid #FECACA; border-radius: var(--r-md); padding: 14px; } .svc-no-coverage-title { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--red); } .svc-no-coverage-sub { margin: 0; font-size: 12.5px; color: var(--tx-base); line-height: 1.5; } .svc-no-coverage-sub a { font-weight: 700; color: var(--red); text-decoration: underline; } .svc-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .svc-opt { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 14px; cursor: pointer; transition: border-color .12s, background .12s; } .svc-opt:hover { border-color: var(--orange); } .svc-opt.is-selected { border-color: var(--orange); background: var(--orange-bg); } .svc-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: border-color .12s; } .svc-opt.is-selected .svc-radio { border-color: var(--orange); } .svc-opt.is-selected .svc-radio::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); } .svc-name { font-size: 13.5px; font-weight: 700; color: var(--tx-strong); } .svc-eta { font-size: 12px; color: var(--tx-muted); margin-top: 2px; } .svc-price { font-size: 16px; font-weight: 800; color: var(--tx-strong); flex-shrink: 0; } .svc-opt.is-selected .svc-price { color: var(--orange-d); } /* Switches (vincular con recoleccion de hoy / recoleccion express) */ .switch-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; } .switch-label { font-size: 12px; font-weight: 400; color: var(--tx-base); line-height: 1.4; } .ep-switch { position: relative; display: inline-block; flex-shrink: 0; margin-top: 1px; } .ep-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .ep-switch-track { display: block; width: 34px; height: 20px; padding: 2px; border-radius: var(--r-pill); background: var(--border); transition: background .15s; } .ep-switch-thumb { display: block; width: 16px; height: 16px; margin: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; } .ep-switch input:checked ~ .ep-switch-track { background: var(--orange); } .ep-switch input:checked ~ .ep-switch-track .ep-switch-thumb { transform: translateX(14px); } .ep-switch input:disabled ~ .ep-switch-track { opacity: .5; cursor: not-allowed; } .ep-switch input:disabled { cursor: not-allowed; } .svc-econ { display: flex; margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; } .svc-econ-cell { flex: 1; } .svc-econ-cell span { display: block; font-size: 11px; color: var(--tx-muted); } .svc-econ-cell b { font-size: 14px; color: var(--tx-strong); } .svc-econ-cell.profit b { color: var(--green); } /* ============================================================ Crear envio (/v2/crear-envio) ============================================================ */ /* Layout de 2 columnas: formulario + resumen. La tarjeta de cada seccion reutiliza los globales .card/.card-body de v2/app.css (misma receta que tenia .ce-card/.ce-card__body, se elimino la duplicacion). */ .ship-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; } .ce-form { display: flex; flex-direction: column; gap: 16px; } .ce-required-note { font-size: 12px; color: var(--tx-muted); margin-bottom: 4px; } .ce-card__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .ce-card__title { flex: 1; } .ce-card__title h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--tx-strong); } .ce-card__title p { margin: 2px 0 0; font-size: 12px; color: var(--tx-muted); } .ce-readonly { padding: 12px 14px; background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--r-md); } .ce-readonly__name { font-size: 13.5px; font-weight: 700; color: var(--tx-strong); display: flex; align-items: center; gap: 6px; } .ce-readonly__icon { font-size: 14px; } .ce-readonly__addr { font-size: 12.5px; color: var(--tx-muted); margin-top: 4px; line-height: 1.5; } .ce-readonly__name + .ce-readonly__addr { margin-top: 6px; } .ce-adjust-link { font-size: 12px; font-weight: 700; color: var(--orange-d); cursor: pointer; white-space: nowrap; } .colonia-box { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md); border: 1.5px solid var(--border); background: var(--bg-card); transition: border-color .12s, background .12s; } .colonia-box--ready { border-color: var(--green); background: var(--green-bg); } .colonia-box__status { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--tx-muted); margin-bottom: 6px; } .colonia-box__ready-label { color: var(--green); } .colonia-box__hint { margin: 6px 0 0; font-size: 11.5px; color: var(--tx-muted); } .colonia-box--ready .colonia-box__hint { color: var(--green); } .ce-map-placeholder { margin-top: 14px; height: 160px; border-radius: var(--r-md); background: var(--bg-app); border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--tx-faint); } .ce-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ce-grid--20-80 { grid-template-columns: 1fr 4fr; } .ce-grid--80-20 { grid-template-columns: 4fr 1fr; } .ce-email { margin-top: 10px; } .ce-email__toggle { font-size: 12px; font-weight: 600; color: var(--orange-d); background: none; border: none; cursor: pointer; padding: 0; } .ce-email__head { display: flex; align-items: center; justify-content: space-between; } .ce-email__head .field-label { margin-bottom: 0; } .ce-extra { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); cursor: pointer; } .ce-extra:first-child { border-top: none; padding-top: 0; } .ce-extra__label { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--tx-base); } .ce-extra__cost { font-size: 12.5px; font-weight: 700; color: var(--tx-strong); } /* Barra de acciones (precio + cancelar + crear guia) */ .ship-actions { display: flex; align-items: center; gap: 12px; } .ship-actions__price { flex: 1; } .ship-actions__price-label { display: block; font-size: 11px; color: var(--tx-muted); } .ship-actions__price-value { font-size: 18px; font-weight: 800; color: var(--tx-strong); } .ship-actions__cancel { background: var(--bg-hover); color: var(--tx-base); } /* Resumen lateral */ .ship-summary { position: sticky; top: 20px; } .ship-route { display: flex; flex-direction: column; gap: 6px; } .ship-route__node { display: flex; align-items: flex-start; gap: 10px; } .ship-route__node .dot { margin-top: 3px; } .ship-route__cp { font-size: 12.5px; color: var(--tx-base); line-height: 1.4; } .ship-route__arrow { font-size: 13px; color: var(--tx-faint); padding-left: 3px; } .ship-specs { margin: 14px 0; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .ship-specs div { display: flex; justify-content: space-between; font-size: 12.5px; } .ship-specs dt { color: var(--tx-muted); } .ship-specs dd { margin: 0; font-weight: 600; color: var(--tx-strong); } .ce-price { display: flex; justify-content: space-between; align-items: baseline; } .ce-price__label { font-size: 12.5px; color: var(--tx-muted); } .ce-price__value { font-size: 22px; font-weight: 800; color: var(--tx-strong); } .ce-price-sub { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--tx-muted); } .ce-price-sub b { color: var(--tx-strong); } /* Selector de productos de inventario (shop-items-picker-v2) -- movido a v2/app.css, es un componente compartido sin