:root {
  --navy: #0a1e36;
  --green: #7ed957;
  --bg: #f4f6f5;
  --border: #dde3e0;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--navy);
}

.hidden {
  display: none !important;
}

/* --- Login screen --- */

#login-screen {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
}

#login-form {
  width: 280px;
  background: #fff;
  border-radius: 12px;
  padding: 28px 24px;
}

#login-form h1 {
  margin: 0;
  font-size: 20px;
}

#login-submit {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: var(--green);
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  margin-top: 4px;
}

#login-feedback {
  min-height: 18px;
  font-size: 12px;
  color: #c0392b;
  margin: 8px 0 0;
}

#app {
  display: flex;
  height: 100vh;
}

#nav {
  width: 84px;
  flex-shrink: 0;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 16px 8px;
}

#nav-spacer {
  flex: 1;
}

#nav-brand {
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.nav-item {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  padding: 12px 4px;
  border-radius: 8px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.nav-item.active {
  background: var(--green);
  color: var(--navy);
  font-weight: 700;
}

.nav-icon {
  font-size: 18px;
}

#panel {
  width: 320px;
  flex-shrink: 0;
  padding: 24px 20px;
  background: var(--bg);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.subtitle {
  margin: 2px 0 20px;
  color: #667;
  font-size: 13px;
}

.field {
  margin-bottom: 14px;
}

.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #445;
}

.field input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}

.coords {
  font-size: 12px;
  color: #667;
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  line-height: 1.5;
}

#save {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: var(--green);
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

#save:disabled {
  background: #cdd4d1;
  color: #889;
  cursor: not-allowed;
}

#feedback {
  min-height: 18px;
  font-size: 12px;
  margin: 8px 0 0;
}

#feedback.error {
  color: #c0392b;
}

#feedback.ok {
  color: #1e7a34;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

#panel h2 {
  font-size: 13px;
  margin: 0 0 8px;
}

#location-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

#location-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

#location-list li:hover {
  color: #1e7a34;
}

#location-list li .radius {
  display: block;
  font-size: 11px;
  color: #889;
}

#location-list li .goto {
  display: block;
  font-size: 11px;
  color: #1e7a34;
  font-weight: 600;
  margin-top: 2px;
}

#map {
  flex: 1;
}

/* --- "Aprendido" section: live status + counts for the map's Cells/Locals
   layers, replacing the old fingerprints tables --- */

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}

#learned-live {
  font-size: 11px;
  color: #667;
}

#learned-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 4px;
}

#learned-count {
  margin: 0;
}

/* --- Legend for the map's marker layers --- */

#legend {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

#legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-location {
  background: var(--navy);
}

.legend-local {
  background: #f2994a;
}

.legend-cell-pin {
  background: #1e7a34;
}

.legend-cell {
  background: #2f80ed;
}

/* --- Responsive: phone-width screens (checked from a second phone) ---
   Stacks the sidebar nav on top instead of beside the content, and the map
   panel above the map instead of beside it, so nothing gets squeezed into
   an unusable sliver. Tables keep their natural width and scroll inside
   .table-wrap instead of overflowing the page. */
@media (max-width: 720px) {
  #login-form {
    width: 90vw;
    max-width: 320px;
  }

  #app {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  #nav {
    width: 100%;
    flex-direction: row;
    align-items: center;
    padding: 10px 12px;
    gap: 4px;
    overflow-x: auto;
  }

  #nav-brand {
    margin: 0 12px 0 0;
  }

  #nav-spacer {
    display: none;
  }

  .nav-item {
    flex-direction: row;
    padding: 8px 12px;
    white-space: nowrap;
    margin-bottom: 0;
  }

  #panel {
    width: 100%;
    max-height: 40vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  #map {
    min-height: 50vh;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}