/* marcorepole.com — pannello: palette sul blu, registro utilitario */
:root {
  --lana: #0F1B2D;          /* blu notte: sidebar, testi */
  --carta: #F5F8FC;         /* fondo pagina */
  --pietra: #D9E2EE;        /* bordi, separatori */
  --persiana: #1E5AA8;      /* blu primario: pulsanti, voci attive */
  --persiana-scuro: #154480;
  --lampione: #4FA8F0;      /* azzurro d'accento: badge, corsivo del marchio */
  --grigio: #5B6777;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --serif: "Piazzolla", Georgia, serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--display); font-size: 15px; color: var(--lana); background: var(--carta); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--persiana); outline-offset: 1px; }

/* ---- layout ---- */
.admin { display: grid; grid-template-columns: 210px 1fr; min-height: 100vh; }
/* min-width 0: da item di griglia non deve allargare la colonna 1fr fino al
   min-content del contenuto (le tab della scheda squadra sfonderebbero) */
.admin-main { padding: 2rem 2.4rem 4rem; max-width: 1200px; min-width: 0; }

.sidebar { background: var(--lana); color: #C3CFDD; padding: 1.4rem 1.2rem; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.side-brand { font-weight: 800; font-size: 1.35rem; color: #fff; margin: 0; }
.side-brand em { font-style: normal; font-weight: 800; font-size: 0.72em; color: var(--lampione); letter-spacing: -0.01em; }
.side-sub { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0.1rem 0 1.6rem; color: #7F8FA3; }
.sidebar nav { display: flex; flex-direction: column; gap: 0.15rem; }
.sidebar nav a { color: #C3CFDD; text-decoration: none; padding: 0.45rem 0.6rem; border-radius: 4px; }
.sidebar nav a:hover { background: #1A2A44; color: #fff; }
.sidebar nav a.on { background: var(--persiana); color: #fff; }
/* macro-voci a fisarmonica */
.nav-gruppo-t { display: flex; align-items: center; gap: 0.35rem; width: 100%; background: none; border: none; color: #C3CFDD; font-family: inherit; font-size: inherit; text-align: left; padding: 0.45rem 0.6rem; border-radius: 4px; cursor: pointer; }
.nav-gruppo-t:hover { background: #1A2A44; color: #fff; }
.nav-gruppo-t svg { width: 16px; height: 16px; margin-left: auto; flex: 0 0 auto; transition: transform 0.18s; }
/* gruppo aperto: blocco su fondo più chiaro, così si vede dov'è la sezione */
.nav-gruppo.aperto { background: #1C2E4A; border-radius: 6px; }
.nav-gruppo.aperto .nav-gruppo-t { color: #fff; }
.nav-gruppo.aperto .nav-gruppo-t:hover { background: #25395A; }
.nav-gruppo.aperto .nav-gruppo-t svg { transform: rotate(180deg); }
.nav-gruppo.aperto .nav-gruppo-v a:hover { background: #25395A; }
.nav-gruppo-v { display: none; flex-direction: column; gap: 0.15rem; padding: 0.1rem 0.25rem 0.35rem; }
.nav-gruppo.aperto .nav-gruppo-v { display: flex; }
.nav-gruppo-v a { padding-left: 1.35rem; font-size: 0.93rem; }
.nav-conta-gruppo { margin-left: 0.1rem; }
.nav-gruppo.aperto .nav-conta-gruppo { display: none; }
.menu-toggle { display: none; background: none; border: none; color: #fff; padding: 0.3rem; line-height: 0; cursor: pointer; }
.menu-toggle svg { width: 26px; height: 26px; }
/* «Esci» in fondo al menu: ben visibile, staccato da un separatore leggero */
.side-logout { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid rgba(255,255,255,0.14); }
.side-logout button { width: 100%; background: rgba(255,255,255,0.07); border: 1px solid #3A4F6E; color: #E3EAF3; padding: 0.6rem 0.8rem; border-radius: 6px; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 0.95rem; }
.side-logout button:hover { color: #fff; border-color: #7F8FA3; background: rgba(255,255,255,0.12); }

/* ---- intestazioni ---- */
.page-head { display: flex; align-items: baseline; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.page-head h1 { font-weight: 800; font-size: 1.7rem; margin: 0; }
.page-head .tab-titolo { font-weight: 800; font-size: 1.25rem; margin: 0; }
.page-sub { color: var(--grigio); margin: 0; }
.page-stats { display: flex; gap: 1rem; color: var(--grigio); font-size: 0.9rem; }
.stat-alert { color: var(--persiana-scuro); font-weight: 600; }
.section-head { font-weight: 800; font-size: 1.1rem; margin: 2.4rem 0 0.8rem; padding-bottom: 0.3rem; border-bottom: 2px solid var(--lana); }

/* ---- tabelle ---- */
.list { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--pietra); }
.list th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grigio); padding: 0.6rem 0.8rem; border-bottom: 2px solid var(--pietra); }
.list td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--pietra); vertical-align: middle; }
.row-title { font-weight: 600; text-decoration: none; color: var(--lana); }
.row-title:hover { color: var(--persiana-scuro); }
.row-dim { opacity: 0.55; }
.mono { font-family: ui-monospace, monospace; font-size: 0.82rem; }
.linklike { background: none; border: none; color: var(--persiana-scuro); cursor: pointer; padding: 0; font-family: inherit; font-size: inherit; text-decoration: underline; }


/* ---- barra a tab, etichette ---- */
.tabbar { display: flex; gap: 0.3rem; border-bottom: 2px solid var(--pietra, #E8E5DD); margin-bottom: 1.3rem; }
.tabbar a { padding: 0.5rem 1.1rem; text-decoration: none; color: var(--grigio, #5C5F58); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabbar a.on { color: var(--persiana-scuro, #24462F); border-bottom-color: var(--persiana, #33604A); }
.tag-pub { background: #DCE9F8; color: var(--persiana-scuro); }
.tag-draft { background: var(--pietra); color: var(--grigio); }
.tag-feat { background: #f7e8c6; color: #8a6413; }


/* ---- form ---- */
label { display: block; font-weight: 600; font-size: 0.85rem; margin: 1rem 0 0.3rem; }
.hint { font-weight: 400; color: var(--grigio); }
input[type="text"], input[type="password"], input:not([type]), select, textarea {
  width: 100%; padding: 0.55rem 0.7rem; border: 1px solid #B9C6D6; border-radius: 4px;
  font-family: inherit; font-size: 0.95rem; background: #fff; color: var(--lana);
}
textarea#f-body { font-family: ui-monospace, monospace; font-size: 0.88rem; line-height: 1.55; }
.field-row { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; }
.field-row > div { flex: 1; min-width: 140px; }
.check { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; margin-bottom: 0.6rem; }

.btn { display: inline-block; background: var(--persiana); color: #fff; border: none; padding: 0.55rem 1.2rem; border-radius: 4px; font-family: inherit; font-weight: 600; font-size: 0.92rem; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--persiana-scuro); }
.btn-ghost { background: transparent; color: var(--persiana-scuro); border: 1px solid var(--persiana); }
.btn-ghost:hover { background: #E8F0FA; }
.btn-danger { background: transparent; color: #a33; border: 1px solid #c88; }
.btn-danger:hover { background: #fbeeee; }
.btn:disabled { opacity: 0.5; cursor: wait; }


/* ---- riquadri ---- */
.source-add { background: #fff; border: 1px solid var(--pietra); border-radius: 8px; padding: 1.2rem 1.4rem 1.4rem; margin-bottom: 1.2rem; }
.source-add h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.source-add > .btn { margin-top: 1rem; }
.stato-riga { font-size: 1.05rem; font-weight: 600; margin: 0.3rem 0 0.6rem; }
.qr-box img { border: 1px solid var(--pietra); background: #fff; padding: 10px; max-width: 100%; height: auto; }
.dest-lista { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.dest-lista li { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border: 1px solid var(--pietra); border-radius: 6px; background: #fff; }
.dest-lista li.fuori { opacity: 0.55; }
.dest-lista .dest-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dest-lista .dest-meta { color: var(--grigio); font-size: 0.8rem; }
.rub-toast-fisso { position: fixed; }

/* ---- login ---- */
.login-body { display: grid; place-items: center; min-height: 100vh; margin: 0; background: var(--lana); font-family: var(--display); }
.login-card { background: var(--carta); padding: 2.2rem 2.4rem 2.4rem; border-radius: 6px; border-top: 6px solid var(--persiana); width: min(360px, 90vw); }
.login-card .side-brand { color: var(--lana); font-size: 1.6rem; }
.login-card .side-sub { color: var(--grigio); }
.login-invia { background: var(--persiana); color: #fff; border: none; padding: 0.7rem; border-radius: 4px; font-family: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer; text-decoration: none; }
.login-invia:hover { background: var(--persiana-scuro); }
.login-card label { margin-top: 0.9rem; }
.login-card .login-invia { width: 100%; margin-top: 1.2rem; }
.login-card-larga { width: min(460px, 92vw); }
.login-nota { color: var(--grigio); font-size: 0.82rem; margin: 1rem 0 0; line-height: 1.45; }
.login-nota a { color: var(--persiana); }
.login-testo { font-size: 0.92rem; line-height: 1.5; margin: 0 0 0.6rem; }
.login-passi { font-size: 0.9rem; line-height: 1.5; padding-left: 1.2rem; margin: 0 0 0.8rem; }
.login-qr { text-align: center; }
.login-qr img { border: 1px solid var(--pietra); background: #fff; padding: 8px; border-radius: 6px; max-width: 100%; height: auto; }
.login-manuale { font-size: 0.85rem; color: var(--grigio); margin: 0.6rem 0 0; }
.login-manuale summary { cursor: pointer; }
.login-manuale code { display: block; margin-top: 0.4rem; font-size: 0.95rem; letter-spacing: 0.06em; user-select: all; color: var(--lana); }
.login-codice { font-size: 1.4rem !important; letter-spacing: 0.25em; text-align: center; font-family: ui-monospace, monospace; }
.login-codici-lista { list-style: none; padding: 0; margin: 0.4rem 0 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.login-codici-lista code { display: block; background: #fff; border: 1px solid var(--pietra); border-radius: 4px; padding: 0.45rem 0.6rem; text-align: center; font-size: 1rem; letter-spacing: 0.08em; user-select: all; }
.pw-wrap { display: flex; gap: 0.4rem; align-items: stretch; }
.pw-wrap input { flex: 1; min-width: 0; }
.pw-eye { flex: 0 0 auto; width: 2.7rem; background: #fff; border: 1px solid #B9C6D6; border-radius: 4px; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0; color: var(--lana); }
.pw-eye:hover { background: #E8F0FA; }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; margin-top: 0.8rem; }
.acc-grid form { border: 1px solid var(--pietra); border-radius: 8px; padding: 0.2rem 1rem 1rem; background: #fff; }
.acc-grid h4 { margin: 0.8rem 0 0; font-size: 0.98rem; }
.acc-grid .btn { margin-top: 1rem; width: 100%; }
.login-error { background: #fbeeee; color: #a33; padding: 0.5rem 0.8rem; border-radius: 4px; font-size: 0.88rem; }

@media (max-width: 900px) {
  .admin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  /* clip e non hidden: hidden farebbe da «scroll container» e romperebbe la
     testata sticky della scheda squadra (e si lascia trascinare via JS) */
  .admin-main { padding: 1.2rem 1rem 3rem; overflow-x: clip; }

  /* sidebar → barra compatta col solo marchio + hamburger; il menu si apre
     a tutto schermo (come il navmodal del sito pubblico) */
  .sidebar { position: sticky; top: 0; z-index: 900; height: auto; padding: 0.7rem 1rem; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; }
  .side-brand { font-size: 1.15rem; }
  .side-sub { display: none; }
  .sidebar nav, .side-logout { display: none; }
  .menu-toggle { display: inline-flex; }
  .menu-toggle .ic-x { display: none; }

  body.menu-aperto { overflow: hidden; }
  body.menu-aperto .menu-toggle .ic-menu { display: none; }
  body.menu-aperto .menu-toggle .ic-x { display: block; }
  body.menu-aperto .sidebar { position: fixed; inset: 0; z-index: 1000; grid-template-rows: auto 1fr auto; overflow: hidden; }
  body.menu-aperto .sidebar nav {
    display: flex; flex-direction: column; gap: 0;
    grid-column: 1 / -1; align-self: stretch; overflow-y: auto; -webkit-overflow-scrolling: touch;
    margin: 0.6rem -1rem 0; padding: 0 1rem 0.8rem;
  }
  body.menu-aperto .sidebar nav a { font-weight: 600; font-size: 1.05rem; padding: 0.85rem 0.6rem; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.09); }
  body.menu-aperto .sidebar nav a.on { background: none; color: var(--lampione); }
  body.menu-aperto .nav-gruppo-t { font-weight: 700; font-size: 1.05rem; padding: 0.85rem 0.6rem; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.09); }
  body.menu-aperto .nav-gruppo-t svg { width: 20px; height: 20px; }
  body.menu-aperto .nav-gruppo.aperto { border-radius: 0; margin: 0 -1rem; padding: 0 1rem; }
  body.menu-aperto .nav-gruppo-v { padding: 0; }
  body.menu-aperto .nav-gruppo-v a { padding-left: 1.6rem; font-size: 1rem; font-weight: 500; }
  body.menu-aperto .side-logout { display: block; grid-column: 1 / -1; margin: 0; padding: 0.9rem 0; }

}
}

@media (max-width: 640px) {
  /* niente zoom automatico su iPhone: gli input devono stare ad almeno 16px */
  input[type="text"], input[type="password"], input:not([type]), select, textarea { font-size: 16px; }

  /* tocchi comodi */
  .btn { padding: 0.7rem 1.2rem; }
  .page-head { gap: 0.4rem 1rem; margin-bottom: 1rem; }
  /* il pulsante che chiude un modulo si prende tutta la riga: comodo col pollice */
  .source-add > .btn { width: 100%; }

  /* tabelle → schede impilate */
  .list, .list tbody, .list tr, .list td { display: block; }
  .list thead { display: none; }
  .list tr { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--pietra); }
  .list td { padding: 0.1rem 0; border-bottom: none; }
  .list td:empty { display: none; }
  .list .c-title { font-weight: 600; margin-bottom: 0.2rem; }
  .list .c-meta { display: inline-block; margin-right: 0.9rem; color: var(--grigio); font-size: 0.85rem; }
  .list .c-url { overflow-wrap: anywhere; font-size: 0.78rem; color: var(--grigio); }
  .source-add { padding: 0.9rem 1rem 1.2rem; }
}

/* ---- rubrica e chat WhatsApp ---- */
/* pagina a schermo pieno: niente testata, il riquadro riempie tutto fino alla sidebar */
.admin-pieno { padding: 0; max-width: none; height: 100vh; height: 100dvh; display: flex; flex-direction: column; position: relative; }
.rub-wrap { display: grid; grid-template-columns: 330px 1fr; gap: 0; background: #fff; flex: 1; min-height: 0; overflow: hidden; }
.rub-toast { position: absolute; top: 0.7rem; left: 50%; transform: translateX(-50%); z-index: 20; margin: 0; padding: 0.5rem 1rem; border-radius: 999px; font-weight: 600; font-size: 0.88rem; box-shadow: 0 4px 16px rgba(0,0,0,0.15); transition: opacity 0.4s; }
.rub-toast.ok { background: var(--persiana); color: #fff; }
.rub-toast.errore { background: #fbeeee; color: #a33; border: 1px solid #e0b4b4; }
.rub-toast.via { opacity: 0; pointer-events: none; }
.rub-ponte-giu { margin: 0; padding: 0.5rem 0.8rem; background: #fbeeee; color: #a33; font-size: 0.85rem; font-weight: 600; border-bottom: 1px solid #e0b4b4; }
.rub-lista { border-right: 1px solid var(--pietra); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.rub-vista { overflow-y: auto; flex: 1; min-height: 0; }
.rub-tabs { display: flex; border-bottom: 1px solid var(--pietra); }
.rub-tabs button { flex: 1; background: none; border: none; border-bottom: 3px solid transparent; padding: 0.7rem 0.5rem; font-family: inherit; font-weight: 700; font-size: 0.95rem; color: var(--grigio); cursor: pointer; }
.rub-tabs button.on { color: var(--persiana-scuro); border-bottom-color: var(--persiana); }
.rub-conta { font-weight: 400; color: #7F8FA3; }
.rub-badge { display: inline-block; min-width: 1.3em; padding: 0.05em 0.4em; border-radius: 999px; background: var(--lampione); color: var(--lana); font-size: 0.72rem; font-weight: 800; text-align: center; vertical-align: 0.15em; }
.rub-badge[hidden] { display: none; }
.rub-cerca { display: flex; gap: 0.4rem; padding: 0.7rem 0.7rem 0; }
.rub-cerca input { flex: 1; min-width: 0; padding: 0.5rem 0.6rem; border: 1px solid var(--pietra); border-radius: 4px; font-family: inherit; }
.rub-cerca .btn { padding: 0.45rem 0.8rem; }
.rub-azioni { display: flex; gap: 0.4rem; flex-wrap: wrap; padding: 0.7rem; }
.rub-azioni .btn { padding: 0.45rem 0.8rem; font-size: 0.85rem; }
.rub-form { margin: 0 0.7rem 0.7rem; padding: 0.8rem 1rem 1rem; }
.rub-form[hidden] { display: none; }
.rub-form label { display: block; margin-top: 0.6rem; font-size: 0.85rem; font-weight: 600; }
.rub-form input, .rub-form textarea { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--pietra); border-radius: 4px; font-family: inherit; margin-top: 0.2rem; }
.rub-form-azioni { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.rub-form-azioni .btn { margin-top: 0; }
.rub-elimina { padding: 0 0.7rem 0.7rem; }
.rub-contatti, .rub-chat-lista { list-style: none; margin: 0; padding: 0; }
.rub-contatto { display: flex; align-items: center; border-bottom: 1px solid #E6EDF5; }
.rub-contatto.on { background: #E8F0FA; }
.rub-contatto.nuovo strong { color: var(--persiana-scuro); }
.rub-contatto-apri { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.8rem; color: inherit; text-decoration: none; }
.rub-contatto-apri:hover { background: #F0F4FA; }
.rub-contatto-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rub-contatto-testo strong { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rub-contatto-testo strong em { font-style: normal; font-weight: 400; color: var(--grigio); font-size: 0.82rem; }
.rub-contatto-testo small { color: var(--grigio); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rub-contatto-dx { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
.rub-contatto-dx time { font-size: 0.72rem; color: #7F8FA3; }
.rub-mod { padding: 0.6rem 0.8rem; color: var(--grigio); text-decoration: none; font-size: 1rem; }
.rub-mod:hover { color: var(--persiana-scuro); }
.rub-avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--persiana); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; }
.rub-vuoto { padding: 1.2rem 0.9rem; color: var(--grigio); font-size: 0.9rem; margin: 0; }

.rub-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #EEF3F9; }
.rub-chat-testata { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.9rem; background: #fff; border-bottom: 1px solid var(--pietra); }
.rub-chat-chi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rub-chat-chi strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rub-chat-chi small { color: var(--grigio); font-size: 0.8rem; }
.rub-chat-strumenti { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.btn-mini { padding: 0.35rem 0.6rem; font-size: 0.8rem; }
.rub-indietro { display: none; color: var(--persiana-scuro); text-decoration: none; font-size: 1.4rem; line-height: 1; padding: 0.2rem 0.3rem; }
.rub-aggiungi { display: flex; gap: 0.4rem; flex-wrap: wrap; padding: 0.6rem 0.9rem; background: #EAF3FD; border-bottom: 1px solid #BFD4EE; }
.rub-aggiungi[hidden] { display: none; }
.rub-aggiungi input { flex: 1; min-width: 120px; padding: 0.45rem 0.6rem; border: 1px solid var(--pietra); border-radius: 4px; font-family: inherit; }
.rub-messaggi { flex: 1; min-height: 0; overflow-y: auto; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.rub-giorno { text-align: center; margin: 0.6rem 0 0.3rem; }
.rub-giorno span { display: inline-block; background: var(--pietra); color: var(--grigio); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.15rem 0.6rem; border-radius: 999px; }
.rub-msg { max-width: min(78%, 560px); padding: 0.5rem 0.75rem 0.35rem; border-radius: 12px; background: #fff; border: 1px solid var(--pietra); align-self: flex-start; font-family: var(--serif); font-size: 0.98rem; line-height: 1.4; word-wrap: break-word; overflow-wrap: anywhere; }
.rub-msg.out { align-self: flex-end; background: #DCE9F8; border-color: #BFD4EE; }
.rub-msg p { margin: 0; white-space: pre-wrap; }
.rub-msg img, .rub-msg video { display: block; max-width: 100%; max-height: 360px; border-radius: 8px; margin: 0.1rem 0 0.4rem; }
.rub-msg audio { display: block; max-width: 100%; margin: 0.1rem 0 0.4rem; }
.rub-msg time { display: block; text-align: right; font-family: var(--display); font-size: 0.68rem; color: #7F8FA3; margin-top: 0.2rem; }
.rub-ack { margin-left: 0.3rem; letter-spacing: -0.15em; color: #7F8FA3; }
.rub-ack.letto { color: #34b7f1; }
.rub-ack.err { color: #a33; font-weight: 800; letter-spacing: 0; }
.rub-reaz { display: inline-flex; gap: 0.15rem; margin: -0.55rem 0 0.1rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: #fff; border: 1px solid var(--pietra); font-size: 0.85rem; box-shadow: 0 1px 2px rgba(0,0,0,0.08); position: relative; z-index: 1; }
.rub-reaz.out { align-self: flex-end; margin-right: 0.6rem; }
.rub-reaz.in { align-self: flex-start; margin-left: 0.6rem; }
.rub-reaz[hidden] { display: none; }
.rub-msg .rub-doc { display: inline-block; font-family: var(--display); font-weight: 600; color: var(--persiana-scuro); }
.rub-msg .rub-tipo { color: var(--grigio); font-family: var(--display); font-size: 0.88rem; }
.rub-scrivi { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.6rem 0.9rem; background: #fff; border-top: 1px solid var(--pietra); }
.rub-scrivi textarea { flex: 1; min-width: 0; resize: none; padding: 0.55rem 0.7rem; border: 1px solid var(--pietra); border-radius: 18px; font-family: inherit; font-size: 0.95rem; line-height: 1.35; max-height: 160px; }
.rub-scrivi .btn { padding: 0.55rem 1rem; }
.rub-allega { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--pietra); cursor: pointer; font-size: 1.15rem; flex: 0 0 auto; }
.rub-allega:hover { background: #E8F0FA; }
.rub-allega input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.rub-file-nome { margin: 0; padding: 0.2rem 0.9rem 0.5rem; background: #fff; font-size: 0.8rem; color: var(--persiana-scuro); }
.rub-errore { margin: 0 0.9rem 0.6rem; }
.rub-errore[hidden], .rub-file-nome[hidden] { display: none; }
.rub-placeholder { margin: auto; max-width: 380px; text-align: center; padding: 2rem; }

@media (max-width: 900px) {
  body.admin:has(.admin-pieno) { height: 100vh; height: 100dvh; min-height: 0; }
  .admin-pieno { height: auto; min-height: 0; }
  .rub-wrap { grid-template-columns: 1fr; }
  .rub-lista { border-right: none; }
  .rub-chat { display: none; }
  .rub-chat-aperta .rub-lista { display: none; }
  .rub-chat-aperta .rub-chat { display: flex; }
  .rub-indietro { display: inline-block; }
  .rub-chat-testata { padding: 0.5rem 0.6rem; }
  .rub-chat-strumenti .btn-mini { padding: 0.35rem 0.5rem; }
  .rub-msg { max-width: 88%; }
  .rub-messaggi { padding: 0.7rem 0.6rem; }
}

/* ---- posta ---- */
.mail-wrap { grid-template-columns: 380px 1fr; }
.mail-testa { display: flex; gap: 0.5rem; align-items: center; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--pietra); }
.mail-casella { flex: 1; min-width: 0; padding: 0.45rem 0.5rem; border: 1px solid var(--pietra); border-radius: 4px; font-family: inherit; font-size: 0.9rem; background: #fff; }
.mail-azioni { display: flex; gap: 0.6rem; align-items: center; padding: 0.4rem 0.7rem 0.5rem; }
.rub-tabs a { flex: 1; text-align: center; text-decoration: none; border-bottom: 3px solid transparent; padding: 0.7rem 0.5rem; font-weight: 700; font-size: 0.95rem; color: var(--grigio); }
.rub-tabs a.on { color: var(--persiana-scuro); border-bottom-color: var(--persiana); }
.mail-oggetto { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rub-contatto.nuovo .mail-oggetto { font-weight: 700; color: var(--lana); }
.mail-oggetto .tag { font-size: 0.6rem; vertical-align: 0.1em; }
.mail-lettura { background: #fff; }
.mail-msg-testa { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--pietra); background: #fff; }
.mail-msg-chi { flex: 1; min-width: 0; }
.mail-msg-chi h2 { margin: 0 0 0.25rem; font-size: 1.15rem; overflow-wrap: anywhere; }
.mail-msg-chi p { margin: 0.1rem 0; font-size: 0.88rem; overflow-wrap: anywhere; }
.mail-allegati { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.6rem 1.1rem; background: var(--carta); border-bottom: 1px solid var(--pietra); }
.mail-allegato { display: inline-block; padding: 0.3rem 0.7rem; border: 1px solid var(--pietra); border-radius: 999px; background: #fff; font-size: 0.85rem; color: var(--persiana-scuro); text-decoration: none; }
.mail-allegato:hover { background: #E8F0FA; }
.mail-corpo { flex: 1; min-height: 0; width: 100%; border: none; background: #fff; }
@media (max-width: 900px) {
  .mail-wrap { grid-template-columns: 1fr; }
  .mail-msg-testa { flex-wrap: wrap; }
  .rub-chat-aperta .mail-lettura { display: flex; }
}

/* ---- chiedi all'archivio ---- */
.rag-risposta { margin-top: 1.2rem; padding: 1rem 1.2rem; background: var(--carta); border: 1px solid var(--pietra); border-radius: 8px; font-family: var(--serif); font-size: 1rem; line-height: 1.5; }
.rag-risposta[hidden] { display: none; }
.rag-risposta p, .rag-md p { margin: 0 0 0.6rem; }
.rag-risposta h4, .rag-md h4 { margin: 0.8rem 0 0.3rem; font-family: var(--display); }
.rag-risposta ul, .rag-md ul, .rag-risposta ol, .rag-md ol { margin: 0 0 0.6rem; padding-left: 1.3rem; }
.rag-risposta a { color: var(--persiana); }
.rag-storico { border-top: 1px solid var(--pietra); padding: 0.6rem 0; }
.rag-storico summary { cursor: pointer; }
.rag-md { margin-top: 0.5rem; font-family: var(--serif); line-height: 1.5; }

/* ============ chat stile WhatsApp Web ============ */
.wa { --wa-verde: #00a884; --wa-verde-scuro: #008069; --wa-testa: #f0f2f5; --wa-sfondo: #efeae2; --wa-out: #d9fdd3; --wa-in: #fff;
      --wa-testo: #111b21; --wa-grigio: #667781; --wa-bordo: #e9edef; --wa-ico: #54656f; --wa-blu: #53bdeb;
      display: grid; grid-template-columns: minmax(300px, 30%) 1fr; flex: 1; min-height: 0; overflow: hidden; background: #fff;
      font-family: "Segoe UI", -apple-system, system-ui, Helvetica, Arial, sans-serif; color: var(--wa-testo); font-size: 14.2px; }
.wa svg { width: 24px; height: 24px; fill: currentColor; }
.wa-sx { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--wa-bordo); background: #fff; }
.wa-dx { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--wa-sfondo); }
.wa-testa { display: flex; align-items: center; gap: 12px; height: 59px; padding: 10px 16px; background: var(--wa-testa); flex: 0 0 auto; }
.wa-icone { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.wa-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 50%; background: none; color: var(--wa-ico); cursor: pointer; text-decoration: none; font-size: 1.15rem; font-family: inherit; padding: 0; }
.wa-ico:hover { background: rgba(11,20,26,0.08); }
.wa-ico-testo { width: auto; padding: 0 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; color: var(--wa-verde-scuro); }
.wa-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: #dfe5e7; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.05rem; text-shadow: 0 1px 1px rgba(0,0,0,0.15); }
.wa-riga .wa-avatar { width: 49px; height: 49px; flex-basis: 49px; background: #6b7c85; }
.wa-avatar-me { background: var(--wa-verde-scuro); }
.wa-avviso { margin: 0; padding: 8px 16px; background: #fdecec; color: #a33; font-size: 0.85rem; font-weight: 600; }
.wa-avviso a { color: inherit; }
.wa-cerca { position: relative; margin: 8px 12px 0; }
.wa-cerca svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--wa-ico); pointer-events: none; }
.wa-cerca input { width: 100%; height: 35px; padding: 0 12px 0 44px; border: none; border-radius: 8px; background: var(--wa-testa); font-family: inherit; font-size: 14px; color: var(--wa-testo); }
.wa-cerca input:focus { outline: none; box-shadow: 0 0 0 2px rgba(0,168,132,0.35); }
.wa-filtri { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--wa-bordo); }
.wa-filtri button { border: 1px solid transparent; background: var(--wa-testa); color: var(--wa-grigio); border-radius: 999px; padding: 4px 12px; font-family: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.wa-filtri button.on { background: #e7fce3; color: var(--wa-verde-scuro); border-color: #cdebcf; }
.wa-filtri small { color: inherit; opacity: 0.8; }
.wa-badge { display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--wa-verde); color: #fff; font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; }
.wa-badge[hidden] { display: none; }
.wa-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.wa-scroll[hidden] { display: none; }
.wa-lista { list-style: none; margin: 0; padding: 0; }
.wa-riga { display: flex; align-items: center; }
.wa-riga[hidden] { display: none; }
.wa-riga:hover { background: #f5f6f6; }
.wa-riga.on { background: var(--wa-testa); }
.wa-riga-apri { flex: 1; min-width: 0; display: flex; align-items: center; gap: 15px; padding: 0 0 0 13px; color: inherit; text-decoration: none; height: 72px; }
.wa-riga-testo { flex: 1; min-width: 0; height: 72px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-right: 15px; border-bottom: 1px solid #f0f2f5; }
.wa-riga-1, .wa-riga-2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wa-riga-1 strong { flex: 1; min-width: 0; font-size: 16px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-riga-1 time { flex: 0 0 auto; font-size: 12px; color: var(--wa-grigio); }
.wa-riga-2 small { flex: 1; min-width: 0; font-size: 14px; color: var(--wa-grigio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-riga.nuovo .wa-riga-1 time { color: var(--wa-verde); font-weight: 600; }
.wa-riga.nuovo .wa-riga-2 small { color: var(--wa-testo); font-weight: 500; }
.wa-riga-mod { padding: 0 14px; color: var(--wa-ico); text-decoration: none; }
.wa-vuoto { padding: 20px 16px; color: var(--wa-grigio); font-size: 0.9rem; margin: 0; }
.wa-azioni { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--wa-bordo); }
.wa-form { margin: 10px 12px; padding: 10px 14px 14px; background: var(--wa-testa); border-radius: 8px; }
.wa-form[hidden] { display: none; }
.wa-form h3 { margin: 0 0 4px; font-size: 1rem; }
.wa-form label { display: block; margin-top: 8px; font-size: 0.82rem; font-weight: 600; }
.wa-form input, .wa-form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--wa-bordo); border-radius: 6px; font-family: inherit; font-size: 14px; margin-top: 3px; background: #fff; }
.wa-form-azioni { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* testata della chat aperta */
.wa-dx-testa { border-left: 1px solid var(--wa-bordo); }
.wa-chi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-chi strong { font-weight: 400; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-chi small { font-size: 13px; color: var(--wa-grigio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-indietro { display: none; }
.wa-aggiungi { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 16px; background: #fff8e6; border-bottom: 1px solid #f2dca6; }
.wa-aggiungi[hidden] { display: none; }
.wa-aggiungi input { flex: 1; min-width: 120px; padding: 7px 10px; border: 1px solid var(--wa-bordo); border-radius: 6px; font-family: inherit; }

/* area messaggi: sfondo a motivo sui toni beige di WhatsApp */
.wa-messaggi { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 6% 8px; display: flex; flex-direction: column; gap: 2px;
  background-color: var(--wa-sfondo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23d6cfc4' stroke-width='1.2' opacity='.4'%3E%3Ccircle cx='24' cy='28' r='7'/%3E%3Cpath d='M60 18l6 6-6 6-6-6z'/%3E%3Cpath d='M100 30c6-8 14-8 20 0-6 8-14 8-20 0z'/%3E%3Cpath d='M136 14v14M129 21h14'/%3E%3Cpath d='M18 76c0-6 4-10 10-10s10 4 10 10-10 14-10 14-10-8-10-14z'/%3E%3Crect x='58' y='66' width='14' height='14' rx='3'/%3E%3Cpath d='M96 72l8-8 8 8-8 8z'/%3E%3Ccircle cx='140' cy='76' r='9'/%3E%3Cpath d='M22 122c8-8 16 0 24-8'/%3E%3Cpath d='M64 116l10 14M74 116l-10 14'/%3E%3Ccircle cx='110' cy='124' r='5'/%3E%3Cpath d='M134 118c4 0 8 4 8 8s-4 8-8 8-8-4-8-8 4-8 8-8z'/%3E%3C/g%3E%3C/svg%3E"); }
.wa-giorno { align-self: center; margin: 10px 0 6px; }
.wa-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); text-transform: uppercase; }
.wa-msg { display: flex; flex-direction: column; max-width: min(65%, 620px); align-self: flex-start; position: relative; margin-top: 2px; }
.wa-msg.coda { margin-top: 10px; }
.wa-msg.out { align-self: flex-end; align-items: flex-end; }
.wa-bolla { position: relative; padding: 6px 7px 8px 9px; border-radius: 7.5px; background: var(--wa-in); box-shadow: 0 1px .5px rgba(11,20,26,.13); font-size: 14.2px; line-height: 19px; overflow-wrap: anywhere; }
.wa-msg.out .wa-bolla { background: var(--wa-out); }
.wa-msg.coda.in .wa-bolla { border-top-left-radius: 0; }
.wa-msg.coda.out .wa-bolla { border-top-right-radius: 0; }
.wa-msg.coda .wa-bolla::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; }
.wa-msg.coda.in .wa-bolla::before { left: -8px; background: var(--wa-in); clip-path: polygon(100% 0, 0 0, 100% 100%); }
.wa-msg.coda.out .wa-bolla::before { right: -8px; background: var(--wa-out); clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa-testo { white-space: pre-wrap; padding-right: 58px; display: block; }
.wa-msg.out .wa-testo { padding-right: 78px; }
.wa-piede { float: right; margin: 6px -4px -5px 4px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--wa-grigio); line-height: 15px; position: relative; z-index: 1; }
.wa-firma { font-style: italic; opacity: 0.85; }
.wa-ack { letter-spacing: -0.15em; color: var(--wa-grigio); font-size: 12px; }
.wa-ack.letto { color: var(--wa-blu); }
.wa-ack.err { color: #a33; font-weight: 800; letter-spacing: 0; }
.wa-riga-2 .wa-ack { letter-spacing: -0.15em; margin-right: 1px; }
.wa-img img, .wa-bolla video { display: block; max-width: 100%; max-height: 360px; border-radius: 6px; margin: -2px -3px 4px -5px; }
.wa-bolla audio { display: block; max-width: 100%; margin: 2px 0 4px; }
.wa-doc { display: inline-block; padding: 8px 12px; background: rgba(11,20,26,0.05); border-radius: 6px; color: var(--wa-testo); text-decoration: none; font-weight: 500; margin-bottom: 4px; }
.wa-tipo { color: var(--wa-grigio); font-style: italic; }
.wa-reaz { display: inline-flex; gap: 2px; margin: -6px 0 0 8px; padding: 2px 6px; border-radius: 999px; background: #fff; border: 1px solid var(--wa-bordo); font-size: 13px; box-shadow: 0 1px 1px rgba(0,0,0,0.08); position: relative; z-index: 2; }
.wa-msg.out .wa-reaz { margin-left: 0; margin-right: 8px; }
.wa-reaz[hidden] { display: none; }

/* barra di scrittura */
.wa-scrivi { flex: 0 0 auto; background: var(--wa-testa); padding: 5px 16px 8px; }
.wa-scrivi form { display: flex; align-items: flex-end; gap: 4px; }
.wa-scrivi textarea { flex: 1; min-width: 0; resize: none; margin: 5px 4px; padding: 9px 12px; border: none; border-radius: 8px; background: #fff; font-family: inherit; font-size: 15px; line-height: 20px; max-height: 160px; color: var(--wa-testo); }
.wa-scrivi textarea:focus { outline: none; }
.wa-scrivi .wa-ico { margin-bottom: 5px; }
.wa-allega { position: relative; overflow: hidden; }
.wa-allega input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.wa-invia { color: var(--wa-ico); }
.wa-invia:disabled { opacity: 0.4; cursor: wait; }
.wa-file-nome { margin: 0; padding: 4px 16px; background: var(--wa-testa); font-size: 0.8rem; color: var(--wa-verde-scuro); }
.wa-errore { margin: 0; padding: 6px 16px; background: #fdecec; color: #a33; font-size: 0.85rem; }
.wa-errore[hidden], .wa-file-nome[hidden] { display: none; }

/* nessuna chat aperta */
.wa-vuota { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; background: #f8f9fa; border-bottom: 6px solid var(--wa-verde); color: var(--wa-grigio); }
.wa-vuota-icona { width: 120px !important; height: 120px !important; margin-bottom: 1.4rem; opacity: 0.9; }
.wa-vuota h2 { font-weight: 300; font-size: 1.9rem; color: #41525d; margin: 0 0 0.6rem; }
.wa-vuota p { max-width: 460px; font-size: 14px; line-height: 1.5; margin: 0; }

@media (max-width: 900px) {
  .wa { grid-template-columns: 1fr; }
  .wa-sx { border-right: none; }
  .wa-dx { display: none; }
  .wa-aperta .wa-sx { display: none; }
  .wa-aperta .wa-dx { display: flex; }
  .wa-indietro { display: inline-flex; }
  .wa-dx-testa { border-left: none; padding: 10px 8px; gap: 8px; }
  .wa-messaggi { padding: 10px 10px 6px; }
  .wa-msg { max-width: 86%; }
  .wa-scrivi { padding: 5px 8px 8px; }
}

/* ---- chat a tutto schermo sul telefono: niente barra di marcorepole, si torna con la casetta ---- */
@media (max-width: 900px) {
  body.senza-barra.admin { grid-template-rows: 1fr; }
  body.senza-barra .sidebar { display: none; }
  body.senza-barra .admin-main.admin-pieno { height: 100vh; height: 100dvh; }
  /* margini di sicurezza per tacca e barra di sistema (iPhone in modalità app) */
  body.senza-barra .wa-sx > .wa-testa, body.senza-barra .wa-dx-testa { height: auto; min-height: 59px; padding-top: calc(10px + env(safe-area-inset-top)); }
  body.senza-barra .wa-scrivi { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}

/* ---- home a pulsantoni ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; max-width: 900px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 0.3rem; min-height: 150px; padding: 1.2rem 1.2rem 1.1rem; border-radius: 14px; background: #fff; border: 1px solid var(--pietra); color: var(--lana); text-decoration: none; text-align: left; font-family: inherit; cursor: pointer; box-shadow: 0 1px 2px rgba(15,27,45,0.06); transition: transform 0.12s, box-shadow 0.12s; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,27,45,0.12); }
.tile-icona { font-size: 2rem; line-height: 1; }
.tile-titolo { font-weight: 800; font-size: 1.2rem; margin-top: auto; }
.tile-sotto { color: var(--grigio); font-size: 0.85rem; }
.tile-badge { position: absolute; top: 0.9rem; right: 0.9rem; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 15px; background: #00a884; color: #fff; font-size: 0.95rem; font-weight: 800; line-height: 30px; text-align: center; }
.tile-badge[hidden] { display: none; }
.tile-wa { background: linear-gradient(135deg, #e7fce3, #fff); }
.tile-mail { background: linear-gradient(135deg, #e3eefc, #fff); }
.tile-rag { background: linear-gradient(135deg, #f3e8fc, #fff); }
.tile-ria { background: linear-gradient(135deg, #fdf3e1, #fff); }
.tile-badge-blu { background: var(--persiana); }
html[data-theme="dark"] .tile-ria { background: #172231; }
/* ---- riassunti giornalieri ---- */
.ria-nav { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ria-nav select { font-family: inherit; font-size: 0.95rem; padding: 0.4rem 0.6rem; border: 1px solid var(--pietra); border-radius: 6px; background: #fff; color: var(--lana); }
.ria-griglia { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: 1.2rem; align-items: start; max-width: 1100px; }
@media (max-width: 900px) { .ria-griglia { grid-template-columns: 1fr; } }
.todo-lista { list-style: none; margin: 0; padding: 0; }
.todo-lista li { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--pietra); }
.todo-lista li:last-child { border-bottom: none; }
.todo-lista input[type=checkbox] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--persiana); flex: none; }
.todo-testo { flex: 1; min-width: 0; line-height: 1.35; }
.todo-testo small { display: block; color: var(--grigio); font-size: 0.78rem; margin-top: 0.1rem; }
.todo-testo a { color: var(--persiana); text-decoration: none; }
li.fatto .todo-testo { color: var(--grigio); text-decoration: line-through; }
.todo-pri { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; background: var(--grigio); }
.todo-pri.p1 { background: #d64545; } .todo-pri.p2 { background: #e8a33d; } .todo-pri.p3 { background: #7ab55c; }
.todo-x { flex: none; background: none; border: none; color: var(--grigio); font-size: 1.1rem; cursor: pointer; padding: 0 0.2rem; line-height: 1; }
.todo-x:hover { color: #a33; }
.todo-nuovo { display: flex; gap: 0.4rem; margin-top: 0.8rem; }
.todo-nuovo input[type=text] { flex: 1; min-width: 0; font-family: inherit; font-size: 0.92rem; padding: 0.45rem 0.6rem; border: 1px solid var(--pietra); border-radius: 6px; background: #fff; color: var(--lana); }
.todo-sospesi { margin-top: 1.2rem; }
.todo-sospesi h3 { font-size: 0.95rem; color: var(--grigio); }
html[data-theme="dark"] .ria-nav select, html[data-theme="dark"] .todo-nuovo input[type=text] { background: #0f1720; border-color: #263241; color: #e9edef; }
@media (max-width: 640px) { .tiles { grid-template-columns: 1fr 1fr; gap: 0.7rem; } .tile { min-height: 130px; padding: 1rem; } .tile-titolo { font-size: 1.05rem; } }

/* ---- foto profilo dentro l'avatar (copre l'iniziale quando c'è) ---- */
.wa-avatar { position: relative; overflow: hidden; }
.wa-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ============ tema scuro ============ */
/* variabili del pannello */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body, html[data-theme="dark"] .admin { --lana: #e9edef; --carta: #0f1720; --pietra: #263241; --grigio: #9aa8b6; --persiana: #2f7fe0; --persiana-scuro: #5aa2ff; --lampione: #4FA8F0; background: #0f1720; color: #e9edef; }
html[data-theme="dark"] .sidebar { background: #0b1118; }
html[data-theme="dark"] .source-add, html[data-theme="dark"] .tile, html[data-theme="dark"] .list, html[data-theme="dark"] .login-card, html[data-theme="dark"] .acc-grid form, html[data-theme="dark"] .rag-risposta, html[data-theme="dark"] .login-codici-lista code, html[data-theme="dark"] .login-qr img, html[data-theme="dark"] .qr-box img { background: #172231; border-color: #263241; color: #e9edef; }
html[data-theme="dark"] .tile-wa, html[data-theme="dark"] .tile-mail, html[data-theme="dark"] .tile-rag { background: #172231; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .pw-eye, html[data-theme="dark"] .mail-casella, html[data-theme="dark"] .rub-cerca input, html[data-theme="dark"] .rub-scrivi textarea, html[data-theme="dark"] .rub-form input, html[data-theme="dark"] .rub-form textarea { background: #0f1720; color: #e9edef; border-color: #35455a; }
html[data-theme="dark"] .tag-pub { background: #163d2f; color: #7fe0b3; }
html[data-theme="dark"] .tag-feat { background: #4a3a10; color: #f2cf7a; }
html[data-theme="dark"] .tag-draft { background: #263241; color: #9aa8b6; }
html[data-theme="dark"] .login-error, html[data-theme="dark"] .rub-toast.errore, html[data-theme="dark"] .rub-ponte-giu, html[data-theme="dark"] .wa-avviso, html[data-theme="dark"] .wa-errore { background: #3a1d1d; color: #ff9b9b; border-color: #5a2a2a; }
html[data-theme="dark"] .btn-ghost:hover { background: #1c2a3c; }
html[data-theme="dark"] .login-body { background: #0b1118; }
html[data-theme="dark"] .rub-wrap, html[data-theme="dark"] .rub-lista, html[data-theme="dark"] .mail-lettura, html[data-theme="dark"] .mail-msg-testa, html[data-theme="dark"] .rub-scrivi, html[data-theme="dark"] .rub-chat-testata, html[data-theme="dark"] .rub-file-nome { background: #172231; border-color: #263241; }
html[data-theme="dark"] .rub-chat, html[data-theme="dark"] .mail-allegati { background: #0f1720; }
html[data-theme="dark"] .rub-contatto { border-color: #1f2b3a; }
html[data-theme="dark"] .rub-contatto.on, html[data-theme="dark"] .rub-contatto-apri:hover { background: #1c2a3c; }
html[data-theme="dark"] .rub-msg { background: #1f2c3a; border-color: #2b3a4c; color: #e9edef; }
html[data-theme="dark"] .rub-msg.out { background: #0d3d33; border-color: #14523f; }
html[data-theme="dark"] .mail-allegato, html[data-theme="dark"] .rub-reaz, html[data-theme="dark"] .rag-storico { background: #172231; border-color: #263241; }
html[data-theme="dark"] .mail-corpo { background: #fff; }
/* chat WhatsApp: palette scura di WhatsApp */
html[data-theme="dark"] .wa { --wa-testa: #202c33; --wa-sfondo: #0b141a; --wa-out: #005c4b; --wa-in: #202c33; --wa-testo: #e9edef; --wa-grigio: #8696a0; --wa-bordo: #222d34; --wa-ico: #aebac1; --wa-blu: #53bdeb; background: #111b21; color: #e9edef; }
html[data-theme="dark"] .wa-sx { background: #111b21; }
html[data-theme="dark"] .wa-riga:hover { background: #202c33; }
html[data-theme="dark"] .wa-riga.on { background: #2a3942; }
html[data-theme="dark"] .wa-riga-testo { border-color: #222d34; }
html[data-theme="dark"] .wa-riga .wa-avatar { background: #6b7c85; }
html[data-theme="dark"] .wa-filtri button { background: #202c33; color: #8696a0; }
html[data-theme="dark"] .wa-filtri button.on { background: #0a332c; color: #00a884; border-color: #0f4d40; }
html[data-theme="dark"] .wa-ico:hover { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .wa-form { background: #202c33; }
html[data-theme="dark"] .wa-form input, html[data-theme="dark"] .wa-form textarea, html[data-theme="dark"] .wa-aggiungi input { background: #111b21; color: #e9edef; border-color: #2a3942; }
html[data-theme="dark"] .wa-aggiungi { background: #2b2a1c; border-color: #4a4420; }
html[data-theme="dark"] .wa-messaggi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23233138' stroke-width='1.2' opacity='.8'%3E%3Ccircle cx='24' cy='28' r='7'/%3E%3Cpath d='M60 18l6 6-6 6-6-6z'/%3E%3Cpath d='M100 30c6-8 14-8 20 0-6 8-14 8-20 0z'/%3E%3Cpath d='M136 14v14M129 21h14'/%3E%3Cpath d='M18 76c0-6 4-10 10-10s10 4 10 10-10 14-10 14-10-8-10-14z'/%3E%3Crect x='58' y='66' width='14' height='14' rx='3'/%3E%3Cpath d='M96 72l8-8 8 8-8 8z'/%3E%3Ccircle cx='140' cy='76' r='9'/%3E%3Cpath d='M22 122c8-8 16 0 24-8'/%3E%3Cpath d='M64 116l10 14M74 116l-10 14'/%3E%3Ccircle cx='110' cy='124' r='5'/%3E%3Cpath d='M134 118c4 0 8 4 8 8s-4 8-8 8-8-4-8-8 4-8 8-8z'/%3E%3C/g%3E%3C/svg%3E"); }
html[data-theme="dark"] .wa-giorno span { background: #182229; color: #8696a0; }
html[data-theme="dark"] .wa-bolla { box-shadow: 0 1px .5px rgba(0,0,0,.3); }
html[data-theme="dark"] .wa-doc { background: rgba(255,255,255,0.08); color: #e9edef; }
html[data-theme="dark"] .wa-reaz { background: #202c33; border-color: #2a3942; }
html[data-theme="dark"] .wa-scrivi textarea { background: #2a3942; color: #e9edef; }
html[data-theme="dark"] .wa-vuota { background: #222e35; border-bottom-color: #00a884; }
html[data-theme="dark"] .wa-vuota h2 { color: #e9edef; }
/* automatico: stesse regole quando il telefono è in modalità scura e non c'è una scelta esplicita */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="chiaro"]) { color-scheme: dark; }
}

/* ---- selettore emoji nella chat ---- */
.wa-emoji { flex: 0 0 auto; background: var(--wa-testa); border-top: 1px solid var(--wa-bordo); }
.wa-emoji[hidden] { display: none; }
.wa-emoji-cat { display: flex; gap: 2px; padding: 6px 10px 0; overflow-x: auto; }
.wa-emoji-cat button { flex: 0 0 auto; width: 38px; height: 34px; border: none; border-bottom: 3px solid transparent; background: none; font-size: 1.15rem; cursor: pointer; opacity: 0.6; }
.wa-emoji-cat button.on { opacity: 1; border-bottom-color: var(--wa-verde); }
.wa-emoji-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; max-height: 220px; overflow-y: auto; padding: 6px 10px 8px; }
.wa-emoji-griglia button { height: 38px; border: none; border-radius: 6px; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.wa-emoji-griglia button:hover { background: rgba(11,20,26,0.08); }
.wa-emoji-vuoto { grid-column: 1 / -1; margin: 0; padding: 10px; color: var(--wa-grigio); font-size: 0.85rem; text-align: center; }
html[data-theme="dark"] .wa-emoji-griglia button:hover { background: rgba(255,255,255,0.08); }

/* ---- cerchie dei contatti ---- */
.c-clienti { --cc: #00a884; } .c-assistenza { --cc: #0e8a8a; } .c-colleghi { --cc: #1E5AA8; } .c-fornitori { --cc: #b8860b; } .c-famiglia { --cc: #d64c7f; } .c-amici { --cc: #8a5cf6; } .c-altro { --cc: #7f8fa3; } .c-da_classificare { --cc: #b0b8c4; }
.wa-riga[class*=" c-"] .wa-avatar { box-shadow: 0 0 0 2.5px var(--cc); }
.wa-riga.c-altro .wa-avatar { box-shadow: none; }
.wa-cerchia { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--cc, #7f8fa3); color: #fff; font-size: 11px; font-weight: 600; line-height: 17px; vertical-align: 1px; }
.cl-riepilogo { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.cl-conta { padding: 0.3rem 0.7rem; border-radius: 999px; background: #fff; border: 1px solid var(--pietra); border-left: 5px solid var(--cc); font-size: 0.85rem; }
.cl-conta b { font-size: 1rem; }
.cl-lista { display: flex; flex-direction: column; gap: 0.5rem; }
.cl-riga { display: grid; grid-template-columns: 44px 1fr; gap: 0.3rem 0.8rem; align-items: start; padding: 0.7rem 0.9rem; background: #fff; border: 1px solid var(--pietra); border-radius: 10px; }
.cl-riga.fatta { border-left: 5px solid var(--cc, var(--pietra)); }
.cl-riga.fatta:has(.cl-chip.on.c-clienti) { --cc: #00a884; } .cl-riga.fatta:has(.cl-chip.on.c-assistenza) { --cc: #0e8a8a; } .cl-riga.fatta:has(.cl-chip.on.c-colleghi) { --cc: #1E5AA8; } .cl-riga.fatta:has(.cl-chip.on.c-fornitori) { --cc: #b8860b; } .cl-riga.fatta:has(.cl-chip.on.c-famiglia) { --cc: #d64c7f; } .cl-riga.fatta:has(.cl-chip.on.c-amici) { --cc: #8a5cf6; } .cl-riga.fatta:has(.cl-chip.on.c-altro) { --cc: #7f8fa3; }
.cl-avatar { width: 44px; height: 44px; flex-basis: 44px; background: #6b7c85; grid-row: 1 / 3; }
.cl-chi { display: flex; flex-direction: column; min-width: 0; }
.cl-chi strong a { color: var(--lana); text-decoration: none; }
.cl-chi small { color: var(--grigio); font-size: 0.82rem; }
.cl-proposta { color: #8a6413; }
.cl-scelte { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.cl-chip { padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid var(--pietra); background: #fff; color: var(--grigio); font-family: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.cl-chip.proposta { border-style: dashed; border-color: var(--cc); color: var(--cc); }
.cl-chip.on { background: var(--cc); border-color: var(--cc); color: #fff; }
.cl-etichette { flex: 1 1 200px; min-width: 160px; padding: 0.35rem 0.6rem; border: 1px solid var(--pietra); border-radius: 6px; font-family: inherit; font-size: 0.85rem; }
.cl-etichette[hidden] { display: none; }
.cl-esito { font-size: 0.85rem; color: var(--persiana-scuro); min-width: 1.2em; }
html[data-theme="dark"] .cl-riga, html[data-theme="dark"] .cl-conta, html[data-theme="dark"] .cl-chip { background: #172231; border-color: #263241; color: #c9d3de; }
html[data-theme="dark"] .cl-chip.on { color: #fff; }
@media (max-width: 640px) { .cl-riga { grid-template-columns: 40px 1fr; padding: 0.6rem; } .cl-avatar { width: 40px; height: 40px; flex-basis: 40px; } }

/* ---- menu rapido delle cerchie (tocco sull'avatar) ---- */
.wa-avatar-btn { border: none; padding: 0; cursor: pointer; font-family: inherit; }
.wa-avatar-btn:hover { box-shadow: 0 0 0 3px rgba(0,168,132,0.35); }
.wa-pop { position: fixed; z-index: 950; background: #fff; border: 1px solid var(--pietra); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.22); padding: 0.7rem 0.8rem 0.6rem; font-family: "Segoe UI", -apple-system, system-ui, Helvetica, Arial, sans-serif; color: var(--lana); }
.wa-pop[hidden] { display: none; }
.wa-pop-nome { margin: 0 0 0.5rem; font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-pop-chip { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.wa-pop .cl-etichette { width: 100%; margin-top: 0.5rem; }
.wa-pop-esito { margin: 0.4rem 0 0; min-height: 1.1em; font-size: 0.82rem; color: var(--persiana-scuro); }
html[data-theme="dark"] .wa-pop { background: #202c33; border-color: #2a3942; color: #e9edef; }
html[data-theme="dark"] .wa-pop-esito { color: #7fb3ff; }

/* filtri della chat: una riga sola, scorrevole di lato col dito (niente a capo) */
.wa-filtri { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; }
.wa-filtri::-webkit-scrollbar { display: none; }
.wa-filtri button { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
.tile-push { background: linear-gradient(135deg, #fff4dc, #fff); }
html[data-theme="dark"] .tile-push { background: #172231; }

/* ---- gruppi ---- */
.wa-avatar-gruppo { background: #8696a0; font-size: 1.1rem; }
.wa-mittente { display: block; font-size: 12.8px; font-weight: 600; margin: -1px 0 2px; color: #1f7aec; }
.wa-mittente.col-1 { color: #d4652f; } .wa-mittente.col-2 { color: #0e8a8a; } .wa-mittente.col-3 { color: #8a5cf6; } .wa-mittente.col-4 { color: #c2185b; } .wa-mittente.col-5 { color: #2e7d32; } .wa-mittente.col-6 { color: #b8860b; }

/* ---- pagina Rubrica ---- */
.rb-barra { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.rb-cerca { display: flex; gap: 0.4rem; flex: 1 1 280px; }
.rb-cerca input { flex: 1; min-width: 0; }
.rb-azioni { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.rb-form[hidden] { display: none; }
.rb-lista { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--pietra); border-radius: 10px; overflow: hidden; }
.rb-lettera { padding: 0.35rem 1rem; background: var(--carta); color: var(--persiana-scuro); font-weight: 800; font-size: 0.8rem; border-bottom: 1px solid var(--pietra); }
.rb-riga { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0.6rem 0.5rem 1rem; border-bottom: 1px solid #eef2f7; }
.rb-riga.on { background: #E8F0FA; }
.rb-riga .wa-avatar { box-shadow: 0 0 0 2.5px var(--cc, transparent); }
.rb-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.rb-testo strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-testo small { color: var(--grigio); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-riga .wa-ico { text-decoration: none; }
.tile-rub { background: linear-gradient(135deg, #e6f4ff, #fff); }
html[data-theme="dark"] .rb-lista, html[data-theme="dark"] .rb-lettera { background: #172231; border-color: #263241; }
html[data-theme="dark"] .rb-riga { border-color: #1f2b3a; }
html[data-theme="dark"] .rb-riga.on { background: #1c2a3c; }
html[data-theme="dark"] .tile-rub { background: #172231; }
@media (max-width: 640px) { .rb-riga { padding-left: 0.7rem; } }
.wa-nome-btn { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.wa-nome-btn small { color: var(--wa-verde-scuro); font-size: 12px; font-weight: 600; }
.wa-aggiungi select { flex: 1; min-width: 120px; padding: 7px 10px; border: 1px solid var(--wa-bordo); border-radius: 6px; font-family: inherit; background: #fff; }

/* interruttori delle cerchie */
.ce-toggle { position: relative; display: inline-block; width: 42px; height: 24px; }
.ce-toggle input { opacity: 0; width: 0; height: 0; }
.ce-toggle span { position: absolute; inset: 0; background: #c9d2dc; border-radius: 24px; cursor: pointer; transition: background 0.15s; }
.ce-toggle span::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.ce-toggle input:checked + span { background: #00a884; }
.ce-toggle input:checked + span::before { transform: translateX(18px); }

/* ============ procedura guidata «Nuova casella» ============ */
body.cm-aperto { overflow: hidden; }
.cm-sfondo { position: fixed; inset: 0; z-index: 200; background: rgba(15,27,45,0.55); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.cm-sfondo[hidden] { display: none; }
.cm { background: #fff; color: var(--lana); width: 100%; max-width: 640px; max-height: calc(100vh - 2rem); border-radius: 16px; display: flex; flex-direction: column; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
.cm-testa { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1rem; background: #fff; border-bottom: 1px solid var(--pietra); }
.cm-titoli { flex: 1; min-width: 0; } .cm-titoli h2 { margin: 0; font-size: 1.15rem; font-weight: 800; } .cm-passo { margin: 0.1rem 0 0; color: var(--grigio); font-size: 0.82rem; }
.cm-chiudi, .cm-indietro { flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--carta); color: var(--lana); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.cm-indietro[hidden], .cm-chiudi[hidden] { display: none; }
.cm-corpo { padding: 1rem; } .cm-corpo[hidden] { display: none; }
.cm-corpo label { display: block; font-weight: 600; font-size: 0.88rem; margin: 0.9rem 0 0.3rem; }
.cm-corpo input[type=text], .cm-corpo input[type=email], .cm-corpo input[type=password], .cm-corpo input[type=search], .cm-corpo select { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 16px; padding: 0.7rem 0.8rem; border: 1px solid var(--pietra); border-radius: 8px; background: #fff; color: var(--lana); }
.cm-corpo input:read-only { background: var(--carta); color: var(--grigio); }
.cm-cerca { margin-bottom: 0.9rem; }
.cm-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.6rem; }
.cm-card { position: relative; display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; text-align: left; padding: 0.8rem 0.9rem; min-height: 92px; border: 1px solid var(--pietra); border-radius: 12px; background: #fff; color: var(--lana); font-family: inherit; cursor: pointer; }
.cm-card:hover, .cm-card:focus-visible { border-color: var(--persiana); box-shadow: 0 2px 10px rgba(30,90,168,0.15); outline: none; }
.cm-card-sugg { border-color: var(--persiana); background: #eef5fd; }
.cm-card-ico { font-size: 1.4rem; line-height: 1; } .cm-card-nome { font-weight: 700; margin-top: 0.3rem; } .cm-card-sotto { font-size: 0.78rem; color: var(--grigio); }
.cm-card-tag { font-size: 0.72rem; color: var(--persiana-scuro); font-weight: 700; margin-top: 0.2rem; }
.cm-prov { display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; align-items: center; padding: 0.7rem 0.9rem; background: var(--carta); border-radius: 10px; }
.cm-prov .cm-card-ico { grid-row: span 2; } .cm-prov small { color: var(--grigio); font-size: 0.8rem; }
.cm-nota { margin: 0.8rem 0 0; padding: 0.7rem 0.9rem; background: #fff7e3; border: 1px solid #f1dfae; border-radius: 8px; font-size: 0.88rem; line-height: 1.4; }
.cm-nota a { color: var(--persiana); font-weight: 600; }
.cm-pw { position: relative; } .cm-pw input { padding-right: 3rem; }
.cm-occhio { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 40px; border: none; background: transparent; font-size: 1.1rem; cursor: pointer; color: var(--grigio); }
.cm-server { margin-top: 1rem; border: 1px solid var(--pietra); border-radius: 8px; padding: 0 0.9rem; }
.cm-server summary { cursor: pointer; padding: 0.7rem 0; font-weight: 600; font-size: 0.9rem; }
.cm-server summary .hint { display: block; font-size: 0.78rem; word-break: break-all; }
.cm-server[open] summary { border-bottom: 1px solid var(--pietra); }
.cm-server .field-row { margin-top: 0.2rem; } .cm-server .field-row label { margin-top: 0.6rem; }
.cm-check { display: flex !important; align-items: flex-start; gap: 0.5rem; padding: 0.8rem 0; font-weight: 500 !important; }
.cm-check input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--persiana); }
.cm-intro { color: var(--grigio); margin: 0 0 1rem; }
.cm-prove { list-style: none; margin: 0; padding: 0; }
.cm-prove li { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.8rem; border: 1px solid var(--pietra); border-radius: 10px; margin-bottom: 0.6rem; }
.cm-prove li[hidden] { display: none; }
.cm-prove li.ok { border-color: #9fd3a3; background: #f1faf1; } .cm-prove li.no { border-color: #e0a0a0; background: #fdf2f2; }
.cm-prove .cm-stato { font-size: 1.3rem; line-height: 1; } .cm-prove b { display: block; } .cm-prove small { color: var(--grigio); font-size: 0.85rem; word-break: break-word; }
.cm-esito { margin: 0.8rem 0 0; padding: 0.7rem 0.9rem; border-radius: 8px; font-weight: 600; }
.cm-esito-ok { background: #e3f6e5; color: #1e6b2a; } .cm-esito-no { background: #fbeeee; color: #a33; }
.cm-fine { text-align: center; padding: 2rem 1rem; } .cm-fine-icona { font-size: 3rem; margin: 0; } .cm-fine h3 { margin: 0.5rem 0 0.3rem; }
.cm-piede { position: sticky; bottom: 0; display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; padding: 0.8rem 1rem; background: #fff; border-top: 1px solid var(--pietra); margin-top: auto; }
.cm-piede .btn { min-height: 44px; } .cm-piede .btn[hidden] { display: none; }
@media (max-width: 640px) {
  .cm-sfondo { padding: 0; align-items: stretch; }
  .cm { max-width: none; max-height: none; height: 100%; border-radius: 0; }
  .cm-testa { padding-top: max(0.9rem, env(safe-area-inset-top)); }
  .cm-piede { padding-bottom: max(0.8rem, env(safe-area-inset-bottom)); }
  .cm-piede .btn { flex: 1; }
  .cm-griglia { grid-template-columns: 1fr 1fr; }
}
html[data-theme="dark"] .cm, html[data-theme="dark"] .cm-testa, html[data-theme="dark"] .cm-piede, html[data-theme="dark"] .cm-card, html[data-theme="dark"] .cm-corpo input, html[data-theme="dark"] .cm-corpo select { background: #172231; color: #e9edef; border-color: #263241; }
html[data-theme="dark"] .cm-card-sugg, html[data-theme="dark"] .cm-prov, html[data-theme="dark"] .cm-corpo input:read-only, html[data-theme="dark"] .cm-chiudi, html[data-theme="dark"] .cm-indietro { background: #0f1720; color: #e9edef; }
html[data-theme="dark"] .cm-nota { background: #2a2416; border-color: #4a3d1c; }
html[data-theme="dark"] .cm-prove li.ok { background: #14261a; border-color: #2f5a36; } html[data-theme="dark"] .cm-prove li.no { background: #2a1717; border-color: #6a3030; }
html[data-theme="dark"] .cm-esito-ok { background: #14261a; color: #8fd39a; } html[data-theme="dark"] .cm-esito-no { background: #2a1717; color: #f0a0a0; }