/* ============================================================
   PYM360 · COMPONENT — Tabs
   Capa 2 — primitivo del DS.

   Markup:
     <div class="pym-tabs">
       <button class="pym-tab pym-tab--active">Tab 1 <span class="pym-tab-pill">8</span></button>
       <button class="pym-tab">Tab 2</button>
     </div>

   Sigue siendo compatible con el patron viejo onclick="switchTab(...)".
   ============================================================ */

.pym-tabs{
  display:flex;
  gap:0;
  border-bottom:1px solid var(--pym-color-border);
  margin-bottom:var(--pym-space-4);
  overflow-x:auto;
  scrollbar-width:none;
}
.pym-tabs::-webkit-scrollbar{display:none}

.pym-tab{
  padding:10px 14px;
  font-size:var(--pym-fs-md);
  font-weight:var(--pym-fw-medium);
  color:var(--pym-color-text-muted);
  cursor:pointer;
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  display:inline-flex;
  align-items:center;
  gap:7px;
  transition:all var(--pym-trans-base);
  margin-bottom:-1px;
  font-family:inherit;
  white-space:nowrap;
}
.pym-tab:hover:not(.pym-tab--active){color:var(--pym-color-text-dim)}
.pym-tab--active{
  color:var(--pym-color-text);
  border-bottom-color:var(--pym-color-accent-2);
}
.pym-tab svg{width:14px;height:14px;flex-shrink:0;opacity:.8}
.pym-tab--active svg{opacity:1;color:var(--pym-color-accent-2)}

.pym-tab-pill{
  font-size:var(--pym-fs-xs);
  background:var(--pym-color-surface-2);
  color:var(--pym-color-text-dim);
  padding:1px 7px;
  border-radius:var(--pym-radius-md);
  font-family:var(--pym-font-mono);
  font-weight:var(--pym-fw-semibold);
  flex-shrink:0;
}
.pym-tab--active .pym-tab-pill{
  background:var(--pym-color-accent-dim);
  color:var(--pym-color-accent-2);
}

/* Compatibilidad con clases viejas .tab/.tab.active si conviven */
.pym-tabs .tab{padding:10px 14px;font-size:var(--pym-fs-md);font-weight:var(--pym-fw-medium);color:var(--pym-color-text-muted);cursor:pointer;background:transparent;border:none;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:7px;transition:all var(--pym-trans-base);margin-bottom:-1px;white-space:nowrap}
.pym-tabs .tab:hover:not(.active){color:var(--pym-color-text-dim)}
.pym-tabs .tab.active{color:var(--pym-color-text);border-bottom-color:var(--pym-color-accent-2)}

/* TAB CONTENT visibility (compat con switchTab que usa .tab-content/.active) */
.pym-tab-content{display:none}
.pym-tab-content--active{display:block}