/* Gestionale parrucchieri: stile dei mockup di questo prodotto (partials/*.html).
   Si carica dopo style.css del motore (site.css in content.mjs). Colori dei
   saloni inventati: prugna (Atelier Lumière) e verde scuro (Barberia Sessanta). */

:root {
  --sl-plum: #6b3a4a;
  --sl-plum-deep: #2e1a22;
  --sl-hair: #f3c6bd;     /* blocchi agenda: capelli */
  --sl-beauty: #e3d3ee;   /* estetica */
  --sl-barber: #cfe1d6;   /* barba */
}

/* Il motore usa il verde acqua per tessere e iniziali: qui prugna. */
.ui-pass { background: var(--sl-plum-deep); }
.ui-pass .mark { color: var(--sl-plum-deep); }
.mark { background: var(--sl-plum); }
.ref-avatar { background: var(--sl-plum); }
.ui-status .dot { background: var(--sl-plum); }

/* Timbri della carta fedeltà */
.stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; max-width: 150px; }
.stamps i { aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.stamps i.on { background: var(--accent); box-shadow: none; }
.ui-pass-lg .stamps { max-width: 190px; gap: 8px; }
.stage .ui-pass .stamps { max-width: 120px; gap: 5px; margin-top: 10px; }
.stage .ui-pass .qr { width: 84px; margin-top: 10px; }

/* Hero: colonna agenda, gift card, ora libera */
.ui-agenda { display: grid; gap: 6px; }
.ag-item { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: start; padding: 7px 8px; border-radius: 8px; background: #f5f5f5; }
.ag-item b { font-family: var(--font-mono); font-weight: 500; font-size: 11px; color: #6b6b70; padding-top: 1px; }
.ag-item strong { display: block; font-weight: 500; font-size: 12.5px; line-height: 1.25; }
.ag-item span { font-size: 11px; color: #6b6b70; }
.ag-hl { background: var(--sl-hair); box-shadow: inset 3px 0 0 var(--sl-plum); }
.ag-hl b, .ag-hl span { color: #4a3036; }
.ui-gift { background: linear-gradient(140deg, #3a2029, #6b3a4a); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), var(--shadow-float); }
.ui-gift .cap, .ui-gift .ui-meta { color: rgba(255,255,255,.72); }
.ui-gift .mark { background: var(--accent); color: var(--sl-plum-deep); }
.ui-gift .ui-big { margin: 10px 0 4px; }
.ui-free { background: #1c1c1c; color: #fff; box-shadow: inset 0 0 0 1px #292929, var(--shadow-float); }
.ui-free .cap, .ui-free .ui-meta { color: #a8a8aa; }
.ui-free .ui-title { color: var(--accent); }

/* Pannello dei mockup nelle sezioni split (chiare o scure) */
.sl-panel { position: relative; display: flex; justify-content: center; padding: 40px clamp(16px, 3vw, 40px); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--stroke-hairline); }

/* Prenotazione dal telefono */
.sl-booking { padding-bottom: 150px; }
.sl-booking .phone { width: 250px; }
.sl-svc { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 9px 10px; border-radius: 10px; background: #f5f5f5; }
.sl-svc strong { font-weight: 500; font-size: 12.5px; }
.sl-svc span { color: #6b6b70; font-size: 11px; white-space: nowrap; }
.sl-svc.on { box-shadow: inset 0 0 0 1.5px var(--brand); background: #fbf3f4; }
.sl-chips, .sl-slots { display: flex; flex-wrap: wrap; gap: 5px; }
.sl-chips span, .sl-slots span { padding: 5px 9px; border-radius: 999px; background: #f0f0f1; font-size: 11px; }
.sl-slots span { font-family: var(--font-mono); border-radius: 7px; }
.sl-chips .on, .sl-slots .on { background: var(--brand); color: var(--brand-ink); }
.sl-dep { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #4a4a4f; padding: 7px 9px; border-radius: 9px; box-shadow: inset 0 0 0 1px #e6e6e8; }
.sl-dep span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--accent-wash-strong); color: #202020; font-weight: 600; }
.sl-bubble { position: absolute; inset-inline-end: clamp(12px, 3vw, 32px); bottom: 24px; width: min(280px, 72%); }
.sl-bubble p { font-size: 12.5px; color: #3a3a3f; margin: 6px 0 10px; }
.sl-bubble-btns { display: flex; gap: 6px; }
.sl-bubble-btns span { flex: 1; text-align: center; padding: 7px; border-radius: 8px; font-size: 12px; font-weight: 500; background: #f0f0f1; }
.sl-bubble-btns span:first-child { background: var(--accent); color: var(--content-on-accent); }

/* Agenda del giorno per operatrice */
.sl-agenda { width: 100%; max-width: 460px; box-shadow: inset 0 0 0 1px #e9e9eb, var(--shadow-float); }
.sl-ag-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.sl-ag-top strong { font-weight: 500; font-size: 15px; }
.sl-toggle { display: inline-flex; padding: 3px; border-radius: 8px; background: #f0f0f1; font-size: 11px; }
.sl-toggle span { padding: 4px 9px; border-radius: 6px; color: #6b6b70; }
.sl-toggle .on { background: #fff; color: #202020; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.sl-ag-grid { display: grid; grid-template-columns: 40px repeat(3, 1fr); grid-template-rows: 22px repeat(8, 30px); gap: 3px 6px; }
.sl-ag-h { grid-row: 1; font-size: 11px; font-weight: 500; text-align: center; color: #4a4a4f; }
.sl-ag-t { grid-column: 1; font-family: var(--font-mono); font-size: 10px; color: #89898a; padding-top: 2px; }
.sl-ag-b { position: relative; border-radius: 7px; padding: 5px 7px; overflow: hidden; display: grid; align-content: start; gap: 1px; }
.sl-ag-b strong { font-weight: 500; font-size: 11.5px; line-height: 1.2; color: #202020; }
.sl-ag-b span { font-size: 10.5px; color: #4a4a4f; }
.k-hair { background: var(--sl-hair); }
.k-beauty { background: var(--sl-beauty); }
.k-barber { background: var(--sl-barber); }
.sl-ag-break { background: repeating-linear-gradient(135deg, #f0f0f1 0 6px, #e6e6e8 6px 12px); place-content: center; text-align: center; }
.sl-ag-free { box-shadow: inset 0 0 0 1.5px #c9c9cc; background: transparent; border-radius: 7px; place-content: center; text-align: center; }
.sl-ag-free span { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-mono); font-size: 9.5px; color: #6b6b70; }
.sl-ag-drag { transform: translate(-10px, 8px) rotate(-2deg); box-shadow: 0 10px 22px rgba(0,0,0,.18); z-index: 1; overflow: visible; }
.sl-ag-drag em { position: absolute; inset-inline-start: 0; top: calc(100% + 6px); font-style: normal; white-space: nowrap; font-size: 10px; background: #202020; color: #fff; padding: 3px 7px; border-radius: 6px; }

/* Scheda cliente */
.sl-client { width: 100%; max-width: 420px; display: grid; gap: 10px; box-shadow: inset 0 0 0 1px #e9e9eb, var(--shadow-float); }
.sl-cl-top { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; box-shadow: inset 0 -1px 0 #ececec; }
.sl-cl-top strong { display: block; font-weight: 500; font-size: 16px; }
.sl-cl-top span { font-size: 12px; color: #6b6b70; }
.sl-avatar { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sl-hair); color: #4a3036; font-weight: 600; font-size: 14px; flex: 0 0 auto; }
.sl-cl-box { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #f5f5f5; }
.sl-cl-box code { font-family: var(--font-mono); font-size: 12px; color: #202020; line-height: 1.5; }
.sl-cl-warn { background: #fdf0ec; box-shadow: inset 3px 0 0 #c4553b; }
.sl-cl-warn strong { font-weight: 500; font-size: 13px; color: #8a2f1c; }
.sl-cl-hist { display: grid; }
.sl-cl-hist .cap { margin-bottom: 4px; }
.sl-cl-hist div { display: grid; grid-template-columns: 52px 1fr auto; gap: 8px; padding: 7px 0; box-shadow: inset 0 -1px 0 #ececec; font-size: 12px; }
.sl-cl-hist div span:first-child { font-family: var(--font-mono); color: #89898a; font-size: 11px; }
.sl-cl-hist b { font-weight: 500; }
.sl-cl-note p { font-size: 12.5px; color: #3a3a3f; margin-top: 3px; }

/* Demo: settimana dell'agenda in un browser */
.sl-demo { margin-top: 8px; }
.sl-demo-app { display: grid; grid-template-columns: 180px 1fr; min-height: 380px; background: #fff; color: #202020; }
.sl-demo-side { display: grid; align-content: start; gap: 2px; padding: 16px 12px; background: #fafafa; box-shadow: inset -1px 0 0 #ececec; font-size: 13px; }
.sl-demo-side span { padding: 7px 10px; border-radius: 8px; color: #4a4a4f; }
.sl-demo-side .on { background: var(--accent-wash-strong); color: #202020; font-weight: 500; }
.sl-demo-brand { display: flex; align-items: center; gap: 8px; font-weight: 500; padding: 0 6px 14px; }
.sl-demo-main { padding: 18px 20px 22px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.sl-demo-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sl-demo-head strong { font-weight: 500; font-size: 16px; }
.sl-demo-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #6b6b70; }
.sl-demo-legend i { width: 10px; height: 10px; border-radius: 3px; margin-inline-start: 6px; }
.sl-week { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 20px repeat(8, 28px); gap: 4px 6px; background-image: linear-gradient(#f0f0f1 1px, transparent 1px); background-size: 100% 32px; background-position: 0 23px; }
.sl-wd { grid-row: 1; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--tracking-mono); color: #89898a; }
.sl-week i { border-radius: 6px; }

@media (max-width: 720px) {
  .sl-panel { padding: 24px 12px; }
  .sl-booking { padding-bottom: 160px; }
  .sl-booking .phone { width: min(84%, 250px); }
  .sl-bubble { inset-inline-end: 12px; bottom: 16px; width: min(250px, 80%); }
  .sl-ag-grid { grid-template-columns: 34px repeat(3, minmax(0, 1fr)); gap: 3px 4px; }
  .sl-ag-b { padding: 4px 5px; }
  .sl-ag-b strong { font-size: 10.5px; }
  .sl-ag-b span { font-size: 9.5px; }
  .sl-demo-app { grid-template-columns: 1fr; min-height: 0; }
  .sl-demo-side { display: none; }
  .sl-demo-main { padding: 14px 12px 16px; }
  .sl-week { gap: 3px 4px; }
}

/* Hero su telefono: la colonna agenda è più alta della carta fattura del motore,
   la abbasso così non copre i bottoni. */
@media (max-width: 720px) {
  .c4 { --x: 27vw; --y: 38vh; --sc: .5; }
  .c3 { --y: 35vh; }
}