/* GEV — El juego gancho «¿Cuanto esperanto entiendes ya?» · 1.3
   Aqui solo esta el aspecto. Lo que hace el juego, en gev-gancho.js; las frases
   y los rotulos, en gev-gancho.php. */
.gev-kiom{
  --gev-kiom-radio:.6rem;
  margin:1.5rem 0;
  border:1px solid var(--gev-linea,#E1E8ED);
  border-radius:var(--gev-kiom-radio);
  background:var(--gev-caja,#F7F9FA);
  padding:1.25rem;
  color:var(--gev-texto,#3A4F66);
}
.gev-kiom [hidden]{ display:none !important; }
.gev-kiom__pista{
  font-size:.9em;
  color:var(--gev-gris,#647385);
  margin:0 0 1rem;
}
.gev-kiom__gancho{
  font-size:1.15em;
  font-weight:600;
  color:var(--gev-titulo,#0F2545);
  margin:0 0 .5rem;
}
/* EL RELOJ: una barra que se vacia, y al lado los segundos que quedan. */
.gev-kiom__reloj{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin:0 0 1rem;
}
.gev-kiom__barra{
  flex:1 1 auto;
  height:.5rem;
  border-radius:.25rem;
  background:var(--gev-linea,#E1E8ED);
  overflow:hidden;
}
.gev-kiom__barra span{
  display:block;
  height:100%;
  width:100%;
  background:var(--gev-verde,#00842B);
  transition:width .2s linear;
}
.gev-kiom__barra--poco span{ background:#B3261E; }
.gev-kiom__segundos{
  font-variant-numeric:tabular-nums;
  font-weight:700;
  color:var(--gev-gris,#647385);
  min-width:3.2em;
  text-align:right;
}
.gev-kiom__contador{
  font-size:.85em;
  color:var(--gev-gris,#647385);
  margin:0 0 .35rem;
}
/* LA FRASE EN ESPERANTO: es la protagonista, va grande y en verde. */
.gev-kiom__frase{
  font-size:1.35em;
  font-weight:700;
  line-height:1.3;
  color:var(--gev-verde-oscuro,#046A38);
  margin:0 0 1rem;
}
.gev-kiom__opciones{ display:grid; gap:.5rem; }
.gev-kiom__opcion{
  display:block;
  width:100%;
  text-align:left;
  font:inherit;
  line-height:1.35;
  padding:.7rem .9rem;
  border:1px solid var(--gev-borde,#5B6B82);
  border-radius:var(--gev-kiom-radio);
  background:var(--gev-fondo,#FFFFFF);
  color:var(--gev-texto,#3A4F66);
  cursor:pointer;
}
.gev-kiom__opcion:hover:not(:disabled),
.gev-kiom__opcion:focus-visible{
  border-color:var(--gev-verde,#00842B);
  outline:none;
}
.gev-kiom__opcion:disabled{ cursor:default; }
.gev-kiom__opcion--bien{
  border-color:var(--gev-verde,#00842B);
  background:var(--gev-verde,#00842B);
  color:var(--gev-sobre-verde,#FFFFFF);
  font-weight:600;
}
.gev-kiom__opcion--mal{
  border-color:#B3261E;
  background:#B3261E;
  color:#FFFFFF;
}
/* EL FINAL */
.gev-kiom__marca{
  font-size:2em;
  font-weight:800;
  line-height:1.1;
  color:var(--gev-verde-oscuro,#046A38);
  margin:0 0 .25rem;
}
.gev-kiom__porcentaje{
  font-size:1.1em;
  font-weight:600;
  color:var(--gev-titulo,#0F2545);
  margin:0 0 .5rem;
}
.gev-kiom__porcentaje:empty{ display:none; }
.gev-kiom__mensaje{ margin:0 0 1rem; }
/* LA LLAMADA A LA ACCION del final: una frase, dos botones y un pie. */
.gev-kiom__llamada{
  margin:0 0 1rem;
  padding:.9rem;
  border-radius:var(--gev-kiom-radio);
  background:var(--gev-sobre-verde-flojo,#CFE9D8);
  color:var(--gev-titulo,#0F2545);
  font-weight:600;
}
.gev-kiom__llamada-titulo{ margin:0 0 .75rem; font-size:1.05em; }
.gev-kiom__llamada-botones{ display:flex; flex-wrap:wrap; gap:.5rem; }
.gev-kiom__llamada-pie{
  margin:.75rem 0 0;
  font-weight:400;
  font-size:.92em;
}
.gev-kiom__botones{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1rem; }
.gev-kiom__boton{
  font:inherit;
  font-weight:600;
  padding:.65rem 1.1rem;
  border-radius:var(--gev-kiom-radio);
  border:1px solid var(--gev-verde,#00842B);
  background:var(--gev-verde,#00842B);
  color:var(--gev-sobre-verde,#FFFFFF);
  cursor:pointer;
}
/* 🔴 EL SEGUNDO BOTON NUNCA VA TRANSPARENTE. Antes ponia
   «background:transparent», y un boton sin fondo propio depende de lo que haya
   debajo: dentro de la caja verde clara de la llamada casi no se ve, y con el
   modo oscuro de algunos navegadores de movil —que oscurecen el fondo de la
   pagina pero no repintan lo que es transparente— se queda en letras sueltas.
   Se le pone SU PROPIO fondo blanco y SU PROPIO borde, escritos aqui, para que
   no dependa ni del fondo de al lado ni de que el orden de las hojas de estilo
   deje pasar el borde de «.gev-kiom__boton». Es el mismo par de la casa que los
   botones de compartir del pie: verde relleno el primero, blanco con borde el
   segundo. */
.gev-kiom__boton--flojo,
.gev-kiom__boton--claro{
  background:var(--gev-fondo,#FFFFFF);
  color:var(--gev-verde-oscuro,#046A38);
  border:1px solid var(--gev-verde-oscuro,#046A38);
}
/* LOS DOS BOTONES DE LA LLAMADA SON ENLACES, NO BOTONES, y eso trae dos
   trampas del tema. La primera es facil: se les quita el subrayado y se centra
   el texto, como en los botones de verdad.
   🔴 LA SEGUNDA COSTO UN BOTON EN BLANCO. El tema pinta el texto de TODOS los
   enlaces con «-webkit-text-fill-color», que es una regla que MANDA MAS que
   «color»: por muy blanco que se le ponga el color, el navegador escribe las
   letras del color del tema —verde—, y sobre el fondo verde del boton
   desaparecen. Se ve igual de mal en claro que en oscuro, porque el verde del
   enlace y el del boton son el mismo. Por eso aqui van las dos reglas juntas,
   siempre: «color» para lo que se copia y para navegadores viejos, y
   «-webkit-text-fill-color» para lo que se dibuja de verdad. */
a.gev-kiom__boton{
  display:inline-block;
  text-decoration:none;
  text-align:center;
  color:var(--gev-sobre-verde,#FFFFFF);
  -webkit-text-fill-color:var(--gev-sobre-verde,#FFFFFF);
}
a.gev-kiom__boton--claro,
a.gev-kiom__boton--flojo{
  color:var(--gev-verde-oscuro,#046A38);
  -webkit-text-fill-color:var(--gev-verde-oscuro,#046A38);
}
.gev-kiom__boton:hover,
.gev-kiom__boton:focus-visible{ opacity:.85; outline:none; }
.gev-kiom__repaso summary{
  cursor:pointer;
  font-weight:600;
  color:var(--gev-verde-oscuro,#046A38);
}
.gev-kiom__repaso li{ margin:0 0 .5rem; }
.gev-kiom__repaso b{ color:var(--gev-verde-oscuro,#046A38); }
@media (max-width:480px){
  .gev-kiom{ padding:1rem; }
  .gev-kiom__frase{ font-size:1.2em; }
  /* En el movil los botones van uno debajo de otro y a todo lo ancho: asi
     ninguno se queda medio fuera ni se lee como si fuera texto. */
  .gev-kiom__llamada-botones .gev-kiom__boton,
  .gev-kiom__botones .gev-kiom__boton{ flex:1 1 100%; width:100%; }
}