/* ==========================================================================
   Pepe Rosa Concept Store — design system (homepage)
   Nessuna dipendenza esterna: solo font di sistema, CSS puro.
   ========================================================================== */

:root {
  /* Palette — campionata dal logo (oro antico, verdi salvia/foresta, avorio) */
  --ivory:        #FAF6EE;
  --cream:        #F1EBDC;
  --paper:        #FFFEFB;

  --forest-900:   #172619;
  --forest-800:   #21362A;
  --forest-700:   #2E4A38;
  --forest-600:   #3F5F47;
  --sage-500:     #7C9473;
  --sage-300:     #AFC2A2;
  --sage-200:     #D3DFC9;

  --gold-700:     #8C6530;
  --gold-600:     #A9793D;
  --gold-500:     #C6964F;
  --gold-300:     #E1C58C;
  --gold-100:     #F3E6C9;

  --ink:          #241F17;
  --ink-soft:     #4A473E;
  --ink-faint:    #7A7666;

  --font-serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-sans: "Avenir Next", "Century Gothic", Futura, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;

  --shadow-soft: 0 20px 60px -25px rgba(23, 38, 25, 0.35);
  --shadow-card: 0 12px 30px -18px rgba(23, 38, 25, 0.28);

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --container: 1220px;
}

/* ---------- Reset minimo ---------- */
.pr * , .pr *::before, .pr *::after { box-sizing: border-box; }
.pr { margin: 0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* senza questa riga, i browser mobili "gonfiano" automaticamente il testo
   che va a capo dentro colonne strette (es. un badge come "185 giorni
   rimasti" che si spezza su due righe nella tabella responsive) mentre
   testo che sta su una riga sola (es. "Pagato") resta alla dimensione
   corretta - risultato incoerente tra badge identici. */
.pr img { max-width: 100%; display: block; }
/* l'attributo hidden e una classe che imposta display (es. .pr-form-grid-4,
   display:grid) hanno la stessa specificità nella cascata - senza questa
   regola, la classe caricata dopo vince e l'elemento resta visibile anche
   con hidden impostato. */
.pr [hidden] { display: none !important; }
.pr ul { list-style: none; margin: 0; padding: 0; }
.pr a { color: inherit; text-decoration: none; }
/* font-family soltanto, non la scorciatoia "font" - "font: inherit" azzera
   ANCHE font-size/weight/line-height, e con specificità (0,1,1) batte
   qualunque classe singola (.pr-btn, .pr-btn-sm, .pr-chip, ecc. sono 0,1,0)
   indipendentemente dall'ordine nel foglio di stile: tutti i bottoni reali
   (<button>, non i link .pr-btn-sm) finivano quindi sempre al font-size
   16px di default del browser invece di quello scelto dalla loro classe. */
.pr button { font-family: inherit; cursor: pointer; }
.pr h1, .pr h2, .pr h3, .pr h4 { margin: 0; font-weight: 400; }

.pr {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.pr__container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
}

.pr .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.pr .eyebrow + h1::after,
.pr .eyebrow + h2::after {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  background: var(--gold-600);
  margin-top: 14px;
}
.pr-section__head.center .eyebrow + h1::after,
.pr-section__head.center .eyebrow + h2::after,
.pr [style*="text-align:center"] > .eyebrow + h1::after,
.pr [style*="text-align:center"] > .eyebrow + h2::after {
  margin-left: auto;
  margin-right: auto;
}

.pr .serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

/* ---------- Reveal-on-scroll (IntersectionObserver, niente librerie) ----------
   Visibile di default: se il JS non parte per qualsiasi motivo, il contenuto
   resta comunque visibile. L'animazione è un progressive enhancement: il JS
   stesso aggiunge .pr-armed prima di innescare la comparsa. */
.pr .reveal { opacity: 1; transform: none; }
.pr .reveal.pr-armed { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.pr .reveal.pr-armed.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .pr .reveal.pr-armed { opacity: 1; transform: none; transition: none; }
}

/* ---------- Numeri che contano ---------- */
.pr .pr-count { font-variant-numeric: tabular-nums; }

/* ---------- Filo dorato — richiama il "percorso cucito su misura" ---------- */
.pr-thread-zone { position: relative; }
.pr-thread { position: absolute; top: 0; bottom: 0; left: clamp(8px, 1.4vw, 22px); width: 20px; display: none; pointer-events: none; z-index: 1; }
.pr-thread::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 9px; width: 0;
  border-left: 2px dashed rgba(140,101,48,0.28);
}
.pr-thread__fill {
  position: absolute; top: 0; left: 9px; width: 0; height: 100%;
  border-left: 2px solid var(--gold-500);
  transform: scaleY(0); transform-origin: top;
}
.pr-thread__fill::after {
  content: ""; position: absolute; left: -5px; bottom: -5px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold-500); box-shadow: 0 0 0 5px var(--paper), 0 0 14px rgba(198,150,79,0.55);
}
@media (min-width: 1080px) { .pr-thread { display: block; } }
@media (prefers-reduced-motion: reduce) { .pr-thread { display: none; } }

/* ==========================================================================
   Loader di marca
   ========================================================================== */
.pr-loader {
  position: fixed; inset: 0; z-index: 999999;
  background: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease;
}
.pr-loader.is-hidden { opacity: 0; pointer-events: none; }
.pr-loader__mark { position: relative; width: 92px; height: 92px; }
.pr-loader__mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pr-loader__mark .base { opacity: .35; }
.pr-loader__mark .fill { animation: pr-pulse 1.3s ease-in-out infinite; }
@keyframes pr-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* ==========================================================================
   Header / navigazione
   ========================================================================== */
.pr-header {
  position: sticky; top: 0; z-index: 500;
  background: rgba(250, 246, 238, 0.88);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(140, 101, 48, 0.14);
  transition: box-shadow .3s ease, background .3s ease;
}
.pr-header.is-scrolled { box-shadow: 0 10px 30px -20px rgba(23,38,25,0.45); }

.pr-header__bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px 24px; padding: 12px clamp(20px, 5vw, 56px);
  max-width: var(--container); margin: 0 auto;
}

.pr-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pr-logo img { height: 52px; width: auto; }

.pr-nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.pr-nav__links { display: flex; align-items: center; gap: clamp(12px, 2vw, 30px); }
.pr-nav__links a {
  font-size: clamp(11.5px, 1.05vw, 13px); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--forest-800); position: relative; padding: 6px 0; white-space: nowrap;
}
.pr-nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--gold-600); transition: right .3s ease;
}
.pr-nav__links a:hover::after, .pr-nav__links a.is-active::after { right: 0; }

.pr-account { position: relative; }
.pr-account__link {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: clamp(11.5px, 1.05vw, 13px); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--forest-800); border: 1px solid rgba(140,101,48,0.35); border-radius: 999px;
  padding: clamp(7px, 0.9vw, 9px) clamp(12px, 1.8vw, 18px); transition: background .25s ease, border-color .25s ease;
}
.pr-account__link:hover { background: var(--gold-100); border-color: var(--gold-500); }
.pr-account__link svg { width: 15px; height: 15px; }

.pr-account__dropdown {
  position: absolute; right: 0; top: calc(100% + 12px); width: 270px;
  background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
  border: 1px solid rgba(140,101,48,0.14);
  padding: 20px; opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.pr-account__dropdown.aperto { opacity: 1; visibility: visible; transform: translateY(0); }
.pr-account__dropdown input {
  width: 100%; padding: 10px 12px; margin-bottom: 10px; font-size: 13.5px;
  border: 1px solid rgba(74,71,62,0.25); border-radius: 8px; font-family: var(--font-sans);
  background: var(--ivory); color: var(--ink);
}
.pr-account__dropdown input:focus { outline: none; border-color: var(--gold-500); }
.pr-btn-accedi {
  width: 100%; background: var(--forest-800); color: var(--ivory); border: none;
  border-radius: 8px; padding: 11px; font-size: 13px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pr-btn-accedi:disabled { opacity: .6; }
.pr-account__foot { text-align: center; margin-top: 10px; font-size: 12px; color: var(--ink-faint); }
.pr-account__foot a { color: var(--gold-700); font-weight: 600; }
.pr-account__msg .alert { background: #fbe6e2; color: #8c2f1f; border-radius: 6px; padding: 8px 10px; font-size: 12px; margin-bottom: 8px; }

.pr-burger {
  display: none; width: 42px; height: 42px; border: none; background: transparent;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.pr-burger span, .pr-burger span::before, .pr-burger span::after {
  content: ""; display: block; width: 22px; height: 2px; background: var(--forest-800);
  position: relative; transition: transform .25s ease, opacity .25s ease;
}
.pr-burger span::before { position: absolute; top: -7px; }
.pr-burger span::after { position: absolute; top: 7px; }
.pr-burger.is-open span { background: transparent; }
.pr-burger.is-open span::before { transform: translateY(7px) rotate(45deg); }
.pr-burger.is-open span::after { transform: translateY(-7px) rotate(-45deg); }

/* ---- menu mobile ---- */
.pr-mobile {
  position: fixed; inset: 0; z-index: 600; visibility: hidden;
}
.pr-mobile.is-open { visibility: visible; }
.pr-mobile__scrim {
  position: absolute; inset: 0; background: rgba(23,38,25,0.45);
  opacity: 0; transition: opacity .3s ease;
}
.pr-mobile.is-open .pr-mobile__scrim { opacity: 1; }
.pr-mobile__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 360px);
  background: var(--ivory); padding: 26px 26px 40px; overflow-y: auto;
  transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column; gap: 26px;
}
.pr-mobile.is-open .pr-mobile__panel { transform: translateX(0); }
.pr-mobile__top { display: flex; justify-content: flex-end; }
.pr-mobile__close { width: 38px; height: 38px; border: none; background: transparent; position: relative; }
.pr-mobile__close::before, .pr-mobile__close::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; background: var(--forest-800);
}
.pr-mobile__close::before { transform: translate(-50%,-50%) rotate(45deg); }
.pr-mobile__close::after { transform: translate(-50%,-50%) rotate(-45deg); }
.pr-mobile__links { display: flex; flex-direction: column; gap: 4px; }
.pr-mobile__links a {
  font-family: var(--font-serif); font-size: 22px; padding: 10px 0;
  color: var(--forest-900);
}
.pr-mobile .pr-account { border-top: 1px solid rgba(140,101,48,0.15); padding-top: 20px; padding-bottom: 20px; }
.pr-mobile .pr-account__dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding: 14px 0 0; display: none; }
.pr-mobile .pr-account__dropdown.aperto { display: block; }

/* ==========================================================================
   Copertina pagine interne (trattamenti, store, chi siamo, ecc.)
   ========================================================================== */
.pr-page-cover { position: relative; min-height: 46vh; display: flex; align-items: flex-end; overflow: hidden; }
.pr-page-cover__bg { position: absolute; inset: 0; }
.pr-page-cover__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pr-page-cover__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15,24,16,0.88) 8%, rgba(15,24,16,0.4) 65%, rgba(15,24,16,0.16) 100%);
}
.pr-page-cover__content { position: relative; z-index: 2; color: var(--ivory); padding: 108px 0 52px; width: 100%; }
.pr-page-cover .eyebrow { color: var(--gold-300); }
.pr-page-cover .eyebrow + h1::after { background: var(--gold-300); }
.pr-page-cover h1 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(36px, 5.5vw, 62px); margin: 16px 0 18px; max-width: 18ch; }
.pr-page-cover p { font-size: 15.5px; line-height: 1.7; color: rgba(250,246,238,0.85); max-width: 58ch; margin-bottom: 26px; }

/* ==========================================================================
   Accordion trattamenti
   ========================================================================== */
.pr-treat-group { border-top: 1px solid rgba(140,101,48,0.16); }
.pr-treat-group:last-child { border-bottom: 1px solid rgba(140,101,48,0.16); }
.pr-treat-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 30px 0; background: none; border: none; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.pr-treat-head__left { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.pr-treat-head__num { font-family: var(--font-serif); font-style: italic; color: var(--gold-600); font-size: 15px; }
.pr-treat-head h2 { font-family: var(--font-serif); font-style: italic; font-size: clamp(23px, 2.8vw, 32px); color: var(--forest-900); }
.pr-treat-head p { font-size: 13.5px; color: var(--ink-soft); max-width: 52ch; margin-top: 6px; line-height: 1.6; }
.pr-treat-head__arrow {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(140,101,48,0.3);
  display: flex; align-items: center; justify-content: center; transition: transform 0.35s ease, background 0.25s ease, border-color .25s ease;
}
.pr-treat-head__arrow svg { width: 14px; height: 14px; transition: transform 0.35s ease; color: var(--forest-800); }
.pr-treat-group.is-open .pr-treat-head__arrow { background: var(--gold-500); border-color: var(--gold-500); }
.pr-treat-group.is-open .pr-treat-head__arrow svg { transform: rotate(180deg); color: var(--forest-900); }

.pr-treat-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s cubic-bezier(.4,0,.2,1); }
.pr-treat-body > div { overflow: hidden; }
.pr-treat-group.is-open .pr-treat-body { grid-template-rows: 1fr; }

.pr-treat-detail { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: 6px 0 46px; }
.pr-treat-detail__photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 4 / 3; }
.pr-treat-detail__photo img { width: 100%; height: 100%; object-fit: cover; }
.pr-treat-detail__body h3 { font-family: var(--font-serif); font-size: 22px; color: var(--forest-900); margin-bottom: 12px; }
.pr-treat-detail__body p { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 12px; }
.pr-treat-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px 20px; margin-top: 18px; }
.pr-treat-list li { font-size: 13.5px; color: var(--ink-soft); padding-left: 16px; position: relative; }
.pr-treat-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 1px; background: var(--gold-600); }
.pr-treat-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pr-treat-tags span { font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid rgba(140,101,48,0.3); border-radius: 999px; padding: 6px 13px; color: var(--gold-700); }

.pr-tech-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 6px 0 46px; }
.pr-tech-panel { background: linear-gradient(150deg, var(--forest-800), var(--forest-900)); border-radius: var(--radius-lg); padding: 34px 30px; color: var(--ivory); position: relative; overflow: hidden; }
.pr-tech-panel::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(230,197,140,0.22); border-radius: calc(var(--radius-lg) - 6px); pointer-events: none; }
.pr-tech-panel .tag { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-300); font-weight: 700; }
.pr-tech-panel h3 { font-family: var(--font-serif); font-style: italic; font-size: 24px; margin: 10px 0 12px; }
.pr-tech-panel p { font-size: 14px; line-height: 1.7; color: rgba(250,246,238,0.82); }

@media (max-width: 780px) {
  .pr-treat-detail { grid-template-columns: 1fr; }
  .pr-treat-list { grid-template-columns: 1fr; }
  .pr-tech-panels { grid-template-columns: 1fr; }
  .pr-treat-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ==========================================================================
   Form generico (contatti, gift card, candidature)
   ========================================================================== */
.pr-form { max-width: 720px; }
.pr-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.pr-form label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--forest-800); margin-bottom: 7px; }
.pr-form input, .pr-form textarea, .pr-form select {
  width: 100%; padding: 12px 14px; border: 1px solid rgba(74,71,62,0.22); border-radius: 10px;
  background: var(--paper); font-family: var(--font-sans); font-size: 14px; color: var(--ink);
  margin-bottom: 18px; transition: border-color .2s ease, box-shadow .2s ease;
}
.pr-form textarea { resize: vertical; min-height: 100px; }
.pr-form input:focus, .pr-form textarea:focus, .pr-form select:focus {
  outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(198,150,79,0.16);
}
.pr-form small.hint { display: block; margin-top: -12px; margin-bottom: 18px; font-size: 12px; color: var(--ink-faint); }
.pr-form .amount-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 22px; }
.pr-form .amount-btn {
  padding: 10px 20px; border-radius: 999px; border: 1px solid rgba(140,101,48,0.3); background: var(--paper);
  font-weight: 700; font-size: 13.5px; color: var(--forest-800); cursor: pointer; transition: all 0.2s ease; font-family: var(--font-sans);
}
.pr-form .amount-btn.selezionato, .pr-form .amount-btn:hover { background: var(--forest-800); color: var(--ivory); border-color: var(--forest-800); }
.pr-form .amount-input { width: 130px; }
.pr-form .metodo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
.pr-form .metodo-btn {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(140,101,48,0.3); background: var(--paper);
  font-family: var(--font-sans); transition: all 0.2s ease;
}
.pr-form .metodo-btn strong { font-size: 12.5px; color: var(--forest-800); }
.pr-form .metodo-btn span { font-size: 10.5px; line-height: 1.3; color: var(--ink-faint); font-weight: 400; }
.pr-form .metodo-btn.selezionato { background: var(--forest-800); border-color: var(--forest-800); }
.pr-form .metodo-btn.selezionato strong, .pr-form .metodo-btn.selezionato span { color: var(--ivory); }
@media (max-width: 480px) { .pr-form .metodo-row { grid-template-columns: 1fr; } }
.pr-form .metodo-row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px) { .pr-form .metodo-row--3 { grid-template-columns: 1fr; } }
.pr-form .checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 22px; }

/* Filtro Mattina/Pomeriggio negli orari disponibili (prenotazione
   Trattamenti) - due chip piccole, indipendenti l'una dall'altra. */
.pr-filtro-turno { display: flex; gap: 8px; margin-bottom: 10px; }
.pr-filtro-turno__btn {
  padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(140,101,48,0.3); background: var(--paper);
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--forest-800); cursor: pointer; transition: all 0.2s ease;
}
.pr-filtro-turno__btn.attivo { background: var(--forest-800); color: var(--ivory); border-color: var(--forest-800); }
.pr-form .checkbox-row input[type="checkbox"] { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--forest-800); flex-shrink: 0; }
.pr-form .checkbox-row label { margin-bottom: 0; font-size: 12.5px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.pr-form .field-file {
  border: 1px dashed rgba(140,101,48,0.4); border-radius: 10px; padding: 16px; background: var(--paper); margin-bottom: 18px;
}
.pr-alert { border-radius: 10px; padding: 13px 16px; font-size: 13.5px; margin-bottom: 18px; line-height: 1.5; }
.pr-alert--success { background: #e3efe0; color: #2c4a26; }
.pr-alert--danger { background: #fbe6e2; color: #8c2f1f; }
.pr-alert--info { background: var(--gold-100); color: var(--gold-700); }
/* toast di conferma dopo un'azione (admin.php/operatore.php) - prima era
   un banner inline in cima alla pagina che restava lì finché non si
   ricaricava a mano, visibile anche cambiando scheda (le schede sono
   pannelli mostrati/nascosti via JS sulla stessa pagina, non un
   ricaricamento): ora è un piccolo popup che sparisce da solo. */
.pr-toast-conferma {
  position: fixed; top: 18px; right: 18px; z-index: 3000; max-width: 320px;
  background: var(--gold-100); color: var(--gold-700); border-radius: 10px;
  padding: 12px 16px; font-size: 13px; line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  animation: pr-toast-scompare 1s ease forwards;
}
@keyframes pr-toast-scompare {
  0%, 65% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}
/* banner copia/taglia trattamenti (admin-calendario.php): flex solo
   quando visibile - MAI display inline insieme a [hidden] sullo stesso
   elemento, l'inline vince sempre sul [hidden]{display:none} dello user
   agent e l'elemento resterebbe visibile anche a hidden impostato. */
#clipboard-appuntamenti-banner:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pr-form-note { font-size: 12.5px; color: var(--ink-faint); margin-top: -6px; }

@media (max-width: 640px) {
  .pr-form .row2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Gift card — mockup CSS, niente immagine
   ========================================================================== */
.pr-giftcard { position: relative; aspect-ratio: 1.62 / 1; border-radius: 22px; background: linear-gradient(135deg, var(--forest-700), var(--forest-900)); box-shadow: var(--shadow-soft); padding: 9px; }
.pr-giftcard__inner {
  position: relative; width: 100%; height: 100%; border: 1px solid rgba(230,197,140,0.4); border-radius: 15px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; overflow: hidden;
}
.pr-giftcard__inner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 18%, rgba(230,197,140,0.16), transparent 60%); }
.pr-giftcard__inner img { position: relative; width: 64px; margin-bottom: 14px; opacity: 0.95; }
.pr-giftcard__inner h3 { position: relative; font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--ivory); font-size: clamp(26px, 4vw, 38px); letter-spacing: 0.01em; }
.pr-giftcard__inner .line { position: relative; width: 56px; height: 1px; background: var(--gold-500); margin: 14px 0; }
.pr-giftcard__inner .loc { position: relative; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-300); }

/* ==========================================================================
   Oasi Professionale — card dei professionisti (icona, non foto)
   ========================================================================== */
.pr-oasi-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pr-oasi-team-card { background: var(--paper); border-radius: var(--radius-lg); padding: 36px 30px; text-align: center; box-shadow: var(--shadow-card); border: 1px solid rgba(140,101,48,0.10); }
.pr-oasi-team-card .icon { position: relative; width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--gold-500); display: flex; align-items: center; justify-content: center; margin: 0 auto 26px; color: var(--forest-800); }
.pr-oasi-team-card .icon svg { width: 26px; height: 26px; position: relative; z-index: 2; }
.pr-oasi-team-card .icon::before,
.pr-oasi-team-card .icon::after {
  content: ""; position: absolute; width: 15px; height: 23px; border-radius: 0 100% 0 100%;
}
.pr-oasi-team-card .icon::before { top: -7px; left: -9px; background: var(--sage-500); opacity: 0.55; transform: rotate(-20deg); }
.pr-oasi-team-card .icon::after { bottom: -7px; right: -9px; background: var(--forest-600); opacity: 0.5; transform: rotate(160deg); }
.pr-oasi-team-card h3 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 22px; color: var(--forest-900); margin-bottom: 10px; }
.pr-oasi-team-card p { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 16px; }
.pr-oasi-team-card .badge { display: inline-block; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-700); border: 1px solid rgba(140,101,48,0.3); border-radius: 999px; padding: 6px 13px; }
@media (max-width: 860px) { .pr-oasi-team-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Team
   ========================================================================== */
.pr-team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.pr-team-card { background: var(--paper); border-radius: var(--radius-lg); padding: 36px 32px; text-align: center; box-shadow: var(--shadow-card); border: 1px solid rgba(140,101,48,0.10); }
.pr-team-card img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; margin: 0 auto 20px; border: 3px solid var(--cream); box-shadow: 0 0 0 1px rgba(140,101,48,0.25); }
.pr-team-card h2 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 23px; color: var(--forest-900); margin-bottom: 4px; }
.pr-team-card .role { display: block; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-700); font-weight: 700; margin-bottom: 18px; }
.pr-team-card p { font-size: 13.5px; line-height: 1.75; color: var(--ink-soft); text-align: left; margin-bottom: 10px; }
.pr-team-card p.lead { font-weight: 600; color: var(--ink); }
@media (max-width: 780px) { .pr-team-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Elenco promozioni in corso (promozione-acquista.php)
   ========================================================================== */
.pr-promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.pr-promo-card { background: var(--paper); border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow-card); border: 1px solid rgba(140,101,48,0.10); display: flex; flex-direction: column; }
.pr-promo-card h3 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 21px; color: var(--forest-900); margin-bottom: 8px; }
.pr-promo-card__descrizione { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 14px; flex: 1; }
.pr-promo-card__prezzo { font-size: 26px; font-family: var(--font-serif); font-style: italic; color: var(--gold-700); margin-bottom: 10px; }

/* ==========================================================================
   Recensioni — carosello scroll-snap
   ========================================================================== */
.pr-review-card {
  scroll-snap-align: start; flex: 0 0 auto; width: min(84vw, 380px);
  background: var(--paper); border-radius: var(--radius-md); padding: 28px 26px;
  box-shadow: var(--shadow-card); border: 1px solid rgba(140,101,48,0.10);
  display: flex; flex-direction: column;
}
.pr-review-card .stars { color: var(--gold-500); letter-spacing: 2px; font-size: 13px; margin-bottom: 14px; }
.pr-review-card blockquote {
  font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 18px;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; flex-grow: 1;
}
.pr-review-card cite { font-style: normal; font-weight: 700; font-size: 13.5px; color: var(--forest-900); }
.pr-review-card .src { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }

/* ==========================================================================
   Gallery + lightbox
   ========================================================================== */
.pr-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pr-gallery-thumb { position: relative; display: block; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1 / 1; box-shadow: var(--shadow-card); }
.pr-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.pr-gallery-thumb:hover img { transform: scale(1.08); }
.pr-gallery-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,24,16,0.35), transparent 40%); opacity: 0; transition: opacity 0.3s ease; }
.pr-gallery-thumb:hover::after { opacity: 1; }
@media (max-width: 960px) { .pr-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .pr-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.pr-lightbox { position: fixed; inset: 0; z-index: 800; visibility: hidden; }
.pr-lightbox.is-open { visibility: visible; }
.pr-lightbox__scrim { position: absolute; inset: 0; background: rgba(15,24,16,0.92); opacity: 0; transition: opacity 0.3s ease; }
.pr-lightbox.is-open .pr-lightbox__scrim { opacity: 1; }
.pr-lightbox__stage { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; justify-content: center; padding: 60px 80px; }
.pr-lightbox__stage img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); opacity: 0; transform: scale(0.96); transition: opacity 0.3s ease, transform 0.3s ease; }
.pr-lightbox.is-open .pr-lightbox__stage img { opacity: 1; transform: scale(1); }
.pr-lightbox__close, .pr-lightbox__prev, .pr-lightbox__next {
  position: absolute; z-index: 3; background: rgba(250,246,238,0.1); border: 1px solid rgba(250,246,238,0.25); color: var(--ivory);
  border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease;
}
.pr-lightbox__close svg, .pr-lightbox__prev svg, .pr-lightbox__next svg { width: 18px; height: 18px; }
.pr-lightbox__close:hover, .pr-lightbox__prev:hover, .pr-lightbox__next:hover { background: rgba(250,246,238,0.18); }
.pr-lightbox__close { top: 24px; right: 24px; }
.pr-lightbox__prev { left: 24px; top: 50%; transform: translateY(-50%); }
.pr-lightbox__next { right: 24px; top: 50%; transform: translateY(-50%); }
.pr-lightbox__counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(250,246,238,0.7); font-size: 12.5px; letter-spacing: 0.08em; }
@media (max-width: 640px) { .pr-lightbox__stage { padding: 80px 20px; } .pr-lightbox__prev { left: 10px; } .pr-lightbox__next { right: 10px; } }

/* ==========================================================================
   Contatti
   ========================================================================== */
.pr-contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: stretch; }
.pr-contact-grid iframe { width: 100%; height: 100%; min-height: 420px; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); filter: grayscale(0.15) sepia(0.08); }
.pr-contact-card { background: var(--paper); border-radius: var(--radius-lg); padding: 36px 32px; box-shadow: var(--shadow-card); border: 1px solid rgba(140,101,48,0.10); }
.pr-contact-card h3 { font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--forest-900); margin-bottom: 26px; }
.pr-contact-item { display: flex; gap: 14px; margin-bottom: 22px; }
.pr-contact-item svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--gold-600); margin-top: 2px; }
.pr-contact-item .label { display: block; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; margin-bottom: 3px; }
.pr-contact-item a, .pr-contact-item span.value { font-size: 14.5px; color: var(--ink); }
.pr-contact-item a:hover { color: var(--gold-700); }
.pr-contact-social { display: flex; gap: 10px; margin-top: 8px; }
.pr-contact-social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(140,101,48,0.3); display: flex; align-items: center; justify-content: center; color: var(--forest-800); transition: background 0.2s ease, border-color 0.2s ease; }
.pr-contact-social a:hover { background: var(--gold-100); border-color: var(--gold-500); }
.pr-contact-social svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .pr-contact-grid { grid-template-columns: 1fr; } .pr-contact-grid iframe { min-height: 320px; } }

/* ==========================================================================
   Pagine di autenticazione (login, registrazione, password)
   ========================================================================== */
.pr-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--ivory); }
.pr-auth__card { width: 100%; max-width: 440px; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: clamp(32px, 6vw, 52px); border: 1px solid rgba(140,101,48,0.10); }
.pr-auth__card--wide { max-width: 620px; }
.pr-auth__logo { display: block; text-align: center; margin-bottom: 22px; }
.pr-auth__logo img { height: 64px; }
.pr-auth h1 { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-align: center; font-size: 26px; color: var(--forest-900); margin-bottom: 8px; }
.pr-auth__sub { text-align: center; font-size: 13.5px; color: var(--ink-faint); margin-bottom: 28px; line-height: 1.6; }
.pr-auth .pr-form { max-width: none; }
.pr-auth .pr-btn { width: 100%; justify-content: center; }
.pr-auth__foot { text-align: center; margin-top: 22px; font-size: 13.5px; color: var(--ink-soft); }
.pr-auth__foot a { color: var(--gold-700); font-weight: 600; }
.pr-auth__foot p + p { margin-top: 8px; }

/* ==========================================================================
   Dashboard (area cliente / professionista / admin)
   ========================================================================== */
.pr-dash { background: var(--ivory); min-height: 100vh; }
.pr-dash-header {
  background: var(--forest-900); color: var(--ivory);
  padding: 16px clamp(20px, 4vw, 40px);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
}
.pr-dash-header__brand { display: flex; align-items: center; gap: 14px; }
.pr-dash-header__brand img { height: 38px; }
.pr-dash-header__brand h1 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 21px; }
.pr-dash-header__nav { display: flex; gap: 10px; flex-wrap: wrap; }
.pr-dash-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(250,246,238,0.28); background: none; color: var(--ivory); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  font-family: inherit; cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.pr-dash-pill:hover { background: rgba(250,246,238,0.1); border-color: var(--gold-300); }
.pr-dash-pill svg { width: 14px; height: 14px; }
.pr-dash-pill--sezione.attiva { background: var(--gold-600); border-color: var(--gold-600); color: var(--forest-900); }
.pr-dash-header__sezioni { display: inline-flex; gap: 8px; padding-right: 12px; margin-right: 4px; border-right: 1px solid rgba(250,246,238,0.22); }

.pr-menu-hamburger { display: none; }
@media (max-width: 768px) {
  .pr-menu-hamburger { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(250,246,238,0.28); background: none; color: var(--ivory); }
  .pr-menu-hamburger svg { width: 20px; height: 20px; }
  /* il collasso a tendina riguarda solo l'header che ha il pulsante
     hamburger subito prima (admin.php/operatore.php) - le altre pagine
     con .pr-dash-header__nav (1-2 pillole, niente hamburger) restano
     visibili come sempre, solo compattate dalla regola qui sotto. */
  .pr-menu-hamburger + .pr-dash-header__nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 8px; background: var(--forest-900); padding: 16px clamp(20px, 4vw, 40px); box-shadow: 0 12px 24px -12px rgba(0,0,0,0.4); z-index: 80; }
  .pr-menu-hamburger + .pr-dash-header__nav.aperto { display: flex; }
  .pr-dash-header { position: relative; }
  .pr-menu-hamburger + .pr-dash-header__nav .pr-dash-header__sezioni { flex-direction: column; border-right: none; padding-right: 0; margin-right: 0; border-bottom: 1px solid rgba(250,246,238,0.22); padding-bottom: 8px; margin-bottom: 4px; }
}
@media (max-width: 480px) {
  .pr-dash-pill { padding: 7px 12px; font-size: 11px; }
}

.pr-dash-main { max-width: 980px; margin: 0 auto; padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 40px) 80px; display: flex; flex-direction: column; gap: 22px; }
.pr-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }

.pr-dash-shortcut {
  display: flex; align-items: center; gap: 18px; background: var(--paper); border-radius: var(--radius-lg);
  padding: 22px 26px; box-shadow: var(--shadow-card); border: 1px solid rgba(140,101,48,0.10); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pr-dash-shortcut:hover { transform: translateY(-3px); box-shadow: 0 22px 42px -22px rgba(23,38,25,0.3); }
.pr-dash-shortcut__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--cream); display: flex; align-items: center; justify-content: center; color: var(--gold-700); flex-shrink: 0; }
.pr-dash-shortcut__icon svg { width: 22px; height: 22px; }
.pr-dash-shortcut h3 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 18px; color: var(--forest-900); margin-bottom: 2px; }
.pr-dash-shortcut p { font-size: 13px; color: var(--ink-faint); }

/* Tessere statistiche della scheda "Oggi": numero grande a colpo d'occhio,
   più compatte delle .pr-dash-shortcut (qui il contenuto è un numero, non
   un link con descrizione). */
.pr-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.pr-stat-tile { background: var(--cream); border-radius: var(--radius-md); padding: 14px 16px; }
.pr-stat-tile--cliccabile { display: block; width: 100%; border: none; text-align: left; font-family: inherit; cursor: pointer; transition: box-shadow 0.15s ease; }
.pr-stat-tile--cliccabile:hover { box-shadow: 0 6px 16px -10px rgba(23,38,25,0.35); }
.pr-stat-tile__num { display: block; font-family: var(--font-serif); font-style: italic; font-size: 28px; color: var(--forest-900); line-height: 1.1; }
.pr-stat-tile__label { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }

/* Scheda "Dashboard": tabella appuntamenti + grafico a ciambella affiancati
   da desktop, impilati sotto i 900px (la tabella ha molte colonne e non
   deve competere per spazio col grafico su schermi stretti). */
.pr-dash-dashboard-griglia { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-top: 18px; align-items: start; }
@media (max-width: 900px) {
  .pr-dash-dashboard-griglia { grid-template-columns: 1fr; }
}
/* colore letto da canvas.js via getComputedStyle() per il numero al
   centro della ciambella "Appuntamenti eseguiti" - un colore fisso nel JS
   sarebbe illeggibile in uno dei due temi (chiaro di giorno, scuro sotto
   768px in amministrazione). */
.pr-dashboard-donut-wrap { color: var(--forest-900); }

/* Scheda "Oggi": intestazione in stile "large title" (eyebrow con la data
   + titolo grande), come su una vista nativa - autonoma dall'intestazione
   condivisa "Amministrazione" in cima alla pagina, che resta identica per
   tutte le altre schede. */
.pr-oggi-eyebrow { font-size: 12px; color: var(--ink-faint); margin: 0 0 2px; text-transform: capitalize; }
/* h2.pr-oggi-titolo (non solo .pr-oggi-titolo): il reset ".pr h1,h2,h3,h4
   { margin:0 }" più sopra ha specificità (0,1,1) e batte una singola
   classe (0,1,0) indipendentemente dall'ordine nel foglio - senza il tag
   "h2" qui davanti, il margine sotto restava sempre a 0 nonostante questa
   regola. Stesso principio già noto per i bottoni (vedi commento sopra
   ".pr button"), qui riapplicato alle intestazioni. */
h2.pr-oggi-titolo { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 30px; color: var(--forest-900); margin: 0 0 32px; }

/* Riga compatta per un appuntamento: pallino colore (stesso sistema del
   Planner) + orario/cliente su una riga, servizio/operatrice sotto -
   invece della tabella con colonne, che sotto larghezze strette si
   impila una sopra l'altra ed è troppo lunga da scorrere. */
.pr-oggi-riga { display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px; border-bottom: 1px solid rgba(140,101,48,0.12); }
.pr-oggi-riga:last-child { border-bottom: none; }
.pr-oggi-riga__pallino { width: 4px; align-self: stretch; border-radius: 2px; flex-shrink: 0; }
.pr-oggi-riga__testo { min-width: 0; }
.pr-oggi-riga__titolo { font-size: 14.5px; font-weight: 700; color: var(--forest-900); margin: 0; }
.pr-oggi-riga__meta { font-size: 12.5px; color: var(--ink-faint); margin: 2px 0 0; }

/* Riga compatta per un cliente (scheda Clienti): stesso principio delle
   righe di "Oggi" - nome/azione in cima, dettagli secondari sotto, invece
   della tabella a tredici colonne che si impilava una sopra l'altra. */
.pr-cliente-riga { padding: 12px 4px; border-bottom: 1px solid rgba(140,101,48,0.12); }
.pr-cliente-riga:last-child { border-bottom: none; }
.pr-cliente-riga__testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pr-cliente-riga__nome { font-size: 14.5px; font-weight: 700; color: var(--forest-900); margin: 0; }
.pr-cliente-riga__meta { font-size: 12.5px; color: var(--ink-faint); margin: 2px 0 0; }
.pr-cliente-riga__dettagli { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.pr-cliente-riga__nota { flex: 1 1 100%; font-size: 12.5px; color: var(--ink-soft); margin: 4px 0 0; }

/* Griglia "Operatrici" (e simili: solo un nome, tocco per il dettaglio) -
   stesso linguaggio dei pulsanti categoria del wizard di prenotazione. */
.pr-operatrice-griglia { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pr-operatrice-btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 64px; padding: 14px 12px; border-radius: 14px; border: 1.5px solid rgba(140,101,48,0.2);
  background: var(--cream); color: var(--forest-900); font-family: var(--font-sans); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.15s ease;
}
.pr-operatrice-btn:hover, .pr-operatrice-btn:active { border-color: var(--gold-600); background: var(--paper); }
.pr-operatrice-btn.is-disattivata { opacity: 0.5; }

/* Griglia "Magazzino": tessera con nome + giacenza, tocco per il
   dettaglio (brand/costo/prezzo/margine). La casella di selezione
   multipla resta nascosta finché "Modifica selezione" non attiva
   .in-selezione sul contenitore. */
.pr-magazzino-griglia { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pr-magazzino-tile-wrap { position: relative; }
.pr-magazzino-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; text-align: left;
  min-height: 76px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid rgba(140,101,48,0.2);
  background: var(--cream); font-family: var(--font-sans); cursor: pointer; transition: all 0.15s ease;
}
.pr-magazzino-tile:hover, .pr-magazzino-tile:active { border-color: var(--gold-600); background: var(--paper); }
.pr-magazzino-tile__nome { font-size: 13.5px; font-weight: 700; color: var(--forest-900); }
.pr-magazzino-tile__pallino { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.pr-magazzino-tile__checkbox {
  display: none; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px;
  accent-color: var(--forest-800); z-index: 2;
}
.pr-magazzino-griglia.in-selezione .pr-magazzino-tile__checkbox { display: block; }
.pr-magazzino-griglia.in-selezione .pr-magazzino-tile { padding-right: 40px; }

/* Riga compatta per una prenotazione (scheda Prenotazioni), stesso
   principio delle righe di "Oggi"/Clienti. */
.pr-prenotazione-riga { padding: 12px 4px; border-bottom: 1px solid rgba(140,101,48,0.12); }
.pr-prenotazione-riga:last-child { border-bottom: none; }
.pr-prenotazione-riga.is-editing { background: var(--gold-100); }
.pr-prenotazione-riga__testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pr-prenotazione-riga__titolo { font-size: 14.5px; font-weight: 700; color: var(--forest-900); margin: 0; }
.pr-prenotazione-riga__meta { font-size: 12.5px; color: var(--ink-faint); margin: 2px 0 0; }
.pr-prenotazione-riga__azioni { display: flex; gap: 8px; margin-top: 8px; }

/* "Le mie prenotazioni" (area-cliente.php): riga compatta, tocco per
   aprire lo sheet con i dettagli - pochi dati subito visibili (data/ora/
   servizio/professionista), il resto (stato, azione di annullamento)
   solo quando serve davvero, invece di stare sempre in vista. */
.pr-mia-prenotazione-riga {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: none; background: none; padding: 12px 4px; border-bottom: 1px solid rgba(140,101,48,0.12);
  font-family: var(--font-sans); cursor: pointer;
}
.pr-mia-prenotazione-riga:last-child { border-bottom: none; }
.pr-mia-prenotazione-riga__barra { align-self: stretch; width: 4px; border-radius: 2px; flex-shrink: 0; }
.pr-mia-prenotazione-riga__testo { flex: 1; min-width: 0; }
.pr-mia-prenotazione-riga__titolo { display: block; font-size: 14.5px; font-weight: 700; color: var(--forest-900); }
.pr-mia-prenotazione-riga__meta { display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
.pr-mia-prenotazione-riga__arrow { flex-shrink: 0; opacity: 0.4; }

.pr-wizard-sheet__grip { width: 36px; height: 4px; border-radius: 3px; background: rgba(140,101,48,0.2); margin: 0 auto 14px; }
.pr-dettaglio-scrim { display: none; position: fixed; inset: 0; background: rgba(15,24,16,0.5); z-index: 190; }
.pr-dettaglio-scrim.aperto { display: block; }

.pr-dash-card { background: var(--paper); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 36px); box-shadow: var(--shadow-card); border: 1px solid rgba(140,101,48,0.10); }
.pr-dash-card h2 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 21px; color: var(--forest-900); margin-bottom: 18px; }
.pr-dash-card .empty { font-size: 13.5px; color: var(--ink-faint); }

.pr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* Tabella Servizi Trattamenti: troppe colonne per stare comode su ogni
   schermo. table-layout:fixed rispetta le percentuali date a ogni <th> (il
   layout automatico invece ignora le larghezze e si allarga quanto serve
   al contenuto, spingendo "Azioni" fuori dallo schermo) - Macchinario e
   Operatrici qualificate hanno la percentuale più piccola apposta, così
   sono le prime a restringersi/andare a capo quando lo spazio cala. */
/* min-width: rete di sicurezza pura (non dovrebbe mai scattare, dato lo
   stadio 4 qui sotto che passa alle tessere con largo anticipo) - solo
   per non tornare mai al collasso lettera-per-lettera se il contenuto
   reale fosse più lungo del previsto. */
#tabella-servizi-trattamenti { table-layout: fixed; min-width: 780px; }
#tabella-servizi-trattamenti td { overflow-wrap: break-word; }
/* i badge ("Nessuna", "Attivo"...) sono a larghezza automatica: in una
   colonna stretta sconfinavano oltre la cella, incollandosi al testo
   della colonna accanto (niente spazio visibile tra le due). Troncano
   con "..." restando dentro i propri confini, stesso trattamento delle
   intestazioni qui sopra. */
#tabella-servizi-trattamenti td .pr-badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* le intestazioni troncano con "..." invece di andare a capo a metà
   parola (es. "MACCHI/NARIO") - il titolo per esteso resta leggibile al
   passaggio del mouse tramite l'attributo title sullo span. Classe
   generica (non solo Servizi-Trattamenti, vedi anche Clienti più sotto),
   serve solo un contenitore con una larghezza per far scattare l'ellissi. */
#tabella-servizi-trattamenti th { overflow: hidden; }
.pr-th-tronca { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* stadio 2 (due righe): Servizio/Categoria sono le uniche colonne con
   testo libero (le altre sono numeri/badge corti) - restringerle forza
   "Ceretta ascelle" ad andare a capo su "Ceretta"/"ascelle" invece che
   restare compresso su una riga sola fino a ridosso dello stadio 4.
   !important necessario: l'attributo style="width:.." nell'HTML ha
   priorità più alta di un normale selettore da foglio di stile. */
@media (max-width: 1450px) {
  #tabella-servizi-trattamenti th:nth-child(3) { width: 12% !important; }
  #tabella-servizi-trattamenti th:nth-child(4) { width: 8% !important; }
}
/* stadio 4 (versione mobile) anticipato SOLO per questa tabella: ha troppe
   colonne (11) perché la compattazione (stadio 1), l'andare a capo
   (stadio 2) e il menu ristretto (stadio 3) bastino fino alla soglia
   generica di 1000px usata dalle altre tabelle. Passa alle tessere (già
   pronte per sotto i 768px) con anticipo invece di lasciar degradare la
   tabella oltre il leggibile. */
@media (max-width: 1180px) {
  .pr-dash-main--sidebar #tabella-servizi-trattamenti { display: none; }
  .pr-dash-main--sidebar #tessere-servizi-trattamenti.pr-solo-mobile-tessere { display: grid; }
}

/* Clienti: stesso principio di degradazione "meno invasiva prima" - una
   colonna in meno (Nascita, la meno indispensabile a colpo d'occhio) e
   l'intestazione di Prenotazioni troncata bastano quasi sempre a restare
   comode PRIMA che il menu a sinistra debba restringersi a sole icone
   (@media 1250px in .pr-dash-main--sidebar più sopra). */
@media (max-width: 1350px) {
  #tabella-clienti-desktop .cella-nascita,
  #tabella-clienti-desktop .cella-nota { display: none; }
  #tabella-clienti-desktop .cella-prenotazioni { width: 70px; }
  #tabella-clienti-desktop .cella-prenotazioni .pr-th-tronca { max-width: 60px; }
  /* la colonna Cliente, a layout automatico, si allarga quanto serve al
     nome più lungo di tutto l'elenco - lasciando un vuoto enorme prima
     della colonna successiva per ogni nome più corto. Un tetto massimo
     (a capo, non troncato: il nome intero resta sempre leggibile) libera
     quello spazio per il resto della tabella. max-width va sullo span
     interno, non sul td: le celle a layout automatico lo ignorano. */
  #tabella-clienti-desktop .cella-cliente-nome { display: inline-block; max-width: 170px; overflow-wrap: break-word; }
}
.pr-table th { text-align: left; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; padding: 9px 8px; border-bottom: 2px solid var(--cream); }
.pr-table td { padding: 10px 8px; border-bottom: 1px solid rgba(140,101,48,0.12); color: var(--ink); vertical-align: middle; }
.pr-table tr:last-child td { border-bottom: none; }
.pr-report-riga-gruppo { font-weight: 700; background: var(--cream); }
/* variante più densa, per tabelle con molte colonne (es. Clienti) che
   altrimenti richiederebbero uno scorrimento orizzontale anche su schermi
   larghi - stesse colonne, solo meno spazio sprecato per cella. */
.pr-table--compatta { font-size: 11.5px; }
.pr-table--compatta th { font-size: 9.5px; padding: 7px 5px; }
.pr-table--compatta td { padding: 6px 5px; }
.pr-table--compatta input, .pr-table--compatta select, .pr-table--compatta textarea { font-size: 11.5px; padding: 5px 6px; }

.pr-badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: capitalize; }
.pr-badge--success { background: #e3efe0; color: #2c4a26; }
.pr-badge--warning { background: var(--gold-100); color: var(--gold-700); }
.pr-badge--secondary { background: var(--cream); color: var(--ink-faint); }
.pr-badge--danger { background: #fbe6e2; color: #8c2f1f; }
.pr-badge--arancio { background: #fbe4d2; color: #a15a1c; }
.pr-badge--giallo { background: #faf0c8; color: #8a7414; }

.pr-dash-card-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.pr-dash-card-head h2 { margin-bottom: 0 !important; }
@media (max-width: 700px) {
  .pr-dash-card-head .pr-btn-sm { flex: 1 1 auto; min-width: 132px; justify-content: center; font-size: 10.5px; padding: 8px 10px; }
  .pr-dash-card-head .pr-search-box { flex: 1 1 100%; }
}

.pr-selettore-colore { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 6px; }
.pr-colore-swatch {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14); transition: transform .12s ease;
}
.pr-colore-swatch:hover { transform: scale(1.1); }
.pr-colore-swatch.selezionato { border-color: var(--paper); box-shadow: 0 0 0 2px var(--forest-800); }
.pr-colore-swatch--auto {
  width: auto; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--cream); color: var(--ink-soft);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-sans);
  display: inline-flex; align-items: center; box-shadow: none; border: 2px solid transparent;
}
.pr-colore-swatch--auto.selezionato { background: var(--forest-800); color: #fff; box-shadow: none; }

.pr-search-box { position: relative; flex: 0 1 320px; min-width: 220px; }
.pr-search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-faint); pointer-events: none; }
.pr-search-box input { width: 100%; padding: 9px 12px 9px 34px; border: 1px solid rgba(74,71,62,0.22); border-radius: 999px; background: var(--paper); font-family: var(--font-sans); font-size: 13px; color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease; }
.pr-search-box input:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(198,150,79,0.16); }

/* select "a pillola" nello stile del sito (bordo/raggio/font identici a
   .pr-search-box input), per un menu a tendina fuori da un .pr-form - es.
   il selettore di ordinamento della scheda Clienti, che altrimenti
   resterebbe con l'aspetto grezzo di default del browser. */
.pr-select-pill {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding: 9px 32px 9px 14px; border: 1px solid rgba(74,71,62,0.22); border-radius: 999px;
  background-color: var(--paper); font-family: var(--font-sans); font-size: 13px; color: var(--ink);
  cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
}
.pr-select-pill:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(198,150,79,0.16); }

/* Navigazione a schede di admin.php/operatore.php: colonna verticale a
   sinistra su desktop (vedi .pr-dash-main--sidebar). Sotto i 1024px si
   nasconde del tutto e diventa un pannello flottante, aperto/chiuso dal
   pulsante hamburger .pr-sidebar-hamburger (stesso pattern del menu
   dell'header in alto, .pr-menu-hamburger) - la soglia è più larga di
   quella dell'header apposta, così il menu a sinistra si comprime PRIMA
   che le pillole dell'header in alto inizino a sistemarsi su due righe
   per mancanza di spazio.
   Restringendo la finestra, la degradazione è in ordine di "invasività",
   dal meno al più invasivo, e ogni stadio resta attivo insieme a quelli
   già scattati prima (si sommano, non si sostituiscono):
   1) le tabelle si comprimono (padding ridotto, @media 1500px sotto),
      restando su una riga; 2) quando non basta più, il testo va a capo
      su due righe (@media 1450px, solo per Servizio/Categoria di
      Servizi-Trattamenti, le colonne con testo libero - vedi
      #tabella-servizi-trattamenti più sotto nel file); 3) solo quando
      NEANCHE questo basta, il menu a sinistra si restringe (qui sotto,
      @media 1250px) per recuperare spazio; 4) infine, se anche così non
      c'è più posto, si passa alla versione mobile (tabelle con troppe
      colonne come Servizi-Trattamenti la anticipano rispetto alla soglia
      generica, vedi @media 1180px più sotto nel file). */
.pr-dash-main--sidebar { display: flex; flex-direction: row; align-items: flex-start; gap: 32px; }
.pr-dash-sidebar { flex: 0 0 200px; position: sticky; top: 24px; }
.pr-dash-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 1250px) and (min-width: 1025px) {
  /* stadio 3 (menu compatto) - vedi ordine di degradazione qui sopra.
     Solo icone (etichetta nascosta, resta leggibile al passaggio del
     mouse tramite l'attributo title sullo span): un 168px con solo il
     font ridotto si vedeva a malapena diverso dal menu normale - qui
     invece il taglio è netto e recupera molto più spazio per il
     contenuto. Limitato a >=1025px: sotto i 1024px il menu è già il
     pannello flottante (vedi @media max-width:1024px più sotto), che
     deve restare con le etichette per esteso, non a sole icone. */
  .pr-dash-main--sidebar { gap: 20px; }
  .pr-dash-sidebar { flex: 0 0 56px; }
  .pr-dash-sidebar .pr-admin-tabs .tab-link { justify-content: center; padding: 11px 0; }
  .pr-dash-sidebar .pr-admin-tabs .tab-link svg { width: 20px; height: 20px; }
  .pr-dash-sidebar .pr-admin-tabs .tab-link .pr-tab-link__label { display: none; }
}
@media (max-width: 1500px) {
  /* stadio 1 (compattazione) - meno respiro nelle celle, stessa riga
     singola finché possibile, prima ancora di toccare il menu. Anche lo
     spazio vuoto tra il menu e il contenuto si stringe già da qui (non
     solo quando il menu diventa a sole icone): a piena larghezza il menu
     ha molto spazio bianco a destra delle etichette, inutile recuperarlo
     solo più avanti. */
  .pr-dash-main--sidebar .pr-table th { padding: 7px 6px; }
  .pr-dash-main--sidebar .pr-table td { padding: 7px 6px; }
  .pr-dash-main--sidebar { gap: 20px; }
}
.pr-sidebar-hamburger { display: none; }
.pr-sidebar-scrim { display: none; position: fixed; inset: 0; background: rgba(15,24,16,0.5); z-index: 190; }
@media (max-width: 1024px) {
  .pr-dash-main--sidebar { flex-direction: column; gap: 22px; }
  .pr-sidebar-hamburger {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(140,101,48,0.28);
    background: var(--paper); color: var(--forest-800); cursor: pointer; padding: 0;
  }
  .pr-sidebar-hamburger svg { width: 20px; height: 20px; }
  .pr-sidebar-scrim.aperto { display: block; }
  .pr-dash-sidebar {
    display: none; position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
    flex-basis: auto; width: min(260px, 80vw); margin: 0; background: var(--paper);
    padding: 20px 16px; box-shadow: 12px 0 32px -12px rgba(0,0,0,0.35); overflow-y: auto;
  }
  .pr-dash-sidebar.aperto { display: block; }
}

/* Tab bar in basso, solo smartphone: sostituisce l'hamburger sotto i
   768px con le schede più usate sempre a un tocco (pattern di
   navigazione nativo, non un cassetto da aprire) - "Altro" apre lo
   stesso pannello flottante che l'hamburger apre nella fascia 768-1024px. */
.pr-tabbar { display: none; }
.pr-sidebar-mobile-head { display: none; }
@media (max-width: 768px) {
  .pr-sidebar-hamburger { display: none; }
  .pr-dash-content { padding-bottom: 74px; }
  .pr-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 210;
    background: var(--paper); border-top: 1px solid rgba(140,101,48,0.16);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .pr-tabbar__item {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
    border: none; background: none; padding: 6px 2px; color: var(--ink-faint); font-family: var(--font-sans);
  }
  .pr-tabbar__item svg { width: 22px; height: 22px; }
  .pr-tabbar__item span { font-size: 10px; font-weight: 700; letter-spacing: 0.01em; }
  .pr-tabbar__item.attiva { color: var(--gold-700); }

  /* "Altro" sotto i 768px: non più un cassetto stretto ma una vera
     schermata a sé, con le voci restanti come tessere grandi (stesso
     linguaggio delle tessere di "Oggi") invece di un elenco di testo. */
  .pr-dash-sidebar { left: 0; right: 0; width: auto; border-radius: 0; padding: 0; }
  .pr-sidebar-mobile-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid rgba(140,101,48,0.14);
  }
  .pr-sidebar-mobile-head h3 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 21px; color: var(--forest-900); margin: 0; }
  .pr-sidebar-mobile-head__chiudi {
    display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border-radius: 50%; border: 1px solid rgba(140,101,48,0.28); background: none; color: var(--forest-800); cursor: pointer; padding: 0;
  }
  .pr-sidebar-mobile-head__chiudi svg { width: 16px; height: 16px; }
  .pr-dash-sidebar .pr-admin-tabs {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 18px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .pr-dash-sidebar .pr-admin-tabs .tab-link {
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: var(--cream); border-left: none; border-radius: var(--radius-md);
    min-height: 64px; padding: 14px 10px; font-size: 12.5px;
  }
  .pr-dash-sidebar .pr-admin-tabs .tab-link.attiva { background: var(--forest-800); color: var(--ivory); }
}

.pr-admin-tabs { display: flex; flex-direction: column; gap: 2px; }
.pr-admin-tabs .tab-link { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--ink-faint); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; border-left: 3px solid transparent; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; cursor: pointer; font-family: var(--font-sans); transition: color 0.2s ease, background-color 0.2s ease; white-space: normal; }
.pr-admin-tabs .tab-link svg { width: 17px; height: 17px; flex-shrink: 0; }
.pr-admin-tabs .tab-link:hover { color: var(--forest-800); background: rgba(140,101,48,0.06); }
.pr-admin-tabs .tab-link.attiva { color: var(--forest-800); border-left-color: var(--gold-500); background: rgba(140,101,48,0.09); }
.pr-admin-tab-pane { display: none; }
.pr-admin-tab-pane.attiva { display: block; }

/* Cassa: menu "Servizi/Prodotti/Pacchetti" a colonna a sinistra, riusa lo
   stesso stile .pr-admin-tabs già usato per la navigazione a schede - solo
   il pannello si espande a destra invece che sotto tutta la pagina. */
.pr-cassa-catalogo { display: flex; gap: 28px; align-items: flex-start; }
.pr-cassa-catalogo .pr-admin-tabs { flex: 0 0 170px; }
.pr-cassa-catalogo-pannello { flex: 1 1 auto; min-width: 0; }
@media (max-width: 700px) {
  .pr-cassa-catalogo { flex-direction: column; gap: 18px; }
  .pr-cassa-catalogo .pr-admin-tabs { width: 100%; }
}

.pr-cassa-pacchetti-griglia { display: flex; flex-wrap: wrap; gap: 12px; }
.pr-cassa-pacchetto-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  width: 200px; padding: 14px 16px; border-radius: var(--radius-md);
  border: 1px solid rgba(140,101,48,0.28); background: var(--paper); cursor: pointer; text-align: left;
  font-family: var(--font-sans); transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pr-cassa-pacchetto-btn:hover { border-color: var(--gold-500); box-shadow: 0 8px 20px -14px rgba(23,38,25,0.35); }
.pr-cassa-pacchetto-btn__nome { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--forest-900); }
.pr-cassa-pacchetto-btn__dettagli { font-size: 11.5px; color: var(--ink-faint); }
.pr-cassa-pacchetto-btn__prezzo { font-size: 15px; font-weight: 700; color: var(--forest-800); margin-top: 4px; }
.pr-cassa-pacchetto-btn__sconto { font-size: 11px; font-weight: 700; color: var(--gold-700); background: var(--cream); padding: 2px 8px; border-radius: 999px; }

/* Planner incorporato: a differenza delle altre schede, occupa l'intero
   schermo come una finestra modale al centro, scurendo tutto il resto
   della pagina dietro di sé (il resto del pannello resta comunque intatto
   sotto, per un ritorno immediato chiudendo il planner). */
.pr-admin-tab-pane.pr-planner-pane.attiva {
  position: fixed; inset: 0; z-index: 900; display: flex;
  align-items: center; justify-content: center;
}
.pr-planner-scrim { position: absolute; inset: 0; background: rgba(15,24,16,0.62); }
.pr-planner-modal {
  /* a tutto schermo: più spazio possibile per il planning, niente cornice
     con margini/bordi arrotondati come un modale qualunque.
     100% e non 100vw/100vh: il genitore (.pr-admin-tab-pane.pr-planner-pane,
     position:fixed; inset:0) è già dimensionato esattamente sulla parte
     di schermo davvero visibile. 100vh su iOS Safari (barra degli
     indirizzi inclusa nel calcolo, anche quando è a schermo intero e
     quindi non "consuma" spazio reale) rende il modale più alto del
     genitore che lo centra: risultato, la parte alta con l'header verde
     finisce tagliata sopra il bordo visibile. */
  position: relative; z-index: 2; width: 100%; height: 100%;
  display: flex; flex-direction: column; background: var(--paper);
  overflow: hidden;
}
.pr-planner-iframe { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; display: block; }

select.pr-select { width: 100%; padding: 12px 14px; border: 1px solid rgba(74,71,62,0.22); border-radius: 10px; background: var(--paper); font-family: var(--font-sans); font-size: 14px; color: var(--ink); }

/* Editor Quill (promozioni) — tema leggero per allinearlo al brand */
.pr-quill-wrap .ql-toolbar.ql-snow { border: 1px solid rgba(74,71,62,0.22); border-radius: 10px 10px 0 0; background: var(--cream); font-family: var(--font-sans); }
.pr-quill-wrap .ql-container.ql-snow { border: 1px solid rgba(74,71,62,0.22); border-top: none; border-radius: 0 0 10px 10px; background: var(--paper); font-family: var(--font-sans); font-size: 14px; min-height: 220px; }
.pr-quill-wrap .ql-editor img { max-width: 100%; height: auto; border-radius: 6px; }
.pr-quill-wrap .ql-snow .ql-stroke { stroke: var(--ink-soft); }
.pr-quill-wrap .ql-snow .ql-fill { fill: var(--ink-soft); }
.pr-quill-wrap .ql-snow.ql-toolbar button:hover .ql-stroke, .pr-quill-wrap .ql-snow .ql-picker-label:hover .ql-stroke { stroke: var(--gold-700); }
.pr-quill-wrap .ql-snow.ql-toolbar button:hover .ql-fill { fill: var(--gold-700); }

.pr-orari-riga { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(140,101,48,0.10); flex-wrap: wrap; }
.pr-orari-riga:last-child { border-bottom: none; }
.pr-orari-giorno { width: 90px; flex-shrink: 0; font-weight: 700; font-size: 13px; color: var(--forest-800); }
.pr-orari-turni { display: flex; gap: 24px; flex-wrap: wrap; flex: 1; }
.pr-orari-turno { display: flex; align-items: center; gap: 6px; }
.pr-orari-turno span { font-size: 12px; color: var(--ink-faint); width: 68px; flex-shrink: 0; }
.pr-orari-turno input[type="time"] { padding: 7px 8px; border: 1px solid rgba(74,71,62,0.22); border-radius: 7px; background: var(--paper); font-size: 13px; width: 100px; font-family: var(--font-sans); color: var(--ink); }
.pr-orari-continuo-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-faint); font-weight: 400; cursor: pointer; white-space: nowrap; }
.pr-orari-continuo-toggle input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--forest-800); margin: 0; }
@media (max-width: 600px) { .pr-orari-turni { gap: 10px; flex-direction: column; align-items: flex-start; } }

.pr-form-inline-edit input, .pr-form-inline-edit select, .pr-form-inline-edit textarea { padding: 7px 10px; border: 1px solid rgba(74,71,62,0.22); border-radius: 7px; background: var(--paper); font-family: var(--font-sans); font-size: 13px; color: var(--ink); width: 100%; margin-bottom: 6px; }
.pr-form-inline-edit input:focus, .pr-form-inline-edit select:focus, .pr-form-inline-edit textarea:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(198,150,79,0.16); }
.pr-form-inline-edit input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--forest-800); margin: 0; }

.pr-form-grid-5 { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr; gap: 0 16px; align-items: start; }
.pr-form-grid-4 { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 0 16px; align-items: start; }
.pr-form-grid-4b { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 0 16px; align-items: start; }
.pr-form-grid-4c { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap: 0 16px; align-items: start; }
.pr-form-grid-3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0 16px; align-items: start; }
.pr-form-grid-6 { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 0.8fr 0.8fr 0.9fr; gap: 0 16px; align-items: start; }
/* Le etichette dei campi in griglia devono restare allineate riga per riga
   anche quando una va a capo su due righe (es. "Telefono (facoltativo)")
   mentre le altre della stessa riga stanno su una sola - senza un'altezza
   minima riservata, l'input sotto l'etichetta più lunga scenderebbe di una
   riga rispetto agli altri della stessa riga di griglia. */
.pr-form-grid-3 label, .pr-form-grid-4 label, .pr-form-grid-4b label, .pr-form-grid-4c label, .pr-form-grid-5 label, .pr-form-grid-6 label {
  min-height: 2.6em; line-height: 1.3; display: flex; align-items: flex-end;
}
.pr-giftcard-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(30px, 5vw, 64px); align-items: flex-start; }
@media (max-width: 780px) {
  .pr-form-grid-5, .pr-form-grid-4, .pr-form-grid-4b, .pr-form-grid-4c, .pr-form-grid-3, .pr-form-grid-6, .pr-giftcard-layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Menu categorie a sinistra (prenota-trattamenti.php)
   ========================================================================== */
.pr-trattamenti-layout { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
.pr-trattamenti-filtro { position: sticky; top: 100px; }
.pr-trattamenti-filtro h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); font-weight: 700; margin-bottom: 12px; }
.pr-trattamenti-filtro ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.pr-trattamenti-filtro__link {
  display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 9px 12px;
  font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-soft); cursor: pointer; transition: background .15s ease, color .15s ease;
}
.pr-trattamenti-filtro__link:hover { background: var(--cream); color: var(--forest-800); }
.pr-trattamenti-filtro__link.is-attivo { background: var(--forest-800); color: var(--ivory); font-weight: 600; }
@media (max-width: 900px) {
  .pr-trattamenti-layout { grid-template-columns: 1fr; }
  .pr-trattamenti-filtro { position: static; }
  .pr-trattamenti-filtro ul { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .pr-trattamenti-filtro ul li { flex-shrink: 0; }
  .pr-trattamenti-filtro__link { border: 1px solid rgba(140,101,48,0.2); white-space: nowrap; }
}
@media (max-width: 600px) {
  .pr-giftcard-cover { min-height: auto !important; background: var(--forest-900); }
  .pr-giftcard-cover .pr-page-cover__bg { display: none; }
  .pr-giftcard-cover .pr-page-cover__content { padding: 40px 0 32px; }
}

.pr-btn-sm { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; border: 1px solid; cursor: pointer; background: none; font-family: var(--font-sans); line-height: 1.4; }
/* senza questo, l'attributo hidden non basta a nascondere un .pr-btn-sm:
   "display: inline-flex" qui sopra ha la stessa specificità della regola
   [hidden] del browser, e vince perché arriva dopo - lo stesso identico
   bug già trovato e corretto altrove nel sito per altri elementi. */
.pr-btn-sm[hidden] { display: none; }
.pr-btn-sm--danger { border-color: #d99b8e; color: #a8402c; }
.pr-btn-sm--danger:hover { background: #fbe6e2; }
.pr-btn-sm--ghost { border-color: rgba(140,101,48,0.3); color: var(--forest-800); }
.pr-btn-sm--ghost:hover { background: var(--cream); }
.pr-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
/* la pillola (border-radius:999px) di .pr-btn-sm ha senso su un'unica
   riga corta - qui la colonna "Azioni" è stretta e le etichette dei
   pulsanti sono spesso 2-3 parole ("Segna come usata", "Reinvia Gift
   Card"): a piena pillola, il testo che va a capo su più righe gonfiava
   il pulsante in un blob quasi circolare invece di restare un rettangolo
   arrotondato normale. */
.pr-actions .pr-btn-sm { display: flex; justify-content: center; text-align: center; border-radius: 10px; }
.pr-actions form { display: block; }
.pr-actions form .pr-btn-sm { width: 100%; }
.pr-actions small { color: var(--ink-faint); font-size: 11px; }

.pr-dash-main--wide { max-width: 1360px; }

.pr-table tr.is-editing { background: var(--gold-100); }

/* FullCalendar — tema leggero per allinearlo al brand */
.pr-fc-wrap .fc { font-family: var(--font-sans); }
.pr-fc-wrap .fc-toolbar-title { font-family: var(--font-serif); font-style: italic; color: var(--forest-900); font-size: 20px !important; }
.pr-fc-wrap .fc-button { background: var(--forest-800); border-color: var(--forest-800); text-transform: capitalize; font-family: var(--font-sans); font-size: 12.5px; box-shadow: none !important; }
.pr-fc-wrap .fc-button:hover { background: var(--forest-700); border-color: var(--forest-700); }
.pr-fc-wrap .fc-button-primary:not(:disabled).fc-button-active,
.pr-fc-wrap .fc-button-primary:not(:disabled):active { background: var(--gold-600); border-color: var(--gold-600); }
.pr-fc-wrap .fc-event { position: relative; background: var(--gold-500); border-color: var(--gold-600); color: var(--forest-900); font-size: 11.5px; }
.pr-fc-wrap .fc-timegrid-now-indicator-line { border-color: #a8402c; }
.pr-fc-wrap a { color: var(--forest-800); }
.pr-fc-wrap .fc-col-header-cell-cushion, .pr-fc-wrap .fc-daygrid-day-number { color: var(--ink); }

/* ==================== Planner: vista per operatrice ==================== */
/* "Oggi" a sinistra, data/frecce raggruppate a destra (era tutto insieme a
   sinistra) - sticky in cima come l'intestazione con le operatrici qui
   sotto, così restano entrambe a vista scorrendo la griglia oraria verso
   il basso, non solo l'intestazione. z-index più alto dell'intestazione
   (10) perché sta sopra di lei quando entrambe sono "attaccate". */
.pr-op-planner-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 11; background: var(--paper); padding: 4px 0;
}
.pr-op-planner-nav input[type="date"] { border: 1px solid rgba(140,101,48,0.3); border-radius: 999px; padding: 9px 16px; font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--ink); background: #fff; }
/* data/frecce/oggi leggermente più grandi dei .pr-btn-sm standard, così la
   data (l'informazione più importante di questa barra) si vede a colpo
   d'occhio invece di dover essere cercata. */
.pr-op-planner-nav .pr-btn-sm { font-size: 13px; padding: 9px 16px; }
/* stessa barra data/frecce/oggi del Planner, riusata identica per la
   navigazione tra i giorni nella Dashboard (inc/tab_dashboard.php) - senza
   questa, l'input date resta con l'aspetto grezzo di default del browser,
   fuori posto in mezzo al resto della grafica del sito. */
.pr-dash-data-nav input[type="date"] { border: 1px solid rgba(140,101,48,0.3); border-radius: 999px; padding: 9px 16px; font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--ink); background: #fff; }
.pr-dash-data-nav .pr-btn-sm { font-size: 13px; padding: 9px 16px; }
/* solo scorrimento orizzontale (tante colonne-operatrice affiancate) - MAI
   verticale qui: il browser abbina sempre overflow-x/overflow-y in coppia
   quando uno dei due è "visible" (lo forza anche lui su "auto"), quindi
   "overflow-y: visible" da solo NON basta a evitarlo - va impostato
   "hidden" (mai "visible") così nessuno dei due valori è "visible" e la
   coppia non scatta più. Il contenitore deve crescere sempre in verticale
   quanto la griglia (alta quanto l'intera giornata) e lasciar scorrere
   solo la pagina, mai se stesso.
   Verificato dal vivo: senza questo, la barra orizzontale della riga
   sottrae qualche pixel all'altezza utile della riga stessa, che basta a
   far scattare anche una barra verticale ridondante accanto a quella
   della pagina - "hidden" invece del "visible" di default elimina la
   coppia automatica alla radice, senza ritagliare nulla di reale (qui non
   c'è mai un'altezza fissata apposta più bassa del contenuto). */
.pr-op-planner-scroll { overflow-x: auto; overflow-y: hidden; }
/* le colonne si allargano per riempire lo schermo quando ci stanno tutte
   (il caso comune, poche operatrici) - min-width le tiene comunque
   leggibili, e solo se non ci stanno più tutte la riga cresce oltre il
   100% (min-width:max-content) e subentra lo scroll orizzontale di
   .pr-op-planner-scroll, con un solo scrollbar invece di due annidate. */
.pr-op-planner-grid { display: flex; width: 100%; min-width: max-content; }
.pr-op-planner-col-tempo { width: 52px; flex-shrink: 0; }
.pr-op-planner-col { flex: 1 1 0; min-width: 160px; border-left: 1px solid rgba(140,101,48,0.12); }
/* riga dei nomi delle operatrici "agganciata" in cima: scorrendo la pagina
   verso il basso per vedere le ore più tarde, il nome di ogni colonna resta
   visibile invece di sparire subito, così si sa sempre di chi è quella
   colonna anche a metà giornata. Non basta un position:sticky dentro
   .pr-op-planner-scroll - essendo overflow-y:hidden, quel contenitore
   diventa lui stesso il "contenitore di riferimento" dello sticky (anche
   senza scrollare mai per davvero), e lo sticky resta bloccato lì invece
   di agganciarsi alla pagina. Per questo l'intestazione è una riga
   SEPARATA (vedi #op-planner-head-wrap in admin-calendario.php), fuori
   da quel contenitore, con lo scroll orizzontale sincronizzato via JS
   invece di condividerlo direttamente. */
/* top:50px = altezza della barra data/frecce/oggi qui sopra, ora anche lei
   sticky (vedi .pr-op-planner-nav): senza questo offset le due barre
   sticky si sovrapporrebbero invece di impilarsi una sotto l'altra. */
.pr-op-planner-head-wrap { overflow-x: hidden; position: sticky; top: 50px; z-index: 10; background: var(--paper); }
.pr-op-planner-head { height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; gap: 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); border-bottom: 2px solid var(--cream); padding: 0 8px; }
.pr-op-planner-head span.pallino { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pr-op-planner-body { position: relative; cursor: pointer; }
.pr-op-planner-riga-ora { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(140,101,48,0.06); pointer-events: none; }
.pr-op-planner-riga-ora.piena { border-top: 1px solid rgba(140,101,48,0.18); }
.pr-op-planner-riga-ora.mezza { border-top: 1px dashed rgba(140,101,48,0.14); }
/* riga dell'ora attuale (solo nel giorno di oggi, vedi disegnaOraCorrente
   in admin-calendario.php) - stesso colore del now-indicator di
   FullCalendar (.fc-timegrid-now-indicator-line) per coerenza tra le due
   viste del planner. Un pallino solo sulla colonna del tempo, a sinistra,
   come punto di riferimento - ripeterlo su ogni colonna sarebbe ridondante. */
.pr-op-planner-ora-corrente { position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none; border-top: 2px solid #a8402c; }
.pr-op-planner-col-tempo .pr-op-planner-ora-corrente::before {
  content: ''; position: absolute; left: -3px; top: -4px; width: 8px; height: 8px;
  border-radius: 50%; background: #a8402c;
}
.pr-op-planner-ora-label { position: absolute; right: 8px; top: 0; transform: translateY(-50%); font-size: 10.5px; color: var(--ink-faint); background: #fff; padding-left: 4px; }
.pr-op-planner-evento { position: absolute; left: 3px; right: 3px; border-radius: 6px; padding: 4px 7px; font-size: 11px; line-height: 1.35; color: #fff; overflow: hidden; cursor: pointer; }
/* riga di testo per la nota appuntamento/cliente, sotto al nome, sia nel
   calendario FullCalendar che nella griglia per operatrice - troncata con
   i puntini se non ci sta, il testo completo resta comunque nel tooltip
   (title) al passaggio del mouse. */
.pr-evento-nota-testo { font-size: 9.5px; line-height: 1.25; opacity: 0.92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-evento-badge-online { position: absolute; bottom: 2px; right: 2px; display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: #2f80ed; color: #fff; font-family: var(--font-sans); font-size: 9px; font-weight: 800; line-height: 1; flex-shrink: 0; z-index: 2; }
.pr-evento-badge-fidelity { position: absolute; top: 2px; right: 2px; display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: #b3261e; color: #fff; font-family: var(--font-sans); font-size: 9px; font-weight: 800; line-height: 1; flex-shrink: 0; z-index: 2; }
.pr-evento-badge-nuovo { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; background: #8b5cf6; color: #fff; margin-left: 5px; flex-shrink: 0; vertical-align: middle; }
.pr-evento-badge-nuovo svg { width: 9px; height: 9px; }
.fc-event .pr-evento-badge-nuovo { margin-left: 4px; }
.pr-op-planner-evento strong { display: block; font-size: 11.5px; }
.pr-op-planner-evento__titolo { display: block; }
.pr-op-planner-evento.pr-trascinabile { cursor: grab; }
.pr-op-planner-evento.in-trascinamento { cursor: grabbing; opacity: 0.75; box-shadow: 0 6px 18px rgba(0,0,0,0.35); z-index: 5; }
.pr-op-planner-evento.in-ridimensionamento { box-shadow: 0 0 0 2px rgba(255,255,255,0.7), 0 6px 18px rgba(0,0,0,0.35); z-index: 5; }
body.pr-trascinando { user-select: none; }
/* appuntamenti troppo brevi per andare a capo (vedi soglia "breve" in
   admin-calendario.php): ora e "cliente — trattamento" affiancati sulla
   stessa riga invece di impilati, così restano leggibili anche a 16-30px
   di altezza invece di sparire dietro l'overflow:hidden del blocco. */
.pr-op-planner-evento--breve { display: flex; align-items: center; gap: 5px; padding-top: 2px; padding-bottom: 2px; }
.pr-op-planner-evento--breve strong { display: inline; flex-shrink: 0; }
.pr-op-planner-evento--breve .pr-op-planner-evento__titolo { display: inline-block; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* maniglia di ridimensionamento sul bordo inferiore (trascinamento per
   accorciare/allungare la durata) - solo dove trascinamentoAbilitato lo
   consente (stessa regola dello spostamento, vedi admin-calendario.php). */
.pr-op-planner-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.pr-op-planner-resize::after {
  content: ''; position: absolute; left: 50%; bottom: 2px; width: 26px; height: 3px;
  transform: translateX(-50%); background: rgba(255,255,255,0.65); border-radius: 2px;
}
.pr-op-planner-vuoto { padding: 40px 20px; text-align: center; color: var(--ink-faint); font-size: 13px; }
.pr-op-planner-ferie {
  position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(74,71,62,0.16), rgba(74,71,62,0.16) 8px, rgba(74,71,62,0.24) 8px, rgba(74,71,62,0.24) 16px);
  display: flex; align-items: center; justify-content: center;
}
.pr-op-planner-ferie span {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft);
  background: rgba(250,246,238,0.85); padding: 2px 8px; border-radius: 999px;
}
/* nota libera del planner (vedi migrazione_note_planner.sql): stesso
   posizionamento assoluto di un appuntamento vero, ma oro/tratteggiata
   per restare riconoscibile a colpo d'occhio come "non è un cliente". */
.pr-op-planner-nota {
  position: absolute; left: 3px; right: 3px; z-index: 2; cursor: pointer;
  border-radius: 6px; border: 1.5px dashed #a9793d; background: rgba(201,168,63,0.22);
  padding: 4px 7px; font-size: 11px; line-height: 1.3; color: #6b5219; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis;
}
.pr-op-planner-nota:hover { background: rgba(201,168,63,0.34); }
/* anteprima mentre si trascina per scegliere la fascia oraria di una nuova
   nota (vedi selezioneNota in admin-calendario.php) - stesso stile
   tratteggiato oro di .pr-op-planner-nota così è chiaro cosa si sta per
   creare, ma senza contenuto (il testo si scrive dopo, nel modulo). */
.pr-op-planner-selezione-nota {
  position: absolute; left: 3px; right: 3px; z-index: 3; pointer-events: none;
  border-radius: 6px; border: 1.5px dashed #a9793d; background: rgba(201,168,63,0.28);
}
.pr-op-modal__card.pr-op-modal__card--largo {
  max-width: 480px; max-height: 90vh; overflow-y: auto; padding: 22px;
}
/* .pr-form/.pr-btn/.pr-cta-row usano dimensioni pensate per pagine e CTA
   marketing (padding e margini generosi) - troppo grandi in un pannello
   modale compatto come questo: sovrascritti solo qui, il resto del sito
   che usa quelle classi non è toccato. */
.pr-op-modal__card--largo h3 { font-size: 17px; margin-bottom: 4px; }
.pr-op-modal__card--largo .pr-form-note { font-size: 11.5px; margin: 2px 0 12px; }
.pr-op-modal__card--largo label { font-size: 10.5px; margin-bottom: 4px; }
.pr-op-modal__card--largo input,
.pr-op-modal__card--largo select {
  padding: 8px 10px; font-size: 13px; margin-bottom: 10px; border-radius: 8px;
}
.pr-op-modal__card--largo .pr-cta-row { margin-bottom: 0; margin-top: 8px; gap: 10px; }
.pr-op-modal__card--largo .pr-btn { padding: 10px 22px; font-size: 11px; }
.pr-op-modal__card--largo .pr-btn-sm { font-size: 10px; padding: 5px 10px; }

/* Variante più ampia di --largo, per la scheda Prenotazione: troppe
   informazioni (nota cliente, appuntamenti dello stesso giorno con
   tabella, form di modifica) per stare leggibili in 480px - due colonne
   affiancate oltre i 780px, una sola sotto (stesso breakpoint delle
   .pr-form-grid-* già in uso nel resto del sito). */
.pr-op-modal__card.pr-op-modal__card--esteso { max-width: 840px; }
/* il modale di modifica prenotazione ha più bisogno di spazio a destra
   (tabella "Appuntamenti dello stesso giorno" + i chip di "Aggiungi un
   altro servizio") che a sinistra (pochi campi, già comodi in una
   colonna più stretta) - larghezza maggiorata solo per QUESTO modale
   (selettore con l'id, non tocca gli altri che riusano --esteso) e
   colonna sinistra a larghezza fissa invece che 1fr, cosi il resto va
   tutto alla destra. */
#modale-modifica-prenotazione .pr-op-modal__card--esteso { max-width: 1040px; }
.pr-prenotazione-layout { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
/* a 300px, Data/Ora/Stato affiancati su tre colonne (.pr-form-grid-3,
   usato anche altrove nel sito a piena larghezza) diventerebbero troppo
   stretti per essere usabili - impilati su una sola colonna solo qui. */
.pr-prenotazione-col:first-child .pr-form-grid-3 { grid-template-columns: 1fr; }
/* senza questo, una colonna con contenuto largo (la tabella "Appuntamenti
   dello stesso giorno", i tre campi di "Aggiungi un altro servizio") non
   si restringe sotto la sua larghezza naturale in una grid 1fr - trabocca
   oltre il bordo arrotondato del modale invece di andare a capo/scorrere.
   Stesso bug/correzione già visto altrove nel sito (ContApp, tabella
   Servizi e trattamenti). */
.pr-prenotazione-col { min-width: 0; }
@media (max-width: 780px) {
  .pr-prenotazione-layout { grid-template-columns: 1fr; }
}
.pr-star-btn { background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 2px; color: var(--gold-600); }
.pr-star-btn:hover { color: var(--gold-700); }

.pr-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(140,101,48,0.28);
  background: var(--paper); color: var(--forest-800); cursor: pointer; padding: 0;
}
/* stesso bug/correzione di .pr-btn-sm[hidden] qui sopra - i badge "nuove
   gift card/promozioni" in inc/tab_oggi.php usano hidden su questa classe
   per nascondersi a conteggio zero. */
.pr-icon-btn[hidden] { display: none; }
.pr-icon-btn svg { width: 17px; height: 17px; }
.pr-icon-btn:hover { background: var(--cream); }
.pr-icon-btn__badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--gold-600); color: #fff; font-size: 10px; font-weight: 700;
  line-height: 17px; text-align: center; border: 2px solid var(--paper);
}
.pr-icon-btn--lampeggia { border-color: #c0392b; color: #c0392b; animation: pr-icon-lampeggio 1.4s ease-in-out infinite; }
.pr-icon-btn--danger { border-color: rgba(179,38,30,0.35); color: #b3261e; }
.pr-icon-btn--danger:hover { background: #fbe6e2; }
@keyframes pr-icon-lampeggio {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.45); }
  50% { box-shadow: 0 0 0 6px rgba(192,57,43,0); }
}

.pr-nota-cliente-box { background: var(--cream); border-radius: var(--radius-md); padding: 10px 14px; margin: 10px 0 16px; }
.pr-nota-cliente-box strong { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); }
.pr-nota-cliente-box p { font-size: 13.5px; color: var(--ink); margin: 4px 0 8px; white-space: pre-wrap; }
.pr-nota-cliente-box textarea { width: 100%; margin-top: 6px; font-family: var(--font-sans); }
.pr-autocomplete { position: relative; }
.pr-autocomplete-risultati { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; background: #fff; border: 1px solid rgba(140,101,48,0.25); border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0,0,0,0.15); max-height: 220px; overflow-y: auto; }
.pr-autocomplete-risultato { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 8px 12px; border: none; border-bottom: 1px solid rgba(140,101,48,0.08); background: none; cursor: pointer; font-family: var(--font-sans); }
.pr-autocomplete-risultato:last-child { border-bottom: none; }
.pr-autocomplete-risultato:hover { background: var(--cream); }
.pr-autocomplete-risultato strong { font-size: 13px; color: var(--ink); font-weight: 700; }
.pr-autocomplete-risultato span { font-size: 11.5px; color: var(--ink-faint); }
.pr-autocomplete-vuoto { padding: 12px; font-size: 12.5px; color: var(--ink-faint); text-align: center; }

/* Trattamenti preferiti come "chip" compatti - gap stretto e nessun a-capo
   forzato per riga: si dispongono uno accanto all'altro riempiendo lo
   spazio orizzontale disponibile prima di andare a capo, invece dei
   grandi bottoni pr-btn-sm con gap 16px che sprecavano spazio. */
.pr-chip-riga { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; }
.pr-chip {
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(140,101,48,0.28);
  background: none; color: var(--forest-800); font-family: var(--font-sans);
  font-size: 10px; font-weight: 600; line-height: 1.2; cursor: pointer;
}
.pr-chip:hover { background: var(--cream); }
.pr-chip .stella { color: var(--gold-600); font-size: 9px; }
.pr-chip.is-selected { background: var(--forest-800); border-color: var(--forest-800); color: var(--ivory); }
.pr-chip.is-selected .stella { color: var(--gold-300); }

/* Variante più grande, in linea con gli altri pulsanti della riga (es. il
   campo/pulsante "Applica" della gift card in Cassa) - a differenza dei
   chip compatti dei preferiti, questi vanno letti a colpo d'occhio. */
.pr-chip--grande { padding: 8px 16px; font-size: 13px; gap: 6px; }
.pr-chip--grande .stella { font-size: 12px; }

@media (max-width: 1000px) {
  .pr-table thead { display: none; }
  .pr-table, .pr-table tbody, .pr-table tr, .pr-table td { display: block; width: 100%; }
  .pr-table tr { margin-bottom: 16px; border: 1px solid rgba(140,101,48,0.14); border-radius: var(--radius-md); overflow: hidden; }
  .pr-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; border-bottom: 1px solid rgba(140,101,48,0.08); }
  .pr-table td::before { content: attr(data-label); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); font-weight: 700; text-align: left; }
  .pr-table tr td:last-child { border-bottom: none; }
  .pr-table td.pr-cella-modifica-inline { display: block; text-align: left; }
  .pr-table td.pr-cella-modifica-inline::before { content: none; }
}

/* ==========================================================================
   Calendario prenotazioni (popup personalizzato)
   ========================================================================== */
.pr-calendario-wrap { position: relative; max-width: 280px; }
.pr-calendario-popup {
  display: none; position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; width: 280px;
  background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); padding: 14px 16px;
  border: 1px solid rgba(140,101,48,0.14);
}
.pr-calendario-popup.aperto { display: block; }
.pr-calendario-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 700; color: var(--forest-800); text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.04em; }
.pr-calendario-header button { background: none; border: none; font-size: 20px; color: var(--gold-600); cursor: pointer; line-height: 1; padding: 2px 8px; }
.pr-calendario-header button:hover { color: var(--gold-700); }
.pr-calendario-header button:disabled { opacity: 0.3; cursor: default; }
.pr-calendario-giorni-settimana { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; color: var(--ink-faint); margin-bottom: 4px; }
.pr-calendario-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.pr-calendario-giorno { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 13px; color: #cfcac0; background: transparent; }
.pr-calendario-giorno.disponibile { color: var(--forest-800); background: var(--cream); cursor: pointer; font-weight: 700; }
.pr-calendario-giorno.disponibile:hover { background: var(--forest-800); color: var(--ivory); }
.pr-calendario-giorno.selezionato { background: var(--gold-600) !important; color: var(--forest-900) !important; }
.pr-calendario-giorno.vuoto { visibility: hidden; }
.pr-calendario-legenda { font-size: 11px; color: var(--ink-faint); margin: 10px 0 0; }
.pr-calendario-legenda .pallino-disp { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cream); border: 1px solid var(--forest-800); margin-right: 4px; }

.pr-slot-btn { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(140,101,48,0.3); background: var(--paper); color: var(--forest-800); font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font-sans); }
.pr-slot-btn:hover { background: var(--cream); }

/* ==========================================================================
   prenota-trattamenti.php mostra DUE layout alternativi per lo stesso
   modulo, scelti via CSS in base alla larghezza (non JS, niente flash del
   layout sbagliato al caricamento): sotto i 900px il wizard a step qui
   sotto, da 900px in su il layout "classico" con filtro categorie a
   sinistra (identico a come funzionava prima del wizard, solo con gli id
   prefissati "classic-" per convivere nello stesso DOM senza collisioni -
   vedi .pr-trattamenti-layout più sotto). Ciascuno ha il proprio JS
   indipendente nel file PHP; solo quello effettivamente visibile è
   interagibile dall'utente.
   ========================================================================== */
.pr-prenota-desktop { display: none; }
.pr-prenota-mobile { display: block; }
@media (min-width: 900px) {
  .pr-prenota-desktop { display: block; }
  .pr-prenota-mobile { display: none; }
}

/* ==========================================================================
   Wizard prenotazione trattamenti (prenota-trattamenti.php) - un solo step
   alla volta, pensato prima di tutto per il tocco su smartphone. Classi
   dedicate, non condivise con prenotazioni.php (Oasi, ancora dietro
   if(false)) che continua a usare .pr-trattamenti-layout/.pr-calendario-*/
   .pr-slot-btn sopra, invariate.
   ========================================================================== */
.pr-wizard { max-width: 480px; margin: 0 auto; padding-bottom: 110px; }

.pr-wizard-progress { display: flex; align-items: flex-start; margin-bottom: 30px; }
.pr-wizard-progress__step {
  display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; cursor: default;
  font-family: var(--font-sans); padding: 0; flex: 1; min-width: 0;
}
.pr-wizard-progress__num {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; background: var(--cream); color: var(--ink-faint); border: 1px solid rgba(140,101,48,0.25); flex-shrink: 0;
  transition: all 0.2s ease;
}
.pr-wizard-progress__label { display: none; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); text-align: center; line-height: 1.3; }
.pr-wizard-progress__step.is-attivo .pr-wizard-progress__label { display: block; }
@media (min-width: 480px) { .pr-wizard-progress__label { display: block; } }
.pr-wizard-progress__step.is-attivo .pr-wizard-progress__num { background: var(--forest-800); border-color: var(--forest-800); color: var(--ivory); }
.pr-wizard-progress__step.is-attivo .pr-wizard-progress__label { color: var(--forest-800); font-weight: 700; }
.pr-wizard-progress__step.is-completato { cursor: pointer; }
.pr-wizard-progress__step.is-completato .pr-wizard-progress__num { background: var(--gold-100); border-color: var(--gold-600); color: var(--gold-700); }
.pr-wizard-progress__line { flex: 0 0 auto; width: 100%; max-width: 40px; height: 2px; background: rgba(140,101,48,0.2); margin: 14px -6px 0; }
.pr-wizard-progress__line.is-completata { background: var(--gold-600); }

.pr-wizard-step { display: none; }
.pr-wizard-step.attivo { display: block; animation: pr-wizard-fade 0.25s ease; }
@keyframes pr-wizard-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* h2.pr-wizard-step__title: stesso motivo di h2.pr-oggi-titolo qui sopra -
   serve il tag "h2" per battere il reset ".pr h1,h2,h3,h4 { margin:0 }". */
h2.pr-wizard-step__title { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 21px; color: var(--forest-900); margin-bottom: 32px; }
.pr-wizard-back { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; font-family: var(--font-sans); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); cursor: pointer; padding: 0; margin-bottom: 14px; }
.pr-wizard-back:hover { color: var(--forest-800); }
.pr-wizard-step__riepilogo { font-size: 13px; color: var(--ink-faint); margin: 0 0 16px; }
.pr-wizard-step__riepilogo strong { color: var(--forest-800); }

/* Passo "Categoria": griglia a mosaico invece di un filtro uniforme -
   ogni tanto un pulsante occupa due colonne (nth-child sotto), spezzando
   il ritmo per dare un po' di movimento invece di una scacchiera tutta
   uguale. Con poche categorie resta comunque una griglia pulita a 2
   colonne (nessuna riga da "occupa 2 colonne" scatta se non ce n'è
   bisogno). */
/* Mosaico dinamico: ogni pulsante è largo quanto il proprio testo (niente
   colonne rigide), il contenitore li dispone in righe che si riempiono da
   sole - una parola corta come "Corpo" e una lunga come "Extencion Ciglia"
   occupano naturalmente spazi diversi, invece di condividere sempre la
   stessa metà di riga come in una griglia a 2 colonne fissa. */
.pr-wizard-categorie { display: flex; flex-wrap: wrap; gap: 10px; }
.pr-wizard-categoria-btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  flex: 1 1 auto; min-width: 104px; white-space: nowrap;
  min-height: 64px; padding: 14px 22px; border-radius: 14px; border: 1.5px solid rgba(140,101,48,0.2);
  background: var(--paper); color: var(--forest-900); font-family: var(--font-sans); font-size: 13.5px; font-weight: 700;
  cursor: pointer; transition: all 0.15s ease;
}
.pr-wizard-categoria-btn:hover, .pr-wizard-categoria-btn:active { border-color: var(--gold-600); background: var(--cream); }

/* Riepilogo ancorato in fondo allo schermo (dallo step 2 in poi): resta
   a vista mentre si scorre lo step corrente, il pulsante di conferma
   (step 5) vive qui invece che in fondo a una pagina che scorre. */
.pr-wizard-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 195; max-width: 480px; margin: 0 auto;
  background: var(--paper); border-radius: 20px 20px 0 0; box-shadow: 0 -14px 30px -20px rgba(23,38,25,0.35);
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(140,101,48,0.14);
}
.pr-wizard-sheet__testo { font-size: 13px; color: var(--ink-faint); margin: 0; text-align: center; }
.pr-wizard-sheet__cta {
  display: block; width: 100%; margin-top: 10px; background: var(--gold-600); border: none; border-radius: 14px;
  color: var(--ivory); font-family: var(--font-sans); font-size: 15px; font-weight: 700; padding: 14px; cursor: pointer;
}
.pr-wizard-sheet__cta:disabled { opacity: 0.5; cursor: default; }
.pr-wizard-sheet__cta--confermato, .pr-wizard-sheet__cta--confermato:disabled { background: #2c7a3f; opacity: 1; }
.pr-wizard-sheet__cta--errore { background: #a8402c; }

.pr-wizard-cards { display: flex; flex-direction: column; gap: 10px; }
.pr-wizard-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; width: 100%;
  padding: 16px 18px; min-height: 56px; border-radius: 14px; border: 1.5px solid rgba(140,101,48,0.2); background: var(--paper);
  font-family: var(--font-sans); cursor: pointer; transition: all 0.15s ease;
}
.pr-wizard-card:hover, .pr-wizard-card:active { border-color: var(--gold-600); background: var(--cream); }
.pr-wizard-card.is-selezionato { border-color: var(--forest-800); background: var(--forest-800); }
.pr-wizard-card.is-selezionato .pr-wizard-card__titolo, .pr-wizard-card.is-selezionato .pr-wizard-card__meta { color: var(--ivory); }
.pr-wizard-card__titolo { font-size: 14.5px; font-weight: 700; color: var(--forest-900); }
.pr-wizard-card__meta { font-size: 12px; color: var(--ink-faint); display: block; margin-top: 2px; }
.pr-wizard-card__arrow { flex-shrink: 0; opacity: 0.4; }
.pr-wizard-card__check { flex-shrink: 0; color: var(--forest-800); opacity: 0; transition: opacity 0.15s ease; }
.pr-wizard-card.is-selezionato .pr-wizard-card__check { opacity: 1; color: var(--ivory); }
/* barretta colorata per trattamento (stesso sistema del Planner/di "Oggi")
   + il testo prende lo spazio restante, in modo che la freccia resti
   sempre ancorata a destra con space-between sul contenitore. */
.pr-wizard-card__barra { align-self: stretch; width: 4px; border-radius: 2px; flex-shrink: 0; }
.pr-wizard-card > span:not(.pr-wizard-card__barra) { flex: 1; min-width: 0; }

.pr-wizard-calendar__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-weight: 700; color: var(--forest-800); text-transform: uppercase; font-size: 13px; letter-spacing: 0.04em; }
.pr-wizard-calendar__header button { background: var(--cream); border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 20px; color: var(--gold-600); cursor: pointer; line-height: 1; }
.pr-wizard-calendar__header button:disabled { opacity: 0.3; cursor: default; }
.pr-wizard-calendar__giorni-settimana { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11.5px; color: var(--ink-faint); margin-bottom: 6px; }
.pr-wizard-calendar__griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pr-wizard-calendar__giorno { aspect-ratio: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 14.5px; color: #cfcac0; background: transparent; }
.pr-wizard-calendar__giorno.disponibile { color: var(--forest-800); background: var(--cream); cursor: pointer; font-weight: 700; }
.pr-wizard-calendar__giorno.disponibile:active { background: var(--forest-800); color: var(--ivory); }
.pr-wizard-calendar__giorno.selezionato { background: var(--gold-600) !important; color: var(--forest-900) !important; }
.pr-wizard-calendar__giorno.vuoto { visibility: hidden; }
.pr-wizard-calendar__legenda { font-size: 11.5px; color: var(--ink-faint); margin: 14px 0 0; }
.pr-wizard-calendar__legenda .pallino-disp { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cream); border: 1px solid var(--forest-800); margin-right: 4px; }

.pr-wizard-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pr-wizard-slot { min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid rgba(140,101,48,0.25); background: var(--paper); color: var(--forest-800); font-size: 14.5px; font-weight: 700; cursor: pointer; font-family: var(--font-sans); }
.pr-wizard-slot:active { background: var(--cream); }
.pr-wizard-slot.is-selezionato { background: var(--forest-800); border-color: var(--forest-800); color: var(--ivory); }
.pr-wizard-slot .badge { display: block; font-size: 10.5px; font-weight: 600; margin-top: 2px; opacity: 0.75; }

.pr-wizard-riepilogo { background: var(--cream); border-radius: 14px; padding: 18px 20px; margin-bottom: 6px; }
.pr-wizard-riepilogo__riga { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13.5px; border-bottom: 1px solid rgba(140,101,48,0.14); }
.pr-wizard-riepilogo__riga:last-child { border-bottom: none; }
.pr-wizard-riepilogo__riga span:first-child { color: var(--ink-faint); }
.pr-wizard-riepilogo__riga span:last-child { color: var(--forest-900); font-weight: 700; text-align: right; }

@media (min-width: 560px) {
  .pr-wizard-cards { flex-direction: row; flex-wrap: wrap; }
  .pr-wizard-card { width: calc(50% - 5px); }
  .pr-wizard-slots { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Calendario mensile inline (giorni lavorativi/ferie di un'operatrice)
   ========================================================================== */
.pr-op-cal { max-width: 640px; }
.pr-op-cal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-weight: 700; color: var(--forest-800); text-transform: uppercase; font-size: 13px; letter-spacing: 0.04em; }
.pr-op-cal__header button:not(.pr-btn-sm) { background: none; border: none; font-size: 22px; color: var(--gold-600); cursor: pointer; line-height: 1; padding: 2px 10px; }
.pr-op-cal__header button:not(.pr-btn-sm):hover { color: var(--gold-700); }
.pr-op-cal__giorni-settimana { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; color: var(--ink-faint); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.pr-op-cal__griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.pr-op-cal__giorno {
  position: relative; min-height: 62px; border-radius: 10px; padding: 7px 8px; display: flex; flex-direction: column; gap: 4px;
  background: var(--cream); border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease;
}
.pr-op-cal__giorno.vuoto { visibility: hidden; }
.pr-op-cal__giorno.neutro { opacity: 0.45; }
.pr-op-cal__numero { font-size: 12px; font-weight: 700; color: var(--ink-faint); }
.pr-op-cal__etichetta { font-size: 10.5px; line-height: 1.3; color: var(--ink-soft); }
.pr-op-cal__giorno.lavorativo { background: #e3efe0; cursor: pointer; }
.pr-op-cal__giorno.lavorativo .pr-op-cal__numero { color: #2c4a26; }
.pr-op-cal__giorno.lavorativo .pr-op-cal__etichetta { color: #2c4a26; font-weight: 600; }
.pr-op-cal__giorno.lavorativo:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(44,74,38,0.4); }
.pr-op-cal__giorno.ferie { background: var(--ink-faint); cursor: pointer; }
.pr-op-cal__giorno.ferie .pr-op-cal__numero, .pr-op-cal__giorno.ferie .pr-op-cal__etichetta { color: var(--ivory); font-weight: 700; }
.pr-op-cal__giorno.ferie:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(0,0,0,0.4); }
.pr-op-cal__giorno.caricamento { opacity: 0.5; pointer-events: none; }
.pr-op-cal__legenda { font-size: 11.5px; color: var(--ink-faint); margin: 12px 0 0; }
.pr-op-cal__legenda .pallino { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 3px; }
.pr-op-cal__legenda .pallino--lavorativo { background: #e3efe0; border: 1px solid #2c4a26; }
.pr-op-cal__legenda .pallino--ferie { background: var(--ink-faint); }
.pr-op-cal__legenda .pallino--neutro { background: var(--cream); border: 1px solid rgba(140,101,48,0.2); }
.pr-op-cal__icona-ore {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center; background: rgba(44,74,38,0.14); border: none; cursor: pointer;
  color: #2c4a26; transition: background .15s ease;
}
.pr-op-cal__icona-ore svg { width: 12px; height: 12px; }
.pr-op-cal__icona-ore:hover { background: rgba(44,74,38,0.28); }
@media (max-width: 560px) {
  .pr-op-cal__giorno { min-height: 46px; padding: 5px 4px; }
  .pr-op-cal__etichetta { display: none; }
  .pr-op-cal__icona-ore { width: 16px; height: 16px; top: 2px; right: 2px; }
  .pr-op-cal__icona-ore svg { width: 9px; height: 9px; }
}

/* ==========================================================================
   Modale "ferie parziale" (calendario operatrice)
   ========================================================================== */
.pr-op-modal { position: fixed; inset: 0; z-index: 900; display: none; align-items: center; justify-content: center; padding: 20px; }
.pr-op-modal.aperto { display: flex; }
.pr-op-modal__scrim { position: absolute; inset: 0; background: rgba(15,24,16,0.55); }
.pr-op-modal__card {
  position: relative; z-index: 2; width: 100%; max-width: 380px; background: var(--paper); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.pr-op-modal__card h3 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 19px; color: var(--forest-900); margin-bottom: 6px; }
.pr-op-modal__card .row2 { margin-top: 16px; }
.pr-slot-btn.is-selected { background: var(--forest-800); border-color: var(--forest-800); color: var(--ivory); }
.pr-slot-btn .badge { display: inline-block; background: var(--gold-100); color: var(--gold-700); border-radius: 999px; padding: 2px 7px; font-size: 10.5px; margin-left: 6px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.pr-hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; }
.pr-hero__bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
}
.pr-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.14) translateY(0); will-change: transform; }
.pr-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(15,24,16,0.86) 0%, rgba(17,26,17,0.42) 46%, rgba(20,26,17,0.18) 100%),
    linear-gradient(100deg, rgba(15,24,16,0.55) 0%, rgba(15,24,16,0.05) 55%);
}
.pr-hero__content { position: relative; z-index: 2; color: var(--ivory); padding: 120px 0 64px; width: 100%; }
.pr-hero .eyebrow { color: var(--gold-300); }
.pr-hero .eyebrow + h1::after { background: var(--gold-300); }
.pr-hero h1 {
  font-family: var(--font-serif); font-weight: 400; font-style: italic;
  font-size: clamp(38px, 6vw, 74px); line-height: 1.08; margin: 18px 0 22px; max-width: 15ch;
}
.pr-hero h1 .pr-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.pr-hero h1 .pr-word__inner { display: inline-block; }
.pr-hero__lede { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.7; max-width: 46ch; color: rgba(250,246,238,0.88); margin-bottom: 34px; }

.pr-cta-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 54px; }
.pr-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 999px; border: 1px solid transparent; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.pr-btn:hover { transform: translateY(-2px); }
.pr-btn--gold { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: var(--forest-900); box-shadow: 0 14px 30px -12px rgba(169,121,61,0.65); position: relative; overflow: hidden; }
.pr-btn--gold:hover { box-shadow: 0 18px 36px -12px rgba(169,121,61,0.8); }
.pr-btn--gold::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.55) 45%, transparent 90%);
  transform: translateX(-220%) skewX(-18deg); pointer-events: none;
  animation: pr-shimmer 4.5s ease-in-out infinite;
}
@keyframes pr-shimmer {
  0%, 55% { transform: translateX(-220%) skewX(-18deg); }
  85%, 100% { transform: translateX(220%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) { .pr-btn--gold::after { animation: none; display: none; } }
.pr-btn--ghost-light { border-color: rgba(250,246,238,0.55); color: var(--ivory); }
.pr-btn--ghost-light:hover { background: rgba(250,246,238,0.12); }
.pr-btn--forest { background: var(--forest-800); color: var(--ivory); }
.pr-btn--forest:hover { background: var(--forest-700); }
/* .pr a { color:inherit; } qui sopra ha specificità (0,1,1), più alta di
   una singola classe come .pr-btn--forest/.pr-btn--ghost-light (0,1,0):
   su un <a> (non un <button>) il testo tornava sempre al colore scuro di
   base ereditato, illeggibile su questi due sfondi scuri. Stesso identico
   problema già noto per .pr button/.pr h1-h4 più sopra, stessa soluzione
   (qualificare con il tag). */
a.pr-btn--ghost-light { color: var(--ivory); }
a.pr-btn--forest { color: var(--ivory); }
.pr-btn--ghost-dark { border-color: rgba(23,38,25,0.3); color: var(--forest-800); }
.pr-btn--ghost-dark:hover { background: rgba(23,38,25,0.06); }

.pr-trust {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 52px);
  border-top: 1px solid rgba(250,246,238,0.22); padding-top: 26px;
}
.pr-trust__item { display: flex; align-items: baseline; gap: 10px; }
.pr-trust__num { font-family: var(--font-serif); font-style: italic; font-size: 28px; color: var(--gold-300); }
.pr-trust__label { font-size: 12.5px; letter-spacing: 0.04em; color: rgba(250,246,238,0.82); max-width: 16ch; }
.pr-stars { color: var(--gold-300); letter-spacing: 2px; font-size: 14px; }

/* ==========================================================================
   Sezioni generiche
   ========================================================================== */
.pr-section { padding: clamp(64px, 10vw, 128px) 0; }
.pr-section--cream { background: var(--cream); }
.pr-section--forest { background: var(--forest-900); color: var(--ivory); }
.pr-section--forest .eyebrow { color: var(--gold-300); }
.pr-section--forest .eyebrow + h1::after,
.pr-section--forest .eyebrow + h2::after { background: var(--gold-300); }

.pr-section__head { max-width: 720px; margin-bottom: 56px; }
.pr-section__head h2 {
  font-family: var(--font-serif); font-style: italic; font-size: clamp(30px, 4vw, 46px);
  color: var(--forest-900); margin-top: 16px; line-height: 1.15;
}
.pr-section--forest .pr-section__head h2 { color: var(--ivory); }
.pr-section__head p { margin-top: 18px; font-size: 16px; line-height: 1.7; color: var(--ink-soft); max-width: 60ch; }
.pr-section--forest .pr-section__head p { color: rgba(250,246,238,0.78); }
.pr-section__head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---- Mission / pull quote ---- */
.pr-quote { text-align: center; max-width: 900px; margin: 0 auto; }
.pr-quote p {
  font-family: var(--font-serif); font-style: italic; color: var(--forest-900);
  font-size: clamp(22px, 3vw, 34px); line-height: 1.5;
}
.pr-quote cite { display: block; margin-top: 26px; font-style: normal; font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-700); }

/* ---- Griglia servizi ---- */
.pr-grid-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pr-card {
  background: var(--paper); border-radius: var(--radius-lg); padding: 34px 30px;
  box-shadow: var(--shadow-card); border: 1px solid rgba(140,101,48,0.10);
  transition: transform .35s ease, box-shadow .35s ease;
  display: flex; flex-direction: column; height: 100%;
}
.pr-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -22px rgba(23,38,25,0.32); }
.pr-card__num { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--gold-600); margin-bottom: 18px; }
.pr-card h3 { font-family: var(--font-serif); font-size: 23px; color: var(--forest-900); margin-bottom: 12px; }
.pr-card p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); flex-grow: 1; }
.pr-card__link { margin-top: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--forest-800); display: inline-flex; align-items: center; gap: 8px; }
.pr-card__link svg { width: 13px; height: 13px; transition: transform .25s ease; }
.pr-card:hover .pr-card__link svg { transform: translateX(4px); }

/* ---- Spazi fotografici editoriali ---- */
.pr-gallery-editorial { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: 20px; }
.pr-photo { position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.pr-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.pr-photo:hover img { transform: scale(1.05); }
.pr-photo--tall { grid-row: 1 / 3; min-height: 560px; }
.pr-photo--wide { min-height: 270px; }
.pr-photo__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px;
  background: linear-gradient(0deg, rgba(15,24,16,0.75), transparent);
  color: var(--ivory); font-family: var(--font-serif); font-style: italic; font-size: 17px;
}

.pr-brand-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pr-brand-chip { text-align: center; }
.pr-brand-chip img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-card); margin-bottom: 14px; }
.pr-brand-chip .tag { display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-700); font-weight: 700; margin-bottom: 4px; }
.pr-brand-chip h3 { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--forest-900); }
@media (max-width: 720px) { .pr-brand-strip { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; } }

.pr-shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.pr-shop-grid .pr-brand-card { width: auto; }
.pr-shop-grid .pr-brand-card img { height: 230px; }
@media (max-width: 720px) { .pr-shop-grid { grid-template-columns: 1fr; } }

/* ---- Marchi / prodotti — carosello scroll-snap, niente JS ---- */
.pr-brandscroll { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 22px; margin: 0 -4px; -webkit-overflow-scrolling: touch; }
.pr-brandscroll::-webkit-scrollbar { height: 6px; }
.pr-brandscroll::-webkit-scrollbar-thumb { background: rgba(140,101,48,0.35); border-radius: 6px; }
.pr-brand-card {
  scroll-snap-align: start; flex: 0 0 auto; width: min(78vw, 300px);
  background: var(--paper); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-card); border: 1px solid rgba(140,101,48,0.10);
}
.pr-brand-card img { width: 100%; height: 190px; object-fit: cover; }
.pr-brand-card__body { padding: 20px 22px 24px; }
.pr-brand-card__body .tag { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-700); font-weight: 700; }
.pr-brand-card__body h3 { font-family: var(--font-serif); font-size: 19px; margin: 8px 0 10px; color: var(--forest-900); }
.pr-brand-card__body p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.pr-brand-card__body a { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--forest-800); border-bottom: 1px solid var(--gold-500); padding-bottom: 2px; }

/* ---- Chi siamo ---- */
.pr-about { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px,6vw,80px); align-items: center; }
.pr-about__photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.pr-about__body h2 { font-family: var(--font-serif); font-style: italic; font-size: clamp(28px,3.6vw,40px); margin: 16px 0 18px; color: var(--forest-900); }
.pr-about__body p { font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); }
.pr-about ul { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.pr-about li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.pr-about li strong { color: var(--forest-900); font-weight: 700; }
.pr-about li .dot { color: var(--gold-600); flex-shrink: 0; }

/* ---- Rating band ---- */
.pr-rating { display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; }
.pr-rating__num { font-family: var(--font-serif); font-style: italic; font-size: clamp(56px, 8vw, 96px); line-height: 1; color: var(--gold-300); }
.pr-rating__mid p { font-size: 15px; color: rgba(250,246,238,0.82); max-width: 46ch; line-height: 1.7; margin-top: 10px; }

/* ---- Oasi teaser ---- */
.pr-oasi { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 460px; display: flex; align-items: center; }
.pr-oasi__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.pr-oasi__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pr-oasi__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15,24,16,0.9) 20%, rgba(15,24,16,0.35) 100%); }
.pr-oasi__content { position: relative; z-index: 2; padding: 56px clamp(28px, 6vw, 72px); max-width: 560px; color: var(--ivory); }
.pr-oasi__content h2 { font-family: var(--font-serif); font-style: italic; font-size: clamp(28px,4vw,40px); margin: 16px 0 18px; }
.pr-oasi__content p { font-size: 15px; line-height: 1.75; color: rgba(250,246,238,0.85); margin-bottom: 28px; }
.pr-oasi__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.pr-oasi__tags span { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid rgba(250,246,238,0.35); border-radius: 999px; padding: 7px 14px; }

/* ---- Booking band ---- */
.pr-booking {
  background: linear-gradient(120deg, var(--forest-900), var(--forest-700));
  color: var(--ivory); border-radius: var(--radius-lg); padding: clamp(46px, 7vw, 76px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px;
  position: relative; overflow: hidden;
}
.pr-booking::before {
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(230,197,140,0.25); right: -140px; top: -160px;
}
.pr-booking__text { position: relative; z-index: 2; max-width: 520px; }
.pr-booking__text h2 { font-family: var(--font-serif); font-style: italic; font-size: clamp(28px,3.6vw,42px); margin: 14px 0 12px; }
.pr-booking__text p { color: rgba(250,246,238,0.8); font-size: 15px; line-height: 1.6; }
.pr-booking__actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.pr-footer { background: var(--forest-900); color: rgba(250,246,238,0.75); padding-top: clamp(56px, 8vw, 90px); }
.pr-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(250,246,238,0.12); }
.pr-footer__brand img { height: 64px; margin-bottom: 16px; }
.pr-footer__brand p { font-size: 13.5px; line-height: 1.7; max-width: 30ch; }
.pr-footer h4 { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 18px; }
.pr-footer address, .pr-footer p { font-style: normal; font-size: 14px; line-height: 1.85; }
.pr-footer ul { display: flex; flex-direction: column; gap: 10px; }
.pr-footer a:hover { color: var(--gold-300); }
.pr-footer__social { display: flex; gap: 12px; margin-top: 6px; }
.pr-footer__social a {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(250,246,238,0.25);
  display: flex; align-items: center; justify-content: center;
}
.pr-footer__social a:hover { border-color: var(--gold-300); background: rgba(230,197,140,0.08); }
.pr-footer__social svg { width: 16px; height: 16px; }
.pr-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 26px 0; font-size: 12.5px; color: rgba(250,246,238,0.5); }

/* ==========================================================================
   Cookie banner
   ========================================================================== */
#cookie-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
#cookie-banner {
  pointer-events: auto; margin: 20px; max-width: 640px; width: calc(100% - 40px);
  background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
  border: 1px solid rgba(140,101,48,0.16); padding: 20px 24px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  font-family: var(--font-sans);
}
.cookie-banner-testo { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); flex: 1 1 280px; }
.cookie-banner-bottoni { display: flex; gap: 10px; flex-shrink: 0; }
.btn-cookie { border-radius: 999px; padding: 10px 20px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid transparent; }
.btn-cookie-rifiuta { background: transparent; border-color: rgba(74,71,62,0.3); color: var(--ink-soft); }
.btn-cookie-accetta { background: var(--forest-800); color: var(--ivory); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .pr-grid-services { grid-template-columns: repeat(2, 1fr); }
  .pr-about { grid-template-columns: 1fr; }
  .pr-footer__grid { grid-template-columns: 1.2fr 1fr 1fr; }
}

@media (max-width: 900px) {
  .pr-nav__links, .pr-nav__account-desktop { display: none !important; }
  .pr-burger { display: inline-flex; }
  .pr-gallery-editorial { grid-template-columns: 1fr; }
  .pr-photo--tall { min-height: 320px; }
  .pr-rating { grid-template-columns: 1fr; text-align: center; gap: 18px; }
  .pr-rating__mid p { margin-left: auto; margin-right: auto; }
  .pr-booking { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
  .pr-grid-services { grid-template-columns: 1fr; }
  .pr-footer__grid { grid-template-columns: 1fr 1fr; }
  .pr-hero { min-height: 100vh; }
}

@media (max-width: 560px) {
  .pr-footer__grid { grid-template-columns: 1fr; }
  .pr-trust { gap: 22px; }
  .pr-cta-row .pr-btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   Amministrazione/Operatore su smartphone: sfondo verde scuro invece del
   crema chiaro usato ovunque nel resto del sito - una scelta deliberata di
   identità per la versione "app" vista sotto i 768px (dove ci sono già tab
   bar e schermata "Altro"), non legata al tema chiaro/scuro del sistema
   dell'utente. Scope: solo dentro .pr-dash-main--sidebar, che esiste solo
   in admin.php/operatore.php - non tocca il resto del sito (area cliente,
   pagine pubbliche, prenotazione trattamenti).
   ========================================================================== */
@media (max-width: 768px) {
  .pr-dash-main--sidebar { background: var(--forest-900); min-height: 100vh; }

  .pr-dash-main--sidebar .pr-dash-card {
    background: var(--forest-800); border-color: rgba(250,246,238,0.10);
  }
  .pr-dash-main--sidebar .pr-dash-card h2 { color: var(--ivory); }
  .pr-dash-main--sidebar .pr-dash-card .empty,
  .pr-dash-main--sidebar .pr-form-note { color: rgba(250,246,238,0.55); }

  .pr-dash-main--sidebar .pr-stat-tile { background: var(--forest-800); }
  .pr-dash-main--sidebar .pr-stat-tile__num { color: var(--ivory); }
  .pr-dash-main--sidebar .pr-stat-tile__label { color: rgba(250,246,238,0.55); }

  .pr-dash-main--sidebar .pr-oggi-eyebrow { color: rgba(250,246,238,0.55); }
  .pr-dash-main--sidebar .pr-oggi-titolo { color: var(--ivory); }
  .pr-dash-main--sidebar .pr-dashboard-donut-wrap { color: var(--ivory); }
  .pr-dash-main--sidebar .pr-oggi-riga,
  .pr-dash-main--sidebar .pr-cliente-riga,
  .pr-dash-main--sidebar .pr-prenotazione-riga { border-bottom-color: rgba(250,246,238,0.12); }
  .pr-dash-main--sidebar .pr-oggi-riga__titolo,
  .pr-dash-main--sidebar .pr-cliente-riga__nome,
  .pr-dash-main--sidebar .pr-prenotazione-riga__titolo { color: var(--ivory); }
  .pr-dash-main--sidebar .pr-oggi-riga__meta,
  .pr-dash-main--sidebar .pr-cliente-riga__meta,
  .pr-dash-main--sidebar .pr-prenotazione-riga__meta,
  .pr-dash-main--sidebar .pr-cliente-riga__nota { color: rgba(250,246,238,0.55); }

  /* Ogni pulsante piccolo dentro l'area scura, non solo quelli della riga
     CTA di "Oggi": senza questa regola generale, "Modifica", "Importa/
     Esporta Excel", "Email", "Annulla" restavano con i colori pensati per
     lo sfondo chiaro (bordo/testo scuro su scuro, praticamente invisibili).
     Anche più grandi che nel resto del sito: tocco più facile su schermo
     piccolo, meno cose fitte una accanto all'altra. */
  .pr-dash-main--sidebar .pr-btn-sm {
    border-color: rgba(250,246,238,0.35); color: var(--ivory);
    padding: 9px 16px; font-size: 12px; min-height: 40px;
  }
  .pr-dash-main--sidebar .pr-btn-sm:hover { background: rgba(250,246,238,0.1); }
  .pr-dash-main--sidebar .pr-btn-sm--ghost { border-color: rgba(250,246,238,0.35); color: var(--ivory); }
  .pr-dash-main--sidebar .pr-btn-sm--danger { border-color: #d99b8e; color: #f0a898; }
  .pr-dash-main--sidebar .pr-btn-sm--danger:hover { background: rgba(217,155,142,0.15); }
  /* .pr-op-modal__card resta sempre chiara (niente variante scura), a
     differenza del resto di quest'area: senza questo contro-effetto i suoi
     pulsanti "fantasma" ereditavano comunque i colori chiari pensati per lo
     sfondo scuro qui sopra, illeggibili (chiaro su chiaro) dentro un
     modale bianco - vedi i modali di Clienti e di "Oggi" (compleanni/
     reminder). */
  .pr-dash-main--sidebar .pr-op-modal__card .pr-btn-sm { border-color: rgba(140,101,48,0.3); color: var(--forest-800); background: none; }
  .pr-dash-main--sidebar .pr-op-modal__card .pr-btn-sm:hover { background: rgba(140,101,48,0.08); }
  .pr-dash-main--sidebar .pr-op-modal__card .pr-btn-sm--ghost { border-color: rgba(140,101,48,0.3); color: var(--forest-800); }
  .pr-dash-main--sidebar .pr-op-modal__card .pr-btn-sm--danger { border-color: rgba(179,38,30,0.35); color: #b3261e; }
  .pr-dash-main--sidebar .pr-op-modal__card .pr-btn-sm--danger:hover { background: rgba(179,38,30,0.08); }
  .pr-dash-main--sidebar .pr-op-modal__card .pr-form-note { color: var(--ink-faint); }
  /* stesso contro-effetto per .pr-cliente-riga (l'elenco "Clienti in
     blacklist" dentro #modale-blacklist la riusa dalla vista mobile di
     Clienti): senza, nome e motivo restavano quasi invisibili (chiaro su
     chiaro) dentro il modale bianco. */
  .pr-dash-main--sidebar .pr-op-modal__card .pr-cliente-riga { border-bottom-color: rgba(140,101,48,0.12); }
  .pr-dash-main--sidebar .pr-op-modal__card .pr-cliente-riga__nome { color: var(--forest-900); }
  .pr-dash-main--sidebar .pr-op-modal__card .pr-cliente-riga__meta,
  .pr-dash-main--sidebar .pr-op-modal__card .pr-cliente-riga__nota { color: var(--ink-faint); }
  .pr-dash-main--sidebar .pr-btn:not(.pr-wizard-sheet__cta) { min-height: 46px; }

  .pr-dash-main--sidebar .pr-search-box input,
  .pr-dash-main--sidebar .pr-select-pill {
    background-color: var(--forest-800); border-color: rgba(250,246,238,0.25); color: var(--ivory);
    min-height: 44px; font-size: 14px;
  }
  .pr-dash-main--sidebar .pr-search-box svg { color: rgba(250,246,238,0.5); }
  .pr-dash-main--sidebar .pr-search-box input::placeholder { color: rgba(250,246,238,0.4); }
  /* la freccia del select va ridisegnata (colore chiaro invece di grigio
     scuro, altrimenti invisibile su sfondo scuro) usando solo
     background-color sopra, mai la proprietà abbreviata "background": la
     abbreviata azzera anche posizione/ripetizione/dimensione ereditate
     dalla regola base, e la freccia si ripeteva a mosaico invece di
     restare ferma a destra. */
  .pr-dash-main--sidebar .pr-select-pill {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF6EE' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }

  /* Badge/chip più leggibili e più grandi da toccare (es. "Non
     registrato", stato pagamento). I colori di base (.pr-badge--success
     ecc, poco sopra in questo file) sono pensati per lo sfondo chiaro di
     sempre - sfondo pallido e testo scuro, illeggibili l'uno sopra
     l'altro quando il resto del pannello passa al tema scuro: qui sotto
     si invertono, sfondo scuro/trasparente e testo chiaro dello stesso
     colore del badge, stesso principio già usato per bottoni ed etichette
     in questo blocco. */
  .pr-dash-main--sidebar .pr-badge { font-size: 11.5px; padding: 5px 13px; }
  .pr-dash-main--sidebar .pr-badge--success { background: rgba(94,178,84,0.22); color: #9ee094; }
  .pr-dash-main--sidebar .pr-badge--warning { background: rgba(198,150,79,0.25); color: var(--gold-300); }
  .pr-dash-main--sidebar .pr-badge--secondary { background: rgba(250,246,238,0.14); color: rgba(250,246,238,0.75); }
  .pr-dash-main--sidebar .pr-badge--danger { background: rgba(217,155,142,0.22); color: #f0a898; }
  .pr-dash-main--sidebar .pr-badge--arancio { background: rgba(198,120,60,0.25); color: #eaad7c; }
  .pr-dash-main--sidebar .pr-badge--giallo { background: rgba(200,180,60,0.22); color: #e5d78d; }

  .pr-dash-main--sidebar .pr-tabbar { background: var(--forest-900); border-top-color: rgba(250,246,238,0.14); }
  .pr-dash-main--sidebar .pr-tabbar__item { color: rgba(250,246,238,0.5); }
  .pr-dash-main--sidebar .pr-tabbar__item.attiva { color: var(--gold-300); }

  .pr-dash-main--sidebar .pr-dash-sidebar { background: var(--forest-900); }
  .pr-dash-main--sidebar .pr-sidebar-mobile-head { border-bottom-color: rgba(250,246,238,0.14); }
  .pr-dash-main--sidebar .pr-sidebar-mobile-head h3 { color: var(--ivory); }
  .pr-dash-main--sidebar .pr-sidebar-mobile-head__chiudi { border-color: rgba(250,246,238,0.3); color: var(--ivory); }
  .pr-dash-main--sidebar .pr-dash-sidebar .pr-admin-tabs .tab-link { background: var(--forest-800); color: var(--ivory); }
  .pr-dash-main--sidebar .pr-dash-sidebar .pr-admin-tabs .tab-link.attiva { background: var(--gold-600); color: var(--forest-900); }

  .pr-dash-main--sidebar .pr-operatrice-btn { background: var(--forest-800); border-color: rgba(250,246,238,0.14); color: var(--ivory); }
  .pr-dash-main--sidebar .pr-operatrice-btn:hover,
  .pr-dash-main--sidebar .pr-operatrice-btn:active { background: var(--forest-700); border-color: var(--gold-500); }

  .pr-dash-main--sidebar .pr-magazzino-tile { background: var(--forest-800); border-color: rgba(250,246,238,0.14); }
  .pr-dash-main--sidebar .pr-magazzino-tile:hover,
  .pr-dash-main--sidebar .pr-magazzino-tile:active { background: var(--forest-700); border-color: var(--gold-500); }
  .pr-dash-main--sidebar .pr-magazzino-tile__nome { color: var(--ivory); }

  /* sheet di dettaglio (tocco su una riga/tessera): stessa versione scura
     già usata nel wizard di prenotazione e nell'area cliente, applicata
     anche qui - senza, lo sheet restava con lo sfondo chiaro di sempre,
     leggibile a fatica sopra lo scrim scuro dietro. */
  .pr-dash-main--sidebar .pr-wizard-sheet { background: var(--forest-800); border-top-color: rgba(250,246,238,0.14); }
  .pr-dash-main--sidebar .pr-wizard-sheet__grip { background: rgba(250,246,238,0.2); }
  .pr-dash-main--sidebar .pr-wizard-sheet h3 { color: var(--ivory); }
  .pr-dash-main--sidebar .pr-wizard-riepilogo { background: rgba(250,246,238,0.08); }
  .pr-dash-main--sidebar .pr-wizard-riepilogo__riga { border-bottom-color: rgba(250,246,238,0.12); }
  .pr-dash-main--sidebar .pr-wizard-riepilogo__riga span:first-child { color: rgba(250,246,238,0.55); }
  .pr-dash-main--sidebar .pr-wizard-riepilogo__riga span:last-child { color: var(--ivory); }

  /* "Tabella con tocco" (prAttivaTabellaTocca, inc/tab_tocca_helper.php):
     nessuna colonna nuova, la <table> esistente resta l'unica fonte dati
     (ricerca/ordinamento continuano a funzionare sulle vere <tr>) - qui
     solo la colonna "titolo" resta visibile in riga, il resto si vede
     nello sheet al tocco. Sostituisce, sotto i 768px, la vecchia
     card-ificazione generica (@media max-width:1000px più sopra) per le
     tabelle marcate .pr-table-tocca. */
  .pr-dash-main--sidebar .pr-table-tocca { background: none; border: none; }
  .pr-dash-main--sidebar .pr-table-tocca thead { display: none; }
  .pr-dash-main--sidebar .pr-table-tocca, .pr-dash-main--sidebar .pr-table-tocca tbody { display: block; width: 100%; }
  .pr-dash-main--sidebar .pr-table-tocca tbody tr {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 4px; border: none; border-bottom: 1px solid rgba(250,246,238,0.12); border-radius: 0;
    cursor: pointer; margin-bottom: 0; background: none;
  }
  .pr-dash-main--sidebar .pr-table-tocca tbody tr:last-child { border-bottom: none; }
  .pr-dash-main--sidebar .pr-table-tocca tbody tr.is-editing { background: rgba(198,150,79,0.14); }
  .pr-dash-main--sidebar .pr-table-tocca tbody tr td { display: none !important; border: none; padding: 0; }
  .pr-dash-main--sidebar .pr-table-tocca tbody tr td.pr-cella-titolo {
    display: flex !important; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 14.5px; font-weight: 700; color: var(--ivory); flex: 1; min-width: 0;
  }
  .pr-dash-main--sidebar .pr-table-tocca tbody tr td.pr-cella-titolo::before { content: none; }
  .pr-dash-main--sidebar .pr-table-tocca tbody tr td.pr-cella-titolo br,
  .pr-dash-main--sidebar .pr-table-tocca tbody tr td.pr-cella-titolo small { display: none; }
  .pr-dash-main--sidebar .pr-table-tocca tbody tr .pr-tocca-freccia { flex-shrink: 0; opacity: 0.4; color: var(--ivory); }

  /* Tabelle "semplici" (senza tocco, senza .pr-table-tocca) rimaste
     visibili sotto i 768px - es. i Reports, dati di sola lettura dove non
     serve uno sheet di dettaglio. La card-ificazione generica qui sopra
     (@media max-width:1000px) è pensata solo per il tema chiaro: qui sotto
     sovrascrive etichette e valori con gli stessi toni chiari già usati
     per il resto del pannello scuro, altrimenti restano scritte scure
     illeggibili sopra lo sfondo verde. */
  .pr-dash-main--sidebar .pr-table:not(.pr-table-tocca) { background: none; }
  .pr-dash-main--sidebar .pr-table:not(.pr-table-tocca) tr { border-color: rgba(250,246,238,0.14); }
  .pr-dash-main--sidebar .pr-table:not(.pr-table-tocca) td { border-bottom-color: rgba(250,246,238,0.10); color: var(--ivory); }
  .pr-dash-main--sidebar .pr-table:not(.pr-table-tocca) td::before { color: rgba(250,246,238,0.55); }
  .pr-dash-main--sidebar .pr-report-riga-gruppo { background: rgba(250,246,238,0.08); color: var(--ivory); }
  /* stesso contro-effetto delle altre eccezioni qui sopra (.pr-cliente-riga,
     pulsanti, etichette): le tabelle Appuntamenti/Prodotti acquistati dentro
     #modale-modifica-cliente (Dettagli cliente) ereditavano comunque i toni
     chiari pensati per lo sfondo scuro, illeggibili dentro il modale
     bianco. */
  .pr-dash-main--sidebar .pr-op-modal__card .pr-table:not(.pr-table-tocca) td { border-bottom-color: rgba(140,101,48,0.12); color: var(--ink); }
  .pr-dash-main--sidebar .pr-op-modal__card .pr-table:not(.pr-table-tocca) td::before { color: var(--ink-faint); }
  .pr-dash-main--sidebar .pr-op-modal__card .pr-table th { color: var(--ink-faint); }

  /* Servizi — Trattamenti: stesso principio di "tabella con tocco", ma su
     misura (come Magazzino) perché ha anche selezione multipla e stella
     preferiti, che la trasformazione generica sopra non gestisce - qui la
     vera tabella resta solo come sorgente dati per ricerca/selezione,
     nascosta, e le tessere (già coi colori dark di .pr-magazzino-tile)
     sono l'unica cosa visibile. */
  .pr-dash-main--sidebar #tabella-servizi-trattamenti,
  .pr-dash-main--sidebar #tabella-magazzino,
  .pr-dash-main--sidebar #tabella-clienti-desktop,
  .pr-dash-main--sidebar #tabella-operatrici-desktop,
  .pr-dash-main--sidebar #tabella-account-desktop { display: none; }
  .pr-dash-main--sidebar .pr-solo-mobile-tessere { display: grid; }
  .pr-dash-main--sidebar .pr-solo-mobile-lista { display: block; }

  /* Import/export Excel: non serve su smartphone (niente file da
     scegliere/scaricare comodamente lì), tolto dalla versione mobile. */
  .pr-dash-main--sidebar .pr-nascondi-mobile { display: none; }
}
.pr-solo-mobile-tessere { display: none; }
.pr-solo-mobile-lista { display: none; }

/* Stessa filosofia sulla pagina di prenotazione trattamenti (wizard
   mobile): :has() individua la sezione che contiene il wizard senza
   toccare .pr-section altrove nel sito - se un browser non lo supporta,
   la sezione resta semplicemente con lo sfondo chiaro di sempre (nessuna
   rottura, solo niente tema scuro). */
@media (max-width: 768px) {
  /* niente copertina/link "torna al sito"/riga di saluto da scorrere
     prima di arrivare al wizard - solo quando il wizard è davvero
     presente in pagina (cliente loggato), i clienti sloggati restano
     con la pagina come sempre. */
  body:has(.pr-section .pr-prenota-mobile) #copertina-prenota,
  body:has(.pr-section .pr-prenota-mobile) .pr-footer,
  .pr-section:has(.pr-prenota-mobile) .pr-nascondi-mobile-wizard { display: none; }

  .pr-section:has(.pr-prenota-mobile) { background: var(--forest-900); min-height: 100vh; }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-progress__num { background: rgba(250,246,238,0.1); color: rgba(250,246,238,0.5); border-color: rgba(250,246,238,0.2); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-progress__label { color: rgba(250,246,238,0.5); }
  .pr-section:has(.pr-prenota-mobile) .pr-conferma-dettagli { color: var(--ivory); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-progress__step.is-attivo .pr-wizard-progress__num { background: var(--gold-600); border-color: var(--gold-600); color: var(--forest-900); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-progress__step.is-attivo .pr-wizard-progress__label { color: var(--ivory); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-progress__step.is-completato .pr-wizard-progress__num { background: rgba(198,150,79,0.2); border-color: var(--gold-500); color: var(--gold-300); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-progress__line { background: rgba(250,246,238,0.15); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-progress__line.is-completata { background: var(--gold-500); }

  .pr-section:has(.pr-prenota-mobile) .pr-wizard-step__title { color: var(--ivory); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-back { color: rgba(250,246,238,0.6); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-back:hover { color: var(--ivory); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-step__riepilogo { color: rgba(250,246,238,0.6); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-step__riepilogo strong { color: var(--ivory); }

  .pr-section:has(.pr-prenota-mobile) .pr-wizard-categoria-btn { background: var(--forest-800); border-color: rgba(250,246,238,0.14); color: var(--ivory); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-categoria-btn:hover,
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-categoria-btn:active { background: var(--forest-700); border-color: var(--gold-500); }
  .pr-section:has(.pr-prenota-mobile) .pr-btn.pr-btn--ghost-dark { border-color: rgba(250,246,238,0.35); color: var(--ivory); }
  .pr-section:has(.pr-prenota-mobile) .pr-btn-sm { border-color: rgba(250,246,238,0.35); color: var(--ivory); }
  .pr-section:has(.pr-prenota-mobile) .pr-btn-sm:hover { background: rgba(250,246,238,0.1); }
  .pr-section:has(.pr-prenota-mobile) .pr-btn-sm--ghost { border-color: rgba(250,246,238,0.35); color: var(--ivory); }

  .pr-section:has(.pr-prenota-mobile) .pr-wizard-card { background: var(--forest-800); border-color: rgba(250,246,238,0.14); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-card:hover, .pr-section:has(.pr-prenota-mobile) .pr-wizard-card:active { background: var(--forest-700); border-color: var(--gold-500); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-card.is-selezionato { background: var(--gold-600); border-color: var(--gold-600); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-card.is-selezionato .pr-wizard-card__titolo,
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-card.is-selezionato .pr-wizard-card__meta { color: var(--forest-900); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-card__titolo { color: var(--ivory); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-card__meta { color: rgba(250,246,238,0.55); }

  .pr-section:has(.pr-prenota-mobile) .pr-wizard-calendar__header { color: var(--ivory); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-calendar__header button { background: rgba(250,246,238,0.1); color: var(--gold-300); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-calendar__giorni-settimana { color: rgba(250,246,238,0.5); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-calendar__giorno { color: rgba(250,246,238,0.25); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-calendar__giorno.disponibile { color: var(--ivory); background: rgba(250,246,238,0.1); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-calendar__giorno.disponibile:active { background: var(--gold-600); color: var(--forest-900); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-calendar__legenda { color: rgba(250,246,238,0.55); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-calendar__legenda .pallino-disp { background: rgba(250,246,238,0.1); border-color: var(--gold-300); }

  .pr-section:has(.pr-prenota-mobile) .pr-wizard-slot { background: var(--forest-800); border-color: rgba(250,246,238,0.18); color: var(--ivory); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-slot:active { background: var(--forest-700); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-slot.is-selezionato { background: var(--gold-600); border-color: var(--gold-600); color: var(--forest-900); }
  .pr-section:has(.pr-prenota-mobile) .pr-filtro-turno__btn { background: var(--forest-800); border-color: rgba(250,246,238,0.18); color: var(--ivory); }

  .pr-section:has(.pr-prenota-mobile) .pr-wizard-riepilogo { background: rgba(250,246,238,0.08); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-riepilogo__riga { border-bottom-color: rgba(250,246,238,0.12); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-riepilogo__riga span:first-child { color: rgba(250,246,238,0.55); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-riepilogo__riga span:last-child { color: var(--ivory); }

  .pr-section:has(.pr-prenota-mobile) .pr-form .metodo-btn { background: var(--forest-800); border-color: rgba(250,246,238,0.18); }
  .pr-section:has(.pr-prenota-mobile) .pr-form .metodo-btn strong { color: var(--ivory); }
  .pr-section:has(.pr-prenota-mobile) .pr-form .metodo-btn span { color: rgba(250,246,238,0.55); }
  .pr-section:has(.pr-prenota-mobile) .pr-form .metodo-btn.selezionato { background: var(--gold-600); border-color: var(--gold-600); }
  .pr-section:has(.pr-prenota-mobile) .pr-form .metodo-btn.selezionato strong,
  .pr-section:has(.pr-prenota-mobile) .pr-form .metodo-btn.selezionato span { color: var(--forest-900); }
  .pr-section:has(.pr-prenota-mobile) label { color: rgba(250,246,238,0.7); }
  .pr-section:has(.pr-prenota-mobile) #giftcard-box { background: rgba(250,246,238,0.08) !important; }
  .pr-section:has(.pr-prenota-mobile) #giftcard-codice { background: var(--forest-800); border-color: rgba(250,246,238,0.2); color: var(--ivory); }

  .pr-section:has(.pr-prenota-mobile) .pr-wizard-sheet { background: var(--forest-800); border-top-color: rgba(250,246,238,0.14); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-sheet__testo { color: rgba(250,246,238,0.7); }
  .pr-section:has(.pr-prenota-mobile) .pr-wizard-step [style*="--ink-faint"] { color: rgba(250,246,238,0.5) !important; }
  .pr-section:has(.pr-prenota-mobile) [style*="--ink-soft"] { color: rgba(250,246,238,0.65) !important; }
  .pr-section:has(.pr-prenota-mobile) [style*="--forest-900"] { color: var(--ivory) !important; }

  /* .pr-op-modal__card resta sempre chiara (niente variante scura), come
     altrove nel sito: senza questo contro-effetto il gate di accesso/
     registrazione (#modale-gate-accesso) ereditava comunque le etichette
     e i pulsanti "fantasma" chiari pensati per lo sfondo scuro qui sopra,
     illeggibili (chiaro su chiaro) dentro un modale bianco. */
  .pr-section:has(.pr-prenota-mobile) .pr-op-modal__card label { color: var(--ink-faint); }
  .pr-section:has(.pr-prenota-mobile) .pr-op-modal__card .pr-btn-sm { border-color: rgba(140,101,48,0.3); color: var(--forest-800); background: none; }
  .pr-section:has(.pr-prenota-mobile) .pr-op-modal__card .pr-btn-sm:hover { background: rgba(140,101,48,0.08); }
  .pr-section:has(.pr-prenota-mobile) .pr-op-modal__card .pr-btn-sm--ghost { border-color: rgba(140,101,48,0.3); color: var(--forest-800); }
  .pr-section:has(.pr-prenota-mobile) .pr-op-modal__card .pr-btn.pr-btn--ghost-dark { border-color: rgba(23,38,25,0.3); color: var(--forest-800); }
}

/* Stessa filosofia in "Le mie prenotazioni" (area-cliente.php). */
@media (max-width: 768px) {
  .pr-dash-main--cliente { background: var(--forest-900); min-height: 100vh; }
  .pr-dash-main--cliente .pr-dash-card { background: var(--forest-800); border-color: rgba(250,246,238,0.10); }
  .pr-dash-main--cliente .pr-dash-card h2 { color: var(--ivory); }
  .pr-dash-main--cliente .pr-dash-card .empty,
  .pr-dash-main--cliente .pr-form-note { color: rgba(250,246,238,0.55); }
  .pr-dash-main--cliente [style*="--ink-soft"] { color: rgba(250,246,238,0.65) !important; }

  .pr-dash-main--cliente .pr-dash-shortcut { background: var(--forest-800); border-color: rgba(250,246,238,0.10); }
  .pr-dash-main--cliente .pr-dash-shortcut__icon { background: rgba(250,246,238,0.1); color: var(--gold-300); }
  .pr-dash-main--cliente .pr-dash-shortcut h3 { color: var(--ivory); }
  .pr-dash-main--cliente .pr-dash-shortcut p { color: rgba(250,246,238,0.55); }

  .pr-dash-main--cliente .pr-mia-prenotazione-riga { border-bottom-color: rgba(250,246,238,0.12); }
  .pr-dash-main--cliente .pr-mia-prenotazione-riga__titolo { color: var(--ivory); }
  .pr-dash-main--cliente .pr-mia-prenotazione-riga__meta { color: rgba(250,246,238,0.55); }

  .pr-dash-main--cliente .pr-btn-sm {
    border-color: rgba(250,246,238,0.35); color: var(--ivory); padding: 9px 16px; font-size: 12px; min-height: 40px;
  }
  .pr-dash-main--cliente .pr-btn-sm:hover { background: rgba(250,246,238,0.1); }
  .pr-dash-main--cliente .pr-btn-sm--ghost { border-color: rgba(250,246,238,0.35); color: var(--ivory); }
  .pr-dash-main--cliente .pr-btn-sm--danger { border-color: #d99b8e; color: #f0a898; }
  .pr-dash-main--cliente .pr-btn-sm--danger:hover { background: rgba(217,155,142,0.15); }
  /* .pr-op-modal__card resta sempre chiara: senza questo contro-effetto i
     suoi pulsanti "fantasma" (es. nel modale "Impostazioni") ereditavano
     comunque i colori chiari pensati per lo sfondo scuro qui sopra,
     illeggibili dentro un modale bianco - stesso bug già risolto lato
     amministrazione (.pr-dash-main--sidebar). */
  .pr-dash-main--cliente .pr-op-modal__card .pr-btn-sm { border-color: rgba(140,101,48,0.3); color: var(--forest-800); background: none; }
  .pr-dash-main--cliente .pr-op-modal__card .pr-btn-sm:hover { background: rgba(140,101,48,0.08); }
  .pr-dash-main--cliente .pr-op-modal__card .pr-btn-sm--ghost { border-color: rgba(140,101,48,0.3); color: var(--forest-800); }
  .pr-dash-main--cliente .pr-op-modal__card .pr-form-note { color: var(--ink-faint); }

  .pr-dash-main--cliente .pr-wizard-sheet { background: var(--forest-800); box-shadow: 0 -14px 30px -20px rgba(0,0,0,0.5); }
  .pr-dash-main--cliente .pr-wizard-sheet__grip { background: rgba(250,246,238,0.2); }
  .pr-dash-main--cliente .pr-wizard-riepilogo { background: rgba(250,246,238,0.08); }
  .pr-dash-main--cliente .pr-wizard-riepilogo__riga { border-bottom-color: rgba(250,246,238,0.12); }
  .pr-dash-main--cliente .pr-wizard-riepilogo__riga span:first-child { color: rgba(250,246,238,0.55); }
  .pr-dash-main--cliente .pr-wizard-riepilogo__riga span:last-child { color: var(--ivory); }
  .pr-dash-main--cliente .pr-wizard-riepilogo .pr-badge--success { background: rgba(198,150,79,0.25); color: var(--gold-300); }
}