/* Colorear — estilos del PLAYER. Contrato (docs/estilos-de-actividad.md):
   NADA con tamaño fijo (cq*/% o piso max(); un clamp con techo bajo CONGELA) y
   colores pintables por token var(--ww-*) para que los skins recoloreen — los
   colores de la PALETA y del DIBUJO son DATO y van inline desde JS (como las
   bolas de Pelotas), nunca aquí. */

.co-play {
  display: flex;
  flex-direction: column;
  height: 100%;
  container-type: size;      /* @container por aspect-ratio: mide ESTE marco, no la ventana (§3b0) */
}

/* edu-sec--dibujo: todo el alto que sobra a la cabecera y la paleta. El SVG
   inyectado hereda el hueco (width/height:100% + preserveAspectRatio nativo). */
.co-play .edu-sec--dibujo {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1cqmin;
  /* La hoja mide contra ESTE hueco (min(100cqw,100cqh)), no contra el marco. */
  container-type: size;
}
/* LAS DOS CAPAS, y aquí está toda la mecánica (v1.51.704): el LIENZO donde se
   pinta va debajo y la LÁMINA encima, ocupando los dos el mismo hueco. Como las
   láminas son `fill="none"` —línea sobre transparente—, la tinta se ve por los
   huecos y el trazo negro no se puede tapar, pinte el niño lo que pinte. La
   alternativa era recortar la pintura al contorno, que cuesta más y además
   quita lo que se quiere entrenar: salirse tiene que ser POSIBLE para que no
   salirse signifique algo. */
/* LA HOJA: cuadrada como la lámina (viewBox 0 0 100 100), centrada en el hueco
   y BLANCA. Sin ella el lienzo se estiraba a toda la franja —que casi nunca es
   cuadrada— y el dibujo se centraba dentro: quedaba un palmo de vacío pintable
   a cada lado y el campo se veía ladeado. Y blanca porque la lámina es trazo
   NEGRO sobre transparente: encima de un tema oscuro no se vería nada. */
.co-play .co-hoja {
  position: relative;
  /* EL LADO SALE DEL HUECO, no de `aspect-ratio` + `max-*`. Con
     `height:100%; aspect-ratio:1; max-width:100%` la hoja salía 517×560 en
     pantalla estrecha: `max-width` recorta el ancho y la altura se queda, así
     que el cuadrado deja de serlo justo donde más se nota. `min(100cqw, 100cqh)`
     mide el hueco (que declara `container-type: size` abajo) y da el lado menor,
     que es exactamente lo que se busca. */
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
  background: #fff;
  border-radius: 2cqmin;
  box-shadow: 0 0.4cqmin 1.6cqmin rgba(0, 0, 0, .18);
  overflow: hidden;
}
.co-play #co-tinta,
.co-play #co-linea {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
/* La lámina no intercepta el dedo: los eventos son del lienzo, que está debajo.
   Sin esto el SVG se comería el `pointerdown` y no se pintaría nada. */
.co-play #co-linea { pointer-events: none; }
.co-play #co-tinta { touch-action: none; cursor: crosshair; }
/* SOLO el SVG raíz de la lámina: la figura va ANIDADA como otro <svg> con su
   caja (`componerEscena`), y un selector descendiente le pisaba el tamaño y
   la sacaba del decorado (medido: el gato al 100 % del lienzo, cortado). */
.co-play #co-linea > svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* edu-sec--paleta: los 10 colores en UNA fila (horizontal) — el tamaño del
   swatch va también en `cqw` con TOPE (`min(12cqmin, 8cqw)`), no solo en
   `cqmin`: en un marco ancho y bajo, 12cqmin (que mide el lado CORTO, la
   altura) se hace enorme y 10 círculos de ese tamaño no caben en el ancho →
   la fila se partía en dos (9+1). Con el tope en `cqw` el swatch nunca supera
   el 8% del ANCHO del marco, así que 10×8cqw+huecos siempre entra en 100cqw. */
.co-play .edu-sec--paleta {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 1.2cqmin;
  padding: 1cqmin;
}
/* Vertical (móvil en pie, docs/estilos-de-actividad.md §3b0: se mide el
   CONTENEDOR con @container, no la ventana): DOS filas de 5, nunca 9+1 — una
   rejilla fija de 5 columnas en vez de un flex que decide solo dónde parte. */
@container (aspect-ratio < 4/3) {
  .co-play .edu-sec--paleta {
    display: grid;
    /* SEIS columnas: son 11 botones (9 colores · goma · grosor). Con cinco, el
       grosor se quedaba solo en una tercera fila. 6 × 13,5cqmin + huecos = 89cqmin. */
    grid-template-columns: repeat(6, 1fr);
    justify-items: center;
    gap: 1.6cqmin;
    max-width: min(92cqmin, 96%);
    margin: 0 auto;
  }
}

/* Swatch grande: ≥12% del lado corto del marco EN VERTICAL (columnas de la
   rejilla), y con tope de ancho en HORIZONTAL para que los 10 quepan en una
   fila (ver arriba). `cqmin`/`cqw` son ambos del MISMO contenedor con
   `container-type:size` (.co-play), así que combinarlos no rompe nada. */
.co-play .co-color {
  /* SIEMPRE ≥ 12 % del lado corto (norte §1(c), lo mide la matriz): el tope
     `8cqw` que hacía caber los 10 en una fila los dejaba en el 11,5 %. Cuando
     no caben (hueco más cuadrado que 4:3) van en dos filas de cinco. */
  width: max(44px, 13.5cqmin);    /* 13,5 % del contenedor (.co-play, que es el marco menos la cabecera) = ≥ 12 % del MARCO */
  height: max(44px, 13.5cqmin);
  border-radius: 50%;
  border: max(2px, 0.6cqmin) solid var(--ww-card-fg, var(--ww-fg));
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0.3cqmin 0.6cqmin rgba(0, 0, 0, 0.25);
  transition: transform 120ms ease, outline-color 120ms ease;
  flex: 0 0 auto;
}
/* EL GROSOR: el punto del botón mide lo que el trazo. El tamaño sale del dato
   (`data-grosor`, 0·1·2), no de un estilo en línea. */
.co-play .co-grosor__punto {
  display: block;
  border-radius: 50%;
  background: var(--ww-fg, #222);
  width: 22%; height: 22%;
}
.co-play .co-grosor[data-grosor="1"] .co-grosor__punto { width: 42%; height: 42%; }
.co-play .co-grosor[data-grosor="2"] .co-grosor__punto { width: 66%; height: 66%; }

.co-play .co-color--on {
  outline: max(3px, 1cqmin) solid var(--ww-fg);
  outline-offset: max(2px, 0.5cqmin);
  transform: scale(1.08);
}

.co-play .edu-send {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 1.5cqmin;
}
.co-play .edu-send .co-listo {
  font-size: max(1rem, 4cqmin);
}

/* ── EL SELECTOR DE DIBUJO DEL EDITOR ────────────────────────────────────────
   Formulario, no el juego → px permitidos (lo reconoce `EDITOR_SEL` por el
   `-ed-` del prefijo, tests/styles.test.mjs).

   ESTE BLOQUE NO EXISTÍA. El editor pintaba `.co-ed-grid`, `.co-ed-pick`,
   `.co-ed-mini` y `.co-ed-pick--on` y NINGUNA de las cuatro tenía una regla en
   ninguna hoja: la rejilla no era rejilla, la miniatura era un icono genérico de
   Bootstrap igual para los ocho dibujos, y «elegido» no se veía porque la clase
   que lo marca no pintaba nada. El profe entraba a crear la actividad y tenía
   ocho botones idénticos sin saber cuál había tocado. */
.co-ed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}
.co-ed-pick {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 6px 6px;
  background: #fff;
  border: 2px solid #dee2e6;
  border-radius: 12px;
  cursor: pointer;
  /* SIN `box-shadow` en la transición (ley de animaciones): una sombra que
     cambia obliga a repintar. El realce al pasar por encima va con
     `border-color` y `transform`, y el resalte de «elegido» aparece de golpe,
     que para un estado de selección es lo correcto. */
  transition: border-color .12s ease, transform .12s ease;
}
.co-ed-pick:hover  { border-color: #adb5bd; transform: translateY(-2px); }
.co-ed-pick:focus-visible { outline: 3px solid #0d6efd; outline-offset: 2px; }
/* LA MINIATURA ES EL DIBUJO DE VERDAD, no un icono. Los SVG del banco nacen con
   `fill="#ffffff"` y trazo negro —la versión SIN colorear—, que es exactamente
   lo que el profe va a repartir: la miniatura enseña el encargo, no una idea
   aproximada de él. Son ~700 bytes cada uno, así que caben los ocho de sobra. */
.co-ed-mini {
  display: block; width: 100%; aspect-ratio: 1;
  background: #f8f9fa; border-radius: 8px; overflow: hidden;
}
.co-ed-mini img { width: 100%; height: 100%; object-fit: contain; display: block; }
.co-ed-label { font-size: .8rem; font-weight: 600; line-height: 1.1; text-align: center; }
/* ELEGIDO, SIN LUGAR A DUDAS: borde grueso, fondo teñido y una marca de visto.
   Tres señales y no una sola, porque un borde de color es lo primero que se
   pierde en un proyector descalibrado o para quien no distingue bien los tonos. */
.co-ed-pick--on {
  border-color: #0d6efd; border-width: 3px;
  background: #e7f1ff;
  box-shadow: 0 0 0 3px rgba(13,110,253,.18);
}
.co-ed-pick--on .co-ed-label { color: #0a58ca; }
.co-ed-tick {
  position: absolute; top: -8px; right: -8px;
  width: 26px; height: 26px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: #0d6efd; color: #fff; font-size: .95rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.co-ed-pick--on .co-ed-tick { display: flex; }

/* La GOMA vive en la misma fila que los colores y con el mismo tamaño: es una
   herramienta más, no un control aparte. Fondo claro para que se distinga de
   los nueve colores sin necesidad de leer nada. */
.co-play .co-color--goma {
  background: var(--ww-card-bg, #fff);
  color: var(--ww-fg, #222);
  display: flex; align-items: center; justify-content: center;
  font-size: max(12px, 5cqmin);
}