/* ========================================================================== MODAL ÓPTICA — FLUJO DE LENTES ========================================================================== */ #mmc-modal-overlay { position: fixed; inset: 0; background: #fff; z-index: 9999999; display: none; flex-direction: column; overflow: hidden; } #mmc-modal-overlay.activo { display: flex; } #mmc-modal-inner { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } /* HEADER */ #mmc-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 0 32px; height: 64px; border-bottom: 1px solid #e5e7eb; background: #fff; flex-shrink: 0; gap: 20px; } /* El botón vive en la columna izquierda, encima de la imagen del producto (antes iba en el header). La caja la pone su div contenedor .mmc-volver-wrap — misma que #mmc-desglose-precio (340px centrados, más abajo en este archivo) — y el botón solo se alinea a la izquierda dentro de ella, así arranca en la misma línea vertical que el nombre del producto y el Subtotal. */ .mmc-volver-wrap { text-align: left; } #mmc-btn-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; font-size: 13px; color: #555; cursor: pointer; padding: 0; white-space: nowrap; transition: color 0.15s; } #mmc-btn-back:hover { color: #111; } /* Al hacer clic, el estilo de botones del tema (Kadence) le pintaba un recuadro celeste alrededor. Acá solo debe cambiar el color de la letra. */ /* Se antepone #mmc-modal-overlay para ganarle al estilo de botones del tema (Kadence), que en :hover/:focus les pinta recuadro, sombra y fondo propios. Acá SOLO cambia el color de la letra, al celeste de la marca. */ #mmc-modal-overlay #mmc-btn-back, #mmc-modal-overlay .mmc-btn-volver-pantalla, #mmc-modal-overlay #mmc-btn-back:hover, #mmc-modal-overlay #mmc-btn-back:focus, #mmc-modal-overlay #mmc-btn-back:focus-visible, #mmc-modal-overlay #mmc-btn-back:active, #mmc-modal-overlay .mmc-btn-volver-pantalla:hover, #mmc-modal-overlay .mmc-btn-volver-pantalla:focus, #mmc-modal-overlay .mmc-btn-volver-pantalla:focus-visible, #mmc-modal-overlay .mmc-btn-volver-pantalla:active { background: none !important; background-color: transparent !important; border: none !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; outline: none !important; transform: none !important; } #mmc-modal-overlay #mmc-btn-back:hover, #mmc-modal-overlay #mmc-btn-back:focus, #mmc-modal-overlay #mmc-btn-back:focus-visible, #mmc-modal-overlay #mmc-btn-back:active, #mmc-modal-overlay .mmc-btn-volver-pantalla:hover, #mmc-modal-overlay .mmc-btn-volver-pantalla:focus, #mmc-modal-overlay .mmc-btn-volver-pantalla:focus-visible, #mmc-modal-overlay .mmc-btn-volver-pantalla:active { color: #38B8C4 !important; } #mmc-cerrar-modal { background: none; border: none; cursor: pointer; color: #aaa; padding: 6px; border-radius: 6px; display: flex; align-items: center; transition: background 0.15s, color 0.15s; flex-shrink: 0; } #mmc-cerrar-modal:hover { background: #f3f4f6; color: #111; } /* Pasos centrados en el header (solo escritorio). El header reparte el espacio entre logo, pasos y la X; como el logo ocupa la mitad del ancho (lo necesita para alinearse con la columna izquierda), los pasos quedaban empujados a la derecha. Sacándolos de ese reparto y centrándolos sobre la mitad del modal, quedan fijos al centro sin importar cuánto ocupen el logo o la X. Va en @media para no tocar el header de celular, donde los pasos forman su propia fila abajo. */ @media (min-width: 901px) { #mmc-modal-header { position: relative; } #mmc-pasos-lista { position: absolute; left: 50%; transform: translateX(-50%); } } /* ========================================================================== // REEMPLAZAR POR: ========================================================================== */ #mmc-pasos-lista { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; } .mmc-paso { display: flex; align-items: center; gap: 8px; padding: 0 26px; position: relative; color: #94a3b8; font-size: 12.5px; font-weight: 600; } .mmc-paso:not(:last-child)::after { content: ''; position: absolute; top: 50%; left: 100%; transform: translateY(-50%); width: 26px; height: 1px; background: #dcdcdc; } .mmc-paso-num { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1.5px solid #dcdcdc; color: #94a3b8; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; } .mmc-paso-txt { text-transform: uppercase; letter-spacing: .03em; } /* Color de marca (#023E5E) para el paso actual y los ya completados — antes azul #2563eb. */ .mmc-paso.mmc-paso-activo { color: #023E5E; } .mmc-paso.mmc-paso-activo .mmc-paso-num { background: #023E5E; border-color: #023E5E; color: #fff; } .mmc-paso.mmc-paso-completo { color: #023E5E; } .mmc-paso.mmc-paso-completo .mmc-paso-num { background: #023E5E; border-color: #023E5E; color: #fff; } /* BODY */ #mmc-modal-body { display: flex; flex: 1; overflow: hidden; } /* COLUMNA IZQUIERDA */ /* Colores invertidos: izquierda blanca, derecha gris claro (ver #mmc-modal-col-der). De paso, la foto del producto (fondo blanco) deja de mostrar su recuadro sobre esta columna. */ #mmc-modal-col-izq { width: 50%; min-width: 50%; max-width: 50%; background: #fff; border-right: 1px solid #e5e7eb; display: flex; flex-direction: column; padding: 36px 32px; overflow-y: auto; gap: 28px; } #mmc-resumen-producto { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; } #mmc-modal-img-lente { width: 100%; max-width: 280px; height: auto; object-fit: contain; border-radius: 8px; } .mmc-modal-nombre { font-size: 18px; font-weight: 600; color: #111; margin: 0; line-height: 1.3; } .mmc-modal-color { font-size: 13px; color: #64748b; display: block; } /* Desglose */ /* Sin border-top: esa era la raya que salía encima del nombre del producto. */ #mmc-desglose-precio { padding-top: 20px; } .mmc-desglose-titulo { font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; } .mmc-desglose-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 14px; color: #374151; border-bottom: 1px solid #f1f5f9; } .mmc-precio-antes { font-size: 12px; color: #aaa; font-weight: 400; margin-right: 4px; } .mmc-precio-ahora { font-weight: 600; color: #111; } /* El Subtotal es el dato importante: negrita y algo más grande (el tamaño final lo fija la regla .mmc-desglose-total de más abajo). Su borde superior es LA única raya de esta zona — las filas de arriba ya no llevan borde inferior, así no vuelven a verse dos líneas juntas. */ .mmc-desglose-total { margin-top: 4px; border-bottom: none !important; font-weight: 700; color: #111; border-top: 1.5px solid #e5e7eb !important; padding-top: 12px !important; } /* Resumen de lo elegido (columna izquierda) — etiqueta y valor en UNA sola línea, separados por un punto, en vez de apilados uno sobre otro: con 5 conceptos, el bloque ocupaba el doble de alto del necesario. Si el valor es largo, flex-wrap deja que baje a una segunda línea solo en ese caso. No hizo falta tocar el JS: el punto separador lo pone el ::after de la etiqueta. */ /* Letra Roboto solo en este bloque (si no estuviera disponible, cae en la del sitio) y sin negritas: el valor iba en 600 y "Visión Simple", "Sin Graduación", etc. pesaban demasiado al lado de su etiqueta. */ #mmc-selecciones-resumen { display: flex; flex-direction: column; font-family: 'Roboto', 'Poppins', -apple-system, 'Segoe UI', Arial, sans-serif; } .mmc-seleccion-item { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; } /* La última fila no lleva raya: justo debajo va el borde superior del Subtotal y se veían dos líneas juntas. */ .mmc-seleccion-item:last-child { border-bottom: none; } .mmc-seleccion-izq { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; } .mmc-seleccion-label { font-size: 12.5px; color: #5b6971; } .mmc-seleccion-label::after { content: "·"; margin-left: 6px; color: #b8c2c9; } .mmc-seleccion-valor { font-weight: 400; color: #3a4850; font-size: 13px; } .mmc-seleccion-precio { font-weight: 500; color: #3a4850; font-size: 13px; white-space: nowrap; } /* COLUMNA DERECHA */ #mmc-modal-col-der { width: 50%; min-width: 50%; max-width: 50%; padding: 36px 48px; overflow-y: auto; background: #f9fafb; } /* Botón atrás dentro del modal */ .mmc-btn-volver-pantalla { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; font-size: 13px; color: #555; cursor: pointer; padding: 0; margin-bottom: 20px; transition: color 0.15s; } .mmc-btn-volver-pantalla:hover { color: #111; } .mmc-titulo-paso { font-size: 22px; font-weight: 600; color: #111; margin: 0 0 8px; line-height: 1.3; } .mmc-subtitulo-paso { font-size: 14px; color: #64748b; margin: 0 0 24px; } /* ========================================================================== OPCIONES (compartidas por todas las pantallas) ========================================================================== */ .mmc-opciones-lista { display: flex; flex-direction: column; gap: 12px; max-width: 580px; } .mmc-opcion-item { position: relative; display: flex; align-items: center; /* Más aire adentro y esquinas casi rectas (antes 16px/20px y radio 10px). */ justify-content: space-between; padding: 20px 22px; border: 1px solid #e5e7eb; border-radius: 4px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; background: #fff; gap: 16px; } .mmc-opcion-item:hover { border-color: #94a3b8; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .mmc-opcion-item.seleccionado { border-color: #111; background: #fafafa; box-shadow: 0 2px 12px rgba(0,0,0,0.08); } .mmc-opcion-disabled { opacity: 0.5; cursor: not-allowed; } .mmc-opcion-disabled:hover { border-color: #e5e7eb; box-shadow: none; } .mmc-opcion-disabled-badge { display: inline-block; font-size: 11px; color: #94a3b8; background: #f1f5f9; padding: 2px 6px; border-radius: 4px; margin-top: 4px; } /* Etiqueta de descuento — como la referencia: DENTRO de la tarjeta, pegada a su esquina superior izquierda (antes quedaba flotando por fuera, arriba del borde), esquinas casi rectas y rojo suave: fondo rosado claro con el texto en rojo. La esquina de arriba a la izquierda acompaña el radio de 4px de la tarjeta; las otras van rectas. */ .mmc-opcion-badge { position: absolute; top: 0; left: 0; background: #fdecea; color: #e0102c; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px 0 4px 0; text-transform: uppercase; letter-spacing: 0.04em; } .mmc-opcion-left { display: flex; align-items: center; gap: 12px; flex: 1; } /* gap 6px (antes 2px): nombre y descripción dejan de verse pegados. */ .mmc-opcion-textos { display: flex; flex-direction: column; gap: 6px; } .mmc-opcion-nombre { font-size: 16px; font-weight: 600; color: #3a4850; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .mmc-opcion-desc { font-size: 14px; color: #5b6971; } .mmc-inline-precio { font-size: 13px; font-weight: 400; color: #374151; display: inline-flex; align-items: center; gap: 4px; } .mmc-inline-precio del { color: #aaa; font-size: 12px; } .mmc-opcion-icono { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.5; transition: opacity 0.15s; } .mmc-opcion-item:hover .mmc-opcion-icono, .mmc-opcion-item.seleccionado .mmc-opcion-icono { opacity: 1; } .mmc-opcion-icono img { width: 100%; height: 100%; object-fit: contain; } /* Los iconos de prescripcion son SVG en linea, sin width/height propios y con proporciones distintas (38x38, 36x28, 52x38): se escalan al ancho del recuadro y conservan su relacion. */ .mmc-opcion-icono svg { width: 100%; height: auto; max-height: 100%; display: block; } /* Advertencia (progresivo office) */ .mmc-advertencia { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #d97706; margin-top: 4px; } /* Tooltip btn — ícono flotante superpuesto en la esquina superior derecha de cada cuadrado de selección (opción, protección/sub-protección, índice, recubrimiento). El contenedor (.mmc-opcion-item, .mmc-tipo-card, .mmc-paquete-card, .mmc-recub-opcion) ya tiene position:relative, así que este botón se ancla directo a la tarjeta. */ .mmc-tooltip-btn, .mmc-tooltip-btn:hover, .mmc-tooltip-btn:focus, .mmc-tooltip-btn:active { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: none !important; background: none !important; box-shadow: none !important; outline: none !important; color: #3a4850 !important; cursor: pointer; padding: 0; z-index: 4; } .mmc-tooltip-btn svg { width: 16px; height: 16px; display: block; } /* ========================================================================== READERS GRID ========================================================================== */ .mmc-readers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 480px; margin-bottom: 24px; } .mmc-reader-btn { padding: 14px 8px; border: 1.5px solid #e5e7eb; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 500; color: #374151; cursor: pointer; transition: all 0.15s; text-align: center; } /* Mismo caso que .mmc-sub-opcion: sin esto, Kadence pinta la letra de blanco al pasar el mouse y el número de potencia se volvía invisible. El estado "seleccionado" sí es blanco sobre negro. */ .mmc-reader-btn:hover, .mmc-reader-btn:focus, .mmc-reader-btn:focus-visible, .mmc-reader-btn:active { border-color: #94a3b8; background: #f9fafb !important; color: #374151 !important; box-shadow: none !important; outline: none !important; } .mmc-reader-btn.seleccionado { border-color: #111; background: #111; color: #fff; } .mmc-reader-btn.seleccionado:hover, .mmc-reader-btn.seleccionado:focus, .mmc-reader-btn.seleccionado:active { background: #111 !important; color: #fff !important; border-color: #111; } /* Botón continuar */ .mmc-btn-continuar { display: block; width: 100%; max-width: 480px; padding: 14px 20px; background: #023E5E; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s; } .mmc-btn-continuar:hover:not(:disabled) { background: #020621; } .mmc-btn-continuar:disabled { background: #c5c5c5; cursor: not-allowed; } /* ========================================================================== NEAR VISION — EXPANSIÓN INLINE ========================================================================== */ .mmc-opcion-item.mmc-expandible.expandido { border-color: #2563eb; background: #f0f7ff; flex-direction: column; align-items: stretch; cursor: default; } .mmc-opcion-item.mmc-expandible.expandido:hover { border-color: #2563eb; box-shadow: none; } .mmc-expand-header { display: flex; align-items: center; justify-content: space-between; width: 100%; } .mmc-expand-subopciones { display: none; margin-top: 12px; border-top: 1px solid #dbeafe; padding-top: 12px; flex-direction: column; gap: 8px; } .mmc-opcion-item.expandido .mmc-expand-subopciones { display: flex; } .mmc-sub-opcion { padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 4px; background: #fff; cursor: pointer; font-size: 14px; font-weight: 500; color: #111; transition: all 0.15s; text-align: left; } /* El color del texto se repite con !important en :hover/:focus porque el estilo de botones del tema (Kadence) pinta la letra de BLANCO al pasar el mouse, y estos botones quedaban en blanco sobre blanco: el texto desaparecía. */ .mmc-sub-opcion:hover, .mmc-sub-opcion:focus, .mmc-sub-opcion:focus-visible, .mmc-sub-opcion:active { border-color: #94a3b8; background: #f9fafb !important; color: #111 !important; box-shadow: none !important; outline: none !important; } /* ========================================================================== PROGRESIVO — CARD CON IMAGEN + TÍTULO + DESCRIPCIÓN ========================================================================== */ .mmc-progresivo-card { align-items: flex-start; gap: 20px; padding: 20px; } .mmc-progresivo-img-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; width: 90px; } .mmc-progresivo-img-wrap img { width: 70px; height: 70px; object-fit: contain; border-radius: 50%; border: 1px solid #e5e7eb; background: #f9fafb; } .mmc-progresivo-img-titulo { font-size: 13px; font-weight: 600; color: #111; text-align: center; } .mmc-progresivo-img-placeholder { width: 70px; height: 70px; border-radius: 50%; border: 1px solid #e5e7eb; background: #f9fafb; display: flex; align-items: center; justify-content: center; } .mmc-progresivo-desc { flex: 1; font-size: 14px; color: #374151; line-height: 1.6; padding-top: 4px; } /* ========================================================================== PAQUETES DE LENTE (PASO 3) ========================================================================== */ .mmc-paquetes-lista { display: flex; flex-direction: column; gap: 10px; max-width: 620px; } /* Mismo diseño de tarjeta que el paso 1 (.mmc-opcion-item): radio 4px y borde de 1px. */ .mmc-paquete-card { display: flex; align-items: stretch; border: 1px solid #e5e7eb; border-radius: 4px; background: #fff; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; overflow: hidden; position: relative; } .mmc-paquete-card:hover { border-color: #94a3b8; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .mmc-paquete-card.seleccionado { border-color: #2563eb; background: #f0f7ff; box-shadow: 0 2px 12px rgba(37,99,235,0.12); } /* Lado izquierdo — imagen + nombre + precio */ .mmc-paquete-izq { width: 130px; min-width: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 12px; gap: 6px; border-right: 1px solid #e5e7eb; background: #fafafa; } .mmc-paquete-card.seleccionado .mmc-paquete-izq { background: #e8f0fe; border-right-color: #bfdbfe; } .mmc-paquete-img { width: 64px; height: 48px; object-fit: contain; display: block; } .mmc-paquete-nombre { font-size: 14px; font-weight: 600; color: #3a4850; text-align: center; line-height: 1.2; } .mmc-paquete-precio-wrap { display: flex; align-items: center; gap: 4px; font-size: 13px; text-align: center; justify-content: center; flex-wrap: wrap; } .mmc-paquete-precio-antes { color: #aaa; text-decoration: line-through; font-size: 12px; } .mmc-paquete-precio-ahora { font-weight: 600; color: #111; } .mmc-paquete-gratis { font-weight: 600; color: #16a34a; font-size: 13px; } /* Divisor vertical */ .mmc-paquete-divider { width: 1px; background: #e5e7eb; flex-shrink: 0; align-self: stretch; } .mmc-paquete-card.seleccionado .mmc-paquete-divider { background: #bfdbfe; } /* Lado derecho — tags + descripción */ .mmc-paquete-der { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; justify-content: center; } /* El botón de tooltip de la tarjeta de índice ya no necesita posición propia — hereda el overlay superior derecho de .mmc-tooltip-btn (ver más arriba en el archivo). */ /* Tags de beneficios */ .mmc-paquete-tags { display: flex; flex-wrap: wrap; gap: 6px; } .mmc-paquete-tag { font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 20px; white-space: nowrap; } .mmc-tag-azul { background: #dbeafe; color: #1e40af; } .mmc-tag-verde { background: #d1fae5; color: #065f46; } .mmc-tag-naranja{ background: #fed7aa; color: #92400e; } .mmc-tag-gris { background: #f1f5f9; color: #475569; } .mmc-tag-morado { background: #ede9fe; color: #5b21b6; } /* Descripción */ .mmc-paquete-desc { font-size: 13px; color: #5b6971; line-height: 1.55; } .mmc-paquete-desc strong { font-weight: 600; color: #3a4850; } /* ========================================================================== TIPOS DE LENTE (PASO 4) ========================================================================== */ .mmc-tipos-lista { display: flex; flex-direction: column; gap: 10px; max-width: 620px; } /* Mismo diseño de tarjeta que el paso 1 (.mmc-opcion-item): radio 4px, borde de 1px y más aire adentro, para que todos los pasos del modal se vean iguales. */ .mmc-tipo-card { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border: 1px solid #e5e7eb; border-radius: 4px; background: #fff; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; gap: 16px; } .mmc-tipo-card:hover { border-color: #94a3b8; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .mmc-tipo-card.seleccionado { border-color: #2563eb; background: #f0f7ff; box-shadow: 0 2px 12px rgba(37,99,235,0.12); } .mmc-tipo-textos { flex: 1; display: flex; flex-direction: column; gap: 6px; } .mmc-tipo-titulo { font-size: 16px; font-weight: 600; color: #3a4850; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .mmc-tipo-titulo-marca { display: inline-flex; align-items: center; gap: 4px; } .mmc-tipo-precio { font-size: 13px; font-weight: 400; color: #374151; white-space: nowrap; } .mmc-tipo-precio del { color: #aaa; font-size: 12px; } .mmc-tipo-precio-gratis { font-weight: 600; color: #16a34a; font-size: 13px; } .mmc-tipo-desc { font-size: 14px; color: #5b6971; line-height: 1.5; } .mmc-tipo-img { width: 72px; height: 60px; object-fit: contain; flex-shrink: 0; opacity: 0.85; transition: opacity 0.15s; } .mmc-tipo-card:hover .mmc-tipo-img, .mmc-tipo-card.seleccionado .mmc-tipo-img { opacity: 1; } /* ========================================================================== TOOLTIP FLOTANTE ========================================================================== */ #mmc-tooltip-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 100000000; display: none; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; } #mmc-tooltip-overlay.visible { display: flex; } #mmc-tooltip-box { position: relative; background: #fff; border-radius: 14px; padding: 26px 24px 24px; max-width: 340px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.25); } #mmc-tooltip-cerrar { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 22px; color: #999; cursor: pointer; line-height: 1; padding: 0; } #mmc-tooltip-texto { font-size: 14px; color: #374151; line-height: 1.65; margin: 0 0 12px; padding-right: 14px; } #mmc-tooltip-texto:last-child { margin-bottom: 0; } #mmc-tooltip-img { width: 100%; border-radius: 8px; object-fit: cover; max-height: 220px; display: block; } /* ========================================================================== RESPONSIVE — MOBILE/TABLET (≤900px): diseño propio, no solo reflow del de escritorio ========================================================================== */ /* Logo del header — solo se ve en mobile/tablet (ver media query abajo). !important porque Kadence trae sus propias reglas para .custom-logo-link / .custom-logo (a veces las oculta en mobile según su config. de header), y necesitamos ganarles siempre dentro de este modal específico. */ /* Visible también en escritorio, en la esquina superior izquierda del modal (antes solo se mostraba en celular, ver el bloque @media de más abajo, que solo le agrega un ancho fijo). */ /* El logo arranca en la MISMA línea vertical que el contenido de la columna izquierda ("Volver al producto", el nombre del producto, el Subtotal), en vez de pegarse al borde del modal. Cálculo: la columna izquierda ocupa la mitad del modal (ancho W) y dentro lleva una caja de 480px centrada (ver "ANCHO DE LA CAJA" más abajo), así que su borde izquierdo cae en 0,25·W - 240px. El padding de este logo arranca después de los 32px del header, y OJO: un padding en % se calcula sobre el ancho del CONTENEDOR (el header, W - 64px), no sobre el del propio elemento — de ahí el 25% y no el 50%. Queda 25% - 256px. max(0px, …) evita valores negativos en pantallas angostas. Si cambia el ancho de esa caja (480px) o el padding del header (32px), hay que recalcular este número. */ #mmc-modal-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; width: 50%; box-sizing: border-box; padding-left: max(0px, calc(25% - 256px)); } .mmc-modal-logo-text { font-weight: 700; font-size: 15px; color: #111; } #mmc-modal-logo .custom-logo-link { display: inline-flex !important; align-items: center !important; } /* Alto fijo en vez de max-height: WordPress imprime el logo con sus propios atributos width/height (y un SVG puede venir sin tamaño intrínseco), así que con max-height se veía diminuto. Con height fijo + width auto siempre sale del mismo alto y conserva su proporción. */ #mmc-modal-logo img { display: block !important; height: 38px !important; max-height: none !important; width: auto !important; max-width: 200px !important; object-fit: contain; } .mmc-modal-logo-placeholder { width: 28px; height: 28px; border-radius: 50%; background: #2563eb; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Barra fija inferior y bottom sheets: ocultos por defecto, solo existen en mobile/tablet */ #mmc-mobile-bar, #mmc-lentes-sheet-overlay, .mmc-lentes-sheet, #mmc-review-imagen-wrap { display: none; } /* Dentro de la barra, el modo paso4 arranca oculto — el JS alterna entre este y el genérico */ #mmc-mobile-bar-paso4 { display: none; } @media (max-width: 900px) { /* ---------- HEADER: logo + cerrar arriba, pasos abajo, con divisor entre ambas filas ---------- */ #mmc-modal-header { height: auto; flex-wrap: wrap; row-gap: 12px; padding: 14px 16px 0; } #mmc-modal-logo { display: flex; align-items: center; gap: 8px; order: 1; width: 150px; } /* Un poco más chico que en escritorio (38px) y limitado al ancho del contenedor: con 150px fijos acá, un logo ancho se saldría de su sitio en el header de celular. */ #mmc-modal-logo img { height: 30px !important; max-width: 100% !important; } #mmc-btn-back { display: none; } /* en mobile solo se cierra con la X */ #mmc-cerrar-modal { order: 2; margin-left: auto; } #mmc-pasos-lista { order: 3; width: 100%; justify-content: space-between; padding: 12px 4px; border-top: 1px solid #eee; box-shadow: 0 1px 2px rgba(0,0,0,.03); } /* En mobile el paso va con el número arriba y el nombre debajo (no en fila) */ .mmc-paso { flex-direction: column; gap: 4px; padding: 0; } .mmc-paso-txt { display: block; font-size: 9.5px; } .mmc-paso:not(:last-child)::after { display: none; } /* la línea conectora no calza en layout vertical */ /* ---------- BODY: una sola columna, espacio abajo para la barra fija ---------- */ #mmc-modal-body { flex-direction: column; overflow-y: auto; padding-bottom: 82px; } /* La columna izquierda (imagen, desglose, confianza) se resume en la barra fija + su bottom sheet de "?" — el cristal en modo color vuelve a aparecer, pero en su propio bottom sheet (se agrega en un siguiente paso). */ #mmc-modal-col-izq { display: none; } #mmc-modal-col-der { width: 100%; min-width: 100%; padding: 20px; } .mmc-titulo-paso { font-size: 18px; } .mmc-readers-grid { grid-template-columns: repeat(3, 1fr); } /* Las tarjetas de opciones (uso, protección, sub-protección, índices, paquetes, etc.) ocupaban solo su max-width de escritorio y quedaban pegadas a la izquierda con un hueco al lado — en mobile deben usar todo el ancho disponible. */ .mmc-opciones-lista, .mmc-tipos-lista, .mmc-paquetes-lista, .mmc-readers-grid, .mmc-review-box { max-width: 100%; } /* ---------- BARRA FIJA INFERIOR ---------- */ #mmc-mobile-bar { display: block; /* pisa el display:none por defecto (oculto en escritorio) */ position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: #fff; border-top: 1px solid #e5e7eb; box-shadow: 0 -2px 10px rgba(0,0,0,.05); padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); } /* Modo genérico (todas las pantallas menos el resumen final) */ #mmc-mobile-bar-generico { display: flex; align-items: center; justify-content: space-between; gap: 14px; } #mmc-mobile-bar-precio-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; } #mmc-mobile-bar-precio-row { display: flex; align-items: center; justify-content: center; gap: 8px; } #mmc-mobile-bar-precio-antes { font-size: 13px; color: #aaa; font-weight: 400; } #mmc-mobile-bar-precio-final { font-size: 17px; font-weight: 700; color: #111; } #mmc-mobile-bar-info-btn, #mmc-mobile-bar-info-btn:hover, #mmc-mobile-bar-info-btn:focus, #mmc-mobile-bar-info-btn:active { width: 18px; height: 18px; border: none !important; background: none !important; box-shadow: none !important; outline: none !important; color: #3a4850 !important; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0; } #mmc-mobile-bar-info-btn svg { width: 16px; height: 16px; display: block; } #mmc-mobile-bar-nombre { font-size: 14px; font-weight: 600; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55vw; } #mmc-mobile-bar-continuar { padding: 12px 22px; background: #023E5E; color: #fff; border: none; border-radius: 8px; font-size: 14.5px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background .2s; } #mmc-mobile-bar-continuar:hover:not(:disabled) { background: #020621; } #mmc-mobile-bar-continuar:disabled { background: #c5c5c5; cursor: not-allowed; } /* Modo resumen final (paso 4): total + ahorro/cupón arriba, 2 botones abajo */ #mmc-mobile-bar-paso4-descuentos { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; } #mmc-mobile-bar-paso4-ahorro, #mmc-mobile-bar-paso4-cupon { font-size: 12px; color: #16a34a; font-weight: 600; } #mmc-mobile-bar-paso4-total-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 15px; font-weight: 700; color: #111; margin-bottom: 10px; } #mmc-mobile-bar-paso4-precio-regular { font-size: 13px; font-weight: 400; color: #aaa; margin-right: 6px; } #mmc-mobile-bar-paso4-botones { display: flex; gap: 10px; } #mmc-mobile-bar-paso4-botones .mmc-btn-review-outline, #mmc-mobile-bar-paso4-botones .mmc-btn-review-solido { margin: 0; } /* En el resumen final, el total/ahorro/cupón, los botones y la fila de confianza ya viven en la barra fija — hay reglas de escritorio sin media query más abajo en el archivo con el mismo peso, así que se neutralizan con !important. */ .mmc-review-total-wrap, .mmc-review-botones, .mmc-review-confianza { display: none !important; } /* ---------- BOTTOM SHEETS (patrón compartido) ---------- */ #mmc-lentes-sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999998; } #mmc-lentes-sheet-overlay.activo { display: block; } .mmc-lentes-sheet { position: fixed; left: 0; right: 0; bottom: -100%; width: 100%; max-height: 80vh; background: #fff; z-index: 999999; border-radius: 20px 20px 0 0; box-shadow: 0 -5px 25px rgba(0,0,0,.15); transition: bottom .35s cubic-bezier(.25,.8,.25,1); display: flex; flex-direction: column; } .mmc-lentes-sheet.activo { display: flex; bottom: 0; } .mmc-lentes-sheet-drag { width: 36px; height: 4px; background: #dcdcdc; border-radius: 4px; margin: 12px auto 0; flex-shrink: 0; } .mmc-lentes-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px 16px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; } .mmc-lentes-sheet-header h3 { margin: 0; font-size: 17px; font-weight: 700; color: #111; } .mmc-lentes-sheet-cerrar { background: none; border: none; font-size: 22px; line-height: 1; color: #888; cursor: pointer; padding: 0; } .mmc-lentes-sheet-content { padding: 20px 22px; overflow-y: auto; } /* Dentro del sheet de precio reutilizamos los mismos bloques del desglose de escritorio (los iconos de confianza se quedan en fila de 3 columnas, igual que en escritorio). */ #mmc-mobile-sheet-precio-contenido .mmc-desglose-row { padding: 8px 0; } /* Sheet de color: la vista de máscara y su info siempre están visibles dentro del sheet (el sheet mismo es lo que se muestra/oculta con .activo), a diferencia de escritorio donde dependen de la clase .mmc-mascara-activa de la columna izquierda. */ #mmc-lentes-sheet-mascara-view, #mmc-lentes-sheet-mascara-info { display: block; } #mmc-lentes-sheet-color .mmc-color-swatches { justify-content: center; margin-top: 18px; margin-bottom: 0; } #mmc-lentes-sheet-color .mmc-color-swatch { width: 40px; height: 40px; } .mmc-lentes-sheet-footer { padding: 14px 22px; border-top: 1px solid #f0f0f0; flex-shrink: 0; } .mmc-lentes-sheet-footer .mmc-btn-confirmar-color { width: 100%; padding: 13px; font-size: 15px; } /* Los botones "Continuar" inline de cada pantalla se reemplazan por el de la barra fija */ .mmc-btn-continuar, .mmc-btn-confirmar-recub { display: none; } /* ---------- TABLA DE PRESCRIPCIÓN (Rx) ---------- A este ancho una tabla horizontal de 4-5 columnas no entra sin cortar texto, así que se convierte en "tarjeta por ojo": el título (Derecho/Izquierdo/PD) arriba, y sus campos en una grilla de 3 (o 4 con Add) columnas debajo, cada uno con su propia mini-etiqueta. */ /* Hay varias reglas de max-width de escritorio para esta tabla que no están protegidas por media query (más abajo en el archivo) — se neutralizan con !important para que no ganen por orden de aparición. */ .mmc-rx-table-wrap, .mmc-rx-table-wrap:has(.mmc-rx-table-extendida) { max-width: 100% !important; } .mmc-rx-table, .mmc-rx-table.mmc-rx-table-extendida { display: block !important; width: 100% !important; max-width: 100% !important; } .mmc-rx-table tbody { display: block; width: 100%; } .mmc-rx-table thead { display: none; } /* las etiquetas por campo van sobre cada select (data-label) */ .mmc-rx-table tbody tr { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 8px; row-gap: 10px; border: none; border-bottom: 1px solid #eef1f5; padding-bottom: 14px; margin-bottom: 14px; height: auto !important; /* pisa el "height:1px" pensado para la tabla de escritorio */ } .mmc-rx-table.mmc-rx-table-extendida tbody tr { grid-template-columns: repeat(4, 1fr); } #mmc-rx-pd-row { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .mmc-rx-table tbody th { grid-column: 1 / -1; display: block; background: none !important; /* hay reglas de escritorio sin media query más abajo en el archivo con el mismo peso */ border: none; padding: 0; font-size: 13px; white-space: normal !important; height: auto; } .mmc-rx-table tbody td { display: block; border: none; padding: 0; vertical-align: top; height: auto; } .mmc-rx-table tbody td[data-label]::before { content: attr(data-label); display: block; font-size: 9.5px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; } .mmc-rx-table .mmc-rx-add-col { display: none !important; } .mmc-rx-table.mmc-rx-table-extendida .mmc-rx-add-col { display: block !important; } .mmc-rx-select { height: 34px; font-size: 12.5px !important; width: 100%; } .mmc-rx-extra-grid { flex-direction: column; gap: 12px; } .mmc-rx-extra-grid .mmc-field { min-width: 0; } /* Imagen + badge de color del resumen final (paso 4) */ #mmc-review-imagen-wrap { display: block; position: relative; max-width: 260px; margin: 0 auto 20px; } /* Tarjetas de Progresivo e Índice: la columna de imagen les deja poco espacio al texto */ .mmc-progresivo-img-wrap { width: 66px; } .mmc-progresivo-img-wrap img, .mmc-progresivo-img-placeholder { width: 56px; height: 56px; } .mmc-progresivo-card { gap: 14px; padding: 16px; } .mmc-paquete-izq { width: 96px; min-width: 96px; padding: 14px 8px; } } /* ========================================================================== PRESCRIPCIÓN ONLINE — FORMULARIO ========================================================================== */ .mmc-como-leer-link, .mmc-como-leer-link:hover, .mmc-como-leer-link:focus, .mmc-como-leer-link:active { display: inline-flex; align-items: center; gap: 6px; background: none !important; box-shadow: none !important; outline: none !important; border: none; color: #2563eb; font-size: 14px; font-weight: 500; text-decoration: underline; cursor: pointer; padding: 0; margin-bottom: 24px; } .mmc-help-circle { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; text-decoration: none; color: #3a4850; } .mmc-help-circle svg { width: 16px; height: 16px; display: block; } .mmc-rx-table-wrap { max-width: 560px; overflow-x: auto; } .mmc-rx-table { width: 100%; border-collapse: collapse; background: #fff; } .mmc-rx-table th, .mmc-rx-table td { border: 1px solid #e5e7eb; padding: 10px 12px; text-align: left; font-size: 13px; } .mmc-rx-table thead th { background: #f8fafc; font-weight: 600; color: #374151; } .mmc-rx-table tbody th { background: #f8fafc; font-weight: 600; color: #111; white-space: nowrap; } .mmc-rx-select { width: 100%; height: 34px; padding: 0 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; color: #111; background: #fff; outline: none; transition: border-color .15s; } .mmc-rx-select:focus { border-color: #2563eb; } .mmc-rx-select:disabled { background: #f3f4f6; color: #aaa; cursor: not-allowed; } .mmc-rx-pd-wrap { max-width: 480px; margin-bottom: 20px; } .mmc-rx-pd-single, .mmc-rx-pd-dual { margin-bottom: 12px; } .mmc-rx-pd-single label, .mmc-rx-pd-dual-item label { display: block; font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; margin-bottom: 5px; } .mmc-rx-pd-dual { display: flex; gap: 14px; } .mmc-rx-pd-dual-item { flex: 1; } .mmc-rx-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; cursor: pointer; } .mmc-rx-comentarios { max-width: 560px; margin-bottom: 24px; } .mmc-rx-comentarios label { display: block; font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; margin-bottom: 6px; } .mmc-rx-comentarios textarea { width: 100%; min-height: 90px; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; color: #111; resize: vertical; outline: none; } .mmc-rx-comentarios textarea:focus { border-color: #2563eb; } /* ========================================================================== MODAL: CÓMO LEER MI RECETA ========================================================================== */ #mmc-como-leer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 100000000; display: none; align-items: center; justify-content: center; } #mmc-como-leer-overlay.activo { display: flex; } #mmc-como-leer-modal { background: #fff; border-radius: 14px; width: 90%; max-width: 700px; max-height: 85vh; overflow: hidden; display: flex; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.25); } #mmc-como-leer-cerrar { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 22px; color: #999; cursor: pointer; line-height: 1; z-index: 2; } #mmc-como-leer-tabs { width: 220px; flex-shrink: 0; background: #f8fafc; padding: 24px 18px; border-right: 1px solid #e5e7eb; display: flex; flex-direction: column; gap: 4px; } #mmc-como-leer-tabs h3 { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 16px; line-height: 1.3; } .mmc-cl-tab { text-align: left; background: none; border: none; padding: 10px 10px; border-radius: 6px; font-size: 13px; color: #64748b; cursor: pointer; transition: all .15s; } .mmc-cl-tab:hover { background: #eef2f7; color: #111; } .mmc-cl-tab.active { background: #e6f0ff; color: #2563eb; font-weight: 600; } #mmc-como-leer-contenido { flex: 1; padding: 28px 32px; overflow-y: auto; } #mmc-cl-titulo { font-size: 17px; font-weight: 700; color: #111; margin: 0 0 10px; } #mmc-cl-texto { font-size: 13.5px; color: #4b5563; line-height: 1.6; margin: 0 0 22px; } .mmc-cl-ejemplo, .mmc-cl-ejemplo-pd { width: 100%; border-collapse: collapse; } .mmc-cl-ejemplo th, .mmc-cl-ejemplo td, .mmc-cl-ejemplo-pd th, .mmc-cl-ejemplo-pd td { border: 1px solid #e5e7eb; padding: 10px 12px; font-size: 13px; text-align: left; } .mmc-cl-ejemplo thead th { background: #f8fafc; color: #374151; font-weight: 600; } .mmc-cl-ejemplo tbody th { background: #f8fafc; color: #111; font-weight: 600; white-space: nowrap; } .mmc-cl-highlight { background: #dbeafe !important; color: #1e40af; font-weight: 600; } @media (max-width: 600px) { #mmc-como-leer-modal { flex-direction: column; max-height: 90vh; } #mmc-como-leer-tabs { width: 100%; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid #e5e7eb; } .mmc-rx-pd-dual { flex-direction: column; } } /* ========================================================================== SELECTOR DE COLOR INLINE (fotocromáticos / tintados) ========================================================================== */ /* Sin caja, igual que el selector de recubrimiento: antes iba dentro de un recuadro azul con fondo celeste, pegado bajo la tarjeta, que tapaba el bloque entero y se veía pesado. Ahora cuelga de la tarjeta elegida y lo único que destaca son los colores y el botón. */ .mmc-color-selector-inline { border: none; background: transparent; border-radius: 0; padding: 14px 2px 4px; margin-top: 0; margin-bottom: 10px; } /* Mismo tamaño y colores que el título del selector de recubrimiento. */ .mmc-color-selector-titulo { font-size: 14px; font-weight: 600; color: #5b6971; margin-bottom: 12px; } .mmc-color-selector-titulo span { color: #3a4850; font-weight: 700; } .mmc-color-swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .mmc-color-swatch { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 2px solid #e5e7eb; transition: all .15s; display: block; background-size: cover; background-position: center; } .mmc-color-swatch:hover { transform: scale(1.08); } .mmc-color-swatch.activo { border-color: #111; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111; } /* radio 4px (antes 8px) — mismo que las tarjetas de selección del modal. Esta clase la comparten el botón del selector de color y el de recubrimiento, así que los dos quedan iguales. */ .mmc-btn-confirmar-color { padding: 10px 22px; background: #023E5E; color: #fff; border: none; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s; } .mmc-btn-confirmar-color:hover { background: #020621; } .mmc-btn-confirmar-color:disabled { background: #c5c5c5; cursor: not-allowed; } .mmc-nivel-item { margin-bottom: 10px; } /* ========================================================================== TAGS EN PROTECCIÓN/SUB-PROTECCIÓN (diseño tipo-card) — ilimitados ========================================================================== */ .mmc-tipo-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; } /* Tags en Índice ya existían (.mmc-paquete-tags) — solo confirmamos wrap */ .mmc-paquete-tags { display:flex; flex-wrap:wrap; gap:6px; } /* ========================================================================== SELECTOR DE RECUBRIMIENTO (inline, dentro de la card de Índice) ========================================================================== */ /* Sin caja: antes todo el desglose iba dentro de un recuadro azul con fondo celeste que competía con las propias opciones y se veía pesado. Ahora cuelga directo de la tarjeta de índice elegida y lo único con borde son las filas de recubrimiento. */ .mmc-recub-selector-inline { border: none; background: transparent; border-radius: 0; padding: 14px 2px 4px; margin-top: 0; margin-bottom: 10px; } /* Cabecera: título + "Requerido" como etiqueta a la derecha (antes iba entre paréntesis dentro del propio título, donde se perdía). */ .mmc-recub-selector-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .mmc-recub-selector-titulo { font-size: 14px; font-weight: 600; color: #3a4850; } .mmc-recub-requerido { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #5b6971; background: #e8edf1; border-radius: 3px; padding: 3px 8px; white-space: nowrap; } /* gap 14px (antes 8px): la etiqueta "Recomendado" se monta 8px por encima del borde de su fila, con 8px de separación quedaba tocando la fila de arriba. */ .mmc-recub-opciones { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; } .mmc-recub-opcion { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 4px; background: #fff; cursor: pointer; transition: all .15s; } .mmc-recub-opcion:hover { border-color: #94a3b8; } .mmc-recub-opcion.activo { border-color: #2563eb; background: #eff6ff; box-shadow: 0 1px 6px rgba(37,99,235,.10); } /* Círculo de selección — indica que las opciones son excluyentes (se elige una). */ .mmc-recub-radio { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid #cbd5e1; background: #fff; position: relative; transition: all .15s; } .mmc-recub-opcion.activo .mmc-recub-radio { border-color: #2563eb; } .mmc-recub-opcion.activo .mmc-recub-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #2563eb; } /* La opción recomendada ya no lleva la píldora naranja flotando sobre el borde: se distingue con un borde suave y la etiqueta "Recomendado" al lado del nombre (.mmc-recub-chip). */ /* padding-top algo mayor que las demás filas (12px): la etiqueta "Recomendado" se monta sobre el borde de arriba y quedaba pegada a la imagen. */ .mmc-recub-opcion.mmc-recub-recomendado { border-color: #fcd9a4; background: #fffdf8; padding-top: 17px; } .mmc-recub-opcion.mmc-recub-recomendado.activo { border-color: #2563eb; background: #eff6ff; } /* Va montada sobre el borde superior de su fila (como la píldora naranja anterior, que se notaba más), pero con el color suave: fondo crema, texto ámbar y un borde que corta la línea de la tarjeta para que se lea limpia. Se ancla a .mmc-recub-opcion, que es position:relative. */ .mmc-recub-chip { position: absolute; top: -8px; left: 14px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #a25b06; background: #fdf0dc; border: 1px solid #fcd9a4; border-radius: 3px; padding: 1px 7px; white-space: nowrap; } .mmc-recub-img { width: 40px; height: 32px; object-fit: contain; flex-shrink: 0; } .mmc-recub-textos { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .mmc-recub-nombre-linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mmc-recub-textos strong { font-size: 14px; color: #3a4850; } /* Precios a la derecha, en columna: antes tachado / precio / ahorro. */ .mmc-recub-precio-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; text-align: right; line-height: 1.2; } .mmc-recub-precio-antes { font-size: 11.5px; color: #9aa5ad; } .mmc-recub-precio { font-size: 14px; color: #3a4850; font-weight: 700; } .mmc-recub-precio-gratis { color: #12805c; } .mmc-recub-ahorro { font-size: 10px; font-weight: 700; color: #e0102c; background: #fdecea; border-radius: 3px; padding: 1px 6px; } /* El "?" de ayuda vuelve al flujo de la fila (en el resto del modal va flotando en la esquina): acá compartiría lugar con el precio y se superpondrían. */ .mmc-recub-opcion .mmc-tooltip-btn, .mmc-recub-opcion .mmc-tooltip-btn:hover, .mmc-recub-opcion .mmc-tooltip-btn:focus { position: static; flex-shrink: 0; margin-left: 2px; } .mmc-recub-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .mmc-recub-ayuda { font-size: 12px; color: #5b6971; } .mmc-btn-confirmar-recub:disabled { background: #c5c5c5; cursor: not-allowed; } /* Con una opción ya elegida, el texto de ayuda sobra. */ .mmc-recub-opciones:has(.mmc-recub-opcion.activo) ~ .mmc-recub-pie .mmc-recub-ayuda { display: none; } @media (max-width: 767px) { .mmc-recub-opcion { gap: 10px; padding: 12px; } .mmc-recub-img { width: 32px; height: 28px; } .mmc-btn-confirmar-recub { flex: 1; } } /* ========================================================================== MENSAJE DE VALIDACIÓN — FORMULARIO DE PRESCRIPCIÓN ========================================================================== */ .mmc-rx-error-msg { font-size: 13px; font-weight: 600; color: #ea580c; margin: 10px 0 4px; } /* ========================================================================== PASO 4 — REVISIÓN FINAL DEL PEDIDO ========================================================================== */ /* En Paso 4, la columna izquierda solo muestra la imagen, grande y sola */ #mmc-modal-col-izq.mmc-paso4-activo #mmc-desglose-precio { display: none; } #mmc-modal-col-izq.mmc-paso4-activo #mmc-modal-img-lente { max-width: 100%; } #mmc-modal-col-izq.mmc-paso4-activo #mmc-resumen-producto { gap: 20px; } .mmc-review-box { max-width: 620px; } .mmc-review-row { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid #f1f5f9; } .mmc-review-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #64748b; background: #f8fafc; border-radius: 10px; } .mmc-review-content { flex: 1; display: flex; flex-direction: column; gap: 6px; } .mmc-review-header-row { display: flex; align-items: center; justify-content: space-between; } .mmc-review-titulo { font-size: 15px; color: #111; } .mmc-review-sub { font-size: 13.5px; color: #475569; line-height: 1.5; } .mmc-review-edit { background: none; border: none; color: #2563eb; font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0; } /* "Editar" y "Ver receta" son