* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, sans-serif; background: #0f1419; color: #e8eaed; }
body { display: grid; grid-template-columns: 280px 1fr 360px; height: 100vh; overflow: hidden; }

.sidebar { padding: 16px; border-right: 1px solid #2a3441; background: #151b23; overflow-y: auto; }
.sidebar h1 { margin: 0; font-size: 1.05rem; }
.sub { color: #9aa5b1; font-size: 0.82rem; margin: 4px 0 12px; }
.status { font-size: 0.72rem; color: #6b7c8f; word-break: break-all; }

.steps { margin: 16px 0; font-size: 0.8rem; line-height: 1.45; }
.step { padding: 8px 10px; border-radius: 8px; margin-bottom: 6px; background: #1c2430; color: #9aa5b1; }
.step.active { background: #1a2f4a; color: #dbeafe; border: 1px solid #2563eb55; }

.btn { display: block; width: 100%; margin-bottom: 8px; padding: 10px; border-radius: 8px; border: 1px solid #3d5166; background: #1c2430; color: #e8eaed; cursor: pointer; font-size: 0.85rem; }
.btn.primary { background: #1d4ed8; border-color: #2563eb; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.btn-small { font-size: 0.78rem; padding: 7px; margin-top: -4px; }
.hidden { display: none !important; }
.btn-falda-active { background: #9a3412; border-color: #ea580c; }
.btn:hover { filter: brightness(1.08); }
.meta { font-size: 0.75rem; color: #9aa5b1; line-height: 1.4; }

.map-wrap { position: relative; min-width: 0; }
#map { width: 100%; height: 100%; }
.loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); font-weight: 600; z-index: 10; }
.loading.hidden { display: none; }

.panel { border-left: 1px solid #2a3441; padding: 16px; overflow-y: auto; background: #151b23; font-size: 0.82rem; }
.panel .empty { color: #6b7c8f; }
.panel .refined-meta { font-size: 0.78rem; line-height: 1.5; margin: 0 0 8px; }
.panel h2 { margin: 12px 0 8px; font-size: 1rem; }
.panel h2:first-child { margin-top: 0; }
.panel img.crop {
  width: 100%;
  min-height: 140px;
  border-radius: 8px;
  border: 1px solid #2a3441;
  margin: 8px 0;
  background: repeating-conic-gradient(#2a3441 0% 25%, #1c2430 0% 50%) 50% / 14px 14px;
  object-fit: contain;
}
.panel .crop-label { font-size: 0.7rem; color: #6b7c8f; margin: 4px 0 0; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chip { font-size: 0.7rem; padding: 3px 8px; border-radius: 999px; background: #1c2430; }
.chip-mat { background: #14532d; color: #bbf7d0; font-weight: 600; }
.chip-amianto { background: #7f1d1d; color: #fecaca; }
.btn-verify { margin-top: 6px; font-size: 0.75rem; padding: 7px; }

.pipe { list-style: none; margin: 0 0 8px; padding: 0; }
.pipe-step {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: baseline;
  gap: 2px 6px;
  padding: 5px 8px;
  margin-bottom: 4px;
  border-radius: 6px;
  background: #1c2430;
  font-size: 0.75rem;
}
.pipe-step .pipe-detail { grid-column: 2 / 4; color: #6b7c8f; font-size: 0.68rem; line-height: 1.35; }
.pipe-step .pipe-ms { color: #6b7c8f; font-size: 0.66rem; }
.pipe-ok .pipe-icon { color: #22c55e; }
.pipe-fallback .pipe-icon { color: #fbbf24; }
.pipe-fallback { background: #2a2410; }
.pipe-error .pipe-icon { color: #f87171; }
.pipe-error { background: #2a1616; }
img.crop-mat { max-width: 140px; min-height: 0; }

table { width: 100%; border-collapse: collapse; font-size: 0.72rem; margin-top: 8px; }
th, td { border-bottom: 1px solid #2a3441; padding: 5px 4px; text-align: left; }
th { color: #6b7c8f; }
.falda-hint { font-size: 0.72rem; color: #9aa5b1; margin: 6px 0 10px; line-height: 1.4; }
.falda-table input, .falda-table select {
  width: 100%;
  max-width: 72px;
  background: #0f1419;
  border: 1px solid #3d5166;
  color: #e8eaed;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 0.72rem;
}
.rating-ottimo { color: #22c55e; }
.rating-buono { color: #86efac; }
.rating-discreto { color: #fbbf24; }
.rating-sconsigliato { color: #f87171; }

.falda-debug {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #2a3441;
  font-size: 0.72rem;
  line-height: 1.45;
  max-height: 42vh;
  overflow-y: auto;
}
.falda-debug h3 { margin: 0 0 8px; font-size: 0.82rem; color: #dbeafe; }
.debug-empty, .debug-note { color: #9aa5b1; margin: 6px 0; }
.debug-note.warn { color: #fbbf24; }
.debug-summary { margin: 4px 0; color: #e8eaed; }
.debug-summary.preview { color: #fde68a; }
.debug-method { color: #6b7c8f; font-size: 0.66rem; }
.debug-table { width: 100%; font-size: 0.66rem; margin: 8px 0; }
.debug-table .edge-longest { background: #1a2f4a; color: #93c5fd; }
.debug-legend { font-size: 0.64rem; color: #6b7c8f; margin-top: 6px; }
.falda-debug code { font-size: 0.66rem; color: #7dd3fc; }

@media (max-width: 1100px) {
  body { grid-template-columns: 260px 1fr; }
  .panel { display: none; }
}