/* Area del cliente /studio (js/studio.js). Si appoggia ai colori e ai caratteri di home.css.
   Pensata per il telefono (375 px): una colonna, pulsanti grandi, cinque schede in basso. Da 900 px le schede vanno in alto. */
.st-body { --ok: #2f7d5b; --ok-soft: #e6f3ec; --warn: #a3620b; --warn-soft: #fbf0dc; font-size: 16px; }
.st-body.has-nav { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.st-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1180px; margin: 0 auto; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); }
.st-logo { display: inline-flex; flex: none; }
.st-chi { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-chi[hidden] { display: none; }
.st-top-nome { margin: 0; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--muted); text-align: right; overflow-wrap: anywhere; }
.st-ava { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--soft); color: var(--primary); font: 700 14px/1 var(--body); cursor: pointer; }
.st-ava.is-on { background: var(--primary); color: #fff; }
.st-main { max-width: 720px; margin: 0 auto; padding: 8px 16px 24px; outline: none; }
.st-main h1 { font-size: clamp(1.75rem, 7vw, 2.3rem); line-height: 1.15; margin: 4px 0 8px; }
.st-main .st-h1-sotto { margin-top: 10px; }
.st-main p { line-height: 1.5; }
.st-loading { padding: 60px 0; color: var(--muted); text-align: center; }

.st-sec { margin-top: 26px; }
.st-sec > h2 { font-size: 1.25rem; margin-bottom: 10px; }
.st-card { display: block; width: 100%; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font: inherit; text-align: left; }
.st-card + .st-card { margin-top: 10px; }
.st-card h3 { font-size: 1.05rem; margin: 0 0 4px; font-family: var(--body); font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.st-card p { margin: 0 0 10px; color: var(--ink-2); }
.st-card p:last-child { margin-bottom: 0; }
.st-ok { border-color: var(--ok); background: var(--ok-soft); }
.st-todo { border-color: var(--warn); background: var(--warn-soft); }
.st-list { list-style: none; margin: 0; padding: 0; }
.st-list li + li { margin-top: 10px; }

.st-riga { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; color: var(--ink); text-decoration: none; cursor: pointer; }
.st-riga-piatta { min-height: 0; margin-bottom: 12px; cursor: default; }
.st-riga strong { display: block; overflow-wrap: anywhere; }
.st-riga small, .st-note { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.st-note { margin-bottom: 10px; }
.st-sotto { color: var(--muted); font-size: 14px; margin: 0 0 10px; }
.st-badge { display: inline-block; flex: none; padding: 4px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; line-height: 1.3; background: var(--soft); color: var(--ink-2); }
.st-b-online { background: var(--ok-soft); color: #1f5c41; }
.st-b-dati, .st-b-pausa { background: var(--warn-soft); color: #6d4208; }
.st-b-chiuso { background: var(--accent-soft); color: #8a2f72; }

.st-numeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.st-numeri div { padding: 10px 6px; border-radius: 10px; background: var(--bg); font-size: 13px; line-height: 1.3; color: var(--muted); text-align: center; }
.st-numeri strong { display: block; font-family: var(--head); font-size: 1.35rem; color: var(--primary); }
.st-small { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.st-small a { color: var(--primary); font-weight: 600; }

.st-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.st-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--primary); font: 600 15px/1.25 var(--body); text-align: center; text-decoration: none; cursor: pointer; }
.st-btn-main { border-color: var(--primary); background: var(--primary); color: #fff; }
.st-btn-piano { border-color: transparent; background: none; color: var(--muted); }
.st-btn:disabled { opacity: .6; cursor: default; }
.st-btn:focus-visible, .st-link:focus-visible, .st-nav button:focus-visible, .st-ava:focus-visible, .st-card:focus-visible, .st-form input:focus-visible, .st-form textarea:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.st-link { padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.st-det { margin-top: 12px; }
.st-azioni .st-det { margin-top: 0; }
.st-azioni .st-det[open] { flex-basis: 100%; }
.st-det summary { list-style: none; display: inline-flex; }
.st-det summary::-webkit-details-marker { display: none; }

.st-form { display: grid; gap: 8px; margin-top: 8px; }
.st-form label { font-weight: 600; }
.st-form input, .st-form textarea { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #8a86a3; background: #fff; color: var(--ink); font: 16px/1.4 var(--body); }
.st-form .st-btn { justify-self: start; }
.st-msg { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--soft); color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.st-msg.is-error, .st-esito.is-error { background: #fdf0ee; color: #8a2a20; }
.st-demo { background: var(--warn-soft); color: #6d4208; }
.st-esito { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--ok-soft); color: #1f5c41; font-size: 15px; overflow-wrap: anywhere; }

.st-punti { margin: 0; padding-left: 20px; color: var(--ink-2); line-height: 1.5; }
.st-punti li + li { margin-top: 4px; }
.st-mesi { list-style: none; margin: 0; padding: 0; }
.st-mesi li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); line-height: 1.4; color: var(--ink-2); }
.st-mesi li:first-child { border-top: 0; padding-top: 0; }
.st-mesi li:last-child { padding-bottom: 0; }
.st-mesi strong { color: var(--primary); }
.st-piani { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.st-piano { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.st-piano.is-top { border: 2px solid var(--primary); }
.st-piano b { font-family: var(--head); font-size: 1.5rem; font-weight: 600; color: var(--primary); }
.st-piano small { min-height: 18px; font-size: 13px; color: var(--muted); }
.st-piano .st-btn { margin-top: auto; }
.st-avvio { margin: 0; padding: 0; list-style: none; }
.st-avvio li { position: relative; padding: 0 0 16px 30px; }
.st-avvio li:last-child { padding-bottom: 0; }
.st-avvio li::before { content: ''; position: absolute; left: 2px; top: 3px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--primary); background: #fff; }
.st-avvio li.is-fatto::before { background: var(--primary); }
.st-avvio strong, .st-avvio small { display: block; }
.st-avvio small { margin-top: 2px; font-size: 14px; color: var(--muted); }
.st-avvio .st-btn { margin-top: 8px; }

.st-gg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: 420px; }
.st-gg span { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 8px; font-size: 13px; color: var(--muted); }
.st-gg .dow { aspect-ratio: auto; padding-bottom: 2px; font-size: 12px; font-weight: 700; }
.st-gg .ok { background: var(--ok-soft); color: #1f5c41; font-weight: 700; }
.st-gg .att { background: var(--warn-soft); color: #6d4208; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--warn); }
.st-leg { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.st-leg i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 4px; vertical-align: -1px; }
.st-leg .ok { background: var(--ok-soft); }
.st-leg .att { background: var(--warn-soft); box-shadow: inset 0 0 0 1.5px var(--warn); }
.st-post img { width: 100%; max-width: 240px; margin-bottom: 10px; border-radius: 10px; }
.st-slide { display: flex; gap: 8px; margin: 0 -16px 10px; padding: 0 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; }
.st-post .st-slide img { flex: none; width: 44%; max-width: 200px; margin: 0; scroll-snap-align: start; background: var(--soft); }
.st-testo { margin: 0 0 12px; }
.st-graf svg { display: block; width: 100%; height: auto; margin: 4px 0 6px; }
.st-graf rect { fill: color-mix(in srgb, var(--primary) 26%, var(--surface)); }
.st-graf rect.ora { fill: var(--primary); }
.st-graf text { font: 600 10px/1 var(--body); fill: var(--muted); }
.st-graf text.ora { fill: var(--primary); }
.st-graf-n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 6px; color: var(--ink-2); }
.st-graf-n strong { font-size: 30px; line-height: 1; color: var(--ink); }
.st-graf-n span { font-size: 14px; color: var(--muted); }
.st-graf-tasti { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.st-graf-tasto { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font: 600 14px/1.2 var(--body); cursor: pointer; }
.st-graf-tasto[aria-pressed='true'] { background: var(--primary); border-color: var(--primary); color: #fff; }
.st-graf-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.st-graf-4 li { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--soft); }
.st-graf-4 strong { font-size: 22px; line-height: 1.1; color: var(--ink); }
.st-graf-4 span { font-size: 14px; color: var(--ink-2); }
.st-graf-4 small { font-size: 13px; color: var(--muted); }
.st-graf-4 li.ora { box-shadow: inset 0 0 0 2px var(--primary); }
.st-graf-4 + .st-small { margin-top: 12px; }
.st-testo summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--primary); cursor: pointer; }
.st-testo p { margin: 0 0 10px; line-height: 1.55; }
.st-testo .st-small { margin: 10px 0 6px; }
.st-testo .st-punti { margin-bottom: 10px; }

.st-entra { max-width: 460px; margin: 28px auto 0; }
.st-lead { color: var(--ink-2); margin-bottom: 16px; }

.st-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--line); }
.st-nav[hidden] { display: none; }
.st-nav button { flex: 1 1 0; min-width: 0; min-height: 62px; padding: 8px 2px 6px; border: 0; background: none; color: var(--muted); font: 600 11.5px/1.15 var(--body); display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.st-nav button[aria-current='page'] { color: var(--primary); box-shadow: inset 0 3px 0 var(--primary); }
.st-ico { position: relative; display: block; width: 22px; height: 22px; }
.st-ico > svg { width: 22px; height: 22px; }
.st-lk { position: absolute; top: -4px; right: -9px; width: 15px; height: 15px; border-radius: 50%; background: var(--accent-soft); color: #8a2f72; display: flex; align-items: center; justify-content: center; }
.st-lk svg { width: 10px; height: 10px; stroke-width: 3; }
.st-pt { position: absolute; top: -2px; right: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--warn); border: 2px solid var(--surface); }

.st-foot { max-width: 720px; margin: 0 auto; padding: 8px 16px 24px; font-size: 13px; color: var(--muted); }
.st-foot p { margin: 0; }

/* i tre pulsanti del sito in una riga sola, anche sul telefono */
.st-tre { display: flex; gap: 8px; margin-top: 12px; }
.st-tre > .st-btn { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: 14px; line-height: 1.2; text-align: center; }
.st-box { margin-top: 12px; }
.st-form[hidden] { display: none; }

/* onboarding del periodo */
.st-per { gap: 10px; }
.st-per .st-file { width: 1px; height: 1px; padding: 0; border: 0; }
.st-per .st-card + .st-card { margin-top: 0; }
.st-per .st-card h3 { margin-bottom: 8px; }
.st-per .st-spunta { font-weight: 400; }
.st-per textarea, .st-per input[type='text'], .st-per input:not([type]) { margin-bottom: 6px; }
.st-per .st-card > label, .st-sappiamo > label, .st-arg-det label { display: block; margin: 10px 0 4px; font-weight: 600; }
.st-per .st-card > label:first-child { margin-top: 0; }
.st-per .st-small { margin: 0 0 6px; }
.st-arg { padding: 8px 0; border-top: 1px solid var(--line); }
.st-arg:first-child { border-top: 0; }
.st-arg .st-spunta { padding: 4px 0; }
.st-arg .st-spunta span { min-width: 0; overflow-wrap: anywhere; }
.st-arg strong, .st-arg small { display: block; }
.st-arg strong { font-weight: 600; color: var(--ink); }
.st-arg small { margin-top: 2px; font-size: 14px; color: var(--muted); }
.st-arg-det { margin: 0 0 4px 30px; }
.st-arg-det summary { min-height: 32px; font-size: 14px; font-weight: 600; color: var(--primary); cursor: pointer; }
.st-sappiamo summary { display: block; cursor: pointer; list-style: none; }
.st-sappiamo summary::-webkit-details-marker { display: none; }
.st-sappiamo summary strong, .st-sappiamo summary small { display: block; }
.st-sappiamo summary small { margin-top: 2px; font-size: 14px; color: var(--primary); }
.st-dl { margin: 12px 0 0; }
.st-dl div { padding: 8px 0; border-top: 1px solid var(--line); }
.st-dl dt { font-size: 14px; color: var(--muted); }
.st-dl dd { margin: 2px 0 0; overflow-wrap: anywhere; color: var(--ink-2); }
.st-sec > .st-esito { margin-bottom: 10px; }
.st-brief { margin: 12px 0 0; padding: 12px; max-height: 60vh; overflow: auto; border-radius: 10px; background: var(--bg); font: 14px/1.5 var(--body); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); }

/* pazienti */
.st-paz-num { margin: 8px 0 0; font-size: 18px; font-weight: 600; }
.st-paz-num a { color: var(--primary); }
.st-paz-parte { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line, #e7e4f0); }
.st-paz-parte p { margin: 4px 0; overflow-wrap: anywhere; }

/* pulsanti uno sotto l'altro */
.st-pila { display: grid; gap: 8px; margin-top: 12px; }
.st-pila > .st-btn { width: 100%; }
.st-pila > .st-det { margin-top: 0; }
.st-pila > .st-det > summary { display: flex; width: 100%; }
.st-pila > .st-small { margin-top: 0; }

/* blog del cliente */
.st-spazio { margin-top: 10px; }
.st-form select { width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 10px; border: 1px solid #8a86a3; background: #fff; color: var(--ink); font: 16px/1.4 var(--body); }
.st-scelta { display: grid; gap: 4px; margin: 4px 0; padding: 0; border: 0; }
.st-scelta legend { padding: 0; font-weight: 600; }
.st-scelta label, .st-spunta { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 400; }
.st-spunta { align-items: flex-start; padding: 6px 0; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.st-spunta input { flex: none; margin-top: 3px; width: 20px; height: 20px; }
.st-appunti { white-space: pre-wrap; overflow-wrap: anywhere; }
.st-cop { width: 100%; max-width: 420px; margin-bottom: 10px; border-radius: 10px; }
.st-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
label.st-btn { cursor: pointer; }
label.st-btn:has(+ .st-file:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }
.st-scelte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.st-scelte button { padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; }
.st-scelte button:focus-visible { outline: 3px solid var(--primary); }
.st-scelte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.st-main .st-h2-sotto { margin-top: 8px; font-size: 1.25rem; }

@media (min-width: 900px) {
  .st-body.has-nav { padding-bottom: 0; }
  .st-top { padding: 12px 24px; padding-top: calc(12px + env(safe-area-inset-top)); }
  .st-nav { position: static; flex: 1 1 auto; justify-content: center; gap: 4px; padding: 0; background: none; border: 0; }
  .st-nav button { flex: 0 1 auto; flex-direction: row; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 10px; color: var(--ink-2); font-size: 15px; }
  .st-nav button[aria-current='page'] { background: var(--primary); color: #fff; box-shadow: none; }
  .st-ico { margin-right: 4px; }
  .st-top-nome { white-space: nowrap; }
}

/* sei voci di menu: tra 900 e 1120 px il nome dello studio lascia il posto */
@media (min-width: 900px) and (max-width: 1120px) {
  .st-nav { gap: 2px; }
  .st-nav button { padding: 8px 6px; gap: 4px; font-size: 13.5px; }
  #top-nome { display: none; }
}