/* ============ Proyecto de Ampliación General · Cancún ============ */
:root {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --page: #f9f9f7;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #6a6862;
  --hairline: #e1e0d9;
  --border: rgba(11, 11, 11, 0.10);
  --cat-0: #2a78d6;   /* Ampliación */
  --cat-1: #eb6834;   /* Obras Públicas */
  --cat-2: #1baf7a;   /* Servicio Cumbres 1220 */
  --sidebar-w: 372px;
  --topbar-h: 64px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  background: var(--page);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Header ---------- */
.topbar {
  height: var(--topbar-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--hairline);
  z-index: 20;
}
.brand { min-width: 0; }
.brand-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-sub {
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- switch de modo ---------- */
.modos {
  flex: 0 0 auto;
  display: flex;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  background: var(--page);
}
.modo-btn {
  font: inherit;
  font-size: 13px;
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.modo-btn:hover { background: #f3f2ee; }
.modo-btn.activo {
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}

.kpis {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.kpis::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  border-radius: 10px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink);
  transition: background .15s, opacity .15s, border-color .15s;
}
.chip:hover { background: #f3f2ee; }
.chip .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c);
  flex: 0 0 auto;
}
.chip .n { font-weight: 700; font-variant-numeric: tabular-nums; }
.chip .lbl { color: var(--ink-2); }
.chip.off {
  color: var(--muted);
  border-style: dashed;
  background: transparent;
}
.chip.off .dot { background: var(--muted); }
.chip.off .lbl { color: var(--muted); }
.chip.total {
  cursor: default;
  border-color: transparent;
  background: transparent;
  padding-right: 4px;
}
.chip.total .n { font-size: 15px; }

/* ---------- Layout ---------- */
.content {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  position: relative;
}
#map { flex: 1 1 auto; min-width: 0; position: relative; }

/* ---------- herramientas del mapa (modo estatus) ---------- */
.map-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 12;
  display: flex;
  gap: 8px;
}
.tool-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-1);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(11,11,11,.10);
}
.tool-btn:hover { background: #f3f2ee; }
.tool-btn.activo {
  background: #1c5cab;
  border-color: #1c5cab;
  color: #fff;
}

.base-switch {
  display: flex;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-1);
  box-shadow: 0 1px 4px rgba(11,11,11,.10);
}
.base-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 10px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.base-btn + .base-btn { border-left: 1px solid var(--hairline); }
.base-btn:hover { background: #f3f2ee; }
.base-btn.activo { background: var(--ink); color: #fff; }

.lazo-bar {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 13;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: min(94%, 720px);
  padding: 10px 14px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(11,11,11,.16);
}
.lazo-msj { font-size: 13px; font-weight: 600; }
.lazo-acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.lazo-est {
  display: flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  background: var(--page);
  cursor: pointer;
}
.lazo-est:hover { border-color: var(--e); }
.lazo-est .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--e); }
.lazo-cancelar {
  font: inherit;
  font-size: 12.5px;
  border: none;
  background: none;
  color: var(--ink-2);
  text-decoration: underline;
  cursor: pointer;
}
.lazo-cancelar:hover { color: var(--ink); }

/* ---------- Sidebar ---------- */
.sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  background: var(--surface-1);
  border-left: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  min-height: 0;
  z-index: 10;
}
.sheet-handle { display: none; }

.side-head {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--hairline);
  flex: 0 0 auto;
}
.buscar {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--page);
  color: var(--ink);
  outline: none;
}
.buscar:focus { border-color: var(--cat-0); }
.side-meta-fila {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.side-meta {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sync-badge { font-size: 11px; white-space: nowrap; }
.sync-badge.ok { color: #006300; }
.sync-badge.mal { color: #b73333; }

/* ---------- Detalle de colonia seleccionada ---------- */
.detalle {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--hairline);
  padding: 12px 14px;
  background: #f6f8fb;
}
.detalle .det-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.detalle .det-nombre {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  flex: 1 1 auto;
}
.detalle .det-close {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.detalle .det-close:hover { color: var(--ink); }
.detalle .det-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.detalle .det-sub .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.detalle .det-stats {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  font-size: 12px;
}
.detalle .det-col { display: grid; gap: 3px; align-content: start; }
.detalle .det-h {
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1px;
}
.detalle .det-col > div:not(.det-h) {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-2);
}
.detalle .det-stats b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* estatus dentro de la tarjeta de detalle */
.detalle .det-est {
  display: flex;
  gap: 14px;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.detalle .det-est-cifra { display: flex; align-items: center; gap: 5px; }
.detalle .det-est .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.detalle .det-marcar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.detalle .det-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 9px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-1);
  cursor: pointer;
}
.detalle .det-btn:hover { border-color: var(--e); }
.detalle .det-btn .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--e); }
.detalle > .det-h { margin-top: 10px; }

/* ---------- Lista de colonias ---------- */
.lista {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 0 24px;
}
.fila {
  width: 100%;
  display: block;
  text-align: left;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  padding: 8px 14px 9px;
  border-left: 3px solid transparent;
}
.fila:hover { background: #f3f2ee; }
.fila.activa {
  background: #eef4fc;
  border-left-color: var(--cat-color, var(--cat-0));
}
.fila .f1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.fila .rank {
  flex: 0 0 24px;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.fila .nombre {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  min-width: 0;
  /* títulos de contrato de +150 caracteres: máximo 3 líneas en la lista */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fila .cuenta {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fila .f2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-left: 32px;
}
.fila .barra {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 2px;
  background: #efeeea;
  overflow: hidden;
}
.fila .barra > i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--cat-color);
}
/* barra apilada por estatus (verde / gris / rojo) */
.fila .barra.apilada { display: flex; }
.fila .barra.apilada > i { border-radius: 0; flex: 0 0 auto; }
.fila .smz {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: var(--muted);
}
.lista .vacio {
  padding: 24px 16px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* ---------- Popup del mapa ---------- */
.maplibregl-popup { z-index: 15; }
.maplibregl-popup-content {
  font-family: inherit;
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(11,11,11,.14);
  min-width: 200px;
}
.pop-colonia {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  padding-right: 12px;
}
.pop-link {
  display: block;
  border: none;
  background: none;
  padding: 0 12px 0 0;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  color: #1c5cab;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.pop-link:hover { color: #184f95; }
.pop-cat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 3px;
}
.pop-cat .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.pop-filas { margin-top: 8px; font-size: 12px; color: var(--ink-2); display: grid; gap: 2px; }
.pop-filas b { color: var(--ink); font-weight: 600; }
.maplibregl-popup-close-button {
  font-size: 16px;
  padding: 2px 6px;
  color: var(--muted);
}
.pop-est-grupo {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}
.pop-est {
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 7px;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  background: var(--page);
  color: var(--ink-2);
  cursor: pointer;
}
.pop-est:hover { border-color: var(--e); color: var(--ink); }
.pop-est.activo {
  background: var(--e);
  border-color: var(--e);
  color: #fff;
}

.maplibregl-ctrl-attrib { font-size: 10px; }

/* ---------- diálogo de inicio de sesión ---------- */
.login-dlg {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 20px;
  width: min(92vw, 380px);
  box-shadow: 0 8px 32px rgba(11,11,11,.22);
  font-family: inherit;
  color: var(--ink);
}
.login-dlg::backdrop { background: rgba(11,11,11,.35); }
.login-titulo { font-size: 16px; font-weight: 700; }
.login-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.login-campo {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.login-campo select,
.login-campo input {
  display: block;
  width: 100%;
  margin-top: 5px;
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  background: var(--page);
  color: var(--ink);
}
.login-error {
  margin-top: 10px;
  font-size: 12.5px;
  color: #b73333;
  font-weight: 600;
}
.login-botones {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}
.login-cancelar {
  font: inherit;
  font-size: 13px;
  padding: 7px 12px;
  border: none;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}
.login-entrar {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 16px;
  border: none;
  border-radius: 9px;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
}
.login-entrar:disabled { opacity: .6; }

.pop-editor {
  margin-top: 7px;
  font-size: 10.5px;
  color: var(--muted);
}

.mapa-caido {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- Móvil: sidebar como hoja inferior ---------- */
@media (max-width: 768px) {
  :root { --topbar-h: auto; }
  .topbar {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 14px;
  }
  .kpis { margin-left: 0; flex-wrap: wrap; }
  .chip { padding: 5px 10px; font-size: 12px; }
  .brand-title { font-size: 15px; }

  .content { flex-direction: column; }
  #map { flex: 1 1 auto; }

  .sidebar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: auto;
    flex: none;
    height: 46%;
    border-left: none;
    border-top: 1px solid var(--hairline);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -4px 16px rgba(11,11,11,.10);
    transition: height .25s ease;
  }
  /* plegada: solo manija + búsqueda; si hay colonia seleccionada,
     se muestra su tarjeta de detalle en lugar de la búsqueda */
  .sidebar.plegada { height: auto; }
  .sidebar.plegada .lista { display: none; }
  .sidebar.plegada.con-detalle .side-head { display: none; }

  .sheet-handle {
    display: flex;
    justify-content: center;
    padding: 8px 0 2px;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .sheet-handle span {
    width: 40px; height: 4px;
    border-radius: 2px;
    background: var(--hairline);
  }
  .side-head { padding-top: 4px; }
}