/* =========================================================
   FIGUES · Guías de absorción y tallas
   Diseño basado en el sistema de marca (foto 3)
   Todo va prefijado con .fg- para no chocar con tu tema
   ========================================================= */

:root{
  --fg-navy:        #2A2154;
  --fg-navy-soft:   rgba(42, 33, 84, .55);
  --fg-cream:       #FFFBF5;
  --fg-peach:       #FBE4C7;  /* banda de cabecera */
  --fg-peach-line:  #2A2154;
  --fg-orange:      #F48452;  /* coral acento */
  --fg-orange-deep: #DD8B2D;  /* naranja */
  --fg-lila:        #9B9BE0;  /* periwinkle */
  --fg-row-tint:    rgba(42, 33, 84, .04);
  --fg-font:        'Space Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif;
  --fg-font-mono:   'JetBrains Mono', ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fg-drawer-w:    480px;
  --fg-ease:        cubic-bezier(.4, 0, .15, 1);
}

/* ---------- DISPARADORES (botones que abren las guías) ---------- */
.fg-trigger{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--fg-font-mono);
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--fg-navy); background:none; border:0; cursor:pointer;
  padding:.35em 0; line-height:1.2;
  border-bottom:1.5px solid var(--fg-navy);
  transition:color .18s var(--fg-ease), border-color .18s var(--fg-ease);
}
.fg-trigger:hover{ color:var(--fg-orange); border-color:var(--fg-orange); }
.fg-trigger svg{ width:1.05em; height:1.05em; flex:none; }
.fg-trigger-wrap{ display:flex; flex-wrap:wrap; gap:1.4rem; margin:.6rem 0; }

/* variante pastilla */
.fg-trigger.fg-pill{
  border:1.5px solid var(--fg-navy); border-radius:999px;
  padding:.6em 1.2em;
}
.fg-trigger.fg-pill:hover{ background:var(--fg-navy); color:var(--fg-cream); }
.fg-trigger.fg-pill:hover svg [stroke]{ stroke:var(--fg-cream); }
.fg-trigger.fg-pill:hover svg [fill]:not([fill="none"]){ fill:var(--fg-cream); }

/* ---------- OVERLAY ---------- */
.fg-overlay{
  position:fixed; inset:0; z-index:99998;
  background:rgba(42, 33, 84, .35);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--fg-ease), visibility .35s var(--fg-ease);
}
.fg-overlay.is-open{ opacity:1; visibility:visible; }

/* ---------- DRAWER / PANEL ---------- */
.fg-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:99999;
  width:var(--fg-drawer-w); max-width:100%;
  background:var(--fg-cream);
  font-family:var(--fg-font);
  color:var(--fg-navy);
  transform:translateX(100%);
  transition:transform .42s var(--fg-ease);
  display:flex; flex-direction:column;
  box-shadow:-12px 0 40px rgba(42, 33, 84, .14);
}
.fg-drawer.is-open{ transform:translateX(0); }

/* cabecera melocotón */
.fg-drawer__head{
  background:var(--fg-peach);
  border-bottom:2px solid var(--fg-navy);
  padding:1.6rem 1.8rem 1.5rem;
  position:relative; flex:none;
}
.fg-eyebrow{
  font-family:var(--fg-font-mono);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-navy); display:flex; align-items:center; gap:.5em;
  margin:0 0 .35rem;
}
.fg-eyebrow::before{
  content:""; width:.45em; height:.45em; border-radius:50%;
  background:var(--fg-orange); display:inline-block;
}
.fg-title{
  margin:0; font-weight:700; line-height:1.02;
  font-size:2.4rem; letter-spacing:-.01em;
}
.fg-title .fg-accent{ color:var(--fg-orange); }
.fg-title .fg-accent-lila{ color:var(--fg-lila); }

/* botón cerrar */
.fg-close{
  position:absolute; top:1.4rem; right:1.4rem;
  width:2.6rem; height:2.6rem; border-radius:50%;
  border:1.5px solid var(--fg-navy); background:transparent;
  color:var(--fg-navy); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--fg-ease), transform .2s var(--fg-ease);
}
.fg-close:hover{ background:var(--fg-navy); color:var(--fg-cream); transform:rotate(90deg); }
.fg-close svg{ width:1.1rem; height:1.1rem; }

/* cuerpo con scroll */
.fg-drawer__body{
  padding:1.8rem 1.8rem 2.4rem;
  overflow-y:auto; flex:1 1 auto;
  -webkit-overflow-scrolling:touch;
}
.fg-intro{ font-size:.98rem; line-height:1.55; color:var(--fg-navy); margin:0 0 1.6rem; }
.fg-intro + .fg-intro{ margin-top:-.8rem; }
.fg-subhead{
  font-family:var(--fg-font-mono);
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  margin:1.8rem 0 .9rem; color:var(--fg-navy);
}

/* ---------- TABLA DE ABSORCIÓN ---------- */
.fg-table{ width:100%; border-collapse:collapse; }
.fg-table th, .fg-table td{ padding:.95rem .5rem; text-align:center; }
.fg-table thead th{
  border-bottom:2px solid var(--fg-navy);
  vertical-align:bottom;
}
.fg-col-label{
  font-family:var(--fg-font-mono);
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  display:block; margin-bottom:.5rem; color:var(--fg-navy);
}
.fg-drops{ display:flex; justify-content:center; gap:3px; }
.fg-drop{ width:14px; height:18px; }
.fg-drop--full path{ fill:var(--fg-navy); stroke:var(--fg-navy); }
.fg-drop--empty path{ fill:none; stroke:var(--fg-navy); stroke-width:1.4; }

.fg-table tbody tr:nth-child(even){ background:var(--fg-row-tint); }
.fg-row-name{
  text-align:left; display:flex; align-items:center; gap:.7rem;
  font-weight:500; font-size:.98rem; white-space:nowrap;
}
.fg-row-name svg{ width:22px; height:22px; flex:none; color:var(--fg-navy); }
.fg-cell-num{ font-family:var(--fg-font-mono); font-size:1rem; font-weight:500; }

/* ---------- TABLA DE TALLAS ---------- */
.fg-size-table{ width:100%; border-collapse:collapse; }
.fg-size-table th{
  font-family:var(--fg-font-mono);
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.6rem 1rem 1rem; border-bottom:2px solid var(--fg-navy);
}
.fg-size-table th:first-child{ text-align:left; }
.fg-size-table th:last-child{ text-align:right; }
.fg-size-table td{ padding:1.05rem 1rem; }
.fg-size-table td:first-child{ text-align:left; font-weight:700; font-size:1.05rem; }
.fg-size-table td:last-child{ text-align:right; font-family:var(--fg-font-mono); }
.fg-size-table tbody tr:nth-child(even){ background:var(--fg-row-tint); }

/* medir cadera */
.fg-measure-img{
  width:100%; border-radius:6px; margin-top:.6rem;
  display:block; border:1px solid rgba(42,33,84,.12);
}
.fg-measure-ph{
  width:100%; aspect-ratio:16/10; border-radius:6px; margin-top:.6rem;
  border:1.5px dashed var(--fg-navy-soft);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--fg-font-mono); font-size:.72rem; letter-spacing:.05em;
  color:var(--fg-navy-soft); padding:1rem; line-height:1.5;
}
.fg-note{
  font-size:.9rem; line-height:1.5; color:var(--fg-navy);
  background:var(--fg-row-tint); border-left:3px solid var(--fg-orange);
  padding:.85rem 1rem; border-radius:0 4px 4px 0; margin-top:1.2rem;
}

/* scrollbar discreto */
.fg-drawer__body::-webkit-scrollbar{ width:8px; }
.fg-drawer__body::-webkit-scrollbar-thumb{ background:rgba(42,33,84,.2); border-radius:8px; }

/* ---------- BLINDAJE CONTRA EL TEMA ----------
   Muchos temas convierten las tablas en bloques apilados en móvil.
   Forzamos el comportamiento de tabla para que se vea igual en todos lados. */
.fg-drawer, .fg-drawer *{ box-sizing:border-box; }
.fg-drawer table{
  display:table !important; width:100% !important;
  border:0 !important; margin:0 !important; background:transparent !important;
}
.fg-drawer thead{ display:table-header-group !important; }
.fg-drawer tbody{ display:table-row-group !important; }
.fg-drawer tr{ display:table-row !important; }
.fg-drawer th, .fg-drawer td{
  display:table-cell !important;
  border:0 !important;
  white-space:normal;
}
/* algunos temas inyectan el nombre de la columna con ::before */
.fg-drawer th::before, .fg-drawer td::before{ content:none !important; }
/* mantener el rayado de filas por encima del tema */
.fg-drawer .fg-table tbody tr:nth-child(even),
.fg-drawer .fg-size-table tbody tr:nth-child(even){ background:var(--fg-row-tint) !important; }
.fg-drawer .fg-table tbody tr, .fg-drawer .fg-size-table tbody tr{ border:0 !important; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:600px){
  :root{ --fg-drawer-w:100%; }
  .fg-drawer__head{ padding:1.3rem 1.1rem 1.2rem; }
  .fg-drawer__body{ padding:1.3rem 1rem 2rem; }
  .fg-title{ font-size:2rem; }

  /* TABLA DE ABSORCIÓN: columnas a partes iguales y con aire (forzado sobre el tema) */
  .fg-drawer .fg-table{ table-layout:fixed !important; }
  .fg-drawer .fg-table th:first-child,
  .fg-drawer .fg-table td:first-child{ width:31% !important; }
  .fg-drawer .fg-table th,
  .fg-drawer .fg-table td{ padding:1.05rem .4rem !important; text-align:center !important; }
  .fg-drawer .fg-table td:first-child{ text-align:left !important; }
  .fg-row-name{ font-size:.85rem; gap:.4rem; }
  .fg-row-name svg{ width:18px; height:18px; }
  .fg-col-label{ font-size:.62rem; letter-spacing:.01em; margin-bottom:.45rem; }
  .fg-cell-num{ font-size:1rem; }
  .fg-drop{ width:10px !important; height:13px !important; }
  .fg-drops{ gap:2px; }

  /* TABLA DE TALLAS: filas más altas y celdas más anchas (forzado sobre el tema) */
  .fg-drawer .fg-size-table th,
  .fg-drawer .fg-size-table td{ padding:1.2rem 1.1rem !important; }
  .fg-drawer .fg-size-table td:first-child{ font-size:1.1rem !important; text-align:left !important; }
  .fg-drawer .fg-size-table td:last-child{ font-size:.95rem !important; text-align:right !important; }
}

/* respeta preferencias de movimiento */
@media (prefers-reduced-motion:reduce){
  .fg-drawer, .fg-overlay, .fg-close{ transition:none; }
}