/* =====================================================================
   UN DÍA EN FAMA — estilos de la interfaz (agente de interfaz)
   Colores de FAMA: azul #5989a3, azul oscuro #3d6f8c, celeste hielo
   #9fd0ea, noche #0f1d27, crema y madera. Todo con prefijo «f-».
   ===================================================================== */
:root {
  --azul: #5989a3; --azul-osc: #3d6f8c; --azul-pro: #2a4f66; --azul-vivo: #2f86c4;
  --hielo: #9fd0ea; --hielo-2: #d4ecf8; --hielo-3: #eef7fc;
  --noche: #0f1d27; --noche-2: #172b3a; --noche-3: #213c50;
  --crema: #fbf5e8; --crema-2: #f3e9d4; --crema-3: #e7d8bb; --papel: #fffdf8;
  --tinta: #1b2d39; --tinta-2: #4e6574; --tinta-3: #8a9ba6;
  --madera: #5a3a25; --madera-2: #7b5134; --madera-3: #a8774f;
  --oro: #ffc93c; --oro-2: #f2a91a; --oro-3: #b97b06;
  --rojo: #e2574c; --rojo-2: #b33d33; --naranja: #f08c3a;
  --bien: #2f86c4; --bien-2: #1f6797;
  --vidrio: rgba(15, 29, 39, .74); --vidrio-borde: rgba(159, 208, 234, .26);
  --fuente: ui-rounded, "SF Pro Rounded", "Nunito", "Quicksand", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
}

/* ---------------------------------------------------------------- base */
#ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; font-family: var(--fuente); color: var(--tinta);
  font-size: 16px; line-height: 1.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; }
#ui *, #ui *::before, #ui *::after { box-sizing: border-box; }
#ui button { font-family: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#ui img { -webkit-user-drag: none; user-select: none; }
.f-ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.f-ia { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.f-ia img { width: 1.6em; height: 1.6em; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.f-oculto { display: none !important; }
.f-logo-mini { width: 1.6em; height: 1.6em; flex: none; }

/* ---------------------------------------------------------------- botones */
.f-btn { --c1: var(--azul); --c2: var(--azul-pro); --tx: #fff;
  appearance: none; border: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 50px; padding: 12px 22px; border-radius: 16px; background: var(--c1); color: var(--tx);
  font-weight: 800; font-size: 17px; letter-spacing: .2px; line-height: 1.1; text-align: center; cursor: pointer; position: relative;
  box-shadow: 0 5px 0 var(--c2), 0 9px 18px rgba(10, 25, 35, .26); transition: transform .08s ease, box-shadow .08s ease, filter .15s; pointer-events: auto; }
.f-btn:hover { filter: brightness(1.06); }
.f-btn:active, .f-btn.apretado { transform: translateY(4px); box-shadow: 0 1px 0 var(--c2), 0 3px 8px rgba(10, 25, 35, .22); }
.f-btn:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }
.f-btn[disabled] { cursor: not-allowed; filter: grayscale(.75); opacity: .55; transform: none; }
.f-btn.oro { --c1: linear-gradient(180deg, #ffd96a, #f7b52c); --c2: #c4860c; --tx: #3b2700; }
.f-btn.azul { --c1: linear-gradient(180deg, #6b9cb6, #4d7f9a); --c2: #2a4f66; }
.f-btn.claro { --c1: #fffaf0; --c2: #d6c4a0; --tx: var(--tinta); }
.f-btn.oscuro { --c1: var(--noche-2); --c2: #050c11; --tx: #fff; }
.f-btn.rojo { --c1: linear-gradient(180deg, #ef6d62, #d9534a); --c2: #9d3029; }
.f-btn.chico { min-height: 40px; padding: 8px 14px; font-size: 15px; border-radius: 12px; box-shadow: 0 3px 0 var(--c2), 0 5px 10px rgba(10, 25, 35, .2); }
.f-btn.chico:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--c2); }
.f-btn.grande { min-height: 60px; font-size: 20px; padding: 14px 28px; border-radius: 20px; }
.f-btn small { display: block; font-size: 12.5px; font-weight: 700; opacity: .8; margin-top: 3px; }
.f-btn > span { display: inline-flex; flex-direction: column; align-items: center; }
.f-tecla { display: inline-flex; align-items: center; justify-content: center; min-width: 1.8em; height: 1.8em; padding: 0 .45em; border-radius: 7px;
  background: #fff; color: var(--tinta); font-weight: 900; font-size: .78em; line-height: 1; box-shadow: 0 2px 0 #b6c4ce; border: 1px solid #dde6ec; font-family: var(--fuente); }
.f-x { appearance: none; border: 0; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .2); color: #fff; display: grid; place-items: center;
  font-size: 22px; cursor: pointer; pointer-events: auto; flex: none; transition: background .15s, transform .1s; }
.f-x:hover { background: rgba(255, 255, 255, .32); }
.f-x:active { transform: scale(.92); }
.f-fila-botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* ---------------------------------------------------------------- pantalla de carga */
.f-carga-pant { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(circle at 50% 36%, #2a5470 0%, #15304a 42%, var(--noche) 100%); color: #fff; pointer-events: auto; transition: opacity .7s ease; padding: 24px; }
.f-carga-pant.f-fuera { opacity: 0; pointer-events: none; }
.f-carga-logo { width: min(150px, 38vw); aspect-ratio: 1; border-radius: 50%; background: #fff; padding: 6px;
  box-shadow: 0 0 0 8px rgba(159, 208, 234, .16), 0 0 70px rgba(159, 208, 234, .35); animation: f-latido 1.8s ease-in-out infinite; }
.f-carga-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.f-carga-titulo { font-size: clamp(28px, 6vw, 42px); font-weight: 900; letter-spacing: .3px; text-shadow: 0 3px 0 var(--azul-osc); }
.f-carga-barra { width: min(360px, 74vw); height: 14px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
.f-carga-barra i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--hielo), #fff); transition: width .35s ease; }
.f-carga-txt { color: var(--hielo); font-weight: 800; }
.f-carga-tip { position: absolute; bottom: calc(26px + var(--sab)); left: 20px; right: 20px; margin: 0 auto; max-width: 560px; text-align: center; color: #a9c3d3; font-size: 15px; }
.f-carga-tip b { color: var(--oro); }
@keyframes f-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ---------------------------------------------------------------- título */
.f-titulo { position: fixed; inset: 0; z-index: 65; pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(18px + var(--sat)) calc(18px + var(--sar)) calc(40px + var(--sab)) calc(18px + var(--sal)); color: #fff; text-align: center;
  background: radial-gradient(ellipse 75% 65% at 50% 42%, rgba(15, 29, 39, .1), rgba(15, 29, 39, .72) 100%); animation: f-aparece .7s ease both; overflow: hidden; }
.f-titulo.f-saliendo { animation: f-titulo-sale .5s ease both; }
@keyframes f-titulo-sale { to { opacity: 0; transform: scale(1.04); } }
.f-titulo-fondo { position: absolute; inset: -2%; background-size: cover; background-position: center 30%; opacity: 0; transition: opacity 1.2s ease;
  animation: f-kenburns 32s ease-in-out infinite alternate; }
.f-titulo-fondo.listo { opacity: 1; }
@media (max-aspect-ratio: 4/5) { .f-titulo-fondo { background-position: 9% 45%; } } /* celu vertical: que se vea Gustavo saludando (está a la izquierda de la portada) */
@keyframes f-kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-1.5%, 1%); } }
.f-titulo-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 29, 39, .62) 0%, rgba(15, 29, 39, .18) 30%, rgba(15, 29, 39, 0) 45%, rgba(15, 29, 39, .15) 62%, rgba(15, 29, 39, .85) 100%); }
.f-titulo-cont { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(460px, 100%); height: 100%; justify-content: space-between; max-height: 760px; }
.f-titulo-marca { display: flex; flex-direction: column; align-items: center; gap: 4px; animation: f-cae .8s .1s cubic-bezier(.2, 1.4, .4, 1) both; }
.f-titulo-logo { width: clamp(62px, 11vh, 96px); aspect-ratio: 1; border-radius: 50%; background: #fff; padding: 4px; box-shadow: 0 0 0 5px rgba(159, 208, 234, .4), 0 10px 30px rgba(0, 0, 0, .35); }
.f-titulo-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.f-titulo h1 { margin: 4px 0 0; font-size: clamp(50px, min(12vw, 12vh), 100px); line-height: .9; font-weight: 900; letter-spacing: 1px; color: #fff;
  text-shadow: 0 4px 0 var(--azul-osc), 0 8px 0 rgba(15, 29, 39, .35), 0 14px 34px rgba(0, 0, 0, .45); }
.f-titulo h1 small { display: block; font-size: .36em; letter-spacing: .5px; margin-bottom: 4px; text-shadow: 0 2px 0 var(--azul-osc), 0 6px 18px rgba(0, 0, 0, .5); }
.f-titulo .f-sub { margin: 4px 0 0; font-size: clamp(18px, 3.8vw, 24px); font-weight: 900; color: var(--oro); text-shadow: 0 2px 0 rgba(15, 29, 39, .6), 0 4px 14px rgba(0, 0, 0, .5); }
.f-titulo .f-dir { margin: 2px 0 0; font-size: 13.5px; font-weight: 700; color: #e6f3fa; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.f-titulo-botones { display: flex; flex-direction: column; gap: 12px; width: min(360px, 100%); animation: f-sube .7s .25s cubic-bezier(.2, 1.2, .4, 1) both; }
.f-titulo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f-titulo-fila .f-btn { font-size: 15px; padding: 10px 10px; }
.f-titulo-pie { position: absolute; bottom: calc(12px + var(--sab)); left: 0; right: 0; font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
@keyframes f-cae { from { opacity: 0; transform: translateY(-30px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes f-sube { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@media (orientation: landscape) and (max-height: 560px) {
  .f-titulo-cont { flex-direction: row; width: min(860px, 100%); align-items: center; justify-content: space-around; gap: 24px; height: auto; }
  .f-titulo h1 { font-size: clamp(44px, 12vh, 76px); }
  .f-titulo-botones { width: min(330px, 46vw); }
  .f-titulo .f-btn.grande { min-height: 52px; font-size: 18px; padding: 10px 18px; }
}

/* ---------------------------------------------------------------- velo, modales y paneles */
.f-velo { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; pointer-events: auto;
  padding: calc(12px + var(--sat)) calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal));
  background: radial-gradient(ellipse at center, rgba(15, 29, 39, .42), rgba(15, 29, 39, .8)); animation: f-aparece .2s ease both; }
@media (pointer: fine) { .f-velo { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } }
.f-velo.f-saliendo { animation: f-desaparece .22s ease both; }
.f-velo.f-saliendo .f-modal { animation: f-sale .22s ease both; }
.f-modal { position: relative; max-width: 100%; max-height: 100%; display: flex; animation: f-entra .34s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes f-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes f-desaparece { to { opacity: 0; } }
@keyframes f-entra { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes f-sale { to { opacity: 0; transform: translateY(14px) scale(.97); } }
.f-panel { background: var(--crema); border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; width: 560px; max-width: 100%;
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - var(--sat) - var(--sab));
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .5), 0 26px 60px rgba(5, 15, 22, .55); }
.f-panel-cab { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 22px; color: #fff; flex: none;
  background: linear-gradient(180deg, var(--azul) 0%, var(--azul-osc) 100%); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }
.f-panel-cab h2 { margin: 0; flex: 1; font-size: 22px; font-weight: 900; display: flex; align-items: center; gap: 10px; }
.f-panel-cuerpo { padding: 18px 22px; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.f-panel-pie { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 20px 16px; border-top: 2px dashed var(--crema-3); flex: none; background: var(--crema-2); }
.f-frase { font-style: italic; color: var(--azul-osc); font-weight: 800; text-align: center; margin: 16px 6px 2px; }
.f-vacio { color: var(--tinta-2); text-align: center; padding: 20px; }
.f-barra { height: 8px; border-radius: 99px; background: rgba(27, 45, 57, .12); overflow: hidden; }
.f-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--azul), var(--hielo)); transition: width .4s ease; }
.f-barra.grande { height: 14px; }

.f-confirmar { width: 420px; text-align: center; }
.f-confirmar h3 { margin: 6px 0 8px; font-size: 22px; }
.f-confirmar p { margin: 0; color: var(--tinta-2); }

/* ---------------------------------------------------------------- ajustes */
.f-panel-ajustes { width: 520px; }
.f-ajustes { display: flex; flex-direction: column; gap: 4px; }
.f-aj-fila { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 6px; border-bottom: 1px solid var(--crema-3); cursor: pointer; flex-wrap: wrap; }
.f-aj-fila.sub { padding-top: 2px; border-bottom-style: dashed; }
.f-aj-fila.sub .f-aj-tit { padding-left: 34px; color: var(--tinta-2); font-size: 14px; }
.f-aj-tit { display: flex; align-items: center; gap: 12px; flex: 1 1 200px; }
.f-aj-tit > .f-ico { font-size: 22px; color: var(--azul-osc); }
.f-aj-tit b { display: block; font-size: 16.5px; }
.f-aj-tit small { display: block; color: var(--tinta-2); font-size: 13px; margin-top: 2px; }
.f-switch { appearance: none; -webkit-appearance: none; width: 58px; height: 34px; border-radius: 99px; background: #cdbfa3; position: relative; cursor: pointer; transition: background .2s; flex: none; margin: 0; }
.f-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform .22s cubic-bezier(.3, 1.5, .5, 1); }
.f-switch:checked { background: var(--azul); }
.f-switch:checked::after { transform: translateX(24px); }
.f-switch:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.f-rango { -webkit-appearance: none; appearance: none; width: min(220px, 100%); height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--azul), var(--hielo)); outline: none; flex: 0 1 220px; margin: 0; }
.f-rango::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid var(--azul-osc); box-shadow: 0 2px 5px rgba(0, 0, 0, .25); cursor: pointer; }
.f-rango::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--azul-osc); cursor: pointer; }
.f-segmentos { display: flex; background: var(--crema-2); border-radius: 12px; padding: 4px; gap: 4px; }
.f-segmentos button { appearance: none; border: 0; background: transparent; padding: 8px 12px; border-radius: 9px; font-weight: 800; font-size: 14px; color: var(--tinta-2); cursor: pointer; }
.f-segmentos button.activo { background: var(--azul); color: #fff; box-shadow: 0 2px 0 var(--azul-pro); }
.f-aj-extra { display: flex; justify-content: center; padding-top: 14px; }

/* ---------------------------------------------------------------- cómo se juega */
.f-como { width: 680px; }
.f-como-gus { display: flex; align-items: center; gap: 14px; background: var(--hielo-3); border-radius: 18px; padding: 10px 14px; margin-bottom: 12px; }
.f-como-gus img { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .18); flex: none; object-fit: cover; }
.f-como-gus p { margin: 0; font-weight: 800; color: var(--azul-osc); }
.f-pasos { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px; }
.f-pasos li { display: flex; align-items: center; gap: 10px; background: var(--papel); border-radius: 14px; padding: 10px 12px; box-shadow: 0 2px 0 var(--crema-3); }
.f-pasos li > .f-ico { font-size: 24px; color: var(--azul); }
.f-paso-num { width: 24px; height: 24px; border-radius: 50%; background: var(--oro); color: #3b2700; font-weight: 900; font-size: 13px; display: grid; place-items: center; flex: none; }
.f-ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f-ctl.celu-primero .f-ctl-col:first-child { order: 2; }
.f-ctl-col { background: var(--noche-2); color: #fff; border-radius: 16px; padding: 12px 14px; }
.f-ctl-col h3 { margin: 0 0 8px; font-size: 16px; color: var(--hielo); }
.f-ctl-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.f-ctl-col li { display: flex; align-items: center; gap: 8px; }
.f-teclas { display: inline-flex; gap: 3px; flex: none; }
.f-ctl-ico { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--hielo); display: inline-grid; place-items: center; flex: none; font-size: 14px; color: var(--hielo); }
.f-ctl-ico.joy { background: radial-gradient(circle, var(--hielo) 30%, transparent 32%); }
.f-ctl-ico.dedo { border-style: dashed; }
.f-ctl-ico.acc { background: var(--oro); border-color: var(--oro); }
.f-como-caja { background: var(--hielo-3); border-radius: 14px; padding: 10px 14px; margin: 12px 0 0; font-size: 14.5px; }
@media (max-width: 560px) { .f-ctl { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- pausa */
.f-pausa { width: 420px; }
.f-pausa-info { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.f-pausa-info img { width: 70px; height: 70px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); object-fit: cover; }
.f-pausa-info b { display: block; font-size: 18px; }
.f-pausa-info span { color: var(--tinta-2); font-weight: 700; }
.f-pausa-botones { display: flex; flex-direction: column; gap: 12px; }

/* ---------------------------------------------------------------- HUD */
.f-hud { position: absolute; inset: 0; pointer-events: none; transition: opacity .3s; }
.f-raiz[data-modo="cargando"] .f-hud, .f-raiz[data-modo="titulo"] .f-hud, .f-raiz[data-modo="resumen"] .f-hud { opacity: 0; visibility: hidden; }
.f-hud-izq { position: absolute; left: calc(14px + var(--sal)); top: calc(12px + var(--sat)); display: flex; align-items: flex-start; gap: 10px; }
.f-hud-col { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.f-gus { position: relative; width: 70px; height: 70px; flex: none; border-radius: 50%; background: var(--hielo-2); border: 4px solid #fff;
  box-shadow: 0 0 0 3px var(--azul-osc), 0 6px 16px rgba(0, 0, 0, .35); }
.f-gus-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.f-gus.rebota { animation: f-rebota .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes f-rebota { 0% { transform: scale(.85); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
.f-gus-globo { position: absolute; left: 4px; top: 80px; white-space: nowrap; background: #fff; color: var(--tinta); font-weight: 900; font-size: 14px;
  padding: 7px 12px; border-radius: 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); opacity: 0; transform: translateY(-6px) scale(.9); transform-origin: left top;
  transition: opacity .2s, transform .25s cubic-bezier(.2, 1.5, .4, 1); pointer-events: none; z-index: 2; }
.f-gus-globo::before { content: ""; position: absolute; left: -2px; top: -7px; border: 8px solid transparent; border-bottom-color: #fff; border-left-width: 2px; transform: rotate(18deg); }
.f-gus.habla .f-gus-globo { opacity: 1; transform: none; }
.f-plata { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 8px; border-radius: 99px; background: var(--vidrio); border: 1px solid var(--vidrio-borde);
  color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.f-plata-ico { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(180deg, #ffd96a, #f2a91a); color: #6b4300; display: grid; place-items: center; font-size: 20px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.f-plata-ico img { width: 34px; height: 34px; }
.f-plata-num { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.f-plata.late.pos .f-plata-num { animation: f-late-pos .6s ease; }
.f-plata.late.neg .f-plata-num { animation: f-late-neg .6s ease; }
@keyframes f-late-pos { 30% { transform: scale(1.14); color: var(--oro); } }
@keyframes f-late-neg { 30% { transform: scale(1.08); color: #ff9b91; } }
.f-plata-deltas { position: absolute; left: 50px; top: 100%; display: flex; flex-direction: column; gap: 2px; }
.f-delta { font-weight: 900; font-size: 16px; text-shadow: 0 2px 4px rgba(0, 0, 0, .6); animation: f-delta 1.5s ease both; white-space: nowrap; }
.f-delta.pos { color: var(--oro); }
.f-delta.neg { color: #ff8f84; }
@keyframes f-delta { 0% { opacity: 0; transform: translateY(-6px) scale(.8); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
.f-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.f-chip { display: flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: var(--vidrio); border: 1px solid var(--vidrio-borde); color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.f-est-ico { color: var(--oro); display: inline-flex; font-size: 17px; }
.f-raiz[data-estacion="invierno"] .f-est-ico { color: #e6f6ff; }
.f-raiz[data-estacion="otono"] .f-est-ico { color: #f3a35a; }
.f-raiz[data-estacion="primavera"] .f-est-ico { color: #ff9ec4; }
.f-rep-est { position: relative; display: inline-flex; }
.f-rep-vacias, .f-rep-llenas { display: inline-flex; gap: 1px; }
.f-rep-llenas { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; transition: width .6s ease; }
.f-star { width: 15px; height: 15px; flex: none; }
.f-rep-vacias .f-star { fill: rgba(255, 255, 255, .22); }
.f-rep-llenas .f-star { fill: var(--oro); }

.f-objetivos { position: absolute; left: calc(14px + var(--sal)); top: calc(122px + var(--sat)); width: 290px; pointer-events: auto; border-radius: 16px; overflow: hidden;
  background: var(--vidrio); border: 1px solid var(--vidrio-borde); color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.f-obj-cab { appearance: none; border: 0; background: rgba(89, 137, 163, .45); color: #fff; width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-weight: 900; font-size: 14px; cursor: pointer; text-align: left; }
.f-obj-cab span { flex: 1; }
.f-obj-cuenta { background: rgba(255, 255, 255, .18); padding: 2px 8px; border-radius: 99px; font-size: 13px; }
.f-obj-flecha { transition: transform .2s; }
.f-objetivos.cerrado .f-obj-flecha { transform: rotate(-90deg); }
.f-objetivos.cerrado .f-obj-lista { display: none; }
.f-obj-lista { list-style: none; margin: 0; padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 7px; }
.f-obj-lista li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.f-obj-check { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--hielo); display: grid; place-items: center; flex: none; margin-top: 1px; color: #3b2700; font-size: 13px; }
.f-obj-lista li.hecho .f-obj-check { background: var(--oro); border-color: var(--oro); }
.f-obj-lista li.hecho .f-obj-txt { opacity: .65; text-decoration: line-through; }
.f-obj-txt { flex: 1; }
.f-obj-lista small { color: var(--hielo); font-weight: 900; white-space: nowrap; }
.f-obj-barra { display: block; height: 4px; border-radius: 9px; background: rgba(255, 255, 255, .15); margin-top: 4px; overflow: hidden; }
.f-obj-barra i { display: block; height: 100%; background: var(--hielo); border-radius: inherit; }

.f-hud-centro { position: absolute; left: 50%; top: calc(12px + var(--sat)); transform: translateX(-50%); width: min(380px, 36vw); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.f-fase { width: 100%; background: var(--vidrio); border: 1px solid var(--vidrio-borde); border-radius: 18px; padding: 7px 14px 11px; color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.f-fase.pulso { animation: f-pulso .9s ease; }
@keyframes f-pulso { 30% { transform: scale(1.06); box-shadow: 0 0 0 4px rgba(255, 201, 60, .6), 0 6px 16px rgba(0, 0, 0, .25); } }
.f-fase-txt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.f-fase-nombre { font-size: 16px; font-weight: 900; }
.f-fase-estado { font-size: 12.5px; font-weight: 800; color: #ffb3a9; }
.f-fase.abierto .f-fase-estado { color: var(--hielo); }
.f-fase-barra { position: relative; height: 12px; }
.f-fase-tramos { display: flex; height: 100%; border-radius: 99px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4); }
.f-tramo { display: block; height: 100%; }
.t-apertura { background: #bfe0f2; } .t-manana { background: #ffe9a8; } .t-mediodia { background: #ffd166; }
.t-tarde { background: #f7ae62; } .t-horapico { background: #ef6f5b; } .t-cierre { background: #8fb3d9; }
.f-fase-sol { position: absolute; top: 50%; left: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #fff3b0, var(--oro) 55%, #f29a1a);
  color: #8a4b00; display: grid; place-items: center; font-size: 17px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 0 16px rgba(255, 201, 60, .9); will-change: transform; } /* se mueve en cada cuadro: capa propia y sin transición */
.f-fase-sol .f-ico { animation: f-gira 12s linear infinite; }
@keyframes f-gira { to { transform: rotate(360deg); } }
.f-raiz[data-fase="horapico"] .f-fase-nombre { color: #ffb0a4; }
.f-raiz[data-fase="horapico"] .f-fase { border-color: rgba(239, 111, 91, .7); }
.f-avisos { display: flex; flex-direction: column; align-items: center; gap: 6px; width: max-content; max-width: 92vw; }
.f-aviso { display: none; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 99px; font-weight: 900; font-size: 14px; color: #3b2700;
  background: linear-gradient(180deg, #ffe08a, #ffc93c); box-shadow: 0 4px 0 #c88d10, 0 8px 16px rgba(0, 0, 0, .25); }
.f-aviso.visible { display: flex; animation: f-aviso-entra .45s cubic-bezier(.2, 1.5, .4, 1); }
.f-aviso .f-ico, .f-aviso .f-ia { font-size: 18px; }
.f-aviso-fila.visible { animation: f-aviso-entra .45s cubic-bezier(.2, 1.5, .4, 1), f-respira 1.6s .5s ease-in-out infinite; }
.f-aviso-vereda { background: linear-gradient(180deg, #e6f4fb, #b9def2); color: var(--azul-pro); box-shadow: 0 4px 0 #7fb2cf, 0 8px 16px rgba(0, 0, 0, .2); }
.f-aviso-cerrar, .f-aviso-abrir { background: linear-gradient(180deg, #fff, #f3e9d4); color: var(--tinta); box-shadow: 0 4px 0 #cbb48a, 0 8px 16px rgba(0, 0, 0, .2); }
@keyframes f-aviso-entra { from { opacity: 0; transform: translateY(-10px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes f-respira { 50% { transform: scale(1.05); } }

.f-hud-der { position: absolute; right: calc(14px + var(--sar)); top: calc(12px + var(--sat)); display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.f-nivel { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.f-nivel-aro { --p: 0; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; padding: 5px;
  background: conic-gradient(var(--oro) calc(var(--p) * 1turn), rgba(255, 255, 255, .2) 0); box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.f-nivel-num { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(180deg, var(--azul), var(--azul-osc)); color: #fff; display: grid; place-items: center; font-size: 21px; font-weight: 900; }
.f-nivel-aro.sube { animation: f-rebota .7s cubic-bezier(.2, 1.6, .4, 1); }
.f-nivel-txt { font-size: 11px; font-weight: 900; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); text-transform: uppercase; letter-spacing: 1px; }
.f-hud-btn { appearance: none; width: 48px; height: 48px; border-radius: 15px; border: 1px solid var(--vidrio-borde); background: var(--vidrio); color: #fff; font-size: 22px;
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); transition: transform .1s, background .15s; }
.f-hud-btn:hover { background: rgba(61, 111, 140, .9); }
.f-hud-btn:active { transform: scale(.9); }
.f-raiz[data-modo="caja"] .f-hud-btn[data-hud="maqueta"] { display: none; }
.f-raiz[data-modo="maqueta"] .f-hud-btn[data-hud="maqueta"] { background: var(--oro); color: #3b2700; }

.f-mira { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 2px rgba(15, 29, 39, .5); transition: transform .15s, background .15s; }
.f-mira i { position: absolute; inset: -9px; border-radius: 50%; border: 3px solid var(--oro); opacity: 0; transform: scale(.5); transition: all .18s cubic-bezier(.2, 1.5, .4, 1); }
.f-mira.activa { background: var(--oro); }
.f-mira.activa i { opacity: 1; transform: scale(1); }
.f-ayuda { position: absolute; left: 50%; top: calc(50% + 30px); transform: translateX(-50%); display: none; align-items: center; gap: 9px; max-width: min(560px, 90vw);
  padding: 9px 16px 9px 9px; border-radius: 16px; background: rgba(255, 253, 248, .96); color: var(--tinta); font-weight: 900; font-size: 16px; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.f-ayuda.visible { display: flex; }
.f-ayuda.entra { animation: f-ayuda-entra .22s cubic-bezier(.2, 1.4, .4, 1); }
.f-ayuda .f-tecla { background: var(--oro); border-color: var(--oro-2); box-shadow: 0 2px 0 var(--oro-3); font-size: .9em; min-width: 2em; height: 2em; }
.f-ayuda.info { background: rgba(15, 29, 39, .85); color: #fff; padding-left: 16px; }
.f-ayuda.info .f-tecla { display: none; }
.f-es-tactil .f-ayuda .f-tecla { display: none; }
.f-es-tactil .f-ayuda { padding-left: 16px; top: calc(50% + 26px); font-size: 15px; }
@keyframes f-ayuda-entra { from { opacity: 0; transform: translate(-50%, 6px) scale(.94); } to { opacity: 1; transform: translateX(-50%); } }
.f-carga-info { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: calc(20px + var(--sab)); display: none; align-items: center; gap: 10px;
  padding: 8px 16px 8px 10px; border-radius: 99px; background: var(--vidrio); border: 1px solid var(--vidrio-borde); color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); white-space: nowrap; }
.f-carga-info.visible { display: flex; animation: f-aviso-entra .35s ease; }
.f-carga-ico { width: 30px; height: 30px; border-radius: 9px; background: #c99a5b; color: #4a2e12; display: grid; place-items: center; }
.f-carga-soltar { color: var(--hielo); font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.f-es-tactil .f-carga-info { bottom: auto; top: calc(50% + 74px); }
.f-es-tactil .f-carga-soltar { display: none; }
.f-pista-maqueta { position: absolute; left: 50%; bottom: calc(22px + var(--sab)); transform: translateX(-50%); display: none; align-items: center; gap: 10px; padding: 9px 18px;
  border-radius: 99px; background: var(--vidrio); color: #fff; font-weight: 800; font-size: 14.5px; white-space: nowrap; max-width: 94vw; overflow: hidden; text-overflow: ellipsis; }
.f-raiz[data-modo="maqueta"] .f-pista-maqueta { display: flex; }
.f-clic-mirar { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; top: calc(50% - 96px); display: none; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 18px;
  background: rgba(15, 29, 39, .82); color: #fff; font-weight: 900; font-size: 17px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); animation: f-respira 1.8s ease-in-out infinite; }
.f-clic-mirar.visible { display: flex; }
.f-raiz:not([data-modo="caminar"]) .f-mira, .f-raiz:not([data-modo="caminar"]) .f-ayuda, .f-raiz:not([data-modo="caminar"]) .f-carga-info { display: none; }
.f-raiz[data-modo="caja"] .f-objetivos, .f-raiz[data-modo="caja"] .f-avisos { display: none; }
.f-raiz[data-modo="caja"] .f-hud-izq, .f-raiz[data-modo="caja"] .f-hud-centro { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- toasts y carteles */
.f-toasts { position: absolute; left: 50%; top: calc(150px + var(--sat)); transform: translateX(-50%); z-index: 95; display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(520px, 92vw); }
.f-toast { display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 16px; background: var(--papel); color: var(--tinta); font-weight: 800; font-size: 15px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3); border-left: 6px solid var(--bien); pointer-events: auto; animation: f-toast-entra .4s cubic-bezier(.2, 1.4, .4, 1) both; max-width: 100%; }
.f-toast.f-saliendo { animation: f-toast-sale .3s ease both; }
.f-toast.rebote { animation: f-rebota .35s ease; }
.f-toast-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--bien); color: #fff; flex: none; font-size: 18px; }
.f-toast-img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; background: #fff; }
.f-toast-txt b { display: block; color: var(--azul-osc); }
.f-toast.aviso { border-left-color: var(--oro-2); } .f-toast.aviso .f-toast-ico { background: var(--oro-2); }
.f-toast.error { border-left-color: var(--rojo); } .f-toast.error .f-toast-ico { background: var(--rojo); }
.f-toast.camion { border-left-color: var(--azul); } .f-toast.camion .f-toast-ico { background: var(--azul); }
.f-toast.logro { background: linear-gradient(180deg, #fff8e3, #ffeec2); border-left-color: var(--oro); padding: 10px 18px 10px 10px; }
.f-toast.logro .f-toast-img { width: 56px; height: 56px; object-fit: contain; background: transparent; animation: f-gira-medalla 1s ease; }
.f-toast.logro .f-toast-txt b { color: #8a5a00; font-size: 16px; }
@keyframes f-gira-medalla { 0% { transform: rotateY(90deg) scale(.6); } 100% { transform: none; } }
@keyframes f-toast-entra { from { opacity: 0; transform: translateY(-16px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes f-toast-sale { to { opacity: 0; transform: translateY(-10px) scale(.95); } }
.f-banners { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.f-banner { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 34px; border-radius: 26px; text-align: center; max-width: 88vw;
  background: linear-gradient(180deg, rgba(61, 111, 140, .94), rgba(15, 29, 39, .94)); color: #fff; box-shadow: 0 0 0 4px rgba(159, 208, 234, .5), 0 20px 50px rgba(0, 0, 0, .45);
  animation: f-banner-entra .55s cubic-bezier(.2, 1.4, .4, 1) both; transform: translateY(-14vh); }
.f-banner.f-saliendo { animation: f-banner-sale .45s ease both; }
.f-banner-ico { width: 54px; height: 54px; border-radius: 50%; background: var(--oro); color: #6b4300; display: grid; place-items: center; font-size: 30px; margin-bottom: 4px; box-shadow: 0 4px 0 var(--oro-3); }
.f-banner-tit { font-size: clamp(30px, 7vw, 48px); font-weight: 900; letter-spacing: .5px; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.f-banner-sub { font-size: clamp(14px, 3.4vw, 18px); font-weight: 800; color: var(--hielo); max-width: 520px; }
.f-banner.pico { background: linear-gradient(180deg, rgba(239, 111, 91, .95), rgba(150, 50, 40, .95)); box-shadow: 0 0 0 4px rgba(255, 201, 60, .7), 0 20px 50px rgba(0, 0, 0, .45); }
.f-banner.pico .f-banner-sub { color: #ffe9d6; }
@keyframes f-banner-entra { from { opacity: 0; transform: translateY(-14vh) scale(.6); } to { opacity: 1; transform: translateY(-14vh); } }
@keyframes f-banner-sale { to { opacity: 0; transform: translateY(-18vh) scale(.9); } }
.f-confeti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 96; pointer-events: none; }

/* nivel nuevo */
.f-nivelup { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; padding: 16px; }
.f-nivelup-card { position: relative; pointer-events: auto; width: min(440px, 92vw); background: var(--crema); border-radius: 28px; padding: 64px 22px 20px; text-align: center;
  box-shadow: 0 0 0 5px var(--oro), 0 24px 60px rgba(0, 0, 0, .5); animation: f-entra .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.f-nivelup.f-saliendo .f-nivelup-card { animation: f-sale .4s ease both; }
.f-nivelup-rayos { position: absolute; left: 50%; top: 0; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; z-index: -1;
  background: repeating-conic-gradient(rgba(255, 201, 60, .5) 0 10deg, transparent 10deg 20deg); animation: f-gira 14s linear infinite; mask: radial-gradient(circle, #000 30%, transparent 70%); -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); }
.f-nivelup-gus { position: absolute; left: 50%; top: -58px; transform: translateX(-50%); width: 112px; height: 112px; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 0 0 4px var(--oro), 0 8px 20px rgba(0, 0, 0, .3); object-fit: cover; background: var(--hielo-2); }
.f-nivelup-num { position: absolute; right: 18px; top: 14px; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(180deg, var(--azul), var(--azul-osc)); color: #fff;
  font-size: 30px; font-weight: 900; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: .9; box-shadow: 0 0 0 4px #fff, 0 6px 14px rgba(0, 0, 0, .3); transform: rotate(8deg); }
.f-nivelup-num small { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.f-nivelup-tit { font-size: 27px; font-weight: 900; color: var(--azul-osc); }
.f-nivelup-sub { font-weight: 800; color: var(--tinta-2); margin: 4px 0 12px; }
.f-nivelup-lista b { display: block; font-size: 14px; margin-bottom: 8px; }
.f-nivelup-fotos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 10px; }
.f-nivelup-fotos img { width: 56px; height: 56px; object-fit: contain; border-radius: 14px; background: #fff; padding: 3px; box-shadow: 0 3px 0 var(--crema-3); animation: f-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.f-nivelup-fotos img:nth-child(2) { animation-delay: .08s; } .f-nivelup-fotos img:nth-child(3) { animation-delay: .16s; } .f-nivelup-fotos img:nth-child(4) { animation-delay: .24s; }
.f-nivelup-mej { font-size: 14px; font-weight: 800; color: var(--azul-osc); background: var(--hielo-3); border-radius: 12px; padding: 8px 10px; margin-bottom: 12px; }
@keyframes f-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- diálogos */
.f-dlg-velo { position: fixed; inset: 0; z-index: 78; pointer-events: auto; display: flex; align-items: flex-end; justify-content: center;
  padding: 12px calc(12px + var(--sar)) calc(14px + var(--sab)) calc(12px + var(--sal)); background: linear-gradient(180deg, transparent 40%, rgba(15, 29, 39, .55)); animation: f-aparece .25s ease both; cursor: pointer; }
.f-dlg-velo.f-saliendo { animation: f-desaparece .24s ease both; }
.f-dlg { position: relative; width: min(820px, 100%); display: flex; align-items: flex-end; gap: 0; animation: f-sube .38s cubic-bezier(.2, 1.3, .4, 1) both; }
.f-dlg-retrato { position: relative; z-index: 2; flex: none; width: 150px; height: 150px; margin-right: -26px; margin-bottom: 8px; border-radius: 50%; overflow: hidden; background: var(--hielo-2);
  border: 6px solid #fff; box-shadow: 0 0 0 4px var(--azul-osc), 0 10px 26px rgba(0, 0, 0, .4); }
.f-dlg-retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-dlg-retrato.entra { animation: f-rebota .45s cubic-bezier(.2, 1.6, .4, 1); }
.f-dlg-cuerpo { position: relative; flex: 1; min-height: 132px; background: var(--papel); border-radius: 24px; padding: 18px 22px 16px 44px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .6), 0 14px 34px rgba(0, 0, 0, .35); }
.f-dlg-nombre { position: absolute; top: -16px; left: 40px; background: linear-gradient(180deg, var(--azul), var(--azul-osc)); color: #fff; font-weight: 900; font-size: 15px; padding: 6px 16px; border-radius: 12px; box-shadow: 0 3px 0 var(--azul-pro); }
.f-dlg.otro .f-dlg-nombre { background: linear-gradient(180deg, #ffd96a, #f2a91a); color: #3b2700; box-shadow: 0 3px 0 var(--oro-3); }
.f-dlg.otro .f-dlg-retrato { box-shadow: 0 0 0 4px var(--oro-2), 0 10px 26px rgba(0, 0, 0, .4); }
.f-dlg-texto { font-size: clamp(17px, 2.4vw, 21px); font-weight: 800; line-height: 1.38; color: var(--tinta); min-height: 2.8em; white-space: pre-line; }
.f-dlg-opciones { display: none; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.f-dlg-velo.con-opciones .f-dlg-opciones { display: flex; }
.f-dlg-velo.con-opciones .f-dlg-sigue { display: none; }
.f-num-op { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(0, 0, 0, .12); font-size: 12px; margin-right: 2px; }
.f-es-tactil .f-num-op { display: none; }
.f-dlg-sigue { position: absolute; right: 18px; bottom: 10px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--tinta-3); animation: f-salta 1.1s ease-in-out infinite; }
@keyframes f-salta { 50% { transform: translateY(3px); } }
@media (max-width: 600px) {
  .f-dlg { flex-direction: column; align-items: flex-start; }
  .f-dlg-retrato { width: 92px; height: 92px; margin: 0 0 -30px 10px; border-width: 4px; }
  .f-dlg-cuerpo { width: 100%; padding: 30px 18px 30px; min-height: 120px; }
  .f-dlg-nombre { left: 112px; top: -14px; }
}

/* ---------------------------------------------------------------- editar precio */
.f-precio { width: 470px; }
.f-precio-prod { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.f-precio-foto { width: 92px; height: 92px; border-radius: 20px; background: #fff; padding: 6px; flex: none; box-shadow: 0 3px 0 var(--crema-3); }
.f-precio-foto img { width: 100%; height: 100%; object-fit: contain; }
.f-precio-nombre { font-size: 20px; font-weight: 900; line-height: 1.15; margin-bottom: 6px; }
.f-sector { --c: var(--azul); display: inline-block; font-size: 12.5px; font-weight: 900; color: #fff; background: var(--c); padding: 3px 10px; border-radius: 99px; }
.f-precio-stock { font-size: 13.5px; color: var(--tinta-2); margin-top: 6px; }
.f-precio-control { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--madera); border-radius: 22px; padding: 12px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), 0 4px 0 #3e2717; background-image: repeating-linear-gradient(95deg, rgba(255, 255, 255, .04) 0 6px, transparent 6px 14px); }
.f-paso-btn { appearance: none; border: 0; min-width: 52px; height: 52px; border-radius: 16px; background: #fff7e6; color: var(--madera); font-weight: 900; font-size: 15px; cursor: pointer;
  box-shadow: 0 4px 0 #c9b087; display: grid; place-items: center; padding: 0 8px; user-select: none; -webkit-user-select: none; touch-action: none; }
.f-paso-btn.grande { min-width: 60px; height: 60px; font-size: 26px; background: var(--oro); color: #3b2700; box-shadow: 0 4px 0 var(--oro-3); }
.f-paso-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #c9b087; }
.f-precio-valor { flex: 1; min-width: 0; text-align: center; background: #fff; border-radius: 14px; padding: 6px 4px 8px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .12); position: relative; }
.f-precio-valor::before { content: ""; position: absolute; left: 10px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--crema-3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.f-precio-valor small { display: block; font-size: 11.5px; font-weight: 800; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .6px; }
.f-precio-num { display: block; font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--tinta); }
.f-precio-num.late { animation: f-late-precio .2s ease; }
@keyframes f-late-precio { 50% { transform: scale(1.07); } }
.f-precio-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 10px; }
.f-precio-datos > div { background: var(--papel); border-radius: 14px; padding: 8px 10px; text-align: center; box-shadow: 0 2px 0 var(--crema-3); }
.f-precio-datos small { display: block; font-size: 12px; color: var(--tinta-2); font-weight: 800; }
.f-precio-datos b { font-size: 17px; font-variant-numeric: tabular-nums; }
.f-sugerido { cursor: pointer; outline: 2px dashed transparent; }
.f-sugerido:hover { outline-color: var(--azul); }
.f-precio-gan b.pos { color: var(--bien-2); } .f-precio-gan b.neg { color: var(--rojo-2); }
.f-precio-cara { display: flex; align-items: center; gap: 12px; background: var(--hielo-3); border-radius: 16px; padding: 10px 14px; }
.f-precio-carita { width: 52px; height: 52px; flex: none; display: block; }
.f-precio-carita .f-carita { width: 100%; height: 100%; }
.f-precio-carita.salta { animation: f-rebota .45s cubic-bezier(.2, 1.6, .4, 1); }
.f-precio-cara small { display: block; font-size: 12px; font-weight: 800; color: var(--tinta-2); }
.f-precio-cara b { font-size: 16px; }
.f-precio-alerta { display: none; margin-top: 10px; background: #ffe3df; color: var(--rojo-2); font-weight: 800; border-radius: 12px; padding: 8px 12px; font-size: 14px; }
.f-precio-alerta.visible { display: block; }
.f-carita { width: 30px; height: 30px; display: block; }

/* ---------------------------------------------------------------- pizarrón de la oferta */
.f-pizarra { width: min(680px, 100%); max-height: calc(100dvh - 24px); display: flex; }
.f-pizarra-marco { display: flex; flex-direction: column; width: 100%; border-radius: 22px; padding: 18px; color: #f6f3ea; font-family: "Chalkboard SE", "Comic Sans MS", "Marker Felt", var(--fuente);
  background: radial-gradient(ellipse at 30% 20%, #3b4a44, #24302b 70%); border: 14px solid var(--madera-2); box-shadow: inset 0 0 40px rgba(0, 0, 0, .5), 0 0 0 3px #3e2717, 0 26px 60px rgba(0, 0, 0, .5); overflow: hidden; }
.f-pizarra-cab { display: flex; align-items: center; }
.f-pizarra-cab h2 { flex: 1; margin: 0; font-size: 32px; letter-spacing: 1px; text-decoration: underline wavy rgba(255, 255, 255, .5); text-underline-offset: 8px; }
.f-x.tiza { background: rgba(255, 255, 255, .12); }
.f-pizarra-sub { margin: 8px 0 12px; opacity: .85; font-size: 16px; }
.f-pizarra-lista { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 4px; overscroll-behavior: contain; }
.f-tiza-item { appearance: none; border: 2px dashed rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .05); border-radius: 16px; color: inherit; font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; font-size: 14px; text-align: center; transition: transform .12s, background .15s; }
.f-tiza-item img { width: 60px; height: 60px; object-fit: contain; border-radius: 12px; background: #fff; padding: 3px; }
.f-tiza-item small { font-size: 15px; color: var(--oro); font-weight: 900; }
.f-tiza-item.elegido { border-style: solid; border-color: var(--oro); background: rgba(255, 201, 60, .14); transform: rotate(-1.5deg) scale(1.03); }
.f-tiza-nada { width: 60px; height: 60px; display: grid; place-items: center; font-size: 32px; opacity: .7; }
.f-pizarra-pie { display: flex; justify-content: flex-end; padding-top: 12px; font-family: var(--fuente); }

/* ---------------------------------------------------------------- notebook */
.f-nb-velo { padding-top: calc(10px + var(--sat)); }
.f-notebook { width: min(1080px, 100%); height: min(760px, calc(100vh - 24px)); height: min(760px, calc(100dvh - 24px - var(--sat) - var(--sab))); display: flex; flex-direction: column; }
.f-nb-tapa { flex: 1; min-height: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #2d3a44, #1d262d); border-radius: 26px 26px 10px 10px; padding: 14px 14px 12px;
  box-shadow: 0 0 0 2px #3c4a55, 0 26px 60px rgba(0, 0, 0, .55); position: relative; }
.f-nb-camara { position: absolute; left: 50%; top: 5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #0b1116; box-shadow: 0 0 0 2px #3c4a55; }
.f-nb-pantalla { flex: 1; min-height: 0; display: flex; border-radius: 12px; overflow: hidden; background: var(--crema); }
.f-nb-base { height: 16px; margin: 0 -2%; background: linear-gradient(180deg, #c9d2d9, #8e9aa3); border-radius: 0 0 26px 26px; box-shadow: 0 10px 22px rgba(0, 0, 0, .45); position: relative; }
.f-nb-base i { position: absolute; left: 50%; top: 0; width: 120px; height: 6px; margin-left: -60px; border-radius: 0 0 8px 8px; background: #7c8891; }
.f-nb-tabs { flex: none; width: 210px; background: linear-gradient(180deg, var(--azul-osc), var(--azul-pro)); padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.f-nb-marca { display: flex; align-items: center; gap: 10px; color: #fff; padding: 4px 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, .15); margin-bottom: 6px; font-size: 22px; }
.f-nb-marca b { display: block; font-size: 18px; letter-spacing: 1px; }
.f-nb-marca small { display: block; font-size: 12px; color: var(--hielo); font-weight: 700; }
.f-nb-tab { appearance: none; border: 0; background: transparent; color: #dcecf5; font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border-radius: 12px; cursor: pointer; text-align: left; transition: background .15s, color .15s; }
.f-nb-tab .f-ico, .f-nb-tab .f-ia { font-size: 20px; }
.f-nb-tab:hover { background: rgba(255, 255, 255, .1); }
.f-nb-tab.activa { background: var(--crema); color: var(--azul-pro); box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.f-nb-tab .corto { display: none; }
.f-nb-cont { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.f-nb-cab { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 20px; border-bottom: 2px solid var(--crema-3); background: var(--papel); }
.f-nb-titulo { flex: 1; margin: 0; font-size: 22px; font-weight: 900; color: var(--azul-pro); }
.f-nb-plata { display: flex; align-items: center; gap: 6px; background: var(--noche-2); color: #fff; padding: 6px 14px 6px 8px; border-radius: 99px; font-weight: 900; font-variant-numeric: tabular-nums; }
.f-nb-plata .f-ico, .f-nb-plata .f-ia { color: var(--oro); font-size: 20px; }
.f-nb-cab .f-x { background: var(--crema-2); color: var(--tinta); }
.f-nb-cab .f-x:hover { background: var(--crema-3); }
.f-nb-cuerpo { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px 18px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.f-nb-pie:empty { display: none; }
.f-nb-aviso { display: flex; align-items: center; gap: 12px; background: var(--hielo-3); border: 2px solid var(--hielo-2); color: var(--azul-pro); border-radius: 16px; padding: 10px 14px; margin-bottom: 12px; font-size: 14.5px; }
.f-nb-aviso > .f-ico, .f-nb-aviso > .f-ia { font-size: 26px; color: var(--azul); }
.f-nb-sub { display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; font-size: 18px; color: var(--azul-pro); }
.f-nb-sub small { font-size: 13px; color: var(--tinta-2); margin-left: auto; }
.f-en-camino { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 14px; }
.f-en-camino > b { display: inline-flex; align-items: center; gap: 6px; color: var(--azul-osc); }
.f-chip-prod { display: inline-flex; align-items: center; gap: 6px; background: #fff; border-radius: 99px; padding: 3px 10px 3px 3px; font-weight: 800; box-shadow: 0 2px 0 var(--crema-3); }
.f-chip-prod img { width: 26px; height: 26px; border-radius: 50%; object-fit: contain; background: #fff; }
.f-rubros { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 6px; scrollbar-width: thin; }
.f-rubro { --c: var(--azul); appearance: none; border: 2px solid var(--c); background: #fff; color: var(--tinta); font-weight: 800; font-size: 14px; padding: 7px 12px; border-radius: 99px; cursor: pointer; white-space: nowrap; flex: none; }
.f-rubro.activo { background: var(--c); color: #fff; }
.f-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }
.f-prod { position: relative; background: #fff; border-radius: 18px; padding: 10px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 3px 0 var(--crema-3), 0 6px 12px rgba(0, 0, 0, .05); border: 2px solid transparent; transition: border-color .15s, transform .15s; }
.f-prod.en-carrito { border-color: var(--oro); }
.f-prod.bloq { background: var(--crema-2); }
.f-prod.bloq .f-prod-foto img { filter: grayscale(1) opacity(.45); }
.f-prod-foto { position: relative; height: 96px; border-radius: 12px; background: #fff; display: grid; place-items: center; }
.f-prod-foto img { max-width: 100%; max-height: 96px; object-fit: contain; }
.f-prod-n { position: absolute; top: -6px; right: -6px; min-width: 30px; height: 30px; border-radius: 99px; background: var(--oro); color: #3b2700; font-weight: 900; display: grid; place-items: center; box-shadow: 0 2px 0 var(--oro-3); animation: f-pop .3s ease; }
.f-prod-poco { position: absolute; left: 0; bottom: 0; background: var(--rojo); color: #fff; font-weight: 900; font-size: 11.5px; padding: 3px 8px; border-radius: 0 10px 0 10px; }
.f-prod-nombre { font-weight: 900; font-size: 14.5px; line-height: 1.15; min-height: 2.3em; }
.f-prod-stock { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--tinta-2); }
.f-prod-stock .f-barra { flex: 1; }
.f-prod.poco .f-prod-stock .f-barra i { background: linear-gradient(90deg, var(--rojo), var(--naranja)); }
.f-prod-extra { display: flex; flex-wrap: wrap; gap: 4px; min-height: 1em; font-size: 11.5px; font-weight: 800; color: var(--tinta-2); }
.f-prod-extra span { background: var(--crema-2); border-radius: 6px; padding: 1px 6px; }
.f-prod-extra .camino { background: var(--hielo-2); color: var(--azul-pro); }
.f-prod-costo { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--tinta-2); font-weight: 700; }
.f-prod-costo b { font-size: 16px; color: var(--tinta); }
.f-prod-acc { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--crema); border-radius: 12px; padding: 4px; }
.f-cant { font-weight: 900; font-size: 18px; min-width: 30px; text-align: center; }
.f-mini { appearance: none; border: 0; width: 42px; height: 38px; border-radius: 10px; background: #fff; color: var(--tinta); font-size: 18px; display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 var(--crema-3); flex: none; }
.f-mini.mas { background: var(--azul); color: #fff; box-shadow: 0 3px 0 var(--azul-pro); }
.f-mini:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--crema-3); }
.f-mini[disabled] { opacity: .4; cursor: default; }
.f-prod-bloq { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--tinta-2); margin-top: auto; }
.f-tuto-resalta { border-color: var(--oro) !important; animation: f-tuto-brillo 1.2s ease-in-out infinite; z-index: 1; }
@keyframes f-tuto-brillo { 50% { box-shadow: 0 0 0 6px rgba(255, 201, 60, .55), 0 6px 12px rgba(0, 0, 0, .05); } }
.f-tuto-flecha { position: absolute; top: -12px; left: 0; right: 0; margin: 0 auto; width: max-content; background: var(--oro); color: #3b2700; font-weight: 900; font-size: 13px; padding: 3px 12px; border-radius: 99px; box-shadow: 0 3px 0 var(--oro-3); animation: f-salta 1s ease-in-out infinite; white-space: nowrap; }
.f-carrito { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--noche-2); color: #fff; flex-wrap: wrap; }
.f-carrito-ico { position: relative; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; font-size: 24px; flex: none; }
.f-carrito-ico .f-carrito-n { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; border-radius: 99px; background: var(--oro); color: #3b2700; font-size: 12px; font-weight: 900; display: grid; place-items: center; }
.f-carrito-txt { flex: 1; min-width: 140px; display: flex; flex-direction: column; }
.f-carrito-txt b { font-size: 16px; }
.f-carrito-txt span { font-size: 14px; color: var(--hielo); font-weight: 700; }
.f-carrito-txt span.neg { color: #ff9b91; }
.f-carrito.f-tuto-pide .f-btn.oro { animation: f-tuto-brillo-btn 1s ease-in-out infinite; }
@keyframes f-tuto-brillo-btn { 50% { box-shadow: 0 5px 0 var(--c2), 0 0 0 6px rgba(255, 201, 60, .5); } }
.f-carrito.f-camion-sale .f-carrito-ico { animation: f-camion-va .7s ease-in both; }
@keyframes f-camion-va { 40% { transform: translateX(-8px); } 100% { transform: translateX(110vw); opacity: 0; } }
/* precios */
.f-precios { display: flex; flex-direction: column; gap: 8px; }
.f-pfila { display: grid; grid-template-columns: 50px 1fr auto 92px 38px; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 7px 10px; box-shadow: 0 2px 0 var(--crema-3); }
.f-pfila img { width: 50px; height: 50px; object-fit: contain; }
.f-pfila-nom b { display: block; font-size: 15px; line-height: 1.15; }
.f-pfila-nom small { font-size: 12.5px; color: var(--tinta-2); font-weight: 700; }
.f-pfila-ctl { display: flex; align-items: center; gap: 6px; background: var(--crema); border-radius: 12px; padding: 4px; }
.f-pfila-precio { min-width: 82px; text-align: center; font-size: 16.5px; font-variant-numeric: tabular-nums; }
.f-pfila-gan { text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; font-size: 15px; }
.f-pfila-gan small { display: block; font-size: 12px; opacity: .75; }
.f-pfila-gan.pos { color: var(--bien-2); } .f-pfila-gan.neg { color: var(--rojo-2); }
/* tarjetas de mejoras y ayudantes */
.f-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.f-tarjeta { position: relative; background: #fff; border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 3px 0 var(--crema-3); border: 2px solid transparent; overflow: hidden; }
.f-tarjeta.tiene { border-color: var(--hielo); background: var(--hielo-3); }
.f-tarjeta.bloq { opacity: .7; background: var(--crema-2); }
.f-tarjeta-ico { width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(180deg, var(--azul), var(--azul-osc)); color: #fff; display: grid; place-items: center; font-size: 30px; box-shadow: 0 3px 0 var(--azul-pro); }
.f-mej-foto { width: calc(100% + 28px); margin: -14px -14px 0; height: 110px; object-fit: cover; }
.f-mejora:has(.f-mej-foto) .f-tarjeta-ico { position: absolute; top: 74px; left: 14px; border: 3px solid #fff; }
.f-tarjeta-txt b { display: block; font-size: 16px; margin-bottom: 3px; }
.f-tarjeta-txt p { margin: 0; color: var(--tinta-2); font-size: 14px; }
.f-tarjeta-txt small { display: block; margin-top: 6px; font-weight: 800; color: var(--azul-osc); }
.f-tarjeta-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.f-precio-tag { font-size: 18px; font-variant-numeric: tabular-nums; }
.f-sello { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; color: var(--bien-2); }
.f-bloq { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--tinta-2); font-size: 14px; }
.f-ayu-cara { width: 74px; height: 74px; border-radius: 50%; overflow: hidden; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--azul-osc); background: var(--hielo-2); }
.f-ayu-cara img, .f-ayu-cara svg { width: 100%; height: 100%; object-fit: cover; display: block; }
/* objetivos y logros */
.f-objs-grandes { display: flex; flex-direction: column; gap: 8px; }
.f-objg { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 2px 0 var(--crema-3); }
.f-objg > div { flex: 1; } .f-objg b { display: block; margin-bottom: 6px; font-size: 15px; }
.f-objg small { font-weight: 900; color: var(--azul-osc); }
.f-objg-check { width: 30px; height: 30px; border-radius: 10px; border: 3px solid var(--hielo); display: grid; place-items: center; color: #3b2700; flex: none; }
.f-objg.hecho .f-objg-check { background: var(--oro); border-color: var(--oro); }
.f-estrellas-dias { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; }
.f-estrellas-dias > b { display: inline-flex; align-items: center; gap: 4px; }
.f-estrellas-dias > b .f-star { fill: var(--oro); width: 20px; height: 20px; }
.f-dia-est { display: inline-flex; flex-direction: column; align-items: center; background: #fff; border-radius: 10px; padding: 3px 7px; box-shadow: 0 2px 0 var(--crema-3); }
.f-dia-est small { font-size: 10.5px; font-weight: 800; color: var(--tinta-2); }
.f-dia-est i { display: flex; }
.f-dia-est .f-star { width: 13px; height: 13px; fill: var(--crema-3); }
.f-dia-est .llena .f-star { fill: var(--oro); }
.f-logros { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.f-logro { background: #fff; border-radius: 16px; padding: 10px; text-align: center; box-shadow: 0 2px 0 var(--crema-3); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.f-logro img { width: 70px; height: 70px; object-fit: contain; }
.f-logro b { font-size: 13.5px; line-height: 1.15; }
.f-logro small { font-size: 11.5px; color: var(--tinta-2); line-height: 1.2; }
.f-logro.no { background: var(--crema-2); }
.f-logro.no img { filter: grayscale(1) opacity(.4); }
.f-logro.no b { color: var(--tinta-2); }
.f-logro.si { box-shadow: 0 0 0 2px var(--oro), 0 3px 0 var(--oro-2); }
/* estadísticas */
.f-fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.f-ficha { background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: 0 2px 0 var(--crema-3); }
.f-ficha small { display: block; font-size: 12.5px; color: var(--tinta-2); font-weight: 800; }
.f-ficha b { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--azul-pro); }
.f-top { display: flex; flex-direction: column; gap: 6px; }
.f-top-fila { display: grid; grid-template-columns: 26px 36px 1.3fr 1fr 40px; align-items: center; gap: 8px; background: #fff; border-radius: 12px; padding: 5px 10px; font-size: 14px; }
.f-top-fila img { width: 36px; height: 36px; object-fit: contain; }
.f-top-pos { width: 26px; height: 26px; border-radius: 50%; background: var(--oro); color: #3b2700; display: grid; place-items: center; font-weight: 900; font-size: 13px; }
.f-nota { color: var(--tinta-2); font-size: 14px; display: flex; align-items: center; gap: 8px; margin-top: 16px; }
/* meta Elordi */
.f-elordi { text-align: center; max-width: 640px; margin: 0 auto; }
.f-elordi-img { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); aspect-ratio: 1376 / 640; }
.f-elordi-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-elordi:not(.abierta) .f-elordi-img img { filter: saturate(.75) brightness(.92); }
.f-elordi-cartel { position: absolute; left: 14px; bottom: 14px; background: linear-gradient(180deg, var(--azul), var(--azul-osc)); color: #fff; border-radius: 12px; padding: 6px 14px; text-align: left; box-shadow: 0 4px 0 var(--azul-pro); }
.f-elordi-cartel b { display: block; font-size: 18px; } .f-elordi-cartel span { font-size: 13px; color: var(--hielo); font-weight: 800; }
.f-elordi h3 { font-size: 24px; margin: 16px 0 6px; color: var(--azul-pro); }
.f-elordi p { margin: 0 0 14px; color: var(--tinta-2); font-weight: 700; }
.f-meta-req { display: flex; flex-direction: column; gap: 12px; text-align: left; background: #fff; border-radius: 18px; padding: 14px 16px; margin-bottom: 16px; box-shadow: 0 3px 0 var(--crema-3); }
.f-meta-fila { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; font-weight: 800; }
.f-meta-fila .f-barra { grid-column: 1 / -1; }
.f-meta-fila span { display: inline-flex; align-items: center; gap: 6px; }
.f-meta-fila b { font-variant-numeric: tabular-nums; color: var(--azul-osc); }
.f-elordi-fin { width: 640px; text-align: center; }
.f-elordi-fin-img { aspect-ratio: 1376 / 700; overflow: hidden; }
.f-elordi-fin-img img { width: 100%; height: 100%; object-fit: cover; display: block; animation: f-kenburns 18s ease-in-out infinite alternate; }
.f-elordi-fin h2 { font-size: 30px; margin: 4px 0 6px; color: var(--azul-pro); }
.f-elordi-fin p { margin: 0 0 6px; font-weight: 700; color: var(--tinta-2); }

/* notebook en pantallas chicas */
@media (max-width: 760px) {
  .f-nb-velo { padding: 0; }
  .f-notebook { width: 100%; height: 100vh; height: 100dvh; }
  .f-nb-tapa { border-radius: 0; padding: calc(4px + var(--sat)) calc(4px + var(--sar)) calc(4px + var(--sab)) calc(4px + var(--sal)); }
  .f-nb-camara, .f-nb-base { display: none; }
  .f-nb-pantalla { flex-direction: column; border-radius: 10px; }
  .f-nb-tabs { width: auto; flex-direction: row; padding: 6px; gap: 4px; overflow-x: auto; overflow-y: hidden; flex: none; scrollbar-width: none; }
  .f-nb-tabs::-webkit-scrollbar { display: none; }
  .f-nb-marca { display: none; }
  .f-nb-tab { flex-direction: column; gap: 3px; padding: 7px 10px; font-size: 12px; min-width: 70px; flex: none; text-align: center; }
  .f-nb-tab .largo { display: none; } .f-nb-tab .corto { display: block; }
  .f-nb-cab { padding: 8px 10px 8px 14px; }
  .f-nb-titulo { font-size: 18px; }
  .f-nb-cuerpo { padding: 10px; }
  .f-prods { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .f-prod { padding: 8px; }
  .f-prod-foto { height: 76px; } .f-prod-foto img { max-height: 76px; }
  .f-pfila { grid-template-columns: 42px 1fr auto; grid-template-areas: "img nom cara" "ctl ctl gan"; row-gap: 6px; }
  .f-pfila img { grid-area: img; width: 42px; height: 42px; } .f-pfila-nom { grid-area: nom; } .f-pfila-cara { grid-area: cara; }
  .f-pfila-ctl { grid-area: ctl; justify-self: start; } .f-pfila-gan { grid-area: gan; }
  .f-carrito { padding: 8px 10px; gap: 8px; }
  .f-carrito .f-btn { flex: 1 1 100%; }
  .f-top-fila { grid-template-columns: 24px 32px 1fr 40px; } .f-top-fila .f-barra { display: none; }
}
@media (max-width: 760px) and (orientation: landscape) {
  .f-nb-pantalla { flex-direction: row; }
  .f-nb-tabs { flex-direction: column; width: 92px; overflow-y: auto; overflow-x: hidden; }
  .f-nb-tab { min-width: 0; }
  .f-carrito .f-btn { flex: 0 1 auto; }
}

/* ---------------------------------------------------------------- resumen del día */
.f-resumen { width: 520px; }
.f-res-cab { position: relative; text-align: center; color: #fff; padding: 20px 20px 18px; background: linear-gradient(180deg, var(--azul), var(--azul-osc)); flex: none; }
.f-res-cab h2 { margin: 4px 0 8px; font-size: 26px; font-weight: 900; }
.f-res-dia { display: inline-flex; flex-direction: column; align-items: center; background: rgba(255, 255, 255, .16); border-radius: 14px; padding: 4px 16px; font-size: 20px; font-weight: 900; }
.f-res-dia small { font-size: 12px; color: var(--hielo); text-transform: uppercase; letter-spacing: 1px; }
.f-res-estrellas { display: flex; justify-content: center; gap: 8px; }
.f-res-est .f-star { width: 52px; height: 52px; fill: rgba(255, 255, 255, .2); stroke: rgba(255, 255, 255, .35); stroke-width: 1; transition: fill .2s; }
.f-res-est:nth-child(2) .f-star { width: 64px; height: 64px; margin-top: -8px; }
.f-res-est.llena .f-star { fill: var(--oro); stroke: #fff; stroke-width: 1.4; filter: drop-shadow(0 0 10px rgba(255, 201, 60, .9)); }
.f-res-est.llena { animation: f-estrella .55s cubic-bezier(.2, 1.7, .4, 1); }
@keyframes f-estrella { 0% { transform: scale(.2) rotate(-50deg); } 100% { transform: none; } }
.f-res-cuentas { background: #fff; border-radius: 18px; padding: 6px 16px; box-shadow: 0 3px 0 var(--crema-3); }
.f-res-fila { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--crema-3); font-weight: 800; }
.f-res-fila b { font-size: 18px; font-variant-numeric: tabular-nums; }
.f-res-fila.neg b { color: var(--rojo-2); }
.f-res-fila.total { border-bottom: 0; font-size: 18px; }
.f-res-fila.total b { font-size: 26px; }
.f-res-fila.total.pos b { color: var(--bien-2); }
.f-res-fila b.listo { animation: f-rebota .35s ease; }
.f-res-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }
.f-res-chip { display: flex; align-items: center; gap: 6px; background: var(--hielo-3); color: var(--azul-pro); border-radius: 99px; padding: 6px 12px; font-size: 14px; }
.f-res-chip b { font-size: 17px; } .f-res-chip small { font-weight: 800; }
.f-res-chip.mal { background: #ffe8e4; color: var(--rojo-2); }
.f-res-objs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.f-res-objs > div { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14.5px; color: var(--tinta-2); }
.f-res-objs > div .f-ico { color: var(--rojo); }
.f-res-objs > div.hecho { color: var(--tinta); } .f-res-objs > div.hecho .f-ico { color: #fff; background: var(--oro-2); border-radius: 6px; padding: 2px; }
.f-res-bloque { background: #fff8e3; border-radius: 16px; padding: 10px 12px; margin-bottom: 12px; text-align: center; }
.f-res-bloque > b { display: block; margin-bottom: 8px; color: #8a5a00; }
.f-res-logros { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.f-res-logro { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 104px; font-size: 12.5px; font-weight: 800; }
.f-res-logro img { width: 64px; height: 64px; object-fit: contain; animation: f-pop .5s .8s cubic-bezier(.2, 1.6, .4, 1) both; }
.f-res-gus { display: flex; align-items: center; gap: 12px; background: var(--hielo-3); border-radius: 18px; padding: 10px 14px; }
.f-res-gus img { width: 74px; height: 74px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--azul-osc); object-fit: cover; flex: none; }
.f-res-gus p { margin: 0; font-weight: 900; color: var(--azul-osc); font-size: 16.5px; }
.f-resumen .f-panel-pie { justify-content: center; }

/* ---------------------------------------------------------------- controles táctiles (controles.js) */
.f-tactil { position: absolute; inset: 0; z-index: 20; pointer-events: none; display: none; }
.f-tactil.activo { display: block; }
.f-tactil[data-modo="ui"], .f-tactil[data-modo="caja"], .f-tactil[data-modo="titulo"], .f-tactil[data-modo="resumen"] { display: none; }
.f-zona-tactil { position: absolute; inset: 0; pointer-events: auto; touch-action: none; }
.f-joy { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .12s; pointer-events: none; will-change: transform, opacity; }
.f-joy.visible { opacity: 1; }
.f-joy-base { position: absolute; left: -64px; top: -64px; width: 128px; height: 128px; border-radius: 50%; background: radial-gradient(circle, rgba(15, 29, 39, .35), rgba(15, 29, 39, .55));
  border: 3px solid rgba(159, 208, 234, .7); box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.f-joy-mango { position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, var(--hielo) 70%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4), inset 0 -3px 0 rgba(0, 0, 0, .12); will-change: transform; }
.f-joy.corre .f-joy-base { border-color: var(--oro); }
.f-joy-pista { position: absolute; left: calc(56px + var(--sal)); bottom: calc(56px + var(--sab)); width: 112px; height: 112px; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, .45);
  display: grid; place-items: center; color: rgba(255, 255, 255, .8); font-weight: 900; font-size: 12px; text-align: center; pointer-events: none; transition: opacity .3s; }
.f-joy-pista::after { content: ""; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.f-tactil.joy-activo .f-joy-pista { opacity: 0; }
.f-btn-acc { position: absolute; right: calc(26px + var(--sar)); bottom: calc(40px + var(--sab)); width: 96px; height: 96px; border-radius: 50%; border: 0; pointer-events: auto;
  background: radial-gradient(circle at 40% 30%, #ffe08a, #f6b52a 70%); color: #4a3000; font-size: 40px; display: grid; place-items: center; touch-action: none;
  box-shadow: 0 6px 0 #c4860c, 0 10px 24px rgba(0, 0, 0, .35), 0 0 0 5px rgba(255, 255, 255, .35); opacity: .55; transition: opacity .15s, transform .08s, box-shadow .08s; }
.f-tactil.accionable .f-btn-acc { opacity: 1; animation: f-respira 1.4s ease-in-out infinite; }
.f-btn-acc.apretado { transform: translateY(5px) scale(.96); box-shadow: 0 1px 0 #c4860c, 0 4px 10px rgba(0, 0, 0, .3), 0 0 0 5px rgba(255, 255, 255, .35); animation: none !important; }
.f-acc-etq { position: absolute; right: calc(18px + var(--sar)); bottom: calc(146px + var(--sab)); max-width: 46vw; background: rgba(255, 253, 248, .96); color: var(--tinta); font-weight: 900; font-size: 14.5px;
  padding: 7px 12px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s; pointer-events: none; }
.f-acc-etq::after { content: ""; position: absolute; right: 44px; bottom: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: rgba(255, 253, 248, .96); }
.f-tactil.accionable .f-acc-etq { opacity: 1; transform: none; }
.f-btn-soltar { position: absolute; right: calc(136px + var(--sar)); bottom: calc(34px + var(--sab)); width: 66px; height: 66px; border-radius: 50%; border: 0; pointer-events: auto; touch-action: none;
  background: radial-gradient(circle at 40% 30%, #d9b07a, #b4834b 70%); color: #3b240c; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 0; font-size: 26px; font-weight: 900;
  box-shadow: 0 5px 0 #7a5530, 0 8px 18px rgba(0, 0, 0, .3); }
.f-btn-soltar span { font-size: 11px; }
.f-btn-soltar:active { transform: translateY(4px); box-shadow: 0 1px 0 #7a5530; }
.f-tactil.lleva .f-btn-soltar { display: flex; animation: f-pop .3s ease; }
.f-tactil[data-modo="maqueta"] .f-btn-acc, .f-tactil[data-modo="maqueta"] .f-acc-etq, .f-tactil[data-modo="maqueta"] .f-btn-soltar { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .f-btn-acc { width: 84px; height: 84px; bottom: calc(24px + var(--sab)); right: calc(22px + var(--sar)); }
  .f-acc-etq { bottom: calc(118px + var(--sab)); }
  .f-btn-soltar { right: calc(118px + var(--sar)); bottom: calc(20px + var(--sab)); width: 58px; height: 58px; }
  .f-joy-pista { left: calc(40px + var(--sal)); bottom: calc(32px + var(--sab)); width: 96px; height: 96px; }
}

/* ---------------------------------------------------------------- tutorial (tutorial.js) */
.f-tuto { position: absolute; left: calc(14px + var(--sal)); bottom: calc(18px + var(--sab)); z-index: 35; width: min(380px, calc(100vw - 28px)); pointer-events: auto;
  background: var(--papel); border-radius: 20px; padding: 10px 12px 10px 10px; display: flex; gap: 10px; align-items: center;
  box-shadow: 0 0 0 3px var(--oro), 0 10px 26px rgba(0, 0, 0, .35); animation: f-sube .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.f-tuto.f-saliendo { animation: f-sale .3s ease both; }
.f-tuto img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--azul-osc); flex: none; }
.f-tuto-txt { flex: 1; min-width: 0; }
.f-tuto-paso { font-size: 11.5px; font-weight: 900; color: var(--azul); text-transform: uppercase; letter-spacing: .6px; }
.f-tuto-tit { font-size: 16px; font-weight: 900; color: var(--tinta); line-height: 1.2; }
.f-tuto-det { font-size: 13px; color: var(--tinta-2); font-weight: 700; margin-top: 2px; line-height: 1.25; }
.f-tuto-saltear { appearance: none; border: 0; background: transparent; color: var(--tinta-3); font-weight: 800; font-size: 12px; cursor: pointer; align-self: flex-start; padding: 2px 4px; text-decoration: underline; }
.f-tuto.nuevo { animation: f-sube .45s cubic-bezier(.2, 1.3, .4, 1) both, f-tuto-brillo 1.2s .5s ease-in-out 2; }
.f-tuto-barra { height: 5px; border-radius: 9px; background: var(--crema-3); margin-top: 6px; overflow: hidden; }
.f-tuto-barra i { display: block; height: 100%; background: var(--oro); border-radius: inherit; transition: width .5s ease; }
.f-es-tactil .f-tuto { left: 0; right: 0; margin: 0 auto; bottom: auto; top: calc(132px + var(--sat)); width: min(380px, calc(100vw - 20px)); }
.f-es-tactil .f-tuto.f-saliendo { animation: none; opacity: 0; }
.f-raiz[data-modo="caja"] .f-tuto { display: none; }
.f-raiz[data-modo="titulo"] .f-tuto, .f-raiz[data-modo="resumen"] .f-tuto { display: none; }

/* ---------------------------------------------------------------- MODO CAJA (modoCaja.js) */
.f-caja { position: absolute; inset: 0; z-index: 30; pointer-events: none; animation: f-aparece .3s ease both; }
.f-caja.f-saliendo { animation: f-desaparece .3s ease both; }
.f-caja-sup { position: absolute; left: calc(12px + var(--sal)); right: calc(12px + var(--sar)); top: calc(12px + var(--sat)); display: flex; align-items: center; gap: 10px; }
.f-caja-salir { pointer-events: auto; }
.f-caja-fila { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: var(--vidrio); color: #fff; font-weight: 800; font-size: 14.5px; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.f-caja-fila b { font-size: 18px; color: var(--oro); }
.f-caja-racha { display: none; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; background: linear-gradient(180deg, #ffd96a, #f2a91a); color: #4a2b00; font-weight: 900; box-shadow: 0 4px 0 var(--oro-3); }
.f-caja-racha.visible { display: flex; animation: f-pop .4s cubic-bezier(.2, 1.6, .4, 1); }
.f-caja-sup .f-hueco { flex: 1; }
/* pantalla de la notebook con el ticket */
.f-caja-pantalla { position: absolute; right: calc(14px + var(--sar)); top: calc(76px + var(--sat)); width: 318px; max-height: calc(100% - 300px); min-height: 220px; display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden; background: #1d262d; padding: 8px; box-shadow: 0 0 0 2px #3c4a55, 0 16px 40px rgba(0, 0, 0, .45); pointer-events: auto; animation: f-pantalla-entra .5s .1s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes f-pantalla-entra { from { opacity: 0; transform: translateX(40px) rotateY(-14deg); } to { opacity: 1; transform: none; } }
.f-cp { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--papel); border-radius: 11px; overflow: hidden; }
.f-cp-cab { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: linear-gradient(180deg, var(--azul), var(--azul-osc)); color: #fff; font-weight: 900; font-size: 14px; }
.f-cp-cab .f-logo-mini { font-size: 18px; }
.f-cp-cab span { flex: 1; }
.f-cp-cab small { font-weight: 800; color: var(--hielo); font-size: 12px; }
.f-cp-cliente { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px dashed var(--crema-3); }
.f-cp-cliente img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--hielo); flex: none; }
.f-cp-cliente b { display: block; font-size: 13.5px; line-height: 1.15; }
.f-cp-cliente small { display: block; font-size: 12.5px; color: var(--tinta-2); font-weight: 700; font-style: italic; }
.f-cp-lineas { list-style: none; margin: 0; padding: 4px 8px; flex: 1; min-height: 40px; overflow: auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; }
.f-cp-linea { display: flex; align-items: center; gap: 8px; padding: 5px 2px; border-bottom: 1px dotted var(--crema-3); animation: f-linea .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.f-cp-linea img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.f-cp-linea span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--fuente); font-weight: 800; }
.f-cp-linea b { font-variant-numeric: tabular-nums; }
.f-cp-linea.nueva { background: linear-gradient(90deg, rgba(255, 201, 60, .45), transparent); }
@keyframes f-linea { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.f-cp-vacio { color: var(--tinta-3); text-align: center; padding: 14px 6px; font-family: var(--fuente); font-weight: 700; font-size: 13.5px; }
.f-cp-total { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 12px; background: var(--noche-2); color: #fff; }
.f-cp-total span { font-weight: 800; color: var(--hielo); font-size: 14px; }
.f-cp-total small { color: var(--hielo); font-weight: 700; font-size: 12px; margin-left: 6px; }
.f-cp-total b { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; }
.f-cp-total.late b { animation: f-late-pos .5s ease; }
.f-cp-total.listo { background: linear-gradient(180deg, var(--azul-osc), var(--noche-2)); }
/* globos de la conversación */
.f-caja-charla { position: absolute; left: 50%; top: calc(74px + var(--sat)); transform: translateX(-60%); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; max-width: min(420px, 60vw); pointer-events: none; }
.f-globo { display: flex; align-items: center; gap: 8px; background: #fff; color: var(--tinta); border-radius: 16px; padding: 6px 12px 6px 6px; font-weight: 900; font-size: 15px; box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
  animation: f-pop .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.f-globo img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--hielo); }
.f-globo.gus { background: var(--azul-osc); color: #fff; margin-left: 30px; }
.f-globo.gus img { border-color: #fff; }
.f-globo.f-saliendo { animation: f-desaparece .3s ease both; }
/* pista de qué hacer */
.f-caja-pista { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: calc(24px + var(--sab)); display: none; align-items: center; gap: 10px; padding: 10px 18px; max-width: 92vw;
  border-radius: 18px; background: rgba(15, 29, 39, .86); color: #fff; font-weight: 900; font-size: 16px; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); text-align: center; }
.f-caja-pista.visible { display: flex; animation: f-sube .35s ease both; }
.f-caja-pista .f-ico { font-size: 26px; color: var(--oro); animation: f-toca 1.2s ease-in-out infinite; flex: none; }
@keyframes f-toca { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px) scale(1.08); } }
.f-caja.pagando .f-caja-pista { bottom: auto; top: calc(74px + var(--sat)); }
/* esperando cliente */
.f-caja-espera { position: absolute; left: 0; right: 0; margin: 0 auto; top: 24%; display: none; flex-direction: column; align-items: center; gap: 10px; padding: 22px 26px; width: min(380px, 88vw);
  background: rgba(255, 253, 248, .97); border-radius: 24px; text-align: center; box-shadow: 0 16px 40px rgba(0, 0, 0, .4); pointer-events: auto; }
.f-caja-espera.visible { display: flex; animation: f-entra .4s cubic-bezier(.2, 1.3, .4, 1) both; }
.f-caja-espera img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--azul-osc); }
.f-caja-espera b { font-size: 21px; }
.f-caja-espera p { margin: 0; color: var(--tinta-2); font-weight: 700; }
.f-caja-espera .f-puntos i { display: inline-block; width: 9px; height: 9px; margin: 0 3px; border-radius: 50%; background: var(--azul); animation: f-salta 1s ease-in-out infinite; }
.f-caja-espera .f-puntos i:nth-child(2) { animation-delay: .15s; } .f-caja-espera .f-puntos i:nth-child(3) { animation-delay: .3s; }
/* plata del cliente */
.f-caja-pago { position: absolute; left: calc(14px + var(--sal)); top: calc(76px + var(--sat)); display: none; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 18px; background: rgba(255, 253, 248, .97);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35); pointer-events: auto; max-width: min(360px, 60vw); }
.f-caja-pago.visible { display: flex; animation: f-entra .4s cubic-bezier(.2, 1.3, .4, 1) both; }
.f-caja-pago > b { font-size: 14px; color: var(--tinta-2); }
.f-caja-pago .f-billetes-cliente { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.f-caja-pago .f-pago-suma { font-size: 15px; font-weight: 900; }
.f-caja-pago .f-pago-suma b { font-size: 20px; color: var(--azul-osc); font-variant-numeric: tabular-nums; }
/* billetes y monedas de juguete */
.f-billete { --c: #4f86c6; --c2: #2f5f93; position: relative; display: inline-flex; align-items: center; gap: 5px; width: 92px; height: 46px; padding: 4px 7px 4px 4px; border-radius: 7px;
  background: var(--c); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c)); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45), 0 2px 0 var(--c2), 0 4px 8px rgba(0, 0, 0, .2); overflow: hidden; flex: none; }
.f-billete::before { content: ""; position: absolute; right: -14px; bottom: -20px; width: 60px; height: 40px; background: rgba(255, 255, 255, .14); clip-path: polygon(0 100%, 30% 30%, 50% 60%, 75% 10%, 100% 100%); }
.f-billete .f-logo-mini { width: 30px; height: 30px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.f-billete b { position: relative; font-size: 15.5px; font-weight: 900; letter-spacing: -.3px; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); line-height: 1; }
.f-billete b small { display: block; font-size: 8.5px; letter-spacing: .5px; opacity: .9; font-weight: 800; }
.f-billete.d20000 { --c: #8a63c2; --c2: #5b3d8a; } .f-billete.d10000 { --c: #3f83c8; --c2: #285a8d; }
.f-billete.d2000 { --c: #2aa3a8; --c2: #1b7276; } .f-billete.d1000 { --c: #e98a3a; --c2: #a85a1d; }
.f-moneda { --c: #e9c46a; --c2: #b38a2a; display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; flex: none; color: #4a3300; font-weight: 900; font-size: 15px;
  background: radial-gradient(circle at 35% 30%, #fff8d8, var(--c) 55%, var(--c2)); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .45), inset 0 0 0 5px var(--c2), 0 3px 0 var(--c2), 0 4px 8px rgba(0, 0, 0, .2); }
.f-moneda.d200 { --c: #cfd8de; --c2: #8b979f; color: #2c3a43; } .f-moneda.d100 { --c: #e0a07a; --c2: #a8643d; color: #4a2410; }
.f-billete.chico { width: 72px; height: 36px; } .f-billete.chico .f-logo-mini { width: 22px; height: 22px; } .f-billete.chico b { font-size: 13px; }
.f-moneda.chico { width: 38px; height: 38px; font-size: 12px; }
.f-billetes-cliente .f-billete, .f-billetes-cliente .f-moneda { animation: f-billete-llega .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes f-billete-llega { from { opacity: 0; transform: translate(-40px, -30px) rotate(-14deg); } to { opacity: 1; transform: none; } }
/* cajón */
.f-cajon { position: absolute; left: 0; right: 0; bottom: 0; display: none; flex-direction: column; pointer-events: auto; padding: 0 calc(12px + var(--sar)) calc(10px + var(--sab)) calc(12px + var(--sal));
  background: linear-gradient(180deg, #4a3020, #2e1d12); box-shadow: 0 -10px 30px rgba(0, 0, 0, .45); border-top: 5px solid #7b5134; }
.f-cajon.visible { display: flex; animation: f-cajon-abre .45s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes f-cajon-abre { from { transform: translateY(100%); } to { transform: none; } }
.f-cajon-cab { display: flex; align-items: stretch; gap: 10px; padding: 10px 0 8px; flex-wrap: wrap; }
.f-cajon-info { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.f-dato { background: rgba(255, 255, 255, .1); color: #fff; border-radius: 12px; padding: 5px 10px; display: flex; flex-direction: column; min-width: 92px; }
.f-dato small { font-size: 11.5px; color: var(--hielo); font-weight: 800; }
.f-dato b { font-size: 18px; font-variant-numeric: tabular-nums; }
.f-dato.meta { background: rgba(255, 201, 60, .2); box-shadow: inset 0 0 0 2px var(--oro); }
.f-dato.meta b { color: var(--oro); }
.f-cajon-vuelto { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 10px; background: var(--papel); border-radius: 14px; padding: 6px 10px; }
.f-cajon-vuelto .f-dado { display: flex; flex-direction: column; min-width: 96px; }
.f-cajon-vuelto .f-dado small { font-size: 11.5px; font-weight: 800; color: var(--tinta-2); }
.f-cajon-vuelto .f-dado b { font-size: 22px; font-variant-numeric: tabular-nums; }
.f-bandeja { flex: 1; min-width: 60px; min-height: 48px; display: flex; align-items: center; flex-wrap: wrap; gap: 3px; }
.f-bandeja > * { cursor: pointer; animation: f-pop .25s ease both; }
.f-bandeja .f-billete { margin-right: -46px; } .f-bandeja .f-billete:last-of-type { margin-right: 4px; }
.f-bandeja .f-moneda { margin-right: -24px; } .f-bandeja .f-moneda:last-child { margin-right: 0; }
.f-bandeja-vacia { color: var(--tinta-3); font-weight: 700; font-size: 13.5px; }
.f-dif { font-size: 13px; font-weight: 900; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.f-dif.falta { background: #fff1d6; color: #9a6400; } .f-dif.pasa { background: #ffe3df; color: var(--rojo-2); } .f-dif.justo { background: var(--hielo-2); color: var(--azul-pro); animation: f-rebota .4s ease; }
.f-cajon-acc { display: flex; gap: 8px; align-items: center; }
.f-cajon-comps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; background: #1b110a; border-radius: 14px; padding: 6px; box-shadow: inset 0 4px 10px rgba(0, 0, 0, .6); }
.f-comp { appearance: none; border: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 82px; padding: 8px 2px 6px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, #3a271a, #2a1b11); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .06), inset 0 -3px 6px rgba(0, 0, 0, .4); transition: transform .08s; touch-action: manipulation; }
.f-comp:active { transform: scale(.94); }
.f-comp .f-pila { position: relative; display: grid; place-items: center; }
.f-comp .f-pila::before, .f-comp .f-pila::after { content: ""; position: absolute; inset: 0; border-radius: 7px; background: rgba(255, 255, 255, .12); transform: translate(3px, -3px); z-index: -1; }
.f-comp .f-pila::after { transform: translate(6px, -6px); background: rgba(255, 255, 255, .07); }
.f-comp .f-moneda + .f-pila::before { border-radius: 50%; }
.f-comp small { color: #e8d6bd; font-weight: 800; font-size: 12px; }
/* posnet */
.f-posnet { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: calc(10px + var(--sab)); display: none; flex-direction: column; gap: 8px; width: min(330px, 92vw); padding: 14px; pointer-events: auto;
  border-radius: 28px; background: linear-gradient(180deg, #3b4752, #222b33); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 18px 40px rgba(0, 0, 0, .5); }
.f-posnet.visible { display: flex; animation: f-cajon-abre .45s cubic-bezier(.2, 1.2, .4, 1) both; }
.f-posnet-pantalla { background: linear-gradient(180deg, #c9e6c1, #a9d3a0); background: linear-gradient(180deg, #cfe9f6, #a9d4ea); border-radius: 12px; padding: 8px 12px; color: #12303f; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .3); min-height: 74px; display: flex; flex-direction: column; justify-content: center; }
.f-posnet-pantalla small { font-size: 12px; font-weight: 800; opacity: .75; }
.f-posnet-pantalla b { font-size: 30px; font-weight: 900; letter-spacing: 1px; text-align: right; }
.f-posnet-pantalla.mal { animation: f-tiembla .4s ease; background: linear-gradient(180deg, #ffd9d4, #f4b0a8); }
.f-posnet-pantalla.bien { background: linear-gradient(180deg, #fff3c4, #ffd96a); }
.f-posnet-teclas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.f-tecla-pos { appearance: none; border: 0; height: 50px; border-radius: 12px; background: linear-gradient(180deg, #f4f6f8, #d5dce2); color: #1d2a33; font-size: 21px; font-weight: 900; cursor: pointer;
  box-shadow: 0 4px 0 #8f9ba5; touch-action: manipulation; display: grid; place-items: center; }
.f-tecla-pos:active, .f-tecla-pos.apretado { transform: translateY(3px); box-shadow: 0 1px 0 #8f9ba5; }
.f-tecla-pos.borra { background: linear-gradient(180deg, #ffe08a, #f2b632); box-shadow: 0 4px 0 #b97b06; }
.f-posnet-ok { appearance: none; border: 0; height: 56px; border-radius: 14px; font-size: 19px; font-weight: 900; color: #fff; cursor: pointer; background: linear-gradient(180deg, #4fa3d9, #2f86c4); box-shadow: 0 5px 0 #1f6797; display: flex; align-items: center; justify-content: center; gap: 8px; }
.f-posnet-ok:active { transform: translateY(4px); box-shadow: 0 1px 0 #1f6797; }
.f-posnet-tarjeta { position: absolute; top: -46px; left: 50%; width: 120px; height: 74px; margin-left: -60px; border-radius: 10px; background: linear-gradient(135deg, #5989a3, #2a4f66); box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
  animation: f-tarjeta-entra .7s .2s cubic-bezier(.2, 1.2, .4, 1) both; z-index: -1; }
.f-posnet-tarjeta::before { content: ""; position: absolute; left: 12px; top: 22px; width: 22px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, #ffe7a0, #d9a93a); }
.f-posnet-tarjeta::after { content: "FAMA"; position: absolute; right: 12px; bottom: 10px; color: rgba(255, 255, 255, .85); font-weight: 900; font-size: 13px; letter-spacing: 1px; }
@keyframes f-tarjeta-entra { from { transform: translateY(-60px) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes f-tiembla { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* resultado y flotantes */
.f-caja-resultado { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); display: none; flex-direction: column; align-items: center; gap: 4px; text-align: center; pointer-events: none; }
.f-caja-resultado.visible { display: flex; }
.f-sello-grande { padding: 14px 30px; border-radius: 22px; font-size: clamp(34px, 8vw, 54px); font-weight: 900; color: #fff; letter-spacing: 1px; transform: rotate(-6deg);
  background: linear-gradient(180deg, var(--azul), var(--azul-osc)); box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--azul-osc), 0 20px 40px rgba(0, 0, 0, .4); animation: f-sello .5s cubic-bezier(.2, 1.7, .4, 1) both; }
.f-caja-resultado.mal .f-sello-grande { background: linear-gradient(180deg, #ef6d62, #c4463d); box-shadow: 0 0 0 5px #fff, 0 0 0 9px #b33d33, 0 20px 40px rgba(0, 0, 0, .4); }
.f-caja-resultado .f-res-detalle { margin-top: 18px; background: rgba(255, 253, 248, .97); color: var(--tinta); font-weight: 900; font-size: 17px; padding: 8px 16px; border-radius: 14px; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); animation: f-sube .4s .15s ease both; }
.f-caja-resultado .f-res-plata { font-size: 30px; font-weight: 900; color: var(--oro); text-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 20px rgba(0, 0, 0, .4); animation: f-sube .4s .1s ease both; }
.f-caja-resultado .f-res-extra { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.f-caja-resultado .f-res-extra span { background: var(--oro); color: #3b2700; font-weight: 900; padding: 4px 12px; border-radius: 99px; font-size: 14px; animation: f-pop .4s .3s ease both; }
@keyframes f-sello { from { transform: rotate(-6deg) scale(2.2); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: 1; } }
.f-caja-flotantes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.f-flota { position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 20px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .45), 0 0 10px rgba(0, 0, 0, .35); white-space: nowrap; animation: f-flota 1s ease-out both; }
@keyframes f-flota { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -190%); } }
.f-volador { position: fixed; z-index: 97; pointer-events: none; transition: transform .38s cubic-bezier(.45, -.2, .5, 1), opacity .38s; will-change: transform; }

/* caja en celular vertical */
@media (max-width: 700px) and (orientation: portrait) {
  .f-caja-pantalla { left: calc(10px + var(--sal)); right: calc(10px + var(--sar)); width: auto; top: auto; bottom: calc(10px + var(--sab)); max-height: 30vh; min-height: 0; padding: 5px; }
  .f-cp-lineas { max-height: 15vh; }
  .f-cp-cliente { padding: 5px 8px; } .f-cp-cliente img { width: 30px; height: 30px; }
  .f-cp-total b { font-size: 22px; }
  .f-caja.pagando .f-caja-pantalla { display: none; }
  .f-caja-pista { bottom: auto; top: calc(62px + var(--sat)); font-size: 14px; padding: 7px 14px; max-width: calc(100vw - 20px); }
  .f-caja .f-caja-charla { top: calc(112px + var(--sat)); }
  .f-caja.pagando .f-caja-charla { top: calc(60px + var(--sat)); }
  .f-caja.pagando .f-caja-pago { top: calc(108px + var(--sat)); }
  .f-caja.pagando .f-caja-pista { top: calc(66px + var(--sat)); }
  .f-caja-charla { left: calc(10px + var(--sal)); transform: none; top: calc(66px + var(--sat)); max-width: 80vw; }
  .f-caja-pago { left: calc(10px + var(--sal)); right: calc(10px + var(--sar)); top: calc(118px + var(--sat)); max-width: none; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .f-caja-salir span { display: none; }
  .f-caja-salir { padding: 8px 14px; min-height: 44px; }
  .f-cajon-comps { grid-template-columns: repeat(4, 1fr); }
  .f-comp { min-height: 66px; padding: 5px 2px 4px; }
  .f-comp small { display: none; }
  .f-cajon-cab { gap: 6px; padding-top: 8px; }
  .f-cajon-info { width: 100%; }
  .f-dato { min-width: 0; flex: 1; padding: 4px 8px; } .f-dato b { font-size: 16px; }
  .f-cajon-vuelto { min-width: 0; width: 100%; padding: 4px 8px; }
  .f-cajon-acc { width: 100%; } .f-cajon-acc .f-btn { flex: 1; }
  .f-billete { width: 80px; height: 42px; gap: 3px; } .f-billete b { font-size: 13px; letter-spacing: -.4px; } .f-billete .f-logo-mini { width: 22px; height: 22px; }
  .f-moneda { width: 46px; height: 46px; }
}
/* caja en celular horizontal */
@media (orientation: landscape) and (max-height: 500px) {
  .f-caja-pantalla { top: calc(60px + var(--sat)); width: 250px; max-height: calc(100% - 70px); }
  .f-caja.pagando .f-caja-pantalla { display: none; }
  .f-cajon-cab { padding: 6px 0 5px; gap: 6px; }
  .f-comp { min-height: 58px; padding: 4px 2px; } .f-comp small { display: none; }
  .f-billete { width: 76px; height: 38px; } .f-billete b { font-size: 13px; } .f-billete .f-logo-mini { width: 24px; height: 24px; }
  .f-moneda { width: 40px; height: 40px; font-size: 13px; }
  .f-dato { min-width: 76px; padding: 3px 8px; } .f-dato b { font-size: 15px; }
  .f-caja-pago { top: calc(60px + var(--sat)); }
  .f-posnet { flex-direction: row; flex-wrap: wrap; width: min(560px, 94vw); padding: 10px; gap: 6px; }
  .f-posnet-pantalla { flex: 1 1 180px; min-height: 60px; } .f-posnet-pantalla b { font-size: 24px; }
  .f-posnet-teclas { flex: 2 1 260px; grid-template-columns: repeat(6, 1fr); gap: 5px; } .f-tecla-pos { height: 40px; font-size: 18px; }
  .f-posnet-ok { flex: 1 1 100%; height: 44px; }
  .f-caja-pista { bottom: calc(14px + var(--sab)); }
}

/* ---------------------------------------------------------------- HUD en pantallas chicas */
@media (max-width: 900px) {
  .f-objetivos { width: 250px; }
}
@media (max-width: 640px) and (orientation: portrait) {
  .f-gus { width: 50px; height: 50px; border-width: 3px; box-shadow: 0 0 0 2px var(--azul-osc), 0 4px 10px rgba(0, 0, 0, .3); }
  .f-gus-globo { top: 54px; left: 0; font-size: 13px; }
  .f-hud-izq { left: calc(8px + var(--sal)); top: calc(8px + var(--sat)); gap: 7px; }
  .f-plata { padding: 4px 12px 4px 5px; } .f-plata-ico { width: 26px; height: 26px; font-size: 16px; } .f-plata-num { font-size: 18px; }
  .f-chips { margin-top: 0; gap: 4px; }
  .f-chip { font-size: 12px; padding: 3px 8px; }
  .f-star { width: 12px; height: 12px; }
  .f-hud-der { right: calc(8px + var(--sar)); top: calc(8px + var(--sat)); gap: 6px; }
  .f-nivel-aro { width: 44px; height: 44px; padding: 4px; } .f-nivel-num { font-size: 17px; } .f-nivel-txt { display: none; }
  .f-hud-btn { width: 42px; height: 42px; border-radius: 13px; font-size: 19px; }
  .f-hud-centro { top: calc(72px + var(--sat)); width: calc(100% - 16px - var(--sal) - var(--sar)); }
  .f-fase { padding: 5px 12px 8px; border-radius: 14px; }
  .f-fase-txt { margin-bottom: 4px; } .f-fase-nombre { font-size: 14px; } .f-fase-estado { font-size: 11.5px; }
  .f-fase-barra { height: 9px; } .f-fase-sol { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: 14px; }
  .f-objetivos { top: calc(128px + var(--sat)); left: calc(8px + var(--sal)); width: min(290px, calc(100vw - 16px)); border-radius: 12px; }
  .f-obj-cab { padding: 6px 10px; font-size: 13px; }
  .f-avisos { position: absolute; top: calc(100% + 44px); }
  .f-aviso { font-size: 12.5px; padding: 5px 12px 5px 8px; }
  .f-toasts { top: calc(178px + var(--sat)); }
  .f-toast { font-size: 14px; }
  .f-ayuda { font-size: 14.5px; max-width: 86vw; }
  .f-banner { transform: translateY(-6vh); padding: 14px 22px; }
  @keyframes f-banner-entra { from { opacity: 0; transform: translateY(-6vh) scale(.6); } to { opacity: 1; transform: translateY(-6vh); } }
  .f-caja-sup { left: calc(8px + var(--sal)); right: calc(8px + var(--sar)); top: calc(8px + var(--sat)); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .f-gus { width: 48px; height: 48px; border-width: 3px; }
  .f-gus-globo { top: 52px; left: 0; }
  .f-hud-izq { top: calc(8px + var(--sat)); left: calc(10px + var(--sal)); }
  .f-plata-num { font-size: 18px; } .f-plata-ico { width: 26px; height: 26px; }
  .f-chip { font-size: 12px; padding: 3px 8px; }
  .f-hud-centro { top: calc(8px + var(--sat)); width: min(300px, 34vw); }
  .f-fase { padding: 4px 10px 7px; } .f-fase-nombre { font-size: 13.5px; } .f-fase-estado { font-size: 11px; }
  .f-hud-der { top: calc(8px + var(--sat)); }
  .f-nivel-aro { width: 42px; height: 42px; } .f-nivel-num { font-size: 16px; } .f-nivel-txt { display: none; }
  .f-hud-btn { width: 40px; height: 40px; font-size: 18px; }
  .f-objetivos { top: calc(70px + var(--sat)); width: 230px; }
  .f-toasts { top: calc(64px + var(--sat)); }
  .f-aviso { font-size: 12.5px; padding: 5px 12px 5px 8px; }
  .f-panel { max-height: calc(100dvh - 16px); }
  .f-panel-cuerpo { padding: 12px 16px; }
  .f-dlg-retrato { width: 110px; height: 110px; }
  .f-dlg-cuerpo { min-height: 100px; padding: 14px 18px 14px 40px; }
  .f-tuto { top: auto !important; bottom: calc(10px + var(--sab)) !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; width: min(360px, 44vw) !important; }
  .f-tuto img { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  #ui *, #ui *::before, #ui *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.f-caja-fundido { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(15, 29, 39, .55), #0f1d27); opacity: 0; pointer-events: none; }
.f-caja.f-saliendo { animation: none; }
.f-caja.f-saliendo > :not(.f-caja-fundido) { animation: f-desaparece .25s ease both; }
.f-obj-lista li.fallado .f-obj-check { background: rgba(226, 87, 76, .9); border-color: transparent; color: #fff; }
.f-obj-lista li.fallado .f-obj-txt { opacity: .6; }
.f-res-record { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border-radius: 14px; font-weight: 900; color: #6b4300;
  background: linear-gradient(180deg, #ffe7a0, #ffc93c); box-shadow: 0 3px 0 var(--oro-3); animation: f-pop .5s 1.2s cubic-bezier(.2, 1.6, .4, 1) both; }
.f-cajon-tip { text-align: center; color: #ffe7a0; font-weight: 900; font-size: 14.5px; padding: 0 6px 6px; }
.f-cajon-tip:empty, .f-posnet-tip:empty { display: none; }
.f-posnet-tip { text-align: center; color: #ffe7a0; font-weight: 900; font-size: 14px; line-height: 1.25; }
.f-caja.pagando .f-caja-charla { top: auto; bottom: calc(210px + var(--sab)); left: 50%; }
@media (max-width: 700px) and (orientation: portrait) { .f-caja.pagando .f-caja-charla { bottom: auto; top: calc(60px + var(--sat)); left: calc(10px + var(--sal)); } .f-cajon-tip { font-size: 13px; padding-bottom: 4px; } }
@media (orientation: landscape) and (max-height: 500px) { .f-caja.pagando .f-caja-charla { bottom: auto; top: calc(56px + var(--sat)); left: 50%; } }

/* Portada: el 3D no se ve detrás (la foto aparece fundiéndose desde el azul noche de FAMA, sin la maqueta girada asomando) */
body:has(#ui[data-modo="titulo"]) #lienzo { visibility: hidden; }