/* ==========================================================
   perf.css — rendimiento y móvil
   - las animaciones de entrada solo al cambiar de pantalla (no en cada repintado)
   - menos desenfoque de cristal (era lo que dejaba "fantasmas" y lento el móvil)
   - barra inferior del móvil más limpia
   ========================================================== */

/* entrada de tarjetas: solo cuando #app acaba de cambiar de pantalla */
.pass { animation: none; }
.route-in .pass:not(.pass-hero) { animation: pass-in .45s cubic-bezier(.3, 1.3, .5, 1) backwards; animation-delay: calc(var(--i, 0) * 50ms); }

/* fondo: sin "attachment: fixed" ni capa de grano con mezcla (muy costosos) */
body { background-attachment: scroll; }
body::after { display: none; }
body::before { position: fixed; }

/* cristal: desenfoque más ligero y solo donde aporta */
.glass, .panel, .tabs, .seg, .marquee, .crumb-back { backdrop-filter: none; -webkit-backdrop-filter: none; }
.glass, .panel { background: rgba(255, 255, 255, .86); }
.tabs, .seg, .crumb-back, .marquee { background: rgba(255, 255, 255, .9); }
[data-skin="night"] .glass, [data-skin="night"] .panel { background: rgba(38, 28, 70, .94); }
[data-skin="night"] .tabs, [data-skin="night"] .seg, [data-skin="night"] .crumb-back, [data-skin="night"] .marquee { background: rgba(42, 30, 76, .95); }
.win, .popmenu, .toast, .startmenu, .pm-card { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.overlay { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.taskbar { backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }

/* ---------- móvil ---------- */
@media (max-width: 640px) {
  /* nada de desenfoques en el móvil: fondos opacos, más nítido y fluido */
  .win, .popmenu, .toast, .startmenu, .pm-card, .taskbar, .overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .win, .popmenu, .toast, .startmenu, .pm-card { background: #fffafd; }
  [data-skin="night"] .win, [data-skin="night"] .popmenu, [data-skin="night"] .toast, [data-skin="night"] .startmenu, [data-skin="night"] .pm-card { background: #2a1f4d; }
  .taskbar { background: rgba(255, 250, 253, .97); }
  [data-skin="night"] .taskbar { background: rgba(36, 26, 66, .98); }
  .hh-deco .disc { display: none; }
  .sky-deco { display: none; }

  /* barra inferior: start + iconos, sin textos cortados */
  .taskbar { gap: 6px; padding-left: 8px; padding-right: 8px; height: calc(58px + env(safe-area-inset-bottom)); }
  .start-btn { height: 42px; padding: 0 16px 0 10px; font-size: 14px; }
  .task-list { gap: 6px; }
  .task-list .task:not(.on) { display: flex; }
  .task { flex: 0 0 auto; width: 44px; height: 42px; padding: 0; justify-content: center; }
  .task span { display: none; }
  .task i { font-size: 20px; }
  .tray { margin-left: auto; height: 42px; padding: 0 6px; }
  #tray-sparkles { display: none; }
  .tray-btn { width: 34px; height: 34px; }

  /* herramientas del viaje: icono + texto corto debajo */
  .tool-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; width: 100%; }
  .tool { flex-direction: column; gap: 3px; padding: 8px 2px; border-radius: 14px; background: var(--card); border-color: var(--line); }
  .tool span { display: block; font-size: 10px; line-height: 1.15; text-align: center; font-weight: 800; }
  .tool i { font-size: 21px; }

  /* tarjetas un poco más compactas */
  .hero-home { padding: 22px 18px; margin-bottom: 22px; }
  .chrome-title { font-size: 36px; }
  .hero-home .sub { font-size: 14.5px; margin-bottom: 16px; }
  .status-card { padding: 18px 16px; margin-bottom: 18px; }
  .status-msg { font-size: 16px; }
  .count { padding: 8px 4px; }
  .count b { font-size: 20px; }
  .tab-panel { padding: 14px; border-radius: 22px; }
  .cat-head { padding: 12px 10px 10px 12px; gap: 10px; }
  .cat-ttl h3 { font-size: 14px; }
  .jelly { width: 38px; height: 38px; font-size: 20px; border-radius: 12px; }
  .items { padding: 4px 4px 2px; }
  .item { padding: 8px 4px; gap: 6px; }
  .side-stack { gap: 14px; }
  .note-panel { transform: none; }
}
.btn-pack { white-space: normal; max-width: 100%; text-align: center; }
.status-actions > * { min-width: 0; }
@media (max-width: 640px) {
  .tool-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tool { min-width: 0; }
  .tool span { overflow-wrap: anywhere; }
  .btn-pack { font-size: 15px; padding: 12px 16px; }
}