* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-color: linear-gradient(90deg, #EDF2FC 9.79%, #F7F9FD 93.81%);
  --form-bg-color: #fcfdff;
  --border-input: #e5e7eb;
  --accent-color: #3ca4e9;
  --alert-color: #dc3545;
  --heading-text-color: #0A0B29;
  --body-text-color: #242542
}

body {
  background: var(--bg-color);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  color: var(--heading-text-color)
}


.form h1 {
  font-size: 32px;
  text-align: center;
}


.form {
  max-width: 768px;
  width: 95%;
  margin: 30px auto;
  background-color: var(--form-bg-color);
  padding: 16px;
  border-radius: 8px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  box-shadow: 0 1px 1px 0 rgb(0 0 0 / 0.05);
}

.company__logo{
  margin-bottom: 15px;
}
.alert__text{
  color: var(--alert-color);
  font-weight: 400;
  margin: 0;
}

.section__form {
  margin: 20px 0;
}
.form__input{
  margin-bottom: 20px;
  width: 100%;
}

.form__select{
  width: 100%;
}

.required{
  color: var(--alert-color)
}

.form__select select{
  width: 100%;
  background: #FFF;
  background-color: #fff;
  padding: 12px 0px 12px 8px;
  margin-top: 5px;
  border: none;
  border: 1.5px solid var(--border-input);
  border-radius: 6px;
  outline: none;
  font-size: 15px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.select__input{
  display: flex;
  justify-content: start;
  gap: 4px;
}

/* reveal information input */

.information__section__form{
  transition: 350ms ease all;
  height: auto;
}

.hidden{
  transition: 350ms ease all;
  overflow: hidden;
  height: 0;
  padding: 0;
}

/* INPÚTS RADIO */

.input__radio__container.tipo__bien{
  display: flex;
  gap: 15px;
}

/* Estilos para cada opción */
.label__radio{
  width: 100%;
  margin: 0;
  font-size: 16px;
  padding: 12px 8px ;
  min-height: 90px;
  position: relative;
  display: grid;
  grid-template-columns: 15px 1fr;
  width: 100%;
  text-align: center;
  padding: 20px;
  border-radius: 4px;
  transition: background-color 0.3s;
  cursor: pointer;
}

.info,
.contador__caracteres{
  font-size: 13px;
}

#contador {
  color: #555;
}

#contador.excedido {
  color: red;
}

.label__radio:hover {
  background-color: #f4f4f4;
}

.label__radio::before{
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid #444;
}

/* Estilos para el input radio */

.radio-input {
  display: none;
}

#labelRadioReclamo,
#labelRadioQueja{
  font-size: 18px;
}

/* Estilos para el input radio seleccionado */
#reclamo:checked + #labelRadioReclamo,
#queja:checked + #labelRadioQueja {
  background-color: var(--accent-color);
  color: #fff;
  border: 2px solid var(--accent-color);
}

#reclamo:checked + #labelRadioReclamo::before,
#queja:checked + #labelRadioQueja::before {
  background-color: var(--accent-color);
  border: 2px solid #FFF;
}


/* Estilos para el input radio seleccionado */

#labelRadioProducto,
#labelRadioServicio{
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#producto:checked + #labelRadioProducto ,
#servicio:checked + #labelRadioServicio {
  background-color: var(--accent-color);
  color: #fff;
  border: 2px solid var(--accent-color);
}

#producto:checked + #labelRadioProducto::before,
#servicio:checked + #labelRadioServicio::before {
  background-color: var(--accent-color);
  border: 2px solid #FFF;
}


.form__input input[type="number"]::-webkit-inner-spin-button,
.form__input input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form__input input[type="number"] {
  -moz-appearance: textfield;
}


.form h2 {
  margin-top: 20px;
  font-size: 18px;
}

.form__input label {
  display: block;
  margin-top: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--body-text-color);
}

.form__input input {
  width: 100%;
  background-color: #fff;
  padding: 12px 8px;
  margin-top: 5px;
  border: none;
  border: 1.5px solid var(--border-input);
  border-radius: 6px;
  outline: none;
  font-size: 15px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.form__input textarea {
  min-height: 200px;
  background-color: #fff;
  width: 100%;
  padding: 12px 8px;
  margin-top: 5px;
  border: 1.5px solid var(--border-input);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  border-radius: 8px;
  outline: none;
  border-radius: 6px;
  font-size: 15px;
}

.form__input input:focus:not([type='radio']),
.form__input textarea:focus {
  border: none;
  border: 1px solid var(--accent-color);
  box-shadow: 1px 0 3px var(--accent-color);
  transition: 300ms ease all;
}


.form__input.date input{
  margin-bottom: 0;
}


.form__input.radio {
  width: 100%;
  margin: 15px 0;
}

.form__input.radio input{
  width: 30px;
  margin: 0;
}

.form__input.radio label{
    width: 100%;
    margin: 0;
    font-size: 16px;
    padding: 12px 8px ;
    border: 1.5px solid var(--border-input);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    border-radius: 6px;
}

.form__input.radio label span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
}

.form .form__submit {
  width: 100%;
  background-color: var(--accent-color);
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  color: white;
  padding: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 20px;
  font-weight: 600;
  font-size: 18px;
}

.form .form__submit:hover {
  background-color: #3ca4e9;
}


/* POST ENVIO PAGE */

.caption__title,
.caption__subtitle{
  text-align: center;
}
.caption__title{
  font-size: 32px;
  margin-bottom: 8px;
}

.post__form {
  max-width: 768px;
  width: 95%;
  margin: 30px auto;
  min-height: 70vh;
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 1px 1px 0 rgb(0 0 0 / 0.05);
}

.separator{
  width: 100%;
  border: none;
  height: 1px;
  background: #000;
  background: repeating-linear-gradient(90deg,#000,#000 6px,transparent 6px,transparent 12px);
  margin-top: 20px;
}

.post__form h1{
  text-align: center;
  font-size: 28px;
}

.caption{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detalles__reclamo{
  margin: 25px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}


.data__field:nth-of-type(3){
  grid-column: 1/-1;
}

.data{
  font-weight: 700;
  font-size: 1.1rem;
}

@media only screen and (767px <= width <= 850px) {
  .label__radio{
    min-height: 105px;
  }
}
@media only screen and (min-width: 767px) {

  .input__radio__container{
    display: flex;
    gap: 15px;
  }

  .form {
    max-width: 768px;
    width: 90%;
    margin: 50px auto;
    padding: 30px;
    border-radius: 8px;
  }

  .form__input--group{
    width: 100%;
    display: flex;
    gap: 20px;
  }

/*     .grid--3{
    width: 100%;
    display: flex;
    gap: 20px;
  }
*/
  .form h2 {
    font-size: 22px;
  }

  .form__input textarea {
    min-height: 130px;
  }
  .form__input.radio {
    gap: 0px;
  }

  .form__input input ,
  .form__input textarea,
  .form__input select
   {
    padding: 8px;
  }

  /* Respuesta */

  .detalles__reclamo{
    margin: 25px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}