/* GEV — Sopa de letras · 1.3
   Los colores NO se escriben aqui: se llaman por el nombre que ya tiene la casa
   (--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 esta sopa se
   pega alguna vez en una pagina donde el bloque «gev-tema» no llegue. */

.gev-sopa{
  --gev-sopa-lado:10;
  margin:1.5rem 0;
}

.gev-sopa__tema{
  font-weight:700;
  margin:0 0 .25rem;
  color:var(--gev-titulo,#0F2545);
}

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

.gev-sopa__caja{
  display:flex;
  flex-wrap:wrap;
  gap:1.25rem;
  align-items:flex-start;
}

/* EL TABLERO
   «touch-action:none» es lo que impide que la pagina se desplace debajo del
   dedo mientras se arrastra por encima de las letras: sin esto, en el movil se
   marca una letra y la pagina se va hacia abajo. */
.gev-sopa__tablero{
  display:grid;
  grid-template-columns:repeat(var(--gev-sopa-lado),1fr);
  gap:2px;
  flex:1 1 320px;
  max-width:min(100%,32rem);
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

.gev-sopa__celda{
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  /* En un movil de 375 px la casilla queda en 32,5 px y la letra en 14,4:
     por debajo de 14 px ya cuesta leerla. Medido el 28/08/2026. */
  font-size:clamp(.9rem,3.2vw,1.15rem);
  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;
  cursor:pointer;
}

/* La casilla en la que esta el teclado */
.gev-sopa__celda[data-gev-foco="1"]{
  outline:3px solid var(--gev-verde,#00842B);
  outline-offset:-3px;
}

/* Mientras se arrastra */
.gev-sopa__celda[data-gev-marcada="1"]{
  background:var(--gev-verde,#00842B);
  color:var(--gev-sobre-verde,#FFFFFF);
  border-color:var(--gev-verde,#00842B);
}

/* La casilla que ha enseñado una pista: donde empieza una palabra. Va con
   raya discontinua para que no se confunda con una ya encontrada. */
.gev-sopa__celda[data-gev-pista="1"]{
  border:2px dashed var(--gev-verde,#00842B);
  color:var(--gev-verde-oscuro,#046A38);
}

/* La palabra que salio sola en el relleno y el jugador ha cazado: suma, pero
   no es una de las de hoy, asi que se marca mas flojo. */
.gev-sopa__celda[data-gev-extra="1"]{
  border-color:var(--gev-verde,#00842B);
  color:var(--gev-verde-oscuro,#046A38);
}

/* Ya encontrada. Va DESPUES para que gane cuando una palabra hallada vuelve a
   quedar debajo del dedo. */
.gev-sopa__celda[data-gev-hallada="1"]{
  background:var(--gev-verde-oscuro,#046A38);
  color:var(--gev-sobre-verde,#FFFFFF);
  border-color:var(--gev-verde-oscuro,#046A38);
}

/* EL LADO: marcador, lista y botones */
.gev-sopa__lado{ flex:1 1 14rem; }

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

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

.gev-sopa__lista{
  list-style:none;
  margin:0 0 1rem;
  padding:0;
  columns:2;
  column-gap:1rem;
}

@media (max-width:480px){
  .gev-sopa__lista{ columns:1; }
}

.gev-sopa__lista li{
  margin:0 0 .35rem;
  break-inside:avoid;
}

/* LOS HUECOS. Las palabras van escondidas: se ve un guion por letra, y así se
   sabe cuántas son y cuánto miden, pero no cuáles. */
.gev-sopa__huecos{
  font-family:"DejaVu Sans","Noto Sans","Liberation Sans",system-ui,monospace;
  letter-spacing:.18em;
  font-weight:700;
  color:var(--gev-gris,#647385);
}

/* La primera letra, cuando una pista la ha descubierto */
.gev-sopa__hueco--visto{ color:var(--gev-verde-oscuro,#046A38); }

.gev-sopa__palabra{ font-weight:700; }

/* Lo que dice la última pista pedida */
.gev-sopa__aviso{
  margin:0 0 .75rem;
  min-height:1.2em;
  font-size:.9em;
  color:var(--gev-verde-oscuro,#046A38);
}

.gev-sopa__aviso:empty{ margin:0; }

.gev-sopa__fecha{
  font-weight:400;
  color:var(--gev-gris,#647385);
}

.gev-sopa__titulo-tema + .gev-sopa__fecha::before{ content:" · "; }

.gev-sopa__pista{
  color:var(--gev-gris,#647385);
  font-size:.85em;
}

/* La palabra encontrada NO se distingue solo por el color: se tacha y le sale
   una marca delante, para quien no distinga el verde. */
.gev-sopa__lista li[data-gev-hallada="1"]{
  text-decoration:line-through;
  color:var(--gev-gris,#647385);
}

.gev-sopa__lista li[data-gev-hallada="1"]::before{
  content:"\2713\00a0";
  text-decoration:none;
  display:inline-block;
  color:var(--gev-verde-oscuro,#046A38);
}

/* La racha y la mejor marca */
.gev-sopa__rachas{
  margin:0 0 .75rem;
  font-size:.9em;
  color:var(--gev-gris,#647385);
}

.gev-sopa__rachas:empty{ margin:0; }

/* «Jugar a una de antes» */
.gev-sopa__archivo{
  margin:.75rem 0 0;
  font-size:.9em;
  color:var(--gev-gris,#647385);
}

.gev-sopa__archivo label{ display:block; margin-bottom:.25rem; }

.gev-sopa__dias{
  min-height:44px;
  padding:.35rem .5rem;
  border-radius:6px;
  border:1px solid var(--gev-borde,#5B6B82);
  background:var(--gev-fondo,#FFFFFF);
  color:var(--gev-texto,#3A4F66);
  max-width:100%;
}

/* El texto para copiar a mano, si el navegador no deja copiar solo */
.gev-sopa__parapegar{
  margin:.75rem 0 0;
  padding:.5rem .75rem;
  white-space:pre-line;
  font-size:.9em;
  border:1px dashed var(--gev-borde,#5B6B82);
  border-radius:6px;
  color:var(--gev-texto,#3A4F66);
  background:var(--gev-caja,#F7F9FA);
  user-select:all;
}

.gev-sopa__botones{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:0;
}

/* 44 px de alto: es la medida minima para tocar con el dedo. */
.gev-sopa__boton{
  min-height:44px;
  padding:.5rem 1rem;
  border-radius:6px;
  border:2px solid var(--gev-verde,#00842B);
  background:var(--gev-verde,#00842B);
  color:var(--gev-sobre-verde,#FFFFFF);
  font-weight:700;
  cursor:pointer;
}

.gev-sopa__boton--flojo{
  background:transparent;
  color:var(--gev-verde-oscuro,#046A38);
}

.gev-sopa__boton:hover,
.gev-sopa__boton:focus-visible{ opacity:.85; }

@media (prefers-reduced-motion:reduce){
  .gev-sopa *{ transition:none !important; }
}