/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #121212;
  --bg2:      #1E1E1E;
  --bg3:      #2A2A2A;
  --border:   #3A3A3A;
  --pri:      #1565C0;
  --pri-lt:   #1976D2;
  --pri-text: #90CAF9;
  --ok:       #2E7D32;
  --ok-lt:    #388E3C;
  --err:      #C62828;
  --err-lt:   #D32F2F;
  --del:      #5A1A1A;
  --del-lt:   #7B1F1F;
  --text:     #E0E0E0;
  --text-dim: #9E9E9E;
  --radius:   6px;
  --nav-h:    58px;
  --hdr-h:    52px;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

#header {
  position: sticky; top: 0; z-index: 100;
  height: var(--hdr-h);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
  gap: 8px;
}

.hdr-left { display: flex; align-items: center; gap: 8px; }
.hdr-logo { width: 36px; height: 36px; object-fit: contain; border-radius: 50%; }
.hdr-titles { display: flex; flex-direction: column; line-height: 1.1; }
.hdr-title { font-weight: 700; font-size: 16px; color: #fff; letter-spacing: .3px; }
.hdr-sub { font-size: 10px; color: #81C784; letter-spacing: .5px; text-transform: uppercase; }

.hdr-right { display: flex; align-items: center; gap: 6px; }

#mainContent {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 calc(var(--nav-h) + 8px) 0;
}

#bottomNav {
  position: sticky; bottom: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--bg2);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: stretch;
}

#msgBar {
  position: fixed; top: var(--hdr-h); left: 0; right: 0; z-index: 200;
  padding: 8px 16px;
  font-size: 14px;
  text-align: center;
  display: none;
}
#msgBar.ok  { background: var(--ok);  color: #fff; }
#msgBar.err { background: var(--err); color: #fff; }

/* ── Nav buttons ──────────────────────────────────────────────────────────── */
.nav-btn {
  flex: 1;
  background: none; border: none; color: var(--text-dim);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 4px 2px;
  cursor: pointer; font-size: 11px;
  transition: color .15s, background .15s;
}
.nav-btn:active { background: var(--bg3); }
.nav-btn.active { color: var(--pri-text); }
.nav-icon { font-size: 18px; line-height: 1; }
.nav-label { font-size: 10px; }

/* ── View card ────────────────────────────────────────────────────────────── */
.view-card {
  max-width: 700px;
  margin: 0 auto;
  padding: 16px 14px;
}

h2 { font-size: 17px; font-weight: 700; color: var(--pri-text); margin-bottom: 12px; }
h3 { font-size: 14px; font-weight: 600; color: var(--text-dim); margin: 10px 0 6px; text-transform: uppercase; letter-spacing: .5px; }

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

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-grid2 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  align-items: center;
  margin-bottom: 8px;
}
.form-grid3 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 8px;
  align-items: center;
  margin: 4px 0;
}

label { font-size: 13px; color: var(--text-dim); white-space: nowrap; }

.inp {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 9px 10px;
  font-size: 15px;
  outline: none;
  transition: border-color .15s;
}
.inp:focus { border-color: var(--pri-lt); }
.inp.num { font-family: 'Courier New', monospace; }

select.inp { appearance: none; -webkit-appearance: none; cursor: pointer; }

.hint { font-size: 12px; color: var(--text-dim); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  border: none; border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: filter .15s, background .15s;
  white-space: nowrap;
}
.btn:active { filter: brightness(.85); }

.btn-pri { background: var(--pri);    color: #fff; }
.btn-sec { background: var(--bg3);   color: var(--text-dim); border: 1px solid var(--border); }
.btn-ok  { background: var(--ok);    color: #fff; }
.btn-del { background: var(--del);   color: #E57373; padding: 6px 10px; font-size: 13px; }
.btn.small { padding: 7px 12px; font-size: 13px; }

.btn-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 12px 0 8px;
}

.tab-row {
  display: flex; gap: 4px; margin-bottom: 10px;
}
.tab-opt {
  flex: 1; padding: 8px; border: 1px solid var(--border);
  background: var(--bg3); color: var(--text-dim);
  border-radius: var(--radius); cursor: pointer; font-size: 13px;
}
.tab-opt.active { background: var(--pri); color: #fff; border-color: var(--pri); }

/* ── Result box ───────────────────────────────────────────────────────────── */
.result-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-top: 12px;
}

.res-tbl { width: 100%; border-collapse: collapse; }
.res-tbl td { padding: 5px 8px; font-size: 14px; }
.res-tbl td:first-child { color: var(--text-dim); width: 50%; }
.res-tbl td b { color: #FFF; }

.big-result { font-size: 24px; font-weight: 700; color: var(--pri-text); text-align: center; padding: 8px; }

.err-txt { color: #EF9A9A; font-size: 14px; }

/* ── Data table ───────────────────────────────────────────────────────────── */
.tbl-scroll { overflow-x: auto; }

.data-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-tbl th { background: var(--bg3); color: var(--text-dim); padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-tbl td { padding: 6px 8px; border-bottom: 1px solid #2A2A2A; font-family: 'Courier New', monospace; }
.data-tbl tr:hover td { background: var(--bg3); }
.closure-row td { font-family: inherit; color: var(--pri-text); background: var(--bg2) !important; }

/* ── Radiación rows ───────────────────────────────────────────────────────── */
.rad-row {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 8px;
}
.rad-row-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.sel-tipo { flex: 1; }
.rad-row-result {
  font-size: 13px; color: var(--pri-text);
  font-family: 'Courier New', monospace;
  margin-top: 4px; padding-top: 4px;
  border-top: 1px solid var(--border);
}

/* ── Resección rows ───────────────────────────────────────────────────────── */
.res-known-row, .res-obs-row {
  display: flex; gap: 6px; margin-bottom: 6px; align-items: center;
}
.res-known-row .inp, .res-obs-row .inp { flex: 1; }

/* ── Poligonal rows ───────────────────────────────────────────────────────── */
.pol-leg-row {
  display: flex; gap: 5px; margin-bottom: 5px; align-items: center;
}
.pol-leg-row .inp { flex: 1; min-width: 0; }
.leg-num { color: var(--text-dim); font-size: 12px; min-width: 20px; text-align: right; }

/* ── Points view ──────────────────────────────────────────────────────────── */
.pts-hdr, .pts-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.inp-proj { flex: 1; min-width: 120px; }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  width: 100%; max-width: 420px;
  max-height: 90dvh; overflow-y: auto;
}
.modal-title {
  font-weight: 700; font-size: 16px;
  color: var(--pri-text); margin-bottom: 12px;
}
.pick-row {
  padding: 10px 8px; border-radius: var(--radius);
  cursor: pointer; font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.pick-row:hover { background: var(--bg3); }

/* ── Header selects ─────────────────────────────────────────────────────── */
#header select.inp {
  padding: 5px 8px; font-size: 12px;
  width: auto; min-width: 60px;
  background: var(--bg3); border-color: var(--border);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (min-width: 540px) {
  .form-grid2 { grid-template-columns: 160px 1fr; }
  .pol-leg-row { flex-wrap: nowrap; }
}

@media (min-width: 700px) {
  #mainContent { padding-bottom: 16px; }
  #bottomNav { display: none; }
  #header { gap: 16px; }
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  #header, #bottomNav, .btn, .btn-row, .tab-row { display: none !important; }
  body { background: #fff; color: #000; }
  .result-box { border: 1px solid #ccc; }
}