/* ============================================================
   PYM360 · COMPONENT — Stat card / Stat cell
   Capa 2 — primitivo del DS. Reutilizable.

   Markup canónico:
     <div class="pym-stat">
       <div class="pym-stat-h">
         <div class="pym-stat-lbl">Etiqueta</div>
         <div class="pym-stat-icon"><svg/></div>
       </div>
       <div class="pym-stat-val">$335.336</div>
       <div class="pym-stat-foot">
         <span class="pym-stat-delta pym-stat-delta--up">↑ +8%</span>
         <span class="pym-stat-sub">vs ayer</span>
       </div>
     </div>

   Variants de icono: --green, --gold, --red (color del ícono superior)
   Layout helpers: .pym-stat-grid (grid responsive)
   ============================================================ */

/* Grid contenedor para varios stats */
.pym-stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--pym-space-3);
  margin-bottom:var(--pym-space-6);
}
.pym-stat-grid--4{grid-template-columns:repeat(4,1fr)}
.pym-stat-grid--5{grid-template-columns:repeat(5,1fr)}
.pym-stat-grid--6{grid-template-columns:repeat(6,1fr)}

@media (max-width:980px){
  .pym-stat-grid--4,.pym-stat-grid--5,.pym-stat-grid--6{grid-template-columns:repeat(2,1fr)}
}

/* ===== STAT CARD individual ===== */
.pym-stat{
  background:var(--pym-color-surface);
  border:1px solid var(--pym-color-border);
  border-radius:var(--pym-radius-xl);
  padding:var(--pym-space-3) var(--pym-space-4);
  position:relative;
  overflow:hidden;
  transition:all var(--pym-trans-base);
}
.pym-stat:hover{
  border-color:var(--pym-color-border-strong);
  background:var(--pym-color-surface-2);
}
.pym-stat--clickable{cursor:pointer}
.pym-stat--clickable:hover{
  border-color:var(--pym-color-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--pym-color-accent) 12%, transparent);
}

.pym-stat-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--pym-space-2);
  gap:var(--pym-space-2);
}

.pym-stat-lbl{
  font-size:var(--pym-fs-sm);
  color:var(--pym-color-text-muted);
  font-weight:var(--pym-fw-medium);
  letter-spacing:.01em;
}

/* Icono pequeño arriba a la derecha */
.pym-stat-icon{
  width:24px;height:24px;
  border-radius:var(--pym-radius-sm);
  background:var(--pym-color-accent-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--pym-color-accent-2);
  flex-shrink:0;
}
.pym-stat-icon svg{width:14px;height:14px}
.pym-stat-icon--green{background:var(--pym-color-success-dim);color:var(--pym-color-success)}
.pym-stat-icon--gold{background:var(--pym-color-gold-dim);color:var(--pym-color-gold)}
.pym-stat-icon--red{background:var(--pym-color-danger-dim);color:var(--pym-color-danger)}
.pym-stat-icon--purple{background:var(--pym-color-purple-dim);color:var(--pym-color-purple)}
.pym-stat-icon--warning{background:var(--pym-color-warning-dim);color:var(--pym-color-warning)}

/* Valor principal (número grande) */
.pym-stat-val{
  font-size:var(--pym-fs-2xl);
  font-weight:var(--pym-fw-semibold);
  letter-spacing:-.02em;
  font-feature-settings:"tnum";
  color:var(--pym-color-text);
  line-height:1;
  font-family:var(--pym-font-sans);
}
.pym-stat-val--mono{font-family:var(--pym-font-mono);font-size:var(--pym-fs-xl)}
.pym-stat-val--success{color:var(--pym-color-success)}
.pym-stat-val--danger{color:var(--pym-color-danger)}
.pym-stat-val--accent{color:var(--pym-color-accent-2)}
.pym-stat-val--purple{color:var(--pym-color-purple)}
.pym-stat-val--gold{color:var(--pym-color-gold)}

/* Foot: delta + sub */
.pym-stat-foot{
  margin-top:var(--pym-space-2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:var(--pym-fs-sm);
  gap:var(--pym-space-2);
}
.pym-stat-delta{
  font-family:var(--pym-font-mono);
  font-weight:var(--pym-fw-medium);
  font-size:var(--pym-fs-sm);
}
.pym-stat-delta--up{color:var(--pym-color-success)}
.pym-stat-delta--down{color:var(--pym-color-danger)}
.pym-stat-delta--neutral{color:var(--pym-color-text-muted)}
.pym-stat-sub{color:var(--pym-color-text-subtle);font-size:var(--pym-fs-sm)}

/* ============================================================
   STAT CELL — variante densa para barras inline (ver Cotizador)
   Markup:
     <div class="pym-stat-strip">
       <div class="pym-stat-cell">
         <div class="pym-stat-cell-lbl">Lbl</div>
         <div class="pym-stat-cell-val">123</div>
         <div class="pym-stat-cell-sub">extra</div>
       </div>
       ...
     </div>
   ============================================================ */
.pym-stat-strip{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  background:var(--pym-color-surface);
  border:1px solid var(--pym-color-border);
  border-radius:var(--pym-radius-lg);
  overflow:hidden;
}
.pym-stat-cell{
  padding:var(--pym-space-2) var(--pym-space-3);
  border-right:1px solid var(--pym-color-border);
}
.pym-stat-cell:last-child{border-right:none}
.pym-stat-cell-lbl{
  font-size:var(--pym-fs-xs);
  color:var(--pym-color-text-muted);
  font-weight:var(--pym-fw-medium);
  text-transform:uppercase;
  letter-spacing:.04em;
  display:flex;align-items:center;gap:5px;
  margin-bottom:3px;
}
.pym-stat-cell-val{
  font-size:var(--pym-fs-xl);
  font-weight:var(--pym-fw-semibold);
  letter-spacing:-.02em;
  font-feature-settings:"tnum";
  color:var(--pym-color-text);
  line-height:1;
}
.pym-stat-cell--ok .pym-stat-cell-val{color:var(--pym-color-success)}
.pym-stat-cell--warn .pym-stat-cell-val{color:var(--pym-color-warning)}
.pym-stat-cell--danger .pym-stat-cell-val{color:var(--pym-color-danger)}
.pym-stat-cell-sub{
  font-size:var(--pym-fs-xs);
  color:var(--pym-color-text-muted);
  margin-top:3px;
  font-family:var(--pym-font-mono);
}

@media (max-width:980px){
  .pym-stat-strip{grid-template-columns:repeat(3,1fr)}
  .pym-stat-cell{border-bottom:1px solid var(--pym-color-border)}
}

/* ===== TEMA CLARO ===== */
[data-theme="light"] .pym-stat:hover{background:var(--pym-color-surface-2)}