/**
 * sopa.css — Estilos de la familia sopa de letras.
 *
 * Consume el contrato público --em-* del chasis de edumaterial.net; cada consumo
 * lleva su valor de reserva para funcionar también aislado (demo). Sin
 * animaciones obligatorias; se respeta prefers-reduced-motion. El estado de las
 * palabras no depende solo del color: las encontradas llevan subrayado grueso.
 */

.sp {
  --sp-fondo: var(--em-fondo, #FDFBF7);
  --sp-tinta: var(--em-tinta, #1A1720);
  --sp-suave: var(--em-tinta-suave, #6C6577);
  --sp-borde: var(--em-borde, rgba(26, 23, 32, .09));
  --sp-marca: var(--em-marca, #E8B23C);
  --sp-sobre-marca: var(--em-sobre-acento, #1A1720);
  --sp-tenue: var(--em-acento, #FBF0D9);
  --sp-tenue-2: var(--em-acento-2, #E4F1EF);
  --sp-ok: var(--em-ok, #1F6E68);
  --sp-error: var(--em-error, #C93A32);
  --sp-superficie: var(--em-superficie, #FFFFFF);
  --sp-radio: var(--em-radio, 16px);
  --sp-fuente: var(--em-fuente, "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif);

  --sp-celda: 34px;
  color: var(--sp-tinta);
  font-family: var(--sp-fuente);
  max-width: 64rem;
  margin: 0 auto;
}

.sp[data-tam="8"]  { --sp-celda: clamp(30px, 8.5vw, 44px); }
.sp[data-tam="9"]  { --sp-celda: clamp(28px, 7.6vw, 42px); }
.sp[data-tam="10"] { --sp-celda: clamp(25px, 6.8vw, 38px); }
.sp[data-tam="12"] { --sp-celda: clamp(22px, 5.6vw, 34px); }
.sp[data-tam="14"] { --sp-celda: clamp(19px, 4.8vw, 30px); }
.sp[data-tam="15"] { --sp-celda: clamp(18px, 4.6vw, 28px); }

.sp-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin: 0 0 .8rem; }
.sp-titulo { font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; margin: 0; }
.sp-meta { color: var(--sp-suave); font-size: .88rem; }
.sp-reglas { margin: 0 0 1rem; font-size: .95rem; line-height: 1.55; color: var(--sp-suave); max-width: 58ch; }

.sp-principal { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: flex-start; }
.sp-mesa { overflow-x: auto; padding-bottom: .35rem; }
.sp-tabla {
  border-collapse: collapse;
  margin: 0 auto;
  background: var(--sp-superficie);
  border: 2px solid var(--sp-tinta);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.sp-tabla td { padding: 0; }
.sp-cel {
  display: block;
  width: var(--sp-celda);
  height: var(--sp-celda);
  padding: 0;
  margin: 0;
  border: 1px solid var(--sp-borde);
  border-radius: 0;
  background: var(--sp-superficie);
  color: var(--sp-tinta);
  font-family: var(--sp-fuente);
  font-size: calc(var(--sp-celda) * .52);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.sp-cel:hover { background: var(--sp-tenue); }
.sp-cel:focus-visible { outline: 3px solid var(--sp-marca); outline-offset: -3px; position: relative; z-index: 1; }

/* selección en curso y aciertos: forma + color */
.sp-cel.sp-inicio { background: var(--sp-marca); color: var(--sp-sobre-marca); box-shadow: inset 0 0 0 2px var(--sp-tinta); }
.sp-cel.sp-linea { background: var(--sp-tenue); box-shadow: inset 0 0 0 2px var(--sp-marca); }
.sp-cel.sp-hallada {
  background: var(--sp-tenue-2);
  color: var(--sp-tinta);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--sp-ok);
  text-underline-offset: 3px;
}
.sp.sp-solucion .sp-cel.sp-solucion-celda { background: var(--sp-ok); color: #fff; text-decoration: none; }
.sp-cel.sp-pista { background: var(--sp-tenue-2); box-shadow: inset 0 0 0 3px var(--sp-ok); }

/* panel lateral: palabras */
.sp-panel { min-width: 11rem; flex: 1 1 11rem; max-width: 18rem; }
.sp-panel h2 { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sp-suave); margin: 0 0 .5rem; }
.sp-lista { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.sp-palabra {
  padding: .28rem .7rem;
  border: 1px solid var(--sp-borde);
  border-radius: 99px;
  background: var(--sp-superficie);
  font-size: .92rem;
  font-weight: 600;
}
.sp-palabra.sp-palabra-hallada {
  background: var(--sp-tenue-2);
  color: var(--sp-suave);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--sp-ok);
}
.sp-progreso { font-size: .9rem; color: var(--sp-suave); margin: 0 0 1rem; }

.sp-acciones { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 .8rem; }
.sp-acciones .sp-btn {
  font-family: var(--sp-fuente);
  font-size: .9rem;
  font-weight: 600;
  min-height: 44px;
  padding: .45rem .95rem;
  border-radius: 99px;
  border: 1px solid var(--sp-borde);
  background: var(--sp-superficie);
  color: var(--sp-tinta);
  cursor: pointer;
  touch-action: manipulation;
}
.sp-btn:hover { border-color: var(--sp-marca); }
.sp-btn:focus-visible { outline: 3px solid var(--sp-marca); outline-offset: 2px; }
.sp-btn[disabled] { opacity: .45; cursor: default; }
.sp-btn[disabled]:hover { border-color: var(--sp-borde); }

.sp-estado {
  border: 1px solid var(--sp-borde);
  border-left: 5px solid var(--sp-marca);
  background: var(--sp-tenue);
  color: var(--sp-tinta);
  border-radius: var(--sp-radio);
  padding: .7rem 1rem;
  font-size: .95rem;
  line-height: 1.5;
  min-height: 1.2em;
  flex-basis: 100%;
}
.sp-estado[data-tono="error"] { border-left-color: var(--sp-error); }
.sp-estado[data-tono="ok"] { border-left-color: var(--sp-ok); background: var(--sp-tenue-2); }
.sp-estado .sp-nivel {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sp-suave);
  margin-right: .5rem;
}

.sp-pie { margin-top: .8rem; color: var(--sp-suave); font-size: .82rem; flex-basis: 100%; }

@media (max-width: 640px) {
  .sp-principal { flex-direction: column; }
  .sp-panel { max-width: none; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sp * { scroll-behavior: auto; }
}

@media print {
  .sp-acciones, .sp-pie, .sp-estado { display: none; }
  .sp-mesa { overflow: visible; }
}