/* App layout & wrappers — sopra components.css */

html, body {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;        /* lo scroll avviene SOLO dentro .shell-content */
}

/* ===================== DARK MODE ===================== */
html[data-theme="dark"] {
  --white:          #1B2027;
  --bg-app:         #12161C;
  --bg-secondary:   #232931;
  --ink:            #F5F7FA;
  --fg-strong:      #F5F7FA;
  --fg-default:    #C3CAD3;
  --fg-muted:       #8B95A3;
  --fg-link:        #6FB6FF;
  --border-default: #2E353F;
  --border-subtle:  #232931;

  --bone-50:  #1B2027;
  --bone-100: #232931;
  --bone-200: #2E353F;
  --bone-300: #3A424D;
  --bone-400: #565F6C;
  --bone-500: #8B95A3;
  --bone-600: #C3CAD3;
  --bone-700: #E1E6EC;

  --blue-50:  #16263A;
  --blue-100: #1B3552;
  --blue-200: #234670;
  --blue-300: #2E5C90;
  --blue-500: #3FA0FF;
  --blue-600: #6FB6FF;
  --blue-700: #9BCCFF;

  --mint-50:  #142A26;
  --mint-100: #1B3D36;
  --mint-200: #265751;
  --mint-500: #44C9A6;
  --mint-600: #6BDABB;
  --mint-700: #93E8CB;

  --amber-50:  #2A2316;
  --amber-100: #3D3220;
  --amber-200: #573F18;
  --amber-500: #E89F38;
  --amber-600: #F4B254;
  --amber-700: #FCC678;

  --red-50:  #2A1816;
  --red-100: #3D1F1E;
  --red-200: #5A2823;
  --red-500: #E15748;
  --red-600: #F37466;
  --red-700: #FA9182;
}

html[data-theme="dark"] body { background: var(--bg-app); color: var(--fg-default); }
html[data-theme="dark"] .input,
html[data-theme="dark"] .input.select,
html[data-theme="dark"] textarea.input {
  background: var(--bg-secondary); color: var(--fg-strong);
  border-color: var(--border-default);
}
html[data-theme="dark"] .input::placeholder { color: var(--fg-muted); }
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .agenda-grid-wrap,
html[data-theme="dark"] .pazienti-table,
html[data-theme="dark"] .agenda-panel {
  background: var(--white);
}
html[data-theme="dark"] .toast { background: var(--white); color: var(--fg-strong); border-color: var(--border-default); }

/* Menu del tema in topbar */
.tema-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 180px;
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 50;
}
.tema-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent; border: 0; border-radius: 6px;
  font-size: 13px; color: var(--fg-default);
  cursor: pointer; text-align: left;
  font-family: var(--font-sans);
}
.tema-menu-item:hover { background: var(--bg-secondary); }
.tema-menu-item.active { color: var(--brand-primary); font-weight: 600; }
.tema-menu-item span { flex: 1; }

/* Card appuntamento in dark mode: ora lo sfondo della card è il colore della
   sede a bassa opacità (#sedeXX22), quindi resta SCURO sopra il bg dark. Uso
   testi CHIARI per restare leggibili. */
html[data-theme="dark"] .appt,
html[data-theme="dark"] .appt-pos {
  color: #E8ECF2;
}
html[data-theme="dark"] .appt .name,
html[data-theme="dark"] .appt-pos .name,
html[data-theme="dark"] .appt-pos .appt-row-head .time,
html[data-theme="dark"] .appt .time {
  color: #F4F6FA;
}
html[data-theme="dark"] .appt-pos .appt-tipo,
html[data-theme="dark"] .appt-pos .appt-medico,
html[data-theme="dark"] .appt-pos .appt-meta,
html[data-theme="dark"] .appt .kind {
  color: #C6CCD6;
}
html[data-theme="dark"] .appt-pos.stato-completato .name {
  text-decoration-color: #C6CCD6;
}

/* Pill sede in dark: testo bianco solido + alone scuro per stacco netto */
html[data-theme="dark"] .appt-sede-pill,
html[data-theme="dark"] .appt-sede-pill-tiny {
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Pulsante edit nella card in dark: sfondo chiaro contrastato + bordo scuro */
html[data-theme="dark"] .appt-actions-btn {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.28);
  color: #1B2027;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.15);
}
html[data-theme="dark"] .appt-actions-btn:hover {
  background: #FFFFFF;
  color: var(--brand-primary);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.5),
    0 0 0 1px var(--brand-primary);
}

/* (stili modale completi in sezione MODAL più sotto) */

/* ===================== ODONTOGRAMMA ===================== */
.odo-wrap {
  display: grid;
  grid-template-columns: 1fr 420px;
  grid-template-areas:
    "arcate drawer"
    "legend drawer";
  gap: 16px;
  padding: 20px;
}
.odo-arcate { grid-area: arcate; background: var(--white); border: 1px solid var(--border-default); border-radius: 12px; padding: 28px 16px; }
.odo-legend { grid-area: legend; display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; background: var(--bg-secondary); border-radius: 10px; font-size: 11px; color: var(--fg-default); }
.odo-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.odo-legend-dot { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }

.odo-arcata-label {
  text-align: center; font-size: 11px; font-weight: 600;
  color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.odo-arcata-label-bottom { margin-bottom: 0; margin-top: 4px; }
.odo-arcata-sep { height: 14px; }
.odo-arcata { display: block; max-width: 720px; margin: 0 auto; }

.odo-chart { display: block; max-width: 980px; margin: 0 auto; background: #fdfdfb; border-radius: 8px; }
.odo-lati { display: flex; justify-content: space-between; max-width: 980px; margin: 0 auto 2px;
  font-size: 10px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.odo-tooth { cursor: pointer; }
.odo-tooth .odo-hit { fill: transparent; stroke: none; transition: fill 100ms; }
.odo-tooth:hover .odo-hit { fill: rgba(31,95,139,0.06); }
.odo-tooth.selected .odo-hit { fill: rgba(31,95,139,0.12); stroke: var(--brand-primary); stroke-width: 1.5; }

/* Presenza del dente: Naturale / Assente / Impianto (odontogramma + parodontale) */
.odo-presenza { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-secondary); border-radius: 8px; }
.odo-presenza-btn {
  border: 0; background: transparent; padding: 5px 12px; font-size: 12px; border-radius: 6px;
  color: var(--fg-default); cursor: pointer; font-family: var(--font-sans);
}
.odo-presenza-btn:hover { background: var(--white); }
.odo-presenza-btn.active { background: var(--brand-primary); color: #fff; }

/* Drawer dente */
.odo-drawer-slot { grid-area: drawer; }
.odo-drawer {
  position: sticky; top: 0;
  background: var(--white); border: 1px solid var(--border-default);
  border-radius: 12px; overflow: hidden;
  box-shadow:
    0 12px 30px -8px rgba(15,23,42,0.18),
    0 0 0 1px rgba(15,23,42,0.04);
}
.odo-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}
.odo-drawer-title { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg-default); }
.odo-drawer-fdi {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; padding: 0 8px; height: 28px;
  background: var(--brand-primary); color: #fff;
  border-radius: 6px; font-family: var(--font-mono);
  font-weight: 700; font-size: 14px;
}
.odo-drawer-body { padding: 14px; max-height: calc(100vh - 220px); overflow-y: auto; }
.odo-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-muted); font-weight: 700;
  margin: 14px 0 6px;
}
.odo-section-title:first-child { margin-top: 0; }
.odo-empty { font-size: 12px; color: var(--fg-muted); font-style: italic; padding: 4px 0; }

.odo-form { display: flex; flex-direction: column; gap: 10px; }
.odo-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--fg-default); font-weight: 500; }
.odo-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.odo-facce { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.odo-faccia-btn {
  padding: 5px 6px; font-size: 10px; font-weight: 600;
  background: var(--bg-secondary); border: 1px solid var(--border-default);
  border-radius: 5px; color: var(--fg-default); cursor: pointer;
  text-align: center;
  font-family: var(--font-sans);
}
.odo-faccia-btn.active { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.odo-form-actions { display: flex; justify-content: flex-end; margin-top: 4px; }

.odo-stato-list { display: flex; flex-direction: column; gap: 6px; }
.odo-evento-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; background: var(--bg-secondary);
  border-radius: 6px; font-size: 12px;
}
.odo-evento-row.archiviato { opacity: 0.55; }
.odo-evento-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.odo-evento-body { flex: 1; min-width: 0; }
.odo-evento-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.odo-evento-facce {
  font-family: var(--font-mono); font-size: 10px;
  padding: 1px 5px; background: var(--white); border: 1px solid var(--border-default);
  border-radius: 3px; color: var(--fg-default);
}
.odo-evento-date { margin-left: auto; font-size: 11px; color: var(--fg-muted); font-family: var(--font-mono); }
.odo-evento-meta { font-size: 11px; color: var(--fg-muted); margin-top: 2px; }
.odo-evento-note { font-size: 11px; color: var(--fg-default); margin-top: 4px; font-style: italic; }

@media (max-width: 1100px) {
  .odo-wrap { grid-template-columns: 1fr; grid-template-areas: "arcate" "legend" "drawer"; }
}

/* ===================== PARODONTALE ===================== */
.paro-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  padding: 20px;
  min-height: 600px;
}
.paro-sidebar {
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.paro-side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}
.paro-side-head h3 { margin: 0; font-size: 13px; font-weight: 700; color: var(--fg-strong); }
.paro-side-list { display: flex; flex-direction: column; padding: 6px; gap: 4px; overflow-y: auto; }
.paro-side-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px;
  background: transparent; border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer; text-align: left;
  font-family: var(--font-sans);
}
.paro-side-item:hover { background: var(--bg-secondary); }
.paro-side-item.active { background: var(--blue-50); border-color: var(--blue-200); }
.paro-side-item.annullata { opacity: 0.5; }
.paro-side-item-date { font-weight: 600; font-size: 13px; color: var(--fg-strong); }
.paro-side-item-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--fg-muted); }
.paro-side-item-indices { display: flex; gap: 10px; font-size: 11px; color: var(--fg-default); font-family: var(--font-mono); }
.paro-empty { padding: 20px; text-align: center; color: var(--fg-muted); font-size: 12px; font-style: italic; }
.paro-empty-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px; color: var(--fg-muted); gap: 12px; }

.paro-main {
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 18px;
  overflow-x: auto;
}
.paro-main-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.paro-main-head-left { display: flex; align-items: center; gap: 10px; }
.paro-main-head-left h3 { margin: 0; font-size: 15px; color: var(--fg-strong); }
.paro-main-head-actions { display: flex; gap: 6px; }
.paro-main-note { font-size: 12px; color: var(--fg-default); font-style: italic; margin-bottom: 14px; padding: 8px 10px; background: var(--bg-secondary); border-radius: 6px; }

.paro-indici { display: flex; gap: 20px; }
.paro-indice { display: flex; flex-direction: column; align-items: flex-end; min-width: 80px; }
.paro-indice-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); font-weight: 700; }
.paro-indice-val { font-family: var(--font-mono); font-size: 22px; font-weight: 700; line-height: 1.1; }
.paro-indice-sub { font-size: 10px; color: var(--fg-muted); }

/* Chart parodontale */
.paro-chart { margin: 8px 0; }
.paro-arch-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); font-weight: 700; text-align: center; margin: 4px 0; }
.paro-arch-sep { height: 6px; }
.paro-row { display: grid; grid-template-columns: repeat(16, minmax(34px, 1fr)); gap: 2px; }

.paro-tooth {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 2px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 80ms, transform 80ms;
}
.paro-tooth:hover { border-color: var(--brand-primary); }
.paro-tooth.selected { border-color: var(--brand-primary); background: var(--blue-50); transform: scale(1.04); }
.paro-tooth-fdi { font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--fg-muted); }
.paro-tooth-dots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; width: 100%; }
.paro-tooth-dot {
  height: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; font-family: var(--font-mono);
  border-radius: 2px;
  color: #444;
  position: relative;
}
.paro-tooth-dot.bop { box-shadow: inset 0 0 0 1.5px #c0392b; }
.paro-tooth-dot.pq::after {
  content: ''; position: absolute; top: -1px; right: -1px;
  width: 4px; height: 4px; border-radius: 50%; background: #d4a64a;
}
.paro-tooth-mob {
  font-size: 9px; font-weight: 700; color: #c0392b;
  font-family: var(--font-mono);
}

.paro-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 10px 0 14px;
  font-size: 11px; color: var(--fg-muted);
}
.paro-legend > div { display: inline-flex; align-items: center; gap: 5px; }
.paro-leg-box { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border-default); }
.paro-leg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.paro-leg-square { display: inline-block; width: 8px; height: 8px; border-radius: 1px; }
.paro-leg-line { display: inline-block; width: 14px; height: 2px; border-radius: 1px; vertical-align: middle; }

.paro-hint {
  text-align: center; font-size: 12px; color: var(--fg-muted); font-style: italic;
  padding: 14px;
  border-top: 1px dashed var(--border-default); margin-top: 8px;
}

/* Editor dente parodontale */
.paro-dente-editor {
  margin-top: 14px;
  padding: 14px;
  background: var(--bg-secondary);
  border-radius: 10px;
  border: 1px solid var(--border-default);
}
.paro-dente-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.paro-fdi {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; padding: 0 8px; height: 28px;
  background: var(--brand-primary); color: #fff;
  border-radius: 6px; font-family: var(--font-mono);
  font-weight: 700; font-size: 14px;
}
.paro-dente-pos { font-size: 12px; color: var(--fg-default); }
.paro-dente-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.paro-sito-row { display: grid; grid-template-columns: 30px repeat(3, 1fr); gap: 8px; align-items: center; }
.paro-sito-row-label {
  font-size: 11px; font-weight: 700; color: var(--fg-muted);
  text-align: center; font-family: var(--font-mono);
}
.paro-sito-cell {
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 8px;
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 6px;
}
.paro-sito-label { font-size: 9px; font-weight: 700; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.paro-ppd {
  width: 100%;
  padding: 4px 6px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  border: 1px solid var(--border-default); border-radius: 4px;
  background: var(--bg-secondary); color: var(--fg-strong);
  text-align: center;
}
.paro-flags { display: flex; gap: 3px; }
.paro-flag {
  flex: 1;
  padding: 3px 0;
  font-size: 10px; font-weight: 700; font-family: var(--font-mono);
  background: var(--bg-secondary); border: 1px solid var(--border-default);
  border-radius: 4px; cursor: pointer; color: var(--fg-muted);
}
.paro-flag.paro-flag-bop.on { background: #c0392b; color: #fff; border-color: #c0392b; }
.paro-flag.paro-flag-pq.on  { background: #d4a64a; color: #fff; border-color: #d4a64a; }
.paro-flag.paro-flag-supp.on { background: #7e3c2a; color: #fff; border-color: #7e3c2a; }

.paro-dente-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.paro-dente-row label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--fg-default); font-weight: 500; }

@media (max-width: 1100px) {
  .paro-wrap { grid-template-columns: 1fr; }
}

/* ===================== FATTURE ===================== */
.fatture-tipo-tabs {
  display: flex; gap: 6px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--border-default);
}
.fatture-tipo-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 16px;
  background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  font-family: var(--font-sans);
  color: var(--fg-muted);
}
.fatture-tipo-tab:hover { color: var(--fg-strong); }
.fatture-tipo-tab.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}
.fatture-tipo-label { font-size: 14px; font-weight: 600; }
.fatture-tipo-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); }

.fatture-filtri {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.fatture-mode-toggle {
  display: inline-flex; background: var(--bg-secondary);
  border: 1px solid var(--border-default); border-radius: 6px;
  padding: 2px; gap: 2px;
}
.fatture-mode-item {
  height: 26px; padding: 0 12px;
  background: transparent; border: 0;
  font-size: 12px; font-weight: 500; color: var(--fg-muted);
  border-radius: 4px; cursor: pointer;
}
.fatture-mode-item.active {
  background: var(--white); color: var(--fg-strong);
  box-shadow: var(--shadow-xs);
}

/* Form di emissione fattura */
.fatt-form { display: flex; flex-direction: column; gap: 10px; }
.fatt-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--fg-default); font-weight: 500; }
.fatt-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.fatt-paz-results { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; max-height: 180px; overflow-y: auto; }
.fatt-paz-row {
  padding: 6px 10px; background: var(--bg-secondary); border-radius: 5px;
  cursor: pointer; font-size: 12px;
}
.fatt-paz-row:hover { background: var(--blue-100); }
.fatt-paz-cf { color: var(--fg-muted); font-family: var(--font-mono); font-size: 11px; margin-left: 8px; }

.incasso-metodi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.incasso-metodo-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-default);
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  color: var(--fg-default);
  transition: border-color 80ms, background 80ms;
}
.incasso-metodo-btn:hover { border-color: var(--brand-primary); }
.incasso-metodo-btn.active {
  background: var(--blue-50);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* Griglie: riga aperta per ultima (dettaglio/modifica/inserimento) — evidenza stabile
   + lampeggio al ritorno. Gestite da js/row-focus.js su tutte le tabelle. */
tr.row-sel > td {
  background: var(--blue-50);
}
tr.row-sel > td:first-child {
  box-shadow: inset 3px 0 0 var(--brand-primary);
}
tr.row-flash > td {
  animation: row-flash 1.6s ease-out;
}
[data-grid] [data-row-id].row-sel:not(tr) {
  background: var(--blue-50);
  box-shadow: inset 3px 0 0 var(--brand-primary);
}
[data-grid] [data-row-id].row-flash:not(tr) {
  animation: row-flash 1.6s ease-out;
}
@keyframes row-flash {
  0%   { background: var(--blue-200); }
  100% { background: var(--blue-50); }
}

/* Magazzino: tile allegati */
.mag-allegato-tile {
  background: var(--white); border: 1px solid var(--border-default);
  border-radius: 6px; overflow: hidden;
  transition: border-color 100ms;
}
.mag-allegato-tile:hover { border-color: var(--brand-primary); }
.mag-allegato-del {
  background: transparent; border: 0; cursor: pointer;
  color: var(--red-600); font-size: 14px; line-height: 1; padding: 0 4px;
}
.mag-allegato-del:hover { color: var(--red-700); }

/* Sezione Import dati esterni */
.import-box {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  margin: 8px 0;
}
.import-box-head { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }

/* Audit log: riga espandibile con diff/SQL */
.log-row-expandable { cursor: pointer; }
.log-row-expandable:hover { background: var(--bg-secondary); }
.log-row-detail { display: none; }
.log-row-detail.open { display: table-row; }
.log-row-detail > td { padding: 0; background: var(--bg-secondary); border-bottom: 1px solid var(--border-default); }
.log-detail-wrap { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.log-detail-section { background: var(--white); border: 1px solid var(--border-default); border-radius: 6px; padding: 10px 12px; }
.log-detail-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--brand-primary); margin-bottom: 6px;
}
.log-diff-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.log-diff-table th { text-align: left; padding: 4px 8px; background: var(--bg-secondary); font-size: 10px; color: var(--fg-muted); }
.log-diff-table td { padding: 4px 8px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; word-break: break-word; }
.log-diff-field { font-family: var(--font-mono); font-weight: 600; color: var(--brand-primary); white-space: nowrap; }
.log-diff-from { background: rgba(192,57,43,0.06); color: #7a2d22; max-width: 280px; }
.log-diff-to { background: rgba(60,162,138,0.08); color: #1d6b3f; max-width: 280px; font-weight: 500; }
.log-detail-json, .log-detail-sql, .log-detail-params {
  font-family: var(--font-mono); font-size: 11px;
  padding: 8px 10px; background: var(--bg-secondary);
  border-radius: 4px; max-height: 240px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
}
.log-detail-sql { background: #1a1f26; color: #d4d8de; }
.log-detail-params { background: #232931; color: #c8d0d8; margin-top: 4px; }
.log-val-null { color: var(--fg-muted); font-style: italic; }

/* Lista sale editabile nella modale sede */
.sale-list-wrap { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--bg-secondary); border-radius: 8px; }
.sala-row {
  display: flex; align-items: center; gap: 8px;
}
.sala-id-badge {
  font-family: var(--font-mono); font-size: 10px;
  padding: 3px 8px; background: var(--white); border: 1px solid var(--border-default);
  border-radius: 4px; color: var(--fg-muted);
  min-width: 110px; text-align: center;
}
.sala-row .input { flex: 1; }
.sala-del { color: var(--red-600); }
.sala-del:hover { background: var(--red-50); }

/* Bottone X per cancellare il filtro pazienti */
.pazienti-search { position: relative; }
.pazienti-search-clear {
  position: absolute;
  right: 6px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-secondary);
  border: 0;
  border-radius: 50%;
  color: var(--fg-muted);
  font-size: 16px; line-height: 1;
  cursor: pointer; padding: 0;
  font-family: inherit;
}
.pazienti-search-clear:hover { background: var(--red-100); color: var(--red-700); }
.pazienti-search input { padding-right: 34px; }

/* Sub-tab dentro il tab Note */
.note-subtabs {
  display: flex; gap: 4px;
  margin: 4px 0 14px;
  border-bottom: 1px solid var(--border-default);
}
.note-subtab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--fg-muted); cursor: pointer;
}
.note-subtab:hover { color: var(--fg-strong); }
.note-subtab.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); font-weight: 600; }
.note-subtab.empty { opacity: 0.55; }
.note-subtab-empty { font-family: var(--font-mono); font-size: 10px; opacity: 0.5; }

/* Blocchi note multipli (Sorriso ha più campi note distinti) */
.note-rtf-box .nota-blocco { padding: 8px 0; }
.note-rtf-box .nota-blocco-lbl {
  font-size: 10px; font-weight: 700; color: #7a5a18;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 4px;
  padding: 2px 6px; background: rgba(212,166,74,0.15);
  border-left: 3px solid #d4a64a;
  display: inline-block;
}

/* Editor WYSIWYG nuova nota */
.note-toolbar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 6px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 6px 6px 0 0;
  border-bottom: 0;
}
.note-tb-btn {
  min-width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 6px;
  background: var(--white); border: 1px solid var(--border-default);
  border-radius: 4px;
  font-family: var(--font-sans); font-size: 13px;
  color: var(--fg-strong); cursor: pointer;
}
.note-tb-btn:hover { background: var(--blue-50); border-color: var(--brand-primary); }
.note-tb-btn:active { background: var(--blue-100); }
.note-tb-sep {
  width: 1px; height: 18px; background: var(--border-default);
  margin: 0 4px;
}
.note-tb-colors { display: inline-flex; align-items: center; gap: 3px; }
.note-tb-color {
  width: 18px; height: 18px;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 3px; cursor: pointer;
  padding: 0;
}
.note-tb-color:hover { transform: scale(1.15); }
.note-tb-color-custom {
  width: 26px; height: 22px; padding: 0;
  border: 1px solid var(--border-default); border-radius: 4px;
  cursor: pointer; background: transparent;
}
.note-tb-select {
  height: 26px; padding: 0 6px;
  font-size: 12px; font-family: var(--font-sans);
  border: 1px solid var(--border-default); border-radius: 4px;
  background: var(--white); color: var(--fg-strong);
  cursor: pointer;
}
.note-wysiwyg {
  min-height: 120px; max-height: 400px; overflow-y: auto;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 0 0 6px 6px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 13px; line-height: 1.55;
  color: var(--fg-strong);
  outline: none;
}
.note-wysiwyg:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 2px rgba(31,95,139,0.1); }
.note-wysiwyg:empty::before {
  content: attr(data-placeholder);
  color: var(--fg-muted); font-style: italic;
}
.note-wysiwyg ul, .note-wysiwyg ol { margin: 4px 0; padding-left: 22px; }
.note-wysiwyg p { margin: 0 0 6px; }

/* Tab Note — render del contenuto RTF importato da Sorriso */
.note-rtf-box {
  padding: 16px 20px;
  background: #fffdf6;
  border: 1px solid #ead9b3;
  border-radius: 8px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: #2a2a2a;
  white-space: normal;
  max-height: 600px;
  overflow-y: auto;
}
.note-rtf-box.note-plain { white-space: pre-wrap; font-family: var(--font-sans); }
.note-rtf-box.note-rtf-editing {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  background: #fff;
}
.note-edit-toolbar {
  display: flex; gap: 6px; align-items: center;
  margin: 0 0 8px;
}
.note-rtf-box font { font-family: inherit; }
.note-rtf-box p { margin: 0 0 8px; }
.note-rtf-box br + br { display: block; content: ''; margin-top: 6px; }
html[data-theme="dark"] .note-rtf-box { background: #2a261a; border-color: #5a4e2e; color: #f4ecd5; }

/* Toggle modalità (Compatto / Chart clinico) */
.paro-mode-toggle {
  display: inline-flex; gap: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 6px; padding: 2px;
  margin: 8px 0 12px;
}
.paro-mode-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border: 0; background: transparent;
  color: var(--fg-muted); font-size: 12px; font-weight: 500;
  border-radius: 4px; cursor: pointer;
  font-family: var(--font-sans);
}
.paro-mode-btn.active { background: var(--white); color: var(--fg-strong); box-shadow: var(--shadow-xs); }

/* Parodontogramma clinico (Florida Probe style) */
.paro-chart-wrap {
  display: flex; flex-direction: column; gap: 4px;
  background: #fdfdfb;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 10px;
}
.paro-chart-strip { display: flex; flex-direction: column; }
.paro-chart-strip-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--brand-primary); font-weight: 700;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.paro-chart-tooth:hover { filter: brightness(1.05); }

.paro-chart-strip-host { width: 100%; }

/* Popover inline ancorato al dente selezionato */
.paro-chart-popover {
  position: relative;
  margin: 8px 0 12px;
  --anchor-pct: 50%;
}
.paro-chart-popover-arrow {
  position: absolute;
  top: -7px;
  left: var(--anchor-pct);
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--brand-primary);
  filter: drop-shadow(0 -1px 0 rgba(31,95,139,0.3));
}
.paro-chart-popover-inner {
  background: var(--white);
  border: 1.5px solid var(--brand-primary);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow:
    0 8px 18px -6px rgba(31,95,139,0.25),
    0 0 0 4px rgba(31,95,139,0.05);
  animation: paroPopIn 140ms ease-out;
  max-width: 560px;
  margin: 0 auto;
}

/* Mini-editor compatto del popover */
.paro-mini-editor { display: flex; flex-direction: column; gap: 8px; min-width: 480px; }
.paro-mini-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
}
.paro-mini-fdi {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 24px;
  background: var(--brand-primary); color: #fff;
  border-radius: 5px;
  font-family: var(--font-mono); font-weight: 700; font-size: 13px;
}
.paro-mini-pos { flex: 1; font-size: 12px; color: var(--fg-muted); }
.paro-mini-close {
  width: 22px; height: 22px; border: 0;
  background: var(--bg-secondary); color: var(--fg-default);
  border-radius: 4px;
  font-size: 18px; line-height: 1; cursor: pointer;
  font-family: inherit;
}
.paro-mini-close:hover { background: var(--red-100); color: var(--red-700); }
.paro-mini-row { display: grid; grid-template-columns: 36px 1fr 1fr 1fr; gap: 4px; align-items: stretch; }
.paro-mini-row-label {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--fg-muted);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-family: var(--font-mono);
}
.paro-mini-cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 4px 5px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 5px;
}
.paro-mini-sito-lbl {
  font-size: 9px; font-weight: 700; color: var(--fg-muted);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.paro-mini-inputs { display: flex; gap: 3px; }
.paro-mini-ppd, .paro-mini-rec {
  flex: 1; min-width: 0; width: 100%; padding: 2px 4px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  border: 1px solid var(--border-default); border-radius: 3px;
  background: var(--white); color: var(--fg-strong);
  text-align: center;
}
.paro-mini-rec { color: #b8480e; }
.paro-mini-rec::placeholder { color: #d8a880; font-weight: 500; }
.paro-mini-ppd::placeholder { color: var(--fg-muted); font-weight: 500; }
.paro-mini-flags { display: flex; gap: 2px; }
.paro-mini-flag {
  flex: 1; padding: 1px 0;
  font-size: 9px; font-weight: 700; font-family: var(--font-mono);
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 3px; color: var(--fg-muted);
  cursor: pointer;
}
.paro-mini-flag.b.on { background: #c0392b; color: #fff; border-color: #c0392b; }
.paro-mini-flag.p.on { background: #2e6cb6; color: #fff; border-color: #2e6cb6; }
.paro-mini-flag.s.on { background: #7e3c2a; color: #fff; border-color: #7e3c2a; }
.paro-mini-bottom {
  display: flex; gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
}
.paro-mini-bottom label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--fg-muted); font-weight: 600;
}
.paro-mini-select {
  padding: 3px 6px;
  font-family: var(--font-mono); font-size: 12px;
  border: 1px solid var(--border-default); border-radius: 4px;
  background: var(--white); color: var(--fg-strong);
}
@keyframes paroPopIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Dark mode parodontale: i ppd in tema scuro mantengono testo scuro su sfondo pastello */
html[data-theme="dark"] .paro-tooth-dot { color: #1B2027; }
html[data-theme="dark"] .paro-ppd { background: var(--white); color: var(--fg-strong); }

/* ===================== ANAMNESI + ALERT ===================== */
.paziente-alerts {
  margin: 0 20px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.paziente-alerts:empty { display: none; }
.paziente-alerts-head {
  display: flex; align-items: center; gap: 8px;
  background: #fadcd6; border: 1px solid #f0b8ad;
  color: #7a2d22;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
}
.paziente-alerts-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 8px;
}
.paziente-alerts-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid #f0b8ad;
  border-radius: 6px;
  font-size: 12px;
  color: #7a2d22;
}
.paziente-alerts-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  padding: 1px 5px; background: #c0392b; color: #fff;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
/* avvisi clinici: lampeggiano per farsi notare (fermi se il sistema chiede meno animazioni) */
.paziente-alerts-head { animation: alert-lampeggia 1.1s ease-in-out infinite; }
.paziente-alerts-head .ph { animation: alert-icona 1.1s steps(1, end) infinite; }
@keyframes alert-lampeggia {
  0%, 100% { background: #fadcd6; border-color: #f0b8ad; box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
  50%      { background: #f5a99b; border-color: #c0392b; box-shadow: 0 0 0 4px rgba(192, 57, 43, .25); }
}
@keyframes alert-icona { 0% { opacity: 1; } 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) {
  .paziente-alerts-head, .paziente-alerts-head .ph { animation: none; }
}

.anamnesi-body { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
.anamnesi-gruppo-title {
  margin: 12px 0 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--brand-primary);
  border-bottom: 1px solid var(--brand-primary);
  padding-bottom: 3px;
}
.anamnesi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4px;
}
.anamnesi-domanda {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 5px;
  min-height: 32px;
  transition: border-color 100ms, background 100ms;
}
.anamnesi-domanda.alert {
  border-color: #c0392b;
  background: #fdf2ef;
}
html[data-theme="dark"] .anamnesi-domanda.alert {
  background: rgba(192, 57, 43, 0.15);
}
.anamnesi-domanda-head { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
.anamnesi-domanda-testo { font-size: 12px; color: var(--fg-strong); font-weight: 500; flex: 1; line-height: 1.3; }
.anamnesi-alert-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex-shrink: 0;
  background: #c0392b; color: #fff;
  border-radius: 3px;
}
.anamnesi-radio-group { display: flex; gap: 3px; flex-shrink: 0; }
.anamnesi-radio {
  padding: 2px 10px;
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  font-size: 11px; cursor: pointer; min-width: 32px;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
  line-height: 1.4;
}
.anamnesi-radio input { display: none; }
.anamnesi-radio.checked { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); font-weight: 600; }
/* Input testo/numero compatti nelle domande */
.anamnesi-domanda > input.input,
.anamnesi-domanda > textarea.input,
.anamnesi-domanda > select.input {
  font-size: 12px; padding: 4px 8px; max-width: 160px; flex-shrink: 0;
}
.anamnesi-domanda > textarea.input { max-width: 220px; min-height: 24px; }
body {
  background: var(--bg-app);
  font-family: var(--font-sans);
  color: var(--fg-default);
}
#app { height: 100%; }
button { font-family: var(--font-sans); }

/* boot splash */
.boot-splash {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: var(--bg-app);
}
.boot-label {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  color: var(--fg-strong); letter-spacing: -0.005em;
}

/* ============ SHELL ============ */
.shell {
  display: flex;
  height: 100vh;
  height: 100dvh;          /* dvh per mobile (toolbar dinamica) */
  background: var(--bg-app);
  overflow: hidden;
}
.shell-sidebar {
  position: fixed;            /* sidebar in overlay, esce dal flow */
  top: 0; bottom: 0; left: 0;
  width: 64px;                /* default chiusa: solo icone */
  background: var(--white);
  border-right: 1px solid var(--border-default);
  display: flex; flex-direction: column;
  z-index: 25;
  overflow: hidden;
  transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 220ms;
}
.shell-sidebar:hover {
  width: 240px;
  box-shadow: 0 8px 24px rgba(26, 31, 38, 0.12);
}
/* compensa la fixed: lo shell-main inizia 64px da sx */
.shell-main { margin-left: 64px; }

/* Nasconde i testi quando la sidebar è chiusa; li svela su hover */
.shell-sidebar .shell-brand-name,
.shell-sidebar .shell-brand-tag,
.shell-sidebar .shell-nav-item span,
.shell-sidebar .shell-user-name,
.shell-sidebar .shell-user-role {
  opacity: 0;
  white-space: nowrap;
  transition: opacity 140ms;
}
.shell-sidebar:hover .shell-brand-name,
.shell-sidebar:hover .shell-brand-tag,
.shell-sidebar:hover .shell-nav-item span,
.shell-sidebar:hover .shell-user-name,
.shell-sidebar:hover .shell-user-role {
  opacity: 1;
  transition-delay: 60ms;     /* leggero ritardo: prima si vede la sidebar espandersi */
}

/* In chiusa, il pulsante logout dell'utente sparisce */
.shell-sidebar .shell-user > button { opacity: 0; pointer-events: none; }
.shell-sidebar:hover .shell-user > button { opacity: 1; pointer-events: auto; }
.shell-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border-subtle);
}
.shell-brand-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--fg-strong); line-height: 1.1; }
.shell-brand-tag  { font-size: 10px; color: var(--fg-muted); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; }
.shell-nav { padding: 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.shell-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 0; background: transparent;
  font-size: 13px; font-weight: 500; color: var(--fg-default);
  border-radius: 6px; cursor: pointer; text-align: left;
}
.shell-nav-item:hover { background: var(--bg-secondary); }
.shell-nav-item.active { background: var(--blue-50); color: var(--blue-700); font-weight: 600; }
.shell-side-footer { padding: 8px; border-top: 1px solid var(--border-subtle); }
.shell-user {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-top: 4px;
  border-radius: 6px; background: var(--bg-secondary);
}
.shell-avatar {
  width: 28px; height: 28px;
  min-width: 28px; min-height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  background: var(--blue-500); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  background-size: cover; background-position: center;
}
.shell-user-name { font-size: 12px; font-weight: 600; color: var(--fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-user-role { font-size: 10px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.shell-main {
  flex: 1;
  display: flex; flex-direction: column;
  min-width: 0;
  min-height: 0;           /* critico per overflow nei flex children */
}
.shell-topbar {
  height: 52px; flex-shrink: 0; background: var(--white);
  border-bottom: 1px solid var(--border-default);
  display: flex; align-items: center; gap: 8px; padding: 0 16px;
}
.shell-content {
  flex: 1;
  overflow: auto;
  min-height: 0;           /* permette al flex child di scrollare */
}

.shell-sede-readonly {
  cursor: default !important;
  background: transparent !important;
  pointer-events: none;
}
.shell-sede-switch {
  display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 12px;
  background: var(--bg-secondary); border: 1px solid var(--border-default);
  border-radius: 8px; cursor: pointer;
}
.shell-sede-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.shell-divider { width: 1px; height: 24px; background: var(--border-default); margin: 0 4px; }
.shell-sede-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 320px; background: var(--white);
  border: 1px solid var(--border-default); border-radius: 10px;
  box-shadow: var(--shadow-md); padding: 6px; z-index: 50;
}
.shell-sede-menu-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-muted); padding: 6px 10px;
}
.shell-sede-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; background: transparent; border: 0; border-radius: 6px;
  cursor: pointer; text-align: left;
}
.shell-sede-item:hover { background: var(--bg-secondary); }
.shell-sede-item.active { background: var(--blue-50); }

/* ============ LOGIN ============ */
.login-root { display: flex; min-height: 100vh; background: var(--bg-app); }
.login-aside {
  width: 460px; flex-shrink: 0;
  background: linear-gradient(160deg, #1F5F8B 0%, #154267 100%);
  color: var(--white); padding: 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.login-title {
  font-family: var(--font-display);
  font-size: 64px; font-weight: 600;
  margin: 0; line-height: 0.95;
  letter-spacing: -0.025em;
}
.login-eyebrow-white {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 12px;
}
.login-sub { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.5; margin-top: 12px; max-width: 380px; }
.login-stats { display: flex; gap: 32px; margin-top: 32px; }
.login-stat-n { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--white); line-height: 1; }
.login-stat-l { font-size: 11px; color: rgba(255,255,255,0.6); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }
.login-deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.login-main {
  flex: 1; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end;
  padding: 44px; gap: 16px;
  background: linear-gradient(160deg, #eaf3fb 0%, #eef0fc 50%, #e6f7f2 100%); /* fallback */
}
/* Scena futuristica "odontoiatria digitale" al posto dello sfondo bianco */
.login-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.login-art svg { display: block; width: 100%; height: 100%; }
.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 380px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 18px;
  padding: 26px 28px;
  box-shadow: 0 24px 60px -22px rgba(31,95,139,0.40), 0 4px 14px rgba(15,23,42,0.06);
}
/* Schermi medio-stretti: card ancora più compatta + meno padding del pannello,
   così non copre Mr Sorrido a sinistra */
@media (max-width: 1100px) {
  .login-main { padding: 28px; }
  .login-card { max-width: 340px; padding: 22px 24px; }
  .login-form { margin-top: 16px; }
  .login-heading { font-size: 28px; }
}
.login-main .login-footer { position: relative; z-index: 1; }
/* animazioni leggere */
@keyframes la-float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes la-twinkle { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
.login-art .la-float   { animation: la-float 7s ease-in-out infinite; }
.login-art .la-twinkle { animation: la-twinkle 3.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .login-art .la-float, .login-art .la-twinkle { animation: none; } }
.login-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary); }
.login-heading { font-family: var(--font-display); font-size: 34px; font-weight: 600; color: var(--fg-strong); margin: 8px 0; line-height: 1.1; letter-spacing: -0.01em; }
.login-intro { font-size: 14px; color: var(--fg-muted); line-height: 1.5; margin: 0; }
.login-form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.login-error { background: var(--red-50); border: 1px solid var(--red-100); color: var(--red-700); padding: 10px 14px; border-radius: 8px; font-size: 13px; }

/* Confronto richiesto vs occupato */
.overlap-confronto {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--white);
  border: 1px solid var(--red-100);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 4px 0;
}
.overlap-row {
  display: flex; align-items: baseline; gap: 12px;
}
.overlap-label {
  flex-shrink: 0;
  width: 110px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fg-muted);
}
.overlap-row:first-child .overlap-label { color: var(--blue-700); }
.overlap-row:last-child  .overlap-label { color: var(--red-700); }
.overlap-value {
  flex: 1; font-size: 13px; color: var(--fg-strong);
}
.login-footer { font-size: 11px; color: var(--fg-muted); display: flex; gap: 8px; align-items: center; }

/* ============ AGENDA ============ */
.agenda-wrap {
  display: flex; gap: 16px;
  padding: 16px 24px 16px;
  height: 100%;
  box-sizing: border-box;
}
.agenda-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  min-height: 0;          /* permette al figlio flex di non sforare */
}
.agenda-toolbar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: nowrap; padding: 4px 0 14px;
  flex-shrink: 0;
}
.agenda-segmented { display: inline-flex; background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 6px; padding: 2px; gap: 2px; }

/* Date picker compatto: la label è cliccabile, l'input date è invisibile sopra */
.agenda-date-btn {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 6px;
  font-family: var(--font-sans);
}
.agenda-date-btn:hover { background: var(--bg-secondary); }
.agenda-date-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%; height: 100%;
  pointer-events: none;        /* il click va sul bottone, poi showPicker apre il calendario */
  cursor: pointer;
}
.agenda-seg-item {
  height: 26px; padding: 0 12px; background: transparent; border: 0;
  font-size: 12px; font-weight: 500; color: var(--fg-muted);
  border-radius: 4px; cursor: pointer;
}
.agenda-seg-item.active { background: var(--white); color: var(--fg-strong); box-shadow: var(--shadow-xs); }

.agenda-grid-wrap {
  background: var(--white); border: 1px solid var(--border-default);
  border-radius: 10px; overflow: auto; box-shadow: var(--shadow-sm);
  flex: 1; min-height: 0;   /* la griglia occupa tutto lo spazio rimasto e scrolla internamente */
}
.agenda-head-row {
  display: flex; background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
  position: sticky; top: 0; z-index: 5;
}
.agenda-head-time {
  width: 60px; flex-shrink: 0;
  border-right: 1px solid var(--border-default);
  display: flex; align-items: flex-end; justify-content: center; padding: 8px 0;
}
.agenda-head-overline {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--fg-muted); text-transform: uppercase;
}
.agenda-sala-head {
  flex: 1; min-width: 170px; padding: 8px 12px;
  border-right: 1px solid var(--border-default);
  background: var(--bg-secondary);
}
.agenda-sala-head-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.agenda-sala-name {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  color: var(--fg-strong); letter-spacing: -0.005em;
}
.agenda-sala-sedi-dots { display: flex; gap: 3px; }
.agenda-mini-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--bg-secondary); display: inline-block; }
.agenda-sala-op { display: flex; flex-direction: column; gap: 2px; }
.agenda-op-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.agenda-op-avatar {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bone-200); color: var(--fg-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; flex-shrink: 0;
}
.agenda-op-name { font-size: 11px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.agenda-body { display: flex; position: relative; }
.agenda-time-col {
  width: 60px; flex-shrink: 0; position: relative;
  border-right: 1px solid var(--border-default);
  background: var(--bg-secondary);
}
.agenda-time-label {
  position: absolute; left: 0; right: 0; text-align: right;
  padding-right: 6px; font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-muted); font-variant-numeric: tabular-nums;
  transform: translateY(-50%);
}
.agenda-sala-col {
  flex: 1; min-width: 170px; position: relative;
  border-right: 2px solid var(--border-default);  /* separatori colonna più marcati */
}
.agenda-time-col {
  border-right: 2px solid var(--border-default);
}
.agenda-head-row {
  border-bottom: 2px solid var(--border-default);
}
.agenda-sala-head {
  border-right: 2px solid var(--border-default);
}
.agenda-head-time {
  border-right: 2px solid var(--border-default);
}
.agenda-slot {
  position: absolute; left: 0; right: 0; pointer-events: none;
}
.agenda-now-line {
  position: absolute; left: 60px; right: 0; height: 0;
  border-top: 2px solid var(--red-500);
  pointer-events: none; z-index: 4;
}
/* nella vista settimana la now-line vive dentro la colonna sala (full width) */
.week-now-line { left: 0; right: 0; z-index: 4; }
.agenda-now-dot {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--red-500);
  box-shadow: 0 0 0 3px rgba(192,57,43,0.18);
}
.agenda-now-bubble {
  position: absolute; left: 8px; top: -10px;
  background: var(--red-500); color: var(--white);
  font-size: 10px; font-weight: 700; font-family: var(--font-mono);
  padding: 2px 6px; border-radius: 4px; letter-spacing: 0.02em;
}

.appt-pos {
  position: absolute; left: 2px; right: 2px; cursor: pointer;
  padding-top: 9px; padding-left: 15px; /* spazio per il pallino di stato */
  overflow: hidden;
  transition: box-shadow 120ms, transform 120ms;
}
.appt-pos.selected {
  box-shadow: 0 0 0 2px var(--blue-500), 0 4px 12px rgba(31,95,139,0.25);
  z-index: 3; transform: translateY(-1px);
}

/* ===== STATO: border-left verticale colorato ===== */
.appt-stato-edge {
  position: absolute;
  left: 0; top: 4px; bottom: 0;
  width: 4px;
  pointer-events: none;
}
.appt-stato-edge.stato-edge-in-corso,
.appt-stato-edge.stato-edge-in-ritardo {
  width: 5px;
  animation: appt-edge-pulse 1.6s ease-in-out infinite;
}
@keyframes appt-edge-pulse {
  0%,100% { opacity: 1; transform: scaleY(1); }
  50%     { opacity: 0.55; transform: scaleY(0.94); }
}

/* ===== STATO: icona stato ===== */
.appt-stato-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-left: 4px;
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.7));
}
.appt-stato-icon.stato-in-corso,
.appt-stato-icon.stato-in-ritardo {
  animation: appt-icon-pulse 1.6s ease-in-out infinite;
}
@keyframes appt-icon-pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.18); }
}

/* ===== STATO: piccola label sotto ===== */
.appt-stato-label {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
  line-height: 1.1;
}
.appt-stato-label.stato-in-corso::before,
.appt-stato-label.stato-in-ritardo::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 5px;
  animation: appt-dot-pulse 1.2s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes appt-dot-pulse {
  0%,100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%     { box-shadow: 0 0 0 4px transparent; opacity: 0.5; }
}

/* ===== STATO: modifier sulla card intera ===== */
.appt-pos.stato-completato {
  opacity: 0.72;
}
.appt-pos.stato-completato .name {
  text-decoration: line-through;
  text-decoration-color: var(--bone-500);
  text-decoration-thickness: 1.5px;
}
.appt-pos.stato-da-confermare {
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0, transparent 6px,
      rgba(212, 136, 42, 0.04) 6px, rgba(212, 136, 42, 0.04) 12px);
}
.appt-pos.stato-annullato {
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0, transparent 4px,
      rgba(192, 57, 43, 0.12) 4px, rgba(192, 57, 43, 0.12) 8px);
}
.appt-pos.stato-annullato .name,
.appt-pos.stato-annullato .time {
  text-decoration: line-through;
  text-decoration-color: var(--red-500);
}
.appt-pos.stato-in-ritardo {
  box-shadow: 0 0 0 1.5px rgba(192, 57, 43, 0.4);
}

/* ===== APPT CARD — layout uniforme (orario · paziente · tipo · medico sempre visibili) ===== */
.appt-pos .appt-row-head {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}
.appt-pos .appt-row-head .time {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--fg-strong);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  font-size: 13px;
}
.appt-pos .name {
  font-weight: 600; color: var(--fg-strong);
  font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 1;
  letter-spacing: -0.01em;
}
.appt-pos .appt-meta {
  display: flex; align-items: baseline; gap: 4px;
  min-width: 0;
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.25;
  margin-top: 3px;
}
.appt-pos .appt-tipo {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 500;
}
.appt-pos .appt-medico {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--fg-default);
  font-weight: 600;
  flex-shrink: 0;
}
.appt-pos .appt-medico-dot { margin-right: 3px; opacity: 0.6; }

/* ===== Card a colore pieno (sfondo = colore operatore, niente trasparenza) =====
   Il testo eredita il colore impostato inline sulla card (chiaro/scuro per contrasto). */
.appt-pos.appt-solid .time,
.appt-pos.appt-solid .name,
.appt-pos.appt-solid .appt-meta,
.appt-pos.appt-solid .appt-tipo,
.appt-pos.appt-solid .appt-medico { color: inherit !important; }
.appt-pos.appt-solid .appt-medico-dot { opacity: 1; }

/* ===== Layout TINY (card ≤ 30 min, altezza ~42-44px) ===== */
.appt-pos.appt-tiny {
  padding-top: 6px;
  padding-left: 8px;
  padding-right: 14px;
}
.appt-pos.appt-tiny .appt-sede-dot {
  position: absolute;
  top: 7px; right: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--white);
  pointer-events: none;
}
/* Pill mini per tiny: 2 lettere, sempre visibile */
.appt-sede-pill-tiny {
  top: 4px !important;
  font-size: 9px !important;
  padding: 1px 5px !important;
  letter-spacing: 0.05em;
  line-height: 1.2 !important;
  font-weight: 700;
}
.appt-pos.appt-tiny .appt-meta {
  margin-top: 1px;
  font-size: 11px;
}
.appt-pos.appt-tiny .appt-actions-btn {
  bottom: 2px; right: 2px;
  width: 18px; height: 18px;
}

/* Banner "altri giorni" del filtro topbar */
.agenda-filter-banner {
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 13px;
}
.agenda-filter-info {
  display: flex; align-items: center; gap: 8px;
  color: var(--blue-700);
}
.agenda-filter-info > span:first-of-type { flex: 1; }
.agenda-filter-altri {
  margin-top: 6px; padding-top: 8px;
  border-top: 1px dashed var(--blue-200);
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.agenda-filter-day-chip {
  background: var(--white);
  border: 1px solid var(--blue-200);
  border-radius: 14px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex; align-items: center;
  font-family: var(--font-sans);
  color: var(--fg-default);
  transition: background 80ms, border-color 80ms;
}
.agenda-filter-day-chip:hover {
  background: var(--blue-100); border-color: var(--blue-500);
}
.agenda-filter-day-count {
  background: var(--blue-500); color: var(--white);
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  margin-left: 6px;
  font-family: var(--font-mono);
}

/* Filtro live dell'agenda: card non matching dimme */
.appt-pos.filtered-out {
  opacity: 0.18;
  filter: grayscale(0.7);
  transition: opacity 120ms, filter 120ms;
}
.appt-pos.filtered-out:hover { opacity: 0.5; }

/* ===== Layout FULL (card ≥ 45 min) ===== */
.appt-pos.appt-full {
  padding-top: 9px;
  padding-right: 6px;
}
.appt-pos.appt-full .appt-row-head { padding-right: 64px; /* pill sede */ }
.appt-sede-stripe { position: absolute; top: 0; left: 0; right: 0; height: 4px; pointer-events: none; }
.appt-sede-pill {
  position: absolute; top: 5px; right: 4px;
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--white); font-size: 9px; font-weight: 700;
  letter-spacing: 0.04em; padding: 1px 6px;
  border-radius: 999px; line-height: 1.2; text-transform: uppercase;
  box-shadow: 0 0 0 1.5px var(--white); pointer-events: none;
}
/* pill sede nelle card settimanali: colonne strette → tronca con ellissi */
.week-sede-pill {
  max-width: calc(100% - 8px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  box-shadow: 0 0 0 1px var(--white);
}
.appt-row-1 { display: flex; justify-content: space-between; align-items: center; padding-right: 64px; margin-top: 2px; }

.appt-actions-btn {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 4px;
  color: var(--fg-default);
  cursor: pointer;
  padding: 0;
  opacity: 0; transition: opacity 120ms;
  z-index: 4;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.appt-pos:hover .appt-actions-btn,
.appt-pos.selected .appt-actions-btn { opacity: 1; }
.appt-actions-btn:hover { background: var(--white); color: var(--brand-primary); }

/* Icona stato cliccabile (quick-next) */
.appt-stato-btn {
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
  transition: transform 100ms;
}
.appt-stato-btn:hover { transform: scale(1.18); }

/* Topbar bell con badge counter */
.topbar-bell { position: relative; }
.topbar-bell-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--red-500); color: var(--white);
  border-radius: 999px;
  font-size: 10px; font-weight: 700; font-family: var(--font-mono);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--white);
  line-height: 1;
}

.agenda-footer { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.agenda-legend {
  display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 14px;
  background: var(--white); border: 1px solid var(--border-default);
  border-radius: 8px; align-items: center;
}
.agenda-closed-note {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--amber-50); border: 1px solid var(--amber-100);
  border-radius: 8px; font-size: 12px; color: var(--amber-700); line-height: 1.4;
}
.agenda-constraint-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  background: var(--mint-50); border: 1px solid var(--mint-100);
  border-radius: 8px; font-size: 12px; color: var(--mint-700); line-height: 1.4;
}

/* ============ AGENDA · PAZIENTE PANEL ============ */
/* PANNELLO PAZIENTE — a scomparsa: 56px chiuso → 320px su hover */
.agenda-panel {
  position: fixed;
  right: 16px;
  top: 68px;
  bottom: 16px;
  width: 56px;
  flex-shrink: 0;
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 15;
  transition: width 220ms cubic-bezier(0.4,0,0.2,1),
              box-shadow 220ms;
}
.agenda-panel:hover,
.agenda-panel.opened {
  width: 320px;
  overflow: auto;
  box-shadow: 0 8px 24px rgba(26,31,38,0.16);
}
/* Compensazione: l'agenda non si sovrappone al pannello chiuso */
.agenda-main { padding-right: 64px; }

/* In chiuso (né hover né opened): contenuto invisibile, solo avatar/icona iniziale */
.agenda-panel:not(:hover):not(.opened) .agenda-panel-name,
.agenda-panel:not(:hover):not(.opened) .agenda-panel-meta,
.agenda-panel:not(:hover):not(.opened) .agenda-panel-section,
.agenda-panel:not(:hover):not(.opened) .agenda-panel-alert,
.agenda-panel:not(:hover):not(.opened) .agenda-panel-stats,
.agenda-panel:not(:hover):not(.opened) .agenda-panel-block,
.agenda-panel:not(:hover):not(.opened) .agenda-panel-actions,
.agenda-panel:not(:hover):not(.opened) .agenda-panel-close,
.agenda-panel:not(:hover):not(.opened) .agenda-panel-empty > *:not(.agenda-panel-empty-icon) {
  opacity: 0;
  pointer-events: none;
}
/* Header collapsed: solo avatar centrato */
.agenda-panel:not(:hover):not(.opened) .agenda-panel-head {
  padding: 12px 0;
  justify-content: center;
  border-bottom: 0;
}
.agenda-panel:not(:hover):not(.opened) .agenda-panel-head > div:nth-child(3) { display: none; }
.agenda-panel:not(:hover):not(.opened) .agenda-panel-empty {
  padding: 14px 0; min-height: 0;
}
.agenda-panel .agenda-panel-name,
.agenda-panel .agenda-panel-meta,
.agenda-panel .agenda-panel-section,
.agenda-panel .agenda-panel-alert,
.agenda-panel .agenda-panel-stats,
.agenda-panel .agenda-panel-block,
.agenda-panel .agenda-panel-actions,
.agenda-panel .agenda-panel-empty > *:not(.agenda-panel-empty-icon) {
  transition: opacity 160ms;
}
.agenda-panel:hover .agenda-panel-name,
.agenda-panel:hover .agenda-panel-meta,
.agenda-panel:hover .agenda-panel-section,
.agenda-panel:hover .agenda-panel-alert,
.agenda-panel:hover .agenda-panel-stats,
.agenda-panel:hover .agenda-panel-block,
.agenda-panel:hover .agenda-panel-actions,
.agenda-panel:hover .agenda-panel-empty > *:not(.agenda-panel-empty-icon),
.agenda-panel.opened .agenda-panel-name,
.agenda-panel.opened .agenda-panel-meta,
.agenda-panel.opened .agenda-panel-section,
.agenda-panel.opened .agenda-panel-alert,
.agenda-panel.opened .agenda-panel-stats,
.agenda-panel.opened .agenda-panel-block,
.agenda-panel.opened .agenda-panel-actions,
.agenda-panel.opened .agenda-panel-empty > *:not(.agenda-panel-empty-icon) {
  transition-delay: 80ms;
}
.agenda-panel-empty { padding: 40px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 320px; }

/* Empty state operativo (senza paziente selezionato) */
.agenda-panel-empty-actions {
  padding: 28px 18px;
  gap: 8px;
  text-align: center;
  min-height: auto;
}
.agenda-panel-empty-actions .agenda-panel-empty-icon {
  background: var(--blue-50);
}
.agenda-panel-empty-title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600;
  color: var(--fg-strong);
  margin-top: 10px;
}
.agenda-panel-empty-sub {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.5;
  margin: 4px 0 14px;
}
.panel-action-btn {
  width: 100%;
  justify-content: center;
}
.agenda-panel-empty-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--bg-secondary);
  display: flex; align-items: center; justify-content: center;
}
.agenda-panel-head {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.agenda-panel-close {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; padding: 0;
  background: transparent; border: 0;
  color: var(--fg-muted); cursor: pointer; border-radius: 4px;
}
.agenda-panel-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue-100); color: var(--blue-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; font-family: var(--font-display);
  flex-shrink: 0;
}
.agenda-panel-name {
  margin: 0; font-family: var(--font-display); font-size: 18px;
  font-weight: 600; color: var(--fg-strong); line-height: 1.15;
  letter-spacing: -0.005em;
}
.agenda-panel-meta { display: flex; gap: 4px; margin-top: 2px; font-size: 11px; color: var(--fg-muted); }
.agenda-panel-section { padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); }
.agenda-info-row { display: flex; gap: 10px; padding: 5px 0; }
.agenda-info-lbl { font-size: 10px; color: var(--fg-muted); font-weight: 500; letter-spacing: 0.02em; }
.agenda-info-val { font-size: 12px; color: var(--fg-strong); margin-top: 1px; }
.agenda-panel-alert {
  margin: 10px 16px 0;
  display: flex; gap: 8px; padding: 8px 10px;
  background: var(--amber-50); border: 1px solid var(--amber-100);
  border-radius: 6px; font-size: 11px; color: var(--amber-700); line-height: 1.4;
}
.agenda-panel-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 12px 16px 0; padding: 10px 0;
  background: var(--bg-secondary); border-radius: 8px; text-align: center;
}
.agenda-stat-block { padding: 0 4px; border-right: 1px solid var(--border-default); }
.agenda-stat-block:last-child { border-right: 0; }
.agenda-stat-n { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--fg-strong); }
.agenda-stat-lbl { font-size: 10px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-top: 2px; }
.agenda-panel-block { padding: 12px 16px 0; }
.agenda-mini-appt {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; background: var(--bg-secondary);
  border-radius: 6px;
}
.agenda-panel-actions {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border-subtle);
  margin-top: auto;
  background: var(--bg-app);
  border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
}

/* ============ PAZIENTI ============ */
.pazienti-wrap {
  padding: 16px 24px 16px;
  display: flex; flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  gap: 12px;
}
.pazienti-header {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.pazienti-search { flex: 1; max-width: 480px; }
.pazienti-table {
  background: var(--white); border: 1px solid var(--border-default);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  flex: 1; min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
}
.pazienti-table table { width: 100%; border-collapse: collapse; }
.pazienti-table th, .pazienti-table td {
  padding: 10px 14px; text-align: left;
  font-size: 13px; border-bottom: 1px solid var(--border-subtle);
}
.pazienti-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-secondary);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--fg-muted);
  box-shadow: inset 0 -1px 0 var(--border-default);
}
.pazienti-table tbody tr { cursor: pointer; }
.pazienti-table tbody tr:hover { background: var(--blue-50); }
.pazienti-table .mono { font-family: var(--font-mono); font-size: 12px; color: var(--fg-default); }
.pazienti-table .sede-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }

/* ============ stub ============ */
.coming-soon {
  padding: 64px; text-align: center;
}
.coming-soon .eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brand-primary);
}
.coming-soon h1 {
  font-family: var(--font-display); font-size: 34px; font-weight: 600;
  color: var(--fg-strong); margin: 8px 0 4px;
}
.coming-soon p { font-size: 14px; color: var(--fg-muted); }

/* utility */
.sq28 { height: 28px; width: 28px; padding: 0; }
.flex-1 { flex: 1; }

/* ============ PICKER GRIGLIA PAZIENTI ============ */
.pazienti-pick-wrap {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  overflow: hidden;
  max-height: 520px;          /* ~20 righe visibili scrollabili */
  overflow-y: auto;
  background: var(--white);
}
.pazienti-pick-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pazienti-pick-table thead th {
  background: var(--bg-secondary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-default);
  position: sticky;
  top: 0;
  z-index: 2;
}
.pazienti-pick-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.pazienti-pick-table .paziente-pick-row {
  cursor: pointer;
  transition: background 80ms;
}
.pazienti-pick-table .paziente-pick-row:hover {
  background: var(--blue-50);
}

/* ============ PAZIENTE AUTOCOMPLETE ============ */
.paziente-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  max-height: 240px; overflow: auto;
  z-index: 60;
}
.paziente-result-row {
  display: block; width: 100%;
  padding: 8px 12px; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-sans);
}
.paziente-result-row:last-child { border-bottom: 0; }
.paziente-result-row:hover { background: var(--bg-secondary); }
.paziente-result-empty {
  padding: 12px; text-align: center;
  font-size: 12px; color: var(--fg-muted);
}

/* ============ MODAL ============ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 32px; animation: modal-fade-in 120ms ease-out;
}
html[data-theme="dark"] .modal-overlay {
  background: rgba(0, 0, 0, 0.62);
}
.modal-overlay.closing { animation: modal-fade-out 120ms ease-in forwards; }
@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-fade-out { from { opacity: 1; } to { opacity: 0; } }
.modal-card {
  background: var(--white);
  border-radius: 14px;
  border: 1px solid var(--border-default);
  box-shadow:
    0 24px 60px -12px rgba(15, 23, 42, 0.32),
    0 12px 24px -8px rgba(15, 23, 42, 0.20),
    0 0 0 1px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  max-height: 92vh;
  display: flex; flex-direction: column;
  animation: modal-slide-in 160ms ease-out;
}
html[data-theme="dark"] .modal-card {
  border-color: #3A424D;
  box-shadow:
    0 32px 80px -10px rgba(0, 0, 0, 0.75),
    0 16px 30px -8px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
@keyframes modal-slide-in {
  from { transform: translateY(8px) scale(0.99); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.modal-title {
  margin: 0; font-family: var(--font-display);
  font-size: 18px; font-weight: 600; color: var(--fg-strong);
  letter-spacing: -0.005em;
}
.modal-close {
  background: transparent; border: 0; padding: 0;
  width: 28px; height: 28px; border-radius: 6px;
  color: var(--fg-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--bg-secondary); color: var(--fg-strong); }
.modal-body {
  padding: 20px; overflow: auto;
}
.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-app);
  border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
}

.btn-danger {
  background: var(--red-500); color: var(--white);
  border: 1px solid var(--red-500);
}
.btn-danger:hover { background: var(--red-600); border-color: var(--red-600); }

/* ============ TOAST ============ */
.toast-container {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 200;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  font-size: 13px; color: var(--fg-strong);
  min-width: 240px; max-width: 420px;
  pointer-events: auto;
  animation: toast-in 180ms ease-out;
}
.toast.leaving { animation: toast-out 180ms ease-in forwards; }
@keyframes toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toast-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(20px); opacity: 0; } }
.toast-success { border-left: 4px solid var(--mint-500); }
.toast-success i { color: var(--mint-600); }
.toast-error { border-left: 4px solid var(--red-500); }
.toast-error i { color: var(--red-500); }
.toast-info { border-left: 4px solid var(--blue-500); }
.toast-info i { color: var(--blue-500); }
.toast-warning { border-left: 4px solid var(--amber-500, #F2A93B); }
.toast-warning i { color: var(--amber-500, #F2A93B); }

/* ============ FORM ============ */
.form-grid {
  display: grid; gap: 14px;
}
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-field-error {
  font-size: 11px; color: var(--red-600); margin-top: 2px;
}

/* ============ APPT MENU (popover sulla card) ============ */
.appt-menu {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 4px; min-width: 200px;
  z-index: 50;
}
.appt-menu button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 10px;
  background: transparent; border: 0; border-radius: 4px;
  font-size: 13px; color: var(--fg-default);
  cursor: pointer; text-align: left;
  font-family: var(--font-sans);
}
.appt-menu button:hover { background: var(--bg-secondary); }
.appt-menu button.danger { color: var(--red-600); }
.appt-menu button.danger:hover { background: var(--red-50); }
.appt-menu hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 4px 0; }

/* ============ DRAG ============ */
.appt-pos.dragging {
  opacity: 0.7;
  box-shadow: var(--shadow-lg);
  z-index: 10;
  cursor: grabbing;
}
.appt-pos:hover { cursor: grab; }
.agenda-sala-col.drop-target {
  background: rgba(31, 95, 139, 0.04);
}
.agenda-drop-indicator {
  position: absolute; left: 0; right: 0;
  height: 2px; background: var(--blue-500);
  pointer-events: none; z-index: 9;
  box-shadow: 0 0 0 2px rgba(31,95,139,0.2);
}
.agenda-drop-indicator::before {
  content: ''; position: absolute;
  left: -4px; top: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--blue-500);
}

/* ============ ODONTOGRAMMA ============ */
.odonto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 10px;
  border: 1px solid var(--border-default);
}
.odonto-quadrant {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.odonto-quadrant[data-quad="1"] { direction: rtl; }
.odonto-quadrant[data-quad="4"] { direction: rtl; }
.odonto-dente {
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 6px 4px;
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  font-family: var(--font-sans);
  direction: ltr;
  transition: transform 80ms, box-shadow 120ms, border-color 120ms;
}
.odonto-dente:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--blue-300);
}
.odonto-dente.selected {
  background: var(--blue-50);
  border-color: var(--blue-500);
  box-shadow: 0 0 0 2px rgba(31,95,139,0.15);
}
.odonto-dente.evid-verde { border-color: var(--mint-500); background: var(--mint-50); }
.odonto-dente.evid-rosso { border-color: var(--red-500); background: var(--red-50); }
.odonto-dente.evid-arancione { border-color: var(--amber-500); background: var(--amber-50); }
.odonto-num {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-muted); font-weight: 600;
}
.odonto-shape {
  width: 22px; height: 26px;
  background: var(--bone-100);
  border: 1px solid var(--border-default);
  border-radius: 4px 4px 8px 8px;
}
.odonto-dente.selected .odonto-shape { background: var(--blue-200); }
.odonto-dente.evid-verde .odonto-shape { background: var(--mint-200); }
.odonto-dente.evid-rosso .odonto-shape { background: var(--red-200); }
.odonto-dente.evid-arancione .odonto-shape { background: var(--amber-200); }

/* ============ TABS ============ */
.tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border-default);
  padding: 0 24px;
  background: var(--white);
  position: sticky; top: 0; z-index: 10;
}
.tab {
  background: transparent; border: 0;
  padding: 12px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-sans);
  display: flex; align-items: center; gap: 6px;
}
.tab:hover { color: var(--fg-default); }
.tab.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
  font-weight: 600;
}

/* ============ PAZIENTE PAGE ============ */
.paziente-page {
  display: flex; flex-direction: column;
}
.paziente-hero {
  background: var(--white);
  border-bottom: 1px solid var(--border-default);
  padding: 24px 32px;
  display: flex; gap: 20px; align-items: center;
}
.paziente-hero-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--blue-100); color: var(--blue-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; font-family: var(--font-display);
  flex-shrink: 0;
}
.paziente-hero h1 {
  margin: 0; font-family: var(--font-display);
  font-size: 28px; font-weight: 600;
  color: var(--fg-strong); letter-spacing: -0.01em;
}
.paziente-hero-meta {
  display: flex; gap: 16px; margin-top: 4px;
  font-size: 13px; color: var(--fg-muted);
}
.paziente-tab-content { padding: 24px 32px; }
.paziente-card {
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.paziente-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.paziente-card-title {
  margin: 0; font-family: var(--font-display);
  font-size: 16px; font-weight: 600; color: var(--fg-strong);
}

.anag-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.anag-row {
  display: flex; flex-direction: column;
}
.anag-lbl {
  font-size: 11px; font-weight: 600; color: var(--fg-muted);
  letter-spacing: 0.02em; margin-bottom: 4px;
}
.anag-val {
  font-size: 14px; color: var(--fg-strong);
}
.anag-val.mono { font-family: var(--font-mono); }

/* ============ IMPOSTAZIONI · LAYOUT A SOTTOMENU ============ */
.impostazioni-layout {
  display: flex;
  gap: 20px;
  padding: 20px 24px 32px;
  align-items: flex-start;
}
.impostazioni-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 14px 8px;
  position: sticky;
  top: 16px;
  align-self: flex-start;
}
.impostazioni-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-default);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
}
.impostazioni-tab:hover { background: var(--bg-secondary); }
.impostazioni-tab.active {
  background: var(--blue-50);
  color: var(--blue-700);
  font-weight: 600;
}
.impostazioni-content {
  flex: 1;
  min-width: 0;
}

/* Legenda livelli */
.livelli-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.livello-pill {
  background: var(--bg-secondary);
  border-left: 4px solid var(--bone-500);
  padding: 10px 12px;
  border-radius: 6px;
}

/* Sezione titolo per livello */
.sez-livello {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-strong);
}
.sez-livello-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* ============ TIMELINE APPUNTAMENTI PAZIENTE ============ */
.prossimo-appt-box {
  background: linear-gradient(135deg, var(--blue-50), var(--mint-50));
  border: 1px solid var(--blue-100);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0 14px;
}
.prossimo-appt-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--blue-700);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 4px;
}
.prossimo-appt-data {
  font-size: 14px; font-weight: 600;
  color: var(--fg-strong);
}
.timeline-section { margin-top: 14px; }
.timeline-sec-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}
.timeline-sec-label.timeline-future { color: var(--blue-700); }
.timeline-sec-label.timeline-past { color: var(--fg-muted); }
.timeline-appt {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 6px;
  border-bottom: 1px dashed var(--border-subtle);
}
.timeline-appt:last-child { border-bottom: 0; }
.timeline-appt.past { opacity: 0.75; }
.timeline-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--bone-200);
}
.timeline-appt-body { flex: 1; min-width: 0; }

.wa-context-banner {
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

/* ============ WHATSAPP · CHAT TOOL ============ */
.wa-chat-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: #075E54;     /* verde WA tipico */
  color: var(--white);
}
.wa-chat-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  color: var(--white);
  flex-shrink: 0;
}
.wa-chat-name {
  font-weight: 600; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-chat-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
}
.wa-chat-header .btn-icon { color: var(--white); }

.wa-chat-messages {
  background: #E5DDD5;        /* sfondo WA classico */
  background-image:
    linear-gradient(rgba(229, 221, 213, 0.92), rgba(229, 221, 213, 0.92)),
    radial-gradient(circle at 50% 50%, transparent 20%, rgba(0,0,0,0.04) 21%);
  background-size: cover, 40px 40px;
  padding: 14px 16px;
  min-height: 360px;
  max-height: 460px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 6px;
}
.wa-chat-empty {
  margin: auto; padding: 24px;
  text-align: center; color: var(--fg-muted);
}
.wa-chat-daysep {
  align-self: center;
  background: rgba(255,255,255,0.7);
  font-size: 11px; color: var(--fg-muted);
  padding: 3px 10px; border-radius: 6px;
  margin: 6px 0;
}
.wa-chat-bubble {
  max-width: 78%;
  padding: 8px 10px 4px;
  border-radius: 8px;
  position: relative;
  font-size: 13px; line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  word-wrap: break-word;
  white-space: pre-wrap;
}
.wa-chat-bubble.out {
  align-self: flex-end;
  background: #DCF8C6;       /* verde messaggi inviati */
  color: var(--ink);
}
.wa-chat-bubble.in {
  align-self: flex-start;
  background: var(--white);
  color: var(--ink);
}
.wa-chat-text { color: var(--ink); }
.wa-chat-time {
  font-size: 10px;
  color: rgba(0,0,0,0.45);
  text-align: right;
  margin-top: 2px;
}
.wa-chat-tipo {
  font-size: 9px; font-weight: 700;
  color: var(--blue-700);
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.wa-chat-error {
  font-size: 10px;
  color: var(--red-600);
  margin-top: 2px;
}

.wa-chat-templates {
  padding: 8px 12px;
  background: var(--bg-secondary);
  display: flex; gap: 6px; flex-wrap: wrap;
  border-top: 1px solid var(--border-subtle);
  align-items: center;
}
.wa-tpl-chip {
  background: var(--white);
  border: 1px solid var(--border-default);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font-sans);
  color: var(--fg-default);
}
.wa-tpl-chip:hover { background: var(--blue-50); border-color: var(--blue-500); color: var(--blue-700); }

.wa-chat-input-row {
  display: flex; gap: 8px; padding: 10px 12px;
  background: var(--bg-app);
  border-top: 1px solid var(--border-subtle);
  align-items: flex-end;
}
.wa-chat-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border-default);
  border-radius: 20px;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  background: var(--white);
  color: var(--ink);
}
.wa-chat-input:focus { border-color: var(--blue-500); outline: none; }
.wa-chat-input:disabled { background: var(--bg-secondary); color: var(--fg-muted); }
.wa-chat-warn {
  padding: 6px 12px;
  background: var(--amber-50);
  border-top: 1px solid var(--amber-100);
  font-size: 11px;
  color: var(--amber-700);
  display: flex; align-items: center; gap: 6px;
}

/* ============ WHATSAPP / QR ============ */
.wa-qr-box {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: 10px;
  min-height: 280px;
}

/* ============ MATRICE PERMESSI ============ */
.permessi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.permessi-table th, .permessi-table td {
  border-bottom: 1px solid var(--border-subtle);
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
}
.permessi-table thead th {
  background: var(--bg-secondary);
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-muted);
  position: sticky; top: 0; z-index: 2;
}
.permessi-table .perm-head {
  text-align: center;
  min-width: 110px;
}
.permessi-table .perm-head-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; margin-right: 6px;
  vertical-align: middle;
}
.permessi-table .perm-label {
  width: 40%;
}
.permessi-table .perm-cell {
  text-align: center;
}
.permessi-table tr.perm-group td {
  background: var(--bg-app);
  padding: 12px 10px 8px;
  border-bottom: 0;
}
.permessi-table .perm-group-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-strong);
}
.permessi-table .perm-group-count {
  font-size: 10px;
  color: var(--fg-muted);
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* Toggle switch a pill */
.perm-toggle {
  position: relative;
  display: inline-block;
  width: 38px; height: 22px;
  cursor: pointer;
}
.perm-toggle input {
  position: absolute; opacity: 0; pointer-events: none;
}
.perm-toggle-track {
  position: absolute; inset: 0;
  background: var(--bone-300);
  border-radius: 11px;
  transition: background 120ms;
}
.perm-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: left 120ms;
}
.perm-toggle input:checked + .perm-toggle-track {
  background: var(--mint-500);
}
.perm-toggle input:checked + .perm-toggle-track::after {
  left: 18px;
}
.perm-toggle input:disabled + .perm-toggle-track {
  background: var(--blue-500);
  opacity: 0.8;
  cursor: not-allowed;
}

/* Riga operatore */
.operatore-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

/* ============ OPERATORE AVATAR ============ */
.op-avatar-mini {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border-default);
}
.op-avatar-row {
  display: flex; gap: 24px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 10px;
}
.op-avatar-preview {
  width: 96px; height: 96px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 36px; font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  border: 3px solid var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  background-size: cover !important;
  background-position: center !important;
}

/* Sidebar shell-avatar mostra immagine se disponibile (data-avatar-url) */
.shell-avatar[data-avatar-url] {
  font-size: 0;
  background-size: cover !important;
  background-position: center !important;
}

/* ============ FAMIGLIA / RELAZIONI ============ */
.famiglia-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.famiglia-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--brand-primary);
  border-radius: 8px;
  transition: box-shadow 120ms;
}
.famiglia-card:hover { box-shadow: var(--shadow-sm); }
.famiglia-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  background: var(--blue-100); color: var(--blue-700);
  border: 0; cursor: pointer;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.famiglia-avatar:hover { transform: scale(1.05); }
.famiglia-body { flex: 1; min-width: 0; }
.famiglia-tipo {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 2px;
}
.famiglia-nome {
  background: transparent; border: 0; padding: 0;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600; color: var(--fg-strong);
  cursor: pointer; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.famiglia-nome:hover { color: var(--brand-primary); text-decoration: underline; }
.famiglia-meta {
  font-size: 11px; color: var(--fg-muted);
  margin-top: 2px;
}

/* ============ STORICO / TIMELINE ============ */
.storico-timeline {
  display: flex; flex-direction: column;
  padding: 0;
}
.storico-day-header {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600;
  color: var(--fg-strong);
  padding: 18px 0 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0;
  background: var(--white);
  z-index: 2;
}
.storico-day-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand-primary);
  flex-shrink: 0;
}
.storico-evento {
  display: flex; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border-subtle);
}
.storico-evento:last-child { border-bottom: 0; }
.storico-evento-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.storico-evento-body { flex: 1; min-width: 0; }
.storico-evento-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.storico-evento-desc {
  font-size: 13px;
  color: var(--fg-strong);
  font-weight: 500;
  line-height: 1.4;
}
.storico-evento-meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.storico-tag {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: var(--bg-secondary);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
}
.storico-tag-key { color: var(--fg-muted); font-weight: 600; }
.storico-tag-val { color: var(--fg-strong); }

.storico-diff {
  margin-top: 6px;
  background: var(--bg-secondary);
  padding: 8px 10px;
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.storico-diff-row {
  display: grid;
  grid-template-columns: 120px 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  font-family: var(--font-mono);
}
.storico-diff-key {
  color: var(--fg-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}
.storico-diff-from {
  color: var(--red-700);
  background: var(--red-50);
  padding: 1px 6px; border-radius: 3px;
  text-decoration: line-through;
  text-decoration-color: var(--red-300);
}
.storico-diff-arrow {
  color: var(--fg-muted);
  font-weight: 700;
}
.storico-diff-to {
  color: var(--mint-700);
  background: var(--mint-50);
  padding: 1px 6px; border-radius: 3px;
  font-weight: 600;
}

/* ============ WEEK / MONTH VIEW ============ */
.week-grid {
  display: grid;
  grid-template-columns: 60px repeat(6, 1fr);
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 10px; overflow: auto;
  box-shadow: var(--shadow-sm);
}
.week-day-head {
  padding: 10px 8px; text-align: center;
  border-bottom: 1px solid var(--border-default);
  border-right: 1px solid var(--border-default);
  background: var(--bg-secondary);
}
.week-day-head .dow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--fg-muted); text-transform: uppercase;
}
.week-day-head .dnum {
  font-family: var(--font-display); font-size: 22px;
  font-weight: 600; color: var(--fg-strong);
  margin-top: 2px;
}
.week-day-head.today .dnum { color: var(--brand-primary); }
.week-day-head.today { background: var(--blue-50); }
.week-day-col {
  position: relative;
  border-right: 1px solid var(--border-default);
}

/* ===== Vista settimana con sotto-colonne per sala ===== */
.week-grid-sale .week-corner {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
  border-right: 1px solid var(--border-default);
}
.week-grid-sale .week-corner-ora {
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.week-sala-head {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px; min-width: 0;
  border-bottom: 1px solid var(--border-default);
  border-right: 1px solid var(--bone-200);
  background: var(--bg-secondary);
}
.week-sala-head.today { background: var(--blue-50); }
.week-sala-head .week-sala-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.week-sala-head .week-sala-name {
  font-size: 10px; font-weight: 600; color: var(--fg-default);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.week-sala-col {
  position: relative;
  border-right: 1px solid var(--bone-200);
}
.week-sala-col.today { background: color-mix(in srgb, var(--blue-50) 55%, transparent); }
/* separatore più marcato all'inizio di ogni giorno */
.week-grid-sale .day-start { border-left: 2px solid var(--border-default); }

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 10px; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.month-dow-head {
  padding: 10px; text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--fg-muted); text-transform: uppercase;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
}
.month-cell {
  min-height: 110px; padding: 8px;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer; position: relative;
  display: flex; flex-direction: column; gap: 4px;
}
.month-cell:hover { background: var(--bg-secondary); }
.month-cell.other-month { opacity: 0.4; }
.month-cell.today { background: var(--blue-50); }
.month-cell .dnum {
  font-family: var(--font-mono); font-size: 12px;
  font-weight: 600; color: var(--fg-strong);
}
.month-cell.today .dnum { color: var(--brand-primary); }
.month-appt-pill {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-secondary);
  color: var(--fg-default);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid var(--blue-500);
}
.month-appt-more {
  font-size: 10px; color: var(--fg-muted);
  padding: 0 4px;
}


/* ===== Mobile-friendly (tablet + smartphone) ===== */
@media (max-width: 900px) {
  .shell-sidebar { width: 64px; }
  .shell-sidebar .shell-brand-name,
  .shell-sidebar .shell-nav-item span:not(.shell-nav-icon) { display: none; }
  .shell-content { padding: 12px; }
  .pazienti-header h1 { font-size: 22px !important; }
  .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: 1fr !important; }
  .pn-table, .log-table { font-size: 11px !important; }
  .pn-table td, .pn-table th { padding: 6px 4px !important; }
}
@media (max-width: 640px) {
  .paziente-card { padding: 10px !important; }
  .paziente-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
  .paziente-tabs button { flex-shrink: 0; }
  .agenda-day-col { min-width: 140px !important; }
  /* Bottoni full-width sui modali */
  .modal-footer { flex-direction: column-reverse; }
  .modal-footer .btn { width: 100%; }
}

/* ===== Guida / Help (modale a due pannelli) ===== */
.help-layout {
  display: flex; gap: 0;
  height: min(64vh, 540px);
  margin: -4px -4px 0;
}
.help-nav {
  flex: 0 0 200px;
  border-right: 1px solid var(--border-default);
  padding: 4px 8px 4px 0;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.help-nav-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--fg-muted);
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.help-nav-item:hover { background: var(--bg-secondary); color: var(--fg-default); }
.help-nav-item.active {
  background: var(--blue-100, var(--bg-secondary));
  color: var(--blue-700, var(--fg-strong)); font-weight: 600;
}
.help-content {
  flex: 1; min-width: 0;
  overflow-y: auto;
  padding: 2px 4px 8px 18px;
  font-size: 13px; line-height: 1.55; color: var(--fg-default);
}
.help-h {
  margin: 14px 0 6px; font-size: 14px; font-weight: 700;
  color: var(--fg-strong); font-family: var(--font-display, inherit);
}
.help-content > div > .help-h:first-child { margin-top: 2px; }
.help-p { margin: 4px 0 8px; }
.help-ul, .help-ol { margin: 4px 0 10px; padding-left: 20px; }
.help-ul li, .help-ol li { margin: 4px 0; }
.help-note, .help-tip {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 10px; border-radius: 8px; margin: 8px 0;
  font-size: 12px; line-height: 1.45;
}
.help-note { background: var(--blue-50, var(--bg-secondary)); color: var(--blue-700, var(--fg-default)); }
.help-tip  { background: var(--amber-50, var(--bg-secondary)); color: var(--amber-700, var(--fg-default)); }
.help-note i, .help-tip i { margin-top: 1px; flex-shrink: 0; }
@media (max-width: 640px) {
  .help-layout { flex-direction: column; height: min(70vh, 600px); }
  .help-nav {
    flex: 0 0 auto; flex-direction: row; flex-wrap: wrap;
    border-right: 0; border-bottom: 1px solid var(--border-default);
    padding-bottom: 8px;
  }
  .help-nav-item { width: auto; }
  .help-content { padding-left: 4px; }
}

/* ===== Recall: header e filtri fissi, griglia con scroll interno ===== */
/* Pattern come .pazienti-wrap: header/filtri flex-shrink:0, lo scroll vive
   dentro .recall-table-wrap e il thead resta sticky al top del contenitore. */
.recall-wrap { position: relative; min-height: 0; }
.recall-header-sticky {
  flex-shrink: 0;
  padding-top: 8px; padding-bottom: 8px;
}
.recall-filter-sticky {
  flex-shrink: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 0;
}
.recall-filterbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
/* Box linee guida (collassabile) */
.recall-guida {
  flex-shrink: 0;
  background: var(--blue-50, var(--bg-secondary));
  border: 1px solid var(--blue-200, var(--border-default));
  border-radius: 10px;
  margin: 4px 0 8px;
}
.recall-guida > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  font-weight: 600; color: var(--blue-700, var(--fg-strong));
}
.recall-guida > summary::-webkit-details-marker { display: none; }
.recall-guida > summary::after {
  content: '⌄'; margin-left: auto; font-size: 16px; transition: transform .15s;
}
.recall-guida[open] > summary::after { transform: rotate(180deg); }
.recall-guida-body {
  padding: 0 14px 12px 14px;
  font-size: 13px; color: var(--fg-default); line-height: 1.5;
}
.recall-guida-body p { margin: 4px 0 8px; }
.recall-guida-body ol { margin: 4px 0 8px; padding-left: 20px; }
.recall-guida-body ol li { margin: 4px 0; }
.recall-guida-nota {
  display: flex; align-items: center; gap: 6px;
  color: var(--fg-muted); font-size: 12px; margin-top: 6px !important;
}
.recall-table-wrap {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: auto;
  padding: 0 12px !important;
}
.recall-table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px;
}
.recall-table thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg-secondary);
  padding: 10px 8px; text-align: left;
  border-bottom: 2px solid var(--border-default);
  font-weight: 600;
  box-shadow: 0 1px 0 var(--border-default);
}
.recall-table td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--border-subtle);
}

/* ===== Prima Nota: vista libro mastro 2 colonne ===== */
.pn-mastro {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px;
}
.pn-mastro thead th {
  position: sticky; top: 0;
  background: var(--bg-elevated);
  padding: 10px 8px; font-weight: 700;
  border-bottom: 2px solid var(--border-default);
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px;
}
.pn-mastro td.pn-cella {
  padding: 8px 10px; vertical-align: top;
  border-bottom: 1px solid var(--border-subtle);
  width: 35%;
}
.pn-mastro td.pn-cella-entrata { background: linear-gradient(90deg, rgba(16,185,129,0.06) 0%, transparent 100%); border-left: 3px solid var(--mint-500); }
.pn-mastro td.pn-cella-uscita  { background: linear-gradient(270deg, rgba(239,68,68,0.06) 0%, transparent 100%); border-right: 3px solid var(--red-500); }
.pn-mastro td.pn-cella-vuota   { border-bottom: 1px solid var(--border-subtle); }
.pn-mastro .pn-importo {
  font-family: var(--font-mono); font-weight: 700; font-size: 15px; margin-bottom: 2px;
}
.pn-cella-entrata .pn-importo { color: var(--mint-700); }
.pn-cella-uscita .pn-importo  { color: var(--red-700); text-align: right; }
.pn-cella-uscita .pn-causale, .pn-cella-uscita .pn-meta { text-align: right; }
.pn-mastro .pn-causale { font-size: 12px; color: var(--fg-default); }
.pn-mastro .pn-meta { font-size: 10px; margin-top: 3px; color: var(--fg-muted); display: flex; gap: 6px; flex-wrap: wrap; }
.pn-cella-uscita .pn-meta { justify-content: flex-end; }
.pn-mastro .pn-metodo { padding: 1px 6px; border-radius: 3px; font-weight: 600; }
.pn-mastro .pn-rif {
  color: var(--blue-700); text-decoration: none; font-family: var(--font-mono); font-weight: 600;
}
.pn-mastro td.pn-saldo {
  padding: 8px 10px; text-align: right;
  font-family: var(--font-mono); font-weight: 700;
  border-bottom: 1px solid var(--border-subtle);
  border-left: 1px solid var(--border-default);
  background: var(--bg-secondary);
}
.pn-mastro td.pn-azioni {
  padding: 8px 6px; text-align: center;
  border-bottom: 1px solid var(--border-subtle);
}
.pn-mastro td.pn-ora { padding: 8px 6px; border-bottom: 1px solid var(--border-subtle); }
.pn-mastro tr.pn-data-sep td { padding: 6px 8px; }

/* ===== Topbar: orologio live + badge backup ===== */
.topbar-orologio {
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-end;
  padding: 0 8px;
  border-left: 1px solid var(--border-default);
  margin-left: 4px;
  min-width: 130px;
}
.topbar-orologio-ora {
  font-family: var(--font-mono);
  font-size: 18px; font-weight: 700; color: var(--fg-strong);
  line-height: 1.05; letter-spacing: 0.5px;
}
.topbar-orologio-data {
  font-size: 10px; color: var(--fg-muted);
  text-transform: capitalize;
  line-height: 1.1; margin-top: 2px;
}
.topbar-backup { position: relative; }
.topbar-backup-label {
  position: absolute; bottom: 2px; right: 2px;
  background: var(--mint-600); color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 1px 4px; border-radius: 6px;
  line-height: 1.2;
}

/* ============ Visore/Editor RX (TUI Image Editor) ============ */
.rx-editor-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, 0.88);
  display: flex; flex-direction: column;
  animation: modal-fade-in 120ms ease-out;
}
.rx-editor-bar {
  height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; gap: 16px;
  background: #11151c; border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #e5e7eb;
}
.rx-editor-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: #fff; min-width: 0;
}
.rx-editor-title span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50vw;
}
.rx-editor-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: 1px solid rgba(255,255,255,0.12);
  color: #cbd5e1; cursor: pointer;
}
.rx-editor-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.rx-editor-host { flex: 1; min-height: 0; position: relative; }
/* il container TUI riempie l'host */
.rx-editor-host .tui-image-editor-container { height: 100% !important; }
.rx-editor-bar .btn-ghost { color: #cbd5e1; }
.rx-editor-bar .btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,0.08); color: #fff; }
.rx-editor-bar .btn:disabled { opacity: 0.45; cursor: default; }

/* ============ Mobile gate (avviso "solo da PC" — Mr Sorrido parla) ============ */
.mobile-gate {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 22px; box-sizing: border-box;
  background: linear-gradient(160deg, #1F5F8B 0%, #154267 100%);
  color: #fff; text-align: center;
}
.mobile-gate .mg-card { max-width: 360px; width: 100%; }
.mg-mascot {
  width: 130px; height: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,0.35));
  animation: mg-bob 3.5s ease-in-out infinite;
}
@keyframes mg-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .mg-mascot { animation: none; } }
.mg-bubble {
  position: relative; margin: 22px auto 0; max-width: 320px;
  background: #fff; color: #1f2937; border-radius: 18px; padding: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.28); text-align: left;
}
.mg-bubble::before {
  content: ''; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 12px solid #fff;
}
.mg-hi { margin: 0 0 8px; font-weight: 700; font-size: 16px; color: #1F5F8B; }
.mg-say { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.mg-say:last-child { margin-bottom: 0; }
.mg-bubble b { color: #1F5F8B; }
.mg-foot { margin-top: 20px; font-size: 12px; color: rgba(255,255,255,0.7); letter-spacing: 0.03em; }

/* ============ Mr Sorrido — animazioni faccino ============ */
/* Desktop (login art): occhi che sbattono ogni tanto */
.login-art .la-blink { transform-box: fill-box; transform-origin: center; animation: la-blink 5s ease-in-out infinite; }
@keyframes la-blink { 0%,93%,100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }

/* Mobile gate: occhi che sbattono + bocca che parla (classe .talking via Web Speech) */
.mg-mascot .mg-eye   { transform-box: fill-box; transform-origin: center; animation: la-blink 4.5s ease-in-out infinite; }
.mg-mascot .mg-mouth { display: none; transform-box: fill-box; transform-origin: center; }
.mobile-gate .mg-mascot.talking .mg-smile { display: none; }
.mobile-gate .mg-mascot.talking .mg-mouth { display: block; animation: mg-talk 0.26s ease-in-out infinite; }
@keyframes mg-talk { 0%,100% { transform: scaleY(0.32); } 50% { transform: scaleY(1); } }
.mg-hint { margin-top: 14px; font-size: 12px; color: rgba(255,255,255,0.78); }
@media (prefers-reduced-motion: reduce) {
  .login-art .la-blink, .mg-mascot .mg-eye, .mobile-gate .mg-mascot.talking .mg-mouth { animation: none; }
}

/* ============ Misura RX + Calibrazione ============ */
.rxm-host { flex: 1; min-height: 0; position: relative; }
.rxm-stage { position: absolute; inset: 0; overflow: hidden; background: #0a0d12; cursor: crosshair; touch-action: none; }
.rxm-layer { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.rxm-img { display: block; user-select: none; -webkit-user-drag: none; max-width: none; }
.rxm-svg { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.rxm-line { stroke: #ffce54; stroke-width: 1.6; fill: none; }
.rxm-line-preview { stroke-dasharray: 5 4; opacity: 0.85; }
.rxm-handle { fill: #ffffff; }
.rxm-label { fill: #ffffff; font-family: var(--font-mono, monospace); font-weight: 600; text-anchor: middle; }
.rxm-label-bg { fill: rgba(10,13,18,0.72); }
.rxm-hint { color: #94a3b8; font-size: 12px; text-align: center; padding: 6px; background: #11151c; border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.rxm-cal-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #cbd5e1; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,0.06); }
.rxm-cal-warn { color: #fbbf24; background: rgba(251,191,36,0.12); }

/* Calibrazione (Impostazioni → Calibrazione RX) */
.rxcal-stato { margin-bottom: 12px; }
.rxcal-stato-ok { display: flex; align-items: center; gap: 6px; color: var(--mint-700, #2f855a); font-size: 14px; flex-wrap: wrap; }
.rxcal-stato-ko { display: flex; align-items: center; gap: 6px; color: var(--amber-700, #b7791f); font-size: 14px; }
.rxcal-stato-meta { color: var(--fg-muted); font-size: 12px; }
.rxcal-stage { height: 420px; border-radius: 8px; border: 1px solid var(--border-subtle); }
.rxcal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.rxcal-form { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; align-items: flex-end; }
.rxcal-field { display: flex; flex-direction: column; gap: 4px; }
.rxcal-field label { font-size: 11px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.rxcal-px { font-family: var(--font-mono, monospace); font-size: 16px; font-weight: 600; color: var(--fg-strong); }
.rxcal-ratio { font-family: var(--font-mono, monospace); font-size: 15px; font-weight: 600; color: var(--blue-700, #1F5F8B); min-height: 20px; }
.rxcal-mm-input { width: 120px; padding: 6px 8px; border: 1px solid var(--border-subtle); border-radius: 6px; font-size: 15px; }
.rxcal-note { color: var(--fg-muted); font-size: 12px; line-height: 1.5; margin-top: 12px; }

/* ===== Agenda: paziente bloccato per fissare un nuovo appuntamento ===== */
.agenda-freeze-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 8px; padding: 8px 12px;
  background: var(--blue-50); color: var(--blue-800, #103453);
  border: 1px solid var(--blue-200); border-left: 4px solid var(--blue-500);
  border-radius: 8px; font-size: 13px;
}
.agenda-freeze-banner strong { font-weight: 700; }
.agenda-freeze-on .agenda-sala-col,
.agenda-freeze-on .week-sala-col { cursor: copy; }
.agenda-freeze-on .agenda-sala-col .agenda-slot:hover,
.agenda-freeze-on .week-sala-col .agenda-slot:hover { background: rgba(31, 95, 139, 0.12); }
html[data-theme="dark"] .agenda-freeze-banner { background: rgba(31, 95, 139, 0.18); color: var(--fg-strong); }

/* Settimana: nome del paziente sotto il cognome */
.appt .name-first { font-size: 10.5px; font-weight: 500; opacity: 0.85; line-height: 1.2; }
.agenda-freeze-banner.sposta { background: #FFF6E5; border-color: #F2D19B; border-left-color: #E5A11A; color: #5c3d00; }
html[data-theme="dark"] .agenda-freeze-banner.sposta { background: rgba(229, 161, 26, 0.16); color: var(--fg-strong); }
/* Drag & drop anche nella vista settimana */
.week-sala-col.drop-target { background: rgba(31, 95, 139, 0.06); }

/* ===== Card agenda: sigla sede (A / X) e nome paziente sempre visibile ===== */
/* pill con una sola lettera: occupa poco, il testo non va più sotto la pill */
.appt-sede-pill { min-width: 14px; justify-content: center; }
.appt-pos.appt-full .appt-row-head { padding-right: 26px; }
.appt-pos.appt-tiny .appt-row-head { padding-right: 16px; }
.appt-pos.appt-tiny .appt-sede-pill-tiny { right: 3px; }
.week-sede-pill { max-width: none; top: 2px !important; right: 2px !important; padding: 0 4px !important; }
/* settimana, card corte: una riga "16:00 DORO Samuele" con ellissi */
.week-appt-line {
  display: flex; align-items: baseline; gap: 4px; min-width: 0;
  padding-right: 14px; line-height: 1.25;
}
.week-appt-line .name {
  min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 11px;
}
.week-appt-line .name-first-inline { font-weight: 500; opacity: 0.85; }

/* ===================================================================
   AGENDA A SCHERMO INTERO (settembre 2026): niente scroll verticale.
   Barra superiore sottile + toolbar compatta + intestazione giorni su una riga;
   l'altezza degli slot la calcola agenda.js (fitSlots) sullo spazio rimasto.
   =================================================================== */
.shell-topbar { height: 40px; padding: 0 12px; gap: 6px; }
.shell-topbar-brand { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.shell-topbar-brand-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--fg-strong); }
.shell-topbar-brand-tag { font-size: 11px; color: var(--fg-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.shell-topbar .topbar-orologio-ora { font-size: 14px; }
.shell-topbar .topbar-orologio-data { font-size: 10px; }
.shell-topbar .btn-icon { height: 30px; width: 30px; }

.agenda-wrap { padding: 8px 12px 8px; gap: 10px; }
.agenda-toolbar { padding: 0 0 6px; gap: 6px; }
.agenda-toolbar .btn-sm, .agenda-toolbar .sq28 { height: 28px; }
.agenda-date-btn { padding: 2px 6px; white-space: nowrap; }
.agenda-date-main { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--fg-strong); }
.agenda-date-sub { font-size: 11px; color: var(--fg-muted); font-family: var(--font-mono); }
.agenda-filter-inp { width: 170px; flex-shrink: 1; min-width: 110px; }
.agenda-filter-inp .input { height: 28px; font-size: 12px; padding-left: 10px; }

/* Settimana: giorno su una riga stretta ("LUN 28") + riga sale sottile.
   Totale = WEEK_HEAD_PX in agenda.js (22 + 20). */
.week-day-head {
  height: 22px; box-sizing: border-box; padding: 0 6px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.week-day-head .dow { font-size: 10px; letter-spacing: 0.06em; }
.week-day-head .dnum { font-family: var(--font-sans); font-size: 12px; font-weight: 700; margin-top: 0; }
.week-sala-head { height: 20px; box-sizing: border-box; padding: 0 6px; font-size: 10px; }
.week-grid-sale .week-corner-ora { font-size: 8px; }
/* card corte in settimana: riga centrata verticalmente anche con slot bassi */
.week-appt-line { height: 100%; align-items: center; }
/* Giorno, card molto basse (15' con slot adattati): solo orario + paziente su una riga */
.appt-pos.appt-micro { padding-top: 0 !important; padding-bottom: 0 !important; display: flex; align-items: center; }
.appt-pos.appt-micro .appt-meta,
.appt-pos.appt-micro .appt-stato-label,
.appt-pos.appt-micro .appt-actions-btn { display: none; }
.appt-pos.appt-micro .appt-row-head { padding-top: 0 !important; padding-bottom: 0 !important; flex: 1; min-width: 0; }
.appt-pos.appt-micro .appt-row-head .time,
.appt-pos.appt-micro .name { font-size: 11px !important; }
.appt-pos.appt-micro .appt-sede-pill-tiny { top: 50% !important; transform: translateY(-50%); }
/* prima etichetta oraria (08:00) non tagliata dall'intestazione */
.agenda-time-col .agenda-time-label:first-child { transform: none; }

/* ===== Incongruenze agenda ===== */
.agenda-inc-btn { background: #FFF4DB; color: #8a5a00; border: 1px solid #F2D19B; font-weight: 700; }
.agenda-inc-btn:hover { background: #FFE9B8; }
.inc-sommario { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 12px; }
.inc-blocco { margin-bottom: 16px; }
.inc-blocco-head { display: flex; align-items: center; gap: 4px; font-size: 14px; }
.inc-spiega { font-size: 12px; color: var(--fg-muted); margin: 2px 0 8px; }
.inc-caso { border: 1px solid var(--border-default); border-left: 4px solid #E5A11A; border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; background: var(--bg-secondary); }
.inc-caso.ignorato { opacity: 0.55; border-left-color: var(--border-default); }
.inc-riga { display: grid; grid-template-columns: 170px 1fr auto; gap: 8px; align-items: center; padding: 3px 0; font-size: 13px; }
.inc-riga + .inc-riga { border-top: 1px dashed var(--border-default); }
.inc-quando { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.inc-chi { min-width: 0; }
.inc-meta { color: var(--fg-muted); font-size: 12px; }
.inc-nota { font-style: italic; font-size: 12px; }
.inc-azioni { display: flex; gap: 2px; }
.inc-caso-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
html[data-theme="dark"] .agenda-inc-btn { background: rgba(229,161,26,.18); color: #f2c46b; border-color: rgba(229,161,26,.4); }
/* Scheda paziente: appuntamento rifiutato (non in agenda) */
.timeline-appt.appt-rifiutato { opacity: 0.75; }
.timeline-appt.appt-rifiutato .mono { text-decoration: line-through; text-decoration-color: #8e5ba6; }

/* ===== Agenda: scheda rapida al passaggio del mouse ===== */
.hover-scheda {
  position: fixed; z-index: 1200; width: 290px;
  background: var(--white); color: var(--fg-default);
  border: 1px solid var(--border-default); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16, 52, 83, 0.22); overflow: hidden;
  animation: hsIn 120ms ease-out;
}
@keyframes hsIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.hover-scheda .hs-head { padding: 10px 12px 8px; border-left: 5px solid var(--blue-500); background: var(--bg-secondary); }
.hover-scheda .hs-nome { font-weight: 700; font-size: 14px; color: var(--fg-strong); margin-bottom: 2px; }
.hover-scheda .hs-riga { font-size: 12px; color: var(--fg-default); line-height: 1.45; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.hover-scheda .hs-nota { font-size: 12px; font-style: italic; margin-top: 4px; white-space: pre-wrap; max-height: 70px; overflow: auto; }
.hover-scheda .hs-stato { font-size: 12px; font-weight: 600; margin-top: 4px; display: flex; align-items: center; gap: 2px; }
.hover-scheda .hs-azioni { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 6px; }
.hover-scheda .hs-btn {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 0; background: transparent;
  border-radius: 6px; font-size: 12px; color: var(--fg-default); cursor: pointer; text-align: left;
}
.hover-scheda .hs-btn:hover { background: var(--blue-50); }
.hover-scheda .hs-btn.danger { color: var(--red-600); }
.hover-scheda .hs-btn.danger:hover { background: rgba(192, 57, 43, .08); }
html[data-theme="dark"] .hover-scheda { background: var(--bg-card, #1e242c); }

/* ===== Impostazioni → Modulistica: gruppi, drag & drop, aspetto ===== */
.modu-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.modu-side { position: sticky; top: 0; max-height: calc(100vh - 150px); overflow: auto; padding-right: 6px; border-right: 1px solid var(--border-default); }
.modu-side-tools { display: flex; gap: 6px; margin-bottom: 6px; }
.modu-hint { font-size: 11px; color: var(--fg-muted); margin: 2px 0 8px; }
.modu-editor { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.modu-editor > .paziente-card { margin: 0; }
.modu-lbl { font-size: 12px; font-weight: 600; color: var(--fg-muted); margin-bottom: 6px; }
.modu-group { margin-bottom: 8px; border-radius: 8px; border-left: 3px solid var(--gcol); background: color-mix(in srgb, var(--gcol) 5%, transparent); }
.modu-group-head { display: flex; align-items: center; gap: 5px; padding: 6px 6px 6px 4px; font-size: 12px; font-weight: 700; color: var(--fg-strong); cursor: default; border-radius: 6px; }
.modu-group-head[draggable="true"] { cursor: grab; }
.modu-group-dot { color: var(--gcol); display: inline-flex; }
.modu-group-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; }
.modu-count { font-size: 10px; font-weight: 600; background: color-mix(in srgb, var(--gcol) 18%, transparent); color: var(--gcol); border-radius: 10px; padding: 1px 7px; }
.modu-chevron, .modu-edit { border: 0; background: transparent; cursor: pointer; color: var(--fg-muted); padding: 2px; display: inline-flex; border-radius: 4px; }
.modu-edit { opacity: 0; } .modu-group-head:hover .modu-edit { opacity: 1; }
.modu-chevron:hover, .modu-edit:hover { background: var(--bg-secondary); color: var(--fg-strong); }
.modu-group-body { padding: 0 4px 4px; min-height: 6px; border-radius: 6px; }
.modu-empty { font-size: 11px; color: var(--fg-muted); padding: 8px; text-align: center; border: 1px dashed var(--border-default); border-radius: 6px; }
.modu-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; margin: 1px 0; border-radius: 6px; cursor: pointer; font-size: 13px; position: relative; border: 1px solid transparent; }
.modu-item:hover { background: var(--bg-secondary); }
.modu-item.active { background: color-mix(in srgb, var(--gcol, #1F5F8B) 14%, transparent); border-color: color-mix(in srgb, var(--gcol, #1F5F8B) 45%, transparent); font-weight: 600; }
.modu-item-studio { margin-bottom: 8px; }
.modu-item-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modu-grip { color: var(--fg-muted); opacity: .45; cursor: grab; display: inline-flex; }
.modu-item:hover .modu-grip, .modu-group-head:hover .modu-grip { opacity: 1; }
.modu-tag { font-size: 9px; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--gcol, #0284C7); border-radius: 4px; padding: 1px 5px; }
.modu-item.dragging { opacity: .4; }
.modu-item.drop-before::before, .modu-item.drop-after::after, .modu-group-head.drop-before::before {
  content: ''; position: absolute; left: 4px; right: 4px; height: 3px; border-radius: 2px; background: var(--gcol, #1F5F8B); }
.modu-group-head { position: relative; }
.modu-item.drop-before::before, .modu-group-head.drop-before::before { top: -2px; }
.modu-item.drop-after::after { bottom: -2px; }
.modu-group-head.drop-into, .modu-group-body.drop-into { outline: 2px dashed var(--gcol); outline-offset: -2px; }
.modu-tail { height: 24px; }
@media (max-width: 900px) { .modu-layout { grid-template-columns: 1fr; } .modu-side { position: static; max-height: none; border-right: 0; } }

/* ===== Scheda paziente → Consensi: gruppi colorati ===== */
.cons-gruppo { margin-bottom: 14px; }
.cons-gruppo-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gcol); padding: 4px 0 6px; border-bottom: 2px solid color-mix(in srgb, var(--gcol) 35%, transparent); margin-bottom: 8px; }
.cons-gruppo-n { font-size: 10px; background: color-mix(in srgb, var(--gcol) 15%, transparent); border-radius: 10px; padding: 1px 7px; }
.cons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.cons-card { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--mcol) 28%, var(--border-default)); border-left: 5px solid var(--mcol); border-radius: 10px;
  display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s, transform .15s;
  background: linear-gradient(135deg, color-mix(in srgb, var(--mcol) 13%, var(--bg-surface, #fff)) 0%, color-mix(in srgb, var(--mcol) 4%, var(--bg-surface, #fff)) 60%); }
.cons-riga { border: 1px solid color-mix(in srgb, var(--mcol) 28%, var(--border-default)); border-left: 5px solid var(--mcol); border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--mcol) 10%, var(--bg-surface, #fff)) 0%, var(--bg-surface, #fff) 70%); }
.cons-card:hover { box-shadow: 0 4px 14px color-mix(in srgb, var(--mcol) 25%, transparent); transform: translateY(-1px); }
/* Firma con tablet (Wacom): azione principale delle card dei consensi */
.btn.btn-tablet { flex: 1 1 auto; min-height: 34px; padding: 6px 14px; font-weight: 700; font-size: 13px; letter-spacing: .01em;
  background: linear-gradient(135deg, #1F5F8B, #2563EB); border-color: #1d4ed8; color: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .35); }
.btn.btn-tablet:hover { background: linear-gradient(135deg, #1a5079, #1d4ed8); box-shadow: 0 4px 12px rgba(37, 99, 235, .45); }
.btn.btn-tablet:active { transform: translateY(1px); }

/* ===== Ricette: foglio modificabile ===== */
.ricetta-editor { min-height: 320px; max-height: 55vh; overflow: auto; padding: 22px 28px; background: #fff; color: #1B2027;
  border: 1px solid var(--border-default); border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.02), 0 2px 10px rgba(0,0,0,.06);
  font-size: 10.5pt; line-height: 1.45; outline: none; }
.ricetta-editor:focus { border-color: #65A30D; box-shadow: 0 0 0 3px rgba(101,163,13,.18); }
.ricetta-editor p { margin: 5px 0; }

/* ---------- Modulistica: consensi modificabili in Word (Collabora) ---------- */
.modu-word-intro { font-size: 13px; color: var(--fg-default); line-height: 1.5; margin: 0 0 12px; }
.modu-word-azioni { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.modu-ph-list { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.modu-ph { font-size: 11px; padding: 2px 6px; border-radius: 5px; background: var(--bg-secondary);
  border: 1px solid var(--border-subtle); cursor: pointer; color: var(--fg-default); }
.modu-ph:hover { border-color: var(--brand-primary); }
.modu-versioni { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.modu-versione { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border-subtle);
  border-radius: 8px; font-size: 12.5px; }
.modu-versione-info { flex: 1; min-width: 0; }
.modu-avanzate > summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--fg-muted); }

.word-overlay { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; background: var(--bg-app); }
.word-bar { display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary); min-height: 44px; }
.word-titolo { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--fg-strong);
  max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.word-stato { font-size: 12px; color: var(--fg-muted); white-space: nowrap; }
.word-stato.word-stato-mod { color: #B45309; }
.word-hint { font-size: 11px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.word-frame { flex: 1; width: 100%; border: 0; background: #fff; }
body.word-aperto { overflow: hidden; }
@media (max-width: 900px) { .word-hint { display: none; } }

/* Agenda: "Scheda paziente" in evidenza (riquadro al passaggio del mouse e menu tasto destro) */
.hover-scheda .hs-btn.hs-primario {
  grid-column: 1 / -1; justify-content: center; padding: 8px 10px; margin-bottom: 2px;
  background: var(--brand-primary); color: #fff; font-size: 13px; font-weight: 700;
}
.hover-scheda .hs-btn.hs-primario:hover { background: var(--brand-primary); filter: brightness(1.12); }
.appt-menu button.menu-scheda-pz {
  background: var(--brand-primary); color: #fff; font-weight: 700; padding: 8px 10px; margin: 2px 0 4px;
}
.appt-menu button.menu-scheda-pz:hover { background: var(--brand-primary); filter: brightness(1.12); }

/* Scheda paziente: schede riordinabili con il trascinamento */
.tab[draggable="true"] { user-select: none; }
.tab.tab-trascinata { opacity: .45; }
.tab.tab-drop-prima { box-shadow: inset 3px 0 0 var(--brand-primary); }
.tab.tab-drop-dopo { box-shadow: inset -3px 0 0 var(--brand-primary); }
.tab.tab-reset { margin-left: auto; padding: 12px 10px; color: var(--fg-muted); }

/* ===== STATO: pallino in alto a sinistra (colore configurabile: Impostazioni → Tipi → Stati) ===== */
.appt-stato-dot {
  position: absolute; top: 6px; left: 3px; z-index: 2;
  width: 10px; height: 10px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(0,0,0,.35);
  pointer-events: auto; cursor: help;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; line-height: 1; color: #fff;
}
.appt-stato-dot.stato-dot-in-corso { animation: appt-dot-pulse 1.6s ease-in-out infinite; }
/* concluso senza esito: più grande, "!" e alone rosso pulsante */
.appt-stato-dot.appt-esito-mancante {
  width: 12px; height: 12px; top: 5px; left: 2px;
  animation: appt-esito-pulse 1.2s ease-in-out infinite;
}
@keyframes appt-dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes appt-esito-pulse {
  0%,100% { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px rgba(220,38,38,.9); }
  50%     { box-shadow: 0 0 0 1.5px #fff, 0 0 0 6px rgba(220,38,38,.25); }
}
.appt-pos.appt-micro .appt-stato-dot { top: 3px; width: 8px; height: 8px; }
.appt-pos.appt-micro .appt-stato-dot.appt-esito-mancante { width: 10px; height: 10px; font-size: 8px; }

/* Agenda: pulsante "N da chiudere" */
.agenda-chiudere-btn { background: #FEF3C7; color: #92400E; border: 1px solid #F59E0B; font-weight: 600; }
.agenda-chiudere-btn:hover { background: #FDE68A; }
html[data-theme="dark"] .agenda-chiudere-btn { background: rgba(245,158,11,.18); color: #FCD34D; }

/* Elenco "Appuntamenti da chiudere" */
.esiti-intro { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0 0 10px; font-size: 13px; }
.esiti-conteggio { margin-left: auto; font-weight: 700; color: var(--fg-strong); }
.esiti-lista { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.esiti-giorno { font-size: 12px; font-weight: 700; color: var(--fg-muted); text-transform: capitalize; margin: 8px 0 2px; }
.esiti-riga { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border-subtle); border-radius: 8px; }
.esiti-riga.esiti-salvo { opacity: .45; pointer-events: none; }
.esiti-ora { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.esiti-info { flex: 1; min-width: 0; font-size: 13px; }
.esiti-sub { font-size: 11.5px; color: var(--fg-muted); }
.esiti-azioni { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.esiti-btn { border: 1px solid var(--esito-col); background: transparent; color: var(--fg-default); white-space: nowrap; }
.esiti-btn:hover { background: color-mix(in srgb, var(--esito-col) 14%, transparent); }
.stati-cfg-lista { display: flex; flex-direction: column; gap: 8px; }
.stati-cfg-riga { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: 8px; }
.stati-cfg-nome { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.stati-cfg-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0,0,0,.15); }
.stati-cfg-modo { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; cursor: pointer; }

/* Preventivo: consensi da far firmare (sotto le voci) */
.cons-strip { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--border-default); border-radius: 10px; background: var(--bg-secondary); }
.cons-strip:empty { display: none; }
.cons-strip-head { display: flex; align-items: center; gap: 2px; font-size: 13px; flex-wrap: wrap; }
.cons-strip-hint { font-size: 12px; color: var(--fg-muted); }
.cons-strip-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.cons-chip { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 8px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--mcol, var(--border-default)); background: color-mix(in srgb, var(--mcol, #1F5F8B) 10%, var(--white));
  color: var(--fg-strong); }
.cons-chip-ok { opacity: .75; }
.cons-chip-x { border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; color: var(--fg-muted); border-radius: 50%; }
.cons-chip-x:hover { color: var(--red-600); background: rgba(220,38,38,.1); }
.cons-strip-add { height: 28px; font-size: 12px; max-width: 230px; }
.cons-strip-esclusi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--fg-muted); }
.cons-chip-escluso { border-style: dashed; background: transparent; color: var(--fg-muted); cursor: pointer; text-decoration: line-through; padding-right: 8px; }
.cons-chip-escluso:hover { text-decoration: none; color: var(--fg-strong); }

/* Impostazioni → Tipi → Abbinamento consensi (griglia) */
.abb-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.abb-wrap { overflow: auto; max-height: calc(100vh - 290px); border: 1px solid var(--border-default); border-radius: 8px; }
.abb-tab { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.abb-tab th, .abb-tab td { border-bottom: 1px solid var(--border-subtle); padding: 3px 6px; background: var(--white); }
.abb-tab thead th { position: sticky; top: 0; z-index: 2; vertical-align: bottom; background: var(--bg-secondary); }
.abb-tab .abb-pre { position: sticky; left: 0; z-index: 1; min-width: 260px; max-width: 320px; text-align: left; }
.abb-tab thead .abb-pre { z-index: 3; }
.abb-col { width: 34px; min-width: 34px; height: 150px; padding: 4px 2px !important; cursor: pointer; }
.abb-col span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-weight: 600; display: inline-block; max-height: 140px; overflow: hidden; text-overflow: ellipsis; }
.abb-col:hover { background: var(--blue-50) !important; }
.abb-cell { text-align: center; }
.abb-cell input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--brand-primary); }
.abb-cell.abb-sugg { box-shadow: inset 0 0 0 2px rgba(242,183,5,.7); }
.abb-riga-mod td { background: #FFFBEB !important; }
.abb-nome { font-weight: 500; }
.abb-classe { font-size: 10.5px; color: var(--fg-muted); }

/* Preventivo → Nuova voce: suggerimenti prestazione (nome + prezzo) */
.voce-sugg { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 20; max-height: 280px; overflow-y: auto;
  background: var(--white); border: 1px solid var(--border-default); border-radius: 8px; box-shadow: var(--shadow-md); }
.voce-sugg-item { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; font-size: 13px; cursor: pointer; }
.voce-sugg-item:hover, .voce-sugg-item.active { background: var(--blue-50); }
.voce-sugg-nome { color: var(--fg-strong); }
.voce-sugg-prezzo { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); white-space: nowrap; }

/* Ricette: righe di prescrizione (farmaco · posologia · durata) */
.rx-righe { display: grid; gap: 6px; }
.rx-riga { display: grid; grid-template-columns: 22px minmax(180px, 1.3fr) minmax(180px, 1.4fr) minmax(110px, .8fr) auto; gap: 6px; align-items: center; }
.rx-riga-head { font-size: 11px; font-weight: 600; color: var(--fg-muted); }
.rx-riga-off .input { opacity: .5; }
.rx-azioni { display: inline-flex; gap: 0; }
.rx-azioni .btn-icon { width: 26px; height: 26px; padding: 0; }
.input.rx-da-compilare { border-color: #F59E0B; background: #FFFBEB; }
html[data-theme="dark"] .input.rx-da-compilare { background: rgba(245,158,11,.12); }
.rx-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rx-anteprima { min-height: 260px; background: #fff; color: #1B2027; border: 1px solid var(--border-default); border-radius: 8px; padding: 14px 18px; }
.rx-anteprima.rx-manuale { outline: 2px solid var(--brand-primary); }
@media (max-width: 1000px) { .rx-layout { grid-template-columns: 1fr; } }

/* Fatture: elenco ad albero per piano di cura (fatture.js righeFatture) */
.pazienti-table tr.fatt-tree-piano td { background: var(--bg-secondary); font-size: 12px; padding-top: 6px; padding-bottom: 6px; }
.pazienti-table tr.fatt-tree-piano { cursor: pointer; }
.fatt-tree-caret { display: inline-flex; width: 18px; color: var(--fg-muted); vertical-align: middle; }
.fatt-tree-meta { margin-left: 10px; color: var(--fg-muted); }
.fatt-link-piano { color: var(--blue-700); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; }
.fatt-link-piano:hover { text-decoration: underline; }
.fatt-tree-ramo { display: inline-block; width: 14px; height: 14px; margin: 0 6px 0 8px; vertical-align: -2px;
  border-left: 1.5px solid var(--border-default); border-bottom: 1.5px solid var(--border-default); border-bottom-left-radius: 4px; }
tr.fatt-tree-figlio td:first-child { position: relative; }
tr.fatt-tree-figlio:not(.fatt-tree-ultimo) td:first-child::before { content: ''; position: absolute; left: calc(var(--td-pad, 12px) + 8px); top: 50%; bottom: 0;
  border-left: 1.5px solid var(--border-default); }
/* note di credito sotto la fattura stornata (livello 1 = fuori da un piano, 2 = dentro un piano) */
tr.fatt-tree-nc td { color: var(--red-600); }
tr.fatt-tree-nc.fatt-tree-l2 .fatt-tree-ramo { margin-left: 30px; }
tr.fatt-stornata td:first-child::after { content: 'stornata'; margin-left: 6px; padding: 1px 6px; border-radius: 8px;
  font-size: 10px; font-family: var(--font-sans, system-ui); background: var(--red-50, #fdecec); color: var(--red-600); }
/* dettaglio fattura: fascia "nota di credito" in cima */
.fatt-banner-nc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border-radius: 8px;
  background: var(--red-50, #fdecec); border: 1px solid var(--red-600); border-left-width: 5px; color: var(--red-600); font-size: 13px; }
.fatt-banner-nc-tit { font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .03em; }
/* Aggiungi legame: frase di controllo */
.relazione-anteprima { margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: var(--bg-secondary); font-size: 13px; }

/* "Incassa e fattura" (public/js/incasso-piano.js) */
.incp-testa { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--bg-secondary); border-radius: 8px; font-size: 13px; margin-bottom: 12px; }
.incp-passo { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; margin: 14px 0 8px; color: var(--fg-strong); }
.incp-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-600); color: #fff; font-size: 12px; }
.incp-opzioni { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.incp-opz { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border: 1px solid var(--border-default); border-radius: 8px; cursor: pointer; }
.incp-opz:has(input:checked) { border-color: var(--blue-600); background: var(--blue-50); }
.incp-opz-off { opacity: .5; cursor: not-allowed; }
.incp-opz-tit { font-weight: 600; font-size: 13px; }
.incp-opz-sub { font-size: 11px; color: var(--fg-muted); }
.incp-voci { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.incp-voce { display: grid; grid-template-columns: 20px 1fr 120px; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.incp-voce:hover { background: var(--bg-secondary); }
.incp-voce-sub { font-size: 11px; color: var(--fg-muted); }
.incp-voce-imp { height: 30px; text-align: right; }
.incp-vuoto, .incp-solo { font-size: 13px; color: var(--fg-muted); padding: 10px; border: 1px dashed var(--border-default); border-radius: 8px; }
.incp-righe { width: 100%; border-collapse: collapse; font-size: 13px; }
.incp-righe td { padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); }
.incp-righe td.mono { text-align: right; white-space: nowrap; width: 110px; }
.incp-bollo td { color: var(--fg-muted); font-size: 12px; }
.incp-tot td { font-weight: 700; border-bottom: 0; }
.incp-avviso { margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: var(--amber-50, #fff8e1); color: var(--amber-700); font-size: 12px; }
/* testata preventivo: avanzamento + fatture collegate */
.piano-barra { height: 6px; background: var(--bone-100); border-radius: 3px; overflow: hidden; }
.piano-barra-fill { height: 100%; background: var(--mint-500); transition: width .3s; }
.piano-fatture { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.piano-fatture-lbl { color: var(--fg-muted); }
.piano-fattura-link { font-family: var(--font-mono, monospace); color: var(--blue-700); text-decoration: none; padding: 2px 8px; border-radius: 10px; background: var(--blue-50); }
.piano-fattura-link:hover { text-decoration: underline; }
.piano-fattura-link.nc { color: var(--red-600); background: var(--red-50, #fdecec); }
.piano-fattura-link.stornata { text-decoration: line-through; opacity: .7; }
@media (max-width: 640px) { .incp-opzioni { grid-template-columns: 1fr; } }
.incp-avviso.incp-avviso-errore { background: var(--red-50, #fdecec); color: var(--red-600); font-weight: 600; }
/* SdI: promemoria alla creazione + pulsante "Invia" in griglia */
.sdi-promemoria { display: flex; gap: 14px; align-items: flex-start; font-size: 13px; }
.btn-sdi-invia { background: var(--amber-100); color: var(--amber-700); border: 1px solid var(--amber-300); font-weight: 600; }
.btn-sdi-invia:hover { background: var(--amber-200, #fde68a); }
td.td-sdi { white-space: nowrap; }
td.td-sdi .btn-sdi-invia { margin-left: 6px; padding: 2px 8px; height: 24px; font-size: 11px; }
/* Nota di credito: motivo + fattura corretta */
.nc-opz { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border-default); border-radius: 8px; cursor: pointer; font-size: 13px; }
.nc-opz:has(input:checked) { border-color: var(--blue-600); background: var(--blue-50); }
.nc-opz-off { opacity: .5; cursor: not-allowed; }
.nc-opz-sub { font-size: 12px; color: var(--fg-muted); }
.rif-righe { display: grid; gap: 6px; }
.rif-riga { display: grid; grid-template-columns: 1fr 120px 32px; gap: 6px; align-items: center; }
.rif-tot { margin-top: 10px; text-align: right; font-size: 13px; }
.rif-err { color: var(--red-600); font-size: 12px; }
/* Incassa e fattura: metodo di pagamento a pulsanti */
.incp-pagamento { display: grid; grid-template-columns: 1fr 170px; gap: 12px; align-items: start; }
.incp-metodi { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.incp-metodo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px;
  padding: 8px 4px; border: 1.5px solid var(--border-default); border-radius: 10px; background: var(--bg-primary, #fff);
  color: var(--fg-default); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; }
.incp-metodo:hover { border-color: var(--blue-500); background: var(--blue-50); }
.incp-metodo.attivo { border-color: var(--blue-600); background: var(--blue-600); color: #fff; }
@media (max-width: 640px) { .incp-pagamento { grid-template-columns: 1fr; } .incp-metodi { grid-template-columns: repeat(3, 1fr); } }
.nc-metodi .incp-metodo { min-height: 50px; }
.incp-metodi-off { opacity: .45; pointer-events: none; }
/* Immagini: cestino sulla miniatura */
.rx-thumb { position: relative; }
.rx-thumb-del { position: absolute; top: 6px; right: 6px; z-index: 2; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; }
.rx-thumb:hover .rx-thumb-del, .rx-thumb-del:focus { opacity: 1; }
.rx-thumb-del:hover { background: var(--red-600); }

/* Fatturazione: raggruppamento + selezione + export Fatture in Cloud */
.fatt-selbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin: 0 0 10px;
  background: var(--bg-secondary); border-radius: 8px; font-size: 12px; }
.fatt-selbar-sep { width: 1px; height: 20px; background: var(--border-default); margin: 0 4px; }
.fatt-selbar-conta { color: var(--fg-muted); }
.fatt-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; user-select: none; }
.fatt-switch input { position: absolute; opacity: 0; pointer-events: none; }
.fatt-switch-track { width: 32px; height: 18px; border-radius: 9px; background: var(--bone-300, #cbd5e0); position: relative; transition: background .15s; }
.fatt-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.fatt-switch input:checked + .fatt-switch-track { background: var(--blue-600); }
.fatt-switch input:checked + .fatt-switch-track::after { left: 16px; }
.fatt-switch input:focus-visible + .fatt-switch-track { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.pazienti-table .td-sel { width: 30px; text-align: center; }
.fic-stato { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 6px; font-size: 13px; margin-bottom: 10px; }
.fic-stato.ok { background: var(--mint-50, #e9f8f1); color: var(--mint-700); }
.fic-stato.off { background: var(--amber-50, #fff8e1); color: var(--amber-700); }
.fic-anteprima { width: 100%; border-collapse: collapse; font-size: 12px; }
.fic-anteprima th, .fic-anteprima td { padding: 5px 6px; border-bottom: 1px solid var(--border-subtle); text-align: left; }
.fic-json { max-height: 260px; overflow: auto; background: var(--bg-secondary); padding: 8px; border-radius: 6px; font-size: 11px; }
/* Export Fatture in Cloud: log in tempo reale */
.fic-barra { position: relative; height: 22px; margin-top: 12px; border-radius: 6px; background: var(--bg-secondary); overflow: hidden; }
.fic-barra-fill { height: 100%; background: var(--mint-500); transition: width .2s; }
.fic-barra.con-errori .fic-barra-fill { background: var(--amber-500); }
.fic-barra-testo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.fic-log { margin-top: 8px; max-height: 300px; overflow-y: auto; padding: 8px; border-radius: 6px; background: #0f1419; color: #d7dde3; font-size: 12px; }
.fic-log-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 0; }
.fic-log-riga.ok { color: #7ee2b8; } .fic-log-riga.avviso { color: #f5c26b; } .fic-log-riga.errore { color: #ff8a8a; }
.fic-log-ora { color: #7d8790; font-size: 11px; }
.fic-log-num { padding: 0 6px; border-radius: 4px; background: rgba(255,255,255,.08); }
.fic-log-msg { flex: 1; min-width: 200px; }
.fic-log-det { width: 100%; margin-left: 70px; font-size: 11px; color: #9aa4ad; }
.fic-log-det .fic-json { background: #1a2028; color: #d7dde3; }
.fic-quota { font-size: 11px; color: var(--fg-muted); }
.fic-pausa { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 8px; padding: 8px 10px; border-radius: 6px;
  background: var(--amber-50, #fff8e1); color: var(--amber-700); font-size: 12px; border: 1px solid var(--amber-300); }

/* Parodontale: presenza dente nel mini-editor */
.paro-mini-presenza { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.paro-mini-assente { font-size: 12px; color: var(--fg-muted); font-style: italic; padding: 4px 2px; }

/* Parodontale: confronto fra due esami */
.paro-cmp-bar { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 13px; color: var(--fg-default); }
.paro-cmp-select { width: auto; min-width: 220px; }
.paro-cmp-riepilogo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-bottom: 14px; }
.paro-cmp-table { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--white);
  border: 1px solid var(--border-default); border-radius: 8px; overflow: hidden; }
.paro-cmp-table th { text-align: right; padding: 6px 10px; font-size: 11px; color: var(--fg-muted);
  background: var(--bg-secondary); font-family: var(--font-mono); }
.paro-cmp-table td { text-align: right; padding: 5px 10px; border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.paro-cmp-table td.paro-cmp-label { text-align: left; font-family: var(--font-sans); color: var(--fg-default); }
.paro-cmp-delta { font-weight: 700; }
.paro-cmp-delta.meglio, .paro-cmp-pill.meglio strong { color: #1e8a5a; }
.paro-cmp-delta.peggio, .paro-cmp-pill.peggio strong { color: #c0392b; }
.paro-cmp-delta.neutro, .paro-cmp-pill.neutro strong { color: var(--fg-muted); }
.paro-cmp-siti { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
  background: var(--bg-secondary); border-radius: 8px; font-size: 12px; color: var(--fg-default); }
.paro-cmp-siti-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); }
.paro-cmp-pill strong { font-size: 16px; font-family: var(--font-mono); margin-right: 4px; }
.paro-cmp-nota { margin-top: auto; font-size: 11px; color: var(--fg-muted); }
.paro-cmp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.paro-cmp-col { min-width: 0; }
.paro-cmp-col-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 13px; color: var(--fg-strong); }
.paro-cmp-col-head span:not(.badge) { color: var(--fg-muted); font-size: 12px; }
@media (max-width: 1280px) {
  .paro-cmp-grid, .paro-cmp-riepilogo { grid-template-columns: minmax(0, 1fr); }
}