/* L'attributo hidden nasconde un elemento tramite una regola del browser di priorita' bassissima: basta un display scritto nello stile in linea per annullarlo. Nel pannello c'erano tre elementi con hidden e display:flex insieme — il prezzo proposto da «Migliora con AI», la riga della corsia prioritaria e quella del compralo-subito in asta — e restavano visibili sempre, vuoti. Questa riga rende hidden davvero vincolante ovunque. */ [hidden]{display:none!important} *{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--testo)}header{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line);background:var(--carta-alta)}header h1{font-size:21px;margin:0;letter-spacing:0}header span{font-size:12px;color:var(--muted)}button,.primary-link{height:42px;border:0;border-radius:6px;padding:0 16px;background:var(--green);color:#fff;font:inherit;font-weight:750;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}button:disabled{opacity:.5;cursor:wait}.icon-button{width:42px;padding:0;background:#e9ece7;color:var(--ink);font-size:20px}.layout{display:grid;grid-template-columns:minmax(340px,430px) 1fr;min-height:calc(100vh - 68px)}aside{padding:20px;border-right:1px solid var(--line);background:var(--carta-alta)}.workspace{padding:20px;min-width:0}.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}label{display:block;font-size:13px;font-weight:750;margin:0 0 6px}input,textarea,select{width:100%;border:1px solid #bcc4ba;border-radius:6px;background:#fff;color:var(--ink);font:inherit;padding:9px 10px}input{height:40px}textarea{resize:vertical;line-height:1.45}.upload-section{margin:18px 0;padding-top:16px;border-top:1px solid var(--line)}.upload-section h2{font-size:15px;margin:0 0 4px}.upload-section p{font-size:13px;color:var(--muted);margin:0 0 10px}.photo-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.photo-actions label{height:42px;border:1px solid var(--line);border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0}.photo-actions input{display:none}.preview{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}.thumb{position:relative;aspect-ratio:1}.thumb img{width:100%;height:100%;object-fit:cover;border-radius:4px;border:1px solid var(--line)}.thumb button{position:absolute;right:2px;top:2px;width:24px;height:24px;padding:0;background:rgba(0,0,0,.72);font-size:14px}.message{font-size:13px;color:var(--muted);overflow-wrap:anywhere}.error{color:var(--red)}.warning{color:var(--amber)}.cost-card{margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--green);border-radius:6px;background:#fff;color:var(--muted);font-size:12px;line-height:1.35}.cost-card strong{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}nav{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}nav button{background:transparent;color:var(--muted);border-radius:0;padding:0 12px;border-bottom:3px solid transparent}nav button.active{color:var(--ink);border-color:var(--green)}.empty{border:1px dashed #aeb8ad;background:#fff;padding:28px;border-radius:7px;color:var(--muted)}article,#queuePanel{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:18px}.status-row{display:flex;justify-content:space-between;gap:12px;align-items:center}.status-row>div{display:flex;align-items:center;gap:10px}.badge{font-size:11px;font-weight:800;padding:5px 7px;border-radius:4px;background:#e7ece8}.progress{height:8px;background:var(--filo);margin:14px 0 20px;border-radius:4px;overflow:hidden}.progress span{display:block;height:100%;width:0;background:var(--green);transition:width .25s}.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px}.metrics div{padding:10px;border-left:3px solid var(--green);background:var(--carta)}.metrics span{display:block;font-size:11px;color:var(--muted)}.metrics strong{font-size:16px}#listingPanel>label,#listingPanel>.row,#listingPanel>input,#listingPanel>textarea{margin-top:12px}.commands{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.commands .secondary{background:#52605a}.commands .publish{background:var(--green)}#jobList{display:grid;gap:8px}.field-update-row{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}.field-update-row label,.field-update-row button{height:36px;padding:0 12px;border:1px solid var(--line);border-radius:6px;background:#fff;display:inline-flex;align-items:center;cursor:pointer;font-size:12px;font-weight:750;color:var(--muted)}.field-update-row button{border-color:transparent;background:#52605a;color:#fff}.field-update-row input{display:none}.job-row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px;border-bottom:1px solid var(--line);border-left:6px solid var(--filo);cursor:pointer}.job-row.status-blocked{border-left-color:var(--red);background:#fdf4f4}.job-row.status-review{border-left-color:var(--amber);background:#fdfaf1}.job-row.status-ready{border-left-color:var(--green);background:#f1f8f3}.job-row.status-published{border-left-color:var(--blue);background:#f0f6fc}.job-status-badge{display:inline-block;padding:3px 9px;border-radius:10px;font-size:11px;font-weight:800;background:#e7ece8;color:var(--muted);vertical-align:middle}.status-blocked .job-status-badge{background:var(--red);color:#fff}.status-review .job-status-badge{background:var(--amber);color:#fff}.status-ready .job-status-badge{background:var(--green);color:#fff}.status-published .job-status-badge{background:var(--blue);color:#fff}.job-row strong,.job-row span{display:block}.job-row span{font-size:12px;color:var(--muted)}.login{max-width:420px;margin:12vh auto;background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px}.login h1{font-size:24px;margin-top:0}.login button,.primary-link{width:100%;margin-top:14px}@media(max-width:1100px){.metrics{grid-template-columns:repeat(2,1fr)}}@media(max-width:850px){header{padding:0 16px}.layout{grid-template-columns:1fr}aside{border-right:0;border-bottom:1px solid var(--line);padding:16px}.workspace{padding:16px}.preview{grid-template-columns:repeat(4,1fr)}}@media(max-width:480px){.row{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr}.commands button{width:100%}.status-row{align-items:flex-start}.status-row>div{align-items:flex-start;flex-direction:column}.login{margin:0;min-height:100vh;border:0;border-radius:0;padding-top:18vh}} /* --- Correzioni mobile: la pagina non deve mai essere piu' larga dello schermo --- */ html,body{max-width:100%;overflow-x:hidden} .workspace,aside,main,section,article{min-width:0;max-width:100%} img{max-width:100%} /* Le schede (Libro corrente / Lavorazioni / Archivio / Andamento) non stanno in larghezza su telefono: scorrono orizzontalmente dentro la loro barra invece di allargare tutta la pagina. */ nav{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none} nav::-webkit-scrollbar{display:none} nav button{flex:none;white-space:nowrap} /* Titoli lunghi nelle righe elenco: vanno troncati, non allargano la riga. */ .job-row{max-width:100%} .job-row>div{min-width:0} .job-row strong{overflow:hidden;text-overflow:ellipsis} #archiveFilters{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none} #archiveFilters::-webkit-scrollbar{display:none} #archiveFilters button{flex:none;white-space:nowrap} @media(max-width:700px){ nav button{padding:0 10px;font-size:14px} /* Le righe di archivio e lavorazioni su telefono. Il difetto: la griglia «1fr auto» dava alla colonna dei pulsanti tutta la larghezza che le serviva — tre pulsanti affiancati sono circa 330 pixel — e al testo ne restavano quaranta, cioè una parola per riga. Su uno schermo stretto le due colonne non ci stanno: diventano due righe, prima il libro e sotto le azioni. */ .job-row{grid-template-columns:1fr;gap:8px;padding:12px 10px} .job-main{align-items:flex-start!important} /* Il titolo può usare due righe: a colonna piena una riga sola tagliava via proprio la parte che distingue un'edizione dall'altra. */ .job-row strong{white-space:normal!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3} .job-row .job-main span{white-space:normal!important;line-height:1.5} .job-actions{flex-wrap:wrap;flex:1 1 auto!important;gap:6px} /* Due pulsanti per riga, il terzo sotto a tutta larghezza. Restano alti abbastanza da centrarli col pollice senza sbagliare. */ .job-actions button{flex:1 1 auto;min-width:calc(50% - 3px);height:40px;padding:0 10px;font-size:13px} .job-actions input[type=checkbox]{flex:none;min-width:0;order:-1} /* Barra delle modifiche in massa: gli stessi tre pulsanti più il menu e il campo del valore, che affiancati non entrano in nessun telefono. */ #archiveBulkRow{gap:8px} #archiveBulkRow select,#archiveBulkRow input:not([type=checkbox]){flex:1 1 100%;width:100%;min-width:0} #archiveBulkRow button{flex:1 1 auto;min-width:calc(50% - 4px)} #archiveBulkRow>span{display:none} /* Confronto proposta AI: le due colonne una sotto l'altra. */ #improveCompare{grid-template-columns:1fr} } /* ============================================================ Tema eBay: palette ufficiale (blu var(--azione) come colore delle azioni, quattro colori del marchio per gli stati), sfondo bianco, pulsanti a pillola, testo quasi nero. ============================================================ */ :root{ /* ==================================================================== AUTOPUB — I TOKEN. Un posto solo. ==================================================================== Qui c'erano DUE blocchi :root. Il primo, una palette editoriale verde salvia, era scritto in cima e non ha mai avuto effetto: il secondo lo sovrascriveva poche righe dopo. E il secondo era var(--azione), var(--stato-ferma), var(--stato-guarda), var(--azione) — i quattro colori del marchio eBay. Autopub indossava la livrea del mercato su cui pubblica. Nessuno screenshot poteva dire "questo e' Autopub", perche' lo schermo diceva "questo e' eBay". ------------------------------------------------------------------ IL PRINCIPIO: IL COLORE COSTA. ------------------------------------------------------------------ L'interfaccia e' quasi interamente inchiostro su carta. Il colore compare in due soli posti: 1. LA COSTOLA — il bordo sinistro di ogni oggetto, che ne dichiara lo stato. Sempre li', mai altrove. 2. LE AZIONI CHE TOCCANO IL MONDO FUORI — pubblicare, chiudere, rilanciare. Se un pulsante e' colorato, muove soldi o tocca un marketplace. Tutto il resto e' grigio. Non per sobrieta': perche' su un catalogo da undicimila inserzioni l'occhio deve poter cercare il colore e trovarci solo cio' che conta. Un'interfaccia dove tutto e' colorato e' un'interfaccia dove niente lo e'. */ /* --- Carta e inchiostro ------------------------------------------ */ --carta:#F5F7FA; /* fondo: bianco caldo, non grigio freddo */ --carta-alta:#FFFFFF; /* superfici sollevate */ --carta-incassata:#F7F9FD;/* campi, zone di riposo */ --inchiostro:#10151F; /* testo principale */ --inchiostro-medio:#45536A; --inchiostro-tenue:#728096; --filo:#E3E9F1; /* linee: carta un po' piu' scura, mai grigio */ --filo-forte:#CFD9E8; /* --- Gli stati: sono i colori della COSTOLA, non del testo -------- */ --stato-fermo:#9AA7BC; /* niente da fare, in attesa */ --stato-lavora:#1E6B6B; /* in corso, va avanti da solo: verde-bluastro, distinto dal verde dell'azione, altrimenti in una riga non si distingue «va avanti da se'» da «qui si agisce» */ --stato-guarda:#B07E00; /* serve un occhio umano */ --stato-ferma:#C9252B; /* bloccato, qualcuno deve intervenire */ --stato-vivo:#1B3080; /* pubblicato, in vendita */ /* --- L'azione che tocca il mondo fuori ---------------------------- */ --azione:#2D55D4; --azione-premuta:#1E3FA8; --azione-tenue:#EAF0FF; /* I due accenti del v2, serviti a chi disegna spie, barre e grafici. Stanno qui e non scritti a mano nelle regole: una palette che cambia solo i bottoni non e' una palette. */ --acido:#86B817; --acido-cupo:#5E7A00; --acc3:#6E93FA; --indaco-velo:rgba(45,85,212,.10); --accR:45,85,212; --vivoR:134,184,23; --sc1:#0A1024; --sc2:#121E4A; --sc3:#1B3080; --vetro:rgba(255,255,255,.74); /* --- Compatibilita' con il codice esistente ----------------------- Centinaia di regole gia' scritte usano questi nomi. Puntano ai nuovi valori invece di essere cancellati: il nuovo linguaggio entra ovunque senza riscrivere ogni pagina in un colpo solo. */ --bg:var(--carta); --panel:var(--carta-alta); --ink:var(--inchiostro); --muted:var(--inchiostro-tenue); --line:var(--filo); --primary:var(--azione); --primary-dark:var(--azione-premuta); --red:var(--stato-ferma); --amber:var(--stato-guarda); --green:var(--azione); --green2:var(--azione-premuta); --blue:var(--stato-vivo); --amber-ink:var(--stato-guarda); /* --- La costola: lo spessore e' semantico ------------------------- */ --costola:3px; /* riga normale */ --costola-viva:5px; /* riga che chiede qualcosa */ /* --- Ritmo. Una sola scala, multipli di 4. ------------------------ */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; /* --- Geometria. Quasi squadrata: un registro non ha angoli tondi. - */ --raggio:4px; --raggio-grande:6px; /* --- Tipografia --------------------------------------------------- */ --testo:'DM Sans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; /* I titoli hanno una voce loro: Manrope, stretta e sicura di se'. Il v2 chiedeva Bricolage Grotesque; Manrope e' la scelta piu' recente, approvata con Nuovo libro, ed e' gia' ospitata qui. Due tipografie nella stessa applicazione non le vuole nessuno. */ --titoli:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif; /* Le CIFRE hanno un carattere loro, a larghezza fissa: prezzi, conteggi e date devono incolonnarsi da soli, senza tabelle che li allineino. */ --cifre:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --t-micro:11px; --t-piccolo:13px; --t-corpo:14px; --t-medio:16px; --t-grande:21px; --t-titolo:27px; /* --- Rilievo: quasi nullo. La profondita' la fa la linea. --------- */ --ombra:0 1px 2px rgba(22,24,28,.06); --ombra-alta:0 6px 20px rgba(22,24,28,.10); /* --- Movimento ---------------------------------------------------- */ --tempo:.16s; --curva:cubic-bezier(.2,.7,.3,1); } /* CHI NON VUOLE MOVIMENTO NON LO RICEVE. Non e' una cortesia: per alcune persone l'animazione provoca nausea, e il sistema operativo lo dichiara gia'. Qui si obbedisce, senza eccezioni e senza chiedere. */ @media (prefers-reduced-motion:reduce){ :root{--tempo:0s} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } /* Qui c'era "Market Sans": il carattere del marchio eBay, su tutta l'applicazione. Era l'ultimo pezzo della livrea rimasto in piedi dopo la ripulitura dei colori — e il piu' difficile da notare, perche' un carattere non si vede, si legge. Adesso e' DM Sans, ospitato qui. */ body{background:var(--bg);font-family:var(--testo);-webkit-font-smoothing:antialiased} /* Intestazione bianca con la striscia dei quattro colori eBay. */ header{background:#fff;border-bottom:1px solid var(--line);position:relative} header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px; background:linear-gradient(90deg,var(--stato-ferma) 0 25%,var(--azione) 25% 50%,var(--stato-guarda) 50% 75%,var(--azione) 75% 100%)} header h1{font-weight:800;letter-spacing:-.2px} /* Azioni: pillole blu, come i pulsanti eBay. */ button,.primary-link{background:var(--primary);border-radius:999px;font-weight:700;transition:background .15s} button:hover:not(:disabled),.primary-link:hover{background:var(--primary-dark)} .icon-button{border-radius:999px;background:#f2f3f7;color:var(--ink)} .icon-button:hover:not(:disabled){background:#e4e7ef} .commands .secondary,button.secondary{background:#fff;color:var(--primary);border:1px solid var(--primary)} .commands .secondary:hover:not(:disabled),button.secondary:hover:not(:disabled){background:#eef2fe} .commands .publish{background:var(--primary)} .publication-channels{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:11px 12px;border:1px solid var(--line);border-radius:7px;background:#f8faf7} .publication-channels strong{font-size:13px}.publication-channels label{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:650}.publication-channels input{width:auto;height:auto}.publication-channels button{height:34px;width:auto;padding:0 12px}.publication-channels small{flex-basis:100%;color:var(--muted);line-height:1.4} .publication-channels .publication-select-all{padding-right:12px;border-right:1px solid var(--line);font-weight:750} .commands .publish:hover:not(:disabled){background:var(--primary-dark)} aside{background:#fff;border-right:1px solid var(--line)} input,textarea,select{border:1px solid #c7c7c7;border-radius:8px} input:focus,textarea:focus,select:focus{outline:2px solid var(--primary);outline-offset:-1px;border-color:var(--primary)} /* Schede: sottolineatura blu eBay. */ nav button{background:transparent;color:var(--muted);border-radius:0;font-weight:700} nav button:hover:not(:disabled){background:transparent;color:var(--ink)} nav button.active{color:var(--ink);border-color:var(--primary)} .badge{background:#eef2fe;color:var(--primary-dark);border-radius:999px;padding:5px 10px} .progress span{background:var(--primary)} .metrics div{border-left:3px solid var(--primary);background:#f7f8fb;border-radius:0 8px 8px 0} .cost-card{border-left:3px solid var(--primary);border-radius:8px} .job-status-badge{border-radius:999px;background:#eef0f2} /* I quattro colori del marchio distinguono gli stati delle lavorazioni. */ .status-review .job-status-badge{background:var(--amber);color:#3d2b00} .warning{color:var(--amber-ink)} .job-row{border-radius:8px;background:#fff;border-bottom:1px solid var(--line)} .job-row.status-blocked{background:#fef4f4} .job-row.status-review{background:#fffaef} .job-row.status-ready{background:#f6faee} .job-row.status-published{background:#f2f5fe} .price-details{border-radius:8px;border-color:var(--line)} .rilancio-blocchi{display:grid;gap:8px;margin-top:12px} .rilancio-blocco{display:grid;grid-template-columns:72px minmax(120px,1fr) minmax(120px,1fr) auto;gap:10px;align-items:end;padding:10px 0;border-bottom:1px solid var(--line)} .rilancio-blocco:last-child{border-bottom:0} .rilancio-usa{display:flex;align-items:center;gap:7px;height:40px;margin:0} .rilancio-usa input{width:auto;height:auto;margin:0} .rilancio-blocco-elimina{width:auto;min-width:88px;margin-bottom:0} .rilancio-comandi{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .rilancio-comandi button{width:auto} .relaunch-panel{margin:18px 0!important;border:1px solid #cbdccf!important;background:#fcfefc} .relaunch-panel>summary{padding:16px 18px;border-left:4px solid transparent} .relaunch-panel.rilancio-attivo>summary{background:#e8f1ea;color:var(--green);border-left-color:var(--green);font-weight:800} .relaunch-panel.rilancio-attivo>summary::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:var(--green);vertical-align:1px} .relaunch-panel>form,.relaunch-panel>.rilancio-stato,.relaunch-panel>details{margin-left:18px;margin-right:18px} .rilancio-stato{margin-top:14px;margin-bottom:14px;padding:10px 12px;border-left:3px solid var(--green);background:#f2f7f3;color:#365243;font-size:13px;line-height:1.45} .relaunch-panel .rilancio-attivazione-avviso{padding:10px 12px;border-left:3px solid var(--amber);background:#fdf7e8;color:#6d5312;font-size:13px;line-height:1.45} .rilancio-criteri{min-width:0;margin:16px 0 8px;padding:0;border:0} .rilancio-criteri legend,.rilancio-orari-titolo{margin:0 0 8px;padding:0;font-size:14px;font-weight:800;color:var(--ink)} .rilancio-strategie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:8px;overflow:hidden} .rilancio-strategie label{position:relative;margin:0;padding:10px 12px;border-right:1px solid var(--line);cursor:pointer;background:#fff} .rilancio-strategie label:last-child{border-right:0} .rilancio-strategie input{position:absolute;opacity:0;pointer-events:none} .rilancio-strategie span{display:block;font-size:13px;font-weight:750;line-height:1.25} .rilancio-strategie small{display:block;margin-top:3px;color:var(--muted);font-size:11px;font-weight:500} .rilancio-strategie label:has(input:checked){background:#edf3ff;color:var(--primary);box-shadow:inset 0 -3px 0 var(--primary)} .rilancio-strategie label:focus-within{outline:2px solid var(--primary);outline-offset:-2px} .rilancio-strategia-testo{margin:8px 0 0!important} .rilancio-personalizzato{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)} .rilancio-personalizzato[hidden]{display:none} .rilancio-personalizzato label{font-size:12px} .rilancio-personalizzato input,.rilancio-personalizzato select{margin:4px 0 0} .rilancio-protezioni{margin:10px 0 16px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fafbfc} .rilancio-protezioni summary{font-size:13px;font-weight:750;cursor:pointer} .rilancio-protezioni p{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.55} .rilancio-orari-titolo{margin-top:14px} @media(max-width:760px){.rilancio-strategie{grid-template-columns:1fr 1fr}.rilancio-strategie label:nth-child(2){border-right:0}.rilancio-strategie label:nth-child(-n+2){border-bottom:1px solid var(--line)}.rilancio-personalizzato{grid-template-columns:1fr}.rilancio-blocco{grid-template-columns:64px 1fr 1fr}.rilancio-blocco-elimina{grid-column:2/4;justify-self:start}} /* Catalogo e Andamento sono le due superfici operative del negozio. La testata orienta, i filtri restringono il lavoro e i comandi tecnici restano secondari finche' non vengono richiesti. */ .operational-panel{min-width:0} .panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin:0 0 6px} .panel-head h2{margin:0 0 3px;font-size:22px;letter-spacing:0} .panel-meta{margin:0;color:var(--muted);font-size:12px;line-height:1.45} .panel-intro{max-width:78ch;margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.55} .panel-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .panel-actions button{width:auto;height:38px;padding:0 14px;font-size:13px} .catalog-controls{display:grid!important;grid-template-columns:minmax(220px,1fr) minmax(190px,auto);gap:8px;margin:8px 0 10px!important} .catalog-controls input,.catalog-controls select{margin:0} .catalog-filters{display:flex;gap:2px;margin:0 0 12px;padding-bottom:0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none} .catalog-filters::-webkit-scrollbar{display:none} .catalog-filters button{flex:none;width:auto!important;height:38px;padding:0 13px;border:0!important;border-bottom:3px solid transparent!important;border-radius:0!important;background:transparent!important;color:var(--muted)!important;white-space:nowrap} .catalog-filters button:hover{color:var(--ink)!important;background:#f5f6f8!important} .catalog-filters button.active{color:var(--ink)!important;border-bottom-color:var(--primary)!important} .catalog-filters button span{font-size:11px;color:var(--muted);font-weight:600} .catalog-bulk{position:sticky;top:0;z-index:12;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 8px;padding:10px 12px;border:1px solid #cbd5f3;border-radius:8px;background:rgba(247,249,255,.98);box-shadow:0 6px 18px rgba(25,25,25,.06)} .catalog-bulk label{display:flex;gap:7px;align-items:center;margin:0;font-size:13px} .catalog-bulk label input{width:auto;height:auto;margin:0} .catalog-bulk strong{font-size:13px;color:var(--primary-dark)} .catalog-bulk-spacer{flex:1} .catalog-bulk select{width:auto;min-width:160px} .catalog-bulk>input{width:88px} .catalog-bulk button{width:auto;height:38px;font-size:13px} .catalog-bulk:not(.has-selection){box-shadow:none} .catalog-bulk-note{margin:0 0 10px;color:var(--muted);font-size:12px;line-height:1.45} .danger-secondary,.catalog-more .danger-link{background:#fff!important;color:var(--red)!important;border:1px solid #edb8ba!important} .danger-secondary:hover,.catalog-more .danger-link:hover{background:#fdf1f1!important} .catalog-list{display:grid;gap:6px} .catalog-row{cursor:default;border:1px solid var(--line);border-left-width:4px;padding:10px 12px} .catalog-row.diagnosis-rifai{border-left-color:var(--red)} .catalog-row.diagnosis-modifica{border-left-color:var(--amber)} .catalog-row.diagnosis-ok{border-left-color:var(--green)} .catalog-cover{width:48px;height:64px;object-fit:cover;border-radius:4px;flex:none;background:#eceeea;border:1px solid var(--line)} .catalog-state{font-size:11px;font-weight:800} .catalog-state.bad{color:var(--stato-ferma)}.catalog-state.review{color:var(--stato-guarda)}.catalog-state.good{color:var(--azione-premuta)} .catalog-actions{display:flex;align-items:center;gap:6px;flex:none} .catalog-actions>button{height:36px;padding:0 14px;font-size:13px} .catalog-more{position:relative} .catalog-more>summary{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1px solid var(--primary);border-radius:999px;color:var(--primary);font-size:13px;font-weight:700;cursor:pointer;list-style:none;white-space:nowrap} .catalog-more>summary::-webkit-details-marker{display:none} .catalog-more[open]>summary{background:#eef2fe} .catalog-more>div{position:absolute;right:0;top:42px;z-index:20;display:grid;gap:6px;width:190px;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 12px 30px rgba(25,25,25,.16)} .catalog-more button{width:100%;height:36px;font-size:13px} .progressive-load{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:10px 0;color:var(--muted);font-size:12px} .progressive-load button{width:auto;height:36px;flex:none;font-size:13px} .catalog-progressive-load{position:sticky;bottom:0;z-index:9;margin-top:2px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.97);box-shadow:0 -8px 22px rgba(25,25,25,.06);backdrop-filter:saturate(140%) blur(5px)} .report-panel>div,.report-panel>section{min-width:0} .report-overview>h3,.report-attention>h3{margin:18px 0 8px;font-size:15px} .report-overview>h3:first-child{margin-top:12px} .report-kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px} .report-kpis div{min-height:72px;padding:12px 14px} .report-kpis strong{font-size:20px} .report-needs{margin:0 0 18px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .report-needs h3{margin:0 0 9px;font-size:15px} .report-need-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px} .report-need-buttons button{height:auto;min-height:62px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);text-align:left;justify-content:flex-start;gap:9px} .report-need-buttons button:hover{background:#f7f8fb} .report-need-buttons strong{font-size:22px;color:var(--red)} .report-need-buttons button:nth-child(2) strong{color:var(--amber-ink)} .report-need-buttons span{font-size:13px;font-weight:700} .report-attention{margin:0 0 16px;padding:0 0 8px;border-bottom:1px solid var(--line)} .report-attention-summary{margin:0 0 8px;color:var(--muted);font-size:13px} .disappeared-notice{margin:0 0 10px;padding:8px 10px;border-left:3px solid var(--green);background:#f2f7f3;color:#365243;font-size:12px;line-height:1.45} .report-fold{margin-top:10px!important} .report-fold>summary,.report-tools>summary{font-size:14px;font-weight:750} .report-ranking-row{display:flex;justify-content:space-between;align-items:center;gap:12px} .report-ranking-row>div{min-width:0} .report-ranking-row button{width:auto;height:34px;flex:none;font-size:12px} .report-tools{margin-top:10px} .report-tools .hint{font-size:13px;color:var(--muted);line-height:1.5} .report-tool-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px} .report-tool-actions select{width:auto;min-width:260px} .report-tool-actions button,.report-tool-actions .scarica{width:auto;min-height:38px;padding:0 14px} .report-tool-actions .scarica{display:inline-flex;align-items:center;border:1px solid var(--primary);border-radius:999px;color:var(--primary);font-size:13px;font-weight:700;text-decoration:none} .report-tool-actions .scarica:hover{background:#eef2fe} @media(max-width:700px){ .rilancio-blocco{grid-template-columns:1fr 1fr} .rilancio-usa{order:3} .rilancio-blocco-elimina{order:4;justify-self:end} .panel-head{align-items:stretch} .panel-head>div:first-child{flex:1 1 100%} .panel-actions{width:100%} .panel-actions button{flex:1 1 auto} .catalog-controls{grid-template-columns:1fr!important} .catalog-bulk{position:static} .catalog-bulk select,.catalog-bulk>input{flex:1 1 100%;width:100%;min-width:0} .catalog-bulk-spacer{display:none} .catalog-row{padding:10px 8px} .catalog-actions{align-items:stretch} .catalog-actions>button,.catalog-actions>.catalog-more{flex:1 1 calc(50% - 3px)} .catalog-more>summary{justify-content:center;width:100%} .catalog-more>div{position:static;width:100%;margin-top:6px;box-shadow:none} .progressive-load{align-items:stretch;flex-direction:column} .progressive-load button{width:100%} .report-kpis{grid-template-columns:1fr 1fr} .report-need-buttons{grid-template-columns:1fr} .report-ranking-row{align-items:flex-start} .report-tool-actions select{width:100%;min-width:0} } /* Dashboard iniziale: una lista di decisioni, non una pagina marketing. I numeri principali sono grandi quanto basta per orientarsi, mentre il testo resta operativo: che cosa è successo e dove andare dopo. */ .dashboard-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin:0 0 14px} .dashboard-head h2{margin:0 0 4px} .dashboard-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.5} .dashboard-grid{margin:0 0 18px} .dashboard-grid h3,.dashboard-leads h3{font-size:15px;margin:0 0 8px} .dashboard-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px} .dashboard-card{display:block;text-align:left;border:1px solid var(--line);border-radius:8px;background:#fff;padding:13px 14px;min-height:112px} .dashboard-card span{display:block;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase} .dashboard-card strong{display:block;color:var(--ink);font-size:28px;line-height:1.15;margin:8px 0 6px} .dashboard-card small{display:block;color:var(--muted);font-size:13px;line-height:1.4} button.dashboard-card{height:auto;color:inherit;font:inherit;cursor:pointer} button.dashboard-card:hover{border-color:var(--primary);background:#f7f9ff} .dashboard-actions .dashboard-card strong{color:var(--primary)} .dashboard-card-admin{max-width:520px;background:#fafbfc} /* Primi passi, al posto del pannello vuoto. Un libraio nuovo trovava «Carica le fotografie del primo libro», lo faceva, e scopriva solo al momento di pubblicare che eBay non era collegato: analisi spese per un muro che si vedeva dall'inizio. Qui i due passi sono in ordine e il primo si spunta da solo appena il collegamento c'è. */ .passi{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px;text-align:left} .passi li{display:flex;gap:12px;align-items:flex-start} .passi .segno{flex:none;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px} .passi li.fatto .segno{background:var(--green);font-size:15px} .passi li.fatto strong{color:var(--muted);font-weight:600} .passi li.fatto .azione,.passi li.fatto span:not(.segno):not(.esito){display:none} .passi strong{display:block;color:var(--ink);font-size:15px;margin-bottom:2px} .passi span{display:block;font-size:13px;line-height:1.5;color:var(--muted)} .passi .esito{color:var(--green2);font-weight:700} .passi .omaggio{margin-top:6px;color:#7a4a00;background:#fff7e6;border:1px solid #f0d9a8;border-radius:8px;padding:7px 9px} .passi .azione{display:inline-flex;align-items:center;height:38px;padding:0 15px;margin-top:8px;border-radius:999px;background:var(--primary);color:#fff;font-size:14px;font-weight:700;text-decoration:none} /* Comandi sulle miniature, prima che l'analisi parta. La rotazione qui è solo apparenza: gira la vera il server sull'originale, perché ricomprimere una foto da dodici megapixel dentro un telefono significa perdere qualità e a volte finire la memoria. */ .thumb img{transition:transform .15s} .thumb .togli{position:absolute;right:2px;top:2px} .thumb-barra{position:absolute;left:2px;bottom:2px;display:flex;gap:3px} .thumb-barra button{position:static;width:24px;height:24px;padding:0;background:rgba(0,0,0,.72);color:#fff;font-size:13px;border-radius:4px;line-height:1} .thumb-prima{position:absolute;left:0;right:0;top:0;background:rgba(54,101,243,.92);color:#fff;font-size:10px;font-weight:800;text-align:center;padding:2px 0;border-radius:4px 4px 0 0;letter-spacing:.03em;text-transform:uppercase} /* Sul telefono i comandi vanno presi col pollice: le miniature sono più grandi e i pulsanti pure, altrimenti si preme «togli» invece di «ruota». */ @media(max-width:700px){ .preview{grid-template-columns:repeat(3,1fr);gap:8px} .thumb-barra button,.thumb .togli{width:30px;height:30px;font-size:15px} } /* Schede comprese dal pacchetto Standard in su: si vedono, ma non si aprono. Nasconderle del tutto sarebbe peggio — il cliente non saprebbe che esistono, e la ragione per salire di pacchetto va vista, non intuita. */ nav button.scheda-chiusa{opacity:.55;cursor:pointer} nav button.scheda-chiusa:hover{opacity:.8} /* Scheda Download: i file che Autopub produce e il libraio porta altrove. Sta nel pannello e non fra le impostazioni perché è un'operazione che si ripete ogni settimana, non una cosa che si configura una volta sola. */ .riquadro-download{border:1px solid var(--filo);border-radius:12px;padding:18px 20px;background:#fafbfa;max-width:720px} .riquadro-download h3{font-size:16px;margin:0 0 6px} .riquadro-download h3+.spiega{margin-top:0} .riquadro-download .spiega{color:var(--inchiostro-tenue);font-size:13px;line-height:1.6;margin:0 0 12px} .riquadro-download .job-row{background:#fff} /* Le schede sono diventate cinque e su telefono non ci stanno: la barra scorre, ma la sua barra di scorrimento è nascosta (scrollbar-width:none). Nascondere insieme lo scorrimento e il suo indicatore è esattamente il difetto che avevamo già avuto sulla barra laterale dell'account, dove otto voci su nove erano invisibili e nessuno poteva saperlo. Una sfumatura sul bordo destro costa tre righe e dice che c'è dell'altro. */ nav{position:relative;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)} /* I TRE PREZZI: via veloce, mercato, massimo. Tre bottoni sopra la casella del prezzo, quello di mezzo gia' scelto. Non sostituiscono la casella: chi ha in mano il libro scrive la cifra che vuole, e appena la scrive nessuno dei tre resta acceso — perche' il prezzo e' il suo, non piu' uno dei nostri. */ .price-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px} .price-choice button{height:auto;padding:7px 4px;flex-direction:column;gap:2px; background:#fff;color:var(--ink);border:1px solid #bcc4ba;font-weight:750;font-size:15px} .price-choice button small{font-size:10px;font-weight:750;letter-spacing:.04em; text-transform:uppercase;color:var(--muted)} .price-choice button[aria-pressed="true"]{background:var(--green);color:#fff;border-color:var(--green)} .price-choice button em{font-size:9.5px;font-style:normal;font-weight:600;color:var(--muted);line-height:1.2} .price-choice button[aria-pressed="true"] small,.price-choice button[aria-pressed="true"] em{color:#cfe0d5} .price-choice button:disabled{opacity:.45;cursor:not-allowed} @media(max-width:360px){.price-choice button{font-size:14px}} /* Scheda libro: prima delle caselle lunghe serve una fotografia delle decisioni gia' prese. Non e' un riassunto per fare scena: e' il posto dove il libraio vede subito che cosa e' pronto e che cosa va completato prima di eBay. */ /* La scheda di un libro e' lunga per forza. Quello che la rende illeggibile non e' la lunghezza ma il fatto che tutto pesi uguale: fondo bianco, campi bianchi, nessun confine. Un fondo appena grigio fa esistere i blocchi, e il libraio smette di scorrere in cerca di dove guardare. */ #listingPanel{background:#f2f3f0;padding:14px;border-radius:14px} #listingPanel .blocco{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 12px} #listingPanel .blocco>h3{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 12px} #listingPanel .blocco>label:first-of-type{margin-top:0} .blocco-testa{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap} .blocco-testa h3{margin:0} /* Leggere e' il modo normale, scrivere e' una scelta: il titolo si presenta come testo, non come compito da svolgere. */ .apri-modifica{background:none;border:0;padding:0;width:auto;min-width:0;color:#1f6feb;font-size:13px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px} .lettura-titolo{margin:0;font-size:17px;line-height:1.35;color:var(--ink);font-weight:700} .lettura-titolo:empty::before{content:'da completare';color:var(--muted);font-weight:400} .viste{display:inline-flex;background:#eceee9;border-radius:9px;padding:2px;gap:2px} .viste .vista{background:none;border:0;width:auto;min-width:0;padding:5px 12px;border-radius:7px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer} .viste .vista.attiva{background:#fff;color:#1f6feb;box-shadow:0 1px 2px rgba(0,0,0,.08)} /* L'anteprima mostra la descrizione come la legge il compratore. Il sorgente in una casella di testo fa sembrare una scheda catalografica anche una descrizione scritta bene. */ .anteprima{font-size:14px;line-height:1.6;color:var(--ink)} .anteprima p{margin:0 0 10px} .anteprima p:last-child{margin-bottom:0} .anteprima strong{font-weight:800} .anteprima:empty::before{content:'da completare';color:var(--muted)} .prezzo-grande{margin:0;font-size:30px;font-weight:800;letter-spacing:-.6px;color:var(--ink);line-height:1.1} .prezzo-invito{display:block;color:var(--muted);font-size:12px;margin:2px 0 8px} .avviso-prezzo{margin:8px 0 0;color:#a3231a;font-size:13px;line-height:1.45} /* In fondo, senza riquadro: non e' una cosa su cui agire, e' lo scontrino di quello che e' successo. Il prezzo che avevamo proposto accanto a quello pubblicato e' il numero che dice se la proposta somiglia al tuo giudizio. */ .dettagli{margin:4px 2px 12px;font-size:13px} .dettagli h4{margin:12px 0 6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .dettagli h4:first-child{margin-top:0} .dettagli .riga{display:flex;justify-content:space-between;gap:16px;padding:4px 0;color:var(--ink)} .dettagli .riga span{color:var(--muted)} .dettagli .assente{font-style:italic;color:var(--muted)} /* Le azioni della scheda devono restare raggiungibili mentre si controllano titolo, descrizione e condizioni: niente pulsanti da rincorrere in fondo a una pagina lunga. */ #listingPanel{padding-bottom:74px} #listingPanel .commands{position:sticky;bottom:0;z-index:20;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center;margin:14px -14px -14px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line);border-radius:0 0 14px 14px;box-shadow:0 -10px 28px rgba(25,25,25,.07);backdrop-filter:saturate(140%) blur(6px)} #listingPanel .commands button{width:auto;min-width:0;height:38px;padding:0 16px;font-size:13px} #listingPanel .commands .secondary{border-color:#dcdfd9;color:#4a4a4a;background:#fff;font-weight:700} #listingPanel .commands .publish{min-width:170px;height:42px;font-size:15px;font-weight:800} #listingPanel>p.message{margin:0 0 6px;padding:0 2px} #failurePanel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:12px} @media(max-width:700px){ #listingPanel{padding-bottom:110px} #listingPanel .commands{justify-content:stretch} #listingPanel .commands{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-left:-18px;margin-right:-18px} #listingPanel .commands button{width:100%;min-width:0} } /* ---------------------------------------------------------------- telefono Su schermo stretto le cornici si sommano: il riquadro grigio del pannello, il riquadro bianco del blocco, il riquadro del campo dentro. Tre bordi per arrivare a una casella larga meno di dieci centimetri, e il testo che resta dentro e' un francobollo. Su telefono il blocco tiene solo una riga di separazione e va a tutta larghezza: lo spazio serve alle parole. */ /* Le parole del titolo come interruttori. Cercare fra i venduti e' un gesto che il libraio fa gia' a mano, in un'altra scheda del browser, ritagliando il titolo a mano: qui le parole sono gia' li' e si tolgono con un dito. */ .venduti{margin-top:10px;border-top:1px solid #f0f2ef;padding-top:10px} .venduti-invito{margin:0 0 8px;color:var(--muted);font-size:12px} .venduti-parole{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .venduti-parole button{width:auto;min-width:0;height:30px;padding:0 10px;font-size:13px;font-weight:700;border-radius:8px;border:1px solid #cdd4ca;background:#fff;color:var(--muted);cursor:pointer} .venduti-parole button.accesa{border-color:var(--primary);color:var(--primary);background:#eef3fb} .venduti-azioni{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .venduti-azioni button{width:auto;min-width:0;height:36px;padding:0 14px;font-size:13px} .venduti-azioni .terzo{background:none;border:0;color:var(--muted);text-decoration:underline;text-underline-offset:2px;padding:0;font-weight:700} .venduti-esito{margin:8px 0 0;font-size:12px;color:var(--muted);min-height:1em} .specifiche{display:flex;flex-direction:column;gap:6px} .specifica{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 30px;gap:6px;align-items:center} .specifica input{height:36px;font-size:13px} .specifica .togli{width:30px;min-width:0;height:30px;padding:0;border:0;background:none;color:var(--muted);font-size:17px;line-height:1;cursor:pointer} .specifica .togli:hover{color:var(--red)} .specifiche-nota{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.45} .specifiche:empty+.specifiche-nota{margin-top:0} nav .icona{display:none} nav .voce-breve{display:none} nav button .pallino{display:none} .porta-scarica{margin:18px 0 0} /* Il riquadro del telefono. Non e' un avviso e non e' un errore: e' una domanda, e deve sembrare una domanda. Per questo niente rosso, niente bordo spesso, e il «non adesso» visibile quanto il «salva». */ .carta-telefono{ margin:0 0 18px;padding:16px 18px;border:1px solid var(--line); border-radius:12px;background:#fff} .carta-telefono h3{margin:0 0 6px;font-size:16px} .carta-telefono>p{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--muted);max-width:52ch} .carta-telefono .riga-telefono{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .carta-telefono .riga-telefono input{flex:1 1 200px;min-width:0;margin:0} .carta-telefono .riga-telefono button{width:auto;min-width:0;padding:0 18px;margin:0} .carta-telefono .consenso{ display:flex;gap:9px;align-items:flex-start;margin:12px 0 0; font-size:13px;line-height:1.5;font-weight:400;color:var(--ink)} .carta-telefono .consenso input{width:auto;height:auto;margin:3px 0 0;flex:none} .carta-telefono .terzo{ width:auto;min-width:0;height:auto;margin:10px 0 0;padding:0; background:none;border:0;color:var(--muted);font-size:13px;text-decoration:underline} .carta-telefono .message{margin:10px 0 0} /* Due quadrati affiancati, non due barre: in colonna, su telefono, occupavano mezzo schermo per dire due parole. */ .upload-section .photo-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:180px} .upload-section .photo-actions label{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; aspect-ratio:1;height:auto;min-height:0;width:auto;margin:0;padding:0;border:1.5px dashed var(--line);border-radius:12px; background:#fff;color:var(--primary);font-size:12px;font-weight:700;cursor:pointer;text-align:center;line-height:1.25} .upload-section .photo-actions label:hover{border-color:var(--primary);background:#f7f9ff} .upload-section .photo-actions label:focus-within{outline:2px solid var(--primary);outline-offset:2px} .upload-section .photo-actions label svg{width:22px;height:22px} .upload-section .cosa{margin:0 0 8px;font-size:14px;line-height:1.55} /* Il COME si apre solo a chi serve: la frase sopra dice gia' cosa mettere. */ .upload-section .come{margin:0 0 12px} .upload-section .come>summary{ cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px; font-size:13px;font-weight:700;color:var(--primary)} .upload-section .come>summary::-webkit-details-marker{display:none} .upload-section .come>summary::before{content:'\25B8';font-size:11px;transition:transform .15s} .upload-section .come[open]>summary::before{transform:rotate(90deg)} .upload-section .come>p{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--muted)} @media (prefers-reduced-motion:reduce){.upload-section .come>summary::before{transition:none}} /* Le tre dichiarazioni e il codice di magazzino stanno sotto le foto, in un blocco chiuso: il gesto e' fotografare, e il resto sono rifiniture che si fanno dopo, se si fanno. */ .dettagli-libro{border:1px solid var(--line);border-radius:12px;background:#fff;margin:16px 0 4px} .dettagli-libro>summary{ cursor:pointer;list-style:none;padding:13px 15px;font-weight:700;font-size:14px; display:flex;align-items:center;gap:9px;color:var(--ink);border-radius:12px} .dettagli-libro>summary::-webkit-details-marker{display:none} .dettagli-libro>summary::before{content:'\25B8';color:var(--primary);font-size:12px;transition:transform .15s} .dettagli-libro[open]>summary::before{transform:rotate(90deg)} .dettagli-libro[open]>summary{border-bottom:1px solid var(--line);border-radius:12px 12px 0 0} .dettagli-libro .dentro{padding:4px 15px 16px} .dettagli-libro .dentro>label:first-child{margin-top:8px} @media (prefers-reduced-motion:reduce){.dettagli-libro>summary::before{transition:none}} .porta-scarica button{width:auto;min-width:0;height:38px;padding:0 16px;font-size:13px} nav button[data-view="nuovo"]{display:none} @media(max-width:700px){ #listingPanel{background:transparent;padding:0 0 96px;border-radius:0} #listingPanel .blocco{border-left:0;border-right:0;border-radius:0;margin:0 0 10px;padding:14px 0;box-shadow:none;border-top:0} #listingPanel .blocco+.blocco{border-top:1px solid var(--line)} #listingPanel .blocco>h3{margin-bottom:10px} /* Cinque riquadri in colonna per dire cinque numeri corti: due per riga bastano, e il blocco smette di occupare mezzo schermo. */ .metrics{grid-template-columns:1fr 1fr;gap:8px} .metrics div{padding:8px 10px} /* I quattro comandi di rilettura erano quattro barre a tutta larghezza una sotto l'altra: sono strumenti, non azioni principali. */ .field-update-row{display:grid;grid-template-columns:1fr 1fr;gap:6px} .field-update-row button,.field-update-row label{width:100%;height:36px;font-size:12px;padding:0 8px;margin:0;display:flex;align-items:center;justify-content:center} .prezzo-grande{font-size:26px} .specifica{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 26px;gap:4px} .specifica input{font-size:12px;padding:0 8px} #listingPanel .commands{margin:12px 0 0;border-radius:12px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));bottom:calc(58px + env(safe-area-inset-bottom))} #listingPanel .commands .publish{flex:1 1 100%;order:-1;min-width:0} #listingPanel .commands .secondary{flex:1 1 auto} /* La barra di navigazione scende in fondo allo schermo, dove sta il pollice. Sopra, in cima, era il posto giusto quando si usava il mouse. */ nav{-webkit-mask-image:none;mask-image:none;position:fixed;left:0;right:0;bottom:calc(0px - env(safe-area-inset-bottom));z-index:60;display:flex;justify-content:space-between;gap:0;margin:0;padding:4px 2px calc(2px + env(safe-area-inset-bottom)); background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(25,25,25,.10);overflow:visible} nav button{flex:1 1 0;min-width:0;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px 2px;border:0;font-size:9px;line-height:1.1;font-weight:700;color:var(--muted);white-space:normal;text-align:center} nav button.active{color:var(--primary)} nav .icona{display:block;width:21px;height:21px} nav .voce{display:none} nav .voce-breve{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;line-height:1.45;padding-bottom:1px} nav button[data-view="nuovo"]{display:flex} /* Cinque voci, il piu' al centro. «Libro corrente» e «Download» escono dalla barra: il primo non e' una sezione ma una destinazione, ci si arriva dall'elenco; il secondo produce un file che su un telefono non si apre e non si manda a nessuno. */ nav button[data-view="current"], nav button[data-view="download"]{display:none} nav button[data-view="dashboard"]{order:1} nav button[data-view="queue"]{order:2} nav button[data-view="nuovo"]{order:3} nav button[data-view="archive"]{order:4} nav button[data-view="report"]{order:5} /* Il piu' non e' una voce come le altre: e' l'unica cosa che si fa ogni giorno, e deve sembrarlo. */ nav button[data-view="nuovo"] .icona{ width:46px;height:46px;margin-top:-22px;border-radius:50%; background:var(--primary);color:#fff;padding:11px; box-shadow:0 4px 12px rgba(54,101,243,.34)} nav button[data-view="nuovo"]{color:var(--primary)} /* Il pallino dice che c'e' un libro pronto che aspetta una decisione. E' ambra e non blu: non e' un comando, e' un avviso. */ nav button .pallino{ display:block;position:absolute;top:3px;left:50%;margin-left:5px;width:8px;height:8px; border-radius:50%;background:var(--amber);box-shadow:0 0 0 2px #fff} nav button .pallino[hidden]{display:none} nav button{position:relative} body.vista-nuovo nav button[data-view="nuovo"]{color:var(--primary)} body.vista-nuovo nav button.active{color:var(--muted)} /* Il modulo di caricamento diventa una schermata come le altre: in cima teneva mezzo telefono anche mentre si rileggeva un libro gia' fatto. */ aside{display:none} body.vista-nuovo aside{display:block;border-right:0} body.vista-nuovo .workspace{padding:0} body.vista-nuovo .workspace>*:not(nav){display:none!important} nav button span:not(.voce):not(.voce-breve){display:none} body{padding-bottom:62px} } /* ============================================================ Superfici operative: densita' leggibile, gerarchia e accessibilita'. Catalogo, Andamento e Download condividono lo stesso ritmo, senza disperdere testo e azioni sui monitor larghi. ============================================================ */ :where(button,a,input,select,textarea,summary):focus-visible{ outline:3px solid rgba(54,101,243,.42);outline-offset:2px } button,summary,.icon-button,.ebay-connect{-webkit-tap-highlight-color:transparent} .layout{grid-template-columns:300px minmax(0,1fr)} aside{padding:18px 20px} .workspace{padding:24px clamp(20px,3vw,48px) 48px} .workspace>nav, .workspace>#dashboardPanel, .workspace>#empty, .workspace>#jobPanel, .workspace>#queuePanel, .workspace>#archivePanel, .workspace>#ordersPanel, .workspace>#reportPanel, .workspace>#downloadPanel, .workspace>div:not(.publish-notice){width:100%;max-width:1440px;margin-left:auto;margin-right:auto} .workspace>nav{min-height:48px;margin-bottom:24px} .workspace>nav button{height:48px} .operational-panel{font-size:14px} .operational-panel .panel-head{margin-bottom:8px} .operational-panel .panel-head h2{font-size:26px;line-height:1.2} .operational-panel .panel-meta{font-size:13px} .operational-panel .panel-intro{margin-bottom:20px;font-size:14px;max-width:72ch} /* Catalogo: righe abbastanza compatte da scorrere, ma non microscopiche. */ #archivePanel{max-width:1440px} #archivePanel>div:first-child h2{margin:0;font-size:26px} #archiveIntro{max-width:78ch!important;font-size:14px!important;line-height:1.55!important;margin:6px 0 18px!important} #archiveSearch,#archiveSort{height:44px} #archiveFilters{margin:10px 0 14px!important;border-bottom:1px solid var(--line)} #archiveFilters button{height:44px!important;border:0!important;border-bottom:3px solid transparent!important;border-radius:0!important;background:transparent!important;color:var(--muted)!important;padding:0 16px!important} #archiveFilters button.active{color:var(--ink)!important;border-bottom-color:var(--primary)!important} #archiveBulkRow{position:sticky;top:8px;z-index:15;box-shadow:0 8px 24px rgba(25,25,25,.07)} .catalog-list{gap:8px} .catalog-row{min-height:84px;padding:12px 14px} .catalog-row .job-main>div strong{font-size:15px;line-height:1.35} .catalog-row .job-main>div span{line-height:1.55} .catalog-actions>button,.catalog-more>summary{min-height:40px} /* Andamento: separa sintesi, urgenze, priorita' e strumenti. */ .report-panel #reportSales, .report-panel #reportSummary, .report-panel #reportConversion, .report-panel #disappearedPanel, .report-panel #reportTrend, .report-panel #reportRankings{margin-bottom:18px} .report-panel h3{letter-spacing:0} .report-kpis{gap:12px;margin-top:10px} .report-kpis div{min-height:94px;padding:16px;border:1px solid var(--line);border-left:4px solid var(--primary);background:#fff} .report-kpis span{font-size:12px} .report-kpis strong{display:block;margin-top:7px;font-size:24px;line-height:1.15} .report-needs{padding:18px 0;margin-bottom:22px} .report-need-buttons button{min-height:76px;padding:14px 16px} .report-priorities{margin:0 0 18px!important;padding:16px 18px!important;background:#fff} .report-priorities .porta-scarica{margin:16px 0 0} .report-fold,.report-tools{background:#fff;border-radius:8px!important} .report-fold>summary,.report-tools>summary{min-height:48px;display:flex;align-items:center;padding:0 4px!important;cursor:pointer} .report-tools[open]{padding-bottom:14px} .report-tools input[readonly]{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:#f7f8fa} /* Download: una scelta per destinazione, in una griglia che sfrutta il desktop senza produrre una colonna minuscola persa nel vuoto. */ .download-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start} .download-grid .riquadro-download{max-width:none;margin:0!important;padding:22px;border-radius:8px;background:#fff} .download-grid .riquadro-download h3{font-size:18px;margin-bottom:8px} .download-grid .riquadro-download .spiega{font-size:14px;line-height:1.55} .download-grid .riquadro-download button{min-height:42px} .download-grid .riquadro-download form{max-width:100%} /* Ordini: un registro operativo, non una tabella tecnica. */ .orders-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 16px} .orders-summary>div{border:1px solid var(--line);border-left:4px solid #76a821;padding:14px;background:#fff;min-height:78px} .orders-summary>div.attention{border-left-color:var(--stato-ferma)} .orders-summary strong{display:block;font-size:24px;line-height:1.1} .orders-summary span{display:block;color:var(--muted);font-size:12px;margin-top:5px} .orders-filters{display:flex;gap:8px;overflow-x:auto;margin:0 0 12px;padding-bottom:3px} .orders-filters button{width:auto;min-height:38px;white-space:nowrap} .orders-filters button.active{background:#eef2fe;color:var(--azione-premuta);border-color:var(--azione)} .orders-bulk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);background:#fafbfc;padding:10px 12px;margin:0 0 12px} .orders-bulk label{display:flex;align-items:center;gap:7px;font-weight:700}.orders-bulk input,.order-select input{width:18px;height:18px;margin:0;accent-color:var(--azione)} .orders-bulk>span{color:var(--muted);font-size:13px;margin-right:auto}.orders-bulk button{width:auto;min-height:38px;white-space:nowrap} .orders-list{display:grid;gap:10px} .order-row{border:1px solid var(--line);border-left:4px solid #76a821;background:#fff;padding:14px 16px;border-radius:6px} .order-row.in_corso{border-left-color:var(--stato-guarda)}.order-row.attenzione{border-left-color:var(--stato-ferma)} .order-row.selected{box-shadow:0 0 0 2px #b9c9f8 inset;background:#f8faff} .order-main{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} .order-main>div{min-width:0}.order-heading{display:flex;align-items:flex-start;gap:11px}.order-heading>div{min-width:0}.order-select{display:flex;padding-top:3px;flex:none}.order-main strong{display:block;font-size:15px;line-height:1.4;margin:3px 0}.order-main small,.order-origin{display:block;color:var(--muted);font-size:12px;line-height:1.4} .order-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.order-actions button{width:auto;min-height:38px;white-space:nowrap}.order-row.gestito{opacity:.78} .order-verify{width:auto;flex:none;min-height:38px} .order-channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px} .order-channel{border:1px solid var(--line);padding:9px 10px;min-width:0;background:#fafbfc} .order-channel span{display:block;color:var(--muted);font-size:11px}.order-channel strong{display:block;font-size:13px;margin-top:2px;overflow-wrap:anywhere} .order-channel.chiuso,.order-channel.venduto,.order-channel.non_pubblicato{background:#f1f8e8;color:#355b11} .order-channel.in_corso{background:#fff7e6;color:#7a4a00}.order-channel.errore,.order-channel.da_chiudere{background:#fdecec;color:var(--stato-ferma)} .order-note{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.45} .empty-list{padding:20px;border:1px dashed var(--line);color:var(--muted);text-align:center} @media(min-width:1500px){ .workspace{padding-top:30px} .workspace>nav, .workspace>#dashboardPanel, .workspace>#empty, .workspace>#jobPanel, .workspace>#queuePanel, .workspace>#archivePanel, .workspace>#ordersPanel, .workspace>#reportPanel, .workspace>#downloadPanel{max-width:1360px} } @media(max-width:900px){ .layout{grid-template-columns:1fr} aside{border-right:0;border-bottom:1px solid var(--line)} .workspace{padding:18px} .download-grid{grid-template-columns:1fr} .orders-summary{grid-template-columns:1fr 1fr} } @media(max-width:700px){ .workspace{padding:14px 14px calc(82px + env(safe-area-inset-bottom))} .operational-panel .panel-head h2,#archivePanel>div:first-child h2{font-size:22px} .operational-panel .panel-intro{font-size:13px;margin-bottom:16px} .panel-actions button{min-height:44px} #archivePanel>div:first-child{align-items:stretch!important} #archivePanel>div:first-child>div,#archivePanel>div:first-child button{width:100%!important} #archiveIntro{font-size:13px!important;margin-bottom:14px!important} #archiveSearch,#archiveSort{width:100%!important;min-width:0!important} #archiveFilters{margin-left:-14px!important;margin-right:-14px!important;padding:0 14px;flex-wrap:nowrap!important;overflow-x:auto} #archiveBulkRow{position:static;padding:10px!important} .catalog-row{min-height:0;padding:12px 10px} .catalog-cover{width:54px;height:72px} .catalog-row .job-main>div strong{font-size:14px} .catalog-actions>button,.catalog-more>summary{min-height:44px} .report-kpis{grid-template-columns:1fr 1fr;gap:8px} .report-kpis div{min-height:86px;padding:12px} .report-kpis strong{font-size:20px} .report-priorities{padding:12px!important} .order-main{display:grid;grid-template-columns:1fr}.order-actions{display:grid;grid-template-columns:1fr}.order-actions button,.order-verify{width:100%} .orders-bulk{display:grid;grid-template-columns:1fr 1fr}.orders-bulk>span{margin:0}.orders-bulk button{width:100%} .order-channels{grid-template-columns:1fr} .report-ranking-row{display:grid;grid-template-columns:1fr} .report-ranking-row button{width:100%;min-height:44px} .report-tools>summary,.report-fold>summary{min-height:52px} .report-tool-actions{display:grid;grid-template-columns:1fr} .report-tool-actions select,.report-tool-actions button,.report-tool-actions .scarica{width:100%;min-height:44px;justify-content:center} .download-grid{gap:12px} .download-grid .riquadro-download{padding:16px 14px} .download-grid .riquadro-download button{width:100%!important;height:auto;padding:10px 14px;line-height:1.3} .download-grid .riquadro-download form[style*="display:flex"] input{width:100%!important} } @media(max-width:380px){ .report-kpis{grid-template-columns:1fr} nav button{font-size:8.5px} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important} } /* ============================================================ App shell 2026. Queste regole sono volutamente circoscritte ad .app-shell: le pagine pubbliche, l'amministrazione e soprattutto Ordini conservano i propri contratti grafici e funzionali. ============================================================ */ .app-shell{--surface:#fff;--surface-soft:#f6f7f4;--text-soft:#667066} .app-shell .main-tabs{align-items:stretch;border-bottom:1px solid var(--line);gap:2px;overflow-x:auto} .app-shell .main-tabs>button{flex:0 0 auto;width:auto;min-width:112px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--text-soft)} .app-shell .main-tabs>button:hover{background:#f5f7fb;color:var(--ink)} .app-shell .main-tabs>button.active{border-bottom-color:var(--primary);color:var(--primary);background:#f7f9ff} .app-shell .main-tabs>button.utility-view-trigger{display:none!important} .app-shell .main-tabs>button[data-view="nuovo"]{display:flex} .app-shell .current-book-context{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-10px 0 20px;padding:10px 14px;border:1px solid #cdd8f6;border-left:4px solid var(--primary);background:#f7f9ff} .app-shell .current-book-context[hidden]{display:none} .app-shell .current-book-context span{min-width:0;display:grid} .app-shell .current-book-context small{color:var(--muted);font-size:11px;text-transform:uppercase;font-weight:800} .app-shell .current-book-context strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px} .app-shell .current-book-context button{width:auto;height:36px;flex:none} .app-shell #primiPassi .passi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0;padding:0;list-style:none} .app-shell #primiPassi .passi li{position:relative;display:grid;grid-template-columns:30px 1fr;gap:9px;align-content:start;min-width:0;padding:13px;border:1px solid var(--line);border-radius:6px;background:#fff} .app-shell #primiPassi .passi li>svg{grid-column:1;width:24px;height:24px;fill:none;stroke:var(--primary);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .app-shell #primiPassi .passi .segno{position:absolute;right:8px;top:8px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#edf2ff;color:var(--primary);font-size:10px;font-weight:850} .app-shell #primiPassi .passi li>div{grid-column:1/-1}.app-shell #primiPassi .passi strong{display:block;padding-right:20px;font-size:13px}.app-shell #primiPassi .passi div>span{display:block;margin-top:5px;color:var(--muted);font-size:11.5px;line-height:1.45} .app-shell #primiPassi .passi .azione{display:inline-flex;margin-top:9px;font-size:12px;font-weight:750} .app-shell #dashboardPanel{display:grid;gap:20px} .app-shell #dashboardPanel[hidden]{display:none} .app-shell .dashboard-head{margin-bottom:0;padding-bottom:16px;border-bottom:1px solid var(--line)} .app-shell .dashboard-grid{display:grid;gap:10px} .app-shell .dashboard-section-heading{display:flex;align-items:flex-start;gap:12px;margin:0 0 10px} .app-shell .dashboard-section-heading>span{width:28px;height:28px;display:grid;place-items:center;flex:none;border-radius:50%;background:#edf2ff;color:var(--primary);font-size:11px;font-weight:850} .app-shell .dashboard-section-heading.attention>span{background:#fff4dd;color:var(--stato-guarda)} .app-shell .dashboard-section-heading h3{margin:0;font-size:19px;letter-spacing:0} .app-shell .dashboard-section-heading p{margin:3px 0 0;color:var(--muted);font-size:12.5px;line-height:1.4} .app-shell .today-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px} .app-shell .today-shortcuts button{display:grid;gap:4px;width:100%;min-height:72px;padding:13px 15px;text-align:left;background:#fff;color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:6px} .app-shell .today-shortcuts button:hover{background:#f7f9ff} .app-shell .today-shortcuts small{font-weight:500;color:var(--muted);line-height:1.35} .app-shell .carta-telefono{margin-top:4px;background:#fafbfc;border-color:var(--line);box-shadow:none} .app-shell .current-book-summary{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:16px;margin:0 0 10px;padding:16px 18px;border:1px solid var(--line);border-left:4px solid var(--primary);background:#fff} .app-shell .book-cover-placeholder{width:52px;height:68px;display:grid;place-items:center;background:#f0f2f5;color:#75808c;border:1px solid var(--line)} .app-shell .book-cover-placeholder svg{width:26px;fill:none;stroke:currentColor;stroke-width:1.5} .app-shell .current-book-summary small{color:var(--muted);font-weight:800;text-transform:uppercase;font-size:11px} .app-shell .current-book-summary h2{margin:2px 0 3px;font-size:20px;line-height:1.25;letter-spacing:0} .app-shell .current-book-summary p{margin:0;color:var(--muted);font-size:12.5px} .app-shell .current-book-summary button{width:auto;min-width:120px} .app-shell .book-section-nav{display:flex;gap:2px;overflow:auto;margin:0 0 14px;border-bottom:1px solid var(--line)} .app-shell .book-section-nav a{flex:none;padding:10px 12px;border-bottom:2px solid transparent;color:var(--muted);font-size:12px;font-weight:750;text-decoration:none} .app-shell .book-section-nav a:hover{color:var(--primary);border-bottom-color:var(--primary)} .app-shell #listingPanel>.blocco{scroll-margin-top:16px} .app-shell #listingPanel>.blocco>h3,.app-shell #listingPanel>.blocco .blocco-testa h3{font-size:17px;letter-spacing:0} .app-shell .reading-checklist{border-left:4px solid #25836f;background:#fbfdfc} .app-shell .reading-checklist>.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff} .app-shell .reading-checklist .reading-check{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 14px 12px 38px;border:0;border-bottom:1px solid var(--line)} .app-shell .reading-checklist .reading-check:nth-last-child(-n+2){border-bottom:0}.app-shell .reading-checklist .reading-check::before{content:'\2713';position:absolute;left:13px;width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:#e8f5e9;color:#397300;font-size:10px;font-weight:900} .app-shell .reading-checklist .reading-check>span{font-size:12px;color:var(--muted)}.app-shell .reading-checklist .reading-check>strong{font-size:13px;text-align:right} .app-shell .report-section-title{display:flex;align-items:end;justify-content:space-between;gap:14px} .app-shell .report-section-title span{color:var(--primary);font-size:11px;text-transform:uppercase;font-weight:850} .app-shell .report-section-title h3{margin:2px 0 0} .app-shell .period-switch{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden} .app-shell .period-switch button{width:40px;height:32px;padding:0;border:0;border-right:1px solid var(--line);border-radius:0;background:#fff;color:var(--muted);font-size:12px} .app-shell .period-switch button:last-child{border-right:0}.app-shell .period-switch button.active{background:var(--primary);color:#fff}.app-shell .period-switch button:disabled{opacity:.45} @media(max-width:700px){ .app-shell .main-tabs>button{min-width:0} .app-shell .main-tabs>button[data-view="dashboard"]{order:1}.app-shell .main-tabs>button[data-view="queue"]{order:2}.app-shell .main-tabs>button[data-view="nuovo"]{order:3}.app-shell .main-tabs>button[data-view="archive"]{order:4}.app-shell .main-tabs>button[data-view="orders"]{order:5}.app-shell .main-tabs>button[data-view="report"]{order:6} .app-shell .current-book-context{margin:0 0 12px} .app-shell .current-book-summary{grid-template-columns:48px minmax(0,1fr);padding:13px} .app-shell .current-book-summary .book-cover-placeholder{width:42px;height:56px}.app-shell .current-book-summary button{grid-column:1/-1;width:100%} .app-shell .book-section-nav{margin-left:-14px;margin-right:-14px;padding:0 14px} .app-shell .today-shortcuts{grid-template-columns:1fr} .app-shell #primiPassi .passi{grid-template-columns:1fr 1fr} .app-shell .reading-checklist>.metrics{grid-template-columns:1fr}.app-shell .reading-checklist .reading-check:nth-last-child(-n+2){border-bottom:1px solid var(--line)}.app-shell .reading-checklist .reading-check:last-child{border-bottom:0} } /* Shell amministrativa condivisa. Le pagine conservano moduli e permessi, ma finalmente hanno lo stesso orientamento e una profondita' riconoscibile. */ .admin-page{background:#f5f6f3;color:var(--ink)} .admin-page .admin-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:0 0 14px;padding-bottom:16px;border-bottom:1px solid var(--line)} .admin-page .admin-page-head h1{margin:0 0 4px!important;font-size:26px!important;letter-spacing:0} .admin-page .admin-page-head p:not(.admin-eyebrow){margin:0;color:var(--muted);font-size:13px;line-height:1.5} .admin-page .admin-eyebrow{margin:0 0 4px;color:var(--primary);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.06em} .admin-page .admin-back{display:inline-flex;align-items:center;min-height:38px;padding:0 13px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--primary);font-size:13px;font-weight:750;text-decoration:none;white-space:nowrap} .admin-page .admin-shell-nav{display:flex;gap:2px;margin:0 0 22px;padding:5px;border:1px solid var(--line);border-radius:7px;background:#e9ece7;overflow-x:auto} .admin-page .admin-shell-nav a{flex:none;padding:9px 12px;border-radius:4px;color:#4d584f;font-size:13px;font-weight:750;text-decoration:none;white-space:nowrap} .admin-page .admin-shell-nav a:hover,.admin-page .admin-shell-nav a.active{background:#fff;color:var(--primary);box-shadow:0 1px 3px rgba(25,25,25,.08)} @media(max-width:700px){ .admin-page{padding-bottom:0} .admin-page .admin-page-head{display:grid}.admin-page .admin-back{justify-self:start} .admin-page .admin-shell-nav,.admin-page .page-nav{position:static;left:auto;right:auto;bottom:auto;z-index:auto;display:flex;justify-content:flex-start;height:auto;box-shadow:none;overflow-x:auto} .admin-page .admin-shell-nav{margin-left:-14px;margin-right:-14px;border-left:0;border-right:0;border-radius:0;padding:6px 14px} .admin-page .admin-shell-nav a,.admin-page .page-nav a{display:block;min-width:auto;height:auto} } /* Mobile operativo: la creazione di un libro deve sembrare un percorso, non una pila di moduli uguali. Le regole restano dentro .app-shell e non cambiano input, data-role o comportamento degli upload. */ @media(max-width:700px){ .app-shell aside{padding:14px 14px 22px;background:#f3f5f2} .app-shell aside form{gap:14px} /* Sei destinazioni definitive, tutte con lo stesso peso. Il vecchio piu' sospeso funzionava con cinque voci ma con Ordini rompeva centro e ritmo. */ .app-shell .main-tabs{height:calc(64px + env(safe-area-inset-bottom));padding:3px 2px env(safe-area-inset-bottom);align-items:stretch} .app-shell .main-tabs>button{position:relative;min-width:0;height:61px;padding:5px 1px 4px;border:0;border-top:3px solid transparent;border-radius:0;background:#fff;font-size:9px} .app-shell .main-tabs>button.active{border-top-color:var(--primary);border-bottom-color:transparent;background:#f7f9ff} .app-shell .main-tabs>button[data-view="nuovo"] .icona{width:22px;height:22px;margin:0;border-radius:0;background:transparent;color:currentColor;padding:0;box-shadow:none} .app-shell .main-tabs .icona{width:22px;height:22px} .app-shell .main-tabs .voce-breve{font-size:9px;line-height:1.2} .app-shell{padding-bottom:calc(70px + env(safe-area-inset-bottom))} } /* ====================================================================== AUTOPUB — LA COSTOLA ====================================================================== Un libro su uno scaffale si riconosce di taglio. Autopub guarda undicimila libri, e chi lavora non legge: SCORRE. Quindi ogni oggetto dell'interfaccia — una riga di catalogo, una lavorazione, un avviso, una scheda — porta sul bordo sinistro una costola colorata che ne dichiara lo stato. Sempre nello stesso posto. Mai altrove. Il guadagno non e' estetico: si scorrono duecento righe leggendo SOLO il bordo sinistro, e il libro che chiede attenzione salta all'occhio senza leggere una parola. Il colore dice COSA, lo spessore dice QUANTO URGE. ====================================================================== */ .costola{ position:relative; padding-left:calc(var(--s4) + var(--costola)); border-left:var(--costola) solid var(--stato-fermo); background:var(--carta-alta); transition:border-left-width var(--tempo) var(--curva),background var(--tempo) var(--curva); } .costola:hover{background:var(--carta-incassata)} /* Gli stati. I nomi dicono cosa deve fare la persona, non come sta il dato: «guarda» e «ferma» sono istruzioni, «in_review» e «error» sono etichette. */ .costola.lavora{border-left-color:var(--stato-lavora)} .costola.guarda{border-left-color:var(--stato-guarda);border-left-width:var(--costola-viva)} .costola.ferma {border-left-color:var(--stato-ferma); border-left-width:var(--costola-viva)} .costola.viva {border-left-color:var(--stato-vivo)} /* Quando qualcosa si sta muovendo, la costola respira. Un solo elemento animato in tutta la pagina: se respirassero in venti non direbbe piu' niente. Chi ha chiesto meno movimento non vede nulla di tutto questo. */ .costola.lavora::before{ content:"";position:absolute;left:calc(var(--costola) * -1);top:0;bottom:0; width:var(--costola);background:var(--carta-alta); animation:costola-respira 1.8s var(--curva) infinite; } @keyframes costola-respira{0%,100%{opacity:0}50%{opacity:.55}} /* ---------------------------------------------------------------------- IL REGISTRO Un catalogo non e' una galleria: e' un registro. Niente una-scheda-per- libro, niente griglie di riquadri tutti uguali. Righe a ritmo costante, separate da un filo, con la costola a sinistra. ---------------------------------------------------------------------- */ .registro{display:flex;flex-direction:column;background:var(--carta-alta);border:1px solid var(--filo);border-radius:var(--raggio-grande);overflow:hidden} .registro > *{border-bottom:1px solid var(--filo)} .registro > *:last-child{border-bottom:0} .registro-riga{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4)} /* LE CIFRE SI INCOLONNANO DA SOLE. Prezzi, conteggi, date e numeri di inserzione a larghezza fissa: scorrendo una colonna di prezzi l'occhio confronta le cifre invece di inseguirle. */ .cifra,.registro-riga strong,.metrics strong,.prezzo-grande{font-family:var(--cifre);font-variant-numeric:tabular-nums;letter-spacing:-.01em} /* ---------------------------------------------------------------------- IL SEGNO DI STATO Non una pillola colorata: un punto e una parola. La pillola piena grida e, ripetuta duecento volte, rende la pagina un arcobaleno. ---------------------------------------------------------------------- */ .segno{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--t-micro);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--inchiostro-medio)} .segno::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--stato-fermo);flex:none} .segno.lavora::before{background:var(--stato-lavora)} .segno.guarda::before{background:var(--stato-guarda)} .segno.ferma::before {background:var(--stato-ferma)} .segno.viva::before {background:var(--stato-vivo)} /* ---------------------------------------------------------------------- I COMANDI Tre soli livelli, e si distinguono per PESO, non per colore: .agisce — tocca il mondo fuori (pubblica, chiude, rilancia). Pieno. button — comando normale. Contorno. .quieto — comando di servizio. Solo testo. ---------------------------------------------------------------------- */ .agisce{background:var(--azione);color:#fff;border:1px solid var(--azione)} .agisce:hover{background:var(--azione-premuta);border-color:var(--azione-premuta)} .agisce:active{transform:translateY(1px)} .quieto{background:transparent;color:var(--inchiostro-medio);border:1px solid transparent;font-weight:650} .quieto:hover{background:var(--carta-incassata);color:var(--inchiostro)} /* IL FUOCO SI VEDE. Chi lavora con la tastiera deve sapere dov'e'; e chi usa il mouse non lo vede mai, quindi non costa niente a nessuno. */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--azione);outline-offset:2px;border-radius:var(--raggio); } /* ---------------------------------------------------------------------- LA COSTOLA ENTRA DOVE LO STATO C'E' GIA' Queste classi esistono da prima e portano gia' un'informazione di stato, ciascuna con il proprio bordo e il proprio sfondo inventati sul posto. Qui vengono ricondotte all'unico linguaggio, senza toccare una riga di PHP o di JavaScript: la pagina continua a scrivere le stesse classi e riceve la costola. ---------------------------------------------------------------------- */ .job-row{ border-left-width:var(--costola); border-left-color:var(--stato-fermo); background:var(--carta-alta); transition:border-left-width var(--tempo) var(--curva),background var(--tempo) var(--curva); } .job-row.status-blocked {border-left-color:var(--stato-ferma); border-left-width:var(--costola-viva);background:var(--carta-alta)} .job-row.status-review {border-left-color:var(--stato-guarda);border-left-width:var(--costola-viva);background:var(--carta-alta)} .job-row.status-ready {border-left-color:var(--stato-lavora);background:var(--carta-alta)} .job-row.status-published{border-left-color:var(--stato-vivo); background:var(--carta-alta)} .job-row:hover{background:var(--carta-incassata)} /* Il segno di stato prende il posto della pillola piena: un punto e una parola. Duecento pillole colorate su una pagina sono un arcobaleno, e in un arcobaleno non si distingue niente. */ .job-status-badge{ background:transparent;color:var(--inchiostro-medio); padding:0;border-radius:0;font-size:var(--t-micro);font-weight:700; letter-spacing:.04em;text-transform:uppercase; display:inline-flex;align-items:center;gap:var(--s2); } .job-status-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--stato-fermo);flex:none} .status-blocked .job-status-badge::before{background:var(--stato-ferma)} .status-review .job-status-badge::before{background:var(--stato-guarda)} .status-ready .job-status-badge::before{background:var(--stato-lavora)} .status-published .job-status-badge::before{background:var(--stato-vivo)} .status-blocked .job-status-badge,.status-review .job-status-badge, .status-ready .job-status-badge,.status-published .job-status-badge{background:transparent;color:var(--inchiostro-medio)} /* Le metriche perdono il riquadro e tengono la costola: stessa grammatica delle righe, e il numero resta la cosa piu' grande sullo schermo. */ .metrics div{background:transparent;border-left:var(--costola) solid var(--filo-forte);padding:var(--s2) var(--s3)} .metrics span{font-size:var(--t-micro);letter-spacing:.04em;text-transform:uppercase;color:var(--inchiostro-tenue)} .metrics strong{font-size:var(--t-grande);font-weight:650} /* L'intestazione e il corpo respirano sulla carta calda. */ header{background:var(--carta-alta);border-bottom:1px solid var(--filo)} aside{background:var(--carta-alta)} article,#queuePanel{border-radius:var(--raggio-grande);box-shadow:var(--ombra)} .badge{background:var(--carta-incassata);color:var(--inchiostro-medio);letter-spacing:.03em} /* La navigazione: la linguetta attiva si appoggia sul colore dell'azione, ed e' l'unico colore della barra. */ nav button.active{border-color:var(--azione);color:var(--inchiostro);font-weight:750} /* ====================================================================== LE SCHERMATE CHIAVE ====================================================================== Tutto quello che segue lavora sulle classi che PHP e JavaScript gia' scrivono. Non una riga di logica cambia: cambia cosa significano quelle classi. E' il motivo per cui il redesign puo' attraversare l'intera applicazione senza mettere a rischio una pubblicazione. ====================================================================== */ /* ---------------------------------------------------------------------- L'INTESTAZIONE Una fascia di carta con un filo sotto. Il nome del prodotto in chiaro, e nient'altro che compete per l'attenzione: l'intestazione e' il posto da cui ci si orienta, non una vetrina. ---------------------------------------------------------------------- */ header{height:60px;padding:0 var(--s5);background:var(--carta-alta);border-bottom:1px solid var(--filo)} header h1{font-size:var(--t-medio);font-weight:700;letter-spacing:-.015em} header .marchio{display:inline-flex;align-items:center;gap:var(--s2)} /* ---------------------------------------------------------------------- LA NAVIGAZIONE Non linguette grigie tutte uguali: una fila di voci in inchiostro, e quella attiva portata avanti dalla COSTOLA messa in orizzontale. La stessa barra che a sinistra dice lo stato, qui sotto dice "sei qui". Un segno solo, due mestieri: e' questo che fa un linguaggio. ---------------------------------------------------------------------- */ nav{gap:0;border-bottom:1px solid var(--filo);margin-bottom:var(--s5);overflow-x:auto} nav button{ position:relative;background:transparent;color:var(--inchiostro-tenue); border:0;border-radius:0;padding:0 var(--s4);height:46px;font-weight:650; white-space:nowrap;transition:color var(--tempo) var(--curva); } nav button::after{ content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:-1px;height:var(--costola); background:transparent;transition:background var(--tempo) var(--curva); } nav button:hover{color:var(--inchiostro)} nav button.active{color:var(--inchiostro);font-weight:750} nav button.active::after{background:var(--azione)} /* ---------------------------------------------------------------------- LA DASHBOARD: UN REGISTRO, NON UNA PARETE DI RIQUADRI ---------------------------------------------------------------------- Prima: .dashboard-cards era una griglia di riquadri alti 112px, tutti uguali, ognuno con il suo bordo. Quattro scatole identiche affiancate non dicono niente sull'importanza relativa di quello che contengono — e sono esattamente l'immagine del gestionale qualunque. Adesso: righe. Etichetta a sinistra, NUMERO a destra incolonnato con gli altri. Una colonna di cifre si confronta con un'occhiata; quattro numeri sparsi in quattro scatole vanno cercati uno per uno. ---------------------------------------------------------------------- */ .dashboard-cards{ display:flex;flex-direction:column;gap:0; background:var(--carta-alta);border:1px solid var(--filo); border-radius:var(--raggio-grande);overflow:hidden; } .dashboard-card{ display:grid;grid-template-columns:1fr auto;align-items:baseline; gap:var(--s3) var(--s4); min-height:0;padding:var(--s3) var(--s4); border:0;border-bottom:1px solid var(--filo); border-left:var(--costola) solid transparent; border-radius:0;background:var(--carta-alta);text-align:left; transition:border-left-color var(--tempo) var(--curva),background var(--tempo) var(--curva); } .dashboard-cards .dashboard-card:last-child{border-bottom:0} .dashboard-card > span{ grid-column:1;font-size:var(--t-corpo);font-weight:650;color:var(--inchiostro); } .dashboard-card > strong{ grid-column:2;grid-row:1 / span 2;align-self:center; font-family:var(--cifre);font-variant-numeric:tabular-nums; font-size:var(--t-titolo);font-weight:600;letter-spacing:-.03em;line-height:1; } .dashboard-card > small{ grid-column:1;font-size:var(--t-piccolo);color:var(--inchiostro-tenue);line-height:1.45; } /* Le voci su cui si PUO' CLICCARE si dichiarano: prendono la costola dell'azione e si schiariscono al passaggio. Le altre restano lettura. */ button.dashboard-card{cursor:pointer;font:inherit;color:inherit;height:auto} button.dashboard-card:hover{background:var(--carta-incassata);border-left-color:var(--azione)} button.dashboard-card > strong{color:var(--azione)} .dashboard-card-admin > strong{color:var(--inchiostro-medio)} /* Il numero di sezione che la dashboard gia' stampa (01, 02, 03) diventa un elemento tipografico: cifra grande e tenue, come la numerazione di un capitolo. E' il richiamo editoriale piu' discreto che si possa fare — un numero, non una texture di carta. */ .dashboard-section-heading{display:flex;gap:var(--s4);align-items:baseline;margin:var(--s6) 0 var(--s3)} .dashboard-section-heading > span{ font-family:var(--cifre);font-size:var(--t-grande);font-weight:400; color:var(--filo-forte);letter-spacing:-.04em;line-height:1;flex:none; } .dashboard-section-heading h3{margin:0;font-size:var(--t-medio);font-weight:700;letter-spacing:-.01em} .dashboard-section-heading p{margin:2px 0 0;font-size:var(--t-piccolo);color:var(--inchiostro-tenue);line-height:1.5} /* ---------------------------------------------------------------------- LE SCHEDE DI LAVORO Riquadro quasi piatto: il rilievo lo fa la linea, non l'ombra. Le sezioni interne si separano con un filo invece che con un bordo completo, cosi' la scheda resta un oggetto solo. ---------------------------------------------------------------------- */ article,#queuePanel,#archivePanel,#reportPanel{ background:var(--carta-alta);border:1px solid var(--filo); border-radius:var(--raggio-grande);box-shadow:none; } .blocco{border-top:1px solid var(--filo);padding-top:var(--s4);margin-top:var(--s5)} .blocco:first-child{border-top:0;padding-top:0;margin-top:0} .blocco h3{font-size:var(--t-micro);letter-spacing:.07em;text-transform:uppercase;color:var(--inchiostro-tenue);font-weight:700;margin:0 0 var(--s3)} /* I campi: incassati nella carta invece che riquadrati sopra di essa. */ input,textarea,select{background:var(--carta-incassata);border:1px solid var(--filo);border-radius:var(--raggio)} input:focus,textarea:focus,select:focus{background:var(--carta-alta);border-color:var(--filo-forte)} label{font-size:var(--t-micro);letter-spacing:.04em;text-transform:uppercase;color:var(--inchiostro-tenue);font-weight:700} /* Il prezzo e' la cifra piu' importante della scheda, e si vede. */ .prezzo-grande{font-family:var(--cifre);font-variant-numeric:tabular-nums;font-size:var(--t-titolo);font-weight:600;letter-spacing:-.03em} /* ---------------------------------------------------------------------- I COMANDI DELLA SCHEDA Pieno solo cio' che tocca un marketplace. «Salva» e «Rianalizza» non escono da Autopub: restano in contorno, e smettono di competere con il pulsante che manda davvero il libro in vendita. ---------------------------------------------------------------------- */ .commands{gap:var(--s2);padding-top:var(--s4);border-top:1px solid var(--filo)} .commands .secondary{background:transparent;color:var(--inchiostro-medio);border:1px solid var(--filo-forte);font-weight:650} .commands .secondary:hover{background:var(--carta-incassata);color:var(--inchiostro)} .commands .publish{background:var(--azione);border:1px solid var(--azione);color:#fff} .commands .publish:hover{background:var(--azione-premuta);border-color:var(--azione-premuta)} /* Pulsanti tondi sparsi: tutti sulla stessa geometria quasi squadrata. Gli angoli da pastiglia erano l'unico tratto "da template" rimasto. */ .ebay-connect,.scarica,.publish-notice-actions a{border-radius:var(--raggio)} .ebay-connect.collegato{background:var(--azione-tenue);color:var(--azione-premuta);border:1px solid var(--azione)} /* ---------------------------------------------------------------------- AVANZAMENTO Niente barra che si riempie a scatti: un filo che avanza. Durante una lavorazione e' l'unica cosa in movimento sullo schermo. ---------------------------------------------------------------------- */ .progress{height:var(--costola);background:var(--filo);border-radius:0;margin:var(--s3) 0 var(--s5)} .progress span{background:var(--azione);transition:width .35s var(--curva)} /* ---------------------------------------------------------------------- DENSITA' Chi ha undicimila inserzioni non vuole aria: vuole righe. Qui si stringe dove prima si respirava a vuoto, senza scendere sotto la soglia in cui il testo diventa faticoso. ---------------------------------------------------------------------- */ .workspace{padding:var(--s5)} #jobList{gap:0;border:1px solid var(--filo);border-radius:var(--raggio-grande);overflow:hidden;background:var(--carta-alta)} #jobList > *{border-bottom:1px solid var(--filo)} #jobList > *:last-child{border-bottom:0} .job-row{padding:var(--s3) var(--s4);border-bottom:0} .job-row strong{font-weight:650} .job-row span{color:var(--inchiostro-tenue)} /* ---------------------------------------------------------------------- I COMPARABILI DI PREZZO La qualita' della corrispondenza era una pastiglia colorata per ognuno dei tre casi: tre colori per un'informazione che si legge benissimo in grigio. Diventano un segno sobrio, e il colore resta libero per cio' che conta. ---------------------------------------------------------------------- */ .comparable-item .match{border-radius:var(--raggio);font-size:var(--t-micro);letter-spacing:.03em;text-transform:uppercase;background:var(--carta-incassata);color:var(--inchiostro-medio);padding:2px 6px} .match-stessa_edizione{box-shadow:inset var(--costola) 0 0 var(--azione)} .match-edizione_diversa{box-shadow:inset var(--costola) 0 0 var(--stato-guarda)} .match-non_pertinente{box-shadow:inset var(--costola) 0 0 var(--stato-fermo)} .comparable-item .match{padding-left:calc(var(--s2) + var(--costola))} /* text-transform SI EREDITA, e molte etichette di Autopub contengono una frase di aiuto dentro : «SKU eBay — definitivo: eBay non lo modifica dopo la creazione...». In maiuscoletto diventava illeggibile e urlata. L'etichetta e' un'insegna, la spiegazione e' una frase: due registri diversi dentro lo stesso elemento. */ label small{text-transform:none;letter-spacing:0;font-weight:400;font-size:var(--t-piccolo);color:var(--inchiostro-tenue)} /* Le etichette che contengono un campo (caselle, interruttori) non sono insegne: sono testo da leggere. */ label:has(input[type=checkbox]),label:has(input[type=radio]){text-transform:none;letter-spacing:0;font-weight:400;font-size:var(--t-corpo);color:var(--inchiostro)} /* ====================================================================== LA GERARCHIA DEI COMANDI, DAVVERO ====================================================================== Guardando la pagina di anteprima, «Pubblica su eBay» e «Salva correzioni» erano due pulsanti verdi identici. Il principio — pieno solo cio' che tocca un marketplace — era scritto nei commenti e non nel codice, perche' il pulsante BASE era rimasto pieno: ogni comando, anche «Annulla», partiva colorato. Tre livelli, e si distinguono a colpo d'occhio: PIENO cio' che esce da Autopub: pubblica, chiude, rilancia. CONTORNO il comando normale: salva, rianalizza, cerca. TESTO il comando di servizio: annulla, chiudi, torna indietro. ====================================================================== */ button,.primary-link{ background:var(--carta-alta);color:var(--inchiostro); border:1px solid var(--filo-forte);font-weight:650;border-radius:var(--raggio); transition:background var(--tempo) var(--curva),border-color var(--tempo) var(--curva); } button:hover,.primary-link:hover{background:var(--carta-incassata);border-color:var(--inchiostro-tenue)} button:disabled{opacity:1;color:var(--inchiostro-tenue);background:var(--carta-incassata);border-color:var(--filo);cursor:not-allowed} /* PIENO: tocca il mondo fuori. */ .publish,.agisce,.ebay-connect,.primary-link.agisce,button[type=submit].agisce{ background:var(--azione);color:#fff;border-color:var(--azione);font-weight:700; } .publish:hover,.agisce:hover,.ebay-connect:hover{background:var(--azione-premuta);border-color:var(--azione-premuta);color:#fff} .commands .publish{background:var(--azione);border-color:var(--azione);color:#fff} /* TESTO: servizio. Niente contorno, niente peso. */ .secondary,.terzo,.quieto{background:transparent;border-color:transparent;color:var(--inchiostro-medio);font-weight:650} .secondary:hover,.terzo:hover,.quieto:hover{background:var(--carta-incassata);border-color:transparent;color:var(--inchiostro)} .commands .secondary{background:transparent;border-color:transparent;color:var(--inchiostro-medio)} .commands .secondary:hover{background:var(--carta-incassata);border-color:transparent} /* L'icona resta un bottone quadrato, non una pastiglia grigia. */ .icon-button{background:var(--carta-alta);color:var(--inchiostro-medio);border:1px solid var(--filo-forte)} /* ============================================================ NUOVO LIBRO — l'impianto approvato (prototipo v6, 9 ottobre 2026). ============================================================ Due colonne: a sinistra le quattro schede delle fotografie su una griglia 2x2 e, sotto, i dettagli a tutta larghezza; a destra una colonna di 300 pixel che resta ferma mentre si scorre, col riepilogo e il comando. Tre vincoli hanno deciso la forma di queste regole: 1. LA PALETTE COBALTO VIVE QUI, NON NEL :root. Cambiare i token globali avrebbe ricolorato anche Ordini, che non si tocca. Il cobalto e' dichiarato su .nuovo-impianto e scende per eredita' solo dentro questa sezione. Il giorno in cui la palette diventa quella di tutta l'applicazione, i valori si spostano nel :root e queste righe si cancellano. 2. I CARATTERI SONO NOSTRI. DM Sans e Manrope stanno in assets/font: nessuna richiesta a Google a ogni apertura, nessun dato che esce, e il service worker li tiene in cache come ogni altro file sotto /assets — quindi funzionano anche col telefono senza campo. 3. LA SCHEDA SKU PUO' SPARIRE. Chi non usa etichette non la vede, e in una griglia a due colonne la sua assenza lascerebbe mezza riga vuota: .senza-sku allarga l'Indice. La classe la mette lo stesso codice che decide la visibilita', leggendo sku_mode dal server. ============================================================ */ @font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap; src:url('font/dm-sans-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF} @font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap; src:url('font/dm-sans-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF} @font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap; src:url('font/dm-sans-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF} @font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap; src:url('font/manrope-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF} @font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap; src:url('font/manrope-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF} @font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap; src:url('font/manrope-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF} /* --- La vista. Nuovo libro occupa la pagina, come nel prototipo: a 300 pixel di colonna le quattro schede non ci stavano affiancate. La navigazione sale sopra il modulo invece di finirgli sotto. --- */ body.vista-nuovo .layout{grid-template-columns:minmax(0,1fr)} body.vista-nuovo .workspace{order:-1;padding:0} body.vista-nuovo .workspace>*:not(nav){display:none!important} body.vista-nuovo aside{ display:block;border-right:0;border-bottom:0;background:#f5f7fb; padding:4px clamp(16px,3vw,48px) 56px} .nuovo-testa{max-width:1510px;margin:0 auto 24px} .nuovo-testa .occhiello{ margin:0 0 7px;font:800 11px/1 'Manrope',ui-sans-serif,system-ui,sans-serif; letter-spacing:.16em;text-transform:uppercase;color:#2D55D4} .nuovo-testa h2{ margin:0 0 9px;font:800 clamp(26px,3vw,38px)/1.13 'Manrope',ui-sans-serif,system-ui,sans-serif; letter-spacing:-.035em;color:#172036} .nuovo-testa .sottotitolo{ margin:0;max-width:68ch;font-family:'DM Sans',ui-sans-serif,system-ui,sans-serif; font-size:14px;line-height:1.55;color:#728096} .nuovo-testa .sottotitolo strong{color:#172036;font-weight:700} .nuovo-testa .passi{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0} .nuovo-testa .passi span{ padding:9px 14px;border:1px solid #e3e9f1;border-radius:999px;background:#fff; font:700 11.5px 'DM Sans',ui-sans-serif,system-ui,sans-serif;color:#4b5870} .nuovo-impianto{ /* I colori della sezione. Dichiarati qui e non nel :root: fuori di qui non cambia niente, Ordini compreso. */ --nl-blu:#2D55D4; --nl-blu-tenue:#eaf0ff; --nl-blu-cupo:#1E3FA8; --nl-inchiostro:#172036; --nl-tenue:#728096; --nl-medio:#45536a; --nl-filo:#e3e9f1; --nl-filo-forte:#d5deeb; --nl-carta:#fff; --nl-fondo:#fbfcff; --nl-testo:'DM Sans',ui-sans-serif,system-ui,-apple-system,sans-serif; --nl-titoli:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif; display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start; max-width:1510px;margin:0 auto; font-family:var(--nl-testo);color:var(--nl-inchiostro)} .nuovo-pannelli{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} /* --- Le schede --- */ .nuovo-impianto .pannello{ margin:0;padding:22px;border:1px solid var(--nl-filo);border-top:1px solid var(--nl-filo); border-radius:18px;background:var(--nl-carta);box-shadow:0 10px 40px rgba(30,55,90,.035)} .nuovo-impianto .pannello.larga{grid-column:1/-1} .nuovo-pannelli.senza-sku #indexUploadSection{grid-column:1/-1} .nuovo-impianto .pannello-testa{display:flex;align-items:center;gap:10px;margin:0 0 8px} .nuovo-impianto .pannello-testa .num{ display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:9px; background:var(--nl-blu-tenue);color:var(--nl-blu); font:800 12px var(--nl-titoli)} .nuovo-impianto .pannello h2{ margin:0;font:800 17px var(--nl-titoli);letter-spacing:-.027em;color:var(--nl-inchiostro); text-transform:none} .nuovo-impianto .pannello h3{ margin:0 0 12px;font:800 16px var(--nl-titoli);letter-spacing:-.03em;color:var(--nl-inchiostro)} .nuovo-impianto .capsula{ margin-left:auto;flex:none;padding:6px 10px;border:1px solid var(--nl-filo);border-radius:999px; font-size:11px;font-weight:700;color:var(--nl-medio);white-space:nowrap} .nuovo-impianto .cosa{ margin:4px 0 14px;font-size:12.6px;line-height:1.55;color:var(--nl-tenue)} .nuovo-impianto .cosa strong{color:var(--nl-inchiostro);font-weight:700} /* La tendina col «come»: il testo lungo c'e' ancora tutto, chiuso. */ .nuovo-impianto .come{margin:0} .nuovo-impianto .come>summary{ display:flex;align-items:center;gap:6px;padding:0;border:0;background:none; font-size:12px;font-weight:700;color:var(--nl-blu);cursor:pointer;list-style:none} .nuovo-impianto .come>summary::-webkit-details-marker{display:none} .nuovo-impianto .come>summary::before{content:'\24D8';font-size:13px;transform:none} .nuovo-impianto .come[open]>summary::before{transform:none} .nuovo-impianto .come>p{ margin:10px 0 0;padding:12px;border-radius:10px;background:#f7f9fd; font-size:12.5px;line-height:1.6;color:#56637a} /* I due comandi. Galleria e' la prima scelta: su desktop e' il gesto che si fa, e sul telefono resta comunque accanto alla fotocamera. */ .nuovo-impianto .photo-actions{ display:flex;gap:8px;margin:16px 0 10px;max-width:none} .nuovo-impianto .photo-actions label{ display:inline-flex;align-items:center;gap:7px;width:auto;height:auto;min-height:0; aspect-ratio:auto;padding:10px 14px;border:1px solid #c9d5ec;border-radius:10px; background:#fff;color:var(--nl-blu);font-size:13px;font-weight:700;line-height:1.2; text-align:left;white-space:nowrap;cursor:pointer} /* Il foglio mette le etichette in maiuscoletto dappertutto, e qui tornavano GALLERIA e FOTOCAMERA urlati dentro due pulsanti blu. */ .nuovo-impianto label{text-transform:none;letter-spacing:0} .nuovo-impianto .photo-actions label svg{width:18px;height:18px;flex:none} .nuovo-impianto .photo-actions label span{font-size:13px} .nuovo-impianto .photo-actions .azione-galleria{ background:var(--nl-blu);border-color:var(--nl-blu);color:#fff} .nuovo-impianto .photo-actions .azione-galleria:hover{background:var(--nl-blu-cupo)} .nuovo-impianto .photo-actions .azione-fotocamera:hover{background:var(--nl-blu-tenue)} .nuovo-impianto .photo-actions label:focus-within{ outline:3px solid rgba(45,85,212,.3);outline-offset:2px} /* Il riquadro dove si trascina. Un clic apre la galleria: chi ci passa sopra col dito si aspetta che sia un bersaglio, non una decorazione. */ .nuovo-impianto .zona-trascina{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; min-height:96px;padding:18px;border:1.5px dashed #ccd8e9;border-radius:12px; background:var(--nl-fondo);color:#697991;text-align:center;cursor:pointer; transition:border-color .15s,background .15s} .nuovo-impianto .zona-trascina b{font-size:13px;font-weight:700;color:#3a4e6a} .nuovo-impianto .zona-trascina small{font-size:11px} .nuovo-impianto .zona-trascina:hover, .nuovo-impianto .zona-trascina.sopra{border-color:var(--nl-blu);background:var(--nl-blu-tenue)} .nuovo-impianto .zona-trascina:focus-visible{outline:3px solid rgba(45,85,212,.36);outline-offset:2px} /* Le miniature. Il pulsante per togliere, quello per ruotare e la stella che decide la copertina restano quelli di prima: qui cambia la misura. */ .nuovo-impianto .preview{ display:flex;flex-wrap:wrap;gap:9px;margin-top:0;grid-template-columns:none} .nuovo-impianto .preview:not(:empty){margin-top:12px} .nuovo-impianto .thumb{width:78px;height:94px;aspect-ratio:auto;border-radius:9px;overflow:hidden} .nuovo-impianto .thumb img{border:0;border-radius:0} /* --- I dettagli, pannello 05 --- */ .nuovo-impianto .campi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .nuovo-impianto .campo{margin:0;min-width:0} .nuovo-impianto .campo.intero{grid-column:1/-1} .nuovo-impianto .campo>label,.nuovo-impianto .campi>label>span>b{ display:block;margin:0 0 7px;font-size:12px;font-weight:700;color:var(--nl-medio); text-transform:none;letter-spacing:0} .nuovo-impianto input:not([type=checkbox]), .nuovo-impianto select{ width:100%;height:auto;padding:11px 13px;border:1px solid var(--nl-filo-forte); border-radius:10px;background:#fff;color:var(--nl-inchiostro);font:inherit} .nuovo-impianto input:focus,.nuovo-impianto select:focus{ border-color:var(--nl-blu);box-shadow:0 0 0 3px rgba(45,85,212,.08);outline:0} .nuovo-impianto .riga-isbn{display:flex;gap:10px;align-items:stretch} .nuovo-impianto .riga-isbn input{flex:1;min-width:0} .nuovo-impianto .riga-isbn button{ flex:none;width:auto;height:auto;padding:11px 15px;border:1px solid #ccd8e9;border-radius:10px; background:#fff;color:var(--nl-blu);font-size:13px;font-weight:700;white-space:nowrap} .nuovo-impianto .riga-isbn button:hover{background:var(--nl-blu-tenue)} .nuovo-impianto .nota{ margin:8px 0 0;font-size:11.5px;line-height:1.55;color:var(--nl-tenue)} .nuovo-impianto .spunta{ display:flex;align-items:flex-start;gap:9px;margin:0;padding:0; font-size:12.5px;font-weight:400;line-height:1.55;cursor:pointer} .nuovo-impianto .spunta>input{ width:auto;height:auto;margin:3px 0 0;flex:none;accent-color:var(--nl-blu)} .nuovo-impianto .spunta b{ display:block;margin:0 0 3px;font-size:12.5px;font-weight:700;color:var(--nl-inchiostro)} .nuovo-impianto .spunta small{ display:block;font-size:11.5px;line-height:1.55;color:var(--nl-tenue);text-transform:none} /* --- La colonna di destra --- */ .nuovo-colonna{position:sticky;top:20px;display:grid;gap:16px;align-content:start} .nuovo-colonna .voce{ display:flex;justify-content:space-between;gap:10px;padding:10px 0; border-bottom:1px solid var(--nl-filo);font-size:12.5px;color:#56637b} .nuovo-colonna .voce:last-of-type{border-bottom:0} .nuovo-colonna .voce strong{font-weight:800;color:var(--nl-inchiostro)} .nuovo-colonna #analyzeBtn{ width:100%;height:auto;margin-top:14px;padding:14px;border:0;border-radius:12px; background:var(--nl-blu);color:#fff;font-size:14px;font-weight:800} .nuovo-colonna #analyzeBtn:hover:not(:disabled){background:var(--nl-blu-cupo)} .nuovo-colonna #analyzeBtn:disabled{opacity:.45;cursor:not-allowed} .nuovo-colonna #uploadMessage{margin:12px 0 0;font-size:12px;line-height:1.55} .nuovo-colonna .cost-card{margin:14px 0 0;border-radius:10px;border-left-color:var(--nl-blu)} .nuovo-colonna .suggerimento{ border-color:#d8e3fb;background:#eff4ff;box-shadow:none;color:#53678e} .nuovo-colonna .suggerimento b{ display:block;margin:0 0 6px;font:800 13px var(--nl-titoli);color:#2b3c63} .nuovo-colonna .suggerimento p{margin:0;font-size:12px;line-height:1.55} @media(max-width:1180px){ .nuovo-impianto{grid-template-columns:minmax(0,1fr)} .nuovo-colonna{position:static;grid-template-columns:1fr 1fr} } @media(max-width:860px){ .nuovo-pannelli{grid-template-columns:1fr} .nuovo-pannelli .pannello.larga{grid-column:1} .nuovo-pannelli.senza-sku #indexUploadSection{grid-column:1} } @media(max-width:700px){ body.vista-nuovo .workspace{padding:14px 15px 0} body.vista-nuovo aside{padding:0 15px 40px} .nuovo-testa{margin-bottom:18px} .nuovo-testa .passi{display:none} .nuovo-impianto{gap:16px} .nuovo-colonna{grid-template-columns:1fr} .nuovo-impianto .campi{grid-template-columns:1fr} .nuovo-impianto .pannello{padding:17px} /* Col pollice su un libro in mano i due comandi devono essere grandi e affiancati, non due righe di testo. */ .nuovo-impianto .photo-actions{display:grid;grid-template-columns:1fr 1fr} .nuovo-impianto .photo-actions label{ justify-content:center;padding:13px 10px;white-space:normal;text-align:center} } /* ============================================================ ORDINI RESTA COM'E'. ============================================================ La sezione Ordini non va toccata: e' una richiesta esplicita, e il motivo e' buono — e' l'unica che muove soldi veri di clienti veri. Ma Ordini e' un pannello dentro index.php, non un documento a se': i token del :root lo raggiungono per eredita'. Qui li ridichiara per conto suo, con i valori che aveva prima del passaggio al cobalto. Nessuna regola di Ordini e' stata letta o riscritta: cambia soltanto il significato dei nomi, e torna quello di prima. Il giorno in cui si decidesse di portare anche Ordini con le altre sezioni, si cancella questo blocco e basta. ============================================================ */ #ordersPanel{ --carta:#FBFAF7; --carta-alta:#FFFFFF; --carta-incassata:#F3F1EC; --inchiostro:#16181C; --inchiostro-medio:#50555C; --inchiostro-tenue:#787D85; --filo:#E4E1D9; --filo-forte:#CBC6BA; --stato-fermo:#A9A396; --stato-lavora:#1E6B6B; --stato-guarda:#8A5A00; --stato-ferma:#8C2F1E; --stato-vivo:#1B4D8F; --azione:#0F5C4A; --azione-premuta:#0A4335; --azione-tenue:#E6F0EC; --bg:var(--carta); --panel:var(--carta-alta); --ink:var(--inchiostro); --muted:var(--inchiostro-tenue); --line:var(--filo); --primary:var(--azione); --primary-dark:var(--azione-premuta); --red:var(--stato-ferma); --amber:var(--stato-guarda); --green:var(--azione); --green2:var(--azione-premuta); --blue:var(--stato-vivo); --amber-ink:var(--stato-guarda); /* Compreso il carattere: Ordini resta su Market Sans come prima. Non perche' sia una buona idea — e' il carattere di eBay — ma perche' questa sezione non si tocca, e «non si tocca» vale anche per le cose che cambieresti volentieri. */ --testo:"Market Sans","Helvetica Neue",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-family:var(--testo); color:var(--inchiostro); } /* ============================================================ LA VOCE DEI TITOLI. ============================================================ Manrope porta i titoli, DM Sans il resto. Le cifre dei titoli sono strette e si incolonnano da sole, che e' quello che serve a una schermata fatta di numeri. Ordini e' escluso: li' dentro tutto resta come prima, caratteri compresi. ============================================================ */ h1,h2,h3, .titolo-op,.cifrona,.k,.quanto{font-family:var(--titoli);letter-spacing:-.03em} #ordersPanel h1,#ordersPanel h2,#ordersPanel h3{font-family:var(--testo);letter-spacing:0} /* Nuovo libro aveva i suoi colori dichiarati sulla sezione, perche' allora il :root era ancora verde e toccarlo avrebbe ricolorato Ordini. Adesso il cobalto e' quello di tutta l'applicazione: i nomi locali restano, per non riscrivere cento regole, ma puntano ai token veri. Una sorgente sola. */ .nuovo-impianto{ --nl-blu:var(--azione); --nl-blu-tenue:var(--azione-tenue); --nl-blu-cupo:var(--azione-premuta); --nl-inchiostro:var(--inchiostro); --nl-tenue:var(--inchiostro-tenue); --nl-medio:var(--inchiostro-medio); --nl-filo:var(--filo); --nl-filo-forte:var(--filo-forte); --nl-carta:var(--carta-alta); --nl-fondo:var(--carta-incassata); --nl-testo:var(--testo); --nl-titoli:var(--titoli); } /* ============================================================ LA TESTATA E LA BARRA DI COMANDO (prototipo v2). ============================================================ Due pezzi che valgono per tutta l'applicazione, Ordini compreso — perche' sono il telaio, non il contenuto: la testata dice dove sei e come stanno i canali, la barra ti porta altrove. Quello che sta dentro Ordini non cambia di una riga. LA BARRA E' IN BASSO, E GALLEGGIA. Non e' un vezzo: l'operatore lavora in piedi col telefono in una mano e un libro nell'altra, e il pollice arriva in fondo allo schermo, non in cima. Su desktop la stessa barra resta al centro, dove l'occhio torna fra un'azione e l'altra. Era gia' cosi' su telefono; adesso lo e' sempre, ed e' una cosa sola invece di due. IL CURSORE SCORRE. La pasticca scura si sposta sotto la voce scelta invece di comparire e sparire: dice da dove vieni, non solo dove sei. Si muove con una molla, e si ferma del tutto se il sistema dice che le animazioni danno fastidio. ============================================================ */ /* --- Testata --- */ header{ height:auto;min-height:68px;gap:16px;padding:16px clamp(16px,3vw,48px); border-bottom:0;background:transparent} header .marchio h1{font-family:var(--titoli);font-size:22px;font-weight:800;letter-spacing:-.032em} header .marchio span{font-size:12px;color:var(--inchiostro-tenue)} .header-actions{gap:10px} /* Le pastiglie di vetro del v2: stato dei canali e pacchetto. Sono informazione, non comandi, e si leggono senza fermarsi. */ #planBadge{ display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:999px; background:var(--vetro);backdrop-filter:blur(14px); box-shadow:0 1px 2px rgba(19,17,25,.04),0 2px 8px -2px rgba(19,17,25,.05); font-size:12.5px;font-weight:500} .ebay-connect{ height:32px;padding:0 13px;border-radius:999px;font-size:12.5px;font-weight:600} header .icon-button{ width:32px;height:32px;border-radius:999px;background:var(--vetro); backdrop-filter:blur(14px);color:var(--inchiostro-medio);font-size:15px; box-shadow:0 1px 2px rgba(19,17,25,.04),0 2px 8px -2px rgba(19,17,25,.05)} header .icon-button:hover{background:#fff;color:var(--inchiostro)} /* --- La barra di comando --- */ .workspace>nav.main-tabs{ position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60; display:flex;align-items:center;gap:5px;width:auto;max-width:calc(100vw - 24px); min-height:0;margin:0;padding:7px;border:0;border-radius:999px;overflow:auto hidden; background:rgba(252,252,255,.80);backdrop-filter:blur(26px) saturate(1.7); box-shadow:0 2px 6px rgba(19,17,25,.06),0 18px 48px -12px rgba(19,17,25,.30), inset 0 1px 0 rgba(255,255,255,.9); scrollbar-width:none} .workspace>nav.main-tabs::-webkit-scrollbar{display:none} .app-shell .main-tabs>button{ position:relative;z-index:1;flex:0 0 auto;min-width:0;height:44px;padding:0 16px; border:0;border-radius:999px;background:transparent;color:var(--inchiostro-medio); font-size:14px;font-weight:600;white-space:nowrap;transition:color .25s} .app-shell .main-tabs>button:hover{background:transparent;color:var(--inchiostro)} .app-shell .main-tabs>button.active{background:transparent;color:#fff;border-bottom-color:transparent} .main-tabs .icona{width:16px;height:16px;margin:0 7px 0 0} .main-tabs .voce-breve{display:none} /* La pasticca che scorre sotto la voce scelta. */ .cursore-comando{ position:absolute;top:7px;left:0;width:0;height:44px;border-radius:999px; background:var(--inchiostro);z-index:0;pointer-events:none; box-shadow:0 8px 24px -6px rgba(var(--accR),.45); transition:left .46s cubic-bezier(.34,1.56,.44,1),width .46s cubic-bezier(.34,1.56,.44,1)} .cursore-comando.fermo{transition:none} .divisore-comando{flex:none;width:1px;height:26px;margin:0 4px;background:var(--filo-forte)} .app-shell .main-tabs>button.cerca-comando{ flex:0 0 auto;z-index:1;height:44px;padding:0 15px;border:0;border-radius:999px; background:transparent;color:var(--inchiostro-tenue);font-size:13.5px;font-weight:500; gap:9px;transition:background .25s} .app-shell .main-tabs>button.cerca-comando:hover{background:rgba(19,17,25,.05);color:var(--inchiostro)} .app-shell .main-tabs>button.nuovo-vivo{ flex:0 0 auto;z-index:1;height:44px;padding:0 19px;border:0;border-radius:999px; background:var(--azione);color:#fff;font-size:14px;font-weight:700;gap:8px; box-shadow:0 8px 24px -6px rgba(var(--accR),.45); transition:transform .3s cubic-bezier(.34,1.56,.44,1),background .25s} .app-shell .main-tabs>button.nuovo-vivo:hover{background:var(--azione-premuta);transform:translateY(-2px)} .app-shell .main-tabs>button.nuovo-vivo:active{transform:translateY(0) scale(.97)} /* Il pallino degli avvisi sopra una pasticca scura: bianco attorno, o sparisce dentro il nero. */ .main-tabs .pallino{top:6px;box-shadow:0 0 0 2px rgba(252,252,255,.95)} /* La barra galleggia sopra il contenuto: sotto ci vuole aria, o l'ultima riga di ogni schermata resta nascosta. */ body{padding-bottom:96px} /* --- Lo spazio di lavoro --- */ .workspace{padding:8px clamp(16px,3vw,48px) 0} .app-shell .main-tabs{border-bottom:0} .operational-panel .panel-head h2, .workspace h2{font-family:var(--titoli);letter-spacing:-.035em} /* La testa di una schermata: titolo grande a sinistra, stato a destra. */ .testa-schermata{ display:flex;align-items:flex-end;justify-content:space-between;gap:20px; flex-wrap:wrap;margin:0 0 22px} .testa-schermata h2{margin:0;font-size:clamp(30px,3.4vw,42px);font-weight:800;line-height:1.08} .testa-schermata .sotto{margin:6px 0 0;font-size:13.5px;color:var(--inchiostro-tenue)} .spie-canali{display:flex;gap:10px;flex-wrap:wrap} .spia-canale{ display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px; background:var(--carta-alta);box-shadow:0 1px 2px rgba(19,17,25,.04),0 2px 8px -2px rgba(19,17,25,.05); font-size:12.5px;color:var(--inchiostro-medio)} .spia-canale i{width:7px;height:7px;border-radius:50%;background:var(--stato-fermo);flex:none} .spia-canale.viva i{background:var(--acido);box-shadow:0 0 8px rgba(var(--vivoR),.9)} .spia-canale.attesa i{background:var(--stato-guarda)} .spia-canale b{font-family:var(--titoli);font-weight:800;color:var(--inchiostro);letter-spacing:-.02em} @media(prefers-reduced-motion:reduce){ .cursore-comando{transition:none} .app-shell .main-tabs>button.nuovo-vivo:hover{transform:none} } /* ============================================================ SUL TELEFONO LA BARRA NON E' UNA PASTICCA. ============================================================ Il primo tentativo ha portato sul telefono l'impianto del desktop: una pasticca galleggiante con sei voci, la ricerca e il pulsante acceso. A 390 pixel non ci stava. E' uscita dallo schermo da tutti e due i lati, le etichette sono sparite lasciando solo icone, e il cursore scuro — una pasticca larga quanto la voce scelta — su una voce fatta di sola icona diventava un cerchio nero in mezzo alla fila. Per giunta le due voci che ho aggiunto in coda non avevano un «order», e in un contenitore flex dove le altre ce l'hanno finivano prime: la ricerca a sinistra di tutto e il «+» in mezzo. Autopub aveva gia' una barra per il telefono, e funzionava: larga quanto lo schermo, appoggiata in fondo, icona e parola corta una sopra l'altra, cinque bersagli grandi uguali. Quella resta. La pasticca e' roba da desktop, dove c'e' spazio e c'e' un mouse. Ricerca e pulsante acceso qui spariscono: la ricerca vive dentro il Catalogo, dove si cerca, e «Nuovo libro» e' gia' una delle cinque voci, col suo cerchio in rilievo. ============================================================ */ @media(max-width:700px){ header{padding:12px 15px;min-height:0} header .marchio span{display:none} .workspace{padding:6px 15px 0} .workspace>nav.main-tabs{ position:fixed;left:0;right:0;bottom:0;transform:none;width:auto;max-width:none; border-radius:0;border-top:1px solid var(--filo); background:rgba(252,252,255,.94);backdrop-filter:blur(18px) saturate(1.4); box-shadow:0 -2px 18px rgba(19,17,25,.07); justify-content:space-around;overflow:visible} /* Tre pezzi del desktop che sul telefono non servono e rubano spazio. */ .cursore-comando, .divisore-comando, .app-shell .main-tabs>button.cerca-comando, .app-shell .main-tabs>button.nuovo-vivo{display:none!important} /* Icona sopra, parola corta sotto: due righe strette battono una riga larga quando i bersagli sono cinque e il dito e' uno. */ .app-shell .main-tabs>button{ flex:1 1 0;gap:2px;padding:5px 1px 4px;font-size:9px;font-weight:650} .main-tabs .voce{display:none} .main-tabs .voce-breve{ display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; line-height:1.45;padding-bottom:1px} .main-tabs .icona{width:22px;height:22px;margin:0} .main-tabs .pallino{box-shadow:0 0 0 2px rgba(252,252,255,.95)} /* Sul desktop la voce scelta e' bianca perche' sotto le scorre una pasticca scura. Qui la pasticca non c'e', e la regola lasciava «Nuovo libro» bianco su bianco: un buco in mezzo alla barra. */ .app-shell .main-tabs>button.active{ color:var(--azione);background:var(--azione-tenue); border-top:3px solid var(--azione);border-bottom:0;border-radius:0} .app-shell .main-tabs>button:not(.active){border-top:3px solid transparent;border-bottom:0} body{padding-bottom:calc(70px + env(safe-area-inset-bottom))} .testa-schermata h2{font-size:28px} } /* ============================================================ OGGI (prototipo v2). ============================================================ Una regola sola ha deciso la forma: le cose da risolvere stanno in cima e da sole, tutto il resto sta sotto in righe strette. Prima erano dodici riquadri tutti uguali — «libri da riprendere» accanto a «tempo risparmiato» — e un riquadro uguale agli altri dodici non e' in primo piano. Un libro sparito dalla vetrina non lo compra nessuno finche' resta sparito: quella riga deve farsi vedere, le altre no. Le voci a zero non compaiono. Una riga che dice «0 libri spariti» occupa lo spazio di una che ne dice quattordici, e insegna a scorrere senza leggere. Quando non c'e' niente da fare lo si dice una volta, in una frase, e si va avanti. ============================================================ */ /* La fascia delle anomalie. Il rosso e' quello del marchio e serve qui: il verde resta a cio' che va bene. */ .anomalie{ background:var(--carta-alta);border-radius:16px;overflow:hidden; border-left:4px solid var(--stato-ferma); box-shadow:0 2px 4px rgba(19,17,25,.04),0 12px 32px -8px rgba(19,17,25,.10)} .anomalie.quiete{border-left-color:var(--acido)} .an-testa{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 20px;border-bottom:1px solid var(--filo)} .anomalie.quiete .an-testa{border-bottom:0;padding-bottom:0} .occhio{ font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--inchiostro-tenue)} .an-tot{font-family:var(--titoli);font-size:13px;font-weight:800;color:var(--stato-ferma)} .an-niente{margin:10px 20px 18px;font-size:14px;line-height:1.55;color:var(--inchiostro-medio)} .an-riga{ display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:16px;align-items:center; width:100%;height:auto;padding:16px 20px;border:0;border-top:1px solid var(--filo); border-radius:0;background:var(--carta-alta);color:var(--inchiostro); text-align:left;font:inherit;cursor:pointer;transition:background .18s} .an-riga:first-of-type{border-top:0} .an-riga:hover{background:#fbfcfe} .an-pt{width:7px;height:7px;border-radius:50%;background:var(--stato-ferma);flex:none} .an-txt{min-width:0} .an-txt b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.012em} .an-txt em{ display:block;margin-top:2px;font-style:normal;font-size:12.5px;line-height:1.5; color:var(--inchiostro-tenue)} .an-val{ font-family:var(--titoli);font-size:20px;font-weight:800;letter-spacing:-.03em; color:var(--stato-ferma);white-space:nowrap} .an-cta{ font-size:13px;font-weight:700;color:var(--azione);white-space:nowrap} .an-riga:hover .an-cta{text-decoration:underline} /* Gli elenchi sotto: numeri che si guardano, non su cui si agisce. */ .app-shell #dashboardPanel{display:grid;gap:20px} .app-shell #dashboardValue.dashboard-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} .lastra{ background:var(--carta-alta);border-radius:16px;padding:20px; box-shadow:0 1px 2px rgba(19,17,25,.04),0 2px 8px -2px rgba(19,17,25,.05)} .lastra>.occhio{display:block;margin-bottom:14px} .flusso{display:grid;gap:1px;background:var(--filo);border-radius:11px;overflow:hidden} .att{ display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center; background:var(--carta-alta);padding:13px 16px} .att .pt{width:7px;height:7px;border-radius:50%;background:var(--stato-fermo);flex:none} .att.viva .pt{background:var(--acido);box-shadow:0 0 8px rgba(var(--vivoR),.9)} .att b{display:block;font-size:13.5px;font-weight:650;letter-spacing:-.01em} .att span{font-size:12px;color:var(--inchiostro-tenue);line-height:1.45} .att .q{ font-family:var(--titoli);font-size:15px;font-weight:800;letter-spacing:-.025em; color:var(--inchiostro);white-space:nowrap} /* La testa della schermata. Il pulsante «Aggiorna» resta dov'era, ma smette di sembrare l'azione principale: qui l'azione e' nella fascia. */ .app-shell .dashboard-head{ display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap; margin:0;padding:0;border-bottom:0} .app-shell .dashboard-head h2{ margin:0;font-size:clamp(30px,3.4vw,42px);font-weight:800;line-height:1.08;letter-spacing:-.04em} .app-shell .dashboard-head p{ margin:6px 0 0;font-size:13.5px;color:var(--inchiostro-tenue);max-width:60ch} .app-shell .dashboard-head>div:first-child{min-width:0} .testa-destra{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .app-shell .dashboard-head #dashboardRefresh{ height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--filo-forte); background:var(--carta-alta);color:var(--inchiostro-medio);font-size:12.5px;font-weight:600} .app-shell .dashboard-head #dashboardRefresh:hover{border-color:var(--azione);color:var(--azione)} @media(max-width:700px){ .an-riga{grid-template-columns:auto minmax(0,1fr) auto;row-gap:8px;padding:14px 16px} .an-cta{grid-column:2/-1;justify-self:start} .an-testa{padding:12px 16px} .app-shell .dashboard-head h2{font-size:28px} } /* ============================================================ NUOVO LIBRO E' UNA SCHERMATA FRA LE ALTRE. ============================================================ Finche' il modulo di caricamento era una colonna stretta, stava sempre in vista accanto a qualunque schermata. Adesso e' una schermata intera, e deve comparire soltanto quando e' la sua: altrimenti resta a sinistra del Catalogo, schiacciata a trenta pixel, illeggibile e senza motivo. Su telefono era gia' cosi' (una regola dentro la media query a 700 pixel). Qui vale a tutte le larghezze, ed e' una regola sola invece di due che dicono la stessa cosa a condizioni diverse. ============================================================ */ .app-shell aside{display:none} .app-shell.vista-nuovo aside{display:block} body.vista-nuovo .layout{grid-template-columns:minmax(0,1fr)} .app-shell:not(.vista-nuovo) .layout{grid-template-columns:minmax(0,1fr)} /* ============================================================ CATALOGO (prototipo v2). ============================================================ Undicimila inserzioni. Ogni riga che spreca otto pixel ne spreca ottantottomila, e ogni informazione che non si incolonna e' un'informazione che nessuno confrontera' mai. Prima ogni riga era una frase: «€ 18,50 · compralo subito · Autopub · SKU AP-1238 · A posto · 412 comparse · 38 visite». Si legge, una volta. Cinquanta volte di fila non si legge piu': i prezzi cominciano in punti diversi, gli SKU stanno ogni volta in un posto diverso, e un numero fuori posto non salta all'occhio perche' non c'e' una colonna da cui sporgere. Adesso e' una tabella. Stessa informazione, nessuna tolta, e le dodici azioni di prima tutte al loro posto. ============================================================ */ #archivePanel{background:transparent;border:0;padding:0;box-shadow:none} #archivePanel>div:first-child h2{font-family:var(--titoli);font-size:clamp(30px,3.4vw,42px);font-weight:800;letter-spacing:-.04em} /* La riga di ricerca e i filtri: pastiglie, non pulsanti squadrati. */ #archiveSearch{ height:44px;border:1px solid var(--filo);border-radius:12px;background:var(--carta-alta); padding:0 16px;font-size:14px;box-shadow:0 1px 2px rgba(19,17,25,.04)} #archiveSearch:focus{border-color:var(--azione);box-shadow:0 0 0 3px rgba(var(--accR),.10);outline:0} #archiveSort{height:44px;border-radius:12px;border:1px solid var(--filo);background:var(--carta-alta)} #archiveFilters{border-bottom:0!important;gap:7px!important;margin:12px 0 16px!important} #archiveFilters button{ height:38px!important;padding:0 15px!important;border:1px solid var(--filo)!important; border-radius:999px!important;background:var(--carta-alta)!important; color:var(--inchiostro-medio)!important;font-size:13px!important;font-weight:650!important} #archiveFilters button:hover{border-color:var(--filo-forte)!important;color:var(--inchiostro)!important} #archiveFilters button.active{ background:var(--inchiostro)!important;border-color:var(--inchiostro)!important;color:#fff!important} /* La tabella. Una lastra sola, bordi solo fra le righe. */ #archiveList{ background:var(--carta-alta);border-radius:16px; box-shadow:0 2px 4px rgba(19,17,25,.04),0 12px 32px -8px rgba(19,17,25,.10)} /* Niente overflow:hidden sulla lastra: tagliava il menu «Altre azioni» delle ultime righe (16/10). Gli angoli si arrotondano sulle righe. */ #archiveList>:first-child{border-top-left-radius:16px;border-top-right-radius:16px} #archiveList>:last-child{border-bottom-left-radius:16px;border-bottom-right-radius:16px} /* Le colonne, dichiarate una volta e usate da intestazione e righe: se si scostano, si scostano insieme. */ .cat-intestazione, #archiveList .catalog-row{ display:grid; /* Larghezze fisse dove il contenuto puo' mancare o cambiare: con «auto» l'intestazione (celle vuote) e le righe (celle piene) si calcolavano larghezze diverse, e le colonne non si incolonnavano piu' — che e' l'unica cosa per cui esiste una tabella. */ grid-template-columns: 18px /* spunta */ 34px /* copertina */ minmax(0,1fr) /* titolo */ 84px /* sku */ 76px /* prezzo */ 104px /* stato */ 150px /* traffico */ 220px; /* azioni */ gap:14px;align-items:center} .cat-intestazione{ padding:11px 18px;border-bottom:1px solid var(--filo);background:var(--carta-incassata)} .cat-intestazione span{ font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--inchiostro-tenue)} .cat-intestazione .d{text-align:right} #archiveList .catalog-row{ padding:11px 18px;border:0;border-top:1px solid var(--filo);border-left:0;border-radius:0; background:var(--carta-alta);cursor:default;transition:background .15s} #archiveList .catalog-row:first-of-type{border-top:0} #archiveList .catalog-row:hover{background:#fbfcfe} /* La costola di stato resta, ma sottile: su cinquanta righe una striscia da sei pixel per riga e' una parete colorata. */ #archiveList .catalog-row.diagnosis-rifai{box-shadow:inset 3px 0 0 var(--stato-ferma)} #archiveList .catalog-row.diagnosis-modifica{box-shadow:inset 3px 0 0 var(--stato-guarda)} #archiveList .catalog-row.diagnosis-ok{box-shadow:inset 3px 0 0 var(--acido)} /* job-main conteneva spunta, copertina e testo: adesso i suoi figli sono celle della griglia della riga, non di una griglia sua. */ #archiveList .catalog-row>.job-main{display:contents} .catalog-cover{ width:34px;height:44px;object-fit:cover;border-radius:5px;background:var(--carta-incassata); border:1px solid var(--filo);flex:none} .cat-titolo{min-width:0} .cat-titolo strong{ display:block;font-size:13.5px;font-weight:650;letter-spacing:-.01em;line-height:1.3; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cat-titolo span{ display:block;margin-top:2px;font-size:11.5px;color:var(--inchiostro-tenue); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cat-sku{ font-family:var(--cifre);font-size:11.5px;color:var(--inchiostro-tenue);white-space:nowrap} .cat-prezzo{ font-family:var(--titoli);font-size:14px;font-weight:800;letter-spacing:-.02em; text-align:right;white-space:nowrap} .cat-stato{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .cat-stato .pt{width:7px;height:7px;border-radius:50%;background:var(--acido);flex:none} .cat-stato .pt.bad{background:var(--stato-ferma)} .cat-stato .pt.review{background:var(--stato-guarda)} .cat-stato .pt.good{background:var(--acido)} .cat-stato .catalog-state{ padding:0;background:none;font-size:12px;font-weight:600;color:var(--inchiostro-medio); white-space:nowrap} .cat-stato .catalog-state.bad{color:var(--stato-ferma)} .cat-stato .catalog-state.review{color:var(--stato-guarda)} .cat-stato .catalog-state.good{color:var(--acido-cupo)} .cat-traffico{ display:flex;flex-direction:column;gap:1px;min-width:0; font-size:11px;color:var(--inchiostro-tenue);line-height:1.35} .cat-traffico span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cat-traffico .muto{color:var(--filo-forte)} /* Le azioni: quella principale si vede, le altre stanno sotto «Altre azioni» come gia' adesso. Qui cambia solo la misura. */ #archiveList .catalog-actions{display:flex;align-items:center;gap:7px;justify-self:end} #archiveList .catalog-actions button{ height:32px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:650} #archiveList .catalog-more>summary{ height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--filo); display:inline-flex;align-items:center;font-size:12.5px;font-weight:650; color:var(--inchiostro-medio);cursor:pointer;white-space:nowrap} #archiveList .catalog-more>summary:hover{border-color:var(--filo-forte);color:var(--inchiostro)} /* La barra delle modifiche in massa: resta dov'era, cambia il vestito. */ #archiveBulkRow{ border:1px solid var(--filo)!important;border-radius:14px!important; background:var(--carta-alta)!important; box-shadow:0 1px 2px rgba(19,17,25,.04)} #archiveBulkRow button{height:36px;border-radius:999px;font-size:12.5px} #archiveBulkRow select,#archiveBulkRow input{height:36px;border-radius:10px} @media(max-width:1180px){ .cat-intestazione,#archiveList .catalog-row{ grid-template-columns:18px 34px minmax(0,1fr) 76px 104px 200px} .cat-intestazione span:nth-child(7),.cat-traffico{display:none} .cat-intestazione span:nth-child(4),.cat-sku{display:none} } @media(max-width:760px){ /* Sul telefono una tabella non si legge: ogni inserzione torna a essere una scheda, ma con le stesse etichette e lo stesso ordine. */ .cat-intestazione{display:none} #archiveList .catalog-row{ grid-template-columns:auto auto minmax(0,1fr);grid-template-areas: 'spunta copertina titolo' '. . stato' '. . azioni'; row-gap:8px;padding:14px 16px} #archiveList .catalog-row>.job-main{display:contents} .cat-titolo{grid-area:titolo} .cat-stato{grid-area:stato} .cat-prezzo{position:absolute;right:16px;text-align:right} #archiveList .catalog-row{position:relative} .cat-sku,.cat-traffico{display:none} #archiveList .catalog-actions{grid-area:azioni;justify-self:start;flex-wrap:wrap} } /* Le due celle che tengono dritte le colonne anche quando sono vuote: la spunta compare solo in modalita' selezione, la copertina solo se eBay ce l'ha data. Larghezza fissa in entrambi i casi. */ .cat-spunta{width:18px;display:flex;align-items:center;justify-content:center} .cat-copertina{ width:34px;height:44px;border-radius:5px;background:var(--carta-incassata); border:1px solid var(--filo);overflow:hidden;flex:none} .cat-copertina .catalog-cover{width:100%;height:100%;border:0;border-radius:0} /* ============================================================ ANDAMENTO (prototipo v2). ============================================================ Una frase in cima che dice un fatto, una curva grande, tre numeri, e cosa c'e' da fare. In quest'ordine, perche' e' l'ordine in cui si guarda: prima com'e' andata, poi perche', poi cosa si fa. ============================================================ */ #reportPanel{background:transparent;border:0;padding:0;box-shadow:none} #reportSummary{display:grid;gap:20px} .testa-andamento{ display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} .testa-andamento .occhio{margin:0 0 8px} .titolo-op{ margin:0;font-family:var(--titoli);font-size:clamp(28px,3.6vw,46px);font-weight:800; line-height:1.08;letter-spacing:-.042em} .titolo-op b{font-weight:800;color:var(--azione)} /* Il riquadro del grafico. */ .grafico-grande{padding:24px} .cifra-riga{display:flex;align-items:baseline;gap:12px;margin:10px 0 4px} .cifrona{ font-family:var(--titoli);font-size:clamp(40px,5vw,62px);font-weight:800; letter-spacing:-.05em;line-height:1} .cifra-nota{font-size:13px;color:var(--inchiostro-tenue)} .grafico{position:relative;height:230px;margin-top:10px} .grafico svg{width:100%;height:100%;overflow:visible;display:block} .grafico .base{stroke:var(--filo);stroke-width:1} .grafico .traccia{ fill:none;stroke:var(--azione);stroke-width:2;stroke-linecap:round;stroke-linejoin:round; vector-effect:non-scaling-stroke} .grafico .mirino{stroke:var(--filo-forte);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke} /* Il pallino porta un anello del colore della superficie: senza, su un punto alto della curva si confonde con la linea stessa. */ .grafico .perno{fill:var(--azione);stroke:var(--carta-alta);stroke-width:2;vector-effect:non-scaling-stroke} .grafico .giorno{cursor:crosshair} .suggeritore{ position:absolute;pointer-events:none;z-index:2; padding:7px 11px;border-radius:8px;background:var(--inchiostro);color:#fff; font-size:11.5px;font-weight:600;white-space:nowrap; transform:translate(-50%,-150%);opacity:0;transition:opacity .15s; box-shadow:0 2px 4px rgba(19,17,25,.04),0 12px 32px -8px rgba(19,17,25,.30)} .suggeritore.vedi{opacity:1} .suggeritore em{ display:block;margin-top:2px;font-style:normal;font-size:13.5px;font-weight:800; font-family:var(--titoli);letter-spacing:-.02em;color:var(--acc3)} .assi{ display:flex;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px; border-top:1px solid var(--filo);font-size:11.5px;color:var(--inchiostro-tenue)} .assi .muto{color:var(--filo-forte)} /* I tre numeri. */ .tre-riquadri{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .kpi{ background:var(--carta-alta);border-radius:16px;padding:20px; box-shadow:0 1px 2px rgba(19,17,25,.04),0 2px 8px -2px rgba(19,17,25,.05)} .kpi .e{ display:block;margin-bottom:9px;font-size:11px;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:var(--inchiostro-tenue)} .kpi .k{ display:block;font-family:var(--titoli);font-size:clamp(28px,3vw,40px);font-weight:800; letter-spacing:-.045em;line-height:1} .kpi .d{display:block;margin-top:8px;font-size:12.5px;color:var(--inchiostro-tenue)} /* Cosa richiede attenzione. */ .report-needs.lastra h3{margin:0 0 12px;font-size:16px;font-weight:800} .report-need-buttons{display:flex;gap:12px;flex-wrap:wrap} .report-need-buttons button{ display:grid;gap:2px;height:auto;padding:14px 18px;border:1px solid var(--filo); border-radius:14px;background:var(--carta-alta);color:var(--inchiostro);text-align:left} .report-need-buttons button:hover{border-color:var(--azione);background:var(--azione-tenue)} .report-need-buttons strong{ font-family:var(--titoli);font-size:24px;font-weight:800;letter-spacing:-.04em} .report-need-buttons span{font-size:12.5px;color:var(--inchiostro-tenue)} .period-switch{border-radius:999px;border:0;background:var(--carta-incassata);padding:3px;gap:2px} .period-switch button{ width:auto;min-width:46px;height:32px;border:0;border-radius:999px;background:transparent; color:var(--inchiostro-medio);font-size:13px;font-weight:650} .period-switch button.active{ background:var(--carta-alta);color:var(--inchiostro); box-shadow:0 1px 2px rgba(19,17,25,.04),0 2px 8px -2px rgba(19,17,25,.05)} @media(max-width:860px){ .tre-riquadri{grid-template-columns:1fr} .grafico{height:190px} } @media(prefers-reduced-motion:reduce){ .suggeritore{transition:none} } /* ---------------------------------------------------------------------- I LIBRI PRONTI SI VEDONO SUBITO. Il 17 ottobre il libraio rischiava di perdersi le inserzioni pronte: con la costola del 9 ottobre una riga «Pronto» e una «Pubblicato» avevano lo stesso sfondo e la stessa etichetta minuscola, cambiava solo un pallino. Un libro pronto aspetta una decisione, uno pubblicato no: il pronto prende sfondo, costola larga ed etichetta piena; il pubblicato fa un passo indietro. ---------------------------------------------------------------------- */ .job-row.status-ready{ border-left-width:var(--costola-viva); background:color-mix(in srgb,var(--stato-lavora) 14%,var(--carta-alta)); } .job-row.status-ready:hover{background:color-mix(in srgb,var(--stato-lavora) 20%,var(--carta-alta))} .job-row.status-ready strong{color:var(--inchiostro);font-weight:750} .status-ready .job-status-badge{ background:var(--stato-lavora);color:var(--carta-alta); padding:3px var(--s2);border-radius:10px;width:fit-content; } .status-ready .job-status-badge::before{background:var(--carta-alta)} .job-row.status-published strong{color:var(--inchiostro-medio);font-weight:500} .job-row.status-published img{opacity:.75} /* Caricamento unico (novembre 2026): tutte le foto in una griglia divisa per gruppi; si sceglie il gruppo e si toccano le foto che ci vanno. */ #tuttePreview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} @media(min-width:700px){#tuttePreview{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}} #tuttePreview .thumb{width:auto;height:auto;overflow:visible;border-radius:0} #tuttePreview .thumb button{color:#fff} #tuttePreview .thumb .togli{z-index:2} #tuttePreview .thumb .foto{position:relative;height:118px;border-radius:9px;overflow:hidden;border:3px solid var(--filo);background:#f4f5f7} #tuttePreview .thumb.ruolo-publication .foto{border-color:var(--azione)} #tuttePreview .thumb.ruolo-analysis .foto{border-color:#B07E00} #tuttePreview .thumb.ruolo-index .foto{border-color:#2F7D4F} #tuttePreview .thumb.ruolo-sku .foto{border-color:#6B6F76} #tuttePreview.smistando .foto{cursor:pointer} #tuttePreview .thumb.scelta .foto{box-shadow:0 0 0 3px #F0A020;border-color:#F0A020} .thumb-numero{position:absolute;left:6px;top:6px;min-width:30px;height:30px;padding:0 6px;border-radius:15px;background:#F0A020;color:#fff;font-weight:800;font-size:16px;display:grid;place-items:center} .gruppo-testa{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:10px;padding-bottom:4px;border-bottom:2px solid var(--filo)} .gruppo-testa:first-child{margin-top:0} .gruppo-testa b{font-size:15px} .gruppo-testa span{min-width:24px;height:22px;padding:0 7px;border-radius:11px;background:var(--filo);font-size:12px;font-weight:800;display:inline-grid;place-items:center} .gruppo-testa small{color:var(--inchiostro-tenue);font-size:12px} .gruppo-testa button{margin-left:auto;width:auto;height:32px;padding:0 12px;border-radius:999px;font-size:13px} .gruppo-testa.ruolo-publication{border-color:var(--azione)}.gruppo-testa.ruolo-analysis{border-color:#B07E00}.gruppo-testa.ruolo-index{border-color:#2F7D4F}.gruppo-testa.ruolo-sku{border-color:#6B6F76} .smista-barra{position:sticky;top:0;z-index:5;background:#fff;margin:12px -4px 10px;padding:8px 4px;display:grid;gap:8px} .smista-barra[hidden]{display:none} .smista-guida{margin:0;font-size:13px;line-height:1.4;font-weight:600} .smista-gruppi{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;grid-auto-flow:column} .smista-barra button{width:auto;height:38px;padding:0 14px;border-radius:999px;font-size:13px} .smista-barra .pennello{height:auto;min-height:52px;padding:6px 8px;border-radius:12px;display:grid;gap:2px;background:#fff;border:2px solid currentColor;line-height:1.2} .smista-barra .pennello b{font-size:14px} .smista-barra .pennello small{font-size:11px;font-weight:500;opacity:.85} .smista-barra .pennello.ruolo-analysis{color:#8A5A00}.smista-barra .pennello.ruolo-index{color:#2F7D4F}.smista-barra .pennello.ruolo-sku{color:#55595F} .smista-barra .pennello.attivo{color:#fff} .smista-barra .pennello.attivo.ruolo-analysis{background:#B07E00;border-color:#B07E00}.smista-barra .pennello.attivo.ruolo-index{background:#2F7D4F;border-color:#2F7D4F}.smista-barra .pennello.attivo.ruolo-sku{background:#6B6F76;border-color:#6B6F76} .smista-azioni{display:flex;gap:8px;flex-wrap:wrap}