/* Backoffice di Davide: "quaderno di spedizione". Stessi caratteri del sito (Fraunces, Source Sans 3), ma carta più calda,
   barra laterale blu notte con le curve di livello e l'oro come accento: si capisce subito di non essere sul sito. */
:root {
  --notte:#1b3142; --notte-2:#244257; --carta:#f4ecdc; --foglio:#fffbf2; --linea:#ddd0b6; --inchiostro:#22313c; --tenue:#6b6658;
  --oro:#c49a4a; --oro-chiaro:#f1dfb6; --blu:#266786; --blu-scuro:#1c4f68; --rosso:#a5432f; --verde:#3f7a4d;
  --ombra:0 1px 2px rgb(40 30 10 / .08), 0 6px 18px rgb(40 30 10 / .07);
  font: 16px/1.5 "Source Sans 3", system-ui, sans-serif; color: var(--inchiostro);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--carta); min-height: 100vh; }
h1, h2, h3 { font-family: Fraunces, Georgia, serif; font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
a { color: var(--blu); }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.tenue { color: var(--tenue); }
.piccolo { font-size: .88rem; }

/* ---------- accesso ---------- */
.accesso { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: var(--notte) url("topo.svg") center/900px repeat; }
.accesso form { width: min(380px, 100%); background: var(--foglio); border-radius: 14px; padding: 32px 28px; box-shadow: 0 20px 60px rgb(0 0 0 / .35); border-top: 6px solid var(--oro); }
.accesso .marchio { margin-bottom: 20px; }

.marchio { display: flex; align-items: center; gap: 12px; }
.marchio img { width: 46px; height: auto; }
.marchio b { display: block; font-family: Fraunces, Georgia, serif; font-size: 1.15rem; line-height: 1.15; }
.marchio small { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--oro); }

/* ---------- impianto ---------- */
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.lato { background: var(--notte) url("topo.svg") 0 0/700px repeat; color: #efe6d2; padding: 22px 16px; display: flex; flex-direction: column; gap: 26px; position: sticky; top: 0; height: 100vh; }
.lato .marchio b { color: #fff; }
.lato nav { display: grid; gap: 4px; }
.lato nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px; color: #e9dfca; text-decoration: none; font-weight: 600; }
.lato nav a svg { width: 20px; height: 20px; flex: none; opacity: .85; }
.lato nav a:hover { background: rgb(255 255 255 / .07); }
.lato nav a[aria-current="page"] { background: var(--oro-chiaro); color: var(--notte); }
.lato .badge { margin-left: auto; min-width: 22px; padding: 0 6px; border-radius: 99px; background: var(--oro); color: var(--notte); font-size: .78rem; text-align: center; }
.lato .fondo { margin-top: auto; display: grid; gap: 6px; font-size: .9rem; }
.lato .fondo a, .lato .fondo button { color: #d8ccb2; background: none; border: 0; padding: 6px 12px; text-align: left; cursor: pointer; text-decoration: none; }
.lato .fondo a:hover, .lato .fondo button:hover { color: #fff; }
main.vista { padding: clamp(18px, 3vw, 36px); min-width: 0; }
.testa-vista { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px; margin-bottom: 22px; }
.testa-vista p { margin: 0; }

/* ---------- pezzi comuni ---------- */
.foglio { background: var(--foglio); border: 1px solid var(--linea); border-radius: 12px; padding: 20px 22px; box-shadow: var(--ombra); }
.griglia { display: grid; gap: 18px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 9px; border: 1px solid var(--linea); background: var(--foglio); cursor: pointer; font-weight: 600; text-decoration: none; color: var(--inchiostro); }
.btn:hover { border-color: var(--oro); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--blu { background: var(--blu); border-color: var(--blu); color: #fff; }
.btn--blu:hover { background: var(--blu-scuro); }
.btn--rosso { color: var(--rosso); }
.btn--piccolo { min-height: 32px; padding: 4px 10px; font-size: .88rem; }
.btn--pubblica { min-height: 56px; padding: 12px 28px; font-size: 1.12rem; background: var(--oro); border-color: #a77f34; color: var(--notte); box-shadow: 0 3px 0 #9c7630; }
.btn--pubblica:hover:not(:disabled) { background: #d2a956; }
.btn--pubblica:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #9c7630; }
label { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; }
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=search], input[type=number], textarea, select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--linea); border-radius: 8px; background: #fff; font-weight: 400; font-size: 1rem; }
input:focus, textarea:focus, select:focus, .btn:focus-visible { outline: 2px solid var(--oro); outline-offset: 1px; }
textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.errore { color: var(--rosso); font-weight: 600; }
.vuoto { padding: 26px; text-align: center; color: var(--tenue); border: 1px dashed var(--linea); border-radius: 12px; }
.avviso { padding: 12px 16px; border-radius: 10px; background: #fbf1d9; border: 1px solid #ead29b; }
.avviso--rosso { background: #f8e3dc; border-color: #e2b4a6; }

/* ---------- home ---------- */
.pubblica-box { display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: center; border-top: 6px solid var(--oro); }
.pubblica-box h2 { margin-bottom: 6px; }
.elenco-bozze { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; grid-column: 1 / -1; }
.elenco-bozze li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; background: #fff; border: 1px solid var(--linea); border-radius: 8px; }
.elenco-bozze li .nome { font-weight: 600; flex: 1; min-width: 180px; }
.etichetta { font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: var(--oro-chiaro); color: #6d5320; }
.etichetta--rosso { background: #f3d3c9; color: var(--rosso); }
.scorciatoie { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.scorciatoia { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.scorciatoia:hover { border-color: var(--oro); }
.scorciatoia b { font-family: Fraunces, Georgia, serif; font-size: 1.1rem; }
.storico { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.storico li { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }

/* ---------- editor ---------- */
.editor { display: grid; grid-template-columns: 250px 1fr 290px; gap: 16px; align-items: start; }
.editor .pagine { max-height: calc(100vh - 120px); overflow: auto; padding: 14px; position: sticky; top: 16px; }
.pagine ul { list-style: none; margin: 0; padding: 0; }
.pagine li ul { margin: 2px 0 8px 12px; padding-left: 8px; border-left: 2px solid var(--linea); }
.pagine .gruppo { font-family: Fraunces, Georgia, serif; font-weight: 600; margin: 10px 0 2px; font-size: .98rem; }
.pagine button { display: flex; width: 100%; gap: 6px; align-items: center; text-align: left; border: 0; background: none; padding: 5px 8px; border-radius: 7px; cursor: pointer; font-size: .93rem; }
.pagine button:hover:not(:disabled) { background: var(--oro-chiaro); }
.pagine button[aria-current="true"] { background: var(--blu); color: #fff; }
.pagine button:disabled { color: #aaa098; cursor: default; }
.pagine .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--oro); flex: none; margin-left: auto; }
.tela { display: grid; gap: 10px; min-width: 0; }
.tela .barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.tela iframe { width: 100%; height: calc(100vh - 150px); min-height: 520px; border: 1px solid var(--linea); border-radius: 12px; background: #fff; box-shadow: var(--ombra); }
.strumenti { position: sticky; top: 16px; display: grid; gap: 14px; max-height: calc(100vh - 32px); overflow: auto; }
.strumenti h3 { margin-bottom: 8px; }
.strumenti .gruppo-btn { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.strumenti .gruppo-btn .btn { flex: 1 1 auto; }
.strumenti .btn[aria-pressed="true"] { background: var(--notte); color: #fff; border-color: var(--notte); }
.strumenti .titoletto { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); margin: 4px 0 6px; }
.stato-salvataggio { font-size: .9rem; color: var(--tenue); }
.stato-salvataggio.da-salvare { color: var(--rosso); font-weight: 600; }

/* ---------- conferenze e contatti ---------- */
.due-colonne { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 18px; align-items: start; }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista button { width: 100%; text-align: left; border: 1px solid var(--linea); background: var(--foglio); border-radius: 10px; padding: 10px 14px; cursor: pointer; }
.lista button:hover { border-color: var(--oro); }
.lista button[aria-current="true"] { border-color: var(--blu); box-shadow: inset 4px 0 0 var(--blu); }
.lista b { display: block; }
.scaletta { list-style: none; counter-reset: punto; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.scaletta li { counter-increment: punto; display: grid; grid-template-columns: 30px 1fr 80px auto; gap: 8px; align-items: center; }
.scaletta li::before { content: counter(punto); font-family: Fraunces, Georgia, serif; font-weight: 600; color: var(--oro); text-align: right; }
.scaletta .azioni { display: flex; gap: 4px; }
.totale { font-weight: 600; }
.campi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.campi .largo { grid-column: 1 / -1; }
.contatto-rapido { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.salva-riga { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 16px; }

/* ---------- dialoghi e avvisi ---------- */
dialog.chiedi { border: 0; border-radius: 14px; padding: 0; width: min(460px, 94vw); box-shadow: 0 24px 70px rgb(0 0 0 / .35); background: var(--foglio); }
dialog.chiedi::backdrop { background: rgb(20 30 40 / .55); }
dialog.chiedi form { padding: 22px; display: grid; gap: 14px; }
dialog.chiedi .azioni { display: flex; justify-content: flex-end; gap: 8px; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--notte); color: #fff; padding: 12px 20px; border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / .3); z-index: 50; max-width: 92vw; }
.toast--errore { background: var(--rosso); }

/* ---------- telefono e tablet ---------- */
@media (max-width: 1180px) {
  .editor { grid-template-columns: minmax(0, 1fr); }
  .editor .pagine { position: static; max-height: 260px; }
  .strumenti { position: static; max-height: none; order: -1; }
  .tela iframe { height: 70vh; }
}
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lato { min-width: 0; position: sticky; top: 0; z-index: 10; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 8px; }
  .lato .marchio small { display: none; }
  .lato .marchio img { width: 34px; }
  .lato nav { display: flex; overflow-x: auto; width: 100%; order: 3; }
  .lato nav a { padding: 8px 10px; white-space: nowrap; }
  .lato .fondo { margin: 0 0 0 auto; display: flex; }
  .lato .fondo .solo-largo { display: none; }
  .pubblica-box, .due-colonne { grid-template-columns: minmax(0, 1fr); }
  .scaletta li { grid-template-columns: 24px 1fr 64px; }
  .scaletta .azioni { grid-column: 2 / -1; }
}

/* ---------- stampa (scaletta per la serata) ---------- */
@media print {
  .lato, .testa-vista .btn, .lista-colonna, .salva-riga, .scaletta .azioni, .non-stampa { display: none !important; }
  .app, .due-colonne { display: block; }
  body, .foglio { background: #fff; box-shadow: none; border: 0; }
  .scaletta li { grid-template-columns: 30px 1fr 60px; }
  .scaletta input { border: 0; padding: 0; font-size: 1.1rem; }
}

/* ---------- date conferenze ---------- */
.titoletto-lista { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); margin: 0 0 8px; cursor: pointer; }

/* ---------- modalità palco: nero, testo enorme, niente distrazioni ---------- */
.palco { position: fixed; inset: 0; z-index: 100; background: #0d1820; color: #f4ecdc; display: grid; grid-template-rows: auto 1fr auto; padding: max(14px, env(safe-area-inset-top)) 18px max(14px, env(safe-area-inset-bottom)); user-select: none; }
.palco__testa, .palco__piede { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; font-size: .95rem; color: #b9ae96; }
.palco__centro { display: grid; align-content: center; justify-items: center; text-align: center; gap: 18px; padding: 10px; overflow: auto; }
.palco__punto { margin: 0; font-family: Fraunces, Georgia, serif; font-size: clamp(2rem, 7vw, 4.4rem); line-height: 1.15; font-weight: 600; max-width: 22ch; }
.palco__tempo { margin: 0; font-size: clamp(2.4rem, 9vw, 5rem); font-variant-numeric: tabular-nums; color: var(--oro-chiaro); }
.palco__tempo small { font-size: .4em; color: #b9ae96; }
.palco__tempo--oltre { color: #f0a640; }
.palco__dopo { margin: 0; font-size: clamp(1rem, 2.6vw, 1.4rem); color: #b9ae96; }
.palco__appunti { max-width: 60ch; max-height: 30vh; overflow: auto; text-align: left; white-space: pre-wrap; font-size: 1.05rem; padding: 12px 16px; border: 1px solid #34495a; border-radius: 10px; user-select: text; }
.palco__comandi { display: flex; flex-wrap: wrap; gap: 8px; }
.palco__comandi button { min-height: 46px; min-width: 46px; padding: 6px 14px; border-radius: 10px; border: 1px solid #34495a; background: #16262f; color: #f4ecdc; font-size: 1rem; cursor: pointer; }
.palco__comandi button[data-a="avanti"], .palco__comandi button[data-a="indietro"] { font-size: 1.5rem; min-width: 60px; }

/* ---------- visite ---------- */
.numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.numeri .foglio { display: grid; gap: 4px; }
.numeri b { font-family: Fraunces, Georgia, serif; font-size: 2rem; color: var(--notte); }
.barre { display: flex; align-items: flex-end; gap: 2px; height: 160px; padding-top: 8px; }
.barre span { flex: 1; min-width: 2px; height: max(2px, var(--h)); background: var(--blu); border-radius: 3px 3px 0 0; opacity: .85; }
.barre span:hover { background: var(--oro); opacity: 1; }
.barre-asse { display: flex; justify-content: space-between; font-size: .8rem; color: var(--tenue); margin-top: 6px; }
.due-colonne--pari { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.classifica { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; }
.classifica li span { display: inline; }
.classifica li { padding-bottom: 6px; border-bottom: 1px dashed var(--linea); }
.classifica li b { float: right; font-variant-numeric: tabular-nums; }

/* accesso e primo accesso: campi distanziati */
.accesso form { display: grid; gap: 12px; }
.accesso .errore:empty { display: none; }