/* =====================================================
   ESTILOS GENERALES SOAT - SIMULADOR Y APOYO
   ===================================================== */

body {
  background: linear-gradient(135deg, #ffb900 0%, #ff8f00 100%);
}

.soat-background {
  min-height: 100vh;
}

/* =====================================================
   BADGES Y ELEMENTOS DESTACADOS
   ===================================================== */

.hero-badge,
.success-badge {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* =====================================================
   ANIMACIONES Y EFECTOS
   ===================================================== */

.pulse-button {
  animation: pulse 2s infinite;
  transition: all 0.3s ease !important;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}

.pulse-button:hover {
  animation: none;
  transform: scale(1.05) !important;
}

.soat-card:hover,
.tecnomecanica-card:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
}

/* =====================================================
   ESTILOS DE FORMULARIOS
   ===================================================== */

.form-floating > .form-select {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

.form-floating > label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating .kv-plugin-loading,
.form-floating select[data-krajee-depdrop] {
  padding-top: 1.625rem !important;
  padding-bottom: 0.625rem !important;
  height: calc(3.5rem + 2px) !important;
  line-height: 1.25 !important;
}

.form-floating select[data-krajee-depdrop] ~ label {
  opacity: 0.65 !important;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
}

.form-floating select[data-krajee-depdrop]:placeholder-shown ~ label {
  opacity: 0.65 !important;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
}

.form-control {
  border-radius: 8px;
  border: 1px solid #dee2e6;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.form-check-input:checked {
  background-color: #198754;
  border-color: #198754;
}

.form-check {
  transition: background-color 0.2s;
}

.form-check-input:checked + .form-check-label {
  font-weight: 600;
}

/* =====================================================
   CARDS Y CONTENEDORES
   ===================================================== */

.total-summary-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
}

.icon-circle {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* =====================================================
   EFECTOS ESPECIALES
   ===================================================== */

.highlight-savings {
  position: relative;
  overflow: hidden;
}

.highlight-savings::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(13, 110, 253, 0.1),
    transparent
  );
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }

  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

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

@media (max-width: 768px) {
  .display-5 {
    font-size: 2rem !important;
  }

  .card-body {
    padding: 1.5rem !important;
  }

  .summary-icon {
    width: 50px !important;
    height: 50px !important;
  }

  .icon-circle {
    width: 35px !important;
    height: 35px !important;
  }
}