/* Marcas Originales — componentes del sistema de diseño (.mo-*), compartidos por tienda y portal (tienda Fase 2.9). Registrado en todo el sitio como 'mo-componentes'; mo-portal.css depende de este archivo y trae solo lo del portal. Depende de las variables del child theme (tokens.css). Cada regla va bajo .mo para ganarle a los estilos de WoodMart. */ .mo { font-family: var(--font-text); color: var(--ink); background: var(--canvas); font-size: 15px; line-height: 24px; -webkit-font-smoothing: antialiased; } .mo *, .mo *::before, .mo *::after { box-sizing: border-box; } .mo [hidden] { display: none !important; } /* Tipografía */ .mo .mo-display { font-family: var(--font-display); font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } .mo .mo-h1 { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; margin: 0; text-wrap: balance; } .mo .mo-h2 { font-family: var(--font-display); font-size: 19px; line-height: 26px; font-weight: 700; margin: 0; } .mo .mo-h3 { font-family: var(--font-display); font-size: 16px; line-height: 22px; font-weight: 700; margin: 0; } .mo .mo-price { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; } .mo .mo-body { font-size: 15px; line-height: 24px; color: var(--ink-2); margin: 0; } .mo .mo-small { font-size: 13px; line-height: 20px; color: var(--muted); margin: 0; } .mo .mo-eyebrow { font-family: var(--font-text); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0; } .mo .mo-link { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; transition: color .15s ease; } .mo .mo-link:hover, .mo .mo-link:focus-visible { color: var(--gold); } /* Botones */ .mo .mo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: var(--radius-md); border: 1px solid transparent; font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 20px; text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; text-decoration: none; transition: background .15s ease, border-color .15s ease; } .mo .mo-btn:focus-visible, .mo .mo-input:focus-visible, .mo .mo-select:focus-visible, .mo .mo-chip:focus-visible, .mo .mo-icon-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .mo .mo-btn--primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); } .mo .mo-btn--primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--on-ink); } .mo .mo-btn--secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); } .mo .mo-btn--secondary:hover { border-color: var(--ink); } .mo .mo-btn--quiet { background: transparent; color: var(--ink); padding: 0 8px; min-height: 44px; } .mo .mo-btn--danger-soft { background: var(--danger-soft); color: var(--danger); } .mo .mo-btn--block { width: 100%; } .mo .mo-btn[disabled], .mo .mo-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } .mo .mo-icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); border: 0; background: var(--ink); color: var(--on-ink); cursor: pointer; } .mo .mo-icon-btn--light { background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); } .mo .mo-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* Campos */ .mo .mo-field { display: grid; gap: 8px; } .mo .mo-label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); } .mo .mo-help { font-size: 13px; line-height: 20px; color: var(--muted); margin: -4px 0 0; } .mo .mo-control { position: relative; display: flex; align-items: center; } .mo .mo-control > .mo-icon { position: absolute; left: 16px; color: var(--muted); pointer-events: none; } .mo .mo-input, .mo .mo-select { width: 100%; min-height: 44px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 15px; } .mo .mo-control > .mo-icon ~ .mo-input { padding-left: 46px; } .mo .mo-input::placeholder { color: var(--muted); } .mo .mo-input:focus, .mo .mo-select:focus { border-color: var(--gold); outline: none; box-shadow: var(--shadow-focus); } .mo .mo-select[disabled], .mo .mo-input[disabled] { background: var(--subtle); color: var(--ink-2); cursor: not-allowed; } .mo .mo-error { display: none; font-size: 13px; line-height: 20px; color: var(--danger); } .mo .mo-field.is-error .mo-input, .mo .mo-field.is-error .mo-select { border-color: var(--danger); background: var(--danger-soft); } .mo .mo-field.is-error .mo-error { display: block; } .mo .mo-check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--ink-2); } .mo .mo-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); flex: none; } /* Selección: chips (talla, filtro) y opción en tarjeta (método de pago) */ .mo .mo-chips { display: flex; flex-wrap: wrap; gap: 8px; } .mo .mo-chip { min-height: 44px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .mo .mo-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); } .mo .mo-option { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-raised); cursor: pointer; } .mo .mo-option[aria-checked="true"] { border-color: var(--ink); } .mo .mo-option__dot { width: 22px; height: 22px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); margin-left: auto; display: grid; place-items: center; } .mo .mo-option[aria-checked="true"] .mo-option__dot { background: var(--ink); border-color: var(--ink); color: var(--on-ink); } /* Insignias */ .mo .mo-badge { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.02em; } .mo .mo-badge--success { background: var(--success-soft); color: var(--success); } .mo .mo-badge--warning { background: var(--warning-soft); color: var(--warning); } .mo .mo-badge--danger { background: var(--danger-soft); color: var(--danger); } .mo .mo-badge--gold { background: var(--gold-soft); color: var(--gold-ink); } .mo .mo-badge--neutral { background: var(--info-soft); color: var(--info); } /* Avisos */ .mo .mo-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-md); font-size: 14px; line-height: 20px; } /* Ícono del aviso: círculo de color con glifo blanco, puesto por CSS para que también lo lleven los avisos que arma el JS. */ .mo .mo-alert::before { content: ""; flex: none; width: 28px; height: 28px; margin-top: -4px; border-radius: var(--radius-pill); background: var(--ink-2) center / 16px 16px no-repeat; } .mo .mo-alert:has(.mo-alert__icon)::before { display: none; } .mo .mo-alert--success::before { background-color: var(--success); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012.5l4.5%204.5L19%207.5%27/%3E%3C/svg%3E"); } .mo .mo-alert--warning::before { background-color: var(--warning); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%207v6%27/%3E%3Cpath%20d%3D%27M12%2017h.01%27/%3E%3C/svg%3E"); } .mo .mo-alert--danger::before { background-color: var(--danger); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%207v6%27/%3E%3Cpath%20d%3D%27M12%2017h.01%27/%3E%3C/svg%3E"); } .mo .mo-alert--info::before { background-color: var(--ink-2); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2011v6%27/%3E%3Cpath%20d%3D%27M12%207h.01%27/%3E%3C/svg%3E"); } .mo .mo-alert--gold::before { background-color: var(--gold); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2011v6%27/%3E%3Cpath%20d%3D%27M12%207h.01%27/%3E%3C/svg%3E"); } .mo .mo-alert__icon { width: 28px; height: 28px; border-radius: var(--radius-pill); display: grid; place-items: center; flex: none; color: var(--on-ink); } .mo .mo-alert strong { display: block; color: var(--ink); } .mo .mo-alert--success { background: var(--success-soft); color: var(--ink-2); } .mo-alert--success .mo-alert__icon { background: var(--success); } .mo .mo-alert--warning { background: var(--warning-soft); color: var(--ink-2); } .mo-alert--warning .mo-alert__icon { background: var(--warning); } .mo .mo-alert--danger { background: var(--danger-soft); color: var(--ink-2); } .mo-alert--danger .mo-alert__icon { background: var(--danger); } .mo .mo-alert--info { background: var(--info-soft); color: var(--ink-2); } .mo-alert--info .mo-alert__icon { background: var(--ink-2); } .mo .mo-alert--gold { background: var(--gold-soft); color: var(--ink-2); } .mo-alert--gold .mo-alert__icon { background: var(--gold); } /* Tarjetas y filas */ .mo .mo-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-card); } .mo .mo-card--raised { background: var(--surface-raised); } .mo .mo-rows { display: grid; gap: 0; } .mo .mo-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; font-size: 14px; color: var(--ink-2); } .mo .mo-row strong { color: var(--ink); font-variant-numeric: tabular-nums; } .mo .mo-row--total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 16px; font-size: 16px; color: var(--ink); font-weight: 700; } .mo .mo-list { display: grid; gap: 8px; } .mo .mo-list-item { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 15px; } .mo .mo-list-item__icon { width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--subtle); display: grid; place-items: center; flex: none; } .mo .mo-list-item__text { display: grid; flex: 1; min-width: 0; } .mo .mo-list-item__text small { font-size: 13px; color: var(--muted); } .mo .mo-list-item > .mo-icon:last-child { color: var(--muted); } .mo .mo-list-item[aria-current="page"] { border-color: var(--ink); } /* Pestañas */ .mo .mo-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .mo .mo-tabs::-webkit-scrollbar { display: none; } .mo .mo-tab { padding: 12px 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-transform: none; letter-spacing: 0; } .mo .mo-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); } /* Barra de estado del portal */ .mo .mo-statusbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 0 20px; background: var(--ink); color: var(--on-ink); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; } .mo .mo-statusbar__state { display: inline-flex; align-items: center; gap: 8px; } .mo .mo-statusbar__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--success-soft); box-shadow: 0 0 0 3px rgba(228,243,232,.25); } .mo .mo-statusbar__balance { color: var(--gold); font-family: var(--font-display); } /* Progreso de pedido */ .mo .mo-steps { display: grid; grid-template-columns: repeat(4, 1fr); } .mo .mo-step { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 12px; line-height: 16px; color: var(--muted); position: relative; } .mo .mo-step::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; } .mo .mo-step:first-child::before { display: none; } .mo .mo-step__dot { width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--subtle); color: var(--muted); display: grid; place-items: center; position: relative; z-index: 1; } .mo .mo-step.is-done .mo-step__dot { background: var(--ink); color: var(--on-ink); } .mo .mo-step.is-done::before, .mo .mo-step.is-current::before { background: var(--ink); } .mo .mo-step.is-current .mo-step__dot { background: var(--surface-raised); border: 2px solid var(--ink); color: var(--ink); } .mo .mo-step.is-done strong, .mo .mo-step.is-current strong { color: var(--ink); } /* Producto */ .mo .mo-product { display: grid; gap: 10px; } .mo .mo-product__media { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); background: var(--subtle); display: grid; place-items: center; position: relative; max-width: 100%; overflow: hidden; } .mo .mo-product__add { position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--surface-raised); border: 0; display: grid; place-items: center; cursor: pointer; } .mo .mo-product__prices { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .mo .mo-product__retail { font-size: 13px; color: var(--muted); text-decoration: line-through; } .mo .mo-product__client { font-size: 13px; color: var(--ink-2); } /* Plan de membresía */ .mo .mo-plan { border-radius: var(--radius-xl); background: var(--surface-raised); border: 2px solid var(--ink); padding: 24px; display: grid; gap: 12px; } .mo .mo-plan__perk { display: flex; gap: 10px; align-items: flex-start; background: var(--success-soft); color: var(--success); font-weight: 600; border-radius: var(--radius-md); padding: 12px 14px; font-size: 14px; line-height: 20px; } .mo .mo-plan__perk .mo-icon { color: var(--success); } /* Estados: éxito y vacío */ .mo .mo-state { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 48px 24px; } .mo .mo-state__mark { width: 72px; height: 72px; border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success); display: grid; place-items: center; } .mo .mo-state__mark .mo-icon { width: 34px; height: 34px; stroke-width: 2.5; } .mo .mo-state__actions { display: grid; gap: 12px; width: 100%; max-width: 360px; margin-top: 12px; } /* Barra de progreso: meta de compras, avance de un proceso. Relleno dorado. */ .mo .mo-progress { height: 6px; max-width: 360px; border-radius: var(--radius-pill); background: var(--subtle); overflow: hidden; } .mo .mo-progress > span { display: block; height: 100%; min-width: 6px; border-radius: inherit; background: linear-gradient(90deg, #8a6200, var(--gold), #f3d27a); } /* Modal: aviso que interrumpe (confirmaciones, sesión, errores bloqueantes). Uno a la vez. */ .mo-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgb(11 11 11 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .mo-modal[hidden] { display: none; } .mo .mo-modal__card, .mo-modal .mo-modal__card { width: 100%; max-width: 460px; display: grid; justify-items: center; gap: 12px; padding: 32px 24px 24px; text-align: center; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); font-family: var(--font-text); } .mo-modal .mo-modal__mark { width: 72px; height: 72px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--warning-soft); color: var(--warning); margin-bottom: 4px; } .mo-modal .mo-modal__mark--success { background: var(--success-soft); color: var(--success); } .mo-modal .mo-modal__mark--danger { background: var(--danger-soft); color: var(--danger); } .mo-modal .mo-modal__title { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 26px; font-weight: 700; color: var(--ink); text-wrap: balance; } .mo-modal .mo-modal__text { margin: 0 0 8px; font-size: 15px; line-height: 24px; color: var(--ink-2); } .mo-modal .mo-modal__actions { display: grid; gap: 12px; width: 100%; } /* Glow: efecto especial dorado. Usar poco: un elemento por pantalla y solo para lo que vende (inversión, CTA de pago). */ @property --mo-glow-angle { syntax: ""; inherits: false; initial-value: 0deg; } .mo .mo-glow { position: relative; isolation: isolate; border-color: transparent; background: radial-gradient(rgb(28 28 28 / .05) .55px, transparent 1px) 0 0 / 4px 4px, linear-gradient(180deg, #ffffff, #fdf8ec 60%, #ffffff); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), 0 12px 24px -14px rgb(122 89 0 / .45); animation: mo-glow-halo 3s ease-in-out infinite; } .mo .mo-glow::before { content: ""; position: absolute; inset: -1px; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--mo-glow-angle), #8a6200, #cb9500, #f3d27a, #fff4cf, #e0a106, #8a6200); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; pointer-events: none; animation: mo-glow-spin 4s linear infinite; } .mo .mo-glow::after { content: ""; position: absolute; inset: 2px; border-radius: inherit; background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / .7) 50%, transparent 60%) -150% 0 / 250% 100% no-repeat; pointer-events: none; transition: background-position .9s cubic-bezier(.22,1,.36,1); } .mo .mo-glow:hover::after { background-position: 150% 0; } /* Botones con mo-glow: relleno blanco sólido, como el glow de la tienda (sin trama). */ .mo .mo-btn.mo-glow, .mo .mo-btn.mo-glow:hover, .mo .mo-btn.mo-glow:focus-visible { background: #fff; color: var(--ink); } @keyframes mo-glow-spin { to { --mo-glow-angle: 360deg; } } @keyframes mo-glow-halo { 0%, 100% { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), 0 12px 24px -14px rgb(122 89 0 / .45), 0 0 0 0 rgb(203 149 0 / 0); } 50% { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), 0 12px 24px -14px rgb(122 89 0 / .45), 0 0 28px -6px rgb(203 149 0 / .45); } } /* Botón glow: cristal claro en píldora; el anillo dorado gira solo en hover y foco. */ .mo .mo-btn--glow { border-radius: var(--radius-pill); min-height: 56px; padding: 0 32px; position: relative; isolation: isolate; border: 0; color: var(--ink); background: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .95), inset 0 3px 2px -2px #fff, inset 0 -4px 6px -3px rgb(255 255 255 / .9), inset 0 10px 16px -12px rgb(0 0 0 / .12), 0 0 0 1px rgb(28 28 28 / .1), 0 1px 2px rgb(0 0 0 / .08), 0 12px 24px -14px rgb(0 0 0 / .38); transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1); } .mo .mo-btn--glow::before { content: ""; position: absolute; inset: -2px; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--mo-glow-angle), #8a6200, #cb9500, #f3d27a, #fff4cf, #e0a106, #8a6200); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s ease; z-index: -1; animation: mo-glow-spin 3s linear infinite; } .mo .mo-btn--glow:hover, .mo .mo-btn--glow:focus-visible { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .95), 0 0 28px -6px rgb(203 149 0 / .5), 0 12px 24px -14px rgb(0 0 0 / .38); } .mo .mo-btn--glow:hover::before, .mo .mo-btn--glow:focus-visible::before { opacity: 1; } .mo .mo-btn--glow:hover .mo-icon { transform: translate(2px, -2px); } .mo .mo-btn--glow .mo-icon { transition: transform .2s cubic-bezier(.22,1,.36,1); } .mo .mo-btn--glow:active { transform: scale(.98); } @media (prefers-reduced-motion: reduce) { .mo *, .mo *::before, .mo *::after { transition: none !important; animation: none !important; } } /* === Fase 2 · Componentes nuevos (B1) === */ /* Todo bajo .mo, solo var(--tokens). Objetivos táctiles de 44 px; el estado nunca va solo por color. */ /* Pagination: listados (V2). Página actual en negro con aria-current; anterior/siguiente con texto. */ .mo .mo-pagination { display: flex; justify-content: center; } .mo .mo-pagination__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; } .mo .mo-pagination__link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 44px; min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); font-family: var(--font-display); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; font-variant-numeric: tabular-nums; } .mo .mo-pagination__link:hover { border-color: var(--ink); } .mo .mo-pagination__link:focus-visible { outline: none; border-color: var(--gold); box-shadow: var(--shadow-focus); } .mo .mo-pagination__link[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); cursor: default; } .mo .mo-pagination__link[aria-disabled="true"] { background: var(--subtle); border-color: var(--subtle); color: var(--muted); cursor: not-allowed; pointer-events: none; } .mo .mo-pagination__gap { min-width: 24px; text-align: center; color: var(--muted); } @media (max-width: 480px) { .mo .mo-pagination__item--far { display: none; } } /* EmptyState: extiende mo-state (vacío neutro, sin el verde de éxito). */ .mo .mo-state--empty .mo-state__mark { background: var(--subtle); color: var(--ink-2); } .mo .mo-state--empty .mo-state__mark .mo-icon { stroke-width: 1.75; } .mo .mo-state__text { max-width: 360px; margin: 0; color: var(--muted); } /* Toast: aviso efímero. role="status" (éxito, info) o role="alert" (error). Ícono + texto, nunca solo color. */ .mo .mo-toasts { position: fixed; z-index: 1000; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); display: grid; gap: var(--space-2); justify-items: center; pointer-events: none; } .mo .mo-toast { pointer-events: auto; display: flex; align-items: center; gap: var(--space-3); width: 100%; max-width: 420px; min-height: 48px; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--info-soft); color: var(--ink); box-shadow: var(--shadow-pop); font-size: 14px; line-height: 20px; animation: mo-toast-in .2s ease-out; } .mo .mo-toast__icon { width: 24px; height: 24px; border-radius: var(--radius-pill); display: grid; place-items: center; flex: none; background: var(--surface-raised); color: var(--info); } .mo .mo-toast__icon .mo-icon { width: 16px; height: 16px; stroke-width: 2.25; } .mo .mo-toast--success { background: var(--success-soft); border-color: transparent; } .mo .mo-toast--success .mo-toast__icon { color: var(--success); } .mo .mo-toast--error { background: var(--danger-soft); border-color: transparent; } .mo .mo-toast--error .mo-toast__icon { color: var(--danger); } .mo .mo-toast__text { flex: 1; margin: 0; } .mo .mo-toast__close { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); cursor: pointer; } .mo .mo-toast__close:focus-visible { outline: none; box-shadow: var(--shadow-focus); } @keyframes mo-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (min-width: 768px) { .mo .mo-toasts { left: auto; justify-items: end; } } /* Skeleton: marcador de carga. El contenedor lleva aria-busy="true"; los bloques van aria-hidden. */ .mo .mo-skeleton { display: block; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--subtle) 0%, var(--surface) 50%, var(--subtle) 100%) 0 0 / 200% 100%; animation: mo-skeleton 1.4s ease-in-out infinite; } .mo .mo-skeleton--text { height: 14px; } .mo .mo-skeleton--title { height: 22px; width: 60%; } .mo .mo-skeleton--media { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); } .mo .mo-skeleton--circle { width: 44px; height: 44px; border-radius: var(--radius-pill); } .mo .mo-skeleton-group { display: grid; gap: var(--space-2); } @keyframes mo-skeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { .mo .mo-skeleton { animation: none; background: var(--subtle); } .mo .mo-toast { animation: none; } } /* Table: tabla de datos. En móvil (<640 px) cada fila pasa a tarjeta apilada; cada celda muestra su data-label. */ .mo .mo-table-wrap { width: 100%; } .mo .mo-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 14px; line-height: 20px; } .mo .mo-table caption { text-align: left; padding-bottom: var(--space-3); font-family: var(--font-display); font-size: 16px; line-height: 22px; font-weight: 700; } .mo .mo-table th { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-strong); font-family: var(--font-text); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--muted); white-space: nowrap; } .mo .mo-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: middle; } .mo .mo-table .is-num { text-align: right; font-variant-numeric: tabular-nums; } .mo .mo-table tbody tr:hover { background: var(--surface); } @media (max-width: 639px) { .mo .mo-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .mo .mo-table, .mo .mo-table tbody, .mo .mo-table tr, .mo .mo-table td { display: block; width: 100%; } .mo .mo-table tr { margin-bottom: var(--space-3); padding: var(--space-2) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); } .mo .mo-table tbody tr:hover { background: var(--surface-raised); } .mo .mo-table td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-2) 0; text-align: right; } .mo .mo-table tr td:last-child { border-bottom: 0; } .mo .mo-table td::before { content: attr(data-label); text-align: left; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--muted); } } /* BrandCard: tarjeta de marca en grilla (V1 inicio). Logo monocromo y nombre; toda la tarjeta es el enlace. */ .mo .mo-brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-4); list-style: none; margin: 0; padding: 0; } .mo .mo-brand { display: grid; gap: var(--space-3); justify-items: center; min-height: 44px; padding: var(--space-5) var(--space-4) var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; } .mo .mo-brand:hover { border-color: var(--line-strong); background: var(--surface-raised); } .mo .mo-brand:focus-visible { outline: none; border-color: var(--gold); box-shadow: var(--shadow-focus); } .mo .mo-brand__logo { width: 100%; max-width: 112px; height: 56px; display: grid; place-items: center; color: var(--ink); } .mo .mo-brand__logo img, .mo .mo-brand__logo svg { max-width: 100%; max-height: 56px; object-fit: contain; filter: grayscale(1); } .mo .mo-brand__name { font-family: var(--font-display); font-size: 14px; line-height: 20px; font-weight: 600; text-align: center; } .mo .mo-brand__meta { font-size: 13px; line-height: 20px; color: var(--muted); } /* OrderCard: pedido en listas (V11/V12). Número, fecha, estado (mo-badge con texto), total y acción. */ .mo .mo-order-list { display: grid; gap: var(--space-3); list-style: none; margin: 0; padding: 0; } .mo .mo-order { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); } .mo .mo-order__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); } .mo .mo-order__number { font-family: var(--font-display); font-size: 16px; line-height: 22px; font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; } .mo .mo-order__date { grid-column: 1; font-size: 13px; line-height: 20px; color: var(--muted); } .mo .mo-order__total { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 700; font-variant-numeric: tabular-nums; } .mo .mo-order__total small { display: block; font-family: var(--font-text); font-size: 12px; line-height: 16px; font-weight: 400; color: var(--muted); } .mo .mo-order__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); } /* SizeSelector: extiende mo-chip. Elegida = aria-pressed; agotada = disabled + tachado + borde punteado + texto oculto "agotada". */ .mo .mo-sizes { display: grid; gap: var(--space-3); border: 0; margin: 0; padding: 0; min-width: 0; } .mo .mo-sizes__legend { padding: 0; font-family: var(--font-text); font-size: 14px; line-height: 20px; font-weight: 600; } .mo .mo-sizes .mo-chip { min-width: 52px; font-variant-numeric: tabular-nums; } .mo .mo-chip.is-soldout, .mo .mo-chip:disabled { background: var(--surface); border-color: var(--line); border-style: dashed; color: var(--muted); text-decoration: line-through; cursor: not-allowed; } .mo .mo-chip__stock { display: block; font-size: 11px; line-height: 14px; font-weight: 700; color: var(--warning); } .mo .mo-chip[aria-pressed="true"] .mo-chip__stock { color: var(--on-ink); } .mo .mo-chip:has(.mo-chip__stock) { display: inline-grid; place-content: center; padding-top: var(--space-1); padding-bottom: var(--space-1); } .mo .mo-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* CopyField: valor de solo lectura con botón Copiar (enlace de catálogo, código). Confirmación en texto con aria-live. */ .mo .mo-copy { display: flex; gap: var(--space-2); align-items: stretch; } .mo .mo-copy .mo-input { flex: 1; min-width: 0; background: var(--surface); color: var(--ink-2); text-overflow: ellipsis; } .mo .mo-copy .mo-btn { flex: none; min-height: 44px; } .mo .mo-copy__status { min-height: 20px; font-size: 13px; line-height: 20px; color: var(--success); } /* Toggle: interruptor on/off.