body {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f4f8;
            font-family: Arial, sans-serif;
        }

        .container {
            max-width: 90%;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-top: 100px;
            width: 90%;
        }

        h1 {
            text-align: center;
            color: #333333;
            margin-bottom: 20px;
            font-size: 24px;
        }

        .groupbox {
            margin-bottom: 20px;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 10px;
            background-color: #f1f1f1;
            width: 25%;
        }

        .groupbox label {
            display: block;
            margin: 5px 0;
            font-weight: bold;
        }

        button[type="submit"] {
            width: 200px;
            padding: 10px;
             background: linear-gradient(to bottom, #007bff 50%, #0056b3 100%);
            color: #ffffff;
            border: none;
            border-radius: 15px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease;
            grid-column: span 2;
            margin: 0 auto;
            margin-top: 15px;
        }

        button[type="submit"]:hover {
            background: linear-gradient(to bottom, #0056b3 50%, #003f8a 100%);
        }

        #submitButton:disabled, #submitButton2:disabled {
            background-color: #cccccc; /* Color de fondo deshabilitado */
            color: #666666; /* Color de texto deshabilitado */
            cursor: not-allowed; /* Cambia el cursor a 'no permitido' */
            opacity: 0.6; /* Reduce la opacidad para dar un efecto de deshabilitado */
        }

         #submitButtonMod:disabled {
            background-color: #cccccc; /* Color de fondo deshabilitado */
            color: #666666; /* Color de texto deshabilitado */
            cursor: not-allowed; /* Cambia el cursor a 'no permitido' */
            opacity: 0.6; /* Reduce la opacidad para dar un efecto de deshabilitado */
        }

             #AddToList{
            width: 200px;
            padding: 10px;
            background-color: #007bff;
            color: #ffffff;
            border: none;
            border-radius: 15px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            grid-column: span 2;
            margin: 0 auto;
            margin-top: 15px;
        }

        #add-to-list{
            background: linear-gradient(to bottom, #1f990f 50%, #116207 100%);
                    border-radius: 15px;
          width: 50%;
          margin-top: 18px;
          font-weight: bold;
        }

      #add-to-list:hover {
             background: linear-gradient(to bottom, #116207 50%, #0a3b03 100%);
        }

        .content-container {
            display: none;
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 10px;
            background-color: #ffffff;
        }



        .content-container h2 {
            color: #333333;
            font-size: 18px;
            margin-bottom: 10px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            margin-bottom: -5px;
        }

        .form-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .form-group label {
            font-weight: bold;
            margin-bottom: 5px;

        }

        .form-group input, 
        .form-group select {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        #budget_codeTravel{
               padding: 8px;
            border: 1px solid #ddd;
            border-radius: 5px;
            width: 20%;
        }

           .radio-group2 {
            flex-direction: column;
            margin-bottom: -5px;
        }

           .radio-group2 label {
            font-weight: bold;
            margin-bottom: 5px;
             margin-left: 20px;
        }


        .radio-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        #ptaForm {
            display: flex;
            flex-wrap: wrap;
        }

        #ptaForm .form-group {
            flex: 1 1 45%; /* Ajusta el ancho de las columnas */
            margin: 10px;
        }

        #pta-add .form-group {
            margin-top: 10px;
        }

    #pta-add {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 20px;
           grid-column: 1 / -1; /* Ocupa el ancho completo si está en un grid */
        width: 95%;
    }

    #pta-add .form-group {
        margin-bottom: 1px;
    }

        #travel .form-group {
            margin-top: -10px;
        }

    #travel {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 20px;
           grid-column: 1 / -1; /* Ocupa el ancho completo si está en un grid */
        width: 95%;
         border: 2px solid #ccc; /* Cambia el grosor del borde a 2px */
    border-radius: 25px; /* Opcional: Bordes redondeados */
    padding: 25px; /* Opcional: Ajusta el relleno interno */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Opcional: Agrega un efecto de sombra */
    }

    #travel .form-group {
        margin-bottom: -5px;
    }

            #travelcar .form-group {
            margin-top: -10px;
        }

    #travelcar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 20px;
           grid-column: 1 / -1; /* Ocupa el ancho completo si está en un grid */
        width: 95%;
         border: 2px solid #ccc; /* Cambia el grosor del borde a 2px */
    border-radius: 25px; /* Opcional: Bordes redondeados */
    padding: 25px; /* Opcional: Ajusta el relleno interno */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Opcional: Agrega un efecto de sombra */
    }

    #travelcar .form-group {
        margin-bottom: -5px;
    }

 .products-table {
            border-collapse: collapse;
            margin-top: 20px;
                grid-column: 1 / -1; /* Ocupa el ancho completo si está en un grid */
              width: 95%;
        }
        .products-table th, .products-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }
        .products-table th {
            background-color: #f4f4f4;
        }
        .products-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .button {
            padding: 10px 15px;
            border: none;
               background: linear-gradient(to bottom, #007bff 50%, #0056b3 100%);
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
        }
        .button:hover {
             background: linear-gradient(to bottom, #0056b3 50%, #003f8a 100%);
        }

/* Posicionar el segundo groupbox a la derecha del primero */
.groupbox-container {
    display: flex;
    align-items: flex-start;
}

.groupbox {
    margin-right: 20px; /* Espacio entre los dos groupboxes */
}

#additionalGroupbox {
    display: none; /* Ocultar por defecto */
}

 textarea {
    width: calc(100% - 20px);
    height: 80px; /* Tamaño fijo para el textarea */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    resize: none; /* Evita el redimensionamiento */
}

    .table-container {
        width: 200%;
        z-index: 1000;
         grid-column: span 2; /* Hace que la tabla ocupe ambas columnas */
    }

    .budget-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }

    .budget-table th, .budget-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: center;
        white-space: nowrap;
    }

    .budget-table th {
        background-color: #f2f2f2;
    }

    .monthly-input, .monthly-inputM {
        width: 100%;
        box-sizing: border-box;
    }

    #totalBudget {
        width: 100%;
        box-sizing: border-box;
        background-color: #f9f9f9;
        border: none;
        text-align: center;
    }

        #totalBudgetM {
        width: 100%;
        box-sizing: border-box;
        background-color: #f9f9f9;
        border: none;
        text-align: center;
    }


    .input-narrow {
        width: 95%;
    }

    .input-wide {
        width: 95%;
    }

    .navbar{
        width: 98%;
    }

.close-modal {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-modal:hover,
.close-modal:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Estilos generales para el modal */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed; /* Fijo en la ventana */
  z-index: 1000; /* Z-index alto para estar encima */
  left: 0;
  top: 0;
  width: 100%; /* Ancho completo */
  height: 100%; /* Alto completo */
  background-color: rgba(0,0,0,0.5); /* Fondo semi-transparente */
  padding-top: 100px;
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Ajuste automático al 80% del ancho de la ventana */
  max-height: 90%; /* Limita el alto máximo al 90% del viewport */
  overflow-y: auto; /* Habilita scroll vertical si el contenido es mayor */
  border-radius: 8px;
}


/* Contenedor de la tabla dentro del modal */
.table-container {
  max-height: 70vh; /* Altura máxima de 70% del viewport */
  overflow-y: auto; /* Scroll vertical si la tabla excede el espacio */
  margin-top: 20px;
  margin-bottom: 27px;
}

/* Tabla */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th, .table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.table th {
  background-color: #f2f2f2;
}

#needs{
    margin-left: 30px;
}

#calculateAdvance{
    position: absolute;
}

/* Estilos básicos del modal */
.modal3 {
  display: none; /* Oculto por defecto */
  position: fixed;
  z-index: 1; /* Se coloca por encima de otros elementos */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5); /* Fondo semitransparente */
}

/* Contenido del modal */
.modal3-content {
   background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 2px solid red; /* Marco rojo */
  width: 50%; /* Ajusta el ancho del modal */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Botón de cerrar */
.close-warning-modal3 {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-warning-modal3:hover,
.close-warning-modal3:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Estilos básicos del modal travel */
.modal4 {
  display: none; /* Oculto por defecto */
  position: fixed;
  z-index: 1; /* Se coloca por encima de otros elementos */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5); /* Fondo semitransparente */
}

/* Contenido del modal */
.modal4-content {
   background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 2px solid red; /* Marco rojo */
  width: 50%; /* Ajusta el ancho del modal */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Botón de cerrar */
.close-warning-modal4 {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-warning-modal4:hover,
.close-warning-modal4:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}



.form-fields {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaciado uniforme entre campos */
}

 #carFields {
        transition: opacity 0.3s ease; /* Transición suave al mostrar/ocultar */
    }
    #carFields.hidden {
        opacity: 0; /* Ocultar visualmente */
        pointer-events: none; /* Evitar interacción con los campos */
    }
    #carFields:not(.hidden) {
        opacity: 1; /* Mostrar visualmente */
    }

         .btnSavePTA {
            width: 200px;
            padding: 10px;
             background: linear-gradient(to bottom, #007bff 50%, #0056b3 100%);
            color: #ffffff;
            border: none;
            border-radius: 15px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease;
            grid-column: span 2;
            margin: 0 auto;
            margin-top: 15px;
        }

        .btnSavePTA:hover {
            background: linear-gradient(to bottom, #0056b3 50%, #003f8a 100%);
        }


           .navbar .username {
            margin-left: auto; /* Empuja el nombre de usuario a la derecha */
            margin-right: 20px; /* Añade espacio entre el nombre de usuario y el botón de cerrar sesión */
        }