/* assets/sopralluoghi.css */
.sf-sopralluoghi-wrap{ max-width: 980px; margin: 0 auto; padding: 14px; box-sizing: border-box; }
.sf-form{ background: #fff; border: 1px solid #e6e6e6; border-radius: 12px; padding: 14px; }
.sf-grid{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }
.sf-grid label{ display: block; font-size: 14px; }
.sf-grid label span{ display: block; margin-bottom: 6px; color: #111; }
.sf-grid input[type="text"], .sf-grid select, .sf-grid textarea{
  width: 100%; border: 1px solid #d9d9d9; border-radius: 10px; padding: 10px 10px; font-size: 14px; box-sizing: border-box;
}
.sf-nota{ grid-column: 1 / -1; }
.sf-upload{ margin-top: 12px; border-top: 1px dashed #e6e6e6; padding-top: 12px; }
.sf-upload-row{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.sf-file{
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid #d9d9d9; padding: 10px 14px; border-radius: 10px; cursor: pointer; user-select: none;
  height: 44px;
}
.sf-file input{ display:none; }
.sf-file span{ color:#111 !important; font-weight:700; }

.sf-audio-block{ display:flex; flex-direction:column; gap:6px; }
.sf-audio-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.sf-timer{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 72px; height: 44px; padding: 0 12px;
  border: 1px solid #e6e6e6; border-radius: 10px;
  font-weight: 800; color:#111; background:#fff;
}

.sf-audio-help{ font-size: 12px; color: #444; }

.sf-btn{
  border: 0; border-radius: 10px; padding: 10px 14px; cursor: pointer; font-size: 14px;
  height: 44px;
}
.sf-btn-secondary{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border: 1px solid #d9d9d9 !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  min-width: 92px;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.sf-btn-secondary:disabled{ opacity: .55 !important; cursor: not-allowed; }

.sf-btn-primary{ margin-top: 12px; width: 100%; padding: 12px 14px; height: auto; }
.sf-btn-tertiary{ border: 1px solid #d9d9d9; background: #fff; padding: 8px 10px; margin-left: 8px; height:auto; }

.sf-foto-preview{ margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; }
.sf-foto-thumb{ position: relative; width: 92px; height: 92px; border-radius: 10px; overflow: hidden; border: 1px solid #e6e6e6; background: #fafafa; }
.sf-foto-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-foto-thumb .sf-remove{
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(0,0,0,.6); color: #fff; font-weight: 700; line-height: 24px; padding: 0;
}

.sf-help{ margin-top: 10px; font-size: 13px; color: #444; }

.sf-anteprima{ margin-top: 14px; }
.sf-card{ border: 1px solid #e6e6e6; border-radius: 12px; padding: 14px; background: #fff; }
.sf-card header{ display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 10px; }
.sf-title{ font-size: 16px; font-weight: 800; }
.sf-sub{ font-size: 13px; color: #444; margin-top: 4px; }
.sf-logo{ font-size: 13px; color: #111; border: 1px solid #e6e6e6; border-radius: 10px; padding: 6px 10px; white-space: nowrap; }

.sf-row{ display: grid; grid-template-columns: 180px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f1f1; }
.sf-row.note{ align-items: start; }
.sf-row .k{ color: #222; font-size: 13px; }
.sf-row .v{ color: #111; font-size: 13px; word-break: break-word; }

.sf-foto-list{ display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
.sf-foto-list img{ width: 120px; height: 90px; object-fit: cover; border-radius: 10px; border: 1px solid #e6e6e6; }

.sf-audio-preview{ margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sf-audio-preview audio{ width: 320px; max-width: 100%; }

.sf-status{ margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.sf-status.ok{ border: 1px solid #cfe9cf; background: #f2fbf2; color: #1d6b1d; }
.sf-status.err{ border: 1px solid #f1c7c7; background: #fff1f1; color: #8b1f1f; }

@media (max-width: 980px){
  .sf-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px){
  .sf-grid{ grid-template-columns: 1fr; }
  .sf-row{ grid-template-columns: 1fr; }
}