/* Separar menú de formulario */
.formulario {
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  max-width: 400px;
  margin: 50px auto 2em; /* Aquí cambiamos 0 auto 2em por 50px auto 2em */
}

    .formulario input, .formulario select { width: 100%; padding: 10px; margin: 10px 0; border-radius: 5px; border: 1px solid #ccc; }
    .formulario button { background-color: #007BFF; color: white; padding: 10px 20px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
    .boleto { width: 320px; margin: 0 auto; padding: 25px 20px; border: 4px dashed #FFD700; border-radius: 16px; background: #fff; font-family: 'Arial', sans-serif; box-shadow: 0 4px 15px rgba(0,0,0,0.15); color: #003366; position: relative; }
    .boleto::before, .boleto::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 60px; height: 20px; background: #f8f9fa; border: 4px dashed #FFD700; border-radius: 50%; }
    .boleto::before { top: -15px; } .boleto::after { bottom: -15px; }
    .boleto .header { text-align: center; margin-bottom: 20px; }
    .boleto .header img { max-height: 60px; }
    .boleto .titulo h3 { margin: 5px 0; font-size: 18px; font-weight: bold; color: #003366; }
    .boleto hr { border: none; border-top: 2px dashed #FFD700; margin: 20px 0; }
    .boleto .info-boleto { font-size: 20px; margin: 15px 0; text-align: center; }
    .boleto .boleto-numero { font-size: 28px; font-weight: bold; color: #FFD700; }
    .boleto .detalles p { margin: 12px 0; font-size: 15px; text-align: left; }
    .boleto .detalles span { font-weight: bold; color: #003366; }
    .boleto .footer { margin-top: 30px; text-align: center; font-size: 18px; font-weight: bold; color: #FFD700; }
    .pdf-btn { display: inline-block; margin-top: 20px; background-color: #003366; color: #f6f7f8ff; padding: 10px 15px; border-radius: 6px; text-decoration: none; font-weight: bold; }
    .mensaje { color: red; margin-bottom: 20px; }