/* ===== WXSIM PRO — estilo “card PRO” ===== */

.wxsim-page h2{ margin:8px 0 12px; }

/* Tarjeta */
.wxsec{
  position:relative;
  box-sizing:border-box;
  background:linear-gradient(180deg, color-mix(in oklab, var(--card) 92%, transparent), var(--card));
  border:1px solid color-mix(in oklab, var(--border) 85%, transparent);
  border-radius:calc(var(--radius) + 2px);
  box-shadow:var(--shadow-1);
  padding:16px 16px 14px;
  margin-bottom:16px;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.wxsec:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-2);
  border-color:color-mix(in oklab, var(--border) 65%, transparent);
}

/* Cabecera en 3 áreas: icono / título / chips */
.wxsec-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  min-height:56px;
}

/* Icono (mismo tamaño que en cards) */
.wxsec-icon{ width:56px; height:56px; }
.wxsec-icon .wx-ic, .wxsec-icon .wx-ic-stack{ width:56px; height:56px; }

/* Título */
.wxsec-title{
  font-size:16px;
  font-weight:700;
  letter-spacing:.2px;
}

/* Chips alineados a la derecha, con envoltura */
.wxsec-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  margin-left:auto;
  max-width:min(52vw, 620px);
}

/* Chips (igual que index, un pelín más compactos) */
.wx-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; line-height:1.25;
  border:1px solid var(--border);
  background:color-mix(in oklab, var(--soft) 90%, transparent);
  padding:4px 10px;
  border-radius:999px;
  white-space:normal; overflow-wrap:anywhere; max-width:100%;
}

/* Divisor fino antes del texto */
.wxsec-body{
  margin-top:10px; color:var(--fg);
  position:relative; padding-top:10px;
}
.wxsec-body::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height:1px; background:color-mix(in oklab, var(--border) 75%, transparent);
  transform:translateY(-1px);
}

/* Párrafo */
.wxline{ margin:0; color:var(--muted-fg); font-size:14px; }

/* “Updated” del PRO (si viniera del backend) oculto */
.wxsim-pro-updated{ display:none; }

/* Animación de icono en transición (como en cards) */
.wx-ic-stack{ position:relative; width:56px; height:56px; flex:0 0 auto; }
.wx-ic-stack svg{ position:absolute; inset:0; opacity:0; animation:wxFade 8s linear infinite; }
.wx-ic-stack svg:first-child{ opacity:1; animation-delay:0s; }
.wx-ic-stack svg:last-child{ animation-delay:4s; }
@keyframes wxFade{
  0%{opacity:1} 40%{opacity:1} 50%{opacity:0} 90%{opacity:0} 100%{opacity:1}
}

/* ===== Responsive ===== */

/* Tablets: chips debajo cuando no quepan */
@media (max-width:1024px){
  .wxsec-head{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "icon title"
      "badges badges";
  }
  .wxsec-icon{ grid-area:icon; }
  .wxsec-title{ grid-area:title; }
  .wxsec-badges{ grid-area:badges; justify-content:flex-start; margin-left:0; max-width:none; }
}

/* Móvil */
@media (max-width:760px){
  .wxsec{ padding:14px; }
  .wxsec-title{ font-size:15px; }
  .wxline{ font-size:13.5px; }
  .wxsec-icon, .wxsec-icon .wx-ic, .wxsec-icon .wx-ic-stack{ width:62px; height:62px; }
  .wx-chip{ font-size:12.5px; padding:3px 9px; }
}

/* Ultra-estrecho */
@media (max-width:360px){
  .wxchip{ font-size:12px; }
}
/* —— Separador entre cards y detalle —— */
.wxsim-sep{
  height:1px;
  background:color-mix(in oklab, var(--border) 80%, transparent);
  margin:18px 0 22px;
  border-radius:999px;
}