/* =========================================================
   BOTONES · Portal socio (solo)
   Extiende /ui/buttons.css con estilo “push” 3D.
   NO usar en admin. Se carga únicamente desde /portal.
   Colores: misma paleta institucional (--brand / estados).
========================================================= */

body:not(.portal-auth) #app button.primary,
body:not(.portal-auth) #app button.ghost,
body:not(.portal-auth) #app button.ok,
body:not(.portal-auth) #app button.danger,
body:not(.portal-auth) #app button.warn,
body:not(.portal-auth) #app button.info {
  border: 0;
  border-radius: 10px;
  letter-spacing: 0.04em;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 20px;
  min-height: var(--touch, 44px);
  margin-bottom: 8px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease, color 0.3s ease;
  transform: translateY(0);
}

/* Excluir controles estructurales (filas, tabs, fold) */
body:not(.portal-auth) #app button.svc-sum,
body:not(.portal-auth) #app button.tab,
body:not(.portal-auth) #app button.fold-toggle,
body:not(.portal-auth) #app button.qa-btn,
body:not(.portal-auth) #app button.sess-btn,
body:not(.portal-auth) #app button.notif-btn,
body:not(.portal-auth) #app .p-dock button,
body:not(.portal-auth) #app .tabs .tab {
  margin-bottom: 0;
  box-shadow: none;
  letter-spacing: normal;
  transform: none;
}

body:not(.portal-auth) #app button.primary {
  background-color: var(--brand, #0f172a);
  color: #fff;
  box-shadow: #020617 0 8px 0 0;
}
body:not(.portal-auth) #app button.primary:hover {
  background-color: #1e293b;
  color: #fff;
  border-color: transparent;
  box-shadow: #020617 0 5px 0 0;
}
body:not(.portal-auth) #app button.primary:active {
  background-color: var(--brand, #0f172a);
  color: #fff;
  box-shadow: #020617 0 0 0 0;
  transform: translateY(8px);
  transition: 200ms;
}

body:not(.portal-auth) #app button.ghost {
  background-color: #fff;
  color: var(--text-soft, #334155);
  box-shadow: #cbd5e1 0 6px 0 0;
}
body:not(.portal-auth) #app button.ghost:hover {
  background-color: #f8fafc;
  color: var(--brand, #0f172a);
  box-shadow: #94a3b8 0 4px 0 0;
}
body:not(.portal-auth) #app button.ghost:active {
  background-color: #fff;
  box-shadow: #cbd5e1 0 0 0 0;
  transform: translateY(6px);
  transition: 200ms;
}

body:not(.portal-auth) #app button.ok {
  background-color: var(--ok, #047857);
  color: #fff;
  box-shadow: #065f46 0 8px 0 0;
}
body:not(.portal-auth) #app button.ok:hover {
  background-color: #059669;
  color: #fff;
  box-shadow: #065f46 0 5px 0 0;
}
body:not(.portal-auth) #app button.ok:active {
  box-shadow: #065f46 0 0 0 0;
  transform: translateY(8px);
  transition: 200ms;
}

body:not(.portal-auth) #app button.danger {
  background-color: var(--err, #b91c1c);
  color: #fff;
  box-shadow: #7f1d1d 0 8px 0 0;
}
body:not(.portal-auth) #app button.danger:hover {
  background-color: #dc2626;
  color: #fff;
  box-shadow: #7f1d1d 0 5px 0 0;
}
body:not(.portal-auth) #app button.danger:active {
  box-shadow: #7f1d1d 0 0 0 0;
  transform: translateY(8px);
  transition: 200ms;
}

body:not(.portal-auth) #app button.warn {
  background-color: var(--warn, #b45309);
  color: #fff;
  box-shadow: #92400e 0 8px 0 0;
}
body:not(.portal-auth) #app button.warn:hover {
  background-color: #d97706;
  color: #fff;
  box-shadow: #92400e 0 5px 0 0;
}
body:not(.portal-auth) #app button.warn:active {
  box-shadow: #92400e 0 0 0 0;
  transform: translateY(8px);
  transition: 200ms;
}

body:not(.portal-auth) #app button.info {
  background-color: var(--info, #1d4ed8);
  color: #fff;
  box-shadow: #1e3a8a 0 8px 0 0;
}
body:not(.portal-auth) #app button.info:hover {
  background-color: #2563eb;
  color: #fff;
  box-shadow: #1e3a8a 0 5px 0 0;
}
body:not(.portal-auth) #app button.info:active {
  box-shadow: #1e3a8a 0 0 0 0;
  transform: translateY(8px);
  transition: 200ms;
}

body:not(.portal-auth) #app button.primary:disabled,
body:not(.portal-auth) #app button.ghost:disabled,
body:not(.portal-auth) #app button.ok:disabled,
body:not(.portal-auth) #app button.danger:disabled,
body:not(.portal-auth) #app button.warn:disabled,
body:not(.portal-auth) #app button.info:disabled {
  box-shadow: none;
  transform: none;
  margin-bottom: 0;
}

/* CTA píldora: Subir / Enviar comprobante. Paleta --brand, flecha al hover. */
body:not(.portal-auth) #app button.primary.cta {
  border-radius: 999px;
  padding: 12px 18px 12px 22px;
  gap: 10px;
}
body:not(.portal-auth) #app button.primary.cta .cta-arrow {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  transition: transform 0.32s ease;
}
body:not(.portal-auth) #app button.primary.cta:hover .cta-arrow {
  transform: translateX(5px);
}
body:not(.portal-auth) #app button.primary.cta:active .cta-arrow {
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  body:not(.portal-auth) #app button.primary,
  body:not(.portal-auth) #app button.ghost,
  body:not(.portal-auth) #app button.ok,
  body:not(.portal-auth) #app button.danger,
  body:not(.portal-auth) #app button.warn,
  body:not(.portal-auth) #app button.info,
  body:not(.portal-auth) #app button.primary:active,
  body:not(.portal-auth) #app button.ghost:active,
  body:not(.portal-auth) #app button.ok:active,
  body:not(.portal-auth) #app button.danger:active,
  body:not(.portal-auth) #app button.warn:active,
  body:not(.portal-auth) #app button.info:active {
    transition: none;
    transform: none;
  }
  body:not(.portal-auth) #app button.primary.cta .cta-arrow,
  body:not(.portal-auth) #app button.primary.cta:hover .cta-arrow,
  body:not(.portal-auth) #app button.primary.cta:active .cta-arrow {
    transition: none;
    transform: none;
  }
}