/* boton — familia de botones estándar.
   Ver spec: _componentes/boton/_boton.md */
.hs-btn {
  --btn-primary: #2563eb;
  --btn-danger: #dc2626;
  --btn-success: #16a34a;
  --btn-surface: #ffffff;
  --btn-border: #d9e0ea;
  --btn-text: #0f172a;
  --btn-on: #ffffff;
  --btn-radius: 10px;
  --btn-c: var(--btn-primary);          /* color de la variante */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}
.hs-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.hs-btn:hover { transform: translateY(-1px); }
.hs-btn:active { transform: translateY(0) scale(0.97); }
.hs-btn:focus { outline: none; }
.hs-btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-c) 30%, transparent); }

/* Rellenos: primario, peligro, éxito */
.hs-btn--primario { --btn-c: var(--btn-primary); }
.hs-btn--peligro { --btn-c: var(--btn-danger); }
.hs-btn--exito { --btn-c: var(--btn-success); }
.hs-btn--primario,
.hs-btn--peligro,
.hs-btn--exito {
  color: var(--btn-on);
  background: linear-gradient(180deg, color-mix(in srgb, var(--btn-c) 88%, #fff) 0%, var(--btn-c) 100%);
  border-color: color-mix(in srgb, var(--btn-c) 80%, #000);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--btn-c) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.hs-btn--primario:hover,
.hs-btn--peligro:hover,
.hs-btn--exito:hover {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--btn-c) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  filter: brightness(1.04);
}
.hs-btn--primario:focus-visible,
.hs-btn--peligro:focus-visible,
.hs-btn--exito:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-c) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Secundario: superficie con relieve (misma familia que select_simple) */
.hs-btn--secundario {
  color: var(--btn-text);
  background: linear-gradient(180deg, var(--btn-surface) 0%, color-mix(in srgb, var(--btn-surface) 96%, var(--btn-text)) 100%);
  border-color: var(--btn-border);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.hs-btn--secundario:hover {
  border-color: color-mix(in srgb, var(--btn-border) 80%, var(--btn-text));
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.09), 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Fantasma: sin fondo hasta el hover */
.hs-btn--fantasma { color: var(--btn-text); background: transparent; }
.hs-btn--fantasma:hover { transform: none; background: color-mix(in srgb, var(--btn-text) 6%, transparent); }
.hs-btn--fantasma:active { transform: scale(0.97); background: color-mix(in srgb, var(--btn-text) 10%, transparent); }

/* Tamaños y formas */
.hs-btn--sm { height: 30px; padding: 0 10px; font-size: 12px; gap: 6px; border-radius: 8px; }
.hs-btn--sm svg { width: 14px; height: 14px; }
.hs-btn--lg { height: 44px; padding: 0 18px; font-size: 14px; }
.hs-btn--icono { width: 36px; padding: 0; }
.hs-btn--sm.hs-btn--icono { width: 30px; }
.hs-btn--lg.hs-btn--icono { width: 44px; }
.hs-btn--bloque { display: flex; width: 100%; }

/* Deshabilitado */
.hs-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

/* Cargando: spinner centrado, el contenido queda invisible para no cambiar el ancho */
.hs-btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.hs-btn[aria-busy="true"] > * { visibility: hidden; }
.hs-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--btn-on);
  border-right-color: transparent;
  animation: hs-btn-giro 0.7s linear infinite;
}
.hs-btn--secundario[aria-busy="true"]::after,
.hs-btn--fantasma[aria-busy="true"]::after { border-color: var(--btn-text); border-right-color: transparent; }
@keyframes hs-btn-giro { to { transform: rotate(360deg); } }

/* ---------- Íconos animados (ver spec, sección "Íconos animados") ---------- */
.hs-btn svg * { transform-box: fill-box; }
.hs-ico-check { stroke-dasharray: 1; stroke-dashoffset: 0; }
.hs-ico-tapa { transform-origin: 85% 100%; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hs-ico-flecha { transition: transform 0.2s ease; }
.hs-ico-ojo, .hs-ico-lapiz, .hs-ico-mas, .hs-ico-avanza { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }

.hs-btn:is(:hover, :focus-visible, :active) .hs-ico-check { animation: hs-ico-dibujar 0.45s ease-out; }
.hs-btn:is(:hover, :focus-visible, :active) .hs-ico-tapa { transform: translateY(-2px) rotate(-14deg); }
.hs-btn:is(:hover, :focus-visible, :active) .hs-ico-flecha { animation: hs-ico-bajar 0.6s ease-in-out; }
.hs-btn:is(:hover, :focus-visible, :active) .hs-ico-ojo { animation: hs-ico-parpadeo 0.5s ease; }
.hs-btn:is(:hover, :focus-visible, :active) .hs-ico-lapiz { animation: hs-ico-escribir 0.5s ease; }
.hs-btn:is(:hover, :focus-visible, :active) .hs-ico-mas { transform: rotate(90deg); }
.hs-btn:is(:hover, :focus-visible, :active) .hs-ico-avanza { animation: hs-ico-avanzar 0.5s ease; }

@keyframes hs-ico-dibujar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hs-ico-bajar { 0% { transform: translateY(0); } 40% { transform: translateY(3px); } 65% { transform: translateY(-1px); } 100% { transform: translateY(0); } }
@keyframes hs-ico-parpadeo { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(0.1); } }
@keyframes hs-ico-escribir { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 60% { transform: rotate(8deg) translateX(1px); } }
@keyframes hs-ico-avanzar { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

@media (prefers-reduced-motion: reduce) {
  .hs-btn [class*="hs-ico-"] { animation: none !important; transition: none !important; }
}