.card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.img-card{
    max-width: 7rem;
}

.text-title{
    color: var(--grey);
    text-align: center;
}

.fila-form{
    display: flex;
    margin: 0.5rem;
}

.fila-form-icon{
    background-color: var(--green);
    padding: 0.3rem;
    border-start-start-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.fila-form-cont{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
    background-color: var(--green);
    padding: 0.3rem;
    border-start-start-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.input-text{
    background-color: var(--ligthergreen);
    padding: 0.3rem;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.input-select{
    background-color: var(--ligthergreen);
    padding: 0.3rem;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.margen{
    margin: 0.5rem;
}

.input-comp{
    background-color: var(--ligthergreen);
    padding: 0.3rem;
    border-radius: 0.5rem;
}

/* Contenedor del toggle */
.toggle-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    font-family: system-ui, sans-serif;
  }
  
  /* Etiqueta del toggle */
  .toggle-label {
    font-size: 1rem;
    color: var(--darkgreen);
    cursor: pointer;
  }
  
  /* Input checkbox (oculto) */
  .toggle-input {
    display: none; /* Ocultamos el checkbox nativo */
  }
  
  /* Estilo del slider (botón) */
  .toggle-slider {
    position: relative;
    width: 40px;
    height: 20px;
    background-color: var(--grey);
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .toggle-slider::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: var(--white);
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.3s ease;
  }
  
  /* Cambios de estilo cuando está activo */
  .toggle-input:checked + .toggle-slider {
    background-color: var(--green);
  }
  
  .toggle-input:checked + .toggle-slider::before {
    transform: translateX(20px);
  }
  

  /* cargar archivos */
  
  .file-input-wrapper {
    display: flex;
    flex-direction: column; /* Coloca el texto debajo del botón */
    /* align-items: flex-start; Alinea todo al inicio */
  }
  
  input[type="file"] {
    font-size: 0.9rem;
    width: 100%; 
    max-width: 9.9rem;
    overflow: hidden;
  }
  
  #file-name {
    font-size: 0.9rem;
    color: var(--grey); /* Aplica un color discreto */
    word-wrap: break-word; /* Permite que el texto del archivo se ajuste */
  }
  
  .btn-archivo{
    background-color: var(--green);
    color: var(--green);
    padding: 0.3rem 0.5rem;
    border-radius: 0.5rem;
    margin: 0.5rem;
  }

  .form{
    /* max-width: 30rem; */
    background-color: var(--white);
    padding: 1rem;
    border-radius: 1rem;
    margin: 1rem;
    display: flex;
    justify-content: center;
  }