
<style>
@keyframes heartbeat {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 0.8; }
}

@keyframes ecg {
  0% { stroke-dashoffset: 1000; }
  100% { stroke-dashoffset: 0; }
}

.medical-text-container {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 1.5rem;
  border-radius: 15px;
  border: 2px solid #2A4E6D40;
  box-shadow: 0 4px 15px rgba(42, 78, 109, 0.1);
}

.heartbeat-animation {
  animation: heartbeat 1.8s ease-in-out infinite;
}

.medical-icon {
  color: #e63946;
  font-size: 1.8em;
  vertical-align: middle;
  margin: 0 10px;
}

.ecg-progress {
  background: #f8f9fa;
  border-radius: 25px;
  border: 2px solid #2A4E6D20;
  overflow: hidden;
}

.floating-icons {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.icon-medical {
  position: absolute;
  opacity: 0.1;
  animation: float 6s infinite linear;
}

@keyframes float {
  0% { transform: translateY(0) translateX(0); opacity: 0.1; }
  25% { transform: translateY(-20px) translateX(10px); }
  50% { transform: translateY(10px) translateX(-10px); opacity: 0.15; }
  75% { transform: translateY(-10px) translateX(20px); }
  100% { transform: translateY(0) translateX(0); opacity: 0.1; }
}

.modal-content {
  border-radius: 20px;
  border: 3px solid #2A4E6D;
  box-shadow: 0 10px 40px rgba(42, 78, 109, 0.2);
}



</style>
<div>
<!-- Modal -->
<div class="modal fade" id="modalLoading" tabindex="-1" data-bs-backdrop="static">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0" style="background: rgba(255, 255, 255, 0.98);">
      <div class="modal-body">
        <div class="row justify-content-center">
          <div class="col-12 text-center">
            
            <!-- Corazón con latido animado -->
            <div class="heartbeat-animation mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width: 6rem; height: 6rem;">
                <path fill="#e63946" d="M12 4.435c-1.989-5.399-12-4.597-12 3.568 0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-8.188-10-8.999-12-3.568z"/>
                <path class="heart-line" fill="none" stroke="#2a4e6d" stroke-width="2" 
                      d="M0 20h24" stroke-dasharray="10 6" style="animation: heartbeat 1.5s infinite;">
              </svg>
            </div>

            <!-- Texto médico -->
            <div class="medical-text-container mb-3">
              <h3 class="text-primary display-6 fw-bold mb-2">
                <span class="medical-icon">⨀</span> 
                {{__('common.loadingTitle')}}
                <span class="medical-icon">⨀</span>
              </h3>
              <p class="text-muted mb-0" style="font-size: 1.1rem;">
                <span class="badge bg-light text-dark me-2">✓ SolidCinic360</span>
                <span class="badge bg-light text-dark">⨁ Cambiando el mundo</span>
              </p>
            </div>

            <!-- Barra de progreso estilo ECG -->
            <div class="ecg-progress" style="height: 30px; position: relative;">
              <div class="ecg-line" style="background: repeating-linear-gradient(
                90deg,
                #2A4E6D 0px,
                #2A4E6D 5px,
                transparent 5px,
                transparent 10px
              ); height: 2px; width: 100%; position: absolute; top: 50%;"></div>
              
              <div class="ecg-wave" style="position: absolute; width: 100%; height: 100%;">
                <svg viewBox="0 0 500 50" style="width: 100%; height: 100%;">
                  <path fill="none" stroke="#e63946" stroke-width="3" 
                        d="M0 25 Q 125 0 250 25 T 500 25"
                        style="animation: ecg 2s linear infinite;"/>
                </svg>
              </div>
            </div>

            <!-- Iconos flotantes -->
            <div class="floating-icons">
              <span class="icon-medical">❤️</span>
              <span class="icon-medical">⚕</span>
              <span class="icon-medical">🩺</span>
              <span class="icon-medical">💊</span>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
