/**
 * Botones - Sistema de Enlaces
 * Versión: 3.0
 * Estilos de botones usando variables CSS
 * Todas las variables están definidas en app.css
 */

/* ============================================
   BOTONES PRINCIPALES (Sólidos)
   ============================================ */

/* Botón Primary */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    transition: var(--transition);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-active);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-primary);
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--color-primary-active);
    border-color: var(--color-primary-active);
    color: white;
    box-shadow: 0 0 0 0.2rem var(--focus-primary);
}

/* Botón Success - Verde del sistema */
.btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: white;
    transition: var(--transition);
}

.btn-success:hover {
    background-color: var(--color-success-hover);
    border-color: var(--color-success-active);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-success);
}

.btn-success:focus,
.btn-success:active,
.btn-success.active {
    background-color: var(--color-success-active);
    border-color: var(--color-success-active);
    color: white;
    box-shadow: 0 0 0 0.2rem var(--focus-success);
}

/* Botón Warning - Dorado */
.btn-warning {
    background-color: var(--icon-highlight);
    border-color: var(--icon-highlight);
    color: #333;
    transition: var(--transition);
}

.btn-warning:hover {
    background-color: var(--color-warning-hover);
    border-color: var(--color-warning-active);
    color: #333;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-warning);
}

.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
    background-color: var(--color-warning-active);
    border-color: var(--color-warning-active);
    color: #333;
    box-shadow: 0 0 0 0.2rem var(--focus-warning);
}

/* Botón Danger - Rojo */
.btn-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: white;
    transition: var(--transition);
}

.btn-danger:hover {
    background-color: var(--color-danger-hover);
    border-color: var(--color-danger-active);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-danger);
}

.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
    background-color: var(--color-danger-active);
    border-color: var(--color-danger-active);
    color: white;
    box-shadow: 0 0 0 0.2rem var(--focus-danger);
}

/* Botón Info - Azul info */
.btn-info {
    background-color: var(--color-info);
    border-color: var(--color-info);
    color: white;
    transition: var(--transition);
}

.btn-info:hover {
    background-color: var(--color-info-hover);
    border-color: var(--color-info-active);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-info);
}

.btn-info:focus,
.btn-info:active,
.btn-info.active {
    background-color: var(--color-info-active);
    border-color: var(--color-info-active);
    color: white;
    box-shadow: 0 0 0 0.2rem var(--focus-info);
}

/* Botón Alternative - Púrpura */
.btn-alternative {
    background-color: var(--color-alternative);
    border-color: var(--color-alternative);
    color: white;
    transition: var(--transition);
}

.btn-alternative:hover {
    background-color: var(--color-alternative-hover);
    border-color: var(--color-alternative-active);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-alternative);
}

.btn-alternative:focus,
.btn-alternative:active,
.btn-alternative.active {
    background-color: var(--color-alternative-active);
    border-color: var(--color-alternative-active);
    color: white;
    box-shadow: 0 0 0 0.2rem var(--focus-alternative);
}

/* Botón Secondary - Gris */
.btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: white;
    transition: var(--transition);
}

.btn-secondary:hover {
    background-color: var(--color-secondary-hover);
    border-color: var(--color-secondary-active);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-secondary);
}

.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
    background-color: var(--color-secondary-active);
    border-color: var(--color-secondary-active);
    color: white;
    box-shadow: 0 0 0 0.2rem var(--focus-secondary);
}

/* Botón Dark - Negro/Gris oscuro */
.btn-dark {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    color: white;
    transition: var(--transition);
}

.btn-dark:hover {
    background-color: var(--color-dark-hover);
    border-color: var(--color-dark-active);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-dark);
}

.btn-dark:focus,
.btn-dark:active,
.btn-dark.active {
    background-color: var(--color-dark-active);
    border-color: var(--color-dark-active);
    color: white;
    box-shadow: 0 0 0 0.2rem var(--focus-dark);
}

/* Botón Light - Claro */
.btn-light {
    background-color: var(--color-light);
    border-color: var(--color-light);
    color: #333;
    transition: var(--transition);
}

.btn-light:hover {
    background-color: var(--color-light-hover);
    border-color: var(--color-light-active);
    color: #333;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-light);
}

.btn-light:focus,
.btn-light:active,
.btn-light.active {
    background-color: var(--color-light-active);
    border-color: var(--color-light-active);
    color: #333;
    box-shadow: 0 0 0 0.2rem var(--focus-light);
}

/* ============================================
   BOTONES OUTLINE (Transparentes con borde)
   ============================================ */

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: transparent;
}

.btn-outline-primary:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    transform: translateY(-2px);
}

.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    box-shadow: 0 0 0 0.2rem var(--focus-primary);
}

.btn-outline-success {
    color: var(--color-success);
    border-color: var(--color-success);
    background-color: transparent;
}

.btn-outline-success:hover {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: white;
    transform: translateY(-2px);
}

.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success.active {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: white;
    box-shadow: 0 0 0 0.2rem var(--focus-success);
}

.btn-outline-warning {
    color: var(--color-warning);
    border-color: var(--color-warning);
    background-color: transparent;
}

.btn-outline-warning:hover {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: #333;
    transform: translateY(-2px);
}

.btn-outline-warning:focus,
.btn-outline-warning:active,
.btn-outline-warning.active {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: #333;
    box-shadow: 0 0 0 0.2rem var(--focus-warning);
}

.btn-outline-danger {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background-color: transparent;
}

.btn-outline-danger:hover {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: white;
    transform: translateY(-2px);
}

.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger.active {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: white;
    box-shadow: 0 0 0 0.2rem var(--focus-danger);
}

.btn-outline-info {
    color: var(--color-info);
    border-color: var(--color-info);
    background-color: transparent;
}

.btn-outline-info:hover {
    background-color: var(--color-info);
    border-color: var(--color-info);
    color: white;
    transform: translateY(-2px);
}

.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info.active {
    background-color: var(--color-info);
    border-color: var(--color-info);
    color: white;
    box-shadow: 0 0 0 0.2rem var(--focus-info);
}

.btn-outline-alternative {
    color: var(--color-alternative);
    border-color: var(--color-alternative);
    background-color: transparent;
}

.btn-outline-alternative:hover {
    background-color: var(--color-alternative);
    border-color: var(--color-alternative);
    color: white;
    transform: translateY(-2px);
}

.btn-outline-alternative:focus,
.btn-outline-alternative:active,
.btn-outline-alternative.active {
    background-color: var(--color-alternative);
    border-color: var(--color-alternative);
    color: white;
    box-shadow: 0 0 0 0.2rem var(--focus-alternative);
}

.btn-outline-secondary {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
    background-color: transparent;
}

.btn-outline-secondary:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: white;
    transform: translateY(-2px);
}

.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: white;
    box-shadow: 0 0 0 0.2rem var(--focus-secondary);
}

.btn-outline-dark {
    color: var(--color-dark);
    border-color: var(--color-dark);
    background-color: transparent;
}

.btn-outline-dark:hover {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    color: white;
    transform: translateY(-2px);
}

.btn-outline-dark:focus,
.btn-outline-dark:active,
.btn-outline-dark.active {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    color: white;
    box-shadow: 0 0 0 0.2rem var(--focus-dark);
}

.btn-outline-light {
    color: var(--color-light);
    border-color: var(--color-light);
    background-color: transparent;
}

.btn-outline-light:hover {
    background-color: var(--color-light);
    border-color: var(--color-light);
    color: #333;
    transform: translateY(-2px);
}

.btn-outline-light:focus,
.btn-outline-light:active,
.btn-outline-light.active {
    background-color: var(--color-light);
    border-color: var(--color-light);
    color: #333;
    box-shadow: 0 0 0 0.2rem var(--focus-light);
}

/* ============================================
   BOTONES LINK (Sin fondo, solo texto como enlace)
   ============================================ */

.btn-link {
    font-weight: 400;
    color: var(--color-primary);
    text-decoration: none;
    background-color: transparent;
    border: none;
}

.btn-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
    background-color: transparent;
    border-color: transparent;
}

.btn-link:focus,
.btn-link:active {
    text-decoration: underline;
    box-shadow: none;
}

.btn-link:disabled,
.btn-link.disabled {
    color: #6c757d;
    pointer-events: none;
}

/* Variantes de botones link */
.btn-link-success {
    color: var(--color-success);
}

.btn-link-success:hover {
    color: var(--color-success-hover);
}

.btn-link-danger {
    color: var(--color-danger);
}

.btn-link-danger:hover {
    color: var(--color-danger-hover);
}

.btn-link-warning {
    color: var(--color-warning);
}

.btn-link-warning:hover {
    color: var(--color-warning-hover);
}

.btn-link-info {
    color: var(--color-info);
}

.btn-link-info:hover {
    color: var(--color-info-hover);
}

.btn-link-alternative {
    color: var(--color-alternative);
}

.btn-link-alternative:hover {
    color: var(--color-alternative-hover);
}

.btn-link-secondary {
    color: var(--color-secondary);
}

.btn-link-secondary:hover {
    color: var(--color-secondary-hover);
}

.btn-link-dark {
    color: var(--color-dark);
}

.btn-link-dark:hover {
    color: var(--color-dark-hover);
}

/* ============================================
   BOTONES LEGACY (Compatibilidad)
   ============================================ */

/* Botón Icon (legacy) - usa color warning (dorado) */
.btn-icon {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: #333;
    transition: var(--transition);
}

.btn-icon:hover {
    background-color: var(--color-warning-hover);
    border-color: var(--color-warning-active);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-warning);
}

.btn-icon:focus,
.btn-icon:active {
    background-color: var(--color-warning-active);
    border-color: var(--color-warning-active);
    color: #fff;
    box-shadow: 0 0 0 0.2rem var(--focus-warning);
}

/* ============================================
   BOTONES ESPECIALES
   ============================================ */

/* Botón de Login - usa color de action del tema */
.btn-login {
    background: var(--color-action-primary);
    border: none;
    padding: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    color: white;
}

.btn-login:hover {
    background: var(--color-action-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 132, 165, 0.4);
    color: white;
}

.btn-login:focus,
.btn-login:active {
    background: var(--color-action-hover);
    color: white;
    box-shadow: 0 0 0 0.2rem rgba(0, 132, 165, 0.25);
}

/* Botón con gradiente - usa color de action del tema */
.btn-gradient {
    background: var(--color-action-primary);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    background: var(--color-action-hover);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 132, 165, 0.4);
    color: white;
}

/* Botón con icono dividido */
.btn-icon-split {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-icon-split i {
    transition: transform 0.3s ease;
}

.btn-icon-split:hover i {
    transform: translateX(3px);
}

/* ============================================
   TAMAÑOS DE BOTONES
   ============================================ */

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
}

/* ============================================
   ESTADOS DE BOTONES
   ============================================ */

.btn:disabled,
.btn.disabled {
    opacity: var(--btn-disabled-opacity);
    cursor: var(--btn-disabled-cursor);
    transform: none !important;
    pointer-events: none;
}

.btn:focus {
    outline: none;
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Estado loading */
.btn.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    margin-left: -0.5rem;
    margin-top: -0.5rem;
    border: 2px solid transparent;
    border-top-color: white;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   GRUPOS DE BOTONES
   ============================================ */

.btn-group {
    display: inline-flex;
    vertical-align: middle;
}

.btn-group > .btn {
    position: relative;
    flex: 0 1 auto;
}

.btn-group > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active {
    z-index: 1;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 576px) {
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .btn-lg {
        padding: 0.65rem 1.25rem;
        font-size: 1rem;
    }
    
    .btn-sm {
        padding: 0.35rem 0.65rem;
        font-size: 0.8rem;
    }
}