/* La compra y «Mis compras» del diseño de la tienda v2 (Claude Design,
   22 oct 2026): marcos C (formulario), D (Mis pedidos, aquí «Mis compras»)
   y E (confirmación). Valores copiados del diseño; --ac y --acs son el
   color de la tienda. Letra del sistema, como el diseño. */

.cm, .mc { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; color: #141a3c; }
body:has(.cm) { overflow: hidden; }

/* ---------------------------------------------------------- la ventana */
.cm-fondo { position: fixed; inset: 0; z-index: 88; background: rgba(14,8,34,0.5); }
.cm-ventana { position: fixed; z-index: 89; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; background: #ffffff; border-radius: 24px 24px 24px 8px; box-shadow: rgba(10,12,40,0.32) 0 24px 60px; }
@media (max-width: 620px) {
    .cm-ventana { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0; padding-bottom: env(safe-area-inset-bottom); }
}
.cm-cabeza { position: sticky; top: 0; z-index: 1; background: #ffffff; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; }
.cm-cabeza h2 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -0.4px; color: #141a3c; }
.cm-cabeza h2.cm-oculto { visibility: hidden; }
.cm-cerrar { flex: none; width: 44px; height: 44px; border-radius: 999px; background: #f4f5f9; color: #141a3c; display: flex; align-items: center; justify-content: center; }
.cm-cerrar svg { display: block; }

/* ---------------------------------------------------------- formulario */
.cm-form { padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 16px; }
.cm-prod { display: flex; align-items: center; gap: 12px; background: #f6f7fb; border-radius: 16px 16px 16px 6px; padding: 10px; }
.cm-prod img { flex: none; width: 64px; height: 64px; border-radius: 12px 12px 12px 4px; object-fit: cover; background: #ffffff; }
.cm-prod-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cm-prod-n { font-size: 15px; font-weight: 700; color: #141a3c; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-prod-precio { font-size: 15px; font-weight: 800; color: var(--ac); }
.cm-cantidad { flex: none; display: flex; align-items: center; gap: 2px; background: #ffffff; border-radius: 999px; padding: 3px; }
.cm-cantidad button { width: 38px; height: 38px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px; background: none; box-shadow: none; font-family: inherit; font-size: 22px; font-weight: 700; line-height: 1; color: #141a3c; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cm-cantidad button:disabled { color: #c2c5d4; cursor: default; }
.cm-cant { min-width: 20px; text-align: center; font-size: 16px; font-weight: 800; color: #141a3c; }

.cm-campos { display: flex; flex-direction: column; gap: 12px; }
.cm-label { display: flex; flex-direction: column; gap: 6px; }
.cm-rotulo { font-size: 14px; font-weight: 700; color: #141a3c; }
.cm-opcional { font-weight: 500; color: #5b5f78; }
/* .cm input.cm-campo: le gana al estilo general de los campos de Merka (el de correo traía borde y fondo blanco). */
.cm input.cm-campo { width: 100%; box-sizing: border-box; height: 50px; margin: 0; border: 0; border-radius: 14px; background: #f4f5f9; padding: 0 14px; font-family: inherit; font-size: 16px; color: #141a3c; outline: none; box-shadow: none; }
.cm-campo::placeholder { color: #8a8ea6; }
.cm input.cm-campo.cm-mal { box-shadow: 0 0 0 2px #b3261e; }
.cm-ayuda { font-size: 13px; color: #5b5f78; }
.cm-error { font-size: 13px; color: #b3261e; }
.cm-error.cm-fuera { font-weight: 600; }

.cm-cuentas { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #eef0f5; padding-top: 14px; font-size: 15px; color: #2b2f45; }
.cm-fila { display: flex; justify-content: space-between; }
.cm-envio { font-weight: 700; color: #1d7a3d; }
.cm-fila-total { align-items: baseline; font-size: 18px; font-weight: 900; color: #141a3c; }
.cm-pago { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #14532d; background: #e9f7ef; border-radius: 12px; padding: 10px 12px; }
.cm-confirmar { height: 56px; border: 0; border-radius: 16px 16px 16px 5px; background: var(--ac, #6C0CD5); color: #ffffff; font-family: inherit; font-size: 17px; font-weight: 800; cursor: pointer; transition: opacity 160ms ease, filter 140ms ease; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: rgba(20,24,60,0.18) 0 8px 20px; }
.cm-confirmar:disabled { cursor: default; opacity: 0.72; }
.cm-pie { font-size: 13px; line-height: 1.45; color: #5b5f78; text-align: center; }

/* ---------------------------------------------------------- confirmación */
.cm-hecho { padding: 8px 22px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.cm-chulo { width: 64px; height: 64px; border-radius: 22px 22px 22px 8px; background: #e9f7ef; color: #1d7a3d; display: flex; align-items: center; justify-content: center; }
.cm-chulo svg { display: block; }
.cm-hecho-tit { font-size: 24px; font-weight: 900; letter-spacing: -0.4px; color: #141a3c; }
.cm-numero { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #5b5f78; background: #f4f5f9; border-radius: 12px 12px 12px 4px; padding: 8px 14px; }
.cm-numero strong { font-size: 17px; letter-spacing: 0.3px; color: #141a3c; }
.cm-resumen-prod { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 12px; background: #f6f7fb; border-radius: 16px 16px 16px 5px; padding: 12px; text-align: left; }
.cm-resumen-prod img { flex: none; width: 56px; height: 56px; border-radius: 12px 12px 12px 4px; object-fit: cover; background: #ededeb; }
.cm-resumen-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cm-resumen-n { font-size: 15px; font-weight: 700; line-height: 1.3; color: #141a3c; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-resumen-sub { font-size: 13px; color: #5b5f78; }
.cm-resumen-total { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 17px; font-weight: 900; color: #141a3c; }
.cm-verde { font-size: 12px; font-weight: 700; color: #1d7a3d; }
.cm-hecho-nota { font-size: 15px; line-height: 1.5; color: #2b2f45; }
.cm-principal { width: 100%; height: 52px; border-radius: 16px 16px 16px 5px; background: var(--ac, #6C0CD5); color: #ffffff; font-size: 16px; font-weight: 800; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: rgba(20,24,60,0.18) 0 8px 20px; }
.cm-seguir { padding: 10px 12px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; font-size: 15px; font-weight: 700; color: var(--ac, #6C0CD5); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------- Mis compras */
.mc { max-width: 880px; margin: 0 auto; padding: clamp(22px,3vw,40px) clamp(16px,2vw,32px) 56px; box-sizing: border-box; }
.mc-volver { display: inline-block; padding: 6px 0; font-size: 15px; font-weight: 700; color: var(--ac, #3b4cc0); text-decoration: none; }
.mc-titulo { margin: 10px 0 18px; display: flex; flex-direction: column; gap: 6px; }
.mc-titulo h1 { margin: 0; font-size: clamp(28px,3vw,36px); font-weight: 900; letter-spacing: -0.8px; color: #141a3c; }
.mc-titulo span { font-size: 15px; color: #5b5f78; }
.mc-lista { display: flex; flex-direction: column; gap: 14px; }
.mc-pedido { background: #ffffff; border-radius: 20px 20px 20px 6px; box-shadow: rgba(20,24,60,0.04) 0 1px 2px, rgba(20,24,60,0.07) 0 8px 22px; padding: clamp(14px,2vw,20px); display: flex; flex-direction: column; gap: 16px; color: inherit; text-decoration: none; scroll-margin-top: 80px; }
.mc-pedido.mc-cerrado { opacity: 0.86; }
.mc-arriba { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.mc-num { font-size: 13px; color: #5b5f78; }
.mc-num strong { color: #141a3c; }
.mc-estado { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; border-radius: 999px; padding: 5px 11px; }
.mc-dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.mc-estado-por_confirmar { color: #8a5a00; background: #fff4d6; }
.mc-estado-confirmado { color: #1e40af; background: #e7efff; }
.mc-estado-en_camino { color: #6b21a8; background: #f1eafe; }
.mc-estado-entregado { color: #14532d; background: #e9f7ef; }
.mc-estado-cancelado, .mc-estado-devuelto { color: #5b5f78; background: #eef0f5; }
.mc-prod { display: flex; align-items: center; gap: 12px; }
.mc-prod img { flex: none; width: 64px; height: 64px; border-radius: 12px 12px 12px 4px; object-fit: cover; background: #f4f4f6; }
.mc-cerrado .mc-prod img { filter: grayscale(1); }
.mc-prod-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mc-prod-n { font-size: 16px; font-weight: 700; color: #141a3c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-prod-cant { font-size: 14px; color: #5b5f78; }
.mc-prod-total { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mc-prod-total > span:first-child { font-size: 18px; font-weight: 900; color: #141a3c; }
.mc-pie-total { font-size: 12px; color: #5b5f78; }
.mc-pasos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); position: relative; }
.mc-paso { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 0 2px; }
.mc-linea { position: absolute; top: 13px; left: 0; right: 0; height: 3px; border-radius: 2px; background: #e3e5ee; }
.mc-paso:first-child .mc-linea { left: 50%; }
.mc-paso:last-child .mc-linea { right: 50%; }
.mc-paso.mc-hecho .mc-linea, .mc-paso.mc-actual .mc-linea { background: var(--ac, #3b4cc0); }
.mc-punto { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 999px; background: #e3e5ee; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.mc-paso.mc-hecho .mc-punto, .mc-paso.mc-actual .mc-punto { background: var(--ac, #3b4cc0); }
.mc-paso.mc-actual.mc-anillo .mc-punto { box-shadow: 0 0 0 5px var(--acs, #eceef7); }
.mc-rotulo { font-size: 12px; font-weight: 600; line-height: 1.25; color: #8a8ea6; }
.mc-paso.mc-hecho .mc-rotulo { color: #141a3c; }
.mc-paso.mc-actual .mc-rotulo { color: #141a3c; font-weight: 800; }
.mc-cierre { display: flex; align-items: center; gap: 10px; color: #6b6e82; }
.mc-cierre > span:not(.mc-cierre-txt) { flex: 1; height: 3px; border-radius: 2px; background: #e3e5ee; }
.mc-cierre-txt { font-size: 13px; font-weight: 700; }
.mc-nota { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; background: #f6f7fb; border-radius: 14px 14px 14px 4px; padding: 12px 14px; }
.mc-nota > span { font-size: 14px; line-height: 1.45; color: #2b2f45; }
.mc-guia { flex: none; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: #ffffff; color: var(--ac, #3b4cc0); font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: rgba(20,24,60,0.08) 0 2px 8px; }
.mc-vacio { background: #ffffff; border-radius: 20px 20px 20px 6px; padding: 28px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.mc-vacio-tit { font-size: 18px; font-weight: 800; color: #141a3c; }
.mc-vacio-sub { font-size: 15px; color: #5b5f78; }
.mc-vacio a { margin-top: 4px; height: 46px; padding: 0 20px; border-radius: 14px 14px 14px 4px; background: var(--ac, #3b4cc0); color: #ffffff; font-size: 15px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; }
.mc-aviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; background: #141a3c; color: #ffffff; font-size: 14px; font-weight: 600; border-radius: 12px; padding: 10px 16px; box-shadow: rgba(10,12,40,0.3) 0 10px 30px; }

/* Sin sesión (5 nov 2026): la casilla de la ventana y activar la cuenta en el seguimiento. */
.cm-acepta { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-size: 14px; line-height: 1.45; color: #2f3247; cursor: pointer; }
.cm-acepta input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--ac, #6C0CD5); }
.cm-acepta a { color: var(--ac, #6C0CD5); font-weight: 700; }
.mc-activar { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding: 16px; border: 1px solid #e4e5ee; border-radius: 12px; background: #fff; }
.mc-activar-tit { font-size: 16px; font-weight: 800; }
.mc-activar-sub { font-size: 14px; line-height: 1.45; color: #5b5f78; }
.mc-activar .cm-principal { width: 100%; }
.mc-novedad { margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; background: #fff4e0; color: #7a4a00; font-size: 14px; line-height: 1.45; }
.cm-variante { margin-bottom: 12px; }