/* E1 · PWA (ver E1-CONTRATO.md §5, contrato compartido del proyecto, fuera
   de este repo). Dos partes:

   1) Estilos del panel (index.html): el bloque de sesión de Ajustes
      (.pf-session-block, dentro de #main — decisión previa del usuario:
      nada de persona se muestra de forma continua en el lateral, así que
      ya NO hay nada de esto en <aside>) y el aviso discreto de nueva
      versión disponible. Se cargan junto al resto de hojas del panel
      (style.css, visual.css...), así que SÍ pueden apoyarse en los tokens
      de visual.css (var(--v-…, valor)).

   2) Páginas standalone públicas (login.html, offline.html): deliberadamente
      NO cargan visual.css ni style.css (ver el recibo, punto 6: minimizar la
      lista de estáticos que el servidor debe marcar como públicos sin
      sesión). Por eso esta hoja define aquí sus propios tokens mínimos con
      los mismos valores que visual.css, y tipografía de sistema (sin
      fuentes propias que añadir a la lista pública). Diseño C / alineación
      aprobada: mismos colores, mismo radio de control, nada nuevo. */

:root{
  --pwa-bg:#F7F8FA;--pwa-surface:#FFFFFF;--pwa-line:#E2E6EE;
  --pwa-ink:#15181E;--pwa-ink-2:#4E5766;--pwa-ink-3:#616A79;
  --pwa-blue:#335CFF;--pwa-blue-soft:#F0F3FF;--pwa-alta:#A8261E;
  --pwa-r:12px;--pwa-r-s:10px;--pwa-t:170ms ease;
}

/* ---------- 1) Panel: bloque de sesión en Ajustes ----------
   Sustituye al selector de actor SOLO en modo oidc (settingsPage(), ver
   app.js), dentro de la misma tarjeta "Perfil y privacidad" donde vive el
   selector en modo local. Vive dentro de #main: "Salir" queda protegido de
   ebroApplyReadOnly por una excepción específica por id (#pf-session-logout
   en app.js), no por estar fuera de #main. */
.pf-session-block{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 14px;border-radius:var(--v-r-s,var(--pwa-r-s));
  background:var(--v-blue-soft,var(--pwa-blue-soft));color:var(--v-ink,var(--pwa-ink));
  border:1px solid var(--v-line,var(--pwa-line));
}
.pf-session-status{margin:0;min-width:0;font-size:13.5px;font-weight:650;line-height:1.4;overflow-wrap:anywhere}
.pf-session-logout{
  flex:none;min-height:36px;padding:7px 14px;
  border:1px solid var(--v-line,var(--pwa-line));border-radius:8px;
  background:var(--v-surface,var(--pwa-surface));color:var(--v-ink,var(--pwa-ink));
  font-size:13px;font-weight:650;line-height:1.2;
}
.pf-session-logout:hover{background:var(--v-bg,var(--pwa-bg))}

/* ---------- 1) Panel: aviso de nueva versión disponible ---------- */
.pwa-update-banner{
  position:fixed;left:16px;bottom:16px;z-index:40;
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-radius:var(--v-r-s,var(--pwa-r-s));
  background:var(--v-ink,var(--pwa-ink));color:#fff;
  box-shadow:var(--v-sh-2,0 3px 10px rgba(21,24,30,.25));
  font-size:13px;max-width:min(92vw,360px)
}
.pwa-update-banner button{
  flex:none;min-height:32px;padding:6px 12px;border-radius:8px;
  border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;
  font-size:12.5px;font-weight:650
}
.pwa-update-banner button:hover{background:rgba(255,255,255,.12)}

/* ---------- 2) login.html / offline.html: página standalone ---------- */
.pwa-shell{
  margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--pwa-bg);color:var(--pwa-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:24px
}
.pwa-card{
  width:100%;max-width:360px;text-align:center;
  background:var(--pwa-surface);border:1px solid var(--pwa-line);border-radius:var(--pwa-r);
  padding:32px 28px;box-shadow:0 1px 2px rgba(21,24,30,.05)
}
.pwa-logo{width:48px;height:48px;margin:0 auto 14px;display:block;object-fit:contain}
.pwa-logo[hidden]{display:none}
.pwa-card h1{margin:0 0 6px;font-size:20px;letter-spacing:-.3px}
.pwa-tagline{margin:0 0 18px;font-size:13px;color:var(--pwa-ink-3);line-height:1.5}
.pwa-tagline[hidden]{display:none}
.pwa-notice{margin:0 0 16px;padding:10px 12px;border-radius:var(--pwa-r-s);font-size:12.5px;line-height:1.5;background:#fff6e0;color:#7a5b00;border:1px solid #f0dca0}
.pwa-notice[hidden]{display:none}
.pwa-error{margin:0 0 16px;padding:10px 12px;border-radius:var(--pwa-r-s);font-size:12.5px;line-height:1.5;background:#fdecea;color:var(--pwa-alta);border:1px solid #f4c6c1}
.pwa-error[hidden]{display:none}
.pwa-actions{margin:0 0 14px}
.pwa-primary{
  width:100%;min-height:44px;padding:10px 16px;border:0;border-radius:var(--pwa-r-s);
  background:var(--pwa-blue);color:#fff;font-size:14.5px;font-weight:650;
  transition:filter var(--pwa-t)
}
.pwa-primary:hover{filter:brightness(1.06)}
.pwa-primary:disabled{opacity:.55;cursor:not-allowed}
.pwa-subtle{margin:0;font-size:12px;line-height:1.5;color:var(--pwa-ink-3)}

@media(max-width:420px){
  .pwa-card{padding:26px 20px}
}