.arrowup {
   position: fixed;
   bottom: 1rem;
   right: 1.5rem;
   color: rgba(50, 50, 120, .5);
}

.debug__button {
   position: fixed;
   font-size: 2rem;
   bottom: 4rem;
   right: 1.7rem;
   z-index: 100000;
   padding: 0;
   margin: 0;
   justify-content: center;
   align-items: center;
   cursor: pointer;
}


.max10 {
   max-width: 10rem;
}

.max15 {
   max-width: 15rem;
}

.max20 {
   max-width: 20rem;
}

.max25 {
   max-width: 25rem;
}

.max30 {
   max-width: 30rem;
}

.max35 {
   max-width: 35rem;
}

.minhalf {
   min-width: 50%;
}

.minquarter {
   min-width: 25%;
}

.select {
   background-color: transparent;
   height: 10rem;
}

.select>option {
   background-color: rgba(50, 50, 50, .1);
   margin-top: .3rem;
}

.select>option:checked {
   background-color: rgba(70, 50, 100, .4);
}

.table {
   display: grid;
   grid-template-columns: 1fr;
   margin-top: 1rem;
   background-color: rgba(200, 200, 210, .5);
   padding: .13rem;
   border-radius: .2rem;
}

.table__head {
   display: grid;
   position: relative;
   grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
   border-radius: .15rem .15rem 0 0;
   background-color: rgba(252, 252, 253, .9);
   font-family: 'Courier New', Courier, monospace;
   font-weight: bold;
}

.table__body {
   justify-content: center;
   margin-top: .2rem;
   max-height: 80vh;
   height: auto;
   overflow-y: auto;
}

.tr {
   display: grid;
   position: relative;
   grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
   gap: .15rem;
   margin-top: .1rem;
   margin-bottom: .1rem;
}

.th {
   display: flex;
   min-width: 4rem;
   align-items: center;
   text-align: center;
   justify-content: center;
   min-height: 3rem;
}

.td {
   display: flex;
   min-width: 4rem;
   align-items: center;
   padding: .5rem;
   background-color: rgba(255, 255, 255, .8);
}

.td_block {
   display: block;
   min-width: 4rem;
   align-items: center;
   padding: .5rem;
   background-color: rgba(255, 255, 255, .8);
}

.mainLogo {
   border-radius: 50%;
   width: 6rem;
}

.pulse {
   animation-name: pulsation;
   animation-duration: 1s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   -webkit-animation-name: pulsation;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
}


.readText{
   font-family: Arial, sans-serif; /* Fuente legible */
   font-size: 1.1rem; /* Tamaño de fuente adecuado */
   line-height: 1.6; /* Espaciado entre líneas */
   color: #333; /* Color de texto oscuro para contraste */
   background-color: #e9e7e7; /* Fondo claro para reducir el contraste */
   padding: 10px; /* Espaciado interno */
   margin: 20px 0; /* Espaciado externo */
   border-left: 4px solid var(--cL); /* Línea a la izquierda para resaltar */
   border-radius: 5px; /* Bordes redondeados */
}

@-moz-keyframes pulsation {
   0% {
      opacity: 1.0;
   }
   50% {
      opacity: 0.0;
   }
   100% {
      opacity: 1.0;
   }
}

@-webkit-keyframes pulsation {
   0% {
      opacity: 1.0;
   }
   50% {
      opacity: 0.0;
   }
   100% {
      opacity: 1.0;
   }
}

@keyframes pulsation {
   0% {
      opacity: 1.0;
   }
   50% {
      opacity: 0.0;
   }
   100% {
      opacity: 1.0;
   }
}