/* ===== Token ===== */
:root {
  --bg: #F1F4F2;
  --paper: #FFFFFF;
  --ink: #17242B;
  --muted: #5C6B72;
  --line: #DDE4E1;
  --brand: #0F6E5D;
  --brand-dark: #0A4A3F;
  --brand-soft: #E3F0EC;
  --richiesta: #B7791F;      --richiesta-bg: #FBF1DD;
  --programmato: #2563EB;    --programmato-bg: #E4ECFD;
  --confermato: #15803D;     --confermato-bg: #E2F3E7;
  --rifiutato: #B91C1C;      --rifiutato-bg: #FBE5E5;
  --annullato: #6B7280;      --annullato-bg: #ECEEF0;
  --radius: 12px;
  --shadow: 0 2px 10px rgba(23, 36, 43, .08);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.45; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--ink); }
:focus-visible { outline: 3px solid #7FB8AB; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ===== Topbar ===== */
.topbar {
  background: var(--brand-dark); color: #fff;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; position: sticky; top: 0; z-index: 20;
}
.topbar .logo { display: flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -.02em; font-size: 17px; }
.topbar .logo svg { flex: none; }
.topbar .who { margin-left: auto; text-align: right; font-size: 12.5px; opacity: .92; }
.topbar .who b { display: block; font-size: 13.5px; }
.btn-esci { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 8px; padding: 6px 12px; }
.btn-esci:hover { background: rgba(255,255,255,.12); }
/* Collegamento al configuratore di sistemi (applicazione separata). Sugli schermi
   stretti resta la sola icona, per non rubare spazio al nome dell'utente. */
.btn-config { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none;
  background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 8px;
  padding: 6px 12px; font-size: 13px; font-weight: 600; }
.btn-config:hover { background: rgba(255,255,255,.12); }
@media (max-width: 600px) { .btn-config { font-size: 0; padding: 6px 9px; gap: 0; } .btn-config::first-letter { font-size: 15px; } }

/* ===== Campanella notifiche ===== */
.btn-bell { position: relative; background: transparent; border: none; color: #fff; font-size: 19px; line-height: 1; padding: 4px 6px; border-radius: 8px; }
.btn-bell:hover { background: rgba(255,255,255,.12); }
.bell-badge { position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--richiesta); color: #fff; border-radius: 999px; font-size: 10.5px; font-weight: 800; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--brand-dark); }
.notif-panel { position: fixed; top: 52px; right: 10px; width: min(360px, calc(100vw - 20px)); max-height: 70dvh; overflow-y: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px rgba(23,36,43,.22); z-index: 60; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); }
.notif-list { padding: 4px; }
.notif-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 9px; cursor: pointer; }
.notif-item:hover { background: var(--bg); }
.notif-item.unread { background: var(--brand-soft); }
.notif-ic { flex: none; font-size: 16px; line-height: 1.3; }
.notif-body { font-size: 13.5px; }
.notif-time { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ===== Tabs ===== */
.tabs { display: flex; gap: 4px; background: var(--paper); border-bottom: 1px solid var(--line); padding: 0 10px; overflow-x: auto; position: sticky; top: 52px; z-index: 19; }
/* Sul telefono la barra andava in scorrimento orizzontale e nascondeva meta' delle
   voci senza dirlo: l'agente vedeva sei schede e ne poteva raggiungere tre. Qui va
   a capo, cosi' sono tutte visibili e raggiungibili al primo sguardo. */
@media (max-width: 640px) {
  .tabs { flex-wrap: wrap; overflow-x: visible; padding: 0 8px; row-gap: 0; }
  .tab-group > .tab { padding: 10px 10px; font-size: 14px; }

}
.tabs button { background: none; border: none; padding: 12px 14px; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs button.on { color: var(--brand-dark); border-bottom-color: var(--brand); }

/* ===== Agenda dell'agente nel modulo "Nuovo" =====
   Una riga per cosa c'e' e una per ogni buco: quelli utilizzabili sono pulsanti,
   quelli irraggiungibili restano visibili ma spenti, perche' sapere PERCHE' non si
   puo' vale piu' che non vederli affatto. */
.slot-riga { display: block; width: 100%; text-align: left; font-size: 13.5px; line-height: 1.45;
  padding: 9px 12px; border-radius: 9px; margin-bottom: 6px; border: 1px solid var(--line);
  background: var(--paper); }
.slot-occupato { border-left: 3px solid var(--brand); color: var(--muted); }
.slot-bloccato { border-style: dashed; color: var(--muted); }
.slot-libero { border-color: var(--brand); color: var(--ink); cursor: pointer; }
.slot-libero:hover { background: var(--brand-soft); }
.slot-libero.slot-scelto { background: var(--brand); color: #fff; border-color: var(--brand-dark); }
.slot-libero.slot-scelto div { color: rgba(255,255,255,.85) !important; }
.slot-no { border-style: dashed; border-color: var(--richiesta); color: var(--muted); }

/* ===== Voci di menu con tendina =====
   Il gruppo porta la sottolineatura attiva, cosi' resta accesa anche quando la
   pagina aperta e' una voce secondaria. */
.tab-group { display: inline-flex; align-items: stretch; flex: none; border-bottom: 3px solid transparent; }
.tab-group.on { border-bottom-color: var(--brand); }
.tab-group.on > .tab { color: var(--brand-dark); }
/* La freccia sta DENTRO il pulsante: si tocca la voce, non un bersaglio da
   quattro millimetri accanto alla voce. */
.tab-group > .tab { border-bottom: none; display: inline-flex; align-items: center; gap: 5px; }
.tab-freccia { font-size: 10px; line-height: 1; opacity: .55; }
.tab-group > .tab[aria-expanded="true"] .tab-freccia { opacity: 1; }

.tab-group > .tab:hover { color: var(--brand-dark); }
.tab-menu {
  position: fixed; z-index: 40; min-width: 210px; padding: 6px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 10px 30px rgba(23,36,43,.20); display: flex; flex-direction: column;
}
/* Il "display: flex" qui sopra vincerebbe sull'attributo hidden (che vale quanto
   una regola del browser): senza questa riga le tendine resterebbero tutte aperte. */
.tab-menu[hidden] { display: none; }
.tab-menu button {
  border-bottom: none; text-align: left; padding: 10px 12px; border-radius: 8px;
  color: var(--ink); font-weight: 600; width: 100%;
}
.tab-menu button:hover { background: var(--bg); }
.tab-menu button.on { color: var(--brand-dark); background: var(--brand-soft); }
.tabs .badge { background: var(--richiesta); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; margin-left: 6px; }

main { max-width: 1100px; margin: 0 auto; padding: 16px; }

/* ===== Pulsanti ===== */
.btn { border: none; border-radius: 9px; padding: 9px 16px; font-weight: 600; }
/* Un collegamento verso l'esterno (es. "Naviga", che apre l'app Maps) deve stare
   in fila con i pulsanti veri: senza questa riga sarebbe sottolineato e sfalsato. */
a.btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-danger { background: var(--rifiutato-bg); color: var(--rifiutato); }
.btn-ok { background: var(--confermato); color: #fff; }
.btn-sm { padding: 6px 11px; font-size: 13.5px; }
.btn:disabled { opacity: .5; cursor: default; }

/* ===== Login ===== */
.login-wrap { min-height: 100dvh; display: grid; place-items: center; background: linear-gradient(160deg, var(--brand-dark), var(--brand) 130%); padding: 20px; }
.login-card { background: var(--paper); border-radius: 16px; box-shadow: var(--shadow); padding: 30px 26px; width: 100%; max-width: 380px; }
.login-card h1 { margin: 6px 0 2px; font-size: 22px; letter-spacing: -.02em; }
.login-card p.sub { margin: 0 0 20px; color: var(--muted); font-size: 13.5px; }

/* ===== Form ===== */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; background: #fff;
}
.field textarea { min-height: 70px; resize: vertical; }
.form-card { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; max-width: 560px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.error-msg { background: var(--rifiutato-bg); color: var(--rifiutato); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; margin-bottom: 12px; }

/* ===== Stati ===== */
.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; font-size: 12px; font-weight: 700; padding: 3px 10px; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.richiesta { background: var(--richiesta-bg); color: var(--richiesta); }
.chip.programmato { background: var(--programmato-bg); color: var(--programmato); }
.chip.confermato { background: var(--confermato-bg); color: var(--confermato); }
.chip.rifiutato { background: var(--rifiutato-bg); color: var(--rifiutato); }
.chip.annullato { background: var(--annullato-bg); color: var(--annullato); }

/* Flusso stati (elemento firma) */
.flow { display: flex; align-items: center; gap: 0; margin: 14px 0 4px; }
.flow .step { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.flow .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: #fff; display: grid; place-items: center; font-size: 11px; color: var(--muted); }
.flow .bar { flex: 1; height: 2px; background: var(--line); margin: 0 6px; min-width: 16px; }
.flow .step.done .dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.flow .step.done { color: var(--brand-dark); }
.flow .step.stop .dot { background: var(--rifiutato); border-color: var(--rifiutato); color: #fff; }
.flow .step.stop { color: var(--rifiutato); }

/* ===== Card richieste ===== */
.section-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 22px 0 10px; }
.appt-card {
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 13px 15px; margin-bottom: 10px; border-left: 5px solid var(--line);
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; cursor: pointer;
}
.appt-card:hover { box-shadow: 0 4px 14px rgba(23,36,43,.14); }
.appt-card .main { flex: 1; min-width: 200px; }
.appt-card .name { font-weight: 700; }
.appt-card .meta { color: var(--muted); font-size: 13px; margin-top: 2px; }
.empty { color: var(--muted); background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius); padding: 22px; text-align: center; }

/* ===== Calendario ===== */
.cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.cal-head h2 { font-size: 17px; margin: 0 8px 0 0; letter-spacing: -.01em; }
.cal-nav { display: flex; gap: 6px; margin-left: auto; }
.cal-grid { display: grid; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.cal-cols { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-left: 1px solid var(--line); }
.cal-daylabel { text-align: center; padding: 8px 4px; font-size: 12.5px; font-weight: 700; border-bottom: 2px solid var(--line); border-right: 1px solid var(--line); background: #FAFCFB; }
.cal-daylabel.today { color: var(--brand-dark); background: var(--brand-soft); }
.cal-daylabel small { display: block; font-weight: 500; color: var(--muted); }
.cal-body { display: flex; }
.cal-hours { width: 46px; flex: none; font-size: 11px; color: var(--muted); text-align: right; padding-right: 6px; }
.cal-hours div { height: 48px; transform: translateY(-7px); }
.cal-col { position: relative; border-right: 1px solid var(--line); background:
  repeating-linear-gradient(to bottom, transparent 0 47px, var(--line) 47px 48px); }
.cal-evt {
  position: absolute; left: 3px; right: 3px; border-radius: 7px; padding: 3px 6px;
  font-size: 11.5px; overflow: hidden; cursor: pointer; color: #fff; line-height: 1.25;
  border: none; text-align: left; display: block; width: calc(100% - 6px);
}
.cal-evt b { display: block; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-evt.s-programmato { opacity: .75; outline: 2px dashed rgba(255,255,255,.7); outline-offset: -2px; }
.cal-evt.s-confermato { opacity: 1; }
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: #E11D48; z-index: 5; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #E11D48; }
.cal-switch { display: flex; gap: 4px; }

/* Vista mensile */
.cal-month { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.cal-month-head { display: grid; grid-template-columns: repeat(7, 1fr); background: #FAFCFB; border-bottom: 2px solid var(--line); }
.cal-month-head div { text-align: center; padding: 8px 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cal-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-mcell { min-height: 98px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.cal-mcell:nth-child(7n) { border-right: none; }
.cal-mcell:hover { background: #F7FAF9; }
.cal-mcell.out { background: #FAFBFB; }
.cal-mcell.out .cal-mday { color: #B8C2C0; }
.cal-mcell.today .cal-mday { background: var(--brand); color: #fff; }
.cal-mday { align-self: flex-start; font-size: 12.5px; font-weight: 700; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.cal-mevts { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-mevt { font-size: 10.5px; color: #fff; border-radius: 4px; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: none; text-align: left; cursor: pointer; line-height: 1.4; display: block; width: 100%; }
.cal-mevt.s-programmato { opacity: .8; }
.cal-mevt.blk { background: repeating-linear-gradient(45deg, #E7EAEC, #E7EAEC 4px, #DDE1E4 4px, #DDE1E4 8px); color: #4A555B; }
.cal-mmore { font-size: 10.5px; color: var(--muted); font-weight: 700; padding: 0 5px; }
@media (max-width: 700px) { .cal-mcell { min-height: 62px; padding: 2px; } .cal-mevt { font-size: 9px; padding: 1px 3px; } .cal-mday { font-size: 11px; height: 19px; min-width: 19px; } }

.cal-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

/* ===== Modale ===== */
.modal-back { position: fixed; inset: 0; background: rgba(15, 26, 24, .5); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal { background: var(--paper); border-radius: 16px; width: 100%; max-width: 480px; max-height: 90dvh; overflow-y: auto; padding: 22px; }
.modal h3 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.02em; }
.modal .close-x { float: right; background: none; border: none; font-size: 22px; color: var(--muted); line-height: 1; }
.modal .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.detail-row { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.detail-row .k { width: 110px; flex: none; color: var(--muted); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding-top: 1px; }
.warn-box { background: var(--richiesta-bg); color: var(--richiesta); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; margin-top: 10px; }

/* ===== Tabelle ===== */
.table-card { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 12px 14px; border-bottom: 2px solid var(--line); }
td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
.swatch { width: 16px; height: 16px; border-radius: 5px; display: inline-block; vertical-align: -3px; margin-right: 6px; }

/* ===== Toast ===== */
#toast-root { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--ink); color: #fff; border-radius: 10px; padding: 11px 18px; font-size: 14px; box-shadow: var(--shadow); animation: pop .18s ease-out; }
.toast.err { background: var(--rifiutato); }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 700px) {
  main { padding: 12px; }
  .tabs { top: 48px; }
}

/* ===== Chat ===== */
.chat-wrap { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.chat-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
.chat-log { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding: 4px; }
.chat-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 14px; }
.msg { max-width: 82%; align-self: flex-start; }
.msg.mine { align-self: flex-end; text-align: right; }
.msg-b { display: inline-block; background: var(--brand-soft); border-radius: 12px 12px 12px 4px; padding: 7px 11px; font-size: 14px; text-align: left; white-space: pre-wrap; word-break: break-word; }
.msg.mine .msg-b { background: var(--brand); color: #fff; border-radius: 12px 12px 4px 12px; }
.msg-m { font-size: 11px; color: var(--muted); margin-top: 2px; }
.chat-input { display: flex; gap: 6px; margin-top: 10px; }
.chat-input input { flex: 1; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; }
.msg-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); margin-left: 8px; }

/* ===== Blocchi (impegni personali) sul calendario ===== */
.cal-block {
  position: absolute; left: 2px; right: 2px; border-radius: 6px; z-index: 3;
  background: repeating-linear-gradient(45deg, #E7EAEC, #E7EAEC 6px, #DDE1E4 6px, #DDE1E4 12px);
  border: 1px solid #C7CDD1; color: #4A555B; font-size: 10.5px; overflow: hidden; padding: 2px 5px;
}
.cal-block span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.cal-legend i.blk { background: repeating-linear-gradient(45deg, #E7EAEC, #E7EAEC 3px, #DDE1E4 3px, #DDE1E4 6px); border: 1px solid #C7CDD1; }

/* ===== Statistiche ===== */
.on-preset { border-color: var(--brand) !important; color: var(--brand-dark) !important; background: var(--brand-soft) !important; }
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 6px; }
.stat-card { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; text-align: center; }
.stat-num { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.stat-lbl { font-size: 12px; color: var(--muted); margin-top: 6px; text-transform: uppercase; letter-spacing: .04em; }
.stat-bars { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; }
.stat-bar-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.stat-bar-label { width: 150px; flex: none; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-bar-track { flex: 1; background: #EEF2F0; border-radius: 6px; height: 18px; position: relative; overflow: hidden; }
.stat-bar-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--brand); border-radius: 6px; transition: width .3s; }
.stat-bar-fill.over { background: var(--confermato); }
.stat-bar-val { width: 62px; flex: none; text-align: right; font-size: 13px; font-weight: 700; }
@media (max-width: 640px) {
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  /* Le schede che fissano quattro o cinque caselle in linea le fissano per lo
     schermo largo: sul telefono vanno comunque a due per riga. */
  .stat-cards[style*="repeat(4"], .stat-cards[style*="repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-bar-label { width: 110px; }
}

/* Occhio per mostrare la password: il campo resta nascosto di suo, l'occhio lo
   scopre solo finche' si guarda. Serve soprattutto sul telefono. */
.pw-box { position: relative; display: block; }
.pw-box > input { padding-right: 44px; }
.pw-occhio {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; line-height: 1;
  font-size: 17px; padding: 6px 8px; border-radius: 8px; opacity: .5;
}
.pw-occhio:hover { opacity: 1; background: var(--brand-soft); }
.pw-occhio.attivo { opacity: 1; }

/* Barra del totale nella griglia prodotti: resta incollata in fondo allo schermo
   mentre si scorre il listino, perche' e' il numero che si sta per dire al
   cliente. */
.barra-totale {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 14px -4px 0; padding: 12px 16px;
  background: var(--brand-dark, #0B5346); color: #fff;
  border-radius: 12px; box-shadow: 0 -4px 18px rgba(0,0,0,.18);
}
.barra-totale .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }

/* Il tablet e' lo schermo di lavoro dell'agente. La griglia non si lascia
   schiacciare: sotto la sua larghezza minima scorre in orizzontale invece di
   impilare i numeri uno sull'altro. */
.table-card table.griglia { min-width: 620px; }
.griglia td { vertical-align: middle; }
@media (max-width: 900px) {
  .barra-totale { padding: 10px 12px; }
}

/* Elenco agenti: i pulsanti di riga stanno stretti, cosi' la scheda di ogni
   persona resta su una riga sola anche con ottanta agenti in elenco. */
.azioni-strette .btn-sm { padding: 5px 8px; font-size: 12.5px; }

/* La matricola dell'agente: sei caratteri che non cambiano mai, scritti come
   un codice e non come una parola. */
.matricola { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; background: var(--brand-soft); color: var(--brand-dark);
  border-radius: 6px; padding: 1px 6px; }

/* Il segnaposto mentre una scheda si carica: meglio una riga che dice 'sto
   lavorando' di uno schermo bianco che non dice niente. */
.caricamento { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.caricamento::after { content: ''; display: block; width: 26px; height: 26px; margin: 12px auto 0;
  border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%;
  animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .caricamento::after { animation: none; } }

/* ---------- chat interna ----------
   Due colonne su schermo largo (elenco a sinistra, conversazione a destra), una
   sola sul telefono: si entra in una conversazione e si torna indietro col
   pulsante, come in qualunque messaggistica. */
.chat-due { display: grid; grid-template-columns: 340px 1fr; height: calc(100dvh - 140px); min-height: 420px;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper);
  --wa-verde: #00A884; --wa-mia: #D9FDD3; --wa-sfondo: #EFEAE2; --wa-testo: #111B21; --wa-grigio: #667781; }
.chat-elenco { overflow-y: auto; border-right: 1px solid var(--line); background: var(--paper); }
.chat-elenco-testa { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px;
  font-size: 20px; position: sticky; top: 0; background: var(--paper); z-index: 1; }
.chat-nuova { border: none; background: none; font-size: 20px; width: 40px; height: 40px; border-radius: 50%; color: var(--wa-grigio); }
.chat-nuova:hover { background: #F0F2F5; }
.chat-corpo { display: flex; flex-direction: column; min-height: 0; position: relative; background: var(--wa-sfondo); }

/* L'elenco: la foto (qui le iniziali), il nome con l'ora, l'ultimo messaggio col pallino. */
.chat-voce { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 0 0 0 14px;
  border: none; background: none; cursor: pointer; }
.chat-voce:hover { background: #F5F6F6; }
.chat-voce.on { background: #F0F2F5; }
.chat-voce-testo { flex: 1; min-width: 0; padding: 12px 14px 12px 0; border-bottom: 1px solid #E9EDEF; }
.chat-voce-riga { display: flex; align-items: center; gap: 8px; }
.chat-nome { flex: 1; min-width: 0; font-weight: 500; font-size: 16px; color: var(--wa-testo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-spento { color: var(--wa-grigio); font-size: 12px; }
.chat-quando { font-size: 12px; color: var(--wa-grigio); white-space: nowrap; }
.chat-quando.nuovo { color: var(--wa-verde); font-weight: 600; }
.chat-ultimo { flex: 1; min-width: 0; font-size: 14px; color: var(--wa-grigio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.chat-badge { background: var(--wa-verde); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 600;
  min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; }
.chat-spunta { color: #8696A0; font-size: 12px; margin-right: 2px; }

.chat-avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; color: #fff; font-weight: 600; font-size: 16px; letter-spacing: .02em; }
.chat-avatar.azienda { background: #DFE5E7; font-size: 21px; }
.chat-testata .chat-avatar { width: 40px; height: 40px; font-size: 14px; }

/* La testata della conversazione. */
.chat-testata { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: #F0F2F5;
  border-bottom: 1px solid #E9EDEF; min-height: 60px; }
.chat-testata-testo { display: flex; flex-direction: column; min-width: 0; }
.chat-testata-testo b { font-weight: 500; font-size: 16px; color: var(--wa-testo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-testata-testo small { font-size: 12.5px; color: var(--wa-grigio); }
/* Il ritorno all'elenco: grande e riconoscibile, da toccare col pollice. */
.chat-indietro { display: none; align-items: center; gap: 2px; flex: none; border: none; border-radius: 22px;
  background: #fff; color: var(--wa-verde); font: inherit; font-size: 16px; font-weight: 600;
  height: 44px; padding: 0 14px 0 8px; margin-left: -6px; box-shadow: 0 1px 3px rgba(11,20,26,.15); cursor: pointer; }
.chat-indietro span { font-size: 32px; line-height: 1; margin-top: -3px; }
.chat-indietro:active { background: #E7F8F3; }

/* I messaggi, sul fondo color carta. */
.chat-messaggi { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 6% 8px;
  background-color: var(--wa-sfondo);
  background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px);
  background-size: 18px 18px; }
.chat-vuota { margin: 30px auto; max-width: 320px; text-align: center; background: #FFEECD; color: #54656F;
  font-size: 13px; padding: 8px 12px; border-radius: 8px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.chat-giorno { text-align: center; margin: 10px 0 8px; position: sticky; top: 4px; z-index: 1; }
.chat-giorno span { display: inline-block; background: #fff; color: #54656F; font-size: 12.5px; padding: 5px 12px;
  border-radius: 8px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.chat-riga { display: flex; margin-bottom: 2px; }
.chat-riga + .chat-riga:not(.mia), .chat-giorno + .chat-riga { margin-top: 0; }
.chat-riga.mia { justify-content: flex-end; }
.chat-bolla { position: relative; max-width: min(75%, 560px); background: #fff; color: var(--wa-testo);
  border-radius: 8px; padding: 6px 8px 8px 9px; box-shadow: 0 1px .5px rgba(11,20,26,.13); margin-top: 4px; }
.chat-riga.mia .chat-bolla { background: var(--wa-mia); }
.chat-chi { font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.chat-testo { font-size: 14.5px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
/* L'ora galleggia in fondo a destra; lo spazio in coda al testo le fa posto. */
.chat-testo::after { content: ''; display: inline-block; width: 64px; }
.chat-riga.mia .chat-testo::after { width: 74px; }
.chat-ora { display: block; text-align: right; font-size: 11px; line-height: 15px; color: var(--wa-grigio); margin-top: 2px; white-space: nowrap; }
.chat-testo + .chat-ora { margin-top: -13px; }
.chat-bolla.solo-foto { padding: 3px; }
.chat-bolla.solo-foto .chat-ora { position: absolute; right: 10px; bottom: 8px; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.6); margin: 0; }
.chat-bolla.solo-foto .chat-ora .chat-spunta { color: #fff; }
.chat-foto { display: block; max-width: 100%; max-height: 340px; border-radius: 6px; margin-bottom: 2px; }
.chat-file { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--wa-testo);
  background: rgba(0,0,0,.05); border-radius: 6px; padding: 8px 10px; margin-bottom: 4px; min-width: 220px; }
.chat-file-icona { flex: none; width: 34px; height: 40px; border-radius: 4px; background: #E3564B; color: #fff;
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.chat-file-nome { display: flex; flex-direction: column; font-size: 14px; word-break: break-word; }
.chat-file-nome small { color: var(--wa-grigio); font-size: 12px; }
.chat-audio { display: flex; align-items: center; gap: 8px; min-width: 240px; margin-bottom: 2px; }
.chat-audio-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--wa-verde);
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.chat-audio audio { height: 36px; width: 100%; min-width: 180px; }

/* La barra in fondo: graffetta e fotocamera dentro la casella, tasto tondo a destra. */
.chat-barra { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 6px 10px 8px; background: #F0F2F5; }
.chat-campo { flex: 1; display: flex; align-items: flex-end; background: #fff; border-radius: 24px; padding: 2px 6px; min-height: 46px; }
.chat-campo textarea { flex: 1; border: none; outline: none; resize: none; background: transparent; font: inherit;
  font-size: 15.5px; line-height: 1.4; padding: 12px 6px; max-height: 150px; min-height: 44px; color: var(--wa-testo); }
.chat-tasto { flex: none; border: none; background: none; width: 40px; height: 42px; font-size: 21px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; margin: 0;
  filter: grayscale(1); opacity: .7; }
.chat-tasto:hover { opacity: 1; }
.chat-invia { flex: none; width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--wa-verde);
  color: #fff; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.chat-invia:hover { background: #008F72; }
.chat-invia.registra { background: #E53935; }
.chat-registra { flex: 1; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 24px;
  padding: 2px 14px 2px 6px; min-height: 46px; }
.chat-reg-punto { width: 10px; height: 10px; border-radius: 50%; background: #E53935; animation: chatBattito 1s infinite; }
.chat-reg-tempo { font-variant-numeric: tabular-nums; font-size: 16px; color: var(--wa-testo); min-width: 40px; }
.chat-reg-nota { font-size: 13px; color: var(--wa-grigio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes chatBattito { 50% { opacity: .2; } }
.chat-campo[hidden], .chat-registra[hidden], .chat-allega-menu[hidden] { display: none; }

/* Il menu degli allegati: si apre sopra la graffetta. */
.chat-allega-menu { position: absolute; left: 10px; bottom: 64px; z-index: 5; background: #fff; border-radius: 16px;
  box-shadow: 0 4px 18px rgba(11,20,26,.2); padding: 10px 6px; display: flex; flex-direction: column; min-width: 210px; }
.chat-allega-menu label, .chat-allega-menu button { display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  border: none; background: none; font: inherit; font-size: 15px; color: var(--wa-testo); text-transform: none;
  letter-spacing: 0; font-weight: 400; margin: 0; cursor: pointer; border-radius: 10px; text-align: left; }
.chat-allega-menu label:hover, .chat-allega-menu button:hover { background: #F5F6F6; }
.chat-allega-menu .ic { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }

/* Tablet in verticale: l'elenco si stringe per lasciare spazio alla conversazione. */
@media (max-width: 1000px) { .chat-due { grid-template-columns: 280px 1fr; } }
@media (max-width: 760px) {
  /* Sul telefono si vede una cosa per volta: l'elenco, oppure la conversazione. */
  main:has(.chat-due) { padding: 0; }
  .chat-due { grid-template-columns: 1fr; height: calc(100dvh - 150px); border: none; border-radius: 0; }
  .chat-due.aperta .chat-elenco { display: none; }
  .chat-due:not(.aperta) .chat-corpo { display: none; }
  .chat-elenco { border-right: none; }
  .chat-indietro { display: inline-flex; }
  .chat-testata { padding-left: 12px; }
  .chat-messaggi { padding: 10px 10px 6px; }
  .chat-bolla { max-width: 85%; }
}

/* La scheda di un appuntamento dentro un messaggio: si deve capire a colpo
   d'occhio di quale visita si sta parlando, senza aprire niente. */
.chat-appt { border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px;
  padding: 7px 9px; margin-bottom: 5px; background: var(--paper); }
.chat-appt.apribile { cursor: pointer; }
.chat-appt.apribile:hover { background: var(--bg); }
.chat-appt-testa { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chat-appt-chi { font-size: 14px; font-weight: 600; margin-top: 2px; }
.chat-appt-dove { font-size: 12px; color: var(--muted); }
.chat-appt-apri { font-size: 11.5px; color: var(--brand-dark); font-weight: 600; margin-top: 3px; }

/* Rete e capigruppo: la scelta fra quote a scalare e sommate. */
.rete-modo { display: flex; gap: 10px; align-items: flex-start; text-transform: none; letter-spacing: 0;
  font-weight: 400; font-size: 13.5px; cursor: pointer; padding: 6px 0; }
.rete-modo input { width: auto; margin-top: 3px; }

/* Messaggi eliminati e scelta con la pressione lunga. */
.chat-bolla.eliminato .chat-testo { font-style: italic; color: var(--wa-grigio, #667781); }
.chat-riga.scelta .chat-bolla { outline: 2px solid #00A884; }
.chat-riga[data-mio="1"] .chat-bolla { -webkit-touch-callout: none; }

/* Il pulsante verde per scrivere a qualcuno, in basso nell'elenco come in WhatsApp. */
.chat-elenco { display: flex; flex-direction: column; }
#ch-elenco { flex: none; }
.chat-fab { position: sticky; align-self: flex-end; bottom: 16px; margin: auto 16px 16px 0; flex: none; display: inline-flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 18px; border: none; border-radius: 16px; background: #00A884; color: #fff;
  font-size: 18px; font-weight: 600; box-shadow: 0 3px 10px rgba(11,20,26,.25); z-index: 2; }
.chat-fab span { font-size: 15px; }
.chat-fab:hover { background: #008F72; }
/* La rubrica della nuova chat. */
.rubrica { padding: 0 !important; }
.rubrica input[type=search] { width: calc(100% - 24px); margin: 4px 12px 8px; border: none; background: #F0F2F5;
  border-radius: 10px; padding: 10px 14px; font-size: 15px; }
.rubrica-elenco { max-height: 60vh; overflow-y: auto; }
.rubrica .chat-voce[hidden] { display: none; }
/* I colori della chat servono anche nei dialoghi (rubrica, appuntamenti). */
:root { --wa-verde: #00A884; --wa-mia: #D9FDD3; --wa-sfondo: #EFEAE2; --wa-testo: #111B21; --wa-grigio: #667781; }

/* Foto delle persone. */
img.chat-avatar { object-fit: cover; background: #DFE5E7; }
.foto-mini { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; vertical-align: middle;
  margin-right: 7px; align-items: center; justify-content: center; color: #fff; font-size: 10.5px; font-weight: 700; }
.foto-grande { display: inline-flex; flex: none; width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
  align-items: center; justify-content: center; color: #fff; font-size: 30px; font-weight: 600; background: #DFE5E7; }
.foto-riquadro { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; flex-wrap: wrap; }
.foto-azioni { display: flex; gap: 6px; flex-wrap: wrap; }

/* La foto dell'agente sugli appuntamenti del calendario. */
.cal-foto { float: right; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin: 0 0 2px 4px;
  border: 1.5px solid rgba(255,255,255,.9); display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: #fff; }
.cal-mfoto { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; vertical-align: -3px; margin-right: 3px;
  border: 1px solid rgba(255,255,255,.9); }
.meta .foto-mini { width: 20px; height: 20px; font-size: 9px; margin: 0 4px 0 0; vertical-align: -5px; }

/* Elenco appuntamenti: la giornata di tutti in una tabella. */
.elenco-filtri { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.elenco-filtri select { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 14px; background: #fff; }
.elenco-aggiornato { margin-left: auto; font-size: 12px; color: var(--confermato); }
.elenco-riquadri { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 14px; }
.elenco-riquadro { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font: inherit; }
.elenco-riquadro .n { font-size: 24px; font-weight: 800; line-height: 1.1; }
.elenco-riquadro .l { font-size: 11.5px; color: var(--muted); text-align: center; }
.elenco-riquadro.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.elenco-riquadro:disabled { opacity: .45; cursor: default; }
.elenco-tabella tbody tr { cursor: pointer; }
.elenco-tabella tbody tr:hover { background: #F7FAF9; }
.elenco-tabella td { vertical-align: top; }
.elenco-sotto { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.riga-allarme { background: #FFF6F5; }
@media (max-width: 900px) { .elenco-riquadri { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) {
  .elenco-riquadri { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .elenco-riquadro { padding: 6px 2px; }
  .elenco-riquadro .n { font-size: 18px; }
  .elenco-riquadro .l { font-size: 10px; line-height: 1.2; }
  .elenco-aggiornato { margin-left: 0; }
}
.elenco-tabella .chip::before { display: none; }

/* L'appuntamento che partirà col prossimo messaggio. */
.chat-in-sospeso { position: absolute; left: 10px; right: 10px; bottom: 100%; margin-bottom: 4px; display: flex;
  align-items: center; gap: 8px; background: #fff; border-left: 4px solid var(--wa-verde); border-radius: 8px;
  padding: 8px 10px; font-size: 13.5px; box-shadow: 0 1px 3px rgba(11,20,26,.15); }
.chat-in-sospeso span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-in-sospeso button { border: none; background: none; font-size: 16px; color: var(--wa-grigio); cursor: pointer; }

/* Rubrica clienti. */
.rubrica-cerca { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 15px; margin: 0 0 10px; }
.rubrica-clienti { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rubrica-lettera { background: #F0F2F5; color: var(--brand-dark); font-weight: 800; font-size: 13px; padding: 4px 14px; position: sticky; top: 0; }
.rubrica-voce { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #EEF1F0; }
.rubrica-voce .chat-avatar { width: 40px; height: 40px; font-size: 14px; }
.rubrica-testo { flex: 1; min-width: 0; cursor: pointer; }
.rubrica-testo b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rubrica-testo small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rubrica-tasto { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft); display: grid;
  place-items: center; text-decoration: none; font-size: 18px; }

/* Sopralluogo: le foto nella scheda del cliente. */
.sopralluogo { background: #F7FAF9; border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.sl-griglia { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.sl-foto { position: relative; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: #fff; cursor: pointer; aspect-ratio: 1; max-width: 100%; }
.sl-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-foto span { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: 11px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.65)); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Firma del cliente sul tablet. */
.firma-riquadro { background: #F7FAF9; border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 12px; }
.firma-img { display: block; max-width: 280px; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; }
.firma-tela { position: relative; height: 260px; background: #fff; border: 2px dashed #B9C6C2; border-radius: 12px; touch-action: none; }
.firma-tela canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.firma-guida { position: absolute; left: 24px; right: 24px; bottom: 44px; border-bottom: 1.5px solid #B9C6C2;
  color: #9AA8A4; font-size: 14px; pointer-events: none; padding-bottom: 4px; }
.firma-schermo .modal { max-height: 96vh; overflow: auto; }
@media (max-width: 520px) { .firma-tela { height: 200px; } }

/* Scadenze e rinnovi. */
.scadenza { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #EEF1F0; }
.scadenza-data { flex: none; width: 64px; text-align: center; }
.scadenza-data b { display: block; font-size: 15px; }
.scadenza-data small { display: block; font-size: 11px; color: var(--muted); }
.scadenza-testo { flex: 1; min-width: 0; cursor: pointer; }
.scadenza-testo b { display: block; font-size: 15px; }
.scadenza-testo small { display: block; font-size: 12.5px; color: var(--muted); }

/* Scambio col gestionale. */
.gs-card { max-width: none; margin-bottom: 14px; }
.gs-nota { color: var(--muted); font-size: 13px; margin: 6px 0 10px; line-height: 1.5; }
.gs-riga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.gs-conto { font-size: 14.5px; margin-right: auto; }
.gs-tabella { box-shadow: none; border: 1px solid var(--line); overflow: auto; }
.gs-alta { max-height: 360px; }
.gs-file { font-size: 11.5px; color: var(--muted); }
.gs-sep { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
.gs-rosso { color: #B42318; }
.gs-errori ul { margin: 6px 0 0; padding-left: 18px; }

/* Abbonamento: la fascia in alto e i piani. */
.fascia { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #FFF7E6; border-bottom: 1px solid #F0D9A8; color: #7A5300;
  padding: 8px 16px; font-size: 13.5px; }
.fascia-stop { background: #FDECEA; border-bottom-color: #F3C2BC; color: #8A2A1E; }
.fascia .btn { margin-left: auto; background: #fff; border: 1px solid currentColor; color: inherit; }
.fascia-nota { margin-left: auto; opacity: .8; }
.ab-stato { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; font-size: 14.5px; }
.ab-piani { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ab-piano { border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.ab-scelto { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.ab-nome { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.ab-prezzo { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.ab-prezzo small { font-size: 14px; font-weight: 600; color: var(--muted); }
.ab-anno { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.ab-cosa { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.ab-piano .btn { margin-right: 6px; }
.ab-codice { font-size: 20px; font-weight: 800; letter-spacing: .12em;
  background: var(--brand-soft); color: var(--brand-dark); padding: 8px 14px; border-radius: 10px; }
@media (max-width: 560px) { .ab-piani { grid-template-columns: 1fr; } }

/* Nuovi prospect. */
.pr-tabella tbody tr { cursor: pointer; }
.pr-quando { white-space: nowrap; color: var(--muted); }
.pr-chi { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pr-foto { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; color: #fff; font-size: 11px; font-weight: 700; object-fit: cover; }

/* Privacy del cliente. */
.inf-testo { width: 100%; min-height: 320px; font: 13.5px/1.55 inherit; border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; resize: vertical; }
.pv-bottoni { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pv-bottoni .btn { width: 100%; }

/* Anagrafica: la spunta della partenza dei giri. */
.an-spunta { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 4px 0 0; cursor: pointer; }
.an-spunta input { width: 18px; height: 18px; margin-top: 2px; flex: none; }