/* Text correction (Tildes + Comas) — shared touch-first round.
   One passage per screen, big tap targets, tap to toggle. Works the same on
   mouse, touch and IR pen. Driven by core/textCorrectionRound.js for solo, VS,
   Equipos and LIVE. (Replaces the old per-template drag-drop styles.) */

/* El marco es un box de alto definido (16/10): la columna .tc-solo lo LLENA y el
   texto se ajusta (fitPassage) para verse grande en pantalla completa. */
/* TODO el espaciado va en unidades del CONTENEDOR (cq*) — el widget es
   container-type:size — para que márgenes/huecos crezcan EN PROPORCIÓN al marco
   (pantalla completa) en vez de quedarse fijos en px. */
.tc-solo {
  position: relative;
  width: 100%; height: 100%;
  margin: 0; padding: 1.6cqmin;
  min-width: 0; box-sizing: border-box;
  display: flex; flex-direction: column;
}
/* Anula el centrado por margin:auto del widget para que .tc-solo llene la altura. */
.ww-play-page .ww-player-frame > #ww-player-widget > .tc-solo { margin: 0; }

/* ── PAPEL SOBRE LA MESA (dueño, 2026-08-15) ─────────────────────────────────
   Tercera y última versión de esta pelea, y la que decidió el dueño. Historia
   corta, porque explica por qué NO se vuelve atrás:
     1. Al principio la hoja era la textura del marco: sus renglones iban a otro
        ritmo que el texto y se veían dos rayados que no coincidían.
     2. Se apagó el fondo del marco cuando la ronda está montada. Se acabó el
        doble rayado… y con él, el selector de fondo del profe: elegía Cuaderno,
        se veía un instante al montar y desaparecía. Un mando que no manda.
     3. Ahora: la hoja es OPACA y llena el escenario, y el marco conserva un
        MARGEN por el que se ve el fondo elegido, como un papel apoyado en la
        mesa. Los dos rayados no pueden solaparse (la hoja tapa lo de debajo) y
        el ajuste del profe vuelve a hacer algo.
   El marco deja de ser TARJETA mientras hay ronda —ni sombra ni esquinas: la
   única cosa con forma de objeto es la hoja—, pero su fondo se respeta. */
.ww-play-page .ww-player-frame:has(.tc-round),
.ww-player-frame:has(.tc-round) {
  border-radius: 0;
  box-shadow: none;
}
/* El margen que enseña la mesa. En `cq*` para que crezca con el marco: en un
   móvil es un filo y en la pizarra una orla, siempre en proporción. */
.ww-player-frame:has(.tc-round) > #ww-player-widget,
.ww-player-frame:has(.tc-round) > .ww-student-stage {
  padding: max(8px, 2.2cqmin);
}
/* Y la esquina flotante de pantalla completa se retira cuando la ronda pinta su
   barra: el botón vive DENTRO de la barra (ver `.tc-bar .ww-fs-btn--inline`).
   Dos mandos para lo mismo, uno encima del papel, era la captura del dueño.
   `.tc-bar--fs` = la barra que SÍ lo aloja (la ronda a pantalla entera). En el
   duelo se montan dos rondas, ninguna aloja nada, y la esquina del marco sigue
   siendo el único mando — por eso la condición no es «hay barra». */
.ww-player-frame:has(.tc-bar--fs) > .ww-fs-btn--corner { display: none; }

/* "Frase X/Y" en una esquina, fuera del flujo, para no robar espacio al texto.
   Escala con el marco (cqmin) para no verse minúsculo en pantalla completa. */
.tc-frase {
  position: absolute; top: 1.4cqmin; left: 1.6cqmin; z-index: 5;
  font-size: clamp(.7rem, 2.3cqmin, 1.4rem); font-weight: 600; line-height: 1;
  padding: .3em .6em; border-radius: 999px;
  background: rgba(0,0,0,.55); color: #fff;
}

/* "Calibrar pizarra" en la esquina superior derecha (no roba espacio al texto). */
.tc-calib {
  position: absolute; top: 1.4cqmin; right: 1.6cqmin; z-index: 6;
  border: 0; border-radius: 999px; cursor: pointer;
  font-size: clamp(.68rem, 2.1cqmin, 1.05rem); line-height: 1;
  padding: .42em .8em; display: inline-flex; align-items: center; gap: .35em;
  background: rgba(0,0,0,.5); color: #fff;
}
.tc-calib:hover { background: rgba(0,0,0,.72); }

.tc-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* MAQUETA (dueño, 2026-08-14): barra arriba · texto ARRIBA con aire a los
   costados · botón ABAJO. Antes todo se centraba en vertical y en pantalla
   completa quedaba amontonado en la mitad superior con el resto vacío. El aire
   lateral va AQUÍ (no solo en .tc-solo): en carrera/duelo la ronda se pinta sin
   ese envoltorio y el texto tocaba los bordes. */
/* 2ª iteración con la maqueta al lado: «no se parecen en nada — fíjate en las
   líneas rayadas, que están exactas». La diferencia de fondo: en la maqueta la
   ronda ES una hoja — tarjeta crema OPACA, renglones que nacen del propio texto
   (en `em`, uno por línea de escritura), margen rojo, texto a la IZQUIERDA y
   letra escolar. Antes la hoja era la textura del marco: sus renglones iban a
   otro ritmo que el texto y se veían dos rayados que no coincidían. */
.tc-round {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  text-align: left;
  padding: max(8px, 1.4cqmin) max(14px, 3.5cqw) max(12px, 2cqmin);
  /* Hoja OPACA: neutros permitidos (§3 — es papel, no un tema); al ser opaca,
     la textura que el profe elija para el marco queda alrededor, nunca debajo
     del texto — que es lo que producía el doble rayado. */
  /* Por TOKEN con respaldo crema: hoy ningún skin define el papel (cae al
     crema siempre), y el día que uno quiera tematizar la hoja, puede. */
  background: var(--ww-paper, #fffdf6);
  color: var(--ww-paper-ink, #1f2937);
  border-radius: max(10px, 1.6cqmin);
  box-shadow: 0 2px 10px rgba(0,0,0,.08), inset 0 0 6cqmin rgba(120,90,40,.05);
}

/* ── LA BARRA: SOLO herramientas (edu-topbar) ────────────────────────────────
   Como cualquier app de dibujo, pero sin polizones: el progreso y los aciertos
   son INDICADORES y viven en el HUD de las esquinas (core/playerHud.js) — aquí
   queda lo que se TOCA: el interruptor lápiz/borrador, centrado, y el botón de
   pantalla completa que la barra aloja (`tc-bar--fs`), pegado a la derecha. */
.tc-bar {
  flex: 0 0 auto;
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: .6em;
  background: rgba(0, 0, 0, .05);
  border-radius: 999px;
  padding: max(4px, .6cqmin) max(8px, 1cqmin);
  margin-bottom: max(6px, 1cqmin);
}

/* ── Aire extra SOLO en modo Individual ──────────────────────────────────────
   VS/Equipos/Live renderizan `.tc-round` SIN el envoltorio `.tc-solo` (panel
   estrecho: el texto DEBE llenarlo, sin margen). En SOLO hay sitio de sobra, así
   que aquí —y solo aquí— damos margen para que el texto amplificado respire y se
   lea como escrito en una hoja, a la derecha del margen rojo. Como `fitPassage`
   mide `.tc-passage-area` (hijo flex), el padding reduce el área y la letra se
   ajusta sola: no hace falta tocar el JS. */
.tc-solo .tc-round { padding-left: max(14px, 7cqw); padding-right: max(14px, 5cqw); }

/* El área del texto toma toda la altura libre; el texto se centra y NO desborda
   (fitPassage encoge la letra si hiciera falta). */
.tc-passage-area {
  flex: 1 1 auto; min-height: 0; position: relative;
  /* Arriba y a la IZQUIERDA, como se escribe en una hoja. */
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding: max(10px, 3.5cqmin) max(8px, 1.5cqw) 0 max(18px, 4cqw);
  overflow: hidden;
}
/* EL MARGEN ROJO es de la hoja (no de la textura del fondo): una línea que
   recorre el área de escritura, con el texto arrancando a su derecha. */
.tc-passage-area::before {
  content: ''; position: absolute; left: max(8px, 1.8cqw); top: 0; bottom: 0;
  width: .14em; background: rgba(214, 80, 70, .5);
}
/* ── LÁPIZ / BORRADOR: UN MANDO DE DOS PASTILLAS ────────────────────────────
   Tercera forma, y la que pidió el dueño con maqueta (2026-08-15): «los iconos
   van dentro». Un solo carril con DOS pastillas dentro —lápiz y borrador, cada
   una con su icono y su palabra—, y la activa RELLENA. La bolita de interruptor
   de luz obligaba a deducir a qué lado apuntaba; aquí el que manda es el que
   está pintado, sin traducir nada.
   Sigue siendo UN control (un `<button>` que conmuta), no dos: pulsar donde sea
   cambia de herramienta, así que no hay estado "ninguna" ni un toque de más.
   Tamaños en unidades de contenedor como el resto del player (§3): grande en la
   pizarra de 4 m, sin comerse el texto en un móvil 9:16. El relleno sale de un
   TOKEN para que lo recoloreen los skins, y el estado se distingue por RELLENO
   —no solo por matiz— para la mirada a 3 m y para quien no separa colores. */
.tc-switch {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .15em;
  border: 0; cursor: pointer; padding: .18em;
  border-radius: 999px; background: rgba(0, 0, 0, .07);
  font-size: clamp(.8rem, 2.1cqmin, 1.3rem); line-height: 1;
}
.tc-switch__side {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .34em .6em; border-radius: 999px;
  font-weight: 700; color: var(--ww-paper-ink, #1f2937); opacity: .55;
  transition: background .22s cubic-bezier(.4, 0, .2, 1),
              color .22s ease, opacity .22s ease, padding .22s ease;
}
/* SOLO EL ACTIVO LLEVA TEXTO, y la palabra CRECE al encenderse (dueño,
   2026-08-16: «el efecto propio del botón que emulamos»). La pastilla llena se
   ensancha y la apagada se encoge a su icono, así que el relleno parece
   DESLIZARSE de un lado al otro — el gesto de un interruptor de verdad, hecho
   solo con transiciones de ancho y color. Sin JS, sin medir nada: `max-width`
   en `ch` anima porque el valor de partida y el de llegada son largos, no
   `auto`. */
.tc-switch__word {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: max-width .22s cubic-bezier(.4, 0, .2, 1), opacity .16s ease;
}
.tc-switch:not(.is-on) .tc-switch__side--pen,
.tc-switch.is-on .tc-switch__side--er {
  background: var(--ww-accent, #0d6efd);
  /* Blanco sobre el acento: neutro permitido por §3 — los skins recolorean el
     RELLENO con su token y el texto encima sigue legible en los seis. */
  color: #fff; opacity: 1;
  padding-right: .85em;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.tc-switch:not(.is-on) .tc-switch__side--pen .tc-switch__word,
.tc-switch.is-on .tc-switch__side--er .tc-switch__word { max-width: 9ch; opacity: 1; }
/* En «sin animaciones» el cambio es instantáneo, pero sigue siendo evidente:
   el relleno y la palabra no dependen de la transición para existir. */
@media (prefers-reduced-motion: reduce) {
  .tc-switch__side, .tc-switch__word { transition: none; }
}
/* Los iconos son SVG de Lucide en línea: escalan con la letra del mando y toman
   su color de `currentColor` (el token del skin), como hacía el icono de fuente. */
.tc-ico { width: 1.1em; height: 1.1em; display: block; }
.tc-switch:focus-visible { outline: 2px solid var(--ww-accent, #0d6efd); outline-offset: 2px; border-radius: 999px; }

/* ── Pantalla completa DENTRO de la barra ────────────────────────────────────
   Se pega al extremo derecho. Sin caja propia: la barra ya es la caja.
   OJO con el `margin-left:auto`: si lo llevan A LA VEZ el chip de «restantes» y
   este botón, el hueco libre se REPARTE entre los dos y el interruptor deja
   de estar centrado. Absoluto sobre la barra: el centro es del interruptor y
   la derecha, del botón. */
.tc-bar .ww-fs-btn--inline {
  position: absolute; right: max(6px, .8cqmin); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9em; height: 1.9em; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  font-size: clamp(.8rem, 2.1cqmin, 1.3rem);
  background: rgba(0,0,0,.08); color: inherit;
  transition: background .15s ease;
}
.tc-bar .ww-fs-btn--inline:hover,
.tc-bar .ww-fs-btn--inline:focus-visible { background: rgba(0,0,0,.18); }
.tc-bar .ww-fs-btn--inline i { font-size: inherit; line-height: 1; }
/* El botón vive ABAJO: margin-top auto lo ancla al pie aunque el texto sea
   corto — es lo que separa «hoja con su botón» de «todo amontonado arriba». */
.tc-done-wrap { flex: 0 0 auto; margin-top: auto; padding-top: 1.2cqh; text-align: center; }
/* El botón también escala con el marco (no un botón diminuto en pantalla grande). */
.tc-done-wrap .btn { font-size: clamp(.9rem, 2.6cqmin, 1.7rem); padding: .5em 1.1em; }

.tc-passage {
  position: relative;        /* el canvas de dibujo se superpone (inset:0) */
  width: 100%;
  font-size: clamp(1.5rem, 4.5vw, 2.6rem);  /* fallback; fitPassage fija el real en px */
  line-height: 2.0;          /* hueco arriba de la vocal para dibujar la tilde */
  text-align: left;
  overflow-wrap: break-word; /* parte solo entre palabras o palabras larguísimas */
  margin: 0;
  min-width: 0; max-width: 100%;
  /* Letra ESCOLAR (la maqueta): redonda, de cuaderno. Pila del sistema — sin
     webfonts (la app no depende de la red, lección de la CDN de Bootstrap). */
  font-family: 'Segoe Print', 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive;
  /* LOS RENGLONES NACEN DEL TEXTO — siempre, no solo con el fondo «Cuaderno»:
     periodo en `em` = interlineado, así cada línea de escritura lleva SU
     renglón exacto debajo, se ajuste como se ajuste la letra. */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 1.5em,
    rgba(37,99,235,.30) 1.5em, rgba(37,99,235,.30) calc(1.5em + .05em),
    transparent calc(1.5em + .05em), transparent 2em);
  background-position: left top;
}
/* Espacios NORMALES → el texto envuelve al ancho del marco (pre-wrap los preservaba
   y bloqueaba el corte de línea, desbordando). */
.tc-ch { white-space: normal; }

/* ── Modo DIBUJO (lápiz/táctil) ─────────────────────────────────────────────
   El canvas captura el trazo; los .tc-target (solo lectura) definen las zonas. */
.tc-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 3; touch-action: none; cursor: crosshair;
}
/* Texto LIMPIO: las vocales/huecos NO llevan recuadro. Las vocales son `inline`
   (no parten la palabra a final de línea y el sombreado abraza la letra); el hueco
   de coma es inline-block para tener un ancho de zona. */
.tc-target { font: inherit; color: inherit; border-radius: 5px; }
/* El hueco/detector ES el separador entre palabras (el JS omite el espacio
   literal): angosto para que las frases no se vean tan separadas. Mantiene alto 0
   (caja de layout) para no mover la ZONA de dibujo, que se calcula desde su rect
   en textCorrectionDraw.js (la zona ya se ensancha con su propio padX, así que un
   detector estrecho se sigue dibujando/detectando bien). `position:relative` deja
   anclar el sombreado como pseudo-elemento sin cambiar esa caja. */
.tc-target.tc-gap { display: inline-block; min-width: .5em; position: relative; }
/* Marcada (trazo dibujado dentro): sombreado suave, sin formas extra. */
.tc-target.tc-marked { background: rgba(37,99,235,.16); }
/* El hueco está VACÍO (alto 0): su fondo no se vería. Se pinta el sombreado con un
   pseudo-elemento que ABRAZA el hueco alrededor de la base, igual que la tilde
   abraza la vocal, sin alterar el rect que define la zona de dibujo. Se ensancha
   un poco más que el detector para que la marca se lea cómoda. */
.tc-target.tc-gap.tc-marked { background: transparent; }
.tc-target.tc-gap.tc-marked::before {
  content: ''; position: absolute; left: -.14em; right: -.14em;
  top: -0.85em; height: 1.05em; border-radius: 5px;
  background: rgba(37,99,235,.16);
}

/* Reveal (solo lectura): color + SOMBREADO, sin recuadros ni bordes.
   ok = acierto (verde) · bad = marca de más (rojo, tachada) · miss = faltó (rojo). */
.tc-tap.is-revealed {
  font: inherit; color: inherit; border-radius: 5px; padding: .02em .06em; cursor: default;
}
.tc-tap.is-revealed.tc-gap { display: inline-block; min-width: .9em; }
.tc-tap.ok   { color: #0f5132; background: rgba(25,135,84,.20); font-weight: 700; }
.tc-tap.bad  { color: #842029; background: rgba(220,53,69,.18); font-weight: 700; text-decoration: line-through; }
.tc-tap.miss { color: #842029; background: rgba(220,53,69,.16); font-weight: 700; }

.tc-verdict { font-weight: 700; font-size: 1.1rem; }
.tc-verdict.ok { color: #198754; }
.tc-verdict.bad { color: #dc3545; }

/* ── Hoja de cuaderno alineada al INTERLINEADO ──────────────────────────────
   Las líneas azules se dibujan SOBRE .tc-passage en unidades `em`, así su
   periodo = line-height (2em) y se alinean exactas a cada renglón sin importar
   el font-size dinámico (fitPassage). El renglón queda bajo la escritura (a la
   altura de la base de la letra), con sitio arriba para dibujar la tilde. */

/* ── Panel "Calibrar pizarra" (core/penCalibration.js) ──────────────────────── */
.pcal-overlay {
  position: fixed; inset: 0; z-index: 1080;
  background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.pcal-panel {
  background: #fff; color: #1f2937; border-radius: 14px;
  width: min(680px, 96vw); max-height: 92vh; overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.35); padding: 1.1rem 1.25rem;
}
.pcal-head { display: flex; align-items: center; justify-content: space-between; }
.pcal-sub { color: #6b7280; font-size: .92rem; margin: .35rem 0 1rem; }
.pcal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 520px) { .pcal-grid { grid-template-columns: 1fr; } }
.pcal-pad {
  position: relative; border: 2px dashed #cbd5e1; border-radius: 12px;
  min-height: 120px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .25rem;
  touch-action: none; cursor: crosshair; user-select: none;
  background: #f8fafc; text-align: center; padding: .5rem;
}
.pcal-pad.is-capturing { border-color: #2563eb; background: #eff6ff; }
.pcal-field.is-set .pcal-pad { border-style: solid; border-color: #16a34a; background: #f0fdf4; }
.pcal-pad-label { font-weight: 700; }
.pcal-pad-action { font-size: .8rem; color: #6b7280; }
.pcal-val { font-size: 1.6rem; font-weight: 800; color: #2563eb; margin-top: .2rem; }
.pcal-foot { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }