body,
html {
  margin: 0;
  background-color: white; /*black;*/ /*rgb(250, 0, 204);*/
  padding-bottom: 20vh;
}

form label>span {
  color: var(--color-azul-intenso);
}

.titulo img {
  height: 64px;
  align-self: baseline;
}

.naranja {
  background-color: var(--color-naranja); /*  orange darken-2 */
}

.azulintenso {
  background-color: var(--color-azul-intenso);
}

* {
  q-font-family: "Geologica";
}

.opengrupottd {
  margin-top: 32px;
}

/* Mientras no se ha cargado el nombre del algoritmo, su hueco no cuenta en el reparto: el logo sale centrado */
#app-buscador .titulo #zonainfo:empty {
  display: none;
}

/* Aviso de carga inicial, donde aparecerán las preguntas */
#cargando {
  margin-top: 48px;
  p {
    color: var(--color-azul-intenso);
    animation: cargando-pulso 1.5s ease-in-out infinite;
  }
  p::after {
    content: "...";
  }
}

@keyframes cargando-pulso {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* Al responder: el botón se hunde (al tocarlo y mientras se pasa a la siguiente pregunta) */
#app-buscador .paso .respuesta {
  transition:
    transform 0.15s ease-out,
    box-shadow 0.15s ease-out,
    background-color 0.2s ease-out; /* la de Materialize, que esta regla sustituye */
}
#app-buscador .paso .respuesta:active,
#app-buscador .paso .respuesta.pulsada {
  transform: translateY(3px) scale(0.94);
  box-shadow: none !important;
}

/* El resultado aparece con un fundido, para que se note que ha llegado */
#app-buscador .resultado {
  animation: resultado-aparece 0.4s ease-out;
}

@keyframes resultado-aparece {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Efecto "escribe una IA" en los EC (UIefectoEscrituraEC de render.js) */
.resultado-ec-linea .ia-pendiente {
  color: transparent;
}
/* El span es inline y vacío (no crea puntos de corte de línea) y el bloque se pinta encima,
   sin ocupar sitio: así no cambia ni el reparto en líneas ni el alto mientras se escribe */
.resultado-ec-linea .ia-cursor {
  position: relative;
}
.resultado-ec-linea .ia-cursor::after {
  content: "";
  position: absolute;
  left: 0.05em;
  bottom: -0.1em;
  width: 0.6em;
  height: 1.1em;
  background: currentColor;
}
.resultado-ec-linea .ia-cursor.parpadea {
  animation: ia-cursor-parpadea 0.4s steps(1) infinite;
}
@keyframes ia-cursor-parpadea {
  50% {
    opacity: 0;
  }
}
/* "Buscando" + cursor parpadeando (creaTextoEsperaIA), discreto, antes de escribir. Igual que el cursor:
   el span es inline y vacío y el texto va en posición absoluta, así no mueve el título */
.resultado-ec-linea .ia-espera {
  position: relative;
}
.resultado-ec-linea .ia-espera-texto {
  position: absolute;
  left: 0;
  white-space: nowrap;
  color: #757575; /* grey darken-1 */
}
.resultado-ec-linea .ia-espera-texto .ia-cursor {
  margin-left: 0.25em;
}
.resultado-ec-linea .moreinfo,
.resultado-ec-linea .centrolistados,
.resultado-ec-linea .tabla-centros {
  transition: opacity 0.2s ease-out;
}
.resultado-ec-linea.ia-escribiendo .moreinfo,
.resultado-ec-linea.ia-escribiendo .centrolistados,
.resultado-ec-linea.ia-escribiendo .tabla-centros {
  opacity: 0;
  pointer-events: none;
}

/* Quien tenga desactivadas las animaciones en el sistema no las ve */
@media (prefers-reduced-motion: reduce) {
  #app-buscador .paso .respuesta,
  #app-buscador .resultado {
    transition: none;
    animation: none;
  }
}

#pwa-install-banner {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  width: 90%;
  max-width: 400px;
  text-align: center;
  font-family: sans-serif;
  p {
    margin: 0 0 10px;
    color: #333;
  }
  /* Logo a la izquierda y textos a la derecha */
  .pwa-install-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    img {
      height: 24px;
      width: auto; /* mantiene la proporción del original 198x64 -> ~74x24 */
      flex-shrink: 0;
    }
  }
  #btn-install {
    background: #007bff;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
  }
  #btn-close,
  #btn-nunca {
    background: transparent;
    color: #999;
    border: none;
    margin-left: 10px;
    cursor: pointer;
  }
}