/**
 * Archivo: assets/css/shared/buttons.css
 * Sistema: Allage - Estilos de Botones Globales
 * Versión: 1.0.0
 * Fecha: 18 Enero 2026
 *
 * DESCRIPCIÓN:
 * Estilos de botones compartidos entre admin y frontend.
 * Todos los módulos deben usar estas clases para botones.
 *
 * CLASES DISPONIBLES:
 * - .ltn-button          : Botón principal (verde corporativo)
 * - .ltn-button.cancel   : Botón cancelar (mismo estilo que principal)
 * - .ltn-button.secondary: Botón secundario (gris)
 * - .ltn-button.danger   : Botón peligro (rojo)
 * - .ltn-button-mini     : Botón pequeño
 * - .ltn-btn             : Alias de .ltn-button
 *
 * ESTADOS:
 * - :hover    : Fondo terracota (#D57B4E)
 * - :disabled : Opacidad reducida
 * - .loading  : Spinner animado
 */

/* ===========================================
   BOTÓN PRINCIPAL
   =========================================== */
.ltn-button,
.ltn-btn {
    background: var(--ltn-green-primary, #506727) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--ltn-border-radius, 8px);
    padding: 0 18px;
    font-family: inherit;
    font-size: var(--ltn-font-size-sm, 13px) !important;
    font-weight: var(--ltn-font-weight-medium, 500) !important;
    line-height: 1;
    cursor: pointer;
    transition: var(--ltn-transition, all 0.2s ease);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: var(--ltn-shadow-sm, 0 2px 4px rgba(80, 103, 39, 0.1));
    height: 36px;
    min-height: 36px;
    vertical-align: middle;
    box-sizing: border-box;
}

.ltn-button:hover,
.ltn-btn:hover {
    background: var(--ltn-green-light, #BACD70) !important;
    color: var(--ltn-green-dark, #3e5120) !important;
    transform: translateY(-1px);
    box-shadow: var(--ltn-shadow-md, 0 4px 8px rgba(186, 205, 112, 0.4));
}

.ltn-button:disabled,
.ltn-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Fuente unificada para todas las variantes de botón */
.ltn-button,
.ltn-button--primary,
.ltn-button--secondary,
.ltn-button.cancel,
.ltn-btn-reset,
.ltn-btn-filter,
.ltn-bulk-apply,
button.ltn-button {
    font-family: inherit;
    font-size: var(--ltn-font-size-sm, 13px) !important;
    font-weight: var(--ltn-font-weight-medium, 500) !important;
    line-height: 1;
    height: 36px;
    padding: 0 18px;
    vertical-align: middle;
    box-sizing: border-box;
}

/* ===========================================
   BOTÓN CANCELAR
   Mismo estilo que principal (verde corporativo)
   =========================================== */
.ltn-button.cancel,
.ltn-btn.cancel {
    background: var(--ltn-green-primary, #506727) !important;
    color: white !important;
    white-space: nowrap;
    padding: 0 18px;
    min-width: fit-content;
    border: none !important;
    border-radius: var(--ltn-border-radius, 8px);
    font-weight: var(--ltn-font-weight-medium, 500) !important;
    font-size: var(--ltn-font-size-sm, 13px) !important;
    height: 36px;
    min-height: 36px;
    line-height: 1;
    box-sizing: border-box;
}

.ltn-button.cancel:hover,
.ltn-btn.cancel:hover {
    background: var(--ltn-green-light, #BACD70) !important;
    color: var(--ltn-green-dark, #3e5120) !important;
    transform: translateY(-1px);
    box-shadow: var(--ltn-shadow-md, 0 4px 8px rgba(186, 205, 112, 0.4));
}

/* ===========================================
   BOTÓN SECUNDARIO
   =========================================== */
.ltn-button.secondary,
.ltn-btn.secondary {
    background: var(--ltn-gray-200, #E2E8F0);
    color: var(--ltn-gray-700, #334155);
}

.ltn-button.secondary:hover,
.ltn-btn.secondary:hover {
    background: var(--ltn-gray-300, #CBD5E0);
    color: var(--ltn-gray-900, #0F172A);
}

/* ===========================================
   BOTÓN PELIGRO
   =========================================== */
.ltn-button.danger,
.ltn-btn.danger {
    background: #DC2626;
    color: white;
}

.ltn-button.danger:hover,
.ltn-btn.danger:hover {
    background: #B91C1C;
    color: white;
}

/* ===========================================
   BOTÓN MINI
   =========================================== */
.ltn-button-mini,
.ltn-btn-mini {
    background: var(--ltn-green-primary, #506727);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: var(--ltn-font-size-xs, 11px);
    font-weight: 500;
    cursor: pointer;
    transition: var(--ltn-transition, all 0.2s ease);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    box-sizing: border-box;
}

.ltn-button-mini:hover,
.ltn-btn-mini:hover {
    background: var(--ltn-green-light, #BACD70);
    color: var(--ltn-green-dark, #3e5120);
}

.ltn-button-mini.cancel,
.ltn-btn-mini.cancel {
    background: var(--ltn-green-primary, #506727);
    color: white;
}

.ltn-button-mini.cancel:hover,
.ltn-btn-mini.cancel:hover {
    background: var(--ltn-green-light, #BACD70);
    color: var(--ltn-green-dark, #3e5120);
}

.ltn-button-mini.secondary,
.ltn-btn-mini.secondary {
    background: var(--ltn-green-primary, #506727);
    color: white;
}

.ltn-button-mini.secondary:hover,
.ltn-btn-mini.secondary:hover {
    background: var(--ltn-green-light, #BACD70);
    color: var(--ltn-green-dark, #3e5120);
}

.ltn-button-mini.danger,
.ltn-btn-mini.danger {
    background: #FEE2E2;
    color: #DC2626;
}

.ltn-button-mini.danger:hover,
.ltn-btn-mini.danger:hover {
    background: #EF4444;
    color: white;
}

/* ===========================================
   ESTADO LOADING
   =========================================== */
@keyframes ltn-button-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ltn-button.loading,
.ltn-btn.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
    cursor: not-allowed;
}

.ltn-button.loading .ltn-button-text,
.ltn-btn.loading .ltn-button-text,
.ltn-button.loading > span:not(.ltn-spinner),
.ltn-btn.loading > span:not(.ltn-spinner) {
    visibility: hidden;
}

.ltn-button.loading::after,
.ltn-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ltn-button-spin 0.8s linear infinite;
}

.ltn-button-mini.loading,
.ltn-btn-mini.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
    cursor: not-allowed;
    min-width: 60px;
}

.ltn-button-mini.loading::after,
.ltn-btn-mini.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ltn-button-spin 0.8s linear infinite;
}

/* ===========================================
   SPINNER EXPLÍCITO
   =========================================== */
.ltn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ltn-button-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

.ltn-spinner.small {
    width: 12px;
    height: 12px;
    border-width: 2px;
    margin-right: 4px;
}

.ltn-spinner.dark {
    border-color: rgba(0, 0, 0, 0.2);
    border-top-color: var(--ltn-gray-700, #334155);
}

/* ===========================================
   ALIAS DE COMPATIBILIDAD (.acf-* → .ltn-*)
   Permite migración gradual sin romper código existente
   =========================================== */
.acf-button,
.acf-btn {
    background: var(--ltn-green-primary, #506727);
    color: white;
    border: none;
    border-radius: var(--ltn-border-radius, 8px);
    padding: 0 18px;
    font-size: var(--ltn-font-size-md, 14px);
    font-weight: 500;
    cursor: pointer;
    transition: var(--ltn-transition, all 0.2s ease);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: var(--ltn-shadow-sm, 0 2px 4px rgba(80, 103, 39, 0.1));
    height: 36px;
    min-height: 36px;
    line-height: 36px;
    box-sizing: border-box;
}

.acf-button:hover,
.acf-btn:hover {
    background: var(--ltn-green-light, #BACD70);
    color: var(--ltn-green-dark, #3e5120);
    transform: translateY(-1px);
    box-shadow: var(--ltn-shadow-md, 0 4px 8px rgba(186, 205, 112, 0.4));
}

.acf-button.cancel,
.acf-btn.cancel {
    background: var(--ltn-green-primary, #506727);
    color: white;
    white-space: nowrap;
    padding: 0 18px;
    min-width: fit-content;
    border: none;
    border-radius: var(--ltn-border-radius, 8px);
    font-weight: 500;
    font-size: var(--ltn-font-size-md, 14px);
    height: 36px;
    min-height: 36px;
    line-height: 36px;
    box-sizing: border-box;
}

.acf-button.cancel:hover,
.acf-btn.cancel:hover {
    background: var(--ltn-green-light, #BACD70);
    color: var(--ltn-green-dark, #3e5120);
    transform: translateY(-1px);
    box-shadow: var(--ltn-shadow-md, 0 4px 8px rgba(186, 205, 112, 0.4));
}

.acf-button.secondary,
.acf-btn.secondary {
    background: var(--ltn-gray-200, #E2E8F0);
    color: var(--ltn-gray-700, #334155);
}

.acf-button.secondary:hover,
.acf-btn.secondary:hover {
    background: var(--ltn-gray-300, #CBD5E0);
    color: var(--ltn-gray-900, #0F172A);
}

.acf-button-mini,
.acf-btn-mini {
    background: var(--ltn-green-primary, #506727);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: var(--ltn-font-size-xs, 11px);
    font-weight: 500;
    cursor: pointer;
    transition: var(--ltn-transition, all 0.2s ease);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    box-sizing: border-box;
}

.acf-button-mini:hover,
.acf-btn-mini:hover {
    background: var(--ltn-green-light, #BACD70);
    color: var(--ltn-green-dark, #3e5120);
}

.acf-button-mini.secondary,
.acf-btn-mini.secondary {
    background: var(--ltn-green-primary, #506727);
    color: white;
}

.acf-button-mini.secondary:hover,
.acf-btn-mini.secondary:hover {
    background: var(--ltn-green-light, #BACD70);
    color: var(--ltn-green-dark, #3e5120);
}

/* ─── Variantes Block Styles para bloques Gutenberg ─────────────────────
   Estas clases las genera Gutenberg automáticamente cuando el usuario
   selecciona una variante "Allage" en el panel lateral del editor.
   NUNCA usar valores hardcoded — solo variables --ltn-*
   ─────────────────────────────────────────────────────────────────────── */

.wp-block-button .wp-block-button__link.is-style-ltn-primary,
.is-style-ltn-primary .wp-block-button__link {
    background-color: var(--ltn-green-primary);
    border-color:     var(--ltn-green-primary);
    color:            var(--ltn-white);
    border-radius:    var(--ltn-border-radius);
    padding:          12px 24px;
    font-size:        var(--ltn-font-size-md);
    transition:       var(--ltn-transition);
}

.wp-block-button .wp-block-button__link.is-style-ltn-primary:hover,
.is-style-ltn-primary .wp-block-button__link:hover {
    background-color: var(--ltn-terra);
    border-color:     var(--ltn-terra);
}

.wp-block-button .wp-block-button__link.is-style-ltn-secondary,
.is-style-ltn-secondary .wp-block-button__link {
    background-color: transparent;
    border:           2px solid var(--ltn-green-primary);
    color:            var(--ltn-green-primary);
    border-radius:    var(--ltn-border-radius);
    padding:          10px 22px;
    transition:       var(--ltn-transition);
}

.wp-block-button .wp-block-button__link.is-style-ltn-secondary:hover,
.is-style-ltn-secondary .wp-block-button__link:hover {
    background-color: var(--ltn-green-primary);
    color:            var(--ltn-white);
}

.wp-block-button .wp-block-button__link.is-style-ltn-danger,
.is-style-ltn-danger .wp-block-button__link {
    background-color: var(--ltn-error);
    border-color:     var(--ltn-error);
    color:            var(--ltn-white);
    border-radius:    var(--ltn-border-radius);
    padding:          12px 24px;
    transition:       var(--ltn-transition);
}

.wp-block-button .wp-block-button__link.is-style-ltn-danger:hover,
.is-style-ltn-danger .wp-block-button__link:hover {
    background-color: var(--ltn-error-dark);
    border-color:     var(--ltn-error-dark);
}

/* ── Botón icono (sidebar inferior + tarjetas de colección) ── */
.ltn-sidebar-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ltn-border-radius);
    color: var(--ltn-gray-500);
    transition: var(--ltn-transition);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    position: relative;
}

.ltn-sidebar-action-btn:hover {
    background: var(--ltn-green-light-15);
    color: var(--ltn-green-primary);
}

/* Estado loading: oculta el icono y muestra spinner circular */
.ltn-sidebar-action-btn.loading {
    pointer-events: none;
    color: transparent;
}

.ltn-sidebar-action-btn.loading .dashicons {
    visibility: hidden;
}

.ltn-sidebar-action-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid var(--ltn-green-light-15, rgba(186, 205, 112, 0.15));
    border-top-color: var(--ltn-green-primary, #506727);
    border-radius: 50%;
    animation: ltn-button-spin 0.8s linear infinite;
}