.modal {
      display: none; /* Oculta por defecto */
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
    }

    .modal-content {
      background-color: rgb(240, 240, 240);
      margin: 10% auto;
      padding: 10px 0px 10px 10px;
      border-radius: 10px;
      width: 80%;
      max-width: 600px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
      animation: fadeIn 0.3s;
    }

    @keyframes fadeIn {
      from {opacity: 0; transform: scale(0.9);}
      to {opacity: 1; transform: scale(1);}
    }

    .info {
      padding: 20px;
    }

    .close {
      color: #888;
      float: right;
      font-size: 24px;
      cursor: pointer;
    }

    .close:hover {
      color: #000;
    }