@charset "UTF-8";
/* Stili globali — font Titillium Web (AgID/Designers Italia) caricato via @fontsource */
.elenco-testata {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.elenco-testata h1 {
  margin: 0;
}
.elenco-testata .elenco-totale {
  font-size: 1rem;
  font-weight: 600;
  color: var(--op-muted);
  margin-left: 0.5rem;
}
.elenco-testata .elenco-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.elenco-barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--op-bg);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--op-line);
  margin-bottom: 0.75rem;
}

.elenco-viste {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
}

.elenco-vista {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.875rem;
  border: 1px solid var(--op-line);
  border-radius: 999px;
  background: var(--op-surface);
  color: var(--op-ink);
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
}
.elenco-vista .elenco-vista-n {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--op-muted);
}
.elenco-vista[aria-pressed=true] {
  background: var(--op-primary);
  border-color: var(--op-primary);
  color: var(--op-primary-ink);
  font-weight: 700;
}
.elenco-vista[aria-pressed=true] .elenco-vista-n {
  color: var(--op-primary-ink);
}

.elenco-strumenti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.375rem;
}
.elenco-strumenti .elenco-cerca {
  flex: 1 1 16rem;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--op-field);
  border-radius: 6px;
  background: var(--op-surface);
  padding: 0 0.5rem;
}
.elenco-strumenti .elenco-cerca:focus-within {
  outline: 3px solid var(--op-primary);
  outline-offset: 1px;
}
.elenco-strumenti .elenco-cerca input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--op-ink);
  padding: 0.5rem 0.125rem;
  font-size: 0.9rem;
  box-shadow: none;
  outline: none;
}
.elenco-strumenti .elenco-cerca .icon {
  fill: var(--op-muted);
}
.elenco-strumenti .elenco-ordina {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.85rem;
  color: var(--op-muted);
}
.elenco-strumenti .elenco-ordina select {
  width: auto;
  min-height: 2.25rem;
  font-size: 0.85rem;
  background-color: var(--op-surface);
  color: var(--op-ink);
}

.elenco-kbd {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  border: 1px solid var(--op-line);
  border-radius: 4px;
  padding: 0 0.3rem;
  color: var(--op-muted);
}

.elenco-gettone {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  background: var(--op-primary-soft);
  color: var(--op-ink);
  border-radius: 999px;
  padding: 0.125rem 0.25rem 0.125rem 0.625rem;
}
.elenco-gettone button {
  border: 0;
  background: transparent;
  color: var(--op-muted);
  min-width: 1.5rem;
  min-height: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.elenco-filtri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.5rem 1rem;
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--op-surface);
  border: 1px solid var(--op-line);
  border-radius: 8px;
}
.elenco-filtri label {
  font-size: 0.8rem;
  color: var(--op-muted);
  margin-bottom: 0.125rem;
}

.op-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.0625rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.5;
}
.op-chip.tono-info {
  background: var(--op-primary-soft);
  color: var(--op-primary);
}
.op-chip.tono-pri {
  background: var(--op-primary);
  color: var(--op-primary-ink);
}
.op-chip.tono-warn {
  background: var(--op-warn-soft);
  color: var(--op-warn);
}
.op-chip.tono-ok {
  background: var(--op-ok-soft);
  color: var(--op-ok);
}
.op-chip.tono-bad {
  background: var(--op-bad-soft);
  color: var(--op-bad);
}
.op-chip.tono-note {
  background: var(--op-note-soft);
  color: var(--op-note);
}
.op-chip.tono-off {
  background: var(--op-surface-2);
  color: var(--op-muted);
  border: 1px solid var(--op-line);
}

.op-idm {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 0 0.3rem;
  border: 1px solid var(--op-line);
  color: var(--op-muted);
  white-space: nowrap;
  line-height: 1.6;
}
.op-idm.verificato {
  border-color: var(--op-ok);
  color: var(--op-ok);
}

.op-msg {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--op-note);
  white-space: nowrap;
}

.op-sla {
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}
.op-sla.tono-scaduta {
  color: var(--op-bad);
}
.op-sla.tono-presto {
  color: var(--op-warn);
}
.op-sla.tono-normale, .op-sla.tono-conclusa {
  color: var(--op-muted);
}

.op-codice {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--op-primary);
  white-space: nowrap;
}

.op-avatar {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--op-surface-2);
  border: 1px solid var(--op-line);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--op-ink);
  flex: none;
}

.op-assegnati {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: center;
  font-size: 0.85rem;
}
.op-assegnati span.op-persona {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.op-citazione {
  margin: 0.5rem 0 0;
  border-left: 3px solid var(--op-note);
  padding: 0.25rem 0.625rem;
  background: var(--op-surface);
  color: var(--op-ink);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.elenco-diviso {
  display: grid;
  grid-template-columns: minmax(18rem, 38%) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.elenco-righe {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--op-surface);
  border: 1px solid var(--op-line);
  border-radius: 8px;
  overflow: hidden;
}
.elenco-righe:focus-visible {
  outline: 3px solid var(--op-primary);
  outline-offset: 2px;
}
.elenco-righe li {
  padding: 0.5625rem 0.75rem;
  border-bottom: 1px solid var(--op-line);
  cursor: pointer;
  color: var(--op-ink);
}
.elenco-righe li:last-child {
  border-bottom: 0;
}
.elenco-righe li:hover {
  background: var(--op-surface-2);
}
.elenco-righe li.corrente {
  background: var(--op-primary-soft);
  box-shadow: inset 3px 0 0 var(--op-primary);
}
.elenco-righe .r1,
.elenco-righe .r3 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: center;
}
.elenco-righe .r2 {
  font-weight: 700;
  margin: 0.0625rem 0;
  overflow-wrap: anywhere;
}
.elenco-righe .r3 {
  font-size: 0.8rem;
  color: var(--op-muted);
}

.elenco-anteprima {
  background: var(--op-surface);
  color: var(--op-ink);
  border: 1px solid var(--op-line);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  position: sticky;
  top: var(--elenco-barra-h, 9.5rem);
  min-width: 0;
}
.elenco-anteprima h2 {
  font-size: 1.25rem;
  margin: 0.25rem 0;
  overflow-wrap: anywhere;
}
.elenco-anteprima .ant-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.625rem 0;
}
.elenco-anteprima .ant-fatti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.5rem 1rem;
  font-size: 0.9rem;
  margin: 0.625rem 0;
}
.elenco-anteprima .ant-fatti dt {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--op-muted);
}
.elenco-anteprima .ant-fatti dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.elenco-anteprima .ant-foto {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.375rem 0;
}
.elenco-anteprima .ant-foto img {
  width: 5rem;
  height: 3.5rem;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--op-line);
}
.elenco-anteprima .ant-risposta textarea {
  width: 100%;
  background: var(--op-bg);
  color: var(--op-ink);
  border: 1px solid var(--op-field);
  border-radius: 6px;
  padding: 0.5rem;
  font-size: 0.9rem;
}
.elenco-anteprima .ant-suggerimento {
  font-size: 0.75rem;
  color: var(--op-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  margin-top: 0.5rem;
}

.elenco-tabella-wrap {
  background: var(--op-surface);
  border: 1px solid var(--op-line);
  border-radius: 8px;
  overflow-x: auto;
}

table.elenco-tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  color: var(--op-ink);
  margin: 0;
}
table.elenco-tabella thead th {
  position: sticky;
  top: 0;
  background: var(--op-surface-2);
  color: var(--op-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--op-line);
  white-space: nowrap;
  text-align: left;
}
table.elenco-tabella td {
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--op-line);
  vertical-align: top;
  background: var(--op-surface);
}
table.elenco-tabella tr.riga:hover td {
  background: var(--op-surface-2);
}
table.elenco-tabella tr.riga.ritardo td:first-child {
  box-shadow: inset 3px 0 0 var(--op-bad);
}
table.elenco-tabella .t1 {
  font-weight: 700;
  color: var(--op-ink);
  text-decoration: none;
}
table.elenco-tabella .t1:hover {
  text-decoration: underline;
}
table.elenco-tabella .t2 {
  font-size: 0.8rem;
  color: var(--op-muted);
}
table.elenco-tabella .segni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.1875rem;
}
table.elenco-tabella tr.espansa td {
  background: var(--op-surface-2);
  padding: 0.75rem 0.875rem 0.875rem;
}
@media (max-width: 1199.98px) {
  table.elenco-tabella .facoltativa {
    display: none;
  }
}

.elenco-espandi {
  border: 1px solid var(--op-line);
  background: var(--op-surface);
  color: var(--op-ink);
  border-radius: 6px;
  min-width: 2rem;
  min-height: 2rem;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.elenco-espandi .icon {
  fill: currentColor;
  transition: transform 0.15s;
}
.elenco-espandi[aria-expanded=true] .icon {
  transform: rotate(180deg);
}

.elenco-dettagli {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.5rem 1.125rem;
  font-size: 0.9rem;
  margin: 0;
}
.elenco-dettagli dt {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--op-muted);
}
.elenco-dettagli dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.elenco-azioni-rapide {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.elenco-gruppo {
  margin-top: 0.875rem;
}
.elenco-gruppo > h2 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--op-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}
.elenco-gruppo.ritardo > h2 {
  color: var(--op-bad);
}
.elenco-gruppo .elenco-gruppo-n {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  background: var(--op-surface);
  border: 1px solid var(--op-line);
  border-radius: 999px;
  padding: 0 0.4rem;
  color: var(--op-ink);
}

.elenco-scheda {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  background: var(--op-surface);
  color: var(--op-ink);
  border: 1px solid var(--op-line);
  border-radius: 8px;
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.5rem;
}
.elenco-scheda.ritardo {
  border-left: 4px solid var(--op-bad);
}
.elenco-scheda .s1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem;
  align-items: center;
}
.elenco-scheda .s2 {
  font-weight: 700;
  font-size: 1rem;
  color: var(--op-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.elenco-scheda .s3 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.625rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--op-muted);
}
.elenco-scheda .s4 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.25rem;
}

.elenco-stato {
  background: var(--op-surface);
  color: var(--op-ink);
  border: 1px solid var(--op-line);
  border-radius: 8px;
  padding: 1.75rem 1.25rem;
  text-align: center;
}
.elenco-stato p {
  color: var(--op-muted);
  max-width: 60ch;
  margin: 0.5rem auto 0.75rem;
}
.elenco-stato.elenco-stato-errore {
  border-color: var(--op-bad);
  background: var(--op-bad-soft);
}
.elenco-stato.elenco-stato-errore h2 {
  color: var(--op-bad);
}
.elenco-stato.elenco-stato-errore p {
  color: var(--op-ink);
}

.elenco-scheletro {
  background: var(--op-surface);
  border: 1px solid var(--op-line);
  border-radius: 8px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.elenco-scheletro-riga {
  display: grid;
  grid-template-columns: 4.5rem 1fr 5.5rem;
  gap: 0.75rem;
}
.elenco-scheletro-riga span {
  height: 0.75rem;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--op-surface-2), var(--op-line), var(--op-surface-2));
  background-size: 200% 100%;
  animation: elenco-scheletro 1.4s infinite;
}

@keyframes elenco-scheletro {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .elenco-scheletro-riga span {
    animation: none;
  }
}
.elenco-piede {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--op-muted);
  padding: 0.625rem 0.125rem;
}

@media (max-width: 991.98px) {
  .elenco-diviso {
    grid-template-columns: minmax(16rem, 42%) minmax(0, 1fr);
  }
}
.elenco-multiple {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
  padding: 0.375rem 0.625rem;
  background: var(--op-primary-soft);
  border: 1px solid var(--op-primary);
  border-radius: 8px;
  color: var(--op-ink);
  font-size: 0.9rem;
}

.elenco-seleziona {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--op-primary);
  cursor: pointer;
  margin: 0 0.25rem 0 0;
  vertical-align: -0.15rem;
}

.elenco-casella {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--op-field);
  border-radius: 3px;
  background: var(--op-surface);
  cursor: pointer;
  position: relative;
  flex: none;
}
.elenco-casella.on {
  background: var(--op-primary);
  border-color: var(--op-primary);
}
.elenco-casella.on::after {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.05rem;
  width: 0.35rem;
  height: 0.65rem;
  border: solid var(--op-primary-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.scheda-testata {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--op-line);
}
.scheda-testata .st-riga {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.625rem;
  align-items: center;
}
.scheda-testata .st-codice {
  font-size: 1rem;
}
.scheda-testata .st-titolo {
  font-size: 1.75rem;
  margin: 0;
  overflow-wrap: anywhere;
}
.scheda-testata .st-meta {
  margin: 0;
  color: var(--op-muted);
  font-size: 0.9rem;
}
.scheda-testata .st-passi {
  display: flex;
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  gap: 0.25rem;
}
.scheda-testata .st-passi li {
  flex: 1;
  min-width: 0;
  border-top: 4px solid var(--op-line);
  padding-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--op-muted);
}
.scheda-testata .st-passi li.fatto {
  border-top-color: var(--op-ok);
  color: var(--op-ink);
}
.scheda-testata .st-passi li.ora {
  border-top-color: var(--op-primary);
  color: var(--op-ink);
  font-weight: 700;
}
.scheda-testata .st-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}
.scheda-testata .st-altre {
  position: relative;
}
.scheda-testata .st-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 30;
  min-width: 15rem;
  background: var(--op-surface);
  border: 1px solid var(--op-line);
  border-radius: 8px;
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.18);
  padding: 0.375rem 0;
}
.scheda-testata .st-menu .dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--op-ink);
  padding: 0.5rem 0.875rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.scheda-testata .st-menu .dropdown-item:hover, .scheda-testata .st-menu .dropdown-item:focus-visible {
  background: var(--op-surface-2);
}
.scheda-testata .st-menu .dropdown-item.pericolo {
  color: var(--op-bad);
}
.scheda-testata .st-menu hr {
  margin: 0.25rem 0;
  border-color: var(--op-line);
}
@media (max-width: 767.98px) {
  .scheda-testata .st-titolo {
    font-size: 1.375rem;
  }
  .scheda-testata .st-menu {
    top: auto;
    bottom: calc(100% + 0.25rem);
  }
  .scheda-testata .st-passi li:not(.ora) .st-passo {
    display: none;
  }
  .scheda-testata .st-azioni {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: var(--op-surface);
    border-top: 1px solid var(--op-line);
    padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    justify-content: stretch;
  }
  .scheda-testata .st-azioni > * {
    flex: 1 1 auto;
  }
}

.scheda-adesso {
  background: var(--op-surface);
  color: var(--op-ink);
  border: 1px solid var(--op-line);
  border-left: 4px solid var(--op-primary);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.scheda-adesso h2 {
  margin: 0;
}
.scheda-adesso .sa-prossima {
  margin: 0;
  font-size: 1rem;
}
.scheda-adesso .sa-dati {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.25rem 0.875rem;
  margin: 0;
  font-size: 0.9rem;
}
.scheda-adesso .sa-dati dt {
  color: var(--op-muted);
  font-weight: 400;
}
.scheda-adesso .sa-dati dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.scheda-cronologia {
  background: var(--op-surface);
  color: var(--op-ink);
  border: 1px solid var(--op-line);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
}
.scheda-cronologia h2 {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.scheda-cronologia .sc-n {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--op-muted);
}
.scheda-cronologia .sc-filtri {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
}
.scheda-cronologia .sc-eventi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.scheda-cronologia .sc-eventi li {
  border-radius: 8px;
  padding: 0.5rem 0.625rem;
  font-size: 0.9rem;
  border: 1px solid var(--op-line);
  overflow-wrap: anywhere;
}
.scheda-cronologia .sc-eventi .sc-cittadino {
  border-left: 4px solid var(--op-note);
}
.scheda-cronologia .sc-eventi .sc-ufficio {
  background: var(--op-primary-soft);
  border-color: transparent;
  margin-left: 1.5rem;
}
.scheda-cronologia .sc-eventi .sc-nota {
  background: var(--op-warn-soft);
  border-color: transparent;
}
.scheda-cronologia .sc-eventi .sc-consulto {
  background: var(--op-note-soft);
  border-color: transparent;
}
.scheda-cronologia .sc-eventi .sc-stato {
  border-style: dashed;
  color: var(--op-muted);
  font-size: 0.8rem;
}
.scheda-cronologia .sc-testa {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
  font-size: 0.8rem;
  color: var(--op-muted);
  margin-bottom: 0.125rem;
}
.scheda-cronologia .sc-testa strong {
  color: var(--op-ink);
}
.scheda-cronologia .sc-quando {
  font-size: 0.8rem;
  color: var(--op-muted);
}

.scheda-compositore {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--op-line);
  border-radius: 8px;
  padding: 0.625rem;
  background: var(--op-surface-2);
}
.scheda-compositore .sco-a {
  display: inline-flex;
  border: 1px solid var(--op-line);
  border-radius: 6px;
  overflow: hidden;
  align-self: flex-start;
}
.scheda-compositore .sco-a button {
  border: 0;
  background: var(--op-surface);
  color: var(--op-ink);
  padding: 0.375rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.scheda-compositore .sco-a button + button {
  border-left: 1px solid var(--op-line);
}
.scheda-compositore .sco-a button[aria-pressed=true] {
  background: var(--op-primary);
  color: var(--op-primary-ink);
  font-weight: 700;
}
.scheda-compositore .sco-dove {
  font-size: 0.8rem;
  color: var(--op-muted);
}

.scheda-sezione {
  background: var(--op-surface);
  color: var(--op-ink);
  border: 1px solid var(--op-line);
  border-radius: 8px;
  margin-bottom: 0.75rem;
}
.scheda-sezione > summary {
  cursor: pointer;
  padding: 0.625rem 0.875rem;
  font-weight: 700;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}
.scheda-sezione > summary .ss-nota {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--op-muted);
}
.scheda-sezione > .ss-corpo {
  padding: 0 0.875rem 0.875rem;
}

@media (max-width: 767.98px) {
  .app-content:has(.scheda-testata) {
    padding-bottom: 5rem !important;
  }
}
html[data-tema=scuro] {
  color-scheme: dark;
  --op-bg: #0e141b;
  --op-surface: #161f29;
  --op-surface-2: #1b2633;
  --op-ink: #e7edf4;
  --op-muted: #9aa8b8;
  --op-line: #2a3644;
  --op-field: #7d8b9b;
  --op-primary: #5aa6f0;
  --op-primary-ink: #0e141b;
  --op-primary-soft: #14293f;
  --op-ok: #5fc48a;
  --op-ok-soft: #12291c;
  --op-warn: #f0b35a;
  --op-warn-soft: #2d2210;
  --op-bad: #f08080;
  --op-bad-soft: #2f1515;
  --op-note: #b89af0;
  --op-note-soft: #221a33;
  --bs-body-bg: var(--op-bg);
  --bs-body-color: var(--op-ink);
  --bs-border-color: var(--op-line);
  --bs-secondary-color: var(--op-muted);
  --bs-primary: var(--op-primary);
  --bs-link-color: var(--op-primary);
}
html[data-tema=scuro] body {
  background-color: var(--op-bg);
  color: var(--op-ink);
}
html[data-tema=scuro] .app-content,
html[data-tema=scuro] main#main-content {
  background-color: var(--op-bg);
}
html[data-tema=scuro] h1, html[data-tema=scuro] h2, html[data-tema=scuro] h3, html[data-tema=scuro] h4, html[data-tema=scuro] h5, html[data-tema=scuro] h6,
html[data-tema=scuro] .h1, html[data-tema=scuro] .h2, html[data-tema=scuro] .h3, html[data-tema=scuro] .h4, html[data-tema=scuro] .h5, html[data-tema=scuro] .h6,
html[data-tema=scuro] label, html[data-tema=scuro] legend, html[data-tema=scuro] .form-label, html[data-tema=scuro] .card-title, html[data-tema=scuro] dt, html[data-tema=scuro] dd, html[data-tema=scuro] th, html[data-tema=scuro] td, html[data-tema=scuro] p, html[data-tema=scuro] li {
  color: inherit;
}
html[data-tema=scuro] h1, html[data-tema=scuro] h2, html[data-tema=scuro] h3, html[data-tema=scuro] h4, html[data-tema=scuro] h5, html[data-tema=scuro] h6,
html[data-tema=scuro] .h1, html[data-tema=scuro] .h2, html[data-tema=scuro] .h3, html[data-tema=scuro] .h4, html[data-tema=scuro] .h5, html[data-tema=scuro] .h6 {
  color: var(--op-ink);
}
html[data-tema=scuro] a:not(.btn):not(.dropdown-item):not(.sidebar-link):not(.sidebar-sublink):not(.sidebar-logout) {
  color: var(--op-primary);
}
html[data-tema=scuro] .card,
html[data-tema=scuro] .card-body,
html[data-tema=scuro] .card-footer,
html[data-tema=scuro] .bg-white,
html[data-tema=scuro] .modal-content,
html[data-tema=scuro] .teo-modal-dialog,
html[data-tema=scuro] .teo-modal-header,
html[data-tema=scuro] .teo-modal-footer,
html[data-tema=scuro] .dropdown-menu,
html[data-tema=scuro] .options-menu,
html[data-tema=scuro] .list-group-item,
html[data-tema=scuro] .accordion-item,
html[data-tema=scuro] .accordion-button,
html[data-tema=scuro] .popover,
html[data-tema=scuro] .tooltip-inner {
  background-color: var(--op-surface) !important;
  color: var(--op-ink);
  border-color: var(--op-line);
}
html[data-tema=scuro] .options-menu::before {
  background-color: var(--op-surface) !important;
}
html[data-tema=scuro] .bg-light,
html[data-tema=scuro] .table-light,
html[data-tema=scuro] .table-light > *,
html[data-tema=scuro] .quick-info-box {
  background-color: var(--op-surface-2) !important;
  color: var(--op-ink) !important;
}
html[data-tema=scuro] .shadow-sm,
html[data-tema=scuro] .shadow {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}
html[data-tema=scuro] .text-secondary,
html[data-tema=scuro] .text-muted,
html[data-tema=scuro] .form-text,
html[data-tema=scuro] .breadcrumb-trail,
html[data-tema=scuro] .activity-time,
html[data-tema=scuro] .quick-info-label {
  color: var(--op-muted) !important;
}
html[data-tema=scuro] .card .card-body .card-title,
html[data-tema=scuro] .card .card-body .card-text,
html[data-tema=scuro] .card .card-body h5,
html[data-tema=scuro] .card .card-body h6,
html[data-tema=scuro] .card-title,
html[data-tema=scuro] .card-text {
  color: var(--op-ink) !important;
}
html[data-tema=scuro] .text-dark,
html[data-tema=scuro] .text-body,
html[data-tema=scuro] .text-black {
  color: var(--op-ink) !important;
}
html[data-tema=scuro] .text-primary {
  color: var(--op-primary) !important;
}
html[data-tema=scuro] .text-danger {
  color: var(--op-bad) !important;
}
html[data-tema=scuro] .text-success {
  color: var(--op-ok) !important;
}
html[data-tema=scuro] hr {
  border-color: var(--op-line);
  opacity: 1;
}
html[data-tema=scuro] .table {
  --bs-table-bg: var(--op-surface);
  --bs-table-color: var(--op-ink);
  --bs-table-border-color: var(--op-line);
  --bs-table-striped-bg: var(--op-surface-2);
  --bs-table-hover-bg: var(--op-surface-2);
  --bs-table-hover-color: var(--op-ink);
  color: var(--op-ink);
  border-color: var(--op-line);
}
html[data-tema=scuro] .table > :not(caption) > * > * {
  background-color: var(--op-surface);
  color: var(--op-ink);
  border-color: var(--op-line);
}
html[data-tema=scuro] .form-control,
html[data-tema=scuro] .form-select,
html[data-tema=scuro] .input-group-text,
html[data-tema=scuro] input[type=text],
html[data-tema=scuro] input[type=search],
html[data-tema=scuro] input[type=email],
html[data-tema=scuro] input[type=tel],
html[data-tema=scuro] input[type=date],
html[data-tema=scuro] input[type=time],
html[data-tema=scuro] input[type=number],
html[data-tema=scuro] input[type=password],
html[data-tema=scuro] textarea,
html[data-tema=scuro] select {
  background-color: var(--op-surface);
  color: var(--op-ink);
  border-color: var(--op-field) !important;
}
html[data-tema=scuro] .form-control::placeholder,
html[data-tema=scuro] textarea::placeholder,
html[data-tema=scuro] input::placeholder {
  color: var(--op-muted);
  opacity: 1;
}
html[data-tema=scuro] .form-control:disabled,
html[data-tema=scuro] .form-select:disabled {
  background-color: var(--op-surface-2);
  color: var(--op-muted);
}
html[data-tema=scuro] .form-check-input {
  background-color: var(--op-surface);
  border-color: var(--op-field);
}
html[data-tema=scuro] .form-check-input:checked {
  background-color: var(--op-primary);
  border-color: var(--op-primary);
}
html[data-tema=scuro] .btn-primary,
html[data-tema=scuro] .btn-primary:hover,
html[data-tema=scuro] .btn-primary:focus {
  background-color: var(--op-primary);
  border-color: var(--op-primary);
  color: var(--op-primary-ink);
}
html[data-tema=scuro] .btn-primary:disabled,
html[data-tema=scuro] .btn-primary.disabled {
  background-color: var(--op-primary-soft);
  border-color: var(--op-primary-soft);
  color: var(--op-muted);
}
html[data-tema=scuro] .btn-outline-primary {
  color: var(--op-primary);
  border-color: var(--op-primary);
  box-shadow: inset 0 0 0 2px var(--op-primary);
  background-color: transparent;
}
html[data-tema=scuro] .btn-outline-primary:hover, html[data-tema=scuro] .btn-outline-primary.active {
  background-color: var(--op-primary);
  color: var(--op-primary-ink);
}
html[data-tema=scuro] .btn-outline-secondary,
html[data-tema=scuro] .btn-outline-dark,
html[data-tema=scuro] .btn-outline-light {
  color: var(--op-ink);
  border-color: var(--op-line);
  box-shadow: inset 0 0 0 2px var(--op-line);
  background-color: transparent;
}
html[data-tema=scuro] .btn-outline-secondary:hover,
html[data-tema=scuro] .btn-outline-dark:hover,
html[data-tema=scuro] .btn-outline-light:hover {
  background-color: var(--op-surface-2);
  color: var(--op-ink);
}
html[data-tema=scuro] .btn-outline-success {
  color: var(--op-ok);
  box-shadow: inset 0 0 0 2px var(--op-ok);
}
html[data-tema=scuro] .btn-outline-danger {
  color: var(--op-bad);
  box-shadow: inset 0 0 0 2px var(--op-bad);
}
html[data-tema=scuro] .btn-outline-warning {
  color: var(--op-warn);
  box-shadow: inset 0 0 0 2px var(--op-warn);
}
html[data-tema=scuro] .btn-link {
  color: var(--op-primary);
}
html[data-tema=scuro] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
html[data-tema=scuro] .dropdown-item {
  color: var(--op-ink);
}
html[data-tema=scuro] .dropdown-item:hover, html[data-tema=scuro] .dropdown-item:focus {
  background-color: var(--op-surface-2);
  color: var(--op-ink);
}
html[data-tema=scuro] .alert-info {
  background-color: var(--op-primary-soft);
  color: var(--op-ink);
  border-color: var(--op-primary);
}
html[data-tema=scuro] .alert-warning {
  background-color: var(--op-warn-soft);
  color: var(--op-ink);
  border-color: var(--op-warn);
}
html[data-tema=scuro] .alert-danger {
  background-color: var(--op-bad-soft);
  color: var(--op-ink);
  border-color: var(--op-bad);
}
html[data-tema=scuro] .alert-success {
  background-color: var(--op-ok-soft);
  color: var(--op-ink);
  border-color: var(--op-ok);
}
html[data-tema=scuro] .alert-link {
  color: var(--op-ink);
}
html[data-tema=scuro] .badge.bg-light,
html[data-tema=scuro] .badge.text-bg-light {
  background-color: var(--op-surface-2) !important;
  color: var(--op-ink) !important;
}
html[data-tema=scuro] .page-link {
  background-color: var(--op-surface);
  color: var(--op-primary);
  border-color: var(--op-line);
}
html[data-tema=scuro] .page-item.active .page-link {
  background-color: var(--op-primary);
  color: var(--op-primary-ink);
}
html[data-tema=scuro] .nav-tabs .nav-link {
  color: var(--op-muted);
}
html[data-tema=scuro] .nav-tabs .nav-link.active {
  background-color: var(--op-surface);
  color: var(--op-primary);
}
html[data-tema=scuro] .app-sidebar,
html[data-tema=scuro] .app-sidebar-mobile {
  background: linear-gradient(180deg, #123a63 0%, #0b1f36 100%) !important;
}
html[data-tema=scuro] .icon:not(.icon-white):not(.icon-primary) {
  fill: currentColor;
}
html[data-tema=scuro] .leaflet-container {
  background: var(--op-surface-2);
}
html[data-tema=scuro] .leaflet-bar a,
html[data-tema=scuro] .leaflet-control-zoom a {
  background-color: var(--op-surface);
  color: var(--op-ink);
  border-color: var(--op-line);
}

@media (prefers-color-scheme: dark) {
  html:not([data-tema=chiaro]) {
    color-scheme: dark;
    --op-bg: #0e141b;
    --op-surface: #161f29;
    --op-surface-2: #1b2633;
    --op-ink: #e7edf4;
    --op-muted: #9aa8b8;
    --op-line: #2a3644;
    --op-field: #7d8b9b;
    --op-primary: #5aa6f0;
    --op-primary-ink: #0e141b;
    --op-primary-soft: #14293f;
    --op-ok: #5fc48a;
    --op-ok-soft: #12291c;
    --op-warn: #f0b35a;
    --op-warn-soft: #2d2210;
    --op-bad: #f08080;
    --op-bad-soft: #2f1515;
    --op-note: #b89af0;
    --op-note-soft: #221a33;
    --bs-body-bg: var(--op-bg);
    --bs-body-color: var(--op-ink);
    --bs-border-color: var(--op-line);
    --bs-secondary-color: var(--op-muted);
    --bs-primary: var(--op-primary);
    --bs-link-color: var(--op-primary);
  }
  html:not([data-tema=chiaro]) body {
    background-color: var(--op-bg);
    color: var(--op-ink);
  }
  html:not([data-tema=chiaro]) .app-content,
  html:not([data-tema=chiaro]) main#main-content {
    background-color: var(--op-bg);
  }
  html:not([data-tema=chiaro]) h1, html:not([data-tema=chiaro]) h2, html:not([data-tema=chiaro]) h3, html:not([data-tema=chiaro]) h4, html:not([data-tema=chiaro]) h5, html:not([data-tema=chiaro]) h6,
  html:not([data-tema=chiaro]) .h1, html:not([data-tema=chiaro]) .h2, html:not([data-tema=chiaro]) .h3, html:not([data-tema=chiaro]) .h4, html:not([data-tema=chiaro]) .h5, html:not([data-tema=chiaro]) .h6,
  html:not([data-tema=chiaro]) label, html:not([data-tema=chiaro]) legend, html:not([data-tema=chiaro]) .form-label, html:not([data-tema=chiaro]) .card-title, html:not([data-tema=chiaro]) dt, html:not([data-tema=chiaro]) dd, html:not([data-tema=chiaro]) th, html:not([data-tema=chiaro]) td, html:not([data-tema=chiaro]) p, html:not([data-tema=chiaro]) li {
    color: inherit;
  }
  html:not([data-tema=chiaro]) h1, html:not([data-tema=chiaro]) h2, html:not([data-tema=chiaro]) h3, html:not([data-tema=chiaro]) h4, html:not([data-tema=chiaro]) h5, html:not([data-tema=chiaro]) h6,
  html:not([data-tema=chiaro]) .h1, html:not([data-tema=chiaro]) .h2, html:not([data-tema=chiaro]) .h3, html:not([data-tema=chiaro]) .h4, html:not([data-tema=chiaro]) .h5, html:not([data-tema=chiaro]) .h6 {
    color: var(--op-ink);
  }
  html:not([data-tema=chiaro]) a:not(.btn):not(.dropdown-item):not(.sidebar-link):not(.sidebar-sublink):not(.sidebar-logout) {
    color: var(--op-primary);
  }
  html:not([data-tema=chiaro]) .card,
  html:not([data-tema=chiaro]) .card-body,
  html:not([data-tema=chiaro]) .card-footer,
  html:not([data-tema=chiaro]) .bg-white,
  html:not([data-tema=chiaro]) .modal-content,
  html:not([data-tema=chiaro]) .teo-modal-dialog,
  html:not([data-tema=chiaro]) .teo-modal-header,
  html:not([data-tema=chiaro]) .teo-modal-footer,
  html:not([data-tema=chiaro]) .dropdown-menu,
  html:not([data-tema=chiaro]) .options-menu,
  html:not([data-tema=chiaro]) .list-group-item,
  html:not([data-tema=chiaro]) .accordion-item,
  html:not([data-tema=chiaro]) .accordion-button,
  html:not([data-tema=chiaro]) .popover,
  html:not([data-tema=chiaro]) .tooltip-inner {
    background-color: var(--op-surface) !important;
    color: var(--op-ink);
    border-color: var(--op-line);
  }
  html:not([data-tema=chiaro]) .options-menu::before {
    background-color: var(--op-surface) !important;
  }
  html:not([data-tema=chiaro]) .bg-light,
  html:not([data-tema=chiaro]) .table-light,
  html:not([data-tema=chiaro]) .table-light > *,
  html:not([data-tema=chiaro]) .quick-info-box {
    background-color: var(--op-surface-2) !important;
    color: var(--op-ink) !important;
  }
  html:not([data-tema=chiaro]) .shadow-sm,
  html:not([data-tema=chiaro]) .shadow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  }
  html:not([data-tema=chiaro]) .text-secondary,
  html:not([data-tema=chiaro]) .text-muted,
  html:not([data-tema=chiaro]) .form-text,
  html:not([data-tema=chiaro]) .breadcrumb-trail,
  html:not([data-tema=chiaro]) .activity-time,
  html:not([data-tema=chiaro]) .quick-info-label {
    color: var(--op-muted) !important;
  }
  html:not([data-tema=chiaro]) .card .card-body .card-title,
  html:not([data-tema=chiaro]) .card .card-body .card-text,
  html:not([data-tema=chiaro]) .card .card-body h5,
  html:not([data-tema=chiaro]) .card .card-body h6,
  html:not([data-tema=chiaro]) .card-title,
  html:not([data-tema=chiaro]) .card-text {
    color: var(--op-ink) !important;
  }
  html:not([data-tema=chiaro]) .text-dark,
  html:not([data-tema=chiaro]) .text-body,
  html:not([data-tema=chiaro]) .text-black {
    color: var(--op-ink) !important;
  }
  html:not([data-tema=chiaro]) .text-primary {
    color: var(--op-primary) !important;
  }
  html:not([data-tema=chiaro]) .text-danger {
    color: var(--op-bad) !important;
  }
  html:not([data-tema=chiaro]) .text-success {
    color: var(--op-ok) !important;
  }
  html:not([data-tema=chiaro]) hr {
    border-color: var(--op-line);
    opacity: 1;
  }
  html:not([data-tema=chiaro]) .table {
    --bs-table-bg: var(--op-surface);
    --bs-table-color: var(--op-ink);
    --bs-table-border-color: var(--op-line);
    --bs-table-striped-bg: var(--op-surface-2);
    --bs-table-hover-bg: var(--op-surface-2);
    --bs-table-hover-color: var(--op-ink);
    color: var(--op-ink);
    border-color: var(--op-line);
  }
  html:not([data-tema=chiaro]) .table > :not(caption) > * > * {
    background-color: var(--op-surface);
    color: var(--op-ink);
    border-color: var(--op-line);
  }
  html:not([data-tema=chiaro]) .form-control,
  html:not([data-tema=chiaro]) .form-select,
  html:not([data-tema=chiaro]) .input-group-text,
  html:not([data-tema=chiaro]) input[type=text],
  html:not([data-tema=chiaro]) input[type=search],
  html:not([data-tema=chiaro]) input[type=email],
  html:not([data-tema=chiaro]) input[type=tel],
  html:not([data-tema=chiaro]) input[type=date],
  html:not([data-tema=chiaro]) input[type=time],
  html:not([data-tema=chiaro]) input[type=number],
  html:not([data-tema=chiaro]) input[type=password],
  html:not([data-tema=chiaro]) textarea,
  html:not([data-tema=chiaro]) select {
    background-color: var(--op-surface);
    color: var(--op-ink);
    border-color: var(--op-field) !important;
  }
  html:not([data-tema=chiaro]) .form-control::placeholder,
  html:not([data-tema=chiaro]) textarea::placeholder,
  html:not([data-tema=chiaro]) input::placeholder {
    color: var(--op-muted);
    opacity: 1;
  }
  html:not([data-tema=chiaro]) .form-control:disabled,
  html:not([data-tema=chiaro]) .form-select:disabled {
    background-color: var(--op-surface-2);
    color: var(--op-muted);
  }
  html:not([data-tema=chiaro]) .form-check-input {
    background-color: var(--op-surface);
    border-color: var(--op-field);
  }
  html:not([data-tema=chiaro]) .form-check-input:checked {
    background-color: var(--op-primary);
    border-color: var(--op-primary);
  }
  html:not([data-tema=chiaro]) .btn-primary,
  html:not([data-tema=chiaro]) .btn-primary:hover,
  html:not([data-tema=chiaro]) .btn-primary:focus {
    background-color: var(--op-primary);
    border-color: var(--op-primary);
    color: var(--op-primary-ink);
  }
  html:not([data-tema=chiaro]) .btn-primary:disabled,
  html:not([data-tema=chiaro]) .btn-primary.disabled {
    background-color: var(--op-primary-soft);
    border-color: var(--op-primary-soft);
    color: var(--op-muted);
  }
  html:not([data-tema=chiaro]) .btn-outline-primary {
    color: var(--op-primary);
    border-color: var(--op-primary);
    box-shadow: inset 0 0 0 2px var(--op-primary);
    background-color: transparent;
  }
  html:not([data-tema=chiaro]) .btn-outline-primary:hover, html:not([data-tema=chiaro]) .btn-outline-primary.active {
    background-color: var(--op-primary);
    color: var(--op-primary-ink);
  }
  html:not([data-tema=chiaro]) .btn-outline-secondary,
  html:not([data-tema=chiaro]) .btn-outline-dark,
  html:not([data-tema=chiaro]) .btn-outline-light {
    color: var(--op-ink);
    border-color: var(--op-line);
    box-shadow: inset 0 0 0 2px var(--op-line);
    background-color: transparent;
  }
  html:not([data-tema=chiaro]) .btn-outline-secondary:hover,
  html:not([data-tema=chiaro]) .btn-outline-dark:hover,
  html:not([data-tema=chiaro]) .btn-outline-light:hover {
    background-color: var(--op-surface-2);
    color: var(--op-ink);
  }
  html:not([data-tema=chiaro]) .btn-outline-success {
    color: var(--op-ok);
    box-shadow: inset 0 0 0 2px var(--op-ok);
  }
  html:not([data-tema=chiaro]) .btn-outline-danger {
    color: var(--op-bad);
    box-shadow: inset 0 0 0 2px var(--op-bad);
  }
  html:not([data-tema=chiaro]) .btn-outline-warning {
    color: var(--op-warn);
    box-shadow: inset 0 0 0 2px var(--op-warn);
  }
  html:not([data-tema=chiaro]) .btn-link {
    color: var(--op-primary);
  }
  html:not([data-tema=chiaro]) .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
  }
  html:not([data-tema=chiaro]) .dropdown-item {
    color: var(--op-ink);
  }
  html:not([data-tema=chiaro]) .dropdown-item:hover, html:not([data-tema=chiaro]) .dropdown-item:focus {
    background-color: var(--op-surface-2);
    color: var(--op-ink);
  }
  html:not([data-tema=chiaro]) .alert-info {
    background-color: var(--op-primary-soft);
    color: var(--op-ink);
    border-color: var(--op-primary);
  }
  html:not([data-tema=chiaro]) .alert-warning {
    background-color: var(--op-warn-soft);
    color: var(--op-ink);
    border-color: var(--op-warn);
  }
  html:not([data-tema=chiaro]) .alert-danger {
    background-color: var(--op-bad-soft);
    color: var(--op-ink);
    border-color: var(--op-bad);
  }
  html:not([data-tema=chiaro]) .alert-success {
    background-color: var(--op-ok-soft);
    color: var(--op-ink);
    border-color: var(--op-ok);
  }
  html:not([data-tema=chiaro]) .alert-link {
    color: var(--op-ink);
  }
  html:not([data-tema=chiaro]) .badge.bg-light,
  html:not([data-tema=chiaro]) .badge.text-bg-light {
    background-color: var(--op-surface-2) !important;
    color: var(--op-ink) !important;
  }
  html:not([data-tema=chiaro]) .page-link {
    background-color: var(--op-surface);
    color: var(--op-primary);
    border-color: var(--op-line);
  }
  html:not([data-tema=chiaro]) .page-item.active .page-link {
    background-color: var(--op-primary);
    color: var(--op-primary-ink);
  }
  html:not([data-tema=chiaro]) .nav-tabs .nav-link {
    color: var(--op-muted);
  }
  html:not([data-tema=chiaro]) .nav-tabs .nav-link.active {
    background-color: var(--op-surface);
    color: var(--op-primary);
  }
  html:not([data-tema=chiaro]) .app-sidebar,
  html:not([data-tema=chiaro]) .app-sidebar-mobile {
    background: linear-gradient(180deg, #123a63 0%, #0b1f36 100%) !important;
  }
  html:not([data-tema=chiaro]) .icon:not(.icon-white):not(.icon-primary) {
    fill: currentColor;
  }
  html:not([data-tema=chiaro]) .leaflet-container {
    background: var(--op-surface-2);
  }
  html:not([data-tema=chiaro]) .leaflet-bar a,
  html:not([data-tema=chiaro]) .leaflet-control-zoom a {
    background-color: var(--op-surface);
    color: var(--op-ink);
    border-color: var(--op-line);
  }
}
/* Colori dell'app operatore (riordino elenchi e schede, mockup validato
   2026-10-01): i componenti nuovi usano solo questi token, così valgono anche
   nel tema scuro. Contrasto AA verificato sulle coppie testo/sfondo. */
:root {
  --op-bg: #f5f6f8;
  --op-surface: #ffffff;
  --op-surface-2: #f7f9fc;
  --op-ink: #17212b;
  --op-muted: #5b6b7c;
  --op-line: #d5dde6;
  --op-field: #6b7a8a;
  --op-primary: #0066cc;
  --op-primary-ink: #ffffff;
  --op-primary-soft: #e6f0fa;
  --op-ok: #1c7c45;
  --op-ok-soft: #e5f4ea;
  --op-warn: #8a4b00;
  --op-warn-soft: #fff3df;
  --op-bad: #a32020;
  --op-bad-soft: #fbe9e9;
  --op-note: #6a3fb5;
  --op-note-soft: #f1ebfb;
}

:root {
  --bs-font-sans-serif: 'Titillium Web', sans-serif;
  /* Bootstrap-Italia usa warning rgb(153 92 0), troppo scuro: sostituito con amber più leggibile */
  --bs-warning-rgb: 205, 140, 0;
  --bs-warning: rgb(205 140 0);
}

body {
  font-family: "Titillium Web", sans-serif;
}

/* Bootstrap Italia non applica un bordo visibile alle select (border: 0):
   su sfondo bianco (card) risultano poco identificabili. */
.form-select {
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 4px;
}

/* Dropdown "Opzioni" (segnalazione-detail, segnalazioni-list): aperti/chiusi
   manualmente (signal + [class.show]), senza il JS/Popper di Bootstrap — le
   regole `.dropdown-menu-end[data-bs-popper]` e l'aspetto "a scheda" (notch,
   border-top-radius: 0) di Bootstrap Italia non si applicano/non sono adatte
   a un bottone isolato, quindi il menu viene ridisegnato come card autonoma. */
.options-menu {
  position: absolute;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  margin-top: 0.5rem !important;
  min-width: 14rem;
  background-color: #fff !important;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem !important;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
  padding: 0.5rem;
  transform: none !important;
  /* La "spunta" di Bootstrap Italia è posizionata di default a sinistra
     (left: 24px), pensata per dropdown allineati a sinistra. Questi menu sono
     allineati a destra (dropdown-menu-end), quindi la spostiamo a destra. */
}
.options-menu::before {
  left: auto !important;
  right: 24px !important;
  background-color: #fff !important;
}
.options-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
}
.options-menu .dropdown-item:hover, .options-menu .dropdown-item:focus {
  background-color: var(--bs-light);
}
.options-menu .dropdown-item .icon {
  fill: var(--bs-secondary-color);
}
.options-menu .dropdown-divider {
  margin: 0.25rem 0;
}

/* Contenitore delle tabelle larghe: posizionato, così anche gli elementi
   in position:absolute delle celle (es. testi .visually-hidden nelle
   intestazioni) restano dentro lo scorrimento invece di allargare la pagina
   (Rubrica scorreva in orizzontale a 1440 e 390 px, riordino elenchi E9). */
.table-responsive {
  position: relative;
}

/* Breadcrumb di navigazione usato nelle pagine del gestionale operatore */
.breadcrumb-trail {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
}
.breadcrumb-trail::before {
  content: "Sei in:";
  font-weight: 600;
  color: var(--bs-body-color);
}
.breadcrumb-trail a {
  color: var(--bs-primary);
  text-decoration: none;
  font-weight: 600;
}
.breadcrumb-trail a:hover {
  text-decoration: underline;
}
.breadcrumb-trail .separator {
  color: var(--bs-secondary-color);
}

body.a11y-highlight-headings :is(h1, h2, h3, h4, h5, h6) {
  outline: 3px solid #ffc107 !important;
  background-color: rgba(255, 193, 7, 0.15) !important;
}

body.a11y-highlight-links a {
  background-color: #fff3cd !important;
  color: #1a1a8c !important;
  outline: 2px solid #1a1a8c !important;
  text-decoration: underline !important;
}

body.a11y-dyslexia-font,
body.a11y-dyslexia-font * {
  font-family: "Comic Sans MS", "Comic Sans", Verdana, sans-serif !important;
  letter-spacing: 0.04em !important;
}

body.a11y-letter-spacing,
body.a11y-letter-spacing * {
  letter-spacing: 0.18em !important;
  word-spacing: 0.3em !important;
}

body.a11y-line-height,
body.a11y-line-height * {
  line-height: 2 !important;
}

body.a11y-font-weight,
body.a11y-font-weight * {
  font-weight: 700 !important;
}

body.a11y-contrast-dark {
  background-color: #121212 !important;
  color: #f5f5f5 !important;
}
body.a11y-contrast-dark * {
  background-color: #121212 !important;
  color: #f5f5f5 !important;
  border-color: #f5f5f5 !important;
}
body.a11y-contrast-dark a,
body.a11y-contrast-dark a:visited {
  color: #8ab4ff !important;
}
body.a11y-contrast-dark img,
body.a11y-contrast-dark svg {
  filter: brightness(0.9);
}

body.a11y-contrast-light {
  background-color: #fff !important;
  color: #000 !important;
}
body.a11y-contrast-light * {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
}
body.a11y-contrast-light a,
body.a11y-contrast-light a:visited {
  color: #0000ee !important;
}

body.a11y-contrast-high {
  background-color: #000 !important;
  color: #fff !important;
}
body.a11y-contrast-high * {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}
body.a11y-contrast-high a,
body.a11y-contrast-high a:visited {
  color: #ffff00 !important;
  text-decoration: underline !important;
}
body.a11y-contrast-high img,
body.a11y-contrast-high svg {
  filter: grayscale(100%) contrast(120%);
}

html.a11y-saturate-high {
  filter: saturate(1.8);
}

html.a11y-saturate-low {
  filter: saturate(0.4);
}

html.a11y-monochrome {
  filter: grayscale(1);
}

body.a11y-stop-animations,
body.a11y-stop-animations * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

body.a11y-large-cursor,
body.a11y-large-cursor * {
  cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24"%3E%3Cpath d="M3 2l18 9-7 2-2 7z" fill="black" stroke="white" stroke-width="1.5"/%3E%3C/svg%3E') 2 2, auto !important;
}

body.menu-mobile-aperto {
  overflow: hidden;
}