/* Subfase 9: Mi Cuenta y Mis Pedidos. Reglas copiadas del portal (mo-portal.css) y del checkout; lo propio de la tienda va al final. */
.mo-cuenta{--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--shadow-focus:0 0 0 1px var(--gold)}
/* 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); }

/* Insignias */
.mo .mo-badge{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 10px;border-radius:var(--radius-pill);font:700 11px/14px var(--font-text);letter-spacing:.02em;white-space:nowrap}
.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--neutral{background:var(--info-soft);color:var(--ink-2)}
/* Pedidos */
.mo .mo-pedidos__filtros { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mo .mo-pedidos__filtros .mo-chip { display: inline-flex; align-items: center; text-decoration: none; }
.mo .mo-pedidos__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); }
.mo .mo-ped { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-5); }
.mo .mo-ped__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.mo .mo-ped__head .mo-h3, .mo .mo-ped__head .mo-small { margin: 0; }
.mo .mo-ped__fotos { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.mo .mo-ped__fotos li { width: 56px; height: 56px; margin: 0; border-radius: var(--radius-sm); background: var(--subtle); overflow: hidden; }
.mo .mo-ped__fotos img { width: 100%; height: 100%; object-fit: cover; }
.mo .mo-ped__mas { display: grid; place-items: center; font-weight: 700; color: var(--ink-2); }
.mo .mo-ped__datos { display: grid; gap: 8px; margin: 0; }
.mo .mo-ped__datos > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.mo .mo-ped__datos dt { color: var(--muted); font-size: 14px; }
.mo .mo-ped__datos dd { margin: 0; text-align: right; font-size: 14px; color: var(--ink); }
.mo .mo-ped__acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-2); margin-top: auto; }
.mo .mo-ped__acciones .mo-btn { padding-left: 12px; padding-right: 12px; white-space: nowrap; }
.mo .mo-seg { padding: var(--space-5); display: grid; gap: var(--space-4); }
.mo .mo-seg__pasos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.mo .mo-seg__pasos li { position: relative; display: grid; justify-items: center; gap: var(--space-2); margin: 0; text-align: center; }
.mo .mo-seg__pasos li + li::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.mo .mo-seg__pasos li.is-hecho + li::before, .mo .mo-seg__pasos li.is-hecho + li.is-actual::before { background: var(--ink); }
.mo .mo-seg__punto { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface-raised); font-size: 13px; font-weight: 700; color: var(--muted); }
.mo .mo-seg__punto .mo-icon { width: 16px; height: 16px; stroke-width: 3; }
.mo .mo-seg__pasos .is-hecho .mo-seg__punto { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.mo .mo-seg__pasos .is-actual .mo-seg__punto { border-color: var(--gold); color: var(--ink); box-shadow: var(--shadow-focus); }
.mo .mo-seg__titulo { font-size: 13px; line-height: 1.3; color: var(--muted); }
.mo .mo-seg__pasos .is-hecho .mo-seg__titulo, .mo .mo-seg__pasos .is-actual .mo-seg__titulo { color: var(--ink); font-weight: 600; }
.mo .mo-seg__guia { padding-top: var(--space-3); border-top: 1px solid var(--line); }
.mo .mo-seg-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); padding: var(--space-5); max-width: 640px; }
.mo .mo-seg-form .mo-field { flex: 1 1 240px; display: grid; gap: 6px; }
.mo .mo-seg-recientes { display: grid; gap: var(--space-3); max-width: 640px; }
.mo .mo-seg-recientes .mo-h3 { margin: 0; }
.mo .mo-seg-recientes ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.mo .mo-seg-reciente { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); color: var(--ink); text-decoration: none; }
.mo .mo-seg-reciente .mo-small { flex: 1; }
.mo .mo-seg-reciente:hover { border-color: var(--ink); }
.mo .mo-ped-anular { display: grid; gap: var(--space-2); }
.mo .mo-ped-anular__confirmar { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); }
.mo .mo-ped-anular__confirmar[hidden] { display: none; }
.mo .mo-ped-anular__confirmar .mo-small { margin: 0; }
.mo .mo-ped__acciones{align-self:end}
.mo .mo-ped__fotos{flex-wrap:nowrap;overflow:hidden}
.mo .mo-ped__fotos li{flex:none}
/* Detalle */
.mo .mo-ty__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-4); align-items: start; }
.mo .mo-ty__main, .mo .mo-ty__side { display: grid; gap: var(--space-4); }
.mo .mo-ty__card { padding: var(--space-5, 24px); }
.mo .mo-ty__card .mo-h3 { margin: 0 0 var(--space-3); }
.mo .mo-ty__items { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.mo .mo-ty__items li { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.mo .mo-ty__items img { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); background: var(--subtle); }
.mo .mo-ty__item { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mo .mo-ty__item strong { font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.mo .mo-ty__price { flex: none; font-weight: 600; color: var(--ink); }
.mo .mo-ty__dl { display: grid; gap: 10px; margin: 0; }
.mo .mo-ty__dl > div { display: flex; justify-content: space-between; gap: var(--space-4); }
.mo .mo-ty__dl dt { flex: none; color: var(--muted); font-size: 14px; }
.mo .mo-ty__dl dd { margin: 0; text-align: right; color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.mo .mo-ty__totals { padding-top: var(--space-3); border-top: 1px solid var(--line); }
.mo .mo-ty__totals .is-total { padding-top: 10px; border-top: 1px solid var(--line); }
.mo .mo-ty__totals .is-total :is(dt, dd) { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); }
/* Campos */
.mo .mo-field{display:grid;gap:8px}
.mo .mo-label{font:600 14px/20px var(--font-text);color:var(--ink)}
.mo .mo-input{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:400 15px var(--font-text)}
.mo .mo-input:focus{border-color:var(--gold);outline:none;box-shadow:var(--shadow-focus)}
.mo .mo-btn--danger-soft{background:var(--danger-soft);color:var(--danger)}
.mo .mo-btn--danger{background:var(--danger);color:#fff}
.mo-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Tienda: estructura de la vista. */
.account-main.experience-main{padding-bottom:0}
.account-layout{align-items:start}
.account-main .account-content{display:grid;gap:24px;min-width:0}
.account-nav a{font:500 13px var(--font-display)}
.mo-cuenta__bienvenida{display:grid;justify-items:start;gap:8px}
.mo-cuenta__bienvenida h2,.mo-cuenta__form h2,.mo-pedidos__titulo{margin:0;font:500 clamp(28px,3vw,36px)/1.2 var(--font-display);letter-spacing:-.04em;color:var(--ink)}
.mo-cuenta__bienvenida .mo-btn{margin-top:12px}
.mo-cuenta__form form{display:grid;gap:20px;margin-top:20px}
.mo-cuenta__campos{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mo-cuenta__ancho{grid-column:1/-1}
.mo-cuenta__form .mo-btn{justify-self:start}
.mo-cuenta__aviso{margin:0;font:400 13px/20px var(--font-text);color:var(--success)}
.mo-cuenta__aviso.is-error{color:var(--danger)}
.mo-pedidos__barra{display:grid;gap:16px}
.mo-pedido__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px}
.mo-pedido__head h1{margin:0;font:500 clamp(32px,3.6vw,46px)/1.15 var(--font-display);letter-spacing:-.05em;color:var(--ink)}
.mo .mo-seg__pasos .is-actual .mo-seg__punto{border-color:var(--ink);box-shadow:none}
@media(max-width:1100px){.mo .mo-ty__grid{grid-template-columns:1fr}}
@media(max-width:760px){
 .account-main .account-layout{display:block}
 .account-main .account-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;overflow:visible;border:0}
 .account-main .account-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);white-space:nowrap}
 .account-main .account-nav a[aria-current=page]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
 .mo-cuenta__campos{grid-template-columns:1fr}
 .mo-cuenta__form .mo-btn,.mo-cuenta__bienvenida .mo-btn{width:100%}
 .mo .mo-pedidos__lista{grid-template-columns:1fr}
 .mo .mo-seg__pasos{grid-template-columns:1fr;gap:12px}
 .mo .mo-seg__pasos li{grid-template-columns:32px 1fr;justify-items:start;align-items:center;text-align:left}
 .mo .mo-seg__pasos li+li::before{top:-14px;left:15px;right:auto;width:2px;height:14px}
}