/* ═══════════════════════════════════════════════════════════════════
   geomapgis — Sistema de diseño
   Marca GeoMap (ver docs/marca.md): fondo crema, tinta casi negra, rojo de
   acción para el botón principal y bordó para enlaces y bordes activos.
   Esquinas rectas, bordes de 1 px y sin sombras. El semáforo (ámbar,
   naranja, carmín) queda reservado EXCLUSIVAMENTE a las alertas: el rojo
   de la marca nunca indica estado ni nivel.
   ═══════════════════════════════════════════════════════════════════ */

/* — Tipografías locales (licencia OFL en vendor/fonts/) — */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/fonts/archivo-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/fonts/archivo-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/fonts/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  /* — Superficies — */
  --s-app:        #F4F2ED;   /* crema: fondo general */
  --s-panel:      #F4F2ED;   /* paneles y barras */
  --s-card:       #F4F2ED;
  --s-sunken:     #E7E3DA;   /* crema hundida: zonas secundarias, listas */
  --s-hover:      #E7E3DA;
  --s-input:      #FFFFFF;
  --s-dark:       #081114;   /* pie y paneles oscuros */
  --s-dark-2:     #16262B;

  /* — Líneas — */
  --line:         #D4CFC4;
  --line-strong:  #C2BBAD;
  --line-on-dark: rgba(244, 242, 237, .15);

  /* — Tinta — */
  --ink:          #0C1518;
  --ink-2:        #4E5C61;
  --ink-3:        #8A979B;
  --ink-inv:      #F4F2ED;   /* texto crema sobre fondo oscuro o rojo */
  --ink-on-dark:  #D6DFE1;
  --ink-on-dark-2:#9FB2B7;
  --nav:          #2A3A3F;

  /* — Marca GeoMap — */
  --brand:        #C8102E;   /* rojo de acción: botón principal */
  --brand-600:    #A50D26;   /* bordó: enlaces, hover de botón, bordes activos */
  --brand-800:    #6E0819;   /* bordó oscuro: hover de enlaces */
  --brand-on-dark:#FF8C9F;   /* rosa sobre fondo oscuro */

  /* — Semáforo (solo alertas) — */
  --lv1:          #E0A526;   /* Bajo   */
  --lv1-bg:       #FDF4E0;
  --lv2:          #DE6F31;   /* Medio  */
  --lv2-bg:       #FCEDE3;
  --lv3:          #C22E2E;   /* Alto   */
  --lv3-bg:       #FBE9E9;

  /* — Estado — */
  --ok:           #1B8A5A;
  --ok-bg:        #E4F4EC;
  --warn:         #B26B00;
  --info:         var(--nav);

  /* — Tipografía — */
  /* Archivo para títulos, IBM Plex Sans para el texto y IBM Plex Mono para
     rótulos técnicos y cifras (en mayúsculas y espaciado, como en el sitio). */
  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --font-code:    var(--font-mono);

  /* — Métrica — */
  --topbar-h:     64px;
  --statusbar-h:  26px;
  --panel-l-w:    272px;
  --panel-r-w:    384px;
  --r-sm:         0;         /* esquinas rectas */
  --r:            0;
  --r-lg:         0;

  /* — Sombra: la marca no usa sombras — */
  --sh-1: none;
  --sh-2: none;
  --sh-3: none;
  --sh-pop: none;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--s-app);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-800); text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--s-sunken); }
:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }

/* ── Tipografía de apoyo ───────────────────────────────────────── */
.t-label {                       /* micro-etiqueta de sección (.mono del sitio) */
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.t-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
h1, h2, h3, h4, .t-display { font-family: var(--font-display); line-height: 1.06; letter-spacing: -.022em; }
.t-muted { color: var(--ink-3); }
.t-small { font-size: 12px; }
.t-strong { font-weight: 600; }

/* ── Barra superior ────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--s-panel);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  position: relative;
  z-index: 900;
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; color: inherit; }
.brand:hover { text-decoration: none; color: inherit; }
.brand-logo { height: 40px; width: auto; flex: 0 0 auto; display: block; }
.brand-text { min-width: 0; border-left: 1px solid var(--line); padding-left: 14px; }
.brand-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.022em;
  color: var(--ink);
  line-height: 1.06;
  white-space: nowrap;
}
.brand-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  margin-top: 3px;
}
.topbar-sep { width: 1px; height: 38px; background: var(--line); flex: 0 0 1px; }
.topbar-spacer { flex: 1 1 auto; min-width: 8px; }
.topbar-link {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
}
.topbar-link:hover { color: var(--brand-600); text-decoration: none; }
.topbar .btn-ghost { color: var(--ink-2); }

/* ── Selector (área) ─────────────────────────────────────────── */
.field-inline { display: flex; align-items: center; gap: 8px; }
.select, .input, textarea.input {
  height: 34px;
  padding: 0 30px 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--s-input);
  color: var(--ink);
  font-size: 13px;
  transition: border-color .14s, box-shadow .14s;
  max-width: 100%;
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='%238A979B' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.input { padding-right: 11px; }
textarea.input { height: auto; padding: 9px 11px; resize: vertical; line-height: 1.45; }
.select:hover, .input:hover { border-color: var(--ink-2); }
.select:focus, .input:focus { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 1px var(--brand-600); }
label.stack { display: grid; gap: 5px; font-size: 12.5px; color: var(--ink-2); }

/* ── Indicadores del semáforo en la barra ──────────────────────── */
.kpis { display: flex; gap: 7px; }
.kpi {
  display: flex; align-items: baseline; gap: 6px;
  padding: 5px 11px;
  border-radius: 0;
  border: 1px solid transparent;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.kpi b { font-family: var(--font-mono); font-size: 14px; font-weight: 600; line-height: 1; }
.kpi.lv3 { background: var(--lv3-bg); border-color: #F0CFCF; color: #8E2222; }
.kpi.lv2 { background: var(--lv2-bg); border-color: #F2D6C4; color: #96471B; }
.kpi.lv1 { background: var(--lv1-bg); border-color: #EFDFB4; color: #8A6412; }
.kpi.neutral { background: var(--s-sunken); border-color: var(--line); color: var(--ink-2); }

/* ── Botones ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--s-panel);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s, transform .06s;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--ink-inv); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--ink-inv); font-weight: 600; }
.btn-primary:hover { background: var(--brand-600); border-color: var(--brand-600); color: var(--ink-inv); }
.btn-danger { background: var(--s-panel); border-color: var(--brand-600); color: var(--brand-600); }
.btn-danger:hover { background: var(--brand-600); border-color: var(--brand-600); color: var(--ink-inv); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--s-hover); border-color: transparent; color: var(--ink); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { width: 34px; padding: 0; }
.btn-icon.btn-sm { width: 28px; }

/* ── Paneles y tarjetas ────────────────────────────────────────── */
.panel {
  background: var(--s-panel);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.panel-scroll { overflow-y: auto; overscroll-behavior: contain; }
.section {
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
}
.section:last-child { border-bottom: 0; }
.section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}
.card {
  background: var(--s-card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 13px;
}
.card-quiet { background: var(--s-sunken); border-color: transparent; }
.card-link { border-color: transparent; transition: border-color .14s; }
.card-link:hover { border-color: var(--brand-600); }

/* ── Scrollbars discretos ──────────────────────────────────────── */
.panel-scroll::-webkit-scrollbar, .scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.panel-scroll::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 0; border: 3px solid var(--s-panel);
}
.panel-scroll::-webkit-scrollbar-thumb:hover, .scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ── Filas de capa con interruptor ─────────────────────────────── */
.layer-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 7px;
  border-radius: var(--r-sm);
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}
.layer-row:hover { background: var(--s-hover); }
.layer-row .name { flex: 1; font-size: 12.8px; color: var(--ink-2); min-width: 0; }
.layer-row.on .name { color: var(--ink); font-weight: 500; }
.layer-row .hint { font-family: var(--font-body); font-size: 10.5px; font-weight: 600; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }

.switch {
  position: relative;
  width: 30px; height: 17px;
  flex: 0 0 30px;
  border-radius: 0;
  background: var(--line-strong);
  transition: background .16s;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px; border-radius: 0;
  background: #fff;
  transition: transform .16s;
}
.layer-row.on .switch { background: var(--ink); }
.layer-row.on .switch::after { transform: translateX(13px); }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

/* ── Control segmentado ────────────────────────────────────────── */
.segmented {
  display: flex;
  background: var(--s-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 2px;
  gap: 2px;
}
.segmented button {
  flex: 1;
  height: 27px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .13s, color .13s, box-shadow .13s;
  white-space: nowrap;
}
.segmented button:hover { color: var(--ink-2); }
.segmented button.on { background: var(--ink); color: var(--ink-inv); }

/* ── Filtros de nivel ──────────────────────────────────────────── */
.lvfilter { display: flex; flex-direction: column; gap: 4px; }
.lvfilter label {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 12.8px;
  color: var(--ink-3);
  background: var(--s-panel);
  transition: all .13s;
}
.lvfilter label:hover { border-color: var(--line-strong); }
.lvfilter input { display: none; }
.lvfilter .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; opacity: .35; transition: opacity .13s; }
.lvfilter .count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; }
.lvfilter label.on { color: var(--ink); background: var(--s-panel); border-color: var(--line-strong); font-weight: 500; }
.lvfilter label.on .dot { opacity: 1; }
.lvfilter label.on.l3 { background: var(--lv3-bg); border-color: #EFC9C9; }
.lvfilter label.on.l2 { background: var(--lv2-bg); border-color: #F0CFBB; }
.lvfilter label.on.l1 { background: var(--lv1-bg); border-color: #EDDAA9; }
.d1 { background: var(--lv1); } .d2 { background: var(--lv2); } .d3 { background: var(--lv3); }

/* ── Deslizador ────────────────────────────────────────────────── */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 0; background: var(--line-strong); cursor: pointer; width: 100%;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--ink); border: 2px solid #fff;
}
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--ink); border: 2px solid #fff;
}

/* ── Insignias y chips ─────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.badge.l1 { background: var(--lv1-bg); color: #8A6412; }
.badge.l2 { background: var(--lv2-bg); color: #96471B; }
.badge.l3 { background: var(--lv3-bg); color: #8E2222; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.neutral { background: var(--s-sunken); color: var(--ink-2); }
.badge.blue { background: var(--s-sunken); color: var(--nav); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--s-panel);
  font-size: 11.5px;
  color: var(--ink-2);
}

/* ── Lista de datos ────────────────────────────────────────────── */
.dl { display: grid; grid-template-columns: minmax(96px, 42%) 1fr; gap: 6px 12px; font-size: 12.8px; }
.dl dt { color: var(--ink-3); }
.dl dd { color: var(--ink); }

/* ── Modal ─────────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(8, 17, 20, .5);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: 20px;
  animation: fade .16s ease;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise { from { transform: translateY(12px); opacity: 0 } to { transform: none; opacity: 1 } }
.modal {
  width: min(440px, 100%);
  background: var(--s-panel);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
  overflow: hidden;
  animation: rise .18s ease;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.022em; }
.modal-body { padding: 18px; display: grid; gap: 13px; }
.modal-foot { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; gap: 9px; justify-content: flex-end; background: var(--s-sunken); }

/* ── Avisos ────────────────────────────────────────────────────── */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 2500; display: grid; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 10px;
  min-width: 250px; max-width: 380px;
  padding: 11px 14px;
  background: var(--s-dark);
  color: var(--ink-inv);
  border-radius: var(--r);
  box-shadow: var(--sh-3);
  font-size: 13px;
  animation: rise .18s ease;
}
.toast .bar { width: 3px; align-self: stretch; border-radius: 0; background: var(--ink-on-dark-2); flex: 0 0 3px; }
.toast.ok .bar { background: #4ADE80; }
.toast.err .bar { background: #F87171; }

/* ── Vacíos y carga ────────────────────────────────────────────── */
.empty {
  display: grid; place-items: center; gap: 9px;
  padding: 34px 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 12.8px;
}
.empty svg { opacity: .32 }
.spinner {
  width: 15px; height: 15px; flex: 0 0 15px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--brand-600);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }
.skeleton {
  background: linear-gradient(90deg, var(--s-sunken) 25%, #EFECE5 37%, var(--s-sunken) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { from { background-position: 100% 0 } to { background-position: 0 0 } }

.hidden { display: none !important; }

/* Capas satelitales: fecha, explicación y leyenda */
.wms-sub { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; margin-top: 1px; }
.wms-help { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; margin: 2px 0 4px 44px; }
.wms-legend { margin: 2px 0 10px 44px; max-width: 200px; }
.wms-legend.hidden { display: none; }
.lg-bar { height: 10px; border-radius: 0; border: 1px solid var(--line-strong);
  background-color: #fff;
  background-image: linear-gradient(45deg, #E7E3DA 25%, transparent 25%, transparent 75%, #E7E3DA 75%); }
.lg-ticks, .lg-ends { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.lg-ends { color: var(--ink-2); font-size: 11px; gap: 6px; }
.lg-ends span:nth-child(2):not(:last-child) { color: var(--ink-3); }