/* =====================================================
    ANCLAJE SOLAR ENERGY - UI Components
    Botones, Cards, Forms y componentes reutilizables
    ===================================================== */
 
 /* =====================================================
    Buttons
    ===================================================== */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 14px 28px;
     font-size: 15px;
     font-weight: 600;
     border-radius: var(--radius-full);
     transition: var(--transition);
     cursor: pointer;
     border: 2px solid transparent;
     text-decoration: none;
 }
 
 .btn:focus-visible {
     outline: 2px solid var(--primary);
     outline-offset: 2px;
 }
 
 /* Button Sizes */
 .btn-sm {
     padding: 10px 20px;
     font-size: var(--text-sm);
 }
 
 .btn-lg {
     padding: 18px 36px;
     font-size: var(--text-base);
 }
 
 .btn-block {
     width: 100%;
 }
 
 /* Button Variants */
 .btn-primary {
     background: var(--gradient-primary);
     color: var(--white);
     border: none;
 }
 
 .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-primary);
 }
 
 .btn-outline {
     background: transparent;
     color: var(--white);
     border: 2px solid rgba(255, 255, 255, 0.3);
 }
 
 .btn-outline:hover {
     background: var(--white);
     color: var(--dark);
     border-color: var(--white);
 }
 
 .btn-outline-dark {
     background: transparent;
     color: var(--dark);
     border: 2px solid var(--gray-300);
 }
 
 .btn-outline-dark:hover {
     background: var(--dark);
     color: var(--white);
     border-color: var(--dark);
 }
 
 .btn-light {
     background: var(--white);
     color: var(--primary);
 }
 
 .btn-light:hover {
     background: var(--gray-100);
     transform: translateY(-2px);
 }
 
 .btn-whatsapp {
     background: #25d366;
     color: var(--white);
 }
 
 .btn-whatsapp:hover {
     background: #20bd5a;
     transform: translateY(-2px);
     box-shadow: 0 10px 40px rgba(37, 211, 102, 0.4);
 }
 
 /* =====================================================
    Cards
    ===================================================== */
 .card {
     background: var(--white);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow);
     overflow: hidden;
     transition: var(--transition);
 }
 
 .card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-lg);
 }
 
 /* Glass Card Effect */
 .glass-card {
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-lg);
 }
 
 .glass-card-dark {
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: var(--radius-lg);
 }
 
 /* =====================================================
    Form Elements
    ===================================================== */
 .form-group {
     margin-bottom: var(--space-5);
 }
 
 .form-label {
     display: block;
     font-size: var(--text-sm);
     font-weight: 500;
     color: var(--gray-700);
     margin-bottom: var(--space-2);
 }
 
 .form-input,
 .form-textarea,
 .form-select {
     width: 100%;
     padding: 14px 18px;
     background: var(--gray-100);
     border: 2px solid transparent;
     border-radius: var(--radius);
     font-size: var(--text-base);
     color: var(--dark);
     transition: var(--transition);
 }
 
 .form-input:focus,
 .form-textarea:focus,
 .form-select:focus {
     background: var(--white);
     border-color: var(--primary);
     box-shadow: 0 0 0 4px rgba(245, 184, 0, 0.1);
 }
 
 .form-input.error,
 .form-textarea.error {
     border-color: var(--error);
     background: var(--error-light);
 }
 
 .form-textarea {
     min-height: 150px;
     resize: vertical;
 }
 
 .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--space-5);
 }
 
 .form-error {
     font-size: var(--text-sm);
     color: var(--error);
     margin-top: var(--space-1);
 }
 
 .form-success {
     font-size: var(--text-sm);
     color: var(--success);
     margin-top: var(--space-1);
 }
 
 /* =====================================================
    Alerts & Messages
    ===================================================== */
 .alert {
     padding: var(--space-4) var(--space-5);
     border-radius: var(--radius);
     margin-bottom: var(--space-5);
 }
 
 .alert-success {
     background: var(--success-light);
     color: var(--success);
     border-left: 4px solid var(--success);
 }
 
 .alert-error {
     background: var(--error-light);
     color: var(--error);
     border-left: 4px solid var(--error);
 }
 
 .alert-warning {
     background: var(--warning-light);
     color: var(--warning);
     border-left: 4px solid var(--warning);
 }
 
 .alert-info {
     background: var(--info-light);
     color: var(--info);
     border-left: 4px solid var(--info);
 }
 
 /* =====================================================
    Loading Spinner
    ===================================================== */
 .spinner {
     width: 24px;
     height: 24px;
     border: 3px solid var(--gray-200);
     border-top-color: var(--primary);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
 }
 
 @keyframes spin {
     to { transform: rotate(360deg); }
 }
 
 /* =====================================================
    Badges
    ===================================================== */
 .badge {
     display: inline-flex;
     align-items: center;
     padding: 4px 12px;
     font-size: var(--text-xs);
     font-weight: 600;
     border-radius: var(--radius-full);
 }
 
 .badge-primary {
     background: rgba(245, 184, 0, 0.1);
     color: var(--primary);
 }
 
 .badge-success {
     background: var(--success-light);
     color: var(--success);
 }
 
 .badge-warning {
     background: var(--warning-light);
     color: var(--warning);
 }