/* ==========================================================================
   RistoMood 3D — render personalizzati dei prodotti
   Token «Ferro e Carta» copiati da ristoMood/frontend/pannelloNuovo/assets/
   css/servizio.css (fonte: docs/DESIGN.md). Questo dominio ha la sua
   open_basedir e non vede quel file: se cambia un valore là, va copiato qui.
   Carta al chiaro, Ferro allo scuro (segue il sistema operativo).
   ========================================================================== */
:root {
  --carta-0:#FFFDF9; --carta-1:#FAF7F1; --carta-2:#F2EEE6; --carta-3:#E4DED2; --carta-4:#CDC5B6;
  --inchiostro-1:#1A1713; --inchiostro-2:#4A443B; --inchiostro-3:#6B6459;
  --ferro-0:#14120F; --ferro-1:#1E1B17; --ferro-2:#2A2620; --ferro-3:#3D372F; --ferro-4:#574F44;
  --luce-1:#FBF8F3; --luce-2:#CFC7BA; --luce-3:#A69D8E;

  --st-pronto-fondo:#DFF2E3; --st-pronto-bordo:#4E9C60; --st-pronto-testo:#14532B; --st-pronto-pieno:#2F7D46;
  --st-ritardo-fondo:#FBE3DE; --st-ritardo-bordo:#C4442E; --st-ritardo-testo:#7C1E12; --st-ritardo-pieno:#B3341F;
  --st-lavor-fondo:#FDF0D6; --st-lavor-bordo:#A87B1B; --st-lavor-testo:#6B4A00; --st-lavor-pieno:#8A630F;

  --raggio-1:6px; --raggio-2:12px; --raggio-pillola:999px;
  --ombra-sollevata:0 12px 32px rgba(26,23,19,.18);
  --font-ui:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-num:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --t-micro:12px; --t-piccolo:14px; --t-base:16px; --t-medio:18px; --t-titolo:22px; --t-pagina:28px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --durata-stato:120ms; --durata-pannello:180ms; --curva:cubic-bezier(.2,0,0,1);

  --fondo-0:var(--carta-0); --fondo-1:var(--carta-1); --fondo-2:var(--carta-2);
  --bordo-1:var(--carta-3); --bordo-2:var(--carta-4);
  --testo-1:var(--inchiostro-1); --testo-2:var(--inchiostro-2); --testo-3:var(--inchiostro-3);
  --velo:var(--inchiostro-1);
  --azione-fondo:var(--testo-1); --azione-testo:var(--fondo-0); --azione-hover:var(--testo-2);
  --bordo:1px solid var(--bordo-1);
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo-0:var(--ferro-0); --fondo-1:var(--ferro-1); --fondo-2:var(--ferro-2);
    --bordo-1:var(--ferro-3); --bordo-2:var(--ferro-4);
    --testo-1:var(--luce-1); --testo-2:var(--luce-2); --testo-3:var(--luce-3);
    --velo:var(--ferro-0);
  }
}

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; height:100%; }
body { background:var(--fondo-0); color:var(--testo-1); font:400 var(--t-base)/1.45 var(--font-ui); -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
.num { font-family:var(--font-num); font-variant-numeric:tabular-nums; }
button,input,select { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--testo-1); outline-offset:2px; }
[hidden] { display:none !important; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }

/* ---- Testata ---- */
.testa { display:flex; align-items:center; gap:var(--sp-3); min-height:56px; padding:0 var(--sp-4); border-bottom:var(--bordo); background:var(--fondo-0); }
.marchio { display:flex; align-items:baseline; gap:var(--sp-2); font-weight:600; font-size:var(--t-medio); text-decoration:none; color:var(--testo-1); }
.marchio small { font:600 var(--t-micro)/1 var(--font-num); color:var(--testo-3); letter-spacing:.08em; }
.testa nav { margin-left:auto; display:flex; gap:var(--sp-1); }
.testa nav a { display:inline-flex; align-items:center; gap:var(--sp-2); min-height:44px; padding:0 var(--sp-3); border-radius:var(--raggio-1); color:var(--testo-2); text-decoration:none; font-size:var(--t-piccolo); font-weight:600; }
.testa nav a:hover { background:var(--fondo-2); color:var(--testo-1); }
.testa nav a[aria-current="page"] { color:var(--testo-1); background:var(--fondo-2); }
.testa nav a i { font-size:18px; }
@media (max-width:520px) { .testa nav a span { display:none; } .testa nav a { width:44px; justify-content:center; padding:0; } }

/* ---- Bottoni ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:44px; padding:0 var(--sp-4); border-radius:var(--raggio-1); border:var(--bordo); background:var(--fondo-1); color:var(--testo-1); font-size:var(--t-piccolo); font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background var(--durata-stato) var(--curva); }
.btn:hover { background:var(--fondo-2); }
.btn.pieno { background:var(--azione-fondo); color:var(--azione-testo); border-color:transparent; }
.btn.pieno:hover { background:var(--azione-hover); }
.btn.lieve { background:transparent; border-color:transparent; color:var(--testo-2); }
.btn.lieve:hover { background:var(--fondo-2); color:var(--testo-1); }
.btn.solo { width:44px; padding:0; }
.btn.attivo { background:var(--testo-1); color:var(--fondo-0); border-color:transparent; }
.btn[disabled] { color:var(--testo-3); cursor:default; background:var(--fondo-1); }
.btn i { font-size:18px; }
.btn.grande { min-height:52px; font-size:var(--t-base); }

/* ---- Campi ---- */
.campo { display:flex; flex-direction:column; gap:var(--sp-1); }
.campo > span { font-size:var(--t-micro); font-weight:600; color:var(--testo-2); text-transform:uppercase; letter-spacing:.06em; }
.inp { min-height:44px; padding:0 var(--sp-3); border:1px solid var(--bordo-2); border-radius:var(--raggio-1); background:var(--fondo-0); width:100%; font-size:var(--t-base); }
.inp:focus { outline:2px solid var(--testo-1); outline-offset:0; border-color:transparent; }
input[type=range] { width:100%; accent-color:var(--testo-1); min-height:32px; }
.spunta { display:flex; align-items:center; gap:var(--sp-2); min-height:44px; font-size:var(--t-piccolo); color:var(--testo-2); cursor:pointer; }
.spunta input { width:20px; height:20px; accent-color:var(--testo-1); }

/* ---- Configuratore: palco + pannello ---- */
.app { display:grid; grid-template-columns:minmax(0,1fr) 380px; height:calc(100dvh - 57px); }
.palco { position:relative; min-height:0; background:var(--fondo-2); overflow:hidden; touch-action:none; }
.palco canvas { display:block; width:100%; height:100%; }
.palco-nota { position:absolute; left:50%; bottom:var(--sp-4); transform:translateX(-50%); padding:var(--sp-2) var(--sp-3); border-radius:var(--raggio-1); background:color-mix(in srgb, var(--fondo-0) 88%, transparent); border:var(--bordo); font-size:var(--t-micro); font-weight:600; color:var(--testo-2); pointer-events:none; white-space:nowrap; }
.palco-strum { position:absolute; top:var(--sp-3); right:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2); }
.palco-strum .btn { background:var(--fondo-0); }
.palco-carica { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--testo-2); font-size:var(--t-piccolo); font-weight:600; background:var(--fondo-2); }

.pannello { border-left:var(--bordo); background:var(--fondo-0); display:flex; flex-direction:column; min-height:0; }
.pannello-corpo { flex:1; overflow-y:auto; padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-5); }
.sez { display:flex; flex-direction:column; gap:var(--sp-3); }
.sez-titolo { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-2); margin:0; font-size:var(--t-micro); font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--testo-2); }
.sez-titolo em { font-style:normal; text-transform:none; letter-spacing:0; font-size:var(--t-piccolo); font-weight:500; color:var(--testo-1); }
.pannello-piede { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); border-top:var(--bordo); background:var(--fondo-0); padding-bottom:max(var(--sp-3), env(safe-area-inset-bottom)); }

@media (max-width:860px) {
  .app { display:block; height:auto; }
  .palco { position:sticky; top:0; z-index:2; height:52dvh; border-bottom:var(--bordo); }
  .pannello { border-left:0; }
  .pannello-corpo { overflow:visible; padding-bottom:var(--sp-6); }
  .pannello-piede { position:sticky; bottom:0; z-index:3; }
}

/* ---- Prodotti ---- */
.prodotti { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2); }
@media (max-width:860px) { .prodotti { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(-1 * var(--sp-4)); padding:0 var(--sp-4) var(--sp-1); } .prodotti .prod { flex:0 0 112px; scroll-snap-align:start; } }
.prod { display:flex; flex-direction:column; gap:var(--sp-1); padding:var(--sp-1); border:var(--bordo); border-radius:var(--raggio-1); background:var(--fondo-1); cursor:pointer; text-align:left; transition:border-color var(--durata-stato) var(--curva); }
.prod img, .prod .prod-vuota { width:100%; aspect-ratio:1; object-fit:contain; border-radius:4px; background:var(--fondo-2); display:flex; align-items:center; justify-content:center; color:var(--testo-3); font-size:28px; }
.prod span { font-size:var(--t-micro); font-weight:600; line-height:1.25; padding:0 var(--sp-1) var(--sp-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prod[aria-pressed="true"] { border:2px solid var(--testo-1); padding:3px; }

/* ---- Colori ---- */
.colori { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.col { width:44px; height:44px; border-radius:50%; border:1px solid rgba(0,0,0,.18); padding:0; cursor:pointer; position:relative; }
.col[aria-pressed="true"]::after { content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--testo-1); }

/* ---- Logo ---- */
.logo-riga { display:flex; align-items:center; gap:var(--sp-3); }
.logo-anteprima { flex:none; width:64px; height:64px; border-radius:var(--raggio-1); border:var(--bordo); background:var(--fondo-1) repeating-conic-gradient(var(--fondo-2) 0 25%, transparent 0 50%) 0 0/12px 12px; display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--testo-3); font-size:24px; }
.logo-anteprima img { max-width:100%; max-height:100%; }
.logo-az { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.cursore { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--sp-3); font-size:var(--t-piccolo); color:var(--testo-2); }
.cursore output { min-width:56px; text-align:right; color:var(--testo-1); }

/* ---- Sfondi ---- */
.sfondi { display:flex; gap:var(--sp-2); }
.sfondo { flex:1; min-height:44px; border-radius:var(--raggio-1); border:var(--bordo); cursor:pointer; font-size:var(--t-micro); font-weight:600; }
.sfondo[aria-pressed="true"] { outline:2px solid var(--testo-1); outline-offset:2px; }

/* ---- Foglio dal basso / dialogo ---- */
.velo { position:fixed; inset:0; z-index:50; background:color-mix(in srgb, var(--velo) 45%, transparent); display:flex; align-items:center; justify-content:center; padding:var(--sp-4); }
.foglio { width:min(480px,100%); background:var(--fondo-0); border-radius:var(--raggio-2); box-shadow:var(--ombra-sollevata); padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-4); animation:entra var(--durata-pannello) var(--curva); }
.foglio h2 { margin:0; font-size:var(--t-titolo); font-weight:600; }
.foglio p { margin:0; color:var(--testo-2); font-size:var(--t-piccolo); }
.foglio-az { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--sp-2); }
.link-box { display:flex; gap:var(--sp-2); }
.link-box .inp { font-family:var(--font-num); font-size:var(--t-piccolo); }
@media (max-width:560px) { .velo { align-items:flex-end; padding:0; } .foglio { border-radius:var(--raggio-2) var(--raggio-2) 0 0; padding-bottom:max(var(--sp-5), env(safe-area-inset-bottom)); } }
@keyframes entra { from { transform:translateY(12px); opacity:0; } }

/* ---- Toast ---- */
.toast { position:fixed; left:50%; bottom:calc(var(--sp-6) + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:60; max-width:calc(100% - 32px); padding:var(--sp-3) var(--sp-4); border-radius:var(--raggio-1); background:var(--testo-1); color:var(--fondo-0); font-size:var(--t-piccolo); font-weight:600; box-shadow:var(--ombra-sollevata); }
.toast.errore { background:var(--st-ritardo-pieno); color:var(--luce-1); }

/* ---- Accesso ---- */
.accesso { min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:var(--sp-4); }
.accesso form { width:min(360px,100%); display:flex; flex-direction:column; gap:var(--sp-4); }
.accesso h1 { margin:0; font-size:var(--t-pagina); font-weight:600; }
.accesso p { margin:0; color:var(--testo-2); font-size:var(--t-piccolo); }
.errore-testo { color:var(--st-ritardo-testo); font-size:var(--t-piccolo); font-weight:600; }
@media (prefers-color-scheme: dark) { .errore-testo { color:#F0A090; } }

/* ---- Catalogo ---- */
.pagina { max-width:1100px; margin:0 auto; padding:var(--sp-5) var(--sp-4) var(--sp-7); display:flex; flex-direction:column; gap:var(--sp-5); }
.pagina-testa { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); }
.pagina-testa h1 { margin:0; font-size:var(--t-pagina); font-weight:600; flex:1; }
.cat-lista { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr)); gap:var(--sp-4); }
.cat-card { border:var(--bordo); border-radius:var(--raggio-2); background:var(--fondo-1); overflow:hidden; display:flex; flex-direction:column; }
.cat-card img, .cat-card .prod-vuota { width:100%; aspect-ratio:4/3; object-fit:contain; background:var(--fondo-2); display:flex; align-items:center; justify-content:center; color:var(--testo-3); font-size:32px; }
.cat-card-corpo { padding:var(--sp-3) var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); }
.cat-card h2 { margin:0; font-size:var(--t-medio); font-weight:600; }
.cat-meta { font-size:var(--t-micro); color:var(--testo-3); }
.mini-pal { display:flex; gap:4px; flex-wrap:wrap; }
.mini-pal i { width:16px; height:16px; border-radius:50%; border:1px solid rgba(0,0,0,.18); }
.cat-card-az { display:flex; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-top:var(--bordo); background:var(--fondo-0); }
.cat-card-az .spinta { margin-left:auto; }
.vuoto { border:1px dashed var(--bordo-2); border-radius:var(--raggio-2); padding:var(--sp-7) var(--sp-5); text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); color:var(--testo-2); }
.vuoto i { font-size:40px; color:var(--testo-3); }

/* Editor prodotto: stesso impianto del configuratore */
.pal-ed { display:flex; flex-direction:column; gap:var(--sp-2); }
.pal-riga { display:grid; grid-template-columns:44px 1fr 44px; gap:var(--sp-2); align-items:center; }
.pal-riga input[type=color] { width:44px; height:44px; padding:0; border:var(--bordo); border-radius:50%; background:none; cursor:pointer; overflow:hidden; }
.pal-riga input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
.pal-riga input[type=color]::-webkit-color-swatch { border:0; border-radius:50%; }
.pal-riga input[type=color]::-moz-color-swatch { border:0; border-radius:50%; }
.segmenti { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.segmenti .btn { flex:1; }
.dim { font-size:var(--t-piccolo); color:var(--testo-2); }
.file-zona { border:1px dashed var(--bordo-2); border-radius:var(--raggio-2); padding:var(--sp-5); text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); color:var(--testo-2); font-size:var(--t-piccolo); }
.file-zona i { font-size:32px; color:var(--testo-3); }

/* ---- Vista pubblica ---- */
.vista { height:100dvh; display:flex; flex-direction:column; }
.vista .palco { flex:1; }
.vista-piede { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-top:var(--bordo); background:var(--fondo-0); padding-bottom:max(var(--sp-3), env(safe-area-inset-bottom)); }
.vista-piede h1 { margin:0; font-size:var(--t-medio); font-weight:600; line-height:1.2; }
.vista-piede p { margin:0; font-size:var(--t-piccolo); color:var(--testo-2); display:flex; align-items:center; gap:var(--sp-2); }
.vista-piede .spinta { margin-left:auto; }
.pallino { width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.18); display:inline-block; }

/* ---- Elementi, posizioni e quote ---- */
.chips { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.chips .btn { min-height:40px; }
.quote { display:flex; flex-direction:column; gap:var(--sp-2); }
.quote-griglia { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); }
.inp-mm { position:relative; display:block; }
.inp-mm .inp { padding-right:40px; text-align:right; font-family:var(--font-num); font-variant-numeric:tabular-nums; }
.inp-mm em { position:absolute; right:var(--sp-3); top:50%; transform:translateY(-50%); font-style:normal; font-size:var(--t-micro); font-weight:600; color:var(--testo-3); pointer-events:none; }
.riquadro { display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-3); border:var(--bordo); border-radius:var(--raggio-2); background:var(--fondo-1); }
.riquadro-testa { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--t-piccolo); font-weight:600; }
.riquadro-testa .spinta { margin-left:auto; }
.qr-riga { display:flex; gap:var(--sp-2); }
.qr-riga .inp { flex:1; min-width:0; font-size:var(--t-piccolo); }

/* ---- Vista cliente: giro a immagini ---- */
.palco.giro { cursor:grab; user-select:none; -webkit-user-select:none; }
.palco.giro:active { cursor:grabbing; }
.palco.giro img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.palco.giro:focus-visible { outline:2px solid var(--testo-1); outline-offset:-2px; }