que uno agregue. Intentar convivir con eso desde index-ios.css no funcionó. Acá se resuelve de otra forma: 1. Namespace propio: TODO usa el prefijo `etiq-`, que no aparece en ningún otro archivo del proyecto. Ojo: `lpq-` NO servía, ya lo usa css/components.css (.lpq-btn). 2. Clase raíz `.etiq` en cada contenedor. Abajo hay un reset que apaga lo que hereda del CSS viejo, y recién después se construye. 3. Esta hoja se carga ÚLTIMA en el , después de index-ios.css. ESPECIFICIDAD — la regla de la casa El reset es `#andesmarForm .etiq :is(div, p, span, …)` = (0,1,1,1). Para que un componente le gane hay que escribirlo `#andesmarForm .etiq .etiq-loquesea` = (0,1,2,0). Por eso TODOS los selectores de acá repiten `.etiq`. Si agregás una regla con una sola clase, el reset te la pisa y parece que "no anda". Los controles son componentes de Shoelace: su interior es shadow DOM y el CSS viejo no lo alcanza. Por eso el markup no tiene ni un nativo — es la forma más barata de estar a salvo. Los colores salen de los tokens de acá abajo, con su variante oscura. No dependen de --ios-* ni de que Shoelace tenga cargado su tema oscuro. =========================================================================== */ /* --- Shoelace, de vuelta a vainilla ---------------------------------------- */ /* css/index-ios.css:35-50 REDEFINE los tokens propios de Shoelace sobre body[data-page="etiquetado"] para darle look iOS: alto 44 px, radio 12 px, primary celeste, fuente Inter. Eso hereda en TODOS los componentes de la página, así que los míos no eran vainilla ni de casualidad. Acá se reponen los valores reales de Shoelace 2.15.1 (sacados de su themes/light.css). Los tokens de segundo nivel que aparecen a la derecha —--sl-color-sky-*, --sl-color-neutral-*, --sl-font-size-*— NO los pisa la página, así que resuelven solos y no hay que hardcodear ningún color. */ #andesmarForm .etiq { --sl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --sl-border-radius-small: 0.1875rem; --sl-border-radius-medium: 0.25rem; --sl-border-radius-large: 0.5rem; --sl-color-primary-500: var(--sl-color-sky-500); --sl-color-primary-600: var(--sl-color-sky-600); --sl-color-primary-700: var(--sl-color-sky-700); --sl-input-height-medium: 2.5rem; --sl-input-border-radius-medium: var(--sl-border-radius-medium); --sl-input-border-color: var(--sl-color-neutral-300); --sl-input-border-color-hover: var(--sl-color-neutral-400); --sl-input-background-color: var(--sl-color-neutral-0); --sl-input-font-size-medium: var(--sl-font-size-medium); --sl-focus-ring-color: var(--sl-color-primary-600); --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%); font-family: var(--sl-font-sans); } /* En oscuro la página no carga el tema dark de Shoelace, así que los tokens de input se mapean a los míos: si no, quedan campos blancos sobre fondo oscuro. */ [data-theme="dark"] #andesmarForm .etiq { --sl-input-background-color: var(--etiq-bg); --sl-input-border-color: var(--etiq-line); --sl-input-border-color-hover: var(--etiq-fg-soft); --sl-input-color: var(--etiq-fg); --sl-input-label-color: var(--etiq-fg); --sl-input-placeholder-color: var(--etiq-fg-soft); } /* --- Tokens ---------------------------------------------------------------- */ #andesmarForm .etiq { --etiq-bg: #ffffff; --etiq-bg-soft: #f5f5f7; --etiq-fg: #1c1c1e; --etiq-fg-soft: #6b7280; --etiq-line: rgba(60, 60, 67, 0.14); --etiq-accent: #007aff; --etiq-ok-fg: #1f9d4d; --etiq-ok-bg: rgba(52, 199, 89, 0.12); --etiq-bad-fg: #d70015; --etiq-bad-bg: rgba(255, 59, 48, 0.1); --etiq-accent-bg: rgba(0, 122, 255, 0.06); --etiq-accent-line: rgba(0, 122, 255, 0.28); --etiq-radius: 8px; --etiq-gap: 10px; } [data-theme="dark"] #andesmarForm .etiq { --etiq-bg: #1c1c1e; --etiq-bg-soft: #2c2c2e; --etiq-fg: #f2f2f7; --etiq-fg-soft: #aeaeb2; --etiq-line: rgba(255, 255, 255, 0.12); --etiq-accent: #0a84ff; --etiq-accent-bg: rgba(10, 132, 255, 0.12); --etiq-accent-line: rgba(10, 132, 255, 0.35); --etiq-ok-fg: #30d158; --etiq-ok-bg: rgba(48, 209, 88, 0.16); --etiq-bad-fg: #ff6961; --etiq-bad-bg: rgba(255, 69, 58, 0.16); } /* --- Reset ----------------------------------------------------------------- */ /* Apaga lo que el CSS viejo le mete a los elementos planos de adentro. NO toca `display` a propósito: `.hidden { display:none !important }` de index-ios.css es lo que esconde .PisoyDepto y .Andrean, y tiene que seguir funcionando. */ #andesmarForm .etiq :is( div, p, span, h1, h2, h3, h4, h5, h6, ul, ol, li, code, small, strong, label, article, section ) { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font: inherit; color: inherit; text-align: inherit; text-transform: none; letter-spacing: normal; line-height: 1.35; } #andesmarForm .etiq, #andesmarForm .etiq *, #andesmarForm .etiq *::before, #andesmarForm .etiq *::after { box-sizing: border-box; } /* Lo mismo para el HOST de los componentes de Shoelace. El interior es shadow DOM y está a salvo, pero el host es un elemento común y el CSS viejo le pega por id, sin ningún scope. Los que había: styles.css:890 #observaciones -> borde punteado celeste, height 6rem y text-transform:lowercase, que se heredaba adentro y ponía el label en minúscula styles.css:256 #localidad -> height 38px styles.css:260 #codigoPostalDestinatario -> height 38px styles.css:17994 #andesmarForm #pisolDestinatario / #deptoDestinatario -> width y max-width con !important Van con !important porque esa última tiene dos ids + !important y no hay selector razonable que le gane de otra forma. Se listan solo las propiedades que el CSS viejo abusa: `display`, `font` y `color` quedan afuera para que los componentes sigan heredando y para que las reglas de más abajo puedan mandar. sl-icon también queda afuera: su tamaño ES el font-size y lo fijo por componente. */ #andesmarForm .etiq :is( sl-input, sl-select, sl-textarea, sl-details, sl-divider, sl-badge, sl-button, sl-icon-button, sl-spinner, sl-tooltip ) { margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; text-transform: none !important; letter-spacing: normal !important; float: none !important; } /* Los controles ocupan el ancho de su celda de la grilla. */ #andesmarForm .etiq :is(sl-input, sl-select, sl-textarea) { display: block !important; width: 100% !important; max-width: 100% !important; } /* --- Card ------------------------------------------------------------------ */ #andesmarForm .etiq.etiq-card { width: 100%; color: var(--etiq-fg); font-size: 0.85rem; --border-color: var(--etiq-line); --border-radius: var(--etiq-radius); --padding: 12px; } #andesmarForm .etiq.etiq-card::part(base) { background: var(--etiq-bg); box-shadow: none; } #andesmarForm .etiq.etiq-card::part(header) { padding: 8px 12px; border-bottom-color: var(--etiq-line); } #andesmarForm .etiq.etiq-card::part(body) { display: flex; flex-direction: column; gap: var(--etiq-gap); } /* --- Encabezado ------------------------------------------------------------ */ #andesmarForm .etiq .etiq-head { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 700; color: var(--etiq-fg); } #andesmarForm .etiq .etiq-step { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; border-radius: 4px; background: var(--etiq-accent); color: #fff; font-size: 0.68rem; font-weight: 700; } #andesmarForm .etiq .etiq-title { flex: 1 1 auto; min-width: 0; } #andesmarForm .etiq .etiq-info { flex: none; font-size: 0.95rem; color: var(--etiq-fg-soft); cursor: help; } /* --- Grilla de campos ------------------------------------------------------ */ #andesmarForm .etiq .etiq-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--etiq-gap); align-items: start; } /* Los hijos de grid arrancan con min-width:auto: un mail largo estira la celda y saca la página de cuadro. */ #andesmarForm .etiq .etiq-row > * { min-width: 0; } /* .PisoyDepto también trae .etiq-stack. Ojo: css/styles.css:217 le pone `display:flex; justify-content:space-between` y padding + borde punteado azul. El borde y el padding los mata el reset; el flex en fila hay que darlo vuelta acá, y fijar justify-content porque el reset no toca propiedades de layout. */ #andesmarForm .etiq .etiq-stack { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--etiq-gap); } @media (max-width: 560px) { #andesmarForm .etiq .etiq-row { grid-template-columns: 1fr; } } /* El combobox del sl-select lo pinta css/index-ios.css:408 con el look iOS (radio 12 px, min-height 44 px, fondo --ios-bg-card), y le gana a un selector corto. Se lo devuelve a lo que Shoelace calcularía con sus propios tokens. OJO con el min-height: adentro, Shoelace lo pone en `var(--sl-input-height-{size})`, que es exactamente lo que hace que el select mida igual que un sl-input. Ponerlo en `auto` para matar los 44 px de la regla vieja lo dejaba MÁS BAJO que los inputs de al lado. Va el token, no `auto`. */ body[data-page="etiquetado"] #andesmarForm .etiq sl-select::part(combobox) { min-height: var(--sl-input-height-medium); border-radius: var(--sl-input-border-radius-medium); border-color: var(--sl-input-border-color); background: var(--sl-input-background-color); } /* Por si alguna vez se le cambia el tamaño a un select de estas secciones. */ body[data-page="etiquetado"] #andesmarForm .etiq sl-select[size="small"]::part(combobox) { min-height: var(--sl-input-height-small); border-radius: var(--sl-input-border-radius-small); } body[data-page="etiquetado"] #andesmarForm .etiq sl-select[size="large"]::part(combobox) { min-height: var(--sl-input-height-large); border-radius: var(--sl-input-border-radius-large); } body[data-page="etiquetado"] #andesmarForm .etiq sl-select::part(combobox):hover { border-color: var(--sl-input-border-color-hover); } /* Una regla ::part del documento le gana a la interna del componente, así que al fijar border-color arriba me llevaba puesto el foco y el hover propios del sl-select. Se reponen acá con los mismos tokens que usa Shoelace, para que el select se comporte igual que los sl-input de al lado. */ body[data-page="etiquetado"] #andesmarForm .etiq sl-select[open]::part(combobox), body[data-page="etiquetado"] #andesmarForm .etiq sl-select:focus-within::part(combobox) { border-color: var(--sl-input-border-color-focus); box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color); } /* --- Cobertura del CP ------------------------------------------------------ */ /* verificarCP() alterna el id de ESTE MISMO

entre respuesta2 (hay cobertura) y respuestaNegativa (no hay). Los dos ids ya tienen reglas en index-ios.css: se les gana con el prefijo body[...] + .etiq + el tipo. */ body[data-page="etiquetado"] #andesmarForm .etiq p#respuesta2, body[data-page="etiquetado"] #andesmarForm .etiq p#respuestaNegativa { display: block; padding: 5px 9px; border-radius: 6px; font-size: 0.72rem; font-weight: 600; line-height: 1.3; } body[data-page="etiquetado"] #andesmarForm .etiq p#respuesta2 { color: var(--etiq-ok-fg); background: var(--etiq-ok-bg); } body[data-page="etiquetado"] #andesmarForm .etiq p#respuestaNegativa { color: var(--etiq-bad-fg); background: var(--etiq-bad-bg); } body[data-page="etiquetado"] #andesmarForm .etiq p#respuesta2:empty, body[data-page="etiquetado"] #andesmarForm .etiq p#respuestaNegativa:empty { display: none; } /* --- Localidad: autocompletado propio -------------------------------------- */ #andesmarForm .etiq .etiq-ac { position: relative; min-width: 0; } /* El desplegable. Es un

nuestro, no un componente: va pintado a mano. Lo llena js/localidades.js con

. */ #andesmarForm .etiq .etiq-ac-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); max-height: 220px; overflow-y: auto; background: var(--etiq-bg); border: 1px solid var(--etiq-line); border-radius: var(--etiq-radius); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } #andesmarForm .etiq .etiq-ac-list:empty { display: none; } #andesmarForm .etiq .etiq-ac-list .sugerencia { padding: 7px 10px; font-size: 0.78rem; color: var(--etiq-fg); cursor: pointer; } #andesmarForm .etiq .etiq-ac-list .sugerencia:hover { background: var(--etiq-bg-soft); } /* El botón de limpiar pasó al slot suffix del sl-input: hay que deshacerle el position:absolute que traía de cuando era un encima de un input nativo. */ #andesmarForm .etiq .etiq-ac .clear-button { position: static; transform: none; width: auto; height: auto; } #andesmarForm .etiq .etiq-ac .clear-button::before { content: none; } #andesmarForm .etiq #loadingSpinner { font-size: 0.8rem; --track-width: 2px; --indicator-color: var(--etiq-accent); } /* Provincia: la completa js/localidades.js al elegir una localidad. */ #andesmarForm .etiq .etiq-prov { font-size: 0.74rem; font-weight: 600; color: var(--etiq-accent); } #andesmarForm .etiq .provincia:has(.etiq-prov:empty) { display: none; } /* --- Recuadro de Andreani (piso / depto / e-mail) --------------------------- */ /* Antes era una etiqueta suelta arriba de los campos y no se entendía a qué se refería. Ahora los envuelve un recuadro teñido con el título adentro, así se ve de una que Piso, Depto y E-mail son solo para Andreani. El recuadro se esconde solo: js/localidades.js le saca .hidden a .Andrean y a .PisoyDepto AL MISMO TIEMPO, así que con :has(> .hidden) alcanza y no hay que tocar ese archivo. */ #andesmarForm .etiq .etiq-andreani { display: flex; flex-direction: column; gap: var(--etiq-gap); padding: 10px 12px; border: 1px solid var(--etiq-accent-line); border-radius: var(--etiq-radius); background: var(--etiq-accent-bg); } #andesmarForm .etiq .etiq-andreani:has(> .hidden) { display: none; } #andesmarForm .etiq .etiq-andreani-tit { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; color: var(--etiq-accent); } #andesmarForm .etiq .etiq-andreani-tit sl-icon { flex: none; font-size: 0.85rem; } /* El espejo de observaciones repetía palabra por palabra lo que ya muestra el textarea, con caja punteada propia (css/styles.css:17745). Queda en el DOM porque actualizarMensajePersonalizado() le escribe, pero no se ve. */ #andesmarForm .etiq #mensajePersonalizado { display: none; } /* --- Opciones de envío ------------------------------------------------------ */ #andesmarForm .etiq .etiq-details::part(base) { border: 0; background: transparent; } #andesmarForm .etiq .etiq-details::part(header) { padding: 0; } #andesmarForm .etiq .etiq-details::part(content) { padding: 10px 0 0; } #andesmarForm .etiq .etiq-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--etiq-gap); align-items: start; } @media (max-width: 560px) { #andesmarForm .etiq .etiq-opciones { grid-template-columns: 1fr; } } #andesmarForm .etiq .etiq-group { display: flex; flex-direction: column; gap: var(--etiq-gap); min-width: 0; } #andesmarForm .etiq .etiq-group-title { display: flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--etiq-fg-soft); } #andesmarForm .etiq .etiq-group-title sl-icon { font-size: 0.9rem; color: var(--etiq-accent); } /* =========================================================================== SUGERENCIAS DEL BUSCADOR DE SKU Markup: js/script.js -> crearCardResultadoProductoLiquidIndex(). El contenedor cuelga de .e3-sku-search-liquid-index, que ya es position: relative con z-index 60 (css/index-ios.css:676) y no se toca. =========================================================================== */ #andesmarForm .etiq.etiq-sku-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); max-height: 320px; overflow-y: auto; padding: 4px; color: var(--etiq-fg); font-size: 0.85rem; background: var(--etiq-bg); border: 1px solid var(--etiq-line); border-radius: var(--etiq-radius); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } #andesmarForm .etiq.etiq-sku-list:empty { display: none; } /* Estados de la búsqueda (los escribe script.js con las clases viejas). */ #andesmarForm .etiq :is( .e3-result-loading-liquid-index, .e3-result-empty-liquid-index, .e3-result-error-liquid-index ) { padding: 10px; font-size: 0.78rem; color: var(--etiq-fg-soft); } #andesmarForm .etiq .e3-result-error-liquid-index { color: var(--etiq-bad-fg); } #andesmarForm .etiq .etiq-sku-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: 6px; } #andesmarForm .etiq .etiq-sku-card + .etiq-sku-card { border-top: 1px solid var(--etiq-line); } #andesmarForm .etiq .etiq-sku-card:hover { background: var(--etiq-bg-soft); } /* Miniatura. El ícono de reserva está siempre en el DOM y lo tapa la foto; si la imagen 404, el onerror marca .is-error y se invierte. */ #andesmarForm .etiq .etiq-sku-media { width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--etiq-line); border-radius: 6px; /* Blanco fijo a propósito: las fotos de producto vienen recortadas sobre blanco y en modo oscuro una tarjeta gris las deja con un halo. */ background: #fff; } #andesmarForm .etiq .etiq-sku-img { width: 100%; height: 100%; object-fit: contain; display: block; } #andesmarForm .etiq .etiq-sku-ph { display: none; font-size: 1.2rem; color: var(--etiq-fg-soft); } #andesmarForm .etiq .etiq-sku-media.is-error { background: var(--etiq-bg-soft); } #andesmarForm .etiq .etiq-sku-media.is-error .etiq-sku-img { display: none; } #andesmarForm .etiq .etiq-sku-media.is-error .etiq-sku-ph { display: block; } #andesmarForm .etiq .etiq-sku-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* Un nombre largo se corta, no estira la fila. */ #andesmarForm .etiq .etiq-sku-name { font-size: 0.8rem; font-weight: 600; color: var(--etiq-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #andesmarForm .etiq .etiq-sku-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } #andesmarForm .etiq .etiq-sku-code { padding: 1px 5px; border-radius: 4px; border: 1px solid var(--etiq-line); background: var(--etiq-bg-soft); color: var(--etiq-fg-soft); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.7rem; overflow-wrap: anywhere; } #andesmarForm .etiq .etiq-sku-meta sl-badge::part(base) { font-size: 0.6rem; font-weight: 700; } #andesmarForm .etiq .etiq-sku-dims { font-size: 0.7rem; color: var(--etiq-fg-soft); overflow-wrap: anywhere; } #andesmarForm .etiq .etiq-sku-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; } #andesmarForm .etiq .etiq-sku-price { font-size: 0.8rem; font-weight: 700; color: var(--etiq-fg); white-space: nowrap; } @media (max-width: 560px) { #andesmarForm .etiq .etiq-sku-card { grid-template-columns: 56px minmax(0, 1fr); } #andesmarForm .etiq .etiq-sku-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; } } /* =========================================================================== SECCIÓN 3 — PRODUCTO & BULTOS + MEDIDAS DE BULTOS --------------------------------------------------------------------------- Los renglones de bulto los arma window.etiqBultoHTML() en js/script.js, que es la plantilla ÚNICA que usan los cuatro generadores (los tres de script.js y el de bultos.js). El primero está escrito a mano en index.html y tiene que quedar idéntico al que genera esa función. =========================================================================== */ /* Fila de tres campos: bultos / peso / valor declarado. */ #andesmarForm .etiq .etiq-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 560px) { #andesmarForm .etiq .etiq-row--3 { grid-template-columns: 1fr; } } /* --- Volumen calculado ----------------------------------------------------- */ #andesmarForm .etiq .etiq-vol { display: grid; grid-template-columns: 1fr 1fr; gap: var(--etiq-gap); } #andesmarForm .etiq .etiq-vol-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--etiq-line); border-radius: var(--etiq-radius); background: var(--etiq-bg-soft); } #andesmarForm .etiq .etiq-vol-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--etiq-fg-soft); } #andesmarForm .etiq .etiq-vol-value { font-size: 1.15rem; font-weight: 700; color: var(--etiq-fg); font-variant-numeric: tabular-nums; } /* --- Renglones de bulto ---------------------------------------------------- */ #andesmarForm .etiq .etiq-bultos { display: flex; flex-direction: column; gap: 8px; } /* Tarjeta liviana: borde fino y fondo del papel. El relleno gris hacía que dos bultos seguidos se leyeran como un bloque sólido. */ body[data-page="etiquetado"] #andesmarForm #medidasBultosContainer .etiq-bulto { padding: 10px 12px; border: 1px solid var(--etiq-line); border-radius: var(--etiq-radius); background: var(--etiq-bg); color: var(--etiq-fg); } #andesmarForm .etiq .etiq-bulto-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } #andesmarForm .etiq .etiq-bulto-title { flex: 1 1 auto; min-width: 0; font-size: 0.75rem; font-weight: 600; color: var(--etiq-fg-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Los bultos que vienen de E3 parten el título en SKU + (Bulto N). */ #andesmarForm .etiq .bultoTitleSku-liquid-index { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; color: var(--etiq-fg); } #andesmarForm .etiq .bultoTitleTag-liquid-index { margin-left: 4px; font-weight: 500; } #andesmarForm .etiq .etiq-bulto-sub { margin: -4px 0 8px; font-size: 0.72rem; color: var(--etiq-fg-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* css/styles.css:18280 y css/index-ios.css:629 le dibujan un "×" con ::before al .removeBultoButton. Ahora es un que ya trae su propio ícono, así que ese pseudo-elemento salía COMO UNA SEGUNDA CRUZ al lado del tacho. */ #andesmarForm .etiq .removeBultoButton::before, #andesmarForm .etiq .removeBultoButton::after { content: none !important; display: none !important; } #andesmarForm .etiq .etiq-bulto-del { flex: none; font-size: 0.9rem; color: var(--etiq-fg-soft); } #andesmarForm .etiq .etiq-bulto-del:hover { color: var(--etiq-bad-fg); } /* Alto · Ancho · Largo · Cantidad. Abajo de 560 px, dos y dos. */ #andesmarForm .etiq .etiq-bulto-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } @media (max-width: 560px) { #andesmarForm .etiq .etiq-bulto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* En la grilla de 4 el label de Shoelace a tamaño completo pesa más que el campo: se lo baja a etiqueta de apoyo. */ #andesmarForm .etiq .etiq-bulto-grid sl-input::part(form-control-label) { font-size: 0.7rem; font-weight: 600; color: var(--etiq-fg-soft); } /* --- Acciones -------------------------------------------------------------- */ #andesmarForm .etiq .etiq-bultos-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* position:relative ya se lo da css/index-ios.css:735 al .addBultoE3-form-liquid-index; acá solo se acomodan el input y los dos botones en una fila que envuelve. */ #andesmarForm .etiq .etiq-addE3-form { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } #andesmarForm .etiq .etiq-addE3-form sl-input { flex: 1 1 200px; min-width: 0; } /* El reset le puso width:100% !important a los sl-input; acá el del SKU inline va en una fila con dos botones, así que necesita ancho flexible. */ #andesmarForm .etiq .etiq-addE3-form sl-input { width: auto !important; } /* --- Botones de la sección de bultos, de vuelta a vainilla ------------------ */ /* css/index-ios.css:1287-1300 le pinta el host y el ::part(base) a esos dos botones por id (color --ios-blue, radio 12 px). Al ser 2 ids hay que igualar y sumar la clase para ganarle. Se reponen los valores que Shoelace calcularía. */ body[data-page="etiquetado"] #andesmarForm .etiq sl-button#addBultoButton::part(base), body[data-page="etiquetado"] #andesmarForm .etiq sl-button#addBultoE3Button::part(base) { border-radius: var(--sl-input-border-radius-medium); color: var(--sl-color-neutral-700); } /* --- La lista de sugerencias tiene que pintar sobre lo de abajo ------------- */ /* Las cards de Cotizaciones y Acciones son position:relative con z-index 1 (css/index-ios.css:1825). La grilla del formulario no tenía z-index, así que iba por debajo y el desplegable del buscador de SKU quedaba tapado. Se le da a la grilla un contexto propio, arriba de esas dos y abajo de Opciones (que usa 30). */ body[data-page="etiquetado"] #andesmarForm-grid-index { position: relative; } /* El form de "Agregar bulto de E3" ya es relative con z-index 2000 (css/styles.css:19021): su lista sube con él. */ /* --- Correcciones de especificidad: reglas viejas con DOS ids ---------------- */ /* css/styles.css:18133 y css/index-ios.css:559 configuran el contenedor de bultos con `#andesmarForm #medidasBultosContainer` (2 ids), que le gana tanto al reset como a .etiq-bultos. De ahí salían el margen de 1rem que dejaba un hueco arriba del primer bulto y un gap de 12-16 px entre renglones. */ body[data-page="etiquetado"] #andesmarForm #medidasBultosContainer { margin-top: 0; gap: 8px; } /* La lista de sugerencias tiene que pintar sobre TODO lo que viene después. La card de Opciones de envío es z-index 30 (css/index-ios.css:1821), así que con la grilla en 20 le pasaba por encima al desplegable. Va 40. Los sl-select de Opciones usan `hoist`, o sea que su listbox sale del flujo y no le afecta que esta grilla quede más arriba. */ body[data-page="etiquetado"] #andesmarForm-grid-index { z-index: 40; } /* Y la card no tiene que recortar lo que se le sale por abajo. */ #andesmarForm .etiq.etiq-card::part(base) { overflow: visible; } /* =========================================================================== ACCIONES — Generar etiquetas --------------------------------------------------------------------------- Los wrappers llevan .etiq no por el reset sino por los TOKENS: css/index-ios.css:44 pisa --sl-input-border-radius-medium a 12 px para toda la página, y adentro de .etiq vuelve al 0.25rem de Shoelace. Por eso acá no hace falta ni un border-radius escrito a mano — los botones ya salen con el radio del resto del formulario. #tokenResultBox queda FUERA de .etiq a propósito: tiene estilo propio en css/index-ios.css:1414 y el reset se lo comería. =========================================================================== */ #andesmarForm .etiq.etiq-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } /* Los botones miden lo que mide su contenido. Antes el principal tenía flex: 1 1 240px y se comía todo el renglón. */ #andesmarForm .etiq.etiq-acciones sl-button { flex: 0 0 auto; } #andesmarForm .etiq.etiq-ind { display: flex; flex-direction: column; /* Sin esto la columna estira a los hijos y el botón del token salía de punta a punta. Los que sí tienen que ocupar el ancho lo piden ellos (.etiq-sep). */ align-items: flex-start; gap: 12px; margin-top: 12px; } #andesmarForm .etiq.etiq-ind > .etiq-sep, #andesmarForm .etiq.etiq-ind > .etiq-carriers { align-self: stretch; } /* --- Separador con título --------------------------------------------------- La línea a los dos lados del texto. Lo usan "Opciones para desarrollador" y cualquier corte de sección que necesite un rótulo en el medio. */ #andesmarForm .etiq .etiq-sep { display: flex; align-items: center; gap: 10px; } #andesmarForm .etiq .etiq-sep::before, #andesmarForm .etiq .etiq-sep::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--etiq-line); } #andesmarForm .etiq .etiq-sep-label { flex: none; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--etiq-fg-soft); } #andesmarForm .etiq .etiq-carriers { display: flex; flex-wrap: wrap; gap: 8px; } /* El logo del transportista, chico y pegado al texto. */ #andesmarForm .etiq .etiq-carriers sl-button::part(base) { justify-content: flex-start; gap: 8px; } #andesmarForm .etiq .etiq-carriers sl-button img { width: 18px; height: 18px; object-fit: contain; } /* =========================================================================== CARGA — tapar el FOUC de Shoelace --------------------------------------------------------------------------- Hasta que el autoloader define los componentes, un es un elemento desconocido sin contenido: las cards se ven vacías y el formulario parece roto. La página usa 12 componentes distintos, así que se esconde el bloque entero y se muestra una rueda hasta que estén todos. El ocultamiento es 100% CSS y esta hoja está en el : no hay un frame con el formulario roto. Lo que hace el JS (js/script.js) es solo destapar, poniéndole .etiq-listo al . visibility y no display: el layout se calcula igual, así que la página no pega un salto de alto al aparecer. =========================================================================== */ body[data-page="etiquetado"]:not(.etiq-listo) #andesmarForm-wrapper-index { visibility: hidden; } body[data-page="etiquetado"] #andesmarForm-wrapper-index { position: relative; } #andesmarForm .etiq.etiq-cargando { display: none; } /* visibility:visible revierte el hidden del padre solo para el overlay. */ body[data-page="etiquetado"]:not(.etiq-listo) #andesmarForm .etiq.etiq-cargando { visibility: visible; position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; padding-top: 140px; } #andesmarForm .etiq .etiq-cargando-rueda { width: 26px; height: 26px; border: 3px solid var(--etiq-line); border-top-color: var(--etiq-accent); border-radius: 50%; animation: etiq-girar 0.7s linear infinite; } @keyframes etiq-girar { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #andesmarForm .etiq .etiq-cargando-rueda { animation: none; } } #andesmarForm .etiq .etiq-cargando-txt { font-size: 0.8rem; color: var(--etiq-fg-soft); } /* ── SKU con medida propia cargada ──────────────────────────────────────── El SKU está en "Medidas base LogiPaq": al agregarlo NO se usan las medidas del catálogo que muestra la tarjeta, sino las cargadas a mano. Se avisa acá para que el operador no crea que el formulario le cambió los números solo. Especificidad: el reset de esta hoja es (0,1,1,1), así que todo componente va con dos clases detrás del id — ver el encabezado del archivo. */ #andesmarForm .etiq .etiq-sku-lp::part(base) { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 600; } #andesmarForm .etiq .etiq-sku-dims.is-reemplazado { color: var(--etiq-fg-soft); text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.75; }