/* ============================================
   PeritoMap — Stili Incarichi (Modulo 2)
   Lista, dettaglio, form, filtri, workflow
   ============================================ */

/* ---- Vista header con contatore ---- */

/* La vista incarichi gestisce il padding internamente */
#vista-incarichi {
  padding: 0;
}

/* Sovrascrive .vista-header di peritomap.css solo nella vista incarichi */
#vista-incarichi .vista-header {
  padding: var(--spazio-sm) var(--spazio-md);
  margin-bottom: 0;
  gap: var(--spazio-sm);
}

.vista-header-sx {
  display: flex;
  align-items: center;
  gap: var(--spazio-sm);
}

.vista-header-sx h2 {
  margin: 0;
  font-size: 1.25rem;
}

.vista-header-dx {
  display: flex;
  align-items: center;
  gap: var(--spazio-xs);
}

.contatore-badge {
  font-size: 0.75rem;
  color: var(--colore-testo-secondario);
  background: var(--colore-sfondo-secondario);
  padding: 2px 8px;
  border-radius: 12px;
}

/* ---- Barra ricerca ---- */

.barra-ricerca {
  display: flex;
  align-items: center;
  gap: var(--spazio-sm);
  margin: 0 var(--spazio-md) var(--spazio-sm);
  padding: var(--spazio-sm) var(--spazio-md);
  background: var(--colore-sfondo-secondario);
  border-radius: var(--raggio-bordo);
  border: 1px solid var(--colore-bordo);
}

.barra-ricerca svg {
  flex-shrink: 0;
  color: var(--colore-testo-secondario);
}

.barra-ricerca input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 0.9rem;
  color: var(--colore-testo);
}

.barra-ricerca input::placeholder {
  color: var(--colore-testo-secondario);
}

/* ---- Pannello filtri ---- */

.pannello-filtri {
  margin: 0 var(--spazio-md) var(--spazio-sm);
  padding: var(--spazio-md);
  background: var(--colore-sfondo-secondario);
  border-radius: var(--raggio-bordo);
  border: 1px solid var(--colore-bordo);
}

.filtri-griglia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spazio-sm);
}

/* Campo filtro che occupa l'intera larghezza (es. toggle archiviati) */
.campo-filtro-largo {
  grid-column: 1 / -1;
}

.campo-filtro-largo .toggle-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--colore-testo);
  margin-bottom: 0;
}

.campo-filtro label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--colore-testo-secondario);
  margin-bottom: 2px;
}

.campo-filtro .campo-select {
  width: 100%;
  padding: 6px 8px;
  font-size: 0.85rem;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-bordo-piccolo);
  background: var(--colore-sfondo);
  color: var(--colore-testo);
}

/* ---- Lista incarichi ---- */

.lista-incarichi {
  padding: 0 var(--spazio-md) var(--spazio-md);
  display: flex;
  flex-direction: column;
  gap: var(--spazio-sm);
}

.skeleton-riga-alta {
  height: 100px;
}

/* ---- Card incarico ---- */

.scheda-incarico {
  background: var(--colore-sfondo);
  border-radius: var(--raggio-bordo);
  border: 1px solid var(--colore-bordo);
  padding: var(--spazio-md);
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.scheda-incarico:hover {
  border-color: var(--colore-primario);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.scheda-incarico:active {
  transform: scale(0.99);
}

.scheda-incarico-header {
  display: flex;
  align-items: center;
  gap: var(--spazio-sm);
  margin-bottom: var(--spazio-sm);
}

.scheda-incarico-stato {
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.scheda-incarico-priorita {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* Data appuntamento accanto al badge stato (solo stato "Appuntamento") */
.scheda-incarico-app {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  background: rgba(255, 152, 0, 0.18);
  color: #e65100;
}

.scheda-incarico-app svg {
  flex-shrink: 0;
}

.scheda-incarico-giorni {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--colore-testo-secondario);
}

.scheda-incarico-corpo {
  margin-bottom: var(--spazio-sm);
}

.scheda-incarico-nome {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--colore-testo);
}

.scheda-incarico-dettagli {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}

.scheda-incarico-tag {
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--colore-sfondo-secondario);
  color: var(--colore-testo-secondario);
  border: 1px solid var(--colore-bordo);
}

.scheda-incarico-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-sm);
  font-size: 0.8rem;
  color: var(--colore-testo-secondario);
}

.scheda-incarico-contatori {
  display: flex;
  gap: var(--spazio-md);
  font-size: 0.8rem;
  color: var(--colore-testo-secondario);
}

.scheda-incarico-contatori span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.testo-secondario {
  color: var(--colore-testo-secondario);
  font-style: italic;
}

/* ---- Barra ordinamento ---- */

.barra-ordina {
  display: flex;
  align-items: center;
  gap: var(--spazio-sm);
  margin-bottom: var(--spazio-sm);
}

.barra-ordina label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--colore-testo-secondario);
  white-space: nowrap;
}

.barra-ordina .campo-select {
  flex: 1;
  max-width: 340px;
}

/* ---- Scheda colorata per anzianita (stesso colore dello spillo) ---- */

/* Sfondo = colore del livello di anzianita, dalle stesse variabili CSS usate
   dagli spilli sulla mappa, cosi' lista e mappa restano sempre allineate. */
.scheda-incarico.anz-verde   { background: var(--anzianita-verde); }
.scheda-incarico.anz-giallo  { background: var(--anzianita-giallo); }
.scheda-incarico.anz-arancio { background: var(--anzianita-arancio); }
.scheda-incarico.anz-rosso   { background: var(--anzianita-rosso); }
.scheda-incarico.anz-viola   { background: var(--anzianita-viola); }
.scheda-incarico.anz-nero    { background: var(--anzianita-nero); }

.scheda-anzianita {
  border-color: rgba(0, 0, 0, 0.18);
}

/* Tema testo: sfondo scuro -> testo bianco (es. livello "nero"); sfondo
   chiaro (giallo/arancio) -> testo scuro. Garantisce sempre la leggibilita'. */
.scheda-incarico.anz-scuro  { color: #fff; }
.scheda-incarico.anz-chiaro { color: #202124; }

.scheda-incarico.anz-scuro .scheda-incarico-nome  { color: #fff; }
.scheda-incarico.anz-chiaro .scheda-incarico-nome { color: #202124; }

/* La priorita ha un colore inline: su sfondo colorato lo riportiamo al
   contrasto del tema per non renderlo illeggibile. */
.scheda-anzianita .scheda-incarico-priorita { color: inherit !important; }

/* Testo secondario / metadati / contatori / giorni -> versione attenuata
   del colore di contrasto (le icone usano currentColor, quindi seguono). */
.scheda-incarico.anz-scuro .scheda-incarico-meta,
.scheda-incarico.anz-scuro .scheda-incarico-contatori,
.scheda-incarico.anz-scuro .scheda-incarico-giorni,
.scheda-incarico.anz-scuro .testo-secondario {
  color: rgba(255, 255, 255, 0.85);
}
.scheda-incarico.anz-chiaro .scheda-incarico-meta,
.scheda-incarico.anz-chiaro .scheda-incarico-contatori,
.scheda-incarico.anz-chiaro .scheda-incarico-giorni,
.scheda-incarico.anz-chiaro .testo-secondario {
  color: rgba(0, 0, 0, 0.70);
}

/* Tag/chip: sfondo traslucido che funziona su qualsiasi colore */
.scheda-incarico.anz-scuro .scheda-incarico-tag {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.30);
}
.scheda-incarico.anz-chiaro .scheda-incarico-tag {
  background: rgba(0, 0, 0, 0.10);
  color: #202124;
  border-color: rgba(0, 0, 0, 0.20);
}

/* Badge stato: mantiene il proprio colore, ma con un alone che lo separa dal
   fondo (evita che "sparisca" quando i due colori coincidono). */
.scheda-incarico.anz-scuro .scheda-incarico-stato {
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.65);
}
.scheda-incarico.anz-chiaro .scheda-incarico-stato {
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.25);
}

/* Data appuntamento: traslucida sul colore della scheda (come i tag/chip),
   cosi' resta leggibile su qualsiasi sfondo di anzianita. */
.scheda-incarico.anz-scuro .scheda-incarico-app {
  background: rgba(255, 255, 255, 0.20);
  color: #fff;
}
.scheda-incarico.anz-chiaro .scheda-incarico-app {
  background: rgba(0, 0, 0, 0.12);
  color: #202124;
}

/* ---- Stato vuoto ---- */

.stato-vuoto {
  text-align: center;
  padding: var(--spazio-xxl) var(--spazio-md);
  color: var(--colore-testo-secondario);
}

.stato-vuoto p {
  font-size: 1.1rem;
  font-weight: 500;
  margin: var(--spazio-md) 0 var(--spazio-xs);
}

.stato-vuoto-sub {
  font-size: 0.85rem;
}

/* ---- Dettaglio header ---- */

.dettaglio-header {
  display: flex;
  align-items: center;
  gap: var(--spazio-sm);
  padding: var(--spazio-sm) var(--spazio-md);
  border-bottom: 1px solid var(--colore-bordo);
  position: sticky;
  top: 0;
  background: var(--colore-sfondo);
  z-index: 10;
}

.dettaglio-header h2 {
  flex: 1;
  margin: 0;
  font-size: 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dettaglio-azioni {
  display: flex;
  gap: var(--spazio-xs);
}

/* Zona "Elimina incarico": isolata in fondo, separata da tutto il resto, per
   evitare cancellazioni accidentali (prima il cestino era in alto vicino agli
   altri pulsanti / sotto al campanello). */
.dettaglio-elimina-zona {
  margin-top: var(--spazio-xl, 32px);
  padding-top: var(--spazio-lg, 24px);
  border-top: 1px solid var(--colore-bordo-leggero);
  display: flex;
  justify-content: center;
}
.dettaglio-elimina-zona .btn-pericolo {
  display: inline-flex;
  align-items: center;
}

.btn-icona {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;          /* IMPORTANTE: annulla il padding di .btn, altrimenti l'icona viene schiacciata a 0 */
  min-height: 0;       /* annulla min-height di .btn per un cerchio pulito */
  flex: 0 0 auto;      /* non comprimere il pulsante */
  border-radius: 50%;
  border: 1px solid var(--colore-bordo);
  background: var(--colore-sfondo-secondario);
  color: var(--colore-testo);
  cursor: pointer;
  transition: background 0.15s;
}

.btn-icona svg { flex: 0 0 auto; }

.btn-icona:hover {
  background: var(--colore-sfondo-secondario);
}

.btn-icona.btn-pericolo {
  color: var(--colore-errore);
}

.btn-icona.btn-pericolo:hover {
  background: rgba(217, 48, 37, 0.08);
}

/* ---- Dettaglio contenuto ---- */

.dettaglio-contenuto {
  padding: var(--spazio-md);
}

.dettaglio-sezione {
  margin-bottom: var(--spazio-lg);
}

/* ---- Barra azioni rapide in cima al dettaglio ---- */
/* Resta visibile mentre si scorre il dettaglio (sticky), cosi' le operazioni
   di campo piu' usate sono sempre a portata di pollice. */
.dettaglio-azioni-rapide-top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: var(--spazio-sm);
  margin: 0 0 var(--spazio-lg);
  padding: var(--spazio-sm);
  background: var(--colore-superficie, #fff);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-bordo);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.azione-rapida {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 64px;
  padding: 8px 4px;
  border: 1px solid var(--colore-bordo);
  border-radius: 10px;
  background: var(--colore-sfondo-secondario, #f5f5f5);
  color: var(--colore-testo);
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
}

.azione-rapida:active {
  transform: scale(0.96);
}

.azione-rapida svg {
  width: 22px;
  height: 22px;
}

/* Lo scatto foto e' l'azione principale dell'operatore sul campo: piena evidenza. */
.azione-rapida-foto {
  background: var(--colore-primario);
  border-color: var(--colore-primario);
  color: #fff;
}

/* Titolo di sezione a BANDA: attraversa tutta la pagina, cosi' le sezioni
   del dettaglio si distinguono a colpo d'occhio. */
.dettaglio-sezione-titolo {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #fff;
  background: var(--colore-primario);
  margin: 0 0 var(--spazio-sm);
  padding: 7px 12px;
  border-radius: 6px;
}

/* ---- Riepilogo "Dati incarico" a colpo d'occhio ---- */

.riepilogo-incarico {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.riep-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  font-size: 0.95rem;
}

.riep-compagnia {
  font-weight: 700;
  font-size: 1.05rem;
}

.riep-sinistro { font-weight: 700; }

.riep-tipo {
  margin-left: auto;
  color: var(--colore-errore);
  font-weight: 700;
  text-transform: uppercase;
}

.riep-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--colore-testo-secondario);
}

.riep-gg { font-weight: 700; }

.riep-gg-consegna { font-weight: 700; }

.riep-gg-consegna.scaduta { color: var(--colore-errore); }

.riep-danneggiato { font-weight: 600; }

.riep-indirizzo { color: var(--colore-testo-secondario); }

.riep-targa {
  font-weight: 700;
  letter-spacing: 1px;
  background: var(--colore-sfondo-secondario);
  border: 1px solid var(--colore-bordo);
  border-radius: 4px;
  padding: 1px 8px;
}

.riep-label-rossa {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #c62828;
}

.riep-secondarie {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--colore-testo-secondario);
}

/* Riga informativa dentro ai pulsanti rapidi (n. foto, data appuntamento) */
.azione-rapida-sub {
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.1;
  opacity: 0.8;
}

.dettaglio-stato-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-sm);
  margin-bottom: var(--spazio-md);
}

.badge-stato {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  padding: 4px 12px;
  border-radius: 14px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.badge-priorita {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  padding: 3px 10px;
  border-radius: 12px;
}

.dettaglio-giorni {
  font-size: 0.85rem;
  color: var(--colore-testo-secondario);
}

/* ---- Workflow stati ---- */

.workflow-stati {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: var(--spazio-sm) 0;
}

.workflow-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 2px solid var(--colore-bordo);
  border-radius: 20px;
  background: var(--colore-sfondo);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--colore-testo-secondario);
  transition: all 0.15s;
  white-space: nowrap;
}

.workflow-btn:hover {
  border-color: var(--colore-stato);
  color: var(--colore-stato);
}

.workflow-btn.attivo {
  border-color: var(--colore-stato);
  background: var(--colore-stato);
  color: #fff;
}

.workflow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--colore-stato);
}

.workflow-btn.attivo .workflow-dot {
  background: #fff;
}

/* ---- Dettaglio righe ---- */

.dettaglio-riga {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--spazio-sm) 0;
  border-bottom: 1px solid var(--colore-bordo-leggero, #f0f0f0);
  gap: var(--spazio-md);
}

.dettaglio-riga-label {
  font-size: 0.85rem;
  color: var(--colore-testo-secondario);
  flex-shrink: 0;
  min-width: 100px;
}

.dettaglio-riga-valore {
  font-size: 0.9rem;
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

.dettaglio-link {
  color: var(--colore-primario);
  text-decoration: none;
}

.dettaglio-link:hover {
  text-decoration: underline;
}

.dettaglio-riga.scaduto .dettaglio-riga-valore {
  color: var(--colore-errore);
  font-weight: 700;
}

/* ---- Operatore nel dettaglio ---- */

.dettaglio-operatore {
  display: flex;
  align-items: center;
  gap: var(--spazio-md);
  padding: var(--spazio-sm) 0;
}

.dettaglio-operatore-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--colore-primario);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.dettaglio-operatore-nome {
  font-weight: 600;
}

/* ---- Assegnazione operatore ---- */

.dettaglio-assegnazione {
  display: flex;
  gap: var(--spazio-sm);
  align-items: center;
  margin-top: var(--spazio-sm);
}

.dettaglio-assegnazione select {
  flex: 1;
}

/* ---- Contatori allegati ---- */

.dettaglio-contatori {
  display: flex;
  gap: var(--spazio-lg);
}

.dettaglio-contatore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.dettaglio-contatore-numero {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--colore-primario);
}

.dettaglio-contatore-label {
  font-size: 0.75rem;
  color: var(--colore-testo-secondario);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ---- Form incarico ---- */

.form-incarico {
  padding: var(--spazio-md);
}

.form-sezione {
  margin-bottom: var(--spazio-lg);
}

.form-sezione-titolo {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--colore-testo-secondario);
  margin: 0 0 var(--spazio-md);
  padding-bottom: var(--spazio-xs);
  border-bottom: 1px solid var(--colore-bordo);
}

.form-azioni {
  display: flex;
  gap: var(--spazio-md);
  padding: var(--spazio-md) 0 var(--spazio-xxl);
}

.form-azioni .btn {
  flex: 1;
}

/* ---- Select generico ---- */

.campo-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.9rem;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-bordo);
  background: var(--colore-sfondo);
  color: var(--colore-testo);
  appearance: auto;
}

.campo-select:focus {
  border-color: var(--colore-primario);
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}

/* ---- Responsive ---- */

@media (max-width: 480px) {
  .filtri-griglia {
    grid-template-columns: 1fr;
  }

  .workflow-stati {
    gap: 3px;
  }

  .workflow-btn {
    padding: 5px 8px;
    font-size: 0.65rem;
  }

  .workflow-label {
    display: none;
  }

  .workflow-dot {
    width: 12px;
    height: 12px;
  }

  .dettaglio-riga {
    flex-direction: column;
    gap: 2px;
  }

  .dettaglio-riga-valore {
    text-align: left;
  }

  .scheda-incarico-meta {
    flex-direction: column;
    gap: 2px;
  }
}

/* ---- Workflow label tooltip su mobile ---- */

@media (max-width: 480px) {
  .workflow-btn {
    position: relative;
  }

  .workflow-btn:active::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--colore-testo);
    color: var(--colore-sfondo);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    z-index: 20;
  }
}

/* ---- Conferma bozza importata ---- */
.bozza-conferma {
  margin-top: var(--spazio-sm);
  padding: var(--spazio-md);
  background: var(--colore-avviso-chiaro);
  border: 1px solid var(--colore-avviso);
  border-radius: var(--raggio-bordo);
}
.bozza-avviso {
  margin: 0 0 var(--spazio-sm);
  font-size: 0.9rem;
  color: var(--colore-testo);
}

/* ---- Riga appuntamento nel dettaglio ---- */
.appuntamento-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-sm);
  flex-wrap: wrap;
}
.appuntamento-valore { color: var(--colore-testo); font-weight: 600; }

/* Badge esito appuntamento */
.badge-esito {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

/* Nota appuntamento */
.appuntamento-nota {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: var(--colore-sfondo-secondario);
  border-left: 3px solid var(--colore-primario);
  border-radius: 4px;
  color: var(--colore-testo-secondario);
  font-size: 13px;
  white-space: pre-wrap;
}

/* Azioni rapide esito appuntamento */
.appuntamento-azioni-rapide {
  display: flex;
  gap: var(--spazio-sm);
  margin-top: 10px;
  flex-wrap: wrap;
}
.appuntamento-azioni-rapide .btn-esito-ok {
  border-color: #2e7d32;
  color: #2e7d32;
}
.appuntamento-azioni-rapide .btn-esito-ko {
  border-color: #c62828;
  color: #c62828;
}

/* ---- Storico (timeline attivita incarico) ---- */
.storico-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.storico-voce {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--colore-bordo);
}
.storico-voce:last-child { border-bottom: none; }
.storico-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 5px;
}
.storico-corpo { flex: 1 1 auto; min-width: 0; }
.storico-dettagli {
  color: var(--colore-testo);
  font-size: 14px;
  line-height: 1.35;
}
.storico-meta {
  color: var(--colore-testo-secondario);
  font-size: 12px;
  margin-top: 2px;
}

/* --- Incarichi senza posizione (geocodifica non riuscita) --- */
.scheda-incarico-nopos {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(229, 57, 53, 0.12);
  color: #c62828;
  font-size: 12px;
  font-weight: 600;
}
.scheda-incarico-nopos svg { flex: 0 0 auto; }

.dettaglio-nopos {
  border: 1px solid rgba(229, 57, 53, 0.35);
  background: rgba(229, 57, 53, 0.07);
  border-radius: 10px;
  padding: 12px;
}
.dettaglio-nopos-testo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--colore-testo);
  font-size: 13px;
  line-height: 1.4;
}
.dettaglio-nopos-testo svg { flex: 0 0 auto; color: #c62828; margin-top: 1px; }

/* --- Mini-mappa nel modale "Ubicazione" (posizionamento manuale spillo) --- */
.modub-mappa-wrap { margin-top: var(--spazio-sm); }
.modub-mappa-aiuto { margin: 0 0 6px; }
.modub-mappa {
  width: 100%;
  height: 260px;
  border-radius: 10px;
  border: 1px solid var(--colore-bordo);
  overflow: hidden;
  z-index: 0;
}
#modub-pos-esito { margin-top: 6px; }