/* definicion de la fuente optima para ser usada en el proyecto */
@font-face {
  font-family: 'Optima';
  font-style: normal;
  font-weight: 400;
  src: url('font/OPTIMA.TTF') format('truetype');
  font-display: swap;
}
/* declaracion de los colores que deben ser usados en las interfaces */
:root{
  --primary: rgb(106, 40, 49);
  --secondary: rgb(142, 90, 92);
  --tertiary: rgb(179, 141, 141);
  --background: #f0f0f0;
  --white: #FFFFFF;
  --black: #000000;
  --text: rgb(73, 66, 66);
  --gray: #565658;
  --focus: rgb(229, 151, 0);
  --complementary: rgb(40, 106, 97);
  --complementaryHover: rgb(54, 143, 131);
}

html {
  width: 100%;
  margin: 0;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Optima';
  font-size: 16px;
  max-width: 100%;
  box-sizing: border-box;
  background-color: var(--background);
}

/* Configuracion del tamaño de letra de las etiquetas mas usadas para texto */
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.17rem; }
h5 { font-size: .83rem; }
h6 { font-size: .75rem; }
p { font-size: 1rem;}

/* configuracion para que las imagenes mantengan su aspect ratio */
img {
  aspect-ratio: attr(width) / attr(height);
}

/*-----------------------------*/
.container{
  max-width: 800px;
  margin: auto;
}
main{
  margin: 10px;
  margin-top: 20px;
  background-color: var(--white);
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  overflow: auto;
}
header, section{
  margin: 10px;
}

section{
margin-bottom: 60px;
}


h1, h3{
  color: var(--primary);
  text-align: center;
}

.tituloPrincipal{
margin-bottom: 10px;
}

.tituloPasosFormulario{
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
margin-bottom: 20px;
text-align: justify;
}

.footer{
/*position: fixed;*/
width: 100%;
margin: 0;
padding: 0;
top: auto;
bottom: 0;
z-index: 500;
display: flex;
align-items: flex-end;
padding-bottom: 0px !important;
position: relative;
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.footerImageBack{
  width: 100%;
  margin-bottom: 0px !important;
  height: auto;
  min-height: 80px;
  max-height: 108px;
}
.footerImageFront{
  position: absolute;
  right: 0;
  margin: 10px;
  max-height: 70%;
  max-width: 40%;
  height: auto;
  object-fit: contain;
  /*width: 60%;*/
  /*height: 40px;*/
}

/*CUSTOM INPUTS*/
.form{
  margin: 20px;
}
.info{
margin-left: 10px;
margin-right: 10px;
color: var(--gray);
font-size: 0.8em
}
.formInfo{
font-weight: normal;
margin-right: 5px;
margin-left: 5px;
margin-top: 10px;
margin-bottom: 20px;
}
.imagenGuia{
width: 100%;
margin-top: 30px;
}
.group{ 
  position:relative;
  margin-top: 20px;
}

.group > input, .group > textarea{
  font-size:18px;
  padding: 10px 15px 10px 15px;
  display:block;
  width: calc(100% - 40px);
  border:1px solid var(--primary);
  border-radius: 15px;
  background-color: var(--white);
  color: var(--text);
}
.group > select{
  font-size:18px;
  padding: 10px 15px 10px 15px;
  display:block;
  width: 98% ;
  border:1px solid var(--primary);
  border-radius: 15px;
  background-color: var(--white);
  color: var(--text);
  font-family: 'Optima' !important;
}
.group > textarea{
  resize: none;
  height: 100px;
}


.button{
  padding: 10px 20px 10px 20px;
  font-size:18px;
  display:block;
  width: 100%;
  background-color: var(--primary);
  color: var(--white);
  border-radius: 15px;
  border: 0;
  margin-top: 20px;
}

.buttonNav{
  padding: 10px 20px 10px 20px;
  font-size:18px;
  width: calc(50% - 8px);
  background-color: var(--primary);
  color: var(--white);
  border-radius: 15px;
  border: 0;
  margin-top: 5px;
  margin-bottom: 20px;
  margin-left: 2px;
  margin-right: 2px;
}

#botonAnterior{
  background-color: var(--secondary);
}

.buttonNav:disabled{
  background-color: var(--tertiary);
}

/*@media (hover: none){
  .buttonNav:hover, .buttonNav:active{
    background-color: var(--secondary);
  }
}*/

.select2-selection--single:focus, .buttonNav:focus, .group > input:focus, .group > select:focus, .group > textarea:focus, .imageUploadButton:focus, .deleteImage:focus{
  border: 5px solid var(--focus);
  outline: none;
}


.button:disabled{
  background-color: var(--tertiary); 
}

.sendButton{
  border: 1px solid var(--complementary);
  background-color: var(--white);
  color: var(--complementary);
}


@media not all and (hover: none){
  .buttonNav:hover:enabled{
    background-color: var(--secondary);
  }
  #botonAnterior:hover:enabled{
    background-color: var(--tertiary);
  }
  .sendButton:hover:enabled{
    background-color: var(--complementaryHover);
    color: var(--white);
  }
}

/* LABEL ======================================= */


/* active state */
.group > input:focus ~ label, .group > input:valid ~ label 		{
  font-weight: bold;
  top:-10px;
  font-size:13px;
  color: var(--primary);
  background-color: var(--white);
  padding-right: 5px;
  padding-left: 5px;
}

.group > select:focus ~ label, .group > select:valid ~ label 		{
  font-weight: bold;
  top:-10px;
  font-size:13px;
  color: var(--primary);
  background-color: var(--white);
  padding-right: 5px;
  padding-left: 5px;
}
.group > textarea ~ label, .group > textarea:valid ~ label 		{
  font-weight: bold;
  top:-10px;
  font-size:13px;
  color: var(--primary);
  background-color: var(--white);
  padding-right: 5px;
  padding-left: 5px;
}

label{
  color: var(--gray); 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:15px;
  top:.65em;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}


/*estilos para el swal (sweet alert)*/
.swal-button-container{
  width: 100%;
}
.swal-button {
  background-color: var(--primary);
  color: var(--white);
  width: 100%;
}
.swal-button:not([disabled]):hover {
  background-color: var(--secondary);
}
.swal-icon.swal-icon--info{
  border-color: var(--tertiary) !important;
}
.swal-icon--info:after, .swal-icon--info:before {
  background-color: var(--tertiary) !important;
}
/*@media only screen and (max-width: 600px) {
  .footerImageFront{
      object-fit: cover;
      width: 40%;
  }
}*/

.imageUploadContainer{
margin-top: 20px;
display:block;
width: 98% ;
border:1px solid var(--primary);
border-radius: 15px;
background-color: var(--white);
color: var(--text);
}

.infoButtom{
text-decoration: none;
color: var(--secondary);
display: block;
font-size: 1.5em;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: auto;
right: 20px;
z-index: 100;
}

.modalAyuda{
background: #000000a2;
backdrop-filter: blur(5px);
margin: 0;
padding: 0;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
place-items: center;
z-index: 600;
}
.modalAyudaCard{
background: var(--white);
max-width: 400px;
width: calc(100% - 40px);
}
.modalAyudaCardContent{
margin: 20px;
}
.ayudaImagen{
width: 100%;
border: 1px solid var(--primary);
}
.imageUploadButton{
margin: 20px;
text-decoration: none;
color: var(--white);
background-color: var(--primary);
display: block;
padding: 16px;
text-align: center;
font-size: 1.5em;
border-radius: 15px;
}
.imagePreview{
width: calc(100% - 40px);
margin: 20px;
}
.imageContainer{
position: relative;
width: 100%;
display: none;
}
.deleteImage{
/*background-color: rgb(210, 105, 30);*/
color: var(--primary);
font-size: 2em;
width: 20px;
height: 20px;
display: flex;
align-items: center;
text-align: center;
padding: 0;
position: absolute;
top: 30px;
margin: 5px;
right: 30px;
/*border-radius: 50%;*/
}

/*STEP FORM*/
.tab {
display: none;
}



.select2-container--default .select2-selection--single{
/*font-size:18px;*/
/*padding: 10px 15px 10px 15px;*/
/*display:block;*/
height: 43.3px;
width: 98% ;
border-radius: 15px;
background-color: var(--white);
color: var(--text);
}

.select2-selection__rendered{
margin-top: 5px;
margin-left: 8px;
font-size: 18px !important;
font-family: 'Optima' !important;
}
.select2-selection__arrow{
margin-top: 5px;
margin-right: 10px;
}
.select2-search.select2-search--dropdown{
margin: 10px;
}
/*ESTILO PARA LOS NUEVOS ICONOS DE LAS CATEGORIAS*/
.containerCategoria {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(max(5%, min(160px, 100%)), 1fr));
}
.containerCategoriaInicial {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 15px;
  padding: 20px 0;
}
.rating-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.rating-option img {
  width: 60px;
  height: 60px;
  transition: transform 0.2s;
}

.rating-option:hover img {
  transform: scale(1.1);
}

.rating-text {
  font-size: 0.9rem;
  text-align: center;
  color: #333;
  font-weight: 500;
}

/* Para móviles */
@media (max-width: 480px) {
  .containerCategoria {
      grid-template-columns: 1fr 1fr;
  }
  
  .rating-option img {
      width: 50px;
      height: 50px;
  }
}
.elementCategoria{
  border: 1px solid gray;
  padding: 10px;
  margin: 10px;
  background-color: whitesmoke;
  border-radius: 30px;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}
.elementCategoria:focus{
  border: 5px solid rgb(229, 151, 0);
  outline: none;
}
.elementCategoria>img{
  width: 100%;
}
@media not all and (hover: none){
  .elementCategoria:hover{
      border: 5px solid rgb(229, 151, 0);
      outline: none;
  }
}

/*LOADING SCREEN*/

.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: rgb(0, 0, 0);
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#cargando_datos{
  display:grid;
  justify-items: center;
}