/* La interfaz HTML dibuja los controles; Phaser dibuja la mesa y las piezas. */

/* 1. Colores y estilos compartidos. */
:root {
  color-scheme: light;
  --papel: #f6f0e6;
  --blanco: #fffbf4;
  --tinta: #693e26;
  --suave: #92745c;
  --acento: #a45c3e;
  --linea: #dccbb5;
  --verde: #6e795b;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--tinta);
  background: var(--papel);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: radial-gradient(ellipse at 25% 0, #fffdf7 0, transparent 65%), var(--papel);
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button:disabled {
  cursor: default;
  opacity: .4;
}

button:focus-visible, select:focus-visible, #juego:focus-visible {
  outline: 3px solid #548888;
  outline-offset: 4px;
}

h1, h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

/* 2. Cabecera compacta: deja espacio a la mesa. */
.pagina {
  max-width: 1680px;
  margin: auto;
  padding: 0 36px;
}

.cabecera {
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--linea);
}

.identidad {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.simbolo {
  font-size: 46px;
  line-height: 1;
  color: var(--acento);
}

.marca {
  margin: 0 0 7px;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 2.3px;
}

.edicion {
  margin-left: 5px;
  color: var(--suave);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 1.4px;
}

h1 {
  font-size: 31px;
  letter-spacing: -.8px;
  line-height: 1.15;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 15px;
}

.sello {
  font: 10px "Segoe UI", Arial, sans-serif;
  letter-spacing: .1px;
  border: 1px solid var(--linea);
  border-radius: 30px;
  padding: 6px 10px;
  white-space: nowrap;
}

.herramientas {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
  flex-shrink: 0;
}

.boton {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: #fffaf380;
  transition: background .18s, transform .18s, border-color .18s;
}

.boton:hover:not(:disabled) {
  background: #fffaf3;
  border-color: #b99a79;
}

.boton:active:not(:disabled) {
  transform: translateY(1px);
}

.boton[aria-pressed="true"] {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--blanco);
}

.pequeno {
  font-size: 11px;
  padding: 9px 13px;
}

.pequeno > span:first-child {
  font-size: 18px;
  line-height: 1;
}

/* La ayuda directa es fácil de reconocer, sin competir con las piezas. */
.ayuda-directa {
  background: #e8eddf;
  border-color: #b8c3a7;
  color: #465437;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 #ffffffa6;
}

.ayuda-directa:hover:not(:disabled) {
  background: #dae4cc;
  border-color: #8e9e78;
}

.ayuda-directa:focus-visible {
  outline-color: #647d48;
}

.ayuda-directa:disabled {
  background: #eeeede;
  color: #6b735f;
  opacity: .55;
}

/* 3. Girar y trasladar la selección siempre arriba a la izquierda. */
.controles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
  padding: 20px 2px;
}
.giro-piezas, .opciones-mesa {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.opciones-mesa {
  border-left: 1px solid var(--linea);
  padding-left: 22px;
}
.etiqueta-control, .seleccion-texto {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 12px;
  font-size: 10px;
  min-height: 18px;
  color: var(--suave);
}
.ceja {
  font-size: 8px;
  letter-spacing: 1.5px;
  font-weight: 650;
  color: var(--suave);
  line-height: 1.5;
  margin: 0;
}
#estado-seleccion {
  font-size: 10px;
  color: var(--tinta);
}
.acciones-pieza, .acciones-opciones,
.botones-giro {
  display: flex;
  align-items: center;
  gap: 6px;
}
.acciones-pieza {
  flex-wrap: wrap;
  gap: 8px;
}
.giro {
  min-height: 44px;
  padding: 6px 12px;
  font-size: 11px;
  background: var(--blanco);
}
.giro span {
  font-size: 26px;
  line-height: 1;
}

.giro:not(:disabled) {
  border-color: #ba8d64;
  box-shadow: 0 2px 5px #693e2608;
}
.traslado, .mano {
  min-height: 44px;
  padding: 8px 10px;
  font-size: 10px;
  white-space: nowrap;
}
.mano > span { font-size: 18px; }
.boton-texto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border: 0;
  background: transparent;
  font-size: 11px;
  padding: 8px 2px;
  color: var(--suave);
}
.boton-texto:hover:not(:disabled) {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.boton-texto > span:first-child { font-size: 20px; }
#boton-mezclar { padding: 7px; gap: 4px; }
#boton-mezclar .texto-mezclar { font-size: 10px; }
select {
  font: inherit;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 10px;
  min-height: 44px;
  padding: 8px 25px 8px 10px;
  font-size: 11px;
  cursor: pointer;
  max-width: 100%;
}

/* Phaser coloca estas barras HTML sobre cada ventana. */
.vista-controles {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  height: auto;
  padding: 0 8px;
  border: 1px solid #c7aa86;
  border-radius: 11px 11px 0 0;
  background: linear-gradient(#fffaf0, #f5ead8);
  box-shadow: inset 0 1px 0 #fff, 0 -2px 7px #72513208;
  user-select: none;
  touch-action: manipulation;
}
.vista-controles:not([style]) { visibility: hidden; }

/* Sacar piezas pertenece a la mesa. La segunda fila evita comprimir el zoom. */
#vista-mesa-controles { display: block; }
.cabecera-vista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 8px;
  min-height: 38px;
}
.lote-mesa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 0;
  border-top: 1px solid #dccbb591;
}
.lote-mesa label {
  margin-right: 2px;
  color: var(--suave);
  font-size: 10px;
  white-space: nowrap;
}
#selector-lote {
  min-width: 65px;
  min-height: 32px;
  padding: 4px 21px 4px 8px;
  border-radius: 7px;
  font-size: 11px;
}
.sacar-lote {
  min-height: 32px;
  padding: 5px 11px;
  border-radius: 7px;
  background: #f1e3cc;
  border-color: #c9ab86;
  font-size: 11px;
}
.lote-mesa #boton-mezclar {
  min-height: 32px;
  margin-left: auto;
  padding: 4px 7px;
}
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.titulo-vista {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px;
}
.numero-vista {
  font: 8px 'Segoe UI', Arial, sans-serif;
  color: #8e7559;
  letter-spacing: 1px;
}
.zoom-controles {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.zoom-controles button {
  min-width: 30px;
  height: 32px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  font-size: 20px;
  line-height: 1;
}
.zoom-controles button:hover:not(:disabled) {
  background: #efe1ce;
  border-color: #d7b897;
}
.zoom-controles .ajustar-vista {
  font-size: 10px;
  padding: 0 8px;
  margin-left: 3px;
  border-left: 1px solid var(--linea);
  border-radius: 0 5px 5px 0;
}
.zoom-controles output {
  min-width: 36px;
  text-align: center;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: #866247;
}
/* 4. La superficie de madera continúa por debajo del lienzo transparente. */
.zona-juego {
  position: relative;
  overflow: hidden;
  border: 1px solid #c8aa85;
  border-radius: 20px;
  background: repeating-linear-gradient(1deg, #b4773510 0, #b4773500 1px, #fff0ca10 2px, #b4773500 6px), linear-gradient(103deg, #f1cd98, #e9bc82 35%, #f4d7a6 71%, #e6b87f);
  box-shadow: 0 12px 30px #69422116, 0 2px 4px #6942210d, inset 0 1px 0 #fff8da;
}

#juego {
  position: relative;
  width: 100%;
  height: 680px;
  touch-action: none;
}

#juego canvas {
  display: block;
}

.cargando {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 13px;
  color: var(--tinta);
}

.cargando .simbolo {
  animation: respirar 2s ease-in-out infinite;
}

.pie-mesa {
  min-height: 53px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 27px;
  gap: 15px;
  border-top: 1px solid #9d663127;
  background: #fff5e199;
}

.pie-mesa p {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: #795537;
}

.cuenta-cajon {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  white-space: nowrap;
  color: #765434;
}

.punto {
  width: 5px;
  height: 5px;
  background: #a36c3f;
  border-radius: 50%;
}

.aviso {
  position: absolute;
  bottom: 75px;
  left: 50%;
  transform: translate(-50%, 8px);
  padding: 13px 20px;
  max-width: 90%;
  width: max-content;
  border-radius: 11px;
  background: #fffcf6f5;
  box-shadow: 0 5px 25px #6c42232b;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}

.aviso.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 5. Progreso y opciones secundarias debajo de la mesa. */
.resumen {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 22px 3px 18px;
}

.progreso-bloque {
  flex: 1;
  max-width: 480px;
}

.progreso-titulo {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 11px;
}

#estado-mesa {
  flex: 1;
}

#contador {
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#contador span {
  font-size: 12px;
  font-weight: 400;
  color: var(--suave);
}

#porcentaje {
  font-size: 10px;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
}

progress {
  display: block;
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 5px;
  margin: 9px 0 0;
  overflow: hidden;
  background: #e5d6c1;
}

progress::-webkit-progress-bar {
  background: #e5d6c1;
  border-radius: 5px;
}

progress::-webkit-progress-value {
  background: var(--acento);
  border-radius: 5px;
  transition: width .3s;
}

progress::-moz-progress-bar {
  background: var(--acento);
  border-radius: 5px;
}

.nota-guardado {
  margin: 0 auto 0 0;
  font-size: 10px;
  line-height: 1.6;
  color: var(--suave);
}

.pie-pagina {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 3px 27px;
  font-size: 10px;
  color: var(--suave);
}

.enlace {
  background: none;
  border: 0;
  border-bottom: 1px solid #b99a79;
  padding: 5px 0;
  font-size: 11px;
  color: var(--tinta);
}

/* 6. Ventanas nativas: la tecla Escape las cierra. */
.dialogo {
  width: min(460px, calc(100% - 32px));
  max-height: 90dvh;
  overflow: auto;
  padding: 32px;
  border: 1px solid #d7bda0;
  border-radius: 18px;
  background: var(--blanco);
  text-align: center;
  color: var(--tinta);
  box-shadow: 0 24px 100px #58351e40;
}

.dialogo::backdrop {
  background: #4c342780;
  backdrop-filter: blur(5px);
}

.dialogo h2 {
  font-size: 33px;
  letter-spacing: -1px;
  line-height: 1.15;
  margin: 8px 0 19px;
}

.dialogo p:not(.ceja) {
  font-size: 13px;
  line-height: 1.75;
  color: var(--suave);
}

.dialogo img {
  display: block;
  width: 100%;
  border-radius: 4px;
}

.dialogo .acciones {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.dialogo .boton {
  font-size: 12px;
}

.principal {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

.principal:hover:not(:disabled) {
  background: #8e4c31;
  border-color: #8e4c31;
}

.adorno {
  font-size: 36px;
  color: var(--acento);
}

.cerrar {
  position: absolute;
  right: 12px;
  top: 8px;
  width: 38px;
  height: 38px;
  background: none;
  border: 0;
  font-size: 27px;
}

.referencia {
  width: min(660px, calc(100% - 32px));
}

.referencia img {
  max-height: 62dvh;
  object-fit: contain;
}

.completado img {
  width: 220px;
  margin: auto;
}

.completado .acciones {
  flex-direction: column;
}

.completado .acciones .boton {
  width: 100%;
}

@keyframes respirar {
  50% {
    opacity: .4;
    transform: rotate(15deg);
  }

}

/* 7. Dos ventanas amplias en escritorio; apiladas en pantallas pequeñas. */
@media (min-width: 1450px) {
  #juego { height: 700px; }
}

@media (max-width: 1200px) {
  .pagina { padding: 0 22px; }
  .cabecera { min-height: 100px; gap: 14px; }
  .edicion { display: none; }
  h1 { font-size: 27px; gap: 10px; }
  .identidad { gap: 12px; }
  .simbolo { font-size: 39px; }
  .herramientas { gap: 5px; }
  .pequeno { padding: 8px 10px; }
  .controles { gap: 14px 22px; }
  .resumen { gap: 20px; }
}

@media (min-width: 851px) and (max-width: 1100px) {
  .cabecera { flex-wrap: wrap; padding: 17px 0 14px; gap: 12px; }
  .herramientas { width: 100%; justify-content: flex-start; }
}

@media (max-width: 850px) {
  .cabecera { flex-wrap: wrap; padding: 20px 0 17px; gap: 17px; }
  .identidad { flex: 1; }
  .herramientas { width: 100%; }
  .pequeno { flex: 1; }
  .controles { gap: 13px; padding: 17px 0; }
  .giro { padding: 6px 10px; }
  .traslado { padding: 8px; }
  .acciones-pieza { gap: 5px; }
  .botones-giro { gap: 4px; }
  .texto-mezclar { display: none; }
  .pie-mesa { padding: 12px 18px; }
  .resumen { flex-wrap: wrap; gap: 14px 20px; }
  .progreso-bloque { max-width: none; flex-basis: 100%; }
  .nota-guardado { flex: 1; }
  #juego { height: 1020px; }
}

@media (max-width: 600px) {
  .pagina { padding: 0 11px; }
  .cabecera { padding: 13px 3px 11px; gap: 10px; }
  .identidad { gap: 10px; }
  .marca { font-size: 8px; letter-spacing: 1.7px; margin-bottom: 6px; }
  h1 { font-size: 25px; gap: 9px; }
  .simbolo { font-size: 36px; }
  .sello { font-size: 8px; padding: 5px 7px; }
  .herramientas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .pequeno { min-height: 44px; font-size: 10px; gap: 6px; padding: 8px 7px; }
  .ayuda-directa { grid-column: span 2; }
  #boton-reiniciar-arriba { grid-column: 1 / -1; }
  .controles { grid-template-columns: 1fr; padding: 13px 3px; gap: 13px; }
  .acciones-pieza { justify-content: space-between; }
  .seleccion-texto, .etiqueta-control { font-size: 10px; }
  .ceja { font-size: 8px; letter-spacing: 1.25px; }
  .giro { min-width: 63px; min-height: 44px; }
  .traslado { padding: 8px 10px; }
  #boton-mezclar { min-width: 44px; }
  .opciones-mesa {
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    border-left: 0;
    border-top: 1px solid var(--linea);
    padding: 11px 0 0;
  }
  .acciones-opciones { justify-content: space-between; }
  #selector-cantidad { flex: 1; max-width: 170px; }
  .mano { min-width: 132px; }
  .zona-juego { border-radius: 12px; }
  #juego { height: 1000px; }
  .vista-controles { min-height: 46px; padding: 0 5px; gap: 3px; }
  .cabecera-vista { min-height: 44px; gap: 0 4px; }
  .lote-mesa { gap: 5px; padding: 5px 0; }
  .lote-mesa label { font-size: 9px; margin-right: 0; }
  #selector-lote { min-height: 44px; min-width: 62px; font-size: 11px; }
  .sacar-lote { min-height: 44px; padding: 7px 9px; }
  .lote-mesa #boton-mezclar { min-width: 44px; min-height: 44px; padding: 4px; }
  .titulo-vista { font-size: 11px; gap: 5px; }
  .numero-vista { font-size: 7px; }
  .zoom-controles { gap: 0; }
  .zoom-controles button { min-width: 44px; height: 44px; }
  .zoom-controles .ajustar-vista { padding: 0 5px; margin-left: 1px; font-size: 9px; }
  .zoom-controles output { min-width: 31px; font-size: 9px; }
  .pie-mesa { align-items: flex-start; gap: 10px; padding: 12px 13px; }
  .pie-mesa p { font-size: 9px; max-width: 235px; }
  .cuenta-cajon { font-size: 9px; padding-top: 3px; }
  .resumen { padding: 19px 3px 13px; gap: 10px; }
  .progreso-titulo { font-size: 10px; }
  .nota-guardado { font-size: 9px; max-width: 190px; }
  #boton-reiniciar { font-size: 10px; margin-left: auto; }
  .pie-pagina { font-size: 9px; align-items: flex-start; gap: 15px; padding-bottom: 23px; }
  .pie-pagina > span { max-width: 180px; line-height: 1.7; }
  .enlace { font-size: 10px; white-space: nowrap; }
  .dialogo { padding: 30px 20px; }
  .dialogo h2 { font-size: 30px; }
  .aviso { font-size: 11px; }
}

@media (max-width: 370px) {
  h1 { font-size: 21px; }
  .sello { display: none; }
  .identidad .simbolo { font-size: 32px; }
  .giro { min-width: 56px; padding: 6px 8px; }
  .traslado { padding: 8px; }
  .numero-vista { display: none; }
  .sacar-lote span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}
/* Las barras permanecen visibles también cuando el sistema usa barras superpuestas. */
[id^="desplazamiento-"]::-webkit-scrollbar { width: 14px; height: 14px; }
[id^="desplazamiento-"]::-webkit-scrollbar-track { background: #e7d5b9; border-radius: 8px; }
[id^="desplazamiento-"]::-webkit-scrollbar-thumb { background: #b78d60; border: 3px solid #e7d5b9; border-radius: 8px; }
[id^="desplazamiento-"]::-webkit-scrollbar-thumb:hover { background: #956839; }

/* El botón activado conserva contraste también al pasar el ratón encima. */
.boton[aria-pressed="true"]:hover:not(:disabled) {
  background: #8e4c31;
  border-color: #8e4c31;
  color: #fffaf3;
}

/* Dos ambientes con las mismas medidas: cambiar el estilo conserva las vistas. */
:root[data-estilo="mediterraneo"] {
  color-scheme: light;
  --papel:#f5eee1; --blanco:#fffaf0; --tinta:#523624; --suave:#816950;
  --acento:#a55935; --acento-fuerte:#884427; --acento-texto:#fffaf1;
  --linea:#d2bd9d; --verde:#6a7657; --foco:#627e70;
  --ambiente-luz:#fff9eab5; --ambiente-sombra:#c2a37518;
  --boton-fondo:#fbf4e8e8; --boton-hover:#fffaf1; --boton-borde:#ba9670;
  --relieve-luz:#fffdf4b3; --relieve-sombra:#67482c18;
  --panel-arriba:#fcf6e9; --panel-abajo:#efe2cc; --panel-borde:#bda07b;
  --mesa-fondo:#b98b57; --mesa-borde:#b28e60; --mesa-sombra:#5b3c2530;
  --pie-fondo:#eadcc5; --progreso-fondo:#ded0b9;
  --ayuda-fondo:#dce4ce; --ayuda-borde:#a5b28e; --ayuda-tinta:#435233; --ayuda-hover:#ccd9b8;
  --barra-fondo:#dfc9a6; --barra-borde:#bd9a6b; --barra-tirador:#a37c4e;
  --barra-tirador-borde:#805a33; --barra-luz:#f5e4bd; --velo:#47331f80;
}
:root, :root[data-estilo="nocturno"] {
  color-scheme: dark;
  --papel:#14251f; --blanco:#203c30; --tinta:#f0e4c5; --suave:#c3b797;
  --acento:#c4a262; --acento-fuerte:#dfbe7b; --acento-texto:#19261b;
  --linea:#6f6345; --verde:#afbc94; --foco:#f1cd83;
  --ambiente-luz:#c69d3b12; --ambiente-sombra:#050d0996;
  --boton-fondo:#182d24e8; --boton-hover:#2b4434; --boton-borde:#b19352;
  --relieve-luz:#f7d89a20; --relieve-sombra:#020b0870;
  --panel-arriba:#243c2d; --panel-abajo:#15291f; --panel-borde:#9e814a;
  --mesa-fondo:#50351f; --mesa-borde:#957042; --mesa-sombra:#000a0799;
  --pie-fondo:#192a20; --progreso-fondo:#0f2018;
  --ayuda-fondo:#665128; --ayuda-borde:#bc9c57; --ayuda-tinta:#fff0c9; --ayuda-hover:#7e6635;
  --barra-fondo:#242a1d; --barra-borde:#806b40; --barra-tirador:#af9054;
  --barra-tirador-borde:#d1b477; --barra-luz:#e5c588; --velo:#030b09ba;
}

/* Lino iluminado de día; verdes profundos y luz de lámpara por la noche. */
body {
  background: radial-gradient(ellipse at 14% 0, var(--ambiente-luz), transparent 55%),
    radial-gradient(ellipse at 95% 70%, var(--ambiente-sombra), transparent 70%),
    repeating-linear-gradient(0deg, #99886805 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, #b8a08006 0 1px, transparent 1px 3px), var(--papel);
}
.pagina { max-width:1920px; padding:0 26px; }
.cabecera { min-height:92px; gap:16px; }
.identidad { gap:12px; }
h1 { font-size:29px; gap:12px; }
.marca { font-size:8px; letter-spacing:2px; }
.simbolo { font-size:41px; }
.herramientas { gap:6px; flex-shrink:1; }
.pequeno { padding:8px 11px; white-space:nowrap; }
.controles { padding:13px 2px; gap:16px; }
.giro-piezas, .opciones-mesa { gap:5px; }
.seleccion-texto, .etiqueta-control { min-height:14px; }
.boton { min-height:44px; background:var(--boton-fondo); box-shadow:inset 0 1px 0 var(--relieve-luz), 0 2px 4px var(--relieve-sombra); }
.boton:hover:not(:disabled) { background:var(--boton-hover); border-color:var(--boton-borde); }
.boton[aria-pressed="true"] { color:var(--acento-texto); background:var(--acento); border-color:var(--acento); }
.boton[aria-pressed="true"]:hover:not(:disabled) { color:var(--acento-texto); background:var(--acento-fuerte); border-color:var(--acento-fuerte); }
button:focus-visible, select:focus-visible, #juego:focus-visible { outline-color:var(--foco); }
.ayuda-directa, .ayuda-directa:disabled { color:var(--ayuda-tinta); background:var(--ayuda-fondo); border-color:var(--ayuda-borde); }
.ayuda-directa:hover:not(:disabled) { color:var(--ayuda-tinta); background:var(--ayuda-hover); border-color:var(--ayuda-borde); }
.ayuda-directa:focus-visible { outline-color:var(--foco); }
.giro:not(:disabled) { border-color:var(--boton-borde); box-shadow:inset 0 1px 0 var(--relieve-luz), 0 2px 5px var(--relieve-sombra); }
.boton-estilo { border-color:var(--boton-borde); }
#icono-estilo { color:var(--acento); }
.sello { background:var(--boton-fondo); }
select { background:var(--boton-fondo); box-shadow:inset 0 1px 2px var(--relieve-sombra); }
select option { color:var(--tinta); background:var(--blanco); }
.vista-controles { color:var(--tinta); background:linear-gradient(var(--panel-arriba), var(--panel-abajo)); border-color:var(--panel-borde); box-shadow:inset 0 1px 0 var(--relieve-luz), 0 -2px 7px var(--relieve-sombra); border-radius:9px 9px 0 0; }
.cabecera-vista { min-height:46px; }
.numero-vista, .zoom-controles output { color:var(--suave); }
.zoom-controles button { min-width:44px; min-height:44px; }
.zoom-controles button:hover:not(:disabled) { background:var(--boton-hover); border-color:var(--linea); }
.lote-mesa { border-top-color:var(--linea); padding:5px 0; }
#selector-lote, .sacar-lote, .lote-mesa #boton-mezclar { min-height:44px; }
.sacar-lote, .principal { background:var(--acento); border-color:var(--acento); color:var(--acento-texto); }
.sacar-lote:hover:not(:disabled), .principal:hover:not(:disabled) { background:var(--acento-fuerte); border-color:var(--acento-fuerte); color:var(--acento-texto); }
.zona-juego { background:var(--mesa-fondo); border-color:var(--mesa-borde); box-shadow:0 14px 35px var(--mesa-sombra), 0 3px 6px var(--relieve-sombra), inset 0 1px 0 var(--relieve-luz); border-radius:18px; }
.pie-mesa { min-height:42px; padding:9px 22px; background:var(--pie-fondo); border-top-color:var(--mesa-borde); }
.pie-mesa p, .cuenta-cajon { color:var(--suave); }
.punto { background:var(--acento); }
.aviso { color:var(--tinta); background:var(--blanco); border:1px solid var(--linea); box-shadow:0 5px 25px var(--mesa-sombra); }
.resumen { padding:18px 3px 14px; }
progress, progress::-webkit-progress-bar { background:var(--progreso-fondo); }
progress::-webkit-progress-value { background:linear-gradient(90deg, var(--acento), var(--acento-fuerte)); }
.enlace { min-height:44px; border-bottom-color:var(--boton-borde); }
.dialogo { background:var(--panel-arriba); border-color:var(--panel-borde); box-shadow:0 24px 100px var(--mesa-sombra), inset 0 1px 0 var(--relieve-luz); }
.dialogo::backdrop { background:var(--velo); }
.cerrar { min-width:44px; min-height:44px; border-radius:8px; }
.cerrar:hover { background:var(--boton-hover); }
[id^="desplazamiento-"]::-webkit-scrollbar-track { background:var(--barra-fondo); }
[id^="desplazamiento-"]::-webkit-scrollbar-thumb { background:var(--barra-tirador); border-color:var(--barra-fondo); }
[id^="desplazamiento-"]::-webkit-scrollbar-thumb:hover { background:var(--barra-tirador-borde); }

/* Las pequeñas maquetas CSS muestran materiales sin descargar imágenes. */
.dialogo-estilos { width:min(720px, calc(100% - 28px)); padding:38px 30px 22px; }
.dialogo-estilos h2 { margin-bottom:12px; }
.dialogo-estilos > p:not(.ceja) { margin:0 auto 24px; max-width:490px; }
.opciones-estilo { display:grid; grid-template-columns:1fr 1fr; gap:16px; text-align:left; }
.tarjeta-estilo { display:flex; flex-direction:column; min-width:0; gap:0; padding:7px 7px 17px; border:1px solid var(--linea); border-radius:13px; background:var(--boton-fondo); text-align:left; color:var(--tinta); box-shadow:0 4px 10px var(--relieve-sombra); transition:border-color .15s, box-shadow .15s; }
.tarjeta-estilo:hover { border-color:var(--boton-borde); }
.tarjeta-estilo[aria-pressed="true"] { border-color:var(--acento); box-shadow:0 0 0 2px var(--acento); }
.estilo-nombre { display:flex; align-items:center; justify-content:space-between; gap:5px; margin:14px 8px 7px; font:19px Georgia, serif; line-height:1.3; }
.estilo-elegido { display:inline-grid; place-items:center; flex:0 0 22px; height:22px; border-radius:50%; background:var(--acento); color:var(--acento-texto); font:13px 'Segoe UI', sans-serif; visibility:hidden; }
.tarjeta-estilo[aria-pressed="true"] .estilo-elegido { visibility:visible; }
.estilo-descripcion { margin:0 8px 14px; font-size:11px; line-height:1.65; color:var(--suave); }
.estilo-materiales { display:flex; align-items:center; gap:5px; margin:auto 8px 0; }
.estilo-materiales i { display:block; width:13px; height:13px; border-radius:50%; border:1px solid #6f4a3640; background:#c99455; }
.estilo-materiales i:nth-child(2) { background:#e9dfc9; }
.estilo-materiales i:nth-child(3) { background:#8b9674; }
[data-estilo="nocturno"] > .estilo-materiales i:nth-child(1) { background:#60402a; }
[data-estilo="nocturno"] > .estilo-materiales i:nth-child(2) { background:#2d4b37; }
[data-estilo="nocturno"] > .estilo-materiales i:nth-child(3) { background:#bea062; }
.estilo-materiales > span { margin-left:4px; font-size:8px; letter-spacing:1px; color:var(--suave); }
.dialogo-estilos > .nota-estilo { margin:23px 0 0 !important; max-width:none !important; font-size:11px !important; }
.muestra-estilo { position:relative; display:block; overflow:hidden; aspect-ratio:1.8; width:100%; border-radius:8px; background:radial-gradient(ellipse at 0 0, #fff5d19e, transparent 80%), repeating-linear-gradient(1deg, #b58a5812 0 2px, transparent 2px 5px), #dcc398; box-shadow:inset 0 0 0 1px #8d634126; --muestra-canto:#c6975d; --muestra-fieltro:#a6ae8d; --muestra-tabla:#ad804c; }
.muestra-nocturno { background:radial-gradient(ellipse at 0 0, #ac793c57, transparent 70%), repeating-linear-gradient(1deg, #cd9d6c08 0 2px, transparent 2px 5px), #2c291e; --muestra-canto:#8d7142; --muestra-fieltro:#244532; --muestra-tabla:#1c3025; }
.muestra-marco, .muestra-mesa, .muestra-cajon { position:absolute; display:block; border:4px solid var(--muestra-canto); border-radius:4px; box-shadow:0 3px 7px #20170770, inset 0 0 6px #0d130a40; }
.muestra-marco { left:6%; top:15%; width:41%; height:74%; background:var(--muestra-fieltro); }
.muestra-mesa { left:51%; top:15%; width:29%; height:74%; background:repeating-linear-gradient(1deg, #2f201017 0 1px, transparent 1px 4px), var(--muestra-tabla); }
.muestra-cajon { left:84%; top:55%; width:12%; height:34%; background:#493724; }
.muestra-sol { position:absolute; right:6%; top:13%; color:#795530; font-size:25px; }
.muestra-nocturno .muestra-sol { color:#efd498; }
.muestra-pieza, .muestra-mesa > span { position:absolute; display:block; width:27%; height:22%; left:26%; top:30%; border-radius:2px; font-size:0; box-shadow:1px 3px 3px #15140d66; background:linear-gradient(125deg, #e7dfc1 0 30%, #cd7452 31% 60%, #6e9da0 61%); }
.muestra-pieza { width:35%; height:30%; }
.muestra-mesa > span:first-child { left:18%; top:20%; transform:rotate(-14deg); }
.muestra-mesa > span:nth-child(2) { left:49%; top:59%; transform:rotate(13deg); }
.muestra-pieza::before, .muestra-mesa > span::before { content:''; position:absolute; width:38%; height:38%; border-radius:50%; left:30%; top:-23%; background:#e7dfc1; }
.muestra-pieza::after, .muestra-mesa > span::after { content:''; position:absolute; width:38%; height:38%; border-radius:50%; right:-23%; top:30%; background:#6e9da0; }

@media (max-width:1340px) and (min-width:851px) {
  .cabecera { flex-wrap:wrap; padding:16px 0 12px; gap:12px; }
  .herramientas { justify-content:flex-start; width:100%; }
}
@media (max-width:850px) {
  .pagina { padding:0 18px; }
  .cabecera { padding:16px 0 12px; gap:12px; }
  .herramientas { justify-content:flex-start; }
  .controles { padding:12px 0; }
  .titulo-vista { white-space:normal; }
}
@media (max-width:600px) {
  .pagina { padding:0 10px; }
  .cabecera { gap:12px; padding:14px 2px 12px; }
  h1 { font-size:24px; gap:8px; flex-wrap:wrap; }
  .identidad { gap:10px; }
  .simbolo { font-size:35px; }
  .marca { font-size:8px; letter-spacing:1.5px; }
  .pequeno { padding:8px 6px; font-size:10px; gap:5px; }
  #boton-imagen { order:1; } #boton-guia { order:2; } #boton-pista { order:3; }
  #boton-colocar { order:4; grid-column:span 2; } #boton-musica { order:5; }
  #boton-reiniciar-arriba { order:6; grid-column:auto; }
  #boton-estilo { order:7; grid-column:span 2; }
  .controles { gap:10px; }
  .opciones-mesa { gap:6px; }
  .pie-mesa { padding:11px 12px; }
  .zona-juego { border-radius:12px; }
  .dialogo-estilos { padding:38px 16px 20px; }
  .dialogo-estilos h2 { font-size:29px; }
  .opciones-estilo { gap:12px; grid-template-columns:1fr; }
  .tarjeta-estilo { display:grid; grid-template-columns:minmax(90px, .85fr) minmax(0, 1.15fr); column-gap:11px; padding:8px; align-items:start; }
  .muestra-estilo { grid-row:1 / 4; aspect-ratio:1; height:100%; min-height:114px; }
  .estilo-nombre { margin:3px 0 6px; font-size:17px; }
  .estilo-descripcion { margin:0 0 9px; font-size:10px; }
  .estilo-materiales { margin:auto 0 3px; flex-wrap:wrap; gap:4px; }
  .estilo-materiales > span { flex-basis:100%; margin:2px 0 0; font-size:7px; letter-spacing:.6px; }
  .muestra-cajon { display:none; }
  .muestra-marco { left:8%; top:29%; width:47%; height:57%; border-width:3px; }
  .muestra-mesa { left:61%; top:29%; width:30%; height:57%; border-width:3px; }
  .muestra-sol { right:10%; top:3%; }
}
@media (max-width:370px) {
  h1 { font-size:21px; }
  .marca { font-size:7px; letter-spacing:1.4px; }
  .dialogo-estilos > p:not(.ceja) { font-size:12px; }
  .estilo-nombre { font-size:16px; }
  .estilo-elegido { flex-basis:18px; height:18px; }
}

/* Ambientes ganados: las medidas y el espacio para las piezas no cambian. */
:root[data-estilo="papiro"] {
  color-scheme:light;
  --papel:#ede0c0; --blanco:#fff8e5; --tinta:#594224; --suave:#796340;
  --acento:#84662d; --acento-fuerte:#6f5120; --acento-texto:#fff9e8;
  --linea:#c2a66c; --verde:#537265; --foco:#27665f;
  --ambiente-luz:#fff5caba; --ambiente-sombra:#b68a321c;
  --boton-fondo:#faf0d9eb; --boton-hover:#fff7e3; --boton-borde:#a58243;
  --relieve-luz:#fff8deb3; --relieve-sombra:#68471920;
  --panel-arriba:#f8eed5; --panel-abajo:#e6d5ae; --panel-borde:#b39351;
  --mesa-fondo:#c6aa70; --mesa-borde:#a88944; --mesa-sombra:#66521d35;
  --pie-fondo:#e4d3ae; --progreso-fondo:#d2bc8a;
  --ayuda-fondo:#dce5cd; --ayuda-borde:#91a779; --ayuda-tinta:#354e3e; --ayuda-hover:#ccdcb9;
  --barra-fondo:#d5bc87; --barra-borde:#ac8c49; --barra-tirador:#9d7d3c;
  --barra-tirador-borde:#765a26; --barra-luz:#f4dea2; --velo:#3e321e90;
}
:root[data-estilo="bosque"] {
  color-scheme:dark;
  --papel:#192f25; --blanco:#2c4434; --tinta:#e7edd5; --suave:#c0cba8;
  --acento:#bcc28b; --acento-fuerte:#d4dbaa; --acento-texto:#25351d;
  --linea:#6c7d55; --verde:#c2d298; --foco:#e4e9ae;
  --ambiente-luz:#c8db6712; --ambiente-sombra:#07190d80;
  --boton-fondo:#243e2eeb; --boton-hover:#37503a; --boton-borde:#9ba96f;
  --relieve-luz:#e7f7b71a; --relieve-sombra:#06130975;
  --panel-arriba:#314b37; --panel-abajo:#203728; --panel-borde:#8c9b62;
  --mesa-fondo:#594f2b; --mesa-borde:#819056; --mesa-sombra:#000d0799;
  --pie-fondo:#233626; --progreso-fondo:#15291d;
  --ayuda-fondo:#3d5430; --ayuda-borde:#91a761; --ayuda-tinta:#edf5cc; --ayuda-hover:#506d3e;
  --barra-fondo:#2d3a24; --barra-borde:#6c7c49; --barra-tirador:#a4b475;
  --barra-tirador-borde:#c7d5a1; --barra-luz:#dce9b7; --velo:#04110bbb;
}
:root[data-estilo="cosmos"] {
  color-scheme:dark;
  --papel:#171e35; --blanco:#29334f; --tinta:#e7edff; --suave:#bbc9e5;
  --acento:#b5cef2; --acento-fuerte:#d2e4ff; --acento-texto:#172b48;
  --linea:#65769c; --verde:#a6c8cf; --foco:#d6e9ff;
  --ambiente-luz:#849aff12; --ambiente-sombra:#080c2796;
  --boton-fondo:#202d49eb; --boton-hover:#364662; --boton-borde:#a3b8de;
  --relieve-luz:#dfedff1a; --relieve-sombra:#060b2075;
  --panel-arriba:#2d3c58; --panel-abajo:#1d2a44; --panel-borde:#90a6cd;
  --mesa-fondo:#29374f; --mesa-borde:#7c91b6; --mesa-sombra:#05071d99;
  --pie-fondo:#1d2a45; --progreso-fondo:#131e33;
  --ayuda-fondo:#334769; --ayuda-borde:#8aa5d7; --ayuda-tinta:#e3efff; --ayuda-hover:#435a80;
  --barra-fondo:#24314c; --barra-borde:#647ba7; --barra-tirador:#9bb5dc;
  --barra-tirador-borde:#cee1ff; --barra-luz:#e2eeff; --velo:#040818bc;
}
:root:is([data-estilo="bosque"], [data-estilo="cosmos"]) {
  --accion-verde:#294b38; --accion-verde-tinta:#e1edcb; --accion-verde-borde:#789b70;
  --accion-azul:#223d47; --accion-azul-tinta:#d3e8ee; --accion-azul-borde:#7498a6;
  --accion-violeta:#41354c; --accion-violeta-tinta:#ebdef3; --accion-violeta-borde:#9e89b2;
  --accion-oro:#4d4123; --accion-oro-tinta:#f8e4b1; --accion-oro-borde:#b4995e;
  --accion-rojo:#50372d; --accion-rojo-tinta:#f8d3bf; --accion-rojo-borde:#b47d69;
}
.dialogo-estilos { width:min(850px, calc(100% - 28px)); }
.opciones-estilo { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
.tarjeta-estilo:focus-visible { outline:3px solid var(--foco); outline-offset:3px; }
.tarjeta-estilo[aria-disabled="true"] { border-style:dashed; cursor:help; }
.tarjeta-estilo[aria-disabled="true"] .muestra-estilo { filter:saturate(.55); }
.estilo-disponibilidad { margin:10px 8px 0; padding-top:9px; border-top:1px solid var(--linea); font-size:10px; font-weight:650; line-height:1.5; color:var(--tinta); }
.estado-estilos { min-height:2.9em; margin:17px 0 0!important; max-width:none!important; line-height:1.55; font-size:12px!important; text-align:left; }
.muestra-papiro { background:radial-gradient(ellipse at 0 0,#fff2c2bb,transparent 85%), repeating-linear-gradient(2deg,#ad853314 0 2px,transparent 2px 5px),#dbc387; --muestra-canto:#b9903c; --muestra-fieltro:#84a299; --muestra-tabla:#b7a679; }
.muestra-bosque { background:radial-gradient(ellipse at 0 0,#bedf6333,transparent 85%),repeating-linear-gradient(2deg,#98b46a0f 0 2px,transparent 2px 5px),#273a28; --muestra-canto:#899a5b; --muestra-fieltro:#394e2f; --muestra-tabla:#435236; }
.muestra-cosmos { background:radial-gradient(ellipse at 0 0,#7ca8ed44,transparent 85%),repeating-linear-gradient(2deg,#bfcff108 0 2px,transparent 2px 5px),#1b2844; --muestra-canto:#91aacf; --muestra-fieltro:#25374b; --muestra-tabla:#2b3c61; }
.muestra-bosque .muestra-sol { color:#dbe7ab; }
.muestra-cosmos .muestra-sol { color:#d2e8ff; }
.muestra-papiro .muestra-marco, .muestra-bosque .muestra-marco, .muestra-cosmos .muestra-marco { outline:1px solid var(--muestra-canto); outline-offset:2px; }
[data-estilo="papiro"] > .estilo-materiales i:nth-child(1) { background:#ddc58d; }
[data-estilo="papiro"] > .estilo-materiales i:nth-child(2) { background:#84a299; }
[data-estilo="papiro"] > .estilo-materiales i:nth-child(3) { background:#b9903c; }
[data-estilo="bosque"] > .estilo-materiales i:nth-child(1) { background:#594b2c; }
[data-estilo="bosque"] > .estilo-materiales i:nth-child(2) { background:#394e2f; }
[data-estilo="bosque"] > .estilo-materiales i:nth-child(3) { background:#a8b17a; }
[data-estilo="cosmos"] > .estilo-materiales i:nth-child(1) { background:#293957; }
[data-estilo="cosmos"] > .estilo-materiales i:nth-child(2) { background:#25374b; }
[data-estilo="cosmos"] > .estilo-materiales i:nth-child(3) { background:#a9bfde; }
.marcos-estilo { margin:21px 0 0; padding:16px 0 0; border:0; border-top:1px solid var(--linea); text-align:left; }
.marcos-estilo legend { padding:0 9px 0 0; color:var(--tinta); font:18px Georgia,serif; }
.opciones-marco { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.opcion-marco { min-width:0; display:grid; grid-template-columns:38px 1fr; align-items:center; text-align:left; gap:10px; border:1px solid var(--linea); border-radius:9px; padding:13px; color:var(--tinta); background:var(--boton-fondo); }
.opcion-marco[aria-pressed="true"] { outline:2px solid var(--acento); outline-offset:1px; }
.opcion-marco[aria-disabled="true"] { border-style:dashed; cursor:help; }
.opcion-marco strong { display:block; font-size:12px; }
.opcion-marco small { display:block; font-size:10px; line-height:1.4; margin-top:5px; color:var(--suave); }
.muestra-marco-opcion { display:block; width:32px; height:36px; border:4px solid #99794f; background:var(--panel-abajo); box-shadow:0 2px 3px #0002,inset 0 0 0 1px #fff4; }
.opcion-marco[data-marco="dorado"] .muestra-marco-opcion { border-color:#bb913d; outline:1px solid #e6c66c; outline-offset:2px; box-shadow:0 2px 3px #0003,inset 0 0 0 1px #fce6a0; }
@media (max-width:700px) { .opciones-estilo { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) {
  .opciones-estilo { grid-template-columns:1fr; }
  .tarjeta-estilo { grid-template-columns:minmax(86px,.75fr) minmax(0,1.25fr); }
  .muestra-estilo { grid-row:1 / 5; min-height:134px; }
  .estilo-disponibilidad { grid-column:2; margin:5px 0 0; font-size:10px; }
  .estado-estilos { font-size:11px!important; }
  .opciones-marco { gap:9px; }
  .opcion-marco { grid-template-columns:1fr; gap:12px; padding:12px; }
}

/* El catálogo utiliza los mismos colores que los dos ambientes de la mesa. */
.catalogo-portadas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:3px 0 26px}
.catalogo-portadas[hidden]{display:none}
/* Una pausa visual distingue las colecciones de las imágenes para jugar. */
.catalogo-individuales{position:relative;margin:0 0 20px;padding-top:22px;text-align:left}
.catalogo-individuales[hidden]{display:none}
.catalogo-individuales::before{content:'';position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,var(--acento),var(--linea) 72%,transparent)}
.catalogo-individuales::after{content:'';position:absolute;left:1px;top:-2px;width:5px;height:5px;transform:rotate(45deg);background:var(--acento)}
.dialogo .catalogo-individuales h3{margin:0;color:var(--tinta);font:25px/1.25 Georgia,serif;overflow-wrap:anywhere}
.dialogo .catalogo-individuales p{margin:6px 0 0;max-width:none;color:var(--suave);font:12px/1.5 'Segoe UI',sans-serif;text-align:left}
@media(max-width:600px){.catalogo-individuales{padding-top:18px;margin-bottom:16px}.dialogo .catalogo-individuales h3{font-size:22px}}
@media(forced-colors:active){.catalogo-individuales::before{background:none;border-top:1px solid CanvasText}.catalogo-individuales::after{background:CanvasText}}
.portada-categoria{isolation:isolate;position:relative;min-height:145px;padding:0;overflow:hidden;border:1px solid var(--linea);border-radius:10px;text-align:left;cursor:pointer;background:#13262c;color:#fff1d4}
.portada-categoria img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .25s}
.portada-categoria::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent,#031925df)}
.portada-categoria:hover img{transform:scale(1.04)}
.portada-categoria-texto{display:flex;flex-direction:column;justify-content:end;min-height:145px;padding:18px;gap:5px}
.portada-categoria strong{font:21px Georgia,serif;color:#fff1d4}
.portada-categoria small{font:12px 'Segoe UI',sans-serif;color:#fbe5bd}
.previa-puzle{width:min(1050px,calc(100% - 28px));max-height:92dvh;overflow:auto}
.previa-composicion{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(230px,1fr);align-items:center;gap:30px;padding-top:14px}
.previa-composicion img{width:100%;max-height:65dvh;object-fit:contain;border-radius:5px}
.previa-composicion h2{font:36px/1.15 Georgia,serif}
.previa-composicion p{font:15px/1.65 'Segoe UI',sans-serif}
/* Procedencia discreta: el autor queda visible y los enlaces se despliegan. */
.obra-credito{min-width:0;margin:12px 0 18px;overflow-wrap:anywhere;text-align:left;color:var(--suave)}
.obra-credito[hidden]{display:none!important}
.dialogo .obra-credito p{margin:6px 0;font:13px/1.6 'Segoe UI',sans-serif;color:var(--suave)}
.dialogo .obra-credito .obra-credito-resumen{color:var(--tinta);font-weight:600}
.obra-credito-detalle{border-top:1px solid var(--linea);margin-top:8px;padding-top:2px}
.obra-credito-detalle summary{cursor:pointer;min-height:44px;padding:10px 0;box-sizing:border-box;color:var(--acento);font:13px/1.7 'Segoe UI',sans-serif}
.obra-credito-enlaces{display:flex;flex-wrap:wrap;gap:0 20px}
.obra-credito-enlaces a{display:inline-flex;align-items:center;min-height:44px;color:var(--acento);font:13px/1.6 'Segoe UI',sans-serif;text-underline-offset:3px}
.obra-credito :is(a,summary):focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:3px}
.previa-cantidad{display:flex;flex-direction:column;gap:10px;margin:24px 0;font-size:15px}
.previa-cantidad select{font:16px 'Segoe UI',sans-serif;min-height:48px;padding:10px;background:var(--papel);color:var(--tinta);border:1px solid var(--linea);border-radius:6px}
#previa-estado{min-height:42px;font-size:12px;color:var(--suave)}
@media(max-width:650px){.catalogo-portadas{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.portada-categoria strong{font-size:17px}.portada-categoria-texto{padding:12px}.previa-composicion{grid-template-columns:1fr;gap:16px}.previa-composicion img{max-height:36dvh}.previa-composicion h2{font-size:27px}.previa-cantidad{margin:14px 0}}
@media(prefers-reduced-motion:reduce){.portada-categoria img{transition:none}.portada-categoria:hover img{transform:none}}
.boton-rompecabezas { border-color:var(--boton-borde); }
.boton-rompecabezas > span { color:var(--acento); }
#nombre-rompecabezas { min-width:0; }
.dialogo-rompecabezas { width:min(1050px, calc(100% - 28px)); max-height:90dvh; padding:0; overflow:hidden; }
.dialogo-rompecabezas[open] { display:flex; flex-direction:column; }
.catalogo-cabecera { flex:none; padding:32px 28px 0; text-align:left; }
.dialogo-rompecabezas h2 { margin:6px 0 9px; }
.dialogo-rompecabezas #descripcion-rompecabezas { max-width:650px; margin:0 0 18px; line-height:1.6; }
.catalogo-filtros { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); gap:14px; }
.catalogo-filtros label { display:flex; flex-direction:column; gap:7px; min-width:0; font-size:11px; color:var(--suave); }
.catalogo-filtros select, .catalogo-filtros input { width:100%; min-width:0; height:44px; padding:8px 12px; border:1px solid var(--linea); border-radius:9px; color:var(--tinta); background:var(--boton-fondo); font:inherit; font-size:13px; }
.catalogo-filtros input::placeholder { color:var(--suave); opacity:1; }
.dialogo-rompecabezas .conteo-catalogo { margin:15px 0 12px; padding-bottom:12px; border-bottom:1px solid var(--linea); color:var(--acento); font-size:11px; }
.catalogo-resultados { min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:4px 24px 20px 28px; }
.opciones-rompecabezas { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:19px; text-align:left; }
.tarjeta-rompecabezas {
  display:flex; flex-direction:column; min-width:0; gap:0; padding:8px 8px 15px;
  color:var(--tinta); background:var(--boton-fondo); border:1px solid var(--linea);
  border-radius:13px; text-align:left; box-shadow:0 4px 12px var(--relieve-sombra);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.tarjeta-rompecabezas[hidden] { display:none; }
.tarjeta-rompecabezas:hover:not(:disabled) { border-color:var(--boton-borde); transform:translateY(-2px); }
.tarjeta-rompecabezas[aria-pressed="true"] { border-color:var(--acento); box-shadow:0 0 0 2px var(--acento), 0 4px 12px var(--relieve-sombra); }
.dialogo .tarjeta-rompecabezas > img { width:100%; height:auto; aspect-ratio:4 / 5; object-fit:contain; border-radius:7px; background:var(--pie-fondo); }
.rompecabezas-categoria { margin:12px 7px 0; font-size:9px; font-weight:650; color:var(--acento); letter-spacing:.8px; text-transform:uppercase; }
.rompecabezas-nombre { margin:6px 7px 7px; font:21px Georgia, serif; line-height:1.2; }
.rompecabezas-descripcion { margin:0 7px 15px; font-size:11px; line-height:1.6; color:var(--suave); }
.rompecabezas-progreso { display:flex; flex-direction:column; gap:6px; margin:0 7px 13px; font-size:10px; line-height:1.4; }
.rompecabezas-estado { font-weight:650; color:var(--tinta); }
.rompecabezas-avance { color:var(--suave); font-variant-numeric:tabular-nums; }
.rompecabezas-completadas, .tarjeta-rompecabezas[data-estado="completada"] .rompecabezas-estado { color:var(--verde); }
.tarjeta-rompecabezas[data-estado="nueva"] .rompecabezas-estado { color:var(--suave); font-weight:400; }
.barra-progreso-catalogo { display:block; width:100%; height:5px; margin:0; accent-color:var(--verde); }
.barra-progreso-catalogo::-webkit-progress-bar { background:var(--linea); border-radius:5px; }
.barra-progreso-catalogo::-webkit-progress-value { background:var(--verde); border-radius:5px; }
.barra-progreso-catalogo::-moz-progress-bar { background:var(--verde); border-radius:5px; }
.catalogo-continuar { margin:0 0 22px; padding:8px 0 22px; border-bottom:1px solid var(--linea); text-align:left; }
.catalogo-continuar[hidden], .partida-continuar[hidden] { display:none; }
.catalogo-continuar h3 { margin:0 0 6px; font:23px Georgia, serif; color:var(--tinta); }
.dialogo .continuar-descripcion { margin:0 0 14px; font-size:11px; line-height:1.5; color:var(--suave); }
.partidas-continuar { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:11px; }
.partida-continuar { display:grid; grid-template-columns:84px minmax(0, 1fr); gap:13px; padding:10px; min-width:0; border:1px solid var(--linea); border-radius:11px; background:var(--boton-fondo); color:var(--tinta); text-align:left; }
.partida-continuar:hover:not(:disabled) { border-color:var(--acento); background:var(--boton-hover); }
.dialogo .partida-continuar > img { width:84px; height:116px; object-fit:contain; border-radius:6px; background:var(--pie-fondo); }
.partida-informacion { display:flex; flex-direction:column; gap:6px; min-width:0; }
.partida-nombre { font:18px Georgia, serif; line-height:1.2; overflow-wrap:anywhere; }
.partida-detalle, .partida-tiempo { font-size:12px; line-height:1.4; color:var(--suave); font-variant-numeric:tabular-nums; }
.partida-accion { margin-top:auto; font-size:12px; font-weight:650; color:var(--acento); }
.rompecabezas-elegir { display:block; align-self:flex-start; margin:auto 7px 0; border-top:1px solid var(--linea); padding-top:10px; font-size:10px; color:var(--acento); font-weight:600; }
.tarjeta-rompecabezas[aria-pressed="true"] .rompecabezas-elegir { color:var(--verde); }
.catalogo-vacio { padding:32px 16px; text-align:center; }
.catalogo-vacio strong { font:22px Georgia, serif; }
.dialogo-rompecabezas > .estado-catalogo { flex:none; margin:0; padding:12px 28px 15px; border-top:1px solid var(--linea); font-size:11px; line-height:1.5; }
.dialogo-rompecabezas[aria-busy="true"] .estado-catalogo { color:var(--tinta); }
@media (min-width:851px) and (max-width:1450px) {
  .cabecera { flex-wrap:wrap; padding:16px 0 12px; gap:12px; }
  .herramientas { width:100%; justify-content:flex-start; }
}
@media (max-width:760px) {
  .opciones-rompecabezas { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .catalogo-cabecera { padding:32px 20px 0; }
  .catalogo-resultados { padding:4px 16px 18px 20px; }
}
@media (max-width:600px) {
  #boton-rompecabezas { order:0; grid-column:auto; }
  #boton-estilo { order:0; grid-column:auto; }
  #boton-reiniciar-arriba { order:0; grid-column:auto; }
  .boton-rompecabezas { font-size:9px; gap:3px; padding:8px 3px; }
  .pequeno.boton-rompecabezas > span { font-size:15px; }
  .dialogo-rompecabezas { max-height:calc(100dvh - 24px); padding:0; }
  .catalogo-cabecera { padding:32px 16px 0; }
  .dialogo-rompecabezas h2 { font-size:27px; }
  .dialogo-rompecabezas #descripcion-rompecabezas { font-size:11px; margin-bottom:12px; }
  .catalogo-filtros { gap:9px; grid-template-columns:1fr 1fr; }
  .catalogo-filtros select, .catalogo-filtros input { padding:8px; font-size:12px; }
  .dialogo-rompecabezas .conteo-catalogo { margin:10px 0 9px; padding-bottom:9px; }
  .catalogo-resultados { padding:4px 12px 16px 16px; }
  .opciones-rompecabezas { grid-template-columns:1fr; gap:14px; }
  .tarjeta-rompecabezas { display:grid; grid-template-columns:minmax(85px, .85fr) minmax(0, 1.15fr); grid-template-rows:auto auto auto 1fr auto; column-gap:12px; padding:8px; align-items:start; }
  .dialogo .tarjeta-rompecabezas > img { grid-row:1 / 6; height:100%; min-height:164px; max-height:250px; object-fit:contain; }
  .rompecabezas-categoria { margin:3px 0 0; font-size:8px; }
  .rompecabezas-nombre { margin:5px 0 7px; font-size:18px; }
  .rompecabezas-descripcion { margin:0 0 12px; font-size:11px; line-height:1.5; }
  .rompecabezas-progreso { margin:0 0 10px; }
  .rompecabezas-elegir { align-self:end; margin:0; padding-top:8px; font-size:10px; }
  .partidas-continuar { grid-template-columns:1fr; gap:9px; }
  .partida-continuar { grid-template-columns:64px minmax(0, 1fr); gap:10px; padding:9px; }
  .dialogo .partida-continuar > img { width:64px; height:105px; }
  .partida-nombre { font-size:17px; }
  .catalogo-continuar h3 { font-size:21px; }
  .dialogo-rompecabezas > .estado-catalogo { padding:10px 16px 12px; font-size:10px; }
}
@media (max-width:480px) {
  .catalogo-filtros { grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:370px) {
  .pequeno.boton-rompecabezas > span { display:none; }
  .rompecabezas-nombre { font-size:17px; }
  .rompecabezas-descripcion { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .tarjeta-rompecabezas { transition:none; }
  .tarjeta-rompecabezas:hover:not(:disabled) { transform:none; }
}

/* Título de bienvenida hasta elegir; después la obra y sus piezas ocupan la cabecera. */
.identidad > div { min-width:0; }
#titulo-juego { flex-wrap:wrap; gap:8px 14px; }
#titulo-juego #nombre-rompecabezas { min-width:0; overflow-wrap:anywhere; }
#titulo-juego .sello:not([hidden]) { display:inline-flex; margin:0; white-space:nowrap; }
#titulo-juego .sello[hidden], #marca-juego[hidden] { display:none; }

/* Filtros combinables: el resumen permanece junto a los controles. */
.catalogo-filtros-secundarios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:12px}
.catalogo-filtros-secundarios label{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:11px;color:var(--suave)}
.catalogo-filtros-secundarios select{width:100%;min-width:0;min-height:44px;padding:8px 12px;border:1px solid var(--linea);border-radius:9px;color:var(--tinta);background:var(--boton-fondo);font:13px 'Segoe UI',sans-serif}
.catalogo-filtros-secundarios select:focus-visible,.catalogo-limpiar:focus-visible{outline:3px solid var(--acento);outline-offset:3px}
.dialogo .catalogo-nota-filtros{margin:9px 0 0;text-align:left;font-size:11px;line-height:1.4;color:var(--suave)}
.catalogo-nota-filtros[hidden],.catalogo-filtros-activos[hidden]{display:none}
.catalogo-resumen-filtros{display:flex;align-items:center;gap:12px;margin-top:10px;min-width:0}
.catalogo-filtros-activos{list-style:none;display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0;margin:0;padding:0}
.catalogo-filtros-activos li{max-width:100%;overflow-wrap:anywhere;padding:5px 10px;border:1px solid var(--linea);border-radius:20px;background:var(--boton-fondo);color:var(--tinta);font-size:11px;line-height:1.4}
.catalogo-limpiar{flex:none;margin-left:auto;min-height:44px;font-size:12px}
.catalogo-resultados{flex:1 1 auto}
@media(max-width:600px){
  .catalogo-cabecera{max-height:58dvh;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
  .catalogo-cabecera>.ceja,.catalogo-cabecera>#descripcion-rompecabezas{display:none}
  .catalogo-cabecera h2{font-size:25px;margin-bottom:14px;padding-right:32px}
  .catalogo-filtros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalogo-filtros-secundarios{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:9px}
  .catalogo-filtros-secundarios label:last-child{grid-column:1/-1}
  .catalogo-filtros-secundarios select{font-size:12px;padding:8px}
  .catalogo-resumen-filtros{align-items:flex-start;gap:8px}
  .catalogo-filtros-activos{gap:5px}
  .catalogo-filtros-activos li{font-size:10px;padding:4px 8px}
  .catalogo-limpiar{max-width:125px;padding-inline:9px}
}
@media(max-height:650px){.catalogo-cabecera{box-sizing:border-box;max-height:44dvh;overflow:auto;overscroll-behavior:contain}}
/* El cierre comparte la fila del título; no necesita otra franja vacía. */
#dialogo-rompecabezas[open]:has(> .cerrar){padding-top:0}
#dialogo-rompecabezas .catalogo-cabecera{padding-top:22px}
#dialogo-rompecabezas .catalogo-cabecera>.ceja,
#dialogo-rompecabezas .catalogo-cabecera>h2,
#dialogo-rompecabezas .catalogo-cabecera>#descripcion-rompecabezas{padding-right:56px}
#dialogo-rompecabezas .catalogo-cabecera>h2{margin:4px 0 8px;font-size:30px;line-height:1.15}
#dialogo-rompecabezas #descripcion-rompecabezas{margin-bottom:12px;font-size:12px;line-height:1.5}
#dialogo-rompecabezas .catalogo-filtros label,
#dialogo-rompecabezas .catalogo-filtros-secundarios label{gap:5px}
#dialogo-rompecabezas .catalogo-filtros-secundarios{margin-top:10px}
#dialogo-rompecabezas .catalogo-nota-filtros{font-size:11px;line-height:1.35;margin:5px 0 0}
#dialogo-rompecabezas .catalogo-resumen-filtros{margin-top:8px}
#dialogo-rompecabezas .conteo-catalogo{font-size:11px;line-height:1.4;margin:8px 0;padding-bottom:9px}
@media(min-width:601px){
  #dialogo-rompecabezas .tarjeta-rompecabezas>img{aspect-ratio:4/3;height:auto;object-fit:contain}
}
@media(max-width:600px){
  #dialogo-rompecabezas .catalogo-cabecera{padding-top:20px}
  #dialogo-rompecabezas .catalogo-cabecera>h2{font-size:23px;line-height:1.15;margin:0 0 12px}
  /* Las explicaciones siguen asociadas a sus selects para lectores de pantalla. */
  #dialogo-rompecabezas .catalogo-nota-filtros{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  #dialogo-rompecabezas .catalogo-filtros-secundarios{margin-top:8px}
  #dialogo-rompecabezas .catalogo-filtros-activos li{padding:3px 7px}
  #dialogo-rompecabezas .conteo-catalogo{margin:7px 0;padding-bottom:8px;font-size:10px}
}

/* 1.44: navegación por etiquetas transversales, manteniendo espacio para el arte. */
#dialogo-rompecabezas .catalogo-filtros { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
#dialogo-rompecabezas .catalogo-cabecera { max-height:52dvh; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
#dialogo-rompecabezas .catalogo-etiquetas-contexto { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; margin-top:8px; }
#dialogo-rompecabezas #catalogo-ayuda-etiquetas { margin:0; max-width:470px; color:var(--suave); font:12px/1.5 'Segoe UI',sans-serif; text-align:left; }
.catalogo-coincidencia { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:var(--suave); font-size:12px; }
.catalogo-coincidencia select { min-height:40px; max-width:100%; padding:6px 10px; border:1px solid var(--linea); border-radius:9px; color:var(--tinta); background:var(--boton-fondo); font:12px 'Segoe UI',sans-serif; }
.catalogo-sugerencias,.previa-etiquetas { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; }
.sugerencias-titulo { color:var(--suave); font-size:12px; }
.catalogo-coincidencia[hidden],.catalogo-sugerencias[hidden],.catalogo-limpiar[hidden] { display:none; }
#dialogo-rompecabezas .catalogo-filtros-activos li { display:flex; padding:0; border:0; border-radius:0; background:none; }
body #dialogo-rompecabezas .catalogo-filtro-quitar,
body #dialogo-rompecabezas .catalogo-etiqueta-sugerida,
body .previa-puzle .catalogo-etiqueta-sugerida {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-width:0; max-width:100%; min-height:36px; padding:6px 12px;
  border:1px solid var(--boton-borde); border-image:none!important; border-radius:18px;
  background:var(--boton-fondo); color:var(--tinta)!important; text-shadow:none;
  font:12px/1.35 'Segoe UI',sans-serif; text-align:left; overflow-wrap:anywhere;
  cursor:pointer; box-shadow:0 2px 5px var(--relieve-sombra);
}
body #dialogo-rompecabezas .catalogo-filtro-quitar { border-color:var(--acento); }
.catalogo-filtro-cruz { flex:none; font-size:19px; line-height:1; opacity:.85; }
body #dialogo-rompecabezas .catalogo-filtro-quitar:hover,
body #dialogo-rompecabezas .catalogo-etiqueta-sugerida:hover,
body .previa-puzle .catalogo-etiqueta-sugerida:hover { filter:brightness(1.08); }
#dialogo-rompecabezas .catalogo-resumen-filtros:has(.catalogo-filtros-activos[hidden]) { display:none; }
#dialogo-rompecabezas .catalogo-resumen-filtros { align-items:flex-start; }
.catalogo-mas-filtros { margin-top:10px; border-top:1px solid var(--linea); }
.catalogo-mas-filtros summary { min-height:40px; align-content:center; padding:9px 0; color:var(--tinta); font-size:12px; cursor:pointer; }
.catalogo-mas-filtros summary:focus-visible { outline:3px solid var(--acento); outline-offset:2px; border-radius:4px; }
#dialogo-rompecabezas .catalogo-mas-filtros .catalogo-filtros-secundarios { margin-top:0; }
#dialogo-rompecabezas .rompecabezas-categoria { font-size:10px; line-height:1.5; text-transform:none; letter-spacing:.15px; overflow-wrap:anywhere; }
.previa-etiquetas { margin:12px 0; }
@media(max-width:600px) {
  #dialogo-rompecabezas .catalogo-cabecera { max-height:54dvh; }
  #dialogo-rompecabezas .catalogo-filtros { grid-template-columns:minmax(0,1fr); }
  #dialogo-rompecabezas #catalogo-ayuda-etiquetas { font-size:11px; }
  #dialogo-rompecabezas .catalogo-coincidencia { gap:6px; width:100%; }
  #dialogo-rompecabezas .catalogo-coincidencia select { flex:1; min-width:0; }
  #dialogo-rompecabezas .catalogo-resumen-filtros { flex-wrap:wrap; }
  #dialogo-rompecabezas .catalogo-filtros-activos { flex-basis:100%; }
  #dialogo-rompecabezas .catalogo-limpiar { min-height:38px; margin-left:0; }
  body #dialogo-rompecabezas .catalogo-filtro-quitar,
  body #dialogo-rompecabezas .catalogo-etiqueta-sugerida,
  body .previa-puzle .catalogo-etiqueta-sugerida { min-height:44px; font-size:12px; }
  #dialogo-rompecabezas .catalogo-mas-filtros summary { min-height:44px; }
}
@media(max-height:650px) { #dialogo-rompecabezas .catalogo-cabecera { max-height:46dvh; } }
@media(forced-colors:active) {
  body #dialogo-rompecabezas .catalogo-filtro-quitar,
  body #dialogo-rompecabezas .catalogo-etiqueta-sugerida,
  body .previa-puzle .catalogo-etiqueta-sugerida { border:1px solid ButtonText!important; color:ButtonText!important; }
}
/* El contador queda siempre visible, aunque se desplieguen más filtros. */
#dialogo-rompecabezas > .conteo-catalogo { flex:none; margin:0 28px; padding:10px 0; }
@media(max-width:600px) {
  #dialogo-rompecabezas .catalogo-filtros { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
  #dialogo-rompecabezas #catalogo-ayuda-etiquetas { display:none; }
  #dialogo-rompecabezas .catalogo-filtros-activos { flex:1 1 0; }
  #dialogo-rompecabezas .catalogo-limpiar { max-width:85px; min-height:44px; padding-inline:12px; }
  #dialogo-rompecabezas > .conteo-catalogo { margin:0 16px; padding:8px 0; }
}
@media(max-height:650px) {
  #dialogo-rompecabezas .catalogo-cabecera { max-height:50dvh; padding-top:12px; }
  #dialogo-rompecabezas .catalogo-cabecera > .ceja,
  #dialogo-rompecabezas #descripcion-rompecabezas,
  #dialogo-rompecabezas #catalogo-ayuda-etiquetas { display:none; }
  #dialogo-rompecabezas .catalogo-cabecera > h2 { font-size:23px; margin:0 0 8px; }
  #dialogo-rompecabezas > .estado-catalogo { padding:6px 20px; font-size:10px; }
  #dialogo-rompecabezas > .conteo-catalogo { padding:5px 0; }
}@media(max-height:650px) {
  #dialogo-rompecabezas .catalogo-cabecera { padding-top:8px; }
  #dialogo-rompecabezas .catalogo-cabecera > h2 { font-size:21px; margin-bottom:6px; }
  #dialogo-rompecabezas .catalogo-filtros :is(input,select) { height:40px; }
  #dialogo-rompecabezas .catalogo-etiquetas-contexto { margin-top:6px; }
  #dialogo-rompecabezas .catalogo-coincidencia select { min-height:36px; }
}

/* Selección editorial: controles cómodos en la portada y aviso discreto. */
.catalogo-nota-contenido { margin: .6rem 0; font-size: .9em; line-height: 1.5; color: var(--tinta-suave); }
#dialogo-contenido { box-sizing: border-box; }
#dialogo-contenido p { line-height: 1.6; }
#dialogo-contenido label { display: block; margin-bottom: .6rem; font-weight: 600; }
#dialogo-contenido select { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: 48px; font: inherit; font-size: .9em; padding: .7rem .35rem; color: var(--tinta); background: var(--panel-arriba); border: 1px solid var(--panel-borde); border-radius: 10px; }
#dialogo-contenido .copia-acciones { justify-content: flex-end; }
#dialogo-contenido .boton { white-space: normal; min-width: 0; }
@media (max-width: 420px) { #dialogo-contenido .copia-acciones { flex-direction: column; } #dialogo-contenido .boton { width: 100%; } }

/* Todos los colores vienen del tema elegido. El panel funciona sin Phaser. */
.herramientas-sonido { display:flex; align-items:center; gap:4px; }
.herramientas-sonido .musica { min-width:98px; }
.herramientas-sonido .ajustes-sonido { min-width:86px; padding:8px 12px; }
.dialogo-sonido { width:min(600px, calc(100% - 28px)); padding:35px 30px 20px; }
.dialogo-sonido h2 { margin-bottom:10px; }
.dialogo-sonido > p:not(.ceja) { margin:0 auto 22px; max-width:460px; }
.sonido-reproduccion { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; border:1px solid var(--linea); border-radius:12px; background:var(--boton-fondo); text-align:left; }
.sonido-obra { display:flex; align-items:center; min-width:0; gap:12px; }
.sonido-obra > div { display:flex; flex-direction:column; gap:5px; min-width:0; }
.sonido-obra strong { font:19px Georgia, serif; line-height:1.3; }
.sonido-obra .ceja { font-size:8px; letter-spacing:1.5px; }
.sonido-icono { display:grid; place-items:center; flex:0 0 40px; height:40px; border:1px solid var(--linea); border-radius:50%; color:var(--acento); font-size:24px; }
.dialogo-sonido #sonido-reproducir { min-width:112px; min-height:44px; padding:9px 12px; flex-shrink:0; }
.sonido-canales { text-align:left; }
.sonido-canal { padding:20px 0 17px; border-bottom:1px solid var(--linea); }
.sonido-cabecera { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.sonido-cabecera h3 { margin:0; font:20px Georgia, serif; }
.sonido-cabecera output { color:var(--suave); font-size:12px; font-variant-numeric:tabular-nums; }
.sonido-volumen { display:block; width:100%; min-width:0; height:36px; margin:6px 0; appearance:none; cursor:pointer; background:transparent; --volumen:35%; }
.sonido-volumen::-webkit-slider-runnable-track { height:6px; border-radius:10px; background:linear-gradient(to right, var(--acento) 0 var(--volumen), var(--progreso-fondo) var(--volumen) 100%); }
.sonido-volumen::-webkit-slider-thumb { appearance:none; width:20px; height:20px; margin-top:-7px; border:3px solid var(--panel-arriba); border-radius:50%; background:var(--acento); box-shadow:0 0 0 1px var(--acento); }
.sonido-volumen::-moz-range-track { height:6px; border-radius:10px; background:var(--progreso-fondo); }
.sonido-volumen::-moz-range-progress { height:6px; border-radius:10px; background:var(--acento); }
.sonido-volumen::-moz-range-thumb { width:15px; height:15px; border:3px solid var(--panel-arriba); border-radius:50%; background:var(--acento); box-shadow:0 0 0 1px var(--acento); }
.sonido-volumen:focus-visible { outline:2px solid var(--foco); outline-offset:3px; border-radius:7px; }
.sonido-volumen:disabled { cursor:default; opacity:.45; }
.sonido-eleccion { display:flex; align-items:center; gap:12px; }
.sonido-eleccion + .sonido-eleccion { margin-top:8px; }
.sonido-eleccion label { flex:0 0 98px; font-size:12px; color:var(--suave); }
.sonido-eleccion select { flex:1; min-width:0; width:100%; min-height:44px; padding:9px 12px; font-size:12px; }
.sonido-radio { display:flex; align-items:center; gap:12px; margin-top:14px; padding:12px; border:1px solid var(--linea); border-radius:12px; background:var(--boton-fondo); }
.sonido-ahora { flex:1; display:flex; flex-direction:column; min-width:0; gap:6px; text-align:center; }
.sonido-ahora .ceja { font-size:9px; letter-spacing:1.5px; }
.sonido-ahora strong { font:17px Georgia, serif; line-height:1.35; overflow-wrap:anywhere; }
.dialogo-sonido .sonido-salto { width:44px; min-height:44px; padding:0; flex-shrink:0; }
.sonido-salto span { font:30px Georgia, serif; line-height:1; }
.dialogo-sonido .sonido-nota { margin:9px 0 0; color:var(--suave); font-size:11px; line-height:1.6; }
.dialogo-sonido > .sonido-estado { min-height:2.8em; margin:17px 0 0; max-width:none; font-size:11px; line-height:1.5; }
.sonido-sin-pistas .sonido-cabecera { color:var(--suave); }
.musica[data-activo="true"][aria-pressed="false"] > [aria-hidden] { color:var(--acento); }
@media (max-width:600px) {
  .herramientas-sonido { order:5; grid-column:span 2; }
  .herramientas-sonido .musica { flex:1; min-width:0; }
  .herramientas-sonido .ajustes-sonido { flex:1; min-width:0; padding:8px 7px; }
  .dialogo-sonido { padding:35px 18px 17px; }
  .dialogo-sonido h2 { font-size:28px; }
  .dialogo-sonido > p:not(.ceja) { font-size:12px; }
  .sonido-reproduccion { padding:13px 11px; gap:10px; }
  .sonido-obra { gap:8px; }
  .sonido-obra strong { font-size:17px; }
  .sonido-icono { display:none; }
  .dialogo-sonido #sonido-reproducir { min-width:92px; padding:9px; }
  .sonido-eleccion label { flex-basis:88px; font-size:11px; }
  .sonido-eleccion { gap:7px; }
  .sonido-canal { padding:16px 0 13px; }
  .sonido-radio { gap:7px; padding:10px 8px; }
  .sonido-ahora strong { font-size:16px; }
  .sonido-eleccion select { font-size:11px; padding:9px 7px; }
}

/* Una secuencia visible para empezar; los colores y materiales acompañan a ambos temas. */
:root {
  --iconos-botones:url('assets/interfaz/iconos-botones.png');
  --accion-verde:#e6eddd; --accion-verde-tinta:#344d36; --accion-verde-borde:#9aaa8b;
  --accion-azul:#e4edf0; --accion-azul-tinta:#315364; --accion-azul-borde:#9cb9c6;
  --accion-violeta:#eee6f1; --accion-violeta-tinta:#645071; --accion-violeta-borde:#baabc5;
  --accion-oro:#f8ebca; --accion-oro-tinta:#76531c; --accion-oro-borde:#ccb078;
  --accion-rojo:#f4e0d7; --accion-rojo-tinta:#873f32; --accion-rojo-borde:#c89c8f;
}
:root[data-estilo="nocturno"] {
  --accion-verde:#294b38; --accion-verde-tinta:#e1edcb; --accion-verde-borde:#789b70;
  --accion-azul:#223d47; --accion-azul-tinta:#d3e8ee; --accion-azul-borde:#7498a6;
  --accion-violeta:#41354c; --accion-violeta-tinta:#ebdef3; --accion-violeta-borde:#9e89b2;
  --accion-oro:#4d4123; --accion-oro-tinta:#f8e4b1; --accion-oro-borde:#b4995e;
  --accion-rojo:#50372d; --accion-rojo-tinta:#f8d3bf; --accion-rojo-borde:#b47d69;
}
.icono-ilustrado {
  display:inline-block; width:52px; height:52px; flex:0 0 52px;
  background-image:var(--iconos-botones); background-size:300% 300%; background-repeat:no-repeat;
  filter:drop-shadow(0 2px 2px #24170d16); pointer-events:none;
}
.icono-rompecabezas { background-position:0 0; }
.icono-dificultad { background-position:50% 0; }
.icono-imagen { background-position:100% 0; }
.icono-guia { background-position:0 50%; }
.icono-pista { background-position:50% 50%; }
.icono-colocar { background-position:100% 50%; }
.icono-reiniciar { background-position:0 100%; }
.icono-tutorial { background-position:50% 100%; }
.icono-contador { background-position:100% 100%; }
.cabecera { min-height:100px; padding:16px 0; flex-wrap:wrap; }
.identidad { flex:1 1 410px; }
.herramientas.herramientas-secundarias { width:auto; flex:0 1 auto; display:flex; justify-content:flex-end; align-items:center; gap:8px; }
.herramientas-secundarias .pequeno { flex:0 0 auto; font-size:11px; }
.herramientas-secundarias .boton-como-jugar { color:var(--accion-violeta-tinta); border-color:var(--accion-violeta-borde); background:var(--accion-violeta); padding:4px 12px 4px 5px; }
.boton-como-jugar .icono-ilustrado { width:35px; height:35px; flex-basis:35px; }
.boton-como-jugar > span:last-child { font-weight:650; }
.flujo-partida { display:grid; grid-template-columns:1.15fr 1fr .9fr; gap:14px; padding:22px 0 16px; }
.paso-partida { min-width:0; border:1px solid var(--linea); background:var(--boton-fondo); border-radius:15px; padding:13px 16px; box-shadow:0 3px 8px var(--relieve-sombra); }
.paso-etiqueta { display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:9px; font-weight:700; letter-spacing:1.25px; color:var(--suave); }
.paso-etiqueta > span { display:inline-grid; place-items:center; width:23px; height:23px; flex:0 0 23px; border-radius:50%; border:1px solid var(--linea); color:var(--tinta); background:var(--panel-arriba); letter-spacing:0; font-size:12px; }
.flujo-partida .elegir-rompecabezas, .flujo-partida .boton-empezar { width:100%; min-height:79px; padding:10px 14px 10px 8px; justify-content:flex-start; gap:12px; text-align:left; white-space:normal; }
.flujo-partida .elegir-rompecabezas { background:var(--accion-verde); border-color:var(--accion-verde-borde); color:var(--accion-verde-tinta); }
.elegir-rompecabezas > span { color:inherit; }
.elegir-rompecabezas strong, .boton-empezar strong { display:block; font-size:18px; line-height:1.3; font-weight:650; }
.elegir-rompecabezas small, .boton-empezar small { display:block; font-size:11px; margin-top:5px; font-weight:400; }
.elegir-rompecabezas .flecha-paso { font-size:31px; margin-left:auto; }
.elegir-dificultad { display:flex; align-items:center; gap:12px; min-height:79px; }
.elegir-dificultad > div { flex:1; min-width:0; }
.elegir-dificultad label { display:block; margin:0 0 5px; font-size:11px; color:var(--suave); }
.elegir-dificultad #selector-cantidad { width:100%; max-width:none; min-height:45px; font-size:17px; font-weight:650; color:var(--accion-oro-tinta); background:var(--accion-oro); border-color:var(--accion-oro-borde); }
.nota-paso { margin:7px 0 0; color:var(--suave); font-size:10px; line-height:1.5; }
.flujo-partida .boton-empezar { background:var(--acento); color:var(--acento-texto); border-color:var(--acento); }
.flujo-partida .boton-empezar:hover:not(:disabled) { background:var(--acento-fuerte); }
.jugar-simbolo { display:grid; place-items:center; width:48px; height:48px; flex:0 0 48px; font-size:25px; border-radius:50%; background:#ffffff15; border:1px solid #ffffff30; }
.barra-logros { display:flex; align-items:center; gap:28px; padding:17px 21px; margin:0 0 18px; border:1px solid var(--linea); border-radius:15px; background:linear-gradient(115deg, var(--panel-arriba), var(--panel-abajo)); box-shadow:inset 0 1px 0 var(--relieve-luz); }
.reloj-partida { display:flex; align-items:center; gap:13px; flex-shrink:0; }
.reloj-partida > .icono-contador { width:63px; height:63px; flex-basis:63px; }
.reloj-cifras { display:flex; flex-direction:column; gap:2px; }
.reloj-cifras .ceja { font-size:9px; letter-spacing:1.7px; }
#cronometro { font-size:36px; line-height:1.15; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:1px; color:var(--tinta); }
#estado-cronometro { font-size:10px; color:var(--suave); }
.reloj-partida #boton-pausa { margin-left:9px; }
.logro-partida { flex:1; min-width:0; padding-left:25px; border-left:1px solid var(--linea); }
.logro-partida strong { font-size:15px; font-weight:650; color:var(--tinta); }
.logro-partida p { margin:5px 0 0; font-size:11px; line-height:1.6; color:var(--suave); }
.barra-logros[data-nivel="ninguna"] .logro-partida strong, .barra-logros[data-nivel="sin-registro"] .logro-partida strong { color:var(--accion-rojo-tinta); }
.barra-ayudas { display:flex; align-items:stretch; gap:24px; margin-bottom:3px; }
.grupo-ayudas { flex:1; min-width:0; }
.ayudas-titulo { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 12px; margin:0 0 9px; }
.ayudas-titulo strong { font:18px Georgia, serif; color:var(--tinta); }
.ayudas-titulo > span { font-size:10px; color:var(--suave); }
.ayudas-botones { display:grid; grid-template-columns:1fr 1fr 1fr 1.2fr; gap:8px; }
.ayudas-botones .boton-ayuda { justify-content:flex-start; min-height:69px; padding:7px 10px 7px 6px; gap:8px; border-radius:12px; text-align:left; }
.boton-ayuda > span:last-child, .boton-reinicio > span:last-child { min-width:0; }
.boton-ayuda strong, .boton-reinicio strong { display:block; font-size:13px; line-height:1.25; font-weight:650; }
.boton-ayuda small, .boton-reinicio small { display:block; margin-top:5px; font-size:10px; line-height:1.3; }
.boton-ayuda .icono-ilustrado { width:45px; height:45px; flex-basis:45px; }
.ayudas-botones #boton-imagen { color:var(--accion-azul-tinta); background:var(--accion-azul); border-color:var(--accion-azul-borde); }
.ayudas-botones #boton-guia { color:var(--accion-violeta-tinta); background:var(--accion-violeta); border-color:var(--accion-violeta-borde); }
.ayudas-botones #boton-pista { color:var(--accion-oro-tinta); background:var(--accion-oro); border-color:var(--accion-oro-borde); }
.ayudas-botones #boton-colocar { color:var(--accion-rojo-tinta); background:var(--accion-rojo); border-color:var(--accion-rojo-borde); white-space:normal; }
.ayudas-botones #boton-guia[aria-pressed="true"] { box-shadow:inset 0 0 0 2px var(--accion-violeta-tinta); }
.ayudas-botones .boton-ayuda:hover:not(:disabled), .flujo-partida .elegir-rompecabezas:hover:not(:disabled) { filter:brightness(1.05); transform:translateY(-1px); }
.reinicio-separado { align-self:flex-end; border-left:1px solid var(--linea); padding-left:23px; }
.reinicio-separado .boton-reinicio { min-height:69px; gap:7px; padding:8px 13px 8px 5px; color:var(--accion-rojo-tinta); border-color:var(--accion-rojo-borde); background:var(--boton-fondo); text-align:left; }
.boton-reinicio .icono-ilustrado { width:39px; height:39px; flex-basis:39px; }
.controles { margin-top:12px; border-top:1px solid var(--linea); }
#juego { scroll-margin-top:14px; }

/* Diálogos: recompensas siempre visibles, con un motivo legible si están bloqueadas. */
.dialogo-recompensas { width:min(800px, calc(100% - 28px)); padding:36px 27px 24px; }
.dialogo-recompensas h2 { margin-bottom:22px; }
.recuerdo-partida { display:flex; align-items:center; justify-content:center; gap:21px; text-align:left; margin:0 auto 20px; }
.dialogo-recompensas .recuerdo-partida img { width:112px; height:112px; object-fit:cover; margin:0; border:5px solid var(--blanco); box-shadow:0 2px 10px var(--relieve-sombra); transform:rotate(-3deg); }
.recuerdo-partida > div { min-width:0; }
.dialogo-recompensas #texto-completado { margin:0 0 5px; font-size:13px; color:var(--tinta); }
.tiempo-completado { font-size:25px; font-variant-numeric:tabular-nums; }
.dialogo-recompensas #registro-ayudas { font-size:10px; line-height:1.5; margin:6px 0 0; }
.resultado-recompensas { padding:14px 16px; margin:0 0 18px; border:1px solid var(--linea); border-radius:11px; background:var(--boton-fondo); }
.resultado-recompensas h3 { font:21px Georgia, serif; margin:0; }
.dialogo-recompensas .resultado-recompensas p { margin:7px 0 0; font-size:12px; line-height:1.55; }
.premios-descargables { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; text-align:left; }
.recompensa-tarjeta { display:flex; flex-direction:column; min-width:0; padding:15px 14px; background:var(--boton-fondo); border:1px solid var(--linea); border-radius:12px; }
.recompensa-tarjeta[data-disponible="true"] { border-color:var(--boton-borde); box-shadow:0 3px 9px var(--relieve-sombra); }
.recompensa-simbolo { color:var(--acento); font-size:31px; margin-bottom:12px; line-height:1; }
.recompensa-tarjeta h3 { font:20px Georgia, serif; margin:5px 0; line-height:1.2; }
.dialogo-recompensas .recompensa-tarjeta p { font-size:11px; line-height:1.55; margin:3px 0 12px; }
.dialogo-recompensas .recompensa-tarjeta .recompensa-estado { margin-top:auto; padding-top:6px; font-size:10px; color:var(--tinta); }
.recompensa-tarjeta .boton { width:100%; padding:10px; }
.recompensa-tarjeta .boton:disabled { opacity:.65; }
.dialogo-recompensas .recompensas-licencia { margin:17px 0 0; padding-top:12px; border-top:1px solid var(--linea); color:var(--suave); font-size:13px; line-height:1.65; overflow-wrap:anywhere; }
.recompensas-licencia a { color:var(--tinta); text-underline-offset:.2em; }
.recompensas-licencia a:focus-visible { outline:2px solid var(--foco); outline-offset:3px; border-radius:3px; }
.dialogo-recompensas .estado-exportacion { font-size:10px; line-height:1.6; margin:17px 0 0; min-height:1.6em; }
.dialogo-recompensas .acciones-recompensas { flex-direction:row; margin-top:17px; }
.dialogo-recompensas .acciones-recompensas .boton { width:auto; flex:1 1 200px; }
.dialogo-como-jugar { width:min(670px, calc(100% - 28px)); padding:36px 29px 25px; text-align:left; }
.dialogo-como-jugar > .ceja, .dialogo-como-jugar > h2, .dialogo-como-jugar > .introduccion-reglas { text-align:center; }
.dialogo-como-jugar h2 { margin-bottom:12px; font-size:32px; }
.dialogo-como-jugar .introduccion-reglas { margin:0 0 18px; font-size:12px; }
.reglas-recompensas { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.reglas-recompensas li { display:flex; align-items:flex-start; gap:12px; padding:13px 15px; background:var(--boton-fondo); border:1px solid var(--linea); border-radius:11px; }
.regla-numero { display:grid; place-items:center; width:26px; height:26px; flex:0 0 26px; border-radius:50%; color:var(--acento-texto); background:var(--acento); font-weight:650; font-size:12px; }
.reglas-recompensas strong { font-size:13px; line-height:1.4; }
.dialogo-como-jugar .reglas-recompensas p { margin:5px 0 0; font-size:11px; line-height:1.6; }
.dialogo-como-jugar .nota-referencia { font-size:11px; line-height:1.65; padding:12px 14px; background:var(--accion-azul); color:var(--accion-azul-tinta); border-radius:9px; margin:12px 0 20px; }
.controles-tutorial { padding:0 1px; }
.controles-tutorial h3 { font:23px Georgia, serif; margin:0 0 8px; }
.dialogo-como-jugar .controles-tutorial p, .dialogo-como-jugar .notas-partida p { font-size:11px; line-height:1.7; margin:8px 0; }
.notas-partida { margin:16px 0 0; padding-top:8px; border-top:1px solid var(--linea); }
.dialogo-como-jugar strong, .dialogo-colocar strong { color:var(--tinta); }
.dialogo-colocar .acciones { flex-direction:column; }
.tiempo-pausa { display:block; font-size:36px; font-variant-numeric:tabular-nums; margin-top:20px; letter-spacing:1px; }

@media (max-width:1150px) {
  .herramientas.herramientas-secundarias { justify-content:flex-start; }
  .flujo-partida { gap:10px; }
  .paso-partida { padding:12px; }
  .elegir-rompecabezas strong, .boton-empezar strong { font-size:16px; }
  .elegir-rompecabezas small, .boton-empezar small { font-size:10px; }
  .barra-logros { gap:19px; padding:16px; }
  .logro-partida { padding-left:19px; }
  .barra-ayudas { gap:15px; }
  .reinicio-separado { padding-left:14px; }
  .ayudas-botones .boton-ayuda { padding:7px; gap:6px; }
  .boton-ayuda .icono-ilustrado { width:36px; height:36px; flex-basis:36px; }
  .boton-ayuda strong { font-size:12px; }
  .boton-ayuda small { font-size:9px; }
}
@media (max-width:850px) {
  .cabecera { gap:15px; }
  .herramientas.herramientas-secundarias { width:100%; }
  .flujo-partida { grid-template-columns:1.1fr 1fr; padding-top:17px; }
  .paso-jugar { grid-column:1/-1; display:flex; align-items:center; gap:16px; }
  .paso-jugar .paso-etiqueta { margin:0; flex:1; }
  .flujo-partida .boton-empezar { width:auto; min-height:56px; padding:7px 20px 7px 8px; }
  .boton-empezar .jugar-simbolo { width:37px; height:37px; flex-basis:37px; font-size:19px; }
  .barra-logros { align-items:flex-start; }
  .reloj-partida { flex-wrap:wrap; gap:9px; }
  .reloj-partida > .icono-contador { display:none; }
  #cronometro { font-size:31px; }
  .reloj-partida #boton-pausa { margin-left:2px; padding:8px; }
  .barra-ayudas { flex-direction:column; gap:10px; }
  .reinicio-separado { display:flex; justify-content:flex-end; width:100%; border:0; padding:0; }
  .reinicio-separado .boton-reinicio { min-height:44px; padding:3px 10px; }
  .boton-reinicio .icono-ilustrado { width:30px; height:30px; flex-basis:30px; }
  .boton-reinicio small { display:none; }
  .controles { margin-top:7px; }
}
@media (max-width:600px) {
  .cabecera { padding:17px 3px 14px; }
  .herramientas.herramientas-secundarias { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
  .herramientas-secundarias #boton-como-jugar { grid-column:1/-1; order:0; justify-content:center; min-height:48px; }
  .herramientas-secundarias .herramientas-sonido { grid-column:auto; order:1; }
  .herramientas-secundarias #boton-estilo { grid-column:auto; order:2; min-width:100px; }
  .herramientas-secundarias .pequeno { font-size:11px; }
  .flujo-partida { grid-template-columns:1fr; gap:9px; padding:14px 0; }
  .paso-partida { padding:12px; border-radius:12px; }
  .paso-etiqueta { font-size:9px; margin-bottom:8px; letter-spacing:1px; }
  .paso-rompecabezas .paso-etiqueta, .paso-dificultad .paso-etiqueta { margin-bottom:7px; }
  .flujo-partida .elegir-rompecabezas { min-height:74px; }
  .elegir-rompecabezas strong { font-size:19px; }
  .elegir-rompecabezas small { font-size:11px; }
  .elegir-dificultad { min-height:60px; }
  .elegir-dificultad .icono-ilustrado { width:47px; height:47px; flex-basis:47px; }
  .elegir-dificultad > div { display:flex; gap:12px; align-items:center; }
  .elegir-dificultad label { flex:1; margin:0; line-height:1.5; font-size:12px; }
  .elegir-dificultad #selector-cantidad { width:153px; font-size:16px; padding-right:23px; }
  .nota-paso { margin-top:4px; }
  .paso-jugar { display:block; grid-column:auto; }
  .paso-jugar .paso-etiqueta { margin-bottom:8px; }
  .flujo-partida .boton-empezar { width:100%; min-height:61px; justify-content:center; }
  .boton-empezar strong { font-size:18px; }
  .boton-empezar small { font-size:10px; }
  .barra-logros { display:block; padding:16px; margin-bottom:17px; border-radius:12px; }
  .reloj-partida { flex-wrap:nowrap; gap:9px; justify-content:space-between; }
  .reloj-partida > .icono-contador { display:inline-block; width:45px; height:45px; flex-basis:45px; }
  .reloj-cifras { margin-right:auto; }
  #cronometro { font-size:32px; letter-spacing:.3px; }
  .reloj-cifras .ceja { font-size:8px; letter-spacing:1.1px; }
  .reloj-partida #boton-pausa { padding:8px 10px; min-height:44px; font-size:10px; margin-left:0; }
  .logro-partida { margin-top:14px; padding:13px 0 0; border-left:0; border-top:1px solid var(--linea); }
  .logro-partida strong { font-size:14px; }
  .logro-partida p { font-size:10px; line-height:1.7; }
  .ayudas-titulo { gap:5px; flex-direction:column; margin-bottom:10px; padding:0 2px; }
  .ayudas-titulo strong { font-size:20px; }
  .ayudas-botones { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .ayudas-botones #boton-colocar { grid-column:auto; }
  .ayudas-botones .boton-ayuda { min-height:76px; gap:7px; padding:8px; }
  .boton-ayuda .icono-ilustrado { width:43px; height:43px; flex-basis:43px; }
  .boton-ayuda strong { font-size:12px; }
  .boton-ayuda small { font-size:9px; }
  .reinicio-separado #boton-reiniciar-arriba { grid-column:auto; }
  .controles .opciones-mesa { border-top:0; padding-top:0; }
  .controles .acciones-opciones { justify-content:flex-start; }
  .dialogo-recompensas, .dialogo-como-jugar { width:calc(100% - 24px); padding:37px 16px 20px; max-height:calc(100dvh - 24px); }
  .dialogo-recompensas h2, .dialogo-como-jugar h2 { font-size:28px; }
  .recuerdo-partida { gap:14px; }
  .dialogo-recompensas .recuerdo-partida img { width:86px; height:86px; }
  .dialogo-recompensas #texto-completado { font-size:12px; }
  .tiempo-completado { font-size:24px; }
  .premios-descargables { grid-template-columns:1fr; gap:10px; }
  .recompensa-tarjeta { display:grid; grid-template-columns:37px minmax(0,1fr); column-gap:10px; padding:14px; }
  .recompensa-tarjeta .recompensa-simbolo { grid-column:1; grid-row:1/4; margin-top:5px; }
  .recompensa-tarjeta > :not(.recompensa-simbolo) { grid-column:2; }
  .recompensa-tarjeta h3 { font-size:20px; }
  .dialogo-recompensas .recompensa-tarjeta p { margin-bottom:6px; }
  .dialogo-recompensas .recompensa-tarjeta .recompensa-estado { padding:2px 0; margin:0 0 9px; }
  .recompensa-tarjeta .boton { grid-column:1/-1; }
  .resultado-recompensas h3 { font-size:20px; }
  .reglas-recompensas li { padding:12px; gap:10px; }
  .reglas-recompensas strong { font-size:12px; }
  .regla-numero { width:23px; height:23px; flex-basis:23px; }
}
@media (max-width:370px) {
  .reloj-partida > .icono-contador { display:none; }
  .elegir-dificultad { gap:8px; }
  .elegir-dificultad #selector-cantidad { width:134px; }
  .boton-ayuda .icono-ilustrado { width:34px; height:34px; flex-basis:34px; }
  .boton-ayuda strong { font-size:11px; }
}

/* Una última pieza, un instante de celebración en el centro de la pantalla. */
.celebracion-victoria {
  position:fixed; inset:0; margin:auto; width:min(610px, calc(100vw - 32px));
  max-height:calc(100dvh - 32px); padding:0; border:1px solid #c5a566a3;
  border-radius:28px; overflow:hidden; text-align:center; color:#fff2d3;
  background:radial-gradient(ellipse at 50% 28%, #42644b 0%, #1e3d2f 48%, #13291f 100%);
  box-shadow:0 22px 90px #04150e80, inset 0 0 0 7px #ecbd6810;
}
.celebracion-victoria::backdrop { background:#18281ea6; backdrop-filter:blur(5px); }
.victoria-contenido { position:relative; z-index:1; padding:40px 28px 32px; }
.medalla-victoria {
  display:grid; place-items:center; position:relative; width:138px; height:138px; margin:0 auto 29px;
  border-radius:50%; color:#ffedac; background:radial-gradient(circle at 35% 25%, #b78437, #74471f 70%);
  border:2px solid #edcf86; box-shadow:0 0 0 7px #d6b87620, 0 0 0 8px #dbc08765, 0 14px 30px #061b1f60;
  animation:medalla-aparece .65s cubic-bezier(.2,.7,.2,1) both;
}
.medalla-victoria::before { content:''; position:absolute; inset:-24px; border:1px solid #ebce8190; border-radius:50%; animation:halo-victoria 1.8s ease-out both; }
.medalla-victoria svg { width:94px; height:94px; filter:drop-shadow(0 3px 1px #4a290e80); }
.victoria-ceja { margin:0 0 13px; font:600 9px/1.6 'Segoe UI',sans-serif; letter-spacing:2px; color:#ddc89a; }
.celebracion-victoria h2 { margin:0 0 13px; font-size:clamp(29px,5vw,40px); line-height:1.12; font-weight:normal; color:#fff2d3; }
.celebracion-victoria h2:focus { outline:none; }
#detalle-victoria { margin:0 auto 25px; max-width:430px; font-size:13px; line-height:1.6; color:#e3d6b9; }
#ver-recompensas-victoria { min-height:46px; padding:11px 22px; border:1px solid #f2d693; border-radius:10px; background:linear-gradient(#eed293,#ceac63); color:#3d2c17; font:600 13px 'Segoe UI',sans-serif; box-shadow:0 4px 12px #071e1450; }
#ver-recompensas-victoria:hover { background:#f5dfa9; }
#ver-recompensas-victoria:focus-visible { outline:3px solid #fff2d3; outline-offset:4px; }
.destellos-victoria { position:absolute; inset:0; pointer-events:none; }
.destellos-victoria i { position:absolute; left:50%; top:38%; width:9px; height:15px; border-radius:2px; background:#e6bf70; opacity:0; animation:destello-victoria 1.5s ease-out var(--espera) both; }
.destellos-victoria i:nth-child(3n) { background:#e9e0c5; width:6px; height:6px; border-radius:50%; }
.destellos-victoria i:nth-child(3n + 1) { background:#93baa1; }
@keyframes medalla-aparece { from { transform:scale(.6) rotate(-12deg); opacity:0; } to { transform:scale(1) rotate(0); opacity:1; } }
@keyframes halo-victoria { from { transform:scale(.75); opacity:0; } 30% { opacity:1; } to { transform:scale(1.2); opacity:0; } }
@keyframes destello-victoria { 0% { transform:translate(-50%,-50%) scale(.3); opacity:0; } 15% { opacity:1; } 80% { opacity:.9; } 100% { transform:translate(var(--dx),var(--dy)) rotate(var(--giro)); opacity:0; } }
.sello-victoria-recompensas { display:grid; place-items:center; width:52px; height:52px; margin:0 auto 15px; border-radius:50%; background:linear-gradient(135deg,#f2d79a,#b88a42); color:#69451e; font-size:33px; line-height:1; border:1px solid #bd944d; box-shadow:0 0 0 4px #c4a36320; }
.sello-victoria-recompensas[hidden] { display:none; }
.dialogo-recompensas #titulo-completado { margin-bottom:8px; }
.dialogo-recompensas #titulo-completado:focus { outline:none; }
.dialogo-recompensas .recompensas-invitacion { margin:0 0 24px; color:var(--suave); font-size:13px; }
.dialogo-recompensas .recuerdo-partida img { object-fit:contain; background:var(--papel); }
.recompensa-tarjeta[data-disponible="true"] { border-color:var(--acento); box-shadow:0 0 0 1px var(--linea), 0 5px 16px var(--relieve-sombra); }
@media (max-width:600px) {
  .victoria-contenido { padding:32px 18px 26px; }
  .medalla-victoria { width:110px; height:110px; margin-bottom:26px; }
  .medalla-victoria svg { width:77px; height:77px; }
  .victoria-ceja { font-size:8px; letter-spacing:1.4px; }
  #detalle-victoria { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .medalla-victoria, .medalla-victoria::before, .destellos-victoria i { animation:none; }
  .medalla-victoria::before, .destellos-victoria { display:none; }
}

/* Controles compactos. El atlas tiene 3 columnas y 2 filas, sin texto dibujado. */
:root { --iconos-controles: url('../assets/interfaz/iconos-controles.png'); }
.icono-control {
  display:inline-block; width:43px; height:43px; flex:0 0 43px;
  background-image:var(--iconos-controles); background-size:300% 200%;
  background-repeat:no-repeat; pointer-events:none;
}
.icono-girar-izquierda { background-position:0 0; }
.icono-girar-derecha { background-position:50% 0; }
.icono-vista { background-position:50% 100%; }
.icono-empezar { background-position:100% 100%; }
.boton-empezar .icono-empezar { width:52px; height:52px; flex-basis:52px; }
.paso-jugar { position:relative; }
.aviso-inicio { margin:10px 0 0; font-size:12px; line-height:1.5; font-weight:650; color:var(--tinta); }
.aviso-inicio[hidden] { display:none; }
.inicio-pendiente { outline:3px solid var(--acento); outline-offset:5px; animation:senalar-inicio .9s ease-in-out 3; }
@keyframes senalar-inicio { 50% { outline-offset:9px; filter:brightness(1.18); } }
@media (prefers-reduced-motion:reduce) { .inicio-pendiente { animation:none; } }

.controles.controles-compactos {
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin:16px 0 12px; padding:13px 0;
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
}
.controles-compactos .reloj-compacto {
  display:flex; flex-wrap:nowrap; gap:8px; flex:0 0 auto;
  min-height:65px; padding:9px 11px; border:1px solid var(--linea);
  border-radius:12px; background:var(--boton-fondo); box-shadow:0 2px 5px var(--relieve-sombra);
}
.controles-compactos .reloj-compacto > .icono-contador { display:block; width:30px; height:30px; flex-basis:30px; }
.reloj-compacto .reloj-cifras { gap:3px; }
.reloj-compacto .reloj-cifras .ceja { font-size:8px; letter-spacing:1.4px; }
.reloj-compacto #cronometro { font-size:23px; line-height:1.15; letter-spacing:.3px; font-variant-numeric:tabular-nums; }
.reloj-compacto #boton-pausa { margin:0 0 0 3px; width:auto; min-width:67px; min-height:42px; padding:0 8px; gap:5px; font-size:11px; border-radius:8px; }
.controles-compactos .botones-giro { display:flex; gap:7px; }
.controles-compactos .control-ilustrado {
  min-height:65px; padding:7px 12px 7px 6px; border-radius:12px;
  display:flex; justify-content:flex-start; gap:6px; text-align:left; white-space:nowrap;
}
.control-ilustrado strong { display:block; font-size:12px; font-weight:650; line-height:1.25; }
.control-ilustrado small { display:block; font-size:10px; margin-top:5px; line-height:1.25; }
.controles-compactos .control-girar { background:var(--accion-violeta); border-color:var(--accion-violeta-borde); color:var(--accion-violeta-tinta); }
.controles-compactos .control-vista { margin-left:auto; background:var(--accion-verde); border-color:var(--accion-verde-borde); color:var(--accion-verde-tinta); }
.controles-compactos .control-ilustrado:disabled { opacity:.62; filter:saturate(.6); }
.controles-compactos .control-ilustrado:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.04); }
.controles-compactos .control-vista[aria-pressed="true"] { box-shadow:inset 0 0 0 2px var(--accion-verde-tinta); }
#controles-partida { scroll-margin-top:8px; }
.premios-resumen { margin:5px 0 0; font-size:11px; color:var(--suave); max-width:720px; }
.premios-resumen summary { cursor:pointer; padding:9px 0; width:fit-content; color:var(--tinta); }
.premios-resumen p { margin:0 0 7px; line-height:1.65; }
.premios-resumen[data-nivel="ninguna"] summary, .premios-resumen[data-nivel="sin-registro"] summary { color:var(--accion-rojo-tinta); }

@media (max-width:1150px) {
  .controles.controles-compactos { gap:8px; }
  .controles-compactos .control-ilustrado { padding-right:8px; }
  .controles-compactos .icono-control { width:35px; height:35px; flex-basis:35px; }
  .control-ilustrado strong { font-size:11px; }
  .control-ilustrado small { font-size:9px; }
  .controles-compactos .control-vista small { display:none; }
}
@media (max-width:850px) {
  .controles.controles-compactos { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
  .controles-compactos .reloj-compacto { grid-column:1; grid-row:1; justify-content:center; }
  .controles-compactos .control-vista { grid-column:2; grid-row:1; margin:0; justify-content:center; }
  .controles-compactos .botones-giro { grid-column:1/-1; }
  .controles-compactos .control-ilustrado { flex:1; min-width:0; justify-content:center; }
  .controles-compactos .icono-control { width:32px; height:32px; flex-basis:32px; }
}
@media (max-width:600px) {
  .controles.controles-compactos { grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:12px 0; gap:8px; }
  .controles-compactos .reloj-compacto { gap:5px; padding:8px 6px; min-height:60px; }
  .controles-compactos .reloj-compacto > .icono-contador { display:none; }
  .reloj-compacto #cronometro { font-size:21px; }
  .reloj-compacto #boton-pausa { min-width:63px; width:63px; padding:0 4px; font-size:10px; }
  .controles-compactos .botones-giro { grid-column:1/-1; gap:8px; }
  .controles-compactos .control-ilustrado { min-height:60px; justify-content:flex-start; padding:6px 9px; gap:9px; }
  .controles-compactos .control-vista { justify-content:center; }
  .controles-compactos .icono-control { width:37px; height:37px; flex-basis:37px; }
  .control-ilustrado strong { font-size:12px; }
  .control-ilustrado small { font-size:10px; }
  .paso-jugar .aviso-inicio { font-size:12px; }
}

.dialogo-pausa .nota-salida { font-size:11px; line-height:1.6; margin-top:19px; color:var(--suave); }

/* La escena sigue montada al volver al menú, pero queda fuera de alcance. */
body:not(.concentracion) #pantalla-partida {
  position:fixed; left:-200vw; top:0; width:calc(100vw - 24px);
  visibility:hidden; pointer-events:none;
}
.cargando.cargando-menu { position:relative; inset:auto; padding:32px 0; gap:10px; }
.cargando-menu button, .cargando-menu select { margin:6px; }
body.concentracion .pagina { max-width:none; padding:0 12px 8px; }
body.concentracion .cabecera,
body.concentracion .flujo-partida,
body.concentracion .resumen,
body.concentracion .premios-resumen,
body.concentracion .pie-pagina { display:none; }

/* Dos filas en el mismo orden del HTML: ayudas arriba; acciones junto al lienzo.
   ResizeObserver mide este bloque completo, sin restar espacio a las ventanas. */
.herramientas-partida {
  position:sticky; top:0; z-index:5; padding:8px 0 5px;
  background:var(--papel);
}
.barra-superior-partida { display:flex; align-items:center; gap:12px; min-width:0; }
.controles-concentracion {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:5px;
  flex:0 0 auto; min-width:0; max-width:100%;
}
.controles-concentracion .boton {
  min-height:44px; padding:6px 9px; font-size:11px; white-space:nowrap;
}
.solo-concentracion { display:inline-flex; align-items:center; }
#boton-concentracion { font-weight:650; color:var(--acento-fuerte); }
#boton-concentracion > span { font-size:inherit; }
.texto-volver-corto { display:none; }
#progreso-concentracion {
  padding:0 5px; color:var(--suave); font-size:11px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

body.concentracion .barra-ayudas { display:flex; flex-direction:row; flex:1 1 auto; gap:8px; margin:0; min-width:0; }
body.concentracion .ayudas-titulo { display:none; }
body.concentracion .ayudas-botones { gap:6px; grid-template-columns:1fr 1fr 1fr 1.25fr; }
body.concentracion .ayudas-botones .boton-ayuda,
body.concentracion .reinicio-separado .boton-reinicio {
  min-height:50px; padding:5px 8px 5px 5px; gap:5px;
}
body.concentracion .boton-ayuda .icono-ilustrado,
body.concentracion .boton-reinicio .icono-ilustrado { width:30px; height:30px; flex-basis:30px; }
body.concentracion .boton-ayuda strong,
body.concentracion .boton-reinicio strong { font-size:12px; }
body.concentracion .boton-ayuda small,
body.concentracion .boton-reinicio small { margin-top:2px; font-size:9px; }
body.concentracion .reinicio-separado { align-self:stretch; width:auto; padding-left:8px; }

/* La fila inferior se lee de izquierda a derecha y termina a 6 px de la mesa. */
body.concentracion .controles.controles-compactos {
  display:flex; align-items:center; flex-wrap:nowrap; gap:8px;
  margin:6px 0 0; padding:6px 0 0; border:0; border-top:1px solid var(--linea);
  scroll-margin-top:0;
}
body.concentracion .controles-compactos .reloj-compacto,
body.concentracion .controles-compactos .control-ilustrado { min-height:48px; }
body.concentracion .controles-compactos .reloj-compacto { padding:3px 8px; }
body.concentracion .controles-compactos .control-ilustrado { padding:5px 12px 5px 6px; }
body.concentracion .controles-compactos .icono-control { width:30px; height:30px; flex-basis:30px; }
body.concentracion .controles-compactos .botones-giro { gap:6px; }
body.concentracion .controles-compactos .control-girar strong { font-size:13px; }
body.concentracion .controles-compactos .control-ilustrado small { margin-top:2px; }
body.concentracion .controles-compactos .control-vista { margin-left:8px; }
body.concentracion .controles-compactos .control-vista small { display:none; }
.controles-compactos .control-deshacer {
  color:var(--accion-azul-tinta); border-color:var(--accion-azul-borde); background:var(--accion-azul);
}
.icono-deshacer { display:inline-flex; align-items:center; justify-content:center; width:30px; flex:0 0 30px; font-size:31px; line-height:1; }
.seleccionar-varias {
  min-height:48px; display:inline-flex; gap:7px; align-items:center;
  padding:6px 12px; color:var(--tinta); font-size:12px;
}
.seleccionar-varias .icono-seleccion { font-size:22px; color:var(--acento); }
.seleccionar-varias[aria-pressed="true"] { box-shadow:inset 0 0 0 2px var(--acento); background:var(--boton-hover); }

body.concentracion .zona-juego { border-radius:12px; box-shadow:0 2px 8px var(--mesa-sombra); }
body.concentracion #juego {
  height:calc(100vh - var(--alto-controles-concentracion, 126px) - 44px);
  height:calc(100dvh - var(--alto-controles-concentracion, 126px) - 44px);
  min-height:520px;
}
body.concentracion .pie-mesa { min-height:32px; padding:5px 12px; gap:8px; }
body.concentracion .pie-mesa p { font-size:10px; }
body.concentracion .aviso { z-index:4; }

@media (max-width:1250px) {
  .barra-superior-partida { gap:8px; }
  .controles-concentracion { gap:4px; }
  .controles-concentracion .boton { padding:6px 7px; }
  .texto-volver-amplio { display:none; }
  .texto-volver-corto { display:inline; }
  body.concentracion .boton-ayuda .icono-ilustrado,
  body.concentracion .boton-reinicio .icono-ilustrado { width:26px; height:26px; flex-basis:26px; }
}
@media (max-width:1100px) {
  .barra-superior-partida { flex-wrap:wrap; }
  body.concentracion .barra-ayudas { flex-basis:100%; }
  .controles-concentracion { width:100%; justify-content:flex-start; }
  #progreso-concentracion { margin-left:auto; }
  body.concentracion .controles.controles-compactos { gap:6px; }
  body.concentracion .controles-compactos .control-ilustrado { padding-right:8px; }
}
@media (max-width:980px) {
  body.concentracion #juego { min-height:1080px; }
}
@media (max-width:850px) {
  body.concentracion .controles.controles-compactos {
    display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); align-items:stretch;
  }
  body.concentracion .controles-compactos .reloj-compacto { grid-column:span 3; grid-row:auto; justify-content:center; }
  body.concentracion .controles-compactos .botones-giro { grid-column:span 3; }
  body.concentracion .controles-compactos .control-vista,
  body.concentracion .controles-compactos .control-deshacer,
  body.concentracion .seleccionar-varias { grid-column:span 2; grid-row:auto; margin:0; justify-content:center; }
  body.concentracion .controles-compactos .control-ilustrado { min-width:0; }
  body.concentracion .controles-compactos .botones-giro .control-ilustrado { flex:1 1 0; }
}
@media (max-width:600px) {
  body.concentracion .pagina { padding:0 6px 6px; }
  /* La botonera se desplaza en móvil para conservar toda la mesa al explorar. */
  .herramientas-partida { position:relative; padding:6px 0; }
  .barra-superior-partida { gap:6px; }
  body.concentracion .barra-ayudas { flex-wrap:wrap; gap:6px; }
  body.concentracion .grupo-ayudas { flex-basis:100%; }
  body.concentracion .ayudas-botones { grid-template-columns:1fr 1fr; gap:6px; }
  body.concentracion .ayudas-botones .boton-ayuda { min-height:46px; }
  body.concentracion .reinicio-separado { padding:0; border:0; }
  body.concentracion .reinicio-separado .boton-reinicio { min-height:44px; padding:3px 10px; }
  body.concentracion .boton-reinicio small { display:none; }
  .controles-concentracion { gap:4px; }
  .controles-concentracion .boton { min-height:44px; padding:6px; font-size:10px; }
  #progreso-concentracion { padding:0; font-size:10px; }
  body.concentracion .controles.controles-compactos { gap:6px; }
  body.concentracion .controles-compactos .reloj-compacto { min-width:0; gap:4px; padding:4px; }
  body.concentracion .controles-compactos .reloj-compacto > .icono-contador { display:none; }
  body.concentracion .reloj-compacto #cronometro { font-size:18px; letter-spacing:0; }
  body.concentracion .reloj-compacto #boton-pausa { min-width:44px; width:44px; min-height:44px; padding:0; margin-left:1px; }
  body.concentracion .reloj-compacto #boton-pausa > span:last-child { display:none; }
  body.concentracion .reloj-compacto #boton-pausa > span:first-child { font-size:18px; }
  body.concentracion .controles-compactos .botones-giro { gap:5px; }
  body.concentracion .botones-giro .control-ilustrado { flex-direction:column; gap:2px; text-align:center; padding:4px 2px; }
  body.concentracion .controles-compactos .botones-giro .icono-control { width:24px; height:24px; flex-basis:24px; }
  body.concentracion .controles-compactos .control-girar strong { font-size:11px; }
  body.concentracion .botones-giro .control-ilustrado small { font-size:9px; margin-top:1px; }
  body.concentracion .controles-compactos .control-vista,
  body.concentracion .controles-compactos .control-deshacer { min-height:44px; padding:5px; gap:4px; }
  body.concentracion .controles-compactos .control-vista .icono-control,
  body.concentracion .icono-deshacer { width:22px; height:24px; flex-basis:22px; }
  body.concentracion .control-vista strong,
  body.concentracion .control-deshacer strong { font-size:11px; }
  body.concentracion .control-deshacer small { display:none; }
  body.concentracion .seleccionar-varias { min-height:44px; padding:5px; gap:4px; font-size:10px; white-space:normal; }
  body.concentracion .seleccionar-varias .icono-seleccion { font-size:20px; }
  body.concentracion .pie-mesa { flex-wrap:wrap; }
  body.concentracion .pie-mesa p { font-size:9px; }
}

.panel-bandejas {
  position: relative; width: 100%; min-width: 0; padding: 6px 0;
  border-top: 1px solid var(--linea, #d9c9ae);
}
.bandejas-fila { display: flex; align-items: center; gap: 5px; min-width: 0; }
.bandejas-fila label { font-size: 11px; white-space: nowrap; }
.bandejas-fila select {
  flex: 1; width: 0; min-width: 70px; max-width: 100%;
  min-height: 34px; padding: 4px 22px 4px 7px; font: inherit; font-size: 12px;
  color: var(--tinta); background-color: var(--boton-fondo);
  border: 1px solid var(--boton-borde); border-radius: 7px;
}
.panel-bandejas .boton {
  min-height: 34px; padding: 4px 9px; font-size: 11px; white-space: nowrap;
  color: var(--tinta); background: var(--boton-fondo);
  border: 1px solid var(--boton-borde); border-radius: 7px;
}
.panel-bandejas .boton:hover:not(:disabled) { background: var(--boton-hover); }
.bandejas-fila-principal .boton, .bandejas-fila-principal select { min-height: 44px; }
.panel-bandejas .bandejas-trasladar { display: inline-flex; align-items: center; gap: 4px; }
.bandejas-trasladar > span:first-child { font-size: 19px; line-height: 1; }
.bandejas-cantidad:not(:empty) { padding: 2px 4px; border-radius: 4px; background: var(--boton-hover); font-variant-numeric: tabular-nums; }
.panel-bandejas .boton:focus-visible, .bandejas-fila select:focus-visible { outline: 3px solid var(--acento, #28706d); outline-offset: 2px; }
.bandejas-acciones {
  position: absolute; z-index: 4; top: calc(100% + 2px); left: 0; width: 100%;
  box-sizing: border-box; padding: 10px; border: 1px solid var(--boton-borde);
  border-radius: 10px; color: var(--tinta); background: var(--blanco);
  box-shadow: 0 5px 18px var(--mesa-sombra); display: grid; gap: 9px;
  touch-action: manipulation;
}
.bandejas-acciones[hidden], .bandejas-nombre[hidden] { display: none; }
.bandejas-cabecera { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.bandejas-cabecera .boton { font-size: 20px; padding: 0 10px; }
.bandejas-ayuda, .bandejas-seleccion { margin: 0; font-size: 11px; line-height: 1.4; color: var(--suave); }
.bandejas-nombre { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.bandejas-nombre input {
  flex: 1 1 100%; width: 100px; min-width: 0; min-height: 34px; font: inherit; padding: 4px 7px;
  color: var(--tinta); background: var(--boton-fondo); border: 1px solid var(--boton-borde); border-radius: 7px;
}
#vista-mesa-controles { max-width: 100%; }
#vista-mesa-controles .cabecera-vista, #vista-mesa-controles .lote-mesa { flex-wrap: wrap; }
@media (max-width: 980px) {
  /* Dos mesas apiladas: conservamos espacio útil debajo de los controles. */
  body #juego, body.concentracion #juego { min-height: 1080px; }
}
@media (max-width: 700px) {
  .panel-bandejas .boton, .panel-bandejas select, .bandejas-nombre input { min-height: 40px; }
  .bandejas-fila-principal .boton, .bandejas-fila-principal select { min-height: 44px; }
}
@media (max-width: 480px) {
  .bandejas-fila-principal > label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bandejas-texto-seleccion { display: none; }
  .bandejas-fila-principal .boton { padding-inline: 7px; }
}

.control-giro { position:absolute; inset:0; z-index:6; pointer-events:none; }
.control-giro-asa {
  position:absolute; display:grid; place-items:center; width:44px; height:44px;
  min-width:44px; min-height:44px; padding:0; margin:0; border-radius:50%;
  border:2px solid var(--foco, #508b85); background:var(--papel, #fff6e5);
  color:var(--tinta, #473a2c); box-shadow:0 2px 7px #14252440;
  transform:translate(-50%, -50%); cursor:grab; pointer-events:auto;
  touch-action:none; user-select:none; -webkit-user-select:none;
  font-family:inherit; line-height:1;
}
.control-giro-asa[hidden] { display:none; }
.control-giro-icono { font-family:'Segoe UI Symbol',sans-serif; font-size:30px; line-height:1; }
.control-giro-grados {
  position:absolute; top:calc(100% - 4px); left:50%; transform:translateX(-50%);
  border-radius:7px; padding:3px 6px; background:var(--tinta, #473a2c);
  color:var(--papel, #fff6e5); font-size:10px; font-weight:700; white-space:nowrap;
  pointer-events:none;
}
.control-giro-asa:hover { box-shadow:0 2px 9px #14252460, 0 0 0 3px #70aaa630; }
.control-giro-asa:focus-visible { outline:3px solid var(--foco, #508b85); outline-offset:4px; }
.control-giro-asa.girando { cursor:grabbing; border-color:var(--tinta, #473a2c); }
@media (forced-colors:active) {
  .control-giro-asa { border-color:ButtonText; background:ButtonFace; color:ButtonText; }
  .control-giro-grados { background:Canvas; color:CanvasText; border:1px solid CanvasText; }
}

.menu-piezas {
  position: fixed; z-index: 90; box-sizing: border-box; width: 290px;
  padding: 8px; overflow: auto; overscroll-behavior: contain; touch-action: manipulation;
  color: var(--tinta, #493826); background: var(--blanco, #fffaf0);
  border: 1px solid var(--boton-borde, #cfb992); border-radius: 14px;
  box-shadow: 0 8px 35px var(--mesa-sombra, #32250d44);
  font-family: inherit;
}
.menu-piezas[hidden] { display: none; }
.menu-piezas-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 7px 10px; font-size: 14px; }
.menu-piezas-cantidad { font-size: 12px; color: var(--suave, #76644d); white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-piezas-opciones { display: grid; gap: 3px; }
.menu-piezas-destino {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  box-sizing: border-box; width: 100%; min-height: 44px; padding: 9px 11px;
  border: 1px solid transparent; border-radius: 8px; color: inherit;
  background: var(--boton-fondo, #f7efdf); text-align: left; font: inherit; font-size: 13px;
  cursor: pointer; touch-action: manipulation;
}
.menu-piezas-destino > span { overflow-wrap: anywhere; }
.menu-piezas-destino small { flex: none; font-size: 10px; }
.menu-piezas-destino:hover:not(:disabled), .menu-piezas-destino:focus-visible {
  background: var(--boton-hover, #eee1ca); border-color: var(--boton-borde, #cfb992);
}
.menu-piezas-destino:focus-visible { outline: 3px solid var(--acento, #28706d); outline-offset: -2px; }
.menu-piezas-destino:disabled { opacity: .5; cursor: default; }
.menu-piezas-ayuda { margin: 9px 7px 3px; color: var(--suave, #76644d); font-size: 11px; line-height: 1.4; }

.dialogo-coleccion { width:min(1120px,calc(100% - 24px)); max-height:90dvh; padding:28px; overflow:auto; text-align:left; }
.dialogo-coleccion h2 { margin:6px 0; }
#coleccion-resumen { color:var(--suave); font-size:13px; }
.dialogo-coleccion [hidden] { display:none!important; }
.coleccion-filtros { display:flex; flex-wrap:wrap; gap:12px 18px; align-items:end; padding:18px 0; border-block:1px solid var(--linea); margin-top:20px; }
.coleccion-filtros label { display:flex; flex:1 1 220px; flex-direction:column; gap:7px; min-width:0; font-size:11px; color:var(--suave); }
.coleccion-filtros select { min-width:0; max-width:100%; height:44px; padding:8px 12px; border:1px solid var(--linea); border-radius:9px; color:var(--tinta); background:var(--boton-fondo); font:inherit; font-size:13px; }
.coleccion-filtro-favoritas { min-height:44px; white-space:nowrap; }
.coleccion-filtro-favoritas[aria-pressed="true"] { border-color:var(--acento); box-shadow:inset 0 0 0 1px var(--acento); }
.dialogo .coleccion-conteo { flex-basis:100%; font-size:12px; margin:0; color:var(--suave); }
.coleccion-lista { display:grid; gap:28px; margin:24px 0; }
.coleccion-tematica { min-width:0; }
.coleccion-tematica-titulo { display:flex; align-items:center; gap:12px; margin:0 0 14px; color:var(--tinta); font:22px Georgia,serif; }
.coleccion-tematica-titulo span { display:inline-grid; place-items:center; min-width:27px; height:27px; border-radius:50%; border:1px solid var(--linea); font:11px system-ui,sans-serif; color:var(--suave); }
.coleccion-cuadros { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.coleccion-tarjeta { min-width:0; overflow:hidden; border:1px solid var(--linea); border-radius:14px; background:var(--boton-fondo); box-shadow:0 4px 15px #25160d09; }
.coleccion-cuadro { position:relative; padding:15px 15px 0; }
.coleccion-ampliar { display:block; position:relative; width:100%; padding:9px; border:6px solid #9b7550; border-radius:3px; background:var(--papel); cursor:zoom-in; box-shadow:inset 0 0 0 1px #e9d3a8,0 5px 10px #25160d20; color:var(--tinta); }
.dialogo .coleccion-ampliar img { display:block; width:100%; max-width:none; height:208px; object-fit:contain; border-radius:0; background:var(--pie-fondo); }
.coleccion-ver-obra { position:absolute; bottom:15px; left:50%; transform:translateX(-50%); white-space:nowrap; border-radius:20px; padding:7px 12px; font:11px system-ui,sans-serif; background:var(--boton-fondo); color:var(--tinta); box-shadow:0 2px 8px #20150825; }
.coleccion-favorita { position:absolute; top:6px; right:6px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--linea); border-radius:50%; background:var(--blanco); color:var(--tinta); font-size:26px; cursor:pointer; box-shadow:0 3px 9px #20150824; }
.coleccion-favorita[aria-pressed="true"],.coleccion-favorita-detalle[aria-pressed="true"] { color:var(--acento); background:var(--blanco); }
.coleccion-tarjeta[data-marco="maestro"] .coleccion-ampliar { border-color:#af863b; box-shadow:inset 0 0 0 2px #ebd294,0 0 0 1px #dfbd71,0 6px 13px #25160d28; background:linear-gradient(135deg,#ead69e,#a87a2e 22%,#f5e5b5 48%,#b48940 75%,#ead69e); }
.coleccion-marco-maestro { display:block; position:relative; margin:-1px 17px 0; padding:7px 3px; text-align:center; color:#f7e8bd; background:#675025; border-radius:0 0 7px 7px; font-size:10px; letter-spacing:.7px; }
.coleccion-detalle { padding:17px; }
.coleccion-sello { display:block; color:var(--acento); font-size:10px; line-height:1.5; letter-spacing:.7px; text-transform:uppercase; }
.coleccion-detalle h4 { margin:7px 0; color:var(--tinta); font:22px/1.18 Georgia,serif; overflow-wrap:anywhere; }
.dialogo .coleccion-detalle p { margin:9px 0 14px; font-size:12px; line-height:1.55; color:var(--suave); }
.coleccion-datos { font-variant-numeric:tabular-nums; }
.coleccion-descargas { display:flex; flex-wrap:wrap; gap:7px; }
.coleccion-descargas button { min-height:44px; padding:9px 10px; font-size:11px; }
.dialogo .coleccion-descargas .coleccion-nota { margin:0; font-size:11px; line-height:1.6; }
#coleccion-estado { padding-top:12px; border-top:1px solid var(--linea); font-size:12px; color:var(--suave); }
.dialogo .coleccion-aviso { padding:12px; border:1px solid var(--acento); border-radius:9px; font-size:12px; line-height:1.6; color:var(--tinta); }
#coleccion-vacia,.coleccion-sin-resultados { padding:32px 12px; text-align:center; }
.coleccion-obra { padding:18px 0 10px; }
.coleccion-volver { min-height:44px; }
.coleccion-obra-cabecera { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:22px 0 18px; }
.coleccion-obra-cabecera > div { min-width:0; }
.coleccion-obra-cabecera h3 { margin:7px 0 0; font:30px/1.2 Georgia,serif; color:var(--tinta); overflow-wrap:anywhere; }
.coleccion-favorita-detalle { flex-shrink:0; min-height:44px; }
.coleccion-obra-figura { margin:0; padding:14px; border:8px solid #9b7550; background:var(--papel); box-shadow:inset 0 0 0 1px #e9d3a8,0 5px 14px #20150822; }
.dialogo .coleccion-obra-figura img { display:block; width:100%; max-width:none; height:auto; max-height:60dvh; object-fit:contain; border-radius:0; }
.coleccion-obra-figura figcaption { padding-top:12px; text-align:center; font-size:12px; line-height:1.55; color:var(--suave); }
.coleccion-obra-figura[data-marco="maestro"] { border-color:#af863b; box-shadow:inset 0 0 0 2px #ebd294,0 0 0 1px #dfbd71,0 6px 13px #25160d28; }
.dialogo .coleccion-obra-datos { margin:20px 0; color:var(--tinta); font-size:14px; font-variant-numeric:tabular-nums; line-height:1.7; }
.dialogo .coleccion-obra-estado { color:var(--suave); font-size:11px; line-height:1.6; }
.coleccion-ampliar:focus-visible,.coleccion-favorita:focus-visible,.coleccion-filtros select:focus-visible { outline:3px solid var(--acento); outline-offset:3px; }
:root[data-estilo="nocturno"] .coleccion-ampliar,:root[data-estilo="nocturno"] .coleccion-obra-figura { border-color:#766344; }
:root[data-estilo="nocturno"] .coleccion-tarjeta[data-marco="maestro"] .coleccion-ampliar,:root[data-estilo="nocturno"] .coleccion-obra-figura[data-marco="maestro"] { border-color:#b49353; }
@media(max-width:850px) { .coleccion-cuadros { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:550px) {
  .dialogo-coleccion { width:calc(100% - 20px); padding:24px 14px; }
  .coleccion-cuadros { grid-template-columns:minmax(0,1fr); gap:16px; }
  .coleccion-filtros { gap:10px; }
  .coleccion-filtros label { flex-basis:100%; }
  .coleccion-filtro-favoritas { width:100%; }
  .coleccion-tematica-titulo { font-size:21px; }
  .dialogo .coleccion-ampliar img { height:230px; }
  .coleccion-obra-cabecera { flex-direction:column; align-items:start; gap:12px; }
  .coleccion-obra-cabecera h3 { font-size:25px; }
  .coleccion-obra-figura { border-width:6px; padding:8px; }
  .coleccion-obra-figura figcaption { font-size:11px; }
  .dialogo .coleccion-obra-datos { font-size:12px; }
  .coleccion-detalle { padding:15px; }
}

/* Galería personal: bienvenida editorial y accesos reales a los otros rincones.
   El alcance por id la mantiene independiente de las pieles de otros diálogos. */
#dialogo-coleccion.dialogo-coleccion {
  width:min(1090px,calc(100% - 32px)); max-height:90dvh;
  padding:28px 32px 22px; border:1px solid var(--panel-borde); border-radius:22px;
  background:radial-gradient(ellipse at 10% 0,#c4a2620d,transparent 50%),var(--papel);
  box-shadow:0 30px 100px #02090799,inset 0 0 0 5px #c4a26209;
  overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable;
  scrollbar-width:thin; scrollbar-color:var(--barra-tirador) transparent;
}
#dialogo-coleccion .coleccion-encabezado { padding:0 48px 0 0; }
#dialogo-coleccion .coleccion-encabezado .ceja {
  margin:0 0 9px; font-size:9px; line-height:1.4; letter-spacing:2px; color:var(--acento);
}
#dialogo-coleccion h2 { margin:0; font-size:38px; line-height:1.12; letter-spacing:-.5px; }
#dialogo-coleccion #coleccion-resumen { margin:11px 0 0; color:var(--suave); font-size:12px; line-height:1.6; }
#dialogo-coleccion #coleccion-vacia {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch;
  margin:23px 0 24px; padding:0; min-height:276px; text-align:left;
  overflow:hidden; border:1px solid var(--linea); border-radius:15px;
  background:linear-gradient(135deg,var(--panel-arriba),var(--panel-abajo));
}
#dialogo-coleccion .coleccion-vacia-arte {
  min-width:0; min-height:276px; background-color:#18322a;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  box-shadow:inset -1px 0 0 #c7a66633;
}
#dialogo-coleccion .coleccion-vacia-texto { align-self:center; padding:27px 30px; }
#dialogo-coleccion .coleccion-vacia-ceja {
  margin:0 0 11px; color:var(--acento); font-size:9px; letter-spacing:1.6px; line-height:1.5;
}
#dialogo-coleccion #coleccion-vacia-titulo {
  max-width:330px; margin:0; color:var(--tinta); font:normal 31px/1.15 Georgia,serif; letter-spacing:-.3px;
  text-wrap:balance;
}
#dialogo-coleccion .coleccion-vacia-texto > p:not(.coleccion-vacia-ceja) {
  max-width:370px; margin:14px 0 20px; font-size:12px; line-height:1.8; color:var(--suave);
}
#dialogo-coleccion #coleccion-explorar {
  display:inline-flex; justify-content:center; align-items:center; gap:18px;
  min-height:46px; max-width:100%; padding:12px 18px;
  border:1px solid var(--acento); border-image:none; border-radius:8px;
  background:var(--acento); color:var(--acento-texto); text-shadow:none;
  box-shadow:inset 0 1px 0 #ffedbd40,0 3px 8px #030c071a;
  font:600 12px/1.5 'Segoe UI',sans-serif; white-space:normal; letter-spacing:.1px;
  transition:background .16s ease,box-shadow .16s ease;
}
#dialogo-coleccion #coleccion-explorar::before { content:none; }
#dialogo-coleccion #coleccion-explorar > span { font-size:20px; line-height:1; }
#dialogo-coleccion #coleccion-explorar:hover {
  background:var(--acento-fuerte); border-color:var(--acento-fuerte); color:var(--acento-texto);
  filter:none; translate:none; box-shadow:inset 0 1px 0 #ffedbd40,0 5px 12px #030c0726;
}
#dialogo-coleccion .coleccion-rincones-titulo {
  margin:25px 0 13px; color:var(--tinta); font:normal 21px/1.35 Georgia,serif;
}
#dialogo-coleccion .coleccion-reconocimientos {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 22px;
}
#dialogo-coleccion .coleccion-acceso {
  position:relative; display:grid; grid-template-columns:83px minmax(0,1fr) 14px; align-items:center;
  gap:10px; min-width:0; min-height:110px; margin:0; padding:10px 12px 10px 7px;
  border:1px solid var(--linea); border-image:none; border-radius:12px;
  color:var(--tinta); background:var(--boton-fondo); text-align:left; text-shadow:none;
  box-shadow:0 3px 10px #00090512; font-family:'Segoe UI',sans-serif; white-space:normal;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
#dialogo-coleccion #coleccion-refugio { margin:0; }
/* Estas tarjetas ya tienen su ilustración. El icono global de #coleccion-refugio
   sería un cuarto elemento de grid y desplazaría el texto a la columna de 14px. */
#dialogo-coleccion .coleccion-acceso::before,
#dialogo-coleccion .coleccion-acceso::after { content:none; display:none; }
#dialogo-coleccion .coleccion-acceso:hover {
  border-color:var(--acento); background:var(--boton-hover); color:var(--tinta);
  box-shadow:0 5px 16px #00090526; filter:none; translate:none;
}
#dialogo-coleccion .coleccion-acceso:active { translate:none; transform:none; filter:none; }
#dialogo-coleccion .coleccion-acceso-arte {
  grid-column:1; grid-row:1;
  position:relative; display:grid; place-items:center; width:83px; height:83px; flex-shrink:0;
  overflow:hidden; border-radius:9px; background:radial-gradient(ellipse,#b3934824,transparent 70%);
}
#dialogo-coleccion .coleccion-acceso-arte .medalla-arte {
  display:block; width:83px; height:83px; margin:0; background-position:0 0;
  border-radius:50%; filter:none; opacity:1;
}
#dialogo-coleccion .coleccion-acceso-arte img {
  display:block; width:100%; height:100%; max-width:none; margin:0; object-fit:cover; border-radius:8px;
}
#dialogo-coleccion [data-rincon="ambientes"] .coleccion-acceso-arte img {
  width:59px; height:74px; object-fit:fill; border-radius:3px; transform:rotate(-10deg);
  box-shadow:4px 5px 0 #a07f424d,8px 9px 12px #050b0766;
}
#dialogo-coleccion [data-rincon="refugio"] .coleccion-acceso-arte img { object-position:92% center; }
#dialogo-coleccion .coleccion-acceso-texto { grid-column:2; grid-row:1; display:block; min-width:0; }
#dialogo-coleccion .coleccion-acceso-texto strong { display:block; font:normal 18px/1.25 Georgia,serif; }
#dialogo-coleccion .coleccion-acceso-texto > span {
  display:block; margin-top:7px; font-size:10px; line-height:1.6; font-weight:400; color:var(--suave);
}
#dialogo-coleccion .coleccion-acceso-flecha { grid-column:3; grid-row:1; color:var(--acento); font-size:17px; font-weight:400; }
#dialogo-coleccion .coleccion-lista:empty { display:none; }
#dialogo-coleccion #coleccion-estado {
  margin:19px 0 0; padding-top:15px; border-top:1px solid var(--linea);
  font-size:10px; line-height:1.6; color:var(--suave);
}
#dialogo-coleccion :is(button,select):focus-visible {
  outline:3px solid var(--foco); outline-offset:3px; box-shadow:none;
}
@media(max-width:850px) {
  #dialogo-coleccion.dialogo-coleccion { padding:26px 24px 20px; }
  #dialogo-coleccion .coleccion-vacia-texto { padding:22px; }
  #dialogo-coleccion #coleccion-vacia-titulo { font-size:27px; }
  #dialogo-coleccion .coleccion-reconocimientos { gap:9px; }
  #dialogo-coleccion .coleccion-acceso {
    grid-template-columns:58px minmax(0,1fr); gap:8px; min-height:100px; padding:9px;
  }
  #dialogo-coleccion .coleccion-acceso-arte,#dialogo-coleccion .coleccion-acceso-arte .medalla-arte { width:58px; height:68px; }
  #dialogo-coleccion .coleccion-acceso-arte .medalla-arte { height:58px; }
  #dialogo-coleccion [data-rincon="ambientes"] .coleccion-acceso-arte img { width:43px; height:57px; }
  #dialogo-coleccion .coleccion-acceso-texto strong { font-size:16px; }
  #dialogo-coleccion .coleccion-acceso-flecha { display:none; }
}
@media(max-width:600px) {
  #dialogo-coleccion.dialogo-coleccion { width:calc(100% - 20px); max-height:92dvh; padding:24px 16px 18px; border-radius:17px; }
  #dialogo-coleccion .coleccion-encabezado { padding-right:38px; }
  #dialogo-coleccion .coleccion-encabezado .ceja { max-width:220px; font-size:8px; letter-spacing:1.35px; }
  #dialogo-coleccion h2 { font-size:32px; }
  #dialogo-coleccion #coleccion-resumen { margin-top:9px; font-size:11px; }
  #dialogo-coleccion #coleccion-vacia { grid-template-columns:minmax(0,1fr); margin:20px 0; min-height:0; }
  #dialogo-coleccion .coleccion-vacia-arte { min-height:0; height:184px; background-position:center 48%; box-shadow:inset 0 -1px 0 #c7a66633; }
  #dialogo-coleccion .coleccion-vacia-texto { padding:22px 21px 24px; }
  #dialogo-coleccion #coleccion-vacia-titulo { max-width:310px; font-size:27px; }
  #dialogo-coleccion .coleccion-vacia-texto > p:not(.coleccion-vacia-ceja) { margin:12px 0 19px; font-size:12px; line-height:1.7; }
  #dialogo-coleccion #coleccion-explorar { width:100%; padding:11px 12px; gap:12px; }
  #dialogo-coleccion .coleccion-rincones-titulo { margin-top:21px; font-size:20px; }
  #dialogo-coleccion .coleccion-reconocimientos { grid-template-columns:minmax(0,1fr); gap:9px; margin-bottom:18px; }
  #dialogo-coleccion .coleccion-acceso { grid-template-columns:65px minmax(0,1fr) 16px; min-height:85px; padding:9px 14px 9px 9px; gap:12px; }
  #dialogo-coleccion .coleccion-acceso-arte,#dialogo-coleccion .coleccion-acceso-arte .medalla-arte { width:65px; height:65px; }
  #dialogo-coleccion .coleccion-acceso-texto strong { font-size:18px; }
  #dialogo-coleccion .coleccion-acceso-texto > span { margin-top:4px; font-size:11px; }
  #dialogo-coleccion .coleccion-acceso-flecha { display:block; }
  #dialogo-coleccion .coleccion-filtros select { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) {
  #dialogo-coleccion :is(.coleccion-acceso,#coleccion-explorar) { transition:none; }
}
html[data-movimiento="no"] #dialogo-coleccion :is(.coleccion-acceso,#coleccion-explorar) { transition:none; }
@media(forced-colors:active) {
  #dialogo-coleccion :is(.coleccion-acceso,#coleccion-explorar) { background:ButtonFace; color:ButtonText; border:1px solid ButtonText; box-shadow:none; }
  #dialogo-coleccion .coleccion-acceso-texto > span { color:ButtonText; }
  #dialogo-coleccion .coleccion-acceso-flecha { color:ButtonText; }
}

/* Ventana de consulta sin telón ni captura del tablero que la rodea. */
.referencia-flotante {
  position:fixed; z-index:12; box-sizing:border-box; display:flex; flex-direction:column;
  overflow:hidden; padding:0; margin:0; border:1px solid var(--panel-borde); border-radius:13px;
  color:var(--tinta); background:var(--blanco); text-align:left; isolation:isolate;
  box-shadow:0 12px 36px var(--mesa-sombra), 0 2px 8px var(--relieve-sombra), inset 0 1px 0 var(--relieve-luz);
}
.referencia-flotante[hidden] { display:none; }
.referencia-cabecera { display:flex; align-items:stretch; flex:0 0 58px; min-width:0; background:linear-gradient(var(--panel-arriba),var(--panel-abajo)); border-bottom:1px solid var(--linea); }
.referencia-flotante button { color:var(--tinta); font-family:inherit; }
.referencia-mover { display:flex; align-items:center; gap:8px; flex:1; min-width:0; border:0; padding:8px 4px 8px 10px; background:transparent; text-align:left; cursor:grab; touch-action:none; user-select:none; }
.referencia-agarre { color:var(--suave); font-size:24px; line-height:1; }
.referencia-identidad { display:flex; flex-direction:column; min-width:0; gap:4px; }
.referencia-identidad small { font-size:9px; text-transform:uppercase; letter-spacing:1px; color:var(--suave); }
.referencia-identidad strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:17px/1.2 Georgia,serif; }
.referencia-icono { display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; padding:4px; border:1px solid transparent; border-radius:7px; background:transparent; font-size:23px; line-height:1; flex:0 0 auto; }
#cerrar-referencia { align-self:center; margin:0 5px 0 1px; }
.referencia-herramientas { display:flex; align-items:center; flex:0 0 46px; gap:4px; padding:0 7px; border-bottom:1px solid var(--linea); background:var(--boton-fondo); }
#referencia-zoom { min-width:45px; text-align:center; font-size:11px; font-variant-numeric:tabular-nums; color:var(--suave); }
.referencia-ajustar { min-height:36px; margin-left:auto; padding:6px 10px; border:1px solid var(--linea); border-radius:7px; background:var(--blanco); font-size:11px; }
.referencia-flotante button:hover:not(:disabled) { background:var(--boton-hover); border-color:var(--linea); }
.referencia-flotante button:disabled { opacity:.35; cursor:default; }
.referencia-flotante button:focus-visible, .referencia-visor:focus-visible { outline:2px solid var(--foco); outline-offset:-3px; }
.referencia-visor { position:relative; flex:1 1 auto; min-height:0; overflow:hidden; background:var(--papel); touch-action:none; user-select:none; cursor:default; }
.referencia-visor.ampliada { cursor:grab; }
#imagen-referencia { position:absolute; top:0; left:0; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; pointer-events:none; user-select:none; }
.referencia-interactuando .referencia-mover, .referencia-interactuando .referencia-visor.ampliada { cursor:grabbing; }
.referencia-estado { position:absolute; inset:0; display:flex; align-items:center; padding:20px; margin:0; text-align:center; font-size:12px; line-height:1.5; color:var(--suave); }
.referencia-estado[hidden] { display:none; }
.referencia-pie { display:flex; align-items:center; justify-content:space-between; gap:4px; flex:0 0 32px; padding-left:10px; border-top:1px solid var(--linea); color:var(--suave); background:var(--boton-fondo); }
.referencia-pie > span { font-size:10px; line-height:1.2; }
.referencia-redimensionar { min-height:32px; min-width:34px; border-radius:5px 0 0 0; font-size:24px; cursor:nwse-resize; touch-action:none; user-select:none; }
@media (pointer:coarse) {
  .referencia-icono { min-width:44px; min-height:44px; }
  .referencia-herramientas { flex-basis:48px; }
  .referencia-redimensionar { min-width:44px; min-height:36px; }
  .referencia-pie { flex-basis:36px; }
}


/* La obra terminada y sus recuerdos ocupan el centro de la celebración. */
.celebracion-victoria { width:min(760px,calc(100vw - 24px)); overflow:auto; }
.victoria-contenido { padding:25px 30px 23px; }
.victoria-obra { position:relative; width:100%; height:min(43dvh,390px); margin:0 auto 22px; overflow:hidden; border-radius:12px; background:#06170f; border:2px solid #b99b59; box-shadow:0 8px 26px #0005; animation:obra-terminada .8s ease-out both; }
.victoria-obra img { width:100%; height:100%; object-fit:contain; display:block; }
.victoria-obra::after { content:''; pointer-events:none; position:absolute; inset:-50%; background:linear-gradient(110deg,transparent 40%,#ffe9a335 49%,transparent 58%); animation:brillo-obra 1.7s .3s ease-out both; }
.medalla-victoria { display:none; }
.victoria-ceja { margin-bottom:8px; }
#detalle-victoria { margin-bottom:15px; }
.dialogo-recompensas { width:min(1120px,calc(100vw - 32px)); }
.dialogo-recompensas .recuerdo-partida { margin:12px auto; padding:12px; }
.dialogo-recompensas .recuerdo-partida img { width:65px; height:65px; }
.dialogo-recompensas .premios-descargables { align-items:stretch; gap:16px; }
.dialogo-recompensas .recompensa-tarjeta { display:flex; flex-direction:column; min-width:0; padding:16px; }
.recompensa-tarjeta .recompensa-simbolo { display:none; }
.recompensa-vista { position:relative; display:flex; align-items:center; justify-content:center; margin:0 0 16px; height:260px; border-radius:9px; background:var(--papel); border:1px solid var(--linea); overflow:hidden; }
.dialogo-recompensas .recompensa-vista img { width:100%; height:100%; min-width:0; min-height:0; max-height:100%; object-fit:contain; display:block; margin:0; padding:6px; box-sizing:border-box; border:0; border-radius:0; box-shadow:none; }
.dialogo-recompensas .recompensa-vista img[hidden] { display:none; }
.recompensa-vista figcaption { padding:12px; font:12px/1.6 'Segoe UI',sans-serif; color:var(--suave); text-align:center; }
.recompensa-vista img:not([hidden]) + figcaption { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.dialogo-recompensas .recompensa-tarjeta .boton { margin-top:auto; }
.dialogo-recompensas .recompensa-tarjeta h3 { font-size:22px; }
@keyframes obra-terminada { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:scale(1); } }
@keyframes brillo-obra { from { transform:translateX(-65%); } to { transform:translateX(65%); } }
@media(max-width:700px) {
 .dialogo-recompensas .premios-descargables { grid-template-columns:1fr; }
 .dialogo-recompensas .recompensa-tarjeta { display:flex; padding:14px; }
 .recompensa-vista { height:260px; }
 .victoria-contenido { padding:18px 15px; }
 .victoria-obra { height:min(39dvh,350px); margin-bottom:16px; }
 .victoria-ceja { letter-spacing:1px; font-size:8px; }
 .celebracion-victoria h2 { font-size:29px; }
}
@media(prefers-reduced-motion:reduce) { .victoria-obra,.victoria-obra::after { animation:none; } .victoria-obra::after { display:none; } }

.recompensas-medallas-nuevas { margin:16px 0; padding:14px; border:1px solid var(--linea); border-radius:12px; }
.recompensas-medallas-nuevas[hidden] { display:none; }
.recompensas-medallas-nuevas h3 { font-size:21px; margin:0 0 14px; }
.nuevas-medallas-lista { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.nuevas-medallas-lista article { display:flex; flex-direction:column; align-items:center; max-width:200px; flex:1 1 140px; gap:7px; }
.nuevas-medallas-lista strong { font-size:13px; }
.nuevas-medallas-lista small { font-size:11px; color:var(--suave); }
.nuevas-medallas-lista .medalla-arte { width:68px; height:68px; margin:0; }
.medalla-arte { border-radius:15%; }

.coleccion-reconocimientos { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.coleccion-reconocimientos .boton { min-height:44px; }
.dialogo-recompensas .acciones-recompensas { flex-wrap:wrap; }

/* Hitos de colección: marco de exposición y un recuerdo que permanece en premios. */
.celebracion-victoria[data-hito]:not([data-hito="comun"]) { width:min(890px,calc(100vw - 24px)); background:radial-gradient(ellipse at 50% 12%,#3a5344,#152b23 66%); }
.celebracion-victoria[data-hito]:not([data-hito="comun"]) .victoria-obra { height:min(36dvh,345px); padding:9px; border:5px ridge #caaa64; border-radius:4px; box-shadow:0 0 0 1px #302316,0 0 0 4px #92713b,0 10px 28px #0007,inset 0 0 0 2px #dec48b55; box-sizing:border-box; }
.celebracion-victoria[data-hito]:not([data-hito="comun"]) .victoria-obra::after { display:none; }
.celebracion-victoria[data-hito="viaje"] { background:radial-gradient(ellipse at 50% 14%,#34516a,#132b35 70%); }
.victoria-hitos { display:grid; gap:9px; margin:15px auto 20px; max-width:690px; text-align:left; }
.victoria-hitos[hidden],.victoria-acciones [hidden],.victoria-nota[hidden],.recuerdo-hito-victoria[hidden] { display:none; }
.victoria-hito { display:flex; align-items:center; gap:15px; padding:12px 16px; border:1px solid #bfa46a70; border-radius:12px; background:#0b201bd9; }
.victoria-hito-sello { display:grid; place-items:center; flex:0 0 60px; width:60px; height:60px; border:2px solid #c1a165; outline:1px solid #c1a16555; outline-offset:3px; border-radius:50%; color:#f8d994; background:radial-gradient(circle at 30% 25%,#5f5632,#272719); font:600 14px/1 Georgia,serif; }
.victoria-hito[data-tipo="viaje"] .victoria-hito-sello { font-size:34px; background:radial-gradient(circle at 30% 25%,#34596a,#142d36); }
.victoria-hito h3 { margin:0 0 4px; color:#ffebbc; font:600 20px/1.2 Georgia,serif; }
.victoria-hito p { margin:0; color:#d9d3bb; font:13px/1.5 'Segoe UI',sans-serif; }
.victoria-acciones { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.victoria-acciones button { max-width:100%; white-space:normal; min-height:48px; }
#refugio-victoria { color:#f5e8c4; background:#163831; border:1px solid #ba9b59; border-radius:9px; padding:12px 20px; font:600 13px/1.4 'Segoe UI',sans-serif; }
#refugio-victoria:hover { background:#234e43; }
#refugio-victoria:focus-visible { outline:3px solid #fff2d3; outline-offset:4px; }
.victoria-nota { margin:13px 0 0; color:#c5c8b3; font:12px/1.5 'Segoe UI',sans-serif; }
.recuerdo-hito-victoria { margin:20px auto; padding:22px; border:1px solid var(--linea); border-radius:16px; background:linear-gradient(120deg,#d3af5920,transparent); text-align:left; }
.recuerdo-hito-victoria h3 { margin:8px 0 14px; font-size:26px; }
.recuerdo-hitos p { margin:8px 0 14px; line-height:1.6; }
.recuerdo-hito-nota { font-size:12px; color:var(--suave); }
.taller-invitacion-obra { grid-column:1 / -1; margin:0 0 15px; padding:16px; border:1px solid var(--linea); border-radius:10px; background:var(--papel); color:var(--tinta); line-height:1.6; }
@media(max-width:520px) {
 .celebracion-victoria[data-hito]:not([data-hito="comun"]) .victoria-obra { height:min(27dvh,240px); padding:5px; border-width:4px; }
 .celebracion-victoria[data-hito]:not([data-hito="comun"]) h2 { font-size:27px; }
 .victoria-hito { gap:11px; padding:12px; }
 .victoria-hito-sello { flex-basis:45px; width:45px; height:45px; font-size:12px; }
 .victoria-hito h3 { font-size:18px; }
 .victoria-acciones { flex-direction:column; }
 .victoria-acciones button { width:100%; }
 .recuerdo-hito-victoria { padding:16px; }
}
html[data-movimiento="no"] .victoria-obra::after { display:none; }
@media(prefers-reduced-motion:reduce) { .celebracion-victoria * { animation:none!important; transition:none!important; } }

.dialogo-medallas {
  width:min(1040px, calc(100% - 24px)); max-height:90dvh; overflow:auto;
  padding:32px; text-align:left;
}
.dialogo-medallas h2 { margin:6px 0 12px; }
.dialogo-medallas #medallas-introduccion { max-width:660px; margin:0; }
.dialogo-medallas .medallas-resumen { margin:20px 0 0; color:var(--tinta); font-weight:700; }
.medallas-lista { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin:20px 0; }
.medalla-tarjeta {
  position:relative; display:flex; flex-direction:column; align-items:center;
  min-width:0; padding:16px 16px 18px; border:1px solid var(--linea);
  border-radius:16px; background:var(--boton-fondo); text-align:center;
}
.medalla-tarjeta.conseguida { border-color:var(--boton-borde); background:radial-gradient(ellipse at 50% 15%, #b18a3220, transparent 64%), var(--boton-fondo); }
.medalla-tarjeta.recien-conseguida { box-shadow:inset 0 0 0 2px #bf94394d; }
.medalla-arte { background-image:url("../recursos/recompensas/medallas-ilustradas.png"); display:block; width:104px; height:104px; flex-shrink:0; background-size:500% 200%; background-repeat:no-repeat; margin-bottom:6px; }
.medalla-tarjeta:not(.conseguida) .medalla-arte { filter:grayscale(.8); opacity:.55; }
.medalla-estado { color:var(--suave); font-size:10px; text-transform:uppercase; letter-spacing:1.1px; }
.medalla-tarjeta.conseguida .medalla-estado { color:var(--tinta); font-weight:700; }
.medalla-tarjeta h3 { margin:8px 0; font:22px/1.18 Georgia,serif; text-wrap:balance; }
.dialogo-medallas .medalla-descripcion { margin:0 0 16px; flex:1; font-size:12px; line-height:1.55; color:var(--suave); }
.medalla-tarjeta progress { display:block; width:100%; height:7px; border:0; border-radius:8px; overflow:hidden; background:var(--linea); accent-color:var(--boton-borde); }
.medalla-tarjeta progress::-webkit-progress-bar { background:var(--linea); border-radius:8px; }
.medalla-tarjeta progress::-webkit-progress-value { background:var(--boton-borde); border-radius:8px; }
.medalla-tarjeta progress::-moz-progress-bar { background:var(--boton-borde); border-radius:8px; }
.medalla-progreso { margin-top:6px; color:var(--tinta); font-size:12px; font-variant-numeric:tabular-nums; }
.dialogo-medallas .medalla-premio { margin:12px 0 0; padding-top:10px; border-top:1px solid var(--linea); width:100%; font-size:11px; color:var(--tinta); }
.medallas-nuevas { margin-top:18px; padding:14px 16px; border:1px solid var(--boton-borde); border-radius:10px; background:#ba963818; font-size:13px; line-height:1.6; }
.medallas-nuevas[hidden] { display:none; }
.dialogo-medallas .medallas-reglas, .dialogo-medallas .medallas-almacenamiento { color:var(--suave); font-size:11px; line-height:1.65; margin:14px 0 0; }
.dialogo-medallas .medallas-reglas { border-top:1px solid var(--linea); padding-top:16px; }
@media (max-width:740px) {
  .dialogo-medallas { padding:28px 18px 22px; }
  .medallas-lista { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .medalla-tarjeta { padding:14px 12px; }
  .medalla-tarjeta h3 { font-size:20px; }
}
@media (max-width:440px) {
  .medallas-lista { grid-template-columns:1fr; }
  .medalla-tarjeta { padding:18px; }
  .medalla-arte { width:112px; height:112px; }
}

/* El centro siempre permanece transparente: sólo se dibujan cuatro cantos.
   El recorte de cada franja contiene también el resplandor de sus partículas. */
.ambiente-animado {
  position:absolute; inset:0; z-index:1; overflow:hidden; border-radius:inherit;
  pointer-events:none; user-select:none; contain:strict;
  --ambiente-dorado:255,225,164;
}
.ambiente-animado[hidden] { display:none; }
.ambiente-animado, .ambiente-animado * { pointer-events:none !important; }
.ambiente-franja { position:absolute; overflow:hidden; contain:strict; }
.ambiente-franja-arriba { top:0; left:0; right:0; height:8px; }
.ambiente-franja-abajo { bottom:0; left:0; right:0; height:8px; }
.ambiente-franja-izquierda { left:0; top:8px; bottom:8px; width:8px; }
.ambiente-franja-derecha { right:0; top:8px; bottom:8px; width:8px; }
.ambiente-luz {
  position:absolute; inset:0; opacity:.16;
  background:linear-gradient(110deg,transparent 12%,rgba(var(--ambiente-dorado),.58) 46%,transparent 76%);
  animation:ambiente-respirar 19s ease-in-out infinite;
}
.ambiente-franja-derecha .ambiente-luz,
.ambiente-franja-abajo .ambiente-luz { animation-delay:-8s; }
.ambiente-franja-izquierda .ambiente-luz,
.ambiente-franja-derecha .ambiente-luz {
  background:linear-gradient(170deg,transparent 8%,rgba(var(--ambiente-dorado),.5) 43%,transparent 82%);
}
.ambiente-punto {
  display:none; position:absolute; width:var(--tamano); height:var(--tamano);
  border-radius:50%; opacity:.1; background:#e0edb2;
  box-shadow:0 0 3px 1px #d5e99c60;
}
.ambiente-franja-arriba .ambiente-punto,
.ambiente-franja-abajo .ambiente-punto { left:var(--posicion); top:3px; }
.ambiente-franja-izquierda .ambiente-punto,
.ambiente-franja-derecha .ambiente-punto { top:var(--posicion); left:3px; }
.ambiente-animado[data-tema="papiro"] { --ambiente-dorado:255,214,126; }
.ambiente-animado[data-tema="papiro"] .ambiente-luz { animation-duration:24s; }
.ambiente-animado[data-tema="nocturno"] { --ambiente-dorado:225,195,128; }
.ambiente-animado[data-tema="nocturno"] .ambiente-luz { opacity:.1; animation-duration:26s; }
.ambiente-animado[data-tema="bosque"] { --ambiente-dorado:185,211,147; }
.ambiente-animado[data-tema="bosque"] .ambiente-punto {
  display:block; animation:ambiente-luciernaga var(--duracion) ease-in-out var(--demora) infinite;
}
.ambiente-animado[data-tema="cosmos"] { --ambiente-dorado:151,179,224; }
.ambiente-animado[data-tema="cosmos"] .ambiente-punto {
  display:block; background:#dceaff; box-shadow:0 0 3px 1px #a8c2ed50;
  animation:ambiente-estrella var(--duracion) ease-in-out var(--demora) infinite;
}
/* En ahorro bastan cuatro puntos. La luz queda fija y no se anima la posición. */
.ambiente-animado[data-calidad="ahorro"] .ambiente-luz { animation:none; opacity:.12; }
.ambiente-animado[data-calidad="ahorro"] .ambiente-punto[data-indice="4"],
.ambiente-animado[data-calidad="ahorro"] .ambiente-punto[data-indice="5"],
.ambiente-animado[data-calidad="ahorro"] .ambiente-punto[data-indice="6"],
.ambiente-animado[data-calidad="ahorro"] .ambiente-punto[data-indice="7"] { display:none; }
.ambiente-animado[data-calidad="ahorro"][data-tema="bosque"] .ambiente-punto { animation-name:ambiente-estrella; }
@keyframes ambiente-respirar { 0%,100% { opacity:.07; } 50% { opacity:.28; } }
@keyframes ambiente-luciernaga {
  0%,100% { opacity:.08; transform:translate(0,-6px); }
  35% { opacity:.5; transform:translate(1px,0); }
  65% { opacity:.18; transform:translate(-1px,7px); }
}
@keyframes ambiente-estrella { 0%,100% { opacity:.12; } 48% { opacity:.56; } 72% { opacity:.24; } }
@media (prefers-reduced-motion:reduce) {
  .ambiente-animado { display:none !important; }
  .ambiente-animado * { animation:none !important; }
}

/* Una misma respuesta breve en controles; el canvas conserva su posición. */
:root { --duracion-respuesta:150ms; --curva-respuesta:cubic-bezier(.2,.7,.2,1); }
html[data-movimiento="si"] :is(.boton,.tarjeta-estilo,.opcion-marco,.tarjeta-rompecabezas,.boton-texto,.enlace) {
  transition:background-color var(--duracion-respuesta),border-color var(--duracion-respuesta),box-shadow var(--duracion-respuesta),filter var(--duracion-respuesta);
}
html[data-movimiento="si"] :is(.boton,.opcion-marco):not(:disabled):not([aria-disabled="true"]):active {
  filter:brightness(.95); box-shadow:inset 0 2px 5px var(--relieve-sombra);
}
:is(button,select,input):focus-visible { outline:2px solid var(--acento-fuerte,var(--acento)); outline-offset:3px; }
html[data-movimiento="si"] .boton :is(.icono-control,.icono-ilustrado) { transition:transform 150ms var(--curva-respuesta); }
@media (hover:hover) and (pointer:fine) {
  html[data-movimiento="si"] .boton:not(:disabled):hover :is(.icono-control,.icono-ilustrado) { transform:translateY(-1px); }
  html[data-movimiento="si"] .boton:not(:disabled):active :is(.icono-control,.icono-ilustrado) { transform:translateY(1px); }
}

.ajustes-visuales { border-top:1px solid var(--linea); margin-top:24px; padding-top:20px; }
.ajustes-visuales h3 { margin:0; font:25px Georgia,serif; color:var(--tinta); }
.visuales-intro { margin:6px 0 14px; color:var(--suave); font-size:13px; }
.visuales-opciones { display:grid; gap:0; border:1px solid var(--linea); border-radius:12px; overflow:hidden; }
.visual-opcion { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:13px 15px; background:var(--boton-fondo); }
.visual-opcion + .visual-opcion { border-top:1px solid var(--linea); }
.visual-opcion > span { display:flex; flex-direction:column; gap:4px; min-width:0; }
.visual-opcion strong { font-size:14px; }
.visual-opcion small { color:var(--suave); line-height:1.45; font-size:12px; }
.visual-opcion input,.miga-activar input { accent-color:var(--acento-fuerte,var(--acento)); width:20px; height:20px; flex:0 0 20px; margin:0; cursor:pointer; }
.visual-opcion select { max-width:155px; min-width:125px; padding:9px; min-height:44px; border:1px solid var(--linea); border-radius:8px; color:var(--tinta); background:var(--panel-arriba); }
.visual-nota { font-size:12px; line-height:1.5; color:var(--suave); margin:10px 0 0; }
#visual-sistema:not([hidden]) { padding:0 15px 12px; margin:0; background:var(--boton-fondo); }
.miga-presentacion { display:flex; align-items:center; gap:18px; border:1px solid var(--linea); border-radius:14px; margin-top:18px; padding:16px; background:linear-gradient(110deg,var(--boton-fondo),var(--panel-arriba)); }
.miga-retrato { flex:0 0 102px; height:108px; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 82%,#b68a3230,transparent 67%); }
.miga-retrato .miga-sprite { width:102px; height:102px; }
.miga-descripcion { min-width:0; }
.miga-descripcion h4 { font:26px Georgia,serif; margin:3px 0 5px; }
.miga-descripcion p { color:var(--suave); font-size:12px; line-height:1.55; margin:0 0 10px; }
.miga-descripcion .ceja { font-size:9px; }
.miga-activar { display:flex; align-items:center; gap:8px; min-height:34px; font-size:13px; }
.miga-presentacion[data-disponible="false"] .miga-retrato { opacity:.65; }
.miga-activar:has(input:disabled) { color:var(--suave); }

/* Hoja original con 4 x 3 celdas iguales, alpha conservado. */
.miga-sprite { display:block; width:64px; height:64px; background-image:url('../recursos/companero/miga-sprites.png'); background-size:400% 300%; background-repeat:no-repeat; image-rendering:pixelated; }
.miga-sprite[data-animacion="reposo"] { background-position:0 0; animation:miga-respira 5s steps(1,end) infinite; }
.miga-sprite[data-animacion="curiosidad"] { background-position:0 50%; animation:miga-curiosa 1.8s steps(1,end) 1; }
.miga-sprite[data-animacion="celebracion"] { background-position:0 100%; animation:miga-celebra 1.6s steps(1,end) 1; }
@keyframes miga-respira { 0%,100% { background-position:0 0; } 25% { background-position:33.333333% 0; } 50% { background-position:66.666667% 0; } 75% { background-position:100% 0; } }
@keyframes miga-curiosa { 0% { background-position:0 50%; } 25% { background-position:33.333333% 50%; } 50% { background-position:66.666667% 50%; } 75%,100% { background-position:100% 50%; } }
@keyframes miga-celebra { 0% { background-position:0 100%; } 25% { background-position:33.333333% 100%; } 50% { background-position:66.666667% 100%; } 75%,100% { background-position:100% 100%; } }
.miga-sprite.miga-ahorro[data-animacion="reposo"],.miga-sprite.miga-quieta { animation:none; }
.pie-mesa { position:relative; }
body.concentracion .pie-mesa.con-companero { padding-left:69px; }
.companero-miga { position:absolute; left:9px; bottom:0; width:48px; height:32px; margin:0; padding:0; border:0; border-radius:8px; background:transparent; cursor:pointer; touch-action:manipulation; }
.companero-miga[hidden] { display:none; }
.companero-miga:disabled { cursor:default; }
.companero-miga .miga-sprite { position:absolute; bottom:0; left:0; width:48px; height:48px; pointer-events:none; }
.miga-tapete { position:absolute; width:46px; height:10px; left:1px; bottom:1px; border:1px solid var(--acento); border-radius:50%; background:var(--boton-fondo); opacity:.8; }
.medalla-victoria.con-miga svg { display:none; }
.medalla-victoria.con-miga { display:grid; width:64px; height:64px; margin:-8px auto 14px; animation:none; box-shadow:0 0 0 4px #d6b87620,0 5px 15px #061b1f40; }
.medalla-victoria.con-miga::before { display:none; }
.medalla-victoria .miga-sprite { width:74px; height:74px; margin:auto; }
.medalla-victoria.con-miga .miga-sprite { width:62px; height:62px; }
.medalla-victoria:not(.con-miga) .miga-sprite { display:none; }
.visuales-acciones { display:flex; justify-content:flex-end; padding-top:16px; }
.visuales-acciones .boton { min-width:115px; min-height:44px; }

html[data-movimiento="no"] :is(.boton,.boton-texto,.tarjeta-estilo,.tarjeta-rompecabezas,.miga-sprite,.celebracion-victoria *,.aviso) { animation:none !important; transition:none !important; }
html[data-movimiento="no"] .destellos-victoria { display:none; }
@media (prefers-reduced-motion:reduce) {
  .miga-sprite { animation:none !important; }
}
@media (max-width:600px) {
  .visual-opcion { padding:12px; gap:10px; }
  .visual-opcion select { min-width:115px; max-width:130px; font-size:12px; }
  .miga-presentacion { gap:10px; padding:12px; }
  .miga-retrato { flex-basis:72px; height:84px; }
  .miga-retrato .miga-sprite { width:76px; height:76px; }
  .miga-activar { font-size:12px; }
  body.concentracion .pie-mesa.con-companero { padding-left:61px; }
}

/* Portada ilustrada; comparte recursos y preferencias con la partida. */
body[data-pantalla="portada"]{background:#091b2b}
body[data-pantalla="portada"] .pagina{max-width:none;padding:0}
body[data-pantalla="portada"] .cabecera,body[data-pantalla="portada"] .flujo-partida,body[data-pantalla="portada"] .resumen,body[data-pantalla="portada"] .premios-resumen,body[data-pantalla="portada"] .pie-pagina,body[data-pantalla="portada"] #preparacion-obra,body[data-pantalla="portada"] #volver-portada{display:none}
body:not([data-pantalla="portada"]) #portada-inicio{display:none}
body.concentracion #preparacion-obra,body.concentracion #volver-portada{display:none}
#portada-inicio{position:relative;isolation:isolate;overflow:hidden;min-height:740px;min-height:max(700px,100svh);display:grid;place-items:center;background:#071925;color:#fff0cd}
.portada-escena{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.portada-sombra{position:absolute;inset:0;z-index:-2;background:linear-gradient(0deg,#05111ecc,transparent 30%,#03152612),radial-gradient(ellipse at 50% 40%,#07162970,transparent 46%)}
.portada-menu{display:flex;flex-direction:column;align-items:center;width:100%;padding:28px 12px 70px;text-align:center}
.portada-legal{max-width:100%;margin:10px 0 0;font:13px/1.5 "Segoe UI",sans-serif}
.portada-legal a{display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;color:inherit;text-underline-offset:.22em;border-radius:5px}
.portada-legal a:hover{color:#fff}
.portada-legal a:focus-visible{outline:2px solid #ffe6ad;outline-offset:3px}
.portada-menu h1{width:min(520px,68vw);margin:0 0 16px;line-height:0}
#portada-logo{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 9px #001324)}
.portada-menu nav{width:min(356px,90vw);display:flex;flex-direction:column;gap:8px;align-items:center}
.portada-boton{position:relative;display:grid;place-items:center;isolation:isolate;box-sizing:border-box;width:100%;height:64px;flex:0 0 auto;border:0;padding:0 52px;color:#fff0d0;background:transparent;font:600 17px/1.2 Georgia,serif;text-align:center;text-shadow:0 2px 3px #000;cursor:pointer;filter:drop-shadow(0 3px 4px #0006);transform-origin:center;transition:filter .18s ease,transform .18s cubic-bezier(.2,.7,.2,1);touch-action:manipulation}
/* Las tres filas del arte tienen alturas distintas: conservamos la primera,
   centrada, y animamos el botón entero para que marco y texto viajen juntos. */
.portada-boton::before{content:'';position:absolute;inset:0;z-index:-1;background-repeat:no-repeat;background-size:100% 300%;background-position:center 0;pointer-events:none}
@media(hover:hover) and (pointer:fine){
 .portada-boton:not(:disabled):not([aria-disabled="true"]):hover{transform:scale(1.025);filter:drop-shadow(0 0 7px #f2c27477) brightness(1.08)}
}
.portada-boton:not(:disabled):not([aria-disabled="true"]):active{transform:scale(.99);filter:drop-shadow(0 2px 3px #0006) brightness(.95)}
.portada-boton:focus-visible{outline:2px solid #ffe6ad;outline-offset:5px;border-radius:8px}
.portada-boton:disabled,.portada-boton[aria-disabled="true"]{filter:grayscale(.6);opacity:.65;cursor:wait;transform:none}
.portada-boton[hidden]{display:none}
.portada-boton.principal-portada{height:73px;font-size:20px}
.portada-boton.portada-boton-borrar{width:92%;height:56px;margin-top:5px;font-size:15px;color:#ffe4d5}
.portada-boton-borrar::before{filter:sepia(.8) saturate(1.4) hue-rotate(320deg)}
#portada-estado{font:13px/1.4 'Segoe UI',sans-serif;margin:8px 0 0;min-height:20px;color:#fff0cd}
#volver-portada{margin-bottom:12px}
#preparacion-obra{display:grid;grid-template-columns:minmax(180px,360px) 1fr;gap:32px;align-items:center;max-width:980px;margin:18px auto 26px}
#preparacion-imagen{max-height:390px;object-fit:contain;width:100%;border:9px solid var(--papel);box-shadow:0 5px 24px #39200d30}
#preparacion-obra h2{font-size:clamp(26px,3vw,42px);font-weight:400;margin:0 0 12px}
#preparacion-descripcion{font:17px/1.7 Georgia,serif;color:var(--suave);max-width:50ch}
.opciones-inicio{max-width:600px}
.opciones-inicio-lista{display:grid;gap:12px;margin:25px 0}
.opciones-inicio-lista button{display:flex;align-items:start;flex-direction:column;gap:6px;padding:15px 18px;font-size:17px}
.opciones-inicio-lista button span{font-size:13px;font-weight:400;color:var(--suave)}
@media(max-width:700px){
 #portada-inicio{min-height:max(740px,100svh);background:#0a2133}
 .portada-escena{height:auto;aspect-ratio:1672/941;object-fit:contain;inset:0 0 auto}
 .portada-sombra{background:linear-gradient(180deg,transparent 9%,#0a213300 15%,#0a2133 34%)}
 .portada-menu{padding-top:175px;padding-bottom:95px}
 .portada-menu h1{width:min(450px,94vw);margin-bottom:13px}
 .portada-menu nav{width:min(350px,94vw);gap:7px}
 .portada-boton{height:60px;padding-inline:46px;font-size:16px}
 .portada-boton.principal-portada{height:65px;font-size:18px}
 .portada-boton.portada-boton-borrar{height:53px;font-size:15px}
 #preparacion-obra{grid-template-columns:1fr;gap:16px;margin:12px auto}
 #preparacion-imagen{max-height:300px}
 #preparacion-descripcion{font-size:15px}
}
@media(max-width:359px){
 .portada-menu{padding-inline:8px}
 .portada-boton{font-size:15px;padding-inline:41px}
 .portada-boton.principal-portada{font-size:17px}
 .portada-boton.portada-boton-borrar{font-size:14px;padding-inline:37px}
}
html[data-movimiento="no"] .portada-boton{transition:none;transform:none!important}
@media(prefers-reduced-motion:reduce){.portada-boton{transition:none;transform:none!important}}

body[data-pantalla="portada"] #cargando{display:none}
body[data-pantalla="portada"].error-inicial #cargando{display:flex;background:var(--papel);color:var(--tinta)}

.navegacion-movil, .movil-titulo-cajon { display:none; }
.accesibilidad-dialogo { max-width:440px; }
.accesibilidad-dialogo label { display:block; margin:20px 0 8px; font-weight:650; }
.accesibilidad-dialogo select { width:100%; min-height:48px; }
.accesibilidad-dialogo p { line-height:1.6; }
html[data-texto="grande"] { --lectura-minima:16px; --lectura-ayuda:14px; }
html[data-texto="extra"] { --lectura-minima:19px; --lectura-ayuda:17px; }
html[data-texto="grande"] body :is(button,select,label,p,summary,.titulo-vista),
html[data-texto="extra"] body :is(button,select,label,p,summary,.titulo-vista) { font-size:max(1em,var(--lectura-minima)) !important; }
html[data-texto="grande"] body :is(small,.nota-guardado,.ceja),
html[data-texto="extra"] body :is(small,.nota-guardado,.ceja,.movil-estado) { font-size:var(--lectura-ayuda) !important; }
html[data-texto="grande"] body button strong,
html[data-texto="extra"] body button strong { font-size:var(--lectura-minima) !important; }

@media (max-width:760px) {
  body #juego[data-movil="true"], body.concentracion #juego[data-movil="true"] {
    height:calc(100dvh - var(--alto-controles-concentracion, 200px) - 12px);
    min-height:max(380px,calc(var(--alto-navegacion-movil,90px) + var(--alto-cabecera-movil,100px) + 210px));
  }
  #juego[data-movil="true"] .navegacion-movil {
    display:flex; flex-direction:column; position:fixed; left:max(6px,env(safe-area-inset-left)); right:max(6px,env(safe-area-inset-right)); bottom:0;
    padding:7px 8px max(7px,env(safe-area-inset-bottom)); gap:7px; z-index:8;
    background:var(--papel,#fbf3e5); border:1px solid var(--linea,#d5bb91); border-bottom:0; border-radius:12px 12px 0 0;
    box-shadow:0 -4px 16px #23160512; touch-action:manipulation;
  }
  .movil-seleccion { display:grid; gap:5px; min-width:0; text-align:center; }
  .movil-estado { color:var(--tinta,#503723); font-size:12px; line-height:1.3; min-height:2.6em; display:flex; align-items:center; justify-content:center; }
  .movil-traslados { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); justify-content:center; gap:6px; }
  .movil-traslados[hidden] { display:grid; visibility:hidden; }
  .movil-traslados button[hidden] { display:none; }
  .movil-traslados button { min-height:44px; border:1px solid var(--linea); border-radius:8px; padding:5px 12px; background:var(--boton-fondo); color:var(--tinta); font:600 12px 'Segoe UI',sans-serif; }
  .movil-pestanas { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .movil-pestanas button { min-height:48px; display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--linea); border-radius:9px; background:var(--boton-fondo); color:var(--tinta); font:600 14px 'Segoe UI',sans-serif; }
  .movil-pestanas button > span:first-child { font-size:20px; }
  .movil-pestanas [aria-pressed="true"] { background:var(--accion-verde,#e0ebdc); border-color:var(--acento,#466a5b); box-shadow:inset 0 -3px var(--acento,#466a5b); }
  #juego[data-movil="true"][data-vista-movil="lienzo"] #vista-mesa-controles,
  #juego[data-movil="true"]:not([data-vista-movil="lienzo"]) #vista-lienzo-controles,
  #juego[data-movil="true"][data-vista-movil="mesa"] .lote-mesa,
  #juego[data-movil="true"][data-vista-movil="cajon"] :is(.cabecera-vista,#panel-bandejas) { display:none; }
  #juego[data-movil="true"][data-vista-movil="cajon"] .movil-titulo-cajon { display:block; font:600 16px Georgia,serif; padding:3px 0 7px; }
  #juego[data-movil="true"][data-vista-movil="cajon"] #vista-mesa-controles { background:transparent; border:0; }
  #juego[data-movil="true"] .vista-controles { min-height:44px; padding:0 2px; }
  #juego[data-movil="true"] .titulo-vista { font-size:14px; white-space:normal; }
  #juego[data-movil="true"] .numero-vista { display:none; }
  #juego[data-movil="true"] .zoom-controles { gap:1px; }
  #juego[data-movil="true"] .zoom-controles button { min-height:44px; min-width:36px; padding:3px 5px; }
  #juego[data-movil="true"] .zoom-controles output { min-width:35px; font-size:12px; }
  #juego[data-movil="true"] .lote-mesa { flex-wrap:wrap; gap:6px; padding:6px 0; }
  #juego[data-movil="true"] .lote-mesa label { font-size:13px; }
  #juego[data-movil="true"] .lote-mesa :is(button,select) { min-height:44px; }
  #juego[data-movil="true"] .bandejas-barra { flex-wrap:wrap; }
  #juego[data-movil="true"][data-vista-movil="lienzo"] [id^="desplazamiento-mesa-"],
  #juego[data-movil="true"][data-vista-movil="mesa"] [id^="desplazamiento-lienzo-"],
  #juego[data-movil="true"][data-vista-movil="cajon"] [id^="desplazamiento-"] { display:none; }
  body.concentracion .pie-mesa { display:none; }
  body.concentracion .zona-juego .aviso { position:fixed; bottom:calc(var(--alto-navegacion-movil,140px) + 8px); z-index:9; font-size:13px; }
  body.concentracion .herramientas-partida { position:relative; padding:4px 0; }
  body.concentracion .barra-ayudas { flex-wrap:nowrap; gap:4px; }
  body.concentracion .grupo-ayudas { flex:1 1 auto; }
  body.concentracion .ayudas-botones { grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; }
  body.concentracion .ayudas-botones .boton-ayuda { flex-direction:column; min-height:55px; padding:3px 2px; text-align:center; gap:2px; }
  body.concentracion .boton-ayuda .icono-ilustrado { width:22px; height:22px; flex-basis:22px; }
  body.concentracion .boton-ayuda small { display:none; }
  body.concentracion .boton-ayuda strong { font-size:11px; }
  body.concentracion .reinicio-separado { padding:0; border:0; }
  body.concentracion .reinicio-separado .boton-reinicio { min-height:55px; padding:3px 6px; }
  body.concentracion .boton-reinicio strong { font-size:11px; }
  body.concentracion .boton-reinicio .icono-ilustrado { display:none; }
  body.concentracion .controles.controles-compactos { display:flex; flex-wrap:wrap; gap:4px; }
  body.concentracion .controles-compactos .reloj-compacto { flex:1 1 115px; }
  body.concentracion .controles-compactos .botones-giro { flex:1 1 120px; }
  body.concentracion .controles-compactos .botones-giro .control-ilustrado { flex-direction:row; min-height:44px; padding:3px; }
  body.concentracion .botones-giro .control-ilustrado small { display:none; }
  body.concentracion .controles-compactos :is(.control-vista,.control-deshacer,.seleccionar-varias) { flex:1 1 25%; min-height:44px; padding:4px; }
  body.concentracion .controles-concentracion { gap:4px; }
  body.concentracion .controles-concentracion .boton { min-height:44px; font-size:12px; }
  html[data-texto="grande"] body .ayudas-botones,
  html[data-texto="extra"] body .ayudas-botones { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-texto="grande"] #juego .cabecera-vista,
  html[data-texto="extra"] #juego .cabecera-vista { flex-wrap:wrap; }
  html[data-texto="grande"] #juego .bandejas-fila-principal,
  html[data-texto="extra"] #juego .bandejas-fila-principal { flex-wrap:wrap; }
  html[data-texto="grande"] #juego .bandejas-fila-principal select,
  html[data-texto="extra"] #juego .bandejas-fila-principal select { flex-basis:100%; width:100%; }
  html[data-texto="extra"] .movil-pestanas button { flex-direction:column; gap:0; }
  html[data-texto="grande"] body.concentracion .controles-compactos .botones-giro,
  html[data-texto="extra"] body.concentracion .controles-compactos .botones-giro { flex-basis:100%; }
  html[data-texto="grande"] body.concentracion .controles-compactos :is(.control-vista,.control-deshacer,.seleccionar-varias),
  html[data-texto="extra"] body.concentracion .controles-compactos :is(.control-vista,.control-deshacer,.seleccionar-varias) { flex-direction:column; white-space:normal; text-align:center; }
}

/* La mesa conserva sus acciones frecuentes. Las ayudas y los ajustes comparten
   un panel móvil; sus etiquetas de consecuencias siempre se pueden leer. */
.herramientas-movil-barra[hidden] { display:none; }
.confirmacion-ayuda { max-width:560px; }
.confirmacion-ayuda p { line-height:1.65; }
.confirmacion-ayuda .acciones { display:flex; flex-wrap:wrap; gap:10px; }
.confirmacion-ayuda .acciones .boton { white-space:normal; }
#dialogo-herramientas-movil { width:min(580px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow-y:auto; }
#dialogo-herramientas-movil .herramientas-movil-cabecera { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
#dialogo-herramientas-movil #cerrar-herramientas-movil { margin-left:auto; }
#dialogo-herramientas-movil h2 { margin:0; }
#dialogo-herramientas-movil .herramientas-movil-contenido { position:static; padding:0; background:transparent; }
#dialogo-herramientas-movil .barra-superior-partida { display:flex; flex-direction:column; align-items:stretch; gap:18px; }
#dialogo-herramientas-movil .barra-ayudas { display:flex; flex-direction:column; gap:10px; }
#dialogo-herramientas-movil .grupo-ayudas { flex:auto; }
#dialogo-herramientas-movil .ayudas-botones { grid-template-columns:1fr; gap:8px; }
#dialogo-herramientas-movil .boton-ayuda,
#dialogo-herramientas-movil .boton-reinicio { width:100%; min-height:58px; flex-direction:row; justify-content:flex-start; text-align:left; padding:8px 12px; gap:10px; }
#dialogo-herramientas-movil .boton-ayuda small,
#dialogo-herramientas-movil .boton-reinicio small,
#dialogo-herramientas-movil #boton-concentracion small { display:block; font-size:12px; margin-top:3px; }
#dialogo-herramientas-movil .boton-ayuda strong,
#dialogo-herramientas-movil .boton-reinicio strong { font-size:14px; }
#dialogo-herramientas-movil .reinicio-separado { border:0; padding:0; }
#dialogo-herramientas-movil .controles-concentracion { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:8px; }
#dialogo-herramientas-movil .controles-concentracion .boton { min-width:0; white-space:normal; }
#dialogo-herramientas-movil #boton-concentracion { grid-column:1/-1; width:100%; justify-content:center; }

@media(max-width:760px) {
  #herramientas-movil-barra { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto; align-items:center; gap:6px; }
  #herramientas-movil-barra[hidden] { display:none; }
  #herramientas-movil-barra .boton { min-width:0; min-height:48px; padding:5px 7px; white-space:normal; }
  #herramientas-movil-barra #boton-imagen { flex-direction:row; justify-content:center; gap:5px; }
  #herramientas-movil-barra #boton-imagen small { display:none; }
  #herramientas-movil-barra #boton-imagen strong { font-size:12px; }
  #herramientas-movil-barra #progreso-concentracion { margin:0; padding:0 2px; font-size:11px; }
  #herramientas-movil-barra #abrir-herramientas-movil { font-size:12px; }
  html[data-texto="extra"] #herramientas-movil-barra { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); }
  html[data-texto="extra"] #herramientas-movil-barra #progreso-concentracion { grid-column:1/-1; justify-self:end; }
  html[data-texto="grande"] #dialogo-herramientas-movil .ayudas-botones,
  html[data-texto="extra"] #dialogo-herramientas-movil .ayudas-botones { grid-template-columns:1fr; }
}

/* En mesas estrechas, el nombre de la bandeja conserva una fila propia. */
@media(max-width:480px) {
  #juego[data-movil="true"] .bandejas-fila-principal {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px;
  }
  #juego[data-movil="true"] .bandejas-fila-principal select {
    grid-column:1/-1; width:100%; min-width:0;
  }
  #juego[data-movil="true"] .bandejas-fila-principal .boton {
    min-width:0; max-width:100%; min-height:44px; padding-inline:6px;
    justify-content:center; white-space:normal; overflow-wrap:break-word;
  }
  #juego[data-movil="true"] .bandejas-trasladar > span:first-child { display:none; }
  #juego[data-movil="true"] .bandejas-fila-principal .boton::before {
    width:22px; height:22px; flex-basis:22px; margin-right:3px;
  }
}

.tutorial-practico { --tutorial-tinta: var(--tinta); --tutorial-azul: var(--acento-fuerte); box-sizing: border-box; color: var(--tutorial-tinta); width: min(850px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 26px; border: 1px solid var(--panel-borde); border-radius: 22px; background: linear-gradient(135deg, var(--panel-arriba), var(--panel-abajo)); box-shadow: 0 24px 100px var(--mesa-sombra); font-family: Arial, sans-serif; }
.tutorial-practico::backdrop { background: var(--velo); backdrop-filter: blur(7px); }
.tutorial-practico * { box-sizing: border-box; }
.tutorial-practico [hidden] { display: none !important; }
.tutorial-cabecera { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; }
.tutorial-antetitulo { margin: 0 0 7px; color: var(--acento-fuerte); font-size: .7rem; text-transform: uppercase; letter-spacing: .17em; font-weight: 700; }
.tutorial-cabecera h2 { margin: 0; font: 400 1.8rem/1.15 Georgia, serif; }
.tutorial-descripcion { max-width: 440px; margin: 10px 0 0; color: var(--suave); font-size: .85rem; line-height: 1.5; }
.tutorial-boton { min-height: 44px; border: 1px solid var(--boton-borde); padding: 11px 16px; border-radius: 11px; font: 600 .83rem/1.3 Arial, sans-serif; color: var(--tinta); background: linear-gradient(var(--panel-arriba), var(--panel-abajo)); box-shadow: inset 0 1px var(--relieve-luz), 0 3px 0 var(--relieve-sombra); cursor: pointer; transition: background .15s, translate .15s; }
.tutorial-boton:hover { background: var(--boton-hover); translate: 0 -1px; }
.tutorial-boton:active { translate: 0 1px; }
.tutorial-boton:focus-visible, .tutorial-pieza:focus-visible { outline: 3px solid var(--foco); outline-offset: 4px; }
.tutorial-principal { color: var(--acento-texto); border-color: var(--acento-fuerte); background: linear-gradient(var(--acento), var(--acento-fuerte)); box-shadow: inset 0 1px var(--relieve-luz), 0 3px 0 var(--relieve-sombra); }
.tutorial-principal:hover { background: var(--acento-fuerte); }
.tutorial-salir { flex: 0 0 auto; max-width: 128px; font-size: .73rem; }
.tutorial-progreso { display: flex; gap: 8px; padding: 0; margin: 22px 0 18px; list-style: none; }
.tutorial-progreso li { display: flex; flex: 1; align-items: center; gap: 7px; padding: 9px 6px; border-bottom: 2px solid var(--linea); font-size: .76rem; color: var(--suave); }
.tutorial-progreso li.actual { border-color: var(--acento); color: var(--acento-fuerte); font-weight: 700; }
.tutorial-progreso li.hecho { border-color: var(--verde); color: var(--accion-verde-tinta); }
.tutorial-numero { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--linea); border-radius: 50%; font-size: .7rem; flex-shrink: 0; }
.tutorial-progreso .actual .tutorial-numero { color: var(--acento-texto); background: var(--acento); border-color: var(--acento); }
.tutorial-progreso .hecho .tutorial-numero { color: var(--accion-verde-tinta); background: var(--accion-verde); }
.tutorial-instruccion { min-height: 79px; }
.tutorial-instruccion h3 { margin: 0 0 8px; font: 400 1.3rem Georgia, serif; }
.tutorial-instruccion p { margin: 0; font-size: .85rem; line-height: 1.5; }
.tutorial-mesa-practica { position: relative; width: 100%; aspect-ratio: 400 / 320; overflow: hidden; margin-top: 15px; border-radius: 16px; background: repeating-linear-gradient(2deg, #ae774b12 0 2px, transparent 2px 9px), linear-gradient(135deg, var(--mesa-fondo), var(--panel-abajo)); border: 1px solid var(--mesa-borde); isolation: isolate; }
.tutorial-zona { position: absolute; border-radius: 12px; border: 1px solid var(--linea); box-shadow: inset 0 2px 9px var(--relieve-sombra); }
.tutorial-zona span { position: absolute; left: 10px; top: 10px; pointer-events: none; font: 600 clamp(10px, 1.1vw, 13px) Arial, sans-serif; }
.tutorial-zona-mesa { left: 3.75%; top: 5.625%; width: 92.5%; height: 55.3125%; color: var(--accion-verde-tinta); background: var(--accion-verde); }
.tutorial-cajon { left: 3.75%; top: 67.1875%; width: 41.25%; height: 28.125%; color: var(--tinta); background: linear-gradient(var(--panel-abajo), var(--panel-arriba)); }
.tutorial-cielo { left: 55%; top: 67.1875%; width: 41.25%; height: 28.125%; color: var(--accion-azul-tinta); background: var(--accion-azul); }
.tutorial-zona.objetivo-activo { outline: 2px solid var(--foco); outline-offset: -5px; }
.tutorial-objetivo { position: absolute; width: 16%; height: 20%; border: 2px dashed var(--foco); border-radius: 7px; background: var(--relieve-luz); animation: tutorial-respirar 2.2s ease-in-out infinite; }
.tutorial-pieza { position: absolute; width: 24%; height: 30%; padding: 0; border: 0; background: transparent; border-radius: 20%; cursor: grab; touch-action: none; transition: left .24s ease, top .24s ease, rotate .28s ease; transform-origin: center; z-index: 2; }
.tutorial-pieza:hover, .tutorial-pieza.seleccionada { z-index: 3; }
.tutorial-pieza:focus-visible { outline-offset: -8px; }
.tutorial-pieza canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.tutorial-pieza.seleccionada:not(.unida) canvas { filter: drop-shadow(0 0 3px var(--foco)); }
.tutorial-mesa-practica.arrastrando .tutorial-pieza { transition: none; cursor: grabbing; }
.tutorial-practico[data-paso="4"] .tutorial-pieza { cursor: default; }
.tutorial-acciones { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tutorial-feedback { min-height: 20px; margin: 12px 0 0; text-align: center; color: var(--accion-verde-tinta); font-size: .85rem; line-height: 1.45; }
.tutorial-teclado { margin: 8px 0 0; color: var(--suave); font-size: .72rem; line-height: 1.5; text-align: center; }
.tutorial-pie { margin-top: 18px; border-top: 1px solid var(--linea); padding-top: 15px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.tutorial-pie span { font-size: .7rem; color: var(--suave); line-height: 1.4; }
.tutorial-reiniciar { font-size: .72rem; }
@keyframes tutorial-respirar { 50% { opacity: .4; } }
@media (min-width: 720px) {
  .tutorial-practico[open] { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(0, 1fr); column-gap: 24px; row-gap: 12px; }
  .tutorial-cabecera, .tutorial-progreso, .tutorial-pie { grid-column: 1 / -1; }
  .tutorial-progreso { margin: 4px 0 8px; }
  .tutorial-instruccion { grid-column: 1; grid-row: 3; min-height: 0; }
  .tutorial-mesa-practica { grid-column: 2; grid-row: 3 / 7; align-self: start; margin: 0; }
  .tutorial-acciones { grid-column: 1; grid-row: 4; margin-top: 0; align-content: start; }
  .tutorial-acciones .tutorial-boton { width: 100%; }
  .tutorial-feedback { grid-column: 1; grid-row: 5; margin: 0; text-align: left; }
  .tutorial-teclado { grid-column: 1; grid-row: 6; margin: 0; text-align: left; }
  .tutorial-pie { margin-top: 0; }
}
@media (max-width: 520px) {
  .tutorial-practico { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 16px 12px; border-radius: 15px; }
  .tutorial-cabecera { gap: 8px; }
  .tutorial-cabecera h2 { font-size: 1.4rem; }
  .tutorial-descripcion { font-size: .76rem; }
  .tutorial-salir { padding: 9px 10px; max-width: 88px; font-size: .69rem; }
  .tutorial-progreso { gap: 3px; margin: 16px 0; }
  .tutorial-progreso li { gap: 4px; padding: 7px 1px; font-size: .62rem; }
  .tutorial-numero { width: 18px; height: 18px; font-size: .62rem; }
  .tutorial-instruccion { min-height: 89px; }
  .tutorial-instruccion h3 { font-size: 1.15rem; }
  .tutorial-instruccion p { font-size: .8rem; }
  .tutorial-mesa-practica { margin-top: 8px; }
  .tutorial-zona span { left: 7px; top: 6px; font-size: 10px; }
  .tutorial-boton { padding: 10px 12px; }
  .tutorial-acciones { gap: 8px; margin-top: 13px; }
  .tutorial-acciones .tutorial-boton { flex: 1 1 130px; font-size: .75rem; }
  .tutorial-pie { gap: 10px; margin-top: 12px; }
  .tutorial-pie span { font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) { .tutorial-practico *, .tutorial-practico *::before { animation: none !important; transition: none !important; } }
html[data-movimiento="no"] .tutorial-practico * { animation: none !important; transition: none !important; }

.copia-progreso { margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--linea); }
.copia-panel-dialogo { width: min(650px, calc(100vw - 28px)); max-width: calc(100vw - 28px); max-height: calc(100dvh - 28px); overflow-y: auto; }
.copia-panel-dialogo .copia-progreso { margin-top: 1rem; }
.copia-panel-dialogo .copia-progreso h3 { font-size: 1.2em; }
.copia-progreso h3 { margin: 0 0 .6rem; font-family: Georgia, serif; font-size: 1.4em; }
.copia-progreso p { max-width: 65ch; line-height: 1.6; }
.copia-acciones { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.copia-acciones .boton { min-height: 46px; white-space: normal; }
.copia-estado { font-size: .9em; color: inherit; opacity: .85; }
.copia-ultima { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid var(--linea); border-radius: 12px; }
.copia-ultima strong { display: block; font-size: .92em; }
.copia-ultima p { margin: .35rem 0 0; font-size: .88em; }
.copia-ultima-archivo { overflow-wrap: anywhere; }
.copia-conservar { margin-top: 1rem; font-size: .9em; }
.copia-conservar summary { cursor: pointer; min-height: 44px; display: list-item; padding-block: .6rem; }
.copia-conservar summary:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.copia-conservar p { margin-block: .5rem; }
.copia-dialogo { box-sizing: border-box; width: min(620px, calc(100vw - 28px)); max-width: calc(100vw - 28px); max-height: calc(100dvh - 28px); overflow-y: auto; color: var(--tinta); background: var(--panel-arriba); border: 1px solid var(--panel-borde); border-radius: 20px; padding: clamp(18px, 4vw, 30px); box-shadow: 0 20px 90px var(--mesa-sombra); }
.copia-dialogo::backdrop { background: var(--velo); }
.copia-dialogo [hidden] { display: none !important; }
.copia-cabecera h2 { font: 400 1.85em/1.15 Georgia, serif; margin: .4rem 0 1rem; }
.copia-cabecera .ceja { font-size: .73em; letter-spacing: .2em; font-weight: 700; color: var(--acento-fuerte); }
.copia-nombre { overflow-wrap: anywhere; font-size: .9em; }
.copia-resumen { border-block: 1px solid var(--linea); padding: .6rem 0; margin: 1rem 0; }
.copia-resumen > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .5rem 0; line-height: 1.4; }
.copia-resumen strong { text-align: right; }
.copia-decisiones label { display: grid; gap: .6rem; margin: 1.1rem 0; line-height: 1.5; }
.copia-decisiones select { width: 100%; min-width: 0; max-width: 100%; font: inherit; padding: .8rem .4rem; border: 1px solid var(--boton-borde); border-radius: 8px; background: var(--boton-fondo); color: var(--tinta); }
.copia-decisiones .copia-checkbox { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; }
.copia-checkbox input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: .15rem; accent-color: var(--acento-fuerte); }
.copia-decisiones p, .copia-mensaje { font-size: .93em; line-height: 1.6; }
.copia-mensaje { border-left: 3px solid var(--acento); padding-left: .85rem; }
.copia-dialogo :focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
@media (max-width: 420px) {
  .copia-dialogo .copia-acciones { flex-direction: column-reverse; }
  .copia-dialogo .copia-acciones .boton { width: 100%; }
  .copia-resumen > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; }
  .copia-resumen > div:first-child { grid-template-columns: 1fr; }
  .copia-resumen > div:first-child strong { text-align: left; }
}

.taller-personal{width:min(1500px,calc(100% - 24px));max-width:calc(100% - 24px);max-height:94dvh;overflow:auto;padding:28px;box-sizing:border-box}
.refugio-inventario{margin:20px 0;text-align:left}
.refugio-inventario-ayuda{color:var(--suave);font:14px/1.6 'Segoe UI',sans-serif;margin:0 0 12px}
.refugio-cajon,.refugio-ajustes{border:1px solid var(--linea);border-radius:12px;background:var(--boton-fondo);margin:10px 0;overflow:hidden}
.refugio-cajon>summary,.refugio-ajustes>summary{padding:17px 20px;cursor:pointer;color:var(--tinta);font:18px/1.3 Georgia,serif;list-style-position:inside}
.refugio-cajon>summary strong{margin-left:8px;font-weight:normal}
.refugio-cuenta{float:right;min-width:30px;text-align:center;border:1px solid var(--linea);border-radius:20px;font:13px/1.5 'Segoe UI',sans-serif;padding:2px 9px}
.refugio-inventario-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:14px;padding:6px 16px 18px;max-height:430px;overflow:auto;scrollbar-color:#b79858 transparent}
.refugio-tarjeta{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;padding:13px;background:var(--papel);border:1px solid var(--linea);border-radius:9px;text-align:center;cursor:grab}
.refugio-tarjeta>img{width:100%;height:105px;object-fit:contain;border-radius:5px;pointer-events:none}
.refugio-tarjeta>strong{font:17px/1.3 Georgia,serif;color:var(--tinta)}
.refugio-tarjeta>small{font:12px/1.5 'Segoe UI',sans-serif;color:var(--suave)}
.refugio-tarjeta>.boton{width:100%;margin-top:auto;min-height:44px;font:13px/1.4 'Segoe UI',sans-serif;white-space:normal}
.refugio-tarjeta>.refugio-vivo-arte{height:105px;width:110px}
#dialogo-taller .refugio-retirar{background:none!important;border:0!important;border-image:none!important;box-shadow:none!important;color:var(--suave);font:12px/1.4 'Segoe UI',sans-serif;text-decoration:underline;cursor:pointer;padding:5px;min-height:32px}
#dialogo-taller .refugio-retirar::before,#dialogo-taller .refugio-retirar::after{display:none!important}
.refugio-vacio{grid-column:1/-1;color:var(--suave);font:14px/1.6 'Segoe UI',sans-serif}
.refugio-ajustes>.taller-decoracion{padding:16px}
.refugio-ajustes .taller-colocacion{border:0;border-radius:0}
.refugio-vida{position:absolute;inset:0;pointer-events:none;z-index:5}
#dialogo-taller .refugio-vivo{position:absolute;width:12%;height:18%;padding:0!important;margin:0;min-width:0;min-height:0;border:0!important;border-image:none!important;border-radius:8px;background:none!important;box-shadow:none!important;filter:none;color:inherit;pointer-events:auto;touch-action:none;cursor:grab;user-select:none}
#dialogo-taller .refugio-vivo::before,#dialogo-taller .refugio-vivo::after{display:none!important}
#dialogo-taller .refugio-vivo[data-tipo="planta"]{width:10%;height:22%}
#dialogo-taller .refugio-vivo[data-tipo="floracion"]{width:9%;height:20%}
.refugio-vivo-arte{display:flex;width:100%;height:100%;align-items:flex-end;justify-content:center;pointer-events:none}
.refugio-vivo-arte>img,.refugio-vivo-arte .jardin-vivo,.refugio-vivo-arte .jardin-vivo>img,.refugio-vivo-arte .jardin-vivo>svg{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;pointer-events:none}
.refugio-vivo-arte>.miga-sprite{width:auto;height:100%;aspect-ratio:1;max-width:100%;background-size:400% 300%;image-rendering:auto}
.taller-personal[data-movimiento="no"] .refugio-vivo .miga-sprite,.taller-personal:not([open]) .refugio-vivo .miga-sprite{animation-play-state:paused}
#dialogo-taller .refugio-vivo.taller-arrastrando{z-index:8;cursor:grabbing;filter:drop-shadow(0 9px 8px #0008)}
.refugio-recibiendo{outline:3px solid #edcf86;outline-offset:-5px}
#dialogo-taller .taller-hueco{background:#f5ecc10c!important;border:1px dashed #eddcb977!important;border-image:none!important;box-shadow:none!important;color:#fff1d1}
#dialogo-taller .taller-hueco::before,#dialogo-taller .taller-hueco::after{display:none!important}
@media(max-width:760px){.refugio-inventario-lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:4px 9px 12px;max-height:360px}.refugio-cajon>summary,.refugio-ajustes>summary{padding:15px 11px;font-size:16px}.refugio-tarjeta{padding:9px}.refugio-tarjeta>strong{font-size:15px}.refugio-inventario-ayuda{font-size:13px}}
.taller-personal [hidden],.taller-visor [hidden]{display:none!important}
.taller-acciones{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:20px}
.taller-modos{display:flex;gap:8px}
.taller-modos [aria-pressed="true"]{outline:2px solid #e1bd6c;outline-offset:3px}
.taller-acciones .boton{min-height:48px}
.taller-preview-aviso{padding:12px 16px;border:1px solid var(--linea);border-radius:10px;background:var(--boton-fondo);color:var(--tinta);font:14px/1.6 'Segoe UI',sans-serif;text-align:left}
.taller-personal[data-modo="visitar"] .taller-cuadro{cursor:zoom-in;touch-action:pan-x pan-y;transition:filter .18s ease}
.taller-personal[data-modo="visitar"] .taller-cuadro:hover{filter:brightness(1.08)}
.taller-personal[data-modo="visitar"] .taller-adorno{cursor:default;touch-action:pan-x pan-y}
.taller-personal[data-modo="visitar"] .taller-habitacion [data-seleccionado]{outline:none}
.taller-personal[data-modo="visitar"] .taller-habitacion button:focus-visible{outline:3px solid #fff4c5;outline-offset:7px}
.taller-personal .taller-cuadro[data-muestra="true"]{opacity:1;cursor:default;filter:none}
.taller-mesa{position:absolute;left:26%;top:67%;width:54%;height:31%;pointer-events:none}
.taller-cuadro[data-marco="marco-ambar"]{border-color:#dc9b48}
.taller-cuadro[data-marco="marco-lunar"]{border-color:#c8d5e1}
.taller-cuadro[data-marco="marco-orbita"]{border:0;padding:0;background:#091c23;box-shadow:none}
.taller-cuadro .taller-marco-arte{position:absolute;left:-18.05%;top:-26.59%;width:136.1%;height:153.61%;max-width:none;object-fit:fill;pointer-events:none}
.taller-orion{position:absolute;left:2%;top:65%;width:12%;height:20%;border:0;background:none;padding:0;z-index:3;cursor:pointer;transform-origin:50% 90%;animation:orion-refugio-respira 5.6s ease-in-out infinite}
.taller-orion img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
@keyframes orion-refugio-respira{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(.6deg)}}
.taller-personal[data-movimiento="no"] .taller-orion{animation:none}
.taller-visor{width:min(1250px,calc(100% - 24px));max-width:calc(100% - 24px);max-height:95dvh;overflow:auto;padding:28px;box-sizing:border-box;text-align:left}
.taller-visor h2{font:32px Georgia,serif;margin:4px 55px 12px 0}
.taller-visor-datos,.taller-visor-descripcion,.taller-visor-estado{font:14px/1.6 'Segoe UI',sans-serif;color:var(--suave)}
.taller-visor-lienzo{display:flex;align-items:center;justify-content:center;min-height:200px;height:min(61dvh,750px);background:#0b1b20;border:1px solid var(--linea);border-radius:8px;padding:12px;box-sizing:border-box}
.taller-visor-lienzo img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.taller-visor-acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.taller-visor-acciones button{min-height:48px}
@media(prefers-reduced-motion:reduce){.taller-personal .taller-orion,.taller-personal .taller-caricia{animation:none!important}.taller-personal .taller-cuadro{transition:none!important}}
@media(max-width:760px){.taller-acciones{align-items:stretch;gap:10px}.taller-modos{width:100%}.taller-modos button{flex:1}.taller-acciones>.boton{flex:1}.taller-visor{padding:22px 12px;width:calc(100% - 12px);max-width:calc(100% - 12px)}.taller-visor h2{font-size:25px}.taller-visor-lienzo{height:55dvh;padding:6px}.taller-visor-acciones{display:grid;grid-template-columns:1fr}.taller-visor-datos{font-size:13px}.taller-preview-aviso{font-size:13px}}
.taller-personal header{display:flex;justify-content:space-between;align-items:center;gap:24px;text-align:left;padding-right:30px}
.taller-personal h2{font:38px Georgia,serif;margin:5px 0 8px}
.taller-personal header p{margin:8px 0;font-size:14px}
.taller-resumen{flex:0 0 auto;border:1px solid var(--linea);border-radius:30px;padding:11px 16px;font:14px 'Segoe UI',sans-serif;color:var(--verde);background:var(--boton-fondo)}
.taller-salas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0 14px}
.taller-salas button{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;min-height:65px;padding:13px 17px;border:1px solid var(--linea);border-radius:10px;background:var(--boton-fondo);color:var(--tinta);cursor:pointer}
.taller-salas button strong{font:19px Georgia,serif}
.taller-salas button span{font:12px 'Segoe UI',sans-serif;color:var(--suave);white-space:nowrap}
.taller-salas button[aria-pressed="true"]{border-color:var(--verde);background:var(--verde);color:var(--papel);box-shadow:inset 0 -3px 0 #0002}
.taller-salas button[aria-pressed="true"] span{color:inherit;opacity:.85}
.taller-vista-cabecera{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:10px 0 12px;text-align:left}
#taller-descripcion{margin:0;font:italic 15px/1.5 Georgia,serif;color:var(--suave)}
.taller-luz{display:flex;align-items:center;gap:10px;flex:0 0 auto;font:12px 'Segoe UI',sans-serif}
.taller-ventana{max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;border-radius:11px;background:#102b30;box-shadow:0 5px 20px #06161925;scrollbar-color:#bd944c #102b30;scrollbar-width:thin}
.taller-habitacion{position:relative;isolation:isolate;aspect-ratio:1672/941;min-width:760px;overflow:hidden;background:#102b30}
.taller-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:-3;pointer-events:none;user-select:none}
.taller-habitacion::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;background:#ffb3410c;mix-blend-mode:screen}
.taller-habitacion[data-luz="luna"]::after{background:#437aca30;mix-blend-mode:color}
.taller-habitacion[data-luz="luna"] .taller-fondo{filter:brightness(.78) saturate(.8)}
.taller-habitacion[data-luz="atardecer"]::after{background:#f28b3d2b;mix-blend-mode:soft-light}
.taller-cuadro,.taller-hueco{position:absolute;width:12%;height:23%;border-radius:1px;box-sizing:border-box;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.taller-cuadro{background:#091c23;border:4px ridge #aa7d39;padding:2px;box-shadow:0 5px 8px #0008}
.taller-cuadro img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.taller-cuadro[data-especial="true"]{border-color:#efc969;box-shadow:0 0 0 2px #fde5a5,0 5px 10px #0008}
.taller-hueco{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;border:1px dashed #eddcb955;padding:4px;background:#f5ecc107;color:#e8dbc5b0;font:12px 'Segoe UI',sans-serif;box-shadow:none}
.taller-hueco span:first-child{font-size:30px;font-weight:200;line-height:1}
.taller-hueco:hover{background:#f5ecc118;color:#fff2da;border-color:#eddcb9a0}
.taller-habitacion [data-elemento][data-seleccionado="true"]{outline:2px solid #ffda83;outline-offset:5px}
.taller-habitacion [data-elemento]:focus-visible{outline:3px solid #fff4c5;outline-offset:5px}
.taller-habitacion .taller-arrastrando{z-index:5;cursor:grabbing;filter:drop-shadow(0 10px 9px #0008)}
.taller-objeto-arte{display:block;background-repeat:no-repeat;background-size:300% 100%}
.taller-objeto-nuevo{display:block;background:none}
.taller-objeto-nuevo img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.taller-adorno{position:absolute;width:9%;height:12%;display:block;background:none;border:0;border-radius:6px;padding:0;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.taller-adorno .taller-objeto-arte,.taller-adorno .taller-objeto-nuevo{width:100%;height:100%;pointer-events:none}
.taller-miga{position:absolute;left:2%;top:69%;width:10%;height:15%;background-size:400% 300%;z-index:3}
.taller-bruma{position:absolute;left:2%;top:65%;width:12%;height:20%;border:0;background:none;padding:0;z-index:3;cursor:pointer}
.taller-bruma img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.taller-miga[hidden],.taller-bruma[hidden]{display:none}
.taller-caricia{animation:taller-bruma-caricia .7s ease-in-out}
@keyframes taller-bruma-caricia{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-7px) rotate(-4deg)}65%{transform:translateY(-3px) rotate(4deg)}}
.taller-ayuda{font:12px/1.6 'Segoe UI',sans-serif;color:var(--suave);text-align:left;margin:12px 0 15px}
.taller-colocacion{display:grid;grid-template-columns:minmax(190px,1fr) 100px 100px auto auto;gap:12px;align-items:end;text-align:left;padding:15px;border:1px solid var(--linea);border-radius:10px;background:var(--boton-fondo)}
.taller-colocacion label,.taller-elegir-cuadros label,.taller-destino{display:flex;flex-direction:column;gap:7px;font:12px 'Segoe UI',sans-serif;min-width:0}
.taller-personal select,.taller-colocacion input{padding:10px;min-height:42px;width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--linea);border-radius:7px;background:var(--papel);color:var(--tinta);font:14px 'Segoe UI',sans-serif}
.taller-luz select{width:155px}
.taller-direcciones{display:flex;gap:4px}
.taller-direcciones button{min-height:42px;min-width:40px;background:var(--papel);color:var(--tinta);border:1px solid var(--linea);border-radius:6px;cursor:pointer;font-size:19px}
.taller-colocacion .taller-restaurar{min-height:42px;padding:8px 12px;font-size:12px}
.taller-personal button:focus-visible,.taller-personal select:focus-visible,.taller-personal input:focus-visible,.taller-personal summary:focus-visible,.taller-ventana:focus-visible{outline:3px solid var(--verde);outline-offset:3px}
.taller-decoracion{padding-top:22px;text-align:left}
.taller-seccion-titulo{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:14px}
.taller-seccion-titulo h3{font:24px Georgia,serif;margin:0}
.taller-seccion-titulo p{font:12px/1.5 'Segoe UI',sans-serif;color:var(--suave);margin:0}
.taller-elegir-cuadros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:25px;align-items:start}
.taller-elegir-cuadros details{border:1px solid var(--linea);border-radius:9px;padding:0 15px 12px;background:var(--boton-fondo);min-width:0}
.taller-elegir-cuadros summary{padding:16px 0 6px;cursor:pointer;font:17px Georgia,serif;color:var(--tinta)}
.taller-elegir-cuadros label{margin-top:13px}
.taller-tesoros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.taller-tesoro{display:flex;align-items:flex-start;gap:13px;background:var(--boton-fondo);border:1px solid var(--linea);padding:16px 12px;border-radius:9px;min-width:0}
.taller-tesoro>.taller-objeto-arte,.taller-tesoro>.taller-objeto-nuevo{width:64px;height:78px;flex:0 0 64px;margin-top:4px}
.taller-tesoro-texto{min-width:0;flex:1}
.taller-tesoro strong,.taller-tesoro small{display:block}
.taller-tesoro strong{font:17px Georgia,serif;margin-bottom:7px}
.taller-tesoro small{font:12px/1.5 'Segoe UI',sans-serif;color:var(--suave);min-height:36px}
.taller-mostrar-objeto{display:flex;align-items:center;gap:7px;font:12px 'Segoe UI',sans-serif;margin:10px 0 13px}
.taller-mostrar-objeto input{width:19px;height:19px;margin:0;flex:0 0 auto;accent-color:var(--verde)}
.taller-tesoro[data-disponible="false"]>.taller-objeto-arte,.taller-tesoro[data-disponible="false"]>.taller-objeto-nuevo{filter:grayscale(1);opacity:.55}
.taller-personal select:disabled{opacity:.65;cursor:not-allowed}
#taller-estado{font:13px/1.6 'Segoe UI',sans-serif;color:var(--suave);margin:18px 0 0;text-align:left}
#coleccion-refugio{margin:10px 0 18px}
@media(min-width:1100px){.taller-elegir-cuadros details:not([open]){padding-bottom:12px}}
@media(max-width:1100px){.taller-colocacion{grid-template-columns:minmax(140px,1fr) 85px 85px}.taller-direcciones{grid-column:1/2}.taller-restaurar{grid-column:2/4}.taller-salas button{flex-direction:column;align-items:flex-start;gap:6px}.taller-tesoros{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.taller-personal{padding:22px 12px;width:calc(100% - 12px);max-width:calc(100% - 12px);max-height:96dvh}.taller-personal h2{font-size:29px}.taller-personal header{display:block;padding-right:25px}.taller-personal header p{font-size:13px}.taller-resumen{display:inline-block;margin-top:5px;font-size:12px;padding:7px 11px}.taller-salas{gap:6px;margin-top:18px}.taller-salas button{padding:11px 9px;min-height:76px}.taller-salas button strong{font-size:15px}.taller-salas button span{font-size:11px}.taller-vista-cabecera{display:block}.taller-luz{margin-top:10px;justify-content:space-between}.taller-luz select{width:175px}.taller-elegir-cuadros,.taller-tesoros{grid-template-columns:1fr}.taller-cuadro{border-width:4px;padding:3px}.taller-colocacion{padding:11px;gap:10px;grid-template-columns:1fr 1fr}.taller-colocacion>label:first-child{grid-column:1/-1}.taller-colocacion .taller-direcciones{grid-column:1/-1;justify-content:center}.taller-direcciones button{flex:1}.taller-colocacion .taller-restaurar{grid-column:1/-1}.taller-seccion-titulo{display:block}.taller-seccion-titulo h3{font-size:23px;margin-bottom:7px}.taller-personal select,.taller-colocacion input{font-size:16px}.taller-tesoro>.taller-objeto-arte,.taller-tesoro>.taller-objeto-nuevo{width:70px;height:82px;flex-basis:70px}.taller-ayuda{font-size:11px}.taller-hueco{font-size:11px}}
@media(prefers-reduced-motion:reduce){.taller-caricia{animation:none}}
@media(max-width:360px){.taller-salas button strong{font-size:13px}.taller-salas button[data-sala="observatorio"] strong{font-size:12px;letter-spacing:-.2px}.taller-salas button{padding:11px 7px}}

/* El bazar comparte el verde profundo y el latón de la biblioteca. */
.portada-bolsillo{position:absolute;z-index:6;right:clamp(16px,3vw,48px);top:22px;display:flex;gap:10px;align-items:center;padding:10px 18px 10px 9px;border:1px solid #bba366;border-radius:40px;background:#102e31eb;color:#fff2c9;box-shadow:0 5px 20px #0006;cursor:pointer;transition:scale .2s,background .2s;min-height:60px}
.portada-bolsillo:hover{scale:1.04;background:#214648}.portada-bolsillo img{width:44px;height:44px;object-fit:contain}.portada-bolsillo span{display:grid;text-align:left;gap:2px}.portada-bolsillo strong{font:700 23px Georgia,serif}.portada-bolsillo small{font-size:12px}
.coleccion-extras{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 28px}.coleccion-extras .boton{display:flex;align-items:center;gap:10px}.coleccion-tienda img{width:32px;height:32px;object-fit:contain}
.tienda-dialogo{width:min(1260px,calc(100vw - 40px));max-height:92dvh;padding:40px;color:#f1e7cb;background:radial-gradient(ellipse at 10% 0,#284c43 0,transparent 50%),#112b27;border:1px solid #aa9156;border-radius:22px;box-shadow:0 30px 120px #000b}
.tienda-dialogo .ceja{font-size:11px;letter-spacing:.2em;color:#d2b778}.tienda-dialogo h2{margin:8px 0 12px;font:clamp(28px,4vw,46px) Georgia,serif}.tienda-dialogo p{line-height:1.6;color:#cbc5ae}.tienda-cabecera{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-right:40px}.tienda-monedero{display:flex;align-items:center;gap:10px;flex-shrink:0;padding:14px 22px;border:1px solid #ad955863;border-radius:14px;background:#081e1f66}.tienda-monedero img{width:70px;height:70px;object-fit:contain}.tienda-monedero span{display:grid;gap:5px}.tienda-monedero strong{font:38px Georgia,serif;color:#ffdc83}.tienda-monedero small{color:#d6c694}
.tienda-reglas{border-block:1px solid #a18a484a;padding:14px 0;margin:22px 0 18px}.tienda-reglas summary{cursor:pointer;color:#e6c982;min-height:30px;align-content:center}.tienda-reglas p{font-size:14px;max-width:95ch}.tienda-filtros{display:flex;flex-wrap:wrap;gap:8px}.tienda-filtro{padding:10px 17px;border-radius:24px;border:1px solid #71836b;background:#162f2d;color:#eee3c1;cursor:pointer;min-height:44px}.tienda-filtro[aria-pressed=true]{background:#dbc388;border-color:#ffe2a7;color:#152a26;font-weight:700}
#tienda-estado{min-height:26px;margin:14px 0;font-size:14px;color:#f6d98f}.tienda-contenido{display:flex;gap:24px;align-items:flex-start}.tienda-catalogo{flex:1;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.tienda-contenido:has(.tienda-detalle:not([hidden])) .tienda-catalogo{grid-template-columns:repeat(2,minmax(0,1fr))}
.tienda-articulo{min-width:0}.tienda-ver{width:100%;height:100%;padding:0;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;text-align:left;border-radius:14px;border:1px solid #a18e5366;background:#193731;color:#f6eacc;transition:border-color .2s,box-shadow .2s}.tienda-ver:hover{border-color:#edce79;box-shadow:0 6px 24px #0005}.tienda-arte{display:grid;place-items:center;position:relative;width:100%;height:162px;background:radial-gradient(ellipse at 50% 90%,#69705255,transparent 70%),#092321;overflow:hidden;isolation:isolate}.tienda-arte img{display:block;width:85%;height:90%;object-fit:contain;filter:drop-shadow(0 6px 4px #0005)}.tienda-arte-mesa img{width:100%;height:100%;object-fit:cover}.tienda-arte-mesa:after{content:"";position:absolute;inset:12px;border:1px solid #d3b46a90;box-shadow:0 0 0 3px #172b2e;pointer-events:none}.tienda-articulo-texto{padding:15px;display:grid;gap:8px;flex:1}.tienda-articulo-texto small{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#bdb69b}.tienda-articulo-texto strong{font:20px Georgia,serif}.tienda-precio{font-size:13px;color:#f1d084}.tienda-marco{display:block;width:70%;height:73%;padding:8px;background:linear-gradient(125deg,#f4ca61,#835125 22%,#ffd589 30%,#875823 50%,#ca9c47);border:3px ridge #edbc6e;box-shadow:0 5px 10px #0008}.tienda-marco[data-marco=marco-lunar]{background:linear-gradient(135deg,#e3edf0,#576e89 24%,#bdd9ed 32%,#52718d 65%,#c6ddef);border-color:#b1d0e6}.tienda-marco img{width:100%;height:100%;object-fit:cover;filter:none}
.tienda-detalle{flex:0 0 340px;background:#091f20;border:1px solid #b49b6166;padding:24px;border-radius:16px;position:sticky;top:0;min-width:0}.tienda-detalle h3{font:28px Georgia,serif;color:#f6e8c3;margin:8px 0 16px}.tienda-detalle .tienda-arte{height:225px;background:radial-gradient(ellipse at center,#42584488,transparent 70%)}.tienda-detalle .tienda-arte-mesa{display:none}.tienda-detalle p{font-size:14px}.tienda-mesa-previa{height:200px;margin:15px 0;display:grid;place-items:center;background-size:cover;border:1px solid #a69465;border-radius:10px}.tienda-mesa-previa img{height:68%;width:63%;object-fit:cover;border:7px solid #c9b37b;box-shadow:4px 8px 12px #0009}.tienda-comprar{width:100%;min-height:56px!important;margin-top:10px}.tienda-nota{font-size:12px!important}.tienda-pie{display:flex;align-items:center;flex-wrap:wrap;gap:16px;border-top:1px solid #a18a484a;padding-top:22px;margin-top:28px}.tienda-pie>span{font-size:12px;color:#bdbba6;margin-left:auto}
.recompensa-fichas{display:flex;align-items:center;gap:18px;padding:20px;margin:22px 0;border:1px solid #a78642;border-radius:16px;background:#23392a}.recompensa-fichas>img{width:64px;height:64px;object-fit:contain}.recompensa-fichas>div{flex:1}.recompensa-fichas strong{font:24px Georgia,serif;color:#f9d47e}.recompensa-fichas p{font-size:14px;line-height:1.5;margin:8px 0;color:#e1dbc0}
.bruma-companera{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:auto;pointer-events:none;filter:drop-shadow(0 4px 3px #0007)}.companero-miga[data-companero=bruma]{width:90px;height:105px}.companero-miga[data-companero=bruma] .miga-tapete{bottom:2px}.companero-miga[data-companero=bruma][data-activo=true] .bruma-companera{animation:bruma-respira 4.8s ease-in-out infinite;transform-origin:50% 95%}.companero-miga[data-companero=bruma][data-ahorro=true] .bruma-companera{animation:none}@keyframes bruma-respira{0%,100%{transform:scale(1)}50%{transform:scale(1.012,1.025)}}
@media(max-width:1000px){.tienda-catalogo{grid-template-columns:repeat(3,minmax(0,1fr))}.tienda-detalle{flex-basis:300px}.tienda-dialogo{padding:30px}}
@media(max-width:720px){.portada-bolsillo{top:12px;right:12px;min-height:48px;padding:7px 12px 7px 5px}.portada-bolsillo img{width:34px;height:34px}.portada-bolsillo strong{font-size:18px}.portada-bolsillo small{font-size:10px}.tienda-dialogo{width:calc(100vw - 16px);padding:24px 16px;max-height:96dvh}.tienda-cabecera{display:block;padding-right:45px}.tienda-monedero{margin-top:20px;width:fit-content;padding:8px 15px}.tienda-monedero img{width:44px;height:44px}.tienda-monedero strong{font-size:27px}.tienda-contenido{flex-direction:column}.tienda-catalogo{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:10px}.tienda-detalle{flex:auto;width:100%;position:static;box-sizing:border-box}.tienda-arte{height:132px}.tienda-articulo-texto{padding:12px}.tienda-articulo-texto strong{font-size:18px}.tienda-pie>span{width:100%;margin:0}.recompensa-fichas{flex-wrap:wrap;padding:15px}.recompensa-fichas>div{min-width:160px}.recompensa-fichas>.boton{width:100%}}
html[data-movimiento=no] .portada-bolsillo{transition:none;scale:1!important}html[data-movimiento=no] .bruma-companera{animation:none!important}
@media(prefers-reduced-motion:reduce){.portada-bolsillo{transition:none;scale:1!important}.bruma-companera{animation:none!important}}
.tienda-dialogo [hidden],.recompensa-fichas[hidden],.companero-miga [hidden]{display:none!important}
.companero-miga[data-companero=bruma]{width:72px;height:82px}
body.concentracion .pie-mesa:has(.companero-miga[data-companero=bruma]:not([hidden])){padding-left:92px}
.miga-retrato [hidden]{display:none!important}.bruma-retrato{width:100%;height:100%;object-fit:contain}
.medalla-victoria [hidden]{display:none!important}.victoria-bruma{width:68px;height:68px;object-fit:contain;margin:auto}
.tienda-arte-rompecabezas img{width:100%;height:100%;object-fit:contain;border-radius:8px}
/* Biblioteca astral: una colección editorial, sin compra de lote ni cobros nuevos. */
.tienda-coleccion{display:grid;grid-template-columns:minmax(170px,.72fr) minmax(0,1.6fr);gap:clamp(18px,3vw,36px);align-items:center;position:relative;overflow:hidden;padding:25px 34px;margin:24px 0;border:1px solid #c9a76a99;border-radius:18px;background:radial-gradient(ellipse at 12% 36%,#79719b4d,transparent 46%),linear-gradient(125deg,#172b41,#101f32 58%,#172e35);box-shadow:inset 0 0 50px #06132177,0 9px 24px #0002}
.tienda-coleccion:after{content:"";position:absolute;inset:10px;border:1px solid #c9a76a26;border-radius:11px;pointer-events:none}.tienda-coleccion-arte{display:grid;place-items:center;min-width:0;height:225px}.tienda-coleccion-arte img{max-width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 16px #0008)}.tienda-coleccion-texto{position:relative;z-index:1}.tienda-coleccion h3{font:clamp(28px,3.5vw,40px) Georgia,serif;color:#f9e7b8;margin:6px 0 10px}.tienda-coleccion p{margin:0 0 12px;max-width:52ch}.tienda-coleccion .ceja{font-size:10px;color:#d9bd80}.tienda-coleccion .boton{margin-top:12px;min-height:48px}.tienda-coleccion-texto>small{display:block;color:#c7c2b1;font-size:12px;line-height:1.6;margin-top:10px}.tienda-coleccion-progreso{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px;color:#f3d993}.tienda-coleccion progress{width:110px;height:7px;accent-color:#e2c582;border:0;border-radius:6px;background:#061426}.tienda-coleccion progress::-webkit-progress-bar{background:#061426;border-radius:6px}.tienda-coleccion progress::-webkit-progress-value{background:linear-gradient(90deg,#aa824d,#f4dda2);border-radius:6px}.tienda-coleccion[data-completa=true]{border-color:#efcf86}
.tienda-filtro[data-filtro=biblioteca-astral]{border-color:#b59a64}.tienda-arte-marco:has(>img){background:radial-gradient(ellipse at center,#34415a88,transparent 73%),#0d2530}.tienda-probar{width:100%;min-height:48px!important;margin-top:12px}.tienda-prueba-nota{display:block;text-align:center;font-size:12px;line-height:1.5;color:#c2c3b6;margin:8px 0 6px}.tienda-probar:focus-visible,.tienda-coleccion .boton:focus-visible{outline:3px solid #bde8f4;outline-offset:4px}
@media(max-width:720px){.tienda-coleccion{padding:22px 18px;grid-template-columns:100px minmax(0,1fr);gap:16px}.tienda-coleccion-arte{height:170px}.tienda-coleccion h3{font-size:27px}.tienda-coleccion p:not(.ceja){font-size:13px}.tienda-coleccion .ceja{font-size:9px;letter-spacing:.12em}.tienda-coleccion .boton{width:100%}}
@media(max-width:440px){.tienda-coleccion{grid-template-columns:minmax(0,1fr)}.tienda-coleccion-arte{height:135px}.tienda-coleccion-texto{text-align:center}.tienda-coleccion-progreso{justify-content:center}.tienda-coleccion .ceja{margin-top:0}}


/* Los hijos de grid no deben imponer su tamaño intrínseco al área de arte. */
.tienda-arte,.tienda-coleccion-arte,.tienda-mesa-previa{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:0}
.tienda-arte img,.tienda-coleccion-arte img,.tienda-mesa-previa img{min-width:0;min-height:0;max-width:100%;max-height:100%}
.tienda-coleccion-arte img{width:100%}

/* La tienda queda frente al selector de idioma, sin ocupar su esquina. */
@media(max-width:700px){.portada-bolsillo{left:auto;right:12px;top:12px;min-height:44px;padding:5px 9px 5px 4px}.portada-bolsillo img{width:30px;height:30px}}
@media(max-width:560px){
  .portada-bolsillo{max-width:calc(100% - 180px);gap:6px}
  .portada-bolsillo img{flex:0 0 28px;width:28px;height:28px}
  .portada-bolsillo span{min-width:0}
  .portada-bolsillo strong{overflow-wrap:anywhere}
  .portada-bolsillo small{line-height:1.3}
}

/* El catálogo combina categoría y disponibilidad sin perder el contexto del rincón. */
.tienda-disponibilidad{display:flex;flex-wrap:wrap;gap:7px;padding:14px 0 0;margin-top:8px;border-top:1px solid #d7c28c33}
.tienda-disponibilidad .tienda-filtro{border-radius:8px;font-size:13px;padding:8px 13px}
.tienda-recuento{font-size:12px;margin:12px 0 0;color:#bdc8b7!important}
.tienda-dialogo button:focus-visible,.tienda-dialogo input:focus-visible{outline:3px solid #bde8f4;outline-offset:4px}
.tienda-dialogo button:disabled{cursor:default;opacity:.57}
.tienda-ver[aria-pressed=true]{border-color:#ffe0a0;box-shadow:0 0 0 2px #ffe0a044}
.tienda-articulo-texto .tienda-deseado{color:#ffe19e;letter-spacing:0;text-transform:none;font-size:11px}
.tienda-vacia{grid-column:1/-1;padding:28px 20px;text-align:center;border:1px dashed #bca77288;border-radius:14px;background:#102b27}
.tienda-vacia h3{font:23px Georgia,serif}.tienda-vacia .boton{min-height:44px}
.tienda-colecciones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0}
.tienda-coleccion-resumen{min-width:0;display:flex;flex-direction:column;padding:18px;border:1px solid #bda36e70;border-radius:14px;background:linear-gradient(135deg,#263b36,#102b2a)}
.tienda-coleccion-resumen:nth-child(2){background:linear-gradient(135deg,#2f3c4d,#152e36)}
.tienda-coleccion-resumen h3{font:23px Georgia,serif;color:#ffe7b6;margin:0 0 8px}
.tienda-coleccion-resumen p{font-size:12px;line-height:1.5;margin:0 0 13px;flex:1}
.tienda-coleccion-resumen progress,.tienda-objetivo progress{width:100%;height:7px;accent-color:#dfc68b;border:0;border-radius:8px;background:#061b1c}
.tienda-coleccion-resumen progress::-webkit-progress-bar,.tienda-objetivo progress::-webkit-progress-bar{background:#061b1c;border-radius:8px}
.tienda-coleccion-resumen progress::-webkit-progress-value,.tienda-objetivo progress::-webkit-progress-value{background:linear-gradient(90deg,#bd9554,#f8df9d);border-radius:8px}
.tienda-coleccion-resumen .boton{padding:10px;margin-top:10px;min-height:44px;font-size:12px;line-height:1.4}
.tienda-coleccion-resumen[data-completa=true]{border-color:#f2d996}
.tienda-objetivo{display:grid;grid-template-columns:82px minmax(0,1fr) auto;gap:12px 20px;align-items:center;padding:16px 20px;border:1px solid #cfb16b;border-radius:14px;background:linear-gradient(115deg,#324536,#122d28);margin:18px 0}
.tienda-objetivo>.tienda-arte{height:90px;border-radius:10px;grid-row:1/3}.tienda-objetivo-texto{grid-column:2;grid-row:1/3;min-width:0}
.tienda-objetivo .ceja{margin:0 0 4px}.tienda-objetivo h3{font:23px Georgia,serif;margin:0 0 9px}.tienda-objetivo-texto>p:last-child{font-size:12px;margin:7px 0 0}
.tienda-objetivo>.boton{min-height:44px;grid-column:3}.tienda-quitar-objetivo{grid-column:3;background:none;border:0;color:#d6cbae;text-decoration:underline;cursor:pointer;font:12px inherit;min-height:35px}
.tienda-marcar-objetivo{width:100%;margin-top:4px;min-height:44px;font-size:13px}
.tienda-marcar-objetivo[aria-pressed=true]{border-color:#dac283;color:#ffe2a0}
.recompensa-objetivo{padding-top:10px;border-top:1px solid #d5be7255;color:#ffe2a0!important;font-size:13px!important}
.tienda-arte>.miga-sprite{width:112px;height:112px;animation:none}.tienda-arte>.jardin-vivo{display:block;width:105px;height:145px}.tienda-arte>.jardin-vivo svg{display:block;width:100%;height:100%}
.tienda-arte-jardin img{width:88%;height:95%}.tienda-detalle .tienda-prueba-nota{margin-top:12px}
.tienda-rincon-previo{height:206px;position:relative;isolation:isolate;overflow:hidden;border:1px solid #ac925e;border-radius:12px;background:linear-gradient(0deg,#2b3829 0 18%,#142f3b 18%);margin:18px 0 16px}
.tienda-rincon-previo::after{content:'';position:absolute;left:0;right:0;bottom:24px;height:6px;border-block:1px solid #ac925e66;background:linear-gradient(#766043,#352b23);z-index:1}
.tienda-rincon-fondo{position:absolute;inset:0;width:100%;height:calc(100% - 27px);object-fit:cover;object-position:center}
.tienda-rincon-previo>.tienda-rincon-asiento{position:absolute;left:5%;bottom:16px;width:47%;height:100px;object-fit:contain;object-position:bottom;z-index:2;filter:drop-shadow(0 4px 3px #0006)}
.tienda-rincon-mascota{position:absolute;left:10%;bottom:53px;width:36%;height:104px;z-index:3;display:grid;place-items:end center;transform-origin:50% 96%;animation:tienda-companero-respira 5.4s ease-in-out infinite;animation-play-state:paused}
.tienda-rincon-mascota>img{display:block;width:100%;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 3px 3px #0006)}
.tienda-rincon-mascota>.miga-sprite{width:99px;height:99px;max-width:100%;animation-play-state:paused}
.tienda-rincon-jardin{display:block;position:absolute;right:8%;bottom:27px;width:29%;height:143px;z-index:3;transform-origin:50% 94%;animation:tienda-jardin-brisa 10s ease-in-out infinite;animation-play-state:paused}
.tienda-rincon-jardin>.jardin-vivo,.tienda-rincon-jardin svg,.tienda-rincon-jardin img{display:block;width:100%;height:100%;object-fit:contain;object-position:bottom}
.tienda-dialogo[data-animar-previa=true] .tienda-rincon-mascota,.tienda-dialogo[data-animar-previa=true] .tienda-rincon-jardin,.tienda-dialogo[data-animar-previa=true] .tienda-rincon-mascota>.miga-sprite{animation-play-state:running}
.tienda-dialogo[data-animar-previa=false] :is(.tienda-rincon-mascota,.tienda-rincon-jardin,.jardin-copa,.miga-sprite){animation-play-state:paused!important}
.tienda-etapa-etiqueta{display:block;color:#e3d9bc;font-size:12px;line-height:1.5;margin-bottom:3px}
.tienda-etapa{display:block;box-sizing:border-box;width:100%;min-height:40px;margin:0;accent-color:#d8bd7d;cursor:pointer}
.tienda-etapa-pasos{display:flex;justify-content:space-between;color:#bbc6b8;font-size:10px;margin-top:-3px}
.tienda-etapa-salida{display:block;font-size:12px;color:#f1d796;margin:10px 0;text-align:center}
@keyframes tienda-companero-respira{0%,100%{transform:scale(1)}50%{transform:scale(1.012,1.02)}}
@keyframes tienda-jardin-brisa{0%,100%{transform:rotate(-.4deg)}50%{transform:rotate(.6deg)}}
@media(max-width:1000px){.tienda-colecciones{grid-template-columns:repeat(2,minmax(0,1fr))}.tienda-coleccion-resumen h3{font-size:21px}.tienda-objetivo{padding:15px;gap:12px}}
@media(max-width:720px){
  .tienda-colecciones{grid-template-columns:1fr;gap:9px;margin:18px 0}
  .tienda-coleccion-resumen{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;padding:14px}
  .tienda-coleccion-resumen h3{font-size:20px;margin:0}.tienda-coleccion-resumen p{grid-column:1/-1;font-size:12px;margin:5px 0;order:3}
  .tienda-coleccion-resumen progress{grid-column:1/-1;order:4;margin-top:6px}.tienda-coleccion-resumen .boton{margin:0;grid-column:2;grid-row:1;font-size:11px;max-width:145px}
  .tienda-objetivo{grid-template-columns:62px minmax(0,1fr);gap:10px 13px}.tienda-objetivo>.tienda-arte{height:78px;grid-row:1}.tienda-objetivo-texto{grid-row:1}.tienda-objetivo h3{font-size:21px}.tienda-objetivo>.boton{grid-column:1/-1}.tienda-quitar-objetivo{grid-column:1/-1}
  .tienda-filtro{font-size:12px;padding:9px 13px}.tienda-disponibilidad{gap:6px}.tienda-disponibilidad .tienda-filtro{flex:1 0 calc(50% - 6px);padding:8px;font-size:12px}
  .tienda-arte>.miga-sprite{width:94px;height:94px}.tienda-arte>.jardin-vivo{width:83px;height:118px}
  .tienda-detalle{padding:19px}.tienda-rincon-previo{max-width:430px;margin-inline:auto}
  .tienda-recuento{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.tienda-dialogo :is(.tienda-rincon-mascota,.tienda-rincon-jardin,.miga-sprite,.jardin-copa){animation:none!important}}
html[data-movimiento=no] .tienda-dialogo :is(.tienda-rincon-mascota,.tienda-rincon-jardin,.miga-sprite,.jardin-copa){animation:none!important}
@media(forced-colors:active){.tienda-ver[aria-pressed=true],.tienda-filtro[aria-pressed=true]{outline:2px solid Highlight}.tienda-objetivo,.tienda-coleccion-resumen,.tienda-rincon-previo{border-color:CanvasText}}


.tienda-colecciones-desplegable{border:1px solid #bda36e70;border-radius:12px;margin:18px 0;background:#14302b}
.tienda-colecciones-desplegable>summary{padding:14px 18px;color:#ead49d;cursor:pointer;font-size:14px;min-height:44px;box-sizing:border-box}
.tienda-colecciones-desplegable>summary:focus-visible{outline:3px solid #bde8f4;outline-offset:3px}
.tienda-colecciones-desplegable .tienda-colecciones{margin:0;padding:0 14px 14px;grid-template-columns:repeat(4,minmax(0,1fr))}
.tienda-volver{background:none;color:#d9c993;font-size:12px;min-height:35px;border:0;padding:0 5px 0 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media(max-width:1000px){.tienda-colecciones-desplegable .tienda-colecciones{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.tienda-colecciones-desplegable .tienda-colecciones{grid-template-columns:1fr}.tienda-contenido>.tienda-detalle{order:-1}}

/* Vitrinas vivas: las bases conservan su apoyo al cambiar de pose o crecer. */
.tienda-vistas-controles{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 18px;margin-top:12px}
.tienda-vistas-controles .tienda-recuento{margin:0}
.tienda-pausar-vistas,.tienda-repetir-crecimiento{min-height:40px;border:1px solid #bda36e70;border-radius:20px;background:#183b34;color:#efdcaa;padding:8px 15px;font:inherit;font-size:12px;cursor:pointer}
.tienda-pausar-vistas:hover,.tienda-repetir-crecimiento:hover{background:#294d40;border-color:#e7c77e}
.tienda-repetir-crecimiento{display:block;margin:8px auto 16px}
.tienda-vista-viva{display:block;position:relative;width:100%;height:100%;transform-origin:50% 94%;pointer-events:none}
.tienda-arte>.tienda-vista-viva{width:min(88%,180px);height:90%;align-self:end;margin-bottom:8px}
.tienda-vista-viva>.miga-sprite{width:auto;height:100%;aspect-ratio:1;margin:auto;image-rendering:auto}
.tienda-dialogo .tienda-vista-viva>img,.tienda-dialogo .tienda-vista-viva .companero-coleccion-pose{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 4px 3px #0004)}
.tienda-dialogo .tienda-rincon-mascota,.tienda-dialogo .tienda-rincon-jardin{animation:none}
.tienda-rincon-mascota>.tienda-vista-viva{position:absolute;inset:0}
.tienda-crecimiento-capa{position:absolute;inset:0;display:block;opacity:0;transition:opacity 800ms ease-in-out}
.tienda-crecimiento-capa[data-visible=true]{opacity:1}
.tienda-dialogo .tienda-crecimiento-capa :is(.jardin-vivo,img,svg){display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.tienda-vista-viva[data-suave=false] .tienda-crecimiento-capa{transition:none}
.tienda-vista-viva[data-tipo=mascota]{animation:tienda-respiracion-viva 5.8s ease-in-out infinite}
.tienda-vista-viva[data-articulo=mascota-orion]{animation:tienda-orion-curioso 9s ease-in-out infinite}
.tienda-vista-viva[data-articulo=mascota-musgo]{animation-duration:8s}
.tienda-dialogo .tienda-vista-viva[data-activa=false],.tienda-dialogo .tienda-vista-viva[data-activa=false] *{animation-play-state:paused!important;transition:none!important}
.tienda-vista-viva[data-activa=true] .miga-sprite{animation-play-state:running}
@keyframes tienda-respiracion-viva{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1px) scale(1.008,1.018)}}
@keyframes tienda-orion-curioso{0%,35%,100%{transform:rotate(0) scale(1)}48%,62%{transform:rotate(-2deg) scale(1.008,1.02)}78%{transform:rotate(1deg) scale(1)}}
html[data-movimiento=no] .tienda-vista-viva,html[data-movimiento=no] .tienda-vista-viva *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.tienda-vista-viva,.tienda-vista-viva *{animation:none!important;transition:none!important}}
@media(forced-colors:active){.tienda-pausar-vistas,.tienda-repetir-crecimiento{border-color:ButtonText}}


/* Acabados comprados: solo selector y materiales del juego; no certificados. */
.muestra-mesa-bruma {
  background: radial-gradient(ellipse at 30% 20%, #466f6022, transparent 70%), #173b37;
  --muestra-canto: #a88e55; --muestra-fieltro: #21534e; --muestra-tabla: #214a43;
}
.muestra-mesa-astral {
  background: radial-gradient(ellipse at 70% 20%, #bba57414, transparent 60%), #1b2b41;
  --muestra-canto: #a88e55; --muestra-fieltro: #283c57; --muestra-tabla: #243650;
}
.muestra-mesa-bruma .muestra-mesa { background: linear-gradient(120deg, #1c4640, #2e6056 48%, #214a43); }
.muestra-mesa-astral .muestra-mesa { background: radial-gradient(circle at 35% 25%, #a9975c 0 1px, transparent 1.5px), radial-gradient(circle at 77% 66%, #839daf 0 1px, transparent 1.5px), #243650; }
.muestra-mesa-bruma .muestra-marco, .muestra-mesa-astral .muestra-marco { border-color: #a88e55; background-color: #31483b; }
.muestra-mesa-bruma .muestra-cajon { background: #334c3e; border-color: #a38e5a; }
.muestra-mesa-astral .muestra-cajon { background: #344254; border-color: #a38e5a; }
.muestra-mesa-bruma .muestra-sol, .muestra-mesa-astral .muestra-sol { color: #d8c490; }
.tarjeta-estilo[data-estilo="mesa-bruma"] .estilo-materiales i:nth-child(1) { background: #23514a; }
.tarjeta-estilo[data-estilo="mesa-bruma"] .estilo-materiales i:nth-child(2) { background: #597b65; }
.tarjeta-estilo[data-estilo="mesa-bruma"] .estilo-materiales i:nth-child(3) { background: #b4a06c; }
.tarjeta-estilo[data-estilo="mesa-astral"] .estilo-materiales i:nth-child(1) { background: #263b57; }
.tarjeta-estilo[data-estilo="mesa-astral"] .estilo-materiales i:nth-child(2) { background: #74889f; }
.tarjeta-estilo[data-estilo="mesa-astral"] .estilo-materiales i:nth-child(3) { background: #b5a675; }
.opcion-marco[data-marco="marco-ambar"] .muestra-marco-opcion { border-color: #b57330; box-shadow: inset 0 0 0 1px #f1c576, 0 0 0 1px #65421f; }
.opcion-marco[data-marco="marco-lunar"] .muestra-marco-opcion { border-color: #8099ae; box-shadow: inset 0 0 0 1px #dbe7ee, 0 0 0 1px #405164; }
/* La mesa cambia la apariencia, nunca la partida ni la geometría. */
:root[data-estilo="mesa-biblioteca-astral"]{--papel:#142638;--blanco:#203647;--tinta:#f1e6c9;--suave:#c5c1ae;--acento:#d0ad6a;--acento-fuerte:#ead194;--linea:#7c7254;--boton-fondo:#182e40ec;--boton-hover:#2a4357;--panel-arriba:#233a4c;--panel-abajo:#172b3c;--panel-borde:#ad925c;--pie-fondo:#152a3a;--progreso-fondo:#0d2030;--ambiente-luz:#b4965920;--ambiente-sombra:#030a18aa}
.muestra-mesa-biblioteca-astral{background:radial-gradient(ellipse at 60% 18%,#d6bb6f21,transparent 65%),#182a3e;--muestra-canto:#c8a55f;--muestra-fieltro:#1d374c;--muestra-tabla:#243b52}.muestra-mesa-biblioteca-astral .muestra-mesa{background:radial-gradient(circle at 29% 27%,#d6bd75 0 1px,transparent 2px),radial-gradient(circle at 68% 59%,#c4ab6a 0 1px,transparent 2px),linear-gradient(130deg,#1c3446,#2b4257)}.muestra-mesa-biblioteca-astral .muestra-marco{border-color:#bea16b;background-color:#1d3246;outline:1px solid #ddc186;outline-offset:2px}.muestra-mesa-biblioteca-astral .muestra-cajon{background:#293b48;border-color:#b3955c}.muestra-mesa-biblioteca-astral .muestra-sol{color:#f4d58e}.tarjeta-estilo[data-estilo="mesa-biblioteca-astral"] .estilo-materiales i:nth-child(1){background:#203951}.tarjeta-estilo[data-estilo="mesa-biblioteca-astral"] .estilo-materiales i:nth-child(2){background:#455e77}.tarjeta-estilo[data-estilo="mesa-biblioteca-astral"] .estilo-materiales i:nth-child(3){background:#c9ac6b}
.opcion-marco[data-marco="marco-orbita"] .muestra-marco-opcion{border-color:#b99850;box-shadow:inset 0 0 0 1px #fff0bc,0 0 0 2px #24334a,0 0 0 3px #b9985066;background:radial-gradient(ellipse at center,transparent 27%,#e1c783 29% 30%,transparent 33%),#193246}


.panel-viajes{width:min(1160px,calc(100% - 24px));max-width:calc(100% - 24px);max-height:94dvh;overflow:auto;padding:28px;box-sizing:border-box;text-align:left}
.panel-viajes header{padding-right:28px}
.panel-viajes h2{font:38px Georgia,serif;margin:5px 0 12px}
.panel-viajes header>p:last-child{max-width:730px;font:14px/1.7 'Segoe UI',sans-serif;color:var(--suave);margin:0}
.viajes-rutas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}
.viaje-ruta{display:flex;align-items:stretch;min-height:110px;padding:0;border:1px solid var(--linea);border-radius:10px;overflow:hidden;text-align:left;background:var(--boton-fondo);color:var(--tinta);cursor:pointer;min-width:0}
.viaje-ruta>img{width:105px;flex:0 0 105px;object-fit:cover;min-height:110px}
.viaje-ruta-texto{display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0;padding:15px}
.viaje-ruta-texto small{font:10px/1.4 'Segoe UI',sans-serif;text-transform:uppercase;letter-spacing:.8px;color:var(--suave)}
.viaje-ruta-texto strong{font:19px/1.25 Georgia,serif}
.viaje-ruta-cuenta{font:11px/1.4 'Segoe UI',sans-serif;color:var(--suave)}
.viaje-ruta[aria-pressed="true"]{border:2px solid var(--verde);box-shadow:0 0 0 1px var(--verde)}
.viaje-ruta:hover{filter:brightness(1.08)}
.viajes-detalle{border-top:1px solid var(--linea);padding-top:24px}
.viaje-escenario{margin:24px 0 0;border:1px solid #a88a514d;border-radius:14px;overflow:hidden;background:#112b2a;box-shadow:0 12px 30px #09130e22}
.viaje-escenario-lienzo{position:relative;aspect-ratio:1000/563;overflow:hidden;isolation:isolate;background:#112429}
.viaje-escenario-fondo,.viaje-escenario-lienzo>svg{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.viaje-escenario-fondo{filter:brightness(var(--claridad-escena,.43)) saturate(var(--color-escena,.5))}
.viaje-escenario-lienzo>svg{filter:brightness(var(--claridad-objetos,.8062))}
.viaje-escenario-lienzo::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 43%,transparent 35%,#050e173d 100%);box-shadow:inset 0 0 22px #030e2340}
.viaje-escenario[data-tema="nilo"] .viaje-escenario-lienzo::after{background:linear-gradient(120deg,#b4801c12,transparent 50%,#bc852017);mix-blend-mode:screen}
.viaje-escenario[data-tema="jardin"] .viaje-escenario-lienzo::after{background:linear-gradient(120deg,#36654011,transparent 50%,#ddd48815);mix-blend-mode:screen}
.viaje-escenario figcaption{position:relative;padding:20px 25px;background:linear-gradient(130deg,#193c38,#102927);border-top:1px solid #a58c5545;color:#f1e5c5}
.viaje-escenario figcaption strong{display:block;font:24px/1.3 Georgia,serif;color:#f8e8bd}
.viaje-escenario figcaption p{margin:9px 0 0;font:15px/1.65 Georgia,serif}
.viaje-escenario figcaption .viaje-escenario-explicacion{font:12px/1.65 'Segoe UI',sans-serif;color:#c9c7ad}
.viaje-escenario[data-estado="completo"]{border-color:#c9aa65;box-shadow:0 10px 30px #8d74331c}
.viaje-escenario[data-tema="gabinete"] .viaje-detalle-restaurado,.viaje-escenario[data-tema="postales"] .viaje-detalle-restaurado,.viaje-escenario[data-tema="jardin"] [data-detalle]{filter:drop-shadow(0 3px 2px #0005)}
.viaje-escenario-brillo{opacity:.8;animation:viaje-respirar-luz 7s ease-in-out infinite;animation-play-state:paused}
.viaje-escenario[data-animado="true"] .viaje-escenario-brillo{animation-play-state:running}
@keyframes viaje-respirar-luz{0%,100%{opacity:.55}50%{opacity:.95}}
html[data-movimiento="no"] .viaje-escenario-brillo{animation:none!important}
@media(prefers-reduced-motion:reduce){.viaje-escenario-brillo{animation:none!important}}
@media(max-width:640px){.viaje-escenario{margin-top:20px;border-radius:10px}.viaje-escenario figcaption{padding:16px}.viaje-escenario figcaption strong{font-size:21px}.viaje-escenario figcaption p{font-size:14px}.viaje-escenario figcaption .viaje-escenario-explicacion{font-size:12px}}
.viaje-cabecera{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:30px;align-items:center}
.viaje-introduccion h3{font:32px/1.2 Georgia,serif;margin:8px 0}
.viaje-ambiental{font:11px/1.5 'Segoe UI',sans-serif;color:var(--suave);margin:0 0 15px}
.viaje-relato{font:16px/1.75 Georgia,serif;margin:12px 0 18px}
.viaje-progreso{display:block;width:100%;height:9px;accent-color:var(--verde);border:0;border-radius:20px;overflow:hidden;background:var(--boton-fondo)}
.viaje-progreso::-webkit-progress-bar{background:var(--boton-fondo);border-radius:20px}.viaje-progreso::-webkit-progress-value{background:var(--verde);border-radius:20px}.viaje-progreso::-moz-progress-bar{background:var(--verde);border-radius:20px}
.viaje-progreso-texto{font:12px 'Segoe UI',sans-serif;color:var(--suave);margin:9px 0 0}
.viaje-siguiente{position:relative;min-width:0;min-height:265px;border:1px solid var(--linea);padding:0;border-radius:12px;overflow:hidden;text-align:left;background:#13291f;color:#fff8e5;cursor:pointer}
.viaje-siguiente>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.viaje-siguiente::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#071f18f5,transparent 95%)}
.viaje-siguiente-texto{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;min-height:265px;padding:25px;box-sizing:border-box}
.viaje-siguiente-texto small{font:11px 'Segoe UI',sans-serif;text-transform:uppercase;letter-spacing:1.5px}
.viaje-siguiente-texto strong{font:28px/1.2 Georgia,serif}
.viaje-siguiente-texto>span{font:12px/1.5 'Segoe UI',sans-serif}
.viaje-sellos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;margin:25px 0;padding:0}
.viaje-sello{display:flex;flex-direction:column;align-items:flex-start;padding:19px;border:1px dashed var(--linea);border-radius:10px;background:var(--boton-fondo)}
.viaje-sello-icono{display:grid;place-items:center;width:50px;height:50px;border:1px solid var(--linea);outline:1px solid var(--linea);outline-offset:4px;border-radius:50%;margin:4px 0 17px;color:var(--suave);font:30px Georgia,serif;opacity:.65}
.viaje-sello[data-conseguido="true"]{border-style:solid}
.viaje-sello[data-conseguido="true"] .viaje-sello-icono{color:var(--tinta);border-color:#ba9356;outline-color:#ba9356;opacity:1;background:#bb94571c}
.viaje-sello-meta{font:10px/1.4 'Segoe UI',sans-serif;color:var(--suave);text-transform:uppercase;letter-spacing:.3px}
.viaje-sello h4{font:18px/1.3 Georgia,serif;margin:7px 0 10px}
.viaje-sello p{font:13px/1.65 Georgia,serif;margin:0;color:var(--suave)}
.viaje-obras-titulo{font:23px Georgia,serif;margin:25px 0 16px}
.viaje-obras{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}
.viaje-obra{display:flex;flex-direction:column;min-width:0;padding:0;border:1px solid var(--linea);border-radius:8px;overflow:hidden;background:var(--boton-fondo);color:var(--tinta);text-align:left;cursor:pointer}
.viaje-obra>img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.viaje-obra-texto{display:flex;flex-direction:column;gap:7px;padding:12px}
.viaje-obra-texto small{font:10px/1.4 'Segoe UI',sans-serif;color:var(--suave)}
.viaje-obra-texto strong{font:15px/1.4 Georgia,serif}
.viaje-obra[data-completada="true"] .viaje-obra-texto small{color:var(--verde)}
.viajes-pie{display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid var(--linea);padding-top:20px;margin-top:25px}
.viajes-pie p{max-width:700px;font:12px/1.65 'Segoe UI',sans-serif;color:var(--suave);margin:0}
.viajes-volver{white-space:nowrap;min-height:44px}
.viajes-estado{font:12px/1.6 'Segoe UI',sans-serif;color:var(--suave);margin:12px 0 0}
.panel-viajes button:focus-visible{outline:3px solid var(--verde);outline-offset:3px}
.viaje-siguiente:focus-visible{outline-color:#e8c181}
@media(max-width:950px){.viaje-ruta>img{width:80px;flex-basis:80px}.viaje-ruta-texto{padding:12px}.viaje-ruta-texto strong{font-size:17px}.viaje-cabecera{gap:20px}.viaje-introduccion h3{font-size:27px}.viaje-siguiente-texto strong{font-size:23px}.viaje-obras{grid-template-columns:repeat(3,minmax(0,1fr))}.viaje-sello{padding:15px}}
@media(max-width:640px){.panel-viajes{padding:23px 13px;max-width:calc(100% - 12px);width:calc(100% - 12px);max-height:96dvh}.panel-viajes h2{font-size:29px}.panel-viajes header>p:last-child{font-size:13px}.viajes-rutas{grid-template-columns:1fr;gap:9px;margin:20px 0}.viaje-ruta{min-height:90px}.viaje-ruta>img{width:82px;flex-basis:82px;min-height:90px}.viaje-ruta-texto{gap:5px}.viaje-ruta-texto strong{font-size:17px}.viaje-cabecera{grid-template-columns:1fr}.viaje-introduccion h3{font-size:27px}.viaje-relato{font-size:15px;line-height:1.65}.viaje-siguiente,.viaje-siguiente-texto{min-height:225px}.viaje-siguiente-texto{padding:20px}.viaje-sellos{grid-template-columns:1fr;gap:10px;margin:20px 0}.viaje-sello{flex-direction:row;gap:20px;padding:17px;align-items:flex-start}.viaje-sello-icono{flex:0 0 42px;width:42px;height:42px;font-size:26px;margin:6px 0}.viaje-sello h4{font-size:17px}.viaje-sello p{font-size:13px}.viaje-obras{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.viaje-obra-texto{padding:10px}.viaje-obra-texto strong{font-size:14px}.viajes-pie{flex-direction:column;align-items:stretch;gap:16px}.viajes-volver{white-space:normal}}

/* La moneda siempre se nombra «fichas»; los selectores siguen usando «piezas». */
.premio-fichas-preparacion,.premio-fichas-compacto,.previa-premio-fichas {
  display:flex;align-items:center;gap:8px;border:1px solid #a88b4c;border-radius:9px;
  background:linear-gradient(135deg,#283d2e,#192d25);color:#f2dfae;text-align:left;cursor:pointer;
  font:inherit;box-shadow:inset 0 1px 0 #f1d78916;min-width:0;
}
.premio-fichas-preparacion { width:100%;padding:9px 10px;margin-top:9px; }
.premio-fichas-preparacion img,.premio-fichas-compacto img,.previa-premio-fichas img { width:28px;height:28px;object-fit:contain;flex:0 0 auto; }
.premio-fichas-preparacion strong,.premio-fichas-compacto strong,.previa-premio-fichas strong { display:block;font-size:12px;line-height:1.35;font-variant-numeric:tabular-nums; }
.premio-fichas-preparacion small,.premio-fichas-compacto small,.previa-premio-fichas small { display:block;font-size:10px;line-height:1.4;color:#d6caab;margin-top:2px; }
.controles-compactos .premio-fichas-compacto {
  flex:0 1 215px;padding:6px 9px;min-height:48px;max-width:215px;box-sizing:border-box;
}
.premio-fichas-compacto > span { min-width:0;overflow-wrap:anywhere; }
.premio-fichas-compacto img { width:23px;height:23px; }
.premio-fichas-compacto strong { font-size:11px; }
.premio-fichas-compacto small { font-size:9px; }
.premio-fichas-preparacion:focus-visible,.premio-fichas-compacto:focus-visible,.previa-premio-fichas:focus-visible { outline:3px solid var(--foco,#f1cd83);outline-offset:3px; }
.premio-fichas-dialogo { width:min(590px,calc(100vw - 24px));max-height:calc(100dvh - 28px);box-sizing:border-box;overflow:auto;padding:24px; }
.premio-fichas-dialogo h2 { margin:7px 32px 9px 0; }
.premio-fichas-contexto,.premio-fichas-nota { font-size:12px;color:var(--suave);line-height:1.5; }
.premio-fichas-desglose { margin:17px 0; }
.premio-fichas-desglose > div { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:8px 0;border-bottom:1px solid var(--linea);font-size:13px; }
.premio-fichas-desglose dt { margin:0; }
.premio-fichas-desglose dd { margin:0;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap; }
.premio-fichas-desglose .premio-fichas-total,.premio-fichas-desglose .premio-fichas-nuevas { color:var(--acento-fuerte);font-weight:700; }
.premio-fichas-motivo { padding:10px 12px;background:var(--boton-fondo);border-radius:8px;font-size:12px;line-height:1.5; }
.premio-fichas-dialogo details { margin:12px 0;border-top:1px solid var(--linea);padding-top:10px; }
.premio-fichas-dialogo summary { cursor:pointer;font-weight:650;font-size:13px; }
.premio-fichas-dialogo details p { font-size:12px;line-height:1.6; }
.premio-fichas-escala table { width:100%;border-collapse:collapse;margin-top:8px;font-size:12px; }
.premio-fichas-escala caption { text-align:left;color:var(--suave);padding:5px 0;font-size:11px; }
.premio-fichas-escala :is(th,td) { padding:8px 5px;text-align:right;border-bottom:1px solid var(--linea);font-variant-numeric:tabular-nums; }
.premio-fichas-escala :is(th,td):first-child { text-align:left; }
.previa-premio-fichas { padding:9px 11px;margin:10px 0 12px;width:100%; }
.previa-premio-fichas span { min-width:0; }
/* El coste se mantiene visible en móvil, donde el tema ocultaba todos los small. */
body.concentracion .ayudas-botones :is(#boton-imagen,#boton-pista,#boton-guia,#boton-colocar) small { display:block;white-space:normal;line-height:1.2;font-size:9px; }
@media(max-width:850px) {
  .controles-compactos .premio-fichas-compacto {
    grid-column:1 / -1;flex:1 1 100%;justify-content:center;max-width:none;width:100%;min-height:44px;padding:5px 8px;
  }
  .premio-fichas-compacto > span { display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; }
  .premio-fichas-compacto small { margin:0; }
}
@media(max-width:420px) {
  .premio-fichas-dialogo { padding:20px 14px; }
  .premio-fichas-desglose > div { font-size:12px;gap:8px; }
  .premio-fichas-escala table { font-size:10px; }
  .premio-fichas-escala :is(th,td) { padding:7px 3px; }
  body.concentracion .ayudas-botones :is(#boton-imagen,#boton-pista,#boton-guia,#boton-colocar) small { font-size:8px; }
}

/* Orión: movimiento contenido, pausado fuera de la partida y respetuoso con preferencias. */
.orion-companero { width:100%; height:100%; object-fit:contain; display:block; transform-origin:50% 88%; filter:drop-shadow(0 5px 5px #06171d66); }
.orion-companero[hidden] { display:none; }
.companero-miga[data-companero="orion"][data-activo="true"][data-ahorro="false"] .orion-companero { animation:orion-respira 4.8s ease-in-out infinite; }
.companero-miga[data-companero="orion"][data-activo="true"]:is([data-reaccion="curiosidad"],[data-reaccion="celebracion"]) .orion-companero { animation:orion-saluda 1.6s ease-in-out; }
@keyframes orion-respira { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-3px) rotate(1deg); } }
@keyframes orion-saluda { 0%,100% { transform:rotate(0); } 25% { transform:translateY(-3px) rotate(-5deg); } 65% { transform:translateY(-2px) rotate(4deg); } }
@media (prefers-reduced-motion:reduce) { .orion-companero { animation:none!important; } }
.companero-miga[data-companero="orion"] { width:72px; height:82px; }
.companero-miga[data-companero="orion"] .miga-tapete { left:13px; bottom:1px; }
.orion-companero { position:absolute; inset:0; pointer-events:none; }
body.concentracion .pie-mesa:has(.companero-miga[data-companero="orion"]:not([hidden])) { padding-left:92px; }
html[data-movimiento="no"] .orion-companero { animation:none!important; }

.dialogo-controles { width:min(860px,94vw); padding:clamp(24px,4vw,48px); }
.controles-modo { display:grid; gap:12px; margin:24px 0 8px; }
.controles-modo select { width:100%; min-height:48px; }
.dialogo-controles h3 { margin-top:28px; }
.controles-atajos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 22px; margin-top:18px; }
.controles-atajo { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--borde); padding:8px 0; }
.controles-atajo > span { min-width:0; font-size:.88rem; }
.controles-atajo button { min-height:46px; min-width:126px; max-width:58%; white-space:normal; font-size:.83rem; padding:10px 14px; }
.controles-atajo button[aria-pressed="true"] { --accion-marco:var(--accion-practica); }
.controles-estado { min-height:3em; color:var(--texto); margin-top:22px; }
.controles-reservados,#ayuda-modo-recoger { color:var(--suave); font-size:.85rem; line-height:1.6; }
#boton-rehacer > .icono-deshacer { transform:scaleX(-1); }
@media(max-width:640px) {
  .controles-atajos { grid-template-columns:minmax(0,1fr); }
  .dialogo-controles .acciones { display:flex; flex-wrap:wrap; gap:12px; }
}

/* Pieles raster originales. El marco se escala por nueve zonas y las etiquetas
   siguen siendo texto real: legibles, traducibles y accesibles con teclado. */
dialog[open] :is(.boton, .tutorial-boton),
#boton-concentracion, #volver-portada {
  box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; max-width:100%; padding:7px 12px;
  border:10px solid transparent; border-radius:14px;
  border-image-source:url('../recursos/botones-dialogos/navegacion.webp');
  border-image-slice:36 68 fill; border-image-width:12px; border-image-repeat:stretch;
  background:#173d41; color:#fff7e4;
  font-family:Arial,sans-serif; font-weight:700; font-size:13px; line-height:1.35;
  text-shadow:0 1px 2px #071b27;
  box-shadow:0 3px 5px #23180930;
  text-decoration:none; cursor:pointer;
  transition:filter .14s ease, translate .14s ease, box-shadow .14s ease;
}
dialog[open] :is(.boton, .tutorial-boton):hover:not(:disabled),
#boton-concentracion:hover:not(:disabled), #volver-portada:hover:not(:disabled) {
  background:#173d41; color:#fff7e4; border-color:transparent;
  filter:brightness(1.12); translate:0 -1px;
  box-shadow:0 5px 10px #23180940;
}
dialog[open] :is(.boton, .tutorial-boton):active:not(:disabled),
#boton-concentracion:active:not(:disabled), #volver-portada:active:not(:disabled) {
  translate:0 1px; transform:none; filter:brightness(.95);
  box-shadow:0 1px 3px #23180940;
}
dialog[open] :is(.boton, .tutorial-boton):focus-visible,
#boton-concentracion:focus-visible, #volver-portada:focus-visible,
dialog[open] .cerrar:focus-visible {
  outline:3px solid #146d91; outline-offset:3px;
  box-shadow:0 0 0 6px #fff6dc, 0 5px 12px #13283860;
}
dialog[open] :is(.boton, .tutorial-boton):disabled,
#boton-concentracion:disabled, #volver-portada:disabled {
  cursor:default; filter:grayscale(.8); opacity:.52;
  translate:none; box-shadow:none;
}
dialog[open] :is(.principal, .tutorial-principal, [data-copia-exportar], [data-ajuste="sonido"], [data-ajuste="lectura"]) {
  border-image-source:url('../recursos/botones-dialogos/principal.webp');
}
dialog[open] :is(.tutorial-girar-izquierda, .tutorial-girar-derecha, [data-ajuste="visual"], [data-ajuste="refugio"]) {
  border-image-source:url('../recursos/botones-dialogos/practica.webp');
}
dialog[open] :is(#confirmar-reinicio, #confirmar-borrar-progreso, #confirmar-colocar, #reiniciar-completado, .tutorial-reiniciar) {
  border-image-source:url('../recursos/botones-dialogos/reiniciar.webp');
}
dialog[open] .tutorial-salir {
  border-image-source:url('../recursos/botones-dialogos/navegacion.webp');
}
dialog[open] .boton[aria-pressed="true"] {
  outline:2px solid #f1c675; outline-offset:-5px;
}

/* Símbolos del atlas: volver, jugar, reiniciar / unir, cerrar, descargar. */
[data-arte-icono]::before {
  content:""; display:block; flex:0 0 30px; width:30px; height:30px;
  background-image:url('../recursos/botones-dialogos/iconos.webp');
  background-size:300% 200%; background-position:0 0; background-repeat:no-repeat;
  pointer-events:none;
}
[data-arte-icono="jugar"]::before { background-position:50% 0; }
[data-arte-icono="reiniciar"]::before { background-position:100% 0; }
[data-arte-icono="unir"]::before { background-position:0 100%; }
[data-arte-icono="cerrar"]::before { background-position:50% 100%; }
[data-arte-icono="descargar"]::before { background-position:100% 100%; }
[data-arte-icono^="girar-"]::before {
  background-image:url('../assets/interfaz/iconos-controles.png');
  background-size:300% 200%; background-position:0 0;
}
[data-arte-icono="girar-derecha"]::before { background-position:50% 0; }

/* La salida de la partida se reconoce antes que los ajustes secundarios. */
#boton-concentracion {
  min-width:178px; min-height:55px; flex:0 0 auto;
  padding:4px 9px; gap:8px; text-align:left; white-space:normal;
}
#boton-concentracion::before { width:34px; height:34px; flex-basis:34px; }
#boton-concentracion .volver-etiqueta { display:block; }
#boton-concentracion strong { display:block; font-size:13px; line-height:1.3; }
#boton-concentracion small { display:block; margin-top:3px; color:#f7e5be; font-size:10px; font-weight:400; }
#volver-portada { min-height:48px; }

/* Cerrar tiene un blanco de toque de 44 px y su propio icono de latón rojo. */
dialog[open] .cerrar {
  display:grid; place-items:center; width:44px; height:44px; min-height:44px;
  padding:5px; right:10px; top:10px; z-index:3;
  border:1px solid #9d643d; border-radius:12px;
  background:linear-gradient(#693b30,#49291f); color:transparent; font-size:0;
  box-shadow:inset 0 0 0 2px #c49a6755,0 3px 7px #29191035;
  cursor:pointer;
}
dialog[open] .cerrar::before {
  content:""; width:32px; height:32px;
  background-image:url('../recursos/botones-dialogos/iconos.webp');
  background-size:300% 200%; background-position:50% 100%; background-repeat:no-repeat;
  pointer-events:none;
}
dialog[open] .cerrar:hover { filter:brightness(1.2); }
dialog[open]:has(> .cerrar) { padding-top:55px; }
dialog[open]:has(> .cerrar) > :is(h2,header) { padding-right:16px; }
dialog[open] .sonido-salto { min-width:48px; padding:0; font-size:25px; }

/* En el tutorial, acciones, giro y salida ya no comparten el color del papel. */
dialog[open] .tutorial-boton { white-space:normal; }
dialog[open] .tutorial-salir { flex:0 0 auto; max-width:174px; font-size:12px; }
dialog[open] .tutorial-reiniciar { font-size:12px; }
.tutorial-cabecera { align-items:center; }
.tutorial-pie > span { flex:1; }
dialog[open] .opciones-inicio-lista .boton {
  align-items:flex-start; flex-direction:column; text-align:left;
  gap:4px; padding:10px 20px; font-size:16px;
}
dialog[open] .opciones-inicio-lista .boton span {
  color:#fff0d1; font-size:13px; font-weight:400; text-shadow:0 1px 2px #071b27;
}

@media(max-width:700px) {
  #boton-concentracion { min-width:164px; min-height:48px; padding:2px 7px; gap:6px; }
  #boton-concentracion::before { width:28px; height:28px; flex-basis:28px; }
  #boton-concentracion strong { font-size:12px; }
  #boton-concentracion small { display:none; }
  dialog[open] :is(.boton,.tutorial-boton) { min-height:48px; padding:6px 10px; font-size:12px; }
  dialog[open] .acciones .boton { flex:1 1 160px; white-space:normal; }
  dialog[open] .tutorial-cabecera { flex-wrap:wrap; gap:12px; }
  dialog[open] .tutorial-cabecera > div { flex:1 1 220px; }
  dialog[open] .tutorial-salir { margin-left:auto; max-width:none; }
  dialog[open] .tutorial-pie { flex-wrap:wrap; }
  dialog[open] .tutorial-pie > span { flex-basis:100%; }
}
@media(prefers-reduced-motion:reduce) {
  dialog[open] :is(.boton,.tutorial-boton), #boton-concentracion, #volver-portada { transition:none; }
}
html[data-movimiento="no"] dialog :is(.boton,.tutorial-boton),
html[data-movimiento="no"] :is(#boton-concentracion,#volver-portada) { transition:none; }
@media(forced-colors:active) {
  dialog[open] :is(.boton,.tutorial-boton,.cerrar), #boton-concentracion, #volver-portada {
    border-image:none; border:2px solid ButtonText; background:ButtonFace; color:ButtonText;
    text-shadow:none; filter:none; box-shadow:none;
  }
  dialog[open] .cerrar { font-size:28px; }
  dialog[open] .cerrar::before { display:none; }
}

/* Arte propio por acción; las etiquetas siguen siendo texto accesible. */
.boton.boton-utilidad {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:7px; flex:0 0 auto; min-height:52px; max-width:100%; padding:3px 8px;
  border:9px solid transparent; border-radius:12px;
  border-image-source:url('../recursos/botones-dialogos/navegacion.webp');
  border-image-slice:36 68 fill; border-image-width:10px; border-image-repeat:stretch;
  background:#173d41; color:#fff7e4; font:700 12px/1.25 Arial,sans-serif;
  white-space:nowrap; text-shadow:0 1px 3px #071b27;
  box-shadow:0 3px 6px #071b2740;
  transition:filter .16s ease,transform .16s ease,box-shadow .16s ease;
}
.boton.boton-utilidad::before {
  content:""; display:block; flex:0 0 30px; width:30px; height:30px;
  background-position:center; background-repeat:no-repeat; background-size:contain;
  filter:drop-shadow(0 2px 2px #071b2790); pointer-events:none;
}
.boton.boton-utilidad > span { font-size:inherit; }
.boton-utilidad #icono-sonido,.boton-utilidad #icono-estilo,
.boton-utilidad > .icono-ilustrado { display:none; }
.boton.boton-utilidad[data-utilidad="radio"] {
  border-image-source:url('../recursos/botones-dialogos/principal.webp'); background:#14385e;
}
.boton-utilidad[data-utilidad="radio"]::before { background-image:url('../recursos/interfaz-galeria/radio.webp'); }
.boton.boton-utilidad[data-utilidad="estilo"] {
  border-image-source:url('../recursos/botones-dialogos/practica.webp'); background:#44325b;
}
.boton-utilidad[data-utilidad="estilo"]::before { background-image:url('../recursos/interfaz-galeria/estilo.webp'); }
.boton.boton-utilidad[data-utilidad="sonido"] {
  border-image-source:url('../recursos/botones-dialogos/reiniciar.webp'); background:#68412b;
}
.boton-utilidad[data-utilidad="sonido"]::before { background-image:url('../recursos/interfaz-galeria/sonido.webp'); }
.boton-utilidad[data-utilidad="ayuda"]::before { background-image:url('../recursos/interfaz-galeria/ayuda.webp'); }
.boton-utilidad[data-utilidad="sonido"][aria-pressed="true"]::before { filter:grayscale(.85) brightness(.85); }
.boton-utilidad[data-utilidad="sonido"][aria-pressed="true"]::after {
  content:""; position:absolute; left:7px; top:50%; width:31px; height:3px;
  transform:rotate(-48deg); border:1px solid #3c1712; border-radius:3px;
  background:#ffba92; box-shadow:0 0 0 1px #fff2c480; pointer-events:none;
}
.boton.boton-utilidad:focus-visible { outline:3px solid #99dbe9; outline-offset:3px; box-shadow:0 0 0 6px #14251f; }
.boton.boton-utilidad:disabled { filter:grayscale(.7); opacity:.55; cursor:default; }
@media(hover:hover) {
  .boton.boton-utilidad:hover:not(:disabled) { filter:brightness(1.14); transform:scale(1.025); }
}
.boton.boton-utilidad:active:not(:disabled) { transform:scale(.98); }
@media(min-width:1051px) {
  .barra-superior-partida { flex-wrap:wrap; }
  .controles-concentracion { margin-left:auto; }
}
@media(max-width:780px) {
  body.concentracion .controles-concentracion {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; gap:6px;
  }
  .controles-concentracion #boton-concentracion { grid-column:span 2; min-width:0; width:100%; }
  .controles-concentracion #progreso-concentracion { grid-column:3 / 5; grid-row:1; justify-self:end; }
  body.concentracion .controles-concentracion .boton-utilidad {
    flex-direction:column; gap:2px; min-height:60px; padding:2px 1px;
    white-space:normal; font-size:10px; line-height:1.1; border-width:7px;
    border-image-width:8px;
  }
  .controles-concentracion .boton-utilidad::before { width:25px; height:25px; flex-basis:25px; }
  .controles-concentracion .boton-utilidad[data-utilidad="sonido"][aria-pressed="true"]::after {
    left:calc(50% - 14px); top:16px; width:28px;
  }
  .herramientas-secundarias .boton-utilidad { min-height:48px; flex:1 1 auto; }
}
@media(prefers-reduced-motion:reduce) {
  .boton.boton-utilidad { transition:none; }
  .boton.boton-utilidad:hover,.boton.boton-utilidad:active { transform:none; }
}
@media(forced-colors:active) {
  .boton.boton-utilidad { border:2px solid ButtonText; border-image:none; background:ButtonFace; color:ButtonText; text-shadow:none; }
  .boton.boton-utilidad[aria-pressed="true"] { outline:2px solid Highlight; }
}

/* Tamaño óptico del libro y preferencia de movimiento del jugador. */
.boton-utilidad[data-utilidad="ayuda"]::before { background-size:125%; }
@media(prefers-reduced-motion:no-preference) {
  html[data-movimiento="si"] .boton.boton-utilidad { transition:filter .16s ease,transform .16s ease,box-shadow .16s ease; }
}
html[data-movimiento="no"] .boton.boton-utilidad { transition:none!important; transform:none!important; }

@media(min-width:1440px) { .barra-superior-partida { flex-wrap:nowrap; } }

@media(prefers-reduced-motion:reduce) { .boton.boton-utilidad { transition:none!important; transform:none!important; } }

/* 1.23: todos los controles comparten pieles raster, sin insertar nodos ni
   modificar manejadores. Las tarjetas, personajes y piezas conservan su arte. */
:root {
  --accion-navegar:url('../recursos/botones-dialogos/navegacion.webp');
  --accion-principal:url('../recursos/botones-dialogos/principal.webp');
  --accion-practica:url('../recursos/botones-dialogos/practica.webp');
  --accion-reiniciar:url('../recursos/botones-dialogos/reiniciar.webp');
}

/* Incluye controles creados después de abrir tienda, tutorial, copias o menús.
   No cambia display: los botones ocultos siguen ocultos, ni afecta al foco. */
body button:not(:where(.portada-boton,.boton-utilidad,.cerrar,#boton-concentracion,#volver-portada,
  .tarjeta-rompecabezas,.portada-categoria,.partida-continuar,.coleccion-ampliar,.coleccion-acceso,
  .tienda-ver,.viaje-ruta,.viaje-obra,.viaje-siguiente,.tutorial-pieza,
  .taller-cuadro,.taller-adorno,.taller-bruma,.taller-orion,.companero-miga,.control-giro-asa)) {
  /* Prioridad deliberada: los border abreviados de las pantallas antiguas
     restablecen border-image. Las variantes se expresan mediante variables. */
  border-image:var(--accion-marco,var(--accion-navegar)) var(--accion-corte,36 68 fill) / var(--accion-borde,8px) / 0 stretch!important;
  border-color:transparent;
  color:#fff4dc!important;
  text-shadow:0 1px 2px #071c20;
}
body button:not(:where(.portada-boton,.boton-utilidad,.cerrar,#boton-concentracion,#volver-portada,
  .tarjeta-rompecabezas,.portada-categoria,.partida-continuar,.coleccion-ampliar,.coleccion-acceso,
  .tienda-ver,.viaje-ruta,.viaje-obra,.viaje-siguiente,.tutorial-pieza,
  .taller-cuadro,.taller-adorno,.taller-bruma,.taller-orion,.companero-miga,.control-giro-asa)):focus-visible {
  outline:3px solid #a9e4ef; outline-offset:3px;
}
body button[aria-pressed="true"]:not(:where(.portada-boton,.boton-utilidad,.tutorial-pieza,.companero-miga,.taller-bruma,.taller-orion)) {
  outline:2px solid #ffe2a2; outline-offset:-5px;
}

/* Se conserva el significado del color en botones principales y destructivos. */
body :is(button.principal,.tutorial-principal,[data-copia-exportar],.tienda-comprar,
  [data-ajuste="sonido"],[data-ajuste="lectura"],#boton-empezar,#boton-imagen,
  .previa-premio-fichas,.premio-fichas-preparacion,.premio-fichas-compacto) {
  --accion-marco:var(--accion-principal);
}
body :is(#boton-guia,#boton-girar-izquierda,#boton-girar-derecha,
  .tutorial-girar-izquierda,.tutorial-girar-derecha,[data-ajuste="visual"],[data-ajuste="refugio"]) {
  --accion-marco:var(--accion-practica);
}
body :is(#boton-colocar,#boton-reiniciar,#confirmar-reinicio,
  #reiniciar-completado,#confirmar-colocar,#confirmar-borrar-progreso,.tutorial-reiniciar) {
  --accion-marco:var(--accion-reiniciar);
}

/* Reiniciar se distingue de la ayuda directa; su confirmación mantiene el rojo. */
body #boton-reiniciar-arriba {
  --accion-marco:var(--accion-principal);
  background-color:#142f55;
}
/* Nuevos iconos. Las etiquetas y costes continúan siendo texto HTML. */
#boton-imagen { --accion-icono:url('../recursos/acciones-123/imagen.webp'); }
#boton-guia { --accion-icono:url('../recursos/acciones-123/guia.webp'); }
#boton-pista { --accion-icono:url('../recursos/acciones-123/pista.webp'); }
#boton-colocar { --accion-icono:url('../recursos/acciones-123/colocar.webp'); }
#boton-reiniciar-arriba { --accion-icono:url('../recursos/acciones-123/reiniciar.webp'); }
#boton-girar-izquierda { --accion-icono:url('../recursos/acciones-123/girar-izquierda.webp'); }
#boton-girar-derecha { --accion-icono:url('../recursos/acciones-123/girar-derecha.webp'); }
#boton-mano { --accion-icono:url('../recursos/acciones-123/mover.webp'); }
#boton-deshacer, #boton-rehacer { --accion-icono:url('../recursos/acciones-123/deshacer.webp'); }
#boton-seleccionar-varias { --accion-icono:url('../recursos/acciones-123/seleccionar.webp'); }

body.concentracion .herramientas-partida :is(.boton-ayuda,.boton-reinicio,.control-ilustrado,.seleccionar-varias) {
  --accion-borde:9px;
  min-height:56px; padding:7px 12px; gap:8px;
  border:5px solid transparent;
  border-image-source:var(--accion-marco,var(--accion-navegar));
  border-image-slice:36 68 fill; border-image-width:9px;
  border-radius:10px; box-shadow:0 3px 6px #071a2440;
  color:#fff4dc; text-align:left;
  transition:filter .16s ease,box-shadow .16s ease;
}
body.concentracion .herramientas-partida :is(.boton-ayuda,.boton-reinicio,.control-ilustrado,.seleccionar-varias)
  > :is(.icono-ilustrado,.icono-control,.icono-deshacer,.icono-seleccion) {
  display:block; width:32px; height:32px; flex:0 0 32px;
  background:var(--accion-icono) center/contain no-repeat;
  color:transparent; font-size:0; filter:drop-shadow(0 2px 1px #0005);
}
body.concentracion .herramientas-partida :is(.boton-ayuda,.boton-reinicio,.control-ilustrado) > span:last-child {
  min-width:0;
}
body.concentracion .herramientas-partida :is(.boton-ayuda,.boton-reinicio,.control-ilustrado) strong {
  color:#fff4dc; font-size:12px; line-height:1.25;
}
body.concentracion .herramientas-partida :is(.boton-ayuda,.boton-reinicio,.control-ilustrado) small {
  color:#eddfc2; line-height:1.3;
}
body.concentracion .herramientas-partida :is(.boton-ayuda,.boton-reinicio,.control-ilustrado,.seleccionar-varias):disabled {
  opacity:.57; filter:grayscale(.65); cursor:default; box-shadow:none;
}
body.concentracion .reloj-compacto #boton-pausa {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; width:auto; min-width:86px; gap:5px; padding:5px 9px;
}
#boton-pausa > span:first-child {
  display:block; width:24px; height:24px; flex:0 0 24px; color:transparent; font-size:0;
  background:url('../recursos/acciones-123/pausa.webp') center/contain no-repeat;
}

/* Controles de lienzo, cajón, móvil, filtros y ventana de referencia. */
body :is(.zoom-controles button,.referencia-icono,.referencia-ajustar,.bandejas-barra button,
  .menu-piezas-destino,.movil-traslados button,.movil-pestanas button,.tienda-filtro,
  .taller-direcciones button,.taller-salas button,#ver-recompensas-victoria) {
  min-height:44px; padding:8px 12px;
  --accion-borde:7px;
  border-image-width:7px; border-radius:8px;
}
body :is(.zoom-controles button,.referencia-icono,.taller-direcciones button) {
  min-width:44px; font-weight:700; line-height:1;
}
body :is(.coleccion-favorita,.referencia-icono) { padding:8px; }
body .coleccion-favorita { color:#ffe2a2; min-width:44px; min-height:44px; }
body .referencia-mover { padding:9px 12px; --accion-borde:7px; color:#fff4dc; }
body .referencia-identidad :is(strong,small) { color:inherit; }
body .referencia-agarre {
  width:24px; height:24px; flex:0 0 24px; font-size:0; color:transparent;
  background:url('../recursos/acciones-123/mover.webp') center/contain no-repeat;
}
body :is(#abrir-organizador,[data-organizar-movil],#mover-a-bandeja,#renombrar-bandeja,
  #boton-sacar,.menu-piezas-destino) { padding-inline:12px; }
body :is(#abrir-organizador,[data-organizar-movil])::before {
  content:""; display:inline-block; vertical-align:middle; width:24px; height:24px;
  margin-right:6px; background:url('../recursos/acciones-123/organizar.webp') center/contain no-repeat;
  pointer-events:none;
}
body .movil-pestanas button > span:first-child {
  width:26px; height:26px; flex:0 0 26px; color:transparent; font-size:0;
  background:url('../recursos/acciones-123/organizar.webp') center/contain no-repeat;
}
body .movil-pestanas button[data-vista-movil="lienzo"] > span:first-child {
  background-image:url('../recursos/acciones-123/imagen.webp');
}
body .movil-pestanas button[data-vista-movil="mesa"] > span:first-child {
  background-image:url('../recursos/acciones-123/seleccionar.webp');
}
body .tarjeta-estilo,body .opcion-marco { --accion-corte:36 68; color:var(--tinta)!important; text-shadow:none; }
body .taller-hueco { --accion-borde:5px; }
body .portada-bolsillo { --accion-borde:9px; border-radius:10px; }

/* Un verbo conserva el mismo dibujo en la mesa, los diálogos y el móvil. */
body :is([data-zoom-factor="1.25"],#referencia-acercar) { --accion-mini:url('../recursos/acciones-123/acercar.webp'); }
body :is([data-zoom-factor="0.8"],#referencia-alejar) { --accion-mini:url('../recursos/acciones-123/alejar.webp'); }
body :is([data-ajustar-zona],#referencia-ajustar,#referencia-redimensionar,.taller-restaurar) { --accion-mini:url('../recursos/acciones-123/ajustar.webp'); }
body :is(.coleccion-favorita,.coleccion-favorita-detalle,.coleccion-filtro-favoritas) { --accion-mini:url('../recursos/acciones-123/favorita.webp'); }
body :is(#boton-sacar,[data-trasladar]) { --accion-mini:url('../recursos/acciones-123/sacar.webp'); }
body #boton-mezclar { --accion-mini:url('../recursos/acciones-123/mezclar.webp'); }
body :is([data-descarga],[data-copia-elegir]) { --accion-mini:url('../recursos/acciones-123/guardar.webp'); }
body :is(#mover-seleccion-bandeja,#mover-a-bandeja,.menu-piezas-destino) { --accion-mini:url('../recursos/acciones-123/organizar.webp'); }
body :is(#boton-reiniciar,.tutorial-reiniciar) { --accion-mini:url('../recursos/acciones-123/reiniciar.webp'); }
body :is(#boton-coleccion,#coleccion-refugio,#tienda-refugio,button[data-sala]) { --accion-mini:url('../recursos/acciones-123/imagen.webp'); }
body :is([data-zoom-factor],[data-ajustar-zona],#referencia-acercar,#referencia-alejar,#referencia-ajustar,#referencia-redimensionar,
  .coleccion-favorita,.coleccion-favorita-detalle,.coleccion-filtro-favoritas,#boton-sacar,#boton-mezclar,
  [data-descarga],[data-copia-elegir],[data-trasladar],#mover-seleccion-bandeja,#mover-a-bandeja,.menu-piezas-destino,
  #boton-reiniciar,#boton-coleccion,#coleccion-refugio,#tienda-refugio,button[data-sala],.taller-restaurar)::before {
  content:""; display:inline-block; vertical-align:middle; flex:0 0 24px;
  width:24px; height:24px; margin-right:5px;
  background:var(--accion-mini) center/contain no-repeat; pointer-events:none;
}
body :is([data-zoom-factor],#referencia-acercar,#referencia-alejar,#referencia-redimensionar,.coleccion-favorita) {
  font-size:0!important;
}
body :is([data-zoom-factor],#referencia-acercar,#referencia-alejar,#referencia-redimensionar,.coleccion-favorita)::before {
  margin:0; width:26px; height:26px;
}
body .coleccion-favorita[aria-pressed="false"]::before { filter:grayscale(1) brightness(.9); }
body #boton-coleccion > span:first-child { display:none; }
body .control-giro-icono {
  width:32px; height:32px; font-size:0;
  background:url('../recursos/acciones-123/girar-derecha.webp') center/contain no-repeat;
}
body .control-giro-asa { background:#183d3d; border-color:#d9b263; }
body #cerrar-referencia { font-size:0!important; }
body #cerrar-referencia::before {
  content:""; display:block; width:26px; height:26px;
  background:url('../recursos/botones-dialogos/iconos.webp') 50% 100% / 300% 200% no-repeat;
  pointer-events:none;
}
body :is([data-arte-icono="girar-izquierda"],[data-arte-icono="girar-derecha"],[data-arte-icono="reiniciar"])::before {
  background-position:center; background-size:contain;
}
body [data-arte-icono="girar-izquierda"]::before { background-image:url('../recursos/acciones-123/girar-izquierda.webp'); }
body [data-arte-icono="girar-derecha"]::before { background-image:url('../recursos/acciones-123/girar-derecha.webp'); }
body [data-arte-icono="reiniciar"]::before { background-image:url('../recursos/acciones-123/reiniciar.webp'); }
body #sonido-reproducir > span:first-child {
  width:26px; height:26px; flex:0 0 26px; font-size:0;
  background:url('../recursos/interfaz-galeria/sonido.webp') center/contain no-repeat;
}
body [data-ajuste="sonido"] { --opcion-icono:url('../recursos/interfaz-galeria/radio.webp'); }
body [data-ajuste="visual"] { --opcion-icono:url('../recursos/interfaz-galeria/estilo.webp'); }
body [data-ajuste="lectura"] { --opcion-icono:url('../recursos/interfaz-galeria/ayuda.webp'); }
body [data-ajuste="copia"] { --opcion-icono:url('../recursos/acciones-123/guardar.webp'); }
body [data-ajuste="refugio"] { --opcion-icono:url('../recursos/acciones-123/imagen.webp'); }
dialog[open] .opciones-inicio-lista button[data-ajuste] { position:relative; padding-left:66px; }
dialog[open] .opciones-inicio-lista button[data-ajuste]::before {
  content:""; position:absolute; top:50%; left:14px; transform:translateY(-50%);
  width:38px; height:38px; background:var(--opcion-icono) center/contain no-repeat; pointer-events:none;
}
/* El premio tiene el mismo aire y altura que las acciones que ahora acompaña. */
body.concentracion .controles-compactos .premio-fichas-compacto { min-height:56px; padding:8px 12px; }
body.concentracion .controles.controles-compactos { flex-wrap:wrap; }
body .zoom-controles { gap:4px; }
body .zoom-controles button { height:auto; }
body .panel-bandejas .boton,body .lote-mesa button { min-height:44px; }
body #juego[data-movil="true"] .zoom-controles button { min-width:44px; min-height:44px; }
body .menu-piezas-destino small { color:#dfd4b7; }
body .bandejas-cantidad:not(:empty) { background:#102a2e; color:#fff4dc; }
body #boton-rompecabezas > span { color:#fff4dc; }
body .tienda-filtro[aria-pressed="true"] { --accion-marco:var(--accion-principal); }
body button:disabled:not(:where(.tarjeta-rompecabezas,.tutorial-pieza)) { cursor:default; }
/* Acciones de recuperación creadas sin clase cuando no se carga una obra. */
body button:not([class]) { min-height:44px; padding:9px 14px; }

/* Hasta que caben ambas familias con holgura, las ayudas ocupan su propia fila. */
@media(min-width:1101px) and (max-width:1650px) {
  body.concentracion .barra-superior-partida { flex-wrap:wrap; }
  body.concentracion .barra-ayudas { flex-basis:100%; }
  body.concentracion .controles-concentracion { width:100%; }
}
@media(max-width:850px) {
  body.concentracion .herramientas-partida :is(.boton-ayuda,.boton-reinicio,.control-ilustrado,.seleccionar-varias) {
    padding:6px 9px; gap:5px; border-width:3px;
    --accion-borde:7px; min-height:50px;
  }
  body.concentracion .herramientas-partida :is(.boton-ayuda,.boton-reinicio,.control-ilustrado,.seleccionar-varias)
    > :is(.icono-ilustrado,.icono-control,.icono-deshacer,.icono-seleccion) {
    width:26px; height:26px; flex-basis:26px;
  }
  body.concentracion .herramientas-partida :is(.boton-ayuda,.boton-reinicio) strong { font-size:12px; }
}
@media(max-width:700px) {
  body.concentracion .barra-ayudas { flex-wrap:wrap; }
  body.concentracion .grupo-ayudas { flex-basis:100%; }
  body.concentracion .ayudas-botones { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  body.concentracion .ayudas-botones .boton-ayuda { flex-direction:row; text-align:left; }
  body.concentracion .ayudas-botones .boton-ayuda small { font-size:10px; }
  body.concentracion .reinicio-separado { padding:0; border:0; }
  body.concentracion .reinicio-separado .boton-reinicio { min-height:44px; }
  body.concentracion .boton-reinicio small { display:block; }
  body.concentracion .controles.controles-compactos { gap:6px; }
  body.concentracion .controles-compactos .reloj-compacto { flex-basis:155px; }
  body.concentracion .controles-compactos .botones-giro { flex-basis:150px; }
  body.concentracion .controles-compactos :is(.control-vista,.control-deshacer,.seleccionar-varias) {
    flex:1 1 28%; flex-direction:column; justify-content:center; text-align:center;
    white-space:normal; font-size:11px;
  }
  body.concentracion .herramientas-partida .control-ilustrado strong { font-size:11px; }
  body.concentracion .reloj-compacto #boton-pausa { width:44px; min-width:44px; padding:5px; }
  body.concentracion .reloj-compacto #boton-pausa > span:first-child { font-size:0; }
  body.concentracion .reloj-compacto #boton-pausa > span:last-child { display:none; }
}
@media(hover:hover) {
  body.concentracion .herramientas-partida :is(.boton-ayuda,.boton-reinicio,.control-ilustrado,.seleccionar-varias):hover:not(:disabled) {
    filter:brightness(1.14); box-shadow:0 3px 9px #061b2580; transform:none;
  }
}
@media(prefers-reduced-motion:reduce) {
  body.concentracion .herramientas-partida button { transition:none!important; transform:none!important; }
}
html[data-movimiento="no"] .herramientas-partida button { transition:none!important; transform:none!important; }
/* Separación ornamental entre las ayudas y el reinicio, sin capturar el ratón. */
body.concentracion .reinicio-separado {
  position:relative; flex-shrink:0;
  margin-left:10px; padding:0 0 0 22px; border:0;
}
body.concentracion .reinicio-separado::before {
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg,transparent,#c59b51 25%,#efd394 50%,#c59b51 75%,transparent);
  pointer-events:none;
}
body.concentracion .reinicio-separado::after {
  content:""; position:absolute; left:-2px; top:50%; width:6px; height:6px;
  background:#e6bf70; box-shadow:0 0 0 2px var(--papel);
  transform:translateY(-50%) rotate(45deg); pointer-events:none;
}
/* En el panel móvil el mismo separador pasa a horizontal. */
body.concentracion #dialogo-herramientas-movil .reinicio-separado {
  width:100%; margin:0; padding:20px 0 0; border:0;
}
body.concentracion #dialogo-herramientas-movil .reinicio-separado::before {
  top:3px; bottom:auto; left:8px; right:8px; width:auto; height:2px;
  background:linear-gradient(90deg,transparent,#c59b51 25%,#efd394 50%,#c59b51 75%,transparent);
}
body.concentracion #dialogo-herramientas-movil .reinicio-separado::after {
  top:1px; left:50%; margin-left:-3px; transform:rotate(45deg);
}
/* El foco debe distinguirse incluso sobre un modo o filtro ya seleccionado. */
body button:focus-visible,body button[aria-pressed]:focus-visible {
  outline:3px solid #a9e4ef; outline-offset:3px;
  box-shadow:0 0 0 6px #08222b;
}
@media(forced-colors:active) {
  body button { border-image:none!important; text-shadow:none!important; }
  body button:not(:where(.tutorial-pieza,.companero-miga,.taller-bruma,.taller-orion,.taller-adorno,.taller-cuadro)) {
    border:2px solid ButtonText!important; background:ButtonFace!important; color:ButtonText!important;
  }
  body.concentracion .herramientas-partida button :is(strong,small),body .referencia-identidad :is(strong,small) { color:ButtonText; }
  body button[aria-pressed="true"] { outline:2px solid Highlight!important; }
  body button:focus-visible { outline:3px solid Highlight!important; outline-offset:3px!important; }
  body button:focus-visible,body button[aria-pressed]:focus-visible { box-shadow:none; }
  body :is([data-zoom-factor],#referencia-acercar,#referencia-alejar,#referencia-redimensionar,
    #cerrar-referencia,.coleccion-favorita) { font-size:20px!important; }
  body :is([data-zoom-factor],#referencia-acercar,#referencia-alejar,#referencia-redimensionar,
    #cerrar-referencia,.coleccion-favorita)::before { display:none; }
  body #boton-pausa > span:first-child,body .control-giro-icono {
    background:none!important; font-size:22px!important; color:ButtonText!important;
  }
}

.dialogo-mando{width:min(690px,calc(100vw - 28px));max-height:calc(100dvh - 32px);padding:28px;background:linear-gradient(145deg,#edf6e8,#fbf7ea 72%);color:#234a3e;border:2px solid #688969;border-radius:24px;box-shadow:0 24px 80px #122e3170}
.mando-cabecera{display:flex;align-items:center;gap:16px;margin:0 28px 14px 0}.mando-cabecera h2{margin:2px 0 0}.mando-cabecera .ceja{margin:0;color:#547153}.mando-emblema{display:grid;place-items:center;flex:0 0 64px;width:64px;height:64px;border-radius:20px;background:#d6e8cd;color:#345e42;box-shadow:inset 0 0 0 1px #a7bfa0}.mando-emblema svg{width:48px;height:38px}.mando-estado{padding:10px 14px;border-radius:12px;background:#e1e8d7;border:1px solid #bdccb1;font-weight:700;font-size:14px;line-height:1.5}.dialogo-mando[data-conectado=true] .mando-estado{background:#d8edd6;color:#244e30}.mando-inicio{font-size:14px;line-height:1.55}.mando-guia{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.mando-accion{display:flex;gap:12px;align-items:flex-start;padding:12px;background:#ffffffa6;border:1px solid #ccdac5;border-radius:13px}.mando-accion kbd{display:grid;place-items:center;flex:0 0 65px;min-height:32px;padding:5px 7px;border:1px solid #638768;border-bottom-width:3px;border-radius:9px;background:#e1edda;color:#315337;font:700 13px/1.4 system-ui,sans-serif;white-space:nowrap}.mando-accion strong{font-size:14px}.mando-accion p{font-size:12px;line-height:1.55;margin:4px 0 0}.mando-nota{padding:13px 15px;border-left:4px solid #688969;background:#e7eeda;border-radius:0 12px 12px 0}.mando-nota p{margin:6px 0 0;font-size:13px;line-height:1.5}.mando-compatibilidad{font-size:12px;line-height:1.6;color:#496050}.boton-mando{display:inline-flex;gap:7px;align-items:center;justify-content:center}.boton-mando svg{width:25px;height:20px;flex-shrink:0}.boton-mando[data-conectado=true]{border-color:#82bb83;box-shadow:inset 0 0 0 1px #82bb8370}.mando-foco{outline:3px solid #9bc786!important;outline-offset:3px!important;box-shadow:0 0 0 6px #224f3380!important}
@media(max-width:600px){.dialogo-mando{padding:20px 16px;border-radius:18px}.mando-guia{grid-template-columns:1fr;gap:8px}.mando-accion{padding:10px}.mando-emblema{flex-basis:52px;width:52px;height:52px}.mando-cabecera{gap:12px}.mando-cabecera h2{font-size:24px}}

/* Herramientas secundarias: una fila recogida y paneles que se abren a demanda. */
.herramientas-avanzadas{position:relative;padding:4px 10px 7px;border-top:1px solid #b99b5944;background:linear-gradient(100deg,#142b23,#18372c);color:#f0e4c7}
.herramientas-avanzadas-botones{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:thin;padding:3px 2px}
.herramientas-avanzadas-botones .boton{flex:none;display:flex;gap:8px;align-items:center;justify-content:center;min-height:40px;padding:7px 16px;border:1px solid #bba26680;border-radius:8px;background:linear-gradient(#244839,#142c24);box-shadow:inset 0 1px #eadca02e,0 2px 4px #0004;color:#efe6ca;font:600 13px/1.3 system-ui;text-shadow:0 1px 2px #000}
.herramientas-avanzadas-botones .boton>span:first-child{font-size:22px;color:#e6c579;line-height:1}
.herramientas-avanzadas-botones .boton[aria-pressed=true],.herramientas-avanzadas-botones .boton[aria-expanded=true]{border-color:#f0c66e;background:linear-gradient(#5c5731,#363a24)}
.herramientas-avanzadas-botones .boton:disabled{opacity:.45;cursor:default}
.herramientas-avanzadas-botones .boton:hover:not(:disabled){filter:brightness(1.16);transform:none}
.minimapa{position:absolute;z-index:70;right:10px;top:100%;width:min(390px,calc(100% - 20px));box-sizing:border-box;margin:4px 0 0;border:1px solid #c4a56a;border-radius:12px;padding:12px;background:#142a22;box-shadow:0 5px 20px #0005}
.minimapa[hidden]{display:none}
.minimapa-cabecera{display:flex;justify-content:space-between;align-items:center;gap:15px;font-family:Georgia,serif}
.minimapa button{min-height:34px;color:#eddfbe;background:#264538;border:1px solid #bca26699;border-radius:7px;padding:5px 12px;font:inherit;cursor:pointer}
.minimapa-zonas{display:flex;gap:8px;margin:8px 0}
.minimapa-zonas button[aria-pressed=true]{background:#635733;border-color:#f0c66e}
.minimapa canvas{width:100%;height:auto;display:block;border-radius:5px;cursor:crosshair;touch-action:none}
.minimapa p{font-size:12px;color:#c7bb99;margin:7px 0 0}
.dialogo-recuerdo{width:min(900px,94vw);box-sizing:border-box;background:linear-gradient(145deg,#234432,#142c24);color:#efe4c6;border:1px solid #b8a16a}
.dialogo-recuerdo h2{margin:8px 0 12px}.dialogo-recuerdo canvas{display:block;width:100%;height:auto;border:1px solid #c9ad6c66;border-radius:12px}
.dialogo-recuerdo label{display:block;font-weight:600;margin:16px 0 8px}
.dialogo-recuerdo textarea{display:block;box-sizing:border-box;width:100%;min-height:80px;resize:vertical;background:#10271f;color:#f5ead0;border:1px solid #b3a06c;border-radius:9px;padding:12px;font:inherit}
.dialogo-recuerdo textarea::placeholder{color:#b6b7a5}.recuerdo-obra,.recuerdo-resumen,.recuerdo-estado{color:#d5c9a5}
.dialogo-recuerdo .acciones{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.portada-recuerdo{display:block;justify-self:center;margin:-5px auto 2px;padding:6px 18px;border-radius:20px;border:1px solid #d7b96a88;background:#102a26e8;color:#f1ddb0;font:500 13px/1.4 system-ui;cursor:pointer;text-shadow:0 1px 2px #000}
.portada-recuerdo[hidden]{display:none}.portada-recuerdo:hover{background:#24473b}
@media(max-width:760px){.herramientas-avanzadas{padding:1px 6px 3px}.herramientas-avanzadas-botones{gap:6px}.herramientas-avanzadas-botones .boton{min-height:40px;font-size:12px;padding:6px 10px}.minimapa{width:min(320px,calc(100% - 16px));right:8px;margin:4px 0 0}.minimapa canvas{width:280px;max-width:100%;height:auto;margin:auto}.dialogo-recuerdo{padding:55px 18px 22px}.dialogo-recuerdo .acciones .boton{width:100%}.portada-recuerdo{font-size:11px;margin:0 auto}}
@media(prefers-reduced-motion:reduce){.herramientas-avanzadas *{transition:none!important}}

#herramientas-partida:has(#minimapa:not([hidden])){z-index:8}

/* Tapices estáticos: una imagen por ambiente, compartida entre las ventanas.
   El velo central deja el dibujo más visible en los márgenes y calma la lectura.
   Las tarjetas, campos, ilustraciones y lienzos conservan sus propios materiales. */
:root {
  --tapiz-esmeralda: url('../recursos/interfaz/tapices/nocturno.webp');
  --tapiz-lino: url('../recursos/interfaz/tapices/mediterraneo.webp');
  --tapiz-astral: url('../recursos/interfaz/tapices/mesa-astral.webp');
  --tapiz-imagen: var(--tapiz-esmeralda);
  --tapiz-base: var(--panel-arriba);
  --tapiz-centro: 84%;
  --tapiz-borde: 76%;
}
:root[data-estilo='mediterraneo'] { --tapiz-imagen: var(--tapiz-lino); }
:root[data-estilo='papiro'] { --tapiz-imagen: url('../recursos/interfaz/tapices/papiro.webp'); }
:root[data-estilo='bosque'] { --tapiz-imagen: url('../recursos/interfaz/tapices/bosque.webp'); }
:root[data-estilo='cosmos'] { --tapiz-imagen: url('../recursos/interfaz/tapices/cosmos.webp'); }
:root[data-estilo='mesa-bruma'] {
  --tapiz-imagen: url('../recursos/interfaz/tapices/mesa-bruma.webp');
  --tapiz-base: #25483f;
}
:root[data-estilo='mesa-astral'] {
  --tapiz-imagen: var(--tapiz-astral);
  --tapiz-base: #28394b;
}
:root[data-estilo='mesa-biblioteca-astral'] {
  --tapiz-imagen: url('../recursos/interfaz/tapices/mesa-biblioteca-astral.webp');
}
:root:is([data-estilo='mediterraneo'], [data-estilo='papiro']) {
  --tapiz-centro: 92%;
  --tapiz-borde: 86%;
}

/* Estas ventanas usan tinta fija, independiente del ambiente elegido. */
.tienda-dialogo, .dialogo-recuerdo, .celebracion-victoria {
  --tapiz-imagen: var(--tapiz-esmeralda);
  --tapiz-base: #19372b;
  --tapiz-centro: 84%;
  --tapiz-borde: 76%;
}
.celebracion-victoria[data-hito='viaje'] {
  --tapiz-imagen: var(--tapiz-astral);
  --tapiz-base: #132b35;
}
.dialogo-mando {
  --tapiz-imagen: var(--tapiz-lino);
  --tapiz-base: #f2f5e9;
  --tapiz-centro: 92%;
  --tapiz-borde: 86%;
}

/* El lino claro requiere algo más de tinta en sus rótulos secundarios. */
:root[data-estilo='mediterraneo'] :is(.dialogo, .copia-dialogo, .tutorial-practico):not(.tienda-dialogo, .dialogo-recuerdo, .dialogo-mando) {
  --suave: #78614b;
}

/* El id cubre el fondo particular de Mi colección sin cambiar su distribución. */
:is(.dialogo, #dialogo-coleccion.dialogo-coleccion, .copia-dialogo, .celebracion-victoria, .tutorial-practico) {
  background-color: var(--tapiz-base);
  background-image:
    radial-gradient(ellipse at 48% 38%,
      color-mix(in srgb, var(--tapiz-base) var(--tapiz-centro), transparent) 12%,
      color-mix(in srgb, var(--tapiz-base) var(--tapiz-borde), transparent) 100%),
    var(--tapiz-imagen);
  background-position: center, center;
  background-size: 100% 100%, cover;
  background-repeat: no-repeat;
}

@media (prefers-contrast: more), (forced-colors: active) {
  :is(.dialogo, #dialogo-coleccion.dialogo-coleccion, .copia-dialogo, .celebracion-victoria, .tutorial-practico) {
    background-image: none;
  }
}

/* El rincón tiene una celda propia: ni él ni las herramientas cubren la mesa. */
.herramientas-avanzadas.mesa-elegante {
  display:grid; grid-template-columns:minmax(280px,1fr) minmax(280px,430px);
  align-items:start; gap:8px 18px; padding:7px 10px;
  border-top:1px solid #b99b5944; border-radius:0 0 9px 9px;
}
.mesa-elegante > .mesa-elegante-controles { grid-column:1; min-width:0; align-self:center; }
.mesa-elegante > #rincon-mesa { grid-column:2; grid-row:1; justify-self:end; min-width:0; max-width:100%; }
.mesa-elegante-controles[hidden], .mesa-herramientas-panel[hidden], .mesa-elegante-movil[hidden] { display:none!important; }
#boton-recompensas-mesa[hidden] { display:none!important; }
body .mesa-mas-herramientas {
  display:inline-flex; align-items:center; justify-content:flex-start; gap:9px;
  max-width:100%; min-height:44px; padding:8px 13px; border:1px solid #bba26688;
  border-radius:8px; background:linear-gradient(#294b3c,#183328); color:#f6ead0;
  font:600 13px/1.35 system-ui,sans-serif; white-space:normal; text-align:left;
  box-shadow:inset 0 1px #eadca021,0 2px 4px #0003; text-shadow:0 1px 2px #000;
}
.mesa-mas-herramientas .mesa-herramientas-icono { flex:0 0 22px; font-size:22px; line-height:1; color:#e5c681; }
.mesa-mas-herramientas .mesa-herramientas-flecha { margin-left:auto; font-size:19px; color:#e5c681; }
.mesa-mas-herramientas[aria-expanded="true"] { background:#334b32; border-color:#e3c781; }
.mesa-mas-herramientas[aria-expanded="true"] .mesa-herramientas-flecha { transform:rotate(180deg); }
.mesa-herramientas-pista { display:block; margin:4px 1px 0; color:#ceccb5; font:400 11px/1.4 system-ui,sans-serif; }
.mesa-herramientas-panel {
  display:grid; gap:14px; margin-top:10px; padding:13px; border:1px solid #b79e604d;
  border-radius:10px; background:#10291f; box-shadow:inset 0 1px #f9dfa30d;
}
.mesa-herramientas-panel h3, .mesa-elegante-movil h3 {
  margin:0 0 8px; color:#e2cb95; font:600 12px/1.4 system-ui,sans-serif; letter-spacing:.025em;
}
.mesa-herramientas-panel .herramientas-avanzadas-botones,
.mesa-herramientas-utilidades, .mesa-elegante-movil .herramientas-avanzadas-botones {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch;
  gap:7px; overflow:visible; padding:0;
}
.mesa-herramientas-panel .boton, .mesa-elegante-movil .herramientas-avanzadas-botones .boton {
  min-width:0; max-width:100%; min-height:44px; margin:0; padding:7px 9px;
  white-space:normal; overflow-wrap:break-word; text-overflow:clip;
  font-size:12px; line-height:1.35; justify-content:flex-start; text-align:left;
}
.mesa-herramientas-panel .herramientas-avanzadas-botones .boton > span:first-child,
.mesa-elegante-movil .herramientas-avanzadas-botones .boton > span:first-child {
  flex:0 0 23px; text-align:center; font-size:21px;
}
.mesa-herramientas-panel .boton-utilidad {
  border-width:6px; border-image-width:8px; padding:5px 7px; gap:7px; --mesa-tamano-icono:26px;
}
.mesa-herramientas-panel .boton-utilidad::before,
.mesa-herramientas-panel .mesa-icono-vivo { flex-basis:26px; width:26px; height:26px; }
.mesa-elegante-movil { margin-top:17px; padding-top:16px; border-top:1px solid #b99b5960; }
.mesa-elegante > .minimapa {
  position:relative; inset:auto; grid-column:1/-1; justify-self:end;
  width:min(390px,100%); max-width:100%; margin:0; z-index:auto;
}
.mesa-elegante .minimapa button { min-height:44px; min-width:44px; }
body .mesa-mas-herramientas:focus-visible, .mesa-herramientas-panel button:focus-visible {
  outline:3px solid #99dbe9; outline-offset:3px;
}
@media(hover:hover) {
  body .mesa-mas-herramientas:hover { filter:brightness(1.12); }
}

/* Dos bloques de controles alrededor de un rincón realmente centrado.
   El rincón conserva su propio diseño interior en rincon-mesa.css. */
.mesa-controles-izquierda[hidden],.mesa-controles-derecha[hidden] { display:none!important; }
.mesa-herramientas-icono img,.mesa-herramientas-flecha img { display:block;width:100%;height:100%;object-fit:contain;pointer-events:none; }
.mesa-mas-herramientas .mesa-herramientas-icono { width:28px;height:28px;flex:0 0 28px; }
.mesa-mas-herramientas .mesa-herramientas-flecha { width:18px;height:14px;flex:0 0 18px;margin-left:0; }
@media(min-width:761px) {
  body.mesa-elegante-activa.concentracion #herramientas-partida {
    --mesa-ancho-rincon:clamp(320px,23vw,580px);
    display:grid; grid-template-columns:minmax(0,1fr) var(--mesa-ancho-rincon) minmax(0,1fr);
    column-gap:12px; row-gap:8px; align-items:stretch; padding:9px 0 7px;
  }
  body.mesa-elegante-activa.concentracion #herramientas-partida :is(.barra-superior-partida,.barra-ayudas,#controles-partida),
  body.mesa-elegante-activa.concentracion #herramientas-partida .herramientas-avanzadas.mesa-elegante,
  body.mesa-elegante-activa.concentracion #herramientas-partida .mesa-elegante-controles:not([hidden]) { display:contents; }
  body.mesa-elegante-activa.concentracion #herramientas-partida .grupo-ayudas { grid-column:1;grid-row:1;min-width:0; }
  body.mesa-elegante-activa.concentracion #herramientas-partida .ayudas-botones {
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;height:100%;
  }
  body.mesa-elegante-activa.concentracion #herramientas-partida .controles-concentracion {
    grid-column:3;grid-row:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    width:auto;min-width:0;gap:6px;margin:0;align-items:stretch;
  }
  body.mesa-elegante-activa.concentracion #herramientas-partida .reinicio-separado { display:contents;margin:0;padding:0;border:0; }
  body.mesa-elegante-activa.concentracion #herramientas-partida .reinicio-separado::before { content:none; }
  body.mesa-elegante-activa.concentracion #herramientas-partida :is(.boton-ayuda,.boton-reinicio,#boton-concentracion,#mesa-mas-herramientas) {
    box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:center;
    width:100%;min-width:0;max-width:none;min-height:74px;height:100%;padding:6px 7px;
    gap:6px;border-width:3px;--accion-borde:8px;border-image-width:8px;
    white-space:normal;text-align:center;line-height:1.25;font-size:14px;
  }
  body.mesa-elegante-activa.concentracion #herramientas-partida :is(.boton-ayuda,.boton-reinicio,#boton-concentracion) strong {
    display:block;font-size:15px;line-height:1.25;text-align:center;
  }
  body.mesa-elegante-activa.concentracion #herramientas-partida :is(.boton-ayuda,.boton-reinicio,#boton-concentracion) small {
    display:block;margin-top:4px;font-size:11px;line-height:1.3;white-space:normal;text-align:center;
  }
  body.mesa-elegante-activa.concentracion #herramientas-partida :is(.boton-ayuda,.boton-reinicio) > .icono-ilustrado,
  body.mesa-elegante-activa.concentracion #herramientas-partida #boton-concentracion::before {
    width:28px;height:28px;flex:0 0 28px;
  }
  body.mesa-elegante-activa.concentracion #herramientas-partida #mesa-mas-herramientas {
    border-color:transparent;border-image-source:url('../recursos/botones-dialogos/navegacion.webp');
    border-image-slice:36 68 fill;border-image-repeat:stretch;background:#173d41;color:#fff3d6;font-weight:700;
  }
  body.mesa-elegante-activa.concentracion #herramientas-partida #mesa-mas-herramientas > span:nth-child(2) { min-width:0; }
  body.mesa-elegante-activa.concentracion #herramientas-partida .mesa-controles-izquierda {
    grid-column:1;grid-row:2;display:grid;grid-template-columns:minmax(166px,1.5fr) repeat(3,minmax(0,1fr));
    gap:6px;min-width:0;align-items:stretch;
  }
  body.mesa-elegante-activa.concentracion #herramientas-partida .mesa-controles-derecha {
    grid-column:3;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.6fr);
    gap:6px;min-width:0;align-items:stretch;
  }
  body.mesa-elegante-activa.concentracion .mesa-controles-izquierda .botones-giro { display:contents; }
  body.mesa-elegante-activa.concentracion #controles-partida .control-ilustrado {
    display:flex;align-items:center;justify-content:center;width:100%;min-width:0;max-width:none;min-height:64px;height:100%;
    margin:0;padding:6px 7px;gap:5px;border-width:3px;--accion-borde:7px;
    white-space:normal;text-align:center;box-sizing:border-box;grid-column:auto;grid-row:auto;
  }
  body.mesa-elegante-activa.concentracion #controles-partida .control-ilustrado strong { display:block;font-size:14px;line-height:1.25;text-align:center; }
  body.mesa-elegante-activa.concentracion #controles-partida .control-ilustrado small { display:block;font-size:10px;line-height:1.3;margin-top:3px;text-align:center; }
  body.mesa-elegante-activa.concentracion #controles-partida .control-ilustrado > :is(.icono-control,.icono-deshacer) { width:26px;height:26px;flex:0 0 26px; }
  body.mesa-elegante-activa.concentracion #controles-partida .reloj-compacto {
    display:flex;align-items:center;justify-content:center;min-width:0;min-height:64px;margin:0;padding:4px;gap:4px;box-sizing:border-box;grid-column:auto;grid-row:auto;
  }
  body.mesa-elegante-activa.concentracion .reloj-compacto #cronometro { font-size:clamp(18px,1.15vw,22px);letter-spacing:0; }
  body.mesa-elegante-activa.concentracion #controles-partida .reloj-compacto > .icono-contador { width:25px;height:25px;flex:0 0 25px; }
  body.mesa-elegante-activa.concentracion #controles-partida #boton-pausa { min-width:64px;width:auto;min-height:44px;margin:0;padding:5px 8px;gap:3px;font-size:11px; }
  body.mesa-elegante-activa.concentracion #controles-partida #boton-pausa > span:last-child { display:inline; }
  body.mesa-elegante-activa.concentracion #controles-partida #boton-pausa > span:first-child { display:none; }
  body.mesa-elegante-activa.concentracion #herramientas-partida .mesa-indicador-fichas {
    --mesa-progreso-alto:calc(var(--lectura-ayuda,11px) * 1.4 + 2px);
    position:relative;display:flex;align-items:stretch;min-width:0;min-height:64px;
    padding-bottom:var(--mesa-progreso-alto);box-sizing:border-box;
  }
  body.mesa-elegante-activa.concentracion #controles-partida .premio-fichas-compacto {
    flex:1 1 auto;width:100%;max-width:none;min-width:0;min-height:64px;height:100%;padding:6px;
    justify-content:center;text-align:center;box-sizing:border-box;gap:5px;
  }
  body.mesa-elegante-activa.concentracion #controles-partida .premio-fichas-compacto > span { display:block;min-width:0;overflow-wrap:normal;text-align:center; }
  body.mesa-elegante-activa.concentracion #controles-partida .premio-fichas-compacto strong { font-size:12px;line-height:1.3; }
  body.mesa-elegante-activa.concentracion #controles-partida .premio-fichas-compacto small { font-size:10px;line-height:1.35;margin-top:2px; }
  body.mesa-elegante-activa.concentracion #controles-partida .premio-fichas-compacto img { width:22px;height:22px;flex:0 0 22px; }
  body.mesa-elegante-activa.concentracion #herramientas-partida #progreso-concentracion {
    position:absolute;inset:auto 0 0;display:block;height:var(--mesa-progreso-alto);
    width:auto;min-width:0;padding:0;margin:0;font-size:var(--lectura-ayuda,11px);line-height:1.4;white-space:nowrap;text-align:center;
  }
  body.mesa-elegante-activa.concentracion #herramientas-partida .mesa-herramientas-pista { display:none; }
  body.mesa-elegante-activa.concentracion #herramientas-partida .mesa-herramientas-panel {
    grid-column:1/-1;grid-row:3;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;
  }
  body.mesa-elegante-activa.concentracion #herramientas-partida .minimapa { grid-column:1/-1;grid-row:4;margin:0; }
  body.mesa-elegante-activa.concentracion #herramientas-partida #rincon-mesa {
    grid-column:2;grid-row:1/span 2;align-self:stretch;justify-self:stretch;
    width:100%;max-width:none;min-width:0;min-height:156px;height:100%;
  }
}
@media(min-width:761px) and (max-width:1799px) {
  body.mesa-elegante-activa.concentracion #controles-partida .reloj-compacto > .icono-contador { display:none; }
  body.mesa-elegante-activa.concentracion #controles-partida .control-ilustrado > :is(.icono-control,.icono-deshacer) { width:23px;height:23px;flex-basis:23px; }
}
@media(min-width:1200px) and (max-width:1439px) {
  body.mesa-elegante-activa.concentracion #herramientas-partida { --mesa-ancho-rincon:260px;column-gap:10px; }
  body.mesa-elegante-activa.concentracion #herramientas-partida :is(.boton-ayuda,.boton-reinicio,#boton-concentracion) > .icono-ilustrado,
  body.mesa-elegante-activa.concentracion #herramientas-partida #boton-concentracion::before { width:23px;height:23px;flex-basis:23px; }
  body.mesa-elegante-activa.concentracion #herramientas-partida :is(.boton-ayuda,.boton-reinicio,#boton-concentracion) strong { font-size:14px; }
  body.mesa-elegante-activa.concentracion #controles-partida .control-ilustrado { flex-direction:column;gap:2px; }
}
@media(min-width:761px) and (max-width:1199px) {
  body.mesa-elegante-activa.concentracion #herramientas-partida { grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px; }
  body.mesa-elegante-activa.concentracion #herramientas-partida #rincon-mesa { grid-column:1/-1;grid-row:1;width:min(560px,100%);justify-self:center;min-height:120px;height:120px; }
  body.mesa-elegante-activa.concentracion #herramientas-partida .grupo-ayudas { grid-column:1;grid-row:2; }
  body.mesa-elegante-activa.concentracion #herramientas-partida .controles-concentracion { grid-column:2;grid-row:2; }
  body.mesa-elegante-activa.concentracion #herramientas-partida .mesa-controles-izquierda { grid-column:1;grid-row:3; }
  body.mesa-elegante-activa.concentracion #herramientas-partida .mesa-controles-derecha { grid-column:2;grid-row:3; }
  body.mesa-elegante-activa.concentracion #herramientas-partida .mesa-herramientas-panel { grid-row:4; }
  body.mesa-elegante-activa.concentracion #herramientas-partida .minimapa { grid-row:5; }
  body.mesa-elegante-activa.concentracion #herramientas-partida :is(.boton-ayuda,.boton-reinicio) { flex-direction:column;gap:3px; }
  body.mesa-elegante-activa.concentracion #herramientas-partida :is(.boton-ayuda,.boton-reinicio) > .icono-ilustrado { width:23px;height:23px;flex-basis:23px; }
  body.mesa-elegante-activa.concentracion #herramientas-partida :is(.boton-ayuda,.boton-reinicio,#boton-concentracion) strong { font-size:14px; }
  body.mesa-elegante-activa.concentracion #controles-partida .control-ilustrado { flex-direction:column;gap:2px;padding-inline:4px; }
}
@media(min-width:761px) and (max-width:959px) {
  body.mesa-elegante-activa.concentracion #herramientas-partida .ayudas-botones { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.mesa-elegante-activa.concentracion #herramientas-partida .mesa-controles-izquierda { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body.mesa-elegante-activa.concentracion #controles-partida .reloj-compacto { grid-column:1/-1; }
  body.mesa-elegante-activa.concentracion #herramientas-partida .mesa-controles-derecha { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.mesa-elegante-activa.concentracion #herramientas-partida .mesa-indicador-fichas { grid-column:1/-1; }
}
@media(min-width:761px) {
  html:is([data-texto="extra"],[data-texto="grande"]) body.mesa-elegante-activa.concentracion #herramientas-partida .ayudas-botones { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html:is([data-texto="extra"],[data-texto="grande"]) body.mesa-elegante-activa.concentracion #herramientas-partida :is(.boton-ayuda,.boton-reinicio,#boton-concentracion) { flex-direction:column; }
  html:is([data-texto="extra"],[data-texto="grande"]) body.mesa-elegante-activa.concentracion #herramientas-partida .mesa-controles-izquierda { grid-template-columns:repeat(3,minmax(0,1fr)); }
  html:is([data-texto="extra"],[data-texto="grande"]) body.mesa-elegante-activa.concentracion #controles-partida .reloj-compacto { grid-column:1/-1; }
  html:is([data-texto="extra"],[data-texto="grande"]) body.mesa-elegante-activa.concentracion #herramientas-partida .mesa-controles-derecha { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html:is([data-texto="extra"],[data-texto="grande"]) body.mesa-elegante-activa.concentracion #herramientas-partida .mesa-indicador-fichas { grid-column:1/-1; }
  html[data-texto="extra"] body.mesa-elegante-activa.concentracion #herramientas-partida #mesa-mas-herramientas { flex-direction:column; }
  html[data-texto="extra"] body.mesa-elegante-activa.concentracion #herramientas-partida .mesa-herramientas-panel { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .herramientas-avanzadas.mesa-elegante { grid-template-columns:minmax(0,1fr); padding:4px 6px; gap:6px; }
  .mesa-elegante > #rincon-mesa { grid-column:1; grid-row:auto; justify-self:center; }
  .mesa-elegante-movil .herramientas-avanzadas-botones .boton { min-height:48px; padding:8px 10px; font-size:13px; }
  #dialogo-herramientas-movil .mesa-boton-vivo { --mesa-tamano-icono:27px; }
  /* El acceso principal prioriza la palabra completa en la barra estrecha. */
  #herramientas-movil-barra #boton-imagen { order:0; }
  #herramientas-movil-barra #abrir-herramientas-movil::before { display:none; }
  #herramientas-movil-barra #abrir-herramientas-movil { transform:none!important; }
}
@media(max-width:380px) {
  .mesa-elegante-movil .herramientas-avanzadas-botones { grid-template-columns:minmax(0,1fr); }
}
html[data-texto="extra"] .mesa-herramientas-panel { grid-template-columns:minmax(0,1fr); }
html[data-texto="extra"] .mesa-herramientas-panel :is(.herramientas-avanzadas-botones,.mesa-herramientas-utilidades),
html[data-texto="extra"] .mesa-elegante-movil .herramientas-avanzadas-botones { grid-template-columns:minmax(0,1fr); }

/* Solo se mueve el dibujo. Texto, foco y superficie táctil permanecen quietos. */
body :is(.mesa-mas-herramientas,.mesa-herramientas-panel .boton,.mesa-elegante-movil .boton) {
  transform:none!important; transition:filter .16s ease,box-shadow .16s ease;
}
body .boton.mesa-boton-vivo { transform:none!important; transition:filter .16s ease,box-shadow .16s ease; }
body .boton.mesa-boton-vivo[data-utilidad]::before { display:none; }
body .boton.mesa-boton-vivo > .mesa-icono-vivo {
  position:relative; display:block; flex:0 0 var(--mesa-tamano-icono,30px); width:var(--mesa-tamano-icono,30px); height:var(--mesa-tamano-icono,30px);
  background-position:center; background-repeat:no-repeat; background-size:contain;
  pointer-events:none; filter:drop-shadow(0 2px 2px #071b2780);
}
body .boton.mesa-boton-vivo > .mesa-icono-radio { background-image:url('../recursos/interfaz-galeria/radio.webp'); }
body .boton.mesa-boton-vivo > .mesa-icono-ayuda { background-image:url('../recursos/interfaz-galeria/ayuda.webp'); background-size:125%; transform-origin:35% 50%; }
.mesa-radio-aguja {
  position:absolute; left:47%; top:43%; width:2px; height:6px; border-radius:1px;
  background:#ffe5a0; transform-origin:50% 90%; opacity:0; pointer-events:none;
}
.mesa-boton-vivo[data-mesa-reaccion="radio"] .mesa-radio-aguja { animation:mesa-radio-sintoniza .56s ease-out both; }
.mesa-boton-vivo[data-mesa-reaccion="ayuda"] .mesa-icono-ayuda { animation:mesa-libro-abre .5s ease-out both; }
#boton-sacar[data-mesa-reaccion="sacar"]::before { animation:mesa-sacar-pieza .36s ease-out both; }
@keyframes mesa-radio-sintoniza {
  0% { opacity:0; transform:rotate(-20deg); }
  25% { opacity:1; transform:rotate(22deg); }
  60% { opacity:1; transform:rotate(-10deg); }
  100% { opacity:0; transform:rotate(0); }
}
@keyframes mesa-libro-abre {
  0%,100% { transform:perspective(70px) rotateY(0); }
  40% { transform:perspective(70px) rotateY(-25deg) scaleX(1.06); }
}
@keyframes mesa-sacar-pieza {
  0%,100% { transform:translate(0,0); }
  48% { transform:translate(-2px,2px) rotate(-6deg); }
}
@media(prefers-reduced-motion:reduce) {
  .mesa-boton-vivo,.mesa-boton-vivo *,.mesa-boton-vivo::before { animation:none!important; transition:none!important; }
}
html[data-movimiento="no"] .mesa-boton-vivo,
html[data-movimiento="no"] .mesa-boton-vivo *,
html[data-movimiento="no"] .mesa-boton-vivo::before { animation:none!important; transition:none!important; }
@media(forced-colors:active) {
  body .mesa-mas-herramientas,.mesa-herramientas-panel,.mesa-elegante-movil { background:Canvas; border:1px solid ButtonText; color:ButtonText; box-shadow:none; text-shadow:none; }
  .mesa-herramientas-pista,.mesa-herramientas-panel h3,.mesa-elegante-movil h3 { color:CanvasText; }
}

body.mesa-elegante-activa.concentracion :is(#herramientas-partida,#dialogo-herramientas-movil,#herramientas-movil-barra) {
  --mesa-boton-luz:#214f50; --mesa-boton-sombra:#0c282d;
}
/* Acabado 1.57: superficies redondeadas, con dos filetes dorados continuos.
   El marco y el paisaje de la cabecera pertenecen a su propio componente. */
body.mesa-elegante-activa.concentracion :is(#herramientas-partida,#dialogo-herramientas-movil,#herramientas-movil-barra) :is(button,#mesa-mas-herramientas):not(.companero-miga),
body.mesa-elegante-activa.concentracion #herramientas-partida .reloj-compacto {
  border:2px solid transparent; border-image:none!important; border-radius:22px;
  background:
    radial-gradient(ellipse at 24% 0%,#ffedb611,transparent 70%) padding-box,
    linear-gradient(160deg,var(--mesa-boton-luz),var(--mesa-boton-sombra)) padding-box,
    linear-gradient(145deg,#f3d180 0%,#bf8b37 38%,#775021 68%,#e8bf68 100%) border-box;
  box-shadow:inset 0 0 0 1px #ca983e,inset 0 0 0 2px #382308,inset 0 0 0 4px #d8a64866,
    inset 0 5px 9px #ffe8a812,inset 0 -6px 10px #0004,0 2px 4px #0005;
  color:#fff2d4; font-family:Georgia,'Times New Roman',serif;
  text-shadow:0 1px 2px #061416; transform:none!important;
  transition:filter .16s ease,box-shadow .16s ease;
}
body.mesa-elegante-activa.concentracion :is(#herramientas-partida,#dialogo-herramientas-movil,#herramientas-movil-barra)
  :is(#boton-imagen,#boton-reiniciar-arriba,#premio-fichas-compacto) {
  --mesa-boton-luz:#174576; --mesa-boton-sombra:#091f42;
}
body.mesa-elegante-activa.concentracion :is(#herramientas-partida,#dialogo-herramientas-movil) #boton-guia {
  --mesa-boton-luz:#613471; --mesa-boton-sombra:#2a183d;
}
body.mesa-elegante-activa.concentracion :is(#herramientas-partida,#dialogo-herramientas-movil) #boton-pista {
  --mesa-boton-luz:#12636b; --mesa-boton-sombra:#073338;
}
body.mesa-elegante-activa.concentracion :is(#herramientas-partida,#dialogo-herramientas-movil) #boton-colocar {
  --mesa-boton-luz:#7c351f; --mesa-boton-sombra:#381a13;
}
body.mesa-elegante-activa.concentracion :is(#herramientas-partida,#dialogo-herramientas-movil) :is(#boton-girar-izquierda,#boton-girar-derecha) {
  --mesa-boton-luz:#414948; --mesa-boton-sombra:#202b30;
}
body.mesa-elegante-activa.concentracion #herramientas-partida .reloj-compacto {
  --mesa-boton-luz:#1a4538; --mesa-boton-sombra:#0a261f;
}
/* El reloj conserva su superficie verde también en los ambientes claros. */
body.mesa-elegante-activa.concentracion #herramientas-partida .reloj-compacto :is(#cronometro,.ceja) {
  color:inherit;
}
body.mesa-elegante-activa.concentracion :is(#herramientas-partida,#dialogo-herramientas-movil,#herramientas-movil-barra)
  :is(#boton-imagen,#boton-guia,#boton-pista,#boton-colocar) {
  --mesa-ayuda-titulo:15px; --mesa-ayuda-coste:11px;
  align-items:center; justify-content:center; gap:6px; text-align:center;
}
body.mesa-elegante-activa.concentracion :is(#herramientas-partida,#dialogo-herramientas-movil,#herramientas-movil-barra)
  :is(.boton-ayuda,.boton-reinicio,.control-ilustrado) > span:last-child {
  flex:0 1 auto; width:auto; min-width:0; max-width:100%; margin:0;
  text-align:center;
}
body.mesa-elegante-activa.concentracion :is(#herramientas-partida,#dialogo-herramientas-movil,#herramientas-movil-barra)
  :is(#boton-imagen,#boton-guia,#boton-pista,#boton-colocar) strong {
  display:block; margin:0; padding:0; font-family:inherit;
  font-size:var(--mesa-ayuda-titulo); font-weight:700; line-height:1.25;
  letter-spacing:0; text-align:center; white-space:normal;
}
body.mesa-elegante-activa.concentracion :is(#herramientas-partida,#dialogo-herramientas-movil,#herramientas-movil-barra)
  :is(#boton-imagen,#boton-guia,#boton-pista,#boton-colocar) small {
  margin:4px 0 0; padding:0; font-family:inherit;
  font-size:var(--mesa-ayuda-coste); font-weight:400; line-height:1.3;
  letter-spacing:0; color:#f6e5bd; text-align:center; white-space:normal;
}
/* La palabra reserva su anchura real: el chevrón nunca pisa sus letras. */
body.mesa-elegante-activa.concentracion #herramientas-partida #mesa-mas-herramientas { gap:6px; }
body.mesa-elegante-activa.concentracion #herramientas-partida #mesa-mas-herramientas > span:nth-child(2) {
  flex:0 0 auto; max-width:100%; overflow-wrap:anywhere;
}
body.mesa-elegante-activa.concentracion #herramientas-partida #mesa-mas-herramientas .mesa-herramientas-flecha {
  width:14px; min-width:14px; max-width:14px; height:14px; flex:0 0 14px; margin:0;
}
@media(min-width:761px) and (max-width:1799px) {
  body.mesa-elegante-activa.concentracion #herramientas-partida #mesa-mas-herramientas .mesa-herramientas-icono { width:24px; height:24px; flex-basis:24px; }
  html[data-texto="grande"] body.mesa-elegante-activa.concentracion #herramientas-partida #mesa-mas-herramientas {
    display:grid; grid-template-columns:max-content 14px; align-content:center; justify-items:center;
  }
  html[data-texto="grande"] body.mesa-elegante-activa.concentracion #herramientas-partida #mesa-mas-herramientas .mesa-herramientas-icono { grid-column:1/-1; }
}
@media(min-width:761px) and (max-width:1399px) {
  html:not([data-texto="extra"]) body.mesa-elegante-activa.concentracion #herramientas-partida #mesa-mas-herramientas {
    display:grid; grid-template-columns:max-content 14px; align-content:center; justify-items:center;
  }
  html:not([data-texto="extra"]) body.mesa-elegante-activa.concentracion #herramientas-partida #mesa-mas-herramientas .mesa-herramientas-icono { grid-column:1/-1; }
}
body.mesa-elegante-activa.concentracion :is(#herramientas-partida,#dialogo-herramientas-movil,#herramientas-movil-barra) :is(button,#mesa-mas-herramientas):not(.companero-miga):focus-visible {
  outline:3px solid #a5e2ee; outline-offset:3px;
}
body.mesa-elegante-activa.concentracion :is(#herramientas-partida,#dialogo-herramientas-movil,#herramientas-movil-barra) :is(button,#mesa-mas-herramientas):not(.companero-miga):disabled {
  box-shadow:inset 0 0 0 1px #21190deb,inset 0 0 0 3px #d2aa5940;
}
@media(hover:hover) {
  body.mesa-elegante-activa.concentracion :is(#herramientas-partida,#dialogo-herramientas-movil,#herramientas-movil-barra) :is(button,#mesa-mas-herramientas):not(.companero-miga):hover:not(:disabled) {
    filter:brightness(1.12); transform:none!important;
  }
}
@media(max-width:760px) {
  body.mesa-elegante-activa.concentracion :is(#dialogo-herramientas-movil,#herramientas-movil-barra)
    :is(#boton-imagen,#boton-guia,#boton-pista,#boton-colocar) { --mesa-ayuda-titulo:14px; }
  body.mesa-elegante-activa.concentracion #herramientas-partida .botones-giro { min-width:190px; }
  body.mesa-elegante-activa.concentracion #herramientas-partida .botones-giro .control-ilustrado { gap:4px; }
  body.mesa-elegante-activa.concentracion #herramientas-partida .botones-giro .icono-control { width:22px; height:22px; flex:0 0 22px; }
}
@media(prefers-reduced-motion:reduce) {
  body.mesa-elegante-activa.concentracion :is(#herramientas-partida,#dialogo-herramientas-movil,#herramientas-movil-barra) :is(button,#mesa-mas-herramientas):not(.companero-miga) { transition:none; }
}
html[data-movimiento="no"] body.mesa-elegante-activa.concentracion
  :is(#herramientas-partida,#dialogo-herramientas-movil,#herramientas-movil-barra) :is(button,#mesa-mas-herramientas):not(.companero-miga) { transition:none; }
@media(forced-colors:active) {
  body.mesa-elegante-activa.concentracion :is(#herramientas-partida,#dialogo-herramientas-movil,#herramientas-movil-barra) :is(button,#mesa-mas-herramientas):not(.companero-miga),
  body.mesa-elegante-activa.concentracion #herramientas-partida .reloj-compacto {
    border:2px solid ButtonText; background:Canvas; color:ButtonText!important; box-shadow:none!important; text-shadow:none;
  }
  body.mesa-elegante-activa.concentracion :is(#herramientas-partida,#dialogo-herramientas-movil,#herramientas-movil-barra)
    :is(#boton-imagen,#boton-guia,#boton-pista,#boton-colocar) small { color:ButtonText; }
}

/* Pausa mantiene una superficie táctil completa con silueta rectangular. */
body.mesa-elegante-activa.concentracion #herramientas-partida #controles-partida #boton-pausa {
  border-radius:10px;
}
@media(max-width:760px) {
  body.mesa-elegante-activa.concentracion #controles-partida #boton-pausa {
    width:auto;min-width:64px;min-height:44px;padding:5px 8px;font-size:11px;
  }
  body.mesa-elegante-activa.concentracion #controles-partida #boton-pausa > span:first-child { display:none; }
  body.mesa-elegante-activa.concentracion #controles-partida #boton-pausa > span:last-child { display:inline; }
}
@media(min-width:1800px) {
  body.mesa-elegante-activa.concentracion #controles-partida #boton-pausa { min-width:72px; }
}

/* La mascota conserva sus ilustraciones originales y se mueve dentro de su repisa. */
.companero-figura { position:absolute; inset:0; pointer-events:none; }
#rincon-companero {
  position:relative;
  flex:0 0 100px;
  width:100px;
  height:76px;
  isolation:isolate;
}
#rincon-companero::before {
  content:"";
  position:absolute;
  inset:auto 4px 3px;
  height:9px;
  border:1px solid color-mix(in srgb,var(--acento,#bd935b) 45%,transparent);
  border-radius:50% 50% 5px 5px;
  background:linear-gradient(180deg,#c5a175,#8a684a);
  box-shadow:0 3px 4px #20160f26,inset 0 1px 0 #fff4;
  pointer-events:none;
  z-index:-1;
}
#rincon-companero::after {
  content:"";
  position:absolute;
  width:73px;
  height:13px;
  left:14px;
  bottom:8px;
  border:1px solid #a1876466;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 20%,#ebdfc6,#c7b38d 70%,#ac9470);
  box-shadow:inset 0 -2px 2px #634a2725;
  pointer-events:none;
  z-index:-1;
}
#rincon-companero .companero-miga {
  --companero-x:0px;
  --companero-ritmo:7.4s;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:12px;
  background:transparent;
  box-shadow:none;
  transform:none;
  transition:none;
  overflow:visible;
}
#rincon-companero .companero-miga:hover { background:transparent; transform:none; box-shadow:none; }
#rincon-companero .companero-miga:focus-visible { outline:2px solid var(--acento,#bd935b); outline-offset:1px; }
#rincon-companero .miga-tapete { display:none; }
#rincon-companero .companero-figura {
  inset:auto auto 7px 16px;
  width:68px;
  height:68px;
  transform:translateX(var(--companero-x));
  transform-origin:50% 92%;
}
#rincon-companero .companero-miga .miga-sprite {
  inset:auto 2px 0;
  width:64px;
  height:64px;
  background-size:400% 300%;
  filter:drop-shadow(0 2px 2px #39291526);
}
#rincon-companero .companero-miga :is(.bruma-companera,.orion-companero) {
  inset:0;
  width:68px;
  height:68px;
  object-fit:contain;
  object-position:50% 100%;
  image-rendering:auto;
  animation:none;
  transform:none;
  filter:drop-shadow(0 2px 2px #39291533);
}
#rincon-companero .miga-sprite[data-animacion="reposo"] { animation-duration:var(--companero-ritmo); }
#rincon-companero .companero-miga[data-activo="true"][data-ahorro="false"][data-reaccion="reposo"] .companero-figura {
  animation:companero-respiracion var(--companero-ritmo) ease-in-out infinite;
}
#rincon-companero .companero-miga[data-reaccion="curiosidad"] .companero-figura { animation:companero-curiosidad 1.8s ease-in-out; }
#rincon-companero .companero-miga[data-reaccion="celebracion"] .companero-figura { animation:companero-saludo 1.6s ease-in-out; }
#rincon-companero .companero-miga[data-reaccion="somnolencia"] .companero-figura { animation:companero-cabeceo 3.4s ease-in-out; }
#rincon-companero .companero-miga[data-reaccion="dormir"] .companero-figura { animation:companero-respiracion var(--companero-ritmo) ease-in-out infinite; }
#rincon-companero .companero-miga[data-reaccion="pasitos"] .companero-figura { animation:companero-pasitos 2.6s ease-in-out both; }
@keyframes companero-respiracion {
  0%,100% { transform:translate(var(--companero-x),0); }
  50% { transform:translate(var(--companero-x),-.65px); }
}
@keyframes companero-curiosidad {
  0%,100% { transform:translateX(var(--companero-x)) rotate(0); }
  35%,65% { transform:translateX(var(--companero-x)) rotate(-2deg); }
}
@keyframes companero-saludo {
  0%,100% { transform:translate(var(--companero-x),0); }
  30% { transform:translate(var(--companero-x),-2px); }
  65% { transform:translate(var(--companero-x),-.5px); }
}
@keyframes companero-cabeceo {
  0%,100% { transform:translateX(var(--companero-x)) rotate(0); }
  35%,65% { transform:translate(var(--companero-x),.75px) rotate(2deg); }
}
@keyframes companero-pasitos {
  0%,10% { transform:translate(var(--paseo-inicio),0); }
  30% { transform:translate(var(--paseo-medio),-1px); }
  43% { transform:translate(var(--paseo-medio),0); }
  66% { transform:translate(var(--paseo-fin),-1px); }
  78%,100% { transform:translate(var(--paseo-fin),0); }
}
#rincon-companero .companero-miga[data-activo="false"] :is(.companero-figura,.miga-sprite) { animation-play-state:paused!important; }
html[data-movimiento="no"] #rincon-companero :is(.companero-figura,.miga-sprite) { animation:none!important; }
@media (prefers-reduced-motion:reduce) {
  #rincon-companero :is(.companero-figura,.miga-sprite) { animation:none!important; }
}
@media (max-width:760px) {
  #rincon-companero { flex-basis:76px; width:76px; height:60px; }
  #rincon-companero::after { width:57px; left:9px; bottom:5px; }
  #rincon-companero .companero-figura { width:60px; height:60px; left:8px; bottom:3px; }
  #rincon-companero .companero-miga .miga-sprite { width:56px; height:56px; }
  #rincon-companero .companero-miga :is(.bruma-companera,.orion-companero) { width:60px; height:60px; }
}

/* Un único rincón decorativo, en el flujo de la barra y fuera de las piezas. */
.rincon-mesa{position:relative;isolation:isolate;display:grid;grid-template-columns:100px minmax(140px,1fr) 56px;align-items:end;gap:10px;box-sizing:border-box;width:100%;max-width:430px;min-width:280px;height:84px;padding:0 9px 5px;border-bottom:3px solid #9c7b43;border-radius:0 0 7px 7px;background:linear-gradient(0deg,#322f2224,transparent 35%);justify-self:end;contain:layout}
.rincon-mesa[hidden]{display:none!important}.rincon-ventana{grid-column:2;grid-row:1;position:relative;align-self:stretch;overflow:hidden;border:3px solid #6a5437;border-radius:30px 30px 3px 3px;box-shadow:0 0 0 1px #bea36b66,inset 0 0 6px #0005;background:#173245;pointer-events:none}
.rincon-ventana canvas{width:100%;height:100%;display:block;object-fit:cover;opacity:.94}
.rincon-cristal{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 7px #0005;background:linear-gradient(116deg,transparent 42%,#e4e1c50b 44%,transparent 58%)}
.rincon-cristal::before{content:'';position:absolute;left:48%;top:0;bottom:0;width:3px;background:linear-gradient(90deg,#453925,#b39153,#423923);box-shadow:1px 0 2px #0004}
.rincon-companero{position:relative;grid-row:1;grid-column:1;width:88px;height:68px;align-self:end;isolation:isolate}
.rincon-cojin{position:absolute;left:8px;right:1px;bottom:1px;height:15px;border:1px solid #a78850aa;border-radius:45%;background:radial-gradient(ellipse at 40% 20%,#71856f,#2c4b40 75%);box-shadow:0 2px 3px #0003}
.rincon-jardin{grid-column:3;grid-row:1;align-self:end;position:relative;width:53px;height:76px;pointer-events:auto}
.rincon-jardin svg{display:block;width:100%;height:100%;overflow:visible}
.jardin-copa{transform-origin:50px 113px;animation:jardin-brisa 13s ease-in-out infinite;animation-play-state:paused}
.rincon-mesa[data-animada="true"] .jardin-copa{animation-play-state:running}
.jardin-etapa{transform-origin:50px 104px;opacity:0;transform:scale(.05)}
.jardin-etapa[data-visible="true"]{opacity:1;transform:scale(1)}
.rincon-jardin[data-crece="true"] .jardin-etapa{transition:opacity 1.1s ease,transform 1.5s cubic-bezier(.2,.75,.3,1)}
.rincon-mesa[data-ambientes="false"] .rincon-ventana,.rincon-mesa[data-ambientes="false"] .rincon-jardin{visibility:hidden}
.rincon-mesa[data-ahorro="true"] .jardin-copa{animation:none}
@keyframes jardin-brisa{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.7deg)}}
@media(max-width:760px){.rincon-mesa{height:72px;min-width:0;max-width:430px;margin-inline:auto;grid-template-columns:76px minmax(110px,1fr) 43px;gap:8px;padding-inline:6px}.rincon-companero{width:68px;height:59px}.rincon-jardin{width:43px;height:63px}.rincon-ventana{border-radius:22px 22px 3px 3px;border-width:2px}}
@media(prefers-reduced-motion:reduce){.rincon-mesa *{animation:none!important;transition:none!important}}
html[data-movimiento="no"] .rincon-mesa *{animation:none!important;transition:none!important}
@media(forced-colors:active){.rincon-mesa{border-color:CanvasText}.rincon-ventana{border-color:CanvasText}.rincon-jardin{forced-color-adjust:none}}

/* Mobiliario ilustrado: el paisaje mantiene su canvas y sus pausas originales. */
#rincon-mesa {
  display:block; border:0; border-radius:0; background:none; box-shadow:none; padding:0;
}
#rincon-mesa .rincon-ventana {
  position:absolute; inset:0 auto auto 50%; width:100%; max-width:510px; height:auto; min-height:0;
  aspect-ratio:3; transform:translateX(-50%);
  border:0; border-radius:0; box-shadow:none; background:none; overflow:visible;
}
#rincon-mesa .rincon-ventana::after {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:url("../recursos/rincon-mesa/marco-ventana.webp") center/100% 100% no-repeat;
}
#rincon-mesa .rincon-ventana canvas {
  position:absolute; left:6.8%; top:17%; width:86.4%; height:60%; border-radius:5px;
  object-fit:cover; opacity:1;
}
#rincon-mesa .rincon-cristal { inset:17% 6.8% 23%; border-radius:5px; z-index:1; }
#rincon-mesa .rincon-cristal::before {
  width:3px; background:linear-gradient(90deg,#52361a,#c19b59,#48311b); box-shadow:1px 0 2px #0005;
}
#rincon-mesa #rincon-companero {
  position:absolute; left:3px; bottom:0; width:148px; height:110px; z-index:3;
}
#rincon-mesa #rincon-companero::before {
  inset:auto 0 0; width:100%; height:74px; border:0; border-radius:0; box-shadow:none;
  background:url("../recursos/rincon-mesa/asiento-mascota.webp") center bottom/contain no-repeat;
}
#rincon-mesa #rincon-companero::after { display:none; }
#rincon-mesa #rincon-companero .companero-figura { left:27px; bottom:25px; width:94px; height:94px; }
#rincon-mesa #rincon-companero .companero-miga .miga-sprite { inset:auto 3px 0; width:88px; height:88px; }
#rincon-mesa #rincon-companero .companero-miga :is(.bruma-companera,.orion-companero) { width:94px; height:94px; }
#rincon-mesa .rincon-jardin { position:absolute; right:7px; bottom:5px; width:53px; height:82px; z-index:3; }
@media(max-width:1439px) and (min-width:761px) {
  #rincon-mesa #rincon-companero { width:124px; height:100px; left:0; }
  #rincon-mesa #rincon-companero::before { height:62px; }
  #rincon-mesa #rincon-companero .companero-figura { left:20px; bottom:22px; width:84px; height:84px; }
  #rincon-mesa #rincon-companero .companero-miga .miga-sprite { width:78px; height:78px; }
  #rincon-mesa #rincon-companero .companero-miga :is(.bruma-companera,.orion-companero) { width:84px; height:84px; }
  #rincon-mesa .rincon-jardin { right:3px; width:46px; height:72px; }
}
@media(max-width:760px) {
  #rincon-mesa { height:112px; max-width:390px; }
  #rincon-mesa .rincon-ventana { max-width:330px; }
  #rincon-mesa #rincon-companero { width:100px; height:85px; left:0; }
  #rincon-mesa #rincon-companero::before { height:50px; }
  #rincon-mesa #rincon-companero .companero-figura { left:17px; bottom:17px; width:66px; height:66px; }
  #rincon-mesa #rincon-companero .companero-miga .miga-sprite { inset:auto 2px 0; width:62px; height:62px; }
  #rincon-mesa #rincon-companero .companero-miga :is(.bruma-companera,.orion-companero) { width:66px; height:66px; }
  #rincon-mesa .rincon-jardin { right:2px; bottom:1px; width:43px; height:63px; }
}
@media(min-width:761px) and (max-width:1199px) {
  #rincon-mesa .rincon-ventana { max-width:360px; }
}
@media(forced-colors:active) {
  #rincon-mesa .rincon-ventana canvas { outline:1px solid CanvasText; }
}

/* Una escena continua detrás de las dos filas, sin interferir con sus controles. */
body.mesa-elegante-activa.concentracion #herramientas-partida {
  isolation:isolate; background:#10252b; border-radius:16px;
  padding:23px 18px 16px; margin-bottom:5px;
  box-shadow:0 4px 10px #0005; overflow:visible;
}
#cabecera-paisaje { position:absolute; inset:7px; z-index:0; pointer-events:none; overflow:hidden; border-radius:10px; }
#cabecera-paisaje[hidden] { display:none!important; }
#cabecera-paisaje canvas { display:block; width:100%; height:100%; }
#cabecera-paisaje::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,#061b2c59 0%,#061b2c38 35%,transparent 43%,transparent 57%,#061b2c38 65%,#061b2c59 100%),linear-gradient(0deg,#1a1712a6 0%,transparent 28%,transparent 85%,#061a2a26);
}
body.mesa-elegante-activa.concentracion #herramientas-partida::after {
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  border:26px solid transparent; border-image:url('../recursos/cabecera-panoramica/marco-exterior.webp') 100 125 100 125 / 26px stretch;
}
body.mesa-elegante-activa.concentracion #herramientas-partida :is(.grupo-ayudas,.controles-concentracion,.mesa-controles-izquierda,.mesa-controles-derecha,.mesa-herramientas-panel,.minimapa,#rincon-mesa,#herramientas-movil-barra) {
  position:relative; z-index:1;
}
body.mesa-elegante-activa.concentracion #herramientas-partida #rincon-mesa { background:none; border:0; box-shadow:none; }
body.mesa-elegante-activa.concentracion #rincon-mesa #rincon-companero { left:calc(50% - 123px); bottom:0; }
body.mesa-elegante-activa.concentracion #rincon-mesa .rincon-jardin { right:calc(50% - 128px); bottom:3px; }
body.mesa-elegante-activa.concentracion #progreso-concentracion { color:#ead9b5; text-shadow:0 1px 2px #000; }
@media(max-width:1439px) and (min-width:761px) {
  body.mesa-elegante-activa.concentracion #herramientas-partida { padding-inline:14px; }
  body.mesa-elegante-activa.concentracion #rincon-mesa #rincon-companero { left:calc(50% - 98px); }
  body.mesa-elegante-activa.concentracion #rincon-mesa .rincon-jardin { right:calc(50% - 104px); }
}
@media(max-width:760px) {
  body.mesa-elegante-activa.concentracion #herramientas-partida { padding:15px 9px 12px; }
  body.mesa-elegante-activa.concentracion #herramientas-partida::after { border-width:18px; border-image-width:18px; }
  body.mesa-elegante-activa.concentracion #herramientas-partida > :is(#controles-partida,.herramientas-avanzadas) { position:relative;z-index:1;background:none; }
  body.mesa-elegante-activa.concentracion #rincon-mesa #rincon-companero { left:calc(50% - 80px); }
  body.mesa-elegante-activa.concentracion #rincon-mesa .rincon-jardin { right:calc(50% - 92px); }
}
@media(prefers-contrast:more),(forced-colors:active) {
  #cabecera-paisaje { visibility:hidden; }
  body.mesa-elegante-activa.concentracion #herramientas-partida { background:Canvas; }
  body.mesa-elegante-activa.concentracion #herramientas-partida::after { border:1px solid CanvasText;border-image:none;border-radius:12px; }
}

/* Apoyo compartido del asiento y la maceta, con el material de la mesa. */
body.mesa-elegante-activa.concentracion #rincon-mesa::before {
  content:""; position:absolute; left:-8px; right:-8px; bottom:-7px; height:25px;
  pointer-events:none; z-index:0; border:1px solid #ab844c; border-radius:4px;
  background:repeating-linear-gradient(1deg,#ad722b1a 0,#ad722b00 1px,#ffe0a014 2px,#ad722b00 6px),linear-gradient(180deg,#b48b50 0%,#73512e 13%,#483019 68%,#a1783c 72%,#302013 88%);
  box-shadow:inset 0 1px 1px #f8dc9377,0 4px 6px #0007;
}
@media(max-width:760px) {
  body.mesa-elegante-activa.concentracion #rincon-mesa::before { left:7%;right:7%;height:21px;bottom:-5px; }
}
@media(prefers-contrast:more),(forced-colors:active) {
  body.mesa-elegante-activa.concentracion #rincon-mesa::before { background:Canvas;border-color:CanvasText;box-shadow:none; }
}
/* Cuatro compañeros 1.58. El lienzo de cada pose comparte escala, centro y apoyo. */
/* disabled pausa las caricias; la mascota permanece visible también al reducir movimiento. */
.companero-miga:disabled { opacity:1; }
.companero-coleccion {
  position:absolute;
  inset:0;
  display:block;
  pointer-events:none;
  transform-origin:50% 94%;
  filter:drop-shadow(0 2px 2px #39291524);
}
.companero-coleccion[hidden] { display:none; }
.companero-coleccion .companero-coleccion-pose {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:50% 100%;
  image-rendering:auto;
  opacity:0;
  transition:opacity 340ms cubic-bezier(.25,.1,.25,1);
}
.companero-coleccion .companero-coleccion-pose[data-visible="true"] { opacity:1; }
.companero-coleccion[data-pose="parpadeo"] .companero-coleccion-pose { transition-duration:150ms; }
.companero-coleccion[data-suave="false"] .companero-coleccion-pose { transition:none; }
.companero-miga[data-activo="true"][data-ahorro="false"] .companero-coleccion {
  animation:coleccion-respira var(--companero-ritmo,7.4s) ease-in-out infinite;
}
.companero-miga[data-reaccion="dormir"] .companero-coleccion { animation-duration:8.6s; }
@keyframes coleccion-respira {
  0%,100% { transform:translateY(0) scale(1); }
  50% { transform:translateY(-.35px) scale(1.006,1.013); }
}
.companero-miga[data-activo="false"] .companero-coleccion { animation-play-state:paused; }
.companero-miga[data-ahorro="true"] .companero-coleccion { animation:none; }
.companero-miga:is([data-activo="false"],[data-ahorro="true"]) .companero-coleccion-pose { transition:none; }
html[data-movimiento="no"] .companero-coleccion,
html[data-movimiento="no"] .companero-coleccion .companero-coleccion-pose { animation:none!important; transition:none!important; }
@media (prefers-reduced-motion:reduce) {
  .companero-coleccion, .companero-coleccion .companero-coleccion-pose { animation:none!important; transition:none!important; }
}



/* Jardines compartidos por la cabecera, el bazar y el refugio. */
.jardin-vivo { width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;pointer-events:none; }
.jardin-vivo-imagen { width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block;pointer-events:none;user-select:none; }
.jardin-vivo-brote svg { width:100%;height:100%;display:block; }
body.mesa-elegante-activa.concentracion #rincon-mesa .rincon-jardin {
  right:max(2px,calc(50% - 145px));bottom:0;width:110px;height:140px;
  cursor:pointer;border-radius:12px;outline-offset:1px;
}
body.mesa-elegante-activa.concentracion #rincon-mesa #rincon-companero { left:max(4px,calc(50% - 137px)); }
.rincon-jardin:focus-visible { outline:3px solid #a5e2ee;background:#183b3466; }
.rincon-jardin[data-crece="true"] .jardin-vivo-imagen { animation:jardin-revelar .8s ease-out both;transform-origin:center bottom; }
@keyframes jardin-revelar { from { opacity:.5;transform:scale(.96); } to { opacity:1;transform:scale(1); } }
@media(max-width:1439px) and (min-width:761px) {
  body.mesa-elegante-activa.concentracion #rincon-mesa .rincon-jardin { width:100px;height:130px; }
}
@media(max-width:760px) {
  body.mesa-elegante-activa.concentracion #rincon-mesa .rincon-jardin { width:92px;height:115px;right:max(2px,calc(50% - 124px)); }
  body.mesa-elegante-activa.concentracion #rincon-mesa #rincon-companero { left:max(4px,calc(50% - 120px)); }
}
.taller-companero-coleccion { position:absolute;left:20%;bottom:6%;width:13%;height:24%;z-index:6;pointer-events:none; }
.taller-companero-coleccion img { width:100%;height:100%;object-fit:contain;object-position:center bottom; }
.taller-jardin-vivo { position:absolute;right:13%;bottom:8%;width:11%;height:26%;z-index:5;pointer-events:none; }
html[data-movimiento="no"] .jardin-vivo-imagen,.rincon-mesa[data-ahorro="true"] .jardin-vivo-imagen { animation:none!important; }
@media(prefers-reduced-motion:reduce) { .jardin-vivo-imagen { animation:none!important; } }
@media(forced-colors:active) { .jardin-vivo,.taller-companero-coleccion { forced-color-adjust:none; } }

.mesa-flexible-acciones { display:flex;flex-wrap:wrap;gap:8px;align-items:center;grid-column:1/-1; }
.mesa-flexible-acciones .boton { min-height:44px; }
.mesa-flexible-acciones [aria-pressed="true"] { box-shadow:inset 0 0 0 2px var(--acento); }
.mesa-divisor { position:absolute;z-index:8;box-sizing:border-box;display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none;border-radius:12px;outline-offset:2px; }
.mesa-divisor[hidden],.mesa-cabecera-recogida[hidden] { display:none!important; }
.mesa-divisor[data-orientacion="vertical"] { cursor:col-resize; }
.mesa-divisor[data-orientacion="horizontal"] { cursor:row-resize; }
.mesa-divisor::before { content:"";position:absolute;background:var(--acento-fuerte,#655237);opacity:.38;border-radius:3px; }
.mesa-divisor[data-orientacion="vertical"]::before { width:3px;height:calc(100% - 20px); }
.mesa-divisor[data-orientacion="horizontal"]::before { height:3px;width:calc(100% - 20px); }
.mesa-divisor-agarre { position:relative;box-sizing:border-box;flex-shrink:0;display:block;border:1px solid var(--panel-borde,#8c795b);border-radius:9px;background:var(--panel-arriba,#f4e8cd);box-shadow:0 2px 4px #0003; }
.mesa-divisor[data-orientacion="vertical"] .mesa-divisor-agarre { width:20px;height:56px; }
.mesa-divisor[data-orientacion="horizontal"] .mesa-divisor-agarre { width:56px;height:20px; }
.mesa-divisor-agarre::after { content:"";position:absolute;inset:7px;border-inline:2px solid var(--acento-fuerte,#655237); }
.mesa-divisor[data-orientacion="horizontal"] .mesa-divisor-agarre::after { border-inline:0;border-block:2px solid var(--acento-fuerte,#655237); }
.mesa-divisor:is(:hover,:focus-visible,[data-arrastrando="true"]) { background:var(--boton-hover,#e2d2b4); }
.mesa-divisor:focus-visible { outline:3px solid var(--foco,#987822); }
.mesa-cabecera-recogida { box-sizing:border-box;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;padding:6px 0; }
.mesa-cabecera-recogida .boton { min-height:44px; }
.mesa-cabecera-recogida #mesa-mostrar-cabecera { margin-right:auto;font-weight:700; }
body.concentracion.mesa-vista-amplia #herramientas-partida { display:none!important; }
body:not(.concentracion) .mesa-cabecera-recogida { display:none!important; }
/* ScaleManager pone height:100% inline en su contenedor. Ambas alturas deben
   prevalecer: de otro modo el canvas no crece, o no encoge al recuperar la
   cabecera. Los mínimos de escritorio apilado y móvil siguen vigentes. */
body.concentracion #juego {
  height:calc(100vh - var(--alto-controles-concentracion,126px) - 44px)!important;
  height:calc(100dvh - var(--alto-controles-concentracion,126px) - 44px)!important;
}
body.concentracion.mesa-vista-amplia #juego {
  height:calc(100vh - var(--alto-mesa-amplia,56px) - 44px)!important;
  height:calc(100dvh - var(--alto-mesa-amplia,56px) - 44px)!important;
}
@media(max-width:760px) {
  .mesa-divisor { display:none!important; }
  .mesa-flexible-acciones { width:100%; }
  .mesa-flexible-acciones .boton { flex:1 1 145px; }
  .mesa-cabecera-recogida { gap:5px; }
  .mesa-cabecera-recogida .boton { padding:6px 8px;font-size:12px; }
  body.concentracion #juego[data-movil="true"] {
    height:calc(100vh - var(--alto-controles-concentracion,200px) - 12px)!important;
    height:calc(100dvh - var(--alto-controles-concentracion,200px) - 12px)!important;
  }
  body.concentracion.mesa-vista-amplia #juego {
    height:calc(100vh - var(--alto-mesa-amplia,56px) - 12px)!important;
    height:calc(100dvh - var(--alto-mesa-amplia,56px) - 12px)!important;
  }
}
@media(forced-colors:active) {
  .mesa-divisor::before,.mesa-divisor-agarre { background:Canvas;border:1px solid CanvasText; }
  .mesa-divisor:focus-visible { outline-color:Highlight; }
}

.panel-viajes [hidden]{display:none!important}
.viajes-vistas{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 18px;border-bottom:1px solid var(--linea);padding-bottom:15px}
.viajes-vista{min-height:44px;padding:10px 19px;border:1px solid var(--linea);border-radius:9px;background:var(--boton-fondo);color:var(--tinta);font:600 14px/1.35 'Segoe UI',sans-serif;cursor:pointer}
.viajes-vista[aria-pressed="true"]{background:#173e3a;color:#fff4d8;border-color:#c9b575;box-shadow:inset 0 0 0 1px #c9b57555}
.viajes-vista:focus-visible,.expedicion button:focus-visible,.expedicion summary:focus-visible{outline:3px solid #ecba5a;outline-offset:4px}
.expedicion{--exp-tinta:#f5edd9;--exp-suave:#cccbbd;color:var(--exp-tinta);border:1px solid #8d956652;border-radius:16px;background:linear-gradient(140deg,#183739,#112728 54%,#15272f);overflow:hidden;box-shadow:0 12px 36px #07161923}
.panel-viajes .expedicion-cabecera{padding:26px 28px 23px}
.expedicion .ceja{font:600 10px/1.6 'Segoe UI',sans-serif;letter-spacing:1.9px;color:#d6c38e;margin:0 0 7px;text-transform:uppercase}
.expedicion-cabecera h3{font:34px/1.15 Georgia,serif;letter-spacing:-.4px;margin:0 0 15px;color:var(--exp-tinta)}
.panel-viajes .expedicion-cabecera>p:last-child{font:14px/1.8 'Segoe UI',sans-serif;max-width:850px;color:var(--exp-suave);margin:0}
.expedicion-escena{margin:0;background:#081d25;border-top:1px solid #a5b2a12e;border-bottom:1px solid #a5b2a12e}
.expedicion-lienzo{position:relative;overflow:hidden;aspect-ratio:16/6.5;isolation:isolate}
.expedicion-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;filter:brightness(.72) saturate(.72)}
.expedicion[data-estado="despertando"] .expedicion-fondo{filter:brightness(.93) saturate(.96)}
.expedicion[data-estado="restaurado"] .expedicion-fondo{filter:none}
.expedicion-atmosfera{position:absolute;inset:0;background:linear-gradient(0deg,#061b21bf 0%,#071e2630 26%,transparent 60%);pointer-events:none}
.expedicion-halo{position:absolute;inset:0;background:radial-gradient(ellipse at 51% 35%,#abe8e92b 0%,transparent 51%);opacity:.25;pointer-events:none}
.expedicion[data-estado="dormido"] .expedicion-halo{display:none}
.expedicion-instrumento{position:absolute;bottom:6%;width:clamp(34px,5.5vw,57px);aspect-ratio:1;display:grid;place-items:center;color:#aec0b4;opacity:.38;border:1px solid #899da04d;border-radius:50%;background:#132c30a6;transform:translateX(-50%);box-sizing:border-box;padding:8px}
.expedicion-instrumento[data-instrumento="entrada"]{left:10%}.expedicion-instrumento[data-instrumento="lente"]{left:26%}.expedicion-instrumento[data-instrumento="rumbo"]{left:42%}.expedicion-instrumento[data-instrumento="esfera"]{left:58%}.expedicion-instrumento[data-instrumento="lampara"]{left:74%}.expedicion-instrumento[data-instrumento="vitral"]{left:90%}
.expedicion-instrumento svg{width:100%;height:100%;overflow:visible}
.expedicion-instrumento[data-recuperado="true"]{opacity:1;color:#fff0b8;background:#1a4544e6;border-color:#e0c589;box-shadow:0 0 20px #d6c07f4d,inset 0 0 15px #e5d09618}
.expedicion-escena-pie{display:flex;flex-direction:column;gap:7px;padding:16px 28px 18px;background:#0e262b;color:#d2d9d0}
.expedicion-escena-pie strong{font:20px/1.35 Georgia,serif;color:#efe5c8}
.expedicion-escena-pie span{font:12px/1.7 'Segoe UI',sans-serif;max-width:900px}
.expedicion-itinerario-titulo{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;padding:24px 28px 14px}
.expedicion-itinerario-titulo h4{font:21px/1.3 Georgia,serif;margin:0;color:var(--exp-tinta)}
.expedicion-itinerario-titulo p{font:12px/1.6 'Segoe UI',sans-serif;color:var(--exp-suave);margin:0}
.expedicion-capitulos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;padding:0 28px}
.expedicion-capitulo{min-width:0;padding:0;overflow:hidden;border:1px solid #74867e70;border-radius:8px;color:var(--exp-tinta);background:#153235;text-align:left;cursor:pointer;transition:border-color .15s}
.expedicion-capitulo>img{display:block;width:100%;height:76px;object-fit:cover;filter:saturate(.6) brightness(.86)}
.expedicion-capitulo[aria-pressed="true"]{border-color:#f0d092;box-shadow:0 0 0 2px #f0d09280;background:#234943}
.expedicion-capitulo[aria-pressed="true"]>img,.expedicion-capitulo[data-completado="true"]>img{filter:none}
.expedicion-capitulo:hover{border-color:#f0d092}
.expedicion-capitulo-texto{padding:10px;display:flex;flex-direction:column;gap:6px}
.expedicion-capitulo-texto small{color:#cccdbb;font:10px/1.4 'Segoe UI',sans-serif}
.expedicion-capitulo[data-completado="true"] small{color:#b5ead0}
.expedicion-capitulo-texto strong{font:14px/1.4 Georgia,serif;font-weight:normal;min-height:39px}
.expedicion-pagina{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(230px,.85fr);gap:24px 32px;margin:24px 28px 0;padding:26px 0 21px;border-top:1px solid #a1b0993b}
.expedicion-historia h4{font:30px/1.2 Georgia,serif;color:#f5ecd4;margin:0 0 16px}
.expedicion-relato{font:15px/1.85 'Segoe UI',sans-serif;color:#e1e1d2;margin:0 0 20px;max-width:620px}
.expedicion-hallazgo{display:flex;align-items:center;gap:17px;border:1px solid #a2b09652;border-radius:10px;background:#0b242799;padding:17px;color:#ccd5c4}
.expedicion-hallazgo>svg{width:49px;height:49px;flex:0 0 49px;color:#d0bc80}
.expedicion-hallazgo small{font:10px/1.5 'Segoe UI',sans-serif;text-transform:uppercase;letter-spacing:1px;color:#a7beb1;display:block}
.expedicion-hallazgo strong{display:block;font:19px/1.35 Georgia,serif;margin:4px 0 7px;color:#ecdcae}
.expedicion-hallazgo p{font:12px/1.7 'Segoe UI',sans-serif;margin:0}
.expedicion-hallazgo[data-descubierto="true"]{background:#23473b77;border-color:#9dc4a55e}
.expedicion-releer{font:12px/1.8 'Segoe UI',sans-serif;color:var(--exp-suave);margin-top:15px}
.expedicion-releer summary{cursor:pointer;color:#e0c48c;padding:7px 0;width:fit-content}
.expedicion-releer p{margin:7px 0 0}
.expedicion-jugar{display:flex;align-items:stretch;flex-direction:column;gap:10px;min-width:0}
.expedicion-obra-imagen{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid #b8b39466;border-radius:10px;box-sizing:border-box}
.expedicion-obra-nombre{font:19px/1.4 Georgia,serif;color:#f1e4c1}
.expedicion-pista{font:12px/1.65 'Segoe UI',sans-serif;color:var(--exp-suave);margin:0 0 3px}
.expedicion .expedicion-boton-jugar{min-height:58px;border:1px solid #c5b571;background:#215448 var(--expedicion-boton) center/100% 100% no-repeat;color:#fff9d9;text-shadow:0 1px 3px #082522;font:600 15px/1.5 'Segoe UI',sans-serif;white-space:normal;border-radius:9px;padding:13px 18px;box-shadow:0 5px 15px #051b2552;cursor:pointer}
.expedicion .expedicion-boton-jugar:hover{filter:brightness(1.12)}
.expedicion-a-tu-ritmo{color:#bbcbbd;font:11px/1.6 'Segoe UI',sans-serif;text-align:center}
.expedicion-pasos{grid-column:1/-1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:4px}
.expedicion-paso{border:1px solid #a8b99a66;background:#153736;color:#e1d6b4;border-radius:7px;padding:11px 14px;font:12px/1.4 'Segoe UI',sans-serif;min-height:42px;cursor:pointer}
.expedicion-reglas{font:11px/1.8 'Segoe UI',sans-serif;color:#c2c9bd;border-top:1px solid #a1b0993b;padding:17px 28px 20px;margin:0}
.expedicion-final{padding:28px 32px;background:radial-gradient(ellipse at top,#4761464a,transparent 80%),#172f30;border-bottom:1px solid #d1bd784f}
.expedicion-final h4{font:31px/1.25 Georgia,serif;color:#f1daa3;margin:4px 0 17px}
.expedicion-final>p:not(.ceja){max-width:870px;font:15px/1.9 'Segoe UI',sans-serif;color:#e4e0cd;margin:0}
.expedicion-final .expedicion-despedida{font-size:12px!important;margin-top:15px!important;color:#becfba!important}
.expedicion[data-animado="true"] .expedicion-halo{animation:expedicion-luz 8s ease-in-out infinite}
@keyframes expedicion-luz{0%,100%{opacity:.25}50%{opacity:.65}}
@media(max-width:900px){.expedicion-capitulos{grid-template-columns:repeat(3,minmax(0,1fr))}.expedicion-capitulo>img{height:80px}.expedicion-capitulo-texto strong{min-height:0}.expedicion-pagina{gap:20px;grid-template-columns:minmax(0,1.2fr) minmax(220px,1fr)}.expedicion-cabecera h3{font-size:30px}.expedicion-historia h4{font-size:26px}.expedicion-lienzo{aspect-ratio:16/8}}
@media(max-width:600px){.viajes-vistas{display:grid;grid-template-columns:1fr 1fr;gap:7px}.viajes-vista{padding:10px;font-size:12px}.panel-viajes .expedicion-cabecera{padding:21px 17px 19px}.expedicion-cabecera h3{font-size:27px}.panel-viajes .expedicion-cabecera>p:last-child{font-size:13px;line-height:1.75}.expedicion-lienzo{aspect-ratio:4/3}.expedicion-fondo{object-position:center}.expedicion-instrumento{width:35px;padding:5px;bottom:7%}.expedicion-escena-pie{padding:15px 17px}.expedicion-escena-pie strong{font-size:18px}.expedicion-itinerario-titulo{padding:22px 17px 13px}.expedicion-itinerario-titulo h4{font-size:20px}.expedicion-capitulos{padding:0 17px;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.expedicion-capitulo>img{height:72px}.expedicion-capitulo-texto{padding:9px}.expedicion-capitulo-texto strong{font-size:14px}.expedicion-pagina{grid-template-columns:1fr;margin:20px 17px 0;padding-top:21px}.expedicion-historia h4{font-size:26px}.expedicion-relato{font-size:14px}.expedicion-jugar{max-width:none}.expedicion-obra-imagen{aspect-ratio:16/9}.expedicion-reglas{padding:15px 17px 18px}.expedicion-final{padding:24px 18px}.expedicion-final h4{font-size:26px}.expedicion-final>p:not(.ceja){font-size:14px}.expedicion-paso{padding:10px;font-size:11px}.expedicion-hallazgo{padding:14px;gap:13px}.expedicion-hallazgo>svg{width:38px;height:38px;flex-basis:38px}}
@media(prefers-reduced-motion:reduce){.expedicion *{animation:none!important;transition:none!important}}

.panel-floraciones{width:min(1080px,calc(100vw - 28px));max-height:90dvh;padding:0 24px 24px;color:#f5ead1;background:#122d25;border:1px solid #a9935c;border-radius:22px;overflow:auto}
.panel-floraciones .cerrar{z-index:2;background:#17342ce8;color:#fff3d6}
.floraciones-portada{min-height:235px;display:flex;flex-direction:column;justify-content:flex-end;margin:0 -24px 20px;padding:44px 30px 26px;background:linear-gradient(90deg,#09241fe8 0%,#102820a8 48%,#12302728 100%),url('../assets/interfaz/evolucion-165/jardin-recuerdos.webp') center 55%/cover;border-radius:21px 21px 0 0}
.floraciones-portada h2{font-size:clamp(27px,4vw,42px);margin:6px 0 10px;color:#fff0c7;font-family:Georgia,serif;font-weight:400;line-height:1.13}
.floraciones-portada p{max-width:580px;line-height:1.6;margin:0}
.floraciones-portada .ceja,.refugio-floraciones .ceja{color:#e0c98e;letter-spacing:.12em;font-size:11px}
.floraciones-barra{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.floraciones-barra label{display:flex;align-items:center;gap:10px;font-size:13px}
.floraciones-filtro{background:#213e31;color:#fff0d6;border:1px solid #917e53;padding:9px;border-radius:8px}
.floraciones-cuenta{color:#d9cda9;margin:0;font-size:14px}
.floraciones-aviso{font-size:13px;color:#d0cfad;line-height:1.6;margin:15px 0}
.floraciones-aviso[data-error="true"]{border-left:3px solid #edc480;padding-left:12px;color:#ffe0ab}
.floraciones-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:15px;margin-top:18px}
.floraciones-tarjeta{display:flex;flex-direction:column;background:linear-gradient(135deg,#284a3be8,#162c23);padding:12px;border:1px solid #78825980;border-radius:15px;box-shadow:0 5px 17px #0002}
.floraciones-visual{height:176px;position:relative;display:grid;place-items:end center;isolation:isolate;overflow:hidden;border-radius:9px;background:#0d211c}
.floraciones-obra{position:absolute;width:100%;height:100%;object-fit:cover;opacity:.23;filter:blur(1px);z-index:-1}
.floraciones-planta{height:165px;width:165px;max-width:90%;filter:drop-shadow(0 6px 6px #0008)}
.floraciones-planta .jardin-vivo,.refugio-floracion-planta .jardin-vivo{width:100%;height:100%;display:grid;place-items:center}
.floraciones-planta img,.floraciones-planta svg,.refugio-floracion-planta img,.refugio-floracion-planta svg{width:100%;height:100%;object-fit:contain}
.floraciones-planta [data-visible="false"],.refugio-floracion-planta [data-visible="false"],.floraciones-brote [data-visible="false"]{opacity:0}
.floraciones-tarjeta h3{margin:13px 0 5px;font-family:Georgia,serif;font-weight:400;font-size:20px;color:#f4d99f}
.floraciones-obra-nombre{margin:0;font-size:14px;line-height:1.45}
.floraciones-fecha{margin:8px 0 4px;color:#cccfb5;font-size:12px;line-height:1.5}
.floraciones-piezas{color:#abbfa8;font-size:12px;margin:0 0 16px}
.floraciones-elegir{margin-top:auto;min-height:42px;font-size:12px!important;white-space:normal!important}
.floraciones-elegir[aria-pressed="true"],.floraciones-acceso{background:linear-gradient(#123f3180,#12332680),url('../assets/interfaz/evolucion-165/boton-esmeralda.webp') center/100% 100%;color:#ffe9ba;border-color:#b39659}
.panel-floraciones button:focus-visible,.refugio-floraciones button:focus-visible{outline:3px solid #eed897;outline-offset:3px}
.floraciones-vacio{text-align:center;max-width:500px;margin:25px auto;color:#dadbbf;line-height:1.65}
.floraciones-vacio h3{font-family:Georgia,serif;font-size:25px;font-weight:400;color:#f4d99f}
.floraciones-brote{height:130px;width:110px;margin:auto}.floraciones-brote .jardin-vivo,.floraciones-brote svg{height:100%;width:100%}
.floraciones-paginas{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:24px}
.floraciones-sin-seleccion{grid-column:1/-1;line-height:1.7;padding:24px 0;color:#d9cda9}
.refugio-floraciones{margin-top:18px;padding:18px;background:linear-gradient(120deg,#18382ee8,#183025e8);border:1px solid #9b87545c;border-radius:15px;color:#eee2c2}
.refugio-floraciones header{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}.refugio-floraciones header h3{margin:5px 0;font:25px Georgia,serif;color:#f6deab}.refugio-floraciones .ceja{margin:0}
.refugio-floraciones-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:12px;margin-top:12px}
.refugio-floracion{margin:0;text-align:center;min-width:0;padding:8px;border-bottom:3px solid #91764c;border-radius:0 0 6px 6px;background:linear-gradient(transparent,#b19a4e0b)}
.refugio-floracion-planta{height:115px;width:115px;max-width:100%;margin:auto;filter:drop-shadow(0 5px 5px #0005)}
.refugio-floracion figcaption{display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere;line-height:1.4}.refugio-floracion strong{font-size:13px;color:#f1d99c}.refugio-floracion span{font-size:12px}.refugio-floracion small{font-size:10px;color:#bcc6a9}
.panel-floraciones [hidden],.refugio-floraciones[hidden]{display:none!important}
@media(max-width:540px){.panel-floraciones{padding:0 15px 20px}.floraciones-portada{margin:0 -15px 15px;padding:42px 20px 22px;min-height:220px}.floraciones-lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.floraciones-tarjeta{padding:9px}.floraciones-visual{height:135px}.floraciones-planta{height:128px;width:128px}.floraciones-tarjeta h3{font-size:17px}.floraciones-obra-nombre{font-size:12px}.floraciones-fecha{font-size:11px}.floraciones-barra label{width:100%;justify-content:space-between}.refugio-floraciones{padding:13px}.refugio-floraciones-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Arte generado, texto HTML y blancos de toque independientes de la textura. */
:root {
  --boton-esmeralda-165:url('../assets/interfaz/evolucion-165/boton-esmeralda.webp');
  --boton-zafiro-165:url('../assets/interfaz/evolucion-165/boton-zafiro.webp');
}
dialog[open] .expedicion .expedicion-boton-jugar,
dialog[open] .floraciones-acceso,
dialog[open] .floraciones-elegir,
dialog[open] #expedicion-victoria,
dialog[open] #recompensas-observatorio,
.mesa-cabecera-recogida .boton,
.mesa-flexible-acciones .boton {
  border:0;border-image:none!important;border-radius:14px;
  background:var(--boton-esmeralda-165) center/100% 100% no-repeat;
  color:#fff3d1;text-shadow:0 1px 3px #001916;
  box-shadow:none;min-height:64px;padding:19px 25px 22px;
  font:600 14px/1.35 'Segoe UI',sans-serif;
  text-align:center;white-space:normal;cursor:pointer;
}
.mesa-cabecera-recogida .boton,.mesa-flexible-acciones .boton,
dialog[open] .floraciones-elegir[aria-pressed="false"] {
  background-image:var(--boton-zafiro-165);
}
.mesa-cabecera-recogida .boton {min-height:50px;padding:15px 23px 17px;min-width:170px;font-size:13px}
dialog[open] .floraciones-elegir {font-size:12px;min-height:65px;padding-inline:20px}
dialog[open] .expedicion .expedicion-boton-jugar:hover,
dialog[open] .floraciones-acceso:hover,
dialog[open] .floraciones-elegir:hover,
dialog[open] #expedicion-victoria:hover,
.mesa-cabecera-recogida .boton:hover,
.mesa-flexible-acciones .boton:hover {filter:brightness(1.14);background-color:transparent}
dialog.panel-floraciones[open] .floraciones-elegir:hover,
dialog.panel-floraciones[open] .floraciones-acceso:hover,
dialog.panel-viajes[open] .expedicion-boton-jugar:hover,
dialog[open] #expedicion-victoria:hover,
dialog[open] #recompensas-observatorio:hover {
  background:var(--boton-esmeralda-165) center/100% 100% no-repeat;
}
dialog.panel-floraciones[open] .floraciones-elegir[aria-pressed="false"]:hover {background-image:var(--boton-zafiro-165)}
.expedicion .expedicion-capitulo {border-image:none!important}
.mesa-cabecera-recogida .boton:focus-visible,.mesa-flexible-acciones .boton:focus-visible {outline:3px solid var(--foco,#e9cf80);outline-offset:2px}
dialog.panel-floraciones[open] {padding-top:0}
dialog.panel-floraciones[open] .floraciones-portada {padding-right:56px}
.visual-ritmo {display:grid;gap:8px;margin-block:18px;min-width:0}
.visual-ritmo select {max-width:100%;min-height:44px}
@media(max-width:540px) {
  .mesa-cabecera-recogida {gap:4px}
  .mesa-cabecera-recogida .boton {min-width:0;flex:1 1 105px;min-height:48px;padding:13px 14px 16px;font-size:11px}
  dialog[open] .floraciones-elegir {padding-inline:13px;font-size:11px;min-height:72px}
}
@media(forced-colors:active) {
  dialog[open] .expedicion .expedicion-boton-jugar,dialog[open] .floraciones-elegir,
  .mesa-cabecera-recogida .boton,.mesa-flexible-acciones .boton {background:ButtonFace;color:ButtonText;border:1px solid ButtonText}
}

.licencia-uso { width:min(680px,calc(100% - 24px)); max-height:90dvh; text-align:left; padding:clamp(22px,4vw,38px); }
.licencia-uso h2 { font-size:clamp(26px,4vw,36px); }
.licencia-uso p,.licencia-uso li { line-height:1.6; overflow-wrap:anywhere; }
.licencia-uso-resumen { padding-left:1.3em; margin:18px 0; }
.licencia-uso-resumen li+li { margin-top:10px; }
.licencia-uso a { color:inherit; text-decoration:underline; text-underline-offset:4px; font-weight:600; }
.licencia-uso a:focus-visible,.licencia-aceptacion:focus-within { outline:3px solid var(--oro,#dbb46b); outline-offset:4px; border-radius:5px; }
.licencia-titular,.licencia-nota-local,.licencia-enlace-nueva { font-size:.85em; }
.licencia-aceptacion { display:flex; align-items:flex-start; gap:12px; margin-top:20px; min-height:44px; cursor:pointer; }
.licencia-aceptacion input { flex:0 0 22px; width:22px; height:22px; margin:3px 0 0; accent-color:#cda959; }
.licencia-acciones { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.licencia-acciones .boton { flex:1 1 180px; min-height:48px; white-space:normal; }
.licencia-revisar { margin:12px auto; }
.licencia-revisar[hidden] { display:none; }

:root { --iconos-botones: url("../assets/interfaz/iconos-botones.png"); }
.icono-control { background-image:url("../assets/interfaz/iconos-controles.png"); }
.medalla-arte { background-image:url("../recursos/recompensas/medallas-ilustradas.png"); }
.miga-sprite { background-image:url("../recursos/companero/miga-sprites.png"); }
.portada-boton::before { background-image:url("../recursos/portada/botones-secundarios.webp"); }
.portada-boton.principal-portada::before { background-image:url("../recursos/portada/botones-principal.webp"); }
.taller-objeto-arte { background-image:url("../recursos/refugio/objetos.webp"); }

/* Selector bilingüe legible antes de aceptar la licencia o iniciar una partida. */
html:not([data-idioma-listo]) .portada-menu nav{visibility:hidden}
.selector-idioma{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:4px;border:1px solid #cfac65;border-radius:14px;background:#102c2de8;box-shadow:0 3px 14px #0004;color:#fff0cf;max-width:100%;box-sizing:border-box}
.selector-idioma .idioma-boton{appearance:none;min-width:94px;min-height:44px;padding:9px 16px;border:1px solid transparent;border-radius:10px;background:transparent;color:#eee4cc;font:600 14px/1.25 "Segoe UI",sans-serif;text-align:center;cursor:pointer;touch-action:manipulation}
.selector-idioma .idioma-boton[aria-pressed="true"]{border-color:#dfbd79;background:linear-gradient(135deg,#dfbd79,#b89148);color:#142d2b;box-shadow:inset 0 1px 0 #fff8}
.selector-idioma .idioma-boton:hover:not([aria-pressed="true"]){background:#ffffff12;color:white}
.selector-idioma .idioma-boton:focus-visible{outline:3px solid #fff1b6;outline-offset:3px}
.licencia-uso>.selector-idioma{margin:0 0 16px}
@media(max-width:359px){.selector-idioma .idioma-boton{min-width:90px;padding-inline:12px}}

/* La portada utiliza arte propio; las etiquetas siguen siendo texto real.
   Las licencias y los documentos conservan el selector compacto anterior. */
#portada-inicio .portada-menu>.selector-idioma{
  position:absolute;z-index:7;top:clamp(12px,1.3vw,18px);left:clamp(12px,1.3vw,18px);
  display:flex;flex-wrap:nowrap;gap:6px;margin:0;padding:0;border:0;border-radius:0;
  background:none;box-shadow:none;max-width:calc(100% - 24px)
}
#portada-inicio .selector-idioma .idioma-boton{
  position:relative;display:block;box-sizing:border-box;flex:0 0 auto;
  width:180px;height:60px;min-width:0;min-height:44px;padding:0;border:0;
  border-image:none!important;border-radius:12px;background-color:transparent;
  background-position:center;background-size:100% 100%;background-repeat:no-repeat;
  color:#fff2d2;font:700 15px/1.2 Georgia,serif;text-shadow:0 1px 3px #071922;
  box-shadow:none;outline:0;transition:filter .16s ease,translate .16s ease
}
#portada-inicio .idioma-boton[data-idioma-elegir="en"]{background-image:url('../recursos/portada/idioma-en.png')}
#portada-inicio .idioma-boton[data-idioma-elegir="es"]{background-image:url('../recursos/portada/idioma-es.png')}
#portada-inicio .idioma-boton .idioma-etiqueta{
  position:absolute;inset:12% 10% 16% 38%;display:flex;align-items:center;justify-content:center;
  white-space:nowrap;pointer-events:none
}
#portada-inicio .selector-idioma .idioma-boton[aria-pressed="true"]{
  background-color:transparent;color:#fff9e4;box-shadow:none;outline:0;
  filter:brightness(1.12) drop-shadow(0 0 5px #e6bd6166)
}
#portada-inicio .idioma-boton[aria-pressed="true"]::after{
  content:"";position:absolute;left:58%;right:30%;bottom:5%;height:3px;
  border-radius:2px;background:#ffe7a8;box-shadow:0 0 5px #eac477;pointer-events:none
}
#portada-inicio .selector-idioma .idioma-boton:hover{
  background-color:transparent;filter:brightness(1.2) drop-shadow(0 2px 5px #0007);translate:0 -1px
}
#portada-inicio .selector-idioma .idioma-boton:active{translate:0 1px}
#portada-inicio .selector-idioma .idioma-boton:focus-visible{
  outline:3px solid #fff1b6;outline-offset:3px
}
@media(max-width:700px){
  #portada-inicio .selector-idioma .idioma-boton{width:168px;height:56px;font-size:14px}
}
@media(max-width:560px){
  #portada-inicio .portada-menu>.selector-idioma{flex-direction:column;gap:2px}
  #portada-inicio .selector-idioma .idioma-boton{width:144px;height:48px;font-size:13px}
}
html[data-movimiento="no"] #portada-inicio .idioma-boton{transition:none;translate:none}
@media(prefers-reduced-motion:reduce){#portada-inicio .idioma-boton{transition:none;translate:none}}

/* La preferencia es independiente del ambiente: al quitarla reaparece todo
   el arte original. Cargar después de las pieles ilustradas y los idiomas. */
/* Las cifras y notas pequeñas sobre los paneles claros necesitaban más tinta;
   se conservan los materiales, bordes y colores principales del ambiente. */
:root[data-estilo="mediterraneo"] { --suave:#70543d; }
:root[data-estilo="papiro"] { --suave:#6c542e; }
/* Ahorro conserva el velo que separa el diálogo, evitando recomponer el
   lienzo completo con desenfoque detrás de los controles. */
html[data-calidad-visual="ahorro"] dialog::backdrop { backdrop-filter:none; -webkit-backdrop-filter:none; }
.accesibilidad-dialogo { box-sizing:border-box; width:min(480px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; }
.accesibilidad-dialogo .accesibilidad-contraste { display:flex; align-items:center; gap:12px; min-height:48px; padding:10px 12px; border:1px solid var(--linea); border-radius:8px; text-align:left; cursor:pointer; }
.accesibilidad-contraste input { flex:0 0 24px; width:24px; height:24px; margin:0; accent-color:var(--acento); }
.accesibilidad-contraste span { min-width:0; line-height:1.4; }
.accesibilidad-dialogo input:focus-visible { outline:3px solid var(--foco); outline-offset:4px; }
html:is([data-texto="grande"],[data-texto="extra"]) .zoom-controles output { font-size:var(--lectura-ayuda)!important; min-width:3.2em; }
html[data-texto="extra"] #dialogo-herramientas-movil .mesa-herramientas-utilidades { grid-template-columns:minmax(0,1fr); }
html[data-texto="extra"] #dialogo-herramientas-movil button { white-space:normal; overflow-wrap:break-word; }
html:is([data-texto="grande"],[data-texto="extra"]) #dialogo-herramientas-movil .premio-fichas-compacto { width:100%; max-width:none; margin-top:12px; min-height:44px; }
@media(max-width:760px) {
  /* El texto ampliado necesita espacio para jugar: se recoge la decoración
     inferior de la cabecera y se alinean sus controles, sin reducir la letra. */
  html:is([data-texto="grande"],[data-texto="extra"]) body.concentracion #herramientas-partida #rincon-mesa { display:none!important; }
  html:is([data-texto="grande"],[data-texto="extra"]) body.concentracion #herramientas-partida .herramientas-avanzadas { margin:0; padding:0; border:0; }
  html[data-texto="extra"] #herramientas-movil-barra { grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto; }
  html[data-texto="extra"] #herramientas-movil-barra #progreso-concentracion { grid-column:auto; }
  html[data-texto="extra"] #herramientas-movil-barra #boton-imagen .icono-ilustrado { display:none; }
  html:is([data-texto="grande"],[data-texto="extra"]) body.concentracion #herramientas-partida #controles-partida :is(.control-vista,.control-deshacer) { flex-direction:row; min-height:48px; padding:4px; }
  html:is([data-texto="grande"],[data-texto="extra"]) body.concentracion #herramientas-partida #controles-partida :is(.control-vista,.control-deshacer) > :is(.icono-control,.icono-deshacer) { display:none; }
  html:is([data-texto="grande"],[data-texto="extra"]) body.concentracion #controles-partida .premio-fichas-compacto > span { display:block; }
  html:is([data-texto="grande"],[data-texto="extra"]) body.concentracion #controles-partida .premio-fichas-compacto small { display:none; }
  html:is([data-texto="grande"],[data-texto="extra"]) .movil-estado { min-height:1.4em; }
  html:is([data-texto="grande"],[data-texto="extra"]) .movil-pestanas button { flex-direction:row; gap:4px; }
  html:is([data-texto="grande"],[data-texto="extra"]) .movil-pestanas button > span:first-child { width:20px; height:20px; flex-basis:20px; }
}

html[data-contraste="alto"] {
  color-scheme:dark;
  --accesibilidad-fondo:#101820;
  --accesibilidad-panel:#17232d;
  --accesibilidad-control:#152d3b;
  --accesibilidad-hover:#24465a;
  --accesibilidad-texto:#f6f8fc;
  --accesibilidad-secundario:#d4deea;
  --accesibilidad-borde:#c7d7e5;
  --accesibilidad-activo:#f8e18a;
  --accesibilidad-inactivo:#aebbc8;
  --papel:var(--accesibilidad-fondo)!important;
  --blanco:var(--accesibilidad-panel)!important;
  --tinta:var(--accesibilidad-texto)!important;
  --suave:var(--accesibilidad-secundario)!important;
  --acento:var(--accesibilidad-activo)!important;
  --acento-fuerte:#fff0b4!important;
  --acento-texto:var(--accesibilidad-fondo)!important;
  --foco:var(--accesibilidad-activo)!important;
  --linea:var(--accesibilidad-borde)!important;
  --boton-fondo:var(--accesibilidad-control)!important;
  --boton-hover:var(--accesibilidad-hover)!important;
  --boton-borde:var(--accesibilidad-borde)!important;
  --panel-arriba:var(--accesibilidad-panel)!important;
  --panel-abajo:var(--accesibilidad-panel)!important;
  --panel-borde:var(--accesibilidad-borde)!important;
  --pie-fondo:var(--accesibilidad-panel)!important;
  --progreso-fondo:var(--accesibilidad-fondo)!important;
  --ayuda-fondo:var(--accesibilidad-control)!important;
  --ayuda-borde:var(--accesibilidad-borde)!important;
  --ayuda-tinta:var(--accesibilidad-texto)!important;
  --ayuda-hover:var(--accesibilidad-hover)!important;
  --verde:var(--accesibilidad-activo)!important;
  --accion-verde:var(--accesibilidad-control)!important; --accion-verde-tinta:var(--accesibilidad-texto)!important; --accion-verde-borde:var(--accesibilidad-borde)!important;
  --accion-azul:var(--accesibilidad-control)!important; --accion-azul-tinta:var(--accesibilidad-texto)!important; --accion-azul-borde:var(--accesibilidad-borde)!important;
  --accion-violeta:var(--accesibilidad-control)!important; --accion-violeta-tinta:var(--accesibilidad-texto)!important; --accion-violeta-borde:var(--accesibilidad-borde)!important;
  --accion-oro:var(--accesibilidad-control)!important; --accion-oro-tinta:var(--accesibilidad-texto)!important; --accion-oro-borde:var(--accesibilidad-borde)!important;
  --accion-rojo:var(--accesibilidad-control)!important; --accion-rojo-tinta:var(--accesibilidad-texto)!important; --accion-rojo-borde:var(--accesibilidad-borde)!important;
  --barra-fondo:var(--accesibilidad-fondo)!important; --barra-borde:var(--accesibilidad-borde)!important;
  --barra-tirador:var(--accesibilidad-borde)!important; --barra-tirador-borde:var(--accesibilidad-activo)!important;
  --velo:#000d!important;
}
html[data-contraste="alto"] body { color:var(--accesibilidad-texto); background:var(--accesibilidad-fondo)!important; }
html[data-contraste="alto"] body :is(dialog,.vista-controles,.navegacion-movil,.menu-piezas,.aviso,.selector-idioma,.mesa-herramientas-panel,.minimapa,.referencia-cabecera,.pie-mesa,.reloj-compacto,.mando-accion,.mando-nota,.mando-estado,.mando-emblema,kbd) {
  color:var(--accesibilidad-texto)!important;
  background:var(--accesibilidad-panel)!important;
  border-color:var(--accesibilidad-borde)!important;
  text-shadow:none!important;
}
html[data-contraste="alto"] body :where(button,select,textarea,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),[role="button"]) {
  color:var(--accesibilidad-texto)!important;
  background:var(--accesibilidad-control)!important;
  border:2px solid var(--accesibilidad-borde)!important;
  border-image:none!important;
  box-shadow:none!important;
  text-shadow:none!important;
  filter:none!important;
  opacity:1!important;
  min-height:44px;
}
/* Las etiquetas secundarias no heredan los tonos de las pieles de cada botón.
   Los atlas y las imágenes siguen mostrando sus iconos y miniaturas. */
html[data-contraste="alto"] body :is(button,[role="button"]) :is(span,strong,small,em,b),
html[data-contraste="alto"] body :is(.movil-estado,.titulo-vista,.numero-vista,.zoom-controles output,.mesa-herramientas-pista,.seleccion-texto,.etiqueta-control,.ceja,.nota-guardado) {
  color:inherit!important;
  text-shadow:none!important;
}
html[data-contraste="alto"] body :is(label,legend,summary,output),
html[data-contraste="alto"] dialog :is(h2,h3,h4,p),
html[data-contraste="alto"] .mesa-herramientas-panel h3 { color:var(--accesibilidad-texto)!important; }
html[data-contraste="alto"] body :is(input,textarea)::placeholder { color:var(--accesibilidad-secundario)!important; opacity:1; }
html[data-contraste="alto"] body select option { color:var(--accesibilidad-texto)!important; background:var(--accesibilidad-control)!important; }
html[data-contraste="alto"] body :is(button,[role="button"]):hover:not(:disabled):not([aria-disabled="true"]) { background:var(--accesibilidad-hover)!important; }
html[data-contraste="alto"] body :is(button,[role="button"]):is([aria-pressed="true"],[aria-selected="true"],[aria-checked="true"],[aria-expanded="true"]) {
  color:var(--accesibilidad-fondo)!important;
  background:var(--accesibilidad-activo)!important;
  border-color:var(--accesibilidad-activo)!important;
  outline:3px double var(--accesibilidad-fondo)!important;
  outline-offset:-6px!important;
}
html[data-contraste="alto"] body :is(button,[role="button"]):is([aria-pressed="true"],[aria-selected="true"],[aria-checked="true"],[aria-expanded="true"]):hover:not(:disabled):not([aria-disabled="true"]) { background:var(--acento-fuerte)!important; }
html[data-contraste="alto"] body :is(button,select,input,[role="button"]):is(:disabled,[aria-disabled="true"]) {
  color:var(--accesibilidad-inactivo)!important;
  background:var(--accesibilidad-fondo)!important;
  border-color:var(--accesibilidad-inactivo)!important;
  border-style:dashed!important;
  opacity:1!important;
  cursor:default;
}
html[data-contraste="alto"] body :is(button,a,select,input,textarea,summary,[tabindex]):focus-visible,
html[data-contraste="alto"] body .mando-foco {
  outline:3px solid var(--accesibilidad-activo)!important;
  outline-offset:4px!important;
  box-shadow:0 0 0 4px var(--accesibilidad-fondo)!important;
}
html[data-contraste="alto"] body input:is([type="checkbox"],[type="radio"]) { accent-color:var(--accesibilidad-activo); }
html[data-contraste="alto"] body a { color:var(--accesibilidad-activo)!important; text-decoration:underline; text-underline-offset:.2em; }
html[data-contraste="alto"] body .portada-boton::before { background:none!important; }
html[data-contraste="alto"] #portada-inicio .idioma-boton .idioma-etiqueta { position:static; padding:8px; white-space:normal; }
html[data-contraste="alto"] #portada-inicio .idioma-boton[aria-pressed="true"]::after { content:none; }
html[data-contraste="alto"] :is(.portada-legal,#portada-estado,.control-giro-grados,.bandejas-cantidad) { background:var(--accesibilidad-fondo)!important; color:var(--accesibilidad-texto)!important; border-radius:5px; }
html[data-contraste="alto"] .portada-categoria-texto { background:#101820e8; }
html[data-contraste="alto"] .control-giro-grados { border:1px solid var(--accesibilidad-borde); }
html[data-contraste="alto"] .sonido-volumen::-webkit-slider-runnable-track { border:1px solid var(--accesibilidad-borde); }
html[data-contraste="alto"] .sonido-volumen::-moz-range-track { border:1px solid var(--accesibilidad-borde); }
html[data-contraste="alto"] .mesa-divisor::before { opacity:1; }
html[data-contraste="alto"] .taller-habitacion [data-elemento][data-seleccionado="true"] { outline:3px solid var(--accesibilidad-texto)!important; outline-offset:4px; box-shadow:0 0 0 4px var(--accesibilidad-fondo)!important; }

/* Los colores elegidos por Windows tienen prioridad sobre nuestra paleta. */
@media (forced-colors:active) {
  html[data-contraste="alto"] { --accesibilidad-fondo:Canvas; --accesibilidad-panel:Canvas; --accesibilidad-control:ButtonFace; --accesibilidad-hover:ButtonFace; --accesibilidad-texto:CanvasText; --accesibilidad-secundario:CanvasText; --accesibilidad-borde:ButtonText; --accesibilidad-activo:Highlight; --accesibilidad-inactivo:GrayText; }
  html[data-contraste="alto"] { --acento-fuerte:Highlight!important; }
  html[data-contraste="alto"] body :is(button,[role="button"]):is([aria-pressed="true"],[aria-selected="true"],[aria-checked="true"],[aria-expanded="true"]) { color:HighlightText!important; }
}