/**
 * nonograma.css — Estilos de la familia nonograma.
 *
 * Contrato de la web pública: consume las custom properties `--em-*` definidas
 * por el chasis de edumaterial.net (tools/publico.py). Cuando el juego se sirve
 * fuera de ese chasis (demo aislada), cada consumo lleva su valor de respaldo,
 * así que el archivo funciona en ambos contextos sin tocar el global.
 *
 * Sin animaciones obligatorias; se respeta prefers-reduced-motion.
 * Los estados de celda no dependen solo del color: la vacía lleva cruz dibujada.
 */

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

  /* Tamaño de celda: lo fija el data-tam del montaje */
  --ng-celda: 34px;

  color: var(--ng-tinta);
  font-family: var(--ng-fuente);
  max-width: 64rem;
  margin: 0 auto;
}

.ng[data-tam="5"]  { --ng-celda: clamp(42px, 10vw, 54px); }
.ng[data-tam="7"]  { --ng-celda: clamp(34px, 8vw, 46px); }
.ng[data-tam="10"] { --ng-celda: clamp(26px, 6vw, 38px); }
.ng[data-tam="15"] { --ng-celda: clamp(19px, 4.8vw, 32px); }

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

/* ---- mesa y cuadrícula ---- */
.ng-mesa { overflow-x: auto; padding-bottom: .35rem; }
.ng-tabla {
  border-collapse: collapse;
  margin: 0 auto;
  background: var(--ng-superficie);
  border: 2px solid var(--ng-tinta);
  font-variant-numeric: tabular-nums;
}
.ng-tabla th, .ng-tabla td { padding: 0; }
.ng-tabla thead th {
  border-bottom: 2px solid var(--ng-tinta);
  vertical-align: bottom;
  font-weight: 600;
  color: var(--ng-suave);
  font-size: calc(var(--ng-celda) * .42);
  line-height: 1.05;
  min-width: var(--ng-celda);
  height: auto;
}
.ng-tabla tbody th {
  border-right: 2px solid var(--ng-tinta);
  text-align: right;
  vertical-align: middle;
  font-weight: 600;
  color: var(--ng-suave);
  font-size: calc(var(--ng-celda) * .42);
  white-space: nowrap;
  padding: 0 calc(var(--ng-celda) * .18);
  min-height: var(--ng-celda);
}
.ng-pcol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; }
.ng-pfil { display: flex; align-items: center; justify-content: flex-end; gap: calc(var(--ng-celda) * .18); }
.ng-pista-vacia { color: var(--ng-borde); }

/* Separadores cada 5: clase ng-b5 puesta por el montaje (más fiable que nth-child) */
.ng-tabla thead th.ng-b5 { border-left: 2px solid var(--ng-tinta); }
.ng-tabla tbody th.ng-b5, .ng-tabla td.ng-b5 { border-left: 2px solid var(--ng-tinta); }
.ng-tabla tr.ng-b5 th { border-top: 2px solid var(--ng-tinta); }
.ng-tabla tr.ng-b5 td { border-top: 2px solid var(--ng-tinta); }
.ng-esquina { border-right: 2px solid var(--ng-tinta); }

/* ---- celdas: botones reales ---- */
.ng-b {
  display: block;
  width: var(--ng-celda);
  height: var(--ng-celda);
  padding: 0;
  margin: 0;
  border: 1px solid var(--ng-borde);
  border-radius: 0;
  background: var(--ng-superficie);
  color: var(--ng-tinta);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ng-b:hover { background: var(--ng-tenue); }
.ng-b:focus-visible {
  outline: 3px solid var(--ng-marca);
  outline-offset: -3px;
  z-index: 1;
  position: relative;
}
/* llena: bloque de tinta */
.ng-b[aria-pressed].ng-llena, .ng-b.ng-llena { background: var(--ng-tinta); border-color: var(--ng-tinta); }
/* vacía: cruz dibujada, no solo color */
.ng-b.ng-vacia { background: var(--ng-superficie); position: relative; }
.ng-b.ng-vacia::after {
  content: "";
  position: absolute; inset: 18%;
  background:
    linear-gradient(to top right, transparent 44%, var(--ng-suave) 44%, var(--ng-suave) 56%, transparent 56%),
    linear-gradient(to top left, transparent 44%, var(--ng-suave) 44%, var(--ng-suave) 56%, transparent 56%);
  opacity: .75;
}
/* vista de solución voluntaria: las llenas se distinguen del juego */
.ng.ng-solucion .ng-b.ng-llena { background: var(--ng-ok); border-color: var(--ng-ok); }

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

.ng-modos { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .6rem; }
.ng-modos .ng-btn[aria-pressed="true"] {
  background: var(--ng-marca);
  color: var(--ng-sobre-marca);
  border-color: var(--ng-marca);
  font-weight: 700;
}
.ng-acciones { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .8rem; }
.ng-acciones .ng-btn { font-size: .88rem; }

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

.ng-pie { margin-top: .8rem; color: var(--ng-suave); font-size: .82rem; }

/* Compatibilidad sin color-mix (fallback suave) */
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .ng-estado[data-tono="error"] { background: var(--ng-superficie); }
}

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

/* Impresión: solo la cuadrícula con lo marcado */
@media print {
  .ng-herramientas, .ng-acciones, .ng-modos, .ng-pie, .ng-estado { display: none; }
  .ng-mesa { overflow: visible; }
}