/* Encabezado principal compacto */
.topbar {
  height:54px !important;
  min-height:54px;
  padding:0 16px !important;
  gap:10px;
}

.topbar .menu-toggle {
  width:34px;
  height:34px;
  border-radius:8px;
  font-size:19px;
}

.topbar .title {
  min-width:0;
  line-height:1.1;
}

.topbar .title h1 {
  margin:0;
  font-size:18px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.topbar .title span {
  display:block;
  margin-top:2px;
  font-size:10px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.topbar .top-actions {
  gap:6px;
  min-width:0;
}

.topbar .search {
  width:235px;
  height:34px;
  padding:6px 10px;
  border-radius:8px;
  font-size:11px;
}

.topbar .theme-switch {
  height:34px;
  border-radius:8px;
}

.topbar .theme-switch button {
  min-width:auto;
  padding:5px 8px;
  font-size:11px;
  line-height:1;
}

.topbar .primary {
  min-height:34px;
  padding:7px 11px;
  border-radius:8px;
  font-size:11px;
  line-height:1.1;
  white-space:nowrap;
}

/* Libera también parte del espacio debajo del encabezado */
.main > .content {
  padding-top:16px;
}

@media (max-width:1100px) {
  .topbar {
    padding:0 12px !important;
  }

  .topbar .search {
    width:190px;
  }
}

@media (max-width:760px) {
  .topbar {
    height:auto !important;
    min-height:56px;
    padding:7px 10px !important;
    gap:8px;
  }

  .topbar .menu-toggle {
    width:36px;
    height:36px;
    flex:0 0 36px;
  }

  .topbar .title {
    flex:1 1 auto;
  }

  .topbar .title h1 {
    font-size:17px;
  }

  .topbar .title span {
    max-width:220px;
    font-size:10px;
  }

  .topbar .top-actions {
    flex:0 0 auto;
  }

  .topbar .search {
    display:none;
  }

  .topbar .theme-switch {
    height:34px;
  }

  .topbar .theme-switch button {
    padding:5px 7px;
    font-size:10px;
  }

  .topbar .primary {
    min-height:34px;
    padding:7px 9px;
  }

  .main > .content {
    padding-top:12px;
  }
}

@media (max-width:520px) {
  .topbar {
    align-items:center;
  }

  .topbar .title span {
    max-width:145px;
  }

  .topbar .theme-switch button {
    padding:5px 6px;
  }

  /* En teléfonos pequeños se conserva el botón,
     pero se acorta su texto visualmente */
  .topbar .primary {
    max-width:96px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* Encabezado compacto exclusivo del mapa FTTH */
#ftth > .page-head {
  min-height:42px;
  margin:0 0 7px !important;
  padding:0 2px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

#ftth > .page-head > div:first-child {
  min-width:0;
  line-height:1.1;
}

#ftth > .page-head h2 {
  margin:0 !important;
  font-size:18px;
  line-height:1.1;
}

#ftth > .page-head p {
  margin:2px 0 0 !important;
  font-size:10px;
  line-height:1.15;
  color:var(--muted);
}

#ftth > .page-head > div:last-child {
  display:flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
}

#ftth > .page-head button {
  min-height:32px;
  padding:6px 10px;
  border-radius:7px;
  font-size:11px;
  line-height:1;
  white-space:nowrap;
}

#ftth > .ftth-shell {
  margin-top:0 !important;
}

@media (max-width:700px) {
  #ftth > .page-head {
    min-height:44px;
    gap:6px;
  }

  #ftth > .page-head h2 {
    font-size:16px;
  }

  #ftth > .page-head p {
    display:none;
  }

  #ftth > .page-head button {
    min-height:32px;
    padding:6px 8px;
    font-size:10px;
  }
}

@media (max-width:430px) {
  #ftth > .page-head {
    align-items:center;
  }

  #ftth > .page-head h2 {
    max-width:125px;
    font-size:15px;
  }

  #ftth > .page-head > div:last-child {
    gap:4px;
  }

  #ftth > .page-head button {
    padding:6px 7px;
  }
}