/* ============================================================
   HUF — Componente: Button (.hd-btn) — HVL §6.1
   ------------------------------------------------------------
   Reemplaza .btn/.btn-primary/.btn-outline-* de Bootstrap. Vehículo
   público: TagHelper <hd-button> (AdminPortal/TagHelpers/
   HdButtonTagHelper.cs) — las vistas nunca escriben estas clases.
   Ejemplos de uso → docs/hednora-ui-framework-guide.md §Button.
   ============================================================ */

.hd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    height: var(--hd-size-control);
    border-radius: var(--hd-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    font-family: var(--hd-theme-font, var(--hd-font-sans));
    font-size: var(--hd-text-base);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform var(--hd-motion-standard) var(--hd-ease),
        filter var(--hd-motion-standard) var(--hd-ease),
        background var(--hd-motion-standard) var(--hd-ease),
        border-color var(--hd-motion-standard) var(--hd-ease),
        color var(--hd-motion-standard) var(--hd-ease);
}

.hd-btn:hover {
    transform: translateY(-1px);
}

.hd-btn:active {
    transform: scale(0.98);
}

/* Foco propio, distinto del hover (HVL §5.7: "el foco nunca se ve igual
   que el hover"). Se suma al hover cuando ambos aplican, nunca lo
   reemplaza. */
.hd-btn:focus-visible {
    outline: var(--hd-focus-ring);
    outline-offset: var(--hd-focus-offset);
}

.hd-btn:disabled,
.hd-btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

/* Estado loading (HVL §6.1): no interactivo, el ícono se reemplaza por
   un spinner de 18px/2px, la etiqueta permanece, el botón no cambia de
   ancho. Única animación infinita permitida junto al pulso del
   skeleton (HVL §5.6). */
.hd-btn[aria-busy="true"] {
    pointer-events: none;
}

.hd-btn__spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0.85;
    animation: hd-spin 700ms linear infinite;
}

.hd-btn[aria-busy="true"] .hd-btn__spinner {
    display: inline-block;
}

.hd-btn[aria-busy="true"] .hd-btn__icon {
    display: none;
}

/* ── Variantes (HVL §6.1) ──────────────────────────────────── */
.hd-btn--primary {
    background: var(--hd-theme-accent);
    color: var(--hd-color-accent-contrast);
    box-shadow: var(--hd-glow-accent);
}

.hd-btn--primary:hover,
.hd-btn--primary:focus-visible {
    filter: brightness(1.08);
}

.hd-btn--secondary {
    background: transparent;
    border-color: var(--hd-color-border-strong);
    color: var(--hd-theme-text);
}

.hd-btn--secondary:hover,
.hd-btn--secondary:focus-visible {
    border-color: var(--hd-theme-accent-text);
    color: var(--hd-theme-accent-text);
}

.hd-btn--ghost {
    background: transparent;
    color: var(--hd-theme-text-muted);
}

.hd-btn--ghost:hover,
.hd-btn--ghost:focus-visible {
    color: var(--hd-theme-text);
    background: rgba(148, 163, 184, 0.12);
}

.hd-btn--danger {
    background: var(--hd-color-error);
    color: #fff;
}

.hd-btn--danger:hover,
.hd-btn--danger:focus-visible {
    filter: brightness(1.08);
}

/* Una acción de fila que borra no puede pesar exactamente lo mismo que
   "Editar". En reposo sigue siendo ghost —dentro de una tabla, tres acciones
   en rojo serían ruido, y el registro no está en peligro hasta que alguien
   apunta—, pero en hover/foco se declara. El relleno sólido de
   `.hd-btn--danger` es para el botón que confirma en el diálogo, no para la
   fila: ahí el rojo tiene que ser la excepción que el ojo encuentra, no el
   fondo sobre el que busca. */
.hd-btn--ghost.hd-btn--destructive:hover,
.hd-btn--ghost.hd-btn--destructive:focus-visible {
    color: var(--hd-color-error);
    background: rgba(239, 68, 68, 0.12);
}

/* Peso más bajo de los cuatro: navegación pura, nunca una acción que
   cambia estado (HVL §7.2 zona B — "acción inmediata" es primary,
   "acción secundaria" es ghost, "solo navega" es link). Sin relleno ni
   borde; el subrayado en hover es la única señal de interactividad. */
.hd-btn--link {
    background: transparent;
    color: var(--hd-theme-accent-text);
    padding: 0 6px;
}

.hd-btn--link:hover,
.hd-btn--link:focus-visible {
    color: var(--hd-theme-accent-hover);
    text-decoration: underline;
}

/* ── Tamaños ───────────────────────────────────────────────── */
.hd-btn--sm {
    padding: 0 14px;
    font-size: var(--hd-text-meta);
    height: var(--hd-size-control-sm);
}

.hd-btn--lg {
    padding: 0 var(--hd-space-6);
    font-size: var(--hd-text-title);
    height: var(--hd-size-control-lg);
}

/* width:100% solo dentro de un modal en móvil (HVL §6.1) */
@media (max-width: 575.98px) {
    .hd-modal .hd-btn {
        width: 100%;
    }
}