/* GEV — Crucigrama del dia
   ------------------------
   Los colores salen de las variables --gev-* que ya define el CSS de la web, y
   cada una lleva detras el color de siempre por si el giny no estuviera puesto.
   Se carga SOLO en la pagina que lleva el atajo [gev-crucigrama]. */

.gev-kruc{
  margin:1.5rem 0;
  color:var(--gev-texto,#3A4F66);
}

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

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

.gev-kruc__caja{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  align-items:flex-start;
}
.gev-kruc__columna-rejilla{ flex:1 1 300px; max-width:min(100%,30rem); }
.gev-kruc__lado{ flex:1 1 260px; min-width:min(100%,16rem); }

/* LA REJILLA: cuadrada siempre, y se encoge con la pantalla. */
.gev-kruc__rejilla{
  display:grid;
  gap:2px;
  background:var(--gev-borde,#5B6B82);
  padding:2px;
  border-radius:.35rem;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}
/* Se puede llegar a la rejilla con el tabulador, asi que tiene que verse. */
.gev-kruc__rejilla:focus-visible{
  outline:3px solid var(--gev-verde-oscuro,#046A38);
  outline-offset:3px;
}

.gev-kruc__casilla{
  position:relative;
  aspect-ratio:1;
  background:var(--gev-fondo,#FFFFFF);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  /* En un movil de 375 px la casilla queda en 29 px: por debajo de .95rem la
     letra no se lee bien dentro. */
  font-size:clamp(.95rem,3.2vw,1.25rem);
  line-height:1;
  color:var(--gev-titulo,#0F2545);
  cursor:pointer;
}
.gev-kruc__casilla--muro{ background:var(--gev-borde,#5B6B82); cursor:default; }
.gev-kruc__casilla--palabra{ background:var(--gev-sobre-verde-flojo,#CFE9D8); }
.gev-kruc__casilla--aqui{ background:var(--gev-verde,#00842B); color:var(--gev-sobre-verde,#FFFFFF); }
.gev-kruc__casilla--mal{ color:#B3261E; }
.gev-kruc__casilla--regalada{ color:var(--gev-gris,#647385); }

.gev-kruc__num{
  position:absolute;
  top:1px;
  left:2px;
  font-size:max(.55em,8px);
  font-weight:600;
  color:var(--gev-gris,#647385);
}
.gev-kruc__casilla--aqui .gev-kruc__num{ color:var(--gev-sobre-verde,#FFFFFF); }

/* La caja de escribir no se ve: solo esta ahi para que el movil saque el
   teclado al tocar una casilla. */
.gev-kruc__teclado{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  border:0;
  padding:0;
  pointer-events:none;
}

.gev-kruc__titulo{
  font-weight:700;
  margin:0 0 .35rem;
  color:var(--gev-titulo,#0F2545);
}
.gev-kruc__lista{ list-style:none; margin:0 0 1rem; padding:0; }
.gev-kruc__pista{
  display:block;
  width:100%;
  text-align:left;
  font:inherit;
  line-height:1.35;
  padding:.3rem .4rem;
  border:0;
  border-radius:.3rem;
  background:transparent;
  color:inherit;
  cursor:pointer;
}
.gev-kruc__pista:hover,
.gev-kruc__pista:focus-visible{ background:var(--gev-caja,#F7F9FA); outline:none; }
.gev-kruc__pista--aqui{ background:var(--gev-sobre-verde-flojo,#CFE9D8); font-weight:600; }
.gev-kruc__pista b{ color:var(--gev-verde-oscuro,#046A38); }
.gev-kruc__pista--hecha{ text-decoration:line-through; color:var(--gev-gris,#647385); }

.gev-kruc__botones{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 .75rem; }
.gev-kruc__boton{
  font:inherit;
  font-weight:600;
  padding:.55rem 1rem;
  border-radius:.5rem;
  border:1px solid var(--gev-verde,#00842B);
  background:var(--gev-verde,#00842B);
  color:var(--gev-sobre-verde,#FFFFFF);
  cursor:pointer;
}
.gev-kruc__boton--flojo{ background:transparent; color:var(--gev-verde-oscuro,#046A38); }
.gev-kruc__boton:hover,
.gev-kruc__boton:focus-visible{ opacity:.85; }

.gev-kruc__aviso{ font-weight:600; margin:0; min-height:1.4em; }
.gev-kruc__aviso--bien{ color:var(--gev-verde-oscuro,#046A38); }

.gev-kruc__archivo{ margin:.75rem 0 0; font-size:.9em; }
.gev-kruc__archivo label{ display:block; color:var(--gev-gris,#647385); margin-bottom:.2rem; }
.gev-kruc__dias{
  font:inherit;
  padding:.35rem .5rem;
  border-radius:.4rem;
  border:1px solid var(--gev-borde,#5B6B82);
  background:var(--gev-fondo,#FFFFFF);
  color:inherit;
  max-width:100%;
}