/* Razas FCI — interfaz movil primero.
   Se ve bien en el telefono instalada como app; el escritorio es secundario. */

:root {
  --fondo: #f7f8fa;
  --carta: #ffffff;
  --texto: #16181d;
  --tenue: #6b7280;
  --borde: #e3e6eb;
  --acento: #2f7d4f;
  --acento-claro: #e6f4ec;
  --ok: #2f9e5e;
  --no: #d94a4a;
  --no-claro: #fdecec;
  --sombra: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
  --r: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f1115;
    --carta: #181b21;
    --texto: #e8eaed;
    --tenue: #9aa1ac;
    --borde: #272b33;
    --acento: #4caf7d;
    --acento-claro: #16281f;
    --ok: #4caf7d;
    --no: #e46767;
    --no-claro: #2a1a1a;
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.45;
  overscroll-behavior-y: contain;
}

#app {
  max-width: 560px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 16px calc(24px + env(safe-area-inset-bottom));
}

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.2; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ---------- cabecera ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0 10px; position: sticky; top: 0; z-index: 10;
  background: var(--fondo);
}
.top h1 { font-size: 1.25rem; margin: 0; letter-spacing: -.02em; }
.marcadores { display: flex; align-items: center; gap: 10px; font-size: .85rem; font-weight: 600; }
.xp { color: var(--acento); }
.racha { color: var(--tenue); }
.son { font-size: 1.1rem; padding: 4px; }

/* ---------- tablero de stats ---------- */
.tablero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 22px; }
.stat {
  background: var(--carta); border: 1px solid var(--borde); border-radius: var(--r);
  padding: 12px 8px; text-align: center;
}
.stat b { display: block; font-size: 1.35rem; letter-spacing: -.02em; }
.stat span { font-size: .72rem; color: var(--tenue); }

/* ---------- senda ---------- */
.grupo { margin-bottom: 30px; }
.grupo > h2 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tenue); font-weight: 700; margin-bottom: 12px;
}
.grupo > h2 small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; }

.unidad {
  background: var(--carta); border: 1px solid var(--borde); border-radius: var(--r);
  padding: 16px; margin-bottom: 12px; box-shadow: var(--sombra);
}
.unidad.bloqueada { opacity: .5; }
.unidad header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.unidad h3 { font-size: 1rem; margin: 0; }
.unidad h3 small { font-weight: 500; color: var(--tenue); font-size: .82rem; display: block; }
.unidad .razas { font-size: .74rem; color: var(--tenue); margin: 6px 0 0; }
.unidad .pct { font-size: .8rem; font-weight: 700; color: var(--acento); flex-shrink: 0; }

.barra { height: 5px; background: var(--borde); border-radius: 3px; margin: 12px 0; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--acento); border-radius: 3px; transition: width .4s; }

.nodos { display: flex; gap: 8px; flex-wrap: wrap; }
.nodo {
  flex: 1 1 auto; min-width: 62px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 4px; border-radius: 12px;
  background: var(--fondo); border: 1.5px solid var(--borde);
  transition: transform .12s, background .2s;
}
.nodo:active:not(:disabled) { transform: scale(.94); }
.nodo .ico { font-size: 1.2rem; line-height: 1; }
.nodo .etq { font-size: .62rem; color: var(--tenue); }
.nodo.ok { background: var(--acento-claro); border-color: var(--acento); }
.nodo.ok .etq { color: var(--acento); font-weight: 600; }
.nodo.bloq { opacity: .45; cursor: not-allowed; }

/* ---------- barra superior de leccion ---------- */
.barra-sup { display: flex; align-items: center; gap: 12px; padding: 14px 0; position: sticky; top: 0; background: var(--fondo); z-index: 10; }
.salir { font-size: 1.2rem; color: var(--tenue); padding: 4px 6px; }
.progreso { flex: 1; height: 10px; background: var(--borde); border-radius: 5px; overflow: hidden; }
.progreso i { display: block; height: 100%; background: var(--acento); border-radius: 5px; transition: width .35s; }
.cont { font-size: .78rem; color: var(--tenue); font-variant-numeric: tabular-nums; }
.titulo-barra { font-weight: 600; font-size: .95rem; }

/* ---------- ejercicio ---------- */
.ejercicio { padding-bottom: 130px; }
.enunciado { font-size: 1.1rem; font-weight: 600; margin: 8px 0 16px; }
.estimulo { border-radius: var(--r); overflow: hidden; background: var(--borde); margin-bottom: 18px; }
.estimulo img { width: 100%; height: 260px; object-fit: cover; }

.opciones.txt { display: flex; flex-direction: column; gap: 9px; }
.opciones.txt .op {
  text-align: left; padding: 15px 16px; border-radius: 12px;
  background: var(--carta); border: 1.5px solid var(--borde); font-weight: 500;
  transition: transform .1s, border-color .15s;
}
.opciones.img { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.opciones.img.dos { grid-template-columns: 1fr 1fr; }
.opciones.img .op {
  padding: 0; border-radius: 12px; overflow: hidden;
  border: 3px solid var(--borde); background: var(--borde);
  transition: transform .1s, border-color .15s;
}
.opciones.img .op img { width: 100%; height: 145px; object-fit: cover; }
.opciones.img.dos .op img { height: 190px; }

.op:active:not(.resuelto) { transform: scale(.97); }
.op.correcta { border-color: var(--ok); background: var(--acento-claro); }
.op.incorrecta { border-color: var(--no); background: var(--no-claro); }
.op.resuelto { cursor: default; }

/* ---------- veredicto ---------- */
.veredicto {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  transform: translateY(100%); transition: transform .22s cubic-bezier(.2,.8,.3,1);
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borde);
}
.veredicto.visible { transform: translateY(0); }
.veredicto.ok { background: var(--acento-claro); }
.veredicto.no { background: var(--no-claro); }
.veredicto .txt { max-width: 560px; margin: 0 auto 12px; }
.veredicto b { font-size: 1.05rem; }
.veredicto.ok b { color: var(--acento); }
.veredicto.no b { color: var(--no); }
.veredicto p { margin: 5px 0 0; font-size: .86rem; color: var(--texto); }
.veredicto p.tenue { color: var(--tenue); font-size: .8rem; }
.veredicto .principal { max-width: 560px; margin: 0 auto; }

/* ---------- botones ---------- */
.principal {
  display: block; width: 100%; padding: 15px; border-radius: 12px;
  background: var(--acento); color: #fff; font-weight: 700; font-size: 1rem;
  transition: transform .1s, filter .15s; margin-top: 16px; text-align: center;
}
.principal:active { transform: scale(.985); filter: brightness(.94); }
.secundario {
  display: block; width: 100%; padding: 13px; border-radius: 12px; margin-top: 9px;
  border: 1.5px solid var(--borde); color: var(--tenue); font-weight: 600;
  text-align: center; text-decoration: none; font-size: .92rem;
}
.txt { color: var(--tenue); font-size: .8rem; text-decoration: underline; }

/* ---------- presentacion / ficha ---------- */
.presenta { padding-bottom: 30px; }
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-radius: var(--r); overflow: hidden; margin-bottom: 16px; }
.galeria img { width: 100%; height: 130px; object-fit: cover; background: var(--borde); }
.galeria.chica { grid-template-columns: repeat(3, 1fr); }
.galeria.chica img { height: 92px; }
.presenta h2 { font-size: 1.5rem; letter-spacing: -.02em; margin-bottom: 2px; }
.presenta .fci { color: var(--tenue); font-size: .88rem; font-style: italic; margin: 0 0 10px; }
.datos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.datos span {
  font-size: .72rem; padding: 4px 9px; border-radius: 20px;
  background: var(--carta); border: 1px solid var(--borde); color: var(--tenue);
}
.bloque { margin-bottom: 18px; }
.bloque h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); }
.bloque.aviso { background: var(--carta); border: 1px solid var(--borde); border-radius: var(--r); padding: 14px; }
.comparar { display: flex; gap: 8px; }
.comparar figure { margin: 0; flex: 1; }
.comparar img { width: 100%; height: 105px; object-fit: cover; border-radius: 9px; background: var(--borde); }
.comparar figcaption { font-size: .72rem; color: var(--tenue); margin-top: 5px; text-align: center; }
.pista { font-size: .85rem; margin: 12px 0 0; }
.creditos { font-size: .68rem; color: var(--tenue); margin: 16px 0 8px; }

/* ---------- resumen ---------- */
.resumen { text-align: center; padding: 40px 0; }
.medalla { font-size: 3.4rem; line-height: 1; margin-bottom: 10px; }
.resumen.bien .medalla { color: var(--acento); }
.resumen.mal .medalla { color: var(--tenue); }
.resumen h2 { font-size: 1.6rem; }
.puntaje { color: var(--tenue); margin: 0 0 22px; }
.premios { display: flex; justify-content: center; gap: 12px; margin-bottom: 26px; }
.premios div { background: var(--carta); border: 1px solid var(--borde); border-radius: var(--r); padding: 12px 22px; }
.premios b { display: block; font-size: 1.3rem; color: var(--acento); }
.premios span { font-size: .7rem; color: var(--tenue); }
.repasar { text-align: left; margin-bottom: 12px; }
.repasar h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px;
  background: var(--carta); border: 1px solid var(--borde); border-radius: 22px; font-size: .8rem;
}
.chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.perfecto { color: var(--acento); font-weight: 600; }

/* ---------- pie / error ---------- */
.pie { text-align: center; padding: 26px 0; color: var(--tenue); font-size: .72rem; }
.pie p { margin: 0 0 10px; }
.error { padding: 50px 0; text-align: center; }
.error pre { font-size: .72rem; color: var(--no); white-space: pre-wrap; }
.error code { background: var(--carta); padding: 2px 5px; border-radius: 4px; }

@media (min-width: 640px) {
  .estimulo img { height: 320px; }
  .opciones.img .op img { height: 175px; }
  .galeria img { height: 155px; }
}