/* Officina come app (9/11/2026): telefono e iPad, dritti e sdraiati.
   - Le regole senza "html.come-app" valgono anche nel browser: testate piu' corte sul telefono, post-it dell'agenda sull'iPad in piedi.
   - Le regole con "html.come-app" valgono solo aperta dall'icona sulla schermata Home (js/app.js mette la classe):
     barra in basso con le pagine principali, margini per la tacca e la barra di iOS, tasti fissi sopra la barra.
   Questo file si carica DOPO lo stile della pagina, quindi vince a parita' di regola. */
:root{--tab-h:0px;--sotto:env(safe-area-inset-bottom,0px)}
html.come-app{--tab-h:62px}

/* ---------- sempre: la pagina usa tutto lo schermo (viewport-fit=cover), quindi niente sotto la tacca dell'iPhone sdraiato ---------- */
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
/* ---------- sempre: marchio su una riga, testate che non si rompono ---------- */
.marchio b{white-space:nowrap}
@media (max-width:1300px){.barra .marchio span{display:none}}
@media (max-width:760px){
  .barra{flex-wrap:wrap;gap:8px 12px;padding:8px 10px 8px 12px}
  .barra .titolo{flex:1 1 140px}
  .barra .titolo h1{font-size:20px}
  /* i pulsanti della testata in una riga sola che scorre col dito, invece di tre righe */
  .barra .btns{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -10px 0 -12px;padding:2px 10px 4px 12px;scroll-padding:0 12px}
  .barra .btns::-webkit-scrollbar{display:none}
  .barra .btns > *{flex:none}
  .barra .btn{height:38px;padding:0 13px}
  .barra .btns > .pri{order:-1}          /* il pulsante principale (Nuovo ordine, Stampa) davanti, sempre a portata */
}
/* Banco sul telefono: piu' alto, cosi' le etichette dei lati hanno posto; l'aiuto piu' piccolo */
@media (max-width:760px){[data-pagina="banco"] .tavola{height:72vh;min-height:430px}[data-pagina="banco"] .aiuto{font-size:11.5px}}

/* ---------- agenda: iPad in piedi e finestre medie, post-it largo il giusto ---------- */
@media (min-width:761px) and (max-width:1100px){
  .quaderno{grid-template-columns:minmax(0,1fr) 40px minmax(214px,244px)}
  .pag-sx{padding:20px 22px 28px 70px}
  .pag-dx{padding:30px 14px 24px 16px}
  .postit{padding:28px 14px 16px}
}
/* agenda sul telefono: la barra dei giorni in una riga sola */
@media (max-width:760px){
  .ag-nav{gap:6px;padding:6px 8px}
  .ag-nav .btn{height:38px;padding:0 11px}
  .ag-freccia{width:38px}
  .ag-salta{margin-left:2px}
  .ag-salta svg{display:none}
  .ag-salta .in{width:132px}
}
@media (max-width:430px){
  .ag-nav{gap:5px}
  .ag-nav .btn{padding:0 9px}
  .ag-nav .ag-freccia{width:36px;padding:0}
  .ag-salta{margin-left:0}
  .ag-salta .in{width:116px;padding:4px 6px}
}
@media (max-width:380px){
  .ag-nav .btn{padding:0 8px}
  .ag-nav .ag-freccia{width:34px}
  .ag-salta .in{width:104px;font-size:13px}
}

/* ======================= solo dentro l'app ======================= */
html.come-app body{
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:calc(var(--tab-h) + var(--sotto) + 18px);
  -webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
html.come-app .barra{top:calc(env(safe-area-inset-top,0px) + 8px)}
/* niente marchio nelle testate: c'e' gia' l'icona; piu' posto per titolo e pulsanti */
@media (max-width:1300px){html.come-app:not([data-pagina="index"]) .barra .marchio,html.come-app .barra .sep{display:none}}

/* la barra in basso: telefono a tutta larghezza, iPad e PC sospesa al centro */
.app-tab{position:fixed;left:0;right:0;bottom:0;z-index:850;display:flex;justify-content:space-around;align-items:stretch;
  height:calc(var(--tab-h) + var(--sotto));padding:0 max(6px,env(safe-area-inset-right,0px)) var(--sotto) max(6px,env(safe-area-inset-left,0px));
  background:rgba(250,253,248,.86);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid rgba(30,80,20,.16);box-shadow:0 -6px 24px rgba(20,60,10,.08);font-family:var(--font)}
.app-tab a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-decoration:none;color:#5f6d64;font-size:11.5px;font-weight:700;letter-spacing:.2px;border-radius:14px;position:relative}
.app-tab svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.app-tab a[aria-current="page"]{color:var(--verde-scuro)}
.app-tab a[aria-current="page"]::before{content:"";position:absolute;top:5px;width:46px;height:31px;border-radius:999px;background:rgba(55,221,0,.18);z-index:-1}
.app-tab a:active{transform:scale(.94)}
@media (min-width:761px){
  html.come-app{--tab-h:64px}
  .app-tab{left:50%;right:auto;transform:translateX(-50%);bottom:calc(var(--sotto) + 10px);height:var(--tab-h);width:min(560px,calc(100% - 40px));
    padding:0 8px;border-radius:22px;border:1px solid rgba(255,255,255,.9);
    box-shadow:inset 0 1px 0 #fff,0 10px 34px rgba(20,60,10,.22),0 2px 6px rgba(20,60,10,.1)}
  html.come-app body{padding-bottom:calc(var(--tab-h) + var(--sotto) + 30px)}
}
@media print{.app-tab{display:none!important}}

/* tasti fissi (Assistente, "Sei:", avvisi) sopra la barra */
html.come-app .as-bottone{bottom:calc(var(--tab-h) + var(--sotto) + 12px);left:max(14px,env(safe-area-inset-left,0px))}
html.come-app .as-pannello{bottom:calc(var(--tab-h) + var(--sotto) + 10px);height:min(620px,calc(100vh - var(--tab-h) - var(--sotto) - 30px - env(safe-area-inset-top,0px)))}
html.come-app #chi-sei{bottom:calc(var(--tab-h) + var(--sotto) + 16px)!important;right:max(12px,env(safe-area-inset-right,0px))!important}
html.come-app .done{bottom:calc(var(--tab-h) + var(--sotto) + 16px)}
@media (min-width:761px){
  html.come-app .as-bottone{bottom:calc(var(--sotto) + 16px)}
  html.come-app #chi-sei{bottom:calc(var(--tab-h) + var(--sotto) + 26px)!important}
  html.come-app .done{bottom:calc(var(--tab-h) + var(--sotto) + 26px)}
}
/* "Sei: Mario" si vede nella pagina Officina; altrove solo se manca il nome (allora chiede "Chi sei?") */
html.come-app:not([data-pagina="index"]) #chi-sei:not(:has(input)){display:none!important}
/* nell'app l'Assistente e' un tondo, per non coprire le righe */
html.come-app .as-bottone{width:52px;height:52px;padding:0;justify-content:center;gap:0}
html.come-app .as-bottone > span{display:none}
html.come-app .as-bottone .as-pallino{position:absolute;top:9px;right:9px;margin:0;box-shadow:0 0 0 2px #14201a}
@media (max-width:760px){html.come-app .as-pannello{left:8px;right:8px;width:auto}}

/* Ordini dentro l'app: Agenda ed Elenco stanno gia' nella barra in basso */
html.come-app[data-pagina="ordini"] .viste{display:none}
@media (max-width:760px){
  /* agenda sul telefono: subito il quaderno, la testata degli ordini non serve */
  html.come-app[data-pagina="ordini"] body[data-vista="agenda"] .barra{display:none}
  html.come-app[data-pagina="ordini"] .agenda{margin-top:8px;margin-bottom:12px}
  html.come-app[data-pagina="ordini"] .pag-sx{min-height:calc(100vh - 290px - var(--tab-h))}
}

/* Registro: le righe lunghe (percorsi, indirizzi) vanno a capo invece di allargare la pagina */
[data-pagina="log"] .corpo{grid-template-columns:minmax(0,1fr)}
[data-pagina="log"] .r > span,[data-pagina="log"] .lett{min-width:0;overflow-wrap:anywhere}

/* telefono sdraiato (poca altezza): barra in basso piu' bassa, testate che non restano attaccate in alto,
   e nell'agenda subito il quaderno come col telefono dritto */
@media (max-height:500px){
  html.come-app{--tab-h:50px}
  html.come-app .app-tab svg{width:21px;height:21px}
  html.come-app .app-tab a{font-size:10.5px;gap:1px}
  html.come-app .app-tab a[aria-current="page"]::before{top:4px;height:25px;width:42px}
  html.come-app .barra{position:relative;top:0}
  html.come-app[data-pagina="ordini"] body[data-vista="agenda"] .barra{display:none}
  html.come-app .as-bottone{width:46px;height:46px}
}