/**
 * shell.css · 49cb.142c · PWA Movers rediseño F2
 * Topbar + chip estado (offline/pendientes) + tabbar inferior.
 * Sustituye los .topbar duplicados de cada screen.
 *
 * Layout:
 *   - Mobile: PWA ocupa todo el ancho.
 *   - Desktop (≥768px): contenido centrado en columna de 480px
 *     con frame visible a los lados (efecto "móvil en escritorio").
 */

/* ── Safe areas + viewport mobile-first ──────────────────────── */
html, body {
  background: #0a0a14;   /* Pinta sides del frame en desktop */
}
body {
  padding-top: max(env(safe-area-inset-top), 0px);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

/* ── Topbar ─────────────────────────────────────────────────── */
.shell-topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 10px;
  background: rgba(10,10,20,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.shell-topbar[hidden] { display: none; }

.shell-id { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.shell-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #4A3FB8, #7B6FE8);
  color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.shell-info { min-width: 0; }
.shell-name {
  font-size: 14px; font-weight: 600; color: var(--txt, #f5f3ed);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shell-sub {
  font-size: 11px; color: var(--text-dim, #b1adb0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.shell-iconbtn {
  width: 36px; height: 36px; border-radius: 10px;
  border: none; background: rgba(255,255,255,0.05);
  color: var(--txt, #f5f3ed);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background .12s;
}
.shell-iconbtn:hover { background: rgba(255,255,255,0.10); }
.shell-iconbtn:active { transform: scale(0.96); }

/* ── Chip de estado (offline / pendientes) ──────────────────── */
.shell-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2px;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.shell-status[hidden] { display: none; }
.shell-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}

/* Variantes — control por clase */
.shell-status.is-offline {
  background: rgba(245,158,11,0.18);
  color: #FBBF24;
}
.shell-status.is-offline .shell-status-dot {
  animation: chip-pulse 1.8s ease-in-out infinite;
}
.shell-status.is-pending {
  background: rgba(123,111,232,0.16);
  color: #A39AFA;
}
.shell-status.is-syncing {
  background: rgba(123,111,232,0.20);
  color: #A39AFA;
}
.shell-status.is-syncing .shell-status-dot {
  animation: chip-pulse 0.9s ease-in-out infinite;
}
@keyframes chip-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ── Tabbar inferior ────────────────────────────────────────── */
.shell-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex;
  background: rgba(10,10,20,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-bottom: env(safe-area-inset-bottom);
}
.shell-tabbar[hidden] { display: none; }

.shell-tab {
  flex: 1; background: transparent; border: none; color: var(--text-dim, #b1adb0);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px 6px;
  font-family: inherit; font-size: 10px;
  cursor: pointer;
  transition: color .12s;
}
.shell-tab-icon { font-size: 20px; line-height: 1; }
.shell-tab-label { letter-spacing: 0.3px; }
.shell-tab.is-active { color: var(--pri-soft, #7B6FE8); }
.shell-tab.is-active .shell-tab-icon { transform: scale(1.05); }

/* ── Version badge · diagnóstico ────────────────────────────── */
/*
   Posicionamiento por estado:
     · login (sin shell)    → esquina SUPERIOR DERECHA, visible y legible.
                              En Safari iOS la barra inferior tapa lo que
                              ponga abajo a la derecha, por eso top.
     · autenticado (shell)  → esquina INFERIOR DERECHA, encima del tabbar,
                              discreto porque no estorba en uso normal.
*/
.shell-version {
  position: fixed;
  z-index: 60;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.5px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s, background .15s;
}

/* Default · login. Top-right, legible, con borde sutil. */
.shell-version {
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  bottom: auto;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 5px 9px;
}
.shell-version:hover,
.shell-version:active { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.10); }

/* Autenticado · bottom-right encima del tabbar, super discreto. */
body.shell-visible .shell-version {
  top: auto;
  bottom: calc(72px + env(safe-area-inset-bottom));
  font-size: 9px;
  color: rgba(255,255,255,0.18);
  background: transparent;
  border: none;
  padding: 3px 6px;
}
body.shell-visible .shell-version:hover,
body.shell-visible .shell-version:active { color: rgba(255,255,255,0.55); }

.shell-version-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* SW descargando actualización: ámbar pulsante */
.shell-version.is-updating {
  color: #FBBF24;
  background: rgba(245,158,11,0.10);
}
.shell-version.is-updating .shell-version-dot {
  animation: chip-pulse 1.4s ease-in-out infinite;
}

/* SW actualización lista: verde, más visible — invita a pulsar */
.shell-version.is-waiting {
  color: #4ADE80;
  background: rgba(74,222,128,0.12);
  font-size: 10px;
  padding: 4px 8px;
}
.shell-version.is-waiting .shell-version-dot {
  background: #4ADE80;
  animation: chip-pulse 1.2s ease-in-out infinite;
}

/* ── Screens base ───────────────────────────────────────────── */
.screen {
  display: none;
  min-height: calc(100dvh - 64px);
  min-height: calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.screen.is-active { display: block; }

/* ════════════════════════════════════════════════════════════ */
/*  TABLET / iPad (cualquier touch device ≥768px)               */
/*  Aprovechamos TODO el ancho disponible. Distinguimos del      */
/*  desktop por `pointer: coarse` (touch) → iPad/tablet siempre   */
/*  full-width, sea portrait (1024) o landscape (1366).         */
/*  Login centrado vertical (pantalla grande lo agradece).      */
/* ════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .screen-login {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
  }
  .screen-login.is-active { display: flex; }
  .login-card { width: 100%; max-width: 480px; }
}

/* ════════════════════════════════════════════════════════════ */
/*  DESKTOP REAL · pointer fine (mouse) + width ≥1200px         */
/*  Solo Chrome/Firefox/Safari en PC con ratón. iPad con        */
/*  trackpad/Apple Pencil son `pointer: coarse` o `pointer: any-coarse`. */
/*  En desktop: frame móvil 480px centrado para que la PWA       */
/*  mobile-first no se vea estirada antinaturalmente.           */
/* ════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) and (pointer: fine) and (hover: hover) {
  body {
    background: radial-gradient(ellipse at center top, #161624 0%, #050510 60%);
  }

  .shell-topbar,
  .shell-tabbar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
  }
  .shell-topbar {
    position: fixed; top: 0;
    border-left: 1px solid rgba(255,255,255,0.05);
    border-right: 1px solid rgba(255,255,255,0.05);
  }
  body { padding-top: 58px; }

  .screen {
    max-width: 480px;
    margin: 0 auto;
    background: rgba(10,10,20,0.6);
    border-left: 1px solid rgba(255,255,255,0.04);
    border-right: 1px solid rgba(255,255,255,0.04);
    min-height: calc(100dvh - 64px);
  }

  .screen-login {
    padding: 20px;
  }
  .login-card { max-width: 420px; }
}