/**
 * Componentes Comunes - The Linkers System - OPTIMIZADO
 *
 * ✅ CAMBIOS APLICADOS:
 * - Botones más compactos: padding reducido
 * - Font-size de botones: 14px → 13px
 * - Mantiene toda la funcionalidad intacta
 *
 * @version    2.0.1 - OPTIMIZADO PARA ESPACIOS REDUCIDOS
 * @updated    2025-11-19
 */

/* ============================================================================
   BADGES DE ESTADO (Sin cambios - funcionan bien)
   ============================================================================ */

.tls-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tls-space-1);
  padding: var(--tls-space-2) var(--tls-space-4);
  border-radius: var(--tls-radius-full);
  font-size: var(--tls-text-xs);
  font-weight: var(--tls-font-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--tls-transition-fast);
  line-height: 1;
  border: 2px solid transparent;
}

.tls-badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--tls-shadow-sm);
}

.tls-badge-nuevo {
  background: linear-gradient(135deg, rgba(0, 102, 196, 0.15), rgba(0, 102, 196, 0.25));
  color: var(--tls-linkers-secondary);
  border-color: rgba(0, 102, 196, 0.3);
}

.tls-badge-contactado {
  background: linear-gradient(135deg, rgba(0, 174, 239, 0.15), rgba(0, 174, 239, 0.25));
  color: var(--tls-linkers-secondary-alt);
  border-color: rgba(0, 174, 239, 0.3);
}

.tls-badge-entrevista_agendada,
.tls-badge-entrevista_realizada,
.tls-badge-propiedad_visitada,
.tls-badge-buscando_propiedades,
.tls-badge-visitas_programadas,
.tls-badge-en_negociacion {
  background: linear-gradient(135deg, rgba(255, 92, 57, 0.15), rgba(255, 112, 67, 0.25));
  color: var(--tls-linkers-primary);
  border-color: rgba(255, 92, 57, 0.3);
}

.tls-badge-cerrado_exito {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.25));
  color: var(--tls-success-dark);
  border-color: rgba(16, 185, 129, 0.3);
}

.tls-badge-cerrado_perdido {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.25));
  color: var(--tls-error-dark);
  border-color: rgba(239, 68, 68, 0.3);
}

.tls-badge-success {
  background: var(--tls-success-light);
  color: var(--tls-success-dark);
  border-color: rgba(16, 185, 129, 0.3);
}

.tls-badge-warning {
  background: var(--tls-warning-light);
  color: var(--tls-warning-dark);
  border-color: rgba(245, 158, 11, 0.3);
}

.tls-badge-error {
  background: var(--tls-error-light);
  color: var(--tls-error-dark);
  border-color: rgba(239, 68, 68, 0.3);
}

.tls-badge-info {
  background: var(--tls-info-light);
  color: var(--tls-info);
  border-color: rgba(59, 130, 246, 0.3);
}

/* ============================================================================
   BOTONES - THE LINKERS (Backend) - OPTIMIZADOS
   ============================================================================ */

.tls-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tls-space-2);
  padding: 8px 14px; /* ✅ REDUCIDO: era 12px 24px */
  border-radius: var(--tls-radius-md);
  font-size: 13px; /* ✅ REDUCIDO: era 14px */
  font-weight: var(--tls-font-bold);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--tls-transition-slow);
  white-space: nowrap;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
}

.tls-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 92, 57, 0.3);
}

.tls-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.tls-btn-primary {
  background: linear-gradient(135deg, var(--tls-linkers-primary), var(--tls-linkers-primary-soft));
  color: var(--tls-white);
  box-shadow: var(--tls-shadow-linkers);
}

.tls-btn-primary:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: var(--tls-shadow-linkers-hover);
}

.tls-btn-action {
  background: linear-gradient(135deg, var(--tls-linkers-primary-soft), var(--tls-linkers-primary));
  color: var(--tls-white);
  box-shadow: 0 6px 20px rgba(255, 112, 67, 0.3);
}

.tls-btn-action:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(255, 112, 67, 0.4);
}

.tls-btn-secondary {
  background-color: var(--tls-white);
  color: var(--tls-linkers-primary);
  border: 2px solid var(--tls-linkers-primary);
}

.tls-btn-secondary:hover:not(:disabled) {
  background-color: rgba(255, 92, 57, 0.05);
  transform: translateY(-3px);
  box-shadow: var(--tls-shadow-sm);
}

.tls-btn-tertiary {
  background-color: var(--tls-white);
  color: var(--tls-linkers-secondary);
  border: 2px solid var(--tls-linkers-secondary);
}

.tls-btn-tertiary:hover:not(:disabled) {
  background-color: rgba(0, 102, 196, 0.05);
  transform: translateY(-3px);
  box-shadow: var(--tls-shadow-sm);
}

.tls-btn-success {
  background: linear-gradient(135deg, var(--tls-success), var(--tls-success-dark));
  color: var(--tls-white);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
}

.tls-btn-success:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
}

.tls-btn-danger {
  background: linear-gradient(135deg, var(--tls-error), var(--tls-error-dark));
  color: var(--tls-white);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
}

.tls-btn-danger:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.4);
}

.tls-btn-sm {
  padding: 6px 12px; /* ✅ REDUCIDO: era 8px 16px */
  font-size: 12px; /* ✅ REDUCIDO: era var(--tls-text-xs) */
  border-radius: var(--tls-radius-base);
}

.tls-btn-lg {
  padding: var(--tls-space-4) var(--tls-space-10);
  font-size: var(--tls-text-base);
  border-radius: var(--tls-radius-lg);
}

/* ============================================================================
   BOTONES - MARCELO MAZZA (Frontend) - SIN CAMBIOS
   ============================================================================ */

.tls-btn-mazza-primary {
  background: var(--tls-gradient-mazza-dark);
  color: var(--tls-mazza-white);
  padding: var(--tls-space-4) var(--tls-space-8);
  border-radius: var(--tls-radius-md);
  font-weight: var(--tls-font-bold);
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: var(--tls-shadow-mazza);
}

.tls-btn-mazza-primary:hover:not(:disabled) {
  background: var(--tls-mazza-black);
  transform: translateY(-3px);
  box-shadow: var(--tls-shadow-xl);
}

.tls-btn-mazza-gold {
  background: var(--tls-gradient-mazza);
  color: var(--tls-mazza-black);
  padding: var(--tls-space-4) var(--tls-space-8);
  border-radius: var(--tls-radius-md);
  font-weight: var(--tls-font-bold);
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: var(--tls-shadow-mazza);
}

.tls-btn-mazza-gold:hover:not(:disabled) {
  background: var(--tls-mazza-gold-light);
  transform: translateY(-3px);
  box-shadow: var(--tls-shadow-xl);
}

/* ============================================================================
   CARDS (Sin cambios - funcionan bien)
   ============================================================================ */

.tls-card {
  background-color: var(--tls-white);
  border-radius: var(--tls-radius-2xl);
  box-shadow: var(--tls-shadow-base);
  overflow: hidden;
  transition: all var(--tls-transition-slow);
  border: 2px solid transparent;
}

.tls-card:hover {
  box-shadow: var(--tls-shadow-lg);
  transform: translateY(-4px);
}

.tls-card-bordered {
  border-left: 4px solid var(--tls-linkers-primary);
}

.tls-card-header {
  padding: var(--tls-space-6);
  border-bottom: 1px solid var(--tls-gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tls-card-title {
  font-size: var(--tls-text-lg);
  font-weight: var(--tls-font-bold);
  color: var(--tls-linkers-dark);
  margin: 0;
}

.tls-card-body {
  padding: var(--tls-space-6);
}

.tls-card-footer {
  padding: var(--tls-space-6);
  border-top: 1px solid var(--tls-gray-200);
  background-color: var(--tls-gray-50);
}

/* ============================================================================
   ELEMENTOS DE CARGA (Sin cambios)
   ============================================================================ */

.tls-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--tls-z-modal);
  animation: tls-fade-in 0.3s ease;
}

.tls-loading-spinner {
  background: var(--tls-white);
  padding: var(--tls-space-8);
  border-radius: var(--tls-radius-2xl);
  box-shadow: var(--tls-shadow-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tls-space-4);
}

.tls-loading-spinner .dashicons {
  font-size: 48px;
  color: var(--tls-linkers-primary);
  animation: tls-spin 1s linear infinite;
}

.tls-input-loading {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="%23FF5C39" stroke-width="4"><animate attributeName="stroke-dasharray" dur="1.5s" repeatCount="indefinite" values="1,150;90,150;90,150"/><animate attributeName="stroke-dashoffset" dur="1.5s" repeatCount="indefinite" values="0;-35;-124"/></circle></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 20px 20px !important;
  padding-right: 40px !important;
}

/* ============================================================================
   UTILIDADES (Sin cambios)
   ============================================================================ */

.tls-text-primary { color: var(--tls-linkers-primary); }
.tls-text-secondary { color: var(--tls-linkers-secondary); }
.tls-text-success { color: var(--tls-success); }
.tls-text-warning { color: var(--tls-warning); }
.tls-text-error { color: var(--tls-error); }
.tls-text-muted { color: var(--tls-gray-600); }
.tls-text-dark { color: var(--tls-linkers-dark); }

.tls-bg-primary { background-color: var(--tls-linkers-primary); }
.tls-bg-secondary { background-color: var(--tls-linkers-secondary); }
.tls-bg-light { background-color: var(--tls-gray-50); }
.tls-bg-white { background-color: var(--tls-white); }

.tls-mb-0 { margin-bottom: 0; }
.tls-mb-2 { margin-bottom: var(--tls-space-2); }
.tls-mb-4 { margin-bottom: var(--tls-space-4); }
.tls-mb-6 { margin-bottom: var(--tls-space-6); }
.tls-mb-8 { margin-bottom: var(--tls-space-8); }

.tls-mt-0 { margin-top: 0; }
.tls-mt-2 { margin-top: var(--tls-space-2); }
.tls-mt-4 { margin-top: var(--tls-space-4); }
.tls-mt-6 { margin-top: var(--tls-space-6); }
.tls-mt-8 { margin-top: var(--tls-space-8); }

/* FIN DE COMPONENTES COMUNES OPTIMIZADOS */