/* ==========================================================================
   La Academia · Ethical Broders
   Obsidiana + celeste + oro. Pensado para LEER TEXTO LARGO sin cansarse:
   medida de linea acotada, interlineado generoso, contraste alto pero no puro.
   ========================================================================== */

:root {
  --obsidiana:      #070a10;
  --piedra:         #0d1019;
  --piedra-alta:    #141926;
  --piedra-borde:   #1e2534;

  --celeste:        #5aa8d8;
  --celeste-claro:  #b9e2f7;
  --celeste-hondo:  #2c6a94;
  --oro:            #d8b877;

  --texto:          #d7dde8;
  --texto-suave:    #8a94a6;
  --texto-tenue:    #737c8c;  /* era #59616f (3,1:1 sobre obsidiana, ilegible a 11-13 px); ahora 4,7:1 */

  --ok:             #6fcf97;
  --alerta:         #e0a458;
  --error:          #e07a7a;

  --medida:         68ch;
  --radio:          10px;
  --sombra:         0 18px 50px rgba(0, 0, 0, .55);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  ui-sans-serif, system-ui, "Segoe UI", Inter, Roboto, sans-serif;
  --mono:  ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

/* el atributo [hidden] siempre gana: algunas clases (.boton, overlays) fijan display */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--obsidiana);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
}

/* un halo muy tenue arriba, como la luz del emblema */
body::before {
  content: "";
  position: fixed;
  inset: -30vh 0 auto 0;
  height: 60vh;
  background: radial-gradient(ellipse at 50% 0%, rgba(90, 168, 216, .10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

a { color: var(--celeste); text-decoration: none; }
a:hover { color: var(--celeste-claro); text-decoration: underline; }

/* ------------------------------------------------------------------ marco */

.marco {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: rgba(7, 10, 16, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--piedra-borde);
}

.barra .emblema { width: 26px; height: 26px; color: var(--celeste); flex: none; }
.barra .marca {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto);
}
.barra .marca small {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--texto-tenue);
  text-transform: uppercase;
}
/* gap 5 y no 6: con el botón extra del rector (Panel) el menú medía 1402 px a 1400 px de ancho (QA e6, B11).
   flex: 1 + wrap: si igual no entra (rector con título equipado a 1400 px), el último botón baja de
   fila en vez de abrir scroll horizontal en toda la página; cuando entra, no cambia nada. */
.barra nav { margin-left: auto; display: flex; gap: 5px; align-items: center; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
/* botones del menú (pedido de Jano 15/09: "que Estudiar destaque por encima de los demás, que queden lindos") */
.nav-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
  color: var(--texto-suave); font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: .01em;
  border: 1px solid transparent; background: transparent; text-decoration: none; white-space: nowrap; line-height: 1;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s; }
.nav-btn .ic { width: 16px; height: 16px; flex: none; opacity: .8; transition: opacity .15s; }
.nav-btn:hover { color: var(--texto); background: rgba(255,255,255,.04); border-color: var(--piedra-borde); text-decoration: none; }
.nav-btn:hover .ic { opacity: 1; }
.nav-btn.activo { color: var(--celeste-claro); background: rgba(90,168,216,.10); border-color: rgba(90,168,216,.35); }
.nav-btn.activo .ic { opacity: 1; }
/* modos de juego "unidos" (1 vs 1 · Rush · Trivia): un solo óvalo con los tres botones adentro */
.nav-grupo { display: inline-flex; align-items: center; gap: 0; padding: 2px; border-radius: 999px;
  border: 1px solid var(--piedra-borde); background: rgba(255,255,255,.025); }
.nav-grupo .nav-btn { padding: 5px 10px; border-radius: 999px; }
.nav-grupo .nav-btn + .nav-btn { margin-left: 1px; }
/* Estudiar: el botón principal, siempre encendido */
.nav-btn.principal { color: #0b1a26; font-weight: 600; background: linear-gradient(180deg, #8fd0f4, var(--celeste));
  border-color: rgba(185,226,247,.6); box-shadow: 0 0 0 1px rgba(90,168,216,.25), 0 6px 18px -8px rgba(90,168,216,.9); }
.nav-btn.principal .ic { opacity: 1; }
.nav-btn.principal:hover { color: #06121b; background: linear-gradient(180deg, #a6dcfa, #6cb6e0); transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(90,168,216,.35), 0 10px 24px -8px rgba(90,168,216,1); }
.nav-btn.principal.activo { box-shadow: 0 0 0 2px rgba(185,226,247,.35), 0 6px 18px -8px rgba(90,168,216,.9); }
.nav-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(90,168,216,.35); }
.nav-btn.salir-link { cursor: pointer; color: var(--texto-tenue); }
.nav-btn.salir-link:hover { color: var(--error); border-color: rgba(224,122,122,.35); background: rgba(224,122,122,.06); }
/* notebook: con Panel (rector) y el chip, Salir se caía a una segunda fila -> botones más justos y Salir solo ícono */
/* El interruptor del rector. Apagado es el estado normal (cursa como cualquiera) y se ve como un
   boton mas; prendido va en ambar, que en esta paleta es "lo elegido", para que no se confunda con
   el celeste de "estoy en esta pagina" y no se olvide encendido. */
.nav-btn.modo-vertodo { cursor: pointer; }
.nav-btn.modo-vertodo.activo { color: var(--oro); background: rgba(216,184,119,.10);
  border-color: rgba(216,184,119,.40); }
@media (max-width: 1560px) and (min-width: 1181px) {
  .barra nav { gap: 4px; }
  .nav-btn { padding: 7px 9px; font-size: 13px; gap: 6px; }
  .nav-btn.salir-link span, .nav-btn.modo-vertodo span { display: none; }
  .nav-btn.salir-link .ic, .nav-btn.modo-vertodo .ic { width: 17px; height: 17px; }
}
/* notebook de 1280-1366 (la mas comun): el menu del alumno pedia 987 px y tenia 969, asi que
   "Salir" caia solo a una segunda fila, la barra pasaba de 69 a 104 px de alto (en todas las
   paginas, sticky) y "Academia Secreta" se partia en dos renglones. En este rango la marca queda
   en el simbolo, que sigue siendo el link al campus y lleva el alt (UX 28/09, medido). */
@media (max-width: 1439px) and (min-width: 1181px) {
  .barra .marca { display: none; }
}
/* tablet / notebook chica: la marca no se parte y el menú pasa a una segunda fila desplazable */
@media (max-width: 1180px) {
  .barra { flex-wrap: wrap; gap: 6px 12px; }
  .barra .marca { white-space: nowrap; }
  .barra nav { width: 100%; margin-left: 0; gap: 4px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0 4px;
    mask-image: linear-gradient(90deg, #000 84%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); }
  .barra nav::-webkit-scrollbar { display: none; }
  .barra nav a, .barra nav form, .barra nav .nav-grupo { flex: none; white-space: nowrap; }
  .billetera-chip { order: -1; }
  .nav-btn { padding: 7px 10px; font-size: 13px; gap: 6px; }
  /* La barra ya se desplaza en horizontal acá, y el interruptor del rector queda al final: con la
     etiqueta puesta hay que arrastrar todo el menú para alcanzarlo, y es un boton de uso diario.
     Solo el icono, con el area de toque completa. */
  .nav-btn.modo-vertodo span { display: none; }
  .nav-btn.modo-vertodo { padding: 7px 11px; }
  .nav-btn.modo-vertodo .ic { width: 18px; height: 18px; }
}

/* ----------------------------------------------------------------- porton */

.porton {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  position: relative;
  z-index: 1;
}

.porton-caja { width: 100%; max-width: 380px; text-align: center; }

.porton .medallon {
  width: 108px;
  height: 108px;
  margin: 0 auto 26px;
  display: block;
  filter: drop-shadow(0 0 34px rgba(90, 168, 216, .28));
}

.porton h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.porton .lema {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--texto-tenue);
  margin: 0 0 40px;
}

/* -------------------------------------------------------------- formulario */

.campo { margin-bottom: 14px; text-align: left; }

.campo label {
  display: block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 6px;
}

input[type=text], input[type=password], textarea, select {
  width: 100%;
  padding: 12px 14px;
  background: var(--piedra);
  border: 1px solid var(--piedra-borde);
  border-radius: var(--radio);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--celeste-hondo);
  box-shadow: 0 0 0 3px rgba(90, 168, 216, .14);
}

input::placeholder, textarea::placeholder { color: var(--texto-tenue); }

textarea { resize: vertical; line-height: 1.6; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  background: var(--celeste-hondo);
  color: #fff;
  border: 1px solid var(--celeste);
  border-radius: var(--radio);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.boton:hover { background: var(--celeste); }
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: .45; cursor: not-allowed; }

.boton.fantasma {
  background: transparent;
  color: var(--texto-suave);
  border-color: var(--piedra-borde);
}
.boton.fantasma:hover { color: var(--celeste-claro); border-color: var(--celeste-hondo); }

.boton.angosto { width: auto; padding: 9px 16px; font-size: 13px; }

.aviso {
  padding: 11px 14px;
  border-radius: var(--radio);
  font-size: 14px;
  margin-bottom: 16px;
  border: 1px solid;
}
.aviso.error { background: rgba(224, 122, 122, .08); border-color: rgba(224, 122, 122, .35); color: #f0b3b3; }
.aviso.ok    { background: rgba(111, 207, 151, .08); border-color: rgba(111, 207, 151, .32); color: #a9e5c2; }

.nota-pie {
  margin-top: 26px;
  font-size: 12.5px;
  color: var(--texto-tenue);
  line-height: 1.7;
}

/* ----------------------------------------------------------------- campus */

.encabezado-campus { padding: 46px 0 30px; }
.encabezado-campus h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  margin: 0 0 8px;
  letter-spacing: .01em;
}
.encabezado-campus p { color: var(--texto-suave); margin: 0; max-width: var(--medida); }

.barra-progreso {
  margin-top: 22px;
  height: 3px;
  background: var(--piedra-borde);
  border-radius: 2px;
  overflow: hidden;
  max-width: 420px;
}
.barra-progreso i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--celeste-hondo), var(--celeste-claro));
  border-radius: 2px;
  transition: width .5s ease;
}

.track { margin: 48px 0; }

/* UX 16/09: 48 entre secciones, 16 de la cabecera al contenido; el subtítulo va DEBAJO del título
   (en la misma línea se cortaba a 1024 px) */
.track-cabecera {
  display: flex;
  align-items: baseline;
  gap: 4px 14px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--piedra-borde);
  flex-wrap: wrap;
}
.track-cabecera h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  margin: 0;
  letter-spacing: .04em;
}
.track-cabecera .sub { color: var(--texto-tenue); font-size: 13px; flex: 0 0 100%; order: 3; line-height: 1.45; }
.track-cabecera .cuenta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--texto-suave);
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 14px;
}

/* UX 26/09: el corte que parte la grilla del Track 0 en "los fundamentos" (todos abiertos, sin
   orden) y "el camino" (escalonado). Va como hijo del grid ocupando la fila entera — puesto afuera
   de .rejilla habria hecho falta un grid por tramo, y las columnas de los dos tramos dejaban de
   alinearse entre si. Se llama .tramo y no .corte porque .corte YA EXISTE: es la linea de la
   intro en base.html, y un `.corte` global le metia display:flex, borde y margenes encima. */
.tramo {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 20px 0 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--piedra-borde);
}
.tramo:first-child { margin-top: 0; }
.tramo h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  margin: 0;
  letter-spacing: .04em;
  color: var(--texto);
}
.tramo p { margin: 0; flex: 1 1 240px; font-size: 13px; line-height: 1.45; color: var(--texto-tenue); }
.tramo-cuenta { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--texto-suave); }
/* en el celular la bajada se va sola a su propio renglon (como .track-cabecera .sub): si no,
   el contador quedaba empujado por el parrafo y se cortaba contra el borde ("3" sin el "/8"). */
@media (max-width: 560px) { .tramo p { flex: 0 0 100%; order: 3; } }

.tarjeta {
  display: block;
  position: relative;
  padding: 18px;
  background: var(--piedra);
  border: 1px solid var(--piedra-borde);
  border-radius: var(--radio);
  transition: border-color .18s, transform .18s, background .18s;
  color: inherit;
}
a.tarjeta:hover {
  border-color: var(--celeste-hondo);
  background: var(--piedra-alta);
  transform: translateY(-2px);
  text-decoration: none;
}

.tarjeta .n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--texto-tenue);
  letter-spacing: .1em;
}
.tarjeta h3 {
  font-size: 16px;
  margin: 7px 0 3px;
  font-weight: 600;
  color: var(--texto);
}
.tarjeta .sub { font-size: 13px; color: var(--texto-suave); margin: 0; }
.tarjeta .pie {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
  font-size: 12px;
  color: var(--texto-tenue);
}

.tarjeta.aprobado { border-color: rgba(111, 207, 151, .3); }
.tarjeta.aprobado::after {
  content: attr(data-marca);
  position: absolute;
  top: 14px; right: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ok);
  border: 1px solid rgba(111, 207, 151, .4);
  border-radius: 20px;
  padding: 1px 8px;
}
.tarjeta.cerrado { opacity: .42; }
.tarjeta.cerrado h3 { color: var(--texto-suave); }

.insignia {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--piedra-borde);
  color: var(--texto-tenue);
}
.insignia.activa { color: var(--celeste-claro); border-color: var(--celeste-hondo); }
.insignia.ok     { color: var(--ok); border-color: rgba(111, 207, 151, .4); }

/* ----------------------------------------------------------------- modulo */

.modulo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 34px;
  align-items: start;
  padding-top: 30px;
}

.migas { font-size: 13px; color: var(--texto-tenue); margin-bottom: 10px; }
.migas a { color: var(--texto-suave); }

.modulo h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  margin: 0 0 6px;
  line-height: 1.2;
}
.modulo .bajada { color: var(--texto-suave); margin: 0 0 22px; }

.pestanas {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--piedra-borde);
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.pestanas a {
  padding: 9px 15px;
  font-size: 13.5px;
  color: var(--texto-suave);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.pestanas a:hover { color: var(--texto); text-decoration: none; }
.pestanas a.activa { color: var(--celeste-claro); border-bottom-color: var(--celeste); }

/* ------------------------------------------------------------ video intro */

.video-intro { margin: 0 0 34px; max-width: var(--medida); }
.video-intro video {
  width: 100%;
  border-radius: var(--radio);
  border: 1px solid var(--piedra-borde);
  background: #04060a;
  display: block;
}
.pie-video { font-size: 12.5px; color: var(--texto-tenue); margin: 9px 0 0; }

/* -------------------------------------------------- el texto de estudio */

.lectura {
  max-width: var(--medida);
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--texto);
}
.lectura > *:first-child { margin-top: 0; }

.lectura h1, .lectura h2, .lectura h3, .lectura h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.3;
  color: #eef2f8;
  margin: 2.1em 0 .6em;
}
.lectura h1 { font-size: 27px; }
.lectura h2 {
  font-size: 22px;
  padding-bottom: .35em;
  border-bottom: 1px solid var(--piedra-borde);
}
.lectura h3 { font-size: 18px; font-family: var(--sans); font-weight: 600; }
.lectura h4 { font-size: 15.5px; font-family: var(--sans); font-weight: 600; color: var(--celeste-claro); }

.lectura p { margin: 0 0 1.15em; }
.lectura ul, .lectura ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.lectura li { margin-bottom: .45em; }
.lectura li::marker { color: var(--celeste-hondo); }

.lectura strong { color: #fff; font-weight: 600; }
.lectura em { color: var(--celeste-claro); }

.lectura blockquote {
  margin: 1.5em 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--celeste-hondo);
  color: var(--texto-suave);
  font-style: normal;
}
.lectura blockquote p:last-child { margin-bottom: 0; }

.lectura code {
  font-family: var(--mono);
  font-size: .87em;
  background: var(--piedra-alta);
  border: 1px solid var(--piedra-borde);
  border-radius: 4px;
  padding: .12em .38em;
  color: var(--celeste-claro);
}

.lectura pre {
  background: #04060a;
  border: 1px solid var(--piedra-borde);
  border-radius: var(--radio);
  padding: 15px 17px;
  overflow-x: auto;
  margin: 1.4em 0;
  line-height: 1.55;
}
.lectura pre code {
  background: none;
  border: none;
  padding: 0;
  color: #cfd8e6;
  font-size: 13.5px;
}

/* las tablas del material son anchas: que scrolleen ellas, no la pagina */
.lectura table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 14.5px;
  display: block;
  overflow-x: auto;
}
.lectura th, .lectura td {
  border: 1px solid var(--piedra-borde);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.lectura th { background: var(--piedra-alta); color: #fff; font-weight: 600; }

.lectura hr { border: none; border-top: 1px solid var(--piedra-borde); margin: 2.4em 0; }

.lectura details {
  border: 1px solid var(--piedra-borde);
  border-radius: var(--radio);
  padding: 12px 16px;
  margin: 1.3em 0;
  background: var(--piedra);
}
.lectura summary { cursor: pointer; color: var(--oro); font-weight: 600; }

.lectura a.headerlink { display: none; }

/* --------------------------------------------------------- panel lateral */

/* La barra lateral es sticky: si supera la altura de la ventana, lo de abajo (la caja de
   preguntar a Arctur) queda inalcanzable. Por eso es una columna flex acotada al alto visible y la
   ficha de Arctur absorbe el resto (con un mínimo para que el chat siga siendo usable). */
.panel { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 16px;
  max-height: calc(100vh - 92px); }
.panel > .ficha { flex: none; }

.ficha {
  background: var(--piedra);
  border: 1px solid var(--piedra-borde);
  border-radius: var(--radio);
  padding: 16px;
}
.ficha h4 {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  font-weight: 600;
}
.ficha .dato { display: flex; justify-content: space-between; font-size: 13.5px; padding: 4px 0; }
.ficha .dato span:last-child { color: var(--texto-suave); font-family: var(--mono); font-size: 12.5px; }

audio { width: 100%; margin-top: 4px; filter: invert(.92) hue-rotate(180deg); }

/* ------------------------------------------------------- chat del docente */

.ficha.docente { display: flex; flex-direction: column; height: min(560px, 68vh); }

.docente .cabecera {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--piedra-borde);
}
.docente .cabecera .emblema { width: 17px; height: 17px; color: var(--celeste); }
.docente .cabecera b { font-size: 13.5px; font-weight: 600; }
.docente .cabecera .estado { margin-left: auto; font-size: 10.5px; color: var(--texto-tenue); font-family: var(--mono); }

.hilo {
  flex: 1;
  overflow-y: auto;
  padding: 14px 2px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  scrollbar-width: thin;
  scrollbar-color: var(--piedra-borde) transparent;
}

.burbuja { font-size: 14.5px; line-height: 1.65; max-width: 100%; }
.burbuja.alumno {
  align-self: flex-end;
  background: var(--piedra-alta);
  border: 1px solid var(--piedra-borde);
  border-radius: 12px 12px 3px 12px;
  padding: 9px 13px;
  max-width: 88%;
}
.burbuja.docente { color: var(--texto); padding-left: 13px; border-left: 2px solid var(--celeste-hondo); }
.burbuja.docente p { margin: 0 0 .7em; }
.burbuja.docente p:last-child { margin-bottom: 0; }
.burbuja.docente code {
  font-family: var(--mono);
  font-size: .87em;
  background: var(--piedra-alta);
  padding: .1em .35em;
  border-radius: 4px;
  color: var(--celeste-claro);
}
.burbuja.docente pre {
  background: #04060a;
  border: 1px solid var(--piedra-borde);
  border-radius: 8px;
  padding: 11px 13px;
  overflow-x: auto;
  font-size: 13px;
}
.burbuja.error { color: var(--error); font-size: 13.5px; }

.escribiendo::after {
  content: "▍";
  animation: latir 1s steps(2) infinite;
  color: var(--celeste);
}
@keyframes latir { 50% { opacity: 0; } }

.decir { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--piedra-borde); }
.decir textarea {
  flex: 1;
  min-height: 42px;
  max-height: 130px;
  padding: 10px 12px;
  font-size: 14px;
  resize: none;
}
.decir button {
  flex: none;
  width: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 17px;
}

.vacio-docente { color: var(--texto-tenue); font-size: 13.5px; line-height: 1.7; }

/* ----------------------------------------------------------------- examen */

.examen { max-width: 860px; margin: 0 auto; padding-top: 30px; }

.regimen {
  background: rgba(216, 184, 119, .06);
  border: 1px solid rgba(216, 184, 119, .28);
  border-radius: var(--radio);
  padding: 15px 18px;
  margin-bottom: 26px;
  font-size: 14px;
  color: #e8d5a8;
}
.regimen b { color: var(--oro); }

.consignas {
  background: var(--piedra);
  border: 1px solid var(--piedra-borde);
  border-radius: var(--radio);
  padding: 24px 28px;
  margin-bottom: 26px;
}

#hoja { min-height: 320px; font-family: var(--mono); font-size: 14px; line-height: 1.7; }

.resultado { margin-top: 26px; }

.marcador {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 20px 24px;
  border-radius: var(--radio);
  border: 1px solid;
  margin-bottom: 18px;
}
.marcador .nota { font-family: var(--serif); font-size: 42px; line-height: 1; }
.marcador.aprobado { background: rgba(111, 207, 151, .07); border-color: rgba(111, 207, 151, .38); }
.marcador.aprobado .nota { color: var(--ok); }
.marcador.reprobado { background: rgba(224, 122, 122, .06); border-color: rgba(224, 122, 122, .32); }
.marcador.reprobado .nota { color: var(--error); }

.correccion { display: grid; gap: 9px; }
.correccion .item {
  display: flex;
  gap: 11px;
  padding: 11px 14px;
  background: var(--piedra);
  border: 1px solid var(--piedra-borde);
  border-radius: 8px;
  font-size: 14px;
}
.correccion .item .marca { font-family: var(--mono); flex: none; }
.correccion .item.bien .marca { color: var(--ok); }
.correccion .item.mal .marca { color: var(--error); }
/* la marca la decide el estado (UX 28/09): antes el JS escribia el glifo */
.correccion .item.bien .marca::before { content: "\2713\00a0"; }
.correccion .item.mal .marca::before { content: "\2717\00a0"; }

/* ----------------------------------------------------------------- rector */

.lista-rector { display: grid; gap: 8px; }
.fila {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 15px;
  background: var(--piedra);
  border: 1px solid var(--piedra-borde);
  border-radius: 8px;
  font-size: 14px;
}
.fila .codigo { font-family: var(--mono); color: var(--celeste-claro); }
.fila .meta { color: var(--texto-tenue); font-size: 12.5px; }
.fila > :first-child { min-width: 0; }
.fila > :first-child .meta { overflow-wrap: anywhere; }  /* una nota larga sin espacios no rompe la fila */

.cadena { display: grid; gap: 7px; }
.eslabon {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  background: var(--piedra);
  border: 1px solid var(--piedra-borde);
  border-radius: 8px;
  font-size: 13.5px;
}
.eslabon .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-tenue); flex: none; }
.eslabon.activo .punto { background: var(--ok); box-shadow: 0 0 9px rgba(111, 207, 151, .6); }
.eslabon.frio .punto { background: var(--alerta); }
.eslabon .modelo { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--texto-tenue); }

/* ---------------------------------------------------------------- angosto */

/* el minmax(0,...) es clave: sin el min 0, un <pre> o tabla ancha del manual
   estira la columna mas alla del viewport y se corta todo el texto por la derecha */
.modulo > * { min-width: 0; }

@media (max-width: 1000px) {
  .modulo { grid-template-columns: minmax(0, 1fr); }
  .panel { position: static; }
  .ficha.docente { height: 460px; }
}

@media (max-width: 620px) {
  .marco { padding: 0 16px 60px; }
  .barra { padding: 12px 16px; }
  .modulo h1 { font-size: 25px; }
  .lectura { font-size: 16px; }
  .rejilla { grid-template-columns: 1fr; }
  .consignas { padding: 18px; }
  /* /rector: las filas de 3 columnas (alumno | progreso | barra, código | estado | acciones)
     desbordaban el viewport (416px en 390). La 3ª columna baja a una segunda línea. */
  .fila { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; min-width: 0; }
  .fila > * { min-width: 0; }
  .fila > :nth-child(3) { grid-column: 1 / -1; justify-self: end; }
  .fila .codigo { word-break: break-all; font-size: 13px; }  /* UX e2: el código entero en una línea junto a "usada por…" */
}

/* resaltado de codigo (codehilite) */
.codigo .k, .codigo .kd, .codigo .kn { color: #c792ea; }
.codigo .s, .codigo .s1, .codigo .s2 { color: #c3e88d; }
.codigo .c, .codigo .c1, .codigo .cm { color: var(--texto-tenue); font-style: italic; }
.codigo .nb, .codigo .nf { color: #82aaff; }
.codigo .mi, .codigo .mf { color: #f78c6c; }

/* ==========================================================================
   MARCA ACADEMIA SECRETA (logo oficial) + INTRO animada
   Logo: letras AS blancas + ojo-en-estrella celeste. Fondo obsidiana.
   La intro replica el gesto de apertura de Highjump (compuerta + corte
   celeste + barrido del wordmark), adaptado al logo. Una vez por pestaña.
   ========================================================================== */

/* logo en la barra superior */
.barra .marca-simbolo { height: 40px; width: auto; flex: none; display: block;
  filter: drop-shadow(0 0 10px rgba(90, 168, 216, .25)); }

/* logo grande del porton de entrada */
.porton .logo-porton { width: min(340px, 78vw); height: auto; display: block;
  margin: 0 auto 22px; filter: drop-shadow(0 0 46px rgba(90, 168, 216, .22)); }
/* simbolo en la pantalla de iniciacion */
.porton .simbolo-inic { width: min(220px, 60vw); height: auto; display: block;
  margin: 0 auto 20px; filter: drop-shadow(0 0 40px rgba(216, 184, 119, .20)); }

/* --------------------------------------------------- "La señal" (intro en video, una vez) */
.intro-senal { position: fixed; inset: 0; z-index: 400; background: #000; display: grid;
  place-items: center; transition: opacity .8s ease; }
.intro-senal.off { opacity: 0; pointer-events: none; }
.intro-senal video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.intro-senal-tocar { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; width: 100%; height: 100%;
  background: rgba(0, 0, 0, .78); border: 0; cursor: pointer; font-family: inherit; color: var(--texto);
  -webkit-tap-highlight-color: transparent; }
.intro-senal-tocar img { width: min(160px, 40vw); filter: drop-shadow(0 0 40px rgba(90, 168, 216, .35));
  animation: as-latido-suave 2.4s ease-in-out infinite; }
.intro-senal-tocar .grande { font-family: var(--serif); font-size: clamp(20px, 3.4vw, 30px);
  letter-spacing: .02em; margin-top: 10px; }
.intro-senal-tocar .chico { font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--texto-tenue); }
@keyframes as-latido-suave { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .intro-senal-tocar img { animation: none; } }
/* Saltar: z-index POR ENCIMA de .intro-senal-tocar, que ocupa los 4 costados de la pantalla —
   si quedara debajo, el pedido de toque lo taparía justo cuando más falta hace la salida. */
.intro-senal-saltar { position: absolute; z-index: 2; right: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vw, 28px); padding: 9px 16px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--texto-tenue); background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(4px); transition: color .2s ease, border-color .2s ease, background .2s ease; }
.intro-senal-saltar:hover, .intro-senal-saltar:focus-visible {
  color: var(--texto); border-color: rgba(255, 255, 255, .5); background: rgba(0, 0, 0, .75); }

/* ------------------------------------------------------------------- intro */
.as-intro { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: var(--obsidiana); transition: visibility 1s; }
.as-intro.off { visibility: hidden; pointer-events: none; }

.as-intro .hoja { position: absolute; left: 0; right: 0; height: 50.5%;
  background: var(--obsidiana); z-index: 1;
  transition: transform 1s cubic-bezier(.76, 0, .24, 1); }
.as-intro .hoja.arr { top: 0; } .as-intro .hoja.aba { bottom: 0; }
.as-intro.off .hoja.arr { transform: translateY(-100%); }
.as-intro.off .hoja.aba { transform: translateY(100%); }

.as-intro .corte { position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  transform: scaleX(0); z-index: 2; opacity: 1;
  background: linear-gradient(90deg, transparent, var(--celeste), transparent);
  transition: transform .5s ease, opacity .35s .55s; }
.as-intro.off .corte { transform: scaleX(1); opacity: 0; }

.as-intro .intro-in { position: relative; z-index: 3; display: flex; flex-direction: column;
  align-items: center; gap: 22px; padding: 0 24px;
  transition: opacity .45s ease, transform .65s ease; }
.as-intro.off .intro-in { opacity: 0; transform: scale(1.08); }

.as-intro .simbolo-wrap { position: relative; display: grid; place-items: center; }
.as-intro .simbolo { width: min(420px, 72vw); display: block; position: relative; z-index: 2;
  opacity: 0; animation: as-cae 1.15s cubic-bezier(.16, .84, .3, 1.06) .2s forwards; }
@keyframes as-cae {
  from { opacity: 0; transform: translateY(-165%) scale(.92); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0) scale(1); } }

.as-intro .halo { position: absolute; z-index: 1; width: 46%; aspect-ratio: 1; border-radius: 50%;
  transform: translateY(-6%); filter: blur(2px); opacity: 0;
  background: radial-gradient(circle, rgba(90,168,216,.55), rgba(90,168,216,.12) 45%, transparent 70%);
  animation: as-latido 2.4s ease 1s forwards; }
@keyframes as-latido {
  0%   { opacity: 0;  transform: translateY(-6%) scale(.5); }
  22%  { opacity: 1;  transform: translateY(-6%) scale(1.12); }
  40%  { opacity: .55; transform: translateY(-6%) scale(.98); }
  70%  { opacity: .8; transform: translateY(-6%) scale(1.05); }
  100% { opacity: .6; transform: translateY(-6%) scale(1); } }

.as-intro .wordmark { width: min(440px, 80vw); display: block;
  opacity: 0; animation: as-barrido 1s cubic-bezier(.5, 0, .15, 1) 1.3s forwards; }
@keyframes as-barrido {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 -2% 0 0); } }

.as-intro .intro-linea { width: min(220px, 44vw); height: 1px; background: var(--celeste);
  opacity: .5; transform: scaleX(0); animation: as-linea .7s ease 1.85s forwards; }
@keyframes as-linea { to { transform: scaleX(1); } }

.as-intro .intro-claim { font-family: var(--serif); font-style: italic; font-size: 14px;
  letter-spacing: .04em; color: var(--texto-suave); opacity: 0;
  animation: as-sube .9s ease 2.05s forwards; }
@keyframes as-sube { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }

.as-intro .saltar { position: fixed; bottom: 26px; right: 26px; z-index: 301; background: none;
  border: 0; font-family: inherit; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--texto-tenue); cursor: pointer; padding: 10px; }
.as-intro .saltar:hover { color: var(--texto); }

@media (prefers-reduced-motion: reduce) {
  .as-intro .simbolo, .as-intro .halo, .as-intro .wordmark,
  .as-intro .intro-linea, .as-intro .intro-claim {
    animation: none; opacity: 1; clip-path: none; transform: none; }
}

/* botón "Salir" con apariencia de link (el logout va por POST, anti-CSRF) */
.barra nav .salir-link { cursor: pointer; }

/* Botones rápidos por invitación (copiar link / WhatsApp) */
.acciones-inv { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.mini-accion {
  font-family: var(--mono); font-size: 11.5px; line-height: 1; white-space: nowrap;
  color: var(--celeste-claro); background: rgba(90,168,216,.10);
  border: 1px solid rgba(90,168,216,.35); border-radius: 7px; padding: 6px 11px;
  cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s;
}
.mini-accion:hover { background: rgba(90,168,216,.20); border-color: rgba(90,168,216,.6); text-decoration: none; }
.mini-accion.ok { color: #7fd88f; border-color: rgba(127,216,143,.55); background: rgba(127,216,143,.12); }
.mini-accion.peligro { color: #9aa3ad; border-color: rgba(154,163,173,.3); background: transparent; }
.mini-accion.peligro:hover, .mini-accion.peligro.armado {
  color: #ff8a8a; border-color: rgba(255,138,138,.6); background: rgba(255,138,138,.12); }

/* ==================== Economía · Dharma Coins ==================== */

/* chip de la barra */
.billetera-chip { display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--mono); font-size: 13px; padding: 5px 12px; border-radius: 999px;
  background: rgba(90,168,216,.08); border: 1px solid var(--piedra-borde); color: var(--texto); }
.billetera-chip:hover { text-decoration: none; border-color: var(--celeste-hondo); }
.billetera-chip small { color: var(--texto-tenue); font-size: 10px; }
.billetera-chip .bc-coins { color: var(--oro); }
.billetera-chip .bc-sep { color: var(--texto-tenue); }
/* el título equipado se recorta con puntos suspensivos en vez de pisar el avatar (pedido de Jano 15/09) */
.billetera-chip .bc-avatar { flex: none; margin-right: 4px; } /* el marco (box-shadow) sale del cuadro de la img */
.billetera-chip .bc-titulo { max-width: 12ch; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .billetera-chip .bc-titulo { display: none; } }

/* billetera grande */
.camara-billetera { display: grid; grid-template-columns: 1fr 1fr 2fr 1.1fr; gap: 16px;
  margin: 30px 0 10px; align-items: stretch; }
@media (max-width: 720px) { .camara-billetera { grid-template-columns: 1fr 1fr; } }
.bill-cifra { background: var(--piedra); border: 1px solid var(--piedra-borde);
  border-radius: var(--radio); padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.bill-cifra .bill-num { font-family: var(--serif); font-size: 34px; line-height: 1; }
.bill-cifra.oro .bill-num { color: var(--oro); }
.bill-cifra .bill-lbl { font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--texto-tenue); }
.bill-rango { background: var(--piedra); border: 1px solid var(--piedra-borde);
  border-radius: var(--radio); padding: 22px; }
@media (max-width: 720px) { .bill-rango { grid-column: 1 / -1; } }
.bill-rango .rango-nombre { font-family: var(--serif); font-size: 20px; color: var(--celeste-claro); }

/* ranking */
.ranking { display: flex; flex-direction: column; gap: 2px; }
.rk-fila { display: grid; grid-template-columns: 42px 1fr 1.3fr auto; gap: 10px;
  align-items: center; padding: 11px 14px; border-radius: 8px; background: var(--piedra);
  border: 1px solid transparent; font-size: 14px; }
.rk-fila.rk-cab { background: transparent; color: var(--texto-tenue); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; padding: 4px 14px; }
.rk-fila.yo { border-color: var(--celeste-hondo); background: rgba(90,168,216,.10); }
/* toda la fila es el link al perfil (pedido de Jano 15/09: "es difícil hacerle clic"); al pasar,
   se iluminan el nombre y la foto para invitar a entrar */
a.rk-fila { color: inherit; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s; }
a.rk-fila:hover, a.rk-fila:focus-visible { text-decoration: none; background: rgba(90,168,216,.14); border-color: rgba(90,168,216,.45); outline: none; }
a.rk-fila:hover .rk-nombre > span:first-child, a.rk-fila:focus-visible .rk-nombre > span:first-child { color: var(--celeste-claro); text-decoration: underline; text-underline-offset: 3px; }
a.rk-fila:hover .rk-avatar, a.rk-fila:focus-visible .rk-avatar { box-shadow: 0 0 0 2px var(--celeste), 0 0 14px rgba(90,168,216,.7); }
.rk-fila .rk-link { color: inherit; text-decoration: none; }
.rk-puesto { font-family: var(--mono); color: var(--texto-suave); }
.rk-alias { font-weight: 600; min-width: 0; white-space: nowrap; }
/* el recorte por ellipsis va en el nombre, no en la celda: con overflow hidden en .rk-alias
   la celda cortaba el marco/resplandor del avatar (se veía un cuadrado). */
.rk-nombre > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.rk-alias small { color: var(--celeste); font-weight: 400; }
.rk-rango { color: var(--texto-suave); font-size: 12.5px; }
.rk-val { font-family: var(--mono); text-align: right; white-space: nowrap; }
.rk-val small { color: var(--texto-tenue); font-size: 10px; }
.rk-val .rk-coins { color: var(--oro); margin-left: 8px; }
.rk-cab .rk-val { font-family: var(--sans); }
@media (max-width: 640px) {
  .rk-fila { grid-template-columns: 30px 1fr auto; gap: 8px; padding: 10px 12px; font-size: 13px; }
  .rk-rango { display: none; }
}

/* icono Dharma Coin */
.coin { height: 1em; width: auto; vertical-align: -0.16em; display: inline-block; }
.coin-lg { height: 0.92em; vertical-align: -0.06em; }
.coin-slot { height: 34px; width: 34px; opacity: .5; }

/* tienda */
.tienda-vidriera { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
.vidriera-slot { aspect-ratio: 4/3; border: 1px dashed var(--piedra-borde); border-radius: var(--radio);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(255,255,255,.012) 10px, rgba(255,255,255,.012) 20px); }
.vidriera-slot .candado { font-size: 26px; color: var(--texto-tenue); }
.vidriera-slot .vidriera-txt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-tenue); }

/* ==================== Avatares / insignias de rango ==================== */

/* avatar en el chip de la barra */
.billetera-chip { align-items: center; }
.bc-avatar { height: 24px; width: 24px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 1px var(--piedra-borde); background: var(--obsidiana); }

/* avatar en cada fila del ranking */
.rk-alias { display: flex; align-items: center; gap: 9px; }
.rk-avatar { height: 26px; width: 26px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 1px var(--piedra-borde); background: var(--obsidiana); }

/* insignia grande en la billetera (tarjeta de rango) */
.bill-rango { display: flex; gap: 18px; align-items: center; }
.bill-rango-txt { min-width: 0; flex: 1; }
.rango-avatar { width: 88px; height: 88px; flex: none;
  filter: drop-shadow(0 0 18px rgba(90,168,216,.28)); }

/* el cajón de insignias */
.avatares-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 14px; }
.avatar-slot { background: var(--piedra); border: 1px solid var(--piedra-borde);
  border-radius: var(--radio); padding: 16px 12px; display: flex; flex-direction: column;
  align-items: center; gap: 6px; text-align: center; }
.avatar-slot.equipado { border-color: var(--celeste-hondo); background: rgba(90,168,216,.08); }
.avatar-slot.bloqueado { opacity: .55; }
.avatar-slot.bloqueado .av-img { filter: grayscale(1) brightness(.7); }
.av-img { width: 96px; height: 96px; }
.av-nombre { font-family: var(--serif); font-size: 15px; color: var(--celeste-claro); line-height: 1.2; }
.av-grado { font-size: 11px; color: var(--texto-tenue); }
.av-estado { font-size: 11px; color: var(--texto-tenue); margin-top: 2px; }
.av-estado.eq { color: var(--celeste-claro); }

/* ==================== La Senda de la Orden (4 fases) ==================== */
.fases-senda { display: flex; flex-direction: column; gap: 14px; }
.fase-bloque { border: 1px solid var(--piedra-borde); border-radius: var(--radio);
  background: var(--piedra); padding: 16px 18px; }
.fase-bloque.activa { border-color: var(--celeste-hondo); background: rgba(90,168,216,.05); }
.fase-bloque.bloqueada { opacity: .72; }
.fase-cab { display: flex; align-items: center; gap: 14px; }
.fase-bloque.activa .fase-cab { margin-bottom: 16px; }
.fase-num { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--oro); border: 1px solid rgba(216,184,119,.35); border-radius: 999px;
  padding: 4px 10px; flex: none; }
.fase-tit { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fase-tit strong { font-family: var(--serif); font-weight: 400; font-size: 17px;
  color: var(--celeste-claro); line-height: 1.2; }
.fase-estado { font-size: 11.5px; color: var(--texto-tenue); display: inline-flex;
  align-items: center; gap: 5px; flex: none; }
.fase-estado.activa { color: var(--celeste-claro); }
.fase-estado .ic { width: 14px; height: 14px; }
.fase-sellada { display: flex; align-items: center; gap: 12px; padding: 6px 2px 2px; color: var(--texto-tenue); }
.ic-sello-fase { width: 26px; height: 26px; color: var(--texto-tenue); flex: none; }

/* ==================== El Cofre del Día ==================== */
.cofre-caja { border: 1px solid var(--piedra-borde); border-radius: var(--radio);
  background: var(--piedra); padding: 22px; display: flex; flex-direction: column;
  align-items: center; gap: 12px; text-align: center; }
.cofre-caja.abierto { opacity: .7; }
.cofre-ic { color: var(--oro); display: inline-flex; }
.cofre-ic .ic { width: 46px; height: 46px; }
.cofre-cong { color: var(--celeste-claro); }

/* ---------- Overlay de apertura del cofre (estilo cofre-recompensa) ---------- */
.cofre-overlay { position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, rgba(20,32,48,.86), rgba(3,5,9,.96));
  backdrop-filter: blur(3px); animation: cofre-fade .25s ease; }
@keyframes cofre-fade { from { opacity: 0; } to { opacity: 1; } }
.cofre-esc { position: absolute; inset: 0; }
.cofre-escena { position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 20px; z-index: 2; padding: 20px; }

/* rayos de luz detrás del cofre */
.cofre-rayos { position: absolute; top: -30px; left: 50%; width: 380px; height: 380px;
  transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity .3s; }
.cofre-rayos.on { opacity: 1; }
.cofre-rayos.on::before { content: ""; position: absolute; inset: 0;
  background: conic-gradient(from 0deg, transparent 0 8deg, rgba(216,184,119,.22) 9deg 12deg,
    transparent 13deg 20deg, rgba(90,168,216,.20) 21deg 24deg, transparent 25deg 32deg);
  border-radius: 50%; animation: cofre-girar 9s linear infinite; }
.cofre-rayos.on::after { content: ""; position: absolute; inset: 60px;
  background: radial-gradient(circle, rgba(216,184,119,.55), transparent 68%);
  border-radius: 50%; animation: cofre-latido 1.6s ease-in-out infinite; }
@keyframes cofre-girar { to { transform: rotate(360deg); } }
@keyframes cofre-latido { 0%,100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }

/* el cofre */
.cofre-3d { position: relative; z-index: 3; color: var(--oro); cursor: pointer;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.6)); transition: transform .15s; }
.cofre-3d .ic, .cofre-ic-grande .ic { width: 150px; height: 150px; }
.cofre-ic-grande { display: inline-flex; color: var(--oro); }
.cofre-3d.temblar { animation: cofre-temblar 1.1s ease-in-out infinite; }
.cofre-3d.temblar:hover { transform: scale(1.05); }
.cofre-3d.cargar { animation: cofre-cargar .5s cubic-bezier(.5,-0.6,.5,1.6) forwards; }
.cofre-3d.abierto { animation: cofre-estallar .5s cubic-bezier(.2,.9,.3,1.4) forwards; }
@keyframes cofre-temblar {
  0%,100% { transform: rotate(0) translateY(0); }
  20% { transform: rotate(-4deg) translateY(-2px); }
  40% { transform: rotate(4deg) translateY(0); }
  60% { transform: rotate(-3deg) translateY(-3px); }
  80% { transform: rotate(3deg) translateY(0); } }
@keyframes cofre-cargar {
  0% { transform: scale(1); }
  60% { transform: scale(.82) translateY(6px); }
  100% { transform: scale(.9); } }
@keyframes cofre-estallar {
  0% { transform: scale(.9); }
  45% { transform: scale(1.35) translateY(-8px); filter: drop-shadow(0 0 40px rgba(216,184,119,.9)) brightness(1.5); }
  100% { transform: scale(1.12) translateY(-4px); filter: drop-shadow(0 0 22px rgba(216,184,119,.5)); } }

.cofre-tap { color: var(--texto-suave); font-size: 14px; letter-spacing: .04em;
  animation: cofre-parpadeo 1.4s ease-in-out infinite; margin: 0; }
@keyframes cofre-parpadeo { 0%,100% { opacity: .4; } 50% { opacity: 1; } }

/* premios que salen del cofre */
.cofre-premios { display: flex; flex-direction: column; gap: 12px; align-items: center;
  min-height: 10px; z-index: 3; }
.cofre-premio { display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px; opacity: 0;
  background: var(--piedra-alta); border: 1px solid var(--piedra-borde);
  font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--texto);
  animation: cofre-salir .55s cubic-bezier(.2,.9,.3,1.5) forwards; }
.cofre-premio.coins { color: var(--oro); border-color: rgba(216,184,119,.4); }
.cofre-premio.puntos { color: var(--celeste-claro); border-color: rgba(90,168,216,.4); }
.cofre-premio.cong { color: var(--celeste-claro); border-color: rgba(90,168,216,.4); }
.cofre-premio .cofre-lbl { font-family: var(--sans, inherit); font-size: 14px; font-weight: 400;
  color: var(--texto-suave); }
.cofre-premio .coin-lg { width: 30px; height: 30px; }
.cofre-premio-txt { color: var(--texto-suave); }
@keyframes cofre-salir {
  0% { opacity: 0; transform: translateY(30px) scale(.6); }
  70% { transform: translateY(-6px) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); } }

.cofre-cerrar { margin-top: 6px; z-index: 3; }

/* chispas del estallido */
.cofre-chispa { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px;
  border-radius: 2px; transform: translate(-50%,-50%);
  animation: cofre-chispa var(--t,.8s) ease-out forwards; }
@keyframes cofre-chispa {
  0% { opacity: 1; transform: translate(-50%,-50%) rotate(var(--a)) translateY(0) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--d,120px) * -1)) scale(.2); } }

/* regalo de la Orden (overlay global, reusa la escena del cofre) */
.regalo-titulo { font-family: var(--serif); font-size: 30px; color: var(--oro); margin: 0 0 6px;
  letter-spacing: .02em; text-align: center; z-index: 3; }
.regalo-texto { color: var(--texto-suave); max-width: 420px; text-align: center; margin: 0;
  line-height: 1.5; z-index: 3; }

@media (max-width: 640px) {
  .regalo-titulo { font-size: 24px; }
  .cofre-3d .ic, .cofre-ic-grande .ic { width: 112px; height: 112px; }
  .cofre-rayos { width: 300px; height: 300px; }
  .cofre-premio { font-size: 22px; padding: 10px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .cofre-3d.temblar, .cofre-rayos.on::before, .cofre-rayos.on::after, .cofre-tap,
  .cofre-3d.abierto, .cofre-3d.cargar { animation: none; }
  /* sin la animación de entrada, los premios deben verse igual (nacen en opacity:0) */
  .cofre-premio { opacity: 1 !important; animation: none !important; }
}

/* ==================== Ajustes de juego (rector) ==================== */
.ajustes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
  gap: 12px; align-items: end; }
.ajuste { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texto-tenue); }
.ajuste input { padding: 8px 10px; }

/* ==================== Iconos premium (SVG inline) ==================== */
.ic { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.17em; flex: none; }
.ic-fuego { color: var(--oro); }
.racha-linea { display: inline-flex; align-items: center; gap: 5px; }
.av-estado { display: inline-flex; align-items: center; gap: 5px; }
.av-estado .ic { color: var(--oro); }

/* ==================== Misiones semanales ==================== */
.misiones-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 12px; }
.mision { background: var(--piedra); border: 1px solid var(--piedra-borde); border-radius: var(--radio);
  padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.mision.completa { border-color: var(--celeste-hondo); background: rgba(90,168,216,.07); }
.mision-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mision-cab strong { font-family: var(--serif); font-weight: 400; font-size: 16px; color: var(--celeste-claro); }
.mision-check { color: var(--oro); display: inline-flex; }
.mision-check .ic { width: 18px; height: 18px; }
.mision-barra { margin: 2px 0; }
.mision-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ==================== Medallas / logros ==================== */
.logros-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 12px; }
.logro { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  background: var(--piedra); border: 1px solid var(--piedra-borde); border-radius: var(--radio); }
.logro.ganado { border-color: var(--celeste-hondo); background: rgba(90,168,216,.07); }
.logro:not(.ganado) { opacity: .6; }
.logro-ic { line-height: 1; flex: none; width: 36px; height: 36px;
  display: grid; place-items: center; border-radius: 50%; background: var(--piedra-alta);
  color: var(--texto-tenue); }
.logro-ic .ic { width: 19px; height: 19px; vertical-align: middle; }
.logro.ganado .logro-ic { color: var(--oro); background: rgba(216,184,119,.12); }
.logro-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.logro-txt strong { color: var(--celeste-claro); font-family: var(--serif); font-weight: 400; font-size: 16px; }
.logro.ganado .logro-txt strong { color: #eef2f8; }
.logro-premio { font-family: var(--mono); font-size: 11.5px; color: var(--texto-tenue); margin-top: 2px; }

/* ==================== Responsive global (mobile) ==================== */
@media (max-width: 640px) {
  .marco { padding: 0 16px 60px; }

  /* barra: logo arriba, nav a lo ancho abajo (no desborda) */
  .barra { flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; }
  .barra .marca { font-size: 12.5px; letter-spacing: .10em; }
  .barra .marca small { font-size: 9px; letter-spacing: .20em; }
  .barra .marca-simbolo { height: 32px; }
  /* nav en UNA fila desplazable (la regla general está en el breakpoint de 1180px) */
  .barra nav { gap: 5px; font-size: 13px; }
  .nav-btn { padding: 8px 11px; font-size: 13px; }
  .nav-btn .ic { width: 15px; height: 15px; }

  .encabezado-campus { padding: 28px 0 18px; }
  .encabezado-campus h1 { font-size: 23px; }
  .encabezado-campus p { font-size: 14.5px; }

  /* billetera de La Cámara */
  .camara-billetera { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .bill-cifra { padding: 16px; }
  .bill-cifra .bill-num { font-size: 26px; }
  .bill-rango { padding: 18px; }

  /* tiendas y tarjetas */
  .tienda-vidriera { grid-template-columns: repeat(2, 1fr); }
  .avatares-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .rango-avatar { width: 64px; height: 64px; }
  .bill-rango { gap: 12px; }
  .track { margin: 34px 0; }
  .track-cabecera h2 { font-size: 19px; }
}

@media (max-width: 380px) {
  .camara-billetera { grid-template-columns: 1fr; }
}

/* fila del rector en el ranking: la cima de la Orden, siempre #1 */
.rk-fila.rector {
  background: linear-gradient(90deg, rgba(216,184,119,.12), transparent);
  border-left: 3px solid var(--oro);
}
.rk-fila.rector .rk-alias { color: var(--oro); font-weight: 600; }
.rk-fila.rector .rk-puesto { color: var(--oro); display: inline-flex; align-items: center; }
.rk-fila.rector .ic-mini { width: 16px; height: 16px; }
.rk-cima { color: var(--oro); font-family: var(--serif); letter-spacing: .02em; }

/* ==========================================================================
   La Arena — quiz cronometrado
   ========================================================================== */
.arena-panel {
  border: 1px solid var(--piedra-borde);
  border-radius: var(--radio);
  background: var(--piedra);
  padding: 26px;
}

/* pantalla de entrada */
.arena-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.arena-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 10px;
  background: var(--piedra-alta);
  border: 1px solid var(--piedra-borde);
  border-radius: var(--radio);
}
.arena-stat-num {
  font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--texto);
  display: inline-flex; align-items: center; gap: 6px;
}
.arena-stat.oro .arena-stat-num { color: var(--oro); }
.arena-stat-lbl { font-size: 12px; color: var(--texto-tenue); letter-spacing: .04em; }
.arena-nivel-nota { margin: 0 0 20px; }
.arena-empezar { font-size: 15px; padding: 13px 26px; }

/* HUD del juego */
.arena-hud {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.arena-progreso {
  font-family: var(--mono, monospace); font-size: 14px; color: var(--texto-suave);
  letter-spacing: .06em;
}

/* cronómetro */
.arena-cronometro {
  height: 8px; border-radius: 999px; background: var(--piedra-alta);
  overflow: hidden; margin-bottom: 22px;
  border: 1px solid var(--piedra-borde);
}
.arena-cronometro i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--celeste-hondo), var(--celeste));
  border-radius: 999px;
}
.arena-cronometro i.urgente {
  background: linear-gradient(90deg, #a34, var(--error));
}

.arena-enunciado {
  font-family: var(--serif); font-size: 20px; line-height: 1.4;
  color: var(--texto); margin: 0 0 22px; max-width: var(--medida);
}
.arena-opciones { display: grid; gap: 10px; }
.arena-op {
  text-align: left; width: 100%;
  padding: 15px 18px;
  background: var(--piedra-alta);
  border: 1px solid var(--piedra-borde);
  border-radius: var(--radio);
  color: var(--texto); font-size: 15px; line-height: 1.35;
  cursor: pointer; transition: border-color .12s, background .12s, transform .05s;
}
.arena-op:hover:not(:disabled) { border-color: var(--celeste-hondo); background: #101522; }
.arena-op:active:not(:disabled) { transform: translateY(1px); }
.arena-op.elegida { border-color: var(--celeste); background: var(--celeste-hondo); color: #fff; }
.arena-op:disabled { cursor: default; }

/* resultado */
.arena-fin-cab {
  display: flex; align-items: baseline; justify-content: center; gap: 22px;
  margin-bottom: 8px;
}
.arena-fin-score { font-family: var(--serif); font-size: 42px; font-weight: 700; color: var(--texto); }
.arena-fin-coins { font-family: var(--serif); font-size: 26px; color: var(--oro);
  display: inline-flex; align-items: center; gap: 6px; }
#arena-fin-msg { text-align: center; margin: 0 0 24px; }

.arena-repaso { display: grid; gap: 14px; margin-bottom: 24px; }
.arena-rep {
  border: 1px solid var(--piedra-borde); border-left-width: 3px;
  border-radius: var(--radio); padding: 14px 16px; background: var(--piedra-alta);
}
.arena-rep.ok  { border-left-color: var(--ok); }
.arena-rep.mal { border-left-color: var(--error); }
.arena-rep-q { font-size: 14.5px; color: var(--texto); margin-bottom: 10px; display: flex; gap: 10px; }
.arena-rep-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--piedra); border: 1px solid var(--piedra-borde);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--texto-tenue);
}
.arena-rep-op {
  font-size: 13.5px; color: var(--texto-suave);
  padding: 7px 12px; border-radius: 7px; margin-left: 32px;
}
.arena-rep-op + .arena-rep-op { margin-top: 4px; }
.arena-rep-op.correcta { color: var(--ok); background: rgba(111, 207, 151, .10); font-weight: 600; }
.arena-rep-op.tuya-mal { color: var(--error); background: rgba(224, 122, 122, .10);
  text-decoration: line-through; }
.arena-fin-acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 640px) {
  .arena-panel { padding: 18px; }
  .arena-stat-num { font-size: 23px; }
  .arena-enunciado { font-size: 18px; }
  .arena-fin-score { font-size: 34px; }
  .arena-rep-op { margin-left: 0; }
  .arena-rep-q { margin-bottom: 8px; }
}

/* ==================== Duelos ==================== */
.nav-duelos { position: relative; }
.nav-badge {
  display: inline-block; margin-left: 6px; min-width: 18px; padding: 1px 6px;
  font: 600 11px/16px var(--mono); text-align: center; color: #1a1408;
  background: var(--oro, #d8b877); border-radius: 999px; vertical-align: 1px;
}
.duelo-retar { margin-top: 14px; }
.duelo-retar-fila { display: flex; gap: 10px; align-items: stretch; margin: 6px 0 8px; flex-wrap: wrap; }
.duelo-retar-fila input {
  flex: 1 1 160px; min-width: 0; padding: 11px 14px; font: inherit; font-size: 15px;
  color: var(--texto); background: rgba(255,255,255,.04); border: 1px solid var(--piedra-borde);
  border-radius: var(--radio); outline: none;
}
.duelo-retar-fila input:focus { border-color: rgba(90,168,216,.6); }
.duelo-retar-fila .boton { width: auto; flex: none; }
.duelo-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 2px; border-top: 1px solid var(--piedra-borde); flex-wrap: wrap;
}
.duelo-fila:first-of-type { border-top: 0; }
.duelo-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14.5px; line-height: 1.5; min-width: 0; }
.duelo-info .meta { font-size: 12.5px; }
.duelo-tag {
  font-family: var(--mono); font-size: 11px; padding: 3px 9px; border-radius: 999px;
  color: var(--texto-tenue); border: 1px solid var(--piedra-borde); white-space: nowrap;
}
.duelo-tag.ok  { color: #7fd88f; border-color: rgba(127,216,143,.5); background: rgba(127,216,143,.10); }
.duelo-tag.mal { color: #f0b3b3; border-color: rgba(224,122,122,.45); background: rgba(224,122,122,.08); }
.duelo-fila.gane  { border-left: 3px solid rgba(127,216,143,.6); padding-left: 10px; }
.duelo-fila.perdi { border-left: 3px solid rgba(224,122,122,.5); padding-left: 10px; }
.duelo-fila.empate{ border-left: 3px solid var(--piedra-borde); padding-left: 10px; }
@media (max-width: 640px) {
  .duelo-fila { align-items: flex-start; flex-direction: column; }
  .duelo-fila .boton, .duelo-fila .mini-accion { align-self: stretch; text-align: center; }
}

/* ==================== Arctur · Guru Arcturiano (3D) ==================== */
.ficha.docente { height: auto; flex: 1 1 auto; min-height: 380px; max-height: 720px; }
.arctur-stage {
  position: relative; flex: none; height: 210px; margin: -16px -16px 0; overflow: hidden;
  border-radius: var(--radio) var(--radio) 0 0; border-bottom: 1px solid var(--piedra-borde);
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(90,168,216,.22), transparent 60%),
    radial-gradient(60% 50% at 80% 0%, rgba(216,184,119,.10), transparent 70%),
    linear-gradient(180deg, #070b14, #0b1022 70%, #060912);
}
.arctur-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  opacity: .92; transition: opacity .9s ease; filter: saturate(.9);
}
.arctur-poster.off { opacity: 0; }
.arctur-stage.sin-3d .arctur-poster { opacity: .92; }
.arctur-canvas {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block;
  opacity: 0; transition: opacity .9s ease;
}
.arctur-canvas.live { opacity: 1; }
.arctur-velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(4,6,10,.85));
}
.arctur-stage.hablando::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(90,168,216,.35), inset 0 -30px 60px -30px rgba(90,168,216,.35);
  animation: arctur-aura 1.6s ease-in-out infinite;
}
@keyframes arctur-aura { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.arctur-placa {
  position: absolute; left: 14px; right: 14px; bottom: 10px; display: flex; align-items: center; gap: 10px; z-index: 2;
}
.arctur-velo { z-index: 1; }
.arctur-emblema .emblema { width: 22px; height: 22px; filter: drop-shadow(0 0 6px rgba(216,184,119,.5)); }
.arctur-nombre { display: flex; flex-direction: column; line-height: 1.15; flex: 1; min-width: 0; }
.arctur-nombre b { font-size: 15px; letter-spacing: .04em; }
.arctur-nombre small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-tenue); white-space: nowrap; }
.arctur-nota { font: 10.5px var(--mono); color: var(--texto-tenue); }
.arctur-nota:empty { display: none; }
.arctur-voz {
  font: 600 10.5px/1 var(--mono); letter-spacing: .04em; color: var(--celeste-claro);
  background: rgba(90,168,216,.10); border: 1px solid rgba(90,168,216,.35); border-radius: 999px;
  padding: 6px 10px; cursor: pointer; white-space: nowrap;
}
.arctur-voz[aria-pressed="false"] { color: var(--texto-tenue); border-color: var(--piedra-borde); background: transparent; }
.arctur-voz[aria-pressed="true"] .voz-no, .arctur-voz[aria-pressed="false"] .voz-si { display: none; }
.arctur-voz:disabled { opacity: .5; cursor: default; }
@media (max-width: 900px) {
  /* `.ficha.docente`, no `.burbuja.docente`: la clase se repite y el min-height estiraba cada respuesta */
  .ficha.docente { height: auto; min-height: 520px; }
  .arctur-stage { height: 190px; }
}

/* ==================== Insignias como fotos de perfil circulares ==================== */
/* Los retratos de grado son cuadrados con fondo negro: se recortan en círculo, con el rostro
   centrado arriba, y un anillo cuyo color sube con la jerarquía (I piedra → VI violeta alien). */
/* 🚨 Acotado a las IMG (y al chip de marco). Sin el `img`, este bloque —que va despues— se comia
   la pastilla de estado de las tarjetas del campus (`<span class="insignia">Abierto</span>`,
   definida en la linea ~422) y le ponia a cada una un aro gris con halo. Misma clase, dos cosas
   distintas: lo encontro la auditoria de UX del 2026-09-26. */
img.insignia, .insignia[class*="marco-"] {
  border-radius: 50%; object-fit: cover; object-position: 50% 26%; background: #000;
  --anillo: #4b5563; --anillo-brillo: rgba(75,85,99,.35);
  box-shadow: 0 0 0 2px var(--obsidiana), 0 0 0 4px var(--anillo), 0 0 14px 2px var(--anillo-brillo);
}
.insignia.g1 { --anillo: #5c6470; --anillo-brillo: rgba(92,100,112,.30); }
.insignia.g2 { --anillo: #3d7fae; --anillo-brillo: rgba(61,127,174,.35); }
.insignia.g3 { --anillo: #5aa8d8; --anillo-brillo: rgba(90,168,216,.45); }
.insignia.g4 { --anillo: #d8b877; --anillo-brillo: rgba(216,184,119,.45); }
.insignia.g5 { --anillo: #f0c860; --anillo-brillo: rgba(240,200,96,.55); }
.insignia.g6 { --anillo: #b48cff; --anillo-brillo: rgba(180,140,255,.55); }
.bc-avatar.insignia { height: 26px; width: 26px; box-shadow: 0 0 0 1.5px var(--anillo), 0 0 8px var(--anillo-brillo); }
.rk-avatar.insignia { height: 30px; width: 30px; box-shadow: 0 0 0 1.5px var(--anillo), 0 0 8px var(--anillo-brillo); }
.rango-avatar.insignia { width: 96px; height: 96px; filter: none;
  box-shadow: 0 0 0 3px var(--obsidiana), 0 0 0 6px var(--anillo), 0 0 28px 4px var(--anillo-brillo); }
.av-img.insignia { width: 104px; height: 104px; margin: 6px 0 8px; }
.avatar-slot.bloqueado .av-img.insignia { --anillo: #2a3140; --anillo-brillo: transparent; }
.avatar-slot.equipado .av-img.insignia { box-shadow: 0 0 0 2px var(--obsidiana), 0 0 0 4px var(--anillo), 0 0 22px 4px var(--anillo-brillo); }
@media (max-width: 640px) {
  .rango-avatar.insignia { width: 72px; height: 72px; }
  .av-img.insignia { width: 84px; height: 84px; }
}

/* ==================== La Tienda ==================== */
.tienda-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.tienda-item { background: var(--piedra); border: 1px solid var(--piedra-borde); border-radius: var(--radio);
  padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.tienda-item.agotado { opacity: .6; }
.tienda-nombre { font-family: var(--serif); font-size: 17px; color: var(--celeste-claro); line-height: 1.25; }
.tienda-desc { margin: 0; font-size: 13.5px; color: var(--texto-suave); line-height: 1.5; }
.tienda-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; }
.tienda-precio { font-family: var(--mono); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.tienda-item .boton.angosto { align-self: flex-start; }
.tienda-alta { display: grid; grid-template-columns: 1.4fr 2fr .8fr .8fr auto; gap: 8px; align-items: center; }
.tienda-alta input, .tienda-edit-campos input {
  padding: 9px 11px; font: inherit; font-size: 13.5px; color: var(--texto); min-width: 0;
  background: rgba(255,255,255,.04); border: 1px solid var(--piedra-borde); border-radius: 8px; outline: none;
}
.tienda-alta input:focus, .tienda-edit-campos input:focus { border-color: rgba(90,168,216,.6); }
.tienda-edit { margin: 0; }
.tienda-edit-campos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tienda-edit-campos label { display: inline-flex; align-items: center; gap: 5px; }
.tienda-edit-campos input[type=number] { width: 78px; padding: 6px 8px; }
.tienda-edit-campos input[type=text] { width: 160px; padding: 6px 8px; }
@media (max-width: 640px) {
  .tienda-alta { grid-template-columns: 1fr 1fr; }
  .tienda-alta input[name=nombre], .tienda-alta input[name=descripcion], .tienda-alta .boton { grid-column: 1 / -1; }
}

/* ==================== Entrega de la práctica a Arctur ==================== */
.entrega {
  max-width: var(--medida); margin-top: 44px; padding: 22px 22px 18px;
  border: 1px solid var(--piedra-borde); border-radius: 14px;
  background: linear-gradient(180deg, rgba(90,168,216,.06), rgba(90,168,216,0) 60%);
}
.entrega-cabecera h2 { margin: 0 0 8px; font-size: 20px; }
.entrega-cabecera p { margin: 0 0 18px; color: var(--texto-tenue); font-size: 14px; line-height: 1.6; }
.entrega-ej { display: block; margin-bottom: 16px; }
.entrega-titulo { display: block; margin-bottom: 6px; font-size: 14px; color: var(--texto); }
.entrega-titulo b { color: var(--celeste-claro); font-family: var(--mono); font-weight: 600; }
.entrega-ej textarea {
  width: 100%; min-height: 72px; max-height: 320px; padding: 10px 12px;
  font-size: 14.5px; line-height: 1.55; resize: vertical;
}
.entrega-pie { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 6px; }
.entrega-pie .meta { flex: 1 1 200px; font-size: 13px; color: var(--texto-tenue); }
.entrega-pie .boton { flex: none; }
@media (max-width: 640px) {
  .entrega { padding: 16px 14px; margin-top: 32px; }
  .entrega-pie .boton { width: 100%; }
}

/* ==================== Tienda 2.0: marcos de avatar (Fase 4, Etapa 1) ==================== */
/* Un marco es una clase `marco-<slug>` sobre la insignia circular. Van DESPUÉS de las reglas
   de tamaño (.bc-avatar/.rk-avatar/.rango-avatar) para ganarles el filter/outline. */
/* El marco es un anillo exterior por box-shadow (sigue el círculo en todos los navegadores;
   `outline` quedaba cuadrado y cortaba el marco). Las animaciones NO usan `filter`: un filter
   animado sobre la <img> hacía que Chrome recortara el box-shadow (se veía cortado de un lado).
   El brillo se anima por propiedades registradas (@property) que alimentan el último box-shadow. */
@property --marco-glow { syntax: '<length>'; inherits: false; initial-value: 16px; }
@property --marco-glow-sp { syntax: '<length>'; inherits: false; initial-value: 6px; }
@property --marco-glow-color { syntax: '<color>'; inherits: false; initial-value: transparent; }
.insignia[class*="marco-"] { --marco: var(--anillo); --marco-glow-color: var(--anillo-brillo);
  box-shadow: 0 0 0 2px var(--obsidiana), 0 0 0 4px var(--anillo), 0 0 0 7px var(--obsidiana),
              0 0 0 9px var(--marco), 0 0 var(--marco-glow) var(--marco-glow-sp) var(--marco-glow-color); }
.bc-avatar.insignia[class*="marco-"], .rk-avatar.insignia[class*="marco-"] { --marco-glow: 10px; --marco-glow-sp: 3px;
  box-shadow: 0 0 0 1.5px var(--obsidiana), 0 0 0 3px var(--anillo), 0 0 0 5px var(--obsidiana),
              0 0 0 6.5px var(--marco), 0 0 var(--marco-glow) var(--marco-glow-sp) var(--marco-glow-color); }
.insignia.marco-dorado { --anillo: #f6d27a; --anillo-brillo: rgba(246,210,122,.75);
  animation: marco-latido 2.4s ease-in-out infinite; }
@keyframes marco-latido {
  0%, 100% { --marco-glow-color: rgba(246,210,122,.45); --marco-glow-sp: 2px; }
  50% { --marco-glow-color: rgba(246,210,122,.95); --marco-glow-sp: 7px; } }
.insignia.marco-neon { --anillo: #6ee7ff; --anillo-brillo: rgba(110,231,255,.8);
  animation: marco-neon 1.8s ease-in-out infinite; }
@keyframes marco-neon {
  0%, 100% { --marco-glow-color: rgba(110,231,255,.6); --marco-glow-sp: 3px; }
  50% { --marco-glow-color: #6ee7ff; --marco-glow-sp: 9px; } }
.insignia.marco-fuego { --anillo: #ff7a1a; --anillo-brillo: rgba(255,122,26,.75);
  animation: marco-fuego 1.1s steps(6) infinite; }
@keyframes marco-fuego {
  0% { --marco: #ff7a1a; --marco-glow-color: rgba(255,90,0,.8); --marco-glow-sp: 3px; }
  30% { --marco: #ffb347; --marco-glow-color: rgba(255,160,40,.9); --marco-glow-sp: 7px; }
  60% { --marco: #ff4d1a; --marco-glow-color: rgba(255,60,0,.9); --marco-glow-sp: 5px; }
  100% { --marco: #ff7a1a; --marco-glow-color: rgba(255,120,20,.8); --marco-glow-sp: 4px; } }
.insignia.marco-glitch { --anillo: #ff2e88; --anillo-brillo: rgba(255,46,136,.6);
  animation: marco-glitch 3.2s steps(1) infinite; }
@keyframes marco-glitch {
  0%, 88%, 100% { transform: none; --marco: #ff2e88; --marco-glow-color: rgba(255,46,136,.6); }
  90% { transform: translate(-2px, 1px); --marco: #2ef2ff; --marco-glow-color: rgba(46,242,255,.8); }
  92% { transform: translate(2px, -1px) skewX(6deg); --marco: #ff2e88; --marco-glow-color: #ff2e88; }
  94% { transform: translate(-1px, 0); --marco: #2ef2ff; --marco-glow-color: rgba(46,242,255,.8); }
  96% { transform: none; --marco: #ff2e88; --marco-glow-color: rgba(255,46,136,.6); } }
.insignia.marco-arcturiano { --anillo: #b48cff; --anillo-brillo: rgba(180,140,255,.7);
  animation: marco-arcturiano 3s ease-in-out infinite; }
@keyframes marco-arcturiano {
  0%, 100% { --marco: #b48cff; --marco-glow-color: rgba(180,140,255,.8); --marco-glow-sp: 4px; }
  50% { --marco: #6ee7ff; --marco-glow-color: rgba(110,231,255,.85); --marco-glow-sp: 7px; } }
@media (prefers-reduced-motion: reduce) { .insignia[class*="marco-"] { animation: none; } }

/* título bajo el alias */
.titulo-chip { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  color: var(--oro); border: 1px solid rgba(216,184,119,.4); border-radius: 999px; padding: 1px 8px;
  line-height: 1.6; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle; background: rgba(216,184,119,.06); }
.rk-nombre { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rk-nombre .titulo-chip { font-size: 10px; align-self: flex-start; }
.bill-rango-txt .titulo-chip { margin-top: 6px; }

/* vidriera: tarjetas con vida (hover en escritorio, toque en móvil = clase .tocado) */
.tienda-item { position: relative; transition: transform .18s ease, border-color .18s, box-shadow .18s; cursor: default; }
.tienda-item:hover, .tienda-item.tocado { transform: translateY(-4px); border-color: rgba(90,168,216,.55);
  box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(90,168,216,.15) inset; }
.tienda-item.agotado:hover { transform: none; }
.tienda-tipo { position: absolute; top: 10px; right: 10px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue); }
.tienda-preview { display: flex; align-items: center; justify-content: center; min-height: 84px; margin: 6px 0 2px; }
.tienda-preview .insignia { width: 64px; height: 64px; transition: transform .25s cubic-bezier(.2,.9,.3,1.4); }
.tienda-item:hover .tienda-preview .insignia, .tienda-item.tocado .tienda-preview .insignia { transform: scale(1.14) rotate(-4deg); }
.tienda-preview .titulo-chip { font-size: 12.5px; padding: 5px 14px; white-space: normal; text-align: center;
  transition: letter-spacing .25s, box-shadow .25s, background .25s; }
.tienda-item:hover .tienda-preview .titulo-chip, .tienda-item.tocado .tienda-preview .titulo-chip {
  letter-spacing: .12em; background: rgba(216,184,119,.14); box-shadow: 0 0 18px rgba(216,184,119,.35); }
.tienda-item.unico .tienda-nombre { color: var(--oro); }
.tienda-item .dueno { font-size: 12px; color: var(--texto-suave); }
.tienda-item .dueno b { color: var(--celeste-claro); font-weight: 600; }
.tienda-item.agotado .tienda-preview { filter: grayscale(.8); opacity: .7; }
.tienda-item .candado-ic { position: absolute; top: 10px; left: 10px; color: var(--texto-tenue); }
.tienda-item .candado-ic .ic { width: 16px; height: 16px; }
.tienda-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tienda-acciones form { margin: 0; display: inline-flex; gap: 6px; align-items: center; }
.tienda-acciones input[type=number] { width: 84px; padding: 7px 9px; font: inherit; font-size: 13px; color: var(--texto);
  background: rgba(255,255,255,.04); border: 1px solid var(--piedra-borde); border-radius: 8px; outline: none; }
.tienda-grupo { margin-bottom: 22px; }
.tienda-item.sin-preview { padding-top: 34px; }
.tienda-grupo h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); font-weight: 600; }
.tienda-equipado { border-color: rgba(216,184,119,.55) !important; }
.tienda-equipado::after { content: "equipado"; position: absolute; top: -9px; left: 12px; font-family: var(--mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--oro); background: var(--obsidiana); padding: 0 6px; }
.mercado-fila .titulo-chip { font-size: 12px; }
.mercado-comision { font-size: 12.5px; color: var(--texto-tenue); }

/* panel del rector: alta con tipo y unidades */
.tienda-alta-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.tienda-alta-2 .campo { display: flex; flex-direction: column; gap: 4px; }
.tienda-alta-2 .campo.ancho { grid-column: 1 / -1; }
.tienda-alta-2 input[type=text], .tienda-alta-2 input[type=number] {
  padding: 9px 11px; font: inherit; font-size: 13.5px; color: var(--texto); min-width: 0;
  background: rgba(255,255,255,.04); border: 1px solid var(--piedra-borde); border-radius: 8px; outline: none; }
.tienda-alta-2 input:focus { border-color: rgba(90,168,216,.6); }
.tienda-alta-2 select, .tienda-edit-campos select { padding: 9px 11px; font: inherit; font-size: 13.5px; color: var(--texto);
  background: var(--piedra-alta); border: 1px solid var(--piedra-borde); border-radius: 8px; outline: none; }
.tienda-alta-2 .unidades { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--texto-suave); }
.tienda-alta-2 .unidades input[type=number] { width: 80px; }
.tienda-edit .tienda-preview { min-height: 0; margin: 0; }
.tienda-edit .tienda-preview .insignia { width: 34px; height: 34px; }
.tienda-edit-campos input[name=nombre] { width: 190px; }
.tienda-edit-campos input[name=descripcion] { width: 230px; }
.duelo-apuesta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 13.5px; color: var(--texto-suave); }
.duelo-apuesta select { padding: 8px 10px; font: inherit; font-size: 13.5px; color: var(--texto);
  background: var(--piedra-alta); border: 1px solid var(--piedra-borde); border-radius: 8px; }
@media (max-width: 640px) {
  .tienda-alta-2 { grid-template-columns: 1fr; }
  .tienda-edit-campos input[name=nombre], .tienda-edit-campos input[name=descripcion] { width: 100%; }
}

/* ==================== Orbe de Arctur (encabezados de sección) ==================== */
.encabezado-campus.con-arctur { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.encabezado-campus.con-arctur > div { min-width: 0; flex: 1 1 auto; }
.arctur-orbe {
  position: relative; flex: none; width: 168px; height: 168px; border-radius: 50%; overflow: hidden; padding: 0;
  cursor: pointer; border: 0; background: radial-gradient(circle at 50% 30%, #101a33, #060912 75%);
  box-shadow: 0 0 0 2px var(--obsidiana), 0 0 0 4px rgba(90,168,216,.45), 0 0 34px 6px rgba(90,168,216,.18), 0 18px 40px rgba(0,0,0,.55);
  transition: transform .2s, box-shadow .3s;
}
.arctur-orbe:hover { transform: scale(1.04); box-shadow: 0 0 0 2px var(--obsidiana), 0 0 0 4px rgba(90,168,216,.8), 0 0 44px 10px rgba(90,168,216,.3), 0 18px 40px rgba(0,0,0,.55); }
.arctur-orbe .arctur-poster { object-position: 50% 22%; }
.arctur-orbe .arctur-canvas { border-radius: 50%; }
.arctur-orbe.hablando { box-shadow: 0 0 0 2px var(--obsidiana), 0 0 0 4px var(--oro), 0 0 44px 10px rgba(216,184,119,.35), 0 18px 40px rgba(0,0,0,.55); }
.arctur-orbe.hablando::after { border-radius: 50%; }
.arctur-orbe-tip {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2; pointer-events: none;
  font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--celeste-claro);
  background: rgba(7,10,16,.7); border: 1px solid rgba(90,168,216,.35); border-radius: 999px; padding: 5px 9px;
  animation: cofre-parpadeo 2.4s ease-in-out infinite;
}
.arctur-orbe.hablando .arctur-orbe-tip { opacity: 0; animation: none; }
@media (max-width: 640px) {
  .encabezado-campus.con-arctur { gap: 16px; }
  .arctur-orbe { width: 110px; height: 110px; }
  .arctur-orbe-tip { font-size: 9px; padding: 4px 7px; bottom: 6px; }
}
.h1-sub { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-tenue); margin-top: 4px; }

/* ---- selector de rival (Fase 4): buscador con lista de iniciados ---- */
.duelo-retar-fila { position: relative; }
.rival-selector { flex: 1 1 200px; min-width: 0; display: flex; }
.rival-selector input { width: 100%; }
.rival-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; margin: 0; padding: 6px; list-style: none;
  max-height: 300px; overflow: auto; background: var(--piedra, #14171c); border: 1px solid var(--piedra-borde);
  border-radius: var(--radio); box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.rival-lista li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.rival-lista li:hover, .rival-lista li.activo { background: rgba(90,168,216,.12); }
.rival-lista .insignia { width: 32px; height: 32px; font-size: 12px; flex: none; object-fit: cover; }
.rival-lista .sin-avatar { display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); }
.rival-lista .rival-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rival-lista .rival-tx b { font-weight: 600; }
.rival-lista .rival-tx small { color: var(--texto-tenue); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rival-lista .duelo-tag { flex: none; }

/* ---- historial global de duelos ---- */
.duelo-fila.global .vs { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--texto-tenue); margin: 0 4px; }
.duelo-fila.global .gano { color: #9fe3ad; }
.duelo-fila.global .perdio { color: var(--texto-tenue); }
.duelo-fila.global .perdio strong { text-decoration: line-through; text-decoration-color: rgba(224,122,122,.6); }

/* ---- Etapa 3: retencion ---- */
.aviso-sagrada, .aviso-rescate {
  margin: 0; padding: 9px 22px; font-size: 14px; text-align: center; border-bottom: 1px solid var(--piedra-borde);
}
.aviso-sagrada { background: linear-gradient(90deg, rgba(216,184,119,.14), rgba(216,184,119,.04), rgba(216,184,119,.14)); color: var(--oro); animation: sagrada-latido 2.4s ease-in-out infinite; }
@keyframes sagrada-latido { 0%,100% { box-shadow: inset 0 -1px 0 rgba(216,184,119,.2); } 50% { box-shadow: inset 0 -1px 0 rgba(216,184,119,.7); } }
.aviso-rescate { background: rgba(224,122,122,.08); color: var(--texto); }
.aviso-rescate .mini-accion { margin-left: 8px; }
.aviso-rescate-caja {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; padding: 14px 18px;
  border: 1px solid rgba(224,122,122,.4); border-radius: var(--radio); background: rgba(224,122,122,.06);
}
.aviso-rescate-caja .boton { margin-left: auto; }

/* pregunta del dia */
.pdd .pdd-enunciado { font-size: 18px; line-height: 1.45; margin: 4px 0 14px; max-width: var(--medida); }
.pdd .arena-op.correcta { border-color: var(--ok); background: rgba(111,207,151,.12); color: var(--ok); }
.pdd .arena-op.tuya-mal { border-color: var(--error); background: rgba(224,122,122,.12); color: var(--error); }
.pdd-resultado { margin-top: 12px; }
.pdd-racha { font-family: var(--mono); }

/* cofre por niveles */
.cofre-nivel-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.cofre-nivel-tag.plata { color: #cfd6de; }
.cofre-nivel-tag.oro { color: var(--oro); }
.cofre-caja.nivel-plata .cofre-ic { filter: drop-shadow(0 0 10px rgba(207,214,222,.55)); }
.cofre-caja.nivel-oro .cofre-ic { filter: drop-shadow(0 0 14px rgba(216,184,119,.8)); animation: cofre-latido 2.2s ease-in-out infinite; }
@keyframes cofre-latido {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(246,210,122,.55)); }
  50% { filter: drop-shadow(0 0 12px rgba(246,210,122,.95)); } }
.cofre-nivel-nota { max-width: 520px; text-align: center; margin: 0; }
.cofre-premio.marco .insignia { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; }
.cofre-premio.nivel { color: var(--oro); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* calendario de la Orden */
.cal-nav a { padding: 0 8px; text-decoration: none; font-size: 18px; }
/* UX e2: minmax(0,1fr) + min-width:0; con `1fr` a secas, las celdas con aspect-ratio le pedían 68 px cada una
   y la grilla medía 454 px en un celular de 390: la Cámara entera scrolleaba de costado */
.cal-grilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 560px; }
.cal-grilla > * { min-width: 0; }
.cal-dow { font-family: var(--mono); font-size: 11px; color: var(--texto-tenue); text-align: center; padding-bottom: 2px; }
.cal-dia {
  aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--piedra-borde); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; font-size: 13px; color: var(--texto-tenue); position: relative;
}
.cal-dia.vacio { border: 0; }
.cal-dia.entro { background: rgba(90,168,216,.14); border-color: rgba(90,168,216,.45); color: var(--texto); }
.cal-dia.hueco { background: rgba(224,122,122,.06); border-style: dashed; }
.cal-dia.futuro { opacity: .35; }
.cal-dia.hoy { outline: 2px solid var(--celeste); outline-offset: 1px; }
.cal-dia b { font-weight: 600; }
.cal-marcas { display: flex; gap: 3px; height: 5px; }
.cal-marcas u, .cal-leyenda u { display: inline-block; width: 5px; height: 5px; border-radius: 50%; }
.m-est { background: var(--celeste); } .m-rin { background: var(--alerta); } .m-apr { background: var(--ok); } .m-due { background: #c58cff; }
.cal-leyenda { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 6px; align-items: center; }
.cal-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cal-hueco-ej { width: 12px; height: 12px; border: 1px dashed var(--piedra-borde); border-radius: 3px; background: rgba(224,122,122,.06); }
.cal-insignias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.insignia-mes { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--oro); color: var(--oro); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.insignia-mes svg { width: 14px; height: 14px; }
@media (max-width: 480px) { .cal-grilla { gap: 4px; } .cal-dia { font-size: 12px; border-radius: 8px; } }

/* QA jugabilidad 2026-09-14 */
.duelo-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.bc-titulo { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--dorado, #d8b877);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aviso-cofre-rescate { color: var(--dorado, #d8b877); }
.aviso-cofre-rescate a { color: inherit; text-decoration: underline; }
@media (max-width: 480px) { .bc-titulo { display: none; } }

/* ==================== Fase 4 · Etapa 4: social (feed, casas, respeto, perfil, rareza) ==================== */
.orden-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { .orden-grid { grid-template-columns: 1fr; } }
.feed-lista { list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 6px;
  max-height: 420px; overflow-y: auto; scrollbar-width: thin; }  /* el feed no empuja los tracks: scrollea adentro */
.feed-item { display: grid; grid-template-columns: 26px 18px 1fr auto; gap: 8px; align-items: center;
  padding: 7px 10px; border: 1px solid var(--piedra-borde); border-radius: 10px; background: var(--piedra); font-size: 13.5px; }
.feed-item.feed-rango { border-color: rgba(216,184,119,.45); background: rgba(216,184,119,.06); }
.feed-avatar { width: 26px; height: 26px; border-radius: 50%; }
.feed-ic { color: var(--celeste); line-height: 1; } .feed-ic .ic { width: 16px; height: 16px; }
.feed-rango .feed-ic { color: var(--oro); }
.feed-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-txt a { font-weight: 600; }
.feed-hace { color: var(--texto-tenue); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.casas h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave);
  display: flex; align-items: center; gap: 6px; }
.casas h3 .ic { width: 16px; height: 16px; }
.casa-fila { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--piedra-borde); border-radius: 10px; background: var(--piedra); }
.casa-fila.reptilianos { --casa: #5fe08f; } .casa-fila.arcturianos { --casa: #6ee7ff; }
.casa-fila { border-left: 3px solid var(--casa, var(--piedra-borde)); }
.casa-fila.lider { box-shadow: 0 0 0 1px var(--casa) inset, 0 0 14px -4px var(--casa); }
.casa-fila.mia .casa-nombre { color: var(--casa); }
.casa-nombre { font-weight: 600; display: flex; align-items: center; gap: 6px; } .casa-nombre .ic { width: 15px; height: 15px; }
.casa-nombre small { color: var(--texto-tenue); font-weight: 400; }
.casa-pts { font-family: var(--mono); font-size: 13px; text-align: right; } .casa-pts b { color: var(--oro); }
.casa-meta { grid-column: 1 / -1; color: var(--texto-tenue); font-size: 11.5px; font-family: var(--mono); }
.casa-pie { margin-top: 6px; font-size: 12px; }
/* perfil público: la casa se destaca al entrar (pedido de Jano 2026-09-15) — chip junto al alias +
   borde de la tarjeta del rango del color de la casa */
.casa-chip { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-left: 10px;
  padding: 4px 11px 4px 9px; border-radius: 999px; font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .02em; color: var(--casa, var(--texto)); border: 1px solid var(--casa, var(--piedra-borde));
  background: color-mix(in srgb, var(--casa, #888) 12%, transparent); box-shadow: 0 0 14px -6px var(--casa, transparent); }
.casa-chip .ic { width: 15px; height: 15px; }
.casa-chip.reptilianos { --casa: #5fe08f; } .casa-chip.arcturianos { --casa: #6ee7ff; }
.perfil .bill-rango.de-casa { border-left: 3px solid var(--casa); box-shadow: 0 0 18px -8px var(--casa) inset; }
.perfil .bill-rango.de-casa.reptilianos { --casa: #5fe08f; } .perfil .bill-rango.de-casa.arcturianos { --casa: #6ee7ff; }
@media (max-width: 640px) { .casa-chip { margin-left: 0; margin-top: 6px; font-size: 12px; } h1 .casa-chip { display: inline-flex; } }
/* la casa en cada fila del ranking (pedido de Jano 2026-09-15): pastilla chica del color de la casa
   junto al alias; en el celular queda solo el ícono */
.rk-casa { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin-left: 8px;
  padding: 2px 7px 2px 5px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--casa); border: 1px solid color-mix(in srgb, var(--casa) 55%, transparent);
  background: color-mix(in srgb, var(--casa) 10%, transparent); text-decoration: none !important; }
.rk-casa .ic { width: 11px; height: 11px; }
.rk-casa.reptilianos { --casa: #5fe08f; } .rk-casa.arcturianos { --casa: #6ee7ff; }
a.rk-fila:hover .rk-casa, a.rk-fila:focus-visible .rk-casa { color: var(--casa); }
@media (max-width: 640px) {
  .rk-casa { margin-left: 6px; padding: 2px 4px; flex: none; } .rk-casa b { display: none; } .rk-casa .ic { width: 12px; height: 12px; }
  /* el ellipsis recorta el alias, no la pastilla de la casa */
  .rk-nombre > span:first-child { display: flex; align-items: center; min-width: 0; }
  .rk-nombre > span:first-child .rk-link { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}
.casas-camara { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
@media (max-width: 560px) { .casas-camara { grid-template-columns: 1fr; } }
.casas-camara .casa-fila { margin-bottom: 0; }
/* respeto */
.aviso-respeto { background: rgba(110,231,255,.10); border-bottom: 1px solid rgba(110,231,255,.35); padding: 9px 16px;
  text-align: center; font-size: 13.5px; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.respeto-caja .bill-num .ic { width: 26px; height: 26px; vertical-align: -3px; color: var(--celeste); }
.respeto-form { margin-top: 8px; }
/* perfil */
.perfil-cab { grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 720px) { .perfil-cab { grid-template-columns: 1fr 1fr; } .perfil-cab .bill-rango { grid-column: 1 / -1; } }
@media (max-width: 1020px) and (min-width: 721px) { .camara-billetera, .perfil-cab { grid-template-columns: 1fr 1fr 1fr; } .camara-billetera .bill-rango, .perfil-cab .bill-rango { grid-column: 1 / -1; } }
.perfil-titulos { display: flex; flex-wrap: wrap; gap: 8px; }
.perfil-titulos .titulo-chip.equipado { border-color: var(--oro); color: var(--oro); }
.perfil-duelos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.perfil-duelos li { padding: 8px 12px; border: 1px solid var(--piedra-borde); border-radius: 10px; background: var(--piedra); font-size: 13.5px; }
.perfil-duelos li .ic { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
.perfil-duelos li.ganó { border-left: 3px solid #7fd88f; } .perfil-duelos li.perdió { border-left: 3px solid #d86b6b; }
.perfil-duelos li.empate { border-left: 3px solid var(--texto-tenue); }
.perfil-modulos { margin: 0; padding-left: 22px; columns: 2; column-gap: 24px; font-size: 13.5px; }
@media (max-width: 640px) { .perfil-modulos { columns: 1; } }
.perfil-modulos li { break-inside: avoid; padding: 3px 0; }
.perfil-modulos .mono { font-family: var(--mono); color: var(--texto-tenue); font-size: 12px; margin-right: 6px; }
.rk-link { color: inherit; } .rk-link:hover { color: var(--celeste); }
/* rareza de insignias: borde por rareza + chip */
.rareza-chip { display: inline-block; margin-top: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--texto-tenue); }
.logro.ganado.rareza-comun { border-color: rgba(154,163,173,.5); }
.logro.ganado.rareza-rara { border-color: #5aa8d8; box-shadow: 0 0 0 1px rgba(90,168,216,.25) inset; }
.logro.ganado.rareza-rara .rareza-chip { color: #5aa8d8; }
.logro.ganado.rareza-epica { border-color: #b48cff; box-shadow: 0 0 0 1px rgba(180,140,255,.35) inset, 0 0 14px -4px rgba(180,140,255,.6); }
.logro.ganado.rareza-epica .rareza-chip { color: #b48cff; }
.logro.ganado.rareza-legendaria { border-color: #f6d27a; box-shadow: 0 0 0 1px rgba(246,210,122,.4) inset, 0 0 18px -4px rgba(246,210,122,.8); }
.logro.ganado.rareza-legendaria .rareza-chip { color: #f6d27a; }
.logro.ganado.rareza-legendaria .logro-ic { color: #f6d27a; }

/* ===================== Fase 4 · Etapa 5 — Jugar más (Rush, Boss, misiones, constelación) ===================== */
/* --- Rush --- */
.rush-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
@media (max-width: 860px) { .rush-grid { grid-template-columns: 1fr; } }
.arena-stat.mal .arena-stat-num { color: var(--error); }
.rush-hud { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rush-reloj { font-family: var(--mono); font-size: 34px; font-weight: 700; color: var(--celeste); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.rush-reloj.urgente { color: var(--error); animation: rush-tic .5s steps(2) infinite; }
@keyframes rush-tic { 50% { opacity: .55; } }
.rush-marcador { font-family: var(--mono); font-size: 13px; color: var(--texto-suave); }
.rush-marcador b { color: var(--ok); font-size: 16px; }
.rush-penal-aviso { min-height: 1.4em; color: var(--error); font-family: var(--mono); font-weight: 700; margin: 8px 0 0; }
.rush .arena-op.correcta { border-color: var(--ok); background: rgba(111,207,151,.12); color: var(--ok); }
.rush .arena-op.tuya-mal { border-color: var(--error); background: rgba(224,122,122,.12); color: var(--error); }
.rush-ranking .track-cabecera { flex-wrap: wrap; }
.rush-tabla { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rush-tabla li { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0 10px; align-items: center;
  padding: 6px 10px; border: 1px solid var(--borde); border-radius: 8px; background: rgba(255,255,255,.015); }
.rush-tabla li.yo { border-color: rgba(110,231,255,.45); background: rgba(110,231,255,.05); }
.rush-tabla li:first-child .rush-pos { color: var(--oro); }
.rush-pos { font-family: var(--mono); font-size: 12px; color: var(--texto-tenue); grid-row: 1 / span 2; }
.rush-avatar { width: 30px; height: 30px; border-radius: 50%; grid-row: 1 / span 2; }
.rush-alias { font-size: 14px; color: var(--texto); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rush-alias:hover { color: var(--celeste); }
.rush-pts { font-family: var(--mono); font-size: 18px; color: var(--celeste); grid-row: 1 / span 2; }
.rush-tabla li small { grid-column: 3; font-size: 11px; }

/* --- Boss --- */
.ic-boss { color: var(--error); }
.boton-boss { background: linear-gradient(180deg, #5a1d1d, #3a1010); border-color: rgba(224,122,122,.5); color: #ffd9d9; }
.boton-boss:hover { background: linear-gradient(180deg, #6d2323, #451313); color: #fff; }
.ficha-boss { border-color: rgba(224,122,122,.35); }
.ficha-boss.vencido { border-color: rgba(111,207,151,.35); }
.ficha-boss h4 { color: var(--error); display: flex; align-items: center; gap: 6px; }
.ficha-boss.vencido h4 { color: var(--ok); }
.boss-panel { position: relative; }
.boss-estado { font-size: 16px; color: var(--ok); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.boss-vidas { display: inline-flex; gap: 5px; }
.boss-vidas i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(224,122,122,.6); display: inline-block; }
.boss-vidas i.hecha { background: var(--error); box-shadow: 0 0 8px rgba(224,122,122,.7); }
.boss-crono i { background: linear-gradient(90deg, #ff4d4d, #ffb347); }
.boss-enunciado { font-size: 19px; }
.boss-resultado { font-size: 16px; color: var(--texto); max-width: var(--medida); }
.arena-rep-porque { margin: 6px 0 0; font-size: 12.5px; }
/* modo boss: escena oscurecida, viñeta roja, Arctur en penumbra (pedido: "escena 3D oscurecida y FX más intensos") */
body.modo-boss { background: #05060a; }
body.modo-boss::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(120,0,0,.35) 100%); animation: boss-respira 2.6s ease-in-out infinite; }
@keyframes boss-respira { 50% { opacity: .55; } }
body.modo-boss .arctur-orbe { filter: brightness(.45) saturate(.6) drop-shadow(0 0 22px rgba(255,40,40,.5)); }
body.modo-boss .boss-juego { box-shadow: 0 0 0 1px rgba(224,122,122,.35), 0 0 40px -10px rgba(255,60,60,.6); }
body.boss-pulso .boss-juego { animation: boss-golpe .5s ease-out; }
@keyframes boss-golpe { 0% { transform: translate(0,0); } 20% { transform: translate(-3px, 2px); } 40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, 1px); } 100% { transform: none; } }
body.boss-vencido-fx #boss-fin { animation: boss-victoria 1.2s ease-out; }
@keyframes boss-victoria { 0% { box-shadow: 0 0 0 0 rgba(246,210,122,.8); } 100% { box-shadow: 0 0 0 40px rgba(246,210,122,0); } }
@media (prefers-reduced-motion: reduce) { body.modo-boss::before, body.boss-pulso .boss-juego, .rush-reloj.urgente { animation: none; } }

/* --- misiones: tríada --- */
.mision-triada { margin: 12px 0 0; color: var(--ok); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --- Marco Tríada (exclusivo: tres anillos blancos) --- */
.insignia.marco-triada { --anillo: #f4f7ff; --anillo-brillo: rgba(244,247,255,.7);
  box-shadow: 0 0 0 2px var(--obsidiana), 0 0 0 3.5px #f4f7ff, 0 0 0 5.5px var(--obsidiana), 0 0 0 7px #c9d3ff,
              0 0 0 9px var(--obsidiana), 0 0 0 10.5px #f4f7ff, 0 0 var(--marco-glow) var(--marco-glow-sp) var(--marco-glow-color);
  animation: marco-triada 2.8s ease-in-out infinite; }
.bc-avatar.insignia.marco-triada, .rk-avatar.insignia.marco-triada { --marco-glow: 10px; --marco-glow-sp: 3px;
  box-shadow: 0 0 0 1.5px var(--obsidiana), 0 0 0 2.5px #f4f7ff, 0 0 0 4px var(--obsidiana), 0 0 0 5px #c9d3ff,
              0 0 0 6.5px var(--obsidiana), 0 0 0 7.5px #f4f7ff, 0 0 var(--marco-glow) var(--marco-glow-sp) var(--marco-glow-color); }
@keyframes marco-triada {
  0%, 100% { --marco-glow-color: rgba(244,247,255,.35); --marco-glow-sp: 2px; }
  50% { --marco-glow-color: rgba(244,247,255,.9); --marco-glow-sp: 7px; } }

/* --- constelación --- */
.const-lista { display: flex; flex-direction: column; gap: 14px; }
.const-fig { margin: 0; }
.const-fig.bloqueada { opacity: .55; }
.const-svg { width: 100%; height: auto; display: block; border-radius: var(--radio); border: 1px solid var(--borde);
  background: radial-gradient(ellipse at 30% 20%, rgba(44,106,148,.18), transparent 55%), radial-gradient(ellipse at 75% 80%, rgba(216,184,119,.08), transparent 50%), #070912; }
.const-fondo { fill: #fff; opacity: .28; }
.const-linea { stroke: rgba(255,255,255,.09); stroke-width: 1; stroke-dasharray: 3 4; }
.const-linea.media { stroke: rgba(110,231,255,.35); stroke-dasharray: 2 3; }
.const-linea.viva { stroke: rgba(216,184,119,.6); stroke-width: 1.4; stroke-dasharray: none; }
.const-nodo .const-estrella { fill: #2b3140; stroke: rgba(255,255,255,.18); stroke-width: 1; }
.const-nodo.abierto .const-estrella { fill: #6ee7ff; stroke: #fff; animation: const-late 1.8s ease-in-out infinite; }
.const-nodo.aprobado .const-estrella { fill: #fff3c4; stroke: #d8b877; stroke-width: 1.5; }
.const-halo.abierto { animation: const-late 1.8s ease-in-out infinite; }
@keyframes const-late { 50% { opacity: .45; } }
.const-aro { fill: none; stroke: #ff7a7a; stroke-width: 1.3; stroke-dasharray: 3 2; animation: const-gira 10s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes const-gira { to { transform: rotate(360deg); } }
.const-num { font-family: var(--mono); font-size: 9.5px; fill: var(--texto-tenue); }
.const-nodo.aprobado .const-num { fill: var(--oro); }
.const-nodo.abierto .const-num { fill: var(--celeste); }
.const-link { cursor: pointer; }
.const-link:hover .const-estrella { stroke: #fff; stroke-width: 2; }
.const-link:hover .const-num { fill: #fff; }
.const-link:focus-visible .const-estrella { stroke: var(--celeste); stroke-width: 2.5; }
@media (prefers-reduced-motion: reduce) { .const-nodo.abierto .const-estrella, .const-halo.abierto, .const-aro { animation: none; } }
.const-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radio); }
/* en el celular la constelación se desplaza de costado (las estrellas quedan tocables) */
@media (max-width: 600px) { .const-svg { width: 210%; max-width: none; } .const-num { font-size: 11px; } }

/* --- regalos del rector: formulario con etiquetas (pedido de Jano 15/09: "no sé cuál es punto o cuál es dharma") --- */
.regalo-form { margin: 0 0 16px; max-width: 860px; }
.regalo-presets { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.regalo-preset { font: inherit; font-size: 12.5px; color: var(--texto-suave); background: rgba(255,255,255,.03); border: 1px solid var(--borde);
  border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.regalo-preset:hover { color: var(--texto); border-color: rgba(110,231,255,.45); }
.regalo-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.regalo-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.regalo-campo.ancho { grid-column: 1 / -1; }
.regalo-lbl { font-size: 13px; color: var(--texto); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.regalo-lbl small { color: var(--texto-tenue); font-size: 11.5px; font-weight: 400; }
@keyframes marco-glitch {
  0%, 88%, 100% { transform: none; --marco: #ff2e88; --marco-glow-color: rgba(255,46,136,.6); }
  90% { transform: translate(-2px, 1px); --marco: #2ef2ff; --marco-glow-color: rgba(46,242,255,.8); }
  92% { transform: translate(2px, -1px) skewX(6deg); --marco: #ff2e88; --marco-glow-color: #ff2e88; }
  94% { transform: translate(-1px, 0); --marco: #2ef2ff; --marco-glow-color: rgba(46,242,255,.8); }
  96% { transform: none; --marco: #ff2e88; --marco-glow-color: rgba(255,46,136,.6); } }
.insignia.marco-arcturiano { --anillo: #b48cff; --anillo-brillo: rgba(180,140,255,.7);
  animation: marco-arcturiano 3s ease-in-out infinite; }
@keyframes marco-arcturiano {
  0%, 100% { --marco: #b48cff; --marco-glow-color: rgba(180,140,255,.8); --marco-glow-sp: 4px; }
  50% { --marco: #6ee7ff; --marco-glow-color: rgba(110,231,255,.85); --marco-glow-sp: 7px; } }
@media (prefers-reduced-motion: reduce) { .insignia[class*="marco-"] { animation: none; } }

/* título bajo el alias */
.titulo-chip { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  color: var(--oro); border: 1px solid rgba(216,184,119,.4); border-radius: 999px; padding: 1px 8px;
  line-height: 1.6; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle; background: rgba(216,184,119,.06); }
.rk-nombre { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rk-nombre .titulo-chip { font-size: 10px; align-self: flex-start; }
.bill-rango-txt .titulo-chip { margin-top: 6px; }

/* vidriera: tarjetas con vida (hover en escritorio, toque en móvil = clase .tocado) */
.tienda-item { position: relative; transition: transform .18s ease, border-color .18s, box-shadow .18s; cursor: default; }
.tienda-item:hover, .tienda-item.tocado { transform: translateY(-4px); border-color: rgba(90,168,216,.55);
  box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(90,168,216,.15) inset; }
.tienda-item.agotado:hover { transform: none; }
.tienda-tipo { position: absolute; top: 10px; right: 10px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue); }
.tienda-preview { display: flex; align-items: center; justify-content: center; min-height: 84px; margin: 6px 0 2px; }
.tienda-preview .insignia { width: 64px; height: 64px; transition: transform .25s cubic-bezier(.2,.9,.3,1.4); }
.tienda-item:hover .tienda-preview .insignia, .tienda-item.tocado .tienda-preview .insignia { transform: scale(1.14) rotate(-4deg); }
.tienda-preview .titulo-chip { font-size: 12.5px; padding: 5px 14px; white-space: normal; text-align: center;
  transition: letter-spacing .25s, box-shadow .25s, background .25s; }
.tienda-item:hover .tienda-preview .titulo-chip, .tienda-item.tocado .tienda-preview .titulo-chip {
  letter-spacing: .12em; background: rgba(216,184,119,.14); box-shadow: 0 0 18px rgba(216,184,119,.35); }
.tienda-item.unico .tienda-nombre { color: var(--oro); }
.tienda-item .dueno { font-size: 12px; color: var(--texto-suave); }
.tienda-item .dueno b { color: var(--celeste-claro); font-weight: 600; }
.tienda-item.agotado .tienda-preview { filter: grayscale(.8); opacity: .7; }
.tienda-item .candado-ic { position: absolute; top: 10px; left: 10px; color: var(--texto-tenue); }
.tienda-item .candado-ic .ic { width: 16px; height: 16px; }
.tienda-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tienda-acciones form { margin: 0; display: inline-flex; gap: 6px; align-items: center; }
.tienda-acciones input[type=number] { width: 84px; padding: 7px 9px; font: inherit; font-size: 13px; color: var(--texto);
  background: rgba(255,255,255,.04); border: 1px solid var(--piedra-borde); border-radius: 8px; outline: none; }
.tienda-grupo { margin-bottom: 22px; }
.tienda-item.sin-preview { padding-top: 34px; }
.tienda-grupo h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); font-weight: 600; }
.tienda-equipado { border-color: rgba(216,184,119,.55) !important; }
.tienda-equipado::after { content: "equipado"; position: absolute; top: -9px; left: 12px; font-family: var(--mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--oro); background: var(--obsidiana); padding: 0 6px; }
.mercado-fila .titulo-chip { font-size: 12px; }
.mercado-comision { font-size: 12.5px; color: var(--texto-tenue); }

/* panel del rector: alta con tipo y unidades */
.tienda-alta-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.tienda-alta-2 .campo { display: flex; flex-direction: column; gap: 4px; }
.tienda-alta-2 .campo.ancho { grid-column: 1 / -1; }
.tienda-alta-2 input[type=text], .tienda-alta-2 input[type=number] {
  padding: 9px 11px; font: inherit; font-size: 13.5px; color: var(--texto); min-width: 0;
  background: rgba(255,255,255,.04); border: 1px solid var(--piedra-borde); border-radius: 8px; outline: none; }
.tienda-alta-2 input:focus { border-color: rgba(90,168,216,.6); }
.tienda-alta-2 select, .tienda-edit-campos select { padding: 9px 11px; font: inherit; font-size: 13.5px; color: var(--texto);
  background: var(--piedra-alta); border: 1px solid var(--piedra-borde); border-radius: 8px; outline: none; }
.tienda-alta-2 .unidades { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--texto-suave); }
.tienda-alta-2 .unidades input[type=number] { width: 80px; }
.tienda-edit .tienda-preview { min-height: 0; margin: 0; }
.tienda-edit .tienda-preview .insignia { width: 34px; height: 34px; }
.tienda-edit-campos input[name=nombre] { width: 190px; }
.tienda-edit-campos input[name=descripcion] { width: 230px; }
.duelo-apuesta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 13.5px; color: var(--texto-suave); }
.duelo-apuesta select { padding: 8px 10px; font: inherit; font-size: 13.5px; color: var(--texto);
  background: var(--piedra-alta); border: 1px solid var(--piedra-borde); border-radius: 8px; }
@media (max-width: 640px) {
  .tienda-alta-2 { grid-template-columns: 1fr; }
  .tienda-edit-campos input[name=nombre], .tienda-edit-campos input[name=descripcion] { width: 100%; }
}

/* ==================== Orbe de Arctur (encabezados de sección) ==================== */
.encabezado-campus.con-arctur { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.encabezado-campus.con-arctur > div { min-width: 0; flex: 1 1 auto; }
.arctur-orbe {
  position: relative; flex: none; width: 168px; height: 168px; border-radius: 50%; overflow: hidden; padding: 0;
  cursor: pointer; border: 0; background: radial-gradient(circle at 50% 30%, #101a33, #060912 75%);
  box-shadow: 0 0 0 2px var(--obsidiana), 0 0 0 4px rgba(90,168,216,.45), 0 0 34px 6px rgba(90,168,216,.18), 0 18px 40px rgba(0,0,0,.55);
  transition: transform .2s, box-shadow .3s;
}
.arctur-orbe:hover { transform: scale(1.04); box-shadow: 0 0 0 2px var(--obsidiana), 0 0 0 4px rgba(90,168,216,.8), 0 0 44px 10px rgba(90,168,216,.3), 0 18px 40px rgba(0,0,0,.55); }
.arctur-orbe .arctur-poster { object-position: 50% 22%; }
.arctur-orbe .arctur-canvas { border-radius: 50%; }
.arctur-orbe.hablando { box-shadow: 0 0 0 2px var(--obsidiana), 0 0 0 4px var(--oro), 0 0 44px 10px rgba(216,184,119,.35), 0 18px 40px rgba(0,0,0,.55); }
.arctur-orbe.hablando::after { border-radius: 50%; }
.arctur-orbe-tip {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2; pointer-events: none;
  font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--celeste-claro);
  background: rgba(7,10,16,.7); border: 1px solid rgba(90,168,216,.35); border-radius: 999px; padding: 5px 9px;
  animation: cofre-parpadeo 2.4s ease-in-out infinite;
}
.arctur-orbe.hablando .arctur-orbe-tip { opacity: 0; animation: none; }
@media (max-width: 640px) {
  .encabezado-campus.con-arctur { gap: 16px; }
  .arctur-orbe { width: 110px; height: 110px; }
  .arctur-orbe-tip { font-size: 9px; padding: 4px 7px; bottom: 6px; }
}
.h1-sub { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-tenue); margin-top: 4px; }

/* ---- selector de rival (Fase 4): buscador con lista de iniciados ---- */
.duelo-retar-fila { position: relative; }
.rival-selector { flex: 1 1 200px; min-width: 0; display: flex; }
.rival-selector input { width: 100%; }
.rival-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; margin: 0; padding: 6px; list-style: none;
  max-height: 300px; overflow: auto; background: var(--piedra, #14171c); border: 1px solid var(--piedra-borde);
  border-radius: var(--radio); box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.rival-lista li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.rival-lista li:hover, .rival-lista li.activo { background: rgba(90,168,216,.12); }
.rival-lista .insignia { width: 32px; height: 32px; font-size: 12px; flex: none; object-fit: cover; }
.rival-lista .sin-avatar { display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); }
.rival-lista .rival-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rival-lista .rival-tx b { font-weight: 600; }
.rival-lista .rival-tx small { color: var(--texto-tenue); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rival-lista .duelo-tag { flex: none; }

/* ---- historial global de duelos ---- */
.duelo-fila.global .vs { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--texto-tenue); margin: 0 4px; }
.duelo-fila.global .gano { color: #9fe3ad; }
.duelo-fila.global .perdio { color: var(--texto-tenue); }
.duelo-fila.global .perdio strong { text-decoration: line-through; text-decoration-color: rgba(224,122,122,.6); }

/* ---- Etapa 3: retencion ---- */
.aviso-sagrada, .aviso-rescate {
  margin: 0; padding: 9px 22px; font-size: 14px; text-align: center; border-bottom: 1px solid var(--piedra-borde);
}
.aviso-sagrada { background: linear-gradient(90deg, rgba(216,184,119,.14), rgba(216,184,119,.04), rgba(216,184,119,.14)); color: var(--oro); animation: sagrada-latido 2.4s ease-in-out infinite; }
@keyframes sagrada-latido { 0%,100% { box-shadow: inset 0 -1px 0 rgba(216,184,119,.2); } 50% { box-shadow: inset 0 -1px 0 rgba(216,184,119,.7); } }
.aviso-rescate { background: rgba(224,122,122,.08); color: var(--texto); }
.aviso-rescate .mini-accion { margin-left: 8px; }
.aviso-rescate-caja {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; padding: 14px 18px;
  border: 1px solid rgba(224,122,122,.4); border-radius: var(--radio); background: rgba(224,122,122,.06);
}
.aviso-rescate-caja .boton { margin-left: auto; }

/* pregunta del dia */
.pdd .pdd-enunciado { font-size: 18px; line-height: 1.45; margin: 4px 0 14px; max-width: var(--medida); }
.pdd .arena-op.correcta { border-color: var(--ok); background: rgba(111,207,151,.12); color: var(--ok); }
.pdd .arena-op.tuya-mal { border-color: var(--error); background: rgba(224,122,122,.12); color: var(--error); }
.pdd-resultado { margin-top: 12px; }
.pdd-racha { font-family: var(--mono); }

/* cofre por niveles */
.cofre-nivel-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.cofre-nivel-tag.plata { color: #cfd6de; }
.cofre-nivel-tag.oro { color: var(--oro); }
.cofre-caja.nivel-plata .cofre-ic { filter: drop-shadow(0 0 10px rgba(207,214,222,.55)); }
.cofre-caja.nivel-oro .cofre-ic { filter: drop-shadow(0 0 14px rgba(216,184,119,.8)); animation: cofre-latido 2.2s ease-in-out infinite; }
@keyframes cofre-latido {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(246,210,122,.55)); }
  50% { filter: drop-shadow(0 0 12px rgba(246,210,122,.95)); } }
.cofre-nivel-nota { max-width: 520px; text-align: center; margin: 0; }
.cofre-premio.marco .insignia { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; }
.cofre-premio.nivel { color: var(--oro); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* calendario de la Orden */
.cal-nav a { padding: 0 8px; text-decoration: none; font-size: 18px; }
/* UX e2: minmax(0,1fr) + min-width:0; con `1fr` a secas, las celdas con aspect-ratio le pedían 68 px cada una
   y la grilla medía 454 px en un celular de 390: la Cámara entera scrolleaba de costado */
.cal-grilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 560px; }
.cal-grilla > * { min-width: 0; }
.cal-dow { font-family: var(--mono); font-size: 11px; color: var(--texto-tenue); text-align: center; padding-bottom: 2px; }
.cal-dia {
  aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--piedra-borde); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; font-size: 13px; color: var(--texto-tenue); position: relative;
}
.cal-dia.vacio { border: 0; }
.cal-dia.entro { background: rgba(90,168,216,.14); border-color: rgba(90,168,216,.45); color: var(--texto); }
.cal-dia.hueco { background: rgba(224,122,122,.06); border-style: dashed; }
.cal-dia.futuro { opacity: .35; }
.cal-dia.hoy { outline: 2px solid var(--celeste); outline-offset: 1px; }
.cal-dia b { font-weight: 600; }
.cal-marcas { display: flex; gap: 3px; height: 5px; }
.cal-marcas u, .cal-leyenda u { display: inline-block; width: 5px; height: 5px; border-radius: 50%; }
.m-est { background: var(--celeste); } .m-rin { background: var(--alerta); } .m-apr { background: var(--ok); } .m-due { background: #c58cff; }
.cal-leyenda { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 6px; align-items: center; }
.cal-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cal-hueco-ej { width: 12px; height: 12px; border: 1px dashed var(--piedra-borde); border-radius: 3px; background: rgba(224,122,122,.06); }
.cal-insignias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.insignia-mes { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--oro); color: var(--oro); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.insignia-mes svg { width: 14px; height: 14px; }
@media (max-width: 480px) { .cal-grilla { gap: 4px; } .cal-dia { font-size: 12px; border-radius: 8px; } }

/* QA jugabilidad 2026-09-14 */
.duelo-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.bc-titulo { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--dorado, #d8b877);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aviso-cofre-rescate { color: var(--dorado, #d8b877); }
.aviso-cofre-rescate a { color: inherit; text-decoration: underline; }
@media (max-width: 480px) { .bc-titulo { display: none; } }

/* ==================== Fase 4 · Etapa 4: social (feed, casas, respeto, perfil, rareza) ==================== */
.orden-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { .orden-grid { grid-template-columns: 1fr; } }
.feed-lista { list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 6px;
  max-height: 420px; overflow-y: auto; scrollbar-width: thin; }  /* el feed no empuja los tracks: scrollea adentro */
.feed-item { display: grid; grid-template-columns: 26px 18px 1fr auto; gap: 8px; align-items: center;
  padding: 7px 10px; border: 1px solid var(--piedra-borde); border-radius: 10px; background: var(--piedra); font-size: 13.5px; }
.feed-item.feed-rango { border-color: rgba(216,184,119,.45); background: rgba(216,184,119,.06); }
.feed-avatar { width: 26px; height: 26px; border-radius: 50%; }
.feed-ic { color: var(--celeste); line-height: 1; } .feed-ic .ic { width: 16px; height: 16px; }
.feed-rango .feed-ic { color: var(--oro); }
.feed-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-txt a { font-weight: 600; }
.feed-hace { color: var(--texto-tenue); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.casas h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave);
  display: flex; align-items: center; gap: 6px; }
.casas h3 .ic { width: 16px; height: 16px; }
.casa-fila { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--piedra-borde); border-radius: 10px; background: var(--piedra); }
.casa-fila.reptilianos { --casa: #5fe08f; } .casa-fila.arcturianos { --casa: #6ee7ff; }
.casa-fila { border-left: 3px solid var(--casa, var(--piedra-borde)); }
.casa-fila.lider { box-shadow: 0 0 0 1px var(--casa) inset, 0 0 14px -4px var(--casa); }
.casa-fila.mia .casa-nombre { color: var(--casa); }
.casa-nombre { font-weight: 600; display: flex; align-items: center; gap: 6px; } .casa-nombre .ic { width: 15px; height: 15px; }
.casa-nombre small { color: var(--texto-tenue); font-weight: 400; }
.casa-pts { font-family: var(--mono); font-size: 13px; text-align: right; } .casa-pts b { color: var(--oro); }
.casa-meta { grid-column: 1 / -1; color: var(--texto-tenue); font-size: 11.5px; font-family: var(--mono); }
.casa-pie { margin-top: 6px; font-size: 12px; }
/* perfil público: la casa se destaca al entrar (pedido de Jano 2026-09-15) — chip junto al alias +
   borde de la tarjeta del rango del color de la casa */
.casa-chip { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-left: 10px;
  padding: 4px 11px 4px 9px; border-radius: 999px; font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .02em; color: var(--casa, var(--texto)); border: 1px solid var(--casa, var(--piedra-borde));
  background: color-mix(in srgb, var(--casa, #888) 12%, transparent); box-shadow: 0 0 14px -6px var(--casa, transparent); }
.casa-chip .ic { width: 15px; height: 15px; }
.casa-chip.reptilianos { --casa: #5fe08f; } .casa-chip.arcturianos { --casa: #6ee7ff; }
.perfil .bill-rango.de-casa { border-left: 3px solid var(--casa); box-shadow: 0 0 18px -8px var(--casa) inset; }
.perfil .bill-rango.de-casa.reptilianos { --casa: #5fe08f; } .perfil .bill-rango.de-casa.arcturianos { --casa: #6ee7ff; }
@media (max-width: 640px) { .casa-chip { margin-left: 0; margin-top: 6px; font-size: 12px; } h1 .casa-chip { display: inline-flex; } }
/* la casa en cada fila del ranking (pedido de Jano 2026-09-15): pastilla chica del color de la casa
   junto al alias; en el celular queda solo el ícono */
.rk-casa { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin-left: 8px;
  padding: 2px 7px 2px 5px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--casa); border: 1px solid color-mix(in srgb, var(--casa) 55%, transparent);
  background: color-mix(in srgb, var(--casa) 10%, transparent); text-decoration: none !important; }
.rk-casa .ic { width: 11px; height: 11px; }
.rk-casa.reptilianos { --casa: #5fe08f; } .rk-casa.arcturianos { --casa: #6ee7ff; }
a.rk-fila:hover .rk-casa, a.rk-fila:focus-visible .rk-casa { color: var(--casa); }
@media (max-width: 640px) {
  .rk-casa { margin-left: 6px; padding: 2px 4px; flex: none; } .rk-casa b { display: none; } .rk-casa .ic { width: 12px; height: 12px; }
  /* el ellipsis recorta el alias, no la pastilla de la casa */
  .rk-nombre > span:first-child { display: flex; align-items: center; min-width: 0; }
  .rk-nombre > span:first-child .rk-link { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}
.casas-camara { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
@media (max-width: 560px) { .casas-camara { grid-template-columns: 1fr; } }
.casas-camara .casa-fila { margin-bottom: 0; }
/* respeto */
.aviso-respeto { background: rgba(110,231,255,.10); border-bottom: 1px solid rgba(110,231,255,.35); padding: 9px 16px;
  text-align: center; font-size: 13.5px; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.respeto-caja .bill-num .ic { width: 26px; height: 26px; vertical-align: -3px; color: var(--celeste); }
.respeto-form { margin-top: 8px; }
/* perfil */
.perfil-cab { grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 720px) { .perfil-cab { grid-template-columns: 1fr 1fr; } .perfil-cab .bill-rango { grid-column: 1 / -1; } }
@media (max-width: 1020px) and (min-width: 721px) { .camara-billetera, .perfil-cab { grid-template-columns: 1fr 1fr 1fr; } .camara-billetera .bill-rango, .perfil-cab .bill-rango { grid-column: 1 / -1; } }
.perfil-titulos { display: flex; flex-wrap: wrap; gap: 8px; }
.perfil-titulos .titulo-chip.equipado { border-color: var(--oro); color: var(--oro); }
.perfil-duelos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.perfil-duelos li { padding: 8px 12px; border: 1px solid var(--piedra-borde); border-radius: 10px; background: var(--piedra); font-size: 13.5px; }
.perfil-duelos li .ic { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
.perfil-duelos li.ganó { border-left: 3px solid #7fd88f; } .perfil-duelos li.perdió { border-left: 3px solid #d86b6b; }
.perfil-duelos li.empate { border-left: 3px solid var(--texto-tenue); }
.perfil-modulos { margin: 0; padding-left: 22px; columns: 2; column-gap: 24px; font-size: 13.5px; }
@media (max-width: 640px) { .perfil-modulos { columns: 1; } }
.perfil-modulos li { break-inside: avoid; padding: 3px 0; }
.perfil-modulos .mono { font-family: var(--mono); color: var(--texto-tenue); font-size: 12px; margin-right: 6px; }
.rk-link { color: inherit; } .rk-link:hover { color: var(--celeste); }
/* rareza de insignias: borde por rareza + chip */
.rareza-chip { display: inline-block; margin-top: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--texto-tenue); }
.logro.ganado.rareza-comun { border-color: rgba(154,163,173,.5); }
.logro.ganado.rareza-rara { border-color: #5aa8d8; box-shadow: 0 0 0 1px rgba(90,168,216,.25) inset; }
.logro.ganado.rareza-rara .rareza-chip { color: #5aa8d8; }
.logro.ganado.rareza-epica { border-color: #b48cff; box-shadow: 0 0 0 1px rgba(180,140,255,.35) inset, 0 0 14px -4px rgba(180,140,255,.6); }
.logro.ganado.rareza-epica .rareza-chip { color: #b48cff; }
.logro.ganado.rareza-legendaria { border-color: #f6d27a; box-shadow: 0 0 0 1px rgba(246,210,122,.4) inset, 0 0 18px -4px rgba(246,210,122,.8); }
.logro.ganado.rareza-legendaria .rareza-chip { color: #f6d27a; }
.logro.ganado.rareza-legendaria .logro-ic { color: #f6d27a; }

/* ===================== Fase 4 · Etapa 5 — Jugar más (Rush, Boss, misiones, constelación) ===================== */
/* --- Rush --- */
.rush-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
@media (max-width: 860px) { .rush-grid { grid-template-columns: 1fr; } }
.arena-stat.mal .arena-stat-num { color: var(--error); }
.rush-hud { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rush-reloj { font-family: var(--mono); font-size: 34px; font-weight: 700; color: var(--celeste); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.rush-reloj.urgente { color: var(--error); animation: rush-tic .5s steps(2) infinite; }
@keyframes rush-tic { 50% { opacity: .55; } }
.rush-marcador { font-family: var(--mono); font-size: 13px; color: var(--texto-suave); }
.rush-marcador b { color: var(--ok); font-size: 16px; }
.rush-penal-aviso { min-height: 1.4em; color: var(--error); font-family: var(--mono); font-weight: 700; margin: 8px 0 0; }
.rush .arena-op.correcta { border-color: var(--ok); background: rgba(111,207,151,.12); color: var(--ok); }
.rush .arena-op.tuya-mal { border-color: var(--error); background: rgba(224,122,122,.12); color: var(--error); }
.rush-ranking .track-cabecera { flex-wrap: wrap; }
.rush-tabla { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rush-tabla li { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0 10px; align-items: center;
  padding: 6px 10px; border: 1px solid var(--borde); border-radius: 8px; background: rgba(255,255,255,.015); }
.rush-tabla li.yo { border-color: rgba(110,231,255,.45); background: rgba(110,231,255,.05); }
.rush-tabla li:first-child .rush-pos { color: var(--oro); }
.rush-pos { font-family: var(--mono); font-size: 12px; color: var(--texto-tenue); grid-row: 1 / span 2; }
.rush-avatar { width: 30px; height: 30px; border-radius: 50%; grid-row: 1 / span 2; }
.rush-alias { font-size: 14px; color: var(--texto); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rush-alias:hover { color: var(--celeste); }
.rush-pts { font-family: var(--mono); font-size: 18px; color: var(--celeste); grid-row: 1 / span 2; }
.rush-tabla li small { grid-column: 3; font-size: 11px; }

/* --- Boss --- */
.ic-boss { color: var(--error); }
.boton-boss { background: linear-gradient(180deg, #5a1d1d, #3a1010); border-color: rgba(224,122,122,.5); color: #ffd9d9; }
.boton-boss:hover { background: linear-gradient(180deg, #6d2323, #451313); color: #fff; }
.ficha-boss { border-color: rgba(224,122,122,.35); }
.ficha-boss.vencido { border-color: rgba(111,207,151,.35); }
.ficha-boss h4 { color: var(--error); display: flex; align-items: center; gap: 6px; }
.ficha-boss.vencido h4 { color: var(--ok); }
.boss-panel { position: relative; }
.boss-estado { font-size: 16px; color: var(--ok); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.boss-vidas { display: inline-flex; gap: 5px; }
.boss-vidas i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(224,122,122,.6); display: inline-block; }
.boss-vidas i.hecha { background: var(--error); box-shadow: 0 0 8px rgba(224,122,122,.7); }
.boss-crono i { background: linear-gradient(90deg, #ff4d4d, #ffb347); }
.boss-enunciado { font-size: 19px; }
.boss-resultado { font-size: 16px; color: var(--texto); max-width: var(--medida); }
.arena-rep-porque { margin: 6px 0 0; font-size: 12.5px; }
/* modo boss: escena oscurecida, viñeta roja, Arctur en penumbra (pedido: "escena 3D oscurecida y FX más intensos") */
body.modo-boss { background: #05060a; }
body.modo-boss::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(120,0,0,.35) 100%); animation: boss-respira 2.6s ease-in-out infinite; }
@keyframes boss-respira { 50% { opacity: .55; } }
body.modo-boss .arctur-orbe { filter: brightness(.45) saturate(.6) drop-shadow(0 0 22px rgba(255,40,40,.5)); }
body.modo-boss .boss-juego { box-shadow: 0 0 0 1px rgba(224,122,122,.35), 0 0 40px -10px rgba(255,60,60,.6); }
body.boss-pulso .boss-juego { animation: boss-golpe .5s ease-out; }
@keyframes boss-golpe { 0% { transform: translate(0,0); } 20% { transform: translate(-3px, 2px); } 40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, 1px); } 100% { transform: none; } }
body.boss-vencido-fx #boss-fin { animation: boss-victoria 1.2s ease-out; }
@keyframes boss-victoria { 0% { box-shadow: 0 0 0 0 rgba(246,210,122,.8); } 100% { box-shadow: 0 0 0 40px rgba(246,210,122,0); } }
@media (prefers-reduced-motion: reduce) { body.modo-boss::before, body.boss-pulso .boss-juego, .rush-reloj.urgente { animation: none; } }

/* --- misiones: tríada --- */
.mision-triada { margin: 12px 0 0; color: var(--ok); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --- Marco Tríada (exclusivo: tres anillos blancos) --- */
.insignia.marco-triada { --anillo: #f4f7ff; --anillo-brillo: rgba(244,247,255,.7);
  box-shadow: 0 0 0 2px var(--obsidiana), 0 0 0 3.5px #f4f7ff, 0 0 0 5.5px var(--obsidiana), 0 0 0 7px #c9d3ff,
              0 0 0 9px var(--obsidiana), 0 0 0 10.5px #f4f7ff, 0 0 var(--marco-glow) var(--marco-glow-sp) var(--marco-glow-color);
  animation: marco-triada 2.8s ease-in-out infinite; }
.bc-avatar.insignia.marco-triada, .rk-avatar.insignia.marco-triada { --marco-glow: 10px; --marco-glow-sp: 3px;
  box-shadow: 0 0 0 1.5px var(--obsidiana), 0 0 0 2.5px #f4f7ff, 0 0 0 4px var(--obsidiana), 0 0 0 5px #c9d3ff,
              0 0 0 6.5px var(--obsidiana), 0 0 0 7.5px #f4f7ff, 0 0 var(--marco-glow) var(--marco-glow-sp) var(--marco-glow-color); }
@keyframes marco-triada {
  0%, 100% { --marco-glow-color: rgba(244,247,255,.35); --marco-glow-sp: 2px; }
  50% { --marco-glow-color: rgba(244,247,255,.9); --marco-glow-sp: 7px; } }

/* --- constelación --- */
.const-lista { display: flex; flex-direction: column; gap: 14px; }
.const-fig { margin: 0; }
.const-fig.bloqueada { opacity: .55; }
.const-svg { width: 100%; height: auto; display: block; border-radius: var(--radio); border: 1px solid var(--borde);
  background: radial-gradient(ellipse at 30% 20%, rgba(44,106,148,.18), transparent 55%), radial-gradient(ellipse at 75% 80%, rgba(216,184,119,.08), transparent 50%), #070912; }
.const-fondo { fill: #fff; opacity: .28; }
.const-linea { stroke: rgba(255,255,255,.09); stroke-width: 1; stroke-dasharray: 3 4; }
.const-linea.media { stroke: rgba(110,231,255,.35); stroke-dasharray: 2 3; }
.const-linea.viva { stroke: rgba(216,184,119,.6); stroke-width: 1.4; stroke-dasharray: none; }
.const-nodo .const-estrella { fill: #2b3140; stroke: rgba(255,255,255,.18); stroke-width: 1; }
.const-nodo.abierto .const-estrella { fill: #6ee7ff; stroke: #fff; animation: const-late 1.8s ease-in-out infinite; }
.const-nodo.aprobado .const-estrella { fill: #fff3c4; stroke: #d8b877; stroke-width: 1.5; }
.const-halo.abierto { animation: const-late 1.8s ease-in-out infinite; }
@keyframes const-late { 50% { opacity: .45; } }
.const-aro { fill: none; stroke: #ff7a7a; stroke-width: 1.3; stroke-dasharray: 3 2; animation: const-gira 10s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes const-gira { to { transform: rotate(360deg); } }
.const-num { font-family: var(--mono); font-size: 9.5px; fill: var(--texto-tenue); }
.const-nodo.aprobado .const-num { fill: var(--oro); }
.const-nodo.abierto .const-num { fill: var(--celeste); }
.const-link { cursor: pointer; }
.const-link:hover .const-estrella { stroke: #fff; stroke-width: 2; }
.const-link:hover .const-num { fill: #fff; }
.const-link:focus-visible .const-estrella { stroke: var(--celeste); stroke-width: 2.5; }
@media (prefers-reduced-motion: reduce) { .const-nodo.abierto .const-estrella, .const-halo.abierto, .const-aro { animation: none; } }
.const-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radio); }
/* en el celular la constelación se desplaza de costado (las estrellas quedan tocables) */
@media (max-width: 600px) { .const-svg { width: 210%; max-width: none; } .const-num { font-size: 11px; } }

/* --- regalos del rector: formulario con etiquetas (pedido de Jano 15/09: "no sé cuál es punto o cuál es dharma") --- */
.regalo-form { margin: 0 0 16px; max-width: 860px; }
.regalo-presets { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.regalo-preset { font: inherit; font-size: 12.5px; color: var(--texto-suave); background: rgba(255,255,255,.03); border: 1px solid var(--borde);
  border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.regalo-preset:hover { color: var(--texto); border-color: rgba(110,231,255,.45); }
.regalo-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.regalo-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.regalo-campo.ancho { grid-column: 1 / -1; }
.regalo-lbl { font-size: 13px; color: var(--texto); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.regalo-lbl small { color: var(--texto-tenue); font-size: 11.5px; font-weight: 400; }
/* UX e2 (2026-09-15, noche): los micro-momentos de la Camara. Se celebran UNA sola vez
   (economia.hitos_recien marca visto al leer), y los dos se apagan con prefers-reduced-motion.
   🚨 Este bloque estaba DESTRUIDO: la primera linea del archivo era `. -4px; border-radius...`,
   sin selector, y un selector invalido hace que el parser CSS descarte la regla entera hasta la
   siguiente `}` — con lo cual `animation: ascenso-pulso` tampoco se aplicaba. Resultado: la
   mascota no eclosionaba y el aro dorado del ascenso de rango no existia, en produccion, sin que
   nadie lo viera. Lo venia marcando t22 desde que se escribio, leido como "falla conocida".
   Reconstruido el 2026-09-26 desde la especificacion de docs/auditorias/2026-09-15-ux-e2.md. */
.bill-mascota.recien .mascota { animation: masc-eclosion 1.6s cubic-bezier(.34, 1.56, .64, 1) 1;
  transform-origin: center bottom; }
@keyframes masc-eclosion { 0% { transform: scale(.82); filter: brightness(.85); }
  55% { transform: scale(1.1); filter: brightness(1.4); }
  100% { transform: scale(1); filter: brightness(1); } }
/* el aro que pulsa tres veces alrededor del avatar cuando subis de grado */
.bill-rango.recien .rango-avatar-link { position: relative; }
.bill-rango.recien .rango-avatar-link::before { content: ""; position: absolute; inset: -4px;
  border-radius: 50%; pointer-events: none;
  animation: ascenso-pulso 1.5s ease-out 3; }
@keyframes ascenso-pulso { 0% { box-shadow: 0 0 0 0 rgba(216,184,119,.75); } 100% { box-shadow: 0 0 0 26px rgba(216,184,119,0); } }
@media (prefers-reduced-motion: reduce) { .bill-mascota.recien .mascota, .bill-rango.recien .rango-avatar-link::before { animation: none; } }
/* el renglon que explica el hito, debajo de la mascota o del rango */
.hito-recien { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--oro);
  font-family: var(--serif); letter-spacing: .01em; }
.hito-recien b { color: #fff3c4; font-weight: 600; }
.hito-recien a { color: var(--oro); text-decoration: underline dotted; }

/* examen aprobado con ascenso de rango: chip dorado al final de la fila de premios */
.premios-examen .cofre-premio.ascenso { color: #fff3c4; border-color: rgba(216,184,119,.6); font-size: 15px;
  background: rgba(216,184,119,.08); box-shadow: 0 0 18px -6px rgba(216,184,119,.8); }
.premios-examen .cofre-premio.ascenso .cofre-lbl { color: var(--oro); text-transform: none; letter-spacing: .02em; font-family: var(--serif); font-size: 15px; }

/* la racha del chip late una vez al llegar a 3, 7 y 14 (base.html marca el hito en localStorage) */
.bc-racha.latir { animation: latir-racha 1.8s cubic-bezier(.34, 1.56, .64, 1) 1; transform-origin: center; }
@keyframes latir-racha { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.45); color: #ffd27a; text-shadow: 0 0 12px rgba(224,164,88,.9); }
  40% { transform: scale(1.05); } 60% { transform: scale(1.3); color: #ffd27a; } }
@media (prefers-reduced-motion: reduce) { .bc-racha.latir { animation: none; } }

/* iniciación (P3-1): ayuda bajo el alias y botón "ver" en la clave */
.campo-ayuda { display: block; margin-top: 6px; font-size: 12px; color: var(--texto-tenue); letter-spacing: 0; text-transform: none; }
.campo-clave { position: relative; }
.campo-clave input { padding-right: 76px; }
.ver-clave { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 1px solid var(--piedra-borde);
  border-radius: 999px; color: var(--texto-suave); font: 600 11px var(--sans); letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 10px; cursor: pointer; }
.ver-clave:hover, .ver-clave[aria-pressed="true"] { color: var(--celeste-claro); border-color: var(--celeste-hondo); }

/* la tira "Hoy": el circuito diario en una fila de chips; lo pendiente brilla, lo hecho se apaga */
.hoy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 26px; padding: 10px 12px;
  border: 1px solid var(--piedra-borde); border-radius: 14px; background: rgba(13,16,25,.7); }
.hoy-lbl { font-family: var(--serif); font-size: 15px; letter-spacing: .06em; color: var(--texto); margin: 0 6px 0 2px; }
.hoy-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 999px;
  border: 1px solid var(--piedra-borde); background: var(--piedra); color: var(--texto-suave); font-size: 12.5px;
  text-decoration: none; line-height: 1; white-space: nowrap; transition: border-color .15s, background-color .15s, color .15s; }
.hoy-chip .ic { width: 14px; height: 14px; flex: none; opacity: .85; }
.hoy-chip b { font-family: var(--mono); font-weight: 600; font-size: 11.5px; color: var(--texto); }
.hoy-chip.pendiente { color: var(--celeste-claro); border-color: rgba(90,168,216,.45); background: rgba(90,168,216,.08);
  box-shadow: 0 0 0 1px rgba(90,168,216,.12), 0 0 16px -6px rgba(90,168,216,.9); }
.hoy-chip.pendiente b { color: var(--celeste-claro); }
.hoy-chip.pendiente::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--celeste-claro);
  box-shadow: 0 0 8px var(--celeste); animation: cofre-parpadeo 2.2s ease-in-out infinite; }
a.hoy-chip:hover { text-decoration: none; border-color: var(--celeste-hondo); color: var(--texto); }
a.hoy-chip.pendiente:hover { background: rgba(90,168,216,.16); color: #fff; }
.hoy-chip.hecho { opacity: .6; }
.hoy-chip.hecho b::before { content: "✓ "; color: var(--ok); }
.hoy-chip.racha { color: var(--alerta); border-color: rgba(224,164,88,.35); }
.hoy-chip.racha b { color: var(--alerta); }
.hoy-resto { margin-left: auto; font-size: 12px; }
@media (max-width: 640px) {
  .hoy { padding: 10px; gap: 6px; }
  .hoy-lbl { width: 100%; margin: 0 0 2px 2px; font-size: 14px; }
  .hoy-chip { padding: 8px 11px 8px 9px; font-size: 12px; }
  .hoy-resto { width: 100%; margin: 4px 0 0 2px; }
}
@media (prefers-reduced-motion: reduce) { .hoy-chip.pendiente::after { animation: none; } }

/* P2-6 rector: índice de secciones, filtro de la camada e invitación recién creada */
.rector-indice { margin: -6px 0 26px; }
.rector-indice a small { color: var(--texto-tenue); font-size: 11px; margin-left: 4px; font-family: var(--mono); }
main.marco section[id] { scroll-margin-top: 140px; }
.rector-filtro { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; max-width: 420px; }
.rector-filtro input { flex: 1; min-width: 0; width: 100%; padding: 10px 13px; background: var(--piedra); border: 1px solid var(--piedra-borde);
  border-radius: var(--radio); color: var(--texto); font-family: var(--sans); font-size: 14px; -webkit-appearance: none; appearance: none; }
.rector-filtro .meta { flex: none; font-family: var(--mono); font-size: 12px; color: var(--texto-tenue); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fila.nueva { border-color: var(--oro); box-shadow: 0 0 0 1px rgba(216,184,119,.35), 0 0 22px -8px var(--oro); }
.fila.nueva .codigo { color: var(--oro); }
@media (max-width: 640px) {
  .rector-indice a { padding: 8px 10px; font-size: 12.5px; }
}

/* racha en el chip de la barra (P3-3) y hora sagrada corta en el celular (P3-4) */
.billetera-chip .bc-racha { color: var(--alerta); display: inline-flex; align-items: center; gap: 3px; }
.billetera-chip .bc-racha .ic { width: 13px; height: 13px; }
.solo-movil { display: none; }
@media (max-width: 640px) { .solo-escritorio { display: none; } .solo-movil { display: inline; } }

/* ==================== Tanda UX 2026-09-16 ("aplica todas") ==================== */
/* 2: la billetera de la barra baja un tono: Estudiar es el único botón caliente */
.billetera-chip { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.07); }
.billetera-chip:hover { background: rgba(255,255,255,.05); border-color: var(--piedra-borde); }

/* 3 + 4: campus — encabezado en dos columnas reales, barra de progreso a todo el ancho con la cuenta al lado,
   y la tira "Hoy" pegada debajo */
.encabezado-campus.con-arctur > div { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.encabezado-campus.con-arctur > div > .progreso-linea, .encabezado-campus.con-arctur > div > .barra-progreso { align-self: stretch; }
.encabezado-campus.campus-cab { padding-bottom: 20px; }
.progreso-linea { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.progreso-linea .barra-progreso { flex: 1 1 auto; max-width: none; margin: 0; height: 6px; border-radius: 3px; }
.progreso-linea .barra-progreso i { border-radius: 3px; }
.progreso-txt { flex: none; font-family: var(--mono); font-size: 12px; color: var(--texto-tenue); white-space: nowrap; }
.progreso-txt b { color: var(--celeste-claro); font-weight: 600; }
.campus-cab + .aviso-jurado, .campus-cab + .hoy { margin-top: 0; }
.hoy { margin-top: 0; }

/* 5: la constelación no se lleva 330 px en escritorio; en el celular se pliega */
.const-svg { height: 240px; }
.const-summary { display: none; }
@media (max-width: 640px) {
  .const-svg { height: auto; }
  .const-summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; margin: 0 0 10px;
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--celeste); }
  .const-summary::-webkit-details-marker { display: none; }
  .const-summary::before { content: "›"; display: inline-block; font-size: 16px; line-height: 1; transition: transform .2s; }
  .const-plegable[open] > .const-summary::before { transform: rotate(90deg); }
}

/* 6 + 9: Cámara — Puntuación y Dharma Coins en una sola tarjeta apilada, tendencia semanal y atajo al Mercado negro */
.bill-doble { gap: 14px; justify-content: center; }
.bill-linea { display: flex; flex-direction: column; gap: 4px; }
.bill-linea.oro .bill-num { color: var(--oro); }
.bill-linea + .bill-linea { padding-top: 14px; border-top: 1px solid var(--piedra-borde); }
.bill-tend { display: block; font-style: normal; text-transform: none; letter-spacing: 0; font-family: var(--mono); font-size: 11px; color: var(--ok); margin-top: 3px; }
.bill-atajo { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 4px; padding: 5px 10px 5px 8px;
  border-radius: 999px; border: 1px solid var(--piedra-borde); background: rgba(255,255,255,.03);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); text-decoration: none; }
.bill-atajo .ic { width: 13px; height: 13px; }
.bill-atajo:hover { color: var(--celeste-claro); border-color: rgba(90,168,216,.45); text-decoration: none; }
@media (min-width: 1021px) {
  .camara-billetera:not(.perfil-cab) .bill-doble { grid-row: 1 / span 2; }
}
@media (max-width: 720px) {
  .camara-billetera:not(.perfil-cab) .bill-doble { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .bill-doble .bill-linea { flex: 1 1 40%; }
  .bill-doble .bill-linea + .bill-linea { padding-top: 0; border-top: 0; padding-left: 14px; border-left: 1px solid var(--piedra-borde); }
  .bill-doble .bill-atajo { flex: 0 0 100%; align-self: auto; justify-content: center; margin-top: 2px; }
  .camara-billetera:not(.perfil-cab) .bill-mascota { grid-column: 1 / -1; }
}

/* 7: jerarquía en la tarjeta del rango */
.bill-rango .rango-nombre { font-size: 26px; line-height: 1.1; }
.bill-rango .rango-nombre .pj-link { font-size: 11px; vertical-align: middle; }
.rango-barra { position: relative; height: 22px; max-width: none; margin: 14px 0 10px; border-radius: 6px; background: rgba(255,255,255,.05); border: 1px solid var(--piedra-borde); }
.rango-barra i { border-radius: 5px; opacity: .55; }
.rango-barra-txt { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 10px; font-size: 12px; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rango-barra-txt strong { margin: 0 4px; color: var(--celeste-claro); }
.rango-barra-txt em { margin-left: 4px; font-style: normal; color: var(--texto-suave); }
.rango-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bill-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; color: var(--texto-suave);
  border: 1px solid var(--piedra-borde); background: rgba(255,255,255,.03); }
.bill-chip .ic { width: 14px; height: 14px; }
.bill-chip strong { color: var(--texto); margin: 0 2px; }
.bill-chip .oro { color: var(--oro); }
.bill-chip .rk-mi-puesto { display: inline-flex; align-items: center; gap: 6px; border-bottom: 0; color: inherit; }
.bill-chip .rk-mi-puesto:hover { color: var(--celeste-claro); }
.pie-camara { margin: 26px 0 0; text-align: center; }
.pie-camara a { color: var(--texto-tenue); }
.pie-camara a:hover { color: var(--celeste-claro); }

/* 8: secciones plegables de la Cámara (Senda, Medallas, Movimientos): en escritorio se ven como siempre y el
   click pliega; en el celular arrancan cerradas salvo novedad (lo cierra el JS de camara.html) */
details.plegable > summary { cursor: pointer; list-style: none; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary h2 { pointer-events: none; }
.pleg-flecha { display: inline-block; font-size: 16px; line-height: 1; color: var(--texto-tenue); transition: transform .2s; margin-left: 4px; }
details.plegable[open] > summary .pleg-flecha { transform: rotate(90deg); }
details.plegable:not([open]) > summary { margin-bottom: 0; }
.mov-mas { margin-top: 8px; }
.mov-mas > summary { display: inline-flex; list-style: none; cursor: pointer; }
.mov-mas > summary::-webkit-details-marker { display: none; }
.mov-mas[open] > summary { margin-bottom: 8px; }

/* 11 + 12 + 13: ranking — borde del color de la casa (el podio gana), puntos de casa grandes con barra proporcional,
   título equipado más tenue en la segunda línea */
.rk-fila:not(.rk-cab) { border-left-width: 3px; }
.rk-fila.casa-reptilianos:not(.podio) { border-left-color: rgba(95,224,143,.7); }
.rk-fila.casa-arcturianos:not(.podio) { border-left-color: rgba(110,231,255,.7); }
.rk-fila.yo.casa-reptilianos:not(.podio), .rk-fila.yo.casa-arcturianos:not(.podio) { border-left-color: var(--celeste-hondo); }
.rk-nombre .titulo-chip { opacity: .72; }
.casas-ranking .casa-fila { grid-template-columns: 1fr auto; padding: 14px 16px; }
.casas-ranking .casa-pts { font-size: 12px; color: var(--texto-tenue); }
.casas-ranking .casa-pts b { display: block; font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--casa, var(--oro)); margin-bottom: 2px; }
.casa-barra { grid-column: 1 / -1; display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; margin: 6px 0 2px; }
.casa-barra i { display: block; height: 100%; background: var(--casa, var(--oro)); border-radius: 3px; transition: width .5s ease; }

/* 14 + 15: Mercado negro — legendarias a doble ancho con la previa a 140 px; "te faltan N" con barra */
.tienda-cuerpo { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
.tienda-falta { display: flex; flex-direction: column; gap: 5px; }
.falta-barra { margin: 0; max-width: none; height: 4px; }
.falta-barra i { background: linear-gradient(90deg, var(--oro), #ffe9a3); }
@media (min-width: 640px) {
  .tienda-item.legendaria { grid-column: span 2; display: grid; grid-template-columns: 170px 1fr; grid-template-rows: auto 1fr; column-gap: 18px; }
  .tienda-item.legendaria > .tienda-tipo { grid-column: 1 / -1; }
  .tienda-item.legendaria > .tienda-preview { grid-column: 1; grid-row: 2; min-height: 150px; margin: 0; align-self: center; }
  .tienda-item.legendaria > .tienda-cuerpo { grid-column: 2; grid-row: 2; }
}

/* 18: estados vacíos con ícono, frase y qué hacer */
.vacio { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 14px 16px; border: 1px dashed var(--piedra-borde); border-radius: var(--radio); color: var(--texto-suave); font-size: 14px; }
.vacio > .ic { grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--texto-tenue); }
.vacio > small { color: var(--texto-tenue); font-size: 12.5px; }
.vacio > small b { color: var(--texto-suave); }
.pj-nada-txt { margin: 6px 0 0; }
@media (max-width: 640px) {
  .rango-barra-txt { font-size: 11px; padding: 0 8px; }
  .bill-rango .rango-nombre { font-size: 22px; }
}

/* guía de Arctur, último paso (pedido de Jano 16/09): la barra entera queda dentro del foco y los botones de
   los que habla laten (.tuto-marca la pone el JS de _tutorial.html) */
.con-tuto .tuto-marca { position: relative; z-index: 1; color: var(--celeste-claro); background: rgba(90,168,216,.14); border-color: rgba(110,231,255,.7);
  box-shadow: 0 0 0 2px rgba(110,231,255,.45), 0 0 22px rgba(110,231,255,.55); animation: tuto-late 1.3s ease-in-out infinite; }
.con-tuto .tuto-marca .ic { opacity: 1; }
@keyframes tuto-late { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px rgba(110,231,255,.45), 0 0 22px rgba(110,231,255,.55); }
  50% { transform: scale(1.07); box-shadow: 0 0 0 3px rgba(110,231,255,.8), 0 0 30px rgba(110,231,255,.85); } }
@media (prefers-reduced-motion: reduce) { .con-tuto .tuto-marca { animation: none; } }

/* Escudos oficiales de las casas en 3D (16/09, herramientas/escudos3d): girando en "Los iniciados" del ranking.
   Nunca `filter` sobre el <img> del WebP animado (dibuja un cuadrado oscuro): el halo va en el ::before del contenedor. */
.casas-ranking .casa-fila { grid-template-columns: auto 1fr auto; column-gap: 14px; align-items: center; }
.casas-ranking .casa-escudo { grid-row: 1 / span 3; grid-column: 1; position: relative; width: 92px; height: 92px; isolation: isolate; }
.casas-ranking .casa-escudo::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--casa) 28%, transparent) 0%, transparent 70%); }
.casas-ranking .casa-escudo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.casas-ranking .casa-nombre { grid-column: 2; }
.casas-ranking .casa-pts { grid-column: 3; }
.casas-ranking .casa-barra, .casas-ranking .casa-meta { grid-column: 2 / -1; }
@media (max-width: 560px) { .casas-ranking .casa-escudo { width: 72px; height: 72px; } }
/* escudo de la casa en cada fila del ranking (Jano 16/09: solo el escudo, sin pastilla, en su propia columna
   centrada entre el número y la foto, a la misma distancia de los dos) y en el chip del perfil */
.rk-fila { grid-template-columns: 36px 30px 1fr 1.3fr auto; gap: 12px; }
/* el número va alineado a la derecha de su columna: así la distancia número→escudo es fija (no depende de si tiene 1, 2 o 3 cifras) e igual a escudo→foto */
.rk-fila .rk-puesto { text-align: right; }
.rk-escudo { width: 30px; height: 30px; object-fit: contain; flex: none; justify-self: center; margin-left: -1px; }   /* -1: el anillo de la foto se come ~1.5 px del lado derecho */
.rk-escudo.hueco { display: block; }   /* sin casa (rector) o la cabecera: deja el hueco para alinear (no es .vacio: esa clase es el estado vacío con borde) */
.rk-cab .rk-escudo.hueco { height: 0; }
.casa-chip .rk-escudo { width: 24px; height: 24px; }
@media (max-width: 640px) { .rk-fila { grid-template-columns: 26px 28px 1fr auto; gap: 8px; } .rk-escudo { width: 28px; height: 28px; } }

/* ---- Exploits del Mercado negro (2026-09-20): consumibles de un solo uso. Rojo apagado = "dobla una regla" ---- */
.tienda-item.exploit { border-color: rgba(224,122,122,.35); }
.tienda-item.exploit:hover, .tienda-item.exploit.tocado { border-color: rgba(224,122,122,.75); box-shadow: 0 10px 28px rgba(224,122,122,.12); }
.tienda-item.exploit .tienda-tipo { color: #f0b3b3; }
.exploit-preview { position: relative; color: #f0b3b3; filter: drop-shadow(0 0 14px rgba(224,122,122,.4)); }
.exploit-preview svg:first-child { width: 58px; height: 58px; }
.exploit-preview .exploit-reset { position: absolute; width: 84px; height: 84px; opacity: .8; }
.chip-exploit { border-color: rgba(224,122,122,.5); color: #f0b3b3; }
.boss-perdido-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.boss-perdido-acciones .boton { width: auto; }
.boton.boton-exploit { background: linear-gradient(180deg, #7a2f2f, #5a2222); border-color: rgba(240,179,179,.55); color: #ffe1e1; box-shadow: 0 0 18px rgba(224,122,122,.28); }
.boton.boton-exploit:hover { background: linear-gradient(180deg, #8f3737, #6a2828); }
.boton-exploit-vacio { color: #f0b3b3; border-color: rgba(224,122,122,.4); }

/* ---------------------------------------------------------------- Casino (Etapa A) */
.casino-pozo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: 18px 20px; border-radius: var(--radio);
  background: linear-gradient(135deg, var(--piedra-alta), var(--piedra));
  border: 1px solid var(--piedra-borde);
}
.casino-pozo-lbl { font-weight: 600; color: var(--oro); }
.casino-pozo-monto { display: inline-flex; align-items: baseline; gap: 6px; font-size: 1.6rem; font-weight: 700; }
.casino-pozo-tope { font-size: .8rem; font-weight: 500; color: var(--tenue); }

/* El podio semanal del pozo: se reparte los domingos entre los 5 que más estudiaron. */
.pozo-tabla {
  margin-top: 10px; padding: 14px 16px; border-radius: var(--radio);
  background: rgba(255,255,255,.02); border: 1px solid var(--piedra-borde);
}
.pozo-tabla-tit {
  font-weight: 600; color: var(--oro); font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px;
}
.pozo-podio { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pozo-fila {
  display: grid; grid-template-columns: 2.2rem 1fr auto auto; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,.025);
}
/* el resaltado de "sos vos" va por clase desde el server, no pintando nodos a mano en JS */
.pozo-fila-yo { background: rgba(213,178,94,.10); border: 1px solid rgba(213,178,94,.28); }
.pozo-puesto { color: var(--oro); font-weight: 700; font-variant-numeric: tabular-nums; }
.pozo-alias { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pozo-pts { color: var(--tenue); font-size: .85rem; font-variant-numeric: tabular-nums; }
.pozo-parte {
  display: inline-flex; align-items: center; gap: 5px; font-weight: 700;
  font-variant-numeric: tabular-nums; min-width: 5.5rem; justify-content: flex-end;
}
.pozo-vacio, .pozo-pie, .pozo-afuera { margin: 8px 2px 0; }
.pozo-pie { font-size: .78rem; opacity: .75; }
.pozo-cierre { float: right; font-weight: 500; letter-spacing: 0; text-transform: none;
               font-size: .78rem; color: var(--tenue); }
.pozo-pct { font-style: normal; font-weight: 500; font-size: .72rem; color: var(--tenue);
            margin-left: 5px; }
@media (max-width: 560px) {
  /* 🚨 sin posición explícita, `pozo-pts` (columna 2/-1, fila auto) empujaba a `pozo-parte` a una
     TERCERA fila en la columna 1: el premio quedaba abajo a la izquierda, fuera de la lectura. */
  .pozo-fila  { grid-template-columns: 1.9rem 1fr auto; row-gap: 1px; }
  .pozo-alias { grid-area: 1 / 2 / 2 / 3; }
  .pozo-parte { grid-area: 1 / 3 / 2 / 4; min-width: 0; }
  .pozo-pts   { grid-area: 2 / 2 / 3 / 4; }
  .pozo-cierre { float: none; display: block; margin-top: 2px; }
}
.casino-apuesta { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin: 14px 0; }
.casino-apuesta input[type="number"] {
  width: 140px; padding: 9px 11px; font: inherit; font-size: 15px; color: var(--texto);
  background: rgba(255,255,255,.04); border: 1px solid var(--piedra-borde); border-radius: 8px;
  outline: none; transition: border-color .15s ease;
}
.casino-apuesta input[type="number"]:focus { border-color: rgba(90,168,216,.6); }
.casino-mesa {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  margin: 18px 0; padding: 24px; border-radius: var(--radio);
  background: var(--piedra); border: 1px solid var(--piedra-borde);
  transition: filter .3s ease;
}
.casino-marcador { display: flex; align-items: baseline; gap: 8px; }
.casino-marcador-punto { font-size: 1.3rem; font-weight: 700; color: var(--oro); min-width: 1.2em; text-align: center; }
.casino-carta {
  width: 72px; height: 100px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: var(--piedra-alta); border: 1px solid var(--celeste-hondo); font-size: 1.8rem; font-weight: 700;
  color: var(--celeste-claro); transition: border-color .3s ease, color .3s ease;
}
.casino-carta-siguiente.acierto { border-color: var(--ok); color: var(--ok); }
.casino-carta-siguiente.fallo { border-color: var(--error); color: var(--error); }
.casino-prompt { margin: 0; font-weight: 600; color: var(--texto-suave); }
.casino-elegir { display: flex; gap: 12px; }
.casino-resultado { margin-top: 10px; font-weight: 600; }
.casino-resultado.gana { color: var(--ok); }
.casino-resultado.pierde { color: var(--error); }
.casino-resultado.empate { color: var(--texto-suave); }
.casino-resultado.error { color: var(--error); }
.casino-instructivo {
  max-width: 440px; border: 1px solid var(--piedra-borde); border-radius: var(--radio);
  background: var(--piedra-alta); color: var(--texto); padding: 22px;
}
.casino-instructivo::backdrop { background: rgba(0,0,0,.6); }
.casino-instructivo h3 { margin: 0 0 12px; color: var(--oro); }
/* el titulo lleva autofocus: showModal enfocaba "Entendido" (lo unico enfocable) y en el celular el
   instructivo abria scrolleado al FINAL. El foco en el titulo no necesita anillo (UX 28/09). */
.casino-instructivo h3:focus { outline: none; }
.casino-instructivo ul { margin: 0 0 16px; padding-left: 20px; }
.casino-instructivo li { margin-bottom: 6px; color: var(--texto-suave); }

.casino-campo-apuesta { max-width: 200px; }
.casino-campo-apuesta input[type="number"] {
  width: 140px; padding: 9px 11px; font: inherit; font-size: 15px; color: var(--texto);
  background: rgba(255,255,255,.04); border: 1px solid var(--piedra-borde); border-radius: 8px;
  outline: none; transition: border-color .15s ease;
}
.casino-campo-apuesta input[type="number"]:focus { border-color: rgba(90,168,216,.6); }
.casino-apuestas { display: flex; flex-wrap: wrap; gap: 22px; margin: 14px 0; }
.casino-grupo { display: flex; flex-direction: column; gap: 8px; }
.casino-grupo .casino-elegir { flex-wrap: wrap; align-items: center; }
.casino-grupo input[type="number"] {
  width: 72px; padding: 9px 10px; font: inherit; font-size: 15px; color: var(--texto);
  background: rgba(255,255,255,.04); border: 1px solid var(--piedra-borde); border-radius: 8px;
  outline: none; transition: border-color .15s ease;
}
.casino-grupo input[type="number"]:focus { border-color: rgba(90,168,216,.6); }

/* Ruleta: celeste arcturiano / escama reptiliano — mismos tonos que las Casas (--casa en .casa-fila) */
.ruleta-btn-celeste {
  background: linear-gradient(180deg, #8fe9ff, #6ee7ff); border-color: #6ee7ff; color: #0b1a26;
}
.ruleta-btn-celeste:hover { background: #6ee7ff; }
.ruleta-btn-escama {
  background: linear-gradient(180deg, #7bf0a8, #5fe08f); border-color: #5fe08f; color: #0b1a26;
}
.ruleta-btn-escama:hover { background: #5fe08f; }
.ruleta-mesa {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  margin: 18px 0; padding: 24px; border-radius: var(--radio);
  background: var(--piedra); border: 1px solid var(--piedra-borde);
}
.ruleta-bocha {
  width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--piedra-alta); border: 2px solid var(--piedra-borde); font-size: 1.7rem; font-weight: 700;
  color: var(--texto-suave); transition: border-color .3s ease, color .3s ease;
}
.ruleta-bocha.girando { animation: ruleta-girar .9s linear infinite; }
.ruleta-bocha.revelada.celeste { border-color: #6ee7ff; color: #6ee7ff; }
.ruleta-bocha.revelada.escama { border-color: #5fe08f; color: #5fe08f; }
.ruleta-bocha.revelada.ojo { border-color: var(--oro); color: var(--oro); }
@keyframes ruleta-girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.dados-mesa { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 18px 0; padding: 24px; }
.dado {
  width: 72px; height: 72px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--piedra-alta); border: 1px solid var(--celeste-hondo); font-size: 1.6rem; font-weight: 700;
  color: var(--celeste-claro); transition: border-color .3s ease, color .3s ease;
}
.dado.rodando { animation: dado-sacudir .35s ease-in-out infinite; }
.dado.revelado.gana { border-color: var(--ok); color: var(--ok); }
.dado.revelado.pierde { border-color: var(--error); color: var(--error); }
@keyframes dado-sacudir {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

.slot-mesa { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0; padding: 24px; }
.slot-tambor {
  width: 64px; height: 64px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--piedra-alta); border: 1px solid var(--piedra-borde); font-size: 1.7rem; font-weight: 700;
  color: var(--texto-suave); transition: border-color .3s ease, color .3s ease;
}
.slot-tambor img { width: 34px; height: 34px; }
.slot-tambor.girando { animation: dado-sacudir .3s ease-in-out infinite; }
.slot-tambor.revelado.ojo { border-color: var(--oro); color: var(--oro); }
.slot-tambor.revelado.estrella { border-color: #e8ecf2; color: #e8ecf2; }
.slot-tambor.revelado.alien { border-color: #5fe08f; color: #5fe08f; }
.slot-tambor.revelado.coin { border-color: #6ee7ff; }

/* Truco vs Arctur — mesa 2D con los naipes del mazo de la Orden (ver naipes.css).
   Cada jugador tiene su lado FIJO: Arctur arriba, vos abajo. Las cartas jugadas quedan sobre el
   tapete toda la mano (no se borran al pasar de ronda) — así siempre se ve qué se jugó contra qué. */
/* "Quiero vale cuatro": ni el azul del Quiero simple ni el fantasma del No quiero — es subir la
   apuesta, y en esta app lo que es plata va en oro. */
.truco-acciones .boton.subir {
  background: linear-gradient(180deg, rgba(216,184,119,.18), rgba(216,184,119,.08));
  border-color: rgba(216,184,119,.45);
  color: var(--oro);
}
.truco-acciones .boton.subir:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(216,184,119,.28), rgba(216,184,119,.14));
  border-color: rgba(216,184,119,.7);
}

/* El berretín. Aparece solo en el momento en que la mano ya está ganada, así que se permite
   hacerse notar: late despacio para que no se te pase el momento. */
.truco-acciones .boton.berretin {
  background: linear-gradient(180deg, rgba(110,231,255,.2), rgba(110,231,255,.08));
  border-color: rgba(110,231,255,.5);
  color: var(--arcturiano, #6ee7ff);
  animation: berretinLate 1.6s ease-in-out infinite;
}
.truco-acciones .boton.berretin:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(110,231,255,.34), rgba(110,231,255,.16));
  border-color: rgba(110,231,255,.8);
  animation: none;
}
@keyframes berretinLate {
  0%, 100% { box-shadow: 0 0 0 0 rgba(110,231,255,.34); }
  50%      { box-shadow: 0 0 0 7px rgba(110,231,255,0); }
}
@media (prefers-reduced-motion: reduce) {
  .truco-acciones .boton.berretin { animation: none; }
}

/* el interruptor de sonido de la mesa: a la derecha del todo, pegado al borde de la cabecera */
.truco-audio { margin-left: auto; font-variant-numeric: normal; display: inline-flex;
               align-items: center; gap: .42em; }
.truco-audio[aria-pressed="false"] { opacity: .6; }
/* los dos íconos viven en el botón y el estado elige cuál se ve: sin emojis y sin armar markup en JS */
.truco-audio .ic-audio-off,
.truco-audio[aria-pressed="false"] .ic-audio-on { display: none; }
.truco-audio[aria-pressed="false"] .ic-audio-off { display: inline-block; }

.truco-mesa { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }

.truco-tapete {
  position: relative; border-radius: 16px; overflow: hidden;
  min-height: 480px; padding: 10px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, #14503a 0%, #0d3527 45%, #06120d 100%),
    var(--piedra);
  border: 1px solid var(--piedra-borde);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .75);
  display: grid; grid-template-rows: auto 1fr auto; gap: 4px;
}

/* marcador arriba, sobre el tapete */
.truco-marcador {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin: 0; font-size: 12px; color: var(--texto-suave);
  background: rgba(6, 10, 16, .62); border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px; padding: 5px 14px; justify-self: center;
}
.truco-marcador .valor { font-weight: 700; color: var(--oro); }
.truco-marcador .sep { opacity: .4; }

/* el centro del tapete: sector de Arctur arriba, sector tuyo abajo.
   Sin position: relative a proposito — asi los avatares se anclan al tapete entero. */
.truco-centro {
  display: grid; grid-template-rows: 1fr 1fr; align-items: center; justify-items: center;
}
.truco-zona {
  display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 104px;
  --naipe-alto: 96px;
}
.truco-zona .naipe { transition: transform .25s ease, box-shadow .25s ease; }
/* el lugar de una carta que todavia no se jugó: mantiene la columna alineada con la de enfrente */
.truco-zona .naipe-hueco {
  box-shadow: none; border: 1px dashed rgba(255, 255, 255, .09); background: rgba(0, 0, 0, .12);
}
.truco-zona .naipe-hueco::before { content: none; }
.truco-zona-arctur .naipe { transform: rotate(var(--giro, 0deg)) translateY(-4px); }
.truco-zona-vos .naipe { transform: rotate(var(--giro, 0deg)); }
/* la carta que ganó la ronda: anillo dorado + un toque más grande, para que se vea de un vistazo
   cuál de las dos se llevó la mano sin tener que comparar jerarquías de memoria. */
.truco-zona .naipe.gano {
  box-shadow: 0 0 0 3px var(--oro), 0 0 18px rgba(216, 184, 119, .5), 0 10px 22px rgba(0, 0, 0, .6);
  z-index: 3;
}
.truco-zona-arctur .naipe.gano { transform: rotate(var(--giro, 0deg)) translateY(-4px) scale(1.06); }
.truco-zona-vos .naipe.gano { transform: rotate(var(--giro, 0deg)) scale(1.06); }
.truco-zona .naipe.gano::after {
  content: ''; position: absolute; inset: 0; border-radius: 5px;
  box-shadow: inset 0 0 22px rgba(216, 184, 119, .55);
}

/* jugadores: avatar fijo a cada lado + burbuja con lo que cantó */
.truco-jugador {
  position: absolute; display: flex; align-items: center; gap: 8px; z-index: 4;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  right: 10px; /* con right el bloque se acota al tapete: la burbuja envuelve en vez de desbordarse */
}
.truco-jugador-arctur { top: 6px; left: 10px; color: var(--celeste-claro); }
.truco-jugador-vos { bottom: 12px; left: 10px; color: var(--texto-suave); }
.truco-ficha {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--piedra-alta); border: 2px solid var(--piedra-borde); overflow: hidden;
}
.truco-jugador-arctur .truco-ficha { border-color: rgba(110, 231, 255, .55); }
.truco-jugador.activo .truco-ficha { border-color: var(--oro); box-shadow: 0 0 14px rgba(216, 184, 119, .45); }
.truco-ficha img { width: 100%; height: 100%; object-fit: cover; }
.truco-burbuja {
  position: relative; padding: 4px 11px; border-radius: 999px; font-size: 11px;
  background: var(--celeste); color: #05121b; font-weight: 800;
  min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  animation: burbujaEntra .25s ease;
}
.truco-jugador-vos .truco-burbuja { background: var(--oro); color: #1a1205; }
.truco-burbuja[hidden] { display: none; }
@keyframes burbujaEntra { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .truco-burbuja, .truco-anuncio, .truco-panel { animation: none; } }

/* el panel del medio de la mesa: entrada (apostar y repartir) y salida (cómo terminó la mano).
   Va encima del tapete, no debajo — el botón "Jugar de nuevo" suelto al pie pasaba desapercibido. */
.truco-panel {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  z-index: 9; width: min(360px, calc(100% - 36px)); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 22px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(8, 14, 20, .93), rgba(4, 9, 13, .96));
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: anuncioEntra .3s cubic-bezier(.2, 1.3, .5, 1);
}
.truco-panel[hidden] { display: none; }
.truco-panel.cierre { border-color: rgba(216, 184, 119, .28); }
.truco-panel-titulo {
  margin: 0; font-family: var(--serif); font-size: 21px; color: var(--texto); letter-spacing: .01em;
}
.truco-panel.cierre .truco-panel-titulo { color: var(--oro); }
.truco-panel-detalle { margin: -4px 0 0; font-size: 12.5px; color: var(--texto-tenue); line-height: 1.45; }
.truco-panel-resultado {
  margin: 0; font-size: 15px; font-weight: 800; letter-spacing: .02em;
  padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .05);
}
.truco-panel-resultado.gana { color: var(--ok, #5fe08f); }
.truco-panel-resultado.pierde { color: var(--texto-suave); }
.truco-panel-resultado.error { color: var(--error, #ff8b8b); }
.truco-panel-resultado[hidden] { display: none; }
/* de dónde salió cada coin: el truco y el envido se cobran por separado y pueden ir para
   lados distintos, así que el número final solo se entiende desglosado */
.truco-desglose {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12.5px; color: var(--texto-tenue);
}
.truco-desglose li { display: flex; justify-content: space-between; gap: 12px; padding: 1px 2px; }
.truco-desglose b { font-variant-numeric: tabular-nums; }
.truco-desglose .mas b { color: var(--ok, #5fe08f); }
.truco-desglose .menos b { color: var(--texto-suave); }
/* el empate no es una victoria: un 0 pintado de verde con "+" era la señal equivocada */
.truco-desglose .nulo b { color: var(--tenue); }
/* la unidad va chiquita al lado del número: los puntos de la mano y las fichas no son lo mismo
   y el cierre tiene que dejarlo claro de un vistazo */
.truco-desglose i { font-style: normal; font-size: 10.5px; opacity: .65; margin-left: 5px; }
/* las dos últimas líneas son el total: los puntos que sacaste y en qué quedaron tus fichas */
.truco-desglose .total { border-top: 1px solid var(--borde-tenue, rgba(255,255,255,.12)); padding-top: 3px; margin-top: 2px; }
.truco-desglose .total span { color: var(--texto-suave); }
.truco-desglose li:last-child b { font-size: 14px; }

.truco-panel-apuesta { width: 100%; margin: 0; }
.truco-panel-apuesta[hidden] { display: none; }
.truco-panel-apuesta .campo { display: block; text-align: left; }
/* el campo donde va la plata: sin esto queda el input blanco del navegador en medio del tapete.
   Es el mismo fix que ya se le hizo a `.casino-apuesta` en las otras cuatro mesas. */
.truco-panel-apuesta input {
  width: 100%; text-align: center; font-size: 17px; font-weight: 700;
  padding: 9px 11px; font-family: inherit; color: var(--texto);
  background: rgba(255,255,255,.04); border: 1px solid var(--piedra-borde); border-radius: 8px;
  outline: none; transition: border-color .15s ease;
}
.truco-panel-apuesta input:focus { border-color: rgba(90,168,216,.6); }
.truco-panel-apuesta .meta { display: block; margin-bottom: 4px; text-align: center; }
.truco-panel-botones { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.truco-panel-botones .boton { width: 100%; justify-content: center; }
.truco-panel-botones .boton[hidden] { display: none; }

/* el dorso que decora la mesa vacía: está de adorno, no se toca ni se tabula */
.truco-carta-fantasma { pointer-events: none; opacity: .9; }
.truco-mano .truco-carta-fantasma { margin: 0 2px; }
.truco-zona .truco-carta-fantasma { transform: rotate(-4deg); }
/* el dorso del atlas es oscuro y casi transparente sobre el tapete: le va un fondo propio */
.naipe-dorso { background: #0a1520; }

/* la mano del alumno: abanico grande y tocable. El padding de arriba deja aire para que la carta
   levantada (hover / elegida / arrastre) no se corte contra el borde del tapete. */
.truco-mano {
  display: flex; justify-content: center; align-items: flex-end; gap: 0;
  padding: 30px 0 14px; --naipe-alto: 132px;
  touch-action: pan-y;
}
.truco-carta {
  padding: 0; border: 0; background: none; cursor: pointer; position: relative;
  transition: transform .18s ease, filter .18s ease;
  transform: rotate(var(--giro, 0deg))
             translateY(calc(var(--sube, 0px) + var(--arrastre, 0px)));
  margin: 0 -14px;
  touch-action: none;  /* el arrastre hacia la mesa lo maneja el JS */
}
.truco-carta:hover:not(:disabled), .truco-carta:focus-visible:not(:disabled),
.truco-carta.elegida:not(:disabled) {
  transform: rotate(var(--giro, 0deg))
             translateY(calc(var(--sube, 0px) + var(--arrastre, 0px) - 18px)) scale(1.06);
  z-index: 5; outline: none;
}
.truco-carta:hover:not(:disabled) .naipe,
.truco-carta.elegida:not(:disabled) .naipe {
  box-shadow: 0 0 0 2px var(--oro), 0 14px 26px rgba(0, 0, 0, .6);
}
.truco-carta:disabled { cursor: default; filter: saturate(.55) brightness(.72); }

.truco-decir {
  margin: 0; min-height: 1.3em; text-align: center; font-style: italic;
  color: var(--celeste-claro); font-size: 13px;
}

/* cantos: una sola barra horizontal de píldoras, como en los trucos de celular */
.truco-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.truco-acciones .boton {
  /* 12px de padding vertical, no 9: con 9 la píldora medía 37px de alto y estos botones se tocan
     en el celular para decidir plata. 12 la deja en ~43, contra los 44 que recomienda WCAG 2.5.5,
     sin cambiarle la forma. */
  border-radius: 999px; padding: 12px 18px; font-size: 13px; font-weight: 700;
  letter-spacing: .03em; width: auto; flex: none;
}
.truco-acciones .peligro {
  background: transparent; border: 1px solid rgba(224, 143, 143, .5); color: #e08f8f;
}
.truco-acciones .peligro:hover { background: rgba(224, 143, 143, .12); }
.truco-credito { margin: 4px 0 0; font-size: 11px; color: var(--texto-tenue); text-align: center; }

/* el cartel del medio de la mesa: lo que acaba de pasar (un canto, el tanto del envido, quién
   ganó la ronda). Sin esto los cantos pasaban en un renglón chiquito y nadie los registraba. */
.truco-anuncio {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  z-index: 8; pointer-events: none; text-align: center; max-width: 88%;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  padding: 12px 26px; border-radius: 14px;
  background: rgba(4, 10, 8, .88); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
  animation: anuncioEntra .28s cubic-bezier(.2, 1.3, .5, 1);
}
.truco-anuncio[hidden] { display: none; }
.truco-anuncio b {
  font-size: 26px; font-weight: 800; letter-spacing: .06em; line-height: 1;
  color: var(--texto); text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}
.truco-anuncio span { font-size: 12px; color: var(--texto-suave); }
.truco-anuncio.arctur { border-color: rgba(110, 231, 255, .45); }
.truco-anuncio.arctur b { color: var(--celeste-claro); }
.truco-anuncio.vos { border-color: rgba(216, 184, 119, .5); }
.truco-anuncio.vos b { color: var(--oro); }
.truco-anuncio.bien b { color: var(--verde, #5fe08f); }
@keyframes anuncioEntra {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* quién es mano */
.truco-chip-mano {
  font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: var(--oro); color: #1a1205;
}
.truco-chip-mano[hidden] { display: none; }

@media (max-width: 620px) {
  .truco-tapete { min-height: 430px; }
  .truco-mano { --naipe-alto: 112px; padding-top: 26px; }
  .truco-zona { --naipe-alto: 80px; min-height: 88px; }
  .truco-anuncio { padding: 10px 18px; }
  .truco-anuncio b { font-size: 21px; }
  /* en el celular no entran lado a lado: el marcador baja debajo de la ficha de Arctur */
  .truco-marcador { margin-top: 38px; font-size: 11px; padding: 4px 11px; gap: 6px; }
  .truco-jugador { font-size: 10px; gap: 6px; }
  .truco-ficha { width: 28px; height: 28px; }
  .truco-panel { padding: 16px 16px; gap: 8px; }
  .truco-panel-titulo { font-size: 19px; }
}

/* el Boss trabado en la ficha del modulo: existe, se ve, y dice que lo abre (Jano 2026-09-26, con la
   nota minima en 7 el Boss dejo de coincidir con "aprobado" y habia que mostrar la diferencia) */
.ficha-boss.trabado { opacity: .78; }
.ficha-boss.trabado h4 { color: var(--texto-suave); }
.boss-trabado { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 6px;
  font-size: 13px; line-height: 1.45; color: var(--texto); }
.boss-trabado .ic { flex: 0 0 auto; margin-top: 2px; color: var(--oro); }
.boss-trabado b { color: var(--oro); }
.boss-trabado-sub { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--texto-tenue); }

/* el Boletin del perfil publico: una fila por modulo aprobado con su nota (Jano 2026-09-26) */
.boletin { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bol-fila { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: baseline;
  padding: 9px 2px; border-bottom: 1px solid var(--piedra-borde); }
.bol-fila:last-child { border-bottom: 0; }
.bol-id { font-size: 12px; color: var(--texto-tenue); }
.bol-tit { font-size: 14px; color: var(--texto); min-width: 0; }
.bol-nota { font-family: var(--mono); font-size: 15px; color: var(--texto-suave); white-space: nowrap; }
.bol-nota small { font-size: 11.5px; color: var(--texto-tenue); }
.bol-fila.perfecto .bol-nota { color: var(--oro); font-weight: 600; }
.bol-fila.perfecto .bol-tit { color: #fff3c4; }
.bol-meta { grid-column: 2 / -1; font-size: 11.5px; color: var(--texto-tenue); }
.bol-pie { margin-top: 12px; }
@media (max-width: 480px) {
  .bol-fila { grid-template-columns: 1fr auto; }
  .bol-id { grid-column: 1; }
  .bol-tit { grid-column: 1; }
  .bol-nota { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* ============================================================ CHECKPOINTS (Fase 1, 2026-09-26)
   Las 3 preguntas que cortan la lectura del manual. Decisión de Jano: inline y bloqueantes.
   Nada de emojis: los íconos son los SVG de _iconos.html. */
.cp-barra { position: sticky; top: var(--h-barra, 104px); z-index: 5; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin: 16px 0 0; padding: 8px 12px; background: var(--piedra-alta);
  border: 1px solid var(--piedra-borde); border-radius: 10px; font-size: 12.5px; }
.cp-barra-tit { display: inline-flex; align-items: center; gap: 6px; color: var(--celeste-claro);
  letter-spacing: .02em; }
.cp-barra-tit .ic { width: 15px; height: 15px; }
.cp-pasos { display: inline-flex; gap: 6px; }
.cp-paso { width: 22px; height: 22px; cursor: default; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--piedra-borde); color: var(--texto-tenue); font-size: 11.5px;
  font-weight: 600; background: var(--piedra); }
.cp-paso.ahora { border-color: var(--celeste); color: var(--celeste-claro); }
.cp-paso.ok { border-color: var(--ok); color: var(--obsidiana); background: var(--ok); }
.cp-barra-meta { margin-left: auto; color: var(--texto-suave); }

/* las dos barras sticky suman ~170 px: sin esto, saltar a un tramo dejaba el encabezado
   escondido arriba (el mismo motivo del scroll-margin-top de `main.marco section[id]`) */
section.cp, .cp-tramo { scroll-margin-top: calc(var(--h-barra, 104px) + 62px); }

.cp { margin: 26px 0; padding: 16px 18px; border: 1px solid var(--celeste-hondo);
  border-left: 3px solid var(--celeste); border-radius: 10px; background: var(--piedra); }
.cp h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15.5px;
  color: var(--celeste-claro); }
.cp h3 .ic { width: 17px; height: 17px; }
.cp-intro { margin: 0 0 14px; font-size: 12.5px; color: var(--texto-suave); line-height: 1.55; }
.cp.aprobado { border-color: var(--ok); border-left-color: var(--ok); }

.cp-p { margin: 0 0 14px; padding: 0; border: 0; }
.cp-p legend { padding: 0; margin-bottom: 8px; font-size: 14px; line-height: 1.5; color: var(--texto); }
.cp-op { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid var(--piedra-borde); border-radius: 8px; background: var(--piedra-alta);
  cursor: pointer; font-size: 13.5px; line-height: 1.45; }
.cp-op:hover { border-color: var(--celeste-hondo); }
.cp-op input { margin: 3px 0 0; accent-color: var(--celeste); }
.cp-p.bien legend { color: var(--ok); }
.cp-p.mal legend { color: var(--alerta); }
.cp-op.era { border-color: var(--ok); }
.cp-op.era span::after { content: " — esta era"; color: var(--ok); font-size: 12px; }
.cp-p.bien .cp-op, .cp-p.mal .cp-op { cursor: default; }
.cp-por-que { margin: 6px 0 0; font-size: 12.5px; color: var(--texto-suave); line-height: 1.5;
  border-left: 2px solid var(--piedra-borde); padding-left: 9px; }
.cp-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cp-aviso { font-size: 12.5px; color: var(--texto-suave); display: inline-flex; align-items: center; gap: 8px; }

.cp-hecho { display: flex; align-items: center; gap: 7px; margin: 22px 0; padding: 8px 12px;
  border: 1px solid rgba(111, 207, 151, .35); border-radius: 8px; font-size: 12.5px;
  color: var(--ok); background: rgba(111, 207, 151, .06); }
.cp-hecho .ic { width: 15px; height: 15px; }
.cp-cerrado { display: flex; align-items: center; gap: 7px; margin: 22px 0 0; padding: 10px 12px;
  border: 1px dashed var(--piedra-borde); border-radius: 8px; font-size: 12.5px;
  color: var(--texto-tenue); }
.cp-cerrado .ic { width: 15px; height: 15px; }
.cp-tramo.recien { animation: tramo-entra .5s ease-out 1; }
@keyframes tramo-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* el premio, aparte de la regla: junto en el mismo parrafo, el principiante leia "si me equivoco
   pierdo respuestas del examen" justo antes de una puerta bloqueante */
.cp-premio { margin: -8px 0 14px; font-size: 12px; color: var(--texto-tenue); line-height: 1.5; }

/* QUE ELEGISTE: el unico indicio era el puntito nativo del radio (~13px) entre 12 renglones */
.cp-op:has(input:checked) { border-color: var(--celeste); background: rgba(90, 168, 216, .08); }
.cp-op:focus-within { border-color: var(--celeste); }

@media (max-width: 480px) {
  .cp { padding: 13px 13px; }
  .cp-barra { font-size: 12px; padding: 7px 10px; }
  .cp-barra-meta { margin-left: 0; width: 100%; }
  /* aca la barra de checkpoints es de DOS renglones (~52 px, no ~38): con +62 el tramo que se
     inserta al aprobar quedaba con su titulo 13 px debajo de la barra (UX 28/09, medido en 390) */
  section.cp, .cp-tramo { scroll-margin-top: calc(var(--h-barra, 104px) + 84px); }
  /* objetivos tactiles: la opcion medía ~36px y el boton que abre la puerta ~34px */
  .cp-op { padding: 11px 12px; min-height: 44px; align-items: center; }
  .cp-enviar, .cp-otra, .cp-reintentar { min-height: 46px; }
  .cp-pie { display: grid; }
  .cp-pie .boton { width: 100%; }
}


/* ======================================================== ARCTUR FLOTANTE (faltaba todo el bloque)
   `modulo.html` lo usa desde siempre, pero estas clases no tenian ni una regla: el <a> se
   renderizaba inline al pie del <main> con el poster a tamaño natural (480x643), y eso hacia que
   TODA pagina de modulo scrollee en horizontal en el celular. Lo encontro la auditoria de UX del
   2026-09-26; el diagnostico previo ("es el nav") estaba equivocado. */
.arctur-flotante { position: fixed; right: 14px; bottom: 14px; z-index: 30; display: flex;
  align-items: center; gap: 9px; padding: 7px 13px 7px 7px; border-radius: 999px;
  background: var(--piedra-alta); border: 1px solid var(--celeste-hondo);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45); color: var(--texto); font-size: 12.5px;
  text-decoration: none; transition: opacity .25s ease, transform .25s ease; }
.arctur-flotante img { width: 34px; height: 34px; flex: none; border-radius: 50%;
  object-fit: cover; object-position: 50% 26%; }
.arctur-flotante:hover { border-color: var(--celeste); }
.arctur-flotante.oculto, .oculto { opacity: 0; pointer-events: none; transform: translateY(8px); }
@media (min-width: 1001px) { .arctur-flotante { display: none; } }  /* en escritorio el panel ya es sticky */


/* =================================================== LA GUIA DE ARCTUR (faltaba todo el bloque)
   `_tutorial.html` existe desde el 2026-09-15 y estas 11 clases no tenian una sola regla: el tour
   de bienvenida no era un modal, era un bloque suelto al final de /campus, con el poster a 480x643
   (otro scroll horizontal), el reflector invisible y el "1 / 5" tirado en el flujo. Y los botones
   del nav SI latian (esa regla sobrevivio), asi que el campus parpadeaba arriba mientras la burbuja
   que lo explicaba estaba miles de pixeles abajo. Es el onboarding del alumno recien jurado: la
   pantalla donde, de 12 que pasan la Bienvenida, se caen 10. Auditoria de UX del 2026-09-26.
   El JS ya posiciona `.tuto-foco` y `.tuto-burbuja` en pixeles: las dos tienen que ser `fixed`. */
.tuto { position: fixed; inset: 0; z-index: 60; }
.tuto[hidden] { display: none; }
/* el "agujero": la sombra de 9999px oscurece TODO menos el recuadro enfocado */
.tuto-foco { position: fixed; border-radius: 12px; border: 2px solid var(--celeste);
  box-shadow: 0 0 0 9999px rgba(3, 6, 12, .74), 0 0 26px rgba(110, 231, 255, .40);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; pointer-events: none; }
.tuto-burbuja { position: fixed; z-index: 1; width: min(360px, calc(100vw - 32px)); display: flex;
  gap: 12px; padding: 13px; border-radius: 14px; background: var(--piedra-alta);
  border: 1px solid var(--celeste-hondo); box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
.tuto-burbuja:focus { outline: none; }
.tuto-cara { width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover;
  object-position: 50% 26%; background: #000; }
.tuto-cuerpo { flex: 1; min-width: 0; }
.tuto-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.tuto-cab b { font-size: 13.5px; color: var(--celeste-claro); }
.tuto-paso { font-family: var(--mono); font-size: 11.5px; color: var(--texto-tenue); }
.tuto-saltar { margin-left: auto; padding: 4px 6px; background: none; border: 0; cursor: pointer;
  color: var(--texto-tenue); font-size: 12px; font-family: inherit; }
.tuto-saltar:hover { color: var(--texto); }
.tuto-texto { margin: 0 0 11px; font-size: 13px; line-height: 1.55; color: var(--texto-suave); }
.tuto-pie { display: flex; align-items: center; gap: 10px; }
.tuto-pie .boton { margin-left: auto; }
@media (max-width: 640px) {
  /* en el celular el JS no la mueve (lo dice su propio comentario): va fija abajo */
  .tuto-burbuja { top: auto !important; left: 12px !important; right: 12px; bottom: 14px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .tuto-foco { transition: none; } }

/* ============================================================================
   Burbuja de Arctur — respaldo cuando su voz no puede sonar (o su voz o el texto,
   nunca la voz del sistema). Globo fijo abajo, centrado, se cierra al tocarlo.
   ========================================================================== */
.arctur-burbuja {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 12px);
  z-index: 60;
  max-width: min(560px, calc(100vw - 32px));
  margin: 0 16px;
  padding: 14px 18px;
  background: var(--piedra-alta);
  background: color-mix(in srgb, var(--piedra-alta) 92%, black);
  color: var(--texto);
  border: 1px solid var(--celeste-hondo);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(90, 168, 216, .12);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -.01em;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.arctur-burbuja.visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.arctur-burbuja::before {
  content: "Arctur";
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--celeste);
}
@media (prefers-reduced-motion: reduce) {
  .arctur-burbuja { transition: opacity .22s ease; transform: translate(-50%, 0); }
}

/* ==================== RESCATE del CSS truncado (UX web completa, 2026-09-28) ====================
   docs/auditorias/2026-09-26-css-truncado.md dejo 140 clases que las plantillas pintan y esta hoja no
   definia. Mirado en el render (no deducido): el mazo de Tarjetas de Arctur mostraba frente Y
   respuesta juntos en un boton gris nativo; "Tu personaje" (Camara) no era un overlay sino un bloque
   suelto al pie con un avatar a pantalla completa; la lista de tarjetas del campus, el recap, la
   mascota SVG (ojos, parpado, antena, cola, accesorios) y la tarjeta "Siguiente" no tenian estilo.
   El informe decia que no habia copia: SI la habia. `academia/app/static/css/academia.css` del
   checkout `main` (20/09, anterior a la corrupcion) conserva esas reglas. Este bloque son SOLO las
   reglas de ahi cuyas clases no tienen ninguna regla aca (sin pisar ningun selector existente) y
   los @keyframes que usan. Extraidas con un script, no reescritas a mano. */

.regalo-pie { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 12px; }
.regalo-preview { margin: 0; font-size: 13.5px; color: var(--celeste); flex: 1 1 260px; }
.regalo-que { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.regalo-que .oro { color: var(--oro); display: inline-flex; align-items: center; gap: 4px; }
.regalo-que .oro .coin { width: 14px; height: 14px; }
.regalo-que .celeste { color: var(--celeste); }
.regalo-item-tag { border: 1px solid var(--borde); border-radius: 999px; padding: 1px 9px; font-size: 11.5px; color: var(--texto); }
.fila .meta.pend { color: var(--texto-tenue); }
.masc-svg { display: block; overflow: visible; }
.masc-txt { font-size: 12px; color: var(--texto-suave); line-height: 1.4; max-width: 190px; }
.masc-txt b { display: block; color: var(--celeste-claro); font-family: var(--serif); font-size: 15px; letter-spacing: .02em; }
.masc-sombra { fill: #000; opacity: .35; animation: masc-sombra 4s ease-in-out infinite; }
.masc-halo { animation: masc-halo 4s ease-in-out infinite; }
.masc-cuerpo { animation: masc-flotar 4s ease-in-out infinite; transform-origin: 60px 70px; }
.masc-piel { stroke: var(--p-borde, #a9f1ff); stroke-width: 1.2; }
.masc-grieta { fill: none; stroke: #eafcff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 3px #bff4ff); animation: masc-grieta 3s ease-in-out infinite; }
.masc-brillo { fill: #fff; opacity: .55; }
.masc-chispa { fill: #fff3c4; animation: masc-chispa 2.4s ease-in-out infinite; }
.masc-chispa:nth-of-type(2) { animation-delay: .8s; }
.masc-chispa:nth-of-type(3) { animation-delay: 1.6s; }
.masc-antena { fill: none; stroke: var(--p-antena, #8fe8ff); stroke-width: 2.2; stroke-linecap: round; }
.masc-antena-p { fill: #fff3c4; filter: drop-shadow(0 0 4px #ffe9a3); animation: masc-chispa 2s ease-in-out infinite; }
.masc-brazo { fill: none; stroke: var(--p-brazo, #5fd0ea); stroke-width: 5; stroke-linecap: round; }
.masc-ojo { fill: #0b1a22; }
.masc-pupila { fill: var(--p-pupila, #bff4ff); filter: drop-shadow(0 0 2px var(--p-pupila, #bff4ff)); }
.masc-ojos { animation: masc-parpadeo 5.5s ease-in-out infinite; transform-origin: 60px 62px; }
.masc-parpado { fill: none; stroke: #0b1a22; stroke-width: 2.4; stroke-linecap: round; opacity: 0; }
.masc-boca { fill: none; stroke: #0b1a22; stroke-width: 1.8; stroke-linecap: round; }
.masc-placa { fill: #d8b877; filter: drop-shadow(0 0 3px #d8b877); }
.masc-aura { fill: none; stroke: #ffe9a3; stroke-width: 1.6; opacity: .8; filter: drop-shadow(0 0 4px #ffe9a3);
  animation: masc-aura 3s ease-in-out infinite; transform-origin: 60px 34px; }
.masc-z { fill: #bff4ff; font-family: var(--serif); font-size: 14px; opacity: 0; animation: masc-z 2.6s ease-in-out infinite; }
.masc-z.z2 { font-size: 10px; animation-delay: 1.1s; }
.mascota.dormida .masc-cuerpo, .mascota.dormida .masc-halo { animation: none; }
.mascota.dormida .masc-piel, .mascota.dormida .masc-brazo, .mascota.dormida .masc-antena { filter: saturate(.35) brightness(.75); }
.mascota.dormida .masc-ojos { opacity: 0; animation: none; }
.mascota.dormida .masc-parpado { opacity: 1; }
.mascota.dormida .masc-antena-p, .mascota.dormida .masc-aura { animation: none; opacity: .4; }
.mascota.con-sueno .masc-ojos { animation-duration: 2.2s; }
.mascota.con-sueno .masc-cuerpo { animation-duration: 7s; }
.masc-sombra, .masc-chispa, .masc-antena-p { transform-box: fill-box; transform-origin: center; }
.masc-escamas { fill: none; stroke: var(--p-borde, #c8f5a0); stroke-width: 1.1; stroke-linecap: round; opacity: .5; }
.masc-cresta { fill: var(--p-brazo, #7cc94a); stroke: var(--p-borde, #c8f5a0); stroke-width: 1; stroke-linejoin: round; }
.masc-cola { fill: none; stroke: var(--p-brazo, #7cc94a); stroke-width: 4.5; stroke-linecap: round; animation: masc-cola 4s ease-in-out infinite; transform-box: fill-box; transform-origin: left bottom; }
.masc-panza { fill: #fff; opacity: .16; }
.masc-fosa { fill: #0b1a22; opacity: .55; }
.masc-diente { fill: #fff; }
.masc-anillo { fill: none; stroke: #fff; stroke-width: 1.2; opacity: .35; }
.criatura-gris .masc-ojo { fill: #05080c; }
.criatura-gris .masc-pupila { filter: none; }
.mascota.dormida .masc-cresta, .mascota.dormida .masc-cola { filter: saturate(.35) brightness(.75); animation: none; }
.acc-capa { opacity: .95; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); animation: acc-capa 4s ease-in-out infinite; transform-origin: 60px 50px; }
.acc-aureola { fill: none; stroke: #ffe08a; stroke-width: 3; filter: drop-shadow(0 0 5px #ffd66b); animation: acc-aureola 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
g.acc-corona path { fill: #e8b84a; stroke: #7a5210; stroke-width: 1; stroke-linejoin: round; filter: drop-shadow(0 0 3px #ffd66b); }
g.acc-corona circle { fill: #ff5d6c; }
g.acc-lentes rect { fill: #0b1016; stroke: #2c3540; stroke-width: 1; }
g.acc-lentes .acc-patilla { fill: none; stroke: #2c3540; stroke-width: 2; stroke-linecap: round; }
g.acc-lentes .acc-reflejo { fill: none; stroke: #8fe8ff; stroke-width: 1.2; stroke-linecap: round; opacity: .55; }
.mascota.dormida .acc-aureola, .mascota.dormida .acc-capa { animation: none; opacity: .6; }
.tienda-preview .mascota, .masc-mini { margin: 0; }
.tienda-preview .masc-svg { width: 74px; height: 74px; transition: transform .25s cubic-bezier(.2,.9,.3,1.4); }
.tienda-item:hover .tienda-preview .masc-svg, .tienda-item.tocado .tienda-preview .masc-svg { transform: scale(1.12); }
.masc-mini .masc-svg { width: 38px; height: 38px; }
.masc-mini .masc-cuerpo, .masc-mini .masc-halo, .masc-mini .masc-sombra, .masc-mini .masc-cola { animation: none; }
.rango-avatar-link .pj-lapiz { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--obsidiana); border: 1px solid var(--piedra-borde); display: flex; align-items: center; justify-content: center;
  color: var(--celeste-claro); box-shadow: 0 2px 8px rgba(0,0,0,.5); transition: transform .2s, border-color .2s; }
.rango-avatar-link .pj-lapiz .ic { width: 13px; height: 13px; }
.rango-avatar-link:hover .pj-lapiz { transform: scale(1.12); border-color: var(--celeste-hondo); }
.pj-overlay { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(3,5,9,.82); backdrop-filter: blur(4px); animation: cofre-fade .2s ease; }
.pj-panel { width: min(1040px, 100%); max-height: calc(100vh - 36px); overflow: auto; background: var(--obsidiana);
  border: 1px solid var(--piedra-borde); border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(110,231,255,.08) inset; }
.pj-cab { display: flex; align-items: baseline; gap: 12px; padding: 18px 22px 12px; border-bottom: 1px solid var(--piedra-borde);
  position: sticky; top: 0; background: var(--obsidiana); z-index: 2; }
.pj-cab h2 { margin: 0; font-family: var(--serif); font-size: 22px; color: var(--celeste-claro); }
.pj-cerrar { margin-left: auto; background: transparent; border: 1px solid var(--piedra-borde); color: var(--texto-suave);
  width: 34px; height: 34px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; }
.pj-cerrar:hover { color: var(--texto); border-color: var(--celeste-hondo); }
.pj-cuerpo { display: grid; grid-template-columns: 250px 1fr; gap: 0; }
.pj-previa { padding: 22px 18px; border-right: 1px solid var(--piedra-borde); display: flex; flex-direction: column; align-items: center;
  gap: 8px; text-align: center; background: linear-gradient(180deg, rgba(90,168,216,.06), transparent 60%); }
.pj-av { width: 110px; height: 110px; }
.pj-alias { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--texto); }
.pj-masc { margin-top: 6px; }
.pj-tienda { margin-top: auto; padding-top: 14px; color: var(--oro); text-decoration: none; }
.pj-cajones { padding: 16px 22px 22px; min-width: 0; }
.pj-cajones .aviso { margin: 0 0 12px; }
.pj-cajones h3 { margin: 14px 0 8px; font-family: var(--serif); font-size: 15px; color: var(--celeste-claro); display: flex; align-items: baseline; gap: 8px; }
.pj-cajones h3:first-of-type { margin-top: 4px; }
.pj-cajones h3 small { font-family: var(--sans); font-size: 11.5px; font-weight: 400; }
.pj-fila { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-fila form { margin: 0; }
.pj-op { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 84px; max-width: 128px;
  min-height: 84px; padding: 9px 8px 7px; background: var(--piedra); border: 1px solid var(--piedra-borde); border-radius: 10px;
  color: var(--texto-suave); font: inherit; cursor: pointer; text-align: center; transition: border-color .15s, transform .15s, background .15s; }
button.pj-op:hover { border-color: var(--celeste-hondo); background: rgba(90,168,216,.08); transform: translateY(-1px); }
.pj-op.equipado { border-color: var(--celeste-hondo); background: rgba(90,168,216,.12); color: var(--texto); cursor: default;
  box-shadow: 0 0 0 1px rgba(110,231,255,.25) inset; }
.pj-op.bloqueado { opacity: .5; cursor: not-allowed; }
.pj-op.bloqueado .insignia { filter: grayscale(1) brightness(.7); }
.pj-op[disabled] { cursor: default; }
.pj-op small { font-size: 10.5px; line-height: 1.25; letter-spacing: .02em; display: flex; align-items: center; gap: 3px; }
.pj-op small .ic { width: 11px; height: 11px; }
.pj-op .insignia { width: 44px; height: 44px; }
.pj-op .titulo-chip { white-space: normal; font-size: 11px; max-width: 112px; }
.pj-op .masc-mini .masc-svg { width: 44px; height: 44px; }
.pj-vacio { width: 44px; height: 44px; border-radius: 50%; border: 1px dashed var(--piedra-borde); display: flex; align-items: center;
  justify-content: center; color: var(--texto-tenue); font-size: 18px; }
.masc-img-wrap { position: relative; display: block; }
.masc-img { display: block; width: 100%; height: 100%; object-fit: contain; animation: masc-bob 2.8s ease-in-out infinite;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.6)); }
.mascota.legendaria .masc-img { filter: drop-shadow(0 5px 7px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(255,214,107,.75)); }
.mascota.legendaria .masc-img-wrap::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255,214,107,.32), rgba(255,214,107,0) 68%); animation: masc-halo 3s ease-in-out infinite; }
.masc-img-wrap .masc-z { position: absolute; right: 8%; top: 6%; font-style: normal; font-family: var(--serif); font-size: 15px; color: #ffe9a3;
  opacity: 0; animation: masc-z 2.6s ease-in-out infinite; }
.masc-img-wrap .masc-z.z2 { right: 0; top: -4%; font-size: 11px; animation-delay: 1.1s; }
.mascota.dormida .masc-img { animation: none; filter: grayscale(.9) brightness(.7) drop-shadow(0 5px 7px rgba(0,0,0,.6)); }
.mascota.con-sueno .masc-img { animation-duration: 5s; }
.mascota.legendaria .masc-txt b { color: #ffd66b; text-shadow: 0 0 10px rgba(255,214,107,.55); }
.mascota.especie-flipper .masc-img { animation: masc-levita 3.4s ease-in-out infinite; filter: none; }
.mascota.especie-flipper .masc-img-wrap { isolation: isolate; }
.mascota.especie-flipper .masc-img-wrap::before { inset: 2%; background: radial-gradient(circle, rgba(255,150,50,.42), rgba(255,150,50,.12) 45%, rgba(255,150,50,0) 70%); }
.mascota.dormida.especie-flipper .masc-img { filter: none; opacity: .55; }
.mascota.especie-flipper .masc-img-wrap::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 4%; height: 9%;
  border-radius: 50%; z-index: -1; background: radial-gradient(ellipse, rgba(0,0,0,.55), rgba(0,0,0,0) 70%); animation: masc-levita-sombra 3.4s ease-in-out infinite; }
.mascota.dormida.especie-flipper .masc-img { transform: scale(1.3); }
.mascota.dormida.especie-flipper .masc-img-wrap::after { animation: none; }
.tienda-item.legendaria .tienda-preview .masc-svg, .tienda-item.legendaria .tienda-preview .masc-img-wrap { width: 84px; height: 84px; }
.tienda-item.legendaria .tienda-preview .masc-img-wrap { transition: transform .25s cubic-bezier(.2,.9,.3,1.4); }
.tienda-item.legendaria:hover .tienda-preview .masc-img-wrap { transform: scale(1.1); }
.pj-op.legendaria, .pj-op .mascota.legendaria + small { color: #ffd66b; }
.pj-op.leg { border-color: rgba(255,214,107,.6); background: linear-gradient(180deg, rgba(255,214,107,.10), transparent), var(--piedra); }
.pj-op.leg.equipado { box-shadow: 0 0 0 1px rgba(255,214,107,.5) inset, 0 0 18px -4px rgba(255,214,107,.7); }
.masc-mini .masc-img-wrap { width: 38px !important; height: 38px !important; }
.masc-mini .masc-img { animation: none; }
.track.recap { border-color: rgba(110, 231, 255, .35); box-shadow: 0 0 0 1px rgba(110, 231, 255, .12) inset, 0 0 28px -12px var(--celeste); }
.track.recap .track-cabecera h2 { display: flex; align-items: center; gap: 8px; }
.track.recap .track-cabecera h2 .ic { width: 20px; height: 20px; color: var(--celeste); }
.recap-oir { margin-left: auto; }
.recap-cuerpo { padding: 4px 0 2px; }
.recap-texto { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--texto); margin: 0 0 12px; max-width: 72ch; }
.recap-meta { margin: 0; padding: 12px 14px; border-left: 3px solid var(--oro); background: rgba(216, 184, 119, .07);
  border-radius: 0 var(--radio) var(--radio) 0; color: var(--texto-suave); }
.recap-meta b { color: var(--oro); font-weight: 600; margin-right: 6px; }
.track.tarjetas-lista .track-cabecera h2 { display: flex; align-items: center; gap: 8px; }
.track.tarjetas-lista .track-cabecera h2 .ic, .tarjetas-mazo .track-cabecera h2 .ic { width: 20px; height: 20px; color: var(--celeste); }
.tarjetas-sets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.tarjeta-set a { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--piedra-borde); border-radius: var(--radio);
  background: var(--piedra); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.tarjeta-set a:hover { border-color: var(--celeste); transform: translateY(-1px); }
.tarjeta-set.cobrable a { border-color: rgba(216, 184, 119, .55); box-shadow: 0 0 18px -10px var(--oro); }
.tarjeta-set.hecha a { opacity: .72; }
.ts-titulo { font-family: var(--serif); font-size: 17px; color: var(--celeste-claro); }
.ts-meta { font-size: 12px; color: var(--texto-tenue); }
.ts-accion { font-family: var(--mono); font-size: 12px; color: var(--oro); margin-top: 4px; }
.tarjeta-set.hecha .ts-accion { color: var(--texto-tenue); }
.tj-escena { display: flex; justify-content: center; padding: 8px 0 14px; perspective: 1200px; }
.tj-carta { position: relative; width: min(560px, 100%); min-height: 220px; border: 0; background: transparent; padding: 0; cursor: pointer;
  transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2, .8, .2, 1); color: inherit; font: inherit; text-align: left; }
.tj-carta.vuelta { transform: rotateY(180deg); }
.tj-cara { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; justify-content: center; padding: 26px 28px;
  border-radius: 16px; border: 1px solid var(--piedra-borde); background: var(--piedra); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 18px 40px -22px #000; }
.tj-frente { border-color: rgba(110, 231, 255, .4); }
.tj-dorso { transform: rotateY(180deg); border-color: rgba(216, 184, 119, .5); background: linear-gradient(160deg, var(--piedra), rgba(216, 184, 119, .06)); }
.tj-cara small { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-tenue); }
.tj-cara > span { font-family: var(--serif); font-size: 20px; line-height: 1.45; }
.tj-dorso > span { font-family: inherit; font-size: 16px; color: var(--texto); }
.tj-cara em { font-style: normal; font-size: 12px; color: var(--texto-tenue); font-family: var(--mono); }
.tj-botones { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.tj-botones .tj-si { border-color: rgba(110, 231, 255, .6); }
.tj-botones .tj-no { border-color: rgba(255, 120, 120, .5); }
.tj-fin { text-align: center; padding: 16px 0 6px; }
.tj-fin-txt { font-family: var(--serif); font-size: 20px; margin: 0 0 14px; }
.tj-fin-acciones { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.tj-lista { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.tj-lista li b { display: block; color: var(--celeste-claro); font-weight: 600; }
.tj-lista li span { color: var(--texto-suave); font-size: 14px; }
.as-intro.rapida, .as-intro.rapida .hoja, .as-intro.rapida .corte, .as-intro.rapida .intro-in { transition-duration: .28s; }
.cta-seguir { margin-top: 12px; }
.arena-seg { font: 700 18px var(--mono); color: var(--celeste); font-variant-numeric: tabular-nums; }
.arena-seg.urgente { color: var(--error); }
.tuto-burbuja.arriba::before { top: auto; bottom: -7px; transform: rotate(225deg); }
.tarjeta.cerrado.siguiente { opacity: .62; }
.insignia.siguiente { color: var(--texto-suave); border-style: dashed; }
.rk-ir-yo { margin-top: 14px; }
.bill-mascota.recien .masc-chispa, .bill-mascota.recien .masc-antena-p { animation-duration: 1.1s; }
@media (prefers-reduced-motion: reduce) {
  .masc-cuerpo, .masc-sombra, .masc-halo, .masc-grieta, .masc-chispa, .masc-antena-p, .masc-ojos, .masc-aura, .masc-z { animation: none; }
  .masc-cola { animation: none; }
  .acc-capa, .acc-aureola { animation: none; }
  .masc-img { animation: none; }
  .mascota.especie-flipper .masc-img-wrap::after { animation: none; }
}
@media (max-width: 720px) {
  .pj-overlay { padding: 0; align-items: stretch; }
  .pj-panel { max-height: 100vh; border-radius: 0; border: 0; }
  .pj-cuerpo { grid-template-columns: 1fr; }
  .pj-cab { flex-wrap: wrap; row-gap: 2px; padding: 14px 16px 10px; }
  .pj-cab h2 { white-space: nowrap; font-size: 20px; }
  .pj-cab .meta { order: 3; flex-basis: 100%; }
  .pj-previa { border-right: 0; border-bottom: 1px solid var(--piedra-borde); padding: 12px 16px; display: grid;
    grid-template-columns: auto 1fr auto; column-gap: 14px; row-gap: 2px; text-align: left; align-items: center; }
  .pj-previa .pj-av { grid-row: 1 / span 3; width: 72px; height: 72px; }
  .pj-previa .pj-masc { grid-column: 3; grid-row: 1 / span 3; margin: 0; }
  .pj-previa .pj-masc .masc-svg { width: 72px; height: 72px; }
  .pj-previa .pj-tienda { grid-column: 1 / -1; margin: 4px 0 0; padding: 0; text-align: center; }
  .pj-av { width: 72px; height: 72px; }
  .pj-cajones { padding: 12px 14px 18px; }
  .pj-op { min-width: 74px; min-height: 76px; }
}
@media (max-width: 640px) {
  .tj-cara { padding: 20px 18px; }
  .tj-cara > span { font-size: 18px; }
  .recap-texto { font-size: 16px; }
  .recap-oir { margin-left: 0; }
  .cta-seguir { width: 100%; }
}
@media (max-width: 1024px) {
  body.jugando .encabezado-campus, body.jugando .aviso-sagrada { display: none; }
}
@keyframes acc-aureola { 0%, 100% { transform: scaleX(1); opacity: .85; } 50% { transform: scaleX(1.08); opacity: 1; } }
@keyframes acc-capa { 0%, 100% { transform: skewX(0); } 50% { transform: skewX(-3deg); } }
@keyframes masc-aura { 0%, 100% { transform: scaleX(1); opacity: .7; } 50% { transform: scaleX(1.08); opacity: 1; } }
@keyframes masc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes masc-chispa { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes masc-cola { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } }
@keyframes masc-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes masc-grieta { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes masc-halo { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes masc-levita { 0%, 100% { transform: translateY(0) scale(1.3); } 50% { transform: translateY(-7px) scale(1.3); } }
@keyframes masc-levita-sombra { 0%, 100% { transform: scaleX(1); opacity: .8; } 50% { transform: scaleX(.78); opacity: .45; } }
@keyframes masc-parpadeo { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes masc-sombra { 0%, 100% { transform: scaleX(1); opacity: .35; } 50% { transform: scaleX(.85); opacity: .22; } }
@keyframes masc-z { 0% { opacity: 0; transform: translate(0, 4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, -10px); } }

/* RESCATE 2 del CSS truncado (UX web completa, 2026-09-28): reglas de clases que el marcado usa y que
   se perdieron con el truncado; salen del checkout main (20/09). Se dejaron afuera el orbe y el Arctur
   flotante del celular y la flecha de la burbuja del tutorial: hoy tienen un diseno propio. */
.regalo-lbl .coin { width: 16px; height: 16px; }
.regalo-campo input, .regalo-campo select { width: 100%; box-sizing: border-box; }
.regalo-campo input[type=number] { padding: 12px 14px; background: var(--piedra); border: 1px solid var(--piedra-borde); border-radius: var(--radio);
  color: var(--texto); font-family: var(--mono); font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.regalo-campo input[type=number]:focus { outline: none; border-color: var(--celeste); box-shadow: 0 0 0 3px rgba(90,168,216,.18); }
.fila .meta.ok { color: var(--ok); }
.cofre-premio.item { color: var(--texto); border-color: rgba(255,255,255,.35); }
.bill-mascota { background: var(--piedra); border: 1px solid var(--piedra-borde); border-radius: var(--radio);
  padding: 14px 16px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.bill-mascota .bill-lbl { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-tenue); }
.mascota { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rango-avatar-link { position: relative; display: inline-block; flex: none; line-height: 0; }
.pj-link { font-family: var(--sans); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--celeste);
  text-decoration: none; border-bottom: 1px dotted currentColor; margin-left: 8px; white-space: nowrap; }
.pj-link:hover { color: var(--celeste-claro); }
.bill-mascota .bill-lbl .pj-link { margin-left: 0; letter-spacing: .12em; }
.pj-nada-txt a { color: var(--oro); }
.tienda-item.legendaria { border-color: #ffd66b; background: linear-gradient(180deg, rgba(255,214,107,.10), rgba(255,214,107,.02) 60%), var(--piedra);
  box-shadow: 0 0 0 1px rgba(255,214,107,.35) inset, 0 0 26px -6px rgba(255,214,107,.55); animation: leg-brillo 2.6s ease-in-out infinite; }
.tienda-item.legendaria .tienda-tipo { color: #ffd66b; text-shadow: 0 0 8px rgba(255,214,107,.6); }
.tienda-item.legendaria .tienda-nombre { color: #ffe9a3; }
@keyframes leg-brillo { 0%, 100% { box-shadow: 0 0 0 1px rgba(255,214,107,.35) inset, 0 0 26px -6px rgba(255,214,107,.55); }
  50% { box-shadow: 0 0 0 1px rgba(255,214,107,.6) inset, 0 0 34px -4px rgba(255,214,107,.85); } }
.aviso-jurado { display: block; margin: -10px 0 22px; padding: 12px 16px; line-height: 1.6; text-align: left;
  border: 1px solid rgba(110,231,255,.35); border-radius: var(--radio); }
.aviso-jurado .mini-accion { margin-left: 8px; }
.premios-examen { margin: 14px 0 6px; align-items: flex-start; }
.premios-examen .cofre-premio { font-size: 22px; padding: 9px 18px; }
.premios-examen .cofre-premio .coin-lg { width: 24px; height: 24px; }
.premios-examen .cofre-premio.nivel { text-transform: none; letter-spacing: .02em; font-family: var(--sans); font-size: 13px; }
.bill-rango .rk-mi-puesto { color: inherit; border-bottom: 1px dotted var(--celeste-hondo); }
.bill-rango .rk-mi-puesto:hover { color: var(--celeste-claro); text-decoration: none; border-bottom-style: solid; }
.rk-fila.podio .rk-puesto { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--podio); }
.rk-fila.podio { border-left: 3px solid var(--podio); }
.rk-fila.podio-1 { --podio: #f6d27a; }
.rk-fila.podio-2 { --podio: #c9d3e0; }
.rk-fila.podio-3 { --podio: #d29a5b; }
.rk-fila.podio-1 .rk-avatar { box-shadow: 0 0 0 2px #f6d27a, 0 0 14px rgba(246,210,122,.6); }
.rk-fila.yo .rk-puesto { color: var(--celeste-claro); font-weight: 700; }
.hito-recien .ic { width: 13px; height: 13px; vertical-align: -2px; }
.bill-mascota .hito-recien { text-align: center; margin: 2px 0 6px; }
@media (max-width: 600px) {
  .regalo-campos { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .bill-mascota { grid-column: 1 / -1; }
  .rango-nombre .pj-link { display: inline-block; margin: 4px 0 0; }
}
@media (max-width: 640px) {
  .tuto-pie .boton { flex: 1; }
}
@media (pointer: coarse) {
  .nav-btn { min-height: 40px; }
  .mini-accion { padding: 9px 12px; }
  .pj-link, .cal-nav a { padding: 8px 0; }
  .arctur-voz { padding: 9px 12px; }
}
@media (min-width: 1021px) {
  .camara-billetera:not(.perfil-cab) { grid-template-columns: minmax(150px, .9fr) 2fr 1.1fr; grid-auto-rows: 1fr; }
  .camara-billetera:not(.perfil-cab) .bill-cifra { grid-column: 1; justify-content: center; padding: 18px 22px; }
  .camara-billetera:not(.perfil-cab) .bill-rango { grid-column: 2; grid-row: 1 / span 2; }
  .camara-billetera:not(.perfil-cab) .bill-mascota { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 560px) {
  .casa-fila .casa-pts { font-size: 12px; }
}