/* Kit de constructores — capa compartida por los seis */

/* ── Traducción de vocabularios ── */
body {
  --bk-panel:  var(--panel-bg,     var(--engine-panel,      #12101f));
  --bk-linea:  var(--panel-border, var(--engine-line,       rgba(255, 255, 255, 0.16)));
  --bk-caja:   var(--cell-bg,      var(--engine-panel-soft, rgba(255, 255, 255, 0.05)));
  --bk-borde:  var(--cell-border,  var(--engine-line,       rgba(255, 255, 255, 0.14)));
  --bk-texto:  var(--cell-text,    var(--engine-text,       #fff9ff));
  --bk-suave:  var(--text-muted,   var(--engine-muted,      #d7cdf5));
  --bk-acento: var(--accent,       var(--engine-cyan,       #8eefff));
  --bk-fondo:  var(--bg,           var(--engine-bg,         #040405));
  --bk-oro:    var(--gold, #ffc94a);
  --bk-ok:     #3ddc97;
}

/* ── Piezas de texto comunes ── */
.bk-hint,
.cn-hint, .ct-hint, .rpqb-hint, .cw-hint, .ws-hint {
  color: var(--bk-suave);
}

/* ── Guía de pasos ───────────────────────────────────────────────
   No se pliega: se cierra. Plegada seguía comiéndose un renglón fijo
   en cada constructor, y el renglón resumen no lo leía nadie dos
   veces. La ✕ la quita entera y el kit recuerda la decisión. */
.bk-guia {
  border: 1px solid var(--bk-linea);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bk-acento) 7%, transparent), transparent 65%),
    var(--bk-panel);
  overflow: hidden;
}

.bk-guia-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-family: var(--font-head, inherit);
  font-size: 13px;
  font-weight: 700;
  color: var(--bk-texto);
  user-select: none;
}

.bk-guia-ico { font-size: 15px; line-height: 1; }

.bk-guia-cerrar {
  margin-left: auto;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--bk-borde);
  background: var(--bk-caja);
  color: var(--bk-suave);
  font-size: 12px;
  line-height: 1;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.bk-guia-cerrar:hover {
  color: var(--bk-texto);
  border-color: var(--bk-acento);
  background: color-mix(in srgb, var(--bk-acento) 12%, transparent);
}

.bk-guia-cuerpo {
  padding: 4px 14px 14px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.bk-paso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--bk-borde);
  border-radius: 12px;
  background: var(--bk-caja);
}

.bk-paso-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--bk-fondo);
  background: var(--bk-acento);
}

.bk-paso-txt { font-size: 12px; line-height: 1.32; color: var(--bk-texto); }
.bk-paso-txt b { display: block; font-size: 12.5px; line-height: 1.25; margin-bottom: 3px; }
.bk-paso-txt small { display: block; color: var(--bk-suave); font-size: 11.5px; line-height: 1.32; }

/* Los atajos van dentro de la guía y no en un menú aparte: es el sitio
   donde alguien busca "cómo se hace esto más rápido". */
.bk-atajos {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-top: 2px;
  font-size: 11.5px;
  color: var(--bk-suave);
}
.bk-atajos kbd {
  font-family: var(--font-ui, inherit);
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--bk-borde);
  background: var(--bk-caja);
  color: var(--bk-texto);
}

/* ── Semáforo de publicación ─────────────────────────────────────
   Vive pegado al botón de publicar. Verde: se puede. Ámbar: falta
   algo, y al pulsarlo se ve exactamente qué. */
.bk-listo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--bk-borde);
  background: var(--bk-caja);
  color: var(--bk-texto);
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.bk-listo:hover { border-color: var(--bk-acento); }

.bk-listo-punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bk-oro);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bk-oro) 22%, transparent);
}
.bk-listo.is-ok .bk-listo-punto {
  background: #3ddc97;
  box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.22);
}

/* La lista de lo que falta. Se abre hacia abajo y se cierra al pulsar
   fuera o con Escape (lo hace builder-kit.js). */
.bk-listo-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 300;
  min-width: 240px;
  max-width: 320px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--bk-linea);
  background: var(--bk-panel);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  text-align: left;
  cursor: default;
}
.bk-listo-panel[hidden] { display: none; }

.bk-listo-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 5px 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--bk-texto);
}
.bk-listo-item.is-falta { color: var(--bk-texto); }
.bk-listo-item.is-hecho { color: var(--bk-suave); }
.bk-listo-marca { flex: 0 0 auto; width: 14px; text-align: center; }
.bk-listo-item.is-hecho .bk-listo-marca { color: #3ddc97; }
.bk-listo-item.is-falta .bk-listo-marca { color: var(--bk-oro); }

/* ── Plegable de lo opcional ─────────────────────────────────────
   Mismo gesto en los seis constructores: un renglón con título y
   contador, que se abre solo si hace falta. */
.bk-fold {
  border: 1px solid var(--bk-borde);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bk-caja) 60%, transparent);
  margin: 10px 0;
}

.bk-fold > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bk-texto);
  user-select: none;
  border-radius: 12px;
}
.bk-fold > summary::-webkit-details-marker { display: none; }
.bk-fold > summary:hover { color: var(--bk-acento); }

.bk-fold-sub {
  font-weight: 500;
  font-size: 11px;
  color: var(--bk-suave);
}

.bk-fold-flecha {
  margin-left: auto;
  font-size: 10px;
  color: var(--bk-suave);
  transition: transform 0.18s ease;
}
.bk-fold[open] > summary .bk-fold-flecha { transform: rotate(180deg); }

.bk-fold-cuerpo { padding: 2px 11px 12px; }

/* ── Aviso de que un panel sigue hacia abajo ─────────────────────
   Los paneles laterales recortan su contenido con overflow y no se
   veía ni un borde: parecía que la ficha terminaba ahí. Ahora el
   contenido se desvanece por abajo mientras quede algo por ver. */
[data-bk-scroll].bk-hay-mas {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent 100%);
          mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent 100%);
}
[data-bk-scroll] { scrollbar-width: thin; }
[data-bk-scroll]::-webkit-scrollbar { width: 8px; }
[data-bk-scroll]::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--bk-acento) 30%, transparent);
  border-radius: 8px;
}
[data-bk-scroll]::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--bk-acento) 55%, transparent);
}

/* ── Foco visible en todo lo que se pueda enfocar ────────────────
   Varios constructores quitaban el contorno del navegador sin poner
   nada en su lugar: con el teclado no se sabía dónde estabas. Se usa
   :focus-visible, así que con el ratón no aparece nada. */
.bk-scope button:focus-visible,
.bk-scope a:focus-visible,
.bk-scope input:focus-visible,
.bk-scope select:focus-visible,
.bk-scope textarea:focus-visible,
.bk-scope summary:focus-visible,
.bk-scope [tabindex]:focus-visible {
  outline: 2px solid var(--bk-acento);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Salto directo al trabajo de verdad, lo primero que recibe el
   tabulador. Invisible hasta que se enfoca. */
.bk-saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 10px 16px;
  border-radius: 0 0 12px 0;
  background: var(--bk-acento);
  color: var(--bk-fondo);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
.bk-saltar:focus {
  left: 0;
}

/* ── Etiquetas de campo accesibles ───────────────────────────────
   Algunos campos solo tenían placeholder: al escribir desaparecía la
   única pista de qué era ese hueco, y un lector de pantalla no leía
   nada. La etiqueta es un <label for> real; esta clase solo la viste. */
.bk-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bk-suave);
  margin: 10px 0 5px;
}

/* Marca de campo obligatorio, con texto para quien no vea el color. */
.bk-req {
  color: var(--bk-oro);
  font-weight: 700;
  margin-left: 4px;
}

/* ════════════════════════════════════════════════════════════════
   DESPEJAR LA PANTALLA
   ----------------------------------------------------------------
   Los seis constructores son lo mismo: una zona de trabajo —tablero,
   lienzo, guion— rodeada de paneles de opciones. Los paneles hacen
   falta para montar la actividad, pero no para MIRARLA, y en un
   portátil se comen la mitad de la pantalla justo cuando uno quiere
   ver cómo va quedando.

   El kit no sabe cómo se llaman los paneles de cada constructor ni
   tiene por qué: cada uno marca los suyos con `data-bk-panel` y esto
   los esconde. Añadir un panel nuevo mañana es poner el atributo.

   El botón se queda SIEMPRE visible, también con todo escondido: es
   la única forma de volver, así que no puede ser una de las cosas que
   desaparecen.
   ════════════════════════════════════════════════════════════════ */
/* ── Solo en pantalla ancha ────────────────────────────────────
   Despejar nace de un problema de escritorio: los paneles rodean la zona
   de trabajo y le quitan sitio. En un teléfono eso no pasa, porque cada
   constructor ya reparte el espacio a su manera — unos apilan los
   paneles debajo del tablero y otros (RPQ, cronopuzzle, cartopuzzle)
   enseñan UNO A LA VEZ con su propio conmutador.

   Encima de eso, despejar no ayudaba: estorbaba. En el RPQ, con
   «Ajustes» en pantalla, esconder esa columna dejaba la página EN BLANCO
   —la del guion ya estaba escondida por el conmutador— y, como la
   preferencia se recuerda, se quedaba en blanco en cada visita. En el
   cronopuzzle y el cartopuzzle se llevaba por delante el propio
   conmutador, que era justo el mando para recuperar un panel.

   Por eso no se desactiva solo el botón: tampoco se aplica el escondido.
   Si únicamente se quitara el botón, quien ya lo hubiera pulsado en el
   móvil se quedaría con todo escondido y sin nada que tocar para
   deshacerlo. */
@media (min-width: 1081px) {
  body.bk-despejado [data-bk-panel] { display: none !important; }
}

.bk-despejar {
  position: fixed;
  right: var(--bk-despejar-right, 18px);
  bottom: var(--bk-despejar-bottom, 18px);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--bk-linea);
  background: var(--bk-panel);
  color: var(--bk-suave);
  font-family: var(--font-ui, inherit);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.bk-despejar:hover {
  color: var(--bk-texto);
  border-color: var(--bk-acento);
  background: color-mix(in srgb, var(--bk-acento) 14%, var(--bk-panel));
}
.bk-despejar-ico { font-size: 13px; line-height: 1; }

/* Con la pantalla despejada el botón sube de tono: es lo único que
   queda en pantalla y tiene que leerse como "esto hace algo", no como
   un adorno que se quedó ahí. */
body.bk-despejado .bk-despejar {
  color: var(--bk-fondo);
  background: var(--bk-acento);
  border-color: var(--bk-acento);
}

/* El botón, fuera. Va AQUÍ, al final de todo lo que define `.bk-despejar`,
   y no junto a la regla de arriba: `display: inline-flex` se declara en la
   regla base con esta misma especificidad, así que un `display: none`
   escrito antes lo pisaría la base y el botón seguiría saliendo.

   (Aquí vivía el ajuste de móvil que dejaba el botón solo con su icono.
   Ya no hace falta: por debajo de 1080px no hay botón que ajustar.) */
@media (max-width: 1080px) {
  .bk-despejar { display: none; }
}

/* ── Menos animación si el sistema lo pide ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bk-guia-cerrar,
  .bk-fold-flecha { transition: none; }
}

/* ── Móvil ───────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .bk-guia-cuerpo { grid-template-columns: 1fr; }
  .bk-listo-panel { right: auto; left: 0; }
}

/* ════════════════════════════════════════════════════════════════
   EL ZOOM QUE HACE SOLO EL TELÉFONO
   ----------------------------------------------------------------
   Safari en iOS acerca la página cuando enfocas un campo cuya letra
   mide menos de 16px. Los seis constructores usan 12.5 y 13px en sus
   paneles, así que pasaba en TODOS y con cualquier campo: tocabas
   "Título", la página pegaba un salto de escala y se quedaba así —
   Safari no deshace ese zoom al salir del campo. De ahí que el móvil
   se viera descolocado y costara moverse: no era la maquetación, era
   que estabas viendo una página ampliada al 130 %.

   16px es el mínimo exacto que desactiva ese comportamiento. Solo se
   aplica en pantallas de teléfono, donde estos paneles ocupan el ancho
   completo y les sobra sitio; en escritorio los tamaños compactos se
   quedan como estaban.

   No entran los interruptores (casilla, radio, deslizador): no llevan
   texto que escribir y no disparan el zoom.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {
  .bk-scope input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  .bk-scope textarea,
  .bk-scope select {
    font-size: 16px;
  }
}

/* ── Guía compacta ───────────────────────────────────────────────
   Para las columnas estrechas (el panel del crucigrama mide 290px).
   Mismo contenido, menos aire: si aquí se usara el tamaño normal, la
   guía sola ocuparía media columna y volvería a empujar la
   herramienta fuera de la vista, que es el problema que vino a
   resolver. */
.bk-guia.es-compacta .bk-guia-cuerpo { gap: 6px; padding: 2px 10px 10px; }
.bk-guia.es-compacta .bk-paso { padding: 7px 9px; gap: 8px; }
.bk-guia.es-compacta .bk-paso-num { width: 18px; height: 18px; font-size: 10.5px; }
.bk-guia.es-compacta .bk-paso-txt { font-size: 11.5px; line-height: 1.28; }
.bk-guia.es-compacta .bk-paso-txt b { font-size: 11.5px; }
.bk-guia.es-compacta .bk-paso-txt small { font-size: 11px; line-height: 1.28; }
.bk-guia.es-compacta .bk-guia-cabecera { padding: 9px 10px; font-size: 12px; }