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

   Markup:
     <button class="pym-btn">Default</button>
     <button class="pym-btn pym-btn--primary">Primary</button>
     <button class="pym-btn pym-btn--success">Success</button>
     <button class="pym-btn pym-btn--ghost">Ghost</button>
     <button class="pym-btn pym-btn--sm">Small</button>
     <button class="pym-btn pym-btn--icon"><svg/></button>

   Variants:
     --primary  CTA azul con sombra accent
     --success  CTA verde para enviar
     --danger   CTA rojo destructivo
     --ghost    Transparente, hover sutil
     --sm       Más chico (form rows densas)
     --lg       Más grande (CTA principal)
     --icon     Solo icono cuadrado
   ============================================================ */

.pym-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family:var(--pym-font-sans);
  font-size:var(--pym-fs-base);
  font-weight:var(--pym-fw-medium);
  padding:7px 13px;
  border-radius:var(--pym-radius-md);
  border:1px solid var(--pym-color-border);
  background:var(--pym-color-surface-2);
  color:var(--pym-color-text);
  cursor:pointer;
  transition:all var(--pym-trans-base);
  white-space:nowrap;
  user-select:none;
  line-height:1.2;
}
.pym-btn:hover:not(:disabled){
  background:var(--pym-color-surface-3);
  border-color:var(--pym-color-border-strong);
}
.pym-btn:active:not(:disabled){transform:translateY(1px)}
.pym-btn:disabled{opacity:.4;cursor:not-allowed}
.pym-btn:focus-visible{outline:2px solid var(--pym-color-accent);outline-offset:2px}
.pym-btn svg{width:14px;height:14px;flex-shrink:0}

/* ===== VARIANTS ===== */
.pym-btn--primary{
  background:linear-gradient(180deg,var(--pym-color-accent-2),var(--pym-color-accent));
  color:#fff;
  border-color:transparent;
  box-shadow:var(--pym-shadow-accent);
}
.pym-btn--primary:hover:not(:disabled){filter:brightness(1.1);box-shadow:var(--pym-shadow-accent-strong)}
.pym-btn--primary:active:not(:disabled){filter:brightness(.95)}

.pym-btn--success{
  background:linear-gradient(180deg,var(--pym-color-success),var(--pym-color-success-strong));
  color:#0a0b0d;
  border-color:transparent;
  font-weight:var(--pym-fw-semibold);
}
.pym-btn--success:hover:not(:disabled){filter:brightness(1.05)}

.pym-btn--danger{
  background:transparent;
  color:var(--pym-color-danger);
  border-color:rgba(255,141,123,.3);
}
.pym-btn--danger:hover:not(:disabled){
  background:var(--pym-color-danger-dim);
  border-color:var(--pym-color-danger);
}

.pym-btn--ghost{
  background:transparent;
  border-color:transparent;
  color:var(--pym-color-text-dim);
}
.pym-btn--ghost:hover:not(:disabled){
  background:var(--pym-color-surface-2);
  color:var(--pym-color-text);
  border-color:var(--pym-color-border);
}

.pym-btn--accent-soft{
  background:var(--pym-color-accent-dim);
  color:var(--pym-color-accent-2);
  border-color:rgba(73,124,251,.16);
}
.pym-btn--accent-soft:hover:not(:disabled){
  background:rgba(73,124,251,.18);
  border-color:rgba(73,124,251,.3);
}

/* ===== SIZES ===== */
.pym-btn--sm{font-size:var(--pym-fs-sm);padding:4px 10px;gap:5px}
.pym-btn--sm svg{width:12px;height:12px}
.pym-btn--lg{font-size:var(--pym-fs-md);padding:10px 18px;gap:8px}
.pym-btn--lg svg{width:16px;height:16px}
.pym-btn--xl{font-size:var(--pym-fs-md);padding:12px 22px;font-weight:var(--pym-fw-semibold);gap:8px}

/* ===== ICON-ONLY ===== */
.pym-btn--icon{
  width:30px;height:30px;
  padding:0;
  border-radius:var(--pym-radius-sm);
  flex-shrink:0;
}
.pym-btn--icon.pym-btn--sm{width:24px;height:24px}
.pym-btn--icon.pym-btn--lg{width:38px;height:38px}

/* ===== BLOCK ===== */
.pym-btn--block{display:flex;width:100%}

/* ===== BUTTON GROUP ===== */
.pym-btn-group{display:inline-flex;gap:var(--pym-space-1)}
.pym-btn-group--sm{gap:2px}
.pym-btn-group--attached .pym-btn{border-radius:0;margin-left:-1px}
.pym-btn-group--attached .pym-btn:first-child{border-top-left-radius:var(--pym-radius-md);border-bottom-left-radius:var(--pym-radius-md);margin-left:0}
.pym-btn-group--attached .pym-btn:last-child{border-top-right-radius:var(--pym-radius-md);border-bottom-right-radius:var(--pym-radius-md)}

/* ===== TEMA CLARO ===== */
[data-theme="light"] .pym-btn{background:var(--pym-color-surface-2);color:var(--pym-color-text)}
[data-theme="light"] .pym-btn:hover:not(:disabled){background:var(--pym-color-surface-3)}