/**
 * Interfaz de la PWA: instalacion, aviso de actualizacion y estado de red.
 * Compartida por escritorio y movil, con los tokens de assets/shared/tokens.css.
 *
 * Todo lo que se apoya en el borde inferior deja espacio para la barra de
 * navegacion del sistema (env(safe-area-inset-bottom)) y, en movil, para la
 * barra de pestañas propia de la aplicacion, que mide 64px.
 */

:root {
  --pwa-gap-bottom: 1rem;
}

/* En movil la barra de pestañas ocupa la parte inferior: nada se pone debajo. */
body.m-body {
  --pwa-gap-bottom: 5rem;
}

/* ---------- contenedores flotantes ---------- */

.pwa-layer {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: calc(var(--pwa-gap-bottom) + env(safe-area-inset-bottom, 0px));
  width: min(28rem, calc(100vw - 2rem));
  transform: translate(-50%, 0);
  transition: opacity .22s ease, transform .22s ease;
}

.pwa-layer[hidden] {
  display: none;
}

.pwa-layer.is-entering {
  opacity: 0;
  transform: translate(-50%, 12px);
}

@media (prefers-reduced-motion: reduce) {
  .pwa-layer { transition: none; }
  .pwa-layer.is-entering { opacity: 1; transform: translate(-50%, 0); }
}

.pwa-card {
  padding: 1rem;
  background: var(--panel, #fff);
  border: 1px solid var(--border, #eef2f7);
  border-radius: var(--radius, 18px);
  box-shadow: var(--shadow, 0 18px 32px rgba(11, 29, 58, .12));
}

/* ---------- tarjeta de instalacion ---------- */

.pwa-install-head {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.pwa-install-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.pwa-install-copy strong {
  display: block;
  font-size: .98rem;
  font-weight: 700;
  color: var(--text, #333d4d);
}

.pwa-install-copy span {
  display: block;
  margin-top: .15rem;
  font-size: .84rem;
  line-height: 1.4;
  color: var(--muted, #7a8899);
}

.pwa-actions {
  display: flex;
  gap: .55rem;
  margin-top: .9rem;
}

.pwa-btn {
  flex: 1 1 auto;
  /* 44px es el minimo tactil comodo; asi ningun boton depende de apuntar fino. */
  min-height: 44px;
  padding: .7rem 1rem;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pwa-btn-primary {
  background: var(--primary, #0d6efd);
  color: #fff;
}

.pwa-btn-primary:hover { background: var(--primary-dark, #0b57d0); }

.pwa-btn-ghost {
  flex: 0 0 auto;
  background: transparent;
  border-color: var(--border, #eef2f7);
  color: var(--muted, #7a8899);
}

.pwa-btn-ghost:hover { color: var(--text, #333d4d); }

.pwa-btn:active { transform: translateY(1px); }

.pwa-btn:focus-visible {
  outline: 3px solid var(--primary, #0d6efd);
  outline-offset: 2px;
}

/* ---------- banner de conexion ---------- */

.pwa-net {
  position: fixed;
  z-index: 130;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(env(safe-area-inset-top, 0px) + .5rem) 1rem .5rem;
  background: #b45309;
  color: #fff;
  font-size: .84rem;
  font-weight: 700;
  text-align: center;
  /* No solo color: el texto dice explicitamente el estado, para lectores de
     pantalla y para quien no distingue el matiz. */
}

.pwa-net[hidden] { display: none; }

.pwa-net.is-back { background: #15803d; }

/* ---------- instrucciones de iPhone / iPad ---------- */

.pwa-ios {
  position: fixed;
  z-index: 140;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  background: rgba(11, 29, 58, .45);
}

.pwa-ios[hidden] { display: none; }

.pwa-ios-panel {
  width: min(30rem, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  background: var(--panel, #fff);
  border-radius: 20px 20px var(--radius, 18px) var(--radius, 18px);
  box-shadow: var(--shadow, 0 18px 32px rgba(11, 29, 58, .12));
}

.pwa-ios-title {
  margin: 0 0 .25rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text, #333d4d);
}

.pwa-ios-lead {
  margin: 0 0 1rem;
  font-size: .86rem;
  color: var(--muted, #7a8899);
}

.pwa-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pwa-step;
}

.pwa-steps li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .55rem 0;
  font-size: .9rem;
  color: var(--text, #333d4d);
}

.pwa-steps li::before {
  counter-increment: pwa-step;
  content: counter(pwa-step);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--tag-bg, #e7f1ff);
  color: var(--primary, #0d6efd);
  font-size: .8rem;
  font-weight: 800;
}

.pwa-steps svg {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .1rem;
  color: var(--primary, #0d6efd);
}

.pwa-ios-warn {
  margin: .9rem 0 0;
  padding: .7rem .8rem;
  border-radius: 12px;
  background: var(--panel-soft, #f8fafc);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--muted, #7a8899);
}

/* En modo aplicacion instalada no se vuelve a ofrecer la instalacion. */
html.pwa-standalone .pwa-install,
html.pwa-standalone .pwa-ios {
  display: none !important;
}

/* ---------- teléfono: borde superior y deslizar para actualizar ---------- */

/* Sin el rebote nativo al tirar desde arriba (dejaba ver el fondo claro sobre
   la cabecera azul) y sin el "recargar" propio de Chrome: lo reemplaza el de
   pwa.js, que además limpia la caché. */
html.m-root,
html.m-root body {
  overscroll-behavior-y: none;
}

/* Teléfonos que igual rebotan (iOS anterior a 16): detrás de la página hay
   azul marino arriba y el fondo claro abajo, así el hueco continúa la
   cabecera. El body pinta su propio fondo encima y solo se ve al rebotar. */
html.m-root {
  background: #fff;
}

html.m-root::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  z-index: -1;
  background: #0c2150;
  pointer-events: none;
}

/* Franja de la hora en el iPhone. iOS 26 y 27 ya no hacen caso a theme-color
   ni a apple-mobile-web-app-status-bar-style: buscan, 8px por debajo del
   borde, un elemento fijo con background-color liso y pintan la zona de la
   hora con ese color. Si no lo encuentran, iOS 27 pinta el fondo del
   sistema (blanco) y queda un difuminado blanco sobre la cabecera azul.
   Por eso esta franja es un elemento real (iOS no mira los ::before),
   visible y sin pointer-events: none (esos se los salta), de lado a lado y
   de al menos 12px. Las cabeceras azules empiezan con este mismo azul
   (--pc-statusbar-h) para que no se note el corte. */
:root { --pc-statusbar-h: max(12px, env(safe-area-inset-top, 0px)); }

.pwa-statusbar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;
  height: var(--pc-statusbar-h);
  background-color: #0b1d3a;
  view-transition-name: pwa-statusbar;
}

html.m-root .pwa-statusbar { display: block; }

@media (max-width: 959.98px) {
  body.auth-page .pwa-statusbar { display: block; }
}

/* Deslizar para actualizar (opción A del lienzo): nada se mueve. Baja
   flotando un recuadro blanco con el logo, que se dibuja al ritmo del dedo
   (barras, flecha, punta), igual que en la pantalla de carga. Al soltar, las
   barras suben y bajan mientras se actualiza y termina con un check. */
.pwa-ptr {
  position: fixed;
  top: var(--ptr-top, 0px);
  left: 50%;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  opacity: 0;
  transform: translate3d(-50%, -70px, 0);
  visibility: hidden;
  pointer-events: none;
}

.pwa-ptr.is-active {
  visibility: visible;
  will-change: transform, opacity;
}

.pwa-ptr-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 29, 58, .06), 0 14px 32px -10px rgba(11, 29, 58, .45);
}

.pwa-ptr-logo {
  width: 40px;
  height: auto;
  overflow: visible;
}

.pwa-ptr-bar,
.pwa-ptr-head {
  transform-box: fill-box;
}

.pwa-ptr-bar {
  transform-origin: 50% 100%;
}

.pwa-ptr-head {
  transform-origin: 40% 60%;
}

.pwa-ptr-label {
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 6px 18px -8px rgba(11, 29, 58, .35);
  color: #0b5ed7;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.pwa-ptr.is-done .pwa-ptr-label {
  color: #15803d;
}

.pwa-ptr-ok {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #16a34a;
  transform: scale(0);
}

.pwa-ptr-ok svg {
  width: 13px;
  height: 13px;
}

.pwa-ptr.is-armed .pwa-ptr-tile {
  animation: pwa-ptr-pop .28s cubic-bezier(.2, 1.4, .4, 1);
}

/* Actualizando: las barras suben y bajan como números que cambian. */
.pwa-ptr.is-refreshing .pwa-ptr-bar {
  animation: pwa-ptr-wave .8s ease-in-out infinite;
}

.pwa-ptr.is-refreshing .pwa-ptr-bar-2 { animation-delay: .12s; }
.pwa-ptr.is-refreshing .pwa-ptr-bar-3 { animation-delay: .24s; }

.pwa-ptr.is-done .pwa-ptr-ok {
  transform: scale(1);
  transition: transform .26s cubic-bezier(.2, 1.5, .4, 1);
}

.pwa-ptr.pwa-ptr-settle {
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}

@keyframes pwa-ptr-pop {
  50% { transform: scale(1.1); }
}

@keyframes pwa-ptr-wave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(.45); }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-ptr.is-armed .pwa-ptr-tile,
  .pwa-ptr.is-refreshing .pwa-ptr-bar { animation: none; }
  .pwa-ptr.is-done .pwa-ptr-ok { transition: none; }
  .pwa-ptr.pwa-ptr-settle { transition: opacity .15s ease; }
}