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

.chip-juego{margin-left:auto;display:flex;gap:8px;font-size:12.5px;font-weight:700;color:var(--morado-osc)}
.chip-barra + .chip-juego{margin-left:8px}

.tarjeta-juego{
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r);
  padding:14px 16px;margin:4px 0 18px;box-shadow:var(--sombra);
}
.tarjeta-juego.vacia{background:var(--morado-claro);border-style:dashed;box-shadow:none}
.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:700;font-size:16px}
.tarjeta-juego .jpts{font-size:13px;color:var(--tinta-3)}
.tarjeta-juego .jracha{text-align:center;line-height:1.1}
.tarjeta-juego .jracha b{display:block;font-size:19px}
.tarjeta-juego .jracha span{font-size:11px;color:var(--tinta-3)}
.tarjeta-juego .mini{margin:2px 0 0}
.barra-fuera.chica{height:6px;margin:10px 0 4px}

.logros{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.logro{font-size:11.5px;font-weight:650;background:var(--morado-claro);color:var(--morado-osc);
  padding:4px 9px;border-radius:99px;white-space:nowrap}
.logro.nuevo{background:var(--verde-claro);color:var(--verde)}

.premio{
  background:var(--verde-claro);border:1px solid color-mix(in srgb,var(--verde) 30%,transparent);
  border-radius:var(--r);padding:14px 16px;margin-bottom:14px;
}
.premio-total{font-size:26px;font-weight:800;color:var(--verde);letter-spacing:-.5px}
.premio ul{margin:6px 0 0;padding-left:18px;font-size:13.5px;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(--tinta);color:var(--fondo);font-size:14px;font-weight:650;
  padding:10px 16px;border-radius:99px;box-shadow:0 8px 28px rgba(0,0,0,.28);
  opacity:0;transition:opacity .25s ease,transform .25s ease;z-index:60;pointer-events:none;max-width:88vw;text-align:center;
}
.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-size:68px;font-weight:800;line-height:1;letter-spacing:-2.5px}
.marcador .nota[data-rango="verde"]{color:var(--verde)}
.marcador .nota[data-rango="ambar"]{color:var(--ambar)}
.marcador .nota[data-rango="rojo"]{color:var(--rojo)}
.marcador .nota-sub{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}
.ayuda.centrada{text-align:center;margin-top:8px}

/* Los bloques cerrados: el detalle existe, pero no se le viene encima. */
.bloque{
  border:1px solid var(--borde);border-radius:var(--r);background:var(--tarjeta);
  margin-top:12px;overflow:hidden;
}
.bloque > summary{
  padding:15px 16px;font-weight:650;font-size:14.5px;cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.bloque > summary::-webkit-details-marker{display:none}
.bloque > summary::after{content:"▾";color:var(--tinta-3);font-size:13px;transition:transform .18s ease}
.bloque[open] > summary::after{transform:rotate(180deg)}
.bloque[open] > summary{border-bottom:1px 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}

/* Cada pregunta también viene cerrada: solo el número y si estuvo bien o mal. */
.pregunta-rev{border-top:1px solid var(--borde);padding:0}
.pregunta-rev > summary{
  padding:12px 2px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;font-size:14px;
}
.pregunta-rev > summary::-webkit-details-marker{display:none}
.pregunta-rev .num{
  flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:12.5px;font-weight:700;background:var(--morado-claro);color:var(--morado-osc);
}
.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(--rojo)}
.pregunta-rev.bien .num{background:var(--verde-claro);color:var(--verde)}
.pregunta-rev.parcial .num{background:var(--ambar-claro);color:var(--ambar)}
.pregunta-rev.mal .num{background:var(--rojo-claro);color:var(--rojo)}
.pregunta-rev > *:not(summary){font-size:14.5px}
.pregunta-rev p{margin:4px 0}
.pregunta-rev .enunciado{font-weight:600;margin-bottom:8px}
.pregunta-rev .exp{
  margin:10px 0 14px;padding:10px 12px;border-radius:10px;
  background:var(--morado-claro);color:var(--tinta-2);font-size:13.5px;
}

/* 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(--rojo)}

/* El selector de curso, igual que los otros campos. */
.campo select{
  width:100%;padding:13px 14px;font-size:16px;font-family:inherit;
  border:1px solid var(--borde);border-radius:12px;background:var(--tarjeta);color:var(--tinta);
}
.campo select:focus{outline:none;border-color:var(--morado);box-shadow:0 0 0 3px var(--morado-claro)}

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

/* La versión anterior era un segmentado sutil: en modo oscuro el botón elegido
   quedaba MÁS OSCURO que su propio contenedor y no se notaba cuál estaba activo.
   Ahora el elegido va relleno con el morado y un ✓, y el otro queda claramente
   apagado: se ve de una cuál está puesto, sin tener que adivinar. */
.etiqueta-modo{display:block;font-size:13px;font-weight:650;color:var(--tinta-2);margin:18px 0 8px}

.modo-resp{display:flex;gap:8px;margin:0 0 14px}
.modo-resp .mr{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  border:2px solid var(--borde);background:var(--tarjeta);color:var(--tinta-2);
  font-size:14px;font-weight:650;line-height:1.2;text-align:center;
  padding:14px 8px;border-radius:14px;cursor:pointer;font-family:inherit;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.modo-resp .mr .tic{display:none;font-weight:800}
.modo-resp .mr .ico{font-size:16px;line-height:1}
.modo-resp .mr.activa{
  /* --morado es oscuro en claro y claro en oscuro; --tarjeta es justo al revés,
     así que este par siempre contrasta en los dos temas. */
  background:var(--morado);border-color:var(--morado);color:var(--tarjeta);
  box-shadow:0 4px 14px rgba(109,40,217,.3);
}
.modo-resp .mr.activa .tic{display:inline}

/* Cámara y galería, lado a lado. En el teléfono son dos gestos distintos y hay que
   ofrecer los dos: el atributo capture abre la cámara pero anula la galería, así que
   un solo input no puede hacer ambas cosas. */
.dos-cargas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dos-cargas .soltar{padding:20px 10px;gap:4px;font-size:13.5px;text-align:center}
.dos-cargas .soltar .mas{font-size:24px}

.soltar.chica{padding:16px;font-size:14px}
.ayuda.leyendo{margin-top:10px;color:var(--morado-osc);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:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px}

@media (prefers-color-scheme: dark){
  .toast{background:var(--tarjeta);color:var(--tinta);border:1px solid var(--borde)}
  .premio{border-color:#1f5138}
}

/* ---------- 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:15px;font-weight:700;margin:6px 0 0;letter-spacing:-.2px}
.marcador .juicio[data-rango="verde"]{color:var(--verde)}
.marcador .juicio[data-rango="ambar"]{color:var(--ambar)}
.marcador .juicio[data-rango="rojo"]{color:var(--rojo)}

/* ---------- opciones grandes (qué entra en la prueba) ----------
   No son chips: cada una necesita una línea que explique qué significa, porque
   "solo ejercicios" no quiere decir lo mismo para todos. */
.opciones{display:flex;flex-direction:column;gap:8px}
.opciones .opcion{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:12px 14px;border:1.5px solid var(--borde);border-radius:13px;
  background:var(--tarjeta);color:var(--tinta);cursor:pointer;font:inherit;
}
.opciones .opcion .ico{font-size:22px;line-height:1;flex:none}
.opciones .opcion .txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.opciones .opcion .txt b{font-size:15px}
.opciones .opcion .txt span{font-size:12.5px;color:var(--tinta-3)}
.opciones .opcion.sel{
  border-color:var(--morado);background:var(--morado);color:var(--tarjeta);
  box-shadow:0 4px 14px rgba(109,40,217,.28);
}
.opciones .opcion.sel .txt span{color:rgba(255,255,255,.82)}