/* ============================================
   PeritoMap — Accordo conservativo + Acquisizione AI
   ============================================ */

/* ---- Accordo: lista nel dettaglio ---- */

/* Barra della sezione quando un accordo e' RIENTRATO (almeno un accordo
   firmato presente): da blu ad ARANCIONE, con la scritta accanto al titolo. */
.dettaglio-sezione-titolo.accordo-rientrato { background: #f57c00; }
.accordo-badge-rientrato {
  display: inline-block;
  background: #fff;
  color: #e65100;
  border-radius: 999px;
  padding: 1px 10px;
  margin-left: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  vertical-align: 1px;
}

.accordo-vuoto {
  color: var(--colore-testo-secondario);
  font-size: 0.9rem;
}

.accordo-lista {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-sm);
}

.accordo-scheda {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spazio-md);
  padding: var(--spazio-sm);
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo-leggero);
  border-radius: var(--raggio-bordo);
}

.accordo-anteprima img {
  width: 90px;
  height: 64px;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--colore-bordo-leggero);
  border-radius: var(--raggio-bordo-piccolo);
}

.accordo-info { display: flex; flex-direction: column; flex: 1; }
.accordo-importo { font-weight: 700; color: var(--colore-testo); }
.accordo-data { font-size: 0.8rem; color: var(--colore-testo-secondario); }

.accordo-invia {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---- Accordo: modale ---- */

.accordo-importo-lettere {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--colore-testo-secondario);
}

/* Box "link di firma attivo" nella sezione Accordo conservativo. */
.accordo-link-attesa {
  margin: 10px 0;
  padding: 10px 12px;
  background: #eaf2fb;
  border: 1px solid #c4d8f0;
  border-radius: 8px;
}
.accordo-link-testo { font-size: 0.9rem; font-weight: 600; color: #1558d6; margin-bottom: 8px; }

/* Link per la firma: input in chiaro + pulsante Copia accanto. */
.link-firma-riga {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.link-firma-riga input {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
}
.link-firma-riga .btn { flex-shrink: 0; }

/* Quota indennizzabile (sinistri ARD con franchigia): riquadro evidenziato. */
.accordo-indennizzabile {
  margin: var(--spazio-sm) 0 var(--spazio-md);
  padding: 10px 12px;
  background: #eef6ee;
  border: 1px solid #bcdcbc;
  border-radius: 8px;
}
.accordo-indennizzabile-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #2e7d32;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.accordo-indennizzabile-valore {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  color: #1a2330;
  margin-top: 2px;
}

.accordo-testo-preview {
  margin: var(--spazio-sm) 0;
  padding: var(--spazio-md);
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--colore-testo);
  background: var(--colore-sfondo-secondario);
  border: 1px solid var(--colore-bordo-leggero);
  border-radius: var(--raggio-bordo);
  max-height: 200px;
  overflow-y: auto;
}

.accordo-firme {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spazio-md);
}

@media (max-width: 600px) {
  .accordo-firme { grid-template-columns: 1fr; }
}

/* ---- Modale XL (acquisizione) ---- */

.modale-xl {
  max-width: 960px;
  width: 96%;
}

.acq-corpo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spazio-lg);
}

@media (max-width: 720px) {
  .acq-corpo { grid-template-columns: 1fr; }
}

/* ---- Due zone di import: SOLO INCARICO / SOLO ALLEGATI ---- */
.acq-zona {
  border: 1px solid var(--colore-bordo);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: var(--spazio-md);
}
.acq-zona-incarico { border-left: 4px solid var(--colore-primario); }
.acq-zona-allegati { border-left: 4px solid #90a4ae; }
.acq-zona-tit {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.acq-zona-tit small {
  display: inline-block;
  margin-left: 6px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--colore-testo-secondario);
}

/* ---- Dropzone ---- */

.acq-cartella {
  margin-bottom: var(--spazio-md);
}

.acq-cartella-btn {
  width: 100%;
}

.acq-cartella-hint {
  font-size: 13px;
  color: var(--colore-testo-secondario);
  margin: var(--spazio-sm) 0 0;
}

.acq-cartella-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  margin-top: var(--spazio-sm);
}

.acq-cartella-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-sm);
  padding: 6px 10px;
  border: 1px solid var(--colore-bordo-leggero);
  border-radius: var(--raggio-bordo);
  background: var(--colore-sfondo-secondario);
}

.acq-cartella-nome {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acq-cartella-item .btn {
  flex-shrink: 0;
}

.acq-cartella-sep {
  text-align: center;
  font-size: 12px;
  color: var(--colore-testo-secondario);
  margin: var(--spazio-md) 0 var(--spazio-sm);
  position: relative;
}

.acq-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spazio-sm);
  padding: var(--spazio-xl);
  text-align: center;
  color: var(--colore-testo-secondario);
  border: 2px dashed var(--colore-bordo);
  border-radius: var(--raggio-bordo);
  background: var(--colore-sfondo-secondario);
  transition: var(--transizione);
}

.acq-dropzone.acq-dragover {
  border-color: var(--colore-primario);
  background: var(--colore-primario-chiaro);
}

.acq-miniature {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-sm);
  margin: var(--spazio-sm) 0;
}

.acq-mini {
  position: relative;
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.acq-mini img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--raggio-bordo-piccolo);
  border: 1px solid var(--colore-bordo-leggero);
}

.acq-mini-pdf {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--colore-errore);
  background: var(--colore-errore-chiaro);
  border-radius: var(--raggio-bordo-piccolo);
}

.acq-mini-nome {
  font-size: 0.68rem;
  color: var(--colore-testo-secondario);
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acq-mini-categoria {
  margin-top: 4px;
  max-width: 92px;
  font-size: 0.68rem;
  padding: 2px 4px;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-sm);
  background: #fff;
}

.acq-mini-rimuovi {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: var(--colore-errore);
  color: #fff;
  cursor: pointer;
  line-height: 1;
}

/* ---- Nota stato AI ---- */

.acq-nota {
  margin-top: var(--spazio-sm);
  font-size: 0.85rem;
  min-height: 1.2em;
}
.acq-nota-info { color: var(--colore-info); }
.acq-nota-successo { color: var(--colore-successo); }
.acq-nota-avviso { color: var(--colore-avviso); }
.acq-nota-errore { color: var(--colore-errore); }

.acq-form-titolo {
  margin: 0 0 var(--spazio-sm);
  font-size: 0.95rem;
  color: var(--colore-testo);
}

/* ---- Campi precompilati dall'AI ---- */

.campo-ai-precompilato {
  border-color: var(--colore-successo) !important;
  background: var(--colore-successo-chiaro);
}

.campo-ai-incerto {
  border-color: var(--colore-avviso) !important;
  background: var(--colore-avviso-chiaro);
}

/* ---- Gestione template ---- */

.tmpl-lista { display: flex; flex-direction: column; gap: var(--spazio-xs); margin-bottom: var(--spazio-sm); }

.tmpl-voce {
  display: flex;
  align-items: center;
  gap: var(--spazio-sm);
  padding: var(--spazio-sm);
  background: var(--colore-sfondo-secondario);
  border: 1px solid var(--colore-bordo-leggero);
  border-radius: var(--raggio-bordo-piccolo);
}

.tmpl-voce-info { display: flex; flex-direction: column; flex: 1; }
.tmpl-voce-nome { font-weight: 600; color: var(--colore-testo); }
.tmpl-voce-comp { font-size: 0.8rem; color: var(--colore-testo-secondario); }

.tmpl-segnaposto {
  font-size: 0.78rem;
  color: var(--colore-testo-secondario);
  word-break: break-word;
}

.toggle-riga {
  display: flex;
  align-items: center;
  gap: var(--spazio-sm);
  margin: var(--spazio-sm) 0;
  font-size: 0.9rem;
  color: var(--colore-testo);
  cursor: pointer;
}

/* === Tracciabilità firma (registro attività, stile Dropbox Sign) === */
.accordo-traccia {
  flex-basis: 100%;
  width: 100%;
  margin-top: var(--spazio-sm);
  border-top: 1px solid var(--colore-bordo-leggero);
  padding-top: var(--spazio-sm);
}
.accordo-traccia > summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--colore-primario);
  list-style: none;
}
.accordo-traccia > summary::-webkit-details-marker { display: none; }
.traccia-lista {
  margin: var(--spazio-sm) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.traccia-lista li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
  background: var(--colore-sfondo-secondario);
  border-left: 3px solid var(--colore-primario);
  border-radius: 4px;
}
.traccia-att { font-weight: 600; font-size: 0.82rem; }
.traccia-quando { font-size: 0.78rem; color: var(--colore-testo-secondario); }
.traccia-meta { font-size: 0.72rem; color: var(--colore-testo-secondario); font-family: monospace; }
.traccia-nota { font-size: 0.7rem; color: var(--colore-testo-secondario); margin-top: 6px; }

/* ---- Finestra "Invia il modulo firmato" (email / WhatsApp) ---- */
.invio-accordo-intro {
  margin: 0 0 var(--spazio-md);
  color: var(--colore-testo-secondario);
  font-size: 0.9rem;
}
#modale-invio-accordo .btn-grande { width: 100%; margin-top: var(--spazio-sm); }
.invio-accordo-sep {
  text-align: center;
  color: var(--colore-testo-secondario);
  font-size: 0.82rem;
  margin: var(--spazio-md) 0 2px;
  position: relative;
}

/* ---- Vista "Modelli" (tabella per tipologia/compagnia) ---- */
.modelli-filtri {
  display: flex;
  gap: var(--spazio-sm);
  flex-wrap: wrap;
  margin-bottom: var(--spazio-md);
}
.modelli-filtri .campo-select { flex: 1; min-width: 140px; }
.modelli-tab {
  width: 100%;
  border-collapse: collapse;
  background: var(--colore-superficie);
  border-radius: var(--raggio-bordo);
  overflow: hidden;
  box-shadow: var(--ombra-leggera);
}
.modelli-tab th, .modelli-tab td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--colore-bordo);
  font-size: 0.9rem;
  vertical-align: middle;
}
.modelli-tab th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--colore-testo-secondario);
  background: var(--colore-sfondo);
}
.modelli-tab tbody tr:last-child td { border-bottom: none; }
.modelli-tab td:nth-child(3) { font-weight: 600; }
.modelli-azioni { white-space: nowrap; text-align: right; }
.modelli-azioni .btn-icona { vertical-align: middle; }

/* ---- Moduli per compagnia (tendina per funzione) + badge tabella ---- */
.compagnia-moduli-lista {
  display: grid;
  grid-template-columns: minmax(150px, 240px) 1fr;
  gap: 8px 16px;
  align-items: center;
  margin: 6px 0;
}
/* Ogni riga "diventa" due celle della griglia: colonna sinistra = tipo modulo,
   colonna destra = modello selezionabile, allineate tra le righe. */
.compagnia-modulo-riga { display: contents; }
.compagnia-modulo-funzione { font-weight: 600; }
.compagnia-modulo-riga .campo-select { width: 100%; min-width: 0; }
@media (max-width: 520px) {
  .compagnia-moduli-lista { grid-template-columns: 1fr; gap: 4px 0; }
  .compagnia-modulo-funzione { margin-top: 6px; }
}
.modelli-badge {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--colore-primario);
  background: var(--colore-sfondo);
  padding: 1px 7px;
  border-radius: 999px;
  vertical-align: middle;
}

/* ---- Gestione tipologie (rinomina/elimina) ---- */
.tipologia-riga {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--colore-bordo, #e6e6e6);
}
.tipologia-riga:last-child { border-bottom: none; }
.tipologia-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.tipologia-nome { font-weight: 600; }
.tipologia-usi {
  font-size: 0.78rem;
  color: var(--colore-testo-secondario);
}
.tipologia-azioni {
  white-space: nowrap;
  text-align: right;
  display: flex;
  align-items: center;
  gap: 4px;
}