body{padding-bottom:0}
#app{padding-bottom:90px}
[hidden]{display:none!important}
.app-nav{background:var(--bg2);border-top:1px solid var(--line);position:fixed;bottom:0;left:0;right:0;z-index:65;padding:4px 8px calc(4px + env(safe-area-inset-bottom))}
.nav-identity,.nav-desktop{display:none}
.nav-mobile{display:flex;justify-content:space-around;gap:4px}
.nav-group{border:0;background:none;color:var(--muted);font:inherit;font-size:11px;cursor:pointer;min-height:56px;flex:1;padding:5px 2px;border-radius:9px}
.nav-group .nav-icon{display:block;font-size:22px;line-height:27px}
.nav-group[aria-current="page"]{color:var(--gold);background:rgba(194,160,106,.1)}
.plan-locked:disabled{opacity:1;cursor:not-allowed;color:var(--muted);border-color:var(--line);background:var(--bg2)}
.nav-lock{display:inline-block;margin-left:7px;padding:2px 5px;border:1px solid var(--line);border-radius:5px;color:var(--cream-dim);font-size:10px;font-weight:500;line-height:1.3;white-space:nowrap}
.nav-group .nav-lock{display:block;width:max-content;margin:3px auto 0;font-size:9px}
.nav-card .nav-lock{display:table;margin:10px 0 0;font-size:11px}
.nav-group:focus-visible,.tabbar button:focus-visible,.nav-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
section.tab h1[tabindex="-1"]:focus,section.tab header[tabindex="-1"]:focus{outline:none}
.nav-context{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 0;color:var(--gold);font-size:13px;font-weight:700}
.nav-context button{width:auto;padding:9px 12px;font-size:12px}
.tabbar{position:static;overflow-x:auto;padding:9px 16px;gap:6px;border-top:0;border-bottom:1px solid var(--line);background:var(--bg);scrollbar-width:thin}
.tabbar button{flex:0 0 auto;width:auto;min-height:42px;padding:9px 13px;border:1px solid transparent;border-radius:8px;font-size:13px;white-space:nowrap}
.tabbar button.on{border-color:var(--gold-soft);background:rgba(194,160,106,.09)}
.tabbar button .ic{display:inline;font-size:15px;margin:0 5px 0 0}
.app-home{max-width:1120px;margin:auto;padding:28px 16px}
.app-eyebrow{font-size:11px;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;margin:0 0 9px}
.app-home h1{font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.2;margin:0 0 10px;color:var(--cream)}
.app-lead{font-size:14px;color:var(--cream-dim);margin:0 0 26px;max-width:650px}
.nav-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 26px}
.nav-card{display:block;padding:19px 16px;min-height:116px;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--cream);font:inherit;text-decoration:none;cursor:pointer}
.nav-card.primary{border-color:var(--gold-soft);background:rgba(194,160,106,.1)}
.nav-card strong{display:block;font-size:16px;font-weight:600;margin-bottom:7px}
.nav-card small{display:block;font-size:12px;line-height:1.5;color:var(--muted)}
.nav-card .nav-card-icon{display:block;color:var(--gold);font-size:22px;margin-bottom:12px}
.home-pending{display:flex;flex-wrap:wrap;gap:10px}
.home-pending button{width:auto;flex:1;min-width:180px;text-align:left;padding:14px}
.home-pending .tab-count{background:var(--line);color:var(--cream-dim)}
.settings-summary{display:grid;gap:15px;margin:0 0 24px;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.settings-summary dt{color:var(--muted);font-size:12px}.settings-summary dd{margin:3px 0 0;color:var(--cream);overflow-wrap:anywhere}
.app-navigation-error{padding:14px;color:var(--danger)}
/* L'app de l'iPhone no ha d'arrossegar la barra amb el rebot de la pàgina.
   Només es desplaça el contingut; la navegació és fora d'aquest contenidor.
   Sense transform ni z-index al contingut, els avisos i diàlegs mantenen la seva capa. */
@media screen and (max-width:899px){
  html,body{height:100%;overflow:hidden;overscroll-behavior-y:none}
  body{position:fixed;inset:0;height:100%;height:100dvh;display:flex;flex-direction:column}
  #app{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;padding-bottom:calc(90px + env(safe-area-inset-bottom));scroll-padding-bottom:calc(90px + env(safe-area-inset-bottom))}
}
@media(max-width:420px){.nav-cards{grid-template-columns:1fr}.app-home h1{font-size:27px}.nav-card{min-height:0;padding:16px}.nav-card .nav-card-icon{display:none}}
@media(min-width:900px){
  #app{padding-left:214px;padding-bottom:24px}
  .app-nav{top:0;right:auto;width:214px;border-top:0;border-right:1px solid var(--line);padding:30px 16px;overflow-y:auto}
  .nav-identity{display:block;padding:4px 12px 26px}.nav-identity .nav-brand{font-family:var(--serif);font-size:25px;color:var(--gold);letter-spacing:.03em}
  .nav-identity .nav-restaurant{font-size:12px;line-height:1.5;color:var(--muted);margin-top:8px;overflow-wrap:anywhere}
  .nav-desktop{display:grid;gap:5px}.nav-mobile{display:none}
  .nav-group{display:flex;align-items:center;gap:12px;width:100%;font-size:14px;text-align:left;padding:12px;min-height:46px}
  .nav-group .nav-icon{width:25px;text-align:center;font-size:21px}
  .nav-group.plan-locked{flex-wrap:wrap;column-gap:8px;row-gap:0}
  .nav-group .nav-lock{margin:3px 0 0 33px}
  .nav-context{padding:20px 28px 5px}.tabbar{padding:9px 28px}
  .app-home{padding:36px 28px}.app-home h1{font-size:36px}
  .nav-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  section.tab>main{max-width:1280px;margin-left:auto;margin-right:auto;padding:24px 28px}
  section.tab>header{padding-left:28px;padding-right:28px}
}
/* L'ordinador (29/10/2026). El Nico: «a l'ordinador es veu tot molt petit, hauries d'aprofitar la pantalla». Amb ratolí i
   una pantalla gran, tot es veu un 20 % més gran (un 40 % a partir de 1.800 px) i les llistes van en columnes. L'iPhone i
   l'iPad (pantalla tàctil) no canvien.
   Amb «zoom», el que depèn de l'alçada o l'amplada de la pantalla (vh, vw) també creix i les finestres en sortirien: aquí
   es divideix pel mateix factor. Si afegiu una alçada en vh a l'administrador, afegiu-la també aquí. */
@media (min-width:1200px) and (pointer:fine){
  :root{--desk-zoom:1.2}
}
@media (min-width:1800px) and (pointer:fine){
  :root{--desk-zoom:1.4}
}
@media (min-width:1200px) and (pointer:fine){
  html{zoom:var(--desk-zoom)}
  dialog{max-height:calc(92vh / var(--desk-zoom));max-height:calc(92dvh / var(--desk-zoom))}
  .dlg-b{max-height:calc(92vh / var(--desk-zoom) - 58px);max-height:calc(92dvh / var(--desk-zoom) - 58px)}
  .entry-summary,#ord-edit-dialog{max-height:calc(92vh / var(--desk-zoom))}
  #ord-edit-dialog .dlg-b{max-height:calc(92vh / var(--desk-zoom) - 58px)}
  #locInvDlg{max-height:calc(92vh / var(--desk-zoom));max-height:calc(92dvh / var(--desk-zoom))}
  #locInvDlg .dlg-b{max-height:calc(92vh / var(--desk-zoom) - 84px);max-height:calc(92dvh / var(--desk-zoom) - 84px)}
  #tagsDlg .dlg-b{max-height:calc(78vh / var(--desk-zoom))}
  #newWineAiDlg .dlg-b{max-height:calc(82vh / var(--desk-zoom))}
  .photo-zoom-body img{max-height:calc(76vh / var(--desk-zoom));max-height:calc(76dvh / var(--desk-zoom))}
  pre{max-height:calc(40vh / var(--desk-zoom))}
  #inv-viewer,#doc-viewer{height:min(calc(92vh / var(--desk-zoom)),920px);max-height:calc(92vh / var(--desk-zoom))}
  .dlg-b[style*="max-height:72vh"]{max-height:calc(72vh / var(--desk-zoom))!important}
  .dlg-b[style*="max-height:78vh"]{max-height:calc(78vh / var(--desk-zoom))!important}
  /* Les llistes llargues, en columnes. El que no és una targeta (títols, avisos, «Carregant…») ocupa tota l'amplada. */
  #list,#incid-list,#ord-suggestions,#inv-list,#doc-list,#suppliers-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px;align-items:start}
  #list>.wine,#incid-list>.wine,#ord-suggestions>.ord-sup,#inv-list>.inv-card,#doc-list>.doc-card,#suppliers-list>.supplier-card{margin:0}
  #list>:not(.wine),#incid-list>:not(.wine),#ord-suggestions>:not(.ord-sup),#inv-list>:not(.inv-card),#doc-list>:not(.doc-card),#suppliers-list>:not(.supplier-card){grid-column:1/-1}
  #an-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));column-gap:28px}
  #an-body>:not(.an-row){grid-column:1/-1}
}