/* ---------- puntos, racha y niveles ---------- */

.chip-juego{margin-left:auto;display:flex;gap:10px;font-size:13px;font-weight:600;color:var(--tinta);align-items:center}
.chip-juego span{display:inline-flex;align-items:center;gap:3px}
.chip-juego .ic{width:16px;height:16px;color:var(--acento)}
.chip-barra + .chip-juego{margin-left:10px}

.tarjeta-juego{
  background:var(--tarjeta);border:var(--trazo) solid var(--borde);
  padding:14px 16px;margin:4px 0 18px;
}
.tarjeta-juego.vacia{background:none;border-style:dashed;border-color:var(--borde-suave)}
.tarjeta-juego .jf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tarjeta-juego .jn{display:flex;flex-direction:column}
.tarjeta-juego .jnivel{font-weight:800;font-size:16px;letter-spacing:-.01em}
.tarjeta-juego .jpts{font-size:13px;color:var(--tinta-3)}
.tarjeta-juego .jracha{text-align:right;line-height:1.1}
.tarjeta-juego .jracha b{display:flex;align-items:center;gap:4px;font-size:20px;justify-content:flex-end}
.tarjeta-juego .jracha .ic{color:var(--acento);width:20px;height:20px}
.tarjeta-juego .jracha span{font-size:11px;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.06em}
.tarjeta-juego .mini{margin:2px 0 0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.tarjeta-juego .mini .ic{width:14px;height:14px}
.barra-fuera.chica{height:8px;margin:10px 0 4px}

.logros{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.logro{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;
  border:var(--trazo) solid var(--borde-suave);color:var(--tinta-2);padding:3px 8px;white-space:nowrap}
.logro .ic{width:14px;height:14px;color:var(--acento)}
.logro.nuevo{border-color:var(--verde);color:var(--verde)}

.premio{
  background:var(--verde-claro);border:var(--trazo) solid var(--verde);
  padding:14px 16px;margin-bottom:14px;
}
.premio-total{display:flex;align-items:center;gap:6px;font-size:28px;font-weight:800;color:var(--verde);letter-spacing:-.03em}
.premio-total .ic{width:24px;height:24px}
.premio ul{margin:6px 0 0;padding-left:18px;font-size:14px;color:var(--tinta-2)}
.premio li{margin:2px 0}

.toast{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 84px);transform:translate(-50%,14px);
  background:var(--primario);color:var(--sobre-primario);font-size:14px;font-weight:600;
  padding:10px 16px;border:var(--trazo) solid var(--primario);
  opacity:0;transition:opacity .25s ease,transform .25s ease;z-index:60;pointer-events:none;max-width:88vw;text-align:left;
}
.toast.ver{opacity:1;transform:translate(-50%,0)}

/* ---------- pantalla de resultado ----------
   Estructura pensada para que el diseño se pueda cambiar entero desde acá:
   el marcado de resultado.js no lleva ni un estilo en línea. */

/* La nota es lo primero que se mira en Chile: va grande y sola. */
.marcador .nota{font-family:var(--fuente-titulo);font-size:84px;font-weight:800;line-height:1;letter-spacing:-.05em}
.marcador .nota[data-rango="verde"]{color:var(--verde)}
.marcador .nota[data-rango="ambar"]{color:var(--ambar)}
.marcador .nota[data-rango="rojo"]{color:var(--malo)}
.marcador .nota-sub{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--tinta-3);margin:8px 0 0}

.mensaje{margin:18px 0}
.mensaje p{margin:0}

.para-la-proxima{margin:22px 0 6px}
.para-la-proxima h3{margin-bottom:10px}

.acciones{margin:26px 0 10px}
.acciones .secundaria{margin-top:10px}
.acciones-menores{margin-top:26px}
.acciones-menores .secundaria + .secundaria{margin-top:10px}

/* Los bloques cerrados: el detalle existe, pero no se le viene encima. */
.bloque{
  border:var(--trazo) solid var(--borde);background:var(--tarjeta);
  margin-top:12px;overflow:hidden;
}
.bloque > summary{
  padding:15px 16px;font-weight:800;font-size:15px;letter-spacing:-.01em;cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;
}
.bloque > summary::-webkit-details-marker{display:none}
.bloque > summary::after{content:"+";color:var(--acento);font-size:20px;font-weight:600;line-height:1}
.bloque[open] > summary::after{content:"–"}
.bloque[open] > summary{border-bottom:var(--trazo) solid var(--borde)}
.bloque > *:not(summary){margin-left:16px;margin-right:16px}
.bloque > *:last-child{margin-bottom:14px}
.bloque.suave{background:none;border-style:dashed;border-color:var(--borde-suave)}

/* Cada pregunta también viene cerrada: solo el número y si estuvo bien o mal. */
.pregunta-rev{border-top:var(--trazo) solid var(--borde-suave);padding:0}
.pregunta-rev > summary{
  padding:12px 2px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;font-size:14px;min-height:48px;
}
.pregunta-rev > summary::-webkit-details-marker{display:none}
.pregunta-rev .num{
  flex:none;width:28px;height:28px;display:grid;place-items:center;
  font-size:12.5px;font-weight:800;border:var(--trazo) solid var(--borde);color:var(--tinta);
}
.pregunta-rev .est{font-weight:600}
.pregunta-rev.bien .est{color:var(--verde)}
.pregunta-rev.parcial .est{color:var(--ambar)}
.pregunta-rev.mal .est{color:var(--malo)}
.pregunta-rev.bien .num{background:var(--verde);border-color:var(--verde);color:#fff}
.pregunta-rev.parcial .num{background:var(--ambar);border-color:var(--ambar);color:#fff}
.pregunta-rev.mal .num{background:var(--malo);border-color:var(--malo);color:#fff}
.pregunta-rev > *:not(summary){font-size:15px}
.pregunta-rev p{margin:4px 0}
.pregunta-rev .enunciado{font-weight:600;margin-bottom:8px;font-size:16px}
.pregunta-rev .exp{
  margin:10px 0 14px;padding:10px 12px;
  background:var(--superficie-2);border-left:4px solid var(--rojo);color:var(--tinta-2);font-size:14px;
}

/* El medidor por tema toma el color por atributo y no por estilo en línea. */
.medidor[data-rango="verde"] i{background:var(--verde)}
.medidor[data-rango="ambar"] i{background:var(--ambar)}
.medidor[data-rango="rojo"] i{background:var(--malo)}

/* ---------- responder con foto de la hoja ---------- */

.etiqueta-modo{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2);margin:18px 0 8px}

.modo-resp{display:flex;gap:0;margin:0 0 14px;border:var(--trazo) solid var(--borde)}
.modo-resp .mr{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  border:0;background:var(--tarjeta);color:var(--tinta-2);
  font-size:14px;font-weight:600;line-height:1.2;text-align:center;
  padding:12px 8px;min-height:48px;cursor:pointer;font-family:inherit;
}
.modo-resp .mr + .mr{border-left:var(--trazo) solid var(--borde)}
.modo-resp .mr .tic{display:none}
.modo-resp .mr .ico{display:grid;place-items:center}
.modo-resp .mr .ico .ic{width:18px;height:18px}
.modo-resp .mr.activa{background:var(--primario);color:var(--sobre-primario)}
.modo-resp .mr.activa .tic{display:grid}
.modo-resp .mr.activa .tic .ic{width:16px;height:16px}

.ayuda.leyendo{margin-top:10px;color:var(--rojo-texto);font-weight:600}
#btn-leer-resp{margin-top:10px}
#caja-transcrito{margin-top:16px}
#caja-transcrito .etiqueta{margin-bottom:6px}
.editar-transcrito{margin-top:8px}
.editar-transcrito summary{font-size:13px;color:var(--tinta-3);cursor:pointer;padding:6px 0}
.editar-transcrito textarea{min-height:150px;font-family:var(--mono);font-size:13.5px}

/* ---------- el juicio bajo la nota ----------
   La nota sola no dice nada a quien recién empieza a tener notas. Va con la misma
   familia de color que el número, en chico, sin caja: es una glosa, no un cartel. */
.marcador .juicio{font-size:16px;font-weight:800;margin:6px 0 0;letter-spacing:-.01em}
.marcador .juicio[data-rango="verde"]{color:var(--verde)}
.marcador .juicio[data-rango="ambar"]{color:var(--ambar)}
.marcador .juicio[data-rango="rojo"]{color:var(--malo)}