/* ============================================================
   AURORA — p4-actions.css · Categoría 04 · Acciones y botones
   Botones (variantes, tonos, tamaños y formas), grupos, segmentado,
   FAB, enlaces-acción, toolbar, spinners y estados de carga.
   Estilo: sólido, radios pill, sombra de marca al hover. Táctil 44px.
   ============================================================ */

/* ---- Botón base ---- */
.nz-btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--nz-space-2); padding: 0 var(--nz-space-5); border: var(--nz-border-w) solid transparent; border-radius: var(--nz-radius-full); font: inherit; font-weight: var(--nz-peso-fuerte); font-size: var(--nz-text-base); cursor: pointer; text-decoration: none; white-space: normal; text-wrap: balance; max-width: 100%; transition: transform var(--nz-dur-fast) var(--nz-ease-out), box-shadow var(--nz-dur-fast) var(--nz-ease-out), background var(--nz-dur-fast) var(--nz-ease-out), color var(--nz-dur-fast) var(--nz-ease-out), border-color var(--nz-dur-fast) var(--nz-ease-out); }
.nz-btn:hover { transform: translateY(-2px); }
.nz-btn:active { transform: translateY(0); }
.nz-btn:disabled, .nz-btn.is-disabled, .nz-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ---- Tonos ---- */
.nz-btn--primary { background: var(--nz-brand); color: var(--nz-text-invert); box-shadow: var(--nz-shadow-brand); }
.nz-btn--primary:hover { background: var(--nz-brand-strong); }
.nz-btn--accent { background: var(--nz-accent); color: var(--nz-accent-ink); box-shadow: var(--nz-shadow-accent); }
.nz-btn--accent:hover { background: var(--nz-accent-strong); }
.nz-btn--success { background: var(--nz-success); color: var(--nz-text-invert); }
.nz-btn--success:hover { background: var(--nz-green-700); }
.nz-btn--warning { background: var(--nz-warning); color: var(--nz-text-invert); }
.nz-btn--warning:hover { background: var(--nz-amber-700); }
.nz-btn--danger { background: var(--nz-danger); color: var(--nz-text-invert); }
.nz-btn--danger:hover { background: var(--nz-red-700); }
.nz-btn--info { background: var(--nz-info); color: var(--nz-text-invert); }
.nz-btn--neutral { background: var(--nz-bg-inset); color: var(--nz-text); }
.nz-btn--neutral:hover { background: var(--nz-border); }

/* ---- Énfasis ---- */
.nz-btn--soft { background: var(--nz-brand-soft); color: var(--nz-brand); }
.nz-btn--soft:hover { background: var(--nz-brand-tint); }
.nz-btn--soft-accent { background: var(--nz-accent-soft); color: var(--nz-accent-strong); }
.nz-btn--soft-success { background: var(--nz-success-soft); color: var(--nz-success); }
.nz-btn--soft-danger { background: var(--nz-danger-soft); color: var(--nz-danger); }
.nz-btn--ghost { background: transparent; color: var(--nz-text-soft); box-shadow: inset 0 0 0 var(--nz-border-w-strong) var(--nz-border); }
.nz-btn--ghost:hover { background: var(--nz-bg-inset); color: var(--nz-text); }
.nz-btn--outline { background: transparent; color: var(--nz-brand); box-shadow: inset 0 0 0 var(--nz-border-w-strong) var(--nz-brand); }
.nz-btn--outline:hover { background: var(--nz-brand-soft); }
.nz-btn--link { background: none; color: var(--nz-brand); padding: 0; min-height: 44px; border-radius: var(--nz-radius-xs); text-decoration: underline; text-underline-offset: 3px; }
.nz-btn--link:hover { color: var(--nz-brand-strong); transform: none; }
.nz-btn--text { background: none; color: var(--nz-brand); padding: 0 var(--nz-space-2); }
.nz-btn--text:hover { background: var(--nz-brand-soft); color: var(--nz-brand-strong); transform: none; }
.nz-btn--text.nz-btn--danger-text { color: var(--nz-danger); }
.nz-btn--text.nz-btn--danger-text:hover { background: var(--nz-danger-soft); }

/* ---- Tamaños ---- */
.nz-btn--2xs { min-height: 28px; padding: 0 var(--nz-space-2); font-size: var(--nz-text-2xs); gap: var(--nz-space-1); }
.nz-btn--xs { min-height: 32px; padding: 0 var(--nz-space-3); font-size: var(--nz-text-xs); }
.nz-btn--sm { min-height: 44px; padding: 0 var(--nz-space-4); font-size: var(--nz-text-sm); }
.nz-btn--lg { min-height: 52px; padding: 0 var(--nz-space-6); font-size: var(--nz-text-md); }
.nz-btn--xl { min-height: 60px; padding: 0 var(--nz-space-7); font-size: var(--nz-text-lg); }
.nz-btn--2xl { min-height: 68px; padding: 0 var(--nz-space-8); font-size: var(--nz-text-lg); }

/* ---- Forma y ancho ---- */
.nz-btn--square { border-radius: var(--nz-radius-sm); }
.nz-btn--rounded { border-radius: var(--nz-radius-md); }
.nz-btn--pill { border-radius: var(--nz-radius-full); }
.nz-btn--block { width: 100%; }
.nz-btn--full { width: 100%; justify-content: space-between; }
.nz-btn--auto { width: auto; }

/* ---- Con icono ---- */
.nz-btn__icon { display: inline-flex; font-size: 1.1em; line-height: 1; }
.nz-btn__arrow { transition: transform var(--nz-dur-base) var(--nz-ease-out); }
.nz-btn:hover .nz-btn__arrow--right { transform: translateX(4px); }
.nz-btn:hover .nz-btn__arrow--left { transform: translateX(-4px); }
.nz-btn--icon { width: 44px; padding: 0; }
.nz-btn--icon-sm { width: 44px; min-height: 44px; padding: 0; }
.nz-btn--icon-lg { width: 52px; min-height: 52px; padding: 0; }
.nz-btn--icon-square { width: 44px; padding: 0; border-radius: var(--nz-radius-md); }
.nz-btn__badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 var(--nz-space-1); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--nz-radius-full); background: var(--nz-accent); color: var(--nz-accent-ink); font-size: var(--nz-text-2xs); font-weight: var(--nz-peso-fuerte); }
.nz-btn--badged { position: relative; overflow: visible; }

/* ---- Estados ---- */
.nz-btn.is-busy, .nz-btn.is-loading { opacity: .8; pointer-events: none; }
.nz-btn.is-ok { background: var(--nz-success); color: var(--nz-text-invert); box-shadow: none; }
.nz-btn.is-copied { background: var(--nz-brand-soft); color: var(--nz-brand); box-shadow: none; }
.nz-btn[aria-pressed="true"] { background: var(--nz-brand); color: var(--nz-text-invert); }

/* ---- Botón con progreso dentro ---- */
.nz-btn--progress { position: relative; overflow: hidden; }
.nz-btn__progress { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--nz-accent); width: 60%; }

/* ---- Grupo de botones ---- */
.nz-btn-group { display: inline-flex; gap: var(--nz-space-1); }
.nz-btn-group .nz-btn { border-radius: var(--nz-radius-md); }
.nz-btn-group--joined { gap: 0; }
.nz-btn-group--joined .nz-btn { border-radius: 0; box-shadow: none; }
.nz-btn-group--joined .nz-btn:first-child { border-radius: var(--nz-radius-md) 0 0 var(--nz-radius-md); }
.nz-btn-group--joined .nz-btn:last-child { border-radius: 0 var(--nz-radius-md) var(--nz-radius-md) 0; }
.nz-btn-group--joined .nz-btn + .nz-btn { margin-left: -1px; box-shadow: inset 1px 0 0 var(--nz-border); }
.nz-btn-group--vertical { flex-direction: column; }
.nz-btn-group--vertical .nz-btn { width: 100%; justify-content: flex-start; }
.nz-btn-group--split { gap: 0; }
.nz-btn-group__caret { min-width: 44px; padding: 0 var(--nz-space-3); border-radius: 0 var(--nz-radius-full) var(--nz-radius-full) 0; }
.nz-btn-group--split .nz-btn:first-child { border-radius: var(--nz-radius-full) 0 0 var(--nz-radius-full); }

/* ---- Selector segmentado ---- */
.nz-segmented { display: inline-flex; padding: var(--nz-space-1); gap: var(--nz-space-1); background: var(--nz-bg-inset); border-radius: var(--nz-radius-full); }
.nz-segmented button, .nz-segmented a { min-height: 44px; padding: 0 var(--nz-space-4); border-radius: var(--nz-radius-full); border: 0; background: transparent; color: var(--nz-text-soft); font: inherit; font-size: var(--nz-text-sm); font-weight: var(--nz-peso-fuerte); text-decoration: none; cursor: pointer; transition: background var(--nz-dur-fast) var(--nz-ease-out), color var(--nz-dur-fast) var(--nz-ease-out), box-shadow var(--nz-dur-fast) var(--nz-ease-out); }
.nz-segmented [aria-selected="true"], .nz-segmented button.is-active, .nz-segmented a.is-active { background: var(--nz-surface); color: var(--nz-text); box-shadow: var(--nz-shadow-sm); }
.nz-segmented--sm button, .nz-segmented--sm a { min-height: 44px; padding: 0 var(--nz-space-3); font-size: var(--nz-text-xs); }
.nz-segmented--lg button, .nz-segmented--lg a { min-height: 44px; padding: 0 var(--nz-space-5); font-size: var(--nz-text-base); }
.nz-segmented--vertical { flex-direction: column; border-radius: var(--nz-radius-lg); }
.nz-segmented--vertical button, .nz-segmented--vertical a { border-radius: var(--nz-radius-md); text-align: left; }
.nz-segmented--full { display: flex; width: 100%; }
.nz-segmented--full button, .nz-segmented--full a { flex: 1; }
.nz-segmented--brand [aria-selected="true"] { background: var(--nz-brand); color: var(--nz-text-invert); }
.nz-segmented--accent [aria-selected="true"] { background: var(--nz-accent); color: var(--nz-accent-ink); }

/* ---- FAB ---- */
.nz-fab { position: fixed; right: var(--nz-space-5); bottom: calc(var(--nz-space-5) + env(safe-area-inset-bottom, 0px)); z-index: var(--nz-z-drawer); width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--nz-radius-full); border: 0; background: var(--nz-brand); color: var(--nz-text-invert); font-size: 1.5rem; box-shadow: var(--nz-shadow-brand); cursor: pointer; transition: transform var(--nz-dur-fast) var(--nz-ease-out), background var(--nz-dur-fast) var(--nz-ease-out); }
.nz-fab:hover { transform: scale(1.08) rotate(-4deg); background: var(--nz-brand-strong); }
.nz-fab--accent { background: var(--nz-accent); box-shadow: var(--nz-shadow-accent); }
.nz-fab--lg { width: 64px; height: 64px; }
.nz-fab--sm { width: 44px; height: 44px; font-size: var(--nz-text-md); }
.nz-fab--extended { width: auto; padding: 0 var(--nz-space-5); gap: var(--nz-space-2); font-size: var(--nz-text-base); font-weight: var(--nz-peso-fuerte); }
.nz-fab--bottom-left { right: auto; left: var(--nz-space-5); }

/* ---- Cargadores ---- */
.nz-spin { width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: nzSpin .7s linear infinite; }
.nz-spin--sm { width: .75em; height: .75em; border-width: var(--nz-border-w-strong); }
.nz-spin--lg { width: 1.5em; height: 1.5em; border-width: 3px; }
.nz-spin--brand { color: var(--nz-brand); }
.nz-spin--accent { color: var(--nz-accent-text); }
@keyframes nzSpin { to { transform: rotate(360deg); } }

/* ---- Enlace-acción ---- */
.nz-cta { display: inline-flex; align-items: center; gap: var(--nz-space-2); color: var(--nz-brand); font-weight: var(--nz-peso-fuerte); font-size: var(--nz-text-base); text-decoration: none; }
.nz-cta:hover { color: var(--nz-brand-strong); }
.nz-cta__arrow { transition: transform var(--nz-dur-base) var(--nz-ease-out); }
.nz-cta:hover .nz-cta__arrow { transform: translateX(4px); }
.nz-cta--accent { color: var(--nz-accent); }
.nz-cta--sm { font-size: var(--nz-text-sm); }
.nz-cta--lg { font-size: var(--nz-text-lg); }
.nz-cta--muted { color: var(--nz-text-mute); }
.nz-cta--underline { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Toolbar de acciones ---- */
.nz-toolbar { display: flex; align-items: center; gap: var(--nz-space-2); flex-wrap: wrap; padding: var(--nz-space-3); border-radius: var(--nz-radius-lg); background: var(--nz-surface); box-shadow: var(--nz-shadow-sm); }
.nz-toolbar__spacer { flex: 1; }
.nz-toolbar__group { display: inline-flex; gap: var(--nz-space-1); }
.nz-toolbar__divider { align-self: stretch; width: 1px; background: var(--nz-border); margin-inline: var(--nz-space-1); }
.nz-toolbar--compact { padding: var(--nz-space-2); gap: var(--nz-space-1); }
.nz-toolbar--sticky { position: sticky; top: 0; z-index: var(--nz-z-sticky); }
.nz-toolbar--brand { background: var(--nz-brand); color: var(--nz-text-invert); }
.nz-toolbar--brand .nz-btn--ghost { color: var(--nz-text-invert); box-shadow: inset 0 0 0 var(--nz-border-w-strong) var(--nz-blue-300); }
/* El buscador de una toolbar ocupa su fila en móvil: si no, el placeholder
   se corta y el campo se queda con el ancho del texto. */
.nz-toolbar > .nz-field { flex: 1 1 100%; min-width: 0; }
.nz-toolbar > .nz-segmented { flex: 1 1 100%; }

@media (min-width: 640px) {
  .nz-toolbar { flex-wrap: nowrap; }
  .nz-toolbar > .nz-field { flex: 1 1 14rem; }
  .nz-toolbar > .nz-segmented { flex: 0 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .nz-spin { animation-duration: 1.6s; }
}

/* ---- Densidad de escritorio (desde 960px) ----
   El minimo tactil de 44px manda en movil en TODOS los tamanos de boton
   (regla 6 del manifiesto). La densidad fina de 28-36px vuelve solo desde
   960px, donde el puntero sustituye al dedo. Responsive first: base = tactil. */
@media (min-width: 960px) {
  .nz-btn--2xs { min-height: 28px; }
  .nz-btn--xs { min-height: 32px; }
  .nz-btn--sm { min-height: 36px; }
  .nz-btn--icon-sm { width: 36px; min-height: 36px; }
}

/* ---- Densidad de escritorio del segmented (desde 960px) ---- */
@media (min-width: 960px) {
  .nz-segmented button, .nz-segmented a { min-height: 38px; }
  .nz-segmented--sm button, .nz-segmented--sm a { min-height: 32px; }
}