/* hecho por r3k1 */
#app {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  --aviso-abajo: calc(var(--seguro-abajo) + 16px);
}
#app.con-dock { --aviso-abajo: calc(var(--seguro-abajo) + var(--alto-dock) + 14px); }

#fondo {
  position: absolute;
  inset: 0;
  z-index: var(--z-fondo);
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 12px 12px, rgba(255, 143, 183, .16) 0 3px, transparent 3.5px) 0 0 / 34px 34px,
    radial-gradient(circle at 29px 29px, rgba(181, 140, 243, .13) 0 2.4px, transparent 3px) 0 0 / 34px 34px,
    radial-gradient(120% 60% at 50% 108%, rgba(255, 196, 222, .55) 0%, transparent 62%),
    radial-gradient(70% 40% at 92% 6%, rgba(233, 220, 255, .7) 0%, transparent 70%),
    var(--fondo-degradado);
  transition: opacity var(--d-media) var(--c-salir);
}
#fondo.oculto { opacity: 0; visibility: hidden; transition: opacity var(--d-media) var(--c-salir), visibility 0s var(--d-media); }
#fondo.oculto .flota { animation-play-state: paused; }
#fondo .flota {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--t);
  opacity: var(--o, .9);
  animation: fondo-flota var(--d, 14s) ease-in-out var(--retraso, 0s) infinite alternate;
  will-change: transform;
  transition: opacity var(--d-media) var(--c-salir);
}
#fondo.liso .flota { opacity: 0; animation-play-state: paused; }
#fondo .flota > svg { width: 100%; height: auto; display: block; }
@keyframes fondo-flota {
  0% { transform: translate3d(0, 0, 0) rotate(calc(var(--g, 6deg) * -1)); }
  50% { transform: translate3d(calc(var(--dx, 10px) * .5), calc(var(--dy, -16px) * .6), 0) rotate(0deg); }
  100% { transform: translate3d(var(--dx, 10px), var(--dy, -16px), 0) rotate(var(--g, 6deg)); }
}

#pantallas { position: absolute; inset: 0; z-index: var(--z-contenido); }

.pantalla {
  position: absolute;
  inset: 0;
  overflow: hidden;
  --hueco-arriba: var(--seguro-arriba);
  --hueco-abajo: var(--seguro-abajo);
  --hueco-izq: var(--seguro-izq);
  --hueco-der: var(--seguro-der);
}
.pantalla.con-barra { --hueco-arriba: calc(var(--seguro-arriba) + var(--alto-barra) + 14px); }
.pantalla.con-dock { --hueco-abajo: calc(var(--seguro-abajo) + var(--alto-dock) + 6px); }
.pantalla.con-barra .desplazable {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--hueco-arriba) - 4px), #000 calc(var(--hueco-arriba) + 14px));
  mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--hueco-arriba) - 4px), #000 calc(var(--hueco-arriba) + 14px));
}
.pantalla.dormida { visibility: hidden; pointer-events: none; content-visibility: hidden; }
.pantalla.dormida * { animation-play-state: paused !important; }
.pantalla.saliendo { pointer-events: none; }

#barra {
  position: absolute;
  z-index: var(--z-barra);
  top: 0;
  left: 0;
  right: 0;
  padding: calc(var(--seguro-arriba) + 8px) calc(var(--margen-lateral) + var(--seguro-der)) 0 calc(var(--margen-lateral) + var(--seguro-izq));
  pointer-events: none;
  transition: transform var(--d-lenta) var(--c-muelle), opacity var(--d-media) var(--c-salir);
}
#barra.oculta { transform: translateY(calc(-100% - 16px)); opacity: 0; transition: transform var(--d-media) var(--c-entrar), opacity var(--d-rapida) linear; }
#barra .fila {
  max-width: var(--ancho-max);
  margin: 0 auto;
  height: var(--alto-barra);
  display: flex;
  align-items: center;
  gap: 10px;
}
#barra .fila > * { pointer-events: auto; }
#barra .hueco { flex: 1; min-width: 0; pointer-events: none; }
#barra [hidden] { display: none; }

.barra-titulo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.barra-titulo:not([hidden]) + .hueco { display: none; }
.barra-titulo .rotulo { --alto-rotulo: 34px; }
.barra-titulo .texto-mano { font-size: var(--t-mano-s); margin: -4px 0 0 6px; white-space: nowrap; }

.fresitas {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  padding: 0 16px 0 5px;
  border-radius: var(--r-pastilla);
  background: linear-gradient(180deg, #fff 0%, #ffeef5 100%);
  box-shadow: var(--sombra-boton);
  color: var(--ciruela);
  transition: translate var(--d-rapida) var(--c-muelle), box-shadow var(--d-rapida) ease;
}
.fresitas:active { translate: 0 3px; box-shadow: var(--sombra-boton-pulsado); }
.fresitas .ico { --ico: 36px; margin-top: -3px; }
.fresitas .cifra {
  display: inline-block;
  min-width: var(--ancho-cifra, 2ch);
  font-size: var(--t-l);
  line-height: 1;
  letter-spacing: .02em;
  text-align: left;
}
.fresitas .cifra.salta { animation: cifra-salta 520ms var(--c-muelle-vivo); }
.fresitas.recibe .ico { animation: fresita-late 300ms var(--c-muelle-vivo); }
@keyframes cifra-salta { 0% { transform: scale(1); } 35% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes fresita-late { 0% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-8deg); } 100% { transform: scale(1); } }

.ganancia {
  position: absolute;
  top: calc(100% + 4px);
  right: 8px;
  pointer-events: none;
  animation: ganancia-sube 1100ms var(--c-salir) forwards;
}
.ganancia .rotulo { --alto-rotulo: 26px; }
@keyframes ganancia-sube {
  0% { opacity: 0; transform: translateY(8px) scale(.7); }
  18% { opacity: 1; transform: translateY(0) scale(1.06); }
  70% { opacity: 1; transform: translateY(-4px) scale(1); }
  100% { opacity: 0; transform: translateY(-14px) scale(1); }
}

.fresita-vuela {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  pointer-events: none;
  z-index: var(--z-efectos);
}
.fresita-vuela .ico { --ico: 30px; }

#dock {
  position: absolute;
  z-index: var(--z-dock);
  left: 0;
  right: 0;
  bottom: 0;
  padding: 7px calc(6px + var(--seguro-der)) var(--seguro-abajo) calc(6px + var(--seguro-izq));
  background: linear-gradient(180deg, var(--superficie) 0%, var(--superficie-2) 100%);
  border-radius: 30px 30px 0 0;
  box-shadow: 0 -3px 0 var(--linea), 0 -10px 26px rgba(var(--sombra-color), .16);
  transition: transform var(--d-lenta) var(--c-muelle), opacity var(--d-media) var(--c-salir);
}
#dock.oculto { transform: translateY(calc(100% + 16px)); opacity: 0; transition: transform var(--d-media) var(--c-entrar), opacity var(--d-rapida) linear; }
#dock .fila {
  position: relative;
  max-width: var(--ancho-max);
  margin: 0 auto;
  height: calc(var(--alto-dock) - 7px);
  display: grid;
  grid-template-columns: repeat(var(--secciones, 5), minmax(0, 1fr));
  max-width: min(var(--ancho-max), calc(var(--secciones, 5) * 104px));
}

.dock-burbuja {
  position: absolute;
  top: 2px;
  bottom: 9px;
  left: 0;
  width: calc(100% / var(--secciones, 5));
  transform: translateX(calc(var(--indice, 0) * 100%));
  transition: transform 520ms var(--c-muelle), opacity var(--d-rapida) linear;
  pointer-events: none;
}
.dock-burbuja::before {
  content: '';
  position: absolute;
  inset: 0 5px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffe0ec 0%, #ffbcd5 100%);
  box-shadow: 0 0 0 3px var(--linea), 0 4px 0 3px var(--base-boton), inset 0 3px 0 rgba(255, 255, 255, .75);
}
#dock.sin-activo .dock-burbuja { opacity: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .dock-boton:not([aria-current]) .dock-ico { opacity: 1; filter: saturate(.8); background: radial-gradient(circle, rgba(255, 228, 242, .2) 0 52%, rgba(255, 228, 242, 0) 70%); border-radius: 50%; }
}
:root[data-tema="oscuro"] .dock-boton:not([aria-current]) .dock-ico { opacity: 1; filter: saturate(.8); background: radial-gradient(circle, rgba(255, 228, 242, .2) 0 52%, rgba(255, 228, 242, 0) 70%); border-radius: 50%; }

.dock-boton {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  height: calc(100% - 7px);
  border-radius: 22px;
  color: var(--texto-suave);
}
.dock-boton .dock-ico { display: block; width: 36px; height: 36px; transition: transform var(--d-media) var(--c-muelle), filter var(--d-media) linear, opacity var(--d-media) linear; filter: saturate(.55); opacity: .82; }
.dock-boton .dock-ico .ico { --ico: 36px; }
.dock-boton .dock-texto {
  font-size: 12px;
  font-weight: var(--peso-ui-fuerte);
  line-height: 1.15;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: color var(--d-media) linear;
}
.dock-boton[aria-current="page"] { color: var(--ciruela); }
.dock-boton[aria-current="page"] .dock-ico { transform: translateY(-3px); filter: none; opacity: 1; }
.dock-boton.bota .dock-ico { animation: dock-bota 560ms var(--c-salir); }
@keyframes dock-bota {
  0% { transform: translateY(0) scale(1, 1); }
  25% { transform: translateY(1px) scale(1.16, .84); }
  55% { transform: translateY(-9px) scale(.92, 1.1); }
  78% { transform: translateY(-2px) scale(1.04, .97); }
  100% { transform: translateY(-3px) scale(1, 1); }
}

.dock-sorpresa .dock-ico { position: relative; }
.dock-chapa { position: absolute; top: 2px; left: calc(50% + 6px); z-index: 1; display: flex; align-items: baseline; justify-content: center; gap: 1px; min-width: 27px; height: 19px; padding: 3px 5px 0 9px; border-radius: 4px 9px 9px 4px; background: linear-gradient(180deg, #fff3a6 0%, #ffd23f 62%, #f0a400 100%); color: #6f2350; font-family: var(--f-titulo); font-size: 11.5px; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px #4a2a3b, 0 2px 0 2px rgba(74, 42, 59, .3); rotate: 12deg; transform-origin: 0 50%; pointer-events: none; }
.dock-chapa::before { content: ''; position: absolute; left: 3px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #4a2a3b; box-shadow: 0 0 0 1px #fff7d6; }
.dock-chapa small { font-family: var(--f-ui); font-weight: 800; font-size: 11px; }
.dock-chapa[hidden] { display: none; }
.dock-chapa.hoy { align-items: center; padding: 0 3px 0 8px; min-width: 27px; background: #fff7d6; }
.dock-chapa .ico { --ico: 17px; }
.dock-sorpresa .dock-ico .caja-sorpresa { --cs-tam: 40px; position: absolute; left: -2px; top: -3px; }
.dock-sorpresa.lista .dock-ico { filter: none; opacity: 1; }
.dock-sorpresa.lista .dock-ico::after {
  content: '';
  position: absolute;
  right: -3px;
  top: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 2.5px var(--superficie), 0 0 0 4.5px var(--linea);
}

.modal.modal-sorpresa { padding: 0; }
.modal-sorpresa .modal-velo { background: rgba(58, 22, 46, .55); }
.modal-sorpresa .modal-panel {
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--seguro-arriba) + 24px) calc(var(--margen-lateral) + var(--seguro-der) + 8px) calc(var(--seguro-abajo) + 28px) calc(var(--margen-lateral) + var(--seguro-izq) + 8px);
  background:
    radial-gradient(circle at 12px 12px, rgba(255, 143, 183, .2) 0 3px, transparent 3.5px) 0 0 / 34px 34px,
    radial-gradient(70% 42% at 50% 38%, rgba(255, 243, 166, .75) 0%, rgba(255, 243, 166, 0) 70%),
    linear-gradient(180deg, #ffd9ea 0%, #fff1e6 52%, #ead9ff 100%);
  box-shadow: none;
}
.modal-sorpresa .modal-cuerpo, .modal-sorpresa .modal-botones { width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; }
.modal-sorpresa .modal-botones { margin-top: 26px; }
.sorpresa-lista { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sorpresa-lista-caja { position: relative; width: min(64vw, 260px, 34vh); aspect-ratio: 1; margin-bottom: 6px; cursor: pointer; touch-action: manipulation; }
.sorpresa-lista-caja .caja-sorpresa { --cs-tam: 100%; display: block; }
.sorpresa-lista-brillo, .sorpresa-lista-corazon { position: absolute; display: block; pointer-events: none; animation: sorpresa-titila 2.2s ease-in-out var(--retraso, 0s) infinite; }
.sorpresa-lista-corazon { width: 22px; animation-name: sorpresa-sube; animation-duration: 3.2s; }
.sorpresa-lista-brillo > svg, .sorpresa-lista-corazon > svg { display: block; width: 100%; height: auto; }
.sorpresa-lista-titulo { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sorpresa-lista-titulo .rotulo { --alto-rotulo: 42px; }
.sorpresa-lista-sub { margin-top: 8px; font-size: var(--t-mano-l); rotate: -4deg; }
.sorpresa-lista-escena { position: relative; display: flex; justify-content: center; width: 100%; padding-top: 40px; }
.sorpresa-lista-escena .sorpresa-lista-caja { z-index: 1; }
.sl-pj { position: absolute; z-index: 2; display: block; line-height: 0; pointer-events: none; }
.sl-pj .pj { --pj: 100%; display: block; width: 100%; height: auto; }
.sl-kuromi { z-index: 0; left: 50%; top: 0; width: 112px; translate: -50% 0; animation: sl-asoma 3.6s ease-in-out infinite; }
.sl-melody, .sl-kitty { bottom: -10px; width: min(27vw, 100px); animation: sl-bota 1.5s cubic-bezier(.3, 0, .4, 1) infinite; }
.sl-melody { left: -6px; }
.sl-kitty { right: -6px; animation-delay: -.75s; }
@keyframes sl-bota { 0%, 100% { translate: 0 0; scale: 1 1; } 12% { translate: 0 0; scale: 1.06 .94; } 45% { translate: 0 -18px; scale: .97 1.03; } 78% { translate: 0 0; scale: 1.03 .97; } }
@keyframes sl-asoma { 0%, 100% { translate: -50% 0; rotate: 0deg; } 50% { translate: -50% -6px; rotate: -4deg; } }
:root[data-reducir-movimiento] .sl-pj { animation: none; }
@media (prefers-reduced-motion: reduce) { .sl-pj { animation: none; } }
@keyframes sorpresa-titila { 0%, 100% { transform: scale(.55); opacity: .35; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes sorpresa-sube { 0% { transform: translateY(8px) scale(.8); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-26px) scale(1.05); opacity: 0; } }
:root[data-tema="oscuro"] .modal-sorpresa .modal-panel { background: radial-gradient(circle at 12px 12px, rgba(255, 143, 183, .12) 0 3px, transparent 3.5px) 0 0 / 34px 34px, radial-gradient(70% 42% at 50% 38%, rgba(255, 210, 63, .28) 0%, rgba(255, 210, 63, 0) 70%), linear-gradient(180deg, #3a2550 0%, #2a1d3e 55%, #1d1428 100%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .modal-sorpresa .modal-panel { background: radial-gradient(circle at 12px 12px, rgba(255, 143, 183, .12) 0 3px, transparent 3.5px) 0 0 / 34px 34px, radial-gradient(70% 42% at 50% 38%, rgba(255, 210, 63, .28) 0%, rgba(255, 210, 63, 0) 70%), linear-gradient(180deg, #3a2550 0%, #2a1d3e 55%, #1d1428 100%); }
}
:root[data-reducir-movimiento] .sorpresa-lista-brillo, :root[data-reducir-movimiento] .sorpresa-lista-corazon { animation: none; }
@media (prefers-reduced-motion: reduce) { .sorpresa-lista-brillo, .sorpresa-lista-corazon { animation: none; } }

#efectos { position: absolute; inset: 0; z-index: var(--z-efectos); pointer-events: none; overflow: hidden; }

#modales { position: absolute; inset: 0; z-index: var(--z-modal); pointer-events: none; }
.modal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(var(--seguro-arriba) + 16px) calc(var(--margen-lateral) + var(--seguro-der)) calc(var(--seguro-abajo) + 16px) calc(var(--margen-lateral) + var(--seguro-izq));
  pointer-events: auto;
}
.modal-velo { position: absolute; inset: 0; background: var(--velo); }
.modal-panel {
  position: relative;
  width: min(100%, 400px);
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--superficie);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-tarjeta);
  padding: 26px 20px 22px;
  text-align: center;
}
.modal-panel:focus { outline: none; }
.modal-titulo { margin: 4px 44px 10px; }
.modal-titulo .rotulo { --alto-rotulo: 36px; margin: 0 auto; }
.modal-titulo.titulo { font-size: var(--t-xl); }
.modal-cuerpo { color: var(--texto); font-size: var(--t-m); }
.modal-cuerpo p + p { margin-top: 8px; }
.modal-botones { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 22px; }
.modal-botones .boton-caramelo, .modal-botones .boton-secundario { width: 100%; }
.modal-cerrar { position: absolute; top: 12px; right: 12px; z-index: 1; }
.modal.hoja { place-items: end center; padding-bottom: 0; padding-left: var(--seguro-izq); padding-right: var(--seguro-der); }
.modal.hoja .modal-panel {
  width: min(100%, var(--ancho-max));
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  padding: 14px 20px calc(var(--seguro-abajo) + 22px);
  box-shadow: 0 0 0 3px var(--linea), 0 -14px 34px rgba(var(--sombra-color), .3);
}
.modal-asa { display: block; width: 46px; height: 5px; margin: 0 auto 12px; border-radius: 5px; background: var(--linea-suave); }
.modal.hoja .modal-cerrar { top: 16px; }

#avisos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--aviso-abajo);
  z-index: var(--z-aviso);
  display: flex;
  justify-content: center;
  padding: 0 calc(var(--margen-lateral) + var(--seguro-der)) 0 calc(var(--margen-lateral) + var(--seguro-izq));
  pointer-events: none;
}
#avisos.arriba { top: calc(var(--seguro-arriba) + 12px); bottom: auto; }
.aviso {
  position: relative;
  pointer-events: auto;
  width: 100%;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 7px 7px 9px 12px;
  background: var(--superficie);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-tarjeta);
  overflow: hidden;
  touch-action: pan-y;
}
.aviso > .ico { --ico: 32px; }
.aviso-texto { flex: 1; min-width: 0; font-size: var(--t-s); font-weight: var(--peso-ui-fuerte); line-height: 1.3; color: var(--texto); padding: 4px 0; }
.aviso-accion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 44px;
  padding: 0 14px 0 10px;
  border-radius: var(--r-pastilla);
  background: var(--superficie-2);
  box-shadow: 0 0 0 2.5px var(--linea), 0 3px 0 2.5px var(--base-boton);
  color: var(--acento-texto);
  font-size: var(--t-s);
  font-weight: var(--peso-ui-fuerte);
  white-space: nowrap;
  transition: translate var(--d-rapida) var(--c-muelle);
}
.aviso-accion:active { translate: 0 2px; }
.aviso-accion .ico { --ico: 24px; }
.aviso-tiempo {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 3px;
  height: 3px;
  border-radius: 3px;
  background: var(--acento);
  opacity: .45;
  transform-origin: left center;
  animation: aviso-tiempo var(--ms, 4000ms) linear forwards;
}
.aviso.pausado .aviso-tiempo { animation-play-state: paused; }
@keyframes aviso-tiempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 8px 4px;
}
.vacio-dibujo { position: relative; display: grid; place-items: center; }
.vacio-dibujo .pj { --pj: 150px; }
.vacio-dibujo .bocadillo { margin-bottom: 14px; }
.vacio .rotulo { --alto-rotulo: 40px; }
.vacio-texto { max-width: 30ch; color: var(--texto-suave); font-size: var(--t-m); }
.vacio .boton-caramelo, .vacio .boton-secundario { margin-top: 6px; }

.instalar { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.instalar .pj { --pj: 112px; margin-top: -4px; }
.instalar-texto { color: var(--texto-suave); font-size: var(--t-s); line-height: 1.4; max-width: 34ch; }
.instalar-pasos { display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; margin-top: 2px; }
.instalar-paso { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: var(--r-m); background: var(--superficie-2); box-shadow: 0 0 0 2px var(--linea-suave); font-size: var(--t-s); font-weight: var(--peso-ui-fuerte); line-height: 1.3; }
.instalar-paso .numero { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--acento); color: #fff; font-family: var(--f-titulo); font-size: 14px; box-shadow: 0 0 0 2px var(--linea); }
.instalar-paso .ico { --ico: 32px; }
.instalar-nota { color: var(--texto); font-size: var(--t-xs); font-weight: var(--peso-ui-fuerte); line-height: 1.4; max-width: 36ch; }
.traer { display: flex; flex-direction: column; gap: 12px; }
.traer-texto { color: var(--texto-suave); font-size: var(--t-s); line-height: 1.4; }
.traer-campo { width: 100%; min-height: 96px; padding: 12px 14px; border: 0; border-radius: var(--r-m); background: var(--superficie-hundida); box-shadow: inset 0 0 0 2.5px var(--linea); color: var(--texto); font-family: var(--f-ui); font-weight: var(--peso-ui-fuerte); font-size: 16px; line-height: 1.35; resize: none; word-break: break-all; }
.traer-campo:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

#franja-estado {
  position: fixed;
  z-index: 95;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--seguro-arriba) + 14px);
  background: linear-gradient(180deg, rgba(86, 26, 62, .7) 0%, rgba(86, 26, 62, .6) 75%, rgba(86, 26, 62, 0) 100%);
  pointer-events: none;
  display: none;
}
@media (display-mode: standalone) { #franja-estado { display: block; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) #franja-estado { height: calc(var(--seguro-arriba) + 10px); background: linear-gradient(180deg, rgba(86, 26, 62, .52) 0%, rgba(86, 26, 62, .34) 70%, rgba(86, 26, 62, 0) 100%); }
}
:root[data-tema="oscuro"] #franja-estado { height: calc(var(--seguro-arriba) + 10px); background: linear-gradient(180deg, rgba(86, 26, 62, .52) 0%, rgba(86, 26, 62, .34) 70%, rgba(86, 26, 62, 0) 100%); }

#carga.fuera { opacity: 0; transform: scale(1.04); pointer-events: none; }

:root[data-reducir-movimiento] #fondo .flota,
:root[data-reducir-movimiento] .dock-boton.bota .dock-ico,
:root[data-reducir-movimiento] .fresitas .cifra.salta,
:root[data-reducir-movimiento] .fresitas.recibe .ico { animation: none; }
:root[data-reducir-movimiento] #barra.oculta,
:root[data-reducir-movimiento] #dock.oculto { transform: none; }
:root[data-reducir-movimiento] #barra,
:root[data-reducir-movimiento] #dock,
:root[data-reducir-movimiento] .dock-burbuja,
:root[data-reducir-movimiento] .dock-boton .dock-ico { transition-timing-function: var(--c-salir); transition-duration: 200ms; }
:root[data-reducir-movimiento] .ganancia { animation-name: aparece-desaparece; }
@keyframes aparece-desaparece { 0% { opacity: 0; } 20%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #fondo .flota, .dock-boton.bota .dock-ico, .fresitas .cifra.salta, .fresitas.recibe .ico { animation: none; }
  #barra.oculta, #dock.oculto { transform: none; }
  .ganancia { animation-name: aparece-desaparece; }
}

.provisional { min-height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding-top: 12px; padding-bottom: 12px; }

.girar-movil { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .girar-movil {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 16px calc(24px + var(--seguro-der)) 16px calc(24px + var(--seguro-izq));
    background: var(--fondo-degradado, var(--fondo));
    background-color: var(--fondo);
    text-align: left;
  }
  .girar-dibujo { position: relative; flex: none; margin-right: 30px; }
  .girar-dibujo .pj { --pj: 132px; }
  .girar-movil-ico { position: absolute; right: -18px; top: 6px; width: 34px; height: 54px; border-radius: 9px; background: var(--superficie); box-shadow: 0 0 0 3px var(--linea), inset 0 -8px 0 var(--superficie-2); animation: girar-movil 2.4s var(--c-muelle, ease-in-out) infinite; }
  .girar-texto { max-width: 18ch; margin: 0; font-family: var(--f-titulo); font-size: var(--t-xl); line-height: 1.25; color: var(--texto-titulo); }
  #app { visibility: hidden; }
}
@keyframes girar-movil { 0%, 30% { transform: rotate(90deg); } 60%, 100% { transform: rotate(0deg); } }
:root[data-reducir-movimiento] .girar-movil-ico { animation: none; }
@media (prefers-reduced-motion: reduce) { .girar-movil-ico { animation: none; } }