/* ===== Reset ===== */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: Segoe UI, Arial, sans-serif;
  background: #f4f6f8;
  overflow: hidden;
}

/* ===== Header ===== */
.header {
  height: 56px;
  background: #2b716f;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  font-weight: bold;
  text-shadow: 2px 2px 2px #000;
  font-size: clamp(14px, 2.5vw, 20px);
  line-height: 1.15;
}

.header img {
  height: 30px;
  background: #fff;
  padding: 3px;
  border-radius: 4px;
}

.header div {
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
}

/* ===== App ===== */
main.app {
  height: calc(100% - 56px);
  padding: 16px;
}

.panel {
  height: 100%;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  overflow: hidden;
}

arcgis-map { height: 100%; }

/* ===== Responsive header móvil ===== */
@media (max-width: 600px) {
  .header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 10px;
    height: auto;
    font-size: clamp(13px, 4vw, 16px);
  }

  .header img { height: 22px; }
}

/* … sigue aquí TODO tu CSS de UI, filtros, toolbar, etc. */