.form {
  background: var(--color-bg-secondary);
  padding: var(--space-lg);
  border-radius: var(--space-sm);
  max-width: 40rem;
  margin: var(--space-lg) auto;
  animation: aparecer-images 1s both;
  /*aparecer-images es el nombre que le damos para darle una animación especifica y esta abajo ese nombre al final de las lineas de código*/
  animation-timeline: view();
  /*esto si lo colocamos es para indicarle que la animación la haga conforme a la vista del cliente, lo cual es muy similar al uso del scroll que casi hacen lo mismo*/
  animation-range: cover 0% cover 50%;
  /*este es para indicarle 4 cosas el como quiere que se muestre la imagen si completa o no ya que cover es completa y empieza desde 0 y cuando este al 50% que es el segundo paramentro de la vista que se vea completo y completo nos referimos que si le estamos aplicando una opacidad pues aquí es donde le decimos que ya acomplete el mostrarlo a la mitad de la vista*/
  box-shadow: 0 0 1rem var(--color-text);
  /*sólo para recordar y ya si se ve en los demás archivos, se dará por sentado que ya se explico aquí
    
    el primer valor es para darle la sombra de lado derecho
    el segundo es parta darle de lado de abajo
    el tercero es para darle que tan fuerte es la sombra
    el cuerto es para hacer que se anche o se haga grande la sombra
    el último para darle color
    si vemos hace falta un dato, pero ese usualmente no se ponde antes del color
    en caso que no se coloque los valores iniciales tendrá el minimo de sombra lo cual no se puede anular si usamos sombras*/
}

.form__title {
  margin-bottom: var(--space-lg);
  font-size: 2rem;
  text-align: center;
}

.form__fieldset {
  border: none;
  padding: 0;
}

.form__legend {
  font-size: 1.25rem;
  margin-bottom: var(--space-md);
  text-align: center;
  color: var(--color-text);
}

.form__group {
  margin-bottom: var(--space-md);
  display: flex;
  /*le decimos que vamos a trabajar de una manera diferente para todos los hijos directos y por defecto los organizara en columnas o en una sola fila todos si hay dudas ver el archivo css de base explica un poco las propiedades*/
  flex-direction: column;
  /*aquí le decimos que no tenga el comportamiento por defecto sino que todo lo coloque de manera de lista o una sola columna*/
  align-items: center;
  justify-content: center;
}

.form__group:nth-of-type(3),
.form__group:nth-of-type(4),
.form__group:last-child {
  border-top: solid var(--color-footer);
  padding-top: var(--space-md);
}



.form__label {
  margin-bottom: var(--space-xs);
  font-weight: bold;
}

.form__label[for$="desc"],
/*si tiene la propiedad for, y además que termine en desc o title le aplica el estilo correspondiente */
.form__label[for$="title"] {
  align-self: flex-start;
  /*este funciona si su padre esta trabajandoc con flex y es ocupar todo el ancho y largo de su celda*/
}

.img-upload-text:hover {
  /*Se aplica este hover para que sea visible dinamico, notable que se puede dar click al texto, ya que se hizo una pequeña adecuación porque el texto por defecto no me agradaba*/
  text-shadow: 0 0 8px var(--color-accent);
  scale: 1.01;
}

.form__input,
.form__textarea,
.form__button,
.form__scan-button {
  font-family: var(--font-base);
  width: 100%;
  box-sizing: border-box;
}

.form__input,
.form__textarea,
.form__code-input {
  padding: var(--space-sm);
  border: 1px solid var(--color-text);
  border-radius: var(--space-xs);
  outline: none;
  /*por defecto las inputs y otro elementos tienen un comportamiento por default en este caso cuando le das click se pone un contorno y pues aquí le quita ese contorno porque no nos gusta como se ve */
}

.form__code-input {
  margin: var(--space-md) 0;
  width: 50%;
}

.form__code-input.active {
  background: #28a745;
  /* Verde cuando detecta un código esta clase se agrega en el javascript */
}

.camara {
  display: none;
  margin-top: .6rem;
  position: relative;
  width: 100%;
}

.btn-cancelarCaptura {
  display: none;
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  /*nos ayuda a colocarlo en medio de la pantalla pero esto es ubicado conforme a la pantalla del dispositivo*/
  transform: translateX(-50%);
  /*esto lo situa conforme a su div*/
  z-index: 10;
  /*para que se muestre el boton encima del lector*/
  padding: .9rem 1.2rem;
  background-color: #ff4444;
  color: white;
  border: none;
  border-radius: .5rem;
  font-weight: bold;
}

.form__textarea {
  resize: none;
  field-sizing: contain;
  /*este es para el text area para que cresca conforme al tamaño del contenido, pero le definimos un tamaño para que no creciera tanto */
  height: 6rem;
}

.form__group--scan {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.form__scan-button {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent);
  color: var(--color-text);
  border: none;
  cursor: pointer;
  /*hace que se vea la manita*/
  transition: opacity 0.3s;
  /*le indicamos que la transicion de colocar un opacity es de .3 segundo esto ocurre porque siempre cuando se inicia la página siempre se inicia con una transicion por defecto además que se ajusta y muestra desde el javascript*/
  display: none;
}

.form__error {
  color: red;
  font-size: .8rem;
  display: none;
}

.form__input--error {
  border: 1px solid red;
}

.form__group--submit {
  text-align: center;
}

.form__button {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-accent);
  color: var(--color-text);
  border: none;
  cursor: pointer;
  transition: opacity 0.3s;
}

.form__button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.btn-input-data {
  padding: .7rem;
  color: var(--color-text);
  background-color: rgb(114, 5, 92);
  box-shadow: 0 0 .5rem var(--color-accent);
  border: .15rem solid rgb(114, 5, 92);
  transition: border-color .1s, border-radius .1s, color .1s, border-width .3s;
  max-width: 50%;
}

.btn-input-data:hover {
  border-color: transparent;
}

.btn-input-data:active {
  color: #000;
  border-radius: 1rem;
  border-color: var(--color-text);
  border-width: .17rem;
}

.hidden-input-file {
  display: none;
}

.img-name {
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/*esta es la animación que se declaró allá arriba para aparecer suavemente las imagenes cuando hacemos scroll pero funciona con la vista, que es casi igual*/
@keyframes aparecer-images {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}