/* ============================================================================ index-ios.css — Rediseño iOS de la hoja index (Centro de Etiquetado) Carga DESPUÉS de styles.css: sus reglas ganan (deshace el look viejo de index). Scopeado a body[data-page="etiquetado"] para no afectar otras páginas. Stack: Bootstrap 5 + Shoelace 2.15.1 + esta capa iOS. Regla de oro: SIN sombras paralelas. Superficies planas, borde hairline, esquinas redondeadas, una sola sombra muy sutil como máximo. ---------------------------------------------------------------------------- SECCIÓN 1 (form): toggle, header, grid, remitente, destinatario, producto/bultos, volumen, bultos, botones. (Secciones 2/3 se agregan luego.) ========================================================================== */ body[data-page="etiquetado"] { /* ---- Tokens iOS ---- */ --ios-bg-card: #ffffff; --ios-bg-soft: #f5f6f8; --ios-bg-inset: #f2f2f7; --ios-border: rgba(60, 60, 67, 0.12); --ios-border-strong: rgba(60, 60, 67, 0.22); --ios-text: #1c1c1e; --ios-text-2: #6b7280; --ios-text-3: #9aa0a6; --ios-blue: #007aff; --ios-blue-soft: rgba(0, 122, 255, 0.1); --ios-green: #34c759; --ios-red: #ff3b30; --ios-orange: #ff9500; --ios-radius-sm: 10px; --ios-radius: 14px; --ios-radius-lg: 20px; --ios-radius-xl: 26px; --ios-shadow: 0 1px 2px rgba(17, 24, 39, 0.04); --ios-gap: 14px; /* ---- Shoelace re-tematizado para que matchee el look iOS ---- */ --sl-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --sl-border-radius-small: 8px; --sl-border-radius-medium: 12px; --sl-border-radius-large: 16px; --sl-color-primary-500: #1a86ff; --sl-color-primary-600: #007aff; --sl-color-primary-700: #0066d6; --sl-input-height-medium: 44px; --sl-input-border-radius-medium: 12px; --sl-input-border-color: var(--ios-border); --sl-input-border-color-hover: var(--ios-border-strong); --sl-input-background-color: #fff; --sl-input-font-size-medium: 0.84rem; --sl-focus-ring-color: rgba(0, 122, 255, 0.35); --sl-input-focus-ring-color: rgba(0, 122, 255, 0.25); font-family: var(--sl-font-sans); color: var(--ios-text); /* Fondo producteca (blobs) un poco más fuerte. Sin animación. */ background: radial-gradient(60vw 55vh at 8% 12%, rgba(125, 166, 255, 0.45), transparent 60%), radial-gradient(55vw 50vh at 92% 18%, rgba(255, 153, 204, 0.36), transparent 62%), radial-gradient(50vw 55vh at 50% 95%, rgba(168, 139, 250, 0.36), transparent 65%), radial-gradient(40vw 45vh at 95% 80%, rgba(134, 239, 172, 0.3), transparent 65%), radial-gradient(35vw 40vh at 5% 85%, rgba(253, 224, 71, 0.28), transparent 65%), linear-gradient(180deg, #eef3fb 0%, #e0e9f5 100%); background-attachment: fixed; min-height: 100vh; } /* =========================================================================== MODO OSCURO — redefino los tokens iOS; mis reglas usan var(--ios-*) así que todo se adapta solo. theme-toggle.js setea [data-theme="dark"] en . =========================================================================== */ [data-theme="dark"] body[data-page="etiquetado"] { --ios-bg-card: #1c1c1e; --ios-bg-soft: #161618; --ios-bg-inset: #2c2c2e; --ios-border: rgba(255, 255, 255, 0.1); --ios-border-strong: rgba(255, 255, 255, 0.2); --ios-text: #f2f2f7; --ios-text-2: #aeaeb2; --ios-text-3: #8e8e93; --ios-blue: #0a84ff; --ios-blue-soft: rgba(10, 132, 255, 0.2); --sl-input-background-color: #1c1c1e; --sl-input-border-color: rgba(255, 255, 255, 0.1); color: var(--ios-text); /* Dark: blobs producteca dark. Sin animación. */ background: radial-gradient(60vw 55vh at 8% 12%, rgba(56, 114, 255, 0.32), transparent 60%), radial-gradient(55vw 50vh at 92% 18%, rgba(236, 72, 153, 0.24), transparent 62%), radial-gradient(50vw 55vh at 50% 95%, rgba(139, 92, 246, 0.3), transparent 65%), radial-gradient(40vw 45vh at 95% 80%, rgba(20, 184, 166, 0.2), transparent 65%), radial-gradient(35vw 40vh at 5% 85%, rgba(251, 146, 60, 0.16), transparent 65%), linear-gradient(180deg, #0b1120 0%, #0f172a 100%); background-attachment: fixed; } /* Animación del fondo (flujo lento del gradiente). Liviana + reduced-motion. */ @keyframes bgFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (prefers-reduced-motion: reduce) { body[data-page="etiquetado"] { animation: none !important; } } /* Wrapper estilo producteca (container mt-5 pt-5 napse-shell-container napse-cards-container producteca-cards-container). Replico las clases acá porque index no carga napse.css/producteca.css. */ body.producteca-body .napse-shell-container { max-width: 1140px; margin-left: auto; margin-right: auto; } body.producteca-body .napse-cards-container { padding-left: 24px !important; padding-right: 24px !important; } body.producteca-body .producteca-cards-container { position: relative; padding-bottom: 56px; } body.producteca-body #andesmarForm { width: 100%; /* Override del glass viejo (form { background: rgba(...,.45) !important; blur }) */ background: #ffffff !important; border: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 22px; padding: 18px; } /* Dark: panel del form oscuro (no blanco) */ [data-theme="dark"] body.producteca-body #andesmarForm { background: #161a22 !important; } /* =========================================================================== TOGGLE (segmented control iOS) Etiquetado | Historial =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .historial-index-toggle-container { display: flex; justify-content: center; margin: 8px auto 22px; } body[data-page="etiquetado"] #andesmarForm .historial-index-toggle-inner { display: inline-flex; gap: 4px; padding: 4px; background: rgba(118, 118, 128, 0.12); border-radius: 999px; backdrop-filter: saturate(180%) blur(8px); } body[data-page="etiquetado"] #andesmarForm .historial-index-toggle-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ios-text-2); font-weight: 600; font-size: 0.9rem; padding: 9px 20px; border-radius: 999px; cursor: pointer; transition: all 0.18s ease; } body[data-page="etiquetado"] #andesmarForm .historial-index-toggle-btn i { font-size: 1rem; } body[data-page="etiquetado"] #andesmarForm .historial-index-toggle-btn.active { background: var(--ios-bg-card); color: var(--ios-blue); box-shadow: var(--ios-shadow); } /* =========================================================================== HEADER del formulario =========================================================================== */ body[data-page="etiquetado"] #andesmarForm-header-index { text-align: center; margin-bottom: 22px; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-badge-index { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 600; color: var(--ios-blue); background: var(--ios-blue-soft); padding: 6px 14px; border-radius: 999px; margin-bottom: 10px; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-title-index { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--ios-text); } body[data-page="etiquetado"] #andesmarForm .andesmarForm-subtitle-index { max-width: 640px; margin: 0 auto; color: var(--ios-text-2); font-size: 0.92rem; line-height: 1.5; } /* =========================================================================== GRID principal (2 columnas → 1 en mobile) =========================================================================== */ body[data-page="etiquetado"] #andesmarForm-grid-index { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-column-index { display: flex; flex-direction: column; gap: 18px; } @media (max-width: 900px) { body[data-page="etiquetado"] #andesmarForm-grid-index { grid-template-columns: 1fr; } } /* =========================================================================== CARD (sección iOS) — superficie plana, borde hairline, sin sombras paralelas =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .andesmarForm-card-index { position: relative; background: var(--ios-bg-card); border: none; border-radius: var(--ios-radius-lg); padding: 22px 22px 24px; box-shadow: none; } /* "Paso 1/2/3" — círculo numerado azul Apple, dentro del título de sección */ body[data-page="etiquetado"] #andesmarForm .paso-num { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50%; background: var(--ios-blue); color: #fff; font-size: 0.8rem; font-weight: 700; flex: 0 0 auto; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-section-title-index { display: flex; align-items: center; gap: 9px; font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ios-text); margin: 0 0 4px; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-section-title-index i { color: var(--ios-blue); font-size: 1.05rem; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-section-header-inline-index { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-chip-index { font-size: 0.72rem; font-weight: 600; color: var(--ios-text-2); background: var(--ios-bg-inset); border-radius: 999px; padding: 5px 12px; white-space: nowrap; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-subsection-subtitle-index { color: var(--ios-text-2); font-size: 0.85rem; margin: 0 0 14px; } /* ---- Texto explicativo (info) bajo títulos/campos ---- */ body[data-page="etiquetado"] #andesmarForm .ios-help { font-size: 0.78rem; color: var(--ios-text-2); line-height: 1.45; margin: 2px 0 14px; } body[data-page="etiquetado"] #andesmarForm .ios-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ios-bg-inset); color: var(--ios-text-2); font-size: 0.72rem; cursor: help; border: 0; margin-left: 4px; vertical-align: middle; } body[data-page="etiquetado"] #andesmarForm .ios-info-btn:hover { background: var(--ios-blue-soft); color: var(--ios-blue); } /* =========================================================================== FIELDS / ROWS =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .andesmarForm-row-index { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ios-gap); } body[data-page="etiquetado"] #andesmarForm .andesmarForm-row-3-index { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--ios-gap); } body[data-page="etiquetado"] #andesmarForm .andesmarForm-field-index { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-row-index .andesmarForm-field-index, body[data-page="etiquetado"] #andesmarForm .andesmarForm-row-3-index .andesmarForm-field-index { margin-bottom: 0; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-label-index { display: block; height: 18px; line-height: 18px; font-size: 0.82rem; font-weight: 600; color: var(--ios-text-2); margin: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-label-index i { color: var(--ios-text-3); font-size: 0.85rem; } /* ---- Inputs nativos estilados como Shoelace/iOS (matchean sl-select) ---- */ body[data-page="etiquetado"] #andesmarForm .andesmarForm-control-index { width: 100%; height: 44px; padding: 0 14px; font-size: 0.95rem; font-family: var(--sl-font-sans); color: var(--ios-text); background: var(--ios-bg-card); border: 1px solid var(--ios-border); border-radius: 12px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; -webkit-appearance: none; appearance: none; } body[data-page="etiquetado"] textarea.andesmarForm-control-index { height: auto; min-height: 80px; padding: 12px 14px; line-height: 1.45; resize: vertical; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-control-index::placeholder { color: var(--ios-text-3); } body[data-page="etiquetado"] #andesmarForm .andesmarForm-control-index:hover { border-color: var(--ios-border-strong); } body[data-page="etiquetado"] #andesmarForm .andesmarForm-control-index:focus { border-color: var(--ios-blue); box-shadow: 0 0 0 3px var(--ios-blue-soft); } body[data-page="etiquetado"] #andesmarForm .andesmarForm-control-index[readonly] { background: var(--ios-bg-inset); color: var(--ios-text-2); } /* ---- sl-select iOS ---- */ body[data-page="etiquetado"] #andesmarForm sl-select::part(combobox) { border-radius: 12px; border-color: var(--ios-border); min-height: 44px; background: var(--ios-bg-card); } body[data-page="etiquetado"] #andesmarForm sl-select::part(combobox):hover { border-color: var(--ios-border-strong); } /* =========================================================================== LOCALIDAD (autocomplete) + provincia + mensajes CP =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .andesmarForm-localidad-wrapper-index { position: relative; } body[data-page="etiquetado"] #andesmarForm .clear-button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--ios-bg-inset); color: var(--ios-text-2); font-size: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; } body[data-page="etiquetado"] #andesmarForm .clear-button::before { content: "×"; font-size: 0.95rem; line-height: 1; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-spinner-localidad-index { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); color: var(--ios-blue); } body[data-page="etiquetado"] #andesmarForm .lista-localidades { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); background: var(--ios-bg-card); border: 1px solid var(--ios-border); border-radius: var(--ios-radius); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07); max-height: 240px; overflow-y: auto; } body[data-page="etiquetado"] #andesmarForm .lista-localidades:empty { display: none; } body[data-page="etiquetado"] #andesmarForm .lista-localidades div, body[data-page="etiquetado"] #andesmarForm .lista-localidades li, body[data-page="etiquetado"] #andesmarForm .lista-localidades .sugerencia { padding: 10px 14px; font-size: 0.88rem; cursor: pointer; color: var(--ios-text) !important; background: transparent; } body[data-page="etiquetado"] #andesmarForm .lista-localidades div:hover, body[data-page="etiquetado"] #andesmarForm .lista-localidades li:hover { background: var(--ios-blue-soft); } body[data-page="etiquetado"] #andesmarForm .andesmarForm-provincia-label-index { font-size: 0.82rem; font-weight: 600; color: var(--ios-blue); margin: -6px 0 12px; min-height: 0; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-provincia-label-index:empty { margin: 0; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-cpMsg-index { font-size: 0.78rem; margin: 4px 0 0; color: var(--ios-red); } body[data-page="etiquetado"] #andesmarForm .andesmarForm-cpMsg-index:empty { display: none; } /* Andreani opcional toggle */ body[data-page="etiquetado"] #andesmarForm .andesmarForm-andreaniToggle-index { display: inline-flex; align-items: center; font-size: 0.82rem; font-weight: 600; color: var(--ios-blue); background: var(--ios-blue-soft); box-shadow: none; padding: 6px 14px; border-radius: 999px; cursor: pointer; margin: 10px 0 6px; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-andreaniToggle-index span { color: var(--ios-blue); } body[data-page="etiquetado"] #andesmarForm .hidden { display: none !important; } /* =========================================================================== VOLUMEN (chips) =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .andesmarForm-volumen-wrapper-index { display: flex; gap: 10px; margin-top: 10px; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-volumen-card-index { flex: 1; display: flex; flex-direction: column; gap: 2px; background: var(--ios-bg-inset); border-radius: 14px; padding: 12px 14px; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-volumen-label-index { font-size: 0.72rem; font-weight: 600; color: var(--ios-text-2); text-transform: uppercase; letter-spacing: 0.02em; } /* Las imágenes m3/cm3 quedaban feas/rotas: fuera */ body[data-page="etiquetado"] #andesmarForm .andesmarForm-volumen-label-index img { display: none; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-volumen-value-index { font-size: 1.25rem; font-weight: 700; color: var(--ios-text); letter-spacing: -0.01em; } /* =========================================================================== BULTOS (medidas) — nativo, estilado iOS =========================================================================== */ body[data-page="etiquetado"] #andesmarForm #medidasBultosContainer { display: flex; flex-direction: column; gap: 12px; } body[data-page="etiquetado"] #andesmarForm #medidasBultosContainer .bulto { position: relative; background: var(--ios-bg-inset); border: none; border-radius: var(--ios-radius); padding: 14px 16px 16px; } body[data-page="etiquetado"] #andesmarForm .bultoTitle { font-size: 0.85rem; font-weight: 700; color: var(--ios-text); margin: 0 0 10px; } body[data-page="etiquetado"] #andesmarForm .bultoDescripccion { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; margin-bottom: 6px; } body[data-page="etiquetado"] #andesmarForm .bultoDescripccion label { font-size: 0.72rem; font-weight: 600; color: var(--ios-text-2); margin: 0; } body[data-page="etiquetado"] #andesmarForm .bultoImput { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; } body[data-page="etiquetado"] #andesmarForm .bultoImput input { width: 100%; height: 42px; padding: 0 12px; font-size: 0.92rem; font-family: var(--sl-font-sans); color: var(--ios-text); background: var(--ios-bg-card); border: 1px solid var(--ios-border); border-radius: 10px; outline: none; -webkit-appearance: none; appearance: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } body[data-page="etiquetado"] #andesmarForm .bultoImput input:focus { border-color: var(--ios-blue); box-shadow: 0 0 0 3px var(--ios-blue-soft); } body[data-page="etiquetado"] #andesmarForm .removeBultoButton.andesmarForm-bulto-remove-index { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255, 59, 48, 0.1); color: var(--ios-red); cursor: pointer; font-size: 0; display: flex; align-items: center; justify-content: center; } body[data-page="etiquetado"] #andesmarForm .removeBultoButton.andesmarForm-bulto-remove-index::before { content: "×"; font-family: inherit; font-size: 1.2rem; line-height: 1; } body[data-page="etiquetado"] #andesmarForm .removeBultoButton.andesmarForm-bulto-remove-index:hover { background: var(--ios-red); color: #fff; } /* =========================================================================== BOTONES agregar bulto =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .andesmarForm-addBulto-wrapper-liquid-index { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-addBulto-btn-index, body[data-page="etiquetado"] #andesmarForm .andesmarForm-addBulto-btn-index2 { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--ios-border); background: var(--ios-bg-card); color: var(--ios-blue); font-weight: 600; font-size: 0.85rem; padding: 10px 16px; border-radius: 12px; cursor: pointer; transition: all 0.15s ease; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-addBulto-btn-index:hover, body[data-page="etiquetado"] #andesmarForm .andesmarForm-addBulto-btn-index2:hover { background: var(--ios-blue-soft); border-color: var(--ios-blue); } body[data-page="etiquetado"] #andesmarForm .addBultoE3-inline-liquid-index { position: relative; } /* =========================================================================== BUSCADOR SKU E3 =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .e3-sku-search-liquid-index { position: relative; z-index: 60; margin-bottom: 16px; } body[data-page="etiquetado"] #andesmarForm .e3-sku-label-liquid-index { margin-bottom: 6px; } body[data-page="etiquetado"] #andesmarForm .e3-sku-input-wrapper-liquid-index { position: relative; display: flex; gap: 8px; align-items: center; } body[data-page="etiquetado"] #andesmarForm .e3-sku-input-liquid-index { flex: 1; } body[data-page="etiquetado"] #andesmarForm .e3-sku-clear-liquid-index { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--ios-bg-inset); color: var(--ios-text-2); cursor: pointer; } body[data-page="etiquetado"] #andesmarForm .e3-sku-clear-liquid-index::before { content: "×"; } body[data-page="etiquetado"] #andesmarForm .e3-results-list-liquid-index { position: absolute; z-index: 100; left: 0; right: 0; top: calc(100% + 6px); background: var(--ios-bg-card); border: 1px solid var(--ios-border); border-radius: var(--ios-radius); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07); max-height: 260px; overflow-y: auto; } body[data-page="etiquetado"] #andesmarForm .e3-results-list-liquid-index:empty { display: none; } body[data-page="etiquetado"] #andesmarForm .e3-result-add-btn-liquid-index { border: 0; background: var(--ios-blue); color: #fff; font-weight: 600; font-size: 0.85rem; padding: 9px 16px; border-radius: 10px; cursor: pointer; } body[data-page="etiquetado"] #andesmarForm .addBultoE3-form-liquid-index { position: relative; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; } /* =========================================================================== LIMPIEZA: fuera "Paso 1/2/3", círculos ⓘ e iconos decorativos. Solo quedan: logos de carrier (img), iconos de acciones e iconos del toggle. =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .andesmarForm-label-index > i.bi, body[data-page="etiquetado"] #andesmarForm .andesmarForm-section-title-index > i.bi, body[data-page="etiquetado"] #andesmarForm .andesmarForm-opcion-title-main-index > i.bi { display: none; } /* =========================================================================== SECCIÓN 2 — COTIZACIONES =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .andesmarForm-card-cotizaciones-index, body[data-page="etiquetado"] #andesmarForm .andesmarForm-card-opciones-index, body[data-page="etiquetado"] #andesmarForm .andesmarForm-card-acciones-index { margin-top: 18px; } body[data-page="etiquetado"] #andesmarForm .cotizaciones-grid-macos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 900px) { body[data-page="etiquetado"] #andesmarForm .cotizaciones-grid-macos { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { body[data-page="etiquetado"] #andesmarForm .cotizaciones-grid-macos { grid-template-columns: 1fr; } } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-macos { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-top: 34px; background: var(--ios-bg-inset); border: none; border-radius: 16px; padding: 40px 12px 18px; overflow: visible; } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-header { display: flex; flex-direction: column; align-items: center; gap: 8px; } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-body { display: flex; flex-direction: column; align-items: center; gap: 2px; } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-best { background: rgba(52, 199, 89, 0.1); } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } body[data-page="etiquetado"] #andesmarForm .cotizacion-header-main { display: flex; flex-direction: column; gap: 6px; } body[data-page="etiquetado"] #andesmarForm .cotizacion-logo-pill { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; color: var(--ios-text); } /* Círculo de color de la logística (NO filtrado), 50% fuera del top de la card */ body[data-page="etiquetado"] #andesmarForm .cotizacion-logo-circle { position: absolute; top: -29px; left: 50%; transform: translateX(-50%); width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ios-text-3); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); } /* El filter blanco va SOLO en el img (si fuera en el círculo, blanquearía el fondo) */ body[data-page="etiquetado"] #andesmarForm .cotizacion-logo-circle img { width: 32px; height: 32px; object-fit: contain; filter: brightness(0) invert(1); } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-andreani .cotizacion-logo-circle { background: #e30613; } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-andesmar .cotizacion-logo-circle { background: #0a4ca5; } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-oca .cotizacion-logo-circle { background: #e2001a; } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-cruz .cotizacion-logo-circle { background: #0f3460; } body[data-page="etiquetado"] #andesmarForm .cotizacion-iva-badge { font-size: 0.66rem; font-weight: 600; color: var(--ios-text-2); background: var(--ios-bg-inset); padding: 3px 8px; border-radius: 999px; width: fit-content; } body[data-page="etiquetado"] #andesmarForm .cotizacion-tag { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; color: var(--ios-blue); background: var(--ios-blue-soft); padding: 2px 7px; border-radius: 6px; } body[data-page="etiquetado"] #andesmarForm .cotizacion-monto { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ios-text); min-height: 1.4em; } body[data-page="etiquetado"] #andesmarForm .cotizacion-placeholder::before { content: "—"; color: var(--ios-text-3); } body[data-page="etiquetado"] #andesmarForm .cotizacion-plazo-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; color: var(--ios-text-2); background: var(--ios-bg-inset); padding: 4px 10px; border-radius: 999px; width: fit-content; } body[data-page="etiquetado"] #andesmarForm .cotizacion-subcopy { margin: 0; font-size: 0.74rem; color: var(--ios-text-3); } /* =========================================================================== SECCIÓN 2 — MODAL SUCURSAL CRUZ DEL SUR (Bootstrap, retematizado) =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .andesmar-modal-macos { border: 1px solid var(--ios-border); border-radius: var(--ios-radius-lg); overflow: hidden; } body[data-page="etiquetado"] #andesmarForm .andesmar-modal-macos .modal-header, body[data-page="etiquetado"] #andesmarForm .andesmar-modal-macos .modal-footer { border-color: var(--ios-border); } body[data-page="etiquetado"] #andesmarForm .andesmar-modal-macos .modal-title { font-size: 1rem; font-weight: 700; } body[data-page="etiquetado"] #andesmarForm .cruz-sucursal-map { width: 100%; height: 280px; border-radius: var(--ios-radius); margin-top: 12px; overflow: hidden; } /* =========================================================================== SECCIÓN 2 — OPCIONES DE ENVÍO =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .andesmarForm-opciones-grid-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 900px) { body[data-page="etiquetado"] #andesmarForm .andesmarForm-opciones-grid-index { grid-template-columns: 1fr; } } body[data-page="etiquetado"] #andesmarForm .andesmarForm-opcion-card-index { background: var(--ios-bg-soft); border: 1px solid var(--ios-border); border-radius: var(--ios-radius-lg); padding: 14px 16px 16px; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-opcion-title-index { margin: 0 0 12px; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-opcion-title-main-index { font-size: 0.9rem; font-weight: 700; color: var(--ios-text); } body[data-page="etiquetado"] #andesmarForm .andesmarForm-servicio-grid-index { display: grid; gap: 12px; } /* =========================================================================== SECCIÓN 2 — ACCIONES + BOTONES =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .andesmarForm-acciones-wrapper-index { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* Botón principal "Generar Etiquetas" (iOS verde, plano) */ body[data-page="etiquetado"] #andesmarForm .andesmarForm-mainBtn-index.btn-success { flex: 1 1 240px; border: 0; background: var(--ios-green); color: #fff; font-weight: 700; font-size: 1rem; padding: 13px 20px; border-radius: 14px; box-shadow: none; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-mainBtn-index.btn-success:hover { background: #2db14e; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-secondaryBtn-index.btn-secondary { border: 1px solid var(--ios-border); background: var(--ios-bg-card); color: var(--ios-text-2); font-weight: 600; font-size: 0.9rem; padding: 12px 18px; border-radius: 14px; box-shadow: none; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-secondaryBtn-index.btn-secondary:hover { background: var(--ios-bg-inset); } body[data-page="etiquetado"] #andesmarForm #etiquetasCollapse { margin-top: 12px; } body[data-page="etiquetado"] #andesmarForm .button-container { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; } body[data-page="etiquetado"] #andesmarForm .button-container .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--ios-border); border-radius: 12px; font-weight: 600; font-size: 0.9rem; padding: 11px 16px; color: #fff; box-shadow: none; } body[data-page="etiquetado"] #andesmarForm .button-container .btn-primary { background: #0a4ca5; border-color: #0a4ca5; } body[data-page="etiquetado"] #andesmarForm .button-container .btn-danger { background: #e30613; border-color: #e30613; } body[data-page="etiquetado"] #andesmarForm .button-container .btn-dark-blue { background: #0f3460; border-color: #0f3460; } body[data-page="etiquetado"] #andesmarForm .button-icon { width: 20px; height: 20px; object-fit: contain; background: var(--ios-bg-card); border-radius: 5px; padding: 1px; } body[data-page="etiquetado"] #tokenButton.btn-warning { border-radius: 10px; box-shadow: none; font-weight: 600; } /* =========================================================================== SECCIÓN 2 — CARDS DE RESULTADO / DESCARGA por carrier =========================================================================== */ body[data-page="etiquetado"] #andesmarForm #descargaAndreani, body[data-page="etiquetado"] #andesmarForm #descargaAndesmar, body[data-page="etiquetado"] #andesmarForm #descargaCruzDelSur { max-width: 100%; margin-top: 16px !important; padding: 18px; background: var(--ios-bg-card); border: 1px solid var(--ios-border); border-radius: var(--ios-radius-lg); } body[data-page="etiquetado"] #andesmarForm #titleAndreani, body[data-page="etiquetado"] #andesmarForm #titleAndesmar, body[data-page="etiquetado"] #andesmarForm #titleCruzDelSur { font-size: 1.05rem; font-weight: 700; color: var(--ios-text); margin: 0 0 6px; } body[data-page="etiquetado"] #andesmarForm .surprise { width: 26px; height: 26px; object-fit: contain; vertical-align: middle; margin-right: 6px; } body[data-page="etiquetado"] #andesmarForm #descargaAndreani .btn, body[data-page="etiquetado"] #andesmarForm #descargaAndesmar .btn, body[data-page="etiquetado"] #andesmarForm #descargaCruzDelSur .btn { border-radius: 12px; font-weight: 600; box-shadow: none; } body[data-page="etiquetado"] #andesmarForm #errorResponse, body[data-page="etiquetado"] #andesmarForm #errorResponseCruzDelSur { font-size: 0.82rem; margin-top: 8px; } body[data-page="etiquetado"] #andesmarForm .respuesta { margin-top: 10px; } /* =========================================================================== SECCIÓN 3 — HISTORIAL (overrides iOS sobre historial-index.css) =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .historial-index-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: var(--ios-bg-card); border: none; border-radius: var(--ios-radius); padding: 14px 16px; margin-bottom: 16px; } body[data-page="etiquetado"] #andesmarForm .historial-index-filter-transportes { display: flex; align-items: center; gap: 8px; } body[data-page="etiquetado"] #andesmarForm .historial-index-filter-pill { display: inline-flex; align-items: center; cursor: pointer; margin: 0; padding: 4px; border-radius: 999px; border: 1px solid transparent; transition: all 0.15s ease; } body[data-page="etiquetado"] #andesmarForm .historial-index-filter-pill:has(.historial-index-filter-check:checked) { border-color: var(--ios-blue); background: var(--ios-blue-soft); } body[data-page="etiquetado"] #andesmarForm .historial-index-filter-pill:has(.historial-index-filter-check:not(:checked)) { opacity: 0.45; } body[data-page="etiquetado"] #andesmarForm .historial-index-filter-check { display: none; } body[data-page="etiquetado"] #andesmarForm .historial-index-filter-logo { display: inline-flex; align-items: center; gap: 6px; } body[data-page="etiquetado"] #andesmarForm .historial-index-filter-logo img { width: 26px; height: 26px; object-fit: contain; } body[data-page="etiquetado"] #andesmarForm .historial-index-search { position: relative; flex: 1 1 220px; max-width: 360px; } body[data-page="etiquetado"] #andesmarForm .historial-index-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ios-text-3); } body[data-page="etiquetado"] #andesmarForm .historial-index-search-input { width: 100%; height: 42px; padding: 0 14px 0 36px; font-size: 0.92rem; font-family: var(--sl-font-sans); color: var(--ios-text); background: var(--ios-bg-inset); border: 1px solid transparent; border-radius: 12px; outline: none; } body[data-page="etiquetado"] #andesmarForm .historial-index-search-input:focus { background: var(--ios-bg-card); border-color: var(--ios-blue); box-shadow: 0 0 0 3px var(--ios-blue-soft); } body[data-page="etiquetado"] #andesmarForm .historial-index-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } body[data-page="etiquetado"] #andesmarForm .historial-index-card { background: var(--ios-bg-card); border: none; border-radius: var(--ios-radius); padding: 16px; box-shadow: none; } body[data-page="etiquetado"] #andesmarForm .historial-index-loading { text-align: center; padding: 40px 0; } body[data-page="etiquetado"] #andesmarForm .historial-index-loading img { width: 90px; height: auto; } body[data-page="etiquetado"] #andesmarForm .historial-index-error { text-align: center; color: var(--ios-red); font-size: 0.88rem; } body[data-page="etiquetado"] #andesmarForm .historial-index-error:empty { display: none; } body[data-page="etiquetado"] #andesmarForm .historial-index-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; } body[data-page="etiquetado"] #andesmarForm .historial-index-page-info { font-size: 0.85rem; color: var(--ios-text-2); font-weight: 600; } body[data-page="etiquetado"] #andesmarForm .historial-index-page-buttons { display: flex; gap: 8px; } body[data-page="etiquetado"] #andesmarForm .historial-index-page-buttons .btn { border-radius: 10px; border: 1px solid var(--ios-border); background: var(--ios-bg-card); color: var(--ios-text); box-shadow: none; } body[data-page="etiquetado"] #andesmarForm .historial-index-page-buttons .btn:disabled { opacity: 0.4; } /* =========================================================================== SHOELACE BUTTONS (sl-button) — look iOS =========================================================================== */ /* Principal "Generar Etiquetas" */ body[data-page="etiquetado"] #andesmarForm sl-button.andesmarForm-mainBtn-index { flex: 1 1 240px; } body[data-page="etiquetado"] #andesmarForm sl-button.andesmarForm-mainBtn-index::part(base) { background: var(--ios-green); border-color: var(--ios-green); border-radius: 14px; font-weight: 700; } body[data-page="etiquetado"] #andesmarForm sl-button.andesmarForm-mainBtn-index::part(base):hover { background: #2db14e; border-color: #2db14e; } body[data-page="etiquetado"] #andesmarForm sl-button.andesmarForm-secondaryBtn-index::part(base) { border-radius: 14px; } /* Botones por carrier (opciones individuales) */ body[data-page="etiquetado"] #andesmarForm .button-container sl-button { width: auto; } body[data-page="etiquetado"] #andesmarForm .button-container sl-button::part(base) { border: none; color: #fff; font-weight: 600; border-radius: 12px; min-height: 48px; justify-content: flex-start; gap: 10px; } body[data-page="etiquetado"] #andesmarForm sl-button.carrier-andesmar::part(base) { background: #0a4ca5; } body[data-page="etiquetado"] #andesmarForm sl-button.carrier-andesmar::part(base):hover { background: #083e85; } body[data-page="etiquetado"] #andesmarForm sl-button.carrier-andreani::part(base) { background: #e30613; } body[data-page="etiquetado"] #andesmarForm sl-button.carrier-andreani::part(base):hover { background: #c00510; } body[data-page="etiquetado"] #andesmarForm sl-button.carrier-cds::part(base) { background: #0f3460; } body[data-page="etiquetado"] #andesmarForm sl-button.carrier-cds::part(base):hover { background: #0b2748; } body[data-page="etiquetado"] #andesmarForm .button-container sl-button img { width: 20px; height: 20px; object-fit: contain; } /* Agregar bulto / E3 — neutralizar el fondo viejo (gradiente liquid de styles.css con selector #andesmarForm #addBultoButton, 2 IDs) que cae sobre el host sl-button */ body[data-page="etiquetado"] #andesmarForm sl-button#addBultoButton, body[data-page="etiquetado"] #andesmarForm sl-button#addBultoE3Button { background: none !important; border: none !important; box-shadow: none !important; margin-top: 0 !important; padding: 0 !important; border-radius: 0 !important; } body[data-page="etiquetado"] #andesmarForm sl-button#addBultoButton::part(base), body[data-page="etiquetado"] #andesmarForm sl-button#addBultoE3Button::part(base) { border-radius: 12px; color: var(--ios-blue); } /* Paginación historial */ body[data-page="etiquetado"] #andesmarForm .historial-index-page-buttons sl-button::part(base) { border-radius: 50%; } /* =========================================================================== Anti-FOUC: ocultar componentes Shoelace hasta que se registran (evita el flash tipo "No / false" de los sin upgradear) =========================================================================== */ body[data-page="etiquetado"] #andesmarForm sl-select:not(:defined), body[data-page="etiquetado"] #andesmarForm sl-button:not(:defined), body[data-page="etiquetado"] #andesmarForm sl-option:not(:defined) { visibility: hidden; } body[data-page="etiquetado"] #andesmarForm sl-select { position: relative; z-index: 2; } /* =========================================================================== COTIZACIONES — versión minimalista (menos ruido, marca la sugerida) =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .cotizacion-subcopy, body[data-page="etiquetado"] #andesmarForm .cotizacion-iva-badge, body[data-page="etiquetado"] #andesmarForm .cotizacion-tag { display: none; } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-header { align-items: center; } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-best { position: relative; background: rgba(52, 199, 89, 0.12); border-radius: 16px; } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-best .cotizacion-monto { color: var(--ios-green); } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-best::after { content: "Sugerida" !important; position: absolute !important; top: 8px !important; right: 8px !important; left: auto !important; bottom: auto !important; width: auto !important; height: auto !important; filter: none !important; opacity: 1 !important; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.02em; color: #fff !important; background: var(--ios-green) !important; padding: 2px 8px; border-radius: 999px; } /* =========================================================================== SUGERENCIAS "Buscar producto por SKU de E3" — items limpios iOS =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .e3-results-list-liquid-index { padding: 6px; } body[data-page="etiquetado"] #andesmarForm .e3-result-item-liquid-index { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border-radius: 12px; cursor: pointer; transition: background 0.12s ease; } body[data-page="etiquetado"] #andesmarForm .e3-result-item-liquid-index:hover { background: var(--ios-blue-soft); } body[data-page="etiquetado"] #andesmarForm .e3-result-header-liquid-index { display: flex; align-items: center; justify-content: space-between; gap: 8px; } body[data-page="etiquetado"] #andesmarForm .e3-result-sku-liquid-index { font-weight: 700; font-size: 0.82rem; color: var(--ios-text); } body[data-page="etiquetado"] #andesmarForm .e3-result-stock-liquid-index { font-size: 0.68rem; font-weight: 600; color: var(--ios-text-2); background: var(--ios-bg-inset); padding: 2px 9px; border-radius: 999px; } body[data-page="etiquetado"] #andesmarForm .e3-result-stock-liquid-index.stock--zero { color: var(--ios-red); background: rgba(255, 59, 48, 0.1); } body[data-page="etiquetado"] #andesmarForm .e3-result-stock-liquid-index.stock--low { color: var(--ios-orange); background: rgba(255, 149, 0, 0.12); } body[data-page="etiquetado"] #andesmarForm .e3-result-name-liquid-index { font-size: 0.85rem; color: var(--ios-text); line-height: 1.3; } body[data-page="etiquetado"] #andesmarForm .e3-result-measures-liquid-index { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.72rem; color: var(--ios-text-2); } body[data-page="etiquetado"] #andesmarForm .e3-result-footer-liquid-index { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; } body[data-page="etiquetado"] #andesmarForm .e3-result-price-liquid-index { font-weight: 700; font-size: 0.95rem; color: var(--ios-text); } body[data-page="etiquetado"] #andesmarForm .e3-result-add-btn-liquid-index { border: 0; background: var(--ios-blue); color: #fff; font-weight: 600; font-size: 0.78rem; padding: 7px 13px; border-radius: 10px; cursor: pointer; } body[data-page="etiquetado"] #andesmarForm .e3-result-loading-liquid-index, body[data-page="etiquetado"] #andesmarForm .e3-result-empty-liquid-index, body[data-page="etiquetado"] #andesmarForm .e3-result-error-liquid-index { padding: 14px; font-size: 0.82rem; color: var(--ios-text-2); } /* Token Andreani: div temporal del resultado */ body[data-page="etiquetado"] #andesmarForm #tokenResultBox { margin-top: 10px; padding: 12px 14px; background: var(--ios-bg-inset); border-radius: 12px; font-size: 0.78rem; color: var(--ios-text); word-break: break-all; display: none; } body[data-page="etiquetado"] #andesmarForm #tokenResultBox.is-visible { display: block; } body[data-page="etiquetado"] #andesmarForm #tokenResultBox .token-copied { color: var(--ios-green); font-weight: 600; } /* =========================================================================== ORDEN: "Opciones de envío" ARRIBA de "Cotización automática" (reordeno con flex order, sin mover el markup) =========================================================================== */ body[data-page="etiquetado"] #andesmarForm-wrapper-index { display: flex; flex-direction: column; } body[data-page="etiquetado"] #andesmarForm-grid-index { order: 0; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-card-opciones-index { order: 1; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-card-cotizaciones-index { order: 2; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-card-acciones-index { order: 3; } /* =========================================================================== OPCIONES — colapsable (sl-details), texto chico =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .opciones-details::part(base) { border: none; background: transparent; border-radius: 0; } body[data-page="etiquetado"] #andesmarForm .opciones-details::part(header) { padding: 0; font-size: 1.05rem; font-weight: 700; color: var(--ios-text); } body[data-page="etiquetado"] #andesmarForm .opciones-details::part(content) { padding: 16px 0 0; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-opcion-title-main-index { font-size: 0.85rem; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-servicio-grid-index .andesmarForm-label-index { font-size: 0.78rem; } /* =========================================================================== MATAR estilo viejo de las cards de cotización (styles.css global: barra ::before, glow ::after, hover transform, gradiente best, iva-badge) =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .cotizacion-card-macos { box-shadow: none !important; overflow: visible !important; padding: 40px 12px 18px !important; border: none !important; } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-macos::before { display: none !important; content: none !important; } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-macos:not(.cotizacion-card-best)::after { display: none !important; content: none !important; } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-macos:hover { transform: none !important; box-shadow: none !important; border-color: transparent !important; } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-best { background: rgba(52, 199, 89, 0.12) !important; box-shadow: none !important; border: none !important; } body[data-page="etiquetado"] #andesmarForm .cotizacion-iva-badge, body[data-page="etiquetado"] #andesmarForm .cotizacion-tag, body[data-page="etiquetado"] #andesmarForm .cotizacion-subcopy { display: none !important; } /* =========================================================================== COTIZACIÓN — DISEÑO NUEVO (clases qz-*, inmunes al CSS viejo) Círculo de color mitad afuera + logo blanco, nombre, precio, plazo. =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .qz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 900px) { body[data-page="etiquetado"] #andesmarForm .qz-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; } } @media (max-width: 520px) { body[data-page="etiquetado"] #andesmarForm .qz-grid { grid-template-columns: 1fr; row-gap: 40px; } } body[data-page="etiquetado"] #andesmarForm .qz-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin-top: 30px; padding: 38px 12px 16px; background: var(--ios-bg-card); border: 1px solid var(--ios-border); border-radius: 18px; box-shadow: none; overflow: visible; } /* matar cualquier pseudo viejo heredado por las clases cotizacion-card-* */ body[data-page="etiquetado"] #andesmarForm .qz-card::before, body[data-page="etiquetado"] #andesmarForm .qz-card::after { display: none !important; content: none !important; } body[data-page="etiquetado"] #andesmarForm .qz-circle { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ios-text-3); } body[data-page="etiquetado"] #andesmarForm .qz-circle img { width: 30px; height: 30px; object-fit: contain; filter: brightness(0) invert(1); } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-andreani .qz-circle { background: #e30613; } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-andesmar .qz-circle { background: #0a4ca5; } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-oca .qz-circle { background: #7c3aed; } body[data-page="etiquetado"] #andesmarForm .cotizacion-card-cruz .qz-circle { background: #0f3460; } body[data-page="etiquetado"] #andesmarForm .qz-head { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 0; } body[data-page="etiquetado"] #andesmarForm .qz-name { font-weight: 700; font-size: 0.92rem; color: var(--ios-text); } body[data-page="etiquetado"] #andesmarForm .qz-price { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ios-text); min-height: 1.3em; } body[data-page="etiquetado"] #andesmarForm .qz-plazo { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 600; color: var(--ios-text-2); background: var(--ios-bg-inset); padding: 3px 10px; border-radius: 999px; max-width: 100%; } /* Mejor precio (best): tinte verde + precio verde + badge inyectado por JS */ body[data-page="etiquetado"] #andesmarForm .qz-card.cotizacion-card-best { background: rgba(52, 199, 89, 0.12) !important; border-color: rgba(52, 199, 89, 0.45) !important; } body[data-page="etiquetado"] #andesmarForm .qz-card.cotizacion-card-best .qz-price { color: var(--ios-green); } body[data-page="etiquetado"] #andesmarForm .cotizacion-best-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6rem; font-weight: 700; color: #fff; background: var(--ios-green); padding: 3px 9px; border-radius: 999px; margin-top: 2px; } body[data-page="etiquetado"] #andesmarForm .cotizacion-best-badge i { font-size: 0.62rem; } /* Carga de cotización: SKELETON (sin spinner), igual en las 4. Mientras hay spinner/typing-text, el precio se muestra como barra shimmer. */ @keyframes qz-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } body[data-page="etiquetado"] #andesmarForm .qz-price .cotizacion-spinner-icon, body[data-page="etiquetado"] #andesmarForm .qz-price .fa-spinner, body[data-page="etiquetado"] #andesmarForm .qz-price .fas.fa-spinner, body[data-page="etiquetado"] #andesmarForm .qz-price .cotizacion-typing-text { display: none !important; } body[data-page="etiquetado"] #andesmarForm .qz-price:has(.cotizacion-spinner-icon), body[data-page="etiquetado"] #andesmarForm .qz-price:has(.cotizacion-typing-text), body[data-page="etiquetado"] #andesmarForm .qz-price:has(.cotizacion-placeholder) { display: inline-block; width: 92px; height: 20px; min-height: 20px; border-radius: 6px; color: transparent; vertical-align: middle; background: linear-gradient( 90deg, var(--ios-bg-inset) 25%, rgba(0, 0, 0, 0.06) 37%, var(--ios-bg-inset) 63% ); background-size: 400% 100%; animation: qz-shimmer 1.3s ease infinite; } body[data-page="etiquetado"] #andesmarForm .qz-price .cotizacion-placeholder { display: none !important; } /* =========================================================================== FUENTE INTER EN TODA LA HOJA (como producteca), con guardas para icon-fonts =========================================================================== */ body[data-page="etiquetado"], body[data-page="etiquetado"] * { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } body[data-page="etiquetado"] .bi, body[data-page="etiquetado"] [class^="bi-"], body[data-page="etiquetado"] [class*=" bi-"], body[data-page="etiquetado"] .bi::before, body[data-page="etiquetado"] [class^="bi-"]::before, body[data-page="etiquetado"] [class*=" bi-"]::before { font-family: "bootstrap-icons" !important; } body[data-page="etiquetado"] .fa, body[data-page="etiquetado"] .fas, body[data-page="etiquetado"] .far, body[data-page="etiquetado"] .fal, body[data-page="etiquetado"] .fab, body[data-page="etiquetado"] [class^="fa-"], body[data-page="etiquetado"] [class*=" fa-"], body[data-page="etiquetado"] .fa::before, body[data-page="etiquetado"] .fas::before, body[data-page="etiquetado"] .far::before, body[data-page="etiquetado"] [class^="fa-"]::before, body[data-page="etiquetado"] [class*=" fa-"]::before { font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome" !important; } body[data-page="etiquetado"] .fab, body[data-page="etiquetado"] .fab::before { font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands" !important; } /* =========================================================================== PLAZO + CRUZ DEL SUR (botón "Ver sucursal") + RECOMENDADA destacada =========================================================================== */ /* Plazo no rompe: wrap + centrado */ body[data-page="etiquetado"] #andesmarForm .qz-plazo { flex-wrap: wrap; justify-content: center; text-align: center; line-height: 1.2; } /* Cruz del Sur: el plazo queda como pill normal; "Ver sucursal" va aparte debajo */ body[data-page="etiquetado"] #andesmarForm .cruz-ver-sucursal-btn { border: 0; background: var(--ios-blue); color: #fff; font-weight: 600; font-size: 0.68rem; padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; margin-top: 4px; } /* Recomendada (Mejor precio): más destacada — borde + tinte verde + badge */ body[data-page="etiquetado"] #andesmarForm .qz-card.cotizacion-card-best { background: rgba(52, 199, 89, 0.12) !important; border: 1.5px solid var(--ios-green) !important; } body[data-page="etiquetado"] #andesmarForm .qz-card.cotizacion-card-best .qz-name { color: #1f9d4d; } body[data-page="etiquetado"] #andesmarForm .cotizacion-best-badge { font-size: 0.64rem; padding: 4px 12px; box-shadow: none; order: -1; } /* =========================================================================== z-index: la card de Opciones debe pintar sobre Cotización/Acciones (el reorden con flex 'order' hacía que la de abajo tapara los dropdowns) =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .andesmarForm-card-opciones-index { position: relative; z-index: 30; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-card-cotizaciones-index, body[data-page="etiquetado"] #andesmarForm .andesmarForm-card-acciones-index { position: relative; z-index: 1; } /* =========================================================================== respuesta2 / respuestaNegativa — chip iOS (verde info / rojo error) =========================================================================== */ body[data-page="etiquetado"] #andesmarForm #respuesta2, body[data-page="etiquetado"] #andesmarForm #respuestaNegativa { display: inline-block; font-size: 0.76rem; font-weight: 600; padding: 6px 12px; border-radius: 10px; margin: 6px 0 0; line-height: 1.3; } body[data-page="etiquetado"] #andesmarForm #respuesta2 { color: #1f9d4d; background: rgba(52, 199, 89, 0.12); } body[data-page="etiquetado"] #andesmarForm #respuestaNegativa { color: var(--ios-red); background: rgba(255, 59, 48, 0.1); } body[data-page="etiquetado"] #andesmarForm #respuesta2:empty, body[data-page="etiquetado"] #andesmarForm #respuestaNegativa:empty { display: none; } /* Hover sugerencias localidad */ body[data-page="etiquetado"] #andesmarForm .lista-localidades .sugerencia:hover { background: var(--ios-blue-soft); } /* Cotización "NO DISPONIBLE" / error: chico, no gigante como el precio */ body[data-page="etiquetado"] #andesmarForm .qz-price.cotizacion-error { font-size: 0.8rem; font-weight: 600; color: var(--ios-red); background: none; animation: none; width: auto; height: auto; } /* =========================================================================== HISTORIAL — buscador estilo producteca (.ios-searchbar) + chips de filtro =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .ios-searchbar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 22px; background: var(--ios-bg-card); border: 1px solid var(--ios-border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); flex: 1 1 240px; max-width: 380px; } body[data-page="etiquetado"] #andesmarForm .ios-searchbar:focus-within { border-color: rgba(0, 122, 255, 0.45); box-shadow: 0 0 0 3.5px rgba(0, 122, 255, 0.16); } body[data-page="etiquetado"] #andesmarForm .ios-sb-icon { color: var(--ios-text-3); font-size: 14px; flex-shrink: 0; pointer-events: none; } body[data-page="etiquetado"] #andesmarForm .ios-searchbar:focus-within .ios-sb-icon { color: var(--ios-blue); } body[data-page="etiquetado"] #andesmarForm .ios-sb-input, body[data-page="etiquetado"] #andesmarForm .ios-sb-input:focus { flex: 1; min-width: 0; height: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; font-size: 0.95rem; color: var(--ios-text); } body[data-page="etiquetado"] #andesmarForm .ios-sb-input::placeholder { color: var(--ios-text-3); } /* Chips de filtro de logística */ body[data-page="etiquetado"] #andesmarForm .hist-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } body[data-page="etiquetado"] #andesmarForm .hist-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ios-border); background: var(--ios-bg-card); cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--ios-text-2); transition: all 0.15s ease; user-select: none; } body[data-page="etiquetado"] #andesmarForm .hist-chip input { display: none; } body[data-page="etiquetado"] #andesmarForm .hist-chip img { width: 20px; height: 20px; object-fit: contain; } body[data-page="etiquetado"] #andesmarForm .hist-chip:has(.historial-index-filter-check:checked) { border-color: var(--ios-blue); background: var(--ios-blue-soft); color: var(--ios-blue); } body[data-page="etiquetado"] #andesmarForm .hist-chip:not(:has(.historial-index-filter-check:checked)) { opacity: 0.45; } /* Activos: color PLENO de cada logística (los logos son blancos) + texto blanco */ body[data-page="etiquetado"] #andesmarForm .hist-chip:has(input[value="andreani"]:checked) { border-color: #e30613; background: #e30613; color: #fff; } body[data-page="etiquetado"] #andesmarForm .hist-chip:has(input[value="andesmar"]:checked) { border-color: #0a4ca5; background: #0a4ca5; color: #fff; } body[data-page="etiquetado"] #andesmarForm .hist-chip:has(input[value="cds"]:checked) { border-color: #0f3460; background: #0f3460; color: #fff; } /* =========================================================================== NAVBAR: icono del item de index (activo / hover) forzado a BLANCO =========================================================================== */ body[data-page="etiquetado"] .nav-link.active i, body[data-page="etiquetado"] .nav-link.active .bi { color: #fff !important; } body[data-page="etiquetado"] .nav-link.active img, body[data-page="etiquetado"] .nav-link.active .app-navbar-item-logo { filter: brightness(0) invert(1) !important; } /* Chip de filtro: logo NEGRO cuando inactivo (chip claro), BLANCO cuando activo (chip de color) */ body[data-page="etiquetado"] #andesmarForm .hist-chip img { filter: brightness(0); } body[data-page="etiquetado"] #andesmarForm .hist-chip:has(.historial-index-filter-check:checked) img { filter: brightness(0) invert(1); } body[data-page="etiquetado"] #andesmarForm .hist-filter-label { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; font-weight: 600; color: var(--ios-text-2); margin-right: 6px; } body[data-page="etiquetado"] #andesmarForm .hist-filter-label .bi-info-circle { color: var(--ios-blue); cursor: help; } /* Toggle Etiquetado/Historial: sin sombra en el contenedor interno */ body[data-page="etiquetado"] #andesmarForm .historial-index-toggle-inner { box-shadow: none !important; } /* =========================================================================== HISTORIAL — card: logo en círculo de color sólido por carrier (sin sombra), logo + nombre a la izquierda =========================================================================== */ body[data-page="etiquetado"] #andesmarForm .historial-index-card .historial-index-header-left { justify-content: flex-start; } body[data-page="etiquetado"] #andesmarForm .historial-index-card .cotizacion-logo-pill { flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; } body[data-page="etiquetado"] #andesmarForm .historial-index-card .hist-logo-circle { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--ios-text-3); box-shadow: none; } body[data-page="etiquetado"] #andesmarForm .historial-index-card .cotizacion-logo-pill img { position: static; transform: none; width: 100%; height: 100%; padding: 8px; box-sizing: border-box; object-fit: contain; filter: brightness(0) invert(1); box-shadow: none; background: none; } body[data-page="etiquetado"] #andesmarForm .historial-index-card-andreani .hist-logo-circle { background: #e30613; } body[data-page="etiquetado"] #andesmarForm .historial-index-card-andesmar .hist-logo-circle { background: #0a4ca5; } body[data-page="etiquetado"] #andesmarForm .historial-index-card-oca .hist-logo-circle { background: #7c3aed; } body[data-page="etiquetado"] #andesmarForm .historial-index-card-cds .hist-logo-circle { background: #0f3460; } body[data-page="etiquetado"] #andesmarForm .historial-index-card .cotizacion-logo-pill span { font-weight: 700; font-size: 0.9rem; color: var(--ios-text); } /* Espaciado vertical uniforme entre filas/grupos del formulario */ body[data-page="etiquetado"] #andesmarForm .andesmarForm-card-index .andesmarForm-row-index, body[data-page="etiquetado"] #andesmarForm .andesmarForm-card-index .andesmarForm-row-3-index, body[data-page="etiquetado"] #andesmarForm .andesmarForm-card-index .doble-tel-remito, body[data-page="etiquetado"] #andesmarForm .andesmarForm-card-index .CpyLocalidad { margin-bottom: 14px; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-card-index .andesmarForm-field-index { margin-bottom: 14px; } body[data-page="etiquetado"] #andesmarForm .andesmarForm-card-index .andesmarForm-row-index .andesmarForm-field-index, body[data-page="etiquetado"] #andesmarForm .andesmarForm-card-index .andesmarForm-row-3-index .andesmarForm-field-index, body[data-page="etiquetado"] #andesmarForm .andesmarForm-card-index .doble-tel-remito .andesmarForm-field-index { margin-bottom: 0; } /* Secciones (etiquetado + historial): borde sutil, sin sombra */ body[data-page="etiquetado"] #andesmarForm .andesmarForm-card-index, body[data-page="etiquetado"] #andesmarForm .historial-index-card { border: 1px solid var(--ios-border) !important; box-shadow: none !important; } /* =========================================================================== DESTELLOS animados en el FONDO (lilas/azules/blancos). Liviano: anima transform (GPU), sin blur/filter. Respeta prefers-reduced-motion. =========================================================================== */ body[data-page="etiquetado"]::before { content: ""; display: none; /* desactivado: el fondo ahora lo anima el body directamente */ position: fixed; inset: -25%; z-index: -1; pointer-events: none; background: radial-gradient(40vw 40vw at 16% 20%, rgba(167, 139, 250, 0.55), transparent 62%), radial-gradient(44vw 44vw at 84% 26%, rgba(96, 165, 250, 0.5), transparent 62%), radial-gradient(38vw 38vw at 60% 85%, rgba(103, 232, 249, 0.42), transparent 62%), radial-gradient(36vw 36vw at 26% 80%, rgba(139, 92, 246, 0.5), transparent 64%); animation: bgDestellos 22s ease-in-out infinite alternate; will-change: transform; } @keyframes bgDestellos { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-3%, 2.5%, 0) scale(1.08); } } [data-theme="dark"] body[data-page="etiquetado"]::before { background: radial-gradient(38vw 38vw at 18% 22%, rgba(124, 58, 237, 0.4), transparent 60%), radial-gradient(42vw 42vw at 82% 28%, rgba(37, 99, 235, 0.35), transparent 60%), radial-gradient(40vw 40vw at 62% 82%, rgba(255, 255, 255, 0.08), transparent 60%), radial-gradient(34vw 34vw at 28% 78%, rgba(139, 92, 246, 0.32), transparent 62%); } @media (prefers-reduced-motion: reduce) { body[data-page="etiquetado"]::before { animation: none; } } /* =========================================================================== MOBILE: el formulario Andesmar ocupa el 100% del ancho (full-bleed). En 576–768px bootstrap .container lo limitaba a 540/720px y .napse-cards-container sumaba 24px laterales → las secciones quedaban angostas. Acá se anula. =========================================================================== */ @media (max-width: 768px) { body.producteca-body .container.napse-cards-container, body.producteca-body .napse-shell-container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* full-bleed: gana al rule global `form{...!important}` de theme.css (margin 0.6rem + max-width calc(100%-1.2rem)) que dejaba el form angosto/asimétrico */ body.producteca-body #andesmarForm { width: 100% !important; max-width: 100% !important; margin: 0 0 1.2rem !important; border-radius: 0 !important; padding: 14px 12px 2rem !important; } /* grilla de columnas a una sola para que las secciones usen todo el ancho */ body[data-page="etiquetado"] #andesmarForm-grid-index { grid-template-columns: 1fr; } /* Toolbar del historial: apilar (filtros arriba, buscador abajo full-width) */ body[data-page="etiquetado"] #andesmarForm .historial-index-toolbar { flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; gap: 10px; } /* Filtros de transporte: una sola fila con SCROLL LATERAL (no se parten) */ body[data-page="etiquetado"] #andesmarForm .hist-filters, body[data-page="etiquetado"] #andesmarForm .historial-index-filter-transportes { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0; /* anula cualquier margin-left:auto que descentraba */ padding-bottom: 2px; width: 100%; } body[data-page="etiquetado"] #andesmarForm .hist-filters::-webkit-scrollbar, body[data-page="etiquetado"] #andesmarForm .historial-index-filter-transportes::-webkit-scrollbar { display: none; } body[data-page="etiquetado"] #andesmarForm .hist-filters > *, body[data-page="etiquetado"] #andesmarForm .historial-index-filter-transportes > * { flex: 0 0 auto; /* el label y los chips no se encogen → scrollean */ } /* Buscador: ancho completo, sin romperse */ body[data-page="etiquetado"] #andesmarForm .historial-index-search, body[data-page="etiquetado"] #andesmarForm .historial-index-search.ios-searchbar { flex: 1 1 auto; width: 100%; max-width: none; } }