/* Magazzino WE PLAY — foglio di stile unico. Identità presa dal logo e dal sito del club: oro #EDCC49 il colore del marchio: azioni principali e segnaposto nero #111815 il fondo scuro, un nero con una punta di verde campo Rubik + Poppins, ospitati in locale (il programma gira anche senza internet) Regola del colore: l'oro è del marchio, non degli stati. Gli stati della merce (libera, poca, finita, prenotata) hanno colori loro, scelti per non confondersi con l'oro. Tutto il resto è grafite. */ @import url('font.css'); :root{ --oro:#EDCC49; --oro-chiaro:#FCD83C; --oro-scuro:#9A7B0B; --oro-tenue:#FBF3D6; --ground:#F4F5F3; --sup:#fff; --sup2:#EDEFEC; --sup3:#E2E6E1; --linea:#DEE2DC; --linea2:#C3CAC2; --ink:#16201B; --ink2:#4C5852; --ink3:#7B857F; --scuro:#111815; --scuro2:#1B2621; --scuro3:#2A3630; --ok:#0F7A4F; --ok-b:#E1F2E9; --ok-l:#7FC7A3; --warn:#A65313; --warn-b:#FBEADF; --warn-l:#DC9C63; --bad:#A32B21; --bad-b:#FAE5E3; --bad-l:#DE8C83; --info:#1F5C8F; --info-b:#E4EDF6; --info-l:#8AB4D7; --r:14px; --r-sm:10px; --ombra:0 1px 2px rgba(17,24,21,.05), 0 8px 22px rgba(17,24,21,.06); --ombra-alta:0 24px 60px rgba(17,24,21,.28); --barra:58px; --titolo:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --testo:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } @media (prefers-color-scheme:dark){ :root{ --ground:#0D1310; --sup:#141C18; --sup2:#1B241F; --sup3:#242E28; --linea:#232E28; --linea2:#36423B; --ink:#E6EBE7; --ink2:#A4AFA9; --ink3:#7B857F; --scuro:#0A0F0D; --scuro2:#141C18; --scuro3:#212B25; --oro-tenue:#332A0E; --oro-scuro:#EDCC49; --ok:#5FC894; --ok-b:#0C2C1D; --ok-l:#1E6244; --warn:#DE9B57; --warn-b:#2E1F10; --warn-l:#6C4A22; --bad:#EA8A80; --bad-b:#331612; --bad-l:#6E2F27; --info:#7DB3E0; --info-b:#122636; --info-l:#2C5D85; --ombra:0 1px 2px rgba(0,0,0,.45), 0 8px 22px rgba(0,0,0,.32); } } *{box-sizing:border-box} [hidden]{display:none !important} html,body{margin:0;height:100%} body{ font-family:var(--testo);font-size:14.5px;line-height:1.55; background:var(--ground);color:var(--ink);-webkit-font-smoothing:antialiased; } button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,th,.btn,.voce{font-family:var(--titolo)} body,input,select,textarea,td,th{font-variant-numeric:tabular-nums} h1,h2,h3{margin:0 0 .35em;line-height:1.18;letter-spacing:-.02em;font-weight:600} h2{font-size:21px} h3{font-size:14.5px;font-weight:600;letter-spacing:-.005em} a{color:var(--info)} .muted{color:var(--ink2)} .faint{color:var(--ink3)} .num{text-align:right;white-space:nowrap;font-family:var(--titolo)} .errore{color:var(--bad);background:var(--bad-b);padding:11px 13px;border-radius:var(--r-sm); margin:10px 0;white-space:pre-line;border:1px solid var(--bad-l)} /* ---------------------------------------------------------- il marchio -- */ .freccia{display:inline-block;background:var(--oro); -webkit-mask:url('marchio/freccia.svg') no-repeat center/contain; mask:url('marchio/freccia.svg') no-repeat center/contain} .marchio{display:flex;align-items:center;gap:8px;font-family:var(--titolo);font-weight:600; font-size:16px;letter-spacing:-.02em;cursor:pointer;flex-shrink:0;color:#fff} .marchio .freccia{width:11px;height:15px} .marchio .testo{letter-spacing:.02em} /* ------------------------------------------------------------ elementi -- */ .card{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--ombra)} .btn{border:1px solid var(--linea2);background:var(--sup);border-radius:var(--r-sm); padding:9px 15px;font-weight:500;cursor:pointer;white-space:nowrap; display:inline-flex;align-items:center;gap:7px;transition:.13s;line-height:1.2} .btn:hover{border-color:var(--ink3)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.45;cursor:not-allowed} .btn:focus-visible{outline:2px solid var(--oro);outline-offset:2px} .btn.primary{background:var(--oro);color:#111815;border-color:var(--oro);font-weight:600} .btn.primary:hover{background:var(--oro-chiaro);border-color:var(--oro-chiaro)} .btn.scura{background:var(--scuro);color:#fff;border-color:var(--scuro)} .btn.scura:hover{background:var(--scuro3);border-color:var(--scuro3)} .btn.ok{background:var(--ok-b);color:var(--ok);border-color:transparent} .btn.warn{background:var(--warn-b);color:var(--warn);border-color:transparent} .btn.info{background:var(--info-b);color:var(--info);border-color:transparent} .btn.bad{background:var(--bad-b);color:var(--bad);border-color:transparent} .btn.ghost{background:transparent;border-color:transparent;color:var(--ink2)} .btn.ghost:hover{background:var(--sup2);border-color:transparent} .btn.big{padding:13px 18px;font-size:15.5px;width:100%;justify-content:center} .btn.sm{padding:5px 10px;font-size:13px;border-radius:8px} .btn.ico{padding:6px 9px;font-size:15px;line-height:1} label{display:block;margin:13px 0;font-size:12.5px;font-weight:500;color:var(--ink2)} input,select,textarea{width:100%;padding:11px 12px;margin-top:5px;border:1px solid var(--linea2); border-radius:var(--r-sm);background:var(--sup);font-weight:400} input:focus,select:focus,textarea:focus{outline:2px solid var(--oro);outline-offset:-1px; border-color:transparent} input[type=file]{padding:8px;font-size:13px} .riga-campi{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} @media (max-width:640px){.riga-campi{grid-template-columns:1fr}} .pill{display:inline-block;padding:2px 9px;border-radius:7px;font-size:11.5px;font-weight:500; font-family:var(--titolo);background:var(--sup2);color:var(--ink2);white-space:nowrap} .pill.ok{background:var(--ok-b);color:var(--ok)} .pill.warn{background:var(--warn-b);color:var(--warn)} .pill.bad{background:var(--bad-b);color:var(--bad)} .pill.info{background:var(--info-b);color:var(--info)} .pill.oro{background:var(--oro-tenue);color:var(--oro-scuro)} /* ---------------------------------------------------------------- foto -- */ .foto{background:var(--sup2);border-radius:var(--r-sm);overflow:hidden;flex-shrink:0; display:grid;place-items:center;position:relative} .foto img{width:100%;height:100%;object-fit:contain;display:block} .foto.vuota{background:linear-gradient(150deg,var(--sup2),var(--sup3));color:var(--ink3); font-family:var(--titolo);font-weight:600;letter-spacing:.03em} .foto.mini{width:44px;height:44px} .foto.mini.vuota{font-size:12px} .foto.media{width:64px;height:64px} .foto.media.vuota{font-size:15px} .foto.grande{width:100%;aspect-ratio:1/1} .foto.grande.vuota{font-size:32px} /* --------------------------------------------------------------- login -- */ .login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:var(--scuro)} @media (max-width:860px){.login{grid-template-columns:1fr;grid-template-rows:auto 1fr}} .login-scena{position:relative;overflow:hidden;display:flex;flex-direction:column; justify-content:center;padding:clamp(28px,5vw,64px);color:#fff} /* le linee di velocità del logo, riprese in trasparenza come texture di fondo */ .login-scena::before{content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(102deg,transparent 46%,rgba(237,204,73,.10) 46.4%,rgba(237,204,73,.10) 48%,transparent 48.4%), linear-gradient(102deg,transparent 62%,rgba(237,204,73,.07) 62.3%,rgba(237,204,73,.07) 63.4%,transparent 63.8%), linear-gradient(102deg,transparent 74%,rgba(237,204,73,.05) 74.2%,rgba(237,204,73,.05) 75%,transparent 75.4%), radial-gradient(120% 90% at 12% 8%, rgba(237,204,73,.16), transparent 58%)} .login-logo{width:min(360px,74%);height:auto;position:relative;z-index:1} .login-claim{position:relative;z-index:1;margin:28px 0 0;max-width:32ch; font-family:var(--titolo);font-size:clamp(19px,2.4vw,27px);font-weight:500;line-height:1.28; letter-spacing:-.02em} .login-claim b{color:var(--oro);font-weight:600} .login-nota{position:relative;z-index:1;margin-top:16px;color:rgba(255,255,255,.45);font-size:13px} @media (max-width:860px){ .login-scena{padding:26px 22px 24px;align-items:center;text-align:center} .login-logo{width:min(250px,78%)} .login-claim,.login-nota{display:none} } .login-lato{background:var(--sup);display:grid;place-items:center;padding:clamp(24px,4vw,44px)} .login-form{width:100%;max-width:340px} .login-form h1{font-size:24px;margin-bottom:4px} .login-form .sotto{color:var(--ink2);margin:0 0 20px;font-size:14px} .login-form label{margin:14px 0} .login-form .btn{margin-top:20px} /* ------------------------------------------------------------ struttura - */ .topbar{position:sticky;top:0;z-index:30;background:var(--scuro);color:#fff; display:flex;align-items:center;gap:14px;padding:10px 16px; border-bottom:2px solid var(--oro)} .cerca{position:relative;flex:1;min-width:120px;max-width:520px} .cerca input{margin:0;background:rgba(255,255,255,.10);border-color:transparent;color:#fff; padding:9px 13px;border-radius:var(--r-sm)} .cerca input::placeholder{color:rgba(255,255,255,.5)} .cerca input:focus{background:var(--sup);color:var(--ink);outline-color:var(--oro)} .azioni-rapide{display:flex;gap:8px} .topbar .btn{border-color:transparent} .utente{display:flex;align-items:center;gap:6px;font-size:12.5px;color:rgba(255,255,255,.6); margin-left:auto} .utente .btn.ghost{color:rgba(255,255,255,.8)} .utente .btn.ghost:hover{background:rgba(255,255,255,.12)} .corpo{display:flex;align-items:flex-start} /* --- il menu --------------------------------------------------------------- Raggruppato per quello che stai facendo (magazzino / vendita / acquisti), non per ordine di creazione. I numeri accanto alle voci non sono decorazione: sono le cose che aspettano una risposta. */ .lato{position:sticky;top:var(--barra);width:222px;flex-shrink:0;padding:16px 12px 14px; display:flex;flex-direction:column;gap:18px;height:calc(100vh - var(--barra)); overflow-y:auto;border-right:1px solid var(--linea)} .gruppo{display:flex;flex-direction:column;gap:2px} .gruppo.in-fondo{margin-top:auto;padding-top:14px;border-top:1px solid var(--linea)} .gruppo-t{font-family:var(--titolo);font-size:10px;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--ink3);padding:0 10px 6px} .voce{display:flex;align-items:center;gap:11px;padding:9px 11px 9px 13px;border:0; background:transparent;border-radius:10px;font-family:var(--titolo);font-weight:500; color:var(--ink2);cursor:pointer;text-align:left;width:100%;font-size:14px; position:relative;transition:.12s} .voce .ic{width:19px;height:19px;flex-shrink:0;opacity:.62;transition:.12s} .voce .et{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .voce:hover{background:var(--sup);color:var(--ink)} .voce:hover .ic{opacity:.9} .voce:focus-visible{outline:2px solid var(--oro);outline-offset:-2px} .voce.attiva{background:var(--sup);color:var(--ink);font-weight:600;box-shadow:var(--ombra)} .voce.attiva .ic{opacity:1;color:var(--oro-scuro)} /* la freccia del logo segna la sezione aperta */ .voce.attiva::before{content:"";position:absolute;left:1px;top:50%;transform:translateY(-50%); width:7px;height:11px;background:var(--oro); -webkit-mask:url('marchio/freccia.svg') no-repeat center/contain; mask:url('marchio/freccia.svg') no-repeat center/contain} .conta{font-family:var(--titolo);font-size:11px;font-weight:600;min-width:20px;text-align:center; padding:1px 6px;border-radius:20px;background:var(--sup3);color:var(--ink2);flex-shrink:0} .conta.info{background:var(--info-b);color:var(--info)} .conta.warn{background:var(--warn-b);color:var(--warn)} .conta.bad{background:var(--bad-b);color:var(--bad)} .voce.attiva .conta{background:var(--oro-tenue);color:var(--oro-scuro)} /* le stesse voci nel menu del telefono */ .gruppo-m{display:flex;flex-direction:column;gap:2px;margin-bottom:14px} .voce-m{display:flex;align-items:center;gap:12px;padding:12px 12px;border:0;width:100%; background:var(--sup2);border-radius:10px;font-family:var(--titolo);font-weight:500; font-size:15px;color:var(--ink);cursor:pointer;text-align:left;margin-bottom:2px} .voce-m .ic{width:20px;height:20px;opacity:.6;flex-shrink:0} .voce-m .et{flex:1} .vista{flex:1;min-width:0;padding:20px 22px 92px;max-width:1440px} .barra-mobile{display:none} @media (max-width:900px){ .lato{display:none} .azioni-rapide{display:none} .utente span{display:none} .vista{padding:14px 12px 92px} .topbar{padding:9px 12px;gap:10px} .marchio .testo{display:none} .barra-mobile{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;gap:8px; padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:var(--sup); border-top:1px solid var(--linea)} .barra-mobile .btn{flex:1;justify-content:center;padding:12px 6px} } /* -------------------------------------------------------------- ricerca - */ .risultati{position:absolute;top:calc(100% + 8px);left:0;right:0;max-height:min(62vh,460px); overflow:auto;background:var(--sup);border:1px solid var(--linea);border-radius:var(--r); box-shadow:var(--ombra-alta);z-index:50;color:var(--ink)} .ris{display:flex;align-items:center;gap:12px;padding:9px 12px;cursor:pointer; border-bottom:1px solid var(--linea)} .ris:last-child{border-bottom:0} .ris:hover,.ris.sel{background:var(--oro-tenue)} .ris .nome{flex:1;min-width:0} .ris .nome b{display:block;font-size:14.5px;font-family:var(--titolo);font-weight:500; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ris .nome small{color:var(--ink2);font-size:12.5px} .ris .qta{text-align:right;font-family:var(--titolo);font-weight:600;font-size:17px;line-height:1.1} .ris .qta small{display:block;font-size:11px;font-weight:500} .vuoto{padding:28px 20px;text-align:center;color:var(--ink2)} /* ------------------------------------------------------------ cruscotto - */ .barra-titolo{display:flex;justify-content:space-between;align-items:center;gap:12px; margin-bottom:16px;flex-wrap:wrap} .griglia{display:grid;gap:14px} .due{grid-template-columns:1fr 1fr} @media (max-width:1000px){.due{grid-template-columns:1fr}} .pannello{padding:16px 18px} .pannello h3{display:flex;justify-content:space-between;align-items:center;gap:10px; margin-bottom:12px} .fascia{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;margin-bottom:14px} @media (max-width:900px){.fascia{grid-template-columns:1fr}} .stock-grande{padding:20px 22px;background:var(--scuro);border-color:transparent;color:#fff} .stock-grande .cifre{display:flex;gap:30px;flex-wrap:wrap} .stock-grande .voce-cifra .v{font-family:var(--titolo);font-size:40px;font-weight:600; letter-spacing:-.04em;line-height:1} .stock-grande .voce-cifra .e{font-family:var(--titolo);font-size:11px;font-weight:500; letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:6px} .stock-grande .voce-cifra.libero .v{color:var(--oro)} .stock-grande .voce-cifra.pren .v{color:rgba(255,255,255,.62)} .nastro{display:flex;height:8px;border-radius:5px;overflow:hidden;margin-top:18px; background:rgba(255,255,255,.12)} .nastro i{display:block;height:100%} .nastro .l{background:var(--oro)} .nastro .p{background:rgba(255,255,255,.42)} .legenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12.5px; color:rgba(255,255,255,.6)} .legenda span{display:flex;align-items:center;gap:6px} .legenda i{width:9px;height:9px;border-radius:3px;display:block} .soldi{padding:20px 22px;display:flex;flex-direction:column;justify-content:center;gap:14px} .soldi .r{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .soldi .r b{font-family:var(--titolo);font-size:22px;font-weight:600;letter-spacing:-.025em} .soldi .r span{font-size:12.5px;color:var(--ink2)} .dafare{padding:0;overflow:hidden} .dafare .riga{display:flex;align-items:center;gap:13px;padding:13px 18px;width:100%; border:0;border-bottom:1px solid var(--linea);background:transparent;cursor:pointer; text-align:left;font:inherit;color:inherit} .dafare .riga:last-child{border-bottom:0} .dafare .riga:hover{background:var(--sup2)} .dafare .n{font-family:var(--titolo);font-weight:600;font-size:20px;min-width:34px} .dafare .t{flex:1;min-width:0} .dafare .t b{display:block;font-family:var(--titolo);font-weight:500;font-size:14.5px} .dafare .t small{color:var(--ink2)} .dafare .freccia-r{color:var(--ink3)} .dafare .riga.ok-stato .n{color:var(--ok)} .dafare .riga.warn-stato .n{color:var(--warn)} .dafare .riga.bad-stato .n{color:var(--bad)} .dafare .riga.info-stato .n{color:var(--info)} /* -------------------------------------------------------------- tabelle - */ .scorri{overflow-x:auto;-webkit-overflow-scrolling:touch} table{width:100%;border-collapse:collapse;font-size:14px} th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3); padding:9px 10px;border-bottom:1px solid var(--linea);white-space:nowrap;font-weight:500} td{padding:9px 10px;border-bottom:1px solid var(--linea);vertical-align:middle} tr:last-child td{border-bottom:0} tbody tr:hover{background:var(--sup2)} .clic{cursor:pointer} .cella-art{display:flex;align-items:center;gap:11px;min-width:0} .cella-art .t{min-width:0} .cella-art b{display:block;font-family:var(--titolo);font-weight:500;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;max-width:34ch} .cella-art small{color:var(--ink2);font-size:12px} .filtri{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px} .filtri input,.filtri select{width:auto;min-width:132px;margin:0;padding:8px 10px} .filtri .spinta{margin-left:auto} /* ------------------------------------------------------ schede articolo - */ .schede{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:14px} .scheda{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r); overflow:hidden;cursor:pointer;transition:.14s;display:flex;flex-direction:column; position:relative} .scheda:hover{border-color:var(--oro);box-shadow:var(--ombra);transform:translateY(-2px)} .scheda .foto{border-radius:0;border-bottom:1px solid var(--linea)} .scheda .corpo-s{padding:11px 13px;display:flex;flex-direction:column;gap:3px;flex:1} .scheda .marca{font-family:var(--titolo);font-size:10.5px;font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--ink3)} .scheda .nome-s{font-family:var(--titolo);font-weight:500;font-size:14px;line-height:1.28; min-height:2.6em} .scheda .cod{font-size:11.5px;color:var(--ink3);margin-top:auto;padding-top:6px} .scheda .piede{display:flex;align-items:center;justify-content:space-between;gap:8px; padding:9px 13px;border-top:1px solid var(--linea);background:var(--sup2)} .scheda .disp{font-family:var(--titolo);font-weight:600;font-size:17px;line-height:1} .scheda .disp small{font-weight:400;font-size:11px;color:var(--ink3);display:block;margin-top:2px; font-family:var(--testo)} .scheda .azioni{display:flex;gap:4px} .badge-alto{position:absolute;top:9px;left:9px;z-index:2;box-shadow:0 1px 4px rgba(17,24,21,.12)} @media (max-width:640px){ .schede{grid-template-columns:repeat(auto-fill,minmax(144px,1fr));gap:10px} .scheda .corpo-s{padding:9px 10px} .scheda .piede{padding:8px 10px} .scheda .nome-s{font-size:13px;min-height:2.4em} .scheda .disp{font-size:15px} .filtri select,.filtri input{flex:1 1 132px;min-width:0} } /* --------------------------------------------------------------- modale - */ .modale{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px} .modale-sfondo{position:absolute;inset:0;background:rgba(9,14,12,.58)} .modale-corpo{position:relative;width:100%;max-width:540px;max-height:92vh;overflow:auto; padding:22px;background:var(--sup);border:1px solid var(--linea); border-radius:var(--r);box-shadow:var(--ombra-alta)} .modale-corpo.larga{max-width:940px} @media (max-width:640px){ .modale{padding:0;place-items:end stretch} .modale-corpo{max-width:none;max-height:94vh;border-radius:18px 18px 0 0;border-bottom:0} } .chiudi{position:absolute;top:12px;right:12px;z-index:3} .riepilogo{background:var(--sup2);border-radius:var(--r-sm);padding:12px 14px;margin:14px 0} .riepilogo div{display:flex;justify-content:space-between;gap:12px;padding:3px 0} .riepilogo .forte{font-weight:600;font-family:var(--titolo);border-top:1px solid var(--linea2); margin-top:6px;padding-top:8px} .scelto{display:flex;align-items:center;gap:11px;background:var(--sup2);border-radius:var(--r-sm); padding:10px 12px;margin-bottom:8px} .scelto .nome{flex:1;min-width:0} .brindisi{position:fixed;left:50%;transform:translateX(-50%);bottom:88px;z-index:200; background:var(--scuro);color:#fff;padding:12px 18px;border-radius:var(--r-sm);font-weight:500; box-shadow:var(--ombra-alta);max-width:92vw;border-left:3px solid var(--oro)} .brindisi.male{background:var(--bad);border-left-color:#fff} .testa-prodotto{display:grid;grid-template-columns:214px minmax(0,1fr);gap:22px;margin-bottom:4px} @media (max-width:640px){.testa-prodotto{grid-template-columns:1fr}} .zona-foto{position:relative} .zona-foto .foto{aspect-ratio:1/1;border:1px solid var(--linea)} .zona-foto.trascina{outline:2px dashed var(--oro);outline-offset:3px} .zona-foto .sotto{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;align-items:center} .fonte{font-size:11px;color:var(--ink3);word-break:break-word;line-height:1.35;margin-top:6px} .dati-prodotto .r{display:flex;justify-content:space-between;gap:12px;padding:5px 0; border-bottom:1px solid var(--linea);font-size:14px} .dati-prodotto .r:last-child{border-bottom:0} .dati-prodotto .r span{color:var(--ink2)} .dati-prodotto .r b{text-align:right;font-family:var(--titolo);font-weight:500} /* -------------------------------------------------- scelta dell'articolo */ .chip-riga{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0} .chip{border:1px solid var(--linea2);background:var(--sup);border-radius:20px;padding:5px 13px; font-family:var(--titolo);font-size:13px;font-weight:500;color:var(--ink2);cursor:pointer; white-space:nowrap} .chip:hover{border-color:var(--ink3)} .chip.on{background:var(--oro);color:#111815;border-color:var(--oro);font-weight:600} .scelta-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px; max-height:52vh;overflow-y:auto;padding:2px} .scelta{display:flex;flex-direction:column;gap:4px;align-items:stretch;text-align:left; background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-sm); padding:8px;cursor:pointer;font:inherit;color:inherit;transition:.12s} .scelta:hover{border-color:var(--oro);box-shadow:var(--ombra)} .scelta:focus-visible{outline:2px solid var(--oro);outline-offset:2px} .scelta .foto{border:0} .scelta .s-nome{font-family:var(--titolo);font-weight:500;font-size:12.5px;line-height:1.25; margin-top:2px} .scelta .s-var{font-size:11.5px;color:var(--ink2)} .scelta .s-qta{align-self:flex-start;margin-top:2px} @media (max-width:640px){ .scelta-griglia{grid-template-columns:repeat(auto-fill,minmax(106px,1fr));max-height:46vh} } /* -------------------------------------------------------------- acquisti */ .tab-riga{display:flex;gap:2px;border-bottom:1px solid var(--linea);margin-bottom:18px; overflow-x:auto} .tab-riga button{border:0;background:transparent;padding:10px 15px;font-family:var(--titolo); font-weight:500;font-size:14.5px;color:var(--ink3);cursor:pointer; border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap} .tab-riga button:hover{color:var(--ink)} .tab-riga button.on{color:var(--ink);font-weight:600;border-bottom-color:var(--oro)} .righe-ordine{display:flex;flex-direction:column;gap:8px;margin:12px 0} .riga-ordine{display:grid;grid-template-columns:44px minmax(0,1fr) 78px 92px 34px;gap:10px; align-items:center;background:var(--sup2);border-radius:var(--r-sm);padding:8px 10px} .riga-ordine input{margin:0;padding:7px 9px;background:var(--sup)} .riga-ordine .t{min-width:0} .riga-ordine .t b{display:block;font-family:var(--titolo);font-weight:500;font-size:13.5px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .riga-ordine .t small{color:var(--ink2);font-size:11.5px} @media (max-width:640px){ .riga-ordine{grid-template-columns:40px minmax(0,1fr) 34px; grid-template-areas:"f t x" "q q q";row-gap:8px} .riga-ordine .foto{grid-area:f} .riga-ordine .t{grid-area:t} .riga-ordine .via{grid-area:x} .riga-ordine .campo-qta,.riga-ordine .campo-costo{grid-area:q;display:flex;gap:8px;width:100%} } .tot-ordine{display:flex;justify-content:flex-end;gap:24px;padding:10px 2px; font-family:var(--titolo);font-weight:600} .tot-ordine span{color:var(--ink2);font-weight:400;font-family:var(--testo)} .kpi-acq{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px; margin-bottom:18px} .kpi-acq .card{padding:15px 17px} .kpi-acq .e{font-size:12px;color:var(--ink2)} .kpi-acq .v{font-family:var(--titolo);font-size:26px;font-weight:600;letter-spacing:-.03em; line-height:1.15;margin-top:2px} .kpi-acq .sotto{font-size:12px;color:var(--ink3);margin-top:3px} /* anagrafiche modificabili nelle impostazioni */ .riga-anagrafica{display:flex;align-items:center;gap:12px;padding:10px 0; border-bottom:1px solid var(--linea)} .riga-anagrafica:last-child{border-bottom:0} .riga-anagrafica .t{flex:1;min-width:0} .riga-anagrafica .t b{font-family:var(--titolo);font-weight:500} .riga-anagrafica .t small{display:block;color:var(--ink3);font-size:12px} .riga-anagrafica .azioni{display:flex;gap:4px;flex-shrink:0} /* ------------------------------------------------------------- grafici -- */ /* Le due tinte dei dati: verificate per daltonismo e contrasto sul fondo, con lo script del sistema di visualizzazione, in chiaro e in scuro. */ :root{ --dato-a:#C9A420; --dato-b:#1F5C8F; } @media (prefers-color-scheme:dark){ :root{ --dato-a:#AD8F22; --dato-b:#4682BD; } } .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px} .tile{padding:15px 17px} .tile .t-e{font-size:12px;color:var(--ink2)} .tile .t-v{font-family:var(--titolo);font-size:27px;font-weight:600;letter-spacing:-.03em; line-height:1.15;margin-top:3px} .tile .t-s{font-size:12px;color:var(--ink3);margin-top:3px} .graf{margin-top:4px} .svg-graf{width:100%;height:auto;display:block;overflow:visible} .svg-graf .griglia{stroke:var(--linea);stroke-width:1} .svg-graf .asse{fill:var(--ink3);font-size:10.5px;font-family:var(--titolo)} .svg-graf .barra{transition:opacity .12s} .svg-graf:hover .barra{opacity:.55} .svg-graf .barra:hover{opacity:1} .legenda-g{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2); margin-bottom:8px} .legenda-g span{display:flex;align-items:center;gap:6px} .legenda-g i{width:10px;height:10px;border-radius:3px;display:block} .sugg{position:fixed;z-index:300;background:var(--scuro);color:#fff;padding:7px 11px; border-radius:8px;font-size:12.5px;font-family:var(--titolo);pointer-events:none; box-shadow:var(--ombra-alta);white-space:nowrap} .classifica{display:flex;flex-direction:column;gap:9px;margin-top:4px} .cl-riga{display:grid;grid-template-columns:minmax(0,1fr) 1.15fr auto;gap:12px;align-items:center} .cl-nome{font-family:var(--titolo);font-weight:500;font-size:13.5px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .cl-barra{height:9px;border-radius:5px;background:var(--sup2);overflow:hidden} .cl-barra i{display:block;height:100%;border-radius:5px} .cl-val{font-family:var(--titolo);font-weight:600;font-size:13.5px;text-align:right; white-space:nowrap} .cl-val small{display:block;font-weight:400;font-size:11px;color:var(--ink3); font-family:var(--testo)} @media (max-width:640px){ .cl-riga{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n v" "b b";row-gap:5px} .cl-nome{grid-area:n} .cl-val{grid-area:v} .cl-barra{grid-area:b} } /* avvisi dentro i moduli: il momento giusto per dirlo è prima di confermare */ .attenzione{background:var(--warn-b);border-left:3px solid var(--warn);border-radius:0 8px 8px 0; padding:11px 13px;margin:12px 0;font-size:13.5px} .attenzione.lieve{background:var(--sup2);border-left-color:var(--linea2)} .attenzione b{font-family:var(--titolo);font-weight:600} .attenzione small{display:block;color:var(--ink2);margin-top:7px;font-size:12.5px;line-height:1.45} .att-riga{display:flex;align-items:center;gap:10px;justify-content:space-between; margin-top:7px;flex-wrap:wrap} /* Scelta fra due strade (regime IVA): righe larghe, cliccabili tutte intere. Nome diverso da .scelta, che e' gia' la piastrella del selettore articoli. */ .opzioni{display:flex;flex-direction:column;gap:8px;margin:10px 0} .opzione{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;cursor:pointer; border:1px solid var(--linea);border-radius:10px;background:var(--sup2); font-size:14px;line-height:1.35} .opzione:hover{border-color:var(--oro)} .opzione.attiva{border-color:var(--oro);background:var(--oro-tenue)} .opzione input{margin-top:2px;flex:none} .opzione:focus-within{outline:2px solid var(--oro);outline-offset:2px} .riga-campo{display:flex;align-items:center;gap:8px;font-size:14px;margin:6px 0 12px} .riga-campo input{width:88px} /* Nota cliccabile sotto un numero di cui non ci si puo' ancora fidare. */ .riga-nota{display:block;width:100%;text-align:left;margin-top:8px;padding:9px 11px; border:1px dashed var(--linea2);border-radius:9px;background:transparent;cursor:pointer; font:inherit;font-size:12.5px;line-height:1.45;color:var(--ink2)} .riga-nota:hover{border-color:var(--oro);color:var(--ink)} /* Tre campi corti in fila (gli identificativi di Wansport). */ .pannello .tre{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .pannello .bottoni{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} @media (max-width:560px){ .pannello .tre{grid-template-columns:1fr} } /* Scelta del magazzino: negozio o bar. Sta in cima alla barra laterale perché è la prima domanda a cui rispondere — tutto quello che c'è sotto dipende da questa. Due pulsanti veri, non un menù a tendina: si deve vedere da lontano in quale dei due si sta lavorando, e sbagliarsi deve essere difficile. */ .reparti{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 10px 14px; padding:4px;background:var(--sup2);border:1px solid var(--linea);border-radius:11px} .reparti .rep{padding:8px 6px;border:0;border-radius:8px;background:transparent; cursor:pointer;font:inherit;font-family:var(--titolo);font-weight:500;font-size:13px; color:var(--ink2);letter-spacing:.01em} .reparti .rep:hover{color:var(--ink)} .reparti .rep.attivo{background:var(--scuro);color:var(--oro);box-shadow:var(--ombra)} /* I due magazzini stanno in riga; le sezioni che vengono dopo (Lezioni, Torneo) stanno sotto, due per riga: schiacciarle tutte in una riga da quattro colonne le renderebbe illeggibili sul telefono. Quando la terza è da sola, prende tutta la larghezza. */ .reparti .rep:nth-child(3):last-child{grid-column:1 / -1} .reparti .rep:focus-visible{outline:2px solid var(--oro);outline-offset:2px} @media (prefers-color-scheme:dark){ /* Sul fondo scuro il nero non stacca: qui l'attivo diventa oro. */ .reparti .rep.attivo{background:var(--oro);color:#111815} } /* Il reparto in cui si sta, scritto accanto al marchio: da telefono la barra laterale è chiusa e questo resta l'unico modo di accorgersene. */ .rep-ora{margin-left:8px;padding:2px 8px;border-radius:999px;font-family:var(--titolo); font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase; background:rgba(255,255,255,.14);color:#fff} .rep-ora[data-rep="BAR"]{background:var(--oro);color:#111815} /* «Cosa tengo a listino»: un elenco lungo da spuntare in fretta. Righe basse, foto piccola per riconoscere al volo, casella grande da centrare col dito. */ .barra-scelte{display:flex;align-items:center;gap:8px;margin:10px 0 8px} .barra-scelte .muted{margin-left:auto;font-size:12.5px} .lista-scelte{max-height:56vh;overflow-y:auto;border:1px solid var(--linea); border-radius:11px;background:var(--sup)} .scelta-riga{display:flex;align-items:center;gap:10px;padding:7px 11px;cursor:pointer; border-bottom:1px solid var(--linea)} .scelta-riga:last-child{border-bottom:0} .scelta-riga:hover{background:var(--sup2)} .scelta-riga input{width:19px;height:19px;flex:none;accent-color:var(--oro-scuro)} .scelta-riga img,.scelta-riga .senza-foto{width:34px;height:34px;flex:none;border-radius:7px; object-fit:contain;background:var(--sup2);border:1px solid var(--linea)} .scelta-riga .sr-testo{display:flex;flex-direction:column;gap:1px;min-width:0} .scelta-riga .sr-testo b{font-size:13.5px;font-weight:500} .scelta-riga .sr-testo small{font-size:11.5px;color:var(--ink2)} .scelta-riga.ha-merce{background:var(--ok-b)} .scelta-riga.ha-merce:hover{background:var(--ok-b)} /* Caricare il documento del fornitore dentro il nuovo ordine. */ .da-documento{margin:14px 0;padding:12px 14px;border:1px dashed var(--linea2); border-radius:11px;background:var(--sup2)} .da-documento b{font-family:var(--titolo);font-weight:500} .da-documento .muted{font-size:12.5px;line-height:1.45;margin:4px 0 10px} .da-documento .ok-t{color:var(--ok);font-weight:500} #esito-doc{font-size:12.5px;margin:8px 0 0;min-height:1em} /* La revisione delle righe lette: testo originale sotto, campi a destra. */ .lista-doc .riga-doc{align-items:flex-start;gap:9px;padding:9px 11px} .lista-doc .riga-doc .sr-testo{flex:1} .lista-doc .originale{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px;opacity:.75;margin-top:2px;word-break:break-word} .lista-doc .warn-t{color:var(--warn);font-weight:500} .lista-doc .ok-t{color:var(--ok);font-weight:500} .lista-doc .campo-qta input,.lista-doc .campo-costo input{width:76px;padding:5px 7px;font-size:13px} @media (max-width:560px){ .lista-doc .riga-doc{flex-wrap:wrap} .lista-doc .campo-qta,.lista-doc .campo-costo{margin-left:29px} } /* Sconto per riga: campo corto accanto al prezzo, netto calcolato a fianco. */ .campo-sconto input{width:70px;padding:6px 8px;font-size:13px;text-align:center} .netto-riga{min-width:66px;text-align:right;font-family:var(--titolo);font-weight:500; font-size:13px;color:var(--ok);font-variant-numeric:tabular-nums} .netto-riga.storto{color:var(--bad)} .lista-doc .campo-sconto input{width:64px} @media (max-width:560px){ .lista-doc .campo-sconto,.lista-doc .netto-riga{margin-left:29px} } /* I conti della finestra di revisione, col confronto contro il documento. */ .conti-doc{margin-top:12px;padding:10px 12px;border:1px solid var(--linea); border-radius:10px;background:var(--sup2)} .conti-doc .r{display:flex;justify-content:space-between;gap:12px;font-size:13px; padding:2px 0;font-variant-numeric:tabular-nums} .conti-doc .r.grosso{font-size:15px;padding-top:6px;margin-top:4px; border-top:1px solid var(--linea)} .conti-doc .r.torna{color:var(--ok)} .conti-doc .r.non-torna{color:var(--bad);font-weight:500} .tot-ordine .grosso{font-size:15px} /* Conteggio a piastrelle: si conta col telefono in mano davanti allo scaffale, quindi foto grande, nome corto e un bersaglio comodo da toccare. */ .conta-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); gap:10px;max-height:58vh;overflow-y:auto;padding:2px} .conta-tile{display:flex;flex-direction:column;gap:5px;align-items:stretch;text-align:left; padding:8px;border:1px solid var(--linea);border-radius:12px;background:var(--sup); cursor:pointer;font:inherit} .conta-tile:hover{border-color:var(--oro);box-shadow:var(--ombra)} .conta-tile:disabled{cursor:default;opacity:.75} .conta-tile img,.conta-tile .senza-foto{width:100%;height:84px;object-fit:contain; border-radius:8px;background:var(--sup2)} .conta-tile .ct-nome{font-family:var(--titolo);font-weight:500;font-size:12.5px; line-height:1.25;min-height:2.5em} .conta-tile .ct-num{font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums} .conta-tile .ct-num b{font-size:17px;color:var(--ink);font-family:var(--titolo)} .conta-tile .ct-num em{font-style:normal;color:var(--warn);font-weight:500} .conta-tile.contato{border-color:var(--ok-l);background:var(--ok-b)} .conta-tile.diverso{border-color:var(--warn-l);background:var(--warn-b)} /* La domanda «quanti ne hai contati»: numero grande, si legge da lontano. */ .chiedi-foto{display:block;max-height:150px;margin:0 auto 10px;object-fit:contain} input.grande-numero{font-size:30px;text-align:center;font-family:var(--titolo); font-variant-numeric:tabular-nums;padding:12px} @media (max-width:560px){ .conta-griglia{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))} } /* Quando si compra a colli, quanti pezzi entrano davvero in magazzino. */ .colli-t{display:block;color:var(--info);font-size:11.5px;margin-top:2px} .bad-t{display:block;color:var(--bad);font-size:11.5px;margin-top:2px;font-weight:500} /* Il banco: bersagli grandi, numero della giacenza sempre in vista, e il riscontro al tocco immediato — dietro un bancone non si guarda due volte. */ .cerca-banco{width:100%;max-width:420px;margin:10px 0 14px;font-size:16px} .banco-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px} .banco-tile{position:relative;display:flex;flex-direction:column;gap:6px;align-items:stretch; padding:9px;border:1px solid var(--linea);border-radius:14px;background:var(--sup); cursor:pointer;font:inherit;text-align:left; transition:transform .12s ease, box-shadow .12s ease, background .12s ease} .banco-tile:hover{border-color:var(--oro);box-shadow:var(--ombra)} .banco-tile:active{transform:scale(.96)} .banco-tile.battuto{background:var(--ok-b);border-color:var(--ok-l);transform:scale(.96)} .banco-tile img,.banco-tile .senza-foto{width:100%;height:78px;object-fit:contain; border-radius:9px;background:var(--sup2)} .banco-tile .bt-nome{font-family:var(--titolo);font-weight:500;font-size:12.5px; line-height:1.25;min-height:2.5em} .banco-tile .bt-qta{position:absolute;top:6px;right:6px;min-width:30px;padding:2px 7px; border-radius:999px;background:var(--scuro);color:var(--oro);text-align:center; font-family:var(--titolo);font-weight:500;font-size:13px;font-variant-numeric:tabular-nums} .banco-tile.finito{opacity:.45;cursor:default} .banco-tile.finito .bt-qta{background:var(--bad);color:#fff} .interruttore{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2)} .brindisi-azione{margin-left:12px;padding:4px 12px;border:0;border-radius:999px; background:var(--oro);color:#111815;font:inherit;font-weight:600;font-size:13px;cursor:pointer} @media (max-width:560px){ .banco-griglia{grid-template-columns:repeat(auto-fill,minmax(102px,1fr))} .banco-tile img,.banco-tile .senza-foto{height:66px} } /* Le ultime operazioni, con l'annulla accanto. Righe basse: si guardano in fretta, e quello da correggere è quasi sempre il primo. */ .op-elenco{display:flex;flex-direction:column} .op-riga{display:flex;align-items:center;gap:10px;padding:8px 2px; border-bottom:1px solid var(--linea)} .op-riga:last-child{border-bottom:0} .op-riga img,.op-riga .senza-foto{width:34px;height:34px;flex:none;border-radius:7px; object-fit:contain;background:var(--sup2);border:1px solid var(--linea)} .op-testo{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} .op-testo b{font-size:13.5px;font-weight:500} .op-testo small{font-size:11.5px;color:var(--ink2)} .op-no{max-width:44%;text-align:right;line-height:1.3;font-size:11px} @media (max-width:560px){ .op-no{max-width:50%} } /* ------------------------------------------------------------ Conti Bar -- */ /* Le linguette NON si chiamano «schede»: quel nome è già della griglia degli articoli, più su in questo file. Chiamandole così, l'inventario smetteva di essere una griglia e diventava una fila schiacciata — su ogni schermo. */ .linguette{display:flex;gap:6px;margin:4px 0 14px;border-bottom:1px solid var(--linea)} .linguetta{padding:8px 14px;border:0;border-bottom:2px solid transparent;background:0; cursor:pointer;font:inherit;font-family:var(--titolo);font-weight:500;font-size:14px; color:var(--ink2)} .linguetta:hover{color:var(--ink)} .linguetta.attiva{color:var(--ink);border-bottom-color:var(--oro)} .nome-grande{font-size:15px;font-family:var(--titolo);font-weight:500;letter-spacing:.01em} .totale-riga{font-size:15px;font-variant-numeric:tabular-nums} /* padding a destra: se no il totale finisce sotto la ✕ che chiude la finestra. */ .testa-conto{display:flex;justify-content:space-between;align-items:flex-start;gap:14px; flex-wrap:wrap;margin-bottom:12px;padding-right:38px} .totale-conto{text-align:right} .totale-conto small{display:block;font-size:11.5px;color:var(--ink2);text-transform:uppercase; letter-spacing:.05em} .totale-conto b{font-family:var(--titolo);font-size:30px;font-variant-numeric:tabular-nums} /* La griglia prodotti dentro il conto: stessa piastrella del banco, più bassa, perché qui sotto ci deve stare anche l'elenco di quello che ha preso. */ .griglia-conto{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px;max-height:34vh;overflow-y:auto;padding:2px;margin-bottom:16px} .griglia-conto .banco-tile img,.griglia-conto .banco-tile .senza-foto{height:58px} .banco-tile .bt-prezzo{font-size:12px;color:var(--ok);font-weight:600; font-variant-numeric:tabular-nums} .giornata{margin-bottom:12px} .giornata-t{display:flex;justify-content:space-between;align-items:baseline; padding:5px 2px;border-bottom:1px solid var(--linea);margin-bottom:2px; font-family:var(--titolo);font-size:13px} .giornata-t b{font-variant-numeric:tabular-nums} table.righe-conto td{padding:5px 8px;font-size:13.5px} table.righe-conto tr.annullata{opacity:.5;text-decoration:line-through} table.righe-conto tr.annullata small{text-decoration:none;display:inline-block} tr.spento{opacity:.55} .riga-scartata{opacity:.6} .pagine{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:12px} @media (max-width:560px){ .totale-conto b{font-size:24px} .griglia-conto{grid-template-columns:repeat(auto-fill,minmax(98px,1fr));max-height:30vh} } /* Tenuta premuta sulla piastrella: quante ne vuoi. */ .scelta-quantita{position:absolute;inset:auto 4px 4px 4px;display:flex;gap:4px; flex-wrap:wrap;justify-content:center;padding:6px;border-radius:10px; background:var(--scuro);box-shadow:var(--ombra);z-index:5} .scelta-quantita button{min-width:38px;min-height:38px;padding:0 8px;border:0; border-radius:8px;background:rgba(255,255,255,.14);color:#fff;font:inherit; font-weight:600;font-size:14px;cursor:pointer} .scelta-quantita button:hover{background:var(--oro);color:#111815} .banco-tile{-webkit-touch-callout:none;user-select:none} /* Conti dimenticati */ .elenco-vecchi{margin-top:8px;display:flex;flex-direction:column;gap:6px} .riga-vecchia{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:7px 9px;border-radius:9px;background:var(--sup)} .riga-vecchia small{display:block;color:var(--ink2);font-size:11.5px} .azioni-vecchia{display:flex;gap:6px;flex:none} tr.conto-vecchio td:first-child{box-shadow:inset 3px 0 0 var(--warn)} .testo-sollecito{width:100%;font:inherit;font-size:14px;line-height:1.5;padding:10px; border:1px solid var(--linea);border-radius:10px;background:var(--sup);color:var(--ink); resize:vertical} /* =========================================================================== Elenchi dei conti: righe, non tabelle. Una tabella a cinque colonne su un telefono da 375 px non ci sta, e comprimerla la rende illeggibile. Una riga con «chi» a sinistra e «quanto» a destra si legge uguale su ogni schermo, ed è un bersaglio grande da toccare invece di una cella da centrare. =========================================================================== */ .elenco-conti{display:flex;flex-direction:column;gap:8px;margin-top:12px} .riga-conto{display:flex;align-items:center;justify-content:space-between;gap:12px; width:100%;min-height:58px;padding:10px 14px;text-align:left;cursor:pointer; border:1px solid var(--linea);border-radius:12px;background:var(--sup);font:inherit} .riga-conto.statica{cursor:default} .riga-conto:not(.statica):hover{border-color:var(--oro);box-shadow:var(--ombra)} .riga-conto.vecchio{border-left:3px solid var(--warn)} .riga-conto.spento{opacity:.55} .rc-chi{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .rc-chi b{font-family:var(--titolo);font-weight:500;font-size:15px;letter-spacing:.01em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rc-chi small{font-size:11.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .rc-tot{flex:none;font-family:var(--titolo);font-weight:500;font-size:19px; font-variant-numeric:tabular-nums;color:var(--warn)} .rc-tot.chiuso{color:var(--ink2)} .rc-azioni{display:flex;gap:6px;flex:none} /* =========================================================================== TELEFONO E TABLET Il magazzino si conta in piedi davanti a uno scaffale e il bar si batte con una mano sola dietro il bancone: lo schermo piccolo non è il caso limite, è il caso normale. Qui sotto tre regole, applicate ovunque: · nessun bersaglio sotto i 44 px, che è il polpastrello; · niente scorrimento laterale della pagina — se una cosa è larga, scorre lei dentro il suo riquadro; · campi di testo mai sotto i 16 px, se no iPhone ingrandisce la pagina da solo appena ci si tocca dentro e si perde il segno. =========================================================================== */ @media (max-width: 900px) { /* Titolo e pulsanti vanno a capo invece di stringersi. */ .barra-titolo{flex-wrap:wrap;gap:8px} .barra-titolo > div{display:flex;gap:8px;flex-wrap:wrap} .filtri{flex-wrap:wrap;gap:8px} .filtri > *{flex:1 1 46%;min-width:0} .filtri .spinta{flex-basis:100%} .griglia.due,.griglia.tre,.pannello .tre{grid-template-columns:1fr} .riga-campi{grid-template-columns:1fr} /* Le schede a linguetta scorrono da sole se non ci stanno. */ .linguette,.tab-riga{overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none;flex-wrap:nowrap} .linguette::-webkit-scrollbar,.tab-riga::-webkit-scrollbar{display:none} .linguette .linguetta,.tab-riga button{flex:none;min-height:44px} } @media (pointer: coarse) { /* Col dito: 44 px è il minimo sotto cui si sbaglia bersaglio. */ .btn,.linguetta,.voce,.voce-m,.rep,.riga-conto,.conta-tile,.banco-tile, select,input[type=date],input[type=number],input[type=text],input[type=search], input:not([type]),button{min-height:44px} .btn.sm{min-height:40px;padding:8px 14px;font-size:13.5px} .rc-azioni .btn.sm,.azioni-vecchia .btn.sm{min-height:40px} input,select,textarea{font-size:16px} /* niente zoom automatico su iPhone */ .modale-corpo input,.modale-corpo select,.modale-corpo textarea{font-size:16px} table td,table th{padding:11px 10px} .op-riga,.scelta-riga{min-height:52px} } @media (max-width: 560px) { body{font-size:15px} h2{font-size:19px} .vista{padding:12px 12px 96px} /* spazio per la barra in basso */ .card{padding:12px} .riepilogo .r,.soldi .r{font-size:14px} /* La finestra diventa un foglio che sale dal basso: è il gesto che la gente si aspetta sul telefono, e lascia il pollice vicino ai pulsanti. */ .modale{align-items:flex-end} .modale-corpo{width:100%;max-width:100%;max-height:92vh;border-radius:16px 16px 0 0; padding:16px 14px calc(16px + env(safe-area-inset-bottom))} .modale-corpo h2{font-size:19px;padding-right:34px} .bottoni{flex-direction:column-reverse;gap:8px} .bottoni .btn,.bottoni a.btn{width:100%;justify-content:center} .testa-conto{padding-right:34px} .totale-conto{text-align:left} .riga-vecchia{flex-direction:column;align-items:stretch;gap:8px} .azioni-vecchia .btn{flex:1} .rc-tot{font-size:18px} .filtri > *{flex-basis:100%} .pagine{gap:14px} .pagine .btn{flex:1;max-width:80px} } /* Il riquadro che scorre deve poter diventare più stretto del suo contenuto. Dentro un flex o un grid gli elementi non scendono sotto la larghezza del contenuto se non glielo si dice: senza `min-width:0` la tabella allarga la scheda, la scheda allarga la pagina, e il telefono si trova a scorrere tutto di lato invece della sola tabella. */ .scorri{max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch} .card,.pannello,.griglia > *,.vista > *{min-width:0} .scorri table{min-width:max-content} @media (pointer: coarse) { /* Le caselle si toccano col dito: il bersaglio vero è l'etichetta intera, ma il pallino deve comunque vedersi. */ input[type=checkbox],input[type=radio]{width:22px;height:22px;min-height:22px;flex:none} .opzione,.interruttore,.scelta-riga{min-height:48px;align-items:center} /* Il riquadro che scorre di lato lo si deve capire: un'ombra sul bordo. */ .scorri{background: linear-gradient(90deg, var(--sup) 30%, rgba(0,0,0,0)) left/28px 100% no-repeat, linear-gradient(270deg, var(--sup) 30%, rgba(0,0,0,0)) right/28px 100% no-repeat, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), rgba(0,0,0,0)) left/12px 100% no-repeat, radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), rgba(0,0,0,0)) right/12px 100% no-repeat; background-attachment:local, local, scroll, scroll} } /* Le righe del conto: ora · cosa · quanto, e la ✕ in fondo. */ .riga-cons{display:flex;align-items:center;gap:10px;padding:9px 2px; border-bottom:1px solid var(--linea)} .riga-cons:last-child{border-bottom:0} .cons-ora{flex:none;width:42px;font-size:12px;color:var(--ink3); font-variant-numeric:tabular-nums} .cons-cosa{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} .cons-cosa b{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .cons-cosa b em{font-style:normal;color:var(--info);font-weight:600} .cons-cosa small{font-size:11.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .cons-tot{flex:none;font-weight:600;font-size:14.5px;font-variant-numeric:tabular-nums} .cons-via{flex:none;padding:6px 10px} .riga-cons.annullata{opacity:.5} .riga-cons.annullata .cons-cosa b{text-decoration:line-through} .tot-conto-finale{display:flex;justify-content:space-between;align-items:baseline; margin-top:12px;padding-top:10px;border-top:2px solid var(--linea); font-family:var(--titolo);font-size:15px} .tot-conto-finale b{font-size:22px;font-variant-numeric:tabular-nums} /* Sul telefono la griglia dei prodotti è l'area di lavoro: si allarga. */ @media (max-width: 560px) { .griglia-conto{max-height:42vh;grid-template-columns:repeat(auto-fill,minmax(92px,1fr))} .griglia-conto .banco-tile img,.griglia-conto .banco-tile .senza-foto{height:50px} .banco-tile .bt-nome{min-height:3.4em;-webkit-line-clamp:3} } /* Un testo lungo dentro una riga flex non va a capo da solo: senza questo sporgeva fuori dallo schermo invece di andare su due righe. */ .opzione span,.interruttore span,.sr-testo,.rc-chi,.cons-cosa,.op-testo{min-width:0} .opzione span{overflow-wrap:anywhere} /* Un articolo senza prezzo di vendita non si può mettere su un conto: si vede prima di toccarlo, invece di scoprirlo col cliente davanti. */ .banco-tile.senza-prezzo{opacity:.6} .banco-tile .bt-prezzo.manca{color:var(--bad);font-weight:600} /* Le righe scelta sono spesso