/* Netto, la mascota guía (public/mascota/). Solo se carga con MASCOTA=on.
   Capas propias encima de la página: el platillo (único elemento tocable) y, sin recibir toques, el rayo, el halo y la burbuja.
   Capas: por debajo de .ov (50) y del aviso .toast (60); los <dialog> modales siempre quedan encima (capa superior).
   La capa cubre la página entera (no la pantalla): el halo y el rayo se desplazan con el contenido en el mismo cuadro, sin
   desfase. El platillo y la burbuja, igual mientras señalan un campo a la vista (.anclado); si no, fijos en la pantalla. */
.netto{position:fixed;left:0;top:0;z-index:46;width:64px;height:52px;margin:0;padding:0;border:0;background:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transform:translate(-200px,-200px);transition:opacity .25s;overflow-anchor:none}
.netto.anclado{position:absolute}
@media (min-width:481px){.netto{width:80px;height:64px}}
.netto.escondido{width:44px;height:44px}
.netto .n-cuerpo{width:100%;height:100%}
.netto svg{display:block;width:100%;height:100%;overflow:visible}
.netto:focus{outline:none}
.netto:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:50%}
.netto .n-flota{transform-box:view-box;transform-origin:50% 60%;animation:n-flota 2.6s ease-in-out infinite}
.netto .n-ojos{transform-box:fill-box;transform-origin:center;animation:n-parpadeo 4.2s infinite}
.netto .n-punta{animation:n-luz 1.6s ease-in-out infinite}
.netto .n-luz{animation:n-luz 1.2s ease-in-out infinite}
.netto .n-luz:nth-child(2){animation-delay:.2s}
.netto .n-luz:nth-child(3){animation-delay:.4s}
.netto .n-luz:nth-child(4){animation-delay:.6s}
.netto .n-luz:nth-child(5){animation-delay:.8s}
.netto .n-onda{animation:n-onda 1.6s ease-in-out infinite}
.netto .n-onda:nth-child(2){animation-delay:.35s}
@keyframes n-onda{0%,100%{opacity:.15}50%{opacity:.95}}
@keyframes n-flota{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
@keyframes n-parpadeo{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes n-luz{0%,100%{opacity:.35}50%{opacity:1}}

/* Mide lo mismo que la página (netto.js le da el alto) y recorta: lo dibujado nunca la alarga ni agrega scroll */
.netto-capa{position:absolute;left:0;top:0;width:100%;height:100%;z-index:45;pointer-events:none;overflow:hidden;overflow:clip;
  overflow-anchor:none;transition:opacity .25s}
.netto.apartado,.netto-capa.apartado{opacity:0;pointer-events:none}
/* Mide las muescas del teléfono (safe-area) para que Netto no quede debajo */
.netto-sonda{position:absolute;inset:0;visibility:hidden;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.netto-rayo{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;opacity:0;transition:opacity .2s}
.netto-rayo.ver{opacity:1}
.netto-rayo .n-cono{animation:n-rayo 1.6s ease-in-out infinite}
@keyframes n-rayo{0%,100%{opacity:.8}50%{opacity:1}}
/* Pulsos de luz que viajan de la nave al campo: dejan clara la dirección del rayo */
.netto-rayo .n-pulso{stroke-dasharray:2 10;stroke-opacity:.75;animation:n-pulso .7s linear infinite}
@keyframes n-pulso{to{stroke-dashoffset:-12}}
/* Al emitir, la nave queda fija sobre el rayo (si flotara, el rayo se despegaría del emisor) y el emisor se enciende */
.netto.emitiendo .n-flota{animation:none}
.netto.emitiendo .n-emisor{fill:#fff;filter:drop-shadow(0 0 2px #20c4f0) drop-shadow(0 0 4px #7fe3fb)}
.netto-halo{position:absolute;left:0;top:0;border:3px solid #20c4f0;opacity:0;transition:opacity .2s}
.netto-halo.ver{opacity:1;animation:n-halo 1.4s ease-in-out infinite}
@keyframes n-halo{0%,100%{box-shadow:0 0 0 2px rgba(32,196,240,.18),0 0 10px rgba(32,196,240,.35)}50%{box-shadow:0 0 0 6px rgba(32,196,240,.3),0 0 22px rgba(32,196,240,.7)}}

/* Burbuja casi opaca: el contraste del texto no depende de lo que haya debajo. Su punta apunta a Netto (quien habla).
   Compacta (13 px, medida: 36 % menos alta y 30 % menos área que con 15 px) y se cierra con un toque, sin activar lo de debajo. */
.netto-burbuja{position:fixed;left:0;top:0;width:max-content;max-width:260px;padding:7px 10px;border-radius:12px;
  background:rgba(255,255,255,.96);border:1px solid #8fd0ee;box-shadow:0 8px 20px -10px rgba(8,16,48,.45);
  color:var(--ink,#081030);font:500 13px/1.35 "Plus Jakarta Sans",system-ui,sans-serif;text-wrap:pretty;cursor:pointer;
  opacity:0;transform:scale(.92);pointer-events:none;transition:opacity .18s,transform .3s var(--ease-spring,ease)}
.netto-burbuja.anclado{position:absolute}
.netto-burbuja.ver,.netto-burbuja.cerrando{pointer-events:auto}
.netto-burbuja.ver{opacity:1;transform:scale(1)}
.netto-burbuja p{margin:0}
.netto-burbuja::after{content:"";position:absolute;width:9px;height:9px;background:inherit;border:solid #8fd0ee;border-width:0 1px 1px 0}
.netto-burbuja.cola-der{transform-origin:100% var(--cola,50%)}
.netto-burbuja.cola-der::after{right:-5.5px;top:var(--cola,50%);transform:translateY(-50%) rotate(-45deg)}
.netto-burbuja.cola-arriba{transform-origin:var(--cola,50%) 0}
.netto-burbuja.cola-arriba::after{top:-5.5px;left:var(--cola,50%);transform:translateX(-50%) rotate(-135deg)}
.netto-burbuja.cola-abajo{transform-origin:var(--cola,50%) 100%}
.netto-burbuja.cola-abajo::after{bottom:-5.5px;left:var(--cola,50%);transform:translateX(-50%) rotate(45deg)}

@media (prefers-reduced-motion:reduce){
  .netto .n-flota,.netto .n-ojos,.netto .n-punta,.netto .n-luz,.netto .n-onda,.netto-rayo .n-cono,.netto-rayo .n-pulso,.netto-halo.ver{animation:none}
  .netto-burbuja{transform:none;transition:opacity .18s}
}