/* ==========================================================================
   BookingDesigner — mockup di interfaccia (inc/mockup/*.php)

   Tutto ha il prefisso .mk / .mk- per non collidere con site.css, di cui si
   usano i token (--teal, --menta, --arancio, --verde-*, --r-*, --font).

   Come scala: .mk è un contenitore (container-type: inline-size) e la scena
   interna prende font-size = larghezza / --mk-l. Tutte le misure interne sono
   in em, quindi il mockup si rimpicciolisce come un'immagine, restando nitido.
   Sotto i 560 px di contenitore (o con .mk--compatto) si passa alla variante
   ridotta: --mk-l più piccolo (testo più grande in proporzione) e gli elementi
   .mk-ampio nascosti.

   Token nuovi (proposti anche in audit-immagini §4.1, da portare in Figma):
     --mk-ombra-1/2/3   ombre a tre livelli (celle, card, frame e flottanti)
     --mk-rosso         disponibilità zero, stop sales (non esiste in site.css)
     --mk-stato-*       alias semantici dei colori di stato
   ========================================================================== */

:root {
  --mk-ombra-1: 0 1px 2px rgba(0, 66, 73, 0.06), 0 2px 6px rgba(0, 66, 73, 0.05);
  --mk-ombra-2: 0 12px 28px rgba(0, 66, 73, 0.08);
  --mk-ombra-3: 0 24px 60px -12px rgba(0, 66, 73, 0.24), 0 6px 16px -6px rgba(0, 66, 73, 0.10);

  --mk-rosso:        #c9483c;
  --mk-rosso-chiaro: #fbe5e2;
  --mk-arancio-chiaro: #fde9d3;
  --mk-arancio-testo:  #9a5307;  /* testo su arancio chiaro, 5,6:1 */

  --mk-stato-confermata: var(--teal);
  --mk-stato-opzione:    var(--arancio);
  --mk-stato-incasa-bg:  var(--verde-chiaro);
  --mk-stato-incasa:     var(--verde-scuro);

  --mk-linea:   #e6eded;   /* filetti interni alla UI, più leggeri di --filetto */
  --mk-sfondo:  #f6f9f9;   /* fondo dell'area di lavoro dell'app */
}

/* --------------------------------------------------------------------------
   Contenitore e scala
   -------------------------------------------------------------------------- */

.mk {
  container: mk / inline-size;
  position: relative;
  width: 100%;
  color: var(--inchiostro);
  font-family: var(--font);
  line-height: 1.35;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.mk__scena {
  /* Larghezza di progetto in em: --mk-l (ampia) e --mk-lc (compatta), che
     ogni mockup definisce sul proprio contenitore .mk--<nome>. */
  position: relative;
  font-size: 12px;     /* ripiego per i browser senza container query */
  font-size: calc(100cqi / var(--mk-l, 80));
}

.mk *, .mk *::before, .mk *::after { box-sizing: border-box; }
.mk :where(p, h1, h2, h3, h4, ul, ol, figure) { margin: 0; padding: 0; list-style: none; }
.mk b, .mk strong { font-weight: 600; }

.mk .mk-ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  display: inline-block;
  vertical-align: -0.2em;
}

.mk-solo-compatto { display: none !important; }

/* Livello intermedio (561–820 px): via rail e pannelli laterali (.mk-medio-no),
   larghezza di progetto --mk-lm. Deve precedere il blocco compatto. */
@container mk (max-width: 820px) {
  .mk__scena { font-size: calc(100cqi / var(--mk-lm, var(--mk-l, 80))); }
  .mk-medio-no, .mk-rail { display: none !important; }
}
.mk--compatto .mk-medio-no, .mk--compatto .mk-rail { display: none !important; }

@container mk (max-width: 560px) {
  .mk__scena { font-size: calc(100cqi / var(--mk-lc, 34)); }
  .mk-ampio { display: none !important; }
  .mk-solo-compatto { display: revert !important; }
}
.mk--compatto .mk__scena { font-size: calc(100cqi / var(--mk-lc, 34)); }
.mk--compatto .mk-ampio { display: none !important; }
.mk--compatto .mk-solo-compatto { display: revert !important; }

/* Numeri tabellari: le cifre non ballano nelle colonne. */
.mk-num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Cornice "finestra"
   -------------------------------------------------------------------------- */

.mk-finestra {
  position: relative;
  background: var(--carta);
  border-radius: 1.1em;
  box-shadow: var(--mk-ombra-3), 0 0 0 1px rgba(0, 66, 73, 0.06);
  overflow: hidden;
}
.mk-finestra__barra {
  display: flex;
  align-items: center;
  gap: 1em;
  height: 2.5em;
  padding: 0 1em;
  background: #f3f6f6;
  border-bottom: 1px solid var(--mk-linea);
}
.mk-finestra__pallini { display: flex; gap: 0.42em; flex: 1 1 0; }
.mk-finestra__pallini i {
  width: 0.72em; height: 0.72em; border-radius: 50%;
  background: #dfe6e6;
}
.mk-finestra__pallini i:first-child { background: #f0b3a8; }
.mk-finestra__pallini i:nth-child(2) { background: #f5d39a; }
.mk-finestra__pallini i:nth-child(3) { background: #b9dcb0; }
.mk-finestra__url {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.3em 1.1em;
  background: var(--carta);
  border-radius: var(--r-pillola);
  font-size: 0.8em;
  color: var(--grigio);
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--mk-linea);
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.mk-finestra__url .mk-ico { width: 0.9em; height: 0.9em; color: var(--teal-scuro); }
.mk-finestra__spazio { flex: 1 1 0; }
.mk-finestra__corpo { position: relative; display: flex; min-height: 0; }

@container mk (max-width: 560px) {
  .mk-finestra__pallini { flex: 0 0 auto; }
  .mk-finestra__spazio { display: none; }
}
.mk--compatto .mk-finestra__pallini { flex: 0 0 auto; }
.mk--compatto .mk-finestra__spazio { display: none; }

/* --------------------------------------------------------------------------
   Guscio applicazione: rail, barra alta, area di lavoro
   -------------------------------------------------------------------------- */

.mk-rail {
  flex: none;
  width: 3.6em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  padding: 0.9em 0;
  background: var(--teal-profondo);
  color: rgba(255, 255, 255, 0.62);
}
.mk-rail__logo {
  display: grid; place-items: center;
  width: 2.3em; height: 2.3em; margin-bottom: 0.7em;
  border-radius: 0.7em;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  font-size: 0.95em;
  letter-spacing: -0.03em;
}
.mk-rail__voce, .mk-rail__fondo {
  display: grid; place-items: center;
  width: 2.5em; height: 2.3em;
  border-radius: 0.65em;
}
.mk-rail__voce.is-attiva { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 0.18em 0 0 var(--menta-scura); }
.mk-rail__fondo { margin-top: auto; }
.mk-rail .mk-ico { width: 1.25em; height: 1.25em; }

.mk-app { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--carta); }

.mk-top {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.8em 1.2em;
  border-bottom: 1px solid var(--mk-linea);
}
.mk-top__titolo { font-size: 1.15em; font-weight: 600; color: var(--teal-profondo); white-space: nowrap; }
.mk-top__spazio { flex: 1 1 auto; }

.mk-select {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.42em 0.8em;
  border: 1px solid var(--filetto);
  border-radius: 0.6em;
  background: var(--carta);
  font-size: 0.9em;
  font-weight: 500;
  white-space: nowrap;
  color: var(--inchiostro);
}
.mk-select .mk-ico { color: var(--grigio); width: 1em; height: 1em; }
.mk-select--struttura { font-weight: 600; color: var(--teal-profondo); }
.mk-select--struttura .mk-struttura-punto {
  width: 1.5em; height: 1.5em; border-radius: 0.45em;
  display: grid; place-items: center;
  background: var(--menta); color: var(--teal-scuro);
  font-size: 0.72em; font-weight: 700;
}

.mk-cerca {
  display: inline-flex; align-items: center; gap: 0.5em;
  min-width: 13em;
  padding: 0.42em 0.8em;
  border-radius: 0.6em;
  background: var(--mk-sfondo);
  color: var(--grigio-tenue);
  font-size: 0.88em;
  white-space: nowrap;
}
.mk-icona-btn {
  position: relative;
  display: grid; place-items: center;
  width: 2.2em; height: 2.2em;
  border-radius: 0.6em;
  color: var(--grigio);
}
.mk-icona-btn--notifica::after {
  content: ""; position: absolute; top: 0.45em; right: 0.5em;
  width: 0.5em; height: 0.5em; border-radius: 50%;
  background: var(--arancio); box-shadow: 0 0 0 0.15em #fff;
}

.mk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  padding: 0.5em 0.95em;
  border-radius: 0.6em;
  background: var(--teal);
  color: #fff;
  font-size: 0.88em;
  font-weight: 600;
  white-space: nowrap;
}
.mk-btn--chiaro { background: var(--teal-chiaro); color: var(--teal-scuro); }
.mk-btn--linea { background: var(--carta); color: var(--inchiostro); box-shadow: inset 0 0 0 1px var(--filetto); }
.mk-btn--arancio { background: var(--arancio); color: var(--teal-profondo); }
.mk-btn .mk-ico { width: 1.05em; height: 1.05em; }

.mk-seg {
  display: inline-flex; padding: 0.2em;
  background: var(--mk-sfondo);
  border-radius: 0.65em;
  font-size: 0.85em; font-weight: 500;
  white-space: nowrap;
}
.mk-seg span { padding: 0.32em 0.8em; border-radius: 0.5em; color: var(--grigio); }
.mk-seg span.is-attivo { background: var(--carta); color: var(--teal-profondo); font-weight: 600; box-shadow: var(--mk-ombra-1); }

/* --------------------------------------------------------------------------
   Pezzi piccoli: avatar, pill, canali
   -------------------------------------------------------------------------- */

.mk-avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 2.1em; height: 2.1em;
  border-radius: 50%;
  font-size: 0.8em; font-weight: 600;
  letter-spacing: 0.02em;
}
.mk-avatar--teal    { background: var(--teal); color: #fff; }
.mk-avatar--profondo{ background: var(--teal-profondo); color: #fff; }
.mk-avatar--menta   { background: var(--menta); color: var(--teal-profondo); }
.mk-avatar--arancio { background: var(--mk-arancio-chiaro); color: var(--mk-arancio-testo); }
.mk-avatar--verde   { background: var(--verde-chiaro); color: var(--verde-scuro); }
.mk-avatar--grigio  { background: var(--grigio-chiaro); color: var(--grigio-scuro); }

.mk-pill {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.18em 0.62em;
  border-radius: var(--r-pillola);
  font-size: 0.78em; font-weight: 600;
  white-space: nowrap;
  line-height: 1.5;
}
.mk-pill--ok     { background: var(--verde-chiaro); color: var(--verde-scuro); }
.mk-pill--attesa { background: var(--mk-arancio-chiaro); color: var(--mk-arancio-testo); }
.mk-pill--info   { background: var(--teal-chiaro); color: var(--teal-scuro); }
.mk-pill--neutro { background: var(--grigio-chiaro); color: var(--grigio-scuro); }
.mk-pill--ko     { background: var(--mk-rosso-chiaro); color: var(--mk-rosso); }
.mk-punto { width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; flex: none; }

.mk-canale {
  display: inline-grid; place-items: center; flex: none;
  width: 1.45em; height: 1.45em;
  border-radius: 0.38em;
  font-size: 0.72em; font-weight: 700;
  line-height: 1;
  color: #fff;
}
.mk-canale .mk-ico { width: 0.95em; height: 0.95em; stroke-width: 2.2; }
.mk-canale--booking { background: #1f4fa3; }
.mk-canale--expedia { background: #f6c945; color: #1d2a44; }
.mk-canale--airbnb  { background: #e5646a; }
.mk-canale--google  { background: #5f7d95; }
.mk-canale--sito    { background: var(--teal); }
.mk-canale--tel     { background: var(--teal-profondo); }
.mk-canale--to      { background: #7a6aa8; }

/* --------------------------------------------------------------------------
   Card flottanti
   -------------------------------------------------------------------------- */

.mk-flot {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75em;
  max-width: 22em;
  padding: 0.75em 1.05em 0.75em 0.8em;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 0.95em;
  box-shadow: var(--mk-ombra-3), 0 0 0 1px rgba(0, 66, 73, 0.05);
  font-size: 1.02em;
  white-space: nowrap;
}
.mk-flot__icona {
  display: grid; place-items: center; flex: none;
  width: 2.3em; height: 2.3em;
  border-radius: 0.7em;
}
.mk-flot__icona .mk-ico { width: 1.2em; height: 1.2em; }
.mk-flot__icona--arancio { background: var(--mk-arancio-chiaro); color: var(--arancio-cupo); }
.mk-flot__icona--teal    { background: var(--teal-chiaro); color: var(--teal); }
.mk-flot__icona--verde   { background: var(--verde-chiaro); color: var(--verde-scuro); }
.mk-flot__icona--scuro   { background: var(--teal-profondo); color: #fff; }
.mk-flot__testo { display: flex; flex-direction: column; min-width: 0; }
.mk-flot__testo b { font-size: 0.9em; font-weight: 600; color: var(--teal-profondo); }
.mk-flot__testo small { font-size: 0.78em; color: var(--grigio); margin-top: 0.1em; }

/* In compatto resta solo la card primaria, rientrata nel riquadro. */
@container mk (max-width: 560px) {
  .mk-flot:not(.mk-flot--primaria) { display: none; }
  .mk-flot { font-size: 0.95em; }
}
.mk--compatto .mk-flot:not(.mk-flot--primaria) { display: none; }

/* --------------------------------------------------------------------------
   Cornici di dispositivo (tablet, telefono): solo CSS
   -------------------------------------------------------------------------- */

.mk-tablet {
  position: relative;
  padding: 1.1em;
  background: #1f2f31;
  border-radius: 2.2em;
  box-shadow: var(--mk-ombra-3), inset 0 0 0 0.12em #3b4b4d;
}
.mk-tablet::before {         /* fotocamera */
  content: ""; position: absolute; top: 50%; left: 0.42em;
  width: 0.38em; height: 0.38em; margin-top: -0.19em;
  border-radius: 50%; background: #465557;
}
.mk-tablet__schermo { position: relative; overflow: hidden; border-radius: 1.2em; background: var(--carta); }

.mk-telefono {
  position: relative;
  width: 100%;
  padding: 0.75em;
  background: #1f2f31;
  border-radius: 3.2em;
  box-shadow: var(--mk-ombra-3), inset 0 0 0 0.14em #3b4b4d;
}
.mk-telefono__schermo {
  position: relative; overflow: hidden;
  border-radius: 2.5em;
  background: var(--carta);
}
.mk-telefono__isola {
  position: absolute; top: 0.75em; left: 50%; z-index: 2;
  width: 6.5em; height: 1.9em; margin-left: -3.25em;
  border-radius: var(--r-pillola);
  background: #111b1c;
}
.mk-stato-tel {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.95em 1.9em 0.4em;
  font-size: 0.85em; font-weight: 600;
  color: var(--inchiostro);
}
.mk-stato-tel__icone { display: flex; gap: 0.3em; align-items: center; }
.mk-stato-tel__icone i { display: block; width: 1.1em; height: 0.6em; border-radius: 0.15em; background: var(--inchiostro); }
.mk-stato-tel__icone i:first-child { width: 0.9em; clip-path: polygon(0 100%, 100% 0, 100% 100%); border-radius: 0; }

/* --------------------------------------------------------------------------
   Animazioni (solo con mockup.js: senza JS tutto è già al suo posto).
   .mk--pronto = stato iniziale, .mk--in-vista = gioca l'ingresso.
   -------------------------------------------------------------------------- */

.mk--pronto .mk-flot { opacity: 0; transform: translateY(0.7em); }
.mk--in-vista .mk-flot {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(0.55s + var(--mk-ordine, 1) * 0.18s);
}

@media (prefers-reduced-motion: reduce) {
  .mk *, .mk *::before, .mk *::after { animation: none !important; transition: none !important; }
  .mk--pronto .mk-flot { opacity: 1; transform: none; }
}

/* ==========================================================================
   M1 — Tableau (dal PMS vero, nello stile del sito)

   Prefisso .mk-tv. Larghezze di progetto: 21 giorni (ampio), 14 (medio),
   7 (compatto). Il guscio .mk-tv (barra dell'app opzionale, area di lavoro)
   è condiviso con preventivatore (M10) e analytics (M11).

   Mappatura dal BMS vero (Bootstrap) alla palette del sito, comune a M1,
   M10 e M11:
     blu Bootstrap #337ab7 / #3a87c3 / #2f7fc0  → --teal (pulsanti primari,
         contatori, chip, voce attiva), --teal-scuro per testi e link
     barra scura del modulo #36444f / #2f3e4c   → --teal-profondo
     azzurro della struttura #4fc3d9            → --menta-scura
     grigio di fondo #efefef / #e9e9e9          → --mk-sfondo, card bianche
     filetti #ddd / #ccc                        → --mk-linea / --filetto
     barre del tableau (tipo di cliente):
       acciaio  #8aa1b4 (diretti, la più diffusa) → petrolio, teal profondo
                                                    desaturato
       blu      #6aa7cd                           → teal
       turchese #74ddcb                           → menta (testo scuro)
       verde    #b2f3bd                           → verde (--verde-scuro)
       magenta  #e25fe6 (tour operator)           → prugna smorzata
       viola    #ad7ee8                           → senape (testo scuro)
       celeste  #70c6ee                           → arancio (testo scuro)
       malva    #b5839f / marrone #877474         → malva chiara
     disponibilità: verdino Bootstrap → velo menta; zero → --mk-rosso tenue
   ========================================================================== */

.mk--tableau {
  --mk-l: 89.9; --mk-lm: 64; --mk-lc: 33;
  --tv-c: 3.7em;          /* larghezza di un giorno */
  --tv-g: 21;             /* giorni visibili */
  --tv-un: 6.6em;         /* unità + tipologia */
  --tv-st: 1.6em;         /* pallino di stato */
  --tv-sx: calc(var(--tv-un) + var(--tv-st));
  --tv-h: 2.85em;         /* altezza riga */
  --tv-linea: #edf2f2;
}
@container mk (max-width: 820px) { .mk--tableau .mk__scena { --tv-g: 14; } }
@container mk (max-width: 560px) {
  .mk--tableau .mk__scena { --tv-g: 7; --tv-un: 4.7em; --tv-st: 1.4em; }
}
.mk--tableau.mk--compatto .mk__scena { --tv-g: 7; --tv-un: 4.7em; --tv-st: 1.4em; }
/* Senza barra dell'app né colonna di icone ('app' => false, il default): la
   griglia guadagna i 2,4em della colonna, la larghezza di progetto si stringe. */
.mk--tableau.mk--senza-app { --mk-l: 87.5; --mk-lm: 61.6; }

.mk-tv {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--mk-sfondo);
  color: var(--inchiostro);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.25;
}
.mk-tv .mk-ico { stroke-width: 2; }
.mk-tv__spazio { flex: 1 1 auto; }
.mk-tv__giu {
  display: inline-block; width: 0; height: 0; margin-left: 0.35em; vertical-align: 0.15em;
  border: 0.28em solid transparent; border-top-color: currentColor; border-bottom: 0;
}

/* Barra bianca dell'app ------------------------------------------------------ */
.mk-tv__app {
  display: flex; align-items: center; gap: 0.55em;
  height: 3.5em; padding: 0 0.7em 0 0.5em;
  background: #fff;
  border-bottom: 0.3em solid var(--teal-profondo);
  box-sizing: content-box;
  white-space: nowrap;
}
.mk-tv__logo { display: inline-flex; align-items: center; gap: 0.75em; height: 100%; padding-right: 1.4em; background: #fff; color: var(--teal); }
.mk-tv__marchio { display: block; width: 2.6em; height: 2.6em; }
.mk-tv__logo img { display: block; }
.mk-tv__logo img.mk-tv__wordmark { width: 10.6em; height: auto; }
.mk-tv__caret { width: 0.85em; height: 0.55em; margin-left: 0.6em; }
.mk-tv__tondo {
  display: grid; place-items: center; flex: none;
  width: 2.3em; height: 2.3em; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--filetto);
  color: var(--grigio-tenue);
}
.mk-tv__tondo .mk-ico { width: 1.05em; height: 1.05em; }
.mk-tv__pillola {
  padding: 0.5em 1em; border-radius: 2em;
  font-weight: 600; font-size: 0.86em;
}
.mk-tv__pillola--verde   { background: var(--verde-chiaro); color: var(--verde-scuro); }
.mk-tv__pillola--azzurra { background: var(--teal-chiaro); color: var(--teal-scuro); }
.mk-tv__accesso { font-size: 0.66em; color: var(--grigio); }
.mk-tv__utente {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.55em 1em; border-radius: 2em;
  box-shadow: inset 0 0 0 1px var(--filetto);
  font-size: 0.6em; color: var(--grigio-tenue); letter-spacing: 0.04em;
}
.mk-tv__data { font-size: 0.66em; color: var(--grigio); }

/* Guscio: colonna di icone scura + area di lavoro --------------------------- */
.mk-tv__guscio { display: flex; min-height: 0; flex: 1 1 auto; }
.mk-tv__rail {
  flex: none; width: 2.4em;
  display: flex; flex-direction: column; align-items: center; gap: 1.15em;
  padding-top: 1.1em;
  background: var(--teal-profondo); color: rgba(255, 255, 255, 0.78);
}
.mk-tv__rail .mk-ico { width: 1.05em; height: 1.05em; }
.mk-tv__lavoro { flex: 1 1 auto; min-width: 0; padding: 0.8em 0.8em 0.9em; }

/* Barra del modulo: teal profondo, angoli piccoli, scheda attiva in bianco */
.mk-tv__modulo {
  display: flex; align-items: center; gap: 1em;
  height: 3em; padding: 0 1.1em 0 1.1em;
  background: var(--teal-profondo); color: #fff;
  border-radius: 0.55em;
  white-space: nowrap;
}
.mk-tv__titolo { font-size: 1em; font-weight: 700; letter-spacing: 0.04em; margin-right: auto; }
.mk-tv__tabs { display: flex; align-items: center; gap: 0.2em; font-size: 0.88em; }
.mk-tv__tabs > span {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.38em 0.75em; border-radius: 0.42em;
  color: rgba(255, 255, 255, 0.78);
}
.mk-tv__tabs .mk-ico { width: 1em; height: 1em; }
.mk-tv__tabs .is-attiva { background: #fff; color: var(--teal-profondo); font-weight: 600; }
.mk-tv__struttura { margin-left: auto; color: var(--menta-scura); font-size: 0.82em; font-weight: 600; letter-spacing: 0.06em; }

/* Toolbar: navigazione date e pulsanti */
.mk-tv__tool { display: flex; align-items: center; gap: 0.5em; padding: 0.75em 0 0.7em; white-space: nowrap; }
.mk-tv__nav {
  display: inline-flex; align-items: center;
  background: #fff; border: 1px solid var(--filetto); border-radius: 0.45em;
  font-size: 0.8em; color: var(--teal-profondo);
}
.mk-tv__nav > span { padding: 0.5em 0.85em; }
.mk-tv__nav-data { padding-inline: 1.4em !important; font-weight: 600; border-inline: 1px solid var(--mk-linea); }
.mk-tv__btn {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.42em 0.8em;
  background: #fff; border: 1px solid var(--filetto); border-radius: 0.45em;
  font-size: 0.8em; font-weight: 500; color: var(--inchiostro);
}
.mk-tv__btn .mk-ico { width: 1em; height: 1em; }
.mk-tv__btn--primario { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }

/* Griglia: una card bianca con filetti leggeri ------------------------------- */
.mk-tv__griglia {
  background: #fff;
  border-radius: 0.6em;
  box-shadow: 0 1px 3px rgba(0, 66, 73, 0.07), 0 0 0 1px rgba(0, 66, 73, 0.06);
  overflow: hidden;
}
.mk-tv__mesi, .mk-tv__giorni, .mk-tv__riga, .mk-tv__totali {
  display: grid;
  grid-template-columns: var(--tv-un) var(--tv-st) repeat(var(--tv-g), var(--tv-c));
}
.mk-tv__sx { grid-column: 1 / 3; }
.mk-tv__mesi { height: 1.9em; align-items: center; }
.mk-tv__mese {
  grid-column: 3 / span 6;
  align-self: stretch; display: flex; align-items: center;
  padding-left: 0.85em;
  font-size: 0.64em; font-weight: 700; letter-spacing: 0.08em; color: var(--teal-scuro);
  white-space: nowrap; overflow: hidden;
}
.mk-tv__mese--nuovo { grid-column: 9 / -1; border-left: 1px solid var(--tv-linea); }

.mk-tv__giorni { border-bottom: 1px solid var(--mk-linea); }
.mk-tv__g {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: calc(2.5em / 0.62);
  font-size: 0.62em; font-weight: 500; letter-spacing: 0.04em; color: var(--grigio-tenue); line-height: 1.35;
}
.mk-tv__g b { font-size: 1.35em; font-weight: 600; letter-spacing: 0; color: var(--inchiostro); }

.mk-tv__riga { position: relative; height: var(--tv-h); border-bottom: 1px solid var(--tv-linea); }
.mk-tv__unita {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  padding-right: 0.5em;
  line-height: 1.2; white-space: nowrap;
}
.mk-tv__unita b { font-size: 0.82em; font-weight: 600; color: var(--teal-profondo); }
.mk-tv__unita small { font-size: 0.58em; color: var(--grigio-tenue); }
.mk-tv__stato { display: grid; place-items: center; border-right: 1px solid var(--mk-linea); }
.mk-tv__stato i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--arancio); opacity: 0.85; }
.mk-tv__pista {
  grid-column: 3 / -1;
  position: relative; overflow: hidden;
  background: repeating-linear-gradient(90deg, var(--tv-linea) 0 1px, transparent 1px var(--tv-c));
}

/* Barra del soggiorno: corpo chiaro, filetto all'arrivo, nome su fondo pieno,
   trattamento come testo (niente icone). */
.mk-tv__p {
  --b: #b3cccf; --k: #42737a; --l: #2e5c62; --t: #fff;
  position: absolute; top: 0.4em; bottom: 0.4em;
  left: calc(var(--s) * var(--tv-c) + 0.14em);
  width: calc(var(--n) * var(--tv-c) - 0.28em);
  display: flex; align-items: center; justify-content: space-between; gap: 0.4em;
  padding: 0 0.5em 0 0.28em;
  background: var(--b);
  border-left: 0.2em solid var(--l);
  border-radius: 0.38em;
  white-space: nowrap; overflow: hidden;
}
.mk-tv__nome {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  padding: 0.22em 0.55em;
  border-radius: 0.28em;
  background: var(--k); color: var(--t);
  font-size: 0.7em; font-weight: 600; letter-spacing: 0.01em;
}
.mk-tv__tratt { flex: none; font-size: 0.56em; font-weight: 700; letter-spacing: 0.03em; color: var(--l); opacity: 0.85; }

.mk-tv__p--petrolio { --b: #b3cccf; --k: #42737a; --l: #2e5c62; }
.mk-tv__p--teal     { --b: #8fd0d7; --k: var(--teal-scuro); --l: var(--teal-scuro); }
.mk-tv__p--menta    { --b: #d3edef; --k: var(--menta-scura); --l: #3f9ba3; --t: var(--teal-profondo); }
.mk-tv__p--verde    { --b: #dbe9d0; --k: #6c845e; --l: var(--verde-scuro); }
.mk-tv__p--prugna   { --b: #dcc6d4; --k: #85597a; --l: #6e4565; }
.mk-tv__p--malva    { --b: #ead9df; --k: #a07385; --l: #87596b; }
.mk-tv__p--arancio  { --b: #fbd9b4; --k: var(--arancio); --l: var(--arancio-testo); --t: var(--teal-profondo); }
.mk-tv__p--senape   { --b: #f4e6c0; --k: #e1c070; --l: #8a6a1c; --t: #3f3210; }

/* Arrivo prima del primo giorno visibile: la barra esce a sinistra, senza filetto. */
.mk-tv__p.is-da-prima { border-left: 0; border-radius: 0 0.38em 0.38em 0; padding-left: 0.5em; }
/* La prenotazione appena arrivata (card 1): un alone, come una riga appena aggiornata. */
.mk-tv__p.is-nuova { box-shadow: 0 0 0 0.12em #fff, 0 0 0 0.26em var(--arancio); z-index: 1; }
.mk-tv__p.is-puntata { box-shadow: 0 0 0 0.12em #fff, 0 0 0 0.24em var(--teal-profondo); z-index: 1; }

/* Tooltip sulla barra (card 3) */
.mk-tv__tip {
  position: absolute; z-index: 3;
  bottom: calc(100% - 0.25em);
  left: calc(var(--tv-sx) + var(--s) * var(--tv-c) - 0.4em);
  display: flex; flex-direction: column; gap: 0.15em;
  width: 12.2em;
  padding: 0.55em 0.7em 0.5em;
  background: #fff;
  border-radius: 0.5em;
  box-shadow: 0 0.5em 1.4em rgba(0, 66, 73, 0.18), 0 0 0 1px rgba(0, 66, 73, 0.08);
  color: var(--grigio); line-height: 1.4; white-space: nowrap;
}
/* La misura del testo sta sui figli: sul riquadro sposterebbe left, che è in em. */
.mk-tv__tip > * { font-size: 0.78em; }
.mk-tv__tip::after {
  content: ""; position: absolute; top: 100%; left: 2.2em;
  border: 0.4em solid transparent; border-top-color: #fff; border-bottom: 0;
}
.mk-tv__tip > b { font-size: 0.86em; font-weight: 700; color: var(--teal-profondo); padding-top: 0.3em; border-top: 1px solid var(--mk-linea); }
.mk-tv__tip-testa { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding-bottom: 0.15em; }
.mk-tv__tip-cod { padding: 0.05em 0.5em; border-radius: 0.35em; background: var(--teal-chiaro); color: var(--teal-scuro); font-weight: 600; }
.mk-tv__tip-riga { display: flex; align-items: center; gap: 0.4em; }
.mk-tv__tip-riga b { font-weight: 600; color: var(--inchiostro); }
.mk-tv__tip .mk-ico { width: 0.95em; height: 0.95em; color: var(--teal); }

/* Disponibili: una sola riga, velo menta che cresce con il numero */
.mk-tv__totali { background: #fbfdfd; }
.mk-tv__totali > span {
  display: grid; place-items: center;
  height: calc(2.2em / 0.7);
  font-size: 0.7em; font-weight: 600; color: var(--teal-scuro);
}
.mk-tv__totali > span:not(.mk-tv__sx) { background: rgba(0, 147, 163, calc(var(--v) * 0.018)); }
.mk-tv__totali > .mk-tv__sx { justify-items: end; padding-right: 1.1em; font-weight: 500; color: var(--grigio-tenue); border-right: 1px solid var(--mk-linea); }
.mk-tv__totali > span.is-zero { background: var(--mk-rosso-chiaro); color: var(--mk-rosso); }

/* Compatto: niente colonna di icone, barra dell'app ridotta. */
@container mk (max-width: 560px) {
  .mk-tv__rail { display: none; }
  .mk-tv__lavoro { padding: 0.5em 0.5em 0.6em; }
  .mk-tv__logo img.mk-tv__wordmark { width: 9.4em; }
  .mk-tv__caret { display: none; }
  .mk-tv__modulo { gap: 0.6em; padding: 0 0.8em; height: 2.8em; }
  .mk-tv__titolo { font-size: 0.95em; }
  .mk-tv__struttura { font-size: 0.72em; }
  .mk-tv__nav-data { padding-inline: 1em !important; }
  /* Il tooltip punta una barra fuori dai 7 giorni visibili. */
  .mk-tv__tip { display: none; }
}
.mk--compatto .mk-tv__rail { display: none; }
.mk--compatto .mk-tv__lavoro { padding: 0.5em 0.5em 0.6em; }
.mk--compatto .mk-tv__logo img.mk-tv__wordmark { width: 9.4em; }
.mk--compatto .mk-tv__caret { display: none; }
.mk--compatto .mk-tv__modulo { gap: 0.6em; padding: 0 0.8em; height: 2.8em; }
.mk--compatto .mk-tv__titolo { font-size: 0.95em; }
.mk--compatto .mk-tv__struttura { font-size: 0.72em; }
.mk--compatto .mk-tv__nav-data { padding-inline: 1em !important; }
.mk--compatto .mk-tv__tip { display: none; }

/* Pezzi condivisi con channel e Sales Hub (barra dei filtri e periodo). */
.mk-icona-btn--piccolo { width: 1.8em; height: 1.8em; border-radius: 0.5em; box-shadow: inset 0 0 0 1px var(--filetto); }
.mk-tb__barra {
  display: flex; align-items: center; gap: 0.7em;
  padding: 0.6em 1.2em;
  border-bottom: 1px solid var(--mk-linea);
}
.mk-tb__periodo { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.95em; color: var(--teal-profondo); white-space: nowrap; }

/* Card flottanti del tableau */
.mk-flot--tb-nuova { top: -1.6em; right: -2.2em; rotate: 1.5deg; }
.mk-flot--tb-oggi  { bottom: -2.2em; left: -3em; rotate: -1.5deg; padding: 0.85em 1.2em; }
.mk-kpi-mini small { display: block; font-size: 0.72em; color: var(--grigio); }
.mk-kpi-mini__valori { display: flex; gap: 1.3em; margin-top: 0.25em; }
.mk-kpi-mini__valori span { display: flex; flex-direction: column; font-size: 0.72em; color: var(--grigio); line-height: 1.2; }
.mk-kpi-mini__valori b { font-size: 2.1em; font-weight: 600; color: var(--teal-profondo); line-height: 1.1; }
.mk-arancio { color: var(--arancio-cupo) !important; }

@container mk (max-width: 560px) {
  .mk-flot--tb-nuova { top: auto; bottom: -2.2em; right: 0.8em; left: 0.8em; rotate: 0deg; }
}
.mk--compatto .mk-flot--tb-nuova { top: auto; bottom: -2.2em; right: 0.8em; left: 0.8em; rotate: 0deg; }

/* Ingresso: le barre si "disegnano" da sinistra, sfalsate per giorno di
   arrivo; il tooltip compare dopo. Senza JS è tutto già al suo posto. */
.mk--pronto.mk--tableau .mk-tv__p { clip-path: inset(0 100% 0 0); }
.mk--in-vista.mk--tableau .mk-tv__p {
  clip-path: inset(-0.4em -0.4em -0.4em -0.4em);
  transition: clip-path 0.7s cubic-bezier(0.3, 0.7, 0.2, 1);
  transition-delay: calc(var(--i) * 0.04s);
}
.mk--pronto.mk--tableau .mk-tv__tip { opacity: 0; transform: translateY(0.4em); }
.mk--in-vista.mk--tableau .mk-tv__tip {
  opacity: 1; transform: none;
  transition: opacity 0.4s ease, transform 0.5s ease;
  transition-delay: 1.2s;
}
@media (prefers-reduced-motion: reduce) {
  .mk--pronto.mk--tableau .mk-tv__p { clip-path: none; }
  .mk--pronto.mk--tableau .mk-tv__tip { opacity: 1; transform: none; }
}

/* ==========================================================================
   M2 — Channel manager: calendario di un canale (dal BMS vero, nello stile
   del sito)
   Prefisso .mk-cm; guscio .mk-tv come il tableau (barra dell'app opzionale,
   barra del modulo in teal profondo). A sinistra la scheda del canale e il
   menu, a destra una card bianca per tipologia con giorni, disponibilità,
   camera sul canale e tariffe.
   Mappatura dal BMS vero:
     verde Bootstrap pieno (camera aperta)     → verde salvia, numero bianco
     rosso pieno (chiusa / stop sales)         → rosa tenue a righe
     giallo (tariffa chiusa o mancante)        → senape chiara, prezzo in
                                                  --arancio-testo
     verdino della disponibilità               → velo menta; zero → rosa
     voce attiva blu del menu                  → --teal
   Larghezze di progetto: scheda 12,4em + 14 giorni da 3,3em (ampio), senza
   scheda (medio), 7 giorni e colonna delle etichette più stretta (compatto).
   ========================================================================== */

.mk--channel {
  --mk-l: 74.6; --mk-lm: 61.4; --mk-lc: 32;
  --cm-c: 3.3em;          /* larghezza di un giorno */
  --cm-g: 14;             /* giorni visibili */
  --cm-et: 9.6em;         /* colonna delle etichette */
  --cm-lato: 12.4em;      /* scheda del canale */
  --cm-verde: #79a566;    /* camera aperta sul canale */
}
.mk--channel.mk--senza-app { --mk-l: 72.2; --mk-lm: 59; }
@container mk (max-width: 560px) {
  .mk--channel .mk__scena { --cm-g: 7; --cm-et: 6.6em; }
}
.mk--channel.mk--compatto .mk__scena { --cm-g: 7; --cm-et: 6.6em; }

.mk-cm__main { flex: 1 1 auto; min-width: 0; padding: 0.8em 0.8em 0.9em; }
.mk-cm__collegati { display: inline-flex; align-items: center; gap: 0.5em; color: var(--menta-scura); font-size: 0.78em; font-weight: 600; letter-spacing: 0.03em; }
.mk-cm__collegati i { width: 0.55em; height: 0.55em; border-radius: 50%; background: #9fd18a; box-shadow: 0 0 0 0.22em rgba(159, 209, 138, 0.22); }

.mk-cm__corpo { display: flex; align-items: flex-start; gap: 0.8em; margin-top: 0.8em; }
.mk-cm__lato { flex: none; width: var(--cm-lato); display: flex; flex-direction: column; gap: 0.7em; }
.mk-cm__destra { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.7em; }

.mk-cm__scheda, .mk-cm__menu, .mk-cm__testa, .mk-cm__blocco {
  background: #fff;
  border-radius: 0.6em;
  box-shadow: 0 1px 3px rgba(0, 66, 73, 0.07), 0 0 0 1px rgba(0, 66, 73, 0.06);
}

/* Scheda del canale */
.mk-cm__scheda { display: flex; flex-direction: column; align-items: center; gap: 0.3em; padding: 1.2em 0.9em 1em; text-align: center; }
.mk-cm__logo {
  display: grid; place-items: center; place-content: center; grid-auto-flow: column;
  width: 3.4em; height: 3.4em; margin-bottom: 0.35em;
  border-radius: 0.6em;
  background: #1f4fa3; color: #fff;
  font-size: 1em; font-weight: 700; letter-spacing: -0.02em;
}
.mk-cm__logo { font-size: 1.25em; }
.mk-cm__logo i { font-style: normal; color: #7cc0f0; }
/* Variante property manager ('tema' => 'property'): la scheda è Airbnb, con
   il colore del distintivo di mk_canale('airbnb'). */
.mk-cm__logo--airbnb { background: #e5646a; }
.mk-cm__chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  margin-right: auto; padding: 0.2em 0.7em 0.2em 0.25em;
  border-radius: 1em; background: #fff;
  font-size: 0.78em; font-weight: 600; color: var(--teal-profondo);
}
.mk-cm__chip .mk-canale { font-size: 0.9em; }
.mk--cm-property .mk-tv__titolo { margin-right: 0.4em; }
.mk-cm__nome { font-size: 1.1em; font-weight: 600; color: var(--teal-profondo); }
.mk-cm__attivo { display: inline-flex; align-items: center; gap: 0.3em; margin-top: 0.15em; font-size: 0.78em; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--verde-scuro); }
.mk-cm__attivo .mk-ico { width: 1.05em; height: 1.05em; stroke-width: 2.8; color: #6f9a5e; }
.mk-cm__codice { margin-top: 0.35em; padding-top: 0.6em; border-top: 1px solid var(--mk-linea); width: 100%; font-size: 0.74em; color: var(--grigio); }
.mk-cm__codice b { color: var(--inchiostro); }

/* Menu corto */
.mk-cm__menu { display: flex; flex-direction: column; padding: 0.35em; }
.mk-cm__menu > span {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.62em 0.75em; border-radius: 0.42em;
  font-size: 0.8em; color: var(--inchiostro);
}
.mk-cm__menu .mk-ico { width: 1.05em; height: 1.05em; color: var(--grigio-tenue); }
.mk-cm__menu .is-attiva { background: var(--teal); color: #fff; font-weight: 600; }
.mk-cm__menu .is-attiva .mk-ico { color: #fff; }

/* Struttura e intervallo di date */
.mk-cm__testa { display: flex; align-items: center; gap: 1em; height: 3.3em; padding: 0 0.8em 0 1.1em; white-space: nowrap; }
.mk-cm__struttura { display: flex; align-items: baseline; gap: 0.5em; margin-right: auto; min-width: 0; }
.mk-cm__struttura b { font-size: 1.08em; font-weight: 600; color: var(--teal-profondo); }
.mk-cm__struttura small { font-size: 0.82em; color: var(--grigio); }
.mk-cm__nav > span { padding: 0.45em 0.85em; }
.mk-cm__nav-cal { border-inline: 1px solid var(--mk-linea); color: var(--teal); }
.mk-cm__nav-cal .mk-ico { width: 1em; height: 1em; vertical-align: -0.15em; }

/* Calendario: una card per tipologia */
.mk-cm__cal { display: flex; flex-direction: column; gap: 0.7em; }
.mk-cm__blocco { overflow: hidden; padding: 0 0.8em 0.1em; }
.mk-cm__r {
  display: grid;
  grid-template-columns: var(--cm-et) repeat(var(--cm-g), var(--cm-c));
  border-bottom: 1px solid #edf2f2;
}
.mk-cm__r:last-child { border-bottom: 0; }
.mk-cm__r--testa { grid-template-rows: 1.7em auto; border-bottom: 2px solid var(--menta-scura); }
.mk-cm__tipologia {
  grid-row: span 2;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.25em;
  padding-right: 0.6em;
  border-right: 1px solid var(--mk-linea);
  white-space: nowrap; overflow: hidden;
}
.mk-cm__tipologia .mk-ico { width: 1.15em; height: 1.15em; color: var(--teal); }
.mk-cm__tipologia b { font-size: 0.86em; font-weight: 600; color: var(--teal-profondo); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mk-cm__mese {
  grid-column: 2 / -1;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62em; font-weight: 700; letter-spacing: 0.1em; color: var(--teal-scuro);
}
.mk-cm__g {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: calc(2.4em / 0.6); padding-bottom: 0.2em;
  font-size: 0.6em; font-weight: 500; letter-spacing: 0.04em; color: var(--grigio-tenue); line-height: 1.35;
}
.mk-cm__g b { font-size: 1.4em; font-weight: 600; letter-spacing: 0; color: var(--inchiostro); }
.mk-cm__g.is-weekend { background: #f4f8f8; }

.mk-cm__et {
  display: flex; align-items: center; gap: 0.4em;
  min-width: 0; padding-right: 0.6em;
  border-right: 1px solid var(--mk-linea);
  font-size: 0.76em; color: var(--inchiostro);
  white-space: nowrap; overflow: hidden;
}
.mk-cm__c {
  display: grid; place-items: center;
  height: calc(2.3em / 0.74);
  font-size: 0.74em; color: var(--inchiostro);
  border-left: 1px solid #fff;
}

/* Disponibilità: velo menta, zero su rosa */
.mk-cm__r--disp .mk-cm__c { background: var(--teal-chiaro); color: var(--teal-scuro); font-weight: 600; }
.mk-cm__r--disp .mk-cm__c.is-zero { background: var(--mk-rosso-chiaro); color: var(--mk-rosso); }

/* Camera sul canale: celle piene */
.mk-cm__r--camera { border-bottom-color: var(--mk-linea); }
.mk-cm__r--camera .mk-cm__et { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.05em; line-height: 1.2; }
.mk-cm__r--camera .mk-cm__et b { font-size: 0.95em; font-weight: 700; color: var(--teal-profondo); }
.mk-cm__r--camera .mk-cm__et small { font-size: 0.78em; color: var(--grigio-tenue); }
.mk-cm__r--camera .mk-cm__c { height: calc(2.6em / 0.82); font-size: 0.82em; font-weight: 700; border-left-width: 2px; }
.mk-cm__c.is-aperta { background: var(--cm-verde); color: #fff; }
.mk-cm__r--camera .mk-cm__c.is-chiusa { background: repeating-linear-gradient(-45deg, #f3c4bd 0 0.35em, #f8d9d4 0.35em 0.7em); }
.mk-cm__c.is-agg { position: relative; z-index: 1; box-shadow: 0 0 0 0.14em #fff, 0 0 0 0.3em var(--teal-profondo); border-radius: 0.2em; }

/* Tariffe: prezzo del giorno, senape dove la tariffa è chiusa o manca */
.mk-cm__r--tariffa .mk-cm__et { justify-content: space-between; }
.mk-cm__rate { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25em; line-height: 1.15; color: var(--grigio-scuro); }
.mk-cm__pax {
  display: inline-flex; align-items: center; gap: 0.2em;
  padding: 0.08em 0.4em; border-radius: 0.25em;
  background: var(--grigio-chiaro); color: var(--grigio-scuro);
  font-style: normal; font-size: 0.8em; font-weight: 600;
}
.mk-cm__pax .mk-ico { width: 0.95em; height: 0.95em; }
.mk-cm__r--tariffa .mk-tv__giu { color: var(--grigio-tenue); }
.mk-cm__r--tariffa .mk-cm__c { height: calc(2.7em / 0.74); color: var(--grigio-scuro); }
.mk-cm__r--tariffa .mk-cm__c.is-chiusa,
.mk-cm__r--tariffa .mk-cm__c.is-vuota { background: #f7e7b9; color: var(--arancio-testo); border-left-color: #fbf1d6; }

/* Compatto: una tariffa per tipologia, testa più bassa */
@container mk (max-width: 560px) {
  .mk-cm__main { padding: 0.5em 0.5em 0.6em; }
  .mk-cm__corpo { margin-top: 0.5em; }
  .mk-cm__collegati { font-size: 0.7em; }
  .mk-cm__testa { height: 3em; padding: 0 0.5em 0 0.8em; }
  .mk-cm__blocco { padding: 0 0.5em 0.1em; }
  .mk-cm__r--seconda { display: none; }
  .mk-cm__pax { display: none; }
  .mk-cm__tipologia b, .mk-cm__r--camera .mk-cm__et b { white-space: normal; line-height: 1.15; }
}
.mk--compatto .mk-cm__main { padding: 0.5em 0.5em 0.6em; }
.mk--compatto .mk-cm__corpo { margin-top: 0.5em; }
.mk--compatto .mk-cm__collegati { font-size: 0.7em; }
.mk--compatto .mk-cm__testa { height: 3em; padding: 0 0.5em 0 0.8em; }
.mk--compatto .mk-cm__blocco { padding: 0 0.5em 0.1em; }
.mk--compatto .mk-cm__r--seconda { display: none; }
.mk--compatto .mk-cm__pax { display: none; }
.mk--compatto .mk-cm__tipologia b, .mk--compatto .mk-cm__r--camera .mk-cm__et b { white-space: normal; line-height: 1.15; }

/* Card flottanti */
.mk-flot--cm-ok    { bottom: -2.4em; left: -2.4em; rotate: -1.5deg; }
.mk-flot--cm-nuova { top: -1.6em; right: -2.2em; rotate: 1.5deg; }
@container mk (max-width: 820px) {
  .mk-flot--cm-ok    { left: -1em; }
  .mk-flot--cm-nuova { right: -1em; }
}
@container mk (max-width: 560px) {
  .mk-flot--cm-ok { top: auto; bottom: -2.2em; left: 0.8em; right: 0.8em; rotate: 0deg; }
}
.mk--compatto .mk-flot--cm-ok { top: auto; bottom: -2.2em; left: 0.8em; right: 0.8em; rotate: 0deg; }

/* Ingresso: le celle della camera si accendono da sinistra, la cella
   aggiornata pulsa una volta. Senza JS (o con movimento ridotto) è tutto fermo. */
@keyframes mk-cm-pulsa { 0%, 100% { box-shadow: 0 0 0 0.14em #fff, 0 0 0 0.3em var(--teal-profondo); } 50% { box-shadow: 0 0 0 0.14em #fff, 0 0 0 0.6em rgba(0, 66, 73, 0.25); } }
.mk--pronto.mk--channel .mk-cm__r--camera .mk-cm__c { opacity: 0; }
.mk--in-vista.mk--channel .mk-cm__r--camera .mk-cm__c { opacity: 1; transition: opacity 0.5s ease 0.3s; }
.mk--in-vista.mk--channel .mk-cm__c.is-agg { animation: mk-cm-pulsa 1.2s ease-in-out 1.1s 2; }
@media (prefers-reduced-motion: reduce) {
  .mk--pronto.mk--channel .mk-cm__r--camera .mk-cm__c { opacity: 1; }
}

/* ==========================================================================
   M3 — Sales Hub
   ========================================================================== */

.mk--saleshub { --mk-l: 69.3; --mk-lm: 50; --mk-lc: 30.3; --mk-sh-col: 15.2em; }
@container mk (max-width: 560px) {
  .mk--saleshub .mk__scena { --mk-sh-col: 13.6em; }
  .mk--saleshub .mk-rail { display: none; }
}
.mk--saleshub.mk--compatto .mk__scena { --mk-sh-col: 13.6em; }
.mk--saleshub.mk--compatto .mk-rail { display: none; }

.mk-sh__kpi { display: flex; flex-direction: column; line-height: 1.15; padding: 0 0.9em; border-left: 1px solid var(--mk-linea); white-space: nowrap; }
.mk-sh__kpi small { font-size: 0.68em; color: var(--grigio); }
.mk-sh__kpi b { font-size: 1em; color: var(--teal-profondo); }

.mk-sh {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--mk-sh-col);
  gap: 0.9em;
  align-items: start;
  padding: 1em 1.1em 1.3em;
  background: var(--mk-sfondo);
  min-height: 27em;
}
.mk-sh__col { display: flex; flex-direction: column; gap: 0.6em; }
.mk-sh__col-testa {
  display: flex; align-items: center; gap: 0.45em;
  padding: 0.1em 0.2em 0.3em;
  font-size: 0.82em; color: var(--teal-profondo);
  white-space: nowrap;
}
.mk-sh__col-testa small { margin-left: auto; color: var(--grigio); font-weight: 500; }
.mk-sh__punto { width: 0.6em; height: 0.6em; border-radius: 50%; }
.mk-sh__punto--arancio  { background: var(--arancio); }
.mk-sh__punto--teal     { background: var(--teal); }
.mk-sh__punto--profondo { background: var(--teal-profondo); }
.mk-sh__punto--verde    { background: #7fae62; }
.mk-sh__conta { padding: 0 0.45em; border-radius: var(--r-pillola); background: var(--carta); box-shadow: inset 0 0 0 1px var(--filetto); font-size: 0.9em; font-weight: 600; color: var(--grigio-scuro); }

.mk-sh__card {
  display: flex; flex-direction: column; gap: 0.6em;
  padding: 0.8em 0.85em 0.7em;
  background: var(--carta);
  border-radius: 0.8em;
  box-shadow: var(--mk-ombra-1), 0 0 0 1px rgba(0, 66, 73, 0.04);
}
.mk-sh__card.is-selezionata { box-shadow: 0 0 0 1.5px var(--arancio), 0 8px 20px -6px rgba(242, 140, 31, 0.35); }
.mk-sh__card-testa { display: flex; align-items: center; gap: 0.55em; min-width: 0; }
.mk-sh__nome { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mk-sh__nome b { font-size: 0.86em; color: var(--inchiostro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-sh__nome small { font-size: 0.72em; color: var(--grigio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-sh__card-piede { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
.mk-sh__card-piede .mk-pill { font-size: 0.7em; }
.mk-sh__valore { font-size: 0.95em; color: var(--teal-profondo); }
.mk-sh__nota {
  display: flex; align-items: center; gap: 0.4em;
  padding-top: 0.55em;
  border-top: 1px solid var(--mk-linea);
  font-size: 0.7em; color: var(--grigio);
  white-space: nowrap;
}
.mk-sh__nota .mk-ico { width: 1.05em; height: 1.05em; }
.mk-sh__nota--attesa { color: var(--mk-arancio-testo); }
.mk-sh__nota--ok { color: var(--verde-scuro); }
.mk-sh__nota--info { color: var(--teal-scuro); }

/* Composer dell'offerta (card flottante primaria) */
.mk-flot--sh-offerta {
  bottom: -3.2em; right: -3.4em;
  width: 22em; max-width: none;
  padding: 1.1em 1.15em 1.05em;
  display: block;
  white-space: normal;
  rotate: -1deg;
  border-radius: 1.1em;
}
.mk-off__testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8em; }
.mk-off__testa > span:first-child { display: flex; flex-direction: column; line-height: 1.3; }
.mk-off__testa b { font-size: 0.95em; color: var(--teal-profondo); }
.mk-off__testa small { font-size: 0.72em; color: var(--grigio); }
.mk-off__badge {
  display: inline-flex; align-items: center; gap: 0.3em; flex: none;
  padding: 0.25em 0.6em; border-radius: var(--r-pillola);
  background: var(--mk-arancio-chiaro); color: var(--mk-arancio-testo);
  font-size: 0.72em; font-weight: 600; white-space: nowrap;
}
.mk-off__badge .mk-ico { width: 1em; height: 1em; }
.mk-off__passi { display: flex; gap: 0.4em; margin-top: 0.85em !important; }
.mk-off__passi li {
  flex: 1 1 0;
  display: flex; align-items: center; gap: 0.35em;
  padding: 0.35em 0.5em;
  border-radius: 0.5em;
  background: var(--mk-sfondo);
  font-size: 0.68em; font-weight: 500; color: var(--grigio);
  white-space: nowrap;
}
.mk-off__passi li .mk-ico { width: 1em; height: 1em; stroke-width: 2.4; }
.mk-off__passi li.is-fatto { color: var(--verde-scuro); background: rgba(215, 236, 200, 0.5); }
.mk-off__passi li.is-corrente { color: var(--teal-profondo); background: var(--teal-chiaro); box-shadow: inset 0 0 0 1px var(--menta-scura); font-weight: 600; }
.mk-off__passi li i {
  display: grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%;
  background: var(--teal); color: #fff; font-style: normal; font-size: 0.85em;
}
.mk-off__righe { margin-top: 0.8em; }
.mk-off__righe div {
  display: flex; justify-content: space-between; align-items: center; gap: 0.8em;
  padding: 0.5em 0;
  border-bottom: 1px dashed var(--filetto);
  font-size: 0.8em;
}
.mk-off__righe span { display: flex; flex-direction: column; line-height: 1.3; color: var(--inchiostro); font-weight: 500; }
.mk-off__righe small { font-size: 0.85em; color: var(--grigio); font-weight: 400; }
.mk-off__righe b { color: var(--inchiostro); white-space: nowrap; }
.mk-off__totale { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.6em; }
.mk-off__totale span { font-size: 0.8em; color: var(--grigio); }
.mk-off__totale b { font-size: 1.35em; color: var(--teal-profondo); }
.mk-off__azioni { display: flex; gap: 0.5em; margin-top: 0.75em; }
.mk-off__azioni .mk-btn { min-width: 0; }
.mk-off__invia { flex: 1 1 auto; padding-block: 0.65em; }

.mk-flot--sh-ok { top: -1.5em; left: 30%; rotate: -1.5deg; }

/* Livello medio: la card sporgeva di 3,4em e usciva dalla finestra fra 820
   e 900px di pagina. Deve precedere il blocco compatto. */
@container mk (max-width: 820px) { .mk-flot--sh-offerta { right: -1.25em; } }
@container mk (max-width: 560px) {
  .mk-flot--sh-offerta { left: 1em; right: 1em; bottom: -2.5em; width: auto; rotate: 0deg; }
  .mk-sh { min-height: 0; padding-bottom: 12em; }
}
.mk--compatto .mk-flot--sh-offerta { left: 1em; right: 1em; bottom: -2.5em; width: auto; rotate: 0deg; }
.mk--compatto .mk-sh { min-height: 0; padding-bottom: 12em; }

/* Ingresso: il composer sale un po' più lentamente, la card selezionata pulsa una volta. */
@keyframes mk-pulsa { 0%, 100% { box-shadow: 0 0 0 1.5px var(--arancio), 0 8px 20px -6px rgba(242, 140, 31, 0.35); } 50% { box-shadow: 0 0 0 0.35em rgba(242, 140, 31, 0.25), 0 8px 20px -6px rgba(242, 140, 31, 0.35); } }
.mk--in-vista .mk-sh__card.is-selezionata { animation: mk-pulsa 1.4s ease-in-out 0.3s 2; }

/* ==========================================================================
   M5 — Punti cassa su tablet
   Ricalca la cassa vera dell'OMS (tema chiaro, font da interfaccia e non il
   Poppins del sito) con i colori del sito, come nel mockup di Gaia
   (8/10/2026): teal scuro per la categoria attiva, Contanti teal e Carta
   blu PMS, tessere neutre con l'arancio solo per lo Spritz nel conto.
   ========================================================================== */

.mk--cassa {
  --mk-l: 70; --mk-lm: 56; --mk-lc: 36;
  --mk-pos-conto: 18.5em; --mk-pos-col: 6;
  --pos-fondo: #edf2f2;
  --pos-linea: #dce7e8;
  --pos-tasto: #f4f6f5;
  --pos-testo: #0b3f46;
  --pos-grigio: #4f6468;
  --pos-blu: #2e3f6b;
  --pos-verde: #0f7580;
  --pos-rosso: #dc3b32;
  --pos-filetto-blu: #dce7e8;
  --pos-filetto-verde: #17919c;
  --pos-filetto-rosso: #e0a030;
  --pos-filetto-grigio: #dce7e8;
}
@container mk (max-width: 820px) {
  .mk--cassa .mk__scena { --mk-pos-col: 4; --mk-pos-conto: 17em; }
}
@container mk (max-width: 560px) {
  .mk--cassa .mk__scena { --mk-pos-conto: 13em; --mk-pos-col: 3; }
  .mk--cassa .mk-tablet { padding: 0.7em; border-radius: 1.6em; }
  .mk--cassa .mk-tablet__schermo { border-radius: 1em; }
}
.mk--cassa.mk--compatto .mk__scena { --mk-pos-conto: 13em; --mk-pos-col: 3; }
.mk--cassa.mk--compatto .mk-tablet { padding: 0.7em; border-radius: 1.6em; }
.mk--cassa.mk--compatto .mk-tablet__schermo { border-radius: 1em; }

.mk-pos {
  display: flex; flex-direction: column;
  background: var(--pos-fondo);
  color: var(--pos-testo);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0;
}
.mk-pos b { font-weight: 600; }

/* Pulsante "a contorno" della cassa: grigio chiarissimo, filo, icona e testo. */
.mk-pos__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  flex: none;
  height: 3em;
  padding: 0 0.95em;
  border-radius: 0.45em;
  background: var(--pos-tasto);
  box-shadow: inset 0 0 0 1px var(--pos-linea), 0 1px 1px rgba(16, 24, 40, 0.04);
  font-size: 0.68em; font-weight: 600;
  white-space: nowrap;
  color: var(--pos-testo);
}
.mk-pos__btn .mk-ico { width: 1.45em; height: 1.45em; }
.mk-pos__btn--ico { width: 3em; padding: 0; }

/* Barra alta */
.mk-pos__top {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.5em 0.65em;
  background: #fff;
  border-bottom: 1px solid var(--pos-linea);
}
.mk-pos__logo {
  display: grid; place-items: center; flex: none;
  width: 2.1em; height: 2.1em;
  border-radius: 0.45em;
  background: var(--pos-verde); color: #fff;
  font-size: 0.82em; font-weight: 700;
}
.mk-pos__punto { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.mk-pos__punto b { font-size: 0.74em; font-weight: 700; }
.mk-pos__punto small { font-size: 0.6em; color: var(--pos-grigio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-pos__online, .mk-pos__uscite {
  display: inline-flex; align-items: center; gap: 0.5em; flex: none;
  height: 2.6em; padding: 0 1em;
  border-radius: var(--r-pillola);
  font-size: 0.64em; font-weight: 600; white-space: nowrap;
}
.mk-pos__online { box-shadow: inset 0 0 0 1px var(--pos-linea); color: #15913f; margin-left: 0.4em; }
.mk-pos__online i { width: 0.65em; height: 0.65em; border-radius: 50%; background: var(--pos-verde); }
.mk-pos__uscite { box-shadow: inset 0 0 0 1.5px #ec8a84; color: var(--pos-rosso); }
.mk-pos__top .mk-pos__btn { height: 3.2em; }
.mk-pos__top .mk-pos__btn--ico { width: 3.2em; }

/* Corpo: catalogo a sinistra, conto a destra a tutta altezza */
.mk-pos__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--mk-pos-conto);
  min-height: 29em;
}
.mk-pos__catalogo { display: flex; flex-direction: column; min-width: 0; }

.mk-pos__categorie {
  display: flex; align-items: center; gap: 0.4em;
  padding: 0.55em 0.55em 0.5em;
  min-width: 0;
}
.mk-pos__cerca { background: #fff; }
.mk-pos__sep { flex: none; width: 1px; height: 1.6em; margin: 0 0.1em; background: var(--pos-linea); }
.mk-pos__cat {
  display: inline-flex; align-items: center; flex: none;
  height: 3em; padding: 0 1.1em;
  border-radius: 0.45em;
  background: var(--pos-tasto);
  box-shadow: inset 0 0 0 1px #e1e3e8;
  font-size: 0.68em; font-weight: 500; color: #3a3e46;
  white-space: nowrap;
}
.mk-pos__cat.is-attiva { background: var(--pos-testo); color: #fff; font-weight: 600; box-shadow: none; }
.mk-pos__pagine { flex: none; font-size: 0.6em; color: var(--pos-grigio); white-space: nowrap; }
.mk-pos__freccia { background: var(--pos-tasto); }
.mk-pos__freccia.is-spenta { color: #8b9099; }

.mk-pos__griglia {
  display: grid;
  grid-template-columns: repeat(var(--mk-pos-col), minmax(0, 1fr));
  gap: 0.45em;
  padding: 0 0.55em;
}
.mk-pos__prodotto {
  --filetto: var(--pos-filetto-blu);
  display: flex; flex-direction: column; justify-content: space-between;
  min-width: 0;
  height: 4.15em;
  padding: 0.5em 0.55em 0.42em 0.85em;
  border-radius: 0.45em;
  background: #fff;
  box-shadow: inset 0.26em 0 0 var(--filetto), 0 0 0 1px #dfe1e6, 0 1px 2px rgba(16, 24, 40, 0.05);
}
.mk-pos__prodotto--verde  { --filetto: var(--pos-filetto-verde); }
.mk-pos__prodotto--rosso  { --filetto: var(--pos-filetto-rosso); }
.mk-pos__prodotto--grigio { --filetto: var(--pos-filetto-grigio); }
.mk-pos__prodotto b {
  font-size: 0.66em; font-weight: 600; line-height: 1.2;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
.mk-pos__prezzo { font-size: 1em; font-weight: 600; line-height: 1; letter-spacing: -0.01em; }

.mk-pos__fondo {
  display: flex; align-items: center; gap: 1.6em;
  margin-top: auto;
  padding: 0.35em 0.55em 0.35em 0.9em;
  background: #fff;
  border-top: 1px solid var(--pos-linea);
}
.mk-pos__fondo > span:not(.mk-pos__btn):not(.mk-top__spazio) {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-size: 0.66em; font-weight: 500; color: #30343b; white-space: nowrap;
}
.mk-pos__fondo .mk-ico { width: 1.4em; height: 1.4em; }
.mk-pos__su { background: var(--pos-tasto); box-shadow: none; }
.mk-pos__catalogo .mk-pos__griglia { margin-bottom: 1.2em; }

/* Conto */
.mk-pos__conto {
  display: flex; flex-direction: column;
  min-width: 0;
  padding: 0.55em 0.6em 0.6em;
  background: #fafafb;
  border-left: 1px solid var(--pos-linea);
}
.mk-pos__azioni { display: flex; justify-content: flex-end; gap: 0.4em; margin-bottom: 0.5em; }
.mk-pos__azioni .mk-pos__btn { background: var(--pos-tasto); }

.mk-pos__riga {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 3.6em;
  align-items: center; gap: 0.5em;
  padding: 0.5em 0;
  border-bottom: 1px solid var(--pos-linea);
}
.mk-pos__nome { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mk-pos__nome b { font-size: 0.64em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-pos__nome small { font-size: 0.54em; color: var(--pos-grigio); white-space: nowrap; }
.mk-pos__qta { display: flex; align-items: center; gap: 0.45em; }
.mk-pos__qta i {
  display: grid; place-items: center;
  width: 2.05em; height: 2.05em;
  border-radius: 0.4em;
  background: var(--pos-tasto);
  box-shadow: inset 0 0 0 1px var(--pos-linea);
}
.mk-pos__qta .mk-ico { width: 1.05em; height: 1.05em; stroke-width: 2.2; }
.mk-pos__qta b { min-width: 1em; text-align: center; font-size: 0.74em; }
.mk-pos__parziale { font-size: 0.74em; text-align: right; white-space: nowrap; }

.mk-pos__totale {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5em;
  margin-top: auto;
  padding-top: 0.6em;
  border-top: 1px solid var(--pos-linea);
}
.mk-pos__totale span { font-size: 0.8em; color: var(--pos-grigio); padding-bottom: 0.15em; }
.mk-pos__totale b { font-size: 2.55em; font-weight: 700; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }

.mk-pos__paga { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35em; margin-top: 0.35em; }
.mk-pos__paga > span {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 3.5em;
  border-radius: 0.45em;
  color: #fff;
}
.mk-pos__paga > span > span { display: inline-flex; align-items: center; gap: 0.35em; font-size: 1.05em; font-weight: 700; line-height: 1.1; }
.mk-pos__paga .mk-ico { width: 1.15em; height: 1.15em; stroke-width: 2.1; }
.mk-pos__paga small { font-size: 0.6em; font-weight: 500; opacity: 0.85; }
.mk-pos__contanti { background: var(--pos-verde); }
.mk-pos__carta    { background: var(--pos-blu); }
.mk-pos__preconto { width: 100%; margin-top: 0.35em; height: 3.3em; background: #fff; }

/* Livello medio: meno tessere (3 file da 4) */
@container mk (max-width: 820px) {
  .mk--cassa .mk-pos__prodotto:nth-child(n+13) { display: none; }
  .mk--cassa .mk-pos__corpo { min-height: 24em; }
}

/* Compatto: 3 × 3 tessere, conto stretto, totale più piccolo */
@container mk (max-width: 560px) {
  .mk--cassa .mk-pos__prodotto:nth-child(n+10) { display: none; }
  .mk--cassa .mk-pos__corpo { min-height: 21em; }
  .mk--cassa .mk-pos__prodotto { height: 4.4em; }
  .mk--cassa .mk-pos__prodotto b { font-size: 0.72em; }
  .mk--cassa .mk-pos__totale b { font-size: 1.9em; }
  .mk--cassa .mk-pos__qta { gap: 0.3em; }
  .mk--cassa .mk-pos__riga { grid-template-columns: minmax(0, 1fr) auto 3em; gap: 0.35em; }
  .mk--cassa .mk-pos__nome small { display: none; }
  .mk--cassa .mk-pos__paga > span > span { font-size: 0.8em; }
  .mk--cassa .mk-pos__paga .mk-ico { display: none; }
  .mk--cassa .mk-pos__qta i { width: 1.75em; height: 1.75em; }
}
.mk--cassa.mk--compatto .mk-pos__prodotto:nth-child(n+10) { display: none; }
.mk--cassa.mk--compatto .mk-pos__corpo { min-height: 21em; }
.mk--cassa.mk--compatto .mk-pos__prodotto { height: 4.4em; }
.mk--cassa.mk--compatto .mk-pos__prodotto b { font-size: 0.72em; }
.mk--cassa.mk--compatto .mk-pos__totale b { font-size: 1.9em; }
.mk--cassa.mk--compatto .mk-pos__qta { gap: 0.3em; }
.mk--cassa.mk--compatto .mk-pos__riga { grid-template-columns: minmax(0, 1fr) auto 3em; gap: 0.35em; }
.mk--cassa.mk--compatto .mk-pos__nome small { display: none; }
.mk--cassa.mk--compatto .mk-pos__paga > span > span { font-size: 0.8em; }
.mk--cassa.mk--compatto .mk-pos__paga .mk-ico { display: none; }
.mk--cassa.mk--compatto .mk-pos__qta i { width: 1.75em; height: 1.75em; }

.mk-flot--pos-addebito { bottom: -2.4em; right: 4em; rotate: 1.5deg; }
.mk-flot--pos-stampa   { top: -1.8em; right: 5em; rotate: 1.5deg; }
@container mk (max-width: 560px) {
  .mk-flot--pos-addebito { bottom: -2.4em; left: 1em; right: 1em; rotate: 0deg; }
}
.mk--compatto .mk-flot--pos-addebito { bottom: -2.4em; left: 1em; right: 1em; rotate: 0deg; }

/* Ingresso: le tessere arrivano in sequenza, il totale si accende per ultimo. */
.mk--pronto.mk--cassa .mk-pos__prodotto { opacity: 0; transform: translateY(0.4em); }
.mk--in-vista.mk--cassa .mk-pos__prodotto {
  opacity: 1; transform: none;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--k, 0) * 0.025s);
}
.mk--pronto.mk--cassa .mk-pos__righe { opacity: 0; }
.mk--in-vista.mk--cassa .mk-pos__righe { opacity: 1; transition: opacity 0.5s ease 0.5s; }

/* ==========================================================================
   M8 — Mappa spiaggia
   Ricalca la mappa vera: barra teal scuro, menù chiaro, card bianca con la
   griglia di tessere quadrate. La griglia è più larga della card e si taglia
   a destra, come nell'app.
   ========================================================================== */

.mk--spiaggia {
  --mk-l: 72; --mk-lm: 56; --mk-lc: 27;
  --sp-barra: #0f4a5a;
  --sp-teal: #17a2b8;
  --sp-teal-sel: #5bbccd;
  --sp-fondo: #eef1f4;
  --sp-linea: #dfe4e8;
  --sp-testo: #1f2d36;
  --sp-icona: #50667a;
  --sp-corallo: #ef7563;
}
.mk--spiaggia.mk--senza-cornice { --mk-l: 52; --mk-lc: 27; }

.mk-sp__app {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  color: var(--sp-testo);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Barra alta */
.mk-sp__barra {
  display: flex; align-items: center; gap: 0.7em;
  height: 2.7em; padding: 0 0.9em 0 0.55em;
  background: var(--sp-barra);
  color: #fff;
}
.mk-sp__logo {
  display: grid; place-items: center; flex: none;
  width: 1.75em; height: 1.75em;
  border-radius: 0.3em;
  background: #e6f1f4; color: var(--sp-barra);
  font-size: 0.95em; font-weight: 800; line-height: 1;
}
.mk-sp__hamb { display: grid; place-items: center; color: #fff; }
.mk-sp__hamb .mk-ico { width: 1.4em; height: 1.4em; }
.mk-sp__briciole { display: flex; align-items: center; gap: 0.25em; min-width: 0; margin-left: 0.6em; }
.mk-sp__briciole > .mk-ico { width: 0.8em; height: 0.8em; stroke-width: 2.6; }
.mk-sp__bric {
  display: inline-flex; align-items: center; gap: 0.4em;
  height: 2.1em; padding: 0 0.75em;
  border-radius: 0.3em;
  background: #fff; color: var(--sp-testo);
  font-size: 0.66em; font-weight: 500; white-space: nowrap;
}
.mk-sp__bric .mk-ico { width: 1.1em; height: 1.1em; }
.mk-sp__bric.is-attuale { background: #cfd8dd; color: #33444f; }
.mk-sp__azione { position: relative; display: grid; place-items: center; width: 1.8em; height: 1.8em; }
.mk-sp__azione .mk-ico { width: 1.25em; height: 1.25em; }
.mk-sp__azione--badge i {
  position: absolute; top: -0.1em; right: -0.15em;
  display: grid; place-items: center;
  width: 1.45em; height: 1.45em; border-radius: 50%;
  background: #e5484d; color: #fff;
  box-shadow: 0 0 0 0.15em var(--sp-barra);
  font-style: normal; font-size: 0.5em; font-weight: 700;
}
.mk-sp__struttura {
  display: inline-flex; align-items: center; gap: 0.5em;
  margin-left: 0.3em; padding-left: 0.8em;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 0.74em; font-weight: 600; white-space: nowrap;
}
.mk-sp__struttura-logo {
  display: grid; place-items: center;
  width: 1.8em; height: 1.8em; border-radius: 50%;
  background: #1a8a9b; box-shadow: inset 0 0 0 0.12em rgba(255, 255, 255, 0.5);
  font-size: 0.7em; font-weight: 700;
}

.mk-sp__corpo { display: flex; min-height: 0; }

/* Menù laterale */
.mk-sp__menu {
  flex: none; width: 5.1em;
  display: flex; flex-direction: column; align-items: stretch; gap: 0.15em;
  padding: 0.6em 0.35em 0.8em;
  background: #fff;
  border-right: 1px solid var(--sp-linea);
}
.mk-sp__sezione {
  margin-bottom: 0.35em; padding: 0.3em 0;
  border-radius: 0.25em;
  background: #8d989f; color: #fff;
  text-align: center; font-size: 0.56em; font-weight: 500;
}
.mk-sp__voce {
  display: flex; flex-direction: column; align-items: center; gap: 0.15em;
  padding: 0.25em 0.1em 0.2em;
  border-radius: 0.3em;
  color: var(--sp-icona);
}
.mk-sp__voce .mk-ico { width: 1.15em; height: 1.15em; stroke-width: 2; }
.mk-sp__voce small { font-size: 0.42em; font-weight: 500; color: #2e3d47; text-align: center; white-space: nowrap; }
.mk-sp__voce.is-attiva { background: #1f6f87; color: #fff; }
.mk-sp__voce.is-attiva small { color: #fff; }
.mk-sp__sep { display: block; height: 1px; margin: 0.15em 0.5em; background: var(--sp-linea); }

.mk-sp__main {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  padding: 1em 1em 0;
  background: var(--sp-fondo);
}

/* La card della mappa */
.mk-sp__card {
  min-width: 0;
  margin-bottom: 1.2em;
  padding: 0.8em 0.9em 0.7em;
  border-radius: 0.5em;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 40, 50, 0.08), 0 0 0 1px rgba(20, 40, 50, 0.04);
  color: var(--sp-testo);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.mk--senza-cornice .mk-sp__card { border-radius: 0.9em; box-shadow: var(--mk-ombra-3); }

.mk-sp__testa { display: flex; align-items: flex-start; gap: 0.8em; }
.mk-sp__filtri { display: flex; flex-direction: column; gap: 0.6em; min-width: 0; }
.mk-sp__sala {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  width: 23em; max-width: 100%;
  height: 2.9em; padding: 0 0.9em;
  margin-top: 0.45em;
  border: 1px solid #9aa6ae;
  border-radius: 0.3em;
  font-size: 0.6em; font-weight: 600; white-space: nowrap;
}
.mk-sp__sala small {
  position: absolute; top: -0.75em; left: 0.7em;
  padding: 0 0.35em;
  background: #fff;
  font-size: 0.82em; font-weight: 500; color: #3d4b55; line-height: 1.3;
}
.mk-sp__sala .mk-ico { width: 1.1em; height: 1.1em; stroke-width: 2.6; }
.mk-sp__fasce-tit { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.74em; font-weight: 700; white-space: nowrap; }
.mk-sp__fasce-tit i { display: grid; place-items: center; width: 1.2em; height: 1.2em; border-radius: 50%; background: #9aa6ae; color: #fff; }
.mk-sp__fasce-tit .mk-ico { width: 0.85em; height: 0.85em; stroke-width: 2.4; }

.mk-sp__comandi {
  display: grid; grid-template-columns: auto auto auto; gap: 0.5em 0.55em;
  justify-items: end; align-items: center;
}
.mk-sp__date {
  display: flex; align-items: center;
  height: 2.2em;
  border: 1px solid #c5ced4; border-radius: 0.35em;
  overflow: hidden;
}
.mk-sp__date > span { padding: 0 1.4em; font-size: 0.58em; font-weight: 500; white-space: nowrap; }
.mk-sp__date i { display: grid; place-items: center; align-self: stretch; width: 2.3em; background: #45c0cf; color: #fff; }
.mk-sp__date .mk-ico { width: 1.15em; height: 1.15em; }
.mk-sp__tasto {
  display: grid; place-items: center;
  width: 2.2em; height: 2.2em;
  border-radius: 0.35em;
  background: #e7ebee; color: #2f3f4a;
}
.mk-sp__tasto .mk-ico { width: 1.25em; height: 1.25em; }
.mk-sp__analytics {
  grid-column: 1 / -1;
  padding: 0.3em 0.9em;
  border-radius: 0.2em;
  background: #45c0cf; color: #fff;
  font-size: 0.52em; font-weight: 600;
}

.mk-sp__fasce {
  display: flex; gap: 0.8em;
  margin-top: 0.5em; padding: 0.55em 1.2em;
  border: 1px solid var(--sp-linea);
  border-radius: 0.2em;
}
.mk-sp__fasce span {
  padding: 0.7em 1.5em;
  border-radius: 0.15em;
  background: var(--sp-teal); color: #fff;
  font-size: 0.56em; font-weight: 600; white-space: nowrap;
}

/* Griglia dei posti: più larga della card, si taglia a destra. */
.mk-sp__griglia { position: relative; margin-top: 0.45em; overflow: hidden; }
.mk-sp__righe { display: flex; flex-direction: column; gap: 0.5em; width: max-content; padding: 0.1em 0 0.9em 0.45em; }
.mk-sp__fila { display: flex; gap: 0.78em; }
.mk-sp__posto {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.3em;
  width: 3.4em; height: 3.4em;
  padding-top: 0.45em;
  border-radius: 0.15em;
  background: #f4f5f6;
  box-shadow: 0 0 0 1px #dde2e6, 0 0.1em 0.18em rgba(20, 40, 50, 0.12);
}
.mk-sp__posto b { font-size: 0.68em; font-weight: 700; line-height: 1; }
.mk-sp__posto.is-vuoto { background: none; box-shadow: none; }
.mk-sp__corsia { flex: none; width: 3.4em; }

/* Ombrellone visto dall'alto: spicchi corallo e pomello chiaro. */
.mk-sp__omb {
  display: block; flex: none;
  width: 1.05em; height: 1.05em;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fde3dd 0 0.08em, transparent 0.1em),
    repeating-conic-gradient(from 0deg, var(--sp-corallo) 0 30deg, #f59c8c 30deg 60deg);
  box-shadow: 0 0 0 0.06em rgba(214, 90, 70, 0.35);
}

.mk-sp__posto.is-selezionato { background: var(--sp-teal-sel); box-shadow: 0 0 0 1px #3ea7ba, 0 0.15em 0.3em rgba(20, 90, 110, 0.3); z-index: 1; }
.mk-sp__posto.is-selezionato b { color: #fff; }
.mk-sp__posto small {
  position: absolute; left: 0.25em; right: 0.25em; bottom: 0.3em;
  padding: 0.15em 0.2em;
  border-radius: 0.15em;
  background: #0f6c80; color: #fff;
  font-size: 0.42em; font-weight: 700; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mk-sp__scorri { display: block; height: 0.55em; margin: 0 0 0.1em; border-top: 1px solid var(--sp-linea); padding-top: 0.12em; }
.mk-sp__scorri i { display: block; width: 86%; height: 0.32em; margin-left: 0.2em; border-radius: 1em; background: #b9c2c8; }

/* Piede dell'app */
.mk-sp__piede {
  display: flex; align-items: center; gap: 1.6em;
  margin: auto -1em 0; padding: 0.7em 1em 0.7em 0.6em;
  background: #fff;
  border-top: 1px solid var(--sp-linea);
  font-size: 0.56em; color: #7a8790;
}
.mk-sp__piede > span:first-child { color: #2e3d47; }
.mk-sp__assistenza {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.55em 1.1em;
  border-radius: var(--r-pillola);
  background: var(--sp-barra); color: #fff;
  font-weight: 600;
  margin-block: -0.4em;
}
.mk-sp__assistenza .mk-ico { width: 1.2em; height: 1.2em; }

/* Livello medio: niente ingranaggio, testo un filo più grande in proporzione */
@container mk (max-width: 820px) {
  .mk--spiaggia .mk-sp__menu { width: 4.6em; }
}

/* Compatto: card sola, comandi a destra nascosti, tessere più grandi */
@container mk (max-width: 560px) {
  .mk--spiaggia .mk-sp__main { padding: 0.7em 0.7em 0; }
  .mk--spiaggia .mk-sp__piede { margin-inline: -0.7em; }
  .mk--spiaggia .mk-sp__sala { width: 21em; }
  .mk--spiaggia .mk-sp__fasce { padding: 0.5em 0.7em; gap: 0.5em; }
  .mk--spiaggia .mk-sp__fila { gap: 0.6em; }
}
.mk--spiaggia.mk--compatto .mk-sp__main { padding: 0.7em 0.7em 0; }
.mk--spiaggia.mk--compatto .mk-sp__piede { margin-inline: -0.7em; }
.mk--spiaggia.mk--compatto .mk-sp__sala { width: 21em; }
.mk--spiaggia.mk--compatto .mk-sp__fasce { padding: 0.5em 0.7em; gap: 0.5em; }
.mk--spiaggia.mk--compatto .mk-sp__fila { gap: 0.6em; }

/* Card flottanti */
.mk-flot--sp-assegnato { bottom: 4.5em; left: 47%; rotate: 1.5deg; }
.mk-flot--sp-ordine    { bottom: -1.6em; left: 22%; rotate: -1.5deg; }
.mk--senza-cornice .mk-flot--sp-assegnato { top: 42%; bottom: auto; left: auto; right: -2.5em; }
.mk--senza-cornice .mk-flot--sp-ordine { bottom: -2em; left: 10%; }
@container mk (max-width: 560px) {
  /* Anche senza cornice: la regola sopra è più specifica e, lasciando il
     top, stirava la card su tutta l'altezza. */
  .mk-flot--sp-assegnato,
  .mk--senza-cornice .mk-flot--sp-assegnato { top: auto; bottom: -2.2em; left: 0.8em; right: 0.8em; rotate: 0deg; }
}
.mk--compatto .mk-flot--sp-assegnato,
.mk--compatto.mk--senza-cornice .mk-flot--sp-assegnato { top: auto; bottom: -2.2em; left: 0.8em; right: 0.8em; rotate: 0deg; }

/* Ingresso: le tessere arrivano per file, quella selezionata pulsa. */
@keyframes mk-alone { 0% { box-shadow: 0 0 0 1px #3ea7ba, 0 0 0 0 rgba(23, 162, 184, 0.5); } 100% { box-shadow: 0 0 0 1px #3ea7ba, 0 0 0 0.9em rgba(23, 162, 184, 0); } }
.mk--in-vista .mk-sp__posto.is-selezionato { animation: mk-alone 1.8s ease-out 0.9s 3; }
.mk--pronto.mk--spiaggia .mk-sp__posto:not(.is-vuoto) { opacity: 0; transform: scale(0.85); }
.mk--in-vista.mk--spiaggia .mk-sp__posto:not(.is-vuoto) {
  opacity: 1; transform: none;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.3, 1.3, 0.5, 1);
  transition-delay: calc(var(--d, 0) * 1s);
}

/* ==========================================================================
   M6 — Dashboard KPI
   Tinte della ciambella in ordine fisso, verificate (CVD e luminosità) con lo
   script della skill dataviz: teal, arancio, blu, verde, viola.
   ========================================================================== */

.mk--dashboard { --mk-l: 68; --mk-lm: 58; --mk-lc: 30; }
@container mk (max-width: 560px) {
  .mk--dashboard .mk-rail { display: none; }
  .mk--dashboard .mk-db__kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk--dashboard .mk-db__righe { grid-template-columns: minmax(0, 1fr); }
}
.mk--dashboard.mk--compatto .mk-rail { display: none; }
.mk--dashboard.mk--compatto .mk-db__kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk--dashboard.mk--compatto .mk-db__righe { grid-template-columns: minmax(0, 1fr); }

.mk-db { display: flex; flex-direction: column; gap: 0.9em; padding: 1em 1.1em 1.2em; background: var(--mk-sfondo); }
.mk-db__kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8em; }
.mk-db__tile, .mk-db__pannello {
  position: relative;
  padding: 0.85em 0.95em;
  background: var(--carta);
  border-radius: 0.85em;
  box-shadow: var(--mk-ombra-1), 0 0 0 1px rgba(0, 66, 73, 0.04);
  min-width: 0;
}
.mk-db__tile { display: flex; flex-direction: column; gap: 0.15em; }
.mk-db__tile small { font-size: 0.72em; color: var(--grigio); }
.mk-db__tile > b { font-size: 1.65em; font-weight: 600; color: var(--teal-profondo); letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap; }
.mk-db__delta { display: flex; align-items: center; gap: 0.45em; font-size: 0.68em; color: var(--grigio); white-space: nowrap; }
.mk-db__delta .mk-pill { font-size: 1em; padding-inline: 0.5em; }
.mk-db__delta .mk-ico { width: 1em; height: 1em; }
.mk-db__barra { display: block; height: 0.3em; margin-top: 0.45em; border-radius: 1em; background: linear-gradient(90deg, var(--teal) calc(var(--v) * 1%), var(--menta) 0); }

.mk-db__righe { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 0.8em; }
.mk-db__testa { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; margin-bottom: 0.5em; white-space: nowrap; }
.mk-db__testa b { font-size: 0.85em; color: var(--teal-profondo); }
.mk-db__testa small { font-size: 0.7em; color: var(--grigio); }
.mk-db__legenda { display: flex; gap: 0.9em; font-size: 0.7em; color: var(--grigio); }
.mk-db__legenda span { display: inline-flex; align-items: center; gap: 0.4em; }
.mk-db__l-anno { width: 1.2em; height: 0.3em; border-radius: 1em; background: var(--teal); }
.mk-db__l-prec { width: 1.2em; height: 0; border-top: 0.16em dashed #8a9a9c; }

.mk .mk-db__svg { display: block; width: 100%; height: auto; overflow: visible; }
.mk-db__griglia { stroke: var(--mk-linea); stroke-width: 1; }
.mk-db__base { stroke: var(--filetto); stroke-width: 1; }
.mk-db__asse { font-family: var(--font); font-size: 9px; fill: var(--grigio); }
.mk-db__asse.is-attivo { fill: var(--teal-profondo); font-weight: 600; }
.mk-db__area { fill: url(#mk-db-sfumatura); fill: rgba(0, 147, 163, 0.12); }
.mk-db__anno { fill: none; stroke: var(--teal); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.mk-db__prec { fill: none; stroke: #8a9a9c; stroke-width: 1.6; stroke-dasharray: 4 3.5; stroke-linejoin: round; }
.mk-db__guida { stroke: var(--teal); stroke-width: 1; stroke-dasharray: 2 2.5; opacity: 0.6; }
.mk-db__punto { fill: var(--carta); stroke: var(--teal); stroke-width: 2.2; }
.mk-db__etichetta rect { fill: var(--teal-profondo); }
.mk-db__etichetta text { font-family: var(--font); font-size: 9px; font-weight: 600; fill: #fff; }

.mk-db__pannello--prov { display: flex; flex-direction: column; }
.mk-db__ciambella { position: relative; width: 8.2em; margin: 0.2em auto 0.7em; }
.mk .mk-db__ciambella svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.mk-db__seg { fill: none; stroke-width: 13; }
.mk-db__seg--1, .mk-db__seg-l--1 { stroke: #0093a3; background: #0093a3; }
.mk-db__seg--2, .mk-db__seg-l--2 { stroke: #e8821a; background: #e8821a; }
.mk-db__seg--3, .mk-db__seg-l--3 { stroke: #1f4fa3; background: #1f4fa3; }
.mk-db__seg--4, .mk-db__seg-l--4 { stroke: #6aa84f; background: #6aa84f; }
.mk-db__seg--5, .mk-db__seg-l--5 { stroke: #9a6fb0; background: #9a6fb0; }
.mk-db__centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.mk-db__centro b { font-size: 1.3em; color: var(--teal-profondo); }
.mk-db__centro small { font-size: 0.66em; color: var(--grigio); }
.mk-db__voci { display: flex; flex-direction: column; gap: 0.3em; }
.mk-db__voci li { display: flex; align-items: center; gap: 0.5em; font-size: 0.72em; color: var(--inchiostro); }
.mk-db__voci li b { margin-left: auto; color: var(--inchiostro); }
.mk-db__seg-l { width: 0.75em; height: 0.75em; border-radius: 0.2em; flex: none; }

.mk-db__tr {
  display: grid; grid-template-columns: 2.2fr 1fr 0.9fr 1fr 1fr; gap: 0.6em; align-items: center;
  padding: 0.45em 0.2em;
  border-top: 1px solid var(--mk-linea);
  font-size: 0.74em; color: var(--grigio-scuro);
  white-space: nowrap;
}
.mk-db__tr b { color: var(--inchiostro); }
.mk-db__tr--testa { border-top: 0; padding-top: 0; font-size: 0.66em; color: var(--grigio); text-transform: uppercase; letter-spacing: 0.06em; }
.mk-db__tr > span:nth-child(4) { text-align: right; font-weight: 600; color: var(--inchiostro); }
.mk-db__tr--testa > span:nth-child(4) { color: var(--grigio); font-weight: 400; }
.mk-db__tr .mk-pill { font-size: 0.9em; }

.mk-flot--db-agosto { top: -1.7em; right: 7%; rotate: 1.5deg; }
@container mk (max-width: 560px) {
  .mk-flot--db-agosto { top: auto; bottom: -2.2em; left: 0.8em; right: 0.8em; rotate: 0deg; }
  .mk--dashboard .mk-db { padding-bottom: 2em; }
  .mk--dashboard .mk-db__asse { font-size: 13px; }
  .mk--dashboard .mk-db__etichetta text { font-size: 11.5px; }
}
.mk--compatto .mk-flot--db-agosto { top: auto; bottom: -2.2em; left: 0.8em; right: 0.8em; rotate: 0deg; }

/* Ingresso: la linea si disegna, la ciambella si chiude. */
.mk--pronto.mk--dashboard .mk-db__anno { stroke-dasharray: 600; stroke-dashoffset: 600; }
.mk--in-vista.mk--dashboard .mk-db__anno { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(0.3, 0.6, 0.2, 1) 0.2s; }
.mk--pronto.mk--dashboard .mk-db__area { opacity: 0; }
.mk--in-vista.mk--dashboard .mk-db__area { opacity: 1; transition: opacity 0.6s ease 0.8s; }

/* ==========================================================================
   M4 — Booking Automation
   ========================================================================== */

.mk--automation { --mk-l: 66; --mk-lm: 47; --mk-lc: 24; }
@container mk (max-width: 560px) {
  .mk--automation .mk-rail { display: none; }
}
.mk--automation.mk--compatto .mk-rail { display: none; }

.mk-au { display: flex; align-items: stretch; min-height: 31em; }
.mk-au__elenco {
  flex: none; width: 15.5em;
  display: flex; flex-direction: column; gap: 0.35em;
  padding: 0.9em 0.7em;
  border-right: 1px solid var(--mk-linea);
}
.mk-au__voce {
  display: flex; align-items: center; gap: 0.55em;
  padding: 0.55em 0.6em;
  border-radius: 0.65em;
}
.mk-au__voce.is-selezionata { background: var(--teal-chiaro); box-shadow: inset 0 0 0 1px var(--menta-scura); }
.mk-au__voce-ico { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; border-radius: 0.5em; background: var(--mk-sfondo); color: var(--teal-scuro); }
.mk-au__voce.is-selezionata .mk-au__voce-ico { background: var(--teal); color: #fff; }
.mk-au__voce-ico .mk-ico { width: 1em; height: 1em; }
.mk-au__voce-testo { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; flex: 1 1 auto; }
.mk-au__voce-testo b { font-size: 0.78em; color: var(--inchiostro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-au__voce-testo small { font-size: 0.66em; color: var(--grigio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-au__interruttore { position: relative; flex: none; width: 1.9em; height: 1.1em; border-radius: 1em; background: var(--grigio-chiaro); }
.mk-au__interruttore::after { content: ""; position: absolute; top: 0.15em; left: 0.15em; width: 0.8em; height: 0.8em; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.mk-au__interruttore.is-on { background: var(--teal); }
.mk-au__interruttore.is-on::after { left: auto; right: 0.15em; }

.mk-au__tela {
  flex: 1 1 auto; min-width: 0;
  padding: 0.9em 1.2em 1.4em;
  background:
    radial-gradient(circle, #d3dfdf 0.07em, transparent 0.09em) 0 0 / 1.1em 1.1em,
    var(--mk-sfondo);
}
.mk-au__tela-testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1em; }
.mk-au__tela-testa b { font-size: 0.95em; color: var(--teal-profondo); }
.mk-au__flusso { display: flex; flex-direction: column; align-items: center; }

.mk-au__nodo {
  --tinta: var(--teal-chiaro); --tinta-ico: var(--teal);
  position: relative;
  display: flex; align-items: center; gap: 0.7em;
  width: 21em; max-width: 100%;
  padding: 0.7em 0.85em;
  background: var(--carta);
  border-radius: 0.85em;
  box-shadow: var(--mk-ombra-1), 0 0 0 1px rgba(0, 66, 73, 0.05);
}
.mk-au__nodo--trigger { --tinta: var(--teal-profondo); --tinta-ico: #fff; box-shadow: 0 0 0 1.5px var(--teal-profondo), var(--mk-ombra-2); }
.mk-au__nodo--cond    { --tinta: var(--mk-arancio-chiaro); --tinta-ico: var(--arancio-cupo); }
.mk-au__nodo--attesa  { --tinta: var(--grigio-chiaro); --tinta-ico: var(--grigio-scuro); width: 16em; }
.mk-au__nodo--azione  { --tinta: var(--teal-chiaro); --tinta-ico: var(--teal); }
.mk-au__nodo-ico { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: 0.65em; background: var(--tinta); color: var(--tinta-ico); }
.mk-au__nodo-testo { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mk-au__nodo-testo small { font-size: 0.64em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grigio); }
.mk-au__nodo-testo b { font-size: 0.84em; color: var(--inchiostro); }
.mk-au__nodo-testo em { font-style: normal; font-size: 0.7em; color: var(--grigio); }
.mk-au__conta {
  margin-left: auto; padding: 0.15em 0.55em; border-radius: var(--r-pillola);
  background: var(--verde-chiaro); color: var(--verde-scuro); font-size: 0.7em; font-weight: 700;
}

.mk-au__filo { position: relative; width: 2px; height: 1.5em; background: var(--menta-scura); }
.mk-au__filo::after {       /* punta della freccia */
  content: ""; position: absolute; bottom: -0.1em; left: 50%;
  width: 0.45em; height: 0.45em; margin-left: -0.225em;
  border-right: 2px solid var(--menta-scura); border-bottom: 2px solid var(--menta-scura);
  transform: rotate(45deg);
}
.mk-au__filo i { position: absolute; left: 50%; top: 0; width: 0.5em; height: 0.5em; margin-left: -0.25em; border-radius: 50%; background: var(--teal); opacity: 0; }

/* Anteprima email */
.mk-au__anteprima {
  flex: none; width: 17em;
  display: flex; flex-direction: column; gap: 0.7em;
  padding: 0.9em 1em;
  border-left: 1px solid var(--mk-linea);
}
.mk-au__anteprima-tit { font-size: 0.68em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grigio); }
.mk-au__email { padding: 0.85em; border-radius: 0.8em; background: var(--carta); box-shadow: var(--mk-ombra-2), 0 0 0 1px var(--mk-linea); }
.mk-au__email-testa { display: flex; align-items: center; gap: 0.55em; padding-bottom: 0.6em; border-bottom: 1px solid var(--mk-linea); }
.mk-au__email-logo { display: grid; place-items: center; flex: none; width: 2em; height: 2em; border-radius: 50%; background: var(--verde-chiaro); color: var(--verde-scuro); font-size: 0.72em; font-weight: 700; }
.mk-au__email-testa > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.mk-au__email-testa b { font-size: 0.76em; color: var(--inchiostro); }
.mk-au__email-testa small { font-size: 0.64em; color: var(--grigio); }
.mk-au__email-testo { margin-top: 0.6em !important; font-size: 0.72em; line-height: 1.5; color: var(--grigio-scuro); }
.mk-au__var { padding: 0 0.3em; border-radius: 0.3em; background: var(--mk-arancio-chiaro); color: var(--mk-arancio-testo); font-weight: 600; }
.mk-au__linea { display: block; height: 0.42em; margin-top: 0.5em; border-radius: 1em; background: var(--grigio-chiaro); }
.mk-au__linea--corta { width: 60%; }
.mk-au__email-btn { width: 100%; margin-top: 0.8em; padding-block: 0.6em; font-size: 0.74em; }
.mk-au__stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; margin-top: auto; }
.mk-au__stat span { display: flex; flex-direction: column; padding: 0.5em; border-radius: 0.6em; background: var(--mk-sfondo); font-size: 0.66em; color: var(--grigio); line-height: 1.2; }
.mk-au__stat b { font-size: 1.5em; color: var(--teal-profondo); }

.mk-flot--au-checkin { bottom: -2.3em; right: 6%; rotate: 1.5deg; }
.mk-flot--au-inviate { top: -1.7em; left: 22%; rotate: -1.5deg; }
@container mk (max-width: 560px) {
  .mk-flot--au-checkin { bottom: -2.2em; left: 0.8em; right: 0.8em; rotate: 0deg; }
  .mk--automation .mk-au { min-height: 0; }
  .mk--automation .mk-au__tela { padding-bottom: 2.6em; }
}
.mk--compatto .mk-flot--au-checkin { bottom: -2.2em; left: 0.8em; right: 0.8em; rotate: 0deg; }

/* I nodi si accendono in sequenza e un punto scende lungo i fili (ciclo di 7 s). */
@keyframes mk-nodo { 0%, 4% { box-shadow: var(--mk-ombra-1), 0 0 0 1px rgba(0, 66, 73, 0.05); } 8%, 16% { box-shadow: 0 0 0 2px var(--teal), 0 0 0 0.45em rgba(0, 147, 163, 0.15); } 24%, 100% { box-shadow: var(--mk-ombra-1), 0 0 0 1px rgba(0, 66, 73, 0.05); } }
@keyframes mk-filo { 0% { top: 0; opacity: 0; } 3% { opacity: 1; } 10% { top: calc(100% - 0.5em); opacity: 1; } 12%, 100% { top: calc(100% - 0.5em); opacity: 0; } }
.mk--in-vista .mk-au__nodo:not(.mk-au__nodo--trigger) { animation: mk-nodo 7s ease-in-out infinite; animation-delay: calc(0.4s + var(--k) * 1.1s); }
.mk--in-vista .mk-au__filo i { animation: mk-filo 7s linear infinite; animation-delay: calc(var(--k) * 1.1s - 0.3s); }

/* ==========================================================================
   M7 — Self order da ombrellone (smartphone)
   Ricalca il self order vero: crema, teal, card bianche arrotondate.
   Il telefono ha un tetto di scala: oltre ~480 px di contenitore resta centrato.
   ========================================================================== */

.mk--selforder .mk__scena {
  font-size: min(calc(100cqi / 34), 14px);
  width: 34em; max-width: 100%;
  margin-inline: auto;
  padding: 0 0 0 3em;
}
@container mk (max-width: 480px) {
  .mk--selforder .mk__scena { font-size: calc(100cqi / 25); width: 25em; padding: 0 1.5em; }
}
.mk--selforder.mk--compatto .mk__scena { font-size: min(calc(100cqi / 25), 14px); width: 25em; padding: 0 1.5em; }

/* Colori del sito, come il saltafila del mockup di Gaia (8/10/2026): teal
   scuro per pulsanti e prezzi, testo teal profondo, crema caldo. */
.mk--selforder {
  --so-crema: #fffbf4;
  --so-linea: #eee6d8;
  --so-teal: #0f7580;
  --so-teal-chiaro: #e3f4f5;
  --so-teal-testo: #0f7580;
  --so-testo: #0b3f46;
  --so-grigio: #4f6468;
}
.mk--so-bar {
  --so-crema: #fbf7f2;
  --so-linea: #eadccb;
  --so-teal: #c8682f;
  --so-teal-chiaro: #f6e6da;
  --so-teal-testo: #b65a24;
  --so-marrone: #523424;
}

.mk-so__telefono { width: 22em; }
.mk-so__telefono .mk-telefono__schermo { background: var(--so-crema); }
.mk-so__telefono .mk-stato-tel { color: var(--so-testo); }

.mk-so {
  position: relative;
  display: flex; flex-direction: column;
  height: 41em;
  overflow: hidden;
  color: var(--so-testo);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.mk-so b { font-weight: 700; }

/* Testata: logo, lingua, carrello */
.mk-so__testa {
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.35em 0.85em 0.6em;
  border-bottom: 1px solid var(--so-linea);
}
.mk-so__logo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  width: 1.85em; height: 1.85em;
  border-radius: 0.4em;
  background: var(--so-teal); color: #fff;
  line-height: 0.95;
}
.mk-so__logo b { font-size: 0.72em; font-weight: 800; letter-spacing: -0.04em; }
.mk-so__logo small { font-size: 0.42em; font-weight: 800; letter-spacing: 0.02em; }
.mk-so__lingua {
  display: grid; place-items: center;
  height: 1.85em; padding: 0 0.85em;
  border-radius: var(--r-pillola);
  background: #fff;
  box-shadow: inset 0 0 0 1px #e2d8cc;
  font-size: 0.7em; font-weight: 700;
}
.mk-so__carrello {
  display: inline-flex; align-items: center; gap: 0.45em;
  height: 2.2em; padding: 0 0.45em 0 0.8em;
  border-radius: var(--r-pillola);
  background: var(--so-teal); color: #fff;
}
.mk-so__carrello .mk-ico { width: 1.15em; height: 1.15em; }
.mk-so__carrello i {
  display: grid; place-items: center;
  width: 1.45em; height: 1.45em; border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  font-style: normal; font-size: 0.68em; font-weight: 700;
}

.mk-so__corpo { display: flex; flex-direction: column; gap: 0.75em; padding: 0.7em 0.85em 0; min-height: 0; }

/* Copertina: illustrazione del lido al posto della foto */
.mk-so__copertina {
  position: relative; flex: none;
  height: 7.6em;
  border-radius: 1em;
  overflow: hidden;
  background: #7fd0d6;
}
.mk-so__copertina svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-so__copertina-testo {
  position: absolute; left: 0.95em; bottom: 0.75em;
  display: flex; flex-direction: column;
  color: #fff; line-height: 1.15;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.mk-so__copertina-testo b { font-size: 1.35em; font-weight: 800; letter-spacing: -0.01em; }
.mk-so__copertina-testo small { font-size: 0.66em; opacity: 0.92; }

/* Categorie */
.mk-so__chip { display: flex; align-items: center; gap: 0.4em; overflow: hidden; margin-right: -0.85em; }
.mk-so__chip > span {
  flex: none;
  display: grid; place-items: center;
  height: 2.6em; padding: 0 1.15em;
  border-radius: var(--r-pillola);
  background: #fff;
  box-shadow: inset 0 0 0 1px #e2d8cc;
  font-size: 0.7em; font-weight: 600;
  white-space: nowrap;
}
.mk-so__chip > span.is-attiva { background: var(--so-teal-chiaro); color: var(--so-teal-testo); box-shadow: inset 0 0 0 1.5px var(--so-teal); }
.mk-so__chip .mk-so__lente { width: 2.6em; padding: 0; color: var(--so-grigio); }
.mk-so__chip .mk-so__lente .mk-ico { width: 1.25em; height: 1.25em; }

.mk-so__titolo { display: block; margin-top: 0.3em; font-size: 1.15em; font-weight: 800; letter-spacing: -0.01em; }

/* Card prodotto */
.mk-so__lista { display: flex; flex-direction: column; gap: 0.6em; }
.mk-so__prodotto {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.7em 0.7em 0.7em 0.8em;
  border-radius: 0.9em;
  background: #fff;
  box-shadow: 0 0 0 1px var(--so-linea), 0 1px 3px rgba(60, 40, 20, 0.05);
}
.mk-so__info { display: flex; flex-direction: column; gap: 0.3em; flex: 1 1 auto; min-width: 0; }
.mk-so__info > b { font-size: 0.82em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-so__info small {
  font-size: 0.66em; line-height: 1.4; color: var(--so-grigio);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
.mk-so__prezzo { display: flex; align-items: center; gap: 0.5em; margin-top: 0.15em; }
.mk-so__prezzo > span { font-size: 0.82em; font-weight: 700; white-space: nowrap; }
.mk-so__prezzo i {
  padding: 0.25em 0.7em;
  border-radius: var(--r-pillola);
  background: var(--so-teal-chiaro); color: var(--so-teal-testo);
  font-style: normal; font-size: 0.52em; font-weight: 700;
  white-space: nowrap;
}
.mk-so__foto {
  --tinta: #f7dcc0;
  position: relative; flex: none;
  width: 5.3em; height: 5.3em;
  border-radius: 0.7em;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.55), transparent 60%), var(--tinta);
}
.mk-so__foto svg { position: absolute; inset: 0.35em; width: calc(100% - 0.7em); height: calc(100% - 0.7em); }
.mk-so__foto--pesca  { --tinta: #f6d6b8; }
.mk-so__foto--grano  { --tinta: #efe0c4; }
.mk-so__foto--sabbia { --tinta: #f3e4d6; }
.mk-so__piu {
  display: grid; place-items: center;
  width: 1.65em; height: 1.65em;
  border-radius: 50%;
  background: var(--so-teal); color: #fff;
  box-shadow: 0 0 0 0.16em #fff;
}
.mk-so__foto .mk-so__piu { position: absolute; right: -0.35em; bottom: -0.35em; }
.mk-so__piu .mk-ico { width: 1em; height: 1em; stroke-width: 2.6; }

/* Barra fissa in basso */
.mk-so__barra {
  position: absolute; left: 0.85em; right: 0.85em; bottom: 1.25em; z-index: 2;
  display: flex; align-items: center; gap: 0.6em;
  height: 3em; padding: 0 1em 0 0.85em;
  border-radius: 0.95em;
  background: var(--so-teal); color: #fff;
  box-shadow: 0 0.6em 1.4em -0.4em rgba(15, 117, 128, 0.5);
}
.mk-so__barra > i {
  display: grid; place-items: center; flex: none;
  width: 1.5em; height: 1.5em; border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-style: normal; font-size: 0.7em; font-weight: 700;
}
.mk-so__barra b { font-size: 0.85em; }
.mk-so__barra > span { display: inline-flex; align-items: center; gap: 0.3em; margin-left: auto; font-size: 0.85em; font-weight: 700; white-space: nowrap; }
.mk-so__barra .mk-ico { width: 1.1em; height: 1.1em; stroke-width: 2.2; }
.mk-so__home {
  position: absolute; left: 50%; bottom: 0.4em; z-index: 2;
  width: 7em; height: 0.3em; margin-left: -3.5em;
  border-radius: 1em; background: var(--so-testo); opacity: 0.75;
}

/* --- Tema "bar" (bar spiaggia): copertina piena, fisarmonica marrone ------- */
.mk--so-bar .mk-stato-tel { position: absolute; z-index: 3; left: 0; right: 0; color: #fff; }
.mk--so-bar .mk-stato-tel__icone i { background: #fff; }
.mk-so--bar { height: 43em; }
.mk-so__copertina--piena {
  display: flex; align-items: flex-start; gap: 0.45em;
  height: 9.4em;
  padding: 2.3em 0.85em 0;
  border-radius: 0 0 1em 1em;
  background: #6b4329;
  color: #fff;
}
.mk-so__copertina--piena > :not(svg) { position: relative; z-index: 1; }
.mk-so__tonda {
  position: relative;
  display: grid; place-items: center; flex: none;
  width: 2.1em; height: 2.1em; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.mk-so__tonda .mk-ico { width: 1.1em; height: 1.1em; }
.mk-so__borsa i {
  position: absolute; top: -0.35em; right: -0.35em;
  display: grid; place-items: center;
  width: 1.4em; height: 1.4em; border-radius: 50%;
  background: var(--so-teal); color: #fff;
  font-style: normal; font-size: 0.62em; font-weight: 700;
}
.mk-so__lingue { display: flex; padding: 0.2em; border-radius: var(--r-pillola); background: rgba(255, 255, 255, 0.22); }
.mk-so__lingue span { padding: 0.35em 0.75em; border-radius: var(--r-pillola); font-size: 0.66em; font-weight: 700; }
.mk-so__lingue span.is-attiva { background: #fff; color: var(--so-testo); }
.mk-so__copertina-titolo {
  position: absolute !important; left: 0; right: 0; top: 4.6em;
  text-align: center; font-size: 1.3em; font-weight: 800;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.mk--so-bar .mk-so__chip > span.is-attiva { background: var(--so-teal); color: #fff; box-shadow: none; }
.mk--so-bar .mk-so__chip > span { height: 2.4em; }
.mk-so__fisa {
  margin-top: 0.4em;
  border-radius: 0.9em;
  background: var(--so-crema);
  box-shadow: 0 0 0 1px var(--so-linea);
  overflow: hidden;
}
.mk-so__fisa-testa {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85em 0.85em;
  background: var(--so-marrone); color: #fff;
}
.mk-so__fisa-testa b { font-size: 0.85em; }
.mk-so__fisa-testa span { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.mk-so__fisa-testa .mk-ico { width: 0.95em; height: 0.95em; transform: rotate(180deg); }
.mk-so__voce {
  display: flex; align-items: flex-start; gap: 0.65em;
  margin: 0 0.85em;
  padding: 0.75em 0;
  border-bottom: 1px solid var(--so-linea);
}
.mk-so__voce > b { flex: 1 1 auto; padding-top: 0.25em; font-size: 0.74em; }
.mk-so__mini { flex: none; width: 2.95em; height: 2.95em; border-radius: 0.5em; background: #fff; box-shadow: inset 0 0 0 1px var(--so-linea); }
.mk-so__mini svg { width: 100%; height: 100%; }
.mk-so__voce-dx { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35em; }
.mk-so__voce-dx > span.mk-num { font-size: 0.74em; font-weight: 700; }
.mk-so__piu--linea { background: var(--so-teal-chiaro); color: var(--so-teal); box-shadow: inset 0 0 0 1px var(--so-teal); width: 1.75em; height: 1.75em; }
.mk-so__qta { display: flex; align-items: center; gap: 0.4em; }
.mk-so__qta i {
  display: grid; place-items: center;
  width: 1.3em; height: 1.3em; border-radius: 50%;
  box-shadow: inset 0 0 0 1px #e07a6a; color: #d4523e;
}
.mk-so__qta i .mk-ico { width: 0.8em; height: 0.8em; stroke-width: 2.6; }
.mk-so__qta b {
  display: grid; place-items: center;
  width: 1.75em; height: 1.75em; border-radius: 50%;
  background: var(--so-teal); color: #fff;
  box-shadow: 0 0 0 0.14em #fff, 0 0 0 0.26em var(--so-teal);
  font-size: 0.8em;
}
.mk--so-bar .mk-so__barra { border-radius: var(--r-pillola); }
.mk--so-bar .mk-so__barra .mk-ico { transform: rotate(180deg); }

/* Card flottante */
.mk-flot--so-ordine { top: 66%; right: -0.5em; rotate: 1.5deg; }
@container mk (max-width: 480px) {
  .mk-flot--so-ordine { top: auto; bottom: -1.8em; right: 0; left: 0; rotate: -1deg; }
  .mk--selforder .mk__scena { padding-bottom: 1em; }
}
.mk--compatto .mk-flot--so-ordine { top: auto; bottom: -1.8em; right: 0; left: 0; rotate: -1deg; }

/* Ingresso: le card salgono una dopo l'altra, la barra si accende. */
.mk--pronto.mk--selforder .mk-so__prodotto,
.mk--pronto.mk--selforder .mk-so__voce { opacity: 0; transform: translateY(0.6em); }
.mk--in-vista.mk--selforder .mk-so__prodotto,
.mk--in-vista.mk--selforder .mk-so__voce {
  opacity: 1; transform: none;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(0.2s + var(--k, 0) * 0.12s);
}
@keyframes mk-ordina { 0%, 100% { transform: none; } 50% { transform: scale(1.03); } }
.mk--in-vista .mk-so__barra { animation: mk-ordina 1.2s ease-in-out 1.2s 2; }

/* ==========================================================================
   M9 — Booking engine per hotel (sito di prenotazione lato ospite), dalla
   schermata vera nello stile del sito
   Prefisso .mk-be. È il sito della struttura: il colore primario lo sceglie
   l'hotel e arriva da 'colore' come --mk-be-primario (default --teal-scuro),
   portato a tutta la scena da .mk-be-tema (display: contents). Lo usano
   pulsanti, blocco del telefono, titoletti della ricerca, Dettagli e
   contorno delle offerte; testi neutri, così sta bene con qualunque colore.
   Mappatura dal booking engine vero: foto di testata e delle camere →
   illustrazioni piatte; marrone del tema demo → --mk-be-primario; grigi di
   fondo → --mk-sfondo e --mk-linea; prezzo verde e barrato rosso restano.
   Livelli: ampio con la colonna di ricerca e la terza camera tagliata dal
   bordo; medio (sotto gli 820 px) con la ricerca in una barra e due camere;
   compatto (sotto i 560 px) come su telefono, camere in verticale.
   La variante per i property manager ('tema' => 'property') è un mockup a
   sé, più sotto (M9b, prefisso .mk-bp).
   ========================================================================== */

.mk--bookingengine {
  --mk-l: 74; --mk-lm: 50; --mk-lc: 30;
  --mk-be-primario: #006e7a;
  --mk-be-verde: #3c8a4b;      /* prezzo finale */
  --mk-be-barrato: #d0695c;    /* prezzo pieno, come "Anziché" del preventivatore */
}
.mk-be-tema { display: contents; }

.mk-be {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  background: #fff;
  color: var(--inchiostro);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.25;
}
.mk-be .mk-ico { stroke-width: 2; }
.mk-be__spazio { flex: 1 1 auto; }
.mk-be__giu {
  display: inline-block; width: 0; height: 0; margin-left: 0.4em;
  border: 0.3em solid transparent; border-top-color: currentColor; border-bottom: 0;
}

/* Testata: fascia scura dei contatti, header bianco, striscia illustrata
   al posto della foto (nel vero la foto sta dietro a fascia e header). */
.mk-be__striscia { height: 3.4em; overflow: hidden; }
.mk-be__panorama { display: block; width: 100%; height: 100%; }
.mk-be__fascia {
  position: relative;
  display: flex; align-items: center; gap: 1.6em;
  height: 2.2em; padding: 0 1.4em;
  background: #33403f;
  background: color-mix(in srgb, var(--mk-be-primario) 30%, #222b2c);
  color: #fff; white-space: nowrap;
}
.mk-be__contatto { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.72em; }
.mk-be__contatto .mk-ico { width: 1em; height: 1em; opacity: 0.85; }
.mk-be__scelta { display: inline-flex; align-items: center; font-size: 0.7em; font-weight: 600; letter-spacing: 0.03em; }

.mk-be__header {
  display: flex; align-items: center; gap: 2.2em;
  height: 4.4em; padding-left: 1.4em;
  background: #fff;
  white-space: nowrap;
}
.mk-be__struttura { display: flex; align-items: center; gap: 0.7em; min-width: 0; margin-right: auto; }
.mk-be__stemma { flex: none; width: 2.4em; height: 2.4em; }
.mk-be__nome { display: flex; flex-direction: column; gap: 0.2em; min-width: 0; }
.mk-be__nome b { font-size: 1em; font-weight: 700; letter-spacing: 0.01em; color: var(--inchiostro); overflow: hidden; text-overflow: ellipsis; }
.mk-be__nome small { display: inline-flex; align-items: center; gap: 0.25em; font-size: 0.68em; color: var(--grigio); }
.mk-be__nome small .mk-ico { width: 1em; height: 1em; }
.mk-be__menu { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.74em; font-weight: 600; letter-spacing: 0.04em; color: var(--grigio-scuro); }
.mk-be__menu .mk-ico { width: 1.1em; height: 1.1em; }
.mk-be__tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  align-self: stretch; padding: 0 1.5em;
  background: var(--mk-be-primario); color: #fff;
}
.mk-be__tel .mk-ico { width: 1em; height: 1em; }
.mk-be__tel-num { font-size: 0.82em; font-weight: 700; letter-spacing: 0.02em; }

/* Corpo: colonna della ricerca e risultati */
.mk-be__corpo {
  display: grid; grid-template-columns: 16.5em minmax(0, 1fr); gap: 1.2em; align-items: start;
  padding: 1.1em 1.4em 0;
}

.mk-be__offerte {
  display: flex; align-items: center; justify-content: center; gap: 0.5em;
  height: 3.9em;
  border: 0.15em solid var(--mk-be-primario);
  border-color: color-mix(in srgb, var(--mk-be-primario) 60%, #fff);
  border-radius: 0.25em;
  color: var(--mk-be-primario);
  font-size: 0.74em; font-weight: 600; letter-spacing: 0.05em; white-space: nowrap;
}
.mk-be__offerte i {
  display: grid; place-items: center;
  width: 1.7em; height: 1.7em; border-radius: 50%;
  background: var(--mk-be-primario); color: #fff;
  font-style: normal; font-size: 0.9em; font-weight: 700;
}

.mk-be__ricerca {
  margin-top: 0.9em;
  border: 1px solid var(--mk-linea); border-radius: 0.3em;
  background: #fbfcfc;
  overflow: hidden;
}
.mk-be__ricerca-titolo {
  display: block; padding: 0.85em 1.1em;
  background: var(--mk-sfondo); border-bottom: 1px solid var(--mk-linea);
  font-size: 0.86em; font-weight: 700; letter-spacing: 0.03em;
}
.mk-be__ricerca-corpo { display: flex; flex-direction: column; padding: 0.4em 0.95em 1.05em; }
.mk-be__sezione { margin-top: 0.9em; font-size: 0.72em; font-weight: 700; letter-spacing: 0.04em; color: var(--mk-be-primario); }
.mk-be__etichetta { margin: 0.95em 0 0.5em; font-size: 0.64em; font-weight: 700; letter-spacing: 0.05em; }
.mk-be__campo {
  display: flex; align-items: center; justify-content: space-between;
  height: 3.1em; padding: 0 0.9em;
  background: #fff; border: 1px solid var(--filetto); border-radius: 0.25em;
  font-size: 0.76em; color: var(--grigio-scuro); white-space: nowrap;
}
.mk-be__campo .mk-ico { width: 1.15em; height: 1.15em; color: var(--grigio); }
.mk-be__campo .mk-be__giu { color: var(--grigio); }
.mk-be__promo { display: inline-flex; align-items: center; gap: 0.4em; margin-top: 1.25em; font-size: 0.76em; color: var(--inchiostro); }
.mk-be__promo .mk-ico { width: 1.15em; height: 1.15em; color: var(--mk-be-primario); }
.mk-be__verifica {
  display: grid; place-items: center;
  height: 3.3em; margin-top: 0.75em;
  background: var(--mk-be-primario); color: #fff; border-radius: 0.2em;
  font-size: 0.76em; font-weight: 600; letter-spacing: 0.03em;
}

/* Barra di ricerca orizzontale: solo medio e compatto (al posto della colonna) */
.mk-be__cerca { display: none; }

.mk-be__risultati { display: flex; flex-direction: column; gap: 0.8em; min-width: 0; }
.mk-be__soluzioni {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  height: 3.3em; padding: 0 1.1em;
  background: var(--mk-sfondo); border: 1px solid var(--mk-linea); border-radius: 0.25em;
  font-size: 0.86em; white-space: nowrap;
}
.mk-be__per b, .mk-be__date b { font-weight: 700; }
.mk-be__date { display: flex; align-items: center; gap: 1em; }
.mk-be__date > span { display: inline-flex; align-items: center; gap: 0.35em; }
.mk-be__date .mk-ico { width: 1.05em; height: 1.05em; color: var(--grigio); }
.mk-be__date .mk-be__freccia .mk-ico { color: var(--inchiostro); }

/* Card camera: illustrazione a sinistra, scheda a destra con la fascia del prezzo */
.mk-be__camera {
  display: grid; grid-template-columns: 14.5em minmax(0, 1fr);
  min-height: 11.8em;
  background: #fff;
  border: 1px solid var(--mk-linea); border-radius: 0.3em;
  box-shadow: 0 1px 3px rgba(0, 66, 73, 0.05);
  overflow: hidden;
}
.mk-be__foto { position: relative; display: block; min-height: 100%; }
.mk-be__foto > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.mk-be__foto i {
  position: absolute; right: 0.6em; bottom: 0.6em;
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.25em 0.5em; border-radius: 0.2em;
  background: rgba(30, 34, 35, 0.72); color: #fff;
  font-style: normal; font-size: 0.7em; font-weight: 600;
}
.mk-be__foto i .mk-ico { width: 1.1em; height: 1.1em; }

.mk-be__scheda { display: flex; flex-direction: column; min-width: 0; }
.mk-be__testo { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 0.55em; padding: 0.95em 1.15em 0.85em; min-width: 0; }
.mk-be__titolo { font-size: 1.1em; font-weight: 600; color: var(--inchiostro); }
.mk-be__descr {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 0.74em; line-height: 1.5; color: var(--grigio);
}
.mk-be__servizi { display: flex; flex-wrap: wrap; gap: 0.35em; }
.mk-be__servizi i {
  padding: 0.2em 0.65em;
  border: 1px solid #cdd5d5; border-radius: 0.6em;
  font-style: normal; font-size: 0.66em; color: var(--grigio-scuro); white-space: nowrap;
}
.mk-be__dettagli { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.72em; color: var(--mk-be-primario); }
.mk-be__dettagli .mk-ico { width: 1.1em; height: 1.1em; }

.mk-be__prezzo {
  display: flex; justify-content: flex-end; align-items: stretch;
  height: 3.6em;
  background: var(--mk-sfondo);
}
.mk-be__cifre { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding-right: 1em; line-height: 1.1; white-space: nowrap; }
.mk-be__cifre small { font-size: 0.66em; color: var(--grigio-scuro); }
.mk-be__cifre > span { display: flex; align-items: baseline; gap: 0.5em; }
.mk-be__cifre s { font-size: 0.74em; color: var(--mk-be-barrato); text-decoration-thickness: 0.08em; }
.mk-be__cifre b { font-size: 1.45em; font-weight: 700; color: var(--mk-be-verde); letter-spacing: -0.01em; }
.mk-be__prenota {
  display: flex; align-items: center;
  padding: 0 1.4em 0 1.8em;
  background: var(--mk-be-primario); color: #fff;
  clip-path: polygon(0.7em 0, 100% 0, 100% 100%, 0 100%);
  font-size: 0.76em; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap;
}

/* La terza camera è tagliata dal bordo della finestra: la pagina continua. */
.mk-be__camera--3 { min-height: 0; height: 5.4em; border-bottom: 0; border-radius: 0.3em 0.3em 0 0; box-shadow: none; }
.mk-be__camera--3 .mk-be__foto { height: 11.8em; }

/* Logo tondo della vignetta del bento (mini.php, tipo 'bookingengine') */
.mk-be__logo {
  display: grid; place-items: center; flex: none;
  width: 2.2em; height: 2.2em; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #6fc6cf, var(--teal));
  color: #fff; font-size: 0.78em; font-weight: 700;
}

/* Card flottanti */
.mk-flot--be-prenotazione { bottom: -2.2em; left: -2.4em; rotate: -1.5deg; }
.mk-flot--be-colori       { top: -1.8em; right: -2.4em; rotate: 1.5deg; }
.mk-flot--be-colori .mk-flot__icona { background: var(--mk-be-primario); }
.mk-flot--be-colori small { display: flex; align-items: center; gap: 0.7em; margin-top: 0.35em; }
.mk-be__tavolozza { display: inline-flex; gap: 0.4em; }
.mk-be__tavolozza i { width: 1.15em; height: 1.15em; border-radius: 50%; background: var(--c); }
.mk-be__tavolozza i.is-scelto { box-shadow: 0 0 0 0.15em #fff, 0 0 0 0.3em var(--c); margin-right: 0.15em; }

/* Medio: niente colonna, la ricerca diventa una barra; due camere, descrizione su una riga */
@container mk (max-width: 820px) {
  .mk-be__corpo { grid-template-columns: minmax(0, 1fr); padding: 0.9em 1.2em 1.2em; }
  .mk-be__lato, .mk-be__camera--3 { display: none; }
  .mk-be__cerca {
    display: flex; align-items: center; gap: 0.5em;
    padding: 0.5em;
    background: var(--mk-sfondo); border: 1px solid var(--mk-linea); border-radius: 0.3em;
    white-space: nowrap;
  }
  .mk-be__cerca-campo {
    display: inline-flex; align-items: center; gap: 0.5em; flex: 1 1 0; min-width: 0;
    height: 2.9em; padding: 0 0.8em;
    background: #fff; border: 1px solid var(--filetto); border-radius: 0.25em;
    font-size: 0.8em; color: var(--grigio-scuro);
  }
  .mk-be__cerca-campo .mk-ico { width: 1.1em; height: 1.1em; color: var(--mk-be-primario); }
  .mk-be__cerca-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
    height: 2.9em; padding: 0 1.2em;
    background: var(--mk-be-primario); color: #fff; border-radius: 0.2em;
    font-size: 0.8em; font-weight: 700; letter-spacing: 0.03em;
  }
  .mk-be__cerca-btn .mk-ico { width: 1.1em; height: 1.1em; }
  .mk-be__camera { grid-template-columns: 12.5em minmax(0, 1fr); min-height: 10.6em; }
  .mk-be__descr { -webkit-line-clamp: 1; }
  .mk-flot--be-prenotazione { left: -1em; }
  .mk-flot--be-colori { right: -1em; }
}

/* Compatto: come su telefono. Header ridotto, camere in verticale, la seconda tagliata. */
@container mk (max-width: 560px) {
  .mk-be__fascia { height: 2em; padding: 0 1em; }
  .mk-be__header { height: 4em; padding-left: 1em; gap: 0.8em; }
  .mk-be__stemma { width: 2.2em; height: 2.2em; }
  .mk-be__tel { padding: 0 1.1em; }
  .mk-be__tel-num { display: none; }
  .mk-be__tel .mk-ico { width: 1.25em; height: 1.25em; }
  .mk-be__striscia { height: 2.6em; }
  .mk-be__corpo { padding: 0.8em 0.8em 0; }
  .mk-be__risultati { gap: 0.7em; }
  .mk-be__cerca-campo { padding: 0 0.6em; }
  .mk-be__cerca-btn { flex: none; width: 3.2em; padding: 0; }
  .mk-be__cerca-btn span { display: none; }
  .mk-be__soluzioni { padding: 0 0.9em; }
  .mk-be__camera { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mk-be__foto { height: 9.5em; }
  .mk-be__testo { padding: 0.8em 0.9em 0.75em; gap: 0.5em; }
  .mk-be__prezzo { height: 3.4em; }
  .mk-be__camera--2 { height: 6.6em; border-bottom: 0; border-radius: 0.3em 0.3em 0 0; box-shadow: none; }
  .mk-be__camera--2 .mk-be__scheda { display: none; }
  .mk-flot--be-prenotazione { left: 0.8em; right: 0.8em; bottom: -2.2em; rotate: 0deg; }
}
.mk--compatto .mk-be__corpo { grid-template-columns: minmax(0, 1fr); padding: 0.8em 0.8em 0; }
.mk--compatto .mk-be__lato, .mk--compatto .mk-be__camera--3 { display: none; }
.mk--compatto .mk-be__cerca {
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.5em;
  background: var(--mk-sfondo); border: 1px solid var(--mk-linea); border-radius: 0.3em;
  white-space: nowrap;
}
.mk--compatto .mk-be__cerca-campo {
  display: inline-flex; align-items: center; gap: 0.5em; flex: 1 1 0; min-width: 0;
  height: 2.9em; padding: 0 0.6em;
  background: #fff; border: 1px solid var(--filetto); border-radius: 0.25em;
  font-size: 0.8em; color: var(--grigio-scuro);
}
.mk--compatto .mk-be__cerca-campo .mk-ico { width: 1.1em; height: 1.1em; color: var(--mk-be-primario); }
.mk--compatto .mk-be__cerca-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 3.2em; height: 2.9em;
  background: var(--mk-be-primario); color: #fff; border-radius: 0.2em; font-size: 0.8em;
}
.mk--compatto .mk-be__cerca-btn .mk-ico { width: 1.1em; height: 1.1em; }
.mk--compatto .mk-be__cerca-btn span { display: none; }
.mk--compatto .mk-be__descr { -webkit-line-clamp: 1; }
.mk--compatto .mk-be__fascia { height: 2em; padding: 0 1em; }
.mk--compatto .mk-be__header { height: 4em; padding-left: 1em; gap: 0.8em; }
.mk--compatto .mk-be__stemma { width: 2.2em; height: 2.2em; }
.mk--compatto .mk-be__tel { padding: 0 1.1em; }
.mk--compatto .mk-be__tel-num { display: none; }
.mk--compatto .mk-be__tel .mk-ico { width: 1.25em; height: 1.25em; }
.mk--compatto .mk-be__striscia { height: 2.6em; }
.mk--compatto .mk-be__risultati { gap: 0.7em; }
.mk--compatto .mk-be__soluzioni { padding: 0 0.9em; }
.mk--compatto .mk-be__camera { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.mk--compatto .mk-be__foto { height: 9.5em; }
.mk--compatto .mk-be__testo { padding: 0.8em 0.9em 0.75em; gap: 0.5em; }
.mk--compatto .mk-be__prezzo { height: 3.4em; }
.mk--compatto .mk-be__camera--2 { height: 6.6em; border-bottom: 0; border-radius: 0.3em 0.3em 0 0; box-shadow: none; }
.mk--compatto .mk-be__camera--2 .mk-be__scheda { display: none; }
.mk--compatto .mk-flot--be-prenotazione { left: 0.8em; right: 0.8em; bottom: -2.2em; rotate: 0deg; }

/* Ingresso: le camere arrivano una dopo l'altra. */
.mk--pronto.mk--bookingengine .mk-be__camera { opacity: 0; transform: translateY(0.6em); }
.mk--in-vista.mk--bookingengine .mk-be__camera {
  opacity: 1; transform: none;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(0.25s + var(--k, 0) * 0.12s);
}
@media (prefers-reduced-motion: reduce) {
  .mk--pronto.mk--bookingengine .mk-be__camera { opacity: 1; transform: none; }
}

/* ==========================================================================
   M9b — Booking engine sul sito di un property manager (bookingengine-pm.php),
   dalle schermate vere nello stile del sito
   Prefisso .mk-bp. Due viste: elenco dei risultati (.mk-bp--elenco) e
   scheda dell'unità (.mk-bp--scheda), con lo stesso header.
   I colori sono del property manager e arrivano da 'colore' e 'colore2'
   come --mk-bp-1 (primario: Cerca, badge della scheda, metà del logo) e
   --mk-bp-2 (secondario: Dettagli, Prosegui, telefono, Totale), con il
   testo adatto in --mk-bp-1-su / --mk-bp-2-su; .mk-bp-tema (display:
   contents) li porta a tutta la scena, card flottanti comprese.
   Mappatura dal prodotto vero: foto → illustrazioni piatte; giallo del
   pulsante Cerca → --mk-bp-1; azzurro di Dettagli e Prosegui → --mk-bp-2;
   prezzo verde, card bianche con filo grigio e angoli piccoli restano.
   Livelli: ampio; medio (sotto gli 820 px) senza la colonna Ricerca, che
   diventa una barra, e scheda con tre foto e la prenotazione sotto;
   compatto (sotto i 560 px) come su telefono.
   ========================================================================== */

.mk--be-property {
  --mk-l: 78; --mk-lm: 50; --mk-lc: 30;
  --mk-bp-1: #e8a33d; --mk-bp-1-su: #1f2a2c;
  --mk-bp-2: #2d7f92; --mk-bp-2-su: #fff;
  --mk-bp-testo: #283031;
  --mk-bp-tenue: #5b6566;
  --mk-bp-filo: #dfe5e5;
  --mk-bp-verde: #2f8a4c;
}
.mk-bp-tema { display: contents; }

.mk-bp {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  background: #fff;
  color: var(--mk-bp-testo);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.3;
}
.mk-bp .mk-ico { stroke-width: 1.9; }
.mk-bp__spazio { flex: 1 1 auto; }

/* Header: logo tipografico a due colori, voci in maiuscoletto, lingua e telefono */
.mk-bp__header {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 1.5em;
  height: 4.3em; padding: 0 2.4em;
  background: #fff;
  box-shadow: 0 1px 0 var(--mk-linea), 0 0.3em 0.9em rgba(0, 66, 73, 0.05);
  white-space: nowrap;
}
.mk-bp__logo { display: inline-flex; align-items: baseline; margin-right: 0.5em; font-size: 1.5em; font-weight: 800; letter-spacing: -0.04em; }
.mk-bp__logo b { font-weight: 800; color: var(--mk-bp-1); }
.mk-bp__logo span { margin-left: 0.2em; color: var(--mk-bp-2); }
.mk-bp__nav { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.7em; font-weight: 500; letter-spacing: 0.04em; color: #3a4243; }
.mk-bp__nav .mk-ico { width: 1.2em; height: 1.2em; color: #8a9394; }
.mk-bp__nav--cerca { height: 3.3em; padding: 0 1.2em; border: 1px solid #8e9899; border-radius: 0.5em; color: var(--mk-bp-testo); }
.mk-bp__nav--cerca .mk-ico { color: var(--mk-bp-testo); }
.mk-bp__lingua {
  display: grid; place-items: center;
  width: 2.8em; height: 2.7em;
  border: 1px solid var(--mk-bp-filo); border-radius: 0.4em;
  font-size: 0.72em; font-weight: 500;
}
.mk-bp__tel {
  display: inline-flex; align-items: center; gap: 0.5em;
  height: 2.5em; padding: 0 1em;
  border: 1px solid var(--mk-bp-2); border-radius: 0.45em;
  color: var(--mk-bp-2);
  font-size: 0.78em; font-weight: 500;
}
.mk-bp__tel .mk-ico { width: 1.1em; height: 1.1em; }

/* Campi di ricerca (colonna, barra e card di prenotazione) */
.mk-bp__campo {
  display: flex; align-items: center; gap: 0.5em;
  height: 3em; padding: 0 0.85em;
  background: #fff; border: 1px solid var(--mk-bp-filo); border-radius: 0.4em;
  font-size: 0.78em; color: #353d3e; white-space: nowrap;
}
.mk-bp__campo > .mk-ico:last-child { margin-left: auto; width: 1.1em; height: 1.1em; color: #98a1a2; }
.mk-bp__campo--vuoto { color: #7b8586; }
.mk-bp__campo--vuoto > .mk-ico:last-child { width: 0.85em; height: 0.85em; }
.mk-bp__badge {
  display: grid; place-items: center; flex: none;
  width: 1.5em; height: 1.5em; border-radius: 50%;
  background: var(--mk-bp-2); color: var(--mk-bp-2-su);
  font-style: normal; font-size: 0.82em; font-weight: 700;
}
.mk-bp__badge--1 { background: var(--mk-bp-1); color: var(--mk-bp-1-su); }

.mk-bp__cerca {
  display: flex; align-items: center; justify-content: center; gap: 0.45em;
  height: 3.4em;
  background: var(--mk-bp-1); color: var(--mk-bp-1-su);
  border-radius: 0.35em;
  font-size: 0.86em; font-weight: 500;
}
.mk-bp__cerca .mk-ico { width: 1.1em; height: 1.1em; }

/* --- Elenco ------------------------------------------------------------- */
.mk-bp__elenco {
  display: grid; grid-template-columns: 17.5em minmax(0, 1fr); gap: 1.5em; align-items: start;
  padding: 1.5em 2.4em 0;
}
.mk-bp__lato {
  display: flex; flex-direction: column; gap: 0.85em;
  padding: 1.1em 1.05em 1.15em;
  border: 1px solid var(--mk-bp-filo); border-radius: 0.45em;
  box-shadow: 0 1px 3px rgba(0, 66, 73, 0.05);
}
.mk-bp__h { font-size: 1.2em; font-weight: 500; }
.mk-bp__opzioni { display: flex; align-items: center; justify-content: space-between; margin-top: 0.3em; font-size: 0.74em; white-space: nowrap; }
.mk-bp__altre { display: inline-flex; align-items: center; gap: 0.4em; color: var(--mk-bp-2); font-size: 1.06em; }
.mk-bp__altre .mk-ico { width: 1.1em; height: 1.1em; }
.mk-bp__promo { display: inline-flex; align-items: center; gap: 0.5em; margin-top: 0.2em; font-size: 0.76em; white-space: nowrap; }
.mk-bp__promo .mk-ico { width: 1.15em; height: 1.15em; }
.mk-bp__lato .mk-bp__cerca { margin-top: 0.15em; }

.mk-bp__barra { display: none; }

.mk-bp__risultati { display: flex; flex-direction: column; gap: 0.9em; min-width: 0; }
.mk-bp__conteggio { display: flex; flex-direction: column; gap: 0.25em; margin-top: -0.2em; }
.mk-bp__conteggio b { font-size: 1.08em; font-weight: 600; }
.mk-bp__conteggio small { font-size: 0.76em; color: var(--mk-bp-tenue); }

.mk-bp__card {
  display: grid; grid-template-columns: 18em minmax(0, 1fr);
  height: 12.4em;
  background: #fff;
  border: 1px solid var(--mk-bp-filo); border-radius: 0.45em;
  box-shadow: 0 1px 3px rgba(0, 66, 73, 0.05);
  overflow: hidden;
}
.mk-bp__foto { position: relative; display: block; overflow: hidden; }
.mk-bp__foto > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.mk-bp__freccia {
  position: absolute; top: 50%;
  display: grid; place-items: center;
  width: 1.8em; height: 1.8em; margin-top: -0.9em;
  border-radius: 50%;
  background: #fff; color: var(--mk-bp-testo);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.mk-bp__freccia .mk-ico { width: 1em; height: 1em; stroke-width: 2.2; }
.mk-bp__freccia--sx { left: 0.8em; opacity: 0.55; }
.mk-bp__freccia--dx { right: 0.8em; }
.mk-bp__punti { position: absolute; left: 0; right: 0; bottom: 0.7em; display: flex; justify-content: center; gap: 0.35em; }
.mk-bp__punti i { width: 0.42em; height: 0.42em; border-radius: 50%; background: rgba(255, 255, 255, 0.6); }
.mk-bp__punti i.is-attivo { background: #fff; }

.mk-bp__info { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 1.1em 1.2em 1em 1.1em; }
.mk-bp__testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2em; }
.mk-bp__nome { display: flex; flex-direction: column; gap: 0.5em; min-width: 0; }
.mk-bp__nome b { font-size: 1.12em; font-weight: 500; line-height: 1.3; color: #1f2627; }
.mk-bp__attr { display: flex; flex-wrap: wrap; gap: 0.2em 1.1em; font-size: 0.76em; color: var(--mk-bp-tenue); }
.mk-bp__attr i { font-style: normal; white-space: nowrap; }
.mk-bp__prezzo { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15em; white-space: nowrap; }
.mk-bp__prezzo small { font-size: 0.72em; }
.mk-bp__prezzo > span { display: flex; align-items: baseline; gap: 0.3em; }
.mk-bp__prezzo b { font-size: 1.3em; font-weight: 700; letter-spacing: -0.01em; color: var(--mk-bp-verde); }
.mk-bp__prezzo--richiesta { font-size: 0.78em; }
.mk-bp__piede { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.mk-bp__pm { font-size: 0.7em; color: #353d3e; }
.mk-bp__dettagli {
  display: grid; place-items: center;
  min-width: 9em; height: 2.7em; padding: 0 1.4em;
  background: var(--mk-bp-2); color: var(--mk-bp-2-su);
  border-radius: 0.4em;
  font-size: 0.8em; font-weight: 600;
}

/* La terza card ("Su richiesta") è tagliata dal bordo: la pagina continua. */
.mk-bp__card--3 { height: 5.2em; border-bottom: 0; border-radius: 0.45em 0.45em 0 0; box-shadow: none; }
.mk-bp__card--3 .mk-bp__foto { height: 12.4em; }

/* --- Scheda dell'unità --------------------------------------------------- */
.mk-bp__pagina { position: relative; padding: 1.3em 5.2em 1.9em; }
.mk-bp__indietro {
  position: absolute; z-index: 1; left: 1.4em; top: 1.5em;
  display: grid; place-items: center;
  width: 2.6em; height: 2.6em; border-radius: 50%;
  background: #fff; color: var(--mk-bp-testo);
  box-shadow: 0 0.12em 0.5em rgba(0, 0, 0, 0.18);
}
.mk-bp__indietro .mk-ico { width: 1.2em; height: 1.2em; stroke-width: 2.2; }

.mk-bp__galleria {
  position: relative;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.4em;
  height: 20em;
  border-radius: 0.5em; overflow: hidden;
}
.mk-bp__g { position: relative; display: block; overflow: hidden; background: #eadcc4; }
.mk-bp__g > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.mk-bp__g--1 { grid-row: span 2; }
.mk-bp__tutte {
  position: absolute; right: 0.8em; bottom: 0.8em;
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.5em 0.8em;
  background: #fff; border-radius: 0.4em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  font-size: 0.7em; white-space: nowrap;
}
.mk-bp__tutte .mk-ico { width: 1.15em; height: 1.15em; }

.mk-bp__dettaglio { display: grid; grid-template-columns: minmax(0, 1fr) 20em; gap: 1.8em; align-items: start; margin-top: 1em; }
.mk-bp__descrizione { display: flex; flex-direction: column; min-width: 0; padding-top: 0.2em; }
.mk-bp__titolo { font-size: 1.42em; font-weight: 500; line-height: 1.25; color: #1f2627; }
.mk-bp__luogo { display: flex; align-items: center; gap: 0.4em; margin-top: 0.4em; font-size: 0.78em; color: #4a5354; }
.mk-bp__luogo .mk-ico { width: 1.1em; height: 1.1em; color: var(--mk-bp-tenue); }
.mk-bp__luogo u { text-underline-offset: 0.18em; color: var(--mk-bp-testo); }

.mk-bp__dati {
  display: grid; grid-template-columns: repeat(3, max-content); gap: 0.9em 3.6em;
  margin-top: 1.7em; font-size: 0.8em;
}
.mk-bp__dati > span { display: inline-flex; align-items: center; gap: 0.55em; white-space: nowrap; }
.mk-bp__dati .mk-ico { width: 1.45em; height: 1.45em; stroke-width: 1.4; color: var(--mk-bp-tenue); }

/* Il CIN: inserito nella scheda dell'unità nel gestionale, mostrato qui. */
.mk-bp__cin-riga { position: relative; display: flex; align-items: center; margin-top: 1.4em; }
.mk-bp__cin { display: flex; flex-direction: column; gap: 0.25em; font-size: 0.7em; }
.mk-bp__cin small { font-size: 1em; }
.mk-bp__cin span { color: var(--mk-bp-tenue); letter-spacing: 0.01em; }
.mk-bp__cin.is-evidenziato {
  margin: -0.55em 0 -0.55em -0.75em; padding: 0.55em 0.75em;
  border-radius: 0.45em;
  background: var(--teal-chiaro);
  box-shadow: inset 0 0 0 1px var(--menta-scura);
}
.mk-bp__cin.is-evidenziato span { color: var(--teal-profondo); font-weight: 600; }

.mk-bp__linea { display: block; margin-top: 1.3em; border-top: 1px solid #d9dfdf; }
.mk-bp__testo {
  margin-top: 1em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font-size: 0.68em; line-height: 1.7; color: #4a5354;
}
.mk-bp__dove { margin-top: 0.9em; font-size: 0.68em; font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; }

.mk-bp__prenota {
  display: flex; flex-direction: column; gap: 0.8em;
  padding: 1.1em 1em 1.2em;
  background: #fff;
  border: 1px solid var(--mk-bp-filo); border-radius: 0.5em;
  box-shadow: 0 0.2em 0.9em rgba(0, 66, 73, 0.07);
}
.mk-bp__prenota-titolo { font-size: 1em; font-weight: 600; }
.mk-bp__prenota .mk-bp__campo { height: 3.5em; }
.mk-bp__prenota .mk-bp__campo .mk-bp__badge { margin-left: auto; }
.mk-bp__prenota .mk-bp__campo .mk-bp__badge + .mk-ico { margin-left: 0.6em; }
.mk-bp__prosegui {
  display: grid; place-items: center;
  height: 2.9em;
  background: var(--mk-bp-2); color: var(--mk-bp-2-su);
  border-radius: 0.35em;
  font-size: 0.92em; font-weight: 500;
}
.mk-bp__totale { display: flex; align-items: baseline; justify-content: space-between; margin-top: 0.15em; font-size: 1.1em; color: var(--mk-bp-2); }
.mk-bp__totale b { font-weight: 700; }
.mk-bp__incluso { font-size: 0.7em; line-height: 1.5; color: #4a5354; }

/* --- Card flottanti ------------------------------------------------------ */
.mk-flot--bp-prenotazione { bottom: -2.2em; left: -2.4em; rotate: -1.5deg; }
.mk-flot--bp-colori       { top: -1.8em; right: -2.4em; rotate: 1.5deg; }
.mk-flot--bp-colori .mk-flot__icona { background: var(--mk-bp-2); color: var(--mk-bp-2-su); }
.mk-flot--bp-colori small { display: flex; align-items: center; gap: 0.7em; margin-top: 0.35em; }
.mk-bp__tavolozza { display: inline-flex; gap: 0.35em; }
.mk-bp__tavolozza i { width: 1.15em; height: 1.15em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0.15em #fff, 0 0 0 0.24em rgba(0, 66, 73, 0.12); }
/* Il CIN: la card sta nella riga, accanto al numero evidenziato. */
.mk-flot--bp-cin { left: 17em; top: 50%; margin-top: -1.9em; rotate: -1.5deg; }
.mk-flot--bp-listino { top: -1.8em; right: -2.4em; rotate: 1.5deg; }

/* --- Medio: niente colonna Ricerca (diventa una barra); scheda con tre
       foto e la prenotazione sotto, in orizzontale --------------------- */
@container mk (max-width: 820px) {
  .mk-bp__header { padding: 0 1.3em; gap: 1.2em; }
  .mk-bp__elenco { grid-template-columns: minmax(0, 1fr); padding: 1.1em 1.3em 0; }
  .mk-bp__lato { display: none; }
  .mk-bp__barra { display: flex; gap: 0.5em; }
  .mk-bp__barra .mk-bp__campo { flex: 1 1 0; min-width: 0; }
  .mk-bp__barra .mk-bp__campo:first-child { flex-grow: 1.3; }
  .mk-bp__barra .mk-bp__campo:first-child .mk-ico { margin-left: 0; color: var(--mk-bp-tenue); }
  .mk-bp__barra .mk-bp__cerca { flex: none; height: auto; padding: 0 1.4em; font-size: 0.8em; }
  .mk-bp__card { grid-template-columns: 14em minmax(0, 1fr); height: 11em; }
  .mk-bp__attr { column-gap: 0.85em; }
  .mk-bp__card--3 { height: 4.6em; }
  .mk-bp__card--3 .mk-bp__foto { height: 11em; }

  .mk-bp__pagina { padding: 1.1em 1.3em 1.4em; }
  .mk-bp__indietro { left: 2em; top: 1.8em; width: 2.3em; height: 2.3em; }
  .mk-bp__galleria { grid-template-columns: 2fr 1fr; height: 17em; }
  .mk-bp__g--4, .mk-bp__g--5, .mk-bp__g--6, .mk-bp__g--7 { display: none; }
  .mk-bp__dettaglio { grid-template-columns: minmax(0, 1fr); gap: 1.3em; }
  .mk-bp__dati { gap: 0.8em 2.4em; margin-top: 1.3em; }
  .mk-bp__testo { -webkit-line-clamp: 2; }
  .mk-bp__prenota { display: grid; grid-template-columns: 1.3fr 1fr 1fr; align-items: center; gap: 0.7em 0.6em; }
  .mk-bp__prenota-titolo { grid-column: 1 / -1; }
  .mk-bp__prosegui { height: 100%; font-size: 0.85em; }
  .mk-bp__prenota .mk-bp__campo { height: 3.2em; }
  .mk-bp__totale { grid-column: 1 / 2; margin-top: 0; }
  .mk-bp__incluso { grid-column: 2 / -1; }
  .mk-flot--bp-prenotazione { left: -1em; }
  .mk-flot--bp-colori, .mk-flot--bp-listino { right: -1em; }
}

/* --- Compatto: come su telefono ------------------------------------------ */
@container mk (max-width: 560px) {
  .mk-bp__header { height: 3.8em; padding: 0 0.9em; gap: 0.6em; }
  .mk-bp__logo { font-size: 1.25em; }
  .mk-bp__tel { width: 2.7em; padding: 0; justify-content: center; }
  .mk-bp__tel .mk-ico { width: 1.2em; height: 1.2em; }
  .mk-bp__elenco { padding: 0.8em 0.8em 0; }
  .mk-bp__risultati { gap: 0.75em; }
  .mk-bp__barra .mk-bp__cerca { width: 3.2em; padding: 0; }
  .mk-bp__card { grid-template-columns: minmax(0, 1fr); grid-template-rows: 9.5em auto; height: auto; }
  .mk-bp__info { gap: 0.9em; padding: 0.85em 0.9em 0.9em; }
  .mk-bp__testa { flex-direction: column; gap: 0.6em; }
  .mk-bp__prezzo { flex-direction: row; align-items: baseline; gap: 0.6em; }
  .mk-bp__dettagli { min-width: 0; }
  .mk-bp__card--2 { height: 6.4em; border-bottom: 0; border-radius: 0.45em 0.45em 0 0; box-shadow: none; }
  .mk-bp__card--2 .mk-bp__info, .mk-bp__card--3 { display: none; }

  .mk-bp__pagina { padding: 0.8em 0.8em 1.1em; }
  .mk-bp__indietro { left: 1.4em; top: 1.4em; }
  .mk-bp__galleria { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; height: 12.5em; }
  .mk-bp__g--2, .mk-bp__g--3 { display: none; }
  .mk-bp__g--1 { grid-row: auto; }
  .mk-bp__titolo { font-size: 1.22em; }
  .mk-bp__luogo { align-items: flex-start; }
  .mk-bp__dati { grid-template-columns: repeat(2, max-content); gap: 0.7em 1.6em; margin-top: 1.1em; }
  .mk-bp__dati > span:last-child { grid-column: 1 / -1; }
  .mk-flot--bp-cin { left: auto; right: -0.4em; }
  .mk-bp__prenota { display: flex; align-items: stretch; gap: 0.7em; }
  .mk-bp__prosegui { height: 2.9em; }
  .mk-flot--bp-prenotazione { left: 0.8em; right: 0.8em; bottom: -2.2em; rotate: 0deg; }
}
/* 'compatto' => true: la variante ridotta anche in un contenitore largo. */
.mk--compatto .mk-bp__header { height: 3.8em; padding: 0 0.9em; gap: 0.6em; }
.mk--compatto .mk-bp__logo { font-size: 1.25em; }
.mk--compatto .mk-bp__tel { width: 2.7em; padding: 0; justify-content: center; }
.mk--compatto .mk-bp__elenco { grid-template-columns: minmax(0, 1fr); padding: 0.8em 0.8em 0; }
.mk--compatto .mk-bp__lato, .mk--compatto .mk-bp__card--3 { display: none; }
.mk--compatto .mk-bp__barra { display: flex; gap: 0.5em; }
.mk--compatto .mk-bp__barra .mk-bp__campo { flex: 1 1 0; min-width: 0; }
.mk--compatto .mk-bp__barra .mk-bp__campo:first-child .mk-ico { margin-left: 0; color: var(--mk-bp-tenue); }
.mk--compatto .mk-bp__barra .mk-bp__cerca { flex: none; width: 3.2em; height: auto; padding: 0; }
.mk--compatto .mk-bp__card { grid-template-columns: minmax(0, 1fr); grid-template-rows: 9.5em auto; height: auto; }
.mk--compatto .mk-bp__info { gap: 0.9em; padding: 0.85em 0.9em 0.9em; }
.mk--compatto .mk-bp__testa { flex-direction: column; gap: 0.6em; }
.mk--compatto .mk-bp__prezzo { flex-direction: row; align-items: baseline; gap: 0.6em; }
.mk--compatto .mk-bp__card--2 { height: 6.4em; border-bottom: 0; border-radius: 0.45em 0.45em 0 0; box-shadow: none; }
.mk--compatto .mk-bp__card--2 .mk-bp__info { display: none; }
.mk--compatto .mk-bp__pagina { padding: 0.8em 0.8em 1.1em; }
.mk--compatto .mk-bp__indietro { left: 1.4em; top: 1.4em; }
.mk--compatto .mk-bp__galleria { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; height: 12.5em; }
.mk--compatto .mk-bp__g:not(.mk-bp__g--1) { display: none; }
.mk--compatto .mk-bp__dettaglio { grid-template-columns: minmax(0, 1fr); gap: 1.3em; }
.mk--compatto .mk-bp__dati { grid-template-columns: repeat(2, max-content); gap: 0.7em 1.6em; margin-top: 1.1em; }
.mk--compatto .mk-bp__dati > span:last-child { grid-column: 1 / -1; }
.mk--compatto .mk-flot--bp-cin { left: auto; right: -0.4em; }
.mk--compatto .mk-bp__g--1 { grid-row: auto; }
.mk--compatto .mk-flot--bp-prenotazione { left: 0.8em; right: 0.8em; bottom: -2.2em; rotate: 0deg; }

/* Ingresso: le card arrivano una dopo l'altra; nella scheda le foto si
   accendono in sequenza e la card del CIN arriva per ultima. */
.mk--pronto.mk--be-property .mk-bp__card,
.mk--pronto.mk--be-property .mk-bp__g { opacity: 0; transform: translateY(0.6em); }
.mk--in-vista.mk--be-property .mk-bp__card,
.mk--in-vista.mk--be-property .mk-bp__g {
  opacity: 1; transform: none;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(0.25s + var(--k, 0) * 0.1s);
}
@media (prefers-reduced-motion: reduce) {
  .mk--pronto.mk--be-property .mk-bp__card,
  .mk--pronto.mk--be-property .mk-bp__g { opacity: 1; transform: none; }
}

/* ==========================================================================
   Vignette (inc/mockup/mini.php): un dettaglio per modulo, per il bento
   Scala con la cella, ma con un tetto: 1em fra 10 e 14px.
   ========================================================================== */

.mk--mini .mk__scena { font-size: clamp(12px, calc(100cqi / 19), 15px); }
.mk--mini.mk-mini--channel .mk__scena { font-size: clamp(11px, calc(100cqi / 34), 15px); }

.mk-mini__carta {
  display: flex; flex-direction: column; gap: 0.6em;
  padding: 0.9em 1em;
  border-radius: 1em;
  background: var(--carta);
  box-shadow: var(--mk-ombra-2), 0 0 0 1px rgba(0, 66, 73, 0.05);
}
.mk-mini__testa { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.mk-mini__testa b { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.95em; color: var(--teal-profondo); }
.mk-mini__testa b .mk-ico { color: var(--arancio); }
.mk-mini__testa small { font-size: 0.74em; color: var(--grigio); }
.mk-mini__testo { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.mk-mini__testo b { font-size: 0.86em; color: var(--inchiostro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-mini__testo small { font-size: 0.72em; color: var(--grigio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-mini__destra { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2em; flex: none; }
.mk-mini__destra b { font-size: 0.86em; color: var(--teal-profondo); }

/* CRM */
.mk-mini__lead {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.55em 0.6em;
  border-radius: 0.75em;
  background: var(--mk-sfondo);
}
.mk-mini__lead.is-attiva { background: var(--carta); box-shadow: 0 0 0 0.12em var(--teal), var(--mk-ombra-1); }
.mk-mini__azione { display: flex; align-items: center; gap: 0.6em; }
.mk-mini__azione small { font-size: 0.72em; color: var(--grigio); }

/* Channel Manager: tariffa → canali */
.mk-mini__cm { display: grid; grid-template-columns: minmax(0, 0.9fr) 2.2em minmax(0, 1.25fr); align-items: center; }
.mk-mini__tariffa { gap: 0.4em; align-items: flex-start; }
.mk-mini__tariffa small { font-size: 0.74em; color: var(--grigio); }
.mk-mini__prezzo { display: flex; align-items: baseline; gap: 0.5em; }
.mk-mini__prezzo s { font-size: 0.85em; color: var(--grigio-tenue); }
.mk-mini__prezzo b { font-size: 1.7em; color: var(--teal-profondo); letter-spacing: -0.02em; }
.mk-mini__fili { position: relative; align-self: stretch; }
.mk-mini__fili i {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 0.12em dashed var(--menta-scura);
}
.mk-mini__fili i:nth-child(1) { top: 14%; }
.mk-mini__fili i:nth-child(2) { top: 38%; }
.mk-mini__fili i:nth-child(3) { top: 62%; }
.mk-mini__fili i:nth-child(4) { top: 86%; }
.mk-mini__canali { display: grid; gap: 0.4em; }
.mk-mini__canali li {
  display: flex; align-items: center; gap: 0.55em;
  padding: 0.45em 0.6em;
  border-radius: 0.7em;
  background: var(--carta);
  box-shadow: var(--mk-ombra-1), 0 0 0 1px rgba(0, 66, 73, 0.05);
  font-size: 0.86em;
}
.mk-mini__canali .mk-mini__nome { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--inchiostro); }
.mk-mini__canali b { font-size: 0.92em; color: var(--teal-profondo); }
.mk-mini__ok { display: grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--verde-chiaro); color: var(--verde-scuro); }
.mk-mini__ok .mk-ico { width: 0.85em; height: 0.85em; stroke-width: 2.6; }
.mk-mini--channel .mk-canale { font-size: 0.9em; }

/* Booking engine */
.mk-mini__sito { display: inline-flex; align-items: center; gap: 0.45em; }
.mk-mini__sito .mk-be__logo { width: 1.9em; height: 1.9em; font-size: 0.7em; }
.mk-mini__campi { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35em; }
.mk-mini__campi > span {
  display: flex; flex-direction: column; padding: 0.4em 0.6em;
  border-radius: 0.6em; background: var(--mk-sfondo);
}
.mk-mini__campi small { font-size: 0.64em; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grigio); }
.mk-mini__campi b { font-size: 0.84em; color: var(--inchiostro); white-space: nowrap; }
.mk-mini__campo-lungo { grid-column: 1 / -1; }
.mk-mini__risultato { display: flex; align-items: center; gap: 0.6em; padding-top: 0.2em; }
.mk-mini__risultato > b { font-size: 0.95em; color: var(--teal-profondo); white-space: nowrap; }

/* Booking Automation: tre passi in colonna con il filo */
.mk-mini__flusso { position: relative; display: grid; gap: 0.7em; padding-left: 0.1em; }
.mk-mini__flusso::before {
  content: ""; position: absolute; left: 1.2em; top: 1.2em; bottom: 1.2em;
  border-left: 0.12em dashed var(--menta-scura);
}
.mk-mini__passo {
  position: relative;
  display: flex; align-items: center; gap: 0.65em;
  padding: 0.5em 0.7em 0.5em 0.1em;
}
.mk-mini__passo .mk-flot__icona { box-shadow: 0 0 0 0.3em var(--carta); }
.mk-mini__passo .mk-mini__testo b { white-space: normal; }
.mk-mini__passo .mk-mini__testo small { white-space: normal; }
.mk--pronto .mk-mini__passo { opacity: 0.35; }
.mk--in-vista .mk-mini__passo { opacity: 1; transition: opacity 0.5s ease; transition-delay: calc(0.3s + var(--k) * 0.45s); }

/* Punti cassa: lo scontrino sul conto */
.mk-mini__scontrino { gap: 0.45em; }
.mk-mini__riga { display: flex; justify-content: space-between; gap: 0.6em; font-size: 0.84em; color: var(--inchiostro); }
.mk-mini__riga--tot { margin-top: 0.15em; padding-top: 0.5em; border-top: 1px dashed var(--filetto); }
.mk-mini__riga--tot b { font-size: 1.15em; color: var(--teal-profondo); }
.mk-mini__addebito {
  display: inline-flex; align-items: center; gap: 0.45em;
  margin-top: 0.2em; padding: 0.45em 0.7em;
  border-radius: 0.6em;
  background: var(--verde-chiaro); color: var(--verde-scuro);
  font-size: 0.8em; font-weight: 600;
}

/* Property manager (tipo 'property', alias 'multiproperty') */
.mk-mini__struttura { display: flex; align-items: center; gap: 0.6em; }
.mk-mini__sigla {
  display: grid; place-items: center; flex: none;
  width: 2em; height: 2em; border-radius: 0.55em;
  background: var(--menta); color: var(--teal-scuro);
  font-size: 0.74em; font-weight: 700;
}
.mk-mini__barra { display: block; height: 0.4em; margin-top: 0.3em; border-radius: 1em; background: var(--mk-sfondo); overflow: hidden; }
.mk-mini__barra i { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.mk-mini__struttura > b { font-size: 0.86em; color: var(--teal-profondo); }
.mk-mini__canalini { display: flex; gap: 0.25em; flex: none; }
.mk-mini__canalini .mk-canale { font-size: 0.8em; }
@container mk (max-width: 420px) {
  .mk-mini__cm { grid-template-columns: minmax(0, 1fr); gap: 0.6em; }
  .mk-mini__fili { display: none; }
}

/* M4, variante "preventivo": la conversazione al posto dell'email. */
.mk-au__chat { display: flex; flex-direction: column; gap: 0.55em; }
.mk-au__bolla {
  display: flex; flex-direction: column; gap: 0.25em;
  max-width: 92%;
  padding: 0.6em 0.75em;
  border-radius: 0.9em;
  font-size: 0.74em; line-height: 1.45;
  color: var(--grigio-scuro);
}
.mk-au__bolla b { font-size: 0.92em; color: var(--teal-profondo); }
.mk-au__bolla--ospite { align-self: flex-start; background: var(--carta); border-bottom-left-radius: 0.25em; box-shadow: var(--mk-ombra-1), 0 0 0 1px var(--mk-linea); }
.mk-au__bolla--noi { align-self: flex-end; background: var(--teal-chiaro); border-bottom-right-radius: 0.25em; }
.mk-au__offerta {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6em;
  margin-top: 0.35em; padding: 0.55em 0.6em;
  border-radius: 0.7em; background: var(--carta);
}
.mk-au__offerta > span:first-child { display: flex; flex-direction: column; line-height: 1.2; }
.mk-au__offerta small { font-size: 0.85em; color: var(--grigio); }
.mk-au__offerta b { font-size: 1.1em; color: var(--teal-profondo); }
.mk-au__offerta .mk-btn { font-size: 0.95em; }

/* ==========================================================================
   M10 — Preventivatore del CRM (dal prodotto, nello stile del sito)
   Prefisso .mk-pv; il guscio (.mk-tv, barra dell'app opzionale) è quello del
   tableau, colori mappati come in M1. Due card bianche su fondo chiaro:
   intestazione + ricerca, poi la camera con quattro tariffe. Prezzi in
   teal scuro, "Anziché" in un rosso morbido.
   ========================================================================== */

.mk--preventivatore { --mk-l: 72.4; --mk-lm: 60.4; --mk-lc: 38; }
.mk--preventivatore.mk--senza-app { --mk-l: 70; --mk-lm: 58; }

.mk-pv { position: relative; }
.mk-pv__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.8em; padding: 0.9em 0.9em 1.1em; }
.mk-pv__foglio, .mk-pv__camera {
  background: #fff;
  border-radius: 0.6em;
  box-shadow: 0 1px 3px rgba(0, 66, 73, 0.07), 0 0 0 1px rgba(0, 66, 73, 0.06);
}

/* Intestazione: struttura, ospite, contatori */
.mk-pv__testa {
  display: flex; align-items: center; gap: 1em;
  height: 3.6em; padding: 0 1.2em;
  border-bottom: 1px solid var(--mk-linea);
}
.mk-pv__struttura {
  display: flex; align-items: center; gap: 0.45em; margin-right: auto;
  font-size: 1.15em; font-weight: 600; color: var(--teal-profondo); white-space: nowrap;
}
.mk-pv__stemma { width: 1.25em; height: 1.25em; }
.mk-pv__ospite {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.25em 0.85em 0.25em 0.25em;
  border-radius: var(--r-pillola);
  background: var(--teal-chiaro);
  font-size: 0.8em; font-weight: 600; color: var(--teal-profondo); white-space: nowrap;
}
.mk-pv__avatar {
  display: grid; place-items: center; flex: none;
  width: 2em; height: 2em; border-radius: 50%;
  background: var(--teal); color: #fff; font-size: 0.82em; font-weight: 600;
}
.mk-pv__contatori { display: flex; align-self: stretch; }
.mk-pv__contatori > span {
  display: flex; align-items: center; gap: 0.3em; padding: 0 0 0 1.1em; margin-left: 1.1em;
  border-left: 1px solid var(--mk-linea);
  font-size: 0.82em; color: var(--grigio); white-space: nowrap;
}
.mk-pv__contatori b { font-size: 1.45em; font-weight: 600; color: var(--teal); }

/* Ricerca: date, notti, ospiti, nuovo preventivo */
.mk-pv__dati {
  display: flex; align-items: center; gap: 2em;
  height: 4.2em; padding: 0 1.2em;
  white-space: nowrap;
}
.mk-pv__dato { display: flex; flex-direction: column; gap: 0.25em; line-height: 1.2; }
.mk-pv__dato small { display: flex; align-items: center; gap: 0.3em; font-size: 0.7em; font-weight: 500; letter-spacing: 0.04em; color: var(--grigio-tenue); text-transform: uppercase; }
.mk-pv__dato b { font-size: 0.9em; font-weight: 600; color: var(--inchiostro); }
.mk-pv__dato .mk-ico { width: 1.1em; height: 1.1em; color: var(--teal); }
.mk-pv__notti {
  display: flex; align-items: center; gap: 0.35em;
  padding: 0.35em 0.8em; border-radius: var(--r-pillola);
  background: var(--teal-chiaro);
  font-size: 0.9em; font-weight: 600; color: var(--teal-scuro);
}
.mk-pv__notti .mk-ico { width: 1em; height: 1em; }
.mk-pv__nuovo {
  display: flex; align-items: center; gap: 0.4em; margin-left: auto;
  height: 2.5em; padding: 0 1.1em;
  background: var(--teal); border-radius: 0.5em;
  color: #fff; font-size: 0.86em; font-weight: 600;
}
.mk-pv__nuovo .mk-ico { width: 1.1em; height: 1.1em; stroke-width: 2.4; }

/* Card della camera */
.mk-pv__camera-testa {
  display: flex; align-items: center; gap: 1.1em;
  padding: 0.9em 1.2em;
  border-bottom: 1px solid var(--mk-linea);
}
.mk-pv__foto { flex: none; width: 6.4em; height: 3.8em; overflow: hidden; border-radius: 0.4em; }
.mk-pv__foto svg { display: block; width: 100%; height: 100%; }
.mk-pv__camera-info { display: flex; flex-direction: column; gap: 0.35em; min-width: 0; }
.mk-pv__camera-titolo { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3em 0.6em; white-space: nowrap; }
.mk-pv__camera-titolo b { font-size: 1.08em; font-weight: 700; color: var(--teal-profondo); }
.mk-pv__camera-titolo em,
.mk-pv__ideale {
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.2em 0.65em; border-radius: var(--r-pillola);
  font-style: normal; font-size: 0.72em; font-weight: 600;
}
.mk-pv__camera-titolo em { background: var(--verde-chiaro); color: var(--verde-scuro); }
.mk-pv__ideale { background: var(--teal-chiaro); color: var(--teal-scuro); }
.mk-pv__ideale .mk-ico { fill: currentColor; width: 1em; height: 1em; }
.mk-pv__descr { font-size: 0.76em; color: var(--grigio-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Riga tariffa */
.mk-pv__tariffa {
  display: flex; align-items: center; gap: 0.7em;
  height: 3.9em; padding: 0 1.2em;
  border-bottom: 1px solid var(--mk-linea);
  white-space: nowrap;
}
.mk-pv__tariffa:last-child { border-bottom: 0; }
.mk-pv__sigla {
  display: grid; place-items: center; flex: none;
  width: 2.5em; height: 2.5em; border-radius: 50%;
  background: var(--sf); color: var(--c);
  font-size: 0.74em; font-weight: 700; letter-spacing: 0.02em;
}
.mk-pv__sigla--teal    { --sf: var(--teal-chiaro);       --c: var(--teal-scuro); }
.mk-pv__sigla--arancio { --sf: var(--mk-arancio-chiaro); --c: var(--arancio-testo); }
.mk-pv__sigla--verde   { --sf: var(--verde-chiaro);      --c: var(--verde-scuro); }
.mk-pv__tratt { display: flex; flex-direction: column; gap: 0.2em; flex: 1 1 auto; min-width: 0; margin-left: 0.3em; line-height: 1.25; }
.mk-pv__tratt b { font-size: 0.9em; font-weight: 600; color: var(--inchiostro); overflow: hidden; text-overflow: ellipsis; }
.mk-pv__tratt small { font-size: 0.74em; color: var(--grigio-tenue); }
.mk-pv__prezzo { display: flex; flex-direction: column; align-items: flex-end; margin-right: 0.6em; line-height: 1.15; }
.mk-pv__prezzo b { font-size: 1.25em; font-weight: 600; color: var(--teal-scuro); }
.mk-pv__prezzo small { font-size: 0.7em; color: var(--grigio-tenue); }
.mk-pv__prezzo s { color: #d0695c; text-decoration-thickness: 0.08em; }
.mk-pv__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; flex: none;
  height: 2.4em; padding: 0 0.95em;
  border-radius: 0.5em;
  font-size: 0.78em; font-weight: 600;
}
.mk-pv__btn .mk-ico { width: 1.05em; height: 1.05em; }
.mk-pv__btn--apri  { background: #fff; color: var(--teal-scuro); box-shadow: inset 0 0 0 1px var(--menta-scura); }
.mk-pv__btn--invia { background: var(--teal); color: #fff; }

/* Medio: senza l'ospite nell'intestazione né gli ospiti nella ricerca (mk-medio-no). */

/* Compatto: tre tariffe, contatori sotto la struttura, prezzi un filo più piccoli. */
@container mk (max-width: 560px) {
  .mk-pv__main { padding: 0.6em 0.6em 0.8em; gap: 0.6em; }
  .mk-pv__testa { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.35em; height: auto; padding: 0.75em 0.9em; }
  .mk-pv__contatori > span:first-child { border-left: 0; padding-left: 0; margin-left: 0; }
  .mk-pv__contatori > span { margin-left: 0.8em; padding-left: 0.8em; }
  .mk-pv__dati { gap: 1.1em; padding: 0 0.9em; height: 3.8em; }
  .mk-pv__camera-testa { gap: 0.8em; padding: 0.7em 0.9em; }
  .mk-pv__foto { width: 5em; height: 3em; }
  .mk-pv__tariffa { gap: 0.5em; padding: 0 0.9em; height: 4em; }
  .mk-pv__tratt b { white-space: normal; }
  .mk-pv__prezzo b { font-size: 1.15em; }
  .mk-pv__btn { padding: 0 0.7em; }
}
.mk--compatto .mk-pv__main { padding: 0.6em 0.6em 0.8em; gap: 0.6em; }
.mk--compatto .mk-pv__testa { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.35em; height: auto; padding: 0.75em 0.9em; }
.mk--compatto .mk-pv__contatori > span:first-child { border-left: 0; padding-left: 0; margin-left: 0; }
.mk--compatto .mk-pv__contatori > span { margin-left: 0.8em; padding-left: 0.8em; }
.mk--compatto .mk-pv__dati { gap: 1.1em; padding: 0 0.9em; height: 3.8em; }
.mk--compatto .mk-pv__camera-testa { gap: 0.8em; padding: 0.7em 0.9em; }
.mk--compatto .mk-pv__foto { width: 5em; height: 3em; }
.mk--compatto .mk-pv__tariffa { gap: 0.5em; padding: 0 0.9em; height: 4em; }
.mk--compatto .mk-pv__tratt b { white-space: normal; }
.mk--compatto .mk-pv__prezzo b { font-size: 1.15em; }
.mk--compatto .mk-pv__btn { padding: 0 0.7em; }

/* Card flottanti */
.mk-flot--pv-inviato { top: -1.6em; right: -2.2em; rotate: 1.5deg; }
.mk-flot--pv-aperto  { bottom: -2.4em; left: -2.6em; rotate: -1.5deg; }
@container mk (max-width: 820px) {
  .mk-flot--pv-inviato { right: -1em; }
  .mk-flot--pv-aperto  { left: -1em; }
}
@container mk (max-width: 560px) {
  .mk-flot--pv-inviato { top: auto; bottom: -2.2em; left: 0.8em; right: 0.8em; rotate: 0deg; }
}
.mk--compatto .mk-flot--pv-inviato { top: auto; bottom: -2.2em; left: 0.8em; right: 0.8em; rotate: 0deg; }

/* Ingresso: le righe tariffa arrivano una dopo l'altra. */
.mk--pronto.mk--preventivatore .mk-pv__tariffa { opacity: 0; transform: translateX(-0.8em); }
.mk--in-vista.mk--preventivatore .mk-pv__tariffa {
  opacity: 1; transform: none;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(0.2s + var(--k, 0) * 0.1s);
}
@media (prefers-reduced-motion: reduce) {
  .mk--pronto.mk--preventivatore .mk-pv__tariffa { opacity: 1; transform: none; }
}

/* ==========================================================================
   M11 — Analytics / Business Intelligence (dalla dashboard vera, nello stile
   del sito)
   Prefisso .mk-an; guscio .mk-tv come il tableau. Solo grafici e KPI: una
   riga con titolo, periodo e confronto, due grafici in SVG in linea (viewBox
   400 × 210) e quattro card. Serie: ADR in --arancio, RevPAR in --teal,
   anno prima nelle stesse tinte chiare e tratteggiate; occupazione ad area
   teal su velo menta, 2025 in --menta-scura tratteggiato.
   ========================================================================== */

.mk--analytics { --mk-l: 86.4; --mk-lm: 70.4; --mk-lc: 38; }
.mk--analytics.mk--senza-app { --mk-l: 84; --mk-lm: 68; }

.mk-an__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.9em; padding: 1em 1em 1.1em; }

/* Riga del titolo: periodo e confronto */
.mk-an__testa { display: flex; align-items: center; gap: 0.6em; white-space: nowrap; }
.mk-an__titolo { font-size: 1.2em; font-weight: 700; color: var(--teal-profondo); }
.mk-an__struttura { margin-left: 0.4em; padding-left: 0.9em; border-left: 1px solid var(--filetto); font-size: 0.82em; color: var(--grigio-tenue); }
.mk-an__spazio { flex: 1 1 auto; }
.mk-an__chip, .mk-an__date {
  display: inline-flex; align-items: center; gap: 0.45em;
  height: 2.3em; padding: 0 0.95em;
  border-radius: var(--r-pillola);
  background: #fff; box-shadow: inset 0 0 0 1px var(--filetto);
  font-size: 0.8em; font-weight: 500; color: var(--inchiostro);
}
.mk-an__chip.is-attivo { background: var(--teal); box-shadow: none; color: #fff; font-weight: 600; }
.mk-an__date { border-radius: 0.5em; color: var(--teal-profondo); font-weight: 600; }
.mk-an__date .mk-ico { width: 1.1em; height: 1.1em; color: var(--teal); }

/* Grafici: due card bianche affiancate */
.mk-an__grafici { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.9em; }
.mk-an__grafico, .mk-an__card {
  min-width: 0;
  background: #fff;
  border-radius: 0.6em;
  box-shadow: 0 1px 3px rgba(0, 66, 73, 0.07), 0 0 0 1px rgba(0, 66, 73, 0.06);
}
.mk-an__grafico { display: flex; flex-direction: column; gap: 0.6em; padding: 0.9em 1em 0.7em 0.6em; }
.mk-an__grafico figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding-left: 0.4em; white-space: nowrap; }
.mk-an__grafico figcaption > b { font-size: 0.92em; font-weight: 600; color: var(--teal-profondo); }
.mk-an__legenda { display: flex; gap: 1.1em; font-size: 0.7em; color: var(--grigio); }
.mk-an__legenda > span { display: inline-flex; align-items: center; gap: 0.45em; }
.mk-an__l { display: block; width: 1.6em; height: 0.24em; border-radius: 1em; }
.mk-an__l--adr    { background: var(--arancio); }
.mk-an__l--revpar { background: var(--teal); }
.mk-an__l--occ    { height: 0.8em; border-radius: 0.2em; background: rgba(0, 147, 163, 0.3); box-shadow: inset 0 0.18em 0 var(--teal); }
.mk-an__l--prima, .mk-an__l--occ25 { background: repeating-linear-gradient(90deg, #a9b7b8 0 0.32em, transparent 0.32em 0.52em); }
.mk-an__l--occ25 { background: repeating-linear-gradient(90deg, var(--menta-scura) 0 0.32em, transparent 0.32em 0.52em); height: 0.26em; }

.mk-an__svg { display: block; width: 100%; height: auto; overflow: visible; }
.mk-an__griglia path { stroke: #edf2f2; stroke-width: 0.8; fill: none; }
.mk-an__griglia .mk-an__base { stroke: #d6e2e3; }
.mk-an__assi text { fill: var(--grigio-tenue); font-size: 8px; font-family: inherit; }
.mk-an__linea { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.mk-an__linea--adr      { stroke: var(--arancio); }
.mk-an__linea--revpar   { stroke: var(--teal); }
.mk-an__linea--adr25    { stroke: #f8c48c; stroke-width: 1.4; stroke-dasharray: 0.008 0.007; }
.mk-an__linea--revpar25 { stroke: #8fd0d7; stroke-width: 1.4; stroke-dasharray: 0.008 0.007; }
.mk-an__linea--occ25    { stroke: #7cc4cb; stroke-width: 1.5; stroke-dasharray: 0.008 0.007; }
.mk-an__linea--occ      { stroke: var(--teal); stroke-width: 1.6; }
.mk-an__area--occ { fill: rgba(0, 147, 163, 0.18); }
.mk-an__tip circle { fill: var(--arancio); stroke: #fff; stroke-width: 1.4; }
.mk-an__tip rect { fill: var(--teal-profondo); }
.mk-an__tip .mk-an__tip-q { fill: var(--arancio); }
.mk-an__tip text { fill: #fff; font-size: 7px; font-family: inherit; }

/* Card KPI */
.mk-an__kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9em; }
.mk-an__card { display: flex; flex-direction: column; gap: 0.3em; padding: 0.9em 1.1em 0.85em; white-space: nowrap; }
.mk-an__card > small { font-size: 0.76em; color: var(--grigio); }
.mk-an__card > b { font-size: 1.55em; font-weight: 600; color: var(--teal-profondo); line-height: 1.15; letter-spacing: -0.01em; }
.mk-an__piede { display: flex; align-items: center; gap: 0.7em; margin-top: 0.15em; }
.mk-an__delta {
  display: inline-flex; align-items: center; gap: 0.2em;
  padding: 0.15em 0.55em; border-radius: var(--r-pillola);
  background: var(--verde-chiaro); color: var(--verde-scuro);
  font-size: 0.7em; font-weight: 600;
}
.mk-an__delta .mk-ico { width: 1em; height: 1em; }
.mk-an__prima { font-size: 0.7em; color: var(--grigio-tenue); }

/* Compatto: un grafico, quattro KPI su due colonne, una data ogni due. */
@container mk (max-width: 560px) {
  .mk-an__main { padding: 0.7em 0.7em 0.8em; gap: 0.7em; }
  .mk-an__grafici { grid-template-columns: minmax(0, 1fr); }
  .mk-an__kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6em; }
  .mk-an__card { padding: 0.75em 0.85em; }
  .mk-an__card > b { font-size: 1.35em; }
  .mk-an__prima { display: none; }
  .mk-an__alterna { display: none; }
  .mk-an__assi text { font-size: 10px; }
}
.mk--compatto .mk-an__main { padding: 0.7em 0.7em 0.8em; gap: 0.7em; }
.mk--compatto .mk-an__grafici { grid-template-columns: minmax(0, 1fr); }
.mk--compatto .mk-an__kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6em; }
.mk--compatto .mk-an__card { padding: 0.75em 0.85em; }
.mk--compatto .mk-an__card > b { font-size: 1.35em; }
.mk--compatto .mk-an__prima { display: none; }
.mk--compatto .mk-an__alterna { display: none; }
.mk--compatto .mk-an__assi text { font-size: 10px; }

/* Card flottante */
.mk-flot--an-ai { top: -1.6em; right: -1.4em; rotate: 1.5deg; }
@container mk (max-width: 820px) { .mk-flot--an-ai { right: -1em; } }
@container mk (max-width: 560px) {
  .mk-flot--an-ai { top: auto; bottom: -2.2em; left: 0.8em; right: 0.8em; rotate: 0deg; }
}
.mk--compatto .mk-flot--an-ai { top: auto; bottom: -2.2em; left: 0.8em; right: 0.8em; rotate: 0deg; }

/* Ingresso: le linee si disegnano, l'area e le serie tratteggiate salgono,
   il tooltip e le card KPI arrivano dopo. Senza JS (o con movimento
   ridotto) è tutto già al suo posto. Le serie del 2025 sono tratteggiate:
   niente disegno a dasharray, solo dissolvenza. */
.mk--pronto.mk--analytics .mk-an__linea--adr,
.mk--pronto.mk--analytics .mk-an__linea--revpar,
.mk--pronto.mk--analytics .mk-an__linea--occ { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mk--in-vista.mk--analytics .mk-an__linea--adr,
.mk--in-vista.mk--analytics .mk-an__linea--revpar,
.mk--in-vista.mk--analytics .mk-an__linea--occ { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; }
.mk--pronto.mk--analytics .mk-an__area,
.mk--pronto.mk--analytics .mk-an__linea--adr25,
.mk--pronto.mk--analytics .mk-an__linea--revpar25,
.mk--pronto.mk--analytics .mk-an__linea--occ25 { opacity: 0; }
.mk--in-vista.mk--analytics .mk-an__area,
.mk--in-vista.mk--analytics .mk-an__linea--adr25,
.mk--in-vista.mk--analytics .mk-an__linea--revpar25,
.mk--in-vista.mk--analytics .mk-an__linea--occ25 { opacity: 1; transition: opacity 1s ease 0.5s; }
.mk--pronto.mk--analytics .mk-an__tip { opacity: 0; }
.mk--in-vista.mk--analytics .mk-an__tip { opacity: 1; transition: opacity 0.4s ease 1.7s; }
.mk--pronto.mk--analytics .mk-an__card { opacity: 0; transform: translateY(0.6em); }
.mk--in-vista.mk--analytics .mk-an__card {
  opacity: 1; transform: none;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(0.6s + var(--k, 0) * 0.08s);
}
@media (prefers-reduced-motion: reduce) {
  .mk--pronto.mk--analytics .mk-an__linea--adr,
  .mk--pronto.mk--analytics .mk-an__linea--revpar,
  .mk--pronto.mk--analytics .mk-an__linea--occ { stroke-dasharray: none; stroke-dashoffset: 0; }
  .mk--pronto.mk--analytics .mk-an__area,
  .mk--pronto.mk--analytics .mk-an__linea--adr25,
  .mk--pronto.mk--analytics .mk-an__linea--revpar25,
  .mk--pronto.mk--analytics .mk-an__linea--occ25,
  .mk--pronto.mk--analytics .mk-an__tip,
  .mk--pronto.mk--analytics .mk-an__card { opacity: 1; transform: none; }
}

/* ==========================================================================
   M12 — Rooms Manager (property manager), dal BMS vero nello stile del sito
   Prefisso .mk-rm; guscio .mk-tv come il tableau. Barra del modulo in teal
   profondo con la scelta delle unità, toolbar, tabella in una card bianca
   con una riga per unità. Mappatura: pulsante modifica e "Ricerca avanzata"
   blu → --teal; badge della località grigio scuro → teal chiaro; spunte e
   "Prenotabile" verdi → --verde-scuro su --verde-chiaro.
   Colonne: modifica, miniatura, nome, stato (con CIN e lingue), tariffe,
   disponibilità, distribuzione online, contratto. Nel medio vanno via
   disponibilità e contratto, nel compatto restano miniatura, nome e stato.
   ========================================================================== */

.mk--rooms {
  --mk-l: 83.2; --mk-lm: 64.4; --mk-lc: 31;
  --rm-col: 2.4em 6em minmax(0, 1fr) 8.6em 11.4em 8.4em 7.8em 9.2em;
}
.mk--rooms.mk--senza-app { --mk-l: 80.8; --mk-lm: 62; }
@container mk (max-width: 820px) {
  .mk--rooms .mk__scena { --rm-col: 2.4em 6em minmax(0, 1fr) 8.6em 11.4em 7.8em; }
}
@container mk (max-width: 560px) {
  .mk--rooms .mk__scena { --rm-col: 5.4em minmax(0, 1fr) 6.6em; }
}
.mk--rooms.mk--compatto .mk__scena { --rm-col: 5.4em minmax(0, 1fr) 6.6em; }

.mk-rm__main { flex: 1 1 auto; min-width: 0; padding: 0.8em 0.8em 0.9em; }
.mk-rm .mk-tv__titolo.mk-rm__titolo { margin-right: 0.6em; }
.mk-rm__select {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em;
  height: 2em; padding: 0 0.75em;
  background: #fff; border-radius: 0.35em;
  color: var(--inchiostro); font-size: 0.8em; font-weight: 500;
}
.mk-rm__nuova { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.82em; font-weight: 600; color: #fff; }
.mk-rm__nuova .mk-ico { width: 1.05em; height: 1.05em; stroke-width: 2.6; }

/* Toolbar */
.mk-rm__tool { display: flex; align-items: center; gap: 0.5em; padding: 0.75em 0 0.7em; white-space: nowrap; }
.mk-rm__chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.35em 0.6em 0.35em 0.85em; border-radius: var(--r-pillola);
  background: var(--teal); color: #fff; font-size: 0.74em; font-weight: 600;
}
.mk-rm__chip .mk-ico { width: 0.95em; height: 0.95em; stroke-width: 2.6; opacity: 0.85; }
.mk-rm__cerca {
  display: inline-flex; align-items: center; gap: 0.45em;
  width: 13em; padding: 0.42em 0.8em;
  background: #fff; border: 1px solid var(--filetto); border-radius: 0.45em;
  font-size: 0.8em; color: var(--grigio-tenue);
}
.mk-rm__cerca .mk-ico { width: 1em; height: 1em; }
.mk-rm__icone { display: inline-flex; background: #fff; border: 1px solid var(--filetto); border-radius: 0.45em; }
.mk-rm__icone > span { display: grid; place-items: center; width: 2.2em; height: 2.05em; color: var(--grigio); }
.mk-rm__icone > span + span { border-left: 1px solid var(--mk-linea); }
.mk-rm__icone .mk-ico { width: 0.95em; height: 0.95em; }

/* Tabella */
.mk-rm__tabella {
  padding: 0 1em;
  background: #fff;
  border-radius: 0.6em;
  box-shadow: 0 1px 3px rgba(0, 66, 73, 0.07), 0 0 0 1px rgba(0, 66, 73, 0.06);
  overflow: hidden;
}
.mk-rm__r {
  display: grid; grid-template-columns: var(--rm-col); column-gap: 0.9em; align-items: center;
  min-height: 5em; padding: 0.55em 0;
  border-bottom: 1px solid #edf2f2;
}
.mk-rm__r:last-child { border-bottom: 0; }
.mk-rm__r--testa {
  min-height: 0; padding: 0.7em 0 0.55em;
  border-bottom: 2px solid var(--menta-scura);
  white-space: nowrap;
}
/* La misura del testo sta sui figli: sulla riga stringerebbe le colonne in em. */
.mk-rm__r--testa > span { overflow: hidden; text-overflow: ellipsis; font-size: 0.66em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grigio-tenue); }

.mk-rm__modifica {
  display: grid; place-items: center;
  width: 2.2em; height: 2.2em; border-radius: 0.45em;
  background: var(--teal); color: #fff;
}
.mk-rm__modifica .mk-ico { width: 1em; height: 1em; }

.mk-rm__foto { position: relative; display: block; height: 3.9em; overflow: hidden; border-radius: 0.4em; }
.mk-rm__foto svg { display: block; width: 100%; height: 100%; }
.mk-rm__foto i {
  position: absolute; top: 0.3em; left: 0.3em;
  display: inline-flex; align-items: center; gap: 0.25em;
  padding: 0.1em 0.4em; border-radius: 0.3em;
  background: rgba(0, 66, 73, 0.85); color: #fff;
  font-style: normal; font-size: 0.62em; font-weight: 700;
}
.mk-rm__foto i .mk-ico { width: 1em; height: 1em; }

.mk-rm__nome { display: flex; flex-direction: column; gap: 0.35em; min-width: 0; white-space: nowrap; }
.mk-rm__nome > b { font-size: 0.98em; font-weight: 600; color: var(--teal-profondo); overflow: hidden; text-overflow: ellipsis; }
.mk-rm__dove { display: flex; align-items: center; gap: 0.5em; min-width: 0; font-size: 0.74em; color: var(--grigio); }
.mk-rm__dove > span { display: inline-flex; align-items: center; gap: 0.2em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mk-rm__dove .mk-ico { width: 1em; height: 1em; color: var(--grigio-tenue); }
.mk-rm__loc {
  flex: none;
  padding: 0.12em 0.55em; border-radius: 0.3em;
  background: var(--teal-chiaro); color: var(--teal-scuro);
  font-style: normal; font-size: 0.86em; font-weight: 700; letter-spacing: 0.05em;
}

.mk-rm__stato { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3em; white-space: nowrap; }
.mk-rm__pren {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.15em 0.6em; border-radius: var(--r-pillola);
  background: var(--verde-chiaro); color: var(--verde-scuro);
  font-size: 0.72em; font-weight: 600;
}
.mk-rm__pren i { width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }
.mk-rm__stato small { font-size: 0.66em; color: var(--grigio-tenue); letter-spacing: 0.02em; }
.mk-rm__lingue { display: flex; gap: 0.3em; }
.mk-rm__lingue svg { display: block; width: 1.05em; height: 0.7em; border-radius: 0.1em; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }

.mk-rm__periodo { display: flex; flex-direction: column; gap: 0.3em; min-width: 0; white-space: nowrap; line-height: 1.2; }
.mk-rm__periodo > span { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.78em; font-weight: 500; color: var(--teal-scuro); }
.mk-rm__periodo .mk-ico { width: 1em; height: 1em; color: var(--teal); }
.mk-rm__periodo small { font-size: 0.7em; color: var(--grigio); overflow: hidden; text-overflow: ellipsis; }

.mk-rm__canali { display: flex; flex-direction: column; gap: 0.22em; white-space: nowrap; }
.mk-rm__canali > span { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.76em; color: var(--inchiostro); }
.mk-rm__canali .mk-ico {
  width: 1.15em; height: 1.15em; padding: 0.18em; border-radius: 50%;
  background: var(--verde-chiaro); color: var(--verde-scuro); stroke-width: 3.2;
}

.mk-rm__contratto { display: flex; flex-direction: column; gap: 0.25em; white-space: nowrap; }
.mk-rm__contratto b { font-size: 0.8em; font-weight: 600; color: var(--inchiostro); }
.mk-rm__contratto small { display: inline-flex; align-items: center; gap: 0.25em; font-size: 0.7em; color: var(--verde-scuro); }
.mk-rm__contratto .mk-ico { width: 1em; height: 1em; stroke-width: 2.8; }
.mk-rm__vuoto { color: var(--grigio-tenue); }

/* L'unità appena pubblicata (card 1): un velo menta sulla riga. */
.mk-rm__r.is-pubblicata { position: relative; }
.mk-rm__r.is-pubblicata::before {
  content: ""; position: absolute; inset: 0 -1em; z-index: 0;
  background: linear-gradient(90deg, rgba(0, 147, 163, 0.07), rgba(0, 147, 163, 0.03));
  box-shadow: inset 0.22em 0 0 var(--teal);
}
.mk-rm__r.is-pubblicata > * { position: relative; z-index: 1; }

/* Compatto: miniatura, nome e stato; toolbar ridotta. */
@container mk (max-width: 560px) {
  .mk-rm__main { padding: 0.5em 0.5em 0.6em; }
  .mk-rm__tool { padding: 0.55em 0 0.5em; }
  .mk-rm__tabella { padding: 0 0.7em; }
  .mk-rm__r { column-gap: 0.7em; min-height: 4.6em; }
  .mk-rm__foto { height: 3.6em; }
  .mk-rm__r.is-pubblicata::before { inset: 0 -0.7em; }
}
.mk--compatto .mk-rm__main { padding: 0.5em 0.5em 0.6em; }
.mk--compatto .mk-rm__tool { padding: 0.55em 0 0.5em; }
.mk--compatto .mk-rm__tabella { padding: 0 0.7em; }
.mk--compatto .mk-rm__r { column-gap: 0.7em; min-height: 4.6em; }
.mk--compatto .mk-rm__foto { height: 3.6em; }
.mk--compatto .mk-rm__r.is-pubblicata::before { inset: 0 -0.7em; }

/* Card flottanti */
.mk-flot--rm-pubblicata { top: -1.6em; right: -2.2em; rotate: 1.5deg; }
.mk-flot--rm-nuova      { bottom: -2.4em; left: -2.4em; rotate: -1.5deg; }
@container mk (max-width: 820px) {
  .mk-flot--rm-pubblicata { right: -1em; }
  .mk-flot--rm-nuova      { left: -1em; }
}
@container mk (max-width: 560px) {
  .mk-flot--rm-pubblicata { top: auto; bottom: -2.2em; left: 0.8em; right: 0.8em; rotate: 0deg; }
}
.mk--compatto .mk-flot--rm-pubblicata { top: auto; bottom: -2.2em; left: 0.8em; right: 0.8em; rotate: 0deg; }

/* Ingresso: le righe arrivano una dopo l'altra. */
.mk--pronto.mk--rooms .mk-rm__r:not(.mk-rm__r--testa) { opacity: 0; transform: translateY(0.5em); }
.mk--in-vista.mk--rooms .mk-rm__r:not(.mk-rm__r--testa) {
  opacity: 1; transform: none;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(0.2s + var(--k, 0) * 0.08s);
}
@media (prefers-reduced-motion: reduce) {
  .mk--pronto.mk--rooms .mk-rm__r:not(.mk-rm__r--testa) { opacity: 1; transform: none; }
}

/* ==========================================================================
   M13 — Messaggi del CRM (dal BMS vero, nello stile del sito)
   Prefisso .mk-ms; guscio .mk-tv come il tableau. Lista dei contatti e delle
   conversazioni a sinistra, chat al centro, riepilogo del preventivo a destra
   solo nella variante "sito" (.mk--ms-sito) e solo nel livello ampio.
   Mappatura: blu Bootstrap di badge, pulsanti e invio → --teal; bolle
   dell'operatore scure → --teal-profondo; fondo WhatsApp beige → crema
   chiara; badge e pillola WhatsApp → --verde-chiaro / --verde-scuro.
   ========================================================================== */

.mk--messaggi {
  --mk-l: 62.4; --mk-lm: 52.4; --mk-lc: 30;
  --ms-lista: 16.5em; --ms-riep: 15.5em;
}
.mk--messaggi.mk--senza-app { --mk-l: 60; --mk-lm: 50; }
.mk--messaggi.mk--ms-sito { --mk-l: 78.8; }
.mk--messaggi.mk--ms-sito.mk--senza-app { --mk-l: 76.4; }
@container mk (max-width: 820px) { .mk--messaggi .mk__scena { --ms-lista: 15em; } }

.mk-ms__main { flex: 1 1 auto; min-width: 0; padding: 0.8em 0.8em 0.9em; }
.mk-ms .mk-tv__titolo.mk-ms__titolo { margin-right: 0.8em; }
.mk-ms .mk-tv__tabs { margin-right: auto; }

.mk-ms__corpo { display: flex; align-items: stretch; gap: 0.8em; margin-top: 0.8em; }
.mk-ms__lista, .mk-ms__chat, .mk-ms__riepilogo {
  background: #fff;
  border-radius: 0.6em;
  box-shadow: 0 1px 3px rgba(0, 66, 73, 0.07), 0 0 0 1px rgba(0, 66, 73, 0.06);
  overflow: hidden;
}

/* Avatar */
.mk-ms__av {
  display: grid; place-items: center; flex: none;
  width: 2.5em; height: 2.5em; border-radius: 50%;
  font-size: 0.86em; font-weight: 600; letter-spacing: 0.02em; color: #fff;
}
.mk-ms__av--prugna { background: #85597a; }
.mk-ms__av--teal   { background: var(--teal); }
.mk-ms__chi { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; line-height: 1.2; white-space: nowrap; }
.mk-ms__chi b { font-size: 0.92em; font-weight: 600; color: var(--teal-profondo); overflow: hidden; text-overflow: ellipsis; }
.mk-ms__chi small { font-size: 0.72em; color: var(--grigio); }

/* Colonna sinistra: contatto, canali, conversazioni */
.mk-ms__lista { flex: none; width: var(--ms-lista); display: flex; flex-direction: column; }
.mk-ms__contatto { display: flex; align-items: center; gap: 0.6em; padding: 0.9em 0.9em 0.8em; }
.mk-ms__indietro { display: grid; place-items: center; color: var(--grigio-tenue); }
.mk-ms__indietro .mk-ico { width: 1.1em; height: 1.1em; }
.mk-ms__canali {
  display: flex; gap: 0.2em;
  margin: 0 0.8em 0.75em; padding: 0.2em;
  border-radius: 0.5em; background: var(--mk-sfondo);
  box-shadow: inset 0 0 0 1px var(--mk-linea);
}
.mk-ms__canali > span {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 0.35em;
  height: 2.2em; border-radius: 0.38em;
  font-size: 0.74em; font-weight: 500; color: var(--grigio); white-space: nowrap;
}
.mk-ms__canali .mk-ico { width: 1.05em; height: 1.05em; }
.mk-ms__canali .is-attivo { background: #fff; color: var(--teal-profondo); font-weight: 600; box-shadow: var(--mk-ombra-1); }
.mk-ms__canali i {
  display: grid; place-items: center; min-width: 1.45em; height: 1.45em; padding: 0 0.3em; border-radius: var(--r-pillola);
  background: var(--grigio-chiaro); color: var(--grigio-scuro); font-style: normal; font-size: 0.82em; font-weight: 700;
}
.mk-ms__canali .is-attivo i { background: var(--teal-profondo); color: #fff; }

.mk-ms__conv {
  display: flex; flex-direction: column; gap: 0.3em;
  padding: 0.7em 0.9em 0.75em;
  border-top: 1px solid var(--mk-linea);
  white-space: nowrap; line-height: 1.25;
}
.mk-ms__conv.is-attiva { background: var(--teal-chiaro); box-shadow: inset 0.22em 0 0 var(--teal); }
.mk-ms__conv-testa { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
.mk-ms__conv-testa > span { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.72em; color: var(--grigio); }
.mk-ms__conv.is-attiva .mk-ms__conv-testa > span { color: var(--teal-profondo); font-weight: 600; }
.mk-ms__nuovi {
  display: grid; place-items: center; min-width: 1.5em; height: 1.5em; border-radius: 50%;
  background: #6f9a5e; color: #fff; font-style: normal; font-size: 0.9em; font-weight: 700;
}
.mk-ms__badge {
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.18em 0.5em; border-radius: 0.3em;
  font-style: normal; font-size: 0.64em; font-weight: 700; letter-spacing: 0.05em;
}
.mk-ms__badge .mk-ico { width: 1.05em; height: 1.05em; }
.mk-ms__badge--whatsapp   { background: var(--verde-chiaro); color: var(--verde-scuro); }
.mk-ms__badge--preventivo { background: var(--teal); color: #fff; }
.mk-ms__badge--richiesta  { background: var(--grigio-chiaro); color: var(--grigio-scuro); }
.mk-ms__conv small { font-size: 0.72em; color: var(--grigio); }
.mk-ms__ant { font-size: 0.78em; color: var(--inchiostro); overflow: hidden; text-overflow: ellipsis; }

/* Chat */
.mk-ms__chat { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mk-ms__testa { display: flex; align-items: center; gap: 0.7em; height: 3.8em; padding: 0 1.1em; border-bottom: 1px solid var(--mk-linea); }
.mk-ms__online { display: inline-flex; align-items: center; gap: 0.35em; }
.mk-ms__online i { width: 0.55em; height: 0.55em; border-radius: 50%; background: #6f9a5e; }
.mk-ms__wa {
  display: inline-flex; align-items: center; gap: 0.35em; align-self: flex-start;
  padding: 0.15em 0.6em; border-radius: var(--r-pillola);
  background: var(--verde-chiaro); color: var(--verde-scuro);
  font-size: 0.66em; font-weight: 700; letter-spacing: 0.05em;
}
.mk-ms__wa .mk-ico { width: 1.1em; height: 1.1em; }
.mk-ms__wa > span { margin-left: 0.3em; padding-left: 0.6em; border-left: 1px solid rgba(79, 97, 69, 0.3); font-weight: 500; letter-spacing: 0.02em; }

.mk-ms__flusso {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.7em;
  padding: 1em 1.3em 1.1em;
  background: #f6f0e6;
}
.mk--ms-sito .mk-ms__flusso { background: var(--mk-sfondo); }
.mk-ms__giorno {
  align-self: center;
  padding: 0.3em 0.9em; border-radius: var(--r-pillola);
  background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1px rgba(0, 66, 73, 0.05);
  font-size: 0.7em; font-weight: 500; color: var(--grigio);
}
.mk-ms__msg {
  max-width: 74%;
  display: flex; flex-direction: column; gap: 0.15em;
  padding: 0.5em 0.8em 0.35em;
  border-radius: 0.65em;
  font-size: 0.84em; line-height: 1.35; color: var(--inchiostro);
}
.mk-ms__msg > small { font-size: 0.8em; font-weight: 600; color: var(--teal-scuro); }
.mk-ms__msg--ospite { align-self: flex-start; background: #fff; border-top-left-radius: 0.15em; box-shadow: 0 1px 2px rgba(0, 66, 73, 0.08); }
.mk-ms__msg--noi { align-self: flex-end; background: var(--teal-profondo); color: #fff; border-top-right-radius: 0.15em; }
.mk-ms__msg--noi > small { color: var(--menta-scura); }
.mk-ms__ora { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.3em; align-self: flex-end; font-size: 0.78em; color: var(--grigio-tenue); }
.mk-ms__msg--noi .mk-ms__ora { color: rgba(255, 255, 255, 0.7); }
.mk-ms .mk-ms__letto { width: 1.3em; height: 1.3em; color: #6f9a5e; stroke-width: 2.4; }
.mk-ms__msg--noi .mk-ms__letto { color: #a9d993; }

/* Messaggi "card" della chat del sito (richiesta e preventivo) */
.mk-ms__msg--card { padding: 0.65em 0.9em 0.5em; gap: 0.1em; }
.mk-ms__msg--card b { display: inline-flex; align-items: center; gap: 0.4em; margin-bottom: 0.1em; font-size: 1.05em; font-weight: 600; color: var(--teal-profondo); }
.mk-ms__msg--card b .mk-ico { width: 1.05em; height: 1.05em; color: var(--teal); }
.mk-ms__msg--card > span { font-size: 0.92em; color: var(--grigio); }
.mk-ms__msg--noi.mk-ms__msg--card b,
.mk-ms__msg--noi.mk-ms__msg--card b .mk-ico { color: #fff; }
.mk-ms__msg--noi.mk-ms__msg--card > span { color: rgba(255, 255, 255, 0.8); }

/* Messaggio template WhatsApp */
.mk-ms__template {
  align-self: flex-end;
  width: 28em; max-width: 80%;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 0.65em; border-top-right-radius: 0.15em;
  box-shadow: 0 1px 2px rgba(0, 66, 73, 0.08);
  font-size: 0.84em; line-height: 1.35; overflow: hidden;
}
.mk-ms__tpl-testa {
  display: flex; align-items: center; gap: 0.4em;
  padding: 0.4em 0.9em;
  background: var(--verde-chiaro); color: var(--verde-scuro);
  font-size: 0.82em; font-weight: 700; letter-spacing: 0.03em;
}
.mk-ms__tpl-testa .mk-ico { width: 1.1em; height: 1.1em; }
.mk-ms__tpl-corpo { display: flex; flex-direction: column; gap: 0.35em; padding: 0.65em 0.9em 0.6em; }
.mk-ms__tpl-corpo b { font-weight: 600; color: var(--teal-profondo); }
.mk-ms__tpl-corpo small { font-size: 0.88em; color: var(--grigio-tenue); }
.mk-ms__tpl-link {
  display: flex; align-items: center; justify-content: center; gap: 0.4em;
  margin: 0 0.9em; padding: 0.55em 0;
  border-top: 1px solid var(--mk-linea);
  color: var(--teal); font-weight: 600;
}
.mk-ms__tpl-link .mk-ico { width: 1em; height: 1em; }
.mk-ms__template .mk-ms__ora { padding: 0 0.8em 0.4em; }

/* Campo per scrivere */
.mk-ms__scrivi { display: flex; align-items: center; gap: 0.7em; padding: 0.7em 1em; border-top: 1px solid var(--mk-linea); }
.mk-ms__clip { display: grid; place-items: center; color: var(--grigio-tenue); }
.mk-ms__clip .mk-ico { width: 1.2em; height: 1.2em; }
.mk-ms__campo {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; height: 2.5em; padding: 0 1em;
  border-radius: var(--r-pillola); box-shadow: inset 0 0 0 1px var(--filetto);
  font-size: 0.82em; color: var(--grigio-tenue); white-space: nowrap; overflow: hidden;
}
.mk-ms__invia {
  display: grid; place-items: center; flex: none;
  width: 2.4em; height: 2.4em; border-radius: 50%;
  background: var(--teal); color: #fff;
}
.mk-ms__invia .mk-ico { width: 1.1em; height: 1.1em; margin: 0.1em 0.1em 0 0; }

/* Riepilogo del preventivo (variante sito, livello ampio) */
.mk-ms__riepilogo { flex: none; width: var(--ms-riep); display: flex; flex-direction: column; gap: 0.6em; padding: 1em 1em 1em; white-space: nowrap; }
.mk-ms__riep-testa { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
.mk-ms__riep-badge { padding: 0.25em 0.65em; border-radius: 0.3em; background: var(--teal); color: #fff; font-style: normal; font-size: 0.74em; font-weight: 600; }
.mk-ms__riep-stato { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.7em; font-weight: 600; color: var(--verde-scuro); }
.mk-ms__riep-stato i { width: 0.55em; height: 0.55em; border-radius: 50%; background: #6f9a5e; }
.mk-ms__riep-nome { font-size: 1em; font-weight: 600; color: var(--teal-profondo); }
.mk-ms__riep-date { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.6em; }
.mk-ms__riep-date > span { display: flex; flex-direction: column; line-height: 1.25; }
.mk-ms__riep-date b { font-size: 0.8em; font-weight: 600; color: var(--inchiostro); }
.mk-ms__riep-date small { font-size: 0.66em; color: var(--grigio-tenue); }
.mk-ms__riep-ospiti { display: inline-flex; align-items: center; gap: 0.4em; padding-bottom: 0.6em; border-bottom: 1px solid var(--mk-linea); font-size: 0.78em; font-weight: 500; color: var(--inchiostro); }
.mk-ms__riep-ospiti .mk-ico { width: 1.05em; height: 1.05em; color: var(--teal); }
.mk-ms__riep-titolo { font-size: 0.8em; color: var(--inchiostro); }
.mk-ms__riep-titolo b { color: var(--teal); }
.mk-ms__proposta {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6em;
  padding: 0.55em 0.65em; border-radius: 0.45em; background: var(--mk-sfondo);
}
.mk-ms__proposta > span:first-child { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; line-height: 1.25; }
.mk-ms__proposta > span:first-child b { font-size: 0.72em; font-weight: 600; color: var(--inchiostro); white-space: normal; }
.mk-ms__proposta > span:first-child small { font-size: 0.62em; color: var(--grigio); white-space: normal; }
.mk-ms__prezzo { display: flex; flex-direction: column; align-items: flex-end; flex: none; line-height: 1.2; }
.mk-ms__prezzo b { font-size: 0.76em; font-weight: 600; color: var(--teal-scuro); }
.mk-ms__prezzo s { font-size: 0.6em; color: #d0695c; }
.mk-ms__altre { font-size: 0.7em; color: var(--grigio); }
.mk-ms__visualizza {
  display: flex; align-items: center; justify-content: center; gap: 0.4em;
  margin-top: auto; height: 2.5em; border-radius: 0.45em;
  background: var(--teal); color: #fff; font-size: 0.78em; font-weight: 600;
}
.mk-ms__visualizza .mk-ico { width: 1em; height: 1em; }

/* Compatto: la sola chat, un filo più compatta. */
@container mk (max-width: 560px) {
  .mk-ms__main { padding: 0.5em 0.5em 0.6em; }
  .mk-ms__corpo { margin-top: 0.5em; }
  .mk-ms__testa { height: 3.4em; padding: 0 0.8em; }
  .mk-ms__flusso { padding: 0.8em 0.8em 0.9em; gap: 0.55em; }
  .mk-ms__msg, .mk-ms__template { max-width: 86%; }
  .mk-ms__scrivi { padding: 0.6em 0.7em; gap: 0.5em; }
}
.mk--compatto .mk-ms__main { padding: 0.5em 0.5em 0.6em; }
.mk--compatto .mk-ms__corpo { margin-top: 0.5em; }
.mk--compatto .mk-ms__testa { height: 3.4em; padding: 0 0.8em; }
.mk--compatto .mk-ms__flusso { padding: 0.8em 0.8em 0.9em; gap: 0.55em; }
.mk--compatto .mk-ms__msg, .mk--compatto .mk-ms__template { max-width: 86%; }
.mk--compatto .mk-ms__scrivi { padding: 0.6em 0.7em; gap: 0.5em; }

/* Card flottanti */
.mk-flot--ms-nuovo  { top: -1.6em; right: -2.2em; rotate: 1.5deg; }
.mk-flot--ms-aperto { bottom: -2.4em; left: -2.4em; rotate: -1.5deg; }
@container mk (max-width: 820px) {
  .mk-flot--ms-nuovo  { right: -1em; }
  .mk-flot--ms-aperto { left: -1em; }
}
@container mk (max-width: 560px) {
  .mk-flot--ms-nuovo { top: auto; bottom: -3.4em; left: 0.8em; right: 0.8em; rotate: 0deg; }
}
.mk--compatto .mk-flot--ms-nuovo { top: auto; bottom: -3.4em; left: 0.8em; right: 0.8em; rotate: 0deg; }

/* Ingresso: i messaggi arrivano uno dopo l'altro. */
.mk--pronto.mk--messaggi .mk-ms__msg,
.mk--pronto.mk--messaggi .mk-ms__template { opacity: 0; transform: translateY(0.5em); }
.mk--in-vista.mk--messaggi .mk-ms__msg,
.mk--in-vista.mk--messaggi .mk-ms__template {
  opacity: 1; transform: none;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(0.3s + var(--k, 0) * 0.35s);
}
@media (prefers-reduced-motion: reduce) {
  .mk--pronto.mk--messaggi .mk-ms__msg,
  .mk--pronto.mk--messaggi .mk-ms__template { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Livello "telefono" (contenitore ≤ 420 px)
   Con la sola variante compatta, su un telefono il testo dei mockup stava fra
   i 5 e i 7 px: si vedevano come immagini sfocate. Qui la larghezza di
   progetto si stringe ancora, mockup per mockup, fino a dove il contenuto
   regge senza troncarsi:
   - tableau e channel sono griglie di giorni: la griglia diventa più larga
     del riquadro e .mk-finestra taglia gli ultimi giorni a destra, come la
     timeline vera (5-6 giorni leggibili invece di 7 illeggibili);
   - la spiaggia no: sotto 26.5 l'ombrellone della card esce dal taglio;
   - la cassa passa a 2 colonne e 6 prodotti, altrimenti i nomi si troncano.
   Deve restare in fondo al file, dopo i blocchi compatti dei singoli mockup.
   -------------------------------------------------------------------------- */
@container mk (max-width: 420px) {
  .mk--tableau .mk__scena        { font-size: calc(100cqi / 26); }
  .mk .mk-flot--tb-nuova         { bottom: -3.4em; }   /* copriva la riga "Disponibili" */
  .mk--channel .mk__scena        { font-size: calc(100cqi / 29); --cm-c: 3em; }
  .mk--rooms .mk__scena          { font-size: calc(100cqi / 28); }
  .mk--messaggi .mk__scena       { font-size: calc(100cqi / 27); }
  .mk--spiaggia .mk__scena       { font-size: calc(100cqi / 26.5); }
  .mk--preventivatore .mk__scena { font-size: calc(100cqi / 31); }
  .mk--analytics .mk__scena      { font-size: calc(100cqi / 31); }
  .mk--bookingengine .mk__scena  { font-size: calc(100cqi / 28); }
  .mk--cassa .mk__scena          { font-size: calc(100cqi / 30); --mk-pos-col: 2; --mk-pos-conto: 12em; }
  .mk--cassa .mk-pos__prodotto:nth-child(n+7) { display: none; }
}

/* ==========================================================================
   M5b — La cassa nel browser con il saltafila sul telefono
   Dal mockup di Gaia (Hotel e villaggi, 8/10/2026): misure del file / 10.
   ========================================================================== */
.mk--cassaweb { --mk-l: 62; --mk-lm: 62; --mk-lc: 44; }

/* Il telefono è ancorato in basso: il margine sotto lo fa scendere sotto la
   barra scura, che così si legge (Luca, 8/10/2026). */
.mk-cw { position: relative; padding: 0 0 7em 11em; color: #0b3f46; }
.mk-cw.mk-cw--solo { padding: 0; }
.mk-cw__finestra { border-radius: 1.6em; box-shadow: 0 1.8em 4em rgba(11, 63, 70, 0.14), 0 0 0 1px #dce7e8; }
.mk-cw__app { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1em; padding: 1.2em; background: #f7fafa; }

.mk-cw__barra { display: flex; align-items: center; gap: 1.2em; padding: 1em 1.4em; border-radius: 0.6em; background: #0b3f46; color: #cfe3e5; font-size: 1em; white-space: nowrap; }
.mk-cw__barra b { font-size: 1.1em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.mk-cw__barra em { padding: 0.2em 0.8em; border-radius: 999px; background: #ddf0d5; color: #2f6b2a; font-size: 0.9em; font-style: normal; font-weight: 600; }
.mk-cw__spazio { flex: 1 1 0; }

.mk-cw__corpo { display: grid; grid-template-columns: minmax(0, 1fr) 21em; gap: 1em; }
.mk-cw__catalogo { display: flex; flex-direction: column; gap: 0.8em; min-width: 0; }
.mk-cw__categorie { display: flex; align-items: center; gap: 0.6em; }
.mk-cw__categorie > span { padding: 0.3em 0.8em; border-radius: 0.4em; border: 1px solid #e6eceb; background: #fff; font-size: 0.9em; font-weight: 600; white-space: nowrap; }
.mk-cw__categorie > span.is-attiva { border-color: #0b3f46; background: #0b3f46; color: #fff; }
.mk-cw__categorie > .mk-cw__pagine { margin-left: auto; padding: 0; border: 0; background: none; font-weight: 400; color: #4f6468; }
.mk-cw__griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6em; }
.mk-cw__prodotto {
  display: flex; flex-direction: column; justify-content: space-between; gap: 0.6em;
  min-height: 5.2em; padding: 0.8em;
  border: 1px solid #e6eceb; border-left: 0.3em solid #e6eceb; border-radius: 0.6em;
  background: #fff;
}
.mk-cw__prodotto span { font-size: 0.9em; line-height: 1.25; }
.mk-cw__prodotto b { font-size: 1.1em; font-weight: 700; }
.mk-cw__prodotto.is-evidenza { border-left-color: #e0a030; }

.mk-cw__conto { display: flex; flex-direction: column; padding: 1em 1.2em; border: 1px solid #e6eceb; border-radius: 0.8em; background: #fff; }
.mk-cw__azioni { display: flex; justify-content: space-between; padding-bottom: 0.4em; font-size: 0.9em; color: #4f6468; }
.mk-cw__riga { display: grid; grid-template-columns: minmax(0, 1fr) 1.8em 4.6em; gap: 0.6em; align-items: center; padding: 0.7em 0; border-bottom: 1px solid #eef2f2; }
.mk-cw__nome { display: flex; flex-direction: column; min-width: 0; }
.mk-cw__nome b { font-size: 1em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-cw__nome small { font-size: 0.8em; color: #4f6468; white-space: nowrap; }
.mk-cw__qta { border-radius: 0.4em; background: #f4f6f5; font-size: 1em; font-weight: 700; text-align: center; }
.mk-cw__parziale { font-size: 1em; font-weight: 600; text-align: right; white-space: nowrap; }
.mk-cw__totale { display: flex; justify-content: space-between; align-items: baseline; padding: 1em 0 0.8em; }
.mk-cw__totale span { font-size: 1em; color: #4f6468; }
.mk-cw__totale b { font-size: 2.2em; font-weight: 700; line-height: 1; white-space: nowrap; }
.mk-cw__paga { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
.mk-cw__paga span { padding: 0.7em 0; border-radius: 0.6em; color: #fff; font-size: 1em; font-weight: 700; text-align: center; }
.mk-cw__contanti { background: #0f7580; }
.mk-cw__carta { background: #2e3f6b; }
.mk-cw__preconto { margin-top: 0.6em; padding: 0.6em 0; border: 1px solid #e6eceb; border-radius: 0.6em; font-size: 1em; font-weight: 600; text-align: center; }

.mk-cw__nota { display: flex; align-items: center; gap: 0.8em; padding: 0.8em 1.2em; border-radius: 0.6em; background: #fbefd6; font-size: 1em; white-space: nowrap; }
.mk-cw__nota b { color: #9a6a12; }
.mk-cw__nota span { margin-left: auto; color: #4f6468; }

/* Il telefono dell'ospite, davanti alla finestra in basso a sinistra. */
.mk-cw__tel { position: absolute; left: -1em; bottom: 0; width: 19em; padding: 0.8em; border-radius: 3em; background: #0b3f46; box-shadow: 0 1.8em 4em rgba(11, 63, 70, 0.14); }
.mk-cw__schermo { display: flex; flex-direction: column; overflow: hidden; border-radius: 2.3em; background: #fffbf4; }
.mk-cw__stato { display: flex; justify-content: space-between; align-items: center; padding: 0.8em 1.4em 0.4em; font-size: 0.8em; font-weight: 600; }
.mk-cw__stato i { width: 6em; height: 1.5em; border-radius: 999px; background: #0b3f46; }
.mk-cw__copertina { display: flex; flex-direction: column; margin: 0.4em 1em 0; padding: 1.2em; border-radius: 1.2em; background: linear-gradient(180deg, #9fd3e0 0%, #f3d9a8 100%); color: #fff; }
.mk-cw__copertina b { font-size: 1.3em; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.mk-cw__copertina span { font-size: 0.8em; }
.mk-cw__chip { display: flex; gap: 0.4em; padding: 0.8em 1em 0.2em; }
.mk-cw__chip span { padding: 0.2em 0.6em; border: 1px solid #e6dccb; border-radius: 999px; font-size: 0.75em; font-weight: 600; white-space: nowrap; }
.mk-cw__chip span.is-attiva { border-color: #0f7580; background: #0f7580; color: #fff; }
.mk-cw__menu { padding: 0 1.2em; }
.mk-cw__piatto { display: flex; flex-direction: column; gap: 0.3em; padding: 0.8em 0; border-bottom: 1px solid #eee6d8; }
.mk-cw__piatto b { font-size: 1em; font-weight: 700; }
.mk-cw__piatto span { font-size: 0.75em; line-height: 1.35; color: #4f6468; }
.mk-cw__piatto em { font-size: 1em; font-style: normal; font-weight: 700; color: #0f7580; }
.mk-cw__carrello { display: flex; justify-content: space-between; margin: 1em; padding: 0.8em 1em; border-radius: 1em; background: #0f7580; color: #fff; font-size: 0.9em; font-weight: 700; }

/* Compatta (sotto i 560 px): la finestra prende tutta la larghezza (col
   margine a sinistra la cassa restava dietro al telefono, Luca 10/10/2026),
   due colonne di tessere, conto più stretto; il telefono è appena più stretto
   che sul desktop (a 15em i testi andavano a capo, a 19em era troppo
   largo: Luca 10/10/2026),
   scende sotto la finestra e copre solo l'angolo in basso a sinistra. */
@container mk (max-width: 560px) {
  .mk-cw:not(.mk-cw--solo) { padding: 0 0 18em; }
  .mk-cw__tel { left: -0.5em; }
  .mk-cw__corpo { grid-template-columns: minmax(0, 1fr) 17em; }
  .mk-cw__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-cw__prodotto:nth-child(n+7) { display: none; }
  .mk-cw__tel { width: 17em; }
  .mk-cw__piatto:nth-child(3) { display: none; }
}

/* ==========================================================================
   M14 — L'estratto conto nell'area proprietari
   Dal mockup di Gaia (Property manager, 8/10/2026): misure del file / 10.
   ========================================================================== */
.mk--estratto { --mk-l: 56; --mk-lm: 56; --mk-lc: 50; }
.mk-ec__finestra { border-radius: 1.6em; box-shadow: 0 1.8em 4em rgba(11, 63, 70, 0.14), 0 0 0 1px #dce7e8; }
.mk-ec { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1em; padding: 1.2em; background: #f7fafa; color: #0b3f46; }
.mk-ec__barra { display: flex; align-items: center; gap: 1.2em; padding: 1em 1.4em; border-radius: 0.6em; background: #0b3f46; white-space: nowrap; }
.mk-ec__barra b { font-size: 1.1em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.mk-ec__scheda { padding: 0.3em 0.8em; border-radius: 0.4em; background: #fff; color: #0b3f46; font-size: 1em; font-weight: 600; }
.mk-ec__chi { margin-left: auto; font-size: 1em; color: #cfe3e5; }
.mk-ec__testa { display: flex; align-items: center; gap: 1em; white-space: nowrap; }
.mk-ec__testa b { font-size: 1.3em; font-weight: 700; }
.mk-ec__testa span { font-size: 1em; color: #4f6468; }
.mk-ec__testa em { margin-left: auto; padding: 0.5em 1em; border: 1px solid #9ccfd3; border-radius: 0.6em; color: #0f7580; font-size: 1em; font-style: normal; font-weight: 600; }
.mk-ec__tabella { overflow: hidden; border: 1px solid #e6eceb; border-radius: 0.8em; background: #fff; }
.mk-ec__riga { display: grid; grid-template-columns: minmax(0, 1fr) 9em 5em 9em; gap: 1em; padding: 0.9em 1.4em; border-top: 1px solid #eef2f2; font-size: 1.1em; white-space: nowrap; }
.mk-ec__riga > :nth-child(3) { text-align: center; }
.mk-ec__riga > :nth-child(4) { text-align: right; font-weight: 600; }
.mk-ec__riga--titoli { padding-block: 0.8em; border-top: 0; font-size: 0.9em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #4f6468; }
.mk-ec__canale { color: #4f6468; }
.mk-ec__totale { display: flex; justify-content: space-between; align-items: baseline; padding: 1.2em 1.4em; background: #e3f4f5; }
.mk-ec__totale span { font-size: 1.2em; font-weight: 700; }
.mk-ec__totale b { font-size: 2em; font-weight: 700; white-space: nowrap; }
@container mk (max-width: 420px) {
  .mk-ec__riga { grid-template-columns: minmax(0, 1fr) 7em 3em 7.5em; gap: 0.6em; padding-inline: 1em; }
  .mk-ec__chi { display: none; }
}

/* ==========================================================================
   M15 — Il sito web della struttura con il pannello del CMS
   (inc/mockup/sitoweb.php, 9/10/2026). Scena da 54 em.
   ========================================================================== */
.mk--sitoweb { --mk-l: 54; --mk-lm: 54; --mk-lc: 40; }
.mk-sw { position: relative; padding: 0 3em 7em 0; color: #0b3f46; }
.mk-sw__finestra { border-radius: 1.4em; box-shadow: 0 1.8em 4em rgba(11, 63, 70, 0.14), 0 0 0 1px #dce7e8; }
.mk-sw__sito { flex: 1 1 auto; min-width: 0; background: #fff; }
.mk-sw__testa { position: relative; height: 21em; overflow: hidden; color: #fff; }
.mk-sw__foto { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mk-sw__menu { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 1.4em; padding: 1em 1.6em; }
.mk-sw__logo { display: flex; flex-direction: column; font-family: var(--font-titoli); font-size: 1.2em; font-weight: 700; line-height: 1; letter-spacing: 0.01em; color: #fff; }
.mk-sw__logo small { margin-top: 0.15em; font-family: var(--font); font-size: 0.5em; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: #f3d9bf; }
.mk-sw__voci { display: flex; gap: 1.2em; margin-left: auto; font-size: 0.85em; font-weight: 600; }
.mk-sw__prenota { margin-left: auto; padding: 0.55em 1.1em; border-radius: 999px; background: #c8863a; font-size: 0.8em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.mk-sw__voci + .mk-sw__prenota { margin-left: 0; }
.mk-sw__titolo { position: absolute; left: 0; right: 0; top: 6.2em; display: flex; flex-direction: column; align-items: center; gap: 0.3em; text-align: center; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); }
.mk-sw__titolo small { font-size: 0.7em; letter-spacing: 0.35em; text-transform: uppercase; }
.mk-sw__titolo b { font-family: var(--font-titoli); font-size: 2.3em; font-weight: 700; line-height: 1.05; }
.mk-sw__cerca {
  position: absolute; left: 3.5em; right: 3.5em; bottom: 2em;
  display: flex; align-items: stretch;
  overflow: hidden; border-radius: 0.6em; background: #fff; color: #0b3f46;
  box-shadow: 0 0.8em 2em rgba(0, 0, 0, 0.18);
}
.mk-sw__cerca span { flex: 1 1 0; display: flex; flex-direction: column; gap: 0.15em; padding: 0.7em 1em; border-right: 1px solid #ece6dc; font-size: 0.95em; font-weight: 600; white-space: nowrap; }
.mk-sw__cerca small { font-size: 0.65em; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #6c7b7e; }
.mk-sw__cerca b { flex: 1.2 1 0; display: grid; place-items: center; padding: 0 1em; background: #8a5a2b; color: #fff; font-size: 0.75em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }
.mk-sw__camere { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; padding: 1.4em 1.6em 1.6em; }
.mk-sw__camera { display: flex; flex-direction: column; gap: 0.2em; min-width: 0; }
.mk-sw__camera svg { display: block; width: 100%; height: 6.5em; margin-bottom: 0.5em; border-radius: 0.6em; }
.mk-sw__camera b { font-family: var(--font-titoli); font-size: 1em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-sw__camera small { font-size: 0.75em; color: #6c7b7e; }

/* Il pannello del CMS, davanti alla finestra. */
.mk-sw__cms {
  position: absolute; right: 0; bottom: 0; width: 25em;
  overflow: hidden; border-radius: 1.2em; background: #fff;
  box-shadow: 0 1.8em 4em rgba(11, 63, 70, 0.2), 0 0 0 1px #dce7e8;
}
.mk-sw__cms-testa { display: flex; justify-content: space-between; align-items: center; padding: 0.9em 1.2em; background: #111827; color: #fff; }
.mk-sw__cms-testa b { font-size: 0.95em; font-weight: 600; }
.mk-sw__cms-testa span { font-size: 0.7em; letter-spacing: 0.08em; color: #cbd5e1; }
.mk-sw__cms-corpo { display: grid; grid-template-columns: 9em minmax(0, 1fr); }
.mk-sw__cms-voci { list-style: none; margin: 0; padding: 0.8em 0.6em; background: #1f2937; }
.mk-sw__cms-voci li { padding: 0.45em 0.7em; border-radius: 0.4em; color: #cbd5e1; font-size: 0.8em; }
.mk-sw__cms-voci li.is-attiva { background: #c8863a; color: #fff; font-weight: 600; }
.mk-sw__cms-stile { display: flex; flex-direction: column; gap: 0.7em; padding: 1em 1.2em; }
.mk-sw__cms-etichetta { font-size: 0.7em; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #b3580c; }
.mk-sw__cms-riga { display: flex; justify-content: space-between; align-items: center; font-size: 0.85em; }
.mk-sw__aa { font-family: var(--font-titoli); font-size: 1.4em; font-weight: 700; line-height: 1; }
.mk-sw__colori { display: flex; gap: 0.35em; }
.mk-sw__colori i { width: 1.2em; height: 1.2em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.mk-sw__seo { display: flex; align-items: center; gap: 0.7em; margin-top: 0.3em; padding-top: 0.8em; border-top: 1px solid #eef2f2; }
.mk-sw__seo b { display: grid; place-items: center; width: 2.6em; height: 2.6em; border: 0.22em solid #22c55e; border-radius: 50%; color: #15803d; font-size: 0.95em; font-weight: 700; }
.mk-sw__seo span { display: flex; flex-direction: column; font-size: 0.85em; font-weight: 600; }
.mk-sw__seo small { font-size: 0.85em; font-weight: 400; color: #6c7b7e; }

@container mk (max-width: 560px) {
  .mk-sw { padding: 0 1.5em 6em 0; }
  .mk-sw__testa { height: 19em; }
  .mk-sw__cerca { left: 1.5em; right: 1.5em; }
  .mk-sw__camere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-sw__camera:nth-child(3) { display: none; }
  .mk-sw__cms { width: 22em; }
}