/* Estilos base para el botón X */
  .btn-close-white {
      position: absolute;
      right: 15px;
      top: 15px;
      z-index: 1051;
      width: 30px !important;
      height: 30px !important;
      background: rgba(255, 255, 255, 0.2) !important;
      border-radius: 50%;
      padding: 0;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 2px solid rgba(255, 255, 255, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .btn-close-white::before,
  .btn-close-white::after {
      content: '';
      position: absolute;
      width: 15px;
      height: 2px;
      background-color: white;
      transition: all 0.3s ease;
  }
  
  .btn-close-white::before {
      transform: rotate(45deg);
  }
  
  .btn-close-white::after {
      transform: rotate(-45deg);
  }
  
  .btn-close-white:hover {
      background: rgba(255, 255, 255, 0.3) !important;
      transform: rotate(90deg);
  }
  
  /* Eliminamos la X por defecto de Bootstrap */
  .btn-close {
      background: none !important;
      opacity: 1 !important;
  }
  
  /* Ajustes específicos para móvil */
  @media (max-width: 768px) {
      .btn-close-white {
          width: 40px !important;  /* Botón más grande en móvil */
          height: 40px !important;
          right: 10px;
          top: 10px;
          border: 3px solid rgba(255, 255, 255, 0.7); /* Borde más visible */
          background: rgba(255, 255, 255, 0.3) !important; /* Fondo más visible */
      }
  
      .btn-close-white::before,
      .btn-close-white::after {
          width: 20px;  /* Líneas más gruesas */
          height: 3px;
      }
  }
  
  /* Ajustes para pantallas muy pequeñas */
  @media (max-width: 480px) {
      .btn-close-white {
          width: 44px !important;
          height: 44px !important;
      }
  }