/* ============================================================
   MISJA POLSKA — Prawko · estilos
   Solo usa los tokens de style.css (paleta, sombras, botones).
   Identidad propia: asfalto (tinta) + línea --oro; --cielo para detalles.
   ============================================================ */

/* Identidad de la sección: asfalto + línea amarilla (fijo en claro y oscuro) */
:root{--pk-asfalto:linear-gradient(135deg,#2A2230,#4A3F55)}

/* ---------- Tarjeta en el Mapa ---------- */
.pk-tarjeta{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  border:none;border-radius:18px;padding:14px 16px;margin:12px 0 4px;
  background:var(--pk-asfalto);color:#fff;
  border-left:8px solid var(--oro);box-shadow:var(--sombra);
}
.pk-tarjeta:active{transform:translateY(2px)}
.pk-tarjeta-ic{font-size:2rem;flex:none}
.pk-tarjeta-txt{flex:1;min-width:0}
.pk-tarjeta-txt b{display:block;font-size:1.02rem;line-height:1.25}
.pk-tarjeta-txt span{display:block;font-size:.82rem;opacity:.9;margin-top:2px}
.pk-chip{flex:none;position:static}

/* ---------- Cabecera de sección ---------- */
.pk-cab{
  display:flex;align-items:center;gap:12px;
  border-radius:18px;padding:14px 16px;margin-bottom:14px;color:#fff;
  background:var(--pk-asfalto);border-left:8px solid var(--oro);box-shadow:var(--sombra);
}
.pk-cab h2{margin:0;font-size:1.2rem}
.pk-cab p{margin:2px 0 0;font-size:.85rem;opacity:.9}
.pk-volver{
  flex:none;width:44px;height:44px;border-radius:14px;border:none;
  background:rgba(255,255,255,.2);color:#fff;font-size:1.3rem;font-weight:800;
}

.pk-revision{
  background:var(--oro-suave);color:var(--tinta);border:1px dashed var(--oro);
  border-radius:12px;padding:8px 12px;margin-bottom:10px;font-size:.8rem;font-weight:800;
}

/* ---------- Cajas ---------- */
.pk-caja{
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:18px;
  padding:14px 16px;margin-bottom:12px;box-shadow:var(--sombra);
}
.pk-caja h3{margin:0 0 6px;font-size:1.02rem}
.pk-caja p{margin:6px 0;font-size:.95rem;line-height:1.45}
.pk-caja ul{margin:6px 0;padding-left:20px;font-size:.92rem}
.pk-aviso{background:var(--oro-suave);border-color:var(--oro)}
.pk-vacio{color:var(--tinta-2)}
.pk-nota{font-size:.8rem;color:var(--tinta-2);text-align:center;margin:12px 0}
.pk-sub{font-size:1rem;margin:18px 0 8px}
.pk-label{display:block;font-weight:800;font-size:.85rem;margin-bottom:6px}

/* ---------- Panel ---------- */
.pk-indicadores{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.pk-indicadores .stat-caja{margin:0}
.pk-sesion{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:14px}
.pk-sesion small{font-size:.8rem;font-weight:600;opacity:.9}

.pk-etapas,.pk-temas,.pk-bloques{display:grid;gap:10px}
.pk-etapa,.pk-tema,.pk-bloque{
  display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  border:2px solid var(--linea);background:var(--tarjeta);border-radius:16px;
  padding:12px 14px;box-shadow:var(--sombra-btn);min-height:64px;
}
.pk-etapa:active,.pk-tema:active,.pk-bloque:active{transform:translateY(2px);box-shadow:none}
.pk-etapa.bloq,.pk-tema.bloq{opacity:.55}
.pk-etapa.hecha,.pk-tema.hecha,.pk-bloque.hecho{border-color:var(--menta);background:var(--menta-suave)}
.pk-etapa-n,.pk-tema-ic{
  flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:var(--cielo-suave);font-size:1.35rem;
}
.pk-etapa-txt,.pk-tema-txt,.pk-bloque-txt{flex:1;min-width:0}
.pk-etapa-txt b,.pk-tema-txt b,.pk-bloque-txt b{display:block;font-size:.98rem}
.pk-etapa-txt span,.pk-tema-txt span,.pk-bloque-txt span{display:block;font-size:.8rem;color:var(--tinta-2)}
.pk-etapa-txt em{display:block;font-style:normal;font-size:.78rem;font-weight:800;color:var(--cielo);margin-top:3px}
.pk-etapa.hecha .pk-etapa-txt em{color:var(--menta-osc)}

.pk-bloque-min{
  flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--oro-suave);font-weight:900;font-size:1.2rem;line-height:1;
}
.pk-bloque-min small{display:block;font-size:.65rem;font-weight:700}
.pk-bloque-ok{flex:none;font-size:1.3rem;font-weight:900;color:var(--tinta-2)}
.pk-bloque.hecho .pk-bloque-ok{color:var(--menta-osc)}

/* ---------- Ejercicio: una mano, respuestas abajo ---------- */
.pk-ej-cab{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pk-ej-cab .barra-prog{flex:1}
.pk-ej-num{font-weight:800;font-size:.85rem;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.pk-ej{display:flex;flex-direction:column;min-height:calc(100vh - 330px);min-height:calc(100dvh - 330px)}
.pk-ej .opciones{margin-top:auto;padding-top:12px}
.pk-ej .opcion{min-height:56px}
.pk-ej .opcion-grande{min-height:84px;font-size:1.35rem}
.pk-ej > .btn-comprobar{margin-top:10px}
.pk-preg{font-size:1.15rem;line-height:1.4;font-weight:800}
.opcion.pk-sel{border-color:var(--cielo);background:var(--cielo-suave)}
.pk-abc{display:flex;align-items:flex-start;gap:10px}
.pk-letra{
  flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:var(--cielo-suave);color:var(--cielo);font-weight:900;
}

.pk-escena{
  background:var(--papel-2);border-radius:14px;padding:12px 14px;margin:4px 0 8px;
  font-size:.95rem;line-height:1.45;
}
.pk-escena small{display:block;font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:3px}
.pk-media{width:100%;border-radius:14px;margin:4px 0 8px}

.pk-palabra{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pk-palabra .grande{font-size:1.6rem;font-weight:900}
.pk-palabra .pron{color:var(--tinta-2);font-style:italic}
.pk-es{font-weight:800;color:var(--menta-osc);font-size:1.1rem}
.pk-def{font-size:.85rem;color:var(--tinta-2);width:100%}
.pk-def summary{cursor:pointer;font-weight:700}
.pk-def p{margin:6px 0 2px;font-style:italic}

/* ---------- Tarjetas de enseñanza (siempre antes de preguntar) ---------- */
.pk-palabra .chip-nueva{align-self:flex-start}
.pk-explica{
  background:var(--cielo-suave);border-radius:12px;padding:10px 12px;
  font-size:.92rem;line-height:1.45;text-align:left;width:100%;
}
.pk-trampa-fila{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:14px;
  padding:12px 14px;margin-bottom:10px;box-shadow:var(--sombra);
}
.pk-trampa-fila .btn-audio{width:42px;height:42px;font-size:1.1rem}
.pk-trampa-fila b{font-size:1.05rem}
.pk-trampa-fila p{margin:4px 0;font-size:.92rem;line-height:1.4}
.pk-trampa-fila small{color:var(--tinta-2);font-size:.75rem}
.pk-chips{display:flex;flex-wrap:wrap;gap:6px}
.pk-chips span{background:var(--papel-2);border-radius:999px;padding:4px 10px;font-size:.85rem;font-weight:700}
.pk-sub-mini{
  margin:12px 0 2px !important;font-size:.72rem !important;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2);
}
.pk-glosario{margin:4px 0;padding-left:18px;font-size:.9rem}
.pk-resp-ok{background:var(--menta-suave);border-radius:10px;padding:8px 10px}
.pk-abc-lista{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}
.pk-abc-lista li{
  display:flex;gap:10px;align-items:flex-start;border:2px solid var(--linea);
  border-radius:12px;padding:8px 10px;font-size:.92rem;
}
.pk-abc-lista li.ok{border-color:var(--menta);background:var(--menta-suave)}
.pk-abc-lista li div{flex:1}
.pk-abc-lista li small{display:block;color:var(--tinta-2);font-style:italic}

/* ---------- Señales y escenas ---------- */
.pk-senal{width:72px;height:72px;object-fit:contain}
.pk-senal-grande{width:110px;height:110px;align-self:center;margin:6px 0}
.pk-senal-caja{display:flex;justify-content:center;padding:10px 0}
.pk-fuente{color:var(--tinta-2);font-size:.75rem}
.pk-escena-caja{display:flex;justify-content:center;margin:4px 0 10px}
.pk-escena-svg{width:100%;max-width:300px;height:auto;border-radius:14px;box-shadow:var(--sombra)}
.pk-nota-situacion{font-size:.75rem !important;color:var(--tinta-2);background:var(--papel-2);border-radius:8px;padding:6px 8px}
.pk-enlace{border:none;background:none;color:var(--cielo);text-decoration:underline;font-size:.8rem;padding:4px}
.pk-creditos{font-size:.8rem;padding-left:18px;line-height:1.5}

/* ---------- Catálogo de señales ---------- */
.pk-catalogo-btn{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;margin:-4px 0 14px;
  border:2px solid var(--linea);background:var(--tarjeta);border-radius:16px;padding:12px;
  font-weight:900;font-size:1rem;box-shadow:var(--sombra-btn);
}
.pk-catalogo-btn small{font-size:.8rem;font-weight:600;color:var(--tinta-2)}
.pk-buscar{margin-bottom:6px}
.pk-cuadricula{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.pk-celda{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  border:1px solid var(--linea);background:var(--tarjeta);border-radius:12px;padding:8px 6px;box-shadow:var(--sombra-btn);
}
.pk-celda .pk-senal{width:60px;height:60px}
.pk-celda b{font-size:.8rem}
.pk-celda span{font-size:.72rem;color:var(--tinta-2);line-height:1.25}
.pk-ficha{margin-bottom:6px}
.pk-def-es{font-style:normal !important;color:var(--tinta) !important}
.pk-def-pl{font-size:.8rem}

/* ---------- Cronómetro ---------- */
.pk-reloj{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pk-reloj .temporizador{flex:1;margin:0}
.pk-reloj .temporizador i{transition:width .2s linear}
#pk-fase{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-2)}
#pk-seg{font-variant-numeric:tabular-nums;min-width:40px;text-align:right}
#pk-global{font-variant-numeric:tabular-nums;color:var(--cielo)}

/* ---------- Feedback y explicación ---------- */
.pk-feedback{
  position:sticky;bottom:80px;margin-top:12px;border-radius:16px;padding:14px 16px;
  box-shadow:var(--sombra);border:2px solid;
}
.pk-feedback.ok{background:var(--menta-suave);border-color:var(--menta)}
.pk-feedback.mal{background:var(--rojo-suave);border-color:var(--rojo)}
.pk-feedback > div{margin:6px 0 10px;font-size:.95rem}
.pk-pl{font-weight:800}

.pk-expl{
  background:var(--tarjeta);border:2px solid var(--linea);border-radius:16px;
  padding:14px 16px;margin-bottom:10px;box-shadow:var(--sombra);
}
.pk-expl.ok{border-color:var(--menta)}
.pk-expl.mal{border-color:var(--rojo)}
.pk-expl p{margin:6px 0;font-size:.93rem;line-height:1.45}
.pk-expl-pl{display:flex;gap:10px;align-items:flex-start;font-weight:800;font-size:1.02rem}
.pk-expl-pl .btn-audio{width:42px;height:42px;font-size:1.1rem}
.pk-expl-es{color:var(--tinta-2);font-style:italic}
.pk-expl mark{background:var(--oro-suave);color:inherit;border-radius:4px;padding:0 2px}
.pk-regla{background:var(--papel-2);border-radius:10px;padding:8px 10px}

/* ---------- Resultados ---------- */
.pk-resultado{
  text-align:center;border-radius:18px;padding:18px 16px;margin-bottom:12px;border:2px solid;
}
.pk-resultado.ok{background:var(--menta-suave);border-color:var(--menta)}
.pk-resultado.mal{background:var(--rojo-suave);border-color:var(--rojo)}
.pk-res-num{font-size:3rem;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.1}
.pk-res-num small{font-size:1.2rem;color:var(--tinta-2)}
.pk-resultado p{margin:6px 0}
.pk-tema-fila{display:grid;grid-template-columns:1fr 80px 48px;align-items:center;gap:8px;padding:5px 0;font-size:.85rem}
.pk-tema-barra{height:8px;border-radius:99px;background:var(--papel-2);overflow:hidden}
.pk-tema-barra i{display:block;height:100%;background:var(--cielo);border-radius:99px}
.pk-tema-fila b{text-align:right;font-variant-numeric:tabular-nums}
.pk-hist{list-style:none;padding:0;margin:0 0 8px}
.pk-hist li{padding:6px 0;border-bottom:1px solid var(--linea);font-size:.9rem}

.pk-cert{width:100%;height:auto;border-radius:16px;box-shadow:var(--sombra);margin-bottom:12px;background:#fff}

#vista-prawko .btn-secundario,#vista-prawko .btn-comprobar{margin-top:8px}

@media (prefers-reduced-motion:reduce){
  .pk-reloj .temporizador i{transition:none}
}