/* ============================================================
   Store admin · Botones
   ------------------------------------------------------------
   Todas las clases están prefijadas .sa-*, así que cargar este
   archivo en cualquier página del admin es seguro: no afecta
   ningún <button> existente sin esas clases.
   ============================================================ */

/* Botón base (primario) ----------------------------------- */
.sa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid var(--sa-primary);
    border-radius: var(--sa-radius-sm);
    background: var(--sa-primary);
    color: var(--sa-primary-fg);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.sa-btn:hover,
.sa-btn:focus-visible {
    background: var(--sa-primary);
    border-color: var(--sa-primary);
    color: var(--sa-primary-fg);
    text-decoration: none;
    filter: brightness(0.94);
    outline: none;
}
.sa-btn:active {
    background: var(--sa-primary);
    border-color: var(--sa-primary);
    color: var(--sa-primary-fg);
}
.sa-btn:focus-visible { box-shadow: var(--sa-focus-ring); }

/* Variantes ----------------------------------------------- */
.sa-btn--secondary,
.sa-btn--ghost {
    background: var(--sa-surface);
    border-color: var(--sa-border);
    color: var(--sa-text);
}
.sa-btn--secondary:hover,
.sa-btn--ghost:hover,
.sa-btn--secondary:focus-visible,
.sa-btn--ghost:focus-visible {
    background: var(--sa-surface-hover);
    border-color: var(--sa-border-strong);
    color: var(--sa-text);
    filter: none;
}

.sa-btn--danger {
    border-color: var(--sa-danger);
    background: var(--sa-danger);
    color: #fff;
}
.sa-btn--danger:hover,
.sa-btn--danger:focus-visible {
    background: var(--sa-danger-hover);
    border-color: var(--sa-danger-hover);
    color: #fff;
    filter: none;
}
.sa-btn--danger:active { color: #fff; }

/* Tamaños ------------------------------------------------- */
.sa-btn--sm {
    min-height: 28px;
    padding: 4px 9px;
    font-size: 12px;
}

.sa-btn--lg {
    min-height: 40px;
    padding: 9px 16px;
    font-size: 14px;
}

/* Estado disabled ----------------------------------------- */
.sa-btn[disabled],
.sa-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Link tipo botón usado en filas de tabla ----------------- */
.sa-link-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    min-height: 28px;
    color: var(--sa-muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 560;
    cursor: pointer;
    border-radius: var(--sa-radius-xs);
}
.sa-link-btn:hover,
.sa-link-btn:focus-visible {
    color: var(--sa-text);
    text-decoration: underline;
    outline: none;
}
.sa-link-btn.is-danger { color: var(--sa-danger); }
.sa-link-btn.is-danger:hover { color: var(--sa-danger-hover); }

/* Botón icon-only (sidebar/header/close cards). Lleva fondo
   surface por defecto para que, cuando esté absolute sobre una
   imagen o tarjeta de otro color, no quede "transparente" y
   pierda legibilidad. */
.sa-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-sm);
    background: var(--sa-surface);
    color: var(--sa-text-soft);
    cursor: pointer;
}
.sa-icon-btn:hover,
.sa-icon-btn:focus-visible {
    background: var(--sa-surface-hover);
    border-color: var(--sa-border-strong);
    color: var(--sa-text);
    outline: none;
}
.sa-icon-btn.is-danger:hover,
.sa-icon-btn.is-danger:focus-visible {
    border-color: var(--sa-danger);
    color: var(--sa-danger);
}
.sa-icon-btn--sm {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

body.page-store-admin-app button:not(:disabled),
body.page-store-admin-app input[type="button"]:not(:disabled),
body.page-store-admin-app input[type="submit"]:not(:disabled),
body.page-store-admin-app input[type="checkbox"]:not(:disabled),
body.page-store-admin-app input[type="radio"]:not(:disabled),
body.page-store-admin-app [role="button"]:not([aria-disabled="true"]) {
    cursor: pointer;
}

body.page-store-admin-app button:disabled,
body.page-store-admin-app input:disabled,
body.page-store-admin-app [aria-disabled="true"] {
    cursor: not-allowed;
}