/* GEV — Cinco pistas · 1.2
   Los colores de la casa NO se escriben aqui: se llaman por el nombre que ya
   tienen (--gev-verde, --gev-caja...), que es lo que hace que el modo oscuro
   funcione solo. El valor que va detras de la coma es el respaldo, por si este
   juego se pega alguna vez en una pagina donde el bloque «gev-tema» no llegue. */

.gev-vorto{
  margin:1.5rem 0;

  /* 👓 EL JUEGO ENTERO, A 17 px Y CON EL RENGLON SUELTO.
     En la asociacion hay gente mayor: dentro del juego no queda ni una letra
     por debajo de 16 px. Es lo mismo que se hizo en los otros cinco. */
  font-size:1.0625rem;
  line-height:1.6;

  /* 🎨 EL GRIS DE APOYO, MAS OSCURO SOLO DENTRO DEL JUEGO.
     El #647385 de la casa sobre blanco da 4,85 de contraste: pasa el minimo
     (4,5) y no llega al bueno (7). Aqui dentro pasa a #3A4F66, que da 8,4. NO
     se toca la variable de la casa: se tapa dentro de este bloque, y de noche
     se destapa mas abajo.
     Y el verde de los botones: #00842B con letra blanca da 4,84; el verde
     oscuro de la casa, #046A38, da 6,7. No es un color nuevo. */
  --gev-gris:#3A4F66;
  --gev-borde:#4A5D73;
  --gev-verde:#046A38;
}

/* 🌙 Y DE NOCHE, AL REVES. Con el fondo en #131A24 esos colores no se verian:
   alli los tres ACLARAN. Se enciende por las dos vias de la casa —el boton de
   la cabecera y el sistema de quien visita—. */
html[data-gev-tema="oscuro"] .gev-vorto{
  --gev-gris:#CBD6E1;
  --gev-borde:#B8C7D6;
  --gev-verde:#7DEBAF;
}
@media (prefers-color-scheme: dark){
  html:not([data-gev-tema]) .gev-vorto{
    --gev-gris:#CBD6E1;
    --gev-borde:#B8C7D6;
    --gev-verde:#7DEBAF;
  }
}

/* 🔴 TODOS LOS QUE LLEVAN COLOR Y SON UN PARRAFO VAN CON «.gev-vorto» DELANTE.
   El tema, en modo oscuro, pinta TODOS los parrafos con el color del texto, y
   esa regla pesa mas que una clase sola: sin el cinturon, el marcador —que es
   lo que se mira— y el aviso saldrian grises de noche. Le paso a la sopa, al
   gancho y a «¿Que lengua es?», y aqui nace con el cinturon puesto.
   Dos clases (0,2,0) le ganan a una clase y una etiqueta (0,1,1). */
.gev-vorto .gev-vorto__tema{
  font-weight:700;
  margin:0 0 .25rem;
  color:var(--gev-titulo,#0F2545);
}

/* El nombre del juego y la fecha van en el mismo renglon, con un punto en
   medio: sin el separador se leen pegados —«Cinco pistas La palabra del 6 de
   septiembre»—. Es el mismo apaño que la sopa. */
.gev-vorto__fecha{
  font-weight:400;
  color:var(--gev-gris,#647385);
}

.gev-vorto__titulo-tema + .gev-vorto__fecha::before{ content:" · "; }

.gev-vorto .gev-vorto__ciego{
  margin:0 0 .5rem;
  font-size:1em;
  color:var(--gev-gris,#647385);
}

/* «Como se juega»: las instrucciones solo hacen falta la primera vez, y en el
   movil empujaban el juego hacia abajo todos los dias. */
.gev-vorto__ayuda-boton{
  min-height:48px;
  padding:.5rem .9rem;
  margin:0 0 .5rem;
  border:1px solid var(--gev-borde,#5B6B82);
  border-radius:6px;
  background:transparent;
  color:var(--gev-texto,#3A4F66);
  font-size:1em;
  cursor:pointer;
}

.gev-vorto__ayuda-boton::before{ content:"▸ "; }
.gev-vorto__ayuda-boton[aria-expanded="true"]::before{ content:"▾ "; }

.gev-vorto .gev-vorto__ayuda{
  margin:0 0 1rem;
  font-size:1em;
  color:var(--gev-gris,#647385);
}

.gev-vorto .gev-vorto__marcador{
  margin:0 0 .25rem;
  font-weight:700;
  color:var(--gev-verde-oscuro,#046A38);
}

.gev-vorto .gev-vorto__rachas{
  margin:0 0 .75rem;
  font-size:1em;
  color:var(--gev-gris,#647385);
}

.gev-vorto__rachas:empty{ margin:0 0 .5rem; }

.gev-vorto .gev-vorto__huecos-titulo{
  margin:0 0 .35rem;
  font-size:1em;
  color:var(--gev-gris,#647385);
}

/* LOS HUECOS. Una casilla vacia por letra: asi se sabe cuantas son sin
   contarlas con el dedo. Antes de la primera version ya se descarto la fila de
   guiones bajos, que a un palmo se lee como una raya rota.
   Se envuelven con «flex-wrap» porque una palabra de nueve letras en un movil
   de 390 no cabe de una sola fila. */
.gev-vorto__huecos{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 1rem;
}

/* 🖐️ LA CASILLA MIDE 44 px, que es lo que recomienda la norma de
   accesibilidad para lo que se toca (WCAG 2.2, criterio 2.5.5). Aqui NO se
   toca —la palabra se escribe en la caja de abajo—, pero la letra destapada
   tiene que leerse desde lejos, y a 44 se lee. */
.gev-vorto__hueco{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  font-size:1.5rem;
  font-weight:700;
  line-height:1;
  /* La «ĥ» y la «ŭ» mayusculas faltan en muchas tipografias: si la del tema no
     las trae, el navegador baja a estas, que si las tienen. */
  font-family:"DejaVu Sans","Noto Sans","Liberation Sans",system-ui,sans-serif;
  color:var(--gev-titulo,#0F2545);
  background:var(--gev-caja,#F7F9FA);
  border:1px solid var(--gev-linea,#E1E8ED);
  border-radius:4px;
}

.gev-vorto__hueco--visto{
  border-color:var(--gev-verde,#00842B);
  color:var(--gev-verde-oscuro,#046A38);
}

/* LA CAJA DE ESCRIBIR. El rotulo va encima y en su propia linea: en el movil,
   con el rotulo al lado, la caja se quedaba en cuatro letras de ancha. */
.gev-vorto__probar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  margin:0 0 .5rem;
}

.gev-vorto__probar label{
  flex:1 0 100%;
  font-size:1em;
  color:var(--gev-gris,#647385);
}

.gev-vorto__caja{
  flex:1 1 12rem;
  min-height:48px;
  padding:.5rem .75rem;
  font:inherit;
  font-size:1.125rem;
  color:var(--gev-texto,#3A4F66);
  background:var(--gev-caja,#F7F9FA);
  border:1px solid var(--gev-borde,#5B6B82);
  border-radius:6px;
}

.gev-vorto__caja:focus{
  outline:3px solid var(--gev-verde,#00842B);
  outline-offset:2px;
}

.gev-vorto .gev-vorto__aviso{
  margin:0 0 1rem;
  min-height:1.6em;
  font-size:1em;
  color:var(--gev-gris,#647385);
}

.gev-vorto .gev-vorto__titulo-lista{
  font-size:1rem !important;
  margin:0 0 .5rem !important;
}

/* LAS PISTAS, en una lista numerada que va creciendo. La que acaba de salir no
   se marca con color: se marca porque es la ultima, y quien las lee las lee en
   orden. */
.gev-vorto .gev-vorto__frases{
  margin:0 0 1rem;
  padding:0 0 0 1.2rem;
  color:var(--gev-texto,#3A4F66);
}

.gev-vorto__frases li{ margin:0 0 .5rem; }

.gev-vorto .gev-vorto__frase-n{
  font-weight:700;
  color:var(--gev-gris,#647385);
}

/* LOS BOTONES, EN DOS FILAS. Arriba lo que ayuda a seguir jugando; abajo,
   detras de una raya, los dos que acaban la partida: «Empezar de nuevo» borra
   lo que llevas y «Ver resultado» la destripa. En la sopa iban los cuatro
   seguidos y con el mismo hueco, y se le daba a uno queriendo darle a otro. */
.gev-vorto__botones{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:0 0 .75rem;
}

.gev-vorto__botones--fin{
  margin-top:1.5rem;
  padding-top:1rem;
  border-top:1px solid var(--gev-linea,#E1E8ED);
}

.gev-vorto__boton{
  min-height:48px;
  padding:.5rem 1rem;
  font:inherit;
  font-size:1em;
  color:var(--gev-sobre-verde,#FFFFFF);
  background:var(--gev-verde,#046A38);
  border:1px solid var(--gev-verde,#046A38);
  border-radius:6px;
  cursor:pointer;
}

.gev-vorto__boton--flojo{
  color:var(--gev-texto,#3A4F66);
  background:transparent;
  border-color:var(--gev-borde,#5B6B82);
}

/* De noche el verde de fondo ACLARA, asi que la letra de encima tiene que
   oscurecer: blanco sobre #7DEBAF no se leeria. */
html[data-gev-tema="oscuro"] .gev-vorto__boton{ color:#0F2545; }
@media (prefers-color-scheme: dark){
  html:not([data-gev-tema]) .gev-vorto__boton{ color:#0F2545; }
}
html[data-gev-tema="oscuro"] .gev-vorto__boton--flojo{ color:var(--gev-texto,#CBD6E1); }
@media (prefers-color-scheme: dark){
  html:not([data-gev-tema]) .gev-vorto__boton--flojo{ color:var(--gev-texto,#CBD6E1); }
}

.gev-vorto__archivo{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  margin:0 0 .5rem;
  font-size:1em;
  color:var(--gev-gris,#647385);
}

.gev-vorto__dias{
  min-height:48px;
  padding:.4rem .6rem;
  font:inherit;
  font-size:1em;
  color:var(--gev-texto,#3A4F66);
  background:var(--gev-caja,#F7F9FA);
  border:1px solid var(--gev-borde,#5B6B82);
  border-radius:6px;
}

/* El texto para copiar a mano, cuando el navegador no deja copiar solo. */
.gev-vorto .gev-vorto__parapegar{
  margin:.5rem 0 0;
  padding:.75rem;
  font-size:1em;
  white-space:pre-wrap;
  color:var(--gev-texto,#3A4F66);
  background:var(--gev-caja,#F7F9FA);
  border:1px solid var(--gev-linea,#E1E8ED);
  border-radius:6px;
}