/* Turni: procedura guidata. Palette desaturata, contrasti AA, focus sempre visibile. */
:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; color: #22262a; background: #e9ebe7; -webkit-font-smoothing: antialiased; font-size: 14px; }
a { color: #476482; } a:hover { color: #2d4256; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; padding: 0; text-align: left; }
button:disabled { cursor: default; }
input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #476482; outline-offset: 2px; }
[hidden] { display: none !important; }

.root { width: 100%; min-height: 100vh; display: flex; background: #e9ebe7; }
.rail { width: 264px; flex-shrink: 0; background: #f6f7f4; border-right: 1px solid #cdd1ca; padding: 28px 24px; display: flex; flex-direction: column; gap: 28px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; font-family: 'Archivo', 'Segoe UI', system-ui, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.steps { display: flex; flex-direction: column; gap: 6px; }
.step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; padding: 12px 10px; border-radius: 8px; align-items: start; width: 100%; }
.step:not(:disabled):hover { background: #eceee9; }
.step .n { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 18px; font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; font-size: 16px; background: #dfe2dc; color: #4b5157; }
.step .l { font-size: 14px; font-weight: 600; color: #4b5157; line-height: 20px; }
.step .s { font-size: 12px; color: #5f656b; line-height: 16px; }
.step.done .n { background: #d0ddcc; color: #35523a; }
.step.done .l { color: #22262a; }
.step.cur { background: #d6dee6; }
.step.cur .n { background: #476482; color: #f6f7f4; }
.step.cur .l, .step.cur .s { color: #2d4256; }
.rail .foot { margin-top: auto; font-size: 12px; color: #5f656b; line-height: 1.5; display: flex; flex-direction: column; gap: 10px; }
.main { flex-grow: 1; min-width: 0; max-width: 1400px; padding: 36px 40px 32px; display: flex; flex-direction: column; gap: 24px; }
.title { font-family: 'Archivo', 'Segoe UI', system-ui, sans-serif; font-weight: 700; font-size: 72px; line-height: 0.95; letter-spacing: -0.035em; margin: 0; color: #22262a; }
.title.md { font-size: 56px; }
.kicker { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #5f656b; }
.big { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
h2 { font-size: 12px; font-weight: 600; margin: 0; text-transform: uppercase; letter-spacing: 0.1em; color: #5f656b; }
.muted { color: #5f656b; }
.card { background: #f6f7f4; border: 1px solid #cdd1ca; border-radius: 8px; }
.card.rosa { background: #f3e3df; border-color: #d3aaa4; }
.card.rosa h2 { color: #74362f; }
.hint-red { font-size: 17px; font-weight: 500; color: #9c4f47; line-height: 1.4; }
.hdr { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hdr .left { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 8px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 14px; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 6px; font-size: 14px; font-weight: 500; border: 1px solid #aeb4ac; background: #f6f7f4; color: #22262a; transition: background-color 120ms ease; white-space: nowrap; }
.btn:not(:disabled):hover { background: #eceee9; }
.btn.primary { background: #476482; border-color: #476482; color: #f6f7f4; }
.btn.primary:not(:disabled):hover { background: #3a5570; }
.btn.small { height: 32px; padding: 0 12px; font-size: 13px; }
.btn.icon { width: 32px; height: 32px; padding: 0; justify-content: center; }
.btn.icon.lg { width: 44px; height: 44px; }
.btn:disabled { opacity: 0.45; }
.btn.ok { background: #4a6b4f; border-color: #4a6b4f; color: #f6f7f4; }
.btn.ok:not(:disabled):hover { background: #3d5a42; }
.btn.no { background: #8f4a42; border-color: #8f4a42; color: #f6f7f4; }
.btn.no:not(:disabled):hover { background: #7a3d36; }
.btn.xs { height: 26px; padding: 0 6px; font-size: 11px; gap: 4px; white-space: nowrap; }
.seg { display: inline-flex; border: 1px solid #aeb4ac; border-radius: 6px; overflow: hidden; }
.seg > button { height: 42px; display: inline-flex; align-items: center; padding: 0 16px; font-size: 14px; background: #f6f7f4; color: #4b5157; border-right: 1px solid #aeb4ac; }
.seg > button:last-child { border-right: none; }
.seg > button.on { background: #d6dee6; color: #2d4256; font-weight: 600; }
.seg > button:focus-visible { outline-offset: -3px; }
.lbl { font-size: 12px; font-weight: 600; color: #4b5157; letter-spacing: 0.02em; }
.field { display: flex; align-items: center; height: 44px; padding: 0 12px; border: 1px solid #aeb4ac; border-radius: 6px; background: #fbfbf9; font-size: 15px; width: 100%; }
input.field:focus { border-color: #476482; outline: 2px solid #476482; outline-offset: 0; }
input.field.invalid, input.field.invalid:focus { border-color: #b8847d; outline-color: #b8847d; background: #f3e3df; }
.fg { display: flex; flex-direction: column; gap: 6px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { text-align: left; font-size: 11px; font-weight: 600; color: #5f656b; text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 14px; border-bottom: 1px solid #cdd1ca; background: #f0f1ee; }
td { padding: 10px 14px; border-bottom: 1px solid #dfe2dc; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
td.dev { background: #ebdfc3; color: #6a4d18; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 12px; font-size: 12px; font-weight: 500; background: #dfe2dc; color: #4b5157; white-space: nowrap; }
.chip.red { background: #e8d2ce; color: #74362f; }
.chip.green { background: #d0ddcc; color: #35523a; }
.chip.amber { background: #ebdfc3; color: #6a4d18; }
.chip.blue { background: #d6dee6; color: #2d4256; }
.alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 6px; font-size: 13px; line-height: 1.45; }
.alert.amber { background: #ebdfc3; border: 1px solid #c2a86a; color: #6a4d18; }
.alert.red { background: #e8d2ce; border: 1px solid #b8847d; color: #74362f; }
.alert.green { background: #d0ddcc; border: 1px solid #86a084; color: #35523a; }
.alert.blue { background: #d6dee6; border: 1px solid #8fa4b8; color: #2d4256; }
.legend { display: flex; gap: 18px; align-items: center; font-size: 12px; color: #5f656b; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(34,38,42,0.18); }
.weekrow { display: grid; gap: 8px; align-items: stretch; }
.wlabel { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 12px; font-size: 13px; border-radius: 6px; }
.day { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dayhead { font-size: 12px; color: #5f656b; padding: 0 2px; display: flex; justify-content: space-between; align-items: center; font-variant-numeric: tabular-nums; }
.cell { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 48px; padding: 6px 10px; border-radius: 6px; border: 1px solid #aeb4ac; background: #fbfbf9; font-size: 13px; transition: background-color 120ms ease, border-color 120ms ease; width: 100%; }
.cell .t { font-size: 11px; color: #5f656b; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.cell.red { background: #e8d2ce; border-color: #b8847d; color: #74362f; }
.cell.red .t { color: #74362f; }
.cell.green { background: #d0ddcc; border-color: #86a084; color: #35523a; }
.cell.green .t { color: #35523a; }
.cell.off { background: repeating-linear-gradient(135deg, #dfe1dc 0 6px, #ebece8 6px 12px); border-color: #cdd1ca; color: #5d625d; }
.cell.off .t { color: #5d625d; }
.cell.hole { background: #e9d9c4; border: 1.5px dashed #9c6a3a; color: #6b4423; }
.cell.hole .t { color: #6b4423; }
.cell .name { font-weight: 500; line-height: 1.25; }
.cell.dbl { border-color: #476482; background: #eef1f3; }
.cell.grow { flex-grow: 1; }
button.cell:not(:disabled):hover { filter: brightness(0.97); }
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 4px; border: 1px solid #aeb4ac; border-bottom-width: 2px; background: #fbfbf9; font-size: 11px; font-weight: 600; color: #4b5157; font-variant-numeric: tabular-nums; }
.keys { display: flex; align-items: center; gap: 18px; font-size: 12px; color: #5f656b; padding-top: 12px; border-top: 1px solid #cdd1ca; flex-wrap: wrap; }
.keys span { display: inline-flex; align-items: center; gap: 6px; }

/* calendario del mese (passo 1) e mini calendario dei riposi (passo 2) */
.mgrid { display: grid; grid-template-columns: 128px repeat(7, minmax(0, 1fr)); gap: 8px; }
.wcell { display: flex; flex-direction: column; gap: 5px; padding: 6px 8px 6px 0; border-right: 1px solid #dfe2dc; margin-right: 4px; justify-content: center; }
.wbtn { height: 28px; padding: 0 8px; font-size: 11px; white-space: normal; line-height: 1.15; text-align: left; justify-content: flex-start; }
.gbtn.orig { border-style: dashed; border-color: #476482; }
.gbtn.incollato { background: #d0ddcc; border-color: #86a084; color: #35523a; }
.gbtn.incollato .fs, .gbtn.incollato .sub { color: #35523a; }
.mgrid .kicker { padding: 0 2px 6px; }
.gbtn { min-height: 76px; border-radius: 6px; border: 1px solid #aeb4ac; background: #fbfbf9; padding: 8px 10px; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; width: 100%; color: #22262a; }
.gbtn:not(:disabled):hover { background: #f0f1ee; }
.gbtn.blank { border: none; background: #eef0ec; }
.gbtn.senza, .gbtn.fuori { border-color: #dfe2dc; background: #eef0ec; color: #5f656b; }
.gbtn.fuori { background: repeating-linear-gradient(135deg, #e3e5e0 0 6px, #eef0ec 6px 12px); }
.gbtn.escluso { border: 1.5px solid #b8847d; background: #e8d2ce; color: #74362f; }
.gbtn .d { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.03em; line-height: 1; display: flex; justify-content: space-between; align-items: center; }
.gbtn .sub { font-size: 12px; }
.gbtn .fs { font-size: 11px; color: #4b5157; line-height: 1.35; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.gbtn.sel { border: 2px solid #476482; background: #eef1f3; padding: 7px 9px; }
.gbtn.escluso.sel { background: #e8d2ce; }
.gbtn.sel.incollato { background: #d0ddcc; border-color: #4a6b4f; }

/* fasce orarie del giorno (passo 1) */
.frow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 52px 40px; gap: 8px; align-items: center; }
.frow .field { height: 40px; padding: 0 8px; font-size: 14px; }
.clip { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 6px; background: #d6dee6; border: 1px solid #8fa4b8; color: #2d4256; font-size: 13px; }
.clip > span { display: inline-flex; align-items: center; gap: 6px; }
.mini { display: grid; grid-template-columns: repeat(7, 40px); gap: 4px; }
.mini .kicker { text-align: center; font-size: 10px; padding-bottom: 2px; }
.mini button { height: 36px; border-radius: 6px; border: 1px solid #cdd1ca; background: #fbfbf9; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.mini button.we { background: #eef0ec; color: #5f656b; }
.mini button.on { background: #e8d2ce; border-color: #b8847d; color: #74362f; font-weight: 600; }
.mini button:disabled { background: repeating-linear-gradient(135deg, #dfe1dc 0 4px, #ebece8 4px 8px); color: #8a9088; border-color: #dfe2dc; }
.mini .blank { border: none; background: transparent; }

/* caselle di scelta e interruttori */
.ck { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.ck input { position: absolute; opacity: 0; width: 0; height: 0; }
.ck .box { width: 18px; height: 18px; border-radius: 4px; border: 1px solid #aeb4ac; background: #fbfbf9; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ck input:checked + .box { background: #476482; border-color: #476482; }
.ck input:checked + .box::after { content: ""; width: 5px; height: 9px; border: solid #fbfbf9; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.ck input:focus-visible + .box { outline: 2px solid #476482; outline-offset: 2px; }
.swt { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.swt input { position: absolute; opacity: 0; width: 0; height: 0; }
.swt .tr { width: 44px; height: 24px; border-radius: 12px; background: #cdd1ca; border: 1px solid #aeb4ac; padding: 2px; transition: background-color 120ms ease; }
.swt .tr::after { content: ""; display: block; width: 18px; height: 18px; border-radius: 9px; background: #fbfbf9; border: 1px solid #aeb4ac; transition: transform 120ms ease; }
.swt input:checked + .tr { background: #476482; border-color: #476482; }
.swt input:checked + .tr::after { transform: translateX(20px); }
.swt input:focus-visible + .tr { outline: 2px solid #476482; outline-offset: 2px; }

/* elenco partecipanti */
.prow { display: grid; grid-template-columns: minmax(0, 1fr) 84px 128px 104px 32px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 6px; width: 100%; }
.prow.on { background: #d6dee6; color: #2d4256; }
.prow:not(.on):hover { background: #eceee9; }
.tab { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 6px; border: 1px solid #cdd1ca; background: #f6f7f4; min-width: 0; width: 100%; }
.tab.on { border-color: #476482; background: #d6dee6; }
.tab .nm { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab.on .nm { font-weight: 600; color: #2d4256; }

/* schermata iniziale e accesso */
.home { max-width: 1100px; margin: 0 auto; width: 100%; }
.accesso { max-width: 900px; }
.accesso form h2, .accesso .card h2 { margin-bottom: 4px; }
.vrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto 32px 32px; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 6px; width: 100%; cursor: pointer; }
.vrow:hover, .vrow.open { background: #eceee9; }
.vrow.open { border-radius: 6px 6px 0 0; }
.vdet { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding: 14px 16px 18px; margin-bottom: 6px; border-radius: 0 0 6px 6px; background: #f0f1ee; border-top: 1px solid #dfe2dc; }
.vrow .nm { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }

.velo { position: fixed; inset: 0; background: rgba(233, 235, 231, 0.85); display: flex; align-items: center; justify-content: center; z-index: 10; }
.velo-box { background: #f6f7f4; border: 1px solid #cdd1ca; border-radius: 8px; padding: 28px 36px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.errore { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 11; max-width: 720px; }

/* contenitori a due colonne: sul computer come prima, sul telefono impilati */
.due-colonne { display: flex; gap: 28px; align-items: flex-start; }
.lato { width: 440px; flex-shrink: 0; }
.scheda { width: 520px; flex-shrink: 0; }
.home-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.accesso-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.tabs { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 8px; }
.gbtn .nf { display: none; }

/* ------------------------------------------------------------ telefono */
@media (max-width: 860px) {
  body { font-size: 14px; }
  .root { flex-direction: column; }
  /* la barra laterale diventa una barra in alto: marchio, quattro cerchi dei passi, pulsanti */
  .rail { position: static; width: 100%; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 10px 14px; border-right: none; border-bottom: 1px solid #cdd1ca; }
  .rail .brand { font-size: 16px; }
  .rail > .col { display: none; }
  .steps { flex-direction: row; gap: 4px; }
  .step { grid-template-columns: 30px; gap: 0; padding: 3px; }
  .step .l, .step .s { display: none; }
  .step .n { width: 30px; height: 30px; border-radius: 15px; font-size: 13px; }
  .rail .foot { margin-top: 0; margin-left: auto; flex-direction: row; gap: 6px; }
  .rail .foot > span { display: none; }
  .main { padding: 16px 14px 24px; gap: 16px; max-width: none; }
  .home { padding: 16px 14px 24px; }
  .title { font-size: 40px; letter-spacing: -0.03em; }
  .title.md { font-size: 32px; }
  .hdr { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hdr > .row { flex-wrap: wrap; gap: 12px 18px !important; padding-bottom: 0 !important; }
  .hdr .big { font-size: 30px !important; }
  .hdr .fg { min-width: 0; }
  .hdr .btn { height: 40px; padding: 0 14px; font-size: 13px; }
  .hint-red { font-size: 15px; }
  .keys { display: none; }
  .due-colonne { flex-direction: column; gap: 18px; }
  .lato, .scheda { width: 100%; }
  .home-griglia, .accesso-griglia { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .card { padding: 16px !important; }
  /* schermata iniziale: righe dei calendari piu' corte */
  .vrow { grid-template-columns: minmax(0, 1fr) auto 32px 32px; gap: 10px; padding: 12px 10px; }
  .vrow .nm { font-size: 17px; }
  .c-np, .c-data { display: none; }
  .vdet { flex-direction: column; }
  .vdet .col { align-items: flex-start !important; }
  /* passo 1: calendario a sette colonne strette, settimana per settimana */
  .mgrid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .mgrid .kicker { font-size: 10px; text-align: center; padding: 0 0 2px; }
  .wtesta { display: none; }
  .wcell { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 2px 4px; margin: 4px 0 0; border-right: none; border-top: 1px solid #dfe2dc; }
  .wcell .kicker { font-size: 11px; }
  .wbtn { height: 26px; padding: 0 8px; font-size: 11px; white-space: nowrap; }
  .gbtn { min-height: 52px; padding: 5px 4px; gap: 2px; align-items: center; justify-content: center; }
  .gbtn .d { font-size: 17px; justify-content: center; gap: 2px; }
  .gbtn .d svg { width: 10px; height: 10px; }
  .gbtn .fs, .gbtn .sub { display: none; }
  .gbtn .nf { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 9px; font-size: 11px; font-weight: 600; background: #dfe2dc; color: #4b5157; }
  .gbtn.escluso .nf { background: #d3aaa4; color: #74362f; }
  .gbtn.incollato .nf { background: #86a084; color: #f6f7f4; }
  .gbtn.senza .nf { background: transparent; color: #8a9088; }
  .gbtn.sel { padding: 4px 3px; }
  .frow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 40px; }
  .frow .num { display: none; }
  .clip .row { flex-wrap: wrap !important; }
  /* passo 2 */
  .prow { grid-template-columns: minmax(0, 1fr) 96px 32px; gap: 8px; }
  .c-oresett, .c-riposi { display: none; }
  .scheda > div[style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  .mini { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  /* passi 3 e 4: schede dei partecipanti e griglia con un giorno per riga */
  .tabs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .weekrow { grid-template-columns: minmax(0, 1fr) !important; gap: 6px; }
  .wlabel { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  .wlabel .btn { margin-top: 0 !important; }
  .day.vuoto { display: none; }
  .day { padding-top: 4px; }
  .dayhead { font-size: 13px; font-weight: 600; color: #22262a; }
  .cell { min-height: 44px; }
  table { font-size: 12px; }
  th, td { padding: 8px 8px; }
  .between { flex-wrap: wrap; }
  .legend { gap: 10px 14px; }
  .errore { left: 12px; right: 12px; transform: none; max-width: none; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { .rail, .keys, .btn, .velo { display: none !important; } .main { padding: 0; } body { background: #fff; } }