/* ================================================
   MONGO PRODUCT AFFINITY — Wizard CSS
   Minimalista · Scoped para WoodMart
   ================================================ */

/* ── Ocultar wizard wrap por defecto (JS lo abre) ───────── */
#mpa-wizard-wrap { display: none; }

/* Los .mpa-step se ocultan con style="display:none" en el HTML.
   El JS usa element.style.display para mostrarlos, sin !important en CSS. */

/* El panel del wizard no lleva borde rosado (anula mpa-frontend.css) */
#mpa-app .mpa-panel {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* ══ VARIABLES — heredadas por sticky bar y modal también ══ */
:root {
  --mpa-brand:    var(--wd-primary-color);
  --mpa-brand-h:  #9c0a47;
  --mpa-brand-l:  var(--wd-primary-color-light, #fdf5f8);
  --mpa-brand-m:  #f5dce7;
  --mpa-text:     #111;
  --mpa-text-2:   #555;
  --mpa-text-3:   #888;
  --mpa-border:   var(--brdcolor-gray-300, #ededed);
  --mpa-bg:       var(--bgcolor-gray-200, #fafafa);
  --mpa-white:    #ffffff;
  --mpa-surface:  var(--bgcolor-gray-200, #f7f7f7);
  --mpa-r-sm:     6px;
  --mpa-r-md:     var(--wd-brd-radius, 8px);
  --mpa-r-lg:     var(--wd-brd-radius, 12px);
  --mpa-r-xl:     50px;
  --mpa-r-pill:   999px;
  --mpa-r-tall:   20px;
  --mpa-ease:     cubic-bezier(.4,0,.2,1);
  --mpa-f:        inherit;
  --mpa-sticky-h: 68px;
}

/* ══ CONTENEDOR PRINCIPAL ══ */
#mpa-app {
  font-family: var(--mpa-f) !important;
  font-size: 1rem !important;
  color: var(--mpa-text) !important;
  background: var(--mpa-white) !important;
  margin: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  /* w2.1.2 — David: quiere el wizard entero dentro de un contenedor con borde y
     padding, estética "formulario de Google" (ver captura de referencia que
     compartió, del propio admin del plugin). Antes era deliberadamente sin
     borde (ver comentario más arriba, "anula mpa-frontend.css") — se sustituye
     ese criterio por el nuevo pedido explícitamente. */
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  border: 1px solid var(--mpa-border) !important;
  /* w3.12 — David: quitar el padding-bottom del wizard/contenedor del wizard.
     Este padding (68px, = --mpa-sticky-h) reservaba hueco para una
     ".mpa-sticky-bar" que existe como regla CSS en este mismo archivo pero
     que ningún template/JS del plugin llega a renderizar dentro de #mpa-app
     (comprobado: cero coincidencias de "mpa-sticky-bar" fuera de este CSS) —
     es decir, el wizard reservaba espacio vacío de sobra para una barra que
     nunca aparece aquí. Se quita sin reemplazo; --mpa-sticky-h se deja
     definida por si algún otro contenedor (fuera de #mpa-app) la usa. */
  line-height: 1.5 !important;
}

/* Reset agresivo dentro del contenedor */
#mpa-app *, #mpa-app *::before, #mpa-app *::after {
  box-sizing: border-box !important;
  font-family: var(--mpa-f) !important;
  -webkit-font-smoothing: antialiased;
}
#mpa-app p, #mpa-app h1, #mpa-app h2, #mpa-app h3, #mpa-app h4,
#mpa-app ul, #mpa-app li, #mpa-app span, #mpa-app div, #mpa-app a {

  margin: 0;
  padding: 0;
}
#mpa-app ul, #mpa-app li {
 list-style: none !important; }
#mpa-app a {
 text-decoration: none !important; }
#mpa-app button {
 font-family: var(--mpa-f) !important; }
#mpa-app input {
 font-family: var(--mpa-f) !important; }
/* ══ STEPS ══ */

@keyframes mpaIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
#mpa-app .mpa-step--active {

  animation: mpaIn .3s var(--mpa-ease) both !important;
}
/* ══ PANELES ══
   w2.1.2 — David: quiere el wizard entero dentro de un contenedor con borde y
   padding visible (estética "formulario de Google"), no pegado a los bordes.
   El panel pasa a llevar padding horizontal por defecto en todos los tamaños
   (antes solo lo tenía por debajo de 480px vía la media query de más abajo). */
#mpa-app .mpa-panel {

  padding: 36px 32px 32px !important;
  background: var(--mpa-white) !important;
}


/* w2.1.4 — David: el "Paso X de 8" en rosa que llevaba cada panel (.mpa-step-tag/
   .mpa-hero__eyebrow/.mpa-eyebrow__dot) se elimina de las 7 pantallas que lo usaban
   — esa información ahora vive solo en la cabecera de progreso (ver
   .mpa-progress-header más abajo), no hace falta repetirla dos veces. */
@keyframes mpaPulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ══ HERO ══ */


/* Modal grande para info */
.mpa-modal .mpa-modal__box--lg {
  max-width: 580px !important;
  padding: 36px 40px 28px !important;
}
.mpa-modal .mpa-modal__close {
  position: absolute !important; top: 16px !important; right: 20px !important;
  background: none !important; border: none !important; cursor: pointer !important;
  font-size: 18px !important; color: var(--mpa-text-3) !important;
  line-height: 1 !important; padding: 4px 8px !important;
  transition: color .15s !important;
}
.mpa-modal .mpa-modal__close:hover { color: var(--mpa-text) !important; }
/* Secciones de contenido del modal info */


/* ══ PILLARS ══ */


/* ══ QR ══ */


#mpa-app #mpa-qr-canvas {

  border-radius: 8px !important;
  flex-shrink: 0 !important;
  display: block !important;
}
/* ══ DIVIDER ══ */


/* ══ BOTONES ══ */
#mpa-app .mpa-btn {

  font-family: var(--mpa-f) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border-radius: var(--mpa-r-pill) !important;
  padding: 14px 32px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all .2s var(--mpa-ease) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  line-height: 1 !important;
  -webkit-tap-highlight-color: transparent !important;
}


#mpa-app .mpa-btn--primary {

  background: var(--wd-primary-color) !important;
  color: var(--mpa-white) !important;
  box-shadow: 0 2px 12px rgba(190,13,87,.18) !important;
}
#mpa-app .mpa-btn--primary:hover {

  background: var(--mpa-brand-h) !important;
  box-shadow: 0 4px 20px rgba(190,13,87,.28) !important;
  transform: translateY(-1px) !important;
}
#mpa-app .mpa-btn--primary:disabled {

  background: var(--mpa-border) !important;
  color: var(--mpa-text-3) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
}


#mpa-app .mpa-btn--ghost {

  background: transparent !important;
  color: var(--mpa-text-2) !important;
  border: none !important;
  padding: 12px 16px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: .5px !important;
  box-shadow: none !important;
}
#mpa-app .mpa-btn--ghost:hover {
 color: var(--mpa-text) !important; }
@keyframes mpaSpin { to { transform: rotate(360deg); } }

/* ══ STEP HEAD ══ */
#mpa-app .mpa-step-head {
 margin-bottom: 28px !important; }
#mpa-app .mpa-step-head {
 margin-bottom: 28px !important; }
#mpa-app .mpa-step-head h2 {

  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--mpa-text) !important;
  letter-spacing: -.3px !important;
  line-height: 1.2 !important;
  margin: 0 0 8px !important;
}
#mpa-app .mpa-step-head p {

  font-size: 0.9rem !important;
  color: var(--mpa-text-2) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
/* ══ FORMULARIO ══ */
#mpa-app .mpa-field {
 margin-bottom: 24px !important; }
#mpa-app .mpa-field {
 margin-bottom: 24px !important; }
#mpa-app .mpa-label {

  display: block !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--mpa-text-2) !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}
/* w5.9.12 — David: en móvil, el texto en mayúsculas de las etiquetas de
   pregunta del formulario (Nombre/Edad/Sexo/Estado/Zona problemática/
   Alergias/Notas — .mpa-label, arriba) se percibía demasiado grande.
   Mismo estilo (peso/tracking/mayúsculas), solo un punto más pequeño y con
   el letter-spacing reducido en la misma proporción para que no se vea
   descompensado a este tamaño. */
@media (max-width: 480px) {
  #mpa-app .mpa-label {
    font-size: 0.78rem !important;
    letter-spacing: 1.2px !important;
  }
}
#mpa-app .mpa-opt {

  font-size: 0.85rem !important;
  color: var(--mpa-text-3) !important;
  font-weight: 500 !important;
  letter-spacing: .5px !important;
  text-transform: none !important;
}
#mpa-app .mpa-input {

  width: 100% !important;
  border: 1.5px solid var(--mpa-border) !important;
  border-radius: var(--mpa-r-pill) !important;
  padding: 13px 16px !important;
  font-size: 1rem !important;
  color: var(--mpa-text) !important;
  background: var(--mpa-white) !important;
  transition: border-color .18s !important;
  outline: none !important;
  box-shadow: none !important;
  line-height: 1.5 !important;
}
#mpa-app .mpa-input:focus {

  border-color: var(--wd-primary-color) !important;
  box-shadow: none !important;
  outline: none !important;
}
/* w5.9.3 — "Notas a tener en cuenta" (previous_experience, Paso 5). Mismo estilo
   base que .mpa-input (borde, color, tipografía, foco) pero con border-radius
   moderado en vez de la píldora completa de .mpa-input — un textarea multilínea
   con esquinas totalmente redondeadas se ve raro en cuanto ocupa más de una
   línea de alto. */
#mpa-app .mpa-textarea {
  border-radius: var(--mpa-r-md) !important;
  resize: vertical !important;
  min-height: 76px !important;
  font-family: inherit !important;
}
#mpa-app #mpa-notes-count {
  font-weight: 600 !important;
}
/* w4.3 — pulido general: ninguna tarjeta/chip/botón interactivo del wizard
   tenía un estado de foco de teclado propio (solo .mpa-input, arriba) — un
   cliente navegando con Tab por edad/sexo/tipo de piel/reactividad/objetivo/
   zona, o por los botones Atrás/Continuar/Capturar, no veía ningún indicador
   de dónde estaba. Anillo consistente con el color de marca, solo visible en
   navegación por teclado (:focus-visible) para no aparecer también al clicar
   con el ratón. */
#mpa-app .mpa-tile:focus-visible,
#mpa-app .mpa-chip:focus-visible,
#mpa-app .mpa-btn:focus-visible {
  outline: 2px solid var(--wd-primary-color) !important;
  outline-offset: 2px !important;
}
#mpa-app .mpa-hint {

  font-size: 0.85rem !important;
  color: var(--mpa-text-3) !important;
  margin: 6px 0 0 !important;
  line-height: 1.5 !important;
}

/* ══ CHIPS ══ */
#mpa-app .mpa-chips {

  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#mpa-app .mpa-chips {

  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#mpa-app .mpa-chip {

  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--mpa-text-2) !important;
  background: var(--mpa-white) !important;
  border: 1.5px solid var(--mpa-border) !important;
  border-radius: var(--mpa-r-pill) !important;
  padding: 8px 18px !important;
  cursor: pointer !important;
  transition: all .15s var(--mpa-ease) !important;
  letter-spacing: .3px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}
#mpa-app .mpa-chip:hover {

  border-color: rgba(190, 13, 87, .35) !important;
  background: var(--mpa-brand-l) !important;
}
/* w2.1.7 — David: ni el relleno sólido de marca (w2.1.3) ni el gris+elevación
   (w2.1.4) eran el estilo que recordaba — se refería al de las tarjetas de
   ajuste (.mpa-term-card--on) de ANTES de empezar esta reconstrucción
   (v4.3.29): fondo rosa muy claro, borde y texto en color de marca, un halo
   suave en vez de sombra de elevación. Se restaura tal cual (mismos valores
   que .mpa-term-card--on en el plugin original) como estilo único para toda
   selección del wizard. */
#mpa-app .mpa-chip--on {

  background: #fdf0f5 !important;
  border-color: var(--wd-primary-color) !important;
  color: var(--wd-primary-color) !important;
  box-shadow: 0 0 0 3px rgba(190, 13, 87, .1) !important;
}
#mpa-app .mpa-chip--on:hover {

  background: #fdf0f5 !important;
  border-color: var(--wd-primary-color) !important;
  color: var(--wd-primary-color) !important;
}
/* ══ CÁMARA ══ */


/* w4.3 — bug real: el scaleX(-1) que llevaba esta regla (con !important) era
   incondicional — parte de un bloque de diseño huérfano, .mpa-viewfinder, sin
   marcado propio en el plugin (ver limpieza de CSS de esta misma ronda) — pero
   #mpa-video SÍ es un id real y activo, así que este !important ganaba
   siempre. Con cámara trasera, la vista previa se veía en espejo pero la foto
   capturada (capturePhoto(), que solo espeja cuando facingMode==='user') no —
   lo que el cliente encuadraba no era lo que se guardaba. El espejo ahora lo
   pone JS en línea (ver startCamera()/flipCamera()), con la misma condición
   exacta que capturePhoto(), así que vista previa y foto siempre coinciden. */
#mpa-app #mpa-video {

  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
}


#mpa-app .mpa-confirm-row .mpa-btn--primary {
 flex: 1 !important; }
/* ══ SCAN / PROCESANDO ══ */


@keyframes mpaBeam { 0%{top:8%;opacity:.5} 50%{top:88%;opacity:1} 100%{top:8%;opacity:.5} }


@keyframes mpaDot { 0%,80%,100%{opacity:.2;transform:scale(.8)} 40%{opacity:1;transform:scale(1)} }

/* Progress log */


/* Auditoría w3.2 (rendimiento): se elimina aquí el bloque CSS "AJUSTE" completo
   (.mpa-adjust-*, .mpa-conf-row/bg/fill-sm/pct-sm, #mpa-ingr-add-select,
   .mpa-ingr-pills/.mpa-ingr-pill*, .mpa-excl-pills/.mpa-excl-pill*,
   #mpa-excl-add-select) — CSS muerto de la pantalla de "ajuste manual" (Paso 4
   editable) eliminada por completo en w2.0. Confirmado sin ninguna referencia viva
   en JS/PHP/templates antes de borrar. Esto ya estaba anotado como pendiente en
   el documento de arquitectura del proyecto ("Pendiente inmediato" — limpieza de
   CSS muerto). ~145 líneas menos parseadas en cada carga de página con el wizard. */

/* ══ TARJETAS RUTINA (elegir tipo) ══ */


/* ══ RESULTADOS HERO ══ */


#mpa-app .mpa-conf-bar-row {

  display: flex !important; align-items: center !important; gap: 12px !important;
}
#mpa-app .mpa-conf-bar-bg {

  flex: 1 !important; height: 2px !important;
  background: var(--mpa-border) !important; border-radius: 2px !important; overflow: hidden !important;
}
#mpa-app .mpa-conf-bar-fill {

  height: 100% !important; background: var(--wd-primary-color) !important;
  border-radius: 2px !important; transition: width 1.2s var(--mpa-ease) !important; width: 0 !important;
}
#mpa-app .mpa-conf-pct {

  font-size: 0.85rem !important; font-weight: 700 !important;
  color: var(--wd-primary-color) !important; min-width: 36px !important;
}
/* ══ SECCIONES ══ */
#mpa-app .mpa-section {

  padding: 28px 40px !important;
  border-bottom: 1px solid var(--mpa-border) !important;
  background: var(--mpa-white) !important;
}
#mpa-app .mpa-section {

  padding: 28px 40px !important;
  border-bottom: 1px solid var(--mpa-border) !important;
  background: var(--mpa-white) !important;
}
#mpa-app .mpa-section:last-child {
 border-bottom: none !important; }


/* ══ COSM GRID ══ */


/* ══ SKIN CARD ══ */


/* ══ CONCERN CARDS ══ */


/* ══ SELECT ALL BAR ══ */


/* ══ SKELETON ══ */
@keyframes mpaShimmer {
  0%   { background-position: -400px 0 }
  100% { background-position:  400px 0 }
}
#mpa-app .sk {

  display: block !important;
  background: linear-gradient(90deg, #f2f2f2 25%, #e8e8e8 50%, #f2f2f2 75%) !important;
  background-size: 400px 100% !important;
  animation: mpaShimmer 1.3s ease-in-out infinite !important;
  border-radius: 6px !important;
}
/* Pantalla de carga entre selección de rutina y resultados */


@keyframes mpaPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.12); opacity: .7; }
}


#mpa-app .sk--circle {

  width: 22px !important; height: 22px !important;
  border-radius: 50% !important; flex-shrink: 0 !important;
}
#mpa-app .sk--line {

  height: 11px !important; margin-bottom: 8px !important;
}
/* ══ STEP BLOCKS & PRODUCT CARDS ══ */


/* Product card */

/* Top row: checkbox + image + body */


/* ══ DISCLAIMER ══ */


/* ══ ERROR ══ */


/* ══ STICKY BAR (fuera de #mpa-app) ══ */
.mpa-sticky-bar {

  position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 9999 !important; background: #ffffff !important;
  border-top: 1px solid #ededed !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,.08) !important;
  padding: 12px 20px !important;
  transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
  font-family: var(--mpa-f) !important;
}
.mpa-sticky-bar--hidden { transform: translateY(100%) !important; }
.mpa-sticky-bar .mpa-sticky-bar__inner {
  max-width: 560px !important; margin: 0 auto !important;
  display: flex !important; align-items: center !important;
  justify-content: space-between !important; gap: 16px !important;
}
.mpa-sticky-bar .mpa-sticky-bar__info {
  display: flex !important; flex-direction: column !important;
}
.mpa-sticky-bar .mpa-sticky-bar__count {
  font-family: var(--mpa-f) !important;
  font-size: 0.85rem !important; font-weight: 700 !important;
  color: #1a1a1a !important; letter-spacing: -.1px !important;
  margin: 0 !important; padding: 0 !important;
}
.mpa-sticky-bar .mpa-sticky-bar__total {
  font-family: var(--mpa-f) !important;
  font-size: 0.85rem !important; color: #6b6b6b !important;
  margin: 0 !important; padding: 0 !important;
}
.mpa-sticky-bar .mpa-sticky-bar__btn {
  font-family: var(--mpa-f) !important;
  font-size: 0.85rem !important; font-weight: 700 !important;
  letter-spacing: 1.5px !important; text-transform: uppercase !important;
  background: var(--wd-primary-color) !important; color: white !important; border: none !important;
  border-radius: var(--mpa-r-pill) !important; padding: 13px 28px !important; cursor: pointer !important;
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  transition: all .2s !important; box-shadow: 0 2px 12px rgba(190,13,87,.2) !important;
  white-space: nowrap !important; flex-shrink: 0 !important;
}
.mpa-sticky-bar .mpa-sticky-bar__btn:hover {
  background: var(--mpa-brand-h) !important; box-shadow: 0 4px 20px rgba(190,13,87,.3) !important;
}
.mpa-sticky-bar .mpa-sticky-bar__btn:disabled {
  opacity: .45 !important; cursor: not-allowed !important;
}
.mpa-sticky-bar .mpa-sticky-bar__btn svg { display: none !important; }

/* ══ MODALS (fuera de #mpa-app) ══ */
.mpa-modal {

  position: fixed !important; inset: 0 !important; z-index: 99999 !important;
  background: rgba(0,0,0,.4) !important;
  backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important;
  align-items: center !important;
  justify-content: center !important; padding: 16px !important;
  font-family: var(--mpa-f) !important;
  display: none !important;
}
.mpa-modal--visible {
  display: flex !important;
}
.mpa-modal .mpa-modal__overlay { position: absolute !important; inset: 0 !important; }
.mpa-modal .mpa-modal__box {
  position: relative !important; z-index: 1 !important;
  background: #ffffff !important; border-radius: 28px !important;
  padding: 40px !important; max-width: 440px !important; width: 100% !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.15) !important;
  max-height: 88vh !important; display: flex !important; flex-direction: column !important;
  animation: mpaIn .3s cubic-bezier(.4,0,.2,1) both !important;
  font-family: var(--mpa-f) !important;
  box-sizing: border-box !important;
}
@media (max-width: 480px) {
  .mpa-modal .mpa-modal__box {
    padding: 20px 20px 24px !important;
    border-radius: 20px !important;
    max-height: 88vh !important;
  }
}
.mpa-modal .mpa-modal__box--sm { padding: 32px !important; max-width: 380px !important; }
.mpa-modal .mpa-modal__header { margin-bottom: 20px !important; }
.mpa-modal .mpa-modal__header--compact {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
.mpa-modal .mpa-modal__header--compact .mpa-modal__title {
  font-size: 1rem !important;
  margin: 0 !important;
}
.mpa-modal__close {
  flex-shrink: 0 !important;
  width: 28px !important; height: 28px !important;
  border: none !important; background: #f4f4f4 !important;
  border-radius: 50% !important; cursor: pointer !important;
  font-size: 0.85rem !important; color: #888 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  line-height: 1 !important; padding: 0 !important;
  transition: background .15s, color .15s !important;
}
.mpa-modal__close:hover {
  background: #e8e8e8 !important; color: #333 !important;
}
.mpa-modal .mpa-modal__body {
  flex: 1 !important; overflow-y: auto !important;
  font-size: 0.85rem !important; color: #6b6b6b !important; line-height: 1.75 !important;
}
.mpa-modal .mpa-modal__body--noscroll { overflow: visible !important; }
.mpa-modal .mpa-modal__body * { font-family: var(--mpa-f) !important; box-sizing: border-box !important; }
.mpa-modal .mpa-modal__body h4 {
  font-size: 0.85rem !important; font-weight: 700 !important; letter-spacing: 1px !important;
  text-transform: uppercase !important; color: #1a1a1a !important;
  margin: 16px 0 6px !important; padding: 0 !important;
}
.mpa-modal .mpa-modal__body p  { margin-bottom: 8px !important; padding: 0 !important; }
.mpa-modal .mpa-modal__body ul { padding-left: 16px !important; margin-bottom: 8px !important; }
.mpa-modal .mpa-modal__body li { margin-bottom: 3px !important; }
.mpa-modal .mpa-modal__body a  { color: var(--wd-primary-color) !important; }
.mpa-modal .mpa-modal__footer { padding-top: 20px !important; }
.mpa-modal .mpa-modal__check-label {
  display: flex !important; align-items: flex-start !important; gap: 10px !important;
  cursor: pointer !important; font-size: 0.85rem !important; color: #6b6b6b !important;
  margin: 0 0 12px !important; padding: 0 !important;
}
.mpa-modal .mpa-modal__check-label input {
  flex-shrink: 0 !important; width: 16px !important; height: 16px !important;
  margin: 2px 0 0 !important; accent-color: var(--wd-primary-color) !important; cursor: pointer !important;
}

/* Segundo checkbox: limitaciones IA — fondo sutil para diferenciarlo del RGPD */
.mpa-modal .mpa-modal__check-label--ai {
  background: #fafaf8 !important;
  border: 1px solid #e8e4d8 !important;
  border-radius: var(--mpa-r-tall) !important;
  padding: 12px !important;
  font-size: 0.85rem !important;
  color: #555 !important;
  line-height: 1.6 !important;
}
.mpa-modal .mpa-modal__check-label--ai strong {
  color: #333 !important;
  font-weight: 700 !important;
}
/* Checkbox RGPD modal email */
.mpa-modal .mpa-rgpd-check {
  display: flex !important; align-items: flex-start !important; gap: 10px !important;
  cursor: pointer !important; font-size: 0.85rem !important; color: #6b6b6b !important;
  line-height: 1.55 !important; padding: 12px 0 0 !important;
  border-top: 1px solid #f0f0f0 !important;
}
.mpa-modal .mpa-rgpd-check input {
  flex-shrink: 0 !important; width: 15px !important; height: 15px !important;
  margin: 2px 0 0 !important; accent-color: var(--wd-primary-color) !important; cursor: pointer !important;
}
.mpa-modal .mpa-btn {
  font-family: var(--mpa-f) !important;
  font-size: 0.85rem !important; font-weight: 700 !important;
  letter-spacing: 1.5px !important; text-transform: uppercase !important;
  border-radius: var(--mpa-r-pill) !important; padding: 14px 32px !important;
  border: none !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 8px !important; text-decoration: none !important; line-height: 1 !important;
  box-sizing: border-box !important; width: 100% !important;
}
.mpa-modal .mpa-btn--primary {
  background: var(--wd-primary-color) !important; color: white !important;
  box-shadow: 0 2px 12px rgba(190,13,87,.18) !important;
}
.mpa-modal .mpa-btn--primary:disabled {
  background: #ededed !important; color: #a8a8a8 !important;
  box-shadow: none !important; cursor: not-allowed !important;
}
.mpa-modal .mpa-btn--ghost {
  background: transparent !important; color: #6b6b6b !important;
  border: none !important; box-shadow: none !important;
  font-size: 0.85rem !important; padding: 12px 16px !important;
}
/* w2.1.5 — modal de límite diario: 2 botones apilados (Entendido + Ver mi
   perfil de piel) en vez del único botón a ancho completo que ya tenían el
   resto de modales — solo hace falta el hueco entre ambos. */
.mpa-modal .mpa-modal__footer .mpa-btn + .mpa-btn {
  margin-top: 10px !important;
}
.mpa-modal .mpa-btn--loading::after {
  content: '' !important; width: 14px !important; height: 14px !important;
  border: 2px solid rgba(255,255,255,.3) !important; border-top-color: white !important;
  border-radius: 50% !important; animation: mpaSpin .7s linear infinite !important;
}

/* ══ RESPONSIVE ══ */
@media (max-width: 480px) {
  #mpa-app {
 border-radius: 14px !important; }
  #mpa-app .mpa-hero,
  #mpa-app .mpa-panel,
  #mpa-app .mpa-panel--centered {
 padding-left: 18px !important; padding-right: 18px !important; }
  #mpa-app .mpa-section,
  #mpa-app .mpa-results-hero {
 padding-left: 20px !important; padding-right: 20px !important; }
#mpa-app .mpa-section,
  #mpa-app .mpa-results-hero {
 padding-left: 20px !important; padding-right: 20px !important; }
  #mpa-app .mpa-confirm-row,
  #mpa-app .mpa-cam-controls,
  #mpa-app .mpa-capture-head {
 padding-left: 20px !important; padding-right: 20px !important; }
#mpa-app .mpa-confirm-row,
  #mpa-app .mpa-cam-controls,
  #mpa-app .mpa-capture-head {
 padding-left: 20px !important; padding-right: 20px !important; }
  #mpa-app .mpa-or-divider {
 padding-left: 20px !important; padding-right: 20px !important; }
#mpa-app .mpa-or-divider {
 padding-left: 20px !important; padding-right: 20px !important; }
  #mpa-app .mpa-progress-log {
 padding-left: 20px !important; padding-right: 20px !important; }
#mpa-app .mpa-progress-log {
 padding-left: 20px !important; padding-right: 20px !important; }
  #mpa-app .mpa-hero__title {
 font-size: 28px !important; }
#mpa-app .mpa-hero__title {
 font-size: 28px !important; }
  #mpa-app .mpa-pcard__top {
 grid-template-columns: 24px 64px 1fr !important; gap: 10px !important; }
#mpa-app .mpa-pcard__top {
 grid-template-columns: 24px 64px 1fr !important; gap: 10px !important; }
  #mpa-app .mpa-pcard__img {
 width: 64px !important; height: 64px !important; }
#mpa-app .mpa-pcard__img {
 width: 64px !important; height: 64px !important; }
  .mpa-sticky-bar .mpa-sticky-bar__btn { padding: 12px 20px !important; font-size: 0.85rem !important; }
  .mpa-modal .mpa-modal__box { padding: 28px 24px !important; }
}

/* ══ SELECT2 OVERRIDES (scoped) ══ */
#mpa-app .select2-container {
 width: 100% !important; }
#mpa-app .select2-container {
 width: 100% !important; }
#mpa-app .select2-container--default .select2-selection--multiple {

  border: 1.5px solid var(--mpa-border) !important;
  border-radius: var(--mpa-r-pill) !important;
  background: var(--mpa-white) !important;
  padding: 4px 16px 4px !important;
  min-height: 46px !important;
  cursor: text !important;
}
#mpa-app .select2-container--default.select2-container--focus .select2-selection--multiple {

  border-color: var(--wd-primary-color) !important;
  outline: none !important;
}
#mpa-app .select2-container--default .select2-selection--multiple .select2-selection__choice {

  display: none !important; /* pills shown below, not inside input */
}
#mpa-app .select2-search--inline .select2-search__field {

  font-family: var(--mpa-f) !important;
  font-size: 0.9rem !important;
  color: var(--mpa-text) !important;
  margin-top: 6px !important;
}
#mpa-app .select2-search--inline .select2-search__field::placeholder {
 color: var(--mpa-text-3) !important; }
#mpa-app .select2-dropdown {

  border: 1.5px solid var(--wd-primary-color) !important;
  border-radius: var(--mpa-r-md) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
  font-family: var(--mpa-f) !important;
}
#mpa-app .select2-results__option {

  font-size: 0.85rem !important;
  padding: 9px 14px !important;
  color: var(--mpa-text) !important;
}
#mpa-app .select2-results__option--highlighted {

  background: var(--mpa-brand-l) !important;
  color: var(--wd-primary-color) !important;
}
#mpa-app .select2-results__option[aria-selected="true"] {

  background: var(--wd-primary-color) !important;
  color: #fff !important;
}
#mpa-app .select2-search--dropdown .select2-search__field {

  border: 1.5px solid var(--mpa-border) !important;
  border-radius: var(--mpa-r-sm) !important;
  padding: 8px 12px !important;
  font-family: var(--mpa-f) !important;
  font-size: 0.85rem !important;
  outline: none !important;
}
/* ══ INGREDIENT PILLS BELOW SELECT ══ */
.mpa-avoid-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
  min-height: 0;
}
.mpa-avoid-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mpa-text);
  background: var(--mpa-surface);
  border: 1px solid var(--mpa-border);
  border-radius: var(--mpa-r-pill);
  padding: 5px 14px 5px 14px;
  letter-spacing: .3px;
  animation: mpaIn .2s var(--mpa-ease) both;
}
.mpa-avoid-pill__rm {
  font-size: 0.85rem;
  line-height: 1;
  color: var(--mpa-text-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--mpa-f);
  transition: color .15s;
}
.mpa-avoid-pill__rm:hover { color: var(--wd-primary-color); }

/* ══ REQUIRED FIELD VALIDATION ══ */
.mpa-required-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--wd-primary-color);
  margin-left: 4px;
  vertical-align: middle;
}
.mpa-field--error .mpa-chips-wrap {
  border: 1.5px solid #e05000;
  border-radius: var(--mpa-r-tall);
  padding: 8px;
}
.mpa-validation-msg {
  font-size: 0.85rem;
  color: #c05000;
  margin-top: 6px;
  display: none;
}
.mpa-btn--primary:disabled,
.mpa-btn--primary[disabled] {
  background: var(--mpa-border) !important;
  color: var(--mpa-text-3) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ══ STEP CONTINUE BUTTONS ══ */
.mpa-step-continue {
  padding: 20px 40px 0;
  background: var(--mpa-white);
}
.mpa-step-continue .mpa-btn--primary { width: 100% !important; }

/* ══ QR CARD VIDEO/IMAGE TOGGLE ══ */
#mpa-app .mpa-qr-card__body {

  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
  padding: 20px 24px !important;
}
#mpa-app .mpa-qr-card__body {

  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
  padding: 20px 24px !important;
}
#mpa-app .mpa-qr-card__text {

  flex: 1 !important;
  min-width: 0 !important;
}
#mpa-app #mpa-qr-video-wrap video,
#mpa-app #mpa-qr-image-wrap img {

  width: 130px !important;
  height: 130px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  display: block !important;
}
#mpa-app #mpa-qr-image-wrap img {

  object-fit: contain !important;
  background: #f7f7f7 !important;
}
#mpa-app .mpa-qr-toggle-btn {

  font-size: 0.85rem !important;
  padding: 8px 16px !important;
  letter-spacing: 1px !important;
}
/* ══ LANDING CARDS (step 0) ══ */
#mpa-app .mpa-landing-cards {

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin: 20px 0 !important;
}
#mpa-app .mpa-landing-cards {

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin: 20px 0 !important;
}
@media (max-width: 600px) {
  #mpa-app .mpa-landing-cards {
 grid-template-columns: 1fr !important; }
#mpa-app .mpa-landing-cards {
 grid-template-columns: 1fr !important; }
  /* QR card is for desktop-to-mobile handoff — hide on actual mobile screens */
  #mpa-app #mpa-qr-panel {
 display: none !important; }
#mpa-app #mpa-qr-panel {
 display: none !important; }
}
/* When QR card is absent (mobile server-side), grid is single column */
#mpa-app .mpa-landing-cards--no-qr {

  grid-template-columns: 1fr !important;
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#mpa-app .mpa-landing-cards--no-qr {

  grid-template-columns: 1fr !important;
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#mpa-app .mpa-landing-card {

  background: var(--mpa-surface) !important;
  border: 1px solid var(--mpa-border) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
#mpa-app .mpa-landing-card__media {

  width: 100% !important;
  height: 160px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display: block !important;
  margin: 4px 0 !important;
}
#mpa-app #mpa-qr-image-wrap .mpa-landing-card__media {

  object-fit: contain !important;
  background: #f7f7f7 !important;
}
#mpa-app .mpa-qr-toggle-btn {

  font-size: 0.85rem !important;
  padding: 9px 18px !important;
  letter-spacing: 1.2px !important;
  align-self: flex-start !important;
  margin-top: 4px !important;
}
#mpa-app .mpa-landing-steps {

  list-style: none !important;
  padding: 0 !important;
  margin: 4px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
#mpa-app .mpa-landing-steps li {

  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 0.85rem !important;
  color: var(--mpa-text-2) !important;
  line-height: 1.45 !important;
}
#mpa-app .mpa-landing-step-num {

  flex-shrink: 0 !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: var(--wd-primary-color) !important;
  color: #fff !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#mpa-app .mpa-landing-card__note {

  font-size: 0.85rem !important;
  color: var(--mpa-text-3) !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  background: var(--mpa-surface) !important;
  border-radius: 8px !important;
}
/* ══ PRODUCT CARD — no-match badge + empty state ══ */
#mpa-app .mpa-pcard--no-match {

  opacity: 0.82 !important;
}
#mpa-app .mpa-pcard--no-match {

  opacity: 0.82 !important;
}
#mpa-app .mpa-pcard__no-match-badge {

  width: 100% !important; box-sizing: border-box !important;
  background: #fff7ed !important;
  border: none !important; border-bottom: 1px solid #fed7aa !important;
  border-radius: 0 !important;
  padding: 5px 10px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #92400e !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}
#mpa-app .mpa-pcard--empty {

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 32px 20px !important;
  background: var(--mpa-surface) !important;
  border: 2px dashed var(--mpa-border) !important;
  border-radius: 16px !important;
  min-width: 200px !important;
}
#mpa-app .mpa-pcard__empty-icon {

  font-size: 32px !important;
  color: var(--mpa-text-3) !important;
  line-height: 1 !important;
}
#mpa-app .mpa-pcard__empty-icon::before {

  content: "\f130" !important;
  font-family: "woodmart-font" !important;
  font-weight: 400 !important;
  font-style: normal !important;
}
#mpa-app .mpa-pcard__empty-msg {

  font-size: 0.85rem !important;
  color: var(--mpa-text-3) !important;
  text-align: center !important;
  margin: 0 !important;
}
/* ══ VISUAL CARDS — adjust step (skin type + concerns) ══ */
#mpa-app .mpa-vcards {

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 8px !important;
}
#mpa-app .mpa-vcards {

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 8px !important;
}
@media (max-width: 540px) {
  #mpa-app .mpa-vcards {
 grid-template-columns: 1fr !important; }
#mpa-app .mpa-vcards {
 grid-template-columns: 1fr !important; }
}
#mpa-app .mpa-vcard {

  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  background: var(--mpa-surface) !important;
  border: 2px solid var(--mpa-border) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  text-align: left !important;
  font-family: var(--mpa-f) !important;
  transition: border-color .15s, background .15s, box-shadow .15s !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#mpa-app .mpa-vcard:hover {

  border-color: var(--wd-primary-color) !important;
  box-shadow: 0 2px 12px rgba(190,13,87,.08) !important;
}
#mpa-app .mpa-vcard--on {

  border-color: var(--wd-primary-color) !important;
  background: #fdf0f5 !important;
  box-shadow: 0 2px 12px rgba(190,13,87,.12) !important;
}
#mpa-app .mpa-vcard--on:hover {

  background: #fce8f1 !important;
}
/* Image */
#mpa-app .mpa-vcard__img {

  width: 52px !important;
  height: 52px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  display: block !important;
}
#mpa-app .mpa-vcard__img {

  width: 52px !important;
  height: 52px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  display: block !important;
}
#mpa-app .mpa-vcard__img--empty {

  background: linear-gradient(135deg, #f5e8ef 0%, #ede0f5 100%) !important;
}
/* Text */
#mpa-app .mpa-vcard__body {

  flex: 1 !important;
  min-width: 0 !important;
}
#mpa-app .mpa-vcard__body {

  flex: 1 !important;
  min-width: 0 !important;
}
#mpa-app .mpa-vcard__name {

  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--mpa-text) !important;
  margin: 0 0 3px !important;
  line-height: 1.3 !important;
}
#mpa-app .mpa-vcard--on .mpa-vcard__name {

  color: var(--wd-primary-color) !important;
}
#mpa-app .mpa-vcard__desc {

  font-size: 0.85rem !important;
  color: var(--mpa-text-3) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* ══ PRODUCT CARD — SIZE BADGE (simple products) ══ */
#mpa-app .mpa-pcard__size {

  display: inline-block !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--mpa-text-3) !important;
  background: var(--mpa-surface) !important;
  border: 1px solid var(--mpa-border) !important;
  border-radius: 20px !important;
  padding: 2px 9px !important;
  margin: 4px 0 6px !important;
  letter-spacing: .03em !important;
}

/* ══ SWATCHES (variable products) ══ */
#mpa-app .mpa-swatches-wrap {

  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  margin: 8px 0 6px !important;
}
#mpa-app .mpa-swatches-wrap {

  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  margin: 8px 0 6px !important;
}
/* Row = label + swatch strip */
#mpa-app .mpa-swatches-row {

  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
#mpa-app .mpa-swatches-row {

  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
#mpa-app .mpa-swatches-label {

  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--mpa-text-3) !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
#mpa-app .mpa-swatch-cur-label {

  font-weight: 700 !important;
  color: var(--mpa-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
#mpa-app .mpa-swatches {

  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  align-items: center !important;
}
/* Text swatch (pa_tamano) — mirrors wd-swatch wd-text */
#mpa-app .mpa-swatch--text {

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 27px !important;
  padding: 0 9px !important;
  border-radius: var(--mpa-r-pill) !important;
  border: 1.5px solid var(--mpa-border) !important;
  background: #fff !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--mpa-text) !important;
  cursor: pointer !important;
  font-family: var(--mpa-f) !important;
  transition: border-color .14s, background .14s, color .14s, box-shadow .14s !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}
#mpa-app .mpa-swatch--text:hover {

  border-color: var(--wd-primary-color) !important;
  color: var(--wd-primary-color) !important;
  box-shadow: 0 2px 6px rgba(190,13,87,.1) !important;
}
#mpa-app .mpa-swatch--text.mpa-swatch--active {

  border-color: var(--wd-primary-color) !important;
  background: var(--wd-primary-color) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(190,13,87,.25) !important;
}
/* Color swatch (pa_color) — mirrors wd-swatch wd-bg */
#mpa-app .mpa-swatch--color {

  display: inline-block !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: 2px solid transparent !important;
  padding: 2px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: visible !important;
  transition: border-color .14s, box-shadow .14s !important;
  background: transparent !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
#mpa-app .mpa-swatch--color {

  display: inline-block !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: 2px solid transparent !important;
  padding: 2px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: visible !important;
  transition: border-color .14s, box-shadow .14s !important;
  background: transparent !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
#mpa-app .mpa-swatch--color .mpa-swatch__bg {

  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  background: #ccc !important;
}
#mpa-app .mpa-swatch--color:hover {

  border-color: var(--wd-primary-color) !important;
  box-shadow: 0 0 0 2px rgba(190,13,87,.2) !important;
}
#mpa-app .mpa-swatch--color.mpa-swatch--active {

  border-color: var(--wd-primary-color) !important;
  box-shadow: 0 0 0 3px rgba(190,13,87,.25) !important;
}
/* Unavailable swatch */
#mpa-app .mpa-swatch--unavail {

  opacity: .35 !important;
  cursor: not-allowed !important;
  text-decoration: line-through !important;
  pointer-events: none !important;
}
#mpa-app .mpa-swatch--unavail {

  opacity: .35 !important;
  cursor: not-allowed !important;
  text-decoration: line-through !important;
  pointer-events: none !important;
}

/* ══ AVOID PILLS — fixes ══ */
#mpa-app #mpa-avoid-pills {
 margin-top: 10px !important; }
#mpa-app #mpa-avoid-pills {
 margin-top: 10px !important; }
#mpa-app span.mpa-avoid-pill {
 padding-left: 10px !important; }
/* ══ SCORE BADGE — hidden (replaced by affinity bar) ══ */
#mpa-app .mpa-pcard__score {
 display: none !important; }
#mpa-app .mpa-pcard__score {
 display: none !important; }

/* ══ AFFINITY BAR ══ */
#mpa-app .mpa-affinity {

  /* Full-width bar below the card content — not inside the absolute score area */
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 10px 0 0 !important;
  padding: 8px 12px 10px !important;
  background: #fdf5f8 !important;
  border-radius: 0 0 5px 5px !important;
  border-top: 1px solid #f0dce5 !important;
}
#mpa-app .mpa-affinity {

  /* Full-width bar below the card content — not inside the absolute score area */
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 10px 0 0 !important;
  padding: 8px 12px 10px !important;
  background: #fdf5f8 !important;
  border-radius: 0 0 5px 5px !important;
  border-top: 1px solid #f0dce5 !important;
}
#mpa-app .mpa-affinity__header {

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 6px !important;
  gap: 8px !important;
}
#mpa-app .mpa-affinity__label {

  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--wd-primary-color) !important;
  white-space: nowrap !important;
}
#mpa-app .mpa-affinity__pct {

  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--wd-primary-color) !important;
  white-space: nowrap !important;
}
#mpa-app .mpa-affinity__track {

  width: 100% !important;
  height: 6px !important;
  background: transparent !important;
  border-radius: 99px !important;
  overflow: hidden !important;
  /* Track itself is transparent — fill goes brand→transparent */
  border: 1px solid rgba(190,13,87,.15) !important;
}
#mpa-app .mpa-affinity__fill {

  height: 100% !important;
  border-radius: 99px !important;
  /* Gradient: 100% = full brand color, fades toward left (0% = transparent) */
  background: linear-gradient(to right, rgba(190,13,87,0) 0%, var(--wd-primary-color) 100%) !important;
  transition: width .6s cubic-bezier(.22,1,.36,1) !important;
}
/* ── Super match ── */
#mpa-app .mpa-affinity--super {

  background: linear-gradient(135deg, #fdf0f5 0%, #fce8f1 100%) !important;
  border-top: 1.5px solid rgba(190,13,87,.3) !important;
}
#mpa-app .mpa-affinity--super {

  background: linear-gradient(135deg, #fdf0f5 0%, #fce8f1 100%) !important;
  border-top: 1.5px solid rgba(190,13,87,.3) !important;
}
#mpa-app .mpa-affinity--super .mpa-affinity__track {

  height: 8px !important;
  border-color: rgba(190,13,87,.25) !important;
}
#mpa-app .mpa-affinity--super .mpa-affinity__fill {

  box-shadow: 2px 0 10px rgba(190,13,87,.4) !important;
}
/* ══ STEP 7: ERROR ══════════════════════════════════════════ */
#mpa-app .mpa-err-icon {

  font-size: 3rem !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
  display: block !important;
}
#mpa-app .mpa-err-icon {

  font-size: 3rem !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
  display: block !important;
}
#mpa-app .mpa-err-title {

  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  margin: 0 0 10px !important;
}
#mpa-app .mpa-err-msg {

  font-size: 0.95rem !important;
  color: #555 !important;
  line-height: 1.6 !important;
  margin: 0 0 24px !important;
  max-width: 380px !important;
}
#mpa-app .mpa-err-actions {

  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: center !important;
  width: 100% !important;
}
#mpa-app .mpa-err-actions .mpa-btn {

  width: 100% !important;
  max-width: 320px !important;
}
#mpa-app [data-step="7"] .mpa-panel {

  padding: 40px 28px !important;
  text-align: center !important;
}
/* ══════════════════════════════════════════════════════════
   MPA — Estilos específicos del wizard
   ══════════════════════════════════════════════════════════ */

/* Log de análisis */
.mpa-progress-log { text-align:center; padding:20px 0; }
.mpa-progress-log__face { position:relative; width:120px; height:140px; margin:0 auto 24px; }
.mpa-progress-log__face svg { width:100%; height:100%; }
.mpa-progress-log__list { list-style:none; padding:0; margin:0 0 12px; text-align:left; max-width:340px; margin-left:auto; margin-right:auto; }
.mpa-log-item { font-size: 0.85rem; color:#ccc; padding:4px 0 4px 24px; position:relative; transition:color .3s; }
.mpa-log-item::before { content:'✓'; position:absolute; left:0; color:#ccc; }
.mpa-log-item--active { color:#333; font-weight:600; }
.mpa-log-item--active::before { content:'●'; color:var(--wd-primary-color); animation:mpa-pulse 1s infinite; }
.mpa-log-item--done { color:#999; }
.mpa-log-item--done::before { content:'✓'; color:var(--wd-primary-color); }
@keyframes mpa-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Scan line animación */
.mpa-scan-line { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--wd-primary-color),transparent); top:0; animation:mpa-scan 2s ease-in-out infinite; opacity:.6; }
@keyframes mpa-scan { 0%{top:0;opacity:.6} 100%{top:100%;opacity:0} }

/* Barra de confianza */
.mpa-conf-bar-row { display:flex; align-items:center; gap:12px; }
.mpa-conf-bar-bg { flex:1; height:6px; background:#f0f0f0; border-radius:3px; overflow:hidden; }
.mpa-conf-bar-fill { height:100%; border-radius:3px; transition:width .6s ease; }
.mpa-conf-pct { font-size: 0.9rem; font-weight:700; min-width:40px; }

/* Pills de ingredientes — reglas de bajo nivel (no usar, usar #mpa-app selector) */

/* Avoid pills (paso 1) */
.mpa-avoid-pills { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.mpa-avoid-pill {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--mpa-surface); border-radius:var(--mpa-r-pill, 999px);
    padding:5px 10px 5px 12px; font-size: 0.85rem; color:#333;
}
.mpa-avoid-pill__rm {
    background:none; border:none; cursor:pointer;
    color:#999; font-size: 0.9rem; line-height:1; padding:0;
}
.mpa-avoid-pill__rm:hover { color:#333; }

/* Auditoría w3.2: segunda copia (sin prefijo #mpa-app) del mismo bloque "AJUSTE"
   muerto ya eliminado más arriba en este archivo — misma verificación, mismo motivo. */

/* Saved notice */
.mpa-saved-notice {
    position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(20px);
    background:#111; color:#fff; padding:12px 24px; border-radius:8px;
    font-size: 0.9rem; font-weight:600; z-index:99999;
    opacity:0; transition:opacity .3s, transform .3s;
    white-space:nowrap;
}
.mpa-saved-notice--visible { opacity:1; transform:translateX(-50%) translateY(0); }

/* Dot loader */
.mpa-dot-loader { display:flex; justify-content:center; gap:6px; margin-top:16px; }
.mpa-dot-loader span {
    width:8px; height:8px; border-radius:50%;
    background:var(--wd-primary-color); opacity:.3;
    animation:mpa-dot 1.2s infinite ease-in-out;
}
.mpa-dot-loader span:nth-child(2) { animation-delay:.2s; }
.mpa-dot-loader span:nth-child(3) { animation-delay:.4s; }
@keyframes mpa-dot { 0%,80%,100%{opacity:.3;transform:scale(.8)} 40%{opacity:1;transform:scale(1)} }

/* ══════════════════════════════════════════════════════
   PASO 6 — CÁMARA PREMIUM (numeración desde w2.1.4; los selectores son por
   clase, no por número de paso, así que esta renumeración es solo documental)
   ══════════════════════════════════════════════════════ */

/* Panel: columna centrada — todo el contenido alineado */
#mpa-app .mpa-panel--cam {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 48px 40px 40px !important;
    background: #f8f8f8 !important;
}

/* Todos los hijos: misma columna centrada de 600px */
#mpa-app .mpa-cam-step-head,
.mpa-cam-meta,
#mpa-app #mpa-capture-wrap,
#mpa-app #mpa-preview-wrap,
#mpa-app .mpa-cam-footer,
#mpa-app #mpa-rate-limit-notice,
#mpa-app #mpa-photo1-thumb-wrap {
    width: 100% !important;
    max-width: 600px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Cabecera centrada y más impactante */
#mpa-app .mpa-cam-step-head {
    text-align: center !important;
    margin-bottom: 24px !important;
}
#mpa-app #mpa-photo-step-title {
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
    color: #111 !important;
    margin: 4px 0 10px !important;
}
#mpa-app #mpa-photo-step-desc {
    font-size: 1rem !important;
    color: #aaa !important;
    margin: 0 !important;
}

/* Fila meta: dots izq · contador dcha — alineados al visor */
.mpa-cam-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 600px !important;
    margin-bottom: 12px !important;
    min-height: 26px !important;
}

/* Dots */
.mpa-photo-progress { display: flex; align-items: center; gap: 6px; margin: 0; }
.mpa-photo-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0e0e0; transition: background .25s; }
.mpa-photo-dot--active { background: var(--wd-primary-color); }
.mpa-photo-dot--done   { background: #bbb; }

/* Auditoría w3.2 (rendimiento): .mpa-rate-counter tenía dos definiciones en
   este archivo con valores algo distintos (aquí padding 5px/12px; más abajo,
   en "Paso 2", 4px/10px). Sin !important y con igual especificidad, la
   definición posterior en el archivo es la que siempre ganaba en cascada —
   esta de aquí era CSS muerto que nunca llegaba a aplicarse. Se elimina y
   queda una sola definición más abajo, con el valor realmente vigente. */

/* Visor — 600px, 16:10, sombra premium */
#mpa-app .mpa-cam-frame {
    position: relative;
    width: 100%;
    max-width: 600px;
    /* w2.1.10 — antes era margin:0. Mientras max-width igualaba casi el
       ancho del padre (#mpa-capture-wrap, hasta 600px) el hueco sobrante
       era mínimo y pasaba desapercibido; en el breakpoint de tablet de
       w2.1.9 (max-width 480px dentro de ese mismo padre de 600px) el hueco
       se hizo grande y el visor quedó pegado a la izquierda en vez de
       centrado — bug latente, no algo nuevo de ese breakpoint. margin:0
       auto centra el visor sea cual sea su max-width en cualquier tamaño. */
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    background: #111;
    aspect-ratio: 16/10;
    box-shadow: 0 16px 60px rgba(0,0,0,.22);
}

/* Preview — misma proporción. margin:0 auto por el mismo motivo que
   .mpa-cam-frame arriba (w2.1.10) — se centra igual que el visor. */
#mpa-app .mpa-cam-preview-frame {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: #f4f4f4;
}
#mpa-app .mpa-cam-preview-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

#mpa-app .mpa-cam-frame video,
#mpa-app #mpa-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
}
#mpa-app .mpa-cam-corners {
    position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}

/* Botones */
#mpa-app .mpa-cam-actions {
    display: flex;
    gap: 10px;
    margin: 16px 0 0;
    max-width: 600px;
    width: 100%;
    align-items: stretch;
}
#mpa-app .mpa-cam-btn-capture {
    flex: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#mpa-app .mpa-cam-secondary { display: flex; gap: 8px; flex-shrink: 0; }
#mpa-app .mpa-cam-btn-secondary {
    display: flex; align-items: center; gap: 6px;
    background: none; border: 1.5px solid #e8e8e8; border-radius: var(--mpa-r-pill);
    padding: 0 18px; font-size: 0.85rem; font-weight: 600; color: #555;
    cursor: pointer; white-space: nowrap; height: 44px; font-family: inherit;
    transition: border-color .15s, color .15s;
}
#mpa-app .mpa-cam-btn-secondary:hover { border-color: var(--wd-primary-color); color: var(--wd-primary-color); }

#mpa-app .mpa-cam-shutter {
    display: inline-block; width: 14px; height: 14px;
    border-radius: 50%; background: #fff; opacity: .9; flex-shrink: 0;
}

/* Footer */
#mpa-app .mpa-cam-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin: 16px 0 0; padding-top: 14px;
    border-top: 1px solid #e8e8e8;
    max-width: 600px; width: 100%;
}
#mpa-app .mpa-cam-back {
    background: none; border: none; cursor: pointer;
    font-size: 0.85rem; color: #999; font-family: inherit; padding: 0;
    transition: color .15s;
}
#mpa-app .mpa-cam-back:hover { color: #555; }
#mpa-app .mpa-cam-privacy-note { font-size: 0.85rem; color: #bbb; }

#mpa-app .mpa-cam-error-msg {
    margin-top: 12px; font-size: 0.85rem; color: #c0392b;
    text-align: center; max-width: 600px; width: 100%;
}

/* ── MÓVIL: proporciones y tamaños distintos ────────────────── */
@media (max-width: 599px) {
    #mpa-app .mpa-panel--cam {
        padding: 24px 18px 24px !important;
    }
    #mpa-app .mpa-cam-step-head { text-align: left !important; margin-bottom: 16px !important; }
    #mpa-app #mpa-photo-step-title { font-size: 22px !important; }
    #mpa-app #mpa-photo-step-desc  { font-size: 0.85rem !important; }

    #mpa-app .mpa-cam-step-head,
    .mpa-cam-meta,
    #mpa-app #mpa-capture-wrap,
    #mpa-app #mpa-preview-wrap,
    #mpa-app .mpa-cam-footer,
    #mpa-app #mpa-rate-limit-notice,
    #mpa-app #mpa-photo1-thumb-wrap {
        max-width: 100% !important;
    }
    .mpa-cam-meta { max-width: 100% !important; }

    #mpa-app .mpa-cam-frame,
    #mpa-app .mpa-cam-preview-frame {
        max-width: 100% !important;
        aspect-ratio: 3/4 !important;
        border-radius: 14px !important;
        box-shadow: 0 6px 24px rgba(0,0,0,.15) !important;
    }
    #mpa-app .mpa-cam-actions {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 2px !important;
    }
    #mpa-app .mpa-cam-actions::-webkit-scrollbar { display: none; }
    #mpa-app .mpa-cam-btn-capture { flex-shrink: 0 !important; min-width: 130px !important; }
    #mpa-app .mpa-cam-secondary   { flex-shrink: 0 !important; }
    #mpa-app .mpa-cam-footer { max-width: 100% !important; }
}

/* ══════════════════════════════════════════════════════
   PASO 7 — ANÁLISIS / SKELETON PREMIUM (numeración desde w2.1.4)
   ══════════════════════════════════════════════════════ */

#mpa-app .mpa-analysis-wrap {
    padding: 8px 0 24px;
    max-width: 480px;
    margin: 0 auto;
}

/* Barra de progreso */
#mpa-app .mpa-analysis-bar-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

#mpa-app .mpa-analysis-bar {
    flex: 1;
    height: 4px;
    background: #f0f0f0;
    border-radius: 2px;
    overflow: hidden;
}

#mpa-app .mpa-analysis-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--wd-primary-color), #e85c9a);
    border-radius: 2px;
    width: 0%;
    transition: width 1.2s cubic-bezier(.4, 0, .2, 1);
}

#mpa-app .mpa-analysis-bar__pct {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--wd-primary-color);
    min-width: 32px;
    text-align: right;
}

/* Texto de estado */
#mpa-app .mpa-analysis-status {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 24px;
    min-height: 20px;
    transition: opacity .3s;
}

/* Skeleton cards */
#mpa-app .mpa-analysis-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#mpa-app .mpa-sk-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

#mpa-app .mpa-sk-block {
    border-radius: 8px;
    background: #f0f0f0;
    height: 20px;
    flex-shrink: 0;
}

#mpa-app .mpa-sk-block--sm   { width: 80px; }
#mpa-app .mpa-sk-block--md   { width: 140px; }
#mpa-app .mpa-sk-block--full { width: 100%; }
#mpa-app .mpa-sk-block--pill { width: 90px; height: 26px; border-radius: 20px; }

/* Shimmer animation */
#mpa-app .mpa-sk-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: mpa-shimmer 1.6s infinite;
}

@keyframes mpa-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

#mpa-app .mpa-analysis-disclaimer {
    font-size: 0.85rem;
    color: #bbb;
    margin: 20px 0 0;
    text-align: center;
}

/* Panel de cara no detectada */
#mpa-app .mpa-analysis-no-face {
    text-align: center;
    padding: 24px 0 8px;
}

#mpa-app .mpa-no-face-icon {
    font-size: 40px;
    margin-bottom: 12px;
    line-height: 1;
}

#mpa-app .mpa-analysis-no-face h3 {
    font-size: 17px;
    font-weight: 700;
    color: #222;
    margin: 0 0 8px;
}

#mpa-app .mpa-analysis-no-face p {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
    margin: 0 0 16px;
}

/* Auditoría w3.2 (rendimiento): se elimina aquí el bloque "TERM CARDS" completo
   (.mpa-term-grid, .mpa-term-card y sus variantes) — el diseño de cuadrícula de
   tarjetas cuadradas para tipo de piel/preocupaciones, superado por el de filas
   horizontales con foto (.mpa-tile--photo-row) desde w2.1.2. Sin ninguna
   referencia viva en JS/PHP/templates (confirmado antes de borrar); los
   comentarios que mencionan ".mpa-term-card--on" en otras partes de este archivo
   se refieren al plugin ORIGINAL v4.3.29 (una referencia histórica de diseño, no
   a este bloque) y se mantienen tal cual. */

/* Modal en modo solo-lectura (desde enlace "Más información" de la intro) */
#mpa-privacy-modal.mpa-modal--info-only .mpa-modal__footer { display: none !important; }

/* ── Paso 2: panel cámara — sin padding lateral extra, limpio ── */
#mpa-app .mpa-panel--cam {
    padding-bottom: 24px !important;
}

/* Header del paso cámara — menos margen inferior para acercar al visor */
#mpa-app .mpa-cam-step-head {
    margin-bottom: 12px;
}
#mpa-app .mpa-cam-step-head h2 {
    font-size: 22px;
    margin: 4px 0 4px;
}
#mpa-app .mpa-cam-step-head p {
    font-size: 0.85rem;
    color: #999;
    margin: 0;
}

/* Auditoría w3.2 (rendimiento): se elimina aquí la segunda definición de
   .mpa-cam-meta, .mpa-photo-progress y .mpa-photo-dot(--active/--done) —
   duplicaba (con display/align-items/justify-content/gap/colores idénticos)
   la definición de la sección "PASO 6 — CÁMARA PREMIUM" más arriba en este
   mismo archivo. Verificado por cascada que ningún valor visual cambia: los
   pocos valores que diferían (margin-bottom 14px vs 12px, min-height 24px
   vs 26px) quedaban de todos modos sobrescritos por el !important de la
   definición de arriba, así que esto de aquí era CSS muerto. */

/* ── Contador de análisis restantes — dentro de mpa-cam-meta ── */
.mpa-rate-counter {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--wd-primary-color);
    background: rgba(190,13,87,.07);
    border-radius: 20px;
    padding: 4px 10px;
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
}

/* ── Aviso de límite diario alcanzado ───────────────────────── */
.mpa-rate-limit-box {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff8e6;
    border: 1.5px solid #f5c842;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 20px;
}

.mpa-rate-limit-icon-wrap {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: #fef3c7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mpa-rate-limit-icon {
    font-size: 20px;
    line-height: 1;
}

.mpa-rate-limit-box strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 6px;
}

.mpa-rate-limit-box p {
    font-size: 0.85rem;
    color: #555;
    margin: 0 0 6px;
    line-height: 1.55;
}

.mpa-rate-limit-box p:last-child {
    margin-bottom: 0;
}

.mpa-rate-limit-hint {
    font-size: 0.85rem !important;
    color: #888 !important;
}

.mpa-rate-limit-hint a {
    color: var(--wd-primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Miniatura primera foto */
.mpa-photo1-thumb-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    letter-spacing: .05em;
    margin-bottom: 6px;
    text-align: center;
}
/* w5.9.40 — antes "✓" literal en wizard-app.php; mismo icono \f107 de la
   fuente del tema que el resto de checkmarks de este archivo. */
.mpa-photo1-thumb-label::after {
    content: "\f107";
    font-family: "woodmart-font";
    font-weight: 400;
    font-style: normal;
    margin-left: 4px;
}
.mpa-photo1-thumb {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    margin: 0 auto 14px;
    border: 2px solid #e0e0e0;
    opacity: .9;
}

/* ══ TOAST PRIMERA FOTO ══ */
.mpa-photo-toast {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .25s ease;
  padding: 20px;
  box-sizing: border-box;
}
.mpa-photo-toast--visible {
  opacity: 1;
}
.mpa-photo-toast__inner {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  transform: translateY(12px) scale(.97);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}
.mpa-photo-toast--visible .mpa-photo-toast__inner {
  transform: translateY(0) scale(1);
}
.mpa-photo-toast__check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wd-primary-color);
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  animation: mpa-check-pop .35s .1s cubic-bezier(.34,1.56,.64,1) both;
}
/* w5.9.40 — antes el "✓" iba como texto literal en mpa-wizard.js; ahora
   icono de la fuente del tema (mismo codepoint \f107 ya verificado en el
   "Perfil guardado correctamente" de este mismo archivo JS). */
.mpa-photo-toast__check::before {
  content: "\f107";
  font-family: "woodmart-font";
  font-weight: 400;
  font-style: normal;
}
@keyframes mpa-check-pop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0);      opacity: 1; }
}
.mpa-photo-toast__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: #111;
  letter-spacing: -.02em;
}
.mpa-photo-toast__body {
  margin: 0 0 20px;
  font-size: 0.85rem;
  color: #666;
  line-height: 1.6;
}
.mpa-photo-toast__tip {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  color: #999;
}
.mpa-photo-toast__btn {
  width: 100%;
  padding: 12px;
}

/* ════════════════════════════════════════════════════════════════════════
   SEMANA 2 (w2.0) — rediseño visual completo del wizard
   Barra de progreso persistente, transiciones ágiles entre pasos, iconos SVG
   de línea fina (sustituyen los emojis sueltos 🔒/✓/⚠️ anteriores), y la
   pantalla de reveal a pantalla completa del resultado (último paso, solo
   lectura — Paso 8 desde w2.1.4, ver bloque más abajo para la cabecera de
   progreso — título + barra fina — que sustituye al rail de icono+etiqueta).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Icono SVG inline genérico — hereda color del texto que lo envuelve ── */
#mpa-app .mpa-icon {
  display: inline-block !important;
  vertical-align: -2px !important;
  flex-shrink: 0 !important;
}

/* ── Aviso "1 análisis al día · no editable" bajo el eyebrow del Paso 1 ── */
#mpa-app .mpa-once-daily-note {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--mpa-text-3) !important;
  margin: 10px 0 0 !important;
  letter-spacing: .1px !important;
}
#mpa-app .mpa-once-daily-note .mpa-icon {
  color: var(--wd-primary-color) !important;
  opacity: .8 !important;
}

/* ── CABECERA DE PROGRESO (pasos 1-7) ────────────────────────────────────
   w2.1.4 — David: el rail de iconos+etiqueta (w2.1.1, arriba en versiones
   anteriores de este archivo) "no le gusta" — demasiado color primario y
   sensación de "1000 pasos" al ver los 8 iconos de golpe. Sustituido por UNA
   cabecera discreta: título corto del paso activo a la izquierda, y a la
   derecha "Paso X de Y" con una barra fina debajo. Monocroma a propósito
   (gris/grafito, sin rosa) — el color de marca queda reservado para los
   botones de acción. Se oculta por completo justo antes del reveal (paso 8)
   — ese es el "premio", no necesita seguir contando pasos. Ya no ofrece
   saltar de paso con un click (lo hacía el rail antiguo, --clickable); el
   botón "← Atrás" de cada paso cubre esa necesidad. */
#mpa-app .mpa-progress-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 22px 32px 0 !important;
  transition: opacity .2s ease, max-height .25s ease, padding .25s ease !important;
  max-height: 60px !important;
  overflow: hidden !important;
}
#mpa-app .mpa-progress-header--hidden {
  opacity: 0 !important;
  max-height: 0 !important;
  padding-top: 0 !important;
}
/* w2.1.6 — David: título de la cabecera de progreso en Goodly Light, más
   grande y en minúsculas — mismo tratamiento tipográfico que el resto de
   texto destacado del sitio (número de afinidad, tipo de piel analizado). */
#mpa-app .mpa-progress-header__title {
  font-family: 'Goodly Light' !important;
  font-size: 1.4rem !important;
  text-transform: lowercase !important;
  font-weight: 700 !important;
  color: var(--mpa-text) !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#mpa-app .mpa-progress-header__meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
#mpa-app .mpa-progress-header__count {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--mpa-text-3) !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}
/* w2.1.6 — David: la pista de la barra de progreso pasa a color de marca
   (antes gris, monocroma a propósito desde w2.1.4) — CSS aportado por David. */
#mpa-app .mpa-progress-header__bar {
  width: 130px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: var(--wd-primary-color) !important;
  overflow: hidden !important;
}
/* w2.1.6 — bug real encontrado al verificar el cambio de color de arriba: el
   "width: 0" de base llevaba !important, así que ganaba SIEMPRE al ancho en
   línea que pone mpa-wizard.js para animar el relleno (un !important en la
   hoja de estilos gana a un style en línea sin !important) — el relleno no
   llegaba a verse nunca, en ningún paso, desde que se creó este componente en
   w2.1.4. Con la pista gris de antes pasaba desapercibido (un relleno oscuro
   invisible sobre gris ya parecía "una barra fina"); con la pista en rosa de
   ahora se notaba de inmediato. Quitado el !important de este único valor
   para que el ancho en línea del JS pueda aplicarse. */
#mpa-app .mpa-progress-header__bar-fill {
  display: block !important;
  height: 100% !important;
  border-radius: 2px !important;
  background: var(--mpa-text) !important;
  width: 0;
  transition: width .35s var(--mpa-ease) !important;
}

@media (max-width: 599px) {
  #mpa-app .mpa-progress-header { padding: 18px 20px 0 !important; gap: 12px !important; }
  /* w2.1.6 — mismo tratamiento (Goodly Light, minúsculas) que en escritorio,
     con un tamaño algo menor para que quepa cómodo junto al "Paso X de Y". */
  #mpa-app .mpa-progress-header__title { font-size: 1.1rem !important; }
  #mpa-app .mpa-progress-header__bar { width: 84px !important; }
}

/* ── TRANSICIONES ÁGILES ENTRE PASOS ─────────────────────────────────────
   Ritmo rápido (200-300ms): sensación de fluidez y avance, no de espectáculo.
   Sustituye la animación mpaIn genérica solo para el contenedor de paso —
   mpaIn se mantiene para otros usos (mpa-progress-done-line, etc). */
@keyframes mpaStepIn {
  from { opacity: 0; transform: translateY(10px) scale(.995); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
#mpa-app .mpa-step--active {
  animation: mpaStepIn .22s cubic-bezier(.16,1,.3,1) both !important;
}

/* w2.1.7 — David: el estilo de selección vuelve a las tarjetas de ajuste de
   antes de esta reconstrucción (v4.3.29), que no llevaban ninguna animación
   al marcarse — solo cambio de fondo/borde/sombra. Sin keyframe de por
   medio; las transiciones ya declaradas en .mpa-chip/.mpa-tile (hover, etc.)
   bastan para que el cambio se sienta suave. */

/* ══════════════════════════════════════════════════════════════════════
   PASO 8 — REVEAL (resultado de solo lectura; numeración desde w2.1.4)
   Pantalla dedicada a pantalla completa: sin cabecera de wizard, sin barra
   de progreso, sin ningún control editable. El score se anima de 0 al valor
   real (ver animateRevealScore() en mpa-wizard.js) mientras las secciones
   del análisis entran en cascada.
   ══════════════════════════════════════════════════════════════════════ */
#mpa-app .mpa-step--reveal {
  animation: none !important; /* el reveal tiene su propia coreografía interna */
}
#mpa-app .mpa-reveal {
  /* w2.1.3 — David: "está todo pegado a los bordes" — antes casi sin padding
     horizontal (4px). Se iguala al resto del wizard (panel: 36px 32px 32px). */
  padding: 12px 28px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  animation: mpaStepIn .3s cubic-bezier(.16,1,.3,1) both !important;
}

#mpa-app .mpa-reveal__badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--wd-primary-color) !important;
  background: var(--mpa-brand-l) !important;
  padding: 6px 16px !important;
  border-radius: var(--mpa-r-pill) !important;
  margin-bottom: 28px !important;
  animation: mpaStepIn .3s cubic-bezier(.16,1,.3,1) both !important;
}

/* Anillo de precisión — animado en JS (stroke-dashoffset + contador) */
#mpa-app .mpa-reveal__score-wrap {
  position: relative !important;
  width: 128px !important;
  height: 128px !important;
  margin: 0 auto 24px !important;
  animation: mpaStepIn .35s cubic-bezier(.16,1,.3,1) both !important;
  animation-delay: .05s !important;
}
#mpa-app .mpa-reveal__ring {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
#mpa-app .mpa-reveal__ring circle {
  transition: stroke-dashoffset .1s linear !important;
}
#mpa-app .mpa-reveal__score-inner {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
#mpa-app .mpa-reveal__score-num {
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--mpa-text) !important;
  letter-spacing: -.5px !important;
  line-height: 1 !important;
}
#mpa-app .mpa-reveal__score-label {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--mpa-text-3) !important;
  margin-top: 4px !important;
}

#mpa-app .mpa-reveal__eyebrow {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--mpa-text-3) !important;
  margin: 0 0 6px !important;
  animation: mpaStepIn .3s cubic-bezier(.16,1,.3,1) both !important;
  animation-delay: .1s !important;
}
/* w2.1.3 — David: el tipo de piel pasa de texto plano a "chip" con foto en
   miniatura (misma imagen que ya usa el paso 3, pa_tipo-piel).
   w5.9.18 — David: pese al fix de w5.9.12 (que solo resolvió que este chip y
   la pill de zona de abajo compartieran fila, no el centrado en sí), el
   tipo de piel y la zona reactiva seguían sin quedar alineados uno bajo
   otro. Causa real: aunque ambas cajas SÍ estaban centradas como conjunto
   respecto al eje del `.mpa-reveal` padre, el chip de tipo de piel tenía la
   foto de 44px solo a la izquierda del texto (con padding asimétrico
   6px/20px) — nada equivalente a la derecha — así que el CENTRO ÓPTICO del
   texto ("Piel mixta") quedaba desplazado a la derecha respecto al centro
   real de la caja, mientras que la pill de zona (solo texto, sin icono) sí
   tenía su texto perfectamente centrado en la suya. Dos cajas centradas
   entre sí, pero con el contenido de cada una centrado en ejes distintos.
   Fix: grid de 3 columnas (foto | texto | hueco fantasma del mismo ancho que
   la foto) en vez de inline-flex — la 3ª columna, del mismo ancho que la
   foto, queda vacía (no hay 3er elemento en el HTML) y actúa como
   contrapeso, así el texto queda centrado en el ancho real de la pill y su
   eje coincide con el de la pill de zona de abajo. --mpa-reveal-skin-photo-size
   se define aquí y se reutiliza también en el breakpoint móvil (donde la
   foto encoge a 38px) para que columnas y foto cambien de tamaño a la vez. */
#mpa-app .mpa-reveal__skin-chip {
  --mpa-reveal-skin-photo-size: 44px;
  display: inline-grid !important;
  grid-template-columns: var(--mpa-reveal-skin-photo-size) 1fr var(--mpa-reveal-skin-photo-size) !important;
  align-items: center !important;
  column-gap: 12px !important;
  background: var(--mpa-surface) !important;
  border: 1px solid var(--mpa-border) !important;
  border-radius: var(--mpa-r-pill) !important;
  padding: 6px 16px !important;
  margin: 0 0 14px !important;
  animation: mpaStepIn .35s cubic-bezier(.16,1,.3,1) both !important;
  animation-delay: .12s !important;
}
#mpa-app .mpa-reveal__skin-photo {
  display: block !important;
  width: var(--mpa-reveal-skin-photo-size) !important;
  height: var(--mpa-reveal-skin-photo-size) !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: var(--mpa-white) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}
#mpa-app .mpa-reveal__skin-photo--empty {
  background: linear-gradient(135deg, var(--mpa-white), var(--mpa-border)) !important;
}
#mpa-app .mpa-reveal__skin-name {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--mpa-text) !important;
  letter-spacing: -.4px !important;
  line-height: 1.15 !important;
  text-align: center !important;
}
/* w5.9.12 — David: el chip de tipo de piel (.mpa-reveal__skin-chip, arriba,
   inline-flex) y esta pill de zona prioritaria (inline-block) son ambos
   elementos de línea — sin nada que los separe, fluían en la misma fila
   cuando cabían uno junto al otro, en vez de aparecer uno debajo del otro
   como pide el diseño. display:block + width:100% fuerza el salto de línea
   sin tocar el tamaño/aspecto propio de la pill (sigue envolviendo su
   contenido gracias a width:fit-content). */
#mpa-app .mpa-reveal__zone-flag {
  display: block !important;
  width: fit-content !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--wd-primary-color) !important;
  background: var(--mpa-brand-l) !important;
  padding: 5px 14px !important;
  border-radius: var(--mpa-r-pill) !important;
  margin-bottom: 16px !important;
}

/* w2.1.3 — David: las preocupaciones detectadas pasan al final del reveal
   (después del análisis, antes de guardar — ver reorden en wizard-app.php) y
   de pills de solo texto a chips con foto en miniatura, en grid de 2
   columnas ("de 2 en 2 donde entren"). */
#mpa-app .mpa-reveal__concerns-label {
  width: 100% !important;
  text-align: left !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--mpa-text-3) !important;
  margin: 0 0 8px !important;
  animation: mpaStepIn .3s cubic-bezier(.16,1,.3,1) both !important;
  animation-delay: .48s !important;
}
#mpa-app .mpa-reveal__concerns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  text-align: left !important;
  margin-bottom: 16px !important;
  animation: mpaStepIn .3s cubic-bezier(.16,1,.3,1) both !important;
  animation-delay: .5s !important;
}
#mpa-app .mpa-reveal-concern-chip {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--mpa-surface) !important;
  border: 1px solid var(--mpa-border) !important;
  border-radius: var(--mpa-r-lg) !important;
  padding: 8px 12px !important;
}
#mpa-app .mpa-reveal-concern-chip__photo {
  display: block !important;
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: var(--mpa-white) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}
#mpa-app .mpa-reveal-concern-chip__photo--empty {
  background: linear-gradient(135deg, var(--mpa-surface), var(--mpa-border)) !important;
}
#mpa-app .mpa-reveal-concern-chip__label {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--mpa-text-2) !important;
  line-height: 1.3 !important;
}
@media (max-width: 480px) {
  #mpa-app .mpa-reveal-concern-chip__photo { width: 34px !important; height: 34px !important; }
  #mpa-app .mpa-reveal-concern-chip__label { font-size: 0.85rem !important; }
}

/* Secciones del análisis — texto a la izquierda dentro del contenedor centrado,
   cada una entra en cascada (100ms de diferencia) tras el score. */
#mpa-app .mpa-reveal__sections {
  width: 100% !important;
  text-align: left !important;
  background: var(--mpa-surface) !important;
  border-radius: var(--mpa-r-tall) !important;
  padding: 20px 22px !important;
  margin-bottom: 16px !important;
}
#mpa-app .mpa-reveal-section {
  margin-bottom: 16px !important;
  animation: mpaStepIn .3s cubic-bezier(.16,1,.3,1) both !important;
}
#mpa-app .mpa-reveal-section:last-child {
  margin-bottom: 0 !important;
}
#mpa-app .mpa-reveal-section:nth-child(1) { animation-delay: .2s !important; }
#mpa-app .mpa-reveal-section:nth-child(2) { animation-delay: .3s !important; }
#mpa-app .mpa-reveal-section:nth-child(3) { animation-delay: .4s !important; }
#mpa-app .mpa-reveal-section__title {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--mpa-text-3) !important;
  margin: 0 0 5px !important;
  display: block !important;
}
#mpa-app .mpa-reveal-section__text {
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: var(--mpa-text) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Legacy — perfiles anteriores a w1.14 (párrafo + checklist) */
#mpa-app .mpa-reveal-advice {
  list-style: none !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#mpa-app .mpa-reveal-advice__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}
#mpa-app .mpa-reveal-advice__text {
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
  color: var(--mpa-text) !important;
  margin: 0 !important;
}
/* w5.9.40 — antes "✓" literal en mpa-wizard.js; icono de fuente del tema
   (mismo \f107 que .mpa-photo-toast__check más arriba), sin emoji de color. */
#mpa-app .mpa-reveal-advice__icon {
  display: inline-block !important;
  flex-shrink: 0 !important;
  width: 1.1em !important;
  line-height: 1.55 !important;
  color: var(--wd-primary-color) !important;
}
#mpa-app .mpa-reveal-advice__icon::before {
  content: "\f107";
  font-family: "woodmart-font";
  font-weight: 400;
  font-style: normal;
}

#mpa-app .mpa-reveal__incompat {
  display: flex !important;
  gap: 9px !important;
  align-items: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-radius: var(--mpa-r-md) !important;
  padding: 12px 14px !important;
  margin-bottom: 16px !important;
  animation: mpaStepIn .3s cubic-bezier(.16,1,.3,1) both !important;
  animation-delay: .45s !important;
}
#mpa-app .mpa-reveal-incompat__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
}
#mpa-app .mpa-reveal-incompat__text {
  font-size: 0.85rem !important;
  line-height: 1.55 !important;
  color: #78350f !important;
  margin: 0 !important;
}

/* w5.9.18 — David: la nota de derivación dermatológica ya no es una sección
   aparte — se fusiona dentro de este mismo cuadro (ver showRevealStep(),
   mpa-wizard.js). w5.9.25 — se elimina el modificador --danger que la pintaba
   de rojo: es informativa, nunca una alarma aparte, así que el cuadro se
   queda siempre en el mismo tono ámbar. */

#mpa-app .mpa-reveal .mpa-btn--primary {
  animation: mpaStepIn .3s cubic-bezier(.16,1,.3,1) both !important;
  /* w2.1.3 — reajustado: las preocupaciones (chips con foto) ahora entran justo
     antes, a .5s (ver .mpa-reveal__concerns más arriba) */
  animation-delay: .58s !important;
}

#mpa-app .mpa-reveal__disclaimer {
  font-size: 0.85rem !important;
  color: var(--mpa-text-3) !important;
  text-align: center !important;
  line-height: 1.6 !important;
  margin-top: 16px !important;
  animation: mpaStepIn .3s cubic-bezier(.16,1,.3,1) both !important;
  animation-delay: .64s !important;
}

@media (max-width: 480px) {
  #mpa-app .mpa-reveal__score-wrap { width: 112px !important; height: 112px !important; }
  #mpa-app .mpa-reveal__score-num  { font-size: 26px !important; }
  #mpa-app .mpa-reveal__skin-name  { font-size: 19px !important; }
  /* w5.9.18 — la variable (no solo width/height sueltos) para que las 2
     columnas laterales del grid de .mpa-reveal__skin-chip encojan a la vez
     que la foto — si solo se encogiera la foto, el hueco fantasma de la
     derecha se quedaría en 44px mientras la foto real ya sería 38px,
     rompiendo de nuevo la simetría que este mismo fix corrige. */
  #mpa-app .mpa-reveal__skin-chip  { --mpa-reveal-skin-photo-size: 38px; }
  #mpa-app .mpa-reveal__sections   { padding: 16px 18px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   SEMANA 2 (w2.1) — perfil dividido en pasos individuales + tarjetas grandes
   David: el Paso 1 original "no cambiaba nada, seguía siendo básicamente un
   formulario avanzado". Se separa en pasos de 1 pregunta (o grupo pequeño
   relacionado) cada uno, con tarjetas grandes en vez de chips pequeños donde
   la pregunta tiene pocas opciones — más cerca del wizard tipo Apple/Google
   que pedía. Los chips pequeños (.mpa-chip) se mantienen para listas más
   largas u opcionales (zona, alergias) donde una tarjeta grande no aporta.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tarjetas grandes (.mpa-tile) ── */
#mpa-app .mpa-tiles {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
#mpa-app .mpa-tiles--2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
#mpa-app .mpa-tiles--age,
#mpa-app .mpa-tiles--wrap {
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

#mpa-app .mpa-tile {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: var(--mpa-white) !important;
  border: 1.5px solid var(--mpa-border) !important;
  border-radius: var(--mpa-r-lg) !important;
  padding: 16px 18px !important;
  cursor: pointer !important;
  transition: all .15s var(--mpa-ease) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--mpa-text) !important;
  text-align: left !important;
  width: 100% !important;
}
/* Tarjetas de edad / preocupación principal — más compactas, en fila cuando caben */
#mpa-app .mpa-tiles--age .mpa-tile,
#mpa-app .mpa-tiles--wrap .mpa-tile {
  width: auto !important;
  flex: 1 1 auto !important;
  padding: 13px 20px !important;
  justify-content: center !important;
  border-radius: var(--mpa-r-pill) !important;
  font-size: 0.9rem !important;
}
#mpa-app .mpa-tile--2col,
#mpa-app .mpa-tiles--2col .mpa-tile {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 8px !important;
  padding: 22px 16px !important;
}
#mpa-app .mpa-tile--row {
  justify-content: flex-start !important;
}
#mpa-app .mpa-tile:hover {
  border-color: rgba(190, 13, 87, .35) !important;
  background: var(--mpa-brand-l) !important;
}
/* w2.1.7 — David: el estilo que recordaba es el de las tarjetas de ajuste
   (.mpa-term-card--on) de la versión anterior a esta reconstrucción
   (v4.3.29) — fondo rosa muy claro + borde/texto en color de marca + halo
   suave, sin relleno sólido ni elevación. Restaurado tal cual como estilo
   único de selección en todo el wizard. */
#mpa-app .mpa-tile--on {
  background: #fdf0f5 !important;
  border-color: var(--wd-primary-color) !important;
  color: var(--wd-primary-color) !important;
  box-shadow: 0 0 0 3px rgba(190, 13, 87, .1) !important;
}
#mpa-app .mpa-tile--on:hover {
  background: #fdf0f5 !important;
  border-color: var(--wd-primary-color) !important;
}
#mpa-app .mpa-tile__icon {
  flex-shrink: 0 !important;
  color: var(--mpa-text-2) !important;
  transition: color .15s !important;
}
#mpa-app .mpa-tile--on .mpa-tile__icon {
  color: var(--wd-primary-color) !important;
}
/* w2.1.8 — David: mismo tratamiento tipográfico (0.85rem/600) para la
   etiqueta de CUALQUIER tarjeta, no solo las pills con foto — incluye las de
   icono simple como "Hombre"/"Mujer". CSS exacto aportado por David. */
#mpa-app .mpa-tile__label {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* ── Chips horizontales con foto (.mpa-tile--photo-row) — paso "tipo de
   piel" (w2.1.2, sustituye el grid de tarjetas cuadradas de w2.1.1) ──
   David: quiere volver a filas horizontales, con la foto en miniatura a la
   izquierda y el nombre + una descripción corta (1-3 líneas) a la derecha —
   reutiliza las mismas fotos que ya sube en WooCommerce → Mongo Product
   Affinity → Imágenes, y el texto es el campo nativo de descripción del
   término de WordPress (editable en Productos → Atributos → pa_tipo-piel).
   Si un término no tiene foto (mpa-tile--photo-empty) o descripción, se
   muestra un placeholder neutro / un texto genérico en su lugar (ver JS). */
#mpa-app .mpa-tiles--photo-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
/* w2.1.8 — David: la foto SIEMPRE a la izquierda y el título SIEMPRE
   alineado a la izquierda en las pills de tipo de piel/preocupación —
   se hacen explícitos flex-direction/justify-content (antes implícitos,
   solo por el orden del HTML) para que ninguna regla de más arriba en la
   cascada (p.ej. la de tarjetas 2 columnas centradas, .mpa-tile--2col) pueda
   alterar el orden o el centrado por accidente. */
#mpa-app .mpa-tile--photo-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 12px 16px 12px 12px !important;
  text-align: left !important;
}
/* w2.1.3 — David: foto más grande y en esquinas redondeadas (antes círculo
   56px), y descripción más ligera visualmente (peso 300, antes 500) — mismos
   valores para el paso "tipo de piel" (fila completa) y el nuevo grid de
   "preocupación principal" (2 columnas, sin descripción), ambos comparten
   estas reglas por la clase .mpa-tile--photo-row. */
#mpa-app .mpa-tile--photo-row .mpa-tile__photo {
  display: block !important;
  flex-shrink: 0 !important;
  width: 70px !important;
  height: 70px !important;
  border-radius: 12px !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: var(--mpa-surface) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}
#mpa-app .mpa-tile--photo-row.mpa-tile--photo-empty .mpa-tile__photo {
  background: linear-gradient(135deg, var(--mpa-surface), var(--mpa-border)) !important;
}
#mpa-app .mpa-tile--photo-row .mpa-tile__text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 2px !important;
  min-width: 0 !important;
}
/* w2.1.8 — mismo tamaño/peso que el resto de etiquetas de tarjeta (ver la
   regla general de .mpa-tile__label más arriba) — antes esta versión más
   específica (0.95rem/700) ganaba y dejaba la de tipo de piel/preocupación
   más grande y más gruesa que el resto. */
#mpa-app .mpa-tile--photo-row .mpa-tile__label {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
#mpa-app .mpa-tile--photo-row .mpa-tile__desc {
  font-size: 0.85rem !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  color: var(--mpa-text-2) !important;
  text-transform: initial !important;
}
/* w2.1.7 — con el nuevo fondo rosa muy claro (estilo de las tarjetas de
   ajuste de antes de esta reconstrucción), un aro sutil en color de marca
   marca la foto sin necesitar el contraste fuerte de un aro blanco o negro.
   La descripción se deja en su gris por defecto — ya contrasta bien sobre
   rosa muy claro, y el propio texto del plugin original no tenía descripción
   con la que comparar un tratamiento distinto para el estado seleccionado. */
#mpa-app .mpa-tile--photo-row.mpa-tile--on .mpa-tile__photo {
  outline: 2px solid rgba(190, 13, 87, .3) !important;
  outline-offset: -2px !important;
}
@media (max-width: 599px) {
  #mpa-app .mpa-tile--photo-row { padding: 10px 14px 10px 10px !important; gap: 12px !important; }
  #mpa-app .mpa-tile--photo-row .mpa-tile__photo { width: 56px !important; height: 56px !important; }
  #mpa-app .mpa-tile--photo-row .mpa-tile__label { font-size: 0.85rem !important; }
  #mpa-app .mpa-tile--photo-row .mpa-tile__desc { font-size: 0.85rem !important; }
}

/* ── Grid de 2 columnas con foto — paso "preocupación principal" (w2.1.3) ──
   Reutiliza el mismo .mpa-tile--photo-row (foto + nombre) que el tipo de
   piel, pero SIN descripción y en cuadrícula de 2 columnas en escritorio y
   tablet — David: "como no tienen explicación, se pueden poner de 2 en 2 por
   fila en ordenador y tablet y pasar a uno en móvil". */
#mpa-app .mpa-tiles--photo-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
@media (max-width: 599px) {
  #mpa-app .mpa-tiles--photo-grid { grid-template-columns: 1fr !important; }
}

/* ── Navegación atrás/continuar de cada paso individual ──
   w2.1.2 — David: quiere Atrás/Continuar igualados al 50%, no el ghost
   encogido y el primario ocupando el resto. Ambos botones llevan ahora el
   mismo flex-basis — cualquier estilo inline "flex:1"/"width:100%" que
   quedara en plantillas antiguas queda anulado por el !important de aquí,
   así que este es el único punto de control del ancho de estos botones. */
#mpa-app .mpa-step-nav {
  display: flex !important;
  gap: 12px !important;
  margin-top: 32px !important;
  align-items: stretch !important;
}
#mpa-app .mpa-step-nav .mpa-btn {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
}
#mpa-app .mpa-step-nav .mpa-btn--ghost {
  background: none !important;
  border: 1.5px solid var(--mpa-border) !important;
  color: var(--mpa-text-2) !important;
  border-radius: var(--mpa-r-pill) !important;
  padding: 0 22px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: border-color .15s, color .15s !important;
}
#mpa-app .mpa-step-nav .mpa-btn--ghost:hover {
  border-color: var(--wd-primary-color) !important;
  color: var(--wd-primary-color) !important;
}

/* Un solo bloque de pregunta por pantalla — un poco más de aire vertical
   que el viejo formulario de una sola pantalla, coherente con "fluye como
   la seda": cada paso respira, no compite con las demás preguntas. */
#mpa-app .mpa-step--solo .mpa-step-head {
  margin-bottom: 32px !important;
}

@media (max-width: 599px) {
  #mpa-app .mpa-tiles--2col { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  #mpa-app .mpa-tile { padding: 14px 16px !important; }
  #mpa-app .mpa-tile--2col, #mpa-app .mpa-tiles--2col .mpa-tile { padding: 18px 12px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   SEMANA 2 (w2.1) — cámara: visor vertical + guía de encuadre facial +
   botón de captura dentro del visor en móvil.
   David: "el área de la foto, más vertical y menos horizontal... con el
   área marcada donde tiene que ir el rostro... en móvil, además del botón
   de capturar debajo, que aparezca un botón DENTRO de este área".
   ══════════════════════════════════════════════════════════════════════ */

/* Visor — de 16:10 (horizontal) a 3:4 (vertical) también en escritorio,
   con más profundidad (4:5.2) en móvil para dar más espacio de encuadre.
   w2.1.3 — David: en escritorio que sea más ancho (antes 420px, igual que en
   móvil) — se ensancha aquí y se recupera el ancho compacto original solo
   para móvil en el media query de más abajo. */
#mpa-app .mpa-cam-frame {
    aspect-ratio: 3/4 !important;
    max-width: 560px !important;
}
#mpa-app .mpa-cam-preview-frame {
    aspect-ratio: 3/4 !important;
    max-width: 560px !important;
}
#mpa-app .mpa-cam-guide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
}

/* w3.12 — David: quitar el botón blanco de captura superpuesto sobre el visor,
   en todos los tamaños. Existía desde w2.1 (visible solo en móvil al
   principio, ampliado a tablet/escritorio en w2.1.10) — se retira del todo:
   el elemento #mpa-capture-btn-inframe ya no existe en wizard-app.php, así
   que estas reglas (.mpa-cam-btn-capture--inframe, .mpa-cam-shutter--lg) ya
   no tienen a qué aplicar. En su lugar, tocar el propio visor dispara la foto
   en tablet/móvil (ver bindCamera() en mpa-wizard.js) — el botón "Capturar"
   grande de debajo del visor sigue disponible en los 3 tamaños. */

@media (max-width: 599px) {
    #mpa-app .mpa-cam-frame,
    #mpa-app .mpa-cam-preview-frame {
        aspect-ratio: 3/4.3 !important;
        /* w2.1.3 — el ensanchado de escritorio (560px) es solo para escritorio; en
           móvil se mantiene el ancho compacto original. */
        max-width: 420px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   w2.1.9 — David: "el área de cámara en ordenadores más horizontal/ancha,
   en tablets cuadrada tirando a alta, en móviles más alta que ancha".
   Antes el visor era 3/4 (vertical) igual en escritorio y en tablet — solo
   cambiaba en <599px. Se reescribe explícitamente para los 3 rangos, en
   cascada DESPUÉS del bloque w2.1 de arriba para ganar por orden (misma
   especificidad, mismos selectores). El breakpoint de tablet (600–1023px)
   es nuevo en este archivo — el resto del wizard solo usa el corte a
   599px, así que se documenta aquí explícitamente.
   ══════════════════════════════════════════════════════════════════════ */

/* Escritorio (≥1024px): horizontal y ancho — antes vertical (3/4).
   w3.12 — David: un poco más alta. 16/9 (w2.1.9) dejaba el visor bastante
   corto de alto para encuadrar bien una cara a esta anchura; pasa a 4/3 —
   sigue siendo claramente horizontal/ancho (no vuelve al 3/4 vertical de
   antes de w2.1.9), pero con más margen vertical real.
   Bug real encontrado de paso: el max-width:720px de aquí nunca llegaba a
   aplicarse en escritorio — el padre real, #mpa-capture-wrap (regla base,
   sin media query, más arriba en este archivo), lo capaba a max-width:600px
   con !important desde antes de w2.1.9, así que el visor de escritorio
   llevaba toda esta ronda de breakpoints (w2.1.9 en adelante) renderizando
   a 600px de ancho como techo real, no los 720px que el propio código decía
   pretender. Corregido aquí mismo, liberando también el padre en este
   breakpoint — igual que ya se hacía para móvil más abajo. */
@media (min-width: 1024px) {
    #mpa-app .mpa-cam-step-head,
    .mpa-cam-meta,
    #mpa-app #mpa-capture-wrap,
    #mpa-app #mpa-preview-wrap,
    #mpa-app .mpa-cam-footer,
    #mpa-app #mpa-rate-limit-notice,
    #mpa-app #mpa-photo1-thumb-wrap {
        max-width: 760px !important;
    }
    #mpa-app .mpa-cam-frame,
    #mpa-app .mpa-cam-preview-frame {
        aspect-ratio: 4/3 !important;
        max-width: 720px !important;
    }
}

/* Tablet (600–1023px): casi cuadrada, tirando a alta. */
@media (min-width: 600px) and (max-width: 1023px) {
    #mpa-app .mpa-cam-frame,
    #mpa-app .mpa-cam-preview-frame {
        aspect-ratio: 4/5 !important;
        max-width: 480px !important;
    }
}

/* Móvil (<600px): más alta que ancha — se mantiene el 3/4.3 ya existente
   del bloque de arriba, no hace falta repetirlo aquí. */

/* w3.12 — cursor de mano en tablet/móvil como pista visual de que se puede
   tocar el visor para disparar la foto (ver bindCamera() en mpa-wizard.js,
   mismo corte de <1024px). En escritorio se deja el cursor por defecto —
   ahí tocar el visor no dispara nada, solo el botón "Capturar" de debajo. */
@media (max-width: 1023px) {
    #mpa-app #mpa-capture-wrap .mpa-cam-frame {
        cursor: pointer;
    }
}