/* ============================================================
   PYM360 · COMPONENT — Card
   Capa 2 — primitivo del DS. Reutilizable en toda la app.

   Markup canónico:
     <div class="pym-card">
       <div class="pym-card-h">
         <h3>Título <span class="pym-card-h-count">N</span></h3>
         <div class="pym-card-h-actions">...</div>
       </div>
       <div class="pym-card-body">...</div>
       <div class="pym-card-foot">...</div>
     </div>

   Variants:
     .pym-card--accent    barra superior con gradiente accent
     .pym-card--flush     sin padding en body
     .pym-card--compact   header más compacto
   ============================================================ */

.pym-card{
  background:var(--pym-color-surface);
  border:1px solid var(--pym-color-border);
  border-radius:var(--pym-radius-xl);
  overflow:hidden;
  transition:border-color var(--pym-trans-base);
}
.pym-card:hover{border-color:var(--pym-color-border-strong)}

.pym-card--accent{position:relative}
.pym-card--accent::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--pym-color-accent-2),transparent);
}

/* ===== HEADER ===== */
.pym-card-h{
  padding:var(--pym-space-3) var(--pym-space-4);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--pym-space-3);
  border-bottom:1px solid var(--pym-color-border);
  min-height:46px;
}
.pym-card--compact .pym-card-h{padding:var(--pym-space-2) var(--pym-space-3);min-height:38px}

.pym-card-h h3{
  font-size:var(--pym-fs-md);
  font-weight:var(--pym-fw-semibold);
  letter-spacing:-.005em;
  color:var(--pym-color-text);
  display:flex;
  align-items:center;
  gap:var(--pym-space-2);
  margin:0;
}

.pym-card-h-count{
  font-size:var(--pym-fs-xs);
  color:var(--pym-color-text-muted);
  background:var(--pym-color-surface-2);
  padding:1px 7px;
  border-radius:var(--pym-radius-sm);
  font-family:var(--pym-font-mono);
  font-weight:var(--pym-fw-semibold);
}

.pym-card-h-meta{
  font-size:var(--pym-fs-sm);
  color:var(--pym-color-text-muted);
  display:flex;
  align-items:center;
  gap:var(--pym-space-3);
  margin-left:auto;
}
.pym-card-h-meta b{color:var(--pym-color-text);font-weight:var(--pym-fw-medium)}

.pym-card-h-actions{
  display:flex;
  gap:var(--pym-space-1);
  flex-shrink:0;
}
.pym-card-h-actions .pym-btn-ghost{
  font-size:var(--pym-fs-sm);
  color:var(--pym-color-text-muted);
  background:transparent;
  border:1px solid transparent;
  padding:4px 10px;
  border-radius:var(--pym-radius-sm);
  cursor:pointer;
  font-family:inherit;
  transition:all var(--pym-trans-fast);
}
.pym-card-h-actions .pym-btn-ghost:hover{
  color:var(--pym-color-text);
  background:var(--pym-color-surface-2);
  border-color:var(--pym-color-border);
}

.pym-card-h-more{
  font-size:var(--pym-fs-sm);
  color:var(--pym-color-text-muted);
  cursor:pointer;
  text-decoration:none;
  transition:color var(--pym-trans-fast);
}
.pym-card-h-more:hover{color:var(--pym-color-text)}

/* Avatar mark inline en h3 (ej. para Jarvis ◈) */
.pym-card-h-mark{
  width:18px;height:18px;
  border-radius:var(--pym-radius-xs);
  background:linear-gradient(135deg,var(--pym-color-accent-2),var(--pym-color-purple));
  display:flex;align-items:center;justify-content:center;
  font-size:var(--pym-fs-xs);color:#0a0b0d;font-weight:var(--pym-fw-black);
  flex-shrink:0;
}

/* ===== BODY ===== */
.pym-card-body{padding:var(--pym-space-4)}
.pym-card--flush .pym-card-body{padding:0}
.pym-card-body--padded-x{padding:0 var(--pym-space-4)}
.pym-card-body--padded-y{padding:var(--pym-space-4) 0}

/* ===== FOOTER ===== */
.pym-card-foot{
  padding:var(--pym-space-3) var(--pym-space-4);
  border-top:1px solid var(--pym-color-border);
  display:flex;
  align-items:center;
  gap:var(--pym-space-3);
  font-size:var(--pym-fs-sm);
  color:var(--pym-color-text-muted);
  flex-wrap:wrap;
}
.pym-card-foot-spacer{flex:1}

/* ===== TÍTULO LIVE INDICATOR (puntito pulsante) ===== */
.pym-live-dot{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:var(--pym-fs-xs);
  color:var(--pym-color-success);
  font-weight:var(--pym-fw-medium);
}
.pym-live-dot::before{
  content:'';
  width:6px;height:6px;
  background:var(--pym-color-success);
  border-radius:50%;
  animation:pym-live-pulse 2s infinite;
}
@keyframes pym-live-pulse{0%,100%{opacity:1}50%{opacity:.4}}

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