/* Estructura general y vistas de la ciudad, el distrito, la ficha y la bitácora. */

.saltar {
  position: absolute;
  left: var(--espacio-4);
  top: -3rem;
  z-index: 30;
  padding: var(--espacio-2) var(--espacio-4);
  border-radius: var(--radio);
  background: var(--luz);
  color: var(--texto-sobre-luz);
  font-weight: 700;
}
.saltar:focus {
  top: var(--espacio-2);
}

.vista {
  max-width: var(--ancho-pagina);
  margin: 0 auto;
  padding: var(--espacio-6) var(--espacio-5) var(--espacio-8);
}
.vista:focus {
  outline: none;
}
.cargando {
  color: var(--linea);
}

/* Barra superior */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3) var(--espacio-6);
  padding: var(--espacio-3) var(--espacio-5);
  border-bottom: 1px solid var(--linea-tenue);
  background: var(--barra-fondo);
  backdrop-filter: blur(12px);
}
.marca {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--espacio-2);
  text-decoration: none;
}
.marca__icono {
  width: 36px;
  height: 36px;
  overflow: visible;
  filter: drop-shadow(0 4px 10px rgb(60 224 255 / 0.25));
}
.marca__fondo {
  fill: url(#marca-fondo);
  stroke: rgb(var(--linea-rgb) / 0.35);
  stroke-width: 2;
}
/* El logo toma los colores del tema: la puerta izquierda es la luz, la
   derecha el brillo y el salto va hacia el dorado. */
.marca__s-fondo1 { stop-color: var(--superficie-alta); }
.marca__s-fondo2 { stop-color: var(--tinta-profunda); }
.marca__s-izq1 { stop-color: color-mix(in srgb, var(--luz) 50%, var(--papel)); }
.marca__s-izq2 { stop-color: var(--luz); }
.marca__s-der1 { stop-color: color-mix(in srgb, var(--brillo) 50%, var(--papel)); }
.marca__s-der2 { stop-color: var(--brillo); }
.marca__s-haz1 { stop-color: var(--papel); }
.marca__s-haz2 { stop-color: var(--oro); }
.marca__s-izq1,
.marca__s-izq2,
.marca__s-der1,
.marca__s-der2,
.marca__s-fondo1,
.marca__s-fondo2,
.marca__s-haz1,
.marca__s-haz2 {
  transition: stop-color 0.4s;
}
/* El logo pequeño (pasaporte y otros): los mismos colores, sin degradados. */
.logo-nexo {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
}
.logo-nexo__fondo {
  fill: var(--superficie-alta);
  stroke: rgb(var(--linea-rgb) / 0.4);
  stroke-width: 3;
}
.logo-nexo__izq { fill: var(--luz); }
.logo-nexo__der { fill: var(--brillo); }
.logo-nexo__haz { fill: var(--papel); }

.marca__puerta {
  transition: translate 0.25s;
}
.marca__haz {
  fill: url(#marca-haz);
}
/* El detalle de la esquina cambia con el tema: la estrella en Nebulosa, una
   flor en Sakura, un copo en Glaciar, una medusa en Abismo… */
.adorno {
  display: none;
}
:root[data-tema="nebulosa"] .adorno--nebulosa,
:root[data-tema="estelar"] .adorno--estelar,
:root[data-tema="boreal"] .adorno--boreal,
:root[data-tema="eclipse"] .adorno--eclipse,
:root[data-tema="sintonia"] .adorno--sintonia,
:root[data-tema="selva"] .adorno--selva,
:root[data-tema="abismo"] .adorno--abismo,
:root[data-tema="lavanda"] .adorno--lavanda,
:root[data-tema="sakura"] .adorno--sakura,
:root[data-tema="obsidiana"] .adorno--obsidiana,
:root[data-tema="vapor"] .adorno--vapor,
:root[data-tema="lofi"] .adorno--lofi,
:root[data-tema="grafito"] .adorno--grafito,
:root[data-tema="glaciar"] .adorno--glaciar,
:root[data-tema="matcha"] .adorno--matcha,
:root[data-tema="arena"] .adorno--arena,
:root[data-tema="menta"] .adorno--menta,
:root[data-tema="tinta"] .adorno--tinta {
  display: inline;
}
.ad-r-luz { fill: var(--luz); }
.ad-r-brillo { fill: var(--brillo); }
.ad-r-oro { fill: var(--oro); }
.ad-r-papel { fill: var(--papel); }
.ad-r-tinta { fill: var(--tinta); }
.ad-t-luz,
.ad-t-brillo,
.ad-t-oro,
.ad-t-papel,
.ad-t-tinta {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ad-t-luz { stroke: var(--luz); }
.ad-t-brillo { stroke: var(--brillo); }
.ad-t-oro { stroke: var(--oro); }
.ad-t-papel { stroke: var(--papel); }
.ad-t-tinta { stroke: var(--tinta); }
.marca__adornos {
  transform-origin: 51px 11px;
  transition: scale 0.25s, rotate 0.25s;
}
/* Al pasar el cursor, las puertas se abren un poco y la estrella brilla. */
.marca:hover .marca__puerta {
  translate: -1.5px 0;
}
.marca:hover .marca__puerta--eco {
  translate: 1.5px 0;
}
.marca:hover .marca__adornos {
  scale: 1.3;
  rotate: 20deg;
}
.marca__nombre {
  font-family: var(--fuente-rotulo);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}
.menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-1);
}
.menu a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radio);
  color: var(--linea);
  font-weight: 600;
  font-size: var(--t-1);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.menu a:hover {
  background: rgb(var(--linea-rgb) / 0.08);
  color: var(--papel);
}
.menu a[aria-current="page"] {
  background: var(--luz-suave);
  color: var(--luz);
}
.indicadores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-4);
  margin-left: auto;
}
.indicador {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: var(--papel);
  text-decoration: none;
}

/* Barra de nivel: pista de un tono más claro que la superficie, relleno del color del distrito. */
.barra-nivel {
  display: block;
  height: 6px;
  border-radius: var(--radio-pildora);
  background: rgb(var(--linea-rgb) / 0.16);
  overflow: hidden;
}
.barra-nivel--fina {
  height: 3px;
}
.barra-nivel__relleno {
  display: block;
  height: 100%;
  border-radius: var(--radio-pildora);
  background: var(--acento);
}

/* Piezas comunes */
.panel {
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-panel);
  background: var(--superficie);
  box-shadow: var(--sombra-panel);
}
.migas {
  margin-bottom: var(--espacio-2);
  color: var(--linea);
  font-size: var(--t-1);
}
.migas a:not(.marca-distrito) {
  color: var(--linea);
}
.marca-distrito {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--acento);
  font-weight: 700;
}
.marca-distrito::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: var(--acento);
}
.seccion-titulo {
  font-size: var(--t-4);
  font-weight: 700;
}
.aviso {
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--oxido);
  border-radius: var(--radio);
  background: var(--oxido-suave);
}
.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  align-items: center;
}
.estado-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.15rem 0.7rem 0.15rem 0.55rem;
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-pildora);
  font-size: var(--t-0);
  font-weight: 700;
}
.estado-chip::before {
  content: "";
  width: 0.6rem;
  height: 0.75rem;
  border: 1px dashed var(--linea-media);
  border-radius: 1px;
}
.estado-chip--en-obra::before {
  border-style: solid;
  background: repeating-linear-gradient(45deg, var(--linea-media) 0 1px, transparent 1px 4px);
}
.estado-chip--encendido {
  border-color: rgb(var(--luz-rgb) / 0.45);
  color: var(--luz);
}
.estado-chip--encendido::before {
  border: 0;
  background: var(--luz);
  box-shadow: 0 0 8px var(--luz);
}
.estado-chip--dorado {
  border-color: rgba(245, 217, 139, 0.5);
  color: var(--oro);
}
.estado-chip--dorado::before {
  border: 0;
  background: var(--oro);
  box-shadow: 0 0 8px var(--oro);
}
.estado-chip--oxidado {
  border-color: rgba(217, 119, 74, 0.5);
  color: var(--oxido);
}
.estado-chip--oxidado::before {
  border: 0;
  background: var(--oxido);
}

/* Vista previa y pestañas de archivos */
.vista-previa {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--tinta-profunda);
}
.vista-previa__rotulo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem var(--espacio-3);
  color: var(--linea);
  font-size: var(--t-0);
  font-weight: 600;
}
/* Tres puntos de ventana de navegador: la vista previa es una página de verdad. */
.vista-previa__rotulo::before {
  content: "";
  width: 34px;
  height: 8px;
  background:
    radial-gradient(circle, #ff8a7a 3.5px, transparent 4px) 0 0 / 12px 8px no-repeat,
    radial-gradient(circle, #ffc857 3.5px, transparent 4px) 12px 0 / 12px 8px no-repeat,
    radial-gradient(circle, #7ee0b5 3.5px, transparent 4px) 24px 0 / 12px 8px no-repeat;
  opacity: 0.8;
}
.vista-previa__rotulo {
  flex-wrap: wrap;
}
.vista-previa__volver,
.vista-previa__aviso {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-pildora);
  background: none;
  color: var(--papel);
  font: inherit;
}
.vista-previa__volver {
  cursor: pointer;
}
.vista-previa__volver:hover {
  border-color: var(--brillo);
}
.vista-previa__volver .icono,
.vista-previa__aviso .icono {
  width: 0.9rem;
  height: 0.9rem;
}
.vista-previa__marco {
  flex: 1;
  width: 100%;
  min-height: 220px;
  border: 0;
  background: #fff;
}
.editor-archivos {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--tinta-profunda);
}
.pestanas {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--linea-tenue);
}
.pestanas__pestana {
  padding: var(--espacio-2) var(--espacio-4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--linea);
  font: 600 var(--t-0) / 1.2 var(--fuente-codigo);
  white-space: nowrap;
  cursor: pointer;
}
.pestanas__pestana[aria-selected="true"] {
  color: var(--papel);
  border-bottom-color: var(--luz);
}
.pestanas__candado {
  color: var(--linea-media);
  font-family: var(--fuente-texto);
  font-weight: 400;
}
.pestanas--una .pestanas__pestana {
  cursor: default;
}
/* Cadena de alturas: contenedor → paneles → panel → editor. Cada eslabón es
   una columna flexible; así, cuando el contenedor tiene alto fijo (el taller),
   el editor se queda dentro y el código se desplaza en vez de cortarse. */
.pestanas__paneles,
.pestanas__panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.pestanas__panel[hidden] {
  display: none;
}
.pestanas__panel .cm-editor {
  flex: 1 1 auto;
  min-height: 200px;
}
.pestanas__panel .cm-scroller {
  overflow: auto;
}
/* La línea de abajo del editor: el primer error que encontró el revisor. */
.cm-revisor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 1.9rem;
  padding: 0.3rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--papel-suave);
  font: 600 0.8rem / 1.35 var(--fuente-texto);
  text-align: left;
  cursor: default;
}
.cm-revisor__punto {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--exito);
  opacity: 0.8;
}
.cm-revisor__texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cm-revisor[data-estado="bien"] .cm-revisor__texto {
  opacity: 0.75;
}
.cm-revisor[data-estado="error"],
.cm-revisor[data-estado="warning"] {
  cursor: pointer;
}
.cm-revisor[data-estado="error"] {
  background: var(--error-suave);
  color: var(--papel);
}
.cm-revisor[data-estado="error"] .cm-revisor__punto {
  background: var(--error);
  opacity: 1;
  box-shadow: 0 0 0 3px var(--error-suave);
}
.cm-revisor[data-estado="warning"] .cm-revisor__punto {
  background: var(--oro);
  opacity: 1;
}
.cm-revisor:focus-visible {
  outline: 2px solid var(--luz);
  outline-offset: -2px;
}
@media (max-width: 40rem) {
  /* En el teléfono, el mensaje entero (en dos líneas si hace falta). */
  .cm-revisor__texto {
    white-space: normal;
  }
}

/* Mientras llega CodeMirror: el mismo aspecto en un área de texto. */
.editor-provisional {
  flex: 1 1 auto;
  width: 100%;
  min-height: 200px;
  margin: 0;
  padding: 10px 12px 10px 3.1rem;
  border: 0;
  border-radius: 0;
  background: var(--editor-fondo);
  color: var(--editor-texto);
  font: 14px / 1.65 var(--fuente-codigo);
  white-space: pre-wrap;
  tab-size: 2;
  resize: none;
  outline: none;
}
.editor-provisional:focus-visible {
  box-shadow: inset 0 0 0 2px var(--luz);
}
.codigo-fijo {
  margin: var(--espacio-3) 0;
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio);
  overflow: hidden;
}
.cifras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-4) var(--espacio-7);
}
.cifra {
  display: grid;
}
.cifra__valor {
  font-size: var(--t-6);
  font-weight: 700;
  line-height: 1.05;
}
.cifra__nombre {
  color: var(--linea);
  font-size: var(--t-1);
}
/* Concepto y ficha */
.concepto {
  display: grid;
  gap: var(--espacio-6);
}
.concepto__cabecera {
  display: grid;
  gap: var(--espacio-2);
  justify-items: start;
}
.concepto__columnas {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr);
  gap: var(--espacio-7);
  align-items: start;
}
.ficha {
  display: grid;
  gap: var(--espacio-4);
}
.ficha__seccion {
  display: grid;
  gap: var(--espacio-3);
  padding: var(--espacio-5);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-panel);
  background: var(--superficie);
}
.ficha__titulo {
  font-size: var(--t-4);
  color: var(--acento);
}
.ficha__seccion--analogia {
  border-color: rgb(var(--luz-rgb) / 0.35);
  background:
    radial-gradient(ellipse 60% 100% at 0% 0%, rgb(var(--luz-rgb) / 0.1), transparent 60%),
    var(--superficie);
}
.ficha__analogia {
  font-size: var(--t-3);
  line-height: 1.55;
}
.ficha__como-se-ve {
  max-width: var(--ancho-texto);
}
.rayos__codigo {
  padding: var(--espacio-4);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio);
  background: var(--tinta-profunda);
  font-size: 1.05rem;
  line-height: 1.9;
  white-space: pre-wrap;
}
.rayos__parte {
  padding: 0.05em 0.1em;
  border: 0;
  border-bottom: 2px solid currentColor;
  border-radius: 2px;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.rayos__parte:hover,
.rayos__parte[aria-pressed="true"] {
  background: color-mix(in srgb, var(--papel) 14%, transparent);
}
.rayos__parte--etiqueta,
.rayos__parte--selector {
  color: var(--sx-etiqueta);
}
.rayos__parte--atributo {
  color: var(--sx-atributo);
}
.rayos__parte--valor {
  color: var(--sx-texto);
}
.rayos__parte--contenido {
  color: var(--papel);
}
.rayos__parte--comentario {
  color: var(--sx-comentario);
}
.rayos__parte--propiedad {
  color: var(--sx-propiedad);
}
.rayos__parte--puntuacion {
  color: var(--sx-signo);
}
.rayos__detalle {
  min-height: 3.2em;
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio);
  background: rgb(var(--hondo-rgb) / 0.5);
}
.ejemplo__area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--espacio-3);
  min-height: 260px;
}
.ejemplo__editor {
  display: flex;
  min-width: 0;
}
.ejemplo__editor .editor-archivos {
  flex: 1;
}
.ejemplo__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacio-2);
  margin-top: var(--espacio-2);
}
.usos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-5);
}
.usos__titulo {
  margin-bottom: var(--espacio-2);
  font-size: var(--t-3);
  color: var(--luz);
}
.usos__titulo--no {
  color: var(--oxido);
}
.usos ul {
  display: grid;
  gap: var(--espacio-2);
  padding-left: 1.1rem;
}
.formas__rotulo {
  font-weight: 700;
  font-size: var(--t-1);
}
.formas__rotulo--vieja {
  color: var(--oxido);
}
.formas__rotulo--actual {
  color: var(--luz);
}
.concepto__misiones {
  position: sticky;
  top: 5.5rem;
  display: grid;
  gap: var(--espacio-3);
}
.misiones {
  display: grid;
  gap: var(--espacio-2);
  padding: 0;
  list-style: none;
}
.mision-fila {
  display: grid;
  gap: 0.15rem;
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-panel);
  background: var(--superficie);
}
.mision-fila__tipo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--linea);
  font-size: var(--t-0);
  font-weight: 700;
}
.mision-fila__titulo {
  font-family: var(--fuente-rotulo);
  font-size: var(--t-4);
  font-weight: 700;
  line-height: 1.1;
}
.mision-fila__titulo a {
  text-decoration: none;
}
.mision-fila__titulo a:hover {
  color: var(--luz);
}
.mision-fila__situacion {
  font-size: var(--t-0);
  color: var(--linea-media);
}
.mision-fila--hecha {
  border-color: rgb(var(--luz-rgb) / 0.35);
}
.mision-fila--hecha .mision-fila__situacion {
  color: var(--luz);
}

/* Bitácora de viaje: diario, tu código y errores */
.bitacora {
  display: grid;
  gap: var(--espacio-5);
  max-width: 56rem;
}
.bitacora__cabecera {
  display: grid;
  gap: var(--espacio-3);
  justify-items: start;
}
.bitacora__semana {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin: 0;
}
.bitacora__semana > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-pildora);
  background: var(--superficie);
  font-size: var(--t-0);
}
.bitacora__semana .icono {
  width: 1rem;
  height: 1rem;
  color: var(--luz);
}
.bitacora__diario {
  display: grid;
  gap: var(--espacio-3);
}
.bitacora__mas {
  justify-self: center;
}

/* Un día del diario. */
.dia {
  display: grid;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  border: 1px solid var(--linea-tenue);
  border-left: 4px solid rgb(var(--linea-rgb) / 0.35);
  border-radius: 18px;
  background: var(--superficie);
}
.dia--hoy {
  border-left-color: var(--luz);
  background: linear-gradient(110deg, rgb(var(--luz-rgb) / 0.08), transparent 55%), var(--superficie);
}
.dia__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
}
.dia__titulo {
  font: 800 var(--t-3) / 1.2 var(--fuente-rotulo);
}
.dia__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}
.dia__cifra {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radio-pildora);
  background: rgb(var(--hondo-rgb) / 0.5);
  font: 700 var(--t-0) / 1.3 var(--fuente-texto);
}
.dia__cifra .icono {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--luz);
}
.dia__hechos {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dia__hechos li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dia__hechos .icono {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--oro);
}
.dia__temas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}
.dia__tema {
  padding: 0.15rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--acento, var(--luz)) 40%, transparent);
  border-radius: var(--radio-pildora);
  color: var(--papel);
  font-size: var(--t-0);
  text-decoration: none;
}
.dia__tema:hover {
  border-color: var(--acento, var(--luz));
}

/* La nota del día. */
.nota-dia {
  display: grid;
  gap: var(--espacio-2);
  padding-top: var(--espacio-3);
  border-top: 1px dashed var(--linea-tenue);
}
.nota-dia__campo {
  display: grid;
  gap: 0.3rem;
}
.nota-dia__campo label {
  font: 700 var(--t-0) / 1.3 var(--fuente-texto);
}
.nota-dia__campo textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--linea-tenue);
  border-radius: 12px;
  background: rgb(var(--hondo-rgb) / 0.45);
  color: var(--papel);
  font: inherit;
  resize: vertical;
}
.nota-dia__campo textarea:focus-visible {
  outline: 2px solid var(--luz);
  outline-offset: 1px;
}
.nota-dia__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
}
.nota-dia--guardada dl {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}
.nota-dia--guardada dt {
  color: var(--luz);
  font: 700 var(--t-0) / 1.3 var(--fuente-texto);
}
.nota-dia--guardada dd {
  margin: 0;
  line-height: 1.5;
}
.nota-dia--guardada > .boton {
  justify-self: start;
}

/* Tu código. */
.bitacora__buscar {
  width: 100%;
  min-height: 2.75rem;
  margin-bottom: var(--espacio-3);
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-pildora);
  background: rgb(var(--hondo-rgb) / 0.5);
  color: var(--papel);
  font: inherit;
}
.bitacora__codigo {
  display: grid;
  gap: var(--espacio-2);
}
.entrada {
  display: grid;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--linea-tenue);
  border-radius: 16px;
  background: var(--superficie);
}
.entrada[open] {
  padding-bottom: var(--espacio-4);
}
.entrada > summary.entrada__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-3);
  cursor: pointer;
  list-style: none;
}
.entrada > summary::-webkit-details-marker {
  display: none;
}
.entrada__titulo {
  flex: 1 1 auto;
  font: 800 var(--t-2) / 1.25 var(--fuente-rotulo);
}
.entrada__bloque {
  display: grid;
  gap: var(--espacio-2);
  margin-top: var(--espacio-3);
}
.entrada__bloque h4 {
  font-family: var(--fuente-texto);
  font-size: var(--t-1);
  font-weight: 700;
}
.entrada__bloque ol,
.entrada__bloque ul {
  display: grid;
  gap: var(--espacio-1);
  padding-left: 1.3rem;
}
.entrada__metodo {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--espacio-1) var(--espacio-4);
  margin: 0;
}
.entrada__metodo dt {
  color: var(--linea);
}
.entrada__metodo dd {
  margin: 0;
}
.entrada__codigo {
  margin: 0;
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio);
  overflow: hidden;
}
.entrada__codigo figcaption {
  padding: var(--espacio-1) var(--espacio-3);
  border-bottom: 1px solid var(--linea-tenue);
  color: var(--linea);
  font: 600 var(--t-0) / 1.4 var(--fuente-codigo);
}
.entrada__codigo pre {
  overflow-x: auto;
  padding: var(--espacio-3);
  background: var(--tinta-profunda);
  font-size: 0.85rem;
}

/* Errores, por tema. */
.bitacora__errores {
  display: grid;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.error-tema {
  display: grid;
  gap: var(--espacio-2);
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
  border-radius: 16px;
  background: var(--error-suave);
}
.error-tema__cabecera {
  display: grid;
  gap: 0.15rem;
}
.error-tema ul {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding-left: 1.2rem;
}
.error-tema ul li::marker {
  color: var(--error);
}
.error-tema > .boton {
  justify-self: start;
}
@media (max-width: 720px) {
  .entrada__metodo {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .concepto__columnas {
    grid-template-columns: minmax(0, 1fr);
  }
  .concepto__misiones {
    position: static;
  }
}

@media (max-width: 640px) {
  .vista {
    padding: var(--espacio-5) var(--espacio-4) var(--espacio-7);
  }
  .barra {
    position: static;
    padding: var(--espacio-3) var(--espacio-4);
  }
  /* En pantallas chicas el menú muestra solo íconos; el nombre sigue ahí para lectores de pantalla. */
  .menu a span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .menu a {
    padding: 0.5rem;
  }
  .indicadores {
    margin-left: 0;
    width: 100%;
  }
  .titular,
  .bienvenida__lema {
    font-size: var(--t-5);
  }
  .siguiente__titulo {
    font-size: var(--t-6);
  }
  .siguiente,
  .bienvenida,
  .distrito-vista__cabecera {
    padding: var(--espacio-5);
  }
  .cifra__valor {
    font-size: var(--t-5);
  }
  .medidor__rango:not(.medidor__rango--actual) .medidor__nombre {
    display: none;
  }
  .ejemplo__area,
  .usos {
    grid-template-columns: minmax(0, 1fr);
  }
  .concepto-fila {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .concepto-fila__misiones {
    grid-column: 2;
  }
  .entrada__metodo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* La ayuda de la barra solo se ve en el celular: en pantallas anchas, «Cómo se
   juega» está en el menú. */
.indicador--ayuda {
  display: none;
}

/* ---------- La barra de arriba, siempre en una sola línea ----------
   Logo y menú a la izquierda, el boleto de viaje (nivel, racha y meta) y la
   cuenta a la derecha. Si el ancho no alcanza, el menú muestra el nombre solo
   en la sección donde estás (las demás quedan en ícono, con su nombre al pasar
   el cursor y para lectores de pantalla); después se esconde el nombre del
   logo. Nada se parte en dos líneas. */
.barra {
  flex-wrap: nowrap;
  min-height: 4rem;
  gap: var(--espacio-4);
  padding-block: 0.6rem;
}
.barra a,
.barra button,
.barra .boton {
  white-space: nowrap;
}
.menu {
  flex-wrap: nowrap;
  min-width: 0;
}
.indicadores {
  flex-wrap: nowrap;
  gap: var(--espacio-2);
}

/* ---------- El boleto de viaje: nivel, XP, meta del día y racha ----------
   El talón con tu nivel, la ruta donde la nave avanza con el XP hasta el
   siguiente nivel, tres perforaciones para la meta del día y la racha como
   un sello de goma. Al subir de nivel cae una estampa encima. */
.boleto-zona {
  position: relative;
  display: flex;
  min-width: 0;
}
.boleto {
  --talon: 3.3rem;
  display: flex;
  align-items: stretch;
  min-width: 0;
  height: 2.9rem;
  border: 1px solid rgb(var(--linea-rgb) / 0.28);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--superficie-alta), var(--superficie));
  color: var(--papel);
  text-decoration: none;
  /* Dos muescas donde se corta el talón, como en un boleto de verdad. */
  -webkit-mask:
    radial-gradient(circle 5px at var(--talon) 0, #0000 96%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 5px at var(--talon) 100%, #0000 96%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle 5px at var(--talon) 0, #0000 96%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 5px at var(--talon) 100%, #0000 96%, #000) bottom / 100% 51% no-repeat;
  transition: border-color 0.2s, translate 0.2s;
}
.boleto:hover {
  border-color: var(--luz);
  translate: 0 -1px;
}
/* La máscara recorta el contorno de enfoque: va por dentro. */
.boleto:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--luz);
}
.boleto__talon {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--talon);
  border-radius: 11px 0 0 11px;
  background: var(--luz);
  color: var(--texto-sobre-luz);
}
.boleto__talon::after {
  content: "";
  position: absolute;
  top: 7px;
  right: -1px;
  bottom: 7px;
  border-right: 2px dashed var(--superficie);
}
.boleto__talon small {
  font: 700 0.58rem / 1 var(--fuente-hud);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.boleto__talon b {
  font: 800 1.35rem / 1 var(--fuente-rotulo);
  font-variant-numeric: tabular-nums;
}
.boleto__cuerpo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  width: 13.5rem;
  min-width: 0;
  padding: 0 0.75rem 0 0.85rem;
}
.boleto__cabeza {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
}
.boleto__titulo {
  overflow: hidden;
  font: 800 0.85rem / 1.1 var(--fuente-rotulo);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.boleto__xp {
  flex: none;
  color: var(--papel-suave);
  font: 700 0.75rem / 1 var(--fuente-texto);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.boleto__ruta {
  position: relative;
  display: flex;
  align-items: center;
  height: 1rem;
  padding-right: 2.7rem;
}
.boleto__linea {
  position: relative;
  flex: 1;
  height: 0;
  border-top: 2px dotted rgb(var(--linea-rgb) / 0.45);
}
.boleto__linea::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: calc(var(--p) * 100%);
  height: 2px;
  border-radius: 2px;
  background: var(--luz);
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.boleto__nave {
  position: absolute;
  top: 50%;
  left: calc(var(--p) * (100% - 2.7rem));
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  color: var(--luz);
  transition: left 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.boleto__nave .icono {
  width: 0.95rem;
  height: 0.95rem;
  rotate: 45deg;
  animation: boleto-vaiven 1.6s steps(2) infinite;
}
.boleto__destino {
  position: absolute;
  right: 0;
  padding: 0.14rem 0.3rem;
  border: 1px solid rgb(var(--linea-rgb) / 0.4);
  border-radius: 6px;
  color: var(--papel-suave);
  font: 700 0.62rem / 1 var(--fuente-hud);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.boleto__perforado {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.22rem;
  padding: 0 0.55rem;
  border-left: 2px dashed rgb(var(--linea-rgb) / 0.3);
}
.boleto__agujero {
  display: block;
  width: 0.58rem;
  height: 0.58rem;
  border: 2px solid rgb(var(--linea-rgb) / 0.5);
  border-radius: 50%;
}
.boleto__agujero--hecho {
  border-color: var(--exito);
  background: var(--tinta);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--exito) 40%, transparent);
}
.boleto__agujero--nuevo {
  animation: boleto-perfora 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.boleto__sello {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 2.45rem;
  height: 2.45rem;
  margin: 0 0.45rem 0 0.15rem;
  border: 2.5px solid var(--oro);
  border-radius: 50%;
  color: var(--oro);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--oro) 28%, transparent);
  rotate: -10deg;
}
.boleto__sello b {
  font: 400 1.05rem / 0.9 var(--fuente-comic);
  letter-spacing: 0.04em;
}
.boleto__sello small {
  font: 700 0.5rem / 1 var(--fuente-hud);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.boleto__llama {
  display: none;
}
.boleto__sello--apagado {
  border-color: rgb(var(--linea-rgb) / 0.45);
  color: var(--papel-suave);
  box-shadow: none;
}
.boleto__sello--nuevo {
  animation: boleto-sella 0.6s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.boleto--sube .boleto__talon {
  animation: boleto-destello 1s ease-out;
}
.boleto__estampa {
  position: absolute;
  top: 50%;
  left: 52%;
  z-index: 2;
  padding: 0.2rem 0.6rem;
  border: 3px solid var(--error);
  border-radius: 8px;
  background: color-mix(in srgb, var(--superficie) 80%, transparent);
  color: var(--error);
  font: 400 1.3rem / 1 var(--fuente-comic);
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
  rotate: -8deg;
  translate: -50% -50%;
  animation: boleto-estampa 3.2s steps(1) forwards;
}
@keyframes boleto-vaiven {
  50% { translate: 0 -1px; }
}
@keyframes boleto-perfora {
  0% { scale: 0.2; }
  60% { scale: 1.35; }
  100% { scale: 1; }
}
@keyframes boleto-sella {
  0% { scale: 1.6; opacity: 0; }
  60% { scale: 0.92; opacity: 1; }
  100% { scale: 1; }
}
@keyframes boleto-destello {
  0% { box-shadow: inset 0 0 0 40px rgb(255 255 255 / 0.6); }
  100% { box-shadow: inset 0 0 0 40px rgb(255 255 255 / 0); }
}
@keyframes boleto-estampa {
  0% { scale: 2.2; opacity: 0; }
  4% { scale: 0.92; opacity: 1; filter: drop-shadow(3px 0 0 rgb(0 240 255 / 0.8)) drop-shadow(-3px 0 0 rgb(255 40 140 / 0.8)); }
  8%, 72% { scale: 1; opacity: 1; filter: none; }
  82%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .boleto,
  .boleto *,
  .boleto *::before {
    animation: none !important;
    transition: none !important;
  }
  .boleto__estampa {
    display: none;
  }
}
/* La meta del día en la hoja «Más» del celular. */
.mas__meta {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--linea-tenue);
  border-radius: 14px;
}
.mas__meta .boleto__perforado {
  flex-direction: row;
  padding: 0;
  border: 0;
}
.mas__meta .boleto__agujero {
  width: 0.9rem;
  height: 0.9rem;
}
.mas__meta > span:last-child {
  display: grid;
}
/* En pantallas medianas el boleto se angosta: primero se va el XP en números
   y después se acorta la ruta. */
@media (min-width: 1101px) and (max-width: 1365px) {
  .boleto__cuerpo {
    width: 10rem;
  }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .boleto__cuerpo {
    width: 9.5rem;
  }
  .boleto__xp {
    display: none;
  }
}
@media (min-width: 721px) and (max-width: 900px) {
  .boleto__cuerpo {
    width: 7.5rem;
  }
}

@media (min-width: 721px) and (max-width: 1365px) {
  .menu a:not([aria-current='page']) span,
  .menu__mas span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .menu a:not([aria-current='page']) {
    padding-inline: 0.6rem;
  }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .marca__nombre {
    display: none;
  }

}
@media (min-width: 721px) and (max-width: 900px) {
  .menu a span,
  .barra__crear {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .menu a {
    padding-inline: 0.55rem;
  }
}

/* La primera visita: sin menú, boleto, cuenta ni barra de abajo hasta que la
   persona entra a su cuenta o termina la bienvenida (main.js, enBienvenida). */
body.modo-bienvenida #menu,
body.modo-bienvenida #indicadores,
body.modo-bienvenida #cuenta-barra,
body.modo-bienvenida #barra-inferior {
  display: none !important;
}