/* ============================================================
   ENTRENADOR CW — estilos
   Reutiliza las variables definidas en :root del style.css
   principal (--bg-panel, --amber, --phosphor, --font-mono, etc).
   No define paleta propia: si cambiás el tema del dashboard,
   esto se actualiza solo.
   ============================================================ */

#solapaCW .cw-bloque {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}

#solapaCW .cw-bloque__titulo {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  color: var(--amber);
  margin: 0 0 12px 0;
}

/* --- Ajustes (grilla de controles) --- */
#solapaCW .cw-ajustes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}
#solapaCW .cw-ajustes label {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#solapaCW .cw-ajustes input {
  width: 100%;
  background: var(--bg-panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  padding: 7px 8px;
}

/* --- Grilla del entrenador de letras --- */
.cw-grilla-letras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.cw-letra-tarjeta {
  background: var(--bg-panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: border-color .15s, background .15s;
}
.cw-letra-tarjeta:hover { border-color: var(--line-strong); }
.cw-letra-tarjeta--sonando {
  border-color: var(--phosphor);
  background: rgba(93, 220, 133, 0.12);
}
.cw-letra-tarjeta__char {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--amber);
}

/* Puntos y rayas como bloques CSS (no como texto): se ven mucho
   más gordos y claros que los caracteres "·" / "−". Los signos
   más largos (números, puntuación) tienen hasta 6 símbolos, por
   eso el tamaño de cada uno está calculado para que ni el más
   largo se apelmace dentro de una tarjeta de ~100px. */
.cw-letra-tarjeta__codigo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 8px;
}
.cw-morse-punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--phosphor);
  flex-shrink: 0;
}
.cw-morse-raya {
  width: 14px;
  height: 7px;
  border-radius: 2px;
  background: var(--phosphor);
  flex-shrink: 0;
}

/* --- Ejercicio --- */
#solapaCW .cw-controles-ejercicio {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
#solapaCW select,
#solapaCW .cw-input-respuesta {
  background: var(--bg-panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  padding: 8px 10px;
}
.cw-input-respuesta {
  width: 100%;
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: border-color .2s, background .2s;
}
.cw-input--ok { border-color: var(--phosphor) !important; background: rgba(93, 220, 133, 0.1); }
.cw-input--mal { border-color: var(--alert) !important; background: rgba(224, 82, 76, 0.1); }

#solapaCW .cw-estado {
  font-family: var(--font-mono);
  color: var(--text-dim);
  margin: 8px 0;
  font-size: 13px;
}

/* --- Tablas (resultados, Q-códigos, prosignas) --- */
.cw-tabla {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 13px;
}
.cw-tabla th, .cw-tabla td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.cw-tabla th {
  color: var(--text-dim);
  font-weight: normal;
  text-transform: uppercase;
  font-size: 11px;
}
.cw-fila-ok td:first-child { color: var(--phosphor); }
.cw-fila-mal td:first-child { color: var(--alert); }

.cw-boton-mini {
  background: var(--bg-panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--amber);
  cursor: pointer;
  padding: 2px 8px;
  font-size: 12px;
}
.cw-boton-mini:hover { border-color: var(--amber); }

/* Estado "sonando ahora" — se usa tanto en "Probar sonido" como
   en los botones ▶ de las tablas. El rojo (--alert) avisa que un
   segundo clic corta el sonido, en vez de repetirlo. */
.boton.cw-en-reproduccion,
.cw-boton-mini.cw-en-reproduccion {
  border-color: var(--alert);
  color: var(--alert);
}

.cw-tablas-referencia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}