/* ============================================================
   pwa.css — B7 · La plataforma como aplicación.
   Tres piezas y ninguna tapa el contenido:
     .pwa-franja   tarjetita al pie: «Instalar {Marca}» / «Hay una versión
                   nueva · Actualizar». Se puede cerrar y no vuelve a salir.
     #pwa-estado   píldora de «Sin conexión · esto es lo último que teníamos»,
                   con la misma cara que las de B1 y B2 y colocada encima de
                   ellas (nunca se solapan).
     .pwa-pasos    los 3 pasos de iPhone, dentro de la ventana de ayuda.
   Solo tokens de tokens.css. RTL: propiedades lógicas, sin left/right.
   ============================================================ */

/* ---------- Tarjetita de aviso (instalar / versión nueva) ----------
   Va ARRIBA, no abajo. Abajo vive la barra de escribir del chat y las
   píldoras de B1/B2: una tarjeta ahí tapaba justo el sitio donde la
   persona está escribiendo. Arriba se lee, se atiende y se cierra. */
.pwa-franja {
  position: fixed; inset-block-start: var(--sp-3); inset-inline-start: 50%;
  transform: translateX(-50%);
  /* Por ENCIMA de las barras (--z-barras: 100) para que la cabecera no le
     coma la primera línea, y por DEBAJO de los diálogos (--z-capas: 500):
     una ventana abierta siempre manda sobre este aviso. */
  z-index: var(--z-flotantes, 300);
  display: flex; align-items: center; gap: var(--sp-3);
  inline-size: min(520px, calc(100% - var(--sp-6)));
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  background: var(--surface); color: var(--text);
  border: var(--borde-grosor) solid var(--border);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-flotante, 0 8px 24px rgba(0, 0, 0, .18));
  animation: pwa-baja var(--dur, .18s) var(--ease, ease) both;
}
[dir="rtl"] .pwa-franja { transform: translateX(50%); animation-name: pwa-baja-rtl; }
@keyframes pwa-baja { from { opacity: 0; transform: translate(-50%, -12px); } }
@keyframes pwa-baja-rtl { from { opacity: 0; transform: translate(50%, -12px); } }
@media (prefers-reduced-motion: reduce) { .pwa-franja { animation: none; } }

/* Pantallas estrechas: el botón baja a su propia línea en vez de apretar
   el texto hasta partirlo en cuatro renglones. */
@media (max-width: 430px) {
  .pwa-franja { flex-wrap: wrap; }
  .pwa-franja .btn { inline-size: 100%; order: 9; }
  .pwa-franja .pwa-cerrar { order: 8; margin-inline-start: auto; }
}

.pwa-franja-icono {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  inline-size: 40px; block-size: 40px; border-radius: var(--r-campo);
  background: var(--brand-tint); color: var(--brand-tint-text);
}
.pwa-franja-texto { flex: 1 1 180px; min-inline-size: 0; }
.pwa-franja-texto strong { display: block; font-size: var(--fs-body); line-height: 1.3; }
.pwa-franja-texto span { display: block; font-size: var(--fs-small); color: var(--text-2); }
.pwa-franja .btn { flex-shrink: 0; }
/* Táctil: 44px de alto real en los dos botones (regla del proyecto). */
.pwa-franja .btn, .pwa-franja .pwa-cerrar { min-block-size: 44px; }
.pwa-cerrar {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  inline-size: 44px; block-size: 44px; padding: 0;
  background: none; border: 0; border-radius: var(--r-campo);
  color: var(--text-2); cursor: pointer;
}
.pwa-cerrar:hover { background: var(--surface-2); color: var(--text); }
.pwa-franja .info-btn { flex-shrink: 0; }

/* ---------- Píldora «sin conexión» (misma cara que las de B1 y B2) ---------- */
/* (24/10/2026 · responsive) `--pie-pildora` la define `.api-estado` en base.css: barra de gestos + teclado del
   iPhone, o por encima de la barra de escribir si la hay. Antes estas tres iban a 12 px del borde físico. */
#pwa-estado.api-estado { inset-block-end: var(--pie-pildora); }
body:has(#api-estado) #pwa-estado.api-estado { inset-block-end: calc(var(--pie-pildora) + 44px); }
body:has(#api-estado):has(#tr-estado) #pwa-estado.api-estado { inset-block-end: calc(var(--pie-pildora) + 88px); }
#pwa-estado .api-estado-punto { background: var(--danger, var(--warning)); }
#pwa-estado.pwa-estado--vuelta .api-estado-punto { background: var(--success-fill, var(--success)); }

/* ---------- Los 3 pasos de iPhone (dentro de la ventana de ayuda) ---------- */
.pwa-pasos { margin: var(--sp-3) 0 0; padding-inline-start: var(--sp-6);
             display: flex; flex-direction: column; gap: var(--sp-2); }
.pwa-pasos li { line-height: 1.45; }
.pwa-lista { margin: var(--sp-2) 0 0; padding-inline-start: var(--sp-5);
             display: flex; flex-direction: column; gap: var(--sp-1);
             font-size: var(--fs-small); color: var(--text-2); }
.pwa-nota { margin-block-start: var(--sp-3); padding: var(--sp-3);
            background: var(--surface-2); border-radius: var(--r-campo);
            font-size: var(--fs-small); color: var(--text-2); }
.pwa-nota strong { color: var(--text); }

/* ---------- Ajustes de avisos (tarjeta compartida por los 4 roles) ---------- */
.pwa-ajuste-fila {
  display: flex; align-items: center; gap: var(--sp-3);
  min-block-size: 44px; padding-block: var(--sp-2);
}
.pwa-ajuste-fila .crece { flex: 1; min-inline-size: 0; }
.pwa-horas { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pwa-horas input[type="time"] { min-block-size: 44px; }

/* ---------- La banda «sin conexión» dentro del panel vive en base.css desde el
   27/09/2026 (la cargan los cuatro paneles, moderador incluido). ---------- */