/**
 * 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-font: inherit;
}

.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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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);
  }
}