/**
 * Fourad My Account - estilos front
 * 4ADDICTIC SL
 *
 * Todos los colores llegan por variables CSS inyectadas desde el modulo
 * (hookDisplayHeader). Este archivo no contiene funciones CSS modernas
 * (color-mix, oklch...) para mantener compatibilidad con navegadores antiguos.
 */

/* IMPORTANTE: los valores por defecto van en :root, NUNCA sobre .fma-dashboard.
   Si se declaran sobre el propio elemento, tapan a las variables que inyecta el
   modulo (que llegan por herencia desde :root) y la paleta del back-office deja
   de tener efecto. */
:root {
  --fma-primary: #f5a800;
  --fma-primary-dark: #3b3b3b;
  --fma-primary-rgb: 245, 168, 0;
  --fma-primary-soft: #fef8eb;
  --fma-primary-line: #fce1a8;
  --fma-on-primary: #172033;
  --fma-accent: #f5a800;
  --fma-accent-soft: #fef5e0;
  --fma-on-accent: #172033;
  --fma-ink: #16181d;
  --fma-muted: #6b7280;
  --fma-border: #e6e4df;
  --fma-surface: #ffffff;
  --fma-panel: #1c1f26;
  --fma-on-panel: #ffffff;
  --fma-btn-bg: #f5a800;
  --fma-btn-text: #172033;
  --fma-btn-bg-hover: #3b3b3b;
  --fma-btn-text-hover: #ffffff;
  --fma-radius: 18px;
  --fma-radius-sm: 11px;
  --fma-radius-xs: 7px;
  --fma-radius-pill: 999px;
  --fma-font: inherit;
  /* v2.6.3: marca para el respaldo de carga de hookDisplayHeader */
  --fma-css-loaded: 1;
}

.fma-dashboard {
  width: 100%;
  margin: 0 0 32px;
  font-family: var(--fma-font);
  color: var(--fma-ink);
  box-sizing: border-box;
}

.fma-dashboard *,
.fma-dashboard *::before,
.fma-dashboard *::after {
  box-sizing: border-box;
}

/* ------------------------------- Cabecera ------------------------------- */

.fma-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
  padding: 32px 36px;
  border-radius: var(--fma-radius);
  background: var(--fma-primary);
  background: linear-gradient(135deg, var(--fma-primary) 0%, var(--fma-primary-dark) 100%);
  color: var(--fma-on-primary);
  box-shadow: 0 18px 42px rgba(var(--fma-primary-rgb), 0.18);
}

.fma-hero__content {
  position: relative;
  z-index: 2;
  max-width: 660px;
}

.fma-eyebrow,
.fma-kicker {
  display: block;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fma-eyebrow {
  opacity: 0.75;
  margin-bottom: 14px;
}

.fma-hero__greet {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fma-avatar {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: var(--fma-radius-pill, 999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.32);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.fma-hero h2 {
  color: inherit;
  font-size: 28px;
  line-height: 1.15;
  margin: 0;
  font-weight: 800;
}

.fma-hero__subtitle {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 600;
  opacity: 0.92;
}

.fma-hero__text {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  opacity: 0.82;
  max-width: 560px;
}

.fma-hero__art {
  position: relative;
  z-index: 1;
  flex: 0 0 160px;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fma-hero__art svg {
  position: relative;
  z-index: 2;
  width: 108px;
  height: 108px;
  color: currentColor;
  opacity: 0.85;
}

.fma-hero__orb {
  position: absolute;
  border-radius: var(--fma-radius-pill, 999px);
  background: rgba(255, 255, 255, 0.10);
}

.fma-hero__orb--one { width: 180px; height: 180px; }
.fma-hero__orb--two { width: 104px; height: 104px; right: -28px; top: -18px; background: rgba(255, 255, 255, 0.08); }

/* ----------------------------- Bloque PRO ------------------------------ */

.fma-pro {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid var(--fma-border);
  border-left: 4px solid var(--fma-accent);
  border-radius: var(--fma-radius-sm);
  background: var(--fma-surface);
}

.fma-pro__icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: var(--fma-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fma-accent-soft);
  color: var(--fma-accent);
}

.fma-pro__icon svg { width: 24px; height: 24px; }

.fma-pro__badge {
  display: inline-block;
  margin-bottom: 5px;
  padding: 3px 9px;
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-accent);
  color: var(--fma-on-accent);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.fma-pro strong { display: block; font-size: 15px; color: var(--fma-ink); }
.fma-pro p { margin: 3px 0 0; color: var(--fma-muted); font-size: 13px; }

/* ----------------------------- Estadisticas ---------------------------- */

.fma-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.fma-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 90px;
  padding: 16px 18px;
  border: 1px solid var(--fma-border);
  border-radius: var(--fma-radius-sm);
  background: var(--fma-surface);
  color: inherit;
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

a.fma-stat:hover,
a.fma-stat:focus {
  transform: translateY(-2px);
  border-color: var(--fma-primary-line);
  box-shadow: 0 12px 26px rgba(23, 32, 51, 0.08);
}

.fma-stat__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--fma-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fma-primary-soft);
  color: var(--fma-primary);
}

.fma-stat__icon svg { width: 22px; height: 22px; }
.fma-stat__body { min-width: 0; }
.fma-stat small { display: block; color: var(--fma-muted); font-size: 12px; margin-bottom: 2px; }
.fma-stat strong { display: block; color: var(--fma-ink); font-size: 19px; line-height: 1.2; font-weight: 800; }

/* -------------------------- Aviso de seguridad ------------------------- */

.fma-security {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid var(--fma-border);
  border-radius: var(--fma-radius-sm);
  background: var(--fma-primary-soft);
  color: var(--fma-muted);
  font-size: 13px;
  line-height: 1.5;
}

.fma-security svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--fma-primary);
}

.fma-security strong { color: var(--fma-ink); }
.fma-security a { color: var(--fma-primary); text-decoration: underline; }

/* ---------------------------- Ultimo pedido ---------------------------- */

.fma-last-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
  padding: 20px 24px;
  border-radius: var(--fma-radius-sm);
  background: var(--fma-panel);
  color: var(--fma-on-panel);
}

.fma-last-order .fma-kicker { opacity: 0.6; margin-bottom: 6px; }
.fma-last-order strong { font-size: 17px; }
.fma-last-order p { margin: 4px 0 0; opacity: 0.72; font-size: 13px; }

.fma-state {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 11px;
  border-radius: var(--fma-radius-pill, 999px);
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  font-size: 11.5px;
  font-weight: 700;
}

.fma-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--fma-radius-pill, 999px);
  color: inherit !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.18s ease;
}

.fma-ghost-btn:hover,
.fma-ghost-btn:focus { background: rgba(255, 255, 255, 0.12); }

/* ------------------------------- Tarjetas ------------------------------ */

.fma-section-heading { margin: 30px 0 14px; }
.fma-section-heading .fma-kicker { color: var(--fma-primary); margin-bottom: 7px; }
.fma-section-heading h3 { color: var(--fma-ink); font-size: 21px; line-height: 1.25; margin: 0; font-weight: 800; }

.fma-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.fma-dashboard.fma-cols-3 .fma-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.fma-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 108px;
  padding: 18px 20px;
  border: 1px solid var(--fma-border);
  border-radius: var(--fma-radius-sm);
  background: var(--fma-surface);
  color: inherit !important;
  text-decoration: none !important;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.fma-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -52px;
  width: 108px;
  height: 108px;
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-primary-soft);
  transition: transform 0.22s ease;
}

.fma-card:hover,
.fma-card:focus {
  transform: translateY(-3px);
  border-color: var(--fma-primary-line);
  box-shadow: 0 14px 30px rgba(23, 32, 51, 0.08);
}

.fma-card:hover::after { transform: scale(1.16); }

.fma-card__icon {
  position: relative;
  z-index: 2;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: var(--fma-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fma-primary-soft);
  color: var(--fma-primary);
}

.fma-card__icon svg { width: 24px; height: 24px; }
.fma-card__body { position: relative; z-index: 2; flex: 1; min-width: 0; }
.fma-card__body strong { display: block; color: var(--fma-ink); font-size: 15px; margin-bottom: 4px; font-weight: 800; }
.fma-card__body small { display: block; color: var(--fma-muted); font-size: 12.5px; line-height: 1.45; }

.fma-card__arrow {
  position: relative;
  z-index: 2;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--fma-border);
  border-radius: var(--fma-radius-pill, 999px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fma-surface);
  color: var(--fma-primary);
  font-size: 16px;
  transition: transform 0.18s ease;
}

.fma-card:hover .fma-card__arrow { transform: translateX(3px); }

/* -------------------------------- Ayuda -------------------------------- */

.fma-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 20px 24px;
  border: 1px dashed var(--fma-primary-line);
  border-radius: var(--fma-radius-sm);
  background: var(--fma-primary-soft);
}

.fma-help strong { display: block; color: var(--fma-ink); font-size: 15px; }
.fma-help p { margin: 4px 0 0; color: var(--fma-muted); font-size: 13px; }

.fma-solid-btn {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 11px 20px;
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-primary);
  color: var(--fma-on-primary) !important;
  text-decoration: none !important;
  font-size: 13.5px;
  font-weight: 700;
  transition: background 0.18s ease, transform 0.18s ease;
}

.fma-solid-btn:hover,
.fma-solid-btn:focus { background: var(--fma-primary-dark); transform: translateY(-1px); }

/* --------------------- Boton de vuelta al panel ------------------------ */

.fma-back-wrap { width: 100%; margin: 0 0 18px; }

.fma-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--fma-border, #e6eaf1);
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-surface, #fff);
  color: var(--fma-ink, #172033) !important;
  text-decoration: none !important;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(23, 32, 51, 0.06);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.fma-back:hover,
.fma-back:focus {
  color: var(--fma-primary, #1f6feb) !important;
  border-color: var(--fma-primary-line, #b6d0f8);
  box-shadow: 0 10px 24px rgba(23, 32, 51, 0.10);
  transform: translateY(-1px);
}

.fma-back__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-primary-soft, #f2f7fe);
  color: var(--fma-primary, #1f6feb);
  font-size: 16px;
  font-weight: 700;
}

/* --------------------- Integracion con el tema ------------------------- */

/* Oculta la cabecera duplicada de "Su cuenta" cuando el panel esta activo. */
body.fma-ready.page-my-account #main .page-header,
body.fma-ready#my-account #main .page-header {
  display: none;
}

/* Oculta los accesos nativos, tanto si el tema los saca en .links como si
   los renderiza como columnas Bootstrap sueltas. Solo cuando esta activada
   la opcion "Ocultar los accesos nativos del tema" (clase fma-hide-native). */
body.fma-hide-native.fma-ready #content > .links,
body.fma-hide-native.fma-ready #content > .row > .links > a,
body.fma-hide-native.fma-ready #content > .row > .links > a[class*="col-"],
body.fma-hide-native.fma-ready #content .links > a[id$="-link"],
body.fma-hide-native.fma-ready .fma-native-links {
  display: none !important;
}

body.fma-ready #content > .row > .links > .fma-dashboard,
body.fma-ready #content .links > .fma-dashboard {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  clear: both;
}

/* Coherencia visual en el resto de subpaginas de la cuenta. */
body.fma-account-page .table { border-radius: var(--fma-radius-xs, 7px); overflow: hidden; }

body.fma-account-page .btn-primary,
body.fma-account-page .btn.btn-primary {
  background: var(--fma-primary, #1f6feb);
  border-color: var(--fma-primary, #1f6feb);
  border-radius: var(--fma-radius-xs, 7px);
}

body.fma-account-page .btn-primary:hover,
body.fma-account-page .btn.btn-primary:hover {
  background: var(--fma-primary-dark, #17529f);
  border-color: var(--fma-primary-dark, #17529f);
}

/* --------------------------- Desistimiento ----------------------------- */

.fma-withdrawal { font-family: var(--fma-font, inherit); color: var(--fma-ink, #172033); }
.fma-withdrawal .fma-intro { color: var(--fma-muted, #6f7787); font-size: 14px; line-height: 1.6; }

.fma-panel {
  padding: 20px 22px;
  margin-bottom: 18px;
  border: 1px solid var(--fma-border, #e6eaf1);
  border-radius: var(--fma-radius-sm, 11px);
  background: var(--fma-surface, #fff);
}

.fma-panel h4 { margin: 0 0 12px; font-size: 16px; font-weight: 800; color: var(--fma-ink, #172033); }

.fma-order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.fma-order-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--fma-border, #e6eaf1);
  border-radius: var(--fma-radius-xs, 7px);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.fma-order-option:hover { border-color: var(--fma-primary-line, #b6d0f8); background: var(--fma-primary-soft, #f2f7fe); }
.fma-order-option input { margin: 0; flex: none; }
.fma-order-option__main { flex: 1; min-width: 0; }
.fma-order-option strong { display: block; font-size: 14.5px; }
.fma-order-option small { display: block; color: var(--fma-muted, #6f7787); font-size: 12.5px; margin-top: 2px; }

.fma-badge {
  flex: none;
  padding: 3px 10px;
  border-radius: var(--fma-radius-pill, 999px);
  font-size: 11px;
  font-weight: 700;
  background: var(--fma-accent-soft, #e6f8f2);
  color: var(--fma-accent, #0fae7e);
}

.fma-badge--off { background: #f1f2f5; color: #7a8396; }

.fma-product-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--fma-border, #e6eaf1);
  border-radius: var(--fma-radius-xs, 7px);
  margin-bottom: 8px;
}

.fma-product-row__name { flex: 1; min-width: 0; font-size: 14px; }
.fma-product-row__name small { display: block; color: var(--fma-muted, #6f7787); font-size: 12px; }
.fma-product-row__qty { flex: none; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fma-muted, #6f7787); }
.fma-product-row__qty input { width: 68px; }
.fma-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

@media (max-width: 767px) {
  .fma-dashboard { margin-bottom: 22px; }
  .fma-hero { padding: 24px 20px; }
  .fma-hero h2 { font-size: 23px; }
  .fma-hero__subtitle { font-size: 15px; }
  .fma-hero__text { font-size: 13.5px; }
  .fma-hero__art { flex-basis: 84px; width: 84px; height: 110px; }
  .fma-hero__art svg { width: 70px; height: 70px; }
  .fma-hero__orb--one { width: 112px; height: 112px; }
  .fma-stats { grid-template-columns: 1fr; gap: 10px; }
  .fma-stat { min-height: 76px; padding: 14px; }
  .fma-grid,
  .fma-dashboard.fma-cols-3 .fma-grid { grid-template-columns: 1fr; gap: 10px; }
  .fma-card { min-height: 92px; padding: 16px; }
  .fma-last-order,
  .fma-help { flex-direction: column; align-items: flex-start; }
  .fma-ghost-btn,
  .fma-solid-btn { width: 100%; justify-content: center; }
  .fma-section-heading { margin-top: 24px; }
  .fma-section-heading h3 { font-size: 19px; }
}

@media (max-width: 420px) {
  .fma-hero__art { display: none; }
  .fma-hero__content { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .fma-card,
  .fma-stat,
  .fma-back,
  .fma-solid-btn,
  .fma-card__arrow,
  .fma-card::after { transition: none !important; }
  .fma-card:hover,
  .fma-stat:hover,
  .fma-back:hover { transform: none !important; }
}

@media print {
  .fma-hero__art,
  .fma-card__arrow,
  .fma-back-wrap { display: none !important; }
  .fma-hero { box-shadow: none; }
}

/* =======================================================================
 * v1.1.0 - Historial visual, linea de progreso, widget de cabecera y
 * homogeneizacion de las subpaginas de la cuenta.
 * ===================================================================== */

/* ------------------- Etiqueta de estado (compartida) ------------------- */

.fma-obadge {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: var(--fma-radius-pill, 999px);
  font-size: 11px;
  line-height: 1.5;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--fma-accent-soft, #e6f8f2);
  color: var(--fma-accent, #0fae7e);
  white-space: nowrap;
}

/* ---------------- Historial de pedidos como tarjetas ------------------- */

.fma-olist {
  display: grid;
  gap: 14px;
  margin: 0 0 26px;
}

.fma-ocard {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border: 1px solid var(--fma-border, #e6eaf1);
  border-radius: var(--fma-radius-sm, 11px);
  background: var(--fma-surface, #fff);
  box-shadow: 0 8px 22px rgba(23, 32, 51, 0.05);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.fma-ocard:hover {
  border-color: var(--fma-primary-line, #b6d0f8);
  box-shadow: 0 12px 28px rgba(23, 32, 51, 0.09);
}

.fma-ocard__main { flex: 1; min-width: 0; }

.fma-ocard__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.fma-ocard__ref { font-size: 15.5px; font-weight: 800; color: var(--fma-ink, #172033); }

.fma-ocard__addr {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--fma-muted, #6f7787);
}

.fma-ocard__meta {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fma-ink, #172033);
}

.fma-ocard__thumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.fma-ocard__thumbs img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid var(--fma-border, #e6eaf1);
  border-radius: var(--fma-radius-xs, 7px);
  background: #fff;
  padding: 3px;
}

.fma-ocard__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px dashed var(--fma-border, #e6eaf1);
  border-radius: var(--fma-radius-xs, 7px);
  color: var(--fma-muted, #6f7787);
  font-size: 13px;
  font-weight: 700;
}

.fma-ocard__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  min-width: 190px;
}

.fma-ocard__reorder { justify-content: center; }

.fma-ocard__detail,
.fma-ocard__invoice {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--fma-primary, #1f6feb) !important;
  text-decoration: none !important;
}

.fma-ocard__detail:hover,
.fma-ocard__invoice:hover { text-decoration: underline !important; }

/* Cuando la version visual esta lista, la tabla nativa se retira. */
body.fma-orders-ready.page-history #content .table-responsive,
body.fma-orders-ready.page-history #content table.table,
body.fma-orders-ready#history #content .table-responsive,
body.fma-orders-ready#history #content table.table {
  display: none !important;
}

/* --------------------- Linea de progreso del pedido -------------------- */

.fma-progress {
  margin: 0 0 24px;
  padding: 22px 24px;
  border: 1px solid var(--fma-border, #e6eaf1);
  border-radius: var(--fma-radius-sm, 11px);
  background: var(--fma-surface, #fff);
  box-shadow: 0 10px 26px rgba(23, 32, 51, 0.06);
}

.fma-progress__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

.fma-progress__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.fma-progress__ref { font-size: 17px; font-weight: 800; color: var(--fma-ink, #172033); }

.fma-progress__meta {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--fma-muted, #6f7787);
  font-weight: 600;
}

.fma-steps {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 22px 0 4px;
  padding: 0;
}

.fma-step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  min-width: 0;
}

/* Conector entre pasos */
.fma-step::before {
  content: "";
  position: absolute;
  top: 21px;
  left: -50%;
  width: 100%;
  height: 3px;
  background: var(--fma-border, #e6eaf1);
  z-index: 1;
}

.fma-step:first-child::before { display: none; }

.fma-step--done::before,
.fma-step--active::before { background: var(--fma-accent, #0fae7e); }

.fma-step__icon {
  position: relative;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: var(--fma-radius-pill, 999px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--fma-border, #e6eaf1);
  background: var(--fma-surface, #fff);
  color: var(--fma-muted, #9aa2b1);
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.fma-step__icon svg { width: 21px; height: 21px; }

.fma-step--done .fma-step__icon {
  border-color: var(--fma-accent, #0fae7e);
  background: var(--fma-accent, #0fae7e);
  color: var(--fma-on-accent, #fff);
}

.fma-step--active .fma-step__icon {
  border-color: var(--fma-accent, #0fae7e);
  background: var(--fma-accent-soft, #e6f8f2);
  color: var(--fma-accent, #0fae7e);
  box-shadow: 0 0 0 5px rgba(15, 174, 126, 0.14);
}

.fma-step__label {
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--fma-muted, #9aa2b1);
  max-width: 120px;
}

.fma-step--done .fma-step__label,
.fma-step--active .fma-step__label { color: var(--fma-ink, #172033); }

.fma-progress__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* ---------------------- Widget de cuenta en cabecera ------------------- */

.fma-hw {
  width: 320px;
  max-width: 100%;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--fma-border, #e6eaf1);
  border-radius: var(--fma-radius-sm, 11px);
  background: var(--fma-surface, #fff);
  color: var(--fma-ink, #172033);
  font-family: var(--fma-font, inherit);
  text-align: left;
  box-shadow: 0 14px 34px rgba(23, 32, 51, 0.10);
}

.fma-hw__title { display: block; font-size: 16px; font-weight: 800; color: var(--fma-ink, #172033); }

.fma-hw__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.fma-hw__email {
  font-size: 12.5px;
  color: var(--fma-muted, #6f7787);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fma-hw__logout {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: #d63f3f !important;
  text-decoration: none !important;
}

.fma-hw__logout:hover { text-decoration: underline !important; }

.fma-hw__order {
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid var(--fma-accent, #0fae7e);
  border-radius: var(--fma-radius-xs, 7px);
  background: var(--fma-accent-soft, #e6f8f2);
}

.fma-hw__order-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fma-hw__order .fma-kicker { color: var(--fma-accent, #0fae7e); }

.fma-hw__order-line { margin: 8px 0 0; font-size: 13.5px; color: var(--fma-ink, #172033); }
.fma-hw__order-addr { margin: 3px 0 0; font-size: 12.5px; color: var(--fma-muted, #6f7787); }

.fma-hw__order-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 9px;
}

.fma-hw__track,
.fma-hw__view {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fma-primary, #1f6feb) !important;
  text-decoration: underline !important;
  word-break: break-all;
}

.fma-hw__links {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 12px;
  border-top: 1px solid var(--fma-border, #e6eaf1);
}

.fma-hw__link {
  display: block;
  padding: 10px 4px;
  border-bottom: 1px solid var(--fma-border, #e6eaf1);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fma-ink, #172033) !important;
  text-decoration: none !important;
  transition: color 0.14s ease, padding-left 0.14s ease;
}

.fma-hw__link:hover { color: var(--fma-primary, #1f6feb) !important; padding-left: 8px; }

.fma-hw__cta {
  width: 100%;
  justify-content: center;
  margin-top: 14px;
  border-radius: var(--fma-radius-xs, 7px);
}

/* ---------------- Homogeneizacion de las subpaginas -------------------- */

/* Titulos de pagina con el mismo lenguaje visual del panel. */
body.fma-account-page:not(.page-my-account) #main .page-header h1,
body.fma-account-page:not(.page-my-account) #main h1.page-heading,
body.fma-account-page:not(.page-my-account) #main h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--fma-ink, #172033);
  border: 0;
  text-transform: none;
}

/* Contenedor principal como tarjeta. */
body.fma-account-page:not(.page-my-account) #content.page-content,
body.fma-account-page:not(.page-my-account) #main .page-content {
  border: 1px solid var(--fma-border, #e6eaf1);
  border-radius: var(--fma-radius-sm, 11px);
  background: var(--fma-surface, #fff);
  box-shadow: 0 8px 22px rgba(23, 32, 51, 0.04);
  padding: 22px;
}

/* Tablas nativas (abonos, cupones, seguimiento...) */
body.fma-account-page #content table.table {
  border: 1px solid var(--fma-border, #e6eaf1);
}

body.fma-account-page #content table.table thead th {
  background: var(--fma-primary-soft, #f2f7fe);
  color: var(--fma-ink, #172033);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--fma-border, #e6eaf1);
}

body.fma-account-page #content table.table td {
  vertical-align: middle;
  font-size: 13.5px;
  border-color: var(--fma-border, #e6eaf1);
}

body.fma-account-page #content table.table tbody tr:hover td {
  background: var(--fma-primary-soft, #f2f7fe);
}

/* Formularios (datos personales, direcciones) */
body.fma-account-page #content .form-control,
body.fma-account-page #content input[type="text"],
body.fma-account-page #content input[type="email"],
body.fma-account-page #content input[type="password"],
body.fma-account-page #content input[type="tel"],
body.fma-account-page #content select,
body.fma-account-page #content textarea {
  border: 1px solid var(--fma-border, #e6eaf1);
  border-radius: var(--fma-radius-xs, 7px);
  min-height: 42px;
  box-shadow: none;
}

body.fma-account-page #content .form-control:focus,
body.fma-account-page #content input:focus,
body.fma-account-page #content select:focus,
body.fma-account-page #content textarea:focus {
  border-color: var(--fma-primary, #1f6feb);
  box-shadow: 0 0 0 3px rgba(var(--fma-primary-rgb, 31, 111, 235), 0.14);
  outline: none;
}

/* Botones secundarios y alertas */
body.fma-account-page #content .btn-secondary,
body.fma-account-page #content .btn-default {
  border-radius: var(--fma-radius-xs, 7px);
}

body.fma-account-page #content .alert {
  border-radius: var(--fma-radius-xs, 7px);
  border: 1px solid var(--fma-border, #e6eaf1);
}

/* Tarjetas de direcciones del tema classic */
body.fma-account-page .address,
body.fma-account-page article.address {
  border: 1px solid var(--fma-border, #e6eaf1);
  border-radius: var(--fma-radius-sm, 11px);
  box-shadow: 0 6px 18px rgba(23, 32, 51, 0.04);
}

/* ------------------------------ Responsive ----------------------------- */

@media (max-width: 767px) {
  .fma-ocard { flex-direction: column; gap: 14px; padding: 16px; }
  .fma-ocard__actions { min-width: 0; flex-direction: column; }
  .fma-ocard__thumbs img,
  .fma-ocard__more { width: 48px; height: 48px; }

  .fma-progress { padding: 18px 14px; }
  .fma-steps { margin-top: 18px; }
  .fma-step__icon { width: 36px; height: 36px; }
  .fma-step__icon svg { width: 18px; height: 18px; }
  .fma-step::before { top: 18px; }
  .fma-step__label { font-size: 10.5px; max-width: 88px; }

  .fma-hw { width: 100%; box-shadow: none; }

  body.fma-account-page:not(.page-my-account) #content.page-content,
  body.fma-account-page:not(.page-my-account) #main .page-content { padding: 16px 14px; }
}

@media print {
  .fma-hw,
  .fma-ocard__actions,
  .fma-progress__actions { display: none !important; }
}

/* =======================================================================
 * v1.1.1 - Correcciones de contraste sobre fondos oscuros y botones
 * "ghost" sobre superficies claras.
 * ===================================================================== */

/* Muchos temas declaran `p { color: gris }` a nivel de elemento; esa regla
   gana a la herencia del color del panel oscuro y el texto se vuelve
   ilegible. Se fuerza color: inherit en todos los descendientes de las
   superficies con fondo de color. */
.fma-hero h2,
.fma-hero p,
.fma-hero .fma-hero__subtitle,
.fma-hero .fma-hero__text,
.fma-hero .fma-eyebrow,
.fma-last-order,
.fma-last-order p,
.fma-last-order strong,
.fma-last-order .fma-kicker,
.fma-last-order .fma-state {
  color: inherit !important;
}

/* El boton ghost nacio para el panel oscuro (borde blanco). Sobre tarjetas
   claras (historial, panel de progreso) usa la paleta de marca. */
.fma-ocard .fma-ghost-btn,
.fma-progress .fma-ghost-btn {
  border-color: var(--fma-border, #e6eaf1);
  color: var(--fma-primary, #1f6feb) !important;
  background: var(--fma-surface, #fff);
}

.fma-ocard .fma-ghost-btn:hover,
.fma-ocard .fma-ghost-btn:focus,
.fma-progress .fma-ghost-btn:hover,
.fma-progress .fma-ghost-btn:focus {
  background: var(--fma-primary-soft, #f2f7fe);
  border-color: var(--fma-primary-line, #b6d0f8);
}

/* Refuerzo equivalente en el widget de cabecera por si el tema colorea
   los parrafos del desplegable. */
.fma-hw p,
.fma-hw strong,
.fma-hw span:not(.fma-obadge) {
  color: inherit;
}

.fma-hw__title { color: var(--fma-ink, #172033) !important; }
.fma-hw__email,
.fma-hw__order-addr { color: var(--fma-muted, #6f7787) !important; }
.fma-hw__order-line { color: var(--fma-ink, #172033) !important; }

/* =======================================================================
 * v1.2.0 - Barra superior persistente en subpaginas y contraste definitivo
 * sobre superficies de color (temas con selectores agresivos tipo
 * `#content section { color: ... }`).
 * ===================================================================== */

/* Contraste blindado: !important en el CONTENEDOR gana a cualquier regla
   del tema sin !important, sea cual sea su especificidad. Los hijos ya
   heredan con inherit !important (v1.1.1). */
.fma-hero { color: var(--fma-on-primary, #ffffff) !important; }
.fma-last-order { color: var(--fma-on-panel, #ffffff) !important; }
.fma-last-order .fma-ghost-btn { color: inherit !important; }
.fma-last-order .fma-ghost-btn span { color: inherit !important; }

/* ------------------- Barra superior de las subpaginas ------------------ */

.fma-topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin: 0 0 20px;
  padding: 14px 18px;
  border: 1px solid var(--fma-border, #e6eaf1);
  border-radius: var(--fma-radius-sm, 11px);
  background: var(--fma-surface, #fff);
  box-shadow: 0 8px 22px rgba(23, 32, 51, 0.05);
  font-family: var(--fma-font, inherit);
}

.fma-topbar__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 8px 14px 8px 9px;
  border: 1px solid var(--fma-border, #e6eaf1);
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-surface, #fff);
  color: var(--fma-ink, #172033) !important;
  text-decoration: none !important;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.fma-topbar__back:hover,
.fma-topbar__back:focus {
  color: var(--fma-primary, #1f6feb) !important;
  border-color: var(--fma-primary-line, #b6d0f8);
}

.fma-topbar__id {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.fma-topbar__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-primary-soft, #f2f7fe);
  color: var(--fma-primary, #1f6feb);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.fma-topbar__id strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--fma-ink, #172033);
}

.fma-topbar__stats {
  display: inline-flex;
  align-items: stretch;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.fma-topbar__stat {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 6px 14px;
  border-left: 1px solid var(--fma-border, #e6eaf1);
  text-decoration: none !important;
  min-width: 0;
}

.fma-topbar__stat small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fma-muted, #6f7787);
  white-space: nowrap;
}

.fma-topbar__stat strong {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--fma-ink, #172033);
  white-space: nowrap;
}

a.fma-topbar__stat:hover strong { color: var(--fma-primary, #1f6feb); }

.fma-topbar__order {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  flex: none;
  max-width: 260px;
  padding: 9px 14px;
  border: 1px solid var(--fma-primary-line, #b6d0f8);
  border-radius: var(--fma-radius-xs, 7px);
  background: var(--fma-primary-soft, #f2f7fe);
  text-decoration: none !important;
}

.fma-topbar__order-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fma-topbar__order .fma-kicker {
  font-size: 9.5px;
  color: var(--fma-primary, #1f6feb);
}

.fma-topbar__order strong {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--fma-ink, #172033);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fma-topbar__order .fma-obadge { font-size: 9.5px; padding: 2px 8px; }

a.fma-topbar__order:hover { border-color: var(--fma-primary, #1f6feb); }

/* La barra sustituye al boton de vuelta suelto: si por cualquier motivo
   coexistieran, el suelto se retira. */
.fma-topbar ~ .fma-back-wrap { display: none; }

@media (max-width: 991px) {
  .fma-topbar__stats { flex-wrap: wrap; }
  .fma-topbar__order { max-width: 100%; }
}

@media (max-width: 767px) {
  .fma-topbar { padding: 12px 14px; gap: 10px 14px; }
  .fma-topbar__stat { padding: 4px 10px; }
  .fma-topbar__stat:first-child { border-left: 0; padding-left: 0; }
  .fma-topbar__order { flex: 1 1 100%; }
}

/* =======================================================================
 * v1.2.1 - El widget sustituye al contenido nativo del desplegable, el
 * selector de idioma se recoloca dentro y los botones crecen.
 * ===================================================================== */

/* Contenido nativo del desplegable ocultado por el widget. */
.fma-hw-native-off {
  display: none !important;
}

/* Cuando el widget es el unico contenido, no necesita separarse de nada. */
.fma-hw:first-child,
.fma-hw-native-off + .fma-hw {
  margin-top: 0;
}

/* Bloque de idioma del tema recolocado dentro del panel. */
.fma-hw__lang {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--fma-border, #e6eaf1);
  border-radius: var(--fma-radius-xs, 7px);
  background: var(--fma-primary-soft, #f2f7fe);
}

.fma-hw__lang > * {
  margin: 0 !important;
  float: none !important;
}

.fma-hw__lang img {
  vertical-align: middle;
}

/* ------------------------ Tallas mas generosas ------------------------- */

.fma-hw {
  width: 340px;
  padding: 18px;
}

.fma-hw__title {
  font-size: 17px;
}

.fma-hw__email {
  font-size: 13px;
}

.fma-hw__logout {
  font-size: 13px;
}

.fma-hw__order-line {
  font-size: 14.5px;
}

.fma-hw__order-addr {
  font-size: 13px;
}

.fma-hw__track,
.fma-hw__view {
  font-size: 13.5px;
  padding: 2px 0;
}

.fma-hw__link {
  padding: 13px 4px;
  font-size: 15px;
}

.fma-hw__cta {
  padding: 14px 20px;
  font-size: 14.5px;
  font-weight: 800;
  margin-top: 16px;
}

/* =======================================================================
 * v1.3.0 - Botones con colores propios (normal + hover), iconos en los
 * enlaces de accion, acciones de direcciones, barra inferior a juego con
 * la superior, desplegable con mas aire y repaso movil.
 * ===================================================================== */

/* --------------------- Botones solidos configurables ------------------- */

/* Especificidad reforzada + !important en ambos estados: gana a los temas
   que colorean los enlaces de cabecera con !important. */
body .fma-solid-btn,
body a.fma-solid-btn {
  background: var(--fma-btn-bg, #f5a800) !important;
  color: var(--fma-btn-text, #172033) !important;
  border: 0;
}

body .fma-solid-btn:hover,
body .fma-solid-btn:focus,
body a.fma-solid-btn:hover,
body a.fma-solid-btn:focus {
  background: var(--fma-btn-bg-hover, #3b3b3b) !important;
  color: var(--fma-btn-text-hover, #ffffff) !important;
}

body .fma-solid-btn span { color: inherit !important; }

/* ------------------------- Iconos de accion ---------------------------- */

.fma-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
}

.fma-ico svg { width: 18px; height: 18px; }

/* Enlaces de accion de las tarjetas de pedido: chips con icono. */
.fma-ocard__detail,
.fma-ocard__invoice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--fma-border, #e6e4df);
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-surface, #fff);
  transition: background 0.16s ease, border-color 0.16s ease;
}

.fma-ocard__detail:hover,
.fma-ocard__invoice:hover {
  background: var(--fma-primary-soft, #fef8eb);
  border-color: var(--fma-primary-line, #fce1a8);
  text-decoration: none !important;
}

/* --------------------- Desplegable: aire y tallas ---------------------- */

.fma-hw__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 6px;
  font-size: 15.5px;
}

.fma-hw__link .fma-ico {
  color: var(--fma-primary, #f5a800);
}

.fma-hw__link-arrow {
  margin-left: auto;
  color: var(--fma-muted, #6b7280);
  font-size: 15px;
  transition: transform 0.16s ease, color 0.16s ease;
}

.fma-hw__link:hover .fma-hw__link-arrow {
  transform: translateX(3px);
  color: var(--fma-primary, #f5a800);
}

.fma-hw__cta {
  padding: 16px 22px;
  font-size: 15px;
  border-radius: var(--fma-radius-xs, 7px);
}

.fma-hw__view,
.fma-hw__track {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none !important;
  font-weight: 700;
}

.fma-hw__view:hover,
.fma-hw__track:hover { text-decoration: underline !important; }

/* ----------------- Direcciones: botones de accion ---------------------- */

body.fma-account-page article.address .address-footer a,
body.fma-account-page .address footer a,
body.fma-account-page .address .card-footer a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  margin-right: 8px;
  border: 1px solid var(--fma-border, #e6e4df);
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-surface, #fff);
  color: var(--fma-ink, #16181d) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

body.fma-account-page article.address .address-footer a:hover,
body.fma-account-page .address footer a:hover,
body.fma-account-page .address .card-footer a:hover {
  background: var(--fma-primary-soft, #fef8eb);
  border-color: var(--fma-primary-line, #fce1a8);
  color: var(--fma-primary-dark, #3b3b3b) !important;
}

/* "Borrar" en tono de peligro. */
body.fma-account-page article.address .address-footer a[data-link-action="delete-address"],
body.fma-account-page .address footer a[data-link-action="delete-address"],
body.fma-account-page .address a[href*="delete"] {
  color: #c0392b !important;
  border-color: #f0d4d0;
}

body.fma-account-page article.address .address-footer a[data-link-action="delete-address"]:hover,
body.fma-account-page .address footer a[data-link-action="delete-address"]:hover,
body.fma-account-page .address a[href*="delete"]:hover {
  background: #fdf1ef;
  border-color: #e6b5af;
  color: #a93226 !important;
}

/* ---------------- Barra inferior a juego con la superior --------------- */

body.fma-account-page #main .page-footer,
body.fma-account-page #content ~ .page-footer,
body.fma-account-page footer.page-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px solid var(--fma-border, #e6e4df);
  border-radius: var(--fma-radius-sm, 11px);
  background: var(--fma-surface, #fff);
  box-shadow: 0 8px 22px rgba(23, 32, 51, 0.05);
}

body.fma-account-page .page-footer a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--fma-border, #e6e4df);
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-surface, #fff);
  color: var(--fma-ink, #16181d) !important;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

body.fma-account-page .page-footer a:hover {
  color: var(--fma-primary-dark, #3b3b3b) !important;
  border-color: var(--fma-primary-line, #fce1a8);
  background: var(--fma-primary-soft, #fef8eb);
}

body.fma-account-page .page-footer li { list-style: none; }
body.fma-account-page .page-footer ul { display: flex; gap: 10px; margin: 0; padding: 0; }

/* ------------------------------ Movil ---------------------------------- */

@media (max-width: 480px) {
  .fma-hw { width: 100%; padding: 16px 14px; }
  .fma-hw__link { padding: 15px 4px; font-size: 15px; }
  .fma-hw__cta { padding: 15px 18px; }

  .fma-ocard__actions { width: 100%; }
  .fma-ocard__reorder,
  .fma-ocard__detail,
  .fma-ocard__invoice { width: 100%; }

  .fma-progress__actions { flex-direction: column; }
  .fma-progress__actions .fma-ghost-btn,
  .fma-progress__actions .fma-solid-btn { width: 100%; justify-content: center; }

  body.fma-account-page article.address .address-footer a,
  body.fma-account-page .address footer a { margin-bottom: 6px; }

  body.fma-account-page .page-footer { padding: 12px 14px; }
  body.fma-account-page .page-footer ul { flex-wrap: wrap; }
}

/* =======================================================================
 * v1.4.0 - Widget para visitantes y tamanos tactiles reales en movil.
 * ===================================================================== */

/* ------------------------- Variante visitante -------------------------- */

.fma-hw__guest-text {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fma-muted, #6b7280) !important;
}

/* Boton secundario en contorno ("Crear cuenta"). */
.fma-hw__alt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  padding: 14px 20px;
  border: 2px solid var(--fma-btn-bg, #f5a800);
  border-radius: var(--fma-radius-xs, 7px);
  background: transparent;
  color: var(--fma-ink, #16181d) !important;
  font-size: 14.5px;
  font-weight: 800;
  text-decoration: none !important;
  transition: background 0.16s ease, color 0.16s ease;
}

.fma-hw__alt:hover,
.fma-hw__alt:focus {
  background: var(--fma-primary-soft, #fef8eb);
  color: var(--fma-primary-dark, #3b3b3b) !important;
}

.fma-hw--guest .fma-hw__cta { margin-top: 14px; }
.fma-hw--guest .fma-hw__cart { border-top: 1px solid var(--fma-border, #e6e4df); margin-top: 12px; }

/* --------------------- Tactil: objetivos de 48px ----------------------- */

/* En pantallas tactiles / moviles TODO crece: enlaces, botones y flechas.
   48px es el minimo recomendado de area de toque. */
@media (max-width: 767px), (pointer: coarse) {
  .fma-hw {
    width: min(400px, 92vw);
    padding: 20px 16px;
  }

  .fma-hw__title { font-size: 19px; }
  .fma-hw__email { font-size: 14px; }

  .fma-hw__logout {
    font-size: 14.5px;
    padding: 10px 6px;
    margin: -10px -6px;
  }

  .fma-hw__order { padding: 15px 16px; }
  .fma-hw__order-line { font-size: 16px; }
  .fma-hw__order-addr { font-size: 14px; }

  .fma-hw__view,
  .fma-hw__track {
    font-size: 15px;
    min-height: 44px;
    align-items: center;
  }

  .fma-hw__lang { padding: 13px 14px; }
  .fma-hw__lang img { transform: scale(1.25); transform-origin: left center; margin-right: 6px; }

  .fma-hw__link {
    padding: 0 6px;
    min-height: 52px;
    font-size: 17px;
  }

  .fma-hw__link .fma-ico { width: 24px; height: 24px; }
  .fma-hw__link .fma-ico svg { width: 22px; height: 22px; }
  .fma-hw__link-arrow { font-size: 17px; }

  .fma-hw__cta {
    min-height: 52px;
    padding: 16px 22px;
    font-size: 16px;
  }

  .fma-hw__alt {
    min-height: 50px;
    font-size: 15.5px;
  }

  /* Chips y botones del resto de vistas tambien crecen. */
  .fma-ocard__reorder,
  .fma-ocard__detail,
  .fma-ocard__invoice {
    min-height: 46px;
    font-size: 14.5px;
  }

  .fma-topbar__back,
  body.fma-account-page .page-footer a {
    min-height: 42px;
    font-size: 13.5px;
  }

  body.fma-account-page article.address .address-footer a,
  body.fma-account-page .address footer a {
    min-height: 44px;
    font-size: 14px;
    padding: 10px 18px;
  }
}

/* =======================================================================
 * v1.4.1 - Accesos del desplegable y CTA con mucho mas aire, en TODAS las
 * pantallas (la base crece; movil/tactil crece aun mas).
 * ===================================================================== */

/* Base (escritorio incluido) */
.fma-hw__links {
  margin-top: 14px;
}

.fma-hw__link {
  min-height: 56px;
  padding: 18px 8px;
  font-size: 16.5px;
  gap: 14px;
}

.fma-hw__link .fma-ico { width: 24px; height: 24px; }
.fma-hw__link .fma-ico svg { width: 22px; height: 22px; }
.fma-hw__link-arrow { font-size: 17px; }

.fma-hw__cta {
  min-height: 56px;
  padding: 18px 24px;
  font-size: 16px;
  margin-top: 18px;
}

.fma-hw__alt {
  min-height: 54px;
  padding: 16px 22px;
  font-size: 15.5px;
}

.fma-hw--guest .fma-hw__cart {
  min-height: 56px;
  padding: 18px 8px;
  font-size: 16.5px;
}

/* Movil / tactil: un punto mas todavia */
@media (max-width: 767px), (pointer: coarse) {
  .fma-hw__link,
  .fma-hw--guest .fma-hw__cart {
    min-height: 60px;
    padding: 19px 8px;
    font-size: 18px;
  }

  .fma-hw__link .fma-ico { width: 26px; height: 26px; }
  .fma-hw__link .fma-ico svg { width: 24px; height: 24px; }
  .fma-hw__link-arrow { font-size: 18px; }

  .fma-hw__cta {
    min-height: 60px;
    padding: 19px 24px;
    font-size: 17px;
  }

  .fma-hw__alt {
    min-height: 58px;
    font-size: 16.5px;
  }
}

/* =======================================================================
 * v1.5.0 - Disposicion en dos columnas: menu lateral fijo + contenido.
 * ===================================================================== */

.fma-shell {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* ------------------------------ Menu ----------------------------------- */

.fma-shell__nav {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid var(--fma-border, #e6e4df);
  border-radius: var(--fma-radius-sm, 11px);
  background: var(--fma-surface, #fff);
  box-shadow: 0 8px 22px rgba(23, 32, 51, 0.05);
}

.fma-shell__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--fma-radius-xs, 7px);
  border-left: 3px solid transparent;
  color: var(--fma-ink, #16181d) !important;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none !important;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.fma-shell__item .fma-ico {
  color: var(--fma-muted, #6b7280);
  transition: color 0.14s ease;
}

.fma-shell__item:hover {
  background: var(--fma-primary-soft, #fef8eb);
}

.fma-shell__item:hover .fma-ico {
  color: var(--fma-primary, #f5a800);
}

.fma-shell__item--active {
  background: var(--fma-primary-soft, #fef8eb);
  border-left-color: var(--fma-primary, #f5a800);
  font-weight: 800;
}

.fma-shell__item--active .fma-ico {
  color: var(--fma-primary, #f5a800);
}

/* Panel arriba y Desconectar abajo, separados del resto. */
.fma-shell__item--panel {
  border-bottom: 1px solid var(--fma-border, #e6e4df);
  border-radius: var(--fma-radius-xs, 7px) var(--fma-radius-xs, 7px) 0 0;
  margin-bottom: 6px;
}

.fma-shell__item--logout {
  border-top: 1px solid var(--fma-border, #e6e4df);
  margin-top: 6px;
  color: #c0392b !important;
}

.fma-shell__item--logout .fma-ico { color: #c0392b; }

.fma-shell__item--logout:hover {
  background: #fdf1ef;
}

/* ---------------------------- Contenido -------------------------------- */

.fma-shell__main { min-width: 0; }

/* El contenedor-tarjeta de la subpagina ya no necesita duplicar marco
   cuando vive dentro del shell: se mantiene, pero sin sombra extra. */
body.fma-shell-on.fma-account-page:not(.page-my-account) #content.page-content,
body.fma-shell-on.fma-account-page:not(.page-my-account) #main .page-content {
  box-shadow: none;
  border: 0;
  padding: 0;
  background: transparent;
}

body.fma-shell-on .fma-shell__main > * {
  margin-top: 0;
}

/* ------------------------------ Movil ---------------------------------- */

@media (max-width: 991px) {
  .fma-shell {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* El menu pasa a fila de pastillas deslizable. */
  .fma-shell__nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
    gap: 6px;
    scrollbar-width: none;
  }

  .fma-shell__nav::-webkit-scrollbar { display: none; }

  .fma-shell__item {
    flex: none;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--fma-border, #e6e4df);
    border-radius: var(--fma-radius-pill, 999px);
    font-size: 13.5px;
    white-space: nowrap;
  }

  .fma-shell__item--active {
    border-color: var(--fma-primary, #f5a800);
    background: var(--fma-primary-soft, #fef8eb);
  }

  .fma-shell__item--panel,
  .fma-shell__item--logout {
    border-top: 1px solid var(--fma-border, #e6e4df);
    border-bottom: 1px solid var(--fma-border, #e6e4df);
    margin: 0;
  }

  .fma-shell__item--logout { border-color: #f0d4d0; }

  .fma-shell__item .fma-ico { width: 18px; height: 18px; }
  .fma-shell__item .fma-ico svg { width: 17px; height: 17px; }
}

/* =======================================================================
 * v1.5.1 - El widget nunca se sale del viewport en movil.
 * ===================================================================== */

.fma-hw,
.fma-hw * {
  box-sizing: border-box;
}

@media (max-width: 767px), (pointer: coarse) {
  .fma-hw {
    /* Nunca mas ancho que la pantalla menos margen; el JS ademas corrige
       la posicion si el popup del tema lo ancla fuera del viewport. */
    max-width: calc(100vw - 20px);
  }
}

/* =======================================================================
 * v2.0.0 - Modulo estandar 4ADDICTIC
 * Linea temporal en tarjetas y panel oscuro, importes con base imponible,
 * filtros/buscador del historial, tarjetas de estado (puntos, opiniones,
 * perfil, direccion), opiniones desde la cuenta y desplegable con anillos.
 * ===================================================================== */

.fma-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.fma-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.fma-orders [hidden],
.fma-reviews [hidden],
.fma-dashboard [hidden] { display: none !important; }

/* ---------------------------- Mano saludando --------------------------- */

.fma-wave {
  display: inline-block;
  transform-origin: 70% 75%;
  animation: fma-wave 1.6s ease-in-out 0.3s 1;
}

.fma-wave.is-waving { animation: fma-wave 1.6s ease-in-out 0.15s 1; }

@keyframes fma-wave {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(16deg); }
  30% { transform: rotate(-8deg); }
  45% { transform: rotate(16deg); }
  60% { transform: rotate(-4deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}

/* ------------------------------ Insignias ------------------------------ */

.fma-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-primary);
  color: var(--fma-on-primary) !important;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

.fma-obadge--caps {
  border-radius: 6px;
  padding: 5px 12px;
  letter-spacing: 0.06em;
}

/* ---------------------- Estadisticas en 4 tarjetas --------------------- */

.fma-dashboard .fma-stats {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.fma-stat--security { align-items: flex-start; }
.fma-stat--security strong { font-size: 17px; }
.fma-stat--security em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 12px;
  color: var(--fma-muted);
  line-height: 1.4;
}
.fma-stat--security em a { color: var(--fma-primary) !important; text-decoration: underline !important; }

/* ------------------- Panel de ultimo pedido (oscuro) ------------------- */

.fma-dashboard .fma-last-order {
  align-items: center;
  padding: 26px 30px;
  border-radius: var(--fma-radius);
}

.fma-last-order__info { min-width: 0; flex: 1; }
.fma-last-order .fma-kicker { letter-spacing: 0.16em; }
.fma-dashboard .fma-last-order strong { display: block; font-size: 22px; font-weight: 800; }
.fma-dashboard .fma-last-order p { font-size: 15px; opacity: 0.85; }
.fma-last-order__excl { opacity: 0.7; font-size: 13px; }

.fma-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-height: 52px;
  padding: 12px 30px;
  border-radius: var(--fma-radius-pill, 999px);
  background: #ffffff;
  color: var(--fma-panel) !important;
  text-decoration: none !important;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.fma-pill-btn:hover,
.fma-pill-btn:focus { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26); }
.fma-last-order .fma-pill-btn span { color: inherit !important; }

/* ------------------------- Linea temporal v2 --------------------------- */

.fma-step__date {
  display: block;
  margin-top: -4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fma-muted);
  white-space: nowrap;
}

.fma-steps--compact { margin: 18px 0 0; max-width: 620px; }
.fma-steps--compact .fma-step { gap: 7px; }
.fma-steps--compact .fma-step::before { top: 15px; height: 2px; }
.fma-steps--compact .fma-step__icon { width: 32px; height: 32px; border-width: 2px; }
.fma-steps--compact .fma-step__icon svg { width: 16px; height: 16px; }
.fma-steps--compact .fma-step__label { font-size: 11.5px; }

/* Sobre el panel oscuro */
.fma-steps--dark .fma-step::before { background: rgba(255, 255, 255, 0.16); }
.fma-steps--dark .fma-step--done::before,
.fma-steps--dark .fma-step--active::before { background: var(--fma-accent); }
.fma-steps--dark .fma-step__icon {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.55);
}
.fma-steps--dark .fma-step--done .fma-step__icon {
  background: var(--fma-accent);
  border-color: var(--fma-accent);
  color: var(--fma-on-accent);
}
.fma-steps--dark .fma-step--active .fma-step__icon {
  background: var(--fma-panel);
  border-color: var(--fma-accent);
  color: var(--fma-accent);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.10);
}
.fma-last-order .fma-steps--dark .fma-step__label { color: rgba(255, 255, 255, 0.55) !important; }
.fma-last-order .fma-steps--dark .fma-step--done .fma-step__label,
.fma-last-order .fma-steps--dark .fma-step--active .fma-step__label { color: #ffffff !important; }

/* En las tarjetas del historial */
.fma-steps--card { margin: 18px 0 0; }
.fma-steps--card .fma-step { gap: 7px; }
.fma-steps--card .fma-step::before { top: 17px; height: 2px; }
.fma-steps--card .fma-step__icon { width: 36px; height: 36px; }
.fma-steps--card .fma-step__icon svg { width: 17px; height: 17px; }
.fma-steps--card .fma-step__label { font-size: 12px; }

/* Mini (desplegable de cabecera) */
.fma-steps--mini { margin: 12px 0 2px; }
.fma-steps--mini .fma-step { gap: 5px; }
.fma-steps--mini .fma-step::before { top: 11px; height: 2px; }
.fma-steps--mini .fma-step__icon { width: 24px; height: 24px; border-width: 2px; }
.fma-steps--mini .fma-step__icon svg { width: 12px; height: 12px; }
.fma-steps--mini .fma-step__label { font-size: 10px; line-height: 1.2; }
.fma-steps--mini .fma-step--active .fma-step__icon { box-shadow: 0 0 0 3px rgba(var(--fma-primary-rgb), 0.12); }

/* Detalle con fechas */
.fma-steps--detail { margin-top: 26px; }

/* ----------------------- Tarjetas de estado (HSN) ---------------------- */

.fma-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.fma-insight {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100%;
  padding: 22px 22px 20px;
  border: 1px solid var(--fma-border);
  border-radius: var(--fma-radius-sm);
  background: var(--fma-surface);
  box-shadow: 0 10px 26px rgba(23, 32, 51, 0.05);
}

.fma-insight h4 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--fma-ink);
  text-transform: none;
}

.fma-insight__text {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fma-muted);
}

.fma-insight__meta { margin: 8px 0 0; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--fma-ink); }
.fma-insight__meta--soft { margin-top: 2px; font-weight: 600; color: var(--fma-muted); }

.fma-insight__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
}

.fma-insight__link {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--fma-primary) !important;
  text-decoration: none !important;
}

.fma-insight__link:hover { text-decoration: underline !important; }

.fma-insight__product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
}

.fma-insight__product img {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.fma-insight__bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-primary-soft);
  color: var(--fma-primary);
}

.fma-insight__bubble svg { width: 44px; height: 44px; }

.fma-insight__todo {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
}

.fma-insight__todo li { padding: 4px 0 4px 18px; position: relative; }
.fma-insight__todo li::before {
  content: "";
  position: absolute;
  left: 2px; top: 10px;
  width: 7px; height: 7px;
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-accent);
}
.fma-insight__todo a { color: var(--fma-ink) !important; text-decoration: none !important; font-weight: 600; }
.fma-insight__todo a:hover { color: var(--fma-primary) !important; }

.fma-insight address {
  margin: 10px 0 0;
  font-style: normal;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fma-ink);
}

.fma-insight address span { display: block; }
.fma-insight address span:first-child { font-weight: 700; }

.fma-insight__map {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  color: var(--fma-primary);
}

.fma-insight__map svg { width: 120px; height: 80px; }

/* Anillo de progreso */
.fma-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  margin: 18px auto 0;
}

.fma-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.fma-ring__track { fill: none; stroke: var(--fma-border); stroke-width: 9; }

.fma-ring__bar {
  fill: none;
  stroke: currentColor;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 263.89;
  transition: stroke-dashoffset 0.9s ease;
}


.fma-ring__label {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
}

.fma-ring__label small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fma-muted);
}

.fma-ring__label b {
  margin: 3px 0;
  font-size: 26px;
  font-weight: 800;
  color: var(--fma-ink);
}

.fma-ring--sm { width: 96px; height: 96px; margin: 0 auto; }
.fma-ring--sm .fma-ring__track,
.fma-ring--sm .fma-ring__bar { stroke-width: 10; }
.fma-ring--sm .fma-ring__label b { font-size: 16px; }
.fma-ring--sm .fma-ring__label small { font-size: 8px; }

/* Barra de progreso */
.fma-bar {
  height: 8px;
  margin-top: 16px;
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-border);
  overflow: hidden;
}

.fma-bar span {
  display: block;
  height: 100%;
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-primary);
  background: linear-gradient(90deg, var(--fma-primary) 0%, var(--fma-accent) 100%);
}

/* Estrellas estaticas */
.fma-stars-static { display: inline-flex; gap: 3px; }
.fma-stars-static i {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: var(--fma-border);
  -webkit-clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.fma-stars-static i.is-on { background: #f5b301; }
.fma-stars-static--lg i { width: 22px; height: 22px; }

/* -------------------------- Opiniones rapidas -------------------------- */

.fma-quick-reviews { margin-top: 26px; }
.fma-section-heading--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.fma-section-heading--row p { margin: 4px 0 0; color: var(--fma-muted); font-size: 13.5px; }

.fma-rv-list { display: grid; gap: 12px; margin-top: 14px; }

.fma-rv {
  display: flex;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid var(--fma-border);
  border-radius: var(--fma-radius-sm);
  background: var(--fma-surface);
  transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.fma-rv.is-open { border-color: var(--fma-primary-line); box-shadow: 0 12px 28px rgba(23, 32, 51, 0.07); }
.fma-rv.is-busy { opacity: 0.7; pointer-events: none; }
.fma-rv.is-leaving { opacity: 0; transform: translateY(-6px); }

.fma-rv__img {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border: 1px solid var(--fma-border);
  border-radius: var(--fma-radius-xs);
  background: #fff;
  overflow: hidden;
}

.fma-rv__img img { width: 100%; height: 100%; object-fit: contain; }
.fma-rv__noimg { display: block; width: 100%; height: 100%; background: var(--fma-primary-soft); }

.fma-rv__body { flex: 1; min-width: 0; position: relative; }

.fma-rv__name {
  display: block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--fma-ink) !important;
  text-decoration: none !important;
}

.fma-rv__name:hover { color: var(--fma-primary) !important; }
.fma-rv__meta { display: block; margin-top: 2px; font-size: 12px; color: var(--fma-muted); }

.fma-rv__form { margin: 8px 0 0; }

/* Estrellas interactivas: orden inverso + selector de hermanos */
.fma-stars {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
}

.fma-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.fma-stars label {
  display: inline-flex;
  margin: 0;
  padding: 3px;
  cursor: pointer;
  color: var(--fma-border);
  transition: transform 0.12s ease, color 0.12s ease;
}

.fma-stars label svg { width: 30px; height: 30px; fill: currentColor; }

.fma-stars label:hover,
.fma-stars label:hover ~ label,
.fma-stars input:checked ~ label { color: #f5b301; }

.fma-stars label:hover { transform: scale(1.12); }
.fma-stars input:focus-visible + label { outline: 2px solid var(--fma-primary); outline-offset: 2px; border-radius: 6px; }

.fma-rv__more { margin-top: 10px; }
.fma-js .fma-rv:not(.is-open) .fma-rv__more { display: none; }

.fma-rv__title,
.fma-rv__text {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--fma-border);
  border-radius: var(--fma-radius-xs);
  background: #fff;
  color: var(--fma-ink);
  font: inherit;
  font-size: 14px;
  box-sizing: border-box;
}

.fma-rv__title:focus,
.fma-rv__text:focus {
  outline: none;
  border-color: var(--fma-primary);
  box-shadow: 0 0 0 3px rgba(var(--fma-primary-rgb), 0.14);
}

.fma-rv__text { min-height: 84px; resize: vertical; }

.fma-rv__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.fma-rv__actions .fma-solid-btn { border: 0; cursor: pointer; }

.fma-link-btn {
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--fma-muted);
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
}

.fma-link-btn:hover { color: var(--fma-ink); }

.fma-rv__msg { min-height: 0; margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.fma-rv__msg:empty { display: none; }
.fma-rv__msg.is-ko { color: #c0392b; }

.fma-rv__done {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--fma-surface);
  font-size: 14px;
  font-weight: 700;
  color: var(--fma-ink);
  animation: fma-fade-in 0.3s ease both;
}

.fma-rv__done p { margin: 0; }

.fma-rv__done-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-accent);
  color: var(--fma-on-accent);
}

.fma-rv__done-ico svg { width: 20px; height: 20px; }

@keyframes fma-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Pagina "Mis opiniones" */
.fma-reviews { font-family: var(--fma-font); color: var(--fma-ink); }
.fma-reviews *,
.fma-reviews *::before,
.fma-reviews *::after { box-sizing: border-box; }

.fma-rv-intro {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--fma-radius-sm);
  background: var(--fma-primary-soft);
  border: 1px solid var(--fma-primary-line);
}

.fma-rv-intro strong { display: block; font-size: 17px; }
.fma-rv-intro p { margin: 3px 0 0; font-size: 13.5px; color: var(--fma-muted); }

.fma-rv-intro__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--fma-primary);
  color: var(--fma-on-primary);
}

.fma-rv-intro__icon svg { width: 26px; height: 26px; }

.fma-rv-intro__count {
  margin-left: auto;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--fma-muted);
  white-space: nowrap;
}

.fma-rv-intro__count b { display: block; font-size: 28px; color: var(--fma-primary); }

.fma-rv-reward {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-accent);
  color: var(--fma-on-accent);
  font-size: 12px;
  font-weight: 800;
}

.fma-rv-filter { margin: 16px 0 0; font-size: 13.5px; color: var(--fma-muted); }
.fma-rv-filter a { color: var(--fma-primary); font-weight: 700; }

.fma-rv-empty {
  margin-top: 18px;
  padding: 34px 20px;
  border: 1px dashed var(--fma-border);
  border-radius: var(--fma-radius-sm);
  text-align: center;
}

.fma-rv-empty span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-accent);
  color: var(--fma-on-accent);
}

.fma-rv-empty span svg { width: 26px; height: 26px; }
.fma-rv-empty strong { display: block; margin-top: 10px; font-size: 17px; }
.fma-rv-empty p { margin: 4px auto 0; max-width: 440px; color: var(--fma-muted); font-size: 13.5px; }

.fma-rv-done { display: grid; gap: 10px; margin-top: 12px; }

.fma-rvd {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--fma-border);
  border-radius: var(--fma-radius-sm);
  background: var(--fma-surface);
}

.fma-rvd__img { flex: 0 0 64px; width: 64px; height: 64px; }
.fma-rvd__img img { width: 100%; height: 100%; object-fit: contain; }
.fma-rvd__body { flex: 1; min-width: 0; }
.fma-rvd__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fma-rvd__top a { color: var(--fma-ink) !important; text-decoration: none !important; }
.fma-rvd__title { margin: 6px 0 0; font-weight: 700; font-size: 14px; }
.fma-rvd__text { margin: 3px 0 4px; font-size: 13.5px; color: var(--fma-muted); }
.fma-rvd small { font-size: 12px; color: var(--fma-muted); }

.fma-rvd__status {
  flex: none;
  padding: 3px 10px;
  border-radius: var(--fma-radius-pill, 999px);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fma-rvd__status.is-on { background: var(--fma-accent-soft); color: var(--fma-accent); }
.fma-rvd__status.is-wait { background: #f3f4f6; color: #6b7280; }

.fma-rv-back { margin-top: 24px; }

.fma-alert {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--fma-radius-xs);
  font-size: 14px;
}
.fma-alert p, .fma-alert ul { margin: 0; }
.fma-alert--ok { background: #e7f7ef; color: #11744a; }
.fma-alert--ko { background: #fdecec; color: #a12a2a; }

/* ------------------------ Historial v2: filtros ------------------------ */

.fma-orders { margin: 0 0 26px; font-family: var(--fma-font); }

.fma-otools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}

.fma-otabs { display: flex; flex-wrap: wrap; gap: 8px; }

.fma-otab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--fma-border);
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-surface);
  color: var(--fma-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fma-otab:hover { border-color: var(--fma-primary-line); }

.fma-otab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-primary-soft);
  color: var(--fma-primary);
  font-size: 11.5px;
  font-weight: 800;
}

.fma-otab.is-active { background: var(--fma-primary); border-color: var(--fma-primary); color: var(--fma-on-primary); }
.fma-otab.is-active .fma-otab__count { background: rgba(255, 255, 255, 0.22); color: inherit; }

.fma-osearch {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 380px;
  min-height: 46px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--fma-border);
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-surface);
  color: var(--fma-muted);
}

.fma-osearch .fma-ico svg { width: 18px; height: 18px; }

.fma-osearch input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0 !important;
  outline: none;
  background: transparent;
  color: var(--fma-ink);
  font: inherit;
  font-size: 14px;
  box-shadow: none !important;
}

.fma-osearch:focus-within { border-color: var(--fma-primary); box-shadow: 0 0 0 3px rgba(var(--fma-primary-rgb), 0.12); }

.fma-oempty {
  padding: 28px;
  border: 1px dashed var(--fma-border);
  border-radius: var(--fma-radius-sm);
  text-align: center;
  color: var(--fma-muted);
}

.fma-ofooter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.fma-ofooter__info { font-size: 12.5px; color: var(--fma-muted); }

/* ---------------------- Tarjeta de pedido v2 --------------------------- */

.fma-olist { margin: 0; }

.fma-ocard {
  display: block;
  padding: 20px 24px;
}

.fma-ocard--cancelled { background: #fbfaf9; }
.fma-ocard--cancelled .fma-ocard__thumbs { opacity: 0.6; }

.fma-ocard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.fma-ocard__id { min-width: 0; }
.fma-ocard__ref { font-size: 17px; letter-spacing: 0.02em; }
.fma-ocard__meta { font-weight: 700; }

.fma-ocard__amounts {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  flex: none;
  text-align: right;
}

.fma-amount small {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fma-ink);
  opacity: 0.8;
}

.fma-amount b { display: block; margin-top: 2px; font-size: 17px; font-weight: 800; color: var(--fma-ink); }
.fma-amount--total b { font-size: 21px; color: var(--fma-primary); }

.fma-ocard__body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}

.fma-ocard__main { flex: 1; min-width: 0; }

.fma-thumb {
  position: relative;
  display: inline-flex;
  width: 64px;
  height: 64px;
  border: 1px solid var(--fma-border);
  border-radius: var(--fma-radius-xs);
  background: #fff;
  box-shadow: 0 4px 10px rgba(23, 32, 51, 0.05);
}

.fma-ocard__thumbs .fma-thumb img {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 4px;
  object-fit: contain;
  border-radius: inherit;
}

.fma-thumb__qty {
  position: absolute;
  right: -6px;
  bottom: -6px;
  padding: 1px 6px;
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-panel);
  color: var(--fma-on-panel) !important;
  font-size: 10.5px;
  font-weight: 800;
}

.fma-ocard__more { width: 64px; height: 64px; }

.fma-ocard__actions {
  min-width: 240px;
  gap: 10px;
}

.fma-outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 10px 20px;
  border: 1px solid var(--fma-primary-line);
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-surface);
  color: var(--fma-primary) !important;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.fma-outline-btn:hover,
.fma-outline-btn:focus { background: var(--fma-primary-soft); border-color: var(--fma-primary); transform: translateY(-1px); }
.fma-outline-btn .fma-ico svg,
.fma-chip .fma-ico svg,
.fma-solid-btn .fma-ico svg { width: 17px; height: 17px; }
.fma-outline-btn span,
.fma-chip span { color: inherit !important; }
.fma-outline-btn--accent { border-color: var(--fma-accent); color: var(--fma-accent) !important; }

.fma-ocard__minor { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

.fma-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 12px;
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-primary-soft);
  color: var(--fma-primary) !important;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none !important;
}

.fma-chip:hover { background: var(--fma-primary-line); }
.fma-chip--accent { background: var(--fma-accent-soft); color: var(--fma-accent) !important; }

.fma-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 2px;
  padding: 0 6px;
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-accent);
  color: var(--fma-on-accent) !important;
  font-size: 11px;
  font-weight: 800;
}

/* ---------------------- Detalle del pedido v2 -------------------------- */

.fma-progress { padding: 24px 28px; }
.fma-progress__msg { margin: 6px 0 0; font-size: 16px; font-weight: 800; color: var(--fma-ink); }
.fma-progress__amounts { margin-left: auto; }

.fma-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed var(--fma-border);
}

.fma-breakdown__row { display: flex; gap: 6px; font-size: 13px; }
.fma-breakdown dt { font-weight: 600; color: var(--fma-muted); }
.fma-breakdown dd { margin: 0; font-weight: 800; color: var(--fma-ink); }

.fma-progress .fma-ocard__thumbs { margin-top: 16px; flex-wrap: wrap; }
.fma-progress__actions .fma-solid-btn { border: 0; }

/* ---------------------- Desplegable de cabecera v2 --------------------- */

.fma-hw { width: 380px; }
.fma-hw__title { font-size: 21px; line-height: 1.2; }
.fma-hw__title .fma-wave { font-size: 20px; }

.fma-hw__intro {
  margin: 10px 0 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fma-border);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fma-muted) !important;
}

.fma-hw__meta { margin-top: 12px; }
.fma-hw__email { font-size: 14px; font-weight: 800; color: var(--fma-ink) !important; }
.fma-hw__logout { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; }
.fma-hw__logout .fma-ico svg { width: 16px; height: 16px; }

a.fma-hw__order,
.fma-hw__order {
  display: block;
  margin-top: 14px;
  padding: 14px 16px;
  border: 2px solid var(--fma-accent);
  border-radius: var(--fma-radius-xs);
  background: var(--fma-surface);
  color: var(--fma-ink) !important;
  text-decoration: none !important;
  transition: box-shadow 0.15s ease;
}

a.fma-hw__order:hover { box-shadow: 0 8px 20px rgba(23, 32, 51, 0.10); }

.fma-hw__order-top { align-items: flex-start; }
.fma-hw__order-msg strong {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  color: var(--fma-accent) !important;
}

.fma-hw__order-line { display: block; margin-top: 5px; font-size: 13px; }
.fma-hw__order-ico { flex: none; color: var(--fma-accent); }
.fma-hw__order-ico svg { width: 34px; height: 34px; }

.fma-hw__track {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  text-align: left;
}

.fma-hw__rings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 16px;
}

.fma-hw__rings--2 { grid-template-columns: repeat(2, 1fr); }
.fma-hw__rings--1 { grid-template-columns: 1fr; }

.fma-hw__ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  border-radius: var(--fma-radius-xs);
  color: var(--fma-ink) !important;
  text-decoration: none !important;
  transition: background 0.15s ease;
}

a.fma-hw__ring:hover { background: var(--fma-primary-soft); }
.fma-hw__ring-label { font-size: 12.5px; font-weight: 800; text-align: center; line-height: 1.25; }

.fma-hw .fma-ring__label small { color: var(--fma-muted) !important; }
.fma-hw .fma-ring__label b { color: var(--fma-ink) !important; }

/* ------------------------------ Responsive ----------------------------- */

@media (max-width: 991px) {
  .fma-ocard__body { flex-direction: column; align-items: stretch; }
  .fma-ocard__actions { min-width: 0; flex-direction: row; flex-wrap: wrap; }
  .fma-ocard__actions .fma-outline-btn { flex: 1 1 160px; }
  .fma-ocard__minor { width: 100%; justify-content: flex-start; }
}

@media (max-width: 767px) {
  .fma-dashboard .fma-last-order { flex-direction: column; align-items: stretch; padding: 22px 20px; }
  .fma-pill-btn { justify-content: center; }
  .fma-steps--compact .fma-step__label,
  .fma-steps--card .fma-step__label { font-size: 10.5px; }
  .fma-ocard { padding: 16px; }
  .fma-ocard__head { flex-direction: column; }
  .fma-ocard__amounts { text-align: left; }
  .fma-osearch { flex: 1 1 100%; }
  .fma-otabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .fma-otab { flex: none; }
  .fma-rv { flex-direction: column; }
  .fma-rv__img { width: 80px; height: 80px; flex-basis: 80px; }
  .fma-rv-intro { flex-wrap: wrap; }
  .fma-rv-intro__count { margin-left: 0; }
  .fma-progress { padding: 18px; }
  .fma-progress__head { flex-direction: column; }
  .fma-progress__amounts { margin-left: 0; text-align: left; }
  .fma-progress__actions .fma-outline-btn { width: 100%; }
  .fma-step__date { font-size: 9.5px; white-space: normal; }
}

@media (max-width: 767px), (pointer: coarse) {
  .fma-hw { width: min(400px, 92vw); }
  .fma-outline-btn { min-height: 52px; }
  .fma-stars label svg { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .fma-wave,
  .fma-wave.is-waving { animation: none !important; }
  .fma-ring__bar { transition: none; }
  .fma-rv { transition: none; }
}

@media print {
  .fma-otools,
  .fma-ofooter,
  .fma-ocard__actions,
  .fma-progress__actions,
  .fma-quick-reviews,
  .fma-insights { display: none !important; }
}

/* v2.0.0 - ajustes finos */
.fma-ring--sm.fma-ring--long .fma-ring__label b { font-size: 12px; }
.fma-steps--mini .fma-step__label { max-width: 64px; word-break: normal; overflow-wrap: anywhere; }
.fma-steps--compact .fma-step__label,
.fma-steps--card .fma-step__label { max-width: 110px; }
body .fma-chip .fma-chip__count,
body .fma-outline-btn .fma-chip__count { color: var(--fma-on-accent) !important; background: var(--fma-accent); }
.fma-ocard__actions .fma-outline-btn,
.fma-progress__actions .fma-outline-btn,
.fma-progress__actions .fma-solid-btn {
  min-height: 46px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.2;
}
.fma-outline-btn .fma-ico,
.fma-solid-btn .fma-ico,
.fma-chip .fma-ico { display: inline-flex; width: auto; height: auto; margin: 0; }
.fma-ocard__thumbs .fma-thumb img { box-sizing: border-box; max-width: none; }
.fma-ocard__thumbs { flex-wrap: wrap; }
.fma-outline-btn,
.fma-solid-btn,
.fma-chip,
.fma-otab,
.fma-pill-btn { box-sizing: border-box; }
.fma-shell > * { min-width: 0; }
@media (max-width: 991px) {
  .fma-shell { grid-template-columns: minmax(0, 1fr); }
}
.fma-orders,
.fma-otools,
.fma-olist { min-width: 0; max-width: 100%; }

/* =======================================================================
 * v2.1.0 - Cabecera neutra, estilo "neutro" sin recuadros y anillos en
 * modo semaforo.
 * ===================================================================== */

/* -------------------- Cabecera de bienvenida neutra -------------------- */

.fma-dashboard .fma-hero.fma-hero--neutral {
  padding: 4px 0 22px;
  border-radius: 0;
  border-bottom: 1px solid var(--fma-border);
  background: transparent !important;
  box-shadow: none;
  color: var(--fma-ink) !important;
}

.fma-hero--neutral .fma-hero__art { display: none; }
.fma-hero--neutral .fma-hero__content { max-width: none; }

.fma-hero--neutral .fma-eyebrow {
  color: var(--fma-primary) !important;
  opacity: 1;
}

.fma-dashboard .fma-hero--neutral h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--fma-ink) !important;
}

.fma-hero--neutral .fma-hero__subtitle {
  margin-top: 4px;
  color: var(--fma-ink) !important;
  opacity: 0.8;
}

.fma-hero--neutral .fma-hero__text {
  max-width: 720px;
  color: var(--fma-muted) !important;
}

.fma-hero--neutral .fma-avatar {
  background: var(--fma-primary-soft);
  border: 1px solid var(--fma-primary-line);
  color: var(--fma-primary);
}

.fma-hero h2 .fma-wave { font-size: 0.9em; }

@media (max-width: 767px) {
  .fma-dashboard .fma-hero--neutral { padding: 0 0 18px; }
  .fma-dashboard .fma-hero--neutral h2 { font-size: 24px; }
  .fma-hero--neutral .fma-avatar { flex-basis: 44px; width: 44px; height: 44px; font-size: 15px; }
}

/* ---------------------- Anillos: corporativo / semaforo ---------------- */

.fma-ring { color: var(--fma-primary); }
.fma-ring--profile,
.fma-ring--done { color: var(--fma-accent); }
.fma-ring--reviews { color: var(--fma-accent); }

.fma-rings-traffic .fma-ring--lvl-low { color: #d64545; }
.fma-rings-traffic .fma-ring--lvl-mid { color: #e8a317; }
.fma-rings-traffic .fma-ring--lvl-high { color: #2fa86b; }
.fma-rings-traffic .fma-ring--lvl-info { color: var(--fma-accent); }

.fma-rings-traffic .fma-bar--lvl-low span { background: #d64545; }
.fma-rings-traffic .fma-bar--lvl-mid span { background: #e8a317; }
.fma-rings-traffic .fma-bar--lvl-high span { background: #2fa86b; }

/* -------------------- Estilo neutro: sin recuadros ---------------------- */

.fma-style-minimal .fma-stat,
.fma-style-minimal .fma-insight,
.fma-style-minimal .fma-card,
.fma-style-minimal .fma-ocard,
.fma-style-minimal .fma-progress,
.fma-style-minimal .fma-rv,
.fma-style-minimal .fma-rvd,
.fma-style-minimal .fma-help,
.fma-style-minimal .fma-pro,
.fma-style-minimal .fma-topbar,
.fma-style-minimal .fma-rv-intro {
  border: 0 !important;
  border-bottom: 1px solid var(--fma-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.fma-style-minimal .fma-stat,
.fma-style-minimal .fma-card,
.fma-style-minimal .fma-ocard,
.fma-style-minimal .fma-rv,
.fma-style-minimal .fma-rvd {
  padding-left: 0;
  padding-right: 0;
}

.fma-style-minimal .fma-ocard--cancelled { background: transparent !important; }

.fma-style-minimal .fma-stats,
.fma-style-minimal .fma-insights,
.fma-style-minimal .fma-grid,
.fma-style-minimal .fma-olist,
.fma-style-minimal .fma-rv-list,
.fma-style-minimal .fma-rv-done { gap: 0 28px; }

.fma-style-minimal .fma-insight { padding: 22px 0; }

.fma-style-minimal .fma-card::after,
.fma-style-minimal .fma-card::before { display: none !important; }

.fma-style-minimal .fma-card__arrow {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.fma-style-minimal .fma-stat__icon,
.fma-style-minimal .fma-card__icon,
.fma-style-minimal .fma-insight__bubble,
.fma-style-minimal .fma-rv-intro__icon {
  background: transparent !important;
  color: var(--fma-primary) !important;
}

.fma-style-minimal .fma-stat__icon,
.fma-style-minimal .fma-card__icon { flex-basis: 30px; width: 30px; justify-content: flex-start; }

.fma-style-minimal .fma-thumb,
.fma-style-minimal .fma-rv__img,
.fma-style-minimal .fma-ocard__thumbs img { box-shadow: none; }

/* Ultimo pedido sin fondo oscuro */
.fma-dashboard.fma-style-minimal .fma-last-order {
  padding: 22px 0;
  border-top: 1px solid var(--fma-border);
  border-bottom: 1px solid var(--fma-border);
  border-radius: 0;
  background: transparent;
  color: var(--fma-ink) !important;
}

.fma-dashboard.fma-style-minimal .fma-last-order .fma-kicker { color: var(--fma-primary) !important; opacity: 1; }
.fma-dashboard.fma-style-minimal .fma-last-order p { color: var(--fma-muted) !important; opacity: 1; }

.fma-style-minimal .fma-steps--dark .fma-step::before { background: var(--fma-border); }
.fma-style-minimal .fma-steps--dark .fma-step--done::before,
.fma-style-minimal .fma-steps--dark .fma-step--active::before { background: var(--fma-accent); }
.fma-style-minimal .fma-steps--dark .fma-step__icon {
  background: var(--fma-surface);
  border-color: var(--fma-border);
  color: var(--fma-muted);
}
.fma-style-minimal .fma-steps--dark .fma-step--done .fma-step__icon {
  background: var(--fma-accent);
  border-color: var(--fma-accent);
  color: var(--fma-on-accent);
}
.fma-style-minimal .fma-steps--dark .fma-step--active .fma-step__icon {
  background: var(--fma-accent-soft);
  border-color: var(--fma-accent);
  color: var(--fma-accent);
  box-shadow: none;
}
.fma-dashboard.fma-style-minimal .fma-last-order .fma-steps--dark .fma-step__label { color: var(--fma-muted) !important; }
.fma-dashboard.fma-style-minimal .fma-last-order .fma-steps--dark .fma-step--done .fma-step__label,
.fma-dashboard.fma-style-minimal .fma-last-order .fma-steps--dark .fma-step--active .fma-step__label { color: var(--fma-ink) !important; }

.fma-dashboard.fma-style-minimal .fma-pill-btn {
  min-height: 46px;
  padding: 10px 22px;
  border: 1px solid var(--fma-primary);
  background: transparent;
  color: var(--fma-primary) !important;
  box-shadow: none;
}

/* Botones y pestanas mas ligeros */
.fma-style-minimal .fma-outline-btn { border-color: var(--fma-border); background: transparent; }
.fma-style-minimal .fma-chip { background: transparent; padding-left: 4px; padding-right: 4px; }
.fma-style-minimal .fma-otab { border-color: transparent; background: transparent; border-radius: 0; border-bottom: 2px solid transparent; }
.fma-style-minimal .fma-otab.is-active { background: transparent; color: var(--fma-primary); border-bottom-color: var(--fma-primary); }
.fma-style-minimal .fma-otab.is-active .fma-otab__count { background: var(--fma-primary-soft); }
.fma-style-minimal .fma-osearch { border-radius: 0; border-width: 0 0 1px; background: transparent; }

/* Menu lateral */
.fma-style-minimal .fma-shell__nav { border: 0 !important; background: transparent !important; box-shadow: none !important; border-right: 1px solid var(--fma-border) !important; border-radius: 0 !important; }
.fma-style-minimal .fma-shell__item--active { background: transparent !important; box-shadow: inset 3px 0 0 var(--fma-primary) !important; }

@media (max-width: 991px) {
  .fma-style-minimal .fma-shell__nav { border-right: 0 !important; border-bottom: 1px solid var(--fma-border) !important; }
}

/* Desplegable de cabecera */
.fma-style-minimal .fma-hw { box-shadow: 0 14px 34px rgba(23, 32, 51, 0.08); }
.fma-style-minimal a.fma-hw__order,
.fma-style-minimal .fma-hw__order { border: 0; border-left: 3px solid var(--fma-accent); border-radius: 0; padding: 4px 0 4px 14px; }

/* --------------------- Movil: desplegable compacto --------------------- */

@media (max-width: 480px) {
  .fma-hw__rings { gap: 2px; }
  .fma-ring--sm { width: 84px; height: 84px; }
  .fma-hw__ring-label { font-size: 11.5px; }
  .fma-hw__order-ico svg { width: 28px; height: 28px; }
  .fma-dashboard .fma-ring:not(.fma-ring--sm) { width: 132px; height: 132px; }
}

/* El refuerzo de contraste del desplegable (.fma-hw span { color: inherit })
   pisaba el color de los anillos: se restablece con mas especificidad. */
.fma-hw span.fma-ring { color: var(--fma-primary) !important; }
.fma-hw span.fma-ring--profile,
.fma-hw span.fma-ring--done,
.fma-hw span.fma-ring--reviews { color: var(--fma-accent) !important; }
.fma-rings-traffic .fma-hw span.fma-ring--lvl-low { color: #d64545 !important; }
.fma-rings-traffic .fma-hw span.fma-ring--lvl-mid { color: #e8a317 !important; }
.fma-rings-traffic .fma-hw span.fma-ring--lvl-high { color: #2fa86b !important; }
.fma-rings-traffic .fma-hw span.fma-ring--lvl-info { color: var(--fma-accent) !important; }
.fma-hw .fma-ring__label,
.fma-hw .fma-ring__label b { color: var(--fma-ink) !important; }

/* =======================================================================
 * v2.1.1 - Tarjeta de ultimo pedido del desplegable al estilo HSN.
 * Es un <div>: los temas que ponen display:flex a los enlaces del
 * desplegable ya no reparten el contenido en columnas.
 * ===================================================================== */

.fma-hw .fma-hw__order {
  position: relative;
  display: block !important;
  margin-top: 16px;
  padding: 16px 64px 16px 18px;
  border: 2px solid var(--fma-accent);
  border-radius: var(--fma-radius-xs);
  background: var(--fma-surface);
  text-align: left;
}

.fma-hw .fma-hw__order--shipped,
.fma-hw .fma-hw__order--delivered { border-color: #2fa86b; }
.fma-hw .fma-hw__order--cancel { border-color: var(--fma-border); background: #fafafa; }

.fma-hw .fma-hw__order-ico {
  position: absolute;
  top: 14px;
  right: 14px;
  display: block;
  color: var(--fma-accent) !important;
}

.fma-hw .fma-hw__order--shipped .fma-hw__order-ico,
.fma-hw .fma-hw__order--delivered .fma-hw__order-ico { color: #2fa86b !important; }
.fma-hw .fma-hw__order--cancel .fma-hw__order-ico { color: var(--fma-muted) !important; }
.fma-hw .fma-hw__order-ico svg { width: 40px; height: 40px; stroke-width: 1.4; }

.fma-hw .fma-hw__order-title {
  display: block !important;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--fma-accent) !important;
  text-decoration: none !important;
  background: none !important;
  border: 0 !important;
}

.fma-hw .fma-hw__order--shipped .fma-hw__order-title,
.fma-hw .fma-hw__order--delivered .fma-hw__order-title { color: #2fa86b !important; }
.fma-hw .fma-hw__order--cancel .fma-hw__order-title { color: #c0392b !important; }

.fma-hw .fma-hw__order-text {
  display: block;
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--fma-ink) !important;
  text-transform: none;
}

.fma-hw .fma-hw__order-text b { font-weight: 800; color: var(--fma-ink) !important; }

.fma-hw .fma-hw__order-meta {
  display: block;
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--fma-muted) !important;
}

.fma-hw .fma-hw__order .fma-steps--mini { margin-right: -46px; }

.fma-hw .fma-hw__order .fma-hw__track {
  display: inline-block !important;
  margin-top: 10px;
  padding: 0 !important;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fma-ink) !important;
  text-decoration: underline !important;
  background: none !important;
  word-break: break-word;
}

.fma-style-minimal .fma-hw .fma-hw__order { padding: 4px 56px 4px 14px; border-width: 0 0 0 3px; border-radius: 0; background: transparent; }

@media (max-width: 480px) {
  .fma-hw .fma-hw__order { padding-right: 56px; }
  .fma-hw .fma-hw__order-ico svg { width: 34px; height: 34px; }
}

/* =======================================================================
 * v2.2.0 - Selector de idiomas propio (fuera del desplegable) y ocultacion
 * cuando la tienda solo tiene un idioma.
 * ===================================================================== */

.fma-lang-off { display: none !important; }

.fma-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 10px;
  font-family: var(--fma-font);
  vertical-align: middle;
}

.fma-lang__flag {
  display: block;
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.fma-lang__txt { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; }

/* Lista: todos visibles */
.fma-lang--inline .fma-lang__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 8px;
  border-radius: var(--fma-radius-pill, 999px);
  color: var(--fma-muted) !important;
  text-decoration: none !important;
  opacity: 0.75;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.fma-lang--inline .fma-lang__item:hover { opacity: 1; background: var(--fma-primary-soft); }
.fma-lang--inline .fma-lang__item.is-current { opacity: 1; color: var(--fma-ink) !important; background: var(--fma-primary-soft); }
.fma-lang--inline.fma-lang--flags .fma-lang__item { padding: 4px; }

/* Desplegable */
.fma-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 5px 10px;
  border: 1px solid var(--fma-border);
  border-radius: var(--fma-radius-pill, 999px);
  background: var(--fma-surface);
  color: var(--fma-ink);
  font: inherit;
  cursor: pointer;
}

.fma-lang__btn:hover,
.fma-lang.is-open .fma-lang__btn { border-color: var(--fma-primary); }
.fma-lang__caret { width: 14px; height: 14px; transition: transform 0.15s ease; }
.fma-lang.is-open .fma-lang__caret { transform: rotate(180deg); }

.fma-lang__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1050;
  min-width: 170px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--fma-border);
  border-radius: var(--fma-radius-xs);
  background: var(--fma-surface);
  box-shadow: 0 14px 34px rgba(23, 32, 51, 0.14);
}

.fma-lang__list li { margin: 0; padding: 0; list-style: none; }

.fma-lang__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: var(--fma-radius-xs);
  color: var(--fma-ink) !important;
  text-decoration: none !important;
  font-size: 14px;
}

.fma-lang__opt:hover { background: var(--fma-primary-soft); }
.fma-lang__opt.is-current { font-weight: 800; background: var(--fma-primary-soft); }
.fma-lang__opt .fma-lang__txt { font-weight: inherit; letter-spacing: 0; }

.fma-style-minimal .fma-lang__btn { border-color: transparent; background: transparent; }

@media (max-width: 767px) {
  .fma-lang { margin-right: 6px; }
  .fma-lang__btn { min-height: 40px; padding: 5px 8px; }
  .fma-lang--inline .fma-lang__item { min-height: 40px; }
}

/* v2.3.1 - selector de idiomas en cabeceras con float (Leo) */
.fma-lang--float { margin: 0 10px; line-height: inherit; }
.fma-lang--float.fma-lang--inline,
.fma-lang--float .fma-lang__btn { min-height: 40px; }
.popup-over + .fma-lang--float,
.fma-lang--float { align-self: center; }

/* v2.4.0 - selector de idiomas mas integrado con los iconos de cabecera */
.fma-lang--float .fma-lang__btn { border-color: transparent; background: transparent; padding: 4px 6px; min-height: 0; }
.fma-lang--float .fma-lang__btn:hover,
.fma-lang--float.is-open .fma-lang__btn { border-color: var(--fma-border); background: var(--fma-surface); }
.fma-lang--float { display: flex; align-items: center; }
.fma-hw__link .fma-badge { margin-left: auto; margin-right: 8px; }

/* v2.4.1 - selector de idiomas compacto en la cabecera: sin recuadro, sin
   salto de linea y ancho minimo para no empujar el menu. */
.fma-lang--header { flex: 0 0 auto; white-space: nowrap; margin: 0 6px; }
.fma-lang--header .fma-lang__btn {
  min-height: 0;
  padding: 4px;
  border-color: transparent;
  background: transparent;
  gap: 3px;
}
.fma-lang--header .fma-lang__btn:hover,
.fma-lang--header.is-open .fma-lang__btn { border-color: var(--fma-border); background: var(--fma-surface); }
.fma-lang--header .fma-lang__caret { width: 12px; height: 12px; }
.fma-lang--header.fma-lang--inline .fma-lang__item { min-height: 0; padding: 4px; }


/* =======================================================================
 * v2.5.0
 * ===================================================================== */

/* Botones, pestanas, chips e insignias siguen el radio configurado (con
   radio 0 quedan cuadrados). Los elementos que son circulos por diseno
   (avatar, pasos de la linea temporal, iconos de confirmacion) se
   mantienen redondos. */
.fma-avatar,
.fma-topbar__avatar,
.fma-step__icon,
.fma-rv__done-ico,
.fma-rv-empty span,
.fma-insight__bubble,
.fma-insight__todo li::before {
  border-radius: 50% !important;
}

/* Historial en movil: el tema pinta ademas una lista propia (.orders) para
   pantallas pequenas. Se oculta cuando la version del modulo esta lista. */
body.fma-orders-ready.page-history #content .orders,
body.fma-orders-ready#history #content .orders,
body.fma-orders-ready.page-history #content .hidden-md-up.orders,
body.fma-orders-ready.page-history #content > .order,
body.fma-orders-ready.page-history .fma-shell__main > .orders {
  display: none !important;
}

/* Desplegable de cuenta: iconos alineados con el texto y flecha a la derecha
   aunque el tema aplique display:block / subrayado a los enlaces. */
.fma-hw .fma-hw__link {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  text-decoration: none !important;
}
.fma-hw .fma-hw__link > span:not(.fma-ico):not(.fma-hw__link-arrow):not(.fma-badge) {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}
.fma-hw .fma-hw__link .fma-ico {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0 !important;
}
.fma-hw .fma-hw__link .fma-ico svg {
  display: block;
  width: 22px;
  height: 22px;
}
.fma-hw .fma-hw__link-arrow {
  margin-left: auto !important;
  flex: 0 0 auto;
}
.fma-hw .fma-hw__link .fma-badge { margin-left: auto; margin-right: 6px; }
.fma-hw .fma-hw__link .fma-badge + .fma-hw__link-arrow { margin-left: 0 !important; }

.fma-hw .fma-hw__logout {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  line-height: 1 !important;
  text-decoration: none !important;
}
.fma-hw .fma-hw__logout .fma-ico {
  display: inline-flex !important;
  align-items: center;
  width: 18px;
  height: 18px;
  margin: 0 !important;
}
.fma-hw .fma-hw__logout .fma-ico svg { display: block; width: 18px; height: 18px; }
.fma-hw .fma-hw__logout span { line-height: 1 !important; text-decoration: none !important; }
.fma-hw .fma-hw__logout:hover span:last-child { text-decoration: underline !important; }

/* Menu interno de la cuenta en movil: icono + desplegable */
.fma-mnav { display: none; }

@media (max-width: 991px) {
  .fma-shell--mselect .fma-shell__nav { display: none !important; }

  .fma-shell--mselect .fma-mnav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 14px;
    border: 1px solid var(--fma-border);
    border-radius: var(--fma-radius-sm);
    background: var(--fma-surface);
    color: var(--fma-ink);
  }

  .fma-shell--mselect .fma-mnav {
    position: relative;
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none !important;
  }
  .fma-mnav__btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--fma-border);
    border-radius: var(--fma-radius-sm);
    background: var(--fma-surface);
    color: var(--fma-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .fma-mnav.is-open .fma-mnav__btn,
  .fma-mnav__btn:focus-visible { border-color: var(--fma-primary); box-shadow: 0 0 0 3px rgba(var(--fma-primary-rgb), 0.14); outline: none; }
  .fma-mnav__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50% !important;
    background: var(--fma-primary-soft);
    color: var(--fma-primary);
  }
  .fma-mnav__ico svg { width: 20px; height: 20px; display: block; }
  .fma-mnav__txt { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.2; }
  .fma-mnav__txt small { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fma-muted); }
  .fma-mnav__txt strong { font-size: 16px; font-weight: 800; color: var(--fma-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fma-mnav__caret { flex: none; width: 20px; height: 20px; color: var(--fma-muted); transition: transform 0.18s ease; }
  .fma-mnav.is-open .fma-mnav__caret { transform: rotate(180deg); }

  .fma-mnav__list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--fma-border);
    border-radius: var(--fma-radius-sm);
    background: var(--fma-surface, #fff);
    box-shadow: 0 18px 40px rgba(23, 32, 51, 0.16);
    max-height: 70vh;
    overflow-y: auto;
  }
  .fma-mnav__list[hidden] { display: none; }
  .fma-mnav__list li { margin: 0; padding: 0; list-style: none; }
  .fma-mnav__list li.fma-mnav__sep { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--fma-border); }
  .fma-mnav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 6px 10px;
    border-radius: calc(var(--fma-radius-sm) - 4px);
    color: var(--fma-ink) !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
  }
  .fma-mnav__item:hover,
  .fma-mnav__item:focus-visible { background: var(--fma-primary-soft); outline: none; }
  .fma-mnav__item.is-current { background: var(--fma-primary-soft); font-weight: 800; }
  .fma-mnav__item.is-logout { color: #c0392b !important; }
  .fma-mnav__iico { display: inline-flex; flex: 0 0 22px; color: var(--fma-primary); }
  .fma-mnav__item.is-logout .fma-mnav__iico { color: inherit; }
  .fma-mnav__iico svg { width: 20px; height: 20px; display: block; }
  .fma-mnav__ititle { flex: 1; min-width: 0; }
  .fma-mnav__badge { flex: none; }
  .fma-mnav__check { flex: none; width: 18px; height: 18px; color: var(--fma-primary); }

  .fma-style-minimal .fma-shell--mselect .fma-mnav__btn {
    border-width: 0 0 1px;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Refuerzos frente a estilos de enlaces del tema dentro del desplegable */
.fma-hw .fma-badge,
.fma-shell .fma-badge,
.fma-dashboard .fma-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
}
.fma-hw .fma-hw__cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

/* =====================================================================
   v2.6.0 - Linea temporal: solo se colorean los pasos alcanzados
   ===================================================================== */

/* Pasos pendientes: grises y atenuados, como desactivados */
.fma-step--todo .fma-step__icon {
  background: var(--fma-surface, #fff) !important;
  border-color: var(--fma-border, #e6eaf1) !important;
  color: #b4bac5 !important;
  box-shadow: none !important;
}
.fma-step--todo .fma-step__icon svg { opacity: 0.75; }
.fma-step--todo .fma-step__label { opacity: 0.7; }
.fma-step--todo::before { background: var(--fma-border, #e6eaf1) !important; }
.fma-steps--dark .fma-step--todo .fma-step__icon {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.4) !important;
}
.fma-steps--dark .fma-step--todo::before { background: rgba(255, 255, 255, 0.14) !important; }
.fma-style-minimal .fma-steps--dark .fma-step--todo .fma-step__icon {
  background: var(--fma-surface, #fff) !important;
  border-color: var(--fma-border) !important;
  color: #b4bac5 !important;
}
.fma-style-minimal .fma-steps--dark .fma-step--todo::before { background: var(--fma-border) !important; }

/* Paso en curso: halo del mismo color que el paso */
.fma-step--active .fma-step__icon { box-shadow: 0 0 0 4px var(--fma-accent-soft, rgba(15, 174, 126, 0.14)); }
.fma-steps--dark .fma-step--active .fma-step__icon { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1); }

/* Fecha bajo el paso alcanzado */
.fma-step--todo .fma-step__date { display: none; }
.fma-steps--card .fma-step__date,
.fma-steps--compact .fma-step__date { margin-top: -3px; font-size: 10.5px; font-weight: 600; }
.fma-steps--dark .fma-step__date { color: rgba(255, 255, 255, 0.6); }
.fma-style-minimal .fma-steps--dark .fma-step__date { color: var(--fma-muted); }

/* Modo semaforo: el color de los pasos alcanzados depende de lo avanzado
   que este el pedido (inicio rojo, en camino ambar, entregado verde). */
.fma-steps-traffic .fma-steps--lvl-low {
  --fma-accent: #d64545;
  --fma-accent-soft: #fbe9e9;
  --fma-on-accent: #ffffff;
  --fma-primary-rgb: 214, 69, 69;
}
.fma-steps-traffic .fma-steps--lvl-mid {
  --fma-accent: #e39400;
  --fma-accent-soft: #fdf1d8;
  --fma-on-accent: #ffffff;
  --fma-primary-rgb: 227, 148, 0;
}
.fma-steps-traffic .fma-steps--lvl-high {
  --fma-accent: #2fa86b;
  --fma-accent-soft: #e2f4ea;
  --fma-on-accent: #ffffff;
  --fma-primary-rgb: 47, 168, 107;
}

/* =====================================================================
   v2.6.0 - Ventana de valoracion rapida
   ===================================================================== */

.fma-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50% !important;
  background: transparent;
  color: var(--fma-muted, #6f7787);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.fma-x:hover { background: rgba(23, 32, 51, 0.06); color: var(--fma-ink, #172033); }
.fma-x svg { width: 16px; height: 16px; }

.fma-chip--reward {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--fma-radius-pill, 999px);
  background: #fff4d6;
  color: #8a5a00 !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

html.fma-modal-open,
html.fma-modal-open body { overflow: hidden !important; }

.fma-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 20, 30, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
  font-family: var(--fma-font, inherit);
  color: var(--fma-ink, #172033);
}
.fma-modal[hidden] { display: none !important; }
.fma-modal.is-open { opacity: 1; }

.fma-modal__dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 40px);
  border-radius: var(--fma-radius, 16px);
  background: var(--fma-surface, #fff);
  box-shadow: 0 24px 60px rgba(15, 20, 30, 0.28);
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.2s ease;
}
.fma-modal.is-open .fma-modal__dialog { transform: none; }

.fma-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 20px 16px 22px;
  border-bottom: 1px solid var(--fma-border, #e6eaf1);
}
.fma-modal__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  background: #fff4d6;
  color: #f5b301;
}
.fma-modal__ico svg { width: 24px; height: 24px; }
.fma-modal__htext { flex: 1; min-width: 0; }
.fma-modal__title { margin: 0 0 4px !important; font-size: 19px !important; font-weight: 800; line-height: 1.25; color: var(--fma-ink) !important; text-transform: none !important; }
.fma-modal__sub { margin: 0 0 8px; font-size: 13.5px; line-height: 1.45; color: var(--fma-muted); }

.fma-modal__list {
  margin: 0;
  padding: 16px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.fma-modal__list .fma-rv__img { flex-basis: 72px; width: 72px; height: 72px; }

.fma-modal__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 24px;
  text-align: center;
  font-weight: 700;
}
.fma-modal__done[hidden] { display: none; }

.fma-modal__foot {
  display: flex;
  justify-content: center;
  padding: 10px 20px 14px;
  border-top: 1px solid var(--fma-border, #e6eaf1);
}
.fma-modal__foot:empty { display: none; }

@media (max-width: 575px) {
  .fma-modal { align-items: flex-end; padding: 0; }
  .fma-modal__dialog {
    max-height: 92vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .fma-modal__list .fma-rv { flex-direction: row; gap: 12px; padding: 12px; }
  .fma-modal__list .fma-rv__img { flex-basis: 56px; width: 56px; height: 56px; }
  .fma-modal__list .fma-stars label svg { width: 28px; height: 28px; }
}

/* =====================================================================
   v2.6.0 - Aviso de compras sin valorar (checkout y confirmacion)
   ===================================================================== */

.fma-rvp {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 16px 0;
  padding: 16px 44px 16px 16px;
  border: 1px solid var(--fma-primary-line, #e6eaf1);
  border-radius: var(--fma-radius-sm, 12px);
  background: var(--fma-primary-soft, #f5f7fb);
  font-family: var(--fma-font, inherit);
  color: var(--fma-ink, #172033);
  text-align: left;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.fma-rvp.is-leaving { opacity: 0; transform: translateY(-4px); }
.fma-rvp__close { position: absolute; top: 6px; right: 6px; }

.fma-rvp__thumbs { position: relative; display: flex; flex: none; padding-right: 8px; }
.fma-rvp__thumb {
  display: block;
  width: 44px;
  height: 44px;
  margin-left: -14px;
  border: 2px solid var(--fma-surface, #fff);
  border-radius: 50% !important;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(23, 32, 51, 0.1);
}
.fma-rvp__thumb:first-child { margin-left: 0; }
.fma-rvp__thumb img { width: 100%; height: 100%; object-fit: contain; }
.fma-rvp__thumbs--sm .fma-rvp__thumb { width: 34px; height: 34px; margin-left: -11px; }
.fma-rvp__thumbs--sm .fma-rvp__thumb:first-child { margin-left: 0; }

.fma-rvp__count {
  position: absolute;
  top: -6px;
  right: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--fma-surface, #fff);
  border-radius: 999px !important;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}

.fma-rvp__body { flex: 1; min-width: 0; }
.fma-rvp__title { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; }
.fma-rvp__text { margin: 4px 0 8px; font-size: 13px; line-height: 1.45; color: var(--fma-muted); }
.fma-rvp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--fma-muted); }
.fma-rvp__stars { display: inline-flex; gap: 1px; color: #f5b301; }
.fma-rvp__stars svg { width: 15px; height: 15px; }
.fma-rvp__actions .fma-solid-btn { border: 0; cursor: pointer; padding: 9px 18px; }

/* En la columna estrecha del checkout: apilado */
#opc_content_side .fma-rvp,
.cart-grid-right .fma-rvp,
#js-checkout-summary .fma-rvp { flex-direction: column; gap: 10px; }

/* =====================================================================
   v2.6.0 - Sello flotante de opiniones
   ===================================================================== */

.fma-rstars { position: relative; display: inline-block; line-height: 0; vertical-align: middle; }
.fma-rstars__base,
.fma-rstars__fill { display: inline-flex; gap: 1px; white-space: nowrap; }
.fma-rstars__base { color: #dfe2e8; }
.fma-rstars__fill { position: absolute; top: 0; left: 0; overflow: hidden; color: #f5b301; }
.fma-rstars svg { flex: none; width: 14px; height: 14px; }
.fma-rstars--xs svg { width: 12px; height: 12px; }
.fma-rstars--md svg { width: 18px; height: 18px; }

.fma-rb {
  --fma-rb-bottom: 20px;
  position: fixed;
  bottom: calc(var(--fma-rb-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: 9990;
  font-family: var(--fma-font, inherit);
  color: var(--fma-ink, #172033);
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
}
.fma-rb--left { left: 20px; }
.fma-rb--right { right: 20px; }

.fma-rb__pill {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 16px 7px 7px;
  border: 1px solid rgba(23, 32, 51, 0.08);
  border-radius: 999px !important;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(23, 32, 51, 0.16);
  transition: transform 0.18s ease, box-shadow 0.18s ease, padding 0.18s ease;
}
.fma-rb__pill:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(23, 32, 51, 0.2); }
.fma-rb__pill:focus-visible { outline: 3px solid rgba(var(--fma-primary-rgb, 23, 32, 51), 0.35); outline-offset: 2px; }

.fma-rb__medal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  background: var(--fma-primary, #172033);
  color: var(--fma-on-primary, #fff);
}
.fma-rb__medal svg { width: 25px; height: 25px; }
.fma-rb__medal--lg { width: 52px; height: 52px; }
.fma-rb__medal--lg svg { width: 30px; height: 30px; }

.fma-rb__dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px !important;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}
.fma-rb.has-pending .fma-rb__dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  border: 2px solid #e5484d;
  animation: fma-rb-pulse 1.8s ease-out infinite;
}
@keyframes fma-rb-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.9); opacity: 0; }
}

.fma-rb__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fma-rb__row { display: inline-flex; align-items: center; gap: 7px; }
.fma-rb__score { font-size: 18px; font-weight: 800; line-height: 1.1; }
.fma-rb__score--lg { font-size: 30px; }
.fma-rb__outof { margin-left: -5px; font-size: 13px; font-weight: 700; color: var(--fma-muted, #6f7787); }
.fma-rb__sub { font-size: 12px; font-weight: 600; color: var(--fma-muted, #6f7787); white-space: nowrap; }

/* Minimizar: aspa sobre la pastilla, visible al pasar el raton */
.fma-rb__min {
  position: absolute;
  top: -8px;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(23, 32, 51, 0.1);
  background: #fff;
  box-shadow: 0 2px 6px rgba(23, 32, 51, 0.15);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.fma-rb__min svg { width: 11px; height: 11px; }
.fma-rb--left .fma-rb__min { left: auto; right: -8px; }
.fma-rb--right .fma-rb__min { left: -8px; }
.fma-rb:hover .fma-rb__min,
.fma-rb__min:focus-visible { opacity: 1; }
.fma-rb.is-open .fma-rb__min,
.fma-rb.is-min .fma-rb__min { display: none; }

.fma-rb.is-min .fma-rb__pill { padding: 5px; }
.fma-rb.is-min .fma-rb__info { display: none; }
.fma-rb.is-min .fma-rb__medal { width: 40px; height: 40px; }

/* Panel */
.fma-rb__panel {
  position: absolute;
  bottom: calc(100% + 12px);
  display: flex;
  flex-direction: column;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: min(560px, calc(100vh - 120px));
  border: 1px solid rgba(23, 32, 51, 0.08);
  border-radius: var(--fma-radius, 16px);
  background: #fff;
  box-shadow: 0 20px 50px rgba(23, 32, 51, 0.22);
  overflow: hidden;
  animation: fma-rb-in 0.18s ease;
}
.fma-rb__panel[hidden] { display: none; }
.fma-rb--left .fma-rb__panel { left: 0; }
.fma-rb--right .fma-rb__panel { right: 0; }
@keyframes fma-rb-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.fma-rb__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 44px 16px 18px;
  border-bottom: 1px solid var(--fma-border, #e6eaf1);
}
.fma-rb__htext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fma-rb__title { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fma-primary, #172033); }
.fma-rb__close { position: absolute; top: 8px; right: 8px; }

.fma-rb__scroll { padding: 14px 18px 4px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.fma-rb__dist { margin: 0 0 14px; padding: 0; list-style: none; }
.fma-rb__dist li { display: flex; align-items: center; gap: 10px; margin: 0 0 5px; font-size: 12px; font-weight: 600; color: var(--fma-muted, #6f7787); }
.fma-rb__dlabel { flex: 0 0 24px; }
.fma-rb__dval { flex: 0 0 34px; text-align: right; }
.fma-rb__bar { flex: 1; height: 7px; border-radius: 99px; background: #eef0f4; overflow: hidden; }
.fma-rb__bar span { display: block; height: 100%; border-radius: 99px; background: #f5b301; }

.fma-rb__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0 0 14px;
  padding: 12px;
  border-radius: var(--fma-radius-sm, 12px);
  background: var(--fma-primary-soft, #f5f7fb);
}
.fma-rb__cta[hidden] { display: none; }
.fma-rb__ctabody { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 140px; font-size: 13.5px; }
.fma-rb__cta .fma-solid-btn { width: 100%; justify-content: center; border: 0; cursor: pointer; padding: 10px 16px; }

.fma-rb__section { display: block; margin: 0 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fma-muted, #6f7787); }
.fma-rb__latest { margin: 0; padding: 0; list-style: none; }
.fma-rb__review { margin: 0; padding: 12px 0; border-top: 1px solid var(--fma-border, #e6eaf1); }
.fma-rb__review:first-child { border-top: 0; padding-top: 2px; }
.fma-rb__rtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.fma-rb__rdate { font-size: 11.5px; color: var(--fma-muted, #6f7787); }
.fma-rb__rtitle { display: block; margin-bottom: 2px; font-size: 13.5px; font-weight: 800; }
.fma-rb__rtext {
  display: -webkit-box;
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.45;
  color: #3d4556;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fma-rb__rby { display: block; font-size: 12px; font-weight: 700; color: var(--fma-muted, #6f7787); }
.fma-rb__rby em { font-style: normal; font-weight: 500; }

.fma-rb__all {
  display: block;
  padding: 13px 18px;
  border-top: 1px solid var(--fma-border, #e6eaf1);
  color: var(--fma-primary, #172033) !important;
  font-size: 13.5px;
  font-weight: 800;
  text-align: center;
  text-decoration: none !important;
}
.fma-rb__all:hover { background: var(--fma-primary-soft, #f5f7fb); }

/* Bocadillo de invitacion */
.fma-rb__nudge {
  position: absolute;
  bottom: calc(100% + 12px);
  display: flex;
  align-items: flex-start;
  width: 290px;
  max-width: calc(100vw - 32px);
  border-radius: var(--fma-radius-sm, 12px);
  background: #fff;
  box-shadow: 0 14px 36px rgba(23, 32, 51, 0.22);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.fma-rb__nudge.is-in { opacity: 1; transform: none; }
.fma-rb--left .fma-rb__nudge { left: 0; }
.fma-rb--right .fma-rb__nudge { right: 0; }
.fma-rb__nudge::after {
  content: "";
  position: absolute;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
}
.fma-rb--left .fma-rb__nudge::after { left: 22px; }
.fma-rb--right .fma-rb__nudge::after { right: 22px; }
.fma-rb__nbody {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 12px 4px 12px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fma-rb__nimg { flex: none; width: 48px; height: 48px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid var(--fma-border, #e6eaf1); }
.fma-rb__ntext { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12px; color: var(--fma-muted, #6f7787); }
.fma-rb__ntext strong { font-size: 13.5px; line-height: 1.3; color: var(--fma-ink, #172033); }
.fma-rb__nstars { display: inline-flex; gap: 2px; color: #f5b301; }
.fma-rb__nstars svg { width: 16px; height: 16px; }
.fma-rb__nclose { margin: 4px 4px 0 0; width: 26px; height: 26px; }

/* Movil */
@media (max-width: 767px) {
  .fma-rb--left { left: 12px; }
  .fma-rb--right { right: 12px; }
  .fma-rb--m-hidden { display: none !important; }
  .fma-rb--m-compact .fma-rb__pill { padding: 5px 12px 5px 5px; gap: 8px; }
  .fma-rb--m-compact .fma-rb__medal:not(.fma-rb__medal--lg) { width: 36px; height: 36px; }
  .fma-rb--m-compact .fma-rb__medal:not(.fma-rb__medal--lg) svg { width: 20px; height: 20px; }
  .fma-rb--m-compact .fma-rb__pill .fma-rb__sub,
  .fma-rb--m-compact .fma-rb__pill .fma-rstars { display: none; }
  .fma-rb--m-compact .fma-rb__pill .fma-rb__score { font-size: 15px; }
  .fma-rb--m-compact .fma-rb__pill .fma-rb__score::after { content: " ★"; color: #f5b301; }
  .fma-rb__min { opacity: 1; }
  .fma-rb__panel { position: fixed; left: 8px !important; right: 8px !important; bottom: 76px; width: auto; max-width: none; max-height: calc(100vh - 110px); }
}

@media (prefers-reduced-motion: reduce) {
  .fma-rb.has-pending .fma-rb__dot::after { animation: none; }
  .fma-rb__panel { animation: none; }
}

@media print {
  .fma-rb,
  .fma-rvp,
  .fma-modal { display: none !important; }
}

/* v2.6.1 - fecha de la ultima opinion */
.fma-rb__recent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: #2fa86b;
}
.fma-rb__recent::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2fa86b;
  box-shadow: 0 0 0 3px rgba(47, 168, 107, 0.18);
}

/* v2.6.2 - anillo de opiniones: con 0 valorados el anillo queda vacio y
   el numero pendiente toma el color del nivel */
.fma-rings-traffic .fma-hw span.fma-ring--reviews.fma-ring--lvl-low .fma-ring__label b { color: #d64545 !important; }
.fma-rings-traffic .fma-hw span.fma-ring--reviews.fma-ring--lvl-mid .fma-ring__label b { color: #b57900 !important; }

/* Menu movil: filas algo mas compactas */
@media (max-width: 991px) {
  .fma-mnav__item { min-height: 46px; padding: 4px 10px; line-height: 1.25; }
}

/* =======================================================================
 * v2.6.4 - Desplegable propio sobre ps_customeraccountlinks
 * (#block_myaccount_infos usado como icono de cuenta en la cabecera:
 * MasterXtreme / Aasias con Leo Daone). El JS añade .fma-cal-host al
 * bloque y .fma-cal-open mientras esta abierto.
 * ===================================================================== */
.fma-cal-host {
  position: relative;
}

.fma-cal-host > .fma-hw.fma-hw--dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  z-index: 1060;
  margin-top: 10px;
  width: 360px;
  max-width: calc(100vw - 20px);
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
  font-size: 14px;
  white-space: normal;
}

.fma-cal-host.fma-cal-open > .fma-hw.fma-hw--dropdown {
  display: block;
}

/* Puente invisible para no perder el hover entre el icono y el panel. */
.fma-cal-host > .fma-hw.fma-hw--dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

/* El tema estiliza los enlaces del bloque (blanco, mayusculas): se anula
   dentro del panel salvo en los botones de color. */
.fma-cal-host .fma-hw a:not(.fma-solid-btn) {
  color: var(--fma-ink, #172033) !important;
  text-transform: none !important;
  background: transparent;
}

.fma-cal-host .fma-hw .fma-hw__alt,
.fma-cal-host .fma-hw .fma-hw__logout {
  color: var(--fma-primary, #1F6FEB) !important;
}

.fma-cal-host .fma-hw .fma-solid-btn {
  text-transform: none !important;
}

@media (max-width: 767px) {
  .fma-cal-host > .fma-hw.fma-hw--dropdown {
    width: auto;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

/* v2.6.5 - Refuerzo (el JS ademas lo pone en linea con !important). */
html body #block_myaccount_infos.fma-cal-host .account-list,
html body #block_myaccount_infos.fma-cal-host:hover .account-list,
html body #block_myaccount_infos.fma-cal-host .account-list.collapse.in {
  display: none !important;
}

/* v2.6.6 - Panel con altura limitada a la ventana (el JS fija max-height)
   y desplazamiento interno sin arrastrar la pagina. */
.fma-cal-host > .fma-hw.fma-hw--dropdown {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}