/* ==========================================================
   MOSQUETEROS STORE — PORTAL DE CLIENTES 1.7.0
   Rastreo [mosqueteros_rastreo] · seguimiento en Mi cuenta · Datos de facturación
   Sistema de diseño V12 (mismos tokens que Mi cuenta V4.1 y el bloque del homepage).
   Todo va acotado a .msq-track / .msq-bill / .msq-track-pill.
   Animaciones solo con opacidad/transform/sombra (baratas en móviles) y apagadas con
   «reducir movimiento».
   ========================================================== */

.msq-track, .msq-bill {
  --msq-bg:#f6f7f9; --msq-surface:#fff; --msq-surface-muted:#eef0f3; --msq-border:#e2e3e6; --msq-border-soft:#ececef;
  --msq-field-border:#cfd1d5; --msq-field-border-hover:#b5b8be; --msq-text:#19191b; --msq-muted:#6b6d73; --msq-muted-strong:#56585e;
  --msq-black:#010101; --msq-panel:#0c0c0d; --msq-red:#d80e0e; --msq-red-hover:#b90b0b; --msq-red-bright:#f41111; --msq-red-text:#b30d0d; --msq-red-on-dark:#ff4747; --msq-red-soft:#fff1f1;
  --msq-success:#16803c; --msq-success-text:#14532d; --msq-success-bg:#f2fbf5; --msq-success-border:#cfe9d8;
  --msq-warn-bg:#fff8eb; --msq-warn-border:#f3dfb4; --msq-warn-text:#6b4a0c; --msq-info-bg:#f1f6fe; --msq-info-border:#d3e2f8; --msq-info-text:#1d3f73;
  --msq-error-bg:#fff7f7; --msq-error-border:#f2caca; --msq-error-text:#4c3434;
  --msq-font-display:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --msq-radius-card:18px; --msq-radius-control:12px; --msq-radius-hero:clamp(18px,1.6vw,24px); --msq-group:clamp(20px,2.2vw,32px);
  --msq-ease:200ms ease; --msq-focus:0 0 0 3px rgba(216,14,14,.2);
  box-sizing:border-box; color:var(--msq-text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-synthesis:style;
}
.msq-track *, .msq-track *::before, .msq-track *::after, .msq-bill *, .msq-bill *::before, .msq-bill *::after { box-sizing:border-box; }
.msq-track { width:min(1250px,100%); margin:0 auto; padding-bottom:56px; }
.msq-track svg, .msq-bill svg { display:block; width:100%; height:100%; }
.msq-track [hidden], .msq-bill [hidden] { display:none !important; }
.msq-track h1, .msq-track h2, .msq-track h3, .msq-track p { margin:0; }

/* ---------- Héroe ---------- */
.msq-track-hero { position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px 48px;
  margin:0 0 var(--msq-group); padding:clamp(24px,2.6vw,36px) clamp(22px,3vw,44px); background:var(--msq-panel); border-radius:var(--msq-radius-hero); color:#fff; box-shadow:0 16px 40px rgba(0,0,0,.10); }
.msq-track-hero::before { content:""; position:absolute; inset:-45% -8% auto auto; width:58%; aspect-ratio:1; z-index:-1; pointer-events:none;
  background:radial-gradient(circle,rgba(244,17,17,.26) 0%,rgba(244,17,17,.07) 42%,transparent 68%); }
.msq-track-overline { margin:0 0 8px !important; color:var(--msq-red-on-dark) !important; font-size:clamp(11px,.9vw,13px); line-height:1.3; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.msq-track-title { margin:0 0 10px !important; color:#fff !important; font-family:var(--msq-font-display); font-size:clamp(25px,2.8vw,40px) !important; line-height:1.1; font-weight:700; letter-spacing:-.018em; }
.msq-track-subtitle { max-width:56ch; color:rgba(255,255,255,.78) !important; font-size:clamp(14px,1.05vw,16px); line-height:1.55; }
.msq-track-trust { display:grid; gap:10px; margin:0 !important; padding:0 !important; list-style:none !important; }
.msq-track-trust li { display:flex; align-items:center; gap:10px; margin:0 !important; color:rgba(255,255,255,.92); font-size:13.5px; line-height:1.3; font-weight:600; white-space:nowrap; }
.msq-track-trust-icon { flex:0 0 36px; width:36px; height:36px; padding:8px; color:var(--msq-red-bright); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:12px; }

/* ---------- Búsqueda ---------- */
.msq-track-body { display:grid; gap:var(--msq-group); }
.msq-track-card, .msq-order { background:var(--msq-surface); border:1px solid var(--msq-border); border-radius:var(--msq-radius-card); box-shadow:0 10px 30px rgba(0,0,0,.045); }
.msq-track-search { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,.9fr); overflow:hidden; }
.msq-track-form { padding:clamp(20px,2.4vw,32px); min-width:0; }
.msq-track-form-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 18px; }
.msq-track-form-head h2 { color:var(--msq-text) !important; font-family:var(--msq-font-display); font-size:clamp(19px,1.6vw,22px) !important; line-height:1.25; font-weight:700; letter-spacing:-.012em; }
.msq-track-count { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 10px; border-radius:999px; background:var(--msq-surface-muted); color:var(--msq-muted-strong); font-size:12.5px; font-weight:600; transition:background var(--msq-ease),color var(--msq-ease); }
.msq-track-count.is-ready { background:var(--msq-success-bg); color:var(--msq-success-text); }
.msq-track-dots { display:inline-flex; gap:4px; }
.msq-track-dots i { width:7px; height:7px; border-radius:50%; background:#c9ccd2; transition:background var(--msq-ease),transform var(--msq-ease); }
.msq-track-dots i.on { background:var(--msq-red); transform:scale(1.1); }
.msq-track-count.is-ready .msq-track-dots i.on { background:var(--msq-success); }
.msq-track-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.msq-track-field { display:block; margin:0; min-width:0; }
.msq-track-field > span:first-child { display:block; margin:0 0 7px; color:var(--msq-text); font-size:13.5px; line-height:1.4; font-weight:600; }
.msq-track-input { position:relative; display:block; }
.msq-track-input > svg { position:absolute; left:15px; top:50%; width:19px; height:19px; transform:translateY(-50%); color:var(--msq-muted); pointer-events:none; transition:color var(--msq-ease); }
.msq-track .msq-track-input input { display:block; width:100%; min-width:0; min-height:54px; margin:0; padding:0 14px 0 44px !important; background:var(--msq-surface) !important; border:1px solid var(--msq-field-border) !important;
  border-radius:var(--msq-radius-control) !important; color:var(--msq-text) !important; font:inherit; font-size:15px !important; box-shadow:none !important; transition:border-color var(--msq-ease),box-shadow var(--msq-ease); }
.msq-track .msq-track-input input::placeholder { color:#9a9ca2; opacity:1; }
@media (hover:hover){ .msq-track .msq-track-input input:hover:not(:focus){ border-color:var(--msq-field-border-hover) !important; } }
.msq-track .msq-track-input input:focus { outline:none !important; border-color:var(--msq-red) !important; box-shadow:var(--msq-focus) !important; }
.msq-track .msq-track-input:focus-within > svg { color:var(--msq-red); }
.msq-track .msq-track-input input[aria-invalid="true"] { border-color:var(--msq-red) !important; background:var(--msq-error-bg) !important; }
.msq-track-input.is-filled > svg { color:var(--msq-text); }
.msq-track-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.msq-track-turnstile { display:flex; justify-content:center; margin:16px 0 0; min-height:0; }
.msq-track-error { margin:14px 0 0 !important; padding:12px 14px; border:1px solid var(--msq-error-border); border-radius:12px; background:var(--msq-error-bg); color:var(--msq-error-text); font-size:13.5px; line-height:1.5; }
.msq-track .msq-track-button, .msq-track .msq-btn { display:inline-flex !important; align-items:center; justify-content:center; gap:10px; min-height:54px; margin:0; padding:0 24px !important; border:0 !important; border-radius:var(--msq-radius-control) !important;
  font:inherit; font-size:15px !important; line-height:1.2 !important; font-weight:700 !important; letter-spacing:normal; text-transform:none; text-decoration:none !important; cursor:pointer; transition:background var(--msq-ease),box-shadow var(--msq-ease),transform 120ms ease,color var(--msq-ease),border-color var(--msq-ease); }
.msq-track .msq-track-button { width:100%; margin-top:18px; background:var(--msq-red) !important; color:#fff !important; box-shadow:0 8px 20px rgba(216,14,14,.18); }
.msq-track .msq-track-button svg, .msq-track .msq-btn svg { flex:0 0 20px; width:20px; height:20px; }
@media (hover:hover){ .msq-track .msq-track-button:hover:not(:disabled){ background:var(--msq-red-hover) !important; box-shadow:0 10px 24px rgba(216,14,14,.24); } }
.msq-track .msq-track-button:active:not(:disabled), .msq-track .msq-btn:active:not(:disabled) { transform:scale(.99); }
.msq-track .msq-track-button:disabled, .msq-track .msq-btn:disabled { cursor:progress; opacity:.78; }
.msq-track .msq-track-button:focus-visible, .msq-track .msq-btn:focus-visible { outline:3px solid var(--msq-black) !important; outline-offset:2px; }
.msq-track .msq-btn--ghost { background:var(--msq-surface) !important; color:var(--msq-text) !important; border:1px solid var(--msq-field-border) !important; }
@media (hover:hover){ .msq-track .msq-btn--ghost:hover:not(:disabled){ border-color:var(--msq-text) !important; } }
.msq-track .msq-btn--dark { background:var(--msq-black) !important; color:#fff !important; }
@media (hover:hover){ .msq-track .msq-btn--dark:hover:not(:disabled){ background:#26272b !important; } }
.msq-track .msq-btn--sm { min-height:44px; padding:0 16px !important; font-size:14px !important; }
.msq-spinner { width:20px; height:20px; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:msq-spin .7s linear infinite; }
.msq-btn--ghost .msq-spinner { border-color:rgba(0,0,0,.15); border-top-color:var(--msq-text); }
.msq-track-notice { display:flex; gap:14px; align-items:flex-start; padding:clamp(20px,2.4vw,32px); background:var(--msq-surface-muted); border-left:1px solid var(--msq-border); }
.msq-track-notice-icon { flex:0 0 40px; width:40px; height:40px; padding:9px; color:var(--msq-red); background:var(--msq-surface); border:1px solid var(--msq-border); border-radius:12px; }
.msq-track-notice p { color:var(--msq-muted-strong) !important; font-size:13.5px; line-height:1.6; }
.msq-track-notice-links { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; margin-top:10px !important; }
/* Los temas dan estilo a todo <button>: el enlace-botón se limpia por completo. */
.msq-track button.msq-track-link { appearance:none; background:none !important; border:0 !important; border-radius:6px !important; box-shadow:none !important; padding:0 4px !important; margin:0; font:inherit; cursor:pointer; text-transform:none; letter-spacing:normal; }
.msq-track button.msq-track-link:focus-visible { outline:2px solid var(--msq-red); outline-offset:2px; }
/* La página de rastreo ya tiene su propio título en el héroe: se oculta el título nativo del tema. */
body.msq-track-page .hero-section[data-type="type-1"], body.msq-track-page article > .entry-header, body.msq-track-page h1.wp-block-post-title, body.msq-track-page .entry-header .entry-title { display:none !important; }
.msq-track-notice-links a, .msq-track-link { display:inline-flex; align-items:center; min-height:44px; color:var(--msq-text) !important; font-weight:700; font-size:14px; text-decoration:underline; text-decoration-color:#a9acb2; text-underline-offset:3px; }
@media (hover:hover){ .msq-track-notice-links a:hover, .msq-track-link:hover { color:var(--msq-red-text) !important; text-decoration-color:currentColor; } }
.msq-track-noscript { padding:16px; text-align:center; color:var(--msq-muted-strong); }

/* ---------- Resultado: lista de pedidos ---------- */
.msq-track-results { display:grid; gap:var(--msq-group); }
.msq-rise { animation:msq-rise 280ms cubic-bezier(.2,.7,.2,1); }
.msq-list { padding:clamp(18px,2.2vw,28px); }
.msq-list h2 { margin:0 0 4px !important; font-family:var(--msq-font-display); font-size:clamp(18px,1.5vw,21px) !important; font-weight:700; color:var(--msq-text) !important; }
.msq-list > p { color:var(--msq-muted-strong); font-size:14px; margin:0 0 16px !important; }
.msq-list-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.msq-track .msq-list-item { display:grid; gap:6px; width:100%; min-height:44px; padding:16px; text-align:left; background:var(--msq-surface); border:1px solid var(--msq-border); border-radius:14px; color:var(--msq-text); font:inherit; cursor:pointer; transition:border-color var(--msq-ease),box-shadow var(--msq-ease),transform var(--msq-ease); }
@media (hover:hover){ .msq-track .msq-list-item:hover { border-color:var(--msq-text); box-shadow:0 8px 22px rgba(0,0,0,.06); transform:translateY(-1px); } }
.msq-track .msq-list-item:focus-visible { outline:2px solid var(--msq-red); outline-offset:2px; }
.msq-list-item strong { font-size:16px; }
.msq-list-item small { color:var(--msq-muted); font-size:12.5px; }

/* ---------- Resultado: pedido ---------- */
.msq-order { overflow:hidden; }
.msq-order[tabindex="-1"]:focus { outline:none; } /* foco solo para lectores de pantalla tras buscar */
.msq-order-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,32px) 0; }
.msq-order-kicker { color:var(--msq-muted) !important; font-size:13px; font-weight:600; margin:0 0 6px !important; }
.msq-order-headline { color:var(--msq-text) !important; font-family:var(--msq-font-display); font-size:clamp(20px,2vw,27px) !important; line-height:1.2; font-weight:700; letter-spacing:-.014em; }
.msq-pill { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; padding:7px 12px; border-radius:999px; font-size:12.5px; font-weight:700; line-height:1.2; white-space:nowrap; background:var(--msq-surface-muted); color:var(--msq-muted-strong); }
.msq-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.msq-pill--live { background:var(--msq-red-soft); color:var(--msq-red-text); }
.msq-pill--live::before { animation:msq-blink 1.6s ease-in-out infinite; }
.msq-pill--ok { background:var(--msq-success-bg); color:var(--msq-success-text); }
.msq-pill--warn { background:var(--msq-warn-bg); color:var(--msq-warn-text); }
.msq-pill--off { background:var(--msq-surface-muted); color:var(--msq-muted-strong); }
.msq-alert { display:flex; gap:12px; align-items:flex-start; margin:16px clamp(20px,2.4vw,32px) 0; padding:12px 14px; border-radius:12px; border:1px solid; font-size:13.5px; line-height:1.5; }
.msq-alert svg { flex:0 0 20px; width:20px; height:20px; margin-top:1px; }
.msq-alert--danger { background:var(--msq-error-bg); border-color:var(--msq-error-border); color:var(--msq-error-text); }
.msq-alert--warn { background:var(--msq-warn-bg); border-color:var(--msq-warn-border); color:var(--msq-warn-text); }
.msq-alert--info { background:var(--msq-info-bg); border-color:var(--msq-info-border); color:var(--msq-info-text); }

/* Línea de tiempo con íconos */
.msq-steps { --n:5; --progress:0; position:relative; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); margin:26px clamp(20px,2.4vw,32px) 8px !important; padding:0 !important; list-style:none !important; }
.msq-steps::before, .msq-steps::after { content:""; position:absolute; top:23px; left:calc(50% / var(--n)); right:calc(50% / var(--n)); height:3px; border-radius:3px; background:var(--msq-border); }
.msq-steps::after { right:auto; width:calc((100% - 100% / var(--n)) * var(--progress)); background:linear-gradient(90deg,var(--msq-red),var(--msq-red-bright)); transform-origin:left; animation:msq-grow 700ms cubic-bezier(.2,.7,.2,1); } /* sin «fill»: si la animación no corre, la línea igual se ve completa */
.msq-step { position:relative; z-index:1; display:grid; justify-items:center; gap:8px; margin:0 !important; padding:0 4px; text-align:center; }
.msq-step-dot { display:grid; place-items:center; width:48px; height:48px; padding:12px; border-radius:50%; background:var(--msq-surface); border:2px solid var(--msq-border); color:#a3a6ad; transition:background var(--msq-ease),border-color var(--msq-ease),color var(--msq-ease); }
.msq-step.is-done .msq-step-dot { background:var(--msq-text); border-color:var(--msq-text); color:#fff; }
.msq-step.is-current .msq-step-dot { background:var(--msq-red); border-color:var(--msq-red); color:#fff; animation:msq-pulse 2.2s ease-out infinite; }
.msq-step.is-final.is-current .msq-step-dot { background:var(--msq-success); border-color:var(--msq-success); animation:none; box-shadow:0 0 0 6px rgba(22,128,60,.14); }
.msq-step-label { color:var(--msq-muted-strong); font-size:13.5px; line-height:1.3; font-weight:600; }
.msq-step.is-done .msq-step-label, .msq-step.is-current .msq-step-label { color:var(--msq-text); font-weight:700; }
.msq-step time { color:var(--msq-muted); font-size:12px; line-height:1.3; min-height:16px; }

/* Datos clave */
.msq-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; padding:20px clamp(20px,2.4vw,32px); }
.msq-tile { display:flex; gap:12px; align-items:flex-start; min-width:0; padding:14px; border:1px solid var(--msq-border-soft); border-radius:14px; background:#fafbfc; }
.msq-tile-icon { flex:0 0 36px; width:36px; height:36px; padding:8px; border-radius:11px; background:var(--msq-surface); border:1px solid var(--msq-border); color:var(--msq-red); }
.msq-tile small { display:block; color:var(--msq-muted); font-size:12px; font-weight:600; margin:0 0 3px; }
.msq-tile strong { display:block; color:var(--msq-text); font-size:14px; line-height:1.4; font-weight:700; overflow-wrap:anywhere; }
.msq-tile a { color:var(--msq-red-text) !important; font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:3px; display:inline-flex; align-items:center; min-height:32px; gap:4px; }
.msq-tile a svg { width:14px; height:14px; }

/* Secciones */
.msq-sec { padding:20px clamp(20px,2.4vw,32px); border-top:1px solid var(--msq-border-soft); }
.msq-sec-title { display:flex; align-items:center; gap:10px; margin:0 0 14px !important; color:var(--msq-text) !important; font-family:var(--msq-font-display); font-size:16px !important; font-weight:700; }
.msq-sec-title span { flex:0 0 30px; width:30px; height:30px; padding:6px; border-radius:9px; background:var(--msq-red-soft); color:var(--msq-red-text); }
.msq-items { display:grid; gap:10px; margin:0 !important; padding:0 !important; list-style:none !important; }
.msq-item { display:flex; align-items:center; gap:12px; margin:0 !important; min-width:0; }
.msq-item-thumb { flex:0 0 52px; width:52px; height:52px; border-radius:12px; background:var(--msq-surface-muted); border:1px solid var(--msq-border-soft); overflow:hidden; display:grid; place-items:center; color:#a3a6ad; padding:0; }
.msq-item-thumb img { width:100%; height:100%; object-fit:contain; background:#fff; }
.msq-item-thumb svg { width:24px; height:24px; }
.msq-item-name { flex:1; min-width:0; font-size:14px; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }
.msq-item-qty { flex:0 0 auto; color:var(--msq-muted); font-size:13px; font-weight:600; }
.msq-warranties { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.msq-warranty { display:grid; gap:10px; padding:16px; border:1px solid var(--msq-border); border-radius:14px; background:linear-gradient(180deg,#fff, #fbfbfc); }
.msq-warranty-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.msq-warranty-head strong { font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.msq-warranty dl { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0; font-size:13px; }
.msq-warranty dt { color:var(--msq-muted); } .msq-warranty dd { margin:0; font-weight:600; overflow-wrap:anywhere; }
.msq-giftcode { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:15px !important; letter-spacing:.06em; }
.msq-invoice { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:16px; border-radius:14px; background:var(--msq-success-bg); border:1px solid var(--msq-success-border); }
.msq-invoice dl { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0; font-size:13px; color:var(--msq-success-text); }
.msq-invoice dd { margin:0; font-weight:700; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.msq-chip-line { display:flex; flex-wrap:wrap; gap:8px; }
.msq-lockline { display:flex; gap:12px; align-items:center; padding:14px 16px; border-radius:14px; background:var(--msq-surface-muted); color:var(--msq-muted-strong); font-size:13.5px; line-height:1.5; }
.msq-lockline > span:first-child { flex:0 0 22px; width:22px; height:22px; color:var(--msq-text); }
.msq-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:20px clamp(20px,2.4vw,32px) clamp(20px,2.4vw,28px); border-top:1px solid var(--msq-border-soft); background:#fafbfc; }
.msq-actions .msq-track-link { margin-left:auto; }
.msq-feedback { flex-basis:100%; margin:0 !important; font-size:13.5px; color:var(--msq-success-text); }
.msq-feedback.is-error { color:var(--msq-red-text); }

/* Invitación a la cuenta */
.msq-cta { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; padding:clamp(18px,2.2vw,26px) clamp(20px,2.4vw,32px); border-radius:var(--msq-radius-card); background:var(--msq-panel); color:#fff; }
.msq-cta::before { content:""; position:absolute; inset:-80% -10% auto auto; width:45%; aspect-ratio:1; z-index:-1; background:radial-gradient(circle,rgba(244,17,17,.22),transparent 65%); }
.msq-cta h3 { color:#fff !important; font-family:var(--msq-font-display); font-size:18px !important; font-weight:700; margin:0 0 4px !important; }
.msq-cta p { color:rgba(255,255,255,.75) !important; font-size:13.5px; line-height:1.5; }
.msq-cta-actions { display:flex; gap:10px; flex-wrap:wrap; }
.msq-track .msq-cta .msq-btn--ghost { background:transparent !important; color:#fff !important; border-color:rgba(255,255,255,.35) !important; }
.msq-track .msq-cta .msq-btn--red { background:var(--msq-red) !important; color:#fff !important; }

/* Esqueleto de carga (Mi cuenta) */
.msq-track-skeleton { height:220px; border-radius:var(--msq-radius-card); background:linear-gradient(90deg,#eef0f3 0%,#f6f7f9 50%,#eef0f3 100%); background-size:200% 100%; animation:msq-shimmer 1.4s ease-in-out infinite; }
.msq-track-sr { position:absolute !important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.msq-track--account { width:100%; margin:0 0 28px; padding:0; }
.msq-track--account .msq-order { box-shadow:none; }

/* Columna «Seguimiento» en Mi cuenta → Pedidos */
.msq-track-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:#eef0f3; color:#56585e; font-size:12.5px; font-weight:700; line-height:1.3; white-space:nowrap; }
.msq-track-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.msq-track-pill.is-live { background:#fff1f1; color:#b30d0d; } .msq-track-pill.is-ok { background:#f2fbf5; color:#14532d; } .msq-track-pill.is-warn { background:#fff8eb; color:#6b4a0c; }

/* ---------- Datos de facturación (Mi cuenta) ---------- */
.msq-bill { display:grid; gap:20px; max-width:860px; }
.msq-bill-intro { margin:0 !important; color:var(--msq-muted-strong); font-size:14px; line-height:1.6; }
.msq-bill-group { margin:0; padding:0; border:0; min-width:0; }
.msq-bill-group > legend { margin:0 0 10px; padding:0; color:var(--msq-text); font-size:14px; font-weight:700; }
.msq-bill-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.msq-bill-choice { position:relative; display:flex !important; align-items:center; gap:10px; min-height:54px; margin:0 !important; padding:12px 14px; border:1px solid var(--msq-field-border); border-radius:var(--msq-radius-control); background:#fff; cursor:pointer; font-size:14px; font-weight:600; line-height:1.35; transition:border-color var(--msq-ease),background var(--msq-ease),box-shadow var(--msq-ease); }
.msq-bill-choice input { width:18px !important; height:18px !important; margin:0; accent-color:var(--msq-red); flex:0 0 auto; }
.msq-bill-choice:has(input:checked) { border-color:var(--msq-red); background:var(--msq-red-soft); box-shadow:inset 0 0 0 1px var(--msq-red); }
.msq-bill-choice:has(input:focus-visible) { box-shadow:var(--msq-focus); }
.msq-bill-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.msq-bill-grid > label { display:block; margin:0; color:var(--msq-text); font-size:13.5px; font-weight:600; position:relative; }
.msq-bill-wide { grid-column:1/-1; }
.msq-bill input:not([type=radio]):not([type=checkbox]), .msq-bill select { display:block; width:100%; min-height:52px; margin:7px 0 0; padding:0 14px !important; background:#fff !important; border:1px solid var(--msq-field-border) !important; border-radius:var(--msq-radius-control) !important; color:var(--msq-text) !important; font:inherit; font-size:15px !important; font-weight:400; box-shadow:none !important; }
.msq-bill input:focus, .msq-bill select:focus { outline:none !important; border-color:var(--msq-red) !important; box-shadow:var(--msq-focus) !important; }
.msq-bill input[aria-invalid="true"] { border-color:var(--msq-red) !important; background:var(--msq-error-bg) !important; }
.msq-bill-error { display:block; margin-top:6px; color:var(--msq-red-text); font-size:12.5px; font-weight:600; }
.msq-bill-address { padding:18px; border:1px solid var(--msq-border); border-radius:var(--msq-radius-card); background:#fafbfc; }
.msq-bill .msq-bill-save { justify-self:start; min-height:54px; padding:0 28px !important; background:var(--msq-red) !important; color:#fff !important; border:0 !important; border-radius:var(--msq-radius-control) !important; font-size:15px !important; font-weight:700 !important; box-shadow:0 8px 20px rgba(216,14,14,.18); }
.msq-bill-list { position:absolute; left:0; right:0; top:100%; z-index:20; max-height:300px; overflow:auto; margin-top:4px; padding:4px; background:#fff; border:1px solid var(--msq-field-border); border-radius:12px; box-shadow:0 14px 34px rgba(0,0,0,.12); }
.msq-bill-option { display:flex; gap:10px; padding:10px; border-radius:8px; cursor:pointer; font-size:13.5px; font-weight:400; line-height:1.4; }
.msq-bill-option[aria-selected="true"], .msq-bill-option:hover { background:var(--msq-red-soft); }
.msq-bill-option b { flex:0 0 auto; padding:1px 7px; border-radius:999px; background:#eef0f3; font-size:12px; }

/* ---------- Animaciones ---------- */
@keyframes msq-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes msq-grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes msq-pulse { 0% { box-shadow:0 0 0 0 rgba(216,14,14,.35); } 70% { box-shadow:0 0 0 12px rgba(216,14,14,0); } 100% { box-shadow:0 0 0 0 rgba(216,14,14,0); } }
@keyframes msq-blink { 50% { opacity:.35; } }
@keyframes msq-spin { to { transform:rotate(360deg); } }
@keyframes msq-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* ---------- Adaptación al espacio real ----------
   Se usa el ancho del propio portal (consulta de contenedor), no el de la pantalla: así se ve bien
   aunque el tema limite el ancho del contenido (Blocksy, Gutenberg, plantillas de página…). */
.msq-track { container-type:inline-size; container-name:msqtrack; }
.msq-track button.msq-track-link { font-size:14px !important; font-weight:700; }
@container msqtrack (max-width:1000px){
  .msq-track-hero { grid-template-columns:minmax(0,1fr); gap:18px; }
  .msq-track-trust { grid-template-columns:repeat(3,minmax(0,auto)); justify-content:start; gap:10px 24px; }
  .msq-track-search { grid-template-columns:minmax(0,1fr); }
  .msq-track-notice { border-left:0; border-top:1px solid var(--msq-border); }
}
@container msqtrack (max-width:820px){
  .msq-track-fields { grid-template-columns:minmax(0,1fr); }
}
@container msqtrack (max-width:600px){
  /* Línea de tiempo vertical */
  .msq-steps { grid-template-columns:minmax(0,1fr); gap:0; margin-top:22px !important; }
  .msq-steps::before, .msq-steps::after { top:24px; bottom:24px; left:23px; right:auto; width:3px; height:auto; }
  .msq-steps::after { height:calc((100% - 48px) * var(--progress)); bottom:auto; transform-origin:top; animation-name:msq-grow-y; }
  .msq-step { grid-template-columns:48px minmax(0,1fr); grid-template-rows:auto auto; justify-items:start; align-items:center; column-gap:14px; row-gap:0; padding:0 0 18px; text-align:left; }
  .msq-step:last-child { padding-bottom:0; }
  .msq-step-dot { grid-row:1/3; }
  .msq-step-label { align-self:end; }
  .msq-step time { align-self:start; min-height:0; }
  .msq-actions .msq-track-link { margin-left:0; }
}
@keyframes msq-grow-y { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@container msqtrack (max-width:560px){
  .msq-track-hero { padding:20px 16px; text-align:center; }
  .msq-track-hero::before { inset:-55% -30% auto -30%; width:auto; }
  .msq-track-subtitle { margin:0 auto; }
  .msq-track-trust { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .msq-track-trust li { flex-direction:column; text-align:center; gap:6px; font-size:11.5px; white-space:normal; }
  .msq-track-trust-icon { flex-basis:30px; width:30px; height:30px; padding:6px; }
  .msq-track-form, .msq-track-notice { padding:20px 16px; }
  .msq-track-form-head { justify-content:center; text-align:center; }
  .msq-order-head { flex-direction:column; gap:10px; padding:18px 16px 0; }
  .msq-alert { margin:14px 16px 0; }
  .msq-steps { margin:20px 16px 4px !important; }
  .msq-tiles, .msq-sec, .msq-actions { padding-left:16px; padding-right:16px; }
  .msq-tiles { grid-template-columns:minmax(0,1fr); }
  .msq-actions { flex-direction:column; align-items:stretch; }
  .msq-track .msq-actions .msq-btn { width:100%; }
  .msq-actions .msq-track-link { justify-content:center; }
  .msq-cta { padding:18px 16px; }
  .msq-cta-actions, .msq-track .msq-cta-actions .msq-btn { width:100%; }
}
@container msqtrack (max-width:340px){ .msq-track-trust li { font-size:11px; } }

/* ---------- Teléfono (ancho de la pantalla) ---------- */
@media (max-width:600px){
  .msq-track, .msq-bill { --msq-radius-card:15px; --msq-group:20px; }
  .msq-track { width:calc(100% - 24px); padding-bottom:96px; }
  .msq-track--account { width:100%; padding-bottom:0; }
  .msq-track .msq-track-input input { min-height:52px; font-size:16px !important; } /* 16 px evita el zoom de iOS */
  .msq-bill-grid { grid-template-columns:minmax(0,1fr); }
  .msq-bill input:not([type=radio]):not([type=checkbox]), .msq-bill select { font-size:16px !important; }
  .msq-bill .msq-bill-save { width:100%; justify-self:stretch; }
}

@media (prefers-reduced-motion:reduce){
  .msq-track *, .msq-bill * { animation:none !important; transition:none !important; }
}