/* ========================================================================== MAGIVERCOL · PÁGINAS V6 — v1 Hoja de las páginas de la ronda 2 y 3 de REVISIONPORPAGINA.md: pie de página, carrito, buscador y 404. Va DESPUÉS de la hoja de catálogo. No reemplaza nada: solo viste marcado nativo de Tiendanube y añade lo que el sistema V6 no cubría todavía. ========================================================================== */ /* --- 1 · PIE: MEDIOS DE PAGO Y REDES ----------------------------------- */ /* El V6 pintaba los medios de pago como chips de texto. Ahora son logos reales en píldora blanca: sobre el negro del pie, las versiones monocromas de PSE y Mastercard pierden el texto interior. */ body.mg .mg-ftr__pay{gap:8px} body.mg .mg-ftr__pay-lbl{height:auto!important;background:transparent!important; border:0!important;padding:0!important;margin-right:2px; font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:rgba(255,255,255,.32)} body.mg .mg-pay{height:30px;display:inline-flex;align-items:center;justify-content:center; padding:0 10px;border-radius:8px;background:#fff;border:0; box-shadow:0 1px 2px rgba(0,0,0,.3)} body.mg .mg-pay img{display:block;width:auto;object-fit:contain} /* Instagram y Facebook: glifo blanco directo sobre el fondo oscuro. */ body.mg .mg-ftr__soc{display:inline-flex;align-items:center;gap:9px} body.mg .mg-ftr__soc img{width:15px;height:15px;flex:none;object-fit:contain; opacity:.66;transition:opacity .25s ease} body.mg .mg-ftr__soc:hover img{opacity:1} @media (max-width:859px){ body.mg .mg-ftr__pay{gap:7px} body.mg .mg-pay{height:28px;padding:0 9px} } /* --- 2 · CARRITO ------------------------------------------------------- */ /* El marcado del carrito es el nativo (js-cart-item, LS.plusQuantity, LS.removeItem). Aquí solo se le da la forma de .mg-line del sistema V6. Reemplazarlo rompería el ajax de cantidades y el de eliminar. */ .mg-cartpage{display:grid;grid-template-columns:1.5fr .85fr;gap:clamp(20px,2.6vw,32px); align-items:start} @media (max-width:899px){ .mg-cartpage{grid-template-columns:1fr} } body.mg .mg-cartpage .js-cart-item{display:flex;gap:16px;padding:16px;margin:0 0 12px; border:1px solid var(--mg-line);border-radius:18px;background:#fff} body.mg .mg-cartpage .js-cart-item > div{padding:0!important;margin:0!important; flex:none;max-width:none;width:auto} body.mg .mg-cartpage .js-cart-item .divider{display:none} body.mg .mg-cartpage .js-cart-item > div:first-child{width:76px;flex:none} body.mg .mg-cartpage .js-cart-item img{width:76px;aspect-ratio:3/4;object-fit:cover; border-radius:12px;background:#f2f2f6;display:block} body.mg .mg-cartpage .js-cart-item > div:nth-child(2){flex:1;min-width:0} body.mg .mg-cartpage .js-cart-item .row{margin:0!important;display:flex;flex-wrap:wrap; align-items:center;gap:10px;width:100%} /* Nombre y variante */ body.mg .mg-cartpage .js-cart-item h6{flex:1 1 100%;margin:0 0 2px!important; font-size:15px;font-weight:700;letter-spacing:-.014em;line-height:1.3} body.mg .mg-cartpage .js-cart-item h6 a{color:var(--mg-ink)!important;text-decoration:none} /* El formato elegido (Cuenta / Código) llega en : se vuelve insignia. */ body.mg .mg-cartpage .js-cart-item h6 small{display:inline-flex;align-items:center; height:24px;padding:0 10px;margin-top:7px;border-radius:999px; border:1px solid rgba(255,255,255,.92);background:var(--mg-iris-grad); box-shadow:var(--mg-iris-sh);color:#1d1d1f;font-size:11.5px;font-weight:700; letter-spacing:-.01em} body.mg .mg-cartpage .mg-changefmt{font-size:12px;font-weight:600;color:var(--mg-ink-2); text-decoration:underline;text-underline-offset:3px;margin-left:9px} body.mg .mg-cartpage .mg-changefmt:hover{color:var(--mg-ink)} /* Cantidad: controles nativos con área táctil de 44 px */ body.mg .mg-cartpage .cart-item-quantity{flex:none;width:auto} body.mg .mg-cartpage .form-quantity{display:inline-flex;align-items:center;height:40px; border:1px solid var(--mg-line-2);border-radius:12px;background:#fff;overflow:hidden} body.mg .mg-cartpage .js-cart-quantity-btn{min-width:38px;min-height:38px;display:inline-flex; align-items:center;justify-content:center;padding:0;background:transparent;border:0} body.mg .mg-cartpage .js-cart-quantity-input{width:38px;height:38px;border:0;padding:0; text-align:center;font-size:14px;font-weight:700;background:transparent} /* Precios */ body.mg .mg-cartpage .js-cart-item-subtotal{font-size:18px;font-weight:700; letter-spacing:-.024em;color:var(--mg-ink);margin:0} body.mg .mg-cartpage .price-compare{font-size:12.5px;color:var(--mg-ink-3); text-decoration:line-through} body.mg .mg-cartpage .text-accent{color:var(--mg-red)!important;font-size:12px;font-weight:700} body.mg .mg-cartpage .cart-item-subtotal-short{display:none!important} /* Eliminar */ body.mg .mg-cartpage .cart-item-delete{flex:none;width:auto;align-self:flex-start} body.mg .mg-cartpage .cart-item-delete .btn{width:36px;height:36px;padding:0; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--mg-line);border-radius:10px;background:#fff;color:var(--mg-ink-3)} body.mg .mg-cartpage .cart-item-delete .btn:hover{color:var(--mg-red); border-color:rgba(224,31,61,.3)} /* Resumen: el total nativo, con la caja del sistema */ body.mg .mg-cartsum{border:1px solid var(--mg-line);border-radius:var(--mg-r-card); background:var(--mg-surface);padding:22px;position:sticky;top:110px} body.mg .mg-cartsum .cart-subtotal, body.mg .mg-cartsum .cart-total{float:none;margin:0;display:flex; justify-content:space-between;gap:12px;align-items:baseline} body.mg .mg-cartsum .cart-total{padding-top:14px;margin-top:12px; border-top:1px solid var(--mg-line);font-size:15px} @media (max-width:899px){ body.mg .mg-cartsum{position:static} } /* Aviso de la promoción y estado vacío */ .mg-cartnote{display:flex;align-items:flex-start;gap:11px;padding:14px 16px;margin:0 0 14px; border:1px solid var(--mg-line);border-radius:16px;background:var(--mg-surface); font-size:13.5px;line-height:1.55;color:var(--mg-ink-2)} .mg-cartnote b{color:var(--mg-ink)} .mg-cartnote__ico{flex:none;width:26px;height:26px;border-radius:9px;display:grid; place-items:center;background:var(--mg-iris-grad);border:1px solid rgba(255,255,255,.9); box-shadow:var(--mg-iris-sh);color:#1d1d1f;font-size:12px;font-weight:800} .mg-back{display:inline-block;margin-top:6px;font-size:13.5px;font-weight:600; color:var(--mg-ink);text-decoration:none} .mg-back:hover{text-decoration:underline;text-underline-offset:3px} /* --- 3 · BUSCADOR Y 404: estados compartidos --------------------------- */ .mg-state{display:flex;flex-direction:column;align-items:center;text-align:center; gap:11px;background:#fff;border:1px solid var(--mg-line);border-radius:20px; padding:clamp(28px,4vw,52px)} .mg-state__ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center; background:#f4f4f7;color:var(--mg-ink-3)} .mg-state h2{font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.028em; color:var(--mg-ink)} .mg-state p{font-size:14px;line-height:1.6;color:var(--mg-ink-2);max-width:46ch} .mg-state__cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px} /* El 404 va en oscuro, como el CTA de cierre de la home. */ .mg-state--dark{background:var(--mg-black);border-color:rgba(255,255,255,.12)} .mg-state--dark h2{color:#fff} .mg-state--dark p{color:rgba(255,255,255,.62)} .mg-state--dark .mg-state__ico{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7)} .mg-state--dark .mg-btn--ghost{border-color:rgba(255,255,255,.24);color:#fff; background:transparent} .mg-state--dark .mg-btn--ghost:hover{background:rgba(255,255,255,.08)} @media (prefers-reduced-motion:reduce){ body.mg .mg-cartpage .js-cart-item{transition:none!important} } /* --- 4 · PÁGINAS INFORMATIVAS Y CONTACTO ------------------------------- */ /* El índice se arma solo con los

del contenido pegado desde el admin. Cuando la página tiene una sola sección, el índice sobra. */ .mg-info__index--solo{position:static} @media (min-width:900px){ .mg-info__index--solo{position:sticky} } /* El contenido viene del editor del admin, así que hay que darle forma sin poder tocar su marcado. */ body.mg .mg-info__body.user-content h2, body.mg .mg-info__body.user-content .mg-cat__h2{font-size:21px;font-weight:700; letter-spacing:-.022em;color:var(--mg-ink);margin:14px 0 12px!important; scroll-margin-top:120px} body.mg .mg-info__body.user-content h3{font-size:16px;font-weight:700; letter-spacing:-.016em;color:var(--mg-ink);margin:10px 0 8px!important} body.mg .mg-info__body.user-content p{font-size:15px;line-height:1.7; color:var(--mg-ink-2);max-width:66ch;margin:0 0 14px!important} body.mg .mg-info__body.user-content ul, body.mg .mg-info__body.user-content ol{margin:0 0 16px;padding-left:0;list-style:none; display:flex;flex-direction:column;gap:9px} body.mg .mg-info__body.user-content li{display:flex;gap:11px;font-size:14.5px; line-height:1.6;color:var(--mg-ink-2);max-width:66ch} body.mg .mg-info__body.user-content li::before{content:"";flex:none;width:5px;height:5px; border-radius:50%;background:var(--mg-line-2);margin-top:9px} body.mg .mg-info__body.user-content a{color:var(--mg-ink);text-decoration:underline; text-underline-offset:3px} body.mg .mg-info__body.user-content img{max-width:100%;height:auto;border-radius:14px; border:1px solid var(--mg-line)} body.mg .mg-info__body.user-content table{width:100%;border-collapse:collapse; font-size:14px;margin:0 0 18px} body.mg .mg-info__body.user-content td, body.mg .mg-info__body.user-content th{padding:11px 12px;text-align:left; border-bottom:1px solid var(--mg-line);color:var(--mg-ink-2)} body.mg .mg-info__body.user-content th{color:var(--mg-ink);font-weight:700} /* Enlaces de contacto nativos dentro del panel lateral */ body.mg .mg-contact-links .contact-item{position:relative;padding-left:0;margin-bottom:12px; font-size:13.5px;line-height:1.6;color:var(--mg-ink-2)} body.mg .mg-contact-links a{color:var(--mg-ink)!important;text-decoration:none} body.mg .mg-contact-links a:hover{text-decoration:underline;text-underline-offset:3px} /* Formulario nativo con los controles del sistema */ body.mg .mg-form .form-group{margin-bottom:14px} body.mg .mg-form label{display:block;margin-bottom:6px;font-size:12.5px;font-weight:700; letter-spacing:-.01em;color:var(--mg-ink)} body.mg .mg-form .form-control, body.mg .mg-form input[type=text], body.mg .mg-form input[type=email], body.mg .mg-form input[type=tel], body.mg .mg-form textarea{width:100%;min-height:46px;padding:12px 14px; border:1px solid var(--mg-line-2);border-radius:13px;background:#fff; font-size:14.5px;color:var(--mg-ink);outline:none;box-shadow:none; transition:border-color .2s ease} body.mg .mg-form textarea{min-height:130px;resize:vertical} body.mg .mg-form .form-control:focus, body.mg .mg-form input:focus, body.mg .mg-form textarea:focus{border-color:#b9b9c6} body.mg .mg-form input::placeholder, body.mg .mg-form textarea::placeholder{color:var(--mg-ink-3)} body.mg .mg-form .btn-primary, body.mg .mg-form input[type=submit]{height:50px;width:100%;border:0;border-radius:15px; background:var(--mg-black);color:#fff;font-size:14.5px;font-weight:700; letter-spacing:-.012em;cursor:pointer;box-shadow:none} body.mg .mg-form .btn-primary:hover, body.mg .mg-form input[type=submit]:hover{background:#26262b} /* ========================================================================== 5 · CORRECCIONES DE LA VERIFICACIÓN EN LA TIENDA PUBLICADA (v2) Medido en /comprar/ y en el 404, no en la maqueta. ========================================================================== */ /* --- 5.1 · El resumen del carrito venía en rejilla Bootstrap ----------- */ /* cart-totals.tpl arma cada fila con .row + .col-7/.col. Dentro de una caja de 392 px esas columnas colapsan y el botón de checkout quedaba en 64 px. */ /* Solo las filas de importes se aplanan. Aplanar TODAS las .row dejaba el contenedor del botón de checkout en 180 px, y el botón heredaba ese ancho. */ body.mg .mg-cartsum .row{margin:0!important} body.mg .mg-cartsum .cart-subtotal .row, body.mg .mg-cartsum .js-cart-total-container .row, body.mg .mg-cartsum .cart-total .row{display:flex;flex-wrap:nowrap; align-items:baseline;gap:10px;width:100%} body.mg .mg-cartsum .cart-subtotal [class*="col-"], body.mg .mg-cartsum .cart-subtotal .col, body.mg .mg-cartsum .js-cart-total-container [class*="col-"], body.mg .mg-cartsum .js-cart-total-container .col{padding:0!important;margin:0!important; flex:0 1 auto!important;max-width:none!important;width:auto!important} body.mg .mg-cartsum .text-right{text-align:right;margin-left:auto} /* El cian #18c9e8 es el color de marca del tema; en el sistema V6 los importes van en tinta. */ body.mg .mg-cartsum .js-cart-total, body.mg .mg-cartsum .js-cart-subtotal, body.mg .mg-cartsum .js-ajax-cart-total{color:var(--mg-ink)!important; font-variant-numeric:tabular-nums} body.mg .mg-cartsum .js-cart-total{font-size:25px!important;font-weight:700; letter-spacing:-.03em} body.mg .mg-cartsum .js-cart-total-container{padding-top:14px;margin-top:6px; border-top:1px solid var(--mg-line)} /* Botón de checkout: una sola acción principal, a todo el ancho. */ body.mg .mg-cartsum .btn-primary, body.mg .mg-cartsum input[type=submit]{display:block;width:100%!important; height:52px;padding:0 18px;border:0;border-radius:15px;background:var(--mg-black); color:#fff!important;font-size:15px;font-weight:700;letter-spacing:-.012em; cursor:pointer;box-shadow:none;white-space:nowrap} body.mg .mg-cartsum .btn-primary:hover, body.mg .mg-cartsum input[type=submit]:hover{background:#26262b} body.mg .mg-cartsum .js-ajax-cart-submit{display:block!important;width:100%} body.mg .mg-cartsum .btn-link{color:var(--mg-ink-2)!important;font-size:13px; font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap} body.mg .mg-cartsum .btn-link:hover{color:var(--mg-ink)!important} body.mg .mg-cartsum > * + *{margin-top:2px} /* --- 5.2 · Los +/− de cantidad salían en cian y a 10 px ---------------- */ body.mg .mg-cartpage .js-cart-quantity-btn svg{width:12px;height:12px; fill:var(--mg-ink)!important;color:var(--mg-ink)} body.mg .mg-cartpage .js-cart-quantity-btn:hover{background:#f4f4f7} body.mg .mg-cartpage .form-quantity .row{flex-wrap:nowrap;gap:0;align-items:center} body.mg .mg-cartpage .mg-changefmt{white-space:nowrap} /* --- 5.3 · El botón blanco del 404 tenía el texto blanco --------------- */ /* El estilo en línea (color:#111113) lo pisaba una regla del tema con !important, así que "Ir al catálogo" era invisible. */ body.mg .mg-404 .mg-btn--solid{color:#111113!important} /* --- 5.4 · El WhatsApp del carrito se salía de la caja ----------------- */ body.mg .mg-cartsum .mg-btn--wa-full{display:flex;align-items:center; justify-content:center;width:100%;height:46px;margin-top:12px} /* ========================================================================== 6 · SEGUNDA VERIFICACIÓN DEL CARRITO (v3) ========================================================================== */ /* El botón de checkout salía transparente y a 180 px: el fondo del tema lleva !important y el contenedor había quedado estrecho. */ body.mg .mg-cartsum #go-to-checkout, body.mg .mg-cartsum .btn-primary, body.mg .mg-cartsum input[type=submit]{display:block!important;width:100%!important; max-width:none!important;height:52px;padding:0 18px;border:0!important; border-radius:15px!important;background:#111113!important;background-image:none!important; color:#fff!important;font-size:15px;font-weight:700;letter-spacing:-.012em; cursor:pointer;box-shadow:none!important} body.mg .mg-cartsum #go-to-checkout:hover, body.mg .mg-cartsum .btn-primary:hover, body.mg .mg-cartsum input[type=submit]:hover{background:#26262b!important} /* Los contenedores nativos del botón, a ancho completo. */ body.mg .mg-cartsum .js-ajax-cart-submit, body.mg .mg-cartsum .js-visible-on-cart-filled, body.mg .mg-cartsum .box, body.mg .mg-cartsum .container-fluid{display:block!important;width:100%!important; max-width:none!important;padding:0!important;margin:0!important; border:0!important;background:transparent!important} /* La etiqueta "Total:" seguía en el cian de marca. */ body.mg .mg-cartsum .js-cart-total-container, body.mg .mg-cartsum .js-cart-total-container *{color:var(--mg-ink)!important} body.mg .mg-cartsum .js-cart-total-container .js-cart-total{font-size:25px!important} /* En la línea, el precio tachado se montaba sobre el "+" de cantidad. */ body.mg .mg-cartpage .js-cart-item .cart-item-quantity{margin-right:16px!important} body.mg .mg-cartpage .js-cart-item > div:nth-child(2) > .row > div:last-of-type{ margin-left:auto;text-align:right} /* ========================================================================== 7 · EL RESUMEN VIVE EN UNA REJILLA DE PÁGINA COMPLETA (v4) cart-totals.tpl no está pensado para una columna: monta col-md-8 dentro de col-md-6 dentro de más filas, porque en el tema original ocupa el ancho entero. Dentro de una caja de 392 px eso deja el botón en 75 px. La corrección es apilar: cada columna al 100% y solo las filas de importes vuelven a ser de dos lados. ========================================================================== */ body.mg .mg-cartsum .row{margin:0!important;width:100%!important} body.mg .mg-cartsum [class*="col-"], body.mg .mg-cartsum .col{flex:0 0 100%!important;max-width:100%!important; width:100%!important;padding:0!important;margin:0!important;text-align:left!important} /* Filas de dos lados: etiqueta a la izquierda, importe a la derecha. */ body.mg .mg-cartsum .cart-subtotal .row, body.mg .mg-cartsum .cart-total .row, body.mg .mg-cartsum .js-cart-total-container .row{display:flex!important; flex-wrap:nowrap!important;align-items:baseline;gap:10px} body.mg .mg-cartsum .cart-subtotal .row > [class*="col-"], body.mg .mg-cartsum .cart-subtotal .row > .col, body.mg .mg-cartsum .js-cart-total-container .row > [class*="col-"], body.mg .mg-cartsum .js-cart-total-container .row > .col{flex:0 1 auto!important; width:auto!important;max-width:none!important} body.mg .mg-cartsum .text-right{text-align:right!important;margin-left:auto} /* El botón, ya con un padre de ancho completo. */ body.mg .mg-cartsum #go-to-checkout, body.mg .mg-cartsum input[type=submit]{min-width:0;width:100%!important} body.mg .mg-cartsum .btn-link{display:inline-block;margin-top:10px} /* ========================================================================== 8 · PÁGINAS INFORMATIVAS Y CONTACTO, MEDIDOS EN VIVO (v5) ========================================================================== */ /* --- 8.1 · Preguntas frecuentes --------------------------------------- */ /* El contenido del admin no usa encabezados: cada pregunta es un párrafo. El script las marca con .mg-q para que pesen como título y alimenten el índice. Los párrafos vacíos del editor dejaban huecos de 100 px. */ body.mg .mg-info__body.user-content .mg-q{font-size:17px!important;font-weight:700!important; letter-spacing:-.018em;color:var(--mg-ink)!important;line-height:1.35; margin:26px 0 8px!important;max-width:60ch;scroll-margin-top:120px} body.mg .mg-info__body.user-content .mg-q:first-child{margin-top:0!important} body.mg .mg-info__body.user-content p:empty, body.mg .mg-info__body.user-content div:empty{display:none!important} body.mg .mg-info__body.user-content br + br{display:none} /* Con muchas preguntas el índice se vuelve una columna interminable. */ body.mg .mg-info__index{max-height:calc(100vh - 150px);overflow-y:auto; scrollbar-width:thin;padding-right:4px} body.mg .mg-info__index::-webkit-scrollbar{width:6px} body.mg .mg-info__index::-webkit-scrollbar-thumb{background:var(--mg-line-2);border-radius:3px} body.mg .mg-info__index a{line-height:1.35} body.mg .mg-info__index .mg-btn{position:sticky;bottom:0;flex:none} /* --- 8.2 · Contacto: el icono se montaba sobre el texto ---------------- */ /* .contact-item del tema es position:relative con el icono en absolute a la izquierda; al quitarle el padding, el número quedaba debajo del icono. */ body.mg .mg-contact-links .contact-item{padding-left:27px} body.mg .mg-contact-links .contact-item-icon{position:absolute;left:0;top:1px; width:17px;height:17px;display:grid;place-items:center} body.mg .mg-contact-links .contact-item-icon svg{width:15px;height:15px; fill:var(--mg-ink-3)} /* ========================================================================== 9 · BOTÓN VERDE DE WHATSAPP: TEXTO BLANCO (v6) Medido en la home: el texto salía en rgb(4,52,15), un verde casi negro, sobre el verde #25d366. La regla del sistema pone #fff pero sin !important y otra del tema le ganaba. El botón es sólido: el texto va en blanco siempre, en cualquier página. ========================================================================== */ body.mg .mg-btn--wa-full, body.mg a.mg-btn--wa-full, body.mg .mg-cta-dark .mg-btn--wa-full, body.mg .mg-menu__foot .mg-btn--wa-full{color:#fff!important} body.mg .mg-btn--wa-full:hover, body.mg a.mg-btn--wa-full:hover{color:#fff!important} body.mg .mg-btn--wa-full .mg-dot{background:#fff!important} body.mg .mg-btn--wa-full svg{fill:#fff;stroke:#fff} /* --- 9.1 · El botón flotante tapaba los medios de pago en móvil -------- */ @media (max-width:859px){ body.mg .mg-ftr__bot{padding-bottom:64px} } /* ========================================================================== 10 · CUENTA — login, registro, recuperación y pedidos (v7) Punto 7 de REVISIONPORPAGINA.md. Son nueve plantillas que comparten el mismo marcado nativo (.account-page, .box, .divider y los formularios embebidos). Se visten desde aquí en vez de reescribirlas una por una: el formulario de registro lleva reCAPTCHA y validaciones del lado del servidor que no conviene tocar. ========================================================================== */ /* Encabezado y ancho de lectura */ body[class*="template-account"] .page-header{padding:clamp(18px,3vw,30px) 0 6px} body[class*="template-account"] .page-header h1{font-size:clamp(26px,3.4vw,38px)!important; font-weight:800!important;letter-spacing:-.032em;color:var(--mg-ink)!important} body[class*="template-account"] .account-page{padding-bottom:clamp(30px,5vw,64px)} body[class*="template-account"] .breadcrumbs{justify-content:center} /* La caja del formulario: una tarjeta, no un bloque suelto */ body[class*="template-account"] .account-page .col-md-8, body[class*="template-account"] .account-page .col-md-6{max-width:520px;margin:0 auto; float:none} body.template-account-login .account-page .container > .row, body.template-account-register .account-page .container > .row{justify-content:center} body.template-account-login .account-page form, body.template-account-register .account-page form, body.template-account-reset .account-page form, body.template-account-newpass .account-page form{background:#fff; border:1px solid var(--mg-line);border-radius:var(--mg-r-card); padding:clamp(20px,3vw,28px)} /* Campos: mismos controles que el resto del sistema */ body[class*="template-account"] .form-group{margin-bottom:14px} body[class*="template-account"] label, body[class*="template-account"] .form-label{display:block;margin-bottom:6px; font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:var(--mg-ink)} body[class*="template-account"] .form-control, body[class*="template-account"] input[type=text], body[class*="template-account"] input[type=email], body[class*="template-account"] input[type=tel], body[class*="template-account"] input[type=password], body[class*="template-account"] textarea, body[class*="template-account"] select{width:100%;min-height:46px;padding:12px 14px; border:1px solid var(--mg-line-2);border-radius:13px;background:#fff; font-size:14.5px;color:var(--mg-ink);outline:none;box-shadow:none; transition:border-color .2s ease} body[class*="template-account"] .form-control:focus, body[class*="template-account"] input:focus, body[class*="template-account"] select:focus, body[class*="template-account"] textarea:focus{border-color:#8f8fa0} body[class*="template-account"] input::placeholder{color:var(--mg-ink-3)} /* Estado de error: el tema marca el campo con .notification-danger al lado. */ body[class*="template-account"] .notification-danger{margin-top:7px;padding:9px 12px; border:1px solid rgba(224,31,61,.24);border-radius:11px;background:rgba(224,31,61,.05); font-size:12.5px;line-height:1.5;color:#b3122f} body[class*="template-account"] .notification-centered{text-align:left} /* Botón principal */ body[class*="template-account"] .btn-primary, body[class*="template-account"] input[type=submit]{height:50px;width:100%;border:0; border-radius:15px;background:var(--mg-black);color:#fff;font-size:14.5px; font-weight:700;letter-spacing:-.012em;cursor:pointer;box-shadow:none} body[class*="template-account"] .btn-primary:hover, body[class*="template-account"] input[type=submit]:hover{background:#26262b} body[class*="template-account"] .btn-primary:disabled{opacity:.45;cursor:not-allowed} body[class*="template-account"] .btn-link-primary, body[class*="template-account"] .btn-link{color:var(--mg-ink)!important;font-weight:600; text-decoration:underline;text-underline-offset:3px} body[class*="template-account"] .btn-secondary{height:44px;padding:0 16px; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--mg-line-2);border-radius:13px;background:#fff; color:var(--mg-ink);font-size:13.5px;font-weight:700} /* Cajas y separadores de "Mi cuenta" y pedidos */ body[class*="template-account"] .box{border:1px solid var(--mg-line)!important; border-radius:var(--mg-r-card);background:#fff;padding:18px!important} body[class*="template-account"] .divider{border:0;border-top:1px solid var(--mg-line); margin:12px 0;height:0;background:transparent} body[class*="template-account"] h4, body[class*="template-account"] h5{font-size:15px;font-weight:800; letter-spacing:-.02em;color:var(--mg-ink)} body[class*="template-account"] h6{font-size:13.5px;font-weight:700;color:var(--mg-ink)} body[class*="template-account"] .font-small{font-size:13px;line-height:1.6; color:var(--mg-ink-2)} /* Lista de pedidos */ body.template-account-orders table, body.template-account-order table{width:100%;border-collapse:collapse;font-size:13.5px} body.template-account-orders td, body.template-account-orders th, body.template-account-order td, body.template-account-order th{padding:12px;text-align:left; border-bottom:1px solid var(--mg-line);color:var(--mg-ink-2);vertical-align:middle} body.template-account-orders th, body.template-account-order th{font-size:11px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--mg-ink-3)} body[class*="template-account"] .label, body[class*="template-account"] .label-accent{display:inline-flex;align-items:center; height:24px;padding:0 10px;border-radius:999px;border:1px solid var(--mg-line); background:var(--mg-surface);font-size:11.5px;font-weight:700;color:var(--mg-ink-2)} /* Alertas nativas con el lenguaje del sistema */ body[class*="template-account"] .alert{border-radius:16px;border:1px solid var(--mg-line); background:var(--mg-surface);padding:14px 16px;font-size:13.5px;line-height:1.55; color:var(--mg-ink-2)} body[class*="template-account"] .alert-success{border-color:rgba(15,122,61,.22); background:rgba(37,211,102,.07);color:#0f7a3d} body[class*="template-account"] .alert-danger{border-color:rgba(224,31,61,.22); background:rgba(224,31,61,.05);color:#b3122f} /* La cuenta no puede estorbar la compra: enlace de vuelta al catálogo. */ body[class*="template-account"] .account-page::after{content:"";display:block;height:4px} /* ========================================================================== 11 · TESTIMONIOS EN LA HOME (v8) Punto 4 de la revisión: "testimonios reales". Son los tres de la página Referencias, con nombre y contexto; no hay ninguno inventado. ========================================================================== */ .mg-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,18px)} @media (max-width:899px){ .mg-quotes{grid-template-columns:1fr} } .mg-quote figcaption span:last-child{display:flex;flex-direction:column;min-width:0} .mg-quote figcaption b{font-size:13.5px;font-weight:700;letter-spacing:-.012em; color:var(--mg-ink);line-height:1.3} .mg-quote figcaption small{font-size:12px;color:var(--mg-ink-3);line-height:1.4} /* ========================================================================== 12 · SEGUNDA PASADA DE CUENTA Y FAQ (v9) ========================================================================== */ /* El botón de "Iniciar sesión" salía transparente con texto oscuro: la regla del bridge para .btn-primary lleva !important y ganaba a la de la sección anterior. Se sube la especificidad y se marca lo imprescindible. */ body[class*="template-account"] .account-page .btn-primary, body[class*="template-account"] .account-page button[type=submit], body[class*="template-account"] .account-page input[type=submit]{ background:#111113!important;background-image:none!important; color:#fff!important;border:0!important;border-radius:15px!important; height:50px;width:100%;font-size:14.5px;font-weight:700;letter-spacing:-.012em; box-shadow:none!important;cursor:pointer} body[class*="template-account"] .account-page .btn-primary:hover, body[class*="template-account"] .account-page button[type=submit]:hover, body[class*="template-account"] .account-page input[type=submit]:hover{ background:#26262b!important} body[class*="template-account"] .account-page .btn-primary:disabled{opacity:.45} /* El submit vive dentro de la tarjeta, no colgando de su borde. */ body[class*="template-account"] .account-page form > *:last-child{margin-bottom:0} body[class*="template-account"] .account-page .form-group:last-of-type{margin-bottom:18px} /* El ojo de "mostrar contraseña" heredaba el cian de marca. */ body[class*="template-account"] .account-page .js-password-toggle svg, body[class*="template-account"] .account-page .input-group-append svg{ fill:var(--mg-ink-3)!important;color:var(--mg-ink-3)!important} /* Preguntas frecuentes: el editor del admin deja párrafos con solo un espacio duro, que p:empty no alcanza. Los marca el script con .mg-vacio. */ body.mg .mg-info__body.user-content .mg-vacio{display:none!important}