/* ============================================================
   crucigrama.css — Estilos para el crucigrama interactivo
   ============================================================ */

/* ── Contenedor principal ── */
.cw-wrapper {
  font-family: inherit;
  max-width: 960px;
  margin: 0 auto;
  background-color: white;
}

.cw-header {
  margin-bottom: 1.25rem;
}

.cw-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  line-height: 1.2;
}

.cw-description {
  font-size: 0.88rem;
  color: #6b7280;
  margin: 0 0 0.5rem;
}

.cw-meta {
  font-size: 0.8rem;
  color: #9ca3af;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Timer & estado ── */
.cw-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1rem;
  color: #374151;
  background: #f3f4f6;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  margin: 0 auto;
}

/* ── Controles (botones) ── */
.cw-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.cw-btn {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.38rem 0.85rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.cw-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.cw-btn:active {
  background: #e5e7eb;
}

.cw-btn--primary {
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
}

.cw-btn--primary:hover {
  background: #1e40af;
  border-color: #1e40af;
}

.cw-btn--danger {
  background: #fff;
  color: #dc2626;
  border-color: #fca5a5;
}

.cw-btn--danger:hover {
  background: #fef2f2;
  border-color: #dc2626;
}

/* ── Cuerpo: cuadrícula + pistas ── */
.cw-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* ── Tabla del crucigrama ── */
.cw-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cw-table {
  border-collapse: collapse;
  border: 2px solid #111;
  table-layout: fixed;
  user-select: none;
  margin-bottom: 0px;
}

.cw-cell {
  width: var(--cw-cell, 40px);
  height: var(--cw-cell, 40px);
  min-width: var(--cw-cell, 40px);
  max-width: var(--cw-cell, 40px);
  box-sizing: border-box;
  border: 1px solid #9ca3af;
  position: relative;
  cursor: pointer;
  background: #fff;
  padding: 0;
  overflow: hidden;
  transition: background 0.1s;
}

.cw-cell:focus {
  outline: none;
}

.cw-cell--black {
  background: #111;
  border-color: #111;
  cursor: default;
  pointer-events: none;
}

/* Celda parte de la palabra activa */
.cw-cell--active {
  background: #dbeafe;
}

/* Celda seleccionada (cursor) */
.cw-cell--selected {
  background: #fde68a;
}

/* Error tras verificar */
.cw-cell--error {
  background: #fee2e2;
}

/* Revelada */
.cw-cell--revealed {
  background: #d1fae5;
}

/* Correcta (verificada OK) */
.cw-cell--correct {
  background: #bbf7d0;
}

/* ── Número de pista (esquina sup-izq) ── */
.cw-num {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: calc(var(--cw-cell, 40px) * 0.23);
  line-height: 1;
  font-weight: 700;
  color: #374151;
  pointer-events: none;
}

/* ── Letra escrita por el usuario ── */
.cw-letter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cw-cell, 40px) * 0.43);
  font-weight: 700;
  color: #111;
  pointer-events: none;
}

.cw-cell--revealed .cw-letter {
  color: #047857;
}

/* ── Panel de pistas ── */
.cw-clues {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  min-width: 0;
}

.cw-clues-col {}

.cw-clues-col h3 {
  font-family: 'Libre Franklin', Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid #111;
  padding-bottom: 0.4rem;
  margin: 0 0 0.5rem;
  color: #111;
}

.cw-clues-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

.cw-clues-list::-webkit-scrollbar {
  width: 4px;
}

.cw-clues-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 2px;
}

.cw-clue-item {
  display: flex;
  gap: 0.4rem;
  font-family: 'Libre Franklin', Arial, sans-serif;
  font-size: 0.70rem !important;
  padding: 0.3rem 0.4rem;
  border-radius: 3px;
  cursor: pointer;
  color: #374151;
  line-height: 1.35;
  transition: background 0.1s;
}

.cw-clue-item:hover {
  background: #f3f4f6;
}

.cw-clue-item--active {
  background: #fde68a;
  color: #111;
}

.cw-clue-item__num {
  font-weight: 700;
  min-width: 1.4rem;
  text-align: right;
  flex-shrink: 0;
  color: #6b7280;
}

.cw-clue-item--active .cw-clue-item__num {
  color: #374151;
}

/* ── Mensaje de éxito ── */
.cw-success {
  display: none;
  text-align: center;
  padding: 2rem 1rem;
  background: #f0fdf4;
  border: 2px solid #86efac;
  border-radius: 8px;
  margin-top: 1.5rem;
}

.cw-success.is-visible {
  display: block;
}

.cw-success__icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.cw-success__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #166534;
  margin: 0 0 0.25rem;
}

.cw-success__time {
  font-size: 0.95rem;
  color: #15803d;
}

/* ── Pista activa (tooltip/banner) ── */
.cw-active-clue {
  font-size: 0.88rem;
  color: #374151;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 0.45rem 0.75rem;
  margin-bottom: 0.75rem;
  min-height: 2.2rem;
  line-height: 1.4;
}

.cw-active-clue strong {
  font-weight: 700;
  margin-right: 0.35rem;
}

/* ── Input oculto para teclado móvil ── */
.cw-hidden-input {
  position: absolute;  /* dentro de .cw-table-wrap (position:relative) */
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  font-size: 16px; /* evita zoom en iOS */
  z-index: -1;
}

/* ============================================================
   DARK MODE
   ============================================================ */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .cw-wrapper { background-color: #2B3034; color: #B9C7D2; }
  html:not([data-theme="light"]) .cw-timer { color: #e5e7eb; background: #374151; }
  html:not([data-theme="light"]) .cw-btn { background: #1f2937; color: #e5e7eb; border-color: #4b5563; }
  html:not([data-theme="light"]) .cw-btn:hover { background: #374151; border-color: #6b7280; }
  html:not([data-theme="light"]) .cw-btn:active { background: #4b5563; }
  html:not([data-theme="light"]) .cw-btn--primary { background: #2563eb; color: #fff; border-color: #2563eb; }
  html:not([data-theme="light"]) .cw-btn--primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
  html:not([data-theme="light"]) .cw-btn--danger { background: #1f2937; color: #f87171; border-color: #7f1d1d; }
  html:not([data-theme="light"]) .cw-btn--danger:hover { background: #2d1515; border-color: #dc2626; }
  html:not([data-theme="light"]) .cw-description { color: #9ca3af; }
  html:not([data-theme="light"]) .cw-meta { color: #6b7280; }
  html:not([data-theme="light"]) .cw-table { border-color: #e5e7eb; }
  html:not([data-theme="light"]) .cw-cell { background: #1f2937; border-color: #4b5563; }
  html:not([data-theme="light"]) .cw-cell--black { background: #e5e7eb; border-color: #e5e7eb; }
  html:not([data-theme="light"]) .cw-cell--active { background: #1e3a5f; }
  html:not([data-theme="light"]) .cw-cell--selected { background: #78350f; }
  html:not([data-theme="light"]) .cw-cell--error { background: #450a0a; }
  html:not([data-theme="light"]) .cw-cell--revealed { background: #052e16; }
  html:not([data-theme="light"]) .cw-cell--correct { background: #14532d; }
  html:not([data-theme="light"]) .cw-num { color: #d1d5db; }
  html:not([data-theme="light"]) .cw-letter { color: #f9fafb; }
  html:not([data-theme="light"]) .cw-cell--revealed .cw-letter { color: #6ee7b7; }
  html:not([data-theme="light"]) .cw-clues-col h3 { color: #f9fafb; border-color: #f9fafb; }
  html:not([data-theme="light"]) .cw-clue-item { color: #d1d5db; }
  html:not([data-theme="light"]) .cw-clue-item:hover { background: #374151; }
  html:not([data-theme="light"]) .cw-clue-item--active { background: #78350f; color: #fef3c7; }
  html:not([data-theme="light"]) .cw-clue-item__num { color: #9ca3af; }
  html:not([data-theme="light"]) .cw-clue-item--active .cw-clue-item__num { color: #fde68a; }
  html:not([data-theme="light"]) .cw-active-clue { background: #1f2937; border-color: #374151; color: #d1d5db; }
  html:not([data-theme="light"]) .cw-success { background: #052e16; border-color: #166534; }
  html:not([data-theme="light"]) .cw-success__title { color: #4ade80; }
  html:not([data-theme="light"]) .cw-success__time { color: #86efac; }
  html:not([data-theme="light"]) .cw-title { color: #f9fafb; }
}

html[data-theme="dark"] .cw-wrapper { background-color: #2B3034; color: #B9C7D2; }
html[data-theme="dark"] .cw-timer { color: #e5e7eb; background: #374151; }
html[data-theme="dark"] .cw-btn { background: #1f2937; color: #e5e7eb; border-color: #4b5563; }
html[data-theme="dark"] .cw-btn:hover { background: #374151; border-color: #6b7280; }
html[data-theme="dark"] .cw-btn:active { background: #4b5563; }
html[data-theme="dark"] .cw-btn--primary { background: #2563eb; color: #fff; border-color: #2563eb; }
html[data-theme="dark"] .cw-btn--primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
html[data-theme="dark"] .cw-btn--danger { background: #1f2937; color: #f87171; border-color: #7f1d1d; }
html[data-theme="dark"] .cw-btn--danger:hover { background: #2d1515; border-color: #dc2626; }
html[data-theme="dark"] .cw-description { color: #9ca3af; }
html[data-theme="dark"] .cw-meta { color: #6b7280; }
html[data-theme="dark"] .cw-table { border-color: #e5e7eb; }
html[data-theme="dark"] .cw-cell { background: #1f2937; border-color: #4b5563; }
html[data-theme="dark"] .cw-cell--black { background: #e5e7eb; border-color: #e5e7eb; }
html[data-theme="dark"] .cw-cell--active { background: #1e3a5f; }
html[data-theme="dark"] .cw-cell--selected { background: #78350f; }
html[data-theme="dark"] .cw-cell--error { background: #450a0a; }
html[data-theme="dark"] .cw-cell--revealed { background: #052e16; }
html[data-theme="dark"] .cw-cell--correct { background: #14532d; }
html[data-theme="dark"] .cw-num { color: #d1d5db; }
html[data-theme="dark"] .cw-letter { color: #f9fafb; }
html[data-theme="dark"] .cw-cell--revealed .cw-letter { color: #6ee7b7; }
html[data-theme="dark"] .cw-clues-col h3 { color: #f9fafb; border-color: #f9fafb; }
html[data-theme="dark"] .cw-clue-item { color: #d1d5db; }
html[data-theme="dark"] .cw-clue-item:hover { background: #374151; }
html[data-theme="dark"] .cw-clue-item--active { background: #78350f; color: #fef3c7; }
html[data-theme="dark"] .cw-clue-item__num { color: #9ca3af; }
html[data-theme="dark"] .cw-clue-item--active .cw-clue-item__num { color: #fde68a; }
html[data-theme="dark"] .cw-active-clue { background: #1f2937; border-color: #374151; color: #d1d5db; }
html[data-theme="dark"] .cw-success { background: #052e16; border-color: #166534; }
html[data-theme="dark"] .cw-success__title { color: #4ade80; }
html[data-theme="dark"] .cw-success__time { color: #86efac; }
html[data-theme="dark"] .cw-title { color: #f9fafb; }

/* ============================================================
   RESPONSIVE — móvil (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {
  .cw-body {
    grid-template-columns: 1fr;
  }

  .cw-clues {
    grid-template-columns: 1fr;
  }

  .cw-clues-list {
    max-height: 260px;
  }

  .cw-controls {
    gap: 0.35rem;
  }

  .cw-btn {
    font-size: 0.78rem;
    padding: 0.35rem 0.7rem;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cw-cell,
  .cw-btn,
  .cw-clue-item {
    transition: none;
  }
}

/* ============================================================
   MODO INCRUSTADO — dentro de .pasatiempos__frame
   Layout: grid centrado arriba + pistas debajo en 2 columnas
   ============================================================ */
.pasatiempos__frame .cw-wrapper {
  padding: 0.75rem 0.85rem;
  max-width: 100%;
}

/* Encabezado compacto */
.pasatiempos__frame .cw-header {
  margin-bottom: 0.5rem;
}

.pasatiempos__frame .cw-title {
  font-size: 1rem;
  margin-bottom: 0.15rem;
}

.pasatiempos__frame .cw-description {
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

.pasatiempos__frame .cw-meta {
  gap: 0.5rem;
  font-size: 0.75rem;
}

.pasatiempos__frame .cw-timer {
  font-size: 0.85rem;
  padding: 0.15rem 0.45rem;
}

/* Pista activa — máx 2 líneas */
.pasatiempos__frame .cw-active-clue {
  font-size: 0.78rem;
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.5rem;
  min-height: 1.8rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Botones pequeños */
.pasatiempos__frame .cw-controls {
  gap: 0.3rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}

.pasatiempos__frame .cw-btn {
  font-size: 0.72rem;
  padding: 0.28rem 0.55rem;
}

/* Cuerpo: columna única — cuadrícula arriba, pistas abajo */
.pasatiempos__frame .cw-body {
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

/* Cuadrícula centrada */
.pasatiempos__frame .cw-table-wrap {
  display: flex;
  justify-content: center;
}

/* Pistas: 2 columnas lado a lado debajo de la cuadrícula */
.pasatiempos__frame .cw-clues {
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.pasatiempos__frame .cw-clues-col h3 {
  font-size: 0.65rem;
  padding-bottom: 0.3rem;
  margin-bottom: 0.35rem;
}

.pasatiempos__frame .cw-clues-list {
  max-height: 190px;
}

.pasatiempos__frame .cw-clue-item {
  font-size: 0.75rem;
  padding: 0.22rem 0.3rem;
  gap: 0.3rem;
}

.pasatiempos__frame .cw-clue-item__num {
  min-width: 1.1rem;
}

/* Mensaje de éxito: compacto */
.pasatiempos__frame .cw-success {
  padding: 1rem 0.75rem;
  margin-top: 0.75rem;
}

.pasatiempos__frame .cw-success__icon {
  font-size: 1.8rem;
}

.pasatiempos__frame .cw-success__title {
  font-size: 1.1rem;
}

/* En móvil el frame ya es ancho completo, pistas en 1 col */
@media (max-width: 640px) {
  .pasatiempos__frame .cw-clues {
    grid-template-columns: 1fr;
  }
}