/* offline.css — 📴 mode sense connexió: el bàner fix, el menú reduït al que es pot consultar, el que no es pot fer i les pantalles de consulta */

/* el bàner: primer de la columna, enganxat a dalt (al mòbil, sota la capçalera fixa); la barra de pestanyes baixa al seu darrere */
.off-baner[hidden] { display: none !important; }
.off-baner { position: sticky; top: 0; z-index: 7; flex: 0 0 auto; height: 36px; display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 0 16px; background: var(--marca-marro); color: var(--marca-sobre); font-size: 13.5px; font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.off-baner-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.off-baner-text::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%;
  background: #e0876c; vertical-align: 1px; }
.off-baner-info { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7);
  background: transparent; color: var(--marca-sobre); font: inherit; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; }
.off-baner-info:hover, .off-baner-info:focus-visible { background: rgba(255,255,255,.16); outline: none; }
html.sense-xarxa .barra-sup { top: calc(36px / var(--mida-text, 1)); }
@media (max-width: 860px) {
  .off-baner { top: calc(56px + env(safe-area-inset-top, 0px)); padding: 0 10px; font-size: 12.5px; gap: 8px; }
  html.sense-xarxa .barra-sup { top: calc((56px + env(safe-area-inset-top, 0px) + 36px) / var(--mida-text, 1)); }
}

/* sense xarxa, el menú només ensenya el que es pot consultar (els mestres, Projectes, Sessions i Calendari) i una nota que diu per què.
   !important: els grups plegats i els rols amaguen els enllaços amb un estil en línia (aplicaVisibilitatMenu) */
.off-menu { display: none; }
html.sense-xarxa .off-menu { display: flex; flex-direction: column; gap: 4px; margin: 4px 12px 10px; padding: 11px 13px; border-radius: 12px;
  background: rgba(224,135,108,.14); border: 1px solid rgba(224,135,108,.35); color: #ece4da; font-size: 12.5px; line-height: 1.45; }
.off-menu strong { color: #fff; font-size: 13px; }
.off-menu-ico { width: 16px; height: 16px; margin-right: 7px; vertical-align: -3px; } /* de traç, com les icones del menú */
.off-menu-info { align-self: flex-start; margin-top: 4px; padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35);
  background: transparent; color: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.off-menu-info:hover, .off-menu-info:focus-visible { background: rgba(255,255,255,.1); outline: none; }
html.sense-xarxa .sidebar nav .nav-group, html.sense-xarxa .sidebar nav a { display: none !important; }
/* es veuen els mestres i, del grup Projectes, Projectes, Sessions i Calendari (els diners, l'assistent i la resta necessiten el servidor);
   els títols «Projectes» i «Mestres», fixos: sense xarxa no es pleguen (el grup el diu data-grup, no la posició) */
html.sense-xarxa .sidebar nav .nav-group:is([data-grup="Projectes"], [data-grup="Mestres"]) { display: flex !important; pointer-events: none; }
html.sense-xarxa .sidebar nav .nav-group .chev { display: none; }
html.sense-xarxa .sidebar nav a:is([data-route="projectes"], [data-route="sessions"], [data-route="calendari"],
  [data-route="colaboradors"], [data-route="clients"], [data-route="proveidors"], [data-route="dinamiques"], [data-route="materials"],
  [data-route="emocions"], [data-route="productes"], [data-route="tasques-tipus"], [data-route="feina-tipus"]) { display: flex !important; } /* flex: la icona i el nom en fila, com amb xarxa */
html.sense-xarxa .xat-btn, html.sense-xarxa .xp, html.sense-xarxa .super-link, html.sense-xarxa .campana, html.sense-xarxa .campana-cfg,
html.sense-xarxa #refresca-app, html.sense-xarxa #jo-connexions, html.sense-xarxa #jo-calendari, html.sense-xarxa #jo-push,
html.sense-xarxa #jo-pwd, html.sense-xarxa #jo-telefon { display: none !important; }

/* la pantalla que era oberta en perdre la xarxa: el que escriu es veu apagat (offline.js el bloqueja i diu per què; mateixos selectors).
   La vista triada del calendari (.cal-vista) porta .primary però no escriu res: es queda com està */
html.sense-xarxa #app #add, html.sense-xarxa #app [data-edit], html.sense-xarxa #app [data-del], html.sense-xarxa #app [data-delmembre],
html.sense-xarxa #app #add-membre, html.sense-xarxa #app button[type="submit"], html.sense-xarxa #app .btn.primary:not(.cal-vista),
html.sense-xarxa #app .btn.danger, html.sense-xarxa #app .btn.ia, html.sense-xarxa #app input[type="file"],
html.sense-xarxa #modal-save { opacity: .45; cursor: not-allowed; filter: grayscale(.5); }

/* «Com funciona?» */
.off-explica { max-width: 560px; }
.off-explica ul { margin: 0 0 6px; padding-left: 20px; font-size: 13.5px; line-height: 1.6; }

/* pantalles de consulta */
.off-buit { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 520px; margin: 30px auto; line-height: 1.5; }
.off-buit strong { color: var(--ink); font-size: 15.5px; }
.off-buit-ico { font-size: 34px; }
.off-text { padding: 16px 20px; white-space: pre-wrap; line-height: 1.55; font-size: 14px; }