/* =====================================================================
   Walon — Mi Cuenta Rediseñada · v3.0.0
   Todo vive bajo .wmc / body.wmc-account-page → cero impacto fuera de
   /perfil/. Tipografías del sitio: Shapiro (display) + Neusa Next Pro.

   SISTEMA VISUAL
   El contenido vive en UNA superficie blanca que monta sobre el hero
   negro. Dentro de esa superficie, los bloques se diferencian por tono
   (--wash) y hairlines, no por más sombras: así la jerarquía se lee sin
   ruido. Shapiro se reserva para los momentos display (hero, cifras,
   nombre del convenio); el resto del texto es Neusa, que es lo legible.

   ÍNDICE
   1. Tokens y base          6. Convenio
   2. Layout (hero/shell)    7. Botones y estados vacíos
   3. Sidebar                8. Pantallas nativas de WooCommerce
   4. Encabezado de sección  9. Preferencias
   5. Superficie y métricas 10. Motion, skeletons y responsive
===================================================================== */

/* ============ 1. TOKENS Y BASE ============ */
.wmc{
  --ink:#0A0A0A; --ink-2:#171716; --paper:#EFEFED; --card:#FFFFFF;
  --line:#E7E7E5; --line-2:#DCDCD9; --line-strong:#C6C6C2; --wash:#F5F5F3;
  --muted:#6F6F6C; --faint:#9C9C99;
  --ok:#137A46; --warn:#8A6100; --danger:#B3392F;

  --radius-xl:22px; --radius:16px; --radius-sm:11px; --radius-pill:100px;
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px; --sp7:44px;

  --shadow-sm:0 1px 2px rgba(10,10,10,.04);
  --shadow-md:0 6px 20px -6px rgba(10,10,10,.12);
  --shadow-panel:0 30px 60px -30px rgba(10,10,10,.38), 0 2px 8px -2px rgba(10,10,10,.06);
  --shadow-lg:0 22px 48px -22px rgba(10,10,10,.34);

  /* Curva con un punto de sobreimpulso: da sensación de material físico. */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --stripes:repeating-linear-gradient(115deg,transparent 0 34px,rgba(255,255,255,.05) 34px 68px);

  --wmc-body:var(--w-font-body, "Neusa Next Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  --wmc-head:var(--w-font-head, "Shapiro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  --wmc-mono:ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, Menlo, monospace;

  font-family:var(--wmc-body);
  font-size:15px; line-height:1.55; color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.wmc-account-page{background:var(--paper);overflow-x:clip}
.wmc *{box-sizing:border-box}

/* Full-bleed: saca el módulo del contenedor angosto de Astra/Elementor. */
.wmc{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

/* Astra envuelve TODO el contenido de WooCommerce en su propia caja
   (.woocommerce-account .entry-content .woocommerce: max-width 540px,
   borde de 1px, padding 40px, margin 2em auto). Nuestro módulo ya se
   escapa de ahí con el full-bleed de arriba, pero el padre se queda con
   su propio borde y su propio padding puestos — visible como un
   rectángulo vacío encima y debajo de nuestra tarjeta. Se anula solo en
   esta página: en el resto del sitio esa caja de Astra sigue intacta. */
body.wmc-account-page .woocommerce-account .entry-content .woocommerce,
body.wmc-account-page .entry-content .woocommerce{
  max-width:none !important;margin:0 !important;border:0 !important;
  padding:0 !important;border-radius:0 !important;box-shadow:none !important}

/* Clearfix de WooCommerce/Astra/Elementor: dejaban huecos y líneas sueltas
   alrededor del módulo. Neutralizados SOLO dentro de la página de cuenta. */
body.wmc-account-page .woocommerce::before,
body.wmc-account-page .woocommerce::after,
body.wmc-account-page .entry-content.clear::before,
body.wmc-account-page .entry-content.clear::after,
body.wmc-account-page .elementor-shortcode::before,
body.wmc-account-page .elementor-shortcode::after,
.wmc .clear,.wmc .col2-set::before,.wmc .col2-set::after,
.wmc .u-columns::before,.wmc .u-columns::after{content:none !important;display:none !important}

/* Tipografía display: solo para momentos de marca. */
.wmc .wmc-display{font-family:var(--wmc-head);font-weight:var(--w-wt-heavy,800);
  text-transform:uppercase;letter-spacing:.02em;line-height:1}
.wmc .wmc-mono{font-family:var(--wmc-mono);font-size:12px;letter-spacing:.01em}
.wmc :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.wmc .wmc-muted{color:var(--muted)}
.wmc .wmc-strong{font-weight:var(--w-wt-medium,600);font-size:14px;color:var(--ink)}
.wmc .wmc-p13{font-size:13px;color:var(--muted)}
.wmc .wmc-mb6{margin-bottom:var(--sp2)}.wmc .wmc-mb12{margin-bottom:var(--sp3)}
.wmc .wmc-mb16{margin-bottom:var(--sp4)}.wmc .wmc-mt14{margin-top:14px}
.wmc .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ 2. LAYOUT ============ */
.wmc-hero{background:var(--ink);color:#fff;padding:58px 30px 150px;position:relative;overflow:hidden;margin:0}
/* La trama cubre TODO el banner (antes era una caja de 640px pegada a la
   derecha y solo se veía en esa esquina). Se ensancha e inclina desde el
   centro para que las diagonales crucen de lado a lado. */
.wmc-hero::after{content:"";position:absolute;left:-25%;right:-25%;top:-40%;bottom:-40%;
  background-image:var(--stripes);transform:rotate(6deg);pointer-events:none}
.wmc-hero-inner{max-width:1180px;margin:0 auto;position:relative}
.wmc-hello{font-size:10.5px;color:#8C8C89;font-weight:var(--w-wt-bold,700);letter-spacing:.26em;
  text-transform:uppercase;margin-bottom:14px}
.wmc-hero h1{font-size:clamp(30px,4.4vw,52px);margin:0;color:#fff;display:flex;gap:.28em;flex-wrap:wrap;line-height:.98}
.wmc-name{color:transparent;-webkit-text-stroke:1.5px #fff}
.wmc-chips{display:flex;gap:10px;align-items:center;margin-top:22px;flex-wrap:wrap}
.wmc-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:var(--radius-pill);
  font-size:11.5px;font-weight:var(--w-wt-medium,600);color:#D9D9D6;border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(2px)}
.wmc-dot{width:6px;height:6px;border-radius:50%;background:#fff}
.wmc-chip-live .wmc-dot{animation:wmcPulse 2.4s var(--ease) infinite}
@keyframes wmcPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}50%{box-shadow:0 0 0 5px rgba(255,255,255,0)}}
/* Convenio inactivo (suspendido/vencido/rechazado): mismo molde que el chip
   "activo", en tono ámbar y sin el pulso — informa sin sonar a error grave,
   porque casi siempre es reversible (revalida solo o al pagar). */
.wmc-chip-off{color:#F0C88C;border-color:rgba(240,200,140,.35)}
.wmc-chip-off .wmc-dot{background:#F0C88C}

/* ── LA CORRECCIÓN CLAVE ──────────────────────────────────────────────
   Sin position/z-index, .wmc-hero (que sí es position:relative) se pinta
   POR ENCIMA de .wmc-shell, y el título de cada sección quedaba dibujado
   detrás de la banda negra. El sidebar se salvaba solo porque su
   position:sticky lo convierte en elemento posicionado.
   ──────────────────────────────────────────────────────────────────── */
.wmc-shell{position:relative;z-index:1;
  max-width:1240px;margin:-92px auto 100px;padding:0 30px;
  display:grid !important;grid-template-columns:262px minmax(0,1fr) !important;
  gap:22px;align-items:start}

/* ============ 3. SIDEBAR ============ */
.wmc-side{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:var(--sp2);position:sticky;top:22px;box-shadow:var(--shadow-panel);
  float:none !important;width:auto !important;max-width:none !important}
.wmc-side ul{list-style:none;margin:0;padding:0}
.wmc-side li{margin:0}

.wmc-user{display:flex;align-items:center;gap:12px;padding:14px 13px 16px;
  border-bottom:1px solid var(--line);margin-bottom:var(--sp2)}
.wmc-user img{width:40px;height:40px;border-radius:50%;display:block;flex-shrink:0;
  background:var(--wash);box-shadow:0 0 0 1px var(--line),0 0 0 4px var(--card)}
.wmc-user-txt{min-width:0}
.wmc-user-name{font-weight:var(--w-wt-bold,700);font-size:13.5px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wmc-user-mail{font-size:11px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.wmc .ast-wooaccount-user-wrapper{display:none !important}

/* El "palito negro" era un ::after de 3px de ancho que Astra Pro pone sobre
   el <li> (no sobre el <a>, que es donde se buscaba antes) como indicador de
   sección activa. Se anulan los pseudo-elementos de li Y de a, en el nav y
   en la clase de WooCommerce, para que no vuelva por ninguna vía.
   Los nuestros no usan pseudo-elementos: el fondo y la trama van directos
   sobre el <a>, así el inspector queda limpio. */
.wmc-side li::after,.wmc-side li::before,
.wmc-side a::after,.wmc-side a::before,
.wmc .woocommerce-MyAccount-navigation-link::after,
.wmc .woocommerce-MyAccount-navigation-link::before,
.wmc .woocommerce-MyAccount-navigation-link a::after,
.wmc .woocommerce-MyAccount-navigation-link a::before{
  content:none !important;display:none !important;
  width:0 !important;height:0 !important;background:none !important;border:0 !important}
/* Excepción: el separador sí necesita pintarse (es un <li> vacío). */
.wmc-side li.wmc-sep{height:1px;background:var(--line)}
.wmc-side a{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:12px 14px;border-radius:var(--radius-sm);text-decoration:none;
  font-size:13.5px;font-weight:var(--w-wt-medium,500);color:var(--muted);
  white-space:nowrap;background-color:transparent;
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.wmc-side svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;transition:transform .3s var(--ease)}
.wmc-side a:hover{color:var(--ink);background-color:var(--wash)}
.wmc-side a:hover svg{transform:translateX(2px)}
.wmc-side li.is-active a{color:#fff;font-weight:var(--w-wt-bold,700);
  background-color:var(--ink);background-image:var(--stripes);
  box-shadow:var(--shadow-md);view-transition-name:wmc-pill}
.wmc-side li.is-active a:hover{color:#fff;background-color:var(--ink)}
.wmc-sep{height:1px;background:var(--line);margin:var(--sp2) 12px}
.wmc-logout a{color:var(--faint)}
.wmc-logout a:hover{color:var(--danger)}

/* ============ 4. ENCABEZADO DE SECCIÓN ============ */
.wmc-sec-head{margin-bottom:var(--sp6);padding-bottom:var(--sp5);border-bottom:1px solid var(--line)}
.wmc-kicker{display:block;font-size:10px;font-weight:var(--w-wt-bold,700);letter-spacing:.26em;
  text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.wmc-h2{font-size:22px;margin:0 0 6px;color:var(--ink);letter-spacing:.03em}
.wmc-sub{color:var(--muted);font-size:13.5px;margin:0;max-width:60ch}
.wmc-back{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:var(--w-wt-bold,700);
  color:var(--faint) !important;text-decoration:none;margin-bottom:14px;
  text-transform:uppercase;letter-spacing:.1em;
  transition:gap .22s var(--ease),color .22s var(--ease)}
.wmc-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wmc-back:hover{gap:9px;color:var(--ink) !important;opacity:1 !important}

.wmc-block-head{margin-bottom:var(--sp4)}
.wmc-block-head--tight{margin-bottom:var(--sp3)}
.wmc-block-title{font-size:14px;font-weight:var(--w-wt-bold,700);margin:0 0 3px;
  font-family:var(--wmc-body);letter-spacing:0;text-transform:none;color:var(--ink)}
.wmc-block-desc{font-size:12.5px;color:var(--muted);margin:0}

/* ============ 5. SUPERFICIE DE CONTENIDO Y MÉTRICAS ============ */
/* Una sola superficie blanca: los bloques internos se separan por tono. */
.wmc-content{min-width:0;float:none !important;width:auto !important;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:var(--sp6);box-shadow:var(--shadow-panel)}
.wmc-content a:not(.wmc-btn):not(.button):not(.woocommerce-Button):not(.wmc-tag-chip){color:var(--ink)}
.wmc-content a:not(.wmc-btn):not(.button):not(.woocommerce-Button):hover{color:var(--ink);opacity:.7}
.wmc-content > *:last-child{margin-bottom:0}

/* Tarjetas internas: tono, no sombra. */
.wmc-card{background:var(--wash);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp5)}
.wmc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp4)}

/* Métricas: un solo bloque dividido por hairlines (más editorial que
   tres cajas sueltas). */
.wmc-stat-row{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:var(--sp4);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--wash)}
.wmc-stat{background:transparent;border:0;border-right:1px solid var(--line);border-radius:0;
  padding:var(--sp5) var(--sp5) 22px;position:relative;
  transition:background .28s var(--ease)}
.wmc-stat:last-child{border-right:0}
.wmc-stat:hover{background:#EDEDEA}
.wmc-stat .wmc-k{font-size:38px;line-height:.92;display:block;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.wmc-stat .wmc-k .woocommerce-Price-amount{font-family:inherit}
.wmc-stat .wmc-k small{font-size:16px;font-weight:var(--w-wt-bold,700);color:var(--faint)}
.wmc-stat .wmc-l{font-size:11px;color:var(--muted);font-weight:var(--w-wt-bold,700);
  margin-top:10px;display:block;letter-spacing:.1em;text-transform:uppercase}

/* Seguimiento del último pedido */
.wmc-track{margin-bottom:var(--sp4)}
.wmc-track-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.wmc-thumbs{display:flex;gap:var(--sp2);margin-top:20px;flex-wrap:wrap}
.wmc-thumb{width:54px;height:54px;border-radius:var(--radius-sm);overflow:hidden;background:var(--card);
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .28s var(--ease)}
.wmc-thumb:hover{transform:translateY(-3px) rotate(-1.5deg)}
.wmc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wmc-thumb-more{font-size:12.5px;font-weight:var(--w-wt-bold,700);color:var(--muted)}
.wmc-steps{display:flex;margin-top:26px}
.wmc-st{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative}
.wmc-st::before{content:"";position:absolute;top:8px;left:-50%;width:100%;height:2px;background:var(--line-strong);z-index:0}
.wmc-st:first-child::before{display:none}
/* La línea de progreso se dibuja sola al entrar. */
.wmc-st.done::before{background:var(--ink);transform-origin:left;animation:wmcLine .5s var(--ease-out) backwards}
.wmc-st.done:nth-child(2)::before{animation-delay:.1s}
.wmc-st.done:nth-child(3)::before{animation-delay:.2s}
.wmc-st.done:nth-child(4)::before{animation-delay:.3s}
@keyframes wmcLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.wmc-b{width:17px;height:17px;border-radius:50%;background:var(--wash);border:2px solid var(--line-strong);
  z-index:1;transition:all .3s var(--ease)}
.wmc-st.done .wmc-b{background:var(--ink);border-color:var(--ink)}
.wmc-st.now .wmc-b{border-color:var(--ink);box-shadow:inset 0 0 0 3.5px var(--wash),inset 0 0 0 20px var(--ink);
  animation:wmcPulseDark 2.4s var(--ease) infinite}
@keyframes wmcPulseDark{0%,100%{outline:0 solid rgba(10,10,10,.18);outline-offset:0}50%{outline:5px solid rgba(10,10,10,0);outline-offset:2px}}
.wmc-st span{font-size:10.5px;font-weight:var(--w-wt-bold,700);color:var(--faint);text-align:center;
  letter-spacing:.06em;text-transform:uppercase}
.wmc-st.done span,.wmc-st.now span{color:var(--ink)}

/* ============ 6. CONVENIO ============ */
.wmc-convenio-card{background:var(--ink);color:#fff;border-radius:var(--radius-xl);padding:30px;
  position:relative;overflow:hidden;margin-top:var(--sp4);box-shadow:var(--shadow-lg)}
.wmc-convenio-card::before{content:"";position:absolute;inset:0;background:var(--stripes);pointer-events:none}
.wmc-cc-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;position:relative}
.wmc-cc-tag{font-size:10px;font-weight:var(--w-wt-bold,700);letter-spacing:.26em;color:#8C8C89;text-transform:uppercase}
.wmc-convenio-card h3{font-size:23px;margin:8px 0 0;color:#fff;max-width:22ch;line-height:1.05}
.wmc-cc-mail{color:#8C8C89;margin-top:8px}
.wmc-cc-desc{position:relative;color:#B9B9B6;font-size:13.5px;margin:14px 0 0;max-width:52ch}
.wmc-badge{background:#fff;color:var(--ink);font-size:10px;font-weight:var(--w-wt-bold,700);
  padding:8px 14px;border-radius:var(--radius-pill);letter-spacing:.14em;white-space:nowrap}
/* Variante de la tarjeta de convenio cuando NO está activo: mismo molde que
   la de "activo" (para que se reconozca de un vistazo que es la misma
   sección), badge en ámbar en vez de blanco para no leerse como "validado". */
.wmc-badge-off{background:#D9A93E;color:var(--ink)}
.wmc-benefits{display:flex;gap:36px;margin:28px 0 var(--sp1);position:relative;flex-wrap:wrap}
.wmc-pct{font-size:38px;line-height:1}
.wmc-cat{font-size:10.5px;color:#8C8C89;font-weight:var(--w-wt-bold,700);margin-top:5px;
  letter-spacing:.14em;text-transform:uppercase}
.wmc-meter{margin-top:22px;position:relative}
.wmc-meter-lbl{display:flex;justify-content:space-between;font-size:11.5px;color:#8C8C89;
  font-weight:var(--w-wt-medium,600);margin-bottom:var(--sp2);gap:12px;flex-wrap:wrap}
.wmc-meter-lbl b{color:#fff}
.wmc-meter-lbl .woocommerce-Price-amount{color:inherit}
.wmc-bar{height:6px;background:rgba(255,255,255,.14);border-radius:var(--radius-pill);overflow:hidden}
/* El ancho en reposo ya es el real: si la animación no corre, la barra se
   ve llena correctamente en vez de quedarse en cero. */
.wmc-fill{height:100%;background:#fff;border-radius:var(--radius-pill);
  width:var(--wmc-w,0%);animation:wmcGrow 1.1s var(--ease-out) .2s backwards}
@keyframes wmcGrow{from{width:0}}
.wmc-cc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:24px;
  position:relative;flex-wrap:wrap;gap:12px}
.wmc-until{font-size:11.5px;color:#8C8C89;max-width:46ch}

/* ============ 7. BOTONES Y ESTADOS VACÍOS ============ */
.wmc-btn,.wmc .button,.wmc a.button,.wmc button[type="submit"],
.wmc input[type="submit"],.wmc .woocommerce-Button,.wmc .wp-element-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--wmc-body);font-size:12.5px;font-weight:var(--w-wt-bold,700);
  padding:13px 24px;border-radius:var(--radius-pill);cursor:pointer;
  background:var(--ink) !important;color:#fff !important;border:1.5px solid var(--ink) !important;
  text-decoration:none;line-height:1.2;text-transform:none;letter-spacing:.02em;
  transition:transform .18s var(--ease),box-shadow .22s var(--ease),background .2s var(--ease);
}
.wmc-btn:hover,.wmc .button:hover,.wmc button[type="submit"]:hover{
  transform:translateY(-2px);box-shadow:var(--shadow-lg);background:var(--ink-2) !important;color:#fff !important}
.wmc-btn:active,.wmc .button:active{transform:translateY(0) scale(.98)}
.wmc-btn[disabled]{opacity:.45;pointer-events:none}
.wmc-ghost{background:transparent !important;border-color:var(--line-strong) !important;color:var(--ink) !important}
.wmc-ghost:hover{border-color:var(--ink) !important;background:transparent !important;color:var(--ink) !important;box-shadow:var(--shadow-md)}
.wmc-ghost-inv{background:transparent !important;border-color:rgba(255,255,255,.32) !important;color:#fff !important}
.wmc-ghost-inv:hover{border-color:#fff !important;background:rgba(255,255,255,.06) !important}

.wmc-empty{text-align:center;padding:52px 28px;background:var(--wash);
  border:1px dashed var(--line-strong);border-radius:var(--radius)}
.wmc-empty .wmc-p13{max-width:44ch;margin:var(--sp2) auto 0}
.wmc-empty-icon{width:58px;height:58px;border:1.5px solid var(--line-strong);border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;background:var(--card)}
.wmc-empty-icon svg{width:24px;height:24px;stroke:var(--muted);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ============ 8. PANTALLAS NATIVAS DE WOOCOMMERCE ============ */

/* --- 8.1 Tabla de pedidos --- */
.wmc table.woocommerce-orders-table{width:100%;border-collapse:separate;border-spacing:0;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.wmc table.woocommerce-orders-table th{font-size:10px;font-weight:var(--w-wt-bold,700);letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);text-align:left;padding:15px 20px;
  border-bottom:1px solid var(--line);background:var(--wash)}
.wmc table.woocommerce-orders-table td{padding:18px 20px;border-bottom:1px solid var(--line);
  font-size:13.5px;vertical-align:middle;background:transparent}
.wmc table.woocommerce-orders-table tr:last-child td{border-bottom:0}
.wmc table.woocommerce-orders-table tbody tr{transition:background .18s var(--ease)}
.wmc table.woocommerce-orders-table tbody tr:hover{background:var(--wash)}
.wmc table.woocommerce-orders-table td a{color:var(--ink);font-weight:var(--w-wt-medium,600);text-decoration:none}
.wmc .woocommerce-orders-table__cell-order-number a{font-family:var(--wmc-mono);font-size:12px}
.wmc .woocommerce-orders-table__cell-order-total{font-weight:var(--w-wt-bold,700)}
.wmc .woocommerce-orders-table__cell-order-actions{text-align:right;white-space:nowrap}
.wmc .woocommerce-orders-table__cell-order-actions .button{padding:9px 18px;font-size:11.5px;margin-left:6px}

/* Punto de color por estado (no depende solo del color: el texto sigue ahí). */
.wmc .woocommerce-orders-table__cell-order-status,
.wmc .ast-orders-table__cell-order-status{font-weight:var(--w-wt-medium,600);color:var(--muted);white-space:nowrap}
.wmc .woocommerce-orders-table__cell-order-status::before,
.wmc .ast-orders-table__cell-order-status::before{content:"";width:7px;height:7px;border-radius:50%;
  display:inline-block;margin-right:9px;background:var(--faint);vertical-align:middle}
.wmc tr[class*="status-completed"] .woocommerce-orders-table__cell-order-status::before,
.wmc [class*="status-completed"] .ast-orders-table__cell-order-status::before{background:var(--ok)}
.wmc tr[class*="status-processing"] .woocommerce-orders-table__cell-order-status::before,
.wmc tr[class*="status-on-hold"] .woocommerce-orders-table__cell-order-status::before,
.wmc [class*="status-processing"] .ast-orders-table__cell-order-status::before{background:var(--warn)}
.wmc tr[class*="status-cancelled"] .woocommerce-orders-table__cell-order-status::before,
.wmc tr[class*="status-failed"] .woocommerce-orders-table__cell-order-status::before,
.wmc tr[class*="status-refunded"] .woocommerce-orders-table__cell-order-status::before{background:var(--danger)}

/* Red de seguridad por si Astra Pro llegara a imponer su grid de pedidos. */
.wmc .ast-woo-grid-orders-container{display:grid;gap:var(--sp3)}
.wmc .ast-orders-table__row{display:grid;grid-template-columns:1fr auto;gap:6px 18px;align-items:center;
  background:var(--wash);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.wmc .ast-orders-table__cell-order-actions{grid-row:1/4;grid-column:2;text-align:right}

.wmc .woocommerce-pagination{margin-top:var(--sp5);display:flex;gap:var(--sp2)}
.wmc .woocommerce-pagination .button{padding:10px 20px;font-size:12px}

/* --- 8.2 Direcciones (my-address.php) --- */
.wmc .woocommerce-Addresses,.wmc .u-columns.woocommerce-Addresses{
  display:grid !important;grid-template-columns:1fr 1fr;gap:var(--sp4);margin:0}
.wmc .woocommerce-Address{background:var(--wash);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;width:auto !important;float:none !important;margin:0 !important;
  transition:border-color .22s var(--ease),background .22s var(--ease)}
.wmc .woocommerce-Address:hover{border-color:var(--line-strong);background:#EDEDEA}
.wmc .woocommerce-Address-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
/* El h2 nativo se degrada a etiqueta: con Shapiro a 26px era gigantesco. */
.wmc .woocommerce-Address-title h2,
.wmc .woocommerce-Address-title h3{font-size:10px !important;font-weight:var(--w-wt-bold,700);
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin:0;
  font-family:var(--wmc-body) !important;line-height:1.4}
/* El enlace nativo dice "Editar Dirección de facturación" (largo y redundante
   con el título). Se muestra corto; el nombre accesible completo se conserva
   porque el texto sigue en el DOM para lectores de pantalla. */
.wmc .woocommerce-Address-title .edit{font-size:0;line-height:0;flex-shrink:0;
  border:1.5px solid var(--line-strong);border-radius:var(--radius-pill);padding:8px 16px;
  text-decoration:none;background:var(--card);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.wmc .woocommerce-Address-title .edit::after{content:"Editar";font-size:11.5px;line-height:1.2;
  font-weight:var(--w-wt-bold,700);color:var(--ink)}
.wmc .woocommerce-Address-title .edit:hover{border-color:var(--ink);box-shadow:var(--shadow-md);opacity:1 !important}
.wmc .woocommerce-Address address{font-style:normal;font-size:13px;color:var(--muted);line-height:1.65}
.wmc-addr-section{margin-top:var(--sp6);padding-top:var(--sp6);border-top:1px solid var(--line)}
/* Párrafo introductorio nativo: ya lo dice nuestro subtítulo de bloque. */
.wmc-addr-section > p:not([class]){display:none}

/* --- 8.3 Formularios nativos --- */
/* El h3 propio de form-edit-address.php: en PHP lo dejamos vacío (el título
   ya está en la cabecera de sección), pero si algún plugin lo repone, aquí
   queda como etiqueta discreta en vez de un titular gigante. */
.wmc form > h3{font-size:11px !important;font-family:var(--wmc-body) !important;
  font-weight:var(--w-wt-bold,700);letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin:0 0 var(--sp4)}
.wmc form > h3:empty{display:none}

.wmc form.woocommerce-EditAccountForm,
.wmc form.edit-account,
.wmc .woocommerce-address-fields{
  background:var(--wash);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--sp5);
  display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;align-items:start}
.wmc form.woocommerce-EditAccountForm > .form-row-wide,
.wmc form.woocommerce-EditAccountForm > fieldset,
.wmc form.woocommerce-EditAccountForm > .wmc-block-head,
.wmc form.woocommerce-EditAccountForm > p:last-of-type,
.wmc .woocommerce-address-fields > *{grid-column:1/-1}
.wmc .woocommerce-address-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.wmc .woocommerce-address-fields__field-wrapper .form-row-wide,
.wmc .woocommerce-address-fields__field-wrapper .form-row:only-child{grid-column:1/-1}
.wmc .form-row{float:none !important;width:auto !important;margin:0;padding:0}

/* Astra Pro oculta las etiquetas de los formularios de cuenta (usa su
   estilo con placeholder). Por eso "Datos personales" salía con cuatro
   cajas sin título. Se fuerzan visibles.
   line-height 1.7 + padding-top: las mayúsculas acentuadas (PAÍS, DIRECCIÓN)
   se cortaban por arriba con el interlineado apretado. */
.wmc form .form-row label,.wmc .woocommerce-address-fields label,
.wmc form.woocommerce-EditAccountForm .form-row > label{
  font-size:10px;font-weight:var(--w-wt-bold,700);color:var(--muted);
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:8px;
  display:block !important;visibility:visible !important;opacity:1 !important;
  position:static !important;clip:auto !important;clip-path:none !important;
  width:auto !important;height:auto !important;overflow:visible !important;
  line-height:1.7;padding-top:2px}
.wmc form .form-row label:empty{display:none !important}
/* Campo sin etiqueta (llega así desde Checkout Field Editor): se marca en
   claro para que no parezca un input roto. */
.wmc form .form-row:not(:has(label)) input{border-style:dashed}
.wmc form .form-row label .required{color:var(--danger);text-decoration:none;border:0}
.wmc form .form-row input.input-text,
.wmc form .form-row input[type="text"],
.wmc form .form-row input[type="email"],
.wmc form .form-row input[type="tel"],
.wmc form .form-row input[type="number"],
.wmc form .form-row input[type="password"],
.wmc form .form-row select,
.wmc form .form-row textarea,
.wmc .select2-container .select2-selection{
  width:100%;padding:14px;border:1.5px solid var(--line-2);border-radius:var(--radius-sm);
  font-family:var(--wmc-body);font-size:14px;background:var(--card);color:var(--ink);
  outline:none;height:auto;min-height:50px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.wmc form .form-row input:focus,.wmc form .form-row select:focus,.wmc form .form-row textarea:focus{
  border-color:var(--ink);box-shadow:0 0 0 3px rgba(10,10,10,.06)}
.wmc form .form-row input::placeholder{color:var(--faint)}
.wmc form .form-row em,.wmc form .form-row .description,
.wmc span[id$="_description"]{display:block;font-size:11.5px;color:var(--faint);font-style:normal;margin-top:7px}
.wmc fieldset{border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:22px;
  margin:var(--sp2) 0 0;background:var(--card);min-width:0}
.wmc fieldset legend{font-weight:var(--w-wt-bold,700);font-size:11px;padding:0 var(--sp2);
  font-family:var(--wmc-body);text-transform:uppercase;letter-spacing:.14em;color:var(--faint)}
.wmc fieldset .form-row + .form-row{margin-top:18px}
/* El wrapper que WooCommerce mete alrededor de cada campo no tenía estilo y
   dejaba que sus hijos (como el ojo de la contraseña) se salieran de sitio. */
.wmc .woocommerce-input-wrapper{display:block;width:100%;position:relative}
.wmc form.woocommerce-EditAccountForm > p:last-of-type,
.wmc .woocommerce-address-fields > p:last-of-type{
  margin-top:var(--sp2);padding-top:var(--sp5);border-top:1px solid var(--line-2)}

.wmc .select2-container--default .select2-selection--single{border:1.5px solid var(--line-2);border-radius:var(--radius-sm)}
.wmc .select2-container--default .select2-selection--single .select2-selection__arrow{height:48px}

/* --- 8.4 Detalle de pedido (view-order) --- */
.wmc .woocommerce-order-details,.wmc .woocommerce-customer-details{margin-top:var(--sp6)}
.wmc .woocommerce-column__title,.wmc .woocommerce-order-details__title{
  font-family:var(--wmc-body);font-size:11px;font-weight:var(--w-wt-bold,700);
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin:0 0 var(--sp3)}
.wmc table.woocommerce-table--order-details,.wmc table.shop_table{
  width:100%;border-collapse:separate;border-spacing:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.wmc table.shop_table th{font-size:10px;font-weight:var(--w-wt-bold,700);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);text-align:left;padding:15px 20px;background:var(--wash);border:0}
.wmc table.shop_table td{padding:17px 20px;border-top:1px solid var(--line);font-size:13.5px}
.wmc table.shop_table tfoot td,.wmc table.shop_table tfoot th{font-weight:var(--w-wt-bold,700);background:var(--wash)}
.wmc .woocommerce-columns--addresses{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp4);margin-top:var(--sp5)}
.wmc .woocommerce-columns--addresses .col-1,
.wmc .woocommerce-columns--addresses .col-2{width:auto !important;float:none !important;
  background:var(--wash);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.wmc .woocommerce-order-overview{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp5);padding:0;margin:0 0 var(--sp5)}
.wmc .woocommerce-order-overview li{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);font-weight:var(--w-wt-bold,700);border-left:2px solid var(--line-strong);padding-left:15px}
.wmc .woocommerce-order-overview li strong{display:block;font-size:15px;letter-spacing:0;
  text-transform:none;color:var(--ink);margin-top:5px}

/* --- 8.5 Avisos --- */
/* Cuando el JS consigue mostrar el toast, marca el aviso en línea como
   duplicado y lo repliega: el mensaje se ve una sola vez. Si el JS falla,
   el aviso nativo sigue visible — nunca se pierde información. */
.wmc .woocommerce-message[data-wmc-toast="1"],
.wmc .woocommerce-error[data-wmc-toast="1"]{display:none}
.wmc .woocommerce-message,.wmc .woocommerce-info,.wmc .woocommerce-error,.wmc .woocommerce-notice{
  background:var(--wash);border:1px solid var(--line);border-left:3px solid var(--ink);
  border-radius:var(--radius-sm);padding:15px 18px;font-size:13px;color:var(--ink);
  margin:0 0 var(--sp5);list-style:none;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  animation:wmcSlideIn .4s var(--ease) backwards}
.wmc .woocommerce-message::before,.wmc .woocommerce-info::before,.wmc .woocommerce-error::before{display:none}
.wmc .woocommerce-message{border-left-color:var(--ok)}
.wmc .woocommerce-error{border-left-color:var(--danger)}
.wmc .woocommerce-message .button{margin-left:auto}
@keyframes wmcSlideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.wmc .woocommerce-notices-wrapper:empty{display:none}

/* --- 8.6 TARJETAS DE PEDIDO (plantilla propia orders.php) --- */
.wmc-orders{display:grid;gap:var(--sp4)}
.wmc-order{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  position:relative;overflow:hidden;
  transition:border-color .24s var(--ease),box-shadow .24s var(--ease),transform .24s var(--ease)}
/* Filete de color a la izquierda: el estado se lee sin buscar la píldora.
   background-color (propiedad larga) y no el atajo background: con var()
   dentro de un atajo el valor queda como "sustitución pendiente" y algunos
   motores no lo resuelven igual. */
.wmc-order::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background-color:var(--line-strong)}
.wmc-order--ok::before{background-color:var(--ok)}
.wmc-order--proceso::before{background-color:var(--warn)}
.wmc-order--alto::before{background-color:var(--danger)}
.wmc-order:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)}

/* Cabecera: estado a la izquierda, referencia y fecha a la derecha. */
.wmc-order-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 22px;background:var(--wash);border-bottom:1px solid var(--line)}
.wmc-order-ref{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--faint);
  font-weight:var(--w-wt-medium,600)}
.wmc-order-sep{opacity:.5}

/* minmax(0,1fr) en la columna del texto + ancho fijo en la lateral: la
   tarjeta mantiene la misma forma con 1 producto o con 8, y con nombres
   largos. Nada empuja a nada. */
/* Tercera columna de ANCHO FIJO: así el total cae siempre en la misma
   vertical en todas las tarjetas, tenga el pedido una acción o cuatro
   (las de más envuelven dentro de la columna en vez de ensancharla). */
.wmc-order-body{display:grid;grid-template-columns:auto minmax(0,1fr) 172px;
  gap:var(--sp5);align-items:center;padding:20px 22px}

.wmc-order-media{display:flex;gap:6px}
.wmc-order-media .wmc-thumb{width:62px;height:62px;margin-left:-18px;box-shadow:0 0 0 2px var(--card);
  transition:margin .3s var(--ease),transform .3s var(--ease)}
.wmc-order-media .wmc-thumb:first-child{margin-left:0}
.wmc-order:hover .wmc-order-media .wmc-thumb{margin-left:4px}
.wmc-order:hover .wmc-order-media .wmc-thumb:first-child{margin-left:0}
.wmc-thumb-none{border-style:dashed;background:var(--wash)}
.wmc-thumb-none svg{width:24px;height:24px;stroke:var(--faint);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.wmc-order-info{min-width:0}
/* Nombre acotado a 2 líneas: un producto con nombre kilométrico ya no
   estira la tarjeta ni descoloca el total. */
.wmc-order-productos{font-family:var(--wmc-body);font-size:15px;font-weight:var(--w-wt-bold,700);
  margin:0 0 4px;color:var(--ink);text-transform:none;letter-spacing:0;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wmc-order-meta{margin:0;font-size:12.5px;color:var(--muted)}

/* Columna lateral: total arriba, acciones debajo, todo alineado a la derecha. */
.wmc-order-side{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.wmc-order-total{text-align:right;white-space:nowrap}
.wmc-order-total-lbl{display:block;font-size:9.5px;font-weight:var(--w-wt-bold,700);
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.wmc-order-total-val{display:block;font-size:24px;line-height:1;color:var(--ink)}
.wmc-order-total-val .woocommerce-Price-amount{font-family:inherit}

.wmc-order-cta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.wmc-btn--sm{padding:10px 18px;font-size:12px}
.wmc-btn-ico{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .22s var(--ease)}
.wmc-btn:hover .wmc-btn-ico{transform:translateX(3px)}

/* Píldora de estado */
.wmc-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--radius-pill);
  font-size:10.5px;font-weight:var(--w-wt-bold,700);letter-spacing:.1em;text-transform:uppercase;
  background:var(--wash);color:var(--muted);border:1px solid var(--line)}
.wmc-pill-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.wmc-pill--ok{color:var(--ok);background:rgba(19,122,70,.07);border-color:rgba(19,122,70,.2)}
.wmc-pill--proceso{color:var(--warn);background:rgba(138,97,0,.07);border-color:rgba(138,97,0,.2)}
.wmc-pill--alto{color:var(--danger);background:rgba(179,57,47,.07);border-color:rgba(179,57,47,.2)}

.wmc-pagination{display:flex;align-items:center;justify-content:center;gap:var(--sp4);margin-top:var(--sp5)}
.wmc-pagination-pos{font-size:12px;color:var(--faint);font-weight:var(--w-wt-bold,700);
  letter-spacing:.06em;text-transform:uppercase}

/* --- 8.6.b TARJETAS DE DIRECCIÓN (plantilla propia my-address.php) --- */
.wmc-addr-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp4)}
.wmc-addr{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;
  transition:border-color .24s var(--ease),box-shadow .24s var(--ease)}
.wmc-addr:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md)}
.wmc-addr.is-empty{background:var(--wash);border-style:dashed}
.wmc-addr-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:16px}
.wmc-addr-ico{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--ink);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wmc-addr-ico svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wmc-addr.is-empty .wmc-addr-ico{background:var(--line-strong)}
.wmc-addr-title{font-family:var(--wmc-body);font-size:14px;font-weight:var(--w-wt-bold,700);
  margin:0 0 2px;color:var(--ink);text-transform:none;letter-spacing:0}
.wmc-addr-help{margin:0;font-size:11.5px;color:var(--faint)}
.wmc-addr-body{flex:1;padding-bottom:18px}
.wmc-addr address{font-style:normal;font-size:13.5px;color:var(--muted);line-height:1.7;margin:0}
.wmc-addr-vacia{margin:0;font-size:13px;color:var(--faint);line-height:1.6}
.wmc-addr-foot{border-top:1px solid var(--line);padding-top:16px}
.wmc-addr.is-empty .wmc-addr-foot{border-top-color:var(--line-2)}

/* Fila producto + foto dentro del detalle del pedido */
.wmc-item{display:flex;align-items:center;gap:14px}
.wmc-item .wmc-thumb{width:56px;height:56px}
.wmc-item-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.wmc-item-name{font-weight:var(--w-wt-medium,600);color:var(--ink)}
.wmc-item-sku{color:var(--faint);font-size:11px}
.wmc table.shop_table td.product-name{padding:14px 20px}
/* La cantidad que WooCommerce añade tras el nombre (× 1) */
.wmc .product-quantity{color:var(--muted);font-weight:var(--w-wt-bold,700)}

/* Bloques del plugin Ubigeo Perú en el detalle del pedido */
.wmc .woocommerce-customer-details .ubigeo-peru,
.wmc .woocommerce-customer-details > div[class*="ubigeo"]{
  background:var(--wash);border:1px solid var(--line);border-radius:var(--radius);padding:20px}

/* --- 8.7 Aviso contextual --- */
.wmc-note{display:flex;gap:12px;align-items:flex-start;background:var(--wash);
  border:1px solid var(--line);border-left:3px solid var(--ink);
  border-radius:var(--radius-sm);padding:15px 18px}
.wmc-note svg{width:19px;height:19px;flex-shrink:0;stroke:var(--ink);fill:none;
  stroke-width:1.8;stroke-linecap:round;margin-top:1px}
.wmc-note p{margin:0;font-size:13px;color:var(--muted);line-height:1.55}

/* --- 8.8 Bloque de contraseña --- */
.wmc-pass-toggle{margin-top:var(--sp2)}
.wmc-pass-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.wmc form fieldset[hidden]{display:none}
.wmc form fieldset:not([hidden]){animation:wmcFade .3s var(--ease-out) backwards}

/* El "ojo" de mostrar contraseña de WooCommerce. Su icono viene de la
   tipografía WooCommerce, que este tema no carga: el <span> caía debajo del
   campo y se veía como un rectángulo negro. Se coloca dentro del campo y se
   dibuja con un SVG incrustado (sin peticiones ni fuentes de iconos). */
.wmc .password-input{position:relative;display:block;width:100%}
/* Especificidad alta a propósito: la regla general de inputs
   (.wmc form .form-row input.input-text) define el padding y ganaba,
   dejando que el texto pasara por debajo del ojo. */
.wmc form .form-row .password-input input.input-text,
.wmc form .form-row .password-input input[type="password"],
.wmc form .form-row .password-input input[type="text"]{padding-right:52px}
/* !important en todo el bloque: WooCommerce crea este botón por JS y a
   veces le mete su propio inline-style de posición — sin !important esa
   regla inline gana y el ojo queda descuadrado sin importar lo que diga
   aquí. Ícono nuevo: trazo más fino y geométrico (arco + pupila + anillo),
   consistente con el resto de íconos del panel. */
.wmc .show-password-input{
  position:absolute !important;right:10px !important;top:50% !important;
  transform:translateY(-50%) !important;left:auto !important;bottom:auto !important;
  width:30px !important;height:30px !important;padding:0 !important;margin:0 !important;
  border:0 !important;border-radius:8px !important;outline:none;
  cursor:pointer;font-size:0 !important;line-height:0;text-indent:-9999px;overflow:hidden;
  background-color:transparent !important;background-repeat:no-repeat !important;
  background-position:center !important;background-size:20px 20px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F6F6C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5.4 5.5 12 5.5 22.5 12 22.5 12 18.6 18.5 12 18.5 1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E") !important;
  transition:background-color .16s var(--ease)}
.wmc .show-password-input::before,.wmc .show-password-input::after{content:none !important;display:none !important}
.wmc .show-password-input:hover{background-color:var(--wash) !important}
/* Estado "contraseña visible": el mismo trazo, con la línea diagonal. */
.wmc .show-password-input.display-password{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5.4 5.5 12 5.5 22.5 12 22.5 12 18.6 18.5 12 18.5 1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") !important}

/* ============ 8.9 ACCESO / REGISTRO / RECUPERAR ============
   Dos paneles: marca (negro con la trama) + formulario. En móvil el panel
   de marca se reduce a una cabecera compacta. */
.wmc-auth{padding:0}
.wmc-auth-shell{max-width:1000px;margin:32px auto 64px;padding:0 24px;
  display:grid;grid-template-columns:.85fr 1fr;align-items:stretch;
  border-radius:var(--radius-xl);overflow:visible}
.wmc-auth-shell > *{min-width:0}

.wmc-auth-brand{background:var(--ink);color:#fff;position:relative;overflow:hidden;
  border-radius:var(--radius-xl) 0 0 var(--radius-xl);padding:36px 32px;
  display:flex;align-items:center}
.wmc-auth-brand::after{content:"";position:absolute;left:-30%;right:-30%;top:-30%;bottom:-30%;
  background-image:var(--stripes);transform:rotate(6deg);pointer-events:none}
.wmc-auth-brand-inner{position:relative}
.wmc-auth-title{font-size:clamp(26px,3vw,38px);margin:12px 0 0;
  display:flex;flex-direction:column;gap:.06em;line-height:.98}
/* !important: los estilos globales de encabezado de Elementor/Astra (h1)
   ganaban por especificidad y pintaban la primera palabra del título en su
   color por defecto — casi invisible sobre el fondo negro de este panel.
   .wmc-hi se usa en cualquier título sobre fondo oscuro (aquí y en el
   saludo del panel de inicio), así que la regla vive a nivel de .wmc. */
.wmc .wmc-hi{color:#fff !important}
.wmc-auth-title .wmc-name{color:transparent !important;-webkit-text-stroke:1.5px #fff}
.wmc-auth-brand-txt{color:#B9B9B6;font-size:13.5px;margin:20px 0 0;max-width:34ch}

.wmc-auth-ventajas{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:16px}
.wmc-auth-ventajas li{display:flex;align-items:flex-start;gap:13px;font-size:13.5px;color:#D9D9D6}
.wmc-auth-ventajas svg{width:20px;height:20px;flex-shrink:0;stroke:#fff;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}

.wmc-auth-panel{background:var(--card);border:1px solid var(--line);border-left:0;
  border-radius:0 var(--radius-xl) var(--radius-xl) 0;padding:28px 32px;
  box-shadow:var(--shadow-panel)}

/* Pestañas Acceder / Crear cuenta */
.wmc-auth-tabs{display:flex;gap:4px;padding:4px;background:var(--wash);
  border:1px solid var(--line);border-radius:var(--radius-pill);margin-bottom:26px}
/* !important en todo el bloque: los botones globales de Elementor/Astra
   traen su propio hover (fondo oscuro) con más especificidad que un simple
   ":hover" de una clase — se veía un fondo negro detrás del texto gris de
   la pestaña inactiva al pasar el cursor. Se fuerza nuestro propio estado
   en los tres casos (base, hover, activa) para que gane siempre. */
.wmc-auth-tab{flex:1;padding:11px 16px;border:0 !important;border-radius:var(--radius-pill);
  background:transparent !important;cursor:pointer;font-family:var(--wmc-body);font-size:13px;
  font-weight:var(--w-wt-bold,700);color:var(--muted) !important;box-shadow:none !important;
  transition:background .22s var(--ease),color .22s var(--ease)}
.wmc-auth-tab:hover{color:var(--ink) !important}
.wmc-auth-tab.on{background:var(--ink) !important;color:#fff !important;box-shadow:var(--shadow-md) !important}

.wmc-auth-pane{display:none}
/* Sin transform aquí a propósito (a diferencia de wmcFade, que sí lo usa):
   este panel contiene el iframe del botón de Google, y animar con
   translateY un ancestro de un iframe hace que Chrome recalcule mal su
   recorte durante la animación — pintaba bien el primer instante y luego
   "cortaba" un borde del botón hasta el siguiente repintado. Con un fade
   de solo opacidad el iframe nunca cambia de layout y no hay nada que
   recalcular mal. */
.wmc-auth-pane.on{display:block;animation:wmcFadeSimple .3s var(--ease-out) backwards}

/* Los formularios aquí NO llevan el fondo de tarjeta: ya están dentro del
   panel blanco. Se anula la regla general de formularios. */
.wmc-auth .woocommerce-form,
.wmc-auth form.login,
.wmc-auth form.register,
.wmc-auth form.lost_reset_password,
/* Los formularios de los pasos 2 y 3 del asistente no llevan las clases de
   WooCommerce (no son suyos), pero sí necesitan este mismo reinicio: sin
   ellos aquí, el `margin:0 !important` de .wmc-auth .form-row los dejaba
   sin ninguna separación entre campos. */
.wmc-auth form.wmc-rec-form-codigo,
.wmc-auth form.wmc-rec-form-pass{
  background:transparent;border:0;border-radius:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:10px;box-shadow:none}
/* Astra Pro trae su propia regla para .form-row con 4 clases en el
   selector (.woocommerce-account .woocommerce form .form-row) — más
   específica que la nuestra de 2, así que ganaba y metía 20px de margen
   de sobra debajo de cada campo, sumados al gap del grid. !important para
   que ya no importe cuántas clases tenga el selector de Astra. */
.wmc-auth .woocommerce-form-row,
.wmc-auth .form-row{margin:0 !important}
/* La etiqueta trae 8px propios hacia su campo (regla general de arriba);
   en este formulario, más compacto, se recorta a la mitad. */
.wmc-auth .form-row label{margin-bottom:4px}
/* El aviso "te enviaremos un enlace..." trae su propio margen inferior
   (wmc-mb16, de uso general en el resto del plugin) — aquí se anula para
   que el único espaciador sea el gap del grid, igual que con todo lo demás. */
.wmc-auth .wmc-note{margin-bottom:0 !important}
.wmc-auth form > p:last-of-type{margin-top:0;padding-top:0;border-top:0}

.wmc-auth-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wmc-auth-link{font-size:12.5px;font-weight:var(--w-wt-medium,600);color:var(--muted) !important;
  text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:1px}
.wmc-auth-link:hover{color:var(--ink) !important;border-color:var(--ink);opacity:1 !important}

/* Casilla "mantener sesión": la nativa es un checkbox suelto sin estilo. */
.wmc-check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-size:13px;font-weight:var(--w-wt-medium,500);color:var(--ink);margin:0;
  text-transform:none !important;letter-spacing:0 !important}
.wmc-check input[type="checkbox"]{appearance:none;-webkit-appearance:none;
  width:19px;height:19px;margin:0;flex-shrink:0;cursor:pointer;
  border:1.5px solid var(--line-strong);border-radius:5px;background:var(--card);
  position:relative;transition:background .16s var(--ease),border-color .16s var(--ease)}
.wmc-check input[type="checkbox"]:checked{background:var(--ink);border-color:var(--ink)}
.wmc-check input[type="checkbox"]:checked::after{content:"";position:absolute;
  left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg)}

.wmc-auth-submit{margin:var(--sp2) 0 0}
.wmc-auth-submit .wmc-btn,.wmc-auth-submit button{width:100%;padding:15px 24px;font-size:13px}
/* Aviso de privacidad nativo de WooCommerce (Accounts & Privacy →
   "Registration privacy policy"): es el único que se imprime ahora en el
   registro, así que se estila igual de compacto que el resto del panel. */
.wmc-auth .woocommerce-privacy-policy-text{font-size:11.5px;color:var(--faint);line-height:1.6;margin:0}
.wmc-auth .woocommerce-privacy-policy-text p{margin:0}
.wmc-auth .woocommerce-privacy-policy-text a{color:var(--ink) !important;text-decoration:underline}
.wmc-auth-pie{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.wmc-auth-pie .wmc-back{margin:0}

/* Sin margen propio: el gap del grid del formulario ya pone el mismo aire
   entre este bloque y el siguiente que entre cualquier otro par de campos
   — antes se sumaban los dos y el registro se sentía más largo. */
.wmc-google-wrap{margin:0}
/* Botón propio (no el de Google dentro de un iframe): ancho, borde y
   estados son 100% nuestro CSS, así que es responsive de verdad sin
   calcular ni un píxel — width:100% y listo, en móvil y escritorio.
   !important en lo esencial: los estilos globales de <button> de
   Elementor/Astra (los mismos que ya pisaban el hover de las pestañas
   Acceder/Crear cuenta) también alcanzan a cualquier botón normal como
   este, a veces con un pseudo-elemento ::before/::after para su propio
   efecto de relleno en hover — se neutraliza todo explícitamente en vez
   de dejar que la cascada decida. */
.wmc-google-custom-btn{
  display:flex !important;align-items:center;justify-content:center;gap:10px;
  width:100% !important;max-width:none !important;height:48px !important;
  padding:0 16px !important;margin:0 !important;box-sizing:border-box !important;
  background:var(--card) !important;border:1.5px solid var(--line-2) !important;
  border-radius:var(--radius-pill) !important;box-shadow:none !important;
  overflow:visible !important;position:relative;
  font-family:var(--wmc-body);font-size:14px;font-weight:var(--w-wt-medium,600);color:var(--ink) !important;
  cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease)}
.wmc-google-custom-btn::before,.wmc-google-custom-btn::after{content:none !important;display:none !important}
.wmc-google-custom-btn svg{width:18px;height:18px;flex-shrink:0}
.wmc-google-custom-btn:hover{border-color:var(--line-strong) !important;background:var(--wash) !important}
.wmc-google-custom-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wmc-google-custom-btn:disabled{opacity:.6;cursor:default}

.wmc-auth-or{position:relative;text-align:center;margin:0;color:var(--faint);font-size:12px}
.wmc-auth-or::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.wmc-auth-or span{position:relative;background:var(--card);padding:0 10px}

/* Astra Pro cuelga sus propios enlaces "¿No eres miembro? / ¿Ya estás
   registrado?" de woocommerce_login_form_end / _register_form_end —los
   mismos hooks que respetamos por compatibilidad— duplicando lo que ya
   resuelven nuestras pestañas Acceder/Crear cuenta, y sin nuestro estilo. */
.wmc-auth .ast-woo-form-actions{display:none}

/* Avisos de WooCommerce en estas pantallas (credenciales incorrectas, etc.) */
.wmc-auth .woocommerce-error,.wmc-auth .woocommerce-message,.wmc-auth .woocommerce-info{
  margin-bottom:var(--sp4)}

@media(max-width:860px){
  .wmc-auth-shell{grid-template-columns:1fr;margin:20px auto 60px;padding:0 16px}
  .wmc-auth-brand{border-radius:var(--radius) var(--radius) 0 0;padding:30px 26px;text-align:left}
  .wmc-auth-title{font-size:30px;flex-direction:row;flex-wrap:wrap;gap:.28em}
  /* En móvil las ventajas ocuparían media pantalla antes del formulario. */
  .wmc-auth-ventajas,.wmc-auth-brand-txt{display:none}
  .wmc-auth-panel{border-left:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);padding:26px 22px}
}

/* ============ 8.10 RECUPERAR ACCESO (asistente de 3 pasos) ============
   Correo → código → contraseña, en la misma pantalla. Todo el marcado de
   los cuatro estados existe desde el inicio; el JS solo cambia cuál se ve
   y anima la altura del contenedor para que se lea como UNA pantalla que
   avanza, no como cuatro páginas encadenadas. */

/* Solo para lectores de pantalla: la región que anuncia cada paso. */
.wmc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- Riel de progreso ---- */
.wmc-steps{display:flex;align-items:flex-start;list-style:none;margin:0 0 28px;padding:0;
  counter-reset:none}
.wmc-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;
  position:relative;text-align:center}
/* La línea que une los pasos nace del propio ítem: así siempre queda
   centrada con su círculo sin importar cuánto mida la etiqueta. */
.wmc-step::before{content:"";position:absolute;top:14px;left:calc(-50% + 17px);
  width:calc(100% - 34px);height:2px;background:var(--line);border-radius:2px}
.wmc-step:first-child::before{display:none}
.wmc-step.is-on::before,.wmc-step.is-done::before{background:var(--ink)}

.wmc-step-n{width:29px;height:29px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;position:relative;z-index:1;
  background:var(--card);border:2px solid var(--line);color:var(--faint);
  font-family:var(--wmc-body);font-size:12.5px;font-weight:var(--w-wt-bold,700);
  transition:background .28s var(--ease),border-color .28s var(--ease),
    color .28s var(--ease),transform .28s var(--ease)}
.wmc-step-t{font-size:11px;font-weight:var(--w-wt-bold,700);letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);transition:color .28s var(--ease)}

.wmc-step.is-on .wmc-step-n{background:var(--ink);border-color:var(--ink);color:#fff;
  transform:scale(1.08);box-shadow:var(--shadow-md)}
.wmc-step.is-on .wmc-step-t{color:var(--ink)}
/* Paso ya superado: el número estorba, lo que importa es que está hecho. */
.wmc-step.is-done .wmc-step-n{background:var(--ink);border-color:var(--ink);
  color:transparent;font-size:0}
.wmc-step.is-done .wmc-step-n::after{content:"";width:5px;height:9px;margin-top:-2px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.wmc-step.is-done .wmc-step-t{color:var(--muted)}

/* ---- Escenario: la caja cuya altura se interpola ----
   overflow visible en reposo: recortar aquí cortaba el halo de foco de la
   primera y la última casilla del código. El JS pone overflow:hidden solo
   durante los milisegundos que dura la animación de altura. */
.wmc-rec-stage{position:relative}
.wmc-rec-paso[hidden]{display:none}
.wmc-rec-paso.is-on{animation:wmcRecEntra .42s var(--ease-out) backwards}
@keyframes wmcRecEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Texto del panel de marca: uno por paso, se cruza con un fundido. */
.wmc-rec-copy{display:none}
.wmc-rec-copy.is-on{display:block;animation:wmcFadeSimple .4s var(--ease-out) backwards}
.wmc-rec-tips{margin-top:26px}

/* ---- Casillas del código ---- */
/* flex:1 en cada casilla: el bloque se reparte el ancho disponible, así
   que funciona igual en un panel de 420px que en un móvil de 320px sin
   una sola consulta de medios ni cálculo de píxeles. */
.wmc-otp{display:flex;gap:8px;margin:2px 0 4px;min-width:0}
/* width:0 no es adorno ni redundancia con flex-basis: un <input> sin
   atributo `size` tiene un ancho INTRÍNSECO de ~20 caracteres (a 24px de
   fuente, unos 316px), y esa medida es la que aporta al mínimo del grid
   que contiene el formulario. min-width:0 permite encoger, pero NO baja
   esa contribución mínima: medido en el navegador, la fila de 6 casillas
   forzaba una columna de 1936px dentro de un panel de 450px y la pantalla
   se desplazaba en horizontal. Con width:0 el ancho intrínseco desaparece
   y flex-grow reparte el espacio real. */
.wmc-otp-in{flex:1 1 0;width:0;min-width:0;height:62px;padding:0;text-align:center;
  font-family:var(--wmc-body);font-size:24px;font-weight:var(--w-wt-bold,700);
  color:var(--ink);background:var(--wash);
  border:1.5px solid var(--line-2) !important;border-radius:var(--radius-sm) !important;
  box-shadow:none !important;
  transition:border-color .18s var(--ease),background .18s var(--ease),
    transform .18s var(--ease)}
.wmc-otp-in::-webkit-outer-spin-button,.wmc-otp-in::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.wmc-otp-in.lleno{background:var(--card);border-color:var(--ink) !important}
.wmc-otp-in:focus{outline:none;background:var(--card);
  border-color:var(--ink) !important;transform:translateY(-2px);
  box-shadow:0 0 0 3px rgba(10,10,10,.08) !important}

/* ---- Error bajo el campo ----
   El aviso flotante sirve para lo que pasa lejos del foco; un dato mal
   escrito se corrige donde está el dato. Los dos conviven. */
.wmc-field-err{display:block;margin-top:7px;font-size:12.5px;color:var(--danger);
  font-weight:var(--w-wt-medium,600);animation:wmcFadeSimple .2s var(--ease-out) backwards}
.wmc-field-err[hidden]{display:none}

.wmc-shake{animation:wmcShake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes wmcShake{
  10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-6px)} 40%,60%{transform:translateX(6px)}}

/* ---- Acciones secundarias (reenviar / cambiar correo) ---- */
.wmc-rec-ayuda{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:var(--sp2)}
.wmc-linkbtn{background:none !important;border:0 !important;padding:0 !important;
  box-shadow:none !important;cursor:pointer;font-family:var(--wmc-body);font-size:12.5px;
  font-weight:var(--w-wt-medium,600);color:var(--muted) !important;
  text-decoration:underline;text-underline-offset:3px;
  transition:color .18s var(--ease)}
.wmc-linkbtn::before,.wmc-linkbtn::after{content:none !important}
.wmc-linkbtn:hover:not(:disabled){color:var(--ink) !important}
/* Deshabilitado con la cuenta atrás: sin subrayado, para que no parezca
   que se puede tocar. */
.wmc-linkbtn:disabled{color:var(--faint) !important;cursor:default;
  text-decoration:none;font-variant-numeric:tabular-nums}

/* ---- Contraseña: ojo, medidor y requisitos ---- */
.wmc-pass-wrap{position:relative;display:block}
.wmc-pass-wrap .input-text{padding-right:46px !important}
.wmc-ojo{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;padding:0 !important;margin:0 !important;
  border:0 !important;background:transparent !important;box-shadow:none !important;
  border-radius:8px;cursor:pointer;font-size:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F6F6C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5.4 5.5 12 5.5 22.5 12 22.5 12 18.6 18.5 12 18.5 1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:center !important;
  background-size:20px 20px !important}
.wmc-ojo::before,.wmc-ojo::after{content:none !important}
.wmc-ojo:hover{background-color:var(--wash) !important}
.wmc-ojo.abierto{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5.4 5.5 12 5.5 22.5 12 22.5 12 18.6 18.5 12 18.5 1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") !important}

.wmc-fuerza{display:flex;align-items:center;gap:12px;margin:-2px 0 2px}
.wmc-fuerza-bar{flex:1;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.wmc-fuerza-bar i{display:block;height:100%;width:0;border-radius:4px;
  background-color:var(--danger);
  transition:width .3s var(--ease),background-color .3s var(--ease)}
/* Propiedad larga, no el atajo `background`: con el atajo, el valor de la
   variable queda como sustitución pendiente y no siempre se resuelve. */
.wmc-fuerza-bar i.n1{background-color:#B3392F}
.wmc-fuerza-bar i.n2{background-color:#C4632B}
.wmc-fuerza-bar i.n3{background-color:#8A6100}
.wmc-fuerza-bar i.n4{background-color:#3F7A2E}
.wmc-fuerza-bar i.n5{background-color:#137A46}
.wmc-fuerza-txt{font-size:11px;font-weight:var(--w-wt-bold,700);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);min-width:74px;text-align:right}

.wmc-reglas{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wmc-reglas li{position:relative;display:flex;align-items:center;gap:9px;
  font-size:12.5px;color:var(--faint);transition:color .22s var(--ease)}
.wmc-reglas li::before{content:"";width:16px;height:16px;flex-shrink:0;border-radius:50%;
  border:1.5px solid var(--line-strong);
  transition:background-color .22s var(--ease),border-color .22s var(--ease)}
.wmc-reglas li.ok{color:var(--ok)}
.wmc-reglas li.ok::before{background-color:var(--ok);border-color:var(--ok)}
/* El check se ancla al 50% de la altura del <li>, no a la posición
   estática: dentro de un contenedor flex esa posición no es fiable. */
.wmc-reglas li.ok::after{content:"";position:absolute;left:5.5px;top:50%;
  width:3.5px;height:7px;border:solid #fff;border-width:0 1.8px 1.8px 0;
  transform:translateY(-60%) rotate(45deg)}

/* ---- Pantalla final ---- */
.wmc-rec-fin{text-align:center;padding:var(--sp4) 0 0}
.wmc-check-anim{width:74px;height:74px;margin:0 auto var(--sp4)}
.wmc-check-anim svg{width:100%;height:100%;fill:none;stroke:var(--ok);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
/* El trazo se dibuja: primero el círculo, después el check. Es medio
   segundo de confirmación que hace que el cambio se sienta cerrado. */
.wmc-check-anim circle{stroke-dasharray:151;stroke-dashoffset:151;
  animation:wmcTrazo .5s var(--ease-out) forwards}
.wmc-check-anim path{stroke-dasharray:36;stroke-dashoffset:36;
  animation:wmcTrazo .32s var(--ease-out) .42s forwards}
@keyframes wmcTrazo{to{stroke-dashoffset:0}}
.wmc-rec-fin .wmc-auth-submit .wmc-btn{display:inline-flex;width:auto;min-width:220px}

/* En móvil el panel de marca ya se reduce a una cabecera compacta y oculta
   .wmc-auth-brand-txt (decisión previa: si no, ocupa media pantalla antes
   del formulario). El texto por paso hereda esa clase, pero .wmc-rec-copy
   .is-on tiene más especificidad y volvía a mostrarlo — medido: 63 px de
   cabecera negra de más justo encima del formulario. Se respeta la decisión
   original; el aviso que sí importa en móvil ("mira en spam") vive dentro
   del panel, en la propia plantilla del paso 2. */
@media(max-width:860px){
  .wmc-rec-copy.is-on{display:none}
}

@media(max-width:520px){
  .wmc-otp{gap:6px}
  .wmc-otp-in{height:54px;font-size:20px}
  .wmc-step-t{font-size:9.5px;letter-spacing:.05em}
  .wmc-fuerza-txt{min-width:62px;font-size:10px}
}

@media(prefers-reduced-motion:reduce){
  .wmc-shake,.wmc-rec-paso.is-on,.wmc-rec-copy.is-on{animation:none}
  .wmc-check-anim circle,.wmc-check-anim path{animation:none;stroke-dashoffset:0}
}

/* ============ 9. PREFERENCIAS ============ */
/* Selector de talla */
.wmc-size-group{display:flex;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.wmc-size-group:last-child{border-bottom:0;padding-bottom:0}
.wmc-size-label{font-size:10px;font-weight:var(--w-wt-bold,700);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);width:70px;flex-shrink:0}
.wmc-sizes{display:flex;flex-wrap:wrap;gap:7px}
.wmc-size{min-width:46px;height:46px;padding:0 12px;border-radius:var(--radius-sm);
  border:1.5px solid var(--line-2);background:var(--card);cursor:pointer;
  font-family:var(--wmc-body);font-size:13px;font-weight:var(--w-wt-bold,700);color:var(--muted);
  transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease)}
.wmc-size:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.wmc-size:active{transform:scale(.94)}
.wmc-size.on{background:var(--ink);border-color:var(--ink);color:#fff}

.wmc-pref-row{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--line)}
.wmc-pref-row:last-child{border-bottom:0;padding-bottom:0}
.wmc-d{font-size:12.5px;color:var(--muted);margin-top:3px;max-width:52ch}
.wmc-switch{width:48px;height:27px;border-radius:var(--radius-pill);background:var(--line-strong);
  position:relative;cursor:pointer;flex-shrink:0;border:0;padding:0;
  transition:background .26s var(--ease)}
.wmc-switch::after{content:"";position:absolute;width:21px;height:21px;border-radius:50%;
  background:#fff;top:3px;left:3px;box-shadow:0 1px 3px rgba(0,0,0,.28);
  transition:transform .3s var(--ease),width .2s var(--ease)}
.wmc-switch:active::after{width:26px}
.wmc-switch.on{background:var(--ink)}
.wmc-switch.on::after{transform:translateX(21px)}
.wmc-tags{display:flex;flex-wrap:wrap;gap:10px}
.wmc-tag-chip{padding:10px 18px;border-radius:var(--radius-pill);border:1.5px solid var(--line-2);
  font-size:12.5px;font-weight:var(--w-wt-bold,700);cursor:pointer;background:var(--card);
  color:var(--muted);user-select:none;font-family:var(--wmc-body);
  transition:transform .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.wmc-tag-chip:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.wmc-tag-chip:active{transform:scale(.95)}
.wmc-tag-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

.wmc-savebar{position:sticky;bottom:18px;z-index:5;margin-top:var(--sp5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp4);flex-wrap:wrap;
  background:var(--ink) var(--stripes);color:#fff;border-radius:var(--radius);
  padding:14px 16px 14px 24px;box-shadow:var(--shadow-lg);animation:wmcSlideUp .34s var(--ease) backwards}
.wmc-savebar[hidden]{display:none}
.wmc-savebar-txt{font-size:12.5px;font-weight:var(--w-wt-bold,700)}
.wmc-savebar-actions{display:flex;align-items:center;gap:14px}
.wmc-savebar .wmc-btn{background:#fff !important;color:var(--ink) !important;border-color:#fff !important}
.wmc-savebar .wmc-btn:hover{background:#fff !important;color:var(--ink) !important}
.wmc-save-msg{font-size:12px;color:#fff;font-weight:var(--w-wt-bold,700)}
@keyframes wmcSlideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Botón en estado "guardando".
   opacity:1 gana a .wmc-btn[disabled] (misma especificidad, regla
   posterior): el botón se deshabilita mientras carga, pero atenuarlo
   además dejaba el aro girando casi invisible. */
.wmc-btn.is-loading{position:relative;color:transparent !important;opacity:1}
/* Centrado explícito: sin top/left, el aro se colocaba en la posición
   estática del texto —desplazado a la izquierda en cualquier botón que
   no fuera de una sola palabra. */
.wmc-btn.is-loading::after{content:"";position:absolute;top:50%;left:50%;
  margin:-8px 0 0 -8px;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(10,10,10,.25);border-top-color:var(--ink);
  animation:wmcSpin .7s linear infinite}
/* Sobre fondo negro (el botón principal) el aro oscuro no se veía. */
.wmc-btn.wmc-primary.is-loading::after,
.wmc button[type="submit"].is-loading::after{
  border-color:rgba(255,255,255,.3);border-top-color:#fff}
@keyframes wmcSpin{to{transform:rotate(360deg)}}

/* ---- NOTIFICACIONES FLOTANTES ----
   Tarjeta con icono, título, mensaje, cierre y barra de tiempo. Vive fuera
   de .wmc (se inyecta en <body>), así que define sus propias variables. */
.wmc-toasts{
  --t-ink:#0A0A0A; --t-card:#FFFFFF; --t-line:#E7E7E5; --t-muted:#6F6F6C;
  --t-ok:#137A46; --t-error:#B3392F;
  position:fixed;top:24px;right:24px;z-index:2147483000;
  display:flex;flex-direction:column;gap:12px;align-items:flex-end;
  pointer-events:none;max-width:min(400px,calc(100vw - 32px));
  font-family:var(--w-font-body,system-ui,-apple-system,sans-serif)}

.wmc-toast{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:13px;align-items:flex-start;width:100%;
  background:var(--t-card);color:var(--t-ink);border:1px solid var(--t-line);
  border-radius:14px;padding:15px 15px 16px;overflow:hidden;
  box-shadow:0 18px 40px -16px rgba(10,10,10,.32),0 2px 6px -2px rgba(10,10,10,.1);
  animation:wmcToastIn .42s cubic-bezier(.22,1,.36,1) backwards;pointer-events:auto}
.wmc-toast.out{animation:wmcToastOut .28s cubic-bezier(.4,0,1,1) forwards}

.wmc-toast-ico{width:30px;height:30px;border-radius:50%;flex-shrink:0;position:relative;
  display:flex;align-items:center;justify-content:center}
.wmc-toast--ok .wmc-toast-ico{background:rgba(19,122,70,.1)}
.wmc-toast--error .wmc-toast-ico{background:rgba(179,57,47,.1)}
/* Check y aspa dibujados con bordes: sin imágenes ni iconos externos. */
.wmc-toast-ico::before{content:"";position:absolute}
.wmc-toast--ok .wmc-toast-ico::before{width:5px;height:10px;margin-top:-2px;
  border:solid var(--t-ok);border-width:0 2px 2px 0;transform:rotate(45deg)}
.wmc-toast--error .wmc-toast-ico::before{width:2px;height:11px;background:var(--t-error);
  border-radius:1px;box-shadow:0 0 0 0 var(--t-error);transform:rotate(45deg)}
.wmc-toast--error .wmc-toast-ico::after{content:"";position:absolute;width:2px;height:11px;
  background:var(--t-error);border-radius:1px;transform:rotate(-45deg)}

.wmc-toast-txt{min-width:0;padding-top:1px}
.wmc-toast-title{display:block;font-size:13.5px;font-weight:700;line-height:1.3;margin-bottom:2px}
.wmc-toast-msg{display:block;font-size:12.5px;font-weight:400;color:var(--t-muted);line-height:1.5}

.wmc-toast-close{width:26px;height:26px;flex-shrink:0;border:0;background:transparent;
  cursor:pointer;border-radius:7px;position:relative;padding:0;
  transition:background .16s ease}
.wmc-toast-close:hover{background:#F2F2F0}
.wmc-toast-close::before,.wmc-toast-close::after{content:"";position:absolute;left:50%;top:50%;
  width:11px;height:1.6px;background:var(--t-muted);border-radius:2px}
.wmc-toast-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.wmc-toast-close::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* Barra de tiempo: se consume durante la vida del aviso. */
.wmc-toast-bar{position:absolute;left:0;bottom:0;height:2.5px;width:100%;transform-origin:left;
  animation:wmcToastBar 4s linear forwards}
.wmc-toast--ok .wmc-toast-bar{background:var(--t-ok)}
.wmc-toast--error .wmc-toast-bar{background:var(--t-error)}
.wmc-toast:hover .wmc-toast-bar{animation-play-state:paused}

@keyframes wmcToastIn{from{opacity:0;transform:translateX(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes wmcToastOut{to{opacity:0;transform:translateX(16px) scale(.98)}}
@keyframes wmcToastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

@media(max-width:560px){
  .wmc-toasts{left:16px;right:16px;top:16px;max-width:none;align-items:stretch}
}
@media(prefers-reduced-motion:reduce){
  .wmc-toast{animation:none}
  .wmc-toast-bar{animation:none;transform:scaleX(0)}
}

/* ============ 10. MOTION, SKELETONS Y RESPONSIVE ============ */
/* fill-mode "backwards" en vez de "both": el estado en reposo del elemento
   es el visible y la animación solo adorna la entrada, sin congelar el
   fotograma final. Evita que un cambio posterior de estilos quede
   bloqueado por el fill. Misma razón en el resto de apariciones. */
.wmc-content > *{animation:wmcFade .44s var(--ease-out) backwards}
.wmc-content > *:nth-child(2){animation-delay:.06s}
.wmc-content > *:nth-child(3){animation-delay:.12s}
.wmc-content > *:nth-child(4){animation-delay:.18s}
.wmc-content > *:nth-child(n+5){animation-delay:.24s}
@keyframes wmcFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes wmcFadeSimple{from{opacity:0}to{opacity:1}}

.wmc-skeleton{display:grid;gap:var(--sp4)}
.wmc-sk{background:var(--wash);border:1px solid var(--line);border-radius:var(--radius);
  height:104px;position:relative;overflow:hidden}
.wmc-sk--tall{height:200px}
.wmc-sk--head{height:56px;border:0;background:var(--wash);max-width:340px}
.wmc-sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(10,10,10,.06),transparent);
  animation:wmcShimmer 1.25s infinite}
@keyframes wmcShimmer{to{transform:translateX(100%)}}
.wmc-skeleton-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp4)}

/* Transición entre secciones (View Transitions API, 0 KB de librería).
   La captura anterior se OCULTA en vez de desvanecerse: si ambas se
   funden, durante unos milisegundos se ven las dos superpuestas — que es
   exactamente el "fantasma" del contenido viejo que se notaba. */
::view-transition-old(wmc-main){animation:none;opacity:0}
::view-transition-new(wmc-main){animation:wmcVtIn .34s var(--ease-out) both}
@keyframes wmcVtIn{from{opacity:0;transform:translateY(12px)}}
::view-transition-old(wmc-pill),::view-transition-new(wmc-pill){animation:none;mix-blend-mode:normal}
.wmc-content{view-transition-name:wmc-main}

@media(max-width:900px){
  .wmc-shell{grid-template-columns:1fr !important;margin-top:-72px;padding:0 16px;gap:16px}
  .wmc-hero{padding:40px 18px 110px}
  .wmc-content{padding:22px;border-radius:var(--radius)}
  .wmc-side{position:static;padding:6px;border-radius:var(--radius);
    display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    scroll-snap-type:x proximity}
  .wmc-side::-webkit-scrollbar{display:none}
  .wmc-side ul{display:flex;gap:6px}
  .wmc-side li{scroll-snap-align:start}
  .wmc-side a{white-space:nowrap;padding:10px 17px;border:1.5px solid var(--line);border-radius:var(--radius-pill)}
  .wmc-side li.is-active a{border-color:var(--ink)}
  .wmc-side li.is-active a::before{border-radius:var(--radius-pill)}
  .wmc-side svg,.wmc-user,.wmc-sep{display:none}
  .wmc-order-body{grid-template-columns:1fr;gap:var(--sp4)}
  .wmc-order-side{align-items:stretch;flex-direction:row;justify-content:space-between;
    align-items:center;border-top:1px solid var(--line);padding-top:16px;width:100%}
  .wmc-order-total{text-align:left}
  .wmc-order-productos{-webkit-line-clamp:3}
  .wmc-addr-grid{grid-template-columns:1fr}
  .wmc-stat-row{grid-template-columns:1fr}
  .wmc-stat{border-right:0;border-bottom:1px solid var(--line);padding:20px}
  .wmc-stat:last-child{border-bottom:0}
  .wmc-grid2,.wmc .woocommerce-Addresses,.wmc .u-columns.woocommerce-Addresses,
  .wmc .woocommerce-columns--addresses,.wmc-skeleton-row,
  .wmc form.woocommerce-EditAccountForm,.wmc .woocommerce-address-fields__field-wrapper{grid-template-columns:1fr}
  .wmc-benefits{gap:24px}
  .wmc-convenio-card{padding:22px}
  .wmc-sec-head{margin-bottom:var(--sp5);padding-bottom:var(--sp4)}
  .wmc-savebar{padding:12px 14px;flex-direction:column;align-items:stretch;gap:10px}
  .wmc-savebar-actions{justify-content:space-between}

  /* Pedidos como tarjetas en móvil */
  .wmc table.woocommerce-orders-table{border:0;background:transparent}
  .wmc table.woocommerce-orders-table thead{display:none}
  .wmc table.woocommerce-orders-table tr{display:grid;grid-template-columns:1fr auto;gap:2px 14px;
    background:var(--wash);border:1px solid var(--line);border-radius:var(--radius);
    padding:16px 18px;margin-bottom:var(--sp3)}
  .wmc table.woocommerce-orders-table td{display:block;border:0;padding:3px 0;background:transparent}
  .wmc table.woocommerce-orders-table td::before{content:attr(data-title);font-size:9.5px;
    font-weight:var(--w-wt-bold,700);letter-spacing:.14em;text-transform:uppercase;
    color:var(--faint);display:block;margin-bottom:2px}
  .wmc .woocommerce-orders-table__cell-order-actions{grid-column:2;grid-row:1/5;align-self:center;text-align:right}
  .wmc .woocommerce-orders-table__cell-order-actions::before{display:none}
}

@media(max-width:520px){
  .wmc-hero h1{font-size:30px}
  .wmc-st span{font-size:9.5px}
  .wmc-stat .wmc-k{font-size:32px}
}

/* Respeto por quien pide menos movimiento. */
@media(prefers-reduced-motion:reduce){
  .wmc *,.wmc *::before,.wmc *::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .wmc-fill{width:var(--wmc-w,0%)}
}

/* Impresión: el cliente a veces imprime su pedido. */
@media print{
  .wmc-side,.wmc-hero,.wmc-savebar,.wmc-back{display:none !important}
  .wmc-shell{display:block !important;margin:0;padding:0}
  .wmc-content{box-shadow:none;border:0;padding:0}
  .wmc-card,.wmc table.shop_table{border-color:#ccc}
}