/* YellowSuite — contratto.yellowsuite.it */
:root {
  --giallo: #F5C300;
  --giallo-scuro: #D4A800;
  --giallo-tenue: #FFF6CC;
  --inchiostro: #18181B;
  --testo: #27272A;
  --testo-2: #6B6B70;
  --testo-3: #9A9AA0;
  --fondo: #F6F6F4;
  --superficie: #FFFFFF;
  --bordo: #E7E7E4;
  --bordo-forte: #D6D6D2;
  --verde: #32CC77;
  --verde-tenue: #E6F8EE;
  --verde-testo: #137A43;
  --arancio: #FF4F31;
  --arancio-tenue: #FFECE8;
  --arancio-testo: #B8321B;
  --ombra: 0 1px 2px rgba(24,24,27,.05), 0 6px 18px -10px rgba(24,24,27,.18);
  --raggio: 14px;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--testo);
  font: 500 15px/1.55 "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--inchiostro); text-decoration-color: var(--giallo-scuro); text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; color: var(--inchiostro); letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: 28px; font-weight: 800; line-height: 1.2; }
h2 { font-size: 19px; font-weight: 800; }
h3 { font-size: 15px; font-weight: 800; }
.muto { color: var(--testo-2); }
.piccolo { font-size: 13px; }
.etichetta { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--testo-2); }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; }
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Testata ─────────────────────────────────────── */
.testata {
  background: var(--superficie); border-bottom: 1px solid var(--bordo);
  padding-block: 14px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.testata .dentro { max-width: 1040px; margin: 0 auto; display: flex; align-items: center; gap: 16px; }
.testata img { width: 138px; height: auto; display: block; }
.testata .dx { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; }
.pagina {
  max-width: 1040px; margin: 0 auto; padding-block: 32px 64px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.stretta { max-width: 760px; }
.piede { text-align: center; color: var(--testo-3); font-size: 12px; padding: 0 16px 32px; }

/* ── Elementi ────────────────────────────────────── */
.scheda { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 24px; }
.scheda + .scheda { margin-top: 16px; }
.pila { display: flex; flex-direction: column; gap: 16px; }
.riga { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.griglia { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tasto {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px;
  padding: 12px 18px; font-weight: 800; background: var(--giallo); color: var(--inchiostro); cursor: pointer; text-decoration: none;
}
.tasto:hover { background: var(--giallo-scuro); }
.tasto:disabled { opacity: .5; cursor: default; }
.tasto.secondario { background: var(--superficie); border: 1px solid var(--bordo-forte); }
.tasto.secondario:hover { background: var(--fondo); }
.tasto.piccolo { padding: 8px 12px; font-size: 13px; border-radius: 10px; }
.tasto.pericolo { background: var(--superficie); color: var(--arancio-testo); border: 1px solid #F3C2B8; }
.link { background: none; border: 0; padding: 0; font-weight: 700; color: var(--inchiostro); text-decoration: underline; text-decoration-color: var(--giallo-scuro); text-underline-offset: 3px; cursor: pointer; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > span { font-size: 13px; font-weight: 700; color: var(--testo-2); }
.campo input, .campo select, .campo textarea {
  width: 100%; border: 1px solid var(--bordo-forte); border-radius: 10px; padding: 11px 12px; background: var(--superficie);
}
.campo textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .spunta input:focus-visible { outline: 3px solid var(--giallo-tenue); border-color: var(--giallo-scuro); }
.spunta { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--bordo); border-radius: 12px; background: var(--superficie); cursor: pointer; }
.spunta input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--inchiostro); flex: none; }
.spunta:has(input:checked) { border-color: var(--giallo-scuro); background: #FFFCEB; }
.avviso { padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.avviso.errore { background: var(--arancio-tenue); color: var(--arancio-testo); }
.avviso.ok { background: var(--verde-tenue); color: var(--verde-testo); }
.avviso.info { background: var(--giallo-tenue); color: #6B5400; }
.stato { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; background: var(--fondo); color: var(--testo-2); white-space: nowrap; }
.stato::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stato.attivo, .stato.accettato { background: var(--verde-tenue); color: var(--verde-testo); }
.stato.in_attesa, .stato.inviato { background: var(--giallo-tenue); color: #7A6000; }
.stato.sospeso, .stato.annullato { background: var(--arancio-tenue); color: var(--arancio-testo); }
.dati { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.dati dt { color: var(--testo-2); }
.dati dd { margin: 0; color: var(--inchiostro); font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.tabella-wrap { overflow-x: auto; }
table.elenco { width: 100%; border-collapse: collapse; font-size: 14px; }
table.elenco th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--testo-2); padding: 10px 12px; border-bottom: 1px solid var(--bordo); white-space: nowrap; }
table.elenco td { padding: 12px; border-bottom: 1px solid var(--bordo); vertical-align: top; }
table.elenco tr.cliccabile { cursor: pointer; }
table.elenco tr.cliccabile:hover td { background: #FBFBF9; }
.chip { display: inline-block; padding: 4px 10px; border-radius: 8px; background: var(--fondo); border: 1px solid var(--bordo); font-size: 13px; font-weight: 700; margin: 0 6px 6px 0; }

/* ── Documento ───────────────────────────────────── */
.doc-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
.indice { position: sticky; top: 20px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.indice a { text-decoration: none; color: var(--testo-2); padding: 6px 10px; border-radius: 8px; font-weight: 600; }
.indice a:hover { background: var(--superficie); color: var(--inchiostro); }
.intestazione-doc { display: flex; flex-direction: column; gap: 10px; padding-bottom: 22px; margin-bottom: 8px; border-bottom: 3px solid var(--giallo); }
.testo-doc { max-width: 68ch; font-size: 15.5px; line-height: 1.7; color: var(--testo); }
.testo-doc h1 { font-size: 24px; margin: 28px 0 12px; }
.testo-doc h2 { font-size: 19px; margin: 36px 0 10px; scroll-margin-top: 16px; }
.testo-doc h3 { font-size: 16px; margin: 24px 0 8px; scroll-margin-top: 16px; }
.testo-doc p { margin: 0 0 14px; }
.testo-doc ul, .testo-doc ol { margin: 0 0 16px; padding-left: 22px; }
.testo-doc li { margin-bottom: 6px; }
.testo-doc strong { color: var(--inchiostro); }
.testo-doc .tabella { overflow-x: auto; margin: 6px 0 18px; border: 1px solid var(--bordo); border-radius: 12px; background: var(--superficie); }
.testo-doc table { border-collapse: collapse; width: 100%; font-size: 14px; }
.testo-doc th { background: var(--fondo); text-align: left; font-weight: 800; color: var(--inchiostro); }
.testo-doc th, .testo-doc td { padding: 10px 14px; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.testo-doc tr:last-child td { border-bottom: 0; }
.impronta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12px; color: var(--testo-3); }

/* ── Ordine ──────────────────────────────────────── */
.passi { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--testo-3); }
.passi span { display: inline-flex; align-items: center; gap: 8px; }
.passi span b { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--superficie); border: 1px solid var(--bordo-forte); font-size: 12px; }
.passi span.ora { color: var(--inchiostro); }
.passi span.ora b { background: var(--giallo); border-color: var(--giallo); }
.passi span.fatto b { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }
.passi i { width: 18px; height: 1px; background: var(--bordo-forte); align-self: center; }
details.doc-aperto { border: 1px solid var(--bordo); border-radius: 12px; background: var(--superficie); }
details.doc-aperto summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; gap: 12px; align-items: center; font-weight: 800; color: var(--inchiostro); }
details.doc-aperto summary::-webkit-details-marker { display: none; }
details.doc-aperto summary .ico { margin-left: auto; transition: transform .15s; }
details.doc-aperto[open] summary .ico { transform: rotate(180deg); }
details.doc-aperto .corpo { border-top: 1px solid var(--bordo); padding: 8px 20px 12px; max-height: 60vh; overflow: auto; }
.clausole { margin: 10px 0 0; padding-left: 20px; font-size: 14px; color: var(--testo); }
.clausole li { margin-bottom: 4px; }
.codice-otp { font: 800 28px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .45em; text-align: center; max-width: 280px; }
.sede-card { border: 1px solid var(--bordo); border-radius: 12px; padding: 14px 16px; background: var(--superficie); display: flex; flex-direction: column; gap: 4px; }
.fatto-grande { text-align: center; padding: 28px 8px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fatto-grande .cerchio { width: 64px; height: 64px; border-radius: 50%; background: var(--verde-tenue); color: var(--verde-testo); display: grid; place-items: center; }
.fatto-grande .cerchio .ico { width: 32px; height: 32px; stroke-width: 2.5; }

/* ── Back office ─────────────────────────────────── */
.schede-nav { display: flex; gap: 4px; }
.schede-nav a { padding: 8px 12px; border-radius: 10px; text-decoration: none; font-weight: 700; color: var(--testo-2); font-size: 14px; }
.schede-nav a[aria-current="page"] { background: var(--giallo-tenue); color: var(--inchiostro); }
.titolo-sezione { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.titolo-sezione .dx { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.scelte { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.scelta { border: 1px solid var(--bordo-forte); border-radius: 12px; padding: 14px; display: flex; gap: 12px; cursor: pointer; background: var(--superficie); }
.scelta input { accent-color: var(--inchiostro); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.scelta:has(input:checked) { border-color: var(--giallo-scuro); background: #FFFCEB; }
.scelta small { display: block; color: var(--testo-2); font-weight: 500; font-size: 13px; }
.barra-salva { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--fondo) 30%); padding: 20px 0 8px; display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.dialogo { position: fixed; inset: 0; background: rgba(24,24,27,.45); display: grid; place-items: center; padding: 16px; z-index: 20; }
.dialogo .scheda { width: min(640px, 100%); max-height: 90vh; overflow: auto; }
.login { max-width: 400px; margin: 8vh auto 0; }
textarea.testo-md { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; min-height: 340px; }

@media (max-width: 820px) {
  .doc-layout { grid-template-columns: 1fr; gap: 16px; }
  .indice { display: none; }
  h1 { font-size: 24px; }
  .scheda { padding: 18px; }
  .dati { grid-template-columns: 1fr; gap: 2px; }
  .dati dd { margin-bottom: 10px; }
  .testata img { width: 118px; }
}
.sel-versione { border: 1px solid var(--bordo-forte); border-radius: 8px; padding: 4px 8px; background: var(--superficie); }